befly-admin-ui 1.8.14

package/views/config/dict/index.vue

@@ -0,0 +1,188 @@
+<template>
+    <PagedTableDetail class="page-dict page-table" :columns="$Data.columns" :endpoints="$Data.endpoints">
+        <template #toolLeft>
+            <TButton theme="primary" @click="onAdd">
+                <template #icon>
+                    <AddIcon />
+                </template>
+            </TButton>
+        </template>
+
+        <template #toolRight="scope">
+            <TSelect v-model="$Data.searchTypeCode" placeholder="请选择字典类型" clearable filterable @change="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)">
+                <template #suffix-icon>
+                    <SearchIcon />
+                </template>
+            </TInput>
+            <TButton shape="circle" @click="handleRefresh(scope.reload)">
+                <template #icon>
+                    <RefreshIcon />
+                </template>
+            </TButton>
+        </template>
+
+        <template #operation="{ row, deleteRow }">
+            <TDropdown trigger="click" placement="bottom-right" @click="onDropdownAction($event, row, deleteRow)">
+                <TButton theme="primary" size="small">
+                    操作
+                    <template #suffix><ChevronDownIcon /></template>
+                </TButton>
+                <TDropdownMenu slot="dropdown">
+                    <TDropdownItem value="upd">
+                        <EditIcon />
+                        编辑
+                    </TDropdownItem>
+                    <TDropdownItem value="del" :divider="true">
+                        <DeleteIcon style="width: 14px; height: 14px; margin-right: 6px" />
+                        删除
+                    </TDropdownItem>
+                </TDropdownMenu>
+            </TDropdown>
+        </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)" />
+        </template>
+    </PagedTableDetail>
+</template>
+
+<script setup lang="ts">
+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, RefreshIcon, SearchIcon } from "tdesign-icons-vue-next";
+import EditDialog from "./components/edit.vue";
+import { $Http } from "@/plugins/http";
+import PagedTableDetail from "@/components/pagedTableDetail.vue";
+import { withDefaultColumns } from "befly-admin-ui/utils/withDefaultColumns";
+
+const $Data = reactive({
+    typeList: [],
+    searchTypeCode: "",
+    searchKeyword: "",
+    columns: withDefaultColumns([
+        { colKey: "typeName", title: "类型名称" },
+        { colKey: "typeCode", title: "类型代码" },
+        { colKey: "label", title: "标签" },
+        { colKey: "key", title: "键值" },
+        { colKey: "sort", title: "排序", width: 100 },
+        { colKey: "remark", title: "备注" },
+        { colKey: "operation", title: "操作" }
+    ]),
+    endpoints: {
+        list: {
+            path: "/core/dict/list",
+            dropValues: [""],
+            buildData: () => {
+                return {
+                    typeCode: $Data.searchTypeCode,
+                    keyword: $Data.searchKeyword
+                };
+            }
+        },
+        delete: {
+            path: "/core/dict/del",
+            idKey: "id",
+            confirm: (row) => {
+                return {
+                    header: "确认删除",
+                    body: `确认删除字典项“${row.label}”吗？`,
+                    confirmBtn: "删除",
+                    status: "warning"
+                };
+            }
+        }
+    },
+    editVisible: false,
+    actionType: "add",
+    rowData: {}
+});
+
+function onAdd(): void {
+    onAction("add", {});
+}
+
+function onDialogSuccess(reload: (options: { keepSelection?: boolean }) => void): void {
+    reload({ keepSelection: true });
+}
+
+async function initData(): Promise<void> {
+    await apiDictTypeAll();
+}
+
+async function apiDictTypeAll(): Promise<void> {
+    try {
+        const res = await $Http.post(
+            "/core/dictType/all",
+            {},
+            {
+                dropValues: [""]
+            }
+        );
+        $Data.typeList = res.data.lists || [];
+    } catch (_error) {
+        MessagePlugin.error("加载数据失败");
+    }
+}
+
+function handleSearch(reload: (options: { keepSelection?: boolean; resetPage?: boolean }) => void): void {
+    reload({ keepSelection: false, resetPage: true });
+}
+
+function handleRefresh(reload: (options: { keepSelection?: boolean; resetPage?: boolean }) => void): void {
+    $Data.searchTypeCode = "";
+    $Data.searchKeyword = "";
+    reload({ keepSelection: false, resetPage: true });
+}
+
+function onAction(type: string, row: Record<string, unknown>): void {
+    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;
+    }
+}
+
+function onDropdownAction(data: unknown, row: Record<string, unknown>, deleteRow: (r: Record<string, unknown>) => void): void {
+    const record = data as Record<string, unknown>;
+    const rawValue = record && record["value"] ? record["value"] : "";
+    const cmd = rawValue ? String(rawValue) : "";
+    if (cmd === "del") {
+        deleteRow(row);
+        return;
+    }
+    onAction(cmd, row);
+}
+
+onMounted(() => {
+    initData();
+});
+</script>
+
+<style scoped lang="scss">
+.page-dict {
+    .main-tool .right {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+
+        .t-select {
+            width: 200px;
+        }
+
+        .t-input {
+            width: 240px;
+        }
+    }
+}
+</style>

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

