cd-work-flow-web/src/views/system/modules/NewUserModal.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">
              <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="['sex', validatorRules.sex]" placeholder="请选择性别" :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="请选择证件类型" :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="请输入证件号码"></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-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%"/>
            </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-row>
      <a-row>
          <a-col :span="8  ">
            <a-form-item label="学历" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-select v-decorator="['education', validatorRules.education]" placeholder="请选择学历" :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="请选择岗位类型" :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"/>
            </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="请输入手机号码"></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-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%"/>
            </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%"/>
            </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%"/>
            </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]">
                <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]" fileType="image" :trigger-change="true"></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"></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="sysUserContactTable.loading"
            :columns="sysUserContactTable.columns"
            :dataSource="sysUserContactTable.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="sysUserJobTable.loading"
            :columns="sysUserJobTable.columns"
            :dataSource="sysUserJobTable.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="sysUserEduTable.loading"
            :columns="sysUserEduTable.columns"
            :dataSource="sysUserEduTable.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: 'SysUserModal',
    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: [
          ]},
          sex: {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: ['sysUserContact','sysUserJob',  'sysUserEdu', ],
        tableKeys:['sysUserContact', 'sysUserJob', 'sysUserEdu', ],
        activeKey: 'sysUserJob',
        // 人员管理工作经历
        sysUserJobTable: {
          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: '',
            },
          ]
        },
        // 人员管理联系人
        sysUserContactTable: {
          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: '',
            },
          ]
        },
        // 人员管理学习经历
        sysUserEduTable: {
          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: "/sys/user/add",
          edit: "/sys/user/editNew",
          sysUserJob: {
            list: '/sys/user/querySysUserJobByMainId'
          },
          sysUserContact: {
            list: '/sys/user/querySysUserContactByMainId'
          },
          sysUserEdu: {
            list: '/sys/user/querySysUserEduByMainId'
          },
        }
      }
    },
    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)) {
                    // 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() {
        let fieldval = pick(this.model,'operator','operatorDept','operateDate','realname','username','sex','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.sysUserJob.list, params, this.sysUserJobTable)
          this.requestSubTableData(this.url.sysUserContact.list, params, this.sysUserContactTable)
          this.requestSubTableData(this.url.sysUserEdu.list, params, this.sysUserEduTable)
        }
      },
      /** 整理成formData */
      classifyIntoFormData(allValues) {
        let main = Object.assign(this.model, allValues.formValue)

        return {
          ...main, // 展开
          sysUserContactList: allValues.tablesValue[0].values,
          sysUserJobList: allValues.tablesValue[1].values,
          sysUserEduList: allValues.tablesValue[2].values,
        }
      },
      validateError(msg){
        this.$message.error(msg)
      },
     popupCallback(row){
       this.form.setFieldsValue(pick(row,'operator','operatorDept','operateDate','realname','username','sex','idType','idNo','birthday','joinDate','post','postLevel','education','positionType','departIds','mobile','phone','address','probationEnd','contractStart','contractEnd','remark','identity','signature','attachment'))
     },
     changeStartTime(data){   
      var end = new Date((this.form.getFieldValue('contractEnd')).replace(/\-/g, "\/"));
      var start = new Date(data.replace(/\-/g, "\/"));
      if(this.form.getFieldValue('contractEnd')!=""&&data!=""&&start >=end)  
       {  
        this.$nextTick(() => {
          this.form.setFieldsValue({contractStart: '' })
           this.$forceUpdate()
         })
        this.$message.error("合同开始时间不能大于合同结束时间！")     
        return false;  
        }
     },
     changeEndTime(data){
      var start = 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>