n20-common-lib 1.2.41 → 1.3.0

package/src/components/Table/ThSelectHeader.vue

@@ -0,0 +1,133 @@
+<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-14">
+    <el-checkbox
+        v-model="checkbox"
+        :indeterminate="isIndeterminate"
+        @change="checkboxChange"
+        >{{ '全部' + '(' + this.thIndex.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 {}
+      }
+    },
+    thIndex: {
+      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.thIndex.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>
+
+<style lang="scss">
+.table-header-popover.el-popover {
+  padding: 16px;
+}
+.m-t-14 {
+  margin-top: 14px;
+}
+</style>

package/src/components/Table/index.vue

@@ -17,13 +17,26 @@
       >
         <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"
-      />
+      >
+        <!--  :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>
 
@@ -73,6 +86,8 @@ import numerify from 'numerify'
 import dayjs from 'dayjs'
 import Pagination from '../Pagination/index.vue'
 
+import ThSelectHeader from './ThSelectHeader.vue'
+
 const columnRender = {
   props: {
     cRender: {
@@ -148,7 +163,8 @@ export default {
   name: 'Table',
   components: {
     Pagination,
-    columnRender
+    columnRender,
+    ThSelectHeader
   },
   filters: {
     colfF,
@@ -185,6 +201,13 @@ export default {
       default: undefined
     }
   },
+  data() {
+    return {
+      checkList: {},
+      rules: [],
+      dataList: []
+    }
+  },
   computed: {
     heightW() {
       if (this.height === undefined) {
@@ -201,9 +224,36 @@ export default {
     }
   },
   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>

package/src/components/Upload/index.vue

@@ -4,7 +4,7 @@
     :action="action"
     :headers="headers"
     :accept="accept"
-    :multiple="false"
+    :multiple="multiple"
     :file-list="fileList"
     :show-file-list="false"
     v-bind="$attrs"
@@ -57,9 +57,13 @@ export default {
       type: String,
       default: ''
     },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
     placeholder: {
       type: String,
-      default: '请选择文件'
+      default: '请选择'
     },
     msgType: {
       type: String,

package/src/directives/VCopy/index.js

@@ -0,0 +1,60 @@
+const Clipboard = require('clipboard');
+
+
+const install = (Vue) => {
+    Vue.directive('Clipboard', {
+        bind(el, binding) {
+            if (binding.arg === 'success') {
+                el._v_clipboard_success = binding.value
+            } else if (binding.arg === 'error') {
+                el._v_clipboard_error = binding.value
+            } else {
+                const clipboard = new Clipboard(el, {
+                    text() {
+                        return binding.value
+                    },
+                    action() {
+                        return binding.arg === 'cut' ? 'cut' : 'copy'
+                    }
+                })
+                clipboard.on('success', e => {
+                    const callback = el._v_clipboard_success
+                    callback && callback(e) // eslint-disable-line
+                })
+                clipboard.on('error', e => {
+                    const callback = el._v_clipboard_error
+                    callback && callback(e) // eslint-disable-line
+                })
+                el._v_clipboard = clipboard
+            }
+        },
+        update(el, binding) {
+            if (binding.arg === 'success') {
+                el._v_clipboard_success = binding.value
+            } else if (binding.arg === 'error') {
+                el._v_clipboard_error = binding.value
+            } else {
+                el._v_clipboard.text = function () {
+                    return binding.value
+                }
+                el._v_clipboard.action = function () {
+                    return binding.arg === 'cut' ? 'cut' : 'copy'
+                }
+            }
+        },
+        unbind(el, binding) {
+            if (binding.arg === 'success') {
+                delete el._v_clipboard_success
+            } else if (binding.arg === 'error') {
+                delete el._v_clipboard_error
+            } else {
+                el._v_clipboard.destroy()
+                delete el._v_clipboard
+            }
+        }
+    })
+
+}
+
+Clipboard.install = install
+export default Clipboard

package/src/directives/VNstcNumber/index.js

@@ -0,0 +1,14 @@
+import nstcNumber from './temp'
+nstcNumber.install = Vue => {
+  Vue.directive('nstcNumber', nstcNumber)
+}
+/*
+  Vue.use( plugin )
+  安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。
+  如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。
+  该方法需要在调用 new Vue() 之前被调用。
+  当 install 方法被同一个插件多次调用，插件将只会被安装一次。
+  方法：
+      v-nstc-number="{max:100,min:0,precision:2}"
+*/
+export default nstcNumber