qimall/addons/Community/backend/views/components/com-community-goods.php

<?php


?>
<style>
    .flexcenter {
        display: flex;
        justify-content: center;
    }

    .el-checkbox-list {
        margin: 0 0 20px;
        display: block;
    }

    .el-card-style {
        max-height: 400px;
        overflow-y: auto;
        /* margin-right: 20px; */
    }

    .span-none-style {
        display: none;
    }

    .div-header-style {
        font-size: 14px;
        margin-left: 6px;
        margin-bottom: 20px;
    }

    input.el-input__inner {
        height: 32px;
        line-height: 32px;
        font-size: 13px;
    }

    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }

    .el-table-column--selection .cell {
        padding-left: 10px;
    }

    .zsan-padding-style {
        padding: 10px 0;
        margin: 0;
    }
</style>
<template id="com-community-goods">
    <div class="com-community-goods">
        <el-card class="edit-card" shadow="never">
            <el-form :model="communityGoodsForm" size="small" @submit.native.prevent>
                <div>
                    <el-form-item label="社区团购开关" prop="enable">
                        <el-switch :active-value="1" :inactive-value="0" v-model="communityGoodsForm.enable"></el-switch>
                        <p>开启时可选择自提点选项，关闭时默认提交订单选择方式只有快递配送</p>
                    </el-form-item>
                    <el-form-item label="是否开启自提退款" prop="enable_refund" v-if="communityGoodsForm.enable == 1">
                        <el-switch v-model="communityGoodsForm.enable_refund" :active-value="1" :inactive-value="0"></el-switch>
                        <p>订单没有核销前可退</p>
                    </el-form-item>
                    <el-form-item label="配送方式" prop="supported_logistics" v-if="communityGoodsForm.enable == 1">
                        <el-checkbox-group v-model="communityGoodsForm.supported_logistics" :min="1" :max="2">
                            <el-checkbox :label="1">快递配送</el-checkbox>
                            <el-checkbox :label="2">站点自提</el-checkbox>
                            <el-checkbox :label="3">送货上门</el-checkbox>
                        </el-checkbox-group>
                        <p>默认自动勾选快递配送和站点自提，选项最多只可选2项。</p>
                    </el-form-item>
                    <el-row :gutter="10" v-if="communityGoodsForm.enable == 1">
                        <div class="div-header-style">选择自提点</div>

                        <div class="com-district">
                            <el-card v-loading="districtLoading" shadow="always" body-style="padding:0" style="border:0;min-height: 100px;">
                                <div flex="dir:left box:mean">
                                    <template v-if="list.length > 0">
                                        <el-card class="el-card-style" shadow="always">
                                            <template v-for="(item, index) in list">
                                                <div class="el-checkbox el-checkbox-list" @click="selectProvince(index)">
                                                    <el-checkbox @change="pickerChange(item)" v-model="item.checked" :indeterminate="item.isIndeterminate" :disabled="item.unchecked">
                                                        <span class="span-none-style el-checkbox__label">{{item.name}}</span>
                                                    </el-checkbox>
                                                    <span class="el-checkbox__label">{{item.name}}</span>
                                                </div>
                                            </template>
                                        </el-card>
                                        <el-card class="el-card-style" shadow="always" v-if="list[p_index].children && list[p_index].children.length > 0">
                                            <template v-for="(item, index) in list[p_index].children">
                                                <div class="el-checkbox el-checkbox-list" @click="c_index = index">
                                                    <el-checkbox @change="pickerChange(item)" v-model="item.checked" :indeterminate="item.isIndeterminate" :disabled="item.unchecked">
                                                        <span class="span-none-style el-checkbox__label">{{item.name}}</span>
                                                    </el-checkbox>
                                                    <span class="el-checkbox__label">{{item.name}}</span>
                                                </div>
                                            </template>
                                        </el-card>
                                        <el-card class="el-card-style" shadow="always" v-if="list[p_index].children[c_index].children && list[p_index].children[c_index].children.length > 0">
                                            <template v-for="(item, index) in list[p_index].children[c_index].children">
                                                <div class="el-checkbox el-checkbox-list" @click="d_index = index">
                                                    <el-checkbox @change="pickerChange(item)" v-model="item.checked" :disabled="item.unchecked" :indeterminate="item.isIndeterminate">
                                                        <span class="span-none-style el-checkbox__label">{{item.name}}</span>
                                                    </el-checkbox>
                                                    <span class="el-checkbox__label">{{item.name}}</span>
                                                </div>
                                            </template>
                                        </el-card>
                                        <el-card class="el-card-style" shadow="always">
                                            <div>
                                                <el-input placeholder="请输入自提点名称" clearable v-model="searchStr" class="input-with-select" prefix-icon="el-icon-search" >
                                                </el-input>
                                            </div>
                                            <template v-if="list[p_index].children[c_index].children[d_index].children && list[p_index].children[c_index].children[d_index].children.length > 0">

                                                <template v-for="(item, index) in list[p_index].children[c_index].children[d_index].children">
                                                    <div class="el-checkbox el-checkbox-list zsan-padding-style" v-show="item.show">
                                                        <el-checkbox @change="pickerChange(item)" v-model="item.checked" :disabled="item.unchecked">
                                                            <span class="span-none-style el-checkbox__label">(id: {{item.id}}) {{item.name}}</span>
                                                        </el-checkbox>
                                                        <span class="el-checkbox__label">(id: {{item.id}}) {{item.name}}</span>
                                                    </div>
                                                </template>

                                            </template>
                                        </el-card>
                                    </template>
                                </div>
                            </el-card>
                        </div>
                    </el-row>
                    <el-row :gutter="10" v-if="communityGoodsForm.enable == 1">
                        <el-col :span=24>
                            <div style="margin-top:30px;">商品默认全选自提点，如某个自提点不支持该商品则手动选择去掉勾。</div>
                        </el-col>
                    </el-row>
                </div>
            </el-form>
        </el-card>
    </div>
