cmanager/src/views/manage/company/companyCheck.vue

<template>
  <el-drawer
    :visible.sync="visible"
    size="60%"
    append-to-body
    title="审核"
    class="avue--view avue--detail"
  >
    <avue-form class="companyCheck-form" ref="check-form" v-model="form" :option="formOption" @submit="submit" :upload-before="uploadBefore">
      <template slot="cityId" slot-scope="{disabled}">
        <jl-city-cascader :disabled="disabled" v-model="form.cityId"></jl-city-cascader>
      </template>
      <template slot="motoleyUrl">
        <el-upload
                list-type="picture-card"
                :auto-upload="true"
                :file-list="imgList"
                :limit="5"
                :action="mutiPutFile"
                :on-preview="handlePictureCardPreview"
                :on-exceed="handleImgLimit"
                :on-success="handleImgSuccess"
                :on-remove="handleImgRemove"
                :before-remove="beforeRemove"
                :before-upload="beforeAvatarUpload"
              >
                <i slot="default" class="el-icon-plus avue-upload__icon"></i>
                <div slot="tip" class="el-upload__tip">*最多上传5张图片，且大小限制2M以内</div>
              </el-upload>
      </template>
      <template slot="product">
        <span>灵活用工</span>
      </template>
      <template slot="serveCost" v-if="form.serveCost !== undefined">
        <span>{{moneyFormat(form.serveCost)}} {{wageUnitCategory[form.serveUnit]}}</span>
      </template>
      <template slot="menuForm">
        <!-- <div v-show="[1,2].includes(form.status)"> -->
          <div v-show="form.status != 0 && form.status != 9">
          <el-button size="medium" type="primary" @click="handlePass" :loading="loading">通过</el-button>
          <el-button size="medium" @click="handleReject" :loading="loading">驳回</el-button>
        </div>
      </template>
    </avue-form>
  </el-drawer>
</template>

<script>
import { moneyFormat } from "@/util/money";
import { validatenull,check18IdCardNo } from "@/util/validate";
import {reject, examineInfo,newExamineApi } from "@/api/manage/company";
import { getStationDic } from "@/api/manage/station";
import { getTradeDic } from "@/api/manage/trade";
import { putFile } from "@/api/resource/oss";

const accept = [
  "image/png",
  "image/jpeg",
  "image/svg+xml",
  "image/gif",
  "image/x-photoshop",
];

