From 07975c813e52e29e4485ebb33d397cdb961255d6 Mon Sep 17 00:00:00 2001
From: zhangjun1 <zhangjun@bd-apaas.com>
Date: Thu, 14 May 2020 16:19:08 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E8=A1=A8=E5=8D=95=E9=AA=8C?=
 =?UTF-8?q?=E8=AF=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/serviceDetail.vue | 1082 ++++++++++++++++++-----------------
 src/pages/serviceEdit.vue   |   51 +-
 src/pages/workPlace.vue     |    2 +-
 3 files changed, 606 insertions(+), 529 deletions(-)

diff --git a/src/pages/serviceDetail.vue b/src/pages/serviceDetail.vue
index 4f7fe41..98c92d0 100644
--- a/src/pages/serviceDetail.vue
+++ b/src/pages/serviceDetail.vue
@@ -1,631 +1,677 @@
 <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>
-
diff --git a/src/pages/serviceEdit.vue b/src/pages/serviceEdit.vue
index 729ffb0..4ebc1e7 100644
--- a/src/pages/serviceEdit.vue
+++ b/src/pages/serviceEdit.vue
@@ -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);
diff --git a/src/pages/workPlace.vue b/src/pages/workPlace.vue
index f2e8de4..dbff60a 100644
--- a/src/pages/workPlace.vue
+++ b/src/pages/workPlace.vue
@@ -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
-- 
2.26.0