bocai_supplyChain_pc/src/components/FirstJob/recordBill.vue

<template>
  <div class="recordBill-container w">
    <!-- 面包屑 -->
    <a-breadcrumb class="w">
      <a-breadcrumb-item href="">
        <router-link to="/main"><a-icon type="home" /></router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item href="">
        <router-link to="/list">
          <span>一手职位</span>
        </router-link>
      </a-breadcrumb-item>
      <!-- <a-breadcrumb-item href="" v-if="!islist"> -->
      <a-breadcrumb-item>
        <router-link :to="'/detail/' + firminfo.id">
          <!-- <span @click="$router.back(-1)">企业详情</span> -->
          <span>企业详情</span>
        </router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item href="">
        <span>报名</span>
      </a-breadcrumb-item>
    </a-breadcrumb>
    <div class="content">
      <a-form-model ref="ruleForm" :model="form" :colon="true" :rules="rules">
        <a-form-model-item
          ref="proxy"
          label="代理"
          prop=""
          :wrapperCol="{ span: 18 }"
          :labelCol="{ span: 4 }"
          style="height: 30px"
        >
          <!-- <a-input
            :value="
              proxyinfo.userName !== '' &&
              proxyinfo.userName !== null &&
              proxyinfo.userName !== undefined
                ? proxyinfo.userName
                : proxyinfo.tel
            "
            :disabled="true"
          /> -->
          <div class="pzbox" style="width: 100%">
            <span>
              {{
                proxyinfo.userName !== "" &&
                proxyinfo.userName !== null &&
                proxyinfo.userName !== undefined
                  ? proxyinfo.userName
                  : proxyinfo.tel
              }}</span
            >
            <span
              :style="{
                color: '#ff6a00',
                marginLeft: '10px',
                cursor: 'pointer',
              }"
              v-if="isMaster"
              >配置</span
            >
          </div>
        </a-form-model-item>
        <a-form-model-item
          ref="username"
          label="报名企业"
          prop="username"
          :wrapperCol="{ span: 18 }"
          :labelCol="{ span: 4 }"
          style="height: 30px"
        >
          <!-- <a-input :value="firminfo.aliasName" :disabled="true" /> -->
          <div class="pzbox" style="width: 100%">
            <span>{{ firminfo.aliasName }}</span>
            <span
              :style="{
                color: '#ff6a00',
                marginLeft: '10px',
                cursor: 'pointer',
              }"
              v-if="isMaster"
              >配置</span
            >
          </div>
        </a-form-model-item>
        <a-form-model-item
          ref="username"
          label="岗位"
          prop="username"
          :wrapperCol="{ span: 18 }"
          :labelCol="{ span: 4 }"
          style="height: 30px"
        >
          <!-- <a-input :value="firminfo.jobName" :disabled="true" /> -->
          <div class="pzbox" style="width: 100%">
            <span>{{ firminfo.jobName }}</span>
            <span
              :style="{
                color: '#ff6a00',
                marginLeft: '10px',
                cursor: 'pointer',
              }"
              v-if="isMaster"
              >配置</span
            >
          </div>
        </a-form-model-item>
        <a-form-model-item
          ref="interviewTime"
          label="面试时间"
          prop="interviewTime"
          :wrapperCol="{ span: 18 }"
          :labelCol="{ span: 4 }"
        >
          <timepicker
            :isShow.sync="isShow"
            :datetime.sync="form.interviewTime"
          ></timepicker>
          <a-input
            v-model="form.interviewTime"
            placeholder="请选择面试时间"
            @input="verify"
            @click="getDateinfo"
            ><i
              class="iconfont icon-rili"
              slot="suffix"
              @click="getDateinfo"
            ></i
          ></a-input>
          <!-- <a-date-picker
            :showToday="false"
            format="YYYY-MM-DD HH:mm"
            :disabledDate="interviewTimeDisabledDate"
            :disabledTime="interviewTimeDisabledDateTime"
            :showTime="{
              hideDisabledOptions: true,
              defaultValue: moment('12:00', 'HH:mm'),
              format: 'HH:mm',
            }"
            v-decorator="[
              'interviewTime',
              { rules: [{ required: true, message: '请选择面试时间' }] },
            ]"
            placeholder="请选择面试时间"
            style="width: 100%"
            @click="isShow = true"
          /> -->
        </a-form-model-item>
        <a-row class="specialbox">
          <a-col :span="12">
            <a-form-model-item
              ref="userName"
              label="姓名"
              prop="userName"
              :wrapperCol="{ span: 15 }"
              :labelCol="{ span: 8 }"
            >
              <a-input
                v-model="form.userName"
                placeholder="请输入老乡姓名"
                class="special-input"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item
              ref="sex"
              label="性别"
              prop="sex"
              :wrapperCol="{ span: 18 }"
              :labelCol="{ span: 5 }"
            >
              <a-radio-group
                v-model="form.sex"
                defaultValue="nan"
                class="radiobox"
              >
                <a-radio value="1"> 男 </a-radio>
                <a-radio value="2"> 女 </a-radio>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <!-- :offset="2" -->
            <a-form-model-item
              ref="age"
              label="年龄"
              prop="age"
              :wrapperCol="{ span: 15 }"
              :labelCol="{ span: 8 }"
            >
              <a-input
                v-model="form.age"
                placeholder="请输入年龄"
                class="special-input"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item
              ref="peoplecard"
              label="民族"
              prop="peoplecard"
              :wrapperCol="{ span: 15 }"
              :labelCol="{ span: 5 }"
            >
              <a-select
                v-model="form.nation"
                placeholder="请选择民族"
                class="special-input"
              >
                <a-select-option
                  v-for="item in nationlist"
                  :key="item.id"
                  :value="item.name"
                  >{{ item.name }}</a-select-option
                >
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="20">
            <a-form-model-item
              ref="idCard"
              label="身份证号"
              prop="idCard"
              :wrapperCol="{ span: 16 }"
              :labelCol="{ span: 5 }"
            >
              <a-input
                v-model="form.idCard"
                placeholder="请输入老乡身份证号"
                :max-length="18"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="4" class="idCardUpload"
            ><a-upload
              :customRequest="customRequestFun"
              list-type="picture-card"
              :file-list="fileList"
              @change="handleChange"
              @preview="handlePreview"
              style="margin-left: -50px"
              :beforeUpload="beforeUpload"
              :data="dataObj"
            >
              <div
                v-if="fileList.length < 1"
                style="
                  display: flex;
                  justify-content: center;
                  align-items: center;
                "
              >
                <a-icon type="upload" />
                <div class="ant-upload-text">上传证件</div>
              </div>
            </a-upload>
            <i
              class="iconfont icon-guanbi"
              v-if="fileList.length !== 0"
              @click="fileList = []"
            ></i
          ></a-col>
        </a-row>
        <a-form-model-item
          ref="peoplecard"
          label="家庭住址"
          prop="peoplecard"
          :wrapperCol="{ span: 18 }"
          :labelCol="{ span: 4 }"
        >
          <a-input v-model="form.address" placeholder="请输入家庭住址" />
        </a-form-model-item>

        <!-- <a-form-model-item ref="username" label="模式" prop="username">
          <a-select v-model="form.pattern" placeholder="请选择民族">
            <a-select-option :value="apply.id">{{ apply.id }}</a-select-option>
          </a-select>
        </a-form-model-item> -->
        <!-- <a-form-model-item
          ref="username"
          label="政策"
          prop="username"
          :wrapperCol="{ span: 18 }"
          :labelCol="{ span: 4 }"
        >
          <a-input
            v-model="form.policy"
            style="min-height: 150px; max-height: 200px"
            type="textarea"
          />
        </a-form-model-item> -->
      </a-form-model>

      <div class="upline">
        <div>
          <a-button
            type="primary"
            @click="onClose"
            :style="{
              color: '#666',
              backgroundColor: '#fafafa',
              borderColor: '#ddd',
              boxShadow: 'none',
              textShadow: 'none',
            }"
          >
            取消
          </a-button>
          <a-button
            style="
              margin-left: 10px;
              color: #fff;
              background-color: #ff6a00;
              border-color: #ff6a00;
            "
            @click="handleOk"
            :loading="confirmLoading"
          >
            提交
          </a-button>
        </div>
      </div>
    </div>
    <a-modal
      :visible="previewVisible"
      :footer="null"
      @cancel="previewVisible = false"
    >
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </div>
</template>

