feat:endpoint 复用详细视图

2021-10-19 10:55:54 +08:00
parent c4183fddbf
commit 0d6ca0015a
4 changed files with 397 additions and 40 deletions
--- a/nezha-fronted/src/components/common/detailView/list/endpoint/endpointDetail.vue
+++ b/nezha-fronted/src/components/common/detailView/list/endpoint/endpointDetail.vue
@@ -0,0 +1,221 @@
+<template>
+  <div class="detail-left-box">
+    <div class="order-box">
+      <el-select v-model="orderBy" size="small" :placeholder="$t('asset.detail.orderBy')" popper-class="right-box-select-top" class="detail-select">
+        <el-option
+          v-for="item in tableTitle"
+          v-if="item.sortable==='custom'"
+          :key="item.prop"
+          :label="$t('asset.detail.orderByLabel',{label:item.label})"
+          :value="item.prop">
+          {{item.label}}
+        </el-option>
+      </el-select>
+      <button @click="orderTypeChange" size="small" class="detail-button top-tool-btn table-column-setting margin-l-10">
+        <i class="nz-icon nz-icon-arrow-up1" v-if="orderType=='ascending'" />
+        <i class="nz-icon nz-icon-arrow-down2" v-if="orderType=='descending'" />
+      </button>
+    </div>
+    <ul class="detail-row-box" ref="dataTable">
+      <li
+        v-for="(item,index) in tableData"
+        :key="index"
+        class="detail-row"
+        :class="item.id === detailViewRightObj.id ? 'selected' : ''"
+        @click="detailViewRightShow(item)"
+        @mouseenter="labelHover(item, 'endpoint', true, $event)"
+        @mouseleave="labelHover(item, 'endpoint', false)">
+        <div class="detail-row-info">
+          <div class="asset-manageIp">
+            {{item.name}}
+          </div>
+          <div class="asset-name" :title="item.manageIp">{{item.asset?item.asset.manageIp:''}}</div>
+        </div>
+        <alertLabel
+          v-if="item && item.loading"
+          :id="item.id"
+          :that="item"
+          :type="'endpoint'"
+        ></alertLabel>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+
+import detailViewLeftMixin from '@/components/common/mixin/detailViewLeftMixin'
+import alertLabel from '@/components/common/alert/alertLabel'
+export default {
+  name: 'endpointDetail',
+  mixins: [detailViewLeftMixin],
+  components: {
+    alertLabel
+  },
+  data () {
+    return {
+      tableTitle: [ // 原始table列
+        {
+          label: 'ID',
+          prop: 'id',
+          show: true,
+          width: 80,
+          sortable: 'custom'
+        }, {
+          label: this.$t('project.endpoint.name'),
+          prop: 'name',
+          show: true,
+          minWidth: 200,
+          sortable: 'custom'
+        }, {
+          label: this.$t('project.project.projectName'),
+          prop: 'project',
+          show: true,
+          minWidth: 100,
+          sortable: 'custom'
+        },
+        {
+          label: this.$t('project.endpoint.asset'),
+          prop: 'asset',
+          show: true,
+          minWidth: 90,
+          sortable: 'custom'
+        },
+        {
+          label: this.$t('project.module.module'),
+          prop: 'module',
+          show: true
+        },
+        {
+          label: this.$t('project.endpoint.configs'),
+          prop: 'configs',
+          minWidth: 150,
+          show: false
+        },
+        {
+          label: this.$t('project.endpoint.alerts'),
+          prop: 'alerts',
+          show: true,
+          minWidth: 150,
+          sortable: 'custom'
+        },
+        {
+          label: this.$t('project.endpoint.state'),
+          prop: 'state',
+          show: true,
+          minWidth: 200,
+          sortable: 'custom'
+        }
+        // {
+        //   label: this.$t('project.endpoint.status'),
+        //   prop: 'enabled',
+        //   show: false
+        // }
+      ]
+    }
+  },
+  methods: {
+    // label 鼠标划入
+    labelHover (item, type, loading, e) {
+      if (e) {
+        const dom = e.currentTarget
+        const position = dom.getBoundingClientRect()
+        this.$set(item, 'position', position)
+      }
+      this.$set(item, 'loading', loading)
+      // this.$set(this.tableData,index,item);// 调用父组件
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .order-box{
+    display: flex;
+    height:40px;
+    padding: 0 15px;
+    line-height: 40px;
+    align-items: center;
+    /*.detail-select{*/
+    /*  height: 30px;*/
+    /*  line-height: 30px;*/
+    /*  flex: 1;*/
+    /*  /deep/ .el-input--small{*/
+    /*    height: 30px;*/
+    /*    line-height: 30px;*/
+    /*    background-color: rgba(9,30,66,0.08);*/
+    /*    border: none;*/
+    /*    color: #344563;*/
+    /*    input{*/
+    /*      height: 30px;*/
+    /*      line-height: 30px;*/
+    /*      background-color: rgba(9,30,66,0.08);*/
+    /*      border: none;*/
+    /*      color: #344563;*/
+    /*    }*/
+    /*  }*/
+    /*}*/
+    /*.detail-select:hover{*/
+    /*  /deep/ .el-input--small{*/
+    /*    input{*/
+    /*      background-color: rgba(9,30,66,0.13);*/
+    /*    }*/
+    /*  }*/
+    /*}*/
+    /*.detail-button{*/
+    /*  height: 28px;*/
+    /*  line-height: 28px;*/
+    /*  background-color: rgba(9,30,66,0.08);*/
+    /*  border: none;*/
+    /*  .nz-icon{*/
+    /*    color: #344563;*/
+    /*  }*/
+    /*}*/
+    /*.detail-button:hover{*/
+    /*  background-color: rgba(9,30,66,0.13);*/
+    /*}*/
+  }
+  .detail-row-box{
+    height: calc(100% - 40px);
+    overflow: hidden;
+    overflow-y: auto;
+  }
+  .detail-row{
+    width: 245px;
+    padding: 0px 0 0px 15px;
+    height: 60px;
+    border-bottom: 1px solid #E7EAED;
+    cursor: pointer;
+  }
+  .detail-row:last-of-type{
+    border-bottom: none
+  }
+  .detail-row-info{
+    display: flex;
+    height: 100%;
+    width: calc(100% - 15px);
+    justify-content:center;
+    flex-direction: column;
+    > div{
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  .asset-manageIp{
+    font-size: 16px;
+    color: #333333;
+    font-weight: 400;
+  }
+    .asset-name {
+      padding-left: 22px;
+      width: calc(100% - 22px);
+      font-size: 14px;
+      color: #999999;
+      font-weight: 400;
+    }
+  }
+  .selected{
+    background: #FFFBF6;
+  }
+</style>
--- a/nezha-fronted/src/components/common/detailView/view/detailViewRight.vue
+++ b/nezha-fronted/src/components/common/detailView/view/detailViewRight.vue
@@ -103,6 +103,8 @@ export default {
      handler (n) {
        if (n === fromRoute.asset) {
          this.targetTab = 'panelTab'
+        } else if (n === fromRoute.endpoint) {
+          this.targetTab = 'panelTab'
        }
      }
    },
--- a/nezha-fronted/src/components/common/mixin/detailViewMixin.js
+++ b/nezha-fronted/src/components/common/mixin/detailViewMixin.js
@@ -22,41 +22,14 @@ export default {
      let dataList = ''
      localStorage.setItem('detail-view-' + this.tableId, this.detailType)
      if (this.detailType === 'view') {
-        // modelIdsDetail
        dataList = 'detailList'
-        this.selectValue.modelIdsDetail = []
-        this.selectValue.modelIds.forEach(modelId => {
-          this.titleSearchList.model.children.forEach(model => {
-            const brand = model.children.find(children => modelId == children.id)
-            if (brand) {
-              this.selectValue.modelIdsDetail.push(brand.brandId + '-' + modelId)
-            }
-          })
-        })
-        this.selectValue.fieldsDetail = []
-        if (this.selectValue.fields) {
-          const obj = JSON.parse(this.selectValue.fields)
-          Object.keys(obj).forEach(key => {
-            obj[key].forEach(item => {
-              this.selectValue.fieldsDetail.push(key + '-' + item)
-            })
-          })
+        if (this.from === this.fromRoute.asset) {
+          this.setAsset(true)
        }
      } else {
        dataList = 'dataList'
-        const obj = {}
-        this.selectValue.modelIds = this.selectValue.modelIdsDetail.map(item => item.split('-')[1])
-        this.selectValue.fieldsDetail.forEach(item => {
-          const arr = item.split('-')
-          if (obj[arr[0]]) {
-            obj[arr[0]].push(arr[1])
-          } else {
-            obj[arr[0]] = [arr[1]]
-          }
-        })
-        this.selectValue.fields = JSON.stringify(obj)
-        if (this.selectValue.fields === '{}') {
-          this.selectValue.fields = ''
+        if (this.from === this.fromRoute.asset) {
+          this.setAsset(false)
        }
      }
      setTimeout(() => {
@@ -99,6 +72,43 @@ export default {
        this.orderBy = '-' + order
      }
      this.getTableData()
+    },
+    setAsset (flag) {
+      if (flag) {
+        this.selectValue.modelIdsDetail = []
+        this.selectValue.modelIds.forEach(modelId => {
+          this.titleSearchList.model.children.forEach(model => {
+            const brand = model.children.find(children => modelId == children.id)
+            if (brand) {
+              this.selectValue.modelIdsDetail.push(brand.brandId + '-' + modelId)
+            }
+          })
+        })
+        this.selectValue.fieldsDetail = []
+        if (this.selectValue.fields) {
+          const obj = JSON.parse(this.selectValue.fields)
+          Object.keys(obj).forEach(key => {
+            obj[key].forEach(item => {
+              this.selectValue.fieldsDetail.push(key + '-' + item)
+            })
+          })
+        }
+      } else {
+        const obj = {}
+        this.selectValue.modelIds = this.selectValue.modelIdsDetail.map(item => item.split('-')[1])
+        this.selectValue.fieldsDetail.forEach(item => {
+          const arr = item.split('-')
+          if (obj[arr[0]]) {
+            obj[arr[0]].push(arr[1])
+          } else {
+            obj[arr[0]] = [arr[1]]
+          }
+        })
+        this.selectValue.fields = JSON.stringify(obj)
+        if (this.selectValue.fields === '{}') {
+          this.selectValue.fields = ''
+        }
+      }
    }
  }
 }
--- a/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
+++ b/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
@@ -1,7 +1,78 @@
 <template>
  <div>
+    <nzDetailView
+      v-loading="detailViewLoading || tools.loading"
+      v-if="detailType !== 'list'"
+      :api="url"
+      ref="detailList"
+      :layout="dataListLayout"
+      :from="fromRoute.endpoint"
+      :search-msg="searchMsg"
+      :detailType="detailType"
+      :detailViewRightObj="detailViewRightObj"
+      :dataLength="tableData.length"
+      @search="search"
+      @changeDetailType="changeDetailType"
+    >
+      <template v-slot:top-tool-left>
+        <detailViewTopSearch :selectValue.sync="selectValue" :detailSearchList="detailSearchList" @reload="reloadTable" />
+      </template>
+      <template v-slot:top-tool-right>
+        <button id="asset-create-asset" v-has="'asset_add'" :title="$t('overall.createAsset')" class="top-tool-btn" @click.stop="add">
+          <i class="nz-icon nz-icon-create-square"></i>
+        </button>
+        <top-tool-more-options
+          ref="export"
+          id="model"
+          :params="searchLabel"
+          :params2="searchCheckBox"
+          :permissions="{
+                  import: 'asset_add',
+                  export: 'asset_view'
+                }"
+          class="top-tool-export margin-l-10 margin-r-10"
+          export-file-name="asset"
+          export-url="/asset/asset/export"
+          import-url="/asset/asset/import"
+          @afterImport="getTableData"
+        >
+        </top-tool-more-options>
+      </template>
+      <template v-slot:nz-detail-view-list>
+        <endpoint-detail
+          class="data-detail"
+          ref="dataDetail"
+          :orderByFa="orderBy"
+          v-loading="tools.loading"
+          :detailViewRightObj="detailViewRightObj"
+          :api="url"
+          :table-data="tableData"
+          @detailViewRightShow = 'detailViewRightShow'
+          @orderDetail="orderDetail"
+        >
+        </endpoint-detail>
+      </template>
+      <!-- 分页组件 -->
+      <template v-slot:pagination>
+        <el-pagination
+          @current-change="pageNo"
+          :current-page.sync="pageObj.pageNo"
+          :page-size="20"
+          :total="pageObj.total"
+          layout="prev, slot, next"
+          small
+        >
+          <template>
+            <el-input-number ref="jumpInput" v-model="pageObj.pageNo" :controls="false" :min="1" :max="pageObj.pages" class="jump-input" @change="getTableData" @keyup.enter.native="getTableData" size="mini"/>
+            <span class="jump-pages">/&nbsp{{pageObj.pages}}</span>
+          </template>
+        </el-pagination>
+      </template>
+    </nzDetailView>
    <nz-data-list
+      v-loading="detailViewLoading"
      ref="dataList"
+      v-show="detailType === 'list'"
      :api="url"
      :custom-table-title.sync="tools.customTableTitle"
      :from="fromRoute.endpoint"
@@ -9,6 +80,8 @@
      :search-msg="searchMsg"
      :nz-table-height-offset="endpointNzTableHeightOffset"
      @search="search"
+      :detailType="detailType"
+      @changeDetailType="changeDetailType"
      @getTableData="getTableData"
    >
      <template v-slot:top-tool-right>
@@ -140,6 +213,10 @@ import batchAddEndpoint from '@/components/common/rightBox/batchAddEndpoint'
 import clickSearch from '@/components/common/labelFilter/clickSearch'
 import topToolMoreOptions from '@/components/common/popBox/topToolMoreOptions'
 import alertSilenceBox from '@/components/common/rightBox/alertSilenceBox'
+import nzDetailView from '@/components/common/detailView/nzDetailView'
+import detailViewMixin from '@/components/common/mixin/detailViewMixin'
+import endpointDetail from '@/components/common/detailView/list/endpoint/endpointDetail'
+import detailViewTopSearch from '@/components/common/detailView/detailViewTopSearch'

 export default {
  name: 'endpointList',
@@ -153,9 +230,12 @@ export default {
    batchModifyEndpoint,
    topToolMoreOptions,
    alertSilenceBox,
-    batchAddEndpoint
+    batchAddEndpoint,
+    nzDetailView,
+    endpointDetail,
+    detailViewTopSearch
  },
-  mixins: [dataListMixin],
+  mixins: [dataListMixin, detailViewMixin],
  data () {
    return {
      url: 'monitor/endpoint',
@@ -236,7 +316,7 @@ export default {
      tableId: 'endpointTable',
      queryPermission: 'account_view',
      endpointTableHeight: 'calc(100% - 244px)', // 主列表table高度
-      dataListLayout: ['searchInput', 'elementSet', 'clickSearch', 'pagination'],
+      dataListLayout: ['searchInput', 'elementSet', 'clickSearch', 'pagination', 'detailViewSet'],
      searchMsg: { // 给搜索框子组件传递的信息
        zheze_none: true,
        searchLabelList: [
@@ -310,6 +390,48 @@ export default {
        //   index: -1
        // }
      },
+      detailSearchList: {
+        project: {
+          label: 'Project',
+          key: 'projectIds',
+          type: 'checkBox',
+          children: [],
+          show: false,
+          showMore: false,
+          width: 0,
+          index: -1
+        },
+        module: {
+          label: 'Module',
+          key: 'moduleIds',
+          type: 'checkBox',
+          children: [],
+          show: false,
+          showMore: false,
+          width: 0,
+          index: -1
+        },
+        state: {
+          label: 'State',
+          key: 'state',
+          type: 'dropdownCheckBox',
+          children: [],
+          show: false,
+          showMore: false,
+          width: 0,
+          index: -1
+        }
+        // type: {
+        //   label: 'Type',
+        //   key: 'type',
+        //   type: 'checkBox',
+        //   children: [],
+        //   show: false,
+        //   showMore: false,
+        //   width: 0,
+        //   index: -1
+        // }
+      },
      selectValue: {
        projectIds: [],
        moduleIds: [],
@@ -446,13 +568,13 @@ export default {
    getTableData () {
      if (this.orderBy) {
        this.$set(this.searchLabel, 'orderBy', this.orderBy)
+      } else {
+        delete this.searchLabel.orderBy
      }
      this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
      this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
      if (this.$route.path === '/monitor/endpoint' && !this.titleSearchList.project.children.length) {
        this.$set(this.searchLabel, 'statistics', 1)
-      } else {
-        delete this.searchLabel.statistics
      }
      const params = {
        ...this.searchLabel,
@@ -472,7 +594,9 @@ export default {
            })
          }
          this.tableData = response.data.list
+          this.detailViewRightObj = this.tableData[0]
          this.pageObj.total = response.data.total
+          this.pageObj.pages = response.data.pages
          if (!this.scrollbarWrap) {
            this.$nextTick(() => {
              this.scrollbarWrap = this.$refs.dataTable.$refs.dataTable.bodyWrapper
@@ -549,16 +673,16 @@ export default {
        if (key === 'state') {
          this.getSearchableStateData(statistics[keys]).then(res => {
            this.titleSearchList.state.children = res
-            // this.detailSearchList.state.children = res
+            this.detailSearchList.state.children = res
            this.titleSearchList.state.show = true
-            // this.detailSearchList.state.show = true
+            this.detailSearchList.state.show = true
          })
        } else {
          this.titleSearchList[key].children = statistics[keys].map(d => { return { ...d, value: d.id, key: d.name, name: d.name } })
-          // this.detailSearchList[key].children = statistics[keys].map(d => { return { ...d, value: d.id } })
+          this.detailSearchList[key].children = statistics[keys].map(d => { return { ...d, value: d.id, key: d.name, name: d.name } })
        }
        this.titleSearchList[key].show = true
-        // this.detailSearchList[key].show = true
+        this.detailSearchList[key].show = true
      })
    },
    batchModify () {