veterans_company/src/views/applicant.vue

<template>
  <div class="">
    <Header />
    <Mainmenu />
    <div class="gap"></div>
    <section class="wrap">
      <section class="left">
        <div class="base-info">
          <img class="portrait" :src="applicantInfo.avatar" alt="" />
          <div class="text">
            <div class="name">{{ applicantInfo.name }}</div>
            <div class="sex">{{ applicantInfo.menSex | filtersSex }}</div>
            <div class="lable">
              {{ applicantInfo.menBirth }} / {{ applicantInfo.politOutlook }} /
              {{ applicantInfo.degrEduc }}
            </div>
            <div class="">
              <i class="el-icon-mobile"></i>{{ applicantInfo.mobile }}
            </div>
          </div>
        </div>
        <!-- base-info end -->
        <div class="block">
          <div class="title">求职意向</div>
          <p>
            <span>{{ applicantInfo.expectedPost }}</span>
            <span> {{ applicantInfo.cityName }}</span>
            <span
              >{{ applicantInfo.expectedLowestSalary }}-{{
                applicantInfo.expectedHighestSalary
              }}K</span
            >
          </p>
          <p>
            <span>{{ applicantInfo.expectedIndustry }}</span>
          </p>
        </div>
        <div class="block">
          <div class="title">自我介绍</div>
          <p>
            {{ applicantInfo.selfAssessment }}
          </p>
        </div>
        <div class="block">
          <div class="title">工作经历</div>
          <div>暂无</div>
          <!-- <el-timeline :reverse="false">
            <el-timeline-item timestamp="2020/03-至今" placement="top">
              <el-card>
                <h4>贵州威振押运有限公司</h4>
                <p>武装押运员</p>
                <p>
                  本人综合素质佳，能够吃苦耐劳，忠诚稳重，坚守诚信正直原则，勇于挑战自我开发自身潜力。善于学习，勤奋务实，刻苦钻研，具备广泛的兴趣和很丰富的知识，适应能力强，能够在很短时间内融入一个新的领域，适应它并且把它做好。
                </p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="2018/4-2020/2" placement="top">
              <el-card>
                <h4>贵州威振押运有限公司</h4>
                <p>武装押运员</p>
                <p>
                  本人综合素质佳，能够吃苦耐劳，忠诚稳重，坚守诚信正直原则，勇于挑战自我开发自身潜力。善于学习，勤奋务实，刻苦钻研，具备广泛的兴趣和很丰富的知识，适应能力强，能够在很短时间内融入一个新的领域，适应它并且把它做好。
                </p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="2016/4-2018/1" placement="top">
              <el-card>
                <h4>贵州威振押运有限公司</h4>
                <p>武装押运员</p>
                <p>
                  本人综合素质佳，能够吃苦耐劳，忠诚稳重，坚守诚信正直原则，勇于挑战自我开发自身潜力。善于学习，勤奋务实，刻苦钻研，具备广泛的兴趣和很丰富的知识，适应能力强，能够在很短时间内融入一个新的领域，适应它并且把它做好。
                </p>
              </el-card>
            </el-timeline-item>
          </el-timeline> -->
        </div>
        <div class="block">
          <div class="title">培训与教育经历</div>
          <div>暂无</div>
          <!-- <el-timeline :reverse="false">
            <el-timeline-item timestamp="2020/03-至今" placement="top">
              <el-card>
                <h4>贵州威振押运有限公司</h4>
                <p>武装押运员</p>
                <p>
                  本人综合素质佳，能够吃苦耐劳，忠诚稳重，坚守诚信正直原则，勇于挑战自我开发自身潜力。善于学习，勤奋务实，刻苦钻研，具备广泛的兴趣和很丰富的知识，适应能力强，能够在很短时间内融入一个新的领域，适应它并且把它做好。
                </p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="2018/4-2020/2" placement="top">
              <el-card>
                <h4>贵州威振押运有限公司</h4>
                <p>武装押运员</p>
                <p>
                  本人综合素质佳，能够吃苦耐劳，忠诚稳重，坚守诚信正直原则，勇于挑战自我开发自身潜力。善于学习，勤奋务实，刻苦钻研，具备广泛的兴趣和很丰富的知识，适应能力强，能够在很短时间内融入一个新的领域，适应它并且把它做好。
                </p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="2016/4-2018/1" placement="top">
              <el-card>
                <h4>贵州威振押运有限公司</h4>
                <p>武装押运员</p>
                <p>
                  本人综合素质佳，能够吃苦耐劳，忠诚稳重，坚守诚信正直原则，勇于挑战自我开发自身潜力。善于学习，勤奋务实，刻苦钻研，具备广泛的兴趣和很丰富的知识，适应能力强，能够在很短时间内融入一个新的领域，适应它并且把它做好。
                </p>
              </el-card>
            </el-timeline-item>
          </el-timeline> -->
        </div>
      </section>
      <!-- left end -->
      <section class="right">
        <div class="btn" v-if="applyInfo.status <= 10" @click="handleinvite">
          邀请面试
        </div>
        <div class="btn refused" v-if="applyInfo.status <= 10" @click="refused">
          不合适
        </div>
        <!-- <div class="btn result" v-if="applyInfo.status == 60">已标为不合适</div> -->
        <div class="btn result">
          {{ applyInfo.status | verifyStatusFilter }}
          <span v-if="applyInfo.status == '20'"
            >({{ applyInfo.interviewMethod | filterMethod }})</span
          >
        </div>
      </section>
    </section>
    <el-dialog
      title="发送面试邀请"
      :visible.sync="dialogVisible"
      :center="true"
      width="30%"
    >
      <el-form :model="form" :inline="false">
        <el-form-item label="意向岗位" :label-width="formLabelWidth">
          {{ postName }}
          ({{ postLowestSalary }}-{{ postHighestSalary }}K)
        </el-form-item>
        <el-form-item label="邀请面试时间" :label-width="formLabelWidth">
          <el-date-picker
            v-model="form.interviewTime"
            type="datetime"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="邀请面试方式" :label-width="formLabelWidth">
          <el-select v-model="form.interviewMethod" placeholder="面试方式">
            <el-option label="现场面试" value="1"></el-option>
            <el-option label="视频面试" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="form.interviewMethod == 1"
          label="邀请面试区域"
          :label-width="formLabelWidth"
        >
          <el-cascader
            filterable
            size="large"
            ref="addressSelect"
            :options="addressOptions"
            v-model="areaCode"
            :leafOnly="true"
            @change="addrChange"
          >
          </el-cascader>
          <!-- <el-input v-model="form.interviewArea" autocomplete="off"></el-input> -->
        </el-form-item>
        <el-form-item
          v-if="form.interviewMethod == 1"
          label="邀请面试地址"
          :label-width="formLabelWidth"
        >
          <el-input
            style="width: 60%"
            v-model="form.interviewAddress"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item
          v-if="form.status == 50"
          label="邀请入职时间"
          :label-width="formLabelWidth"
        >
          <el-date-picker
            v-model="form.hiredate"
            type="datetime"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Header from "@/components/header.vue";
