# persist-ui

**Repository Path**: cheng-lei04/persist-ui

## Basic Information

- **Project Name**: persist-ui
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-08-25
- **Last Updated**: 2022-01-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



# persist-ui

## 项目目录简介

```lua
persist-ui
├── docker
     ├── docker-compose.yaml         -- 用于容器化部署的
     ├── Dockerfile                  -- 用于做成docker镜像的Dockerfile文件
     └── pig-ui.conf                 -- nginx 配置
├── node_modules                     -- 执行 npm install 生成的文件 node.js 的依赖文件在此包中
├── public
├── src
     ├── api                         -- 请求后端接口api 的调用地点
     ├── components
     ├── config
     ├── const
         ├── crud
             ├── admin               -- admin 中常量定义  常用于avue的配置json     
     ├── filters
     ├── mixins
     ├── page                        -- 项目页面 layout
         ├── index
             ├── sidebar             -- 边栏布局
                 ├── config.js       -- 菜单配置     
                 ├── index.vue       -- 菜单项
                 └── sidebarItem.vue -- 菜单项
     ├── router
     ├── store
     ├── styles
     ├── util                        -- 工具箱
         ├── validate.js             -- 数据校验工具  
     ├── views                       -- 项目开发的vue 页面文件件
         ├── admin                   -- admin 模块 页面
         └── gen
     ├── App.vue                     -- 项目页面入口
     ├── error.js
     ├── main.js
     └── permission.js
├── .browserslistrc
├── .editorconfig
├── .eslintrc.js
├── .gitignore                        -- git 提交忽略提交的文件
├── .postcssrc.js
├── babel.config.js
├── LICENSE
├── package.json
├── package-lock.json
├── README.md                         -- 项目介绍说明
└── vue.config.js                     -- 全局的cli配置 在这里指定域名端口号
```



## 项目启动

1> git clone 下载项目

```http
https://gitee.com/cheng-lei04/persist-ui.git
```

2> 将项目使用ide打开

注意：前题是已经安装好了node.js

3> 执行 npm install 进行初始化，其会生成 node_modules 文件夹以及 package-lock.json 文件

4> npm run dev 执行

### 启动可能遇到的问题

**问题1：**

> npm install

报错: 
Error: Can't find Python executable "python", you can set the PYTHON env variable.
> npm install --global node-gyp
> npm install
> npm run dev



## 页面开发

### 基础vue页面

```vue
<template>
    <basic-container>

    </basic-container>
</template>

<script>
    export default {
        name: 'Dict',
        data() {
            return {
            }
        },
        computed: {
        },
        created() {
        },
        methods: {

        }
    }
</script>
<style lang="scss" scoped>
</style>
```

### avue-crud属性说明

