feat: asset侧滑添加module alert 跳转

nezha-fronted/src/components/common/js/validate.js

@@ -1,5 +1,4 @@
 import vm from '../../../main'
-import ca from "element-ui/src/locale/lang/ca";
 
 export function host(rule, value, callback) {
   const hostReg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/

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

@@ -15,15 +15,15 @@
           </div>-->
         <div class="nz-tab" v-if="isEdit">
           <div class="nz-tab-item-box" @click="changeLoginType(1)" id="account-logintype-1">
-            <div class="nz-tab-item" :class="{'nz-tab-item-active' : account.authType == 1}">{{$t('project.endpoint.endpoint')}}</div>
+            <div class="nz-tab-item" :class="{'nz-tab-item-active' : account.authType == 1}">{{$t('asset.createAssetTab.password')}}</div>
           </div>
           <div @click="changeLoginType(2)" class="nz-tab-item-box">
-            <div class="nz-tab-item" :class="{'nz-tab-item-active' : account.authType == 2}">{{$t('project.metrics.metrics')}}</div>
+            <div class="nz-tab-item" :class="{'nz-tab-item-active' : account.authType == 2}">{{$t('asset.createAssetTab.ssh')}}</div>
           </div>
         </div>
-
+        <el-form-item :label="$t('asset.createAssetTab.loginType')" size="mini" v-if="!isEdit">
-        <div class="right-box-form-content-txt" v-if="!isEdit">{{account.authType}}</div>
+          <div class="right-box-form-content-txt" >{{account.authType==1?$t('asset.createAssetTab.password'):$t('asset.createAssetTab.ssh')}}</div>
-
+        </el-form-item>
         <el-form-item :label="$t('asset.createAssetTab.account')" prop="user">
           <el-input autocomplete="new-password" size="mini" v-model="account.user" v-if="isEdit"/>
           <div class="right-box-form-content-txt" v-if="!isEdit">{{account.user}}</div>
@@ -79,7 +79,6 @@ export default {
             { validator: validateFile, trigger: 'change'}
           ]
         },
-        validateResult:false,
         uploadTip:''
       }
     },
@@ -120,7 +119,8 @@ export default {
       validateAccount:function(){
         this.validateResult=false;
         this.$refs.accountForm.validate((valid) => {
-          this.validateResult=valid;
+          this.$emit("setValidateResult",valid);
+          console.log(valid)
         });
       },
       validateFile:function(){

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

@@ -82,7 +82,7 @@
               <span>{{scope.row.state==1 ? $t('asset.createAssetTab.inStock') : $t('asset.createAssetTab.notInStock')}}</span>
             </div>
             <div v-if="item.prop=='Module'">
-              <div v-if="scope.row.moduleNum > 0" @click="getAssetModuleList(scope.row.id)" :id="'asset-module-'+scope.row.id">
+              <div v-if="scope.row.moduleNum > 0" >
                 <module-list-pop :asset-id="scope.row.id + ''" @openModuleBox="openModuleBox" placement="left" :ref="'moduleListPop' + scope.row.id">
                   <template v-slot:optionZone>
                     <button class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75">{{scope.row.moduleNum}}</button>

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

@@ -334,7 +334,7 @@
           </div>
           <div class="line-100 asset-line"></div>
           <template v-if="accountSwitch">
-            <account-config-box v-for="(item,index) in assetData.accounts" :account="item" :key="index" ref="accountConfigBox"></account-config-box>
+            <account-config-box v-for="(item,index) in assetData.accounts" :account="item" :key="index" ref="accountConfigBox" @setValidateResult="setAccountValideResult"></account-config-box>
           </template>
 
           <el-form-item :label="this.$t('asset.createAssetTab.exporter')" class="exporter-label">
@@ -530,6 +530,7 @@
           ]
         },
         uploadFileList:[],
+        accountValideResult:true
 
       }
     },
