FE-V2-PC/src/views/gasManage3_0/manage/useGas/useGasAdd.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">
      <!--申请1-->
      <div v-if="pageType==1">
        <el-form class="addPage_b_b" :model="form" ref="form" :rules="rules" label-position="right" label-width="100px">
          <el-form-item label="申请人" prop="applyCause" >
            <el-input  style="width: 300px" v-model="form.applyUser" disabled  maxlength="50" />
          </el-form-item>
          <el-form-item label="联系方式" prop="phone" >
            <el-input  style="width: 300px" v-model="form.phone"  placeholder="请输入联系方式" maxlength="50" />
          </el-form-item>
          <el-form-item label="实验地点" prop="subjectId">
            <el-select
              style="width:300px;"
              v-model="form.location"
              filterable
              remote
              clearable
              reserve-keyword
              @focus="selectFocus"
              @change="selectChange"
              placeholder="请选择实验地点"
              :remote-method="userSelectList"
              :loading="loading">
              <el-option
                v-for="item in laboratoryOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="使用期限" prop="dateRange" >
            <el-date-picker
              :clearable="false"
              v-model="form.dateRange"
              size="small"
              style="width: 300px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              :picker-options="pickerOptions0"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="使用气体" prop="useGasId" >
            <el-select class="min-width" placeholder="请选择使用气体" v-model="form.useGasId" filterable clearable  @change="useGasFun" style="width: 300px">
              <el-option
                v-for="(item,index) in useGasList"
                :key="item.id"
                :label="item.goodsName"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="气体用途" prop="gasUse" >
            <el-input  style="width: 300px" v-model="form.gasUse"  placeholder="请输入气体用途" maxlength="50" />
          </el-form-item>
          <el-form-item label="安全措施" prop="safetyPrecautions" >
            <el-input  style="width: 300px" v-model="form.safetyPrecautions"  placeholder="请输入安全措施" maxlength="50" />
          </el-form-item>
          <el-form-item label="用气申请表" prop="applyCertificate" >
            <el-upload
              class="certificate-avatar-uploader"
              :action="uploadImgUrl"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :headers="headers"
              :before-upload="beforeAvatarUpload">
              <div style="display: flex;">
                <img v-if="form.applyCertificate" :src="form.applyCertificate" style="width: 80px;height: 80px;margin-right: 10px">
                <i v-if="!form.applyCertificate" class="el-icon-plus avatar-uploader-icon"></i>
              </div>
            </el-upload>
          </el-form-item>
        </el-form>
        <p class="inquire-button-one" style="width:400px;margin:36px 0 16px 38%;" @click="handleClick('','form','next')">提交申请</p>
      </div>
    </div>
  </div>
