fix(测试计划): 修复测试计划关联用例页面增加loading加载
This commit is contained in:
xinxin.wu
Craftsman
parent
d86fe66d26
commit
aaed564857
|
|
@ -113,176 +113,178 @@
|
||||||
</a-input-group>
|
</a-input-group>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<div class="flex h-[calc(100vh-118px)]">
|
<a-spin :loading="tableLoading" class="w-full">
|
||||||
<div v-show="!isAdvancedSearchMode" class="w-[292px] border-r border-[var(--color-text-n8)] p-[16px]">
|
<div class="flex h-[calc(100vh-118px)]">
|
||||||
<CaseTree
|
<div v-show="!isAdvancedSearchMode" class="w-[292px] border-r border-[var(--color-text-n8)] p-[16px]">
|
||||||
ref="caseTreeRef"
|
<CaseTree
|
||||||
v-model:checkedKeys="checkedKeys"
|
ref="caseTreeRef"
|
||||||
v-model:selected-keys="selectedKeys"
|
v-model:checkedKeys="checkedKeys"
|
||||||
v-model:halfCheckedKeys="halfCheckedKeys"
|
v-model:selected-keys="selectedKeys"
|
||||||
:modules-count="modulesCount"
|
v-model:halfCheckedKeys="halfCheckedKeys"
|
||||||
:get-modules-api-type="props.getModulesApiType"
|
:modules-count="modulesCount"
|
||||||
:current-project="innerProject"
|
:get-modules-api-type="props.getModulesApiType"
|
||||||
:active-tab="associationType"
|
:current-project="innerProject"
|
||||||
:extra-modules-params="props.extraModulesParams"
|
:active-tab="associationType"
|
||||||
:show-type="showType"
|
:extra-modules-params="props.extraModulesParams"
|
||||||
:folder-name="folderName"
|
:show-type="showType"
|
||||||
@folder-node-select="handleFolderNodeSelect"
|
:folder-name="folderName"
|
||||||
@init="initModuleTree"
|
@folder-node-select="handleFolderNodeSelect"
|
||||||
@change-protocol="handleProtocolChange"
|
@init="initModuleTree"
|
||||||
@select-parent="selectParent"
|
@change-protocol="handleProtocolChange"
|
||||||
@check="checkNode"
|
@select-parent="selectParent"
|
||||||
>
|
@check="checkNode"
|
||||||
<div class="flex items-center justify-between">
|
>
|
||||||
<a-checkbox v-model:model-value="isCheckedAll" :indeterminate="indeterminate" @change="checkAllModule">{{
|
<div class="flex items-center justify-between">
|
||||||
t('ms.case.associate.allData')
|
<a-checkbox v-model:model-value="isCheckedAll" :indeterminate="indeterminate" @change="checkAllModule">{{
|
||||||
}}</a-checkbox>
|
t('ms.case.associate.allData')
|
||||||
<span class="pr-[8px] text-[var(--color-text-brand)]">
|
}}</a-checkbox>
|
||||||
{{ modulesCount.all }}
|
<span class="pr-[8px] text-[var(--color-text-brand)]">
|
||||||
</span>
|
{{ modulesCount.all }}
|
||||||
</div>
|
</span>
|
||||||
</CaseTree>
|
|
||||||
</div>
|
|
||||||
<div :class="[`relative flex ${!isAdvancedSearchMode ? 'w-[calc(100%-293px)]' : 'w-full'} flex-col p-[16px]`]">
|
|
||||||
<MsAdvanceFilter
|
|
||||||
ref="msAdvanceFilterRef"
|
|
||||||
v-model:keyword="keyword"
|
|
||||||
:view-type="viewType"
|
|
||||||
:filter-config-list="filterConfigList"
|
|
||||||
:custom-fields-config-list="searchCustomFields"
|
|
||||||
:search-placeholder="searchPlaceholder"
|
|
||||||
@keyword-search="loadCaseList()"
|
|
||||||
@adv-search="handleAdvSearch"
|
|
||||||
@refresh="loadCaseList()"
|
|
||||||
>
|
|
||||||
<template #left>
|
|
||||||
<div class="flex items-center">
|
|
||||||
<a-radio-group
|
|
||||||
v-if="associationType === 'API'"
|
|
||||||
v-model="showType"
|
|
||||||
type="button"
|
|
||||||
class="file-show-type mr-2"
|
|
||||||
>
|
|
||||||
<a-radio value="API" class="show-type-icon p-[2px]">API</a-radio>
|
|
||||||
<a-radio value="CASE" class="show-type-icon p-[2px]">CASE</a-radio>
|
|
||||||
</a-radio-group>
|
|
||||||
<a-popover v-else title="" position="bottom">
|
|
||||||
<div class="flex">
|
|
||||||
<div class="one-line-text mr-1 max-h-[32px] max-w-[300px] text-[var(--color-text-1)]">
|
|
||||||
{{ activeFolderName || folderName }}
|
|
||||||
</div>
|
|
||||||
<span class="text-[var(--color-text-4)]"> ({{ modulesCount[activeFolder] || 0 }})</span>
|
|
||||||
</div>
|
|
||||||
<template #content>
|
|
||||||
<div class="max-w-[400px] text-[14px] font-medium text-[var(--color-text-1)]">
|
|
||||||
{{ activeFolderName || folderName }}
|
|
||||||
<span class="text-[var(--color-text-4)]">({{ modulesCount[activeFolder] || 0 }})</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</a-popover>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</CaseTree>
|
||||||
</MsAdvanceFilter>
|
</div>
|
||||||
<!-- 功能用例 -->
|
<div :class="[`relative flex ${!isAdvancedSearchMode ? 'w-[calc(100%-293px)]' : 'w-full'} flex-col p-[16px]`]">
|
||||||
<CaseTable
|
<MsAdvanceFilter
|
||||||
v-if="associationType === CaseLinkEnum.FUNCTIONAL"
|
ref="msAdvanceFilterRef"
|
||||||
ref="functionalTableRef"
|
v-model:keyword="keyword"
|
||||||
v-model:selectedIds="selectedIds"
|
:view-type="viewType"
|
||||||
v-model:selectedModulesMaps="selectedModulesMaps"
|
:filter-config-list="filterConfigList"
|
||||||
:is-advanced-search-mode="isAdvancedSearchMode"
|
:custom-fields-config-list="searchCustomFields"
|
||||||
:association-type="associateType"
|
:search-placeholder="searchPlaceholder"
|
||||||
:get-page-api-type="getPageApiType"
|
@keyword-search="loadCaseList()"
|
||||||
:active-module="activeFolder"
|
@adv-search="handleAdvSearch"
|
||||||
:offspring-ids="offspringIds"
|
@refresh="loadCaseList()"
|
||||||
:current-project="innerProject"
|
>
|
||||||
:associated-ids="props.associatedIds"
|
<template #left>
|
||||||
:active-source-type="associationType"
|
<div class="flex items-center">
|
||||||
:extra-table-params="props.extraTableParams"
|
<a-radio-group
|
||||||
:keyword="keyword"
|
v-if="associationType === 'API'"
|
||||||
:module-tree="moduleTree"
|
v-model="showType"
|
||||||
:modules-count="modulesCount"
|
type="button"
|
||||||
@get-module-count="initModulesCount"
|
class="file-show-type mr-2"
|
||||||
@refresh="loadCaseList"
|
>
|
||||||
>
|
<a-radio value="API" class="show-type-icon p-[2px]">API</a-radio>
|
||||||
<TotalCount :total-count="totalCount" />
|
<a-radio value="CASE" class="show-type-icon p-[2px]">CASE</a-radio>
|
||||||
</CaseTable>
|
</a-radio-group>
|
||||||
<!-- 接口用例 API -->
|
<a-popover v-else title="" position="bottom">
|
||||||
<ApiTable
|
<div class="flex">
|
||||||
v-else-if="associationType === CaseLinkEnum.API && showType === 'API'"
|
<div class="one-line-text mr-1 max-h-[32px] max-w-[300px] text-[var(--color-text-1)]">
|
||||||
ref="apiTableRef"
|
{{ activeFolderName || folderName }}
|
||||||
v-model:selectedIds="selectedIds"
|
</div>
|
||||||
v-model:selectedModulesMaps="selectedModulesMaps"
|
<span class="text-[var(--color-text-4)]"> ({{ modulesCount[activeFolder] || 0 }})</span>
|
||||||
:get-page-api-type="getPageApiType"
|
</div>
|
||||||
:extra-table-params="props.extraTableParams"
|
<template #content>
|
||||||
:association-type="associateType"
|
<div class="max-w-[400px] text-[14px] font-medium text-[var(--color-text-1)]">
|
||||||
:active-module="activeFolder"
|
{{ activeFolderName || folderName }}
|
||||||
:offspring-ids="offspringIds"
|
<span class="text-[var(--color-text-4)]">({{ modulesCount[activeFolder] || 0 }})</span>
|
||||||
:current-project="innerProject"
|
</div>
|
||||||
:associated-ids="props.associatedIds"
|
</template>
|
||||||
:active-source-type="associationType"
|
</a-popover>
|
||||||
:keyword="keyword"
|
</div>
|
||||||
:show-type="showType"
|
</template>
|
||||||
:is-advanced-search-mode="isAdvancedSearchMode"
|
</MsAdvanceFilter>
|
||||||
:all-protocol-list="allProtocolList"
|
<!-- 功能用例 -->
|
||||||
:protocols="selectedProtocols"
|
<CaseTable
|
||||||
:module-tree="moduleTree"
|
v-if="associationType === CaseLinkEnum.FUNCTIONAL"
|
||||||
:modules-count="modulesCount"
|
ref="functionalTableRef"
|
||||||
@get-module-count="initModulesCount"
|
v-model:selectedIds="selectedIds"
|
||||||
>
|
v-model:selectedModulesMaps="selectedModulesMaps"
|
||||||
<TotalCount :total-count="totalCount" />
|
:is-advanced-search-mode="isAdvancedSearchMode"
|
||||||
</ApiTable>
|
:association-type="associateType"
|
||||||
<!-- 接口用例 CASE -->
|
:get-page-api-type="getPageApiType"
|
||||||
<ApiCaseTable
|
:active-module="activeFolder"
|
||||||
v-else-if="associationType === CaseLinkEnum.API && showType === 'CASE'"
|
:offspring-ids="offspringIds"
|
||||||
ref="caseTableRef"
|
:current-project="innerProject"
|
||||||
v-model:selectedIds="selectedIds"
|
:associated-ids="props.associatedIds"
|
||||||
v-model:selectedModulesMaps="selectedModulesMaps"
|
:active-source-type="associationType"
|
||||||
:get-page-api-type="getPageApiType"
|
:extra-table-params="props.extraTableParams"
|
||||||
:extra-table-params="props.extraTableParams"
|
:keyword="keyword"
|
||||||
:association-type="associateType"
|
:module-tree="moduleTree"
|
||||||
:active-module="activeFolder"
|
:modules-count="modulesCount"
|
||||||
:offspring-ids="offspringIds"
|
@get-module-count="initModulesCount"
|
||||||
:current-project="innerProject"
|
@refresh="loadCaseList"
|
||||||
:associated-ids="props.associatedIds"
|
>
|
||||||
:active-source-type="associationType"
|
<TotalCount :total-count="totalCount" />
|
||||||
:keyword="keyword"
|
</CaseTable>
|
||||||
:show-type="showType"
|
<!-- 接口用例 API -->
|
||||||
:is-advanced-search-mode="isAdvancedSearchMode"
|
<ApiTable
|
||||||
:all-protocol-list="allProtocolList"
|
v-else-if="associationType === CaseLinkEnum.API && showType === 'API'"
|
||||||
:protocols="selectedProtocols"
|
ref="apiTableRef"
|
||||||
:module-tree="moduleTree"
|
v-model:selectedIds="selectedIds"
|
||||||
:modules-count="modulesCount"
|
v-model:selectedModulesMaps="selectedModulesMaps"
|
||||||
@get-module-count="initModulesCount"
|
:get-page-api-type="getPageApiType"
|
||||||
>
|
:extra-table-params="props.extraTableParams"
|
||||||
<TotalCount :total-count="totalCount" />
|
:association-type="associateType"
|
||||||
</ApiCaseTable>
|
:active-module="activeFolder"
|
||||||
<!-- 接口场景用例 -->
|
:offspring-ids="offspringIds"
|
||||||
<ScenarioCaseTable
|
:current-project="innerProject"
|
||||||
v-else-if="associationType === CaseLinkEnum.SCENARIO"
|
:associated-ids="props.associatedIds"
|
||||||
ref="scenarioTableRef"
|
:active-source-type="associationType"
|
||||||
v-model:selectedModulesMaps="selectedModulesMaps"
|
:keyword="keyword"
|
||||||
v-model:selectedIds="selectedIds"
|
:show-type="showType"
|
||||||
:association-type="associateType"
|
:is-advanced-search-mode="isAdvancedSearchMode"
|
||||||
:modules-count="modulesCount"
|
:all-protocol-list="allProtocolList"
|
||||||
:active-module="activeFolder"
|
:protocols="selectedProtocols"
|
||||||
:offspring-ids="offspringIds"
|
:module-tree="moduleTree"
|
||||||
:current-project="innerProject"
|
:modules-count="modulesCount"
|
||||||
:associated-ids="props.associatedIds"
|
@get-module-count="initModulesCount"
|
||||||
:active-source-type="associationType"
|
>
|
||||||
:get-page-api-type="getPageApiType"
|
<TotalCount :total-count="totalCount" />
|
||||||
:extra-table-params="props.extraTableParams"
|
</ApiTable>
|
||||||
:keyword="keyword"
|
<!-- 接口用例 CASE -->
|
||||||
:module-tree="moduleTree"
|
<ApiCaseTable
|
||||||
:total-count="totalCount"
|
v-else-if="associationType === CaseLinkEnum.API && showType === 'CASE'"
|
||||||
:is-advanced-search-mode="isAdvancedSearchMode"
|
ref="caseTableRef"
|
||||||
:all-protocol-list="allProtocolList"
|
v-model:selectedIds="selectedIds"
|
||||||
@get-module-count="initModulesCount"
|
v-model:selectedModulesMaps="selectedModulesMaps"
|
||||||
@refresh="loadCaseList"
|
:get-page-api-type="getPageApiType"
|
||||||
>
|
:extra-table-params="props.extraTableParams"
|
||||||
<TotalCount :total-count="totalCount" />
|
:association-type="associateType"
|
||||||
</ScenarioCaseTable>
|
:active-module="activeFolder"
|
||||||
|
:offspring-ids="offspringIds"
|
||||||
|
:current-project="innerProject"
|
||||||
|
:associated-ids="props.associatedIds"
|
||||||
|
:active-source-type="associationType"
|
||||||
|
:keyword="keyword"
|
||||||
|
:show-type="showType"
|
||||||
|
:is-advanced-search-mode="isAdvancedSearchMode"
|
||||||
|
:all-protocol-list="allProtocolList"
|
||||||
|
:protocols="selectedProtocols"
|
||||||
|
:module-tree="moduleTree"
|
||||||
|
:modules-count="modulesCount"
|
||||||
|
@get-module-count="initModulesCount"
|
||||||
|
>
|
||||||
|
<TotalCount :total-count="totalCount" />
|
||||||
|
</ApiCaseTable>
|
||||||
|
<!-- 接口场景用例 -->
|
||||||
|
<ScenarioCaseTable
|
||||||
|
v-else-if="associationType === CaseLinkEnum.SCENARIO"
|
||||||
|
ref="scenarioTableRef"
|
||||||
|
v-model:selectedModulesMaps="selectedModulesMaps"
|
||||||
|
v-model:selectedIds="selectedIds"
|
||||||
|
:association-type="associateType"
|
||||||
|
:modules-count="modulesCount"
|
||||||
|
:active-module="activeFolder"
|
||||||
|
:offspring-ids="offspringIds"
|
||||||
|
:current-project="innerProject"
|
||||||
|
:associated-ids="props.associatedIds"
|
||||||
|
:active-source-type="associationType"
|
||||||
|
:get-page-api-type="getPageApiType"
|
||||||
|
:extra-table-params="props.extraTableParams"
|
||||||
|
:keyword="keyword"
|
||||||
|
:module-tree="moduleTree"
|
||||||
|
:total-count="totalCount"
|
||||||
|
:is-advanced-search-mode="isAdvancedSearchMode"
|
||||||
|
:all-protocol-list="allProtocolList"
|
||||||
|
@get-module-count="initModulesCount"
|
||||||
|
@refresh="loadCaseList"
|
||||||
|
>
|
||||||
|
<TotalCount :total-count="totalCount" />
|
||||||
|
</ScenarioCaseTable>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</a-spin>
|
||||||
<div class="footer !ml-[10px] w-[calc(100%-10px)]">
|
<div class="footer !ml-[10px] w-[calc(100%-10px)]">
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
<slot name="footerLeft">
|
<slot name="footerLeft">
|
||||||
|
|
@ -605,8 +607,10 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const tableLoading = ref(false);
|
||||||
async function initModulesCount(params: TableQueryParams) {
|
async function initModulesCount(params: TableQueryParams) {
|
||||||
try {
|
try {
|
||||||
|
tableLoading.value = true;
|
||||||
modulesCount.value = await initGetModuleCountFunc(
|
modulesCount.value = await initGetModuleCountFunc(
|
||||||
props.getModuleCountApiType,
|
props.getModuleCountApiType,
|
||||||
associationType.value,
|
associationType.value,
|
||||||
|
|
@ -623,6 +627,8 @@
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
// eslint-disable-next-line no-console
|
// eslint-disable-next-line no-console
|
||||||
console.log(error);
|
console.log(error);
|
||||||
|
} finally {
|
||||||
|
tableLoading.value = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -763,6 +769,7 @@
|
||||||
selectPopVisible.value = false;
|
selectPopVisible.value = false;
|
||||||
keyword.value = '';
|
keyword.value = '';
|
||||||
selectedIds.value = [];
|
selectedIds.value = [];
|
||||||
|
showType.value = 'API';
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue