n20-common-lib 1.3.40 → 1.3.41

package/src/components/Table/ThSelectHeader.vue

@@ -1,128 +1,128 @@
-<template>
-  <el-popover
-    popper-class="table-header-popover"
-    placement="bottom"
-    trigger="hover"
-  >
-    <el-input
-      v-model="value"
-      placeholder="请输入"
-      clearable
-      class="input-w"
-      @keyup.enter.native="handleSearch"
-    >
-      <i
-        slot="suffix"
-        class="el-input__icon el-icon-search"
-        @click="handleSearch"
-      ></i>
-    </el-input>
-
-    <div class="flex-column m-t">
-      <el-checkbox
-        v-model="checkbox"
-        :indeterminate="isIndeterminate"
-        @change="checkboxChange"
-        >{{ '全部' + '(' + dataList.length + ')' }}</el-checkbox
-      >
-      <el-checkbox-group
-        v-model="checkLists"
-        class="flex-column"
-        @change="handleCheckedCitiesChange"
-      >
-        <el-checkbox
-          v-for="item in checkList[property]"
-          :key="item"
-          class="m-t-s"
-          :label="item"
-          >{{ item + '(' + countNum(item) + ')' }}</el-checkbox
-        >
-      </el-checkbox-group>
-    </div>
-    <div class="flex-box flex-c m-t-m">
-      <el-button type="primary" @click="confirm">确认</el-button>
-      <el-button plain @click="reset">清空</el-button>
-    </div>
-    <i slot="reference" class="el-icon-arrow-down"></i>
-  </el-popover>
-</template>
-
-<script>
-export default {
-  name: 'ThSelectHeader',
-  props: {
-    property: {
-      // 过滤的字段
-      type: String,
-      default: ''
-    },
-    checkList: {
-      // 当前过滤字段的过滤条件
-      type: Object,
-      default: () => {
-        return {}
-      }
-    },
-    dataList: {
-      type: Array,
-      default: () => {
-        return []
-      }
-    }
-  },
-  data() {
-    return {
-      value: '',
-      checkLists: [],
-      list: [],
-      checkbox: false,
-      isIndeterminate: true
-    }
-  },
-  created() {
-    this.list = JSON.parse(JSON.stringify(this.checkList[this.property]))
-  },
-  methods: {
-    confirm() {
-      this.$emit('selectChange', {
-        property: this.property,
-        value: this.checkLists
-      })
-    },
-    handleSearch() {
-      if (!this.value) {
-        this.checkList[this.property] = this.list
-      } else {
-        this.checkList[this.property] = this.list.filter((v) => {
-          return v.indexOf(this.value) !== -1
-        })
-      }
-      this.$forceUpdate()
-    },
-    reset() {
-      this.value = ''
-      this.checkLists = []
-      this.$emit('reset', {
-        property: this.property,
-        value: this.value
-      })
-    },
-    countNum(res) {
-      var newArrays = this.dataList.filter((item) => {
-        return item[this.property] === res
-      })
-      return newArrays.length
-    },
-    checkboxChange(val) {
-      this.checkLists = val ? this.checkList[this.property] : []
-      this.isIndeterminate = false
-    },
-    handleCheckedCitiesChange(val) {
-      let checkedCount = val.length
-      this.checkbox = checkedCount === this.checkList[this.property].length
-      this.isIndeterminate =
-        checkedCount > 0 && checkedCount < this.checkList[this.property].length
-    }
-  }
-}
-</script>
+<template>
+  <el-popover
+    popper-class="table-header-popover"
+    placement="bottom"
+    trigger="hover"
+  >
+    <el-input
+      v-model="value"
+      placeholder="请输入"
+      clearable
+      class="input-w"
+      @keyup.enter.native="handleSearch"
+    >
+      <i
+        slot="suffix"
+        class="el-input__icon el-icon-search"
+        @click="handleSearch"
+      ></i>
+    </el-input>
+
+    <div class="flex-column m-t">
+      <el-checkbox
+        v-model="checkbox"
+        :indeterminate="isIndeterminate"
+        @change="checkboxChange"
+        >{{ '全部' + '(' + dataList.length + ')' }}</el-checkbox
+      >
+      <el-checkbox-group
+        v-model="checkLists"
+        class="flex-column"
+        @change="handleCheckedCitiesChange"
+      >
+        <el-checkbox
+          v-for="item in checkList[property]"
+          :key="item"
+          class="m-t-s"
+          :label="item"
+          >{{ item + '(' + countNum(item) + ')' }}</el-checkbox
+        >
+      </el-checkbox-group>
+    </div>
+    <div class="flex-box flex-c m-t-m">
+      <el-button type="primary" @click="confirm">确认</el-button>
+      <el-button plain @click="reset">清空</el-button>
+    </div>
+    <i slot="reference" class="el-icon-arrow-down"></i>
+  </el-popover>
+</template>
+
+<script>
+export default {
+  name: 'ThSelectHeader',
+  props: {
+    property: {
+      // 过滤的字段
+      type: String,
+      default: ''
+    },
+    checkList: {
+      // 当前过滤字段的过滤条件
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    dataList: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      value: '',
+      checkLists: [],
+      list: [],
+      checkbox: false,
+      isIndeterminate: true
+    }
+  },
+  created() {
+    this.list = JSON.parse(JSON.stringify(this.checkList[this.property]))
+  },
+  methods: {
+    confirm() {
+      this.$emit('selectChange', {
+        property: this.property,
+        value: this.checkLists
+      })
+    },
+    handleSearch() {
+      if (!this.value) {
+        this.checkList[this.property] = this.list
+      } else {
+        this.checkList[this.property] = this.list.filter((v) => {
+          return v.indexOf(this.value) !== -1
+        })
+      }
+      this.$forceUpdate()
+    },
+    reset() {
+      this.value = ''
+      this.checkLists = []
+      this.$emit('reset', {
+        property: this.property,
+        value: this.value
+      })
+    },
+    countNum(res) {
+      var newArrays = this.dataList.filter((item) => {
+        return item[this.property] === res
+      })
+      return newArrays.length
+    },
+    checkboxChange(val) {
+      this.checkLists = val ? this.checkList[this.property] : []
+      this.isIndeterminate = false
+    },
+    handleCheckedCitiesChange(val) {
+      let checkedCount = val.length
+      this.checkbox = checkedCount === this.checkList[this.property].length
+      this.isIndeterminate =
+        checkedCount > 0 && checkedCount < this.checkList[this.property].length
+    }
+  }
+}
+</script>