@@ -0,0 +1,110 @@
+<template>
+    <PageDialog v-model="visible" :title="actionType === 'add' ? '添加字典类型' : '编辑字典类型'" @confirm="handleSubmit">
+        <TForm :data="$Data.formData" :rules="$Data.rules" label-width="100px" ref="formRef">
+            <TFormItem label="类型代码" name="code">
+                <TInput v-model="$Data.formData.code" placeholder="请输入类型代码（英文/数字/下划线）" :disabled="actionType === 'upd'" />
+            </TFormItem>
+            <TFormItem label="类型名称" name="name">
+                <TInput v-model="$Data.formData.name" placeholder="请输入类型名称" />
+            </TFormItem>
+            <TFormItem label="描述" name="description">
+                <TTextarea v-model="$Data.formData.description" placeholder="请输入描述信息" :autosize="{ minRows: 3, maxRows: 6 }" />
+            </TFormItem>
+            <TFormItem label="排序" name="sort">
+                <TInputNumber v-model="$Data.formData.sort" :min="0" placeholder="请输入排序值" />
+            </TFormItem>
+        </TForm>
+    </PageDialog>
+</template>
+
+<script setup lang="ts">
+import { computed, reactive, ref } 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 "@/components/pageDialog.vue";
+import { $Http } from "@/plugins/http";
+
+const props = defineProps({
+    modelValue: Boolean,
+    actionType: String,
+    rowData: Object
+});
+
+const $Emit = defineEmits<{
+    (e: "update:modelValue", value: boolean): void;
+    (e: "success"): void;
+}>();
+
+const visible = computed({
+    get: () => props.modelValue,
+    set: (val) => $Emit("update:modelValue", val)
+});
+
+type TDesignFormInstance = {
+    validate: () => Promise<unknown>;
+};
+
+const formRef = ref<TDesignFormInstance | null>(null);
+
+const $Data = reactive({
+    formData: {
+        code: "",
+        name: "",
+        description: "",
+        sort: 0
+    },
+    rules: {
+        code: [{ required: true, message: "请输入类型代码" }],
+        name: [{ required: true, message: "请输入类型名称" }]
+    }
+});
+
+async function handleSubmit(): Promise<void> {
+    const form = formRef.value;
+    if (!form) {
+        MessagePlugin.warning("表单未就绪");
+        return;
+    }
+
+    const valid = await form.validate();
+    if (valid !== true) return;
+
+    try {
+        const apiUrl = props.actionType === "add" ? "/core/dictType/ins" : "/core/dictType/upd";
+        const params: Record<string, unknown> = {
+            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 as Record<string, unknown>;
+            params["id"] = row["id"];
+        }
+
+        const res = await $Http.post(apiUrl, params);
+        if (res.code === 0) {
+            MessagePlugin.success(props.actionType === "add" ? "添加成功" : "更新成功");
+            visible.value = false;
+            $Emit("success");
+        } else {
+            MessagePlugin.error(res.msg || "操作失败");
+        }
+    } catch (_error) {
+        MessagePlugin.error("操作失败");
+    }
+}
+
+// 该组件由父组件 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;
+}
+</script>

package/views/config/dictType/index.vue

