n20-common-lib 2.2.6 → 2.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "n20-common-lib",
-  "version": "2.2.6",
+  "version": "2.2.8",
   "private": false,
   "main": "src/index.js",
   "scripts": {
@@ -54,6 +54,7 @@
     "qrcode": "*",
     "resize-detector": "*",
     "strip-json-comments": "*",
+    "umy-table": "^1.1.8",
     "v-viewer": "*",
     "vuedraggable": "*"
   },

package/src/assets/css/_coreLib.scss

@@ -2,6 +2,9 @@
 @import './rootvar.scss';
 @import './font-icon.scss';
 
+@import './el-button.scss';
+@import './el-table.scss';
+
 @import './title-pop.scss';
 @import './cl-form-item.scss';
 @import './cl-approve-card.scss';
@@ -30,6 +33,9 @@
 @import './cl-general-card.scss';
 @import './cl-anchor.scss';
 @import './cl-flow-step.scss';
+@import './umy-table/u-table.scss';
+@import './umy-table/u-tree-table.scss';
+@import './umy-table/ux-grid.scss';
 
 @import '../../plugins/Print/print.scss';
 @import './select.scss';
@@ -38,9 +44,3 @@
 /* 临时引入 */
 @import '../../components/ChildRange/style.scss';
 @import '../../components/PageHeader/style.scss';
-.table-header-popover.el-popover {
-  padding: 16px;
-}
-.el-form-item__label {
-  color: $--color-text-primary;
-}

package/src/assets/css/cl-form-item.scss

@@ -733,3 +733,7 @@ $--input-max: 224px;
   top: 100%;
   left: 0;
 }
+
+.el-form-item__label {
+  color: $--color-text-primary;
+}

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

@@ -14,6 +14,18 @@
     font-size: 12px;
   }
 }
