syntec3-0-ui-components-test 1.0.0

package/src/components/customTable/components/tableContent/index.vue

@@ -0,0 +1,440 @@
+<template>
+  <!-- table组件 -->
+  <div class="table-wrapper" :data-test-id="`${dataTestId}-DIV-To1wh5`">
+    <div class="table-content" :data-test-id="`${dataTestId}-DIV-cL2A1K`">
+      <el-table
+        ref="tableRef"
+        v-loading="loading"
+        v-shift-select:tableRef
+        :data="tableData"
+        height="100%"
+        style="width: 100%"
+        border
+        highlight-current-row
+        scrollbar-always-on
+        stripe
+        :show-summary="showSummary"
+        :summary-method="summaryMethod"
+        :data-test-id="`${dataTestId}-EL-TABLE-YQ7at9`"
+        :default-sort="defaultSort"
+        v-bind="$attrs"
+        @cell-click="onCellClick"
+        @selection-change="handleSelectionChange"
+        @sort-change="onSortChange"
+      >
+        <!-- 选择列 -->
+        <el-table-column
+          v-if="showSelection"
+          type="selection"
+          :width="showSummary ? 60 : 50"
+          :selectable="selectable"
+          align="center"
+          :data-test-id="`${dataTestId}-EL-TABLE-COLUMN-Sc8zKF`"
+        />
+        <!-- 序号列 -->
+        <el-table-column
+          v-if="showIndex"
+          type="index"
+          label="#"
+          width="50"
+          align="center"
+          fixed="left"
+          :data-test-id="`${dataTestId}-EL-TABLE-COLUMN-vQ3j6j`"
+        >
+          <template #default="{ $index }">
+            {{ getRowIndex($index) }}
+          </template>
+        </el-table-column>
+        <!-- 动态列 -->
+        <el-table-column
+          v-for="(column, index) in tableColumns"
+          :key="column.value"
+          :label="column.text"
+          :prop="String(column.value)"
+          :fixed="column.isFixed ? 'left' : false"
+          align="center"
+          show-overflow-tooltip
+          :sortable="column.sortable"
+          :min-width="column.minWidth || columnMinWidth || 120"
+          :width="column.isCustom ? getColumnWidth(column.text, String(column.value), tableData, 200) : 'auto'"
+          :data-test-id="`${dataTestId}-EL-TABLE-COLUMN-vQ3j6j-${index}`"
+          :sort-params="column.sortParams"
+          v-bind="column.attrs"
+        >
+          <!-- 
+            表头列有规则描述(tooltipSlot/tooltipContent同时存在时优先显示columnSlot)
+            {
+                tooltipIcon: 'icon图标用于触发tooltip'，
+                tooltipSlot: 'tooltip显示内容，用于自定义组件显示内容',
+                tooltipContent: 'tooltip显示内容，默认的文本字符串'
+            }
+          -->
+          <template #header>
+            <div
+              style="display: inline-flex; justify-content: center; align-items: center"
+              :data-test-id="`${dataTestId}-DIV-asjQke`"
+            >
+              <!-- 左侧插槽 -->
+              <component
+                :is="column.leftSlot"
+                v-if="column.leftSlot"
+                :data-test-id="`${dataTestId}-COMPONENT-pgSWCu`"
+              />
+              <span :data-test-id="`${dataTestId}-SPAN-iBEcrY`">{{ column.text }}</span>
+              <!-- 右侧插槽 -->
+              <component
+                :is="column.rightSlot"
+                v-if="column.rightSlot"
+                :data-test-id="`${dataTestId}-COMPONENT-WYbm6e`"
+              />
+            </div>
+          </template>
+          <!-- 需要格式化的table项 -->
+          <!-- 自定义列, 当格式化无法满足时可以使用自定义列 -->
+          <template v-if="column.columntSlot" #default="{ row, $index }">
+            <component
+              :is="column.columntSlot"
+              :row="row"
+              :index="$index"
+              :data-test-id="`${dataTestId}-COMPONENT-24Y9n6`"
+            />
+          </template>
+          <template v-else-if="column.formatter" #default="{ row }">
+            <!-- 
+                tags格式化格式: {
+                  bgColor: 'tag背景颜色',
+                  textColor: 'tag文字颜色',
+                  text: '国际化后的文本',
+                } 
+            -->
+            <el-tag
+              v-if="column.formatterType === 'tags'"
+              :style="`color:${column.formatter(row, column).bgColor}`"
+              style="margin-left: 4px"
+              :color="column.formatter(row, column).textColor"
+              :data-test-id="`${dataTestId}-EL-TAG-mfRiQa`"
+            >
+              {{ column.formatter(row, column).text }}
+            </el-tag>
+            <div v-else-if="column.formatterType === 'icon'" :data-test-id="`${dataTestId}-DIV-bLxOMG`">
+              <!-- 
+                icon格式化格式: {
+                  icon: '需要显示v-icon图标', 
+                  color: '图标的颜色', 
+                  text: '国际化后的文本'
+                } 
+                text配置的话会显示tooltip,不配置则不显示 
+              -->
+              <el-tooltip
+                v-if="column.formatter(row, column).text"
+                class="box-item"
+                effect="dark"
+                :content="column.formatter(row, column).text"
+                placement="top"
+                :data-test-id="`${dataTestId}-EL-TOOLTIP-LsKqgG`"
+              >
+                <v-icon
+                  :class="column.formatter(row, column).icon"
+                  :style="`color: ${column.formatter(row, column).color};`"
+                  :data-test-id="`${dataTestId}-V-ICON-qSsT49`"
+                />
+              </el-tooltip>
+              <v-icon
+                v-else
+                :class="column.formatter(row, column).icon"
+                :style="`color: ${column.formatter(row, column).color};`"
+                :data-test-id="`${dataTestId}-V-ICON-qSsT49`"
+              />
+            </div>
+            <!-- 
+              file格式化格式: [{
+                file: '文件地址', 
+                name: '文件名称，用于列表显示', 
+              }]
+              如果没有name则显示file，如果都没有则显示占位符
+            -->
+            <div v-else-if="column.formatterType === 'file'" :data-test-id="`${dataTestId}-DIV-6Qg7rD`">
+              <div
+                v-for="(file, cut) in column.formatter(row, column)"
+                :key="cut"
+                class="file-name"
+                :style="`color: ${file.color || '#409eff'};`"
+                :data-test-id="`${dataTestId}-DIV-Et2BFU-${cut}`"
+              >
+                {{ file.name || file.file || '---' }}
+                <span v-if="cut < column.formatter(row, column).length - 1" :data-test-id="`${dataTestId}-SPAN-wLZkzY`">
+                  ,
+                </span>
+              </div>
+            </div>
+            <!-- 
+              link格式化格式: {
+                link: '链接地址', 
+                name: '链接名称，用于列表显示', 
+              }
+              如果没有name则显示link，如果都没有则显示占位符
+            -->
+            <div v-else-if="column.formatterType === 'link'" :data-test-id="`${dataTestId}-DIV-54trNN`">
+              <el-link
+                :href="column.formatter(row, column).link"
+                :underline="column.formatter(row, column).underline"
+                target="_blank"
+                :style="formatterLinkStyle(row, column)"
+                :data-test-id="`${dataTestId}-EL-LINK-8g2RDk`"
+              >
+                {{ column.formatter(row, column).name || column.formatter(row, column).link || '---' }}
+              </el-link>
+            </div>
+            <span v-else :data-test-id="`${dataTestId}-SPAN-rCQPnk`">{{ column.formatter(row, column) || '---' }}</span>
+          </template>
+        </el-table-column>
+        <!-- 操作列（固定） -->
+        <el-table-column
+          v-if="tableActionsWidth > 0"
+          :label="t('action')"
+          :min-width="tableActionsWidth"
+          :fixed="actionsFixed"
+          align="center"
+          :data-test-id="`${dataTestId}-EL-TABLE-COLUMN-gLrVJL`"
+        >
+          <template #default="{ row, $index }">
+            <!-- 直接使用父组件传递的 slot，并传递数据 -->
+            <slot name="tableActions" :row="row" :index="$index" />
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!-- 分页组件 -->
+    <div v-if="showPagination" class="pagination-content" :data-test-id="`${dataTestId}-DIV-UYLlzi`">
+      <pagination
+        style="background-color: transparent; padding-bottom: 0.625rem; padding-top: 1.25rem"
+        :total="total"
+        :current-page="currentPage"
+        :page-size="pageSize"
+        :selected-num="selectedRows.length"
+        :current-count="tableData.length"
+        :has-selected="true"
+        :permission-code="permissionCode"
+        :data-test-id="`${dataTestId}-PAGINATION-msjXvX`"
+        :page-type="pageType"
+        @changePage="handlePageChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { getColumnWidth } from '@/utils/tableWidth';
+import pagination from '@/components/Pagination.vue';
+
+const props = defineProps({
+  // 表格数据
+  tableData: {
+    type: Array,
+    default: () => [],
+  },
+  // 列配置
+  columns: {
+    type: Array,
+    default: () => [],
+  },
+  // 操作列的最小宽度，设置为0则不显示
+  tableActionsWidth: {
+    type: Number,
+    default: 120,
+  },
+  // 分页信息
+  currentPage: {
+    type: Number,
+    default: 1,
+  },
+  pageSize: {
+    type: Number,
+    default: 20,
+  },
+  // table的loading状态
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  // 功能开关
+  showSelection: {
+    type: Boolean,
+    default: true,
+  },
+  // 是否显示序号列
+  showIndex: {
+    type: Boolean,
+    default: true,
+  },
+  // 操作列固定规则
+  actionsFixed: {
+    type: [Boolean, String],
+    default: 'right',
+  },
+  // 列的最小宽度
+  columnMinWidth: {
+    type: Number,
+    default: 200,
+  },
+  permissionCode: {
+    type: String,
+    default: '',
+  },
+  total: {
+    // table数据总数量，用于分页
+    type: Number,
+    default: 0,
+  },
+  // 复选框选择的数据长度，用于分页组件回显已选中条数
+  selectedNum: {
+    type: Number,
+    default: 0,
+  },
+  // 默认的排序列的 prop 和顺序。
+  defaultSort: {
+    type: Object,
+    default: () => ({}),
+  },
+  // 是否显示合计行
+  showSummary: {
+    type: Boolean,
+    default: false,
+  },
+  // 合并格式方法
+  summaryMethod: Function,
+  // 选择列禁用规则
+  selectable: Function,
+  pageType: Number,
+  // 是否显示分页组件
+  showPagination: {
+    type: Boolean,
+    default: true,
+  },
+  dataTestId: String,
+});
+
+const $emit = defineEmits([
+  'selectionChange', // 选中行
+  'sortChange', // 自定义排序
+  'cellClick', // 单元格点击
+  'pageChange',
+]);
+const { t } = useI18n();
+const tableRef = ref();
+const selectedRows = ref([]);
+const tableColumns = computed(() => {
+  return props.columns.filter((item) => !!item.isShown);
+});
+// 计算行索引
+const getRowIndex = (index) => {
+  return (props.currentPage - 1) * props.pageSize + index + 1;
+};
+// 排序
+function onSortChange(e) {
+  if (e.column.sortable === 'custom') {
+    $emit('sortChange', e);
+  } else {
+    tableRef.value.sort(e.prop, e.order);
+  }
+}
+function formatterLinkStyle(row, column) {
+  const obj = column.formatter(row, column);
+  return `
+    --el-link-hover-text-color: ${obj.hoverColor || '#409eff'};
+    --el-link-text-color: ${obj.color || '#606266'}
+  `;
+}
+// 选择变化事件
+const handleSelectionChange = (selection) => {
+  selectedRows.value = selection;
+  $emit('selectionChange', selection);
+};
+
+// 清空选择
+const clearSelection = () => {
+  tableRef.value?.clearSelection();
+};
+
+// 切换选择行
+const toggleRowSelection = (row, selected) => {
+  tableRef.value?.toggleRowSelection(row, selected);
+};
+const handlePageChange = (val) => {
+  $emit('pageChange', val);
+};
+// 单元格点击事件，返回row和cell
+function onCellClick(row, cell) {
+  $emit('cellClick', {
+    row,
+    cell,
+  });
+}
+// 暴露方法
+defineExpose({
+  tableRef,
+  getTableRef: () => tableRef.value,
+  clearSelection,
+  toggleRowSelection,
+  selectedRows,
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@/scss/base/table.scss';
+.table-wrapper {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  .table-content {
+    flex: 1;
+    overflow: hidden;
+  }
+  .file-name {
+    color: rgb(18, 80, 136);
+    cursor: pointer;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  :deep(.el-table) {
+    --el-table-header-bg-color: #edf3f8;
+    --el-table-header-text-color: #303133;
+    --el-table-border-color: #ebeef5;
+    --el-table-row-hover-bg-color: #f5f7fa;
+
+    height: 100%;
+
+    .el-table__body-wrapper {
+      scrollbar-width: thin;
+
+      &::-webkit-scrollbar {
+        width: 6px;
+        height: 6px;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background: #c0c4cc;
+        border-radius: 3px;
+      }
+    }
+
+    // 操作列样式
+    .el-table__fixed-right {
+      .el-button-group {
+        :deep(.el-button) {
+          padding: 4px 8px;
+
+          &:hover {
+            color: var(--el-color-primary);
+            background-color: var(--el-fill-color-light);
+          }
+        }
+      }
+    }
+  }
+}
+</style>