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

<template>
    <view class="flex flex-col gap-[24rpx] mb-[20rpx]">
        <view class="bg-white">
            <u-dropdown ref="uDropdownRef" menu-icon="arrow-down-fill">
                <u-dropdown-item title="团队">
                    <view class="bg-white">
                        <selectDropdown
                            :dropdownItem="dropdownMenuTeamList"
                            @reset="() => handleReset('team')"
                            @confirm="value => handleConfirm('team', value)"
                        />
                    </view>
                </u-dropdown-item>
                <u-dropdown-item title="组织">
                    <view class="bg-white">
                        <selectDropdown
                            :dropdownItem="dropdownMenuAllOrgaList"
                            @reset="() => handleReset('organization')"
                            @confirm="value => handleConfirm('organization', value)"
                        />
                    </view>
                </u-dropdown-item>
                <u-dropdown-item title="日期">
                    <view class="bg-white p-[20rpx]">
                        <dateDropdownPicker
                            :dropdownItem="dropdownMenuDateList"
                            @reset="() => handleReset('date')"
                            @confirm="value => handleConfirm('date', value)"
                        />
                    </view>
                </u-dropdown-item>
            </u-dropdown>
        </view>
        <filter-value :form="form" :activeTab="activeTab" />
        <data-overview ref="dataOverviewRef" />
        <converted-overview ref="convertedOverviewRef" />
        <rank ref="rankRef" @refresh="refreshData" />
        <clue-status ref="clueStatusRef" />
    </view>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import dataOverview from './components/data-overview.vue'
import convertedOverview from './components/converted-overview.vue'
import rank from './components/rank.vue'
import clueStatus from './components/clue-status.vue'
import dateDropdownPicker from '@/components/date-dropdown/daterange.vue'
import selectDropdown from '@/components/select-dropdown/index.vue'
import filterValue from '../filter-value.vue'
import { apiOrganizationByIdList, apiOrganizationList, apiOrganizationTeamList } from '@/api/admin'
import { formateDate, getCurDate } from '@/utils/util'
import { PropType } from 'vue'
import { AdminTabEnum } from '@/enums'

export interface IForm {
    organizationId: number | null
    createTimeStart: string
    createTimeEnd: string
    userId: string
}

defineProps({
    activeTab: {
        type: Number as PropType<AdminTabEnum>,
        default: AdminTabEnum.TEAM
    }
})
const clueStatusRef = ref<InstanceType<typeof clueStatus>>()
const rankRef = ref<InstanceType<typeof rank>>()
const convertedOverviewRef = ref<InstanceType<typeof convertedOverview>>()
const dataOverviewRef = ref<InstanceType<typeof dataOverview>>()
const uDropdownRef = ref()
const organizationList = ref([])
const defaultValue = ref() //保存组织默认值
const form = ref<IForm>({
    organizationId: null,
    createTimeStart: getCurDate('start'),
    createTimeEnd: getCurDate('end'),
    userId: ''
})
const dropdownMenuDateList = {
    showQuick: true,
    title: '日期范围',
    type: 'daterange',
    prop: 'god6',
    value: { start: getCurDate('start', 'YYYY-MM-DD'), end: getCurDate('end', 'YYYY-MM-DD') }
}
const dropdownMenuTeamList = ref({
    title: '下拉',
    type: 'cell',
    prop: 'god1',
    showAll: true,
    showIcon: true,
    options: []
})
const dropdownMenuAllOrgaList = ref({
    title: '下拉',
    type: 'cell',
    prop: 'god1',
    showAll: true,
    showIcon: true,
    options: []
})
// 查询条件
const handleConfirm = (type: string, item) => {
    switch (type) {
        case 'organization':
            console.log(item)
            break
        case 'date':
            form.value.createTimeStart = formateDate(item.start, 'start')
            form.value.createTimeEnd = formateDate(item.end, 'end')
            break
        case 'team':
            form.value.organizationId = item.value
            break
        default:
            break
    }
    fetchAllData()
    closeDropDown()
}
// 重置条件
const handleReset = (type: string) => {
    switch (type) {
        case 'organization':
            break
        case 'date':
            form.value.createTimeStart = getCurDate('start')
            form.value.createTimeEnd = getCurDate('end')
            break
        case 'team':
            form.value.organizationId = defaultValue.value
            break
        default:
            break
    }
    fetchAllData()
    closeDropDown()
}
const closeDropDown = () => {
    uDropdownRef.value.close()
}
const refreshData = () => {
    rankRef.value?.fetchData(form.value)
}
onMounted(async () => {
    await fetchOrganizationList()
    fetchAllData()
})
const fetchAllData = () => {
    dataOverviewRef.value?.fetchData(form.value)
    convertedOverviewRef.value?.fetchData(form.value)
    rankRef.value?.fetchData(form.value)
    clueStatusRef.value?.fetchData(form.value)
}
// 获取主账号下的所有组织架构
const fetchOrganizationList = async () => {
    try {
        const result = await apiOrganizationList()
        organizationList.value = result ?? []
        if (result.length > 0) {
            form.value.organizationId = result[0].id
            defaultValue.value = result[0].id
        }
    } catch (error) {}
}
// 获取团队列表
const fetchTeamList = async () => {
    try {
        const result = await apiOrganizationTeamList()
        dropdownMenuTeamList.value.options =
            result.map(item => {
                return {
                    label: item.name,
                    value: item.id
                }
            }) ?? []
    } catch (error) {}
}
// 获取组织列表
const fetchAllOrganizationList = async () => {
    try {
        const result = await apiOrganizationByIdList()
        dropdownMenuAllOrgaList.value.options =
            result.map(item => {
                return {
                    label: item.name,
                    value: item.id
                }
            }) ?? []
    } catch (error) {}
}
fetchTeamList()
fetchAllOrganizationList()
</script>
<style scoped></style>