20260811221831

code/fms/fms-vue/src/views/dashboard/index.vue

@@ -22,9 +22,10 @@ type DemoRow = {
   status: number;
   enabled: number;
   updatedAt: string;
+  [key: string]: any;
 };
 
-const ROW_COUNT = 5000;
+const ROW_COUNT = 20;
 const DEMO_NAMES = ["客户资料", "订单状态", "库存预警", "合同归档", "发票登记"];
 const OWNER_OPTIONS = [
   { label: "林晓", value: "lin-xiao" },
@@ -56,8 +57,12 @@ const statusFilter = ref("all");
 const selectedRowKeys = ref<string[]>([]);
 const activeRowKey = ref<string | null>(null);
 const nextRowNumber = ref(ROW_COUNT + 1);
+const nextColumnNumber = ref(1);
+const extraColumns = shallowRef<
+  { dataIndex: string; title: string; width: number; editor: { type: string } }[]
+>([]);
 
-const columns = shallowRef([
+const baseColumns = [
   { dataIndex: "code", title: "记录编号", width: 145, fixed: "left" },
   { dataIndex: "name", title: "项目名称", width: 220, editor: { type: "input" } },
   {
@@ -108,7 +113,9 @@ const columns = shallowRef([
       },
     ],
   },
-]);
+];
+
+const columns = shallowRef([...baseColumns]);
 
 const filteredRows = computed(() => {
   const keyword = searchQuery.value.trim().toLowerCase();
@@ -133,6 +140,37 @@ function syncRows() {
   dataSource.value = [...dataSource.value];
 }
 
+function syncColumns() {
+  columns.value = [...baseColumns, ...extraColumns.value];
+}
+
+function addColumn() {
+  const colNum = nextColumnNumber.value++;
+  const dataIndex = `field_${colNum}`;
+  const title = `自定义${colNum}`;
+  // 为已有行补上该字段的默认值
+  dataSource.value = dataSource.value.map((row) => ({
+    ...row,
+    [dataIndex]: row[dataIndex] ?? "",
+  }));
+  extraColumns.value = [
+    ...extraColumns.value,
+    { dataIndex, title, width: 160, editor: { type: "input" } },
+  ];
+  syncColumns();
+  toast.success(`已新增列: ${title}`);
+}
+
+function removeColumn(dataIndex: string) {
+  extraColumns.value = extraColumns.value.filter((col) => col.dataIndex !== dataIndex);
+  dataSource.value = dataSource.value.map((row) => {
+    const { [dataIndex]: _, ...rest } = row;
+    return rest as DemoRow;
+  });
+  syncColumns();
+  toast.success(`已移除列`);
+}
+
 function onTableChange(
   row: DemoRow,
   column: { title?: string; dataIndex?: string },
@@ -152,9 +190,12 @@ function onRowOrderChange(rows: DemoRow[]) {
 
 function regenerate() {
   dataSource.value = buildRows();
+  extraColumns.value = [];
+  syncColumns();
   selectedRowKeys.value = [];
   activeRowKey.value = null;
   nextRowNumber.value = ROW_COUNT + 1;
+  nextColumnNumber.value = 1;
   toast.success(`已生成 ${ROW_COUNT.toLocaleString()} 条演示数据`);
 }
 
@@ -169,6 +210,9 @@ async function addRow() {
     enabled: 1,
     updatedAt: "2026-08-10 20:00",
   };
+  for (const col of extraColumns.value) {
+    row[col.dataIndex] = "";
+  }
 
   dataSource.value = [...dataSource.value, row];
   searchQuery.value = "";
@@ -234,6 +278,10 @@ function clearSelection() {
           <RefreshCw data-icon="inline-start" />
           重新生成
         </Button>
+        <Button variant="outline" size="sm" @click="addColumn">
+          <Plus data-icon="inline-start" />
+          新增列
+        </Button>
         <Button variant="outline" size="sm" :disabled="!selectedCount" @click="editFirstSelected">
           <Pencil data-icon="inline-start" />
           编辑选中