feat: 新增农事数据处理

src/views/addFarm/components/table.vue

@@ -3,14 +3,26 @@
         <div class="header">
             <div class="header-item">
                 <span>使用功效：</span>
-                <el-select class="select" v-model="value">
-                    <el-option v-for="item in list" :key="item.name" :label="item.name" :value="item.name" />
-                </el-select>
+                {{ pesticideFertilizerListItem.typeName }}
             </div>
             <div class="header-item">
-                <span>肥药名称：</span>
-                <el-select class="select" v-model="value">
+                <div class="header-title">肥药名称：</div>
+                <!-- <el-select class="select" v-model="value">
                     <el-option v-for="item in list" :key="item.name" :label="item.name" :value="item.name" />
+                </el-select> -->
+
+                <el-select
+                    @change="handlePesticideFertilizerChange"
+                    v-model="pesticideFertilizerListItem.pesticideFertilizerId"
+                    placeholder="请选择"
+                    class="select"
+                >
+                    <el-option
+                        v-for="item in pesticideFertilizersOptions"
+                        :key="item.id"
+                        :label="item.defaultName"
+                        :value="item.id"
+                    />
                 </el-select>
             </div>
         </div>
@@ -18,43 +30,25 @@
             <div class="th">
                 <div class="td"></div>
                 <div class="td">配比<span>(药剂：兑水量)</span></div>
-                <div class="td">施用方式</div>
+                <!-- <div class="td">施用方式</div> -->
                 <div class="td">单亩用量</div>
             </div>
             <div class="tr">
                 <div class="td">人工</div>
-                <div class="td">
-                    <el-select class="select" v-model="value">
-                        <el-option v-for="item in list" :key="item.name" :label="item.name" :value="item.name" />
-                    </el-select>
-                </div>
-                <div class="td">
-                    <el-select class="select" v-model="value">
-                        <el-option v-for="item in list" :key="item.name" :label="item.name" :value="item.name" />
-                    </el-select>
+                <div class="td input-class">
+                    <el-input  @change="emitVal" v-model="pesticideFertilizerListItem.ratio" placeholder="" size="small" />
                 </div>
-                <div class="td">
-                    <el-select class="select" v-model="value">
-                        <el-option v-for="item in list" :key="item.name" :label="item.name" :value="item.name" />
-                    </el-select>
+                <div class="td input-class">
+                    <el-input  @change="emitVal" v-model="pesticideFertilizerListItem.muUsage" placeholder="" size="small" />
                 </div>
             </div>
-            <div class="tr">
+            <div class="tr" v-show="hasFly">
                 <div class="td">无人机</div>
-                <div class="td">
-                    <el-select class="select" v-model="value">
-                        <el-option v-for="item in list" :key="item.name" :label="item.name" :value="item.name" />
-                    </el-select>
-                </div>
-                <div class="td">
-                    <el-select class="select" v-model="value">
-                        <el-option v-for="item in list" :key="item.name" :label="item.name" :value="item.name" />
-                    </el-select>
+                <div class="td input-class">
+                    <el-input  @change="emitVal" v-model="pesticideFertilizerListItem.ratio2" placeholder="" size="small" />
                 </div>
-                <div class="td">
-                    <el-select class="select" v-model="value">
-                        <el-option v-for="item in list" :key="item.name" :label="item.name" :value="item.name" />
-                    </el-select>
+                <div class="td input-class">
+                    <el-input  @change="emitVal" v-model="pesticideFertilizerListItem.muUsage2" placeholder="" size="small" />
                 </div>
             </div>
         </div>
