增加字典数据界面

src/components/advanced/table-header-operation.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { isShowBtn } from '@/utils/permission';
+import { ContainerOutlined } from '@ant-design/icons-vue';
+
 
 defineOptions({
   name: 'TableHeaderOperation'
@@ -12,6 +14,7 @@ interface Props {
   showDelete?: boolean;
   showExport?: boolean;
   notShowAdd?: boolean;
+  showView?: boolean;
 }
 
 defineProps<Props>();
@@ -21,6 +24,7 @@ interface Emits {
   (e: 'delete'): void;
   (e: 'refresh'): void;
   (e: 'export'): void;
+  (e: 'view'): void;
 }
 
 const emit = defineEmits<Emits>();
@@ -44,13 +48,19 @@ function refresh() {
 function handleExport() {
   emit('export');
 }
+
+function handleView() {
+  emit('view');
+
+}
 </script>
 
 <template>
   <div class="flex flex-wrap justify-end gap-x-12px gap-y-8px lt-sm:(w-200px py-12px)">
     <slot name="prefix"></slot>
     <slot name="default">
-      <AButton v-if="isShowBtn(`system:${tableType}:add`) && !notShowAdd" size="small" ghost type="primary" @click="add">
+      <AButton v-if="isShowBtn(`system:${tableType}:add`) && !notShowAdd" size="small" ghost type="primary"
+        @click="add">
         <div class="flex-y-center gap-8px">
           <icon-ic-round-plus class="text-icon" />
           <span>{{ $t('common.add') }}</span>
@@ -78,6 +88,13 @@ function handleExport() {
         <span>{{ $t('common.export') }}</span>
       </div>
     </AButton>
+
+    <AButton size="small" type="default" @click.prevent="handleView" v-show="showView">
+      <template #icon>
+        <ContainerOutlined />
+      </template>
+      {{ $t('route.manage_dictData') }}
+    </AButton>
     <TableColumnSetting v-model:columns="columns" />
     <slot name="suffix"></slot>
   </div>

src/hooks/common/table.ts

@@ -154,7 +154,7 @@ export function useTableOperate<T extends TableData<{ [key: string]: any }>>(
   const operateType = ref<any>('add');
   const { getData, idKey = 'id' } = options;
   /** the editing row data */
-  const editingData: Ref<T | null> = ref(null);
+  const editingData: any = ref(null);
 
   function handleAdd() {
     operateType.value = 'add';

src/locales/langs/en-us.ts

@@ -80,6 +80,7 @@ const local: any = {
       core: 'Core',
     },
     tablePaginationTotal: 'Total {total} items',
+    inputPlease: 'Please input',
   },
     // 组件
     components: {
@@ -250,7 +251,9 @@ const local: any = {
     manage_dept: 'Dept Manage',
     manage_route: 'Route Manage',
     manage_post: 'Post Manage',
-    manage_dict: 'Dict Manage'
+    manage_dict: 'Dict Manage',
+    manage_dictData:'Dict Data',
+    manage_task_log: 'Task Log',
   },
   page: {
     login: {
@@ -561,7 +564,31 @@ const local: any = {
           remark: 'Please enter remark'
         },
         addDict: 'Add Dictionary',
-        editDict: 'Edit Dictionary'
+        editDict: 'Edit Dictionary',
+        dictData:{
+          dictType: "Dictionary name",
+          dictCode: "Data Code",
+          dictLabel: "Data Key",
+          dictLabelPleac: "Please enter the data key correctly",
+          dictValue: "Data Value",
+          dictValuePleac: "Please enter the data value correctly",
+          dictSort: "Data Sort",
+          status: "Status",
+          createTime: "CreateTime",
+          tagType: "Tag Type",
+          tagTypeShow: "Tag Type Show",
+          tagClass: "Tag Class",
+          remark: "Remark",
+          viewInfo: "Dictionary Data Info",
+          viewInfoErr: "Failed to get dictionary data information",
+          addInfo: "Add Dictionary Data",
+          editInfo: "Modifying Dictionary Data",
+          delTip: "Confirm deleting the data item with dictionary data code [{txt}]?",
+          delOk: "Deleted successfully",
+          exportTip: "Confirm exporting xlsx table files based on search criteria?",
+          exportOk: "Completed export",
+          typeDataErr: "Failed to get dictionary type information",
+        }
       },
       log:{
         logId:'Log ID',

src/locales/langs/zh-cn.ts

@@ -80,6 +80,7 @@ const local:any = {
       core: '核',
     },
     tablePaginationTotal: '总共 {total} 条',
+    inputPlease: '请输入',
   },
     // 组件
   components: {
@@ -250,7 +251,9 @@ const local:any = {
     manage_dept: '部门管理',
     manage_route: '路由管理',
     manage_post: '岗位管理',
-    manage_dict: '字典管理'
+    manage_dict: '字典管理',
+    manage_dictData:'字典数据',
+    manage_task_log: '任务日志',
   },
   page: {
     login: {
@@ -561,7 +564,31 @@ const local:any = {
           remark: '请输入备注'
         },
         addDict: '新增字典',
-        editDict: '编辑字典'
+        editDict: '编辑字典',
+        dictData:{
+          dictType: "字典名称",
+          dictCode: "数据代码",
+          dictLabel: "数据键名",
+          dictLabelPleac: "请正确输入数据键名",
+          dictValue: "数据键值",
+          dictValuePleac: "请正确输入数据键值",
+          dictSort: "数据排序",
+          status: "数据状态",
+          createTime: "创建时间",
+          tagType: "标签类型",
+          tagTypeShow: "回显预览",
+          tagClass: "样式属性",
+          remark: "数据说明",
+          viewInfo: "字典数据信息",
+          viewInfoErr: "获取字典数据信息失败",
+          addInfo: "添加字典数据",
+          editInfo: "修改字典数据",
+          delTip: "确认删除字典数据代码为 【{txt}】 的数据项?",
+          delOk: "删除成功",
+          exportTip: "确认根据搜索条件导出xlsx表格文件吗?",
+          exportOk: "已完成导出",
+          typeDataErr: "获取字典类型信息失败",
+        }
       },
       log:{
         logId:'日志编号',

src/service/api/dict.ts

@@ -34,3 +34,19 @@ export const doDeleteDict = (dictId: string | number) => {
     method: 'post'
   });
 };
+
+
+
+
+
+/**
+ * 字典数据列表（指定字典类型）
+ * @param dictType 字典类型
+ * @returns object
+ */
+export function getDictDataType(dictType: string) {
+  return request({
+    url: `/system/dict/data/type/${dictType}`,
+    method: 'get',
+  });
+}

src/service/api/dictData.ts

@@ -0,0 +1,87 @@
+import { request } from '../request';
+
+export type DictSubmitModel = Partial<
+  Pick<Api.SystemManage.Dict, 'dictName' | 'dictType' | 'status' | 'remark' | 'dictId'>
+>;
+
+/**
+ * 字典数据列表导出
+ * @param query 查询参数
+ * @returns bolb
+ */
+export function exportData(query: Record<string, any>) {
+  return request({
+    url: '/system/dict/data/export',
+    method: 'post',
+    data: query,
+    responseType: 'blob',
+  });
+}
+
+/**
+ * 查询字典数据列表
+ * @param query 查询值
+ * @returns
+ */
+export function doGetdictDataList(query: Record<string, any>) {
+  return request({
+    url: '/system/dict/data/list',
+    method: 'get',
+    params: query,
+  });
+}
+
+/**
+ * 查询字典数据详细
+ * @param dictCode 字典代码值
+ * @returns object
+ */
+
+export function doGetDataInfo(dictCode: string | number) {
+  return request({
+    url: `/system/dict/data/${dictCode}`,
+    method: 'get',
+  });
+}
+
+/**
+ * 新增字典数据
+ * @param data 字典数据对象
+ * @returns object
+ */
+export function addData(data: Record<string, any>) {
+  return request({
+    url: '/system/dict/data',
+    method: 'post',
+    data: data,
+  });
+}
+
+/**
+ * 修改字典数据
+ * @param data 字典数据对象
+ * @returns object
+ */
+export function updateData(data: Record<string, any>) {
+  return request({
+    url: '/system/dict/data',
+    method: 'put',
+    data: data,
+  });
+}
+
+/**
+ * 删除字典数据
+ * @param dictCode 字典代码值
+ * @returns object
+ */
+export function delData(dictCode: string | number) {
+  return request({
+    url: `/system/dict/data/${dictCode}`,
+    method: 'delete',
+  });
+}
+
+
+
+

src/store/modules/dict/index.ts

@@ -0,0 +1,62 @@
+import { defineStore } from 'pinia';
+
+/**字典参数类型 */
+type DictStore = {
+  /**字典数据 */
+  dicts: Map<string, DictType[]>;
+};
+
+const useDictStore = defineStore('dict', {
+  state: (): DictStore => ({
+    dicts: new Map(),
+  }),
+  actions: {
+    /**清空字典 */
+    clearDict() {
+      this.dicts.clear();
+    },
+    /**删除字典 */
+    removeDict(key: string) {
+      if (!key) return;
+      return this.dicts.delete(key);
+    },
+    /**
+     * 处理字典数据对象用于回显标签
+     * @param data 字典数据项
+     * @returns
+     */
+    parseDataDict(data: Record<string, any>) {
+      return [
+        {
+          label: data.dictLabel,
+          value: data.dictValue,
+          tagType: data.tagType,
+          tagClass: data.tagClass,
+        },
+      ];
+    },
+    /**获取字典 */
+    async getDict(key: string) {
+      if (!key) return [];
+      let disct = this.dicts.get(key);
+      if (disct === undefined || disct.length === 0) {
+        const res = await getDictDataType(key);
+        if (!res.error  && Array.isArray(res.data)) {
+          const dictData: DictType[] = res.data.map((d:any) => ({
+            label: d.dictLabel,
+            value: d.dictValue,
+            tagType: d.tagType,
+            tagClass: d.tagClass,
+          }));
+          this.dicts.set(key, dictData);
+          disct = dictData;
+        } else {
+          disct = [];
+        }
+      }
+      return disct;
+    },
+  },
+});
+
+export default useDictStore;

src/typings/auto-imports.d.ts

@@ -10,6 +10,7 @@ declare global {
   const $notification: typeof import('ant-design-vue')['notification']
   const EffectScope: typeof import('vue')['EffectScope']
   const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
+  const addData: typeof import('../service/api/dictData')['addData']
   const addJob: typeof import('../service/api/job')['addJob']
   const addPackage: typeof import('../service/api/auth')['addPackage']
   const addRateLimit: typeof import('../service/api/auth')['addRateLimit']
@@ -57,9 +58,11 @@ declare global {
   const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
   const defineComponent: typeof import('vue')['defineComponent']
   const defineStore: typeof import('pinia')['defineStore']
+  const delData: typeof import('../service/api/dictData')['delData']
   const delJobLog: typeof import('../service/api/job')['delJobLog']
   const deletePackage: typeof import('../service/api/auth')['deletePackage']
   const describe: typeof import('vitest')['describe']
+  const dict: typeof import('../store/modules/dict/index')['default']
   const doAddDept: typeof import('../service/api/dept')['doAddDept']
   const doAddDict: typeof import('../service/api/dict')['doAddDict']
   const doAddMenu: typeof import('../service/api/menu')['doAddMenu']
@@ -82,6 +85,7 @@ declare global {
   const doExportLog: typeof import('../service/api/log')['doExportLog']
   const doGetAdminUserPostsAndRoles: typeof import('../service/api/user')['doGetAdminUserPostsAndRoles']
   const doGetCheckCode: typeof import('../service/api/auth')['doGetCheckCode']
+  const doGetDataInfo: typeof import('../service/api/dictData')['doGetDataInfo']
   const doGetDeptInfo: typeof import('../service/api/dept')['doGetDeptInfo']
   const doGetDeptList: typeof import('../service/api/dept')['doGetDeptList']
   const doGetDictList: typeof import('../service/api/dict')['doGetDictList']
@@ -97,6 +101,7 @@ declare global {
   const doGetUserList: typeof import('../service/api/user')['doGetUserList']
   const doGetUserPostsAndRoles: typeof import('../service/api/user')['doGetUserPostsAndRoles']
   const doGetUserRoutes: typeof import('../service/api/route')['doGetUserRoutes']
+  const doGetdictDataList: typeof import('../service/api/dictData')['doGetdictDataList']
   const doGetjobInfo: typeof import('../service/api/job')['doGetjobInfo']
   const doGetjobList: typeof import('../service/api/job')['doGetjobList']
   const doGetjobLogInfo: typeof import('../service/api/jobLog')['doGetjobLogInfo']
@@ -111,6 +116,7 @@ declare global {
   const effectScope: typeof import('vue')['effectScope']
   const emptyInfo: typeof import('../store/modules/auth/shared')['emptyInfo']
   const expect: typeof import('vitest')['expect']
+  const exportData: typeof import('../service/api/dictData')['exportData']
   const exportJob: typeof import('../service/api/job')['exportJob']
   const exportJobLog: typeof import('../service/api/jobLog')['exportJobLog']
   const extendRef: typeof import('@vueuse/core')['extendRef']
@@ -139,7 +145,10 @@ declare global {
   const getCacheRouteNames: typeof import('../store/modules/route/shared')['getCacheRouteNames']
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
   const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const getData: typeof import('../service/api/dictData')['getData']
   const getDefaultHomeTab: typeof import('../store/modules/tab/shared')['getDefaultHomeTab']
+  const getDictDataType: typeof import('../service/api/dict')['getDictDataType']
+  const getDictOptionselect: typeof import('../service/api/dict')['getDictOptionselect']
   const getFixedTabIds: typeof import('../store/modules/tab/shared')['getFixedTabIds']
   const getFixedTabs: typeof import('../store/modules/tab/shared')['getFixedTabs']
   const getGlobalMenusByAuthRoutes: typeof import('../store/modules/route/shared')['getGlobalMenusByAuthRoutes']
@@ -259,6 +268,7 @@ declare global {
   const unref: typeof import('vue')['unref']
   const unrefElement: typeof import('@vueuse/core')['unrefElement']
   const until: typeof import('@vueuse/core')['until']
+  const updateData: typeof import('../service/api/dictData')['updateData']
   const updateJob: typeof import('../service/api/job')['updateJob']
   const updateLocaleOfGlobalMenus: typeof import('../store/modules/route/shared')['updateLocaleOfGlobalMenus']
   const updatePackage: typeof import('../service/api/auth')['updatePackage']

src/typings/components.d.ts

@@ -63,6 +63,7 @@ declare module 'vue' {
     CronModal: typeof import('./../components/CronModal/index.vue')['default']
     DarkModeContainer: typeof import('./../components/common/dark-mode-container.vue')['default']
     Day: typeof import('./../components/CronModal/components/Day.vue')['default']
+    DictTag: typeof import('./../components/DictTag/index.vue')['default']
     ExceptionBase: typeof import('./../components/common/exception-base.vue')['default']
     FullScreen: typeof import('./../components/common/full-screen.vue')['default']
     Hour: typeof import('./../components/CronModal/components/Hour.vue')['default']

src/typings/dict.d.ts

@@ -0,0 +1,7 @@
+/**字段类型 */
+type DictType = {
+  label: string;
+  value: string;
+  tagType?: string;
+  tagClass?: string;
+};

src/views/manage/dict/dictData/index.vue

@@ -0,0 +1,731 @@
+<script setup lang="tsx">
+import { Form, message } from 'ant-design-vue';
+import type { Key } from 'ant-design-vue/es/_util/type';
+import { useTable, useTableOperate } from '@/hooks/common/table';
+import { SimpleScrollbar } from '~/packages/materials/src';
+import { useI18n } from "vue-i18n";
+import { SyncOutlined, SearchOutlined, ProfileOutlined, CloseOutlined, ExportOutlined, FormOutlined, DeleteOutlined } from '@ant-design/icons-vue';
+import { enableStatusOptions } from '@/constants/business';
+import { saveAs } from 'file-saver';
+import useDictStore from '@/store/modules/dict';
+
+
+import Modal from 'ant-design-vue/es/modal/Modal';
+import { useRouter, useRoute } from 'vue-router';
+
+const router = useRouter();
+const route = useRoute();
+
+const { parseDataDict, getDict } = useDictStore();
+
+
+const { t } = useI18n();
+
+const i18n = useI18n();
+// 获取当前语言设置
+const currentLocale = computed(() => {
+  return i18n.locale.value;
+});
+
+const wrapperEl = shallowRef<HTMLElement | null>(null);
+const { height: wrapperElHeight } = useElementSize(wrapperEl);
+
+const zh = currentLocale.value === 'zh_CN';
+
+
+
+/**标签类型数据固定项 */
+const tagTypeOptions = ref([
+  { value: '', label: zh ? '普通文本' : 'Plain text' },
+  { value: 'default', label: zh ? '默认（default）' : 'Default' },
+  { value: 'blue ', label: zh ? '蓝色（blue）' : 'Blue' },
+  { value: 'cyan', label: zh ? '青色（cyan）' : 'Cyan' },
+  { value: 'gold', label: zh ? '金色（gold）' : 'Gold' },
+  { value: 'green', label: zh ? '绿色（green）' : 'Green' },
+  { value: 'lime', label: zh ? '亮绿（lime）' : 'Lime' },
+  { value: 'magenta', label: zh ? '紫红（magenta）' : 'Magenta' },
+  { value: 'orange', label: zh ? '橘黄（orange）' : 'Orange' },
+  { value: 'pink', label: zh ? '粉色（pink）' : 'Pink' },
+  { value: 'purple', label: zh ? '紫色（purple）' : 'Purple' },
+  { value: 'red', label: zh ? '红色（red）' : 'Red' },
+  { value: 'yellow', label: zh ? '黄色（yellow）' : 'Yellow' },
+  { value: 'geekblue', label: zh ? '深蓝（geekblue）' : 'Geekblue' },
+  { value: 'volcano', label: zh ? '棕色（volcano）' : 'Volcano' },
+  { value: 'processing', label: zh ? '进行（processing）' : 'Processing' },
+  { value: 'warning', label: zh ? '警告（warning）' : 'Warning' },
+  { value: 'error', label: zh ? '错误（error）' : 'Error' },
+  { value: 'success', label: zh ? '成功（success）' : 'Success' },
+]);
+
+// 获取地址栏参数
+const dictId = route.params && (route.query.dictId as string);
+
+/**对话框对象信息状态 */
+let modalState: any = reactive({
+  openByView: false,
+  openByEdit: false,
+  title: '字典数据',
+  from: {
+    dictCode: undefined,
+    dictLabel: '',
+    dictSort: 0,
+    dictType: 'sys_oper_type',
+    dictValue: '',
+    tagClass: '',
+    tagType: '',
+    remark: '',
+    status: '0',
+    createTime: 0,
+    createBy: undefined,
+  },
+  confirmLoading: false,
+});
+
+
+/**字典数据 */
+let dict: {
+  /**数据状态 */
+  sysNormalDisable: any[];
+  /**字典名称 */
+  sysDictType: any[];
+} = reactive({
+  sysNormalDisable: [],
+  sysDictType: [],
+});
+
+const scrollConfig = computed(() => {
+  return {
+    y: wrapperElHeight.value - 72,
+    x: 1000
+  };
+});
+
+const { columns, data, loading, getData, mobilePagination, searchParams, resetSearchParams } = useTable({
+  apiFn: doGetdictDataList,
+  apiParams: {
+    pageNum: 1,
+    pageSize: 10,
+    dictType: '',
+    dictLabel: '',
+    status: ''
+  },
+  rowKey: 'dictCode',
+  columns: () => [
+    {
+      title: t('page.manage.dict.dictData.dictCode'),
+      key: 'dictCode',
+      dataIndex: 'dictCode',
+      align: 'center',
+      width: 100,
+    },
+    {
+      title: t('page.manage.dict.dictData.dictLabel'),
+      key: 'dictLabel',
+      dataIndex: 'dictLabel',
+      align: 'center',
+      width: 200,
+    },
+    {
+      title: t('page.manage.dict.dictData.dictValue'),
+      key: 'dictValue',
+      dataIndex: 'dictValue',
+      align: 'center',
+      width: 200,
+    },
+    {
+      title: t('page.manage.dict.dictData.dictSort'),
+      dataIndex: 'dictSort',
+      key: 'dictSort',
+      align: 'center',
+      width: 100,
+    },
+    {
+      title: t('page.manage.dict.dictData.status'),
+      dataIndex: 'status',
+      key: 'status',
+      align: 'center',
+      width: 100,
+    },
+    {
+      title: t('page.manage.dict.dictData.createTime'),
+      dataIndex: 'createTime',
+      key: 'createTime',
+      align: 'center',
+      width: 150,
+    },
+    {
+      title: t('common.operate'),
+      key: 'dictCode',
+      align: 'center',
+      width: 200,
+    },
+  ]
+});
+
+const {
+  operateType,
+  checkedRowKeys,
+  onDeleted
+  // closeDrawer
+} = useTableOperate(data, { getData, idKey: 'dictCode' });
+
+
+
+async function handleBatchDelete() {
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('page.manage.dict.dictData.delTip', { txt: checkedRowKeys.value.join(',') }),
+    async onOk() {
+
+      const { error } = await delData(checkedRowKeys.value.join(','));
+      if (!error) {
+        onDeleted();
+        // 取消勾选
+        if (checkedRowKeys.value.length > 0) {
+          checkedRowKeys.value = [];
+        }
+      }
+    }
+  })
+}
+
+/**表格多选 */
+function handleUserSelectChange(selectedRowKeys: Key[], selectedRows: any[]) {
+  checkedRowKeys.value = selectedRowKeys as number[];
+}
+
+function fnQueryReset() {
+  if (dictId && dictId !== '0') {
+    searchParams.value = Object.assign(searchParams, {
+      dictLabel: '',
+      status: undefined,
+      pageNum: 1,
+      pageSize: 10,
+    });
+  } else {
+    searchParams.value = Object.assign(searchParams, {
+      dictType: '',
+      dictLabel: '',
+      status: undefined,
+      pageNum: 1,
+      pageSize: 10,
+    });
+  }
+  resetSearchParams();
+}
+
+async function fnRecordView(dictCode: number) {
+  operateType.value = 'view';
+  if (modalState.confirmLoading) return;
+  const hide = message.loading('Waiting...', 0);
+  modalState.confirmLoading = true;
+  doGetDataInfo(dictCode).then(res => {
+    modalState.confirmLoading = false;
+    hide();
+    if (!res.error) {
+      modalState.from = Object.assign(modalState.from, res.data);
+      modalState.openByView = true;
+      modalState.title = t('page.manage.task.viewJob');
+    }
+  });
+}
+
+
+
+/**
+ * 对话框弹出关闭执行函数
+ * 进行表达规则校验
+ */
+function fnModalCancel() {
+  modalState.openByEdit = false;
+  modalState.openByView = false;
+}
+
+
+
+
+
+
+
+
+
+/**列表导出 */
+function fnExportList() {
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('common.exportTip'),
+    onOk() {
+      const key = 'exportJobLog';
+      message.loading({ content: t('common.loading'), key });
+      exportData(toRaw(searchParams)).then(res => {
+        if (!res.error) {
+          message.success({
+            content: t('common.exportOk'),
+            key,
+            duration: 2,
+          });
+          saveAs(res.data, `DictData_${Date.now()}.xlsx`);
+        }
+      });
+    },
+  });
+}
+
+
+
+/**关闭跳转 */
+function fnClose(this: any) {
+  router.back(); // 返回到上一个页面
+}
+
+/**对话框内表单属性和校验规则 */
+const modalStateFrom = Form.useForm(
+  modalState.from,
+  reactive({
+    dictLabel: [
+      {
+        required: true,
+        min: 1,
+        max: 50,
+        message: t('page.manage.dict.dictData.dictLabelPleac'),
+      },
+    ],
+    dictValue: [
+      {
+        required: true,
+        min: 1,
+        max: 50,
+        message: t('page.manage.dict.dictData.dictValuePleac'),
+      },
+    ],
+  })
+);
+
+/**新增修改界面 */
+function fnModalVisibleByEdit(dictCode?: string | number, record?: any) {
+  if (!dictCode) {
+    modalStateFrom.resetFields();
+    modalState.from.dictType = searchParams.dictType;
+    modalState.title = t('page.manage.dict.dictData.addInfo');
+    modalState.openByEdit = true;
+  } else {
+    if (modalState.confirmLoading) return;
+    const hide = message.loading(t('common.loading'), 0);
+    modalState.confirmLoading = true;
+    doGetDataInfo(dictCode).then(res => {
+      modalState.confirmLoading = false;
+      hide();
+      if (!res.error) {
+        modalState.from = Object.assign(modalState.from, res.data);
+        modalState.title = t('page.manage.dict.dictData.editInfo');
+        modalState.openByEdit = true;
+      }
+    });
+  }
+}
+
+
+/**
+ * 对话框弹出确认执行函数
+ * 进行表达规则校验
+ */
+function fnModalOk() {
+  modalStateFrom
+    .validate()
+    .then(() => {
+      modalState.confirmLoading = true;
+      const from = toRaw(modalState.from);
+      const dictData = from.dictCode ? updateData(from) : addData(from);
+      const key = 'dictData';
+      message.loading({ content: t('common.loading'), key });
+      dictData
+        .then(res => {
+          if (!res.error) {
+            message.success({
+              content: t('common.msgSuccess', { msg: modalState.title }),
+              key,
+              duration: 2,
+            });
+            modalState.openByEdit = false;
+            modalStateFrom.resetFields();
+            getData();
+          }
+        })
+        .finally(() => {
+          modalState.confirmLoading = false;
+        });
+    })
+    .catch(e => {
+      message.error(t('common.errorFields', { num: e.errorFields.length }), 2);
+    });
+}
+
+
+/**
+ * 字典删除
+ * @param dictCode 字典代码
+ */
+function fnRecordDelete(dictCode: string = '0') {
+  if (dictCode === '0') {
+    dictCode = checkedRowKeys.value.join(',');
+  }
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('page.manage.dict.dictData.delTip', { txt: dictCode }),
+    onOk() {
+      const key = 'delData';
+      message.loading({ content: t('common.loading'), key });
+      delData(dictCode).then(res => {
+        if (!res.error) {
+          message.success({
+            content: t('page.manage.dict.dictData.delOk'),
+            key,
+            duration: 2,
+          });
+          getData();
+        }
+      });
+    },
+  });
+}
+
+
+onMounted(() => {
+  // 初始字典数据
+  Promise.allSettled([
+    getDict('sys_normal_disable'),
+  ]).then((resArr: any) => {
+    if (resArr[0].status === 'fulfilled') {
+      dict.sysNormalDisable = resArr[0].value;
+    }
+  });
+
+  // 指定任务id数据列表
+  if (dictId && dictId !== '0') {
+    doGetDataInfo(dictId).then(res => {
+      if (!res.error) {
+        searchParams.dictType = res.data.dictType;
+        getData();
+      }
+    });
+  } else {
+    getData();
+  }
+})
+
+
+
+</script>
+
+<template>
+  <SimpleScrollbar>
+    <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
+      <!-- 搜索框 -->
+      <ACard :title="$t('common.search')" :bordered="false" class="card-wrapper">
+        <AForm :model="searchParams" :label-width="80">
+          <ARow :gutter="[16, 16]" wrap>
+
+
+            <a-col :lg="6" :md="12" :xs="24" v-if="dictId !== '0'">
+              <a-form-item :label="t('page.manage.dict.dictData.dictType')" name="dictType" class="m-0">
+                <a-input v-model:value="searchParams.dictType" :disabled="dictId !== '0'"
+                  :placeholder="t('common.inputPlease')"></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :lg="6" :md="12" :xs="24">
+              <a-form-item :label="t('page.manage.dict.dictData.dictLabel')" name="dictLabel" class="m-0">
+                <a-input v-model:value="searchParams.dictLabel" allow-clear
+                  :placeholder="t('common.inputPlease')"></a-input>
+              </a-form-item>
+            </a-col>
+
+            <ACol :lg="6" :md="12" :xs="24">
+              <AFormItem :label="$t('page.manage.user.status')" name="status" class="m-0">
+                <ASelect v-model:value="searchParams.status" :placeholder="$t('page.manage.user.form.status')"
+                  allow-clear>
+                  <ASelectOption v-for="option in enableStatusOptions" :key="option.value" :value="option.value">
+                    {{ $t(option.label) }}
+                  </ASelectOption>
+                </ASelect>
+              </AFormItem>
+            </ACol>
+
+
+            <ACol :lg="6" :md="12" :xs="24">
+              <AFormItem class="m-0">
+                <div class="w-full flex-y-center justify-end gap-8px">
+                  <a-space :size="8">
+                    <a-button @click="fnQueryReset">
+                      <template #icon>
+                        <SyncOutlined />
+                      </template>
+                      {{ $t('common.reset') }}
+                    </a-button>
+                    <AButton type="primary" ghost @click="getData">
+                      <template #icon>
+                        <SearchOutlined />
+                      </template>
+                      {{ $t('common.search') }}
+                    </AButton>
+                  </a-space>
+
+                </div>
+              </AFormItem>
+            </ACol>
+          </ARow>
+        </AForm>
+      </ACard>
+
+      <ACard title="Dictionary Data" :bordered="false" :body-style="{ flex: 1, overflow: 'hidden' }"
+        class="flex-col-stretch sm:flex-1-hidden card-wrapper">
+        <template #extra>
+          <div class="flex flex-wrap justify-end gap-x-12px gap-y-8px lt-sm:(w-200px py-12px)">
+            <slot name="prefix"></slot>
+            <slot name="default">
+
+              <a-button type="default" size="small" @click.prevent="fnClose()">
+                <template #icon>
+                  <CloseOutlined />
+                </template>
+                {{ t('common.close') }}
+              </a-button>
+
+              <AButton size="small" ghost type="primary" @click="fnModalVisibleByEdit()">
+                <div class="flex-y-center gap-8px">
+                  <icon-ic-round-plus class="text-icon" />
+                  <span>{{ $t('common.add') }}</span>
+                </div>
+              </AButton>
+
+
+              <AButton size="small" danger :disabled="checkedRowKeys.length <= 0" @click="handleBatchDelete()">
+                <div class="flex-y-center gap-8px">
+                  <icon-ic-round-delete class="text-icon" />
+                  <span>{{ $t('common.batchDelete') }}</span>
+                </div>
+              </AButton>
+
+              <AButton size="small" type="primary" @click="fnExportList">
+                <template #icon>
+                  <ExportOutlined />
+                </template>
+                <span>{{ $t('common.export') }}</span>
+              </AButton>
+
+              <AButton size="small" @click="getData">
+                <div class="flex-y-center gap-8px">
+                  <icon-mdi-refresh class="text-icon" />
+                  <span>{{ $t('common.refresh') }}</span>
+                </div>
+              </AButton>
+
+            </slot>
+
+            <slot name="suffix"></slot>
+          </div>
+        </template>
+
+
+        <ATable ref="wrapperEl" row-key="dictCode" :columns="columns" :data-source="data" :loading="loading"
+          :row-selection="{
+            selectedRowKeys: checkedRowKeys,
+            onChange: handleUserSelectChange,
+          }" size="small" :pagination="mobilePagination" :scroll="scrollConfig" class="h-full">
+          <template #bodyCell="{ column, record }">
+
+            <template v-if="column.key === 'status'">
+              <DictTag :options="dict.sysNormalDisable" :value="record.status" />
+            </template>
+
+            <template v-if="column.key === 'dictCode'">
+              <a-space :size="8" align="center">
+                <a-tooltip>
+
+                  <template #title>{{ t('common.view') }}</template>
+                  <a-button type="link" @click.prevent="fnRecordView(record.dictCode)">
+                    <template #icon>
+                      <ProfileOutlined />
+                    </template>
+                  </a-button>
+                </a-tooltip>
+
+                <a-tooltip>
+                  <template #title>{{ t('common.edit') }}</template>
+                  <a-button type="link" @click.prevent="fnModalVisibleByEdit(record.dictCode, record)">
+                    <template #icon>
+                      <FormOutlined />
+                    </template>
+                  </a-button>
+                </a-tooltip>
+
+                <a-tooltip>
+                  <template #title>{{ t('common.delete') }}</template>
+                  <a-button type="link" @click.prevent="fnRecordDelete(record.dictCode)">
+                    <template #icon>
+                      <DeleteOutlined />
+                    </template>
+                  </a-button>
+                </a-tooltip>
+
+              </a-space>
+            </template>
+
+          </template>
+        </ATable>
+
+
+
+        <!-- <taskOperateDrawer v-model:visible="drawerVisible" :dept-tree-data="deptTreeData" :operate-type="operateType"
+          :row-data="editingData" @submitted="getData" /> -->
+
+
+
+
+        <!-- 详情框 -->
+        <a-modal :width="800" v-model:open="modalState.openByView" :title="modalState.title" @cancel="fnModalCancel">
+          <a-form layout="horizontal" :label-col="{ span: 6 }" :label-wrap="true">
+            <a-row>
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item :label="t('page.manage.dict.dictData.dictType')" name="dictType">
+                  {{
+                    dict.sysDictType.find(
+                      item => item.value === modalState.from.dictType
+                    )?.label
+                  }}
+                </a-form-item>
+              </a-col>
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item :label="t('page.manage.dict.dictData.createTime')" name="createTime">
+                  <span v-if="+modalState.from.createTime > 0">
+                    {{ modalState.from.createTime }}
+                  </span>
+                </a-form-item>
+              </a-col>
+            </a-row>
+            <a-row>
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item :label="t('page.manage.dict.dictData.dictCode')" name="dictCode">
+                  {{ modalState.from.dictCode }}
+                </a-form-item>
+              </a-col>
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item :label="t('page.manage.dict.dictData.status')" name="status">
+                  <DictTag :options="dict.sysNormalDisable" :value="modalState.from.status" />
+                </a-form-item>
+              </a-col>
+            </a-row>
+            <a-row>
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item :label="t('page.manage.dict.dictData.dictLabel')" name="dictLabel">
+                  {{ modalState.from.dictLabel }}
+                </a-form-item>
+              </a-col>
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item :label="t('page.manage.dict.dictData.dictValue')" name="dictValue">
+                  {{ modalState.from.dictValue }}
+                </a-form-item>
+              </a-col>
+            </a-row>
+            <a-row>
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item :label="t('page.manage.dict.dictData.tagType')" name="tagType">
+                  <DictTag :options="tagTypeOptions" :value="modalState.from.tagType" />
+                </a-form-item>
+              </a-col>
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item :label="t('page.manage.dict.dictData.tagClass')" name="tagClass">
+                  {{ modalState.from.tagClass }}
+                </a-form-item>
+              </a-col>
+            </a-row>
+            <a-row>
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item :label="t('page.manage.dict.dictData.tagTypeShow')" name="tagType">
+                  <DictTag :options="parseDataDict(modalState.from)" :value="modalState.from.dictValue" />
+                </a-form-item>
+              </a-col>
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item :label="t('page.manage.dict.dictData.dictSort')" name="dictSort">
+                  {{ modalState.from.dictSort }}
+                </a-form-item>
+              </a-col>
+            </a-row>
+            <a-form-item :label="t('page.manage.dict.dictData.remark')" name="remark" :label-col="{ span: 3 }"
+              :label-wrap="true">
+              <a-textarea v-model:value="modalState.from.remark" :auto-size="{ minRows: 2, maxRows: 6 }"
+                :disabled="true" />
+            </a-form-item>
+          </a-form>
+          <template #footer>
+            <a-button key="cancel" @click="fnModalCancel">
+              {{ t('common.close') }}
+            </a-button>
+          </template>
+        </a-modal>
+
+
+        <!--新增修改框 -->
+        <a-modal :width="800" :destroyOnClose="true" :keyboard="false" :mask-closable="false"
+          v-model:open="modalState.openByEdit" :title="modalState.title" :confirm-loading="modalState.confirmLoading"
+          @ok="fnModalOk" @cancel="fnModalCancel">
+          <a-form layout="horizontal" :label-col="{ span: 6 }" :label-wrap="true">
+            <a-row>
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item :label="t('page.manage.dict.dictData.dictType')" name="dictType">
+                  <a-select v-model:value="modalState.from.dictType" default-value="sys_oper_type"
+                    :placeholder="t('common.selectPlease')" :options="dict.sysDictType" :disabled="true">
+                  </a-select>
+                </a-form-item>
+              </a-col>
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item :label="t('page.manage.dict.dictData.dictSort')" name="dictSort">
+                  <a-input-number v-model:value="modalState.from.dictSort" :min="0" :max="65535"
+                    :placeholder="t('common.inputPlease')"></a-input-number>
+                </a-form-item>
+              </a-col>
+            </a-row>
+
+            <a-row>
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item :label="t('page.manage.dict.dictData.dictLabel')" name="dictLabel"
+                  v-bind="modalStateFrom.validateInfos.dictLabel">
+                  <a-input v-model:value="modalState.from.dictLabel" allow-clear
+                    :placeholder="t('page.manage.dict.dictData.dictLabelPleac')"></a-input>
+                </a-form-item>
+              </a-col>
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item :label="t('page.manage.dict.dictData.dictValue')" name="dictValue"
+                  v-bind="modalStateFrom.validateInfos.dictValue">
+                  <a-input v-model:value="modalState.from.dictValue" allow-clear
+                    :placeholder="t('page.manage.dict.dictData.dictValuePleac')"></a-input>
+                </a-form-item>
+              </a-col>
+            </a-row>
+
+            <a-row>
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item :label="t('page.manage.dict.dictData.status')" name="status">
+                  <a-select v-model:value="modalState.from.status" default-value="0"
+                    :placeholder="t('common.selectPlease')" :options="dict.sysNormalDisable">
+                  </a-select>
+                </a-form-item>
+              </a-col>
+
+            </a-row>
+
+            <a-form-item :label="t('page.manage.dict.dictData.remark')" name="remark" :label-col="{ span: 3 }"
+              :label-wrap="true">
+              <a-textarea v-model:value="modalState.from.remark" :auto-size="{ minRows: 4, maxRows: 6 }"
+                :maxlength="450" :show-count="true" />
+            </a-form-item>
+          </a-form>
+        </a-modal>
+      </ACard>
+
+
+    </div>
+  </SimpleScrollbar>
+</template>
+
+<style scoped></style>

src/views/manage/dict/index.vue

@@ -6,7 +6,14 @@ import { $t } from '@/locales';
 import { enableStatusRecord } from '@/constants/business';
 import DictOperateDrawer from './modules/dict-operate-drawer.vue';
 import DictSearch from './modules/dict-search.vue';
+import { useRouter, useRoute } from 'vue-router';
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
 
+
+const router = useRouter();
+const route = useRoute();
+const routePath = route.path;
 const wrapperEl = shallowRef<HTMLElement | null>(null);
 const { height: wrapperElHeight } = useElementSize(wrapperEl);
 
@@ -45,11 +52,11 @@ const { columns, columnChecks, data, loading, getData, mobilePagination, searchP
       dataIndex: 'status',
       title: '状态',
       align: 'center',
-      customRender: ({ record }) => {
+      customRender: ({ record }: any) => {
         if (record.status === null) {
           return null;
         }
-        const tagMap: Record<Api.Common.EnableStatus, string> = {
+        const tagMap: any = {
           '0': 'success',
           '1': 'warning'
         };
@@ -74,20 +81,23 @@ const { columns, columnChecks, data, loading, getData, mobilePagination, searchP
       title: '操作',
       align: 'center',
       width: 200,
-      customRender: ({ record }) => (
+      customRender: ({ record }: any) => (
         <div class="flex justify-around gap-8px">
           {isShowBtn('system:dict:edit') && (
             <Button size="small" onClick={() => edit(record.dictId)}>
-              编辑
+              {t('common.edit')}
             </Button>
           )}
           {isShowBtn('system:dict:remove') && (
             <Popconfirm onConfirm={() => handleDelete(record.dictId)} title="确认删除吗？">
               <Button danger size="small">
-                删除
+              {$t('common.delete')}
               </Button>
             </Popconfirm>
           )}
+          <Button size="small" onClick={() => fnDataView(record.dictId)} >
+          {$t('route.manage_dictData')}
+          </Button>
         </div>
       )
     }
@@ -101,6 +111,10 @@ async function handleBatchDelete() {
   const { error } = await doDeleteDict(checkedRowKeys.value.join(','));
   if (!error) {
     onBatchDeleted();
+    // 取消勾选
+    if (checkedRowKeys.value.length > 0) {
+      checkedRowKeys.value = [];
+    }
   }
 }
 
@@ -118,47 +132,30 @@ function edit(id: number) {
 function handleDictSelectChange(selectedRowKeys: Key[]) {
   checkedRowKeys.value = selectedRowKeys as number[];
 }
+
+
+/**跳转字典数据页面 */
+function fnDataView(dictId: string | number = '0') {
+  router.push(`${routePath}/dictData?dictId=${dictId}`);
+}
+
 </script>
 
 <template>
   <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
     <DictSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getData" />
-    <ACard
+    <ACard title="字典列表" :bordered="false" :body-style="{ flex: 1, overflow: 'hidden' }"
-      title="字典列表"
+      class="flex-col-stretch sm:flex-1-hidden card-wrapper">
-      :bordered="false"
-      :body-style="{ flex: 1, overflow: 'hidden' }"
-      class="flex-col-stretch sm:flex-1-hidden card-wrapper"
-    >
       <template #extra>
-        <TableHeaderOperation
+        <TableHeaderOperation v-model:columns="columnChecks" :disabled-delete="checkedRowKeys.length === 0"
-          v-model:columns="columnChecks"
+          :loading="loading" :show-delete="true" :show-view="true" table-type="dict" @add="handleAdd" @delete="handleBatchDelete"
-          :disabled-delete="checkedRowKeys.length === 0"
+          @refresh="getData" @view="fnDataView"/>
-          :loading="loading"
-          :show-delete="true"
-          table-type="dict"
-          @add="handleAdd"
-          @delete="handleBatchDelete"
-          @refresh="getData"
-        />
       </template>
-      <ATable
+      <ATable ref="wrapperEl" :columns="columns" :data-source="data" :loading="loading"
-        ref="wrapperEl"
+        :row-selection="{ selectedRowKeys: checkedRowKeys, onChange: handleDictSelectChange }" row-key="dictId"
-        :columns="columns"
+        size="small" :pagination="mobilePagination" :scroll="scrollConfig" class="h-full" />
-        :data-source="data"
+      <DictOperateDrawer v-model:visible="drawerVisible" :operate-type="operateType" :row-data="editingData"
-        :loading="loading"
+        @submitted="getData" />
-        :row-selection="{ selectedRowKeys: checkedRowKeys, onChange: handleDictSelectChange }"
-        row-key="dictId"
-        size="small"
-        :pagination="mobilePagination"
-        :scroll="scrollConfig"
-        class="h-full"
-      />
-      <DictOperateDrawer
-        v-model:visible="drawerVisible"
-        :operate-type="operateType"
-        :row-data="editingData"
-        @submitted="getData"
-      />
     </ACard>
   </div>
 </template>