style(接口测试): 接口测试文档表格,没有高级选项的行不显示展开按钮

接口测试文档表格,没有高级选项的行不显示展开按钮
This commit is contained in:
song-tianyang 2022-08-16 14:29:57 +08:00 committed by 建国
parent 6b22322832
commit 7d8d70497d
3 changed files with 79 additions and 6 deletions

View File

@ -36,7 +36,7 @@
</div> </div>
</div> </div>
<div v-else> <div v-else>
<el-table border :show-header="true" row-key="id" <el-table border :show-header="true" row-key="id" :row-class-name="getRowClassName"
:data="tableData" :class="getTableClass()" ref="expandTable"> :data="tableData" :class="getTableClass()" ref="expandTable">
<el-table-column v-for="item in tableColoumArr" :key="item.id" <el-table-column v-for="item in tableColoumArr" :key="item.id"
:prop="item.prop" :prop="item.prop"
@ -136,7 +136,9 @@ export default {
if (this.tableData) { if (this.tableData) {
this.$nextTick(() => { this.$nextTick(() => {
this.tableData.forEach(i => { this.tableData.forEach(i => {
this.$refs.expandTable.toggleRowExpansion(i, expand) if (i.hasAdvancedSetting) {
this.$refs.expandTable.toggleRowExpansion(i, expand)
}
}); });
this.$refs.expandTable.doLayout(); this.$refs.expandTable.doLayout();
}) })
@ -146,6 +148,30 @@ export default {
} }
}, },
methods: { methods: {
getRowClassName({row, rowIndex}) {
let classname = 'autofix-table-row ';
//
if (!row.hasAdvancedSetting) {
classname += ' hide-expand'
}
return classname;
},
isNotEmptyValue(value) {
return value && value !== '';
},
rowHasAdvancedSetting(tableData) {
let hasAdvancedSetting = false;
if (this.isNotEmptyValue(tableData['min'])) {
hasAdvancedSetting = true;
} else if (this.isNotEmptyValue(tableData['max'])) {
hasAdvancedSetting = true;
} else if (tableData['urlEncode']) {
hasAdvancedSetting = true;
} else if (this.isNotEmptyValue(tableData['description'])) {
hasAdvancedSetting = true;
}
return hasAdvancedSetting;
},
getTableClass() { getTableClass() {
if (this.language === "zh_TW") { if (this.language === "zh_TW") {
return "test-content document-table tw-table"; return "test-content document-table tw-table";
@ -182,6 +208,11 @@ export default {
item.isRequired = "false"; item.isRequired = "false";
} }
item.id = getUUID(); item.id = getUUID();
if (this.rowHasAdvancedSetting(item)) {
item.hasAdvancedSetting = true;
} else {
item.hasAdvancedSetting = false;
}
returnJsonArr.push(item); returnJsonArr.push(item);
} }
} }
@ -256,6 +287,11 @@ export default {
border-right: 0px solid #EBEEF5 border-right: 0px solid #EBEEF5
} }
/*通过样式隐藏图标*/
.document-table /deep/ .hide-expand .el-table__expand-column .cell {
visibility: hidden;
}
/*展开按钮未点击的样式是加号带边框*/ /*展开按钮未点击的样式是加号带边框*/
.cn-table /deep/ .el-table__expand-icon .el-icon-arrow-right:before { .cn-table /deep/ .el-table__expand-icon .el-icon-arrow-right:before {
position: unset; position: unset;

View File

@ -3,6 +3,7 @@
<el-row class="apiInfoRow"> <el-row class="apiInfoRow">
<div> <div>
<el-table border v-if="formParamTypes.includes(apiInfo.requestBodyParamType)" :show-header="true" row-key="id" <el-table border v-if="formParamTypes.includes(apiInfo.requestBodyParamType)" :show-header="true" row-key="id"
:row-class-name="getRowClassName"
:data="tableData" :class="getTableClass()" ref="expandTable"> :data="tableData" :class="getTableClass()" ref="expandTable">
<el-table-column prop="name" <el-table-column prop="name"
:label="$t('api_test.definition.document.table_coloum.name')" :label="$t('api_test.definition.document.table_coloum.name')"
@ -117,7 +118,9 @@ export default {
if (this.tableData) { if (this.tableData) {
this.$nextTick(() => { this.$nextTick(() => {
this.tableData.forEach(i => { this.tableData.forEach(i => {
this.$refs.expandTable.toggleRowExpansion(i, expand) if (i.hasAdvancedSetting) {
this.$refs.expandTable.toggleRowExpansion(i, expand)
}
}); });
this.$refs.expandTable.doLayout(); this.$refs.expandTable.doLayout();
}) })
@ -127,6 +130,30 @@ export default {
} }
}, },
methods: { methods: {
getRowClassName({row, rowIndex}) {
let classname = 'autofix-table-row ';
//
if (!row.hasAdvancedSetting) {
classname += ' hide-expand';
}
return classname;
},
isNotEmptyValue(value) {
return value && value !== '';
},
rowHasAdvancedSetting(tableData) {
let hasAdvancedSetting = false;
if (this.isNotEmptyValue(tableData['min'])) {
hasAdvancedSetting = true;
} else if (this.isNotEmptyValue(tableData['max'])) {
hasAdvancedSetting = true;
} else if (tableData['urlEncode']) {
hasAdvancedSetting = true;
} else if (this.isNotEmptyValue(tableData['description'])) {
hasAdvancedSetting = true;
}
return hasAdvancedSetting;
},
getTableClass() { getTableClass() {
if (this.language === "zh_TW") { if (this.language === "zh_TW") {
return "test-content document-table tw-table"; return "test-content document-table tw-table";
@ -174,6 +201,11 @@ export default {
var item = jsonArr[index]; var item = jsonArr[index];
if (item.name !== "" && item.name !== null) { if (item.name !== "" && item.name !== null) {
item.id = getUUID(); item.id = getUUID();
if (this.rowHasAdvancedSetting(item)) {
item.hasAdvancedSetting = true;
} else {
item.hasAdvancedSetting = false;
}
returnJsonArr.push(item); returnJsonArr.push(item);
} }
} }
@ -245,6 +277,11 @@ export default {
border-right: 0px solid #EBEEF5 border-right: 0px solid #EBEEF5
} }
/*通过样式隐藏图标*/
.document-table /deep/ .hide-expand .el-table__expand-column .cell {
visibility: hidden;
}
/*修改展开按钮时不旋转*/ /*修改展开按钮时不旋转*/
.document-table /deep/ .el-table__expand-icon { .document-table /deep/ .el-table__expand-icon {
-webkit-transform: rotate(0deg); -webkit-transform: rotate(0deg);

View File

@ -34,16 +34,16 @@ export default {
initAdvancedValue() { initAdvancedValue() {
if (this.tableData) { if (this.tableData) {
this.advancedValue = {}; this.advancedValue = {};
if (this.tableData["min"] && this.isNotEmptyValue(this.tableData["min"])) { if (this.isNotEmptyValue(this.tableData["min"])) {
this.advancedValue["schema.minLength"] = this.tableData["min"]; this.advancedValue["schema.minLength"] = this.tableData["min"];
} }
if (this.tableData["max"] && this.isNotEmptyValue(this.tableData["max"])) { if (this.isNotEmptyValue(this.tableData["max"])) {
this.advancedValue["schema.maxLength"] = this.tableData["max"]; this.advancedValue["schema.maxLength"] = this.tableData["max"];
} }
if (this.tableData["urlEncode"]) { if (this.tableData["urlEncode"]) {
this.advancedValue["commons.encode"] = this.$t("commons.yes"); this.advancedValue["commons.encode"] = this.$t("commons.yes");
} }
if (this.tableData["description"] && this.isNotEmptyValue(this.tableData["description"])) { if (this.isNotEmptyValue(this.tableData["description"])) {
this.advancedValue["commons.description"] = this.tableData["description"]; this.advancedValue["commons.description"] = this.tableData["description"];
} }
if (JSON.stringify(this.advancedValue) === "{}") { if (JSON.stringify(this.advancedValue) === "{}") {