From e88443b39c95dcee8bfcb66ddf85a0ce7851c83e Mon Sep 17 00:00:00 2001
From: liudianxin <liudianxin@bd-apaas.com>
Date: Wed, 6 May 2020 11:40:29 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9upload-cropper=E6=97=A0?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/table-um.vue    |   2 +-
 src/components/upload_file.vue |   2 +-
 src/pages/fwzc_fwcs.vue        | 422 +++++++++++++++++++++------------
 src/pages/index.vue            |   2 +-
 4 files changed, 270 insertions(+), 158 deletions(-)

diff --git a/src/components/table-um.vue b/src/components/table-um.vue
index d902e9c..65d90cc 100644
--- a/src/components/table-um.vue
+++ b/src/components/table-um.vue
@@ -758,7 +758,7 @@ em {
   width: 66px;
 }
 .table_radius {
-  border-radius: 10px;
+  border-radius: 8px;
 }
 .overlit {
   overflow: hidden;
diff --git a/src/components/upload_file.vue b/src/components/upload_file.vue
index c2728d6..8560385 100644
--- a/src/components/upload_file.vue
+++ b/src/components/upload_file.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div v-if="type != 'copper'">
+    <div v-if="type != 'cropper'">
       <el-upload
         action="ssurl"
         :file-list="fileArray"
diff --git a/src/pages/fwzc_fwcs.vue b/src/pages/fwzc_fwcs.vue
index 22a7b28..c467da2 100644
--- a/src/pages/fwzc_fwcs.vue
+++ b/src/pages/fwzc_fwcs.vue
@@ -6,167 +6,239 @@
       <el-breadcrumb-item v-else :to="{ path: '/fwzc' }">服务测试</el-breadcrumb-item>
       <el-breadcrumb-item v-if="jcxxtx">基础信息填写</el-breadcrumb-item>
     </el-breadcrumb>
-    <block-radius>
-      <el-row>
-        <el-button
-          v-for="item in btnList"
-          :key="item.id"
-          @click="clickBtn(item.id)"
-          :class="activeBtn == item.id ? 'fwcs_btn_act':'fwcs_btn_dis'"
-        >{{ item.text }}</el-button>
-      </el-row>
-      <div class="gray_line"></div>
-      <div v-if="activeBtn == 4">
-        <div class="sqxx_title">服务类型：</div>
-        <el-select v-model="zhyyVal" placeholder="请选择" class="zhyy_select">
-          <el-option
-            v-for="item in optionsZhyy"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          ></el-option>
-        </el-select>
-      </div>
-      <div class="fwcs_fwdz">服务地址：</div>
-      <div class="fwcs_fwdz_inner">
-        <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
-          <el-select v-model="select" slot="prepend" placeholder="请选择">
+    <div v-if="!jcxxtx">
+      <block-radius>
+        <el-row>
+          <el-button
+            v-for="item in btnList"
+            :key="item.id"
+            @click="clickBtn(item.id)"
+            :class="activeBtn == item.id ? 'fwcs_btn_act':'fwcs_btn_dis'"
+          >{{ item.text }}</el-button>
+        </el-row>
+        <div class="gray_line"></div>
+        <div v-if="activeBtn == 4">
+          <div class="sqxx_title">服务类型：</div>
+          <el-select v-model="zhyyVal" placeholder="请选择" class="zhyy_select">
             <el-option
-              v-for="item in optionType"
+              v-for="item in optionsZhyy"
               :key="item.value"
               :label="item.label"
               :value="item.value"
             ></el-option>
           </el-select>
-        </el-input>
-        <el-button v-if="activeBtn == 0 || activeBtn == 4" @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>
-    </block-radius>
-    <block-radius v-if="resultShow">
-      <div v-if="activeBtn == 0">
-        <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>
-      <div v-else-if="activeBtn == 1 || activeBtn == 4">
-        <div class="skfw_csfwxx">测试服务信息：</div>
-        <div class="test_succ">
-          <div v-if="skfwResult" class="skcs_jg">
-            <img src="../assets/imgs/test_icon_success.png" class="skcs_jg_img" />&nbsp;测试成功
+        <div class="fwcs_fwdz">服务地址：</div>
+        <div class="fwcs_fwdz_inner">
+          <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
+            <el-select v-model="select" slot="prepend" placeholder="请选择">
+              <el-option
+                v-for="item in optionType"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              ></el-option>
+            </el-select>
+          </el-input>
+          <el-button
+            v-if="activeBtn == 0 || activeBtn == 4"
+            @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 v-else class="skcs_jg">
-            <img src="../assets/imgs/test_icon_error.png" class="skcs_jg_img" />&nbsp;测试失败
+        </div>
+      </block-radius>
+      <block-radius v-if="resultShow">
+        <div v-if="activeBtn == 0">
+          <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>
+        <div v-else-if="activeBtn == 1 || activeBtn == 4">
+          <div class="skfw_csfwxx">测试服务信息：</div>
+          <div class="test_succ">
+            <div v-if="skfwResult" class="skcs_jg">
+              <img src="../assets/imgs/test_icon_success.png" class="skcs_jg_img" />&nbsp;测试成功
+            </div>
+            <div v-else class="skcs_jg">
+              <img src="../assets/imgs/test_icon_error.png" class="skcs_jg_img" />&nbsp;测试失败
+            </div>
+            <div></div>
           </div>
-          <div></div>
         </div>
-      </div>
-      <div class="btn_footer">
-        <el-button class="reset" v-if="activeBtn == 0" @click="resetSjfw">重置</el-button>
-        <el-button class="next" @click="nextJcxx">下一步</el-button>
-      </div>
-    </block-radius>
+        <div class="btn_footer">
+          <el-button class="reset" v-if="activeBtn == 0" @click="resetSjfw">重置</el-button>
+          <el-button class="next" @click="nextJcxx">下一步</el-button>
+        </div>
+      </block-radius>
+    </div>
+    <div v-else>
+      <block-radius>
+        <div class="fwcs_add">
+          <el-form ref="form" :model="form" label-width="0px">
+            <el-form-item>
+              <p class="formname">服务名称：</p>
+              <el-input v-model="form.name" placeholder="请输入服务名称，不超过15个字" class="form_in"></el-input>
+            </el-form-item>
+            <el-form-item>
+              <p class="formname">服务描述：</p>
+              <el-input type="textarea" v-model="form.desc" placeholder="请输入服务描述，不超过200个字"></el-input>
+            </el-form-item>
+            <el-form-item>
+              <p class="formname">服务领域：</p>
+              <el-select v-model="form.area" placeholder="请选择">
+                <el-option
+                  v-for="item in optionsArea"
+                  :key="'area' + item.value"
+                  :label="item.label"
+                  :value="item.value"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item>
+              <p class="formname">所属组织：</p>
+              <el-select v-model="form.origin" placeholder="请选择">
+                <el-option
+                  v-for="item in optionsOrganization"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item>
+              <p class="formname">服务封面：</p>
+              <upload-file
+                :multiple="false"
+                :max="1"
+                type="cropper"
+                :readOnly="false"
+                :list="imgList"
+                @getNewList="getNewList"
+              ></upload-file>
+            </el-form-item>
+            <el-form-item>
+              <p class="formname">接口编码：</p>
+              <el-input v-model="form.code"></el-input>
+            </el-form-item>
+            <el-form-item>
+              <p class="formname">开放程度：</p>
+              <el-radio-group v-model="form.resource">
+                <el-radio label="共享"></el-radio>
+                <el-radio label="受限"></el-radio>
+                <el-radio label="敏感"></el-radio>
+              </el-radio-group>
+            </el-form-item>
+
+            <el-form-item>
+              <el-button>取消</el-button>
+              <el-button type="primary" @click="onSubmit">保存</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+      </block-radius>
+    </div>
   </div>
 </template>
 
@@ -174,11 +246,13 @@
 import BlockRadius from "@/components/block-radius";
 import CesTable from "@/components/table-um";
 import Codes from "@/components/codes";
+import uploadFile from "../components/upload_file";
 export default {
   components: {
     BlockRadius,
     CesTable,
-    "v-apaas-code": Codes
+    "v-apaas-code": Codes,
+    uploadFile
   },
   data: () => ({
     btnList: [
@@ -246,10 +320,33 @@ export default {
       { label: "模型算法类", value: 0 },
       { label: "查询验证类", value: 1 },
       { label: "流程类", value: 2 },
-      { label: "应用类", value: 3 },
+      { label: "应用类", value: 3 }
     ],
     zhyyVal: 0,
-    jcxxtx: false
+    jcxxtx: false,
+    form: {
+      name: "",
+      desc: "",
+      area: "",
+      origin: "",
+      code: "",
+      resource: ""
+    },
+    imgList: [],
+    optionsArea: [
+      { label: "经济建设", value: 0 },
+      { label: "城市管理", value: 1 },
+      { label: "城市建设", value: 2 },
+      { label: "道路交通", value: 3 },
+      { label: "环境资源", value: 4 },
+      { label: "民生服务", value: 5 },
+      { label: "空间地理", value: 6 },
+      { label: "文化休闲", value: 7 },
+      { label: "社会团体", value: 8 },
+      { label: "教育机构", value: 9 },
+      { label: "其他", value: 10 }
+    ],
+    optionsOrganization: []
   }),
   computed: {},
   watch: {},
@@ -268,6 +365,13 @@ export default {
     resetSjfw() {},
     nextJcxx() {
       this.jcxxtx = true;
+    },
+    // edit form
+    onSubmit() {
+      console.log("submit!");
+    },
+    getNewList(val) {
+      console.log(val);
     }
   },
   mounted() {}
@@ -276,7 +380,10 @@ export default {
 
 <style scoped>
 .fwcs {
-  width: 96vw;
+  width: 1200px;
+  margin: 0 auto;
+  margin-top: -157px;
+  margin-bottom: 20px;
 }
 .bread_crumb {
   margin: 20px;
@@ -391,6 +498,11 @@ export default {
 .zhyy_select {
   width: 70%;
 }
+.fwcs_add .formname {
+  color: #58617a;
+  font-size: 14px;
+  margin-left: 10px;
+}
 </style>
 <style>
 .bread_crumb .el-breadcrumb__inner {
diff --git a/src/pages/index.vue b/src/pages/index.vue
index d697324..c3827cf 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="index_container">
-    <div class="decor" v-if="$route.fullPath == '/workplace'"></div>
+    <div class="decor" v-if="$route.fullPath == '/workplace' || $route.fullPath == '/fwzc/fwcs'"></div>
     <router-view/>
   </div>
 </template>
-- 
2.26.0