jucai/public/themes/default/views/app/content/buyhouse/list.blade.php

@extends('module.layouts.content')

@push('meta')

@endpush

@push('css')
    <link href="{{ theme_asset('app/css/common.css') }}" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="{{theme_asset('app/css/elementui.min.css')}}">
    <style>
        .header_image{
            display:block;
            width:100%;
        }

        .house_title{
            font-size:26px;
            text-align:center;
            margin-top:20px;
            color:#333333;
        }

        .content_box{
            width:1200px;
            box-sizing:border-box;
            margin:0 auto;
        }

        .table_box{
            margin-top:20px;
        }

        .table_box .header_line{
            background:#46afc7;
            width:100%;
            height:15px;
            border-top:1px solid #1a8199;
            margin-top:20px;
        }
    </style>
    <style>
        .table_form table, .table_form table tr th, .table_form table tr td{
            border:1px solid #ccc;
            padding:0 7px;
            box-sizing:border-box;
        }

        .table_form 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:1px dashed #d9d9d9;
            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:178px;
            height:178px;
            line-height:178px;
            text-align:center;
        }

        .avatar{
            width:178px;
            height:178px;
            display:block;
        }

        .ticket{
            border:3px solid #000;
            padding:10px;
        }

        .ticket h2{
            text-align:center;
            font:normal 20px/40px "microsoft yahei";
        }

        .ticket h3{
            text-align:center;
            font:normal 24px/30px "microsoft yahei";
        }

        .ex_rule{
            margin-top:20px;
        }

        .ex_rule h4{
            font-size:20px;
            line-height:50px;
        }

        .ex_rule p{
            text-indent:30px;
            line-height:25px;
        }

        .ticket .item{
            line-height:30px;
        }
    </style>
@endpush

@push('js')

@endpush

