@befly-addon/admin 1.1.29 → 1.1.30

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

@@ -1,162 +1,116 @@
 <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) => ($From.form = el)">
-            <TFormItem label="字典名称" prop="name">
-                <TInput v-model="$Data.formData.name" placeholder="请输入字典名称" />
+    <TDialog v-model:visible="visible" :header="actionType === 'add' ? '添加字典项' : '编辑字典项'" width="600px" @confirm="$Method.handleSubmit" @close="$Method.handleClose">
+        <TForm ref="formRef" :data="$Data.formData" :rules="$Data.rules" label-width="100px">
+            <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" />
+                </TSelect>
             </TFormItem>
-            <TFormItem label="字典代码" prop="code">
-                <TInput v-model="$Data.formData.code" placeholder="请输入字典代码，如：gender" />
+            <TFormItem label="键值" name="key">
+                <TInput v-model="$Data.formData.key" placeholder="请输入键名（英文/数字/下划线）" />
             </TFormItem>
-            <TFormItem label="字典值" prop="value">
-                <TInput v-model="$Data.formData.value" placeholder="请输入字典值" />
+            <TFormItem label="标签" name="label">
+                <TInput v-model="$Data.formData.label" placeholder="请输入标签（显示名称）" />
             </TFormItem>
-            <TFormItem label="父级ID" prop="pid">
-                <TInputNumber v-model="$Data.formData.pid" :min="0" />
+            <TFormItem label="排序" name="sort">
+                <TInputNumber v-model="$Data.formData.sort" :min="0" placeholder="请输入排序值" />
             </TFormItem>
-            <TFormItem label="排序" prop="sort">
-                <TInputNumber v-model="$Data.formData.sort" :min="0" :max="9999" />
-            </TFormItem>
-            <TFormItem label="描述" prop="description">
-                <TInput v-model="$Data.formData.description" type="textarea" placeholder="请输入描述" :rows="3" />
-            </TFormItem>
-            <TFormItem label="状态" prop="state">
-                <TRadioGroup v-model="$Data.formData.state">
-                    <TRadio :label="1">正常</TRadio>
-                    <TRadio :label="2">禁用</TRadio>
-                </TRadioGroup>
+            <TFormItem label="备注" name="remark">
+                <TTextarea v-model="$Data.formData.remark" placeholder="请输入备注信息" :autosize="{ minRows: 3, maxRows: 6 }" />
             </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 { watch } from 'vue';
