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

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>