dy-admin-manager/src/views/HumanResources/form.vue

<template>
  <div class="form">
    <div class="description-title">
      <span>基本信息</span>
    </div>
    <el-form :model="form" :rules="rules" ref="ruleForm" label-width="0px">
      <div class="description-view">
        <table class="description-table">
          <tbody>
            <tr class="description-tr">
              <th class="description-label">
                <i class="requiredStar">*</i>姓名
              </th>
              <td class="description-content">
                <el-form-item
                  prop="realName"
                  :rules="[
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                  ]"
                >
                  <el-input
                    v-model="form.realName"

                    placeholder="请输入姓名"
                  />
                </el-form-item>
              </td>
              <th class="description-label">年龄</th>
              <td class="description-content">
                <el-form-item prop="age">
                  <el-input
                    v-model="form.age"

                    type="number"
                    min="1"
                    step="1"
                    placeholder="请输入年龄"
                  />
                </el-form-item>
              </td>
              <th class="description-label">性别</th>
              <td class="description-content">
                <el-form-item prop="gender">
                  <el-select

                    v-model.trim="form.gender"
                    clearable
                    filterable
                    placeholder="请选择性别"
                  >
                    <el-option label="男" :value="true"></el-option>
                    <el-option label="女" :value="false"></el-option>
                  </el-select>
                </el-form-item>
              </td>
            </tr>
            <tr class="description-tr">
              <th class="description-label">
                <i class="requiredStar">*</i>手机号
              </th>
              <td class="description-content">
                <el-form-item
                  prop="mobileNo"
                  :rules="[
                    {
                      required: true,
                      message: '请输入手机号',
                      trigger: 'blur',
                    },
                    {
                      pattern: /^1\d{10}$/,
                      message: '请输入正确的手机号',
                      trigger: 'blur',
                    },
                  ]"
                >
                  <el-input

                    minlength="11"
                    maxlength="11"
                    v-model="form.mobileNo"
                    placeholder="请输入手机号"
                    type="tel"
                  />
                  <!-- @blur="mobileOrWechatValidate" -->
                </el-form-item>
              </td>
              <th class="description-label">微信号</th>
              <td class="description-content">
                <el-form-item prop="wechatNo">
                  <el-input

                    v-model="form.wechatNo"
                    placeholder="请输入微信号"
                  />
                </el-form-item>
              </td>
              <th class="description-label">身份证号</th>
              <td class="description-content">
                <el-form-item prop="idCard">
                  <el-input

                    v-model="form.idCard"
                    placeholder="请输入身份证号"
                  />
                </el-form-item>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="description-title" style="margin-top: 20px">
        <span>教育信息</span>
      </div>
      <div class="description-view">
        <table class="description-table">
          <tbody>
            <tr
              class="description-tr"
              v-for="(item, index) in form.educations"
              :key="index"
            >
              <th class="description-label desc-item">
                <span class="close">
                  <i
                    v-if="index === 0"
                    @click="addEducation"
                    class="el-icon-circle-plus-outline"
                  />
                  <i
                    v-else
                    @click="removeEducation(index)"
                    class="el-icon-remove-outline"
                  /> </span
                >学历
              </th>
              <td class="description-content">
                <el-form-item :prop="'educations.' + index + '.level'">
                  <el-input
                    v-model="form.educations[index].level"

                    placeholder="请输入学历"
                  />
                </el-form-item>
              </td>
              <th class="description-label">学校</th>
              <td class="description-content">
                <el-form-item :prop="'educations.' + index + '.school'">
                  <el-input

                    v-model="form.educations[index].school"
                    placeholder="请输入学校"
                  />
                </el-form-item>
              </td>
              <th class="description-label">专业</th>
              <td class="description-content">
                <el-form-item :prop="'educations.' + index + '.subject'">
                  <el-input

                    v-model="form.educations[index].subject"
                    placeholder="请输入专业"
                  />
                </el-form-item>
              </td>
              <th class="description-label">毕业时间</th>
              <td class="description-content">
                <el-form-item :prop="'educations.' + index + '.year'">
                  <el-date-picker
                    type="month"
                    placeholder="请选择毕业时间"

                    v-model="form.educations[index].year"
                  />
                </el-form-item>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="description-title" style="margin-top: 20px">
        <span>招聘信息</span>
      </div>
      <div class="description-view">
        <table class="description-table">
          <tbody>
            <tr class="description-tr">
              <th class="description-label">所在城市</th>
              <td class="description-content">
                <el-form-item prop="liveCity">
                  <el-input

                    v-model.trim="form.liveCity"
                    placeholder="请输入所在城市"
                  />
                </el-form-item>
              </td>
              <th class="description-label">意向城市</th>
              <td class="description-content">
                <el-form-item prop="intentionCity">
                  <el-input

                    v-model.trim="form.intentionCity"
                    placeholder="请输入意向城市"
                  />
                </el-form-item>
              </td>
              <th class="description-label">意向合作模式</th>
              <td class="description-content">
                <el-form-item prop="jobNature">
                  <el-select

                    v-model.trim="form.jobNature"
                    clearable
                    filterable
                    placeholder="请选择意向合作模式"
                  >
                    <el-option label="兼职" value="PART_TIME"></el-option>
                    <el-option label="全职" value="FULL_TIME"></el-option>
                  </el-select>
                </el-form-item>
              </td>
            </tr>
            <tr class="description-tr">
              <th class="description-label">岗位类别</th>
              <td class="description-content">
                <el-form-item prop="jobType">
                  <el-select

                    v-model.trim="form.jobType"
                    clearable
                    filterable
                    placeholder="请选择岗位类别"
                  >
                    <el-option label="指导老师" value="ADVISER"></el-option>
                    <el-option label="乐团主管" value="ACADEMIC"></el-option>
                    <el-option label="乐队指导" value="TEACHING"></el-option>
                  </el-select>
                </el-form-item>
              </td>
              <th class="description-label">声部</th>
              <td class="description-content" colspan="3">
                <el-form-item prop="subjectIdList">
                  <el-select

                    v-model.trim="form.subjectIdList"
                    clearable
                    filterable
                    multiple
                    collapse-tags
                    placeholder="请选择声部"
                  >
                    <el-option
                      v-for="(item, index) in subjectList"
                      :key="index"
                      :value="String(item.id)"
                      :label="item.name"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </td>
            </tr>
            <tr class="description-tr">
              <th class="description-label">信息来源</th>
              <td class="description-content">
                <el-form-item prop="sourceFrom">
                  <el-select
                    v-model.trim="form.sourceFrom"
                    clearable
                    filterable

                    placeholder="请选择信息来源"
                  >
                    <el-option label="BOSS" value="BOSS"></el-option>
                    <el-option label="转介绍" value="转介绍"></el-option>
                    <el-option label="其它" value="其它"></el-option>
                  </el-select>
                </el-form-item>
              </td>
              <th class="description-label">人员状态</th>
              <td class="description-content">
                <el-form-item prop="status">
                  <el-select

                    v-model.trim="form.status"
                    clearable
                    filterable
                    placeholder="请选择人员状态"
                  >
                    <el-option label="未录用" value="NOT_EMPLOYED"></el-option>
                    <el-option label="面试中" value="INTERVIEWING"></el-option>
                    <el-option label="储备" value="RESERVE"></el-option>
                    <el-option label="兼职" value="PART_TIME"></el-option>
                    <el-option label="全职" value="FULL_TIME"></el-option>
                    <el-option label="离职" value="DIMISSION"></el-option>
                    <el-option label="黑名单" value="BLACK_LIST"></el-option>
                  </el-select>
                </el-form-item>
              </td>
              <th class="description-label">HRBP</th>
              <td class="description-content">
                <el-form-item prop="hrbp">
                  <el-select

                    v-model.trim="form.hrbp"
                    clearable
                    filterable
                    placeholder="请选择HRBP"
                  >
                    <el-option
                      v-for="(item, index) in roleList"
                      :key="index"
                      :value="String(item.userId)"
                      :label="item.userName"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="description-title" style="margin-top: 20px">
        <span>在职信息</span>
      </div>
      <div class="description-view">
        <table class="description-table">
          <tbody>
            <tr class="description-tr">
              <th class="description-label">入职日期</th>
              <td class="description-content">
                <el-form-item prop="entryDate">
                  <el-date-picker
                    type="date"
                    placeholder="选择入职日期"

                    v-model="form.entryDate"
                  />
                </el-form-item>
              </td>
              <th class="description-label">离职日期</th>
              <td class="description-content">
                <el-form-item prop="resignationDate">
                  <el-date-picker
                    type="date"
                    placeholder="选择离职日期"

                    v-model="form.resignationDate"
                  />
                </el-form-item>
              </td>
              <th class="description-label">离职原因</th>
              <td class="description-content">
                <el-form-item prop="resignationReason">
                  <el-input

                    v-model.trim="form.resignationReason"
                    placeholder="请输入离职原因"
                  />
                </el-form-item>
              </td>
            </tr>
            <tr class="description-tr">
              <th class="description-label">分部</th>
              <td class="description-content">
                <el-form-item prop="organId">
                  <el-select
                    v-model.trim="form.organId"
                    placeholder="请选择分部"
                    clearable
                    filterable

                  >
                    <el-option
                      v-for="(item, index) in organList"
                      :key="index"
                      :value="item.id"
                      :label="item.name"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </td>
              <th class="description-label">职位</th>
              <td class="description-content">
                <el-form-item prop="position">
                  <el-select
                    v-model.trim="form.position"
                    clearable
                    filterable

                    placeholder="请选择职位"
                  >
                    <el-option label="指导老师" value="ADVISER"></el-option>
                    <el-option label="乐团主管" value="ACADEMIC"></el-option>
                    <el-option label="乐队指导" value="TEACHING"></el-option>
                  </el-select>
                </el-form-item>
              </td>
              <th class="description-label">声部</th>
              <td class="description-content">
                <el-form-item prop="jobSubjectIdList">
                  <el-select

                    v-model.trim="form.jobSubjectIdList"
                    clearable
                    filterable
                    multiple
                    collapse-tags
                    placeholder="请选择声部"
                  >
                    <el-option
                      v-for="(item, index) in subjectList"
                      :key="index"
                      :value="String(item.id)"
                      :label="item.name"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </td>
            </tr>
            <tr class="description-tr">
              <th class="description-label">紧急联系人姓名</th>
              <td class="description-content">
                <el-form-item prop="emergencyContactName">
                  <el-input

                    v-model.trim="form.emergencyContactName"
                    placeholder="请输入紧急联系人姓名"
                  />
                </el-form-item>
              </td>
              <th class="description-label">紧急联系人关系</th>
              <td class="description-content">
                <el-form-item
                  prop="emergencyContactRelation"
                  :rules="{
                    required: propRequred,
                    message: '请输入紧急联系人关系',
                    trigger: 'blur',
                  }"
                >
                  <el-input

                    v-model.trim="form.emergencyContactRelation"
                    placeholder="请输入紧急联系人关系"
                  />
                </el-form-item>
              </td>
              <th class="description-label">紧急联系人电话</th>
              <td class="description-content">
                <el-form-item
                  prop="emergencyContactPhone"
                  :rules="[
                    {
                      min: 11,
                      max: 11,
                      message: '请输入正确的手机号码',
                      trigger: 'blur',
                    },
                  ]"
                >
                  <el-input

                    v-model.trim="form.emergencyContactPhone"
                    minlength="11"
                    maxlength="11"
                    placeholder="请输入紧急联系人电话"
                  />
                </el-form-item>
              </td>
            </tr>
            <tr class="description-tr">
              <th class="description-label">开户行</th>
              <td class="description-content">
                <el-form-item prop="bankAddress">
                  <el-input

                    v-model="form.bankAddress"
                    placeholder="请输入开户行"
                  />
                </el-form-item>
              </td>
              <th class="description-label">银行卡号</th>
              <td class="description-content" colspan="3">
                <el-form-item prop="bankCardNo">
                  <el-input

                    v-model="form.bankCardNo"
                    placeholder="请输入银行卡号"
                  />
                </el-form-item>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </el-form>

    <div
      class="tableWrap"
      style="margin-top: 20px"
      v-if="formActionTitle == 'update'"
    >
      <div class="description-title head_title">
        <span>在职信息</span>
        <span
          class="createRecord"
          @click="onCreateRecord"
          v-if="$helpers.permission('employeeInfo/insertVisit')"
          >新增沟通记录 >></span
        >
      </div>
      <el-table
        style="width: 100% !important"
        :data="tableList"
        :header-cell-style="{
          background: '#fafafa',
          color: '#444',
          borderTop: '1px solid #ebeef5',
        }"
      >
        <el-table-column
          align="center"
          prop="createTime"
          label="沟通时间"
        ></el-table-column>
        <el-table-column align="center" prop="operatorName" label="沟通人">
        </el-table-column>
        <el-table-column
          align="center"
          prop="content"
          label="沟通结论"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <!-- <el-tooltip
              class="item"
              effect="dark"
              :content="scope.row.content"
              placement="top"
            > -->
            {{ scope.row.content }}
            <!-- </el-tooltip> -->
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="nextVisitDate"
          label="下次沟通时间"
        >
          <template slot-scope="scope">
            {{ scope.row.nextVisitDate | dayjsFormat }}
          </template>
        </el-table-column>
      </el-table>
    </div>

    <span class="dialog-footer">
      <el-button @click="close('ruleForm')">取 消</el-button>
      <el-button
        type="primary"
        class="main-button"
        @click="onTypeSubmit('ruleForm')"
        >确 定</el-button
      >
    </span>

    <el-dialog
      title="新增沟通记录"
      :visible.sync="recordStatus"
      :close-on-click-modal="false"
      width="500px"
      append-to-body
      v-if="recordStatus"
    >
      <create-record
        v-if="recordStatus"
        :employeeInfoId="detail.id"
        @close="recordStatus = false"
        @getList="getRecordList"
      ></create-record>
    </el-dialog>
  </div>
