版本信息修改

src/components/icss/AddVersion.vue

@@ -3,9 +3,10 @@
     <crumbs :title="title" linkTo="/admin/LT-YXSJWH-BBXXWH"></crumbs>
     <div class="contents">
       <div class="content">
-        <el-form ref="form" :label-position="labelPosition" label-width="95px" class="add-admin-form" :model="form" :rules="rules">
-          <el-form-item label="版本号：" prop="name">
-              <el-input v-model="form.name" placeholder="请输入版本号" maxlength="120"></el-input>
+        <!-- <el-form ref="form" :label-position="labelPosition" label-width="95px" class="add-admin-form" :model="form" :rules="rules"> -->
+        <el-form ref="form" :label-position="labelPosition" label-width="95px" class="add-version-form" :model="form" :rules="rules">
+          <el-form-item label="版本号：" prop="name" class="version-num">
+              <el-input v-model="form.name" placeholder="请输入版本号" maxlength="30"></el-input>
           </el-form-item>
           <el-form-item label="版本时间：" prop="refreshTime">
             <el-date-picker
@@ -22,9 +23,11 @@
           </el-form-item>
           <el-form-item label="版本说明：" v-if="list&&list.length>0">
           </el-form-item>
+          <VersionDesc :detail="list" :versionId="id" :isFirst="isFirst" :isCopy="copy" @func="getDetailList"/>
+          <el-button class="disclButn" size="small" type="primary" @click="comfirn('form')">确定</el-button>
         </el-form>
-        <VersionDesc :detail="list" :versionId="id" :isFirst="isFirst" :isCopy="copy" @func="getDetailList"/>
-        <el-button class="disclButn" size="small" type="primary" @click="comfirn">确定</el-button>
+        <!-- <VersionDesc :detail="list" :versionId="id" :isFirst="isFirst" :isCopy="copy" @func="getDetailList"/>
+        <el-button class="disclButn" size="small" type="primary" @click="comfirn">确定</el-button> -->
       </div>    
     </div>
   </div>
