diff --git a/src/components/mdp-ui/mdp-table/README.md b/src/components/mdp-ui/mdp-table/README.md new file mode 100644 index 0000000..1fda575 --- /dev/null +++ b/src/components/mdp-ui/mdp-table/README.md @@ -0,0 +1,180 @@ +## mdp-table + + + +#### 简单使用 + +后端必须是该系统的后端项目 + +```vue + +``` + +```js +data() { + return { + crudApis: { + // list: params => { + // return axios.get(``, {params}); + // } + list: params => { + config.params = params + return axios.request(config) + } + }, + columnConfigs: [ + // {property: 【需要显示的数据,返回的单个数据的key】, label: 【表头】, isCommon: 【是否可查询】}, + {property: 'rolename', label: 'rolename', isCommon: true}, + {property: 'branchId', label: 'branchId', isCommon: true}, + {property: 'dataLvl', label: 'dataLvl', isCommon: true}, + // 可以根据需要添加其他列配置 + ] + } +``` + +config配置文件是 [体验环境](https://maimengcloud.com/lcode/m1/) 中的角色管理页的接口 + +返回的单个`数据格式`: + +```json + { + "branchId": "", + "roleend": null, + "roleid": "", + "rolename": "", + "sortOrder": null, + "crdate": null, + "deptid": "", + "remark": "", + "roletype": "", + "dataLvl": 5, + "enabled": "", + "rolebeg": null + } +``` + + + +```js +const axios = require('axios'); + +let config = { + method: 'get', + maxBodyLength: Infinity, + url: 'https://maimengcloud.com/api/m1/lcode/mdp/sys/role/list', + headers: { + ..... + }, +}; + +export default config +``` + +image-20240113175843075 + +image-20240113175907878 + +模糊查询 + +image-20240113180009654 + +支持>、<、 >=、<=、!=、*陈*、$IS NULL、$IN 1,2,3、between 1,5等操作符 + +----- + +#### 自定义 + +测试接口:https://reqres.in/api/users + +接口首页: https://reqres.in + +响应数据: + +```json +{ + "page":1, + "per_page":6, + "total":12, + "total_pages":2, + "data":[ + { + "id":1, + "email":"george.bluth@reqres.in", + "first_name":"George", + "last_name":"Bluth", + "avatar":"https://reqres.in/img/faces/1-image.jpg" + } + ] +``` + + + +Mdp-table: + +```js +preQueryParamCheck(params) { + //处理参数以满足调用后台接口 + params.per_page = params.pageSize; + params.page = params.pageNum; + let arr = ['pageSize', 'pageNum', 'total', 'count'] // 需要删除内部实现的分页 + for (let item in params) { + if (params[item] === undefined || params[item] === '' || arr.includes(item)) { // 判断查询条件是否存在 + delete params[item] + } + } + if (!isNaN(params.id)) { + params.id = parseInt(params.id, 10); + } else { + delete params.id + } + return true; +}, +``` + +Mdp-table: + +```js +getResult(res, apiName) { + // 请求结果处理 + let data = res.data + if (res.status === 200) { + this.pageInfo.total = data.total; + this.pageInfo.pageNum = data.page; + this.pageInfo.pageSize = data.per_page; + let tableDatas = Array.isArray(data.data) ? data.data : new Array(data.data); + this.tableDatas = tableDatas + this.parseExpand(tableDatas, this.expandFieldName) + this.afterList(tableDatas, res.status, apiName) + } else { + this.$notify({title: data.support.url, message: data.support.text, type: 'success',}); + } +}, +``` + +父组件: + +```vue + +``` + +```js +data() { + return { + crudApis: { + list: params => { + return axios.get(`https://reqres.in/api/users`, {params}); + } + }, + columnConfigs: [ + {property: 'avatar', label: '头像', isCommon: false}, + {property: 'email', label: '邮箱', isCommon: false}, + {property: 'first_name', label: '名字', isCommon: false}, + {property: 'last_name', label: '姓', isCommon: false}, + {property: 'id', label: 'Id', isCommon: true}, + // 可以根据需要添加其他列配置 + ] + } +} +``` + +image-20240113184113330