shuhi-ui/src/views/recycleLogistics/warehouse/components/area-setting.vue

<!-- 编辑弹窗 -->
<template>
    <ele-modal form :width="1080" :bodyStyle="{ 'min-height': '400px' }" v-model="visible" :title="title"
        @open="handleOpen">
        <div class="flex flex-col" v-loading="loading">
            <div class="flex" v-for="dq in areaList" :key="dq.code">
                <el-checkbox :label="dq.name" :indeterminate="isIndeterminateShow(dq)" style="min-width: 100px"
                    @change="(value) => handleDqChange(value, dq)" />

                <div v-for="item in dq.children" class="mr-6 flex items-center" :key="item.code">
                    <el-checkbox @change="(value) => handleParentChange(value, item)" :data-id="item.id"
                        v-model="item.otherSelected" style="margin-right: 5px" :true-value="1" :false-value="0"
                        :indeterminate="isIndeterCityShow(item, 'otherSelected')
                            " v-if="item.otherSelected == 1" disabled />
                    <el-checkbox @change="(value) => handleParentChange(value, item)" :data-id="item.id"
                        v-model="item.mySelected" style="margin-right: 5px" :true-value="1" :false-value="0"
                        :indeterminate="isIndeterCityShow(item, 'mySelected')" v-else />
                    <ele-popover :width="400" trigger="click" :title="item.district" :showArrow="false"
                        :disabled="isPopoverDisabled(item)">
                        <template #reference>
                            <div class="flex items-center cursor-pointer" :class="{
                                'disabled-popover': isPopoverDisabled(item)
                            }">
                                <el-text :type="item.mySelected == 1 ? 'primary' : ''
                                    ">{{ item.district }}</el-text>
                                <el-text type="warning" v-if="isShowAll(item)">(全)</el-text>
                                <el-icon>
                                    <CaretBottom />
                                </el-icon>
                            </div>
                        </template>
                        <template v-for="child in item.childInfo">
                            <el-checkbox @change="
                                (value) =>
                                    handleChildChange(value, item, child)
                            " :data-id="child.id" :label="child.district" v-model="child.otherSelected" :true-value="1"
                                :false-value="0" v-if="child.otherSelected == 1" disabled />
                            <el-checkbox v-else @change="
                                (value) =>
                                    handleChildChange(value, item, child)
                            " :data-id="child.id" v-model="child.mySelected" :label="child.district" :true-value="1"
                                :false-value="0" />
                        </template>
                    </ele-popover>
                </div>
            </div>
        </div>
        <el-text type="danger">灰色地区表示已经添加到其他仓库中，请先在其他仓库中去掉勾选后，再重新选择</el-text>

        <template #footer>
            <el-button @click="handleCancel">关闭</el-button>
            <el-button type="primary" @click="handleSubmit">确定</el-button>
        </template>
    </ele-modal>
</template>

<script setup>
import { ref, reactive, nextTick } from 'vue';
import request from '@/utils/request';
import { CaretBottom, CaretTop } from '@element-plus/icons-vue';

/** 弹窗是否打开 */
const visible = defineModel({ type: Boolean });

/** 关闭弹窗 */
const handleCancel = () => {
    visible.value = false;
};

//计算是否禁用
const isPopoverDisabled = computed(() => (item) => {
    let checked = item.childInfo.every((i) => i.otherSelected == 1);
    return checked;
});

//计算是否显示全
const isShowAll = computed(() => (item) => {
    let checked = item.childInfo.every((i) => i.mySelected == 1);
    return checked;
});
//计算大区是否全选
const isIndeterminateShow = computed(() => (dq) => {
    let len = dq.children.length;
    let length = dq.children.filter((i) => i.mySelected == 1).length;

    return length > 0 && length < len;
});

//计算省市是否全选
const isIndeterCityShow = computed(() => (item, type) => {
    let len = item.childInfo.length;
    let length = item.childInfo.filter((i) => i[type] == 1).length;

    return length > 0 && length < len;
});

/** 弹窗打开事件 */
const title = ref('仓库区域设置');
const handleOpen = (row) => {
    visible.value = true;
    nextTick(() => {
        if (row && row.id) {
            title.value = row.godownName
                ? `${row.godownName}区域设置`
                : `仓库区域设置`;

            row && getAreaInfo(row.id);
        }
    });
};

let formdata = reactive({
    godownId: '',
    selectendList: [{ provinceId: '', cityId: '' }]
});

//获取区域基础数据信息
let dqList = ref([
    { name: '华东', code: 'hd' },
    { name: '华北', code: 'hb' },
    { name: '华中', code: 'hz' },
    { name: '华南', code: 'hn' },
    { name: '东北', code: 'db' },
    { name: '西北', code: 'xb' },
    { name: '西南', code: 'xn' },
    { name: '港澳台', code: 'gat' },
    { name: '海外', code: 'hw' }
]);
const areaList = ref([]);
const loading = ref(false);
const getAreaInfo = (godownId) => {
    formdata.godownId = godownId;
    loading.value = true;
    request
        .get(`/baseinfo/godown/getGodownAreaList/${godownId}`)
        .then((res) => {
            if (res.data.code == 200) {
                areaList.value.length = 0;
                dqList.value.forEach((item) => {
                    item.checked = false;
                    item.children = res.data.data[item.code];
                    areaList.value.push(item);
                });

                console.log(areaList.value, 'areaList.value');
            }
        })
        .finally(() => (loading.value = false));
};

//区域checkbox改变事件
const handleDqChange = (value, dq) => {
    if (value == 1) {
        dq.children.forEach((item) => {
            if (item.otherSelected != 1) {
                item.mySelected = 1;
                item.childInfo.forEach((i) => {
                    if (i.otherSelected != 1) {
                        i.mySelected = 1;
                    }
                });
            }
        });
    } else if (value == 0) {
        dq.children.forEach((item) => {
            if (item.otherSelected != 1) {
                item.mySelected = 0;
                item.childInfo.forEach((i) => {
                    if (i.otherSelected != 1) {
                        i.mySelected = 1;
                    }
                });
            }
        });
    }
};

//父级checkbox改变事件
const handleParentChange = (value, item) => {
    if (value == 1) {
        item.childInfo.forEach((i) => {
            i.mySelected = 1;
        });
    } else if (value == 0) {
        item.childInfo.forEach((i) => {
            i.mySelected = 0;
        });
    }
};
//子级checkbox改变事件
const handleChildChange = (value, item, child) => {
    let checked = item.childInfo.some((i) => i.mySelected == 1);
    item.mySelected = checked ? 1 : 0;
};

//格式化选中数据
const formatterSelected = () => {
    let arr = [];
    areaList.value.forEach((item) => {
        item.children.forEach((i) => {
            i.childInfo.forEach((j) => {
                if (j.mySelected == 1 && j.otherSelected != 1) {
                    arr.push({
                        provinceId: i.id,
                        cityId: j.id
                    });
                }
            });
        });
    });
    return arr;
};

/** 提交 */
const handleSubmit = () => {
    formdata.selectendList = formatterSelected();
    console.log(formdata);
    let data = JSON.parse(JSON.stringify(formdata));
    request.post(`/baseinfo/godown/setGodownAreaInfo`, data).then((res) => {
        if (res.data.code == 200) {
            visible.value = false;
        }
    });
};

defineExpose({
    handleOpen
});
</script>

<style lang="scss">
.disabled-popover {
    cursor: not-allowed;

    .el-text {
        color: #909399;
    }

    .el-icon {
        color: #909399;
        fill: #909399;
    }
}
</style>