n20-common-lib 2.2.6 → 2.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "n20-common-lib",
-  "version": "2.2.6",
+  "version": "2.2.7",
   "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,99 @@
+.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-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: 16px;
+  }
+  .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/Table/filters.js

@@ -58,3 +58,31 @@ 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) {
+  let list = undefined
+  if (typeof colft !== 'string') {
+    list = colft
+  } else {
+    list = fMap[colft]
+  }
+  if (Array.isArray(list)) {
+    return list.map((item) => ({ ...item, label: item.text }))
+  }
+}

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,45 @@
       />
     </template>
   </el-table>
+  <ux-table
+    v-else
+    :key="colsKey"
+    :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" :column="item"></slot>
+      <ux-table-column
+        v-else-if="item.render"
+        :key="'cl-table-' + i"
+        :field="item.prop"
+        :title="item.label"
+        :type="item.type | typeF"
+        v-bind="item"
+      >
+        <columnRender slot-scope="{ row, $index }" :c-render="item.render" :row="row" :index="$index" />
+      </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)"
+        :field="item.prop"
+        :title="item.label"
+        :type="item.type | typeF"
+        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 +88,18 @@ export default {
   },
   filters: {
     colfF,
-    colftF
+    colftF,
+    typeF(type) {
+      return type && type === 'selection' ? 'checkbox' : type
+    },
+    colf_BD_F,
+    colft_BD_F
   },
   props: {
+    bigData: {
+      type: Boolean,
+      default: false
+    },
     column: {
       type: Boolean,
       default: false

package/src/components/UTable/ElxTableFilter.vue

@@ -0,0 +1,105 @@
+<template>
+  <div
+    class="elx-table--filter-wrapper filter--prevent-default p-a"
+    :class="{
+      't--animat': $parent.animat,
+      'is--multiple': filterStore.multiple,
+      'filter--active': filterStore.visible
+    }"
+    :style="filterStore.style"
+  >
+    <slot v-if="filterStore.visible">
+      <el-input
+        v-model="searchVal"
+        class="input-w m-b"
+        :placeholder="'请输入' | $lc"
+        clearable
+        suffix-icon="el-icon-search"
+      />
+      <div v-if="filterStore.multiple">
+        <el-checkbox v-model="allCheck" :label="true" :indeterminate="indeterminate">全部</el-checkbox>
+        <div class="input-w p-b-s" style="max-height: 226px; overflow: auto">
+          <template v-for="filter in filters">
+            <el-checkbox
+              v-if="filter.label.includes(searchVal)"
+              :key="filter.value"
+              v-model="filter.checked"
+              class="m-t-s m-r-0"
+              style="display: block"
+            >
+              <span class="align-bottom">{{ filter.label }}</span>
+            </el-checkbox>
+          </template>
+        </div>
+      </div>
+      <div v-else>
+        <ul class="el-table-filter__list">
+          <li class="el-table-filter__list-item text-l" :class="{ 'is-active': !allCheck }">全部</li>
+        </ul>
+        <ul class="el-table-filter__list" style="max-height: 226px; overflow: auto">
+          <template v-for="filter in filters">
+            <li
+              v-if="filter.label.includes(searchVal)"
+              :key="filter.value"
+              class="el-table-filter__list-item text-l"
+              :class="{ 'is-active': filter.checked }"
+              @click="filter.checked = !filter.checked"
+            >
+              <span class="text-ellipsis align-bottom" style="display: inline-block; max-width: 12em">{{
+                filter.label
+              }}</span>
+            </li>
+          </template>
+        </ul>
+      </div>
+    </slot>
+  </div>
+</template>
+
+<script>
+import { $lc } from '../../utils/i18n/index'
+export default {
+  name: 'ElxTableFilter',
+  props: {
+    filterStore: { type: Object, default: () => ({}) }
+  },
+  data() {
+    return {
+      searchVal: '',
+      filteredValue: []
+    }
+  },
+  computed: {
+    column() {
+      return this.filterStore.column || {}
+    },
+    filters() {
+      return this.filterStore.options
+      // _checked
+    },
+    multiple() {
+      return this.filterStore.multiple
+    },
+    indeterminate() {
+      return this.filterStore.isIndeterminate
+    },
+    allCheck: {
+      get() {
+        return this.filterStore.isAllSelected
+      },
+      set(val) {
+        this.filterStore.isAllSelected = val
+      }
+    }
+  },
+  watch: {
+    'filterStore.visible': {
+      handler() {
+        console.log(this.filterStore, 1212)
+      }
+    }
+  },
+  mounted() {},
+  methods: {}
+}
+</script>

package/src/components/UTable/index.js

@@ -0,0 +1,114 @@
+import { UTable, UTableColumn, UxGrid, UxTableColumn } from 'umy-table'
+
+import ElxTableFilter from './ElxTableFilter.vue'
+
+function install(Vue) {
+  Vue.component('UTable', UTable)
+  Vue.component('UTableColumn', UTableColumn)
+  repairUtable(Vue) // 美化
+
+  Vue.component('UxTable', UxGrid)
+
+  const _created = UxTableColumn.created
+  UxTableColumn.created = function () {
+    _created.call(this, ...arguments)
+    this.$watch('filters', () => {
+      this.columnConfig.filters = this.filters
+    })
+  }
+  Vue.component('UxTableColumn', UxTableColumn)
+  // 自定义筛选
+  Vue.component('ElxTableFilter', ElxTableFilter)
+}
+
+export default {
+  install
+}
+
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+// 美化表头搜索
+import FilterPanel from '../../utils/tableheaderFilterpanel.vue'
+function setPropsDefault(component, props) {
+  let c_props = component.props
+  Object.keys(props).forEach((key) => {
+    c_props[key] = Object.assign({}, c_props[key], props[key])
+  })
+}
+function setMethodsDefault(component, methods) {
+  let c_methods = component.methods
+  Object.keys(methods).forEach((key) => {
+    c_methods[key] = methods[key]
+  })
+}
+function hasClass(el, cls) {
+  if (!el || !cls) return false
+  if (cls.indexOf(' ') !== -1) throw new Error('className should not contain space.')
+  if (el.classList) {
+    return el.classList.contains(cls)
+  } else {
+    return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') > -1
+  }
+}
+
+function repairUtable(Vue) {
+  setPropsDefault(UTableColumn, {
+    filterPlacement: {
+      default: 'bottom'
+    }
+  })
+  if (UTable.components.ElTable.components.TableHeader) {
+    setMethodsDefault(UTable.components.ElTable.components.TableHeader, {
+      handleFilterClick(event, column) {
+        event.stopPropagation()
+        const target = event.target
+        let cell = target.tagName === 'TH' ? target : target.parentNode
+        if (hasClass(cell, 'noclick')) return
+        cell = cell.querySelector('.el-table__column-filter-trigger') || cell
+        const table = this.$parent
+
+        let filterPanel = this.filterPanels[column.id]
+
+        if (filterPanel && column.filterOpened) {
+          filterPanel.showPopper = false
+          return
+        }
+
+        if (!filterPanel) {
+          filterPanel = new Vue(FilterPanel)
+          this.filterPanels[column.id] = filterPanel
+          if (column.filterPlacement) {
+            filterPanel.placement = column.filterPlacement
+          }
+          filterPanel.table = table
+          filterPanel.cell = cell
+          filterPanel.column = column
+          !this.$isServer && filterPanel.$mount(document.createElement('div'))
+        }
+
+        setTimeout(() => {
+          filterPanel.showPopper = true
+        }, 16)
+      }
+    })
+  }
+}