feat(系统模块): 添加数据字典功能

src/modules/system/views/dataDict/DataDictGroup.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="full-height" style="margin-right: 5px">
+    <SmartTable @register="registerTable" @current-change="handleCurrentChange" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { useI18n } from '@/hooks/web/useI18n';
+  import { useSmartTable, SmartTable } from '@/components/SmartTable';
+
+  import {
+    getDataDictGroupColumns,
+    getDataDictGroupSearchSchemas,
+    getDataDictGroupAddEditSchemas,
+  } from './DataDictListView.config';
+  import {
+    listDictApi,
+    getByIdDictApi,
+    deleteDictApi,
+    batchSaveUpdateDictApi,
+  } from './DataDictListView.api';
+
+  const emit = defineEmits(['code-change']);
+
+  const { t } = useI18n();
+
+  const handleCurrentChange = ({ row }: any) => {
+    emit('code-change', row.id);
+  };
+
+  const [registerTable] = useSmartTable({
+    columns: getDataDictGroupColumns(t),
+    border: true,
+    height: 'auto',
+    highlightHoverRow: true,
+    highlightCurrentRow: true,
+    stripe: true,
+    pagerConfig: true,
+    useSearchForm: true,
+    searchFormConfig: {
+      colon: true,
+      compact: true,
+      searchWithSymbol: true,
+      schemas: getDataDictGroupSearchSchemas(t),
+      layout: 'inline',
+      actionColOptions: {
+        span: undefined,
+      },
+      // baseColProps: {
+      //   span: 8,
+      // },
+    },
+    addEditConfig: {
+      formConfig: {
+        schemas: getDataDictGroupAddEditSchemas(t),
+        baseColProps: {
+          span: 24,
+        },
+        labelCol: {
+          span: 5,
+        },
+        wrapperCol: {
+          span: 18,
+        },
+      },
+    },
+    proxyConfig: {
+      ajax: {
+        query: ({ ajaxParameter }) => {
+          const parameter = {
+            sortName: 'seq',
+            ...ajaxParameter,
+          };
+          return listDictApi(parameter);
+        },
+        save: ({ body: { insertRecords, updateRecords } }) =>
+          batchSaveUpdateDictApi([...insertRecords, ...updateRecords]),
+        delete: ({ body: { removeRecords } }) => deleteDictApi(removeRecords),
+        getById: (params) => getByIdDictApi(params.id),
+      },
+    },
+    columnConfig: {
+      resizable: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      zoom: true,
+      custom: true,
+      buttons: [{ code: 'ModalAdd' }, { code: 'ModalEdit' }, { code: 'delete' }],
+    },
+  });
+</script>
+
+<style scoped></style>

src/modules/system/views/dataDict/DataDictGroupHook.ts

@@ -0,0 +1,40 @@
+import { ApiServiceEnum, defHttp } from '@/utils/http/axios';
+
+/**
+ * 通过ID查询
+ * @param id ID
+ */
+export const handleGetById = async (id: string) => {
+  return await defHttp.post({
+    service: ApiServiceEnum.SMART_SYSTEM,
+    url: 'sys/dict/getById',
+    data: { id: id },
+  });
+};
+
+/**
+ * 添加保存函数
+ * @param model 添加保存参数
+ */
+export const handleSaveUpdate = async (model: any) => {
+  return await defHttp.post({
+    service: ApiServiceEnum.SMART_SYSTEM,
+    url: 'sys/dict/saveUpdate',
+    data: model,
+  });
+};
+
+/**
+ * 删除函数
+ * @param idList ID列表
+ */
+export const handleDelete = async (idList: Array<any>) => {
+  return await defHttp.post(
+    {
+      service: ApiServiceEnum.SMART_SYSTEM,
+      url: 'sys/dict/batchDeleteById',
+      data: idList,
+    },
+    { errorMessageMode: 'modal' },
+  );
+};

