Skip to content

A
apaas-ui
Commit 07975c81 authored by 张俊's avatar 张俊
Browse files
Options

新增表单验证

parent 3578680f
Hide whitespace changes
Inline Side-by-side
Showing with 606 additions and 529 deletions
src/pages/serviceDetail.vue
View file @ 07975c81
<template>
<div class="detail_contain">
<p class="now_page_title">我的服务 / 注册发布的服务 / <span>服务详情</span></p>
<div class="info_contain">
<service-header :data="service_header_arr"></service-header>
<div class="type_box">
<div class="type_title">
<div v-for="(item,index) in service_arr[now_user]" :key="index+1000" class="type_select" @click="now_service=index" :style="now_service==index?{borderBottom: '4px solid #f5ab4c'}:{}">{{item}}</div>
</div>
<div class="type_box_select">
<info-list :list_arr="now_service==0?list_arr:servicead_arr" v-if="now_service == 0||now_service == 1">
<table-um :headers="header_arr" :url="responseParamUrl" :paginationShow="true" slot="zd_table"></table-um>
<v-apaas-code :url="codeExampleUrl" slot="zd_code"></v-apaas-code>
</info-list>
<div v-show="now_service == 2">
<p class="service_title"><span></span>服务运行概况</p>
<div class="service_title_card">
<nor-card title="服务状态" class="service_card">
<template>
<div style="height:115px;padding-top:10px;">
<example-icon style="margin:10px auto;"></example-icon>
<p style="color: #58617a;font-size: 16px;text-align:center;">{{yx_state.state}}</p>
</div>
</template>
</nor-card>
<nor-card title="平均响应时间" class="service_card">
<template>
<div style="height:115px;" class="service_num">
<p>{{yx_state.averageTime}}</p>
<p>最大响应时间：{{yx_state.maxTime}}</p>
</div>
</template>
</nor-card>
<nor-card title="吞吐率" class="service_card">
<template>
<div style="height:115px;" class="service_num">
<p>{{yx_state.averageTraffic}}</p>
<p>最大吞吐率：{{yx_state.maxTraffic}}</p>
</div>
</template>
</nor-card>
<nor-card title="资源使用" class="service_card">
<template>
<div style="height:115px;padding-top:30px;" class="service_num">
<p>{{yx_state.memory}}</p>
</div>
</template>
</nor-card>
</div>
<nor-card title="服务调用拓扑图" class="service_card_charts">
<Topology :datas="datas" />
</nor-card>
<p class="service_title"><span></span>服务调用列表</p>
<table-um :headers="header_use_arr" url="params_use_arr" :paginationShow="true"></table-um>
<p class="now_page_title">
我的服务 / 注册发布的服务 / <span>服务详情</span>
</p>
<div class="info_contain">
<service-header :data="service_header_arr"></service-header>
<div class="type_box">
<div class="type_title">
<div
v-for="(item, index) in service_arr[now_user]"
:key="index + 1000"
class="type_select"
@click="now_service = index"
:style="
now_service == index ? { borderBottom: '4px solid #f5ab4c' } : {}
"
>
{{ item }}
</div>
</div>
<div class="type_box_select">
<info-list
:list_arr="now_service == 0 ? list_arr : servicead_arr"
v-if="now_service == 0 || now_service == 1"
>
<table-um
:headers="header_arr"
:url="responseParamUrl"
:paginationShow="true"
slot="zd_table"
></table-um>
<v-apaas-code :url="codeExampleUrl" slot="zd_code"></v-apaas-code>
</info-list>
<div v-show="now_service == 2">
<p class="service_title"><span></span>服务运行概况</p>
<div class="service_title_card">
<nor-card title="服务状态" class="service_card">
<template>
<div style="height:115px;padding-top:10px;">
<example-icon style="margin:10px auto;"></example-icon>
<p
style="color: #58617a;font-size: 16px;text-align:center;"
>
{{ yx_state.state }}
</p>
</div>
</template>
</nor-card>
<nor-card title="平均响应时间" class="service_card">
<template>
<div style="height:115px;" class="service_num">
<p>{{ yx_state.averageTime }}</p>
<p>最大响应时间：{{ yx_state.maxTime }}</p>
</div>
<div v-show="now_service == 3">
<p style="color: #8890a7;">服务规格：</p>
<table-um :stripe="true" :headers="service_size_arr" url="service_size_arr"></table-um>
<p style="color: #8890a7;">购买方式：</p>
<p style="color: #242c43;margin:10px 0px;">按月购买&按年购买</p>
<div class="editbtn" v-if="now_user==1">编辑</div>
<p v-if="now_user==1" style="color: #8890a7;margin-bottom:10px;">规格设置：</p>
<table-um
v-if="now_user==1"
:headers="edit_size_arr"
headerCellClassName="th_pink"
:border="true"
:autoAdd="true"
:couldNotEdit="false"
:radius="true"
:isIndex="true"
url="service_size_arr">
</table-um>
<p v-if="now_user==1" style="color: #8890a7;margin:10px 0;">购买方式：</p>
<el-button v-if="now_user==1" :type="buy_style==0?'primary':''" @click="buy_style=0">按月购买</el-button>
<el-button v-if="now_user==1" :type="buy_style==1?'primary':''" @click="buy_style=1">按年购买</el-button>
<div class="savebtn" v-if="now_user==1">
<el-button >保存</el-button>
<el-button >取消</el-button>
</div>
</template>
</nor-card>
<nor-card title="吞吐率" class="service_card">
<template>
<div style="height:115px;" class="service_num">
<p>{{ yx_state.averageTraffic }}</p>
<p>最大吞吐率：{{ yx_state.maxTraffic }}</p>
</div>
</div>
</template>
</nor-card>
<nor-card title="资源使用" class="service_card">
<template>
<div
style="height:115px;padding-top:30px;"
class="service_num"
>
<p>{{ yx_state.memory }}</p>
</div>
</template>
</nor-card>
</div>
<nor-card title="服务调用拓扑图" class="service_card_charts">
<Topology :datas="datas" />
</nor-card>
<p class="service_title"><span></span>服务调用列表</p>
<table-um
:headers="header_use_arr"
url="params_use_arr"
:paginationShow="true"
></table-um>
</div>
<div v-show="now_service == 3">
<p style="color: #8890a7;">服务规格：</p>
<table-um
:stripe="true"
:headers="service_size_arr"
url="service_size_arr"
></table-um>
<p style="color: #8890a7;">购买方式：</p>
<p style="color: #242c43;margin:10px 0px;">按月购买&按年购买</p>
<div class="editbtn" v-if="now_user == 1">编辑</div>
<p v-if="now_user == 1" style="color: #8890a7;margin-bottom:10px;">
规格设置：
</p>
<table-um
v-if="now_user == 1"
:headers="edit_size_arr"
headerCellClassName="th_pink"
:border="true"
:autoAdd="true"
:couldNotEdit="false"
:radius="true"
:isIndex="true"
url="service_size_arr"
>
</table-um>
<p v-if="now_user == 1" style="color: #8890a7;margin:10px 0;">
购买方式：
</p>
<el-button
v-if="now_user == 1"
:type="buy_style == 0 ? 'primary' : ''"
@click="buy_style = 0"
>按月购买</el-button
>
<el-button
v-if="now_user == 1"
:type="buy_style == 1 ? 'primary' : ''"
@click="buy_style = 1"
>按年购买</el-button
>
<div class="savebtn" v-if="now_user == 1">
<el-button>保存</el-button>
<el-button>取消</el-button>
</div>
</div>
</div>
</div>
<dialog-action
ref="myConfirm"
></dialog-action>
</div>
<dialog-action ref="myConfirm"></dialog-action>
</div>
</template>
<script>
import infoList from '../components/infoList'
import tableUm from '../components/table-um'
import infoList from "../components/infoList";
import tableUm from "../components/table-um";
import codes from "@/components/codes";
import norCard from "@/components/card"
import exampleIcon from "@/pages/example_icon"
import norCard from "@/components/card";
import exampleIcon from "@/pages/example_icon";
import Topology from "@/components/topology.vue";
import serviceHeader from '../components/service-header'
import serviceHeader from "../components/service-header";
import dialogAction from "@/components/dialog-action";
import { getRole } from "../utils/common";
export default {
components:{
infoList,
tableUm,
"v-apaas-code": codes,
norCard,
exampleIcon,
Topology,
serviceHeader,
dialogAction,
components: {
infoList,
tableUm,
"v-apaas-code": codes,
norCard,
exampleIcon,
Topology,
serviceHeader,
dialogAction,
},
data() {
return {
now_user: 0, //0：普通用户，1：组织管理员，2：超级管理员
buy_style:0,
responseParamUrl:'',
codeExampleUrl:'',
yx_state:{
"state":"",
"averageTime":"",
"maxTime":"",
"averageTraffic":"",
"maxTraffic":"",
"memory":""
now_user: 0, //0：普通用户，1：组织管理员，2：超级管理员
buy_style: 0,
responseParamUrl: "",
codeExampleUrl: "",
yx_state: {
state: "",
averageTime: "",
maxTime: "",
averageTraffic: "",
maxTraffic: "",
memory: "",
},
service_arr: [
["服务基本信息", "接口详细信息", "服务运行状态"],
["服务基本信息", "接口详细信息", "服务运行状态", "服务计费规则"],
["服务基本信息", "接口详细信息", "服务运行状态", "服务规格"],
],
service_header_arr: {
name: "",
first: [],
second: [],
fixed: true,
},
now_service: 0,
datas: {},
header_arr: [
{
prop: "zdmc",
label: "字段名称",
minWidth: "20%",
align: "left",
},
{
prop: "zdbm",
label: "字段编码",
width: "100px",
align: "center",
},
{
prop: "zdlx",
label: "字段类型",
width: "100px",
align: "center",
},
{
prop: "zdsm",
label: "字段说明",
minWidth: "30%",
align: "left",
},
{
prop: "zdsl",
label: "字段示例数值",
width: "120px",
align: "left",
},
],
header_use_arr: [
{
prop: "dydw",
label: "调用单位",
minWidth: "20%",
align: "left",
},
{
prop: "dyr",
label: "调用人",
width: "100px",
align: "center",
},
{
prop: "dyyw",
label: "调用业务系统",
minWidth: "20%",
align: "left",
},
{
prop: "ywxt",
label: "业务系统网址",
minWidth: "20%",
align: "left",
},
{
prop: "cjms",
label: "场景描述",
minWidth: "40%",
align: "left",
},
service_arr:[
['服务基本信息','接口详细信息','服务运行状态'],
['服务基本信息','接口详细信息','服务运行状态','服务计费规则'],
['服务基本信息','接口详细信息','服务运行状态','服务规格'],
],
service_header_arr:{
name:'',
first:[],
second:[],
fixed:true,
{
prop: "sqsj",
label: "申请调用时间",
width: "160px",
align: "right",
},
now_service:0,
datas:{},
header_arr:[
],
service_size_arr: [
{
prop: "fwcs",
label: "访问次数（次/日）",
minWidth: "33.33%",
align: "center",
},
{
prop: "fwl",
label: "访问量（PV/日）",
minWidth: "33.33%",
align: "center",
},
{
prop: "ggsm",
label: "规格说明",
minWidth: "33.33%",
align: "left",
},
],
edit_size_arr: [
{
prop: "fwcs",
label: "访问次数（次/日）",
minWidth: "33.33%",
align: "center",
type: "select",
selectArr: [
{
label: 10,
value: 10,
},
{
label: 20,
value: 20,
},
{
label: 30,
value: 30,
},
{
label: 40,
value: 40,
},
{
label: 50,
value: 50,
},
{
prop:'zdmc',
label:'字段名称',
minWidth:'20%',
align:'left',
label: 60,
value: 60,
},
{
prop:'zdbm',
label:'字段编码',
width:'100px',
align:'center',
label: 70,
value: 70,
},
{
prop:'zdlx',
label:'字段类型',
width:'100px',
align:'center',
label: 80,
value: 80,
},
{
prop:'zdsm',
label:'字段说明',
minWidth:'30%',
align:'left',
label: 90,
value: 90,
},
{
prop:'zdsl',
label:'字段示例数值',
width:'120px',
align:'left',
label: 100,
value: 100,
},
],
header_use_arr:[
{
prop:'dydw',
label:'调用单位',
minWidth:'20%',
align:'left',
label: 200,
value: 200,
},
{
prop:'dyr',
label:'调用人',
width:'100px',
align:'center',
label: 300,
value: 300,
},
{
prop:'dyyw',
label:'调用业务系统',
minWidth:'20%',
align:'left',
label: 400,
value: 400,
},
{
prop:'ywxt',
label:'业务系统网址',
minWidth:'20%',
align:'left',
label: 500,
value: 500,
},
],
},
{
prop: "fwl",
label: "访问量（PV/日）",
minWidth: "33.33%",
align: "center",
type: "select",
selectArr: [
{
prop:'cjms',
label:'场景描述',
minWidth:'40%',
align:'left',
label: 100,
value: 100,
},
{
prop:'sqsj',
label:'申请调用时间',
width:'160px',
align:'right',
label: 200,
value: 200,
},
],
service_size_arr:[
{
prop:'fwcs',
label:'访问次数（次/日）',
minWidth:'33.33%',
align:'center',
label: 300,
value: 300,
},
{
prop:'fwl',
label:'访问量（PV/日）',
minWidth:'33.33%',
align:'center',
label: 400,
value: 400,
},
{
prop:'ggsm',
label:'规格说明',
minWidth:'33.33%',
align:'left',
label: 500,
value: 500,
},
],
edit_size_arr:[
{
prop:'fwcs',
label:'访问次数（次/日）',
minWidth:'33.33%',
align:'center',
type:'select',
selectArr:[
{
label:10,
value:10
},
{
label:20,
value:20
},
{
label:30,
value:30
},
{
label:40,
value:40
},
{
label:50,
value:50
},
{
label:60,
value:60
},
{
label:70,
value:70
},
{
label:80,
value:80
},
{
label:90,
value:90
},
{
label:100,
value:100
},
{
label:200,
value:200
},
{
label:300,
value:300
},
{
label:400,
value:400
},
{
label:500,
value:500
},
]
label: 600,
value: 600,
},
{
prop:'fwl',
label:'访问量（PV/日）',
minWidth:'33.33%',
align:'center',
type:'select',
selectArr:[
{
label:100,
value:100
},
{
label:200,
value:200
},
{
label:300,
value:300
},
{
label:400,
value:400
},
{
label:500,
value:500
},
{
label:600,
value:600
},
{
label:700,
value:700
},
{
label:800,
value:800
},
{
label:900,
value:900
},
{
label:1000,
value:1000
},
{
label:2000,
value:2000
},
{
label:3000,
value:3000
},
{
label:4000,
value:4000
},
{
label:5000,
value:5000
},
]
label: 700,
value: 700,
},
{
prop:'ggsm',
label:'规格说明',
minWidth:'33.33%',
align:'left',
type: "input"
label: 800,
value: 800,
},
{
label: "操作",
type: "Button",
align: "center",
width: 140,
btnList: [
{
type: "action-delete",
label: "删除",
local:true
},
],
label: 900,
value: 900,
},
],
servicead_arr:[
{
title:'请求方式：',
info:''
label: 1000,
value: 1000,
},
{
title:'请求参数：',
info:''
label: 2000,
value: 2000,
},
{
title:'请求示例：',
info:''
label: 3000,
value: 3000,
},
{
title:'编码格式：',
info:''
label: 4000,
value: 4000,
},
{
title:'响应参数：',
info:'',
type:'solt',
solt_name:'zd_table'
label: 5000,
value: 5000,
},
],
},
{
prop: "ggsm",
label: "规格说明",
minWidth: "33.33%",
align: "left",
type: "input",
},
{
label: "操作",
type: "Button",
align: "center",
width: 140,
btnList: [
{
title:'响应示例：',
info:'',
type:'solt',
solt_name:'zd_code'
type: "action-delete",
label: "删除",
local: true,
},
],
list_arr:[],
}
],
},
],
servicead_arr: [
{
title: "请求方式：",
info: "",
},
{
title: "请求参数：",
info: "",
},
{
title: "请求示例：",
info: "",
},
{
title: "编码格式：",
info: "",
},
{
title: "响应参数：",
info: "",
type: "solt",
solt_name: "zd_table",
},
{
title: "响应示例：",
info: "",
type: "solt",
solt_name: "zd_code",
},
],
list_arr: [],
};
},
watch:{
now_service(n,o){
if(n == 2){
this.getData()
}
watch: {
now_service(n, o) {
if (n == 2) {
this.getData();
}
},
},
created(){
this.now_user = this.$store.state.role
getRole().then(data => {
this.now_user = data;
this.$store.commit('rolefun',data)
this.getServiceInfo()
this.getInterfaceInfo()
this.getServiceBaseInfo()
this.getServiceyxztInfo()
created() {
this.now_user = this.$store.state.role;
getRole().then((data) => {
this.now_user = data;
this.$store.commit("rolefun", data);
this.getServiceInfo();
this.getInterfaceInfo();
this.getServiceBaseInfo();
this.getServiceyxztInfo();
});
},
mounted(){
},
methods:{
mounted() {},
methods: {
getData() {
let url = "/static/antv.json";
this.$http
.get(url)
.then(response => {
.then((response) => {
this.datas = response.data.elements;
})
.catch(function(response) {
});
.catch(function(response) {});
},
getServiceInfo(){
this.$http
.get('/static/servicedetail1.json')
.then(response => {
let data = response.data.data
this.$set(this.service_header_arr,'name',data.serviceInfo.name)
this.$set(this.service_header_arr,'first',data.serviceInfo.first)
this.$set(this.service_header_arr,'second',data.serviceInfo.second)
})
.catch(function(response) {
});
getServiceInfo() {
this.$http
.get("/static/servicedetail1.json")
.then((response) => {
let data = response.data.data;
this.$set(this.service_header_arr, "name", data.serviceInfo.name);
this.$set(this.service_header_arr, "first", data.serviceInfo.first);
this.$set(this.service_header_arr, "second", data.serviceInfo.second);
})
.catch(function(response) {});
},
getInterfaceInfo(){
this.$http
.get('/static/servicedetail1.json')
.then(response => {
let data = response.data.data
this.$set(this.servicead_arr[0],'info',data.serviceinterfaceinfo.type)
this.$set(this.servicead_arr[1],'info',data.serviceinterfaceinfo.requestParam)
this.$set(this.servicead_arr[2],'info',data.serviceinterfaceinfo.example)
this.$set(this.servicead_arr[3],'info',data.serviceinterfaceinfo.format)
this.responseParamUrl = data.serviceinterfaceinfo.responseParamUrl
this.codeExampleUrl = data.serviceinterfaceinfo.codeExampleUrl
})
.catch(function(response) {
});
getInterfaceInfo() {
this.$http
.get("/static/servicedetail1.json")
.then((response) => {
let data = response.data.data;
this.$set(
this.servicead_arr[0],
"info",
data.serviceinterfaceinfo.type
);
this.$set(
this.servicead_arr[1],
"info",
data.serviceinterfaceinfo.requestParam
);
this.$set(
this.servicead_arr[2],
"info",
data.serviceinterfaceinfo.example
);
this.$set(
this.servicead_arr[3],
"info",
data.serviceinterfaceinfo.format
);
this.responseParamUrl = data.serviceinterfaceinfo.responseParamUrl;
this.codeExampleUrl = data.serviceinterfaceinfo.codeExampleUrl;
})
.catch(function(response) {});
},
getServiceBaseInfo(){
this.$http
.get('/static/servicedetail1.json')
.then(response => {
let data = response.data.data
this.list_arr = data.servicebaseinfo
})
.catch(function(response) {
});
getServiceBaseInfo() {
this.$http
.get("/static/servicedetail1.json")
.then((response) => {
let data = response.data.data;
this.list_arr = data.servicebaseinfo;
})
.catch(function(response) {});
},
getServiceyxztInfo(){
this.$http
.get('/static/servicedetail1.json')
.then(response => {
console.log(response);
let data = response.data.data
this.yx_state = data.serviceyxzt
})
.catch(function(response) {
});
getServiceyxztInfo() {
this.$http
.get("/static/servicedetail1.json")
.then((response) => {
console.log(response);
let data = response.data.data;
this.yx_state = data.serviceyxzt;
})
.catch(function(response) {});
},
}
},
};
</script>
<style>
.savebtn .el-button{
float: right;
margin-left: 20px;
letter-spacing: 2px;
.savebtn .el-button {
float: right;
margin-left: 20px;
letter-spacing: 2px;
}
.savebtn .el-button:nth-of-type(1){
background-color: #0f2683;
color: #f8f9fd;
.savebtn .el-button:nth-of-type(1) {
background-color: #0f2683;
color: #f8f9fd;
}
.savebtn .el-button:nth-of-type(2){
background-color: #c3caf8;
color: #0f2683;
.savebtn .el-button:nth-of-type(2) {
background-color: #c3caf8;
color: #0f2683;
}
</style>
<style scoped>
.detail_contain{
width: 100%;
padding: 0 20px;
height: calc(100% - 55px);
.detail_contain {
width: 100%;
padding: 0 20px;
height: calc(100% - 55px);
}
.info_contain{
padding: 25px 20px;
background-color: #fff;
width: 100%;
box-shadow: 0px 3px 6px 0px
#f4f7fc;
border-radius: 12px;
min-height: calc(100% - 20px);
margin-bottom: 20px;
.info_contain {
padding: 25px 20px;
background-color: #fff;
width: 100%;
box-shadow: 0px 3px 6px 0px #f4f7fc;
border-radius: 12px;
min-height: calc(100% - 20px);
margin-bottom: 20px;
}
.now_page_title{
margin: 15px 0;
color: #898d9e;
.now_page_title {
margin: 15px 0;
color: #898d9e;
}
.now_page_title span{
color: #242c43;
.now_page_title span {
color: #242c43;
}
.type_box{
width: 100%;
.type_box {
width: 100%;
}
.type_title{
width: 100%;
height: 65px;
line-height: 65px;
border-bottom: 2px solid #f4f7fc;
.type_title {
width: 100%;
height: 65px;
line-height: 65px;
border-bottom: 2px solid #f4f7fc;
}
.type_select{
float: left;
width: auto;
margin-right: 40px;
height: 65px;
cursor: pointer;
.type_select {
float: left;
width: auto;
margin-right: 40px;
height: 65px;
cursor: pointer;
}
.type_box_select{
padding: 30px 10px 10px 10px;
width: 100%;
.type_box_select {
padding: 30px 10px 10px 10px;
width: 100%;
}
.service_title{
font-size: 16px;
font-weight: bold;
color: #58617a;
text-align: left;
height: 40px;
line-height: 40px;
margin-top: -10px;
margin-bottom: 20px;
.service_title {
font-size: 16px;
font-weight: bold;
color: #58617a;
text-align: left;
height: 40px;
line-height: 40px;
margin-top: -10px;
margin-bottom: 20px;
}
.service_title span{
display: inline-block;
width: 4px;
height: 16px;
background-color: #515fe7;
border-radius: 2px;
float: left;
margin-top: 13px;
margin-right: 15px;
.service_title span {
display: inline-block;
width: 4px;
height: 16px;
background-color: #515fe7;
border-radius: 2px;
float: left;
margin-top: 13px;
margin-right: 15px;
}
.service_title_card{
width: 100%;
overflow: hidden;
.service_title_card {
width: 100%;
overflow: hidden;
}
.service_card{
width: calc((100% - 120px)/4);
margin-right: 40px;
float: left;
.service_card {
width: calc((100% - 120px) / 4);
margin-right: 40px;
float: left;
}
.service_title_card .service_card:nth-last-of-type(1){
margin-right: 0px;
.service_title_card .service_card:nth-last-of-type(1) {
margin-right: 0px;
}
.service_num{
text-align: center;
padding-top: 10px;
.service_num {
text-align: center;
padding-top: 10px;
}
.service_num p:nth-of-type(1){
font-size: 36px;
color: #3f4f9c;
margin-bottom: 10px;
.service_num p:nth-of-type(1) {
font-size: 36px;
color: #3f4f9c;
margin-bottom: 10px;
}
.service_num p:nth-of-type(2){
font-size: 16px;
color: #58617a;
.service_num p:nth-of-type(2) {
font-size: 16px;
color: #58617a;
}
.service_card_charts{
width: 100%;
margin-top: 30px;
.service_card_charts {
width: 100%;
margin-top: 30px;
}
.editbtn{
width: 124px;
height: 44px;
line-height: 44px;
background-color: #0f2683;
border-radius: 8px;
font-size: 16px;
color: #f8f9fd;
text-align: center;
cursor: pointer;
margin-bottom: 30px;
.editbtn {
width: 124px;
height: 44px;
line-height: 44px;
background-color: #0f2683;
border-radius: 8px;
font-size: 16px;
color: #f8f9fd;
text-align: center;
cursor: pointer;
margin-bottom: 30px;
}
.savebtn{
margin-top: 50px;
overflow: hidden;
.savebtn {
margin-top: 50px;
overflow: hidden;
}
</style>
src/pages/serviceEdit.vue
View file @ 07975c81
......@@ -14,7 +14,7 @@
<img v-if="now_edit!==1" src="../assets/imgs/nav_ic_anquan_nor.png" alt=""> 服务安全设置</div>
</div>
<el-form ref="form" :rules="rules" :model="form" label-width="0px" v-if="now_edit==0">
<el-form-item>
<el-form-item prop="name">
<p class="formname">服务名称：</p>
<el-input v-model="form.name"></el-input>
</el-form-item>
......@@ -22,7 +22,7 @@
<p class="formname">服务描述：</p>
<el-input type="textarea" v-model="form.desc"></el-input>
</el-form-item>
<el-form-item>
<el-form-item prop="area">
<p class="formname">服务领域：</p>
<el-select v-model="form.area" placeholder="请选择">
<el-option
......@@ -33,7 +33,12 @@
</el-option>
</el-select>
</el-form-item>
<el-form-item v-if="now_user==0">
<el-form-item v-if="now_user==0"
prop="origin"
:rules="[
{ required: true, message: '请选择所属组织', trigger: 'change' },
]"
>
<p class="formname">所属组织：</p>
<el-select v-model="form.origin" placeholder="请选择">
<el-option
......@@ -58,19 +63,25 @@
></upload-file>
<span class="removepic" v-if="now_user==2" @click="removepic">更换封面</span>
</el-form-item>
<el-form-item v-if="now_user==0">
<el-form-item v-if="now_user==0" prop="code" :rules="[
{ required: true, message: '请输入接口编码', trigger: 'blur' },
]">
<p class="formname">接口编码：</p>
<el-input v-model="form.code"></el-input>
</el-form-item>
<el-form-item v-if="now_user==2">
<el-form-item v-if="now_user==2" prop="people" :rules="[
{ required: true, message: '请输入发布人', trigger: 'blur' },
]">
<p class="formname">发布人：</p>
<el-input v-model="form.people"></el-input>
</el-form-item>
<el-form-item v-if="now_user==2">
<el-form-item v-if="now_user==2" prop="phone" :rules="[
{ required: true, message: '请输入联系方式', trigger: 'blur' },
]">
<p class="formname">联系方式：</p>
<el-input v-model="form.phone"></el-input>
</el-form-item>
<el-form-item>
<el-form-item prop="resource">
<p class="formname">开放程度：</p>
<el-radio-group v-model="form.resource">
<el-radio label="共享"></el-radio>
......@@ -80,7 +91,7 @@
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit" class="right">保存</el-button>
<el-button type="primary" @click="onSubmit('form')" class="right">保存</el-button>
<el-button class="right">取消</el-button>
</el-form-item>
</el-form>
......@@ -233,9 +244,20 @@ export default {
],
origin_arr:[],
rules:{
name:[
{ required: true, message: '请输入服务名称', trigger: 'blur' },
],
desc:[
{ required: true, message: '请输入服务描述', trigger: 'blur' },
{ max: 200, message: '长度小于200个字符', trigger: 'blur' }
]
],
area:[
{ required: true, message: '请选择服务领域', trigger: 'change' },
],
resource:[
{ required: true, message: '请选择开放程度', trigger: 'change' },
],
}
};
},
......@@ -267,6 +289,7 @@ export default {
},
saveInfo(){
console.log('2222');
},
openstart(){
this.open = !this.open
......@@ -280,8 +303,16 @@ export default {
removepic(){
this.$refs.servicepic.handleRemove()
},
onSubmit() {
onSubmit(formName) {
console.log('submit!');
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
getNewList(val) {
console.log(val);
......
src/pages/workPlace.vue
View file @ 07975c81
......@@ -168,7 +168,7 @@
>
{{now_user == 0?'我的服务':'服务管理'}}
<img
style="vertical-align:-9px;"
style="vertical-align:-9px;cursor: pointer;"
src="../assets/imgs/home_btn_enter.png"
@click="gotofw()"
alt
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment