feat:CN-1522 插件管理界面与接口调试

src/components/table/system/PluginTable.vue

@@ -28,25 +28,28 @@
         <div class="col-resize-area"></div>
       </template>
       <template #default="scope" :column="item">
-        <template v-if="item.prop === 'status'">
+        <template v-if="item.prop === 'triggerStatus'">
           <el-switch
-              v-model="scope.row.status"
+              v-model="scope.row.triggerStatus"
               active-value="1"
               inactive-value="0"
               @change="()=>{statusChange(scope.row)}">
           </el-switch>
         </template>
         <template v-else-if="item.prop === 'type'">
-          <span class="type-tag">{{tagSourceText(scope.row[item.prop])}}</span>
+          <span class="type-tag">{{typeText(scope.row['id'])}}</span>
         </template>
         <template v-else-if="item.prop === 'name'">
           <div class="plugin-name">
-            <div class="icon-background"><img class="plugin-name-icon" :src="getIconUrl(scope.row['knowledgeId'])"/></div>
+            <div class="icon-background"><img class="plugin-name-icon" :src="getIconUrl(scope.row['id'])"/></div>
-            {{scope.row[item.prop] || '-'}}
+            {{getName(scope.row['id'])}}
           </div>
         </template>
         <template v-else-if="item.prop === 'description'">
-          <div class="two-line" :title="getDescription(scope.row['knowledgeId'])">{{getDescription(scope.row['knowledgeId'])}}</div>
+          <div class="two-line" :title="getDescription(scope.row['id'])">{{getDescription(scope.row['id'])}}</div>
+        </template>
+        <template v-else-if="item.prop === 'schedule'">
+          <div class="two-line" >{{scheduleText(scope.row['id'])}}</div>
         </template>
         <span v-else>{{scope.row[item.prop] || '-'}}</span>
       </template>
@@ -62,7 +65,8 @@
 <script>
 import table from '@/mixins/table'
 import axios from 'axios'
