feat: dictionary management

fix: bugs in menu tree generating

src/api/sys/dictionary.ts

@@ -0,0 +1,90 @@
+import { defHttp } from '/@/utils/http/axios';
+import { ErrorMessageMode } from '/#/axios';
+import { BaseIdReq, BasePageReq, BaseResp } from '/@/api/model/baseModel';
+import {
+  DictionaryDetailInfo,
+  DictionaryDetailListResp,
+  DictionaryInfo,
+  DictionaryListResp,
+} from './model/dictionaryModel';
+
+enum Api {
+  GetDictionaryList = '/sys-api/dict/list',
+  CreateOrUpdateOrDeleteDictionary = '/sys-api/dict',
+  GetDictionaryDetailList = '/sys-api/dict/detail/list',
+  CreateOrUpdateOrDeleteDictionaryDetail = '/sys-api/dict/detail',
+}
+
+/**
+ * @description: Get dictionary list
+ */
+
+export const getDictionaryList = (params: BasePageReq) => {
+  return defHttp.post<DictionaryListResp>({ url: Api.GetDictionaryList, params });
+};
+
+/**
+ *  author: ryan
+ *  @description: create a new dictionary
+ */
+export const createOrUpdateDictionary = (
+  params: DictionaryInfo,
+  mode: ErrorMessageMode = 'modal',
+) => {
+  return defHttp.post<BaseResp>(
+    { url: Api.CreateOrUpdateOrDeleteDictionary, params: params },
+    {
+      errorMessageMode: mode,
+    },
+  );
+};
+
+/**
+ *  author: Ryan Su
+ *  @description: delete dictionary
+ */
+export const deleteDictionary = (params: BaseIdReq, mode: ErrorMessageMode = 'modal') => {
+  return defHttp.delete<BaseResp>(
+    { url: Api.CreateOrUpdateOrDeleteDictionary, params: params },
+    {
+      errorMessageMode: mode,
+    },
+  );
+};
+
+/**
+ * @description: Get dictionary detail list
+ */
+
+export const getDictionaryDetailList = (params: BasePageReq) => {
+  return defHttp.post<DictionaryDetailListResp>({ url: Api.GetDictionaryDetailList, params });
+};
+
+/**
+ *  author: ryan
+ *  @description: create a new dictionary detail
+ */
+export const createOrUpdateDictionaryDetail = (
+  params: DictionaryDetailInfo,
+  mode: ErrorMessageMode = 'modal',
+) => {
+  return defHttp.post<BaseResp>(
+    { url: Api.CreateOrUpdateOrDeleteDictionaryDetail, params: params },
+    {
+      errorMessageMode: mode,
+    },
+  );
+};
+
+/**
+ *  author: Ryan Su
+ *  @description: delete dictionary detail
+ */
+export const deleteDictionaryDetail = (params: BaseIdReq, mode: ErrorMessageMode = 'modal') => {
+  return defHttp.delete<BaseResp>(
+    { url: Api.CreateOrUpdateOrDeleteDictionaryDetail, params: params },
+    {
+      errorMessageMode: mode,
+    },
+  );
+};

src/api/sys/model/dictionaryModel.ts

@@ -0,0 +1,42 @@
+import { BaseListResp } from '../../model/baseModel';
+
+/**
+ *  author: Ryan Su
+ *  @description: dictionary info response
+ */
+export interface DictionaryInfo {
+  id: number;
+  createAt?: number;
+  name: string;
+  title: string;
+  description: string;
+  status: boolean;
+}
+
+/**
+ *  author: Ryan Su
+ *  @description: dictionary list response
+ */
+
+export type DictionaryListResp = BaseListResp<DictionaryInfo>;
+
+/**
+ *  author: Ryan Su
+ *  @description: dictionary detail info response
+ */
+export interface DictionaryDetailInfo {
+  id: number;
+  createAt?: number;
+  title: string;
+  key: string;
+  value: string;
+  status: boolean;
+  parentId: number;
+}
+
+/**
+ *  author: Ryan Su
+ *  @description: dictionary detail list response
+ */
+
+export type DictionaryDetailListResp = BaseListResp<DictionaryDetailInfo>;

