feat(测试计划): 列表拖拽
This commit is contained in:
parent
153a5a3860
commit
3c464ed536
|
@ -314,10 +314,6 @@
|
||||||
const protocolOptions = ref(['HTTP']);
|
const protocolOptions = ref(['HTTP']);
|
||||||
const modulesCount = ref<Record<string, any>>({});
|
const modulesCount = ref<Record<string, any>>({});
|
||||||
const isExpandAll = ref(false);
|
const isExpandAll = ref(false);
|
||||||
// 全部展开或折叠
|
|
||||||
const expandHandler = () => {
|
|
||||||
isExpandAll.value = !isExpandAll.value;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 选中用例类型
|
// 选中用例类型
|
||||||
const caseType = computed({
|
const caseType = computed({
|
||||||
|
|
|
@ -320,9 +320,8 @@
|
||||||
border: 1px dashed rgba(var(--primary-5));
|
border: 1px dashed rgba(var(--primary-5));
|
||||||
background-color: rgba(var(--primary-1));
|
background-color: rgba(var(--primary-1));
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.arco-checkbox-group .arco-checkbox) {
|
:deep(.arco-checkbox-group .arco-checkbox) {
|
||||||
margin-right: 20px;
|
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
|
margin-right: 20px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -3,7 +3,6 @@
|
||||||
<div v-if="$slots.quickCreate" class="ms-base-table-quickCreate">
|
<div v-if="$slots.quickCreate" class="ms-base-table-quickCreate">
|
||||||
<slot name="quickCreate"></slot>
|
<slot name="quickCreate"></slot>
|
||||||
</div>
|
</div>
|
||||||
<!-- 表只做自适应不做可拖拽列 -->
|
|
||||||
<a-table
|
<a-table
|
||||||
v-bind="{ ...$attrs, ...scrollObj }"
|
v-bind="{ ...$attrs, ...scrollObj }"
|
||||||
v-model:selected-keys="originalSelectedKeys"
|
v-model:selected-keys="originalSelectedKeys"
|
||||||
|
@ -241,11 +240,6 @@
|
||||||
</div>
|
</div>
|
||||||
</slot>
|
</slot>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<!-- 控制拖拽类 -->
|
|
||||||
<template #tr="{ record }">
|
|
||||||
<tr :class="!record.parent ? 'parent-tr' : 'children-tr'" />
|
|
||||||
</template>
|
|
||||||
</a-table>
|
</a-table>
|
||||||
<div
|
<div
|
||||||
v-if="showBatchAction || !!attrs.showPagination"
|
v-if="showBatchAction || !!attrs.showPagination"
|
||||||
|
@ -637,12 +631,12 @@
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (extra && extra.dragTarget?.id) {
|
if (extra && extra.dragTarget?.[rowKey || 'id']) {
|
||||||
let newDragData: TableData[] = data;
|
let newDragData: TableData[] = data;
|
||||||
let oldDragData: TableData[] = currentData;
|
let oldDragData: TableData[] = attrs.data as TableData[]; // attrs.data 在这仍保留了原本数据顺序
|
||||||
|
|
||||||
const newDragItem = getCurrentList(data, 'id', extra.dragTarget.id);
|
const newDragItem = getCurrentList(data, rowKey || 'id', extra.dragTarget[rowKey || 'id']);
|
||||||
const oldDragItem = getCurrentList(currentData, 'key', extra.dragTarget.id);
|
const oldDragItem = getCurrentList(oldDragData, rowKey || 'id', extra.dragTarget[rowKey || 'id']);
|
||||||
|
|
||||||
if (newDragItem && newDragItem.children && oldDragItem && oldDragItem.children) {
|
if (newDragItem && newDragItem.children && oldDragItem && oldDragItem.children) {
|
||||||
newDragData = newDragItem.children;
|
newDragData = newDragItem.children;
|
||||||
|
@ -652,8 +646,8 @@
|
||||||
let oldIndex = 0;
|
let oldIndex = 0;
|
||||||
let newIndex = 0;
|
let newIndex = 0;
|
||||||
|
|
||||||
newIndex = newDragData.findIndex((item: any) => item.id === extra.dragTarget?.id);
|
newIndex = newDragData.findIndex((item: any) => item[rowKey || 'id'] === extra.dragTarget?.[rowKey || 'id']);
|
||||||
oldIndex = oldDragData.findIndex((item: any) => item.key === extra.dragTarget?.id);
|
oldIndex = oldDragData.findIndex((item: any) => item[rowKey || 'id'] === extra.dragTarget?.[rowKey || 'id']);
|
||||||
let position: 'AFTER' | 'BEFORE' = 'BEFORE';
|
let position: 'AFTER' | 'BEFORE' = 'BEFORE';
|
||||||
|
|
||||||
position = newIndex > oldIndex ? 'AFTER' : 'BEFORE';
|
position = newIndex > oldIndex ? 'AFTER' : 'BEFORE';
|
||||||
|
@ -661,7 +655,7 @@
|
||||||
projectId: appStore.currentProjectId,
|
projectId: appStore.currentProjectId,
|
||||||
targetId: '', // 放置目标id
|
targetId: '', // 放置目标id
|
||||||
moveMode: position,
|
moveMode: position,
|
||||||
moveId: extra.dragTarget.id as string, // 拖拽id
|
moveId: extra.dragTarget[rowKey || 'id'] as string, // 拖拽id
|
||||||
};
|
};
|
||||||
|
|
||||||
let targetIndex;
|
let targetIndex;
|
||||||
|
@ -676,9 +670,10 @@
|
||||||
params.moveMode = 'AFTER';
|
params.moveMode = 'AFTER';
|
||||||
targetIndex = newIndex - 1;
|
targetIndex = newIndex - 1;
|
||||||
}
|
}
|
||||||
params.targetId = newDragData[targetIndex]?.id ?? newDragData[newIndex]?.id;
|
params.targetId = newDragData[targetIndex]?.[rowKey || 'id'] ?? newDragData[newIndex]?.[rowKey || 'id'];
|
||||||
|
|
||||||
if (params.targetId !== params.moveId) {
|
if (oldIndex !== newIndex) {
|
||||||
|
// 原地移动不触发
|
||||||
emit('dragChange', params);
|
emit('dragChange', params);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -17,50 +17,52 @@
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span>{{ t('system.authorized.authorizationTime') }}</span>
|
<span>{{ t('system.authorized.authorizationTime') }}</span>
|
||||||
<div
|
<div>
|
||||||
><span>{{ licenseInfo?.license?.expired }}</span></div
|
<span>{{ licenseInfo?.license?.expired }}</span>
|
||||||
>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span>{{ t('system.authorized.productName') }}</span>
|
<span>{{ t('system.authorized.productName') }}</span>
|
||||||
<div
|
<div>
|
||||||
><span>{{ licenseInfo?.license?.product }}</span></div
|
<span>{{ licenseInfo?.license?.product }}</span>
|
||||||
>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span>{{ t('system.authorized.productionVersion') }}</span>
|
<span>{{ t('system.authorized.productionVersion') }}</span>
|
||||||
<div
|
<div>
|
||||||
><span>{{ licenseInfo?.license?.edition }}</span></div
|
<span>{{ licenseInfo?.license?.edition }}</span>
|
||||||
>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span>{{ t('system.authorized.authorizedVersion') }}</span>
|
<span>{{ t('system.authorized.authorizedVersion') }}</span>
|
||||||
<div>
|
<div>
|
||||||
<span>{{ licenseInfo?.license?.licenseVersion }}</span></div
|
<span>{{ licenseInfo?.license?.licenseVersion }}</span>
|
||||||
>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span>{{ t('system.authorized.authorizationsCount') }}</span>
|
<span>{{ t('system.authorized.authorizationsCount') }}</span>
|
||||||
<div
|
<div>
|
||||||
><span>{{ addCommasToNumber(licenseInfo?.license?.count || 0) }}</span></div
|
<span>{{ addCommasToNumber(licenseInfo?.license?.count || 0) }}</span>
|
||||||
>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span>{{ t('system.authorized.authorizationStatus') }}</span>
|
<span>{{ t('system.authorized.authorizationStatus') }}</span>
|
||||||
<div
|
<div>
|
||||||
><span>{{
|
<span
|
||||||
|
>{{
|
||||||
licenseInfo?.status === 'valid'
|
licenseInfo?.status === 'valid'
|
||||||
? t('system.authorized.valid')
|
? t('system.authorized.valid')
|
||||||
: licenseInfo?.status === 'expired'
|
: licenseInfo?.status === 'expired'
|
||||||
? t('system.authorized.invalid')
|
? t('system.authorized.invalid')
|
||||||
: t('system.authorized.failure')
|
: t('system.authorized.failure')
|
||||||
}}</span></div
|
}}
|
||||||
>
|
</span>
|
||||||
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<MsButton v-permission="['SYSTEM_AUTH:READ+UPDATE']" class="font-medium" @click="authChecking">{{
|
<MsButton v-permission="['SYSTEM_AUTH:READ+UPDATE']" class="font-medium" @click="authChecking">
|
||||||
t('system.authorized.authorityChecking')
|
{{ t('system.authorized.authorityChecking') }}
|
||||||
}}</MsButton>
|
</MsButton>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -43,11 +43,11 @@
|
||||||
disabledChildren: true,
|
disabledChildren: true,
|
||||||
parentKey: 'parent',
|
parentKey: 'parent',
|
||||||
}"
|
}"
|
||||||
|
:first-column-width="32"
|
||||||
v-on="propsEvent"
|
v-on="propsEvent"
|
||||||
@batch-action="handleTableBatch"
|
@batch-action="handleTableBatch"
|
||||||
@filter-change="filterChange"
|
@filter-change="filterChange"
|
||||||
@drag-change="handleDragChange"
|
@drag-change="handleDragChange"
|
||||||
@sorter-change="saveSort"
|
|
||||||
>
|
>
|
||||||
<!-- TODO: 快捷创建暂时不上 -->
|
<!-- TODO: 快捷创建暂时不上 -->
|
||||||
<!-- <template v-if="hasAnyPermission(['PROJECT_TEST_PLAN:READ+ADD'])" #quickCreate>
|
<!-- <template v-if="hasAnyPermission(['PROJECT_TEST_PLAN:READ+ADD'])" #quickCreate>
|
||||||
|
@ -907,11 +907,6 @@
|
||||||
setLoadListParams(await initTableParams());
|
setLoadListParams(await initTableParams());
|
||||||
loadList();
|
loadList();
|
||||||
}
|
}
|
||||||
// 排序
|
|
||||||
const sort = ref<{ [key: string]: string }>({});
|
|
||||||
function saveSort(sortObj: { [key: string]: string }) {
|
|
||||||
sort.value = sortObj;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取父组件模块数量
|
// 获取父组件模块数量
|
||||||
async function emitTableParams(isInit = false) {
|
async function emitTableParams(isInit = false) {
|
||||||
|
@ -1482,8 +1477,7 @@
|
||||||
() => showType.value,
|
() => showType.value,
|
||||||
(val) => {
|
(val) => {
|
||||||
if (val) {
|
if (val) {
|
||||||
tableProps.value.draggableCondition =
|
tableProps.value.draggableCondition = hasAnyPermission(['PROJECT_TEST_PLAN:READ+UPDATE']);
|
||||||
hasAnyPermission(['PROJECT_TEST_PLAN:READ+UPDATE']) && val !== 'TEST_PLAN' && !Object.keys(sort.value).length;
|
|
||||||
setPagination({
|
setPagination({
|
||||||
current: 1,
|
current: 1,
|
||||||
});
|
});
|
||||||
|
@ -1494,21 +1488,6 @@
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
watch(
|
|
||||||
() => sort.value,
|
|
||||||
(val) => {
|
|
||||||
if (val) {
|
|
||||||
tableProps.value.draggableCondition =
|
|
||||||
hasAnyPermission(['PROJECT_TEST_PLAN:READ+UPDATE']) &&
|
|
||||||
showType.value !== 'GROUP' &&
|
|
||||||
!Object.keys(sort.value).length;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
deep: true,
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => props.activeFolder,
|
() => props.activeFolder,
|
||||||
(val) => {
|
(val) => {
|
||||||
|
@ -1646,14 +1625,4 @@
|
||||||
padding-top: 8px;
|
padding-top: 8px;
|
||||||
color: var(--color-text-1);
|
color: var(--color-text-1);
|
||||||
}
|
}
|
||||||
:deep(.parent-tr) {
|
|
||||||
.arco-table-drag-handle {
|
|
||||||
pointer-events: none;
|
|
||||||
.arco-table-cell {
|
|
||||||
svg {
|
|
||||||
color: transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in New Issue