+.el-table--small,
+.el-table--mini {
+  .el-table__cell {
+    .el-button--text {
+      padding-top: 2px;
+      padding-bottom: 2px;
+    }
+    .el-link {
+      line-height: initial;
+    }
+  }
+}
 
 .el-table th {
   font-weight: $--font-weight-primary;
@@ -99,3 +111,7 @@
 .el-table .descending .sort-caret.descending {
   color: $--color-primary;
 }
+
+.table-header-popover.el-popover {
+  padding: 16px;
+}

package/src/assets/css/element.dev.scss

@@ -6,9 +6,6 @@
 $--font-path: '~element-ui/lib/theme-chalk/fonts';
 
 @import '~element-ui/packages/theme-chalk/src/index';
-@import './el-button.scss';
-@import './el-table.scss';
-@import "./alert.scss";
 
 .update-doc {
   ul > li {

package/src/assets/css/index.scss

@@ -5,7 +5,5 @@
 /* 改变 icon 字体路径变量，必需 */
 $--font-path: '~element-ui/lib/theme-chalk/fonts';
 @import '~element-ui/packages/theme-chalk/src/index';
-@import './el-button.scss';
-@import './el-table.scss';
 
 @import './_coreLib.scss';

package/src/assets/css/umy-table/u-table.scss

@@ -0,0 +1,63 @@
+.plTableBox {
+  width: 100%;
+  position: relative;
+  .el-table {
+    .umy-table-beyond {
+      white-space: nowrap !important;
+      position: relative;
+    }
+  }
+  .el-table__virtual-wrapper {
+    .el-table__body {
+      width: 100%;
+    }
+  }
+  .el-table--fixed__virtual-wrapper {
+    width: auto !important;
+  }
+  .el-table__footer-wrapper {
+    margin-top: 0 !important;
+  }
+  .umy-table-header-border-right-none-th {
+    border-right: none !important;
+  }
+  .fixed-columns-roll-style {
+    .el-table__body-wrapper {
+      z-index: 2 !important;
+    }
+    .pltableFixedWrapper {
+      z-index: 2 !important;
+    }
+  }
+  .myPagination {
+    padding-top: 20px;
+    text-align: right;
+  }
+}
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 5555 !important;
+  background-color: #000;
+  opacity: 0.2;
+}
+.beautifyTableClass {
+  .plTbaleTotal {
+    .el-table__footer-two {
+      border-top: 1px solid #c7c9cc;
+    }
+  }
+}
+
+.plTableBox {
+  .el-table {
+    .hidden-columns {
+      visibility: hidden;
+      position: absolute;
+      z-index: -1;
+    }
+  }
+}

package/src/assets/css/umy-table/u-tree-table.scss

@@ -0,0 +1,34 @@
+.cell--tree-node {
+  position: relative;
+}
+.pl-tree-cell {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+  padding-left: 1.5em;
+}
+.tree--btn-wrapper {
+  position: absolute;
+  top: 50%;
+  width: 1em;
+  height: 1em;
+  line-height: 1em;
+  margin-top: -0.5em;
+  transition: transform 0.2s ease-in-out;
+  z-index: 1;
+  user-select: none;
+  color: #333333 !important;
+  font-size: 16px;
+  cursor: pointer;
+  &.tree--btn-wrapper-show {
+    transform: rotate(90deg);
+  }
+}
+.reverse-table {
+  .u-table--fixed-left-wrapper {
+    .u-body--column {
+      background-color: $--table-header-background-color;
+    }
+  }
+}

package/src/assets/css/umy-table/ux-grid.scss

@@ -0,0 +1,111 @@
+.plTableBox .elx-table {
+  .elx-body--column,
+  .elx-footer--column,
+  .elx-header--column {
+    &.col--ellipsis {
+      height: 40px;
+    }
+  }
+  &.elx-editable .elx-body--column {
+    height: 40px;
+  }
+
+  &.border--default,
+  &.border--default,
+  &.border--outer {
+    .elx-table--header-wrapper {
+      background-color: --table-header-background-color;
+    }
+  }
+  &.border--full {
+    .elx-body--column,
+    .elx-footer--column,
+    .elx-header--column {
+      background-image: linear-gradient($--table-border-color, $--table-border-color),
+        linear-gradient($--table-border-color, $--table-border-color);
+    }
+  }
+
+  .elx-cell--checkbox {
+    .elx-checkbox--icon {
+      width: 16px;
+      height: 16px;
+      &:before {
+        width: 16px;
+        height: 16px;
+        border: 1px solid $--radio-input-border-color;
+        border-radius: 2px;
+      }
+      &:after {
+        left: 6px;
+        top: 3px;
+      }
+    }
+    .elx-checkbox--indeterminate-icon:after {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 7px;
+    }
+  }
+
+  .elx-cell--sort {
+    display: inline-flex;
+    flex-direction: row-reverse;
+    align-items: center;
+    width: 16px;
+    height: 16px;
+    line-height: 16px;
+    vertical-align: middle;
+    cursor: pointer;
+  }
+  .elx-sort--asc-btn,
+  .elx-sort--desc-btn {
+    width: 8px;
+    height: 16px;
+    border: none;
+    font-style: normal;
+    position: static;
+    &:before {
+      content: '\e61c';
+      font-family: 'core-lib-iconfont';
+      font-size: 12px;
+      line-height: 12px;
+      position: relative;
+      left: auto;
+      top: 1px;
+      right: 3px;
+      bottom: auto;
+      border: none;
+    }
+    &:hover {
+      color: $--color-primary-light-6;
+    }
+    &.sort--active {
+      color: $--color-primary;
+    }
+  }
+  .elx-sort--desc-btn:before {
+    content: '\e61d';
+    font-family: 'core-lib-iconfont';
+    position: relative;
+    right: 1px;
+  }
+  .elx-cell--filter {
+    padding-left: 0;
+  }
+  .elx-table--filter-wrapper {
+    margin-top: 6px;
+    min-width: auto;
+    border: 1px solid #ebeef5;
+    border-radius: 2px;
+    background-color: #fff;
+    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
+    box-sizing: border-box;
+  }
+  .filter--active {
+    .elx-cell--title {
+      color: $--color-primary;
+    }
+  }
+}

package/src/components/ApprovalButtons/index.vue

@@ -327,7 +327,7 @@ export default {
         }
       } else {
         this.$message.success(str + $lc('成功'))
-        this.goFrom()
+        setTimeout(this.goFrom, 300)
       }
     },
     addErrFn() {

package/src/components/LoginTemporary/form.vue

@@ -146,6 +146,7 @@ import qrCode from './qrcode.vue'
 import { siteTree2menus, siteTree2RelaNos } from './utils'
 import CaMap from '../../plugins/Sign/CaMap.js'
 import importG from '../../utils/importGlobal.js'
+import { setItem } from '../../utils/storageEdit'
 
 function encode(pwd = '', key = 0) {
   if (pwd === '') return ''
@@ -596,15 +597,18 @@ export default {
       sessionStorage.setItem('menuTree', JSON.stringify(layoutMenus))
 
       let relaNos = siteTree2RelaNos(data)
-      sessionStorage.setItem('relaNos', JSON.stringify(relaNos))
+      // sessionStorage.setItem('relaNos', JSON.stringify(relaNos))
+      setItem('relaNos', relaNos)
 
       // XXX: 兼容旧版resources
-      sessionStorage.setItem('resources', JSON.stringify(data))
+      // sessionStorage.setItem('resources', JSON.stringify(data))
+      setItem('resources', data)
     },
     // 新增不同单位对应不同角色,具有不同权限
     getCltRelaNos() {
       if (this.asyncRelaNos) {
-        sessionStorage.setItem('cltrelaNos', '{}')
+        // sessionStorage.setItem('cltrelaNos', '{}')
+        setItem('cltrelaNos', {})
         return Promise.resolve()
       }
 
@@ -621,7 +625,8 @@ export default {
             cltrelaMap.forEach((item) => {
               cltrelaNos[item.cltNo] = item.relaNos
             })
-            sessionStorage.setItem('cltrelaNos', JSON.stringify(cltrelaNos))
+            // sessionStorage.setItem('cltrelaNos', JSON.stringify(cltrelaNos))
+            setItem('cltrelaNos', cltrelaNos)
           })
           .finally(resolve)
       })

