befly-admin-ui 1.10.1 → 1.10.5

package/views/config/dict/components/edit.vue

@@ -1,6 +1,15 @@
 <template>
-    <PageDialog v-model="visible" :title="actionType === 'add' ? '添加字典项' : '编辑字典项'" @confirm="handleSubmit">
-        <TForm :data="$Data.formData" :rules="$Data.rules" label-width="100px" ref="formRef">
+    <PageDialog v-model="$Computed.visible" :title="$Computed.dialogTitle" @confirm="$Method.handleSubmit">
+        <TForm
+            :data="$Data.formData"
+            :rules="$Const.formRules"
+            label-width="100px"
+            :ref="
+                (value) => {
+                    $From.formRef = value;
+                }
+            "
+        >
             <TFormItem label="字典类型" name="typeCode">
                 <TSelect v-model="$Data.formData.typeCode" placeholder="请选择字典类型" filterable>
                     <TOption v-for="item in typeList" :key="item.code" :value="item.code" :label="item.name" />
@@ -23,13 +32,13 @@
 </template>
 
 <script setup>
-import { computed, reactive, ref } from "vue";
+import { computed, reactive } from "vue";
 
 import { Form as TForm, FormItem as TFormItem, Input as TInput, Select as TSelect, Option as TOption, Textarea as TTextarea, InputNumber as TInputNumber, 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";
 
-const props = defineProps({
+const $Prop = defineProps({
     modelValue: Boolean,
     actionType: String,
     rowData: Object,
@@ -38,72 +47,86 @@ const props = defineProps({
 
 const $Emit = defineEmits(["update:modelValue", "success"]);
 
-const visible = computed({
-    get: () => props.modelValue,
-    set: (val) => $Emit("update:modelValue", val)
-});
-
-const formRef = ref(null);
-
-const $Data = reactive({
-    formData: {
-        typeCode: "",
-        key: "",
-        label: "",
-        sort: 0,
-        remark: ""
+const $Const = {
+    createDefaultFormData() {
+        return {
+            typeCode: "",
+            key: "",
+            label: "",
+            sort: 0,
+            remark: ""
+        };
     },
-    rules: {
+    formRules: {
         typeCode: [{ required: true, message: "请选择字典类型" }],
         key: [{ required: true, message: "请输入键值" }],
         label: [{ required: true, message: "请输入标签" }]
     }
+};
+
+const $From = {
+    formRef: null
+};
+
+const $Data = reactive({
+    formData: $Const.createDefaultFormData()
 });
 
-async function handleSubmit() {
-    try {
-        const form = formRef.value;
-        if (!form) {
-            MessagePlugin.warning("表单未就绪");
+const $Computed = reactive({
+    visible: computed({
+        get: () => $Prop.modelValue,
+        set: (value) => $Emit("update:modelValue", value)
+    }),
+    dialogTitle: computed(() => ($Prop.actionType === "add" ? "添加字典项" : "编辑字典项"))
+});
+
+const $Method = {
+    resetFormData() {
+        Object.assign($Data.formData, $Const.createDefaultFormData());
+    },
+    initData() {
+        if ($Prop.actionType === "upd" && $Prop.rowData) {
+            $Data.formData.typeCode = $Prop.rowData.typeCode || "";
+            $Data.formData.key = $Prop.rowData.key || "";
+            $Data.formData.label = $Prop.rowData.label || "";
+            $Data.formData.sort = $Prop.rowData.sort || 0;
+            $Data.formData.remark = $Prop.rowData.remark || "";
             return;
         }
 
-        const valid = await form.validate();
-        if (valid !== true) return;
-        const apiUrl = props.actionType === "add" ? "/core/dict/insert" : "/core/dict/update";
-        const params = {
-            typeCode: $Data.formData.typeCode,
-            key: $Data.formData.key,
-            label: $Data.formData.label,
-            sort: $Data.formData.sort,
-            remark: $Data.formData.remark
-        };
-        if (props.actionType === "upd" && props.rowData) {
-            const row = props.rowData;
-            params["id"] = row["id"];
-        }
+        $Method.resetFormData();
+    },
+    async handleSubmit() {
+        try {
+            const form = $From.formRef;
+            if (!form) {
+                MessagePlugin.warning("表单未就绪");
+                return;
+            }
 
-        await $Http(apiUrl, params);
-        MessagePlugin.success(props.actionType === "add" ? "添加成功" : "更新成功");
-        visible.value = false;
-        $Emit("success");
-    } catch (error) {
-        MessagePlugin.error(error.msg || error.message || "操作失败");
+            const valid = await form.validate();
+            if (valid !== true) return;
+            const apiUrl = $Prop.actionType === "add" ? "/core/dict/insert" : "/core/dict/update";
+            const params = {
+                typeCode: $Data.formData.typeCode,
+                key: $Data.formData.key,
+                label: $Data.formData.label,
+                sort: $Data.formData.sort,
+                remark: $Data.formData.remark
+            };
+            if ($Prop.actionType === "upd" && $Prop.rowData) {
+                params["id"] = $Prop.rowData.id;
+            }
+
+            await $Http(apiUrl, params);
+            MessagePlugin.success($Prop.actionType === "add" ? "添加成功" : "更新成功");
+            $Computed.visible = false;
+            $Emit("success");
+        } catch (error) {
+            MessagePlugin.error(error.msg || error.message || "操作失败");
+        }
     }
-}
+};
 
-// 该组件由父组件 v-if 控制挂载/卸载，因此无需 watch：创建时初始化一次即可
-if (props.actionType === "upd" && props.rowData) {
-    $Data.formData.typeCode = props.rowData.typeCode || "";
-    $Data.formData.key = props.rowData.key || "";
-    $Data.formData.label = props.rowData.label || "";
-    $Data.formData.sort = props.rowData.sort || 0;
-    $Data.formData.remark = props.rowData.remark || "";
-} else {
-    $Data.formData.typeCode = "";
-    $Data.formData.key = "";
-    $Data.formData.label = "";
-    $Data.formData.sort = 0;
-    $Data.formData.remark = "";
-}
+$Method.initData();
 </script>

package/views/config/dict/index.vue

@@ -1,7 +1,7 @@
 <template>
     <PageTableDetail class="page-dict page-table" :columns="$Data.columns" :endpoints="$Data.endpoints">
         <template #toolLeft>
-            <TButton theme="primary" @click="onAdd">
+            <TButton theme="primary" @click="$Method.onAdd">
                 <template #icon>
                     <AddIcon />
                 </template>
@@ -9,10 +9,10 @@
         </template>
 
         <template #toolRight="scope">
-            <TSelect v-model="$Data.searchTypeCode" placeholder="请选择字典类型" clearable filterable @change="handleSearch(scope.reload)">
+            <TSelect v-model="$Data.searchTypeCode" placeholder="请选择字典类型" clearable filterable @change="$Method.handleSearch(scope.reload)">
                 <TOption v-for="item in $Data.typeList" :key="item.code" :value="item.code" :label="item.name" />
             </TSelect>
-            <TInput v-model="$Data.searchKeyword" placeholder="搜索键/标签" clearable @enter="handleSearch(scope.reload)" @clear="handleSearch(scope.reload)">
+            <TInput v-model="$Data.searchKeyword" placeholder="搜索键/标签" clearable @enter="$Method.handleSearch(scope.reload)" @clear="$Method.handleSearch(scope.reload)">
                 <template #suffix-icon>
                     <SearchIcon />
                 </template>
@@ -20,7 +20,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>
@@ -39,7 +39,7 @@
         </template>
 
         <template #dialogs="scope">
-            <EditDialog v-if="$Data.editVisible" v-model="$Data.editVisible" :action-type="$Data.actionType" :row-data="$Data.rowData" :type-list="$Data.typeList" @success="onDialogSuccess(scope.reload)" />
+            <EditDialog v-if="$Data.editVisible" v-model="$Data.editVisible" :action-type="$Data.actionType" :row-data="$Data.rowData" :type-list="$Data.typeList" @success="$Method.onDialogSuccess(scope.reload)" />
         </template>
     </PageTableDetail>
 </template>
@@ -50,7 +50,7 @@ import { onMounted, reactive } from "vue";
 import { Button as TButton, Dropdown as TDropdown, DropdownItem as TDropdownItem, DropdownMenu as TDropdownMenu, Input as TInput, Option as TOption, Select as TSelect, MessagePlugin } from "tdesign-vue-next";
 import { AddIcon, ChevronDownIcon, DeleteIcon, EditIcon, SearchIcon } from "tdesign-icons-vue-next";
 import EditDialog from "./components/edit.vue";
-import { $Http } from "@/plugins/http";
+import { $Http } from "@/plugins/http.js";
 import PageTableDetail from "befly-admin-ui/components/pageTableDetail.vue";
 import { withDefaultColumns } from "befly-admin-ui/utils/withDefaultColumns";
 
@@ -96,59 +96,55 @@ const $Data = reactive({
     rowData: {}
 });
 
-function onAdd() {
-    onAction("add", {});
-}
-
-function onDialogSuccess(reload) {
-    reload({ keepSelection: true });
-}
-
-async function initData() {
-    await apiDictTypeAll();
-}
-
-async function apiDictTypeAll() {
-    try {
-        const res = await $Http("/core/dictType/all", {}, [""]);
-        $Data.typeList = res.data.lists || [];
-    } catch (error) {
-        MessagePlugin.error(error.msg || error.message || "加载数据失败");
-    }
-}
-
-function handleSearch(reload) {
-    reload({ keepSelection: false, resetPage: true });
-}
-
-function onAction(type, row) {
-    if (type === "add") {
-        $Data.actionType = "add";
-        $Data.rowData = {};
-        $Data.editVisible = true;
-        return;
-    }
-
-    if (type === "upd") {
-        $Data.actionType = "upd";
-        $Data.rowData = Object.assign({}, row);
-        $Data.editVisible = true;
-    }
-}
+const $Method = {
+    onAdd() {
+        $Method.onAction("add", {});
+    },
+    onDialogSuccess(reload) {
+        reload({ keepSelection: true });
+    },
+    async initData() {
+        await $Method.apiDictTypeAll();
+    },
+    async apiDictTypeAll() {
+        try {
+            const res = await $Http("/core/dictType/all", {}, [""]);
+            $Data.typeList = res.data.lists || [];
+        } catch (error) {
+            MessagePlugin.error(error.msg || error.message || "加载数据失败");
+        }
+    },
+    handleSearch(reload) {
+        reload({ keepSelection: false, resetPage: true });
+    },
+    onAction(type, row) {
+        if (type === "add") {
+            $Data.actionType = "add";
+            $Data.rowData = {};
+            $Data.editVisible = true;
+            return;
+        }
 
-function onDropdownAction(data, row, deleteRow) {
-    const record = data;
-    const rawValue = record && record["value"] ? record["value"] : "";
-    const cmd = rawValue ? String(rawValue) : "";
-    if (cmd === "del") {
-        deleteRow(row);
-        return;
+        if (type === "upd") {
+            $Data.actionType = "upd";
+            $Data.rowData = Object.assign({}, row);
+            $Data.editVisible = true;
+        }
+    },
+    onDropdownAction(data, row, deleteRow) {
+        const record = data;
+        const rawValue = record && record["value"] ? record["value"] : "";
+        const cmd = rawValue ? String(rawValue) : "";
+        if (cmd === "del") {
+            deleteRow(row);
+            return;
+        }
+        $Method.onAction(cmd, row);
     }
-    onAction(cmd, row);
-}
+};
 
 onMounted(() => {
-    initData();
+    $Method.initData();
 });
 </script>
 

package/views/config/dictType/components/edit.vue

@@ -1,6 +1,15 @@
 <template>
-    <PageDialog v-model="visible" :title="actionType === 'add' ? '添加字典类型' : '编辑字典类型'" @confirm="handleSubmit">
-        <TForm :data="$Data.formData" :rules="$Data.rules" label-width="100px" ref="formRef">
+    <PageDialog v-model="$Computed.visible" :title="$Computed.dialogTitle" @confirm="$Method.handleSubmit">
+        <TForm
+            :data="$Data.formData"
+            :rules="$Const.formRules"
+            label-width="100px"
+            :ref="
+                (value) => {
+                    $From.formRef = value;
+                }
+            "
+        >
             <TFormItem label="类型代码" name="code">
                 <TInput v-model="$Data.formData.code" placeholder="请输入类型代码（英文/数字/下划线）" :disabled="actionType === 'upd'" />
             </TFormItem>
@@ -18,13 +27,13 @@
 </template>
 
 <script setup>
-import { computed, reactive, ref } from "vue";
+import { computed, reactive } from "vue";
 
 import { Form as TForm, FormItem as TFormItem, Input as TInput, Textarea as TTextarea, InputNumber as TInputNumber, 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";
 
-const props = defineProps({
+const $Prop = defineProps({
     modelValue: Boolean,
     actionType: String,
     rowData: Object
@@ -32,68 +41,83 @@ const props = defineProps({
 
 const $Emit = defineEmits(["update:modelValue", "success"]);
 
-const visible = computed({
-    get: () => props.modelValue,
-    set: (val) => $Emit("update:modelValue", val)
-});
-
-const formRef = ref(null);
-
-const $Data = reactive({
-    formData: {
-        code: "",
-        name: "",
-        description: "",
-        sort: 0
+const $Const = {
+    createDefaultFormData() {
+        return {
+            code: "",
+            name: "",
+            description: "",
+            sort: 0
+        };
     },
-    rules: {
+    formRules: {
         code: [{ required: true, message: "请输入类型代码" }],
         name: [{ required: true, message: "请输入类型名称" }]
     }
+};
+
+const $From = {
+    formRef: null
+};
+
+const $Data = reactive({
+    formData: $Const.createDefaultFormData()
 });
 
-async function handleSubmit() {
-    const form = formRef.value;
-    if (!form) {
-        MessagePlugin.warning("表单未就绪");
-        return;
-    }
+const $Computed = reactive({
+    visible: computed({
+        get: () => $Prop.modelValue,
+        set: (value) => $Emit("update:modelValue", value)
+    }),
+    dialogTitle: computed(() => ($Prop.actionType === "add" ? "添加字典类型" : "编辑字典类型"))
+});
 
-    const valid = await form.validate();
-    if (valid !== true) return;
+const $Method = {
+    resetFormData() {
+        Object.assign($Data.formData, $Const.createDefaultFormData());
+    },
+    initData() {
+        if ($Prop.actionType === "upd" && $Prop.rowData) {
+            $Data.formData.code = $Prop.rowData.code || "";
+            $Data.formData.name = $Prop.rowData.name || "";
+            $Data.formData.description = $Prop.rowData.description || "";
+            $Data.formData.sort = $Prop.rowData.sort || 0;
+            return;
+        }
 
-    try {
-        const apiUrl = props.actionType === "add" ? "/core/dictType/insert" : "/core/dictType/update";
-        const params = {
-            code: $Data.formData.code,
-            name: $Data.formData.name,
-            description: $Data.formData.description,
-            sort: $Data.formData.sort
-        };
-        if (props.actionType === "upd" && props.rowData) {
-            const row = props.rowData;
-            params["id"] = row["id"];
+        $Method.resetFormData();
+    },
+    async handleSubmit() {
+        const form = $From.formRef;
+        if (!form) {
+            MessagePlugin.warning("表单未就绪");
+            return;
         }
 
-        await $Http(apiUrl, params);
-        MessagePlugin.success(props.actionType === "add" ? "添加成功" : "更新成功");
-        visible.value = false;
-        $Emit("success");
-    } catch (error) {
-        MessagePlugin.error(error.msg || error.message || "操作失败");
+        const valid = await form.validate();
+        if (valid !== true) return;
+
+        try {
+            const apiUrl = $Prop.actionType === "add" ? "/core/dictType/insert" : "/core/dictType/update";
+            const params = {
+                code: $Data.formData.code,
+                name: $Data.formData.name,
+                description: $Data.formData.description,
+                sort: $Data.formData.sort
+            };
+            if ($Prop.actionType === "upd" && $Prop.rowData) {
+                params["id"] = $Prop.rowData.id;
+            }
+
+            await $Http(apiUrl, params);
+            MessagePlugin.success($Prop.actionType === "add" ? "添加成功" : "更新成功");
+            $Computed.visible = false;
+            $Emit("success");
+        } catch (error) {
+            MessagePlugin.error(error.msg || error.message || "操作失败");
+        }
     }
-}
+};
 
-// 该组件由父组件 v-if 控制挂载/卸载，因此无需 watch：创建时初始化一次即可
-if (props.actionType === "upd" && props.rowData) {
-    $Data.formData.code = props.rowData.code || "";
-    $Data.formData.name = props.rowData.name || "";
-    $Data.formData.description = props.rowData.description || "";
-    $Data.formData.sort = props.rowData.sort || 0;
-} else {
-    $Data.formData.code = "";
-    $Data.formData.name = "";
-    $Data.formData.description = "";
-    $Data.formData.sort = 0;
-}
+$Method.initData();
 </script>

package/views/config/dictType/index.vue

@@ -1,7 +1,7 @@
 <template>
     <PageTableDetail class="page-dict-type page-table" :columns="$Data.columns" :endpoints="$Data.endpoints">
         <template #toolLeft>
-            <TButton theme="primary" @click="onAdd">
+            <TButton theme="primary" @click="$Method.onAdd">
                 <template #icon>
                     <AddIcon />
                 </template>
@@ -9,7 +9,7 @@
         </template>
 
         <template #toolRight="scope">
-            <TInput v-model="$Data.searchKeyword" placeholder="搜索类型名称" clearable @enter="handleSearch(scope.reload)" @clear="handleSearch(scope.reload)">
+            <TInput v-model="$Data.searchKeyword" placeholder="搜索类型名称" clearable @enter="$Method.handleSearch(scope.reload)" @clear="$Method.handleSearch(scope.reload)">
                 <template #suffix-icon>
                     <SearchIcon />
                 </template>
@@ -17,7 +17,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>
@@ -36,7 +36,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>
@@ -89,43 +89,41 @@ const $Data = reactive({
     rowData: {}
 });
 
-function onAdd() {
-    onAction("add", {});
-}
-
-function onDialogSuccess(reload) {
-    reload({ keepSelection: true });
-}
-
-function handleSearch(reload) {
-    reload({ keepSelection: false, resetPage: true });
-}
-
-function onAction(type, row) {
-    if (type === "add") {
-        $Data.actionType = "add";
-        $Data.rowData = {};
-        $Data.editVisible = true;
-        return;
-    }
-
-    if (type === "upd") {
-        $Data.actionType = "upd";
-        $Data.rowData = Object.assign({}, row);
-        $Data.editVisible = true;
-    }
-}
+const $Method = {
+    onAdd() {
+        $Method.onAction("add", {});
+    },
+    onDialogSuccess(reload) {
+        reload({ keepSelection: true });
+    },
+    handleSearch(reload) {
+        reload({ keepSelection: false, resetPage: true });
+    },
+    onAction(type, row) {
+        if (type === "add") {
+            $Data.actionType = "add";
+            $Data.rowData = {};
+            $Data.editVisible = true;
+            return;
+        }
 
-function onDropdownAction(data, row, deleteRow) {
-    const record = data;
-    const rawValue = record && record["value"] ? record["value"] : "";
-    const cmd = rawValue ? String(rawValue) : "";
-    if (cmd === "del") {
-        deleteRow(row);
-        return;
+        if (type === "upd") {
+            $Data.actionType = "upd";
+            $Data.rowData = Object.assign({}, row);
+            $Data.editVisible = true;
+        }
+    },
+    onDropdownAction(data, row, deleteRow) {
+        const record = data;
+        const rawValue = record && record["value"] ? record["value"] : "";
+        const cmd = rawValue ? String(rawValue) : "";
+        if (cmd === "del") {
+            deleteRow(row);
+            return;
+        }
+        $Method.onAction(cmd, row);
     }
-    onAction(cmd, row);
-}
+};
 </script>
 
 <style scoped lang="scss">