-import { storageKey, knowledgeBaseSource, builtInKnowledgeBaseBasicInfo } from '@/utils/constants'
+import { api } from '@/utils/api'
+import { storageKey, pluginBasicInfo,pluginSchedule } from '@/utils/constants'
 
 export default {
   name: 'pluginTable',
@@ -99,7 +103,7 @@ export default {
           minWidth: 150
         }, {
           label: this.$t('overall.status'),
-          prop: 'status',
+          prop: 'triggerStatus',
           show: true,
           minWidth: 200
         }
@@ -107,37 +111,51 @@ export default {
     }
   },
   computed: {
-    tagSourceText () {
+    typeText () {
+      return function (id) {
+        const t = pluginBasicInfo.find(t => t.id === id)
+        return t ? t.type : 'Unknown Tag'
+      }
+    },
+    scheduleText () {
       return function (type) {
-        const t = knowledgeBaseSource.find(t => t.value === type)
+        return this.$t(pluginSchedule.always)
-        return t ? t.name : 'Unknown Tag'
       }
     },
     getIconUrl () {
-      return function (knowledgeId) {
+      return function (id) {
-        const basicInfo = builtInKnowledgeBaseBasicInfo.find(bi => bi.knowledgeId === knowledgeId)
+        const basicInfo = pluginBasicInfo.find(bi => bi.id === id)
         return basicInfo ? basicInfo.iconUrl : ''
       }
     },
     getDescription () {
-      return function (knowledgeId) {
+      return function (id) {
-        const basicInfo = builtInKnowledgeBaseBasicInfo.find(bi => bi.knowledgeId === knowledgeId)
+        const basicInfo = pluginBasicInfo.find(bi => bi.id === id)
         return basicInfo ? this.$t(basicInfo.desc) : '-'
       }
+    },
+    getName () {
+      return function (id) {
+        const basicInfo = pluginBasicInfo.find(bi => bi.id === id)
+        return basicInfo ? this.$t(basicInfo.name) : '-'
+      }
     }
   },
   methods: {
     statusChange (plugin) {
-      let status = plugin.status
+      let triggerStatus = plugin.triggerStatus
-      let statusUrl = status === 0 ? api.pluginStatusEnable : api.pluginStatusDisable
+      let statusUrl = triggerStatus === '1' ? api.pluginStatusEnable : api.pluginStatusDisable
-
+      statusUrl = statusUrl.replace('{{id}}', plugin.id)
-      axios.put(statusUrl,{id:plugin.id}).then(response => {
+      axios.post(statusUrl).then(response => {
         if (response.status === 200) {
           this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
         } else {
           this.$message.error(response.data.message)
         }
         this.$emit('reload')
+      }).catch(e => {
+        console.error(e)
+        this.$message.error(this.errorMsgHandler(e))
       })
     }
   }

src/utils/api.js

@@ -44,10 +44,10 @@ export const api = {
   updateKnowledgeUrl: apiVersion + '/knowledgeBase/items/batch',
   knowledgeBaseLog: apiVersion + '/knowledgeBase/audit/log',
   knowledgeBaseTimedistribution: apiVersion + '/knowledgeBase/{{knowledgeId}}/{{type}}/timedistribution',
-  //插件
+  // 插件
   pluginList: apiVersion + '/plugin/intelligence-learning/list',
-  pluginStatusEnable: apiVersion + '/plugin/intelligence-learning/{id}/start',
+  pluginStatusEnable: apiVersion + '/plugin/intelligence-learning/{{id}}/start',
-  pluginStatusDisable: apiVersion + '/plugin/intelligence-learning/{id}/stop',
+  pluginStatusDisable: apiVersion + '/plugin/intelligence-learning/{{id}}/stop',
 
   // 报告相关
   reportJob: '/report/job',

src/utils/constants.js

@@ -465,6 +465,10 @@ export const knowledgeSourceValue = {
   appTag: 'cn_app_tag_user_defined'
 }
 
+export const pluginSchedule = {
+  always: 'plugin.always'
+}
+
 export const knowledgeBaseSource = [
   {
     name: 'FQDN Category',
@@ -1881,6 +1885,23 @@ export const performanceMetricMapping = {
   'high dns response time': 'DNS Response Latency'
 }
 
+export const pluginBasicInfo = [
+  {
+    id: 108,
+    name: '',
+    type: '',
+    desc: '',
+    iconUrl: ''
+  },
+  {
+    id: 109,
+    name: 'Psiphon3 VPN',
+    type: 'ip',
+    desc: 'knowledgeBase.desc.psiphon3',
+    iconUrl: 'images/knowledge-base-logo/psiphon3-vpn.png'
+  }
+]
+
 export const builtInKnowledgeBaseBasicInfo = [
   {
     knowledgeId: 10,

src/views/system/Plugin.vue

@@ -1,28 +1,28 @@
 <template>
   <div style="height: 100%;">
     <cn-data-list
-      ref="dataList"
+            ref="dataList"
-      :tableId="tableId"
+            :tableId="tableId"
-      v-model:custom-table-title="tools.customTableTitle"
+            v-model:custom-table-title="tools.customTableTitle"
-      :api="url"
+            :api="url"
-      :from="fromRoute.plugin"
+            :from="fromRoute.plugin"
-      :layout="['columnCustomize','search']"
+            :layout="['columnCustomize','search']"
-      @search="search"
+            @search="search"
     >
       <template #default>
         <loading :loading="loading"></loading>
         <plugin-table
-          ref="dataTable"
+                ref="dataTable"
-          :api="url"
+                :api="url"
-          :isNoData="isNoData"
+                :isNoData="isNoData"
-          :custom-table-title="tools.customTableTitle"
+                :custom-table-title="tools.customTableTitle"
-          :height="mainTableHeight"
+                :height="mainTableHeight"
-          :table-data="tableData"
+                :table-data="tableData"
-          @delete="del"
+                @delete="del"
-          @edit="edit"
+                @edit="edit"
-          @orderBy="tableDataSort"
+                @orderBy="tableDataSort"
-          @reload="getTableData"
+                @reload="getTableData"
-          @selectionChange="selectionChange"
+                @selectionChange="selectionChange"
         />
       </template>
       <template #pagination>
@@ -32,77 +32,76 @@
   </div>
 </template>
 <script>
-import cnDataList from '@/components/table/CnDataList'
+  import cnDataList from '@/components/table/CnDataList'
-import dataListMixin from '@/mixins/data-list'
+  import dataListMixin from '@/mixins/data-list'
-import pluginTable from '@/components/table/system/PluginTable'
+  import pluginTable from '@/components/table/system/PluginTable'
-import { api } from '@/utils/api'
+  import { api } from '@/utils/api'
-import axios from 'axios'
+  import axios from 'axios'
 
-export default {
+  export default {
-  name: 'Plugin',
+    name: 'Plugin',
-  mixins: [dataListMixin],
+    mixins: [dataListMixin],
-  components: {
+    components: {
-    cnDataList,
+      cnDataList,
-    pluginTable
+      pluginTable
-  },
+    },
-  data () {
+    data () {
-    return {
+      return {
-      url: api.pluginList,
+        url: api.pluginList,
-      blankObject: { // 空白对象
+        blankObject: { // 空白对象
-        id: '',
+          id: '',
-        name: '',
+          name: '',
-        remark: '',
+          remark: '',
-        type: '',
+          type: '',
-        schedule: '',
+          schedule: '',
-        status: 1
+          status: 1
-      },
+        },
-      tableId: 'userTable'
+        tableId: 'userTable'
-    }
-  },
-  methods: {
-    getTableData (params, isAll, isClearType) {
-      if (isAll) {
-        this.searchLabel = null
-      } else if (isClearType) {
-        this.searchLabel.type = ''// 换新接口需要修改的属性名称
       }
-      if (params) {
+    },
-        this.searchLabel = { ...this.searchLabel, ...params }
+    methods: {
-      }
+      getTableData (params, isAll, isClearType) {
-      //this.searchLabel = { ...this.searchLabel, ...this.pageObj }
+        if (isAll) {
-      //this.searchLabel = {...this.searchLabel,jobGroup:3}
+          this.searchLabel = null
-      this.isNoData = false
+        } else if (isClearType) {
-      this.toggleLoading(true)
+          this.searchLabel.type = ''// 换新接口需要修改的属性名称
-      delete this.searchLabel.total
-      let listUrl = this.url
-      if (this.listUrl) {
-        listUrl = this.listUrl
-      }
-      //this.searchLabel.category = 'ai_tagging'
-      axios.get(listUrl, { params: this.searchLabel }).then(response => {
-        if (response.status === 200) {
-          for (let i = 0; i < response.data.data.list.length; i++) {
-            response.data.data.list[i].status = response.data.data.list[i].status + ''
-          }
-          this.tableData = response.data.data.list
-          this.pageObj.total = response.data.data.total
-        } else {
-          console.error(response.data)
-          this.isNoData = true
-          if (response.data.message) {
-            this.$message.error(response.data.message)
-          } else {
-            this.$message.error(this.$t('tip.somethingWentWrong'))
-          }
         }
-      }).finally(() => {
+        if (params) {
-        this.toggleLoading(false)
+          this.searchLabel = { ...this.searchLabel, ...params }
-        this.isNoData = !this.tableData || this.tableData.length === 0
+        }
-      })
+        //this.searchLabel = { ...this.searchLabel, ...this.pageObj }
+        this.searchLabel = {...this.searchLabel,jobGroup:3}
+        this.isNoData = false
+        this.toggleLoading(true)
+        delete this.searchLabel.total
+        let listUrl = this.url
+        if (this.listUrl) {
+          listUrl = this.listUrl
+        }
+        //this.searchLabel.category = 'ai_tagging'
+        axios.get(listUrl, { params: this.searchLabel }).then(response => {
+          if (response.status === 200) {
+            for (let i = 0; i < response.data.data.list.length; i++) {
+              response.data.data.list[i].triggerStatus = response.data.data.list[i].triggerStatus + ''
+            }
+            this.tableData = response.data.data.list
+          } else {
+            console.error(response.data)
+            this.isNoData = true
+            if (response.data.message) {
+              this.$message.error(response.data.message)
+            } else {
+              this.$message.error(this.$t('tip.somethingWentWrong'))
+            }
+          }
+        }).finally(() => {
+          this.toggleLoading(false)
+          this.isNoData = !this.tableData || this.tableData.length === 0
+        })
+      }
+    },
+    unmounted () {
+      this.isNoData = false
     }
-  },
-  unmounted () {
-    this.isNoData = false
   }
-}
 </script>