feat(组件): 表格组件根据loadListFunc函数返回值类型约束表格数据data的类型&部分组件调整

2023-08-16 17:54:06 +08:00 · 2023-08-16 17:54:06 +08:00 · 7c5792d539
parent 8df7cba2e5
commit 7c5792d539
19 changed files with 89 additions and 183 deletions
--- a/frontend/src/api/modules/setting/config.ts
+++ b/frontend/src/api/modules/setting/config.ts
@ -14,8 +14,8 @@ import {
  AddAuthUrl,
  DeleteAuthUrl,
 } from '@/api/requrls/setting/config';
-import { TableQueryParams } from '@/models/common';

+import type { CommonList, TableQueryParams } from '@/models/common';
 import type {
  SaveInfoParams,
  TestEmailParams,
@ -65,7 +65,7 @@ export function getPageConfig() {

 // 获取认证源列表
 export function getAuthList(data: TableQueryParams) {
-  return MSR.post<AuthItem[]>({ url: GetAuthListUrl, data });
+  return MSR.post<CommonList<AuthItem>>({ url: GetAuthListUrl, data });
 }

 // 获取认证源详情
--- a/frontend/src/api/modules/setting/log.ts
+++ b/frontend/src/api/modules/setting/log.ts
@ -1,116 +1,15 @@
 import MSR from '@/api/http/index';
 import { GetLogListUrl, GetLogOptionstUrl } from '@/api/requrls/setting/log';

-import type { LogOptions } from '@/models/setting/log';
+import type { CommonList } from '@/models/common';
+import type { LogOptions, LogItem } from '@/models/setting/log';

 // 获取日志列表
 export function getLogList(data: any) {
-  return MSR.post({ url: GetLogListUrl, data });
+  return MSR.post<CommonList<LogItem>>({ url: GetLogListUrl, data });
 }

 // 获取日志操作范围选项
 export function getLogOptions() {
-  // return MSR.get<LogOptions>({ url: GetLogOptionstUrl });
-  return {
-    organizationList: [
-      {
-        id: 'bfa4feec-276f-11ee-bc36-0242ac1e0a05',
-        name: '默认组织默认组织默认组织默认组织默认组织默认组织默认组织默认组织默认组织默认组织',
-      },
-      {
-        id: 'e21d5270-369e-11ee-93aa-0242ac1e0a02',
-        name: '测试组织2',
-      },
-      {
-        id: 'e2433740-369e-11ee-93aa-0242ac1e0a02',
-        name: '测试组织3',
-      },
-      {
-        id: 'e2817131-369e-11ee-93aa-0242ac1e0a02',
-        name: '测试组织4',
-      },
-      {
-        id: 'e28950e3-369e-11ee-93aa-0242ac1e0a02',
-        name: '测试组织5',
-      },
-      {
-        id: 'e2c03258-369e-11ee-93aa-0242ac1e0a02',
-        name: '测试组织6',
-      },
-      {
-        id: 'e2f08005-369e-11ee-93aa-0242ac1e0a02',
-        name: '测试组织7',
-      },
-      {
-        id: 'e30650b8-369e-11ee-93aa-0242ac1e0a02',
-        name: '测试组织8',
-      },
-      {
-        id: 'e3487cf7-369e-11ee-93aa-0242ac1e0a02',
-        name: '测试组织9',
-      },
-      {
-        id: 'e363b914-369e-11ee-93aa-0242ac1e0a02',
-        name: '测试组织10',
-      },
-      {
-        id: 'e36bd98b-369e-11ee-93aa-0242ac1e0a02',
-        name: '测试组织11',
-      },
-    ],
-    projectList: [
-      {
-        id: 'ab11c4a1-369f-11ee-93aa-0242ac1e0a02',
-        name: '测试2项目测试2项目测试2项目测试2项目测试2项目测试2项目测试2项目测试2项目测试2项目测试2项目测试2项目测试2项目',
-      },
-      {
-        id: 'ab2cf284-369f-11ee-93aa-0242ac1e0a02',
-        name: '测试3项目',
-      },
-      {
-        id: 'ab6ffa01-369f-11ee-93aa-0242ac1e0a02',
-        name: '测试4项目',
-      },
-      {
-        id: 'ab845cd2-369f-11ee-93aa-0242ac1e0a02',
-        name: '测试5项目',
-      },
-      {
-        id: 'ab8aef35-369f-11ee-93aa-0242ac1e0a02',
-        name: '测试6项目',
-      },
-      {
-        id: 'ab91ff63-369f-11ee-93aa-0242ac1e0a02',
-        name: '测试7项目',
-      },
-      {
-        id: 'abc542d5-369f-11ee-93aa-0242ac1e0a02',
-        name: '测试8项目',
-      },
-      {
-        id: 'abcc2352-369f-11ee-93aa-0242ac1e0a02',
-        name: '测试9项目',
-      },
-      {
-        id: 'abeeb108-369f-11ee-93aa-0242ac1e0a02',
-        name: '测试10项目',
-      },
-      {
-        id: 'ac4e4fc0-369f-11ee-93aa-0242ac1e0a02',
-        name: '测试11项目',
-      },
-      {
-        id: 'acb0831f-369f-11ee-93aa-0242ac1e0a02',
-        name: '测试12项目',
-      },
-      {
-        id: 'ad5a7bc0-369f-11ee-93aa-0242ac1e0a02',
-        name: '测试13项目',
-      },
-      {
-        id: 'bfa52f87-276f-11ee-bc36-0242ac1e0a05',
-        name: '默认项目',
-      },
-    ],
-  };
+  return MSR.get<LogOptions>({ url: GetLogOptionstUrl });
 }
--- a/frontend/src/api/modules/setting/member.ts
+++ b/frontend/src/api/modules/setting/member.ts
@ -10,11 +10,11 @@ import {
  getUserList,
  getProjectListUrl,
 } from '@/api/requrls/setting/member';
-import type { MemberList, AddorUpdateMemberModel, BatchAddProjectModel, LinkItem } from '@/models/setting/member';
-import type { TableQueryParams } from '@/models/common';
+import type { MemberItem, AddorUpdateMemberModel, BatchAddProjectModel, LinkItem } from '@/models/setting/member';
+import type { TableQueryParams, CommonList } from '@/models/common';
 // 获取成员列表
 export function getMemberList(data: TableQueryParams) {
-  return MSR.post<MemberList>({ url: GetMemberListUrl, data });
+  return MSR.post<CommonList<MemberItem>>({ url: GetMemberListUrl, data });
 }
 // 添加成员
 export function addOrUpdate(data: AddorUpdateMemberModel, type: string) {
--- a/frontend/src/api/modules/setting/resourcePool.ts
+++ b/frontend/src/api/modules/setting/resourcePool.ts
@ -15,11 +15,11 @@ import type {
  UpdateResourcePoolParams,
  ResourcePoolDetail,
 } from '@/models/setting/resourcePool';
-import type { TableQueryParams } from '@/models/common';
+import type { CommonList, TableQueryParams } from '@/models/common';

 // 获取资源池列表
 export function getPoolList(data: TableQueryParams) {
-  return MSR.post<ResourcePoolItem[]>({ url: PoolListUrl, data });
+  return MSR.post<CommonList<ResourcePoolItem>>({ url: PoolListUrl, data });
 }

 // 更新资源池信息
--- a/frontend/src/api/modules/setting/user.ts
+++ b/frontend/src/api/modules/setting/user.ts
@ -21,11 +21,11 @@ import type {
  ImportResult,
  BatchAddUserGroupParams,
 } from '@/models/setting/user';
-import type { TableQueryParams } from '@/models/common';
+import type { CommonList, TableQueryParams } from '@/models/common';

 // 获取用户列表
 export function getUserList(data: TableQueryParams) {
-  return MSR.post<UserListItem[]>({ url: GetUserListUrl, data });
+  return MSR.post<CommonList<UserListItem>>({ url: GetUserListUrl, data });
 }

 // 批量创建用户
--- a/frontend/src/components/pure/ms-table-more-action/types.ts
+++ b/frontend/src/components/pure/ms-table-more-action/types.ts
@ -1,8 +1,8 @@
 export interface ActionsItem {
  label?: string;
-  eventTag?: string;
-  isDivider?: boolean;
-  danger?: boolean;
+  eventTag?: string; // 事件标识
+  isDivider?: boolean; // 是否分割线，true 的话只展示分割线，没有其他内容
+  danger?: boolean; // 是否危险操作，true 的话会显示红色按钮
 }

 export type SelectedValue = string | number | Record<string, any> | undefined;
--- a/frontend/src/components/pure/ms-table/base-table.vue
+++ b/frontend/src/components/pure/ms-table/base-table.vue
@ -112,21 +112,15 @@
  import { useAttrs, computed, ref, onMounted } from 'vue';
  import { useAppStore, useTableStore } from '@/store';
  import selectAll from './select-all.vue';
-  import {
-    MsTableProps,
-    SelectAllEnum,
-    MsPaginationI,
-    BatchActionParams,
-    BatchActionConfig,
-    MsTableColumn,
-    SpecialColumnEnum,
-  } from './type';
+  import { SpecialColumnEnum, SelectAllEnum } from '@/enums/tableEnum';
  import BatchAction from './batchAction.vue';
  import MsPagination from '@/components/pure/ms-pagination/index';
-  import type { TableData } from '@arco-design/web-vue';
  import ColumnSelector from './columnSelector.vue';
  import MsIcon from '@/components/pure/ms-icon-font/index.vue';

+  import type { MsTableProps, MsPaginationI, BatchActionParams, BatchActionConfig, MsTableColumn } from './type';
+  import type { TableData } from '@arco-design/web-vue';
+
  const batchleft = ref('10px');
  const { t } = useI18n();
  const tableStore = useTableStore();
@ -157,10 +151,10 @@
  const editActiveKey = ref(-1);
  // 编辑input的Ref
  const currentInputRef = ref(null);
-  const { rowKey, editKey }: Partial<MsTableProps> = attrs;
+  const { rowKey, editKey }: Partial<MsTableProps<any>> = attrs;

  const setSelectAllTotal = (isAll: boolean) => {
-    const { data, msPagination }: Partial<MsTableProps> = attrs;
+    const { data, msPagination }: Partial<MsTableProps<any>> = attrs;
    if (isAll) {
      selectTotal.value = msPagination?.total || data?.length || appStore.pageSize;
    } else {
@ -188,7 +182,7 @@

  // 全选change事件
  const handleChange = (v: string) => {
-    const { data, msPagination }: Partial<MsTableProps> = attrs;
+    const { data, msPagination }: Partial<MsTableProps<any>> = attrs;
    isSelectAll.value = v === SelectAllEnum.ALL;
    if (v === SelectAllEnum.NONE) {
      selectionChange([], true);
--- a/frontend/src/components/pure/ms-table/select-all.vue
+++ b/frontend/src/components/pure/ms-table/select-all.vue
@ -14,7 +14,7 @@
 <script lang="ts" setup>
  import { ref, watchEffect } from 'vue';
  import { useI18n } from '@/hooks/useI18n';
-  import { SelectAllEnum } from './type';
+  import { SelectAllEnum } from '@/enums/tableEnum';
  import MsIcon from '../ms-icon-font/index.vue';

  const { t } = useI18n();
--- a/frontend/src/components/pure/ms-table/type.ts
+++ b/frontend/src/components/pure/ms-table/type.ts
@ -21,14 +21,18 @@ export interface MsTableColumnData extends TableColumnData {
 }

 export type MsTableErrorStatus = boolean | 'error' | 'empty';
+export type MsTableDataItem<T> = T & {
+  updateTime?: string | number | null;
+  createTime?: string | number | null;
+} & TableData;
 // 表格属性
-export interface MsTableProps {
+export interface MsTableProps<T> {
+  // 表格数据 - 详见 TableData  https://arco.design/web-vue/components/table-data;
+  data: MsTableDataItem<T>[];
  // 表格key, 用于存储表格列配置
  tableKey: string;
  // 表格列 - 详见 TableColumn  https://arco.design/web-vue/components/table-column;
  columns: MsTableColumnData[];
-  // 表格数据 - 详见 TableData  https://arco.design/web-vue/components/table-data;
-  data: TableData[];
  // 表格尺寸
  size?: 'mini' | 'small' | 'default' | 'large';
  // 表格是否可滚动
@ -83,17 +87,10 @@ export interface MsTableSelectAll {
  type: 'all' | 'page';
 }

-export type MsTableData = TableData[];
+// export type MsTableData = TableData[];
 export type MsTableColumn = MsTableColumnData[];
 export type MSTableChangeExtra = TableChangeExtra;

-// eslint-disable-next-line no-shadow
-export enum SelectAllEnum {
-  ALL = 'all',
-  CURRENT = 'current',
-  NONE = 'none',
-}
-
 export interface SortItem {
  [key: string]: string;
 }
@ -112,12 +109,3 @@ export interface BatchActionConfig {
 export interface renamePopconfirmVisibleType {
  [key: string]: boolean;
 }
-
-// 具有特殊功能的列
-// eslint-disable-next-line no-shadow
-export enum SpecialColumnEnum {
-  // 编辑列
-  NAME = 'name',
-  // 状态列
-  ENABLE = 'enable',
-}
--- a/frontend/src/components/pure/ms-table/useTable.ts
+++ b/frontend/src/components/pure/ms-table/useTable.ts
@ -3,11 +3,12 @@

 import { ref } from 'vue';
 import dayjs from 'dayjs';
-import { TableQueryParams } from '@/models/common';
 import { useAppStore } from '@/store';
+import { SpecialColumnEnum } from '@/enums/tableEnum';

 import type { TableData } from '@arco-design/web-vue';
-import { type MsTableProps, type MsTableData, type MsTableColumn, SpecialColumnEnum, MsTableErrorStatus } from './type';
+import type { TableQueryParams, CommonList } from '@/models/common';
+import type { MsTableProps, MsTableDataItem, MsTableColumn, MsTableErrorStatus } from './type';

 export interface Pagination {
  current: number;
@ -16,13 +17,13 @@ export interface Pagination {
 }

 const appStore = useAppStore();
-export default function useTableProps(
-  loadListFunc: (v: TableQueryParams) => Promise<any>,
-  props?: Partial<MsTableProps>,
+export default function useTableProps<T>(
+  loadListFunc: (v: TableQueryParams) => Promise<CommonList<MsTableDataItem<T>>>,
+  props?: Partial<MsTableProps<T>>,
  // 数据处理的回调函数
-  dataTransform?: (item: TableData) => TableData,
+  dataTransform?: (item: T) => TableData & T,
  // 编辑操作的保存回调函数
-  saveCallBack?: (item: TableData) => Promise<any>
+  saveCallBack?: (item: T) => Promise<any>
 ) {
  // 行选择
  const rowSelection = {
@ -30,7 +31,7 @@ export default function useTableProps(
    showCheckedAll: false,
  };

-  const defaultProps: MsTableProps = {
+  const defaultProps: MsTableProps<T> = {
    tableKey: '',
    bordered: true,
    showPagination: true,
@ -38,7 +39,7 @@ export default function useTableProps(
    scroll: { maxHeight: '600px', x: '1400px' },
    checkable: true,
    loading: false,
-    data: [] as MsTableData,
+    data: [],
    columns: [] as MsTableColumn,
    rowKey: 'id',
    selectedKeys: [],
@ -59,7 +60,7 @@ export default function useTableProps(
  };

  // 属性组
-  const propsRes = ref(defaultProps);
+  const propsRes = ref<MsTableProps<T>>(defaultProps);
  const oldPagination = ref<Pagination>({
    current: 1,
    pageSize: appStore.pageSize,
@ -135,7 +136,7 @@ export default function useTableProps(
  };

  // 单独设置默认属性
-  const setProps = (params: Partial<MsTableProps>) => {
+  const setProps = (params: Partial<MsTableProps<T>>) => {
    const tmpProps = propsRes.value;
    Object.keys(params).forEach((key) => {
      tmpProps[key] = params[key];
@ -166,8 +167,8 @@ export default function useTableProps(
        keyword: keyword.value,
        ...loadListParams.value,
      });
-      const tmpArr = data.list as unknown as MsTableData;
-      propsRes.value.data = tmpArr.map((item: TableData) => {
+      const tmpArr = data.list;
+      (propsRes.value.data as MsTableDataItem<T>[]) = tmpArr.map((item) => {
        if (item.updateTime) {
          item.updateTime = dayjs(item.updateTime).format('YYYY-MM-DD HH:mm:ss');
        }
@ -243,14 +244,13 @@ export default function useTableProps(
      }
      propsRes.value.selectedKeys = arr;
    },
-    change: (_data: MsTableData) => {
+    change: (_data: MsTableDataItem<T>[]) => {
      if (propsRes.value.draggable && _data instanceof Array) {
-        // eslint-disable-next-line vue/require-explicit-emits
-        propsRes.value.data = _data;
+        (propsRes.value.data as MsTableDataItem<T>[]) = _data;
      }
    },
    // 编辑触发
-    rowNameChange: (record: TableData) => {
+    rowNameChange: (record: T) => {
      if (saveCallBack) {
        saveCallBack(record);
      }
--- a/frontend/src/enums/tableEnum.ts
+++ b/frontend/src/enums/tableEnum.ts
@ -15,4 +15,19 @@ export enum TableKeyEnum {
  ORGANNATIONMEMBER = 'member',
  SYSTEM_ORGANIZATION = 'systemOrganization',
  SYSTEM_PROJECT = 'systemProject',
+  SYSTEM_LOG = 'systemLog',
+}
+
+// 具有特殊功能的列
+export enum SpecialColumnEnum {
+  // 编辑列
+  NAME = 'name',
+  // 状态列
+  ENABLE = 'enable',
+}
+
+export enum SelectAllEnum {
+  ALL = 'all',
+  CURRENT = 'current',
+  NONE = 'none',
 }
--- a/frontend/src/hooks/useModal.ts
+++ b/frontend/src/hooks/useModal.ts
@ -34,7 +34,7 @@ export default function useModal() {
    openModal: (options: ModalOptions) => {
      const okHandlerLoading = ref<boolean>(false);
      // error 使用 warning的感叹号图标
-      Modal[options.type === 'error' ? 'warning' : options.type]({
+      Modal[options.type]({
        // 默认设置按钮属性，也可通过options传入覆盖
        okButtonProps: {
          type: options.mode === 'weak' ? 'text' : 'primary',
--- a/frontend/src/models/setting/log.ts
+++ b/frontend/src/models/setting/log.ts
@ -7,3 +7,18 @@ export interface LogOptions {
  organizationList: OptionsItem[];
  projectList: OptionsItem[];
 }
+
+export interface LogItem {
+  id: string;
+  createUser: string;
+  userName: string;
+  projectId: string;
+  projectName: string;
+  organizationId: string;
+  organizationName: string;
+  module: string; // 操作对象
+  type: string; // 操作类型
+  content: string; // 操作名称
+  createTime: number;
+  sourceId: string;
+}
--- a/frontend/src/views/setting/system/config/components/authConfig.vue
+++ b/frontend/src/views/setting/system/config/components/authConfig.vue
@ -630,7 +630,7 @@
   */
  function delAuth(record: any) {
    openModal({
-      type: 'warning',
+      type: 'error',
      title: t('system.config.auth.deleteTipTitle', { name: characterLimit(record.name) }),
      content: t('system.config.auth.deleteTipContent'),
      okText: t('system.config.auth.deleteConfirm'),
--- a/frontend/src/views/setting/system/pluginManager/components/pluginTable.vue
+++ b/frontend/src/views/setting/system/pluginManager/components/pluginTable.vue
@ -244,7 +244,7 @@
  };
  function deletePlugin(record: any) {
    openModal({
-      type: 'warning',
+      type: 'error',
      title: t('system.plugin.deletePluginTip', { name: characterLimit(record.name) }),
      content: t('system.plugin.deleteContentTip'),
      okText: t('system.plugin.deletePluginConfirm'),
--- a/frontend/src/views/setting/system/resourcePool/detail.vue
+++ b/frontend/src/views/setting/system/resourcePool/detail.vue
@ -227,11 +227,11 @@
          :rules="[{ required: true, message: t('system.resourcePool.testResourceDTO.tokenRequired') }]"
          asterisk-position="end"
        >
-          <a-input
+          <a-input-password
            v-model:model-value="form.testResourceDTO.token"
            :placeholder="t('system.resourcePool.testResourceDTO.tokenPlaceholder')"
            :max-length="250"
-          ></a-input>
+          ></a-input-password>
        </a-form-item>
        <a-form-item
          :label="t('system.resourcePool.testResourceDTO.nameSpaces')"
@ -258,6 +258,7 @@
          </a-tooltip>
        </a-form-item>
        <a-form-item
+          v-if="isCheckedAPI"
          :label="t('system.resourcePool.testResourceDTO.deployName')"
          field="testResourceDTO.deployName"
          class="form-item"
@ -691,7 +692,7 @@
            nameSpaces,
            concurrentNumber,
            podThreads,
-            deployName,
+            deployName: isCheckedAPI.value ? deployName : null, // 勾选了接口测试才需要传
          }
        : {};
    // 性能测试资源
--- a/frontend/src/views/setting/system/resourcePool/index.vue
+++ b/frontend/src/views/setting/system/resourcePool/index.vue
@ -180,9 +180,6 @@
      content: t('system.resourcePool.disablePoolContent'),
      okText: t('system.resourcePool.disablePoolConfirm'),
      cancelText: t('system.resourcePool.disablePoolCancel'),
-      okButtonProps: {
-        status: 'danger',
-      },
      maskClosable: false,
      onBeforeOk: async () => {
        try {
@ -202,7 +199,7 @@
   */
  function deletePool(record: any) {
    openModal({
-      type: 'warning',
+      type: 'error',
      title: t('system.resourcePool.deletePoolTip', { name: characterLimit(record.name) }),
      content: t('system.resourcePool.deletePoolContentUsed'),
      okText: t('system.resourcePool.deletePoolConfirm'),
--- a/frontend/src/views/setting/system/user/index.vue
+++ b/frontend/src/views/setting/system/user/index.vue
@ -357,9 +357,6 @@
      content: t('system.user.disableUserContent'),
      okText: t('system.user.disableUserConfirm'),
      cancelText: t('system.user.disableUserCancel'),
-      okButtonProps: {
-        status: 'danger',
-      },
      maskClosable: false,
      onBeforeOk: async () => {
        try {
@ -421,7 +418,7 @@
      userIdList = tableSelected.value as string[];
    }
    openModal({
-      type: 'warning',
+      type: 'error',
      title,
      content: t('system.user.deleteUserContent'),
      okText: t('system.user.deleteUserConfirm'),
--- a/frontend/src/views/setting/system/usergroup/components/index.vue
+++ b/frontend/src/views/setting/system/usergroup/components/index.vue
@ -154,7 +154,7 @@
      }
    } else {
      openModal({
-        type: 'warning',
+        type: 'error',
        title: t('system.userGroup.isDeleteUserGroup', { name: characterLimit(store.currentName) }),
        content: t('system.userGroup.beforeDeleteUserGroup'),
        okText: t('system.userGroup.confirmDelete'),