foster-pc-vue/src/views/home/components/leftTabs/recordsManage.vue

<template>
    <div class="record-page" ref="containerRef">
        <div class="tips">
            <el-icon class="icon" size="24" color="#2199F8"><WarningFilled /></el-icon>
            <div>飞鸟提醒 您有 <span>1张</span> 农事照片未上传！农事将激活不了！用户将收不到农事消息哦~</div>
        </div>
        <div class="page-content">
            <div class="page-l">
                <el-affix :offset="120">
                    <div class="menu-list">
                        <el-anchor :container="containerRef" direction="vertical" type="default" @click="handleClick">
                            <el-anchor-link
                                v-for="(item, index) in farmWorkList"
                                :key="index"
                                :href="'#part' + index"
                                :title="item.farmWorkLibName"
                            >
                                <div class="menu-item">
                                    <img
                                        class="menu-icon"
                                        :src="require('@/assets/images/records/icon-' + (index + 1) + '.png')"
                                        alt=""
                                    />
                                    <span>{{ item.farmWorkLibName }}</span>
                                </div>
                            </el-anchor-link>
                        </el-anchor>
                    </div>
                </el-affix>
            </div>
            <div class="page-r">
                <div v-for="(card, cardI) in farmWorkList" :key="cardI" class="done-card">
                    <div class="id-positon" :id="'part' + cardI"></div>
                    <div class="card-wrap">
                        <div class="card-content">
                            <div class="card-top">
                                <div class="card-title serve-title">
                                    <div class="title-name">
                                        <span>{{ card.farmWorkLibName }}</span>
                                        <div class="edit-btn" @click="handleEdit('编辑农事', card)">
                                            <el-icon><Edit /></el-icon>
                                            <span>编辑</span>
                                        </div>
                                    </div>
                                </div>
                                <div>
                                    <div class="card-desc">
                                        <span class="desc-title">物候进程：</span>
                                        {{ card.whjc }}
                                    </div>
                                    <div class="card-desc">
                                        <span class="desc-title">执行时间：</span>
                                        {{ card.executeDate }}
                                    </div>
                                    <div class="card-desc">
                                        <span class="desc-title">生态理念：</span>
                                        {{ card.stln }}
                                    </div>
                                    <div class="card-desc condition-wrap">
                                        <div class="desc-title">农事目的：</div>
                                        <div>
                                            {{ card.targetText }}
                                        </div>
                                    </div>
                                    <div class="card-imgs" v-if="card?.images">
                                        <img-swipe :key="cardI" :imgsData="card.images"></img-swipe>
                                    </div>
                                </div>
                                <div class="card-link">
                                    <img class="expert-img" :src="card.expertPic" />
                                    <img class="expert-icon" src="@/assets/images/home/expert-icon.png" alt="" />
                                    <div class="expert-name">
                                        {{ card.expertName }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <editRecord
        v-if="showDialog"
        :rowData="rowData"
        :title="dialogTitle"
        :showDialog="showDialog"
        @closeDialog="handelDialog($event)"
></editRecord>
    <!-- 编辑弹窗 -->
    <!-- <el-dialog v-model="dialogVisible" title="编辑农事" align-center width="50%" :before-close="handleClose">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="90px">
            <el-form-item label="农场名称" prop="name">
                <el-input v-model="ruleForm.name" disabled />
            </el-form-item>
            <el-form-item label="生态理念" prop="name">
                <el-input v-model="ruleForm.name" disabled />
            </el-form-item>
            <el-form-item label="农事目的" prop="name">
                <el-input v-model="ruleForm.name" disabled />
            </el-form-item>
            <el-form-item label="指导专家" prop="name">
                <el-input v-model="ruleForm.name" disabled />
            </el-form-item>
            <el-form-item label="执行时间" prop="time">
                <el-date-picker
                    v-model="ruleForm.time"
                    type="date"
                    placeholder="请选择日期"
                    :disabled-date="disabledDate"
                />
            </el-form-item>
            <el-form-item label="农事照片" prop="photo">
                <upload></upload>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="resetForm(ruleFormRef)">取消</el-button>
                <el-button type="primary" @click="submitForm(ruleFormRef)"> 确认修改 </el-button>
            </div>
        </template>
    </el-dialog> -->
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import imgSwipe from "./imgSwipe.vue";
import { useRoute } from "vue-router";
import upload from "@/components/common/upload.vue";
import eventBus from "@/api/eventBus";
import editRecord from "./editRecord.vue";

import { useStore } from "vuex";
const store = useStore();

const currentFarmId = store.getters.userinfo.curFarmId
const disabledDate = (time) => {
    return time.getTime() > Date.now();
};

const ruleFormRef = ref(null);
const ruleForm = reactive({
    name: "柏桥村",
    time: new Date(),
    photo:[]
});

function uploadCallback(e){
    ruleForm.photo = e
}

const submitForm = async (formEl) => {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log("submit!");
            resetForm(formEl);
        } else {
            console.log("error submit!", fields);
        }
    });
};

