c-admin-kit 1.0.0

package/src/components/SimpleTable/index.vue

@@ -0,0 +1,781 @@
+<template>
+  <div class="c-simple-table" ref="tableContainerRef">
+    <!-- 表格头部 -->
+    <div v-if="$slots.headerLeft || $slots.headerRight || tableKey" class="table-header">
+      <div class="header-left">
+        <slot name="headerLeft"></slot>
+      </div>
+      <div class="header-right">
+        <slot name="headerRight"></slot>
+        <!-- 动态列设置按钮 -->
+        <el-popover
+          v-if="tableKey"
+          ref="popoverRef"
+          placement="bottom-end"
+          title="自定义列"
+          :width="200"
+          trigger="click"
+          @show="handlePopoverShow"
+        >
+          <template #reference>
+            <el-button size="small">
+              <el-icon><Setting /></el-icon> 自定义列
+            </el-button>
+          </template>
+          <div class="column-setting-list">
+             <el-checkbox-group v-model="tempVisibleColKeys">
+                <div v-for="col in settingColumns" :key="col._key" class="column-setting-item">
+                  <el-checkbox :value="col._key" :label="col._key">{{ col.label }}</el-checkbox>
+                </div>
+             </el-checkbox-group>
+          </div>
+          <div style="text-align: right; margin-top: 10px;">
+            <el-button size="small" @click="handleCancelSettings">取消</el-button>
+            <el-button size="small" type="primary" :loading="savingColumns" @click="handleConfirmSettings">确定</el-button>
+          </div>
+        </el-popover>
+      </div>
+    </div>
+
+    <!-- 表格主体 -->
+    <el-table
+      ref="tableRef"
+      :data="tableData"
+      :border="border"
+      v-loading="loading"
+      style="width: 100%"
+      :row-key="rowKey"
+      v-bind="$attrs"
+      @selection-change="handleSelectionChange"
+      :max-height="computedTableHeight"
+      :height="autoHeight ? computedTableHeight : scrollY"
+    >
+      <!-- 动态生成列 -->
+      <template v-for="(column, index) in computedColumns" :key="column._key || index">
+        <!-- 拖拽列 -->
+        <el-table-column
+          v-if="column.type === 'drag'"
+          :width="column.width || 55"
+          :align="column.align || 'center'"
+          :fixed="column.fixed"
+        >
+          <template #header>
+            <span>{{ column.label || "排序" }}</span>
+          </template>
+          <template #default>
+            <div class="drag-handle" style="cursor: move">
+              <el-icon><Rank /></el-icon>
+            </div>
+          </template>
+        </el-table-column>
+
+        <!-- 选择列 -->
+        <el-table-column
+          v-else-if="column.type === 'selection'"
+          :selectable="selectable"
+          :reserve-selection="keepSelection"
+          type="selection"
+          :width="column.width || 55"
+          :align="column.align || 'center'"
+        />
+
+        <!-- 索引列 -->
+        <el-table-column
+          v-else-if="column.type === 'index'"
+          type="index"
+          :label="column.label || '序号'"
+          :width="column.width || 60"
+          :align="column.align || 'center'"
+        />
+
+        <!-- 状态列 -->
+        <el-table-column
+          v-else-if="column.type === 'status'"
+          :prop="column.prop"
+          :label="column.label || '状态'"
+          :width="column.width || 100"
+          :align="column.align || 'center'"
+          :fixed="column.fixed"
+          :sortable="column.sortable"
+        >
+          <template #default="scope">
+            <slot v-if="column.slot" :name="column.slot" v-bind="scope"></slot>
+            <el-tag
+              v-else
+              :type="getStatusType(getNestedValue(scope.row, column.prop), column.statusMap)"
+              :effect="column.effect || 'light'"
+              :size="column.size || 'default'"
+            >
+              {{ getStatusText(getNestedValue(scope.row, column.prop), column.statusMap) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+
+        <!-- 普通列 -->
+        <el-table-column
+          v-else
+          :prop="column.prop"
+          :label="column.label"
+          :width="column.width"
+          :min-width="column.minWidth"
+          :align="column.align || 'left'"
+          :fixed="column.fixed"
+          :sortable="column.sortable"
+          :show-overflow-tooltip="column.showOverflowTooltip !== false"
+        >
+          <template v-if="column.headerSlot" #header="scope">
+            <slot :name="column.headerSlot" v-bind="scope"></slot>
+          </template>
+          <template #default="scope">
+            <slot v-if="column.slot" :name="column.slot" v-bind="scope"></slot>
+            <component
+              v-else-if="column.render"
+              :is="column.render(scope.row, scope.column, scope.$index)"
+            />
+            <span v-else-if="column.formatter">
+              {{
+                column.formatter(
+                  scope.row,
+                  scope.column,
+                  getNestedValue(scope.row, column.prop),
+                  scope.$index
+                )
+              }}
+            </span>
+            <span v-else>{{ formatCellValue(scope.row, column) }}</span>
+          </template>
+        </el-table-column>
+      </template>
+
+      <slot></slot>
+    </el-table>
+
+    <!-- 分页 -->
+    <div v-if="showPagination" class="table-pagination">
+      <el-pagination
+        v-model:current-page="currentPage"
+        v-model:page-size="currentPageSize"
+        :page-sizes="pageSizes"
+        :total="total"
+        :layout="layout"
+        :background="background"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, onUnmounted, nextTick, type PropType } from "vue";
+import { Setting, Rank } from "@element-plus/icons-vue";
+import Sortable from "sortablejs";
+import type { TableInstance } from "element-plus";
+import { useTableColumnConfig } from "./useTableColumnConfig";
+import type { AnyRecord, TableColumn, TableColumnConfigProps } from "../../types";
+
+defineOptions({ name: "CSimpleTable" });
+
+const props = defineProps({
+  scrollY: {
+    type: [Number, String],
+    default: "",
+  },
+  autoHeight: {
+    type: Boolean,
+    default: false,
+  },
+  bottomOffset: {
+    type: Number,
+    default: 20,
+  },
+  minHeight: {
+    type: Number,
+    default: 300,
+  },
+  api: {
+    type: Function as PropType<(params: AnyRecord) => Promise<any>>,
+    required: false,
+  },
+  columns: {
+    type: Array as PropType<TableColumn[]>,
+    required: true,
+    default: () => [],
+  },
+  emptyCellText: {
+    type: String,
+    default: "-",
+  },
+  showPagination: {
+    type: Boolean,
+    default: true,
+  },
+  pageSizes: {
+    type: Array as PropType<number[]>,
+    default: () => [10, 20, 50, 100],
+  },
+  layout: {
+    type: String,
+    default: "total, sizes, prev, pager, next, jumper",
+  },
+  background: {
+    type: Boolean,
+    default: false,
+  },
+  dataKey: {
+    type: String,
+    default: "data",
+  },
+  totalKey: {
+    type: String,
+    default: "total",
+  },
+  immediate: {
+    type: Boolean,
+    default: true,
+  },
+  initialPage: {
+    type: Number,
+    default: 1,
+  },
+  initialPageSize: {
+    type: Number,
+    default: 10,
+  },
+  params: {
+    type: Object as PropType<AnyRecord>,
+    default: () => ({}),
+  },
+  border: {
+    type: Boolean,
+    default: true,
+  },
+  dataHandler: {
+    type: Function as PropType<(data: any[]) => any[]>,
+    default: null,
+  },
+  selectable: {
+    type: Function as PropType<(row: any, index: number) => boolean>,
+    default: null,
+  },
+  dragSort: {
+    type: Boolean,
+    default: false,
+  },
+  dragOptions: {
+    type: Object as PropType<Sortable.Options>,
+    default: () => ({}),
+  },
+  rowKey: {
+    type: String,
+    default: "id",
+  },
+  keepSelection: {
+    type: Boolean,
+    default: true,
+  },
+  defaultStatusMap: {
+    type: Object as PropType<Record<string | number, { text: string; type?: string }>>,
+    default: () => ({
+      1: { text: "停用", type: "danger" },
+      0: { text: "启用", type: "success" },
+    }),
+  },
+  tableKey: {
+    type: String,
+    default: "",
+  },
+  getColumnConfigApi: {
+    type: Function as PropType<() => Promise<any>>,
+    default: null,
+  },
+  saveColumnConfigApi: {
+    type: Function as PropType<(cols: string[]) => Promise<any>>,
+    default: null,
+  },
+});
+
+const emit = defineEmits([
+  "selection-change",
+  "refresh",
+  "error",
+  "drag-sort",
+  "drag-start",
+  "drag-end",
+]);
+
+const tableRef = ref<TableInstance | null>(null);
+const tableData = ref<AnyRecord[]>([]);
+const loading = ref<boolean>(false);
+const currentPage = ref<number>(props.initialPage);
+const currentPageSize = ref<number>(props.initialPageSize);
+const total = ref<number>(0);
+const searchParams = ref<AnyRecord>({});
+let sortableInstance: Sortable | null = null;
+
+const tableContainerRef = ref<HTMLDivElement | null>(null);
+const autoTableHeight = ref<number | null>(null);
+let resizeObserver: ResizeObserver | null = null;
+let mutationObserver: MutationObserver | null = null;
+
+const computedTableHeight = computed(() => {
+  if (!props.autoHeight) {
+    return props.scrollY || null;
+  }
+  return autoTableHeight.value;
+});
+
+const calculateTableHeight = () => {
+  if (!props.autoHeight || !tableContainerRef.value) return;
+
+  const rect = tableContainerRef.value.getBoundingClientRect();
+  const viewportHeight = window.innerHeight;
+  const topOffset = rect.top;
+
+  let reservedSpace = props.bottomOffset;
+
+  if (props.showPagination) {
+    reservedSpace += 60;
+  }
+
+  const hasHeader = tableContainerRef.value.querySelector<HTMLElement>(".table-header");
+  if (hasHeader) {
+    reservedSpace += hasHeader.offsetHeight;
+  }
+
+  const availableHeight = viewportHeight - topOffset - reservedSpace;
+  const targetHeight = Math.max(props.minHeight, availableHeight);
+  if (autoTableHeight.value === null || Math.abs(autoTableHeight.value - targetHeight) > 2) {
+    autoTableHeight.value = targetHeight;
+  }
+};
+
+const getNestedValue = (obj: any, path?: string): any => {
+  if (!obj || !path) return undefined;
+  if (path in obj) return obj[path];
+  return path.split(".").reduce((acc, part) => (acc != null ? acc[part] : undefined), obj);
+};
+
+const formatCellValue = (row: any, column: TableColumn): string => {
+  const val = getNestedValue(row, column.prop);
+  if (val === null || val === undefined || val === "") {
+    return column.emptyText || props.emptyCellText;
+  }
+  return String(val);
+};
+
+const debounce = <T extends (...args: any[]) => any>(fn: T, delay = 150) => {
+  let timer: ReturnType<typeof setTimeout> | null = null;
+  const debounced = function (this: any, ...args: Parameters<T>) {
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => {
+      fn.apply(this, args);
+    }, delay);
+  };
+  debounced.cancel = () => {
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
+  };
+  return debounced;
+};
+
+const debouncedCalculate = debounce(calculateTableHeight, 150);
+
+const {
+  computedColumns,
+  settingColumns,
+  tempVisibleColKeys,
+  popoverRef,
+  savingColumns,
+  initTableConfig,
+  handlePopoverShow,
+  handleCancelSettings,
+  handleConfirmSettings,
+} = useTableColumnConfig(props as unknown as TableColumnConfigProps, calculateTableHeight);
+
+const getStatusType = (value: any, customStatusMap?: AnyRecord): string => {
+  const statusMap = customStatusMap || props.defaultStatusMap;
+  return statusMap[value]?.type || "info";
+};
+
+const getStatusText = (value: any, customStatusMap?: AnyRecord): any => {
+  const statusMap = customStatusMap || props.defaultStatusMap;
+  return statusMap[value]?.text || value;
+};
+
+const fetchData = async (extraParams: AnyRecord = {}) => {
+  if (!props.api) {
+    return;
+  }
+
+  loading.value = true;
+
+  try {
+    const requestParams: AnyRecord = {
+      pageNum: currentPage.value,
+      pageSize: currentPageSize.value,
+      ...searchParams.value,
+      ...props.params,
+      ...extraParams,
+    };
+
+    if (!props.showPagination) {
+      delete requestParams.pageNum;
+      delete requestParams.pageSize;
+    }
+
+    const result = await props.api(requestParams);
+    let response: any = null;
+
+    if (result && result.code === 200) {
+      if (Array.isArray(result.data)) {
+        response = { data: result.data };
+      } else if (result.data) {
+        response = result.data;
+      } else {
+        response = result;
+      }
+    } else if (Array.isArray(result)) {
+      response = { data: result };
+    } else if (result?.rows) {
+      response = { data: result.rows, total: result.total };
+    } else {
+      response = result;
+    }
+
+    if (response) {
+      tableData.value =
+        response[props.dataKey] || response.data?.[props.dataKey] || response.rows || [];
+      if (props.dataHandler) {
+        tableData.value = props.dataHandler(tableData.value);
+      }
+      total.value =
+        response[props.totalKey] || response.data?.[props.totalKey] || response.total || 0;
+    }
+  } catch (error) {
+    console.error("CSimpleTable fetchData error:", error);
+    tableData.value = [];
+    total.value = 0;
+    emit("error", error);
+  } finally {
+    loading.value = false;
+    nextTick(() => {
+      calculateTableHeight();
+      if (props.dragSort) {
+        initDragSort();
+      }
+    });
+  }
+};
+
+const initDragSort = () => {
+  if (!tableRef.value) return;
+
+  if (sortableInstance) {
+    sortableInstance.destroy();
+  }
+
+  const el = (tableRef.value.$el as HTMLElement)?.querySelector(".el-table__body-wrapper tbody") as HTMLElement | null;
+  if (!el) return;
+
+  const defaultOptions: Sortable.Options = {
+    animation: 150,
+    handle: ".drag-handle",
+    ghostClass: "sortable-ghost",
+    chosenClass: "sortable-chosen",
+    dragClass: "sortable-drag",
+    forceFallback: true,
+    onStart: (evt: Sortable.SortableEvent) => {
+      emit("drag-start", {
+        oldIndex: evt.oldIndex,
+        element: evt.item,
+      });
+    },
+    onEnd: (evt: Sortable.SortableEvent) => {
+      const { oldIndex, newIndex } = evt;
+
+      if (oldIndex === undefined || newIndex === undefined || oldIndex === newIndex) {
+        emit("drag-end", {
+          oldIndex,
+          newIndex,
+          changed: false,
+        });
+        return;
+      }
+
+      const movedItem = tableData.value.splice(oldIndex, 1)[0];
+      tableData.value.splice(newIndex, 0, movedItem);
+
+      emit("drag-sort", {
+        oldIndex,
+        newIndex,
+        movedItem,
+        data: tableData.value,
+      });
+
+      emit("drag-end", {
+        oldIndex,
+        newIndex,
+        changed: true,
+        movedItem,
+      });
+    },
+  };
+
+  const options = { ...defaultOptions, ...props.dragOptions };
+  sortableInstance = Sortable.create(el, options);
+};
+
+const refresh = () => {
+  fetchData();
+  emit("refresh");
+};
+
+const reset = () => {
+  currentPage.value = props.initialPage;
+  searchParams.value = {};
+  fetchData();
+};
+
+const search = (params: AnyRecord = {}) => {
+  currentPage.value = props.initialPage;
+  searchParams.value = { ...params };
+  fetchData();
+};
+
+const handleCurrentChange = (val: number) => {
+  currentPage.value = val;
+  fetchData();
+};
+
+const handleSizeChange = (val: number) => {
+  currentPageSize.value = val;
+  currentPage.value = props.initialPage;
+  fetchData();
+};
+
+const handleSelectionChange = (selection: any[]) => {
+  emit("selection-change", selection);
+};
+
+const clearSelection = () => {
+  if (tableRef.value) {
+    tableRef.value.clearSelection();
+  }
+};
+
+const toggleRowSelection = (row: any, selected?: boolean) => {
+  if (tableRef.value) {
+    tableRef.value.toggleRowSelection(row, selected);
+  }
+};
+
+const toggleAllSelection = () => {
+  if (tableRef.value) {
+    tableRef.value.toggleAllSelection();
+  }
+};
+
+const getSelectionRows = () => {
+  if (tableRef.value) {
+    return tableRef.value.getSelectionRows();
+  }
+  return [];
+};
+
+const setSelectionByKeys = (keys: any[] = []) => {
+  if (!tableRef.value || !Array.isArray(keys)) return;
+  clearSelection();
+  nextTick(() => {
+    tableData.value.forEach((row) => {
+      if (keys.includes(row[props.rowKey])) {
+        tableRef.value?.toggleRowSelection(row, true);
+      }
+    });
+  });
+};
+
+watch(
+  () => props.params,
+  (newParams) => {
+    currentPage.value = props.initialPage;
+    searchParams.value = { ...newParams };
+    fetchData();
+  },
+  { deep: true }
+);
+
+watch(
+  () => props.dragSort,
+  (newVal) => {
+    if (newVal) {
+      nextTick(() => {
+        initDragSort();
+      });
+    } else if (sortableInstance) {
+      sortableInstance.destroy();
+      sortableInstance = null;
+    }
+  }
+);
+
+watch(
+  () => props.autoHeight,
+  (newVal) => {
+    if (newVal) {
+      initAutoHeight();
+      nextTick(calculateTableHeight);
+    } else {
+      cleanupAutoHeight();
+    }
+  }
+);
+
+const initAutoHeight = () => {
+  if (!props.autoHeight) return;
+
+  window.addEventListener("resize", debouncedCalculate);
+
+  if (!resizeObserver) {
+    resizeObserver = new ResizeObserver(debouncedCalculate);
+  }
+
+  if (tableContainerRef.value?.parentElement) {
+    resizeObserver.observe(tableContainerRef.value.parentElement);
+  }
+
+  const prevSibling = tableContainerRef.value?.previousElementSibling;
+  if (prevSibling) {
+    resizeObserver.observe(prevSibling);
+  }
+
+  if (!mutationObserver) {
+    mutationObserver = new MutationObserver(() => {
+      nextTick(debouncedCalculate);
+    });
+  }
+
+  if (tableContainerRef.value?.parentElement) {
+    mutationObserver.observe(tableContainerRef.value.parentElement, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["style", "class"],
+    });
+  }
+};
+
+const cleanupAutoHeight = () => {
+  window.removeEventListener("resize", debouncedCalculate);
+  if (resizeObserver) {
+    resizeObserver.disconnect();
+  }
+  if (mutationObserver) {
+    mutationObserver.disconnect();
+  }
+};
+
+defineExpose({
+  refresh,
+  reset,
+  search,
+  fetchData,
+  clearSelection,
+  toggleRowSelection,
+  toggleAllSelection,
+  getSelectionRows,
+  setSelectionByKeys,
+  tableData,
+  tableRef,
+  recalculateHeight: calculateTableHeight,
+});
+
+onMounted(() => {
+  if (props.immediate) {
+    fetchData();
+  }
+  initTableConfig();
+  nextTick(() => {
+    calculateTableHeight();
+  });
+  if (props.autoHeight) {
+    initAutoHeight();
+  }
+});
+
+onUnmounted(() => {
+  cleanupAutoHeight();
+  debouncedCalculate.cancel();
+  if (sortableInstance) {
+    sortableInstance.destroy();
+    sortableInstance = null;
+  }
+});
+</script>
+
+<style scoped>
+.c-simple-table {
+  width: 100%;
+}
+
+.table-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+  min-height: 32px;
+}
+
+.header-left {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.table-pagination {
+  margin-top: 16px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.drag-handle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: move;
+  padding: 4px;
+  transition: all 0.2s;
+}
+
+.drag-handle:hover {
+  transform: scale(1.1);
+}
+
+:deep(.sortable-ghost) {
+  opacity: 0.4;
+  background: #f5f7fa;
+}
+
+:deep(.sortable-chosen) {
+  background: #ecf5ff;
+}
+
+:deep(.sortable-drag) {
+  opacity: 0.8;
+  background: #fff;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+:deep(.el-table__body-wrapper) {
+  overflow-y: auto !important;
+}
+</style>