new feature

.env.development

@@ -2,7 +2,7 @@
 ENV = 'development'
 
 # base api
-#VUE_APP_BASE_API = 'http://mock.Intra.xiaojukeji.com/'
+VUE_APP_BASE_API = 'http://mock.Intra.xiaojukeji.com/'
 
 # vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
 # to control whether the babel-plugin-dynamic-import-node plugin is enabled.

src/styles/index.scss

@@ -70,12 +70,13 @@ div:focus {
 }
 
 .filter-container {
-  padding-bottom: 2px;
+  // padding-bottom: 2px;
 
   .filter-item {
+    // padding-left: 0cm;
     display: inline-block;
     vertical-align: middle;
-    margin-bottom: 5px;
+    // margin-bottom: 5px;
   }
 }
 

src/views/mock/interface.vue

@@ -2,8 +2,12 @@
   <div class="app-container">
     <el-header>
       <div class="filter-container">
-        <el-input v-model="listQuery.customName" placeholder="服务名" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
+        <el-input v-model="listQuery.id" placeholder="ID" style="width: 50px;" 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-input v-model="listQuery.methodStatus" placeholder="状态" style="width: 80px;" class="filter-item" @keyup.enter.native="handleFilter" />
         <!-- <el-select v-model="listQuery.importance" placeholder="接口类" clearable style="width: 90px" class="filter-item">
           <el-option v-for="item in importanceOptions" :key="item" :label="item" :value="item" />
         </el-select>
@@ -16,10 +20,10 @@
         <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
           搜索
         </el-button>
-        <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
-          新增方法
+        <el-button class="filter-item" style="margin-left: 5px;" type="primary" icon="el-icon-edit" @click="handleCreate">
+          新增
         </el-button>
-        <el-checkbox v-model="showReviewer" class="filter-item" style="margin-left:15px;" @change="tableKey=tableKey+1">
+        <el-checkbox v-model="showReviewer" class="filter-item" style="margin-left:5px;" @change="tableKey=tableKey+1">
           显示备注
         </el-checkbox>
       </div>
@@ -89,8 +93,11 @@
           <span style="color:red;">{{ scope.row.remark }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" width="320px" class-name="small-padding fixed-width">
+      <el-table-column label="操作" align="center" width="370px" class-name="small-padding fixed-width">
         <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>
@@ -166,7 +173,7 @@
         <el-button @click="dialogFormVisible = false">
           取消
         </el-button>
-        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
+        <el-button v-if="showSubmitBtn" type="primary" @click="dialogStatus==='create'?createData():updateData()">
           确定
         </el-button>
       </div>
@@ -192,13 +199,6 @@ import waves from '@/directive/waves' // waves directive
 import { parseTime } from '@/utils'
 import Pagination from '@/components/Pagination' // secondary package based on el-pagination
 
-const calendarTypeOptions = [
-  { key: 'CN', display_name: 'China' },
-  { key: 'US', display_name: 'USA' },
-  { key: 'JP', display_name: 'Japan' },
-  { key: 'EU', display_name: 'Eurozone' }
-]
-
 const envTypeSelections = [
   { key: 1, display_name: '自定义环境配置' },
   { key: 2, display_name: '环境平台' }
@@ -214,10 +214,10 @@ const protocols = [
 
 // 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
-}, {})
+// const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
+//   acc[cur.key] = cur.display_name
+//   return acc
+// }, {})
 
 export default {
   name: 'Interface',
@@ -231,9 +231,6 @@ export default {
         0: 'danger'
       }
       return statusMap[status]
-    },
-    typeFilter(type) {
-      return calendarTypeKeyValue[type]
     }
   },
   data() {
@@ -254,10 +251,13 @@ export default {
         // importance: undefined,
         // title: undefined,
         // type: undefined,
-        sort: '+id'
+        sort: '+id',
+        id: null,
+        methodName: '',
+        serviceVersion: '',
+        methodStatus: null
       },
       importanceOptions: [1, 2, 3],
-      calendarTypeOptions,
       envTypeSelections,
       envSelections,
       consumerSelections,
@@ -265,6 +265,7 @@ export default {
       sortOptions: [{ label: 'ID Ascending', key: '+id' }, { label: 'ID Descending', key: '-id' }],
       statusOptions: ['published', 'draft', 'deleted'],
       showReviewer: false,
+      showSubmitBtn: true,
       temp: {
         id: undefined,
         importance: 1,
@@ -436,6 +437,7 @@ export default {
       this.resetServiceData()
       this.dialogStatus = 'create'
       this.dialogFormVisible = true
+      this.showSubmitBtn = true
       this.$nextTick(() => {
         this.$refs['serviceDataForm'].clearValidate()
       })
@@ -509,19 +511,65 @@ export default {
         // this.serviceData.timestamp = new Date(this.temp.timestamp)
         this.dialogStatus = 'update'
         this.dialogFormVisible = true
+        this.showSubmitBtn = true
+        this.$nextTick(() => {
+          this.$refs['serviceDataForm'].clearValidate()
+        })
+      })
+    },
+    handleCheck(row) {
+      var queryData = { id: row.id }
+      fetchServiceById(queryData).then(response => {
+        // console.log(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.dialogStatus = 'update'
+        this.dialogFormVisible = true
+        this.showSubmitBtn = false
         this.$nextTick(() => {
           this.$refs['serviceDataForm'].clearValidate()
         })
       })
     },
     handleCopy(row) {
-      this.serviceData = Object.assign({}, row) // copy obj
-      // this.serviceData.timestamp = new Date(this.serviceData.timestamp)
-
-      this.dialogStatus = 'create'
-      this.dialogFormVisible = true
-      this.$nextTick(() => {
-        this.$refs['serviceDataForm'].clearValidate()
+      var queryData = { id: row.id }
+      fetchServiceById(queryData).then(response => {
+        // console.log(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.dialogStatus = 'create'
+        this.dialogFormVisible = true
+        this.$nextTick(() => {
+          this.$refs['serviceDataForm'].clearValidate()
+        })
       })
     },
     updateData() {