befly-admin-ui 1.10.0 → 1.10.2

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

@@ -1,9 +1,9 @@
 <template>
-    <PageDialog v-model="dialogVisible" title="菜单权限" width="900px" :confirm-loading="$Data.submitting" @confirm="onSubmit">
+    <PageDialog v-model="$Computed.dialogVisible" title="菜单权限" width="900px" :confirm-loading="$Data.submitting" @confirm="$Method.onSubmit">
         <div class="comp-role-menu">
             <!-- 搜索框 -->
             <div class="search-box">
-                <TInput v-model="$Data.searchText" placeholder="搜索菜单名称或路径" clearable @change="onSearch">
+                <TInput v-model="$Data.searchText" placeholder="搜索菜单名称或路径" clearable @change="$Method.onSearch">
                     <template #prefix-icon>
                         <SearchIcon />
                     </template>
@@ -38,7 +38,7 @@ import { computed, reactive } from "vue";
 import { CheckboxGroup as TCheckboxGroup, Checkbox as TCheckbox, Input as TInput, MessagePlugin } from "tdesign-vue-next";
 import { SearchIcon } from "tdesign-icons-vue-next";
 import PageDialog from "befly-admin-ui/components/pageDialog.vue";
-import { $Http } from "@/plugins/http";
+import { $Http } from "@/plugins/http.js";
 import { arrayToTree } from "befly-admin-ui/utils/arrayToTree";
 
 const $Prop = defineProps({
@@ -54,13 +54,6 @@ const $Prop = defineProps({
 
 const $Emit = defineEmits(["update:modelValue", "success"]);
 
-const dialogVisible = computed({
-    get: () => $Prop.modelValue,
-    set: (value) => {
-        $Emit("update:modelValue", value);
-    }
-});
-
 const $Data = reactive({
     submitting: false,
     searchText: "",
@@ -69,130 +62,135 @@ const $Data = reactive({
     checkedMenuPaths: []
 });
 
-async function initData() {
-    await Promise.all([apiMenuAll(), apiRoleMenuDetail()]);
-    $Data.filteredMenuGroups = $Data.menuGroups;
-}
-
-async function apiMenuAll() {
-    try {
-        const res = await $Http("/core/menu/all", {}, [""]);
-        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" ? 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 $Computed = reactive({
+    dialogVisible: computed({
+        get: () => $Prop.modelValue,
+        set: (value) => {
+            $Emit("update:modelValue", value);
+        }
+    })
+});
 
-                const children = Array.isArray(node["children"]) ? node["children"] : [];
-                for (const child of children) {
-                    if (child && typeof child === "object") {
-                        walk(child, depth + 1);
+const $Method = {
+    async initData() {
+        await Promise.all([$Method.apiMenuAll(), $Method.apiRoleMenuDetail()]);
+        $Data.filteredMenuGroups = $Data.menuGroups;
+    },
+    async apiMenuAll() {
+        try {
+            const res = await $Http("/core/menu/all", {}, [""]);
+            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" ? 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()
+                        });
                     }
-                }
-            };
 
-            walk(root, 0);
-
-            const groupTitle = rootName.length > 0 ? rootName : rootPath;
-            groups.push({
-                name: rootPath.length > 0 ? rootPath : groupTitle,
-                title: groupTitle.length > 0 ? groupTitle : "未命名菜单",
-                menus: menus
-            });
-        }
+                    const children = Array.isArray(node["children"]) ? node["children"] : [];
+                    for (const child of children) {
+                        if (child && typeof child === "object") {
+                            walk(child, depth + 1);
+                        }
+                    }
+                };
 
-        $Data.menuGroups = groups;
-    } catch (error) {
-        MessagePlugin.error(error.msg || error.message || "加载菜单失败");
-    }
-}
+                walk(root, 0);
 
-async function apiRoleMenuDetail() {
-    if (!$Prop.rowData.id) return;
-
-    try {
-        const res = await $Http(
-            "/core/role/menus",
-            {
-                roleCode: $Prop.rowData.code
-            },
-            [""]
-        );
-
-        $Data.checkedMenuPaths = Array.isArray(res.data) ? res.data : [];
-    } catch (error) {
-        MessagePlugin.error(error.msg || error.message || "加载数据失败");
-    }
-}
+                const groupTitle = rootName.length > 0 ? rootName : rootPath;
+                groups.push({
+                    name: rootPath.length > 0 ? rootPath : groupTitle,
+                    title: groupTitle.length > 0 ? groupTitle : "未命名菜单",
+                    menus: menus
+                });
+            }
 
-function onSearch() {
-    const kw = typeof $Data.searchText === "string" ? $Data.searchText.trim().toLowerCase() : "";
-    if (kw.length === 0) {
-        $Data.filteredMenuGroups = $Data.menuGroups;
-        return;
-    }
+            $Data.menuGroups = groups;
+        } catch (error) {
+            MessagePlugin.error(error.msg || error.message || "加载菜单失败");
+        }
+    },
+    async apiRoleMenuDetail() {
+        if (!$Prop.rowData.id) return;
+
+        try {
+            const res = await $Http(
+                "/core/role/menus",
+                {
+                    roleCode: $Prop.rowData.code
+                },
+                [""]
+            );
+
+            $Data.checkedMenuPaths = Array.isArray(res.data) ? res.data : [];
+        } catch (error) {
+            MessagePlugin.error(error.msg || error.message || "加载数据失败");
+        }
+    },
+    onSearch() {
+        const kw = typeof $Data.searchText === "string" ? $Data.searchText.trim().toLowerCase() : "";
+        if (kw.length === 0) {
+            $Data.filteredMenuGroups = $Data.menuGroups;
+            return;
+        }
 
-    $Data.filteredMenuGroups = $Data.menuGroups
-        .map((group) => {
-            const groupRecord = group && typeof group === "object" ? group : null;
-            const groupMenus = groupRecord && Array.isArray(groupRecord["menus"]) ? groupRecord["menus"] : [];
+        $Data.filteredMenuGroups = $Data.menuGroups
+            .map((group) => {
+                const groupRecord = group && typeof group === "object" ? group : null;
+                const groupMenus = groupRecord && Array.isArray(groupRecord["menus"]) ? groupRecord["menus"] : [];
+                const menus = groupMenus.filter((menu) => {
+                    const menuRecord = menu && typeof menu === "object" ? menu : null;
+                    const label = menuRecord && typeof menuRecord["label"] === "string" ? String(menuRecord["label"]) : "";
+                    return label.toLowerCase().includes(kw);
+                });
+
+                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);
+    },
+    async onSubmit(context) {
+        try {
+            $Data.submitting = true;
 
-            const menus = groupMenus.filter((menu) => {
-                const menuRecord = menu && typeof menu === "object" ? menu : null;
-                const label = menuRecord && typeof menuRecord["label"] === "string" ? String(menuRecord["label"]) : "";
-                return label.toLowerCase().includes(kw);
+            await $Http("/core/role/menuSave", {
+                roleCode: $Prop.rowData.code,
+                menuPaths: $Data.checkedMenuPaths
             });
 
-            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);
-}
-
-async function onSubmit(context) {
-    try {
-        $Data.submitting = true;
-
-        const res = await $Http("/core/role/menuSave", {
-            roleCode: $Prop.rowData.code,
-            menuPaths: $Data.checkedMenuPaths
-        });
-
-        MessagePlugin.success("保存成功");
-        $Emit("success");
-        if (context && typeof context.close === "function") {
-            context.close();
+            MessagePlugin.success("保存成功");
+            $Emit("success");
+            if (context && typeof context.close === "function") {
+                context.close();
+            }
+        } catch (error) {
+            MessagePlugin.error(error.msg || error.message || "保存失败");
+        } finally {
+            $Data.submitting = false;
         }
-    } catch (error) {
-        MessagePlugin.error(error.msg || error.message || "保存失败");
-    } finally {
-        $Data.submitting = false;
     }
-}
+};
 
-initData();
+$Method.initData();
 </script>
 
 <style scoped lang="scss">

package/views/permission/role/index.vue

@@ -1,21 +1,13 @@
 <template>
     <PageTableDetail class="page-role page-table" :columns="$Data.columns" :endpoints="$Data.endpoints" :table-slot-names="['state', 'menuCount', 'apiCount']">
         <template #toolLeft>
-            <TButton theme="primary" @click="onAdd">
+            <TButton theme="primary" @click="$Method.onAdd">
                 <template #icon>
                     <AddIcon />
                 </template>
             </TButton>
         </template>
 
-        <template #toolRight="scope">
-            <TButton shape="circle" @click="onReload(scope.reload)">
-                <template #icon>
-                    <RefreshIcon />
-                </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>
@@ -23,15 +15,15 @@
         </template>
 
         <template #menuCount="{ row }">
-            {{ getPathCount(row.menus) }}
+            {{ $Method.getPathCount(row.menus) }}
         </template>
 
         <template #apiCount="{ row }">
-            {{ getPathCount(row.apis) }}
+            {{ $Method.getPathCount(row.apis) }}
         </template>
 
         <template #operation="{ row, deleteRow }">
-            <TDropdown trigger="click" placement="bottom-right" @click="onDropdownAction($event, row, deleteRow)">
+            <TDropdown trigger="click" placement="bottom-right" @click="$Method.onDropdownAction($event, row, deleteRow)">
                 <TButton theme="primary" size="small">
                     操作
                     <template #suffix><ChevronDownIcon /></template>
@@ -59,13 +51,13 @@
 
         <template #dialogs="scope">
             <!-- 编辑对话框组件 -->
-            <EditDialog v-if="$Data.editVisible" v-model="$Data.editVisible" :action-type="$Data.actionType" :row-data="$Data.rowData" @success="onDialogSuccess(scope.reload)" />
+            <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="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="onDialogSuccess(scope.reload)" />
+            <ApiDialog v-if="$Data.apiVisible" v-model="$Data.apiVisible" :row-data="$Data.rowData" @success="$Method.onDialogSuccess(scope.reload)" />
         </template>
     </PageTableDetail>
 </template>
@@ -73,7 +65,7 @@
 <script setup>
 import { reactive } from "vue";
 import { Button as TButton, Dropdown as TDropdown, DropdownItem as TDropdownItem, DropdownMenu as TDropdownMenu, Tag as TTag } from "tdesign-vue-next";
-import { AddIcon, ChevronDownIcon, CodeIcon, DeleteIcon, EditIcon, RefreshIcon, SettingIcon } from "tdesign-icons-vue-next";
+import { AddIcon, ChevronDownIcon, CodeIcon, DeleteIcon, EditIcon, SettingIcon } from "tdesign-icons-vue-next";
 import EditDialog from "./components/edit.vue";
 import MenuDialog from "./components/menu.vue";
 import ApiDialog from "./components/api.vue";
@@ -94,7 +86,7 @@ const $Data = reactive({
     ]),
     endpoints: {
         list: {
-            path: "/core/role/list",
+            path: "/core/role/select",
             dropValues: [""]
         },
         delete: {
@@ -117,57 +109,51 @@ const $Data = reactive({
     rowData: {}
 });
 
-function onAdd() {
-    onAction("add", {});
-}
-
-function onReload(reload) {
-    reload({ keepSelection: true });
-}
-
-function onDialogSuccess(reload) {
-    reload({ keepSelection: true });
-}
-
-function getPathCount(value) {
-    if (!Array.isArray(value)) return 0;
-    return value.filter((p) => typeof p === "string" && p.trim().length > 0).length;
-}
-
-function onAction(command, rowData) {
-    $Data.actionType = command;
-
-    if (command === "add") {
-        $Data.rowData = {};
-    } else {
-        $Data.rowData = Object.assign({}, rowData);
-    }
+const $Method = {
+    onAdd() {
+        $Method.onAction("add", {});
+    },
+    onDialogSuccess(reload) {
+        reload({ keepSelection: true });
+    },
+    getPathCount(value) {
+        if (!Array.isArray(value)) return 0;
+        return value.filter((path) => typeof path === "string" && path.trim().length > 0).length;
+    },
+    onAction(command, rowData) {
+        $Data.actionType = command;
 
-    if (command === "add" || command === "upd") {
-        $Data.editVisible = true;
-        return;
-    }
+        if (command === "add") {
+            $Data.rowData = {};
+        } else {
+            $Data.rowData = Object.assign({}, rowData);
+        }
 
-    if (command === "menu") {
-        $Data.menuVisible = true;
-        return;
-    }
+        if (command === "add" || command === "upd") {
+            $Data.editVisible = true;
+            return;
+        }
 
-    if (command === "api") {
-        $Data.apiVisible = true;
-    }
-}
+        if (command === "menu") {
+            $Data.menuVisible = true;
+            return;
+        }
 
-function onDropdownAction(data, rowData, deleteRow) {
-    const record = data;
-    const rawValue = record && record["value"] ? record["value"] : "";
-    const cmd = rawValue ? String(rawValue) : "";
-    if (cmd === "del") {
-        deleteRow(rowData);
-        return;
+        if (command === "api") {
+            $Data.apiVisible = true;
+        }
+    },
+    onDropdownAction(data, rowData, deleteRow) {
+        const record = data;
+        const rawValue = record && record["value"] ? record["value"] : "";
+        const cmd = rawValue ? String(rawValue) : "";
+        if (cmd === "del") {
+            deleteRow(rowData);
+            return;
+        }
+        $Method.onAction(cmd, rowData);
     }
-    onAction(cmd, rowData);
-}
+};
 </script>
 
 <style scoped lang="scss">