n20-common-lib 3.0.22 → 3.0.23

package/src/components/TablePro/index copy.vue

@@ -0,0 +1,462 @@
+<template>
+  <div style="height: 100%; position: relative">
+    <vxe-table
+      ref="vxeTable"
+      :key="colsKey"
+      :align="'center'"
+      :data="data"
+      :height="height"
+      :class="[{ 'cell-default-set--': cellDefault }, 'n20-table-pro']"
+      :checkbox-config="{
+        checkField: 'checked',
+        checkMethod: forbidSelect,
+        ...$attrs['checkbox-config'],
+        ...$attrs.checkboxConfig
+      }"
+      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']
+      }"
+      :scroll-y="scrollY"
+      :sort-config="{
+        multiple: false,
+        remote: true,
+        trigger: 'cell',
+        iconAsc: 'n20-icon-daoxu',
+        iconDesc: 'n20-icon-shunxu',
+        ...$attrs.sortConfig,
+        ...$attrs['sort-config']
+      }"
+      :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"
+      @cell-click="handleCellClick"
+    >
+      <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"
+          v-bind="item"
+          :title="item.label"
+          :field="item.prop"
+          type="checkbox"
+          width="50"
+          :fixed="item.fixed || item.fixed === '' ? item.fixed : 'left'"
+        >
+          <template #header="{ $table, checked, indeterminate, disabled }">
+            <span class="custom-checkbox" @click.stop="toggleAll($table, disabled)">
+              <el-checkbox v-if="indeterminate" :key="key" :indeterminate="indeterminate" :disabled="disabled" />
+              <el-checkbox v-else-if="checked" :key="key" :value="checked" :disabled="disabled" />
+              <el-checkbox v-else :key="key" :value="checked" :disabled="disabled" />
+            </span>
+          </template>
+          <template #checkbox="{ $table, row, checked, indeterminate, disabled }">
+            <span class="custom-checkbox" @click.stop="toggleChecked($table, row, disabled)">
+              <el-checkbox v-if="indeterminate" :key="key" :indeterminate="indeterminate" :disabled="disabled" />
+              <el-checkbox v-else-if="checked" :key="key" :value="checked" :disabled="disabled" />
+              <el-checkbox v-else :key="key" :value="checked" :disabled="disabled" />
+            </span>
+          </template>
+        </vxe-column>
+        <vxe-colgroup
+          v-else-if="item.children && item.children.length > 0"
+          :key="'vxe-colgroup-' + i"
+          :title="item.label"
+        >
+          <vxe-column
+            v-for="(subItem, i) in item.children"
+            :key="'vxe-table-' + i"
+            :formatter="subItem.formatter ? subItem.formatter : 'formatName'"
+            :filters="subItem.filters"
+            :filter-render="subItem.filterRender"
+            :title="subItem.label"
+            :field="subItem.prop"
+            v-bind="subItem"
+            :class-name="`${subItem.wrap && `vxe-table-custom-wrap`} ${subItem.bold && `font-w600`}`"
+          />
+        </vxe-colgroup>
+        <vxe-column
+          v-else
+          :key="'vxe-table-' + i"
+          :class-name="`${item.wrap && `vxe-table-custom-wrap`} ${item.bold && `font-w600`}`"
+          :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"
+          v-bind="item"
+        />
+      </template>
+      <template #empty>
+        <slot name="empty">
+          <empty type="empty" :content="$lc('暂无数据')" :height="200" :width="200" />
+        </slot>
+      </template>
+    </vxe-table>
+    <tableSetSize v-if="showSetsize" :size="sizeC" v-bind="$attrs" @update:size="sizeUp" @resize="sizeSet" />
+  </div>
+</template>
+
+<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,
+    renderer
+  },
+  props: {
+    scrollY: {
+      type: Object,
+      default: () => {
+        return { enabled: true, oSize: 20, gt: 30 }
+      }
+    },
+    data: {
+      type: Array,
+      default: undefined
+    },
+    columns: {
+      type: Array,
+      require: true,
+      default: () => []
+    },
+    height: {
+      type: [String, Number],
+      default: undefined
+    },
+    size: {
+      type: String,
+      default: 'small'
+    },
+    showSetsize: {
+      type: Boolean,
+      default: true
+    },
+    cellDefault: {
+      type: Boolean,
+      default: true
+    },
+    // 禁止选择
+    forbidSelect: {
+      type: Function,
+      default: () => {
+        const forbidSelect = function ({ row }) {
+          return row
+        }
+        return forbidSelect
+      }
+    },
+    // 数据更新时是否自动清空已选
+    clearSelect: {
+      type: Boolean,
+      default: true
+    },
+    // 筛选条件只输出当前筛选的单个条件,默认为全部条件
+    isFiliterSingle: {
+      type: Boolean,
+      default: false
+    },
+    isAutoWidth: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    let _this = this
+    return {
+      colsKey: 0,
+      sizeC: localStorage.getItem('table-size') || _this.size,
+      sizeBind: undefined,
+      key: 0
+    }
+  },
+  computed: {
+    _columns() {
+      if (this.isAutoWidth) {
+        return this.calcColumnWidth(this.columns)
+      } else {
+        return this.columns
+      }
+    }
+  },
+  watch: {
+    columns() {
+      this.colsKey = this.colsKey + 1
+    },
+    size(val) {
+      this.sizeC = val
+    },
+    data() {
+      // 翻页清除选中
+      if (this.clearSelect) {
+        this.$refs.vxeTable.clearCheckboxRow()
+        this.$emit('selection-change-method', [])
+      }
+    }
+  },
+  activated() {
+    this.$refs.vxeTable.loadData(this.data)
+  },
+  mounted() {},
+  methods: {
+    // 全选
+    toggleAllSelection() {
+      if (this.$refs.vxeTable) {
+        this.$refs.vxeTable.setAllCheckboxRow(true)
+        // 得手动触发
+        this.handleSelectionChange()
+      }
+    },
+    // 清空选择
+    clearSelection() {
+      if (this.$refs.vxeTable) {
+        this.$refs.vxeTable.setAllCheckboxRow(false)
+        // 得手动触发
+        this.handleSelectionChange()
+      }
+    },
+    // 选中某些行
+    toggleRowSelection(row, state = true) {
+      this.$refs.vxeTable.setCheckboxRow(row, state)
+      // 得手动触发
+      this.handleSelectionChange()
+    },
+    toggleAll($table, disabled) {
+      if (disabled) {
+        return false
+      }
+      $table.toggleAllCheckboxRow()
+      this.key++
+      this.handleSelectionChange()
+    },
+    toggleChecked($table, row, disabled) {
+      if (disabled) {
+        return false
+      }
+      $table.toggleCheckboxRow(row)
+      this.key++
+      this.handleSelectionChange(row)
+    },
+    customSortMethod({ sortList }) {
+      const orders = sortList.map((item) => {
+        return {
+          column: item.field,
+          asc: item.order === 'asc'
+        }
+      })
+      this.$emit('sort-change-method', orders)
+    },
+    filterChange(data) {
+      const { filterList } = data
+      // 输出全部条件
+      const obj = {}
+      // 复制默认筛选条件为空
+      this.columns.forEach((item) => {
+        if (item.filters) {
+          this.$set(obj, item.prop, undefined)
+        }
+      })
+      filterList.forEach((item) => {
+        if (item.column.filterMultiple) {
+          this.$set(obj, item.field, item.values)
+        } else {
+          this.$set(obj, item.field, item.values && item.values[0])
+        }
+      })
+      // 输出单个条件
+      const singleObj = {}
+      for (let key in obj) {
+        if (key === data.field) {
+          singleObj[data.field] = obj[data.field]
+        }
+      }
+      if (this.isFiliterSingle) {
+        this.$emit('filter-change-method', singleObj)
+      } else {
+        this.$emit('filter-change-method', obj)
+      }
+    },
+    // row当前单次勾选的哪一行数据 包含checked字段
+    handleSelectionChange(row = '') {
+      const val = this.$refs.vxeTable.getCheckboxRecords()
+      // 支持跨页勾选
+      const val1 = this.$refs.vxeTable.getCheckboxReserveRecords()
+      this.$emit('selection-change-method', [...val, ...val1], row)
+    },
+    // 点击行勾选/取消勾选
+    handleCellClick({ row, column, $event }) {
+      this.$emit('cell-click', { row, column, $event })
+      // 如果点击的是 checkbox 列，不处理（由原生的 checkbox 处理）
+      if (column.type === 'checkbox') {
+        return
+      }
+
+      // 检查点击的目标元素是否是按钮或链接
+      // 需要检测多种按钮类型：
+      // - button: 原生按钮标签
+      // - .el-button: Element UI 按钮组件
+      // - .n20-button: n20 项目按钮组件
+      // - [class*="button"]: 包含 button 类名的元素
+      // - [class*="el-link--inner"]: Element UI 链接组件内部元素
+      // - a[href]: 链接标签
+      const target = $event.target
+      const clickedButton = target.closest(
+        'button, .el-button, .n20-button, [class*="button"], [class*="el-link--inner"], a[href]'
+      )
+
+      // 如果点击的是按钮或链接，不触发行勾选
+      if (clickedButton) {
+        return
+      }
+
+      // 如果 closest 没找到，检查父元素的类名是否包含操作相关的关键词
+      if (!clickedButton && target.parentElement) {
+        const parentClass = target.parentElement.className || ''
+        // 检测父元素是否包含：operate(操作)、btn(按钮)、button(按钮) 等关键词
+        if (parentClass.includes('operate') || parentClass.includes('btn') || parentClass.includes('button')) {
+          return
+        }
+      }
+
+      // 检查该行是否可以被勾选
+      let canCheck = true
+      if (typeof this.forbidSelect === 'function') {
+        const forbidResult = this.forbidSelect({ row })
+        // 只有当 forbidSelect 明确返回 true 时，才禁止勾选
+        canCheck = forbidResult !== true
+      }
+
+      if (canCheck) {
+        // 切换该行的勾选状态
+        this.$refs.vxeTable.toggleCheckboxRow(row)
+        this.key++ // 强制刷新 checkbox 显示
+        this.handleSelectionChange(row)
+      }
+    },
+    sizeUp(size) {
+      this.sizeC = size
+      this.$emit('update:size', size)
+    },
+    sizeSet(el) {
+      this.sizeBind = el
+    },
+    // 计算列宽
+    calcColumnWidth(columns) {
+      columns = columns.map((item) => {
+        return {
+          ...item,
+          _width_: 0
+        }
+      })
+
+      // 优先使用表格容器的宽度，如果没有则使用app容器宽度
+      let wrapperEl = this.$refs.vxeTable?.$el
+      if (!wrapperEl) {
+        wrapperEl = document.querySelector('div#app')
+      }
+      if (!wrapperEl) {
+        return columns
+      }
+      const { width: windowWidth } = wrapperEl.getBoundingClientRect()
+      console.log(windowWidth, 'windowWidth')
+      // 定义每个字符的平均宽度（像素）
+      const CHAR_WIDTH = 20 // 根据实际字体大小调整
+      const PADDING = 20 // 左右padding
+
+      function calc(columns) {
+        // 计算所有列的基础宽度总和
+        let totalBaseWidth = 0
+        columns.forEach((column) => {
+          if (column.static && column.label === $lc('操作') && !column.width && !column.minWidth) {
+            column.width = 180
+          }
+          if (column.type === 'checkbox') {
+            column.width = 50
+          }
+
+          // 如果没有设置宽度，根据字符数计算最小宽度
+          if (!column.width && !column.minWidth && !column['min-width']) {
+            const textLength = (column.label && column.label.length) || 10
+            column.minWidth = Math.ceil(textLength * CHAR_WIDTH + PADDING)
+          }
+
+          // 计算基础宽度：有width的用width，没有的用minWidth
+          const widthValue = column.width || column.minWidth || column['min-width'] || 0
+          // 处理不同格式的宽度：数字、"100"、"100px"
+          let baseWidth = 0
+          if (typeof widthValue === 'number') {
+            baseWidth = widthValue
+          } else if (typeof widthValue === 'string') {
+            // 提取字符串中的数字部分
+            baseWidth = parseInt(widthValue) || 0
+          }
+          column['_baseWidth_'] = baseWidth
+          totalBaseWidth += baseWidth
+        })
+        // 如果所有列的基础宽度总和 >= 容器宽度，不做处理
+        if (totalBaseWidth >= windowWidth) {
+          return columns
+        } else {
+          const seqColumns = columns.filter((item) => item.type !== 'seq' && item.type !== 'checkbox')
+          if (seqColumns.length > 0) {
+            seqColumns[0].width = ''
+          }
+          return columns
+        }
+      }
+      return calc(columns)
+    }
+  }
+}
+</script>

package/src/components/TablePro/index.js

@@ -24,10 +24,11 @@ function flattenObject(obj, prefix = '', result = {}) {
   }
   return result
 }
-vxeTable.setup({
+console.log(vxeTable, 'vxeTable')
+
+vxeTable.setConfig({
   size: 'small',
   table: {
-    border: true,
     align: 'center',
     columnConfig: {
       resizable: true
@@ -42,6 +43,7 @@ vxeTable.setup({
 vxeTable.renderer.add('FilterInput', {
   // 筛选模板
   renderFilter(h, renderOpts, params) {
+    console.log(h, renderOpts, params, 123)
     return <filterContent params={params}></filterContent>
   },
   // 不显示底部按钮，使用自定义的按钮
@@ -66,6 +68,11 @@ vxeTable.renderer.add('FilterInput', {
     return false
   }
 })
+vxeTable.renderer.add('customHeader', {
+  renderTableHeader(renderOpts, params) {
+    console.log(renderOpts, params, 123)
+  }
+})
 
 // 自定义全局的格式化处理函数
 vxeTable.formats.mixin({