jucai/public/themes/default/views/app/person/recruit_info.blade.php

@extends('module.layouts.person')

@push('meta')

@endpush

@push('css')
    <link href="{{ theme_asset('app/css/person/common.css') }}" rel="stylesheet">
    <link href="{{theme_asset('app/css/recruit/recruit.css')}}" rel="stylesheet" type="text/css"/>
    <link href="{{theme_asset('app/css/element.css')}}" rel="stylesheet" type="text/css"/>
    <style>
        table,table tr th, table tr td { border:1px solid #ccc; padding: 0 7px}
        table { width: 100%; min-height: 25px; line-height: 25px; text-align: center; border-collapse: collapse; padding:2px;}
        .el-form-item{
            margin-bottom: 0;
        }
        .require{
            color: #f56c6c;
        }
        .avatar-uploader{
            padding: 15px;
        }
        .avatar-uploader .el-upload {

            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            display: inline-block;
            vertical-align: middle;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 120px;
            height: 120px;
            line-height: 120px;
            text-align: center;
            border: 1px dashed #d9d9d9;
        }
        .avatar {
            width: 120px;
            height: 120px;
            display: block;
        }

    </style>
@endpush

@section('content')
    <div class="recruit_container" id="app" style="margin-top: 20px">
        <div class="res_add_title font_blue">应招前请先完善个人基本信息！</div>
        <el-form :model="user" ref="userForm" :show-message="false"  :rules="rules">
            <table cellspacing="0" width="100%">
                <tbody>
                <tr style="height:52px;page-break-inside:avoid" class="firstRow">
                    <td valign="center" width="100">
                        <span class="require">*</span>姓名
                    </td>
                    <td valign="center" colspan="4" width="200">
                        <el-form-item prop="realname" >
                            <el-input v-model="user.realname" placeholder="请输入您的姓名" style="width: 200px"></el-input>
                        </el-form-item>
                    </td>
                    <td valign="center" width="80">
                        <span class="require">*</span>性别
                    </td>
                    <td valign="center" colspan="2">
                        <el-form-item prop="sex" >
                            <el-radio label="1" v-model="user.sex">男</el-radio>
                            <el-radio label="0" v-model="user.sex">女</el-radio>
                        </el-form-item>
                    </td>
                    <td valign="center" width="100">
                        <span class="require">*</span>出生年月
                    </td>
                    <td valign="center" colspan="2" width="200">
                        <el-form-item prop="birthday">
                            <el-date-picker
                                    v-model="user.birthday"
                                    type="date"
                                    placeholder="选择您的出生年月日"
                                    value-format="yyyy-MM-dd">
                            </el-date-picker>
                        </el-form-item>
                    </td>
                    <td valign="center" rowspan="3" width="200">
                        <el-form-item prop="avatar" ref="avatar">
                            <el-upload
                                    class="avatar-uploader"
                                    action="{{ route('recruit.api.upload') }}"
                                    ref="user_avatar"
                                    :data="{name:'avatar',_token:'{{csrf_token()}}'}"
                                    :show-file-list="false"
                                    :before-upload="beforeImageUpload"
                                    :on-success="uploadSuccess">
                                <img v-if="this.user.avatar" :src="this.user.avatar" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                        <div><span><span class="require">*</span>近期免冠证件照(2M以内)</span></div>
                    </td>
                </tr>
                <tr style="height:52px;page-break-inside:avoid">
                    <td valign="center" >
                        <span class="require">*</span>身份证号码
                    </td>
                    <td valign="center" colspan="4" >
                        <el-form-item prop="card">
                            <el-input v-model="user.card" placeholder="请输入身份证号码 "></el-input>
                        </el-form-item>
                    </td>
                    <td valign="center">
                        <span class="require">*</span>民族
                    </td>
                    <td valign="center" colspan="2" >
                        <el-form-item prop="nation">
                            <el-input v-model="user.nation" placeholder="请输入您的民族"></el-input>
                        </el-form-item>
                    </td>
                    <td valign="center" >
                        <span class="require">*</span>籍贯
                    </td>
                    <td valign="center" colspan="2">
                        <el-form-item prop="native_place">
                            <el-input v-model="user.native_place" placeholder="请输入您的籍贯"></el-input>
                        </el-form-item>
                    </td>
                </tr>
                <tr style="height:52px;page-break-inside:avoid">
                    <td valign="center" >
                        <span class="require">*</span>政治面貌
                    </td>
                    <td valign="center" colspan="4" >
                        <el-form-item prop="political_affiliation">
                            <el-select v-model="user.political_affiliation" placeholder="请选择">
                                <el-option
                                        v-for="item in political_affiliation"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </td>
                    <td valign="center" >
                        入党时间
                    </td>
                    <td valign="center" colspan="2">
                        <el-input v-model="user.join_time" placeholder="非党员请放空"></el-input>
                    </td>
                    <td valign="center" >
                        <span class="require">*</span>户籍所在地
                    </td>
                    <td valign="center" colspan="2" >
                        <el-form-item prop="house_register">
                            <el-input v-model="user.house_register" placeholder="请输入户籍所在地"></el-input>
                        </el-form-item>
                    </td>
                </tr>
                <tr style="height:52px;page-break-inside:avoid">
                    <td valign="center" colspan="8" >
                        <el-form-item prop="education" label="学历" label-width="70px">
                            <el-select v-model="user.education" placeholder="请选择学历">
                                <el-option label="小学" value="小学"></el-option>
                                <el-option label="初中" value="初中"></el-option>
                                <el-option label="技校" value="技校"></el-option>
                                <el-option label="职高" value="职高"></el-option>
                                <el-option label="高中" value="高中"></el-option>
                                <el-option label="中专" value="中专"></el-option>
                                <el-option label="专科" value="专科"></el-option>
                                <el-option label="本科" value="本科"></el-option>
                                <el-option label="硕士" value="硕士"></el-option>
                                <el-option label="博士" value="博士"></el-option>
                            </el-select>
                        </el-form-item>
                    </td>
                    <td valign="center" >
                        <span class="require">*</span>毕业院校
                    </td>
                    <td valign="center" colspan="4" >
                        <el-form-item prop="school">
                            <el-input v-model="user.school" autosize placeholder="请输入毕业院校"></el-input>
                        </el-form-item>
                    </td>
                </tr>
                <tr style="height:52px;page-break-inside:avoid">
                    <td valign="center" colspan="8" >
                        <el-form-item prop="degree" label="学位" label-width="70px">
                            <el-select v-model="user.degree" placeholder="请选择学位">
                                <el-option label="无" value="无">无</el-option>
                                <el-option label="学士学位" value="学士学位"></el-option>
                                <el-option label="硕士学位" value="硕士学位"></el-option>
                                <el-option label="博士学位" value="博士学位"></el-option>
                            </el-select>
                        </el-form-item>
                    </td>
                    <td valign="center" >
                        <span class="require">*</span>所学专业
                    </td>
                    <td valign="center" colspan="4" >
                        <el-form-item prop="pro">
                            <el-input v-model="user.pro" autosize placeholder="多专业请用;分隔"></el-input>
                        </el-form-item>
                    </td>
                </tr>

                <tr style="height:52px;page-break-inside:avoid">
                    <td valign="center" >
                        <span class="require">*</span>联系电话
                    </td>
                    <td valign="center" colspan="7" >
                        <el-form-item prop="mobile">
                            <el-input v-model="user.mobile" placeholder="请输入联系电话"></el-input>
                        </el-form-item>
                    </td>
                    <td valign="center" colspan="1" >
                        <span class="require">*</span>电子邮箱
                    </td>
                    <td valign="center" colspan="3" >
                        <el-form-item prop="email">
                            <el-input v-model="user.email" placeholder="请输入电子邮箱"></el-input>
                        </el-form-item>
                    </td>
                </tr>
                <tr style="height:52px;page-break-inside:avoid">
                    <td valign="center">
                        <span class="require">*</span>通信地址
                    </td>
                    <td valign="center" colspan="7" >
                        <el-form-item prop="address">
                            <el-input v-model="user.address" placeholder="请输入地址"></el-input>
                        </el-form-item>
                    </td>
                    <td valign="center" colspan="3" >
                        <span class="require">*</span>是否接受招考/招聘推送
                    </td>
                    <td valign="center" colspan="1" >
                        <el-form-item prop="is_push" >
                            <el-radio label="1" v-model="user.is_push">是</el-radio>
                            <el-radio label="0" v-model="user.is_push">否</el-radio>
                        </el-form-item>
                    </td>
                </tr>
                <tr style="height:52px;page-break-inside:avoid">
                    <td valign="center">
                        现工作单位及职务
                    </td>
                    <td valign="center" colspan="7" >
                        <el-input v-model="user.work" placeholder="请输入现工作单位及职务"></el-input>
                    </td>
                    <td valign="center" >
                        职称或职业资格
                    </td>
                    <td valign="center" colspan="3">
                        <el-input v-model="user.titles" placeholder="请输入职称或职业资格"></el-input>
                    </td>
                </tr>
                <tr style="height:52px;page-break-inside:avoid">
                    <td valign="center" >
                        <span class="require">*</span>紧急联系人<br />姓名
                    </td>
                    <td valign="center" colspan="7" >
                        <el-form-item prop="concat_name">
                            <el-input v-model="user.concat_name" placeholder="请输入紧急联系人姓名"></el-input>
                        </el-form-item>
                    </td>
                    <td valign="center">
                        <span class="require">*</span>联系电话
                    </td>
                    <td valign="center" colspan="7" >
                        <el-form-item prop="concat_mobile">
                            <el-input v-model="user.concat_mobile" placeholder="请输入联系电话"></el-input>
                        </el-form-item>
                    </td>
                </tr>
                <tr style="height:275px;page-break-inside:avoid">
                    <td valign="center" >
                        <span class="require">*</span>个<br />
                        &nbsp;人<br />
                        &nbsp;简<br />
                        &nbsp;历
                    </td>
                    <td valign="center" colspan="11" >
                        <el-form-item prop="resume">
                            <el-input
                                    type="textarea"
                                    :rows="12"
                                    :placeholder="resume_tip"
                                    v-model="user.resume">
                            </el-input>
                        </el-form-item>
                    </td>
                </tr>
                <tr style="height:47px;page-break-inside:avoid">
                    <td valign="center" :rowspan="this.user.family.length+1">
                        家庭成员及其主要社会关系<br />
                        <el-button type="primary" icon="el-icon-plus" size="small" @click="addFamily">添加家庭成员</el-button><br />
                        <el-button type="danger" icon="el-icon-minus" size="small" @click="delFamily">删除最后一行</el-button>
                    </td>
                    <td valign="center" >
                        <p style=";text-align:center">
                            <span style=";font-family:宋体;font-size:14px">称谓</span>
                        </p>
                    </td>
                    <td width="200" valign="center" colspan="4" >
                        <p style=";text-align:center">
                            <span style=";font-family:宋体;font-size:14px">姓名</span>
                        </p>
                    </td>
                    <td width="87" valign="center" colspan="2" >
                        <p style=";text-align:center">
                            <span style=";font-family:宋体;font-size:14px">出生年月</span>
                        </p>
                    </td>
                    <td width="98" valign="center" colspan="1" >
                        <p style=";text-align:center">
                            <span style=";font-family:宋体;font-size:14px">政治面貌</span>
                        </p>
                    </td>
                    <td width="241" valign="center" colspan="3" >
                        <p style=";text-align:center">
                            <span style=";font-family:宋体;font-size:14px">工作单位及职位</span>
                        </p>
                    </td>
                </tr>
                <tr style="height:52px;page-break-inside:avoid" v-for="(item,index) in user.family">
                    <td width="85" valign="center">
                        <el-form-item :prop="'family.'+index+'.relation'" :rules="{required: true, message: '称谓不能为空', trigger: 'blur'}">
                            <el-input v-model="item.relation" placeholder="请输入称谓"></el-input>
                        </el-form-item>
                    </td>
                    <td width="200" valign="center" colspan="4" >
                        <el-form-item :prop="'family.'+index+'.realname'" :rules="{required: true, message: '真实姓名不能为空', trigger: 'blur'}">
                            <el-input v-model="item.realname" placeholder="请输入真实姓名"></el-input>
                        </el-form-item>
                    </td>
                    <td width="87" valign="center" colspan="2" >
                        <el-form-item :prop="'family.'+index+'.birthday'" :rules="{required: true, message: '出生年月日不能为空', trigger: 'blur'}">
                            <el-date-picker
                                    v-model="item.birthday"
                                    type="date"
                                    placeholder="选择出生年月日"
                                    value-format="yyyy-MM-dd">
                            </el-date-picker>
                        </el-form-item>
                    </td>
                    <td width="98" valign="center" colspan="1" >
                        <el-form-item :prop="'family.'+index+'.political_affiliation'" :rules="{required: true, message: '请选择您的政治面貌', trigger: 'blur'}">
                            <el-select v-model="item.political_affiliation" placeholder="请选择">
                                <el-option
                                        v-for="select in political_affiliation"
                                        :key="select.value"
                                        :label="select.label"
                                        :value="select.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </td>
                    <td width="241" valign="center" colspan="3" >
                        <el-form-item :prop="'family.'+index+'.work'" :rules="{required: true, message: '请输入工作单位及职位', trigger: 'blur'}">
                            <el-input v-model="item.work" placeholder="请输入工作单位及职位"></el-input>
                        </el-form-item>
                    </td>
                </tr>
                <tfoot>
                <tr>
                    <td height="52" colspan="12" >
                        <el-form-item size="large">
                            <el-button type="primary" @click="save('userForm')">保存</el-button>
                        </el-form-item>
                    </td>
                </tr>
                </tfoot>
                </tbody>
            </table>
        </el-form>

    </div>
@endsection

@section('script')
    <script src="{{theme_asset('app/js/vue.min.js')}}"></script>
    <script src="{{theme_asset('app/js/axios.js')}}"></script>
    <script src="{{theme_asset('app/js/qs.min.js')}}"></script>
    <script src="{{theme_asset('app/js/element.js')}}"></script>
    <script>
        new Vue({
            el: '#app',
            data: function() {
                return {
                    resume_tip:"个人简历请严格按如下格式填写：\r\n1993.09-1996.07 \t××市××中学（高中） 学生；\r\n1996.09-2000.07 \t×××××大学（本科）工商管理专业 学生；\r\n2000.09-2001.03\t待业；\r\n2001.04-2004.08\t×××××有限公司（私营企业）总务科 后勤；\r\n2004.09-2007.06\t××市××单位（事业单位）非编 经办；\r\n2005.09-2008.07\t××省×××大学（在职研究生）工商管理专业  学生；\r\n2007.08-至今\t ××省×××单位（参公事业单位）在编  科员。\r\n说明：1.从高中写起到至今，中间不可中断。\r\n \t  2.对在职学习的，应注明。",
                    loading: this.$loading({
                        lock: false,
                        text: '加载中',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    }),
                    user:eval({!! $info !!}),
                    rules:{
                        realname:[
                            {required: true, message: '请输入您的姓名', trigger: 'blur'}
                        ],
                        sex:[
                            { required: true, message: '请选择性别', trigger: 'change' }
                        ],
                        birthday:[
                            {required: true, message: '请选择出生日期', trigger: 'change' }
                        ],
                        avatar:[
                            {required: true, message: '请上传蓝底/红底近期证件照', trigger: 'change'}
                        ],
                        card:[
                            {required: true, message: '请输入证件号', trigger: 'blur'},
                            {validator:this.validID, trigger: 'blur'}
                        ],
                        nation:[
                            {required: true, message: '请输入您的民族', trigger: 'blur'}
                        ],
                        native_place:[
                            {required: true, message: '请输入您的籍贯', trigger: 'blur'}
                        ],
                        political_affiliation:[
                            {required: true, message: '请选择您的政治面貌', trigger: 'blur'}
                        ],
                        house_register:[
                            {required: true, message: '请输入您的户籍所在地', trigger: 'blur'}
                        ],
                        // edu_type:[
                        //     {required: true, message: '请选择您的教育类型', trigger: 'change'}
                        // ],
                        school:[
                            {required: true, message: '请输入学校信息', trigger: 'blur'}
                        ],
                        education:[
                            {required: true, message: '请输入学历信息', trigger: 'blur'}
                        ],
                        pro:[
                            {required: true, message: '请输入所学专业', trigger: 'blur'}
                        ],
                        mobile:[
                            {required: true, message: '请输入手机号', trigger: 'blur'},
                            {validator:this.validMobile, trigger: 'blur'}
                        ],
                        email:[
                            {required: true, message: '请输入电子邮箱', trigger: 'blur'},
                            {validator:this.validEmail, trigger: 'blur'}
                        ],
                        address:[
                            {required: true, message: '请输入地址', trigger: 'blur'}
                        ],
                        is_push:[
                            { required: true, message: '请选择是否接送推送', trigger: 'change' }
                        ],
                        concat_name:[
                            {required: true, message: '请输入紧急联系人姓名', trigger: 'blur'}
                        ],
                        concat_mobile:[
                            {required: true, message: '请输入紧急联系人电话', trigger: 'blur'}
                        ],
                        resume:[
                            {required: true, message: '请输入个人简历', trigger: 'blur'},
                        ]

                    },
                    political_affiliation: [ //国家关于政治面貌的分类标准
                        {
                            value: '01',
                            label: '中共党员'
                        },
                        {
                            value: '02',
                            label: '中共预备党员'
                        },
                        {
                            value: '03',
                            label: '共青团员'
                        },
                        {
                            value: '04',
                            label: '民革党员'
                        },
                        {
                            value: '05',
                            label: '民盟盟员'
                        },
                        {
                            value: '06',
                            label: '民建会员'
                        },
                        {
                            value: '07',
                            label: '民进会员'
                        },
                        {
                            value: '08',
                            label: '农工党党员'
                        },
                        {
                            value: '09',
                            label: '致公党党员'
                        },
                        {
                            value: '10',
                            label: '九三学社社员'
                        },
                        {
                            value: '11',
                            label: '台盟盟员'
                        },
                        {
                            value: '12',
                            label: '无党派人士'
                        },
                        {
                            value: '13',
                            label: '群众'
                        }
                    ],
                    recruit_id: '{{ $recruit_id }}'
                }
            },
            methods: {
                validID(rule, value, callback){
                    if(!this.checkIDCard(value)) {
                        callback(new Error('身份证号不正确'));
                    }
                    callback();
                },
                checkIDCard(cardNo){
                    var weight_factor = [7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2];
                    var check_code = ['1', '0', 'X' , '9', '8', '7', '6', '5', '4', '3', '2'];
                    var code = cardNo + "";
                    var last = cardNo[17];//最后一位
                    var seventeen = code.substring(0,17);
                    var arr = seventeen.split("");
                    var len = arr.length;
                    var num = 0;
                    for(var i = 0; i < len; i++){
                        num = num + arr[i] * weight_factor[i];
                    }
                    var resisue = num%11;
                    var last_no = check_code[resisue];
                    var idcard_patter = /^[1-9][0-9]{5}([1][9][0-9]{2}|[2][0][0|1][0-9])([0][1-9]|[1][0|1|2])([0][1-9]|[1|2][0-9]|[3][0|1])[0-9]{3}([0-9]|[X])$/;
                    var format = idcard_patter.test(cardNo);
                    return last === last_no && format ? true : false;
                },
                validMobile(rule, value, callback){
                    if(!(/^1[3456789]\d{9}$/.test(value))){
                        callback(new Error('手机号码不正确'));
                    }
                    callback();
                },
                validEmail(rule, value, callback){
                    if(!(/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(value))){
                        callback(new Error('电子邮箱不正确'));
                    }
                    callback();
                },
                validAvatar(rule, value, callback){
                    console.log(value)

                    callback();
                },
                save(formName) {
                    this.$refs[formName].validate((valid,object) => {
                        if (valid) {
                            this.loading = this.$loading({
                                lock: false,
                                text: '加载中',
                                spinner: 'el-icon-loading',
                                background: 'rgba(0, 0, 0, 0.7)'
                            });

                            this.user._token = '{{csrf_token()}}';

                            axios.post('saveRecruitInfo',Qs.stringify(this.user)).then(response => {
                                if(response.data.status == '0'){
                                    this.$message.error(response.data.msg);
                                    this.loading.close();
                                    return false;
                                }else{
                                    var that = this;
                                    this.$alert(response.data.msg, '提交成功', {
                                        confirmButtonText: '确定',
                                        callback: action => {
                                            if(that.recruit_id == 0){
                                                window.location.reload();
                                            }else{
                                                window.location.href = "{{route('recruit.sign_up')}}" + '?id=' + that.recruit_id;
                                            }
                                        }
                                    });
                                }
                                this.loading.close();
                            });

                        } else {
                            for(let key in object){
                                this.$message.error(object[key][0].message);
                                return false;
                            }

                            return false;
                        }
                    });
                },
                beforeImageUpload(file) {
                    const isJPG = (file.type === 'image/jpeg' || file.type === 'image/png');
                    const isLt2M = file.size / 1024 / 1024 < 2;

                    if (!isJPG) {
                        this.$message.error('上传图片只能是 JPG、PNG 格式!');
                    }
                    if (!isLt2M) {
                        this.$message.error('上传图片大小不能超过 2MB!');
                    }
                    return isJPG && isLt2M;
                },
                uploadSuccess(response, file, fileList){
                    if(response.status){
                        this.user.avatar = response.path;
                    }else{
                        this.$message.error(response.msg);
                    }
                    console.log(this.user)
                },
                addFamily(){
                    this.user.family.push({
                        relation:'',
                        realname:'',
                        birthday:'',
                        political_affiliation:'',
                        work:''
                    });
                },
                delFamily(){
                    var length = this.user.family.length;
                    if (length > 1) {
                        this.user.family.pop()
                    }else{
                        this.$message.error('只剩一条记录，不能再删啦');
                    }
                }
            },
            created(){
                this.loading.close();
                console.log(this.recruit_id == 0)
            }
        })
    </script>
@endsection