feat(系统模块): 添加系统管理页面

src/modules/system/views/system/SysSystemListView.api.ts

@@ -0,0 +1,61 @@
+import { ApiServiceEnum, defHttp } from '@/utils/http/axios';
+
+enum Api {
+  list = 'sys/system/listAuthUser',
+  saveUpdate = 'sys/system/saveUpdate',
+  delete = 'sys/system/batchDeleteById',
+  getById = 'sys/system/getById',
+  setUser = 'sys/system/setUser',
+  getRelatedUserId = 'sys/system/getRelatedUserId',
+}
+
+export const listApi = (params) => {
+  return defHttp.post({
+    service: ApiServiceEnum.SMART_SYSTEM,
+    url: Api.list,
+    data: {
+      ...params,
+    },
+  });
+};
+
+export const saveUpdateApi = (insertRecords, updateRecords) => {
+  return defHttp.post({
+    service: ApiServiceEnum.SMART_SYSTEM,
+    url: Api.saveUpdate,
+    data: [...insertRecords, ...updateRecords][0],
+  });
+};
+
+export const deleteApi = (removeRecords: Recordable[]) => {
+  return defHttp.post({
+    service: ApiServiceEnum.SMART_SYSTEM,
+    url: Api.delete,
+    data: removeRecords.map((item) => item.id),
+  });
+};
+export const getByIdApi = (id: number) => {
+  return defHttp.post({
+    service: ApiServiceEnum.SMART_SYSTEM,
+    url: Api.getById,
+    data: id,
+  });
+};
+
+export const setUserApi = (data: { systemId: number; userIdList: number[] }) => {
+  return defHttp.post({
+    service: ApiServiceEnum.SMART_SYSTEM,
+    url: Api.setUser,
+    data,
+  });
+};
+
+export const getRelatedUserIdApi = (systemId: number) => {
+  return defHttp.post({
+    service: ApiServiceEnum.SMART_SYSTEM,
+    url: Api.getRelatedUserId,
+    data: {
+      id: systemId,
+    },
+  });
+};

src/modules/system/views/system/SysSystemListView.config.ts

@@ -0,0 +1,141 @@
+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: 'code',
+      title: '{system.views.system.title.code}',
+      width: 160,
+      fixed: 'left',
+    },
+    {
+      field: 'name',
+      title: '{system.views.system.title.name}',
+      width: 160,
+    },
+    {
+      field: 'remark',
+      title: '{common.table.remark}',
+      width: 200,
+    },
+    {
+      field: 'enterprise',
+      title: '{system.views.system.title.enterprise}',
+      width: 120,
+    },
+    {
+      field: 'version',
+      title: '{system.views.system.title.version}',
+      width: 120,
+    },
+    {
+      field: 'seq',
+      title: '{common.table.seq}',
+      width: 100,
+      sortable: true,
+    },
+    {
+      field: 'createTime',
+      title: '{common.table.createTime}',
+      width: 170,
+      sortable: true,
+    },
+    {
+      field: 'createBy',
+      title: '{common.table.createUser}',
+      width: 120,
+    },
+    {
+      field: 'updateTime',
+      title: '{common.table.updateTime}',
+      width: 170,
+      sortable: true,
+    },
+    {
+      field: 'updateBy',
+      title: '{common.table.updateUser}',
+      width: 120,
+    },
+    {
+      field: 'id',
+      title: '{common.table.operation}',
+      fixed: 'right',
+      width: 170,
+      slots: {
+        default: 'table-option',
+      },
+    },
+  ];
+};
+
+export const getFormSchemas = (t: Function): FormSchema[] => {
+  return [
+    {
+      field: 'id',
+      label: '',
+      component: 'Input',
+      show: false,
+    },
+    {
+      field: 'code',
+      label: t('system.views.system.title.code'),
+      component: 'Input',
+      required: true,
+    },
+    {
+      field: 'name',
+      label: t('system.views.system.title.name'),
+      component: 'Input',
+      required: true,
+    },
+    {
+      field: 'remark',
+      label: t('common.table.remark'),
+      component: 'Input',
+    },
+    {
+      field: 'enterprise',
+      label: t('system.views.system.title.enterprise'),
+      component: 'Input',
+    },
+    {
+      field: 'version',
+      label: t('system.views.system.title.version'),
+      component: 'Input',
+    },
+    {
+      field: 'seq',
+      label: t('common.table.seq'),
+      component: 'InputNumber',
+      componentProps: {
+        style: 'width: 100%',
+      },
+      defaultValue: 1,
+      required: true,
+    },
+  ];
+};
+
+export const getSearchFormSchemas = (t: Function): SmartSearchFormSchema[] => {
+  return [
+    {
+      field: 'code',
+      label: t('system.views.system.title.code'),
+      component: 'Input',
+      searchSymbol: 'like',
+    },
+    {
+      field: 'name',
+      label: t('system.views.system.title.name'),
+      component: 'Input',
+      searchSymbol: 'like',
+    },
+  ];
+};

