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

<template>
  <div>
    <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">
                  <el-input size="mini" v-model="form.mobileNo" placeholder="请输入手机号"/>
                </el-form-item>
              </td>
              <th class="description-label">微信号</th>
              <td class="description-content">
                <el-form-item prop="wechatNo">
                  <el-input size="mini" v-model="form.wechatNo" placeholder="请输入微信号"/>
                </el-form-item>
              </td>
            </tr>
            <tr class="description-tr" v-for="(item, index) in 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="level">
                  <el-input v-model="educations[index].level" size="mini" placeholder="请输入学历"/>
                </el-form-item>
              </td>
              <th class="description-label">学校</th>
              <td class="description-content">
                <el-form-item prop="school">
                  <el-input size="mini" v-model="educations[index].school" placeholder="请输入学校"/>
                </el-form-item>
              </td>
              <th class="description-label">毕业时间</th>
              <td class="description-content">
                <el-form-item prop="year">
                  <el-date-picker
                    type="month"
                    placeholder="请选择毕业时间"
                    size="mini"
                    v-model="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="subjectId">
                  <el-select
                    v-model.trim="form.subjectId"
                    clearable
                    filterable
                    size="mini"
                    placeholder='请选择声部'
                  >
                    <el-option-group v-for="group in subjectList"
                                      :key="group.label"
                                      :label="group.label">
                      <el-option v-for="item in group.options"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value">
                      </el-option>
                    </el-option-group>
                  </el-select>
                </el-form-item>
              </td>
            </tr>
            <tr class="description-tr">
              <th class="description-label">是否经过评估</th>
              <td class="description-content">
                <el-form-item prop="isInterviewed">
                  <el-select size="mini" v-model.trim="form.isInterviewed"
                              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="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">
                  <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">
                  <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">
                  <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="jobNature">
                  <el-select size="mini" v-model.trim="form.jobNature"
                              clearable
                              filterable
                              placeholder="请选择员工类型">
                    <el-option label="全职"
                                value="FULL_TIME"></el-option>
                    <el-option label="兼职"
                                value="PART_TIME"></el-option>
                    <el-option label="临时"
                                value="TEMPORARY"></el-option>
                  </el-select>
                </el-form-item>
              </td>
              <th class="description-label">员工状态</th>
              <td class="description-content">
                <el-form-item prop="isProbationPeriod">
                  <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">
                <el-form-item prop="resignationDate">
                  <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" colspan="5">
                <el-form-item prop="idCard">
                  <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">
                  <el-input v-model="form.age" size="mini" placeholder="请输入年龄"/>
                </el-form-item>
              </td>
              <th class="description-label">性别</th>
              <td class="description-content" colspan="3">
                <el-form-item prop="gender">
                  <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>
            </tr>
            <tr class="description-tr">
              <th class="description-label">开户行</th>
              <td class="description-content">
                <el-form-item prop="bankAddress">
                  <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">
                  <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">
                  <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">
                  <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">
                  <el-input size="mini" v-model.trim="form.emergencyContactPhone" 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'],
  components: {
    descriptions: Descriptions
  },
  data() {
    return {
      realName: '',
      form: {
        age: '',
        bankAddress: '',
        bankCardNo: '',
        birthdate: '',
        educationalBackground: '',
        emergencyContactName: '',
        emergencyContactPhone: '',
        emergencyContactRelation: '',
        entryDate: '',
        gender: true,
        idCard: '',
        intentionCity: '',
        isInterviewed: true,
        isProbationPeriod: true,
        jobNature: '',
        liveCity: '',
        mobileNo: '',
        otherComment: '',
        position: '',
        realName: '',
        resignationDate: '',
        subjectId: '',
        wechatNo: '',
        organId: '',
      },
      rules: {
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' },
        ],
        bankAddress: [
          { required: true, message: '请输入开户行', trigger: 'blur' },
        ],
        bankCardNo: [
          { required: true, message: '请输入卡号', trigger: 'blur' },
        ],
        birthdate: [
          { required: true, message: '请输入生日', trigger: 'blur' },
        ],
        // bankAddress: [
        //   { required: true, message: '请输入年龄', trigger: 'blur' },
        // ],
        emergencyContactName: [
          { required: true, message: '请输入紧急联系人姓名', trigger: 'blur' },
        ],
        emergencyContactPhone: [
          { required: true, message: '请输入紧急联系人电话', trigger: 'blur' },
        ],
        emergencyContactRelation: [
          { required: true, message: '请输入紧急联系人关系', trigger: 'blur' },
        ],
        entryDate: [
          { required: true, message: '请输入入职日期', trigger: 'blur' },
        ],
        gender: [
          { required: true, message: '请选择性别', trigger: 'blur' },
        ],
        idCard: [
          { required: true, message: '请输入证件号码', trigger: 'blur' },
        ],
        intentionCity: [
          { required: true, message: '请输入工作意向', trigger: 'blur' },
        ],
        isInterviewed: [
          { required: true, message: '请选择是否经过评估', trigger: 'blur' },
        ],
        isProbationPeriod: [
          { required: true, message: '请选择员工状态', trigger: 'blur' },
        ],
        jobNature: [
          { required: true, message: '请选择员工类型', trigger: 'blur' },
        ],
        liveCity: [
          { required: true, message: '请输入所在城市', trigger: 'blur' },
        ],
        mobileNo: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
        ],
        otherComment: [
          { required: true, message: '请输入其他综合情况', trigger: 'blur' },
        ],
        position: [
          { required: true, message: '请输入职位', trigger: 'blur' },
        ],
        realName: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
        ],
        resignationDate: [
          { required: true, message: '请选择离职日期', trigger: 'blur' },
        ],
        subjectId: [
          { required: true, message: '请选择声部', trigger: 'blur' },
        ],
        organId: [
          { required: true, message: '请选择分部', trigger: 'blur' },
        ],
        wechatNo: [
          { required: true, message: '请输入微信号', trigger: 'blur' },
        ],
        level: [
          { required: true, message: '请输入学历', trigger: 'blur' },
        ],
        school: [
          { required: true, message: '请输入学校', trigger: 'blur' },
        ],
        year: [
          { required: true, message: '请选择毕业时间', trigger: 'blur' },
        ],
      },
      educations: [{level: '', school: '', year: ''}]
    }
  },
  watch: {
    detail() {
     this.updateData()
    },
  },
  mounted() {
    this.updateData()
  },
  methods: {
    updateData() {
      if (this.detail) {
        this.form = Object.assign({}, this.detail)
        try {
          this.educations = JSON.parse(this.detail.educationalBackground)
          if (!this.educations.length) {
            this.educations = [{level: '', school: '', year: ''}]
          }
        } catch (error) {}
      } else {
        this.educations = [{level: '', school: '', year: ''}]
      }
    },
    addEducation() {
      this.educations = [...this.educations, {level: '', school: '', year: ''}]
    },
    removeEducation(index) {
      this.educations[index] = null
      this.educations = this.educations.filter(item => !!item)
    },
    onTypeSubmit() {
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          const { $message } = this
          this.form.educationalBackground = JSON.stringify(this.educations)
          if (this.detail) {
            employeeUpdate(Object.assign({id: this.detail.id}, this.form))
            .then(res => {
              if (res.code === 200) {
                $message.success('修改成功')
                this.close('ruleForm')
              }
            })
          } else {
            employeeCreate(this.form)
            .then(res => {
              if (res.code === 200) {
                $message.success('创建成功')
                this.close('ruleForm')
              }
            })
          }
        }
      })
    }
  }
}
</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;
  }
</style>