Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
76de1151 by weimo934
Options

feat(plh):批量户组件

1 parent 6ab56ace
Inline Side-by-side
Showing 1 changed file with 274 additions and 0 deletions
1 <template>
2 <div>
3 <el-dialog
4 title="新增"
5 :visible.sync="isVisible"
6 width="50%"
7 @close="close"
8 :modal-append-to-body="false"
9 center>
10 <div>
11 <table border="1">
12 <tr>
13 <td rowspan="6">预测</td>
14 <td>建筑面积(㎡)</td>
15 <td colspan="2"><input type="text" class="inputtitle"/></td>
16 <td rowspan="6">实测</td>
17 <td>建筑面积(㎡)</td>
18 <td><input type="text" class="inputtitle"/></td>
19 </tr>
20 <tr>
21 <td>套内建筑面积(㎡)</td>
22 <td colspan="2"><input type="text" class="inputtitle"/></td>
23 <td>套内建筑面积(㎡)</td>
24 <td><input type="text" class="inputtitle"/></td>
25 </tr>
26 <tr>
27 <td>分摊建筑面积(㎡)</td>
28 <td colspan="2"><input type="text" class="inputtitle"/></td>
29 <td>分摊建筑面积(㎡)</td>
30 <td><input type="text" class="inputtitle"/></td>
31 </tr>
32 <tr>
33 <td>地下部分建筑面积(㎡)</td>
34 <td colspan="2"><input type="text" class="inputtitle"/></td>
35 <td>地下部分建筑面积(㎡)</td>
36 <td><input type="text" class="inputtitle"/></td>
37 </tr>
38 <tr>
39 <td>其他建筑面积(㎡)</td>
40 <td colspan="2"><input type="text" class="inputtitle"/></td>
41 <td>其他建筑面积(㎡)</td>
42 <td><input type="text" class="inputtitle"/></td>
43 </tr>
44 <tr>
45 <td>分摊系数</td>
46 <td colspan="2"><input type="text" class="inputtitle"/></td>
47 <td>分摊系数</td>
48 <td><input type="text" class="inputtitle"/></td>
49 </tr>
50 <tr>
51 <td colspan="2">户型</td>
52 <td colspan="2">
53 <el-select>
54 <el-option
55 v-for="i in hx"
56 :key="i.key"
57 :label="i.label"
58 :value="i.value"
59 ></el-option>
60 </el-select>
61 </td>
62 <td colspan="2">户型结构</td>
63 <td>
64 <el-select>
65 <el-option
66 v-for="i in hx"
67 :key="i.key"
68 :label="i.label"
69 :value="i.value"
70 ></el-option>
71 </el-select>
72 </td>
73 </tr>
74 <tr>
75 <td colspan="2">共有土地面积(㎡)</td>
76 <td colspan="2"><input type="text" class="inputtitle"/></td>
77 <td colspan="2">分摊土地面积(㎡)</td>
78 <td><input type="text" class="inputtitle"/></td>
79 </tr>
80 <tr>
81 <td colspan="2">独有土地面积(㎡)</td>
82 <td colspan="2"><input type="text" class="inputtitle"/></td>
83 <td colspan="2">房屋类型</td>
84 <td>
85 <el-select>
86 <el-option
87 v-for="i in hx"
88 :key="i.key"
89 :label="i.label"
90 :value="i.value"
91 ></el-option>
92 </el-select>
93 </td>
94 </tr>
95 <tr>
96 <td colspan="2">产别</td>
97 <td colspan="2">
98 <el-select>
99 <el-option
100 v-for="i in hx"
101 :key="i.key"
102 :label="i.label"
103 :value="i.value"
104 ></el-option>
105 </el-select>
106 </td>
107 <td colspan="2">产权来源</td>
108 <td>
109 <input type="text" class="inputtitle"/>
110 </td>
111 </tr>
112 <tr>
113 <td colspan="2">房屋性质</td>
114 <td colspan="2">
115 <el-select>
116 <el-option
117 v-for="i in hx"
118 :key="i.key"
119 :label="i.label"
120 :value="i.value"
121 ></el-option>
122 </el-select>
123 </td>
124 <td colspan="2"></td>
125 <td></td>
126 </tr>
127 <tr>
128 <td colspan="2">房屋结构</td>
129 <td colspan="5">
130 <el-select>
131 <el-option
132 v-for="i in hx"
133 :key="i.key"
134 :label="i.label"
135 :value="i.value"
136 ></el-option>
137 </el-select>
138 </td>
139 </tr>
140 <tr>
141 <td colspan="2">房屋用途</td>
142 <td>规划用途</td>
143 <td><input type="text" class="inputtitle"/></td>
144 <td colspan="2">用途</td>
145 <td><input type="text" class="inputtitle"/></td>
146 </tr>
147 <tr>
148 <td colspan="2">
149 权利性质
150 </td>
151 <td colspan="2">
152 <input type="text" class="inputtitle"/>
153 </td>
154 <td colspan="2">
155
156 </td>
157 <td></td>
158 </tr>
159 <tr>
160 <td colspan="2">东墙体归属</td>
161 <td colspan="2"><input type="text" class="inputtitle"/></td>
162 <td colspan="2">南墙体归属</td>
163 <td><input type="text" class="inputtitle"/></td>
164 </tr>
165 <tr>
166 <td colspan="2">西墙体归属</td>
167 <td colspan="2"><input type="text" class="inputtitle"/></td>
168 <td colspan="2">北墙体归属</td>
169 <td><input type="text" class="inputtitle"/></td>
170 </tr>
171 </table>
172 </div>
173 <div class="shop">
174 <el-button type="primary" @click="save">保存</el-button>
175 <el-button type="primary" @click="result">重置</el-button>
176 <el-button type="primary" @click="cancel">取消</el-button>
177 </div>
178 </el-dialog>
179 </div>
180 </template>
181
182 <script>
183 export default {
184 name: "plH",
185 props: {
186 bsms: {
187 type: Array
188 },
189 plhVisible: {
190 type: Boolean,
191 default: false
192 }
193 },
194 data() {
195 return {
196 isVisible: false,
197 hx: [{
198 label: '一居室',
199 key: '1',
200 value: '一居室'
201 }, {
202 label: '二居室',
203 key: '2',
204 value: '二居室'
205 }, {
206 label: '三居室',
207 key: '3',
208 value: '三居室'
209 }
210 ]
211 }
212 },
213 methods: {
214 close: function () {
215 this.$emit('close')
216 this.isVisible = false
217 this.result()
218 },
219 result: function () {
220
221 },
222 save: function () {
223
224 },
225 cancel: function () {
226 this.$emit('close')
227 this.isVisible = false
228 }
229 },
230 mounted() {
231
232 },
233 watch: {
234 plhVisible(val) {
235 this.isVisible = val
236 }
237 }
238 }
239 </script>
240
241 <style scoped>
242 table {
243 margin-top: 10px;
244 background-color: #fff;
245 font-size: 14px;
246 width: 100%;
247 }
248
249 td {
250 text-align: center;
251 height: 36px;
252 min-width: 60px;
253 }
254
255 table:hover {
256 cursor: pointer;
257 }
258
259 .el-select {
260 width: 98%;
261 }
262
263 .inputtitle {
264 line-height: 40px;
265 width: 95%;
266 border: none;
267 outline: none;
268 }
269
270 .shop {
271 text-align: center;
272 margin-top: 20px;
273 }
274 </style>