json格式化，隐藏httpmock

src/api/httpmock.js

@@ -5,62 +5,50 @@ import request from '@/utils/request'
 // const mockUrl = 'http://mock.Intra.xiaojukeji.com'
 const mockUrl = 'http://10.179.88.110:8089'
 
-export function fetchEnvInfo(envChannel) {
-  return request({
-    url: mockUrl + '/api/mock/envConfig/getAllEnvConfigByChannel',
-    method: 'get',
-    params: { channelId: envChannel }
-  })
-}
-
-export function fetchServiceById(data) {
-  return request({
-    url: mockUrl + '/api/mock/methodConfig/query',
-    method: 'post',
-    data
-  })
-}
-
 export function fetchServiceList(data) {
   return request({
-    url: mockUrl + '/api/mock/methodConfig/query',
+    url: mockUrl + '/api/mock/httpmock/query',
     method: 'post',
     data
   })
 }
 
-export function fetchConsumerList() {
-  return request({
-    url: mockUrl + '/api/mock/dubboConsumer/getAll',
-    method: 'get',
-    params: {}
-  })
-}
-
+// 添加
 export function createService(data) {
   return request({
-    url: mockUrl + '/api/mock/methodConfig/add',
+    url: mockUrl + '/api/mock/httpmock/add',
     method: 'post',
     data
   })
 }
 
+// 更新
 export function updateService(data) {
   return request({
-    url: mockUrl + '/api/mock/methodConfig/update',
+    url: mockUrl + '/api/mock/httpmock/update',
     method: 'post',
     data
   })
 }
 
+// 状态
 export function changeStatus(data) {
   return request({
-    url: mockUrl + '/api/mock/methodConfig/changeStatus',
+    url: mockUrl + '/api/mock/httpmock/changeStatus',
     method: 'post',
     data
   })
 }
 
