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

mdp-table

简单使用

后端必须是该系统的后端项目

<mdp-table :crud-apis="crudApis" :visible="true" :column-cfgs="columnConfigs" ></mdp-table>

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配置文件是 体验环境 中的角色管理页的接口

返回的单个数据格式：

        {
            "branchId": "",
            "roleend": null,
            "roleid": "",
            "rolename": "",
            "sortOrder": null,
            "crdate": null,
            "deptid": "",
            "remark": "",
            "roletype": "",
            "dataLvl": 5,
            "enabled": "",
            "rolebeg": null
        }

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

模糊查询

支持>、<、 >=、<=、!=、陈、$IS NULL、$IN 1,2,3、between 1,5等操作符

---

自定义

测试接口：https://reqres.in/api/users

接口首页: https://reqres.in

响应数据：

{
  "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：

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:

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',});
  }
},

父组件：

<mdp-table :crud-apis="crudApis" :visible="true" :column-cfgs="columnConfigs" :multiple="true"/>

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},
      // 可以根据需要添加其他列配置
    ]
  }
}