baoshi-was/resources/views/maintenance/region/index.blade.php

@extends('layouts.app')
@section('title')设置@endsection
@section('content')
    <div class="container-fluid d-none" id="container">
        <div class="card">
            <div class="card-body mt-2">
                <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" :id="'fa-tree-'+region.id" @click="showItem('tree-'+region.id,$event)" v-if="parentMapping[region.id]"></span>
                            <span v-else>&nbsp;&nbsp;&nbsp;</span>
                            &nbsp;&nbsp;<span class="fa fa-circle" :class="region.deleted_at ? 'text-danger' : 'text-success'"></span>&nbsp;
                            @{{ region.name }}<label class="text-secondary" v-if="region.code">(@{{ region.code }})</label>
                            <label class="cursor-pointer" @click="addRegion(region.id,region.type)">&nbsp;<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 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>&nbsp;&nbsp;&nbsp;</span>
                                    &nbsp;&nbsp;<span class="fa fa-circle" :class="city.deleted_at ? 'text-danger' : 'text-success'"></span>&nbsp;
                                    @{{ city.name }}<label class="text-secondary" v-if="city.code">(@{{ city.code }})</label>
                                    <label class="cursor-pointer" @click="addRegion(city.id,city.type)">&nbsp;<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 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>&nbsp;&nbsp;&nbsp;</span>
                                            &nbsp;&nbsp;<span class="fa fa-circle" :class="district.deleted_at ? 'text-danger' : 'text-success'"></span>&nbsp;
                                            @{{ district.name }}<label class="text-secondary" v-if="district.code">(@{{ district.code }})</label>
                                            <label class="cursor-pointer" @click="addRegion(district.id,district.type)">&nbsp;<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 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>&nbsp;&nbsp;&nbsp;</span>
                                                    &nbsp;&nbsp;<span class="fa fa-circle" :class="town.deleted_at ? 'text-danger' : 'text-success'"></span>&nbsp;
                                                    @{{ town.name }}<label class="text-secondary" v-if="town.code">(@{{ town.code }})</label>
                                                    <label class="cursor-pointer" @click="addRegion(town.id,town.type)">&nbsp;<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 v-if="street.id">
                                                            <span class="fa fa-circle" :class="street.deleted_at ? 'text-danger' : 'text-success'"></span>&nbsp;
                                                            @{{ 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>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section("lastScript")
    <script>
        new Vue({
            el:"#container",
            data:{
                regions:[
                    @foreach($regions as $region)
                    {!! $region !!},
                    @endforeach
                ],
                parentMapping:{},
                showList:{},
            },
            mounted(){
                let parent = {};
                this.regions.forEach(region=>{
                    let p = region.parent_id ? region.parent_id : 0;
                    if (parent[p])parent[p].push(region);
                    else parent[p] = [region];
                });
                this.parentMapping = parent;
                setTimeout(()=>{
                    $(".up").slideUp();
                    $("#container").removeClass("d-none");
                },0);
            },
            methods:{
                showItem(id,event){
                    if (this.showList[id]){
                        this.showList[id] = false;
                        event.target.className = "fa fa-hand-o-right cursor-pointer";
                        $("#"+id).slideUp();
                    }else{
                        this.showList[id] = true;
                        event.target.className = "fa fa-hand-o-down cursor-pointer";
                        $("#"+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>
@stop