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">
            <tab-list
                v-if="curRole == 2"
                type="light"
                v-model="active"
                :tabs="tabs"
                @change="handleTabChange"
                class="tabs-list"
            />
            <plan-list :farm-id="route.query.farmId" :schemeId="active" isEdit> </plan-list>
        </div>
    </div>
</template>

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

const route = useRoute();
const curRole = localStorage.getItem("SET_USER_CUR_ROLE");

const tabs = ref([]);
const active = ref(null);

const handleTabChange = (index) => {
    console.log(index);
};

onMounted(() => {
    if (curRole == 2) {
        getListMySchemes();
    }
});

const getListMySchemes = () => {
    VE_API.home.listMySchemes().then(({ data }) => {
        if (data.length) {
            tabs.value = data || [];
            active.value = data[0].id;
        } else {
            getSchemes();
        }
    });
};

const getSchemes = () => {
    VE_API.home.batchInitSchemes({ containerIds: [3], schemeName: "农资荔枝方案" }).then(({ code }) => {
        if (code == 0) {
            getListMySchemes();
        }
    });
};
</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;
        .tabs-list {
            margin: 0 0 10px 10px;
        }
    }
}
</style>