Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
2bc8bbd5 by zhaoqian
Options

树型结构所有数据选择框的整理

1 parent 23e0be85
Inline Side-by-side
Showing 7 changed files with 186 additions and 98 deletions
...@@ -15,6 +15,7 @@ ...@@ -15,6 +15,7 @@
15 "axios": "^0.19.0", 15 "axios": "^0.19.0",
16 "core-js": "^2.6.5", 16 "core-js": "^2.6.5",
17 "e-icon-picker": "^1.0.7", 17 "e-icon-picker": "^1.0.7",
18 "el-select-tree": "^1.0.26",
18 "el-tree-select": "^3.1.10", 19 "el-tree-select": "^3.1.10",
19 "element-ui": "^2.13.2", 20 "element-ui": "^2.13.2",
20 "file-saver": "^2.0.2", 21 "file-saver": "^2.0.2",
......
...@@ -53,26 +53,34 @@ ...@@ -53,26 +53,34 @@
53 <el-col :span="4" :key="childIndex+'6'" :class="childIndex>0 ? 'childYT':''"> 53 <el-col :span="4" :key="childIndex+'6'" :class="childIndex>0 ? 'childYT':''">
54 <ul> 54 <ul>
55 <li> 55 <li>
56 <el-select class="formSelect percent30" v-model="childItem.pzytdm"> 56 <el-select-tree
57 <el-option 57 class="formSelect percent30"
58 v-for="item in $store.state.tdytList" 58 v-if="show"
59 :key="item.dm" 59 :default-expand-all="defaultExpandAll"
60 :label="item.mc" 60 :multiple="multiple"
61 :value="item.dm" 61 :placeholder="placeholder"
62 > 62 :disabled="disabled"
63 </el-option> 63 :data="$store.state.tdytList"
64 </el-select> 64 :props="treeProps"
65 :check-strictly="checkStrictly"
66 :clearable="clearable"
67 v-model="childItem.pzytdm"
68 ></el-select-tree>
65 </li> 69 </li>
66 <li> 70 <li>
67 <el-select class="formSelect percent30" v-model="childItem.sjytdm"> 71 <el-select-tree
68 <el-option 72 class="formSelect percent30"
69 v-for="item in $store.state.tdytList" 73 v-if="show"
70 :key="item.dm" 74 :default-expand-all="defaultExpandAll"
71 :label="item.mc" 75 :multiple="multiple"
72 :value="item.dm" 76 :placeholder="placeholder"
73 > 77 :disabled="disabled"
74 </el-option> 78 :data="$store.state.tdytList"
75 </el-select> 79 :props="treeProps"
80 :check-strictly="checkStrictly"
81 :clearable="clearable"
82 v-model="childItem.sjytdm"
83 ></el-select-tree>
76 </li> 84 </li>
77 <li> 85 <li>
78 <el-date-picker 86 <el-date-picker
...@@ -150,15 +158,18 @@ ...@@ -150,15 +158,18 @@
150 </template> 158 </template>
151 159
152 <div class="title"> 160 <div class="title">
153 <el-select class="formSelect" v-model="items.qlxzdm"> 161 <el-select-tree
154 <el-option 162 v-if="show"
155 v-for="item in $store.state.qlxzList" 163 :default-expand-all="defaultExpandAll"
156 :key="item.dm" 164 :multiple="multiple"
157 :label="item.mc" 165 :placeholder="placeholder"
158 :value="item.dm" 166 :disabled="disabled"
159 > 167 :data="$store.state.qlxzList"
160 </el-option> 168 :props="treeProps"
161 </el-select> 169 :check-strictly="checkStrictly"
170 :clearable="clearable"
171 v-model="items.qlxzdm"
172 ></el-select-tree>
162 </div> 173 </div>
163 </el-row> 174 </el-row>
164 </div> 175 </div>
...@@ -175,6 +186,20 @@ export default { ...@@ -175,6 +186,20 @@ export default {
175 }, 186 },
176 data() { 187 data() {
177 return { 188 return {
189 //树型结构
190 show:true,
191 clearable: true,
192 defaultExpandAll: true,
193 multiple: false,
194 placeholder: '请选择',
195 disabled: false,
196 checkStrictly: false,
197 treeProps: {
198 value: 'dm',
199 children: 'children',
200 label: 'mc'
201 },
202
178 countList: [ 203 countList: [
179 { 204 {
180 id: Math.random(), 205 id: Math.random(),
......
...@@ -53,26 +53,32 @@ ...@@ -53,26 +53,32 @@
53 <el-col :span="5" :key="childIndex+'6'" :class="childIndex>0 ? 'childYT':''"> 53 <el-col :span="5" :key="childIndex+'6'" :class="childIndex>0 ? 'childYT':''">
54 <ul> 54 <ul>
55 <li> 55 <li>
56 <el-select class="formSelect percent30" v-model="childItem.pzytdm"> 56 <el-select-tree
57 <el-option 57 v-if="show"
58 v-for="item in $store.state.tdytList" 58 :default-expand-all="defaultExpandAll"
59 :key="item.dm" 59 :multiple="multiple"
60 :label="item.mc" 60 :placeholder="placeholder"
61 :value="item.dm" 61 :disabled="disabled"
62 > 62 :data="$store.state.tdytList"
63 </el-option> 63 :props="treeProps"
64 </el-select> 64 :check-strictly="checkStrictly"
65 :clearable="clearable"
66 v-model="childItem.pzytdm"
67 ></el-select-tree>
65 </li> 68 </li>
66 <li> 69 <li>
67 <el-select class="formSelect percent30" v-model="childItem.sjytdm"> 70 <el-select-tree
68 <el-option 71 v-if="show"
69 v-for="item in $store.state.tdytList" 72 :default-expand-all="defaultExpandAll"
70 :key="item.dm" 73 :multiple="multiple"
71 :label="item.mc" 74 :placeholder="placeholder"
72 :value="item.dm" 75 :disabled="disabled"
73 > 76 :data="$store.state.tdytList"
74 </el-option> 77 :props="treeProps"
75 </el-select> 78 :check-strictly="checkStrictly"
79 :clearable="clearable"
80 v-model="childItem.sjytdm"
81 ></el-select-tree>
76 </li> 82 </li>
77 <li> 83 <li>
78 <el-date-picker 84 <el-date-picker
...@@ -139,6 +145,20 @@ export default { ...@@ -139,6 +145,20 @@ export default {
139 }, 145 },
140 data() { 146 data() {
141 return { 147 return {
148 //树型结构
149 show:true,
150 clearable: true,
151 defaultExpandAll: true,
152 multiple: false,
153 placeholder: '请选择',
154 disabled: false,
155 checkStrictly: false,
156 treeProps: {
157 value: 'dm',
158 children: 'children',
159 label: 'mc'
160 },
161
142 countList: [ 162 countList: [
143 { 163 {
144 id: Math.random(), 164 id: Math.random(),
......
...@@ -135,25 +135,33 @@ ...@@ -135,25 +135,33 @@
135 规划用途 135 规划用途
136 </td> 136 </td>
137 <td width="30" colspan="4" align="center" > 137 <td width="30" colspan="4" align="center" >
138 <el-select v-model="item1.fwytzdbsm" placeholder="请选择" > 138 <el-select-tree
139 <el-option 139 v-if="show"
140 v-for="item in $store.state.fwytList" 140 :default-expand-all="defaultExpandAll"
141 :key="item.bsm" 141 :multiple="multiple"
142 :label="item.mc" 142 :placeholder="placeholder"
143 :value="item.bsm"> 143 :disabled="disabled"
144 </el-option> 144 :data="$store.state.fwytList"
145 </el-select> 145 :props="treeProps"
146 :check-strictly="checkStrictly"
147 :clearable="clearable"
148 v-model="item1.fwytzdbsm"
149 ></el-select-tree>
146 </td> 150 </td>
147 <td width="30" colspan="1" align="center" >用途</td> 151 <td width="30" colspan="1" align="center" >用途</td>
148 <td width="30" colspan="4" align="center" > 152 <td width="30" colspan="4" align="center" >
149 <el-select v-model="item1.fwsjytbsm" placeholder="请选择" > 153 <el-select-tree
150 <el-option 154 v-if="show"
151 v-for="item in $store.state.fwytList" 155 :default-expand-all="defaultExpandAll"
152 :key="item.bsm" 156 :multiple="multiple"
153 :label="item.mc" 157 :placeholder="placeholder"
154 :value="item.bsm"> 158 :disabled="disabled"
155 </el-option> 159 :data="$store.state.fwytList"
156 </el-select> 160 :props="treeProps"
161 :check-strictly="checkStrictly"
162 :clearable="clearable"
163 v-model="item1.fwsjytbsm"
164 ></el-select-tree>
157 </td> 165 </td>
158 </tr> 166 </tr>
159 167
...@@ -228,6 +236,21 @@ ...@@ -228,6 +236,21 @@
228 }, 236 },
229 data() { 237 data() {
230 return { 238 return {
239
240 //树型结构
241 show:true,
242 clearable: true,
243 defaultExpandAll: true,
244 multiple: false,
245 placeholder: '请选择',
246 disabled: false,
247 checkStrictly: false,
248 treeProps: {
249 value: 'bsm',
250 children: 'children',
251 label: 'mc'
252 },
253
231 form:{ 254 form:{
232 jzmj:'', 255 jzmj:'',
233 tnjzmj:'', 256 tnjzmj:'',
......
...@@ -5,7 +5,7 @@ import store from '@store' ...@@ -5,7 +5,7 @@ import store from '@store'
5 import ElementUI from 'element-ui' 5 import ElementUI from 'element-ui'
6 import 'element-ui/lib/theme-chalk/index.css' 6 import 'element-ui/lib/theme-chalk/index.css'
7 import '../mock/index.js' 7 import '../mock/index.js'
8 import ElTreeSelect from 'el-tree-select' 8 import ElTreeSelect from 'el-select-tree'
9 //树型选择器 9 //树型选择器
10 Vue.use(ElTreeSelect); 10 Vue.use(ElTreeSelect);
11 //引入富文本编辑器 11 //引入富文本编辑器
......
...@@ -224,25 +224,33 @@ ...@@ -224,25 +224,33 @@
224 规划用途 224 规划用途
225 </td> 225 </td>
226 <td width="30" colspan="4" align="center" > 226 <td width="30" colspan="4" align="center" >
227 <el-select v-model="item1.fwytzdbsm" placeholder="请选择" > 227 <el-select-tree
228 <el-option 228 v-if="show"
229 v-for="item in $store.state.fwytList" 229 :default-expand-all="defaultExpandAll"
230 :key="item.bsm" 230 :multiple="multiple"
231 :label="item.mc" 231 :placeholder="placeholder"
232 :value="item.bsm"> 232 :disabled="disabled"
233 </el-option> 233 :data="$store.state.fwytList"
234 </el-select> 234 :props="treeProps"
235 :check-strictly="checkStrictly"
236 :clearable="clearable"
237 v-model="item1.fwytzdbsm"
238 ></el-select-tree>
235 </td> 239 </td>
236 <td width="30" colspan="1" align="center" >用途</td> 240 <td width="30" colspan="1" align="center" >用途</td>
237 <td width="30" colspan="4" align="center" > 241 <td width="30" colspan="4" align="center" >
238 <el-select v-model="item1.fwsjytbsm" placeholder="请选择" > 242 <el-select-tree
239 <el-option 243 v-if="show"
240 v-for="item in $store.state.fwytList" 244 :default-expand-all="defaultExpandAll"
241 :key="item.bsm" 245 :multiple="multiple"
242 :label="item.mc" 246 :placeholder="placeholder"
243 :value="item.bsm"> 247 :disabled="disabled"
244 </el-option> 248 :data="$store.state.fwytList"
245 </el-select> 249 :props="treeProps"
250 :check-strictly="checkStrictly"
251 :clearable="clearable"
252 v-model="item1.fwsjytbsm"
253 ></el-select-tree>
246 </td> 254 </td>
247 </tr> 255 </tr>
248 256
...@@ -389,6 +397,21 @@ ...@@ -389,6 +397,21 @@
389 }, 397 },
390 data () { 398 data () {
391 return { 399 return {
400
401 //树型结构
402 show:true,
403 clearable: true,
404 defaultExpandAll: true,
405 multiple: false,
406 placeholder: '请选择',
407 disabled: false,
408 checkStrictly: false,
409 treeProps: {
410 value: 'bsm',
411 children: 'children',
412 label: 'mc'
413 },
414
392 form:{ 415 form:{
393 bsm:'',//户标识码 416 bsm:'',//户标识码
394 zrzbsm:'', //自然幢标识码 417 zrzbsm:'', //自然幢标识码
......
...@@ -157,7 +157,7 @@ ...@@ -157,7 +157,7 @@
157 规划用途 157 规划用途
158 </td> 158 </td>
159 <td width="30" colspan="4" align="center" > 159 <td width="30" colspan="4" align="center" >
160 <el-tree-select 160 <el-select-tree
161 v-if="show" 161 v-if="show"
162 :default-expand-all="defaultExpandAll" 162 :default-expand-all="defaultExpandAll"
163 :multiple="multiple" 163 :multiple="multiple"
...@@ -168,26 +168,22 @@ ...@@ -168,26 +168,22 @@
168 :check-strictly="checkStrictly" 168 :check-strictly="checkStrictly"
169 :clearable="clearable" 169 :clearable="clearable"
170 v-model="item1.fwytzdbsm" 170 v-model="item1.fwytzdbsm"
171 ></el-tree-select> 171 ></el-select-tree>
172 <!-- <el-select v-model="item1.fwytzdbsm" placeholder="请选择" >-->
173 <!-- <el-option-->
174 <!-- v-for="item in $store.state.tdytList"-->
175 <!-- :key="item.bsm"-->
176 <!-- :label="item.mc"-->
177 <!-- :value="item.bsm">-->
178 <!-- </el-option>-->
179 <!-- </el-select>-->
180 </td> 172 </td>
181 <td width="30" colspan="1" align="center" >用途</td> 173 <td width="30" colspan="1" align="center" >用途</td>
182 <td width="30" colspan="4" align="center" > 174 <td width="30" colspan="4" align="center" >
183 <el-select v-model="item1.fwsjytbsm" placeholder="请选择" > 175 <el-select-tree
184 <el-option 176 v-if="show"
185 v-for="item in $store.state.tdytList" 177 :default-expand-all="defaultExpandAll"
186 :key="item.bsm" 178 :multiple="multiple"
187 :label="item.mc" 179 :placeholder="placeholder"
188 :value="item.bsm"> 180 :disabled="disabled"
189 </el-option> 181 :data="$store.state.tdytList"
190 </el-select> 182 :props="treeProps"
183 :check-strictly="checkStrictly"
184 :clearable="clearable"
185 v-model="item1.fwytzdbsm"
186 ></el-select-tree>
191 </td> 187 </td>
192 </tr> 188 </tr>
193 189
...@@ -298,9 +294,9 @@ ...@@ -298,9 +294,9 @@
298 //树型结构 294 //树型结构
299 show:true, 295 show:true,
300 clearable: true, 296 clearable: true,
301 defaultExpandAll: false, 297 defaultExpandAll: true,
302 multiple: false, 298 multiple: false,
303 placeholder: 'please choose', 299 placeholder: '请选择',
304 disabled: false, 300 disabled: false,
305 checkStrictly: false, 301 checkStrictly: false,
306 treeProps: { 302 treeProps: {
......