test-version22
/
MeterSphere
mirror of https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

接口测试文档表格，没有高级选项的行不显示展开按钮
This commit is contained in:
song-tianyang 2022-08-16 14:29:57 +08:00 committed by 建国
parent c4f9409aea
commit dbf7538009
3 changed files with 79 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
frontend/src/business/components/api/definition/components/document/components/ApiInfoCollapse.vue
View File

@ -36,7 +36,7 @@
</div>
</div>
<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">
<el-table-column v-for="item in tableColoumArr" :key="item.id"
:prop="item.prop"
@ -136,7 +136,9 @@ export default {
if (this.tableData) {
this.$nextTick(() => {
this.tableData.forEach(i => {
this.$refs.expandTable.toggleRowExpansion(i, expand)
if (i.hasAdvancedSetting) {
this.$refs.expandTable.toggleRowExpansion(i, expand)
}
});
this.$refs.expandTable.doLayout();
})
@ -146,6 +148,30 @@ export default {
}
},
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() {
if (this.language === "zh_TW") {
return "test-content document-table tw-table";
@ -182,6 +208,11 @@ export default {
item.isRequired = "false";
}
item.id = getUUID();
if (this.rowHasAdvancedSetting(item)) {
item.hasAdvancedSetting = true;
} else {
item.hasAdvancedSetting = false;
}
returnJsonArr.push(item);
}
}
@ -256,6 +287,11 @@ export default {
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 {
position: unset;

39
frontend/src/business/components/api/definition/components/document/components/ApiRequestInfo.vue
View File

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

6
frontend/src/business/components/api/definition/components/document/components/plugin/TableAdvancedSetting.vue
View File

@ -34,16 +34,16 @@ export default {
initAdvancedValue() {
if (this.tableData) {
this.advancedValue = {};
if (this.tableData["min"] && this.isNotEmptyValue(this.tableData["min"])) {
if (this.isNotEmptyValue(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"];
}
if (this.tableData["urlEncode"]) {
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"];
}
if (JSON.stringify(this.advancedValue) === "{}") {