@@ -0,0 +1,153 @@
+<template>
+    <PagedTableDetail class="page-dict-type page-table" :columns="$Data.columns" :endpoints="$Data.endpoints">
+        <template #toolLeft>
+            <TButton theme="primary" @click="onAdd">
+                <template #icon>
+                    <AddIcon />
+                </template>
+            </TButton>
+        </template>
+
+        <template #toolRight="scope">
+            <TInput v-model="$Data.searchKeyword" placeholder="搜索类型名称" clearable @enter="handleSearch(scope.reload)" @clear="handleSearch(scope.reload)">
+                <template #suffix-icon>
+                    <SearchIcon />
+                </template>
+            </TInput>
+            <TButton shape="circle" @click="handleRefresh(scope.reload)">
+                <template #icon>
+                    <RefreshIcon />
+                </template>
+            </TButton>
+        </template>
+
+        <template #operation="{ row, deleteRow }">
+            <TDropdown trigger="click" placement="bottom-right" @click="onDropdownAction($event, row, deleteRow)">
+                <TButton theme="primary" size="small">
+                    操作
+                    <template #suffix><ChevronDownIcon /></template>
+                </TButton>
+                <TDropdownMenu slot="dropdown">
+                    <TDropdownItem value="upd">
+                        <EditIcon />
+                        编辑
+                    </TDropdownItem>
+                    <TDropdownItem value="del" :divider="true">
+                        <DeleteIcon style="width: 14px; height: 14px; margin-right: 6px" />
+                        删除
+                    </TDropdownItem>
+                </TDropdownMenu>
+            </TDropdown>
+        </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)" />
+        </template>
+    </PagedTableDetail>
+</template>
+
+<script setup lang="ts">
+import { reactive } from "vue";
+import { Button as TButton, Dropdown as TDropdown, DropdownItem as TDropdownItem, DropdownMenu as TDropdownMenu, Input as TInput } from "tdesign-vue-next";
+import { AddIcon, ChevronDownIcon, DeleteIcon, EditIcon, RefreshIcon, SearchIcon } from "tdesign-icons-vue-next";
+import EditDialog from "./components/edit.vue";
+import PagedTableDetail from "@/components/pagedTableDetail.vue";
+import { withDefaultColumns } from "befly-admin-ui/utils/withDefaultColumns";
+
+const $Data = reactive({
+    searchKeyword: "",
+    columns: withDefaultColumns([
+        { colKey: "code", title: "类型代码" },
+        { colKey: "name", title: "类型名称" },
+        { colKey: "description", title: "描述" },
+        { colKey: "sort", title: "排序" },
+        { colKey: "operation", title: "操作" }
+    ]),
+    endpoints: {
+        list: {
+            path: "/core/dictType/list",
+            dropValues: [0, ""],
+            dropKeyValue: {
+                keyword: [""]
+            },
+            buildData: () => {
+                return {
+                    keyword: $Data.searchKeyword
+                };
+            }
+        },
+        delete: {
+            path: "/core/dictType/del",
+            idKey: "id",
+            confirm: (row) => {
+                return {
+                    header: "确认删除",
+                    body: `确认删除类型“${row.name}”吗？`,
+                    confirmBtn: "删除",
+                    status: "warning"
+                };
+            }
+        }
+    },
+    editVisible: false,
+    actionType: "add",
+    rowData: {}
+});
+
+function onAdd(): void {
+    onAction("add", {});
+}
+
+function onDialogSuccess(reload: (options: { keepSelection?: boolean }) => void): void {
+    reload({ keepSelection: true });
+}
+
+function handleSearch(reload: (options: { keepSelection?: boolean; resetPage?: boolean }) => void): void {
+    reload({ keepSelection: false, resetPage: true });
+}
+
+function handleRefresh(reload: (options: { keepSelection?: boolean; resetPage?: boolean }) => void): void {
+    $Data.searchKeyword = "";
+    reload({ keepSelection: false, resetPage: true });
+}
+
+function onAction(type: string, row: Record<string, unknown>): void {
+    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;
+    }
+}
+
+function onDropdownAction(data: unknown, row: Record<string, unknown>, deleteRow: (r: Record<string, unknown>) => void): void {
+    const record = data as Record<string, unknown>;
+    const rawValue = record && record["value"] ? record["value"] : "";
+    const cmd = rawValue ? String(rawValue) : "";
+    if (cmd === "del") {
+        deleteRow(row);
+        return;
+    }
+    onAction(cmd, row);
+}
+</script>
+
+<style scoped lang="scss">
+.page-dict-type {
+    .main-tool .right {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+
+        .t-input {
+            width: 240px;
+        }
+    }
+}
+</style>

