Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
17404ef3 by 杨威
Options

新增权利性质组件

1 parent f49ca0ed
Inline Side-by-side
Showing 1 changed file with 336 additions and 0 deletions
1 <template>
2 <div class="temp">
3 <el-row
4 class="qlxzModule"
5 v-for="(items, index) in countList"
6 :key="items.id"
7 >
8 <el-col :span="2">
9 <el-button
10 v-if="!items.isInside"
11 type="primary"
12 class="changeBtn"
13 @click="handleClick(items.id, index, 'add')"
14 >+</el-button
15 >
16 <el-button
17 v-if="!items.isInside"
18 type="primary"
19 class="changeBtn"
20 @click="handleClick(items.id, index, 'minus')"
21 >-</el-button
22 >
23 </el-col>
24 <el-col :span="2">
25 <span class="qlxz">权利性质</span>
26 <el-button
27 type="primary"
28 class="changeBtn mt6"
29 @click="handleInClick(items, index, 'add')"
30 >+</el-button
31 >
32 <el-button
33 type="primary"
34 class="changeBtn"
35 @click="handleInClick(items, index, 'minus')"
36 >-</el-button
37 >
38 </el-col>
39 <el-col :span="3">
40 <ul>
41 <li>批准用途</li>
42 <li>实际用途</li>
43 <li>土地使用起始时间</li>
44 </ul>
45 </el-col>
46 <el-col :span="4">
47 <ul>
48 <li>
49 <el-select class="formSelect percent30" v-model="items.pzyt">
50 <el-option
51 v-for="item in compareList"
52 :key="item.value"
53 :label="item.label"
54 :value="item.value"
55 >
56 </el-option>
57 </el-select>
58 </li>
59 <li>
60 <el-select class="formSelect percent30" v-model="items.sjyt">
61 <el-option
62 v-for="item in compareList"
63 :key="item.value"
64 :label="item.label"
65 :value="item.value"
66 >
67 </el-option>
68 </el-select>
69 </li>
70 <li>
71 <el-date-picker
72 v-model="items.tdsyqssj"
73 type="date"
74 placeholder="选择日期"
75 >
76 </el-date-picker>
77 </li>
78 </ul>
79 </el-col>
80 <el-col :span="3">
81 <ul>
82 <li>地类编码</li>
83 <li>地类编码</li>
84 <li>年限</li>
85 </ul>
86 </el-col>
87 <el-col :span="3">
88 <ul>
89 <li>
90 <input type="text" v-model="items.dlbm" class="formInput" />
91 </li>
92 <li>
93 <input type="text" v-model="items.dlbm2" class="formInput" />
94 </li>
95 <li>
96 <input type="text" v-model="items.nx" class="formInput" />
97 </li>
98 </ul>
99 </el-col>
100 <el-col :span="3">
101 <ul>
102 <li>等级</li>
103 <li>等级</li>
104 <li>土地使用结束时间</li>
105 </ul>
106 </el-col>
107 <el-col :span="4">
108 <ul>
109 <li>
110 <el-select class="formSelect percent30" v-model="items.dj1">
111 <el-option
112 v-for="item in compareList"
113 :key="item.value"
114 :label="item.label"
115 :value="item.value"
116 >
117 </el-option>
118 </el-select>
119 </li>
120 <li>
121 <el-select class="formSelect percent30" v-model="items.dj2">
122 <el-option
123 v-for="item in compareList"
124 :key="item.value"
125 :label="item.label"
126 :value="item.value"
127 >
128 </el-option>
129 </el-select>
130 </li>
131 <li>
132 <el-date-picker
133 v-model="items.tdsyjssj"
134 type="date"
135 placeholder="选择日期"
136 >
137 </el-date-picker>
138 </li>
139 </ul>
140 </el-col>
141 <div class="title">
142 <el-select class="formSelect" v-model="items.qlxz">
143 <el-option
144 v-for="item in compareList"
145 :key="item.value"
146 :label="item.label"
147 :value="item.value"
148 >
149 </el-option>
150 </el-select>
151 </div>
152 </el-row>
153 </div>
154 </template>
155
156 <script>
157 export default {
158 props: {
159 widtd: {
160 type: String,
161 default: "70%",
162 },
163 title: {
164 type: String,
165 default: "",
166 },
167 topHeight: {
168 type: String,
169 default: "15vh",
170 },
171 },
172 data() {
173 return {
174 compareList: [
175 { label: "=", value: "=" },
176 { label: "<=", value: "<=" },
177 { label: ">=", value: ">=" },
178 ],
179 countList: [
180 {
181 id: Math.random(),
182 isInside: false,
183 qlxz: "",
184 pzyt: "",
185 sjyt: "",
186 tdsyqssj: "",
187 dlbm: "",
188 dlbm2: "",
189 nx: "",
190 dj1: "",
191 dj2: "",
192 tdsyjssj: "",
193 },
194 ],
195 };
196 },
197 methods: {
198 //外层操作
199 handleClick(id, ind, type) {
200 if (type === "add") {
201 this.countList.splice(ind + 1, 0, {
202 id: Math.random(),
203 isInside: false,
204 qlxz: "",
205 pzyt: "",
206 sjyt: "",
207 tdsyqssj: "",
208 dlbm: "",
209 dlbm2: "",
210 nx: "",
211 dj1: "",
212 dj2: "",
213 tdsyjssj: "",
214 });
215 } else {
216 this.countList.forEach((item, index) => {
217 if (item.id == id && this.countList.length > 1) {
218 this.countList.splice(index, 1);
219 }
220 });
221 }
222 },
223 //内层操作
224 handleInClick(obj, ind, type) {
225 if (type === "add") {
226 this.countList.splice(ind + 1, 0, {
227 id: obj.id,
228 childId: Math.random(),
229 isInside: true,
230 qlxz: "",
231 pzyt: "",
232 sjyt: "",
233 tdsyqssj: "",
234 dlbm: "",
235 dlbm2: "",
236 nx: "",
237 dj1: "",
238 dj2: "",
239 tdsyjssj: "",
240 });
241 } else {
242 if (obj.childId) {
243 this.countList.forEach((item, index) => {
244 if (item.childId == obj.childId && this.countList.length > 1) {
245 this.countList.splice(index, 1);
246 }
247 });
248 } else {
249 let tempNum = 0;
250 let tempIndex = 0;
251 this.countList.forEach((item, index) => {
252 if (item.id == obj.id && this.countList.length > 1) {
253 tempIndex = tempNum == 0 ? index : tempIndex;
254 tempNum++;
255 }
256 });
257 this.countList.splice(tempIndex,tempNum)
258 }
259 }
260 },
261 getQlxzDataList(){
262 return this.countList
263 }
264 },
265 };
266 </script>
267 <style lang="less">
268 .temp {
269 width: 100%;
270 .qlxzModule {
271 height: 148px;
272 position: relative;
273 border-bottom: 1px solid grey;
274 .el-col {
275 height: 100%;
276 border-right: 1px solid grey;
277 .qlxz {
278 line-height: 34px;
279 }
280 .mt6 {
281 margin-top: 6px;
282 }
283 ul {
284 margin-top: 34px;
285 li {
286 height: 37px;
287 line-height: 37px;
288 text-decoration: none;
289 border-bottom: 1px solid grey;
290 .el-input__inner {
291 height: 34px;
292 width: 164px;
293 }
294 }
295 li:last-child {
296 border-bottom: none;
297 }
298 }
299 }
300 .el-col:nth-last-child(2) {
301 border-right: none;
302 }
303 .title {
304 width: 83.33333%;
305 height: 34px;
306 line-height: 34px;
307 background-color: #fff;
308 border-bottom: 1px solid grey;
309 position: absolute;
310 right: 0;
311 top: 0;
312 .formSelect {
313 top: -1px;
314 width: 100%;
315 .el-input__inner {
316 height: 34px;
317 }
318 }
319 }
320 .changeBtn {
321 width: 46px;
322 height: 46px;
323 margin-top: 40px;
324 font-size: 30px;
325 padding: 6px 4px;
326 }
327 .el-button + .el-button {
328 margin-top: 10px;
329 margin-left: 0;
330 }
331 }
332 .qlxzModule:nth-last-child(1) {
333 border-bottom: none;
334 }
335 }
336 </style>