element 表单校验

/* eslint-disable consistent-return */
<template>
<div>
  <div class="projectMask"></div>
  <div class="project">
    <div class="mask"></div>
    <i class="el-icon-close" @click="hideForm"></i>
    <div class="aside">
      <p class="title">编辑项目信息</p>
      <el-form :model="projectForm" label-width="0" :rules="rules" ref="form">
        <el-form-item prop="name">
          <p class="form-title">项目名称：</p>
          <el-input  class="form-ipt" v-model="projectForm.name" placeholder="输入项目名称" ></el-input>
        </el-form-item>

        <el-form-item prop="childName">
          <p class="form-title">子项目名称：</p>
          <el-input class="form-ipt" v-model="projectForm.childName" placeholder="输入子项目名称" ></el-input>
        </el-form-item>

        <el-form-item class="address" prop="addrArr">
          <p class="form-title">项目地点：</p>
          <el-select v-model="projectForm.addrArr.province" placeholder="省/直辖市">
            <el-option
                @click.native="provinceClick(index)"
                v-for="(item,index) in addressData"
                :key="item.code"
                :label="item.name"
                :value="+item.code">
              </el-option>
            </el-select>
            <el-select v-model="projectForm.addrArr.city" placeholder="地级市">
              <el-option
               @click.native="cityClick(index)"
                v-for="(item,index) in cityData"
                :key="item.code"
                :label="item.name"
                :value="+item.code">
              </el-option>
            </el-select>
            <el-select v-model="projectForm.addrArr.area" placeholder="县级市">
              <el-option
                v-for="item in areaData"
                :key="item.code"
                :label="item.name"
                :value="+item.code">
              </el-option>
            </el-select>
        </el-form-item>
        <el-form-item prop="ruleId">
          <p class="form-title">评分规则：</p>
          <el-select v-model="projectForm.ruleId" placeholder="评分规则">
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
        </el-form-item>
        <el-form-item>
          <p class="form-title">设计单位：</p>
          <el-input maxlength="20" class="form-ipt" v-model="projectForm.designCompany" placeholder="输入设计单位"></el-input>
        </el-form-item>
        <el-form-item>
          <p class="form-title">建设单位：</p>
          <el-input maxlength="20" class="form-ipt" v-model="projectForm.buildCompany" placeholder="输入建设单位"></el-input>
        </el-form-item>
        <div class="btn">
          <el-button  @click="hideForm">取消</el-button>
          <el-button class="com" @click="handleSave">保存</el-button>
        </div>
      </el-form>
    </div>
  </div>
  </div>
</template>

<script>