-import { Dialog as TDialog, Form as TForm, FormItem as TFormItem, Input as TInput, InputNumber as TInputNumber, RadioGroup as TRadioGroup, Radio as TRadio, Button as TButton, MessagePlugin } from 'tdesign-vue-next';
+import { Dialog as TDialog, 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 { $Http } from '@/plugins/http';
 
-const $Prop = defineProps({
-    modelValue: {
-        type: Boolean,
-        default: false
-    },
-    actionType: {
-        type: String,
-        default: 'add'
-    },
-    rowData: {
-        type: Object,
-        default: {}
-    }
+const props = defineProps({
+    modelValue: Boolean,
+    actionType: String,
+    rowData: Object,
+    typeList: Array
 });
 
-const $Emit = defineEmits(['update:modelValue', 'success']);
+const emit = defineEmits(['update:modelValue', 'success']);
 
-// 表单引用
-const $From = $shallowRef({
-    form: null
+const visible = computed({
+    get: () => props.modelValue,
+    set: (val) => emit('update:modelValue', val)
 });
 
+const formRef = $ref(null);
+
 const $Data = $ref({
-    visible: false,
-    submitting: false,
     formData: {
-        id: 0,
-        name: '',
-        code: '',
-        value: '',
-        pid: 0,
+        typeCode: '',
+        key: '',
+        label: '',
         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' }]
+        remark: ''
+    },
+    rules: {
+        typeCode: [{ required: true, message: '请选择字典类型' }],
+        key: [{ required: true, message: '请输入键值' }],
+        label: [{ required: true, message: '请输入标签' }]
     }
 });
 
-// 方法集合
 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.pid = $Prop.rowData.pid || 0;
-            $Data.formData.sort = $Prop.rowData.sort || 0;
-            $Data.formData.description = $Prop.rowData.description || '';
-            $Data.formData.state = $Prop.rowData.state ?? 1;
-        } else {
-            // 重置表单
-            $Data.formData.id = 0;
-            $Data.formData.name = '';
-            $Data.formData.code = '';
-            $Data.formData.value = '';
-            $Data.formData.pid = 0;
-            $Data.formData.sort = 0;
-            $Data.formData.description = '';
-            $Data.formData.state = 1;
-        }
-    },
-
-    onClose() {
-        $Data.visible = false;
-        setTimeout(() => {
-            $Emit('update:modelValue', false);
-        }, 300);
-    },
-
-    async onSubmit() {
+    async handleSubmit() {
         try {
-            const valid = await $From.form.validate();
-            if (!valid) return;
-
-            $Data.submitting = true;
-            const res = await $Http($Prop.actionType === 'add' ? '/addon/admin/dictIns' : '/addon/admin/dictUpd', $Data.formData);
+            const valid = await formRef.validate();
+            const apiUrl = props.actionType === 'add' ? '/addon/admin/dict/ins' : '/addon/admin/dict/upd';
+            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') {
+                params.id = props.rowData.id;
+            }
 
-            MessagePlugin.success($Prop.actionType === 'add' ? '添加成功' : '编辑成功');
-            $Method.onClose();
-            $Emit('success');
+            const res = await $Http(apiUrl, params);
+            console.log('🔥[ res ]-79', res);
+            if (res.code === 0) {
+                MessagePlugin.success(props.actionType === 'add' ? '添加成功' : '更新成功');
+                visible.value = false;
+                emit('success');
+            } else {
+                MessagePlugin.error(res.msg || '操作失败');
+            }
         } catch (error) {
             console.error('提交失败:', error);
-            MessagePlugin.error('提交失败');
-        } finally {
-            $Data.submitting = false;
+            MessagePlugin.error('操作失败');
         }
+    },
+    handleClose() {
+        visible.value = false;
     }
 };
 
-// 监听 modelValue 变化
 watch(
-    () => $Prop.modelValue,
+    () => props.modelValue,
     (val) => {
-        if (val && !$Data.visible) {
-            $Method.initData();
-        } else if (!val && $Data.visible) {
-            $Data.visible = false;
+        if (val) {
+            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 = '';
+            }
         }
     },
     { immediate: true }
 );
 </script>
-
-<style scoped lang="scss">
-// 可根据需要添加样式
-</style>

package/views/config/dict/index.vue

@@ -9,6 +9,14 @@
                 </TButton>
             </div>
             <div class="right">
+                <TSelect v-model="$Data.searchTypeCode" placeholder="请选择字典类型" clearable filterable @change="$Method.handleSearch">
+                    <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="$Method.handleSearch" @clear="$Method.handleSearch">
+                    <template #suffix-icon>
+                        <ILucideSearch />
+                    </template>
+                </TInput>
                 <TButton shape="circle" @click="$Method.handleRefresh">
                     <template #icon>
                         <ILucideRotateCw />
@@ -18,12 +26,7 @@
         </div>
         <div class="main-content">
             <div class="main-table">
-                <TTable :data="$Data.dictList" :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 #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>
-                        <TTag v-else shape="round" theme="danger" variant="light-outline">已删除</TTag>
-                    </template>
+                <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">
@@ -54,15 +57,15 @@
             <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.apiDictList" />
+        <EditDialog v-if="$Data.editVisible" v-model="$Data.editVisible" :action-type="$Data.actionType" :row-data="$Data.rowData" :type-list="$Data.typeList" @success="$Method.apiDictList" />
     </div>
 </template>
 
 <script setup>
-import { Button as TButton, Table as TTable, Tag as TTag, Dropdown as TDropdown, DropdownMenu as TDropdownMenu, DropdownItem as TDropdownItem, Pagination as TPagination, MessagePlugin, DialogPlugin } from 'tdesign-vue-next';
+import { Button as TButton, Table as TTable, Input as TInput, Select as TSelect, Option as TOption, 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';
@@ -71,21 +74,22 @@ import DetailPanel from '@/components/DetailPanel.vue';
 import { $Http } from '@/plugins/http';
 import { withDefaultColumns } from 'befly-shared/withDefaultColumns';
 
-// 响应式数据
 const $Data = $ref({
-    dictList: [],
+    tableData: [],
+    typeList: [],
     loading: false,
     activeRowKeys: [],
     currentRow: null,
+    searchTypeCode: '',
+    searchKeyword: '',
     columns: withDefaultColumns([
-        { colKey: 'index', title: '序号' },
-        { colKey: 'name', title: '字典名称' },
-        { colKey: 'code', title: '字典代码' },
-        { colKey: 'value', title: '字典值' },
-        { colKey: 'pid', title: '父级ID' },
-        { colKey: 'sort', title: '排序' },
-        { colKey: 'description', title: '描述' },
-        { colKey: 'state', title: '状态' },
+        { colKey: 'id', title: 'ID' },
+        { colKey: 'typeName', title: '类型名称' },
+        { colKey: 'typeCode', title: '类型代码' },
+        { colKey: 'label', title: '标签' },
+        { colKey: 'key', title: '键值' },
+        { colKey: 'sort', title: '排序', width: 100 },
+        { colKey: 'remark', title: '备注' },
         { colKey: 'operation', title: '操作' }
     ]),
     pagerConfig: {
@@ -100,27 +104,34 @@ const $Data = $ref({
     rowData: {}
 });
 
-// 方法
 const $Method = {
     async initData() {
+        await $Method.apiDictTypeAll();
         await $Method.apiDictList();
     },
-
-    // 加载字典列表
+    async apiDictTypeAll() {
+        try {
+            const res = await $Http('/addon/admin/dictType/all');
+            $Data.typeList = res.data.lists || [];
+        } catch (error) {
+            console.error('加载字典类型列表失败:', error);
+        }
+    },
     async apiDictList() {
         $Data.loading = true;
         try {
             const res = await $Http('/addon/admin/dict/list', {
                 page: $Data.pagerConfig.currentPage,
-                limit: $Data.pagerConfig.limit
+                limit: $Data.pagerConfig.limit,
+                typeCode: $Data.searchTypeCode,
+                keyword: $Data.searchKeyword
             });
-            $Data.dictList = res.data.lists || [];
+            $Data.tableData = res.data.lists || [];
             $Data.pagerConfig.total = res.data.total || 0;
 
-            // 自动选中并高亮第一行
-            if ($Data.dictList.length > 0) {
-                $Data.currentRow = $Data.dictList[0];
-                $Data.activeRowKeys = [$Data.dictList[0].id];
+            if ($Data.tableData.length > 0) {
+                $Data.currentRow = $Data.tableData[0];
+                $Data.activeRowKeys = [$Data.tableData[0].id];
             } else {
                 $Data.currentRow = null;
                 $Data.activeRowKeys = [];
@@ -132,12 +143,10 @@ const $Method = {
             $Data.loading = false;
         }
     },
-
-    // 删除字典
     async apiDictDel(row) {
         DialogPlugin.confirm({
             header: '确认删除',
-            body: `确定要删除字典“${row.name}” 吗？`,
+            body: `确定要删除字典项"${row.label}"吗？`,
             status: 'warning'
         }).then(async () => {
             try {
@@ -154,53 +163,66 @@ const $Method = {
             }
         });
     },
-
-    // 刷新
+    handleSearch() {
+        $Data.pagerConfig.currentPage = 1;
+        $Method.apiDictList();
+    },
     handleRefresh() {
+        $Data.searchTypeCode = '';
+        $Data.searchKeyword = '';
+        $Data.pagerConfig.currentPage = 1;
         $Method.apiDictList();
     },
-
-    // 分页改变
     onPageChange({ currentPage }) {
         $Data.pagerConfig.currentPage = currentPage;
         $Method.apiDictList();
     },
-
-    // 每页条数改变
     handleSizeChange({ pageSize }) {
         $Data.pagerConfig.limit = pageSize;
         $Data.pagerConfig.currentPage = 1;
         $Method.apiDictList();
     },
-
-    // 高亮行变化
     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;
-        }
+        $Data.currentRow = context.currentRowData;
     },
-
-    // 操作菜单点击
-    onAction(command, rowData) {
-        $Data.actionType = command;
-        $Data.rowData = rowData;
-        if (command === 'add' || command === 'upd') {
+    onAction(type, row) {
+        if (type === 'add') {
+            $Data.actionType = 'add';
+            $Data.rowData = {};
             $Data.editVisible = true;
-        } else if (command === 'del') {
-            $Method.apiDictDel(rowData);
+        } else if (type === 'upd') {
+            $Data.actionType = 'upd';
+            $Data.rowData = { ...row };
+            $Data.editVisible = true;
+        } else if (type === 'del') {
+            $Method.apiDictDel(row);
         }
     }
 };
 
-$Method.initData();
+onMounted(() => {
+    $Method.initData();
+});
 </script>
 
 <style scoped lang="scss">
-// 样式继承自全局 page-table
+.page-dict {
+    .main-tool .right {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+
+        .t-select {
+            width: 200px;
+        }
+
+        .t-input {
+            width: 240px;
+        }
+    }
+}
 </style>

package/views/config/dict/meta.json

@@ -1,4 +1,4 @@
 {
-    "name": "字典配置",
+    "name": "字典列表",
     "order": 1
 }

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

@@ -0,0 +1,106 @@
+<template>
+    <TDialog v-model:visible="visible" :header="actionType === 'add' ? '添加字典类型' : '编辑字典类型'" width="600px" @confirm="$Method.handleSubmit" @close="$Method.handleClose">
+        <TForm ref="formRef" :data="$Data.formData" :rules="$Data.rules" label-width="100px">
+            <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>
+    </TDialog>
+</template>
+
+<script setup>
+import { Dialog as TDialog, Form as TForm, FormItem as TFormItem, Input as TInput, Textarea as TTextarea, InputNumber as TInputNumber, MessagePlugin } from 'tdesign-vue-next';
+import { $Http } from '@/plugins/http';
+
+const props = defineProps({
+    modelValue: Boolean,
+    actionType: String,
+    rowData: Object
+});
+
+const emit = defineEmits(['update:modelValue', 'success']);
+
+const visible = computed({
+    get: () => props.modelValue,
+    set: (val) => emit('update:modelValue', val)
+});
+
+const formRef = $ref(null);
+
+const $Data = $ref({
+    formData: {
+        code: '',
+        name: '',
+        description: '',
+        sort: 0
+    },
+    rules: {
+        code: [{ required: true, message: '请输入类型代码' }],
+        name: [{ required: true, message: '请输入类型名称' }]
+    }
+});
+
+const $Method = {
+    async handleSubmit() {
+        const valid = await formRef.validate();
+        if (!valid) return;
+
+        try {
+            const apiUrl = props.actionType === 'add' ? '/addon/admin/dictType/ins' : '/addon/admin/dictType/upd';
+            const params = {
+                code: $Data.formData.code,
+                name: $Data.formData.name,
+                description: $Data.formData.description,
+                sort: $Data.formData.sort
+            };
+            if (props.actionType === 'upd') {
+                params.id = props.rowData.id;
+            }
+
+            const res = await $Http(apiUrl, params);
+            if (res.code === 0) {
+                MessagePlugin.success(props.actionType === 'add' ? '添加成功' : '更新成功');
+                visible.value = false;
+                emit('success');
+            } else {
+                MessagePlugin.error(res.msg || '操作失败');
+            }
+        } catch (error) {
+            console.error('提交失败:', error);
+            MessagePlugin.error('操作失败');
+        }
+    },
+    handleClose() {
+        visible.value = false;
+    }
+};
+
+watch(
+    () => props.modelValue,
+    (val) => {
+        if (val) {
+            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;
+            }
+        }
+    },
+    { immediate: true }
+);
+</script>