src/modules/system/views/dataDict/DataDictItem.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="full-height">
+    <SmartTable @register="registerTable" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { propTypes } from '@/utils/propTypes';
+  import { useI18n } from '@/hooks/web/useI18n';
+  import { useSmartTable, SmartTable } from '@/components/SmartTable';
+
+  import { getDataDictItemColumns, getDataDictItemAddEditSchemas } from './DataDictListView.config';
+  import {
+    listDictItemApi,
+    deleteDictItemApi,
+    batchSaveUpdateDictItemApi,
+    getByIdDictItemApi,
+  } from './DataDictListView.api';
+  import { watch } from 'vue';
+
+  const props = defineProps({
+    dictId: propTypes.number,
+  });
+
+  const { t } = useI18n();
+
+  watch(
+    () => props.dictId,
+    (value) => {
+      if (value) {
+        reload();
+      }
+    },
+  );
+
+  const [registerTable, { reload }] = useSmartTable({
+    columns: getDataDictItemColumns(t),
+    border: true,
+    height: 'auto',
+    stripe: true,
+    highlightHoverRow: true,
+    pagerConfig: true,
+    sortConfig: {
+      remote: true,
+      defaultSort: {
+        field: 'seq',
+        order: 'desc',
+      },
+    },
+    addEditConfig: {
+      formConfig: {
+        schemas: getDataDictItemAddEditSchemas(t),
+        baseColProps: {
+          span: 24,
+        },
+        labelCol: {
+          span: 5,
+        },
+        wrapperCol: {
+          span: 18,
+        },
+      },
+    },
+    proxyConfig: {
+      autoLoad: false,
+      ajax: {
+        query: ({ ajaxParameter }) => {
+          const parameter = {
+            sortName: 'seq',
+            ...ajaxParameter,
+            parameter: {
+              ...ajaxParameter?.parameter,
+              'dictId@=': props.dictId,
+            },
+          };
+          return listDictItemApi(parameter);
+        },
+        save: ({ body: { insertRecords, updateRecords } }) => {
+          insertRecords.forEach((item) => (item.dictId = props.dictId));
+          return batchSaveUpdateDictItemApi([...insertRecords, ...updateRecords]);
+        },
+        delete: ({ body: { removeRecords } }) => deleteDictItemApi(removeRecords),
+        getById: (params) => getByIdDictItemApi(params),
+      },
+    },
+    columnConfig: {
+      resizable: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      zoom: true,
+      custom: true,
+      buttons: [{ code: 'ModalAdd' }, { code: 'ModalEdit' }, { code: 'delete' }],
+    },
+  });
+</script>
+
+<style scoped></style>

src/modules/system/views/dataDict/DataDictListView.api.ts

@@ -0,0 +1,79 @@
+import { ApiServiceEnum, defHttp } from '@/utils/http/axios';
+
+enum Api {
+  listDict = 'sys/dict/list',
+  getByIdDict = 'sys/dict/getById',
+  batchSaveUpdateDict = 'sys/dict/batchSaveUpdate',
+  deleteDict = 'sys/dict/batchDeleteById',
+
+  listItem = 'sys/dictItem/list',
+  getByIdItem = 'sys/dictItem/get',
+  batchSaveUpdateItem = 'sys/dictItem/batchSaveUpdate',
+  deleteItem = 'sys/dictItem/batchDelete',
+}
+
+export const listDictApi = (parameter) => {
+  return defHttp.post({
+    service: ApiServiceEnum.SMART_SYSTEM,
+    url: Api.listDict,
+    data: parameter,
+  });
+};
+
+export const getByIdDictApi = (id) => {
+  return defHttp.post({
+    service: ApiServiceEnum.SMART_SYSTEM,
+    url: Api.getByIdDict,
+    data: {
+      id: id,
+    },
+  });
+};
+
+export const batchSaveUpdateDictApi = (parameter: any[]) => {
+  return defHttp.post({
+    service: ApiServiceEnum.SMART_SYSTEM,
+    url: Api.batchSaveUpdateDict,
+    data: parameter,
+  });
+};
+
+export const deleteDictApi = (parameter: any[]) => {
+  return defHttp.post({
+    service: ApiServiceEnum.SMART_SYSTEM,
+    url: Api.deleteDict,
+    data: parameter.map((item) => item.id),
+  });
+};
+
+export const listDictItemApi = (parameter) => {
+  return defHttp.post({
+    service: ApiServiceEnum.SMART_SYSTEM,
+    url: Api.listItem,
+    data: parameter,
+  });
+};
+
+export const getByIdDictItemApi = (parameter) => {
+  return defHttp.post({
+    service: ApiServiceEnum.SMART_SYSTEM,
+    url: Api.getByIdItem,
+    data: parameter.id,
+  });
+};
+
+export const batchSaveUpdateDictItemApi = (parameter: any[]) => {
+  return defHttp.post({
+    service: ApiServiceEnum.SMART_SYSTEM,
+    url: Api.batchSaveUpdateItem,
+    data: parameter,
+  });
+};
+
+export const deleteDictItemApi = (parameter: any[]) => {
+  return defHttp.post({
+    service: ApiServiceEnum.SMART_SYSTEM,
+    url: Api.deleteItem,
+    data: parameter.map((item) => item.id),
+  });
+};

