feat: 系统模块初始化
This commit is contained in:
parent
32f1aa370d
commit
2ed0923b2d
|
@ -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({});
|
||||
|
|
|
@ -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 });
|
||||
}
|
|
@ -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>
|
||||
<batch-action
|
||||
:select-row-count="selectCurrent"
|
||||
@batch-export="emit('batchExport')"
|
||||
@batch-edit="emit('batchEdit')"
|
||||
@batch-move="emit('batchMove')"
|
||||
@batch-related="emit('batchRelated')"
|
||||
@batch-delete="emit('batchDelete')"
|
||||
/>
|
||||
</template>
|
||||
</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('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)"
|
||||
/>
|
||||
</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;
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -11,8 +11,8 @@ export default {
|
|||
moveTo: '移动到',
|
||||
copyTo: '复制到',
|
||||
related: '关联需求',
|
||||
generate: '生成依赖关系',
|
||||
add: '添加到公用用例库',
|
||||
generateDep: '生成依赖关系',
|
||||
addPublic: '添加到公用用例库',
|
||||
clear: 'clear',
|
||||
},
|
||||
},
|
||||
|
|
|
@ -11,8 +11,8 @@ export default {
|
|||
moveTo: '移动到',
|
||||
copyTo: '复制到',
|
||||
related: '关联需求',
|
||||
generate: '生成依赖关系',
|
||||
add: '添加到公用用例库',
|
||||
generateDep: '生成依赖关系',
|
||||
addPublic: '添加到公用用例库',
|
||||
clear: '清空',
|
||||
},
|
||||
},
|
||||
|
|
|
@ -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) => {
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -12,5 +12,9 @@
|
|||
"globalSettings": false,
|
||||
"device": "desktop",
|
||||
"tabBar": false,
|
||||
"serverMenu": []
|
||||
"serverMenu": [],
|
||||
"pageSize": 10,
|
||||
"showPageSize": true,
|
||||
"showTotal": true,
|
||||
"showJumper": true
|
||||
}
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue