<template>
|
<div class="app-container" >
|
<div class="wrapper" style="overflow: auto;">
|
<div id="building" v-show="personInfos[1]">
|
<el-form ref="elForm" :model="personInfos" :rules="rules" size="medium" label-position="center" label-width="100px">
|
<el-container>
|
<div style="padding-left:30px;padding-top: 50px">
|
<el-col :span="6" :data="personInfos">
|
<div class="block" :model="personInfos" >
|
<el-col v-model="personInfos[0].url" prop="url">
|
<el-avatar shape="square" :size=200 >
|
<el-image
|
:src="'http://47.93.189.255:8080/'+ personInfos[0].url"
|
style="width: 100%;height: 100%;"
|
></el-image>
|
</el-avatar>
|
</el-col>
|
</div>
|
</el-col>
|
</div>
|
<div style="padding-left:30px;padding-top: 15px">
|
<el-col>
|
<el-row :span="8">
|
<el-form-item label="姓名" prop="nickName" label-width="50px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
|
<el-input v-model="personInfos[0].nickName" placeholder="请输入姓名" clearable :style="{width: '100%'}" :disabled="dsb">
|
</el-input>
|
</el-form-item>
|
</el-row>
|
<el-row :span="8">
|
<el-form-item label="身份" prop="identity" label-width="50px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
|
<el-input v-model="personInfos[0].identity" placeholder="请输入身份" clearable :style="{width: '100%'}" :disabled="dsb">
|
</el-input>
|
</el-form-item>
|
</el-row>
|
<el-row :span="8">
|
<el-form-item label="曾用名" prop="oldName" label-width="68px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
|
<el-input v-model="personInfos[0].oldName" placeholder="请输入曾用名" clearable :style="{width: '100%'}" :disabled="dsb">
|
</el-input>
|
</el-form-item>
|
</el-row>
|
<el-row :span="8">
|
<el-form-item label="生肖" prop="shengXiao" label-width="50px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
|
<el-input v-model="personInfos[0].shengXiao" placeholder="请输入生肖" clearable :style="{width: '100%'}" :disabled="dsb">
|
</el-input>
|
</el-form-item>
|
</el-row>
|
<el-row :span="8">
|
<el-form-item label="星座" prop="constellation" label-width="50px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
|
<el-input v-model="personInfos[0].constellation" placeholder="请输入星座" clearable :style="{width: '100%'}" :disabled="dsb">
|
</el-input>
|
</el-form-item>
|
</el-row>
|
</el-col>
|
</div>
|
<div style="padding-left:30px;padding-top: 15px">
|
<el-col>
|
<el-row :span="8">
|
<el-form-item label="性别" prop="sex" label-width="45px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
|
<el-input v-model="personInfos[0].sex === 1 ? '男':'女'" placeholder="请输入性别" clearable :style="{width: '100%'}" :disabled="dsb"></el-input>
|
</el-form-item>
|
</el-row>
|
<el-row :span="8">
|
<el-form-item label="民族" prop="nation" label-width="50px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
|
<el-input v-model="personInfos[0].nation" placeholder="请输入民族" clearable :style="{width: '100%'}" :disabled="dsb">
|
</el-input>
|
</el-form-item>
|
</el-row>
|
<el-row :span="8">
|
<el-form-item label="联系方式" prop="phoneNumber" label-width="68px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
|
<el-input v-model="personInfos[0].phoneNumber" placeholder="请输入联系方式" clearable :style="{width: '100%'}" :disabled="dsb">
|
</el-input>
|
</el-form-item>
|
</el-row>
|
<el-row :span="8">
|
<el-form-item label="微信号" prop="wxNo" label-width="68px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
|
<el-input v-model="personInfos[0].wxNo" placeholder="请输入微信号" clearable :style="{width: '100%'}" :disabled="dsb">
|
</el-input>
|
</el-form-item>
|
</el-row>
|
<el-row :span="8">
|
<el-form-item label="单位" prop="unit" label-width="68px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
|
<el-input v-model="personInfos[0].unit" placeholder="请输入单位" clearable :style="{width: '100%'}" :disabled="dsb">
|
</el-input>
|
</el-form-item>
|
</el-row>
|
</el-col>
|
</div>
|
<div style="padding-left:30px;padding-top: 15px">
|
<el-col>
|
<el-row :span="8">
|
<el-form-item label="婚姻状况" prop="maritalStatus" label-width="68px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
|
<el-input v-model="personInfos[0].maritalStatus === 1 ? '已婚':'未婚'" placeholder="请输入婚姻状况" clearable :style="{width: '100%'}" :disabled="dsb"></el-input>
|
</el-form-item>
|
</el-row>
|
<el-row :span="8">
|
<el-form-item label="配偶" prop="nickName" label-width="50px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
|
<el-input v-model="personInfos[1].nickName" placeholder="请输入配偶" clearable :style="{width: '100%'}" :disabled="dsb">
|
</el-input>
|
</el-form-item>
|
</el-row>
|
<el-row :span="8">
|
<el-form-item label="户籍地址" prop="locationAddress" label-width="68px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
|
<el-input v-model="personInfos[0].locationAddress" placeholder="请输入户籍地址" clearable :style="{width: '100%'}" :disabled="dsb">
|
</el-input>
|
</el-form-item>
|
</el-row>
|
<el-row :span="8">
|
<el-form-item label="常住地址" prop="alwaysAddress" label-width="68px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
|
<el-input v-model="personInfos[0].alwaysAddress" placeholder="请输入常住地址" clearable :style="{width: '100%'}" :disabled="dsb">
|
</el-input>
|
</el-form-item>
|
</el-row>
|
<el-row :span="8">
|
<el-form-item label="职务职称" prop="position" label-width="68px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
|
<el-input v-model="personInfos[0].position" placeholder="请输入职务职称" clearable :style="{width: '100%'}" :disabled="dsb">
|
</el-input>
|
</el-form-item>
|
</el-row>
|
</el-col>
|
</div>
|
</el-container>
|
<el-divider />
|
<el-container >
|
<div style="padding-left:30px;padding-top: 10px">
|
<el-col>
|
<el-row :span="8">
|
<el-form-item label="姓名" prop="nickName" label-width="50px" style="background:#D8E6F5;border-radius: 7px 7px 7px 7px;opacity: 1;" >
|
<el-input v-model="personInfos[1].nickName" placeholder="请输入姓名" clearable :style="{width: '100%'}" :disabled="dsb">
|
</el-input>
|
</el-form-item>
|
</el-row>
|
<el-row :span="8">
|
<el-form-item label="身份" prop="identity" label-width="50px" style="background: #D8E6F5;border-radius: 7px 7px 7px 7px;opacity: 1;">
|
<el-input v-model="personInfos[1].identity" placeholder="请输入身份" clearable :style="{width: '100%'}" :disabled="dsb">
|
</el-input>
|
</el-form-item>
|
</el-row>
|
<el-row :span="8">
|
<el-form-item label="曾用名" prop="oldName" label-width="68px" style="background: #D8E6F5;border-radius: 7px 7px 7px 7px;opacity: 1;">
|
<el-input v-model="personInfos[1].oldName" placeholder="请输入曾用名" clearable :style="{width: '100%'}" :disabled="dsb">
|
</el-input>
|
</el-form-item>
|
</el-row>
|
<el-row :span="8">
|
<el-form-item label="生肖" prop="shengXiao" label-width="50px" style="background: #D8E6F5;border-radius: 7px 7px 7px 7px;opacity: 1;">
|
<el-input v-model="personInfos[1].shengXiao" placeholder="请输入生肖" clearable :style="{width: '100%'}" :disabled="dsb">
|
</el-input>
|
</el-form-item>
|
</el-row>
|
<el-row :span="8">
|
<el-form-item label="星座" prop="constellation" label-width="50px" style="background: #D8E6F5;border-radius: 7px 7px 7px 7px;opacity: 1;">
|
<el-input v-model="personInfos[1].constellation" placeholder="请输入星座" clearable :style="{width: '100%'}" :disabled="dsb">
|
</el-input>
|
</el-form-item>
|
</el-row>
|
</el-col>
|
</div>
|
<div style="padding-left:30px;padding-top: 10px">
|
<el-col>
|
<el-row :span="8">
|
<el-form-item label="性别" prop="sex" label-width="45px" style="background:#D8E6F5;border-radius: 7px 7px 7px 7px;opacity: 1;">
|
<el-input v-model="personInfos[1].sex=== 1 ? '男':'女'" placeholder="请输入性别" clearable :style="{width: '100%'}" :disabled="dsb"></el-input>
|
</el-form-item>
|
</el-row>
|
<el-row :span="8">
|
<el-form-item label="民族" prop="nation" label-width="50px" style="background: #D8E6F5;border-radius: 7px 7px 7px 7px;opacity: 1;">
|
<el-input v-model="personInfos[1].nation" placeholder="请输入民族" clearable :style="{width: '100%'}" :disabled="dsb">
|
</el-input>
|
</el-form-item>
|
</el-row>
|
<el-row :span="8">
|
<el-form-item label="联系方式" prop="phoneNumber" label-width="68px" style="background:#D8E6F5;border-radius: 7px 7px 7px 7px;opacity: 1;">
|
<el-input v-model="personInfos[1].phoneNumber" placeholder="请输入联系方式" clearable :style="{width: '100%'}" :disabled="dsb">
|
</el-input>
|
</el-form-item>
|
</el-row>
|
<el-row :span="8">
|
<el-form-item label="微信号" prop="wxNo" label-width="68px" style="background: #D8E6F5;border-radius: 7px 7px 7px 7px;opacity: 1;">
|
<el-input v-model="personInfos[1].wxNo" placeholder="请输入微信号" clearable :style="{width: '100%'}" :disabled="dsb">
|
</el-input>
|
</el-form-item>
|
</el-row>
|
<el-row :span="8">
|
<el-form-item label="单位" prop="unit" label-width="68px" style="background:#D8E6F5;border-radius: 7px 7px 7px 7px;opacity: 1;">
|
<el-input v-model="personInfos[1].unit" placeholder="请输入单位" clearable :style="{width: '100%'}" :disabled="dsb">
|
</el-input>
|
</el-form-item>
|
</el-row>
|
</el-col>
|
</div>
|
<div style="padding-left:30px;padding-top: 10px">
|
<el-col>
|
<el-row :span="8">
|
<el-form-item label="婚姻状况" prop="maritalStatus" label-width="68px" style="background:#D8E6F5;border-radius: 7px 7px 7px 7px;opacity: 1;">
|
<el-input v-model="personInfos[1].maritalStatus === 1 ? '已婚':'未婚'" placeholder="请输入婚姻状况" clearable :style="{width: '100%'}" :disabled="dsb"></el-input>
|
</el-form-item>
|
</el-row>
|
<el-row :span="8">
|
<el-form-item label="配偶" prop="nickName" label-width="50px" style="background:#D8E6F5;border-radius: 7px 7px 7px 7px;opacity: 1;">
|
<el-input v-model="personInfos[0].nickName" placeholder="请输入配偶" clearable :style="{width: '100%'}" :disabled="dsb">
|
</el-input>
|
</el-form-item>
|
</el-row>
|
<el-row :span="8">
|
<el-form-item label="户籍地址" prop="locationAddress" label-width="68px" style="background:#D8E6F5;border-radius: 7px 7px 7px 7px;opacity: 1;">
|
<el-input v-model="personInfos[1].locationAddress" placeholder="请输入户籍地址" clearable :style="{width: '100%'}" :disabled="dsb">
|
</el-input>
|
</el-form-item>
|
</el-row>
|
<el-row :span="8">
|
<el-form-item label="常住地址" prop="alwaysAddress" label-width="68px" style="background: #D8E6F5;border-radius: 7px 7px 7px 7px;opacity: 1;">
|
<el-input v-model="personInfos[1].alwaysAddress" placeholder="请输入常住地址" clearable :style="{width: '100%'}" :disabled="dsb">
|
</el-input>
|
</el-form-item>
|
</el-row>
|
<el-row :span="8">
|
<el-form-item label="职务职称" prop="position" label-width="68px" style="background:#D8E6F5;border-radius: 7px 7px 7px 7px;opacity: 1;">
|
<el-input v-model="personInfos[1].position" placeholder="请输入职务职称" clearable :style="{width: '100%'}" :disabled="dsb">
|
</el-input>
|
</el-form-item>
|
</el-row>
|
</el-col>
|
</div>
|
<div style="padding-left:30px;padding-top: 45px">
|
<el-container>
|
<el-col :span="6" :data="personInfos">
|
<div class="block" :model="personInfos" >
|
<el-col v-model="personInfos[1].url" prop="url">
|
<el-avatar shape="square" :size=200 >
|
<el-image
|
:src="'http://47.93.189.255:8080/'+ personInfos[1].url"
|
style="width: 100%;height: 100%;"
|
></el-image>
|
</el-avatar>
|
</el-col>
|
</div>
|
</el-col>
|
</el-container>
|
</div>
|
</el-container>
|
</el-form>
|
</div>
|
|
<div id="building2" v-show="!personInfos[1]">
|
<el-form ref="elForm" :model="personInfo1" :rules="rules" size="medium" label-position="center" label-width="100px">
|
<el-container>
|
<div style="padding-left:30px;padding-top: 50px">
|
<el-container>
|
<el-col :span="6" :data="personInfo1">
|
<div class="block" :model="personInfo1" >
|
<el-col v-model="personInfo1.url" prop="url">
|
<el-avatar shape="square" :size=200 >
|
<el-image
|
:src="'http://47.93.189.255:8080/'+ personInfo1.url"
|
style="width: 100%;height: 100%;"
|
></el-image>
|
</el-avatar>
|
</el-col>
|
</div>
|
</el-col>
|
</el-container>
|
</div>
|
<div style="padding-left:30px;padding-top: 15px">
|
<el-container>
|
<el-col>
|
<el-row :span="8">
|
<el-form-item label="姓名" prop="nickName" label-width="50px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
|
<el-input v-model="personInfo1.nickName" placeholder="请输入姓名" clearable :style="{width: '100%'}" :disabled="dsb">
|
</el-input>
|
</el-form-item>
|
</el-row>
|
<el-row :span="8">
|
<el-form-item label="身份" prop="identity" label-width="50px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
|
<el-input v-model="personInfo1.identity" placeholder="请输入身份" clearable :style="{width: '100%'}" :disabled="dsb">
|
</el-input>
|
</el-form-item>
|
</el-row>
|
<el-row :span="8">
|
<el-form-item label="曾用名" prop="oldName" label-width="68px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
|
<el-input v-model="personInfo1.oldName" placeholder="请输入曾用名" clearable :style="{width: '100%'}" :disabled="dsb">
|
</el-input>
|
</el-form-item>
|
</el-row>
|
<el-row :span="8">
|
<el-form-item label="生肖" prop="shengXiao" label-width="50px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
|
<el-input v-model="personInfo1.shengXiao" placeholder="请输入生肖" clearable :style="{width: '100%'}" :disabled="dsb">
|
</el-input>
|
</el-form-item>
|
</el-row>
|
<el-row :span="8">
|
<el-form-item label="星座" prop="constellation" label-width="50px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
|
<el-input v-model="personInfo1.constellation" placeholder="请输入星座" clearable :style="{width: '100%'}" :disabled="dsb">
|
</el-input>
|
</el-form-item>
|
</el-row>
|
|
</el-col>
|
</el-container>
|
</div>
|
<div style="padding-left:30px;padding-top: 15px">
|
<el-container>
|
<el-col>
|
<el-row :span="8">
|
<el-form-item label="性别" prop="sex" label-width="45px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
|
<el-input v-model="personInfo1.sex === 1 ? '男':'女'" placeholder="请输入性别" clearable :style="{width: '100%'}" :disabled="dsb"></el-input>
|
</el-form-item>
|
</el-row>
|
<el-row :span="8">
|
<el-form-item label="民族" prop="nation" label-width="50px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
|
<el-input v-model="personInfo1.nation" placeholder="请输入民族" clearable :style="{width: '100%'}" :disabled="dsb">
|
</el-input>
|
</el-form-item>
|
</el-row>
|
<el-row :span="8">
|
<el-form-item label="联系方式" prop="phoneNumber" label-width="68px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
|
<el-input v-model="personInfo1.phoneNumber" placeholder="请输入联系方式" clearable :style="{width: '100%'}" :disabled="dsb">
|
</el-input>
|
</el-form-item>
|
</el-row>
|
<el-row :span="8">
|
<el-form-item label="微信号" prop="wxNo" label-width="68px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
|
<el-input v-model="personInfo1.wxNo" placeholder="请输入微信号" clearable :style="{width: '100%'}" :disabled="dsb">
|
</el-input>
|
</el-form-item>
|
</el-row>
|
<el-row :span="8">
|
<el-form-item label="单位" prop="unit" label-width="68px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
|
<el-input v-model="personInfo1.unit" placeholder="请输入单位" clearable :style="{width: '100%'}" :disabled="dsb">
|
</el-input>
|
</el-form-item>
|
</el-row>
|
</el-col>
|
</el-container>
|
</div>
|
<div style="padding-left:30px;padding-top: 15px">
|
<el-container>
|
<el-col>
|
<el-row :span="8">
|
<el-form-item label="婚姻状况" prop="maritalStatus" label-width="68px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
|
<el-input v-model="personInfo1.maritalStatus === 1 ? '已婚':'未婚'" placeholder="请输入婚姻状况" clearable :style="{width: '100%'}" :disabled="dsb"></el-input>
|
</el-form-item>
|
</el-row>
|
<el-row :span="8">
|
<el-form-item label="配偶" prop="nickName" label-width="50px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
|
<el-input v-model="personInfo1.spouseId" placeholder="请输入配偶" clearable :style="{width: '100%'}" :disabled="dsb">
|
</el-input>
|
</el-form-item>
|
</el-row>
|
<el-row :span="8">
|
<el-form-item label="户籍地址" prop="locationAddress" label-width="68px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
|
<el-input v-model="personInfo1.locationAddress" placeholder="请输入户籍地址" clearable :style="{width: '100%'}" :disabled="dsb">
|
</el-input>
|
</el-form-item>
|
</el-row>
|
<el-row :span="8">
|
<el-form-item label="常住地址" prop="alwaysAddress" label-width="68px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
|
<el-input v-model="personInfo1.alwaysAddress" placeholder="请输入常住地址" clearable :style="{width: '100%'}" :disabled="dsb">
|
</el-input>
|
</el-form-item>
|
</el-row>
|
<el-row :span="8">
|
<el-form-item label="职务职称" prop="position" label-width="68px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
|
<el-input v-model="personInfo1.position" placeholder="请输入职务职称" clearable :style="{width: '100%'}" :disabled="dsb">
|
</el-input>
|
</el-form-item>
|
</el-row>
|
</el-col>
|
</el-container>
|
</div>
|
</el-container>
|
</el-form>
|
|
</div>
|
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {getRoot} from "@/api/root/index";
|
export default {
|
name: "index",
|
data(){
|
return{
|
// 遮罩层
|
disabled: false,
|
personInfos:{},
|
personInfo1:{},
|
loading: true,
|
dsb:true,
|
formData:{
|
userId: undefined,
|
nickName: undefined,
|
oldName: undefined,
|
sex: undefined,
|
nationality: undefined,
|
nation: undefined,
|
maritalStatus: undefined,
|
politicalOutlook: undefined,
|
phoneNumber:undefined,
|
wxNo:undefined,
|
qqNo:undefined,
|
idNum: undefined,
|
locationAddress: undefined,
|
alwaysAddress:undefined,
|
locationPolice: undefined,
|
alwaysPolice: undefined,
|
unit: undefined,
|
position:undefined,
|
outStatus:undefined,
|
idNo: undefined,
|
constellation:undefined,
|
shengXiao:undefined,
|
img: undefined,
|
spouseId: undefined,
|
fatherId: undefined,
|
momId: undefined,
|
birth: undefined,
|
url:undefined,
|
familyId:undefined,
|
secondFamilyId: undefined,
|
childList: undefined
|
},
|
// 菜单列表
|
menuOptions: [],
|
// 部门列表
|
deptOptions: [],
|
// 表单参数
|
form: {},
|
defaultProps: {
|
children: "children",
|
label: "label"
|
},
|
// 表单校验
|
rules: {
|
|
},
|
}
|
}
|
,
|
mounted() {
|
const id = this.$route.params && this.$route.params.id;
|
this.getList(id);
|
},
|
methods:{
|
getList(id)
|
{
|
// alert(id)
|
getRoot(id).then(response => {
|
// console.log(response.data)
|
//这里是夫妻的信息，已经拿到了
|
this.personInfos = response.data
|
this.personInfo1 = response.data[0]
|
console.log(this.personInfo1.nickName)
|
|
});
|
|
}
|
},
|
}
|
</script>
|
|
<style>
|
.wrapper {
|
/*背景图*/
|
background: url("../../assets/images/Group 407.png");
|
width: 100%;
|
height: 100%;
|
background-size: 100%;
|
background-position: top left;
|
background-repeat: no-repeat;
|
}
|
#building building2{
|
/*设置透明度*/
|
/*opacity: 0.9;*/
|
background: rgba(255,255,255,0.8);
|
/*overflow-y:auto;*/
|
}
|
.app-container{
|
background-color: #FEF7FC;
|
|
}
|
.el-divider {
|
/*display: inline-block;*/
|
weight: 1px;
|
height: 1px;
|
background: 0 0;
|
background-color: rgba(0,0,0,0.3);
|
margin: 2px 0px;
|
position: relative;
|
}
|
</style>
|
