feat: asset列表中的module可以点击查看了

asset列表中的module可以点击查看了

nezha-fronted/src/components/common/dcConfig.vue

@@ -1,6 +1,6 @@
 <template>
   <el-popover :placement="placement"    width="400" @hide="hidePop"  ref="popBox" v-model="popBox.show">
-    <div class="pop-window-assetType-content">
+    <div class="">
       <!-- begin--顶部按钮-->
       <div class="pop-top-btns">
         <button type="button" v-if="popBox.isEdit && idc.id != ''" @click="del" class="nz-btn nz-btn-size-small nz-btn-style-light">
@@ -37,7 +37,7 @@
       </div>
     </div>
     <span :class="buttonClass" @click.prevent.stop="" slot="reference">
-      <slot name="optionZone"  >
+      <slot name="optionZone">
         <i class="el-icon-plus"></i>
       </slot>
     </span>

nezha-fronted/src/components/common/elementSet.vue

@@ -82,7 +82,6 @@ export default {
   methods: {
     //悬浮点击空白隐藏
     elementsetHide() {
-      console.info(this.tablelable)
       this.eventfixedVal.shezhi = 0;
     },
     //点击全选all或者cancel按钮

nezha-fronted/src/components/page/asset/asset.vue

@@ -128,8 +128,12 @@
             <div v-if="item.prop=='state'">
               <span>{{scope.row.state==1 ? $t('asset.createAssetTab.inStock') : $t('asset.createAssetTab.notInStock')}}</span>
             </div>
-            <div v-if="item.prop=='Module'">
+            <div v-if="item.prop=='Module'" @click="getAssetModuleList(scope.row.id)">
-              <div class="tab-input-square link">{{scope.row.moduleNum}}</div>
+              <module-list-pop :assetId="scope.row.id + ''" @openModuleBox="openModuleBox" placement="left" :ref="'moduleListPop' + scope.row.id">
+                <template v-slot:optionZone>
+                  <div class="tab-input-square link">{{scope.row.moduleNum}}</div>
+                </template>
+              </module-list-pop>
             </div>
             <div v-if="item.prop=='Alert'">
               <div class="tab-input-square link">{{scope.row.alertNum}}</div>
@@ -190,6 +194,7 @@
       @tablelable="tablelabelEmit"
       ref="elementset"
     ></element-set>
+    <module-box :module="module" @reload="getAssetData" ref="moduleBox"></module-box>
   </div>
 </template>
 
@@ -313,6 +318,7 @@
         tabShow: false,
         tabView: true,
         tagType: 'add',
+        module: {},
         form: {
           name: ''
         },
@@ -384,6 +390,13 @@
 
     },
     methods: {
+      openModuleBox(module) {
+        this.module = module;
+        this.$refs.moduleBox.show(true);
+      },
+      getAssetModuleList(id) {
+        this.$refs['moduleListPop' + id][0].getModuleList();
+      },
       elementsetShow(s, e) {
         var eventfixed = {
           shezhi: 0,
@@ -665,11 +678,11 @@
 
   .tab-input-square {
     border: 1px solid #1166bb;
-    height: 25px;
+    height: 22px;
-    width: 65px;
+    width: 50px;
     border-radius: 3px;
     text-align: center;
-    line-height: 23px;
+    line-height: 20px;
   }
 
   .account-list-option {

nezha-fronted/src/components/page/asset/moduleListPop.vue

@@ -0,0 +1,75 @@
+<template>
+  <el-popover :placement="placement" width="300" @hide="hidePop" ref="moduleListPop" v-model="popBox.show">
+    <div class="pop-top-btns">
+      <button type="button" @click="show(false)" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square">
+        <span class="top-tool-btn-txt"><i class="el-icon-close"></i></span>
+      </button>
+    </div>
+    <div class="pop-title">{{$t('project.module.module')}}</div>
+    <div class="pop-item-wider">
+      <el-input size="mini" v-model="pageObj.name" style="margin-bottom: 10px; width: calc(100% - 30px);"></el-input>
+      <button @click="getModuleList" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square"><i class="el-icon-search"></i></button>
+      <el-table
+        :data="moduleList"
+        border
+        :show-header="false"
+        height="513px"
+        style="width: 100%;"
+      >
+        <el-table-column>
+          <template slot-scope="scope" :column="item">
+            <span class="link" @click="$emit('openModuleBox', scope.row)">{{scope.row.name}}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <template slot="reference">
+      <slot name="optionZone"><div class="tab-input-square link">0</div></slot>
+    </template>
+  </el-popover>
+</template>
+
+<script>
+export default {
+  name: "moduleListPop",
+  props:{
+    assetId: {type: String},
+    placement: {type: String}
+  },
+  data() {
+    return {
+      popBox: {show: false},
+      moduleList: [],
+      pageObj: {
+        pageNo: 1,
+        pageSize: 999,
+        name: '',
+        assetId: this.assetId
+      }
+    }
+  },
+  methods: {
+    getModuleList() {
+      this.$get('module', this.pageObj).then(response => {
+        if (response.code === 200) {
+          this.moduleList = response.data.list;
+        }
+      });
+    },
+    hidePop() {
+      this.pageObj.name = '';
+      this.pageObj.assetId = '';
+      this.moduleList = [];
+    },
+    show(show) {
+      this.popBox.show = show;
+    }
+  }
+}
+</script>
+
+<style scoped>
+.pop-item-wider {
+  height: 550px;
+}
+</style>

nezha-fronted/src/main.js

@@ -28,6 +28,7 @@ import assetEditUnit from "./components/page/asset/assetEditUnit"; //资产添
 import alertConfigBox from "./components/common/rightBox/alertConfigBox"; //告警规则弹框组件
 import dcConfigBox from "./components/common/dcConfig"; //idc配置弹框组件
 import panelBox from "./components/common/rightBox/panelBox"; //面板弹框组件
+import moduleListPop from "./components/page/asset/moduleListPop"; //面板弹框组件
 
 Vue.component("Pagination", Pagination);
 Vue.component("searchInput", searchInput);
@@ -41,6 +42,7 @@ Vue.component("assetEditUnit", assetEditUnit);
 Vue.component("alert-config-box", alertConfigBox);
 Vue.component("idc-config-box", dcConfigBox);
 Vue.component("panel-box", panelBox);
+Vue.component("module-list-pop", moduleListPop);
 
 Vue.prototype.$axios = axios;
 Vue.prototype.$post = post;