feat: CN-1592 UI 新增Tag检索界面:列表部分

2024-04-08 18:15:20 +08:00
parent 45ad8d15b5
commit 00fa65f011
9 changed files with 742 additions and 626 deletions
--- a/src/views/charts2/charts/options/echartOption.js
+++ b/src/views/charts2/charts/options/echartOption.js
@@ -797,3 +797,48 @@ export const entityDetailSubscriberTopApp = {
    }
  }]
 }
+
+export const tagLineChartOption = {
+  tooltip: {
+    trigger: 'axis',
+    className: 'echarts-tooltip echarts-tooltip-dark'
+  },
+  legend: {
+    show: true,
+    x: 'center',
+    y: 'bottom',
+    icon: 'circle',
+    itemGap: 50,
+    data: ['IP', 'Domain Name']
+  },
+  grid: {
+    top: '12%',
+    left: '1%',
+    right: '1%',
+    bottom: 30,
+    containLabel: true
+  },
+  xAxis: [
+    {
+      type: 'time',
+      axisLabel: {
+        formatter: xAxisTimeFormatter,
+        rich: xAxisTimeRich
+      }
+    }
+  ],
+  yAxis: [
+    {
+      type: 'value',
+      splitLine: {
+        show: false
+      },
+      axisLabel: {
+        // formatter: function (value) {
+        //   return unitConvert(value, unitTypes.number).join('')
+        // }
+      }
+    }
+  ],
+  series: []
+}
--- a/src/views/tag/Tag.vue
+++ b/src/views/tag/Tag.vue
@@ -6,25 +6,22 @@
          :tableId="tableId"
          v-model:custom-table-title="tools.customTableTitle"
          :api="url"
-          :from="fromRoute.builtinReport"
+          :from="fromRoute.tag"
          :layout="['search']"
          @search="search"
      >
        <template #top-tool-left>
          <button id="account-add"  class="top-tool-btn margin-r-10 top-tool-btn--create"
-                  v-if="hasPermission('createReport')"
                  @click="add">
            <i class="cn-icon-xinjian cn-icon"></i>
            <span>{{$t('overall.create')}}</span>
          </button>
          <button id="tag-edit"  class="top-tool-btn margin-r-10" :disabled="disableEdit"
-                  v-if="hasPermission('editReport')"
-                  @click="editReport">
+                  @click="editTag">
            <i class="cn-icon-edit cn-icon"></i>
            <span>{{$t('overall.edit')}}</span>
          </button>
          <button id="tag-delete"  class="top-tool-btn margin-r-10" :disabled="disableDelete"
-                  v-if="hasPermission('deleteReport')"
                  @click="delBatch">
            <i class="cn-icon-delete cn-icon"></i>
            <span>{{$t('overall.delete')}}</span>
@@ -33,9 +30,10 @@
                  key="intentSelect"
                  size="small"
                  v-model="intent"
-                  placeholder=" "
                  :teleported="false"
                  style="width:135px;margin-right:10px;"
+                  clearable
+                  placeholder="All"
                  @change="intentChange"
          >
            <template #prefix>
@@ -47,9 +45,10 @@
                  key="categorySelect"
                  size="small"
                  v-model="category"
-                  placeholder=" "
                  :teleported="false"
                  style="width:150px;margin-right:10px;"
+                  clearable
+                  placeholder="All"
                  @change="categoryChange"
          >
            <template #prefix>
@@ -60,20 +59,17 @@
        </template>
        <template #default>
          <loading :loading="loading"></loading>
-          <report-table
+          <tag-table
              ref="dataTable"
              :api="url"
              :isNoData="isNoData"
              :custom-table-title="tools.customTableTitle"
-              :category-list="builtinReportLeftMenu"
              :height="mainTableHeight"
              :table-data="tableData"
-              :category-id="builtinId"
              @delete="del"
              @edit="edit"
              @download="download"
              @preview="preview"
-              @orderBy="tableDataSort"
              @reload="getTableData"
              @selectionChange="selectionChange"
          />
@@ -82,111 +78,36 @@
          <pagination ref="pagination" :page-obj="pageObj" :tableData="tableData" :table-id="tableId" @pageNo='pageNo' @pageSize='pageSize'></pagination>
        </template>
      </cn-data-list>
-      <el-drawer
-          v-model="rightBox.show"
-          direction="rtl"
-          custom-class="common-right-box"
-          class="common-right-box"
-          :size="700"
-          :with-header="false"
-          destroy-on-close>
-        <report-box
-            :object="object"
-            :category-list="builtinReportLeftMenu"
-            :current-category-id="builtinId"
-            @close="closeRightBox"
-        />
-      </el-drawer>
    </div>
  </div>
 </template>

 <script>
 import axios from 'axios'
