feat：修改专家方案页面样式和逻辑

src/components/recordItem.vue

@@ -98,8 +98,6 @@ const props = defineProps({
         default: false,
     },
 });
-
-console.log('recordItemData', props.recordItemData);
 </script>
 
 <style lang="scss" scoped>

src/views/old_mini/plan/components/myPrescription.vue

@@ -1,36 +1,17 @@
 <template>
     <div class="prescription-page">
-        <!-- <div class="filter-wrap">
-            <div class="farm-list">
-                <el-select
-                    @change="changeFarm"
-                    class="select-item"
-                    v-model="farmItem"
-                    placeholder="作物类型"
-                    style="width: 100px"
-                >
-                    <el-option
-                        v-for="(item, index) in farmList"
-                        :key="index"
-                        :label="item.name"
-                        :value="{ value: item.organId, ...item }"
-                    />
-                </el-select>
-            </div>
-            <div class="plan-box">
-                <div
-                    class="plan-item"
-                    v-for="(item, index) in planList"
-                    :key="index"
-                    @click="handlePlanClick(item.id, index)"
-                    :class="{ active: activePlanIndex === index }"
-                >
-                    {{ item.name }}
-                </div>
+        <div class="filter-list">
+            <div
+                class="filter-item"
+                v-for="(label, i) in filterTabs"
+                :key="i"
+                :class="{ active: i === activeFilterIndex }"
+                @click="activeFilterIndex = i"
+            >
+                {{ label }}
             </div>
-            <div class="plan-add" @click="newPlan">新增方案</div>
-        </div> -->
-        <div class="expert-prescription" :class="{'isSubPage': isSubPage}">
+        </div>
+        <div class="expert-prescription" :class="{ isSubPage: isSubPage }">
             <div class="plan-menu">
                 <el-anchor :container="containerRef" direction="vertical" type="default" @click="handleClick">
                     <el-menu :default-active="defaultActive" class="el-menu-vertical-demo">
@@ -39,8 +20,15 @@
                                 <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
+                                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>
@@ -48,8 +36,12 @@
             </div>
             <div class="expert-content" ref="containerRef">
                 <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>
+                    <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">
                             <template #title>
                                 <div class="box-title">
@@ -74,46 +66,34 @@
         </div>
 
         <!-- 底部 -->
-        <!-- <div class="fixed-bottom">
-            <div class="bottom-l">
-                <div class="l-btn">
-                    <el-icon color="#666666" class="btn-icon" size="16"><Download /></el-icon>
-                    下载处方
-                </div>
-            </div>
-            <div class="bottom-r" @click="addWork">新增农事</div>
-        </div> -->
+        <div class="fixed-bottom" :style="{ color: activeFilterIndex === defaultFilterIndex ? 'rgba(0, 0, 0, 0.5)' : '#2199F8' }" @click="handleSetDefault">{{activeFilterIndex === defaultFilterIndex ? '当前已是 默认方案' : '设置为 默认方案'}}</div>
     </div>
-    <add-group ref="addGroupRef" @updateGroupList="getPlan" />
+    <!-- <add-group ref="addGroupRef" @updateGroupList="getPlan" /> -->
     <action-sheet :style="{ bottom: tabBarHeight + 'px' }" v-model:show="showAction" title="选择农事类型(可多选)">
-            <div class="content">
-                <checkbox-group v-model="checkedType">
-                    <div class="action-content">
-                        <div
-                            class="action-item"
-                            :class="{ active: checkedType.includes(item) }"
-                            v-for="(item, index) in actionTypeList"
-                            :key="index"
-                            @click="toggleActionType(index)"
-                        >
-                            <div class="type-name">{{ item }}</div>
-                            <div>
-                                <checkbox :name="item" :ref="(el) => (checkboxRefs[index] = el)" @click.stop />
-                            </div>
+        <div class="content">
+            <checkbox-group v-model="checkedType">
+                <div class="action-content">
+                    <div
+                        class="action-item"
+                        :class="{ active: checkedType.includes(item) }"
+                        v-for="(item, index) in actionTypeList"
+                        :key="index"
+                        @click="toggleActionType(index)"
+                    >
+                        <div class="type-name">{{ item }}</div>
+                        <div>
+                            <checkbox :name="item" :ref="(el) => (checkboxRefs[index] = el)" @click.stop />
                         </div>
                     </div>
