更新readme table文件

src/components/mdp-ui/mdp-table/README.md

@@ -0,0 +1,180 @@
+## mdp-table
+
+
+
+#### 简单使用
+
+后端必须是该系统的后端项目
+
+```vue
+<mdp-table :crud-apis="crudApis" :visible="true" :column-cfgs="columnConfigs" ></mdp-table>
+```
+
+```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
+```
+
+<img src="/Users/mengdanai/Library/Application Support/typora-user-images/image-20240113175843075.png" alt="image-20240113175843075" style="zoom:50%;" />
+
+<img src="/Users/mengdanai/Library/Application Support/typora-user-images/image-20240113175907878.png" alt="image-20240113175907878" style="zoom:50%;" />
+
+模糊查询
+
+<img src="/Users/mengdanai/Library/Application Support/typora-user-images/image-20240113180009654.png" alt="image-20240113180009654" style="zoom:50%;" />
+
+支持>、<、 >=、<=、!=、*陈*、$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
+<mdp-table :crud-apis="crudApis" :visible="true" :column-cfgs="columnConfigs" :multiple="true"/>
+```
+
+```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},
+      // 可以根据需要添加其他列配置
+    ]
+  }
+}
+```
+
+<img src="/Users/mengdanai/Library/Application Support/typora-user-images/image-20240113184113330.png" alt="image-20240113184113330" style="zoom:50%;" />