@befly-addon/admin 1.2.1 → 1.2.2

package/adminViews/config/dictType/index.vue

@@ -0,0 +1,244 @@
+<template>
+    <div class="page-dict-type page-table">
+        <div class="main-tool">
+            <div class="left">
+                <TButton theme="primary" @click="$Method.onAction('add', {})">
+                    <template #icon>
+                        <ILucidePlus />
+                    </template>
+                </TButton>
+            </div>
+            <div class="right">
+                <TInput v-model="$Data.searchKeyword" placeholder="搜索类型名称" clearable @enter="$Method.handleSearch" @clear="$Method.handleSearch">
+                    <template #suffix-icon>
+                        <ILucideSearch />
+                    </template>
+                </TInput>
+                <TButton shape="circle" @click="$Method.handleRefresh">
+                    <template #icon>
+                        <ILucideRotateCw />
+                    </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(--pagination-height) - var(--layout-gap) * 4)"
+                    active-row-type="single"
+                    @active-change="$Method.onActiveChange"
+                >
+                    <template #operation="{ row }">
+                        <TDropdown trigger="click" placement="bottom-right" @click="(data) => $Method.onAction(data.value, row)">
+                            <TButton theme="primary" size="small">
+                                操作
+                                <template #suffix> <ILucideChevronDown /></template>
+                            </TButton>
+                            <TDropdownMenu slot="dropdown">
+                                <TDropdownItem value="upd">
+                                    <ILucidePencil />
+                                    编辑
+                                </TDropdownItem>
+                                <TDropdownItem value="del" :divider="true">
+                                    <ILucideTrash2 style="width: 14px; height: 14px; margin-right: 6px" />
+                                    删除
+                                </TDropdownItem>
+                            </TDropdownMenu>
+                        </TDropdown>
+                    </template>
+                </TTable>
+            </div>
+
+            <div class="main-detail">
+                <DetailPanel :data="$Data.currentRow" :fields="$Data.columns" />
+            </div>
+        </div>
+
+        <div class="main-page">
+            <TPagination :current-page="$Data.pagerConfig.currentPage" :page-size="$Data.pagerConfig.limit" :total="$Data.pagerConfig.total" @current-change="$Method.onPageChange" @page-size-change="$Method.handleSizeChange" />
+        </div>
+
+        <EditDialog v-if="$Data.editVisible" v-model="$Data.editVisible" :action-type="$Data.actionType" :row-data="$Data.rowData" @success="$Method.apiDictTypeList" />
+    </div>
+</template>
+
+<script setup>
+import { onMounted } from "vue";
+
+import { Button as TButton, Table as TTable, Input as TInput, Dropdown as TDropdown, DropdownMenu as TDropdownMenu, DropdownItem as TDropdownItem, Pagination as TPagination, MessagePlugin, DialogPlugin } from "tdesign-vue-next";
+import ILucidePlus from "~icons/lucide/plus";
+import ILucideRotateCw from "~icons/lucide/rotate-cw";
+import ILucideSearch from "~icons/lucide/search";
+import ILucidePencil from "~icons/lucide/pencil";
+import ILucideTrash2 from "~icons/lucide/trash-2";
+import ILucideChevronDown from "~icons/lucide/chevron-down";
+import EditDialog from "./components/edit.vue";
+import DetailPanel from "@/components/DetailPanel.vue";
+import { $Http } from "@/plugins/http";
+import { withDefaultColumns } from "befly-vite/utils/withDefaultColumns";
+
+definePage({
+    meta: {
+        title: "字典类型",
+        order: 1
+    }
+});
+
+const $Data = $ref({
+    tableData: [],
+    loading: false,
+    activeRowKeys: [],
+    currentRow: null,
+    searchKeyword: "",
+    columns: withDefaultColumns([
+        { colKey: "id", title: "ID" },
+        { colKey: "code", title: "类型代码" },
+        { colKey: "name", title: "类型名称" },
+        { colKey: "description", title: "描述" },
+        { colKey: "sort", title: "排序" },
+        { colKey: "operation", title: "操作" }
+    ]),
+    pagerConfig: {
+        currentPage: 1,
+        limit: 30,
+        total: 0,
+        align: "right",
+        layout: "total, prev, pager, next, jumper"
+    },
+    editVisible: false,
+    actionType: "add",
+    rowData: {}
+});
+
+const $Method = {
+    async initData() {
+        await $Method.apiDictTypeList();
+    },
+    async apiDictTypeList() {
+        $Data.loading = true;
+        try {
+            const res = await $Http("/addon/admin/dictType/list", {
+                page: $Data.pagerConfig.currentPage,
+                limit: $Data.pagerConfig.limit,
+                keyword: $Data.searchKeyword
+            });
+            $Data.tableData = res.data.lists || [];
+            $Data.pagerConfig.total = res.data.total || 0;
+
+            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("加载数据失败");
+        } finally {
+            $Data.loading = false;
+        }
+    },
+    async apiDictTypeDel(row) {
+        let dialog = null;
+        let destroyed = false;
+
+        const destroy = () => {
+            if (destroyed) return;
+            destroyed = true;
+            if (dialog && typeof dialog.destroy === "function") {
+                dialog.destroy();
+            }
+        };
+
+        dialog = DialogPlugin.confirm({
+            header: "确认删除",
+            body: `确认删除类型“${row.name}”吗？`,
+            status: "warning",
+            confirmBtn: "删除",
+            cancelBtn: "取消",
+            onConfirm: async () => {
+                if (dialog && typeof dialog.setConfirmLoading === "function") {
+                    dialog.setConfirmLoading(true);
+                }
+
+                try {
+                    await $Http("/addon/admin/dictType/del", { id: row.id });
+                    MessagePlugin.success("删除成功");
+                    destroy();
+                    await $Method.apiDictTypeList();
+                } catch (error) {
+                    MessagePlugin.error("删除失败");
+                } finally {
+                    if (dialog && typeof dialog.setConfirmLoading === "function") {
+                        dialog.setConfirmLoading(false);
+                    }
+                }
+            },
+            onClose: () => {
+                destroy();
+            }
+        });
+    },
+    handleSearch() {
+        $Data.pagerConfig.currentPage = 1;
+        $Method.apiDictTypeList();
+    },
+    handleRefresh() {
+        $Data.searchKeyword = "";
+        $Data.pagerConfig.currentPage = 1;
+        $Method.apiDictTypeList();
+    },
+    onPageChange({ currentPage }) {
+        $Data.pagerConfig.currentPage = currentPage;
+        $Method.apiDictTypeList();
+    },
+    handleSizeChange({ pageSize }) {
+        $Data.pagerConfig.limit = pageSize;
+        $Data.pagerConfig.currentPage = 1;
+        $Method.apiDictTypeList();
+    },
+    onActiveChange(value, context) {
+        if (value.length === 0 && $Data.activeRowKeys.length > 0) {
+            return;
+        }
+        $Data.activeRowKeys = value;
+        $Data.currentRow = context.currentRowData;
+    },
+    onAction(type, row) {
+        if (type === "add") {
+            $Data.actionType = "add";
+            $Data.rowData = {};
+            $Data.editVisible = true;
+        } else if (type === "upd") {
+            $Data.actionType = "upd";
+            $Data.rowData = { ...row };
+            $Data.editVisible = true;
+        } else if (type === "del") {
+            $Method.apiDictTypeDel(row);
+        }
+    }
+};
+
+onMounted(() => {
+    $Method.initData();
+});
+</script>
+
+<style scoped lang="scss">
+.page-dict-type {
+    .main-tool .right {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+
+        .t-input {
+            width: 240px;
+        }
+    }
+}
+</style>

