fix: 详情页专家处方

src/views/addFarm/index.vue

@@ -74,7 +74,7 @@
                                     </el-form-item>
                                     <el-form-item label="服务亩数" prop="regionId">
                                         <div class="mode-select">
-                                            {{ area }}
+                                            {{ dynamicValidateForm.area }}亩
                                         </div>
                                     </el-form-item>
                                 </div>
@@ -150,7 +150,7 @@
                         </template>
                     </div>
                     <div class="footer">
-                        <div class="button" @click="handleOk">{{ active === 0 ? "确定" : "下发农事" }}</div>
+                        <div class="button" @click="handleOk">{{ active === 0 ? "确定" : (isAdd ? "新增农事" : "下发农事") }}</div>
                     </div>
                 </chart-box>
             </div>
@@ -230,9 +230,8 @@ const mapRef = ref();
 const farmId = sessionStorage.getItem("farmId");
 
 // 所选蓝色分区的面积
-const area = ref(null);
 const getArea = (val) => {
-    area.value = val.toFixed(2) + "亩";
+    dynamicValidateForm.area = val.toFixed(2);
 };
 // 是否为新增
 const isAdd = ref(true);
@@ -265,7 +264,9 @@ const getAreaList = (callback) => {
         // } else {
         //     regionId.value = workItemData.value.regionId
         // }
-        changeRegion(dynamicValidateForm.regionId);
+        if (isAdd.value) {
+            changeRegion(dynamicValidateForm.regionId);
+        }
         callback && callback();
     });
 };
@@ -277,6 +278,12 @@ function getList() {
         dynamicValidateForm.name = workItemData.value.farmWorkName
         dynamicValidateForm.conditionRate = workItemData.value.condition
         console.log('workItemData.value', dynamicValidateForm);
+
+        farmMap.initData(workItemData.value.farmId, workItemData.value.regionId)
+        farmMap.getBlueRegion({gardenId:  workItemData.value.farmId, regionId: workItemData.value.regionId}, (e) => {
+                checkedArea.value = workItemData.value.executeBlueZones.length === e
+                farmMap.setBlueRegion(workItemData.value.executeBlueZones)
+            });
     })
 }
 
