@befly-addon/admin 1.8.2 → 1.8.5

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

@@ -1,9 +1,9 @@
 <template>
-    <TDialog v-model:visible="$Data.visible" title="菜单权限" width="900px" :append-to-body="true" :show-footer="true" top="5vh" @close="$Method.onClose">
+    <PageDialog v-model="dialogVisible" title="菜单权限" width="900px" :confirm-loading="$Data.submitting" @confirm="onSubmit">
         <div class="comp-role-menu">
             <!-- 搜索框 -->
             <div class="search-box">
-                <TInput v-model="$Data.searchText" placeholder="搜索菜单名称或路径" clearable @change="$Method.onSearch">
+                <TInput v-model="$Data.searchText" placeholder="搜索菜单名称或路径" clearable @change="onSearch">
                     <template #prefix-icon>
                         <ILucideSearch />
                     </template>
@@ -29,20 +29,15 @@
                 </div>
             </div>
         </div>
-        <template #footer>
-            <div class="dialog-footer">
-                <t-space>
-                    <TButton theme="default" @click="$Method.onClose">取消</TButton>
-                    <TButton theme="primary" :loading="$Data.submitting" @click="$Method.onSubmit">保存</TButton>
-                </t-space>
-            </div>
-        </template>
-    </TDialog>
+    </PageDialog>
 </template>
 
 <script setup lang="ts">
-import { Dialog as TDialog, CheckboxGroup as TCheckboxGroup, Checkbox as TCheckbox, Button as TButton, Input as TInput, MessagePlugin } from "tdesign-vue-next";
+import { computed } from "vue";
+
+import { CheckboxGroup as TCheckboxGroup, Checkbox as TCheckbox, Input as TInput, MessagePlugin } from "tdesign-vue-next";
 import ILucideSearch from "~icons/lucide/search";
+import PageDialog from "@/components/pageDialog.vue";
 import { $Http } from "@/plugins/http";
 import { arrayToTree } from "befly-shared/utils/arrayToTree";
 
