befly-admin-ui 1.10.1 → 1.10.2

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

@@ -1,7 +1,17 @@
 <template>
-    <PageDialog v-model="dialogVisible" :title="$Prop.actionType === 'upd' ? '更新角色' : '添加角色'" :confirm-loading="$Data.submitting" @confirm="onSubmit">
+    <PageDialog v-model="$Computed.dialogVisible" :title="$Computed.dialogTitle" :confirm-loading="$Data.submitting" @confirm="$Method.onSubmit">
         <div class="comp-role-edit">
-            <TForm :model="$Data.formData" label-width="120px" label-position="left" :rules="$Data2.formRules" ref="formRef">
+            <TForm
+                :model="$Data.formData"
+                label-width="120px"
+                label-position="left"
+                :rules="$Const.formRules"
+                :ref="
+                    (value) => {
+                        $From.formRef = value;
+                    }
+                "
+            >
                 <TFormItem label="角色名称" prop="name">
                     <TInput v-model="$Data.formData.name" placeholder="请输入角色名称" />
                 </TFormItem>
@@ -39,7 +49,7 @@ import {
     MessagePlugin
 } from "tdesign-vue-next";
 import PageDialog from "befly-admin-ui/components/pageDialog.vue";
-import { $Http } from "@/plugins/http";
+import { $Http } from "@/plugins/http.js";
 import { fieldClear } from "befly-admin-ui/utils/fieldClear";
 
 const $Prop = defineProps({
@@ -59,24 +69,17 @@ const $Prop = defineProps({
 
 const $Emit = defineEmits(["update:modelValue", "success"]);
 
-// 表单引用
-const formRef = ref(null);
-
-const $Computed = {};
-
-const $Data = reactive({
-    submitting: false,
-    formData: {
-        id: 0,
-        name: "",
-        code: "",
-        description: "",
-        sort: 0,
-        state: 1
-    }
-});
-
-const $Data2 = reactive({
+const $Const = {
+    createDefaultFormData() {
+        return {
+            id: 0,
+            name: "",
+            code: "",
+            description: "",
+            sort: 0,
+            state: 1
+        };
+    },
     formRules: {
         name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
         code: [
@@ -85,47 +88,66 @@ const $Data2 = reactive({
         ],
         sort: [{ type: "number", message: "排序必须是数字", trigger: "blur" }]
     }
-});
+};
 
-async function initData() {
-    if ($Prop.actionType === "upd" && $Prop.rowData.id) {
-        $Data.formData = Object.assign({}, $Prop.rowData);
-    }
-}
+const $From = {
+    formRef: null
+};
 
-const dialogVisible = computed({
-    get: () => $Prop.modelValue,
-    set: (value) => {
-        $Emit("update:modelValue", value);
-    }
+const $Data = reactive({
+    submitting: false,
+    formData: $Const.createDefaultFormData()
 });
 
-async function onSubmit(context) {
-    try {
-        const form = formRef.value;
-        if (!form) {
-            MessagePlugin.warning("表单未就绪");
+const $Computed = reactive({
+    dialogVisible: computed({
+        get: () => $Prop.modelValue,
+        set: (value) => {
+            $Emit("update:modelValue", value);
+        }
+    }),
+    dialogTitle: computed(() => ($Prop.actionType === "upd" ? "更新角色" : "添加角色"))
+});
+
+const $Method = {
+    resetFormData() {
+        Object.assign($Data.formData, $Const.createDefaultFormData());
+    },
+    initData() {
+        if ($Prop.actionType === "upd" && $Prop.rowData.id) {
+            Object.assign($Data.formData, $Const.createDefaultFormData(), $Prop.rowData);
             return;
         }
 
-        const valid = await form.validate();
-        if (!valid) return;
+        $Method.resetFormData();
+    },
+    async onSubmit(context) {
+        try {
+            const form = $From.formRef;
+            if (!form) {
+                MessagePlugin.warning("表单未就绪");
+                return;
+            }
+
+            const valid = await form.validate();
+            if (!valid) return;
 
-        $Data.submitting = true;
-        const formData = $Prop.actionType === "add" ? fieldClear($Data.formData, { omitKeys: ["id", "state"] }) : $Data.formData;
-        const res = await $Http($Prop.actionType === "upd" ? "/core/role/update" : "/core/role/insert", formData);
+            $Data.submitting = true;
+            const formData = $Prop.actionType === "add" ? fieldClear($Data.formData, { omitKeys: ["id", "state"] }) : $Data.formData;
+            const res = await $Http($Prop.actionType === "upd" ? "/core/role/update" : "/core/role/insert", formData);
 
-        MessagePlugin.success(res.msg);
-        $Emit("success");
-        if (context && typeof context.close === "function") {
-            context.close();
+            MessagePlugin.success(res.msg);
+            $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>

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,7 +1,7 @@
 <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>
@@ -15,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>
@@ -51,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>
@@ -109,53 +109,51 @@ const $Data = reactive({
     rowData: {}
 });
 
-function onAdd() {
-    onAction("add", {});
-}
-
-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">