befly-admin-ui 1.10.0 → 1.10.2

package/views/login_1/index.vue

@@ -20,7 +20,18 @@
                     <h2 class="login-title">欢迎回来</h2>
                 </div>
 
-                <TForm :model="$Data.formData" :rules="$Data.formRules" ref="formRef" class="login-form" :show-message="false" label-width="0">
+                <TForm
+                    :model="$Data.formData"
+                    :rules="$Const.formRules"
+                    :ref="
+                        (value) => {
+                            $From.formRef = value;
+                        }
+                    "
+                    class="login-form"
+                    :show-message="false"
+                    label-width="0"
+                >
                     <TFormItem prop="account">
                         <TInputAdornment>
                             <template #prepend>
@@ -30,7 +41,7 @@
                                     <TOption value="phone" label="手机号" />
                                 </TSelect>
                             </template>
-                            <TInput v-model="$Data.formData.account" :placeholder="$Data.formData.loginType === 'username' ? '请输入用户名' : $Data.formData.loginType === 'email' ? '请输入邮箱' : '请输入手机号'" size="large" clearable @enter="apiLogin">
+                            <TInput v-model="$Data.formData.account" :placeholder="$Data.formData.loginType === 'username' ? '请输入用户名' : $Data.formData.loginType === 'email' ? '请输入邮箱' : '请输入手机号'" size="large" clearable @enter="$Method.apiLogin">
                                 <template #prefix-icon>
                                     <UserIcon />
                                 </template>
@@ -39,7 +50,7 @@
                     </TFormItem>
 
                     <TFormItem prop="password">
-                        <TInput v-model="$Data.formData.password" type="password" placeholder="密码" size="large" clearable @enter="apiLogin">
+                        <TInput v-model="$Data.formData.password" type="password" placeholder="密码" size="large" clearable @enter="$Method.apiLogin">
                             <template #prefix-icon>
                                 <LockOnIcon />
                             </template>
@@ -51,7 +62,7 @@
                         <a href="#" class="link-text">忘记密码？</a>
                     </div>
 
-                    <TButton theme="primary" class="login-btn" size="large" block :loading="$Data.loading" @click="apiLogin">登录</TButton>
+                    <TButton theme="primary" class="login-btn" size="large" block :loading="$Data.loading" @click="$Method.apiLogin">登录</TButton>
                 </TForm>
 
                 <div class="login-footer">
@@ -63,7 +74,7 @@
 </template>
 
 <script setup>
-import { reactive, ref } from "vue";
+import { reactive } from "vue";
 import { useRouter } from "vue-router";
 import { Form as TForm, FormItem as TFormItem, Input as TInput, Button as TButton, Checkbox as TCheckbox, InputAdornment as TInputAdornment, Select as TSelect, Option as TOption, MessagePlugin } from "tdesign-vue-next";
 import { LockOnIcon, UserIcon } from "tdesign-icons-vue-next";
@@ -74,16 +85,21 @@ import { $Store } from "@/plugins/store.js";
 
 const router = useRouter();
 
