hemall.terabimsoft.com.cn/plugins/embargoed-area/views/admin/widget-goods.blade.php

<style>
    .el-dialog__wrapper {
        height: 100%;
        width: 100% !important;
        margin: 50px auto;
        background-color:transparent;
    }
</style>

<div class='panel panel-default'>
    <div class='panel-heading'>
        禁运区域设置
    </div>
    <div class='panel-body'>
        <div id='embargoed_area_goods'>
            <div class="form-group">
                <label for="firstname" class="col-sm-2 control-label">不配送区域</label>
                <div class="col-sm-8 input-group ">
                    <input type="hidden" name="widgets[embargoed_area][area_ids]" class="form-control" v-model="area_ids"/>
                    <input type="hidden" name="widgets[embargoed_area][province_ids]" class="form-control" v-model="province_ids"/>
                    <input type="hidden" name="widgets[embargoed_area][areas]" class="form-control" v-model="areas"/>
                    <div v-html="areas"></div>
                    <span class='help-block'>
                        <input class="btn btn-success" type="button" @click="openVisible" value="选择区域" >
                    </span>
                </div>
            </div>
            <div>
                <el-dialog title="请选择地区" :visible.sync="centerDialogVisible" center v-if="showVisible"
                           :before-close="embargoedAreaBeforeClose">
                    <el-tree
                            v-loading="loading"
                            :props="props"
                            node-key="id"
                            :default-checked-keys="area_ids"
                            :default-expanded-keys="province_ids"
                            show-checkbox
                            lazy
                            @check-change="checkAreas"
                            ref="addressTree"
                            :data="treeData"
                            :load="loadNode"
                    >
                    </el-tree>
                    <span slot="footer" class="dialog-footer">
                    <el-button @click="embargoedAreaBeforeClose">取 消</el-button>
                    <el-button type="primary" @click="saveAreas">确 定</el-button>
                </span>
                </el-dialog>
            </div>
        </div>
    </div>
</div>
<script>
    var vm = new Vue({
        el: "#embargoed_area_goods",
        delimiters: ['[[', ']]'],
        data() {
            return {
                activeName: 'one',
                area_ids: [],
                province_ids: [],
                areas: '',
                areaIds: '',
                provinceIds: '',
                chooseAreas: [],
                chooseAreaIds: [],
                chooseProvinceIds: [],
                centerDialogVisible: false,
                showVisible: false,
                loading: false,
                treeData: [],
                props: {
                    label: 'areaname',
                    children: 'children',
                    isLeaf: 'isLeaf'
                },
            }
        },
        mounted() {
            // this.getData()
        },

        created: function () {
            this.getData()
        },
        methods: {
            getViewItem: function () {
                return {!! $item !!}
            },
            getData() {
                let initValue = this.getViewItem();
                if (initValue) {
                    console.log(initValue);
                    this.area_ids = initValue.area_ids;
                    this.province_ids = initValue.province_ids;
                    this.areas = initValue.areas;
                }
            },
            openVisible() {
                this.centerDialogVisible = true;
                this.showVisible = true;
                this.area_ids.forEach((item, index) => {
                    this.area_ids[index] = Number(item)
                });
                this.province_ids.forEach((item, index) => {
                    this.province_ids[index] = Number(item)
                });
            },
            loadNode(node, resolve) {
                this.loading = true;
                if (!node.data.id) {
                    //省份
                    node.data.id = 0;
                    this.$http.get("{!! yzWebUrl('area.list', ['parent_id'=> 0]) !!}").then(response => {
                        response.data.data.forEach(function (province) {
                            province.isLeaf = false;
                        });
                        resolve(response.data.data);

                        this.loading = false;
                    }, response => {
                        console.log(response);
                    });
                } else {
                    //城市
                    this.$http.get("{!! yzWebUrl('area.list', ['parent_id'=> '']) !!}" + node.data.id).then(response => {
                        //城市没有子节点
                        response.data.data.forEach(function (city) {
                            city.isLeaf = true;
                        })
                        resolve(response.data.data);
                        // 载入数据后,刷新已选中
                        this.loading = false;
                    }, response => {
                        console.log(response);
                    });
                }
            },
            checkAreas(node, checked, children) {
                if (node.isLeaf) {
                    return;
                }
                if (checked) {
                    if (!this.province_ids) {
                        this.province_ids = [];
                    }
                    this.province_ids.push(node.id)
                }
            },
            saveAreas() {
                let areas = [];
                let area_ids = [];
                let province_ids = [];
                this.$refs.addressTree.getCheckedNodes().forEach(function (node) {
                    if (node.level == 1) {
                        province_ids.push(node.id);
                    } else if (node.level == 2) {
                        area_ids.push(node.id);
                        areas.push(node.areaname)
                    }
                });
                this.$refs.addressTree.getHalfCheckedNodes().forEach(function (node) {
                    if (node.level == 1) {
                        province_ids.push(node.id);
                    }
                });
                this.province_ids = province_ids;
                this.area_ids = area_ids;
                this.areas = areas.join(";");
                this.areaIds = area_ids.join(";");
                this.provinceIds = province_ids.join(";");
                this.centerDialogVisible = false;
                this.showVisible = false;
            },
            embargoedAreaBeforeClose() {
                this.centerDialogVisible = false;
                this.showVisible = false;
            },

        },
    });
</script>