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">姓名</th>
              <td class="description-content">
                <el-form-item prop="realName">
                  <el-input v-model="form.realName" size="mini" placeholder="请输入姓名"/>
                </el-form-item>
              </td>
              <th class="description-label">手机号</th>
              <td class="description-content">
                <el-form-item
                  prop="mobileNo"
                  :rules="[
                    { required: !(form.wechatNo), message: '请输入手机号', trigger: 'blur' },
                    { min: 11, max: 11, message: '请输入正确的手机号码', trigger: 'blur' }
                  ]"
                >
                  <el-input
                    size="mini"
                    minlength="11"
                    maxlength="11"
                    v-model="form.mobileNo"
                    @blur="mobileOrWechatValidate"
                    placeholder="请输入手机号"
                  />
                </el-form-item>
              </td>
              <th class="description-label">微信号</th>
              <td class="description-content">
                <el-form-item
                  prop="wechatNo"
                  :rules="[
                    { required: !(form.mobileNo), message: '请输入微信号', trigger: 'blur' },
                  ]"
                >
                  <el-input
                    size="mini"
                    v-model="form.wechatNo"
                    @blur="mobileOrWechatValidate"
                    placeholder="请输入微信号"
                  />
                </el-form-item>
              </td>
            </tr>
            <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'"
                  :rules="{ required: true, message: '请输入学历', trigger: 'blur' }"
                >
                  <el-input v-model="form.educations[index].level" size="mini" placeholder="请输入学历"/>
                </el-form-item>
              </td>
              <th class="description-label">学校</th>
              <td class="description-content">
                <el-form-item
                  :prop="'educations.' + index + '.school'"
                  :rules="{ required: true, message: '请选择毕业时间', trigger: 'blur' }"
                >
                  <el-input size="mini" 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 + '.year'"
                  :rules="{ required: true, message: '请选择毕业时间', trigger: 'blur' }"
                >
                  <el-date-picker
                    type="month"
                    placeholder="请选择毕业时间"
                    size="mini"
                    v-model="form.educations[index].year"
                  />
                </el-form-item>
              </td>
            </tr>
            <tr class="description-tr">
              <th class="description-label">所在城市</th>
              <td class="description-content">
                <el-form-item prop="liveCity">
                  <el-input size="mini" 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 size="mini" v-model.trim="form.intentionCity" placeholder="请输入工作意向"/>
                </el-form-item>
              </td>
              <th class="description-label">声部</th>
              <td class="description-content">
                <el-form-item prop="subjectIdList">
                  <el-select
                    v-model.trim="form.subjectIdList"
                    clearable
                    filterable
                    multiple
                    size="mini"
                    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
                              size="mini"
                              placeholder="请选择信息来源">
                    <el-option label="BOSS"
                                value="BOSS"></el-option>
                    <el-option label="转介绍"
                                value="转介绍"></el-option>
                  </el-select>
                </el-form-item>
              </td>
              <th class="description-label">评估结果</th>
              <td class="description-content" colspan="3">
                <el-form-item prop="assessmentResult">
                  <el-input size="mini" v-model.trim="form.assessmentResult" placeholder="请输入评估结果"/>
                </el-form-item>
              </td>
            </tr>
            <tr class="description-tr">
              <th class="description-label">人员状态</th>
              <td class="description-content">
                <el-form-item prop="status">
                  <el-select size="mini" 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-select>
                </el-form-item>
              </td>
              <th class="description-label">其他综合情况</th>
              <td class="description-content" colspan="3">
                <el-form-item prop="otherComment">
                  <el-input size="mini" v-model.trim="form.otherComment" 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">
              <th class="description-label">入职日期</th>
              <td class="description-content">
                <el-form-item
                  prop="entryDate"
                  :rules="{ required: propRequred, message: '请输入入职日期', trigger: 'change' }"
                >
                  <el-date-picker
                    type="date"
                    placeholder="选择入职日期"
                    size="mini"
                    v-model="form.entryDate"
                  />
                </el-form-item>
              </td>
              <th class="description-label">职位</th>
              <td class="description-content">
                <el-form-item
                  prop="position"
                  :rules="{ required: propRequred, message: '请输入职位', trigger: 'change' }"
                >
                  <el-select v-model.trim="form.position"
                            clearable
                            filterable
                            size="mini"
                            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="organId"
                  :rules="{ required: propRequred, message: '请选择分部', trigger: 'change' }"
                >
                  <el-select v-model.trim="form.organId"
                      placeholder='请选择分部'
                      clearable
                      filterable
                      size="mini"
                    >
                      <el-option v-for='(item,index) in organList'
                        :key="index"
                        :value="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="isProbationPeriod"
                  :rules="{ required: propRequred, message: '请选择是否试用期', trigger: 'change' }"
                >
                  <el-select size="mini" v-model.trim="form.isProbationPeriod"
                              clearable
                              filterable
                              placeholder="请选择是否试用期">
                    <el-option label="是"
                                :value="true"></el-option>
                    <el-option label="否"
                                :value="false"></el-option>
                  </el-select>
                </el-form-item>
              </td>
              <th class="description-label">证件号码</th>
              <td class="description-content" colspan="3">
                <el-form-item
                  prop="idCard"
                  :rules="{ required: propRequred, message: '请输入证件号码', trigger: 'blur' }"
                >
                  <el-input size="mini" v-model="form.idCard" placeholder="请输入证件号码"/>
                </el-form-item>
              </td>
            </tr>
            <tr class="description-tr">
              <th class="description-label">年龄</th>
              <td class="description-content">
                <el-form-item
                  prop="age"
                  :rules="[
                    { required: propRequred, message: '请输入年龄', trigger: 'blur' }
                  ]"
                >
                  <el-input v-model="form.age" size="mini" 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"
                  :rules="{ required: propRequred, message: '请选择性别', trigger: 'change' }"
                >
                  <el-select size="mini" 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>
              <th class="description-label">离职日期</th>
              <td class="description-content">
                <el-form-item
                  prop="resignationDate"
                  :rules="{ required: form.status === 'DIMISSION', message: '请选择离职日期', trigger: 'change' }"
                >
                  <el-date-picker
                    type="date"
                    placeholder="选择离职日期"
                    size="mini"
                    v-model="form.resignationDate"
                  />
                </el-form-item>
              </td>
            </tr>
            <tr class="description-tr">
              <th class="description-label">开户行</th>
              <td class="description-content">
                <el-form-item
                  prop="bankAddress"
                  :rules="{ required: propRequred, message: '请输入开户行', trigger: 'blur' }"
                >
                  <el-input size="mini" 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"
                  :rules="{ required: propRequred, message: '请输入银行卡号', trigger: 'blur' }"
                >
                  <el-input size="mini" v-model="form.bankCardNo" placeholder="请输入银行卡号"/>
                </el-form-item>
              </td>
            </tr>
            <tr class="description-tr">
              <th class="description-label">紧急联系人姓名</th>
              <td class="description-content">
                <el-form-item
                  prop="emergencyContactName"
                  :rules="{ required: propRequred, message: '请输入紧急联系人姓名', trigger: 'blur' }"
                >
                  <el-input size="mini" 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 size="mini" 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="[
                    { required: propRequred, message: '请输入紧急联系人电话', trigger: 'blur' },
                    { min: 11, max: 11, message: '请输入正确的手机号码', trigger: 'blur' }
                  ]"
                >
                  <el-input size="mini" v-model.trim="form.emergencyContactPhone" minlength="11" maxlength="11" placeholder="请输入紧急联系人电话"/>
                </el-form-item>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </el-form>
    <span class="dialog-footer">
      <el-button @click="close('ruleForm')">取 消</el-button>
      <el-button type="primary" class="main-button" @click="onTypeSubmit('ruleForm')">确 定</el-button>
    </span>
  </div>