package/adminViews/config/index.vue

@@ -0,0 +1,12 @@
+<template>
+    <RouterView />
+</template>
+
+<script setup>
+definePage({
+    meta: {
+        title: "配置管理",
+        order: 30
+    }
+});
+</script>

package/adminViews/config/system/components/edit.vue

@@ -0,0 +1,171 @@
+<template>
+    <TDialog v-model:visible="$Data.visible" :title="$Prop.actionType === 'upd' ? '编辑配置' : '添加配置'" width="600px" :append-to-body="true" :show-footer="true" :esc-closable="false" top="10vh" @close="$Method.onClose">
+        <TForm :model="$Data.formData" label-width="120px" label-position="left" :rules="$Data2.formRules" :ref="(el) => ($Form.form = el)">
+            <TFormItem label="配置名称" prop="name">
+                <TInput v-model="$Data.formData.name" placeholder="请输入配置名称" :disabled="$Data.isSystem" />
+            </TFormItem>
+            <TFormItem label="配置代码" prop="code">
+                <TInput v-model="$Data.formData.code" placeholder="请输入配置代码，如：site_name" :disabled="$Prop.actionType === 'upd'" />
+            </TFormItem>
+            <TFormItem label="配置值" prop="value">
+                <TTextarea v-if="$Data.formData.valueType === 'json' || $Data.formData.valueType === 'text'" v-model="$Data.formData.value" placeholder="请输入配置值" :autosize="{ minRows: 3, maxRows: 8 }" />
+                <TInput v-else v-model="$Data.formData.value" placeholder="请输入配置值" />
+            </TFormItem>
+            <TFormItem label="值类型" prop="valueType">
+                <TSelect v-model="$Data.formData.valueType" :disabled="$Data.isSystem">
+                    <TOption label="字符串" value="string" />
+                    <TOption label="数字" value="number" />
+                    <TOption label="布尔" value="boolean" />
+                    <TOption label="JSON" value="json" />
+                </TSelect>
+            </TFormItem>
+            <TFormItem label="配置分组" prop="group">
+                <TSelect v-model="$Data.formData.group" placeholder="请选择分组" clearable :disabled="$Data.isSystem">
+                    <TOption v-for="item in $Data2.groupOptions" :key="item" :label="item" :value="item" />
+                </TSelect>
+            </TFormItem>
+            <TFormItem label="排序" prop="sort">
+                <TInputNumber v-model="$Data.formData.sort" :min="0" :max="9999" :disabled="$Data.isSystem" />
+            </TFormItem>
+            <TFormItem label="描述说明" prop="description">
+                <TTextarea v-model="$Data.formData.description" placeholder="请输入描述说明" :autosize="{ minRows: 2, maxRows: 4 }" :disabled="$Data.isSystem" />
+            </TFormItem>
+            <TFormItem v-if="$Prop.actionType === 'upd' && !$Data.isSystem" label="状态" prop="state">
+                <TRadioGroup v-model="$Data.formData.state">
+                    <TRadio :value="1">正常</TRadio>
+                    <TRadio :value="2">禁用</TRadio>
+                </TRadioGroup>
+            </TFormItem>
+        </TForm>
+        <template #footer>
+            <TButton @click="$Method.onClose">取消</TButton>
+            <TButton theme="primary" :loading="$Data.submitting" @click="$Method.onSubmit">确定</TButton>
+        </template>
+    </TDialog>
+</template>
+
+<script setup>
+import { Dialog as TDialog, Form as TForm, FormItem as TFormItem, Input as TInput, Textarea as TTextarea, InputNumber as TInputNumber, Select as TSelect, Option as TOption, RadioGroup as TRadioGroup, Radio as TRadio, Button as TButton, MessagePlugin } from "tdesign-vue-next";
+import { $Http } from "@/plugins/http";
+
+const $Prop = defineProps({
+    modelValue: {
+        type: Boolean,
+        default: false
+    },
+    actionType: {
+        type: String,
+        default: "add"
+    },
+    rowData: {
+        type: Object,
+        default: () => ({})
+    }
+});
+
+const $Emit = defineEmits(["update:modelValue", "success"]);
+
+// 表单引用
+const $Form = $shallowRef({
+    form: null
+});
+
+const $Data = $ref({
+    visible: false,
+    submitting: false,
+    isSystem: false,
+    formData: {
+        id: 0,
+        name: "",
+        code: "",
+        value: "",
+        valueType: "string",
+        group: "",
+        sort: 0,
+        description: "",
+        state: 1
+    }
+});
+
+const $Data2 = $shallowRef({
+    formRules: {
+        name: [{ required: true, message: "请输入配置名称", trigger: "blur" }],
+        code: [
+            { required: true, message: "请输入配置代码", trigger: "blur" },
+            { pattern: /^[a-zA-Z0-9_]+$/, message: "配置代码只能包含字母、数字和下划线", trigger: "blur" }
+        ],
+        value: [{ required: true, message: "请输入配置值", trigger: "blur" }],
+        valueType: [{ required: true, message: "请选择值类型", trigger: "change" }]
+    },
+    groupOptions: ["基础配置", "邮件配置", "存储配置", "安全配置", "其他"]
+});
+
+// 方法集合
+const $Method = {
+    async initData() {
+        $Method.onShow();
+    },
+
+    onShow() {
+        $Data.visible = true;
+        if ($Prop.actionType === "upd" && $Prop.rowData) {
+            $Data.formData.id = $Prop.rowData.id || 0;
+            $Data.formData.name = $Prop.rowData.name || "";
+            $Data.formData.code = $Prop.rowData.code || "";
+            $Data.formData.value = $Prop.rowData.value || "";
+            $Data.formData.valueType = $Prop.rowData.valueType || "string";
+            $Data.formData.group = $Prop.rowData.group || "";
+            $Data.formData.sort = $Prop.rowData.sort || 0;
+            $Data.formData.description = $Prop.rowData.description || "";
+            $Data.formData.state = $Prop.rowData.state || 1;
+            $Data.isSystem = $Prop.rowData.isSystem === 1;
+        } else {
+            $Data.formData = {
+                id: 0,
+                name: "",
+                code: "",
+                value: "",
+                valueType: "string",
+                group: "",
+                sort: 0,
+                description: "",
+                state: 1
+            };
+            $Data.isSystem = false;
+        }
+    },
+
+    onClose() {
+        $Data.visible = false;
+        $Emit("update:modelValue", false);
+    },
+
+    async onSubmit() {
+        const valid = await $Form.form?.validate();
+        if (valid !== true) return;
+
+        $Data.submitting = true;
+        try {
+            const api = $Prop.actionType === "upd" ? "/addon/admin/sysConfig/upd" : "/addon/admin/sysConfig/ins";
+            const res = await $Http(api, $Data.formData);
+
+            if (res.code === 0) {
+                MessagePlugin.success($Prop.actionType === "upd" ? "编辑成功" : "添加成功");
+                $Emit("success");
+                $Method.onClose();
+            } else {
+                MessagePlugin.error(res.msg || "操作失败");
+            }
+        } catch (error) {
+            MessagePlugin.error("操作失败");
+        } finally {
+            $Data.submitting = false;
+        }
+    }
+};
+
+// 该组件由父组件 v-if 控制挂载/卸载，因此无需 watch：创建时初始化一次即可
+$Method.initData();
+</script>
+
+<style scoped lang="scss"></style>