yantai-app/yt_banshizhinan/components/select-grid/select-grid.vue

<template>
    <view class="m-select_publish_range" id="root" v-if="!hidden">
        <view id="wrap" class="wrap a-fade-in-up">
            <view class="title">
                <view class="row">
                    <view class="title-ico f-fl a-fade-in" @click="cancel">
                        <image class="title-ico-close" mode="aspectFit" src="/static/data/images/close.png" />
                    </view>
                    <view class="title-btn a-fade-in f-fr" @click="confirm">确定</view>
                </view>
            </view>

            <view class="wrap2">
                <view v-if="agencyLoading" class="m-hint">加载中……</view>
                <view v-else-if="agencyGridList.isNone" class="m-hint">暂无可选网格</view>
                <agency-item v-else :ini-folded="false" onShiftSelectGrid="shiftSelectGrid" onShiftSelectAgency="shiftSelectAgency" :agency="agencyGridList" />
            </view>
        </view>
    </view>
</template>

<script>
import agencyItem from '../single/single';
var __assign =
    (this && this.__assign) ||
    function () {
        __assign =
            Object.assign ||
            function (t) {
                for (var s, i = 1, n = arguments.length; i < n; i++) {
                    s = arguments[i];
                    for (var p in s) {
                        if (Object.prototype.hasOwnProperty.call(s, p)) {
                            t[p] = s[p];
                        }
                    }
                }
                return t;
            };
        return __assign.apply(this, arguments);
    };