-                    <div class="action-btn">
-                        <el-button
-                            @click="toNewFarming"
-                            :disabled="checkedType.length === 0"
-                            class="btn-one"
-                            type="primary"
-                            >确定</el-button
-                        >
-                    </div>
-                </checkbox-group>
-            </div>
-        </action-sheet>
+                </div>
+                <div class="action-btn">
+                    <el-button @click="toNewFarming" :disabled="checkedType.length === 0" class="btn-one" type="primary"
+                        >确定</el-button
+                    >
+                </div>
+            </checkbox-group>
+        </div>
+    </action-sheet>
 </template>
 
 <script setup>
@@ -127,11 +107,29 @@ import { ElMessage, ElMessageBox } from "element-plus";
 const props = defineProps({
     isSubPage: {
         type: Boolean,
-        default: false
-    }
-})
+        default: false,
+    },
+});
 const store = useStore();
 const router = useRouter();
+// 顶部筛选标签
+const filterTabs = ref(["韦帮稳", "某某某", "某某某", "某某某"]);
+const activeFilterIndex = ref(0);
+const defaultFilterIndex = ref(0);
+const handleSetDefault = () => {
+    if (activeFilterIndex.value === defaultFilterIndex.value) {
+        ElMessage.warning('当前已是 默认方案');
+    } else {
+        ElMessageBox.confirm('确定要将当前方案设置为默认方案吗？', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+        }).then(() => {
+            defaultFilterIndex.value = activeFilterIndex.value;
+            ElMessage.success('设置成功');
+        }).catch(() => {});
+    }
+};
 
 const tabBarHeight = computed(() => store.state.home.tabBarHeight);
 // 菜单
@@ -139,15 +137,6 @@ const defaultActive = ref("1-1");
 
 const menuData = ref([]);
 
