style(测试跟踪): 用例版本操作样式优化

--bug=1022772 --user=陈建星 【测试跟踪】功能用例-设计验收问题汇总 https://www.tapd.cn/55049933/s/1342676
This commit is contained in:
chenjianxing 2023-02-24 14:53:51 +08:00 committed by jianxing
parent a442f08fb8
commit 3b3c9ddd3c
6 changed files with 163 additions and 87 deletions

View File

@ -533,7 +533,6 @@ export default {
},
tabId: getUUID(),
versionData: [],
dialogVisible: false,
oldData: null,
newData: null,
selectedOtherInfo: null,
@ -1438,7 +1437,6 @@ export default {
},
compareBranchWithVersionId(originId, targetId){
//
this.dialogVisible = true;
this.$refs.caseDiffViewerRef.open(originId, targetId, this.currentTestCaseInfo.id)
},
compareBranch(t1, t2) {
@ -1470,7 +1468,6 @@ export default {
(v) => v.id === that.oldData.id
)[0].createName;
this.setSpecialPropForCompare(that);
that.dialogVisible = true;
}
});
}

View File

@ -5,61 +5,55 @@
:visible.sync="visible"
:show-close="false"
width="600px"
heigth="234px"
>
<div class="version-label">{{ $t("case.choose_copy_info") }}</div>
<el-form ref="form" :model="form" label-width="10px" label-position="left">
<div class="version-detail-wrap">
<div class="item-row">
<el-form-item>
<el-checkbox v-model="form.remark">{{
$t("commons.remark")
}}</el-checkbox>
</el-form-item>
</div>
<div class="item-row">
<el-form-item>
<el-checkbox v-model="form.relateTest">{{
$t("test_track.case.relate_test")
}}</el-checkbox>
</el-form-item>
</div>
<div class="item-row">
<el-form-item>
<el-checkbox v-model="form.relateDemand">{{
$t("test_track.related_requirements")
}}</el-checkbox>
</el-form-item>
</div>
<div class="version-detail-wrap">
<div class="item-row">
<el-checkbox v-model="form.remark">{{
$t("commons.remark")
}}
</el-checkbox>
</div>
<div class="version-detail-wrap">
<div class="item-row">
<el-form-item>
<el-checkbox v-model="form.relateIssue">{{
$t("test_track.case.relate_issue")
}}</el-checkbox>
</el-form-item>
</div>
<div class="item-row">
<el-form-item>
<el-checkbox v-model="form.dependency">{{
$t("commons.relationship.name")
}}</el-checkbox>
</el-form-item>
</div>
<div class="item-row">
<el-form-item>
<el-checkbox v-model="form.archive">{{
$t("test_track.case.attachment")
}}</el-checkbox>
</el-form-item>
</div>
<div class="item-row">
<el-checkbox v-model="form.relateTest">{{
$t("test_track.case.relate_test")
}}
</el-checkbox>
</div>
</el-form>
<div class="item-row">
<el-checkbox v-model="form.relateDemand">{{
$t("test_track.related_requirements")
}}
</el-checkbox>
</div>
</div>
<div class="version-detail-wrap">
<div class="item-row">
<el-checkbox v-model="form.relateIssue">{{
$t("test_track.case.relate_issue")
}}
</el-checkbox>
</div>
<div class="item-row">
<el-checkbox v-model="form.dependency">{{
$t("commons.relationship.name")
}}
</el-checkbox>
</div>
<div class="item-row">
<el-checkbox v-model="form.archive">{{
$t("test_track.case.attachment")
}}
</el-checkbox>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="visible = false">{{ $t("commons.cancel") }}</el-button>
<el-button type="primary" @click="confirmOtherInfo">{{
$t("commons.confirm")
}}</el-button>
<el-button @click="visible = false" size="small">{{ $t("commons.cancel") }}</el-button>
<el-button type="primary" size="small"
@click="confirmOtherInfo">{{
$t("commons.confirm")
}}</el-button>
</span>
</el-dialog>
</template>
@ -103,6 +97,11 @@ export default {
color: #1f2329;
margin-top: 12px;
}
.version-detail-wrap:not(:last-child) {
margin-bottom: 8px;
}
.version-detail-wrap {
:deep(.el-form-item__content) {
margin-left: 0px !important;
@ -111,8 +110,22 @@ export default {
display: flex;
justify-content: flex-start;
.item-row {
height: 22px;
line-height: 22px;
width: 168px;
}
.item-row:not(:first-child) {
margin-left: 24px;
}
}
.dialog-footer {
.el-button {
width: 80px;
margin-top: 27px;
}
}
</style>

View File

@ -3,7 +3,7 @@
<el-drawer
:close-on-click-modal="false"
:visible.sync="visible"
:size="widthCacl"
:size="widthCalc"
@close="close"
destroy-on-close
:full-screen="isFullScreen"
@ -52,7 +52,7 @@ export default {
},
},
computed: {
widthCacl() {
widthCalc() {
if (!isNaN(this.width)) {
//rem
let remW = (this.width / 1440) * 100;

View File

@ -1,4 +1,4 @@
<!--
<!--
文本类型对比
-->
<template>
@ -133,6 +133,7 @@ export default {
.content-wrap {
margin-left: 2px;
color: #1F2329;
.text {
}
}

View File

@ -466,11 +466,13 @@ export default {
map.set(v, v);
});
this.versionOptions.forEach((v) => {
//
for (let i = this.versionOptions.length - 1; i >= 0; i--) {
let v = this.versionOptions[i];
if (map.get(v.id)) {
this.versionList.push(v);
}
});
}
},
async fetchAllCaseVersion() {
//

View File

@ -3,7 +3,6 @@
<el-popover
placement="bottom-end"
width="392"
height="271"
trigger="click"
popper-class="version-popover"
v-loading="loading"
@ -13,16 +12,16 @@
<div class="label">{{ $t("project.version.name") }}</div>
</div>
<div class="history-container">
<div class="item-row" v-for="item in versionOptions" :key="item.id" @click="checkout(item)">
<div class="item-row"
v-for="item in versionOptions"
:key="item.id"
:class="{'not-create-item' : !caseVersionMap.has(item.id)}"
@click="checkout(item)">
<div class="left-detail-row">
<div class="version-info-row">
<div
:class="
item.id == dataLatestId
? ['version-label', 'active']
: ['version-label']
"
>
class="version-label"
:class="{'active': item.id == currentVersionId}">
{{ item.name }}
</div>
<div class="version-lasted" v-if="item.id == dataLatestId">
@ -63,8 +62,9 @@
</div>
</div>
</div>
<div class="compare-row" :disabled="!versionCompareOptions || versionCompareOptions.length < 2"
@click.stop="compareDialogVisible = true">
<div class="compare-row"
:class="{'compare-btn-disable': !compareBtnEnable}"
@click.stop="openCompare">
<div class="icon">
<img src="/assets/module/figma/icon_contrast_outlined.svg" alt=""/>
</div>
@ -89,25 +89,34 @@
>
<div class="compare-wrap">
<div class="version-left-box">
<el-select v-model="versionLeftId" size="small">
<el-select v-model="versionLeftId" size="small" clearable>
<el-option
v-for="item in versionCompareOptions"
v-for="item in versionLeftCompareOptions"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
>
<span>{{ item.name }}</span>
<span class="compare-version-lasted" v-if="item.id == dataLatestId">
{{ $t("case.last_version") }}
</span>
</el-option>
</el-select>
</div>
<div class="desc">{{ $t("case.compare") }}</div>
<div class="version-right-box">
<el-select v-model="versionRightId" size="small">
<el-select v-model="versionRightId" size="small" clearable>
<el-option
v-for="item in versionCompareOptions"
v-for="item in versionRightCompareOptions"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option
>
<span>{{ item.name }}</span>
<span class="compare-version-lasted" v-if="item.id == dataLatestId">
{{ $t("case.last_version") }}
</span>
</el-option>
</el-select>
</div>
</div>
@ -169,14 +178,16 @@ export default {
versionEnable: false,
versionOptions: [],
versionCompareOptions: [],
versionLeftCompareOptions: [],
versionRightCompareOptions: [],
userData: {},
currentVersion: {},
dataLatestId: null,
latestVersionId: null,
compareDialogVisible: false,
//
versionLeftId: "",
versionRightId: "",
versionLeftId: '',
versionRightId: '',
//
caseVersionMap: new Map()
};
@ -185,6 +196,9 @@ export default {
enableCompare() {
return this.versionLeftId && this.versionRightId;
},
compareBtnEnable() {
return this.versionCompareOptions || this.versionCompareOptions.length < 2;
}
},
beforeDestroy() {
this.clearSelectData();
@ -194,10 +208,18 @@ export default {
this.compareDialogVisible = false;
this.clearSelectData();
},
openCompare() {
if (!this.compareBtnEnable) {
return;
}
this.setDefaultCompareOptions();
this.versionLeftId = this.currentVersionId;
this.compareDialogVisible = true;
},
clearSelectData() {
//
this.versionLeftId = "";
this.versionRightId = "";
this.versionLeftId = '';
this.versionRightId = '';
},
findVersionById(id) {
let version = this.versionCompareOptions.filter((v) => v.id === id);
@ -205,7 +227,7 @@ export default {
},
compareBranch() {
this.$emit(
"compareBranch",
'compareBranch',
this.findVersionById(this.versionLeftId),
this.findVersionById(this.versionRightId)
);
@ -319,8 +341,27 @@ export default {
this.loading = false;
},
setDefaultCompareOptions() {
this.versionLeftCompareOptions = this.versionCompareOptions;
this.versionRightCompareOptions = this.versionCompareOptions;
},
},
watch: {
versionLeftId() {
//
if (this.versionLeftId) {
this.versionRightCompareOptions = this.versionCompareOptions.filter(v => v.id != this.versionLeftId);
} else {
this.versionRightCompareOptions = this.versionCompareOptions;
}
},
versionRightId() {
if (this.versionRightId) {
this.versionLeftCompareOptions = this.versionCompareOptions.filter(v => v.id != this.versionRightId);
} else {
this.versionLeftCompareOptions = this.versionCompareOptions;
}
},
currentId() {
if (!hasLicense()) {
return;
@ -348,9 +389,28 @@ export default {
width: 392px !important;
}
.compare-version-lasted {
display: inline-block;
font-weight: 400;
font-size: 14px;
line-height: 22px;
color: #783887;
padding: 1px 6px;
margin-left: 5px;
gap: 4px;
min-width: 49px;
height: 20px;
background: rgba(120, 56, 135, 0.2);
border-radius: 2px;
margin-right: 8px;
}
.compare-btn-disable {
color: #BBBFC4 !important;
}
.version-history-wrap {
width: 392px;
height: 271px;
.label-row {
height: 32px;
@ -368,7 +428,6 @@ export default {
}
.history-container {
height: 182px;
overflow: scroll;
.item-row:hover {
@ -431,7 +490,6 @@ export default {
}
.opt-row {
margin-top: 4px;
height: 22px;
line-height: 22px;
font-size: 14px;
@ -444,6 +502,9 @@ export default {
background: rgba(120, 56, 135, 0.1);
border-radius: 4px;
cursor: pointer;
padding-left: 3px;
padding-right: 3px;
color: #783887;
}
.updated {
@ -456,10 +517,15 @@ export default {
}
}
}
.not-create-item {
height: 32px;
}
}
.active {
color: #783887;
color: #783887 !important;
font-weight: 550 !important;
}
.compare-row {
@ -467,8 +533,6 @@ export default {
display: flex;
height: 32px;
line-height: 32px;
margin-bottom: 8px;
margin-top: 3px;
border-top: 1px solid rgba(31, 35, 41, 0.15);
align-items: center;
@ -507,7 +571,7 @@ export default {
.desc {
color: #1f2329;
margin: 0 5px;
margin: 0 8px;
height: 32px;
line-height: 32px;
}
@ -527,6 +591,5 @@ export default {
.version-popover {
left: 215px !important;
padding: 0px !important;
height: 271px !important;
}
</style>