@@ -62,20 +56,86 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
-
-const value = ref("营养");
-const list = ref([
-    {
-        name: "营养",
+import { ref, onMounted, watch } from "vue";
+const props = defineProps({
+    pesticideFertilizerList: {
+        type: Object,
+        default: () => {},
     },
-    {
-        name: "Action 2",
+    hasFly: {
+        type: Boolean,
+        default: true
     },
+    pIndex: {},
+    cIndex: {},
+});
+
+let pesticideFertilizerListItem = ref({
+    key: 1,
+    typeName: "",
+    muUsage: "",
+    muUsage2: "",
+    ratio: "",
+    ratio2: "",
+    remark: "",
+});
+
+watch(() => props.pesticideFertilizerList, (newVal, oldVal) => {
+    pesticideFertilizerListItem.value = props.pesticideFertilizerList
+})
+watch(() => props.hasFly, () => {})
+
+onMounted(() => {
+    pesticideFertilizerListItem.value = props.pesticideFertilizerList;
+});
+
+let pesticideFertilizersOptions = ref([
     {
-        name: "Action 3",
+        id: "null",
+        name: "芸苔素内酯 15000倍",
+        typeName: "30",
+        defaultRatio: null,
+        defaultDroneRatio: null,
+        unit: 0,
+        defaultName: "调节",
     },
 ]);
+
+VE_API.order.pesticideFertilizers().then(({ data }) => {
+    pesticideFertilizersOptions.value = data;
+});
+
+/**
+ * 选择药肥的时候修改订单中药肥pesticideFertilizerId 以外其他数据
+ * @param index
+ */
+const handlePesticideFertilizerChange = () => {
+    let obj = pesticideFertilizersOptions.value.filter(
+        (item) => pesticideFertilizerListItem.value.pesticideFertilizerId === item.id
+    )[0];
+    pesticideFertilizerListItem.value = {
+        ...pesticideFertilizerListItem.value,
+        typeName: obj.typeName,
+        unit: obj.unit,
+        defaultRatio: obj.defaultRatio,
+        usageModeList: obj.usageModeList,
+        ratio: obj.defaultRatio,
+        defaultName: obj.defaultName,
+        pesticideFertilizerName: obj.name,
+        pesticideFertilizerCode: obj.pesticideFertilizerCode,
+    };
+    console.log("ite", pesticideFertilizerListItem.value);
+};
+
+const emit = defineEmits(["updateTableData"])
+function emitVal() {
+    emit("updateTableData", props.pIndex, props.cIndex, pesticideFertilizerListItem.value)
+}
+
+function getItem() {
+    return pesticideFertilizerListItem.value
+}
+defineExpose({ getItem });
 </script>
 
 <style lang="scss" scoped>
@@ -87,6 +147,9 @@ const list = ref([
             display: flex;
             align-items: center;
             color: #727272;
+            .header-title {
+                flex: none;
+            }
         }
         .header-item + .header-item {
             margin-left: 36px;
@@ -95,33 +158,36 @@ const list = ref([
     .body {
         border: 1px solid #444444;
         border-radius: 5px;
-        .th{
+        .th {
             border-bottom: 1px solid #444444;
         }
-        .th,.tr{
+        .th,
+        .tr {
             display: flex;
             align-items: center;
             color: #727272;
             height: 46px;
             font-size: 16px;
-            .td{
+            .td {
                 text-align: center;
                 flex: 1;
-                span{
+                span {
                     font-size: 11px;
                     display: inline-block;
                 }
             }
-            .td + .td{
+            .td + .td {
                 border-left: 1px solid #444444;
+                height: 46px;
+                line-height: 46px;
             }
         }
-        .tr + .tr{
+        .tr + .tr {
             border-top: 1px solid #444444;
         }
     }
     .select {
-        width: 50px;
+        min-width: 110px;
         ::v-deep {
             .el-select__wrapper {
                 background: transparent;
@@ -134,5 +200,20 @@ const list = ref([
             }
         }
     }
+
+    .input-class {
+        ::v-deep {
+            .el-input {
+                width: 90%;
+            }
+            .el-input__wrapper {
+                background: transparent;
+                box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4) inset;
+            }
+            .el-input__inner {
+                color: #ffd489;
+            }
+        }
+    }
 }
 </style>

src/views/addFarm/index.vue

@@ -36,21 +36,64 @@
                             </div>
                         </div>
                         <template v-else>
-                            <div class="box-item">
-                                <div class="box-title">基本信息</div>
-                                <el-form class="box-form" :model="form">
-                                    <el-form-item label="农事名称">
-                                        <el-input v-model="form.name" />
-                                    </el-form-item>
-                                    <el-form-item label="农事目的">
-                                        <el-input v-model="form.mudi" />
-                                    </el-form-item>
-                                    <el-form-item label="触发条件">
-                                        <el-input v-model="form.tiaojian" />
-                                    </el-form-item>
-                                </el-form>
-                            </div>
-                            <div class="box-item" v-for="(item, index) in boxList" :key="index">
+                            <el-form class="box-form" ref="formRef" :model="dynamicValidateForm" :rules="rules">
+                                <div class="box-item">
+                                    <div class="box-title">基本信息</div>
+                                        <el-form-item label="农事名称" prop="name">
+                                            <el-input v-model="dynamicValidateForm.name" />
+                                        </el-form-item>
+                                        <el-form-item label="触发条件" prop="conditionRate">
+                                            <el-input v-model="dynamicValidateForm.conditionRate" />
+                                        </el-form-item>
+                                        <el-form-item label="执行时间" prop="executeDate">
+                                            <el-date-picker
+                                                class="item-input"
+                                                style="width: 100%"
+                                                value-format="YYYY-MM-DD"
+                                                v-model="dynamicValidateForm.executeDate"
+                                                type="date"
+                                                :clearable="false"
+                                                placeholder="选择日期"
+                                            />
+                                        </el-form-item>
+                                </div>
+                                <div class="usage-mode box-form">
+                                    <el-form-item label="施用方式" prop="usageMode">
+                                        <div class="mode-select">
+                                        <el-select
+                                            v-model="dynamicValidateForm.usageMode"
+                                            placeholder="请选择"
+                                             prop="usageMode"
+                                            style="width: 100%"
+                                        >
+                                            <el-option
+                                                v-for="(usage, uId) in allUsageModeList"
+                                                :key="uId"
+                                                :label="usage"
+                                                :value="usage"
+                                            />
+                                        </el-select>
+                                    </div>
+                                        </el-form-item>
+                                    <!-- <div class="usage-title">施用方式</div>
+                                    <div class="mode-select">
+                                        <el-select
+                                            v-model="dynamicValidateForm.usageMode"
+                                            placeholder="请选择"
+                                             prop="usageMode"
+                                            style="width: 100%"
+                                        >
+                                            <el-option
+                                                v-for="(usage, uId) in allUsageModeList"
+                                                :key="uId"
+                                                :label="usage"
+                                                :value="usage"
+                                            />
+                                        </el-select>
+                                    </div> -->
+                                </div>
+                            </el-form>
+                            <div class="box-item" v-for="(item, index) in dynamicValidateForm.prescriptionList" :key="index">
                                 <div class="box-title border-none">
                                     {{ item.label }}处方
                                     <div class="add-text" @click="handleAdd(index)">
@@ -58,13 +101,13 @@
                                         添加药物
                                     </div>
                                 </div>
-                                <div class="box-item-children" v-for="(ele,idx) in item.children" :key="idx + 'id'">
+                                <div class="box-item-children" v-for="(ele,idx) in item.pesticideFertilizerList" :key="idx + 'id'">
                                     <div class="index">{{ idx < 10 ? "0" + (idx + 1) : idx + 1 }}</div>
-                                    <custom-table></custom-table>
+                                    <custom-table @updateTableData="updateTableData" :pIndex="index" :cIndex="idx" :key="index+'-' + idx" :pesticideFertilizerList="ele" :hasFly="dynamicValidateForm.usageMode === '叶面施'"></custom-table>
                                     <div class="box-textarea">
                                         <el-input
                                             class="textarea"
-                                            v-model="textarea"
+                                            v-model="ele.remark"
                                             :rows="1"
                                             type="textarea"
                                             placeholder="用药注意事项备注"
@@ -72,7 +115,7 @@
                                     </div>
                                     <div class="btn-group">
                                         <div class="delete" @click="handleDelete(index,idx)">删除</div>
-                                        <div>重置</div>
+                                        <div @click="resetItem(index,idx)">重置</div>
                                     </div>
                                 </div>
                             </div>
@@ -129,7 +172,7 @@
 </template>
 
 <script setup>
-import { onMounted, ref } from "vue";
+import { onMounted, ref, reactive } from "vue";
 import { ElMessage } from "element-plus";
 import fnHeader from "@/components/fnHeader.vue";
 import steps from "./components/steps.vue";
@@ -139,6 +182,7 @@ import { deepClone } from "@/common/commonFun";
 import chartBox from "@/components/chartBox.vue";
 import { useRouter, useRoute } from "vue-router";
 import { useStore } from "vuex";
+import eventBus from "@/api/eventBus";
 let store = useStore();
 let farmMap = new FarmMap();
 
@@ -189,31 +233,140 @@ const goBack = () => {
 //确定/下发农事
 const handleOk = () => {
     if (active.value) {
-        console.log("123");
+        formRef.value.validate((valid) => {
+            if (valid) {
+                console.log("123", dynamicValidateForm);
+                // const res = tableData.value.getItem
+                // console.log('res', res);
+            }
+        })
     } else {
         active.value = 1;
         const arr = checkData.value.filter((item) => item.active);
-        boxList.value = deepClone(arr);
+        // boxList.value = deepClone(arr);
+
+        dynamicValidateForm.prescriptionList = arr.map(item => ({
+            name: item.label,
+            label: item.label,
+            active: item.active,
+            pesticideFertilizerList: [
+                    {
+                        key: 1,
+                        typeName: "",
+                        muUsage: "",
+                        muUsage2: "",
+                        ratio: "",
+                        ratio2: "",
+                        remark: "",
+                    },
+                ]
+            }))
     }
 };
 
-const form = ref({
-    name: "梢期防虫",
-    mudi: "防治荔枝病虫害",
-    tiaojian: "单树花带叶率 40％",
+
+// 表单
+const formRef = ref();
+
+const allUsageModeList = (["叶面施", "根部施"])
+const dynamicValidateForm = reactive({
+    name: "",
+    conditionRate: "",
+    executeDate: "",
+    usageMode: "",
+    prescriptionList: [
+        {
+            name: "",
+            pesticideFertilizerList: [
+                {
+                    key: 1,
+                    typeName: "",
+                    muUsage: "",
+                    muUsage2: "",
+                    ratio: "",
+                    ratio2: "",
+                    remark: "",
+                },
+            ],
+        },
+    ],
 });
+
+const rules = {
+    name: [
+        {
+            required: true,
+            message: "请输入农事名称",
+            trigger: "blur",
+        },
+    ],
+    conditionRate: [
+        {
+            required: true,
+            message: "请输入触发条件",
+            trigger: "blur",
+        },
+    ],
+    executeDate: [
+        {
+            required: true,
+            message: "请选择执行时间",
+            trigger: "blur",
+        },
+    ],
+    usageMode: [
+        {
+            required: true,
+            message: "请选择施用方式",
+            trigger: "change",
+        },
+    ],
+}
 const textarea = ref("");
 
-const boxList = ref([]);
 //添加
 const handleAdd = (index) => {
-    boxList.value[index].children.push({ index: 1 });
+    dynamicValidateForm.prescriptionList[index].pesticideFertilizerList.push({ index: 1, 
+        name: "",
+        pesticideFertilizerList: [
+            {
+                key: 1,
+                typeName: "",
+                muUsage: "",
+                muUsage2: "",
+                ratio: "",
+                ratio2: "",
+                remark: "",
+            },
+        ]
+    } );
 };
 //删除
 const handleDelete = (index,childIndex) => {
-    if (boxList.value[index].children.length === 1) return ElMessage.warning("最少保留一个处方");
-    boxList.value[index].children.splice(childIndex, 1);
+    // if (boxList.value[index].children.length === 1) return ElMessage.warning("最少保留一个处方");
+    dynamicValidateForm.prescriptionList[index].pesticideFertilizerList.splice(childIndex, 1);
 };
+
+// 重置
+function resetItem(index,childIndex) {
+    dynamicValidateForm.prescriptionList[index].pesticideFertilizerList[childIndex] = {
+        key: 1,
+        pesticideFertilizerId: "",
+        typeName: "",
+        muUsage: "",
+        muUsage2: "",
+        ratio: "",
+        ratio2: "",
+        remark: "",
+    }
+}
+
+function updateTableData(pIndex, cIndex, tableData) {
+    dynamicValidateForm.prescriptionList[pIndex].pesticideFertilizerList[cIndex] = {
+        ...tableData
+    }
+}
+
 </script>
 
 <style lang="scss" scoped>
@@ -332,21 +485,6 @@ const handleDelete = (index,childIndex) => {
                             }
                         }
 
-                        // 编辑处方
-                        .box-form {
-                            ::v-deep {
-                                .el-form-item__label {
-                                    color: #9f9f9f;
-                                }
-                                .el-input__wrapper {
-                                    background: transparent;
-                                    box-shadow: 0 0 0 1px #9f9f9f;
-                                    .el-input__inner {
-                                        color: #fff;
-                                    }
-                                }
-                            }
-                        }
 
                         .box-item-children {
                             border: 1px solid #444444;
@@ -408,6 +546,60 @@ const handleDelete = (index,childIndex) => {
                         margin-top: 16px;
                     }
                 }
+
+                
+                        // 编辑处方
+                .box-form {
+                    ::v-deep {
+                        .el-form-item {
+                            width: 100%;
+                        }
+                        .el-form-item__label {
+                            font-size: 16px;
+                            color: #9f9f9f;
+                        }
+                        .el-input__wrapper {
+                            background: transparent;
+                            box-shadow: 0 0 0 1px #9f9f9f;
+                            .el-input__inner {
+                                color: #fff;
+                            }
+                        }
+                    }
+                }
+                
+                        
+                .usage-mode {
+                    display: flex;
+                    align-items: center;
+                    color: #9f9f9f;
+                    padding: 16px 21px 20px 12px;
+                    border: 1px solid #363636;
+                    background: rgba(255, 255, 255, 0.04);
+                    border-radius: 8px;
+                    font-size: 16px;
+                    margin: 16px 0;
+                    width: 100%;
+                    box-sizing: border-box;
+                    .usage-title {
+                        padding-right: 20px;
+                    }
+                    .mode-select {
+                        flex: 1;
+                    }
+                    ::v-deep {
+                        .el-select__wrapper {
+                            background: transparent;
+                            box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
+                        }
+                        .el-select__placeholder,
+                        .el-select__caret {
+                            // color: #ffd489;
+                            color: #fff;
+                        }
+                    }
+                }
+
                 .footer {
                     width: 100%;
                     height: 58px;

src/views/home/album/index.vue

@@ -326,19 +326,31 @@ const toExpert = (expertName) =>{
     router.push('/expert_page?name='+expertName)
 }
 
+
+eventBus.on('garden:organId',getListData)
+
+const areaIdVal = ref(null)
+eventBus.on('area:id', ({areaId,farmId}) => {
+    areaIdVal.value = areaId
+    getFarmLog()
+})
+
 onMounted(() => {
-    sampleId.value = 766;
-    farmId.value = 88388;
+    // farmId.value = 88388;
+
 
     // window.addEventListener("scroll", debouncedHandleScroll);
 
+    window.addEventListener("scroll", debouncedHandleScroll);
+});
+
+function getListData(farmIdVal) {
+    farmId.value = farmIdVal
     getFarmDetail(farmId.value);
     getFarmWorkList(farmId.value);
     getFarmLog()
-    window.addEventListener("scroll", debouncedHandleScroll);
-});
+}
 
-const sampleId = ref(null);
 const farmId = ref(null);
 
 
@@ -350,7 +362,7 @@ onUnmounted(() => {
 // 果园日志
 const indicatorChartData = ref({})
 const getFarmLog = () => {
-    VE_API.farm.fetchFarmLog({id: "96966", farmId: 766}).then(({data,code}) => {
+    VE_API.farm.fetchFarmLog({id: areaIdVal.value, farmId: farmId.value}).then(({data,code}) => {
       if(code === 0){
         indicatorChartData.value = data
         eventBus.emit('chart:updateOption', indicatorChartData.value)