const resetForm = (formEl) => {
    if (!formEl) return;
    formEl.resetFields();
    eventBus.emit("upload:reset");
    dialogVisible.value = false;
};

const rules = reactive({
    time: { required: true, message: "请选择日期", trigger: "blur" },
    photo: { required: true, message: "请上传照片", trigger: "blur" },
});

const dialogVisible = ref(false);

    const showDialog = ref(false);
    const rowData = ref(null);
    const dialogTitle = ref("");

    /**
     * @description:添加or编辑事件
     * @param {*}
     * @return {*}
     */
    const handleEdit = (title, row = null) => {
        console.log('row', row);
        showDialog.value = true;
        dialogTitle.value = title;
        rowData.value = row;
        if (!row) {
          rowData.value = {farmId:row.farmId};
        }
    };
    
    const handelDialog = (e) => {
        showDialog.value = false
        getData();
    };
const handleClose = () => {
    resetForm(ruleFormRef.value);
};

const route = useRoute();
const containerRef = ref(null);
const handleClick = (e) => {
    e.preventDefault();
    const href = e.target.getAttribute("href"); // 获取目标 hash（如 #part1）
    if (href) {
        const target = document.querySelector(href); // 找到目标元素
        if (target) {
            target.scrollIntoView({ behavior: "smooth" }); // 平滑滚动
        }
    }
};

const farmId = ref(null);
onMounted(() => {
    getData();
    eventBus.off('upload:change',uploadCallback)
    eventBus.on('upload:change',uploadCallback)
});

function getData() {
    VE_API.home.getFarmBuyAutoList({ farmId: currentFarmId }).then(({ data }) => {
        farmWorkList.value = data;
    });
}

const farmWorkList = ref([]);
</script>

