自然幢,多幢,户表单样式提交!
Showing
7 changed files
with
968 additions
and
7 deletions
... | @@ -55,8 +55,20 @@ const constantRoutes = [ | ... | @@ -55,8 +55,20 @@ const constantRoutes = [ |
55 | { | 55 | { |
56 | path: '/zrz', | 56 | path: '/zrz', |
57 | name: '自然幢', | 57 | name: '自然幢', |
58 | code: 'zrz', | 58 | code: '1-1', |
59 | component: () => import('@/views/zrz/index'), | 59 | component: () => import('@/views/basic/zrz/index'), |
60 | }, | ||
61 | { | ||
62 | path: '/dz', | ||
63 | name: '多幢', | ||
64 | code: '1-2', | ||
65 | component: () => import('@/views/basic/dz/index'), | ||
66 | }, | ||
67 | { | ||
68 | path: '/h', | ||
69 | name: '户', | ||
70 | code: '1-3', | ||
71 | component: () => import('@/views/basic/h/index'), | ||
60 | }, | 72 | }, |
61 | ] | 73 | ] |
62 | } | 74 | } | ... | ... |
src/views/basic/dz/index.vue
0 → 100644
1 | <template> | ||
2 | <div class="zrz content-form"> | ||
3 | <el-form ref="form" :model="form" label-width="160px"> | ||
4 | <table border="1" width="80%" cellspacing="1" cellpadding="2"> | ||
5 | <tbody> | ||
6 | <tr> | ||
7 | <td colspan="1"></td> | ||
8 | <td colspan="1"></td> | ||
9 | <td colspan="1"></td> | ||
10 | <td colspan="1"></td> | ||
11 | <td colspan="1"></td> | ||
12 | <td colspan="1"></td> | ||
13 | <td colspan="1"></td> | ||
14 | <td colspan="1"></td> | ||
15 | <td colspan="1"></td> | ||
16 | <td colspan="1"></td> | ||
17 | <td colspan="1"></td> | ||
18 | <td colspan="1"></td> | ||
19 | </tr> | ||
20 | <tr height="30"> | ||
21 | <td colspan="12" align="center" ><font size="4">多幢基本信息</font></td> | ||
22 | </tr> | ||
23 | <tr height="30"> | ||
24 | <td colspan="2" align="center" >宗地代码</td> | ||
25 | <td colspan="4" > | ||
26 | <el-input v-model="form.zdbsm"></el-input> | ||
27 | </td> | ||
28 | <td colspan="2" align="center" >不动产单元号</td> | ||
29 | <td colspan="4" > | ||
30 | <el-input v-model="form.dyhbsm" style="width: 70%"></el-input> | ||
31 | <el-button @click.prevent="" size="mini" type="primary" style="width:25%;margin-left:3%">生成</el-button> | ||
32 | </td> | ||
33 | </tr> | ||
34 | <tr height="30"> | ||
35 | <td colspan="2" align="center" >项目名称</td> | ||
36 | <td colspan="4" > | ||
37 | <el-input v-model="form.xmmc"></el-input> | ||
38 | </td> | ||
39 | <td colspan="2" align="center" >房屋性质</td> | ||
40 | <td colspan="4" > | ||
41 | <el-select v-model="form.fwxzbsm" placeholder="请选择" > | ||
42 | <el-option | ||
43 | v-for="item in options" | ||
44 | :key="item.value" | ||
45 | :label="item.label" | ||
46 | :value="item.value"> | ||
47 | </el-option> | ||
48 | </el-select> | ||
49 | </td> | ||
50 | </tr> | ||
51 | |||
52 | <tr height="30"> | ||
53 | <td colspan="2" align="center" >房屋类型</td> | ||
54 | <td colspan="4" > | ||
55 | <el-select v-model="form.fwxzbsm" placeholder="请选择" > | ||
56 | <el-option | ||
57 | v-for="item in options" | ||
58 | :key="item.value" | ||
59 | :label="item.label" | ||
60 | :value="item.value"> | ||
61 | </el-option> | ||
62 | </el-select> | ||
63 | </td> | ||
64 | <td colspan="2" align="center" >竣工日期</td> | ||
65 | <td colspan="4" > | ||
66 | <el-date-picker | ||
67 | v-model="form.jgrq" | ||
68 | type="date" | ||
69 | placeholder="选择日期"> | ||
70 | </el-date-picker> | ||
71 | </td> | ||
72 | </tr> | ||
73 | |||
74 | <tr height="30"> | ||
75 | <td colspan="2" align="center" >产别</td> | ||
76 | <td colspan="4" > | ||
77 | <el-select v-model="form.fwcbbsm" placeholder="请选择" > | ||
78 | <el-option | ||
79 | v-for="item in options" | ||
80 | :key="item.value" | ||
81 | :label="item.label" | ||
82 | :value="item.value"> | ||
83 | </el-option> | ||
84 | </el-select> | ||
85 | </td> | ||
86 | <td colspan="2" align="center" >产权来源</td> | ||
87 | <td colspan="4" > | ||
88 | <el-select v-model="form.fwcqlybsm" placeholder="请选择" > | ||
89 | <el-option | ||
90 | v-for="item in options" | ||
91 | :key="item.value" | ||
92 | :label="item.label" | ||
93 | :value="item.value"> | ||
94 | </el-option> | ||
95 | </el-select> | ||
96 | </td> | ||
97 | </tr> | ||
98 | |||
99 | <tr height="30" v-for="(item1,index) in form.ytList" :key="index"> | ||
100 | <td v-if="index===0" colspan="2" :rowspan="ytTitleRowspan" align="center" id="ytTitle"> | ||
101 | <el-button type="primary" size="mini" style="margin-right: 10px" @click="addYtInfo">添加</el-button> | ||
102 | <span>用途</span> | ||
103 | </td> | ||
104 | |||
105 | <td colspan="1" align="center" > | ||
106 | <el-button type="info" size="mini" style="" @click="deleteYtInfo(index)" circle>删除</el-button> | ||
107 | 规划用途 | ||
108 | </td> | ||
109 | <td colspan="4" align="center" > | ||
110 | <el-select v-model="item1.fwytzdbsm" placeholder="请选择" > | ||
111 | <el-option | ||
112 | v-for="item in options" | ||
113 | :key="item.value" | ||
114 | :label="item.label" | ||
115 | :value="item.value"> | ||
116 | </el-option> | ||
117 | </el-select> | ||
118 | </td> | ||
119 | <td colspan="1" align="center" >用途</td> | ||
120 | <td colspan="4" align="center" > | ||
121 | <el-select v-model="item1.fwsjytbsm" placeholder="请选择" > | ||
122 | <el-option | ||
123 | v-for="item in options" | ||
124 | :key="item.value" | ||
125 | :label="item.label" | ||
126 | :value="item.value"> | ||
127 | </el-option> | ||
128 | </el-select> | ||
129 | </td> | ||
130 | </tr> | ||
131 | |||
132 | <tr height="30"> | ||
133 | <td colspan="2" align="center" >共有土地面积(㎡)</td> | ||
134 | <td colspan="2" > | ||
135 | <el-input v-model="form.zdmj"></el-input> | ||
136 | </td> | ||
137 | <td colspan="2" align="center" >分摊土地面积(㎡)</td> | ||
138 | <td colspan="2" > | ||
139 | <el-input v-model="form.fttdsymj"></el-input> | ||
140 | </td> | ||
141 | <td colspan="2" align="center" >多幢独用土地面积(㎡)</td> | ||
142 | <td colspan="2" > | ||
143 | <el-input v-model="form.dlsytdmj"></el-input> | ||
144 | </td> | ||
145 | </tr> | ||
146 | |||
147 | |||
148 | |||
149 | <tr height="30"> | ||
150 | <td colspan="2" align="center" > | ||
151 | <span>坐落</span> | ||
152 | </td> | ||
153 | <td colspan="10" > | ||
154 | <el-input v-model="form.zl"></el-input> | ||
155 | </td> | ||
156 | </tr> | ||
157 | |||
158 | <tr height="30"> | ||
159 | <td colspan="2" rowspan="2" align="center" > | ||
160 | <span>附加说明</span> | ||
161 | </td> | ||
162 | <td colspan="10" rowspan="2" > | ||
163 | <el-input v-model="form.bz" type="textarea"></el-input> | ||
164 | </td> | ||
165 | </tr> | ||
166 | <tr height="30"> | ||
167 | </tr> | ||
168 | |||
169 | <tr height="30"> | ||
170 | <td colspan="2" rowspan="2" align="center" > | ||
171 | <span>调查意见</span> | ||
172 | </td> | ||
173 | <td colspan="10" > | ||
174 | <el-input v-model="form.name"></el-input> | ||
175 | </td> | ||
176 | </tr> | ||
177 | |||
178 | <tr height="30"> | ||
179 | <td colspan="4" rowspan="2" align="right" style="width:8.33%;padding-right:10px"> | ||
180 | <span>审查员</span> | ||
181 | </td> | ||
182 | <td colspan="2" > | ||
183 | <el-input v-model="form.name"></el-input> | ||
184 | </td> | ||
185 | <td colspan="2" rowspan="2" align="right" style="width:8.33%;padding-right:10px"> | ||
186 | <span>审查日期</span> | ||
187 | </td> | ||
188 | <td colspan="2" > | ||
189 | <el-date-picker | ||
190 | v-model="form.date" | ||
191 | type="date" | ||
192 | placeholder="选择日期"> | ||
193 | </el-date-picker> | ||
194 | </td> | ||
195 | </tr> | ||
196 | </tbody> | ||
197 | </table> | ||
198 | </el-form> | ||
199 | <div style="min-height: 40px;text-align: center;margin-top: 10px"> | ||
200 | <el-button type="success" @click="onSave">保存</el-button> | ||
201 | <el-button type="primary" @click="onSubmit">提交</el-button> | ||
202 | </div> | ||
203 | </div> | ||
204 | |||
205 | </template> | ||
206 | |||
207 | <script> | ||
208 | export default { | ||
209 | name:'zrz', | ||
210 | data () { | ||
211 | return { | ||
212 | form:{ | ||
213 | dzbsm:'', //多幢标识码 | ||
214 | zdbsm:'', //宗地标识码 | ||
215 | dyhbsm:'', //不动产单元号标识码 | ||
216 | zl:'', //坐落 | ||
217 | xmmc:'', //项目名称 | ||
218 | jgrq:'', //竣工日期 | ||
219 | bz:'', //备注 | ||
220 | fwxzbsm:'', //房屋性质ID | ||
221 | fwcbbsm:'', //房屋产别ID | ||
222 | fwcqlybsm:'', //房屋产权来源ID | ||
223 | dlsytdmj:'', //独立使用土地面积 | ||
224 | fttdsymj:'', //分摊土地使用面积 | ||
225 | zdmj:'', //占地面积 | ||
226 | name:'', | ||
227 | date:'', | ||
228 | ytList:[{ | ||
229 | glbsm:'', //关联标识码 | ||
230 | fwytzdbsm:'', //房屋用途字典标识码 | ||
231 | sx:'', //顺序 | ||
232 | fwsjytbsm:'', //房屋实际用途字典标识码 | ||
233 | }], | ||
234 | qlxzList:[{ | ||
235 | qlxzdm:'', //权利性质代码 | ||
236 | glbsm:'', //宗地BSM、自然幢BSM、户BSM、多幢BSM、宗海BSM | ||
237 | qlxzzdbsm:'', //权利性质字典表标识码 | ||
238 | qlxzmc:'', //权利名称名称 | ||
239 | zhqlxzlx:'', //除宗海数据外,默认都是空;0:用海类型权利性质;2:海岛用途权利性质 | ||
240 | addQjTdytRequestList:[{ | ||
241 | }], //土地用途新增实体列表 | ||
242 | }] | ||
243 | }, | ||
244 | options: [{ | ||
245 | value: '选项1', | ||
246 | label: '黄金糕' | ||
247 | }, { | ||
248 | value: '选项2', | ||
249 | label: '双皮奶' | ||
250 | }, { | ||
251 | value: '选项3', | ||
252 | label: '蚵仔煎' | ||
253 | }, { | ||
254 | value: '选项4', | ||
255 | label: '龙须面' | ||
256 | }, { | ||
257 | value: '选项5', | ||
258 | label: '北京烤鸭' | ||
259 | }], | ||
260 | value: '', | ||
261 | ytTitleRowspan:1, //用途的单元格垂直合并数量 | ||
262 | fwjgTitleRowspan:1, //房屋结构的单元格垂直合并数量 | ||
263 | qlxzGroupTitleRowspan:1, //房屋结构的单元格垂直合并数量 | ||
264 | qlxzItemTitleRowspan:1, //房屋结构的单元格垂直合并数量 | ||
265 | } | ||
266 | }, | ||
267 | methods: { | ||
268 | addYtInfo(){ | ||
269 | this.form.ytList.push({ | ||
270 | glbsm:'', | ||
271 | fwytzdbsm:'', | ||
272 | fwsjytbsm:'', | ||
273 | sx:'', | ||
274 | }); | ||
275 | this.ytTitleRowspan=this.form.ytList.length; | ||
276 | }, | ||
277 | deleteYtInfo(index){ | ||
278 | if(this.form.ytList.length<=1){ | ||
279 | this.$message({ | ||
280 | message: '不能删除,最少含有一条用途信息', | ||
281 | type: 'warning' | ||
282 | }); | ||
283 | }else{ | ||
284 | this.form.ytList.splice(index,1); | ||
285 | this.ytTitleRowspan=this.form.ytList.length; | ||
286 | } | ||
287 | }, | ||
288 | addFwjgInfo(){ | ||
289 | this.form.fwjgList.push({ | ||
290 | fwjgzdbsm:'', //房屋结构字典标识码 | ||
291 | glbsm:'', //关联标识码 | ||
292 | sx:'', //顺序 | ||
293 | }); | ||
294 | this.fwjgTitleRowspan=this.form.fwjgList.length; | ||
295 | }, | ||
296 | deleteFwjgInfo(index){ | ||
297 | if(this.form.fwjgList.length<=1){ | ||
298 | this.$message({ | ||
299 | message: '不能删除,最少含有一条房屋结构信息', | ||
300 | type: 'warning' | ||
301 | }); | ||
302 | }else{ | ||
303 | this.form.fwjgList.splice(index,1); | ||
304 | this.fwjgTitleRowspan=this.form.fwjgList.length; | ||
305 | } | ||
306 | }, | ||
307 | addQlxzGroup(){ | ||
308 | this.form.qlxzList.push({ | ||
309 | qlxzdm: '', //权利性质代码 | ||
310 | glbsm: '', //宗地BSM、自然幢BSM、户BSM、多幢BSM、宗海BSM | ||
311 | qlxzzdbsm: '', //权利性质字典表标识码 | ||
312 | qlxzmc: '', //权利名称名称 | ||
313 | zhqlxzlx: '', //除宗海数据外,默认都是空;0:用海类型权利性质;2:海岛用途权利性质 | ||
314 | addQjTdytRequestList: [{}] | ||
315 | }); | ||
316 | }, | ||
317 | deleteQlxzGroup(index){ | ||
318 | if(this.form.qlxzList.length<=1){ | ||
319 | this.$message({ | ||
320 | message: '不能删除,最少含有一条权利性质信息', | ||
321 | type: 'warning' | ||
322 | }); | ||
323 | }else{ | ||
324 | this.form.qlxzList.splice(index,1); | ||
325 | } | ||
326 | }, | ||
327 | addQlxzItem(index){ | ||
328 | this.form.qlxzList | ||
329 | }, | ||
330 | |||
331 | deleteQlxzItem(index){ | ||
332 | |||
333 | }, | ||
334 | |||
335 | |||
336 | onSave(){ | ||
337 | console.log(this.form) | ||
338 | }, | ||
339 | onSubmit(){ | ||
340 | console.log(this.form) | ||
341 | } | ||
342 | } | ||
343 | } | ||
344 | </script> | ||
345 | <style rel="stylesheet/less" lang="less"> | ||
346 | @import 'index.less'; | ||
347 | </style> | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
src/views/basic/h/index.less
0 → 100644
1 | .zrz { | ||
2 | min-height: 200px; | ||
3 | width: 100%; | ||
4 | margin-top: 10px; | ||
5 | float: left; | ||
6 | |||
7 | .el-input__inner{ | ||
8 | width: 100%; | ||
9 | border: 0; | ||
10 | } | ||
11 | |||
12 | textarea{ | ||
13 | width: 100%; | ||
14 | border: 0; | ||
15 | } | ||
16 | |||
17 | |||
18 | .el-form-item{ | ||
19 | font-weight: bold; | ||
20 | font-size: xx-large | ||
21 | } | ||
22 | |||
23 | table{ | ||
24 | background: #fff; | ||
25 | } | ||
26 | |||
27 | td{ | ||
28 | //bgcolor:#F1F4FC; | ||
29 | bgcolor:#fff; | ||
30 | width:8.33% | ||
31 | } | ||
32 | |||
33 | .el-select{ | ||
34 | display:block; | ||
35 | } | ||
36 | } | ||
37 | |||
38 | table{ | ||
39 | font-size: 14px; | ||
40 | } | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
src/views/basic/h/index.vue
0 → 100644
1 | <template> | ||
2 | <div class="zrz content-form"> | ||
3 | <el-form ref="form" :model="form" label-width="160px"> | ||
4 | <table border="1" width="80%" cellspacing="1" cellpadding="2"> | ||
5 | <tbody> | ||
6 | <tr> | ||
7 | <td colspan="1"></td> | ||
8 | <td colspan="1"></td> | ||
9 | <td colspan="1"></td> | ||
10 | <td colspan="1"></td> | ||
11 | <td colspan="1"></td> | ||
12 | <td colspan="1"></td> | ||
13 | <td colspan="1"></td> | ||
14 | <td colspan="1"></td> | ||
15 | <td colspan="1"></td> | ||
16 | <td colspan="1"></td> | ||
17 | <td colspan="1"></td> | ||
18 | <td colspan="1"></td> | ||
19 | </tr> | ||
20 | <tr height="30"> | ||
21 | <td colspan="12" align="center" ><font size="4">户基本信息</font></td> | ||
22 | </tr> | ||
23 | <tr height="30"> | ||
24 | <td colspan="2" align="center" >宗地代码</td> | ||
25 | <td colspan="4" > | ||
26 | <el-input v-model="form.zdbsm"></el-input> | ||
27 | </td> | ||
28 | <td colspan="2" align="center" >自然幢号</td> | ||
29 | <td colspan="4" > | ||
30 | <el-input v-model="form.zrzh"></el-input> | ||
31 | </td> | ||
32 | </tr> | ||
33 | <tr height="30"> | ||
34 | <td colspan="2" align="center" >不动产单元号</td> | ||
35 | <!-- todo 此处暂时存放的是不动产单元号标识码,而不是不动产单元号--> | ||
36 | <td colspan="4" > | ||
37 | <el-input v-model="form.dyhbsm" style="width: 70%"></el-input> | ||
38 | <el-button @click.prevent="" size="mini" type="primary" style="width:25%;margin-left:3%">生成</el-button> | ||
39 | </td> | ||
40 | <td colspan="2" align="center" >原不动产单元</td> | ||
41 | <td colspan="4" > | ||
42 | <el-input v-model="form.ydybsm"></el-input> | ||
43 | </td> | ||
44 | </tr> | ||
45 | |||
46 | <tr height="30"> | ||
47 | <td colspan="2" align="center" >逻辑幢号</td> | ||
48 | <td colspan="4" > | ||
49 | <el-input v-model="form.ljzbsm"></el-input> | ||
50 | </td> | ||
51 | <td colspan="2" align="center" >层号</td> | ||
52 | <td colspan="4" > | ||
53 | <el-input v-model="form.cbsm"></el-input> | ||
54 | </td> | ||
55 | </tr> | ||
56 | |||
57 | <tr height="30"> | ||
58 | <td colspan="2" align="center" >实际层数</td> | ||
59 | <td colspan="4" > | ||
60 | <el-input v-model="form.sjcs"></el-input> | ||
61 | </td> | ||
62 | <td colspan="2" align="center" >实际层</td> | ||
63 | <td colspan="4" > | ||
64 | <el-input v-model="form.sjc"></el-input> | ||
65 | </td> | ||
66 | </tr> | ||
67 | |||
68 | <tr height="30"> | ||
69 | <td colspan="2" align="center" >所在单元</td> | ||
70 | <td colspan="4" > | ||
71 | <el-input v-model="form.dyhbsm"></el-input> | ||
72 | </td> | ||
73 | <td colspan="2" align="center" >房屋编号</td> | ||
74 | <td colspan="4" > | ||
75 | <el-input v-model="form.fwbh"></el-input> | ||
76 | </td> | ||
77 | </tr> | ||
78 | |||
79 | <tr height="30"> | ||
80 | <td colspan="2" align="center" >房屋类型</td> | ||
81 | <td colspan="4" > | ||
82 | <el-select v-model="form.fwlxbsm" placeholder="请选择" > | ||
83 | <el-option | ||
84 | v-for="item in options" | ||
85 | :key="item.value" | ||
86 | :label="item.label" | ||
87 | :value="item.value"> | ||
88 | </el-option> | ||
89 | </el-select> | ||
90 | </td> | ||
91 | <td colspan="2" align="center" >房屋性质</td> | ||
92 | <td colspan="4" > | ||
93 | <el-select v-model="form.fwxzbsm" placeholder="请选择" > | ||
94 | <el-option | ||
95 | v-for="item in options" | ||
96 | :key="item.value" | ||
97 | :label="item.label" | ||
98 | :value="item.value"> | ||
99 | </el-option> | ||
100 | </el-select> | ||
101 | </td> | ||
102 | </tr> | ||
103 | |||
104 | <tr height="30"> | ||
105 | <td colspan="2" align="center" >户号</td> | ||
106 | <td colspan="4" > | ||
107 | <el-input v-model="form.hh"></el-input> | ||
108 | </td> | ||
109 | <td colspan="2" align="center" >室号</td> | ||
110 | <td colspan="4" > | ||
111 | <el-input v-model="form.shbw"></el-input> | ||
112 | </td> | ||
113 | </tr> | ||
114 | |||
115 | <tr height="30"> | ||
116 | <td colspan="2" align="center" >户型</td> | ||
117 | <td colspan="4" > | ||
118 | <el-select v-model="form.hxbsm" placeholder="请选择" > | ||
119 | <el-option | ||
120 | v-for="item in options" | ||
121 | :key="item.value" | ||
122 | :label="item.label" | ||
123 | :value="item.value"> | ||
124 | </el-option> | ||
125 | </el-select> | ||
126 | </td> | ||
127 | <td colspan="2" align="center" >户型结构</td> | ||
128 | <td colspan="4" > | ||
129 | <el-select v-model="form.hxbsm" placeholder="请选择" > | ||
130 | <el-option | ||
131 | v-for="item in options" | ||
132 | :key="item.value" | ||
133 | :label="item.label" | ||
134 | :value="item.value"> | ||
135 | </el-option> | ||
136 | </el-select> | ||
137 | </td> | ||
138 | </tr> | ||
139 | |||
140 | <tr height="30"> | ||
141 | <td colspan="2" align="center" >产别</td> | ||
142 | <td colspan="4" > | ||
143 | <el-select v-model="form.fwcbbsm" placeholder="请选择" > | ||
144 | <el-option | ||
145 | v-for="item in options" | ||
146 | :key="item.value" | ||
147 | :label="item.label" | ||
148 | :value="item.value"> | ||
149 | </el-option> | ||
150 | </el-select> | ||
151 | </td> | ||
152 | <td colspan="2" align="center" >产权来源</td> | ||
153 | <td colspan="4" > | ||
154 | <el-select v-model="form.fwcqlybsm" placeholder="请选择" > | ||
155 | <el-option | ||
156 | v-for="item in options" | ||
157 | :key="item.value" | ||
158 | :label="item.label" | ||
159 | :value="item.value"> | ||
160 | </el-option> | ||
161 | </el-select> | ||
162 | </td> | ||
163 | </tr> | ||
164 | |||
165 | <tr height="30"> | ||
166 | <td colspan="2" rowspan="6" align="center" >预测</td> | ||
167 | <td colspan="2" align="center" >建筑面积(㎡) </td> | ||
168 | <td colspan="2" align="center" > | ||
169 | <el-input v-model="form.jzmj"></el-input> | ||
170 | </td> | ||
171 | <td colspan="2" rowspan="6" align="center" >实测</td> | ||
172 | <td colspan="2" align="center" >建筑面积(㎡)</td> | ||
173 | <td colspan="2" align="center" > | ||
174 | <el-input v-model="form.jzmj"></el-input> | ||
175 | </td> | ||
176 | </tr> | ||
177 | <tr height="30"> | ||
178 | <td colspan="2" align="center" >套内建筑面积(㎡))</td> | ||
179 | <td colspan="2" align="center" > | ||
180 | <el-input v-model="form.tnjzmj"></el-input> | ||
181 | </td> | ||
182 | <td colspan="2" align="center" >套内建筑面积(㎡)</td> | ||
183 | <td colspan="2" align="center" > | ||
184 | <el-input v-model="form.tnjzmj"></el-input> | ||
185 | </td> | ||
186 | </tr> | ||
187 | <tr height="30"> | ||
188 | <td colspan="2" align="center" >分摊建筑面积(㎡)</td> | ||
189 | <td colspan="2" align="center" > | ||
190 | <el-input v-model="form.ftjzmj"></el-input> | ||
191 | </td> | ||
192 | <td colspan="2" align="center" >分摊建筑面积(㎡)</td> | ||
193 | <td colspan="2" align="center" > | ||
194 | <el-input v-model="form.ftjzmj"></el-input> | ||
195 | </td> | ||
196 | </tr> | ||
197 | <tr height="30"> | ||
198 | <td colspan="2" align="center" >地下部分建筑面积(㎡)</td> | ||
199 | <td colspan="2" align="center" > | ||
200 | <el-input v-model="form.dxbfjzmj"></el-input> | ||
201 | </td> | ||
202 | <td colspan="2" align="center" >地下部分建筑面积(㎡)</td> | ||
203 | <td colspan="2" align="center" > | ||
204 | <el-input v-model="form.dxbfjzmj"></el-input> | ||
205 | </td> | ||
206 | </tr> | ||
207 | <tr height="30"> | ||
208 | <td colspan="2" align="center" >其它建筑面积(㎡)</td> | ||
209 | <td colspan="2" align="center" > | ||
210 | <el-input v-model="form.qtjzmj"></el-input> | ||
211 | </td> | ||
212 | <td colspan="2" align="center" >其它建筑面积(㎡)</td> | ||
213 | <td colspan="2" align="center" > | ||
214 | <el-input v-model="form.qtjzmj"></el-input> | ||
215 | </td> | ||
216 | </tr> | ||
217 | <tr height="30"> | ||
218 | <td colspan="2" align="center" >分摊系数</td> | ||
219 | <td colspan="2" align="center" > | ||
220 | <el-input v-model="form.ftxs"></el-input> | ||
221 | </td> | ||
222 | <td colspan="2" align="center" >分摊系数</td> | ||
223 | <td colspan="2" align="center" > | ||
224 | <el-input v-model="form.ftxs"></el-input> | ||
225 | </td> | ||
226 | </tr> | ||
227 | |||
228 | |||
229 | <tr height="30" v-for="(item1,index) in form.ytList" :key="index"> | ||
230 | <td v-if="index===0" colspan="2" :rowspan="ytTitleRowspan" align="center" id="ytTitle"> | ||
231 | <el-button type="primary" size="mini" style="margin-right: 10px" @click="addYtInfo">添加</el-button> | ||
232 | <span>用途</span> | ||
233 | </td> | ||
234 | |||
235 | <td width="30" colspan="1" align="center" > | ||
236 | <el-button type="info" size="mini" style="" @click="deleteYtInfo(index)" circle>删除</el-button> | ||
237 | 规划用途 | ||
238 | </td> | ||
239 | <td width="30" colspan="4" align="center" > | ||
240 | <el-select v-model="item1.fwytzdbsm" placeholder="请选择" > | ||
241 | <el-option | ||
242 | v-for="item in options" | ||
243 | :key="item.value" | ||
244 | :label="item.label" | ||
245 | :value="item.value"> | ||
246 | </el-option> | ||
247 | </el-select> | ||
248 | </td> | ||
249 | <td width="30" colspan="1" align="center" >用途</td> | ||
250 | <td width="30" colspan="4" align="center" > | ||
251 | <el-select v-model="item1.fwsjytbsm" placeholder="请选择" > | ||
252 | <el-option | ||
253 | v-for="item in options" | ||
254 | :key="item.value" | ||
255 | :label="item.label" | ||
256 | :value="item.value"> | ||
257 | </el-option> | ||
258 | </el-select> | ||
259 | </td> | ||
260 | </tr> | ||
261 | |||
262 | <tr height="30" v-for="(item1,index) in form.fwjgList" :key="'jg'+index"> | ||
263 | <td colspan="2" v-if="index===0" :rowspan="fwjgTitleRowspan" align="center" > | ||
264 | <el-button type="primary" size="mini" style="margin-right: 10px" @click="addFwjgInfo">添加</el-button> | ||
265 | <span>房屋结构</span> | ||
266 | </td> | ||
267 | <td colspan="1" align="center" > | ||
268 | <span @click="deleteFwjgInfo(index)">删除</span> | ||
269 | </td> | ||
270 | <td colspan="9" > | ||
271 | <el-select v-model="item1.fwjgzdbsm" placeholder="请选择" > | ||
272 | <el-option | ||
273 | v-for="item in options" | ||
274 | :key="item.value" | ||
275 | :label="item.label" | ||
276 | :value="item.value"> | ||
277 | </el-option> | ||
278 | </el-select> | ||
279 | </td> | ||
280 | </tr> | ||
281 | |||
282 | <tr height="30"> | ||
283 | <td colspan="2" align="center" >共有土地面积(㎡)</td> | ||
284 | <td colspan="2" > | ||
285 | <el-input v-model="form.zdmj"></el-input> | ||
286 | </td> | ||
287 | <td colspan="2" align="center" >分摊土地面积(㎡)</td> | ||
288 | <td colspan="2" > | ||
289 | <el-input v-model="form.fttdsymj"></el-input> | ||
290 | </td> | ||
291 | <td colspan="2" align="center" >多幢独用土地面积(㎡)</td> | ||
292 | <td colspan="2" > | ||
293 | <el-input v-model="form.dlsytdmj"></el-input> | ||
294 | </td> | ||
295 | </tr> | ||
296 | |||
297 | <tr height="30"> | ||
298 | <td colspan="2" align="center" > | ||
299 | <span>坐落</span> | ||
300 | </td> | ||
301 | <td colspan="10" > | ||
302 | <el-input v-model="form.zl"></el-input> | ||
303 | </td> | ||
304 | </tr> | ||
305 | |||
306 | <tr height="30"> | ||
307 | <td colspan="2" align="center" >东墙体归属</td> | ||
308 | <td colspan="4" > | ||
309 | <el-input v-model="form.dqtgs"></el-input> | ||
310 | </td> | ||
311 | <td colspan="2" align="center" >南墙体归属</td> | ||
312 | <td colspan="4" > | ||
313 | <el-input v-model="form.nqtgs"></el-input> | ||
314 | </td> | ||
315 | </tr> | ||
316 | |||
317 | <tr height="30"> | ||
318 | <td colspan="2" align="center" >西墙体归属</td> | ||
319 | <td colspan="4" > | ||
320 | <el-input v-model="form.xqtgs"></el-input> | ||
321 | </td> | ||
322 | <td colspan="2" align="center" >北墙体归属</td> | ||
323 | <td colspan="4" > | ||
324 | <el-input v-model="form.bqtgs"></el-input> | ||
325 | </td> | ||
326 | </tr> | ||
327 | |||
328 | <tr height="30"> | ||
329 | <td colspan="2" rowspan="2" align="center" > | ||
330 | <span>附加说明</span> | ||
331 | </td> | ||
332 | <td colspan="10" rowspan="2" > | ||
333 | <el-input v-model="form.bz" type="textarea"></el-input> | ||
334 | </td> | ||
335 | </tr> | ||
336 | <tr height="30"> | ||
337 | </tr> | ||
338 | |||
339 | <tr height="30"> | ||
340 | <td colspan="2" rowspan="2" align="center" > | ||
341 | <span>调查意见</span> | ||
342 | </td> | ||
343 | <td colspan="10" > | ||
344 | <el-input v-model="form.name"></el-input> | ||
345 | </td> | ||
346 | </tr> | ||
347 | |||
348 | <tr height="30"> | ||
349 | <td colspan="4" rowspan="2" align="right" style="width:8.33%;padding-right:10px"> | ||
350 | <span>审查员</span> | ||
351 | </td> | ||
352 | <td colspan="2" > | ||
353 | <el-input v-model="form.name"></el-input> | ||
354 | </td> | ||
355 | <td colspan="2" rowspan="2" align="right" style="width:8.33%;padding-right:10px"> | ||
356 | <span>审查日期</span> | ||
357 | </td> | ||
358 | <td colspan="2" > | ||
359 | <el-date-picker | ||
360 | v-model="form.date" | ||
361 | type="date" | ||
362 | placeholder="选择日期"> | ||
363 | </el-date-picker> | ||
364 | </td> | ||
365 | </tr> | ||
366 | </tbody> | ||
367 | </table> | ||
368 | </el-form> | ||
369 | <div style="min-height: 40px;text-align: center;margin-top: 10px"> | ||
370 | <el-button type="success" @click="onSave">保存</el-button> | ||
371 | <el-button type="primary" @click="onSubmit">提交</el-button> | ||
372 | </div> | ||
373 | </div> | ||
374 | |||
375 | </template> | ||
376 | |||
377 | <script> | ||
378 | export default { | ||
379 | name:'zrz', | ||
380 | data () { | ||
381 | return { | ||
382 | form:{ | ||
383 | zrzbsm:'', //自然幢标识码 | ||
384 | ljzbsm:'', //逻辑幢标识码 | ||
385 | zdybsm:'', //幢单元标识码 | ||
386 | cbsm:'', //层标识码 | ||
387 | zdbsm:'', //宗地标识码 | ||
388 | dyhbsm:'', //不动产单元号标识码 | ||
389 | ydybsm:'', //原单元标识码 | ||
390 | zrzh:'', //自然幢号 | ||
391 | mjdwbsm:'', //面积单位编号 | ||
392 | sjcs:'', //实际层数 | ||
393 | hh:'', //户号 | ||
394 | hxbsm:'', //户型标识码 | ||
395 | dltdmj:'', //独立使用土地面积 | ||
396 | fttdmj:'', //分摊土地使用面积 | ||
397 | gytdmj:'', //共有土地面积 | ||
398 | fwlxbsm:'', //房屋类型标识码 | ||
399 | fwxzbsm:'', //房屋性质标识码 | ||
400 | sjc:'', //实际层 | ||
401 | dqtgs:'', //东墙体归属 | ||
402 | nqtgs:'', //南墙体归属 | ||
403 | xqtgs:'', //西墙体归属 | ||
404 | bqtgs:'', //北墙体归属 | ||
405 | fwbh:'', //房屋编号 | ||
406 | fjsm:'', //附加说明 | ||
407 | fwcbbsm:'', //房屋产别标识码 | ||
408 | sjhs:'', //实际户数 | ||
409 | shbw:'', //室号部位 | ||
410 | fwcqlybsm:'', //房屋产权来源标识码 | ||
411 | myc:'', //名义层 | ||
412 | qszt:'', //权属状态 | ||
413 | jzmj:'', //建筑面积 | ||
414 | tnjzmj:'', //套内建筑面积 | ||
415 | ftjzmj:'', //分摊建筑面积 | ||
416 | dxbfjzmj:'', //地下部分建筑面积 | ||
417 | qtjzmj:'', //其它建筑面积 | ||
418 | ftxs:'', //分摊系数 | ||
419 | scyclx:'', //实预测类型(0:预测,1:实测;),区别户是实测还是预测数据 | ||
420 | scycglbsm:'', //实测预测关联标识码 | ||
421 | ch:'', //层号 | ||
422 | bz:'', //备注 | ||
423 | name:'', | ||
424 | date:'', | ||
425 | ytList:[{ | ||
426 | glbsm:'', //关联标识码 | ||
427 | fwytzdbsm:'', //房屋用途字典标识码 | ||
428 | sx:'', //顺序 | ||
429 | fwsjytbsm:'', //房屋实际用途字典标识码 | ||
430 | }], | ||
431 | fwjgList:[{ | ||
432 | fwjgzdbsm:'', //房屋结构字典标识码 | ||
433 | glbsm:'', //关联标识码 | ||
434 | sx:'', //顺序 | ||
435 | }], | ||
436 | qlxzList:[{ | ||
437 | qlxzdm:'', //权利性质代码 | ||
438 | glbsm:'', //宗地BSM、自然幢BSM、户BSM、多幢BSM、宗海BSM | ||
439 | qlxzzdbsm:'', //权利性质字典表标识码 | ||
440 | qlxzmc:'', //权利名称名称 | ||
441 | zhqlxzlx:'', //除宗海数据外,默认都是空;0:用海类型权利性质;2:海岛用途权利性质 | ||
442 | addQjTdytRequestList:[{ | ||
443 | }], //土地用途新增实体列表 | ||
444 | }] | ||
445 | }, | ||
446 | options: [{ | ||
447 | value: '选项1', | ||
448 | label: '黄金糕' | ||
449 | }, { | ||
450 | value: '选项2', | ||
451 | label: '双皮奶' | ||
452 | }, { | ||
453 | value: '选项3', | ||
454 | label: '蚵仔煎' | ||
455 | }, { | ||
456 | value: '选项4', | ||
457 | label: '龙须面' | ||
458 | }, { | ||
459 | value: '选项5', | ||
460 | label: '北京烤鸭' | ||
461 | }], | ||
462 | value: '', | ||
463 | ytTitleRowspan:1, //用途的单元格垂直合并数量 | ||
464 | fwjgTitleRowspan:1, //房屋结构的单元格垂直合并数量 | ||
465 | } | ||
466 | }, | ||
467 | methods: { | ||
468 | addYtInfo(){ | ||
469 | this.form.ytList.push({ | ||
470 | glbsm:'', | ||
471 | fwytzdbsm:'', | ||
472 | fwsjytbsm:'', | ||
473 | sx:'', | ||
474 | }); | ||
475 | this.ytTitleRowspan=this.form.ytList.length; | ||
476 | }, | ||
477 | deleteYtInfo(index){ | ||
478 | if(this.form.ytList.length<=1){ | ||
479 | this.$message({ | ||
480 | message: '不能删除,最少含有一条用途信息', | ||
481 | type: 'warning' | ||
482 | }); | ||
483 | }else{ | ||
484 | this.form.ytList.splice(index,1); | ||
485 | this.ytTitleRowspan=this.form.ytList.length; | ||
486 | } | ||
487 | }, | ||
488 | addFwjgInfo(){ | ||
489 | this.form.fwjgList.push({ | ||
490 | fwjgzdbsm:'', //房屋结构字典标识码 | ||
491 | glbsm:'', //关联标识码 | ||
492 | sx:'', //顺序 | ||
493 | }); | ||
494 | this.fwjgTitleRowspan=this.form.fwjgList.length; | ||
495 | }, | ||
496 | deleteFwjgInfo(index){ | ||
497 | if(this.form.fwjgList.length<=1){ | ||
498 | this.$message({ | ||
499 | message: '不能删除,最少含有一条房屋结构信息', | ||
500 | type: 'warning' | ||
501 | }); | ||
502 | }else{ | ||
503 | this.form.fwjgList.splice(index,1); | ||
504 | this.fwjgTitleRowspan=this.form.fwjgList.length; | ||
505 | } | ||
506 | }, | ||
507 | onSave(){ | ||
508 | console.log(this.form) | ||
509 | }, | ||
510 | onSubmit(){ | ||
511 | console.log(this.form) | ||
512 | } | ||
513 | } | ||
514 | } | ||
515 | </script> | ||
516 | <style rel="stylesheet/less" lang="less"> | ||
517 | @import 'index.less'; | ||
518 | </style> | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
src/views/basic/zrz/index.less
0 → 100644
1 | .zrz { | ||
2 | min-height: 200px; | ||
3 | width: 100%; | ||
4 | margin-top: 10px; | ||
5 | float: left; | ||
6 | |||
7 | .el-input__inner{ | ||
8 | width: 100%; | ||
9 | border: 0; | ||
10 | } | ||
11 | |||
12 | textarea{ | ||
13 | width: 100%; | ||
14 | border: 0; | ||
15 | } | ||
16 | |||
17 | |||
18 | .el-form-item{ | ||
19 | font-weight: bold; | ||
20 | font-size: xx-large | ||
21 | } | ||
22 | |||
23 | table{ | ||
24 | background: #fff; | ||
25 | } | ||
26 | |||
27 | td{ | ||
28 | //bgcolor:#F1F4FC; | ||
29 | bgcolor:#fff; | ||
30 | width:8.33% | ||
31 | } | ||
32 | |||
33 | .el-select{ | ||
34 | display:block; | ||
35 | } | ||
36 | |||
37 | table{ | ||
38 | font-size: 14px; | ||
39 | } | ||
40 | } | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
1 | <template> | 1 | <template> |
2 | <div class="zrz content-form"> | 2 | <div class="zrz content-form"> |
3 | <el-form ref="form" :model="form" label-width="160px"> | 3 | <el-form ref="form" :model="form" label-width="160px"> |
4 | <table border="1" width="90%" cellspacing="1" cellpadding="2"> | 4 | <table border="1" width="80%" cellspacing="1" cellpadding="2"> |
5 | <tbody> | 5 | <tbody> |
6 | <tr> | 6 | <tr> |
7 | <td colspan="1"></td> | 7 | <td colspan="1"></td> |
... | @@ -18,7 +18,7 @@ | ... | @@ -18,7 +18,7 @@ |
18 | <td colspan="1"></td> | 18 | <td colspan="1"></td> |
19 | </tr> | 19 | </tr> |
20 | <tr height="30"> | 20 | <tr height="30"> |
21 | <td colspan="12" align="center" ><font size="5">自然幢基本信息</font></td> | 21 | <td colspan="12" align="center" ><font size="4">自然幢基本信息</font></td> |
22 | </tr> | 22 | </tr> |
23 | <tr height="30"> | 23 | <tr height="30"> |
24 | <td colspan="2" align="center" >宗地代码</td> | 24 | <td colspan="2" align="center" >宗地代码</td> |
... | @@ -28,7 +28,7 @@ | ... | @@ -28,7 +28,7 @@ |
28 | <td colspan="2" align="center" >自然幢号</td> | 28 | <td colspan="2" align="center" >自然幢号</td> |
29 | <td colspan="4" > | 29 | <td colspan="4" > |
30 | <el-input v-model="form.zrzh" style="width: 70%"></el-input> | 30 | <el-input v-model="form.zrzh" style="width: 70%"></el-input> |
31 | <el-button @click.prevent="" type="primary" style="width:25%;margin-left:3%">生成</el-button> | 31 | <el-button @click.prevent="" type="primary" size="mini" style="width:25%;margin-left:3%">生成</el-button> |
32 | </td> | 32 | </td> |
33 | </tr> | 33 | </tr> |
34 | <tr height="30"> | 34 | <tr height="30"> |
... | @@ -40,7 +40,7 @@ | ... | @@ -40,7 +40,7 @@ |
40 | <!-- todo 此处暂时存放的是不动产单元号标识码,而不是不动产单元号--> | 40 | <!-- todo 此处暂时存放的是不动产单元号标识码,而不是不动产单元号--> |
41 | <td colspan="4" > | 41 | <td colspan="4" > |
42 | <el-input v-model="form.dyhbsm" style="width: 70%"></el-input> | 42 | <el-input v-model="form.dyhbsm" style="width: 70%"></el-input> |
43 | <el-button @click.prevent="" type="primary" style="width:25%;margin-left:3%">生成</el-button> | 43 | <el-button @click.prevent="" type="primary" size="mini" style="width:25%;margin-left:3%">生成</el-button> |
44 | </td> | 44 | </td> |
45 | </tr> | 45 | </tr> |
46 | 46 | ||
... | @@ -394,5 +394,5 @@ | ... | @@ -394,5 +394,5 @@ |
394 | } | 394 | } |
395 | </script> | 395 | </script> |
396 | <style rel="stylesheet/less" lang="less"> | 396 | <style rel="stylesheet/less" lang="less"> |
397 | @import './index.less'; | 397 | @import 'index.less'; |
398 | </style> | 398 | </style> |
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
-
Please register or sign in to post a comment