From 3a5b29e329cd6f1bb627acdea4c2829b5fb200cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E8=A3=95=E8=B4=A2?= <cyc58469@163.com>
Date: Wed, 17 Jan 2024 10:54:49 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B8=A6=E4=BB=A3=E7=A0=81=E5=B9=B3=E5=8F=B0-?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0readme=E5=90=88=E4=BD=9C=E6=96=B9=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/mdp-ui/mdp-table/README.md | 337 +++++++++++-----------
 1 file changed, 168 insertions(+), 169 deletions(-)

diff --git a/src/components/mdp-ui/mdp-table/README.md b/src/components/mdp-ui/mdp-table/README.md
index 517ff07..a745762 100644
--- a/src/components/mdp-ui/mdp-table/README.md
+++ b/src/components/mdp-ui/mdp-table/README.md
@@ -1,180 +1,179 @@
-## 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
+### mdp-table
+该组件相对于el-table，进行了以下优化：
+内置了增、删、改、查、高级查询、重置查询、导出、列配置、分页、批量编辑等功能、内置了对按钮权限的控制机制,功能非常强大
+
+- 综合管理  
+  ![综合管理表格](/docs/images/ui-components/table-mng.jpg)
+- 可编辑表格    
+  ![可编辑表格](/docs/images/ui-components/edit-table.jpg)
+- 可编辑-树状表格    
+  ![可编辑-树状表格](/docs/images/ui-components/left-right-tree-table.jpg)
+
+### 用法
+
+#### 基本用法，根el-table保持一致,直接定义表头，mdp框架将解析出表头内容，用于配置显示列，排序，高级查询等
+```html 
+<mdp-table :crud-apis="crudApis">
+    <el-table-column
+        prop="bizDate"
+        label="日期"
+        width="180">
+      </el-table-column>
+      <el-table-column
+        prop="stuName"
+        label="姓名"
+        width="180">
+      </el-table-column>
+      <el-table-column
+        prop="stuAddress"
+        label="地址">
+      </el-table-column>
+</mdp-table>
+``` 
+```js 
+  <script>
+    export default {
+      data() {
+        return { 
+            //操作后台数据的api列表
+            crudApis:{
+                list:this.$mdp.listUser,
+                add: this.$mdp.addUser,
+                edit: this.$mdp.editUser,
+                del: this.$mdp.delUser,
+                editSomeFields:this.$mdp.editSomeFieldsUser,
+            } 
         }
-```
-
-
-
-```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="../../../../docs/images/ui-components/mdp-table/image-20240113175843075.png" alt="image-20240113175843075" style="zoom:50%;" />
-
-<img src="../../../../docs/images/ui-components/mdp-table/image-20240113175907878.png" alt="image-20240113175907878" style="zoom:50%;" />
-
-模糊查询
-
-<img src="../../../../docs/images/ui-components/mdp-table/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"
+      }
     }
-  ]
+  </script>
 ```
 
 
-
-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]
+#### 通过属性columnCfgs传入表格字段列表，mdp框架将解析出表头内容，用于配置显示列，排序，高级查询等
+```html 
+<mdp-table :crud-apis="crudApis" :column-cfgs="columnCfgs"> 
+</mdp-dialog>
+``` 
+```js 
+  <script>
+    export default {
+      data() {
+        return { 
+            //操作后台数据的api列表
+            crudApis:{
+                list:this.$mdp.listUser,
+                add: this.$mdp.addUser,
+                edit: this.$mdp.editUser,
+                del: this.$mdp.delUser,
+                editSomeFields:this.$mdp.editSomeFieldsUser,
+            },
+            columnCfgs:{
+                [
+                    {label:'日期',property:'bizDate'},
+                    {label:'姓名',property:'stuName'},
+                    {label:'地址',property:'stuAddress'},
+                ]
+            }
+        }
+      }
     }
-  }
-  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',});
-  }
-},
+  </script>
 ```
 
