n20-common-lib 2.4.1 → 2.4.3

package/package.json

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

@@ -10,7 +10,7 @@
     <div v-for="(item, index) in list" :key="index" class="n20-drag-list-item">
       <i class="n20-drag-icon n20-icon-tuodong"></i>
       <slot :item="item" :index="index">
-        <span class="text-ellipsis">{{ item[labelKey] || item }}</span>
+        <span v-hover-tooltip:158="item[labelKey] || item" class="text-ellipsis">{{ item[labelKey] || item }}</span>
       </slot>
       <el-link
         v-if="!disabled"

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/FileUploadTable/index.vue

@@ -143,7 +143,7 @@
           </slot>
         </template>
       </el-table-column>
-      <el-table-column :label="'操作' | $lc" align="center" width="80" fixed="right">
+      <el-table-column :label="'操作' | $lc" align="center" width="85" fixed="right">
         <slot slot="header" slot-scope="scope" name="handle-header" :column="scope.column">{{ '操作' | $lc }}</slot>
         <slot slot-scope="{ row }" name="handle" :row="row">
           <el-button type="text" icon="el-icon-view" :disabled="!row[keys.url]" @click="seeFile(row)" />
@@ -435,7 +435,7 @@ export default {
     downRows() {
       if (!this.selectionList.length) {
         return this.$message({
-          message: '请先勾选要下载的数据！',
+          message: $lc(`请先勾选要下载的数据！`),
           type: 'warning',
           showClose: true
         })
@@ -445,7 +445,7 @@ export default {
     deleteRows() {
       if (!this.selectionList.length) {
         return this.$message({
-          message: '请先勾选要删除的数据！',
+          message: $lc('请先勾选要删除的数据！'),
           type: 'warning',
           showClose: true
         })

package/src/components/SecondaryTab/index.vue

@@ -21,7 +21,8 @@
       <template slot="label">
         <span v-if="item.icon" :class="item.icon"></span>
         <sup v-if="item.badge" class="el-tabs__item-badge"></sup>
-        {{ item.name }}
+        <span v-if="item.content" v-title="`${item.content}`"> {{ item.name }}</span>
+        <span v-else>{{ item.name }}</span>
       </template>
     </el-tab-pane>
   </el-tabs>
@@ -46,6 +47,9 @@ export default {
     }
   },
   methods: {
+    getTooltip(name, tips) {
+      return `<el-tooltip content="${tips}">${name}</el-tooltip>`
+    },
     clickFn(C) {
       let item = C.$attrs['tab-info']
       if (this.$listeners['update:init']) {
@@ -61,3 +65,32 @@ export default {
   }
 }
 </script>
+
+<style>
+.tooltip {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 9999;
+  background-color: black;
+  color: white;
+  padding: 5px;
+  font-size: 12px;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.tooltip::after {
+  content: '';
+  position: absolute;
+  top: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 5px solid transparent;
+  border-bottom-color: black;
+}
+
+.tooltip.show {
+  opacity: 1;
+}
+</style>

package/src/components/ShowColumn/index.vue

@@ -29,6 +29,7 @@
                 <el-checkbox
                   v-for="(column, i) in columnsAs"
                   :key="i"
+                  v-hover-tooltip="column[labelKey]"
                   :label="column[labelKey]"
                   :disabled="column.checked"
                   class="m-t"
@@ -190,7 +191,9 @@ export default {
     setChange() {
       if (this.dragList.length < 1) {
         this.$message.error(
-          `至少设置${this.isExport ? $lc('一列导出数据') : this.isFilter ? $lc('一个筛选条件') : $lc('一列显示列')}!`
+          `${$lc(`至少设置`)}${
+            this.isExport ? $lc('一列导出数据') : this.isFilter ? $lc('一个筛选条件') : $lc('一列显示列')
+          }!`
         )
         return
       }

package/src/components/Statis/index.vue

@@ -12,11 +12,11 @@
     </div>
     <div v-else class="n20-statis p-t-s p-b-s">
       <span class="m-r">
-        {{ '当页:' | $lc }}<span class="n20-primary">{{ pageSum }}</span
+        {{ '当页: ' | $lc }}<span class="n20-primary">{{ pageSum }}</span
         >{{ '条' | $lc }}
       </span>
       <span class="m-r">
-        {{ '全部:' | $lc }}<span class="n20-primary">{{ totalSun }}</span
+        {{ '全部: ' | $lc }}<span class="n20-primary">{{ totalSun }}</span
         >{{ '条' | $lc }}
       </span>
     </div>

package/src/components/Statis/statisItem.vue

@@ -4,7 +4,7 @@
     ><span class="stati-type stati-item-cell">{{ type }}</span
     ><span class="n20-statis-division p-l-s p-r-s stati-item-cell">|</span
     ><span v-for="(item, i) in list" :key="i" class="p-r stati-item-cell"
-      >{{ item.label }}:<span v-if="countLabel.includes(item.label)" class="n20-primary">{{ item.value }}</span
+      >{{ item.label }}: <span v-if="countLabel.includes(item.label)" class="n20-primary">{{ item.value }}</span
       ><span v-else class="n20-primary">{{ item | numerify('0,0.00', showW, showU) }}</span></span
     >
   </div>

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/components/TertiaryTab/index.vue

@@ -11,7 +11,8 @@
       <template slot="label">
         <span v-if="item.icon" :class="item.icon"></span>
         <sup v-if="item.badge" class="el-tabs__item-badge"></sup>
-        {{ item.name }}
+        <span v-if="item.content" v-title="`${item.content}`"> {{ item.name }}</span>
+        <span v-else>{{ item.name }}</span>
       </template>
     </el-tab-pane>
   </el-tabs>

package/src/directives/VTitle/index.js

@@ -1,4 +1,5 @@
 let tooltip = undefined
+import getWidth from '../../utils/asciiWidth.js'
 const popClass = 'at-title-pop-' + Date.now()
 
 function tipInit(Vue) {
@@ -101,4 +102,38 @@ TitleDirective.install = (Vue) => {
   })
 }
 
-export default TitleDirective
+const HoverTooltip = {}
+HoverTooltip.install = (Vue) => {
+  if (Vue.prototype.$isServer) return
+  Vue.directive('hover-tooltip', {
+    bind(el, binding, vnode) {
+      tooltip || tipInit(Vue)
+
+      el.$tooltipTitle = binding.value
+
+      let vmethods = vnode.child ? vnode.child.$options : vnode.context.$options
+      vmethods.deactivated || (vmethods.deactivated = [])
+
+      vmethods.deactivated.push(tipHide.bind(null, el))
+      el.$tipShow = () => tipShow(el, binding.arg)
+      el.$tipHide = () => tipHide(el)
+      el.addEventListener('mouseenter', () => {
+        if (getWidth(binding.value) > (binding.arg || 103)) {
+          return el.$tipShow()
+        }
+      })
+
+      el.addEventListener('mouseleave', el.$tipHide)
+    },
+    update: function (el, binding) {
+      el.$tooltipTitle = binding.value
+    },
+    unbind: function (el, binding) {
+      tipHide(el)
+      el.removeEventListener('mouseenter', el.$tipShow)
+      el.removeEventListener('mouseleave', el.$tipHide)
+    }
+  })
+}
+
+export { TitleDirective, HoverTooltip }

package/src/i18n.json

@@ -93,7 +93,7 @@
     "en": "Business pop-up window"
   },
   "删除": {
-    "en": "Delete"
+    "en": "Remove"
   },
   "退出提示": {
     "en": "Exit prompt"
@@ -177,7 +177,7 @@
     "en": "Passwords include at least two kinds of numbers, letters and special symbols."
   },
   "请输入利率": {
-    "en": "Please enter the interest rate"
+    "en": "Please enter"
   },
   "其中有效数据": {
     "en": "where valid data"
@@ -189,7 +189,7 @@
     "en": "Language switching"
   },
   "每页显示": {
-    "en": "Display per page"
+    "en": "Items per page"
   },
   "全部": {
     "en": "All"
@@ -258,7 +258,7 @@
     "en": "Table"
   },
   "恢复默认": {
-    "en": "Restore default"
+    "en": "Restore Default"
   },
   "日期选择框": {
     "en": "Date selection box"
@@ -288,13 +288,13 @@
     "en": "Attachment information"
   },
   "确定": {
-    "en": "Determine"
+    "en": "OK"
   },
   "导入": {
     "en": "Import"
   },
   "新增": {
-    "en": "New"
+    "en": "Add"
   },
   "密码只能包含数字 + 字母": {
     "en": "Passwords can only contain numeric letters"
@@ -401,6 +401,9 @@
   "驳回至发起人": {
     "en": "Rejected to promoter"
   },
+  "驳回至申请人": {
+    "en": "Rejected to applicant"
+  },
   "优雅紫": {
     "en": "Elegant purple"
   },
@@ -618,7 +621,7 @@
     "en": "Approval record"
   },
   "附件名称": {
-    "en": "Annex name"
+    "en": "Name"
   },
   "加载中": {
     "en": "Loading"
@@ -663,7 +666,7 @@
     "en": "Other reminders"
   },
   "设置显示列": {
-    "en": "Set display column"
+    "en": "Config Display Columns"
   },
   "附件批量上传": {
     "en": "Attachment Batch Upload"
@@ -720,7 +723,7 @@
     "en": "Youth green"
   },
   "上传人": {
-    "en": "Upreachers"
+    "en": "User"
   },
   "隐藏菜单": {
     "en": "Hide menu"
@@ -885,7 +888,7 @@
     "en": "Text link"
   },
   "附件上传": {
-    "en": "Attachment upload"
+    "en": "Upload"
   },
   "同意": {
     "en": "Agree"
@@ -1002,7 +1005,7 @@
     "en": "File name cannot be empty"
   },
   "请输入账号!": {
-    "en": "Please enter the account number!"
+    "en": "Please enter"
   },
   "按钮": {
     "en": "Button"
@@ -1164,7 +1167,7 @@
     "en": "Close others"
   },
   "上传时间": {
-    "en": "Upload time"
+    "en": "Time"
   },
   "导出进度": {
     "en": "Export progress"
@@ -1323,7 +1326,7 @@
     "en": "All ("
   },
   "上传进度": {
-    "en": "upload progress"
+    "en": "Progress"
   },
   "条件": {
     "en": "Condition"
@@ -1404,10 +1407,10 @@
     "en": "Import file"
   },
   "请输入金额": {
-    "en": "Please enter the amount"
+    "en": "Please enter"
   },
   "请输入密码": {
-    "en": "Please enter the password"
+    "en": "Please enter"
   },
   "活动名称": {
     "en": "Activity name"
@@ -1840,5 +1843,11 @@
   },
   "暂无数据": {
     "en": "No data"
+  },
+  "请先勾选要下载的数据！": {
+    "en": "Please select the data to be downloaded first!"
+  },
+  "请先勾选要删除的数据！": {
+    "en": "Please select the data to be deleted first!"
   }
 }

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'
@@ -87,7 +88,7 @@ import VDrag from './directives/VDrag/index.js'
 import VHas from './directives/VHas/index.js'
 import VMove from './directives/VMove/index.js'
 import VRuleKey from './directives/VRuleKey/index.js'
-import VTitle from './directives/VTitle/index.js'
+import { HoverTooltip, TitleDirective } from './directives/VTitle/index.js'
 
 /** 注入方法 */
 import dayjs from 'dayjs'
@@ -155,6 +156,7 @@ const components = [
   FooterBox,
   Filters,
   Table,
+  TablePro,
   TableOperate,
   TableOperateColumn,
   TableSetSize,
@@ -205,7 +207,8 @@ const install = function (Vue, opts = { prefix: 'Cl', i18nConfig: {} }) {
     Vue.component(name, component)
   })
 
-  Vue.use(VTitle)
+  Vue.use(HoverTooltip)
+  Vue.use(TitleDirective)
   Vue.use(VDrag)
   Vue.use(VMove)
   Vue.use(VRuleKey)
@@ -294,6 +297,7 @@ export {
   Step,
   Suspend,
   Table,
+  TablePro,
   TableOperate,
   TableOperateColumn,
   TableSetSize,