@befly-addon/admin 1.8.2 → 1.8.4

package/adminViews/permission/role/components/api.vue

@@ -56,7 +56,10 @@ const $Prop = defineProps({
     }
 });
 
-const $Emit = defineEmits(["update:modelValue", "success"]);
+const $Emit = defineEmits<{
+    (e: "update:modelValue", value: boolean): void;
+    (e: "success"): void;
+}>();
 
 const $Data = $ref({
     visible: false,

package/adminViews/permission/role/components/edit.vue

@@ -60,7 +60,10 @@ const $Prop = defineProps({
     }
 });
 
-const $Emit = defineEmits(["update:modelValue", "success"]);
+const $Emit = defineEmits<{
+    (e: "update:modelValue", value: boolean): void;
+    (e: "success"): void;
+}>();
 
 // 表单引用
 const $From = $shallowRef({

package/adminViews/permission/role/components/menu.vue

@@ -57,7 +57,10 @@ const $Prop = defineProps({
     }
 });
 
-const $Emit = defineEmits(["update:modelValue", "success"]);
+const $Emit = defineEmits<{
+    (e: "update:modelValue", value: boolean): void;
+    (e: "success"): void;
+}>();
 
 const $Data = $ref({
     visible: false,

package/adminViews/permission/role/index.vue

@@ -1,95 +1,77 @@
 <template>
-    <div class="page-role page-table">
-        <div class="main-tool">
-            <div class="left">
-                <TButton theme="primary" @click="$Method.onAction('add', {})">
-                    <template #icon>
-                        <ILucidePlus />
-                    </template>
+    <PagedTableDetailPage class="page-role page-table" :columns="$Data.columns" :endpoints="$Data.endpoints" :table-slot-names="['state', 'menuCount', 'apiCount']">
+        <template #toolLeft>
+            <TButton theme="primary" @click="$Method.onAdd">
+                <template #icon>
+                    <ILucidePlus />
+                </template>
+            </TButton>
+        </template>
+
+        <template #toolRight="scope">
+            <TButton shape="circle" @click="$Method.onReload(scope.reload)">
+                <template #icon>
+                    <ILucideRotateCw />
+                </template>
+            </TButton>
+        </template>
+
+        <template #state="{ row }">
+            <TTag v-if="row.state === 1" shape="round" theme="success" variant="light-outline">正常</TTag>
+            <TTag v-else-if="row.state === 2" shape="round" theme="warning" variant="light-outline">禁用</TTag>
+            <TTag v-else shape="round" theme="danger" variant="light-outline">已删除</TTag>
+        </template>
+
+        <template #menuCount="{ row }">
+            {{ $Method.getPathCount(row.menus) }}
+        </template>
+
+        <template #apiCount="{ row }">
+            {{ $Method.getPathCount(row.apis) }}
+        </template>
+
+        <template #operation="{ row, deleteRow }">
+            <TDropdown trigger="click" placement="bottom-right" @click="$Method.onDropdownAction($event, row, deleteRow)">
+                <TButton theme="primary" size="small">
+                    操作
+                    <template #suffix> <ILucideChevronDown /></template>
                 </TButton>
-            </div>
-            <div class="right">
-                <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 #state="{ row }">
-                        <TTag v-if="row.state === 1" shape="round" theme="success" variant="light-outline">正常</TTag>
-                        <TTag v-else-if="row.state === 2" shape="round" theme="warning" variant="light-outline">禁用</TTag>
-                        <TTag v-else shape="round" theme="danger" variant="light-outline">已删除</TTag>
-                    </template>
-                    <template #menuCount="{ row }">
-                        {{ $Method.getPathCount(row.menus) }}
-                    </template>
-                    <template #apiCount="{ row }">
-                        {{ $Method.getPathCount(row.apis) }}
-                    </template>
-                    <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="menu">
-                                    <ILucideSettings />
-                                    菜单权限
-                                </TDropdownItem>
-                                <TDropdownItem value="api">
-                                    <ILucideCode />
-                                    接口权限
-                                </TDropdownItem>
-                                <TDropdownItem value="del" :divider="true">
-                                    <ILucideTrash2 style="width: 14px; height: 14px; margin-right: 6px" />
-                                    删除
-                                </TDropdownItem>
-                            </TDropdownMenu>
-                        </TDropdown>
-                    </template>
-                </TTable>
-            </div>
-
-            <div class="main-detail">
-                <DetailPanel :data="$Data.currentRow" :fields="$Data.columns" />
-            </div>
-        </div>
-
-        <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>
-
-        <!-- 编辑对话框组件 -->
-        <EditDialog v-if="$Data.editVisible" v-model="$Data.editVisible" :action-type="$Data.actionType" :row-data="$Data.rowData" @success="$Method.apiRoleList" />
-
-        <!-- 菜单权限对话框组件 -->
-        <MenuDialog v-if="$Data.menuVisible" v-model="$Data.menuVisible" :row-data="$Data.rowData" @success="$Method.apiRoleList" />
-
-        <!-- 接口权限对话框组件 -->
-        <ApiDialog v-if="$Data.apiVisible" v-model="$Data.apiVisible" :row-data="$Data.rowData" @success="$Method.apiRoleList" />
-    </div>
+                <TDropdownMenu slot="dropdown">
+                    <TDropdownItem value="upd">
+                        <ILucidePencil />
+                        编辑
+                    </TDropdownItem>
+                    <TDropdownItem value="menu">
+                        <ILucideSettings />
+                        菜单权限
+                    </TDropdownItem>
+                    <TDropdownItem value="api">
+                        <ILucideCode />
+                        接口权限
+                    </TDropdownItem>
+                    <TDropdownItem value="del" :divider="true">
+                        <ILucideTrash2 style="width: 14px; height: 14px; margin-right: 6px" />
+                        删除
+                    </TDropdownItem>
+                </TDropdownMenu>
+            </TDropdown>
+        </template>
+
+        <template #dialogs="scope">
+            <!-- 编辑对话框组件 -->
+            <EditDialog v-if="$Data.editVisible" v-model="$Data.editVisible" :action-type="$Data.actionType" :row-data="$Data.rowData" @success="$Method.onDialogSuccess(scope.reload)" />
+
+            <!-- 菜单权限对话框组件 -->
+            <MenuDialog v-if="$Data.menuVisible" v-model="$Data.menuVisible" :row-data="$Data.rowData" @success="$Method.onDialogSuccess(scope.reload)" />
+
+            <!-- 接口权限对话框组件 -->
+            <ApiDialog v-if="$Data.apiVisible" v-model="$Data.apiVisible" :row-data="$Data.rowData" @success="$Method.onDialogSuccess(scope.reload)" />
+        </template>
+    </PagedTableDetailPage>
 </template>
 
 <script setup lang="ts">
-import { Button as TButton, Table as TTable, Tag as TTag, 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, Tag as TTag } from "tdesign-vue-next";
 import ILucidePlus from "~icons/lucide/plus";
 import ILucideRotateCw from "~icons/lucide/rotate-cw";
 import ILucidePencil from "~icons/lucide/pencil";
@@ -100,16 +82,11 @@ import ILucideChevronDown from "~icons/lucide/chevron-down";
 import EditDialog from "./components/edit.vue";
 import MenuDialog from "./components/menu.vue";
 import ApiDialog from "./components/api.vue";
-import DetailPanel from "@/components/DetailPanel.vue";
-import { $Http } from "@/plugins/http";
+import PagedTableDetailPage from "@/components/PagedTableDetailPage.vue";
 import { withDefaultColumns } from "befly-shared/utils/withDefaultColumns";
 
 // 响应式数据
 const $Data = $ref({
-    tableData: [],
-    loading: false,
-    activeRowKeys: [],
-    currentRow: null,
     columns: withDefaultColumns([
         { colKey: "name", title: "角色名称" },
         { colKey: "code", title: "角色代码", width: 150 },
@@ -120,12 +97,23 @@ const $Data = $ref({
         { colKey: "description", title: "描述" },
         { colKey: "operation", title: "操作" }
     ]),
-    pagerConfig: {
-        currentPage: 1,
-        limit: 30,
-        total: 0,
-        align: "right",
-        layout: "total, prev, pager, next, jumper"
+    endpoints: {
+        list: {
+            path: "/addon/admin/role/list",
+            dropValues: [""]
+        },
+        delete: {
+            path: "/addon/admin/role/del",
+            idKey: "id",
+            confirm: (row) => {
+                return {
+                    header: "确认删除",
+                    body: `确认删除角色“${row.name}”吗？`,
+                    confirmBtn: "删除",
+                    status: "warning"
+                };
+            }
+        }
     },
     editVisible: false,
     menuVisible: false,
@@ -136,138 +124,55 @@ const $Data = $ref({
 
 // 方法
 const $Method = {
-    getPathCount(value) {
-        if (!Array.isArray(value)) return 0;
-        return value.filter((p) => typeof p === "string" && p.trim().length > 0).length;
+    onAdd() {
+        $Method.onAction("add", {});
     },
-    async initData() {
-        await $Method.apiRoleList();
-    },
-    // 加载角色列表
-    async apiRoleList() {
-        $Data.loading = true;
-        try {
-            const res = await $Http.post(
-                "/addon/admin/role/list",
-                {
-                    page: $Data.pagerConfig.currentPage,
-                    limit: $Data.pagerConfig.limit
-                },
-                {
-                    dropValues: [""]
-                }
-            );
-            $Data.tableData = res.data.lists || [];
-            $Data.pagerConfig.total = res.data.total || 0;
 
-            // 自动选中并高亮第一行
-            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;
-        }
+    onReload(reload) {
+        reload({ keepSelection: true });
     },
 
-    // 删除角色
-    async apiRoleDel(row) {
-        let dialog = null;
-        let destroyed = false;
-
-        const destroy = () => {
-            if (destroyed) return;
-            destroyed = true;
-            if (dialog && typeof dialog.destroy === "function") {
-                dialog.destroy();
-            }
-        };
-
-        dialog = DialogPlugin.confirm({
-            header: "确认删除",
-            body: `确认删除角色“${row.name}”吗？`,
-            status: "warning",
-            confirmBtn: "删除",
-            cancelBtn: "取消",
-            onConfirm: async () => {
-                if (dialog && typeof dialog.setConfirmLoading === "function") {
-                    dialog.setConfirmLoading(true);
-                }
-
-                try {
-                    await $Http.post("/addon/admin/role/del", {
-                        id: row.id
-                    });
-                    MessagePlugin.success("删除成功");
-                    destroy();
-                    await $Method.apiRoleList();
-                } catch (error) {
-                    MessagePlugin.error("删除失败");
-                } finally {
-                    if (dialog && typeof dialog.setConfirmLoading === "function") {
-                        dialog.setConfirmLoading(false);
-                    }
-                }
-            },
-            onClose: () => {
-                destroy();
-            }
-        });
+    onDialogSuccess(reload) {
+        reload({ keepSelection: true });
     },
 
-    // 刷新
-    handleRefresh() {
-        $Method.apiRoleList();
+    getPathCount(value) {
+        if (!Array.isArray(value)) return 0;
+        return value.filter((p) => typeof p === "string" && p.trim().length > 0).length;
     },
+    onAction(command, rowData) {
+        $Data.actionType = command;
 
-    // 分页改变
-    onPageChange({ currentPage }) {
-        $Data.pagerConfig.currentPage = currentPage;
-        $Method.apiRoleList();
-    },
+        if (command === "add") {
+            $Data.rowData = {};
+        } else {
+            $Data.rowData = Object.assign({}, rowData);
+        }
 
-    // 每页条数改变
-    handleSizeChange({ pageSize }) {
-        $Data.pagerConfig.limit = pageSize;
-        $Data.pagerConfig.currentPage = 1;
-        $Method.apiRoleList();
-    },
+        if (command === "add" || command === "upd") {
+            $Data.editVisible = true;
+            return;
+        }
 
-    // 高亮行变化
-    onActiveChange(value, context) {
-        // 禁止取消高亮：如果新值为空，保持当前选中
-        if (value.length === 0 && $Data.activeRowKeys.length > 0) {
+        if (command === "menu") {
+            $Data.menuVisible = true;
             return;
         }
-        $Data.activeRowKeys = value;
-        // 更新当前高亮的行数据
-        if (context.activeRowList && context.activeRowList.length > 0) {
-            $Data.currentRow = context.activeRowList[0].row;
+
+        if (command === "api") {
+            $Data.apiVisible = true;
         }
     },
 
-    // 操作菜单点击
-    onAction(command, rowData) {
-        $Data.actionType = command;
-        $Data.rowData = rowData;
-        if (command === "add" || command === "upd") {
-            $Data.editVisible = true;
-        } else if (command === "menu") {
-            $Data.menuVisible = true;
-        } else if (command === "api") {
-            $Data.apiVisible = true;
-        } else if (command === "del") {
-            $Method.apiRoleDel(rowData);
+    onDropdownAction(data, rowData, deleteRow) {
+        const cmd = data && data.value ? String(data.value) : "";
+        if (cmd === "del") {
+            deleteRow(rowData);
+            return;
         }
+        $Method.onAction(cmd, rowData);
     }
 };
-
-$Method.initData();
 </script>
 
 <style scoped lang="scss">

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@befly-addon/admin",
-    "version": "1.8.2",
-    "gitHead": "0e9cfa6f2979b12725e06e34936737738a219747",
+    "version": "1.8.4",
+    "gitHead": "9823cc29996ba9950dd08bfd72856e3b65815039",
     "private": false,
     "description": "Befly - 管理后台功能组件",
     "keywords": [
@@ -54,7 +54,7 @@
         "ua-parser-js": "^2.0.8"
     },
     "devDependencies": {
-        "befly": "3.16.2"
+        "befly": "^3.16.4"
     },
     "peerDependencies": {
         "befly": "^3.14.0"