befly-admin 3.12.5 → 3.12.6

package/src/components/{PagedTableDetailPage.vue → pagedTableDetail.vue}

@@ -2,16 +2,16 @@
     <div class="page-table-detail page-table">
         <div class="main-tool">
             <div class="left">
-                <slot name="toolLeft" :reload="reload" :current-row="currentRow"></slot>
+                <slot name="toolLeft" :reload="reload" :current-row="$Data.currentRow"></slot>
             </div>
             <div class="right">
-                <slot name="toolRight" :reload="reload" :current-row="currentRow"></slot>
+                <slot name="toolRight" :reload="reload" :current-row="$Data.currentRow"></slot>
             </div>
         </div>
 
         <div class="main-content">
             <div class="main-table">
-                <TTable :data="rows" :columns="columns" :loading="loading" :active-row-keys="activeRowKeys" :row-key="rowKey" :height="tableHeight" active-row-type="single" @active-change="onActiveChange">
+                <TTable :data="$Data.rows" :columns="tableColumns" :loading="$Data.loading" :active-row-keys="$Data.activeRowKeys" :row-key="rowKey" :height="tableHeight" active-row-type="single" @active-change="onActiveChange">
                     <template #operation="scope">
                         <slot name="operation" v-bind="buildOperationSlotProps(scope)"></slot>
                     </template>
@@ -23,26 +23,32 @@
             </div>
 
             <div class="main-detail">
-                <slot name="detail" :row="currentRow" :reload="reload">
-                    <DetailPanel :data="currentRow" :fields="detailFields" />
+                <slot name="detail" :row="$Data.currentRow" :reload="reload">
+                    <DetailPanel :data="$Data.currentRow" :fields="detailFields" />
                 </slot>
             </div>
         </div>
 
         <div class="main-page">
-            <TPagination :current-page="pager.currentPage" :page-size="pager.limit" :total="pager.total" :align="paginationAlign" :layout="paginationLayout" @current-change="onPageChange" @page-size-change="onPageSizeChange" />
+            <TPagination :current-page="$Data.pager.currentPage" :page-size="$Data.pager.limit" :total="$Data.pager.total" :align="paginationAlign" :layout="paginationLayout" @current-change="onPageChange" @page-size-change="onPageSizeChange" />
         </div>
 
-        <slot name="dialogs" :reload="reload" :current-row="currentRow"></slot>
+        <slot name="dialogs" :reload="reload" :current-row="$Data.currentRow"></slot>
     </div>
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref, useSlots } from "vue";
-import { DialogPlugin, MessagePlugin, Pagination as TPagination, Table as TTable, type PrimaryTableCol, type TableRowData } from "tdesign-vue-next";
+defineOptions({ name: "PagedTableDetail" });
 
