From 749daae26edcbbd1bf63e653ac0a0030a2f50cac Mon Sep 17 00:00:00 2001
From: zhoulinf <2507241354@qq.com>
Date: Thu, 12 Jun 2025 10:26:29 +0800
Subject: [PATCH] =?UTF-8?q?task#6524=20=E6=8A=A5=E5=A4=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/report.js                             |  37 +++
 src/utils/map.js                              |   4 +-
 .../report/components/report-list-item.vue    |  46 ++-
 src/views/report/components/service-item.vue  |  15 +-
 src/views/report/reportIndex.vue              | 276 ++++++++++++------
 5 files changed, 261 insertions(+), 117 deletions(-)
 create mode 100644 src/api/report.js

diff --git a/src/api/report.js b/src/api/report.js
new file mode 100644
index 00000000..927e1cef
--- /dev/null
+++ b/src/api/report.js
@@ -0,0 +1,37 @@
+import request from '@/utils/http'
+// 根据订单 获取报备类型
+export function getReportListByOrder(key){
+  return request({
+    url: '/order/baseDriverReportConfigs/getByOrderId',
+    method:'GET',
+    params: key
+  })
+}
+
+// 添加报备
+export function newOrderReporting(data){
+  return request({
+    url: '/supplierAppV2/dispatchApp/order/newOrderReporting',
+    method:'POST',
+    contentType: 'application/json',
+    data
+  })
+}
+
+// 获取报备列表
+export function reportHistory(data){
+  return request({
+    url: '/supplierAppV2/dispatchApp/order/reportHistory',
+    method:'POST',
+    data
+  })
+}
+
+// 获取订单信息
+export function getOrderInfo(data){
+  return request({
+    url: '/supplierAppV2/dispatchApp/order/reportOrderDetail',
+    method:'POST',
+    data
+  })
+}
diff --git a/src/utils/map.js b/src/utils/map.js
index f7deaedc..b6b51fbd 100644
--- a/src/utils/map.js
+++ b/src/utils/map.js
@@ -45,7 +45,7 @@ export function getAddress(mapContext, lnglat) {
 
 // 输入提示
 export function searchFun(mapContext, cityCode, keyword) {
-  return new Promise((resolve, reject) => {
+  return new Promise((resolve) => {
     mapContext.plugin('AMap.AutoComplete', function(){
       var autoOptions = {
         city: cityCode || '全国',
@@ -58,7 +58,7 @@ export function searchFun(mapContext, cityCode, keyword) {
         if(result.info == 'OK') {
           resolve(result.tips)
         } else {
-          reject(result)
+          resolve([])
         }
       })
     })
diff --git a/src/views/report/components/report-list-item.vue b/src/views/report/components/report-list-item.vue
index b4ca8526..5ee3b3d8 100644
--- a/src/views/report/components/report-list-item.vue
+++ b/src/views/report/components/report-list-item.vue
@@ -1,35 +1,28 @@
 <template>
   <div class="bottom_wrap">
-    <div class="report_item">
-      <img class="report_icon" src="@/assets/report/report_delay.png" alt="">
-      <div class="report_title">救援延误</div>
-    </div>
-    <div class="report_item">
-      <img class="report_icon" src="@/assets/report/report_unconnect.png" alt="">
-      <div class="report_title">客户失联</div>
-    </div>
-    <div class="report_item">
-      <img class="report_icon" src="@/assets/report/report_cancel.png" alt="">
-      <div class="report_title">客户取消</div>
-    </div>
-    <div class="report_item">
-      <img class="report_icon" src="@/assets/report/report_address.png" alt="">
-      <div class="report_title">地址变更</div>
-    </div>
-    <div class="report_item">
-      <img class="report_icon" src="@/assets/report/report_fee.png" alt="">
-      <div class="report_title">费用报备</div>
-    </div>
-    <div class="report_item">
-      <img class="report_icon" src="@/assets/report/report_other.png" alt="">
-      <div class="report_title">其他报备</div>
+    <div class="report_item" v-for="(item, index) in reportList" @click="goReportHandler(item)" :key="index">
+      <img class="report_icon" :src="item?.iconUrl" alt="">
+      <div class="report_title">{{item.name}}</div>
     </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: "report-list-item"
+  name: "report-list-item",
+  data() {
+    return {
+      addressReportCode: '',
+
+    }
+  },
+  props: ['reportList'],
+  methods: {
+    goReportHandler(data) {
+      this.$emit('getReport', data);
+    },
+
+  }
 }
 </script>
 
@@ -38,14 +31,17 @@ export default {
   width: 100%;
   /*position: fixed;*/
   bottom: 0;
-  padding: 0 34px 20px;
+  /*padding: 0 34px 20px;*/
+  padding-bottom: 20px;
   display: flex;
   flex-wrap: wrap;
   background: #FFFFFF;
   box-shadow: 0px 0px 20px 0px rgba(53,73,93,0.2);
+  box-sizing: border-box;
   .report_item {
     width: 25%;
     margin-top: 20px;
+    text-align: center;
     .report_icon {
       width: 45px;
       height: 45px;
diff --git a/src/views/report/components/service-item.vue b/src/views/report/components/service-item.vue
index fe4f4c49..a7fdf706 100644
--- a/src/views/report/components/service-item.vue
+++ b/src/views/report/components/service-item.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="wrap">
     <div class="service_title">
-      <span class="name">故障平板拖车</span>
-      <span class="status">调度成功，等待发车备份</span>
+      <span class="name">{{orderInfo?.serviceName}}</span>
+      <span class="status">{{orderInfo?.orderStatusString}}</span>
     </div>
     <!--    <img class="report_line" src="@/assets/report/report_line.png" alt="">-->
     <div class="service_content">
@@ -10,11 +10,11 @@
         <img class="report_logo" src="@/assets/report/report_logo.png" alt="">
       </div>
       <div class="content_right">
-        <div class="order_code">单号：ZD20240878990</div>
-        <div class="company">单位：上海安昌汽车救援有限公司</div>
+        <div class="order_code">单号：{{orderInfo?.userOrderCode}}</div>
+        <div class="company">单位：{{orderInfo?.supplierName}}</div>
         <div class="driver_info">
-          <span class="driver_name">张师傅</span>
-          <span>13666665577</span>
+          <span class="driver_name">{{orderInfo?.driverName}}</span>
+          <span>{{orderInfo?.phone}}</span>
         </div>
       </div>
     </div>
@@ -23,7 +23,8 @@
 
 <script>
   export default {
-    name: "service-item"
+    name: "service-item",
+    props: ['orderInfo'],
   }
 </script>
 
diff --git a/src/views/report/reportIndex.vue b/src/views/report/reportIndex.vue
index 2f13fe4b..e4941e4a 100644
--- a/src/views/report/reportIndex.vue
+++ b/src/views/report/reportIndex.vue
@@ -4,98 +4,94 @@
       <div class="title">报备中心</div>
     </div>
     <div class="service_wrap">
-      <service-item></service-item>
+      <service-item :order-info="orderInfo"></service-item>
     </div>
-    <div class="chat_list">
-      <div class="top_tip_wrap">为了快速解决问题，请选择下方咨询类型</div>
+    <div class="chat_list" ref="chatList">
       <!--ai对话框 s -->
-      <div class="ai_chat">
-        <div class="ai_left">
-          <img class="report_ai" src="@/assets/report/report_ai.png" alt="">
-        </div>
-        <div class="ai_right">
-          <div class="ai_title">张师傅你好，请选择报备内容</div>
-          <ul>
-            <li @click="addReportShow = true">“联系不上客户”</li>
-            <li>“联系不上客户”</li>
-            <li>“联系不上客户”</li>
-            <li>“联系不上客户”</li>
-            <li>“联系不上客户”</li>
-          </ul>
-        </div>
+      <div v-for="(item, index) in recordList" :key="index">
+        <template v-if="item.messageType == 4">
+          <div class="top_tip_wrap">为了快速解决问题，请选择下方咨询类型</div>
+          <div class="ai_chat" >
+            <div class="ai_left">
+              <img class="report_ai" src="@/assets/report/report_ai.png" alt="">
+            </div>
+            <div class="ai_right">
+              <div class="ai_title">{{ orderInfo?.driverName }}你好，请选择报备内容</div>
+              <ul>
+                <li v-for="_item in item.content" :key="_item.id" @click="addReportHandler(_item)">“{{_item.name}}”</li>
+              </ul>
+            </div>
+          </div>
+        </template>
+        <template v-if="[2, 3].includes(Number(item.messageType))">
+          <!--ai对话框 e -->
+          <div class="tip_wrap">{{item.createTime}}</div>
+          <!--客服对话框 s -->
+          <div class="customer_item mb20">
+            <div class="customer_left">
+              <img class="profile_photo mr" src="@/assets/report/report_customer.png" alt="">
+            </div>
+            <div class="common_right customer_cls">
+              <div class="customer_status">{{item.reportConfigName}}</div>
+              <div class="response_con">{{item.remark}}</div>
+            </div>
+          </div>
+        </template>
+        <template v-if="item.messageType == 1">
+          <!--服务人员对话框 e -->
+          <div class="tip_wrap">{{item.createTime}}</div>
+          <!--服务人员对话框 s -->
+          <div class="server_item mb20">
+            <div class="common_right service_cls">
+              <div class="service_status">{{item.reportConfigName}}</div>
+              <div class="response_con">{{item.remark}}</div>
+            </div>
+            <div class="customer_left">
+              <img class="profile_photo ml" v-if="type == 1" src="@/assets/report/report_dispatch.png" alt="">
+              <img class="profile_photo ml" v-else src="@/assets/report/report_driver.png" alt="">
+            </div>
+          </div>
+          <!--服务人员对话框 e -->
+        </template>
       </div>
-      <!--ai对话框 e -->
-      <div class="tip_wrap">5月29日 10:48</div>
-      <!--客服对话框 s -->
-      <div class="customer_item mb20">
-        <div class="customer_left">
-          <img class="profile_photo mr" src="@/assets/report/report_customer.png" alt="">
-        </div>
-        <div class="common_right customer_cls">
-          <div class="customer_status">客服已处理</div>
-          <div class="response_con">收到老师，这边反馈处理，请稍等2分钟，给您回复</div>
-        </div>
-      </div>
-      <!--客服对话框 e -->
-      <div class="tip_wrap">5月29日 10:48</div>
-      <!--服务人员对话框 s -->
-      <div class="server_item mb20">
-        <div class="common_right service_cls">
-          <div class="service_status">客服已处理</div>
-          <div class="response_con">收到老师，这边反馈处理，请稍等2分钟，给您回复</div>
-        </div>
-        <div class="customer_left">
-          <img class="profile_photo ml" src="@/assets/report/report_driver.png" alt="">
-        </div>
-      </div>
-      <!--服务人员对话框 e -->
-      <div class="tip_wrap">5月29日 10:48</div>
-      <!--服务人员对话框 s -->
-      <div class="server_item mb20">
-        <div class="common_right service_cls">
-          <div class="service_status">客服已处理</div>
-          <div class="response_con">收到老师，这边反馈处理，请稍等2分钟，给您回复</div>
-        </div>
-        <div class="customer_left">
-          <img class="profile_photo ml" src="@/assets/report/report_dispatch.png" alt="">
-        </div>
-      </div>
-      <!--服务人员对话框 e -->
     </div>
 
-    <report-list-item />
+    <report-list-item :report-list.sync="reportList" @getReport="getReportHandler" />
 
-    <van-popup ref="addReportModal" v-model="addReportShow" duration="0"  round position="bottom">
+    <van-popup ref="addReportModal" v-model="addReportShow" :close-on-click-overlay="false" closeable duration="0" round position="bottom">
       <div class="dialog_wrap">
         <img class="add_report_bg" src="@/assets/report/add_report_bg.png" alt="">
         <div class="report_content">
-          <!--预约时间报备 s -->
-          <div class="report_title">
-            <img class="dot" src="@/assets/report/add_report_dot.png" alt="">
-            <span>预约时间</span>
-          </div>
-          <div class="report_time_content" @click="showDatetime = true">
-            <div class="report_time_left">
-              <img class="add_report_time" src="@/assets/report/add_report_time.png" alt="">
-              <span>{{appointTime || '请选择时间'}}</span>
+          <template v-if="currentInfo.component == 'time'">
+            <!--预约时间报备 s -->
+            <div class="report_title">
+              <img class="dot" src="@/assets/report/add_report_dot.png" alt="">
+              <span>预约时间</span>
             </div>
-            <img class="report_arrow" src="@/assets/report/add_report_arrow.png" alt="">
-          </div>
-          <!--预约时间报备 e -->
-
-          <!--修改地址报备 s -->
-          <div class="report_title">
-            <img class="dot" src="@/assets/report/add_report_dot.png" alt="">
-            <span>修改事发地</span>
-          </div>
-          <div class="report_time_content" @click="goPage('addressMap')">
-            <div class="report_time_left">
-              <img class="add_report_time" src="@/assets/report/add_report_address.png" alt="">
-              <span>{{address || '请选择地址'}}</span>
+            <div class="report_time_content" @click="showDatetime = true">
+              <div class="report_time_left">
+                <img class="add_report_time" src="@/assets/report/add_report_time.png" alt="">
+                <span>{{appointTime || '请选择时间'}}</span>
+              </div>
+              <img class="report_arrow" src="@/assets/report/add_report_arrow.png" alt="">
             </div>
-            <img class="report_arrow" src="@/assets/report/add_report_arrow.png" alt="">
-          </div>
-          <!--修改地址报备 e -->
+            <!--预约时间报备 e -->
+          </template>
+          <template v-if="currentInfo.component == 'address'">
+            <!--修改地址报备 s -->
+            <div class="report_title">
+              <img class="dot" src="@/assets/report/add_report_dot.png" alt="">
+              <span>修改事发地</span>
+            </div>
+            <div class="report_time_content" @click="goPage('addressMap')">
+              <div class="report_time_left">
+                <img class="add_report_time" src="@/assets/report/add_report_address.png" alt="">
+                <span>{{address || '请选择地址'}}</span>
+              </div>
+              <img class="report_arrow" src="@/assets/report/add_report_arrow.png" alt="">
+            </div>
+            <!--修改地址报备 e -->
+          </template>
           <div class="report_title">
             <img class="dot" src="@/assets/report/add_report_dot.png" alt="">
             <span>补充报备内容</span>
@@ -107,7 +103,7 @@
               placeholder="点击这里输入补充报备内容" />
           </div>
         </div>
-        <div class="report_btn">
+        <div class="report_btn" @click="saveHandler">
           提交报备
         </div>
       </div>
@@ -127,10 +123,12 @@
 </template>
 
 <script>
+  import { getReportListByOrder, reportHistory, newOrderReporting, getOrderInfo } from "@/api/report"
   import { myMixins} from "@/utils/myMixins";
   import {timeFormat} from "@/utils/common";
   import reportListItem from '@/views/report/components/report-list-item'
   import serviceItem from "@/views/report/components/service-item"
+  import {Dialog, Toast} from "vant";
   export default {
     name: "reportIndex",
     components: { serviceItem, reportListItem },
@@ -144,9 +142,27 @@
         address: '',
         lat: '',
         lng: '',
-        adCode: '',
+        reportList: [],
+        recordList: [],
+        orderInfo: {},
+        type: '',   // 1 调度   2 司机
+        currentInfo: '',
+        userOrderId: '',
+        userOrderCode: '',
+        driverId: '',
       }
     },
+    async mounted() {
+      const urlParams = new URLSearchParams(window.location.search);
+      this.userOrderId = this.$route.query.userOrderId || urlParams.get('userOrderId');
+      this.userOrderCode = this.$route.query.userOrderCode || urlParams.get('userOrderCode');
+      this.type = this.$route.query.type || urlParams.get('type');
+      this.driverId = this.$route.query.driverId || urlParams.get('driverId');
+      await this.getReportList();
+      await this.getDetail();
+      await this.getRecordList();
+      await this.scrollToBottom();
+    },
     activated() {
       let addressSession = sessionStorage.getItem('reportAddress');
       if(addressSession) {
@@ -158,6 +174,97 @@
       }
     },
     methods: {
+      // 添加滚动方法
+      scrollToBottom() {
+        this.$nextTick(() => {
+          const container = this.$refs.chatList
+          container.scrollTop = container.scrollHeight
+        })
+      },
+      async getRecordList() {
+        let recordList = await reportHistory({
+          userOrderId: this.userOrderId,
+          userOrderCode: this.userOrderCode,
+          driverId: this.driverId,
+          source: Number(this.type),
+        })
+        this.recordList = recordList.data;
+      },
+      async saveHandler() {
+        let data = {
+          source: Number(this.type),
+          reportContent: this.remark,
+          userOrderId: Number(this.userOrderId),
+          reportConfigId: this.currentInfo.id,
+          userOrderCode: this.userOrderCode,
+          driverId: this.driverId,
+        }
+        if(this.currentInfo.component == 'time') {
+          if( !this.appointTime ) {
+            Toast('预约时间不能为空')
+            return
+          }
+          if( new Date(this.appointTime).getTime() <= new Date().getTime() ) {
+            Toast('预约时间不能小于当前时间')
+            return
+          }
+          data.time = this.appointTime
+        }
+        if(this.currentInfo.component == 'address') {
+          if( !this.address ) {
+            Toast('地址不能为空')
+            return
+          }
+          data.address = this.address
+          data.lat = this.lat;
+          data.lng = this.lng;
+        }
+        if( !this.remark ) {
+          Toast('备注内容不能为空')
+          return
+        }
+        await newOrderReporting(data)
+        Dialog.alert({
+          title: '提示',
+          message: "报备添加成功"
+        }).then(async () => {
+          await this.getRecordList()
+          this.addReportShow = false
+          this.scrollToBottom();
+          this.initDialogData();
+        });
+      },
+      initDialogData() {
+        this.appointTime = '';
+        this.address = '';
+        this.lat = '';
+        this.lng = '';
+        this.remark = '';
+      },
+      addReportHandler(data) {  // 点击添加报备弹框
+        this.currentInfo = data;
+        this.addReportShow = true
+      },
+      getReportHandler(data) {  // 点击获取当前报备信息
+        this.recordList.push({
+          messageType: 4,
+          content: data.child
+        })
+        this.scrollToBottom();
+      },
+      async getDetail(){  // 订单详情
+        let result = await getOrderInfo({
+          userOrderId: this.userOrderId,
+          userOrderCode: this.userOrderCode
+        })
+        this.orderInfo = result.data
+      },
+      async getReportList() {   // 报备大类
+        let res = await getReportListByOrder({
+          orderId: this.userOrderId
+        });
+        this.reportList = res.data
+      },
       onConfirm(data) {
         this.appointTime = timeFormat(new Date(data))
         this.showDatetime = false;
@@ -399,4 +506,7 @@
       margin: 0 auto 40px;
     }
   }
+  ::v-deep .van-popup__close-icon {
+    color: #0F458E;
+  }
 </style>