cmanager/src/views/tenant/mission/Dialog/EmployInformation.vue

<template>
  <el-drawer
  title="确定录用信息"
  :visible.sync="checkDisplayVisible"
  size="60%"
  modal-append-to-body
  :before-close="drawerClose"
  class="createOrderTable">
    <div class="taskInformation">
      <p><label>岗位名称：{{selectTaskInfo.missionTitle | ellipsis }}</label><label>任务编号：{{selectTaskInfo.missionNo}}</label><label>录用登记：<font style="color:#409eff">{{selectionList.length == 0 ? 1 :selectionList.length}} </font> 人</label></p>
    </div>
    <div class="create-order-box">
      <div class="create-order-bill">
        <div class="create-order-box-title">
          <span>发票信息</span>
          <!-- <el-button @click="goSetting" type="text">编辑发票信息</el-button> -->
        </div>
        <div class="create-order-box-body">
          <p>发票抬头：{{fpData.titleName}}</p>
          <p v-if="fpData.type===0">发票类型：增值税普通发票</p>
          <p v-if="fpData.type===1">发票类型：增值税专用发票</p>
          <p>纳税人识别号： {{fpData.regNumber}}</p>
          <p>注册地址&电话：{{fpData.regAddress}} {{fpData.regTelphone}}</p>
          <p>开户行及账号：{{fpData.bankName}} {{fpData.bankNumber}}</p>
        </div>
      </div>
      <div class="create-order-address">
        <div class="create-order-box-title">
          <span>收件信息</span>
          <!-- <el-button type="text">添加收件地址</el-button> -->
        </div>
        <div class="create-order-box-body">
          <el-table class="seventy_table_m_height" :data="addresses" max-height="400" @row-click="rowClick" ref="table">
            <el-table-column width="55">
              <template slot-scope="scope">
                <el-radio v-model="addressId" :label="scope.row.id">&nbsp;</el-radio>
              </template>
            </el-table-column>
            <el-table-column prop="contacts" min-width="60"></el-table-column>
            <el-table-column prop="telphone" min-width="100"></el-table-column>
            <el-table-column min-width="180" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div>{{getCity(scope.row.cityId)}}{{scope.row.address}}</div>
              </template>
            </el-table-column>
            <el-table-column prop="email" min-width="100"></el-table-column>
          </el-table>
        </div>
      </div>
      <div class="create-order-pwd">
        <div>
         <!-- <p style="text-align:center; font-size:16px">您选择<span class="employ-employNum-count">{{employNum}}</span>人准备录用，请输入密码并确定录用</p> -->
         <el-form :model="pwdForm" ref="pwdForm" :rules="pwdFormRules" v-if="companyContractOn == 1">
         <el-form-item
          label="输入密码："
          prop="pwd"
          :label-position="labelPosition"
          label-width="100px"
        >
          <el-col :span="16">
            <el-input type="number" v-model="pwdForm.pwd" maxlength="6" onKeypress="return(/^[0-9]*$/.test(String.fromCharCode(event.keyCode)))"  show-password placeholder="请输入签章密码"></el-input>
          </el-col>
         </el-form-item>
         <el-form-item class="employ-forgetPwd">
           <el-button type="text" @click="forgetPwd">忘记密码？</el-button>
         </el-form-item>
          </el-form>
          <p>
            <el-checkbox v-model="read"></el-checkbox>
            <span @click="read = !read" class="insure-confirm-agreement">
              我已阅读
              <a
                @click.stop
                href="/blackboard/insure/insureagreement.html"
                target="blank"
                style="color:#409eff"
                >《投保须知》</a
              >
            </span>
          </p>
          <p style="color:#ff0000;font-size:13px">提示：系统将按照投保规则，在任务开始前一天自动为录用人员投保，投保成功后，请前往“订单管理”模块支付，超过15天未支付则不可以再次发布任务。</p>
        </div>
        <!-- <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="PWDOk" :loading="loadingbut">{{loadingbuttext}}</el-button>
          <el-button @click="dialogVisible1 = false">取 消</el-button>
        </span> -->
      </div>
      <el-row class="create-order-footer">
        <el-col :span="24">
          <el-button
            @click="confirm"
            type="primary"
            size="small"
            :loading="confirmBtnLoading"
            :disabled="confirmDisabled"
          >确定录用</el-button>
          <el-button
            @click="closeConfirm"
            type="info"
            size="small"
          >取消</el-button>

        </el-col>
      </el-row>
    </div>
    <!--忘记密码dialog-->
      <el-dialog title="重置密码" :visible.sync="resetPwdDialogVisible" append-to-body width="30%">
        <el-form class="econtract-resetForm" label-position="right" :model="resetPwdForm" :rules="resetPwdRules" ref="resetPwdForm">
          <el-form-item label="手机号码：" :label-width="formLabelWidth" prop="account" >
            <span>{{phone}}</span>
          </el-form-item>
          <el-form-item label="请输入验证码：" :label-width="formLabelWidth" prop="code">
            <el-input v-model="resetPwdForm.code" autocomplete="off" style="width: 50%;"></el-input>
            <el-button :disabled="msgKey" style="margin-left: 15px;"  type="primary" @click="getCode">{{msgText}}</el-button>
          </el-form-item>
          <el-form-item label="请设置新密码：" :label-width="formLabelWidth" prop="pwd">
            <el-input type="number" v-model="resetPwdForm.pwd" maxlength="6" onKeypress="return(/^[0-9]*$/.test(String.fromCharCode(event.keyCode)))" autocomplete="off" show-password placeholder="请输入六位数字密码"></el-input>
          </el-form-item>
          <el-form-item label="请再次输入新密码：" :label-width="formLabelWidth" prop="pwd2">
            <el-input type="number" maxlength="6" onKeypress="return(/^[0-9]*$/.test(String.fromCharCode(event.keyCode)))" v-model="resetPwdForm.pwd2" autocomplete="off" show-password placeholder="请再次输入六位数字密码"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="resetPwdDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitResetPwd">确 认</el-button>
        </div>
      </el-dialog>
  </el-drawer>
