Browse Source

修改会员添加修改的选择地区逻辑

X5YuLiang 5 years ago
parent
commit
9cd48e5efa

+ 87 - 76
src/scrm_pages/members/components/CreateMemberForm.vue View File

30
                 </el-row>
30
                 </el-row>
31
                 <el-row>
31
                 <el-row>
32
                     <el-col :span="12">
32
                     <el-col :span="12">
33
-                        <el-form-item label="城市:" required prop="city">
34
-                            <el-cascader
33
+                        <el-form-item label="城市:" required prop="city_id">
34
+                            <el-select
35
+                                v-model="form.province_id"
36
+                                style="width:32%"
37
+                                placeholder="选择地址"
38
+                                @change="changeProvince">
39
+                                <el-option
40
+                                v-for="item in provinceOptions"
41
+                                :key="item.id"
42
+                                :label="item.name"
43
+                                :value="item.id">
44
+                                </el-option>
45
+                            </el-select>
46
+                            
47
+                            <el-select
48
+                                v-model="form.city_id"
49
+                                style="width:32%"
50
+                                placeholder="选择地址"
51
+                                @change="changeCity"
52
+                                v-show="cityOptions.length>0"
53
+                                >
54
+                                <el-option
55
+                                v-for="item in cityOptions"
56
+                                :key="item.id"
57
+                                :label="item.name"
58
+                                :value="item.id">
59
+                                </el-option>
60
+                            </el-select>
61
+                            
62
+                            <el-select
63
+                                v-model="form.district_id"
64
+                                style="width:32%"
65
+                                placeholder="选择地址"
66
+                                v-show="distictOptions.length>0"
67
+                                >
68
+                                <el-option
69
+                                v-for="item in distictOptions"
70
+                                :key="item.id"
71
+                                :label="item.name"
72
+                                :value="item.id">
73
+                                </el-option>
74
+                            </el-select>
75
+                            <!-- <el-cascader
35
                                 v-model="form.city"
76
                                 v-model="form.city"
36
                                 :options="cityOptions"
77
                                 :options="cityOptions"
37
                                 @active-item-change="handleChangeCity"
78
                                 @active-item-change="handleChangeCity"
42
                                     label: 'name',
83
                                     label: 'name',
43
                                     children: 'cities'
84
                                     children: 'cities'
44
                                 }"
85
                                 }"
45
-                            ></el-cascader>
86
+                            ></el-cascader> -->
46
                         </el-form-item>
87
                         </el-form-item>
47
                     </el-col>
88
                     </el-col>
48
                     <el-col :span="12">
89
                     <el-col :span="12">
179
                 mobile: [{required: true, message: "请填写手机号",},{ validator: checkMobileRule}],
220
                 mobile: [{required: true, message: "请填写手机号",},{ validator: checkMobileRule}],
180
                 gender: [{required: true, message: "请选择性别",},],
221
                 gender: [{required: true, message: "请选择性别",},],
181
                 birthday: [{required: true, message: "请选择生日",},],
222
                 birthday: [{required: true, message: "请选择生日",},],
182
-                city: [{required: true, message: "请选择城市",},],
223
+                city_id: [{required: true, message: "请选择城市",},],
183
                 illness: [{required: true, message: "请选择病种",},],
224
                 illness: [{required: true, message: "请选择病种",},],
184
                 ill_date: [{required: true, message: "请选择患病时间",},],
225
                 ill_date: [{required: true, message: "请选择患病时间",},],
185
                 treat_type: [{required: true, message: "请选择治疗方式",},],
226
                 treat_type: [{required: true, message: "请选择治疗方式",},],
189
                 {id:1, name:'男'},
230
                 {id:1, name:'男'},
190
                 {id:2, name:'女'},
231
                 {id:2, name:'女'},
191
             ],
232
             ],
233
+            provinceOptions:[],
192
             cityOptions:[],
234
             cityOptions:[],
