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

style(接口自动化): DUBBO协议接口 显示样式修改

This commit is contained in:
fit2-zhao 2021-02-20 14:32:45 +08:00
parent ce7600bad4
commit dff4904efb
5 changed files with 204 additions and 192 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/business/components/api/automation/scenario/common/ScenarioImport.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<el-dialog :close-on-click-modal="false" :title="$t('api_test.api_import.title')" width="30%" <el-dialog :close-on-click-modal="false" :title="$t('api_test.automation.scenario_import')" width="30%"
:visible.sync="visible" class="api-import" v-loading="result.loading" @close="close"> :visible.sync="visible" class="api-import" v-loading="result.loading" @close="close">
<div class="header-bar"> <div class="header-bar">

139
frontend/src/business/components/api/definition/components/request/dubbo/ConfigCenter.vue
View File

@ -1,83 +1,86 @@
<template> <template>
<el-form :model="config" :rules="rules" ref="config" label-width="100px" size="small" :disabled="isReadOnly"> <el-form :model="config" :rules="rules" ref="config" label-width="100px" size="small" :disabled="isReadOnly">
<div class="dubbo-form-description" v-if="description"> <el-row>
{{ description }} <div class="dubbo-form-description" v-if="description">
</div> {{ description }}
<el-form-item label="Protocol" prop="protocol" class="dubbo-form-item"> </div>
<el-select v-model="config.protocol" class="select-100" clearable> </el-row>
<el-option v-for="p in protocols" :key="p" :label="p" :value="p"/>
</el-select>
</el-form-item>
<el-form-item label="Group" prop="group" class="dubbo-form-item"> <el-row>
<el-input v-model="config.group" maxlength="300" show-word-limit <el-form-item label="Protocol" prop="protocol" class="dubbo-form-item">
:placeholder="$t('commons.input_content')"/> <el-select v-model="config.protocol" class="select-100" clearable>
</el-form-item> <el-option v-for="p in protocols" :key="p" :label="p" :value="p"/>
</el-select>
</el-form-item>
<el-form-item label="Group" prop="group" class="dubbo-form-item">
<el-input v-model="config.group" maxlength="300" show-word-limit
:placeholder="$t('commons.input_content')"/>
</el-form-item>
<el-form-item label="Namespace" prop="namespace" class="dubbo-form-item">
<el-input v-model="config.namespace" maxlength="300" show-word-limit
:placeholder="$t('commons.input_content')"/>
</el-form-item>
<el-form-item label="Timeout" prop="timeout" class="dubbo-form-item">
<el-input type="number" v-model="config.timeout" :placeholder="$t('commons.input_content')"/>
</el-form-item>
</el-row>
<el-row>
<el-form-item label="Address" prop="address" class="dubbo-form-item-long">
<el-input v-model="config.address" maxlength="300" show-word-limit
:placeholder="$t('commons.input_content')"/>
</el-form-item>
<el-form-item label="Namespace" prop="namespace" class="dubbo-form-item"> <el-form-item label="UserName" prop="username" class="dubbo-form-item">
<el-input v-model="config.namespace" maxlength="300" show-word-limit <el-input v-model="config.username" maxlength="100" show-word-limit
:placeholder="$t('commons.input_content')"/> :placeholder="$t('commons.input_content')"/>
</el-form-item> </el-form-item>
<el-form-item label="Timeout" prop="timeout" class="dubbo-form-item">
<el-input type="number" v-model="config.timeout" :placeholder="$t('commons.input_content')"/>
</el-form-item>
<el-form-item label="Address" prop="address" class="dubbo-form-item-long">
<el-input v-model="config.address" maxlength="300" show-word-limit
:placeholder="$t('commons.input_content')"/>
</el-form-item>
<el-form-item label="UserName" prop="username" class="dubbo-form-item">
<el-input v-model="config.username" maxlength="100" show-word-limit
:placeholder="$t('commons.input_content')"/>
</el-form-item>
<el-form-item label="Password" prop="password" class="dubbo-form-item">
<el-input v-model="config.password" maxlength="30" show-word-limit show-password autocomplete="new-password"
:placeholder="$t('commons.input_content')"/>
</el-form-item>
<el-form-item label="Password" prop="password" class="dubbo-form-item">
<el-input v-model="config.password" maxlength="30" show-word-limit show-password autocomplete="new-password"
:placeholder="$t('commons.input_content')"/>
</el-form-item>
</el-row>
</el-form> </el-form>
</template> </template>
<script> <script>
import './dubbo.css' import './dubbo.css'
import {ConfigCenter} from "@/business/components/api/definition/model/ApiTestModel"; import {ConfigCenter} from "@/business/components/api/definition/model/ApiTestModel";
export default { export default {
name: "MsDubboConfigCenter", name: "MsDubboConfigCenter",
props: { props: {
description: String, description: String,
config: {}, config: {},
isReadOnly: { isReadOnly: {
type: Boolean, type: Boolean,
default: false default: false
} }
}, },
data() { data() {
return { return {
protocols: ConfigCenter.PROTOCOLS, protocols: ConfigCenter.PROTOCOLS,
methods: [], methods: [],
rules: { rules: {
group: [ group: [
{max: 300, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'} {max: 300, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'}
], ],
namespace: [ namespace: [
{max: 300, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'} {max: 300, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'}
], ],
username: [ username: [
{max: 100, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'} {max: 100, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'}
], ],
password: [ password: [
{max: 30, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'} {max: 30, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'}
], ],
address: [ address: [
{max: 300, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'} {max: 300, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'}
] ]
}
} }
} }
} }
}
</script> </script>

