cd-work-flow-web/src/views/oa/modules/EnrollmentModal.vue

<template>
  <a-modal
    :title="title"
    :width="1600"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel">
    <a-spin :spinning="confirmLoading">
      <!-- 主表单区域 -->
      <a-form :form="form">
        <a-row>

          <a-col :span="8  ">
            <a-form-item label="登记人	" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-popup
                v-decorator="['operator', validatorRules.operator]"
                :trigger-change="true"
                org-fields="realname,depart_name"
                dest-fields="operator,operatorDept"
                code="user_dept"
                @callback="popupCallback"/>
            </a-form-item>
          </a-col>
          <a-col :span="8  ">
            <a-form-item label="登记部门" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="[ 'operatorDept', validatorRules.operatorDept]" placeholder="请输入登记部门" disabled></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="8  ">
            <a-form-item label="登记日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-date placeholder="请选择登记日期" v-decorator="[ 'operateDate', validatorRules.operateDate]" :trigger-change="true" style="width: 100%"/>
            </a-form-item>
          </a-col>
          <a-col :span="8  ">
            <a-form-item label="姓名" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="[ 'realname', validatorRules.realname]" placeholder="请输入姓名"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="8  ">
            <a-form-item label="用户账号" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="[ 'username', validatorRules.username]" placeholder="请输入用户账号" disabled></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="8  ">
            <a-form-item label="性别" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-select v-decorator="['gender', validatorRules.gender]" placeholder="请选择性别">
                <a-select-option :value="1">男</a-select-option>
                <a-select-option :value="2">女</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8  ">
            <a-form-item label="证件类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-select v-decorator="['idType', validatorRules.idType]" placeholder="请选择证件类型">
                <a-select-option value="身份证">身份证</a-select-option>
                <a-select-option value="其他">其他</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8  ">
            <a-form-item label="证件号码" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="[ 'idNo', validatorRules.idNo]" placeholder="请输入证件号码"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="8  ">
            <a-form-item label="生日" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-date placeholder="请选择生日" v-decorator="[ 'birthday', validatorRules.birthday]" :trigger-change="true" style="width: 100%"/>
            </a-form-item>
          </a-col>
          <a-col :span="8  ">
            <a-form-item label="入职日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-date placeholder="请选择入职日期" v-decorator="[ 'joinDate', validatorRules.joinDate]" :trigger-change="true" style="width: 100%"/>
            </a-form-item>
          </a-col>
          <a-col :span="8  ">
            <a-form-item label="职务" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-select-position placeholder="请选择职务" :multiple="false" v-decorator="['post', validatorRules.post]" />
            </a-form-item>
          </a-col>
          <a-col :span="8  ">
            <a-form-item label="职级" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="[ 'postLevel', validatorRules.postLevel]" placeholder="请输入职级"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="8  ">
            <a-form-item label="学历" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-select v-decorator="['education', validatorRules.education]" placeholder="请选择学历">
                <a-select-option value="大专">大专</a-select-option>
                <a-select-option value="本科">本科</a-select-option>
                <a-select-option value="硕士">硕士</a-select-option>
                <a-select-option value="博士">博士</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8  ">
            <a-form-item label="岗位类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-select v-decorator="['positionType', validatorRules.positionType]" placeholder="请选择岗位类型">
                <a-select-option value="管理类">管理类</a-select-option>
                <a-select-option value="专技类">专技类</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8  ">
            <a-form-item label="部门" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-select-depart v-decorator="['departIds', validatorRules.departIds]" :trigger-change="true"/>
            </a-form-item>
          </a-col>
          <a-col :span="8  ">
            <a-form-item label="手机号码" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="[ 'mobile', validatorRules.mobile]" placeholder="请输入手机号码"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="8  ">
            <a-form-item label="座机" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="[ 'phone', validatorRules.phone]" placeholder="请输入座机"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="8  ">
            <a-form-item label="联系地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="[ 'address', validatorRules.address]" placeholder="请输入联系地址"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="8  ">
            <a-form-item label="试用结束日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-date placeholder="请选择试用结束日期" v-decorator="[ 'probationEnd', validatorRules.probationEnd]" :trigger-change="true" style="width: 100%"/>
            </a-form-item>
          </a-col>
          <a-col :span="8  ">
            <a-form-item label="合同起始日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-date placeholder="请选择合同起始日期" v-decorator="[ 'contractStart', validatorRules.contractStart]" :trigger-change="true" style="width: 100%"/>
            </a-form-item>
          </a-col>
          <a-col :span="8  ">
            <a-form-item label="合同结束日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-date placeholder="请选择合同结束日期" v-decorator="[ 'contractEnd', validatorRules.contractEnd]" :trigger-change="true" style="width: 100%"/>
            </a-form-item>
          </a-col>
          <a-col :span="8  ">
            <a-form-item label="身份" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-radio-group  v-decorator="[ 'identity', validatorRules.identity]">
                <a-radio :value="1">普通用户</a-radio>
                <a-radio :value="2">上级</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :span="8  ">
            <a-form-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="[ 'remark', validatorRules.remark]" placeholder="请输入备注"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="8  ">
            <a-form-item label="签字图片" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-upload v-decorator="['signature', validatorRules.signature]" :trigger-change="true"></j-upload>
            </a-form-item>
          </a-col>
          <a-col :span="8  ">
            <a-form-item label="附件" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-upload v-decorator="['attachment', validatorRules.attachment]" :trigger-change="true"></j-upload>
            </a-form-item>
          </a-col>

        </a-row>
      </a-form>

      <!-- 子表单区域 -->
      <a-tabs v-model="activeKey" @change="handleChangeTabs">
        
        <a-tab-pane tab="联系人" :key="refKeys[0]" :forceRender="true">
          <j-editable-table
            :ref="refKeys[0]"
            :loading="enrollmentContactTable.loading"
            :columns="enrollmentContactTable.columns"
            :dataSource="enrollmentContactTable.dataSource"
            :maxHeight="300"
            :rowNumber="true"
            :rowSelection="true"
            :actionButton="true"/>
        </a-tab-pane>

        <a-tab-pane tab="工作经历" :key="refKeys[1]" :forceRender="true">
          <j-editable-table
            :ref="refKeys[1]"
            :loading="enrollmentJobTable.loading"
            :columns="enrollmentJobTable.columns"
            :dataSource="enrollmentJobTable.dataSource"
            :maxHeight="300"
            :rowNumber="true"
            :rowSelection="true"
            :actionButton="true"/>
        </a-tab-pane>
        
        <a-tab-pane tab="学习经历" :key="refKeys[2]" :forceRender="true">
          <j-editable-table
            :ref="refKeys[2]"
            :loading="enrollmentEduTable.loading"
            :columns="enrollmentEduTable.columns"
            :dataSource="enrollmentEduTable.dataSource"
            :maxHeight="300"
            :rowNumber="true"
            :rowSelection="true"
            :actionButton="true"/>
        </a-tab-pane>
        
      </a-tabs>

    </a-spin>
  </a-modal>
