@befly-addon/admin 1.8.2 → 1.8.5

package/adminViews/config/dictType/index.vue

@@ -1,76 +1,53 @@
 <template>
-    <div class="page-dict-type page-table">
-        <div class="main-tool">
-            <div class="left">
-                <TButton theme="primary" @click="$Method.onAction('add', {})">
-                    <template #icon>
-                        <ILucidePlus />
-                    </template>
-                </TButton>
-            </div>
-            <div class="right">
-                <TInput v-model="$Data.searchKeyword" placeholder="搜索类型名称" clearable @enter="$Method.handleSearch" @clear="$Method.handleSearch">
-                    <template #suffix-icon>
-                        <ILucideSearch />
-                    </template>
-                </TInput>
-                <TButton shape="circle" @click="$Method.handleRefresh">
-                    <template #icon>
-                        <ILucideRotateCw />
-                    </template>
-                </TButton>
-            </div>
-        </div>
-        <div class="main-content">
-            <div class="main-table">
-                <TTable
-                    :data="$Data.tableData"
-                    :columns="$Data.columns"
-                    :loading="$Data.loading"
-                    :active-row-keys="$Data.activeRowKeys"
-                    row-key="id"
-                    height="calc(100vh - var(--search-height) - var(--pagination-height) - var(--layout-gap) * 4)"
-                    active-row-type="single"
-                    @active-change="$Method.onActiveChange"
-                >
-                    <template #operation="{ row }">
-                        <TDropdown trigger="click" placement="bottom-right" @click="(data) => $Method.onAction(data.value, row)">
-                            <TButton theme="primary" size="small">
-                                操作
-                                <template #suffix> <ILucideChevronDown /></template>
-                            </TButton>
-                            <TDropdownMenu slot="dropdown">
-                                <TDropdownItem value="upd">
-                                    <ILucidePencil />
-                                    编辑
-                                </TDropdownItem>
-                                <TDropdownItem value="del" :divider="true">
-                                    <ILucideTrash2 style="width: 14px; height: 14px; margin-right: 6px" />
-                                    删除
-                                </TDropdownItem>
-                            </TDropdownMenu>
-                        </TDropdown>
-                    </template>
-                </TTable>
-            </div>
+    <PagedTableDetail class="page-dict-type page-table" :columns="$Data.columns" :endpoints="$Data.endpoints">
+        <template #toolLeft>
+            <TButton theme="primary" @click="onAdd">
+                <template #icon>
+                    <ILucidePlus />
+                </template>
+            </TButton>
+        </template>
 
-            <div class="main-detail">
-                <DetailPanel :data="$Data.currentRow" :fields="$Data.columns" />
-            </div>
-        </div>
+        <template #toolRight="scope">
+            <TInput v-model="$Data.searchKeyword" placeholder="搜索类型名称" clearable @enter="handleSearch(scope.reload)" @clear="handleSearch(scope.reload)">
+                <template #suffix-icon>
+                    <ILucideSearch />
+                </template>
+            </TInput>
+            <TButton shape="circle" @click="handleRefresh(scope.reload)">
+                <template #icon>
+                    <ILucideRotateCw />
+                </template>
+            </TButton>
+        </template>
 
-        <div class="main-page">
-            <TPagination :current-page="$Data.pagerConfig.currentPage" :page-size="$Data.pagerConfig.limit" :total="$Data.pagerConfig.total" @current-change="$Method.onPageChange" @page-size-change="$Method.handleSizeChange" />
-        </div>
+        <template #operation="{ row, deleteRow }">
+            <TDropdown trigger="click" placement="bottom-right" @click="onDropdownAction($event, row, deleteRow)">
+                <TButton theme="primary" size="small">
+                    操作
+                    <template #suffix> <ILucideChevronDown /></template>
+                </TButton>
+                <TDropdownMenu slot="dropdown">
+                    <TDropdownItem value="upd">
+                        <ILucidePencil />
+                        编辑
+                    </TDropdownItem>
+                    <TDropdownItem value="del" :divider="true">
+                        <ILucideTrash2 style="width: 14px; height: 14px; margin-right: 6px" />
+                        删除
+                    </TDropdownItem>
+                </TDropdownMenu>
+            </TDropdown>
+        </template>
 
