合并产品3.2分支提交日志: * 5018 点击合同查询合同明细默认查询摸错

applications/dee-mes/src/components/MockTable/index.vue

+<!--
+ * @Description: 表格，用于在前端对数据进行添加、删除和编辑，并对数据进行标记后发给后端
+-->
+<template>
+  <GeneralTableCom
+    :table-height="tableHeight"
+    :lay-config="layConfig"
+    :result-data="tableData | capitalize(pagination)"
+    :total="total"
+    @pageChange="pageChange"
+    @loaded="loaded"
+    v-on="$listeners"
+  />
+</template>
+<script>
+export default {
+  name: 'MockTable',
+  filters: {
+    capitalize: (list, pagination) => {
+      if (!pagination || !pagination.pageSize) {
+        return list
+      }
+      const start = (pagination.currentPage - 1) * pagination.pageSize
+      const end = start + pagination.pageSize
+      return list.slice(start, end)
+    }
+  },
+  inheritAttrs: false,
+  props: {
+    linkName: {
+      type: String,
+      default: 'target'
+    },
+    layConfig: {
+      type: Object,
+      default: () => ({ typeName: '', layKey: '' })
+    },
+    basicData: {
+      type: Array,
+      default: () => []
+    },
+    tableFilter: {
+      type: Function,
+      default: v => v.operator !== 'REMOVE'
+    },
+    tableHeight: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      pagination: {
+        currentPage: 1,
+        pageSize: 10
+      }
+    }
+  },
+  computed: {
+    tableData() {
+      return typeof this.tableFilter === 'function' ? this.basicData.filter(this.tableFilter) : this.tableData
+    },
+    total() {
+      return this.tableData.length
+    }
+  },
+  mounted() {
+    this.expose()
+  },
+  methods: {
+    loaded({ pageSize }) {
+      this.pagination.pageSize = pageSize
+    },
+    pageChange({ pageFrom, pageSize }) {
+      this.pagination = {
+        currentPage: pageFrom,
+        pageSize
+      }
+    },
+    add(data, func) {
+      let newData = []
+      if (!Array.isArray(data)) {
+        newData.push(data)
+      } else {
+        newData = newData.concat(data)
+      }
+      const ret = this.basicData
+      const isEqual = typeof func === 'function' ? func : (u, v) => u[this.linkName] && u[this.linkName].id === v.id
+      newData.forEach(v => {
+        const index = ret.findIndex(u => isEqual(u, v))
+        if (index !== -1) {
+          if (!ret[index].id) {
+            ret.splice(index, 1, { [this.linkName]: v, operator: 'ADD' })
+          }
+        } else {
+          ret.push({ [this.linkName]: v, operator: 'ADD' })
+        }
+      })
+      this.$emit('update', ret)
+    },
+    modify(data, func) {
+      const ret = this.basicData
+      const isEqual = typeof func === 'function' ? func : (u, v) => u[this.linkName] && v[this.linkName] && u[this.linkName].id === v[this.linkName].id
+      const index = ret.findIndex(v => isEqual(v, data))
+      // 防止传入func存在问题导致index异常
+      if (index === -1) {
+        console.log(ret, data)
+        return
+      }
+      ret.splice(index, 1, { ...data, operator: ret[index].id ? 'MODIFY' : 'ADD' })
+      this.$emit('update', ret)
+    },
+    remove(ids, func) {
+      const ret = this.basicData
+      const isEqual = typeof func === 'function' ? func : (u, v) => u[this.linkName] && u[this.linkName].id === v
+      ids.forEach(v => {
+        const index = ret.findIndex(u => isEqual(u, v))
+        // 防止传入func存在问题导致index异常
+        if (index === -1) return
+        if (ret[index].id) {
+          ret.splice(index, 1, { ...ret[index], operator: 'REMOVE' })
+        } else {
+          ret.splice(index, 1)
+        }
+      })
+      this.$emit('update', ret)
+    },
+    expose() {
+      /**
+       * @description: 暴露给外层组件的回调函数，用于对表格进行前端的添加、编辑、删除操作并添加相应的operator
+       * @param {*} operator：具体的操作，从add、modify、remove中三选一
+       * @param {*} data：根据实际操作分别对应添加的数据、编辑的行数据、删除项的唯一标识
+       * @param {*} equalFunc：判等函数，用于已保存数据和待保存数据间判等，找出需要更改的数据项，参数分别为：已保存的数据项、待保存的数据项
+       * @return {*}
+       */
+      const fn = (operator, data, equalFunc) => {
+        if (['add', 'modify', 'remove'].includes(operator)) {
+          this[operator](data, equalFunc)
+        } else {
+          this.$utils.showMessageWarning('参数缺失，请补足操作符，操作符可以为以下任意一种：add、modify、remove！')
+        }
+      }
+      this.$emit('register', fn)
+    }
+  }
+}
+</script>