+// 复制
+export function changeCopy(id) {
+  return request({
+    url: mockUrl + `/api/mock/httpmock/copy/` + id,
+    method: 'get',
+    id
+  })
+}
+
 // data类型数据接口
 export function changeDataType(d) {
   return request({

src/router/index.js

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

src/views/mock/httpmock.vue

@@ -7,22 +7,22 @@
       <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.customName" placeholder="接口名称" style="width: 150px;" class="filter-item" @keyup.enter.native="handleFilter" />
-        <el-input v-model="listQuery.interfaceName" placeholder="url" style="width: 200px;" 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" />
 
-        <el-select v-model="listQuery.setMethod" placeholder="method" style="width: 100px;" class="filter-item" @change="getMethod(listQuery.setMethod)">
-          <el-option v-for="item in listQuery.envMethod" :key="item.str" :label="item.str" :value="item.str" />
+        <el-select v-model="listQuery.method" placeholder="method" style="width: 100px;" class="filter-item" filterable clearable @change="getMethod(listQuery.method)">
+          <el-option v-for="item in envMethod" :key="item.str" :label="item.str" :value="item.str" />
         </el-select>
 
-        <el-select v-model="dataTypes" placeholder="data类型" style="width: 100px;" class="filter-item" @change="getDataType(dataTypes)">
+        <el-select v-model="listQuery.returnDataTypeStr" placeholder="data类型" style="width: 100px;" 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>
 
-        <el-select v-model="listQuery.value" placeholder="状态" style="width: 100px;" class="filter-item" filterable clearable>
-          <el-option v-for="item in listQuery.options" :key="item.value" :label="item.label" :value="item.value" />
+        <el-select v-model="listQuery.status" placeholder="状态" style="width: 100px;" class="filter-item" filterable clearable>
+          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
 
-        <el-input v-model="listQuery.methodName" placeholder="真实服务URL" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
-        <el-input v-model="listQuery.serviceVersion" placeholder="创建人" style="width: 100px;" class="filter-item" @keyup.enter.native="handleFilter" />
+        <el-input v-model="listQuery.actualUrl" placeholder="真实服务URL" style="width: 200px;" 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">
           搜索
         </el-button>
@@ -57,46 +57,34 @@
       </el-table-column>
       <el-table-column label="url" min-width="220px" align="center">
         <template slot-scope="scope">
-          <span>{{ scope.row.interfaceName }}</span>
+          <span>{{ scope.row.url }}</span>
         </template>
       </el-table-column>
       <el-table-column label="method" min-min-width="60px">
         <template slot-scope="{row}">
-          <span>{{ row.serviceVersion }}</span>
-          <!-- <el-tag>{{ row.type | typeFilter }}</el-tag> -->
+          <span>{{ row.method }}</span>
         </template>
       </el-table-column>
       <el-table-column label="data类型" min-width="110px" align="center">
         <template slot-scope="scope">
-          <span>{{ scope.row.methodName }}</span>
+          <span>{{ scope.row.returnDataType }}</span>
         </template>
       </el-table-column>
-      <!-- <el-table-column label="Imp" width="80px">
-        <template slot-scope="scope">
-          <svg-icon v-for="n in +scope.row.importance" :key="n" icon-class="star" class="meta-item__icon" />
-        </template>
-      </el-table-column>
-      <el-table-column label="Readings" align="center" width="95">
-        <template slot-scope="{row}">
-          <span v-if="row.pageviews" class="link-type" @click="handleFetchPv(row.pageviews)">{{ row.pageviews }}</span>
-          <span v-else>0</span>
-        </template>
-      </el-table-column> -->
       <el-table-column label="状态" class-name="status-col" min-width="100">
         <template slot-scope="{row}">
-          <el-tag :type="row.methodStatus | statusFilter">
-            {{ statusMappings.get(row.methodStatus) }}
+          <el-tag :type="row.status | statusFilter">
+            {{ statusMaps.get(row.status) }}
           </el-tag>
         </template>
       </el-table-column>
       <el-table-column label="真实服务URL" min-width="110px" align="center">
         <template slot-scope="scope">
-          <span style="color:red;">{{ scope.row.remark }}</span>
+          <span>{{ scope.row.actualUrl }}</span>
         </template>
       </el-table-column>
       <el-table-column label="创建人" min-width="110px" align="center">
         <template slot-scope="scope">
-          <span style="color:red;">{{ scope.row.remark }}</span>
+          <span>{{ scope.row.creator }}</span>
         </template>
       </el-table-column>
       <el-table-column label="更新时间" min-width="150px" align="center">
@@ -115,82 +103,40 @@
           <el-button type="primary" size="mini" @click="handleCopy(row)">
             复制
           </el-button>
-          <el-button v-if="row.methodStatus!=1" size="mini" type="success" @click="handleModifyStatus(row, 1)">
+          <el-button v-if="row.status!=1" size="mini" type="success" @click="handleModifyStatus(row, 1)">
             开启
           </el-button>
-          <el-button v-if="row.methodStatus!=0" size="mini" type="danger" @click="handleModifyStatus(row, 0)">
+          <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.methodName)">
+          <el-button type="primary" size="mini" @click="redirectTo(row.id, row.customName)">
             规则 >>
           </el-button>
         </template>
       </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%" @open="dialogOpenInit()">
-      <el-form ref="serviceDataForm" :rules="serviceDataRules" :model="serviceData" label-position="left" label-width="120px" style="width: 500px; margin-left:80px;">
-        <el-form-item label="名称" prop="customName">
-          <el-input v-model="serviceData.customName" placeholder="dj_order_圈司机" title="自定义，供配置人员查看,建议”业务线_模块_功能" />
-        </el-form-item>
-        <div style="display:flex; margin-left:0px;">
-          <el-form-item label="注册中心" prop="envChannel" style="flex:1;">
-            <el-select v-model="serviceData.envChannel" class="filter-item" style="width: 190px;" filterable placeholder="环境配置" @change="updateEnvChannel(serviceData.envChannel)">
-              <el-option v-for="item in envTypeSelections" :key="item.key" :label="item.display_name" :value="item.key" />
-            </el-select>
-          </el-form-item>
-          <el-form-item prop="envId" style="flex:1; margin-left:-120px;">
-            <el-select v-model="serviceData.envId" class="filter-item" :title="Edition" style="width: 190px;" filterable placeholder="环境" @change="envUpdate(serviceData.envId)">
-              <el-option v-for="item in envSelections" :key="item.key" :label="item.display_name" :value="item.key" :title="item.registryAddress" />
-            </el-select>
-          </el-form-item>
-        </div>
-        <el-form-item label="接口类名" prop="interfaceName">
-          <el-input v-model="serviceData.interfaceName" placeholder="com.didi.prado.config.api.CampaignRemoteServce" title="包名.接口类名" />
+    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="65%">
+      <el-form ref="serviceDataForms" :rules="serviceDataRules" :model="serviceData" label-position="left" label-width="120px" style="width: 500px; margin-left:80px;">
+        <el-form-item label="接口名称" prop="customName">
+          <el-input v-model="serviceData.customName" :disabled="shouldShow" placeholder="接口名称" />
         </el-form-item>
-        <el-form-item label="方法名" prop="methodName">
-          <el-input v-model="serviceData.methodName" placeholder="addCampaign" />
+        <el-form-item label="url" prop="url">
+          <el-input v-model="serviceData.url" :disabled="shouldShow" placeholder="url" />
         </el-form-item>
-        <el-form-item label="服务版本" prop="serviceVersion">
-          <el-input v-model="serviceData.serviceVersion" placeholder="1.0.0_test" />
+        <el-form-item label="method" prop="method">
+          <el-input v-model="serviceData.method" :disabled="shouldShow" placeholder="method" />
         </el-form-item>
-        <el-form-item label="协议" prop="protocol">
-          <el-select v-model="serviceData.protocol" class="filter-item" filterable clearable placeholder="协议">
-            <el-option v-for="item in protocols" :key="item.key" :label="item.display_name" :value="item.key" />
+        <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>
         </el-form-item>
-        <el-form-item label="消费者" prop="consumerIds">
-          <el-select v-model="serviceData.consumerIds" class="filter-item" multiple placeholder="消费者">
-            <el-option v-for="item in consumerSelections" :key="item.key" :label="item.display_name" :value="item.key" />
-          </el-select>
-        </el-form-item>
-        <!-- <el-form-item label="Date" prop="timestamp">
-          <el-date-picker v-model="temp.timestamp" type="datetime" placeholder="Please pick a date" />
-        </el-form-item>
-        <el-form-item label="Status">
-          <el-select v-model="temp.status" class="filter-item" placeholder="Please select">
-            <el-option v-for="item in statusOptions" :key="item" :label="item" :value="item" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="Imp">
-          <el-rate v-model="temp.importance" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" :max="3" style="margin-top:8px;" />
-        </el-form-item> -->
-        <!-- <div style="display:flex; margin-left:0px;">
-          <el-form-item label="入参类型" prop="methodParamsTypes" style="flex:1;">
-            <el-input v-model="serviceData.methodParamsTypes" class="filter-item" style="width: 180px;" title="列表形式,参数有序，多个参数类型以英文”,“分隔" placeholder="[java.lang.Integer, com.didi.prado.config.api.param.CampaignRequest]" />
-          </el-form-item>
-          <span style="font-size:30px; text-align:center;padding-top:10px; ">+</span>
-          <el-form-item label="入参类型" prop="methodParamsTypes" style="flex:1; margin-left:-120px;">
-            <el-select v-model="serviceData.methodParamsTypes" type="textarea" class="filter-item" title="列表形式,参数有序，多个参数类型以英文”,“分隔" style="width: 180px;" filterable placeholder="[java.lang.Integer, com.didi.prado.config.api.param.CampaignRequest]">
-              <el-option v-for="item in envSelections1s" :key="item.key" :label="item.display_name" :value="item.key" :title="item.registryAddress" />
-            </el-select>
-          </el-form-item>
-        </div> -->
-        <el-form-item label="入参类型" prop="methodParamsTypes">
-          <el-input v-model="serviceData.methodParamsTypes" :autosize="{ minRows: 2, maxRows: 8}" type="textarea" title="列表形式,参数有序，多个参数类型以英文”,“分隔" placeholder="[java.lang.Integer, com.didi.prado.config.api.param.CampaignRequest]" />
+        <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="returnDataStructure">
-          <el-input v-model="serviceData.returnDataStructure" :autosize="{ minRows: 2, maxRows: 8}" type="textarea" title="key:每个自定义类型在返回结构中的节点树，以英文“.“分隔；value:自定义类型的全限定类名" placeholder="{'data':'com.didi.order.api.response.BaserOrderInfoResult','data.feeInfo':'com.didi.order.api.response.FeeInfoResult'}" @blur="getFormatJsonStrFromString(serviceData.returnDataStructure)" />
+        <el-form-item label="创建人" prop="creator">
+          <el-input v-model="serviceData.creator" :disabled="shouldShow" placeholder="创建人" />
         </el-form-item>
       </el-form>
       <span class="showBtn" @mouseover="explain" @mouseout="explain">配置指南</span>
@@ -226,31 +172,13 @@
 </style>
 
 <script>
-import { fetchEnvInfo, fetchServiceById, fetchServiceList, getSupportMethods, fetchConsumerList, createService, updateService, changeStatus, changeDataType } from '@/api/httpmock'
+import { fetchServiceList, getSupportMethods, createService, changeCopy, updateService, changeStatus, changeDataType } from '@/api/httpmock'
 import waves from '@/directive/waves' // waves directive
 import { parseTime } from '@/utils'
 import Pagination from '@/components/Pagination' // secondary package based on el-pagination
 
-const envTypeSelections = [
-  { key: 1, display_name: '自定义环境配置' },
-  { key: 2, display_name: '环境平台' }
-]
-
 var envSelections = []
 var consumerSelections = []
-var envSelectDataType = []
-
-const protocols = [
-  { key: 'dubbo', display_name: 'dubbo' }
-  // { key: 'http', display_name: 'http' }
-]
-
-// var envTypeID = 1;
-// arr to obj, such as { CN : "China", US : "USA" }
-// const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
-//   acc[cur.key] = cur.display_name
-//   return acc
-// }, {})
 
 export default {
   name: 'Httpmock',
@@ -272,42 +200,36 @@ export default {
         'color': 'rgba(0, 0, 0, 0.726)'
       },
       tableKey: 0,
-      dataTypes: '',
+      shouldShow: false,
       list: null,
       total: 0,
       num: '',
       Edition: '',
       showtit: '',
+      envMethod: '',
       showexplain: false,
       listLoading: true,
-      statusMappings: new Map([[1, '已开启'], [0, '未开启']]),
+      statusMaps: new Map([[1, '已开启'], [0, '未开启']]),
       statusOperateMap: new Map([[1, '开启'], [0, '关闭']]),
+      options: [{ value: '0', label: '未开启' }, { value: '1', label: '已开启' }, { value: '', label: '全部显示' }],
       listQuery: {
-        options: [{ value: '0', label: '未开启' }, { value: '1', label: '已开启' }, { value: '', label: '全部显示' }],
-        value: '',
+        customName: '',
+        method: '',
+        url: '',
+        returnDataType: '',
+        status: null,
+        actualUrl: '',
+        creator: '',
+        returnDataTypeStr: '',
         curIndex: 1,
         pageSize: 20,
-        customName: '',
-        interfaceName: '',
-        envMethod: '',
-        setMethod: '',
-        // page: 1,
-        // limit: 20,
-        // importance: undefined,
-        // title: undefined,
-        // type: undefined,
         sort: '+id',
-        id: null,
-        methodName: '',
-        serviceVersion: '',
-        methodStatus: null
+        id: null
       },
       importanceOptions: [1, 2, 3],
-      envTypeSelections,
-      envSelectDataType,
+      envSelectDataType: '',
       envSelections,
       consumerSelections,
-      protocols,
       sortOptions: [{ label: 'ID Ascending', key: '+id' }, { label: 'ID Descending', key: '-id' }],
       statusOptions: ['published', 'draft', 'deleted'],
       showReviewer: false,
@@ -315,34 +237,27 @@ export default {
       temp: {
         id: undefined,
         importance: 1,
-        remark: '',
+        actualUrl: '',
+        creator: '',
         timestamp: new Date(),
         title: '',
         type: '',
         status: 'published'
       },
       serviceData: {
-        // bizLine: 0,
-        // bizModuleId: 0,
         customName: '',
-        interfaceName: '',
-        protocol: '',
-        serviceVersion: '',
+        url: '',
+        method: '',
+        returnDataTypeStr: '',
+        returnDataType: '',
         envChannel: 1,
-        envId: 0,
-        methodName: '',
-        methodParamsTypes: '',
-        returnDataStructure: '',
-        methodStatus: 1,
-        consumerIds: [],
-        remark: '',
-        updator: ''
+        id: '',
+        status: 1,
+        actualUrl: '',
+        creator: ''
       },
-      // ConsumerIdsStr: this.serviceData.consumerIds.replace('[', '').replace(']', '').split(',').map(Number),
       serviceDataExt: {
-        id: 0,
-        bizLine: 0,
-        bizModuleId: 0
+        id: 0
       },
       dialogFormVisible: false,
       dialogStatus: '',
@@ -353,16 +268,9 @@ export default {
       dialogPvVisible: false,
       pvData: [],
       serviceDataRules: {
-        customName: [{ required: true, message: '名称不能为空', trigger: 'change' }],
-        envChannel: [{ required: true, message: '请选择环境配置', trigger: 'change' }],
-        envId: [{ 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' }]
+        customName: [{ required: true, message: '接口名称不能为空', trigger: 'change' }],
+        url: [{ required: true, message: 'url不能为空', trigger: 'change' }],
+        method: [{ required: true, message: 'method不能为空', trigger: 'change' }]
       },
       downloadLoading: false
     }
@@ -373,17 +281,14 @@ export default {
     this.mockGetMethod()
   },
   methods: {
+    // 加载查询
     getList() {
       this.listLoading = true
       fetchServiceList(this.listQuery).then(response => {
         // console.log(this.listQuery)
         this.list = response.data.mockMethodList
         this.total = response.data.total
-        // Just to simulate the time of the request
         this.listLoading = false
-        // setTimeout(() => {
-        //   this.listLoading = false
-        // }, 1.5 * 1000)
       })
     },
     explain() {
@@ -395,13 +300,13 @@ export default {
     },
     // 获取method方法
     mockGetMethod() {
-      this.listQuery.envMethod = []
+      this.envMethod = []
       getSupportMethods().then(response => {
         if (response.code) {
           for (var i = 0; i < response.data.length; i++) {
             var obj = {}
             obj.str = response.data[i]
-            this.listQuery.envMethod.push(obj)
+            this.envMethod.push(obj)
           }
         } else {
           this.$message({
@@ -412,10 +317,11 @@ export default {
       })
     },
     getMethod(val) {
-      this.listQuery.setMethod = val
+      this.listQuery.method = val
     },
     // 获取data数据
     mockDataTypes() {
+      this.envSelectDataType = []
       changeDataType().then(response => {
         if (response.code) {
           this.envSelectDataType = response.data
@@ -428,99 +334,21 @@ export default {
       })
     },
     getDataType(val) {
-      this.dataTypes = val
-    },
-    // json 显示格式化
-    getFormatJsonStrFromString: 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.serviceData.returnDataStructure = res
-    },
-    // 在环境上显示title
-    envUpdate(s) {
-      if (this.serviceData.envChannel === 1) {
-        var num = 1
-      }
-      if (this.serviceData.envChannel === 2) {
-        // eslint-disable-next-line no-redeclare
-        var num = 2
-      }
-      this.serviceData.envId = s
-      fetchEnvInfo(num).then(response => {
-        for (var sel of response.data) {
-          if (sel.envId === s) {
-            this.Edition = sel.registryAddress
-          }
-        }
-      })
-    },
-    updateEnvChannel(v) {
-      this.serviceData.envChannel = v
-      this.envSelections = []
-      fetchEnvInfo(v).then(response => {
-        for (var sel of response.data) {
-          var envSel = {}
-          envSel.key = sel.envId
-          envSel.display_name = sel.envName
-          envSel.registryAddress = sel.registryAddress
-          this.envSelections.push(envSel)
-        }
-      })
-    },
-    getConsumers() {
-      this.consumerSelections = []
-      fetchConsumerList().then(response => {
-        for (var sel of response.data) {
-          var consumerSel = {}
-          consumerSel.key = sel.dubboConsumerId
-          consumerSel.display_name = sel.customizeName
-          this.consumerSelections.push(consumerSel)
-        }
-        // console.log(this.serviceData.consumerIds)
-        // for (var op of this.consumerSelections) {
-        //   if (op.key in this.serviceData.consumerIds) {
-        //     this.consumerSelected.push(op)
-        //     // this.consumerSelected = op.display_name
-        //   }
-        // }
-        // console.log(this.consumerSelected)
-      })
-    },
-    dialogOpenInit() {
-      this.updateEnvChannel(this.serviceData.envChannel)
-      this.getConsumers()
+      this.listQuery.returnDataType = val
     },
+    // 点击搜索时调用
     handleFilter() {
-      // this.listQuery.page = 1
-      this.listQuery.methodStatus = this.listQuery.value
       this.getList()
     },
+    // 点击开启，关闭时调用
     handleModifyStatus(row, status) {
       var statusData = {
         id: row.id,
-        methodStatus: status
+        status: status
       }
-      // console.log(statusData)
       changeStatus(statusData).then(response => {
-        // console.log(response)
         if (response.code === 200) {
-          row.methodStatus = status
+          row.status = status
           this.$message({
             message: row.id.toString() + ' ' + this.statusOperateMap.get(status) + '成功！',
             type: 'success'
@@ -549,55 +377,43 @@ export default {
     },
     resetServiceData() {
       this.serviceData = {
-        // bizLine: 0,
-        // bizModuleId: 0,
         customName: '',
-        interfaceName: '',
-        protocol: '',
-        serviceVersion: '',
+        url: '',
+        method: '',
+        returnDataTypeStr: '',
+        returnDataType: '',
         envChannel: 1,
-        envId: 0,
-        methodName: '',
-        methodParamsTypes: '[]',
-        returnDataStructure: '',
-        methodStatus: 1,
-        consumerIds: [],
-        remark: '',
-        updator: ''
+        id: '',
+        status: 1,
+        actualUrl: '',
+        creator: ''
       }
     },
+    // hearder新增时调用
     handleCreate() {
+      this.shouldShow = false
       this.resetServiceData()
       this.dialogStatus = 'create'
       this.dialogFormVisible = true
       this.showSubmitBtn = true
       this.$nextTick(() => {
-        this.$refs['serviceDataForm'].clearValidate()
+        this.$refs['serviceDataForms'].clearValidate()
       })
     },
+    // 点击提交时调用
     createData() {
-      this.$refs['serviceDataForm'].validate((valid) => {
+      this.$refs['serviceDataForms'].validate((valid) => {
         if (valid) {
-          // this.serviceData.id = parseInt(Math.random() * 100) + 1024 // mock a id
-          // this.temp.author = 'vue-element-admin'
-          delete this.serviceData.id
-          delete this.serviceData.bizLine
-          delete this.serviceData.bizModuleId
-          delete this.serviceData.bizName
-          delete this.serviceData.consumerCustomizeName
-          delete this.serviceData.consumerNames
-          delete this.serviceData.createTime
-          delete this.serviceData.createTimeStr
-          delete this.serviceData.envName
-          delete this.serviceData.updateTime
-          delete this.serviceData.updateTimeStr
-          delete this.serviceData.zkAddress
-          if (typeof this.serviceData.consumerIds === 'object') {
-            this.serviceData.consumerIds = '[' + this.serviceData.consumerIds.toString() + ']'
-          }
+          this.serviceData.customName
+          this.serviceData.method
+          this.serviceData.url
+          this.serviceData.returnDataType
+          this.serviceData.status
+          this.serviceData.actualUrl
+          this.serviceData.creator
+          this.serviceData.returnDataTypeStr
           createService(this.serviceData).then(response => {
-            // this.list.unshift(this.serviceData)
-            // console.log(response)
+            console.log('sdcscdfs', this.serviceData)
             if (response.code === 200) {
               this.dialogFormVisible = false
               this.getList()
@@ -619,111 +435,103 @@ export default {
         }
       })
     },
+    // 编辑
     handleUpdate(row) {
-      var queryData = { id: row.id }
-      fetchServiceById(queryData).then(response => {
-        // console.log(response)
+      var queryData = {
+        id: row.id,
+        url: row.url,
+        customName: row.customName,
+        returnDataType: row.returnDataType,
+        // status: row.status,
+        actualUrl: row.actualUrl,
+        creator: row.creator,
+        method: row.method,
+        returnDataTypeStr: row.returnDataTypeStr
+      }
+      this.shouldShow = false
+      updateService(queryData).then(response => {
+        console.log(queryData)
         var rowData = response.data.mockMethodList
-        // this.serviceData.timestamp = new Date(this.temp.timestamp)
-        // console.log(this.serviceData)
-        // console.log(row_data[0])
         this.serviceData = Object.assign({}, rowData[0])
-        this.serviceDataExt.id = row.id
-        this.serviceDataExt.bizLine = row.bizLine
-        this.serviceDataExt.bizModuleId = row.bizModuleId
-        // console.log(this.serviceData.consumerIds.split('[')[1].split(']')[0].split(','))
-        if (this.serviceData.consumerIds === '[]') {
-          this.serviceData.consumerIds = []
-        } else {
-          this.serviceData.consumerIds = this.serviceData.consumerIds.split('[')[1].split(']')[0].split(',').map(value => { return parseInt(value) })
-        }
-        // console.log(this.serviceData)
-        // this.serviceData.timestamp = new Date(this.temp.timestamp)
+        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 = true
+        this.showSubmitBtn = false
         this.$nextTick(() => {
-          this.$refs['serviceDataForm'].clearValidate()
+          this.$refs['serviceDataForms'].clearValidate()
         })
       })
     },
+    // 查看
     handleCheck(row) {
+      this.shouldShow = true
       var queryData = { id: row.id }
-      fetchServiceById(queryData).then(response => {
-        // console.log(response)
+      fetchServiceList(queryData).then(response => {
         var rowData = response.data.mockMethodList
-        // this.serviceData.timestamp = new Date(this.temp.timestamp)
-        // console.log(this.serviceData)
-        // console.log(row_data[0])
-        this.serviceData = Object.assign({}, rowData[0])
-        this.serviceDataExt.id = row.id
-        this.serviceDataExt.bizLine = row.bizLine
-        this.serviceDataExt.bizModuleId = row.bizModuleId
-        // console.log(this.serviceData.consumerIds.split('[')[1].split(']')[0].split(','))
-        if (this.serviceData.consumerIds === '[]') {
-          this.serviceData.consumerIds = []
-        } else {
-          this.serviceData.consumerIds = this.serviceData.consumerIds.split('[')[1].split(']')[0].split(',').map(value => { return parseInt(value) })
-        }
-        // console.log(this.serviceData)
-        // this.serviceData.timestamp = new Date(this.temp.timestamp)
+        this.serviceData = Object.assign({}, rowData)
+        this.serviceData.curIndex = this.listQuery.curIndex
+        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['serviceDataForm'].clearValidate()
+          this.$refs['serviceDataForms'].clearValidate()
         })
       })
     },
+    // 复制
     handleCopy(row) {
       var queryData = { id: row.id }
-      fetchServiceById(queryData).then(response => {
-        // console.log(response)
+      this.shouldShow = true
+      changeCopy(queryData.id).then(response => {
         var rowData = response.data.mockMethodList
-        // this.serviceData.timestamp = new Date(this.temp.timestamp)
-        // console.log(this.serviceData)
-        // console.log(row_data[0])
-        this.serviceData = Object.assign({}, rowData[0])
-        this.serviceDataExt.id = row.id
-        this.serviceDataExt.bizLine = row.bizLine
-        this.serviceDataExt.bizModuleId = row.bizModuleId
-        // console.log(this.serviceData.consumerIds.split('[')[1].split(']')[0].split(','))
-        if (this.serviceData.consumerIds === '[]') {
-          this.serviceData.consumerIds = []
-        } else {
-          this.serviceData.consumerIds = this.serviceData.consumerIds.split('[')[1].split(']')[0].split(',').map(value => { return parseInt(value) })
-        }
-        // console.log(this.serviceData)
-        // this.serviceData.timestamp = new Date(this.temp.timestamp)
+        this.serviceData = Object.assign({}, rowData)
+        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 = 'create'
         this.dialogFormVisible = true
+        this.showSubmitBtn = true
         this.$nextTick(() => {
-          this.$refs['serviceDataForm'].clearValidate()
+          this.$refs['serviceDataForms'].clearValidate()
         })
       })
     },
     updateData() {
-      this.$refs['serviceDataForm'].validate((valid) => {
+      this.$refs['serviceDataForms'].validate((valid) => {
+        console.log(this.serviceData)
         if (valid) {
           const tempData = {
             id: this.serviceDataExt.id,
-            bizLine: this.serviceDataExt.bizLine,
-            bizModuleId: this.serviceDataExt.bizModuleId,
             customName: this.serviceData.customName,
-            interfaceName: this.serviceData.interfaceName,
-            protocol: this.serviceData.protocol,
-            serviceVersion: this.serviceData.serviceVersion,
+            url: this.serviceData.url,
             envChannel: this.serviceData.envChannel,
-            envId: this.serviceData.envId,
-            methodName: this.serviceData.methodName,
-            methodParamsTypes: this.serviceData.methodParamsTypes,
-            returnDataStructure: this.serviceData.returnDataStructure,
-            methodStatus: this.serviceData.methodStatus,
-            consumerIds: '[' + this.serviceData.consumerIds.toString() + ']',
-            remark: this.serviceData.remark,
-            updator: ''
+            method: this.serviceData.method,
+            actualUrl: this.serviceData.actualUrl,
+            status: this.serviceData.status,
+            creator: this.serviceData.creator,
+            returnDataTypeStr: this.serviceData.returnDataTypeStr
           }
-          // console.log(tempData)
           updateService(tempData).then(response => {
             if (response.code === 200) {
               this.dialogFormVisible = false
@@ -755,12 +563,12 @@ export default {
         }
       }))
     },
-    redirectTo(id, methodName) {
-      // console.log(id,methodName)
+    redirectTo(id, customName) {
+      console.log(id, customName)
       this.$router.push({
         path: `/mock/httpmock/${id}`,
         query: {
-          methodName: methodName
+          customName: customName
         }
       })
     }

src/views/mock/httprule.vue

@@ -33,21 +33,24 @@
       :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="方法名" min-width="150px" align="center">
+      <el-table-column label="接口id" min-width="150px" align="center">
         <!-- <template slot-scope="scope"> -->
         <span>{{ this.$route.query.methodName }}</span>
         <!-- </template> -->
       </el-table-column>
-      <el-table-column label="方法ID" min-width="220px" align="center">
-        <!-- <template slot-scope="scope"> -->
-        <span>{{ this.$route.path.split('/')[3] }}</span>
-        <!-- </template> -->
+      <el-table-column label="mock结果" min-width="110px" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.row.execSort }}</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>
@@ -66,11 +69,16 @@
           </el-tag>
         </template>
       </el-table-column>
-      <el-table-column label="更新时间" min-width="170px" align="center">
+      <el-table-column label="备注" min-width="110px" align="center">
         <template slot-scope="scope">
-          <span>{{ scope.row.updateTimeStr }}</span>
+          <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>
@@ -134,16 +142,11 @@
 </template>
 
 <script>
-import { fetchEnvInfo, fetchRuleById, fetchRuleList, createRule, updateRule, changeStatus } from '@/api/httpmock'
+import { fetchEnvInfo, fetchRuleById, createRule, updateRule, changeStatus } from '@/api/httpmock'
 import waves from '@/directive/waves' // waves directive
 import { parseTime } from '@/utils'
 import Pagination from '@/components/Pagination' // secondary package based on el-pagination
 
-// const envTypeSelections = [
-//   { key: 1, display_name: '自定义环境配置' },
-//   { key: 2, display_name: '环境平台' }
-// ]
-
 // var envSelections = []
 
 const ruleStatus = [
@@ -212,12 +215,6 @@ 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' }],
       },
       downloadLoading: false
     }
@@ -230,9 +227,11 @@ export default {
       this.$router.go(-1)
     },
     getList() {
-      this.listLoading = true
-      this.listQuery.methodId = parseInt(this.$route.path.split('/')[3])
-      fetchRuleList(this.listQuery).then(response => {
+      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.list = response.data.mockRuleList
         this.total = response.data.total
         // Just to simulate the time of the request
@@ -409,7 +408,7 @@ export default {
             execSort: this.ruleData.execSort,
             whenScript: this.ruleData.whenScript,
             returnMessage: this.ruleData.returnMessage,
-            mehtodName: this.$route.query.methodName
+            methodName: this.$route.query.methodName
           }
           updateRule(tempData).then(() => {
             this.getList()

src/views/mock/interface.vue

@@ -175,7 +175,7 @@
           <el-input v-model="serviceData.methodParamsTypes" :autosize="{ minRows: 2, maxRows: 8}" type="textarea" title="列表形式,参数有序，多个参数类型以英文”,“分隔" placeholder="[java.lang.Integer, com.didi.prado.config.api.param.CampaignRequest]" />
         </el-form-item>
         <el-form-item label="返回值类型" prop="returnDataStructure">
-          <el-input v-model="serviceData.returnDataStructure" :autosize="{ minRows: 2, maxRows: 8}" type="textarea" title="key:每个自定义类型在返回结构中的节点树，以英文“.“分隔；value:自定义类型的全限定类名" placeholder="{'data':'com.didi.order.api.response.BaserOrderInfoResult','data.feeInfo':'com.didi.order.api.response.FeeInfoResult'}" @blur="getFormatJsonStrFromString(serviceData.returnDataStructure)" />
+          <el-input v-model="serviceData.returnDataStructure" :autosize="{ minRows: 2, maxRows: 8}" type="textarea" title="key:每个自定义类型在返回结构中的节点树，以英文“.“分隔；value:自定义类型的全限定类名" :placeholder="returnDataStr" />
         </el-form-item>
       </el-form>
       <span class="showBtn" @mouseover="explain" @mouseout="explain">配置指南</span>
@@ -258,6 +258,7 @@ export default {
       tableKey: 0,
       list: null,
       total: 0,
+      jsonTit: `{'data':'com.didi.order.api.response.BaserOrderInfoResult','data.feeInfo':'com.didi.order.api.response.FeeInfoResult'}`,
       num: '',
       Edition: '',
       showtit: '',
@@ -287,6 +288,7 @@ export default {
       envTypeSelections,
       envSelections,
       consumerSelections,
+      returnDataStr: '',
       protocols,
       sortOptions: [{ label: 'ID Ascending', key: '+id' }, { label: 'ID Descending', key: '-id' }],
       statusOptions: ['published', 'draft', 'deleted'],
@@ -373,7 +375,6 @@ export default {
     },
     // json 显示格式化
     getFormatJsonStrFromString: 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)
@@ -392,7 +393,33 @@ export default {
         res += ele
       }
       // eslint-disable-next-line no-return-assign
-      return this.serviceData.returnDataStructure = res
+      return (
+        // this.serviceData.returnDataStructure = res,
+        this.returnDataStr = res
+      )
+    },
+    getFormatJsonStrFromString1: 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.serviceData.returnDataStructure = res
+      )
     },
     // 在环境上显示title
     envUpdate(s) {
@@ -445,6 +472,8 @@ export default {
       })
     },
     dialogOpenInit() {
+      this.getFormatJsonStrFromString1(this.serviceData.returnDataStructure)
+      this.getFormatJsonStrFromString(this.jsonTit)
       this.updateEnvChannel(this.serviceData.envChannel)
       this.getConsumers()
     },

src/views/mock/rule.vue

@@ -100,7 +100,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 />
@@ -109,7 +109,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">
@@ -186,6 +186,7 @@ export default {
         status: null
       },
       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,
@@ -239,7 +240,33 @@ export default {
         this.listLoading = false
       })
     },
+    returnMessageData() {
+      this.getFormatJsonStrFromStringRule(this.jsonTit)
+      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)
+        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.jsonTit = res
+    },
+    getFormatJsonStrFromStringRule1: function(jsonStr) {
       console.log(jsonStr)
       var res = ''
       for (var i = 0, j = 0, k = 0, ii, ele; i < jsonStr.length; i++) { // k:缩进，j:""个数