package/src/components/Table/filters.js

@@ -1,60 +1,60 @@
-import numerify from 'numerify'
-import dayjs from 'dayjs'
-
-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
-}
-
-export 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)
-}
-
-export function colftF(colft, fMap) {
-  if (typeof colft !== 'string') return colft
-  return fMap[colft]
-}
+import numerify from 'numerify'
+import dayjs from 'dayjs'
+
+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
+}
+
+export 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)
+}
+
+export function colftF(colft, fMap) {
+  if (typeof colft !== 'string') return colft
+  return fMap[colft]
+}

package/src/components/Table/index.vue

@@ -1,136 +1,136 @@
-<template>
-  <el-table
-    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 v-if="item.filterPre" slot="header">
-          {{ item.label }}
-          <th-select-header
-            :property="item.prop"
-            :data-list="dataList"
-            :check-list="checkList"
-            @selectChange="selectChange"
-          />
-        </template>
-      </el-table-column>
-    </template>
-  </el-table>
-</template>
-
-<script>
-import thSelectHeader from './ThSelectHeader.vue'
-import { colfF, colftF } from './filters'
-
-const columnRender = {
-  props: {
-    cRender: {
-      type: Function
-    },
-    row: {
-      type: Object
-    }
-  },
-  render(h) {
-    return this.cRender(h, this.row)
-  }
-}
-
-export default {
-  name: 'Table',
-  components: {
-    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: []
-    }
-  },
-  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].some((item) => item === this.dataList[i][k])) {
-          this.checkList[k].push(this.dataList[i][k])
-        }
-      }
-    }
-  },
-  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>
+<template>
+  <el-table
+    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 v-if="item.filterPre" slot="header">
+          {{ item.label }}
+          <th-select-header
+            :property="item.prop"
+            :data-list="dataList"
+            :check-list="checkList"
+            @selectChange="selectChange"
+          />
+        </template>
+      </el-table-column>
+    </template>
+  </el-table>
+</template>
+
+<script>
+import thSelectHeader from './ThSelectHeader.vue'
+import { colfF, colftF } from './filters'
+
+const columnRender = {
+  props: {
+    cRender: {
+      type: Function
+    },
+    row: {
+      type: Object
+    }
+  },
+  render(h) {
+    return this.cRender(h, this.row)
+  }
+}
+
+export default {
+  name: 'Table',
+  components: {
+    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: []
+    }
+  },
+  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].some((item) => item === this.dataList[i][k])) {
+          this.checkList[k].push(this.dataList[i][k])
+        }
+      }
+    }
+  },
+  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>