From 31778866538a17dbd456c98715ea0b8af41fde14 Mon Sep 17 00:00:00 2001 From: RubyLiu Date: Mon, 12 Jun 2023 15:31:28 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E7=B3=BB=E7=BB=9F=E8=AE=BE=E7=BD=AE):=20?= =?UTF-8?q?=E7=94=A8=E6=88=B7=E7=BB=84=E9=9D=99=E6=80=81=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/components.d.ts | 52 +-------- frontend/src/api/modules/api-test/index.ts | 6 +- .../components/bussiness/usergroup/index.vue | 75 ++++++++++++ .../components/pure/ms-table/base-table.vue | 8 +- frontend/src/components/pure/ms-table/type.ts | 2 +- .../src/components/pure/ms-table/useTable.ts | 61 +++++----- frontend/src/locale/zh-CN/index.ts | 1 + frontend/src/models/api-test.ts | 2 +- frontend/src/router/routes/modules/system.ts | 10 ++ frontend/src/views/system/usergroup/index.vue | 110 ++++++++++++++++++ 10 files changed, 241 insertions(+), 86 deletions(-) create mode 100644 frontend/src/components/bussiness/usergroup/index.vue create mode 100644 frontend/src/views/system/usergroup/index.vue diff --git a/frontend/components.d.ts b/frontend/components.d.ts index e126c83e40..704d0f03b2 100644 --- a/frontend/components.d.ts +++ b/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'] - AAlert: typeof import('@arco-design/web-vue')['Alert'] - 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'] + RouterLink: typeof import('vue-router')['RouterLink']; + RouterView: typeof import('vue-router')['RouterView']; } } diff --git a/frontend/src/api/modules/api-test/index.ts b/frontend/src/api/modules/api-test/index.ts index 442566745c..570d3bb34b 100644 --- a/frontend/src/api/modules/api-test/index.ts +++ b/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({ + return MSR.post({ url: GetApiTestList, data: { current, pageSize, sort, filter, keyword, projectId: 'test-project-id' }, }); } export function getlist() { - return MSR.get({ url: GetApiTestListUrl }); + return MSR.get({ url: GetApiTestListUrl }); } diff --git a/frontend/src/components/bussiness/usergroup/index.vue b/frontend/src/components/bussiness/usergroup/index.vue new file mode 100644 index 0000000000..e1d26d5ec6 --- /dev/null +++ b/frontend/src/components/bussiness/usergroup/index.vue @@ -0,0 +1,75 @@ + + + + + diff --git a/frontend/src/components/pure/ms-table/base-table.vue b/frontend/src/components/pure/ms-table/base-table.vue index d4c6c624ea..374f90d962 100644 --- a/frontend/src/components/pure/ms-table/base-table.vue +++ b/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 = attrs; + const { rowKey, pagination }: Partial = attrs; // 全选按钮-总条数 const selectTotal = computed(() => { - const { data }: Partial = attrs; + const { data }: Partial = attrs; if (pagination) { const { pageSize } = pagination as MsPaginationI; return pageSize; @@ -82,7 +82,7 @@ // 全选change事件 const handleChange = (v: string) => { - const { data }: Partial = attrs; + const { data }: Partial = attrs; isSelectAll.value = v === SelectAllEnum.ALL; if (v === SelectAllEnum.NONE) { selectionChange([], true); diff --git a/frontend/src/components/pure/ms-table/type.ts b/frontend/src/components/pure/ms-table/type.ts index 03895a3356..cbfeedbc81 100644 --- a/frontend/src/components/pure/ms-table/type.ts +++ b/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; diff --git a/frontend/src/components/pure/ms-table/useTable.ts b/frontend/src/components/pure/ms-table/useTable.ts index 96df85d4bc..8abd7c7545 100644 --- a/frontend/src/components/pure/ms-table/useTable.ts +++ b/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 { ApiTestListI } from '@/models/api-test'; +import { MsTableProps, MsTableData, MsTableColumn } from './type'; +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; +type GetListFunc = (v: QueryParams) => Promise; const appStore = useAppStore(); -export default function useTbleProps(loadListFunc: GetListFunc, props?: Partial) { +export default function useTableProps(loadListFunc: GetListFunc, props?: Partial) { // 行选择 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) => { + const setProps = (params: Partial) => { 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({}); - 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({ - current, - pageSize, - sort: sortItem.value, - filter: filterItem.value, - keyword: keyword.value, - }); - const tmpArr = data.list as unknown as MsTableData; - propsRes.value.data = tmpArr.map((item: TableData) => { - 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'); - } - return item; - }); - setPagination({ current: data.current, total: data.total }); - setLoading(false); - return data; + try { + const data = await loadListFunc({ + current, + pageSize, + sort: sortItem.value, + filter: filterItem.value, + keyword: keyword.value, + }); + const tmpArr = data.list as unknown as MsTableData; + propsRes.value.data = tmpArr.map((item: TableData) => { + 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'); + } + return item; + }); + setPagination({ current: data.current, total: data.total }); + 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, }; } diff --git a/frontend/src/locale/zh-CN/index.ts b/frontend/src/locale/zh-CN/index.ts index 09c701d88d..0a6838241b 100644 --- a/frontend/src/locale/zh-CN/index.ts +++ b/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': '组织', diff --git a/frontend/src/models/api-test.ts b/frontend/src/models/api-test.ts index 85e7d899d6..450e9bebbb 100644 --- a/frontend/src/models/api-test.ts +++ b/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; diff --git a/frontend/src/router/routes/modules/system.ts b/frontend/src/router/routes/modules/system.ts index 5b36635645..71dfbcf1f8 100644 --- a/frontend/src/router/routes/modules/system.ts +++ b/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', + }, + }, ], }; diff --git a/frontend/src/views/system/usergroup/index.vue b/frontend/src/views/system/usergroup/index.vue new file mode 100644 index 0000000000..3bfdf8dd4f --- /dev/null +++ b/frontend/src/views/system/usergroup/index.vue @@ -0,0 +1,110 @@ + + + + +