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>
        <view style="height: 20rpx;" />
    </block>

    <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 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">
            <view class="select" v-if="bomList[active.class1].subdep.length">
                <up-select v-model:current="active.class2" :label="bomList[active.class1].subdep[active.class2].bomname"
                    :options="bomList[active.class1].subdep" @select="selectClass2" labelName="bomname" />
                <up-select v-if="bomList[active.class1].subdep[active.class2].subdep.length"
                    v-model:current="active.class3"
                    :label="bomList[active.class1].subdep[active.class2].subdep[active.class3].bomname"
                    :options="bomList[active.class1].subdep[active.class2].subdep" @select="selectClass3"
                    labelName="bomname" />
            </view>

        </view>
    </view>
    <view class="footer">
        <My-button :text="`确定添加（${resultIds.length}）`" @onClick="onAdd" />
    </view>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, computed } 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([]);

const resultIds = ref([]);

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

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

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

const list = ref([]);

onLoad((options) => {
    console.log("options", options)
    console.log("$Http", $Http)

    result = result.concat(JSON.parse(options.list || '[]'));
    resultIds.value = result.map(item => item.itemid);
    console.log("初始选中", result, resultIds.value)
    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();
        }
    })
})

function selectClass2(index) {
    console.log(index)
    active.class2 = index;
    active.class3 = 0;
}

function selectClass3(index) {
    active.class3 = index;
}