package/src/components/Table/filters.js

@@ -58,3 +58,35 @@ export function colftF(colft, fMap) {
   if (typeof colft !== 'string') return colft
   return fMap[colft]
 }
+
+export function colf_BD_F(colf, map) {
+  if (!colf) return undefined
+  if (typeof colf !== 'string') {
+    return ({ cellValue, row, column }) => colf(row, column, cellValue)
+  }
+  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 colft_BD_F(colft, fMap, key) {
+  let list = undefined
+  if (typeof colft !== 'string') {
+    list = colft
+  } else {
+    list = fMap[colft]
+  }
+  if (Array.isArray(list)) {
+    return list.map((item) => ({
+      label: item.text,
+      data: { count: item.count },
+      ...item
+    }))
+  }
+}

package/src/components/Table/index.vue

@@ -1,5 +1,6 @@
 <template>
   <el-table
+    v-if="!bigData"
     ref="el-table"
     :key="colsKey"
     :header-cell-style="{ 'text-align': 'center' }"
@@ -23,11 +24,51 @@
       />
     </template>
   </el-table>
+  <ux-table
+    v-else
+    ref="ux-table"
+    :key="colsKey"
+    :header-cell-style="{ 'text-align': 'center' }"
+    :data="data"
+    :height="height"
+    v-bind="$attrs"
+    v-on="{ ...$listeners, 'filter-change': bigFilter, 'expand-change': bigExpand }"
+  >
+    <template v-for="(item, i) in columns">
+      <slot v-if="item.slotName" :name="item.slotName" :column="item" :big-data="bigData"></slot>
+      <ux-table-column
+        v-else-if="item.render"
+        :key="'cl-table-' + i"
+        :filters="item.filters | colft_BD_F(filtersMap)"
+        :class-name="item | colKey"
+        :field="item.prop"
+        :title="item.label"
+        :type="item.type | typeF"
+        :show-overflow="item | overflowF"
+        v-bind="item"
+      >
+        <columnRender slot-scope="{ row, $rowIndex }" :c-render="item.render" :row="row" :index="$rowIndex" />
+      </ux-table-column>
+
+      <ux-table-column
+        v-else
+        :key="'cl-table-' + i"
+        :formatter="item.formatter | colf_BD_F(item.formatterMap)"
+        :filters="item.filters | colft_BD_F(filtersMap)"
+        :class-name="item | colKey"
+        :field="item.prop"
+        :title="item.label"
+        :type="item.type | typeF"
+        :show-overflow="item | overflowF"
+        v-bind="item"
+      />
+    </template>
+  </ux-table>
 </template>
 
 <script>
-import { $lc } from '../../utils/i18n/index'
-import { colfF, colftF } from './filters'
+// import { $lc } from '../../utils/i18n/index'
+import { colfF, colftF, colf_BD_F, colft_BD_F } from './filters'
 
 const columnRender = {
   props: {
@@ -53,9 +94,25 @@ export default {
   },
   filters: {
     colfF,
-    colftF
+    colftF,
+    typeF(type) {
+      return type && type === 'selection' ? 'checkbox' : type
+    },
+    overflowF(item) {
+      return item.showOverflowTooltip || item['show-overflow-tooltip'] ? 'tooltip' : 'ellipsis'
+    },
+    colf_BD_F,
+    colft_BD_F,
+    colKey(item) {
+      let key = item.columnKey || item['column-key']
+      return key ? 'key@' + key : ''
+    }
   },
   props: {
+    bigData: {
+      type: Boolean,
+      default: false
+    },
     column: {
       type: Boolean,
       default: false
@@ -91,24 +148,71 @@ export default {
       colsKey: 0
     }
   },
+  provide() {
+    let bigData = this.bigData
+    return {
+      bigData
+    }
+  },
   watch: {
     columns() {
       this.colsKey = this.colsKey + 1
     }
   },
   mounted() {
-    let inTable = this.$refs['el-table']
-    if (inTable) {
-      this.$refs['table'] = inTable
-      this.clearSelection = inTable.clearSelection
-      this.toggleRowSelection = inTable.toggleRowSelection
-      this.toggleAllSelection = inTable.toggleAllSelection
-      this.toggleRowExpansion = inTable.toggleRowExpansion
-      this.setCurrentRow = inTable.setCurrentRow
-      this.clearSort = inTable.clearSort
-      this.clearFilter = inTable.clearFilter
-      this.doLayout = inTable.doLayout
-      this.sort = inTable.sort
+    if (!this.bigData) {
+      let inTable = this.$refs['el-table']
+      if (inTable) {
+        this.$refs['table'] = inTable
+        this.clearSelection = inTable.clearSelection
+        this.toggleRowSelection = inTable.toggleRowSelection
+        this.toggleAllSelection = inTable.toggleAllSelection
+        this.toggleRowExpansion = inTable.toggleRowExpansion
+        this.setCurrentRow = inTable.setCurrentRow
+        this.clearSort = inTable.clearSort
+        this.clearFilter = inTable.clearFilter
+        this.doLayout = inTable.doLayout
+        this.sort = inTable.sort
+      }
+    } else {
+      let inTable = this.$refs['ux-table']
+      if (inTable) {
+        this.$refs['table'] = inTable
+        this.clearSelection = inTable.clearSelection
+        this.toggleRowSelection = function (row, selected) {
+          inTable.toggleRowSelection([{ row, selected }])
+        }
+        this.toggleAllSelection = inTable.toggleAllSelection
+        this.toggleRowExpansion = inTable.toggleRowExpansion
+        this.setCurrentRow = inTable.setCurrentRow
+        this.clearSort = inTable.clearSort
+        this.clearFilter = inTable.clearFilter
+        //
+        this.doLayout = inTable.loadData
+        this.sort = inTable.sort
+      }
+    }
+  },
+  methods: {
+    bigFilter(arg) {
+      let filters = arg.filters || []
+      let elFilters = {}
+      filters.forEach((item) => {
+        let key = item.column.className
+        if (key && typeof key === 'string') {
+          let _key = key.split(',').find((s) => s.includes('key@'))
+
+          if (_key) _key = _key.replace('key@', '')
+
+          if (_key) key = _key
+        }
+
+        elFilters[key || item.property] = item.column.filterMultiple ? item.values : item.values[0]
+      })
+      this.$emit('filter-change', elFilters, arg)
+    },
+    bigExpand(arg) {
+      this.$emit('expand-change', arg.row, arg.expanded, arg)
     }
   }
 }

package/src/components/TableOperateColumn/index.vue

@@ -1,17 +1,21 @@
 <template>
-  <el-table-column v-bind="$attrs">
+  <el-table-column v-if="!bigData" v-bind="$attrs">
     <OperateBtns slot-scope="{ row, $index }" :btn-list="btnList" :row="row" @command="(c) => $emit(c, row, $index)" />
   </el-table-column>
+  <ux-table-column v-else :field="$attrs.prop" :title="$attrs.label" v-bind="$attrs">
+    <OperateBtns slot-scope="{ row, $index }" :btn-list="btnList" :row="row" @command="(c) => $emit(c, row, $index)" />
+  </ux-table-column>
 </template>
 
 <script>
-import { $lc } from '../../utils/i18n/index'
+// import { $lc } from '../../utils/i18n/index'
 import OperateBtns from './OperateBtns.vue'
 export default {
   name: 'TableOperateColumn',
   components: {
     OperateBtns
   },
+  inject: ['bigData'],
   props: {
     btnList: {
       type: Array,