admission-uniapp/src/components/widgets/admin/personally/index.vue

<template>
    <view class="flex-1 h-full flex flex-col">
        <view class="bg-white">
            <u-dropdown ref="uDropdownRef" menu-icon="arrow-down-fill">
                <u-dropdown-item title="岗位">
                    <view class="bg-white">
                        <position-tabs
                            v-model="postId"
                            @reset="handleReset('position')"
                            @confirm="handleConfirm('position', value)"
                        />
                    </view>
                </u-dropdown-item>
                <u-dropdown-item title="组织">
                    <view class="bg-white">
                        <DropdownPicker
                            :dropdownItem="dropdownMenuOrgList"
                            @reset="() => handleReset('organization')"
                            @confirm="value => handleConfirm('organization', value)"
                        />
                    </view>
                </u-dropdown-item>
                <u-dropdown-item title="日期">
                    <view class="bg-white p-[20rpx]">
                        <dateDropdownPicker
                            :dropdownItem="dropdownMenuList2"
                            @reset="() => handleReset('date')"
                            @confirm="value => handleConfirm('date', value)"
                        />
                    </view>
                </u-dropdown-item>
            </u-dropdown>
        </view>
        <view class="flex-1 mt-3 px-[32rpx] overflow-auto bg-[#FAFAFE]">
            <z-paging
                ref="paging"
                v-model="dataList"
                @query="queryList"
                :fixed="false"
                height="100%"
            >
                <template v-for="(item, index) in dataList" :key="`unique_${index}`">
                    <telesale-card :item="item" @handleCardClick="handleCardClick" />
                </template>
            </z-paging>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import positionTabs from './components/position-tabs.vue'
import DropdownPicker from '../orga-picker.vue'
import telesaleCard from './components/telesale-card.vue'
import dateDropdownPicker from '@/components/date-dropdown/daterange.vue'
import { useZPaging } from '@/hooks/useZPaging'
import { apiTeleClueList } from '@/api/clue'
import { apiOrganizationAllList } from '@/api/admin'

const dropdownMenuList2 = {
    showQuick: true,
    title: '日期范围',
    type: 'daterange',
    prop: 'god6'
    // 默认选中 2022-01-01到2022-02-01
    // value: { start: '2022-01-01', end: '2022-02-01' },
}
const postId = ref()
const dropdownMenuOrgList = ref([])

const queryParams = ref({
    likeWork: ''
})
const dataList = ref([])
const { paging, queryList, refresh, changeApi, setParams } = useZPaging(
    queryParams.value,
    apiTeleClueList,
    () => {}
)
const handleCardClick = (type: string, item: any) => {
    const { id } = item
    switch (type) {
        case 'telesale':
        case 'recruitsale':
            uni.navigateTo({
                url: '/bundle/pages/clue-list/index?id=' + id + '&type=' + type
            })
            break
        default:
            break
    }
}
const handleConfirm = (type: string, item) => {
    switch (type) {
        case 'organization':
            console.log(item)
            break
        case 'date':
            console.log(item)

            break
        case 'position':
            break
        default:
            break
    }
}
const handleReset = (type: string) => {
    switch (type) {
        case 'organization':
            break
        case 'date':
            break
        case 'position':
            break
        default:
            break
    }
}
const fetchAllOrganizationList = async () => {
    try {
        const result = await apiOrganizationAllList()
        dropdownMenuOrgList.value = renameFields(result)
        console.log(dropdownMenuOrgList.value)
    } catch (error) {}
}
const renameFields = (data: any[]): any[] => {
    return data.map(item => {
        const newItem = { ...item }
        newItem.label = item.name
        newItem.value = item.id
        if (newItem.organizationVoList) {
            newItem.children = renameFields(newItem.organizationVoList)
            delete newItem.organizationVoList
        }
        if (newItem.userVos) {
            newItem.userVos.forEach(item => {
                item.label = item.username
                item.value = item.id
            })
            newItem.children = newItem.children
                ? [...newItem.children, ...newItem.userVos]
                : newItem.userVos
            delete newItem.userVos
        }
        if (!newItem.children.length) {
            newItem.disabled = true
        }
        return newItem
    })
}

fetchAllOrganizationList()
</script>

<style scoped lang="scss"></style>