</template>
<script>
// import Vue from 'vue'
import {
  employeeCreate,
  employeeUpdate,
  employeeQueryDetail,
} from "@/api/appTenant";
import CreateRecord from "./createRecord.vue";
export default {
  name: "hrform",
  props: [
    "detail",
    "subjectList",
    "organList",
    "close",
    "getList",
    "formActionTitle",
    "roleList",
  ],
  components: {
    CreateRecord,
  },
  data() {
    return {
      recordStatus: false,
      realName: "",
      form: {
        age: "",
        bankAddress: "",
        bankCardNo: "",
        birthdate: "",
        educationalBackground: "",
        emergencyContactName: "",
        emergencyContactPhone: "",
        emergencyContactRelation: "",
        entryDate: "",
        gender: "",
        idCard: "",
        intentionCity: "",
        assessmentResult: "",
        status: "",
        isProbationPeriod: "",
        liveCity: "",
        mobileNo: "",
        otherComment: "",
        position: "",
        realName: "",
        resignationDate: "",
        subjectIdList: [],
        jobSubjectIdList: [],
        wechatNo: "",
        organId: "",
        sourceFrom: "",
        educations: [{ level: "", school: "", year: "" }],
      },
      rules: {
        // birthdate: [
        //   { required: true, message: '请输入生日', trigger: 'blur' },
        // ],
        // sourceFrom: [
        //   { required: true, message: '请选择信息来源', trigger: 'change' },
        // ],
        // intentionCity: [
        //   { required: true, message: '请输入工作意向', trigger: 'blur' },
        // ],
        // status: [
        //   { required: true, message: '请选择员工状态', trigger: 'change' },
        // ],
        // liveCity: [
        //   { required: true, message: '请输入所在城市', trigger: 'blur' },
        // ],
        // otherComment: [
        //   { required: true, message: '请输入其他综合情况', trigger: 'blur' },
        // ],
        // position: [
        //   { required: true, message: '请输入职位', trigger: 'blur' },
        // ],
        // realName: [
        //   { required: true, message: '请输入姓名', trigger: 'blur' },
        // ],
        // subjectIdList: [
        //   { required: true, message: '请选择声部', trigger: 'change' },
        // ],
      },
      tableList: [],
    };
  },
  watch: {
    detail() {
      this.updateData();
    },
  },
  async mounted() {
    this.updateData();
    if (this.formActionTitle == "update") {
      this.getRecordList();
    }
  },
  computed: {
    propRequred() {
      return (
        this.form.status === "PART_TIME" ||
        this.form.status === "FULL_TIME" ||
        this.form.status === "DIMISSION"
      );
    },
  },
  methods: {
    updateData() {
      if (this.detail) {
        try {
          this.detail.subjectIdList = this.detail.subjectIdList
            ? this.detail.subjectIdList.split(",")
            : [];
          this.detail.jobSubjectIdList = this.detail.jobSubjectIdList
            ? this.detail.jobSubjectIdList.split(",")
            : [];
        } catch (error) {}
        if (this.detail.organId === 0) {
          this.detail.organId = "";
        }
        if (this.detail.age === 0) {
          this.detail.age = "";
        }
        this.form = Object.assign(
          {
            educations: [{ level: "", school: "", year: "", subject: "" }],
          },
          this.detail
        );
        try {
          this.form.educations = JSON.parse(this.detail.educationalBackground);
          if (this.form.educations.length < 1) {
            this.form.educations = [
              { level: "", school: "", year: "", subject: "" },
            ];
          }
          this.form = { ...this.form };
        } catch (error) {}

        // console.log(this.form);
      } else {
        this.form.educations = [
          { level: "", school: "", year: "", subject: "" },
        ];
        this.form = { ...this.form };
      }
      this.$refs["ruleForm"].resetFields();
    },
    addEducation() {
      this.form.educations = [
        ...this.form.educations,
        { level: "", school: "", year: "", subject: "" },
      ];
      this.form = { ...this.form };
    },
    removeEducation(index) {
      this.form.educations[index] = null;
      this.form.educations = this.form.educations.filter((item) => !!item);
      this.form = { ...this.form };
    },
    onTypeSubmit() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          const { $message } = this;
          this.form.educationalBackground = JSON.stringify(
            this.form.educations
          );
          const { educations, subjectIdList, jobSubjectIdList, ...rest } =
            this.form;
          if (this.detail && this.detail.id) {
            employeeUpdate(
              Object.assign(
                {
                  id: this.detail.id,
                  subjectIdList: (subjectIdList || []).join(","),
                  jobSubjectIdList: (jobSubjectIdList || []).join(","),
                },
                rest
              )
            ).then((res) => {
              if (res.code === 200) {
                $message.success("修改成功");
                this.close("ruleForm");
                // this.getList()
              }
            });
          } else {
            employeeCreate({
              subjectIdList: (subjectIdList || []).join(","),
              ...rest,
            }).then((res) => {
              if (res.code === 200) {
                $message.success("创建成功");
                this.close("ruleForm");
                // this.getList()
              } else if (res.code == 206) {
                this.$confirm(res.msg, "提示", {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "warning",
                }).then((res) => {
                  employeeCreate({
                    subjectIdList: (subjectIdList || []).join(","),
                    ...rest,
                    cover: true,
                  }).then((res) => {
                    if (res.code == 200) {
                      $message.success("提交成功");
                      this.close("ruleForm");
                    }
                  });
                });
              }
            });
          }
        }
      });
    },
    mobileOrWechatValidate() {
      this.$refs["ruleForm"].validateField("mobileNo");
    },
    onCreateRecord() {
      // 新增沟通记录
      this.recordStatus = true;
    },
    getRecordList() {
      employeeQueryDetail({ id: this.detail.id }).then((res) => {
        let result = res.data.employeeVisitList || [];
        this.tableList = result;
      });
    },
  },
};
</script>
<style lang="less" scoped>
.desc-item {
  position: relative;
  .close {
    position: absolute;
    left: 10px;
    cursor: pointer;
  }
}
.main-button {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.dialog-footer {
  display: block;
  text-align: right;
  margin-top: 20px;
}
.description-title {
  margin-bottom: 10px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
}
.description-view {
  width: 100%;
  border: 1px solid #e8e8e8;
}
.description-view .description-table {
  width: 100%;
  /* border: 1px solid #e8e8e8; */
  border-collapse: collapse;
  table-layout: fixed;
}
.description-view .description-tr {
  border-bottom: 1px solid #e8e8e8;
  width: 100%;
}
.description-view .description-tr:last-child {
  border-bottom: none;
}
.description-view .description-label {
  border-right: 1px solid #e8e8e8;
  background-color: #fafafa;
  color: #000;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  /* margin-right: 8px; */
  // padding: 0 16px;
  width: 140px;
  white-space: nowrap;
  display: table-cell;
}
// .description-view .description-label:after {
// content: ""; /** content: ":" */
// margin: 0 8px 0 2px;
// position: relative;
// top: -0.5px;
// }
.description-view .description-content {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-right: 1px solid #e8e8e8;
  font-size: 14px;
  line-height: 1.5;
  // padding: 12px 16px;
  // padding-bottom: 0;
  color: rgba(0, 0, 0, 0.65);
  display: table-cell;
}
.description-tr .description-content:last-child {
  border-right: none;
}
.form {
  /deep/ .el-form-item {
    margin-bottom: 0;
    &.is-error {
      border: 1px solid red;
      .el-input__inner {
        color: red;
      }
      input::-webkit-input-placeholder {
        color: red;
      }
      input::-moz-placeholde {
        color: red;
      }
      input::-ms-input-placeholder {
        color: red;
      }
    }
  }
  /deep/ .el-form-item__error {
    display: none;
  }
  /deep/.el-input__inner {
    border: 0;
  }
}
.requiredStar {
  padding-right: 3px;
  font-style: normal;
  color: red;
}
.head_title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .createRecord {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-primary);
    cursor: pointer;
  }
}
</style>