</template>

<script>

  import pick from 'lodash.pick'
  import { FormTypes,getRefPromise } from '@/utils/JEditableTableUtil'
  import { JEditableTableMixin } from '@/mixins/JEditableTableMixin'
  import { validateDuplicateValue } from '@/utils/util'
  import JDate from '@/components/jeecg/JDate'  
  import JUpload from '@/components/jeecg/JUpload'
  import JSelectDepart from '@/components/jeecgbiz/JSelectDepart'
  import JDictSelectTag from "@/components/dict/JDictSelectTag"
  import JSelectPosition from '@/components/jeecgbiz/JSelectPosition'

  export default {
    name: 'EnrollmentModal',
    mixins: [JEditableTableMixin],
    components: {
      JDate,
      JUpload,
      JSelectDepart,
      JDictSelectTag,
      JSelectPosition
    },
    data() {
      return {
        labelCol: {
          span: 6
        },
        wrapperCol: {
          span: 16
        },
        labelCol2: {
          span: 3
        },
        wrapperCol2: {
          span: 20
        },
        // 新增时子表默认添加几行空数据
        addDefaultRowNum: 1,
        validatorRules: {
          operator: {rules: [
            {required: true, message: '请输入登记人	!'},
          ]},
          operatorDept: {rules: [
          ]},
          operateDate: {rules: [
            {required: true, message: '请输入登记日期!'},
          ]},
          realname: {rules: [
          ]},
          username: {rules: [
          ]},
          gender: {rules: [
            {required: true, message: '请输入性别!'},
          ]},
          idType: {rules: [
            {required: true, message: '请输入证件类型!'},
          ]},
          idNo: {rules: [
            {required: true, message: '请输入证件号码!'},
          ]},
          birthday: {rules: [
            {required: true, message: '请输入生日!'},
          ]},
          joinDate: {rules: [
            {required: true, message: '请输入入职日期!'},
          ]},
          post: {rules: [
            {required: true, message: '请输入职务!'},
          ]},
          postLevel: {rules: [
            {required: true, message: '请输入职级!'},
          ]},
          education: {rules: [
            {required: true, message: '请选择学历!'},
          ]},
          positionType: {rules: [
            {required: true, message: '请输入岗位类型!'},
          ]},
          departIds: {rules: [
            {required: true, message: '请输入部门!'},
          ]},
          mobile: {rules: [
          ]},
          phone: {rules: [
          ]},
          address: {rules: [
          ]},
          probationEnd: {rules: [
            {required: true, message: '请输入试用结束日期!'},
          ]},
          contractStart: {rules: [
            {required: true, message: '请输入合同起始日期!'},
          ]},
          contractEnd: {rules: [
            {required: true, message: '请输入合同结束日期!'},
          ]},
          remark: {rules: [
          ]},
          identity: {rules: [
          ]},
          signature: {rules: [
          ]},
          attachment: {rules: [
          ]},
        },
        refKeys: ['enrollmentContact', 'enrollmentJob', 'enrollmentEdu', ],
        tableKeys:['enrollmentContact', 'enrollmentJob', 'enrollmentEdu', ],
        activeKey: 'enrollmentContact',
        // 工作经历
        enrollmentJobTable: {
          loading: false,
          dataSource: [],
          columns: [
            {
              title: '单位',
              key: 'company',
              type: FormTypes.input,
              width:"200px",
              placeholder: '请输入${title}',
              defaultValue: '',
            },
            {
              title: '职位',
              key: 'position',
              type: FormTypes.input,
              width:"200px",
              placeholder: '请输入${title}',
              defaultValue: '',
            },
            {
              title: '起始日期',
              key: 'startDate',
              type: FormTypes.date,
              width:"200px",
              placeholder: '请输入${title}',
              defaultValue: '',
            },
            {
              title: '截止日期',
              key: 'endDate',
              type: FormTypes.date,
              width:"200px",
              placeholder: '请输入${title}',
              defaultValue: '',
            },
          ]
        },
        // 联系人
        enrollmentContactTable: {
          loading: false,
          dataSource: [],
          columns: [
            {
              title: '姓名',
              key: 'name',
              type: FormTypes.input,
              width:"200px",
              placeholder: '请输入${title}',
              defaultValue: '',
            },
            {
              title: '关系',
              key: 'relation',
              type: FormTypes.input,
              width:"200px",
              placeholder: '请输入${title}',
              defaultValue: '',
            },
            {
              title: '性别',
              key: 'sex',
              width:"200px",
              placeholder: '请输入${title}',
              defaultValue: '',
              type: FormTypes.select,
              options: [ // 下拉选项  
                { title: '男', value: '1' },
                { title: '女', value: '2' },
              ],
            },
            {
              title: '联系方式',
              key: 'phone',
              type: FormTypes.input,
              width:"200px",
              placeholder: '请输入${title}',
              defaultValue: '',
            },
            {
              title: '职业',
              key: 'career',
              type: FormTypes.input,
              width:"200px",
              placeholder: '请输入${title}',
              defaultValue: '',
            },
          ]
        },
        // 学习经历
        enrollmentEduTable: {
          loading: false,
          dataSource: [],
          columns: [
            {
              title: '学校',
              key: 'school',
              type: FormTypes.input,
              width:"200px",
              placeholder: '请输入${title}',
              defaultValue: '',
            },
            {
              title: '起始日期',
              key: 'startDate',
              type: FormTypes.date,
              width:"200px",
              placeholder: '请输入${title}',
              defaultValue: '',
            },
            {
              title: '截止日期',
              key: 'endDate',
              type: FormTypes.date,
              width:"200px",
              placeholder: '请输入${title}',
              defaultValue: '',
            },
          ]
        },
        url: {
          add: "/oa/enrollment/add",
          edit: "/oa/enrollment/edit",
          enrollmentJob: {
            list: '/oa/enrollment/queryEnrollmentJobByMainId'
          },
          enrollmentContact: {
            list: '/oa/enrollment/queryEnrollmentContactByMainId'
          },
          enrollmentEdu: {
            list: '/oa/enrollment/queryEnrollmentEduByMainId'
          },
        }
      }
    },
    methods: {
      getAllTable() {
        let values = this.tableKeys.map(key => getRefPromise(this, key))
        return Promise.all(values)
      },
      /** 调用完edit()方法之后会自动调用此方法 */
      editAfter() {
        let fieldval = pick(this.model,'operator','operatorDept','operateDate','realname','username','gender','idType','idNo','birthday','joinDate','post','postLevel','education','positionType','departIds','mobile','phone','address','probationEnd','contractStart','contractEnd','remark','identity','signature','attachment')
        this.$nextTick(() => {
          this.form.setFieldsValue(fieldval)
        })
        // 加载子表数据
        if (this.model.id) {
          let params = { id: this.model.id }
          this.requestSubTableData(this.url.enrollmentJob.list, params, this.enrollmentJobTable)
          this.requestSubTableData(this.url.enrollmentContact.list, params, this.enrollmentContactTable)
          this.requestSubTableData(this.url.enrollmentEdu.list, params, this.enrollmentEduTable)
        }
      },
      /** 整理成formData */
      classifyIntoFormData(allValues) {
        debugger
        let main = Object.assign(this.model, allValues.formValue)

        return {
          ...main, // 展开
          enrollmentContactList: allValues.tablesValue[0].values,
          enrollmentJobList: allValues.tablesValue[1].values,
          enrollmentEduList: allValues.tablesValue[2].values,
        }
      },
      validateError(msg){
        this.$message.error(msg)
      },
     popupCallback(row){
       this.form.setFieldsValue(pick(row,'operator','operatorDept','operateDate','realname','username','gender','idType','idNo','birthday','joinDate','post','postLevel','education','positionType','departIds','mobile','phone','address','probationEnd','contractStart','contractEnd','remark','identity','signature','attachment'))
     },

    }
  }
</script>

<style scoped>
</style>