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

2024-01-09 11:10:28 +08:00
parent 2661b5e69d
commit f4bf9a1f31
4 changed files with 146 additions and 108 deletions
--- a/src/components/table/system/PluginTable.vue
+++ b/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>
-            {{scope.row[item.prop] || '-'}}
+            <div class="icon-background"><img class="plugin-name-icon" :src="getIconUrl(scope.row['id'])"/></div>
+            {{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 t ? t.name : 'Unknown Tag'
+        return this.$t(pluginSchedule.always)
      }
    },
    getIconUrl () {
-      return function (knowledgeId) {
-        const basicInfo = builtInKnowledgeBaseBasicInfo.find(bi => bi.knowledgeId === knowledgeId)
+      return function (id) {
+        const basicInfo = pluginBasicInfo.find(bi => bi.id === id)
        return basicInfo ? basicInfo.iconUrl : ''
      }
    },
    getDescription () {
-      return function (knowledgeId) {
-        const basicInfo = builtInKnowledgeBaseBasicInfo.find(bi => bi.knowledgeId === knowledgeId)
+      return function (id) {
+        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 statusUrl = status === 0 ? api.pluginStatusEnable : api.pluginStatusDisable
-
-      axios.put(statusUrl,{id:plugin.id}).then(response => {
+      let triggerStatus = plugin.triggerStatus
+      let statusUrl = triggerStatus === '1' ? api.pluginStatusEnable : api.pluginStatusDisable
+      statusUrl = statusUrl.replace('{{id}}', plugin.id)
+      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))
      })
    }
  }
--- a/src/utils/api.js
+++ b/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',
-  pluginStatusDisable: apiVersion + '/plugin/intelligence-learning/{id}/stop',
+  pluginStatusEnable: apiVersion + '/plugin/intelligence-learning/{{id}}/start',
+  pluginStatusDisable: apiVersion + '/plugin/intelligence-learning/{{id}}/stop',

  // 报告相关
  reportJob: '/report/job',
--- a/src/utils/constants.js
+++ b/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,
--- a/src/views/system/Plugin.vue
+++ b/src/views/system/Plugin.vue
@@ -1,28 +1,28 @@
 <template>
  <div style="height: 100%;">
    <cn-data-list
-      ref="dataList"
-      :tableId="tableId"
-      v-model:custom-table-title="tools.customTableTitle"
-      :api="url"
-      :from="fromRoute.plugin"
-      :layout="['columnCustomize','search']"
-      @search="search"
+            ref="dataList"
+            :tableId="tableId"
+            v-model:custom-table-title="tools.customTableTitle"
+            :api="url"
+            :from="fromRoute.plugin"
+            :layout="['columnCustomize','search']"
+            @search="search"
    >
      <template #default>
        <loading :loading="loading"></loading>
        <plugin-table
-          ref="dataTable"
-          :api="url"
-          :isNoData="isNoData"
-          :custom-table-title="tools.customTableTitle"
-          :height="mainTableHeight"
-          :table-data="tableData"
-          @delete="del"
-          @edit="edit"
-          @orderBy="tableDataSort"
-          @reload="getTableData"
-          @selectionChange="selectionChange"
+                ref="dataTable"
+                :api="url"
+                :isNoData="isNoData"
+                :custom-table-title="tools.customTableTitle"
+                :height="mainTableHeight"
+                :table-data="tableData"
+                @delete="del"
+                @edit="edit"
+                @orderBy="tableDataSort"
+                @reload="getTableData"
+                @selectionChange="selectionChange"
        />
      </template>
      <template #pagination>
@@ -32,77 +32,76 @@
  </div>
 </template>
 <script>
-import cnDataList from '@/components/table/CnDataList'
-import dataListMixin from '@/mixins/data-list'
-import pluginTable from '@/components/table/system/PluginTable'
-import { api } from '@/utils/api'
-import axios from 'axios'
+  import cnDataList from '@/components/table/CnDataList'
+  import dataListMixin from '@/mixins/data-list'
+  import pluginTable from '@/components/table/system/PluginTable'
+  import { api } from '@/utils/api'
+  import axios from 'axios'

-export default {
-  name: 'Plugin',
-  mixins: [dataListMixin],
-  components: {
-    cnDataList,
-    pluginTable
-  },
-  data () {
-    return {
-      url: api.pluginList,
-      blankObject: { // 空白对象
-        id: '',
-        name: '',
-        remark: '',
-        type: '',
-        schedule: '',
-        status: 1
-      },
-      tableId: 'userTable'
-    }
-  },
-  methods: {
-    getTableData (params, isAll, isClearType) {
-      if (isAll) {
-        this.searchLabel = null
-      } else if (isClearType) {
-        this.searchLabel.type = ''// 换新接口需要修改的属性名称
+  export default {
+    name: 'Plugin',
+    mixins: [dataListMixin],
+    components: {
+      cnDataList,
+      pluginTable
+    },
+    data () {
+      return {
+        url: api.pluginList,
+        blankObject: { // 空白对象
+          id: '',
+          name: '',
+          remark: '',
+          type: '',
+          schedule: '',
+          status: 1
+        },
+        tableId: 'userTable'
      }
-      if (params) {
-        this.searchLabel = { ...this.searchLabel, ...params }
-      }
-      //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].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'))
-          }
+    },
+    methods: {
+      getTableData (params, isAll, isClearType) {
+        if (isAll) {
+          this.searchLabel = null
+        } else if (isClearType) {
+          this.searchLabel.type = ''// 换新接口需要修改的属性名称
        }
-      }).finally(() => {
-        this.toggleLoading(false)
-        this.isNoData = !this.tableData || this.tableData.length === 0
-      })
+        if (params) {
+          this.searchLabel = { ...this.searchLabel, ...params }
+        }
+        //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>