n20-common-lib 2.9.13 → 2.9.14

package/src/components/Table/index.vue

@@ -12,13 +12,13 @@
   >
     <template v-for="(item, i) in columns">
       <slot v-if="item.slotName" :name="item.slotName" :column="item"></slot>
-      <el-table-column v-else-if="item.render" :key="'cl-table-' + i" v-bind="item">
+      <el-table-column v-else-if="item.render" :key="'cl-table-column-render' + i" v-bind="item">
         <columnRender slot-scope="{ row, $index }" :c-render="item.render" :row="row" :index="$index" />
       </el-table-column>
 
       <el-table-column
         v-else
-        :key="'cl-table-' + i"
+        :key="'cl-table-column-' + i"
         :formatter="item.formatter | colfF(item.formatterMap)"
         :filters="item.filters | colftF(filtersMap)"
         v-bind="item"
@@ -29,7 +29,7 @@
   <ux-table
     v-else
     ref="ux-table"
-    :key="colsKey"
+    :key="'ux-table-' + colsKey"
     :header-cell-style="{ 'text-align': 'center' }"
     :data="data"
     :height="height"
@@ -54,7 +54,7 @@
 
       <ux-table-column
         v-else
-        :key="'cl-table-' + i"
+        :key="'cl-table-uxtable-' + i"
         :formatter="item.formatter | colf_BD_F(item.formatterMap)"
         :filters="item.filters | colft_BD_F(filtersMap)"
         :class-name="item | colKey"

package/src/components/TablePro/filterContent.vue

@@ -4,7 +4,7 @@
       <div v-if="filterMultiple" class="my-fc-search-content">
         <template v-if="filters.length">
           <div class="my-fc-search-top">