src/modules/system/views/dataDict/DataDictListView.config.ts

@@ -0,0 +1,242 @@
+import type { SmartColumn, SmartSearchFormSchema } from '@/components/SmartTable';
+import { tableUseYnClass } from '@/components/SmartTable';
+import { FormSchema } from '@/components/Form';
+
+export const getDataDictGroupColumns = (): SmartColumn[] => {
+  return [
+    {
+      type: 'checkbox',
+      width: 60,
+      align: 'center',
+      fixed: 'left',
+    },
+    {
+      title: '{system.views.dictGroup.title.dictCode}',
+      field: 'dictCode',
+      width: 180,
+      // filters: [{ data: '' }],
+      // slots: {
+      //   filter: 'dictCode-filter',
+      // },
+      fixed: 'left',
+    },
+    {
+      title: '{system.views.dictGroup.title.dictName}',
+      field: 'dictName',
+      minWidth: 180,
+      // filters: [{ data: '' }],
+      // slots: {
+      //   filter: 'dictName-filter',
+      // },
+    },
+    {
+      title: '{common.table.seq}',
+      field: 'seq',
+      sortable: true,
+      width: 120,
+    },
+    {
+      ...tableUseYnClass(),
+      sortable: true,
+      width: 120,
+      // filterMultiple: false,
+      // filters: [
+      //   { label: 'YES', data: true },
+      //   { label: 'NO', data: false },
+      // ],
+    },
+    {
+      title: '{common.table.remark}',
+      field: 'remark',
+      width: 120,
+      // filters: [{ data: '' }],
+      // slots: {
+      //   filter: 'dictName-filter',
+      // },
+    },
+  ];
+};
+
+export const getDataDictGroupSearchSchemas = (t: Function): SmartSearchFormSchema[] => {
+  return [
+    {
+      label: t('system.views.dictGroup.title.dictCode'),
+      field: 'dictCode',
+      component: 'Input',
+      searchSymbol: 'like',
+      componentProps: {
+        style: { width: '120px' },
+      },
+    },
+    {
+      label: t('system.views.dictGroup.title.dictName'),
+      field: 'dictName',
+      component: 'Input',
+      searchSymbol: 'like',
+      componentProps: {
+        style: { width: '120px' },
+      },
+    },
+    {
+      label: t('system.views.userGroup.search.useYnTitle'),
+      field: 'useYn',
+      component: 'Select',
+      defaultValue: 1,
+      searchSymbol: '=',
+      componentProps: {
+        style: {
+          width: '80px',
+        },
+        options: [
+          {
+            label: t('common.form.use'),
+            value: 1,
+          },
+          {
+            label: t('common.form.noUse'),
+            value: 0,
+          },
+        ],
+      },
+    },
+  ];
+};
+
+export const getDataDictGroupAddEditSchemas = (t: Function): FormSchema[] => {
+  return [
+    {
+      label: '',
+      field: 'id',
+      component: 'Input',
+      show: false,
+    },
+    {
+      label: t('system.views.dictGroup.title.dictCode'),
+      field: 'dictCode',
+      component: 'Input',
+      required: true,
+    },
+    {
+      label: t('system.views.dictGroup.title.dictName'),
+      field: 'dictName',
+      component: 'Input',
+      required: true,
+    },
+    {
+      label: t('common.table.seq'),
+      field: 'seq',
+      component: 'InputNumber',
+      required: true,
+      defaultValue: 1,
+    },
+    {
+      label: t('common.table.useYn'),
+      field: 'useYn',
+      component: 'Switch',
+      defaultValue: true,
+    },
+    {
+      label: t('common.table.remark'),
+      field: 'remark',
+      component: 'Input',
+    },
+  ];
+};
+
+export const getDataDictItemColumns = (): SmartColumn[] => {
+  return [
+    {
+      type: 'checkbox',
+      width: 60,
+      align: 'center',
+      fixed: 'left',
+    },
+    {
+      field: 'dictItemCode',
+      fixed: 'left',
+      title: '{system.views.dictItem.title.dictItemCode}',
+      width: 160,
+    },
+    {
+      field: 'dictItemName',
+      title: '{system.views.dictItem.title.dictItemName}',
+      width: 180,
+    },
+    {
+      field: 'seq',
+      sortable: true,
+      title: '{common.table.seq}',
+      width: 100,
+    },
+    {
+      field: 'remark',
+      title: '{common.table.remark}',
+      width: 200,
+    },
+    {
+      ...tableUseYnClass(),
+      sortable: true,
+    },
+    {
+      field: 'createBy',
+      title: '{common.table.createUser}',
+      width: 120,
+    },
+    {
+      field: 'createTime',
+      title: '{common.table.createTime}',
+      width: 180,
+    },
+    {
+      field: 'updateBy',
+      title: '{common.table.updateUser}',
+      width: 120,
+    },
+    {
+      field: 'updateTime',
+      title: '{common.table.updateTime}',
+      width: 170,
+    },
+  ];
+};
+
+export const getDataDictItemAddEditSchemas = (t: Function): FormSchema[] => {
+  return [
+    {
+      label: 'id',
+      field: 'id',
+      component: 'Input',
+      show: false,
+    },
+    {
+      label: t('system.views.dictItem.title.dictItemCode'),
+      field: 'dictItemCode',
+      component: 'Input',
+      required: true,
+    },
+    {
+      label: t('system.views.dictItem.title.dictItemName'),
+      field: 'dictItemName',
+      component: 'Input',
+      required: true,
+    },
+    {
+      label: t('common.table.seq'),
+      field: 'seq',
+      component: 'InputNumber',
+      required: true,
+      defaultValue: 1,
+    },
+    {
+      label: t('common.table.useYn'),
+      field: 'useYn',
+      component: 'Switch',
+      defaultValue: true,
+    },
+    {
+      label: t('common.table.remark'),
+      field: 'remark',
+      component: 'Input',
+    },
+  ];
+};

