feiniao-farm-h5/src/views/old_mini/plan/index.vue

<template>
    <div class="farm-card-page">
        <custom-header name="农事方案"></custom-header>
        <div class="farm-card-content">
            <PlanList :farm-id="93301" :container-id="route.query.containerId || 2" :default-active="defaultActive">
                <template #default="{ menuData }">
                    <div v-for="(section, index) in menuData" :key="index" class="content-section">
                        <div
                            class="section-item"
                            v-for="(sub, subI) in section.farmWorkArrangeList"
                            :key="index + '-' + subI"
                        >
                            <div class="section-id" :id="section.name + sub.farmWorkDetail?.name"></div>
                            <record-item :record-item-data="sub" @click="handleClick(sub)">
                                <template #title>
                                    <div class="box-title">
                                        <div class="title-l">
                                            {{ sub.farmWorkDetail?.name }}
                                            <span class="parent-text">{{ section.name }}</span>
                                        </div>
                                        <div class="title-r" v-if="curRole == 2">
                                            <el-icon color="#2199F8" size="16"><Edit /></el-icon>
                                        </div>
                                    </div>
                                </template>
                            </record-item>
                        </div>
                    </div>
                </template>
            </PlanList>
        </div>
    </div>
</template>

<script setup>
import customHeader from "@/components/customHeader.vue";
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import recordItem from "@/components/recordItem.vue";
import PlanList from "@/components/pageComponents/PlanList.vue";

const curRole = ref(localStorage.getItem("SET_USER_CUR_ROLE") || 0);
const route = useRoute();
const router = useRouter();
// 菜单
const defaultActive = ref("1-1");

const handleClick = (sub) => {
    if (curRole.value == 2) {
        router.push(`/edit_plan?id=${sub.id}`);
    }
};
</script>

<style scoped lang="scss">
.farm-card-page {
    width: 100%;
    height: 100vh;
    background: #f5f7fb;
    .farm-card-content {
        width: 100%;
        height: calc(100vh - 40px);
        padding-top: 10px;
        ::v-deep .expert-prescription {
            height: 100%;
            .plan-menu {
                padding: 10px 0;
                border-radius: 0 10px 10px 0;
            }
            .box-title {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding-bottom: 8px;
                border-bottom: 1px solid #f5f5f5;
                margin-bottom: 8px;
                .title-l {
                    font-size: 16px;
                    font-weight: 600;
                    color: #000;
                    .parent-text {
                        margin-left: 5px;
                        font-size: 12px;
                        font-weight: normal;
                        padding: 4px 6px;
                        border-radius: 14px;
                        background: rgba(119, 119, 119, 0.1);
                    }
                }
            }
        }
    }
}
</style>