From c3a530db59d9c1bd1af474c97c1e20b1f440767d Mon Sep 17 00:00:00 2001
From: liudianxin <liudianxin@bd-apaas.com>
Date: Tue, 28 Apr 2020 19:17:17 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=B0=E6=8D=AE+=E6=97=B6=E7=A9=BA+=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=BC=E8=B6=85=E9=95=BF=E7=BC=A9=E8=BF=9B+select?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/index.css    |  40 +++---
 src/components/codes.vue    |   8 +-
 src/components/table-um.vue |  30 ++--
 src/pages/example_code.vue  |  67 ---------
 src/pages/fwzc_fwcs.vue     | 272 +++++++++++++++++++++++++++++++-----
 src/pages/index.vue         |   2 +-
 static/data.json            | 104 ++++++++++++++
 7 files changed, 380 insertions(+), 143 deletions(-)

diff --git a/src/assets/css/index.css b/src/assets/css/index.css
index 110273c..27feed0 100644
--- a/src/assets/css/index.css
+++ b/src/assets/css/index.css
@@ -139,32 +139,10 @@ div{
   box-sizing: border-box;
   border-bottom: 1px solid #edf0ff;
 }
-.r_yhgl {
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0px 3px 6px 0px #f4f7fc;
-}
-.r_yhgl_table {
+.padding_table {
   padding: 0 20px;
 }
 /* 设置抽屉的样式 */
-.user-dialog,
-.r_yhgl .el-dialog__wrapper{
-  width: 100vw;
-  height: 100vh;
-  top: 0;
-  left: 0;
-  z-index: 999;
-}
-.r_yhgl .el-drawer{
-  height: calc(100% - 134px)!important;
-  top: 114px!important;
-  outline: none!important;
-  border-radius: 8px;
-}
-.r_yhgl .el-drawer.rtl{
-    right: 20px;
-}
 .el-drawer__header{
     display: none;
 }
@@ -457,4 +435,20 @@ width: 620px!important;
 }
 .el-popper[x-placement^=top] .popper__arrow::after {
   border-top-color: transparent;
+}
+/* 单选激活样式 */
+.el-radio__input.is-checked .el-radio__inner {
+  border-color: #838383;
+  background-color: #fff;
+}
+.el-radio__input.is-checked+.el-radio__label {
+  color: #1a2236;
+  font-weight: 700;
+}
+.el-radio__inner::after {
+  width: 8px;
+    height: 8px;
+}
+.el-radio__input.is-checked .el-radio__inner::after {
+  background-color: #e56600;
 }