<style lang="scss" scoped>
.record-page {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: auto;
    .tips {
        color: #000;
        border: 1px solid rgba(33, 153, 248, 0.74);
        padding: 12px 10px;
        border-radius: 5px;
        display: flex;
        align-items: center;
        font-size: 15px;
        margin-top: 10px;
        .icon {
            margin-right: 12px;
        }
        span {
            color: #2199f8;
            font-size: 16px;
        }
    }

    ::v-deep {
        .el-affix {
            background: #f2f2f4;
            border-radius: 0 4px 4px 0;
            width: 90px !important;
            & > div {
                height: 100%;
            }
        }
        .el-anchor.el-anchor--vertical .el-anchor__list {
            padding-left: 0;
        }
        .el-anchor {
            background: #f2f3f5;
        }
        .el-anchor__item {
            justify-content: center;
            align-items: center;
            margin-top: 20px;
        }
        .el-anchor__marker {
            display: none;
        }
        .el-anchor__link {
            width: 90px;
            background: #f2f3f5;
            padding: 6px 0;
            font-size: 13px;
            line-height: 20px;
            color: #666666;
            text-align: center;
            &.is-active {
                background: #2199f8;
                color: #fff;
            }
        }
    }
    .page-content {
        padding-top: 10px;
        height: 100%;
        display: flex;
        .page-l {
            height: 100%;
            width: 90px;
            background: #f2f3f5;
            border-radius: 0 10px 10px 0;
            .menu-item {
                display: flex;
                align-items: center;
                justify-content: start;
                padding-left: 10px;
                .menu-icon {
                    width: 14px;
                    padding-right: 4px;
                }
            }
            .menu-list {
                height: calc(100vh - 166px);
                overflow: auto;
            }
        }
        .page-r {
            width: calc(100% - 90px - 20px);
            height: 100%;
            margin: 0 10px 10px 10px;
            .done-card {
                margin-bottom: 10px;
                .id-positon {
                    position: relative;
                    top: -44px;
                }
                &:last-child {
                    .card-wrap {
                        padding-bottom: 30px;
                    }
                }
            }
        }
        .card-content {
            background: #fff;
            border-radius: 8px;
            padding: 0 8px 8px 8px;
            // border: 1px solid #2199f8;
            &.push {
                padding: 0 8px 12px 8px;
            }
            &.hasBg {
                padding: 0 8px 12px 8px;
                background: #fff;
                border: 1px solid rgba(102, 102, 102, 0.38);
                .card-top {
                    border-bottom: none;
                    padding-bottom: 0;
                }
            }
            .card-top {
                position: relative;
                &.noChart {
                    border-bottom: 0;
                    padding-bottom: 0;
                }
                .card-title {
                    display: flex;
                    align-items: center;
                    padding-bottom: 8px;
                    .serve-btn {
                        padding: 3px 10px;
                        background: #2199f8;
                        border-radius: 22px;
                        color: #fff;
                        text-align: center;
                    }
                    .title-name {
                        color: #000000;
                        font-size: 16px;
                        padding-right: 8px;
                        font-weight: 600;
                        display: flex;
                        align-items: center;
                        .edit-btn {
                            margin-left: 10px;
                            color: #fff;
                            font-size: 12px;
                            padding: 2px 6px;
                            border-radius: 3px;
                            font-weight: 400;
                            background: #2199f8;
                            display: flex;
                            align-items: center;
                            cursor: pointer;
                            span {
                                margin-left: 4px;
                            }
                        }
                    }
                    img {
                        width: 24px;
                    }

                    .status-tag {
                        color: #f3a302;
                        font-size: 12px;
                        padding: 2px 6px;
                        border-radius: 2px;
                        background: rgba(243, 163, 2, 0.2);
                        margin-right: 10px;
                        &.blue {
                            color: #2199f8;
                            background: rgba(33, 153, 248, 0.2);
                        }
                        &.good-wrap {
                            margin-left: 4px;
                            display: flex;
                            align-items: center;
                            .good {
                                margin-left: 3px;
                                width: 13px;
                            }
                        }
                        &.standard {
                            color: #2199f8;
                            background: rgba(33, 153, 248, 0.2);
                        }
                        &.advice {
                            color: rgba(252, 167, 3, 0.9);
                            background: rgba(255, 220, 104, 0.38);
                        }
                        &.warning {
                            color: #ff4221;
                            background: rgba(255, 175, 160, 0.24);
                        }
                    }
                    &.serve-title {
                        padding: 12px 0 8px 0;
                        display: flex;
                        align-items: center;
                        position: relative;
                        .add-btn {
                            position: absolute;
                            right: -9px;
                            top: -1px;
                            background: #2199f8;
                            color: #fff;
                            font-size: 12px;
                            border-radius: 0 8px 0 8px;
                            padding: 2px 6px;
                            &.unactive {
                                background: #c3c3c3;
                            }
                            &.recheck {
                                background: #f3c11d;
                            }
                        }
                        .tag {
                            display: flex;
                            align-items: center;
                            color: #ff7000;
                            font-size: 10px;
                            .desc {
                                position: relative;
                                left: -4px;
                            }
                            .photo-grid {
                                display: flex;
                                .photo {
                                    position: relative;
                                    img {
                                        width: 18px; /* 示例宽度，你可以根据需要调整 */
                                        height: 18px;
                                        object-fit: cover;
                                        border-radius: 50%;
                                        display: block; /* 去除图片底部的空白间隙 */
                                    }
                                }
                            }
                        }
                    }
                }
                .card-desc {
                    color: #666666;
                    font-size: 12px;
                    line-height: 18.2px;
                    &.van-ellipsis {
                        max-width: 142px;
                    }
                    &.last-desc {
                        display: flex;
                    }
                    .desc-title {
                        color: #b6b6b6;
                    }
                    &.condition-wrap {
                        display: flex;
                        .desc-title {
                            flex: none;
                        }
                    }
                    .rescription-wrap {
                        display: flex;
                        align-items: center;
                        .detail-text {
                            color: #2199f8;
                            padding-left: 6px;
                        }
                    }
                    .rescription {
                        max-width: 170px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                    .expert-link {
                        display: inline-flex;
                        align-items: center;
                        color: #2199f8;
                        .icon {
                            padding-left: 4px;
                        }
                    }
                }
                .step-box {
                    position: absolute;
                    right: 0px;
                    top: 15px;
                }
                .card-tips {
                    font-size: 12px;
                    color: #f5bc00;
                    padding: 3px;
                    background: rgba(243, 193, 29, 0.13);
                    border-radius: 5px;
                    text-align: center;
                    margin: 8px 0;
                    &.check {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        color: #2199f8;
                        background: rgba(33, 153, 248, 0.1);
                        padding: 5px;
                        margin-bottom: 0;
                        .icon {
                            margin-right: 6px;
                            font-size: 15px;
                        }
                    }
                }
                .card-tips-btn {
                    .text {
                        display: flex;
                        align-items: center;
                        span {
                            margin-left: 4px;
                        }
                    }
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    font-size: 12px;
                    color: #fff;
                    padding: 5px;
                    border-radius: 5px;
                    background: #2199f8;
                }
                .card-imgs {
                    padding: 10px 0 4px 0;
                }
                .tree-img {
                    width: 100%;
                    height: 150px;
                    object-fit: cover;
                    border-radius: 8px;
                }
                .card-link {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    color: #2199f8;
                    font-size: 12px;
                    position: absolute;
                    right: 6px;
                    top: 10px;
                    .expert-name {
                        background: #d3e8ff;
                        border-radius: 4px;
                        padding: 2px 6px 3px 10px;
                        margin-top: 4px;
                        display: flex;
                        align-items: center;
                    }
                    .expert-img {
                        width: 43px;
                        height: 43px;
                        border-radius: 50%;
                        object-fit: cover;
                    }
                    .expert-icon {
                        width: 21px;
                        height: 21px;
                        position: absolute;
                        right: 0;
                    }
                    .icon {
                        padding-right: 2px;
                    }
                }
            }
        }
    }
}

::v-deep {
    .el-date-editor.el-input,
    .el-date-editor.el-input__wrapper {
        width: 100%;
    }
}
.dialog-footer {
    text-align: center;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
}
</style>