feat: 系统模块初始化

frontend/__test__/components/table.spec.ts

@@ -71,9 +71,11 @@ describe('MS-Table', () => {
   test('init table with useTable', async () => {
     const { propsRes, propsEvent, loadList, setProps } = useTable(getTableList, {
       columns,
+      scroll: { y: 750, x: 2000 },
+      selectable: true,
     });
 
-    const wrapper = mount(MsBaseTable, {
+    const wrapper = mount(MsBaseTable as any, {
       vOn: propsEvent,
       vBind: propsRes,
     });
@@ -81,7 +83,7 @@ describe('MS-Table', () => {
 
     await nextTick();
     let content = wrapper.find('.arco-table-td-content').element.innerHTML;
-    expect(propsRes.value.data.length).toBe(2);
+    expect(propsRes.value.data.length).toBe(20);
     expect(content).toBe('e7bd7179-d63a-43a5-1a65-218473ee69ca');
 
     setProps({});

frontend/src/api/modules/dashboard/index.ts

@@ -1,22 +0,0 @@
-import MSR from '@/api/http/index';
-import type { TableData } from '@arco-design/web-vue/es/table/interface';
-
-export interface ContentDataRecord {
-  x: string;
-  y: number;
-}
-
-export function queryContentData() {
-  return MSR.get<ContentDataRecord[]>({ url: '/api/content-data' });
-}
-
-export interface PopularRecord {
-  key: number;
-  clickNumber: string;
-  title: string;
-  increases: number;
-}
-
-export function queryPopularList(params: { type: string }) {
-  return MSR.get<TableData[]>({ url: '/api/popular/list', params });
-}

frontend/src/components/pure/ms-table/base-table.vue

@@ -11,23 +11,27 @@
       <template v-for="(item, key, i) in slots" :key="i" #[key]="{ record, rowIndex, column }">
         <slot :name="key" v-bind="{ rowIndex, record, column }"></slot>
       </template>
-      <template v-if="selectCurrent > 0" #footer>
+    </a-table>
+    <div v-if="selectCurrent > 0" class="mt-[21px]">
       <batch-action
         :select-row-count="selectCurrent"
         @batch-export="emit('batchExport')"
         @batch-edit="emit('batchEdit')"
-          @batch-move="emit('batchMove')"
+        @batch-move="emit('batchMoveTo')"
+        @batch-copy="emit('batchCopyTo')"
         @batch-related="emit('batchRelated')"
+        @batch-generate="emit('batchGenerate')"
+        @batch-add-public="emit('batchAddPublic')"
         @batch-delete="emit('batchDelete')"
+        @clear="selectionChange([], true)"
       />
-      </template>
-    </a-table>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
   // eslint-disable no-console
-  import { useSlots, useAttrs, computed, ref, onMounted, watchEffect } from 'vue';
+  import { useSlots, useAttrs, computed, ref, onMounted } from 'vue';
   import selectAll from './select-all.vue';
   import { MsTabelProps, SelectAllEnum, MsPaginationI } from './type';
   import BatchAction from './batchAction.vue';
@@ -43,8 +47,11 @@
     (e: 'selectedChange', value: (string | number)[]): void;
     (e: 'batchExport'): void;
     (e: 'batchEdit'): void;
-    (e: 'batchMove'): void;
+    (e: 'batchMoveTo'): void;
+    (e: 'batchCopyTo'): void;
     (e: 'batchRelated'): void;
+    (e: 'batchGenerate'): void;
+    (e: 'batchAddPublic'): void;
     (e: 'batchDelete'): void;
   }>();
   const isSelectAll = ref(false);
@@ -54,10 +61,11 @@
   const slots = useSlots();
   const attrs = useAttrs();
 
-  const { data, rowKey, pagination }: Partial<MsTabelProps> = attrs;
+  const { rowKey, pagination }: Partial<MsTabelProps> = attrs;
 
   // 全选按钮-总条数
   const selectTotal = computed(() => {
+    const { data }: Partial<MsTabelProps> = attrs;
     if (pagination) {
       const { pageSize } = pagination as MsPaginationI;
       return pageSize;
@@ -74,6 +82,7 @@
 
   // 全选change事件
   const handleChange = (v: string) => {
+    const { data }: Partial<MsTabelProps> = attrs;
     isSelectAll.value = v === SelectAllEnum.ALL;
     if (v === SelectAllEnum.NONE) {
       selectionChange([], true);
@@ -91,7 +100,7 @@
       if (data && data.length > 0) {
         selectionChange(
           data.map((item: any) => item[rowKey || 'id']),
-          false
+          true
         );
         selectCurrent.value = total;
       }

frontend/src/components/pure/ms-table/batchAction.vue

@@ -1,13 +1,23 @@
 <template>
   <div class="ms-table__patch-action">
-    <span>{{ t('msTable.batch.selected', { count: props.selectRowCount }) }}</span>
-    <a-button @click="emit('batchExport')">{{ t('msTable.batch.export') }}</a-button>
-    <a-button @click="emit('batchEdit')">{{ t('msTable.batch.edit') }}</a-button>
-    <a-button @click="emit('batchExport')">{{ t('msTable.batch.moveTo') }}</a-button>
-    <a-button @click="emit('batchExport')">{{ t('msTable.batch.copyTo') }}</a-button>
-    <a-button @click="emit('batchExport')">{{ t('msTable.batch.related') }}</a-button>
-    <a-button @click="emit('batchExport')">{{ t('msTable.batch.delete') }}</a-button>
-    <a-button @click="emit('clear')">{{ t('msTable.batch.clear') }}</a-button>
+    <span class="title">{{ t('msTable.batch.selected', { count: props.selectRowCount }) }}</span>
+    <a-button class="ml-4" type="outline" @click="emit('batchExport')">{{ t('msTable.batch.export') }}</a-button>
+    <a-button class="ml-3" type="outline" @click="emit('batchEdit')">{{ t('msTable.batch.edit') }}</a-button>
+    <a-button class="ml-3" type="outline" @click="emit('batchMoveTo')">{{ t('msTable.batch.moveTo') }}</a-button>
+    <a-button class="ml-3" type="outline" @click="emit('batchCopyTo')">{{ t('msTable.batch.copyTo') }}</a-button>
+    <div class="relative top-[2px] ml-3 inline-block">
+      <a-dropdown position="tr">
+        <a-button type="outline"><a-icon-more /></a-button>
+        <template #content>
+          <a-doption @click="emit('batchRelated')">{{ t('msTable.batch.related') }}</a-doption>
+          <a-doption @click="emit('batchGenerate')">{{ t('msTable.batch.generateDep') }}</a-doption>
+          <a-doption @click="emit('batchAddTo')">{{ t('msTable.batch.addPublic') }}</a-doption>
+          <a-divider margin="0" />
+          <a-doption class="delete" @click="emit('batchExport')">{{ t('msTable.batch.delete') }}</a-doption>
+        </template>
+      </a-dropdown>
+    </div>
+    <a-button class="ml-3" type="text" @click="emit('clear')">{{ t('msTable.batch.clear') }}</a-button>
   </div>
 </template>
 
@@ -23,9 +33,23 @@
   const emit = defineEmits<{
     (e: 'batchExport'): void;
     (e: 'batchEdit'): void;
-    (e: 'batchMove'): void;
+    (e: 'batchMoveTo'): void;
+    (e: 'batchCopyTo'): void;
     (e: 'batchRelated'): void;
+    (e: 'batchGenerate'): void;
+    (e: 'batchAddTo'): void;
     (e: 'batchDelete'): void;
     (e: 'clear'): void;
   }>();
 </script>
+
+<style lang="less" scoped>
+  .ms-table__patch-action {
+    .title {
+      color: var(--color-text-2);
+    }
+  }
+  .delete {
+    color: rgb(var(--danger-6));
+  }
+</style>

frontend/src/components/pure/ms-table/locale/en-US.ts

@@ -11,8 +11,8 @@ export default {
       moveTo: '移动到',
       copyTo: '复制到',
       related: '关联需求',
-      generate: '生成依赖关系',
-      add: '添加到公用用例库',
+      generateDep: '生成依赖关系',
+      addPublic: '添加到公用用例库',
       clear: 'clear',
     },
   },

frontend/src/components/pure/ms-table/locale/zh-CN.ts

@@ -11,8 +11,8 @@ export default {
       moveTo: '移动到',
       copyTo: '复制到',
       related: '关联需求',
-      generate: '生成依赖关系',
-      add: '添加到公用用例库',
+      generateDep: '生成依赖关系',
+      addPublic: '添加到公用用例库',
       clear: '清空',
     },
   },

frontend/src/components/pure/ms-table/useTable.ts

@@ -7,6 +7,7 @@ import { ApiTestListI } from '@/models/api-test';
 import { TableData } from '@arco-design/web-vue';
 import dayjs from 'dayjs';
 import { QueryParams } from '@/models/common';
+import { useAppStore } from '@/store';
 
 export interface Pagination {
   current: number;
@@ -16,6 +17,7 @@ export interface Pagination {
 }
 
 type GetListFunc = (v: QueryParams) => Promise<ApiTestListI>;
+const appStore = useAppStore();
 export default function useTbleProps(loadListFunc: GetListFunc, props?: Partial<MsTabelProps>) {
   // 行选择
   const rowSelection = {
@@ -34,9 +36,11 @@ export default function useTbleProps(loadListFunc: GetListFunc, props?: Partial<
     columns: [] as MsTableColumn,
     pagination: {
       current: 1,
-      pageSize: 20,
+      pageSize: appStore.pageSize,
       total: 0,
-      showPageSize: true,
+      showPageSize: appStore.showPageSize,
+      showTotal: appStore.showTotal,
+      showJumper: appStore.showJumper,
     } as Pagination,
     rowKey: 'id',
     selectedKeys: [],
@@ -48,6 +52,12 @@ export default function useTbleProps(loadListFunc: GetListFunc, props?: Partial<
 
   // 属性组
   const propsRes = ref(defaultProps);
+  const oldPagination = ref<Pagination>({
+    current: 1,
+    pageSize: 20,
+    total: 0,
+    showPageSize: true,
+  });
 
   // 排序
   const sortItem = ref<object>({});
@@ -172,11 +182,11 @@ export default function useTbleProps(loadListFunc: GetListFunc, props?: Partial<
     // 选择触发
     selectedChange: (arr: (string | number)[]) => {
       if (arr.length === 0) {
-        propsRes.value.pagination = defaultProps.pagination;
+        propsRes.value.pagination = oldPagination.value;
       } else {
+        oldPagination.value = propsRes.value.pagination as Pagination;
         propsRes.value.pagination = false;
       }
-
       propsRes.value.selectedKeys = arr;
     },
     change: (_data: MsTableData) => {

frontend/src/components/pure/navbar/index.vue

@@ -4,7 +4,6 @@
       <a-space>
         <svg-icon :width="'43px'" :height="'33px'" :name="'logo'" />
         <a-divider direction="vertical" />
-        <ProjcetSelection />
         <icon-menu-fold
           v-if="!topMenu && appStore.device === 'mobile'"
           style="font-size: 22px; cursor: pointer"
@@ -144,7 +143,6 @@
   import useUser from '@/hooks/useUser';
   import Menu from '@/components/pure/menu/index.vue';
   import MessageBox from '../message-box/index.vue';
-  import ProjcetSelection from '@/components/pure/project-selection/index.vue';
 
   const appStore = useAppStore();
   const userStore = useUserStore();

frontend/src/config/settings.json

@@ -12,5 +12,9 @@
   "globalSettings": false,
   "device": "desktop",
   "tabBar": false,
-  "serverMenu": []
+  "serverMenu": [],
+  "pageSize": 10,
+  "showPageSize": true,
+  "showTotal": true,
+  "showJumper": true
 }

frontend/src/views/api-test/index.vue

@@ -1,15 +1,12 @@
 <template>
   <div class="h-[100vh] bg-white px-[20px] py-[16px] pb-0">
-    <div class="mb-10">表格</div>
-    <a-input v-model="queryParmas.name"></a-input>
-    <a-button @click="handleClick">搜索</a-button>
     <ms-base-table v-bind="propsRes" v-on="propsEvent"> </ms-base-table>
   </div>
   <a-divider />
 </template>
 
 <script lang="ts" setup>
-  import { onMounted, watchEffect, ref } from 'vue';
+  import { onMounted } from 'vue';
   import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
   import { MsTableColumn } from '@/components/pure/ms-table/type';
   import useTable from '@/components/pure/ms-table/useTable';
@@ -95,11 +92,7 @@
     },
   ];
 
-  const queryParmas = ref({
-    name: '',
-  });
-
-  const { propsRes, propsEvent, loadList, setLoadListParams } = useTable(getTableList, {
+  const { propsRes, propsEvent, loadList } = useTable(getTableList, {
     columns,
     scroll: { y: 750, x: 2000 },
     selectable: true,
@@ -109,15 +102,7 @@
     await loadList();
   };
 
-  const handleClick = async () => {
-    setLoadListParams(queryParmas.value);
-    await fetchData();
-  };
-
   onMounted(() => {
     fetchData();
   });
-  watchEffect(() => {
-    setLoadListParams(queryParmas.value);
-  });
 </script>