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