MD_worker/pages/select/accessories.vue

<template>
    <block v-if="!isBom">
        <view class="search-box">
            <up-search placeholder="搜索关键词" v-model="keyword" height="35" @blur="onSearch" :clearabled="false"
                :showAction="false" />
            <view v-if="content.where.condition" class="clear" @click.stop="onSearch('')">
                <up-icon name="close-circle-fill" size="20" />
            </view>
        </view>
    </block>
    <up-tabs :list="[{ name: '选择新配件' }, { name: '选择旧配件' }]" :current="result.selected == 'newtitems' ? 0 : 1"
        @click="changeTabs" />
    <My_listbox v-if="!isBom" ref="listBox" :empty="!list.length" :pullDown="!isBom" @getlist="getList">
        <showList :result="resultIds" :list='list' @onClick="onSelect" />
        <view style="height: 200rpx;" />
    </My_listbox>

    <view v-else-if="bomList.length" class="bom">
        <view class="left">
            <view class="class1" :class="active.class1 == index ? 'class1active' : ''" @click="changeClass1(index)"
                v-for="(item, index) in bomList" :key="item.plm_bomid" hover-class="navigator-hover">
                {{ item.bomname }}
            </view>
        </view>

        <view class="right">
            <My_listbox ref="listBox" :pullDown="false">
                <up-collapse :value="collapse1" @change="changeCollapse1($event)">
                    <up-collapse-item :ref="el => {
                        if (el) {
                            collapseRefs['collapse' + item.plm_bomid] = el
                        }
                    }" :cellCustomStyle="{
                        backgroundColor: '#fff',
                    }" v-for="item in bomList[active.class1].subdep" :key="item.plm_bomid" :title="item.bomname"
                        :name="item.plm_bomid">
                        <up-collapse @change="changeCollapse($event, item.plm_bomid)" v-if="item.subdep.length"
                            :name="item.plm_bomid">
                            <up-collapse-item :cellCustomStyle="{
                                backgroundColor: '#fff',
                            }" :ref="el => {
                                if (el) {
                                    collapseRefs['collapse' + item.plm_bomid] = el
                                }
                            }" v-for="item1 in item.subdep" :key="item1.plm_bomid" :title="item1.bomname"
                                :name="item1.plm_bomid">
                                <showList v-if="item1.items.length" size="small" :result="resultIds" :list='item1.items'
                                    @onClick="onSelect" />
                            </up-collapse-item>
                        </up-collapse>

                        <showList v-if="item.items.length" size="small" :result="resultIds" :list='item.items'
                            @onClick="onSelect" />
                    </up-collapse-item>
                </up-collapse>
                <view style="height: 200rpx;" />
            </My_listbox>
        </view>
    </view>

    <My_listbox v-else ref="listBox" :empty="true" @getlist="getBomList" />
    <view class="footer">
        <My-button :text="`确定添加 ${result.newtitems.length} / ${result.oldtitems.length} 配件`" @onClick="onAdd" />
    </view>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import showList from "./accessoriesList.vue"
const { $Http } = getCurrentInstance().proxy;

const listBox = ref(null);
const isBom = ref(false);
let result = reactive({
    ...$Http.basicsData
});
const resultIds = ref([]);

const content = reactive({
    loading: false,
    "pageNumber": 1,
    "pageSize": 20,
    "where": {
        "condition": ""
    }
})

function changeTabs(e) {
    uni.setNavigationBarTitle({
        title: e.name
    });
    result.selected = e.name == "选择新配件" ? "newtitems" : "oldtitems";
    resultIds.value = result[result.selected].map(item => item.itemid);
}

function onAdd() {
    $Http.selectAcc(result)
}

function onSelect(e) {
    if (result[result.selected].some(item => item.itemid == e.itemid)) {
        result[result.selected] = result[result.selected].filter(item => item.itemid != e.itemid);
    } else {
        result[result.selected].push(e);
    }
    resultIds.value = result[result.selected].map(item => item.itemid);
}

const list = ref([]);

onLoad(() => {
    console.log("$Http.basicsData", result)
    uni.setNavigationBarTitle({
        title: result.selected == "oldtitems" ? "选择旧配件" : "选择新配件",
    })
    resultIds.value = result[result.selected].map(item => item.itemid);

    let content1 = $Http.content1;
    content.sys_enterpriseid = content1.sys_enterpriseid;
    content.sa_workorderid = content1.sa_workorderid;

    if (content1.sku) $Http.basic({
        "id": 2025080610424703,
        "content": content1
    }).then(res => {
        console.log("查询产品是否存在BOM", res)
        if (res.data == 0) {
            // 不存在BOM
            getList(true);
        } else {
            // 存在BOM
            isBom.value = true;
            getBomList();
        }
    })
})