@@ -765,13 +766,12 @@
           })
         }
         if (type === 'asset') {
-          let accountValideResult=true;
           if(this.$refs.accountConfigBox&&this.$refs.accountConfigBox.length>0){
             this.$refs.accountConfigBox[0].validateAccount();
-            accountValideResult=this.$refs.accountConfigBox[0].validateResult;
+            console.log("accountValideResult-->"+this.accountValideResult)
           }
           this.$refs.addAssetForm.validate((valid) => {
-            if (valid&&accountValideResult) {
+            if (valid&&this.accountValideResult) {
               let modelId = ''
               let authType = ''
               if (this.assetData.modelId !== '') {
@@ -867,6 +867,9 @@
           })
         }
       },
+      setAccountValideResult:function(result){
+        this.accountValideResult=result;
+      },
       uploadFile:function(file){
         this.assetData.accounts[0].file=file.file;
       },

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

@@ -43,11 +43,19 @@
             </div>
             <span v-if="tabView">{{assetData.state==1 ? $t('asset.createAssetTab.inStock'): $t('asset.createAssetTab.notInStock')}}</span>
           </el-form-item>
-          <el-form-item :label="$t('asset.editAssetTab.modelId')" v-if="tabView">
+          <el-form-item :label="$t('asset.tableTitle.modules')" v-if="tabView">
-            <div class="tab-input-square">{{assetViewData.moduleNum}}</div>
+            <div v-if="assetViewData.moduleNum > 0" >
+              <module-list-pop :asset-id="obj.id + ''" @openModuleBox="openModuleBox" placement="left" :ref="'moduleListPop' + obj.id">
+                <template v-slot:optionZone>
+                  <button class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75">{{assetViewData.moduleNum}}</button>
+                </template>
+              </module-list-pop>
+            </div>
+            <button type="button" v-else class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75 nz-btn-disabled">{{assetViewData.moduleNum}}</button>
           </el-form-item>
-          <el-form-item :label="$t('asset.editAssetTab.alert')" v-if="tabView">
+          <el-form-item :label="$t('asset.tableTitle.alerts')" v-if="tabView">
-            <div class="tab-input-square">{{assetViewData.alertNum}}</div>
+            <button type="button" v-if="assetViewData.alertNum > 0" id="'asset-alerts-'+scope.row.id" @click="jumpToAlertMsg(obj.id)" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75">{{assetViewData.alertNum}}</button>
+            <button type="button" v-else class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75 nz-btn-disabled">{{assetViewData.alertNum}}</button>
           </el-form-item>
           <div class="asset-sub-title">{{$t('asset.createAssetTab.assetInfo')}}</div>
           <div class="line-100 asset-line"></div>
@@ -308,114 +316,10 @@
                       </template>
                     </idc-config-box>
                   </div>
-                  <!--<el-popover
-                    placement="left"
-                    v-model="item[item.name]"
-                    trigger="manual"
-                  >
-                    <div class="pop-window-assetType-content">
-                      <div class="right-box-top-btns">
-                        <div class="right-box-top-btn right-box-top-btn-full"
-                             @click="item[item.name] = false">
-                          <div class="right-box-btn-icon">
-                            <i class="el-icon-close"></i>
-                          </div>
-                          <span>{{$t('overall.esc')}}</span>
-                        </div>
-                      </div>
-                      <div class="pop-window">
-                        <span style="display: block;padding-bottom: 20px">{{$t('asset.editAssetTab.editIdcTab.title')}}</span>
-                        <el-form-item :label="$t('asset.editAssetTab.dcName')">
-                          <el-input v-model="popIdcData.name"/>
-                        </el-form-item>
-                        <el-form-item :label="$t('asset.editAssetTab.location')">
-                          <el-input v-model="popIdcData.location"/>
-                        </el-form-item>
-                        <el-form-item :label="$t('asset.editAssetTab.principal')">
-                          <el-select v-model="popIdcData.principal" clearable>
-                            <el-option
-                              v-for="item in idcUserData"
-                              :key="item.key"
-                              :label="item.username"
-                              :value="item.userId"
-                            >
-                            </el-option>
-                          </el-select>
-                        </el-form-item>
-                        <el-form-item :label="$t('asset.editAssetTab.editIdcTab.tel')">
-                          <el-input v-model="popIdcData.tel"/>
-                        </el-form-item>
-                      </div>
-                    </div>
-                    <div class="right-box-bottom-btns">
-                      <div class="right-box-bottom-btn right-box-bottom-btn-cancel"
-                           @click.stop="item[item.name]= false">
-                        {{$t('overall.cancel')}}
-                      </div>
-                      <div class="right-box-bottom-btn right-box-bottom-btn-50"
-                           @click="editData('idc',item)">
-                        {{$t('overall.save')}}
-                      </div>
-                    </div>
-                    <span class="config-dropdown-btn" slot="reference"
-                          @click.stop="getSingleIDCData(item.id,'edit',item)"><i
-                      class="el-icon-edit-outline"></i></span>
-                  </el-popover>-->
                 </el-option>
               </el-select>
               <div class="right-box-row-btn right-box-row-btn-small">
                 <idc-config-box placement="left" @after="getIDCOptionData"></idc-config-box>
-                <!--<el-popover
-                  placement="left"
-                  v-model="editPopIDCVisible"
-                >
-                  <div class="pop-window-assetType-content">
-                    <div class="right-box-top-btns">
-                      <div class="right-box-top-btn right-box-top-btn-full"
-                           @click="editPopoverClose('idc')">
-                        <div class="right-box-btn-icon">
-                          <i class="el-icon-close"></i>
-                        </div>
-                        <span>{{$t('overall.esc')}}</span>
-                      </div>
-                    </div>
-                    <div class="pop-window">
-                      <span
-                        style="display: block;padding-bottom: 20px">{{$t('asset.editAssetTab.AddIdcTab.title')}}</span>
-                      <el-form-item :label="this.$t('asset.editAssetTab.AddIdcTab.dcName')">
-                        <el-input v-model="addIdcData.name"/>
-                      </el-form-item>
-                      <el-form-item :label="this.$t('asset.editAssetTab.AddIdcTab.location')">
-                        <el-input v-model="addIdcData.location"/>
-                      </el-form-item>
-                      <el-form-item :label="$t('asset.editAssetTab.AddIdcTab.principal')">
-                        <el-select v-model="addIdcData.principal" clearable>
-                          <el-option
-                            v-for="item in idcUserData"
-                            :key="item.key"
-                            :label="item.username"
-                            :value="item.userId"
-                          >
-                          </el-option>
-                        </el-select>
-                      </el-form-item>
-                      <el-form-item :label="this.$t('asset.editAssetTab.AddIdcTab.tel')">
-                        <el-input v-model="addIdcData.tel"/>
-                      </el-form-item>
-                    </div>
-                  </div>
-                  <div class="right-box-bottom-btns">
-                    <div class="right-box-bottom-btn right-box-bottom-btn-cancel"
-                         @click="editPopoverClose('idc')">
-                      {{$t('overall.cancel')}}
-                    </div>
-                    <div class="right-box-bottom-btn right-box-bottom-btn-50"
-                         @click="addNewData('IDC')">
-                      {{$t('overall.save')}}
-                    </div>
-                  </div>
-                  <div slot="reference"><i class="el-icon-plus"></i></div>
-                </el-popover>-->
               </div>
             </template>
             <span v-if="tabView">{{assetViewData.idcName}}</span>
@@ -471,9 +375,13 @@
             <span>{{cabinetSelectedData.remark}}</span>
           </el-form-item>
           <!--cli-->
-          <div class="asset-sub-title">{{$t('asset.createAssetTab.cli')}}</div>
+          <div class="asset-sub-title">{{$t('asset.createAssetTab.cli')}}
+            <el-switch style="float: right;" v-model="accountSwitch" active-color="#ee9d3f" :disabled="parseInt(assetData.exporter)===1"></el-switch>
+          </div>
           <div class="line-100 asset-line"></div>
-          <account-config-box v-for="(item,index) in assetData.accounts" :is-edit="!tabView" :account="item" :key="index" ref="accountConfigBox"></account-config-box>
+          <template v-if="accountSwitch">
+          <account-config-box v-for="(item,index) in assetData.accounts" :is-edit="!tabView" :account="item" :key="index" ref="accountConfigBox" @setValidateResult="setAccountValideResult"></account-config-box>
+          </template>
         </el-form>
       </el-scrollbar>
 
@@ -486,6 +394,7 @@
           <span>{{$t('overall.ok')}}</span>
         </button>
       </div>
+      <module-box :module="module" @reload="refreshTabData" ref="moduleBox"></module-box>
     </div>
   </transition>
 </template>
@@ -522,6 +431,7 @@
             uploadFile: null
           }]
         },