</template>
<script>
// import Vue from 'vue'
import { employeeCreate, employeeUpdate } from '@/api/appTenant'
import Descriptions from '@/components/Descriptions'

// Vue.use(Descriptions)
export default {
  name: 'hrform',
  props: ['detail', 'subjectList', 'organList', 'close', 'getList'],
  components: {
    descriptions: Descriptions
  },
  data() {
    return {
      realName: '',
      form: {
        age: '',
        bankAddress: '',
        bankCardNo: '',
        birthdate: '',
        educationalBackground: '',
        emergencyContactName: '',
        emergencyContactPhone: '',
        emergencyContactRelation: '',
        entryDate: '',
        gender: '',
        idCard: '',
        intentionCity: '',
        assessmentResult: '',
        status: '',
        isProbationPeriod: '',
        liveCity: '',
        mobileNo: '',
        otherComment: '',
        position: '',
        realName: '',
        resignationDate: '',
        subjectIdList: [],
        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' },
        ],
      }
    }
  },
  watch: {
    detail() {
     this.updateData()
    },
  },
  mounted() {
    this.updateData()
  },
  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.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: ''}]
        }, this.detail)
        try {
          this.form.educations = JSON.parse(this.detail.educationalBackground)
          if (this.form.educations.length < 1) {
            this.form.educations = [{level: '', school: '', year: ''}]
          }
          this.form = {...this.form}
        } catch (error) {}
      } else {
        this.form.educations = [{level: '', school: '', year: ''}]
        this.form = {...this.form}
      }
      this.$refs['ruleForm'].resetFields()
    },
    addEducation() {
      this.form.educations = [...this.form.educations, {level: '', school: '', year: ''}]
      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, ...rest} = this.form
          if (this.detail && this.detail.id) {
            employeeUpdate(Object.assign({id: this.detail.id, subjectIdList: (subjectIdList || []).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()
              }
            })
          }
        }
      })
    },
    mobileOrWechatValidate() {
      this.$refs['ruleForm'].validateField('wechatNo')
      this.$refs['ruleForm'].validateField('mobileNo')
    }
  }
}
</script>
<style lang="less" scoped>
  .desc-item{
    position: relative;
    .close{
      position: absolute;
      left: 10px;
      cursor: pointer;
    }
  }
  .main-button{
    background-color: #14928a;
    border-color: #14928a;
  }
  .dialog-footer{
    display: block;
    text-align: right;
    margin-top: 20px;
  }
  .description-title {
    margin-bottom: 20px;
    color: rgba(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: rgba(0, 0, 0, 0.85);
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    /* margin-right: 8px; */
    padding: 12px 16px;
    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: 12px;
    }
    /deep/ .el-form-item__error{
      display: none;
    }
  }
</style>