const bomList = ref([]);

let active = reactive({
    class1: 0
});

function changeClass1(index) {
    active.class1 = index;
}

// 折叠面板
const collapseRefs = ref({})
const collapse1 = ref([])

function changeCollapse1(e) {
    collapse1.value = e.filter(v => v.status == 'open').map(v => v.name)
}

function changeCollapse(e, id) {
    nextTick(() => {
        collapseRefs.value['collapse' + id].init()
    });
    setTimeout(() => {
        nextTick(() => {
            collapseRefs.value['collapse' + id].init()
        });
    }, 330);
}

// 有bom
function getBomList() {
    $Http.basic({
        "id": "2025080610425503",
        content: {
            "sa_aftersalesbomid": content.sa_workorderid,
            "sys_enterpriseid": content.sys_enterpriseid,
        }
    }).then(res => {
        console.log("获取bom配件列表", res)
        listBox.value.refreshToComplete();
        listBox.value.setHeight();
        if (res.code == 1) {
            bomList.value = processBomData(res.data)
            console.log("bomList", bomList.value);
        } else {
            if (res.msg) uni.showToast({
                title: res.msg,
                icon: 'none'
            });
        }
    })
}

function processBomData(originalData) {
    // 1. 提取所有一级分类节点
    const topLevelNodes = [];

    // 遍历原始数据
    originalData.forEach(dataSet => {
        dataSet.bom?.forEach(rootNode => {
            // 提取根节点下的一级分类
            if (rootNode.subdep && rootNode.subdep.length > 0) {
                topLevelNodes.push(...rootNode.subdep);
            }
        });
    });

    // 2. 递归处理节点
    const processNode = (node) => {
        node.items = node.items || [];
        node.subdep = node.subdep || [];
        // 如果当前节点没有items和subdep，直接返回null
        if (node.items.length === 0 && node.subdep.length === 0) return null;

        try {
            if (node.items.length) node.items = node.items.map(item => {
                item.imageUrl = item.attinfos.length ? $Http.getSpecifiedImage(item.attinfos[0]) : ''
                return item;
            });
        } catch (error) {

        }
        // 创建新节点副本
        const newNode = { ...node };
        // 处理子节点
        if (node.subdep.length) newNode.subdep = node.subdep.map(subNode => processNode(subNode)).filter(subNode => subNode !== null);
        return newNode;
    };

    // 3. 处理所有一级分类节点
    return topLevelNodes.map(node => processNode(node)).filter(node => node && (node.subdep.length || node.items.length));
}


// 无BOM

const keyword = ref('');

function onSearch(e) {
    if (content.where.condition == e) return;
    content.where.condition = e;
    keyword.value = e;
    getList(true);
}

function getList(init = false) {
    if (isBom.value) return;
    if (content.loading) return;
    if (init) content.pageNumber = 1;
    content.loading = true;
    $Http.basic({
        "id": "2025080610425103",
        content
    }).then(res => {
        console.log("获取配件列表", res)
        content.loading = false;
        listBox.value.refreshToComplete();
        listBox.value.setHeight();
        res.data = res.data.map(item => {
            item.imageUrl = item.attinfos.length ? $Http.getSpecifiedImage(item.attinfos[0]) : ''
            return item;
        });
        if (res.code == 1) {
            list.value = reactive(res.firstPage ? res.data : list.value.concat(res.data));
            content.pageTotal = res.pageTotal;
            content.pageNumber = res.pageNumber;
        } else {
            if (res.msg) uni.showToast({
                title: res.msg,
                icon: 'none'
            });
        }
    })
}
</script>

<style lang="scss" scoped>
.bom {
    width: 100vw;
    display: flex;
    min-height: 100vh;

    .left {
        width: 250rpx;
        background: #fff;
        flex-shrink: 0;

        .class1 {
            padding: 30rpx 30rpx;
            width: 250rpx;
            box-sizing: border-box;
            background: #FFFFFF;
            border-radius: 0rpx 8rpx 0rpx 0rpx;
            font-family: PingFang SC, PingFang SC;
            font-size: 28rpx;
            color: #999999;
        }

        .class1active {
            position: relative;
            background: #F7F7FF;
            color: #3774F6;
        }

        .class1active::after {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 8rpx;
            height: 100%;
            background: #3774F6;
        }
    }

    .right {
        flex: 1;


    }
}

.search-box {
    position: relative;
    padding: 20rpx;
    background: #fff;

    .clear {
        position: absolute;
        display: flex;
        align-items: center;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 80rpx;
        padding-left: 10rpx;
        height: 70rpx;
        z-index: 2;
    }
}

.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120rpx;
    padding: 10rpx 20rpx;
    background: #fff;
    box-sizing: border-box;
}
</style>