Merge branch 'master' of http://www.sysuimars.cn:3000/feiniao/feiniao-farm-h5

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

@@ -0,0 +1,341 @@
+<template>
+    <div>
+        <!-- 新增客户、编辑客户 -->
+        <popup v-model:show="showClient" closeable round class="popup-group">
+            <div class="group-wrap">
+                <div class="popup-content">
+                    <el-form
+                        ref="ruleFormRef"
+                        :model="ruleForm"
+                        :rules="rules"
+                        label-width="auto"
+                        class="rule-form"
+                        size="large"
+                    >
+                        <el-form-item label="方案名称" prop="name" v-if="popupType === 'add'">
+                            <el-input class="input" v-model="ruleForm.name" placeholder="请输入" />
+                        </el-form-item>
+                        <el-form-item label="添加到" v-else label-width="76">
+                            <el-select
+                                popper-class="select-popper-orange"
+                                class="select mr-10 select-orange"
+                                v-model="ruleForm.id"
+                            >
+                                <!-- <el-option
+                                    v-for="(item, index) in groupOptions"
+                                    :key="index"
+                                    :label="item.groupName"
+                                    :value="item.id"
+                                /> -->
+                                <el-option
+                                    v-for="(item, index) in groupOptions"
+                                    :key="index"
+                                    :label="item.groupName"
+                                    :value="item.id"
+                                    >
+                                    <span style="float: left">{{ item.groupName }}</span>
+                                    <span
+                                        style="
+                                        float: right;
+                                        color: var(--el-text-color-secondary);
+                                        "
+                                        v-show="item.id !== '-1'"
+                                        @click.stop="deleteGroupFun()"
+                                    >
+                                        <el-popconfirm
+                                            class="box-item"
+                                            title="确认删除该分组吗？"
+                                            placement="bottom"
+                                            width="180px"
+                                        >
+                                            <template #reference>
+                                                <el-icon size="16" color="#E04C4C"><CircleCloseFilled /></el-icon>
+                                            </template>
+                                            <template #actions="{ cancel }">
+                                                <el-button size="small" @click.stop="cancel">取消</el-button>
+                                                <el-button
+                                                    type="primary"
+                                                    size="small"
+                                                    @click.stop="deleteGroup(item, cancel)"
+                                                >
+                                                确认
+                                                </el-button>
+                                            </template>
+                                        </el-popconfirm>
+                                        
+                                    </span>
+                                    </el-option>
+                                <template #footer>
+                                    <div class="add-btn" v-if="!isAddingItem" @click="isAddingItem=true">
+                                        <el-icon class="add-icon" size="16">
+                                            <Plus />
+                                        </el-icon>
+                                        <span>新增分组</span>
+                                    </div>
+                                    <template v-else>
+                                        <el-input v-model="ruleForm.name" class="option-input" /><br />
+                                        <el-button type="primary" @click="submitGroupName"> 新增 </el-button>
+                                        <el-button @click="clear">取消</el-button>
+                                    </template>
+                                </template>
+                            </el-select>
+                        </el-form-item>
+                    </el-form>
+                </div>
+                <div class="popup-footer">
+                    <div class="cancel" @click="resetForm">取消</div>
+                    <div v-if="popupType === 'add'" :class="{'disabled': !ruleForm.name}" @click="submitGroupName">保存</div>
+                    <div v-else @click="submitForm" :class="{'disabled': !ruleForm.id}">保存</div>
+                </div>
+            </div>
+        </popup>
+    </div>
+</template>
+
+<script setup>
+import { Popup } from "vant";
+import { onMounted, reactive, ref } from "vue";
+import { ElMessage } from "element-plus";
+import { useStore } from "vuex";
+const store = useStore();
+
+const showClient = ref(false);
+const ruleForm = reactive({
+    name: "",
+    id: "",
+});
+const rules = reactive({
+    // id: { required: true, message: "请选择分组", trigger: ["blur", "change"] },
+    name: { required: true, message: "请输入分组名称", trigger: ["blur", "change"] },
+});
+
+const currentFarmId = 766
+
+const ruleFormRef = ref(null);
+const submitForm = () => {
+    // const params = {
+    //     farmId: currentFarmId,
+    //     groupId: ruleForm.id,
+    //     telList: telList.value,
+    // };
+    // VE_API.manage_user
+    //     .batchGroup(params)
+    //     .then(({ code }) => {
+    //         if (code === 0) {
+    //             ElMessage.success("保存成功");
+    //             showClient.value = false;
+    //             emit("updateTableList");
+    //         }
+    //     })
+};
+
+const submitGroupName = async () => {
+    if (!ruleFormRef.value) return;
+    await ruleFormRef.value.validate((valid, fields) => {
+        if (valid) {
+            const params = {
+                farmId: currentFarmId,
+                groupName: ruleForm.name,
+            };
+            // VE_API.manage_user
+            //     .saveGroup(params)
+            //     .then(({ data, code }) => {
+            //         if (code === 0) {
+            //             ElMessage.success("新建分组成功");
+            //             if (popupType.value === "add") {
+            //                 showClient.value = false;
+            //             } else {
+            //                 console.log('data', data);
+            //                 clear()
+            //                 getGroupList(data.id)
+            //             }
+            //             emit("updateGroupList");
+            //         }
+            //     });
+        } else {
+            console.log("error submit!");
+        }
+    });
+};
+
+const resetForm = () => {
+    if (!ruleFormRef.value) return;
+    ruleFormRef.value.resetFields();
+    showClient.value = false;
+};
+
+// 打开弹窗-类型
+const telList = ref([]);
+const popupType = ref("add");
+function openClientPopup(type, userArr) {
+    popupType.value = type || "add";
+    if (type !== "add") {
+        telList.value = userArr;
+    }
+    showClient.value = true;
+}
+
+const groupOptions = ref([
+        {
+            "farmId": 766,
+            "groupName": "分组1",
+            "id": "1"
+        },
+        {
+            "farmId": 766,
+            "groupName": "方案1",
+            "id": "3"
+        },
+        {
+            "farmId": 766,
+            "groupName": "方案122",
+            "id": "15"
+        },
+        {
+            "farmId": 766,
+            "groupName": "飞鸟方案",
+            "id": "21"
+        },
+    ]);
+
+const isAddingItem = ref(false);
+
+const clear = () => {
+    ruleForm.name = null
+    isAddingItem.value = false;
+};
+onMounted(() => {
+    getGroupList();
+});
+// 删除分组
+const deleteGroup = (item, cancel) => {
+    cancel();
+    const params = {
+        id: item.id,
+    };
+    // VE_API.manage_user.deleteGroup(params).then(({ code }) => {
+    //     if (code === 0) {
+    //         ElMessage.success("删除分组成功");
+    //         getGroupList();
+    //         emit("updateGroupList");
+    //     }
+    // });
+};
+
+function deleteGroupFun() {
+}
+
+function getGroupList(hasVal) {
+    // groupOptions.value = data;
+    if (hasVal) {
+        ruleForm.id = hasVal
+    }
+    // VE_API.manage_user.fetchGroupList({farmId: currentFarmId}).then(({ data }) => {
+    // });
+}
+
+// const emit = defineEmits(["updateTableList", "updateGroupList"]);
+
+defineExpose({
+    openClientPopup,
+});
+</script>
+
+<style lang="scss" scoped>
+.popup-group {
+    // width: 24%;
+    width: 325px;
+    padding: 0;
+    background: #fff;
+        margin-top: -50px;
+    ::v-deep {
+        .van-popup__close-icon {
+            color: #666666;
+        }
+    }
+    .group-wrap {
+        background: url("@/assets/img/home/mask-bg.png") no-repeat top left /100% auto;
+        padding: 50px 12px 30px 12px;
+        box-sizing: border-box;
+    }
+    .popup-title {
+        text-align: center;
+        color: #000;
+        font-size: 24px;
+        margin-bottom: 15px;
+    }
+    .popup-content {
+        width: 100%;
+        ::v-deep {
+            .el-form-item__label {
+                color: #000000;
+                font-size: 18px;
+                line-height: 44px;
+            }
+            .el-input__wrapper {
+                background: transparent;
+                box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.46) inset;
+            }
+        }
+        .input {
+            height: 44px;
+            font-size: 16px;
+        }
+    }
+    .popup-footer {
+        width: 100%;
+        display: flex;
+        padding-top: 2px;
+        div {
+            flex: 1;
+            background: #2199F8;
+            border-radius: 26px;
+            padding: 8px 13px;
+            font-size: 16px;
+            color: #fff;
+            text-align: center;
+            cursor: pointer;
+        }
+        .disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+        }
+        .cancel {
+            color: #666666;
+            background: none;
+            border: 1px solid #999999;
+            margin-right: 13px;
+        }
+    }
+}
+</style>
+
+<style lang="scss">
+.select-popper-orange {
+    .add-btn {
+        cursor: pointer;
+        width: 100%;
+        padding: 6px 16px;
+        box-sizing: border-box;
+        border-radius: 4px;
+        font-size: 16px;
+        color: #fff;
+        display: flex;
+        align-items: center;
+        background: linear-gradient(120deg, #92CFFF, #2199F8);
+        .add-icon {
+            padding-right: 4px;
+        }
+    }
+    .option-input {
+        margin-bottom: 20px;
+    }
+    .el-select-dropdown__wrap {
+        max-height: 180px;
+        .el-select-dropdown__item {
+            height: 32px;
+            line-height: 32px;
+        }
+    }
+}
+</style>

src/views/old_mini/plan/index.vue

@@ -1,10 +1,6 @@
 <template>
-    <div class="plan-page">
+    <div class="plan-page" :style="{ height: `calc(100vh - ${tabBarHeight}px)` }">
         <div class="plan-title">
-            <!-- <el-tabs v-model="activeName" class="demo-tabs">
-                <el-tab-pane label="专家处方" name="1"></el-tab-pane>
-                <el-tab-pane label="我的处方" name="2"></el-tab-pane>
-            </el-tabs> -->
             <div class="tabs">
                 <div class="tab" :class="{ active: activeTab === 'left' }" @click="setActiveTab('left')">专家处方</div>
                 <div class="tab" :class="{ active: activeTab === 'right' }" @click="setActiveTab('right')">
@@ -14,7 +10,7 @@
                 <div class="slider" :style="sliderStyle"></div>
             </div>
         </div>
-        <div class="plan-content">
+        <div class="plan-content" v-if="activeTab === 'left'">
             <div class="filter-wrap">
                 <div class="filter-item type-cascader">
                     <el-cascader v-model="typeVal" :options="typeOptions"></el-cascader>
@@ -50,7 +46,7 @@
                     </el-select>
                 </div>
             </div>
-            <div v-if="activeName === '1'" class="expert-prescription">
+            <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">
@@ -80,7 +76,7 @@
                                         {{ section.title }}
                                         <span class="parent-text">{{ section.parentTitle || "秋梢期" }}</span>
                                     </div>
-                                    <div class="title-r">
+                                    <div class="title-btn" @click="addToMyPlan">
                                         <el-icon color="#fff" size="14"><Plus /></el-icon>
                                     </div>
                                 </div>
@@ -89,16 +85,104 @@
                     </div>
                 </div>
             </div>
-            <div v-if="activeName === '2'" class="my-prescription">我的</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 class="l-btn">
+                        <el-icon color="#666666" class="btn-icon" size="16"><ChatDotRound /></el-icon>
+                        咨询专家
+                    </div>
+                </div>
+                <div class="bottom-r">全部添加</div>
+            </div>
+        </div>
+        <div class="plan-content my-recipe" v-if="activeTab === 'right'">
+            <div class="filter-wrap">
+                <div class="plan-box">
+                    <div
+                        class="plan-item"
+                        v-for="(item, index) in planList"
+                        :key="index"
+                        @click="handlePlanClick(index)"
+                        :class="{ active: activePlanIndex === index }"
+                        >
+                        {{ item.name }}
+                    </div>
+                </div>
+                <div class="plan-add" @click="newPlan">新增方案</div>
+            </div>
+            <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.title }}</span>
+                                </template>
+                                <el-menu-item
+                                    v-for="item in menu.children"
+                                    :key="item.id"
+                                    :index="`${menu.id}-${item.id}`"
+                                >
+                                    <el-anchor-link :href="item.href" :title="item.title" />
+                                </el-menu-item>
+                            </el-sub-menu>
+                        </el-menu>
+                    </el-anchor>
+                </div>
+                <div class="expert-content" ref="containerRef">
+                    <div v-for="(section, index) in contentData" :key="index" class="content-section">
+                        <div class="section-id" :id="section.targetId"></div>
+                        <record-item :record-item-data="section">
+                            <template #title>
+                                <div class="box-title">
+                                    <div class="title-l">
+                                        {{ section.title }}
+                                        <span class="parent-text">{{ section.parentTitle || "秋梢期" }}</span>
+                                    </div>
+                                    <div class="title-r">
+                                        <div class="btn-item del-btn">
+                                            <el-icon color="#fff" size="14"><Delete /></el-icon>
+                                        </div>
+                                        <div class="btn-item edit-btn">
+                                            <el-icon color="#fff" size="14"><Edit /></el-icon>
+                                        </div>
+                                    </div>
+                                </div>
+                            </template>
+                        </record-item>
+                    </div>
+                </div>
+            </div>
+            <!-- 底部 -->
+            <div class="fixed-bottom">
+                <div class="bottom-l">
+                    <div class="l-btn">
+                        <img class="btn-icon calculator-icon" src="@/assets/img/home/calculator.png" alt="">
+                        投入产出计算器
+                    </div>
+                </div>
+                <div class="bottom-r">新增农事</div>
+            </div>
         </div>
     </div>