-        <EditDialog v-if="$Data.editVisible" v-model="$Data.editVisible" :action-type="$Data.actionType" :row-data="$Data.rowData" @success="$Method.apiDictTypeList" />
-    </div>
+        <template #dialogs="scope">
+            <EditDialog v-if="$Data.editVisible" v-model="$Data.editVisible" :action-type="$Data.actionType" :row-data="$Data.rowData" @success="onDialogSuccess(scope.reload)" />
+        </template>
+    </PagedTableDetail>
 </template>
 
 <script setup lang="ts">
-import { onMounted } from "vue";
-
-import { Button as TButton, Table as TTable, Input as TInput, Dropdown as TDropdown, DropdownMenu as TDropdownMenu, DropdownItem as TDropdownItem, Pagination as TPagination, MessagePlugin, DialogPlugin } from "tdesign-vue-next";
+import { Button as TButton, Dropdown as TDropdown, DropdownItem as TDropdownItem, DropdownMenu as TDropdownMenu, Input as TInput } from "tdesign-vue-next";
 import ILucidePlus from "~icons/lucide/plus";
 import ILucideRotateCw from "~icons/lucide/rotate-cw";
 import ILucideSearch from "~icons/lucide/search";
@@ -78,15 +55,10 @@ import ILucidePencil from "~icons/lucide/pencil";
 import ILucideTrash2 from "~icons/lucide/trash-2";
 import ILucideChevronDown from "~icons/lucide/chevron-down";
 import EditDialog from "./components/edit.vue";