\ No newline at end of file
diff --git a/src/components/codes.vue b/src/components/codes.vue
index 36f6386..a293cd0 100644
--- a/src/components/codes.vue
+++ b/src/components/codes.vue
@@ -25,7 +25,7 @@ export default {
 
   mounted() {
     this.aceEditor = ace.edit(this.$refs.ace, {
-      maxLines: 40,
+      maxLines: 36,
       minLines: 10,
       fontSize: 14,
       mode: this.acemodePath,
@@ -60,9 +60,9 @@ export default {
 </script>
 <style scoped>
 .ace-container {
-  width: 60%;
-  height: 629px;
-  margin: 50px;
+  width: 100%;
+  height: 633px !important;
+  border-radius: 8px;
 }
 </style>
 <style>
diff --git a/src/components/table-um.vue b/src/components/table-um.vue
index a59878c..80dd4b8 100644
--- a/src/components/table-um.vue
+++ b/src/components/table-um.vue
@@ -92,11 +92,17 @@
               :couldNotEdit="couldNotEdit"
               @changeInputValue="changeInputValue"
             ></v-apaas-table-select>
-            <!-- 其他 -->
-            <span
-              v-else
-              :class="scope.row.spec && scope.row.spec.disable && scope.row.spec.disable == true? 'disture':'disfail'"
-            >{{scope.row[item.prop]}}</span>
+            <!-- popover -->
+            <el-popover
+              v-else-if="item.type==='popover'"
+              placement="top-start"
+              trigger="hover"
+              :content="scope.row[item.prop]"
+            >
+              <span slot="reference" class="overlit">{{scope.row[item.prop]}}</span>
+            </el-popover>
+            <!-- others -->
+            <span v-else>{{scope.row[item.prop]}}</span>
           </template>
         </el-table-column>
       </el-table>
@@ -322,7 +328,7 @@ export default {
         // console.log(this.emptyText);
         // the if statement is to choose which data could be show, only used for test and template
         this.selectedTabsPage = [];
-        this.pagination.total = this.selectedTabsPage.length;
+        this.pagination.total = 0;
         if (this.autoAdd) {
           this.addRow();
         }
@@ -350,6 +356,7 @@ export default {
           .get(this.all_url)
           .then(response => {
             let newArr = response.data.data[this.url];
+            // if it is true url, total is response's total
             let total = newArr.length;
             resolve({ newArr, total });
           })
@@ -547,12 +554,6 @@ em {
 .chName[x-placement^="top"] .popper__arrow::after {
   border-top-color: #5c82ff !important;
 }
-.ces-table .disfail {
-  color: #58617a !important;
-}
-.ces-table .disture {
-  color: #bcc1d0 !important;
-}
 .el-table__row--striped td {
   background: #f8f9fd !important;
 }
@@ -605,4 +606,9 @@ em {
 .table_radius {
   border-radius: 10px;
 }
+.overlit {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 </style>
\ No newline at end of file
diff --git a/src/pages/example_code.vue b/src/pages/example_code.vue
index 3dd8363..741f995 100644
--- a/src/pages/example_code.vue
+++ b/src/pages/example_code.vue
@@ -36,71 +36,4 @@ export default {
 </script>
 
 <style scoped>
-.detail_container {
-  margin: 8px 0 30px 0;
-}
-.tab-tit {
-  height: 48px;
-  background-color: #e1e3ee;
-  border-radius: 8px;
-  list-style: none;
-  padding: 6px 0 6px 6px;
-
-  display: inline-block;
-}
-.tab-li {
-  display: inline-block;
-  height: 36px;
-  line-height: 36px;
-  padding: 0 10px;
-  color: #58617a;
-  margin-right: 10px;
-  cursor: pointer;
-}
-.tabactive {
-  padding: 0 10px;
-  height: 36px;
-  background-color: #264dd9;
-  box-shadow: 0px 2px 4px 0px #5d7be5;
-  border-radius: 6px;
-  color: #f4f7fc;
-}
-.tab-content {
-  margin-top: 30px;
-  padding: 20px;
-  background: #fff;
-  border-radius: 8px;
-}
-.tab-bgcolor {
-  background: #fff;
-  border-radius: 8px;
-}
-.gray-btn {
-  width: 150px;
-  height: 40px;
-  background-color: #e3e5ef;
-  border-radius: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 46px auto 40px;
-}
-.gray-btn span {
-  margin-left: 20px;
-}
-.cpu-info {
-  font-size: 18px;
-  color: #242c43;
-  text-align: center;
-  margin-top: 30px;
-  margin-bottom: 30px;
-  width: 170px;
-}
-.cpu-info span {
-  font-size: 16px;
-  color: #8890a7;
-}
-.code-main {
-  margin-top: 100px;
-}
 </style>
\ No newline at end of file
diff --git a/src/pages/fwzc_fwcs.vue b/src/pages/fwzc_fwcs.vue
index 9fabf64..43957e7 100644
--- a/src/pages/fwzc_fwcs.vue
+++ b/src/pages/fwzc_fwcs.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="fwcs">
     <el-breadcrumb separator="/" class="bread_crumb">
-      <el-breadcrumb-item :to="{ path: '/' }">服务注册</el-breadcrumb-item>
+      <el-breadcrumb-item :to="{ path: '/fwzc' }">服务注册</el-breadcrumb-item>
       <el-breadcrumb-item>服务测试</el-breadcrumb-item>
     </el-breadcrumb>
     <block-radius>
@@ -26,37 +26,128 @@
             ></el-option>
           </el-select>
         </el-input>
-        <el-button @click="clickFwcs()" class="fwcs_btn_fwcs">服务测试</el-button>
+        <el-button v-if="activeBtn == 0" @click="clickFwcs()" class="fwcs_btn_fwcs">服务测试</el-button>
+      </div>
+      <div v-if="activeBtn == 0">
+        <el-tabs v-model="activeName" class="fwcs_tabs" @tab-click="clickTab">
+          <el-tab-pane label="请求参数" name="0">
+            <ces-table
+              ref="fwcs_sjfw_qq"
+              size="mini"
+              :border="true"
+              :headers="sjfw_qqcs"
+              url
+              :searchShow="false"
+              :addRowBtn="false"
+              :autoAdd="true"
+              :isDialog="false"
+              :isSelection="false"
+              :isIndex="true"
+              :radius="true"
+              :emptyText="emptyText"
+              :stripe="false"
+              :paginationShow="false"
+              :pageSizeShow="false"
+              headerCellClassName="th_pink"
+            ></ces-table>
+          </el-tab-pane>
+          <el-tab-pane label="请求体" name="1">
+            <div class="sjfw_qqt">
+              <el-radio v-model="sjfwQqt" label="JSON">JSON</el-radio>
+            </div>
+            <v-apaas-code></v-apaas-code>
+          </el-tab-pane>
+          <el-tab-pane label="授权信息" name="2">
+            <el-row class="sqxx_row">
+              <el-col :span="6">
+                <div class="sqxx_title">授权方式：</div>
+                <el-select v-model="sqfsVal" placeholder="请选择" class="sqxx_select">
+                  <el-option
+                    v-for="item in optionsSq"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  ></el-option>
+                </el-select>
+              </el-col>
+              <el-col :span="2" class="center_line_c">
+                <div class="center_line"></div>
+              </el-col>
+              <el-col :span="16">
+                <div class="sqxx_title">Token：</div>
+                <el-input v-model="tokenVal" placeholder="请输入内容"></el-input>
+              </el-col>
+            </el-row>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+      <div v-if="activeBtn == 1">
+        <div class="skfw_fwlx">服务类型：</div>
+        <div class="skfw_fwlx_radios">
+          <el-radio
+            v-for="item in skfwRadios"
+            :key="item"
+            v-model="sjfwQqt"
+            :label="item"
+          >{{ item }}</el-radio>
+          <el-button v-if="activeBtn == 1" @click="clickFwcs()" class="fwcs_btn_fwcs">服务测试</el-button>
+        </div>
       </div>
-      <el-tabs v-model="activeName" class="fwcs_tabs" @tab-click="clickTab">
-        <el-tab-pane label="请求参数" name="0">
-          <ces-table
-            ref="fwcs_sjfw"
-            class="r_yhgl_table"
-            size="mini"
-            :border="true"
-            :headers="headers"
-            url
-            :searchShow="false"
-            :addRowBtn="false"
-            :autoAdd="true"
-            :isDialog="false"
-            :isSelection="false"
-            :isIndex="true"
-            :radius="true"
-            :emptyText="emptyText"
-            :stripe="false"
-            :paginationShow="false"
-            :pageSizeShow="false"
-            headerCellClassName="th_pink"
-          ></ces-table>
-        </el-tab-pane>
-        <el-tab-pane label="请求体" name="1"></el-tab-pane>
-        <el-tab-pane label="授权信息" name="2"></el-tab-pane>
-      </el-tabs>
     </block-radius>
-    <block-radius>
-        s
+    <block-radius v-if="activeBtn == 0 && resultShow">
+      <div class="sjfw_qqcstx">请求参数信息填写：</div>
+      <ces-table
+        ref="fwcs_sjfw_qqcs"
+        size="mini"
+        :border="true"
+        :headers="sjfw_qqcstx"
+        url="qqcstx"
+        :searchShow="false"
+        :addRowBtn="false"
+        :autoAdd="false"
+        :isDialog="false"
+        :isSelection="false"
+        :isIndex="true"
+        :radius="true"
+        :emptyText="emptyText"
+        :stripe="false"
+        :paginationShow="false"
+        :pageSizeShow="false"
+        headerCellClassName="th_pink"
+      ></ces-table>
+      <div class="sjfw_fhcstx">返回参数信息填写：</div>
+      <ces-table
+        ref="fwcs_sjfw_fhcs"
+        size="mini"
+        :border="true"
+        :headers="sjfw_fhcstx"
+        url="fhcstx"
+        :searchShow="false"
+        :addRowBtn="false"
+        :autoAdd="false"
+        :isDialog="false"
+        :isSelection="false"
+        :isIndex="true"
+        :radius="true"
+        :emptyText="emptyText"
+        :stripe="false"
+        :paginationShow="false"
+        :pageSizeShow="false"
+        headerCellClassName="th_pink"
+      ></ces-table>
+      <div class="btn_footer">
+        <el-button class="reset" @click="resetSjfw">重置</el-button>
+        <el-button class="next" @click="nextJcxx">下一步</el-button>
+      </div>
+    </block-radius>
+    <block-radius v-if="activeBtn == 1 && resultShow">
+      <div class="skfw_csfwxx">测试服务信息：</div>
+      <div class="test_succ">
+        <div>测试成功</div>
+      </div>
+      <div class="btn_footer">
+        <el-button class="next" @click="nextJcxx">下一步</el-button>
+      </div>
     </block-radius>
   </div>
 </template>
@@ -64,10 +155,12 @@
 <script>
 import blockRadius from "@/components/block-radius";
 import cesTable from "@/components/table-um";
+import codes from "@/components/codes";
 export default {
   components: {
     blockRadius,
-    cesTable
+    cesTable,
+    "v-apaas-code": codes
   },
   data: () => ({
     btnList: [
@@ -85,7 +178,7 @@ export default {
       { label: "POST", value: "POST" }
     ],
     activeName: 0,
-    headers: [
+    sjfw_qqcs: [
       {
         label: "请求字段编码",
         prop: "requestEncoding",
@@ -94,8 +187,42 @@ export default {
       },
       { label: "请求值", prop: "requestValue", type: "input", align: "left" }
     ],
+    sjfw_qqcstx: [
+      { label: "字段编码", prop: "unicode", type: "", align: "left" },
+      { label: "示例值", prop: "examples", type: "input", align: "left" },
+      { label: "字段类型", prop: "type", type: "", align: "left" },
+      { label: "字段名称", prop: "name", type: "input", align: "left" },
+      {
+        label: "是否必须",
+        prop: "needable",
+        type: "select",
+        align: "left",
+        width: 100
+      },
+      { label: "字段说明", prop: "explanation", type: "input", align: "left" }
+    ],
+    sjfw_fhcstx: [
+      { label: "字段编码", prop: "unicode", type: "", align: "left" },
+      { label: "字段类型", prop: "type", type: "popover", align: "left" },
+      { label: "字段名称", prop: "name", type: "input", align: "left" },
+      { label: "字段说明", prop: "explanation", type: "input", align: "left" }
+    ],
     url: "",
-    emptyText: "暂时没数据"
+    emptyText: "暂时没数据",
+    resultShow: false,
+    optionsSq: [{ label: "Bearer Token", value: "Bearer Token" }],
+    sqfsVal: "",
+    tokenVal: "",
+    sjfwQqt: "JSON",
+    skfwRadios: [
+      "ArcGIS Server Web",
+      "文档",
+      "KML",
+      "OGC(WMS)",
+      "OGS(WMTS)",
+      "OGS(WFS)",
+      "OGS(WCS)"
+    ]
   }),
   computed: {},
   watch: {},
@@ -103,11 +230,15 @@ export default {
     clickBtn(val) {
       this.activeBtn = val;
     },
-    clickFwcs() {},
+    clickFwcs() {
+      this.resultShow = true;
+    },
     clickTab() {},
     clickNext() {
-      console.log(this.$refs.fwcs_sjfw.getTableData());
-    }
+      console.log(this.$refs.fwcs_sjfw_qq.getTableData());
+    },
+    resetSjfw() {},
+    nextJcxx() {},
   },
   mounted() {}
 };
@@ -115,12 +246,14 @@ export default {
 
 <style scoped>
 .fwcs {
+  width: 96vw;
 }
 .bread_crumb {
   margin: 20px;
   font-size: 14px;
 }
 .fwcs_btn_act {
+  width: 100px;
   background-color: #e56600;
   color: #ffffff;
 }
@@ -145,6 +278,73 @@ export default {
 .fwcs_btn_fwcs {
   background-color: #0f2683;
   color: #ffffff;
+  margin-left: 10px;
+}
+.sjfw_qqcstx {
+  color: #58617a;
+  margin: 10px 15px;
+  font-size: 14px;
+}
+.skfw_csfwxx {
+  color: #58617a;
+  margin: 10px 15px;
+  font-size: 14px;
+}
+.sjfw_fhcstx {
+  color: #58617a;
+  margin: 40px 15px 10px;
+  font-size: 14px;
+}
+.btn_footer {
+  display: flex;
+  justify-content: flex-end;
+  margin: 40px 20px 10px;
+}
+.btn_footer .reset {
+  width: 100px;
+  background-color: #c3caf8;
+  color: #0f2683;
+}
+.btn_footer .next {
+  width: 100px;
+  background-color: #0f2683;
+  color: #f8f9fd;
+}
+.sqxx_row {
+  padding: 0 20px;
+}
+.sqxx_title {
+  color: #58617a;
+  font-size: 14px;
+  margin: 10px 15px;
+}
+.sqxx_select {
+  width: 100%;
+}
+.center_line_c {
+  margin: 0 auto;
+}
+.center_line {
+  background-color: #f4f7fc;
+  width: 2px;
+  height: 400px;
+  position: relative;
+  left: 50%;
+}
+.sjfw_qqt {
+  margin: 0 20px 15px;
+}
+.skfw_fwlx {
+  margin: 20px 15px;
+  color: #58617a;
+  font-size: 14px;
+}
+.skfw_fwlx_radios {
+  margin: 10px 0 0;
+}
+.test_succ {
+  width: 100%;
+  margin: 0 auto;
 }
 </style>
 <style>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 9ada11e..f5fa0cb 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -26,7 +26,7 @@ export default {
   background-color: #0f2683;
 }
 .contain{
-  width: 1200px;
+  /* width: 1200px; */
   margin: 0 auto;
   margin-top: -157px;
 }
diff --git a/static/data.json b/static/data.json
index e61b2c6..bbc6a71 100644
--- a/static/data.json
+++ b/static/data.json
@@ -87,6 +87,110 @@
                 "requestEncoding": "2016-05-02",
                 "requestValue": "王小虎"
             }
+        ],
+        "qqcstx": [
+            {
+                "id": 1,
+                "unicode": "2016-05-02",
+                "examples": "2016-05-02",
+                "type": "ssdNW",
+                "name": "王小虎",
+                "needable": "0",
+                "explanation": "上海市普陀区金沙江路 1518 弄"
+            },
+            {
+                "id": 2,
+                "unicode": "2016-05-04",
+                "examples": "2016-05-02",
+                "type": "ssdNW",
+                "name": "王小虎",
+                "needable": "0",
+                "explanation": "上海市普陀区金沙江路 1517 弄"
+            },
+            {
+                "id": 3,
+                "unicode": "2016-05-01",
+                "examples": "2016-05-02",
+                "type": "ssdNW",
+                "name": "王小虎",
+                "needable": "0",
+                "explanation": "上海市普陀区金沙江路 1519 弄",
+                "children": [
+                    {
+                        "id": 31,
+                        "unicode": "2016-05-01",
+                        "examples": "2016-05-02",
+                        "type": "ssdNW",
+                        "name": "王小虎",
+                        "needable": "0",
+                        "explanation": "上海市普陀区金沙江路 1519 弄"
+                    },
+                    {
+                        "id": 32,
+                        "unicode": "2016-05-01",
+                        "examples": "2016-05-02",
+                        "type": "ssdNW",
+                        "name": "王小虎",
+                        "needable": "0",
+                        "explanation": "上海市普陀区金沙江路 1519 弄"
+                    }
+                ]
+            },
+            {
+                "id": 4,
+                "unicode": "2016-05-03",
+                "examples": "2016-05-02",
+                "type": "ssdNW",
+                "name": "王小虎",
+                "needable": "0",
+                "explanation": "上海市普陀区金沙江路 1516 弄"
+            }
+        ],
+        "fhcstx": [
+            {
+                "id": 1,
+                "unicode": "2016-05-02",
+                "type": "ssdNW",
+                "name": "王小虎",
+                "explanation": "上海市普陀区金沙江路 1518 弄"
+            },
+            {
+                "id": 2,
+                "unicode": "2016-05-04",
+                "type": "ssdNW",
+                "name": "王小虎",
+                "explanation": "上海市普陀区金沙江路 1517 弄"
+            },
+            {
+                "id": 3,
+                "unicode": "2016-05-01",
+                "type": "ssdNW",
+                "name": "王小虎",
+                "explanation": "上海市普陀区金沙江路 1519 弄",
+                "children": [
+                    {
+                        "id": 31,
+                        "unicode": "2016-05-01",
+                        "type": "ssdNW",
+                        "name": "王小虎",
+                        "explanation": "上海市普陀区金沙江路 1519 弄"
+                    },
+                    {
+                        "id": 32,
+                        "unicode": "2016-05-01",
+                        "type": "ssdNW",
+                        "name": "王小虎",
+                        "explanation": "上海市普陀区金沙江路 1519 弄"
+                    }
+                ]
+            },
+            {
+                "id": 4,
+                "unicode": "2016-05-03",
+                "type": "ssdNW",
+                "name": "王小虎",
+                "explanation": "上海市普陀区金沙江路 1516 弄"
+            }
         ]
     }
 }
\ No newline at end of file
-- 
2.26.0