测试mockurl

root@10.179.115.141/static/css/chunk-1662883c.09270e38.css

@@ -0,0 +1 @@
+.waves-ripple{position:absolute;border-radius:100%;background-color:rgba(0,0,0,.15);background-clip:padding-box;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transform:scale(0);transform:scale(0);opacity:1}.waves-ripple.z-active{opacity:0;-webkit-transform:scale(2);transform:scale(2);-webkit-transition:opacity 1.2s ease-out,-webkit-transform .6s ease-out;transition:opacity 1.2s ease-out,-webkit-transform .6s ease-out;transition:opacity 1.2s ease-out,transform .6s ease-out;transition:opacity 1.2s ease-out,transform .6s ease-out,-webkit-transform .6s ease-out}.pagination-container[data-v-13a9916e]{background:#fff;padding:2px 2px}.pagination-container.hidden[data-v-13a9916e]{display:none}.filter-item[data-v-5879115d]{margin-top:10px}.showInfo{width:400px;height:400px;text-align:center;position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.showZm{position:absolute;background-color:#ccc;width:100%;height:100%;opacity:.5}.showBtn{color:red;padding-left:200px}

root@10.179.115.141/static/css/chunk-29cb5352.4315d37d.css

@@ -0,0 +1 @@
+.waves-ripple{position:absolute;border-radius:100%;background-color:rgba(0,0,0,.15);background-clip:padding-box;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transform:scale(0);transform:scale(0);opacity:1}.waves-ripple.z-active{opacity:0;-webkit-transform:scale(2);transform:scale(2);-webkit-transition:opacity 1.2s ease-out,-webkit-transform .6s ease-out;transition:opacity 1.2s ease-out,-webkit-transform .6s ease-out;transition:opacity 1.2s ease-out,transform .6s ease-out;transition:opacity 1.2s ease-out,transform .6s ease-out,-webkit-transform .6s ease-out}.pagination-container[data-v-13a9916e]{background:#fff;padding:2px 2px}.pagination-container.hidden[data-v-13a9916e]{display:none}.el-notification.right{position:fixed;right:38.5%}

root@10.179.115.141/static/css/chunk-29d5594e.1d142f34.css

@@ -0,0 +1 @@
+.waves-ripple{position:absolute;border-radius:100%;background-color:rgba(0,0,0,.15);background-clip:padding-box;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transform:scale(0);transform:scale(0);opacity:1}.waves-ripple.z-active{opacity:0;-webkit-transform:scale(2);transform:scale(2);-webkit-transition:opacity 1.2s ease-out,-webkit-transform .6s ease-out;transition:opacity 1.2s ease-out,-webkit-transform .6s ease-out;transition:opacity 1.2s ease-out,transform .6s ease-out;transition:opacity 1.2s ease-out,transform .6s ease-out,-webkit-transform .6s ease-out}.pagination-container[data-v-13a9916e]{background:#fff;padding:2px 2px}.pagination-container.hidden[data-v-13a9916e]{display:none}.filter-item[data-v-665599a4]{margin-top:10px}.showInfo{width:400px;height:400px;text-align:center;position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.showZm{position:absolute;background-color:#ccc;width:100%;height:100%;opacity:.5}.showBtn{color:red;padding-left:200px}

root@10.179.115.141/static/css/chunk-2ea2d8c6.9b091503.css

@@ -0,0 +1 @@
+@supports (-webkit-mask:none) and (not (cater-color:#fff)){.login-container .el-input input{color:#fff}}.login-container .el-input{display:inline-block;height:47px;width:85%}.login-container .el-input input{background:transparent;border:0;-webkit-appearance:none;border-radius:0;padding:12px 5px 12px 15px;color:#fff;height:47px;caret-color:#fff}.login-container .el-input input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #283443 inset!important;box-shadow:inset 0 0 0 1000px #283443!important;-webkit-text-fill-color:#fff!important}.login-container .el-form-item{border:1px solid hsla(0,0%,100%,.1);background:rgba(0,0,0,.1);border-radius:5px;color:#454545}.login-container[data-v-1399390a]{min-height:100%;width:100%;background-color:#2d3a4b;overflow:hidden}.login-container .login-form[data-v-1399390a]{position:relative;width:520px;max-width:100%;padding:160px 35px 0;margin:0 auto;overflow:hidden}.login-container .tips[data-v-1399390a]{font-size:14px;color:#fff;margin-bottom:10px}.login-container .tips span[data-v-1399390a]:first-of-type{margin-right:16px}.login-container .svg-container[data-v-1399390a]{padding:6px 5px 6px 15px;color:#889aa4;vertical-align:middle;width:30px;display:inline-block}.login-container .title-container[data-v-1399390a]{position:relative}.login-container .title-container .title[data-v-1399390a]{font-size:26px;color:#eee;margin:0 auto 40px auto;text-align:center;font-weight:700}.login-container .show-pwd[data-v-1399390a]{position:absolute;right:10px;top:7px;font-size:16px;color:#889aa4;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}

root@10.179.115.141/static/css/chunk-2ec82462.4315d37d.css

@@ -0,0 +1 @@
+.waves-ripple{position:absolute;border-radius:100%;background-color:rgba(0,0,0,.15);background-clip:padding-box;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transform:scale(0);transform:scale(0);opacity:1}.waves-ripple.z-active{opacity:0;-webkit-transform:scale(2);transform:scale(2);-webkit-transition:opacity 1.2s ease-out,-webkit-transform .6s ease-out;transition:opacity 1.2s ease-out,-webkit-transform .6s ease-out;transition:opacity 1.2s ease-out,transform .6s ease-out;transition:opacity 1.2s ease-out,transform .6s ease-out,-webkit-transform .6s ease-out}.pagination-container[data-v-13a9916e]{background:#fff;padding:2px 2px}.pagination-container.hidden[data-v-13a9916e]{display:none}.el-notification.right{position:fixed;right:38.5%}

root@10.179.115.141/static/js/chunk-238a81e9.cfebf29b.js

@@ -0,0 +1 @@
+(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-238a81e9"],{"26fc":function(t,s,a){t.exports=a.p+"static/img/404_cloud.0f4bc32b.png"},"8cdb":function(t,s,a){"use strict";a.r(s);var e=function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"wscn-http404-container"},[a("div",{staticClass:"wscn-http404"},[t._m(0),t._v(" "),a("div",{staticClass:"bullshit"},[a("div",{staticClass:"bullshit__oops"},[t._v("OOPS!")]),t._v(" "),t._m(1),t._v(" "),a("div",{staticClass:"bullshit__headline"},[t._v(t._s(t.message))]),t._v(" "),a("div",{staticClass:"bullshit__info"},[t._v("Please check that the URL you entered is correct, or click the button below to return to the homepage.")]),t._v(" "),a("a",{staticClass:"bullshit__return-home",attrs:{href:""}},[t._v("Back to home")])])])])},c=[function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",{staticClass:"pic-404"},[e("img",{staticClass:"pic-404__parent",attrs:{src:a("a36b"),alt:"404"}}),t._v(" "),e("img",{staticClass:"pic-404__child left",attrs:{src:a("26fc"),alt:"404"}}),t._v(" "),e("img",{staticClass:"pic-404__child mid",attrs:{src:a("26fc"),alt:"404"}}),t._v(" "),e("img",{staticClass:"pic-404__child right",attrs:{src:a("26fc"),alt:"404"}})])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"bullshit__info"},[t._v("All rights reserved\n        "),a("a",{staticStyle:{color:"#20a0ff"},attrs:{href:"https://wallstreetcn.com",target:"_blank"}},[t._v("wallstreetcn")])])}],i={name:"Page404",computed:{message:function(){return"The webmaster said that you can not enter this page..."}}},l=i,n=(a("97ef"),a("2877")),r=Object(n["a"])(l,e,c,!1,null,"c095f994",null);s["default"]=r.exports},"97ef":function(t,s,a){"use strict";var e=a("b51e"),c=a.n(e);c.a},a36b:function(t,s,a){t.exports=a.p+"static/img/404.a57b6f31.png"},b51e:function(t,s,a){}}]);

