| | |
| | | ></el-button> |
| | | </el-backtop> |
| | | <h2 style="font-size:30px;padding-top:0px">婚姻状况登记表</h2> |
| | | <el-row :gutter="10" class="mb8"> |
| | | |
| | | <el-col :span="1.5"> |
| | | <el-button |
| | | type="warning" |
| | | plain |
| | | icon="el-icon-download" |
| | | size="mini" |
| | | @click="handleExport" |
| | | v-hasPermi="['family:note:export']" |
| | | >导出</el-button> |
| | | </el-col> |
| | | <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> |
| | | </el-row> |
| | | <el-divider /> |
| | | |
| | | <!-- 基本信息--> |
| | | <h2 style="font-size:21px">基本情况</h2> |
| | | <el-container> |
| | | <div style="padding-left:0px" > |
| | | <div style="padding-left:0px;width: 28%;" > |
| | | <el-container > |
| | | <el-col > |
| | | <el-form ref="elForm" :model="marryList" :rules="rules" size="medium" label-position="left" |
| | | v-loading="loading" :data="marryList" @selection-change="handleSelectionChange" > |
| | | <el-row :span="16"> |
| | | <el-form-item label="姓名" prop="name" label-width="40px"> |
| | | <el-form-item label="姓名" prop="name" label-width="50px"> |
| | | <el-input v-model="marryList.name " placeholder="" clearable :style="{width: '100%'}" :disabled="dsb"> |
| | | </el-input> |
| | | </el-form-item> |
| | | </el-row> |
| | | <el-row :span="16"> |
| | | <el-form-item label="出生日期" prop="birthday" label-width="70px"> |
| | | <el-input v-model="marryList.birthday" placeholder="" type="date" clearable :style="{width: '100%'}" :disabled="dsb"> |
| | | </el-input> |
| | | <el-form-item label="出生日期" prop="birthday" label-width="75px"> |
| | | <!-- <el-input v-model="marryList.birthday" placeholder="" type="date" clearable :style="{width: '100%'}" :disabled="dsb"> |
| | | </el-input> --> |
| | | <el-date-picker v-model="marryList.birthday" |
| | | type="date" |
| | | placeholder="请选择日期" |
| | | :editable="false" |
| | | :clearable="false" |
| | | :style="{width: '100%'}" |
| | | :disabled="dsb" value-format="yyyy-MM-dd"></el-date-picker> |
| | | </el-form-item> |
| | | </el-row> |
| | | <el-row :span="16"> |
| | | <el-form-item label="身份证号码" prop="id" label-width="85px"> |
| | | <el-form-item label="身份证号码" prop="id" label-width="95px"> |
| | | <el-input v-model="marryList.id" placeholder="" clearable :style="{width: '100%'}" :disabled="dsb"> |
| | | </el-input> |
| | | </el-form-item> |
| | | </el-row> |
| | | <el-row :span="16"> |
| | | <el-form-item label="婚姻状况" prop="marryStatus" label-width="70px"> |
| | | <el-form-item label="婚姻状况" prop="marryStatus" label-width="80px" > |
| | | <template v-if="!isEditing"> |
| | | <el-input v-if="marryList.marryStatus===0" placeholder="未婚" style="" :disabled="dsb"></el-input> |
| | | <el-input v-if="marryList.marryStatus===1" placeholder="初婚" :disabled="dsb"></el-input> |
| | |
| | | |
| | | </template> |
| | | <template v-else> |
| | | <el-select v-model="mrs" placeholder="请选择婚姻状态" clearable :style="{width: '100%'}"> |
| | | <el-select v-model="mrs" placeholder="请选择婚姻状态" clearable :style="{width: '100%'}" @change="handleMarryStatusChange"> |
| | | <el-option label="未婚" value='0'></el-option> |
| | | <el-option label="初婚" value='1'></el-option> |
| | | <el-option label="离婚" value='2'></el-option> |
| | |
| | | </el-col> |
| | | </el-container> |
| | | </div> |
| | | <div style="padding-left:200px"> |
| | | <div style="width: 35%;padding-left: 100px;"> |
| | | <el-container> |
| | | <el-col v-loading="loading" :data="marryList" @selection-change="handleSelectionChange"> |
| | | <el-form ref="elForm" :model="marryList" :rules="rules" size="medium" label-position="left"> |
| | |
| | | </el-row> |
| | | <el-row :span="16"> |
| | | <el-form-item label="结婚时间" prop="marryTime" label-width="70px"> |
| | | <el-input v-model="marryList.marryTime" placeholder="" type="date" clearable :style="{width: '100%'}" :disabled="dsb"> |
| | | </el-input> |
| | | <el-date-picker v-model="marryList.marryTime" type="date" placeholder="请选择日期" :editable="false" :clearable="false" :style="{width: '100%'}" :disabled="dsb" value-format="yyyy-MM-dd"> |
| | | </el-date-picker> |
| | | </el-form-item> |
| | | </el-row> |
| | | </el-form> |
| | |
| | | <el-container > |
| | | |
| | | |
| | | <el-row > |
| | | <el-button |
| | | type="primary" |
| | | @click="handleEdit()" |
| | | v-if="isShow" |
| | | v-hasPermi="['system:role:edit']" |
| | | >编辑</el-button> |
| | | <el-button v-if="isShow_2" type="primary" @click="submitForm" :disabled="dsb">完成</el-button> |
| | | <br> |
| | | <el-row :gutter="10" class="mb8"> |
| | | <el-col > |
| | | <el-button |
| | | plain |
| | | @click="handleEdit()" |
| | | style="width: 80px;height: 32px;background: #E0EEFE;" |
| | | v-if="isShow" |
| | | v-hasPermi="['system:role:edit']" |
| | | >编辑</el-button> |
| | | <el-button v-if="isShow_2" style="width: 80px;height: 32px;background: #E0EEFE;" @click="submitForm" :disabled="dsb">完成</el-button> |
| | | <br> |
| | | |
| | | </el-col> |
| | | |
| | | <el-col style="padding-top: 10px;"> |
| | | <el-button |
| | | plain |
| | | style="width: 80px;height: 32px;background: #D2F3E0;" |
| | | @click="handleExport" |
| | | v-hasPermi="['family:note:export']" |
| | | >导出</el-button></el-col> |
| | | |
| | | </el-row> |
| | | |
| | |
| | | </el-container> |
| | | <h2 style="font-size:16px " >配偶情况</h2> |
| | | <el-container> |
| | | <div style="padding-top:15px" > |
| | | <div style="padding-top:15px;width: 28%;" > |
| | | <el-container > |
| | | <el-col > |
| | | <el-form ref="elForm" :model="marryList" :rules="rules" size="medium" label-position="left" |
| | |
| | | </el-row> |
| | | <el-row :span="16"> |
| | | <el-form-item label="出生日期" prop="spouseBirthday" label-width="70px"> |
| | | <el-input v-model="marryList.spouseBirthday" placeholder="" type="date" clearable :style="{width: '100%'}" :disabled="dsb"> |
| | | </el-input> |
| | | <el-date-picker v-model="marryList.spouseBirthday" type="date" placeholder="请选择日期" :editable="false" :clearable="false" :style="{width: '100%'}" :disabled="dsb" value-format="yyyy-MM-dd"> |
| | | </el-date-picker> |
| | | </el-form-item> |
| | | </el-row> |
| | | <el-row :span="16"> |
| | |
| | | </el-col> |
| | | </el-container> |
| | | </div> |
| | | <div style="padding-left:200px;padding-top:15px"> |
| | | <div style="padding-left:100px;padding-top:15px;width: 30%;"> |
| | | <el-container> |
| | | <el-col v-loading="loading" :data="marryList" @selection-change="handleSelectionChange"> |
| | | <el-form ref="elForm" :model="marryList" :rules="rules" size="medium" label-position="left"> |
| | |
| | | </el-row> |
| | | <el-row :span="16"> |
| | | <el-form-item label="结婚时间" prop="spouseMarryTime" label-width="70px"> |
| | | <el-input v-model="marryList.spouseMarryTime" placeholder="" type="date" clearable :style="{width: '100%'}" :disabled="dsb"> |
| | | </el-input> |
| | | <el-date-picker v-model="marryList.spouseMarryTime" type="date" placeholder="请选择日期" :editable="false" :clearable="false" :style="{width: '100%'}" :disabled="dsb" value-format="yyyy-MM-dd"> |
| | | </el-date-picker> |
| | | </el-form-item> |
| | | </el-row> |
| | | </el-form> |
| | |
| | | <!-- </el-dialog> self:user:export--> |
| | | </el-container> |
| | | |
| | | <div> |
| | | <div v-if="showOldSpouse"> |
| | | <el-collapse v-model="activeNames" @change="handleChange"> |
| | | |
| | | <el-collapse-item name="1" > |
| | |
| | | <el-table-column label="出生日期" prop="birthday" sortable width="150" align="center" > |
| | | <template slot-scope="scope"> |
| | | <template v-if="!scope.row.isEdit">{{ scope.row.birthday }}</template> |
| | | <template v-else><el-input v-model="scope.row.birthday" type="date" placeholder="选择日期"> |
| | | </el-input></template> |
| | | <template v-else><el-date-picker v-model="scope.row.birthday" type="date" placeholder="请选择日期" :editable="false" :clearable="false" :style="{width: '100%'}" value-format="yyyy-MM-dd"> |
| | | </el-date-picker></template> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="户籍地址" prop="address" sortable width="180" align="center" > |
| | |
| | | <el-table-column label="结婚时间" prop="marryTime" sortable width="150" align="center" > |
| | | <template slot-scope="scope"> |
| | | <template v-if="!scope.row.isEdit">{{ scope.row.marryTime }}</template> |
| | | <template v-else><el-input v-model="scope.row.marryTime" type="date" placeholder="选择日期"> |
| | | </el-input></template> |
| | | <template v-else><el-date-picker v-model="scope.row.marryTime" type="date" placeholder="请选择日期" :editable="false" :clearable="false" :style="{width: '100%'}" value-format="yyyy-MM-dd"> |
| | | </el-date-picker></template> |
| | | </template> |
| | | </el-table-column> |
| | | <!-- 操作 --> |
| | |
| | | |
| | | <el-row :span="16" > |
| | | <el-form-item label="领证时间" prop="handbookTime" label-width="70px"> |
| | | <el-input v-model="marryList.handbookTime " placeholder="" type="date" clearable :style="{width: '100%'}" :disabled="dsb"> |
| | | </el-input> |
| | | <el-date-picker v-model="marryList.handbookTime" type="date" placeholder="请选择日期" :editable="false" :clearable="false" :style="{width: '100%'}" :disabled="dsb" value-format="yyyy-MM-dd"> |
| | | </el-date-picker> |
| | | </el-form-item> |
| | | </el-row> |
| | | <el-row :span="16"> |
| | | <el-form-item label="领证时间" prop="oneBornTime" label-width="70px"> |
| | | <el-input v-model="marryList.oneBornTime" placeholder="" type="date" clearable :style="{width: '100%'}" :disabled="dsb"> |
| | | </el-input> |
| | | <el-date-picker v-model="marryList.oneBornTime" type="date" placeholder="请选择日期" :editable="false" :clearable="false" :style="{width: '100%'}" :disabled="dsb" value-format="yyyy-MM-dd"> |
| | | </el-date-picker> |
| | | </el-form-item> |
| | | </el-row> |
| | | |
| | |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="出生日期" prop="birthday"> |
| | | <el-input |
| | | v-model='formDat.birthday' |
| | | type='date' |
| | | placeholder='选择日期' |
| | | ></el-input> |
| | | <el-date-picker v-model="formDat.birthday" type="date" placeholder="请选择日期" :editable="false" :clearable="false" :style="{width: '100%'}" value-format="yyyy-MM-dd"> |
| | | </el-date-picker> |
| | | </el-form-item> |
| | | <el-form-item label="民族" prop="nation"> |
| | | <el-input v-model="formDat.nation" placeholder="请输入民族" clearable :style="{width: '100%'}" > |
| | |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="结婚时间" prop="marryTime"> |
| | | <el-input |
| | | v-model='formDat.marryTime' |
| | | type='date' |
| | | placeholder='选择日期' |
| | | ></el-input> |
| | | <el-date-picker v-model="formDat.marryTime" type="date" placeholder="请选择日期" :editable="false" :clearable="false" :style="{width: '100%'}" value-format="yyyy-MM-dd"> |
| | | </el-date-picker> |
| | | </el-form-item> |
| | | |
| | | |
| | |
| | | data() { |
| | | return { |
| | | |
| | | showOldSpouse:false,//显示前任信息 |
| | | // 遮罩层 |
| | | disabled: false, |
| | | isEditing:false, |
| | |
| | | }, |
| | | fit:['fill'], |
| | | |
| | | oldSpouseList:{}, |
| | | //下拉实现 |
| | | activeNames:['1'], |
| | | // 弹出层标题 |
| | |
| | | btn:false, |
| | | isShow:true, |
| | | isShow_2:false, |
| | | oldSpouseList:undefined, |
| | | oldSpouseList:{ |
| | | name:undefined, |
| | | sex:undefined, |
| | |
| | | }, |
| | | // 表单校验 |
| | | rules: { |
| | | |
| | | id: [{ |
| | | required: true, |
| | | message: '请输入身份证号码', |
| | | trigger: 'blur' |
| | | }], |
| | | name: [{ |
| | | required: true, |
| | | message: '请输入姓名', |
| | | trigger: 'blur' |
| | | }], |
| | | birthday: [{ |
| | | // required: true, |
| | | message: '请选择日期', |
| | | trigger: 'change' |
| | | }], |
| | | marryStatus: [{ |
| | | required: true, |
| | | message: '请选择婚姻状况', |
| | | trigger: 'change' |
| | | }], |
| | | marryTime: [{ |
| | | // required: true, |
| | | message: '请选择结婚时间', |
| | | trigger: 'change' |
| | | }], |
| | | |
| | | }, |
| | | typeOptions: [], |
| | | typeOptions: [ { |
| | | value: '女', |
| | | label: '女', |
| | |
| | | this.getList() |
| | | }, |
| | | methods: { |
| | | |
| | | handleMarryStatusChange() { |
| | | // 判断当前选中的婚姻状态是否为再婚 |
| | | if (this.mrs === '3') { |
| | | this.showOldSpouse = true; |
| | | } else { |
| | | this.showOldSpouse = false; |
| | | } |
| | | |
| | | }, |
| | | |
| | | //性别 |
| | | getSrc1(sex) { |
| | | if (sex === '女') { |
| | |
| | | else{ |
| | | this.marryList = response.data; |
| | | this.oldSpouseList = this.marryList.oldSpouseList; |
| | | this.loading = false; |
| | | console.log(111) |
| | | console.log(this.oldSpouseList) |
| | | console.log("信息") |
| | | console.log(this.marryList.marryStatus); |
| | | if(this.marryList.marryStatus===3){ |
| | | this.showOldSpouse = true; |
| | | } else{ |
| | | this.showOldSpouse = false; |
| | | } |
| | | this.loading = false; |
| | | |
| | | } |
| | | |
| | | } |