const validateCityId=(rule,value,callback)=>{
  if(value==0){
    callback(new Error('请选择所在地区'));
  }else{
    callback();
  }

};
const validateIdNumber=(rule,value,callback)=>{
  if(check18IdCardNo(value)){
    callback()
  }
  else{
    callback(new Error('身份证格式不正确'));
  }
}
const validateTradeId=(rule,value,callback)=>{
  if(value=='请选择行业'){
    callback(new Error('请选择行业'));
  }else{
    callback();
  }
}
export default {
  data() {

    return {
      loading: false,
      visible: false,
      operation: false,
      mutiPutFile:putFile,
      form: { serveCost: 0, serveUnit: 0 },
      wageUnitCategory: {
        0: "元/人·次",
        1: "元/人·时",
        2: "元/人·天",
        3: "元/人·周",
        4: "元/人·月",
        5: "元/人·个",
        6: "元/人·件"
      },
      imgList:[],
    };
  },
  computed: {

    formOption() {
      return {
        emptyBtn: false,
        submitBtn: false,
        //disabled: true,
        labelWidth: 120,
        group: [
          {
            label: "企业信息",
            column: [
              {
                type: "select",
                label: "所属市场",
                size: "small",
                prop: "stationId",
                dicUrl: getStationDic(),
                props: {
                  label: "stationName",
                  value: "stationId"
                },
                dicFormatter(resp) {
                  return resp.data;
                },
                disabled: true,
              },
              {
                type: "select",
                label: "行业",
                size: "small",
                prop: "tradeId",
                dicUrl: getTradeDic(),
                props: {
                  label: "name",
                  value: "id"
                },
                dicFormatter(resp) {
                  var result=[];
                  resp.data.forEach(ele => {
                    if(ele.name!="1"){
                      result.push(ele)
                    }
                  });
                  return result;
                },
                rules:[
                  {
                    required:true,validator:validateTradeId,trigger:'blur'
                  }
                ]
              },
              {
                type: "input",
                label: "企业名称",
                span: 12,
                display: true,
                size: "small",
                prop: "companyName",
                disabled: true,
              },
              {
                type: "input",
                label: "统一信用代码",
                span: 12,
                display: true,
                size: "small",
                prop: "companyTid",
                placeholder: "18位统一社会信用代码",
                disabled: true,
              },
              {
                type: "input",
                label: "法人姓名",
                span: 12,
                display: true,
                size: "small",
                prop: "masterName",
                rules:[
                  {
                    required:true,message:'请输入法人姓名',trigger:'blur'
                  }
                ]
              },
              {
                type: "input",
                label: "法人身份证号",
                span: 12,
                display: true,
                size: "small",
                prop: "masterIdentity",
                rules:[
                  {
                    required:true,message:'请输入法人身份证号',trigger:'blur'
                  },
                  {
                    validator:validateIdNumber,trigger:'blur'
                  }
                ]
              },
              {
                type: "input",
                label: "所在地区",
                span: 12,
                display: true,
                prop: "cityId",
                formslot: true,
                rules:[
                  {
                    required:true,message:'请选择所在地区',trigger:'blur'
                  },
                  {
                    validator:validateCityId,trigger:'blur',required:true
                  }
                ]
              },
              {
                type: "input",
                label: "详细地址",
                span: 12,
                display: true,
                size: "small",
                prop: "companyAddress",
                rules:[
                  {
                    required:true,message:'请输入详细地址',trigger:'blur'
                  }
                ]
              },
              // 图片预览
              {
                  type: "upload",
                label: "营业执照",
                span: 12,
                accept,
                showFileList: false,
                listType: "picture-img",
                multiple: false,
                propsHttp: {
                  res: "data",
                  url: "link",
                },
                size: "small",
                prop: "authUrlId",
                action: putFile,
                viewDisplay: false,
                rules: [
                  {
                    required: true,
                    message: "请上传营业执照照片",
                  },
                ],
                tip: '上传图片大小限制2M以内',
                },
                {
                type: "upload",
                label: "法人身份证正面",
                span: 12,
                showFileList: false,
                listType: "picture-img",
                multiple: false,
                propsHttp: {
                  res: "data",
                  url: "link",
                },
                canvasOption: {},
                headers: [],
                data: [],
                accept,
                tip: '上传图片大小限制2M以内',
                size: "small",
                prop: "identityUrl4Id",
                action: putFile,
                viewDisplay: false,
                rules: [
                  {
                    required: true,
                    message: "请上传法人身份证正面",
                  },
                ],
              },
              {
                type: "upload",
                label: "法人身份证背面",
                span: 12,
                showFileList: false,
                listType: "picture-img",
                multiple: false,
                propsHttp: {
                  res: "data",
                  url: "link",
                },
                canvasOption: {},
                headers: [],
                data: [],
                accept,
                tip: '上传图片大小限制2M以内',
                size: "small",
                prop: "identityUrl5Id",
                action: putFile,
                viewDisplay: false,
                rules: [
                  {
                    required: true,
                    message: "请上传法人身份证背面",
                  },
                ],
              },
              {
                type: "upload",
                label: "电子签章申请表",
                span: 12,
                showFileList: false,
                listType: "picture-img",
                multiple: false,
                propsHttp: {
                  res: "data",
                  url: "link",
                },
                canvasOption: {},
                headers: [],
                data: [],
                accept,
                tip: '上传图片大小限制2M以内',
                size: "small",
                prop: "signSrcUrl",
                action: putFile,
                viewDisplay: false,
                rules: [
                  {
                    required: true,
                    message: "请上传电子签章申请表",
                  },
                ],
              },
              {
                type: "upload",
                label: "授权委托书",
                span: 24,
                showFileList: false,
                listType: "picture-img",
                multiple: false,
                propsHttp: {
                  res: "data",
                  url: "link",
                },
                canvasOption: {},
                headers: [],
                data: [],
                accept,
                tip: '上传图片大小限制2M以内',
                size: "small",
                prop: "letterOfAttorneyUrl",
                action: putFile,
                viewDisplay: false,
                rules: [
                  {
                    required: true,
                    message: "请上传授权委托书",
                  },
                ],
              },
              {
                label: "招聘简章",
                formslot:true,
                span:24,
                tip: '上传图片大小限制2M以内',
                accept,
                prop:'motoleyUrl',
                rules: [
                  {
                    required: true,
                    message: "请上传招聘简章",
                  },
                ],
              },
            ]
          },
          {
            label: "管理员信息",
            column: [
              {
                type: "input",
                label: "联系人",
                span: 12,
                display: true,
                size: "small",
                prop: "realName"
              },
              {
                type: "input",
                label: "手机号码",
                span: 12,
                display: true,
                size: "small",
                prop: "account"
              }
            ]
          },
          {
            label: "服务信息",
            column: [
              {
                type: "input",
                label: "联系人",
                span: 12,
                display: true,
                size: "small",
                prop: "product",
                formslot: true
              },
              {
                type: "input",
                label: "服务费",
                span: 12,
                display: true,
                size: "small",
                prop: "serveCost",
                formslot: true
              }
            ]
          }
        ]
      };
    }
  },
  methods: {
    open(id) {
      examineInfo(id).then(res => {
        this.imgList=[];
        this.loading = false;
        this.form = res.data.data;
        this.visible = true;
        if(this.form.tradeId==1){
          this.form.tradeId='请选择行业';
        }
        //给imgList赋值
        if(this.form.motoleyUrl!=""){
          var strList=this.form.motoleyUrl.split(',');
        for(var i in strList){
          this.imgList.push({
            url:strList[i]
          })
        }
        }
      });
    },
    handlePass() {
      this.loading = true;
      this.$refs["check-form"].validate(valid=>{
        if(valid){
          //newExamineApi({id:this.form.companyId,...this.form}
          newExamineApi(this.form.id,this.form.tenantId,this.form.tradeId,this.form.masterName,this.form.masterIdentity,
          this.form.cityId,this.form.companyAddress,this.form.authUrlId,
          this.form.identityUrl4Id,this.form.identityUrl5Id,this.form.signSrcUrl,this.form.letterOfAttorneyUrl,
          this.form.motoleyUrl
          ).then(() => {
        this.$emit("success");
        this.visible = false;
        this.$message({ type: "success", message: "操作成功！" });
      },
        (error) => {
          this.$message.error(error);
          this.visible = false;

        }
      )
        }
        else{
          this.loading=false;
        }
      })
    },
    handleReject() {
      this.$prompt("", "驳回", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        inputPlaceholder: "驳回原因(0~50个字)",
        inputValidator: val => {
          if (validatenull(val)) {
            return "请输入驳回原因";
          } else {
            if(val.length>50){
              return "驳回原因不能超过50个字";
            }
            else{
              return true;
            }

          }
        },
        inputType: "textarea"
      })
        .then(({ value }) => {
          this.loading = true;
          return reject(this.form.id, value);
        })
        .then(() => {
          this.loading = false;
          this.$emit("success");
          this.visible = false;
          this.$message({ type: "success", message: "操作成功！" });
        })
        .catch(() => {
          this.loading = false;
        });
    },
    moneyFormat,
    beforeAvatarUpload(file) {
        const isJPG = ["image/png", "image/jpeg", "image/svg+xml", "image/gif"].indexOf(file.type) != -1;
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG) {
          this.$message.error('上传图片格式不正确');
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      handleAuthUrlIdSuccess(res) {
      this.$set(this.form, "authUrlId", res.data.link);
    },
    handleidentityUrl4IdSuccess(res){
      this.$set(this.form, "identityUrl4Id", res.data.link);
    },
    handleidentityUrl5IdSuccess(res){
      this.$set(this.form, "identityUrl5Id", res.data.link);
    },
    /*多张图片上传*/

    handleImgLimit(){
      this.$message.warning('当前最多上传5张图片');
    },
    handleImgSuccess(res){
      if(res.code==200){
        this.imgList.push({url:res.data.link});
      var str="";
      for(var i=0;i<this.imgList.length;i++){
        str+=this.imgList[i]['url']+",";
      }
      if(str.length>0){
        str=str.substr(0,str.length-1);
      }
      this.form.motoleyUrl=str;
      }
      else{
        this.$message.error('上传失败');
      }
    },
    handleImgRemove(file){
      let index=0;
      for(let i in this.imgList){
        if(this.imgList[i]['uid']==file.uid){
          index=i;
          break;
        }
      }
      this.imgList.splice(index,1);
      var str="";
      for(var i=0;i<this.imgList.length;i++){
        str+=this.imgList[i]['url']+",";
      }
      if(str.length>0){
        str=str.substr(0,str.length-1);
      }
      this.form.motoleyUrl=str;
    },
    uploadBefore(file, done, loading){
      const isJPG = ["image/png", "image/jpeg", "image/svg+xml", "image/gif"].indexOf(file.type) != -1;
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M || !isJPG) {
          this.$message.error('上传图片大小不能超过 2MB!');
          loading();
        }
        else{
          done();
          return isJPG && isLt2M;

        }
    }
  }
};
</script>

<style>
  .companyCheck-form .el-upload--picture-card{
    width: 178px;
    height: 178px;
    background-color: #ffffff;
  }
  .companyCheck-form  .el-input__inner{
    border: 1px solid #DCDFE6;
  }
  .companyCheck-form .el-upload-list--picture-card .el-upload-list__item{
    width: 178px;
    height: 178px;
  }
</style>