|
@@ -3,7 +3,7 @@
|
|
|
<div class="task-top">
|
|
<div class="task-top">
|
|
|
<div class="map-container" ref="mapContainer"></div>
|
|
<div class="map-container" ref="mapContainer"></div>
|
|
|
<div class="calendar-wrap">
|
|
<div class="calendar-wrap">
|
|
|
- <calendar ref="calendarRef"></calendar>
|
|
|
|
|
|
|
+ <calendar ref="calendarRef" @dateSelect="handleDateSelect"></calendar>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="task-list">
|
|
<div class="task-list">
|
|
@@ -129,12 +129,16 @@ const areaOptions1 = [
|
|
|
{ value: "3", label: "3" },
|
|
{ value: "3", label: "3" },
|
|
|
];
|
|
];
|
|
|
|
|
|
|
|
-// 任务列表数据
|
|
|
|
|
|
|
+// 任务列表数据(用于显示,可能被筛选)
|
|
|
const taskList = ref([]);
|
|
const taskList = ref([]);
|
|
|
|
|
+// 完整的任务列表数据(用于日历显示,不被筛选影响)
|
|
|
|
|
+const fullTaskList = ref([]);
|
|
|
// 各状态任务数量
|
|
// 各状态任务数量
|
|
|
const taskCounts = ref([0, 0, 0]);
|
|
const taskCounts = ref([0, 0, 0]);
|
|
|
// 当前选中的筛选索引
|
|
// 当前选中的筛选索引
|
|
|
const activeIndex = ref(0);
|
|
const activeIndex = ref(0);
|
|
|
|
|
+// 筛选日期(用于按日期筛选)
|
|
|
|
|
+const filterDate = ref(null);
|
|
|
const noData = ref(false);
|
|
const noData = ref(false);
|
|
|
const loading = ref(false);
|
|
const loading = ref(false);
|
|
|
|
|
|
|
@@ -223,8 +227,23 @@ onMounted(() => {
|
|
|
});
|
|
});
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
|
|
+// 标记是否正在通过日期选择切换筛选(避免 watch 清除日期筛选)
|
|
|
|
|
+const isDateSelecting = ref(false);
|
|
|
|
|
+
|
|
|
// 监听 activeIndex 变化,重新加载数据
|
|
// 监听 activeIndex 变化,重新加载数据
|
|
|
watch(activeIndex, () => {
|
|
watch(activeIndex, () => {
|
|
|
|
|
+ // 如果正在通过日期选择切换,不清除日期筛选
|
|
|
|
|
+ if (isDateSelecting.value) {
|
|
|
|
|
+ isDateSelecting.value = false;
|
|
|
|
|
+ getSimpleList();
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+ // 切换筛选时清除日期筛选
|
|
|
|
|
+ filterDate.value = null;
|
|
|
|
|
+ // 清除日历选中状态
|
|
|
|
|
+ if (calendarRef.value) {
|
|
|
|
|
+ calendarRef.value.clearSelection();
|
|
|
|
|
+ }
|
|
|
getSimpleList();
|
|
getSimpleList();
|
|
|
});
|
|
});
|
|
|
|
|
|
|
@@ -235,23 +254,51 @@ function getSimpleList() {
|
|
|
taskItemRefs.value = [];
|
|
taskItemRefs.value = [];
|
|
|
const location = store.state.home.miniUserLocationPoint;
|
|
const location = store.state.home.miniUserLocationPoint;
|
|
|
const startFlowStatus = getStartFlowStatus(activeIndex.value);
|
|
const startFlowStatus = getStartFlowStatus(activeIndex.value);
|
|
|
- return VE_API.z_farm_work_record.getSimpleList({ role: 2, location, flowStatus: startFlowStatus }).then(({data}) => {
|
|
|
|
|
|
|
+
|
|
|
|
|
+ // 构建请求参数
|
|
|
|
|
+ // 注意:为了保持日历数据完整,即使有日期筛选,也不在请求参数中添加日期筛选
|
|
|
|
|
+ // 日期筛选在前端进行,这样可以保持日历显示完整的任务数量
|
|
|
|
|
+ const params = { role: 2, location, flowStatus: startFlowStatus };
|
|
|
|
|
+
|
|
|
|
|
+ return VE_API.z_farm_work_record.getSimpleList(params).then(({data}) => {
|
|
|
loading.value = false;
|
|
loading.value = false;
|
|
|
// 假设返回的数据结构是 { list: [], total: 0 } 或者直接是数组
|
|
// 假设返回的数据结构是 { list: [], total: 0 } 或者直接是数组
|
|
|
- if (Array.isArray(data) && data.length > 0) {
|
|
|
|
|
- taskList.value = data;
|
|
|
|
|
|
|
+ let filteredData = data;
|
|
|
|
|
+
|
|
|
|
|
+ // 保存完整数据(用于日历显示)
|
|
|
|
|
+ if (activeIndex.value === 2) {
|
|
|
|
|
+ // 如果是"待完成"状态,保存完整数据用于日历
|
|
|
|
|
+ fullTaskList.value = Array.isArray(data) ? data : [];
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 如果有日期筛选,在前端再次过滤(确保数据准确)
|
|
|
|
|
+ if (filterDate.value && Array.isArray(data)) {
|
|
|
|
|
+ filteredData = data.filter(item => {
|
|
|
|
|
+ if (!item.executeDate) return false;
|
|
|
|
|
+ const itemDate = formatDate(new Date(item.executeDate));
|
|
|
|
|
+ return itemDate === filterDate.value;
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ if (Array.isArray(filteredData) && filteredData.length > 0) {
|
|
|
|
|
+ taskList.value = filteredData;
|
|
|
// 更新当前状态的数量
|
|
// 更新当前状态的数量
|
|
|
- taskCounts.value[activeIndex.value] = data.length;
|
|
|
|
|
|
|
+ taskCounts.value[activeIndex.value] = filteredData.length;
|
|
|
if (activeIndex.value === 2) {
|
|
if (activeIndex.value === 2) {
|
|
|
- calendarRef.value && calendarRef.value.setSolarTerm(taskList.value)
|
|
|
|
|
- indexMap.initData(taskList.value)
|
|
|
|
|
|
|
+ // 传递给日历的数据应该是完整的未筛选数据
|
|
|
|
|
+ const calendarData = filterDate.value ? fullTaskList.value : taskList.value;
|
|
|
|
|
+ calendarRef.value && calendarRef.value.setSolarTerm(calendarData);
|
|
|
|
|
+ // 地图使用筛选后的数据
|
|
|
|
|
+ indexMap.initData(taskList.value);
|
|
|
}
|
|
}
|
|
|
} else {
|
|
} else {
|
|
|
taskList.value = [];
|
|
taskList.value = [];
|
|
|
taskCounts.value[activeIndex.value] = 0;
|
|
taskCounts.value[activeIndex.value] = 0;
|
|
|
if (activeIndex.value === 2) {
|
|
if (activeIndex.value === 2) {
|
|
|
- indexMap.initData(taskList.value)
|
|
|
|
|
- calendarRef.value && calendarRef.value.setSolarTerm(taskList.value)
|
|
|
|
|
|
|
+ // 即使筛选后没有数据,日历也应该显示完整数据
|
|
|
|
|
+ const calendarData = filterDate.value ? fullTaskList.value : [];
|
|
|
|
|
+ indexMap.initData(taskList.value);
|
|
|
|
|
+ calendarRef.value && calendarRef.value.setSolarTerm(calendarData);
|
|
|
}
|
|
}
|
|
|
noData.value = true;
|
|
noData.value = true;
|
|
|
}
|
|
}
|
|
@@ -263,8 +310,39 @@ function getSimpleList() {
|
|
|
});
|
|
});
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+// 格式化日期函数(与 calendar 组件保持一致)
|
|
|
|
|
+function formatDate(date) {
|
|
|
|
|
+ if (typeof date === 'string') {
|
|
|
|
|
+ date = new Date(date);
|
|
|
|
|
+ }
|
|
|
|
|
+ return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+// 处理日历日期选择
|
|
|
|
|
+const handleDateSelect = (date) => {
|
|
|
|
|
+ if (date) {
|
|
|
|
|
+ // 有日期选择,切换到"待完成"筛选并设置筛选日期
|
|
|
|
|
+ filterDate.value = date;
|
|
|
|
|
+ // 如果当前不是"待完成"状态,切换到"待完成"
|
|
|
|
|
+ if (activeIndex.value !== 2) {
|
|
|
|
|
+ isDateSelecting.value = true; // 标记正在通过日期选择切换
|
|
|
|
|
+ activeIndex.value = 2;
|
|
|
|
|
+ // watch 会处理 getSimpleList
|
|
|
|
|
+ } else {
|
|
|
|
|
+ // 如果已经是"待完成"状态,直接重新加载列表
|
|
|
|
|
+ getSimpleList();
|
|
|
|
|
+ }
|
|
|
|
|
+ } else {
|
|
|
|
|
+ // 取消日期筛选
|
|
|
|
|
+ filterDate.value = null;
|
|
|
|
|
+ // 重新加载列表
|
|
|
|
|
+ getSimpleList();
|
|
|
|
|
+ }
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
function handleActiveFilter(i) {
|
|
function handleActiveFilter(i) {
|
|
|
activeIndex.value = i;
|
|
activeIndex.value = i;
|
|
|
|
|
+ // watch 会自动处理清除日期筛选和日历选中状态
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
function toPage(item) {
|
|
function toPage(item) {
|