235
+            distictOptions:[],
193
             form:{
236
             form:{
194
                 name:'',
237
                 name:'',
195
                 mobile:'',
238
                 mobile:'',
196
                 gender:0,
239
                 gender:0,
197
                 birthday:'',
240
                 birthday:'',
198
                 city:[],
241
                 city:[],
199
-                province_id:0,
242
+                province_id:'',
200
                 city_id:0,
243
                 city_id:0,
201
                 district_id:0,
244
                 district_id:0,
202
                 illness:[],
245
                 illness:[],
212
     },
255
     },
213
     methods:{
256
     methods:{
214
         open:function(){
257
         open:function(){
215
-            this.GetDistrictsByUpid();
258
+            this.GetProvince(0);
216
             this.resetForm("memberForm");
259
             this.resetForm("memberForm");
217
             this.createMemberFormVisible = true;
260
             this.createMemberFormVisible = true;
218
         },
261
         },
227
             // }
270
             // }
228
             this.$refs[formName].validate((valid) => {
271
             this.$refs[formName].validate((valid) => {
229
                 if (valid) {
272
                 if (valid) {
273
+                    if (this.form.district_id == '') {
274
+                        this.form.district_id = this.form.city_id;
275
+                    }
230
                     CreateMember(this.form).then(response=>{
276
                     CreateMember(this.form).then(response=>{
231
                         var res = response.data;
277
                         var res = response.data;
232
                         if(res.state === 1) {
278
                         if(res.state === 1) {
264
                 this.form.avatar = 'https://images.shengws.com/201809182128111.png';
310
                 this.form.avatar = 'https://images.shengws.com/201809182128111.png';
265
             }
311
             }
266
         },
312
         },
267
-        handleChangeCity:function(val) {
268
-            this.GetDistrictsByUpid(val);
313
+        changeProvince(id) {
314
+            this.form.city_id = '';
315
+            this.form.district_id = '';
316
+            this.GetCity(id);
317
+            this.distictOptions = [];
269
         },
318
         },
270
-        handleSelectedCity:function(val) {
271
-            this.form.province_id = val[0];
272
-            this.form.city_id = val[1];
273
-            this.form.district_id = val[2];
319
+        changeCity(id){
320
+            this.form.district_id = '';
321
+            this.GetDistrict(id);
274
         },
322
         },
275
-        GetDistrictsByUpid:function(val) {  
276
-            let idArea
277
-            let sizeArea
278
-            if (!val) {
279
-                idArea = 0
280
-                sizeArea = 0
281
-            } else if (val.length === 1) {
282
-                idArea = val[0]
283
-                sizeArea = val.length // 3:一级 4:二级 6:三级
284
-            } else if (val.length === 2) {
285
-                idArea = val[1]
286
-                sizeArea = val.length // 3:一级 4:二级 6:三级
287
-            }
288
-            
289
-            GetDistrictsByUpid({id:idArea}).then(response=>{
323
+        GetProvince:function(id) {  
324
+            GetDistrictsByUpid({id:id}).then(response=>{
290
                 var res = response.data;
325
                 var res = response.data;
291
                 if (res.state===1) {
326
                 if (res.state===1) {
292
-                    var citys = res.data.citys;
293
-                    if (sizeArea === 0) { // 初始化 加载一级 省
294
-                        this.cityOptions = citys.map((value, i) => {
295
-                            return {
296
-                                id: value.id,
297
-                                name: value.name,
298
-                                cities: []
299
-                            }
300
-                        })
301
-                    } else if (sizeArea === 1) { // 点击一级 加载二级 市
302
-                        this.cityOptions.map((value, i) => {
303
-                            if (value.id === val[0]) {
304
-                                if (!value.cities.length) {
305
-                                    value.cities = citys.map((value, i) => {
306
-                                        return {
307
-                                            id: value.id,
308
-                                            name: value.name,
309
-                                            cities: []
310
-                                        }
311
-                                    })
312
-                                }
313
-                            }
314
-                        })
315
-                    } else if (sizeArea === 2) { // 点击二级 加载三级 区
316
-                        this.cityOptions.map((value, i) => {
317
-                            if (value.id === val[0]) {
318
-                                value.cities.map((value, i) => {
319
-                                    if (value.id === val[1]) {
320
-                                        if (!value.cities.length) {
321
-                                            if (citys.length) {
322
-                                                value.cities = citys.map((value, i) => {
323
-                                                    return {
324
-                                                        id: value.id,
325
-                                                        name: value.name
326
-                                                    }
327
-                                                })
328
-                                            }else {
329
-                                                value.cities = [
330
-                                                    {id:value.id, name:value.name}
331
-                                                ];
332
-                                            }
333
-                                            
334
-                                        }
335
-                                    }
336
-                                })
337
-                            }
338
-                        })
339
-                    }
327
+                    this.provinceOptions = res.data.citys;
328
+                }else {
329
+                    this.$message.error(res.msg);
330
+                }
331
+            }).catch(e=>{
332
+            });
333
+        },
334
+        GetCity:function(id) {  
335
+            GetDistrictsByUpid({id:id}).then(response=>{
336
+                var res = response.data;
337
+                if (res.state===1) {
338
+                    this.cityOptions = res.data.citys;
340
                 }else {
339
                 }else {
341
                     this.$message.error(res.msg);
340
                     this.$message.error(res.msg);
342
                 }
341
                 }
343
-            }).catch(e=>{});
342
+            }).catch(e=>{
343
+            });
344
+        },
345
+        GetDistrict:function(id) {  
346
+            GetDistrictsByUpid({id:id}).then(response=>{
347
+                var res = response.data;
348
+                if (res.state===1) {
349
+                    this.distictOptions = res.data.citys;
350
+                }else {
351
+                    this.$message.error(res.msg);
352
+                }
353
+            }).catch(e=>{
354
+            });
344
         },
355
         },
345
     }
356
     }
346
 }
357
 }

+ 88 - 79
src/scrm_pages/members/components/EditMemberForm.vue View File

31
                 <el-row>
31
                 <el-row>
32
                     <el-col :span="12">
32
                     <el-col :span="12">
33
                         <el-form-item label="城市:" required prop="city">
33
                         <el-form-item label="城市:" required prop="city">
34
-                            <el-cascader
34
+                            <el-select
35
+                                v-model="form.province_id"
36
+                                style="width:32%"
37
+                                placeholder="选择地址"
38
+                                @change="changeProvince">
39
+                                <el-option
40
+                                v-for="item in provinceOptions"
41
+                                :key="item.id"
42
+                                :label="item.name"
43
+                                :value="item.id">
44
+                                </el-option>
45
+                            </el-select>
46
+                            
47
+                            <el-select
48
+                                v-model="form.city_id"
49
+                                style="width:32%"
50
+                                placeholder="选择地址"
51
+                                @change="changeCity"
52
+                                v-show="cityOptions.length>0"
53
+                                >
54
+                                <el-option
55
+                                v-for="item in cityOptions"
56
+                                :key="item.id"
57
+                                :label="item.name"
58
+                                :value="item.id">
59
+                                </el-option>
60
+                            </el-select>
61
+                            
62
+                            <el-select
63
+                                v-model="form.district_id"
64
+                                style="width:32%"
65
+                                placeholder="选择地址"
66
+                                v-show="distictOptions.length>0"
67
+                                >
68
+                                <el-option
69
+                                v-for="item in distictOptions"
70
+                                :key="item.id"
71
+                                :label="item.name"
72
+                                :value="item.id">
73
+                                </el-option>
74
+                            </el-select>
75
+                            <!-- <el-cascader
35
                                 v-model="form.city"
76
                                 v-model="form.city"
36
                                 :options="cityOptions"
77
                                 :options="cityOptions"
37
                                 @active-item-change="handleChangeCity"
78
                                 @active-item-change="handleChangeCity"
42
                                     label: 'name',
83
                                     label: 'name',
43
                                     children: 'cities'
84
                                     children: 'cities'
44
                                 }"
85
                                 }"
45
-                            ></el-cascader>
86
+                            ></el-cascader> -->
46
                         </el-form-item>
87
                         </el-form-item>
47
                     </el-col>
88
                     </el-col>
48
                     <el-col :span="12">
89
                     <el-col :span="12">
186
                 {id:1, name:'男'},
227
                 {id:1, name:'男'},
187
                 {id:2, name:'女'},
228
                 {id:2, name:'女'},
188
             ],
229
             ],
230
+            provinceOptions:[],
189
             cityOptions:[],
231
             cityOptions:[],
232
+            distictOptions:[],
190
             illnessMap:{},
233
             illnessMap:{},
234
+
191
         }
235
         }
