申请类别-差旅审批

<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <div class="title">差旅申请</div>
            </div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <!-- 申请人 -->
                <el-form-item label="申请人" prop="applicant">
                    <el-select v-model="ruleForm.applicant" placeholder="请选择申请人" style="width: 100%" clearable>
                        <el-option v-for="item in employeeSelect" :key="item.id" :label="item.account" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>

                <!-- 申请日期 -->
                <el-form-item label="申请日期" required>
                    <el-form-item prop="created">
                        <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.created" style="width: 100%;"></el-date-picker>
                    </el-form-item>
                </el-form-item>

                <!-- 出差天数 -->
                <el-form-item label="出差天数" prop="travel_days">
                    <el-input-number v-model="ruleForm.travel_days" @change="handleChange" :min="1" :max="10" label="描述文字" style="width: 15%" class="num"></el-input-number>
                </el-form-item>

                <!-- 报销金额 -->
                <el-form-item label="报销金额" prop="money">
                    <el-input v-model="ruleForm.money" placeholder="请输入报销金额" prefix-icon="el-icon-shopping-cart-full" type="number"></el-input>
                </el-form-item>

                <!-- 上传发票 -->
                <el-form-item label="上传发票" prop="bill">
                <el-upload
                v-model="ruleForm.bill"
                class="upload-demo"
                action=""
                :limit="1"
                list-type="picture"
                :on-exceed= "handleExceed"
                :http-request= "handleRequest"
                :on-success= "handleSuccess"
                :before-upload= "beforeUpload"
                :on-change= "handleChange"
                :file-list="fileList"
                :auto-upload="false">
                <el-button size="small" type="primary">点击上传<i class="el-icon-upload"></i></el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过1MB</div>
                </el-upload>
                </el-form-item>

                <!-- 出差城市 -->
                <el-form-item label="出差城市" prop="destination">
                    <el-cascader
                    style="width: 100%;"
                    size="large"
                    :options="options"
                    v-model="ruleForm.destination"
                    @change="handleChangem" clearable>
                    </el-cascader>
                    <!-- 添加clearable参数，就会出现清空图标 -->
                </el-form-item>

                <!-- 按钮 -->
                 <el-form-item class="button">
                    <el-button type="primary" @click="submitForm('ruleForm')">立即申请</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>


<script>
import {userEmployee,travelCreate} from '@/api/http'//导入登录
import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'//省市区数据

export default({
    data(){
        return{
            options: regionData,
            form:{    
                provinces:"",
                city:"",
                area:""
            },
            fileList: [],
            employeeSelect:[],//查询所有员工下拉数据展示
            num: 1,
            ruleForm:{
                applicant:'',//申请人
                created:'',//申请日期
                travel_days:'',//出差天数
                money:'',//报销金额
                bill:'',//发票上传
                destination:[]//出差城市
            },
             rules: {
                applicant: [
                    { required: true, message: '请选择申请人', trigger: 'blur' },
                ],
                created: [
                    { type: 'date', required: true, message: '请选择申请日期', trigger: 'change' }
                ],
                travel_days: [
                    {required: true, message: '请选择出差天数', trigger: 'change' }
                ],
                money: [
                    {required: true, message: '请输入报销金额', trigger: 'change' }
                ],
                bill: [
                    {required: true, message: '请上传发票', trigger: 'change' }
                ],
                destination: [
                    {required: true, message: '请选择', trigger: 'blur' }
                ]
            }
        }
        
    },
   mounted(){
        this.queryEmployees();
    },
    methods:{
        handleChangem() {
        this.form.provinces= CodeToText[this.destions[0]]
        this.form.city= CodeToText[this.destions[1]]
        this.form.area= CodeToText[this.destions[2]]
        }, 
        edit(item){//省市回显      
            this.destination.push(TextToCode[this.form.provinces].code,TextToCode[this.form.provinces][this.form.city].code,TextToCode[this.form.provinces][this.form.city][this.form.area].code)
        }, 
        queryEmployees() {
        //请求发送
        userEmployee().then(res=>{
        console.log(res);
        let{code,data} = res.data;
        if(code == 20000){
          this.employeeSelect = data;
                }
            })
        },
        //立即申请按钮接口请求
        submitForm(formName) {
          let {bill,destination} = this.ruleForm;
          let formdata = new FormData();
          Object.keys(this.ruleForm).forEach(item=>{
            formdata.append(item,this.ruleForm[item]);
          });
          formdata.append('destination',destination.join(''));
          if(bill){
            formdata.append(bill,bill);
          }
          this.$refs[formName].validate((valid) => {
          if (valid) {
          travelCreate(formdata).then(res=>{
          // eslint-disable-next-line
          let {code,data} = res.data;
          if(code==20000){
          this.$notify({
          title: '提交',
          message: '提交成功',
          duration: 20000,
          type: 'success'
          });
          this.$router.push('/travelApply');
          }
        })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      //重置
        resetForm(formName) {
        this.$refs[formName].resetFields();
        },
        //上传文件
        //超出个数限制处理，通知提醒
        handleExceed(){
            this.$notify({
                title: '提示',
                message: '最多只能上传一张图片!',
                duration: 5000,
                type: 'warning'
            })
        },
    // 文件上传成功的钩子
    handleSuccess(response, file, fileList) {
        this.$notify({
          message: '文件上传成功',
          type: 'success'
        });
      },
    //上传文件大小和类型限制
    handleChange(file,fileList) {
      let fileName = file.name;
      let uid = file.uid
      let pos = fileName.lastIndexOf(".");
      let lastName = fileName.substring(pos, fileName.length);
      if (
        lastName.toLowerCase() !== ".png" &&
        lastName.toLowerCase() !== ".jpg"&&
        lastName.toLowerCase() !== ".gif"&&
        lastName.toLowerCase() !== ".jpeg"
      ) {
        this.$message.error("文件必须为.png .jpg .gif .jpeg 类型");
        // this.resetCompressData()
        for(var i = 0;i<fileList.length;i++) {
          if(fileList[i].uid == uid) {
            fileList.splice(i,1)
          }
        }
        return;
      }
      if (fileList.length > 0) {
          this.ruleForm.bill = fileList
          this.$refs.ruleForm.clearValidate('bill') //清除必填项文字校验
        }
      // 限制上传文件的大小
      const isLt = file.size / 1024 / 1024 < 1;
      if (!isLt) {
        this.$message.error("上传文件大小不能大于1MB!");
        for(var i = 0;i<fileList.length;i++) {
          if(fileList[i].uid == uid) {
            fileList.splice(i,1)
          }
        }
      }
      return isLt;
    },
    //上传文件
    // 预览文件的方法
    handlePreview(file) {
      console.log('Preview:', file);
    },
    // 移除文件的方法
    handleRemove(file, fileList) {
      console.log('Remove:', file, fileList);
    },
    // 移除文件之前的钩子，返回 false 或 Promise 可停止移除
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    // 文件上传失败的钩子
    handleError(err, file, fileList) {
      console.error('Error:', err, file, fileList);
    }
    }
})
</script>


<style>
  .clearfix{
    height:2vh;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .box-card {
    width: 100%;
    height: 100vh;
  }
  .title{
    margin-top: -70px;
  }
  .num{
    margin-left: -136vh;
  }
  /* .button{
    margin-left: -138vh;
  } */
</style>