[avue 学习使用](https://avuejs.com/crud/crud-slot.html)

```vue
<avue-crud :data="data" :option="option" v-model="obj" :before-close="beforeOpen">
	<!-- 自定义列-->
	<template slot="name" slot-scope="scope" >
		<el-tag></el-tag>
	</template>
	<!-- 自定表单-->
	<template slot-scope="scope" slot="nameForm">
		<el-tag></el-tag>
	</template>
	<!-- 自定义菜单 配置slot卡槽为menuLeft为表单菜单左边位置,卡槽为menuRight为表格菜单右边的位置-->
	<template slot="menuLeft">
		<el-button type="primary" size="small">自定义按钮</el-button>
	</template>
	<template slot="menuRight">
		<el-button type="primary" icon="el-icon-edit" circle size="small"></el-button>
	</template>
	<!-- 自定义表格里面的操作-->
	<template slot-scope="scope" slot="menu">
		<el-button icon="el-icon-check" size="small">自定义菜单按钮</el-button>
	</template>
</avue-crud>
```

```json
data() {
    return {
      obj:{},
      data: [
        {
          name:'张三',
          sex:'男',
          date:'1994-02-23 00:00:00'
        }, {
          name:'李四',
          sex:'女',
          date:'1994-02-23 00:00:00'
        }, {
          name:'王五',
          sex:'女',
          date:'1994-02-23 00:00:00'
        }, {
          name:'赵六',
          sex:'男',
          date:'1994-02-23 00:00:00'
        }
      ],
	  // 表格配置
      option:{
        title:'表格的标题',
        align:'center', // 表格列齐方式
        menuAlign:'center', // 菜单栏对齐方式
        columnBtn:false, //列动态显隐按钮
        refreshBtn:false, // 刷新按钮
        saveBtn:false, // 保存按钮;
        updateBtn:false, // 更新按钮
        cancelBtn:false, // 行编辑取消按钮
        addBtn:false, // 表格新增按钮
        delBtn:false, // 行删除按钮
        editBtn:false, // 行编辑按钮
        column:[
          {
            label:'姓名',
            prop:'name',
            slot:true, // 自定义列
            formslot:true // 自定义表单
          },
          {
            label:'性别',
            prop:'sex'
          },{
            label: "日期",
            prop: "date",
            type: "date",
            format: "yyyy-MM-dd hh:mm:ss",
            valueFormat: "yyyy-MM-dd hh:mm:ss",
          }
        ]
      }
    }
}
```

```json

表格属性：

//弹出框的宽度
dialogWidth: '60%',
//表格宽度
width: “100%”,
//表格高度差（主要用于减去其他部分让表格高度自适应）
calcHeight: “auto”,
//表格高度
height: “auto”,
//表格最大高度
maxHeight: “auto”,
//是否显示表格边框
border: true,
//是否展开折叠行
expand: false,
//是否显示表格序号（根据分页会自动计算，比如每页10行，到了第二页就会从11开始记数）
index: false,
//序号的标题
indexLabel: “#”,
//是否显示表格的斑马条纹
stripe: true,
//是否显示表格的表头
showHeader: true,
// 表格的排序字段{prop:‘date’,order:‘descending/ascending’}prop默认排序字段，order排序方式
defaultSort:
//表格列对其方式left/center/right
align: “center”,
//是否显示操作菜单栏
menu: true,
//操作菜单栏的宽度
menuWidth: 240,
//菜单栏对齐方式left/center/right
menuAlign: “left”,
//搜索控件的大小small/mini
searchSize: “small”,
//列显隐按钮
columnBtn: true,
//刷新按钮
refreshBtn: true,
//添加按钮
addBtn: true,
//搜索显隐按钮（当column中有搜索的属性，或则searchslot为true时自定义搜索启动起作用）
searchBtn: true,
//行内编辑按钮
editBtn: true,
//行能删除按钮
delBtn: true,
//是否应用为表格树
tree: false,
//是否懒加载
lazy: false,
// 查询按钮的间距
searchMenuSpan：


列属性：

//列名称
label:“租户ID”,
//列字段
prop:“id”,
//控件提示输入语句
placeholder:“请输入租户ID”,
//列的对其方式，覆盖table的align
align:“left”,
//列宽度
width:
//列最小宽度
minWidth:“auto”,
//排序
sortable:false,
//隐藏列 表格起作用
hide:true,
//表单栅列
span:12,
//数字框输入精度（当type为number时）
precision:2,
//是否支持搜索
search:false,
//input/select/radio/checkbox/textarea/cascader/date/time/datetime/daterange/timerange/datetimerange/week/month/year/dates/password/switch/tree
type:“input”,
//最大行（当type为textarea）
maxRows:4,
//最小行（当type为textarea）
minRows:2,
multiple:false,多选（当type为select/tree时）
//显示值时间格式（当type为date/time/datetime/daterangetimerange/datetimerange/week/month/year/date
format:"",
//真实值的时间格式（当type为date/time/datetime/daterangetimerange/datetimerange/week/month/year/dates)
valueFormat:"",
//表单清空
clearable:true,
//表单大小medium/small/mini
size:“medium”,
//表单编辑时是否禁止
editDisabled:false,
//表单编辑是否可见
editDisplay:false,
//表单编辑时是否禁止
addDisabled:false,
//表单编辑是否可见
addDisplay:false,
//列自定义 支持自定义列
slot:false,
//表单自定义
formslot:false,
//冻结列
fixed:true,
//表单宽度
formWidth:“auto”,
//表单行高度
formHeight:“auto”,
//超出隐藏
overHidden:false,
//表单规则,参考ele表单规则配置Object
rules:
//传入本次需要的静态字典（在column中dicData写对象key值即可加载）
dicData:
//传入字典的请求方式
dicMethod:
//传入字典的请求参数Object
dicQuery:
//字典的后端api请求接口（例如配置/xxx/xx/{{key}},这样的格式，在column中dicData自动匹配prop字段名）
dicUrl:
```



## 函数使用

### Object.assign()

```js
Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
Object.assign(target, ...sources)    【target：目标对象】，【souce：源对象（可多个）】
```