@@ -35,6 +38,20 @@
   export default {
     name:'AddVersion',
     data(){
+      const titleVaild = (rule, value, callback) => {
+        if (!value) {
+          return callback(new Error('请输入版本号'));
+        }
+        if (value.length >= 30) {
+           this.form.name = value.substr(0, 30);
+           this.$message({
+             showClose: true,
+             type: 'warning',
+             message: '已超过最大字数限制'
+           })
+        }
+        callback();
+      };
       return{
         // data:{},
         list:[],
@@ -48,7 +65,8 @@
         },
         id:null,
         rules:{
-          name:{ required: true, message: '请输入版本号', trigger: ['blur', 'change'] },
+          name:[{ required: true, validator: titleVaild, trigger: [ 'change'] },
+                { required: true, message: '请输入版本号',trigger: ['blur', 'change'] }],
           refreshTime:{ required: true, message: '请选择时间', trigger: ['blur', 'change'] }
         },
         pickerOptions1:{
@@ -89,60 +107,66 @@
       getDetailList(data){//子组件数据
         this.list = data;
       },
-      comfirn(){
-        if(!this.form.name.trim() || !this.form.refreshTime.trim()){
+      comfirn(form){
+        /*if(!this.form.name.trim() || !this.form.refreshTime.trim()){
           this.$message({
             message:'请填写相关内容',
             type:'warning'
           });
           return
-        }
-        if(this.id && !this.copy){//修改
-          const param = Object.assign({},this.form,{id:this.id})
-          api.updateVersInfo(param).then((res)=>{
-            if(res.data.code==0){
-              this.$message({
-                message:"修改成功",
-                type:'success'
+        }*/
+        this.$refs[form].validate((valid) => {
+          if (valid) {
+            if(this.id && !this.copy){//修改
+              const param = Object.assign({},this.form,{id:this.id})
+              api.updateVersInfo(param).then((res)=>{
+                if(res.data.code==0){
+                  this.$message({
+                    message:"修改成功",
+                    type:'success'
+                  })
+                  this.$router.push({path: 'LT-YXSJWH-BBXXWH'});
+                }else{
+                  this.$message({
+                    message:res.data.msg,
+                    type:'warning'
+                  });
+                }
               })
-              this.$router.push({path: 'LT-YXSJWH-BBXXWH'});
-            }else{
-              this.$message({
-                message:res.data.msg,
-                type:'warning'
-              });
-            }
-          })
-        }else{//添加
-          // 复制时把list多余字段过滤掉，如id等
-          const detail = this.list;
-          let copyDetail=[];
-          let item={};
-          if(detail && detail.length>0){
-            for(let i=0; i<detail.length; i++){
-              item.title = detail[i].title;
-              item.description = detail[i].description;
-              copyDetail.push(item);
-              item={};
-            }
-          }
-          const params = Object.assign({},this.form,{'versionDetail':copyDetail});
-          // api.addVersInfo(this.form).then((res)=>{
-          api.addVersInfo(params).then((res)=>{
-            if(res.data.code==0){
-              this.$message({
-                message:"添加成功",
-                type:'success'
+            }else{//添加
+              // 复制时把list多余字段过滤掉，如id等
+              const detail = this.list;
+              let copyDetail=[];
+              let item={};
+              if(detail && detail.length>0){
+                for(let i=0; i<detail.length; i++){
+                  item.title = detail[i].title;
+                  item.description = detail[i].description;
+                  copyDetail.push(item);
+                  item={};
+                }
+              }
+              const params = Object.assign({},this.form,{'versionDetail':copyDetail});
+              // api.addVersInfo(this.form).then((res)=>{
+              api.addVersInfo(params).then((res)=>{
+                if(res.data.code==0){
+                  this.$message({
+                    message:"添加成功",
+                    type:'success'
+                  })
+                  this.$router.push({path: 'LT-YXSJWH-BBXXWH'});
+                }else{
+                  this.$message({
+                    message:res.data.msg,
+                    type:'warning'
+                  });
+                }
               })
-              this.$router.push({path: 'LT-YXSJWH-BBXXWH'});
-            }else{
-              this.$message({
-                message:res.data.msg,
-                type:'warning'
-              });
-            }
-          })
-        }
+            }  
+          } else {
+            return false;
+          }
+        });   
       },
     },
     components:{
@@ -150,7 +174,7 @@
     }
   }
 </script>
-<style lang="less" scoped>
+<style lang="less">
   @import "../../less/admin.less";
   .content{
     background: #fff;
@@ -165,7 +189,12 @@
     .disclButn{
       position: absolute;
       right: 80px;
-      bottom: 0px;
+      bottom: 10px;
+    }
+  }
+  .add-version-form{
+    .version-num{
+      width: 500px;
     }
   }
 

src/components/icss/VersionDesc.vue

@@ -40,7 +40,7 @@
             </template>
         </el-table-column>
     </el-table>
-    <el-button v-if="isFirst" class="disclButn" size="small" type="primary" @click="addDesc">+ 添加说明</el-button>
+    <el-button v-if="isFirst" class="disclButn1" size="small" type="primary" @click="addDesc">+ 添加说明</el-button>
     <div class="boxMark" v-if="showBox">
         <el-form ref="form" :model="form" :rules="showDesc?{}:rules" label-width="65px" class="add-desc-form">
           <p class="top">
@@ -55,7 +55,7 @@
             <p v-if="showDesc" v-html="form.description" class="cont">{{form.description}}</p>
             <el-input v-else type="textarea" :rows="3" placeholder="请输入内容" v-model="form.description" maxlength="120"></el-input>
           </el-form-item>
-          <el-button class="disclButn" size="small" type="primary" @click="comfirn">确定</el-button>
+          <el-button class="disclButn1" size="small" type="primary" @click="comfirn('form')">确定</el-button>
           <!-- <el-button class="disclButn can" size="small" type="primary" @click="cancel">取消</el-button> -->
       </el-form>
     </div>
@@ -70,8 +70,8 @@
         if (!value) {
           return callback(new Error('请输入标题'));
         }
-        if (value.length > 30) {
-           this.form.name = value.substr(0, 30);
+        if (value.length >= 30) {
+           this.form.title = value.substr(0, 30);
            this.$message({
              showClose: true,
              type: 'warning',
@@ -139,91 +139,98 @@
         this.minTitle='添加说明';
         this.showBox = true;
       },
-      comfirn(){//记得清空modiId
-        if(!this.form.title.trim() || !this.form.description.trim()){
+      comfirn(form){//记得清空modiId
+        /*if(!this.form.title.trim() || !this.form.description.trim()){
           this.$message({
             message:'请填写相关信息',
             type:'warning'
           });
           return
-        }
-        // 修改--直接调修改接口；复制--新增
-          if(this.modiId){//修改
-            if(!this.isCopy){
-              const param = {
-                title:this.form.title,
-                description:this.form.description,
-                detailId:this.modiId
-              }
-              api.modiVersionInfo(param).then((res)=>{
-                if(res.data.code==0){
-                  this.$message({
-                    message:"修改成功",
-                    type:'success'
-                  })
-                  this.getList();
-                  /*for(let i in this.list){
-                    if(this.list[i].id==this.modiId){
-                      this.list[i].title=this.form.title;
-                      this.list[i].description=this.form.description;
-                    }
-                  }*/
-                  this.reset();
-                }else{
-                  this.$message({
-                    message:res.data.msg,
-                    type:'warning'
-                  });
+        }*/
+        this.$refs[form].validate((valid) => {
+          if (valid) {
+              // 修改--直接调修改接口；复制--新增
+            if(this.modiId){//修改
+              if(!this.isCopy){
+                const param = {
+                  title:this.form.title,
+                  description:this.form.description,
+                  detailId:this.modiId
                 }
-              })
-            }else{
-              for(let i in this.list){
-                if(this.list[i].id==this.modiId){
-                  this.list[i].title=this.form.title;
-                  this.list[i].description=this.form.description;
+                api.modiVersionInfo(param).then((res)=>{
+                  if(res.data.code==0){
+                    this.$message({
+                      message:"修改成功",
+                      type:'success'
+                    })
+                    this.getList();
+                    /*for(let i in this.list){
+                      if(this.list[i].id==this.modiId){
+                        this.list[i].title=this.form.title;
+                        this.list[i].description=this.form.description;
+                      }
+                    }*/
+                    this.reset();
+                  }else{
+                    this.$message({
+                      message:res.data.msg,
+                      type:'warning'
+                    });
+                  }
+                })
+              }else{
+                for(let i in this.list){
+                  if(this.list[i].id==this.modiId){
+                    this.list[i].title=this.form.title;
+                    this.list[i].description=this.form.description;
+                  }
                 }
+                this.$emit('func',this.list);//向父组件传明细
+                this.reset();
               }
-              this.$emit('func',this.list);//向父组件传明细
+              
+            }else if(this.showDesc){//明细
               this.reset();
-            }
-            
-          }else if(this.showDesc){//明细
-            this.reset();
-          }else{//添加
-            const item = {
-              description: this.form.description,
-              title: this.form.title,
-            }
-            if(!this.isCopy){
-              const params = {
-                versionDetail: [
-                  item
-                ],
-                versionInfoId: this.versionId
+            }else{//添加
+              const item = {
+                description: this.form.description,
+                title: this.form.title,
               }
-              api.addVersionInfo(params).then((res)=>{
-                if(res.data.code==0){
-                  this.$message({
-                    message:"添加成功",
-                    type:'success'
-                  })
-                  this.getList();
-                  /*this.list.push(item);*/
-                  this.reset();
-                }else{
-                  this.$message({
-                    message:res.data.msg,
-                    type:'warning'
-                  });
+              if(!this.isCopy){
+                const params = {
+                  versionDetail: [
+                    item
+                  ],
+                  versionInfoId: this.versionId
                 }
-              })
-            }else{//仅添加到本地list
-              this.list.push(item);
-              this.$emit('func',this.list);
-              this.reset();
-            } 
+                api.addVersionInfo(params).then((res)=>{
+                  if(res.data.code==0){
+                    this.$message({
+                      message:"添加成功",
+                      type:'success'
+                    })
+                    this.getList();
+                    /*this.list.push(item);*/
+                    this.reset();
+                  }else{
+                    this.$message({
+                      message:res.data.msg,
+                      type:'warning'
+                    });
+                  }
+                })
+              }else{//仅添加到本地list
+                this.list.push(item);
+                this.$emit('func',this.list);
+                this.reset();
+              } 
+            }
+            // this.reset();
+          } else {
+            return false;
           }
-          // this.reset();
+        }); 
+           
       },
       reset(){//关闭弹窗复原数据
         this.showBox = false;
@@ -299,7 +306,7 @@
 </script>
 <style lang="less" >
   @import "../../less/admin.less";
-  .disclButn{
+  .disclButn1{
     margin: 30px 0 10px;
   }
   .boxMark{