befly-admin-ui 1.10.0 → 1.10.2

package/views/permission/role/components/api.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-api">
             <!-- 搜索框 -->
             <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>
@@ -37,7 +37,7 @@ import { computed, reactive } from "vue";
 import { Input as TInput, CheckboxGroup as TCheckboxGroup, Checkbox as TCheckbox, 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";
 
 const $Prop = defineProps({
     modelValue: {
@@ -52,13 +52,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,
     apiData: [],
@@ -67,164 +60,170 @@ const $Data = reactive({
     checkedApiPaths: []
 });
 
-async function initData() {
-    await Promise.all([apiApiAll(), apiRoleApiDetail()]);
+const $Computed = reactive({
+    dialogVisible: computed({
+        get: () => $Prop.modelValue,
+        set: (value) => {
+            $Emit("update:modelValue", value);
+        }
+    })
+});
+
+const $Method = {
+    async initData() {
+        await Promise.all([$Method.apiApiAll(), $Method.apiRoleApiDetail()]);
 
-    const merged = new Set();
-    const current = Array.isArray($Data.checkedApiPaths) ? $Data.checkedApiPaths : [];
-    for (const p of current) {
-        if (typeof p === "string") {
-            merged.add(p);
+        const merged = new Set();
+        const current = Array.isArray($Data.checkedApiPaths) ? $Data.checkedApiPaths : [];
+        for (const path of current) {
+            if (typeof path === "string") {
+                merged.add(path);
+            }
         }
-    }
 
-    const groups = Array.isArray($Data.apiData) ? $Data.apiData : [];
-    for (const group of groups) {
-        const groupRecord = group && typeof group === "object" ? group : null;
-        const apis = groupRecord && Array.isArray(groupRecord["apis"]) ? groupRecord["apis"] : [];
-        for (const api of apis) {
-            const apiRecord = api && typeof api === "object" ? api : null;
-            const authValue = apiRecord ? apiRecord["auth"] : undefined;
-            const isPublic = authValue === 0 || authValue === "0" || authValue === false;
-            const value = apiRecord && typeof apiRecord["value"] === "string" ? String(apiRecord["value"]) : "";
-            if (isPublic && value) {
-                merged.add(value);
+        const groups = Array.isArray($Data.apiData) ? $Data.apiData : [];
+        for (const group of groups) {
+            const groupRecord = group && typeof group === "object" ? group : null;
+            const apis = groupRecord && Array.isArray(groupRecord["apis"]) ? groupRecord["apis"] : [];
+            for (const api of apis) {
+                const apiRecord = api && typeof api === "object" ? api : null;
+                const authValue = apiRecord ? apiRecord["auth"] : undefined;
+                const isPublic = authValue === 0 || authValue === "0" || authValue === false;
+                const value = apiRecord && typeof apiRecord["value"] === "string" ? String(apiRecord["value"]) : "";
+                if (isPublic && value) {
+                    merged.add(value);
+                }
             }
         }
-    }
 
-    $Data.checkedApiPaths = Array.from(merged);
-    $Data.filteredApiData = $Data.apiData;
-}
+        $Data.checkedApiPaths = Array.from(merged);
+        $Data.filteredApiData = $Data.apiData;
+    },
+    async apiApiAll() {
+        try {
+            const res = await $Http("/core/api/all", {}, [""]);
+
+            const apiMap = new Map();
+            const resRecord = res && typeof res === "object" ? res : null;
+            const resData = resRecord && resRecord["data"] && typeof resRecord["data"] === "object" ? resRecord["data"] : null;
+            const lists = resData && Array.isArray(resData["lists"]) ? resData["lists"] : [];
+            for (const api of lists) {
+                const apiRecord = api && typeof api === "object" ? api : null;
+                const apiPath = apiRecord && typeof apiRecord["path"] === "string" ? String(apiRecord["path"]) : "";
+                if (!apiPath) {
+                    continue;
+                }
 
-async function apiApiAll() {
-    try {
-        const res = await $Http("/core/api/all", {}, [""]);
+                const parentPath = apiRecord && typeof apiRecord["parentPath"] === "string" ? String(apiRecord["parentPath"]) : "";
+                const groupKey = parentPath || "(未分组)";
 
-        const apiMap = new Map();
+                if (!apiMap.has(groupKey)) {
+                    apiMap.set(groupKey, {
+                        name: groupKey,
+                        title: groupKey,
+                        apis: []
+                    });
+                }
 
-        const resRecord = res && typeof res === "object" ? res : null;
-        const resData = resRecord && resRecord["data"] && typeof resRecord["data"] === "object" ? resRecord["data"] : null;
-        const lists = resData && Array.isArray(resData["lists"]) ? resData["lists"] : [];
-        for (const api of lists) {
-            const apiRecord = api && typeof api === "object" ? api : null;
-            const apiPath = apiRecord && typeof apiRecord["path"] === "string" ? String(apiRecord["path"]) : "";
-            if (!apiPath) {
-                continue;
+                apiMap.get(groupKey)?.apis.push({
+                    value: apiPath,
+                    name: (apiRecord && typeof apiRecord["name"] === "string" ? String(apiRecord["name"]) : "") || apiPath,
+                    path: apiPath,
+                    label: `${(apiRecord && typeof apiRecord["name"] === "string" ? String(apiRecord["name"]) : "") || ""} ${apiPath ? `(${apiPath})` : ""}`.trim(),
+                    description: apiRecord ? apiRecord["description"] : undefined,
+                    auth: apiRecord ? apiRecord["auth"] : undefined,
+                    parentPath: parentPath
+                });
             }
 
-            const parentPath = apiRecord && typeof apiRecord["parentPath"] === "string" ? String(apiRecord["parentPath"]) : "";
-            const groupKey = parentPath || "(未分组)";
-
-            if (!apiMap.has(groupKey)) {
-                apiMap.set(groupKey, {
-                    name: groupKey,
-                    title: groupKey,
-                    apis: []
+            const groups = Array.from(apiMap.values());
+            for (const group of groups) {
+                group.apis.sort((a, b) => {
+                    const ap = typeof a.path === "string" ? a.path : "";
+                    const bp = typeof b.path === "string" ? b.path : "";
+                    return ap.localeCompare(bp);
                 });
             }
 
-            apiMap.get(groupKey)?.apis.push({
-                value: apiPath,
-                name: (apiRecord && typeof apiRecord["name"] === "string" ? String(apiRecord["name"]) : "") || apiPath,
-                path: apiPath,
-                label: `${(apiRecord && typeof apiRecord["name"] === "string" ? String(apiRecord["name"]) : "") || ""} ${apiPath ? `(${apiPath})` : ""}`.trim(),
-                description: apiRecord ? apiRecord["description"] : undefined,
-                auth: apiRecord ? apiRecord["auth"] : undefined,
-                parentPath: parentPath
+            groups.sort((a, b) => {
+                const at = typeof a.title === "string" ? a.title : "";
+                const bt = typeof b.title === "string" ? b.title : "";
+                return at.localeCompare(bt);
             });
-        }
 
-        const groups = Array.from(apiMap.values());
-        for (const group of groups) {
-            group.apis.sort((a, b) => {
-                const ap = typeof a.path === "string" ? a.path : "";
-                const bp = typeof b.path === "string" ? b.path : "";
-                return ap.localeCompare(bp);
-            });
+            $Data.apiData = groups;
+        } catch (error) {
+            MessagePlugin.error(error.msg || error.message || "加载接口失败");
+        }
+    },
+    async apiRoleApiDetail() {
+        if (!$Prop.rowData.id) return;
+
+        try {
+            const res = await $Http(
+                "/core/role/apis",
+                {
+                    roleCode: $Prop.rowData.code
+                },
+                [""]
+            );
+
+            const resRecord = res && typeof res === "object" ? res : null;
+            const resData = resRecord && resRecord["data"] && typeof resRecord["data"] === "object" ? resRecord["data"] : null;
+            $Data.checkedApiPaths = resData && Array.isArray(resData["apiPaths"]) ? resData["apiPaths"] : [];
+        } catch (error) {
+            MessagePlugin.error(error.msg || error.message || "加载数据失败");
+        }
+    },
+    onSearch() {
+        if (!$Data.searchText) {
+            $Data.filteredApiData = $Data.apiData;
+            return;
         }
 
-        groups.sort((a, b) => {
-            const at = typeof a.title === "string" ? a.title : "";
-            const bt = typeof b.title === "string" ? b.title : "";
-            return at.localeCompare(bt);
-        });
-
-        $Data.apiData = groups;
-    } catch (error) {
-        MessagePlugin.error(error.msg || error.message || "加载接口失败");
-    }
-}
-
-async function apiRoleApiDetail() {
-    if (!$Prop.rowData.id) return;
-
-    try {
-        const res = await $Http(
-            "/core/role/apis",
-            {
-                roleCode: $Prop.rowData.code
-            },
-            [""]
-        );
-
-        const resRecord = res && typeof res === "object" ? res : null;
-        const resData = resRecord && resRecord["data"] && typeof resRecord["data"] === "object" ? resRecord["data"] : null;
-        $Data.checkedApiPaths = resData && Array.isArray(resData["apiPaths"]) ? resData["apiPaths"] : [];
-    } catch (error) {
-        MessagePlugin.error(error.msg || error.message || "加载数据失败");
-    }
-}
-
-function onSearch() {
-    if (!$Data.searchText) {
-        $Data.filteredApiData = $Data.apiData;
-        return;
-    }
+        const searchLower = String($Data.searchText).toLowerCase();
+        $Data.filteredApiData = $Data.apiData
+            .map((group) => {
+                const groupRecord = group && typeof group === "object" ? group : null;
+                const groupApis = groupRecord && Array.isArray(groupRecord["apis"]) ? groupRecord["apis"] : [];
+                const apis = groupApis.filter((api) => {
+                    const apiRecord = api && typeof api === "object" ? api : null;
+                    const label = apiRecord && typeof apiRecord["label"] === "string" ? String(apiRecord["label"]) : "";
+                    const name = apiRecord && typeof apiRecord["name"] === "string" ? String(apiRecord["name"]) : "";
+                    const path = apiRecord && typeof apiRecord["path"] === "string" ? String(apiRecord["path"]) : "";
+                    return label.toLowerCase().includes(searchLower) || name.toLowerCase().includes(searchLower) || path.toLowerCase().includes(searchLower);
+                });
+                return {
+                    name: groupRecord && typeof groupRecord["name"] === "string" ? String(groupRecord["name"]) : "",
+                    title: groupRecord && typeof groupRecord["title"] === "string" ? String(groupRecord["title"]) : "",
+                    apis: apis
+                };
+            })
+            .filter((group) => group.apis.length > 0);
+    },
+    async onSubmit(context) {
+        try {
+            $Data.submitting = true;
 
-    const searchLower = String($Data.searchText).toLowerCase();
-    $Data.filteredApiData = $Data.apiData
-        .map((group) => {
-            const groupRecord = group && typeof group === "object" ? group : null;
-            const groupApis = groupRecord && Array.isArray(groupRecord["apis"]) ? groupRecord["apis"] : [];
-            const apis = groupApis.filter((api) => {
-                const apiRecord = api && typeof api === "object" ? api : null;
-                const label = apiRecord && typeof apiRecord["label"] === "string" ? String(apiRecord["label"]) : "";
-                const name = apiRecord && typeof apiRecord["name"] === "string" ? String(apiRecord["name"]) : "";
-                const path = apiRecord && typeof apiRecord["path"] === "string" ? String(apiRecord["path"]) : "";
-                return label.toLowerCase().includes(searchLower) || name.toLowerCase().includes(searchLower) || path.toLowerCase().includes(searchLower);
+            await $Http("/core/role/apiSave", {
+                roleCode: $Prop.rowData.code,
+                apiPaths: $Data.checkedApiPaths
             });
-            return {
-                name: groupRecord && typeof groupRecord["name"] === "string" ? String(groupRecord["name"]) : "",
-                title: groupRecord && typeof groupRecord["title"] === "string" ? String(groupRecord["title"]) : "",
-                apis: apis
-            };
-        })
-        .filter((group) => group.apis.length > 0);
-}
-
-async function onSubmit(context) {
-    try {
-        $Data.submitting = true;
-
-        const res = await $Http("/core/role/apiSave", {
-            roleCode: $Prop.rowData.code,
-            apiPaths: $Data.checkedApiPaths
-        });
 
-        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/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>