oa-system/src/components/OP/visaEdit.vue

<template>
    <div class="visaedit-box">
        <div class="visaedit-title">
            {{ typeStr }}
        </div>
        <div class="plate-box">
            <div class="small-title">
                <span>基础信息</span>
            </div>
            <div class="foundation-form">
                <div class="tips">
                    姓名等需要与护照所示一致；曾用姓名包括未婚时称呼、宗教用称呼、工作用称呼、化名
                </div>
                <el-form :model="deleClient" :rules="rules" ref="deleClient" label-width="100px" class="demo-deleClient"
                    @submit.native.prevent>
                    <div class="foundation-box">
                        <el-form-item label="姓:" prop="lastName">
                            <el-input v-model="deleClient.lastName"></el-input>
                        </el-form-item>
                        <el-form-item label="名:" prop="firstName">
                            <el-input v-model="deleClient.firstName"></el-input>
                        </el-form-item>
                        <el-form-item label="曾用姓名:" prop="oldName">
                            <el-input v-model="deleClient.oldName"></el-input>
                        </el-form-item>
                        <el-form-item label="移动电话:" prop="phone">
                            <el-input v-model="deleClient.phone" placeholder="请输入11位手机号"></el-input>
                        </el-form-item>
                        <el-form-item label="出生日期:" prop="birthDay">
                            <el-date-picker v-model="deleClient.birthDay" type="date" placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="婚姻状况:" prop="marriage">
                            <el-select v-model="deleClient.marriage" filterable placeholder="请选择">
                                <el-option :key=0 label="未设置" :value=0></el-option>
                                <el-option :key=1 label="未婚" :value=1></el-option>
                                <el-option :key=2 label="已婚" :value=2></el-option>
                                <el-option :key=3 label="离异" :value=3></el-option>
                                <el-option :key=4 label="丧偶" :value=4></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="党派宗教:" prop="party">
                            <el-input v-model="deleClient.party"></el-input>
                        </el-form-item>
                        <el-form-item label="国籍:" prop="nationality">
                            <el-input v-model="deleClient.nationality"></el-input>
                        </el-form-item>
                        <el-form-item label="性别" prop="sex">
                            <el-radio-group v-model="deleClient.sex">
                                <el-radio :label="0">男</el-radio>
                                <el-radio :label="1">女</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="出生地 城市:" prop="birthCity">
                            <el-input v-model="deleClient.birthCity"></el-input>
                        </el-form-item>
                        <el-form-item label="省份:" prop="birthProvince">
                            <el-input v-model="deleClient.birthProvince"></el-input>
                        </el-form-item>

                        <el-form-item label="最高学历:" prop="highestEducation">
                            <el-input v-model="deleClient.highestEducation"></el-input>
                        </el-form-item>
                        <el-form-item label="家庭电话:" prop="tel">
                            <el-input v-model="deleClient.tel" placeholder="(座机)"></el-input>
                        </el-form-item>
                        <el-form-item label="电子信箱:" prop="email">
                            <el-input v-model="deleClient.email"></el-input>
                        </el-form-item>
                        <el-form-item label="邮编:" prop="postCodes">
                            <el-input v-model="deleClient.postCodes"></el-input>
                        </el-form-item>
                        <el-form-item label="现居地址" prop="address" style="width: 100%;">
                            <el-input type="textarea" v-model="deleClient.address" placeholder="现居地址"></el-input>
                        </el-form-item>
                    </div>
                </el-form>
            </div>
        </div>
        <div class="plate-box">
            <div class="small-title">
                <span>证件信息</span>
            </div>
            <el-form v-for="(item, i) in customerCerts" :key="i" :rules="rules" ref="customerCerts" @submit.native.prevent>
                <div class="foundation-box1">
                    <el-form-item label="证件类型" prop="sdId">
                        <el-select v-model="item.sdId" filterable placeholder="请选择" style="width: 164px;">
                            <el-option v-for="item1 in SetData" :key=item1.id :label=item1.name :value=item1.id></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="证件号" prop="certNo">
                        <el-input v-model="item.certNo"></el-input>
                    </el-form-item>
                    <el-form-item label="证件签发地" prop="area">
                        <el-input v-model="item.area" style="width: 120px;"></el-input>
                    </el-form-item>
                    <el-form-item label="目的地国家" prop="targetCountry">
                        <el-input v-model="item.targetCountry" style="width: 120px;">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="证件有效期:" prop="issueDt">
                        <div>
                            <el-date-picker v-model="item.issueDt" type="date" placeholder="身份证有效期">
                            </el-date-picker>
                        </div>
                    </el-form-item>
                    <el-form-item label="至:" prop="expiryDt">
                        <el-date-picker v-model="item.expiryDt" type="date" placeholder="身份证有效期">
                        </el-date-picker>
                    </el-form-item>
                    <div style="margin-top: 40px;,margin-left: 40px;">
                        <el-button circle icon="el-icon-minus" @click="subcustomerCertsAdd(i, item.id)"
                            v-if="i >= 0"></el-button>
                    </div>

                </div>
                <hr style='background-color:#5555; height:1px; border:none;' />
            </el-form>
            <div style="text-align: center;">
                <el-button circle icon="el-icon-plus" @click="customerCertsAdd()"></el-button>
            </div>
        </div>
        <div class="plate-box">
            <div class="small-title">
                <span>现就职单位</span>
            </div>
            <div class="flats-form">
                <el-form :model="customerCompany" :rules="rules" ref="customerCompany" label-width="100px"
                    class="demo-deleClient" @submit.native.prevent>
                    <div class="foundation-box">
                        <div style="width: 100%;padding-left: 50px;color: red;font-size: 12px;">
                            若信息有误或没有单位请到客户公司资料编辑
                        </div>
                        <el-form-item label="单位名称:" prop="companyName">
                            <el-select v-model="customerCompany.id" filterable placeholder="请选择公司"
                                @change="companyChange(customerCompany.id)">
                                <el-option v-for="item in CompanySelectData" :key="item.id" :label="item.companyName"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="单位地址:" disabled prop="companyAddress">
                            <el-input v-model="customerCompany.address" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="单位邮编:" prop="companyPostCodes">
                            <el-input v-model="customerCompany.postCodes" :disabled="true"></el-input>
                        </el-form-item>
                    </div>
                </el-form>
                <el-form :model="deleClient" :rules="rules" ref="deleClient" label-width="100px" class="demo-deleClient"
                    @submit.native.prevent>
                    <div class="foundation-box">
                        <el-form-item label="职务:" prop="job">
                            <el-input v-model="deleClient.job"></el-input>
                        </el-form-item>
                        <el-form-item label="入职时间" prop="workDate">
                            <el-date-picker v-model="deleClient.workDate" type="date" placeholder="(注明年月日)">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="月薪" prop="wage">
                            <el-input v-model="deleClient.wage" placeholder="(人民币)"></el-input>
                        </el-form-item>
                        <el-form-item label="单位电话:" prop="clientPhone">
                            <el-input v-model="deleClient.clientPhone"></el-input>
                        </el-form-item>
                        <el-form-item label="单位传真:" prop="clientFax">
                            <el-input v-model="deleClient.clientFax"></el-input>
                        </el-form-item>
                        <el-form-item label="单位邮箱:" prop="clientEmail">
                            <el-input v-model="deleClient.clientEmail"></el-input>
                        </el-form-item>
                        <el-form-item label="单位主管:" prop="clientLeader">
                            <el-input v-model="deleClient.clientLeader" placeholder="姓名:(除本人以外)"></el-input>
                        </el-form-item>
                        <el-form-item label="主管职务:" prop="clientLeaderJob">
                            <el-input v-model="deleClient.clientLeaderJob" placeholder="单位主管职务"></el-input>
                        </el-form-item>
                        <el-form-item label="工作内容" prop="workState" style="width: 100%;">
                            <el-input type="textarea" v-model="deleClient.workState"
                                placeholder="工作内容简单介绍(美加签证必填)"></el-input>
                        </el-form-item>
                    </div>
                </el-form>
            </div>
        </div>
        <div class="plate-box">
            <div class="small-title">
                <span>配偶信息</span>
            </div>
            <div class="flats-form">
                <el-form :model="deleClient" :rules="rules" ref="deleClient" label-width="100px" class="demo-deleClient"
                    @submit.native.prevent>
                    <div class="foundation-box">
                        <el-form-item label="结婚时间:" prop="weddingDate">
                            <el-date-picker v-model="deleClient.weddingDate" type="date" placeholder="请注明结婚时间">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="离婚时间:" prop="divorceDate">
                            <el-date-picker v-model="deleClient.divorceDate" type="date" placeholder="如离婚，请注明离婚时间">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="配偶姓名:" prop="mateName">
                            <el-input v-model="deleClient.mateName" placeholder="客户配偶姓名（若离异或分居或去世也应填写此项）"></el-input>
                        </el-form-item>
                        <el-form-item label="出生日期:" prop="mateBirthDay">
                            <el-date-picker v-model="deleClient.mateBirthDay" type="date">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="出生城市" prop="mateBirthCity">
                            <el-input v-model="deleClient.mateBirthCity"></el-input>
                        </el-form-item>
                        <el-form-item label="省份" prop="mateBirthCountry">
                            <el-input v-model="deleClient.mateBirthCountry"></el-input>
                        </el-form-item>
                        <el-form-item label="配偶住址:" prop="mateAddress">
                            <el-input v-model="deleClient.mateAddress"
                                placeholder="客户配偶住址（如果与客户不一样，须提供其配偶的地址，国家-省-市-街道-单元-门牌号）"></el-input>
                        </el-form-item>
                        <el-form-item label="工作单位:" prop="mateClient">
                            <el-input v-model="deleClient.mateClient" placeholder="客户配偶工作单位名称"></el-input>
                        </el-form-item>
                        <el-form-item label="单位地址:" prop="mateClientAddress">
                            <el-input v-model="deleClient.mateClientAddress" placeholder="客户配偶工作单位地址"></el-input>
                        </el-form-item>
                        <el-form-item label="职务:" prop="mateJob">
                            <el-input v-model="deleClient.mateJob" placeholder="客户配偶工作单位职务"></el-input>
                        </el-form-item>
                    </div>
                </el-form>
            </div>
        </div>
        <div class="plate-box">
            <div class="small-title">
                <span>家庭成员信息</span>

            </div>
            <el-form v-for="(item, index) in customerFamily" :key="index">
                <div class="foundation-box1">
                    <el-form-item label="称谓:" prop="appellation">
                        <el-select v-model="item.appellation" filterable placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="姓名:" prop="name">
                        <el-input v-model="item.name" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="出生日期:" prop="FamilybirthDay">
                        <el-date-picker v-model="item.birthDay" type="date">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="出生地:" prop="birthPlace">

                        <el-input v-model="item.birthPlace" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="政治面貌:" prop="politics">
                        <el-input v-model="item.politics" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="是否生活在美国:" prop="isUSA">
                        <el-radio-group v-model="item.isUSA">
                            <el-radio :label=1>是</el-radio>
                            <el-radio :label=0>否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="工作单位:" prop="client">
                        <el-input v-model="item.client" clearable style="width: 400px;"></el-input>
                    </el-form-item>

                    <el-form-item label="家庭住址:" prop="address">
                        <el-input v-model="item.address" clearable style="width: 400px;"></el-input>
                    </el-form-item>

                    <el-form-item label="是否欧盟公民:" prop="isEu">
                        <el-radio-group v-model="item.isEu">
                            <el-radio :label=1>是</el-radio>
                            <el-radio :label=0>否</el-radio>
                        </el-radio-group>
                    </el-form-item>

                </div>
                若家庭成员是欧盟、欧洲经济区或瑞士公民，请填写下方信息：
                <div class="foundation-box1">
                    <div style="width: 32%;display: flex;">
                        <el-form-item label="成员国籍:" prop="nationality">
                            <el-input v-model="item.nationality"></el-input>
                        </el-form-item>

                        <el-form-item label="证件号码" prop="idCard">
                            <el-input v-model="item.idCard" placeholder="旅行证件编号或身份证号码"></el-input>
                        </el-form-item>
                    </div>
                    <div>
                        <div class="textClass">
                            客户与该欧盟、欧洲经济区或瑞士公民亲属关系
                        </div>
                        <el-form-item prop="reletionship">
                            <el-radio-group v-model="item.reletionship">
                                <el-radio label="配偶"></el-radio>
                                <el-radio label="子女"></el-radio>
                                <el-radio label="孙女儿"></el-radio>
                                <el-radio label="赡养的老人"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div style="line-height: 70px;margin-left: 15%;">
                        <el-button circle icon="el-icon-minus" @click="subcustomerFamilyAdd(index, item.id)"
                            v-if="index >= 0"></el-button>
                    </div>
                </div>
                <hr style='background-color:#5555; height:1px; border:none;' />
            </el-form>
            <div style="text-align: center;">
                <el-button circle icon="el-icon-plus" @click="customerFamilyAdd()"></el-button>
            </div>
        </div>
        <div class="plate-box">
            <div class="small-title">
                <span>其他信息</span>
            </div>
            <div class="flats-form">
                <el-form :model="deleClient" :rules="rules" ref="deleClient" label-width="100px" class="demo-deleClient"
                    @submit.native.prevent>
                    <div class="foundation-box">
                        <el-form-item label="出访的国家" prop="visitCountry" style="width: 100%;">
                            <el-input type="textarea" v-model="deleClient.visitCountry"
                                placeholder="过去五年因公出访的国家（XX年XX月出访XX国）："></el-input>
                        </el-form-item>
                        <el-form-item label="发表文件" prop="paper" style="width: 100%;">
                            <el-input type="textarea" v-model="deleClient.paper"
                                placeholder="是否发表过期刊、论文（日期、题目、期刊名字)："></el-input>
                        </el-form-item>
                        <el-form-item label="拥有专利" prop="papent" style="width: 100%;">
                            <el-input type="textarea" v-model="deleClient.papent"
                                placeholder="是否拥有任何专利（日期、名字、专利号）:"></el-input>
                        </el-form-item>
                        <el-form-item label="博士论文" prop="phD" style="width: 100%;">
                            <el-input type="textarea" v-model="deleClient.phD"
                                placeholder="是否发表过博士论文（日期、题目、指导老师、研究领域）:"></el-input>
                        </el-form-item>
                        <el-form-item label-width="220px" label="是否因公去过美国/加拿大？" prop="isVisitUC" style="width: 100%;">
                            <el-radio-group v-model="deleClient.isVisitUC">
                                <el-radio :label=1>是</el-radio>
                                <el-radio :label=0>否</el-radio>
                            </el-radio-group>
                            <span>（请列出最近1次出访信息，不记得具体日期，请提供尽量靠近的日期）</span>
                        </el-form-item>
                        <el-form-item label="美国:" prop="usaDate">
                            <el-date-picker v-model="deleClient.usaDate" placeholder="抵达日期" type="date">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="天数:" prop="usaDays">
                            <el-input v-model="deleClient.usaDays" placeholder="停留天数"></el-input>
                        </el-form-item>
                        <el-form-item label="加拿大:" prop="canDate">

                            <el-date-picker v-model="deleClient.canDate" placeholder="抵达日期" type="date">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="天数:" prop="canDays">
                            <el-input v-model="deleClient.canDays" placeholder="停留天数"></el-input>
                        </el-form-item>
                        <el-form-item label-width="220px" label="是否有获批的申根签证 ？" prop="isGetSchengen" style="width: 100%;">
                            <el-radio-group v-model="deleClient.isGetSchengen">
                                <el-radio :label=1>是</el-radio>
                                <el-radio :label=0>否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label-width="220px" label="申根是否在使馆有指纹记录?" prop="isFinger" style="width: 100%;">
                            <el-radio-group v-model="deleClient.isFinger">
                                <el-radio :label=1>是</el-radio>
                                <el-radio :label=0>否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="申根有效期起:" prop="startTime">
                            <el-date-picker v-model="deleClient.startTime" type="date">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="申根有效期止:" prop="endTime">
                            <el-date-picker v-model="deleClient.endTime" type="date">
                            </el-date-picker>
                        </el-form-item>

                        <el-form-item label="申根指纹录入:" prop="fingerDate">
                            <el-date-picker v-model="deleClient.fingerDate" type="date" placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>

                        <el-form-item label-width="220px" label="是否曾获得过因公美国签证？" prop="isUSAVia" style="width: 100%;">
                            <el-radio-group v-model="deleClient.isUSAVia">
                                <el-radio :label=1>是</el-radio>
                                <el-radio :label=0>否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="获得日期:" prop="getUSAVisaDate">
                            <el-date-picker v-model="deleClient.getUSAVisaDate" type="date">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="地点:" prop="getUPPlace">
                            <el-input v-model="deleClient.getUPPlace"></el-input>
                        </el-form-item>
                        <el-form-item label="签证种类:" prop="USAVisaCate">
                            <el-select v-model="deleClient.USAVisaCate" filterable placeholder="请选择">
                                <el-option key="外交签证" label="外交签证" value="外交签证">
                                </el-option>
                                <el-option key="公务签证" label="公务签证" value="公务签证">
                                </el-option>
                                <el-option key="普通签证" label="普通签证" value="普通签证">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="签证编码:" prop="usaVisaCate">
                            <el-input v-model="deleClient.usaVisaCate"></el-input>
                        </el-form-item>
                        <el-form-item label-width="220px" label="是否在使馆留过十指的指纹？" prop="usaFinger" style="width: 100%;">
                            <el-radio-group v-model="deleClient.usaFinger">
                                <el-radio :label=1>是</el-radio>
                                <el-radio :label=0>否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label-width="430px" label="是否曾经被拒签或被拒绝入境美国或在入境时被撤回入境申请？" prop="isRejected"
                            style="width: 100%;">
                            <el-radio-group v-model="deleClient.isRejected">
                                <el-radio :label=1>是</el-radio>
                                <el-radio :label=0>否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="何时:" prop="rejectedDate">
                            <el-date-picker v-model="deleClient.rejectedDate" type="date">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="何地:" prop="rejectedPlace">
                            <el-input v-model="deleClient.rejectedPlace"></el-input>
                        </el-form-item>
                        <el-form-item label="签证种类:" prop="rejectedVisa">
                            <el-select v-model="deleClient.rejectedVisa" filterable placeholder="请选择">
                                <el-option key="外交签证" label="外交签证" value="外交签证">
                                </el-option>
                                <el-option key="公务签证" label="公务签证" value="公务签证">
                                </el-option>
                                <el-option key="普通签证" label="普通签证" value="普通签证">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label-width="220px" label="美国签证是否被吊销过？" prop="isRevoke" style="width: 100%;">
                            <el-radio-group v-model="deleClient.isRevoke">
                                <el-radio :label=1>是</el-radio>
                                <el-radio :label=0>否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label-width="220px" label="护照是否曾经丢失或被盗？" prop="isLose" style="width: 100%;">
                            <el-radio-group v-model="deleClient.isLose">
                                <el-radio :label=1>是</el-radio>
                                <el-radio :label=0>否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="何时:" prop="loseDate">
                            <el-date-picker v-model="deleClient.loseDate" type="date">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="护照编码:" prop="loseCode">
                            <el-input v-model="deleClient.loseCode"></el-input>
                        </el-form-item>
                        <el-form-item label="是否有美国签证" prop="isUSAVisa">
                            <el-radio-group v-model="deleClient.isUSAVisa">
                                <el-radio :label=1>是</el-radio>
                                <el-radio :label=0>否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                </el-form>
            </div>
            <hr style='background-color:#5555; height:1px; border:none;' />
            <div class="tips">
                下列亲属中是否有人已在美国？他们是否是合法永久居民或公民？
            </div>
            <div class="flats-form">
                <el-form :model="deleClient" :rules="rules" ref="deleClient" label-width="100px" class="demo-deleClient"
                    @submit.native.prevent>
                    <div class="citizens-box">
                        <div class="citizens-li">
                            <el-form-item label-width="76px" label="夫/妻" prop="mateUSA">
                                <el-radio-group v-model="deleClient.mateUSA">
                                    <el-radio :label=0>不在美国</el-radio>
                                    <el-radio :label=1>在美国</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="身份:" prop="mateIden">
                                <el-input v-model="deleClient.mateIden"></el-input>
                            </el-form-item>
                        </div>
                        <div class="citizens-li">
                            <el-form-item label-width="136px" label="未婚夫/未婚妻" prop="whusa">
                                <el-radio-group v-model="deleClient.whusa">
                                    <el-radio :label=0>不在美国</el-radio>
                                    <el-radio :label=1>在美国</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="身份:" prop="whIden">
                                <el-input v-model="deleClient.whIden"></el-input>
                            </el-form-item>
                        </div>
                        <div class="citizens-li">
                            <el-form-item label-width="76px" label="父/母" prop="parentUSA">
                                <el-radio-group v-model="deleClient.parentUSA">
                                    <el-radio :label=0>不在美国</el-radio>
                                    <el-radio :label=1>在美国</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="身份:" prop="parentIden">
                                <el-input v-model="deleClient.parentIden"></el-input>
                            </el-form-item>
                        </div>
                        <div class="citizens-li">
                            <el-form-item label-width="106px" label="兄弟/姐妹" prop="broUSA">
                                <el-radio-group v-model="deleClient.broUSA">
                                    <el-radio :label=0>不在美国</el-radio>
                                    <el-radio :label=1>在美国</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="身份:" prop="broIden">
                                <el-input v-model="deleClient.broIden"></el-input>
                            </el-form-item>
                        </div>
                        <div class="citizens-li">
                            <el-form-item label-width="106px" label="儿子/女儿" prop="childUSA">
                                <el-radio-group v-model="deleClient.childUSA">
                                    <el-radio :label=0>不在美国</el-radio>
                                    <el-radio :label=1>在美国</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="身份:" prop="childIden">
                                <el-input v-model="deleClient.childIden"></el-input>
                            </el-form-item>
                        </div>
                        <el-form-item label="慈善机构" prop="social" style="width: 100%;">
                            <el-input type="textarea" v-model="deleClient.social"
                                placeholder="列出所有现在和曾经所属/捐助/工作过的职业协会、社会团体和慈善机构（没有请写“无”）：/捐助/工作过的职业协会、社会团体和慈善机构（没有请写“无”）"></el-input>
                        </el-form-item>
                        <el-form-item label-width="140px" label="是否曾经参军？" prop="isArmy">
                            <el-radio-group v-model="deleClient.isArmy">
                                <el-radio :label=1>是</el-radio>
                                <el-radio :label=0>否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="军事信息" prop="armyState" style="width: 100%;">
                            <el-input type="textarea" v-model="deleClient.armyState"
                                placeholder="如果是，请列出所服役的国家、军种、军衔、军事特长以及服役期限（X年X月X日）"></el-input>
                        </el-form-item>
                    </div>
                </el-form>
            </div>
            <hr style='background-color:#5555; height:1px; border:none;' />
            <div class="plate-box">
                <div class="small-title">
                    <span>工作经历</span>
                </div>
                <div class="tips">
                    <span>请列出过去10年的工作经历（请填写现任公司之前的工作经历，如果没有请写“无”）：</span>
                </div>
                <div>
                    <el-form v-for="(item, w) in workExperience" :key="w" @submit.native.prevent>
                        <div class="foundation-box1">
                            <el-form-item label="公司名称:" prop="company">
                                <el-input v-model="item.company" clearable style="width: 200px;"></el-input>
                            </el-form-item>
                            <el-form-item label="电话:" prop="phone">
                                <el-input v-model="item.phone" clearable style="width: 150px;"></el-input>
                            </el-form-item>
                            <el-form-item label="职务:" prop="job">
                                <el-input v-model="item.job" clearable style="width: 150px;"></el-input>
                            </el-form-item>
                            <el-form-item label="主管名字:" prop="leaderName">
                                <el-input v-model="item.leaderName" clearable style="width: 150px;"></el-input>
                            </el-form-item>
                            <el-form-item label="起始日期:" prop="workStart">
                                <el-date-picker v-model="item.workStart" type="date">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="结束日期:" prop="workEnd">
                                <el-date-picker v-model="item.workEnd" type="date">
                                </el-date-picker>
                            </el-form-item>
                        </div>
                        <div class="foundation-box1">
                            <el-form-item label="公司地址:" prop="companyAddress">
                                <el-input type="textarea" :rows="3" placeholder="请输入内容" style="width: 500px;"
                                    v-model="item.companyAddress"></el-input>
                            </el-form-item>
                            <el-form-item label="工作职责及内容简述:" prop="workState">
                                <el-input type="textarea" :rows="3" placeholder="请输入内容" style="width: 500px;"
                                    v-model="item.workState"></el-input>
                            </el-form-item>
                            <el-form-item style="margin-top: 5%;margin-left: 10%;">
                                <el-button circle icon="el-icon-minus" @click="subworkExperience(w, item.id)"
                                    v-if="w >= 0"></el-button>
                            </el-form-item>
                        </div>
                        <hr style='background-color:#5555; height:1px; border:none;' />
                    </el-form>
                    <div style="text-align: center;">
                        <el-button circle icon="el-icon-plus" @click="workExperienceadd()"></el-button>
                    </div>
                </div>

            </div>
        </div>
        <div class="plate-box">
            <div class="small-title">
                <span>学历信息</span>
            </div>
            <hr style='background-color:#5555; height:1px; border:none;' />
            <div class="tips">
                <span>列出除小学以外的所有教育经历：从高中开始填写</span>

            </div>
            <div>
                <el-form v-for="(item, e) in customerSchool" :key="e" @submit.native.prevent>
                    <div class="foundation-box1">
                        <el-form-item label="学校名称和学历:" prop="school">
                            <el-input v-model="item.school" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="学校地址:" prop="address">
                            <el-input v-model="item.address" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="指导老师:" prop="teacher">
                            <el-input v-model="item.teacher" clearable style="width: 150px;"></el-input>
                        </el-form-item>
                        <el-form-item label="课程或专业:" prop="subject">
                            <el-input v-model="item.subject" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="起始日期:" prop="studyStart">
                            <el-date-picker v-model="item.studyStart" type="date" style="width: 150px;">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="结束日期:" prop="studyEnd">
                            <el-date-picker v-model="item.studyEnd" type="date" style="width: 150px;">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item style="margin-top: 3%;margin-left: 5px;">
                            <el-button circle icon="el-icon-minus" @click="subcustomerSchool(e, item.id)"
                                v-if="e >= 0"></el-button>
                        </el-form-item>
                    </div>
                    <hr style='background-color:#5555; height:1px; border:none;' />
                </el-form>
                <div style="text-align: center;">
                    <el-button circle icon="el-icon-plus" @click="addcustomerSchool()"></el-button>
                </div>
            </div>

        </div>
        <div class="plate-box">
            <div class="small-title">
                <span>提交信息</span>
            </div>
            <el-form :model="deleClient" :rules="rules" ref="deleClient" label-width="100px" class="demo-deleClient"
                @submit.native.prevent>
                <div class="foundation-box">
                    <el-form-item label="费用承担者:" prop="costBearers">
                        <el-input v-model="deleClient.costBearers" placeholder="在外费用承担者"></el-input>
                    </el-form-item>
                    <el-form-item label="经办人:" prop="tableOpName">
                        <el-input v-model="deleClient.tableOpName" placeholder="填表经办人"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话:" prop="tableOpTel">
                        <el-input v-model="deleClient.tableOpTel" placeholder="填表经办人联系电话"></el-input>
                    </el-form-item>
                    <el-form-item label="填表日期:" prop="tableDate">
                        <el-date-picker v-model="deleClient.tableDate" type="date" placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                </div>
            </el-form>
        </div>
        <div>
            <el-button type="primary" @click="submitForm">确定</el-button>
            <el-button @click="resetForm('deleClient')">重置</el-button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            rules: {
                lastName: [
                    { required: true, message: '请输入姓', trigger: 'change' },
                    { min: 1, max: 3, message: '长度在 1 到 3 个字符', trigger: 'change' }
                ],
                firstName: [
                    { required: true, message: '请输入名', trigger: 'change' },
                    { min: 1, max: 3, message: '长度在 1 到 3 个字符', trigger: 'change' }
                ],
                oldName: [{ required: true, message: '请输入曾用名，没有则填写无', trigger: 'change' },],
                phone: [
                    { required: true, message: '请输入移动电话', trigger: 'change' },
                    {
                        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                        message: "请输入正确的手机号码",
                        trigger: "change"
                    }
                ],
                birthDay: [{ required: true, message: '请选择出生日期', trigger: 'change', },],
                party: [{ required: true, message: '请输入党派宗教', trigger: 'change', },],
                sex: [{ required: true, message: '请选择性别', trigger: 'change', },],
                marriage: [{ required: true, message: '请选择婚姻状态', trigger: 'change', }],
                nationality: [{ required: true, message: '请输入国籍', trigger: 'change' },],
                birthCity: [{ required: true, message: '请输入出生城市', trigger: 'change' }],
                birthProvince: [{ required: true, message: '请输入出生省份', trigger: 'change' }],
                highestEducation: [{ required: true, message: '请输入最高学历', trigger: 'change' }],
                tel: [
                    { required: true, message: '请输入固话', trigger: 'change' },
                    {
                        pattern: /0\d{2,3}-\d{7,8}/,
                        message: "请输入正确固话",
                        trigger: "change"
                    }
                ],
                email: [
                    { required: true, message: '请输入邮箱', trigger: 'change' },
                    {
                        pattern: /^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/,
                        message: "请输入正确的邮箱",
                        trigger: "change"
                    }
                ],
                postCodes: [
                    { required: true, message: '请输入邮箱', trigger: 'change' },
                    {
                        pattern: /^[0-9]{6}$/,
                        message: "请输入正确的邮政编码",
                        trigger: "change"
                    }
                ],
                address: [{ required: true, message: '请输入现居住地址', trigger: 'change' }],
                costBearers: [{ required: true, message: '请输入费用承担着', trigger: 'change' }],
                tableOpName: [{ required: true, message: '请输入经办人', trigger: 'change' }],
                tableOpTel: [
                    { required: true, message: '请输入经办人联系方式', trigger: 'change' },
                    {
                        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                        message: "请输入正确的手机号码",
                        trigger: "change"
                    }
                ],
                tableDate: [{ required: true, message: '请输入填表时间', trigger: 'change' }],
            },
            Id: 0,
            token: '',
            userId: 0,
            Status: 0,
            typeStr: '',
            //基础信息
            deleClient: {
                id: 0,
                lastName: '',
                firstName: '',
                oldName: '',
                pinyin: '',
                sex: 0,
                marriage: 0,
                phone: '',
                birthProvince: '',
                birthCity: '',
                birthDay: this.dateFormat(new Date()),
                airType: '',
                seatPref: 0,
                airRemark: '',
                roomType: '',
                roomPref: '',
                tel: '',
                email: '',
                address: '',
                highestEducation: '',
                postCodes: '',
                crmCompanyId: '',
                job: '',
                workState: '',
                workDate: this.dateFormat(new Date()),
                wage: '',
                clientPhone: '',
                clientFax: '',
                clientEmail: '',
                clientLeader: '',
                clientLeaderJob: '',
                isGetSchengen: 0,
                startTime: this.dateFormat(new Date()),
                endTime: this.dateFormat(new Date()),
                isFinger: 0,
                fingerDate: this.dateFormat(new Date()),
                isVisitUC: 0,
                usaDate: this.dateFormat(new Date()),
                usaDays: 0,
                canDate: this.dateFormat(new Date()),
                canDays: 0,
                isUSAVia: 0,
                getUSAVisaDate: this.dateFormat(new Date()),
                getUPPlace: '',
                usaVisaCate: '',
                usaVisaCode: '',
                usaFinger: 0,
                isRejected: 0,
                rejectedDate: this.dateFormat(new Date()),
                rejectedPlace: '',
                rejectedVisa: '',
                isRevoke: 0,
                isLose: 0,
                loseDate: this.dateFormat(new Date()),
                loseCode: '',
                isUSAVisa: 0,
                mateUSA: 0,
                mateIden: '',
                whusa: 0,
                whIden: '',
                parentUSA: 0,
                parentIden: '',
                childUSA: 0,
                childIden: '',
                broUSA: 0,
                broIden: '',
                social: '',
                isArmy: 0,
                armyState: '',
                costBearers: '',
                tableOpName: '',
                tableOpTel: '',
                tableDate: this.dateFormat(new Date()),
                party: '',
                nationality: '',
                weddingDate: this.dateFormat(new Date()),
                divorceDate: this.dateFormat(new Date()),
                mateName: '',
                mateBirthDay: this.dateFormat(new Date()),
                mateBirthCity: '',
                mateBirthCountry: '',
                mateAddress: '',
                mateClient: '',
                mateClientAddress: '',
                mateJob: '',
                visitCountry: '',
                paper: '',
                papent: '',
                phD: '',
                createUserId: this.userId,
                remark: '',
            },
            //证件信息
            customerCerts:
                [
                    {
                        id: 0,
                        dcId: 0,
                        sdId: '',
                        certNo: '',
                        country: '',
                        area: '',
                        targetCountry: '',
                        issueDt: this.dateFormat(new Date()),
                        expiryDt: this.dateFormat(new Date()),
                        idCardAddress: '',
                        createUserId: this.userId,
                        remark: '',
                    }
                ],
            //现就职单位
            customerCompany:
            {
                address: "",
                companyName: "",
                createTime: this.dateFormat(new Date()),
                id: '',
                postCodes: "",
                remark: "",
                userName: "",
            },
            //客户工作经历表
            workExperience: [
                {
                    id: 0,
                    dcId: 0,
                    company: "",
                    companyAddress: "",
                    phone: "",
                    job: "",
                    leaderName: "",
                    workStart: this.dateFormat(new Date()),
                    workEnd: this.dateFormat(new Date()),
                    workState: "",
                    createUserId: this.userId,
                    remark: ""
                }
            ],
            //客户学历表
            customerSchool: [
                {
                    id: 0,
                    dcId: 0,
                    school: '',
                    address: '',
                    teacher: '',
                    education: '',
                    subject: '',
                    studyStart: this.dateFormat(new Date()),
                    studyEnd: this.dateFormat(new Date()),
                    createUserId: this.userId,
                    remark: ''
                }
            ],
            //家庭成员
            customerFamily: [
                {
                    id: 0,
                    dcId: 0,
                    appellation: "",
                    name: "",
                    birthDay: this.dateFormat(new Date()),
                    birthPlace: "",
                    politics: "",
                    client: "",
                    address: "",
                    isEu: 0,
                    nameSnd: "",
                    birthDaySnd: this.dateFormat(new Date()),
                    nationality: "",
                    idCard: "",
                    reletionship: "",
                    isUSA: 0,
                    createUserId: this.userId,
                    remark: ""
                }
            ],
            educationalList: [
                { name: '', age: '' }
            ],
            options: [{
                value: '0',
                label: '父亲'
            }, {
                value: '1',
                label: '母亲'
            }, {
                value: '2',
                label: '儿子'
            }, {
                value: '3',
                label: '女儿'
            }, {
                value: '4',
                label: '妻子'
            }, {
                value: '5',
                label: '丈夫'
            }],
            value: '',
            CompanySelectData: [],//单位数据
            SetData: [],//证件类型数据
        };
    },
    methods: {

        CustomerInfo() {
            var url = "/api/CRM/CustomerInfo"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    Id: this.Id,
                }
            }).then(function (res) {
                console.log(res)

                if (res.data.code == 200) {
                    console.log(res.data.data.deleClient)
                    that.deleClient = res.data.data.deleClient
                    that.customerCompany = res.data.data.customerCompany
                    if (res.data.data.customerCerts != 0) {
                        that.customerCerts = res.data.data.customerCerts
                    }
                    if (res.data.data.customerFamily != 0) {
                        that.customerFamily = res.data.data.customerFamily
                    }
                    if (res.data.data.workExperience != 0) {
                        that.workExperience = res.data.data.workExperience
                    }
                    if (res.data.data.customerSchool != 0) {
                        that.customerSchool = res.data.data.customerSchool
                    }
                }
            }).catch(function (error) {
                that.$message.error("网络错误，请稍后重试");
            });
        },
        CompanySelect() {
            var url = "/api/CRM/GetClientCompanyList"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    PortType: 1,
                }
            }).then(function (res) {
                console.log(res)

                if (res.data.code == 200) {
                    that.CompanySelectData = res.data.data

                }
            }).catch(function (error) {
                that.$message.error("网络错误，请稍后重试");
            });
        },
        companyChange(Id) {
            this.CompanySelectData.forEach((item, index) => {
                if (item.id == Id) {
                    this.customerCompany = {
                        address: item.address,
                        companyName: item.companyName,
                        createTime: item.createTime,
                        id: item.id,
                        postCodes: item.postCodes,
                        remark: item.remark,
                        userName: item.userName,
                    };
                }
            })
            console.log(this.customerCompany)
        },
        QuerySetData() {
            var url = "/api/System/QuerySetData"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    DataType: 57,
                }
            }).then(function (res) {
                console.log(res)

                if (res.data.code == 200) {
                    that.SetData = res.data.data

                }
            }).catch(function (error) {
                that.$message.error("网络错误，请稍后重试");
            });
        },
        submitForm() {
            this.$refs.deleClient.validate((valid) => {
                if (valid) {
                    var that = this
                    that.deleClient.crmCompanyId = that.customerCompany.id
                    that.deleClient.createUserId = that.userId;
                    debugger
                    that.customerFamily.forEach((element, index) => {
                        debugger
                        if (element.name == '' && element.appellation == '') {
                            that.customerFamily.splice(index, 1)
                        } else {
                            element.nameSnd = element.name
                            element.BirthDaySnd = element.birthDay
                            element.dcId = that.Id
                            element.createUserId = that.userId
                        }

                    });
                    that.customerCerts.forEach((element, index) => {
                        if (element.certNo == '' && element.sdId == '') {
                            that.customerCerts.splice(index, 1)
                        }
                        element.dcId = that.Id
                        element.createUserId = that.userId
                    });
                    that.workExperience.forEach((element, index) => {
                        if (element.company == '' && element.companyAddress == '') {
                            that.workExperience.splice(index, 1)
                        }
                        element.dcId = that.Id
                        element.createUserId = that.userId
                    });
                    that.customerSchool.forEach((element, index) => {
                        if (element.school == '' && element.address == '') {
                            that.customerSchool.splice(index, 1)
                        }
                        element.dcId = that.Id
                        element.createUserId = that.userId
                    });

                    var dttaStr = {
                        Status: that.Status,
                        DeleClient: that.deleClient,
                        CustomerFamily: that.customerFamily,
                        CustomerCert: that.customerCerts,
                        WorkExperience: that.workExperience,
                        CustomerSchool: that.customerSchool
                    }
                    console.log(dttaStr)
                    var url = "/api/CRM/EditCustomer"
                    this.$axios({
                        method: 'post',
                        url: url,
                        headers: {
                            Authorization: 'Bearer ' + this.token
                        },
                        data: dttaStr
                    }).then(function (res) {
                        console.log(res)
                        if (res.data.code == 200) {
                            that.$message({
                                message: res.data.msg,
                                type: 'success'
                            });
                            that.loading = true;
                            setTimeout(() => {
                                // that.$router.push('/home/HotelData')
                            }, 3000);
                        } else {
                            that.$message.error(res.data.msg);
                        }
                    }).catch(function (error) {
                        that.$message.error("网络错误，请稍后重试");
                    });
                } else {
                    this.$message.error('请完善基础信息在提交');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        //添加家庭信息
        customerFamilyAdd() {
            this.customerFamily.push({
                id: 0,
                dcId: this.Id,
                appellation: "",
                name: "",
                birthDay: this.dateFormat(new Date()),
                birthPlace: "",
                politics: "",
                client: "",
                address: "",
                isEu: 0,
                nameSnd: "",
                birthDaySnd: this.dateFormat(new Date()),
                nationality: "",
                idCard: "",
                reletionship: "",
                isUSA: 0,
                createUserId: 0,
                remark: ""
            })
        },
        //删除家庭信息
        subcustomerFamilyAdd(index, Id) {
            if (Id != 0) {

                var url = "/api/CRM/DelCustomerFamily"
                var that = this
                this.$axios({
                    method: 'post',
                    url: url,
                    headers: {
                        Authorization: 'Bearer ' + this.token
                    },
                    data: {
                        Id: Id,
                        DeleteUserId: that.userId
                    }
                }).then(function (res) {
                    if (res.data.code == 200) {
                        that.$message({
                            message: '删除家庭成员成功',
                            type: 'success'
                        });
                    } else {
                        that.$message.error('删除失败！');
                    }
                }).catch(function (error) {
                    that.$message.error("网络错误，请稍后重试");
                });
            }
            this.customerFamily.splice(index, 1)
        },
        //添加证件信息
        customerCertsAdd() {
            this.customerCerts.push({
                id: 0,
                dcId: this.Id,
                sdId: '',
                certNo: '',
                country: '',
                area: '',
                targetCountry: '',
                issueDt: this.dateFormat(new Date()),
                expiryDt: this.dateFormat(new Date()),
                idCardAddress: '',
                createUserId: 0,
                remark: '',
            })
        },
        //删除证件信息
        subcustomerCertsAdd(index, Id) {
            if (Id != 0) {

                var url = "/api/CRM/DelCustomerCerts"
                var that = this
                this.$axios({
                    method: 'post',
                    url: url,
                    headers: {
                        Authorization: 'Bearer ' + this.token
                    },
                    data: {
                        Id: Id,
                        DeleteUserId: that.userId
                    }
                }).then(function (res) {
                    console.log(res)

                    if (res.data.code == 200) {
                        that.$message({
                            message: '删除证件成功',
                            type: 'success'
                        });
                    } else {
                        that.$message.error('删除失败！');
                    }

                }).catch(function (error) {
                    that.$message.error("网络错误，请稍后重试");
                });
            }
            this.customerCerts.splice(index, 1)
        },
        //添加工作经历
        workExperienceadd() {
            this.workExperience.push({
                id: 0,
                dcId: 0,
                company: "",
                companyAddress: "",
                phone: "",
                job: "",
                leaderName: "",
                workStart: this.dateFormat(new Date()),
                workEnd: this.dateFormat(new Date()),
                workState: "",
                createUserId: 0,
                remark: ""
            })
        },
        //删除工作经历表
        subworkExperience(index, Id) {
            if (Id != 0) {

                var url = "/api/CRM/DelVisaCustomerCompany"
                var that = this
                this.$axios({
                    method: 'post',
                    url: url,
                    headers: {
                        Authorization: 'Bearer ' + this.token
                    },
                    data: {
                        Id: Id,
                        DeleteUserId: that.userId
                    }
                }).then(function (res) {
                    console.log(res)

                    if (res.data.code == 200) {
                        that.$message({
                            message: '删除证件成功',
                            type: 'success'
                        });
                    } else {
                        that.$message.error('删除失败！');
                    }

                }).catch(function (error) {
                    that.$message.error("网络错误，请稍后重试");
                });
                this.workExperience.splice(index, 1)
            }
        },
        //添加客户学历
        addcustomerSchool() {
            this.customerSchool.push(
                {
                    id: 0,
                    dcId: 0,
                    school: '',
                    address: '',
                    teacher: '',
                    education: '',
                    subject: '',
                    studyStart: this.dateFormat(new Date()),
                    studyEnd: this.dateFormat(new Date()),
                    createUserId: this.userId,
                    remark: ''
                }
            )
        },
        //删除客户学历
        subcustomerSchool(index, Id) {
            if (Id != 0) {

                var url = "/api/CRM/DelCustomerSchool"
                var that = this
                this.$axios({
                    method: 'post',
                    url: url,
                    headers: {
                        Authorization: 'Bearer ' + this.token
                    },
                    data: {
                        Id: Id,
                        DeleteUserId: that.userId
                    }
                }).then(function (res) {
                    if (res.data.code == 200) {
                        that.$message({
                            message: '删除证件成功',
                            type: 'success'
                        });
                    } else {
                        that.$message.error('删除失败！');
                    }
                }).catch(function (error) {
                    that.$message.error("网络错误，请稍后重试");
                });
            }
            this.customerSchool.splice(index, 1)
        }
    },
    mounted() {
        this.token = JSON.parse(localStorage.getItem('userinif')).token;
        this.userId = JSON.parse(localStorage.getItem('userinif')).userInfo.userId
        this.Id = this.$route.query.id
        if (this.Id == 0 || this.Id == undefined) {
            this.Status = 1;
            this.Id = 0;
            this.typeStr = "添加客户信息"
        } else {
            this.CustomerInfo();

            this.typeStr = "修改客户信息"
            this.Status = 2
        }
        this.CompanySelect();
        this.QuerySetData();
    }
}
</script>
<style>
.plate-box {
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
    margin-bottom: 20px;
}

.visaedit-title {
    display: flex;
    font-size: 17px;
    font-weight: 600;
    color: #555;
    margin-top: 8px;
    margin-bottom: 2px;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.tips {
    margin-bottom: 10px;
    font-size: 12px;
    color: #555;
}

.foundation-box {
    display: flex;
    flex-wrap: wrap;
}

.foundation-box1 {
    display: flex;
    flex-wrap: wrap;
}

.foundation-box .el-form-item {
    width: 33%;
}

.small-title {
    font-size: 14px;
    font-weight: 600;
    color: #555;
    margin: 18px 0 25px;
}

.small-title>span {
    display: inline;
    padding: 5px 10px;
    box-shadow: 0 0 5px #0005;
    border-radius: 5px;
}

.member-li {
    display: flex;
    align-items: end;
    justify-content: space-between;
}

.member-li>.el-form-item {
    width: 10%;
}

.visaedit-box .el-form-item .el-form-item__content span {
    color: #606266;
}

.citizens-box {
    display: flex;
    flex-wrap: wrap;
}

.citizens-box>.el-form-item {
    width: 25%;
}

.citizens-box>.citizens-li {
    display: flex;
    width: 50%;
}

.textClass {
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 14px;
    color: #606266;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.el-date-editor.el-input,
.el-date-editor.el-input__inner {
    width: 100%;
}
</style>