+        accountSwitch:false,//true 开启，false 关闭
         accountData: '',
         assetViewData: {
           assetType: '',
@@ -676,7 +586,9 @@
           ]
         },
         uploadFileList:[],
-        formData:null
+        formData:null,
+        module:{},
+        accountValideResult:true
       }
     },
     /*computed: {
@@ -765,7 +677,8 @@
               // this.assetData.accounts[0].pwd = response.data.list[0].accounts[0].pwd
               // this.assetData.accounts[0].port = response.data.list[0].accounts[0].port
               // this.assetData.accounts[0].cert = response.data.list[0].accounts[0].privateKey
-              this.assetData.accounts[0]=response.data.list[0].accounts[0]?response.data.list[0].accounts[0]:this.assetData.accounts[0];
+              this.assetData.accounts=response.data.list[0].accounts[0]?response.data.list[0].accounts:[];
+              this.accountSwitch=this.assetData.accounts.length>0;
               this.idcSelectedData.location = response.data.list[0].idc.location
               this.idcSelectedData.principal = response.data.list[0].idc.principal
               this.idcSelectedData.tel = response.data.list[0].idc.tel
@@ -776,6 +689,23 @@
           })
         }
       },
+      openModuleBox(module) {
+        this.module = module;
+        this.$refs.moduleBox.show(true);
+        this.$refs['moduleListPop' + this.obj.id].show(false);
+      },
+      refreshTabData:function(){
+        this.$emit('refreshData', 'true');
+      },
+      jumpToAlertMsg(assetId) {
+        this.$store.commit('assetForAlertListChange', assetId);
+        this.$router.push({
+          path: "/alertList",
+          query: {
+            t: +new Date()
+          }
+        });
+      },
       getIDCOptionData() {
         this.$get('idc').then(response => {
           if (response.code === 200) {
@@ -884,10 +814,12 @@
               }
             }
           }
-          this.$refs.accountConfigBox[0].validateAccount();
+
-          let accountValideResult=this.$refs.accountConfigBox[0].validateResult;
+          if(this.$refs.accountConfigBox&&this.$refs.accountConfigBox.length>0){
+            this.$refs.accountConfigBox[0].validateAccount();
+          }
           this.$refs.assetEditForm.validate((valid) => {
-            if (valid&&accountValideResult) {
+            if (valid&&this.accountValideResult) {
               this.$put('asset', form,{'Content-Type': 'multipart/form-data'}).then(res => {
                 const h = this.$createElement;
                 if (res.code === 200) {
@@ -966,6 +898,9 @@
           })
         }
       },
+      setAccountValideResult:function(result){
+        this.accountValideResult=result;
+      },
       //新增型号弹框关闭后重置弹框内容
       resetVendor() {
         this.addVendorData.value = '';

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

@@ -24,7 +24,9 @@
       </el-table>
     </div>
     <template slot="reference">
-      <slot name="optionZone"><div class="tab-input-square link">0</div></slot>
+      <div @click="getModuleList">
+        <slot name="optionZone"><div class="tab-input-square link">0</div></slot>
+      </div>
     </template>
   </el-popover>
 </template>