@@ -57,10 +52,23 @@ 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 dialogVisible = computed({
+    get: () => $Prop.modelValue,
+    set: (value) => {
+        $Emit("update:modelValue", value);
+    }
+});
 
 const $Data = $ref({
-    visible: false,
     submitting: false,
     searchText: "",
     menuGroups: [],
@@ -68,158 +76,142 @@ const $Data = $ref({
     checkedMenuPaths: []
 });
 
-// 方法集合
-const $Method = {
-    async initData() {
-        await Promise.all([$Method.apiMenuAll(), $Method.apiRoleMenuDetail()]);
-        $Data.filteredMenuGroups = $Data.menuGroups;
-        $Method.onShow();
-    },
-
-    onShow() {
-        setTimeout(() => {
-            $Data.visible = $Prop.modelValue;
-        }, 100);
-    },
-
-    onClose() {
-        $Data.visible = false;
-        setTimeout(() => {
-            $Emit("update:modelValue", false);
-        }, 300);
-    },
+async function initData(): Promise<void> {
+    await Promise.all([apiMenuAll(), apiRoleMenuDetail()]);
+    $Data.filteredMenuGroups = $Data.menuGroups;
+}
 
-    // 加载菜单树（用于配置权限）
-    async apiMenuAll() {
-        try {
-            const res = await $Http.post(
-                "/addon/admin/menu/all",
-                {},
-                {
-                    dropValues: [""]
+async function apiMenuAll(): Promise<void> {
+    try {
+        const res = await $Http.post(
+            "/addon/admin/menu/all",
+            {},
+            {
+                dropValues: [""]
+            }
+        );
+        const lists = Array.isArray(res?.data?.lists) ? res.data.lists : [];
+
+        const treeResult = arrayToTree(lists, "path", "parentPath", "children", "sort");
+        const roots = Array.isArray(treeResult?.tree) ? treeResult.tree : [];
+
+        const groups: Array<{ name: string; title: string; menus: unknown[] }> = [];
+        for (const root of roots) {
+            const rootPath = typeof root?.path === "string" ? root.path : "";
+            const rootName = typeof root?.name === "string" ? root.name : "";
+
+            const menus: unknown[] = [];
+
+            const walk = (node: Record<string, unknown>, depth: number): void => {
+                const name = typeof node["name"] === "string" ? String(node["name"]) : "";
+                const path = typeof node["path"] === "string" ? String(node["path"]) : "";
+                if (path.length > 0) {
+                    menus.push({
+                        value: path,
+                        name: name,
+                        path: path,
+                        depth: depth,
+                        label: `${name} ${path}`.trim()
+                    });
                 }
-            );
-            const lists = Array.isArray(res?.data?.lists) ? res.data.lists : [];
-
-            const treeResult = arrayToTree(lists, "path", "parentPath", "children", "sort");
-            const roots = Array.isArray(treeResult?.tree) ? treeResult.tree : [];
-
-            const groups = [];
-            for (const root of roots) {
-                const rootPath = typeof root?.path === "string" ? root.path : "";
-                const rootName = typeof root?.name === "string" ? root.name : "";
-
-                const menus = [];
-
-                const walk = (node, depth) => {
-                    const name = typeof node?.name === "string" ? node.name : "";
-                    const path = typeof node?.path === "string" ? node.path : "";
-                    if (path.length > 0) {
-                        menus.push({
-                            value: path,
-                            name: name,
-                            path: path,
-                            depth: depth,
-                            label: `${name} ${path}`.trim()
-                        });
-                    }
 
-                    const children = Array.isArray(node?.children) ? node.children : [];
-                    for (const child of children) {
-                        walk(child, depth + 1);
+                const children = Array.isArray(node["children"]) ? (node["children"] as unknown[]) : [];
+                for (const child of children) {
+                    if (child && typeof child === "object") {
+                        walk(child as Record<string, unknown>, depth + 1);
                     }
-                };
+                }
+            };
 
-                walk(root, 0);
+            walk(root as Record<string, unknown>, 0);
 
-                const groupTitle = rootName.length > 0 ? rootName : rootPath;
-                groups.push({
-                    name: rootPath.length > 0 ? rootPath : groupTitle,
-                    title: groupTitle.length > 0 ? groupTitle : "未命名菜单",
-                    menus: menus
-                });
-            }
-
-            $Data.menuGroups = groups;
-        } catch (error) {
-            MessagePlugin.error("加载菜单失败");
+            const groupTitle = rootName.length > 0 ? rootName : rootPath;
+            groups.push({
+                name: rootPath.length > 0 ? rootPath : groupTitle,
+                title: groupTitle.length > 0 ? groupTitle : "未命名菜单",
+                menus: menus
+            });
         }
-    },
 
-    // 加载该角色已分配的菜单
-    async apiRoleMenuDetail() {
-        if (!$Prop.rowData.id) return;
-
-        try {
-            const res = await $Http.post(
-                "/addon/admin/role/menus",
-                {
-                    roleCode: $Prop.rowData.code
-                },
-                {
-                    dropValues: [""]
-                }
-            );
+        $Data.menuGroups = groups as never;
+    } catch (error) {
+        MessagePlugin.error("加载菜单失败");
+    }
+}
 
-            // menus 返回的 data 直接就是菜单 path 数组
-            $Data.checkedMenuPaths = Array.isArray(res.data) ? res.data : [];
-        } catch (error) {
-            MessagePlugin.error("加载数据失败");
-        }
-    },
+async function apiRoleMenuDetail(): Promise<void> {
+    if (!$Prop.rowData.id) return;
+
+    try {
+        const res = await $Http.post(
+            "/addon/admin/role/menus",
+            {
+                roleCode: $Prop.rowData.code
+            },
+            {
+                dropValues: [""]
+            }
+        );
 
-    // 搜索过滤（按“名称 + 路径”匹配；展示结构与接口弹框一致）
-    onSearch() {
-        const kw = typeof $Data.searchText === "string" ? $Data.searchText.trim().toLowerCase() : "";
-        if (kw.length === 0) {
-            $Data.filteredMenuGroups = $Data.menuGroups;
-            return;
-        }
+        $Data.checkedMenuPaths = Array.isArray(res.data) ? res.data : [];
+    } catch (error) {
+        MessagePlugin.error("加载数据失败");
+    }
+}
 
-        $Data.filteredMenuGroups = $Data.menuGroups
-            .map((group) => {
-                const menus = Array.isArray(group?.menus)
-                    ? group.menus.filter((menu) => {
-                          const label = typeof menu?.label === "string" ? menu.label : "";
-                          return label.toLowerCase().includes(kw);
-                      })
-                    : [];
-
-                return {
-                    name: group.name,
-                    title: group.title,
-                    menus: menus
-                };
-            })
-            .filter((group) => Array.isArray(group.menus) && group.menus.length > 0);
-    },
+function onSearch(): void {
+    const kw = typeof $Data.searchText === "string" ? $Data.searchText.trim().toLowerCase() : "";
+    if (kw.length === 0) {
+        $Data.filteredMenuGroups = $Data.menuGroups;
+        return;
+    }
 
-    // 提交表单
-    async onSubmit() {
-        try {
-            $Data.submitting = true;
+    $Data.filteredMenuGroups = ($Data.menuGroups as unknown[])
+        .map((group) => {
+            const groupRecord = group && typeof group === "object" ? (group as Record<string, unknown>) : null;
+            const groupMenus = groupRecord && Array.isArray(groupRecord["menus"]) ? (groupRecord["menus"] as unknown[]) : [];
 
-            const res = await $Http.post("/addon/admin/role/menuSave", {
-                roleCode: $Prop.rowData.code,
-                menuPaths: $Data.checkedMenuPaths
+            const menus = groupMenus.filter((menu) => {
+                const menuRecord = menu && typeof menu === "object" ? (menu as Record<string, unknown>) : null;
+                const label = menuRecord && typeof menuRecord["label"] === "string" ? String(menuRecord["label"]) : "";
+                return label.toLowerCase().includes(kw);
             });
 
-            if (res.code === 0) {
-                MessagePlugin.success("保存成功");
-                $Data.visible = false;
-                $Emit("success");
-            } else {
-                MessagePlugin.error(res.msg || "保存失败");
+            return {
+                name: groupRecord && typeof groupRecord["name"] === "string" ? String(groupRecord["name"]) : "",
+                title: groupRecord && typeof groupRecord["title"] === "string" ? String(groupRecord["title"]) : "",
+                menus: menus
+            };
+        })
+        .filter((group) => group.menus.length > 0) as never;
+}
+
+async function onSubmit(context?: PageDialogEventContext): Promise<void> {
+    try {
+        $Data.submitting = true;
+
+        const res = await $Http.post("/addon/admin/role/menuSave", {
+            roleCode: $Prop.rowData.code,
+            menuPaths: $Data.checkedMenuPaths
+        });
+
+        if (res.code === 0) {
+            MessagePlugin.success("保存成功");
+            $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;
     }
-};
+}
 
-$Method.initData();
+initData();
 </script>
 
 <style scoped lang="scss">
@@ -245,7 +237,7 @@ $Method.initData();
 
             .group-header {
                 padding: 12px 16px;
-                background-color: var(--bg-color-hover);
+                background-color: var(--primary-color-light);
                 font-weight: 500;
                 font-size: var(--font-size-sm);
                 color: var(--text-primary);
@@ -255,11 +247,11 @@ $Method.initData();
 
                 &::before {
                     content: "";
-                    width: 8px;
-                    height: 8px;
+                    width: 12px;
+                    height: 12px;
                     border-radius: 50%;
                     background-color: var(--primary-color);
-                    opacity: 0.3;
+                    box-shadow: 0 0 0 2px var(--bg-color-container);
                     flex-shrink: 0;
                 }
             }