权利人信息表单字段校对,代理人增删
Showing
2 changed files
with
188 additions
and
73 deletions
... | @@ -59,13 +59,21 @@ | ... | @@ -59,13 +59,21 @@ |
59 | </td> | 59 | </td> |
60 | <td colspan="2">权利人类型<i class="requisite">*</i></td> | 60 | <td colspan="2">权利人类型<i class="requisite">*</i></td> |
61 | <td colspan="3"> | 61 | <td colspan="3"> |
62 | <input type="text" class="formInput" v-model="formData.qlrlx" /> | 62 | <el-select class="formSelect" v-model="formData.qlrlxbsm"> |
63 | <el-option | ||
64 | v-for="item in qllxList" | ||
65 | :key="item.bsm" | ||
66 | :label="item.mc" | ||
67 | :value="item.bsm" | ||
68 | > | ||
69 | </el-option> | ||
70 | </el-select> | ||
63 | </td> | 71 | </td> |
64 | </tr> | 72 | </tr> |
65 | <tr> | 73 | <tr> |
66 | <td colspan="2">证件类型<i class="requisite">*</i></td> | 74 | <td colspan="2">证件类型<i class="requisite">*</i></td> |
67 | <td colspan="3"> | 75 | <td colspan="3"> |
68 | <el-select class="formSelect" v-model="formData.qlrzjlx"> | 76 | <el-select class="formSelect" v-model="formData.zjzlbsm"> |
69 | <el-option | 77 | <el-option |
70 | v-for="item in qllxList" | 78 | v-for="item in qllxList" |
71 | :key="item.bsm" | 79 | :key="item.bsm" |
... | @@ -77,13 +85,13 @@ | ... | @@ -77,13 +85,13 @@ |
77 | </td> | 85 | </td> |
78 | <td colspan="2">证件号<i class="requisite">*</i></td> | 86 | <td colspan="2">证件号<i class="requisite">*</i></td> |
79 | <td colspan="3"> | 87 | <td colspan="3"> |
80 | <input type="text" class="formInput" v-model="formData.qlrzjh" /> | 88 | <input type="text" class="formInput" v-model="formData.zjh" /> |
81 | </td> | 89 | </td> |
82 | </tr> | 90 | </tr> |
83 | <tr> | 91 | <tr> |
84 | <td colspan="2">电话<i class="requisite">*</i></td> | 92 | <td colspan="2">电话<i class="requisite">*</i></td> |
85 | <td colspan="3"> | 93 | <td colspan="3"> |
86 | <input type="text" class="formInput" v-model="formData.qlrdh" /> | 94 | <input type="text" class="formInput" v-model="formData.dh" /> |
87 | </td> | 95 | </td> |
88 | <td colspan="2">地址<i class="requisite">*</i></td> | 96 | <td colspan="2">地址<i class="requisite">*</i></td> |
89 | <td colspan="3"> | 97 | <td colspan="3"> |
... | @@ -93,17 +101,41 @@ | ... | @@ -93,17 +101,41 @@ |
93 | <tr> | 101 | <tr> |
94 | <td colspan="2">国家</td> | 102 | <td colspan="2">国家</td> |
95 | <td colspan="3"> | 103 | <td colspan="3"> |
96 | <input type="text" class="formInput" v-model="formData.gj" /> | 104 | <el-select class="formSelect" v-model="formData.gjbsm"> |
105 | <el-option | ||
106 | v-for="item in qllxList" | ||
107 | :key="item.bsm" | ||
108 | :label="item.mc" | ||
109 | :value="item.bsm" | ||
110 | > | ||
111 | </el-option> | ||
112 | </el-select> | ||
97 | </td> | 113 | </td> |
98 | <td colspan="2">户籍所在省市</td> | 114 | <td colspan="2">户籍所在省市</td> |
99 | <td colspan="3"> | 115 | <td colspan="3"> |
100 | <input type="text" class="formInput" v-model="formData.hjszss" /> | 116 | <el-select class="formSelect" v-model="formData.hjszssbsm"> |
117 | <el-option | ||
118 | v-for="item in qllxList" | ||
119 | :key="item.bsm" | ||
120 | :label="item.mc" | ||
121 | :value="item.bsm" | ||
122 | > | ||
123 | </el-option> | ||
124 | </el-select> | ||
101 | </td> | 125 | </td> |
102 | </tr> | 126 | </tr> |
103 | <tr> | 127 | <tr> |
104 | <td colspan="2">性别</td> | 128 | <td colspan="2">性别</td> |
105 | <td colspan="3"> | 129 | <td colspan="3"> |
106 | <input type="text" class="formInput" v-model="formData.xb" /> | 130 | <el-select class="formSelect" v-model="formData.xbbsm"> |
131 | <el-option | ||
132 | v-for="item in qllxList" | ||
133 | :key="item.bsm" | ||
134 | :label="item.mc" | ||
135 | :value="item.bsm" | ||
136 | > | ||
137 | </el-option> | ||
138 | </el-select> | ||
107 | </td> | 139 | </td> |
108 | <td colspan="2">邮编</td> | 140 | <td colspan="2">邮编</td> |
109 | <td colspan="3"> | 141 | <td colspan="3"> |
... | @@ -113,7 +145,15 @@ | ... | @@ -113,7 +145,15 @@ |
113 | <tr> | 145 | <tr> |
114 | <td colspan="2">所属行业</td> | 146 | <td colspan="2">所属行业</td> |
115 | <td colspan="3"> | 147 | <td colspan="3"> |
116 | <input type="text" class="formInput" v-model="formData.sshy" /> | 148 | <el-select class="formSelect" v-model="formData.sshy"> |
149 | <el-option | ||
150 | v-for="item in qllxList" | ||
151 | :key="item.bsm" | ||
152 | :label="item.mc" | ||
153 | :value="item.bsm" | ||
154 | > | ||
155 | </el-option> | ||
156 | </el-select> | ||
117 | </td> | 157 | </td> |
118 | <td colspan="2">电子邮件</td> | 158 | <td colspan="2">电子邮件</td> |
119 | <td colspan="3"> | 159 | <td colspan="3"> |
... | @@ -126,11 +166,15 @@ | ... | @@ -126,11 +166,15 @@ |
126 | <tr> | 166 | <tr> |
127 | <td colspan="2">法定代表人或负责人姓名</td> | 167 | <td colspan="2">法定代表人或负责人姓名</td> |
128 | <td colspan="3"> | 168 | <td colspan="3"> |
129 | <input type="text" class="formInput" v-model="formData.frxm" /> | 169 | <input |
170 | type="text" | ||
171 | class="formInput" | ||
172 | v-model="formData.fr.dlrfrmc" | ||
173 | /> | ||
130 | </td> | 174 | </td> |
131 | <td colspan="2">证件类型</td> | 175 | <td colspan="2">证件类型</td> |
132 | <td colspan="3"> | 176 | <td colspan="3"> |
133 | <el-select class="formSelect" v-model="formData.frzjlx"> | 177 | <el-select class="formSelect" v-model="formData.fr.zjzlbsm"> |
134 | <el-option | 178 | <el-option |
135 | v-for="item in qllxList" | 179 | v-for="item in qllxList" |
136 | :key="item.bsm" | 180 | :key="item.bsm" |
... | @@ -144,24 +188,68 @@ | ... | @@ -144,24 +188,68 @@ |
144 | <tr> | 188 | <tr> |
145 | <td colspan="2">证件号码</td> | 189 | <td colspan="2">证件号码</td> |
146 | <td colspan="3"> | 190 | <td colspan="3"> |
147 | <input type="text" class="formInput" v-model="formData.xzq" /> | 191 | <input type="text" class="formInput" v-model="formData.fr.zjh" /> |
148 | </td> | 192 | </td> |
149 | <td colspan="2">电话</td> | 193 | <td colspan="2">电话</td> |
150 | <td colspan="3"> | 194 | <td colspan="3"> |
151 | <input type="text" class="formInput" v-model="formData.dzyj" /> | 195 | <input type="text" class="formInput" v-model="formData.fr.dh" /> |
152 | </td> | 196 | </td> |
153 | </tr> | 197 | </tr> |
154 | <tr> | 198 | <tr> |
155 | <td colspan="10">代理人信息</td> | 199 | <td colspan="10">代理人信息</td> |
156 | </tr> | 200 | </tr> |
201 | <template v-for="(item, index) in formData.dlr"> | ||
202 | <tr :key="item.zjh"> | ||
203 | <td rowspan="2" class="btnCol"> | ||
204 | <el-button | ||
205 | type="primary" | ||
206 | class="changeBtn" | ||
207 | @click="handleClick(item, index, 'add')" | ||
208 | >+</el-button | ||
209 | > | ||
210 | <el-button | ||
211 | type="primary" | ||
212 | class="changeBtn" | ||
213 | @click="handleClick(item, index, 'minus')" | ||
214 | >-</el-button | ||
215 | > | ||
216 | </td> | ||
217 | <td>代理人姓名</td> | ||
218 | <td colspan="3"> | ||
219 | <input type="text" class="formInput" v-model="item.dlrfrmc" /> | ||
220 | </td> | ||
221 | <td colspan="2">证件类型</td> | ||
222 | <td colspan="3"> | ||
223 | <el-select class="formSelect" v-model="item.zjzlbsm"> | ||
224 | <el-option | ||
225 | v-for="item in qllxList" | ||
226 | :key="item.bsm" | ||
227 | :label="item.mc" | ||
228 | :value="item.bsm" | ||
229 | > | ||
230 | </el-option> | ||
231 | </el-select> | ||
232 | </td> | ||
233 | </tr> | ||
234 | <tr :key="item.dh"> | ||
235 | <td>证件号码</td> | ||
236 | <td colspan="3"> | ||
237 | <input type="text" class="formInput" v-model="item.zjh" /> | ||
238 | </td> | ||
239 | <td colspan="2">电话</td> | ||
240 | <td colspan="3"> | ||
241 | <input type="text" class="formInput" v-model="item.dh" /> | ||
242 | </td> | ||
243 | </tr> | ||
244 | </template> | ||
245 | |||
157 | <tr> | 246 | <tr> |
158 | <td colspan="2">代理人姓名</td> | 247 | <td colspan="10">权利信息</td> |
159 | <td colspan="3"> | 248 | </tr> |
160 | <input type="text" class="formInput" v-model="formData.xzq" /> | 249 | <tr> |
161 | </td> | 250 | <td colspan="2">共有方式</td> |
162 | <td colspan="2">证件类型</td> | ||
163 | <td colspan="3"> | 251 | <td colspan="3"> |
164 | <el-select class="formSelect" v-model="formData.dlrzjlx"> | 252 | <el-select class="formSelect" v-model="formData.gyfsbsm"> |
165 | <el-option | 253 | <el-option |
166 | v-for="item in qllxList" | 254 | v-for="item in qllxList" |
167 | :key="item.bsm" | 255 | :key="item.bsm" |
... | @@ -171,44 +259,25 @@ | ... | @@ -171,44 +259,25 @@ |
171 | </el-option> | 259 | </el-option> |
172 | </el-select> | 260 | </el-select> |
173 | </td> | 261 | </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 | <input type="text" class="formInput" v-model="formData.dzyj" /> | ||
183 | </td> | ||
184 | </tr> | ||
185 | <tr> | ||
186 | <td colspan="10">权利信息</td> | ||
187 | </tr> | ||
188 | <tr> | ||
189 | <td colspan="2">共有方式</td> | ||
190 | <td colspan="3"> | ||
191 | <input type="text" class="formInput" v-model="formData.xzq" /> | ||
192 | </td> | ||
193 | <td colspan="2">权利比例(%)</td> | 262 | <td colspan="2">权利比例(%)</td> |
194 | <td colspan="3"> | 263 | <td colspan="3"> |
195 | <input type="text" class="formInput" v-model="formData.dzyj" /> | 264 | <input type="text" class="formInput" v-model="formData.qlbl" /> |
196 | </td> | 265 | </td> |
197 | </tr> | 266 | </tr> |
198 | <tr> | 267 | <tr> |
199 | <td colspan="2">房产证号</td> | 268 | <td colspan="2">房产证号</td> |
200 | <td colspan="3"> | 269 | <td colspan="3"> |
201 | <input type="text" class="formInput" v-model="formData.xzq" /> | 270 | <input type="text" class="formInput" v-model="formData.fczh" /> |
202 | </td> | 271 | </td> |
203 | <td colspan="2">土地证号</td> | 272 | <td colspan="2">土地证号</td> |
204 | <td colspan="3"> | 273 | <td colspan="3"> |
205 | <input type="text" class="formInput" v-model="formData.dzyj" /> | 274 | <input type="text" class="formInput" v-model="formData.tdzh" /> |
206 | </td> | 275 | </td> |
207 | </tr> | 276 | </tr> |
208 | <tr> | 277 | <tr> |
209 | <td colspan="2">共有情况</td> | 278 | <td colspan="2">共有情况</td> |
210 | <td colspan="8"> | 279 | <td colspan="8"> |
211 | <input type="text" class="formInput" v-model="formData.xzq" /> | 280 | <input type="text" class="formInput" v-model="formData.gyqk" /> |
212 | </td> | 281 | </td> |
213 | </tr> | 282 | </tr> |
214 | </table> | 283 | </table> |
... | @@ -247,39 +316,47 @@ export default { | ... | @@ -247,39 +316,47 @@ export default { |
247 | multipleSelection: {}, | 316 | multipleSelection: {}, |
248 | dialogVisible: false, | 317 | dialogVisible: false, |
249 | formData: { | 318 | formData: { |
250 | xzq: "", | 319 | dlr: [ |
251 | djq: "", | 320 | { |
252 | djzq: "", | 321 | dh: "", |
253 | qllx: "", | 322 | dlrfrmc: "", |
254 | zdtzm: "", | 323 | qlrbsm: "", |
255 | qlsdfs: "", | 324 | zjh: "", |
256 | zddm: "", | 325 | zjzlbsm: "", |
257 | djh: "", | 326 | }, |
258 | bdcdyh: "", | 327 | ], |
259 | zl: "", | 328 | fr: { |
260 | tdqslyzmcl: "", | 329 | dh: "", |
261 | gmjjhyfl: "", | 330 | dlrfrmc: "", |
262 | jg: "", | 331 | qlrbsm: "", |
263 | blc: "", | 332 | zjh: "", |
264 | tfh: "", | 333 | zjzlbsm: "", |
265 | rjl: "", | 334 | }, |
266 | rjsm: "", | ||
267 | jzmd: "", | ||
268 | jzmdsm: "", | ||
269 | jzxg: "", | ||
270 | jzxgsm: "", | ||
271 | bz: "", | 335 | bz: "", |
336 | dh: "", | ||
272 | dz: "", | 337 | dz: "", |
273 | nz: "", | 338 | dzyj: "", |
274 | xz: "", | 339 | fczh: "", |
275 | pzmj: "", | 340 | fzjg: "", |
276 | zdmj: "", | 341 | gjbsm: "", |
277 | jzzdmj: "", | 342 | glbsm: "", |
278 | jzmj: "", | 343 | gyfsbsm: "", |
279 | gyqlrqk: "", | 344 | gyqk: "", |
280 | sm: "", | 345 | gzdw: "", |
346 | hjszssbsm: "", | ||
347 | isdel: 0, | ||
348 | qlbl: "", | ||
349 | qlrlxbsm: "", | ||
350 | qlrmc: "", | ||
351 | sshy: "", | ||
352 | sxh: 0, | ||
353 | tdzh: "", | ||
354 | xbbsm: "", | ||
355 | yb: "", | ||
356 | zjh: "", | ||
357 | zjzlbsm: "", | ||
281 | }, | 358 | }, |
282 | qllxList:[], | 359 | qllxList: [], |
283 | }; | 360 | }; |
284 | }, | 361 | }, |
285 | methods: { | 362 | methods: { |
... | @@ -341,6 +418,25 @@ export default { | ... | @@ -341,6 +418,25 @@ export default { |
341 | getQlrxxData() { | 418 | getQlrxxData() { |
342 | return this.tableData; | 419 | return this.tableData; |
343 | }, | 420 | }, |
421 | //增删代理人 | ||
422 | handleClick(obj, ind, type) { | ||
423 | if (type === "add") { | ||
424 | this.formData.dlr.push({ | ||
425 | id: Math.random(), | ||
426 | dh: "", | ||
427 | dlrfrmc: "", | ||
428 | qlrbsm: "", | ||
429 | zjh: "", | ||
430 | zjzlbsm: "", | ||
431 | }); | ||
432 | } else { | ||
433 | this.formData.dlr.forEach((item, index) => { | ||
434 | if (index == ind && this.formData.dlr.length > 1) { | ||
435 | this.formData.dlr.splice(ind, 1); | ||
436 | } | ||
437 | }); | ||
438 | } | ||
439 | }, | ||
344 | }, | 440 | }, |
345 | }; | 441 | }; |
346 | </script> | 442 | </script> |
... | @@ -415,13 +511,32 @@ export default { | ... | @@ -415,13 +511,32 @@ export default { |
415 | font-size: 14px; | 511 | font-size: 14px; |
416 | width: 100%; | 512 | width: 100%; |
417 | border-bottom: 1px solid #000; | 513 | border-bottom: 1px solid #000; |
514 | |||
515 | .btnCol { | ||
516 | position: relative; | ||
517 | width: 60px; | ||
518 | .changeBtn { | ||
519 | width: 30px; | ||
520 | height: 30px; | ||
521 | font-size: 25px; | ||
522 | padding: 0px 0px; | ||
523 | position: absolute; | ||
524 | top: 50%; | ||
525 | left: 50%; | ||
526 | margin-top: -32px; | ||
527 | margin-left: -15px; | ||
528 | } | ||
529 | .el-button + .el-button { | ||
530 | margin-left: -15px; | ||
531 | margin-top: 2px; | ||
532 | } | ||
533 | } | ||
418 | th { | 534 | th { |
419 | height: 36px; | 535 | height: 36px; |
420 | line-height: 36px; | 536 | line-height: 36px; |
421 | font-size: 16px; | 537 | font-size: 16px; |
422 | } | 538 | } |
423 | td { | 539 | td { |
424 | width: 60px; | ||
425 | text-align: center; | 540 | text-align: center; |
426 | height: 36px; | 541 | height: 36px; |
427 | padding: 0; | 542 | padding: 0; | ... | ... |
... | @@ -243,7 +243,7 @@ export default { | ... | @@ -243,7 +243,7 @@ export default { |
243 | }); | 243 | }); |
244 | } else { | 244 | } else { |
245 | this.countList.forEach((item, index) => { | 245 | this.countList.forEach((item, index) => { |
246 | if (item.id == id && this.countList.length > 1) { | 246 | if (index == ind && this.countList.length > 1) { |
247 | this.countList.splice(index, 1); | 247 | this.countList.splice(index, 1); |
248 | } | 248 | } |
249 | }); | 249 | }); | ... | ... |
-
Please register or sign in to post a comment