http_mock接口调试

src/api/httprule.js

@@ -10,6 +10,20 @@ export function fetchRuleById(data) {
   })
 }
 
+export function queryById(id) { // 单一查询
+  return request({
+    url: mockUrl + '/api/mock/mockRule/queryById/' + id,
+    method: 'get'
+  })
+}
+
+export function callbackQuery(name) { // 回调接口信息
+  return request({
+    url: mockUrl + '/api/mock/mockRule/callback/query?name=' + name,
+    method: 'get'
+  })
+}
+
 export function fetchRuleList(data) {
   return request({
     url: mockUrl + '/api/mock/mockRule/query',

src/apiConfig/mock.js

@@ -2,3 +2,4 @@
 // export const mockUrl = 'http://10.179.88.110:8089' // stable
 export const mockUrl = 'http://mock.Intra.xiaojukeji.com' // 线上
 // export const mockUrl = 'http://10.179.101.226:8089' // test
+// export const mockUrl = 'http://172.23.145.20:8089'//local

src/views/mock/httprule.vue

@@ -88,9 +88,9 @@
 
       <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)"> 查看 </el-button>
-          <el-button type="primary" size="mini" @click="handleUpdate(row)"> 编辑 </el-button>
-          <el-button type="primary" size="mini" @click="handleCopy(row)"> 复制 </el-button>
+          <el-button type="primary" size="mini" @click="handleUpdate(row,'show')"> 查看 </el-button>
+          <el-button type="primary" size="mini" @click="handleUpdate(row,'edit')"> 编辑 </el-button>
+          <el-button type="primary" size="mini" @click="handleUpdate(row,'copy')"> 复制 </el-button>
           <el-button type="primary" size="mini"> 测试 </el-button>
           <el-button v-if="row.status!=1" size="mini" type="success" @click="handleModifyStatus(row, 1)"> 开启 </el-button>
           <el-button v-if="row.status!=0" size="mini" type="danger" @click="handleModifyStatus(row, 0)"> 关闭 </el-button>
@@ -222,7 +222,7 @@
               <el-input v-model="bodyObj" :autosize="{ minRows: 3, maxRows: 10}" type="textarea" placeholder="{id:1}" />
             </div>
             <div v-if="ruleForm.isCallback" class="add-button">
-              <el-button type="primary" icon="el-icon-plus" size="small" @click="addMoules(selectType)">新增配置</el-button>
+              <el-button v-show="selectType!=='body'" type="primary" icon="el-icon-plus" size="small" @click="addMoules(selectType)">新增配置</el-button>
             </div>
           </section>
         </el-form>
@@ -236,7 +236,8 @@
 </template>
 
 <script>
-import { fetchEnvInfo, fetchRuleById, fetchRuleList, createRule, updateRule, changeStatus, getHttpOp, getExpress } from '@/api/httprule'
+const _ = require('lodash')
+import { fetchEnvInfo, queryById, fetchRuleList, createRule, updateRule, changeStatus, getHttpOp, getExpress, callbackQuery } from '@/api/httprule'
 import waves from '@/directive/waves' // waves directive
 import { parseTime } from '@/utils'
 import Pagination from '@/components/Pagination' // secondary package based on el-pagination
@@ -276,6 +277,7 @@ export default {
         execSort: 1,
         ruleDesc: '',
         metaRuleList: [{ operator: '', expression1: '', expression2: '', judgeType: '', judgeValue: '', and: '', or: '', prior: '', bracket: '' }],
+        isCallback: false,
         callbackInfo: {}
       },
       rulesCheck: {
@@ -337,7 +339,7 @@ export default {
       selectType: 'header', // 当前选择的类型
       headerList: [], // header配置列表
       paramsList: [], // params配置列表
-      bodyObj: '' // body配置对象
+      bodyObj: null // body配置对象
     }
   },
   created() {
@@ -347,11 +349,25 @@ export default {
     this.getExpress()
   },
   methods: {
-    async searchCallback() { // 获取回调接口列表
-
-    },
-    handleSelect(e) { // 处理选择的回调接口
-
+    searchCallback: _.debounce(async(e, cb) => {
+      if (!e)e = ''
+      const res = await callbackQuery(e)
+      if (res.code === 200) cb(res.data)
+    }, 500),
+    handleSelect(callbackInfo) { // 处理选择的回调接口
+      if (callbackInfo && callbackInfo.header) {
+        this.headerList = JSON.parse(callbackInfo.header)
+        delete callbackInfo.header
+      }
+      if (callbackInfo && callbackInfo.params) {
+        this.paramsList = JSON.parse(callbackInfo.params)
+        delete callbackInfo.params
+      }
+      if (callbackInfo && callbackInfo.body) {
+        this.bodyObj = JSON.parse(callbackInfo.body)
+        delete callbackInfo.body
+      }
+      this.ruleForm.callbackInfo = callbackInfo
     },
     addMoules(type) { // 新增配置
       if (type === 'header') {
@@ -484,20 +500,17 @@ export default {
         this.$refs['ruleForm'].clearValidate()
       })
     },
-
     // 新增Data
     createData(vel) {
       if (typeof vel.returnMessage === 'string') {
         this.$refs['ruleForm'].validate((valid) => {
           if (valid) {
-            this.dataFrom = vel
+            this.dataFrom = _.cloneDeep(vel)
             this.dataFrom.creator = this.userNames
             this.dataFrom.creatorEn = this.username
             this.dataFrom.updator = ''
             this.dataFrom.methodId = parseInt(this.$route.path.split('/')[4])
             this.dataFrom.methodProtocol = 'http'
-            this.dataFrom = vel
-            this.dataFrom = vel
 
             this.showguiz === false ? this.dataFrom.whenScript = '' : ''
             this.isNotAnyRequest === false ? this.dataFrom.metaRuleList = [] : this.dataFrom.metaRuleList = [{ 'operator': '', 'expression': vel.expression1 + '.' + vel.expression2, 'judgeType': vel.judgeType, 'judgeValue': vel.judgeValue }]
@@ -506,46 +519,76 @@ export default {
             delete this.dataFrom.judgeType
             delete this.dataFrom.judgeValue
             delete this.dataFrom.id
-
-            createRule(this.dataFrom).then(response => {
-              if (response.code === 200) {
-                this.dialogFormVisible = false
-                this.getList()
-                this.$notify({ title: 'Success', message: response.msg, type: 'success', duration: 2000 })
-              } else {
-                this.$notify({ title: 'Failed', message: response.msg, type: 'error', duration: 2000 })
-              }
-            })
+            if (this.headerList.length > 0) {
+              this.dataFrom.callbackInfo.header = JSON.stringify(this.headerList)
+            }
+            if (this.paramsList.length > 0) {
+              this.dataFrom.callbackInfo.params = JSON.stringify(this.paramsList)
+            }
+            if (this.bodyObj !== null && this.bodyObj !== '') {
+              this.dataFrom.callbackInfo.body = this.bodyObj
+            }
+            if (!this.ruleForm.isCallback) {
+              this.dataFrom.callbackInfo = null
+            }
+            console.log(this.dataFrom)
+            this.createRule()
           }
         })
       }
     },
-
+    async createRule() {
+      const response = await createRule(this.dataFrom)
+      if (response.code === 200) {
+        this.dialogFormVisible = false
+        this.getList()
+        this.$notify({ title: 'Success', message: response.msg, type: 'success', duration: 2000 })
+      } else {
+        this.$notify({ title: 'Failed', message: response.msg, type: 'error', duration: 2000 })
+      }
+    },
     // 编辑Data
-    handleUpdate(row) {
-      var queryData = { id: row.id }
-      fetchRuleById(queryData).then(response => {
-        this.ruleForm = response.data.mockRuleList[0]
-        if (this.ruleForm.whenScript !== '') {
-          this.isNotAnyRequest = false
-          this.showguiz = true
-        }
-        if (this.ruleForm.metaRuleList.length !== 0) {
-          this.isNotAnyRequest = true
-          this.showguiz = false
-          for (var a of this.ruleForm.metaRuleList) {
-            this.ruleForm.expression1 = a.expression.split('.')[0]
-            this.ruleForm.expression2 = a.expression.split('.')[1]
-            this.ruleForm.judgeType = a.judgeType
-            this.ruleForm.judgeValue = a.judgeValue
-          }
+    async handleUpdate(row, type) {
+      const response = await queryById(row.id)
+      this.ruleForm = response.data
+      if (this.ruleForm.whenScript !== '') {
+        this.isNotAnyRequest = false
+        this.showguiz = true
+      }
+      if (this.ruleForm.metaRuleList.length !== 0) {
+        this.isNotAnyRequest = true
+        this.showguiz = false
+        for (const a of this.ruleForm.metaRuleList) {
+          this.ruleForm.expression1 = a.expression.split('.')[0]
+          this.ruleForm.expression2 = a.expression.split('.')[1]
+          this.ruleForm.judgeType = a.judgeType
+          this.ruleForm.judgeValue = a.judgeValue
         }
-        this.dialogStatus = 'update'
-        this.dialogFormVisible = true
-        this.showSubmit = true
-        this.$nextTick(() => {
-          this.$refs['ruleForm'].clearValidate()
-        })
+      }
+      const callbackInfo = this.ruleForm.callbackInfo
+      if (!this.ruleForm.callbackInfo) {
+        this.ruleForm.callbackInfo = {}
+      }
+      if (!this.ruleForm.isCallback) {
+        this.ruleForm.isCallback = false
+      }
+      if (callbackInfo && callbackInfo.header) {
+        this.headerList = JSON.parse(callbackInfo.header)
+        delete callbackInfo.header
+      }
+      if (callbackInfo && callbackInfo.params) {
+        this.paramsList = JSON.parse(callbackInfo.params)
+        delete callbackInfo.params
+      }
+      if (callbackInfo && callbackInfo.body) {
+        this.bodyObj = JSON.parse(callbackInfo.body)
+        delete callbackInfo.body
+      }
+      this.dialogStatus = type === 'copy' ? 'create' : 'update'
+      this.dialogFormVisible = true
+      this.showSubmit = type !== 'show'
+      this.$nextTick(() => {
+        this.$refs['ruleForm'].clearValidate()
       })
     },
     handleModifyStatus(row, status) {
@@ -563,34 +606,6 @@ export default {
       })
     },
 
-    // 复制Data
-    handleCopy(row) {
-      var queryData = { id: row.id }
-      fetchRuleById(queryData).then(response => {
-        this.ruleForm = response.data.mockRuleList[0]
-        if (this.ruleForm.whenScript !== '') {
-          this.isNotAnyRequest = false
-          this.showguiz = true
-        }
-        if (this.ruleForm.metaRuleList.length !== 0) {
-          this.isNotAnyRequest = true
-          this.showguiz = false
-          for (var a of this.ruleForm.metaRuleList) {
-            this.$set(this.ruleForm, 'expression1', a.expression.split('.')[0])
-            this.$set(this.ruleForm, 'expression2', a.expression.split('.')[1])
-            this.$set(this.ruleForm, 'judgeType', a.judgeType)
-            this.$set(this.ruleForm, 'judgeValue', a.judgeValue)
-          }
-        }
-        this.dialogStatus = 'create'
-        this.dialogFormVisible = true
-        this.showSubmit = true
-        this.$nextTick(() => {
-          this.$refs['ruleForm'].clearValidate()
-        })
-      })
-    },
-
     // 编辑提交
     updateData(vel) {
       if (typeof vel.returnMessage === 'string') {
@@ -629,35 +644,6 @@ export default {
           return v[j]
         }
       }))
-    },
-
-    // 查看
-    handleCheck(row) {
-      var queryData = { id: row.id }
-      fetchRuleById(queryData).then(response => {
-        var row_data = response.data.mockRuleList
-        this.ruleForm = Object.assign({}, row_data[0])
-        if (this.ruleForm.whenScript !== '') {
-          this.isNotAnyRequest = false
-          this.showguiz = true
-        }
-        if (this.ruleForm.metaRuleList.length !== 0) {
-          this.isNotAnyRequest = true
-          this.showguiz = false
-          for (var a of this.ruleForm.metaRuleList) {
-            this.ruleForm.expression1 = a.expression.split('.')[0]
-            this.ruleForm.expression2 = a.expression.split('.')[1]
-            this.ruleForm.judgeType = a.judgeType
-            this.ruleForm.judgeValue = a.judgeValue
-          }
-        }
-        this.dialogStatus = 'update'
-        this.dialogFormVisible = true
-        this.showSubmit = false
-        this.$nextTick(() => {
-          this.$refs['ruleForm'].clearValidate()
-        })
-      })
     }
   }
 }