@section('content')
    <div id="app">
        <img src="{{ theme_asset('app/images/buyhouse/header.jpg') }}" class="header_image">
        <h1 class="house_title">申报内容</h1>

        {{--申报内容--}}
        <div class="content_box table_box">
            <div class="header_line"></div>
            <el-table
                    :data="list"
                    stripe
                    style="width: 100%">
                <el-table-column
                        prop="id"
                        label="ID"
                        width="80">
                </el-table-column>
                <el-table-column
                        label="申报状态"
                        width="100">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.status_tag" effect="dark" size="mini">
                            @{{ scope.row.status_text }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="项目"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="declare_time_text"
                        label="申报时间"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="地址">
                </el-table-column>
                <el-table-column
                        prop="apply_time"
                        label="报名时间"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="describe"
                        label="项目介绍">
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="120">
                    <template slot-scope="scope">
                        <el-button @click="dialogVisible = true" type="text" size="small">查看项目介绍</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog
                title="项目介绍"
                :visible.sync="dialogVisible"
                width="30%">
            <span v-html="list[0].content"></span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">关 闭</el-button>
            </span>
        </el-dialog>

        {{--审核状态--}}
        @if($check)
            <el-alert
                    title="{{$check['status_text']}}"
                    type="{{$check['type']}}"
                    description="{{$check['comment']}}"
                    style="margin:20px auto;width:1200px;">
            </el-alert>
        @endif

        {{--表单--}}
        <div style="margin:0 auto;width:1200px;" class="table_form">
            <el-form :model="user" ref="userForm" :status-icon="true" :show-message="false" :rules="rules"
                     :disabled="formDisable">
                {{--个人信息--}}
                <table cellspacing="0">
                    <tr style="height:60px;page-break-inside:avoid">
                        <td colspan="12">
                            <h1>个人信息</h1>
                        </td>
                    </tr>
                    <tr style="height:52px;page-break-inside:avoid">
                        <td valign="center" style="width:100px;">
                            <span class="require">*</span>姓名
                        </td>
                        <td valign="center" colspan="3" style="width:300px;">
                            <el-form-item prop="realname">
                                <el-input v-model="user.realname" placeholder="请输入您的姓名"></el-input>
                            </el-form-item>
                        </td>
                        <td valign="center" style="width:100px;">
                            <span class="require">*</span>联系电话
                        </td>
                        <td valign="center" colspan="3" style="width:300px;">
                            <el-form-item prop="realname">
                                <el-input v-model="user.realname" placeholder="请输入您的姓名"></el-input>
                            </el-form-item>
                        </td>
                        <td valign="center" style="width:100px;">
                            <span class="require">*</span>籍贯
                        </td>
                        <td valign="center" colspan="3" style="width:300px;">
                            <el-form-item prop="realname">
                                <el-input v-model="user.realname" 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="3">
                            <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="3">
                            <el-form-item prop="education">
                                <el-select v-model="user.education" placeholder="请选择人才层次" style="width:100%;">
                                    <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="3">
                            <el-form-item prop="birthday">
                                <el-date-picker
                                        style="width:100%;"
                                        v-model="user.birthday"
                                        type="date"
                                        placeholder="选择您的人才证有效期"
                                        value-format="yyyy-MM-dd">
                                </el-date-picker>
                            </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="3">
                            <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="6">
                            <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">
                            <span class="require">*</span>证件信息<br/>
                            （身份证或护照，本人手持证件正、反面照片）
                        </td>
                        <td valign="center" colspan="11">
                            <el-form-item prop="identification" ref="identification">
                                <div style="padding: 10px 0">
                                    <el-upload
                                            action="{{ route('recruit.api.upload') }}"
                                            list-type="picture-card"
                                            :data="{_token:'{{csrf_token()}}'}"
                                            :file-list="user.identification"
                                            :before-upload="beforeImageUpload"
                                            :on-success="uploadSuccessID"
                                            :multiple="true"
                                            :on-preview="handlePictureCardPreview"
                                            :on-remove="removeID">
                                        <i class="el-icon-plus"></i>
                                    </el-upload>
                                </div>
                            </el-form-item>
                        </td>
                    </tr>
                </table>

                {{--家庭资料--}}
                <table cellspacing="0">
                    <tr style="height:60px;page-break-inside:avoid">
                        <td colspan="12">
                            <h1>家庭资料</h1>
                        </td>
                    </tr>
                    <tr>
                        <td valign="center">
                            <span class="require">*</span>婚姻状况
                        </td>
                        <td valign="center" colspan="5">
                            <el-form-item prop="marry">
                                <el-radio label="1" v-model="user.marry">未婚</el-radio>
                                <el-radio label="2" v-model="user.marry">已婚</el-radio>
                                <el-radio label="3" v-model="user.marry">离异</el-radio>
                                <el-radio label="4" v-model="user.marry">丧偶</el-radio>
                            </el-form-item>
                        </td>
                    </tr>
                    <tr style="height:52px;page-break-inside:avoid">
                        <td valign="center">
                            <span class="require">*</span>婚姻证明<br/>
                            （结婚证，离婚证，离婚生效文书、丧偶证明等）
                        </td>
                        <td valign="center" colspan="3">
                            <el-form-item prop="identification" ref="identification">
                                <div style="padding: 10px 0">
                                    <el-upload
                                            action="{{ route('recruit.api.upload') }}"
                                            list-type="picture-card"
                                            :data="{_token:'{{csrf_token()}}'}"
                                            :file-list="user.identification"
                                            :before-upload="beforeImageUpload"
                                            :on-success="uploadSuccessID"
                                            :multiple="true"
                                            :on-preview="handlePictureCardPreview"
                                            :on-remove="removeID">
                                        <i class="el-icon-plus"></i>
                                    </el-upload>
                                </div>
                            </el-form-item>
                        </td>
                    </tr>
                    <tr style="height:52px;page-break-inside:avoid">
                        <td valign="center">
                            <span class="require">*</span>户口本<br/>
                            （上传家庭户口本）
                        </td>
                        <td valign="center" colspan="3">
                            <el-form-item prop="identification" ref="identification">
                                <div style="padding: 10px 0">
                                    <el-upload
                                            action="{{ route('recruit.api.upload') }}"
                                            list-type="picture-card"
                                            :data="{_token:'{{csrf_token()}}'}"
                                            :file-list="user.identification"
                                            :before-upload="beforeImageUpload"
                                            :on-success="uploadSuccessID"
                                            :multiple="true"
                                            :on-preview="handlePictureCardPreview"
                                            :on-remove="removeID">
                                        <i class="el-icon-plus"></i>
                                    </el-upload>
                                </div>
                            </el-form-item>
                        </td>
                    </tr>
                    <tr style="height:47px;page-break-inside:avoid">
                        <td valign="center" :rowspan="this.user.family.length+1" style="width:200px;">
                            家庭成员<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" style="width:200px;">
                            <p style=";text-align:center">
                                <span style=";font-family:宋体;font-size:14px">称谓</span>
                            </p>
                        </td>
                        <td width="200" valign="center" style="width:200px;">
                            <p style=";text-align:center">
                                <span style=";font-family:宋体;font-size:14px">姓名</span>
                            </p>
                        </td>
                        <td width="87" valign="center" style="width:600px;">
                            <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 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 valign="center">
                            <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 valign="center">
                            <el-form-item :prop="'family.'+index+'.idcard'"
                                          :rules="{required: true, message: '证件信息不能为空', trigger: 'blur'}">
                                <el-input v-model="item.idcard" placeholder="证件信息"></el-input>
                            </el-form-item>
                        </td>
                    </tr>
                </table>
                {{--工作情况--}}
                <table cellspacing="0">
                    <tr style="height:60px;page-break-inside:avoid">
                        <td colspan="12">
                            <h1>工作情况</h1>
                        </td>
                    </tr>
                    <tr style="height:52px;page-break-inside:avoid">
                        <td valign="center" style="width:200px;">
                            <span class="require">*</span>人才工作单位<br/>
                            （上传在职证明扫描件）<br/>
                            <a href="" target="_blank" style="color:blue;">点击下载范本</a>
                        </td>
                        <td valign="center" style="width:1000px;">
                            <el-form-item prop="identification" ref="identification">
                                <div style="padding: 10px 0">
                                    <el-upload
                                            action="{{ route('recruit.api.upload') }}"
                                            list-type="picture-card"
                                            :data="{_token:'{{csrf_token()}}'}"
                                            :file-list="user.identification"
                                            :before-upload="beforeImageUpload"
                                            :on-success="uploadSuccessID"
                                            :multiple="true"
                                            :on-preview="handlePictureCardPreview"
                                            :on-remove="removeID">
                                        <i class="el-icon-plus"></i>
                                    </el-upload>
                                </div>
                            </el-form-item>
                        </td>
                    </tr>
                    <tr style="height:52px;page-break-inside:avoid">
                        <td valign="center">
                            <span class="require">*</span>所属街道
                        </td>
                        <td valign="center">
                            <el-form-item prop="card">
                                <el-input v-model="user.card" placeholder="请输入所属街道"></el-input>
                            </el-form-item>
                        </td>
                    </tr>
                </table>
                {{--住房情况--}}
                <table>
                    <tr style="height:60px;page-break-inside:avoid">
                        <td colspan="11">
                            <h1>住房情况</h1>
                        </td>
                    </tr>
                    <tr style="height:52px;page-break-inside:avoid">
                        <td valign="center" colspan="3">
                            <span class="require">*</span>家庭成员在晋江市行政区域内住房情况
                        </td>
                        <td valign="center" colspan="3">
                            <el-form-item prop="card">
                                <el-input v-model="user.card" placeholder="请输入情况 "></el-input>
                            </el-form-item>
                        </td>

                        <td valign="center" colspan="3">
                            <span class="require">*</span>在晋享受政策性住房或相关优惠情况
                        </td>
                        <td valign="center" colspan="3">
                            <el-form-item prop="house_register">
                                <el-input v-model="user.house_register" placeholder="请输入情况"></el-input>
                            </el-form-item>
                        </td>
                    </tr>
                </table>

                <table>
                    <tr>
                        <td height="52" colspan="12" style="padding: 10px 0">
                            <p>
                                本人承诺<a href="" style="color: blue;">《承诺书》</a>：
                                <el-checkbox v-model="user.checked"></el-checkbox>
                            </p>
                            <el-form-item size="large">
                                <el-button type="success" @click="submit('userForm')">提交申请</el-button>
                            </el-form-item>
                        </td>
                    </tr>
                </table>
            </el-form>
        </div>
    </div>
@endsection

@section('script')
    <script type="text/javascript" src="{{theme_asset('app/js/vue.min.js')}}"></script>
    <script src="{{theme_asset('app/js/axios.js')}}"></script>
    <script type="text/javascript" src="{{theme_asset('app/js/elementui.min.js')}}"></script>
    <script>

        new Vue({
            el: '#app',
            data() {
                return {
                    dialogVisible: false,
                    user: {!! $apply !!},
                    post_data: {},
                    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'}
                        ],
                        post_id: [
                            {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'}
                        ],
                        @if(in_array('expand_special',$module))
                        //扩展验证
                        special_condition: [
                            {validator: this.validSpecialCondition, trigger: 'blur'}
                        ],
                        special_material: [
                            {validator: this.validSpecialMaterial, trigger: 'change'}
                        ],
                        @endif
                        resume: [
                            {required: true, message: '请输入个人简历', trigger: 'blur'},
                        ],
                        @if(in_array('identification',$module))
                        //身份验证
                        identification: [
                            {validator: this.validIdentification, trigger: 'change'}
                        ],
                        @endif
                                @if(in_array('education_certification',$module))
                        education_certification: [
                            {validator: this.validEducertification, trigger: 'change'}
                        ],
                        @endif
                    },
                    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: '群众'
                        }
                    ],
                    list: [{!!$house!!}],
                    formDisable: false,
                };
            },
            methods: {
                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);
                    }
                },
                uploadSuccessID(response, file, fileList) {
                    if (response.status) {
                        this.user.identification = fileList
                    } else {
                        this.$message.error(response.msg);
                    }
                },
                handlePictureCardPreview(file) {
                    this.dialogImageUrl = file.url;
                    this.dialogVisible = true;
                },
                removeID(file, fileList) {
                    this.user.identification = fileList
                },
                postChange(value) {
                    this.post_limit_value = this.post_limit[value];
                },

                addFamily() {
                    this.user.family.push({
                        appellation: '',
                        realname: '',
                        birthday: '',
                        political_attitudes: '',
                        work: ''
                    });
                },
                delFamily() {
                    var length = this.user.family.length;
                    if (length > 1) {
                        this.user.family.pop()
                    } else {
                        this.$message.error('只剩一条记录，不能再删啦');
                    }
                }
            },
            created() {
                /*axios.post("{{ route('share.getmydata') }}").then(response => {
                this.loading = false;
                this.share_list = response.data.data;
                this.page_total = response.data.total;
            });*/
            }
        })
    </script>
@endsection