dz-app/pages/vocation-library/index/index.vue

<template>
    <z-paging ref="paging" v-model="list" @query="handleQuery" @on-refresh="handleRefresh">
        <template #top>
            <mx-nav-bar title="职业库"/>
            <view class="px-20 py-10 bg-white">
                <mx-search v-model="name" placeholder="输入职业名称" @search="handleSearch" @clear="handleSearch"/>
            </view>
            <uv-line/>
        </template>
        <view v-for="(levelOne) in list" :class="levelOne.children ? 'mt-20 bg-white' : ''">
            <view v-if="levelOne.children">
                <view class="py-20 pl-30 text-lg font-bold">{{ levelOne.name }}</view>
                <view v-for="item in levelOne.children">
                    <uv-cell :value="`${item.children.length}个职业`" @click="handleExpand(item)">
                        <template #title>
                            <view class="fx-row items-center">
                                <uv-icon labelColor="black" :labelSize="12" name="arrow-right"
                                         :class="item.expand ? 'active expand' : 'expand'">
                                </uv-icon>
                                <text>{{ item.name }}</text>
                            </view>
                        </template>
                    </uv-cell>
                    <uv-transition :show="item.expand">
                        <view class="bg-slate-100">
                            <uv-cell v-for="last in item.children" class="text-main pl-40" :border="false" isLink
                                     :title="last.name" @click="goDetail(last)">
                            </uv-cell>
                        </view>
                    </uv-transition>
                </view>
            </view>
            <uv-cell v-else class="text-main bg-white" :border="false" isLink
                     :title="levelOne.name" @click="goDetail(levelOne)">
            </uv-cell>
        </view>
    </z-paging>
</template>

<script setup>
import {ref} from 'vue';
import {useCacheStore} from "@/hooks/useCacheStore";
import {useTransfer} from "@/hooks/useTransfer";
import {getAllVocation} from "@/api/webApi/collegemajor";

const paging = ref(null)
const list = ref([])
const name = ref('')
const {dispatchCache, removeCache} = useCacheStore()
const {transferTo} = useTransfer()

const handleSearch = () => paging.value.reload()
const handleExpand = (item) => item.expand = !item.expand

const handleRefresh = () => {
    removeCache(getAllVocation)
}
const handleQuery = () => {
    let payload = undefined
    if (name.value) payload = {name: name.value}
    dispatchCache(getAllVocation, payload)
        .then(res => {
            res.data.forEach(v => {
                if (v.children) {
                    // 默认收起
                    v.children.forEach(c => c.expand = false)
                }
            })
            paging.value.completeByNoMore(res.data, true)
        })
        .catch(e => paging.value.complete(false))
}

const goDetail = (item) => {
    transferTo('/pages/vocation-library/detail/detail', ['code'], item)
}
</script>

<style scoped lang="scss">
.expand {
    margin-right: 5px;
}

.active {
    transform: rotate(90deg);
    transition: transform 200ms;
}
</style>