138 lines
4.4 KiB
Vue
138 lines
4.4 KiB
Vue
<template>
|
||
<!-- 待投递列表下拉弹窗 -->
|
||
<div class="agent-main__task-dropdown" @click.stop>
|
||
<!-- Tab 切换 -->
|
||
<div class="agent-main__task-tabs">
|
||
<span
|
||
class="agent-main__task-tab"
|
||
:class="{ 'agent-main__task-tab--active': activeTab === 1 }"
|
||
@click="switchTab(1)"
|
||
>进行中（{{ pendingList.length }}）</span>
|
||
<span
|
||
class="agent-main__task-tab"
|
||
:class="{ 'agent-main__task-tab--active': activeTab === 2 }"
|
||
@click="switchTab(2)"
|
||
>已完成（{{ completedList.length }}）</span>
|
||
</div>
|
||
<!-- 列表内容 -->
|
||
<div class="agent-main__task-list">
|
||
<template v-if="activeTab === 1">
|
||
<div v-if="pendingList.length === 0" class="agent-main__task-empty">暂无进行中的岗位</div>
|
||
<div v-for="job in pendingList" :key="job.id" class="agent-main__task-item">
|
||
<div class="agent-main__task-item-left">
|
||
<span class="agent-main__task-item-name">{{ (job.companyShortName || job.companyName) + '—' + job.title }}</span>
|
||
<span class="agent-main__task-item-tag">自动投递</span>
|
||
</div>
|
||
<div class="agent-main__task-item-right">
|
||
<span class="agent-main__task-item-status">未开始</span>
|
||
<span class="agent-main__task-item-remove" @click="removeJob(job)">×</span>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<template v-else>
|
||
<div v-if="loading" class="agent-main__task-empty">加载中...</div>
|
||
<div v-else-if="completedList.length === 0" class="agent-main__task-empty">暂无已完成的岗位</div>
|
||
<div v-for="job in completedList" :key="job.id" class="agent-main__task-item">
|
||
<div class="agent-main__task-item-left">
|
||
<span class="agent-main__task-item-name">{{ (job.companyShortName || job.companyName) + '—' + job.title }}</span>
|
||
<span class="agent-main__task-item-tag">自动投递</span>
|
||
</div>
|
||
<div class="agent-main__task-item-right">
|
||
<span class="agent-main__task-item-status agent-main__task-item-status--done">已完成</span>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
<!-- 查看全部 -->
|
||
<div class="agent-main__task-view-all" @click="handleViewAll">查看全部</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted } from 'vue'
|
||
import { fetchAgentTaskList } from '@/api/jobs'
|
||
import { cancelApplyJob } from '@/api/agent'
|
||
import type { JobListItem } from '@/api/jobs'
|
||
|
||
// ==================== Props ====================
|
||
|
||
const props = defineProps<{
|
||
/** 进行中列表（由父组件传入，保持同步） */
|
||
pendingList: JobListItem[]
|
||
}>()
|
||
|
||
// ==================== 事件 ====================
|
||
|
||
const emit = defineEmits<{
|
||
/** 移除岗位后通知父组件刷新列表 */
|
||
(e: 'removed', jobId: string): void
|
||
/** 查看全部（进行中 tab） */
|
||
(e: 'viewAll'): void
|
||
/** 查看全部（已完成 tab — 申请进度） */
|
||
(e: 'viewAllCompleted'): void
|
||
}>()
|
||
|
||
// ==================== 状态 ====================
|
||
|
||
/** 当前激活的 Tab（1=进行中 2=已完成） */
|
||
const activeTab = ref(1)
|
||
|
||
/** 已完成列表数据 */
|
||
const completedList = ref<JobListItem[]>([])
|
||
|
||
/** 加载状态 */
|
||
const loading = ref(false)
|
||
|
||
// ==================== 生命周期 ====================
|
||
|
||
onMounted(() => {
|
||
// 打开时同时加载已完成列表
|
||
loadCompletedList()
|
||
})
|
||
|
||
// ==================== 方法 ====================
|
||
|
||
/** 切换 Tab */
|
||
function switchTab(tab: number) {
|
||
activeTab.value = tab
|
||
if (tab === 2) {
|
||
loadCompletedList()
|
||
}
|
||
}
|
||
|
||
/** 加载已完成任务列表（tab=2） */
|
||
async function loadCompletedList() {
|
||
loading.value = true
|
||
try {
|
||
const res = await fetchAgentTaskList({ pageNum: 1, pageSize: 30, tab: 2 })
|
||
if (res.code === '0' && res.data) {
|
||
completedList.value = res.data.list || []
|
||
}
|
||
} catch {
|
||
console.error('[AgentTaskListDropdown] 加载已完成列表失败')
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
/** 移除岗位 — 调用 cancelApplyJob 接口并通知父组件 */
|
||
async function removeJob(job: JobListItem) {
|
||
try {
|
||
await cancelApplyJob(job.id)
|
||
emit('removed', job.id)
|
||
ElMessage.success('已移除')
|
||
} catch {
|
||
ElMessage.error('移除失败')
|
||
}
|
||
}
|
||
|
||
/** 查看全部 — 根据当前 tab 触发不同事件 */
|
||
function handleViewAll() {
|
||
if (activeTab.value === 1) {
|
||
emit('viewAll')
|
||
} else {
|
||
emit('viewAllCompleted')
|
||
}
|
||
}
|
||
</script>
|