|
@@ -2,30 +2,8 @@
|
|
|
<div class="farm-card-page">
|
|
<div class="farm-card-page">
|
|
|
<custom-header name="农事方案"></custom-header>
|
|
<custom-header name="农事方案"></custom-header>
|
|
|
<div class="farm-card-content">
|
|
<div class="farm-card-content">
|
|
|
- <div class="expert-prescription">
|
|
|
|
|
- <div class="plan-menu">
|
|
|
|
|
- <el-anchor :container="containerRef" direction="vertical" type="default" @click="handleClick">
|
|
|
|
|
- <el-menu :default-active="defaultActive" class="el-menu-vertical-demo">
|
|
|
|
|
- <el-sub-menu v-for="(menu, index) in menuData" :key="index" :index="String(menu.id)">
|
|
|
|
|
- <template #title>
|
|
|
|
|
- <img class="menu-icon" :src="require(`@/assets/img/gallery/icon-${index}.png`)" />
|
|
|
|
|
- <span class="menu-text">{{ menu.name }}</span>
|
|
|
|
|
- </template>
|
|
|
|
|
- <el-menu-item
|
|
|
|
|
- v-for="item in menu.farmWorkArrangeList"
|
|
|
|
|
- :key="item.id"
|
|
|
|
|
- :index="`${menu.id}-${item.id}`"
|
|
|
|
|
- >
|
|
|
|
|
- <el-anchor-link
|
|
|
|
|
- :href="'#' + menu.name + item.farmWorkDetail?.name"
|
|
|
|
|
- :title="item.farmWorkDetail?.name || '摇花落花'"
|
|
|
|
|
- />
|
|
|
|
|
- </el-menu-item>
|
|
|
|
|
- </el-sub-menu>
|
|
|
|
|
- </el-menu>
|
|
|
|
|
- </el-anchor>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="expert-content" ref="containerRef">
|
|
|
|
|
|
|
+ <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 v-for="(section, index) in menuData" :key="index" class="content-section">
|
|
|
<div
|
|
<div
|
|
|
class="section-item"
|
|
class="section-item"
|
|
@@ -33,51 +11,45 @@
|
|
|
:key="index + '-' + subI"
|
|
:key="index + '-' + subI"
|
|
|
>
|
|
>
|
|
|
<div class="section-id" :id="section.name + sub.farmWorkDetail?.name"></div>
|
|
<div class="section-id" :id="section.name + sub.farmWorkDetail?.name"></div>
|
|
|
- <record-item :record-item-data="sub">
|
|
|
|
|
|
|
+ <record-item :record-item-data="sub" @click="handleClick(sub)">
|
|
|
<template #title>
|
|
<template #title>
|
|
|
<div class="box-title">
|
|
<div class="box-title">
|
|
|
<div class="title-l">
|
|
<div class="title-l">
|
|
|
{{ sub.farmWorkDetail?.name }}
|
|
{{ sub.farmWorkDetail?.name }}
|
|
|
<span class="parent-text">{{ section.name }}</span>
|
|
<span class="parent-text">{{ section.name }}</span>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+ <div class="title-r" v-if="curRole === 2">
|
|
|
|
|
+ <el-icon color="#2199F8" size="16"><Edit /></el-icon>
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
</record-item>
|
|
</record-item>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </PlanList>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
|
import customHeader from "@/components/customHeader.vue";
|
|
import customHeader from "@/components/customHeader.vue";
|
|
|
-import { ref, onMounted } from "vue";
|
|
|
|
|
-import { useRoute } from "vue-router";
|
|
|
|
|
|
|
+import { ref } from "vue";
|
|
|
|
|
+import { useRoute, useRouter } from "vue-router";
|
|
|
import recordItem from "@/components/recordItem.vue";
|
|
import recordItem from "@/components/recordItem.vue";
|
|
|
|
|
+import PlanList from "@/components/pageComponents/PlanList.vue";
|
|
|
|
|
|
|
|
|
|
+const curRole = ref(localStorage.getItem("curRole") || 0);
|
|
|
const route = useRoute();
|
|
const route = useRoute();
|
|
|
-const containerRef = ref(null);
|
|
|
|
|
-const handleClick = (e) => {
|
|
|
|
|
- e.preventDefault();
|
|
|
|
|
-};
|
|
|
|
|
|
|
+const router = useRouter();
|
|
|
// 菜单
|
|
// 菜单
|
|
|
const defaultActive = ref("1-1");
|
|
const defaultActive = ref("1-1");
|
|
|
|
|
|
|
|
-const menuData = ref([]);
|
|
|
|
|
-
|
|
|
|
|
-function getWorkList() {
|
|
|
|
|
- VE_API.home
|
|
|
|
|
- .getPhenologyFarmWorkList({ farmId: 93301, containerId: route.query.containerId || 2 })
|
|
|
|
|
- .then(({ data }) => {
|
|
|
|
|
- menuData.value = data;
|
|
|
|
|
- });
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-onMounted(() => {
|
|
|
|
|
- getWorkList();
|
|
|
|
|
-});
|
|
|
|
|
|
|
+const handleClick = (sub) => {
|
|
|
|
|
+ if (curRole.value === 2) {
|
|
|
|
|
+ router.push(`/edit_plan?id=${sub.id}`);
|
|
|
|
|
+ }
|
|
|
|
|
+};
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
<style scoped lang="scss">
|
|
@@ -87,125 +59,32 @@ onMounted(() => {
|
|
|
background: #f5f7fb;
|
|
background: #f5f7fb;
|
|
|
.farm-card-content {
|
|
.farm-card-content {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
- height: 100%;
|
|
|
|
|
- .expert-prescription {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- height: calc(100vh - 40px);
|
|
|
|
|
- padding-top: 10px;
|
|
|
|
|
|
|
+ height: calc(100vh - 40px);
|
|
|
|
|
+ padding-top: 10px;
|
|
|
|
|
+ ::v-deep .expert-prescription {
|
|
|
|
|
+ height: 100%;
|
|
|
.plan-menu {
|
|
.plan-menu {
|
|
|
- width: 100px;
|
|
|
|
|
- height: 100%;
|
|
|
|
|
- overflow: auto;
|
|
|
|
|
padding: 10px 0;
|
|
padding: 10px 0;
|
|
|
- box-sizing: border-box;
|
|
|
|
|
- background: #fff;
|
|
|
|
|
border-radius: 0 10px 10px 0;
|
|
border-radius: 0 10px 10px 0;
|
|
|
- .menu-icon {
|
|
|
|
|
- width: 13px;
|
|
|
|
|
- }
|
|
|
|
|
- .menu-text {
|
|
|
|
|
- padding: 0 4px;
|
|
|
|
|
- }
|
|
|
|
|
- ::v-deep {
|
|
|
|
|
- .el-anchor {
|
|
|
|
|
- height: 100%;
|
|
|
|
|
- background: none;
|
|
|
|
|
- }
|
|
|
|
|
- .el-anchor__marker {
|
|
|
|
|
- display: none;
|
|
|
|
|
- }
|
|
|
|
|
- .el-menu {
|
|
|
|
|
- background: none;
|
|
|
|
|
- border: none;
|
|
|
|
|
- .el-sub-menu__title {
|
|
|
|
|
- background: none;
|
|
|
|
|
- padding: 0 2px;
|
|
|
|
|
- justify-content: center;
|
|
|
|
|
- }
|
|
|
|
|
- .el-sub-menu__title {
|
|
|
|
|
- height: 32px;
|
|
|
|
|
- }
|
|
|
|
|
- .el-sub-menu .el-sub-menu__icon-arrow {
|
|
|
|
|
- position: static;
|
|
|
|
|
- padding-top: 6px;
|
|
|
|
|
- }
|
|
|
|
|
- .el-sub-menu {
|
|
|
|
|
- margin-bottom: 16px;
|
|
|
|
|
- &.is-opened {
|
|
|
|
|
- .el-sub-menu__icon-arrow {
|
|
|
|
|
- padding-bottom: 6px;
|
|
|
|
|
- padding-top: 0;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- .el-menu-item {
|
|
|
|
|
- height: 32px;
|
|
|
|
|
- line-height: 32px;
|
|
|
|
|
- margin: 4px 8px;
|
|
|
|
|
- padding: 0 2px;
|
|
|
|
|
- justify-content: center;
|
|
|
|
|
- background: none;
|
|
|
|
|
- }
|
|
|
|
|
- .el-menu-item.is-active {
|
|
|
|
|
- background: none;
|
|
|
|
|
- color: #fff;
|
|
|
|
|
- }
|
|
|
|
|
- .el-anchor__item {
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- text-align: center;
|
|
|
|
|
- }
|
|
|
|
|
- .el-anchor__link {
|
|
|
|
|
- color: #666666;
|
|
|
|
|
- }
|
|
|
|
|
- .el-anchor__link.is-active {
|
|
|
|
|
- background: rgba(33, 153, 248, 0.1);
|
|
|
|
|
- border-radius: 20px;
|
|
|
|
|
- color: #2199f8;
|
|
|
|
|
- border: 1px solid #2199f8;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- .el-anchor__list {
|
|
|
|
|
- padding-left: 0;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
}
|
|
}
|
|
|
- .expert-content {
|
|
|
|
|
- width: calc(100% - 100px);
|
|
|
|
|
- height: 100%;
|
|
|
|
|
- overflow: auto;
|
|
|
|
|
- box-sizing: border-box;
|
|
|
|
|
- .content-section {
|
|
|
|
|
- position: relative;
|
|
|
|
|
- .section-item {
|
|
|
|
|
- position: relative;
|
|
|
|
|
- }
|
|
|
|
|
- .section-id {
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- // top: -6px;
|
|
|
|
|
- top: 0;
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- height: 1px;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- .box-title {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- 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);
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ .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);
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|