feiniao-farm-h5/src/components/pageComponents/AgriculturalInteractionCard.vue

<template>
    <!-- 只封装时间轴区域 -->
    <div class="timeline">
        <div class="timeline-item" v-for="timelineItem in item.timelineList" :key="timelineItem.id">
            <div class="timeline-left">
                <div class="dot"></div>
                <div class="line"></div>
            </div>
            <div class="timeline-right">
                <div class="date">
                    <span class="work-name">{{ timelineItem.farmWorkName }}</span>
                    <!-- <span v-show="timelineItem.expectedRisk">({{ timelineItem.expectedRisk }})</span> -->
                    <span class="ignore-btn" v-if="hasPlanPermission" @click="handleIgnore(item,timelineItem)"> 忽略 </span>
                </div>
                <div class="text">
                    预计报价<span class="price">{{ timelineItem.estimatedCost }}元</span>
                    <span class="action-detail" @click="toDetail(timelineItem, item)"
                        >查看详情</span
                    >
                    <!-- <span class="action-detail" @click="showPriceSheetPopup(timelineItem.farmWorkId, item)">查看报价单</span> -->
                </div>
            </div>
            <div class="timeline-action" @click="handleTimelineAction(timelineItem, item.farmId)">转入农事任务</div>
        </div>
    </div>
    <!-- 新增：激活上传弹窗 -->
    <active-upload-popup ref="activeUploadPopupRef" @handleUploadSuccess="handleUploadSuccess"></active-upload-popup>

    <!-- 服务报价单 -->
    <price-sheet-popup ref="priceSheetPopupRef"></price-sheet-popup>

    <popup v-model:show="showTaskPopup" round class="task-tips-popup">
        <img class="create-farm-icon" src="@/assets/img/home/create-farm-icon.png" alt="" />
        <div class="create-farm-text">
            <div>
                您确认忽略 <span class="main-text">{{ currentTask?.farmName }}</span> 的
                <span class="main-text">{{ currentTask?.farmWorkName }}</span> 农事吗
            </div>
        </div>
        <div class="create-farm-btn" @click="handlePopupBtn">确认忽略</div>
    </popup>
</template>

<script setup>
import { Popup } from "vant";
import activeUploadPopup from "@/components/popup/activeUploadPopup.vue";
import priceSheetPopup from "@/components/popup/priceSheetPopup.vue";
import { computed, onMounted, ref } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";

const router = useRouter();

const props = defineProps({
    item: {
        type: Object,
        required: true,
        default: () => ({}),
    },
});

// 检查是否有"转入农事"权限
const hasPlanPermission = computed(() => {
    try {
        const userInfoStr = localStorage.getItem("localUserInfo");
        if (!userInfoStr) return false;
        const userInfo = JSON.parse(userInfoStr);
        const permissions = userInfo.agriculturalPermissions || [];
        return permissions.includes("转入农事");
    } catch (error) {
        console.error("解析用户信息失败:", error);
        return false;
    }
});


const executorList = ref(JSON.parse(sessionStorage.getItem("executorList")) || []);
const activeUploadPopupRef = ref(null);
const handleTimelineAction = (timelineItem, farmId) => {
    if (hasPlanPermission.value) {
        activeUploadPopupRef.value.showPopup({
            gardenIdVal: farmId,
            needExecutorVal: true,
            problemTitleVal: "请选择 " + timelineItem.farmWorkName + " 执行截止时间",
            imgDescVal: "请上传凭证(转入农事任务凭证）",
            arrangeIdVal: timelineItem.arrangeId,
            executorListVal: executorList.value || [],
            farmWorkIdVal: timelineItem.farmWorkId,
            schemeIdVal: timelineItem.schemeId,
        });
    } else {
        ElMessage.warning("您暂无权限操作");
    }
};

const emits = defineEmits(["updateList"]);

const handleUploadSuccess = async () => {
    emits("updateList");
};

const toDetail = (timelineItem, item) => {
    console.log(timelineItem, item);
    router.push({
        path: "/detail_work",
        query: { miniJson: JSON.stringify({ id: timelineItem.farmWorkId, arrangeId: timelineItem.arrangeId, farmId: item.farmId, }), },
    });
};

// 忽略农事库
const currentTask = ref(null);
const showTaskPopup = ref(false);
const handleIgnore = (item, timelineItem) => {
    currentTask.value = { ...item, ...timelineItem };
    showTaskPopup.value = true;
};

const handlePopupBtn = () => {
    VE_API.home.ignoreFarmWorkLib({ farmWorkLibId: currentTask.value.farmWorkId }).then(({ code }) => {
        if (code === 0) {
            showTaskPopup.value = false;
            ElMessage.success("忽略成功");
            handleUploadSuccess();
        }
    });
};

const priceSheetPopupRef = ref(null);
const showPriceSheetPopup = (id, item) => {
    priceSheetPopupRef.value.handleShowPopup({ id, farmId: item.farmId, agriculturalId: item.agriculturalStoreId });
};
</script>

<style scoped lang="scss">
.timeline {
    margin-left: -5px;
    margin-top: 8px;
    .timeline-item {
        display: flex;
        align-items: flex-start;
        font-size: 14px;
        color: #ffffff;
        line-height: 22px;
        & + .timeline-item {
            margin-top: 10px;
        }
        .timeline-left {
            width: 22px;
            display: flex;
            flex-direction: column;
            align-items: center;
            .dot {
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background: #a2d5fd;
                margin-top: 6px;
            }
            .line {
                border-left: 1px dashed #a2d5fd;
                margin-top: 4px;
                height: 28px;
            }
        }
        .timeline-right {
            padding-left: 5px;
            flex: 1;
            .date {
                color: #1d2129;
                font-weight: 500;
                font-size: 14px;
                line-height: 22px;
            }
            .text {
                font-size: 12px;
                color: #d7d7d7;
                .price {
                    padding-left: 4px;
                }
                .action-detail {
                    margin-left: 6px;
                    color: #2199f8;
                    border-bottom: 1px solid;
                }
            }
            .work-name {
                padding-left: 4px;
            }
            .ignore-btn {
                margin-left: 6px;
                color: rgba(29, 33, 41, 0.4);
                font-size: 13px;
            }
        }
        .timeline-action {
            align-self: center;
            height: 28px;
            line-height: 28px;
            flex: none;
            background: rgba(33, 153, 248, 0.1);
            color: #2199f8;
            font-size: 12px;
            padding: 0px 11px;
            border-radius: 20px;
        }
    }
}
.task-tips-popup {
    z-index: 1000 !important;
    width: 90%;
    padding: 28px 28px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .create-farm-icon {
        width: 52px;
        height: 52px;
        margin-bottom: 12px;
    }
    .create-farm-text {
        font-size: 19px;
        font-weight: 500;
        margin-bottom: 32px;
        text-align: center;
    }
    .main-text {
        color: #2199f8;
    }
    .create-farm-btn {
        width: 100%;
        box-sizing: border-box;
        padding: 8px;
        border-radius: 25px;
        font-size: 16px;
        background: #2199f8;
        color: #fff;
        text-align: center;
    }
}
</style>