platformFront/src/components/icss/AddVersion.vue

<template>
  <div>
    <crumbs :title="title" :param="$route.params" linkTo="VersionInfo"></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 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="21"></el-input>
          </el-form-item>
          <el-form-item label="版本时间：" prop="refreshTime">
            <el-date-picker
              v-model="form.refreshTime"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
              :clearable='false'>
            </el-date-picker>
          </el-form-item>
          <el-form-item label="版本备注：" prop="remark" class="discDesc">
              <el-input type="textarea" :rows="3" placeholder="请输入版本备注" v-model="form.remark" maxlength="121"></el-input>
          </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" :disabled = 'saveDisable' @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> -->
      </div>    
    </div>
  </div>
</template>
<script type="text/javascript">
  import api from '@api/icss.js';
  import VersionDesc from './VersionDesc.vue';
  export default {
    name:'AddVersion',
    data(){
      const titleVaild = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入版本号'));
        }
        if (value.length > 20) {
           this.form.name = value.substr(0, 20);
           this.$message({
             showClose: true,
             type: 'warning',
             message: '版本号已超过最大限制20字'
           })
        }
        callback();
      };
      const remarkVaild = (rule, value, callback) => {
        if (value.length > 120) {
           this.form.remark = value.substr(0, 120);
           this.$message({
             showClose: true,
             type: 'warning',
             message: '版本备注已超过最大限制120字'
           })
        }
        callback();
      };
      return{
        // data:{},
        list:[],
        labelPosition:'left',
        isFirst:true,
        title:'版本信息维护-添加版本信息',
        form:{
          name:'',
          refreshTime:'',
          remark:''
        },
        id:null,
        rules:{
          name:[{ required: true, validator: titleVaild, trigger: [ 'change'] },
                { required: true, message: '请输入版本号',trigger: ['blur', 'change'] }],
          remark:{ required: false, validator: remarkVaild, trigger: [ 'change'] },
          refreshTime:{ required: true, message: '请选择时间', trigger: ['blur', 'change'] }
        },
        pickerOptions1:{
          disabledDate(time) {
            return time.getTime() < Date.now();
          },
        },
        copy:null,
        saveDisable: false  //保存按钮禁止点击
      }
    },
    created(){
      let info = this.$route.params.info;
      this.copy = this.$route.params.copy;
      if(info){
        this.id = info.id;
        this.form.name = info.name;
        this.form.refreshTime = info.refreshTime;
        this.form.remark = info.remark;
        this.title = this.copy?"版本信息维护-复制版本信息":"版本信息维护-修改版本信息";
        // this.getList();
        this.list = info.detail;
      }
    },
    methods:{
      /*getList(){
        api.getVersionDetlInfo({id:this.id}).then((res)=>{
          const result = res.data;
          if(result.code==0){
            this.list = result.data;
          }else{
            this.$message({
              message:result.msg,
              type:'warning'
            });
          }
        })
      },*/
      getDetailList(data){//子组件数据
        this.list = data;
      },
      comfirn(form){
        /*if(!this.form.name.trim() || !this.form.refreshTime.trim()){
          this.$message({
            message:'请填写相关内容',
            type:'warning'
          });
          return
        }*/
        this.$refs[form].validate((valid) => {
          if (valid) {
            if(this.id && !this.copy){//修改
              const param = Object.assign({},this.form,{id:this.id})
              this.saveDisable = true  //提交保存按钮不可点击，返回结果时才可点击，防止频繁发送请求
              api.updateVersInfo(param).then((res)=>{
                if(res.data.code==0){
                  this.$message({
                    message:"修改成功",
                    type:'success'
                  });
                  //返回带搜索条件的首页
                  this.$router.push({
                    name: 'VersionInfo',
                    params: Object.assign({}, this.$route.params, {currentPage: 1})
                  });
                }else{
                  this.$message({
                    message:res.data.msg,
                    type:'warning'
                  });
                }
                this.saveDisable = false
              })
            }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)=>{
              this.saveDisable = true  //提交保存按钮不可点击，返回结果时才可点击，防止频繁发送请求
              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.saveDisable = false
              })
            }  
          } else {
            return false;
          }
        });   
      },
    },
    components:{
      VersionDesc
    }
  }
</script>
<style lang="less">
  @import "../../less/admin.less";
  .content{
    background: #fff;
    // padding: 20px 20px 30px;
    padding: 20px 20px 50px;
    color: #545455;
    min-width: 980px;
    position: relative;
    .discDesc{
      margin-bottom: 20px;
    }
    .disclButn{
      position: absolute;
      right: 80px;
      bottom: 10px;
    }
  }
  .add-version-form{
    .version-num{
      width: 500px;
    }
  }

</style>