n20-common-lib 2.6.1 → 2.6.2-beta

package/src/components/TablePro/filterContent_tree.vue

@@ -0,0 +1,172 @@
+<template>
+  <div class="my-filter-content">
+    <div class="my-fc-search">
+      <div class="my-fc-search-top">
+        <el-input v-model="filterText" placeholder="输入关键字进行过滤" />
+      </div>
+      <div class="my-fc-search-content">
+        <template v-if="data.length">
+          <el-tree
+            ref="tree"
+            class="filter-tree"
+            :data="data"
+            :props="defaultProps"
+            :show-checkbox="filterMultiple"
+            default-expand-all
+            :default-checked-keys="defaultCheckedKeys"
+            :filter-node-method="filterNode"
+            node-key="value"
+          />
+        </template>
+        <template v-else>
+          <div class="my-fc-search-empty">无匹配项</div>
+        </template>
+      </div>
+    </div>
+    <div class="flex-box flex-c m-t-s" style="width: 100%">
+      <el-button type="primary" size="mini" @click="confirmFilterEvent">确认</el-button>
+      <el-button plan size="mini" @click="resetFilterEvent">重置</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FilterContent',
+  props: {
+    params: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      demo1: {
+        isAll: false,
+        option: null,
+        colValList: [],
+        valList: []
+      },
+      filterText: '',
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+      data: [],
+      filterMultiple: false,
+      defaultCheckedKeys: []
+    }
+  },
+  watch: {
+    filterText(val) {
+      this.$refs.tree.filter(val)
+    }
+  },
+  mounted() {
+    this.load()
+  },
+  methods: {
+    // 顶部筛选
+    filterNode(value, data) {
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
+    },
+    load() {
+      const params = this.params
+      const { column } = params
+      if (column.filterMultiple) {
+        this.filterMultiple = column.filterMultiple
+      }
+      if (column.filters) {
+        // 多选
+        if (column.filterMultiple) {
+          this.data = [
+            {
+              value: 0,
+              label: '全部',
+              children: column.filters
+            }
+          ]
+          //单选
+        } else {
+          this.data = column.filters
+        }
+      }
+    },
+
+    confirmFilterEvent() {
+      const { $panel, column } = this.params
+      const vals = this.$refs.tree.getCheckedKeys() || this.$refs.tree.getCurrentKey()
+      this.defaultCheckedKeys = vals
+      column.filters.map((item) => {
+        item.data = { vals: vals }
+        if (vals.includes(item.value)) {
+          item.checked = true
+          item._checked = true
+        } else {
+          item.checked = false
+          item._checked = false
+        }
+        return item
+      })
+      $panel.confirmFilter()
+    },
+
+    resetFilterEvent() {
+      const params = this.params
+      if (params) {
+        const { $panel } = params
+        $panel.resetFilter()
+      }
+    }
+  }
+}
+</script>
+
+<style>
+.my-filter-content {
+  padding: 10px;
+  user-select: none;
+}
+.my-filter-content .my-fc-search .my-fc-search-top {
+  position: relative;
+  padding: 5px 0;
+}
+.my-filter-content .my-fc-search .my-fc-search-top > input {
+  border: 1px solid #ababab;
+  padding: 0 20px 0 2px;
+  width: 200px;
+  height: 22px;
+  line-height: 22px;
+}
+.my-filter-content .my-fc-search .my-fc-search-content {
+  padding: 2px 10px;
+}
+.my-filter-content .my-fc-search-empty {
+  text-align: center;
+  padding: 20px 0;
+}
+.my-filter-content .my-fc-search-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.my-filter-content .my-fc-search-list-body {
+  overflow: auto;
+  height: 120px;
+}
+.my-filter-content .my-fc-search-list .my-fc-search-item {
+  padding: 2px 0;
+  display: block;
+}
+.my-filter-content .my-fc-footer {
+  text-align: right;
+  padding-top: 10px;
+}
+.my-filter-content .my-fc-footer button {
+  padding: 0 15px;
+  margin-left: 15px;
+}
+</style>

package/src/components/TablePro/index.js

@@ -1,8 +1,38 @@
 import vxeTable from 'vxe-table'
 import 'vxe-table/lib/style.css'
+import filterContent from './filterContent.vue'
 import numerify from 'numerify'
 import dayjs from 'dayjs'
 
