n20-common-lib 2.4.67 → 2.4.68

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "n20-common-lib",
-  "version": "2.4.67",
+  "version": "2.4.68",
   "private": false,
   "main": "src/index.js",
   "scripts": {

package/src/assets/css/el-table.scss

@@ -157,6 +157,9 @@ th.vxe-header--column {
 .vxe-table--render-default.vxe-editable.size--mini .vxe-body--column {
   height: 32px !important;
 }
+.vxe-table--tooltip-wrapper {
+  z-index: 9999 !important;
+}
 .cell-default-set-- .vxe-table--body-wrapper .vxe-body--row .vxe-body--column .vxe-cell .vxe-cell--label:empty::before {
   content: '--';
 }

package/src/components/AdvancedFilter/filterItem.vue

@@ -0,0 +1,43 @@
+<template>
+  <el-checkbox-group v-model="checkList" class="flex-column" @change="checkChange">
+    <el-checkbox v-for="(item, i) in filterList" :key="i" class="m-t-b" :label="item.label" />
+    <template v-if="filterLT.length > defaultShow">
+      <div :style="{ paddingLeft: labelWidth }">
+        <el-button class="p-t-0 m-b-s color-primary" type="text" @click="moreFn"
+          ><span>{{ '更多条件' | $lc }}</span
+          ><i :class="showMore ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i
+        ></el-button>
+      </div>
+      <el-collapse-transition>
+        <div v-if="showMore">
+          <el-form-item v-for="(item, i) in moreList" :key="i" class="m-b" :label="item.label">
+            <slot v-if="item.slotName" :name="item.slotName"></slot>
+            <form-item-input v-else :form="form" :item="item" />
+          </el-form-item>
+        </div>
+      </el-collapse-transition>
+    </template>
+  </el-checkbox-group>
+</template>
+
+<script>
+export default {
+  name: 'FilterItem',
+  props: {
+    filterList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      checkList: []
+    }
+  },
+  methods: {
+    checkChange(row) {
+      console.log(row)
+    }
+  }
+}
+</script>

package/src/components/AdvancedFilter/filterList.vue

@@ -0,0 +1,9 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+export default {
+  name: 'FilterList'
+}
+</script>

package/src/components/AdvancedFilter/index.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="flex-box">
+    <filterList />
+    <el-popover
+      ref="popover"
+      v-model="showPop"
+      trigger="manual"
+      :width="widthAs"
+      :popper-class="popperClass"
+      placement="bottom-start"
+      @show="show"
+    >
+      <template slot="reference">
+        <el-button size="mini" onlyicon plain icon="el-icon-plus" @click="clickBtn" />
+      </template>
+      <el-form>
+        <InputSearch v-model="value" clearable class="input-w" :placeholder="$l('搜索筛选条件')" />
+        <filterItem :props="props" :filter-list="minList" />
+      </el-form>
+    </el-popover>
+  </div>
+</template>
+
+<script>
+import filterList from './filterList.vue'
+import InputSearch from '../InputSearch/index.vue'
+import filterItem from './filterItem.vue'
+import getWidth from '../../utils/asciiWidth'
+export default {
+  name: 'AdvancedFilter',
+  components: {
+    filterList,
+    filterItem,
+    InputSearch
+  },
+  props: {
+    type: {
+      type: String,
+      default: ''
+    },
+    filterList: {
+      type: Array,
+      default: () => []
+    },
+    defaultShow: {
+      type: Number,
+      default: 5
+    },
+    labelWidth: {
+      type: [String, Number],
+      default: undefined
+    }
+  },
+  data() {
+    return {
+      value: '',
+      showPop: false,
+      showPopC: false,
+      remoteList: [],
+      popperClass: ('filters_popper_' + Date.now() + '_' + Math.random()).replace('.', '')
+    }
+  },
+  computed: {
+    widthAs() {
+      if (this.width !== undefined) return this.width
+
+      return this.labelWidthAs + 180
+    },
+    minList() {
+      return this.filterLT.slice(0, this.defaultShow)
+    },
+    moreList() {
+      return this.filterLT.slice(this.defaultShow)
+    },
+    filterLT() {
+      if (!this.isGroup) {
+        return this.filterList
+      } else {
+        let list = []
+        this.filterList.forEach((gp) => {
+          if (gp.children) {
+            gp.children.forEach((col) => {
+              list.push(Object.assign({}, col, { groupId: gp.groupId }))
+            })
+          }
+        })
+        return list
+      }
+    },
+    labelWidthAs() {
+      if (this.labelWidth !== undefined) {
+        return /em$/.test(this.labelWidth) ? parseInt(this.labelWidth) * 14 : parseInt(this.labelWidth)
+      }
+
+      if (this.type === 'remote') {
+        let maxW = Math.max(4 * 14, ...this.remoteList.map((r) => getWidth(r.label)))
+        return maxW + 14
+      } else {
+        let maxW = Math.max(4 * 14, ...this.minList.map((r) => getWidth(r.label)))
+        if (this.showMore) {
+          maxW = Math.max(maxW, ...this.moreList.map((r) => getWidth(r.label)))
+        }
+        return maxW + 14
+      }
+    }
+  },
+  methods: {
+    show() {
+      this.showPopC = true
+    },
+    clickBtn() {
+      if (!this.showPop) {
+        setTimeout(() => {
+          if (this.type === 'remote' && !this.remoteList.length) {
+            this.getRemote()
+          } else {
+            this.showPop = true
+          }
+        }, 60)
+      }
+    }
+  }
+}
+</script>

package/src/components/Layout/HeaderWrap/indexN.vue

@@ -262,20 +262,20 @@
 </template>
 
 <script>
-import { $lc } from '@/utils/i18n/index.js'
+import { $lc } from '../../../utils/i18n/index.js'
 import Cookies from 'js-cookie'
-import { themeList } from '@/utils/theme.config'
+import { themeList } from '../../../utils/theme.config'
 import operatingStatus from '../../operatingStatus/index.vue'
 import dialogWrap from '../../Dialog/index.vue'
 import changePwd from './changePwd.vue'
 import noticePop from './noticePop.vue'
 import switchUser from './switchUser.vue'
 
-import axios from '@/utils/axios.js'
+import axios from '../../../utils/axios.js'
 import getJsonc from '../../../assets/getJsonc'
 import realUrl from '../../../assets/realUrl'
-import auth from '@/utils/auth.js'
-import { linkPush } from '@/utils/urlToGo.js'
+import auth from '../../../utils/auth.js'
+import { linkPush } from '../../../utils/urlToGo.js'
 import dayjs from 'dayjs'
 import duration from 'dayjs/plugin/duration'
 dayjs.extend(duration)

package/src/components/Pagination/index.vue

@@ -69,7 +69,7 @@
 
 <script>
 import mixins from './mixins/index.js'
-import { $lc } from '@/utils/i18n/index.js'
+import { $lc } from '../../utils/i18n/index.js'
 export default {
   name: 'Pagination',
   mixins: [mixins],

package/src/components/Pagination/mixins/index.js

@@ -1,4 +1,4 @@
-import axios from '@/utils/axios.js'
+import axios from '../../../utils/axios.js'
 export default {
   data() {
     return {

package/src/directives/VDrag/index.js

@@ -1,72 +1,72 @@
-/**
- * author: zhengwei
- * tiem: 2021-8-31
- * amend: 只注册到bind上,有问题;onXX会导致事件覆盖
- */
-// 封装全局弹窗拖拽指令 v-drag
-function dialogMoveFn(_this) {
-  var dialogDom = _this.parentNode
-  dialogDom.style.top = parseFloat(dialogDom.style.top || '0') + _this.pageYc + 'px'
-  dialogDom.style.left = parseFloat(dialogDom.style.left || '0') + _this.pageXc + 'px'
-}
-
-const dialogMove = {
-  install: function (Vue) {
-    Vue.directive('drag', {
-      update(el, binding) {
-        if (el.style.display === 'none') {
-          var dialogDom = el.querySelector('.el-dialog')
-          if (dialogDom) {
-            dialogDom.style.left = ''
-            dialogDom.style.top = ''
-          }
-        }
-        Vue.nextTick(function () {
-          var dialogHeader = el.querySelector('.el-dialog__header')
-          if (dialogHeader && !dialogHeader._hasMoveDir) {
-            var _this, pvrPageX, pvrPageY
-            dialogHeader._hasMoveDir = true
-            dialogHeader.style.cursor = 'move'
-
-            dialogHeader.addEventListener('mousedown', function (evt) {
-              var ev = evt || event
-              this.pageXc = this.pageYc = 0
-              _this = this
-              pvrPageX = ev.pageX
-              pvrPageY = ev.pageY
-              document.addEventListener('mousemove', mousemoveThisMove)
-              document.addEventListener('mouseup', mouseupThisMove)
-            })
-
-            var mousemoveThisMove = function (evt) {
-              var ev = evt || event
-              ev.stopPropagation()
-              ev.preventDefault()
-              if (
-                ev.clientX >= 0 &&
-                ev.clientY >= 0 &&
-                ev.clientX <= document.documentElement.clientWidth &&
-                ev.clientY <= document.documentElement.clientHeight
-              ) {
-                _this.pageXc = ev.pageX - pvrPageX
-                _this.pageYc = ev.pageY - pvrPageY
-                if (_this.pageXc !== 0 || _this.pageYc !== 0) {
-                  binding.value ? binding.value(_this, binding.arg) : dialogMoveFn(_this)
-                }
-                pvrPageX = ev.pageX
-                pvrPageY = ev.pageY
-              }
-            }
-
-            var mouseupThisMove = function () {
-              document.removeEventListener('mousemove', mousemoveThisMove)
-              document.removeEventListener('mouseup', mouseupThisMove)
-            }
-          }
-        })
-      }
-    })
-  }
-}
-
-export default dialogMove
+/**
+ * author: zhengwei
+ * tiem: 2021-8-31
+ * amend: 只注册到bind上,有问题;onXX会导致事件覆盖
+ */
+// 封装全局弹窗拖拽指令 v-drag
+function dialogMoveFn(_this) {
+  var dialogDom = _this.parentNode
+  dialogDom.style.top = parseFloat(dialogDom.style.top || '0') + _this.pageYc + 'px'
+  dialogDom.style.left = parseFloat(dialogDom.style.left || '0') + _this.pageXc + 'px'
+}
+
+const dialogMove = {
+  install: function (Vue) {
+    Vue.directive('drag', {
+      update(el, binding) {
+        if (el.style.display === 'none') {
+          var dialogDom = el.querySelector('.el-dialog')
+          if (dialogDom) {
+            dialogDom.style.left = ''
+            dialogDom.style.top = ''
+          }
+        }
+        Vue.nextTick(function () {
+          var dialogHeader = el.querySelector('.el-dialog__header')
+          if (dialogHeader && !dialogHeader._hasMoveDir) {
+            var _this, pvrPageX, pvrPageY
+            dialogHeader._hasMoveDir = true
+            dialogHeader.style.cursor = 'move'
+
+            dialogHeader.addEventListener('mousedown', function (evt) {
+              var ev = evt || event
+              this.pageXc = this.pageYc = 0
+              _this = this
+              pvrPageX = ev.pageX
+              pvrPageY = ev.pageY
+              document.addEventListener('mousemove', mousemoveThisMove)
+              document.addEventListener('mouseup', mouseupThisMove)
+            })
+
+            var mousemoveThisMove = function (evt) {
+              var ev = evt || event
+              ev.stopPropagation()
+              ev.preventDefault()
+              if (
+                ev.clientX >= 0 &&
+                ev.clientY >= 0 &&
+                ev.clientX <= document.documentElement.clientWidth &&
+                ev.clientY <= document.documentElement.clientHeight
+              ) {
+                _this.pageXc = ev.pageX - pvrPageX
+                _this.pageYc = ev.pageY - pvrPageY
+                if (_this.pageXc !== 0 || _this.pageYc !== 0) {
+                  binding.value ? binding.value(_this, binding.arg) : dialogMoveFn(_this)
+                }
+                pvrPageX = ev.pageX
+                pvrPageY = ev.pageY
+              }
+            }
+
+            var mouseupThisMove = function () {
+              document.removeEventListener('mousemove', mousemoveThisMove)
+              document.removeEventListener('mouseup', mouseupThisMove)
+            }
+          }
+        })
+      }
+    })
+  }
+}
+
+export default dialogMove

package/src/i18n.json

@@ -23,6 +23,9 @@
   "截止": {
     "en": "The deadline"
   },
+  "搜索筛选条件": {
+    "en": "Search filter conditions"
+  },
   "审批进度查看": {
     "en": "Review of approval progress"
   },

package/src/index.js

@@ -64,6 +64,7 @@ import WornPagination from './components/WornPagination/index.vue'
 
 import Tree from './components/Tree/index.vue'
 import SelectTreePro from './components/SelectTree/pro.vue'
+import AdvancedFilter from './components/AdvancedFilter/index.vue'
 
 // 新版日期选择框
 import BusiDatePicker from './components/DateSelect/busiDate.vue'
@@ -197,6 +198,7 @@ const components = [
   UploadMsg,
   Tree,
   SelectTreePro,
+  AdvancedFilter,
   /* old */
   TableO,
   FiltersO,
@@ -349,5 +351,6 @@ export {
   refreshTab,
   Tree,
   SelectTreePro,
+  AdvancedFilter,
   version
 }