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

## 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%;" />