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

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

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