src/modules/system/views/system/SysSystemListView.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="full-height page-container">
+    <SmartTable @register="registerTable" :size="getTableSize">
+      <template #table-option="{ row }">
+        <SmartVxeTableAction :actions="getActions(row)" />
+      </template>
+    </SmartTable>
+    <SmartUserSelectModal
+      width="700px"
+      title="选择人员"
+      @register="registerModal"
+      @selected="handleUserSelected"
+      :select-values="selectUserList"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { useI18n } from '@/hooks/web/useI18n';
+  import { useSizeSetting } from '@/hooks/setting/UseSizeSetting';
+
+  import { SmartUserSelectModal } from '@/components/Form';
+  import {
+    ActionItem,
+    SmartTable,
+    SmartVxeTableAction,
+    useSmartTable,
+  } from '@/components/SmartTable';
+
+  import {
+    getTableColumns,
+    getFormSchemas,
+    getSearchFormSchemas,
+  } from './SysSystemListView.config';
+  import { listApi, deleteApi, getByIdApi, saveUpdateApi } from './SysSystemListView.api';
+  import { useSetUser } from './SysSystemListViewHooks';
+
+  const { t } = useI18n();
+  const { getTableSize } = useSizeSetting();
+
+  const { selectUserList, handleUserSelected, registerModal, handleShowSetUser } = useSetUser(t);
+
+  const getActions = (row: Recordable): ActionItem[] => {
+    return [
+      {
+        label: t('common.button.edit'),
+        onClick: () => editByRowModal(row),
+      },
+      {
+        label: t('common.button.delete'),
+        onClick: () => deleteByRow(row),
+        danger: true,
+      },
+      {
+        label: t('system.views.system.button.setUser'),
+        onClick: () => {
+          handleShowSetUser(row);
+        },
+      },
+    ];
+  };
+
+  const [registerTable, { editByRowModal, deleteByRow }] = useSmartTable({
+    columns: getTableColumns(),
+    height: 'auto',
+    useSearchForm: true,
+    columnConfig: {
+      resizable: true,
+    },
+    pagerConfig: true,
+    addEditConfig: {
+      formConfig: {
+        schemas: getFormSchemas(t),
+        baseColProps: { span: 24 },
+        labelCol: { span: 6 },
+        wrapperCol: { span: 17 },
+      },
+    },
+    toolbarConfig: {
+      refresh: true,
+      column: {
+        columnOrder: true,
+      },
+      zoom: true,
+      showSearch: true,
+      buttons: [
+        {
+          code: 'ModalAdd',
+        },
+        {
+          code: 'delete',
+        },
+      ],
+    },
+    sortConfig: {
+      remote: true,
+      defaultSort: {
+        field: 'seq',
+        order: 'asc',
+      },
+    },
+    proxyConfig: {
+      ajax: {
+        query: (params) => listApi(params.ajaxParameter),
+        save: ({ body: { insertRecords, updateRecords } }) =>
+          saveUpdateApi(insertRecords, updateRecords),
+        delete: ({ body: { removeRecords } }) => deleteApi(removeRecords),
+        getById: (params) => getByIdApi(params.id),
+      },
+    },
+    searchFormConfig: {
+      compact: true,
+      schemas: getSearchFormSchemas(t),
+      searchWithSymbol: true,
+      layout: 'inline',
+      actionColOptions: {
+        span: undefined,
+      },
+      // labelCol: {
+      //   span: 8,
+      // },
+      colon: true,
+    },
+  });
+</script>
+
+<style scoped></style>

