NEZ-610 fix: cabinet列表页面bug

nezha-fronted/src/components/common/bottomBox/tabs/cabinetTab.vue

@@ -35,7 +35,7 @@
       </template>
     </nz-bottom-data-list>
     <transition name="right-box">
-      <cabinet-box v-if="rightBox.show" :current-dc="obj" :obj="object" ref="cabinetEditBox" @close="closeRightBox"></cabinet-box>
+      <cabinet-box v-if="rightBox.show" :current-dc="obj" :obj="object" ref="cabinetEditBox" v-has="'dc_add'" @close="closeRightBox"></cabinet-box>
     </transition>
   </div>
 </template>

nezha-fronted/src/components/common/language/en.js

@@ -696,7 +696,7 @@ const en = {
       assets: 'Assets',
       remark: 'Description',
       cabinets: 'Cabinets',
-      createDc: 'Nre data center',
+      createDc: 'New data center',
       editDc: 'Edit data center',
       editCabinet: 'Edit cabinet',
       alert: 'Alert',

nezha-fronted/src/components/common/mixin/dataList.js

@@ -127,6 +127,7 @@ export default {
       }
     },
     edit (u) {
+      console.info(u)
       this.$get(`${this.url}/${u.id}`).then(response => {
         if (response.code === 200) {
           this.object = response.data

nezha-fronted/src/components/common/mixin/table.js

@@ -26,6 +26,7 @@ export default {
     tableOperation ([command, row, param]) {
       switch (command) {
         case 'edit': {
+          console.info(1, command, row)
           this.$emit('edit', row)
           break
         }

nezha-fronted/src/components/common/rightBox/dcBox.vue

@@ -50,7 +50,6 @@
           </el-form>
         </div>
       </div>
-
       <!--底部按钮-->
       <div class="right-box-bottom-btns">
         <button v-cancel="{obj:editDc,func:esc}" id="dc-box-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
@@ -71,7 +70,9 @@ export default {
   name: 'dcBox',
   components: { latlngPicker },
   props: {
-    dc: Object,
+    obj: {
+      type: Object
+    },
     userData: Array
   },
   data () {
@@ -89,6 +90,9 @@ export default {
       coordinateFlag: false
     }
   },
+  created() {
+    console.log(this.props)
+  },
   methods: {
     /* 关闭弹框 */
     esc (refresh) {
@@ -98,17 +102,16 @@ export default {
     clickOutside () {
       this.esc(false)
     },
-    /* 弹出选择area弹框 */
+    // /* 弹出选择area弹框 */
-    toSelectArea () {
+    // toSelectArea () {
-      this.$refs.selectArea.openBox(this.editDc.area)
+    //   this.$refs.selectArea.openBox(this.editDc.area)
-    },
+    // },
 
     /* 保存 */
-    save: function () {
+    save () {
       if (this.prevent_opt.save) {
         return
-      }
+      };
-      ;
       this.prevent_opt.save = true
       this.$refs.dcForm.validate((valid) => {
         if (valid) {
@@ -117,7 +120,8 @@ export default {
             const attr = this.$refs.latlngPicker.getAttribute()
             param.latitude = attr.latitude
             param.longitude = attr.longitude
-            this.$put('idc', param).then(response => {
+            this.$put('/dc', param).then(response => {
+              console.log('修改')
               this.prevent_opt.save = false
               if (response.code === 200) {
                 this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
@@ -137,7 +141,8 @@ export default {
             if (!regNum.test(param.latitude)) {
               param.latitude = null
             }
-            this.$post('idc', param).then(response => {
+            this.$post('/dc', param).then(response => {
+              console.log('成功')
               this.prevent_opt.save = false
               if (response.code === 200) {
                 this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
@@ -162,7 +167,7 @@ export default {
         cancelButtonText: this.$t('tip.no'),
         type: 'warning'
       }).then(() => {
-        this.$delete('idc?ids=' + this.editDc.id).then(response => {
+        this.$delete('/dc' + this.editDc.id).then(response => {
           this.prevent_opt.save = false
           if (response.code === 200) {
             this.$message({ duration: 1000, type: 'success', message: this.$t('tip.deleteSuccess') })
@@ -198,13 +203,15 @@ export default {
   },
   mounted () {
     // this.getAreaData();
+    // console.log(this.editDc)
   },
   watch: {
-    dc: {
+    obj: {
       immediate: true,
       deep: true,
       handler (n, o) {
         this.editDc = JSON.parse(JSON.stringify(n))
+        console.info(this.editDc)
         this.$nextTick(() => {
           this.$refs.latlngPicker.setLnglat(this.editDc.latitude, this.editDc.longitude)
         })

nezha-fronted/src/components/common/table/settings/cabinetTable.vue

@@ -17,43 +17,19 @@
     </el-table-column>
     <el-table-column
       :resizable="true"
-      v-for="(item, index) in tableTitle"
+      v-for="(item, index) in customTableTitle"
       v-if="item.show"
       :key="`col-${index}`"
-      :label="item.label"
+      :label="item.label">
-    >
       <template slot-scope="scope" :column="item">
-        <template v-if="item.prop == 'assetStat'">
+        <template v-if="item.prop === 'assetNum'">
-          <el-popover
+          <span style="cursor: pointer"><i class="nz-icon nz-icon-overview-project monitorColor"></i> <span>{{scope.row.assetNum ? scope.row.assetNum : 0}}</span></span>
-            placement="top-start"
+        </template>
-            offset="-100"
+        <template v-else-if="item.prop === 'alertNum'">
-            trigger="hover"
+          <span style="cursor: pointer"><i :class="scope.row.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i> <span>{{scope.row.alertNum ? scope.row.alertNum : 0}}</span></span>
-            :content="$t('overall.result.total') + '：' + scope.row.assetStat.total + '，' + $t('asset.inStock') + '：' + scope.row.assetStat.inStock + '，' + $t('asset.notInStock') + '：' + scope.row.assetStat.outStock + '，' + $t('asset.suspended') + '：' + scope.row.assetStat.suspended">
+        </template>
-            <div slot="reference" class="dc-asset-states">
-              <span class="dc-asset-state dc-asset-state-total">{{scope.row.assetStat.total}}</span>
-              <span class="dc-asset-state dc-asset-state-in">{{scope.row.assetStat.inStock}}</span>
-              <span class="dc-asset-state dc-asset-state-out">{{scope.row.assetStat.outStock}}</span>
-              <span class="dc-asset-state dc-asset-state-suspended">{{scope.row.assetStat.suspended}}</span>
-            </div>
-          </el-popover>
-
-        </template >
-        <template v-else-if="item.prop == 'alertStat'">
-          <el-popover
-            placement="top-start"
-            offset="-128"
-            trigger="hover"
-            :content="$t('overall.result.total') + '：' + scope.row.alertStat.total + '，' + $t('alert.config.P1') + '：' + scope.row.alertStat.P1 + '，' + $t('alert.config.P2') + '：' + scope.row.alertStat.P2+ '，' + $t('alert.config.P3') + '：' + scope.row.alertStat.P3">
-            <div slot="reference" class="dc-asset-states">
-              <span class="dc-asset-state dc-asset-state-total">{{scope.row.alertStat.total}}</span>
-              <span class="dc-asset-state alert-level-P1">{{scope.row.alertStat.P1}}</span>
-              <span class="dc-asset-state alert-level-P2">{{scope.row.alertStat.P2}}</span>
-              <span class="dc-asset-state alert-level-P3">{{scope.row.alertStat.P3}}</span>
-            </div>
-          </el-popover>
-        </template >
         <template v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
-        <template v-else>-</template>
+        <template v-else="scope.row[item.prop]">-</template>
       </template>
     </el-table-column>
     <el-table-column
@@ -62,13 +38,13 @@
       fixed="right">
       <div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
       <div slot-scope="scope" class="table-operation-items">
-        <button class="table-operation-item" @click="tableOperation(['edit', scope.row])"><i class="nz-icon nz-icon-edit"></i></button>
+        <button class="table-operation-item" v-has="'dc_edit'" @click="tableOperation(['edit', scope.row])"><i class="nz-icon nz-icon-edit"></i></button>
         <el-dropdown size="medium" trigger="hover" @command="tableOperation">
           <div class="table-operation-item table-operation-item--more">
             <span>…</span><i class="nz-icon nz-icon-arrow-down"></i>
           </div>
           <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item :command="['delete', scope.row]" :disabled="isBuiltIn(scope.row)"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+            <el-dropdown-item :command="['delete', scope.row]" v-has="'dc_delete'" :disabled="isBuiltIn(scope.row)"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
@@ -78,8 +54,10 @@
 
 <script>
 import table from '@/components/common/mixin/table'
+import Template from "../../../page/config/template";
 export default {
   name: 'cabinet Table',
+  components: {Template},
   mixins: [table],
   data () {
     return {
@@ -102,12 +80,12 @@ export default {
         },
         {
           label: this.$t('config.dc.assets'),
-          prop: 'assetStat',
+          prop: 'assetNum',
           show: true
         },
         {
           label: this.$t('alert.alert'),
-          prop: 'alertStat',
+          prop: 'alertNum',
           show: true
         },
         {
@@ -117,10 +95,18 @@ export default {
         }
       ]
     }
+  },
+  methods: {
+
   }
 }
 </script>
 
 <style scoped>
-
+.colorEF7458{
+  color: #EF7458;
+}
+.color23BF9A{
+  color: #23BF9A;
+}
 </style>

nezha-fronted/src/components/common/table/settings/modelTable.vue

@@ -116,11 +116,12 @@ export default {
     }
   },
   methods: {
-   
+
-    
+  },
+  created() {
   },
   computed: {
-    
+
   }
 }
 </script>

nezha-fronted/src/components/page/config/dc.vue

@@ -37,12 +37,8 @@
       </template>
     </nz-data-list>
     <transition name="right-box">
-      <dc-box v-if="rightBox.dc.show" :dc="object" :user-data="userData" @close="closeDcBox" @reload="getTableData"></dc-box>
+      <dc-box v-if="rightBox.show" :obj="object" :user-data="userData" @close="closeRightBox" @reload="getTableData"></dc-box>
     </transition>
-    <transition name="right-box">
-      <traffic-setting-box v-if="rightBox.trafficSetting.show" ref="trafficBox" :dc="object" @close="closeTrafficBox"></traffic-setting-box>
-    </transition>
-    <span v-if="dcDataRefresh" style="display: none"></span>
   </div>
 </template>
 <script>
@@ -77,10 +73,6 @@ export default {
         longitude: undefined,
         latitude: undefined
       },
-      rightBox: {
-        dc: { show: false },
-        trafficSetting: { show: false }
-      },
       searchMsg: { // 给搜索框子组件传递的信息
         zheze_none: true,
         searchLabelList: [
@@ -111,66 +103,12 @@ export default {
         ]
       },
       regNum: /^[0-9]+.?[0-9]*/,
-      tabShow: 1, // 控制显示一级页面和二级页面 1 dc 2cabinet
       userData: []
     }
   },
-  computed: {
-    dcDataRefresh () { // 通过vuex更新dc   需要该属性到页面 否则不被监听
-      if (this.$store.getters.getDcDataRefresh) {
-        this.getTableData()
-      }
-      return this.$store.getters.getDcDataRefresh
-    }
-  },
   methods: {
-    assetStatClassName (param) {
+    statusChange (dc) {
-      if (param.column.label == this.$t('config.dc.assets')) {
+      this.$put(this.url, dc).then(response => {
-        return 'asset-state'
-      }
-      return ''
-    },
-    edit (u) {
-      this.dc = JSON.parse(JSON.stringify(u))
-      if (!this.regNum.test(this.dc.longitude)) {
-        this.dc.longitude = undefined
-      }
-      if (!this.regNum.test(this.dc.latitude)) {
-        this.dc.latitude = undefined
-      }
-      if (!this.dc.area) {
-        this.$set(this.dc, 'area', { id: '', name: '' })
-      }
-      this.rightBox.dc.show = true
-    },
-    detail (u) {
-      this.bottomBox.object = JSON.parse(JSON.stringify(u))
-      if (!this.bottomBox.object.area) {
-        this.$set(this.bottomBox.object, 'area', { id: '', name: '' })
-      }
-      this.bottomBox.targetTab = 'detail'
-      this.bottomBox.showSubList = true
-    },
-    add () {
-      this.object = this.newObject()
-      this.rightBox.dc.show = true
-    },
-    closeDcBox (refresh) {
-      this.rightBox.dc.show = false
-      if (refresh) {
-        this.delFlag = true
-        this.getTableData()
-      }
-    },
-    closeTrafficBox (refresh) {
-      this.rightBox.trafficSetting.show = false
-      if (refresh) {
-        this.delFlag = true
-        this.getTableData()
-      }
-    },
-    statusChange (idc) {
-      this.$put('dc', idc).then(response => {
         if (response.code === 200) {
           this.rightBox.show = false
           this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
@@ -192,16 +130,8 @@ export default {
     },
     regNumTest (val) { // 校验是否是数字
       return this.regNum.test(val)
-    },
-    initEvent () {
-      bus.$on('dc-list-change', () => {
-        this.getTableData()
-      })
     }
   },
-  beforeDestroy () {
-    bus.$off('dc-list-change')
-  },
   mounted () {
     this.getUserData()
   }

nezha-fronted/src/components/page/config/model.vue

@@ -87,6 +87,10 @@ export default {
     }
   },
   methods: {
+
+  },
+  created() {
+
   },
   computed: {
   }