</template>
<script>
import { getToken } from "@/utils/auth";
import {
  bottleList,
  getLoginUser, googsListGoogs,
  subjectList,
  useAgsApplyAdd,
  useAgsApplyAnew,
  useAgsApplyDetail
} 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('请选择使用期限'))
      }
    }
    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:{
        deptId:'',
        applyUser:'',
        applyUserid:'',
        phone:'',
        location:'',
        subjectId:'',
        startTime:'',
        endTime:'',
        useGasName:'',
        useGasId:'',
        gasUse:'',
        safetyPrecautions:'',
        applyCertificate:'',
        dateRange:[],
      },
      laboratoryOptions:[],
      useGasList:[],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize:20,
        searchValue:'',
      },
      total:0,
      tableData:[],
      dialogVisible:false,
      totalNum:0,//所选气瓶总数
      status:0,//0添加1编辑
      // 表单校验
      rules: {
        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" }
        ],
        subjectId: [
          { required: true, message: "请选择实验地点", trigger: "blur" }
        ],
        useGasId: [
          { required: true, message: "请选择使用气体", trigger: "blur" }
        ],
        gasUse: [
          { required: true, message: "请输入气体用途", trigger: "blur" },
          { required: true, message: "请输入气体用途", validator: this.spaceJudgment, trigger: "blur" }
        ],
        safetyPrecautions: [
          { required: true, message: "请输入安全措施", trigger: "change" },
          { required: true, message: "请输入安全措施", validator: this.spaceJudgment, trigger: "blur" }
        ],
        applyCertificate: [
          { required: true, message: "请上传用气申请表", trigger: "change" }
        ],
        dateRange: [
          {required: true, validator: validateTime, trigger: 'blur' },
        ],
      },
    };
  },
  methods: {
    selectFocus(){
      console.log("123");
      if(!this.laboratoryOptions[0]){
        this.userSelectList("");
      }
    },
    handleClick(index,row,doType){
      let _this=this;
      if(doType=='next'){//下一步
        //非空校验
        this.$refs[row].validate((valid) => {
          if (valid) {
            _this.submitForm();
          } else {
            return false;
          }
        });
      }else if(doType=='last'){//上一步
        _this.pageType=1;
      }else if(doType=='selected'){//已选气瓶
        _this.dialogVisible=true
      }
    },
    /** 获取当前用户信息 */
    getLoginUser() {
      let _this=this;
      getLoginUser().then( response => {
        let res=response.data
        _this.form.applyUser=res.nickName
        _this.form.applyUserid=res.userId
        _this.form.phone=res.phonenumber
        _this.form.deptId=res.deptId

      });
    },
    /** 获取使用气体信息 */
    googsListGoogs() {
      let _this=this;
      googsListGoogs().then( response => {
        let res=response.rows
        _this.useGasList=res;

      });
    },
    useGasFun(){
     let _this=this;
      _this.useGasList.forEach(function(item){
        if(_this.form.useGasId==item.id){
          _this.form.useGasName=item.goodsName;
        }
      })
      console.log(_this.form.useGasId)
      console.log(_this.form.useGasName)
    },
    //懒加载实验室
    userSelectList(e){
      subjectList({name:e,deptId:this.form.deptId}).then(response => {
        this.laboratoryOptions = response.data;
      });
    },
    //实验室选择
    selectChange(e){
      let self = this;
      for(let i=0;i<self.laboratoryOptions.length;i++){
        if(self.laboratoryOptions[i].id == e){
          this.$set(this.form,"subject",self.laboratoryOptions[i]);
          this.$set(this.form,"location",self.laboratoryOptions[i].name);
        }
      }
      this.$set(this.form,"subjectId",e);
    },
    //上传
    handleAvatarSuccess(res, file) {
      console.log(res.data.url);
      this.form.applyCertificate = 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;
      useAgsApplyDetail({id:id}).then( response => {
        let res=response.data;
        if(response.code==200){
          let dateRange=[];
          _this.totalNum=0;
          dateRange.push(res.apply.startTime,res.apply.endTime)
          _this.form.id=res.apply.id;
          _this.form.applyUser=res.apply.applyUser;
          _this.form.phone=res.apply.phone;
          _this.form.location=res.apply.location;
          _this.form.subjectId=String(res.apply.subjectId);
          _this.form.startTime=res.apply.startTime;
          _this.form.endTime=res.apply.endTime;
          _this.form.gasUse=res.apply.gasUse;
          _this.form.applyCertificate=res.apply.applyCertificate;
          _this.form.safetyPrecautions=res.apply.safetyPrecautions;
          _this.form.useGasId=res.apply.useGasId;
          _this.form.useGasName=res.apply.useGasName;
          _this.form.dateRange=dateRange;
        }
      });

    },
    //提交
    submitForm(){
      let _this = this;
      _this.loading = true;
      if(_this.status==0){//新增

        useAgsApplyAdd(_this.form).then(res => {
          this.msgSuccess(res.msg);
          _this.backPage();
        });
      }else if(_this.status==1){
        useAgsApplyAnew(_this.form).then(res => {
          this.msgSuccess(res.msg);
          _this.backPage();
        });
      }

    },

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

  },
  mounted() {
    this.getLoginUser()
    this.googsListGoogs()
    this.status=this.pageData.status;
    if(this.status==1){
      this.getInfo(this.pageData.id)
    }

  }

};
</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_b{
      margin-top: 58px;
      margin-left: 36%;
    }
    /*申请二*/
    .apply_tow{
      padding: 0 20px;
      box-sizing: border-box;
      flex: 1;
      display: flex!important;
      flex-direction: column;
      .selected{
        display: inline-block;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #0045AF;
        float: right;
        cursor: pointer;
      }
      .sub_btn{
        display: flex;
        justify-content: center;
        margin: 30px 0;
      }
    }
  }

}
</style>