n20-common-lib 2.4.2 → 2.4.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "n20-common-lib",
-  "version": "2.4.2",
+  "version": "2.4.3",
   "private": false,
   "main": "src/index.js",
   "scripts": {
@@ -56,7 +56,9 @@
     "resize-detector": "*",
     "strip-json-comments": "*",
     "v-viewer": "*",
-    "vuedraggable": "*"
+    "vuedraggable": "*",
+    "vxe-table": "^3.6.17",
+    "xe-utils": "^3.5.11"
   },
   "devDependencies": {
     "@babel/plugin-proposal-optional-chaining": "^7.14.5",
@@ -94,8 +96,8 @@
     "svg-url-loader": "^7.1.1",
     "svgo": "1.2.0",
     "swiper": "^8.4.5",
-    "url-loader": "^4.1.1",
     "umy-table": "^1.1.8",
+    "url-loader": "^4.1.1",
     "vue": "^2.6.11",
     "vue-cli-plugin-axios": "~0.0.4",
     "vue-grid-layout": "^2.3.12",

package/src/components/Expandable/index.vue

@@ -1,7 +1,7 @@
 <script>
 import ExpandablePane from './main.vue'
 export default {
-  ...ExpandablePane,
-  name: 'Expandable'
+  name: 'Expandable',
+  extends: ExpandablePane
 }
 </script>

package/src/components/Expandable/main.vue

@@ -50,8 +50,11 @@ export default {
     }
   },
   watch: {
-    defaultExpand(val) {
-      this.expand = val
+    defaultExpand: {
+      handler(val) {
+        this.expand = val
+      },
+      immediate: true
     }
   },
   methods: {

package/src/components/Table/filters.js

@@ -2,6 +2,7 @@ import numerify from 'numerify'
 import dayjs from 'dayjs'
 
 function tplFn(row, sc, mck, map = {}) {
+  console.log(row, sc, mck, map)
   let str = ''
   sc.forEach((s, i) => {
     str += s
@@ -46,6 +47,7 @@ function tplFn(row, sc, mck, map = {}) {
 }
 
 export function colfF(colf, map) {
+  console.log(colf)
   if (typeof colf !== 'string') return colf
   let sc = colf.split(/{.+?}/g) || []
   let mc = colf.match(/{.+?}/g) || []

package/src/components/TablePro/index.js

@@ -0,0 +1,10 @@
+import vxeTable from 'vxe-table'
+import 'vxe-table/lib/style.css'
+
+function install(Vue) {
+  Vue.use(vxeTable)
+}
+
+export default {
+  install
+}

package/src/components/TablePro/index.vue

@@ -0,0 +1,208 @@
+<template>
+  <vxe-table
+    ref="el-table"
+    :key="colsKey"
+    :class="{ 'cell-default-set--': cellDefault, 'clear-in-form-margin': clearInFormMargin }"
+    :header-cell-style="{ 'text-align': 'center' }"
+    :data="data"
+    :height="height"
+    v-bind="Object.assign({ size: size }, $attrs, sizeBind)"
+    v-on="$listeners"
+  >
+    <template v-for="(item, i) in columns">
+      <slot v-if="item.slotName" :name="item.slotName" :column="item"></slot>
+      <!-- <vxe-column v-else-if="item.render" :key="'vxe-table-' + i" v-bind="item">
+        <columnRender slot-scope="{ row, $index }" :c-render="item.render" :row="row" :index="$index" />
+      </vxe-column> -->
+      <vxe-column
+        v-else
+        :key="'vxe-table-' + i"
+        :formatter="item.formatter | colfF(item.formatterMap)"
+        :filters="item.filters | colftF(filtersMap)"
+        :title="item.label"
+        :field="item.prop"
+        v-bind="item"
+      />
+    </template>
+    <tableSetSize :size="sizeC" @update:size="sizeUp" @resize="sizeSet" />
+  </vxe-table>
+</template>
+
+<script>
+// import { $lc } from '../../utils/i18n/index'
+import { colfF, colftF, colf_BD_F, colft_BD_F } from '../Table/filters'
+
+import tableSetSize from '../TableSetSize/index.vue'
+
+const columnRender = {
+  props: {
+    cRender: {
+      type: Function
+    },
+    row: {
+      type: Object
+    },
+    index: {
+      type: [Number, String]
+    }
+  },
+  render(h) {
+    return this.cRender(h, this.row, this.index)
+  }
+}
+
+export default {
+  name: 'TablePro',
+  components: {
+    columnRender,
+    tableSetSize
+  },
+  filters: {
+    colfF,
+    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
+    },
+    data: {
+      type: Array,
+      default: undefined
+    },
+    columns: {
+      type: Array,
+      require: true,
+      default: () => []
+    },
+    filtersMap: {
+      type: Object,
+      default: () => ({})
+    },
+    pageObj: {
+      type: Object,
+      default: undefined
+    },
+    pageKey: {
+      type: Object,
+      default: undefined
+    },
+    height: {
+      type: [String, Number],
+      default: undefined
+    },
+    size: {
+      type: String,
+      default: 'small'
+    },
+    showSetsize: {
+      type: Boolean,
+      default: false
+    },
+    cellDefault: {
+      type: Boolean,
+      default: false
+    },
+    clearInFormMargin: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    let _this = this
+    return {
+      colsKey: 0,
+      sizeC: _this.size,
+      sizeBind: undefined
+    }
+  },
+  provide() {
+    let bigData = this.bigData
+    return {
+      bigData
+    }
+  },
+  watch: {
+    columns() {
+      this.colsKey = this.colsKey + 1
+    },
+    size(val) {
+      this.sizeC = val
+    }
+  },
+  mounted() {
+    console.log(this.data)
+    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
+    }
+  },
+  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.values
+      })
+      this.$emit('filter-change', elFilters, arg)
+    },
+    bigExpand(arg) {
+      this.$emit('expand-change', arg.row, arg.expanded, arg)
+    },
+    sizeUp(size) {
+      this.sizeC = size
+      this.$emit('update:size', size)
+    },
+    sizeSet(el) {
+      this.sizeBind = el
+
+      let inTable = this.$refs['el-table']
+      if (inTable) {
+        inTable.doLayout()
+      }
+    }
+  }
+}
+</script>
+<style>
+.cell-default-set-- .el-table__body .el-table__cell .cell:empty::before {
+  content: '--';
+}
+.clear-in-form-margin .el-table__body .el-table__cell .cell .el-form-item {
+  margin-bottom: 0;
+}
+</style>

package/src/index.js

@@ -50,6 +50,7 @@ import StatisPopover from './components/Statis/statisPopover.vue'
 import Step from './components/Step/index.vue'
 import Suspend from './components/Suspend/index.vue'
 import Table from './components/Table/index.vue'
+import TablePro from './components/TablePro/index.vue'
 import TableOperate from './components/TableOperateColumn/OperateBtns.vue'
 import TableOperateColumn from './components/TableOperateColumn/index.vue'
 import TableSetSize from './components/TableSetSize'
@@ -155,6 +156,7 @@ const components = [
   FooterBox,
   Filters,
   Table,
+  TablePro,
   TableOperate,
   TableOperateColumn,
   TableSetSize,
@@ -295,6 +297,7 @@ export {
   Step,
   Suspend,
   Table,
+  TablePro,
   TableOperate,
   TableOperateColumn,
   TableSetSize,