export default {
  name: 'editProjectInfo',
   
  },
  data() {
    let checkAddress = (rule, value, callback) => {
      console.log(this.projectForm.addrArr.city);
      if (this.projectForm.addrArr.city && String(this.projectForm.addrArr.city).length === 4) {
        return false;
      }
      callback(new Error('请选择项目地点'));
    };

    return {
      provinceIndex: null,
      cityIndex: null,
      areaIndex: null,
      addressData: [],
      cityData: [],
      areaData: [],
      options: [
        {
          name: '深圳市装配式建筑评分规则',
          id: '1212',
        },
      ],
      projectForm: {
        name: null,
        childName: null,
        ruleId: '',
        address: '',
        designCompany: null,
        buildCompany: null,
        addrArr: {
          province: 44,
          city: 4403,
          area: 440305,
        },
      },
      rules: {
        name: [
          { required: true, message: '请输入项目名称', trigger: 'blur' },
          { min: 1, max: 20, message: '字符长度1~20', trigger: 'blur' },
        ],
        childName: [
          { required: true, message: '请输入子项目名称', trigger: 'blur' },
          { min: 1, max: 20, message: '字符长度1~20', trigger: 'blur' },
        ],
        ruleId: [
          { required: true, message: '请选择评分规则', trigger: 'change' },
          { min: 4, max: 4, message: '请选择评分规则', trigger: 'change' },
        ],
        addrArr: [
          { validator: checkAddress, trigger: 'blur' },
        ],
      },

      formObj: {}, // 父组件传递过来的当前编辑项目对象
    };
  },
  computed: {
    formIsChange() {
      const oldForm = JSON.stringify(this.formObj);
      const newForm = JSON.stringify(this.projectForm);
      if (oldForm === newForm) {
        return false;
      }
      return true;
    },
  },
  created() {
    this.init();
  },
  methods: {
    provinceClick(index) {
      if (this.provinceIndex === index) {
        return;
      }
      this.projectForm.addrArr.city = null;
      this.provinceIndex = index;
      this.cityData = [];
      this.cityIndex = null;
      this.projectForm.addrArr.area = null;
      this.cityData = this.addressData[index].children;
      this.areaData = [];
      this.areaIndex = null;
    },
    cityClick(index) {
      if (this.cityIndex === index) {
        return;
      }
      this.cityIndex = index;
      this.projectForm.addrArr.area = null;
      this.areaData = this.cityData[index].children;
      this.areaIndex = null;
    },
    init() {
      this.$http.get('/static/js/pcas-code.json').then((response) => {
        this.addressData = response.body;
        if (this.projectForm.addrArr.province) {
          for (let i = 0; i < this.addressData.length; i += 1) {
            if (this.addressData[i].code == this.projectForm.addrArr.province) {
              this.cityData = this.addressData[i].children;
              this.provinceIndex = i;
            }
          }
        }

        if (this.cityData && this.projectForm.addrArr.city) {
          for (let i = 0; i < this.cityData.length; i += 1) {
            if (this.cityData[i].code == this.projectForm.addrArr.city) {
              this.areaData = this.cityData[i].children;
              this.cityIndex = i;
            }
          }
        }

        if (this.areaData && this.projectForm.addrArr.area) {
          for (let i = 0; i < this.areaData.length; i += 1) {
            if (this.areaData[i].code == this.projectForm.addrArr.area) {
              this.areaIndex = i;
            }
          }
        }
      });
    },

    hideForm() {
      this.initialization();
      this.closeBullet();
    },

    // 值初始化
    initialization() {
      this.projectForm = {
        name: null,
        childName: null,
        ruleId: '',
        address: '',
        designCompany: null,
        buildCompany: null,
        addrArr: {
          province: null,
          city: null,
          area: null,
        },
      };
    },

    closeBullet() {
      this.$parent.isShow = false;
    },
    // 新增项目
    async addProject() {
     
    },

    // 编辑项目
    async editProject() {
      
    },

    handleSave() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.editProject();
          // 关闭弹框
          this.closeBullet();
        }
      });
    },
  },

};
</script>
<style lang="scss" scoped>
@import '../../.././../../mixinCss/mixin';
.projectMask{
  position: fixed;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.05);
}
.project{
   378px;
  height: 405px;
  background: #ffffff;
  position: fixed;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.05);
  border-radius: 4px;

  .el-icon-close{
    position: absolute;
    top: 12px;
    right: 12px;
    color: $wordColor;
    cursor: pointer;
    font-size: 16px;
  }
  .aside{
     100%;
    background: #ffffff;
    border-radius: 4px;
    font-family: $fontFamily;
    font-weight: 400;
    .title{
      height: 40px;
      line-height: 40px;
      color: $titleColor;
      font-size: 16px;
      background-color: #EFEFEF;
      text-align: left;
      padding-left: 12px;
    }
    .el-form{
      padding: 12px 12px 0;
      border-radius: 4px;
      >>> .el-form-item__content{
        line-height: 28px;
        display: flex;
      }
      >>> .el-form-item{
        display: flex;
        align-items: center;
      }
      >>> .el-input{
         270px;
        height: 32px;
      }
      .address  >>> .el-input{
         89px;
        height: 32px;
        font-size: 12px;
        margin-right: 2px;
      }
      >>> .el-input__inner{
        height: 32px;
        padding-left: 10px;
        border-color: #f2f2f2;
        color: #888888;
        font-size: 12px;
      }
      >>> .el-input__inner:focus{
        border-color: $borderColor;
      }
      >>> .el-form-item__error{
        left: 84px;
        padding-top: 4px;
      }
      >>> .el-input__prefix{
        display: none;
      }
      .form-title{
        font-size: 14px;
        color: #666666;
         84px;
        text-align: right;
        >span{
          color: red;
        }
      }
      .btn{
        margin-top: -10px;
        box-sizing: border-box;
        >>> .el-button{
           64px;
          height: 28px;
          padding: 0px;
          border-color: #f2f2f2;
          color: #888888;
          background: #ffffff;
          font-size: 12px;
        }
        .com{
          background: $wordActive;
          color: #ffffff;
        }
      }
    }
  }
}
</style>