package/views/config/index.vue

@@ -0,0 +1,3 @@
+<template>
+    <RouterView />
+</template>

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

@@ -0,0 +1,184 @@
+<template>
+    <PageDialog v-model="dialogVisible" :title="$Prop.actionType === 'upd' ? '编辑配置' : '添加配置'" :confirm-loading="$Data.submitting" @confirm="onSubmit">
+        <TForm :model="$Data.formData" label-width="120px" label-position="left" :rules="$Data2.formRules" ref="formRef">
+            <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>
+    </PageDialog>
+</template>
+
+<script setup lang="ts">
+import { computed, reactive, ref } from "vue";
+
+import { 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, MessagePlugin } from "tdesign-vue-next";
+import PageDialog from "@/components/pageDialog.vue";
+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<{
+    (e: "update:modelValue", value: boolean): void;
+    (e: "success"): void;
+}>();
+
+type PageDialogEventContext = {
+    close: () => void;
+};
+
+// 表单引用
+type TDesignFormInstance = {
+    validate: () => Promise<unknown>;
+};
+
+const formRef = ref<TDesignFormInstance | null>(null);
+
+const dialogVisible = computed({
+    get: () => $Prop.modelValue,
+    set: (value) => {
+        $Emit("update:modelValue", value);
+    }
+});
+
+const $Data = reactive({
+    submitting: false,
+    isSystem: false,
+    formData: {
+        id: 0,
+        name: "",
+        code: "",
+        value: "",
+        valueType: "string",
+        group: "",
+        sort: 0,
+        description: "",
+        state: 1
+    }
+});
+
+const $Data2 = reactive({
+    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: ["基础配置", "邮件配置", "存储配置", "安全配置", "其他"]
+});
+
+async function initData(): Promise<void> {
+    onShow();
+}
+
+function onShow(): void {
+    if ($Prop.actionType === "upd" && $Prop.rowData) {
+        const row = $Prop.rowData as Record<string, unknown>;
+        $Data.formData.id = (row["id"] as number) || 0;
+        $Data.formData.name = (row["name"] as string) || "";
+        $Data.formData.code = (row["code"] as string) || "";
+        $Data.formData.value = (row["value"] as string) || "";
+        $Data.formData.valueType = (row["valueType"] as string) || "string";
+        $Data.formData.group = (row["group"] as string) || "";
+        $Data.formData.sort = (row["sort"] as number) || 0;
+        $Data.formData.description = (row["description"] as string) || "";
+        $Data.formData.state = (row["state"] as number) || 1;
+        $Data.isSystem = row["isSystem"] === 1;
+    } else {
+        $Data.formData = {
+            id: 0,
+            name: "",
+            code: "",
+            value: "",
+            valueType: "string",
+            group: "",
+            sort: 0,
+            description: "",
+            state: 1
+        };
+        $Data.isSystem = false;
+    }
+}
+
+async function onSubmit(context?: PageDialogEventContext): Promise<void> {
+    const form = formRef.value;
+    if (!form) {
+        MessagePlugin.warning("表单未就绪");
+        return;
+    }
+
+    const valid = await form.validate();
+    if (valid !== true) return;
+
+    $Data.submitting = true;
+    try {
+        const api = $Prop.actionType === "upd" ? "/core/sysConfig/upd" : "/core/sysConfig/ins";
+        const res = await $Http.post(api, $Data.formData);
+
+        if (res.code === 0) {
+            MessagePlugin.success($Prop.actionType === "upd" ? "编辑成功" : "添加成功");
+            $Emit("success");
+            if (context && typeof context.close === "function") {
+                context.close();
+            }
+        } else {
+            MessagePlugin.error(res.msg || "操作失败");
+        }
+    } catch (_error) {
+        MessagePlugin.error("操作失败");
+    } finally {
+        $Data.submitting = false;
+    }
+}
+
+initData();
+</script>
+
+<style scoped lang="scss"></style>