refactor(应用管理): 样式优化
This commit is contained in:
shiziyuan9527
刘瑞斌
parent
ca04b4a300
commit
c273d73467
|
|
@ -2,95 +2,92 @@
|
||||||
<ms-container>
|
<ms-container>
|
||||||
<ms-main-container>
|
<ms-main-container>
|
||||||
<div v-loading="result.loading">
|
<div v-loading="result.loading">
|
||||||
<el-card class="card">
|
<el-card class="table-card">
|
||||||
<el-col :span="24" justify="space-around">
|
<el-tabs v-model="activeName" style="height: 600px">
|
||||||
<el-tabs v-model="activeName" @tab-click="handleClick" style="height: 600px">
|
<el-tab-pane :label="$t('commons.my_workstation')" name="my_workstation" :disabled="true">
|
||||||
<el-tab-pane :label="$t('commons.my_workstation')" name="my_workstation" :disabled="true">
|
{{ $t('commons.my_workstation') }}
|
||||||
{{ this.$t('commons.my_workstation') }}
|
</el-tab-pane>
|
||||||
</el-tab-pane>
|
|
||||||
<el-tab-pane :label="$t('test_track.test_track')" name="test_track">
|
<el-tab-pane :label="$t('test_track.test_track')" name="test_track">
|
||||||
<div>
|
<el-row style="margin-top: 10px">
|
||||||
<el-col :span="8">
|
<span style="font-weight:bold">{{ this.$t('commons.enable_settings') }}</span>
|
||||||
<el-row style="margin-top: 10px">
|
</el-row>
|
||||||
<span style="font-weight:bold">{{ this.$t('commons.enable_settings') }}</span>
|
<el-row style="margin-top: 15px">
|
||||||
</el-row>
|
<app-manage-item :title="$t('project.public')" :description="$t('project.public_info')"
|
||||||
<el-row style="margin-top: 15px">
|
v-if="isXpack">
|
||||||
<div style="width: 550px" class="divBorder" :model="form">
|
<template #append>
|
||||||
<div v-if="isXpack">
|
<el-switch v-model="form.casePublic"></el-switch>
|
||||||
<span style="margin-left: 10px; margin-top: 5px; display: block">{{
|
</template>
|
||||||
this.$t('project.public')
|
</app-manage-item>
|
||||||
}}</span>
|
|
||||||
<span class="spanCss">{{ this.$t('project.public_info') }}</span>
|
<app-manage-item :title="$t('project.test_case_custom_id')"
|
||||||
<el-switch v-model="form.casePublic"
|
:description="$t('project.test_case_custom_id_info')">
|
||||||
style="margin-left: 500px ; margin-top: -60px"></el-switch>
|
<template #append>
|
||||||
<el-divider></el-divider>
|
<el-switch v-model="form.customNum"></el-switch>
|
||||||
</div>
|
</template>
|
||||||
<span style="margin-left: 10px; margin-top: 5px; display: block">{{
|
</app-manage-item>
|
||||||
this.$t('project.test_case_custom_id')
|
</el-row>
|
||||||
}}</span>
|
</el-tab-pane>
|
||||||
<span class="spanCss">{{ this.$t('project.test_case_custom_id_info') }}</span>
|
|
||||||
<el-switch v-model="form.customNum" style="margin-left: 500px ; margin-top: -60px"></el-switch>
|
<el-tab-pane :label="$t('commons.api')" name="api">
|
||||||
</div>
|
<el-row :gutter="20">
|
||||||
</el-row>
|
<el-col :span="8">
|
||||||
</el-col>
|
<el-row style="margin-top: 10px">
|
||||||
</div>
|
<span style="font-weight:bold">{{ $t('commons.enable_settings') }}</span>
|
||||||
</el-tab-pane>
|
</el-row>
|
||||||
<el-tab-pane :label="$t('commons.api')" name="api">
|
<el-row style="margin-top: 15px">
|
||||||
<el-row :gutter="20">
|
<app-manage-item :title="$t('project.repeatable')" :description="$t('project.repeatable_info')">
|
||||||
<el-col :span="8">
|
<template #append>
|
||||||
<el-row style="margin-top: 10px">
|
<el-switch v-model="form.repeatable" @change="chooseChange"></el-switch>
|
||||||
<span style="font-weight:bold">{{ this.$t('commons.enable_settings') }}</span>
|
</template>
|
||||||
</el-row>
|
</app-manage-item>
|
||||||
<el-row style="margin-top: 15px">
|
<app-manage-item :title="$t('project.scenario_custom_id')"
|
||||||
<div style="width: 550px" class="divBorder" :model="form">
|
:description="$t('project.scenario_custom_id_info')">
|
||||||
<span style="margin-left: 10px ; margin-top: 10px; display: block;">{{
|
<template #append>
|
||||||
this.$t('project.repeatable')
|
<el-switch v-model="form.scenarioCustomNum" @change="chooseChange"></el-switch>
|
||||||
}}</span>
|
</template>
|
||||||
<span class="spanCss">{{ this.$t('project.repeatable_info') }}</span>
|
</app-manage-item>
|
||||||
<el-switch v-model="form.repeatable" style="margin-left: 500px ; margin-top: -60px"></el-switch>
|
<app-manage-item :title="'TCP Mock Port'" :prepend-span="8" :middle-span="12" :append-span="4">
|
||||||
<el-divider></el-divider>
|
<template #middle>
|
||||||
<span style="margin-left: 10px">{{ this.$t('project.scenario_custom_id') }}</span>
|
<el-input-number v-model="form.mockTcpPort" :controls="false" size="medium"
|
||||||
<span class="spanCss">{{ this.$t('project.scenario_custom_id_info') }}</span>
|
:disabled="form.isMockTcpOpen"></el-input-number>
|
||||||
<el-switch v-model="form.scenarioCustomNum"
|
</template>
|
||||||
style="margin-left: 500px ; margin-top: -60px"></el-switch>
|
<template #append>
|
||||||
<el-divider></el-divider>
|
<el-switch v-model="form.isMockTcpOpen" @change="chooseChange"></el-switch>
|
||||||
<span style="margin-left: 10px">{{ 'TCP Mock Port' }}</span>
|
</template>
|
||||||
<el-input-number v-model="form.mockTcpPort" :controls="false"
|
</app-manage-item>
|
||||||
style="width: 37%;margin-left: 100px; margin-top: 5px"></el-input-number>
|
</el-row>
|
||||||
<el-switch v-model="form.isMockTcpOpen" @change="chengeMockTcpSwitch"
|
</el-col>
|
||||||
style="margin-left: 500px;margin-top: -60px "></el-switch>
|
<el-col :span="8" :offset="4">
|
||||||
</div>
|
<el-row style="margin-top: 10px">
|
||||||
</el-row>
|
<span style="font-weight:bold">{{ $t('commons.view_settings') }}</span>
|
||||||
</el-col>
|
</el-row>
|
||||||
<el-col :span="8" :offset="4">
|
<el-row style="margin-top: 15px">
|
||||||
<el-row style="margin-top: 10px">
|
<app-manage-item :title="$t('api_test.definition.api_quick_button')"
|
||||||
<span style="font-weight:bold">{{ this.$t('commons.view_settings') }}</span>
|
:append-span="12" :prepend-span="12" :middle-span="0">
|
||||||
</el-row>
|
<template #append>
|
||||||
<el-row style="margin-top: 15px">
|
<el-radio-group v-model="form.apiQuick" @change="chooseChange">
|
||||||
<div style="width: 550px" class="divBorder" :model="form">
|
|
||||||
<span style="margin-left: 10px;margin-top: 10px; display: block;">{{
|
|
||||||
this.$t('api_test.definition.api_quick_button')
|
|
||||||
}}</span>
|
|
||||||
<el-radio-group v-model="form.apiQuick" style="margin-left: 300px; margin-top: -40px">
|
|
||||||
<el-radio label="debug" value="debug">
|
<el-radio label="debug" value="debug">
|
||||||
{{ this.$t('api_test.definition.request.fast_debug') }}
|
{{ $t('api_test.definition.request.fast_debug') }}
|
||||||
</el-radio>
|
</el-radio>
|
||||||
<el-radio label="api" value="api">
|
<el-radio label="api" value="api">
|
||||||
{{ this.$t('api_test.definition.request.title') }}
|
{{ $t('api_test.definition.request.title') }}
|
||||||
</el-radio>
|
</el-radio>
|
||||||
</el-radio-group>
|
</el-radio-group>
|
||||||
</div>
|
</template>
|
||||||
</el-row>
|
</app-manage-item>
|
||||||
</el-col>
|
</el-row>
|
||||||
</el-row>
|
</el-col>
|
||||||
</el-tab-pane>
|
</el-row>
|
||||||
|
</el-tab-pane>
|
||||||
|
|
||||||
<el-tab-pane :label="$t('commons.performance')" name="performance" :disabled="true">{{
|
<el-tab-pane :label="$t('commons.performance')" name="performance" :disabled="true">
|
||||||
this.$t('commons.performance')
|
<el-row style="margin-top: 10px">
|
||||||
}}
|
<span style="font-weight:bold">{{ this.$t('commons.enable_settings') }}</span>
|
||||||
</el-tab-pane>
|
</el-row>
|
||||||
</el-tabs>
|
</el-tab-pane>
|
||||||
</el-col>
|
|
||||||
|
</el-tabs>
|
||||||
</el-card>
|
</el-card>
|
||||||
</div>
|
</div>
|
||||||
</ms-main-container>
|
</ms-main-container>
|
||||||
|
|
@ -105,16 +102,16 @@ import MsMainContainer from "@/business/components/common/components/MsMainConta
|
||||||
|
|
||||||
import {
|
import {
|
||||||
getCurrentProjectID,
|
getCurrentProjectID,
|
||||||
getCurrentUser,
|
|
||||||
getCurrentUserId,
|
getCurrentUserId,
|
||||||
getCurrentWorkspaceId,
|
getCurrentWorkspaceId,
|
||||||
getUUID, hasLicense,
|
hasLicense,
|
||||||
hasPermission
|
|
||||||
} from "@/common/js/utils";
|
} from "@/common/js/utils";
|
||||||
|
import AppManageItem from "@/business/components/settings/common/AppManageItem";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "appManage",
|
name: "appManage",
|
||||||
components: {
|
components: {
|
||||||
|
AppManageItem,
|
||||||
MsMainContainer,
|
MsMainContainer,
|
||||||
MsContainer
|
MsContainer
|
||||||
},
|
},
|
||||||
|
|
@ -122,34 +119,14 @@ export default {
|
||||||
return {
|
return {
|
||||||
activeName: 'test_track',
|
activeName: 'test_track',
|
||||||
form: {},
|
form: {},
|
||||||
labelWidth: '400px',
|
|
||||||
count: 0,
|
count: 0,
|
||||||
isXpack: false,
|
isXpack: false,
|
||||||
result: {}
|
result: {}
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
this.result = this.$get('/project/get/' + this.projectId, res => {
|
this.init();
|
||||||
this.form = res.data;
|
this.isXpack = !!hasLicense();
|
||||||
this.count = 0
|
|
||||||
})
|
|
||||||
if (hasLicense()) {
|
|
||||||
this.isXpack = true;
|
|
||||||
} else {
|
|
||||||
this.isXpack = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
form: {
|
|
||||||
handler(val, oldVal) {
|
|
||||||
this.count++;
|
|
||||||
if (this.count > 1) {
|
|
||||||
this.submitForm();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
deep: true
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
projectId() {
|
projectId() {
|
||||||
|
|
@ -157,48 +134,26 @@ export default {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handleClick() {
|
chooseChange() {
|
||||||
|
|
||||||
},
|
|
||||||
submitForm() {
|
|
||||||
this.form.workspaceId = getCurrentWorkspaceId();
|
this.form.workspaceId = getCurrentWorkspaceId();
|
||||||
this.form.createUser = getCurrentUserId();
|
this.form.createUser = getCurrentUserId();
|
||||||
this.form.id = getCurrentProjectID();
|
this.form.id = this.projectId;
|
||||||
this.result = this.$post("/project/update", this.form, () => {
|
this.$post("/project/update", this.form, () => {
|
||||||
this.$success(this.$t('commons.save_success'));
|
this.$success(this.$t('commons.save_success'));
|
||||||
|
this.init();
|
||||||
|
}, () => {
|
||||||
|
this.init();
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
chengeMockTcpSwitch(value) {
|
init() {
|
||||||
if (value && this.form.mockTcpPort === 0) {
|
this.result = this.$get('/project/get/' + this.projectId, res => {
|
||||||
this.result = this.$get('/project/genTcpMockPort/' + this.form.id, res => {
|
this.form = res.data;
|
||||||
let port = res.data;
|
})
|
||||||
this.form.mockTcpPort = port;
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
||||||
/deep/ .el-form-item__label {
|
|
||||||
white-space: pre-line;
|
|
||||||
}
|
|
||||||
|
|
||||||
.divBorder {
|
|
||||||
border: 1px solid #DCDFE6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spanCss {
|
|
||||||
display: block;
|
|
||||||
color: #929295;
|
|
||||||
margin-left: 10px;
|
|
||||||
font-size: 13px
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-divider--horizontal {
|
|
||||||
margin: 0 0 5px 0;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,112 @@
|
||||||
|
<template>
|
||||||
|
<div class="item_outer">
|
||||||
|
<el-row type="flex" justify="space-between">
|
||||||
|
<el-col :span="prependSpan">
|
||||||
|
<div class="item_prepend">
|
||||||
|
<slot name="prepend">
|
||||||
|
<span :class="titleClass">{{ title }}</span>
|
||||||
|
<span class="prepend_description">{{ description }}</span>
|
||||||
|
</slot>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="middleSpan">
|
||||||
|
<div class="item_middle">
|
||||||
|
<slot name="middle"></slot>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="appendSpan">
|
||||||
|
<div class="item_append">
|
||||||
|
<slot name="append"></slot>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "AppManageItem",
|
||||||
|
props: {
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default() {
|
||||||
|
return "";
|
||||||
|
}
|
||||||
|
},
|
||||||
|
description: {
|
||||||
|
type: String,
|
||||||
|
default() {
|
||||||
|
return "";
|
||||||
|
}
|
||||||
|
},
|
||||||
|
prependSpan: {
|
||||||
|
type: Number,
|
||||||
|
default() {
|
||||||
|
return 12;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
middleSpan: {
|
||||||
|
type: Number,
|
||||||
|
default() {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
appendSpan: {
|
||||||
|
type: Number,
|
||||||
|
default() {
|
||||||
|
return 12;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
// todo 垂直居中
|
||||||
|
titleClass() {
|
||||||
|
return this.description ?
|
||||||
|
['prepend_title'] : ['prepend_title', 'item_prepend_lh'];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.item_outer {
|
||||||
|
border-radius: 2px;
|
||||||
|
width: 580px;
|
||||||
|
height: 40px;
|
||||||
|
border: 1px solid #DCDFE6;
|
||||||
|
padding-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item_outer:not(:last-child) {
|
||||||
|
margin-bottom: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item_prepend {
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item_prepend_lh {
|
||||||
|
line-height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item_middle {
|
||||||
|
line-height: 55px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item_append {
|
||||||
|
position: absolute;
|
||||||
|
line-height: 55px;
|
||||||
|
right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prepend_title {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prepend_description {
|
||||||
|
display: block;
|
||||||
|
color: #929295;
|
||||||
|
margin-left: 10px;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue