feat(系统模块): 添加分类字典功能

3 years ago · 0b9b14692f
5 changed files with 356 additions and 0 deletions
--- a/src/modules/system/views/category/CategoryListView.api.ts
+++ b/src/modules/system/views/category/CategoryListView.api.ts
@ -0,0 +1,54 @@
+import { ApiServiceEnum, defHttp } from '@/utils/http/axios';
+
+enum Api {
+  list = '/sys/category/list',
+  saveUpdate = '/sys/category/saveUpdate',
+  batchDeleteById = '/sys/category/batchDeleteById',
+  getById = '/sys/category/getById',
+}
+
+export const listApi = (params: Recordable = {}, parentId = 0) => {
+  if (params) {
+    params = {
+      ...params,
+      parameter: {
+        ...params.parameter,
+        'parentId@=': parentId,
+      },
+    };
+  }
+  return defHttp.post({
+    service: ApiServiceEnum.SMART_SYSTEM,
+    url: Api.list,
+    data: {
+      sortName: 'seq',
+      ...params,
+    },
+  });
+};
+
+export const saveUpdateApi = (data) => {
+  return defHttp.post({
+    service: ApiServiceEnum.SMART_SYSTEM,
+    url: Api.saveUpdate,
+    data,
+  });
+};
+
+export const getByIdApi = async (id: number) => {
+  const result = await defHttp.post({
+    service: ApiServiceEnum.SMART_SYSTEM,
+    url: Api.getById,
+    data: id,
+  });
+  result.parentName = result.parent?.categoryName || '根目录';
+  return result;
+};
+
+export const deleteApi = (idList: number[]) => {
+  return defHttp.post({
+    service: ApiServiceEnum.SMART_SYSTEM,
+    url: Api.batchDeleteById,
+    data: idList,
+  });
+};
--- a/src/modules/system/views/category/CategoryListView.config.ts
+++ b/src/modules/system/views/category/CategoryListView.config.ts
@ -0,0 +1,134 @@
+import type { SmartColumn, SmartSearchFormSchema } from '@/components/SmartTable';
+import type { FormSchema } from '@/components/Form';
+
+export const getTableColumns = (): SmartColumn[] => {
+  return [
+    {
+      type: 'checkbox',
+      width: 60,
+      align: 'center',
+      fixed: 'left',
+    },
+    {
+      field: 'categoryCode',
+      title: '{system.views.category.title.categoryCode}',
+      minWidth: 240,
+      fixed: 'left',
+      treeNode: true,
+    },
+    {
+      field: 'categoryName',
+      title: '{system.views.category.title.categoryName}',
+      width: 200,
+    },
+    {
+      field: 'seq',
+      title: '{common.table.seq}',
+      width: 120,
+      sortable: true,
+    },
+    {
+      field: 'remark',
+      title: '{common.table.remark}',
+      width: 200,
+    },
+    {
+      field: 'createTime',
+      title: '{common.table.createTime}',
+      width: 170,
+    },
+    {
+      field: 'createBy',
+      title: '{common.table.createUser}',
+      width: 120,
+    },
+    {
+      field: 'updateTime',
+      title: '{common.table.updateTime}',
+      width: 170,
+    },
+    {
+      field: 'updateBy',
+      title: '{common.table.updateUser}',
+      width: 120,
+    },
+    {
+      field: 'id',
+      title: '{common.table.operation}',
+      fixed: 'right',
+      width: 200,
+      slots: {
+        default: 'table-option',
+      },
+    },
+  ];
+};
+
+export const getFormSchemas = (t: Function): FormSchema[] => {
+  return [
+    {
+      field: 'id',
+      label: '',
+      component: 'Input',
+      show: false,
+    },
+    {
+      field: 'parentId',
+      label: '',
+      component: 'Input',
+      show: false,
+    },
+    {
+      field: 'parentName',
+      label: t('system.views.category.title.parentName'),
+      component: 'Input',
+      componentProps: {
+        disabled: true,
+      },
+    },
+    {
+      field: 'categoryCode',
+      label: t('system.views.category.title.categoryCode'),
+      component: 'Input',
+      required: true,
+    },
+    {
+      field: 'categoryName',
+      label: t('system.views.category.title.categoryName'),
+      component: 'Input',
+      required: true,
+    },
+    {
+      field: 'seq',
+      label: t('common.table.seq'),
+      component: 'InputNumber',
+      componentProps: {
+        style: 'width: 100%',
+      },
+      required: true,
+      defaultValue: 1,
+    },
+    {
+      field: 'remark',
+      label: t('common.table.remark'),
+      component: 'Input',
+    },
+  ];
+};
+
+export const getSearchFormSchemas = (t: Function): SmartSearchFormSchema[] => {
+  return [
+    {
+      field: 'categoryCode',
+      label: t('system.views.category.title.categoryCode'),
+      component: 'Input',
+      searchSymbol: 'like',
+    },
+    {
+      field: 'categoryCode',
+      label: t('system.views.category.title.categoryName'),
+      component: 'Input',
+      searchSymbol: 'like',
+    },
+  ];
+};
--- a/src/modules/system/views/category/CategoryListView.vue
+++ b/src/modules/system/views/category/CategoryListView.vue
@ -0,0 +1,110 @@
+<template>
+  <div class="full-height page-container">
+    <SmartTable :size="getTableSize" @register="registerTable">
+      <template #table-option="{ row }">
+        <SmartVxeTableAction :actions="getTableActions(row)" />
+      </template>
+    </SmartTable>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import type { ActionItem } from '@/components/SmartTable';
+
+  import { useI18n } from '@/hooks/web/useI18n';
+  import { useSizeSetting } from '@/hooks/setting/UseSizeSetting';
+
+  import { SmartTable, SmartVxeTableAction, useSmartTable } from '@/components/SmartTable';
+
+  import { getFormSchemas, getTableColumns, getSearchFormSchemas } from './CategoryListView.config';
+  import { listApi, deleteApi, saveUpdateApi, getByIdApi } from './CategoryListView.api';
+
+  const { t } = useI18n();
+  const { getTableSize } = useSizeSetting();
+
+  const getTableActions = (row): ActionItem[] => {
+    return [
+      {
+        label: t('system.views.category.button.addChild'),
+        onClick: () => showAddModal({ parentId: row.id, parentName: row.categoryName }),
+      },
+      {
+        label: t('common.button.edit'),
+        onClick: () => editByRowModal(row),
+      },
+      {
+        label: t('common.button.delete'),
+        onClick: () => deleteByRow(row),
+        danger: true,
+      },
+    ];
+  };
+
+  const [registerTable, { showAddModal, editByRowModal, deleteByRow }] = useSmartTable({
+    columns: getTableColumns(),
+    border: true,
+    height: 'auto',
+    useSearchForm: true,
+    pagerConfig: true,
+    rowConfig: {
+      keyField: 'id',
+      isCurrent: true,
+    },
+    treeConfig: {
+      parentField: 'parentId',
+      lazy: true,
+      reserve: true,
+      rowField: 'id',
+      loadMethod: async ({ row }) => {
+        return listApi({}, row.id);
+      },
+    },
+    addEditConfig: {
+      formConfig: {
+        schemas: getFormSchemas(t),
+        baseColProps: { span: 24 },
+        labelCol: { span: 6 },
+        wrapperCol: { span: 17 },
+      },
+    },
+    toolbarConfig: {
+      refresh: true,
+      buttons: [
+        {
+          code: 'ModalAdd',
+          props: {
+            onClick: () => showAddModal({ parentId: 0, parentName: '根节点' }),
+          },
+        },
+      ],
+    },
+    sortConfig: {
+      remote: true,
+      defaultSort: {
+        field: 'seq',
+        order: 'asc',
+      },
+    },
+    proxyConfig: {
+      ajax: {
+        query: (params) => listApi(params.ajaxParameter),
+        save: ({ body: { insertRecords, updateRecords } }) =>
+          saveUpdateApi([...insertRecords, ...updateRecords][0]),
+        delete: ({ body: { removeRecords } }) => deleteApi(removeRecords.map((item) => item.id)),
+        getById: (params) => getByIdApi(params.id),
+      },
+    },
+    searchFormConfig: {
+      schemas: getSearchFormSchemas(t),
+      searchWithSymbol: true,
+      compact: true,
+      actionColOptions: {
+        span: undefined,
+      },
+      colon: true,
+      layout: 'inline',
+    },
+  });
+</script>
+
+<style scoped></style>
--- a/src/modules/system/views/category/lang/en_US.ts
+++ b/src/modules/system/views/category/lang/en_US.ts
@ -0,0 +1,28 @@
+/**
+ * 分类字段 国际化信息
+ */
+export default {
+  trans: true,
+  key: 'system.views.category',
+  data: {
+    title: {
+      categoryCode: 'Category code',
+      categoryName: 'Category name',
+      createBy: 'Create user',
+      updateBy: 'Update user',
+      parentName: 'Parent name',
+    },
+    validate: {
+      categoryCode: 'Please enter category code',
+      categoryName: 'Please enter category name',
+    },
+    rules: {},
+    search: {
+      categoryCode: 'Please enter category code',
+      categoryName: 'Please enter category name',
+    },
+    button: {
+      addChild: 'Add Child',
+    },
+  },
+};
--- a/src/modules/system/views/category/lang/zh_CN.ts
+++ b/src/modules/system/views/category/lang/zh_CN.ts
@ -0,0 +1,30 @@
+/**
+ * 分类字段 国际化信息
+ */
+export default {
+  trans: true,
+  key: 'system.views.category',
+  data: {
+    title: {
+      categoryCode: '分类编码',
+      categoryName: '分类名称',
+      createBy: 'createBy',
+      updateBy: 'updateBy',
+      parentName: '上级',
+    },
+    validate: {
+      id: '请输入',
+      parentId: '请输入',
+      categoryCode: '请输入分类编码',
+      categoryName: '请输入分类名称',
+    },
+    rules: {},
+    search: {
+      categoryCode: '请输入分类编码',
+      categoryName: '请输入分类名称',
+    },
+    button: {
+      addChild: '添加下级',
+    },
+  },
+};