132
frontend/src/business/components/api/definition/components/request/dubbo/ConsumerAndService.vue
View File

@ -1,82 +1,86 @@
<template> <template>
<el-form :model="consumer" :rules="rules" ref="consumer" label-width="100px" size="small" :disabled="isReadOnly"> <el-form :model="consumer" :rules="rules" ref="consumer" label-width="100px" size="small" :disabled="isReadOnly">
<div class="dubbo-form-description" v-if="description"> <el-row>
{{ description }} <div class="dubbo-form-description" v-if="description">
</div> {{ description }}
<el-form-item label="Timeout" prop="timeout" class="dubbo-form-item"> </div>
<el-input type="number" v-model="consumer.timeout" :placeholder="$t('commons.input_content')"/> </el-row>
</el-form-item> <el-row>
<el-form-item label="Timeout" prop="timeout" class="dubbo-form-item">
<el-input type="number" v-model="consumer.timeout" :placeholder="$t('commons.input_content')"/>
</el-form-item>
<el-form-item label="Version" prop="version" class="dubbo-form-item">
<el-input v-model="consumer.version" maxlength="30" show-word-limit
:placeholder="$t('commons.input_content')"/>
</el-form-item>
<el-form-item label="Version" prop="version" class="dubbo-form-item"> <el-form-item label="Retries" prop="retries" class="dubbo-form-item">
<el-input v-model="consumer.version" maxlength="30" show-word-limit <el-input type="number" v-model="consumer.retries" :placeholder="$t('commons.input_content')"/>
:placeholder="$t('commons.input_content')"/> </el-form-item>
</el-form-item>
<el-form-item label="Retries" prop="retries" class="dubbo-form-item"> <el-form-item label="Cluster" prop="cluster" class="dubbo-form-item">
<el-input type="number" v-model="consumer.retries" :placeholder="$t('commons.input_content')"/> <el-input v-model="consumer.cluster" maxlength="300" show-word-limit
</el-form-item> :placeholder="$t('commons.input_content')"/>
</el-form-item>
</el-row>
<el-row>
<el-form-item label="Group" prop="group" class="dubbo-form-item">
<el-input v-model="consumer.group" maxlength="300" show-word-limit
:placeholder="$t('commons.input_content')"/>
</el-form-item>
<el-form-item label="Cluster" prop="cluster" class="dubbo-form-item"> <el-form-item label="Connections" prop="connections" class="dubbo-form-item">
<el-input v-model="consumer.cluster" maxlength="300" show-word-limit <el-input type="number" v-model="consumer.connections" :placeholder="$t('commons.input_content')"/>
:placeholder="$t('commons.input_content')"/> </el-form-item>
</el-form-item>
<el-form-item label="Group" prop="group" class="dubbo-form-item"> <el-form-item label="Async" prop="async" class="dubbo-form-item">
<el-input v-model="consumer.group" maxlength="300" show-word-limit <el-select v-model="consumer.async" class="select-100" clearable>
:placeholder="$t('commons.input_content')"/> <el-option v-for="option in asyncOptions" :key="option" :label="option" :value="option"/>
</el-form-item> </el-select>
</el-form-item>
<el-form-item label="Connections" prop="connections" class="dubbo-form-item"> <el-form-item label="LoadBalance" prop="loadBalance" class="dubbo-form-item">
<el-input type="number" v-model="consumer.connections" :placeholder="$t('commons.input_content')"/> <el-select v-model="consumer.loadBalance" class="select-100" clearable>
</el-form-item> <el-option v-for="option in loadBalances" :key="option" :label="option" :value="option"/>
</el-select>
<el-form-item label="Async" prop="async" class="dubbo-form-item"> </el-form-item>
<el-select v-model="consumer.async" class="select-100" clearable> </el-row>
<el-option v-for="option in asyncOptions" :key="option" :label="option" :value="option"/>
</el-select>
</el-form-item>
<el-form-item label="LoadBalance" prop="loadBalance" class="dubbo-form-item">
<el-select v-model="consumer.loadBalance" class="select-100" clearable>
<el-option v-for="option in loadBalances" :key="option" :label="option" :value="option"/>
</el-select>
</el-form-item>
</el-form> </el-form>
</template> </template>
<script> <script>
import './dubbo.css' import './dubbo.css'
import {ConsumerAndService, RegistryCenter} from "@/business/components/api/definition/model/ApiTestModel"; import {ConsumerAndService, RegistryCenter} from "@/business/components/api/definition/model/ApiTestModel";
export default { export default {
name: "MsDubboConsumerService", name: "MsDubboConsumerService",
props: { props: {
description: String, description: String,
consumer: {}, consumer: {},
isReadOnly: { isReadOnly: {
type: Boolean, type: Boolean,
default: false default: false
} }
}, },
data() { data() {
return { return {
asyncOptions: ConsumerAndService.ASYNC_OPTIONS, asyncOptions: ConsumerAndService.ASYNC_OPTIONS,
loadBalances: ConsumerAndService.LOAD_BALANCE_OPTIONS, loadBalances: ConsumerAndService.LOAD_BALANCE_OPTIONS,
methods: [], methods: [],
rules: { rules: {
version: [ version: [
{max: 30, message: this.$t('commons.input_limit', [0, 30]), trigger: 'blur'} {max: 30, message: this.$t('commons.input_limit', [0, 30]), trigger: 'blur'}
], ],
cluster: [ cluster: [
{max: 300, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'} {max: 300, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'}
], ],
group: [ group: [
{max: 300, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'} {max: 300, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'}
] ]
}
} }
} }
} }
}
</script> </script>