src/modules/system/views/system/SysSystemListViewHooks.ts

@@ -0,0 +1,45 @@
+import { ref, unref } from 'vue';
+import { message } from 'ant-design-vue';
+import { useModal } from '@/components/Modal';
+
+import { setUserApi, getRelatedUserIdApi } from './SysSystemListView.api';
+
+export const useSetUser = (t: Function) => {
+  const [registerModal, { openModal, closeModal, setModalProps }] = useModal();
+  const selectUserList = ref<number[]>([]);
+  const currentSystemRef = ref<Recordable | null>(null);
+
+  const handleUserSelected = async (userIdList: number[]) => {
+    selectUserList.value = userIdList;
+    try {
+      setModalProps({ confirmLoading: true });
+      await setUserApi({
+        userIdList,
+        systemId: unref(currentSystemRef)!.id,
+      });
+      message.success(t('common.message.OperationSucceeded'));
+      closeModal();
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  };
+
+  const handleShowSetUser = async (row: Recordable) => {
+    currentSystemRef.value = row;
+    // 查询关联的用户信息
+    openModal(true);
+    try {
+      setModalProps({ loading: true });
+      selectUserList.value = await getRelatedUserIdApi(row.id);
+    } finally {
+      setModalProps({ loading: false });
+    }
+  };
+
+  return {
+    selectUserList,
+    handleUserSelected,
+    registerModal,
+    handleShowSetUser,
+  };
+};

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

@@ -0,0 +1,32 @@
+/**
+ * 系统管理表 国际化信息
+ */
+export default {
+  trans: true,
+  key: 'system.views.system',
+  data: {
+    title: {
+      code: 'code',
+      name: 'name',
+      enterprise: 'enterprise',
+      version: 'version',
+    },
+    validate: {
+      code: 'Please enter code',
+      name: 'Please enter name',
+      enterprise: 'Please enter enterprise',
+      version: 'Please enter version',
+    },
+    rules: {
+      code_NOT_EMPTY: 'Please enter code',
+      name_NOT_EMPTY: 'Please enter name',
+    },
+    search: {
+      code: 'Please enter code',
+      name: 'Please enter name',
+    },
+    button: {
+      setUser: 'Set user',
+    },
+  },
+};

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

@@ -0,0 +1,36 @@
+/**
+ * 系统管理表 国际化信息
+ */
+export default {
+  trans: true,
+  key: 'system.views.system',
+  data: {
+    title: {
+      id: 'id',
+      code: '系统编码',
+      name: '系统名称',
+      enterprise: '所属公司',
+      version: '系统版本',
+      createBy: 'createBy',
+      updateBy: 'updateBy',
+    },
+    validate: {
+      id: '请输入',
+      code: '请输入系统编码',
+      name: '请输入系统名称',
+      enterprise: '请输入所属公司',
+      version: '请输入系统版本',
+    },
+    rules: {
+      code_NOT_EMPTY: '请输入系统编码',
+      name_NOT_EMPTY: '请输入系统名称',
+    },
+    search: {
+      code: '请输入系统编码',
+      name: '请输入系统名称',
+    },
+    button: {
+      setUser: '设置人员',
+    },
+  },
+};