192
     },
236
     },
193
     methods:{
237
     methods:{
194
         open:function(){
238
         open:function(){
195
-            let city = [];
196
-            this.GetDistrictsByUpid();
239
+            this.GetProvince(0);
197
             if (this.form.province_id>0) {
240
             if (this.form.province_id>0) {
198
-                city.push(this.form.province_id);
199
-                this.GetDistrictsByUpid(city);
241
+                this.GetCity(this.form.province_id);
200
             }
242
             }
201
-            if (this.form.province_id>0 && this.form.city_id>0) {
202
-                city.push(this.form.city_id);
203
-                this.GetDistrictsByUpid(city);
243
+            if (this.form.city_id>0) {
244
+                this.GetDistrict(this.form.city_id);
204
             }
245
             }
205
             this.form.birthday = this.form.birthday?this.form.birthday:'';
246
             this.form.birthday = this.form.birthday?this.form.birthday:'';
206
             this.form.ill_date = this.form.ill_date?this.form.ill_date:'';
247
             this.form.ill_date = this.form.ill_date?this.form.ill_date:'';
230
             // }
271
             // }
231
             this.$refs[formName].validate((valid) => {
272
             this.$refs[formName].validate((valid) => {
232
                 if (valid) {
273
                 if (valid) {
274
+                    if (this.form.district_id == '') {
275
+                        this.form.district_id = this.form.city_id;
276
+                    }
233
                     EditMember(this.form.id, this.form).then(response=>{
277
                     EditMember(this.form.id, this.form).then(response=>{
234
                         var res = response.data;
278
                         var res = response.data;
235
                         if(res.state === 1) {
279
                         if(res.state === 1) {
267
                 this.form.avatar = 'https://images.shengws.com/201809182128111.png';
311
                 this.form.avatar = 'https://images.shengws.com/201809182128111.png';
268
             }
312
             }
269
         },
313
         },
270
-        handleChangeCity:function(val) {
271
-            this.GetDistrictsByUpid(val);
314
+        changeProvince(id) {
315
+            this.form.city_id = '';
316
+            this.form.district_id = '';
317
+            this.GetCity(id);
318
+            this.distictOptions = [];
272
         },
319
         },
273
-        handleSelectedCity:function(val) {
274
-            this.form.province_id = val[0];
275
-            this.form.city_id = val[1];
276
-            this.form.district_id = val[2];
320
+        changeCity(id){
321
+            this.form.district_id = '';
322
+            this.GetDistrict(id);
277
         },
323
         },
278
-        GetDistrictsByUpid:function(val) {  
279
-            let idArea
280
-            let sizeArea
281
-            if (!val) {
282
-                idArea = 0
283
-                sizeArea = 0
284
-            } else if (val.length === 1) {
285
-                idArea = val[0]
286
-                sizeArea = val.length // 3:一级 4:二级 6:三级
287
-            } else if (val.length === 2) {
288
-                idArea = val[1]
289
-                sizeArea = val.length // 3:一级 4:二级 6:三级
290
-            }
291
-            
292
-            GetDistrictsByUpid({id:idArea}).then(response=>{
324
+        GetProvince:function(id) {  
325
+            GetDistrictsByUpid({id:id}).then(response=>{
293
                 var res = response.data;
326
                 var res = response.data;
294
                 if (res.state===1) {
327
                 if (res.state===1) {
295
-                    var citys = res.data.citys;
296
-                    if (sizeArea === 0) { // 初始化 加载一级 省
297
-                        this.cityOptions = citys.map((value, i) => {
298
-                            return {
299
-                                id: value.id,
300
-                                name: value.name,
301
-                                cities: []
302
-                            }
303
-                        })
304
-                    } else if (sizeArea === 1) { // 点击一级 加载二级 市
305
-                        this.cityOptions.map((value, i) => {
306
-                            if (value.id === val[0]) {
307
-                                if (!value.cities.length) {
308
-                                    value.cities = citys.map((value, i) => {
309
-                                        return {
310
-                                            id: value.id,
311
-                                            name: value.name,
312
-                                            cities: []
313
-                                        }
314
-                                    })
315
-                                }
316
-                            }
317
-                        })
318
-                    } else if (sizeArea === 2) { // 点击二级 加载三级 区
319
-                        this.cityOptions.map((value, i) => {
320
-                            if (value.id === val[0]) {
321
-                                value.cities.map((value, i) => {
322
-                                    if (value.id === val[1]) {
323
-                                        if (!value.cities.length) {
324
-                                            if (citys.length) {
325
-                                                value.cities = citys.map((value, i) => {
326
-                                                    return {
327
-                                                        id: value.id,
328
-                                                        name: value.name
329
-                                                    }
330
-                                                })
331
-                                            }else {
332
-                                                value.cities = [
333
-                                                    {id:value.id, name:value.name}
334
-                                                ];
335
-                                            }
336
-                                            
337
-                                        }
338
-                                    }
339
-                                })
340
-                            }
341
-                        })
342
-                    }
328
+                    this.provinceOptions = res.data.citys;
329
+                }else {
330
+                    this.$message.error(res.msg);
331
+                }
332
+            }).catch(e=>{
333
+            });
334
+        },
335
+        GetCity:function(id) {  
336
+            GetDistrictsByUpid({id:id}).then(response=>{
337
+                var res = response.data;
338
+                if (res.state===1) {
339
+                    this.cityOptions = res.data.citys;
340
+                }else {
341
+                    this.$message.error(res.msg);
342
+                }
343
+            }).catch(e=>{
344
+            });
345
+        },
346
+        GetDistrict:function(id) {  
347
+            GetDistrictsByUpid({id:id}).then(response=>{
348
+                var res = response.data;
349
+                if (res.state===1) {
350
+                    this.distictOptions = res.data.citys;
343
                 }else {
351
                 }else {
344
                     this.$message.error(res.msg);
352
                     this.$message.error(res.msg);
345
                 }
353
                 }
346
-            }).catch(e=>{});
354
+            }).catch(e=>{
355
+            });
347
         },
356
         },
348
     }
357
     }
349
 }
358
 }

+ 6 - 1
src/scrm_pages/members/components/EditMemberTagsForm.vue View File

11
                                 style="width:100%"
11
                                 style="width:100%"
12
                                 placeholder="请选择标签">
12
                                 placeholder="请选择标签">
13
                                 <el-option
13
                                 <el-option
14
-                                v-for="item in tagOptions"
14
+                                v-for="item in tags"
15
                                 :key="item.id"
15
                                 :key="item.id"
16
                                 :label="item.tag_name"
16
                                 :label="item.tag_name"
17
                                 :value="item.id">
17
                                 :value="item.id">
78
     data(){
78
     data(){
79
         return {
79
         return {
80
             editMemberTagFormVisible:false,
80
             editMemberTagFormVisible:false,
81
+            tags:[],
81
         }
82
         }
82
     },
83
     },
83
     methods:{
84
     methods:{
84
         open:function(){
85
         open:function(){
86
+            this.tags = [];
87
+            for (const index in this.tagOptions) {
88
+                this.tags.push(this.tagOptions[index]);
89
+            }
85
             this.editMemberTagFormVisible = true;
90
             this.editMemberTagFormVisible = true;
86
         },
91
         },
87
         resetForm(formName) {
92
         resetForm(formName) {

+ 0 - 1
src/scrm_pages/members/members.vue View File

222
                     this.total = res.data.total;
222
                     this.total = res.data.total;
223
                     if(typeof(res.data.cards) != 'undefined') {
223
                     if(typeof(res.data.cards) != 'undefined') {
224
                         this.levelCards = res.data.cards;
224
                         this.levelCards = res.data.cards;
225
-                        console.log("levelCard是什么",levelCards)
226
                     }
225
                     }
227
                     if(typeof(res.data.tags) != 'undefined') {
226
                     if(typeof(res.data.tags) != 'undefined') {
228
                         this.tagOptions = res.data.tags;
227
                         this.tagOptions = res.data.tags;