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 275 additions and 26 deletions
...@@ -62,6 +62,182 @@ ...@@ -62,6 +62,182 @@
62 </template> 62 </template>
63 </el-table-column> 63 </el-table-column>
64 </el-table> 64 </el-table>
65 <el-dialog
66 title="权利人信息"
67 :visible.sync="dialogVisible"
68 width="50%"
69 center
70 >
71 <el-form :model="form">
72 <table class="zdjbxxTable" cellspacing="0" cellpadding="0" border="1">
73 <tr>
74 <td colspan="2">权利人名称<i class="requisite">*</i></td>
75 <td colspan="3">
76 <input type="text" class="formInput" v-model="formData.qlrmc" />
77 </td>
78 <td colspan="2">权利人类型<i class="requisite">*</i></td>
79 <td colspan="3">
80 <input type="text" class="formInput" v-model="formData.qlrlx" />
81 </td>
82 </tr>
83 <tr>
84 <td colspan="2">证件类型<i class="requisite">*</i></td>
85 <td colspan="3">
86 <el-select class="formSelect" v-model="formData.qlrzjlx">
87 <el-option
88 v-for="item in qllxList"
89 :key="item.bsm"
90 :label="item.mc"
91 :value="item.bsm"
92 >
93 </el-option>
94 </el-select>
95 </td>
96 <td colspan="2">证件号<i class="requisite">*</i></td>
97 <td colspan="3">
98 <input type="text" class="formInput" v-model="formData.qlrzjh" />
99 </td>
100 </tr>
101 <tr>
102 <td colspan="2">电话<i class="requisite">*</i></td>
103 <td colspan="3">
104 <input type="text" class="formInput" v-model="formData.qlrdh" />
105 </td>
106 <td colspan="2">地址<i class="requisite">*</i></td>
107 <td colspan="3">
108 <input type="text" class="formInput" v-model="formData.dz" />
109 </td>
110 </tr>
111 <tr>
112 <td colspan="2">国家</td>
113 <td colspan="3">
114 <input type="text" class="formInput" v-model="formData.gj" />
115 </td>
116 <td colspan="2">户籍所在省市</td>
117 <td colspan="3">
118 <input type="text" class="formInput" v-model="formData.hjszss" />
119 </td>
120 </tr>
121 <tr>
122 <td colspan="2">性别</td>
123 <td colspan="3">
124 <input type="text" class="formInput" v-model="formData.xb" />
125 </td>
126 <td colspan="2">邮编</td>
127 <td colspan="3">
128 <input type="text" class="formInput" v-model="formData.yb" />
129 </td>
130 </tr>
131 <tr>
132 <td colspan="2">所属行业</td>
133 <td colspan="3">
134 <input type="text" class="formInput" v-model="formData.sshy" />
135 </td>
136 <td colspan="2">电子邮件</td>
137 <td colspan="3">
138 <input type="text" class="formInput" v-model="formData.dzyj" />
139 </td>
140 </tr>
141 <tr>
142 <td colspan="10">法人信息</td>
143 </tr>
144 <tr>
145 <td colspan="2">法定代表人或负责人姓名</td>
146 <td colspan="3">
147 <input type="text" class="formInput" v-model="formData.frxm" />
148 </td>
149 <td colspan="2">证件类型</td>
150 <td colspan="3">
151 <el-select class="formSelect" v-model="formData.frzjlx">
152 <el-option
153 v-for="item in qllxList"
154 :key="item.bsm"
155 :label="item.mc"
156 :value="item.bsm"
157 >
158 </el-option>
159 </el-select>
160 </td>
161 </tr>
162 <tr>
163 <td colspan="2">证件号码</td>
164 <td colspan="3">
165 <input type="text" class="formInput" v-model="formData.xzq" />
166 </td>
167 <td colspan="2">电话</td>
168 <td colspan="3">
169 <input type="text" class="formInput" v-model="formData.dzyj" />
170 </td>
171 </tr>
172 <tr>
173 <td colspan="10">代理人信息</td>
174 </tr>
175 <tr>
176 <td colspan="2">代理人姓名</td>
177 <td colspan="3">
178 <input type="text" class="formInput" v-model="formData.xzq" />
179 </td>
180 <td colspan="2">证件类型</td>
181 <td colspan="3">
182 <el-select class="formSelect" v-model="formData.dlrzjlx">
183 <el-option
184 v-for="item in qllxList"
185 :key="item.bsm"
186 :label="item.mc"
187 :value="item.bsm"
188 >
189 </el-option>
190 </el-select>
191 </td>
192 </tr>
193 <tr>
194 <td colspan="2">证件号码</td>
195 <td colspan="3">
196 <input type="text" class="formInput" v-model="formData.xzq" />
197 </td>
198 <td colspan="2">电话</td>
199 <td colspan="3">
200 <input type="text" class="formInput" v-model="formData.dzyj" />
201 </td>
202 </tr>
203 <tr>
204 <td colspan="10">权利信息</td>
205 </tr>
206 <tr>
207 <td colspan="2">共有方式</td>
208 <td colspan="3">
209 <input type="text" class="formInput" v-model="formData.xzq" />
210 </td>
211 <td colspan="2">权利比例(%)</td>
212 <td colspan="3">
213 <input type="text" class="formInput" v-model="formData.dzyj" />
214 </td>
215 </tr>
216 <tr>
217 <td colspan="2">房产证号</td>
218 <td colspan="3">
219 <input type="text" class="formInput" v-model="formData.xzq" />
220 </td>
221 <td colspan="2">土地证号</td>
222 <td colspan="3">
223 <input type="text" class="formInput" v-model="formData.dzyj" />
224 </td>
225 </tr>
226 <tr>
227 <td colspan="2">共有情况</td>
228 <td colspan="8">
229 <input type="text" class="formInput" v-model="formData.xzq" />
230 </td>
231 </tr>
232 </table>
233 </el-form>
234 <span slot="footer" class="dialog-footer">
235 <el-button type="primary" @click="dialogVisible = false"
236 >确 定</el-button
237 >
238 <el-button @click="dialogVisible = false">取 消</el-button>
239 </span>
240 </el-dialog>
65 </div> 241 </div>
66 </template> 242 </template>
67 243
...@@ -84,36 +260,54 @@ export default { ...@@ -84,36 +260,54 @@ export default {
84 data() { 260 data() {
85 return { 261 return {
86 radio: "1", 262 radio: "1",
87 tableData: [ 263 tableData: [],
88 {
89 id: "1",
90 qlrmc: "",
91 qlrlx: "",
92 zjzl: "",
93 zjh: "",
94 txdz: "",
95 lxdh: "",
96 },
97 ],
98 //表格选中项 264 //表格选中项
99 multipleSelection: {}, 265 multipleSelection: {},
266 dialogVisible: false,
267 formData: {
268 xzq: "",
269 djq: "",
270 djzq: "",
271 qllx: "",
272 zdtzm:"",
273 qlsdfs: "",
274 zddm: "",
275 djh: "",
276 bdcdyh: "",
277 zl: "",
278 tdqslyzmcl: "",
279 gmjjhyfl: "",
280 jg: "",
281 blc: "",
282 tfh: "",
283 rjl: "",
284 rjsm: "",
285 jzmd: "",
286 jzmdsm: "",
287 jzxg: "",
288 jzxgsm: "",
289 bz: "",
290 dz: "",
291 nz: "",
292 xz: "",
293 pzmj: "",
294 zdmj: "",
295 jzzdmj: "",
296 jzmj: "",
297 gyqlrqk: "",
298 sm: "",
299 },
100 }; 300 };
101 }, 301 },
102 methods: { 302 methods: {
103 //新增行数据 303 //新增行数据
104 addRow() { 304 addRow() {
105 this.tableData.push({ 305 this.dialogVisible = true;
106 id: Math.random(),
107 qlrmc: "",
108 qlrlx: "",
109 zjzl: "",
110 zjh: "",
111 txdz: "",
112 lxdh: "",
113 });
114 }, 306 },
115 //修改行数据 307 //修改行数据
116 changeRow() {}, 308 changeRow() {
309 this.dialogVisible = this.multipleSelection.length == 1 ? true : false;
310 },
117 //删除行数据 311 //删除行数据
118 delRow() { 312 delRow() {
119 for (var i = 0; i < this.multipleSelection.length; i++) { 313 for (var i = 0; i < this.multipleSelection.length; i++) {
...@@ -135,13 +329,13 @@ export default { ...@@ -135,13 +329,13 @@ export default {
135 }, 329 },
136 330
137 //供父组件调用来获取共有方式 331 //供父组件调用来获取共有方式
138 getQlgyfsData(){ 332 getQlgyfsData() {
139 return this.radio 333 return this.radio;
140 }, 334 },
141 //供父组件调用来获取权利人表格数据 335 //供父组件调用来获取权利人表格数据
142 getQlrxxData(){ 336 getQlrxxData() {
143 return this.tableData 337 return this.tableData;
144 } 338 },
145 }, 339 },
146 }; 340 };
147 </script> 341 </script>
...@@ -210,5 +404,60 @@ export default { ...@@ -210,5 +404,60 @@ export default {
210 text-align: center; 404 text-align: center;
211 } 405 }
212 } 406 }
407 .zdjbxxTable {
408 margin: 10px 0;
409 background-color: #fff;
410 font-size: 14px;
411 width: 100%;
412 border-bottom: 1px solid #000;
413 th {
414 height: 36px;
415 line-height: 36px;
416 font-size: 16px;
417 }
418 td {
419 width: 60px;
420 text-align: center;
421 height: 36px;
422 padding: 0;
423 }
424 /deep/.el-input__inner {
425 margin: 0;
426 height: 36px;
427 outline: none;
428 border: none;
429 color: #606764;
430 overflow: visible;
431 text-align: center;
432 cursor: text;
433 }
434 .percent78 {
435 width: 78%;
436 float: left;
437 }
438 .percent68 {
439 width: 68%!important;
440 float: left;
441 position: relative;
442 top: 7px;
443 }
444 .percent30 {
445 width: 30%!important;
446 float: left;
447 }
448 .createBtn {
449 position: absolute;
450 width: 50px;
451 padding: 6px 4px;
452 right: 4px;
453 top: 4px;
454 }
455 .el-input__icon {
456 line-height: 37px;
457 }
458 .el-select {
459 width: 100% ;
460 }
461 }
213 } 462 }
214 </style> 463 </style>
......