-const activePlanIndex = ref(null);
-const schemeId = ref(null);
-const planList = ref([]);
-const handlePlanClick = (id, index) => {
-    schemeId.value = id
-    activePlanIndex.value = index;
-    getWorkList()
-};
-
 function deletePlan() {
     ElMessageBox.confirm("是否确认删除该农事？", "提示", {
         confirmButtonText: "确定",
@@ -168,10 +157,9 @@ const handleClick = (e) => {
 const addGroupRef = ref(null);
 // 新增方案
 function newPlan() {
-    addGroupRef.value.openClientPopup({params: {farmIds: [farmId.value], containerId: containerId.value}});
+    addGroupRef.value.openClientPopup({ params: { farmIds: [farmId.value], containerId: containerId.value } });
 }
 
-
 // -------新增农事-----
 const showAction = ref(false);
 const addWork = () => {
@@ -198,117 +186,56 @@ const containerRef = ref(null);
 
 onMounted(() => {
     getFarmList(() => {
-        getPlan()
-        getWorkList()
-    })
-    
-})
+        getWorkList();
+    });
+});
 
 const miniUserId = store.state.home.miniUserId;
 
-const farmItem = ref(null)
-const farmId = ref(null)
-const containerId = ref(null)
-const farmList = ref([])
+const farmItem = ref(null);
+const farmId = ref(null);
+const containerId = ref(null);
+const farmList = ref([]);
 function getFarmList(callback) {
-    VE_API.farm.fetchFarmList({userId: miniUserId, show3dFarm: false}).then(({data}) => {
-        farmList.value = data || []
+    VE_API.farm.fetchFarmList({ userId: miniUserId, show3dFarm: false }).then(({ data }) => {
+        farmList.value = data || [];
         if (data && data.length) {
-            console.log('ddd', data);
-            farmItem.value = {...data[0], value: data[0].organId}
-            farmId.value = data[0].organId
-            containerId.value = data[0].containerId
-            callback && callback()
+            farmItem.value = { ...data[0], value: data[0].organId };
+            farmId.value = data[0].organId;
+            containerId.value = data[0].containerId;
+            callback && callback();
         }
-    })
+    });
 }
 
 function getWorkList() {
-    console.log('farmId', farmId.value, containerId.value);
-    VE_API.home.getPhenologyFarmWorkList({farmId: farmId.value, containerId: containerId.value, schemeId: schemeId.value}).then(({data}) => {
-        // contentData.value = data
-        menuData.value = data
-    })
-}
-
-function getPlan() {
-    VE_API.home.listByFarmIdAndContainerId({farmId: farmId.value, containerId: containerId.value}).then(({data}) => {
-        planList.value = data
-    })
-}
-
-function changeFarm(v) {
-    containerId.value = v.containerId
-    getPlan()
+    VE_API.home
+        .getPhenologyFarmWorkList({ farmId: farmId.value, containerId: containerId.value })
+        .then(({ data }) => {
+            menuData.value = data;
+        });
 }
 </script>
 
 <style lang="scss" scoped>
 .prescription-page {
     height: 100%;
-    background: #F5F7FB;
+    background: #f5f7fb;
     position: relative;
-    .filter-wrap {
-        padding: 10px 0;
-        width: 100%;
+    .filter-list {
+        padding: 10px 12px;
         display: flex;
         align-items: center;
-        justify-content: space-between;
-        .farm-list {
-            padding-left: 12px;
-            ::v-deep {
-                .el-select__wrapper {
-                    box-shadow: 0 0 0 1px rgba(33, 153, 248, 0.3) inset;
-                }
-                .el-input__inner, .el-select__placeholder {
-                    color: #2199f8;
-                }
-                .el-input__prefix {
-                    color: #2199f8;
-                }
-                .el-select__caret {
-                    color: #2199f8;
-                }
-                .el-input {
-                    --el-input-placeholder-color: #2199f8;
-                }
-            }
-        }
-        .plan-box {
-            flex: 1;
-            padding-left: 10px;
-            display: flex;
-            overflow: auto;
-            white-space: nowrap;
-            align-items: center;
-            .plan-item {
-                color: #000000;
-                background: #f1f1f1;
-                padding: 0 12px;
-                height: 32px;
-                line-height: 32px;
-                border-radius: 20px;
-                &.active {
-                    background: rgba(33, 153, 248, 0.2);
-                    color: #2199f8;
-                }
-            }
-            .plan-item + .plan-item {
-                margin-left: 10px;
+        gap: 12px;
+        .filter-item {
+            color: #8a8f94;
+            padding: 6px 12px;
+            &.active {
+                color: #2199f8;
+                background: rgba(33, 153, 248, 0.12);
+                border-radius: 28px;
             }
         }
-        .plan-add {
-            width: 80px;
-            height: 30px;
-            border: 1px solid #2199f8;
-            border-radius: 20px;
-            flex: none;
-            line-height: 32px;
-            text-align: center;
-            margin: 0 12px;
-            color: #2199f8;
-            font-size: 14px;
-        }
     }
 
     .expert-prescription {
@@ -317,7 +244,6 @@ function changeFarm(v) {
         height: calc(100vh - 52px - 48px);
         &.isSubPage {
             height: calc(100vh - 52px - 48px);
-            padding-top: 10px;
         }
         .plan-menu {
             width: 100px;
@@ -464,53 +390,17 @@ function changeFarm(v) {
         }
     }
 
-    
     .fixed-bottom {
-        position: absolute;
-        bottom: 12px;
-        left: 12px;
-        width: calc(100% - 24px);
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 14px 12px;
-        background: linear-gradient(180deg, #f0f8ff 6px, #FFFFFF 20px);
-        border-radius: 14px;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        text-align: center;
+        padding: 20px;
+        background: #fff;
         box-sizing: border-box;
-        box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.1);
-        .bottom-l {
-            display: flex;
-            align-items: center;
-            .l-btn {
-                border: 1px solid rgba(153, 153, 153, 0.5);
-                border-radius: 30px;
-                padding: 0 8px 0 12px;
-                height: 32px;
-                line-height: 32px;
-                box-sizing: border-box;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                color: #666666;
-                .btn-icon {
-                    padding-right: 3px;
-                }
-                .calculator-icon {
-                    width: 12px;
-                }
-            }
-            .l-btn + .l-btn {
-                margin-left: 10px;
-            }
-        }
-        .bottom-r {
-            height: 32px;
-            line-height: 32px;
-            background: linear-gradient(180deg, #70bffe, #2199f8);
-            border-radius: 20px;
-            color: #fff;
-            padding: 0 12px;
-        }
+        border-top: 1px solid rgba(153, 153, 153, 0.2);
+        color: rgba(0, 0, 0, 0.5);
     }
 }
 

src/views/old_mini/plan/index.vue

@@ -13,21 +13,7 @@
         </div>
         <div class="plan-content" v-if="activeTab === 'left'">
             <div class="filter-wrap">
-                <div class="filter-l">
-                    <div class="filter-item type-cascader">
-                        <el-cascader v-model="typeVal" :options="typeOptions"></el-cascader>
-                    </div>
-                    <div class="filter-item">
-                        <el-select v-model="proviceVal" style="width: 76px">
-                            <el-option
-                                v-for="item in proviceOptions"
-                                :key="item.value"
-                                :label="item.label"
-                                :value="item.value"
-                            />
-                        </el-select>
-                    </div>
-                </div>
+                <div class="filter-l">指导专家：韦帮稳</div>
                 <div class="filter-r" @click="toPage">更多专家<el-icon><ArrowRightBold /></el-icon></div>
             </div>
             <div class="expert-prescription">
@@ -40,7 +26,7 @@
                                     <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-anchor-link :href="'#'+menu.name+item.farmWorkDetail?.name" :title="item.farmWorkDetail?.name || '摇花落花'" />
                                 </el-menu-item>
                             </el-sub-menu>
                         </el-menu>
@@ -339,54 +325,12 @@ onMounted(() => {
     .plan-content {
         background: #f5f7fb;
         .filter-wrap {
-            padding: 10px 0;
+            padding: 10px 12px;
             width: 100%;
+            box-sizing: border-box;
             display: flex;
             align-items: center;
             justify-content: space-between;
-            .type-cascader {
-                // flex: 1;
-                text-align: center;
-                ::v-deep {
-                    .el-input__inner {
-                        width: 80px;
-                    }
-                }
-            }
-            .filter-item {
-                width: fit-content;
-                ::v-deep {
-                    .el-input__wrapper {
-                        background: none;
-                        box-shadow: none;
-                    }
-                    .el-input__inner {
-                        font-size: 14px;
-                        color: rgba(0, 0, 0, 0.5);
-                    }
-                    .el-select__wrapper {
-                        background: none;
-                        box-shadow: none;
-                        gap: 2px;
-                        padding: 4px 2px;
-                        justify-content: center;
-                    }
-                    .el-select__selection {
-                        flex: none;
-                        width: fit-content;
-                    }
-                    .el-select__placeholder {
-                        color: rgba(0, 0, 0, 0.5);
-                        position: static;
-                        transform: none;
-                        width: fit-content;
-                    }
-                }
-            }
-            .filter-l {
-                display: flex;
-                align-items: center;
-            }
             .filter-r {
                 height: 32px;
                 display: flex;
@@ -401,17 +345,16 @@ onMounted(() => {
     }
     .fixed-bottom {
         position: absolute;
-        bottom: 12px;
-        left: 12px;
-        width: calc(100% - 24px);
+        bottom: 0;
+        left: 0;
+        width: 100%;
         display: flex;
         align-items: center;
         justify-content: space-between;
         padding: 14px 12px;
-        background: linear-gradient(180deg, #f0f8ff 6px, #ffffff 20px);
-        border-radius: 14px;
+        background: #fff;
         box-sizing: border-box;
-        box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.1);
+        border-top: 1px solid rgba(153, 153, 153, 0.2);
         .bottom-l {
             display: flex;
             align-items: center;
@@ -515,9 +458,10 @@ onMounted(() => {
                             color: #666666;
                         }
                         .el-anchor__link.is-active {
-                            background: linear-gradient(180deg, #70bffe, #2199f8);
+                            background: rgba(33, 153, 248, 0.1);
                             border-radius: 20px;
-                            color: #fff;
+                            color: #2199F8;
+                            border: 1px solid #2199F8;
                         }
                     }
                 }