+// 创建一个简单的输入框筛选
+vxeTable.renderer.add('FilterInput', {
+  // 筛选模板
+  renderFilter(h, renderOpts, params) {
+    return <filterContent params={params}></filterContent>
+  },
+  // 不显示底部按钮，使用自定义的按钮
+  showFilterFooter: false,
+  // 重置数据方法
+  filterResetMethod({ options }) {
+    options.forEach((option) => {
+      option.data = ''
+    })
+  },
+  // 重置筛选复原方法（当未点击确认时，该选项将被恢复为默认值）
+  filterRecoverMethod({ option }) {
+    option.data = ''
+  },
+  // 筛选方法
+  filterMethod({ option, row, column }) {
+    const { data } = option
+    const cellValue = row[column.property]
+    if (cellValue) {
+      return cellValue.indexOf(data) > -1
+    }
+    return false
+  }
+})
+
 // 自定义全局的格式化处理函数
 vxeTable.formats.mixin({
   // 格式化内容 为空转为--

package/src/components/TablePro/index.vue

@@ -66,7 +66,7 @@
             :key="'vxe-table-' + i"
             :formatter="subItem.formatter ? subItem.formatter : 'formatName'"
             :filters="subItem.filters"
-            :filter-render="subItem.filterRender"
+            :filter-render="{ name: 'FilterInput', ...subItem.filterRender }"
             :title="subItem.label"
             :field="subItem.prop"
             v-bind="subItem"
@@ -79,7 +79,7 @@
           :class-name="`${item.wrap && `vxe-table-custom-wrap`} ${item.bold && `font-w600`}`"
           :formatter="item.formatter ? item.formatter : 'formatName'"
           :filters="item.filters"
-          :filter-render="item.filterRender"
+          :filter-render="{ name: 'FilterInput', ...item.filterRender }"
           :title="item.label"
           :field="item.prop"
           v-bind="item"
@@ -234,6 +234,7 @@ export default {
       this.$emit('sort-change-method', orders)
     },
     filterChange(data) {
+      console.log(data)
       const { filterList } = data
       // 输出全部条件
       const obj = {}

package/src/components/Tree/index.vue

@@ -29,7 +29,11 @@
           class="cl-tree-item-label text-ellipsis"
         >
           {{ (data[props.value] ? '(' + data[props.value] + ') ' : '') + data[props.label] }}
-          {{ data && data.children && data.children.length > 0 ? '(' + data.children.length + ')' : '' }}
+          {{
+            data && data[props.children] && data[props.children].length > 0
+              ? '(' + data[props.children].length + ')'
+              : ''
+          }}
         </div>
       </div>
       <el-button
@@ -55,6 +59,7 @@
         @click="handleChecked(node, data)"
         >{{ $lc('只勾选本层级') }}</el-button
       >
+      <slot v-else name="right" :node="node" :data="data"></slot>
     </div>
   </el-tree>
 </template>

package/src/components/Upload/index.vue

@@ -42,6 +42,7 @@
       :percent="percent"
       :width="width"
       title="文件导入"
+      :showErrorExport="showErrorExport"
       :pagination="pagination"
       :footer-btn="footer"
       :validate-result="validateResult"
@@ -169,6 +170,10 @@ export default {
     footer: {
       type: Object,
       default: undefined
+    },
+    showErrorExport: {
+      type: Boolean,
+      default: false
     }
   },
   data() {

package/src/components/Upload/uploadMsg.vue

@@ -49,7 +49,7 @@
           <div class="bd-a">
             <div class="flex-box flex-lr flex-v m-t m-b p-l p-r">
               <span>{{ '无效数据详情' | $lc }}</span>
-              <el-button type="text" @click="importError">{{ '导出错误数据' | $lc }}</el-button>
+              <el-button type="text" v-if="showErrorExport" @click="importError">{{ '导出错误数据' | $lc }}</el-button>
             </div>
             <el-table ref="tables" :key="index" :data="errorListC" border style="width: 100%" height="300px">
               <el-table-column
@@ -161,6 +161,10 @@ export default {
     hidePercent: {
       type: Boolean,
       default: false
+    },
+    showErrorExport: {
+      type: Boolean,
+      default: false
     }
   },
   filters: {
@@ -182,7 +186,7 @@ export default {
     errorList: {
       handler() {
         this.errorListC = this.errorList
-        this.page.total = Math.ceil(this.tableData.length / this.page.pageSize)
+        this.page.total = this.tableData.length
       }
     },
     page: {
@@ -222,8 +226,7 @@ export default {
           this.tableData = cloneDeep(_errorList)
           const startIndex = (this.page.current - 1) * this.page.pageSize
           const endIndex = startIndex + this.page.pageSize
-          let dto = this.tableData.slice(startIndex, endIndex)
-          return dto
+          return this.pagination ? this.tableData.slice(startIndex, endIndex) : this.tableData
         } else {
           return undefined
         }
@@ -250,7 +253,6 @@ export default {
       const startIndex = (this.page.current - 1) * this.page.pageSize
       const endIndex = startIndex + this.page.pageSize
       this.errorListC = this.tableData.slice(startIndex, endIndex)
-
       this.index += 1
       this.$nextTick(() => {
         this.$refs.tables.doLayout()

package/src/components/operatingStatus/index.vue

@@ -79,12 +79,14 @@ export default {
 
 <style scoped>
 .el-carousel {
-  width: 180px;
+  min-width: 220px;
 }
-.el-carousel__item div {
+.el-carousel__item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   font-size: 14px;
   opacity: 0.75;
-  line-height: 50px;
   margin: 0;
 }
 .el-carousel__item:nth-child(n) {

package/src/directives/watermark/index.js

@@ -0,0 +1,69 @@
+const addWaterMarker = (str, parentNode, font, textColor) => {
+  const args = arguments[0]
+  let can = document.createElement('canvas')
+  const __wm = document.querySelector('.n20_v_watermark')
+  let div = __wm || document.createElement('div')
+
+  can.width = 220
+  can.height = 180
+  can.style.display = 'none'
+  let cans = can.getContext('2d')
+  cans.rotate((-20 * Math.PI) / 180)
+  cans.font = font || '16px Microsoft JhengHei'
+  cans.fillStyle = textColor || 'rgba(180, 180, 180, 0.3)'
+  cans.textAlign = 'left'
+  cans.textBaseline = 'Middle'
+  cans.fillText(str, can.width / 10, can.height / 2)
+  const styleStr = `
+          position:absolute;
+          top:0;
+          left:0;
+          width:100%;
+          height:100%;
+          inset:0;
+          z-index:99999;
+          pointer-events:none;
+          background-repeat:repeat;
+          background-image:url('${can.toDataURL('image/png')}')`
+  div.setAttribute('style', styleStr)
+  div.classList.add('n20_v_watermark')
+  if (!__wm) {
+    parentNode.style.position = 'relative'
+    parentNode.insertBefore(div, parentNode.firstChild)
+  }
+  const MutationObserver = window.MutationObserver || window.WebKitMutationObserver
+  if (MutationObserver) {
+    let mo = new MutationObserver(function () {
+      const __wm = document.querySelector('.n20_v_watermark')
+      // 只在__wm元素变动才重新调用 __canvasWM
+      if ((__wm && __wm.getAttribute('style') !== styleStr) || !__wm) {
+        // 避免一直触发
+        mo.disconnect()
+        mo = null
+        addWaterMarker(str, parentNode, font, textColor)
+      }
+    })
+
+    mo.observe(parentNode, {
+      attributes: true,
+      subtree: true,
+      childList: true
+    })
+  }
+
+  parentNode.style.position = 'relative'
+  parentNode.insertBefore(div, parentNode.firstChild)
+}
+
+const watermark = {
+  install: function (Vue) {
+    Vue.directive('watermark', {
+      inserted: function (el, binding) {
+        console.log(el, binding)
+        addWaterMarker(binding.value.text, el, binding.value.font, binding.value.textColor)
+      }
+    })
+  }
+}
+
+export default watermark

package/src/i18n.json

@@ -1235,6 +1235,9 @@
   "密码只能包含数字 + 大写字母 + 小写字母": {
     "en": "Passwords can only contain numeric uppercase lowercase letters"
   },
+  "密码只能包含数字 + 大写字母 + 小写字母 + 特殊符号": {
+    "en": "Passwords can only contain numeric uppercase lowercase letters and special symbols"
+  },
   "关闭其他": {
     "en": "Close others"
   },