n20-common-lib 1.2.43 → 1.3.0

package/src/components/Table/index.vue

@@ -1,209 +1,259 @@
-<template>
-  <el-table
-    v-if="!pageObj"
-    ref="el-table"
-    :header-cell-style="{ 'text-align': 'center' }"
-    :data="data"
-    :height="height"
-    v-bind="$attrs"
-    v-on="$listeners"
-  >
-    <template v-for="(item, i) in columns">
-      <slot v-if="item.slotName" :name="item.slotName"></slot>
-      <el-table-column
-        v-else-if="item.render"
-        :key="'cl-table-' + i"
-        v-bind="item"
-      >
-        <columnRender slot-scope="{ row }" :c-render="item.render" :row="row" />
-      </el-table-column>
-      <el-table-column
-        v-else
-        :key="'cl-table-' + i"
-        :formatter="item.formatter | colfF(item.formatterMap)"
-        :filters="item.filters | colftF(filtersMap)"
-        v-bind="item"
-      />
-    </template>
-  </el-table>
-
-  <div v-else :style="{ height: heightW }">
-    <el-table
-      ref="el-table"
-      :header-cell-style="{ 'text-align': 'center' }"
-      style="width: 100%"
-      :data="data"
-      v-bind="$attrs"
-      :height="heightC"
-      v-on="$listeners"
-    >
-      <template v-for="(item, i) in columns">
-        <slot v-if="item.slotName" :name="item.slotName"></slot>
-        <el-table-column
-          v-else-if="item.render"
-          :key="'cl-table-' + i"
-          v-bind="item"
-        >
-          <columnRender
-            slot-scope="{ row }"
-            :c-render="item.render"
-            :row="row"
-          />
-        </el-table-column>
-        <el-table-column
-          v-else
-          :key="'cl-table-' + i"
-          :formatter="item.formatter | colfF"
-          v-bind="item"
-        />
-      </template>
-    </el-table>
-    <div v-if="pageObj" class="flex-box flex-r m-t-s">
-      <Pagination
-        :page-obj="pageObj"
-        :page-key="pageKey"
-        @change="(obj) => $emit('pageChange', obj)"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-import numerify from 'numerify'
-import dayjs from 'dayjs'
-import Pagination from '../Pagination/index.vue'
-
-const columnRender = {
-  props: {
-    cRender: {
-      type: Function
-    },
-    row: {
-      type: Object
-    }
-  },
-  render(h) {
-    return this.cRender(h, this.row)
-  }
-}
-
-function colfF(colf, map) {
-  if (typeof colf !== 'string') return colf
-  let sc = colf.split(/{.+?}/g) || []
-  let mc = colf.match(/{.+?}/g) || []
-  let mck = []
-  mc.forEach((t) => {
-    t = t.replace(/^{|\s+|}$/g, '').split('|')
-    mck.push(t)
-  })
-
-  return (row) => tplFn(row, sc, mck, map)
-}
-function tplFn(row, sc, mck, map = {}) {
-  let str = ''
-  sc.forEach((s, i) => {
-    str += s
-    let kA = mck[i]
-    if (kA && kA.length) {
-      let key = kA[0]
-      if (kA.length === 1) {
-        str += row[key]
-      } else {
-        let type = kA[1]
-        switch (type) {
-          case 'money':
-            str += numerify(row[key], '0,0.00')
-            break
-          case 'rate':
-            str += numerify(row[key], '0.000000')
-            break
-          case 'map':
-            str += map[row[key]]
-            break
-          case 'date':
-            str += dayjs(row[key]).format('YYYY-MM-DD')
-            break
-          case 'datetime':
-            str += dayjs(row[key]).format('YYYY-MM-DD HH:mm:ss')
-            break
-          case 'time':
-            str += dayjs(row[key]).format('HH:mm:ss')
-            break
-          default:
-            str += row[key]
-            break
-        }
-      }
-    }
-  })
-  return str
-}
-
-function colftF(colft, fMap) {
-  if (typeof colft !== 'string') return colft
-  return fMap[colft]
-}
-
-export default {
-  name: 'Table',
-  components: {
-    Pagination,
-    columnRender
-  },
-  filters: {
-    colfF,
-    colftF
-  },
-  props: {
-    column: {
-      type: Boolean,
-      default: false
-    },
-    data: {
-      type: Array,
-      default: undefined
-    },
-    columns: {
-      type: Array,
-      require: true,
-      default: () => []
-    },
-    filtersMap: {
-      type: Object,
-      default: () => ({})
-    },
-    pageObj: {
-      type: Object,
-      default: undefined
-    },
-    pageKey: {
-      type: Object,
-      default: undefined
-    },
-    height: {
-      type: [String, Number],
-      default: undefined
-    }
-  },
-  computed: {
-    heightW() {
-      if (this.height === undefined) {
-        return undefined
-      }
-      if (/\D/.test(this.height)) {
-        return this.height
-      } else {
-        return this.height + 'px'
-      }
-    },
-    heightC() {
-      return this.pageObj ? 'calc(100% - 38px)' : '100%'
-    }
-  },
-  created() {
-    if (this.column) {
-      console.warn('调整列顺序,请使用ShowColumn组件')
-    }
-  }
-}
-</script>
+<template>
+  <el-table
+    v-if="!pageObj"
+    ref="el-table"
+    :header-cell-style="{ 'text-align': 'center' }"
+    :data="data"
+    :height="height"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+    <template v-for="(item, i) in columns">
+      <slot v-if="item.slotName" :name="item.slotName"></slot>
+      <el-table-column
+        v-else-if="item.render"
+        :key="'cl-table-' + i"
+        v-bind="item"
+      >
+        <columnRender slot-scope="{ row }" :c-render="item.render" :row="row" />
+      </el-table-column>
+
+      <el-table-column
+        v-else
+        :key="'cl-table-' + i"
+        :formatter="item.formatter | colfF(item.formatterMap)"
+        v-bind="item"
+      >
+        <!--  :filters="item.filters | colftF(filtersMap)" -->
+        <template slot="header">
+          <span v-if="item.filter" class="">
+            {{ item.label }}
+            <ThSelectHeader
+              :property="item.prop"
+              :th-index="dataList"
+              :check-list="checkList"
+              @selectChange="selectChange"
+            />
+          </span>
+        </template>
+      </el-table-column>
+    </template>
+  </el-table>
+
+  <div v-else :style="{ height: heightW }">
+    <el-table
+      ref="el-table"
+      :header-cell-style="{ 'text-align': 'center' }"
+      style="width: 100%"
+      :data="data"
+      v-bind="$attrs"
+      :height="heightC"
+      v-on="$listeners"
+    >
+      <template v-for="(item, i) in columns">
+        <slot v-if="item.slotName" :name="item.slotName"></slot>
+        <el-table-column
+          v-else-if="item.render"
+          :key="'cl-table-' + i"
+          v-bind="item"
+        >
+          <columnRender
+            slot-scope="{ row }"
+            :c-render="item.render"
+            :row="row"
+          />
+        </el-table-column>
+        <el-table-column
+          v-else
+          :key="'cl-table-' + i"
+          :formatter="item.formatter | colfF"
+          v-bind="item"
+        />
+      </template>
+    </el-table>
+    <div v-if="pageObj" class="flex-box flex-r m-t-s">
+      <Pagination
+        :page-obj="pageObj"
+        :page-key="pageKey"
+        @change="(obj) => $emit('pageChange', obj)"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import numerify from 'numerify'
+import dayjs from 'dayjs'
+import Pagination from '../Pagination/index.vue'
+
+import ThSelectHeader from './ThSelectHeader.vue'
+
+const columnRender = {
+  props: {
+    cRender: {
+      type: Function
+    },
+    row: {
+      type: Object
+    }
+  },
+  render(h) {
+    return this.cRender(h, this.row)
+  }
+}
+
+function colfF(colf, map) {
+  if (typeof colf !== 'string') return colf
+  let sc = colf.split(/{.+?}/g) || []
+  let mc = colf.match(/{.+?}/g) || []
+  let mck = []
+  mc.forEach((t) => {
+    t = t.replace(/^{|\s+|}$/g, '').split('|')
+    mck.push(t)
+  })
+
+  return (row) => tplFn(row, sc, mck, map)
+}
+function tplFn(row, sc, mck, map = {}) {
+  let str = ''
+  sc.forEach((s, i) => {
+    str += s
+    let kA = mck[i]
+    if (kA && kA.length) {
+      let key = kA[0]
+      if (kA.length === 1) {
+        str += row[key]
+      } else {
+        let type = kA[1]
+        switch (type) {
+          case 'money':
+            str += numerify(row[key], '0,0.00')
+            break
+          case 'rate':
+            str += numerify(row[key], '0.000000')
+            break
+          case 'map':
+            str += map[row[key]]
+            break
+          case 'date':
+            str += dayjs(row[key]).format('YYYY-MM-DD')
+            break
+          case 'datetime':
+            str += dayjs(row[key]).format('YYYY-MM-DD HH:mm:ss')
+            break
+          case 'time':
+            str += dayjs(row[key]).format('HH:mm:ss')
+            break
+          default:
+            str += row[key]
+            break
+        }
+      }
+    }
+  })
+  return str
+}
+
+function colftF(colft, fMap) {
+  if (typeof colft !== 'string') return colft
+  return fMap[colft]
+}
+
+export default {
+  name: 'Table',
+  components: {
+    Pagination,
+    columnRender,
+    ThSelectHeader
+  },
+  filters: {
+    colfF,
+    colftF
+  },
+  props: {
+    column: {
+      type: Boolean,
+      default: false
+    },
+    data: {
+      type: Array,
+      default: undefined
+    },
+    columns: {
+      type: Array,
+      require: true,
+      default: () => []
+    },
+    filtersMap: {
+      type: Object,
+      default: () => ({})
+    },
+    pageObj: {
+      type: Object,
+      default: undefined
+    },
+    pageKey: {
+      type: Object,
+      default: undefined
+    },
+    height: {
+      type: [String, Number],
+      default: undefined
+    }
+  },
+  data() {
+    return {
+      checkList: {},
+      rules: [],
+      dataList: []
+    }
+  },
+  computed: {
+    heightW() {
+      if (this.height === undefined) {
+        return undefined
+      }
+      if (/\D/.test(this.height)) {
+        return this.height
+      } else {
+        return this.height + 'px'
+      }
+    },
+    heightC() {
+      return this.pageObj ? 'calc(100% - 38px)' : '100%'
+    }
+  },
+  created() {
+    this.dataList = JSON.parse(JSON.stringify(this.data))
+    for (let k in this.dataList[0]) {
+      this.checkList[k] = []
+    }
+    for (let i in this.dataList) {
+      for (let k in this.dataList[i]) {
+        if (
+          this.checkList[k].findIndex((item) => item == this.dataList[i][k]) ==
+          -1
+        ) {
+          this.checkList[k].push(this.dataList[i][k])
+        }
+      }
+    }
+    if (this.column) {
+      console.warn('调整列顺序,请使用ShowColumn组件')
+    }
+  },
+  methods: {
+    selectChange(val) {
+      console.log(val)
+      let property = val['property']
+      let value = val['value']
+      // 遍历过滤条件
+      if (!value.length) {
+        this.data = this.dataList
+      } else {
+        this.data = this.dataList.filter((item) =>value.some(c=>item[property]===c))
+      }
+    }
+  }
+}
+</script>