功能概述

本文介绍了一个基于Vue 3和Element Plus的外业调查任务分配系统前端实现，主要功能包括：

1. 任务列表展示与筛选
2. 单个任务分配功能
3. 批量任务分配功能
4. 分页加载与查询
   

核心代码解析

1. 任务列表展示

使用el-table展示任务列表，支持多选和分页：

<el-tableref="taskTable":data="taskList"borderclass="task-table"v-loading="loading"height="calc(100% - 82px)"@selection-change="handleSelectionChange"
><!-- 表格列定义 -->
</el-table>

2. 筛选功能

实现行政区划、图幅编号和任务状态的多条件筛选：

const filterForm = reactive({qx: "",tfbh10K: '',fpzt: ''
})const searchTasks = () => {fetchTaskList()
}

3. 人员分组展示

将外业人员按小组分组展示：

const groupedUsers = computed(() => {const groups = {}fieldUsers.value.forEach(user => {if (!groups[user.branchName]) {groups[user.branchName] = []}groups[user.branchName].push(user)})return Object.keys(groups).map(group => ({label: group,options: groups[group]}))
})

4. 任务分配功能

支持单个任务分配和批量分配两种模式：

// 单个任务分配
const assignSingleTask = (row) => {request({url: '/officeWork/editAssignmentList',method: 'post',data: [{"tfbh10k": row.tfbh,"qx": row.qx,"users": row.zyuser}]}).then(res => {// 处理结果})
}// 批量分配
const confirmBatchAssign = (type) => {let params = []if (type === 0) {// 覆盖分配逻辑} else {// 新增分配逻辑}request({url: '/officeWork/editAssignmentList',method: 'post',data: params}).then(res => {// 处理结果})
}

关键实现技巧

1. 表格性能优化：通过设置固定高度和虚拟滚动提升大数据量下的性能
2. 状态管理：使用Vue 3的reactive和ref进行状态管理
3. API封装：将API请求封装为统一的request方法
4. 响应式设计：利用Flex布局实现卡片自适应高度

样式优化

.box-card {height: 100%;display: flex;flex-direction: column;
}:deep(.el-card__body) {height: calc(100% - 141px);padding: 20px;
}