</template>

<script>
import { dateFormat } from "@/util/date";
import {applyStatus} from '@/api/manage/econtract'
import { employ } from "@/api/tenant/mission";
import {certCheckPass,getCode,resetPwd} from "@/api/manage/econtract.js";//api
export default {
  props: { fpData: Object,fpTitleId:Number, checkDisplayVisible: Boolean ,usersInfo:Array},
  data () {
    const validatePwdLength=(rule,value,callback)=>{
        if(value.length!=6 || isNaN(Number(value))){
          this.loading = false;
          this.confirmBtnLoading = false;
          this.confirmDisabled = false;
          callback(new Error('请输入6位数的数字密码'));
        }
        else{
          callback();
        }
      }
      const validatePwd = (rule, value, callback) => {
        if (value != this.resetPwdForm.pwd) {
          callback(new Error('两次输入密码不一致'));
        }
        else {
          callback();
        }
      };
      const validPwdNums=(rule,value,callback)=>{
        if(value.length!=6 || isNaN(Number(value))){
          callback(new Error('请输入6位数的数字密码'));
        }
        else{
          callback();
        }
      }
    return {
      read: false,
      confirmDisabled:false,
      selectTaskInfo:{},
      selectionList:[],
      addresses: [],
      addressId: '',
      insureNum:0,
      pwdForm: {
          pwd: ''
      },
      confirmFormData:[],
      confirmBtnLoading:false,
      employDataIds:1,
      pwdFormRules:{
        pwd:[
          {
            required:true,message:'请输入密码',trigger:'blur'
          },
          {
            validator:validatePwdLength,trigger:'blur'
          },

        ]
      },
      loadingbuttext:'确定',
      loadingbut:false,
      companyContractOn:'',//电子合同状态
      conpanySealOn:'',//签章状态
      /*忘记密码*/
      resetPwdDialogVisible:false,
      resetPwdForm:{},
      formLabelWidth:'150px',
      msgText: '获取验证码',
      msgTime:120,
      //重置密码校验
      resetPwdRules: {
          code: [
            {
              required: true, message: '请输入验证码', trigger: 'blur'
            }
          ],
          pwd: [
            {
              required: true, message: '请输入密码', trigger: 'blur'
            },
            {
              validator: validPwdNums, trigger: 'blur'
            }
          ],
          pwd2: [
            {
              required: true, message: '请输入确认密码', trigger: 'blur'
            },
            {
              validator: validatePwd, trigger: 'blur'
            }
          ]

        },
    }
  },
  filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 15) {
        return value.slice(0, 14) + "...";
      }
      return value;
    },
  },
  computed: {
  },
  mounted(){
    this.checkStatus();
  },
  methods: {
    //输入密码点击确定
      PWDOk(){
        this.loading = true;
        this.confirmBtnLoading = true;
        this.confirmDisabled = true;
        this.$refs.pwdForm.validate(valid=>{
          if(valid){
        //     this.loadingbut = true;
				// this.loadingbuttext = '提交中...';
        certCheckPass(this.pwdForm.pwd).then((res)=>{
            if(res.data.data == true){//输入签章密码正确走录用流程
              if(this.addressId){
                this.employApi(this.employDataIds,this.fpTitleId,this.addressId);
              }else{
                this.$message.warning("请选择收件地址");
              }
            }else{
              this.$message.closeAll();
              this.loading = false;
              this.confirmBtnLoading = false;
              this.confirmDisabled = false;
               this.$message({
                type: "error",
                message: "签章密码输入错误!",
              });
              // this.loadingbut=false;
              // this.loadingbuttext='确定';
           }
        })
          }

        })

      },
      /*获取验证码*/
    getCode() {
        this.msgKey = true;
        this.msgText = "发送中...";
        getCode(this.usersInfo.account)
          .then(() => {
            this.msgText = "剩余" + 120 + "s";
            this.msgKey = true;
            const time = setInterval(() => {
              this.msgTime--;
              this.msgText = "剩余" + this.msgTime + "s";
              if (this.msgTime <= 0) {
                this.msgTime = 120;
                this.msgText = "重新获取";
                this.msgKey = false;
                clearInterval(time);
              }
            }, 1000);
          })
          .catch(() => {
            this.msgText = "重新获取";
            this.msgKey = false;
          });

      },
    forgetPwd(){
      this.phone=this.usersInfo.account;
        var pat=/(\d{3})\d*(\d{4})/;
        this.phone=this.phone.replace(pat,'$1****$2');
      this.resetPwdDialogVisible=true;
      this.resetPwdForm={};
    },
    //录用确定
    employApi(ids,fpTitleId,fpAddressId){
      this.loading = true;
      this.confirmBtnLoading = true;
      this.confirmDisabled = true;
      employ(this.selectTaskInfo.missionNo, ids,fpTitleId,fpAddressId).then(
              () => {
                // this.loadingbut = false;
                // this.loadingbuttext = '确定';
                this.$message({
                  type: "success",
                  message: "操作成功!",
                });
                this.checkDisplayVisible = false;
                this.$emit('checkDisplayVisibleClose');
                this.$emit("refresh");
                this.loading = false;
                this.confirmBtnLoading = false;
                this.confirmDisabled = false;
              },
              (error) => {
                // this.loadingbut = false;
                // this.loadingbuttext = '确定';
                window.console.log(error);
                this.dialogVisible1 = false;
              }
            );
    },
    checkStatus(){
      this.companyContractOn = 0;//电子合同是否启用，0=未启用
      this.conpanySealOn = 0;//电子签章是否设置，0=未设置,1=等待审核，2=已设置
      // applyStatus().then(res=>{
      //   this.companyContractOn=res.data.data.contractOn;//电子合同是否启用，0=未启用 1=已启用
      //   this.conpanySealOn=res.data.data.sealOn;//电子签章是否设置，0=未设置,1=等待审核，2=已设置
      // })
    },
    drawerClose(){
     this.$emit('refresh');
     this.$emit('checkDisplayVisibleClose');
    },
    openDialog (selectTaskInfo,employDataIds,selectionList) {
      this.read = false;
      this.selectionList = selectionList;
      this.pwdForm.pwd = "";
      this.employDataIds = employDataIds;
      this.selectTaskInfo = selectTaskInfo;
      // this.insureNum = this.usersInfo.length;
      this.confirmBtnLoading = false;
      this.confirmDisabled = false;
    },
    format (date) {
      if (date) {
        return dateFormat(new Date(date), "yyyy-MM-dd");
      }
    },
    confirm () {
      this.loading = true;
      this.confirmBtnLoading = true;
      this.confirmDisabled = true;
      if (!this.read) {
        this.$message.closeAll();
        this.$message({ type: "error", message: "请阅读并同意《投保须知》" });
        this.loading = false;
        this.confirmBtnLoading = false;
        this.confirmDisabled = false;
        return;
      }
      if(this.companyContractOn == 1 && !this.pwdForm.pwd){
        this.$message.closeAll();
        this.$message({ type: "error", message: "请输入签章密码" });
        this.loading = false;
        this.confirmBtnLoading = false;
        this.confirmDisabled = false;
        return;
      }
      if(this.companyContractOn == 1 && this.pwdForm.pwd){
        this.PWDOk()
      }else{
        if(this.addressId){
          this.employApi(this.employDataIds,this.fpTitleId,this.addressId);
        }else{
          this.$message.warning("请选择收件地址");
          this.loading = false;
          this.confirmBtnLoading = false;
          this.confirmDisabled = false;
        }
      }
    },
    rowClick (row) {
      this.addressId = row.id;
    },
    closeConfirm(){
      this.$emit('refresh');
      this.$emit('checkDisplayVisibleClose');
    },
    /*重置密码*/
      submitResetPwd() {
        this.$refs.resetPwdForm.validate(valid => {
          if (valid) {
            resetPwd(this.usersInfo.account,this.resetPwdForm.pwd,this.resetPwdForm.code).then(()=>{
              this.$message.success('密码重置成功');
              this.resetPwdDialogVisible=false;
            })
            .catch((err)=>{
              this.$message.error(err);
            })
          }
        })
      },
    //接受收件地址列表 并设置默认勾选
    getData (addresses) {
      this.addresses = addresses;
      this.addresses.forEach(ele => {
        if (ele.isDefault === 1) {
          this.addressId = ele.id;
        }
      });
    },
    getCity (val) {
      return this.$store.getters.getAreaParents(val)[0].label + this.$store.getters.getAreaParents(val)[1].label + this.$store.getters.getAreaParents(val)[2].label
    }
  },
};
</script>

