feat:account 配置添加校验

1.account配置添加校验
2.account配置抽取组件

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

@@ -112,6 +112,7 @@ const en = {
     email:'E-mail is invalide',
     tel:'Phone number is invalide',
     host:'IP Address is invalide',
+    fileSize:'upload file is too large',
     config: {
       account: {
 

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

@@ -0,0 +1,186 @@
+<template>
+    <div>
+      <el-form class="pop-item-wider" :model="account" :rules="rules" ref="accountForm">
+        <el-form-item :label="$t('asset.createAssetTab.loginType')" size="mini">
+          <div class="nz-btn-group float-left" style="padding-top: 4px;">
+            <button type="button" @click="changeLoginType(1)"
+                    class="nz-btn nz-btn-size-small float-left"
+                    :class="{'nz-btn-disabled nz-btn-style-normal' : account.authType == 1, 'nz-btn-style-light' : account.authType == 2}">
+              <span>{{$t('asset.createAssetTab.password')}}</span>
+            </button>
+            <button type="button" @click="changeLoginType(2)"
+                    class="nz-btn nz-btn-size-small float-left"
+                    :class="{'nz-btn-disabled nz-btn-style-normal' : account.authType == 2, 'nz-btn-style-light' : account.authType == 1}">
+              <span>{{$t('asset.createAssetTab.ssh')}}</span>
+            </button>
+          </div>
+        </el-form-item>
+        <el-form-item :label="$t('asset.createAssetTab.account')" prop="user">
+          <el-input size="mini" v-model="account.user"/>
+        </el-form-item>
+        <el-form-item :label="$t('asset.createAssetTab.password')" v-show="account.authType==1" >
+          <el-input size="mini" type="password" v-model="account.pwd"/>
+        </el-form-item>
+        <el-form-item :label="$t('asset.createAssetTab.port')" prop="port">
+          <el-input size="mini" v-model="account.port"/>
+        </el-form-item>
+        <el-form-item :label="this.$t('asset.createAssetTab.ssh')" v-show="account.authType==2" prop="file">
+          <el-upload class="upload-demo" ref="upload" action="" :file-list="uploadFileList" :on-change="handleChange"  :auto-upload="false">
+            <div slot="tip" class="el-upload__tip" v-if="account.privateKey" >{{$t('asset.createAssetTab.sshKeyWasConfig')}}</div>
+            <button type="button" class="nz-btn nz-btn-size-small nz-btn-style-normal">
+              <span class="top-tool-btn-txt" v-if="account.privateKey">{{$t('asset.createAssetTab.clickToCover')}}</span>
+              <span class="top-tool-btn-txt" v-else>{{$t('asset.createAssetTab.clickToUpload')}}</span>
+            </button>
+          </el-upload>
+        </el-form-item>
+      </el-form>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "accountConfig",
+    props:{
+      account:{type:Object},
+      asComponent:{type:Boolean,default:false}
+    },
+    created() {
+    },
+  data(){
+      let validataUser=(rule, value, callback) => {
+        if(this.asComponent){//作为组件使用，正常验证
+          if(!value || value == ''){
+            callback(new Error(this.$t('validate.required')))
+          }
+        }else{
+          if(!value || value == ''){
+            callback()
+          }
+        }
+        callback();
+      }
+
+      let validatePort=(rule,value,callback) => {
+        if(this.asComponent){//作为组件使用，正常验证
+          if(!value || value == ''){
+            callback(new Error(this.$t('validate.required')))
+          }
+        }else{
+          if(this.account.user){
+            if(!value || value == ''){
+              callback(new Error(this.$t('validate.required')))
+            }
+          }
+        }
+        callback();
+      }
+
+      let validateFile=(rule,value,callback) => {
+        if(!this.validateFile()){
+          callback(new Error(this.uploadTip))
+        }
+        callback();
+      }
+      return {
+        uploadFileList:[],
+        rules:{
+          user:[
+            { validator: validataUser, trigger: 'blur'}
+          ],
+          port:[
+            { validator: validatePort, trigger: 'blur'}
+          ],
+          file:[
+            { validator: validateFile, trigger: 'change'}
+          ]
+        },
+        validateResult:false,
+        uploadTip:''
+      }
+    },
+    methods:{
+      resetData:function(){
+        this.account={
+          id:null,
+          user:"",
+          authType:1,
+          pwd:"",
+          port:null,
+          privateKey:null,
+          uploadFile:null
+        }
+      },
+      changeLoginType:function(loginType){
+        this.account.authType=loginType;
+        if(loginType == 1){//密码登录
+          this.clearFile();
+        }
+        if(loginType == 2){//公钥登录
+          this.account.pwd='';
+        }
+      },
+      handleChange(file,fileList) {
+        if (fileList.length > 0) {
+          this.uploadFileList = [fileList[fileList.length - 1]]
+        }
+        this.account.uploadFile = this.uploadFileList[0];
+        this.validateFile();
+      },
+      clearFile:function() {
+        if (this.$refs.upload) {
+          this.$refs.upload.clearFiles();
+        }
+        this.uploadFileList = [];
+      },
+      validateAccount:function(){
+        this.validateResult=false;
+        this.$refs.accountForm.validate((valid) => {
+          this.validateResult=valid;
+        });
+      },
+      validateFile:function(){
+          let file=this.uploadFileList[0];
+          if(file&&file.size>500){
+            this.uploadTip=this.$t('validate.fileSize')
+            return false;
+          }else{
+            return true;
+          }
+      },
+
+    },
+    watch:{
+      account:{
+        immediate:true,
+        deep:true,
+        handler(n,o){
+          // if (n && n.id) {
+          //   this.account=n;
+          // } else {
+          //   this.resetData();
+          // }
+        }
+      }
+    }
+}
+</script>
+
+<style scoped>
+  /*去除上传文件动画start*/
+  /*.upload-demo {*/
+  /*  display: flex;*/
+  /*}*/
+  /deep/ .el-list-enter-active,
+  /deep/ .el-list-leave-active {
+    transition: none;
+  }
+
+  /deep/ .el-list-enter,
+  /deep/ .el-list-leave-active {
+    opacity: 0;
+  }
+  /deep/ .el-upload-list {
+    height: 40px;
+  }
+  /*去除上传文件动画end*/
+</style>

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

@@ -615,43 +615,7 @@
           <!--CLI-->
           <div class="asset-sub-title">{{$t('asset.createAssetTab.cli')}}</div>
           <div class="line-100 asset-line"></div>
-          <el-form-item :label="this.$t('asset.createAssetTab.loginType')">
-            <div class="nz-btn-group float-left" style="padding-top: 4px;">
-              <button type="button" @click="changeLoginType(1)"
-                      class="nz-btn nz-btn-size-small float-left"
-                      :class="{'nz-btn-disabled nz-btn-style-normal' : assetData.accounts[0].authType == 1, 'nz-btn-style-light' : assetData.accounts[0].authType == 2}">
-                <span>{{$t('asset.createAssetTab.password')}}</span>
-              </button>
-              <button type="button" @click="changeLoginType(2)"
-                      class="nz-btn nz-btn-size-small float-left"
-                      :class="{'nz-btn-disabled nz-btn-style-normal' : assetData.accounts[0].authType == 2, 'nz-btn-style-light' : assetData.accounts[0].authType == 1}">
-                <span>{{$t('asset.createAssetTab.ssh')}}</span>
-              </button>
-            </div>
-          </el-form-item>
-          <el-form-item :label="this.$t('asset.createAssetTab.account')" label-position="top">
-            <el-input size="mini" v-model="assetData.accounts[0].user"/>
-          </el-form-item>
-          <el-form-item :label="this.$t('asset.createAssetTab.password')" v-if="assetData.accounts[0].authType==1">
-            <el-input size="mini" type="password" v-model="assetData.accounts[0].pwd"/>
-          </el-form-item>
-          <el-form-item :label="this.$t('asset.createAssetTab.port')">
-            <el-input size="mini" v-model="assetData.accounts[0].port"/>
-          </el-form-item>
-          <el-form-item :label="this.$t('asset.createAssetTab.ssh')" v-if="assetData.accounts[0].authType==2">
-            <el-upload
-              class="upload-demo"
-              ref="upload"
-              action=""
-              :file-list="uploadFileList"
-              :on-change="handleChange"
-              :auto-upload="false"
-            >
-              <button type="button" class="nz-btn nz-btn-size-small nz-btn-style-normal">
-                <span class="top-tool-btn-txt">{{$t('asset.createAssetTab.clickToUpload')}}</span>
-              </button>
-            </el-upload>
-          </el-form-item>
+          <account-config-box v-for="(item,index) in assetData.accounts" :account="item" :key="index" ref="accountConfigBox"></account-config-box>
         </el-form>
       </el-scrollbar>
     </div>
@@ -659,11 +623,16 @@
 </template>
 
 <script>
+  import accountConfig from './accountConfig';
   export default {
+
     name: "assetAddUnit",
     props: {
       addUnitShow: Boolean
     },
+    components:{
+      'account-config-box': accountConfig,
+    },
     data() {
       return {
         assetData: {
@@ -680,8 +649,8 @@
             authType: 1,
             user: '',
             pwd: '',
-            cert: '',
             port: '',
+            uploadFile:null
           }]
         },
         assetStateOption: [
@@ -1039,8 +1008,10 @@
           })
         }
         if (type === 'asset') {
+          this.$refs.accountConfigBox[0].validateAccount();
+          let accountValideResult=this.$refs.accountConfigBox[0].validateResult;
           this.$refs.addAssetForm.validate((valid) => {
-            if (valid) {
+            if (valid&&accountValideResult) {
               let modelId = ''
               let authType = ''
               if (this.assetData.modelId !== '') {
@@ -1061,12 +1032,19 @@
               form.append("idcId", this.assetData.idcId);
               form.append("cabinetId", this.assetData.cabinetId);
               form.append("modelId", modelId);
-              form.append("accounts[0].authType", authType);
-              form.append("accounts[0].user", this.assetData.accounts[0].user);
-              form.append("accounts[0].pwd", this.assetData.accounts[0].pwd);
-              form.append("accounts[0].port", this.assetData.accounts[0].port);
-              if(this.assetData.accounts[0].authType==2){
-                form.append('cert',this.uploadFileList[0].raw);
+              debugger
+              console.log(this.assetData.accounts)
+              for(let i in this.assetData.accounts){
+                let account=this.assetData.accounts[i];
+                if(account.user){
+                  form.append("accounts["+i+"].authType",account.authType);
+                  form.append("accounts["+i+"].user", account.user);
+                  form.append("accounts["+i+"].port", account.port);
+                  form.append("accounts["+i+"].pwd", account.pwd);
+                  if(account.authType==2){
+                    form.append('cert',account.uploadFile?account.uploadFile.raw:null);
+                  }
+                }
               }
               this.$post('asset', form,{'Content-Type': 'multipart/form-data'}).then(res => {
                 const h = this.$createElement;

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

@@ -637,46 +637,7 @@
           <!--cli-->
           <div class="asset-sub-title">{{$t('asset.createAssetTab.cli')}}</div>
           <div class="line-100 asset-line"></div>
-          <el-form-item :label="$t('asset.createAssetTab.loginType')">
-            <div class="nz-btn-group float-left" style="padding-top: 4px;">
-              <button type="button" @click="changeLoginType(1)"
-                      class="nz-btn nz-btn-size-small float-left"
-                      :class="{'nz-btn-disabled nz-btn-style-normal' : assetData.accounts[0].authType == 1, 'nz-btn-style-light' : assetData.accounts[0].authType == 2}">
-                <span>{{$t('asset.createAssetTab.password')}}</span>
-              </button>
-              <button type="button" @click="changeLoginType(2)"
-                      class="nz-btn nz-btn-size-small float-left"
-                      :class="{'nz-btn-disabled nz-btn-style-normal' : assetData.accounts[0].authType == 2, 'nz-btn-style-light' : assetData.accounts[0].authType == 1}">
-                <span>{{$t('asset.createAssetTab.ssh')}}</span>
-              </button>
-            </div>
-          </el-form-item>
-          <el-form-item :label="$t('asset.createAssetTab.account')">
-            <el-input size="mini" v-model="assetData.accounts[0].user"/>
-          </el-form-item>
-          <el-form-item :label="$t('asset.createAssetTab.password')" v-if="assetData.accounts[0].authType==1">
-            <el-input size="mini" type="password" v-model="assetData.accounts[0].pwd"/>
-          </el-form-item>
-          <el-form-item :label="$t('asset.createAssetTab.port')">
-            <el-input size="mini" v-model="assetData.accounts[0].port"/>
-          </el-form-item>
-          <el-form-item :label="this.$t('asset.createAssetTab.ssh')" v-if="assetData.accounts[0].authType==2">
-            <el-upload
-              class="upload-demo"
-              ref="upload"
-              action=""
-              :http-request="uploadFile"
-              :file-list="uploadFileList"
-              :on-change="handleChange"
-              :auto-upload="false"
-            >
-              <div slot="tip" class="el-upload__tip" v-if="assetData.accounts[0].cert" >{{$t('asset.createAssetTab.sshKeyWasConfig')}}</div>
-              <button type="button" class="nz-btn nz-btn-size-small nz-btn-style-normal">
-                <span class="top-tool-btn-txt" v-if="assetData.accounts[0].cert">{{$t('asset.createAssetTab.clickToCover')}}</span>
-                <span class="top-tool-btn-txt" v-else>{{$t('asset.createAssetTab.clickToUpload')}}</span>
-              </button>
-            </el-upload>
-          </el-form-item>
+          <account-config-box v-for="(item,index) in assetData.accounts" :account="item" :key="index" ref="accountConfigBox"></account-config-box>
         </el-form>
       </el-scrollbar>
     </div>
@@ -684,9 +645,13 @@
 </template>
 
 <script>
+  import accountConfig from './accountConfig';
   export default {
     name: "assetEditUnit",
     props: ["editUnitShow", "editUnitId"],
+    components:{
+      'account-config-box': accountConfig,
+    },
     data() {
       return {
         visible: '',
@@ -703,12 +668,11 @@
           assetType: '',
           accounts: [{
             id: '',
-            authType: '',
+            authType: 1,
             user: '',
             pwd: '',
-            cert: '',
             port: '',
-            file: ''
+            uploadFile: null
           }]
         },
         accountData: '',
@@ -947,12 +911,13 @@
               this.assetData.idcId = response.data.list[0].idc.id
               this.assetData.cabinetId = response.data.list[0].cabinet == null ? '' : response.data.list[0].cabinet.id
               this.assetData.purchaseDate = response.data.list[0].purchaseDate
-              this.assetData.accounts[0].id = response.data.list[0].accounts[0].id
-              this.assetData.accounts[0].authType = response.data.list[0].accounts[0].authType
-              this.assetData.accounts[0].user = response.data.list[0].accounts[0].user
-              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].id = response.data.list[0].accounts[0].id
+              // this.assetData.accounts[0].authType = response.data.list[0].accounts[0].authType
+              // this.assetData.accounts[0].user = response.data.list[0].accounts[0].user
+              // 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.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
@@ -1058,18 +1023,23 @@
           form.append("idcId", this.assetData.idcId);
           form.append("cabinetId", this.assetData.cabinetId);
           form.append("modelId", modelId);
-          form.append("accounts[0].id", this.assetData.accounts[0].id);
-          form.append("accounts[0].authType", this.assetData.accounts[0].authType);
-          form.append("accounts[0].user", this.assetData.accounts[0].user);
-          form.append("accounts[0].port", this.assetData.accounts[0].port);
-          form.append("accounts[0].pwd", this.assetData.accounts[0].pwd);
-          if(this.assetData.accounts[0].authType==2&&this.uploadFileList.length>0){
-
-            form.append('cert',this.uploadFileList[0].raw);
+          for(let i in this.assetData.accounts){
+            let account=this.assetData.accounts[i];
+            if(account.user){
+              form.append("accounts["+i+"].id", account.id);
+              form.append("accounts["+i+"].authType",account.authType);
+              form.append("accounts["+i+"].user", account.user);
+              form.append("accounts["+i+"].port", account.port);
+              form.append("accounts["+i+"].pwd", account.pwd);
+              if(account.authType==2){
+                form.append('cert',account.uploadFile?account.uploadFile.raw:null);
+              }
+            }
           }
-
+          this.$refs.accountConfigBox[0].validateAccount();
+          let accountValideResult=this.$refs.accountConfigBox[0].validateResult;
           this.$refs.assetEditForm.validate((valid) => {
-            if (valid) {
+            if (valid&&accountValideResult) {
               this.$put('asset', form,{'Content-Type': 'multipart/form-data'}).then(res => {
                 const h = this.$createElement;
                 if (res.code === 200) {