var anime_1 = require('../../utils/anime');
var tempReslove = function () {};
import CustomerApi from '../../utils/api';
var app = getApp();
export default {
    components: {
        agencyItem
    },
    data() {
        return {
            hidden: true,
            agencyLoading: false,
            agencyGridList: {
                isNone: ''
            }
        };
    },
    mixins: [anime_1],
    props: {
        gridIdList: {
            type: Array,
            default: () => []
        },
        showName: {
            type: String,
            default: ''
        },
        onClose: () => {},
        onConfirm: () => {}
    },
    didMount() {
        this.show();
        this.getAgencyData();
    },
    methods: {
        show: function (needRefresh) {
            if (needRefresh === void 0) {
                needRefresh = false;
            }
            this.setData({
                hidden: false
            });
            if (needRefresh) {
                this.getAgencyData();
            }
            return new Promise(function (reslove) {
                tempReslove = reslove;
            });
        },
        hide: function () {
            // this.animeFadeOut("#root");
            // this.animeFadeOutDown("#wrap")
            this.setData(
                {
                    hidden: true
                },
                () => {
                    this.props.onClose();
                }
            );
        },
        confirm: function () {
            var _a = this.getSelectedGrid();
            var gridIdList = _a.gridIdList;
            var gridInfo = _a.gridInfo;
            if (gridIdList.length === 0 && Object.keys(gridInfo).length === 0) {
                return uni.showToast({
                    title: '未选择网格或组织',
                    icon: 'none'
                });
            }
            this.hide();
            this.$emit('onConfirm', this.getSelectedGrid())
            // this.props.onConfirm(this.getSelectedGrid());
            return tempReslove({
                type: 'confirm',
                data: this.getSelectedGrid()
            });
        },
        cancel: function () {
            this.hide();
            return tempReslove({
                type: 'cancel',
                data: null
            });
        },
        getSelectedGrid: function () {
            var agencyGridList = this.agencyGridList;
            var gridIdList = [];
            var gridNameList = [];
            var gridInfo = {};
            var fn = function (data, needName) {
                if (needName === void 0) {
                    needName = true;
                }
                if (data.selectedAll && !data.isNone && needName) {
                    gridNameList.push(data.agencyName);
                    needName = false;
                }
                if ('gridList' in data) {
                    data.gridList.forEach(function (item) {
                        if (item.selected) {
                            gridIdList.push(item.gridId);
                            gridInfo = item;
                            if (!data.selectedAll) {
                                gridNameList = [item.gridName];
                            }
                        }
                    });
                }
                data.subAgencyGridList.forEach(function (item) {
                    if (item.selected) {
                        gridInfo = item;
                        gridNameList = [item.agencyName];
                        gridIdList = [item.agencyId];
                    }
                    fn(item, needName);
                });
                if (data.selected) {
                    gridInfo = data;
                    gridNameList = [data.agencyName];
                    gridIdList = [data.agencyId];
                }
            };
            fn(agencyGridList);
            return {
                gridIdList: gridIdList,
                gridInfo: gridInfo,
                showName: gridNameList.join('、')
            };
        },
        computeSelectedAll: function (agencyGridList) {
            var fn = function (obj) {
                var selectedAll = true;
                if (
                    !obj.gridList.every(function (item) {
                        return item.selected;
                    })
                ) {
                    selectedAll = false;
                }
                obj.subAgencyGridList.forEach(function (item) {
                    if (!fn(item)) {
                        selectedAll = false;
                    }
                });
                obj.selectedAll = selectedAll;
                console.log(selectedAll);
                return selectedAll;
            };
            fn(agencyGridList);
            return agencyGridList;
        },
        shiftSelectGrid: function (event) {
            console.log(event);
            let obj = null;
            if ('gridId' in event) {
                obj = event;
            } else {
                obj = event.currentTarget.dataset;
            }
            var gridId = obj.gridId;
            var agencyGridList = this.agencyGridList;
            var fn = function (obj) {
                obj.gridList.forEach(function (item) {
                    if (item.gridId === gridId) {
                        item.selected = !item.selected;
                    } else {
                        item.selected = false;
                    }
                });
                obj.selected = false;
                obj.subAgencyGridList.forEach(function (item) {
                    item.selected = false;
                    fn(item);
                });
            };
            fn(agencyGridList);
            this.setData({
                agencyGridList: agencyGridList
            });
        },
        shiftSelectAgency: function (event) {
            let obj = null;
            if ('agencyId' in event) {
                obj = event;
            } else {
                obj = event.currentTarget.dataset;
            }
            var agencyId = obj.agencyId;
            var agencyGridList = this.agencyGridList;
            var fn = function (obj) {
                if (agencyId === obj.agencyId) {
                    obj.selected = !obj.selected;
                } else {
                    obj.selected = false;
                }
                if ('gridList' in obj) {
                    obj.gridList.forEach(function (item) {
                        item.selected = false;
                    });
                }
                obj.subAgencyGridList.forEach(function (item) {
                    fn(item);
                });
            };
            fn(agencyGridList);
            this.setData({
                agencyGridList: agencyGridList
            });
        },
        iniAgencyDataAddSelected: function (obj) {
            var gridIdList = this.props.gridIdList;
            var fn = function (obj) {
                if (!Array.isArray(obj.gridList)) {
                    obj.gridList = [];
                }
                if (gridIdList.indexOf(obj.agencyId) !== -1) {
                    // console.log(obj.agencyName,obj.agencyId);
                    obj.selected = true;
                }
                if ('gridList' in obj) {
                    obj.gridList.forEach(function (item) {
                        if (gridIdList.indexOf(item.gridId) !== -1) {
                            item.selected = true;
                        } else {
                            item.selected = false;
                        }
                    });
                }
                if (!Array.isArray(obj.subAgencyGridList)) {
                    obj.subAgencyGridList = [];
                }
                obj.subAgencyGridList.forEach(function (item) {
                    if (gridIdList.indexOf(item.agencyId) !== -1) {
                        item.selected = true;
                    } else {
                        item.selected = false;
                    }
                    fn(item);
                });
            };
            fn(obj);
            return obj;
        },
        formatArrObj: function (arr) {
            var that = this;
            var arr1 = [];
            if (arr && arr.length > 0) {
                arr1 = arr.map(function (item) {
                    return __assign(__assign({}, item), {
                        isOpt: true,
                        gridList: [],
                        subAgencyGridList: that.formatArrObj(item.subAgencyList)
                    });
                });
            }
            return arr1;
        },
        async getAgencyData() {
            this.setData({
                agencyLoading: true
            });
            let result = await CustomerApi.fetchAgencyList();
            let { code, data } = result;
            if (code == 0) {
                let obj = __assign(__assign({}, data), {
                    isOpt: true,
                    subAgencyGridList: this.formatArrObj(data.subAgencyList)
                });
                let agencyGridList1 = __assign({}, obj);
                let agencyGridList2 = this.iniAgencyDataAddSelected(agencyGridList1);

                // console.log(agencyGridList2);
                this.setData({
                    agencyLoading: false,
                    agencyGridList: agencyGridList2
                });
            }
        }
    },
    created: function () {}
};
</script>
<style>
@import '/data/acss/m-select_publish_range.css';
</style>