src/modules/system/views/dataDict/DataDictListView.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="full-height page-container">
+    <LayoutSeparate :show-line="false" first-size="60%" class="full-height">
+      <template #first>
+        <DataDictGroup @code-change="handleCodeChange" />
+      </template>
+      <template #second>
+        <DataDictItem :dict-id="dictId" />
+      </template>
+    </LayoutSeparate>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent, ref } from 'vue';
+
+  import { LayoutSeparate } from '@/components/LayoutSeparate';
+
+  import DataDictGroup from './DataDictGroup.vue';
+  import DataDictItem from './DataDictItem.vue';
+
+  /**
+   * 数据字典页面
+   */
+  export default defineComponent({
+    name: 'DataDictListView',
+    components: {
+      LayoutSeparate,
+      DataDictGroup,
+      DataDictItem,
+    },
+    setup() {
+      const dictId = ref<number | undefined>();
+
+      const handleCodeChange = (id: number) => {
+        dictId.value = id;
+      };
+      return {
+        dictId,
+        handleCodeChange,
+      };
+    },
+  });
+</script>
+
+<style scoped></style>

src/modules/system/views/dataDict/lang/en_US.ts

@@ -0,0 +1,35 @@
+export default {
+  trans: true,
+  key: 'system.views',
+  data: {
+    dictGroup: {
+      title: {
+        dictCode: 'Dict code',
+        dictName: 'Dict name',
+      },
+      validate: {
+        dictCode: 'Please enter dict code',
+        dictName: 'Please enter dict name',
+      },
+    },
+    dictItem: {
+      title: {
+        dictCode: 'Dict code',
+        dictItemCode: 'Dict item code',
+        dictItemName: 'Dict item name',
+      },
+      validate: {
+        dictCode: 'Please enter dict code',
+        dictItemCode: 'Please enter dict item code',
+        dictItemName: 'Please enter dict item name',
+      },
+      rules: {
+        dictItemCode_NOT_EMPTY: 'Dict item code cannot be empty',
+        dictItemName_NOT_EMPTY: 'Dict item name cannot be empty',
+      },
+      message: {
+        dictCodeNull: 'Please select a dict first',
+      },
+    },
+  },
+};

src/modules/system/views/dataDict/lang/zh_CN.ts

@@ -0,0 +1,35 @@
+export default {
+  trans: true,
+  key: 'system.views',
+  data: {
+    dictGroup: {
+      title: {
+        dictCode: '字典编码',
+        dictName: '字典名称',
+      },
+      validate: {
+        dictCode: '请输入字典编码',
+        dictName: '请输入字典名称',
+      },
+    },
+    dictItem: {
+      title: {
+        dictCode: '字典编码',
+        dictItemCode: '字典项编码',
+        dictItemName: '字典项名称',
+      },
+      validate: {
+        dictCode: '请输入字典编码',
+        dictItemCode: '请输入字典项编码',
+        dictItemName: '请输入字典项名称',
+      },
+      rules: {
+        dictItemCode_NOT_EMPTY: '字典项编码不能为空',
+        dictItemName_NOT_EMPTY: '字典项名称不能为空',
+      },
+      message: {
+        dictCodeNull: '请先选择字典',
+      },
+    },
+  },
+};