@@ -295,7 +302,7 @@ const getFarmObj = () => {
 // 切换分区
 const checkedArea = ref(false);
 const changeRegion = (e) => {
-    area.value = 0;
+    dynamicValidateForm.area = 0;
     checkedArea.value = false;
     farmMap.initData(farmId, dynamicValidateForm.regionId)
     farmMap.getBlueRegion({ gardenId: farmId, regionId: e });
@@ -372,7 +379,7 @@ async function submitForm() {
         // 新增农事
         res = await VE_API.farm.saveFarmWork(data);
     } else {
-        data = {...data, orderId: orderIdVal.value, orderStatus: 1,}
+        data = {...data, orderStatus: 1,}
         res = await VE_API.farm.confirm(data);
     }
     if (res?.code == 0) {

src/views/workDetail/components/boxClass.scss

@@ -485,11 +485,23 @@
 
         .item-table {
             margin-top: 8px;
-            border: 1px solid rgba(33, 153, 248, 0.5);
+            // border: 1px solid rgba(33, 153, 248, 0.5);
             // border-top: 0;
             // border-bottom: 0;
             border-radius: 4px;
             color: #333333;
+            ::v-deep {
+                .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
+                    background: transparent;
+                }
+                .el-table {
+                    border: 1px solid #444444;
+                    border-radius: 4px 4px 0 0 ;
+                    background: transparent;
+                    // border-bottom: 0;
+                    --el-table-border: #444444;
+                }
+            }
 
             &.has-wrap-table {
                 ::v-deep {
@@ -527,11 +539,6 @@
                         //         border-right: 1px solid rgba(33, 153, 248, 0.5);
                         //     }
                     }
-                    .el-table {
-                        border: 1px solid rgba(33, 153, 248, 0.5);
-                        border-radius: 4px 4px 0 0 ;
-                        // border-bottom: 0;
-                    }
                 }
                 .remark-text {
                     border: 1px solid rgba(33, 153, 248, 0.5);
@@ -552,34 +559,37 @@
             }
             ::v-deep {
                 .el-table {
-                    color: rgba(0, 0, 0, 0.4);
+                    color: #CECECE;
+                }
+                .el-table__inner-wrapper:before {
+                    background: transparent;
                 }
                 .el-table th.el-table__cell {
                     padding: 4px 3px;
                 }
                 .el-table thead {
-                    color: rgba(33, 153, 248, 0.6);
+                    color: #727272;
                     font-weight: normal !important;
                 }
                 .el-table .el-table__header th.el-table__cell {
-                    background: #e0f2ff !important;
+                    background: rgba(255, 255, 255, 0.04) !important;
                 }
                 .el-table tr {
-                    background: #f1f9ff;
+                    background: transparent;
                 }
                 .el-table--default .el-table__cell {
-                    padding: 4px 0;
+                    // padding: 4px 0;
                 }
                 .el-table--default .cell {
                     padding: 0px 2px;
-                    font-size: 11px;
+                    font-size: 14px;
                     font-weight: normal;
                 }
                 .el-table__header, .el-table__body {
                     width: auto !important;
                 }
                 .el-table__header .cell {
-                    line-height: 13px;
+                    line-height: 18px;
                 }
                 .el-table td.el-table__cell {
                     border-color: rgba(33, 153, 248, 0.5);

src/views/workDetail/components/prescriptionBox.vue

@@ -60,7 +60,7 @@
                     <div v-else>
                         <div class="info-item">
                             <div class="info-name">触发条件：</div>
-                            <div class="info-value">{{ infoItem.farmWorkLibName }}</div>
+                            <div class="info-value">{{ infoItem.condition }}</div>
                         </div>
                         <div class="info-item">
                             <div class="info-name">执行时间：</div>
@@ -76,145 +76,51 @@
                     <div class="recipe-box">
                         <div class="recipe-title">
                             <div class="recipe-name">药物处方</div>
-                            <div class="recipe-btn" @click="addDomain">
-                                <el-icon class="icon"><Plus /></el-icon>新增药物
-                            </div>
                         </div>
-                        <custom-table type="0" @handleDelete="removeDomain" :tableHeader="tableHeader" :tableData="dynamicValidateForm.domains"></custom-table>
-                        <!-- <div class="recipe-item">
-                            <div class="recipe-form">
-                                <el-form
-                                    ref="formRef"
-                                    style="max-width: 600px"
-                                    :model="dynamicValidateForm"
-                                    class="demo-dynamic"
+                        <div class="usage-mode">
+                            施用方式：<span>{{ prescriptioData.usageMode }}</span>
+                        </div>
+                        <!-- <custom-table type="0" @handleDelete="removeDomain" :tableHeader="tableHeader" :tableData="dynamicValidateForm.domains"></custom-table> -->
+                        <div class="new-wrap">
+                            <div class="new-title">
+                                <div class="title-1"><div class="table-name">使用功效</div></div>
+                                <div class="title-2"><div class="table-name">肥药名称</div></div>
+                                <div class="title-3"><div class="table-name">执行方式</div></div>
+                                <div class="title-4"><div class="table-name">药肥配比</div></div>
+                                <div class="title-5"><div class="table-name">单亩用量</div></div>
+                            </div>
+                            <div
+                                class="new-table-wrap"
+                                v-for="(prescriptionItem, prescriptionI) in prescriptioData.prescriptionList"
+                                :key="prescriptionI"
+                            >
+                                <div
+                                    class="new-prescription"
+                                    v-for="(subP, subI) in prescriptionItem.pesticideFertilizerList"
+                                    :key="subI"
                                 >
-                                    <el-form-item
-                                        v-for="(domain, index) in dynamicValidateForm.domains"
-                                        :key="domain.key"
-                                        :prop="'domains.' + index + '.value'"
-                                    >
-                                        <div class="form-box">
-                                            <div class="form-index">{{ formatIndex(index) }}</div>
-                                            <div class="box-item" v-if="domain.typeName">
-                                                <div class="form-l">使用功效</div>
-                                                <div class="form-r r-text">
-                                                    {{ domain.typeName }}
-                                                </div>
-                                            </div>
-                                            <div class="box-item">
-                                                <div class="form-l">肥药名称</div>
-                                                <div class="form-r">
-                                                    <el-select
-                                                        @change="handlePesticideFertilizerChange(index)"
-                                                        v-model="domain.pesticideFertilizerId"
-                                                        placeholder="请选择"
-                                                        style="width: 140px"
-                                                    >
-                                                        <el-option
-                                                            v-for="item in pesticideFertilizersOptions"
-                                                            :key="item.id"
-                                                            :label="item.defaultName"
-                                                            :value="item.id"
-                                                        />
-                                                    </el-select>
-                                                </div>
-                                            </div>
-                                            <div class="form-title">人工方式</div>
-                                            <div class="box-item sub-item">
-                                                <div class="form-l has-sub">
-                                                    <div class="main-name">肥药配比</div>
-                                                    <div class="sub-name">(药剂:兑水量)</div>
-                                                </div>
-                                                <div class="form-r input-box text-center">
-                                                    <el-input
-                                                        v-model="domain.ratio"
-                                                        style="width: 140px"
-                                                        placeholder="请输入"
-                                                    />
-                                                </div>
-                                            </div>
-                                            <div class="box-item sub-item">
-                                                <div class="form-l">施用方式</div>
-                                                <div class="form-r">
-                                                    <el-select
-                                                        v-model="domain.usageMode"
-                                                        placeholder="请选择"
-                                                        style="width: 140px"
-                                                    >
-                                                        <el-option
-                                                            v-for="(usage, uId) in domain.usageModeList"
-                                                            :key="uId"
-                                                            :label="usage"
-                                                            :value="usage"
-                                                        />
-                                                    </el-select>
-                                                </div>
-                                            </div>
-                                            <div class="box-item sub-item">
-                                                <div class="form-l has-sub">
-                                                    <div class="main-name">单亩用量</div>
-                                                    <div class="sub-name">(亩数:药剂)</div>
-                                                </div>
-                                                <div class="form-r input-box text-center">
-                                                    <el-input
-                                                        v-model="domain.muUsage"
-                                                        style="width: 140px"
-                                                        placeholder="请输入"
-                                                    />
-                                                </div>
-                                            </div>
-                                            <div class="form-title">无人机方式</div>
-                                            <div class="box-item sub-item">
-                                                <div class="form-l has-sub">
-                                                    <div class="main-name">肥药配比</div>
-                                                    <div class="sub-name">(药剂:兑水量)</div>
-                                                </div>
-                                                <div class="form-r input-box text-center">
-                                                    <el-input
-                                                        v-model="domain.muUsage2"
-                                                        style="width: 140px"
-                                                        placeholder="请输入"
-                                                    />
-                                                </div>
-                                            </div>
-                                            <div class="box-item sub-item">
-                                                <div class="form-l has-sub">
-                                                    <div class="main-name">单亩用量</div>
-                                                    <div class="sub-name">(亩数:药剂)</div>
-                                                </div>
-                                                <div class="form-r input-box text-center">
-                                                    <el-input
-                                                        v-model="domain.ratio2"
-                                                        style="width: 140px"
-                                                        placeholder="请输入"
-                                                    />
-                                                </div>
-                                            </div>
-                                            <div class="input-box">
-                                                <el-input
-                                                    v-model="domain.remark"
-                                                    style="width: 100%"
-                                                    placeholder="备注：用药注意事项"
-                                                />
+                                    <div class="new-table">
+                                        <div class="line-l">
+                                            <div class="line-1 title-1">{{ subP.typeName }}</div>
+                                            <div class="line-2">{{ subP.defaultName }}</div>
+                                        </div>
+                                        <div class="line-r" :class="{'has-border': prescriptioData.usageMode === '叶面施'}">
+                                            <div class="line-3">
+                                                <div class="sub-line title-3" :class="{'execute-line': prescriptioData.usageMode === '叶面施'}">人工</div>
+                                                <div class="sub-line title-4">1:{{ subP.ratio }}{{ subP.unit }}</div>
+                                                <div class="sub-line title-5">{{ subP.muUsage }}{{ subP.unit }}</div>
                                             </div>
-                                            <div class="action-btn">
-                                                <el-button class="btn delete-btn" @click.prevent="removeDomain(domain)">
-                                                    删除
-                                                </el-button>
-                                                <el-button
-                                                    type="primary"
-                                                    class="btn"
-                                                    @click.prevent="resetItemForm(index)"
-                                                >
-                                                    重置
-                                                </el-button>
+                                            <div class="line-4" v-if="prescriptioData.usageMode === '叶面施'">
+                                                <div class="sub-line title-3 execute-line">无人机</div>
+                                                <div class="sub-line title-4">{{ subP.ratio2 ? subP.ratio2 : "---" }}</div>
+                                                <div class="sub-line title-5">{{ subP.muUsage2 ? subP.muUsage2 : "---" }}</div>
                                             </div>
                                         </div>
-                                    </el-form-item>
-                                </el-form>
+                                    </div>
+                                    <div class="note-text" v-if="subP.remark">{{ subP.remark }}</div>
+                                </div>
                             </div>
-                        </div> -->
+                        </div>
                     </div>
                 </div>
                 <!-- <div class="prescription-item" v-else>
@@ -525,6 +431,16 @@ const remove = () => {
             }
         }
     }
+    .usage-mode {
+        display: flex;
+        align-items: center;
+        font-size: 16px;
+        color: #727272;
+        padding: 2px 0 12px 0;
+        span {
+            color: #fff;
+        }
+    }
 }
 .prescription-result {
     position: relative;
@@ -563,4 +479,96 @@ const remove = () => {
         }
     }
 }
+.new-wrap {
+    border-radius: 5px;
+    text-align: center;
+    border: 1px solid #444444;
+    .new-title {
+        background: rgba(255, 255, 255, 0.04);
+        border-radius: 5px 5px 0 0;
+        display: flex;
+        color: #727272;
+        // justify-content: space-around;
+        padding: 5px 6px;
+        font-size: 14px;
+        .table-name {
+            width: 40px;
+            font-size: 14px;
+            margin: 0 auto;
+        }
+    }
+
+    .title-1 {
+        width: 62px;
+    }
+    .title-2 {
+        flex: 1;
+    }
+    .title-3 {
+        width: 58px;
+    }
+    .title-4 {
+        width: 68px;
+    }
+    .title-5 {
+        width: 68px;
+    }
+    .new-table-wrap {
+        .new-prescription {
+            padding: 0 8px;
+            .new-table {
+                display: flex;
+                align-items: center;
+                // border: 1px solid #444444;
+                border-radius: 5px;
+                color: #CECECE;
+                font-size: 16px;
+                .line-l {
+                    display: flex;
+                    flex: 1;
+                    padding: 8px 0;
+                    .line-2 {
+                        flex: 1;
+                        padding: 0 2px;
+                    }
+                }
+                .line-r {
+                    padding: 8px 0;
+                    &.has-border {
+                        border-left: 1px solid rgba(33, 153, 248, 0.5);
+                    }
+                    .line-3 {
+                        display: flex;
+                        align-items: center;
+                    }
+                    .sub-line {
+                        padding: 10px 0;
+                    }
+                    .line-4 {
+                        display: flex;
+                        align-items: center;
+                        border-top: 1px solid rgba(33, 153, 248, 0.5);
+                    }
+                    .execute-line {
+                        border-right: 1px solid rgba(33, 153, 248, 0.5);
+                    }
+                }
+
+            }
+            .note-text {
+                // margin: 8px 0 4px 0;
+                color: #9F9F9F;
+                background: rgba(255, 255, 255, 0.05);
+                padding: 6px 8px;
+                border-radius: 5px;
+                text-align: left;
+                font-size: 16px;
+            }
+        }
+        .new-prescription + .new-prescription {
+            margin-top: 8px;
+            border-top: 1px solid #444444;
+        }
+    }
+}
 </style>

src/views/workDetail/components/serviceBox.vue

@@ -1,19 +1,19 @@
 <template>
     <div class="work-item" :class="{ dark: progress === 0 }">
-        <div class="work-line">
+        <!-- <div class="work-line">
             <div class="line-box">
                 <div class="line-dotted">
                     <div class="dotted-inset"></div>
                 </div>
             </div>
-        </div>
+        </div> -->
         <div class="work-info">
-            <img v-if="progress === 1" class="todo-img" src="@/assets/img/gallery/todo.png" />
-            <img v-if="progress === 2 || progress === 3 || progress === 4" class="done-img" src="@/assets/img/gallery/done.png" />
-            <div class="card-item-title">
+            <!-- <img v-if="progress === 1" class="todo-img" src="@/assets/img/gallery/todo.png" />
+            <img v-if="progress === 2 || progress === 3 || progress === 4" class="done-img" src="@/assets/img/gallery/done.png" /> -->
+            <!-- <div class="card-item-title">
                 <span class="dotted"></span>农资报价
                 <span class="real-text" v-if="progress === 2 || progress === 3 || progress === 4">(大禹科技公司)</span>
-            </div>
+            </div> -->
             <div class="prescription-box">
                 <div class="prescription-item" v-if="progress === 1 && ROLETYPE == '2'">
                     <div class="service-time">
@@ -28,7 +28,7 @@
                         </div>
                     </div>
                     <div class="sub-title">
-                        <div class="service-name">报价处方</div>
+                        报价处方
                     </div>
                     <div class="recipe-item">
                         <div class="recipe-form">
@@ -176,7 +176,7 @@
 
                 <div v-else>
                       <div class="sub-title">
-                          <div class="service-name">报价处方</div>
+                        报价处方
                       </div>
                     <div class="item-table">
                         <el-table
@@ -197,7 +197,7 @@
                                     </div>
                                 </template>
                             </el-table-column>
-                            <el-table-column align="center" prop="ratio" label="配比" width="52">
+                            <el-table-column align="center" prop="ratio" label="配比" width="62">
                                 <template #default="scope">
                                     <div v-if="scope.row.executeStyle === 1">
                                         <!-- <div>{{`1${scope.row.unit}:${scope.row.ratio || scope.row.defaultRatio}${scope.row.unit}`}}</div> -->
@@ -210,16 +210,16 @@
                                         <div>{{`1:${scope.row.ratio2 || scope.row.defaultRatio}${scope.row.unit}`}}</div>
                                     </div>
                                     <div v-else>
-                                        <div>{{`1${scope.row.unit}:${scope.row.defaultRatio}${scope.row.unit}`}}</div>
+                                        <div>{{`1:${scope.row.defaultRatio}${scope.row.unit}`}}</div>
                                     </div>
                                 </template>
                             </el-table-column>
-                            <el-table-column prop="muUsage" label="单亩用量" width="42">
+                            <el-table-column prop="muUsage" label="单亩用量" width="46">
                                 <template #default="scope">
                                     {{ scope.row.muUsage ? scope.row.muUsage + scope.row.unit : "---" }}
                                 </template>
                             </el-table-column>
-                            <el-table-column align="center" prop="muPrice" label="亩单价" width="48">
+                            <el-table-column align="center" prop="muPrice" label="亩单价" width="58">
                               <template #default="scope">
                                   <div>{{ scope.row.muPrice ? scope.row.muPrice + '元' : '---' }} </div>
                                 </template>
@@ -243,7 +243,8 @@ import { useStore } from "vuex";
 import { deepClone } from "@/common/commonFun";
 const store = useStore();
 
-const ROLETYPE = store.state.app.curRole
+// const ROLETYPE = store.state.app.curRole
+const ROLETYPE = '2'
 
 const checkService = ref(true);
 const props = defineProps({

src/views/workDetail/index.vue

@@ -17,12 +17,20 @@
                             <component v-if="workList && workList.length" :is="components[currentComponent]" :prescriptioData="workList[0]" />
                         </div>
                         <!-- <div class="button">确认下发</div> -->
-                        <div class="box-item">
+                        <div class="box-item" v-if="workList && workList.length">
                             <div class="box-title">
                                 农资报价
-                                <el-icon class="icon-arrow" size="18"><ArrowUpBold /></el-icon>
+                                <!-- <el-icon class="icon-arrow" size="18"><ArrowUpBold /></el-icon> -->
                             </div>
-                            <custom-table type="0" :tableHeader="tableHeader" :tableData="tableData" hideText></custom-table>
+                            <!-- <custom-table type="0" :tableHeader="tableHeader" :tableData="tableData" hideText></custom-table> -->
+                            <service-box
+                                :boxId="workList[0].farmWorkLibId"
+                                        :progress="workList[0].orderStatus"
+                                        :pesticideFertilizers="workList[0].pesticideFertilizers"
+                                        :users="workList[0].users"
+                                        :serviceData="workList[0]"
+                                        :executeDate="workList[0].executeDate">
+                            </service-box>
                         </div>
                     </div>
                 </chart-box>
@@ -70,6 +78,7 @@ import { ElMessage } from "element-plus";
 import fnHeader from "@/components/fnHeader.vue";
 import customTable from "./components/table.vue";
 import prescriptionBox from './components/prescriptionBox'
+import serviceBox from './components/serviceBox'
 import AreaMap from "./areaMap";
 import chartBox from "@/components/chartBox.vue";
 import { useRouter, useRoute } from "vue-router";
@@ -259,6 +268,9 @@ const goBack = () => {
                         }
                         
                     }
+                    .box-item + .box-item {
+                        margin-top: 12px;
+                    }
                 }
                 .button {
                     font-size: 16px;