|
|
@@ -10,42 +10,61 @@
|
|
|
<div class="ml-2">
|
|
|
<div v-for="region in parentMapping[0]" :style="{'margin-left':(2+region.type)+'%'}">
|
|
|
<div>
|
|
|
- <span class="fa fa-hand-o-right cursor-pointer" @click="showItem('tree-'+region.id,$event)" v-if="parentMapping[region.id]"></span>
|
|
|
+ <span class="fa fa-hand-o-right cursor-pointer" :id="'fa-tree-'+region.id" @click="showItem('tree-'+region.id,$event)" v-if="parentMapping[region.id]"></span>
|
|
|
<span v-else> </span>
|
|
|
<span class="fa fa-circle" :class="region.deleted_at ? 'text-danger' : 'text-success'"></span>
|
|
|
@{{ region.name }}<label class="text-secondary" v-if="region.code">(@{{ region.code }})</label>
|
|
|
+ <label class="cursor-pointer" @click="addRegion(region.id,region.type)"> <span class="fa fa-plus-circle"></span></label>
|
|
|
</div>
|
|
|
<div :id="'tree-'+region.id" class="up">
|
|
|
<div v-for="city in parentMapping[region.id]" :style="{'margin-left':(2+city.type)+'%'}">
|
|
|
- <div>
|
|
|
- <span class="fa fa-hand-o-right cursor-pointer" @click="showItem('tree-'+city.id,$event)" v-if="parentMapping[city.id]"></span>
|
|
|
+ <div v-if="city.id">
|
|
|
+ <span class="fa fa-hand-o-right cursor-pointer" :id="'fa-tree-'+city.id" @click="showItem('tree-'+city.id,$event)" v-if="parentMapping[city.id]"></span>
|
|
|
<span v-else> </span>
|
|
|
<span class="fa fa-circle" :class="city.deleted_at ? 'text-danger' : 'text-success'"></span>
|
|
|
@{{ city.name }}<label class="text-secondary" v-if="city.code">(@{{ city.code }})</label>
|
|
|
+ <label class="cursor-pointer" @click="addRegion(city.id,city.type)"> <span class="fa fa-plus-circle"></span></label>
|
|
|
</div>
|
|
|
+ <label v-else>
|
|
|
+ <input @blur="submitRegion(city,region.id)" @keydown.13="submitRegion(city,region.id)" id="tree-edit-0" v-model="city.name"
|
|
|
+ class="form-control form-control-sm rounded-pill ml-1" type="text" placeholder="添加城市"/>
|
|
|
+ </label>
|
|
|
<div :id="'tree-'+city.id" class="up">
|
|
|
<div v-for="district in parentMapping[city.id]" :style="{'margin-left':(2+district.type)+'%'}">
|
|
|
- <div>
|
|
|
- <span class="fa fa-hand-o-right cursor-pointer" @click="showItem('tree-'+district.id,$event)" v-if="parentMapping[district.id]"></span>
|
|
|
+ <div v-if="district.id">
|
|
|
+ <span class="fa fa-hand-o-right cursor-pointer" :id="'fa-tree-'+district.id" @click="showItem('tree-'+district.id,$event)" v-if="parentMapping[district.id]"></span>
|
|
|
<span v-else> </span>
|
|
|
<span class="fa fa-circle" :class="district.deleted_at ? 'text-danger' : 'text-success'"></span>
|
|
|
@{{ district.name }}<label class="text-secondary" v-if="district.code">(@{{ district.code }})</label>
|
|
|
+ <label class="cursor-pointer" @click="addRegion(district.id,district.type)"> <span class="fa fa-plus-circle"></span></label>
|
|
|
</div>
|
|
|
+ <label v-else>
|
|
|
+ <input @blur="submitRegion(district,city.id)" @keydown.13="submitRegion(district,city.id)" id="tree-edit-0" v-model="district.name"
|
|
|
+ class="form-control form-control-sm rounded-pill ml-1" type="text" placeholder="添加区/县"/>
|
|
|
+ </label>
|
|
|
<div :id="'tree-'+district.id" class="up">
|
|
|
<div v-for="town in parentMapping[district.id]" :style="{'margin-left':(2+town.type)+'%'}">
|
|
|
- <div>
|
|
|
- <span class="fa fa-hand-o-right cursor-pointer" @click="showItem('tree-'+town.id,$event)" v-if="parentMapping[town.id]"></span>
|
|
|
+ <div v-if="town.id">
|
|
|
+ <span class="fa fa-hand-o-right cursor-pointer" :id="'fa-tree-'+town.id" @click="showItem('tree-'+town.id,$event)" v-if="parentMapping[town.id]"></span>
|
|
|
<span v-else> </span>
|
|
|
<span class="fa fa-circle" :class="town.deleted_at ? 'text-danger' : 'text-success'"></span>
|
|
|
@{{ town.name }}<label class="text-secondary" v-if="town.code">(@{{ town.code }})</label>
|
|
|
+ <label class="cursor-pointer" @click="addRegion(town.id,town.type)"> <span class="fa fa-plus-circle"></span></label>
|
|
|
</div>
|
|
|
+ <label v-else>
|
|
|
+ <input @blur="submitRegion(town,district.id)" @keydown.13="submitRegion(town,district.id)" id="tree-edit-0" v-model="town.name"
|
|
|
+ class="form-control form-control-sm rounded-pill ml-1" type="text" placeholder="添加乡/镇"/>
|
|
|
+ </label>
|
|
|
<div :id="'tree-'+town.id" class="up">
|
|
|
<div v-for="street in parentMapping[town.id]" :style="{'margin-left':(2+street.type)+'%'}">
|
|
|
- <div>
|
|
|
- {{--<span class="fa fa-hand-o-right cursor-pointer" @click="showItem('tree-'+street.id,$event)"></span> --}}
|
|
|
+ <div v-if="street.id">
|
|
|
<span class="fa fa-circle" :class="street.deleted_at ? 'text-danger' : 'text-success'"></span>
|
|
|
@{{ street.name }}<label class="text-secondary" v-if="street.code">(@{{ street.code }})</label>
|
|
|
</div>
|
|
|
+ <label v-else>
|
|
|
+ <input @blur="submitRegion(street,town.id)" @keydown.13="submitRegion(street,town.id)" id="tree-edit-0" v-model="street.name"
|
|
|
+ class="form-control form-control-sm rounded-pill ml-1" type="text" placeholder="添加村/街"/>
|
|
|
+ </label>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -99,6 +118,31 @@
|
|
|
$("#"+id).slideDown();
|
|
|
}
|
|
|
},
|
|
|
+ addRegion(id,type){
|
|
|
+ let obj = {name:"",code:"",type:Number(type)+1,parent_id:id};
|
|
|
+ if (this.parentMapping[id])this.parentMapping[id].unshift(obj);
|
|
|
+ else this.$set(this.parentMapping,id,[obj]);
|
|
|
+ setTimeout(()=>{
|
|
|
+ if (!this.showList[id]){
|
|
|
+ this.showList[id] = true;
|
|
|
+ document.getElementById("fa-tree-"+id).className = "fa fa-hand-o-down cursor-pointer";
|
|
|
+ $("#tree-"+id).slideDown();
|
|
|
+ }
|
|
|
+ $("#tree-edit-0").focus();
|
|
|
+ },0);
|
|
|
+ },
|
|
|
+ submitRegion(region,parent){
|
|
|
+ if (region.id)return;
|
|
|
+ if (!region.name){
|
|
|
+ this.$delete(this.parentMapping[parent],0);
|
|
|
+ if (this.parentMapping[parent].length === 0)this.$delete(this.parentMapping,parent);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ window.tempTip.postBasicRequest("{{url('maintenance/region/store')}}",{name:region.name,parent_id:region.parent_id,type:region.type},res=>{
|
|
|
+ region.id = res.id;
|
|
|
+ this.$set(this.parentMapping[parent][0],region);
|
|
|
+ })
|
|
|
+ },
|
|
|
},
|
|
|
});
|
|
|
</script>
|