-            <el-input v-model="searchVal" placeholder="输入关键字进行过滤" />
+            <el-input v-model="searchVal" :placeholder="$lc('输入关键字进行过滤')" />
           </div>
           <div>
             <el-checkbox v-model="allCheck" :label="true" :indeterminate="indeterminate">{{
@@ -30,14 +30,23 @@
               type="primary"
               size="mini"
               @click="
-                () => {
-                  filteredValue.length ? confirmFilterEvent() : resetFilterEvent()
+                (ev) => {
+                  filteredValue.length ? confirmFilterEvent(ev) : resetFilterEvent(ev)
                 }
               "
             >
               {{ '确认' | $lc }}
             </el-button>
-            <el-button plain size="mini" @click="resetFilterEvent">{{ '清空' | $lc }}</el-button>
+            <el-button
+              plain
+              size="mini"
+              @click="
+                (ev) => {
+                  resetFilterEvent(ev)
+                }
+              "
+              >{{ '清空' | $lc }}</el-button
+            >
           </div>
         </template>
         <template v-else>
@@ -216,7 +225,7 @@ export default {
       $panel.confirmFilter()
     },
     // 多选
-    confirmFilterEvent() {
+    confirmFilterEvent(ev) {
       const { $panel, column } = this.params
       column.filters.map((item) => {
         item.data = { vals: this.filteredValue }
@@ -229,9 +238,10 @@ export default {
         }
         return item
       })
-      $panel.confirmFilter()
+
+      $panel.confirmFilter(ev)
     },
-    resetFilterEvent() {
+    resetFilterEvent(ev) {
       this.filteredValue = []
       const { $panel, column } = this.params
       column.filters.map((item) => {
@@ -245,7 +255,7 @@ export default {
         }
         return item
       })
-      $panel.confirmFilter()
+      $panel.confirmFilter(ev)
     }
   }
 }

package/src/components/TablePro/index.js

@@ -3,7 +3,41 @@ import 'vxe-table/lib/style.css'
 import filterContent from './filterContent.vue'
 import numerify from 'numerify'
 import dayjs from 'dayjs'
+import { $lc } from '../../utils/i18n/index.js'
+import zhCN from 'vxe-table/lib/locale/lang/zh-CN'
+// 打平对象
+function flattenObject(obj, prefix = '', result = {}) {
+  // 遍历对象的每个属性
+  for (const key in obj) {
+    if (obj.hasOwnProperty(key)) {
+      // 构建当前属性的完整键名
+      const fullKey = prefix ? `${prefix}.${key}` : key
 
+      // 如果属性值是对象且不是数组，则递归处理
+      if (typeof obj[key] === 'object' && obj[key] !== null && !Array.isArray(obj[key])) {
+        flattenObject(obj[key], fullKey, result)
+      } else {
+        // 否则直接添加到结果中
+        result[fullKey] = obj[key]
+      }
+    }
+  }
+  return result
+}
+vxeTable.setup({
+  size: 'small',
+  table: {
+    border: true,
+    align: 'center',
+    columnConfig: {
+      resizable: true
+    }
+  },
+  // 对组件内置的提示语进行国际化翻译
+  i18n: (key, args) => {
+    return $lc(flattenObject(zhCN) && flattenObject(zhCN)[key])
+  }
+})
 // 创建一个简单的输入框筛选
 vxeTable.renderer.add('FilterInput', {
   // 筛选模板
@@ -59,7 +93,13 @@ vxeTable.formats.mixin({
   // 四舍五入金额，每隔3位逗号分隔，默认2位数
   formatAmount({ cellValue }) {
     if (cellValue || cellValue === 0) {
-      return numerify(cellValue, '0,0.00')
+      // 判断是否为字符串类数字
+      if (/^-?\d+(\.\d+)?$/.test(cellValue)) {
+        return numerify(cellValue, '0,0.00')
+      } else {
+        return cellValue
+      }
+      // return numerify(cellValue, '0,0.00')
     } else {
       return '--'
     }

package/src/components/TablePro/index.vue

@@ -15,8 +15,18 @@
       }"
       show-header-overflow
       show-overflow
-      :row-config="{ isHover: true, useKey: true, ...$attrs.rowConfig, ...$attrs['row-config'] }"
-      :column-config="{ resizable: true, useKey: true, ...$attrs.columnConfig, ...$attrs['column-config'] }"
+      :row-config="{
+        isHover: true,
+        useKey: true,
+        ...$attrs.rowConfig,
+        ...$attrs['row-config']
+      }"
+      :column-config="{
+        resizable: true,
+        useKey: true,
+        ...$attrs.columnConfig,
+        ...$attrs['column-config']
+      }"
       :scroll-y="scrollY"
       :sort-config="{
         multiple: false,
@@ -27,15 +37,33 @@
         ...$attrs.sortConfig,
         ...$attrs['sort-config']
       }"
-      :filter-config="{ remote: true, iconNone: 'n20-icon-xiala-moren', iconMatch: 'n20-icon-xiala-moren' }"
+      :filter-config="{
+        remote: true,
+        iconNone: 'n20-icon-xiala-moren',
+        iconMatch: 'n20-icon-xiala-moren'
+      }"
       v-bind="Object.assign({ size: size }, $attrs, sizeBind)"
       v-on="$listeners"
       @sort-change="(val) => customSortMethod(val)"
       @filter-change="filterChange"
       @checkbox-change="handleSelectionChange"
     >
-      <template v-for="(item, i) in columns">
+      <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__render_' + i"
+          v-bind="item"
+          :formatter="item.formatter ? item.formatter : 'formatName'"
+          :filters="item.filters"
+          :filter-render="item.filters && item.filters.length > 0 ? { name: 'FilterInput' } : null"
+          :title="item.label"
+          :field="item.prop"
+        >
+          <template slot-scope="scope">
+            <renderer :render-content="item.render" :scope="scope" />
+          </template>
+        </vxe-column>
         <vxe-column
           v-else-if="item.type === 'checkbox'"
           :key="'vxe-table-' + i"
@@ -84,7 +112,7 @@
           :class-name="`${item.wrap && `vxe-table-custom-wrap`} ${item.bold && `font-w600`}`"
           :formatter="item.formatter ? item.formatter : 'formatName'"
           :filters="item.filters"
-          :filter-render="item.filterRender"
+          :filter-render="item.filters && item.filters.length > 0 ? { name: 'FilterInput' } : null"
           :title="item.label"
           :field="item.prop"
           v-bind="item"
@@ -103,11 +131,28 @@
 <script>
 import empty from '../Empty'
 import tableSetSize from '../TableSetSize/index.vue'
+import { $lc } from '../../utils/i18n/index.js'
+import XEUtils from 'xe-utils'
+const renderer = {
+  name: 'renderer',
+  props: {
+    renderContent: {
+      type: Function
+    },
+    scope: {
+      type: Object
+    }
+  },
+  render(h) {
+    return this.renderContent(h, this.scope.row, this.scope)
+  }
+}
 export default {
   name: 'TablePro',
   components: {
     tableSetSize,
-    empty
+    empty,
+    renderer
   },
   props: {
     scrollY: {
@@ -171,6 +216,11 @@ export default {
       key: 0
     }
   },
+  computed: {
+    _columns() {
+      return this.calcColumnWidth(this.columns)
+    }
+  },
   watch: {
     columns() {
       this.colsKey = this.colsKey + 1
@@ -281,6 +331,67 @@ export default {
     },
     sizeSet(el) {
       this.sizeBind = el
+    },
+    // 计算列宽
+    calcColumnWidth(columns) {
+      columns = columns.map((item) => {
+        return {
+          ...item,
+          _width_: 0
+        }
+      })
+      const wrapperEl = document.querySelector('div#app')
+      if (!wrapperEl) {
+        return columns
+      }
+      const { width: windowWidth } = wrapperEl.getBoundingClientRect()
+
+      // 定义每个字符的平均宽度（像素）
+      const CHAR_WIDTH = 20 // 根据实际字体大小调整
+      const PADDING = 20 // 左右padding
+
+      function calc(columns) {
+        let columnsWidth = 0
+
+        // 先计算每列的基础宽度
+        columns.forEach((column) => {
+          if (column.static && column.label === $lc('操作') && !column.width && !column.minWidth) {
+            column.width = 80
+          }
+          if (column.type === 'checkbox') {
+            column.width = 80
+          }
+
+          // 如果没有设置宽度，根据字符数计算最小宽度
+          if (!column.width && !column.minWidth) {
+            const textLength = (column.label && column.label.length) || 10
+            column.minWidth = Math.ceil(textLength * CHAR_WIDTH + PADDING)
+          }
+
+          const width = column.minWidth || column.width
+          column['_width_'] = column['_width_'] || parseInt(width)
+          column['width'] = parseInt(width)
+          columnsWidth += column.width
+        })
+
+        // 如果总宽度超过容器宽度，直接返回
+        if (columnsWidth >= windowWidth) {
+          return columns
+        }
+
+        // 否则按比例分配剩余空间
+        return columns.map((column) => {
+          if (!column.type) {
+            const rate = column['_width_'] / columnsWidth
+            column['width'] = Math.floor(Math.max(windowWidth * rate, column.minWidth || column.width))
+
+            return column
+          }
+          return column
+        })
+      }
+
+      return calc(columns)
     }
   }
 }

package/src/components/TableProOperateColumn/OperateBtns.vue

@@ -1,60 +1,14 @@
 <template>
-  <span>
-    <template v-for="(item, i) in dfBtns" class="flex-box flex-v">
-      <el-dropdown
-        v-if="item.children && item.children.length"
-        :key="item.label"
-        class="m-l-b"
-        @command="(c) => $emit('command', c)"
-      >
-        <div class="flex-box flex-v">
-          <el-link
-            :key="item.label"
-            :class="i ? 'm-l-b' : ''"
-            type="primary"
-            :underline="false"
-            :disabled="item.disabled | dbdBtn(row)"
-            @click="$emit('command', item.command)"
-          >
-            <span v-if="item.tip" v-title="`${item.tip}`">{{ item.label }}</span>
-            <span v-else>{{ item.label }}</span>
-          </el-link>
-          <i class="el-icon-arrow-down color-primary" />
-        </div>
-        <el-dropdown-menu slot="dropdown" class="text-c">
-          <el-dropdown-item
-            v-for="item1 in item.children"
-            :key="item1.label"
-            :command="item1.command"
-            :disabled="item1.disabled | dbdBtn(row)"
-          >
-            <el-link v-if="item1.type" :type="item1.type" :underline="false">{{ item1.label }}</el-link>
-            <template v-else>{{ item1.label }}</template>
-          </el-dropdown-item>
-        </el-dropdown-menu>
-      </el-dropdown>
-      <el-link
-        v-else
-        :key="item.label"
-        :class="i ? 'm-l-b' : ''"
-        :type="item.type || 'primary'"
-        :underline="false"
-        :disabled="item.disabled | dbdBtn(row)"
-        @click="$emit('command', item.command)"
-      >
-        <span v-if="item.tip" v-title="`${item.tip}`">{{ item.label }}</span>
-        <span v-else>{{ item.label }}</span>
-      </el-link>
-    </template>
-
+  <div class="flex-box flex-v flex-c">
+    <childrenOperateBtn :btn-list="dfBtns" :row="row" @command="(c) => $emit('command', c)" />
     <el-dropdown v-if="moreBtns.length" class="m-l-b" @command="(c) => $emit('command', c)">
-      <el-button class="n20-icon-moren" type="text" size="mini" />
+      <el-button class="n20-icon-moren" size="mini" type="text" />
       <el-dropdown-menu slot="dropdown" class="text-c">
         <template v-for="(item, i) in moreBtns">
-          <el-dropdown-item :key="i" v-if="item.children && item.children.length">
+          <el-dropdown-item v-if="item.children && item.children.length" :key="i">
             <template>{{ item.label }}</template>
             <el-dropdown class="m-l-b" @command="(c) => $emit('command', c)">
-              <i class="el-icon-arrow-down" />
+              <i class="el-icon-arrow-down"></i>
               <el-dropdown-menu slot="dropdown" class="text-c">
                 <el-dropdown-item
                   v-for="item2 in item.children"
@@ -75,12 +29,16 @@
         </template>
       </el-dropdown-menu>
     </el-dropdown>
-  </span>
+  </div>
 </template>
-
 <script>
+import childrenOperateBtn from './childrenOperateBtn.vue'
+
 export default {
   name: 'TableOperate',
+  components: {
+    childrenOperateBtn
+  },
   filters: {
     dbdBtn(dbd, row) {
       if (dbd === undefined || dbd === null) {

package/src/components/TableProOperateColumn/OperateBtns_copy.vue

@@ -0,0 +1,141 @@
+<template>
+  <div class="flex-box flex-v">
+    <template v-for="(item, i) in dfBtns" class="flex-box flex-v">
+      <el-dropdown
+        v-if="item.children && item.children.length"
+        :key="item.label"
+        class="m-l-b"
+        @command="(c) => $emit('command', c)"
+      >
+        <div class="flex-box flex-v">
+          <el-link
+            :key="item.label"
+            :class="i ? 'm-l-b' : ''"
+            type="primary"
+            :underline="false"
+            :disabled="item.disabled | dbdBtn(row)"
+            @click="$emit('command', item.command)"
+          >
+            <span v-if="item.tip" v-title="`${item.tip}`">{{ item.label }}</span>
+            <span v-else>{{ item.label }}</span>
+          </el-link>
+          <i class="el-icon-arrow-down color-primary"></i>
+        </div>
+        <el-dropdown-menu slot="dropdown" class="text-c">
+          <el-dropdown-item
+            v-for="item1 in item.children"
+            :key="item1.label"
+            :command="item1.command"
+            :disabled="item1.disabled | dbdBtn(row)"
+          >
+            <el-link v-if="item1.type" :type="item1.type" :underline="false">{{ item1.label }}</el-link>
+            <template v-else>{{ item1.label }}</template>
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+      <el-link
+        v-else
+        :key="item.label"
+        :class="i ? 'm-l-b' : ''"
+        :type="item.type || 'primary'"
+        :underline="false"
+        :disabled="item.disabled | dbdBtn(row)"
+        @click="$emit('command', item.command)"
+      >
+        <span v-if="item.tip" v-title="`${item.tip}`">{{ item.label }}</span>
+        <span v-else>{{ item.label }}</span>
+      </el-link>
+    </template>
+
+    <el-dropdown v-if="moreBtns.length" class="m-l-b" @command="(c) => $emit('command', c)">
+      <el-button class="n20-icon-moren" type="text" size="mini" />
+      <el-dropdown-menu slot="dropdown" class="text-c">
+        <template v-for="(item, i) in moreBtns">
+          <el-dropdown-item v-if="item.children && item.children.length" :key="i">
+            <template>{{ item.label }}</template>
+            <el-dropdown class="m-l-b" @command="(c) => $emit('command', c)">
+              <i class="el-icon-arrow-down"></i>
+              <el-dropdown-menu slot="dropdown" class="text-c">
+                <el-dropdown-item
+                  v-for="item2 in item.children"
+                  :key="item2.label"
+                  :command="item2.command"
+                  :disabled="item2.disabled | dbdBtn(row)"
+                >
+                  <el-link v-if="item2.type" :type="item2.type" :underline="false">{{ item2.label }}</el-link>
+                  <template v-else>{{ item2.label }}</template>
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </el-dropdown-item>
+          <el-dropdown-item v-else :key="item.label" :command="item.command" :disabled="item.disabled | dbdBtn(row)">
+            <el-link v-if="item.type" :type="item.type" :underline="false">{{ item.label }}</el-link>
+            <template v-else>{{ item.label }}</template>
+          </el-dropdown-item>
+        </template>
+      </el-dropdown-menu>
+    </el-dropdown>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TableOperate',
+  filters: {
+    dbdBtn(dbd, row) {
+      if (dbd === undefined || dbd === null) {
+        return false
+      } else if (typeof dbd === 'boolean') {
+        return dbd
+      } else if (typeof dbd === 'function') {
+        return dbd(row)
+      }
+    }
+  },
+  props: {
+    btnList: {
+      type: Array,
+      default: () => []
+    },
+    row: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    hasBtns() {
+      return this.btnList.filter((btn) => this.hasBtn(btn.isHas, this.row))
+    },
+    dfBtns() {
+      if (this.hasBtns.length > 3) {
+        return this.hasBtns.slice(0, 2)
+      } else {
+        return this.hasBtns
+      }
+    },
+    moreBtns() {
+      if (this.hasBtns.length > 3) {
+        return this.hasBtns.slice(2)
+      } else {
+        return []
+      }
+    }
+  },
+  methods: {
+    hasBtn(isHas, row) {
+      if (isHas === undefined || isHas === null) {
+        return true
+      } else if (typeof isHas === 'boolean') {
+        return isHas
+      } else if (typeof isHas === 'string' || Array.isArray(isHas)) {
+        return this.$has(isHas)
+      } else if (typeof isHas === 'function') {
+        return isHas(row)
+      }
+    }
+  }
+}
+</script>

package/src/components/TableProOperateColumn/childrenOperateBtn.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="flex-box flex-v">
+    <template v-for="(item, i) in btnList">
+      <template v-if="shouldShowButton(item, row)">
+        <el-dropdown
+          v-if="shouldShowChildren(item.children, row)"
+          :key="item.label"
+          class="m-l-b"
+          @command="c => $emit('command', c)"
+        >
+          <div class="flex-box flex-v">
+            <el-link
+              :key="item.label"
+              :class="i ? 'm-l-b' : ''"
+              :disabled="item.disabled | dbdBtn(row)"
+              :underline="false"
+              type="primary"
+              @click="$emit('command', item.command)"
+            >
+              <span v-if="item.tip" v-title="`${item.tip}`">{{ item.label }}</span>
+              <span v-else>{{ item.label }}</span>
+            </el-link>
+            <i class="el-icon-arrow-down color-primary" />
+          </div>
+          <el-dropdown-menu slot="dropdown" class="text-c">
+            <el-dropdown-item
+              v-for="childItem in item.children"
+              v-if="shouldShowButton(childItem, row)"
+              :key="childItem.label"
+              :command="childItem.command"
+              :disabled="childItem.disabled | dbdBtn(row)"
+            >
+              <el-link v-if="childItem.type" :type="childItem.type" :underline="false">{{ childItem.label }}</el-link>
+              <template v-else>{{ childItem.label }}</template>
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+        <el-link
+          v-else
+          :key="item.label"
+          :class="i ? 'm-l-b' : ''"
+          :disabled="item.disabled | dbdBtn(row)"
+          :type="item.type || 'primary'"
+          :underline="false"
+          @click="$emit('command', item.command)"
+        >
+          <span v-if="item.tip" v-title="`${item.tip}`">{{ item.label }}</span>
+          <span v-else>{{ item.label }}</span>
+        </el-link>
+      </template>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ChildrenOperateBtn',
+  props: {
+    btnList: {
+      type: Array,
+      default: () => []
+    },
+    row: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  filters: {
+    dbdBtn(dbd, row) {
+      if (dbd === undefined || dbd === null) {
+        return false
+      } else if (typeof dbd === 'boolean') {
+        return dbd
+      } else if (typeof dbd === 'function') {
+        return dbd(row)
+      }
+    }
+  },
+  methods: {
+    shouldShowButton(childItem, row) {
+      if (childItem.isHas === undefined) {
+        return true
+      }
+      switch (typeof childItem.isHas) {
+        case 'boolean':
+          return childItem.isHas
+        case 'function':
+          return childItem.isHas(row)
+        case 'string':
+          return this.$has(childItem.isHas)
+
+        default:
+          console.warn(`不支持的 isHas 类型: ${typeof childItem.isHas}`)
+          return false
+      }
+    },
+    shouldShowChildren(children, row) {
+      if (!children || children.length === 0) {
+        return false
+      }
+      return children.some(child => this.shouldShowButton(child, row))
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped></style>
+> >

package/src/components/TableProOperateColumn/index.vue

@@ -1,17 +1,14 @@
 <template>
   <vxe-column :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)" />
+    <OperateBtns slot-scope="{ row, $index }" :btn-list="btnList" :row="row" @command="c => $emit(c, row, $index)" />
   </vxe-column>
 </template>
-
 <script>
-// import { $lc } from '../../utils/i18n/index'
 import OperateBtns from './OperateBtns.vue'
+
 export default {
   name: 'TableProOperateColumn',
-  components: {
-    OperateBtns
-  },
+  components: { OperateBtns },
   props: {
     btnList: {
       type: Array,