FE-V2-PC/src/views/gasManage3_0/manage/supplierManage/supplierManageAdd.vue

<!--资格申请-添加-->
<template>
  <div class="addPage">
    <div class="addPage_title">
      <p>新增供应商</p>
      <P>填写供应商提供的材料信息，内容提交后需要进行审核，通过审核的供应商可以在供应商后台添加运输人员和气瓶规格。  </P>
      <p class="button-p reset-button-one" @click="backPage">返回</p>
    </div>
    <div class="addPage_b">
      <div class="addPage_b_t">
          <li>
            <img src="@/assets/ZDimages/icon_jbxx_xz.png"/>
            <p>填写基本信息</p>
          </li>
          <i></i>
          <li>
            <img v-if="pageType==1" src="@/assets/ZDimages/icon_xxrp_zc.png"/>
            <img v-if="pageType==2 || pageType==3"  src="@/assets/ZDimages/icon_xxrp_xz.png"/>
            <p>上传资质材料</p>
          </li>
          <i v-if="status==0"></i>
          <li v-if="status==0">
            <img v-if="pageType==1 || pageType==2" src="@/assets/ZDimages/gasManage3_0/icon_zc_qrxx.png"/>
            <img v-if="pageType==3"  src="@/assets/ZDimages/gasManage3_0/icon_xxrp_xz.png"/>
            <p>确认信息</p>
          </li>
      </div>
      <!--申请1-->
      <div v-if="pageType==1" class="addPage_b_b_n">
        <el-form class="addPage_b_b" :model="form" ref="form" :rules="rules" label-position="right" label-width="100px">
          <el-form-item label="供应商名称:" prop="companyName" >
            <el-input  style="width: 300px" v-model="form.companyName"  @blur="nameVerifyFun"  placeholder="请输入供应商名称"  maxlength="20" />
          </el-form-item>
          <el-form-item label="供应商简称:" >
            <el-input  style="width: 300px" v-model="form.companyShort" placeholder="请输入供应商简称"  maxlength="10" />
          </el-form-item>
          <el-form-item label="联系人:" prop="contacts">
            <el-input  style="width: 300px" v-model="form.contacts" placeholder="请输入联系人姓名"  maxlength="10" />
          </el-form-item>
          <el-form-item label="联系方式:" prop="phone" >
              <el-input   style="width: 300px" v-model="form.phone"  placeholder="请输入联系方式"  />
          </el-form-item>
          <el-form-item label="经营地址:" prop="businessAddress" >
            <el-input  style="width: 300px" v-model="form.businessAddress"  placeholder="请输入供应商经营地址" maxlength="50" />
          </el-form-item>
        </el-form>
        <p class="inquire-button-one" style="width:400px;margin: 0 auto" @click="handleClick('','form','next')">下一步</p>
        <div class="line"></div>
        <div class="explain">
          <p>说明：</p>
          <p>供应商名称为供应商经营执照名称；供应商简称为企业简称，方便管理和记录；联系人建议填写企业业务负责人或与学校对接人员；</p>
        </div>
      </div>
      <!--申请2-->
      <div v-if="pageType==2" class="apply_tow">
        <el-form class="apply_tow_li" :model="form" ref="form" :rules="rules" label-position="right" label-width="140px">
          <li v-for="(item,index) in qpSupplierCredentialsDtos">
            <div class="apply_tow_li_t">
              <div class="apply_tow_li_t_l">
                <el-form-item :label="item.naturalName+':'" :prop="item.required==1?'empty':''">
                  <el-upload
                    class="certificate-avatar-uploader"
                    :action="uploadImgUrl"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess.bind(null, {'item': item})"
                    :headers="headers"
                   >
                    <img v-if="item.naturalUrl" :src="item.naturalUrl" style="width: 250px;height: 150px;"/>
                    <img v-if="!item.naturalUrl"  src="@/assets/ZDimages/gasManage3_0/img_gysgl_sc.png" style="width: 250px;height: 150px;"/>
                  </el-upload>
                </el-form-item>
              </div>
              <div class="apply_tow_li_t_r">
                <el-form-item label="有效期:" :prop="item.required==1?'empty':''">
                  <el-date-picker
                    :clearable="false"
                    v-model="item.dateRange"
                    @change="timeFun(item)"
                    size="small"
                    style="width: 300px"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  ></el-date-picker>
                </el-form-item>
              </div>
            </div>
            <div class="apply_tow_li_b">{{item.remark}}</div>
          </li>
        </el-form>
        <div class="sub_btn">
          <p class="reset-button-one" style="width:150px;margin-right: 30px" @click="handleClick('','','last')">返回上一步</p>
          <p class="inquire-button-one" style="width:150px;" v-if="status==0" @click="handleClick('','','next2')">下一步</p>
          <p class="inquire-button-one" style="width:150px;" v-if="status==1" @click="submitForm()">提交修改</p>
        </div>
        <div class="line"></div>
        <div class="explain">
          <p>说明：</p>
          <p>请验证按照执照(许可证)的真实有效期进行填写，执照(许可证)的有效期的设置将会关联证书到期提醒，当执照(许可证)过期时将会对实验中心和供应商进行提醒。</p>
        </div>
      </div>
      <!--申请3-->
      <div v-if="pageType==3 && status==0" class="apply_tree" >
        <div class="apply_tree_t">
          <img  src="@/assets/ZDimages/gasManage3_0/icon_sml_lxr.png"/>
          <i>请认真核对提交的供应商信息，确认无误后点击提交进行审核。</i>
        </div>
        <div class="apply_tree_m">
          <li>
            <img  src="@/assets/ZDimages/gasManage3_0/icon_xxjl_gs.png"/>
            <div class="apply_tree_m_r">
              <i>供应商名称：</i>
              <p>{{form.companyName}}</p>
              <i>经营地址：</i>
              <p>{{form.businessAddress}}</p>
            </div>
          </li>
          <i></i>
          <li>
            <img  src="@/assets/ZDimages/gasManage3_0/icon_xxjl_lxr.png"/>
            <div class="apply_tree_m_r">
              <i>联系人：</i>
              <p>{{form.contacts}}</p>
              <i>联系方式：</i>
              <p>{{form.phone}}</p>
            </div>
          </li>
        </div>
        <div class="apply_tree_b" >
          <li v-for="(item2,index2) in form.qpSupplierCredentialsDtos">
            <div class="apply_tree_b_t">{{item2.naturalName}}：</div>
            <div class="apply_tree_b_m"><img  :src="item2.naturalUrl"/></div>
            <div class="apply_tree_b_b"><i style="color: #333333;font-style: normal;">有效期</i>：{{item2.startTime}}至{{item2.endTime}}</div>
          </li>
        </div>
        <div class="apply_tree_b2">
          <el-form class="addPage_b_b" :model="form" ref="form" :rules="rules" label-position="right" label-width="100px">
            <el-form-item label="登录账号:" prop="empty">
              <el-input  style="width: 300px" v-model="form.sysUserDto.userName"  @blur="verify()"  placeholder="请输入登录账号"  maxlength="50" />
            </el-form-item>
            <el-form-item label="登录密码:" prop="empty" >
              <el-input  style="width: 300px" v-model="form.sysUserDto.password" @blur="verify2()"   placeholder="请输入登录密码" maxlength="50" />
            </el-form-item>
            <el-form-item label="确认密码:" prop="empty">
              <el-input  style="width: 300px" v-model="form.sysUserDto.rePassword" @blur="affirm()"  placeholder="请再次输入登录密码" maxlength="50" />
            </el-form-item>
          </el-form>
        </div>
        <div class="sub_btn">
          <p class="reset-button-one" style="width:150px;margin-right: 30px" @click="handleClick('','','last2')">返回上一步</p>
          <p class="inquire-button-one" style="width:150px;" @click="submitForm">提交</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getToken } from "@/utils/auth";