<style>
.createOrderTable .el-drawer__header{
  margin-bottom: 0;
}
.createOrderTable .el-drawer__body{
  padding-top: 0;
}
.tipsBox {
  padding-left:20px;
  padding-bottom: 20px;
}
.tipsBox .insureNum{
  color: #000;
  padding: 10px 0;
  margin: 0;
}
.tipsBox .buttonR{
  float: right;
  margin-right: 130px;
  margin-top: -20px;
}
.tipsBox .insureNum font{
  color: #ff0000;
  font-weight: 700;
}
.tipsBox .tipsSpan{
  color: #ff0000;
  font-size: 14px;
}
.create-order-box {
  height: 85% !important;
  position: relative;
}

.create-order-bill,
.create-order-address {
  border: 1px solid #ebeef5;
  margin-bottom: 10px;
  position: relative;
  padding-top: 52px;
  box-sizing: border-box;
}
.create-order-box-title {
  font-size: 18px;
  padding: 10px;
  border-bottom: 1px solid #ebeef5;
  position: absolute;
  top: 0;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  box-sizing: border-box;
}

.create-order-box-body {
  margin: 10px;
  height: 100%;
}

.create-order-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
}
.create-order-box .el-table__header {
  display: none;
}
.create-order-pwd{
  background-color: #fafafa;
  padding: 30px 20px;
}
.taskInformation label {
  margin-right: 80px;
}
 .create-order-pwd .employ-forgetPwd{
   margin-top: -72px;
   margin-left: 400px;
   float: left;
 }
 .create-order-pwd .el-input--suffix .el-input__inner{
   width: 280px;
 }
  .create-order-pwd .el-input{
    width: 280px;
  }
  .create-order-pwd .el-form-item__content{
   width: 300px;
 }
</style>