const bomList = ref([
    {
        "bom": [
            {
                "plm_bomid": 1,
                "bomfullname": "集成灶",
                "subdep": [
                    {
                        "plm_bomid": 11,
                        "bomfullname": "集成灶/排油烟模块",
                        "subdep": [
                            {
                                "plm_bomid": 16,
                                "bomfullname": "集成灶/排油烟模块/烟管连接件",
                                "subdep": [
                                    {
                                        "plm_bomid": 30,
                                        "bomfullname": "集成灶/排油烟模块/烟管连接件/风门转接板",
                                        "subdep": [],
                                        "isdeep": 1,
                                        "num": "1",
                                        "bomname": "风门转接板",
                                        "rowindex": 29,
                                        "items": [
                                            {
                                                "begindate": "2025-07-18 00:00:00",
                                                "itemname": "600无缝板摩卡单色C(2米)",
                                                "module": "排油烟模块",
                                                "itemno": "LSAQPT00404",
                                                "spec": "",
                                                "sa_aftersalesbom_pjsid": 92,
                                                "itemid": 117810,
                                                "component": "烟管连接件",
                                                "enddate": "2025-08-15 00:00:00",
                                                "sa_aftersalesbomid": 2,
                                                "attinfos": [],
                                                "price": 0,
                                                "siteid": "lsa",
                                                "accessorie": "风门转接板",
                                                "model": "GB6201",
                                                "rowindex": 10,
                                                "brand": [],
                                                "typename": "风门转接板",
                                                "status": "",
                                                "tradefield": [
                                                    {
                                                        "itemid": 117810,
                                                        "rowindex": 10,
                                                        "tradefield": "建材家居"
                                                    }
                                                ]
                                            }
                                        ],
                                        "parentid": 16
                                    },
                                    {
                                        "plm_bomid": 29,
                                        "bomfullname": "集成灶/排油烟模块/烟管连接件/烟管接头",
                                        "subdep": [],
                                        "isdeep": 1,
                                        "num": "1",
                                        "bomname": "烟管接头",
                                        "rowindex": 28,
                                        "parentid": 16
                                    },
                                    {
                                        "plm_bomid": 28,
                                        "bomfullname": "集成灶/排油烟模块/烟管连接件/烟管延长接头",
                                        "subdep": [],
                                        "isdeep": 1,
                                        "num": "1",
                                        "bomname": "烟管延长接头",
                                        "rowindex": 27,
                                        "parentid": 16
                                    },
                                    {
                                        "plm_bomid": 27,
                                        "bomfullname": "集成灶/排油烟模块/烟管连接件/烟管堵盖",
                                        "subdep": [],
                                        "isdeep": 1,
                                        "num": "1",
                                        "bomname": "烟管堵盖",
                                        "rowindex": 26,
                                        "parentid": 16
                                    }
                                ],
                                "isdeep": 0,
                                "num": "1",
                                "bomname": "烟管连接件",
                                "rowindex": 15,
                                "parentid": 11
                            },
                            {
                                "plm_bomid": 15,
                                "bomfullname": "集成灶/排油烟模块/风道过渡面板",
                                "subdep": [],
                                "isdeep": 1,
                                "num": "1",
                                "bomname": "风道过渡面板",
                                "rowindex": 14,
                                "items": [
                                    {
                                        "begindate": "2025-07-15 00:00:00",
                                        "itemname": "600无缝板顺理成章",
                                        "module": "排油烟模块",
                                        "itemno": "LSAQPT00904",
                                        "spec": "",
                                        "sa_aftersalesbom_pjsid": 46,
                                        "itemid": 117714,
                                        "component": "风道过渡面板",
                                        "enddate": "2025-08-15 00:00:00",
                                        "sa_aftersalesbomid": 2,
                                        "attinfos": [],
                                        "price": 0,
                                        "siteid": "lsa",
                                        "accessorie": "",
                                        "model": "GB6281",
                                        "rowindex": 1,
                                        "brand": [],
                                        "typename": "风道过渡面板",
                                        "status": "",
                                        "tradefield": [
                                            {
                                                "itemid": 117714,
                                                "rowindex": 1,
                                                "tradefield": "建材家居"
                                            }
                                        ]
                                    }
                                ],
                                "parentid": 11
                            },
                            {
                                "plm_bomid": 14,
                                "bomfullname": "集成灶/排油烟模块/风道组件",
                                "subdep": [
                                    {
                                        "plm_bomid": 26,
                                        "bomfullname": "集成灶/排油烟模块/风道组件/集油弯头密封圈",
                                        "subdep": [],
                                        "isdeep": 1,
                                        "num": "1",
                                        "bomname": "集油弯头密封圈",
                                        "rowindex": 25,
                                        "items": [
                                            {
                                                "begindate": "2025-07-15 00:00:00",
                                                "itemname": "600无缝板爵士白",
                                                "module": "排油烟模块",
                                                "itemno": "LSAQTS00074",
                                                "spec": "",
                                                "sa_aftersalesbom_pjsid": 60,
                                                "itemid": 117720,
                                                "component": "风道组件",
                                                "enddate": "2025-08-15 00:00:00",
                                                "sa_aftersalesbomid": 2,
                                                "attinfos": [],
                                                "price": 0,
                                                "siteid": "lsa",
                                                "accessorie": "集油弯头密封圈",
                                                "model": "GB6281",
                                                "rowindex": 2,
                                                "brand": [],
                                                "typename": "集油弯头密封圈",
                                                "status": "",
                                                "tradefield": [
                                                    {
                                                        "itemid": 117720,
                                                        "rowindex": 2,
                                                        "tradefield": "建材家居"
                                                    }
                                                ]
                                            },
                                            {
                                                "begindate": "2025-07-15 00:00:00",
                                                "itemname": "600v双层蜂香板慈宫金碧（2.6米）",
                                                "module": "排油烟模块",
                                                "itemno": "LSAFZZ00214",
                                                "spec": "",
                                                "sa_aftersalesbom_pjsid": 61,
                                                "itemid": 117746,
                                                "component": "风道组件",
                                                "enddate": "2025-08-15 00:00:00",
                                                "sa_aftersalesbomid": 2,
                                                "attinfos": [],
                                                "price": 0,
                                                "siteid": "lsa",
                                                "accessorie": "集油弯头密封圈",
                                                "model": "GB626FV",
                                                "rowindex": 3,
                                                "brand": [],
                                                "typename": "集油弯头密封圈",
                                                "status": "",
                                                "tradefield": [
                                                    {
                                                        "itemid": 117746,
                                                        "rowindex": 7,
                                                        "tradefield": "建材家居"
                                                    }
                                                ]
                                            },
                                            {
                                                "begindate": "2025-07-15 00:00:00",
                                                "itemname": "68套色门框线白橡木",
                                                "module": "排油烟模块",
                                                "itemno": "LSAFZZ00083",
                                                "spec": "",
                                                "sa_aftersalesbom_pjsid": 62,
                                                "itemid": 117733,
                                                "component": "风道组件",
                                                "enddate": "2025-08-15 00:00:00",
                                                "sa_aftersalesbomid": 2,
                                                "attinfos": [],
                                                "price": 0,
                                                "siteid": "lsa",
                                                "accessorie": "集油弯头密封圈",
                                                "model": "LSA.EM-TL-004",
                                                "rowindex": 4,
                                                "brand": [],
                                                "typename": "集油弯头密封圈",
                                                "status": "",
                                                "tradefield": [
                                                    {
                                                        "itemid": 117733,
                                                        "rowindex": 5,
                                                        "tradefield": "建材家居"
                                                    }
                                                ]
                                            }
                                        ],
                                        "parentid": 14
                                    },
                                    {
                                        "plm_bomid": 25,
                                        "bomfullname": "集成灶/排油烟模块/风道组件/集油弯头",
                                        "subdep": [],
                                        "isdeep": 1,
                                        "num": "1",
                                        "bomname": "集油弯头",
                                        "rowindex": 24,
                                        "items": [
                                            {
                                                "begindate": "2025-07-15 00:00:00",
                                                "itemname": "600V双层蜂香板星辰-伽马2（3米）",
                                                "module": "排油烟模块",
                                                "itemno": "LSAQSX00127",
                                                "spec": "",
                                                "sa_aftersalesbom_pjsid": 64,
                                                "itemid": 117747,
                                                "component": "风道组件",
                                                "enddate": "2025-08-15 00:00:00",
                                                "sa_aftersalesbomid": 2,
                                                "attinfos": [],
                                                "price": 0,
                                                "siteid": "lsa",
                                                "accessorie": "集油弯头",
                                                "model": "LSA.XB-201012",
                                                "rowindex": 5,
                                                "brand": [],
                                                "typename": "集油弯头",
                                                "status": "",
                                                "tradefield": [
                                                    {
                                                        "itemid": 117747,
                                                        "rowindex": 8,
                                                        "tradefield": "建材家居"
                                                    }
                                                ]
                                            }
                                        ],
                                        "parentid": 14
                                    },
                                    {
                                        "plm_bomid": 24,
                                        "bomfullname": "集成灶/排油烟模块/风道组件/卡箍φ16-25",
                                        "subdep": [],
                                        "isdeep": 1,
                                        "num": "1",
                                        "bomname": "卡箍φ16-25",
                                        "rowindex": 23,
                                        "parentid": 14
                                    },
                                    {
                                        "plm_bomid": 23,
                                        "bomfullname": "集成灶/排油烟模块/风道组件/下油管φ19",
                                        "subdep": [],
                                        "isdeep": 1,
                                        "num": "1",
                                        "bomname": "下油管φ19",
                                        "rowindex": 22,
                                        "parentid": 14
                                    }
                                ],
                                "isdeep": 0,
                                "num": "1",
                                "bomname": "风道组件",
                                "rowindex": 13,
                                "parentid": 11
                            },
                            {
                                "plm_bomid": 13,
                                "bomfullname": "集成灶/排油烟模块/蜗壳上盖板",
                                "subdep": [],
                                "isdeep": 1,
                                "num": "1",
                                "bomname": "蜗壳上盖板",
                                "rowindex": 12,
                                "parentid": 11
                            },
                            {
                                "plm_bomid": 12,
                                "bomfullname": "集成灶/排油烟模块/蜗壳组件",
                                "subdep": [
                                    {
                                        "plm_bomid": 22,
                                        "bomfullname": "集成灶/排油烟模块/蜗壳组件/清洗加热垫",
                                        "subdep": [],
                                        "isdeep": 1,
                                        "num": "1",
                                        "bomname": "清洗加热垫",
                                        "rowindex": 21,
                                        "items": [
                                            {
                                                "begindate": "2025-07-15 00:00:00",
                                                "itemname": "600无缝板竹节拉丝（2.6米）",
                                                "module": "排油烟模块",
                                                "itemno": "LSAQQM00023",
                                                "spec": "",
                                                "sa_aftersalesbom_pjsid": 73,
                                                "itemid": 117750,
                                                "component": "蜗壳组件",
                                                "enddate": "2025-08-15 00:00:00",
                                                "sa_aftersalesbomid": 2,
                                                "attinfos": [],
                                                "price": 0,
                                                "siteid": "lsa",
                                                "accessorie": "清洗加热垫",
                                                "model": "LSA-BJ-QB03",
                                                "rowindex": 6,
                                                "brand": [],
                                                "typename": "清洗加热垫",
                                                "status": "",
                                                "tradefield": [
                                                    {
                                                        "itemid": 117750,
                                                        "rowindex": 9,
                                                        "tradefield": "建材家居"
                                                    }
                                                ]
                                            },
                                            {
                                                "begindate": "2025-07-15 00:00:00",
                                                "itemname": "600无缝板风中骑士（2米）",
                                                "module": "排油烟模块",
                                                "itemno": "LSAQTS00016",
                                                "spec": "",
                                                "sa_aftersalesbom_pjsid": 74,
                                                "itemid": 117737,
                                                "component": "蜗壳组件",
                                                "enddate": "2025-08-15 00:00:00",
                                                "sa_aftersalesbomid": 2,
                                                "attinfos": [],
                                                "price": 0,
                                                "siteid": "lsa",
                                                "accessorie": "清洗加热垫",
                                                "model": "",
                                                "rowindex": 7,
                                                "brand": [],
                                                "typename": "清洗加热垫",
                                                "status": "",
                                                "tradefield": [
                                                    {
                                                        "itemid": 117737,
                                                        "rowindex": 6,
                                                        "tradefield": "建材家居"
                                                    }
                                                ]
                                            }
                                        ],
                                        "parentid": 12
                                    },
                                    {
                                        "plm_bomid": 21,
                                        "bomfullname": "集成灶/排油烟模块/蜗壳组件/法兰盘密封圈",
                                        "subdep": [],
                                        "isdeep": 1,
                                        "num": "1",
                                        "bomname": "法兰盘密封圈",
                                        "rowindex": 20,
                                        "items": [
                                            {
                                                "begindate": "2025-07-15 00:00:00",
                                                "itemname": "450V双层蜂香板波斯蓝（2.6米）",
                                                "module": "排油烟模块",
                                                "itemno": "LSAFZZ00106",
                                                "spec": "",
                                                "sa_aftersalesbom_pjsid": 75,
                                                "itemid": 117725,
                                                "component": "蜗壳组件",
                                                "enddate": "2025-08-15 00:00:00",
                                                "sa_aftersalesbomid": 2,
                                                "attinfos": [],
                                                "price": 0,
                                                "siteid": "lsa",
                                                "accessorie": "法兰盘密封圈",
                                                "model": "GB426FV",
                                                "rowindex": 8,
                                                "brand": [],
                                                "typename": "法兰盘密封圈",
                                                "status": "",
                                                "tradefield": [
                                                    {
                                                        "itemid": 117725,
                                                        "rowindex": 3,
                                                        "tradefield": "建材家居"
                                                    }
                                                ]
                                            }
                                        ],
                                        "parentid": 12
                                    },
                                    {
                                        "plm_bomid": 20,
                                        "bomfullname": "集成灶/排油烟模块/蜗壳组件/电机法兰盘",
                                        "subdep": [],
                                        "isdeep": 1,
                                        "num": "1",
                                        "bomname": "电机法兰盘",
                                        "rowindex": 19,
                                        "parentid": 12
                                    },
                                    {
                                        "plm_bomid": 19,
                                        "bomfullname": "集成灶/排油烟模块/蜗壳组件/风帽",
                                        "subdep": [],
                                        "isdeep": 1,
                                        "num": "1",
                                        "bomname": "风帽",
                                        "rowindex": 18,
                                        "items": [
                                            {
                                                "begindate": "2025-07-15 00:00:00",
                                                "itemname": "120V缝板摩卡单色A",
                                                "module": "排油烟模块",
                                                "itemno": "LSAFZZ00991",
                                                "spec": "",
                                                "sa_aftersalesbom_pjsid": 79,
                                                "itemid": 117727,
                                                "component": "蜗壳组件",
                                                "enddate": "2025-08-15 00:00:00",
                                                "sa_aftersalesbomid": 2,
                                                "attinfos": [],
                                                "price": 0,
                                                "siteid": "lsa",
                                                "accessorie": "风帽",
                                                "model": "GXC-120V",
                                                "rowindex": 9,
                                                "brand": [],
                                                "typename": "风帽",
                                                "status": "",
                                                "tradefield": [
                                                    {
                                                        "itemid": 117727,
                                                        "rowindex": 4,
                                                        "tradefield": "建材家居"
                                                    }
                                                ]
                                            }
                                        ],
                                        "parentid": 12
                                    },
                                    {
                                        "plm_bomid": 18,
                                        "bomfullname": "集成灶/排油烟模块/蜗壳组件/排烟电机插头",
                                        "subdep": [],
                                        "isdeep": 1,
                                        "num": "1",
                                        "bomname": "排烟电机插头",
                                        "rowindex": 17,
                                        "parentid": 12
                                    },
                                    {
                                        "plm_bomid": 17,
                                        "bomfullname": "集成灶/排油烟模块/蜗壳组件/排烟电机",
                                        "subdep": [],
                                        "isdeep": 1,
                                        "num": "1",
                                        "bomname": "排烟电机",
                                        "rowindex": 16,
                                        "parentid": 12
                                    }
                                ],
                                "isdeep": 0,
                                "num": "1",
                                "bomname": "蜗壳组件",
                                "rowindex": 11,
                                "parentid": 11
                            }
                        ],
                        "isdeep": 0,
                        "num": "1",
                        "bomname": "排油烟模块",
                        "rowindex": 10,
                        "parentid": 1
                    },
                    {
                        "plm_bomid": 3,
                        "bomfullname": "集成灶/顶板组件",
                        "subdep": [
                            {
                                "plm_bomid": 4,
                                "bomfullname": "集成灶/顶板组件/顶板玻璃",
                                "subdep": [],
                                "isdeep": 1,
                                "num": "1",
                                "bomname": "顶板玻璃",
                                "rowindex": 4,
                                "parentid": 3
                            },
                            {
                                "plm_bomid": 5,
                                "bomfullname": "集成灶/顶板组件/照明玻璃",
                                "subdep": [],
                                "isdeep": 1,
                                "num": "2",
                                "bomname": "照明玻璃",
                                "rowindex": 5,
                                "parentid": 3
                            },
                            {
                                "plm_bomid": 6,
                                "bomfullname": "集成灶/顶板组件/前端玻璃",
                                "subdep": [],
                                "isdeep": 1,
                                "num": "3",
                                "bomname": "前端玻璃",
                                "rowindex": 6,
                                "parentid": 3
                            },
                            {
                                "plm_bomid": 7,
                                "bomfullname": "集成灶/顶板组件/内衬玻璃",
                                "subdep": [],
                                "isdeep": 1,
                                "num": "4",
                                "bomname": "内衬玻璃",
                                "rowindex": 7,
                                "parentid": 3
                            },
                            {
                                "plm_bomid": 8,
                                "bomfullname": "集成灶/顶板组件/照明灯",
                                "subdep": [],
                                "isdeep": 1,
                                "num": "5",
                                "bomname": "照明灯",
                                "rowindex": 8,
                                "parentid": 3
                            },
                            {
                                "plm_bomid": 9,
                                "bomfullname": "集成灶/顶板组件/氛围灯",
                                "subdep": [],
                                "isdeep": 1,
                                "num": "7",
                                "bomname": "氛围灯",
                                "rowindex": 9,
                                "parentid": 3
                            }
                        ],
                        "isdeep": 1,
                        "num": "1",
                        "bomname": "顶板组件",
                        "rowindex": 3,
                        "parentid": 1
                    },
                    {
                        "plm_bomid": 2,
                        "bomfullname": "集成灶/吸烟腔组件",
                        "subdep": [],
                        "isdeep": 1,
                        "num": "1",
                        "bomname": "吸烟腔组件",
                        "rowindex": 2,
                        "parentid": 1
                    }
                ],
                "isdeep": 0,
                "num": "2",
                "bomname": "集成灶",
                "rowindex": 1,
                "parentid": 0
            }
        ]
    }
]);
let active = reactive({
    class1: 0,
    class2: 0,
    class3: 0,
});

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

// 有bom
function getBomList() {
    $Http.basic({
        "id": "2025080610425503",
        content: {
            "sa_aftersalesbomid": content.sa_workorderid,
            "sys_enterpriseid": content.sys_enterpriseid,
        }
    }).then(res => {
        console.log("获取bom配件列表", res)
        if (res.code == 1) {
            // bomList.value = res.data;
            bomList.value = processBomData(bomList.value)
            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) => {
        // 创建新节点副本
        const newNode = { ...node };
        // 处理子节点
        if (node.subdep && node.subdep.length > 0) {
            newNode.subdep = node.subdep.map(subNode => processNode(subNode));
        }
        return newNode;
    };

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


// 无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;
        margin-right: 20rpx;
        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;

        .select {
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 90rpx;
            width: 100%;
            background: #fff;
            padding-right: 30rpx;
        }
    }
}

.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>