interface页面json格式化

src/api/httpmock.js

@@ -2,9 +2,12 @@ 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({
-    url: '/api/mock/envConfig/getAllEnvConfigByChannel',
+    url: mockUrl + '/api/mock/envConfig/getAllEnvConfigByChannel',
     method: 'get',
     params: { channelId: envChannel }
   })
@@ -12,7 +15,7 @@ export function fetchEnvInfo(envChannel) {
 
 export function fetchServiceById(data) {
   return request({
-    url: '/api/mock/methodConfig/query',
+    url: mockUrl + '/api/mock/methodConfig/query',
     method: 'post',
     data
   })
@@ -20,7 +23,7 @@ export function fetchServiceById(data) {
 
 export function fetchServiceList(data) {
   return request({
-    url: '/api/mock/methodConfig/query',
+    url: mockUrl + '/api/mock/methodConfig/query',
     method: 'post',
     data
   })
@@ -28,7 +31,7 @@ export function fetchServiceList(data) {
 
 export function fetchConsumerList() {
   return request({
-    url: '/api/mock/dubboConsumer/getAll',
+    url: mockUrl + '/api/mock/dubboConsumer/getAll',
     method: 'get',
     params: {}
   })
@@ -36,7 +39,7 @@ export function fetchConsumerList() {
 
 export function createService(data) {
   return request({
-    url: '/api/mock/methodConfig/add',
+    url: mockUrl + '/api/mock/methodConfig/add',
     method: 'post',
     data
   })
@@ -44,7 +47,7 @@ export function createService(data) {
 
 export function updateService(data) {
   return request({
-    url: '/api/mock/methodConfig/update',
+    url: mockUrl + '/api/mock/methodConfig/update',
     method: 'post',
     data
   })
@@ -52,8 +55,26 @@ export function updateService(data) {
 
 export function changeStatus(data) {
   return request({
-    url: '/api/mock/methodConfig/changeStatus',
+    url: mockUrl + '/api/mock/methodConfig/changeStatus',
     method: 'post',
     data
   })
 }
+
+// data类型数据接口
+export function changeDataType(d) {
+  return request({
+    url: mockUrl + '/api/mock/httpmock/getReturnDataTyppes',
+    method: 'get',
+    params: {}
+  })
+}
+
+// method方法获取接口
+export function getSupportMethods() {
+  return request({
+    url: mockUrl + '/api/mock/httpmock/getSupportMethods',
+    method: 'get',
+    params: {}
+  })
+}

src/api/httprule.js

@@ -1,10 +1,12 @@
 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({
-    url: '/api/mock/mockRule/query',
+    url: mockUrl + '/api/mock/mockRule/query',
     method: 'post',
     data
   })
@@ -12,7 +14,7 @@ export function fetchRuleById(data) {
 
 export function fetchRuleList(data) {
   return request({
-    url: '/api/mock/mockRule/query',
+    url: mockUrl + '/api/mock/mockRule/query',
     method: 'post',
     data
   })
@@ -20,15 +22,15 @@ export function fetchRuleList(data) {
 
 export function createRule(data) {
   return request({
-    url: '/api/mock/mockRule/add',
+    url: mockUrl + '/api/mock/mockRule/add',
     method: 'post',
-    data
+    params: { data: data }
   })
 }
 
 export function updateRule(data) {
   return request({
-    url: '/api/mock/mockRule/update',
+    url: mockUrl + '/api/mock/mockRule/update',
     method: 'post',
     data
   })
@@ -36,7 +38,7 @@ export function updateRule(data) {
 
 export function changeStatus(data) {
   return request({
-    url: '/api/mock/mockRule/changeStatus',
+    url: mockUrl + '/api/mock/mockRule/changeStatus',
     method: 'post',
     data
   })

src/router/index.js

@@ -59,41 +59,6 @@ export const constantRoutes = [
     hidden: true
   },
 
-  {
-    path: '/mock',
-    component: Layout,
-    redirect: '/mock/interface',
-    name: 'Mock',
-    meta: { title: 'Mock服务', icon: 'example' },
-    children: [
-      {
-        path: 'interface',
-        name: 'Interface',
-        component: () => import('@/views/mock/interface'),
-        meta: { title: 'dubbo mock', icon: 'interface' }
-      },
-      {
-        path: 'interface/:rule',
-        name: 'Rule',
-        hidden: true,
-        component: () => import('@/views/mock/rule'),
-        meta: { title: '规则' }
-      },
-      {
-        path: 'httpmock',
-        name: 'httpmock',
-        component: () => import('@/views/mock/httpmock'),
-        meta: { title: 'http mock', icon: 'rule' }
-      },
-      {
-        path: 'httpmock/:httprule',
-        name: 'Httprule',
-        hidden: true,
-        component: () => import('@/views/mock/httprule'),
-        meta: { title: '规则' }
-      }
-    ]
-  },
   // {
   //   path: '/home',
   //   component: Layout,
@@ -164,28 +129,42 @@ export const constantRoutes = [
     ]
   },
 
-  // {
-  //   path: '/mock',
-  //   component: Layout,
-  //   redirect: '/mock/interface',
-  //   name: 'Mock',
-  //   meta: { title: 'Mock服务', icon: 'example' },
-  //   children: [
-  //     {
-  //       path: 'interface',
-  //       name: 'Interface',
-  //       component: () => import('@/views/mock/interface'),
-  //       meta: { title: 'Mock服务', icon: 'interface' }
-  //     },
-  //     {
-  //       path: 'interface/:rule',
-  //       name: 'Rule',
-  //       hidden: true,
-  //       component: () => import('@/views/mock/rule'),
-  //       meta: { title: '规则', icon: 'rule' }
-  //     }
-  //   ]
-  // },
+  {
+    path: '/mock',
+    component: Layout,
+    redirect: '/mock/interface',
+    name: 'Mock',
+    meta: { title: 'Mock服务', icon: 'example' },
+    children: [
+      {
+        path: 'interface',
+        name: 'Interface',
+        component: () => import('@/views/mock/interface'),
+        meta: { title: 'dubbo mock', icon: 'interface' }
+      },
+      {
+        path: 'interface/:rule',
+        name: 'Rule',
+        hidden: true,
+        component: () => import('@/views/mock/rule'),
+        meta: { title: 'dubbo规则' }
+      },
+      {
+        path: 'httpmock',
+        name: 'httpmock',
+        component: () => import('@/views/mock/httpmock'),
+        meta: { title: 'http mock', icon: 'rule' }
+      },
+      {
+        path: 'httpmock/:httprule',
+        name: 'Httprule',
+        hidden: true,
+        component: () => import('@/views/mock/httprule'),
+        meta: { title: 'httpmock规则' }
+      }
+    ]
+  },
+
   // {
   //   path: '/form',
   //   component: Layout,

src/views/mock/httpmock.vue

@@ -1,22 +1,27 @@
+/* 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.interfaceName" placeholder="url" style="width: 100px;" class="filter-item" @keyup.enter.native="handleFilter" />
-        <!-- <el-input v-model="listQuery.methodName" placeholder="方法名" 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-select v-model="listQuery.importance" placeholder="method" clearable style="width: 90px" class="filter-item">
-          <el-option v-for="item in importanceOptions" :key="item" :label="item" :value="item" />
+        <el-input v-model="listQuery.interfaceName" 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>
-        <el-select v-model="listQuery.type" placeholder="data类型" clearable class="filter-item" style="width: 130px">
-          <el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name+'('+item.key+')'" :value="item.key" />
+
+        <el-select v-model="dataTypes" placeholder="data类型" style="width: 100px;" class="filter-item" @change="getDataType(dataTypes)">
+          <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" @change="handleFilter">
+
+        <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>
-        <el-input v-model="listQuery.methodName" placeholder="真实服务URL" style="width: 100px;" class="filter-item" @keyup.enter.native="handleFilter" />
+
+        <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-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
           搜索
@@ -34,67 +39,72 @@
       :key="tableKey"
       v-loading="listLoading"
       :data="list"
-      border
       fit
       highlight-current-row
       style="width: 100%;"
+      :header-cell-style="styleObj"
       @sort-change="sortChange"
     >
-      <el-table-column label="接口ID" prop="id" sortable="custom" align="center" width="70px">
+      <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="接口名称" 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" width="100px" align="center">
+      <el-table-column label="url" min-width="220px" align="center">
         <template slot-scope="scope">
           <span>{{ scope.row.interfaceName }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="method" min-width="120px">
+      <el-table-column label="method" min-min-width="60px">
         <template slot-scope="{row}">
           <span>{{ row.serviceVersion }}</span>
           <!-- <el-tag>{{ row.type | typeFilter }}</el-tag> -->
         </template>
       </el-table-column>
-      <el-table-column label="data类型" width="110px" align="center">
+      <el-table-column label="data类型" min-width="110px" align="center">
         <template slot-scope="scope">
           <span>{{ scope.row.methodName }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="状态" class-name="status-col" width="100">
-        <template slot-scope="{row}">
-          <el-tag :type="row.methodStatus | statusFilter">
-            {{ statusMappings.get(row.methodStatus) }}
-          </el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="真实服务URL" width="110px" align="center">
+      <!-- <el-table-column label="Imp" width="80px">
         <template slot-scope="scope">
-          <span>{{ scope.row.methodName }}</span>
+          <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="创建人" align="center" width="95">
+      <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>
+        </template>
       </el-table-column>
-      <el-table-column label="更新时间" width="150px" align="center">
+      <el-table-column label="真实服务URL" min-width="110px" align="center">
         <template slot-scope="scope">
-          <span>{{ scope.row.updateTimeStr }}</span>
+          <span style="color:red;">{{ scope.row.remark }}</span>
         </template>
       </el-table-column>
-      <el-table-column v-if="showReviewer" label="备注" width="110px" align="center">
+      <el-table-column 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" width="370px" class-name="small-padding fixed-width">
+      <el-table-column label="更新时间" min-width="150px" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.row.updateTimeStr }}</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)">
             查看
@@ -121,22 +131,22 @@
     <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_圈司机" />
+          <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-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" style="width: 190px;" filterable placeholder="环境" @change="showZkAddress">
-              <el-option v-for="item in envSelections" :key="item.key" :label="item.display_name" :value="item.key" />
+            <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" />
+          <el-input v-model="serviceData.interfaceName" placeholder="com.didi.prado.config.api.CampaignRemoteServce" title="包名.接口类名" />
         </el-form-item>
         <el-form-item label="方法名" prop="methodName">
           <el-input v-model="serviceData.methodName" placeholder="addCampaign" />
@@ -165,13 +175,29 @@
         <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" placeholder="[java.lang.Integer, com.didi.prado.config.api.param.CampaignRequest]" />
+          <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" placeholder="{'data':'com.didi.order.api.response.BaserOrderInfoResult','data.feeInfo':'com.didi.order.api.response.FeeInfoResult'}" />
+          <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>
       </el-form>
+      <span class="showBtn" @mouseover="explain" @mouseout="explain">配置指南</span>
+      <div v-if="showexplain" class="showInfo">
+        <div class="showZm" />
+        <div class="showInfo">配置指南</div>
+      </div>
       <div slot="footer" class="dialog-footer">
         <el-button @click="dialogFormVisible = false">
           取消
@@ -194,10 +220,13 @@
 </template>
 
 <style scoped>
+.filter-item {
+  margin-top: 10px;
+}
 </style>
 
 <script>
-import { fetchEnvInfo, fetchServiceById, fetchServiceList, fetchConsumerList, createService, updateService, changeStatus } from '@/api/httpmock'
+import { fetchEnvInfo, fetchServiceById, fetchServiceList, getSupportMethods, fetchConsumerList, createService, 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
@@ -209,6 +238,7 @@ const envTypeSelections = [
 
 var envSelections = []
 var consumerSelections = []
+var envSelectDataType = []
 
 const protocols = [
   { key: 'dubbo', display_name: 'dubbo' }
@@ -238,19 +268,29 @@ export default {
   },
   data() {
     return {
+      styleObj: {
+        'color': 'rgba(0, 0, 0, 0.726)'
+      },
       tableKey: 0,
+      dataTypes: '',
       list: null,
       total: 0,
+      num: '',
+      Edition: '',
+      showtit: '',
+      showexplain: false,
       listLoading: true,
       statusMappings: new Map([[1, '已开启'], [0, '未开启']]),
       statusOperateMap: new Map([[1, '开启'], [0, '关闭']]),
       listQuery: {
-        options: [{ value: '0', label: '未开启' }, { value: '1', label: '已开启' }],
+        options: [{ value: '0', label: '未开启' }, { value: '1', label: '已开启' }, { value: '', label: '全部显示' }],
         value: '',
         curIndex: 1,
         pageSize: 20,
         customName: '',
         interfaceName: '',
+        envMethod: '',
+        setMethod: '',
         // page: 1,
         // limit: 20,
         // importance: undefined,
@@ -264,6 +304,7 @@ export default {
       },
       importanceOptions: [1, 2, 3],
       envTypeSelections,
+      envSelectDataType,
       envSelections,
       consumerSelections,
       protocols,
@@ -328,12 +369,14 @@ export default {
   },
   created() {
     this.getList()
+    this.mockDataTypes()
+    this.mockGetMethod()
   },
   methods: {
     getList() {
       this.listLoading = true
       fetchServiceList(this.listQuery).then(response => {
-        console.log(this.listQuery)
+        // console.log(this.listQuery)
         this.list = response.data.mockMethodList
         this.total = response.data.total
         // Just to simulate the time of the request
@@ -343,8 +386,91 @@ export default {
         // }, 1.5 * 1000)
       })
     },
+    explain() {
+      if (this.showexplain === false) {
+        this.showexplain = true
+      } else {
+        this.showexplain = false
+      }
+    },
+    // 获取method方法
+    mockGetMethod() {
+      this.listQuery.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)
+          }
+        } else {
+          this.$message({
+            message: '请求失败！',
+            type: 'danger'
+          })
+        }
+      })
+    },
+    getMethod(val) {
+      this.listQuery.setMethod = val
+    },
+    // 获取data数据
+    mockDataTypes() {
+      changeDataType().then(response => {
+        if (response.code) {
+          this.envSelectDataType = response.data
+        } else {
+          this.$message({
+            message: '请求失败！',
+            type: 'danger'
+          })
+        }
+      })
+    },
+    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) {
-      // console.log(v)
       this.serviceData.envChannel = v
       this.envSelections = []
       fetchEnvInfo(v).then(response => {
@@ -352,6 +478,7 @@ export default {
           var envSel = {}
           envSel.key = sel.envId
           envSel.display_name = sel.envName
+          envSel.registryAddress = sel.registryAddress
           this.envSelections.push(envSel)
         }
       })
@@ -448,9 +575,6 @@ export default {
         this.$refs['serviceDataForm'].clearValidate()
       })
     },
-    showZkAddress() {
-      alert(this.serviceData.zkAddress)
-    },
     createData() {
       this.$refs['serviceDataForm'].validate((valid) => {
         if (valid) {
@@ -471,9 +595,6 @@ export default {
           if (typeof this.serviceData.consumerIds === 'object') {
             this.serviceData.consumerIds = '[' + this.serviceData.consumerIds.toString() + ']'
           }
-          // console.log('#######################')
-          // console.log(this.serviceData)
-          // console.log('#######################')
           createService(this.serviceData).then(response => {
             // this.list.unshift(this.serviceData)
             // console.log(response)
@@ -635,8 +756,9 @@ export default {
       }))
     },
     redirectTo(id, methodName) {
+      // console.log(id,methodName)
       this.$router.push({
-        path: `/mock/httprule/${id}`,
+        path: `/mock/httpmock/${id}`,
         query: {
           methodName: methodName
         }
@@ -645,3 +767,27 @@ export default {
   }
 }
 </script>
+
+<style>
+.showInfo {
+  width: 400px;
+  height: 400px;
+  text-align: center;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%,-50%);
+}
+.showZm {
+  position:absolute;
+  background-color: #ccc;
+  width: 100%;
+  height: 100%;
+  opacity: 0.5;
+}
+.showBtn {
+  color: red;
+  padding-left: 200px;
+}
+
+</style>

src/views/mock/httprule.vue

@@ -2,7 +2,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.whenScript" placeholder="规则" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
+        <el-input v-model="listQuery.whenScript" disabled placeholder="any" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
         <el-input v-model="listQuery.execSort" placeholder="优先级" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
         <!-- <el-input-number v-model="listQuery.execSort" label="优先级" :min="1" :max="100" /> -->
         <el-select v-model="listQuery.status" class="filter-item" filterable clearable placeholder="状态">
@@ -27,56 +27,56 @@
       :key="tableKey"
       v-loading="listLoading"
       :data="list"
-      border
       fit
       highlight-current-row
       style="width: 100%;"
+      :header-cell-style="styleObj"
       @sort-change="sortChange"
     >
-      <el-table-column label="ID" prop="id" sortable="custom" align="center" width="80">
+      <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="方法名" width="150px" align="center">
+      <el-table-column label="方法名" min-width="150px" align="center">
         <!-- <template slot-scope="scope"> -->
         <span>{{ this.$route.query.methodName }}</span>
         <!-- </template> -->
       </el-table-column>
-      <el-table-column label="方法ID" width="220px" align="center">
+      <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>
-      <el-table-column label="规则" min-width="60px">
+      <el-table-column label="规则" min-min-width="60px">
         <template slot-scope="{row}">
           <span>{{ row.whenScript }}</span>
           <!-- <el-tag>{{ row.type | typeFilter }}</el-tag> -->
         </template>
       </el-table-column>
-      <el-table-column label="优先级" width="110px" align="center">
+      <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="状态" class-name="status-col" width="100">
+      <el-table-column label="状态" class-name="status-col" min-width="100">
         <template slot-scope="{row}">
           <el-tag :type="row.status | statusFilter">
             {{ statusMappings.get(row.status) }}
           </el-tag>
         </template>
       </el-table-column>
-      <el-table-column label="更新时间" width="150px" align="center">
+      <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="返回值" width="110px" align="center">
+      <el-table-column v-if="showReviewer" label="返回值" min-width="110px" align="center">
         <template slot-scope="scope">
           <span style="color:red;">{{ scope.row.returnMessage }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" width="370" class-name="small-padding fixed-width">
+      <el-table-column label="操作" align="center" min-width="370" class-name="small-padding fixed-width" fixed="right">
         <template slot-scope="{row}">
           <el-button type="primary" size="mini" @click="handleCheck(row)">
             查看
@@ -103,13 +103,13 @@
     <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="65%">
       <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" />
+          <el-input v-model="ruleData.whenScript" placeholder="any" disabled />
         </el-form-item>
         <el-form-item label="优先级" prop="execSort">
-          <el-input-number v-model="ruleData.execSort" label="优先级" :min="1" :max="100" />
+          <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'}}" />
+          <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-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -134,7 +134,7 @@
 </template>
 
 <script>
-import { fetchEnvInfo, fetchRuleById, fetchRuleList, createRule, updateRule, changeStatus } from '@/api/httprule'
+import { fetchEnvInfo, fetchRuleById, fetchRuleList, 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
@@ -148,11 +148,12 @@ import Pagination from '@/components/Pagination' // secondary package based on e
 
 const ruleStatus = [
   { key: 1, display_name: '已开启' },
-  { key: 0, display_name: '未开启' }
+  { key: 0, display_name: '未开启' },
+  { key: '', display_name: '全部显示' }
 ]
 
 export default {
-  name: 'Httprule',
+  name: 'Httpmock',
   components: { Pagination },
   directives: { waves },
   filters: {
@@ -167,6 +168,9 @@ export default {
   },
   data() {
     return {
+      styleObj: {
+        'color': 'rgba(0, 0, 0, 0.726)'
+      },
       tableKey: 0,
       list: null,
       total: 0,
@@ -176,10 +180,11 @@ export default {
       listQuery: {
         curIndex: 1,
         pageSize: 20,
-        whenScript: '',
+        whenScript: 'any',
         methodId: 0,
         execSort: null,
-        status: null
+        status: null,
+        methodProtocol: ''
       },
       showSubmit: true,
       sortOptions: [{ label: 'ID Ascending', key: '+id' }, { label: 'ID Descending', key: '-id' }],
@@ -213,7 +218,6 @@ export default {
         // 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
     }
@@ -235,6 +239,28 @@ export default {
         this.listLoading = false
       })
     },
+    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.ruleData.returnMessage = res
+    },
     updateEnvChannel(v) {
       console.log(v)
       this.ruleData.envChannel = v
@@ -250,6 +276,7 @@ export default {
     },
     handleFilter() {
       // this.listQuery.page = 1
+      this.listQuery.methodStatus = this.listQuery.value
       this.getList()
     },
     sortChange(data) {
@@ -282,40 +309,42 @@ export default {
       this.resetServiceData()
       this.dialogStatus = 'create'
       this.dialogFormVisible = true
+      this.showSubmit = true
       this.$nextTick(() => {
         this.$refs['ruleDataForm'].clearValidate()
       })
     },
     createData() {
-      this.$refs['ruleDataForm'].validate((valid) => {
-        if (valid) {
-          // this.ruleData.id = parseInt(Math.random() * 100) + 1024 // mock a id
-          // this.temp.author = 'vue-element-admin'
-          //   delete this.ruleData.id
-          delete this.ruleData.id
-          this.ruleData.methodId = parseInt(this.$route.path.split('/')[3])
-          createRule(this.ruleData).then(response => {
-            // this.list.unshift(this.serviceData)
-            if (response.code === 200) {
-              this.dialogFormVisible = false
-              this.getList()
-              this.$notify({
-                title: 'Success',
-                message: 'Created Successfully',
-                type: 'success',
-                duration: 2000
-              })
-            } else {
-              this.$notify({
-                title: 'Failed',
-                message: 'Created Failed',
-                type: 'error',
-                duration: 2000
-              })
-            }
-          })
-        }
-      })
+      const shouldJson = this.ruleData.returnMessage
+      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.methodId = parseInt(this.$route.path.split('/')[3])
+            createRule(this.ruleData).then(response => {
+              // this.list.unshift(this.serviceData)
+              if (response.code === 200) {
+                this.dialogFormVisible = false
+                this.getList()
+                this.$notify({
+                  title: 'Success',
+                  message: 'Created Successfully',
+                  type: 'success',
+                  duration: 2000
+                })
+              } else {
+                this.$notify({
+                  title: 'Failed',
+                  message: 'Created Failed',
+                  type: 'error',
+                  duration: 2000
+                })
+              }
+            })
+          }
+        })
+      }
     },
     handleUpdate(row) {
       var queryData = { id: row.id }
@@ -433,3 +462,11 @@ export default {
   }
 }
 </script>
+
+<style>
+.el-notification.right{
+  position: fixed;
+  right: 38.5%;
+}
+</style>
+

src/views/mock/interface.vue

@@ -1,13 +1,16 @@
+/* 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.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.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" />
-        <el-input v-model="listQuery.serviceVersion" placeholder="版本" style="width: 100px;" class="filter-item" @keyup.enter.native="handleFilter" />
-        <el-select v-model="listQuery.value" placeholder="状态" style="width: 100px;" class="filter-item" @change="handleFilter">
+        <el-input v-model="listQuery.serviceVersion" placeholder="服务版本" style="width: 100px;" class="filter-item" @keyup.enter.native="handleFilter" />
+        <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>
         <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
@@ -37,17 +40,17 @@
           <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="接口类" min-width="220px" align="center">
+      <el-table-column label="接口类名" min-width="220px" align="center">
         <template slot-scope="scope">
           <span>{{ scope.row.interfaceName }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="版本" min-min-width="60px">
+      <el-table-column label="服务版本" min-min-width="60px">
         <template slot-scope="{row}">
           <span>{{ row.serviceVersion }}</span>
           <!-- <el-tag>{{ row.type | typeFilter }}</el-tag> -->
@@ -86,7 +89,7 @@
           <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">
+      <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)">
             查看
@@ -116,13 +119,13 @@
           <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-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" style="width: 190px;" filterable placeholder="环境">
+            <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>
@@ -157,11 +160,22 @@
         <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>
         <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'}" />
+          <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>
       </el-form>
       <span class="showBtn" @mouseover="explain" @mouseout="explain">配置指南</span>
@@ -244,12 +258,15 @@ export default {
       tableKey: 0,
       list: null,
       total: 0,
+      num: '',
+      Edition: '',
+      showtit: '',
       showexplain: false,
       listLoading: true,
       statusMappings: new Map([[1, '已开启'], [0, '未开启']]),
       statusOperateMap: new Map([[1, '开启'], [0, '关闭']]),
       listQuery: {
-        options: [{ value: '0', label: '未开启' }, { value: '1', label: '已开启' }],
+        options: [{ value: '0', label: '未开启' }, { value: '1', label: '已开启' }, { value: '', label: '全部显示' }],
         value: '',
         curIndex: 1,
         pageSize: 20,
@@ -354,8 +371,48 @@ export default {
         this.showexplain = false
       }
     },
+    // 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)
+        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) {
-      // console.log(v)
       this.serviceData.envChannel = v
       this.envSelections = []
       fetchEnvInfo(v).then(response => {

src/views/mock/rule.vue

@@ -2,7 +2,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.whenScript" placeholder="规则" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
+        <el-input v-model="listQuery.whenScript" disabled placeholder="any" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
         <el-input v-model="listQuery.execSort" placeholder="优先级" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
         <!-- <el-input-number v-model="listQuery.execSort" label="优先级" :min="1" :max="100" /> -->
         <el-select v-model="listQuery.status" class="filter-item" filterable clearable placeholder="状态">
@@ -66,7 +66,7 @@
           </el-tag>
         </template>
       </el-table-column>
-      <el-table-column label="更新时间" min-width="150px" align="center">
+      <el-table-column label="更新时间" min-width="170px" align="center">
         <template slot-scope="scope">
           <span>{{ scope.row.updateTimeStr }}</span>
         </template>
@@ -76,7 +76,7 @@
           <span style="color:red;">{{ scope.row.returnMessage }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" min-width="370" class-name="small-padding fixed-width">
+      <el-table-column label="操作" align="center" min-width="370" class-name="small-padding fixed-width" fixed="right">
         <template slot-scope="{row}">
           <el-button type="primary" size="mini" @click="handleCheck(row)">
             查看
@@ -103,13 +103,13 @@
     <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="65%">
       <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" />
+          <el-input v-model="ruleData.whenScript" placeholder="any" disabled />
         </el-form-item>
         <el-form-item label="优先级" prop="execSort">
-          <el-input-number v-model="ruleData.execSort" label="优先级" :min="1" :max="100" />
+          <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'}}" />
+          <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-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -148,7 +148,8 @@ import Pagination from '@/components/Pagination' // secondary package based on e
 
 const ruleStatus = [
   { key: 1, display_name: '已开启' },
-  { key: 0, display_name: '未开启' }
+  { key: 0, display_name: '未开启' },
+  { key: '', display_name: '全部显示' }
 ]
 
 export default {
@@ -179,7 +180,7 @@ export default {
       listQuery: {
         curIndex: 1,
         pageSize: 20,
-        whenScript: '',
+        whenScript: 'any',
         methodId: 0,
         execSort: null,
         status: null
@@ -238,6 +239,28 @@ export default {
         this.listLoading = false
       })
     },
+    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.ruleData.returnMessage = res
+    },
     updateEnvChannel(v) {
       console.log(v)
       this.ruleData.envChannel = v
@@ -253,6 +276,7 @@ export default {
     },
     handleFilter() {
       // this.listQuery.page = 1
+      this.listQuery.methodStatus = this.listQuery.value
       this.getList()
     },
     sortChange(data) {
@@ -292,7 +316,7 @@ export default {
     },
     createData() {
       const shouldJson = this.ruleData.returnMessage
-      if (this.ruleData.whenScript === '') { this.ruleData.whenScript = 'Any' }
+      if (this.ruleData.whenScript === '') { this.ruleData.whenScript = 'any' }
       if (typeof shouldJson === 'string') {
         this.$refs['ruleDataForm'].validate((valid) => {
           if (valid) {
@@ -307,14 +331,14 @@ export default {
                   title: 'Success',
                   message: 'Created Successfully',
                   type: 'success',
-                  duration: 112000
+                  duration: 2000
                 })
               } else {
                 this.$notify({
                   title: 'Failed',
                   message: 'Created Failed',
                   type: 'error',
-                  duration: 112000
+                  duration: 2000
                 })
               }
             })
@@ -438,3 +462,11 @@ export default {
   }
 }
 </script>
+
+<style>
+.el-notification.right{
+  position: fixed;
+  right: 38.5%;
+}
+</style>
+