fix(用例管理): 尝试开发环境tab切换问题修复

This commit is contained in:
xinxin.wu 2024-02-27 18:54:22 +08:00 committed by 刘瑞斌
parent b7825b65ac
commit bd24fbf7b4
15 changed files with 181 additions and 132 deletions

View File

@ -1,4 +1,4 @@
export default {
'formCreate.PleaseEnter': 'Please enter',
'formCreate.PleaseEnter': 'Default value',
'formCreate.PleaseSelect': 'Please select',
};

View File

@ -1,4 +1,4 @@
export default {
'formCreate.PleaseEnter': '请输入',
'formCreate.PleaseEnter': '默认值',
'formCreate.PleaseSelect': '请选择',
};

View File

@ -92,7 +92,7 @@
height: 'calc(100% - 86px)',
}"
>
<!-- <MsSplitBox
<MsSplitBox
ref="wrapperRef"
class="h-[calc(100% - 78px)]"
expand-direction="right"
@ -100,101 +100,119 @@
:min="0.7"
:size="900"
>
<template #first> -->
<div class="leftWrapper">
<div class="header h-[50px]">
<a-menu mode="horizontal" :default-selected-keys="[activeTab || 'detail']" @menu-item-click="clickMenu">
<a-menu-item key="detail">{{ t('caseManagement.featureCase.detail') }} </a-menu-item>
<a-menu-item v-for="tab of tabSetting" :key="tab.key">
<div class="flex items-center">
<span>{{ t(tab.title) }}</span>
<a-badge
class="ml-1"
:class="activeTab === tab.key ? 'active' : ''"
:text="getTotal(tab.total)"
/> </div
></a-menu-item>
<a-menu-item key="setting">
<span @click="showMenuSetting">{{
t('caseManagement.featureCase.detailDisplaySetting')
}}</span></a-menu-item
>
</a-menu>
</div>
<div class="leftContent mt-4 px-4">
<TabDetail
v-if="activeTab === 'detail'"
ref="tabDetailRef"
:form="detailInfo"
:allow-edit="true"
:form-rules="formItem"
@update-success="updateSuccess"
/>
<TabDemand v-else-if="activeTab === 'requirement'" :case-id="props.detailId" />
<TabCaseTable v-else-if="activeTab === 'case'" :case-id="props.detailId" />
<TabDefect v-else-if="activeTab === 'bug'" :case-id="props.detailId" />
<TabDependency v-else-if="activeTab === 'dependency'" :case-id="props.detailId" />
<TabCaseReview v-else-if="activeTab === 'caseReview'" :case-id="props.detailId" />
<TabTestPlan v-else-if="activeTab === 'testPlan'" />
<TabComment v-else-if="activeTab === 'comments'" ref="commentRef" :case-id="props.detailId" />
<TabChangeHistory v-else-if="activeTab === 'changeHistory'" :case-id="props.detailId" />
</div>
</div>
<!-- </template> -->
<!-- <template #second> -->
<div class="rightWrapper p-[24px]">
<div class="mb-4 font-medium">{{ t('caseManagement.featureCase.basicInfo') }}</div>
<div class="baseItem">
<span class="label"> {{ t('caseManagement.featureCase.tableColumnModule') }}</span>
<span class="w-[calc(100%-36%)]">
<a-tree-select
v-model="detailInfo.moduleId"
:data="caseTree"
<template #first>
<div class="leftWrapper">
<div class="header h-[50px]">
<a-menu mode="horizontal" :default-selected-keys="[activeTab || 'detail']" @menu-item-click="clickMenu">
<a-menu-item key="detail">{{ t('caseManagement.featureCase.detail') }} </a-menu-item>
<a-menu-item v-for="tab of tabSetting" :key="tab.key">
<div class="flex items-center">
<span>{{ t(tab.title) }}</span>
<a-badge
class="ml-1"
:class="activeTab === tab.key ? 'active' : ''"
:text="getTotal(tab.total)"
/> </div
></a-menu-item>
<a-menu-item key="setting">
<span @click="showMenuSetting">{{
t('caseManagement.featureCase.detailDisplaySetting')
}}</span></a-menu-item
>
</a-menu>
</div>
<div class="leftContent mt-4 px-4">
<template v-if="activeTab === 'detail'">
<TabDetail
ref="tabDetailRef"
:form="detailInfo"
:allow-edit="true"
:form-rules="formItem"
:active-tab="activeTab"
@update-success="updateSuccess"
/>
</template>
<template v-if="activeTab === 'requirement'">
<TabDemand :active-tab="activeTab" :case-id="props.detailId" />
</template>
<template v-if="activeTab === 'case'">
<TabCaseTable :active-tab="activeTab" :case-id="props.detailId" />
</template>
<template v-if="activeTab === 'bug'">
<TabDefect :active-tab="activeTab" :case-id="props.detailId" />
</template>
<template v-if="activeTab === 'dependency'">
<TabDependency :active-tab="activeTab" :case-id="props.detailId" />
</template>
<template v-if="activeTab === 'caseReview'">
<TabCaseReview :active-tab="activeTab" :case-id="props.detailId" />
</template>
<template v-if="activeTab === 'testPlan'">
<TabTestPlan :active-tab="activeTab" />
</template>
<template v-if="activeTab === 'comments'">
<TabComment ref="commentRef" :active-tab="activeTab" :case-id="props.detailId" />
</template>
<template v-if="activeTab === 'changeHistory'">
<TabChangeHistory :active-tab="activeTab" :case-id="props.detailId" />
</template>
</div>
</div>
</template>
<template #second>
<div class="rightWrapper p-[24px]">
<div class="mb-4 font-medium">{{ t('caseManagement.featureCase.basicInfo') }}</div>
<div class="baseItem">
<span class="label"> {{ t('caseManagement.featureCase.tableColumnModule') }}</span>
<span class="w-[calc(100%-36%)]">
<a-tree-select
v-model="detailInfo.moduleId"
:data="caseTree"
class="w-full"
:allow-search="true"
:field-names="{
title: 'name',
key: 'id',
children: 'children',
}"
:tree-props="{
virtualListProps: {
height: 200,
},
}"
@change="handleChangeModule"
></a-tree-select>
</span>
</div>
<!-- 自定义字段开始 -->
<MsFormCreate
v-if="formRules.length"
ref="formCreateRef"
v-model:api="fApi"
v-model:form-item="formItem"
:form-rule="formRules"
class="w-full"
:allow-search="true"
:field-names="{
title: 'name',
key: 'id',
children: 'children',
}"
:tree-props="{
virtualListProps: {
height: 200,
},
}"
@change="handleChangeModule"
></a-tree-select>
</span>
</div>
<!-- 自定义字段开始 -->
<MsFormCreate
v-if="formRules.length"
ref="formCreateRef"
v-model:api="fApi"
v-model:form-item="formItem"
:form-rule="formRules"
class="w-full"
:option="options"
@change="changeHandler"
/>
<!-- 自定义字段结束 -->
<div class="baseItem">
<span class="label"> {{ t('caseManagement.featureCase.tableColumnCreateUser') }}</span>
<span>{{ detailInfo?.createUserName }}</span>
</div>
<div class="baseItem">
<span class="label"> {{ t('caseManagement.featureCase.tableColumnCreateTime') }}</span>
<span>{{ dayjs(detailInfo?.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
</div>
<div class="baseItem">
<span class="label"> {{ t('caseManagement.featureCase.tableColumnCreateTime') }}</span>
<span>
<MsTag v-for="item of detailInfo.tags" :key="item"> {{ item }} </MsTag>
</span>
</div>
</div>
<!-- </template> -->
<!-- </MsSplitBox> -->
:option="options"
@change="changeHandler"
/>
<!-- 自定义字段结束 -->
<div class="baseItem">
<span class="label"> {{ t('caseManagement.featureCase.tableColumnCreateUser') }}</span>
<span>{{ detailInfo?.createUserName }}</span>
</div>
<div class="baseItem">
<span class="label"> {{ t('caseManagement.featureCase.tableColumnCreateTime') }}</span>
<span>{{ dayjs(detailInfo?.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
</div>
<div class="baseItem">
<span class="label"> {{ t('caseManagement.featureCase.tableColumnCreateTime') }}</span>
<span>
<MsTag v-for="item of detailInfo.tags" :key="item"> {{ item }} </MsTag>
</span>
</div>
</div>
</template>
</MsSplitBox>
<inputComment
v-model:content="content"
v-model:notice-user-ids="noticeUserIds"
@ -280,7 +298,6 @@
}>();
const emit = defineEmits(['update:visible', 'success']);
const userId = computed(() => userStore.userInfo.id);
const appStore = useAppStore();
@ -608,6 +625,7 @@
}
}
);
provide('activeTab', activeTab.value);
onMounted(() => {
settingDrawerRef.value.getTabModule();

View File

@ -465,18 +465,21 @@
'slotName': 'num',
'dataIndex': 'num',
'width': 200,
'showInTable': true,
'sortable': {
sortDirections: ['ascend', 'descend'],
sorter: true,
},
'filter-icon-align-left': true,
'showTooltip': true,
'ellipsis': true,
'showDrag': false,
},
{
title: 'caseManagement.featureCase.tableColumnName',
slotName: 'name',
dataIndex: 'name',
showInTable: true,
showTooltip: true,
width: 300,
editType: hasAnyPermission(['FUNCTIONAL_CASE:READ+UPDATE']) ? ColumnEditTypeEnum.INPUT : undefined,
@ -484,6 +487,7 @@
sortDirections: ['ascend', 'descend'],
sorter: true,
},
ellipsis: true,
showDrag: false,
},
{
@ -787,7 +791,7 @@
}
}
const initDefaultFields = ref<CustomAttributes[]>([]);
// let fullColumns: MsTableColumn = []; //
let fullColumns: MsTableColumn = []; //
const { propsRes, propsEvent, loadList, setLoadListParams, resetSelector, setKeyword, setAdvanceFilter } = useTable(
getCaseList,
@ -1179,7 +1183,6 @@
//
let customFieldsColumns: Record<string, any>[] = [];
const tableRef = ref<InstanceType<typeof MsBaseTable> | null>(null);
const fullColumns = ref<MsTableColumn>([]);
//
async function getDefaultFields() {
@ -1201,12 +1204,12 @@
caseLevelFields.value = result.customFields.find((item: any) => item.internal && item.fieldName === '用例等级');
caseFilters.value = caseLevelFields.value.options.map((item: any) => item.value);
fullColumns.value = [
fullColumns = [
...columns.slice(0, columns.length - 1),
...customFieldsColumns,
...columns.slice(columns.length - 1, columns.length),
];
await tableStore.initColumn(TableKeyEnum.CASE_MANAGEMENT_TABLE, fullColumns.value, 'drawer');
await tableStore.initColumn(TableKeyEnum.CASE_MANAGEMENT_TABLE, fullColumns, 'drawer');
}
//

View File

@ -128,6 +128,7 @@
const props = defineProps<{
caseId: string;
activeTab: string;
}>();
const showType = ref('link');

View File

@ -97,7 +97,11 @@
const { t } = useI18n();
const currentProjectId = computed(() => appStore.currentProjectId);
const activeTab = inject<string>('activeTab');
const newActive = computed(() => {
return activeTab;
});
console.log(newActive.value);
const props = defineProps<{
caseId: string; // id
}>();

View File

@ -52,6 +52,7 @@
const props = defineProps<{
caseId: string; // id
activeTab: string;
}>();
const keyword = ref<string>('');

View File

@ -101,6 +101,7 @@
const props = defineProps<{
caseId: string;
activeTab: string;
}>();
const columns: MsTableColumn = [

View File

@ -52,6 +52,7 @@
const props = defineProps<{
caseId: string;
activeTab: string;
}>();
const activeComment = ref('caseComment');

View File

@ -107,9 +107,9 @@
const appStore = useAppStore();
const currentProjectId = computed(() => appStore.currentProjectId);
const props = defineProps<{
caseId: string;
activeTab: string;
}>();
const keyword = ref<string>('');

View File

@ -94,6 +94,7 @@
const keyword = ref<string>('');
const props = defineProps<{
caseId: string;
activeTab: string;
}>();
const columns: MsTableColumn = [

View File

@ -304,6 +304,7 @@
form: DetailCase;
allowEdit?: boolean; //
formRules?: FormRuleItem[]; //
activeTab?: string;
}>(),
{
allowEdit: true, //

View File

@ -19,7 +19,6 @@
asterisk-position="end"
:hide-label="true"
hide-asterisk
:rules="[{ required: true, message: t('system.orgTemplate.templateNameRules') }]"
content-class="contentClass"
class="mb-0 max-w-[710px]"
>
@ -28,7 +27,9 @@
:placeholder="t('system.orgTemplate.templateNamePlaceholder')"
:max-length="255"
class="max-w-[732px]"
:error="isError"
:disabled="templateForm?.internal"
@input="inputHandler"
></a-input>
</a-form-item>
<span v-else class="font-medium text-[var(--color-text-1)] underline">{{ templateForm.name }}</span>
@ -67,7 +68,7 @@
v-model="formItem.required"
class="mr-1"
@change="(value) => changeState(value, formItem)"
>{{ t('ms.assertion.mustInclude') }}</a-checkbox
>{{ t('system.orgTemplate.required') }}</a-checkbox
>
</span>
<div class="actionList">
@ -330,12 +331,24 @@
function resetForm() {
templateForm.value = { ...initTemplateForm };
}
const isError = ref(false);
function inputHandler(value: string) {
if (value.trim().length === 0) {
isError.value = true;
}
isError.value = false;
}
//
async function save() {
try {
loading.value = true;
const params = getTemplateParams();
if (!templateForm.value.name) {
isError.value = true;
Message.error(t('system.orgTemplate.templateNamePlaceholder'));
return;
}
if (isEdit.value && route.params.mode !== 'copy') {
await templateApiMaps[props.mode].update(params);
Message.success(t('system.orgTemplate.updateSuccess'));
@ -416,7 +429,7 @@
title.value = t('system.orgTemplate.createTemplateType', {
type: getTemplateName('organization', route.query.type as string),
});
templateForm.value.name = title.value;
// templateForm.value.name = title.value;
}
});
@ -680,29 +693,29 @@
:deep(.selfClass) {
margin-bottom: 0;
}
:deep(.contentClass > .arco-input-wrapper) {
border-color: transparent;
&:hover {
border-color: var(--color-text-input-border);
}
&:hover > .arco-input {
font-weight: normal;
text-decoration: none;
color: var(--color-text-1);
}
& > .arco-input {
font-weight: 500;
text-decoration: underline;
color: var(--color-text-1);
}
}
:deep(.contentClass > .arco-input-focus) {
border-color: rgb(var(--primary-5));
& > .arco-input {
font-weight: normal;
text-decoration: none;
}
}
// :deep(.contentClass > .arco-input-wrapper) {
// border-color: transparent;
// &:hover {
// border-color: var(--color-text-input-border);
// }
// &:hover > .arco-input {
// font-weight: normal;
// text-decoration: none;
// color: var(--color-text-1);
// }
// & > .arco-input {
// font-weight: 500;
// text-decoration: underline;
// color: var(--color-text-1);
// }
// }
// :deep(.contentClass > .arco-input-focus) {
// border-color: rgb(var(--primary-5));
// & > .arco-input {
// font-weight: normal;
// text-decoration: none;
// }
// }
.ghost {
border: 1px solid rgba(var(--primary-5));
background-color: var(--color-text-n9);

View File

@ -20,7 +20,12 @@
</a-alert>
<div class="mb-4 flex items-center justify-between">
<span v-if="isEnabledTemplate" class="font-medium">{{ t('system.orgTemplate.fieldList') }}</span>
<a-button v-permission="props.createPermission" type="primary" :disabled="isDisabled" @click="fieldHandler">
<a-button
v-if="!isEnabledTemplate && hasAnyPermission(props.createPermission)"
type="primary"
:disabled="isDisabled"
@click="fieldHandler"
>
{{ t('system.orgTemplate.addField') }}
</a-button>
<a-input-search

View File

@ -67,7 +67,7 @@ export default {
'system.orgTemplate.columnTemplateName': '模板名称',
'system.orgTemplate.copy': '复制',
'system.orgTemplate.defaultValue': '默认值',
'system.orgTemplate.required': '是否必填',
'system.orgTemplate.required': '必填',
'system.orgTemplate.enableTemplateTip': '已启用项目模板,组织模板不可操作',
'system.orgTemplate.templateList': ' {type}列表',
'system.orgTemplate.createTemplate': '创建模板',