Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
649cc648 by 杨威
Options

权利人详细信息表单

1 parent d9ecb329
Inline Side-by-side
Showing 1 changed file with 281 additions and 32 deletions
......@@ -62,6 +62,182 @@
</template>
</el-table-column>
</el-table>
<el-dialog
title="权利人信息"
:visible.sync="dialogVisible"
width="50%"
center
>
<el-form :model="form">
<table class="zdjbxxTable" cellspacing="0" cellpadding="0" border="1">
<tr>
<td colspan="2">权利人名称<i class="requisite">*</i></td>
<td colspan="3">
<input type="text" class="formInput" v-model="formData.qlrmc" />
</td>
<td colspan="2">权利人类型<i class="requisite">*</i></td>
<td colspan="3">
<input type="text" class="formInput" v-model="formData.qlrlx" />
</td>
</tr>
<tr>
<td colspan="2">证件类型<i class="requisite">*</i></td>
<td colspan="3">
<el-select class="formSelect" v-model="formData.qlrzjlx">
<el-option
v-for="item in qllxList"
:key="item.bsm"
:label="item.mc"
:value="item.bsm"
>
</el-option>
</el-select>
</td>
<td colspan="2">证件号<i class="requisite">*</i></td>
<td colspan="3">
<input type="text" class="formInput" v-model="formData.qlrzjh" />
</td>
</tr>
<tr>
<td colspan="2">电话<i class="requisite">*</i></td>
<td colspan="3">
<input type="text" class="formInput" v-model="formData.qlrdh" />
</td>
<td colspan="2">地址<i class="requisite">*</i></td>
<td colspan="3">
<input type="text" class="formInput" v-model="formData.dz" />
</td>
</tr>
<tr>
<td colspan="2">国家</td>
<td colspan="3">
<input type="text" class="formInput" v-model="formData.gj" />
</td>
<td colspan="2">户籍所在省市</td>
<td colspan="3">
<input type="text" class="formInput" v-model="formData.hjszss" />
</td>
</tr>
<tr>
<td colspan="2">性别</td>
<td colspan="3">
<input type="text" class="formInput" v-model="formData.xb" />
</td>
<td colspan="2">邮编</td>
<td colspan="3">
<input type="text" class="formInput" v-model="formData.yb" />
</td>
</tr>
<tr>
<td colspan="2">所属行业</td>
<td colspan="3">
<input type="text" class="formInput" v-model="formData.sshy" />
</td>
<td colspan="2">电子邮件</td>
<td colspan="3">
<input type="text" class="formInput" v-model="formData.dzyj" />
</td>
</tr>
<tr>
<td colspan="10">法人信息</td>
</tr>
<tr>
<td colspan="2">法定代表人或负责人姓名</td>
<td colspan="3">
<input type="text" class="formInput" v-model="formData.frxm" />
</td>
<td colspan="2">证件类型</td>
<td colspan="3">
<el-select class="formSelect" v-model="formData.frzjlx">
<el-option
v-for="item in qllxList"
:key="item.bsm"
:label="item.mc"
:value="item.bsm"
>
</el-option>
</el-select>
</td>
</tr>
<tr>
<td colspan="2">证件号码</td>
<td colspan="3">
<input type="text" class="formInput" v-model="formData.xzq" />
</td>
<td colspan="2">电话</td>
<td colspan="3">
<input type="text" class="formInput" v-model="formData.dzyj" />
</td>
</tr>
<tr>
<td colspan="10">代理人信息</td>
</tr>
<tr>
<td colspan="2">代理人姓名</td>
<td colspan="3">
<input type="text" class="formInput" v-model="formData.xzq" />
</td>
<td colspan="2">证件类型</td>
<td colspan="3">
<el-select class="formSelect" v-model="formData.dlrzjlx">
<el-option
v-for="item in qllxList"
:key="item.bsm"
:label="item.mc"
:value="item.bsm"
>
</el-option>
</el-select>
</td>
</tr>
<tr>
<td colspan="2">证件号码</td>
<td colspan="3">
<input type="text" class="formInput" v-model="formData.xzq" />
</td>
<td colspan="2">电话</td>
<td colspan="3">
<input type="text" class="formInput" v-model="formData.dzyj" />
</td>
</tr>
<tr>
<td colspan="10">权利信息</td>
</tr>
<tr>
<td colspan="2">共有方式</td>
<td colspan="3">
<input type="text" class="formInput" v-model="formData.xzq" />
</td>
<td colspan="2">权利比例(%)</td>
<td colspan="3">
<input type="text" class="formInput" v-model="formData.dzyj" />
</td>
</tr>
<tr>
<td colspan="2">房产证号</td>
<td colspan="3">
<input type="text" class="formInput" v-model="formData.xzq" />
</td>
<td colspan="2">土地证号</td>
<td colspan="3">
<input type="text" class="formInput" v-model="formData.dzyj" />
</td>
</tr>
<tr>
<td colspan="2">共有情况</td>
<td colspan="8">
<input type="text" class="formInput" v-model="formData.xzq" />
</td>
</tr>
</table>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="dialogVisible = false"
>确 定</el-button
>
<el-button @click="dialogVisible = false">取 消</el-button>
</span>
</el-dialog>
</div>
</template>
......@@ -84,36 +260,54 @@ export default {
data() {
return {
radio: "1",
tableData: [
{
id: "1",
qlrmc: "",
qlrlx: "",
zjzl: "",
zjh: "",
txdz: "",
lxdh: "",
},
],
tableData: [],
//表格选中项
multipleSelection: {},
dialogVisible: false,
formData: {
xzq: "",
djq: "",
djzq: "",
qllx: "",
zdtzm:"",
qlsdfs: "",
zddm: "",
djh: "",
bdcdyh: "",
zl: "",
tdqslyzmcl: "",
gmjjhyfl: "",
jg: "",
blc: "",
tfh: "",
rjl: "",
rjsm: "",
jzmd: "",
jzmdsm: "",
jzxg: "",
jzxgsm: "",
bz: "",
dz: "",
nz: "",
xz: "",
pzmj: "",
zdmj: "",
jzzdmj: "",
jzmj: "",
gyqlrqk: "",
sm: "",
},
};
},
methods: {
//新增行数据
addRow() {
this.tableData.push({
id: Math.random(),
qlrmc: "",
qlrlx: "",
zjzl: "",
zjh: "",
txdz: "",
lxdh: "",
});
this.dialogVisible = true;
},
//修改行数据
changeRow() {},
changeRow() {
this.dialogVisible = this.multipleSelection.length == 1 ? true : false;
},
//删除行数据
delRow() {
for (var i = 0; i < this.multipleSelection.length; i++) {
......@@ -132,22 +326,22 @@ export default {
arr.splice(i - 1, 1);
}
}
},
//供父组件调用来获取共有方式
getQlgyfsData(){
return this.radio
},
//供父组件调用来获取权利人表格数据
getQlrxxData(){
return this.tableData
}
},
//供父组件调用来获取共有方式
getQlgyfsData() {
return this.radio;
},
//供父组件调用来获取权利人表格数据
getQlrxxData() {
return this.tableData;
},
},
};
</script>
<style lang="less">
.temp {
width: 100%;
width: 100%;
table {
border-bottom: 0;
background-color: #fff;
......@@ -210,5 +404,60 @@ export default {
text-align: center;
}
}
.zdjbxxTable {
margin: 10px 0;
background-color: #fff;
font-size: 14px;
width: 100%;
border-bottom: 1px solid #000;
th {
height: 36px;
line-height: 36px;
font-size: 16px;
}
td {
width: 60px;
text-align: center;
height: 36px;
padding: 0;
}
/deep/.el-input__inner {
margin: 0;
height: 36px;
outline: none;
border: none;
color: #606764;
overflow: visible;
text-align: center;
cursor: text;
}
.percent78 {
width: 78%;
float: left;
}
.percent68 {
width: 68%!important;
float: left;
position: relative;
top: 7px;
}
.percent30 {
width: 30%!important;
float: left;
}
.createBtn {
position: absolute;
width: 50px;
padding: 6px 4px;
right: 4px;
top: 4px;
}
.el-input__icon {
line-height: 37px;
}
.el-select {
width: 100% ;
}
}
}
</style>
......