-import ReportTable from '@/components/table/report/ReportTable'
+import TagTable from '@/components/table/tag/TagTable'
 import cnDataList from '@/components/table/CnDataList'
 import dataListMixin from '@/mixins/data-list'
 import { api } from '@/utils/api'
-import { tagIntentOptions,tagCategoryOptions } from '@/utils/constants'
+import { tagIntentOptions, tagCategoryOptions } from '@/utils/constants'
 import { urlParamsHandler, overwriteUrl } from '@/utils/tools'
-import ReportBox from '@/components/rightBox/report/ReportBox'
 import Loading from '@/components/common/Loading'
 import { ref } from 'vue'
 import { useRoute } from 'vue-router'

 export default {
-  name: 'Report',
+  name: 'Tag',
  data () {
    return {
-      builtinReportLeftMenu: [], // 左侧列表菜单数据
      builtinColor: false,
-      // builtinId: '',
-      url: api.reportTemp,
+      url: api.tagList,
      tagIntentOptions,
      tagCategoryOptions,
-      blankObject: {
-        id: '',
-        name: '',
-        type: '',
-        source: 'session_record_cn',
-        cTime: '',
-        uTime: '',
-        remark: '',
-        config: {
-          isRepeat: 0,
-          isScheduler: 0,
-          cronExpression: '',
-          startTime: '',
-          endTime: '',
-          queryParam: {},
-          schedulerConfig: {
-            type: 'day',
-            weekDates: [],
-            months: [],
-            monthDates: [],
-            monthWeekDates: [],
-            interval: 1
-          },
-          timeConfig: {
-            type: 'yesterday',
-            offset: 1,
-            unit: 'hour'
-          }
-        },
-        schedulerStart: '',
-        schedulerEnd: '',
-        categoryId: '',
-        categoryParams: []
-      },
-      checkWeekListData: [
-        'report.sunday',
-        'report.monday',
-        'report.tuesday',
-        'report.wednesday',
-        'report.thursday',
-        'report.friday',
-        'report.saturday'
-      ],
-      checkMonthsListData: [
-        'report.january',
-        'report.february',
-        'report.march',
-        'report.april',
-        'report.may',
-        'report.june',
-        'report.july',
-        'report.august',
-        'report.september',
-        'report.october',
-        'report.november',
-        'report.december'
-      ],
-      tableId: 'reportTable',
+      tableId: 'tagTable',
      builtinLeftLoading: false,
-      // builtinRightLoading: false,
      isInit: true,
-      intent:'All',
-      category:'All',
+      intent: '',
+      category: '',
+      name: ''
    }
  },
  /**
@@ -194,11 +115,9 @@ export default {
   */
  setup () {
    const { query } = useRoute()
-    const builtinId = ref(parseInt(query.categoryId) || '')
    const urlPageNo = ref(parseInt(query.pageNo) || 1)

    return {
-      builtinId,
      urlPageNo
    }
  },
@@ -206,72 +125,103 @@ export default {
  components: {
    Loading,
    cnDataList,
-    ReportTable,
-    ReportBox
+    TagTable
  },
  mounted () {
    this.$nextTick(() => {
-      this.queryGetTempData()
+      this.getTableData()
    })
  },
  watch: {
-    builtinId (n) {
-      const { query } = this.$route
-      let newUrl = urlParamsHandler(window.location.href, query, {
-        categoryId: n,
-        pageNo: 1,
-        pageSize: 20
-      })
-
-      // 点击“全部”或者首次进入界面时，不显示左侧菜单栏参数
-      const newQuery = JSON.parse(JSON.stringify(query)) // 深拷贝路由数据
-
-      if (n === null) {
-        delete newQuery.categoryId
-      } else {
-        delete newQuery.startTime
-        delete newQuery.endTime
-        delete newQuery.expandId
-        delete newQuery.expandPage
-        delete newQuery.pageNo
-        delete newQuery.pageSize
-      }
-
-      newUrl = urlParamsHandler(window.location.href, query, newQuery, 'clean')
-
-      overwriteUrl(newUrl)
-    }
  },
  methods: {
    intentChange (value) {
-
+      let params = {}
+      if (value) {
+        params = { intent: value }
+      }
+      if (this.category) {
+        params = { ...params, category: this.category }
+      }
+      if (this.name) {
+        params = { ...params, name: this.name }
+      }
+      this.getTableData(params)
    },
    categoryChange (value) {
-
+      let params = {}
+      if (value) {
+        params = { category: value }
+      }
+      if (this.intent) {
+        params = { ...params, intent: this.intent }
+      }
+      if (this.name) {
+        params = { ...params, name: this.name }
+      }
+      this.getTableData(params)
    },
-    queryGetTempData () {
-      this.builtinLeftLoading = true
-      axios.get(api.reportCategory, { params: { pageSize: 999 } }).then(res => {
-        if (res.status === 200) {
-          this.builtinReportLeftMenu = res.data.data.list.map(c => {
-            return {
-              ...c,
-              config: c.config ? JSON.parse(c.config) : {}
+    search (params) {
+      if (this.intent) {
+        params = { ...params, intent: this.intent }
+      }
+      if (this.category) {
+        params = { ...params, category: this.category }
+      }
+      this.name = params.q
+      this.pageObj.pageNo = 1
+      this.getTableData(params)
+    },
+    delBatch () {
+      const ids = []
+      if (this.batchDeleteObjs && this.batchDeleteObjs.length > 0) {
+        this.batchDeleteObjs.forEach(item => {
+          ids.push(item.id)
+        })
+      }
+      if (ids.length === 0) {
+        this.$alert(this.$t('tip.pleaseSelect'), {
+          confirmButtonText: this.$t('tip.yes'),
+          type: 'warning'
+        }).catch(() => {})
+      } else {
+        this.$confirm(this.$t('tip.confirmDelete'), {
+          confirmButtonText: this.$t('tip.yes'),
+          cancelButtonText: this.$t('tip.no'),
+          type: 'warning'
+        }).then(() => {
+          this.toggleLoading(true)
+          axios.delete(api.tagDelete + ids).then(response => {
+            if (response.status === 200) {
+              this.delFlag = true
+              this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
+              let params = null
+              if (this.intent) {
+                params = { intent: this.intent }
+              }
+              if (this.category) {
+                params = { ...params, category: this.category }
+              }
+              if (this.name) {
+                params = { ...params, name: this.name }
+              }
+              this.getTableData(params)
+            } else {
+              this.$message.error(response.data.message)
            }
+          }).catch(e => {
+            this.$message.error(e.response.data.message)
+          }).finally(() => {
+            this.toggleLoading(false)
          })
-
-          if (this.builtinId !== '') {
-            this.builtinTabs(this.builtinId, 'init')
-          } else {
-            this.getTableData()
+        }).finally(() => {
+          if (this.isSelectedStatus !== undefined) {
+            this.isSelectedStatus = false
+            this.disableDelete = true
+            this.batchDeleteObjs = []
          }
-        }
-        this.builtinLeftLoading = false
-      })
-    },
-    tableDataSort (orderBy) {
-      this.searchLabel.orderBy = orderBy
-      this.getTableData(this.searchLabel)
+        })
+      }
    },
    getTableData (params) {
      this.searchLabel = null
@@ -279,28 +229,17 @@ export default {
        this.searchLabel = { ...this.searchLabel, ...params }
      }
      this.searchLabel = { ...this.searchLabel, ...this.pageObj }
-      // this.tools.loading = true
-      // this.builtinRightLoading = true
-      // this.loading = true
      this.isNoData = false
-      // this.tableData = []
      this.toggleLoading(true)
-      delete this.searchLabel.total
+      // delete this.searchLabel.total
      let listUrl = this.url
      if (this.listUrl) {
        listUrl = this.listUrl
      }

-      if (this.builtinId !== '') {
-        this.searchLabel.categoryId = this.builtinId
-      }
-
      if (!this.isInit) {
        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.$nextTick(() => {
              this.tableData = response.data.data.list.map(item => {
                return {
@@ -321,23 +260,12 @@ export default {
      }
      this.isInit = false
    },
-    /**
-     * 点击左侧tab页
-     */
-    builtinTabs (id, flag) {
-      this.builtinId = id
-      if (flag === undefined) {
-        this.pageObj.pageNo = 1
-        this.pageObj.pageSize = 20
-      }
-      this.getTableData({ categoryId: id })
-    },
    edit (u) {
      this.initConfig(u)
      this.object = u
      this.rightBox.show = true
    },
-    editReport () {
+    editTag () {
      if (this.batchDeleteObjs.length === 0) {
        this.$alert(this.$t('tip.pleaseSelectForEdit'), {
          confirmButtonText: this.$t('tip.yes'),