import {
  certificateList,
  getLoginUser,
  qualificationApplyAdd,
  qualificationApplyAnew,
  subjectList, supplierAdd, supplierDetail, supplierNameVerify, supplierUpdate
} from '@/api/gasManage3_0/gasManage'
export default {
  name: "addPage",
  props:{
    pageData:{},
  },
  data() {
    // 时间的校验
    const validateTime = (rule, value, callback) => {
      console.log(value)
      if(value && value.length>0){
        this.form.startTime=value[0]
        this.form.endTime=value[1]
        callback();
      }else{
        this.form.startTime=null;
        this.form.endTime=null
        callback(new Error('使用期限不能为空'))
      }
    }
    const empty=(rule, value, callback) => {
      callback();
    }
    return {
      pageType:1,
      uploadImgUrl: window.location.href.split('://')[0]+'://' + process.env.VUE_APP_BASE_API + "/file/upload", // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      // 设置只能选择当前日期及之后的日期
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;//如果没有后面的-8.64e7就是不可以选择今天的
        }
      },
      loading:false,
      form:{
        id:'',
        companyName:'',
        companyShort:'',
        contacts:'',
        phone:'',
        businessAddress:'',

        sysUserDto:{
          userName:'',
          password:'',
          rePassword:'',
        }
      },
      qpSupplierCredentialsDtos:[],
      dateRange:[],
      laboratoryOptions:[],

      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize:20,
      },
      total:0,
      tableData:[{
        num:0,
      }],
      dialogVisible:false,
      id:'',
      status:null,
      // 表单校验
      rules: {

        companyName: [
          { required: true, message: "请输入供应商名称", trigger: "blur" },
          { required: true, message: "请输入供应商名称", validator: this.spaceJudgment, trigger: "blur" }
        ],
        contacts: [
          { required: true, message: "请输入联系人姓名", trigger: "change" },
          { required: true, message: "请输入联系人姓名", validator: this.spaceJudgment, trigger: "blur" }
        ],
        phone: [
          { required: true, message: "请输入联系方式", trigger: "blur" },
          { required: true, message: "请输入联系方式", validator: this.spaceJudgment, trigger: "blur" },
          { pattern:/^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(16[0-9])|(17[0,3,5-8])|(18[0-9])|(147))+\d{8}$/, message: "请输入正确的联系方式", trigger: "blur" }
        ],
        empty:[
          { required: true, validator:empty, trigger: "change" },
        ],

        dateRange: [
          {required: true, validator: validateTime, trigger: 'blur' },
        ],
      },
    };
  },
  created() {

  },
  methods: {

    handleClick(index,row,doType){
      let _this=this;

      if(doType=='next'){//下一步
       //非空校验
        this.$refs[row].validate((valid) => {
          if (valid) {
            _this.pageType=2;
          } else {
            return false;
          }
        });
      }else if(doType=='last'){//上一步
        _this.pageType=1;
      }else if(doType=='next2'){//下一步
        //判断添加了几个
        _this.form.qpSupplierCredentialsDtos=[];
        try{
          let arr=[];
          for(let i=0;i<_this.qpSupplierCredentialsDtos.length;i++){

            if(_this.qpSupplierCredentialsDtos[i].required==1){

              if(!_this.qpSupplierCredentialsDtos[i].naturalUrl){
                _this.$message.error('未上传'+_this.qpSupplierCredentialsDtos[i].naturalName+'，请上传'+_this.qpSupplierCredentialsDtos[i].naturalName);
                throw Error();
              }
              if(!_this.qpSupplierCredentialsDtos[i].startTime || !_this.qpSupplierCredentialsDtos[i].endTime){
                _this.$message.error( '请选择'+_this.qpSupplierCredentialsDtos[i].naturalName+'有效期');
                throw Error();
              }
              arr.push(_this.qpSupplierCredentialsDtos[i])
            }else{
              arr.push(_this.qpSupplierCredentialsDtos[i])
            }
          }
          let arr1=[]
          arr.forEach(function(item){
            if(item.naturalUrl && item.startTime && item.endTime){
              arr1.push(item)
            }
          })
          _this.form.qpSupplierCredentialsDtos=arr1;
          _this.pageType=3;
        }catch(e){
          console.log(e)
        }

      }else if(doType=='last2'){//上一步
        _this.pageType=2;
      }
    },

    /** 获取资质证照列表 */
    certificateList() {
      let _this=this;
      certificateList({type:1}).then( response => {
        let res=response.data
        if(response.code==200){
          //重新渲染后台返回数据
          res.forEach(function(item){
            _this.qpSupplierCredentialsDtos.push({'naturalName':item.name,'naturalUrl':'','startTime':'','endTime':'',dateRange:null,'remark':item.remark,'certificateId':item.id,'required':item.required})
          })
        }

      });
    },
    verify(){
      if(this.form.sysUserDto.userName.length<6 || this.form.sysUserDto.userName.length>16){
        this.$message.error('登录密码不能超出16位、不能低于6位!');
        this.form.sysUserDto.userName='';
        return
      }
      let reg=/[\u4E00-\u9FA5]|[\uFE30-\uFFA0]|[`~!@#$%^&*()_\+=<>?:"{}|~！#￥%……&*（）={}|《》？：“”【】、；‘’，。、\s+]/;
      let aa= reg.test(this.form.sysUserDto.userName)
      if(reg.test(this.form.sysUserDto.userName)){
        this.$message.error('登录密码中有中文，空格或特殊字符，请重新输入!');6
        this.form.sysUserDto.userName='';
      }

    },
    verify2(){
      if(this.form.sysUserDto.password.length<6 || this.form.sysUserDto.password.length>16){
        this.$message.error('登录密码不能超出16位、不能低于6位!');
        this.form.sysUserDto.password='';
        return
      }
      let reg=/[\u4E00-\u9FA5]|[\uFE30-\uFFA0]|[`~@!#$%^&*()_\+=<>?:"{}|~！#￥%……&*（）={}|《》？：“”【】、；‘’，。、\s+]/;
      let aa= reg.test(this.form.sysUserDto.password)
      if(reg.test(this.form.sysUserDto.password)){
        this.$message.error('登录密码中有中文，空格或特殊字符，请重新输入!');
        this.form.sysUserDto.password='';
      }

    },
    affirm(){
      if(this.form.sysUserDto.password!=this.form.sysUserDto.rePassword){
        this.$message.error('密码输入不一致，请重新输入！');
        this.form.sysUserDto.rePassword='';
      }
    },
    //供应商名称校验
    nameVerifyFun(){
      let obg={
        name:this.form.companyName,
        type:1,//	传入的参数类型（1：供应商名称，2：供应商简称，默认供应商名称，可不传）,示例值(1)
      }
      supplierNameVerify(obg).then( response => {
        let res=response.data
        if(response.code==200){
          //重新渲染后台返回数据

        }

      });
    },

    //时间选择方法
    timeFun(item){
      let _this=this;
      item.startTime=item.dateRange[0]
      item.endTime=item.dateRange[1]
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.searchValue = "";
      this.handleQuery();
    },
    //上传
    handleAvatarSuccess(obj, res) {
      let _this=this;
      _this.qpSupplierCredentialsDtos.forEach(function(item){
          if(obj.item.certificateId==item.certificateId){
            item.naturalUrl=res.data.url
          }
      })
      this.$forceUpdate()
    },
    beforeAvatarUpload(file) {
      let type = false;
      if (file.type == 'image/png' || file.type == 'image/jpeg' || file.type == 'image/gif') {
        type = true;
      }else{
        this.$message.error('只能上传png/jpeg/gif格式图片');
        type = false;
      }
      return type;
    },
    /* 详情 */
    getInfo(id){
      let _this=this;
      supplierDetail(id).then( response => {
        let res=response.data;
        if(response.code==200){
          _this.form=res;
          //_this.form.qpSupplierCredentialsDtos=res.qpSupplierCredentialsVos;

          if(_this.qpSupplierCredentialsDtos){
            _this.qpSupplierCredentialsDtos.forEach(function(item){
              res.qpSupplierCredentialsVos.forEach(function(item2){
                if(item.certificateId==item2.certificateId){
                  item.naturalUrl=item2.naturalUrl
                  item.startTime=item2.startTime
                  item.endTime=item2.endTime
                  item.dateRange=[item2.startTime,item2.endTime]
                }
              })
            })
            console.log( _this.qpSupplierCredentialsDtos)
            console.log(  res.qpSupplierCredentialsVos)
          }

        }
      });

    },
    //提交
    submitForm(){
      let _this = this;
      _this.loading = true;

      if(_this.status==0){//新增
        if(_this.form.sysUserDto.userName==''){
          _this.$message.error('请输入账号!');
          return;
        }else if(_this.form.sysUserDto.password==''){
          _this.$message.error('请输入密码!');
          return;
        }else if(_this.form.sysUserDto.rePassword==''){
          _this.$message.error('请输入确认密码!');
          return;
        }
        supplierAdd(_this.form).then(res => {
          this.$message({
            type: 'success',
            message: '操作成功!',
            duration:2000,
            onClose:function(){
              _this.backPage();
              _this.loading = false;
            }
          });
        });
      }else if(_this.status==1){
        let arr=[];
        try{
          // _this.qpSupplierCredentialsDtos.forEach(function(item){
          //   if(item.required==1){
          //     if(item.naturalUrl && item.dateRange){
          //       arr.push(item)
          //     }else{
          //       _this.$message.error('请填写'+item.naturalName);
          //       throw Error();
          //     }
          //   }else{
          //     arr.push(item)
          //   }
          // })
          //提交的时候过滤空数据
          let arr=[];
          for(let i=0;i<_this.qpSupplierCredentialsDtos.length;i++){

            if(_this.qpSupplierCredentialsDtos[i].required==1){

              if(!_this.qpSupplierCredentialsDtos[i].naturalUrl){
                _this.$message.error('未上传'+_this.qpSupplierCredentialsDtos[i].naturalName+'，请上传'+_this.qpSupplierCredentialsDtos[i].naturalName);
                 throw Error();
              }
              if(!_this.qpSupplierCredentialsDtos[i].startTime || !_this.qpSupplierCredentialsDtos[i].endTime){
                _this.$message.error( '请选择'+_this.qpSupplierCredentialsDtos[i].naturalName+'有效期');
                throw Error();
              }
              arr.push(_this.qpSupplierCredentialsDtos[i])
            }else{
              arr.push(_this.qpSupplierCredentialsDtos[i])
            }
          }

          _this.form.qpSupplierCredentialsDtos=arr;
          //_this.form.qpSupplierCredentialsDtos=_this.qpSupplierCredentialsDtos
          _this.form.qpSupplierCredentialsVos=null;
          supplierUpdate(_this.form).then(res => {
            this.$message({
              type: 'success',
              message: '操作成功!',
              duration:2000,
              onClose:function(){
                _this.backPage();
                _this.loading = false;
              }
            });
          });
        }catch(e){
          console.log(e)
        }

      }

    },
    //返回
    backPage(){
      this.$parent.handleClick('','','back');
      this.$parent.getList();
    },

  },
  mounted() {
    this.status=this.pageData.status;
    this.id=this.pageData.id;
    console.log(this.pageData.id)
    if(this.id){
      this.getInfo(this.id)
    }
    this.certificateList()
  }

};
</script>

