n20-common-lib 2.2.5 → 2.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "n20-common-lib",
-  "version": "2.2.5",
+  "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/DatePicker/por.vue

@@ -19,10 +19,14 @@
 <script>
 import { $lc } from '../../utils/i18n/index'
 let disabledDate_1 = (t) => {
-  return t < Date.now() - 86400000
+  let now = new Date()
+  now.setHours(0, 0, -1)
+  return t < now
 }
 let disabledDate_2 = (t) => {
-  return t >= Date.now()
+  let now = new Date()
+  now.setHours(23, 59, 59)
+  return t > now
 }
 let shortcuts_1 = [
   {
@@ -120,10 +124,6 @@ export default {
       type: [String, Number, Date],
       default: undefined
     },
-    valueFormat: {
-      type: String,
-      default: 'yyyy-MM-dd'
-    },
     startDate: {
       type: [String, Number, Date],
       default: null
@@ -132,6 +132,10 @@ export default {
       type: [String, Number, Date],
       default: null
     },
+    valueFormat: {
+      type: String,
+      default: 'yyyy-MM-dd'
+    },
     minNow: {
       type: Boolean,
       default: false
@@ -140,7 +144,7 @@ export default {
       type: Boolean,
       default: false
     },
-    showShortcut: {
+    shortcuts: {
       type: Boolean,
       default: true
     },
@@ -155,8 +159,8 @@ export default {
   },
   data() {
     let shortcuts = undefined
-    if (['date', 'datetime'].includes(this.type)) shortcuts = shortcuts_1
-    if (['daterange', 'datetimerange'].includes(this.type)) shortcuts = shortcuts_2
+    if (this.shortcuts && ['date', 'datetime'].includes(this.type)) shortcuts = shortcuts_1
+    if (this.shortcuts && ['daterange', 'datetimerange'].includes(this.type)) shortcuts = shortcuts_2
 
     this.pickerOptionsAs = Object.assign(
       {
@@ -184,9 +188,30 @@ export default {
       },
       set(val) {
         if (['daterange', 'monthrange', 'datetimerange'].includes(this.type)) {
-          this.$emit('update:start-date', val ? val[0] : null)
-          this.$emit('update:end-date', val ? val[1] : null)
-          this.$emit('change', val)
+          if (val && val[0]) {
+            if (this.type === 'monthrange' && ['yyyy-MM-dd', 'yyyy-MM-dd HH:mm:ss'].includes(this.valueFormat)) {
+              let end = new Date(val[1])
+              end.setMonth(end.getMonth() + 1)
+              end.setDate(0)
+              let Y = end.getFullYear()
+              let M = end.getMonth() + 1
+              let D = end.getDate()
+              let str = `${Y}-${M > 9 ? M : '0' + M}-${D > 9 ? D : '0' + D}`
+              if (this.valueFormat === 'yyyy-MM-dd HH:mm:ss') str = str + ' 23:59:59'
+
+              this.$emit('update:start-date', val[0])
+              this.$emit('update:end-date', str)
+              this.$emit('change', [val[0], str])
+            } else {
+              this.$emit('update:start-date', val[0])
+              this.$emit('update:end-date', val[1])
+              this.$emit('change', val)
+            }
+          } else {
+            this.$emit('update:start-date', null)
+            this.$emit('update:end-date', null)
+            this.$emit('change', val)
+          }
         } else {
           this.$emit('input', val)
           this.$emit('change', val)

package/src/components/DateSelect/index.vue

@@ -55,6 +55,7 @@
 </template>
 
 <script>
+// TODO: 双休绑定数值格式不统一
 import datePicker from '../DatePicker/index.vue'
 import quarterDatePicker from './quarterDatePicker'
 import dayjs from 'dayjs'
@@ -108,7 +109,6 @@ export default {
         break
       case '月':
         this.month = dayjs(this.value.startDate).format('YYYY-MM')
-        console.log(this.month)
         break
       case '季':
         this.quarter = this.value

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>