root@10.179.115.141/static/js/chunk-2d0c76f4.6ce66a3a.js

@@ -0,0 +1 @@
+(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d0c76f4"],{5135:function(e,t,n){"use strict";n.r(t);var i=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("iframe",{staticStyle:{width:"100%"},attrs:{src:e.envUrl,scrolling:"no",frameborder:"0",height:e.iframeHeight}})])},r=[],o=(n("7f7f"),{name:"ENV",data:function(){return{envUrl:"http://10.179.181.222:8866/"+this.$route.name,iframeHeight:"720px"}},mounted:function(){var e=window.innerHeight>document.body.clientHeight?window.innerHeight:document.body.clientHeight;this.iframeHeight=e+"px"}}),a=o,c=n("2877"),u=Object(c["a"])(a,i,r,!1,null,null,null);t["default"]=u.exports}}]);

src/api/httprule.js

@@ -24,7 +24,7 @@ export function createRule(data) {
   return request({
     url: mockUrl + '/api/mock/mockRule/add',
     method: 'post',
-    params: { data: data }
+    data
   })
 }
 

src/api/interface.js

@@ -2,7 +2,7 @@ import request from '@/utils/request'
 
 // ================================== Interface ======================================
 
-const mockUrl = 'http://mock.Intra.xiaojukeji.com'
+const mockUrl = 'http://10.179.88.110:8089'
 
 export function fetchEnvInfo(envChannel) {
   return request({

src/api/rule.js

@@ -1,7 +1,7 @@
 import request from '@/utils/request'
 
 // ================================== Rule ======================================
-const mockUrl = 'http://mock.Intra.xiaojukeji.com'
+const mockUrl = 'http://10.179.88.110:8089'
 
 export function fetchRuleById(data) {
   return request({

src/router/index.js

@@ -152,7 +152,6 @@ export const constantRoutes = [
       {
         path: 'httpmock',
         name: 'httpmock',
-        hidden: true,
         component: () => import('@/views/mock/httpmock'),
         meta: { title: 'http mock', icon: 'rule' }
       },

src/utils/request.js

@@ -128,7 +128,7 @@ service.interceptors.response.use(
         type: 'warning',
         duration: 5 * 1000
       })
-      location.href = 'http://10.179.209.19:8899/'
+      // location.href = 'http://10.179.209.19:8899/'
     }
     return Promise.reject(error)
   }

src/views/mock/httpmock.vue

@@ -1,11 +1,8 @@
-/* eslint-disable vue/no-parsing-error */
-/* eslint-disable vue/no-parsing-error */
-/* eslint-disable no-unused-vars */
 <template style="height=0px;improtanent">
   <div class="app-container">
     <el-header style="height: auto;!improtant">
       <div class="filter-container" style="padding-bottom: 20px;!improtant">
-        <el-input v-model="listQuery.id" placeholder="接口id" style="width: 80px;" class="filter-item" @keyup.enter.native="handleFilter" />
+        <el-input v-model="listQuery.id" placeholder="接口ID" style="width: 80px;" class="filter-item" @keyup.enter.native="handleFilter" />
         <el-input v-model="listQuery.customName" placeholder="接口名称" style="width: 150px;" class="filter-item" @keyup.enter.native="handleFilter" />
         <el-input v-model="listQuery.url" placeholder="url" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
 
@@ -13,7 +10,7 @@
           <el-option v-for="item in envMethod" :key="item.str" :label="item.str" :value="item.str" />
         </el-select>
 
-        <el-select v-model="listQuery.returnDataTypeStr" placeholder="data类型" style="width: 100px;" class="filter-item" filterable clearable @change="getDataType(listQuery.returnDataType)">
+        <el-select v-model="listQuery.returnDataTypeStr" placeholder="返回值data类型" style="width: 200px;" class="filter-item" filterable clearable @change="getDataType(listQuery.returnDataType)">
           <el-option v-for="item in envSelectDataType" :key="item.code" :label="item.msg" :value="item.code" />
         </el-select>
 
@@ -21,7 +18,7 @@
           <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
 
-        <el-input v-model="listQuery.actualUrl" placeholder="真实服务URL" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
+        <el-input v-model="listQuery.actualUrl" placeholder="真实服务URL" style="width: 100px;" class="filter-item" @keyup.enter.native="handleFilter" />
         <el-input v-model="listQuery.creator" placeholder="创建人" style="width: 100px;" class="filter-item" @keyup.enter.native="handleFilter" />
         <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
           搜索
@@ -45,29 +42,34 @@
       :header-cell-style="styleObj"
       @sort-change="sortChange"
     >
-      <el-table-column label="接口id" prop="id" sortable align="center" min-width="50">
+      <el-table-column label="接口ID" prop="id" sortable align="center" min-width="50">
         <template slot-scope="scope">
           <span>{{ scope.row.id }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="接口名称" min-width="150px" align="center">
+      <el-table-column label="名称" min-width="150px" align="center">
         <template slot-scope="scope">
           <span>{{ scope.row.customName }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="url" min-width="220px" align="center">
+      <el-table-column label="url" min-width="180px" align="center">
         <template slot-scope="scope">
           <span>{{ scope.row.url }}</span>
         </template>
       </el-table-column>
+      <el-table-column label="mockURL" min-width="180px" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.row.mockUrl }}</span>
+        </template>
+      </el-table-column>
       <el-table-column label="method" min-min-width="60px">
         <template slot-scope="{row}">
           <span>{{ row.method }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="data类型" min-width="110px" align="center">
+      <el-table-column label="返回值data类型" min-width="110px" align="center">
         <template slot-scope="scope">
-          <span>{{ scope.row.returnDataType }}</span>
+          <span>{{ scope.row.returnDataTypeStr }}</span>
         </template>
       </el-table-column>
       <el-table-column label="状态" class-name="status-col" min-width="100">
@@ -92,6 +94,11 @@
           <span>{{ scope.row.updateTimeStr }}</span>
         </template>
       </el-table-column>
+      <el-table-column v-if="showReviewer" label="备注" min-width="110px" align="center">
+        <template slot-scope="scope">
+          <span style="color:red;">{{ scope.row.remark }}</span>
+        </template>
+      </el-table-column>
       <el-table-column label="操作" align="center" min-width="370px" class-name="small-padding fixed-width" fixed="right">
         <template slot-scope="{row}">
           <el-button type="primary" size="mini" @click="handleCheck(row)">
@@ -109,7 +116,7 @@
           <el-button v-if="row.status!=0" size="mini" type="danger" @click="handleModifyStatus(row, 0)">
             关闭
           </el-button>
-          <el-button type="primary" size="mini" @click="redirectTo(row.id, row.customName)">
+          <el-button type="primary" size="mini" @click="redirectTo(row.id, row.customName, methodProtocol)">
             规则 >>
           </el-button>
         </template>
@@ -125,9 +132,11 @@
           <el-input v-model="serviceData.url" :disabled="shouldShow" placeholder="url" />
         </el-form-item>
         <el-form-item label="method" prop="method">
-          <el-input v-model="serviceData.method" :disabled="shouldShow" placeholder="method" />
+          <el-select v-model="serviceData.method" :disabled="shouldShow" class="filter-item" filterable clearable placeholder="method">
+            <el-option v-for="item in envMethod" :key="item.str" :label="item.str" :value="item.str" />
+          </el-select>
         </el-form-item>
-        <el-form-item label="data类型" prop="returnDataType">
+        <el-form-item label="返回值data类型" prop="returnDataType">
           <el-select v-model="serviceData.returnDataType" :disabled="shouldShow" class="filter-item" filterable clearable placeholder="data类型">
             <el-option v-for="item in envSelectDataType" :key="item.code" :label="item.msg" :value="item.code" />
           </el-select>
@@ -135,9 +144,9 @@
         <el-form-item label="真实服务url" prop="actualUrl">
           <el-input v-model="serviceData.actualUrl" :disabled="shouldShow" placeholder="真实服务url" />
         </el-form-item>
-        <el-form-item label="创建人" prop="creator">
+        <!-- <el-form-item label="创建人" prop="creator">
           <el-input v-model="serviceData.creator" :disabled="shouldShow" placeholder="创建人" />
-        </el-form-item>
+        </el-form-item> -->
       </el-form>
       <span class="showBtn" @mouseover="explain" @mouseout="explain">配置指南</span>
       <div v-if="showexplain" class="showInfo">
@@ -211,7 +220,7 @@ export default {
       listLoading: true,
       statusMaps: new Map([[1, '已开启'], [0, '未开启']]),
       statusOperateMap: new Map([[1, '开启'], [0, '关闭']]),
-      options: [{ value: '0', label: '未开启' }, { value: '1', label: '已开启' }, { value: '', label: '全部显示' }],
+      options: [{ value: '', label: '全部显示' }, { value: '1', label: '已开启' }, { value: '0', label: '未开启' }],
       listQuery: {
         customName: '',
         method: '',
@@ -220,6 +229,7 @@ export default {
         status: null,
         actualUrl: '',
         creator: '',
+        mockUrl: '',
         returnDataTypeStr: '',
         curIndex: 1,
         pageSize: 20,
@@ -229,6 +239,7 @@ export default {
       importanceOptions: [1, 2, 3],
       envSelectDataType: '',
       envSelections,
+      methodProtocol: 'http',
       consumerSelections,
       sortOptions: [{ label: 'ID Ascending', key: '+id' }, { label: 'ID Descending', key: '-id' }],
       statusOptions: ['published', 'draft', 'deleted'],
@@ -239,6 +250,7 @@ export default {
         importance: 1,
         actualUrl: '',
         creator: '',
+        mockUrl: '',
         timestamp: new Date(),
         title: '',
         type: '',
@@ -249,6 +261,7 @@ export default {
         url: '',
         method: '',
         returnDataTypeStr: '',
+        mockUrl: '',
         returnDataType: '',
         envChannel: 1,
         id: '',
@@ -263,7 +276,7 @@ export default {
       dialogStatus: '',
       textMap: {
         update: '编辑',
-        create: '新增服务'
+        create: '新增接口'
       },
       dialogPvVisible: false,
       pvData: [],
@@ -285,7 +298,6 @@ export default {
     getList() {
       this.listLoading = true
       fetchServiceList(this.listQuery).then(response => {
-        // console.log(this.listQuery)
         this.list = response.data.mockMethodList
         this.total = response.data.total
         this.listLoading = false
@@ -381,6 +393,7 @@ export default {
         url: '',
         method: '',
         returnDataTypeStr: '',
+        mockUrl: '',
         returnDataType: '',
         envChannel: 1,
         id: '',
@@ -412,8 +425,8 @@ export default {
           this.serviceData.actualUrl
           this.serviceData.creator
           this.serviceData.returnDataTypeStr
+          this.serviceData.mockUrl
           createService(this.serviceData).then(response => {
-            console.log('sdcscdfs', this.serviceData)
             if (response.code === 200) {
               this.dialogFormVisible = false
               this.getList()
@@ -442,32 +455,35 @@ export default {
         url: row.url,
         customName: row.customName,
         returnDataType: row.returnDataType,
-        // status: row.status,
         actualUrl: row.actualUrl,
         creator: row.creator,
         method: row.method,
-        returnDataTypeStr: row.returnDataTypeStr
+        returnDataTypeStr: row.returnDataTypeStr,
+        mockUrl: row.mockUrl
       }
+      var rowList = row
       this.shouldShow = false
       updateService(queryData).then(response => {
-        console.log(queryData)
-        var rowData = response.data.mockMethodList
-        this.serviceData = Object.assign({}, rowData[0])
-        this.serviceData.id = row.id
-        this.serviceData.url = row.url
-        this.serviceData.customName = row.customName
-        this.serviceData.returnDataType = row.returnDataType
-        this.serviceData.status = row.status
-        this.serviceData.actualUrl = row.actualUrl
-        this.serviceData.creator = row.creator
-        this.serviceData.method = row.method
-        this.serviceData.returnDataTypeStr = row.returnDataTypeStr
-        this.dialogStatus = 'update'
-        this.dialogFormVisible = true
-        this.showSubmitBtn = false
-        this.$nextTick(() => {
-          this.$refs['serviceDataForms'].clearValidate()
-        })
+        // var rowData = response.data.mockMethodList
+        // this.serviceData = Object.assign({}, rowData)
+        if (response.data) {
+          this.serviceData.id = rowList.id
+          this.serviceData.url = rowList.url
+          this.serviceData.customName = rowList.customName
+          this.serviceData.returnDataType = rowList.returnDataType
+          this.serviceData.status = rowList.status
+          this.serviceData.actualUrl = rowList.actualUrl
+          this.serviceData.creator = rowList.creator
+          this.serviceData.method = rowList.method
+          this.serviceData.returnDataTypeStr = rowList.returnDataTypeStr
+          this.serviceData.mockUrl = rowList.mockUrl
+          this.dialogStatus = 'update'
+          this.dialogFormVisible = true
+          this.showSubmitBtn = true
+          this.$nextTick(() => {
+            this.$refs['serviceDataForms'].clearValidate()
+          })
+        }
       })
     },
     // 查看
@@ -486,6 +502,7 @@ export default {
         this.serviceData.creator = row.creator
         this.serviceData.method = row.method
         this.serviceData.returnDataTypeStr = row.returnDataTypeStr
+        this.serviceData.mockUrl = row.mockUrl
         this.dialogStatus = 'update'
         this.dialogFormVisible = true
         this.showSubmitBtn = false
@@ -497,10 +514,10 @@ export default {
     // 复制
     handleCopy(row) {
       var queryData = { id: row.id }
-      this.shouldShow = true
+      this.shouldShow = false
       changeCopy(queryData.id).then(response => {
-        var rowData = response.data.mockMethodList
-        this.serviceData = Object.assign({}, rowData)
+        // var rowData = response.data.mockMethodList
+        // this.serviceData = Object.assign({}, rowData)
         this.serviceData.url = row.url
         this.serviceData.customName = row.customName
         this.serviceData.returnDataType = row.returnDataType
@@ -509,6 +526,7 @@ export default {
         this.serviceData.creator = row.creator
         this.serviceData.method = row.method
         this.serviceData.returnDataTypeStr = row.returnDataTypeStr
+        this.serviceData.mockUrl = row.mockUrl
         this.dialogStatus = 'create'
         this.dialogFormVisible = true
         this.showSubmitBtn = true
@@ -519,10 +537,9 @@ export default {
     },
     updateData() {
       this.$refs['serviceDataForms'].validate((valid) => {
-        console.log(this.serviceData)
         if (valid) {
           const tempData = {
-            id: this.serviceDataExt.id,
+            id: this.serviceData.id,
             customName: this.serviceData.customName,
             url: this.serviceData.url,
             envChannel: this.serviceData.envChannel,
@@ -530,7 +547,8 @@ export default {
             actualUrl: this.serviceData.actualUrl,
             status: this.serviceData.status,
             creator: this.serviceData.creator,
-            returnDataTypeStr: this.serviceData.returnDataTypeStr
+            returnDataTypeStr: this.serviceData.returnDataTypeStr,
+            mockUrl: this.serviceData.mockUrl
           }
           updateService(tempData).then(response => {
             if (response.code === 200) {
@@ -563,12 +581,13 @@ export default {
         }
       }))
     },
-    redirectTo(id, customName) {
-      console.log(id, customName)
+    redirectTo(id, mehtodName, methodProtocol) {
+      console.log(methodProtocol)
       this.$router.push({
         path: `/mock/httpmock/${id}`,
         query: {
-          customName: customName
+          mehtodName: mehtodName,
+          methodProtocol: methodProtocol
         }
       })
     }

src/views/mock/httprule.vue

@@ -33,24 +33,21 @@
       :header-cell-style="styleObj"
       @sort-change="sortChange"
     >
-      <el-table-column label="规则id" prop="id" sortable="custom" align="center" min-width="80px">
+      <el-table-column label="规则ID" prop="id" sortable="custom" align="center" min-width="80px">
         <template slot-scope="scope">
           <span>{{ scope.row.id }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="接口id" min-width="150px" align="center">
+      <el-table-column label="接口ID" min-width="80px" align="center">
         <!-- <template slot-scope="scope"> -->
-        <span>{{ this.$route.query.methodName }}</span>
+        <span>{{ this.$route.path.split('/')[3] }}</span>
         <!-- </template> -->
       </el-table-column>
-      <el-table-column label="mock结果" min-width="110px" align="center">
-        <template slot-scope="scope">
-          <span>{{ scope.row.execSort }}</span>
-        </template>
+      <el-table-column label="方法协议" min-width="150px" align="center">
+        <!-- <template slot-scope="scope"> -->
+        <span>{{ this.$route.query.methodProtocol }}</span>
+        <!-- </template> -->
       </el-table-column>
-      <!-- <el-table-column label="方法ID" min-width="220px" align="center">
-        <span>{{ this.$route.path.split('/')[3] }}</span>
-      </el-table-column> -->
       <el-table-column label="规则" min-min-width="60px">
         <template slot-scope="{row}">
           <span>{{ row.whenScript }}</span>
@@ -62,6 +59,16 @@
           <span>{{ scope.row.execSort }}</span>
         </template>
       </el-table-column>
+      <el-table-column label="http请求URL" min-width="110px" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.row.httpUrl }}</span>
+        </template>
+      </el-table-column>
+      <!-- <el-table-column label="创建人" min-width="110px" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.row.creator }}</span>
+        </template>
+      </el-table-column> -->
       <el-table-column label="状态" class-name="status-col" min-width="100">
         <template slot-scope="{row}">
           <el-tag :type="row.status | statusFilter">
@@ -69,16 +76,6 @@
           </el-tag>
         </template>
       </el-table-column>
-      <el-table-column label="备注" min-width="110px" align="center">
-        <template slot-scope="scope">
-          <span>{{ scope.row.execSort }}</span>
-        </template>
-      </el-table-column>
-      <!-- <el-table-column label="更新时间" min-width="170px" align="center">
-        <template slot-scope="scope">
-          <span>{{ scope.row.updateTimeStr }}</span>
-        </template>
-      </el-table-column> -->
       <el-table-column v-if="showReviewer" label="返回值" min-width="110px" align="center">
         <template slot-scope="scope">
           <span style="color:red;">{{ scope.row.returnMessage }}</span>
@@ -108,7 +105,7 @@
       </el-table-column>
     </el-table>
     <pagination v-show="total>0" :total="total" :page.sync="listQuery.curIndex" :limit.sync="listQuery.pageSize" @pagination="getList" />
-    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="65%">
+    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="65%" @open="returnMessageData">
       <el-form ref="ruleDataForm" :rules="roleDataRules" :model="ruleData" label-position="left" label-width="120px" style="width: 500px; margin-left:80px;">
         <el-form-item label="规则" prop="whenScript">
           <el-input v-model="ruleData.whenScript" placeholder="any" disabled />
@@ -117,7 +114,7 @@
           <el-input-number v-model="ruleData.execSort" label="优先级" :min="1" :max="100" title="值越大，优先级越高" />
         </el-form-item>
         <el-form-item label="返回值" prop="returnMessage">
-          <el-input v-model="ruleData.returnMessage" :autosize="{ minRows: 3, maxRows: 10}" type="textarea" placeholder="{ 'code': 200, 'data': { 'crowdComposition': 'U_866', 'campaignId': 789, 'id': 4606, 'class': 'com.didi.prado.config.api.dto.CampaignCrowdDTO'}}" @blur="getFormatJsonStrFromStringRule(ruleData.returnMessage)" />
+          <el-input v-model="ruleData.returnMessage" :autosize="{ minRows: 3, maxRows: 10}" type="textarea" :placeholder="jsonTit" />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -142,7 +139,7 @@
 </template>
 
 <script>
-import { fetchEnvInfo, fetchRuleById, createRule, updateRule, changeStatus } from '@/api/httpmock'
+import { fetchEnvInfo, fetchRuleById, fetchRuleList, createRule, updateRule, changeStatus } from '@/api/httprule'
 import waves from '@/directive/waves' // waves directive
 import { parseTime } from '@/utils'
 import Pagination from '@/components/Pagination' // secondary package based on el-pagination
@@ -156,7 +153,7 @@ const ruleStatus = [
 ]
 
 export default {
-  name: 'Httpmock',
+  name: 'Httprule',
   components: { Pagination },
   directives: { waves },
   filters: {
@@ -187,21 +184,24 @@ export default {
         methodId: 0,
         execSort: null,
         status: null,
-        methodProtocol: ''
+        methodName: '',
+        methodProtocol: 'http'
       },
       showSubmit: true,
+      jsonTit: `{ 'code': 200, 'data': { 'crowdComposition': 'U_866', 'campaignId': 789, 'id': 4606, 'class': 'com.didi.prado.config.api.dto.CampaignCrowdDTO'}}`,
       sortOptions: [{ label: 'ID Ascending', key: '+id' }, { label: 'ID Descending', key: '-id' }],
       statusOptions: ['published', 'draft', 'deleted'],
       showReviewer: false,
       ruleData: {
         methodId: 0,
-        creator: '',
         updator: '',
+        methodName: '',
         execSort: 1,
         whenScript: '',
         returnMessage: '',
         curIndex: 1,
-        pageSize: 20
+        pageSize: 20,
+        methodProtocol: 'http'
       },
       dialogFormVisible: false,
       dialogStatus: '',
@@ -215,31 +215,39 @@ export default {
         whenScript: [{ required: true, message: '规则不能为空', trigger: 'change' }],
         execSort: [{ required: true, message: '优先级1-100', trigger: 'change' }],
         returnMessage: [{ required: true, message: '不能为空', trigger: 'change' }]
+        // interfaceName: [{ required: true, message: '接口名称不能为空', trigger: 'change' }],
+        // serviceVersion: [{ required: true, message: '服务版本不能为空', trigger: 'change' }],
+        // protocol: [{ required: true, message: '请选择协议类型', trigger: 'change' }],
+        // consumerIds: [{ required: false, message: '请选择消费者', trigger: 'change' }],
+        // methodName: [{ required: true, message: '方法名称不能为空', trigger: 'change' }],
+        // methodParamsTypes: [{ required: true, message: '入参类型不能为空', trigger: 'change' }],
+        // returnDataStructure: [{ required: true, message: '返回值类型不能为空', trigger: 'change' }]
       },
       downloadLoading: false
     }
   },
   created() {
     this.getList()
+    this.getFormatJsonStrFromStringRule(this.jsonTit)
   },
   methods: {
     prev() {
       this.$router.go(-1)
     },
     getList() {
-      this.listLoading = false
-      this.ruleData.methodId = parseInt(this.$route.path.split('/')[3])
-      // console.log(this.listQuery.methodId)
-      console.log(this.ruleData)
-      updateRule(this.ruleData).then(response => {
+      this.listLoading = true
+      this.listQuery.methodId = parseInt(this.$route.path.split('/')[3])
+      fetchRuleList(this.listQuery).then(response => {
         this.list = response.data.mockRuleList
         this.total = response.data.total
         // Just to simulate the time of the request
         this.listLoading = false
       })
     },
+    returnMessageData() {
+      this.getFormatJsonStrFromStringRule1(this.ruleData.returnMessage)
+    },
     getFormatJsonStrFromStringRule: function(jsonStr) {
-      console.log(jsonStr)
       var res = ''
       for (var i = 0, j = 0, k = 0, ii, ele; i < jsonStr.length; i++) { // k:缩进，j:""个数
         ele = jsonStr.charAt(i)
@@ -258,10 +266,30 @@ export default {
         res += ele
       }
       // eslint-disable-next-line no-return-assign
+      return this.jsonTit = res
+    },
+    getFormatJsonStrFromStringRule1: function(jsonStr) {
+      var res = ''
+      for (var i = 0, j = 0, k = 0, ii, ele; i < jsonStr.length; i++) { // k:缩进，j:""个数
+        ele = jsonStr.charAt(i)
+        if (j % 2 === 0 && ele === '}') {
+          k--
+          for (ii = 0; ii < k; ii++) ele = '   ' + ele
+          ele = '\n' + ele
+        } else if (j % 2 === 0 && ele === '{') {
+          ele += '\n'
+          k++
+          for (ii = 0; ii < k; ii++) ele += '   '
+        } else if (j % 2 === 0 && ele === ',') {
+          ele += '\n'
+          for (ii = 0; ii < k; ii++) ele += '   '
+        } else if (ele === '"') j++
+        res += ele
+      }
+      // eslint-disable-next-line no-return-assign
       return this.ruleData.returnMessage = res
     },
     updateEnvChannel(v) {
-      console.log(v)
       this.ruleData.envChannel = v
       this.envSelections = []
       fetchEnvInfo(v).then(response => {
@@ -295,7 +323,6 @@ export default {
     resetServiceData() {
       this.ruleData = {
         methodId: 0,
-        creator: '',
         updator: '',
         execSort: 1,
         whenScript: '',
@@ -315,14 +342,16 @@ export default {
     },
     createData() {
       const shouldJson = this.ruleData.returnMessage
+      console.log('dasdsadsad' + typeof (shouldJson))
       if (this.ruleData.whenScript === '') { this.ruleData.whenScript = 'any' }
       if (typeof shouldJson === 'string') {
         this.$refs['ruleDataForm'].validate((valid) => {
           if (valid) {
             delete this.ruleData.id
+            this.ruleData.methodProtocol = 'http'
             this.ruleData.methodId = parseInt(this.$route.path.split('/')[3])
             createRule(this.ruleData).then(response => {
-              // this.list.unshift(this.serviceData)
+              console.log(this.ruleData)
               if (response.code === 200) {
                 this.dialogFormVisible = false
                 this.getList()
@@ -348,14 +377,8 @@ export default {
     handleUpdate(row) {
       var queryData = { id: row.id }
       fetchRuleById(queryData).then(response => {
-        console.log(response)
         var row_data = response.data.mockRuleList
-        // this.ruleData.timestamp = new Date(this.temp.timestamp)
-        // console.log(this.ruleData)
-        // console.log(row_data)
         this.ruleData = Object.assign({}, row_data[0])
-        // console.log(this.ruleData)
-        this.ruleData.timestamp = new Date(this.ruleData.timestamp)
         this.dialogStatus = 'update'
         this.dialogFormVisible = true
         this.showSubmit = true
@@ -369,9 +392,7 @@ export default {
         id: row.id,
         status: status
       }
-      // console.log(statusData)
       changeStatus(statusData).then(response => {
-        // console.log(response)
         if (response.code === 200) {
           row.status = status
           this.$message({
@@ -387,6 +408,16 @@ export default {
       })
     },
     handleCopy(row) {
+      // this.ruleData = {
+      //   // id: row.id,
+      //   customName: row.customName,
+      //   httpUrl: row.httpUrl,
+      //   execSort: row.execSort,
+      //   whenScript: row.whenScript,
+      //   methodProtocol: row.methodProtocol,
+      //   status: row.status,
+      //   returnMessage: row.returnMessage
+      // }
       this.ruleData = Object.assign({}, row) // copy obj
       this.ruleData.timestamp = new Date(this.ruleData.timestamp)
       this.dialogStatus = 'create'
@@ -403,22 +434,15 @@ export default {
           const tempData = {
             id: this.ruleData.id,
             methodId: parseInt(this.$route.path.split('/')[3]),
-            creator: '',
             updator: '',
             execSort: this.ruleData.execSort,
             whenScript: this.ruleData.whenScript,
             returnMessage: this.ruleData.returnMessage,
-            methodName: this.$route.query.methodName
+            mehtodName: this.$route.query.methodName,
+            methodProtocol: this.$route.query.methodProtocol
           }
           updateRule(tempData).then(() => {
             this.getList()
-            // for (const v of this.list) {
-            //   if (v.id === this.ruleData.id) {
-            //     const index = this.list.indexOf(v)
-            //     this.list.splice(index, 1, this.ruleData)
-            //     break
-            //   }
-            // }
             this.dialogFormVisible = false
             this.$notify({
               title: 'Success',
@@ -442,14 +466,9 @@ export default {
     handleCheck(row) {
       var queryData = { id: row.id }
       fetchRuleById(queryData).then(response => {
-        console.log(response)
+        console.log('aaaaaaaaa' + response)
         var row_data = response.data.mockRuleList
-        // this.ruleData.timestamp = new Date(this.temp.timestamp)
-        // console.log(this.ruleData)
-        // console.log(row_data)
         this.ruleData = Object.assign({}, row_data[0])
-        // console.log(this.ruleData)
-        this.ruleData.timestamp = new Date(this.ruleData.timestamp)
         this.dialogStatus = 'update'
         this.dialogFormVisible = true
         this.showSubmit = false

src/views/mock/interface.vue

@@ -5,7 +5,7 @@
   <div class="app-container">
     <el-header style="height: auto;!improtant">
       <div class="filter-container" style="padding-bottom: 20px;!improtant">
-        <el-input v-model="listQuery.id" placeholder="ID" style="width: 80px;" class="filter-item" @keyup.enter.native="handleFilter" />
+        <el-input v-model="listQuery.id" placeholder="接口ID" style="width: 80px;" class="filter-item" @keyup.enter.native="handleFilter" />
         <el-input v-model="listQuery.customName" placeholder="名称" style="width: 150px;" class="filter-item" @keyup.enter.native="handleFilter" />
         <el-input v-model="listQuery.interfaceName" placeholder="接口类名" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
         <el-input v-model="listQuery.methodName" placeholder="方法名" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
@@ -35,7 +35,7 @@
       :header-cell-style="styleObj"
       @sort-change="sortChange"
     >
-      <el-table-column label="ID" prop="id" sortable align="center" min-width="60">
+      <el-table-column label="接口ID" prop="id" sortable align="center" min-width="60">
         <template slot-scope="scope">
           <span>{{ scope.row.id }}</span>
         </template>
@@ -267,7 +267,7 @@ export default {
       statusMappings: new Map([[1, '已开启'], [0, '未开启']]),
       statusOperateMap: new Map([[1, '开启'], [0, '关闭']]),
       listQuery: {
-        options: [{ value: '0', label: '未开启' }, { value: '1', label: '已开启' }, { value: '', label: '全部显示' }],
+        options: [{ value: '', label: '全部显示' }, { value: '1', label: '已开启' }, { value: '0', label: '未开启' }],
         value: '',
         curIndex: 1,
         pageSize: 20,
@@ -330,7 +330,7 @@ export default {
       dialogStatus: '',
       textMap: {
         update: '编辑',
-        create: '新增服务'
+        create: '新增接口'
       },
       dialogPvVisible: false,
       pvData: [],

src/views/mock/rule.vue

@@ -43,6 +43,9 @@
         <span>{{ this.$route.query.methodName }}</span>
         <!-- </template> -->
       </el-table-column>
+      <!-- <el-table-column label="方法协议" min-width="150px" align="center">
+        <span>{{ this.$route.query.methodProtocol }}</span>
+      </el-table-column> -->
       <el-table-column label="方法ID" min-width="220px" align="center">
         <!-- <template slot-scope="scope"> -->
         <span>{{ this.$route.path.split('/')[3] }}</span>
@@ -183,10 +186,11 @@ export default {
         whenScript: 'any',
         methodId: 0,
         execSort: null,
-        status: null
+        status: null,
+        methodProtocol: 'dubbo'
       },
       showSubmit: true,
-      jsonTit: `{ 'code': 200, 'data': { 'crowdComposition': 'U_866', 'campaignId': 789, 'id': 4606, 'class': 'com.didi.prado.config.api.dto.CampaignCrowdDTO'}}`,
+      jsonTit: "{ 'code': 200, 'data': { 'crowdComposition': 'U_866', 'campaignId': 789, 'id': 4606, 'class': 'com.didi.prado.config.api.dto.CampaignCrowdDTO'}}",
       sortOptions: [{ label: 'ID Ascending', key: '+id' }, { label: 'ID Descending', key: '-id' }],
       statusOptions: ['published', 'draft', 'deleted'],
       showReviewer: false,
@@ -225,6 +229,7 @@ export default {
   },
   created() {
     this.getList()
+    this.getFormatJsonStrFromStringRule(this.jsonTit)
   },
   methods: {
     prev() {
@@ -234,6 +239,7 @@ export default {
       this.listLoading = true
       this.listQuery.methodId = parseInt(this.$route.path.split('/')[3])
       fetchRuleList(this.listQuery).then(response => {
+        console.log(this.listQuery)
         this.list = response.data.mockRuleList
         this.total = response.data.total
         // Just to simulate the time of the request
@@ -241,7 +247,6 @@ export default {
       })
     },
     returnMessageData() {
-      this.getFormatJsonStrFromStringRule(this.jsonTit)
       this.getFormatJsonStrFromStringRule1(this.ruleData.returnMessage)
     },
     getFormatJsonStrFromStringRule: function(jsonStr) {
@@ -329,7 +334,8 @@ export default {
         whenScript: '',
         returnMessage: '',
         curIndex: 1,
-        pageSize: 20
+        pageSize: 20,
+        methodProtocol: 'dubbo'
       }
     },
     handleCreate() {
@@ -436,7 +442,8 @@ export default {
             execSort: this.ruleData.execSort,
             whenScript: this.ruleData.whenScript,
             returnMessage: this.ruleData.returnMessage,
-            mehtodName: this.$route.query.methodName
+            mehtodName: this.$route.query.methodName,
+            methodProtocol: this.$route.query.methodProtocol
           }
           updateRule(tempData).then(() => {
             this.getList()