feat(系统设置): 用户组静态页面

frontend/components.d.ts

@@ -5,57 +5,11 @@
 // Read more: https://github.com/vuejs/core/pull/3399
 import '@vue/runtime-core'
 
-export {}
+export {};
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
-    AAffix: typeof import('@arco-design/web-vue')['Affix']
+    RouterLink: typeof import('vue-router')['RouterLink'];
-    AAlert: typeof import('@arco-design/web-vue')['Alert']
+    RouterView: typeof import('vue-router')['RouterView'];
-    AAvatar: typeof import('@arco-design/web-vue')['Avatar']
-    ABadge: typeof import('@arco-design/web-vue')['Badge']
-    ABreadcrumb: typeof import('@arco-design/web-vue')['Breadcrumb']
-    ABreadcrumbItem: typeof import('@arco-design/web-vue')['BreadcrumbItem']
-    AButton: typeof import('@arco-design/web-vue')['Button']
-    ACard: typeof import('@arco-design/web-vue')['Card']
-    ACardMeta: typeof import('@arco-design/web-vue')['CardMeta']
-    ACol: typeof import('@arco-design/web-vue')['Col']
-    AConfigProvider: typeof import('@arco-design/web-vue')['ConfigProvider']
-    ADivider: typeof import('@arco-design/web-vue')['Divider']
-    ADoption: typeof import('@arco-design/web-vue')['Doption']
-    ADrawer: typeof import('@arco-design/web-vue')['Drawer']
-    ADropdown: typeof import('@arco-design/web-vue')['Dropdown']
-    AInputNumber: typeof import('@arco-design/web-vue')['InputNumber']
-    ALayout: typeof import('@arco-design/web-vue')['Layout']
-    ALayoutContent: typeof import('@arco-design/web-vue')['LayoutContent']
-    ALayoutFooter: typeof import('@arco-design/web-vue')['LayoutFooter']
-    ALayoutSider: typeof import('@arco-design/web-vue')['LayoutSider']
-    ALink: typeof import('@arco-design/web-vue')['Link']
-    AList: typeof import('@arco-design/web-vue')['List']
-    AListItem: typeof import('@arco-design/web-vue')['ListItem']
-    AListItemMeta: typeof import('@arco-design/web-vue')['ListItemMeta']
-    AMenu: typeof import('@arco-design/web-vue')['Menu']
-    AMenuItem: typeof import('@arco-design/web-vue')['MenuItem']
-    AModal: typeof import('@arco-design/web-vue')['Modal']
-    AOption: typeof import('@arco-design/web-vue')['Option']
-    APagination: typeof import('@arco-design/web-vue')['Pagination']
-    APopover: typeof import('@arco-design/web-vue')['Popover']
-    AResult: typeof import('@arco-design/web-vue')['Result']
-    ARow: typeof import('@arco-design/web-vue')['Row']
-    ASelect: typeof import('@arco-design/web-vue')['Select']
-    ASkeleton: typeof import('@arco-design/web-vue')['Skeleton']
-    ASkeletonLine: typeof import('@arco-design/web-vue')['SkeletonLine']
-    ASkeletonShape: typeof import('@arco-design/web-vue')['SkeletonShape']
-    ASpace: typeof import('@arco-design/web-vue')['Space']
-    ASpin: typeof import('@arco-design/web-vue')['Spin']
-    ASubMenu: typeof import('@arco-design/web-vue')['SubMenu']
-    ASwitch: typeof import('@arco-design/web-vue')['Switch']
-    ATabPane: typeof import('@arco-design/web-vue')['TabPane']
-    ATabs: typeof import('@arco-design/web-vue')['Tabs']
-    ATag: typeof import('@arco-design/web-vue')['Tag']
-    ATooltip: typeof import('@arco-design/web-vue')['Tooltip']
-    ATypographyParagraph: typeof import('@arco-design/web-vue')['TypographyParagraph']
-    ATypographyText: typeof import('@arco-design/web-vue')['TypographyText']
-    RouterLink: typeof import('vue-router')['RouterLink']
-    RouterView: typeof import('vue-router')['RouterView']
   }
 }