import Mainmenu from "@/components/mainmenu.vue";
import { parseTime } from "@/utils/index";
import { regionDataPlus, CodeToText } from "element-china-area-data";
import {
  getapplicantInfo,
  updateStatus,
  invite,
  getApplyStatus,
} from "@/utils/api";
export default {
  name: "",
  components: {
    Header,
    Mainmenu,
  },
  data() {
    return {
      areaCode: ["520000", "520100", "520102"],
      addressOptions: regionDataPlus,
      dialogVisible: false,
      veteMemberId: "",
      postId: "",
      applyId: "",
      applyInfo: {},
      applicantInfo: {},
      status: "",
      form: {},
      formLabelWidth: "80",
      postName: "",
      postLowestSalary: "",
      postHighestSalary: "",
    };
  },
  filters: {
    filtersSex(val) {
      if (val == "0") {
        return "男";
      } else if (val == "1") {
        return "女";
      }
    },
    filterMethod(val) {
      if (val == "0") {
        return "视频";
      } else if (val == "1") {
        return "现场";
      }
    },
    verifyStatusFilter(value) {
      if (value == 0) {
        return "未查看";
      } else if (value == 10) {
        return "已查看";
      } else if (value == 20) {
        return "已邀请面试";
      } else if (value == 30) {
        return "已接受面试";
      } else if (value == 40) {
        return "已拒绝面试";
      } else if (value == 50) {
        return "面试通过";
      } else if (value == 60) {
        return "不合适";
      } else if (value == 70) {
        return "未参加面试";
      } else if (value == 80) {
        return "已拒绝入职";
      } else if (value == 90) {
        return "已入职";
      } else {
        return "未知";
      }
    },
  },
  created() {
    this.veteMemberId = this.$route.query.veteMemberId;
    this.applyId = this.$route.query.applyId;
    this.form.id = this.$route.query.applyId;
    this.postName = this.$route.query.postName;
    this.postLowestSalary = this.$route.query.postLowestSalary;
    this.postHighestSalary = this.$route.query.postHighestSalary;
    this.handelGetapplicantInfo();
    this.handelApplyInfo();
  },
  methods: {
    handelGetapplicantInfo() {
      getapplicantInfo({ memberId: this.veteMemberId })
        .then((res) => {
          console.log("getapplicantInfo", res);
          this.applicantInfo = res.data;
        })
        .catch((err) => {
          console.log("getapplicantInfo err", err);
        });
    },
    handelApplyInfo() {
      getApplyStatus({ applyId: this.applyId })
        .then((res) => {
          console.log("getApplyStatus", res);
          this.applyInfo = res.data;
        })
        .catch((err) => {
          console.log("getApplyStatus err", err);
        });
    },
    refused() {
      let that = this;
      this.$confirm("确认不合适？")
        .then((res) => {
          console.log("res", res);
          updateStatus({ id: this.applyId, status: "60" }).then((res) => {
            this.handelApplyInfo();
            this.$message({
              message: res.msg,
              type: "success",
              duration: 1000,
              onClose: function () {
                this.dialogVisible = false;
              },
            });
            // console.log("updateStatus", res);
          });
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    submit() {
      console.log("this.form", this.form);
      if (this.form.interviewMethod == "1") {
        this.form.interviewArea =
          CodeToText[this.areaCode[0]] +
          CodeToText[this.areaCode[1]] +
          CodeToText[this.areaCode[2]];
      }
      this.form.interviewTime = parseTime(this.form.interviewTime);
      let param = {
        id: "",
        interviewMethod: "",
        interviewArea: "",
        interviewTime: "",
        interviewAddress: "",
      };
      let that = this;

      invite(this.form)
        .then((res) => {
          this.handelApplyInfo();
          this.$message({
            message: res.msg,
            type: "success",
            duration: 1000,
            onClose: function () {
              this.dialogVisible = false;
            },
          });
          // console.log("updateStatus", res);
        })
        .catch((err) => {
          console.log("invite err", err);
        });
    },
    handleinvite() {
      this.dialogVisible = true;
    },
    addrChange(value) {
      this.form.interviewArea =
        CodeToText[value[0]] + CodeToText[value[1]] + CodeToText[value[2]];
      console.log(
        CodeToText[value[0]] + CodeToText[value[1]] + CodeToText[value[2]],
        "选中地址"
      );
      // console.log("addrChange", value);
    },
  },
};
</script>

<style lang='scss' scoped>
.gap {
  height: 15px;
  background: #eee;
}
.wrap {
  padding-top: 63px;
  .left {
    width: 675px;
    float: left;
    .base-info {
      overflow: hidden;
      margin-bottom: 44px;
      .portrait {
        width: 80px;
        height: 80px;
        float: left;
      }
      .text {
        float: left;
        margin-left: 20px;
        color: #6f6f6f;
        font-size: 14px;
        div {
          margin: 5px 0;
        }
        .name {
          font-size: 24px;
          font-weight: 400;
          color: #262626;
          line-height: 33px;
        }
      }
    }
    .block {
      margin-bottom: 30px;
      line-height: 1.5;
      .title {
        margin-bottom: 10px;
        font-size: 18px;
        font-weight: 500;
        color: #1c1c1c;
        line-height: 25px;
      }
      span + span {
        margin-left: 10px;
      }
    }
  }
  .right {
    width: 358px;
    float: right;
    .btn {
      height: 67px;
      line-height: 67px;
      background: #4aad78;
      border-radius: 5px;
      text-align: center;
      color: #fff;
      font-size: 20px;
      cursor: pointer;
      margin-bottom: 10px;
      box-sizing: border-box;
      &.refused {
        background: transparent;
        border: 2px solid #f56c6c;
        color: #f56c6c;
      }
      &.result {
        background: transparent;
        color: #878787;
        cursor: default;
      }
    }
  }
}
::v-deep {
  .el-cascader {
    width: 100%;
  }
  .el-select {
    width: 100%;
  }
  .el-dialog {
    -moz-box-shadow: rgba(169, 169, 169, 0.6) 0px 0px 0px 10px; /* 老的 Firefox */
    box-shadow: rgba(169, 169, 169, 0.6) 0px 0px 0px 10px;
    border-radius: 0px;
    .el-dialog__header {
      background: rgb(0, 179, 138);
      span {
        color: white;
        font-size: 16px;
      }
      .el-dialog__headerbtn .el-dialog__close {
        color: white;
      }
    }
  }
}
</style>