-父组件：
-
-```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});
+#### 多选、单选模式、可编辑表格
+```html 
+<mdp-table :crud-apis="crudApis" :column-cfgs="columnCfgs" :multiple="true" :edit="true"> 
+</mdp-dialog>
+``` 
+```js 
+  <script>
+    export default {
+      data() {
+        return { 
+            //操作后台数据的api列表
+            crudApis:{
+                list:this.$mdp.listUser,
+                add: this.$mdp.addUser,
+                edit: this.$mdp.editUser,
+                del: this.$mdp.delUser,
+                editSomeFields:this.$mdp.editSomeFieldsUser,
+            },
+            columnCfgs:{
+                [
+                    {label:'日期',property:'bizDate'},
+                    {label:'姓名',property:'stuName'},
+                    {label:'地址',property:'stuAddress'},
+                ]
+            }
+        }
       }
-    },
-    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},
-      // 可以根据需要添加其他列配置
-    ]
-  }
-}
+    }
+  </script>
 ```
 
-<img src="../../../../docs/images/ui-components/mdp-table/image-20240113184113330.png" alt="image-20240113184113330" style="zoom:50%;" />
+### Attributes
+|参数|说明|类型|可选值|默认值|
+|--------|------|--------|-----------------|----------------|
+|crud-apis|增删改查的接口函数|object|-| -
+|multiple|是否多选|boolean|—|false
+|show-hi-query|是否显示高级查询|boolean|—|true
+|show-common-query|是否显示常规查询|boolean|—|true
+|edit|是否可编辑|boolean|—|false
+|column-cfgs|表头列配置项列表|Array|-|-
+
+
+
+### Events
+|事件名称|说明|回调参数|
+|--------|------|--------|
+change2|选中值发生变化时触发，在需要获取值以外更多信息时使用|目前的选中的整个对象,如果multiple=false,返回一个对象，否则返回对象数组
+change|选中值发生变化时触发|目前的选中值，如果multiple=false,返回一个值，否则返回值数组，如果split有则，则返回以split分割的字符串，如1,2,3,4,5
+visible-change|下拉框出现/隐藏时触发|出现则为 true，隐藏则为 false
+remove-tag|多选模式下移除tag时触发|移除的tag值
+clear|可清空的单选模式下用户点击清空按钮时触发|—
+blur|当 input 失去焦点时触发|(event: Event)
+focus|当 input 获得焦点时触发|(event: Event)
+
+### slot
+|name|说明|
+|--------|------|
+—|Option 组件列表
+info|鼠标未进入时展示的内容，showStyle=tag\x时有效
+oper|鼠标进入后展示的内容，showStyle=tag\x时有效
+~~prefix|Select 组件头部内容~~
+empty|无选项时的列表
+
+### column-cfgs 表头字段配置
+
+|参数|说明|类型|可选值|默认值|
+|--------|------|--------|-----------------|----------------|
+label|列名|string|—|—
+property|属性名，驼峰命名，用于反解析出表字段|string|—|—
+sortNo|前端显示排序，排序从0-999，越小越靠前,在表头、常规查询、高级查询的显示顺序|Number|—|—
+isCommon|是否常用，用于常规查询是否显示|Boolean|true/false|false
+colType|数据库字段类型| string/int/date/datatime/|—|—
+showHq|是否在高级查询中显示|true|—|—
+label|列名|string|—|—
+label|列名|string|—|—
+label|列名|string|—|—
+label|列名|string|—|—
+label|列名|string|—|—
+label|列名|string|—|—
+label|列名|string|—|—
+
+### crud-apis api列表
+
+|参数|说明|类型|可选值|默认值|
+|--------|------|--------|-----------------|----------------|
+list|查询api|Promise|—|—
+add|新增api|Promise|—|—
+edit|修改api|Promise|—|—
+del|删除api|Promise|—|—
+editSomeFields|批量修改部分字段|Promise|—|—
+### Methods
+
+|方法名|说明|参数|
+|--------|------|--------|
+focus|使 input 获取焦点|-
+blur|使 input 失去焦点，并隐藏下拉框|-
\ No newline at end of file