<style scoped lang="scss">


.addPage {
  flex:1;
  display: flex!important;
  flex-direction: column;
  box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
  border-radius:10px;
  /*顶部*/
  .addPage_title{
    display: flex;
    align-items: center;
    border-bottom: 1px solid #E0E0E0;
    padding-top:20px;
    p:nth-child(1){
      line-height:60px;
      color: #0045AF;
      font-size:18px;
      margin:0 12px 0 20px;
    }
    p:nth-child(2){
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #999999;
      flex: 1;
    }
    p:nth-child(3){
      margin-right:20px;
    }
  }

  .addPage_b{
    flex: 1;
    display: flex!important;
    flex-direction: column;
    /*时间轴*/
    .addPage_b_t{
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 36px;
      margin-bottom: 50px;
      >li{
        width: 120px;
        text-align: center;
        list-style-type: none;
        >img{
          width: 60px;
          height:60px;
        }
        >p{
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #333333;
          line-height: 16px;
        }
      }
      >i{
        display: inline-block;
        width: 250px;
        height: 2px;
        background: #E0E0E0;
      }
    }
    .line{
      width: 900px;
      margin: 40px auto 30px;
      height: 2px;
      background: #E0E0E0;
    }
    .explain{
      width: 900px;
      margin: 40px auto 30px;
      text-align: left;
      >p:nth-of-type(1){
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
        line-height: 24px;
      }
      >p:nth-of-type(2){
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #999999;
        line-height: 24px;
      }
    }
    /*申请一*/
    .addPage_b_b_n{
      text-align: center;
      .addPage_b_b{
        width: 400px;
        margin: 0 auto;
        padding-top: 46px;
      }

    }

    /*申请二*/
    .apply_tow{
      padding: 0 20px;
      box-sizing: border-box;
      width: 900px;
      margin: 0 auto;
      .apply_tow_li{
        >li{
          list-style-type: none;
          .apply_tow_li_t{
              display: flex;
              justify-content: flex-start;
              .apply_tow_li_t_l{}
              .apply_tow_li_t_r{}

          }
          .apply_tow_li_b{
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #999999;
            line-height: 24px;
            margin-left: 140px;
            margin-bottom: 10px;
          }
        }
      }
      .sub_btn{
        display: flex;
        justify-content: center;
        margin: 30px 0;
      }
    }
    /*申请三*/
    .apply_tree{
      width: 900px;
      margin: 0 auto;
      .apply_tree_t{
        display: flex;
        justify-content: center;
        >img{
          width: 16px;
          height: 16px;
          margin-right: 10px;
        }
        >i{
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #FA8801;
          line-height: 16px;
          font-style: normal;
        }
      }
      .apply_tree_m{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 50px;
        >li{
          display: flex;
          justify-content: flex-start;
          >img{
            width: 102px;
            height: 122px;
            margin-right: 28px;
          }
          .apply_tree_m_r{
            >i{
              display: block;
              font-size: 16px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #999999;
              line-height: 16px;
              font-style: normal;
            }
            >p{
              font-size: 16px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #333333;
              line-height: 16px;
              margin-top: 20px;
            }
          }
        }
        >i{
          width: 2px;
          height: 100px;
          background: #E0E0E0;
          margin: 0 66px;
        }
      }
      .apply_tree_b{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        margin-top: 50px;
        >li{
          list-style-type: none;
          margin-left: 64px;
          .apply_tree_b_t{
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #333333;
            line-height: 16px;
            margin-bottom: 20px;
          }
          .apply_tree_b_m{
            width: 230px;
            height: 150px;
            border: 1px solid #E0E0E0;
            >img{
              width: 190px;
              height: 138px;
              margin: 6px 20px;
            }
          }
          .apply_tree_b_b{
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #999999;
            line-height: 24px;
            margin-top: 24px;
          }
        }
      }
      .apply_tree_b2{
        width: 400px;
        margin: 46px auto 38px;
      }
      .sub_btn{
        display: flex;
        justify-content: center;
        margin: 30px 0;
      }
    }
  }

}
</style>