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

src/scrm_pages/members/components/CreateMemberForm.vue

@@ -30,8 +30,49 @@
                 </el-row>
                 <el-row>
                     <el-col :span="12">
-                        <el-form-item label="城市:" required prop="city">
-                            <el-cascader
+                        <el-form-item label="城市:" required prop="city_id">
+                            <el-select
+                                v-model="form.province_id"
+                                style="width:32%"
+                                placeholder="选择地址"
+                                @change="changeProvince">
+                                <el-option
+                                v-for="item in provinceOptions"
+                                :key="item.id"
+                                :label="item.name"
+                                :value="item.id">
+                                </el-option>
+                            </el-select>
+                            
+                            <el-select
+                                v-model="form.city_id"
+                                style="width:32%"
+                                placeholder="选择地址"
+                                @change="changeCity"
+                                v-show="cityOptions.length>0"
+                                >
+                                <el-option
+                                v-for="item in cityOptions"
+                                :key="item.id"
+                                :label="item.name"
+                                :value="item.id">
+                                </el-option>
+                            </el-select>
+                            
+                            <el-select
+                                v-model="form.district_id"
+                                style="width:32%"
+                                placeholder="选择地址"
+                                v-show="distictOptions.length>0"
+                                >
+                                <el-option
+                                v-for="item in distictOptions"
+                                :key="item.id"
+                                :label="item.name"
+                                :value="item.id">
+                                </el-option>
+                            </el-select>
+                            <!-- <el-cascader
                                 v-model="form.city"
                                 :options="cityOptions"
                                 @active-item-change="handleChangeCity"
@@ -42,7 +83,7 @@
                                     label: 'name',
                                     children: 'cities'
                                 }"
-                            ></el-cascader>
+                            ></el-cascader> -->
                         </el-form-item>
                     </el-col>
                     <el-col :span="12">