src/api/sys/model/menuModel.ts

@@ -57,7 +57,7 @@ export interface MenuListItem {
   affix: boolean;
   dynamicLevel: number;
   realPath: string;
-  children?: MenuListItem[] | undefined;
+  children: MenuListItem[];
 }
 
 /**

src/locales/lang/en/api_desc.ts

@@ -48,4 +48,12 @@ export default {
   uploadFile: 'Upload',
   fileList: 'File List',
   deleteFile: 'Delete File',
+
+  // dictionary
+  createOrUpdateDictionary: 'Create or update dictionary information',
+  deleteDictionary: 'Delete dictionary information',
+  getDictionaryList: 'Get dictionary list',
+  createOrUpdateDictionaryDetail: 'Create or update dictionary KV information',
+  deleteDictionaryDetail: 'Delete dictionary KV information',
+  getDictionaryListDetail: 'Get dictionary detail list by dictionary name',
 };

src/locales/lang/en/common.ts

@@ -34,10 +34,15 @@ export default {
   order: 'Order',
   statusName: 'Status',
   remark: 'Remark',
+  title: 'Title',
+  name: 'Name',
+  description: 'Description',
   nonSelected: 'Please select',
   all: 'All',
   beginDate: 'Begin',
   endDate: 'End',
+  key: 'Key',
+  value: 'Value',
   // action
   start: 'Start',
   stop: 'Stop',

src/locales/lang/en/routes/system.ts

@@ -6,4 +6,7 @@ export default {
   userManagementTitle: 'User',
   fileManagementTitle: 'File',
   userProfileTitle: 'Profile',
+  dictionaryManagementTitle: 'Dictionary',
+  dictionaryDetailManagementTitle: 'Key/Value Management',
+  otherPages: 'Other pages',
 };

src/locales/lang/en/sys.ts

@@ -229,4 +229,15 @@ export default {
     morning: 'Good morning',
     niceDay: 'have a nice day!',
   },
+  dictionary: {
+    // noun
+    name: 'Dictionary Name',
+    dictionaryList: 'Dictionary List',
+    dictionaryDetailList: 'Key/Value List',
+    // action
+    addDictionary: 'Add Dictionary',
+    addDictionaryDetail: 'Add Key/Value',
+    editDictionary: 'Edit Dictionary',
+    editDictionaryDetail: 'Edit Key/Value',
+  },
 };

src/locales/lang/zh-CN/api_desc.ts

@@ -48,4 +48,12 @@ export default {
   uploadFile: '上传文件',
   fileList: '文件列表',
   deleteFile: '删除文件',
+
+  // dictionary
+  createOrUpdateDictionary: '创建或更新字典信息',
+  deleteDictionary: '删除字典信息',
+  getDictionaryList: '获取字典列表',
+  createOrUpdateDictionaryDetail: '创建或更新字典键值信息',
+  deleteDictionaryDetail: '删除字典键值信息',
+  getDictionaryListDetail: '获取字典键值列表',
 };

src/locales/lang/zh-CN/common.ts

@@ -34,10 +34,15 @@ export default {
   order: '排序',
   statusName: '状态',
   remark: '备注',
+  title: '标题',
+  name: '名称',
+  description: '描述',
   nonSelected: '未选择',
   all: '全部',
   beginDate: '开始日期',
   endDate: '结束日期',
+  key: '键',
+  value: '值',
   // action
   start: '开始',
   stop: '停止',

src/locales/lang/zh-CN/routes/system.ts

@@ -6,4 +6,7 @@ export default {
   userManagementTitle: '用户管理',
   fileManagementTitle: '文件管理',
   userProfileTitle: '用户个人信息',
+  dictionaryManagementTitle: '字典管理',
+  dictionaryDetailManagementTitle: '键值管理',
+  otherPages: '其他页面',
 };

src/locales/lang/zh-CN/sys.ts

@@ -223,4 +223,15 @@ export default {
     morning: '早安',
     niceDay: '开始您一天的工作吧！',
   },
+  dictionary: {
+    // noun
+    name: '字典名称',
+    dictionaryList: '字典列表',
+    dictionaryDetailList: '键值列表',
+    // action
+    addDictionary: '添加字典',
+    addDictionaryDetail: '添加键值',
+    editDictionary: '编辑字典',
+    editDictionaryDetail: '编辑键值',
+  },
 };

src/views/sys/dictionary/detail.vue

@@ -0,0 +1,123 @@
+<template>
+  <div>
+    <BasicTable @register="registerTable">
+      <template #toolbar>
+        <a-button type="primary" @click="handleCreate">
+          {{ t('sys.dictionary.addDictionaryDetail') }}
+        </a-button>
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+              {
+                icon: 'clarity:note-edit-line',
+                onClick: handleEdit.bind(null, record),
+              },
+              {
+                icon: 'ant-design:delete-outlined',
+                color: 'error',
+                popConfirm: {
+                  title: t('common.deleteConfirm'),
+                  placement: 'left',
+                  confirm: handleDelete.bind(null, record),
+                },
+              },
+            ]"
+          />
+        </template>
+      </template>
+    </BasicTable>
+    <DictionaryDrawer @register="registerDrawer" @success="handleSuccess" />
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { useRouter } from 'vue-router';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+
+  import { useDrawer } from '/@/components/Drawer';
+  import DictionaryDrawer from './detailDrawer.vue';
+  import { useI18n } from 'vue-i18n';
+  import { useMessage } from '/@/hooks/web/useMessage';
+
+  import { columns } from './dictionary.data';
+  import { deleteDictionary, getDictionaryDetailList } from '/@/api/sys/dictionary';
+
+  export default defineComponent({
+    name: 'DictionaryDetail',
+    components: { BasicTable, DictionaryDrawer, TableAction },
+    setup() {
+      const { t } = useI18n();
+      const [registerDrawer, { openDrawer }] = useDrawer();
+      const { notification } = useMessage();
+      const { currentRoute } = useRouter();
+
+      const [registerTable, { reload }] = useTable({
+        title: t('sys.dictionary.dictionaryDetailList'),
+        api: getDictionaryDetailList,
+        columns,
+        formConfig: {
+          labelWidth: 120,
+          schemas: [
+            {
+              field: 'name',
+              label: t('sys.dictionary.name'),
+              defaultValue: currentRoute.value.query.name,
+              component: 'Input',
+              colProps: { span: 8 },
+              rules: [{ max: 10 }],
+            },
+          ],
+        },
+        useSearchForm: true,
+        showTableSetting: true,
+        bordered: true,
+        showIndexColumn: false,
+        actionColumn: {
+          width: 30,
+          title: t('common.action'),
+          dataIndex: 'action',
+          fixed: undefined,
+        },
+      });
+
+      function handleCreate() {
+        openDrawer(true, {
+          isUpdate: false,
+        });
+      }
+
+      function handleEdit(record: Recordable) {
+        openDrawer(true, {
+          record,
+          isUpdate: true,
+        });
+      }
+
+      async function handleDelete(record: Recordable) {
+        const result = await deleteDictionary({ id: record.id }, 'modal');
+        notification.success({
+          message: t('common.successful'),
+          description: t(result.msg),
+          duration: 3,
+        });
+        reload();
+      }
+
+      function handleSuccess() {
+        reload();
+      }
+
+      return {
+        t,
+        registerTable,
+        registerDrawer,
+        handleCreate,
+        handleEdit,
+        handleDelete,
+        handleSuccess,
+      };
+    },
+  });
+</script>