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">
    <template slot="footer">
      <a-button @click="handleCancel">取消</a-button>
      <a-button @click="print()" :href="printMouldUrl"  target="_blank" type="primary" style="margin-right: 1%;margin-left: 1%;">打印</a-button>
      <a-button @click="handleOk" type="primary" v-if="!show">保存</a-button>
    </template>
    <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%" :disabled="show"/>
            </a-form-item>
          </a-col>
        </a-row>
      <a-row>
          <a-col :span="8  ">
            <a-form-item label="姓名" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="[ 'realname', validatorRules.realname]" placeholder="请输入姓名" :disabled="show"></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="请选择性别" :disabled="show" :getPopupContainer="trigger => trigger.parentNode || document.body">
                <a-select-option :value="1">男</a-select-option>
                <a-select-option :value="2">女</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      <a-row>
          <a-col :span="8  ">
            <a-form-item label="证件类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-select v-decorator="['idType', validatorRules.idType]" placeholder="请选择证件类型" :disabled="show" :getPopupContainer="trigger => trigger.parentNode || document.body"> 
                <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="请输入证件号码" :disabled="show"></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%" :disabled="show"/>
            </a-form-item>
          </a-col>
        </a-row>
      <a-row>
          <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%" :disabled="show"/>
            </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]" :disabled="show"/>
            </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="请输入职级" :disabled="show"></a-input>
            </a-form-item>
          </a-col>
        </a-row>
      <a-row>
          <a-col :span="8  ">
            <a-form-item label="学历" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-select v-decorator="['education', validatorRules.education]" placeholder="请选择学历" :disabled="show" :getPopupContainer="trigger => trigger.parentNode || document.body">
                <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="请选择岗位类型" :disabled="show" :getPopupContainer="trigger => trigger.parentNode || document.body">
                <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" :disabled="show"/>
            </a-form-item>
          </a-col>
        </a-row>
      <a-row>
          <a-col :span="8  ">
            <a-form-item label="手机号码" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="[ 'mobile', validatorRules.mobile]" placeholder="请输入手机号码" :disabled="show"></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="请输入座机" :disabled="show"></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="请输入联系地址" :disabled="show"></a-input>
            </a-form-item>
          </a-col>
        </a-row>
      <a-row>
          <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%" :disabled="show"/>
            </a-form-item>
          </a-col>
          <a-col :span="8  ">
            <a-form-item label="合同起始日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-date placeholder="请选择合同起始日期"  @change="changeStartTime" v-decorator="[ 'contractStart', validatorRules.contractStart]" :trigger-change="true" style="width: 100%" :disabled="show"/>
            </a-form-item>
          </a-col>
          <a-col :span="8  ">
            <a-form-item label="合同结束日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-date placeholder="请选择合同结束日期" @change="changeEndTime" v-decorator="[ 'contractEnd', validatorRules.contractEnd]" :trigger-change="true" style="width: 100%" :disabled="show"/>
            </a-form-item>
          </a-col>
        </a-row>
      <a-row>
          <a-col :span="8  ">
            <a-form-item label="身份" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-radio-group  v-decorator="[ 'identity', validatorRules.identity]" :disabled="show">
                <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="请输入备注" :disabled="show"></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]" fileType="image" :trigger-change="true" :disabled="show"></j-upload>
            </a-form-item>
          </a-col>
        </a-row>
      <a-row>
          <a-col :span="8  ">
            <a-form-item label="附件" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-upload v-decorator="['attachment', validatorRules.attachment]" fileType="file" :trigger-change="true" :disabled="show"></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="!show"/>
        </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="!show"/>
        </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="!show"/>
        </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 {
        show:false,
        labelCol: {
          span: 6
        },
        wrapperCol: {
          span: 16
        },
        labelCol2: {
          span: 3
        },
        wrapperCol2: {
          span: 20
        },
        // 新增时子表默认添加几行空数据
        addDefaultRowNum: 1,
        printMouldUrl:'',
        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: '请输入证件号码!'},{validator: this.validateIdCard}
          ]},
          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: [{ validator: this.validatePhone }
          ]},
          phone: {rules: [
            { pattern: /^0\d{2,3}-[1-9]\d{6,7}$/, message: '请输入正确的座机号码' }
          ]},
          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: '',
            },
          ]
        },
        id:'',
        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)
      },
      validateIdCard(rule, value, callback) {
        if (!value || new RegExp(/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/).test(value)) {
          callback();
        } else {
          callback("您的身份证号码格式不正确!");
        }
      },
      validatePhone (rule, value, callback) {
            if (!value) {
                callback()
            } else {
                // update-begin--Author:kangxiaolin  Date:20190826 for：[05] 手机号不支持199号码段--------------------
                if (new RegExp(/^1[3|4|5|7|8|9][0-9]\d{8}$/).test(value)) {
                  callback()
                    // update-end--Author:kangxiaolin  Date:20190826 for：[05] 手机号不支持199号码段--------------------

                    // var params = {
                    //     tableName: 'sys_user',
                    //     fieldName: 'phone',
                    //     fieldVal: value,
                    //     dataId: this.userId
                    // }
                    // duplicateCheck(params).then(res => {
                    //     if (res.success) {
                    //         callback()
                    //     } else {
                    //         callback('手机号已存在!')
                    //     }
                    // })
                } else {
                    callback('请输入正确格式的手机号码!')
                }
            }
        },
      /** 调用完edit()方法之后会自动调用此方法 */
      editAfter(record,stat2) {
        this.id = record.id
        this.show = false
      if(stat2=='detail'){
        this.show = true
      }

        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) {
        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,
        }
      },
      print(){
        this.printMouldUrl = 'http://172.18.91.36:8081/jeecg-boot/jmreport/shareView/835754802514579456'+'?id='+this.id
      },
      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'))
     },
     changeStartTime(data){   
      var end = this.form.getFieldValue('contractEnd')?new Date((this.form.getFieldValue('contractEnd')).replace(/\-/g, "\/")):'';
      var start = new Date(data.replace(/\-/g, "\/"));
      if(end!=""&&data!=""&&start >=end)  
       {  
        this.$nextTick(() => {
          this.form.setFieldsValue({contractStart: '' })
           this.$forceUpdate()
         })
        this.$message.error("合同开始时间不能大于合同结束时间！")     
        return false;  
        }
     },
     changeEndTime(data){
      var start = this.form.getFieldValue('contractStart')?new Date((this.form.getFieldValue('contractStart')).replace(/\-/g, "\/")):"";
      var end = new Date(data.replace(/\-/g, "\/"));
      if(this.form.getFieldValue('contractStart')!=""&&data!=""&&start >=end)  
       {  
        this.$nextTick(() => {
          this.form.setFieldsValue({contractEnd: '' })
           this.$forceUpdate()
         })
        this.$message.error("合同开始时间不能大于合同结束时间！")     
        return false;  
        }
     }

    }
  }
</script>

<style scoped lang="less">

/deep/ .ant-form-item-control {
      height: 40px;
      display: contents;
} 
</style>