地域无限极分类

resources/views/maintenance/region/index.blade.php

@@ -3,52 +3,51 @@
 
 @section('content')
     @component('maintenance.menu')@endcomponent
-    <div class="container-fluid" id="container">
+    <div class="container-fluid d-none" id="container">
         <div class="card">
             <div class="card-body mt-2">
-                <div class="row">
-                    <div class="col-5 offset-4">
-                        <div class="row m-0 font-weight-bold">
-                            <label class="offset-1 col-4">省份</label>
-                            <label class="col-4">邮编</label>
-                            <label class="col-3">状态</label>
+                <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 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>
                         </div>
-                    </div>
-                </div>
-                <div class="row" v-for="region in parentMapping[0]">
-                    <div class="col-5 offset-4">
-                        <div class="row m-0">
-                            <span class="fa fa-angle-double-right col-1 cursor-pointer" @click="showItem()"></span>
-                            <label class="col-4">@{{ region.name }}</label>
-                            <label class="col-4">@{{ region.code }}</label>
-                            <label class="col-3">
-                                <span class="fa fa-circle" :class="region.deleted_at ? 'text-danger' : 'text-success'"></span>
-                                <span v-if="region.deleted_at">冻结</span><span v-else>正常</span>
-                            </label>
-                        </div>
-                    </div>
-                    <div class="col-5 offset-5 border rounded border-2">
-                        <div class="row" v-for="city in parentMapping[region.id]">
-                            <div class="col-12">
-                                <div class="row m-0">
-                                    <span class="fa fa-angle-double-right col-1 cursor-pointer"></span>
-                                    <label class="col-3">@{{ city.name }}</label>
-                                    <label class="col-4">@{{ city.code }}</label>
-                                    <label class="col-3">
-                                        <span class="fa fa-circle" :class="city.deleted_at ? 'text-danger' : 'text-success'"></span>
-                                        <span v-if="city.deleted_at">冻结</span><span v-else>正常</span>
-                                    </label>
+                        <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>
+                                    <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>
                                 </div>
-                                <div class="row m-0">
-                                    <div class="col-10 offset-2">
-                                        <div class="row" v-for="district in parentMapping[city.id]">
-                                            <span class="fa fa-angle-double-right col-1 cursor-pointer"></span>
-                                            <label class="col-3">@{{ city.name }}</label>
-                                            <label class="col-4">@{{ city.code }}</label>
-                                            <label class="col-3">
-                                                <span class="fa fa-circle" :class="city.deleted_at ? 'text-danger' : 'text-success'"></span>
-                                                <span v-if="city.deleted_at">冻结</span><span v-else>正常</span>
-                                            </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>
+                                            <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>
+                                        </div>
+                                        <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>
+                                                    <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>
+                                                </div>
+                                                <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>&nbsp;&nbsp;--}}
+                                                            <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>
+                                                    </div>
+                                                </div>
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
@@ -72,6 +71,7 @@
                     @endforeach
                 ],
                 parentMapping:{},
+                showList:{},
             },
             mounted(){
                 let parent = {};
@@ -81,7 +81,23 @@
                     else parent[p] = [region];
                 });
                 this.parentMapping = parent;
-                console.log(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();
+                    }
+                },
             },
         });
     </script>

resources/views/order/index/freeze.blade.php

@@ -3,7 +3,7 @@
 
 @section('content')
     @component('order.index.menu')@endcomponent
-    <div class="card" id="container">
+    <div class="card d-none" id="container">
         <div class="card-body">
             <div class="container-fluid">
 
@@ -61,6 +61,9 @@
                 result : [],
                 stop:false,
             },
+            mounted(){
+                $("#container").removeClass("d-none");
+            },
             methods:{
                 openModal(model = null,index = null){
                     if (!model)this.freeze = {};