apps/supplier-dispatch-h5
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

task#6524 报备

Browse Source
This commit is contained in:
周林芳
2025-06-12 10:26:29 +08:00
parent 0fc0d33742
commit 749daae26e
5 changed files with 261 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/api/report.js Normal file
View File

@ -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
})
}

4
src/utils/map.js
View File

@ -45,7 +45,7 @@ export function getAddress(mapContext, lnglat) {
// 输入提示 // 输入提示
export function searchFun(mapContext, cityCode, keyword) { export function searchFun(mapContext, cityCode, keyword) {
return new Promise((resolve, reject) => { return new Promise((resolve) => {
mapContext.plugin('AMap.AutoComplete', function(){ mapContext.plugin('AMap.AutoComplete', function(){
var autoOptions = { var autoOptions = {
city: cityCode || '全国', city: cityCode || '全国',
@ -58,7 +58,7 @@ export function searchFun(mapContext, cityCode, keyword) {
if(result.info == 'OK') { if(result.info == 'OK') {
resolve(result.tips) resolve(result.tips)
} else { } else {
reject(result) resolve([])
} }
}) })
}) })

46
src/views/report/components/report-list-item.vue
View File

@ -1,35 +1,28 @@
<template> <template>
<div class="bottom_wrap"> <div class="bottom_wrap">
<div class="report_item"> <div class="report_item" v-for="(item, index) in reportList" @click="goReportHandler(item)" :key="index">
<img class="report_icon" src="@/assets/report/report_delay.png" alt=""> <img class="report_icon" :src="item?.iconUrl" alt="">
<div class="report_title">救援延误</div> <div class="report_title">{{item.name}}</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> </div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: "report-list-item" name: "report-list-item",
data() {
return {
addressReportCode: '',
}
},
props: ['reportList'],
methods: {
goReportHandler(data) {
this.$emit('getReport', data);
},
}
} }
</script> </script>
@ -38,14 +31,17 @@ export default {
width: 100%; width: 100%;
/*position: fixed;*/ /*position: fixed;*/
bottom: 0; bottom: 0;
padding: 0 34px 20px; /*padding: 0 34px 20px;*/
padding-bottom: 20px;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
background: #FFFFFF; background: #FFFFFF;
box-shadow: 0px 0px 20px 0px rgba(53,73,93,0.2); box-shadow: 0px 0px 20px 0px rgba(53,73,93,0.2);
box-sizing: border-box;
.report_item { .report_item {
width: 25%; width: 25%;
margin-top: 20px; margin-top: 20px;
text-align: center;
.report_icon { .report_icon {
width: 45px; width: 45px;
height: 45px; height: 45px;

15
src/views/report/components/service-item.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<div class="service_title"> <div class="service_title">
<span class="name">故障平板拖车</span> <span class="name">{{orderInfo?.serviceName}}</span>
<span class="status">调度成功，等待发车备份</span> <span class="status">{{orderInfo?.orderStatusString}}</span>
</div> </div>
<!-- <img class="report_line" src="@/assets/report/report_line.png" alt="">--> <!-- <img class="report_line" src="@/assets/report/report_line.png" alt="">-->
<div class="service_content"> <div class="service_content">
@ -10,11 +10,11 @@
<img class="report_logo" src="@/assets/report/report_logo.png" alt=""> <img class="report_logo" src="@/assets/report/report_logo.png" alt="">
</div> </div>
<div class="content_right"> <div class="content_right">
<div class="order_code">单号：ZD20240878990</div> <div class="order_code">单号：{{orderInfo?.userOrderCode}}</div>
<div class="company">单位：上海安昌汽车救援有限公司</div> <div class="company">单位：{{orderInfo?.supplierName}}</div>
<div class="driver_info"> <div class="driver_info">
<span class="driver_name">张师傅</span> <span class="driver_name">{{orderInfo?.driverName}}</span>
<span>13666665577</span> <span>{{orderInfo?.phone}}</span>
</div> </div>
</div> </div>
</div> </div>
@ -23,7 +23,8 @@
<script> <script>
export default { export default {
name: "service-item" name: "service-item",
props: ['orderInfo'],
} }
</script> </script>

276
src/views/report/reportIndex.vue
View File

@ -4,98 +4,94 @@
<div class="title">报备中心</div> <div class="title">报备中心</div>
</div> </div>
<div class="service_wrap"> <div class="service_wrap">
<service-item></service-item> <service-item :order-info="orderInfo"></service-item>
</div> </div>
<div class="chat_list"> <div class="chat_list" ref="chatList">
<div class="top_tip_wrap">为了快速解决问题，请选择下方咨询类型</div>
<!--ai对话框 s --> <!--ai对话框 s -->
<div class="ai_chat"> <div v-for="(item, index) in recordList" :key="index">
<div class="ai_left"> <template v-if="item.messageType == 4">
<img class="report_ai" src="@/assets/report/report_ai.png" alt=""> <div class="top_tip_wrap">为了快速解决问题，请选择下方咨询类型</div>
</div> <div class="ai_chat" >
<div class="ai_right"> <div class="ai_left">
<div class="ai_title">张师傅你好，请选择报备内容</div> <img class="report_ai" src="@/assets/report/report_ai.png" alt="">
<ul> </div>
<li @click="addReportShow = true">“联系不上客户”</li> <div class="ai_right">
<li>“联系不上客户”</li> <div class="ai_title">{{ orderInfo?.driverName }}你好，请选择报备内容</div>
<li>“联系不上客户”</li> <ul>
<li>“联系不上客户”</li> <li v-for="_item in item.content" :key="_item.id" @click="addReportHandler(_item)">“{{_item.name}}”</li>
<li>“联系不上客户”</li> </ul>
</ul> </div>
</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> </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> </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"> <div class="dialog_wrap">
<img class="add_report_bg" src="@/assets/report/add_report_bg.png" alt=""> <img class="add_report_bg" src="@/assets/report/add_report_bg.png" alt="">
<div class="report_content"> <div class="report_content">
<!--预约时间报备 s --> <template v-if="currentInfo.component == 'time'">
<div class="report_title"> <!--预约时间报备 s -->
<img class="dot" src="@/assets/report/add_report_dot.png" alt=""> <div class="report_title">
<span>预约时间</span> <img class="dot" src="@/assets/report/add_report_dot.png" alt="">
</div> <span>预约时间</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> </div>
<img class="report_arrow" src="@/assets/report/add_report_arrow.png" alt=""> <div class="report_time_content" @click="showDatetime = true">
</div> <div class="report_time_left">
<!--预约时间报备 e --> <img class="add_report_time" src="@/assets/report/add_report_time.png" alt="">
<span>{{appointTime || '请选择时间'}}</span>
<!--修改地址报备 s --> </div>
<div class="report_title"> <img class="report_arrow" src="@/assets/report/add_report_arrow.png" alt="">
<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> </div>
<img class="report_arrow" src="@/assets/report/add_report_arrow.png" alt=""> <!--预约时间报备 e -->
</div> </template>
<!--修改地址报备 e --> <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"> <div class="report_title">
<img class="dot" src="@/assets/report/add_report_dot.png" alt=""> <img class="dot" src="@/assets/report/add_report_dot.png" alt="">
<span>补充报备内容</span> <span>补充报备内容</span>
@ -107,7 +103,7 @@
placeholder="点击这里输入补充报备内容" /> placeholder="点击这里输入补充报备内容" />
</div> </div>
</div> </div>
<div class="report_btn"> <div class="report_btn" @click="saveHandler">
提交报备 提交报备
</div> </div>
</div> </div>
@ -127,10 +123,12 @@
</template> </template>
<script> <script>
import { getReportListByOrder, reportHistory, newOrderReporting, getOrderInfo } from "@/api/report"
import { myMixins} from "@/utils/myMixins"; import { myMixins} from "@/utils/myMixins";
import {timeFormat} from "@/utils/common"; import {timeFormat} from "@/utils/common";
import reportListItem from '@/views/report/components/report-list-item' import reportListItem from '@/views/report/components/report-list-item'
import serviceItem from "@/views/report/components/service-item" import serviceItem from "@/views/report/components/service-item"
import {Dialog, Toast} from "vant";
export default { export default {
name: "reportIndex", name: "reportIndex",
components: { serviceItem, reportListItem }, components: { serviceItem, reportListItem },
@ -144,9 +142,27 @@
address: '', address: '',
lat: '', lat: '',
lng: '', 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() { activated() {
let addressSession = sessionStorage.getItem('reportAddress'); let addressSession = sessionStorage.getItem('reportAddress');
if(addressSession) { if(addressSession) {
@ -158,6 +174,97 @@
} }
}, },
methods: { 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) { onConfirm(data) {
this.appointTime = timeFormat(new Date(data)) this.appointTime = timeFormat(new Date(data))
this.showDatetime = false; this.showDatetime = false;
@ -399,4 +506,7 @@
margin: 0 auto 40px; margin: 0 auto 40px;
} }
} }
::v-deep .van-popup__close-icon {
color: #0F458E;
}
</style> </style>