-import DetailPanel from "@/components/DetailPanel.vue";
-import { $Http, type HttpApiResponse } from "@/plugins/http";
+type PrimaryTableCol = import("tdesign-vue-next").PrimaryTableCol;
+type TableRowData = import("tdesign-vue-next").TableRowData;
+
+type PagedTableCol = PrimaryTableCol & {
+    // 页面自定义字段：是否为“详情专属列”（默认 false）
+    // - detail: false => 表格展示（同时也会出现在详情里，且顺序靠前）
+    // - detail: true  => 仅在详情展示（顺序靠后）
+    detail?: boolean;
+};
 
 type PagerState = {
     currentPage: number;
@@ -93,8 +99,9 @@ type LoadListOptions = {
 
 const props = withDefaults(
     defineProps<{
-        columns: PrimaryTableCol[];
+        columns: PagedTableCol[];
         detailFields?: PrimaryTableCol[];
+        detailColumns?: PrimaryTableCol[];
         rowKey?: string;
         tableHeight?: string;
         pageSize?: number;
@@ -106,6 +113,7 @@ const props = withDefaults(
     }>(),
     {
         detailFields: undefined,
+        detailColumns: undefined,
         rowKey: "id",
         tableHeight: "calc(100vh - var(--search-height) - var(--pagination-height) - var(--layout-gap) * 4)",
         pageSize: 30,
@@ -125,24 +133,117 @@ const emit = defineEmits<{
 
 const slots = useSlots();
 
-const rows = ref<TableRowData[]>([]);
-const loading = ref<boolean>(false);
-const pager = ref<PagerState>({
-    currentPage: 1,
-    limit: props.pageSize,
-    total: 0
+const $Data = $ref({
+    rows: [] as TableRowData[],
+    loading: false,
+    pager: {
+        currentPage: 1,
+        limit: props.pageSize,
+        total: 0
+    } as PagerState,
+    currentRow: null as TableRowData | null,
+    activeRowKeys: [] as Array<string | number>
 });
 
-const currentRow = ref<TableRowData | null>(null);
-const activeRowKeys = ref<Array<string | number>>([]);
-
 let requestSeq = 0;
 
+function getColKey(col: PrimaryTableCol): string {
+    const record = col as unknown as Record<string, unknown>;
+    const rawColKey = record["colKey"];
+    if (typeof rawColKey === "string") return rawColKey;
+    if (typeof rawColKey === "number") return String(rawColKey);
+    return "";
+}
+
+function filterValidColumns(input: unknown): PrimaryTableCol[] {
+    if (!Array.isArray(input)) {
+        return [];
+    }
+
+    const out: PrimaryTableCol[] = [];
+
+    for (const col of input as Array<unknown>) {
+        if (!col || typeof col !== "object") {
+            continue;
+        }
+        const key = getColKey(col as PrimaryTableCol);
+        if (key.length === 0) {
+            continue;
+        }
+        out.push(col as PrimaryTableCol);
+    }
+
+    return out;
+}
+
+function mergeDetailColumns(mainColumns: PrimaryTableCol[], extraColumns: PrimaryTableCol[]): PrimaryTableCol[] {
+    const out: PrimaryTableCol[] = [];
+    const set = new Set<string>();
+
+    for (const col of mainColumns) {
+        out.push(col);
+        const key = getColKey(col);
+        if (key) {
+            set.add(key);
+        }
+    }
+
+    for (const col of extraColumns) {
+        const key = getColKey(col);
+        if (key && set.has(key)) {
+            continue;
+        }
+        out.push(col);
+        if (key) {
+            set.add(key);
+        }
+    }
+
+    return out;
+}
+
+function isDetail(col: PagedTableCol): boolean {
+    const record = col as unknown as Record<string, unknown>;
+    if (record["detail"] === true) return true;
+    return false;
+}
+
+const tableColumns = computed(() => {
+    const out: PagedTableCol[] = [];
+    const cols = filterValidColumns(props.columns) as PagedTableCol[];
+    for (const col of cols) {
+        if (isDetail(col)) continue;
+        out.push(col);
+    }
+    return out;
+});
+
 const detailFields = computed(() => {
+    // A：完全自定义（兼容存量）
     if (props.detailFields && Array.isArray(props.detailFields)) {
-        return props.detailFields;
+        return filterValidColumns(props.detailFields);
     }
-    return props.columns;
+
+    // B：表格列只展示关键字段，详情列 = columns（关键字段） + detailColumns（其他字段）
+    if (props.detailColumns && Array.isArray(props.detailColumns)) {
+        const extras = filterValidColumns(props.detailColumns);
+        return mergeDetailColumns(tableColumns.value, extras);
+    }
+
+    // C：单列定义：只维护一个 columns：detail 字段为详情专属列，详情 = 表格列（在前） + 详情列（在后）
+    const extras: PagedTableCol[] = [];
+    const cols = filterValidColumns(props.columns) as PagedTableCol[];
+    for (const col of cols) {
+        if (!isDetail(col)) continue;
+        extras.push(col);
+    }
+
+    if (extras.length > 0) {
+        return mergeDetailColumns(tableColumns.value, extras);
+    }
+
+    // D：默认复用表格列
+    return tableColumns.value;
 });
 
 const forwardedTableSlotNames = computed(() => {
@@ -172,7 +273,7 @@ const forwardedTableSlotNames = computed(() => {
 });
 
 function setCurrentRow(row: TableRowData | null): void {
-    currentRow.value = row;
+    $Data.currentRow = row;
     emit("row-change", { row: row });
 }
 
@@ -190,7 +291,7 @@ function getRowKeyValue(row: TableRowData): string | number | null {
 function applyAutoSelection(list: TableRowData[], preferKey: string | number | null): void {
     if (!Array.isArray(list) || list.length === 0) {
         setCurrentRow(null);
-        activeRowKeys.value = [];
+        $Data.activeRowKeys = [];
         return;
     }
 
@@ -199,7 +300,7 @@ function applyAutoSelection(list: TableRowData[], preferKey: string | number | n
             const k = getRowKeyValue(row);
             if (k === preferKey) {
                 setCurrentRow(row);
-                activeRowKeys.value = [k];
+                $Data.activeRowKeys = [k];
                 return;
             }
         }
@@ -210,11 +311,11 @@ function applyAutoSelection(list: TableRowData[], preferKey: string | number | n
     setCurrentRow(first);
 
     if (firstKey === null) {
-        activeRowKeys.value = [];
+        $Data.activeRowKeys = [];
         return;
     }
 
-    activeRowKeys.value = [firstKey];
+    $Data.activeRowKeys = [firstKey];
 }
 
 function getLastPage(total: number, limit: number): number {
@@ -231,22 +332,22 @@ async function loadList(options?: LoadListOptions): Promise<void> {
         return;
     }
 
-    const preferKey = options?.keepSelection ? (currentRow.value ? getRowKeyValue(currentRow.value) : null) : null;
+    const preferKey = options?.keepSelection ? ($Data.currentRow ? getRowKeyValue($Data.currentRow) : null) : null;
 
     requestSeq += 1;
     const seq = requestSeq;
 
-    loading.value = true;
+    $Data.loading = true;
     try {
         const pageKey = listEndpoint.pageKey || "page";
         const limitKey = listEndpoint.limitKey || "limit";
 
         const data: Record<string, unknown> = {};
-        data[pageKey] = pager.value.currentPage;
-        data[limitKey] = pager.value.limit;
+        data[pageKey] = $Data.pager.currentPage;
+        data[limitKey] = $Data.pager.limit;
 
         if (listEndpoint.buildData) {
-            const extra = listEndpoint.buildData({ currentPage: pager.value.currentPage, limit: pager.value.limit });
+            const extra = listEndpoint.buildData({ currentPage: $Data.pager.currentPage, limit: $Data.pager.limit });
             if (extra && typeof extra === "object") {
                 for (const k of Object.keys(extra)) {
                     data[k] = extra[k];
@@ -270,16 +371,16 @@ async function loadList(options?: LoadListOptions): Promise<void> {
         // B：页码越界修正（删除/过滤等导致 total 变小后，当前页可能已不存在）
         const allowPageFallback = options?.allowPageFallback !== false;
         if (allowPageFallback && lists.length === 0 && total > 0) {
-            const lastPage = getLastPage(total, pager.value.limit);
-            if (pager.value.currentPage > lastPage) {
-                pager.value.currentPage = lastPage;
+            const lastPage = getLastPage(total, $Data.pager.limit);
+            if ($Data.pager.currentPage > lastPage) {
+                $Data.pager.currentPage = lastPage;
                 await loadList({ keepSelection: false, allowPageFallback: false });
                 return;
             }
         }
 
-        rows.value = lists;
-        pager.value.total = total;
+        $Data.rows = lists;
+        $Data.pager.total = total;
 
         applyAutoSelection(lists, preferKey);
         emit("loaded", { rows: lists, total: total });
@@ -287,45 +388,45 @@ async function loadList(options?: LoadListOptions): Promise<void> {
         if (seq !== requestSeq) {
             return;
         }
-        MessagePlugin.error("加载数据失败");
+        void showMessageError("加载数据失败");
     } finally {
         if (seq === requestSeq) {
-            loading.value = false;
+            $Data.loading = false;
         }
     }
 }
 
 async function reload(options?: { keepSelection?: boolean; resetPage?: boolean }): Promise<void> {
     if (options?.resetPage) {
-        pager.value.currentPage = 1;
+        $Data.pager.currentPage = 1;
     }
     await loadList({ keepSelection: options?.keepSelection, allowPageFallback: true });
 }
 
 function onPageChange(info: { currentPage: number }): void {
-    pager.value.currentPage = info.currentPage;
+    $Data.pager.currentPage = info.currentPage;
     void reload({ keepSelection: true });
 }
 
 function onPageSizeChange(info: { pageSize: number }): void {
-    pager.value.limit = info.pageSize;
-    pager.value.currentPage = 1;
+    $Data.pager.limit = info.pageSize;
+    $Data.pager.currentPage = 1;
     void reload({ keepSelection: false });
 }
 
 function onActiveChange(value: Array<string | number>, context: { activeRowList?: Array<{ row: TableRowData }> }): void {
     // 禁止取消高亮：如果新值为空，保持当前选中
     if (value.length === 0) {
-        if (activeRowKeys.value.length > 0) {
+        if ($Data.activeRowKeys.length > 0) {
             return;
         }
 
-        activeRowKeys.value = [];
+        $Data.activeRowKeys = [];
         setCurrentRow(null);
         return;
     }
 
-    activeRowKeys.value = value;
+    $Data.activeRowKeys = value;
 
     const list = context.activeRowList;
     if (list && Array.isArray(list) && list.length > 0) {
@@ -336,7 +437,7 @@ function onActiveChange(value: Array<string | number>, context: { activeRowList?
 
     // C1：兜底回查（activeRowList 缺失时按 key 在 rows 中回查）
     const activeKey = value[0];
-    for (const row of rows.value) {
+    for (const row of $Data.rows) {
         const key = getRowKeyValue(row);
         if (key === activeKey) {
             setCurrentRow(row);
@@ -365,7 +466,7 @@ function getDeleteConfirmContent(ep: DeleteEndpoint<TableRowData>, row: TableRow
 async function deleteRow(row: TableRowData): Promise<void> {
     const ep = props.endpoints?.delete;
     if (!ep) {
-        MessagePlugin.error("未配置删除接口");
+        await showMessageError("未配置删除接口");
         return;
     }
 
@@ -374,7 +475,7 @@ async function deleteRow(row: TableRowData): Promise<void> {
     const rawId = record[idKey];
 
     if (rawId === null || rawId === undefined || rawId === "") {
-        MessagePlugin.error("删除失败：缺少主键");
+        await showMessageError("删除失败：缺少主键");
         return;
     }
 
@@ -391,7 +492,7 @@ async function deleteRow(row: TableRowData): Promise<void> {
         }
     };
 
-    dialog = DialogPlugin.confirm({
+    dialog = await openConfirmDialog({
         header: confirmContent.header,
         body: confirmContent.body,
         status: confirmContent.status || "warning",
@@ -420,12 +521,12 @@ async function deleteRow(row: TableRowData): Promise<void> {
                     dropKeyValue: ep.dropKeyValue
                 });
 
-                MessagePlugin.success("删除成功");
+                await showMessageSuccess("删除成功");
                 destroy();
                 emit("deleted", { row: row });
                 await reload({ keepSelection: true });
             } catch (error) {
-                MessagePlugin.error("删除失败");
+                await showMessageError("删除失败");
             } finally {
                 if (dialog && typeof dialog.setConfirmLoading === "function") {
                     dialog.setConfirmLoading(false);
@@ -454,9 +555,9 @@ function buildOperationSlotProps(scope: Record<string, unknown>): Record<string,
 defineExpose({
     reload: reload,
     deleteRow: deleteRow,
-    rows: rows,
-    pager: pager,
-    currentRow: currentRow
+    rows: $Data.rows,
+    pager: $Data.pager,
+    currentRow: $Data.currentRow
 });
 
 onMounted(() => {