-import DetailPanel from "@/components/DetailPanel.vue";
-import { $Http } from "@/plugins/http";
+import PagedTableDetail from "@/components/pagedTableDetail.vue";
 import { withDefaultColumns } from "befly-shared/utils/withDefaultColumns";
 
 const $Data = $ref({
-    tableData: [],
-    loading: false,
-    activeRowKeys: [],
-    currentRow: null,
     searchKeyword: "",
     columns: withDefaultColumns([
         { colKey: "code", title: "类型代码" },
@@ -95,143 +67,79 @@ const $Data = $ref({
         { colKey: "sort", title: "排序" },
         { colKey: "operation", title: "操作" }
     ]),
-    pagerConfig: {
-        currentPage: 1,
-        limit: 30,
-        total: 0,
-        align: "right",
-        layout: "total, prev, pager, next, jumper"
+    endpoints: {
+        list: {
+            path: "/addon/admin/dictType/list",
+            dropValues: [0, ""],
+            dropKeyValue: {
+                keyword: [""]
+            },
+            buildData: () => {
+                return {
+                    keyword: $Data.searchKeyword
+                };
+            }
+        },
+        delete: {
+            path: "/addon/admin/dictType/del",
+            idKey: "id",
+            confirm: (row) => {
+                return {
+                    header: "确认删除",
+                    body: `确认删除类型“${row.name}”吗？`,
+                    confirmBtn: "删除",
+                    status: "warning"
+                };
+            }
+        }
     },
     editVisible: false,
     actionType: "add",
     rowData: {}
 });
 
-const $Method = {
-    async initData() {
-        await $Method.apiDictTypeList();
-    },
-    async apiDictTypeList() {
-        $Data.loading = true;
-        try {
-            const res = await $Http.post(
-                "/addon/admin/dictType/list",
-                {
-                    page: $Data.pagerConfig.currentPage,
-                    limit: $Data.pagerConfig.limit,
-                    keyword: $Data.searchKeyword
-                },
-                {
-                    dropValues: [0, ""],
-                    dropKeyValue: {
-                        page: [],
-                        limit: [],
-                        keyword: [""]
-                    }
-                }
-            );
-            $Data.tableData = res.data.lists || [];
-            $Data.pagerConfig.total = res.data.total || 0;
+function onAdd(): void {
+    onAction("add", {});
+}
 
-            if ($Data.tableData.length > 0) {
-                $Data.currentRow = $Data.tableData[0];
-                $Data.activeRowKeys = [$Data.tableData[0].id];
-            } else {
-                $Data.currentRow = null;
-                $Data.activeRowKeys = [];
-            }
-        } catch (error) {
-            MessagePlugin.error("加载数据失败");
-        } finally {
-            $Data.loading = false;
-        }
-    },
-    async apiDictTypeDel(row) {
-        let dialog = null;
-        let destroyed = false;
+function onDialogSuccess(reload: (options: { keepSelection?: boolean }) => void): void {
+    reload({ keepSelection: true });
+}
 
-        const destroy = () => {
-            if (destroyed) return;
-            destroyed = true;
-            if (dialog && typeof dialog.destroy === "function") {
-                dialog.destroy();
-            }
-        };
+function handleSearch(reload: (options: { keepSelection?: boolean; resetPage?: boolean }) => void): void {
+    reload({ keepSelection: false, resetPage: true });
+}
 
-        dialog = DialogPlugin.confirm({
-            header: "确认删除",
-            body: `确认删除类型“${row.name}”吗？`,
-            status: "warning",
-            confirmBtn: "删除",
-            cancelBtn: "取消",
-            onConfirm: async () => {
-                if (dialog && typeof dialog.setConfirmLoading === "function") {
-                    dialog.setConfirmLoading(true);
-                }
+function handleRefresh(reload: (options: { keepSelection?: boolean; resetPage?: boolean }) => void): void {
+    $Data.searchKeyword = "";
+    reload({ keepSelection: false, resetPage: true });
+}
 
-                try {
-                    await $Http.post("/addon/admin/dictType/del", {
-                        id: row.id
-                    });
-                    MessagePlugin.success("删除成功");
-                    destroy();
-                    await $Method.apiDictTypeList();
-                } catch (error) {
-                    MessagePlugin.error("删除失败");
-                } finally {
-                    if (dialog && typeof dialog.setConfirmLoading === "function") {
-                        dialog.setConfirmLoading(false);
-                    }
-                }
-            },
-            onClose: () => {
-                destroy();
-            }
-        });
-    },
-    handleSearch() {
-        $Data.pagerConfig.currentPage = 1;
-        $Method.apiDictTypeList();
-    },
-    handleRefresh() {
-        $Data.searchKeyword = "";
-        $Data.pagerConfig.currentPage = 1;
-        $Method.apiDictTypeList();
-    },
-    onPageChange({ currentPage }) {
-        $Data.pagerConfig.currentPage = currentPage;
-        $Method.apiDictTypeList();
-    },
-    handleSizeChange({ pageSize }) {
-        $Data.pagerConfig.limit = pageSize;
-        $Data.pagerConfig.currentPage = 1;
-        $Method.apiDictTypeList();
-    },
-    onActiveChange(value, context) {
-        if (value.length === 0 && $Data.activeRowKeys.length > 0) {
-            return;
-        }
-        $Data.activeRowKeys = value;
-        $Data.currentRow = context.currentRowData;
-    },
-    onAction(type, row) {
-        if (type === "add") {
-            $Data.actionType = "add";
-            $Data.rowData = {};
-            $Data.editVisible = true;
-        } else if (type === "upd") {
-            $Data.actionType = "upd";
-            $Data.rowData = { ...row };
-            $Data.editVisible = true;
-        } else if (type === "del") {
-            $Method.apiDictTypeDel(row);
-        }
+function onAction(type: string, row: Record<string, unknown>): void {
+    if (type === "add") {
+        $Data.actionType = "add";
+        $Data.rowData = {};
+        $Data.editVisible = true;
+        return;
     }
-};
 
-onMounted(() => {
-    $Method.initData();
-});
+    if (type === "upd") {
+        $Data.actionType = "upd";
+        $Data.rowData = Object.assign({}, row);
+        $Data.editVisible = true;
+    }
+}
+
+function onDropdownAction(data: unknown, row: Record<string, unknown>, deleteRow: (r: Record<string, unknown>) => void): void {
+    const record = data as Record<string, unknown>;
+    const rawValue = record && record["value"] ? record["value"] : "";
+    const cmd = rawValue ? String(rawValue) : "";
+    if (cmd === "del") {
+        deleteRow(row);
+        return;
+    }
+    onAction(cmd, row);
+}
 </script>
 
 <style scoped lang="scss">

package/adminViews/config/system/components/edit.vue

@@ -1,6 +1,6 @@
 <template>
-    <TDialog v-model:visible="$Data.visible" :title="$Prop.actionType === 'upd' ? '编辑配置' : '添加配置'" width="600px" :append-to-body="true" :show-footer="true" :esc-closable="false" top="10vh" @close="$Method.onClose">
-        <TForm :model="$Data.formData" label-width="120px" label-position="left" :rules="$Data2.formRules" :ref="(el) => ($Form.form = el)">
+    <PageDialog v-model="dialogVisible" :title="$Prop.actionType === 'upd' ? '编辑配置' : '添加配置'" :confirm-loading="$Data.submitting" @confirm="onSubmit">
+        <TForm :model="$Data.formData" label-width="120px" label-position="left" :rules="$Data2.formRules" :ref="(el) => ($From.form = el)">
             <TFormItem label="配置名称" prop="name">
                 <TInput v-model="$Data.formData.name" placeholder="请输入配置名称" :disabled="$Data.isSystem" />
             </TFormItem>
@@ -37,15 +37,14 @@
                 </TRadioGroup>
             </TFormItem>
         </TForm>
-        <template #footer>
-            <TButton @click="$Method.onClose">取消</TButton>
-            <TButton theme="primary" :loading="$Data.submitting" @click="$Method.onSubmit">确定</TButton>
-        </template>
-    </TDialog>
+    </PageDialog>
 </template>
 
 <script setup lang="ts">
-import { Dialog as TDialog, Form as TForm, FormItem as TFormItem, Input as TInput, Textarea as TTextarea, InputNumber as TInputNumber, Select as TSelect, Option as TOption, RadioGroup as TRadioGroup, Radio as TRadio, Button as TButton, MessagePlugin } from "tdesign-vue-next";
+import { computed } from "vue";
+
+import { Form as TForm, FormItem as TFormItem, Input as TInput, Textarea as TTextarea, InputNumber as TInputNumber, Select as TSelect, Option as TOption, RadioGroup as TRadioGroup, Radio as TRadio, MessagePlugin } from "tdesign-vue-next";
+import PageDialog from "@/components/pageDialog.vue";
 import { $Http } from "@/plugins/http";
 
 const $Prop = defineProps({
@@ -63,15 +62,28 @@ const $Prop = defineProps({
     }
 });
 
-const $Emit = defineEmits(["update:modelValue", "success"]);
+const $Emit = defineEmits<{
+    (e: "update:modelValue", value: boolean): void;
+    (e: "success"): void;
+}>();
+
+type PageDialogEventContext = {
+    close: () => void;
+};
 
 // 表单引用
-const $Form = $shallowRef({
+const $From = $shallowRef({
     form: null
 });
 
+const dialogVisible = computed({
+    get: () => $Prop.modelValue,
+    set: (value) => {
+        $Emit("update:modelValue", value);
+    }
+});
+
 const $Data = $ref({
-    visible: false,
     submitting: false,
     isSystem: false,
     formData: {
@@ -100,72 +112,65 @@ const $Data2 = $shallowRef({
     groupOptions: ["基础配置", "邮件配置", "存储配置", "安全配置", "其他"]
 });
 
-// 方法集合
-const $Method = {
-    async initData() {
-        $Method.onShow();
-    },
+async function initData(): Promise<void> {
+    onShow();
+}
 
-    onShow() {
-        $Data.visible = true;
-        if ($Prop.actionType === "upd" && $Prop.rowData) {
-            $Data.formData.id = $Prop.rowData.id || 0;
-            $Data.formData.name = $Prop.rowData.name || "";
-            $Data.formData.code = $Prop.rowData.code || "";
-            $Data.formData.value = $Prop.rowData.value || "";
-            $Data.formData.valueType = $Prop.rowData.valueType || "string";
-            $Data.formData.group = $Prop.rowData.group || "";
-            $Data.formData.sort = $Prop.rowData.sort || 0;
-            $Data.formData.description = $Prop.rowData.description || "";
-            $Data.formData.state = $Prop.rowData.state || 1;
-            $Data.isSystem = $Prop.rowData.isSystem === 1;
-        } else {
-            $Data.formData = {
-                id: 0,
-                name: "",
-                code: "",
-                value: "",
-                valueType: "string",
-                group: "",
-                sort: 0,
-                description: "",
-                state: 1
-            };
-            $Data.isSystem = false;
-        }
-    },
+function onShow(): void {
+    if ($Prop.actionType === "upd" && $Prop.rowData) {
+        const row = $Prop.rowData as Record<string, unknown>;
+        $Data.formData.id = (row["id"] as number) || 0;
+        $Data.formData.name = (row["name"] as string) || "";
+        $Data.formData.code = (row["code"] as string) || "";
+        $Data.formData.value = (row["value"] as string) || "";
+        $Data.formData.valueType = (row["valueType"] as string) || "string";
+        $Data.formData.group = (row["group"] as string) || "";
+        $Data.formData.sort = (row["sort"] as number) || 0;
+        $Data.formData.description = (row["description"] as string) || "";
+        $Data.formData.state = (row["state"] as number) || 1;
+        $Data.isSystem = row["isSystem"] === 1;
+    } else {
+        $Data.formData = {
+            id: 0,
+            name: "",
+            code: "",
+            value: "",
+            valueType: "string",
+            group: "",
+            sort: 0,
+            description: "",
+            state: 1
+        };
+        $Data.isSystem = false;
+    }
+}
 
-    onClose() {
-        $Data.visible = false;
-        $Emit("update:modelValue", false);
-    },
+async function onSubmit(context?: PageDialogEventContext): Promise<void> {
+    const valid = await $From.form?.validate();
+    if (valid !== true) return;
 
-    async onSubmit() {
-        const valid = await $Form.form?.validate();
-        if (valid !== true) return;
-
-        $Data.submitting = true;
-        try {
-            const api = $Prop.actionType === "upd" ? "/addon/admin/sysConfig/upd" : "/addon/admin/sysConfig/ins";
-            const res = await $Http.post(api, $Data.formData);
-
-            if (res.code === 0) {
-                MessagePlugin.success($Prop.actionType === "upd" ? "编辑成功" : "添加成功");
-                $Emit("success");
-                $Method.onClose();
-            } else {
-                MessagePlugin.error(res.msg || "操作失败");
+    $Data.submitting = true;
+    try {
+        const api = $Prop.actionType === "upd" ? "/addon/admin/sysConfig/upd" : "/addon/admin/sysConfig/ins";
+        const res = await $Http.post(api, $Data.formData);
+
+        if (res.code === 0) {
+            MessagePlugin.success($Prop.actionType === "upd" ? "编辑成功" : "添加成功");
+            $Emit("success");
+            if (context && typeof context.close === "function") {
+                context.close();
             }
-        } catch (error) {
-            MessagePlugin.error("操作失败");
-        } finally {
-            $Data.submitting = false;
+        } else {
+            MessagePlugin.error(res.msg || "操作失败");
         }
+    } catch (error) {
+        MessagePlugin.error("操作失败");
+    } finally {
+        $Data.submitting = false;
     }
-};
+}
 
-// 该组件由父组件 v-if 控制挂载/卸载，因此无需 watch：创建时初始化一次即可
-$Method.initData();
+initData();
 </script>
 
 <style scoped lang="scss"></style>