+    <add-group ref="addGroupRef" />
 </template>
 
 <script setup>
 import { computed, ref } from "vue";
 import recordItem from "@/components/recordItem.vue";
+import addGroup from "./components/addGroup.vue";
+import { useStore } from "vuex";
+const store = useStore();
+
+const tabBarHeight = computed(() => store.state.home.tabBarHeight);
 
-const activeName = ref("1");
 const containerRef = ref(null);
 const handleClick = (e) => {
     e.preventDefault();
@@ -164,23 +248,23 @@ const typeOptions = ref([
     },
     {
         value: 11,
-        label: "琵琶",
+        label: "枇杷",
         children: [
             {
                 value: 12,
-                label: "琵琶1",
+                label: "枇杷1",
             },
             {
                 value: 13,
-                label: "琵琶2",
+                label: "枇杷2",
             },
             {
                 value: 14,
-                label: "琵琶3",
+                label: "枇杷3",
             },
             {
                 value: 15,
-                label: "琵琶4",
+                label: "枇杷4",
             },
         ],
     },
@@ -297,106 +381,7 @@ const contentData = ref([
         executeMain: "广州泽秾丰农资有限公司",
         storeShortName: "泽秾丰",
         serviceRegion: "广州市从化区荔枝博览园",
-        users: [
-            {
-                id: null,
-                orderId: null,
-                serviceType: null,
-                userType: null,
-                userId: 81881,
-                joinStatus: null,
-                icon: "https://birdseye-img.sysuimars.com/birdseye-look-mini/Group%201321316260.png",
-                userName: "飞鸟种植助手",
-                area: "",
-                point: "",
-                farmName: "",
-                selected: null,
-            },
-        ],
-        prescriptionList: [
-            {
-                name: "病虫",
-                pesticideFertilizerList: [
-                    {
-                        defaultDroneRatio: null,
-                        defaultName: "2.5%高效氯氟氰菊酯乳油",
-                        defaultRatio: 50000,
-                        id: null,
-                        muPrice: null,
-                        muUsage: 25.0,
-                        muUsage2: 25.0,
-                        ratio: 50000,
-                        ratio2: 5000,
-                        remark: "",
-                        usageMode: "",
-                        usageModeList: ["叶面施"],
-                        orderId: null,
-                        pesticideFertilizerCode: "1003",
-                        pesticideFertilizerId: "3",
-                        pesticideFertilizerName: "2.5%高效氯氟氰菊酯乳油",
-                        brand: "先正达劲彪",
-                        typeName: "病虫",
-                        price: 10.699999999999999289457264239899814128875732421875,
-                        unit: "ml",
-                        executeStyle: null,
-                    },
-                    {
-                        defaultDroneRatio: null,
-                        defaultName: "80%代森锰锌可湿性粉剂",
-                        defaultRatio: 50000,
-                        id: null,
-                        muPrice: null,
-                        muUsage: 150.0,
-                        muUsage2: 150.0,
-                        ratio: 50000,
-                        ratio2: 5000,
-                        remark: "",
-                        usageMode: "",
-                        usageModeList: ["叶面施"],
-                        orderId: null,
-                        pesticideFertilizerCode: "1004",
-                        pesticideFertilizerId: "4",
-                        pesticideFertilizerName: "80%代森锰锌可湿性粉剂",
-                        brand: "利民化学",
-                        typeName: "病虫",
-                        price: 18,
-                        unit: "g",
-                        executeStyle: null,
-                    },
-                    {
-                        defaultDroneRatio: null,
-                        defaultName: "磷酸二氢钾",
-                        defaultRatio: 50000,
-                        id: null,
-                        muPrice: null,
-                        muUsage: 60.0,
-                        muUsage2: 60.0,
-                        ratio: 50000,
-                        ratio2: 5000,
-                        remark: "",
-                        usageMode: "",
-                        usageModeList: ["叶面施"],
-                        orderId: null,
-                        pesticideFertilizerCode: "1005",
-                        pesticideFertilizerId: "5",
-                        pesticideFertilizerName: "磷酸二氢钾",
-                        brand: " 国光",
-                        typeName: "营养",
-                        price: 5.5999999999999996447286321199499070644378662109375,
-                        unit: "g",
-                        executeStyle: null,
-                    },
-                ],
-            },
-        ],
-        conditionList: [
-            {
-                index: "1-1-002-02-02-02-01-0008",
-                name: "单树嫩叶率",
-                type: 1,
-                value: "0.2",
-            },
-        ],
+        attention: "当前为秋梢期，建议巡园，重点关注叶片、嫩梢等部位",
     },
     {
         targetId: "part2",
@@ -1315,10 +1300,30 @@ const contentData = ref([
         ],
     },
 ]);
+
+const planList = ref([{name: "方案1",}, {name: "方案2"}]);
+const activePlanIndex = ref(0);
+const handlePlanClick = (index) => {
+    activePlanIndex.value = index;
+};
+
+
+const addGroupRef = ref(null);
+// 新增方案
+function newPlan() {
+    addGroupRef.value.openClientPopup()
+}
+
+// 将专家处方添加到我的处方
+function addToMyPlan() {
+    addGroupRef.value.openClientPopup("edit")
+}
 </script>
 
 <style lang="scss" scoped>
 .plan-page {
+    position: relative;
+    height: calc(100vh - 50px);
     .plan-title {
         width: 158px;
         margin: 0 auto;
@@ -1441,6 +1446,53 @@ const contentData = ref([
             }
         }
     }
+    .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;
+        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: #2199F8;
+            border-radius: 20px;
+            color: #fff;
+            padding: 0 12px;
+        }
+    }
     .expert-prescription {
         display: flex;
         width: 100%;
@@ -1524,6 +1576,8 @@ const contentData = ref([
             width: calc(100% - 100px);
             height: 100%;
             overflow: auto;
+            padding-bottom: 80px;
+            box-sizing: border-box;
             .content-section {
                 position: relative;
                 .section-id {
@@ -1554,7 +1608,7 @@ const contentData = ref([
                         background: rgba(119, 119, 119, 0.1);
                     }
                 }
-                .title-r {
+                .title-btn {
                     width: 24px;
                     height: 24px;
                     border-radius: 50%;
@@ -1566,5 +1620,61 @@ const contentData = ref([
             }
         }
     }
+
+    .my-recipe {
+        .filter-wrap {
+            .plan-box {
+                display: flex;
+                overflow: auto;
+                white-space: nowrap;
+                align-items: center;
+                padding-left: 12px;
+                .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;
+                }
+            }
+            .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;
+            }
+        }
+        .title-r {
+            display: flex;
+            align-items: center;
+            .btn-item {
+                width: 24px;
+                height: 24px;
+                border-radius: 50%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                background: #2199F8;
+                &.del-btn {
+                    margin-right: 5px;
+                    background: #FF953D;
+                }
+            }
+        }
+    }
 }
 </style>