frontend/src/api/modules/api-test/index.ts

@@ -1,16 +1,16 @@
 import MSR from '@/api/http/index';
 import { GetApiTestList, GetApiTestListUrl } from '@/api/requrls/api-test';
 import { QueryParams } from '@/models/common';
-import { ApiTestListI } from '@/models/api-test';
+import { CommonList } from '@/models/api-test';
 
 export function getTableList(params: QueryParams) {
   const { current, pageSize, sort, filter, keyword } = params;
-  return MSR.post<ApiTestListI>({
+  return MSR.post<CommonList>({
     url: GetApiTestList,
     data: { current, pageSize, sort, filter, keyword, projectId: 'test-project-id' },
   });
 }
 
 export function getlist() {
-  return MSR.get<ApiTestListI>({ url: GetApiTestListUrl });
+  return MSR.get<CommonList>({ url: GetApiTestListUrl });
 }

frontend/src/components/bussiness/usergroup/index.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="type-list">
+    <a-input-search v-model="searchKey" @press-enter="searchData" />
+    <a-tree :data="treeData">
+      <template #title="nodeData">
+        <div>{{ nodeData }}</div>
+      </template>
+    </a-tree>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { TreeNodeData } from '@arco-design/web-vue';
+
+  const originTreeData: TreeNodeData[] = [
+    {
+      title: 'Trunk 0-0',
+      key: '0-0',
+      children: [
+        {
+          title: 'Branch 0-0-1',
+          key: '0-0-1',
+          children: [
+            {
+              title: 'Leaf 0-0-1-1',
+              key: '0-0-1-1',
+            },
+            {
+              title: 'Leaf 0-0-1-2',
+              key: '0-0-1-2',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      title: 'Trunk 0-1',
+      key: '0-1',
+      children: [
+        {
+          title: 'Branch 0-1-1',
+          key: '0-1-1',
+          children: [
+            {
+              title: 'Leaf 0-1-1-0',
+              key: '0-1-1-0',
+            },
+          ],
+        },
+        {
+          title: 'Branch 0-1-2',
+          key: '0-1-2',
+          children: [
+            {
+              title: 'Leaf 0-1-2-0',
+              key: '0-1-2-0',
+            },
+          ],
+        },
+      ],
+    },
+  ];
+
+  const treeData = ref(originTreeData);
+
+  const searchKey = ref('');
+
+  function searchData(keyword: string) {
+    // eslint-disable-next-line no-console
+    console.log(keyword);
+  }
+</script>
+
+<style lang="less" scoped></style>

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

@@ -33,7 +33,7 @@
   // eslint-disable no-console
   import { useSlots, useAttrs, computed, ref, onMounted } from 'vue';
   import selectAll from './select-all.vue';
-  import { MsTabelProps, SelectAllEnum, MsPaginationI } from './type';
+  import { MsTableProps, SelectAllEnum, MsPaginationI } from './type';
   import BatchAction from './batchAction.vue';
 
   const batchleft = ref('10px');
@@ -61,11 +61,11 @@
   const slots = useSlots();
   const attrs = useAttrs();
 
-  const { rowKey, pagination }: Partial<MsTabelProps> = attrs;
+  const { rowKey, pagination }: Partial<MsTableProps> = attrs;
 
   // 全选按钮-总条数
   const selectTotal = computed(() => {
-    const { data }: Partial<MsTabelProps> = attrs;
+    const { data }: Partial<MsTableProps> = attrs;
     if (pagination) {
       const { pageSize } = pagination as MsPaginationI;
       return pageSize;
@@ -82,7 +82,7 @@
 
   // 全选change事件
   const handleChange = (v: string) => {
-    const { data }: Partial<MsTabelProps> = attrs;
+    const { data }: Partial<MsTableProps> = attrs;
     isSelectAll.value = v === SelectAllEnum.ALL;
     if (v === SelectAllEnum.NONE) {
       selectionChange([], true);

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

@@ -8,7 +8,7 @@ export interface MsPaginationI {
 }
 
 // 表格属性
-export interface MsTabelProps {
+export interface MsTableProps {
   // 表格列 - 详见 TableColumn  https://arco.design/web-vue/components/table-column;
   columns: TableColumnData[];
   // 表格数据 - 详见 TableData  https://arco.design/web-vue/components/table-data;

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

@@ -2,8 +2,8 @@
 // hook/table-props.ts
 
 import { ref } from 'vue';
-import { MsTabelProps, MsTableData, MsTableColumn } from './type';
+import { MsTableProps, MsTableData, MsTableColumn } from './type';
-import { ApiTestListI } from '@/models/api-test';
+import { CommonList } from '@/models/api-test';
 import { TableData } from '@arco-design/web-vue';
 import dayjs from 'dayjs';
 import { QueryParams } from '@/models/common';
@@ -16,16 +16,16 @@ export interface Pagination {
   showPageSize: boolean;
 }
 
-type GetListFunc = (v: QueryParams) => Promise<ApiTestListI>;
+type GetListFunc = (v: QueryParams) => Promise<CommonList>;
 const appStore = useAppStore();
-export default function useTbleProps(loadListFunc: GetListFunc, props?: Partial<MsTabelProps>) {
+export default function useTableProps(loadListFunc: GetListFunc, props?: Partial<MsTableProps>) {
   // 行选择
   const rowSelection = {
     type: 'checkbox',
     showCheckedAll: false,
   };
 
-  const defaultProps: MsTabelProps = {
+  const defaultProps: MsTableProps = {
     bordered: true,
     showPagination: true,
     size: 'small',
@@ -109,7 +109,7 @@ export default function useTbleProps(loadListFunc: GetListFunc, props?: Partial<
   };
 
   // 单独设置默认属性
-  const setProps = (params: Partial<MsTabelProps>) => {
+  const setProps = (params: Partial<MsTableProps>) => {
     const tmpProps = propsRes.value;
     Object.keys(params).forEach((key) => {
       tmpProps[key] = params[key];
@@ -119,7 +119,7 @@ export default function useTbleProps(loadListFunc: GetListFunc, props?: Partial<
 
   // 设置请求参数，如果出了分页参数还有搜索参数，在模板页面调用此方法，可以加入参数
   const loadListParams = ref<object>({});
-  const setLoadListParams = (params?: object) => {
+  const setLoadPaListrams = (params?: object) => {
     loadListParams.value = params || {};
   };
 
@@ -131,26 +131,31 @@ export default function useTbleProps(loadListFunc: GetListFunc, props?: Partial<
   const loadList = async () => {
     const { current, pageSize } = propsRes.value.pagination as Pagination;
     setLoading(true);
-    const data = await loadListFunc({
+    try {
-      current,
+      const data = await loadListFunc({
-      pageSize,
+        current,
-      sort: sortItem.value,
+        pageSize,
-      filter: filterItem.value,
+        sort: sortItem.value,
-      keyword: keyword.value,
+        filter: filterItem.value,
-    });
+        keyword: keyword.value,
-    const tmpArr = data.list as unknown as MsTableData;
+      });
-    propsRes.value.data = tmpArr.map((item: TableData) => {
+      const tmpArr = data.list as unknown as MsTableData;
-      if (item.updateTime) {
+      propsRes.value.data = tmpArr.map((item: TableData) => {
-        item.updateTime = dayjs(item.updateTime).format('YYYY-MM-DD HH:mm:ss');
+        if (item.updateTime) {
-      }
+          item.updateTime = dayjs(item.updateTime).format('YYYY-MM-DD HH:mm:ss');
-      if (item.createTime) {
+        }
-        item.createTime = dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss');
+        if (item.createTime) {
-      }
+          item.createTime = dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss');
-      return item;
+        }
-    });
+        return item;
-    setPagination({ current: data.current, total: data.total });
+      });
-    setLoading(false);
+      setPagination({ current: data.current, total: data.total });
-    return data;
+      return data;
+    } catch (err) {
+      // TODO 表格异常放到solt的empty
+    } finally {
+      setLoading(false);
+    }
   };
 
   // 事件触发组
@@ -204,7 +209,7 @@ export default function useTbleProps(loadListFunc: GetListFunc, props?: Partial<
     setLoading,
     loadList,
     setPagination,
-    setLoadListParams,
+    setLoadPaListrams,
     setKeyword,
   };
 }

frontend/src/locale/zh-CN/index.ts

@@ -9,6 +9,7 @@ import localeApiTest from '@/views/api-test/locale/zh-CN';
 
 export default {
   message: {
+    'menu.apiTest': '接口测试',
     'menu.settings': '系统设置',
     'menu.settings.user': '用户',
     'menu.settings.organization': '组织',

frontend/src/models/api-test.ts

@@ -19,7 +19,7 @@ export interface SortItem {
 export interface FilterItem {
   [key: string]: any;
 }
-export interface ApiTestListI {
+export interface CommonList {
   [x: string]: any;
   pageSize: number;
   total: number;

frontend/src/router/routes/modules/system.ts

@@ -21,6 +21,16 @@ const ApiTest: AppRouteRecordRaw = {
         icon: 'icon-computer',
       },
     },
+    {
+      path: 'usergroup',
+      name: 'usergroup',
+      component: () => import('@/views/system/user/index.vue'),
+      meta: {
+        locale: 'menu.settings.user',
+        roles: ['*'],
+        icon: 'icon-computer',
+      },
+    },
   ],
 };
 

frontend/src/views/system/usergroup/index.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="h-[100vh] bg-white px-[20px] py-[16px] pb-0">
+    <div class="left h-[730px] w-[300px]"> </div>
+    <div class="right"></div>
+    <ms-base-table v-bind="propsRes" v-on="propsEvent"> </ms-base-table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { onMounted } from 'vue';
+  import { MsTableColumn } from '@/components/pure/ms-table/type';
+  import useTable from '@/components/pure/ms-table/useTable';
+  import { getTableList } from '@/api/modules/api-test/index';
+
+  const columns: MsTableColumn = [
+    {
+      title: 'ID',
+      dataIndex: 'num',
+      filterable: {
+        filters: [
+          {
+            text: '> 20000',
+            value: '20000',
+          },
+          {
+            text: '> 30000',
+            value: '30000',
+          },
+        ],
+        filter: (value, record) => record.salary > value,
+        multiple: true,
+      },
+    },
+    {
+      title: '接口名称',
+      dataIndex: 'name',
+      width: 200,
+    },
+    {
+      title: '请求类型',
+      dataIndex: 'method',
+    },
+    {
+      title: '责任人',
+      dataIndex: 'username',
+    },
+    {
+      title: '路径',
+      dataIndex: 'path',
+    },
+    {
+      title: '标签',
+      dataIndex: 'tags',
+    },
+    {
+      title: '更新时间',
+      dataIndex: 'updateTime',
+      sortable: {
+        sortDirections: ['ascend', 'descend'],
+      },
+    },
+    {
+      title: '用例数',
+      dataIndex: 'caseTotal',
+    },
+    {
+      title: '用例状态',
+      dataIndex: 'caseStatus',
+    },
+    {
+      title: '用例通过率',
+      dataIndex: 'casePassingRate',
+    },
+    {
+      title: '接口状态',
+      dataIndex: 'status',
+    },
+    {
+      title: '创建时间',
+      slotName: 'createTime',
+      width: 200,
+    },
+    {
+      title: '描述',
+      dataIndex: 'description',
+    },
+    {
+      title: '操作',
+      slotName: 'action',
+      fixed: 'right',
+      width: 200,
+    },
+  ];
+
+  const { propsRes, propsEvent, loadList } = useTable(getTableList, {
+    columns,
+    scroll: { y: 750, x: 2000 },
+    selectable: true,
+  });
+
+  const fetchData = async () => {
+    await loadList();
+  };
+
+  onMounted(() => {
+    fetchData();
+  });
+</script>
+
+<style lang="scss" scoped></style>