feat： asset详细视图切换部分以及左侧菜单部分的添加

2021-10-09 16:47:38 +08:00
parent 0e3f7dad19
commit 46930a8878
9 changed files with 496 additions and 7 deletions
--- a/nezha-fronted/src/components/common/detailView/detailView.scss
+++ b/nezha-fronted/src/components/common/detailView/detailView.scss
@@ -0,0 +1,57 @@
+.nz-detail-view{
+  width: 100%;
+  height: calc(100% - 60px);
+  display: flex;
+  .nz-detail-view-left{
+    width: 260px;
+    display: flex;
+    flex-direction: column;
+    margin: 0 10px 10px 20px;
+    height: calc(100% - 12px);
+    border: 1px solid #E7EAED;
+    /deep/ .data-detail {
+      flex: 1;
+    }
+    .nz-detail-view-pagination {
+      height: 30px;
+      text-align: center;
+      margin-bottom: 10px;
+      margin-top: 10px;
+    }
+  }
+  /deep/ .el-pagination .btn-next,  /deep/ .el-pagination .btn-prev {
+    border: none;
+    background: none;
+    padding: 0;
+    vertical-align: middle;
+    height: 100%;
+    margin-top: 0;
+    .el-icon{
+      background: #fff;
+      height: 100%;
+      font-size: 22px;
+    }
+  }
+  /deep/ .jump-input {
+    width: 40px;
+    vertical-align: middle;
+    .el-input__inner {
+      padding: 0 5px;
+      height: 24px;
+      line-height: 24px;
+      text-align: center;
+    }
+  }
+
+  /deep/ .jump-pages {
+    padding-left: 9px;
+    font-size: 14px;
+    color: #666666;
+    vertical-align: middle;
+  }
+}
+.list-page div.main-container{
+  height: calc(100% - 20px);
+
+  width: calc(100% - 20px);
+}
--- a/nezha-fronted/src/components/common/detailView/list/asset/assetDetail.vue
+++ b/nezha-fronted/src/components/common/detailView/list/asset/assetDetail.vue
@@ -0,0 +1,71 @@
+<template>
+  <ul class="detail-row-box">
+    <li v-for="(item,index) in tableData" :key="index" class="detail-row" @click="detailViewRightShow(item)">
+      <div class="detail-row-info">
+        <div class="asset-manageIp">
+          <el-popover :content="$t('asset.assetStatPre')+(item.pingInfo.lastUpdate?utcTimeToTimezoneStr(item.pingInfo.lastUpdate):$t('asset.assetStatDown'))" v-if="item.pingInfo" placement="right" trigger="hover">
+          <span slot="reference">
+            <span :class="{'active-icon green-bg':item.pingInfo.status == 1,'active-icon red-bg':item.pingInfo.status == 0}"></span>
+          </span>
+        </el-popover>
+          {{item.manageIp}}
+        </div>
+        <div class="asset-name">{{item.name}}</div>
+      </div>
+    </li>
+  </ul>
+</template>
+
+<script>
+
+import detailViewLeftMixin from '@/components/common/mixin/detailViewLeftMixin'
+
+export default {
+  name: 'assetDetail',
+  mixins: [detailViewLeftMixin],
+  methods: {
+    detailViewRightShow (item) {
+      this.$emit('detailViewRightShow')
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .detail-row-box{
+    /*height: 100%;*/
+    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%;
+    justify-content:center;
+    flex-direction: column;
+    > div{
+      width: 100%;
+    }
+  .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;
+    }
+  }
+</style>
--- a/nezha-fronted/src/components/common/detailView/nzDetailView.vue
+++ b/nezha-fronted/src/components/common/detailView/nzDetailView.vue
@@ -0,0 +1,161 @@
+<template>
+  <div :class="from" class="list-page">
+    <!-- 主页面 -->
+    <div class="main-list">
+      <!-- 顶部工具栏 -->
+      <div class="main-modal"></div>
+      <div class="main-container">
+        <div  class="top-tools">
+          <div class="top-tool-left" style="min-width: 300px">
+            <slot name="top-tool-left"></slot>
+          </div>
+          <div :class="{'top-tool-main-right-to-left': bottomBox.showSubList}" class="top-tool-right">
+            <slot name="top-tool-right"></slot>
+            <el-dropdown
+              type="primary"
+              v-if="showLayout.indexOf('detailViewSet') > -1"
+              class="margin-l-10"
+              @command="changeDetailType">
+              <i class="nz-icon nz-icon-alert-list" />
+              <el-dropdown-menu slot="dropdown" >
+                <el-dropdown-item :command="'list'">列表</el-dropdown-item>
+                <el-dropdown-item :command="'view'">详细</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </div>
+          <!-- 顶部分页组件，当打开底部上滑框时出现 -->
+          <!-- <div v-if="showLayout.indexOf('pagination') > -1" class="pagination-top pagination-top-hide display-none"></div>-->
+        </div>
+        <div :style="{ height: nzTableHeight }" class="nz-detail-view">
+          <div class="nz-detail-view-left">
+            <slot name="nz-detail-view-list"></slot>
+            <div v-if="showLayout.indexOf('pagination') > -1" class="nz-detail-view-pagination">
+              <slot name="pagination"></slot>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { fromRoute } from '@/components/common/js/constants'
+import { bottomBoxWindow } from '@/components/common/js/tools'
+
+export default {
+  name: 'nzDataList',
+  components: {
+
+  },
+  props: {
+    from: {
+      type: String,
+      default: ''
+    },
+    tableTitle: {
+      type: Array
+    },
+    detailType: {
+      type: String,
+      default: ''
+    },
+    customTableTitle: {
+      type: Array
+    },
+    layout: {
+      type: Array,
+      default () { return [] }
+    },
+    searchMsg: {
+      type: Object
+    },
+    nzTableHeightOffset: Number,
+    searchRight: Boolean,
+    operationRecord: Boolean
+  },
+  computed: {
+    nzTableHeight () {
+      if (this.nzTableHeightOffset) {
+        if (this.layout.indexOf('clickSearch') > -1) {
+          return `calc(100% - ${this.nzTableHeightOffset}px`
+        }
+      }
+      return ''
+    }
+  },
+  data () {
+    return {
+      fromRoute: fromRoute,
+      /* 二级页面相关 */
+      bottomBox: {
+        object: {},
+        mainResizeShow: true, // dom高度改变时是否展示|隐藏
+        subResizeShow: true,
+        isFullScreen: false, // 全屏状态
+        showSubList: false, // 是否显示二级列表
+        targetTab: '', // 显示二级列表中的哪个页签
+        inTransform: false // 搜索框相关，搜索条件下拉框是否在transform里
+      },
+      tools: {
+        toTopBtnTop: this.$tableHeight.toTopBtnTop, // to-top按钮的top属性
+        tableHover: false, // 控制滚动条和top按钮同时出现
+        showCustomTableTitle: false // 自定义列弹框是否显示
+      },
+      showLayout: []
+    }
+  },
+  methods: {
+    updateCustomTableTitle (custom) {
+      this.$emit('update:customTableTitle', custom)
+    },
+    // 全屏
+    fullScreen () {
+      const vm = this
+      bottomBoxWindow.fullScreen(vm)
+    },
+    // 退出全屏
+    exitFullScreen () {
+      const vm = this
+      bottomBoxWindow.exitFullScreen(vm)
+    },
+    // 鼠标拖动二级列表
+    listResize (e) {
+      const vm = this
+      bottomBoxWindow.listResize(vm, e)
+    },
+    showBottomBox (targetTab, row) {
+      this.bottomBox.targetTab = targetTab
+      this.bottomBox.object = JSON.parse(JSON.stringify(row))
+      this.bottomBox.showSubList = true
+    },
+    search (searchObj) {
+      this.$emit('search', searchObj)
+    },
+    getDetail () {
+      this.$emit('getDetail')
+    },
+    changeDetailType (item) {
+      console.log(item)
+      this.$emit('changeDetailType', item)
+    }
+  },
+  watch: {
+    'bottomBox.showSubList': function (n) {
+      const vm = this
+      bottomBoxWindow.showSubListWatch(vm, n)
+    },
+    layout: {
+      immediate: true,
+      deep: true,
+      handler (n) {
+        console.log(n)
+        this.showLayout = [...n]
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  @import './detailView.scss';
+</style>
--- a/nezha-fronted/src/components/common/mixin/dataList.js
+++ b/nezha-fronted/src/components/common/mixin/dataList.js
@@ -13,6 +13,7 @@ export default {
      pageObj: { // 分页对象
        pageNo: 1,
        pageSize: this.$CONSTANTS.defaultPageSize,
+        pages: 1,
        total: 0
      },
      /* 工具参数 */
@@ -81,6 +82,7 @@ export default {
          }
          this.tableData = response.data.list
          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
@@ -113,12 +115,20 @@ export default {
    },
    pageNo (val) {
      this.pageObj.pageNo = val
+      if (this.detailType !== 'view') {
        this.getTableData()
+      } else {
+        this.getDetail()
+      }
    },
    pageSize (val) {
      this.pageObj.pageSize = val
      localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val)
+      if (this.detailType !== 'view') {
        this.getTableData()
+      } else {
+        this.getDetail()
+      }
    },
    add () {
      this.object = this.newObject()
--- a/nezha-fronted/src/components/common/mixin/detailViewLeftMixin.js
+++ b/nezha-fronted/src/components/common/mixin/detailViewLeftMixin.js
@@ -0,0 +1,19 @@
+export default {
+  props: {
+    tableData: {
+      type: Array
+    },
+    api: {
+      type: String
+    },
+    tableId: {
+      type: String
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  methods: {
+  }
+}
--- a/nezha-fronted/src/components/common/mixin/detailViewMixin.js
+++ b/nezha-fronted/src/components/common/mixin/detailViewMixin.js
@@ -0,0 +1,51 @@
+export default {
+  props: {},
+  data () {
+    return {
+      detailType: 'list',
+      detailViewRightObj: {}
+    }
+  },
+  methods: {
+    changeDetailType (flag) {
+      if (this.detailType === flag) {
+        return
+      }
+      this.detailType = flag
+      this.pageObj.pageNo = 1
+      if (flag === 'list') {
+        this.getTableData()
+      } else {
+        this.getDetail()
+      }
+    },
+    searchDetail (params) {
+      this.getDetail()
+    },
+    getDetail () {
+      const params = {
+        pageNo: this.pageObj.pageNo,
+        pageSize: 50
+      }
+      this.tools.loading = true
+      this.$get(this.url, { ...params }).then(response => {
+        this.tools.loading = false
+        if (response.code === 200) {
+          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
+              this.toTopBtnHandler(this.scrollbarWrap)
+            })
+          }
+        }
+      })
+    },
+    detailViewRightShow (item) {
+      this.detailViewRightObj = item
+    }
+  }
+}
--- a/nezha-fronted/src/components/common/mixin/detailViewRightMixin.js
+++ b/nezha-fronted/src/components/common/mixin/detailViewRightMixin.js
@@ -0,0 +1,11 @@
+export default {
+  props: {
+    fromListObj:{}
+  },
+  data () {
+    return {
+    }
+  },
+  methods: {
+  }
+}
--- a/nezha-fronted/src/components/common/table/nzDataList.vue
+++ b/nezha-fronted/src/components/common/table/nzDataList.vue
@@ -18,6 +18,17 @@
                    type="button" @click="tools.showCustomTableTitle = true">
              <i class="nz-icon-gear nz-icon"></i>
            </button>
+            <el-dropdown
+              type="primary"
+              v-if="showLayout.indexOf('detailViewSet') > -1"
+              class="margin-l-10"
+              @command="changeDetailType">
+              <i class="nz-icon nz-icon-alert-list" />
+              <el-dropdown-menu slot="dropdown" >
+                <el-dropdown-item :command="'list'" :class="detailType === 'list' ? 'active' : ''">列表</el-dropdown-item>
+                <el-dropdown-item :command="'view'" :class="detailType === 'view' ? 'active' : ''">详细</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
          </div>
          <!-- 顶部分页组件，当打开底部上滑框时出现 -->
          <!-- <div v-if="showLayout.indexOf('pagination') > -1" class="pagination-top pagination-top-hide display-none"></div>-->
@@ -79,6 +90,10 @@ export default {
      type: String,
      default: ''
    },
+    detailType: {
+      type: String,
+      default: ''
+    },
    tableTitle: {
      type: Array
    },
@@ -156,6 +171,9 @@ export default {
    },
    getTableData () {
      this.$emit('getTableData')
+    },
+    changeDetailType (item) {
+      this.$emit('changeDetailType', item)
    }
  },
  watch: {
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-if="detailType === 'list'">
    <nz-data-list
      ref="dataList"
      :api="url"
@@ -9,7 +9,10 @@
      :search-msg="searchMsg"
      :nz-table-height-offset="assetNzTableHeightOffset"
      @search="search"
+      @detailType="detailType"
+      @changeDetailType="changeDetailType"
      @getTableData="getTableData"
+      @getDetail="getDetail"
    >
      <template v-slot:top-tool-right>
        <button id="asset-filter" :class="{ 'is-focus': dataListLayout.indexOf('clickSearch') > -1 }" class="top-tool-btn margin-r-10" @click.stop="showClickSearch">
@@ -93,7 +96,90 @@
                            @refresh="getTableData"></asset-batch-edit-box>
    </transition>
    <transition name="right-box"><alert-silence-box v-if='silenceBoxShow' :alert-silence="objectSilence" @close="closeSilenceBox"></alert-silence-box>
-</transition>
+    </transition>
+  </div>
+  <div v-else>
+    <nzDetailView
+      :api="url"
+      :layout="dataListLayout"
+      :from="fromRoute.asset"
+      @detailType="detailType"
+      :detailViewRightObj="detailViewRightObj"
+      @search="searchDetail"
+      @changeDetailType="changeDetailType"
+    >
+      <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>
+        <asset-detail
+          class="data-detail"
+          ref="dataDetail"
+          v-loading="tools.loading"
+          :api="url"
+          :table-data="tableData"
+          @detailViewRightShow = 'detailViewRightShow'
+        >
+        </asset-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="getDetail" @keyup.enter.native="getDetail" size="mini"/>
+            <span class="jump-pages">/&nbsp{{pageObj.pages}}</span>
+          </template>
+        </el-pagination>
+      </template>
+    </nzDetailView>
+    <transition name="right-box">
+      <asset-box v-if="rightBox.show"
+                 ref="assetBox"
+                 :dc-data="dcData"
+                 :field-group-data="fieldGroupData"
+                 :from="fromRoute.asset"
+                 :obj="object"
+                 :snmp-credential-data="snmpCredentialData"
+                 :state-data="stateData"
+                 :type-data="typeData"
+                 @close="closeRightBox"
+                 @refresh="getTableData"></asset-box>
+    </transition>
+    <transition name="right-box">
+      <asset-batch-edit-box v-if="rightBox.batchShow"
+                            :field-group-data="fieldGroupData"
+                            :snmp-credential-data="snmpCredentialData"
+                            :state-data="stateData"
+                            @close="closeRightBox"
+                            @refresh="getTableData"></asset-batch-edit-box>
+    </transition>
+    <transition name="right-box"><alert-silence-box v-if='silenceBoxShow' :alert-silence="objectSilence" @close="closeSilenceBox"></alert-silence-box>
+    </transition>
  </div>
 </template>

@@ -102,8 +188,11 @@ import deleteButton from '@/components/common/deleteButton'
 import assetBox from '@/components/common/rightBox/asset/assetBox'
 import assetBatchEditBox from '@/components/common/rightBox/asset/assetBatchEditBox'
 import nzDataList from '@/components/common/table/nzDataList'
+import nzDetailView from '@/components/common/detailView/nzDetailView'
 import dataListMixin from '@/components/common/mixin/dataList'
+import detailViewMixin from '@/components/common/mixin/detailViewMixin'
 import assetTable from '@/components/common/table/asset/assetTable'
+import assetDetail from '@/components/common/detailView/list/asset/assetDetail'
 import clickSearch from '@/components/common/labelFilter/clickSearch'
 import topToolMoreOptions from '@/components/common/popBox/topToolMoreOptions'
 import alertSilenceBox from '@/components/common/rightBox/alertSilenceBox'
@@ -118,9 +207,11 @@ export default {
    assetTable,
    clickSearch,
    topToolMoreOptions,
-    alertSilenceBox
+    alertSilenceBox,
+    nzDetailView,
+    assetDetail
  },
-  mixins: [dataListMixin],
+  mixins: [dataListMixin, detailViewMixin],
  data () {
    return {
      url: 'asset/asset',
@@ -130,7 +221,7 @@ export default {
        batchShow: false
      },
      silenceBoxShow: false,
-      dataListLayout: ['searchInput', 'elementSet', 'clickSearch', 'pagination'],
+      dataListLayout: ['searchInput', 'elementSet', 'clickSearch', 'pagination', 'detailViewSet'],
      assetNzTableHeightOffset: 281, // 包含click-search时nz-table的高度
      blankObject: {
        id: '',