<script>
import { nationlist } from "../../utils/datalist";
// import recordbill from "@/components/FirstJob/components/recordbill.vue";
import moment from "moment";
import timepicker from "./components/timepicker.vue";
import { recordBillApi } from "@/api/job";
import request from "@/utils/request";
// import axios from "axios";
import $ from "jquery";

export default {
  // 组件名称
  name: "recordBill",
  // 局部注册的组件
  components: {
    // recordbill,
    timepicker,
  },
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      // facetimedate: "",
      previewVisible: false,
      previewImage: "",
      isMaster: false,
      isShow: false,
      userinfo: {},
      islist: false,
      fileList: [],
      confirmLoading: false,
      dataObj: {
        policy: "",
        signature: "",
        key: "",
        ossaccessKeyId: "",
        dir: "",
        host: "",
        // callback:'',
      },
      rules: {
        // 录单校验规则
        interviewTime: [
          {
            required: true,
            message: "请选择面试时间",
            trigger: "blur",
          },
        ],
        userName: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur",
          },
          {
            pattern:
              // /^((?![\u3000-\u303F])[\u2E80-\uFE4F]|·)*(?![\u3000-\u303F])[\u2E80-\uFE4F](·)*$/, // 姓名校验规则
              /^(((?![\u3000-\u303F])[\u2E80-\uFE4F]|·)*(?![\u3000-\u303F])[\u2E80-\uFE4F][^·]{1,12})$/, // 姓名校验规则
            message: "请输入正确的姓名",
            trigger: "blur",
          },
        ],
        sex: [
          {
            required: true,
            message: "请选择性别",
            trigger: "change",
          },
        ],
        age: [
          {
            required: true,
            message: "请输入年龄",
            trigger: "blur",
          },
          {
            pattern: /^\d{2}$/,
            message: "请输入正确的年龄",
            trigger: "blur",
          },
        ],
        idCard: [
          // {
          //   required: true,
          //   message: "请输入年龄",
          //   trigger: "blur",
          // },
          {
            min: 18,
            max: 18,
            message: "请输入正确的身份证号",
            trigger: "blur",
          },
        ],
        // tel: [{ required: true, message: "请输入手机号", trigger: "submit" }],
      },
      form: {
        // 录单数据
        userName: "",
        idCard: "",
        sex: "", // 性别
        age: "", // 年龄
        nation: undefined, // 民族
        address: "", // 家庭住址
        policy: "", // 代理政策
        interviewTime: "", // 面试时间
        idCardImageUrl: "",
      },
      proxyinfo: {},
      nationlist,
      firminfo: {},
      moment,
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {
    facetimedate() {
      console.log(this.facetimedate);
    },
  },
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    if (JSON.stringify(this.$route.params) == "{}") {
      this.firminfo = JSON.parse(sessionStorage.getItem("CURRENT_FIRM"));
    } else {
      this.firminfo = this.$route.params;
    }
    console.log();
    // this.userinfo = JSON.parse(userinfo);
    this.proxyinfo = JSON.parse(sessionStorage.getItem("LOGIN_DATA"));
    // sessionStorage.setItem("CURRENT_FIRM", JSON.stringify(userinfo));
    console.log(this.firminfo);
    // console.log(this.proxyinfo);
    // console.dir(document.querySelector(".ant-calendar-picker-input"));
    // let picker = document.querySelector(".ant-calendar-picker-input");
    // picker.addEventListener(
    //   "focus",
    //   function () {
    //     console.log(document.querySelector(".ant-calendar-selected-day"));
    //   },
    //   true
    // );
    this.setrecordtype();
  },
  /**
   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
   */
  mounted() {},
  // 组件方法
  methods: {
    onClose() {
      this.form = {
        // 录单数据
        userName: "",
        idCard: "",
        sex: "", // 性别
        age: "", // 年龄
        nation: undefined, // 民族
        address: "", // 家庭住址
        policy: "", // 代理政策
        interviewTime: "", // 面试时间
        idCardImageUrl: "",
      };
      this.$router.push("/detail/" + this.firminfo.id);
    },
    handleOk() {
      this.$refs.ruleForm.validate(async (ispass, no) => {
        console.log(this.form);
        console.log(ispass);
        this.confirmLoading = true;

        if (ispass) {
          console.log(this.form);
          const { data } = await recordBillApi({
            ...this.form,
            storeJobId: this.firminfo.id,
          });
          console.log(data);
          if (data.status === 200) {
            console.log(data);
            // this.$message.success("提交成功");
            setTimeout(() => {
              this.confirmLoading = false;

              this.$router.push("/recordsuccess");
            }, 1000);
          } else {
            this.$message.error(data.msg);
          }
          // setTimeout(() => {
          //   this.confirmLoading = false;
          //   this.form = {
          //     // 录单数据置空
          //     name: "",
          //     tel: "",
          //     peoplecard: "",
          //     username: "",
          //   };
          //   this.visible = false;
          // }, 2000);
        } else {
          this.confirmLoading = false;

          console.log(123);
        }
        console.log(no);
      });
    },
    interviewTimeDisabledDate(current) {
      // Can not select days before today and today
      return (
        current < moment().startOf("day") || current > moment().add(100, "days")
      );
    },
    interviewTimeDisabledDateTime() {
      return {
        disabledHours: () => [0, 1, 2, 3, 4, 5, 6, 22, 23],
        disabledMinutes: () =>
          this.range(0, 60)
            .splice(1, 29)
            .concat(this.range(0, 60).splice(31, 59)),
        disabledSeconds: () => this.range(1, 60),
      };
    },
    range(start, end) {
      const result = [];
      for (let i = start; i < end; i++) {
        result.push(i);
      }
      return result;
    },
    setrecordtype() {
      // 设置跳转到报名界面的类型
      let islist = JSON.parse(sessionStorage.getItem("ISLIST"));
      this.islist = islist;
    },
    getDom() {
      console.log(1);
    },
    getDateinfo() {
      this.isShow = true;
      console.log(this.form.interviewTime);
    },
    verify() {
      if (this.form.interviewTime !== "") {
        this.form.interviewTime = "";
      }
    },
    handleChange({ fileList }) {
      console.log(fileList);
      this.fileList = fileList;
    },
    // getBase64(file) {
    //   return new Promise((resolve, reject) => {
    //     const reader = new FileReader();
    //     console.log(reader);
    //     reader.readAsDataURL(file);
    //     reader.onload = () => resolve(reader.result);
    //     reader.onerror = (error) => reject(error);
    //   });
    // },
    beforeUpload() {
      let that = this;
      //resolve()
      return new Promise((resolve, reject) => {
        //resolve()
        new Promise((resolve) => {
          request({
            url: "/oss/policy",
            method: "get",
          })
            .then(({ data }) => {
              console.log(data);
              // console.log(data.msg);
              resolve(data.data);
            })
            .catch((err) => {
              console.log(err);
            });
        })
          .then((response) => {
            console.log("响应的数据", response);
            that.dataObj.policy = response.data.policy;
            that.dataObj.signature = response.data.signature;
            that.dataObj.ossaccessKeyId = response.data.accessid;
            that.dataObj.key =
              response.data.dir + that.getUUID() + "_${filename}";
            that.dataObj.dir = response.data.dir;
            that.dataObj.host = response.data.host;
            console.log("响应的数据222。。。", that.dataObj);
            resolve(true);
          })
          .catch((err) => {
            console.log(err);
            reject(false);
          });
      });
    },
    getUUID() {
      return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
        return (
          c === "x" ? (Math.random() * 16) | 0 : "r&0x3" | "0x8"
        ).toString(16);
      });
    },
    customRequestFun(file) {
      console.dir(file.onSuccess);
      let _self = this;
      var formData = new FormData();

      //注意formData里append添加的键的大小写
      formData.append("key", _self.dataObj.key); //存储在oss的文件路径
      formData.append("OSSAccessKeyId", _self.dataObj.ossaccessKeyId); //accessKeyId
      formData.append("policy", _self.dataObj.policy); //policy
      formData.append("Signature", _self.dataObj.signature); //签名
      formData.append("success_action_status", "200"); // 上传成功返回的状态码，不设置则是204
      formData.append("file", file.file); // 一定在最后

      file.onProgress();
      $.ajax({
        type: "post",
        url: "http://matripe-cms.oss-cn-beijing.aliyuncs.com",
        data: formData,
        contentType: false, // 不设置Content-Type请求头
        processData: false,
        success: function (data) {
          file.onSuccess();
          _self.uploadFileFlag = true;
          console.log(data);
          var img =
            _self.dataObj.host +
            "/" +
            _self.dataObj.key.replace("${filename}", file.file.name);
          _self.form.idCardImageUrl = img;
        },
        fail: function (err) {
          console.log(err);
        },
      });
    },
    async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await this.getBase64(file.originFileObj);
      }
      this.previewImage = file.url || file.preview;
      this.previewVisible = true;
    },
    getBase64(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => resolve(reader.result);
        reader.onerror = (error) => reject(error);
      });
    },
  },
};
</script>

