update

src/api/article.js

@@ -66,6 +66,14 @@ export function fetchServiceList(data) {
   })
 }
 
+export function fetchConsumerList() {
+  return request({
+    url: '/api/mock/dubboConsumer/getAll',
+    method: 'get',
+    params: {}
+  })
+}
+
 export function createService(data) {
   return request({
     url: '/api/mock/methodConfig/add',
@@ -82,7 +90,7 @@ export function updateService(data) {
   })
 }
 
-// ================================== Interface ======================================
+// ================================== Rule ======================================
 
 export function fetchRuleById(data) {
   return request({
@@ -115,3 +123,11 @@ export function updateRule(data) {
     data
   })
 }
+
+export function changeStatus(data) {
+  return request({
+    url: '/api/mock/mockRule/changeStatus',
+    method: 'post',
+    data
+  })
+}

src/permission.js

@@ -8,7 +8,7 @@ import getPageTitle from '@/utils/get-page-title'
 
 NProgress.configure({ showSpinner: false }) // NProgress Configuration
 
-const whiteList = ['/login', '/mock/interface', '/mock/interface/*', '/dashboard', '/'] // no redirect whitelist
+const whiteList = ['/login'] // no redirect whitelist
 
 router.beforeEach(async(to, from, next) => {
   // start progress bar
@@ -48,8 +48,8 @@ router.beforeEach(async(to, from, next) => {
     /* has no token*/
 
     // var mock_url = '/mock/interface/'
-    // if (whiteList.indexOf(to.path) !== -1 || to.path.startsWith(mock_url)) {
-    if (whiteList.length > 1) {
+    // if (whiteList.indexOf(to.path) !== -1) {
+    if (whiteList.length > 0) {
       // in the free login whitelist, go directly
       next()
     } else {

src/views/mock/interface.vue

@@ -75,13 +75,13 @@
       <el-table-column label="状态" class-name="status-col" width="100">
         <template slot-scope="{row}">
           <el-tag :type="row.methodStatus | statusFilter">
-            {{ row.methodStatus }}
+            {{ statusMappings.get(row.methodStatus) }}
           </el-tag>
         </template>
       </el-table-column>
       <el-table-column label="更新时间" width="150px" align="center">
         <template slot-scope="scope">
-          <span>{{ scope.row.updateTime }}</span>
+          <span>{{ scope.row.updateTimeStr }}</span>
         </template>
       </el-table-column>
       <el-table-column v-if="showReviewer" label="备注" width="110px" align="center">
@@ -104,7 +104,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%" @open="updateEnvChannel(serviceData.envChannel)">
+    <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" />
@@ -132,7 +132,7 @@
         </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 calendarTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
+            <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="方法名" prop="methodName">
@@ -150,10 +150,10 @@
           <el-rate v-model="temp.importance" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" :max="3" style="margin-top:8px;" />
         </el-form-item> -->
         <el-form-item label="方法参数" prop="methodParamsTypes">
-          <el-input v-model="serviceData.methodParamsTypes" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="方法参数" />
+          <el-input v-model="serviceData.methodParamsTypes" :autosize="{ minRows: 2, maxRows: 8}" type="textarea" placeholder="方法参数" />
         </el-form-item>
         <el-form-item label="方法返回值" prop="returnDataStructure">
-          <el-input v-model="serviceData.returnDataStructure" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="方法返回值" />
+          <el-input v-model="serviceData.returnDataStructure" :autosize="{ minRows: 2, maxRows: 8}" type="textarea" placeholder="方法返回值" />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -186,7 +186,7 @@
 </style>
 
 <script>
-import { fetchEnvInfo, fetchServiceById, fetchServiceList, createService, updateService } from '@/api/article'
+import { fetchEnvInfo, fetchServiceById, fetchServiceList, fetchConsumerList, createService, updateService } from '@/api/article'
 import waves from '@/directive/waves' // waves directive
 import { parseTime } from '@/utils'
 import Pagination from '@/components/Pagination' // secondary package based on el-pagination
@@ -204,6 +204,7 @@ const envTypeSelections = [
 ]
 
 var envSelections = []
+var consumerSelections = []
 
 const protocols = [
   { key: 'dubbo', display_name: 'dubbo' },
@@ -225,9 +226,9 @@ export default {
   filters: {
     statusFilter(status) {
       const statusMap = {
-        published: 'success',
+        1: 'success',
         draft: 'info',
-        deleted: 'danger'
+        0: 'danger'
       }
       return statusMap[status]
     },
@@ -241,22 +242,24 @@ export default {
       list: null,
       total: 0,
       listLoading: true,
+      statusMappings: new Map([[1, '已开启'], [0, '未开启']]),
       listQuery: {
         curIndex: 1,
         pageSize: 20,
         customName: '',
-        interfaceName: ''
+        interfaceName: '',
         // page: 1,
         // limit: 20,
         // importance: undefined,
         // title: undefined,
         // type: undefined,
-        // sort: '+id'
+        sort: '+id'
       },
       importanceOptions: [1, 2, 3],
       calendarTypeOptions,
       envTypeSelections,
       envSelections,
+      consumerSelections,
       protocols,
       sortOptions: [{ label: 'ID Ascending', key: '+id' }, { label: 'ID Descending', key: '-id' }],
       statusOptions: ['published', 'draft', 'deleted'],
@@ -283,10 +286,11 @@ export default {
         methodParamsTypes: '',
         returnDataStructure: '',
         methodStatus: 1,
-        consumerIds: '[]',
+        consumerIds: [],
         remark: '',
         updator: ''
       },
+      // ConsumerIdsStr: this.serviceData.consumerIds.replace('[', '').replace(']', '').split(',').map(Number),
       serviceDataExt: {
         id: 0,
         bizLine: 0,
@@ -308,9 +312,9 @@ export default {
         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' }]
+        methodName: [{ required: true, message: '方法名称不能为空', trigger: 'change' }]
+        // methodParamsTypes: [{ required: true, message: '方法参数不能为空', trigger: 'change' }],
+        // returnDataStructure: [{ required: true, message: '方法返回值不能为空', trigger: 'change' }]
       },
       downloadLoading: false
     }
@@ -322,8 +326,9 @@ export default {
     getList() {
       this.listLoading = true
       fetchServiceList(this.listQuery).then(response => {
-        this.list = response.data
-        this.total = response.data.length
+        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(() => {
@@ -344,6 +349,21 @@ export default {
         }
       })
     },
+    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)
+        }
+      })
+    },
+    dialogOpenInit() {
+      this.updateEnvChannel(this.serviceData.envChannel)
+      this.getConsumers()
+    },
     handleFilter() {
       // this.listQuery.page = 1
       this.getList()
@@ -380,10 +400,10 @@ export default {
         envChannel: 1,
         envId: 0,
         methodName: '',
-        methodParamsTypes: '',
+        methodParamsTypes: '[]',
         returnDataStructure: '',
         methodStatus: 1,
-        consumerIds: '[]',
+        consumerIds: [],
         remark: '',
         updator: ''
       }
@@ -402,30 +422,43 @@ export default {
           // this.serviceData.id = parseInt(Math.random() * 100) + 1024 // mock a id
           // this.temp.author = 'vue-element-admin'
           delete this.serviceData.id
-          createService(this.serviceData).then(() => {
-            this.list.unshift(this.serviceData)
-            this.dialogFormVisible = false
-            this.$notify({
-              title: 'Success',
-              message: 'Created Successfully',
-              type: 'success',
-              duration: 2000
-            })
+          this.serviceData.consumerIds = '[' + this.serviceData.consumerIds.toString() + ']'
+          createService(this.serviceData).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: 'danger',
+                duration: 2000
+              })
+            }
           })
         }
       })
     },
     handleUpdate(row) {
-      var query_data = { id: row.id }
-      fetchServiceById(query_data).then(response => {
-        var row_data = response.data
+      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({}, row_data[0])
+        this.serviceData = Object.assign({}, rowData[0])
         this.serviceDataExt.id = row.id
         this.serviceDataExt.bizLine = row.bizLine
         this.serviceDataExt.bizModuleId = row.bizModuleId
+        this.serviceData.consumerIds = this.serviceData.consumerIds.split('[')[1].split(']')[0].split(',')
         // console.log(this.serviceData)
         // this.serviceData.timestamp = new Date(this.temp.timestamp)
         this.dialogStatus = 'update'
@@ -466,15 +499,24 @@ export default {
             remark: this.serviceData.remark,
             updator: ''
           }
-          updateService(tempData).then(() => {
-            this.getList()
-            this.dialogFormVisible = false
-            this.$notify({
-              title: 'Success',
-              message: 'Update Successfully',
-              type: 'success',
-              duration: 2000
-            })
+          updateService(tempData).then(response => {
+            if (response.code === 200) {
+              this.dialogFormVisible = false
+              this.getList()
+              this.$notify({
+                title: 'Success',
+                message: 'Update Successfully',
+                type: 'success',
+                duration: 2000
+              })
+            } else {
+              this.$notify({
+                title: 'Failed',
+                message: 'Update Failed',
+                type: 'danger',
+                duration: 2000
+              })
+            }
           })
         }
       })

src/views/mock/rule.vue

@@ -3,6 +3,11 @@
     <el-header>
       <div class="filter-container">
         <el-input v-model="listQuery.whenScript" placeholder="规则" 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="状态">
+          <el-option v-for="item in ruleStatus" :key="item.key" :label="item.display_name" :value="item.key" />
+        </el-select>
         <!-- <el-input v-model="listQuery.interfaceName" placeholder="接口类" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" /> -->
         <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
           搜索
@@ -54,7 +59,7 @@
       <el-table-column label="状态" class-name="status-col" width="100">
         <template slot-scope="{row}">
           <el-tag :type="row.status | statusFilter">
-            {{ row.status }}
+            {{ statusMappings.get(row.status) }}
           </el-tag>
         </template>
       </el-table-column>
@@ -76,6 +81,12 @@
           <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>
         </template>
       </el-table-column>
     </el-table>
@@ -88,33 +99,6 @@
         <el-form-item label="优先级" prop="execSort">
           <el-input-number v-model="ruleData.execSort" label="优先级" :min="1" :max="100" />
         </el-form-item>
-        <!-- <el-form-item label="环境" prop="envId">
-          <el-select v-model="ruleData.envId" class="filter-item" filterable placeholder="环境">
-            <el-option v-for="item in envSelections" :key="item.key" :label="item.display_name" :value="item.key" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="接口类名" prop="interfaceName">
-          <el-input v-model="ruleData.interfaceName" />
-        </el-form-item>
-        <el-form-item label="服务版本" prop="serviceVersion">
-          <el-input v-model="ruleData.serviceVersion" />
-        </el-form-item>
-        <el-form-item label="协议选择" prop="protocol">
-          <el-select v-model="ruleData.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-select>
-        </el-form-item>
-        <el-form-item label="消费者设置" prop="consumerIds">
-          <el-select v-model="ruleData.consumerIds" class="filter-item" multiple placeholder="消费者">
-            <el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="方法名" prop="methodName">
-          <el-input v-model="ruleData.methodName" />
-        </el-form-item>
-        <el-form-item label="方法参数" prop="methodParamsTypes">
-          <el-input v-model="ruleData.methodParamsTypes" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="方法参数" />
-        </el-form-item> -->
         <el-form-item label="返回值" prop="returnMessage">
           <el-input v-model="ruleData.returnMessage" :autosize="{ minRows: 3, maxRows: 10}" type="textarea" placeholder="返回值" />
         </el-form-item>
@@ -149,7 +133,7 @@
 </style>
 
 <script>
-import { fetchEnvInfo, fetchRuleById, fetchRuleList, createRule, updateRule } from '@/api/article'
+import { fetchEnvInfo, fetchRuleById, fetchRuleList, createRule, updateRule, changeStatus } from '@/api/article'
 import waves from '@/directive/waves' // waves directive
 import { parseTime } from '@/utils'
 import Pagination from '@/components/Pagination' // secondary package based on el-pagination
@@ -161,10 +145,10 @@ import Pagination from '@/components/Pagination' // secondary package based on e
 
 // var envSelections = []
 
-// const protocols = [
-//   { key: 'dubbo', display_name: 'dubbo' },
-//   { key: 'http', display_name: 'http' }
-// ]
+const ruleStatus = [
+  { key: 1, display_name: '已开启' },
+  { key: 0, display_name: '未开启' }
+]
 
 export default {
   name: 'Rule',
@@ -173,9 +157,9 @@ export default {
   filters: {
     statusFilter(status) {
       const statusMap = {
-        published: 'success',
+        1: 'success',
         draft: 'info',
-        deleted: 'danger'
+        0: 'danger'
       }
       return statusMap[status]
     }
@@ -186,11 +170,15 @@ export default {
       list: null,
       total: 0,
       listLoading: true,
+      statusMappings: new Map([[1, '已开启'], [0, '未开启']]),
+      ruleStatus,
       listQuery: {
         curIndex: 1,
         pageSize: 20,
         whenScript: '',
-        methodId: 0
+        methodId: 0,
+        execSort: null,
+        status: null
       },
       sortOptions: [{ label: 'ID Ascending', key: '+id' }, { label: 'ID Descending', key: '-id' }],
       statusOptions: ['published', 'draft', 'deleted'],
@@ -236,8 +224,8 @@ export default {
       this.listLoading = true
       this.listQuery.methodId = parseInt(this.$route.path.split('/')[3])
       fetchRuleList(this.listQuery).then(response => {
-        this.list = response.data
-        this.total = response.data.length
+        this.list = response.data.mockRuleList
+        this.total = response.data.total
         // Just to simulate the time of the request
         this.listLoading = false
       })
@@ -314,14 +302,15 @@ export default {
       })
     },
     handleUpdate(row) {
-      var query_data = { id: row.id }
-      fetchRuleById(query_data).then(response => {
-        var row_data = response.data
+      var queryData = { id: row.id }
+      fetchRuleById(queryData).then(response => {
+        console.log(response)
+        var row_data = response.data.mockRuleList
         // this.ruleData.timestamp = new Date(this.temp.timestamp)
         // console.log(this.ruleData)
-        // console.log(row_data[0])
+        // console.log(row_data)
         this.ruleData = Object.assign({}, row_data[0])
-        console.log(this.ruleData)
+        // console.log(this.ruleData)
         this.ruleData.timestamp = new Date(this.ruleData.timestamp)
         this.dialogStatus = 'update'
         this.dialogFormVisible = true
@@ -330,6 +319,28 @@ export default {
         })
       })
     },
+    handleModifyStatus(row, status) {
+      var statusData = {
+        id: row.id,
+        status: status
+      }
+      // console.log(statusData)
+      changeStatus(statusData).then(response => {
+        // console.log(response)
+        if (response.code === 200) {
+          row.status = status
+          this.$message({
+            message: row.id.toString() + ' 操作成功！',
+            type: 'success'
+          })
+        } else {
+          this.$message({
+            message: row.id.toString() + ' 操作失败！',
+            type: 'danger'
+          })
+        }
+      })
+    },
     handleCopy(row) {
       this.ruleData = Object.assign({}, row) // copy obj
       this.ruleData.timestamp = new Date(this.ruleData.timestamp)