@@ -179,7 +220,7 @@ export default {
                 mobile: [{required: true, message: "请填写手机号",},{ validator: checkMobileRule}],
                 gender: [{required: true, message: "请选择性别",},],
                 birthday: [{required: true, message: "请选择生日",},],
-                city: [{required: true, message: "请选择城市",},],
+                city_id: [{required: true, message: "请选择城市",},],
                 illness: [{required: true, message: "请选择病种",},],
                 ill_date: [{required: true, message: "请选择患病时间",},],
                 treat_type: [{required: true, message: "请选择治疗方式",},],
@@ -189,14 +230,16 @@ export default {
                 {id:1, name:'男'},
                 {id:2, name:'女'},
             ],
+            provinceOptions:[],
             cityOptions:[],
+            distictOptions:[],
             form:{
                 name:'',
                 mobile:'',
                 gender:0,
                 birthday:'',
                 city:[],
-                province_id:0,
+                province_id:'',
                 city_id:0,
                 district_id:0,
                 illness:[],
@@ -212,7 +255,7 @@ export default {
     },
     methods:{
         open:function(){
-            this.GetDistrictsByUpid();
+            this.GetProvince(0);
             this.resetForm("memberForm");
             this.createMemberFormVisible = true;
         },
@@ -227,6 +270,9 @@ export default {
             // }
             this.$refs[formName].validate((valid) => {
                 if (valid) {
+                    if (this.form.district_id == '') {
+                        this.form.district_id = this.form.city_id;
+                    }
                     CreateMember(this.form).then(response=>{
                         var res = response.data;
                         if(res.state === 1) {
@@ -264,83 +310,48 @@ export default {
                 this.form.avatar = 'https://images.shengws.com/201809182128111.png';
             }
         },
-        handleChangeCity:function(val) {
-            this.GetDistrictsByUpid(val);
+        changeProvince(id) {
+            this.form.city_id = '';
+            this.form.district_id = '';
+            this.GetCity(id);
+            this.distictOptions = [];
         },
-        handleSelectedCity:function(val) {
-            this.form.province_id = val[0];
-            this.form.city_id = val[1];
-            this.form.district_id = val[2];
+        changeCity(id){
+            this.form.district_id = '';
+            this.GetDistrict(id);
         },
-        GetDistrictsByUpid:function(val) {  
-            let idArea
-            let sizeArea
-            if (!val) {
-                idArea = 0
-                sizeArea = 0
-            } else if (val.length === 1) {
-                idArea = val[0]
-                sizeArea = val.length // 3:一级 4:二级 6:三级
-            } else if (val.length === 2) {
-                idArea = val[1]
-                sizeArea = val.length // 3:一级 4:二级 6:三级
-            }
-            
-            GetDistrictsByUpid({id:idArea}).then(response=>{
+        GetProvince:function(id) {  
+            GetDistrictsByUpid({id:id}).then(response=>{
                 var res = response.data;
                 if (res.state===1) {
-                    var citys = res.data.citys;
-                    if (sizeArea === 0) { // 初始化 加载一级 省
-                        this.cityOptions = citys.map((value, i) => {
-                            return {
-                                id: value.id,
-                                name: value.name,
-                                cities: []
-                            }
-                        })
-                    } else if (sizeArea === 1) { // 点击一级 加载二级 市
-                        this.cityOptions.map((value, i) => {
-                            if (value.id === val[0]) {
-                                if (!value.cities.length) {
-                                    value.cities = citys.map((value, i) => {
-                                        return {
-                                            id: value.id,
-                                            name: value.name,
-                                            cities: []
-                                        }
-                                    })
-                                }
-                            }
-                        })
-                    } else if (sizeArea === 2) { // 点击二级 加载三级 区
-                        this.cityOptions.map((value, i) => {
-                            if (value.id === val[0]) {
-                                value.cities.map((value, i) => {
-                                    if (value.id === val[1]) {
-                                        if (!value.cities.length) {
-                                            if (citys.length) {
-                                                value.cities = citys.map((value, i) => {
-                                                    return {
-                                                        id: value.id,
-                                                        name: value.name
-                                                    }
-                                                })
-                                            }else {
-                                                value.cities = [
-                                                    {id:value.id, name:value.name}
-                                                ];
-                                            }
-                                            
-                                        }
-                                    }
-                                })
-                            }
-                        })
-                    }
+                    this.provinceOptions = res.data.citys;
+                }else {
+                    this.$message.error(res.msg);
+                }
+            }).catch(e=>{
+            });
+        },
+        GetCity:function(id) {  
+            GetDistrictsByUpid({id:id}).then(response=>{
+                var res = response.data;
+                if (res.state===1) {
+                    this.cityOptions = res.data.citys;
                 }else {
                     this.$message.error(res.msg);
                 }
-            }).catch(e=>{});
+            }).catch(e=>{
+            });
+        },
+        GetDistrict:function(id) {  
+            GetDistrictsByUpid({id:id}).then(response=>{
+                var res = response.data;
+                if (res.state===1) {
+                    this.distictOptions = res.data.citys;
+                }else {
+                    this.$message.error(res.msg);
+                }
+            }).catch(e=>{
+            });
         },
     }
 }

src/scrm_pages/members/components/EditMemberForm.vue

@@ -31,7 +31,48 @@
                 <el-row>
                     <el-col :span="12">
                         <el-form-item label="城市:" required prop="city">
-                            <el-cascader
+                            <el-select
+                                v-model="form.province_id"
+                                style="width:32%"
+                                placeholder="选择地址"
+                                @change="changeProvince">
+                                <el-option
+                                v-for="item in provinceOptions"
+                                :key="item.id"
+                                :label="item.name"
+                                :value="item.id">
+                                </el-option>
+                            </el-select>
+                            
+                            <el-select
+                                v-model="form.city_id"
+                                style="width:32%"
+                                placeholder="选择地址"
+                                @change="changeCity"
+                                v-show="cityOptions.length>0"
+                                >
+                                <el-option
+                                v-for="item in cityOptions"
+                                :key="item.id"
+                                :label="item.name"
+                                :value="item.id">
+                                </el-option>
+                            </el-select>
+                            
+                            <el-select
+                                v-model="form.district_id"
+                                style="width:32%"
+                                placeholder="选择地址"
+                                v-show="distictOptions.length>0"
+                                >
+                                <el-option
+                                v-for="item in distictOptions"
+                                :key="item.id"
+                                :label="item.name"
+                                :value="item.id">
+                                </el-option>
+                            </el-select>
+                            <!-- <el-cascader
                                 v-model="form.city"
                                 :options="cityOptions"
                                 @active-item-change="handleChangeCity"
@@ -42,7 +83,7 @@
                                     label: 'name',
                                     children: 'cities'
                                 }"
-                            ></el-cascader>
+                            ></el-cascader> -->
                         </el-form-item>
                     </el-col>
                     <el-col :span="12">
@@ -186,21 +227,21 @@ export default {
                 {id:1, name:'男'},
                 {id:2, name:'女'},
             ],
+            provinceOptions:[],
             cityOptions:[],
+            distictOptions:[],
             illnessMap:{},
+
         }
     },
     methods:{
         open:function(){
-            let city = [];
-            this.GetDistrictsByUpid();
+            this.GetProvince(0);
             if (this.form.province_id>0) {
-                city.push(this.form.province_id);
-                this.GetDistrictsByUpid(city);
+                this.GetCity(this.form.province_id);
             }
-            if (this.form.province_id>0 && this.form.city_id>0) {
-                city.push(this.form.city_id);
-                this.GetDistrictsByUpid(city);
+            if (this.form.city_id>0) {
+                this.GetDistrict(this.form.city_id);
             }
             this.form.birthday = this.form.birthday?this.form.birthday:'';
             this.form.ill_date = this.form.ill_date?this.form.ill_date:'';
@@ -230,6 +271,9 @@ export default {
             // }
             this.$refs[formName].validate((valid) => {
                 if (valid) {
+                    if (this.form.district_id == '') {
+                        this.form.district_id = this.form.city_id;
+                    }
                     EditMember(this.form.id, this.form).then(response=>{
                         var res = response.data;
                         if(res.state === 1) {
@@ -267,83 +311,48 @@ export default {
                 this.form.avatar = 'https://images.shengws.com/201809182128111.png';
             }
         },
-        handleChangeCity:function(val) {
-            this.GetDistrictsByUpid(val);
+        changeProvince(id) {
+            this.form.city_id = '';
+            this.form.district_id = '';
+            this.GetCity(id);
+            this.distictOptions = [];
         },
-        handleSelectedCity:function(val) {
-            this.form.province_id = val[0];
-            this.form.city_id = val[1];
-            this.form.district_id = val[2];
+        changeCity(id){
+            this.form.district_id = '';
+            this.GetDistrict(id);
         },
-        GetDistrictsByUpid:function(val) {  
-            let idArea
-            let sizeArea
-            if (!val) {
-                idArea = 0
-                sizeArea = 0
-            } else if (val.length === 1) {
-                idArea = val[0]
-                sizeArea = val.length // 3:一级 4:二级 6:三级
-            } else if (val.length === 2) {
-                idArea = val[1]
-                sizeArea = val.length // 3:一级 4:二级 6:三级
-            }
-            
-            GetDistrictsByUpid({id:idArea}).then(response=>{
+        GetProvince:function(id) {  
+            GetDistrictsByUpid({id:id}).then(response=>{
                 var res = response.data;
                 if (res.state===1) {
-                    var citys = res.data.citys;
-                    if (sizeArea === 0) { // 初始化 加载一级 省
-                        this.cityOptions = citys.map((value, i) => {
-                            return {
-                                id: value.id,
-                                name: value.name,
-                                cities: []
-                            }
-                        })
-                    } else if (sizeArea === 1) { // 点击一级 加载二级 市
-                        this.cityOptions.map((value, i) => {
-                            if (value.id === val[0]) {
-                                if (!value.cities.length) {
-                                    value.cities = citys.map((value, i) => {
-                                        return {
-                                            id: value.id,
-                                            name: value.name,
-                                            cities: []
-                                        }
-                                    })
-                                }
-                            }
-                        })
-                    } else if (sizeArea === 2) { // 点击二级 加载三级 区
-                        this.cityOptions.map((value, i) => {
-                            if (value.id === val[0]) {
-                                value.cities.map((value, i) => {
-                                    if (value.id === val[1]) {
-                                        if (!value.cities.length) {
-                                            if (citys.length) {
-                                                value.cities = citys.map((value, i) => {
-                                                    return {
-                                                        id: value.id,
-                                                        name: value.name
-                                                    }
-                                                })
-                                            }else {
-                                                value.cities = [
-                                                    {id:value.id, name:value.name}
-                                                ];
-                                            }
-                                            
-                                        }
-                                    }
-                                })
-                            }
-                        })
-                    }
+                    this.provinceOptions = res.data.citys;
+                }else {
+                    this.$message.error(res.msg);
+                }
+            }).catch(e=>{
+            });
+        },
+        GetCity:function(id) {  
+            GetDistrictsByUpid({id:id}).then(response=>{
+                var res = response.data;
+                if (res.state===1) {
+                    this.cityOptions = res.data.citys;
+                }else {
+                    this.$message.error(res.msg);
+                }
+            }).catch(e=>{
+            });
+        },
+        GetDistrict:function(id) {  
+            GetDistrictsByUpid({id:id}).then(response=>{
+                var res = response.data;
+                if (res.state===1) {
+                    this.distictOptions = res.data.citys;
                 }else {
                     this.$message.error(res.msg);
                 }
-            }).catch(e=>{});
+            }).catch(e=>{
+            });
         },
     }
 }

src/scrm_pages/members/components/EditMemberTagsForm.vue

@@ -11,7 +11,7 @@
                                 style="width:100%"
                                 placeholder="请选择标签">
                                 <el-option
-                                v-for="item in tagOptions"
+                                v-for="item in tags"
                                 :key="item.id"
                                 :label="item.tag_name"
                                 :value="item.id">
@@ -78,10 +78,15 @@ export default {
     data(){
         return {
             editMemberTagFormVisible:false,
+            tags:[],
         }
     },
     methods:{
         open:function(){
+            this.tags = [];
+            for (const index in this.tagOptions) {
+                this.tags.push(this.tagOptions[index]);
+            }
             this.editMemberTagFormVisible = true;
         },
         resetForm(formName) {

src/scrm_pages/members/members.vue

@@ -222,7 +222,6 @@
                     this.total = res.data.total;
                     if(typeof(res.data.cards) != 'undefined') {
                         this.levelCards = res.data.cards;
-                        console.log("levelCard是什么",levelCards)
                     }
                     if(typeof(res.data.tags) != 'undefined') {
                         this.tagOptions = res.data.tags;