</template>
<script>
    Vue.component('com-community-goods', {
        template: "#com-community-goods",
        props: {
            goods_id: {
                type: Number | String,
                default: 0
            }
        },
        data() {
            return {
                SmartFormdialog: false,
                loading: false,
                communityGoodsForm: {
                    enable: 0,
                    enable_refund: 0,
                    list: [],
                    supported_logistics: [1, 2],
                },
                searchStr: '',
                p_index: 0,
                c_index: 0,
                d_index: 0,
                districtLoading: false,
                defaultList: [], // 所有省市区
                tempList: [], // 已选择待返回的省市区
                list: [], // 渲染页面使用省市区列表
                level: 3,
                detail: [],
                edit: [],
                params: [],
                seted: [],
                community_arr_ids: [],
            }
        },
        watch: {
            // form:{
            //     deep:true,
            //     immediate: true,
            //     handler(value){
            //         this.$emit("select", {Redpack: this.form});
            //     }
            // }

            // 监听传入的省市区数组
            edit() {
                this.newList();
            },
            searchStr() {
                this.showCommunity()
            }
        },
        mounted: function() {
            this.getRegionList()
            if (this.goods_id) this.getList();
        },
        methods: {
            showCommunity() {
                for (let i in this.list) {
                    for (let k in this.list[i].children) {
                        for (let j in this.list[i].children[k].children) {
                            for (let n in this.list[i].children[k].children[j].children) {
                                let show = true
                                if (this.searchStr) {
                                    show = this.list[i].children[k].children[j].children[n].name.indexOf(this.searchStr) > -1
                                }
                                this.list[i].children[k].children[j].children[n].show = show
                            }
                        }
                    }
                }
            },
            getList() {
                let self = this;

                request({
                    params: {
                        r: 'community/community-goods/get-goods-setting',
                        goods_id: self.goods_id
                    },
                    method: 'get'
                }).then(function(e) {
                    if (e.data.code == 0) {
                        self.communityGoodsForm = Object.assign(
                            self.communityGoodsForm,
                            e.data.data
                        );
                        self.edit = e.data.data.list;
                    }

                }).catch(function(e) {

                });
            },
            getRegionList() {
                let self = this;
                self.districtLoading = true;
                request({
                    params: {
                        r: 'community/common/region-list',
                        level: this.level
                    },
                    method: 'get'
                }).then(function(e) {
                    self.districtLoading = false;
                    if (e.data.code == 0) {
                        self.defaultList = e.data.data.list;
                        self.newList();
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(function(e) {
                    self.districtLoading = false;
                });
            },
            // 根据传入数据重新获取省市区列表
            newList() {
                let defaultList = this.checkList(this.defaultList, this.edit);
                console.log('defaultList', defaultList);
                this.setDefaultSelect()
                let listP = this.setListUnchecked(defaultList, 1);
                let list = this.setListUnchecked(listP, 0);
                this.list = JSON.parse(JSON.stringify(list));
                this.communityGoodsForm.list = this.list;
            },

            // 判断哪些省市区已经选择
            checkList(defaultList, edit) {
                if (typeof defaultList == 'undefined') {
                    return [];
                }
                let is_edit = edit.length > 0;
                for (let i in defaultList) {
                    // 是否选中
                    defaultList[i].checked = this.goods_id > 0 ? false : true;
                    // 是否禁用
                    defaultList[i].unchecked = false;
                    // 是否不确定
                    defaultList[i].isIndeterminate = false;

                    if (typeof defaultList[i].children != 'undefined') {
                        defaultList[i].children = this.checkList(defaultList[i].children, edit);
                    }

                    if (typeof edit != 'undefined') {
                        for (let j = 0; j < edit.length; j++) {
                            if (typeof edit[j].children != 'undefined') {
                                deep1: for (let k = 0; k < edit[j].children.length; k++) {
                                    if (typeof edit[j].children[k].children != 'undefined') {
                                        deep2: for (let q = 0; q < edit[j].children[k].children.length; q++) {
                                            if (typeof edit[j].children[k].children[q].children != 'undefined') {
                                                deep3: for (let x = 0; x < edit[j].children[k].children[q].children.length; x++) {
                                                    // if (defaultList[i].level == 4) {
                                                    //     console.log(defaultList[i].id, edit[j].children[k].children[q].children[x].id,
                                                    //         defaultList[i].id == edit[j].children[k].children[q].children[x].id)
                                                    // }
                                                    if (defaultList[i].level == 4) {
                                                        if (this.seted.indexOf(defaultList[i].id) > -1 && defaultList[i].checked) {
                                                            continue;
                                                        } else {
                                                            this.seted.push(defaultList[i].id);
                                                        }
                                                        defaultList[i].checked = defaultList[i].id == edit[j].children[k].children[q].children[x].id;
                                                    }
                                                    defaultList[i].unchecked = false;
                                                    defaultList[i].show = true
                                                    if (defaultList[i].checked) {
                                                        break deep1;
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                            else {
                                if (defaultList[i].id == edit[j].id) {
                                    defaultList[i].checked = true;
                                    defaultList[i].unchecked = false;
                                    break;
                                }
                            }
                        }
                    }
                }
                return defaultList;
            },
            // 重新赋值已经选择的省市区level == 1父级影响子级||level == 0子级影响父级
            setListUnchecked(list, level = 1) {
                if (typeof list == 'undefined') {
                    return list;
                }
                for (let i in list) {
                    if (typeof list[i].children != 'undefined') {
                        if (level == 0) {
                            list[i].children = this.setListUnchecked(list[i].children, 0);
                        }
                        let unchecked = false;
                        let checkCount = 0;
                        let isIndeterminateCount = 0;
                        for (let j in list[i].children) {
                            if (list[i].unchecked && level == 1) {
                                list[i].children[j].unchecked = true;

                            }
                            if (level == 1 && list[i].children[j].level == 4) {
                                list[i].children[j].show = true
                            }
                            if (list[i].children[j].unchecked) {
                                unchecked = true;
                            }
                            if (list[i].checked) {
                                list[i].children[j].checked = true;
                            }
                            if (list[i].children[j].checked) {
                                checkCount++;
                            }
                            if (list[i].children[j].isIndeterminate) {
                                isIndeterminateCount++;
                            }
                        }
                        if (unchecked && level == 0) {
                            list[i].unchecked = true;
                        }
                        if (list[i].children.length == checkCount) {
                            list[i].checked = true;
                        } else if (checkCount > 0) {
                            list[i].checked = false;
                            list[i].isIndeterminate = true;
                        } else {
                            list[i].checked = false;
                            if (isIndeterminateCount > 0) {
                                list[i].isIndeterminate = true;
                            } else {
                                list[i].isIndeterminate = false;
                            }
                        }
                        if (level == 1) {
                            list[i].children = this.setListUnchecked(list[i].children, 1);
                        }
                    }
                }
                return list;
            },
            // 将当前值的子列表的选中状态与当前值一致
            changeAllList(list, checked) {
                if (typeof list != 'undefined') {
                    for (let i in list) {
                        if (typeof list[i].children != 'undefined') {
                            list[i].children = this.changeAllList(list[i].children, checked);
                        }
                        list[i].checked = checked;
                    }
                }
                return list;
            },
            // 重置所有省市区的选中状态 返回已选中的省市区
            setTempList(list) {
                let newList = [];
                let checkCount = 0;
                let isIndeterminateCount = 0;
                for (let i in list) {
                    if (typeof list[i].children != 'undefined') {
                        let childList = this.setTempList(list[i].children);
                        if (childList.isIndeterminateCount > 0) {
                            list[i].checked = false;
                            list[i].isIndeterminate = true;
                            isIndeterminateCount++;
                            newList = newList.concat(childList.newList);
                        } else if (childList.checkCount < list[i].children.length) {
                            list[i].checked = false;
                            if (childList.checkCount > 0) {
                                list[i].isIndeterminate = true;
                                isIndeterminateCount++;
                                newList = newList.concat(childList.newList);
                            } else {
                                list[i].isIndeterminate = false;
                            }
                        } else if (childList.checkCount == list[i].children.length) {
                            list[i].checked = true;
                            list[i].isIndeterminate = false;
                            newList = newList.concat(childList.newList);
                        } else {
                            list[i].checked = true;
                            list[i].isIndeterminate = false;
                        }
                    }
                    if (list[i].checked) {
                        checkCount++;
                        newList.push(list[i]);
                    }
                }
                return {
                    newList: newList,
                    checkCount: checkCount,
                    isIndeterminateCount: isIndeterminateCount
                };
            },
            // 向父组件发送消息
            pickerChange(item) {
                this.changeAllList(item.children, item.checked);
                let tempList = this.setTempList(this.list);
                this.tempList = tempList.newList;
                this.selectItem(item)
                this.$emit('selected', this.tempList, this.params);
            },
            /**
             * 获取选择的自提点ID
             */
            selectItem(item) {
                if (item.level == 4) {
                    item.checked ? this.community_arr_ids.push(item.id) : this.community_arr_ids = this.community_arr_ids.filter(function (value) {
                        return value != item.id;
                    });
                } else {
                    let self = this
                    item.children && item.children.forEach(function(children) {
                        self.selectItem(children)
                    })
                }
            },
            /**
             * 默认选中
             */
            setDefaultSelect() {
                let self = this
                this.defaultList.forEach(function(children) {
                    self.selectItem(children)
                })
            },
            // 选择省份
            selectProvince(index) {
                this.p_index = index;
                this.c_index = 0;
                this.d_index = 0;
            },
        },
    });
</script>