2
frontend/src/business/components/api/definition/components/request/dubbo/Interface.vue
View File

@ -117,7 +117,7 @@
<style scoped> <style scoped>
.get-provider { .get-provider {
margin-bottom: 22px; margin: 5px 5px 10px;
} }
.select-100 { .select-100 {

121
frontend/src/business/components/api/definition/components/request/dubbo/RegistryCenter.vue
View File

@ -1,73 +1,78 @@
<template> <template>
<el-form :model="registry" :rules="rules" ref="registry" label-width="100px" size="small" :disabled="isReadOnly"> <el-form :model="registry" :rules="rules" ref="registry" label-width="100px" size="small" :disabled="isReadOnly">
<div class="dubbo-form-description" v-if="description"> <el-row>
{{ description }} <div class="dubbo-form-description" v-if="description">
</div> {{ description }}
<el-form-item label="Protocol" prop="protocol" class="dubbo-form-item"> </div>
<el-select v-model="registry.protocol" class="select-100" clearable> </el-row>
<el-option v-for="p in protocols" :key="p" :label="p" :value="p"/> <el-row>
</el-select> <el-form-item label="Protocol" prop="protocol" class="dubbo-form-item">
</el-form-item> <el-select v-model="registry.protocol" class="select-100" clearable>
<el-option v-for="p in protocols" :key="p" :label="p" :value="p"/>
</el-select>
</el-form-item>
<el-form-item label="Group" prop="group" class="dubbo-form-item"> <el-form-item label="Group" prop="group" class="dubbo-form-item">
<el-input v-model="registry.group" maxlength="300" show-word-limit <el-input v-model="registry.group" maxlength="300" show-word-limit
:placeholder="$t('commons.input_content')"/> :placeholder="$t('commons.input_content')"/>
</el-form-item> </el-form-item>
<el-form-item label="UserName" prop="username" class="dubbo-form-item"> <el-form-item label="UserName" prop="username" class="dubbo-form-item">
<el-input v-model="registry.username" maxlength="100" show-word-limit <el-input v-model="registry.username" maxlength="100" show-word-limit
:placeholder="$t('commons.input_content')"/> :placeholder="$t('commons.input_content')"/>
</el-form-item> </el-form-item>
<el-form-item label="Password" prop="password" class="dubbo-form-item"> <el-form-item label="Password" prop="password" class="dubbo-form-item">
<el-input v-model="registry.password" maxlength="30" show-word-limit show-password autocomplete="new-password" <el-input v-model="registry.password" maxlength="30" show-word-limit show-password autocomplete="new-password"
:placeholder="$t('commons.input_content')"/> :placeholder="$t('commons.input_content')"/>
</el-form-item> </el-form-item>
</el-row>
<el-row>
<el-form-item label="Address" prop="address" class="dubbo-form-item-long">
<el-input v-model="registry.address" maxlength="300" show-word-limit
:placeholder="$t('commons.input_content')"/>
</el-form-item>
<el-form-item label="Address" prop="address" class="dubbo-form-item-long"> <el-form-item label="Timeout" prop="timeout" class="dubbo-form-item">
<el-input v-model="registry.address" maxlength="300" show-word-limit <el-input type="number" v-model="registry.timeout" :placeholder="$t('commons.input_content')"/>
:placeholder="$t('commons.input_content')"/> </el-form-item>
</el-form-item> </el-row>
<el-form-item label="Timeout" prop="timeout" class="dubbo-form-item">
<el-input type="number" v-model="registry.timeout" :placeholder="$t('commons.input_content')"/>
</el-form-item>
</el-form> </el-form>
</template> </template>
<script> <script>
import './dubbo.css' import './dubbo.css'
import {RegistryCenter} from "@/business/components/api/definition/model/ApiTestModel"; import {RegistryCenter} from "@/business/components/api/definition/model/ApiTestModel";
export default { export default {
name: "MsDubboRegistryCenter", name: "MsDubboRegistryCenter",
props: { props: {
description: String, description: String,
registry: {}, registry: {},
isReadOnly: { isReadOnly: {
type: Boolean, type: Boolean,
default: false default: false
} }
}, },
data() { data() {
return { return {
protocols: RegistryCenter.PROTOCOLS, protocols: RegistryCenter.PROTOCOLS,
methods: [], methods: [],
rules: { rules: {
group: [ group: [
{max: 300, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'} {max: 300, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'}
], ],
username: [ username: [
{max: 300, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'} {max: 300, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'}
], ],
password: [ password: [
{max: 30, message: this.$t('commons.input_limit', [0, 30]), trigger: 'blur'} {max: 30, message: this.$t('commons.input_limit', [0, 30]), trigger: 'blur'}
], ],
address: [ address: [
{max: 300, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'} {max: 300, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'}
] ]
}
} }
} }
} }
}
</script> </script>