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

@extends('layouts.app')
@section('title')设置@endsection

@section('content')
    @component('maintenance.menu')@endcomponent
    <div class="container-fluid" 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>
                    </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"></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">
                        <div class="row m-0">
                            <span class="fa fa-angle-double-right col-1 cursor-pointer"></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>
            </div>
        </div>
    </div>
@endsection

@section("lastScript")
    <script>
        new Vue({
            el:"#container",
            data:{
                regions:[
                    @foreach($regions as $region)
                    {!! $region !!},
                    @endforeach
                ],
                parentMapping:{},
            },
            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;
            },
        });
    </script>
@stop