<style scoped lang="less">
.recordBill-container {
  // height: 100%;

  box-sizing: border-box;
  .content {
    margin-top: 12px;
    padding: 30px 0 20px 300px;
    position: relative;
    background-color: #fff;
    text-align: left;
    .ant-form {
      width: 640px;
    }
  }
  .upline {
    position: relative !important;
    box-shadow: none;
    // transform: translateX(-10px);
    margin-top: -12px;
    > div {
      margin-left: 251px;
      display: flex;
      justify-content: start;
      button {
        transition: none;
      }
      button:first-child {
        &:hover {
          border-color: #ff6a00 !important;
          color: #ff6a00 !important;
        }
      }
      button:last-child {
        &:hover {
          background-color: #ff7c1f !important;
          border-color: #ff7c1f !important;
        }
      }
      // button::after {
      //   // display: none;
      // }
    }
  }
}
/deep/ .ant-radio-wrapper {
  margin-right: 16px;
  span:last-child {
    padding: 0 2px;
  }
}
/deep/ .ant-radio {
  border-color: #d9d9d9;
  box-shadow: none;
  &:after {
    display: none;
  }
  &:hover .ant-radio-inner {
    border-color: #ff6a00 !important;
    box-shadow: none;
  }
}
/deep/ .ant-radio-checked {
  .ant-radio-input:focus {
    box-shadow: none;
  }
  .ant-radio-inner {
    border-color: #ff6a00;
    box-shadow: none;
    &::after {
      background-color: #ff6a00 !important;
    }
  }
}
.ant-col {
  .ant-form-item {
    margin-top: 0;
    margin-bottom: 16px !important;
  }
}
.idCardUpload {
  // 上传身份证关闭按钮的样式
  position: relative;
  .icon-guanbi {
    position: absolute;
    top: -3px;
    right: 52px;
    height: 16px;
    width: 16px;
    text-align: center;
    line-height: 16px;
    font-size: 12px;
    font-weight: 900;
    border-radius: 50%;
    background-color: #999;
    color: #fff;
    z-index: 99;
    &::before {
      display: inline-block;
      transform: scale(0.6);
    }
  }
}
.specialbox {
  margin-top: -8px;
}
/deep/ .ant-upload-picture-card-wrapper {
  width: 100px !important;
  height: 40px !important;
  .ant-upload.ant-upload-select-picture-card,
  .ant-upload-list-item,
  .ant-upload-list-picture-card-container {
    width: 100px !important;
    height: 40px !important;
    min-width: 100px !important;
    min-height: 40px !important;
    font-size: 12px;
    padding: 0;
    border-color: #dddddd !important;
    box-sizing: border-box;
    .ant-upload {
      padding: 0;
    }
    .ant-upload-list-item-info {
      img {
        display: block;
        border-radius: 2px;
      }
    }
    .ant-upload-select {
      background-color: #f5f5f5 !important;
    }
    .ant-upload-text {
      font-size: 12px;
      margin: 0 0 0 6px;
    }
    .ant-upload-list-item-uploading-text {
      display: inline-block;
      text-align: center !important;
      line-height: 0px !important;
      width: 100px !important;
      height: 40px !important;
      // overflow: hidden;
    }
    .ant-upload-list-item-actions {
      > i {
        display: none;
      }
      > a {
        text-align: center;
      }
    }
  }
}
/deep/ .ant-form-item {
  // margin-bottom: 0;
  margin-top: -8px;
  .ant-col-5 {
    width: 20%;
  }

  .ant-form-item-label {
    // line-height: 22px;
    > label {
      font-weight: 600;
      color: #464646cc;
    }
  }
  .ant-input-affix-wrapper {
    &:hover .ant-input {
      border-color: #d9d9d9;
    }
  }
  .radiobox {
    height: 40px;
    display: flex;
    align-items: center;
  }

  .ant-form-item-children {
    .pzbox {
      // display: flex !important;
      color: #4d575e;
      span {
        display: inline-block;
        &:first-child {
          min-width: 50px;
        }
        // &:last-child {
        //   cursor: pointer;
        //   margin-left: 10px;
        //   color: #ff6a00;
        // }
      }
      // &::before {
      //   content: "";
      //   display: block;
      //   position: absolute;
      //   height: 1px;
      //   width: 588px;
      //   left: -428px;
      //   top: -20px;
      //   background-color: #d5d5d5;
      // }
    }
  }

  .ant-input {
    // width: 430px;
    height: 40px;
    // color: rgba(77, 87, 94, 0.7);
    color: #4d575e;

    // border: none;
    border: 1px solid #dddddd;
    box-shadow: none !important;
    // background-color: #f6f6f6;
    &::placeholder {
      color: #cdcdcd;
    }
  }
  .ant-select-selection__rendered,
  .ant-select-selection--single,
  .ant-select {
    height: 40px;
    line-height: 40px;
    // border: none;
    // border: 1px solid #dddddd;
    box-shadow: none !important;
    border-color: #d9d9d9;
    .ant-select-selection__placeholder {
      line-height: 17px;
      color: #cdcdcd;
    }
    .ant-select-selection-selected-value {
      line-height: 37px;
      color: #4d575e;
    }
    &:hover {
      border-color: #d9d9d9;
    }
    // &:focus {
    //   border-color: #d9d9d9;
    // }
    // &:active {
    //   border-color: #d9d9d9;
    // }
  }
}
/deep/ .ant-modal-content {
  // padding: 0;
  .ant-modal-close-x {
    width: 32px;
    height: 16px;
    .anticon-close {
      vertical-align: 10px;
      margin-top: -10px;
    }
  }
}
</style>