n20-common-lib 3.0.91 → 3.0.93

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

@@ -1,462 +0,0 @@
-<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>