recruit/app/home/view/my/info.html

{extend name="public/base"/}
{block name="css"}
<style>
    .content-box{width:1200px;}
    .bg-white {background: white;}
    .user_main {margin-top:20px;}
    .user_main .table-box {overflow: hidden;margin-top: 20px;padding:20px;box-sizing: border-box;}
    .res_add_title{height:50px;font-size:20px;padding-left:50px;}

    table.lw-table,table.lw-table tr th,table.lw-table tr td { border:1px solid #ccc; padding: 0 7px}
    table.lw-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>
{/block}
{block name="body"}
<div class="content-box">
    <el-row class="user_main">
        <el-col :span="24">
            <div class="bg-white" style="padding:20px;">
                <el-page-header @back="goBack" title="返回">
                    <template #content>
                        <span class="text-large font-600 mr-3"> 个人资料 </span>
                    </template>
                </el-page-header>
            </div>
        </el-col>
        <el-col :span="24">
            <div class="bg-white table-box">
                <div class="res_add_title font_blue"><el-icon size="40" style="margin-right: 10px;"><Platform></Platform></el-icon>应招前请先完善个人基本信息！</div>
                <el-form :model="user" ref="userForm" :show-message="false"  :rules="rules" v-loading="loading">
                    <table class="lw-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="{:url('upload/image')}"
                                            ref="user_avatar"
                                            :show-file-list="false"
                                            :before-upload="beforeImageUpload"
                                            :on-success="uploadSuccess">
                                        <img v-if="user.avatar" :src="user.avatar" class="avatar">
                                        <div v-else style="text-align: center;width: 150px;height: 100px;line-height: 100px;">
                                            <el-icon :size="40"><Upload></Upload></el-icon>
                                        </div>
                                    </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-cascader placeholder="请选择" v-model="native_place" :options="options" :props="{value:'label'}" @change="nativeChange"></el-cascader>
                            </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-cascader placeholder="请选择" v-model="house_register" :options="options" :props="{value:'label'}" @change="houseChange"></el-cascader>
                            </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="11" >
                                <el-form-item prop="address">
                                    <el-input v-model="user.address" placeholder="请输入地址"></el-input>
                                </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="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>
        </el-col>
    </el-row>
</div>

{/block}
{block name="script"}
<script src="/static/home/js/qs.min.js"></script>
<script src="/static/home/js/area.js"></script>
<script>
    function v_setup() {
        let base = {};

        base.goBack = () => {
            history.back();
        };

        base.loading = Vue.ref(false);
        base.userForm = Vue.ref();

        base.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.对在职学习的，应注明。";
        base.user = Vue.ref({$info});
        native_place = base.user.value.native_place.split(',');
        if (native_place[3] === 'undefined') {
            native_place.splice(3,1);
        }
        base.native_place = Vue.ref(native_place);
        house_register = base.user.value.house_register.split(',');
        if (house_register[3] === 'undefined') {
            house_register.splice(3,1);
        }
        base.house_register = Vue.ref(house_register);


        base.addFamily = () => {
            base.user.value.family.push({
                relation:'',
                realname:'',
                birthday:'',
                political_affiliation:'',
                work:''
            });
        };
        base.delFamily = () => {
            var length = base.user.value.family.length;
            if (length > 1) {
                base.user.value.family.pop()
            }else{
                ElMessage.error('只剩一条记录，不能再删啦');
            }
        };
        base.nativeChange = (native) => {
            if(native[3] != "undefined"){
                base.user.value.native_place = native[0] + ',' + native[1] + ',' + native[2] + ',' + native[3]
            }else{
                base.user.value.native_place = native[0] + ',' + native[1] + ',' + native[2]
            }
        };
        base.houseChange = (house) => {
            if(house[3] != "undefined"){
                base.user.value.house_register = house[0] + ',' + house[1] + ',' + house[2] + ',' + house[3]
            }else{
                base.user.value.house_register = house[0] + ',' + house[1] + ',' + house[2]
            }
        };

        base.beforeImageUpload = (file) => {
            const isJPG = (file.type === 'image/jpeg' || file.type === 'image/png');
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                ElMessage.error('上传图片只能是 JPG、PNG 格式!');
            }
            if (!isLt2M) {
                ElMessage.error('上传图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        };
        base.uploadSuccess = (response, file, fileList) => {
            if(!response.code){
                base.user.value.avatar = response.data.src;
            }else{
                ElMessage.error(response.msg);
            }
            console.log(base.user.value.avatar)
        };

        base.validID = (rule, value, callback) => {
            if(value.length == 18){
                if(!base.checkIDCard(value)) {
                    callback(new Error('身份证号不正确'));
                }
            }
            callback();
        };
        base.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;
        };
        base.validMobile = (rule, value, callback) => {
            if(!(/^1[3456789]\d{9}$/.test(value))){
                callback(new Error('手机号码不正确'));
            }
            callback();
        };
        base.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();
        };
        base.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:base.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'}
            ],
            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:base.validMobile, trigger: 'blur'}
            ],
            email:[
                {required: true, message: '请输入电子邮箱', trigger: 'blur'},
                {validator:base.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'},
            ]

        };

        base.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: '群众'
            }
        ];

        base.save = (formEl) => {
            if (!formEl) return;
            formEl.validate((valid,object) => {
                if (valid) {
                    base.loading.value = true;
                    postJson('/my/infoPost',base.user.value).then(({msg}) => {
                        ElMessage.success(msg);
                        base.loading.value = false;
                    });
                } else {
                    for(let key in object){
                        ElMessage.error(object[key][0].message);
                        return false;
                    }

                    return false;
                }
            })
        },

        base.options = area_list;

        return base;
    }
</script>
{/block}