-const formRef = ref(null);
+const $Const = {
+    formRules: {
+        account: [{ required: true, message: "请输入账号", trigger: "blur" }],
+        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
+    }
+};
+
+const $From = {
+    formRef: null
+};
 
 // 数据定义
 const $Data = reactive({
     loading: false,
     rememberMe: false,
-    formRules: {
-        account: [{ required: true, message: "请输入账号", trigger: "blur" }],
-        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
-    },
     formData: {
         loginType: "username",
         account: "",
@@ -91,36 +107,38 @@ const $Data = reactive({
     }
 });
 
-async function apiLogin() {
-    try {
-        if (formRef.value === null) {
-            MessagePlugin.error("表单未就绪");
-            return;
-        }
+const $Method = {
+    async apiLogin() {
+        try {
+            if ($From.formRef === null) {
+                MessagePlugin.error("表单未就绪");
+                return;
+            }
 
-        await formRef.value.validate();
+            await $From.formRef.validate();
 
-        $Data.loading = true;
+            $Data.loading = true;
 
-        const hashedPassword = await hashPassword($Data.formData.password);
+            const hashedPassword = await hashPassword($Data.formData.password);
 
-        const res = await $Http("/core/auth/login", {
-            loginType: $Data.formData.loginType,
-            account: $Data.formData.account,
-            password: hashedPassword
-        });
+            const res = await $Http("/core/auth/login", {
+                loginType: $Data.formData.loginType,
+                account: $Data.formData.account,
+                password: hashedPassword
+            });
 
-        $Store.local.set($Config.tokenName, res.data.token);
+            $Store.local.set($Config.tokenName, res.data.token);
 
-        MessagePlugin.success(res.msg || "登录成功");
+            MessagePlugin.success(res.msg || "登录成功");
 
-        await router.push($Config.homePath);
-    } catch (error) {
-        MessagePlugin.error(error.msg || error.message || "登录失败");
-    } finally {
-        $Data.loading = false;
+            await router.push($Config.homePath);
+        } catch (error) {
+            MessagePlugin.error(error.msg || error.message || "登录失败");
+        } finally {
+            $Data.loading = false;
+        }
     }
-}
+};
 </script>
 
 <style scoped lang="scss">

package/views/people/admin/components/edit.vue

@@ -38,7 +38,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";
 import { hashPassword } from "befly-admin-ui/utils/hashPassword";
 

package/views/people/admin/index.vue

@@ -1,7 +1,7 @@
 <template>
     <PageTableDetail class="page-admin" :columns="$Data.columns" :endpoints="$Data.endpoints">
         <template #toolLeft>
-            <TButton theme="primary" @click="onAdd">
+            <TButton theme="primary" @click="$Method.onAdd">
                 <template #icon>
                     <AddIcon />
                 </template>
@@ -15,7 +15,7 @@
         </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>
@@ -34,7 +34,7 @@
         </template>
 
         <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)" />
         </template>
     </PageTableDetail>
 </template>
@@ -58,7 +58,7 @@ const $Data = reactive({
     ]),
     endpoints: {
         list: {
-            path: "/core/admin/list",
+            path: "/core/admin/select",
             dropValues: [""]
         },
         delete: {
@@ -76,32 +76,31 @@ const $Data = reactive({
     rowData: {}
 });
 
-function onAdd() {
-    onAction("add", {});
-}
-
-function onDialogSuccess(reload) {
-    reload({ keepSelection: true });
-}
-
-function onAction(command, rowData) {
-    $Data.actionType = command;
-    $Data.rowData = rowData;
-    if (command === "add" || command === "upd") {
-        $Data.editVisible = true;
-    }
-}
-
-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;
+const $Method = {
+    onAdd() {
+        $Method.onAction("add", {});
+    },
+    onDialogSuccess(reload) {
+        reload({ keepSelection: true });
+    },
+    onAction(command, rowData) {
+        $Data.actionType = command;
+        $Data.rowData = rowData;
+        if (command === "add" || command === "upd") {
+            $Data.editVisible = 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">

package/views/permission/api/index.vue

@@ -2,25 +2,18 @@
     <div class="page-api page-table">
         <div class="main-tool">
             <div class="left">
-                <TInput v-model="$Data.searchKeyword" placeholder="搜索接口名称或路径" clearable style="width: 300px" @enter="handleSearch" @clear="handleSearch">
+                <TInput v-model="$Data.searchKeyword" placeholder="搜索接口名称或路径" clearable style="width: 300px" @enter="$Method.handleSearch" @clear="$Method.handleSearch">
                     <template #suffix-icon>
                         <SearchIcon />
                     </template>
                 </TInput>
                 <span style="margin-left: 16px; color: var(--text-secondary); font-size: 13px">共 {{ $Data.allData.length }} 个接口</span>
             </div>
-            <div class="right">
-                <TButton shape="circle" @click="handleRefresh">
-                    <template #icon>
-                        <RefreshIcon />
-                    </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(--layout-gap) * 2)" active-row-type="single" @active-change="onActiveChange">
+                <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(--layout-gap) * 2)" active-row-type="single" @active-change="$Method.onActiveChange">
                     <template #method="{ row }">
                         <TTag v-if="row.method === 'GET'" shape="round" theme="success" variant="light-outline">GET</TTag>
                         <TTag v-else-if="row.method === 'POST'" shape="round" theme="primary" variant="light-outline">POST</TTag>
@@ -60,10 +53,10 @@
 
 <script setup>
 import { reactive } from "vue";
-import { Button as TButton, Table as TTable, Tag as TTag, Input as TInput, MessagePlugin } from "tdesign-vue-next";
-import { RefreshIcon, SearchIcon } from "tdesign-icons-vue-next";
+import { Table as TTable, Tag as TTag, Input as TInput, MessagePlugin } from "tdesign-vue-next";
+import { SearchIcon } from "tdesign-icons-vue-next";
 import DetailPanel from "befly-admin-ui/components/detailPanel.vue";
-import { $Http } from "@/plugins/http";
+import { $Http } from "@/plugins/http.js";
 import { withDefaultColumns } from "befly-admin-ui/utils/withDefaultColumns";
 
 // 响应式数据
@@ -83,56 +76,51 @@ const $Data = reactive({
     activeRowKeys: []
 });
 
-async function initData() {
-    await loadApiAll();
-}
-
-async function loadApiAll() {
-    $Data.loading = true;
-    try {
-        const res = await $Http("/core/api/all", {}, [""]);
-        const list = res.data?.lists || [];
-        $Data.allData = list;
-        $Data.tableData = list;
+const $Method = {
+    async initData() {
+        await $Method.loadApiAll();
+    },
+    async loadApiAll() {
+        $Data.loading = true;
+        try {
+            const res = await $Http("/core/api/all", {}, [""]);
+            const list = res.data?.lists || [];
+            $Data.allData = list;
+            $Data.tableData = list;
 
-        if ($Data.tableData.length > 0) {
-            $Data.currentRow = $Data.tableData[0];
-            $Data.activeRowKeys = [$Data.tableData[0].id];
-        } else {
-            $Data.currentRow = null;
-            $Data.activeRowKeys = [];
+            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(error.msg || error.message || "加载数据失败");
+        } finally {
+            $Data.loading = false;
+        }
+    },
+    handleSearch() {
+        if (!$Data.searchKeyword) {
+            $Data.tableData = $Data.allData;
+            return;
+        }
+        const keyword = String($Data.searchKeyword).toLowerCase();
+        $Data.tableData = $Data.allData.filter((item) => item.name?.toLowerCase().includes(keyword) || item.path?.toLowerCase().includes(keyword));
+    },
+    onActiveChange(value, context) {
+        if (value.length === 0 && $Data.activeRowKeys.length > 0) {
+            return;
+        }
+        $Data.activeRowKeys = value;
+        if (context.activeRowList && context.activeRowList.length > 0) {
+            $Data.currentRow = context.activeRowList[0].row;
         }
-    } catch (error) {
-        MessagePlugin.error(error.msg || error.message || "加载数据失败");
-    } finally {
-        $Data.loading = false;
-    }
-}
-
-function handleRefresh() {
-    loadApiAll();
-}
-
-function handleSearch() {
-    if (!$Data.searchKeyword) {
-        $Data.tableData = $Data.allData;
-        return;
-    }
-    const keyword = String($Data.searchKeyword).toLowerCase();
-    $Data.tableData = $Data.allData.filter((item) => item.name?.toLowerCase().includes(keyword) || item.path?.toLowerCase().includes(keyword));
-}
-
-function onActiveChange(value, context) {
-    if (value.length === 0 && $Data.activeRowKeys.length > 0) {
-        return;
-    }
-    $Data.activeRowKeys = value;
-    if (context.activeRowList && context.activeRowList.length > 0) {
-        $Data.currentRow = context.activeRowList[0].row;
     }
-}
+};
 
-initData();
+$Method.initData();
 </script>
 
 <style scoped lang="scss">

package/views/permission/menu/index.vue

@@ -1,19 +1,18 @@
 <template>
     <div class="page-menu page-table">
-        <div class="main-tool">
-            <div class="left"></div>
-            <div class="right">
-                <TButton shape="circle" @click="handleRefresh">
-                    <template #icon>
-                        <RefreshIcon />
-                    </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(--layout-gap) * 2)" active-row-type="single" :tree="{ childrenKey: 'children', treeNodeColumnIndex: 0, defaultExpandAll: true }" @active-change="onActiveChange">
+                <TTable
+                    :data="$Data.tableData"
+                    :columns="$Data.columns"
+                    :loading="$Data.loading"
+                    :active-row-keys="$Data.activeRowKeys"
+                    row-key="id"
+                    height="calc(100vh - var(--layout-gap) * 2)"
+                    active-row-type="single"
+                    :tree="{ childrenKey: 'children', treeNodeColumnIndex: 0, defaultExpandAll: true }"
+                    @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>
@@ -31,10 +30,9 @@
 
 <script setup>
 import { reactive } from "vue";
-import { Button as TButton, Table as TTable, Tag as TTag, MessagePlugin } from "tdesign-vue-next";
-import { RefreshIcon } from "tdesign-icons-vue-next";
+import { Table as TTable, Tag as TTag, MessagePlugin } from "tdesign-vue-next";
 import DetailPanel from "befly-admin-ui/components/detailPanel.vue";
-import { $Http } from "@/plugins/http";
+import { $Http } from "@/plugins/http.js";
 import { arrayToTree } from "befly-admin-ui/utils/arrayToTree";
 import { withDefaultColumns } from "befly-admin-ui/utils/withDefaultColumns";
 
@@ -53,49 +51,45 @@ const $Data = reactive({
     activeRowKeys: []
 });
 
-async function initData() {
-    await apiMenuList();
-}
-
-async function apiMenuList() {
-    $Data.loading = true;
-    try {
-        const res = await $Http("/core/menu/all", {}, [""]);
-        const lists = Array.isArray(res?.data?.lists) ? res.data.lists : [];
+const $Method = {
+    async initData() {
+        await $Method.apiMenuList();
+    },
+    async apiMenuList() {
+        $Data.loading = true;
+        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 treeResult = arrayToTree(lists, "path", "parentPath", "children", "sort");
 
-        $Data.tableData = treeResult.tree;
+            $Data.tableData = treeResult.tree;
 
-        if ($Data.tableData.length > 0) {
-            $Data.currentRow = $Data.tableData[0];
-            $Data.activeRowKeys = [$Data.tableData[0].id];
-        } else {
-            $Data.currentRow = null;
-            $Data.activeRowKeys = [];
+            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(error.msg || error.message || "加载数据失败");
+        } finally {
+            $Data.loading = false;
+        }
+    },
+    onActiveChange(value, context) {
+        if (value.length === 0 && $Data.activeRowKeys.length > 0) {
+            return;
+        }
+        $Data.activeRowKeys = value;
+        if (context.activeRowList && context.activeRowList.length > 0) {
+            $Data.currentRow = context.activeRowList[0].row;
         }
-    } catch (error) {
-        MessagePlugin.error(error.msg || error.message || "加载数据失败");
-    } finally {
-        $Data.loading = false;
-    }
-}
-
-function handleRefresh() {
-    apiMenuList();
-}
-
-function onActiveChange(value, context) {
-    if (value.length === 0 && $Data.activeRowKeys.length > 0) {
-        return;
-    }
-    $Data.activeRowKeys = value;
-    if (context.activeRowList && context.activeRowList.length > 0) {
-        $Data.currentRow = context.activeRowList[0].row;
     }
-}
+};
 
-initData();
+$Method.initData();
 </script>
 
 <style scoped lang="scss">