Compare commits
34 Commits
prod-25-11
...
4e37efeca4
| Author | SHA1 | Date | |
|---|---|---|---|
| 4e37efeca4 | |||
| 8979dcaf98 | |||
| f6e225ed4b | |||
| 821a35b382 | |||
| 2b0c6d6a36 | |||
| 073312a56b | |||
| d493ebca97 | |||
| ed5a0d9478 | |||
| 0a281ea877 | |||
| b42db4e98f | |||
| b9830e80eb | |||
| 5bc7c6b1e3 | |||
| 5a56d4fe1c | |||
| f7f9bb7fd0 | |||
| 05ac89814c | |||
| d178be1acd | |||
| f0576476e9 | |||
| 01e2f9ca8d | |||
| f9d72ee3cc | |||
| 0102cc2899 | |||
| 7f0109bfcc | |||
| f3716466e9 | |||
| 811f232a73 | |||
| 72fe6cc266 | |||
| 75cf3db960 | |||
| 19ad185126 | |||
| bb7ad8deb1 | |||
| abd5657366 | |||
| 6e7a5a4b42 | |||
| 2c61085515 | |||
| 55321e5dc5 | |||
| 327d40318b | |||
| 5eefaa2223 | |||
| ff0e25cfd0 |
2
package-lock.json
generated
2
package-lock.json
generated
@@ -15,7 +15,7 @@
|
||||
"dayjs": "^1.8.14",
|
||||
"decimal.js": "^10.4.3",
|
||||
"echarts": "^5.2.2",
|
||||
"element-ui": "^2.15.9",
|
||||
"element-ui": "^2.15.13",
|
||||
"less": "^4.1.3",
|
||||
"less-loader": "^11.1.3",
|
||||
"qrcode": "^1.5.4",
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
"dayjs": "^1.8.14",
|
||||
"decimal.js": "^10.4.3",
|
||||
"echarts": "^5.2.2",
|
||||
"element-ui": "^2.15.9",
|
||||
"element-ui": "^2.15.13",
|
||||
"less": "^4.1.3",
|
||||
"less-loader": "^11.1.3",
|
||||
"qrcode": "^1.5.4",
|
||||
|
||||
@@ -56,7 +56,7 @@
|
||||
if (isMobile) {// 是移动端不变
|
||||
// console.log("是移动端不变")
|
||||
}else{
|
||||
if(window.location.pathname=='/h5/supplier/dispatch/kpiIndex'){
|
||||
if(window.location.pathname=='/h5/supplier/dispatch/kpiIndex' || window.location.pathname=='/h5/supplier/dispatch/kpiCaseNew'){
|
||||
// console.log("执行了执行了")
|
||||
win.addEventListener(resizeEvt, recalc, false);
|
||||
doc.addEventListener('DOMContentLoaded', recalc, false);
|
||||
|
||||
@@ -81,4 +81,41 @@ export function getDriverName(key) {
|
||||
key: key ,
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export function getVehicleName(key) {
|
||||
return request({
|
||||
url: '/supplier/select/vehicle',
|
||||
method: 'GET',
|
||||
params: {
|
||||
key: key ,
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 车辆 总览
|
||||
export function vehicleTotalInfo(data) {
|
||||
return request({
|
||||
url: '/supplier/supplierKPI/querySupplierVehicleStatisticsKpi',
|
||||
method: 'POST',
|
||||
data
|
||||
});
|
||||
}
|
||||
|
||||
// 服务商维度查询车辆
|
||||
export function vehicleInfoBySupplier(data) {
|
||||
return request({
|
||||
url: '/supplier/supplierKPI/querySupplierStatisticsKpiBySupplier',
|
||||
method: 'POST',
|
||||
data
|
||||
});
|
||||
}
|
||||
|
||||
// 车辆维度查询车辆
|
||||
export function vehicleInfoByVehicle(data) {
|
||||
return request({
|
||||
url: '/supplier/supplierKPI/querySupplierVehicleKpi',
|
||||
method: 'POST',
|
||||
data
|
||||
});
|
||||
}
|
||||
|
||||
@@ -18,6 +18,15 @@ export function saveVehicle(data){
|
||||
data
|
||||
})
|
||||
}
|
||||
//提交审批车辆信息
|
||||
export function saveSupplierApproval(data){
|
||||
return request({
|
||||
url:'/supplier/approval/saveSupplierDriverVehicleApproval',
|
||||
method:'POST',
|
||||
contentType:'application/json',
|
||||
data
|
||||
})
|
||||
}
|
||||
/*车辆更改状态 /supplierAppV2/dispatchApp/user/enableVehicle*/
|
||||
export function enableVehicle(data){
|
||||
return request({
|
||||
|
||||
@@ -7,5 +7,13 @@ const kpiRouter = [
|
||||
title: 'kpi首页',
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/kpiCaseNew',
|
||||
name: 'kpiCaseNew',
|
||||
component: () => import('@/views/kpi/kpiCaseNew'),
|
||||
meta:{
|
||||
title: 'kpi服务商案件&车辆情况',
|
||||
}
|
||||
},
|
||||
]
|
||||
export default kpiRouter
|
||||
|
||||
@@ -23,6 +23,17 @@
|
||||
div {
|
||||
padding-top: 8px;
|
||||
}
|
||||
.commonNum{
|
||||
padding: 2px 5px;
|
||||
background-color: #9C9C9C;
|
||||
color: white;
|
||||
border-radius: 3px;
|
||||
font-size: 13px;
|
||||
margin-left: 3px;
|
||||
}
|
||||
.notFinish{
|
||||
background-color: red;
|
||||
}
|
||||
.active {
|
||||
color: #3678FF;
|
||||
position: relative;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
@import "@/styles/mixin.scss";
|
||||
::v-deep .van-nav-bar__content{
|
||||
background-color: #3A3A3A !important;
|
||||
//background-color: #3A3A3A !important;
|
||||
}
|
||||
.wrap{
|
||||
@include wh(100%,100%);
|
||||
|
||||
@@ -19,7 +19,7 @@ if( token ) {
|
||||
service.interceptors.request.use(
|
||||
config => {
|
||||
let reqUrl=config.url
|
||||
console.log('config',config)
|
||||
// console.log('config',config)
|
||||
config.data = config.contentType ? config.data : qs.stringify(config.data)
|
||||
if (config.testFlag) {
|
||||
config.data = qs.stringify(config.data, {arrayFormat: 'indices', allowDots: true})
|
||||
|
||||
102
src/utils/kpiMixins.js
Normal file
102
src/utils/kpiMixins.js
Normal file
@@ -0,0 +1,102 @@
|
||||
import dayjs from "dayjs";
|
||||
|
||||
export const kpiMixins = {
|
||||
data() {
|
||||
return {
|
||||
isMobile: false,
|
||||
isZd: '',
|
||||
current:'2024-10',
|
||||
supplierId:'',
|
||||
supplierName:'',
|
||||
startMonthTime: '',
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
applicateHandle() {
|
||||
if (window.parent) {
|
||||
const hasListener = window.parent.dispatchEvent(new Event('checkCloseDialog'));
|
||||
if (hasListener) {
|
||||
const data = {
|
||||
action: 'closeDialog',
|
||||
message: this.supplierId,
|
||||
// 其他需要传递的参数
|
||||
};
|
||||
window.parent.postMessage(data, '*');
|
||||
} else {
|
||||
window.history.back();
|
||||
}
|
||||
}
|
||||
},
|
||||
toOnlineHours(minutes) {
|
||||
let _hours = parseInt(minutes / 60);
|
||||
let _minutes = parseInt(minutes % 60);
|
||||
return _hours + '时' + _minutes + '分'
|
||||
},
|
||||
// 初始化获取当月日期
|
||||
initDate() {
|
||||
const today = dayjs(); // 获取当前日期
|
||||
const currentDay = today.date(); // 获取今天是几号(1-31)
|
||||
let targetMonth = today; // 默认目标月份是当前月
|
||||
if (currentDay === 1) {
|
||||
targetMonth = today.subtract(1, 'month'); // 上个月
|
||||
}
|
||||
this.current = targetMonth.format('YYYY-MM');
|
||||
this.startTime = targetMonth.startOf('month').format('YYYY-MM-DD HH:mm:ss');
|
||||
let endTime;
|
||||
if (targetMonth.isSame(today, 'month')) {
|
||||
endTime = today.subtract(1, 'day').endOf('day');
|
||||
} else {
|
||||
endTime = targetMonth.endOf('month');
|
||||
}
|
||||
this.endTime = endTime.format('YYYY-MM-DD HH:mm:ss');
|
||||
this.startMonthTime=this.getStartTimeFromEndTime(this.endTime)
|
||||
},
|
||||
//获取近四个月的开始时间
|
||||
getStartTimeFromEndTime(endTimeStr) {
|
||||
const startTime = dayjs(endTimeStr).subtract(3, 'month').startOf('month');
|
||||
return startTime.format('YYYY-MM-DD HH:mm:ss');
|
||||
},
|
||||
padZero(num) {
|
||||
return num < 10 ? `0${num}` : num;
|
||||
},
|
||||
checkMobile() {
|
||||
const userAgent = navigator.userAgent || navigator.vendor || window.opera;
|
||||
this.isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent);
|
||||
},
|
||||
// 通用函数,用于处理百分比数据
|
||||
processPercentage(value) {
|
||||
value *= 100;
|
||||
if (value % 1 !== 0) {
|
||||
value = value.toFixed(2);
|
||||
}
|
||||
return value;
|
||||
},
|
||||
formatPercentage(value) {
|
||||
let result = value * 100;
|
||||
if (Number.isInteger(result)) {
|
||||
return result.toString() + '%';
|
||||
} else {
|
||||
return result.toFixed(2) + '%';
|
||||
}
|
||||
},
|
||||
// 格式化承接案件量数据
|
||||
formatCurrency(value) {
|
||||
if (!value) return '';
|
||||
let num = parseInt(value);
|
||||
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
||||
},
|
||||
formatCurrency1(value) {
|
||||
if (!value) return ''; // 如果值为空,返回空字符串
|
||||
// 如果值已经包含逗号,直接返回原值
|
||||
if (value.toString().includes(',')) {
|
||||
return value;
|
||||
}
|
||||
// 否则,添加千分号
|
||||
let num = parseInt(value);
|
||||
if (isNaN(num)) return ''; // 如果转换失败,返回空字符串
|
||||
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,28 @@
|
||||
<template>
|
||||
<div class="wrap">
|
||||
<div class="navBar">
|
||||
<van-nav-bar
|
||||
left-arrow
|
||||
left-arrow-color="#FFFFFF"
|
||||
:border="false"
|
||||
:fixed="true"
|
||||
:safe-area-inset-top="true"
|
||||
@click-left="goBack"
|
||||
>
|
||||
<template slot="title">
|
||||
<div v-show="!show">培训文档</div>
|
||||
<van-field v-model="keyword" placeholder="请输入关键词" v-show="show" @input="getTrainingList"/>
|
||||
</template>
|
||||
<template slot="right">
|
||||
<div class="rightWrap" @click="show = !show">
|
||||
<img src="@/assets/serach.png" class="img2" v-show="!show"/>
|
||||
<img src="@/assets/delKey.png" class="img2" v-show="show" @click="initShow"/>
|
||||
</div>
|
||||
</template>
|
||||
</van-nav-bar>
|
||||
</div>
|
||||
|
||||
<!-- <div class="navBar">
|
||||
<van-nav-bar
|
||||
:border="false"
|
||||
:fixed="true"
|
||||
@@ -24,7 +46,8 @@
|
||||
</template>
|
||||
</van-nav-bar>
|
||||
</div>
|
||||
<div class="statisticContainer">
|
||||
-->
|
||||
<!-- <div class="statisticContainer">
|
||||
<div class="statisticWrap">
|
||||
<div class="line1">
|
||||
<span>培训统计</span>
|
||||
@@ -43,11 +66,12 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="driver_tab_wrap">
|
||||
</div>-->
|
||||
<div class="tab_wrap">
|
||||
<div v-for="(item, index) in tabArr" :key="index" :class="{'active' : activeIndex == index}"
|
||||
@click="changeTab(index)">
|
||||
{{ item.name }}
|
||||
{{ item.name }}<span v-if="item.count" :class="{'commonNum':true,'notFinish':index==2}">{{item.count}}</span>
|
||||
<!-- {{ item.name }}-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="contentWrap" v-show="!showEmpty">
|
||||
@@ -84,7 +108,8 @@ export default {
|
||||
mixins:[myMixins],
|
||||
data(){
|
||||
return{
|
||||
tabArr: [{name: '车型技术参数', status: 1}, {name: '中道服务规范', status:2},{name: '中道小课堂', status: 3}],
|
||||
tabArr: [{name: '全部文档', status: 1,count:0}, {name: '已培训', status:2,count:0},{name: '未培训', status: 3,count:0}],
|
||||
// tabArr: [{name: '车型技术参数', status: 1}, {name: '中道服务规范', status:2},{name: '中道小课堂', status: 3}],
|
||||
activeIndex: 0,
|
||||
pageList:[],
|
||||
totalList:[],
|
||||
@@ -115,6 +140,10 @@ export default {
|
||||
});
|
||||
},
|
||||
methods:{
|
||||
initShow(){
|
||||
this.keyword= ''
|
||||
this.getTrainingList()
|
||||
},
|
||||
onRefresh() {
|
||||
this.getTrainingList()
|
||||
setTimeout(() => {
|
||||
@@ -135,18 +164,38 @@ export default {
|
||||
})
|
||||
this.totalList=[]
|
||||
this.pageList=[]
|
||||
this.tabArr[0].count=0
|
||||
this.tabArr[1].count=0
|
||||
this.tabArr[2].count=0
|
||||
this.numInfo=res.data
|
||||
this.totalList=res.data.list
|
||||
let result=[]
|
||||
if(res.data.totalNum){
|
||||
this.tabArr[0].count=res.data.totalNum
|
||||
}
|
||||
if(res.data.readNum){
|
||||
this.tabArr[1].count=res.data.readNum
|
||||
}
|
||||
if(res.data.notReadNum){
|
||||
this.tabArr[2].count=res.data.notReadNum
|
||||
}
|
||||
/* this.totalList=res.data.list
|
||||
if(this.activeIndex === 0){
|
||||
result=this.totalList?.filter(q => q.title === '车型技术参数');
|
||||
}else if(this.activeIndex === 1){
|
||||
result=this.totalList?.filter(q => q.title === '中道服务规范');
|
||||
}else if(this.activeIndex === 2){
|
||||
result=this.totalList?.filter(q => q.title === '中道小课堂');
|
||||
}*/
|
||||
let result=[]
|
||||
this.totalList=res?.data?.list ? res?.data?.list[0]?.materials : []
|
||||
if(this.activeIndex === 0){
|
||||
result=this.totalList || []
|
||||
}else if(this.activeIndex === 1){
|
||||
result=this.totalList?.filter(item => item.alreadyRead==1) || []
|
||||
}else if(this.activeIndex === 2){
|
||||
result=this.totalList?.filter(item => item.alreadyRead!=1) || []
|
||||
}
|
||||
if(result){
|
||||
this.pageList=result[0].materials
|
||||
this.pageList=result
|
||||
this.time=timeFormat(Date.now())
|
||||
}
|
||||
if(this.pageList?.length === 0){
|
||||
@@ -163,6 +212,19 @@ export default {
|
||||
@import "@/styles/mixin.scss";
|
||||
@import "@/styles/docment.scss";
|
||||
@import "@/styles/driverDocment.scss";
|
||||
/*::v-deep .van-nav-bar__content{
|
||||
background-color: #3A3A3A !important;
|
||||
}*/
|
||||
.tab_wrap {
|
||||
.active:after {
|
||||
width: 37px;
|
||||
left: 0%;
|
||||
transform: translateX(0%);
|
||||
}
|
||||
.active1:after {
|
||||
width:48px !important;
|
||||
}
|
||||
}
|
||||
.read{
|
||||
padding: 2px 8px;
|
||||
border-radius: 5px;
|
||||
|
||||
@@ -22,9 +22,9 @@
|
||||
</van-nav-bar>
|
||||
</div>
|
||||
<div class="tab_wrap">
|
||||
<div v-for="(item, index) in tabArr" :key="index" :class="{'active' : activeIndex == index}"
|
||||
<div v-for="(item, index) in tabArr" :key="index" :class="{'active' : activeIndex == index,'active1':activeIndex==0}"
|
||||
@click="changeTab(index)">
|
||||
{{ item.name }}
|
||||
{{ item.name }}<span v-if="item.count" :class="{'commonNum':true,'notFinish':index==2}">{{item.count}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contentWrap" v-show="!showEmpty">
|
||||
@@ -61,7 +61,7 @@ export default {
|
||||
mixins:[myMixins],
|
||||
data(){
|
||||
return{
|
||||
tabArr: [{name: '车型技术参数', status: 1}, {name: '中道服务规范', status:2},{name: '中道小课堂', status: 3}],
|
||||
tabArr: [{name: '全部文档', status: 1,count:0}, {name: '已培训', status:2,count:0},{name: '未培训', status: 3,count:0}],
|
||||
activeIndex: 0,
|
||||
pageNum:1,
|
||||
pageSize:10,
|
||||
@@ -73,9 +73,14 @@ export default {
|
||||
showEmpty:false,
|
||||
isLoading:false,
|
||||
supplierId:'',
|
||||
numInfo:'',
|
||||
}
|
||||
},
|
||||
activated() {
|
||||
console.log('activated')
|
||||
},
|
||||
mounted() {
|
||||
console.log('mounted')
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
this.supplierId = urlParams.get('supplierId');
|
||||
this.keyword=urlParams.get('keyword') || ''
|
||||
@@ -111,17 +116,35 @@ export default {
|
||||
})
|
||||
this.totalList=[]
|
||||
this.pageList=[]
|
||||
this.totalList=res.data.list
|
||||
this.tabArr[0].count=0
|
||||
this.tabArr[1].count=0
|
||||
this.tabArr[2].count=0
|
||||
this.totalList=res?.data?.list ? res?.data?.list[0]?.materials : []
|
||||
this.numInfo=res.data
|
||||
if(res.data.totalNum){
|
||||
this.tabArr[0].count=res.data.totalNum
|
||||
}
|
||||
if(res.data.readNum){
|
||||
this.tabArr[1].count=res.data.readNum
|
||||
}
|
||||
if(res.data.notReadNum){
|
||||
this.tabArr[2].count=res.data.notReadNum
|
||||
}
|
||||
// console.log(' this.totalList',this.totalList)
|
||||
console.log(' this.tabArr',this.tabArr)
|
||||
let result=[]
|
||||
if(this.activeIndex === 0){
|
||||
result=this.totalList?.filter(q => q.title === '车型技术参数');
|
||||
result=this.totalList || []
|
||||
// result=this.totalList?.filter(q => q.title === '车型技术参数');
|
||||
}else if(this.activeIndex === 1){
|
||||
result=this.totalList?.filter(q => q.title === '中道服务规范');
|
||||
// result=this.totalList?.filter(q => q.title === '中道服务规范');
|
||||
result=this.totalList?.filter(item => item.alreadyRead==1) || []
|
||||
}else if(this.activeIndex === 2){
|
||||
result=this.totalList?.filter(q => q.title === '中道小课堂');
|
||||
result=this.totalList?.filter(item => item.alreadyRead!=1) || []
|
||||
// result=this.totalList?.filter(q => q.title === '中道小课堂');
|
||||
}
|
||||
if(result){
|
||||
this.pageList=result[0].materials
|
||||
this.pageList=result
|
||||
}
|
||||
if(this.pageList?.length === 0){
|
||||
this.showEmpty = true
|
||||
@@ -130,7 +153,7 @@ export default {
|
||||
}
|
||||
},
|
||||
initShow(){
|
||||
this.keyword= '',
|
||||
this.keyword= ''
|
||||
this.getTrainingList()
|
||||
}
|
||||
}
|
||||
@@ -140,6 +163,16 @@ export default {
|
||||
@import "@/styles/common.scss";
|
||||
@import "@/styles/mixin.scss";
|
||||
@import "@/styles/docment.scss";
|
||||
.tab_wrap {
|
||||
.active:after {
|
||||
width: 37px;
|
||||
left: 0%;
|
||||
transform: translateX(0%);
|
||||
}
|
||||
.active1:after {
|
||||
width:48px !important;
|
||||
}
|
||||
}
|
||||
.read{
|
||||
padding: 2px 8px;
|
||||
border-radius: 5px;
|
||||
|
||||
@@ -158,7 +158,7 @@
|
||||
children: 'children',
|
||||
label: 'title',
|
||||
},
|
||||
areaProps: { multiple: true, checkStrictly: true, value: 'id',label: 'title', emitPath: false, },
|
||||
areaProps: { multiple: true, checkStrictly: true, value: 'id',label: 'title', emitPath: false},
|
||||
configId: '',
|
||||
wechatId: '',
|
||||
}
|
||||
@@ -286,16 +286,28 @@
|
||||
message: "操作成功"
|
||||
}).then(async () => {
|
||||
this.goPage('supplierAddResult', { id : res?.data })
|
||||
this.clickFlag = true
|
||||
setTimeout(() => {
|
||||
this.clickFlag = true
|
||||
}, 1000)
|
||||
});
|
||||
} finally {
|
||||
this.clickFlag = true
|
||||
setTimeout(() => {
|
||||
this.clickFlag = true
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
},
|
||||
async getAreaTree() {
|
||||
let res = await getArea();
|
||||
this.areaList = res?.data;
|
||||
let result = res?.data
|
||||
result?.map(item=>{
|
||||
if( item.parentId == 0 ) {
|
||||
this.$set(item , 'disabled' ,true)
|
||||
} else {
|
||||
this.$set(item , 'disabled' ,false)
|
||||
}
|
||||
})
|
||||
this.areaList = result;
|
||||
},
|
||||
/*async getSupplierServiceTree(){
|
||||
let res = await supplierServicePartTree({
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
@click-left="h5GoBack"
|
||||
/>
|
||||
</div>
|
||||
<div class="addContentWrap">
|
||||
<div class="addContentWrap">
|
||||
<div class="itemContent">
|
||||
<div class="titleType">
|
||||
<img class="startImg" src="@/assets/start.png" />
|
||||
@@ -20,6 +20,7 @@
|
||||
<van-uploader
|
||||
v-model="vehicleLicenseFrontList"
|
||||
:after-read="vehicleLicenseFrontHandler"
|
||||
@oversize="onOversize"
|
||||
:max-size="5 * 1024 * 1024"
|
||||
max-count="1"
|
||||
:preview-size="54"
|
||||
@@ -34,6 +35,7 @@
|
||||
<van-uploader
|
||||
v-model="vehicleLicenseBackList"
|
||||
:after-read="vehicleLicenseBackHandler"
|
||||
@oversize="onOversize"
|
||||
:max-size="5 * 1024 * 1024"
|
||||
max-count="1"
|
||||
:preview-size="54"
|
||||
@@ -48,6 +50,7 @@
|
||||
<van-uploader
|
||||
v-model="vehicleLicenseCarPhotoList"
|
||||
:after-read="vehicleLicenseCarHandler"
|
||||
@oversize="onOversize"
|
||||
:max-size="5 * 1024 * 1024"
|
||||
max-count="1"
|
||||
:preview-size="54"
|
||||
@@ -62,6 +65,8 @@
|
||||
<van-uploader
|
||||
v-model="vehicleFrontPhotoList"
|
||||
:after-read="vehicleFrontPhotoHandler"
|
||||
@oversize="onOversize"
|
||||
:max-size="5 * 1024 * 1024"
|
||||
max-count="1"
|
||||
:preview-size="54"
|
||||
accept="image "
|
||||
@@ -330,10 +335,33 @@
|
||||
</div>
|
||||
</div>-->
|
||||
</div>
|
||||
<two-common-btn class="btn" @cancelClick="h5GoBack" @submitClick="submitBtn" />
|
||||
<two-common-btn class="btn" @cancelClick="h5GoBack" @submitClick="submitAuditHandle" />
|
||||
<van-calendar v-model="showDatePicker" :min-date="minDate"
|
||||
:max-date="maxDate" type="range" @confirm="onConfirm" />
|
||||
|
||||
</div>
|
||||
<van-popup ref="success" v-model="approvalDialogShow">
|
||||
<div class="pop_wrap">
|
||||
<div class="pop_title">车辆提交审批</div>
|
||||
<div class="pop_content">
|
||||
<div class="iptWrap" v-if="vehicleInfoChange">
|
||||
<div>车辆和服务备注</div>
|
||||
<el-input placeholder="请输入车辆和服务备注" type="textarea" show-word-limit maxlength="200"
|
||||
v-model="approvalForm.serviceRemark"></el-input>
|
||||
</div>
|
||||
<div class="iptWrap" v-if="insuranceChange">
|
||||
<div>保单备注</div>
|
||||
<el-input placeholder="请输入保单备注" type="textarea" show-word-limit maxlength="200"
|
||||
v-model="approvalForm.insuranceRemark"></el-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tip_button_wrap">
|
||||
<div class="continue close" @click="closeApproval">取消</div>
|
||||
<div class="continue" :class="{'loading': loading}" @click="submitApprovalHandle">提交审批</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -342,7 +370,8 @@
|
||||
import {Dialog} from "vant";
|
||||
import {formatDate1} from "@/utils/common"
|
||||
import {myMixins} from "@/utils/myMixins"
|
||||
import {vehicleTypeList,saveVehicle,getInfoById,supplierServiceTree, uploadImage, ocrHandler, userOperationPermissions} from "@/api/mine"
|
||||
import {vehicleTypeList,saveVehicle,getInfoById,supplierServiceTree, uploadImage, ocrHandler,
|
||||
userOperationPermissions,saveSupplierApproval} from "@/api/mine"
|
||||
import TwoCommonBtn from "@/components/twoBtnCommon.vue"
|
||||
import CellGroup from "@/components/cellGroup.vue";
|
||||
export default {
|
||||
@@ -373,6 +402,7 @@ export default {
|
||||
typeList:[],//车辆类型列表
|
||||
selectedOption:[],//车辆类型
|
||||
id:'',//车辆Id
|
||||
supplierId:'',//服务商Id
|
||||
serviceIds:[],//车辆服务种类,
|
||||
supplierServiceList:[],
|
||||
oldSupplierServiceList:[],
|
||||
@@ -500,7 +530,25 @@ export default {
|
||||
}, {
|
||||
name: '其他',
|
||||
value: 14
|
||||
}]
|
||||
}],
|
||||
approvalForm:{
|
||||
type:2,
|
||||
supplierId:'',
|
||||
vehicleId:'',
|
||||
serviceChange:null,
|
||||
serviceRemark:'',
|
||||
insuranceChange:null,
|
||||
insuranceRemark:'',
|
||||
vehicleOtherChange:null,
|
||||
vehicleOtherRemark:'',
|
||||
},
|
||||
originData:{},//记录更改之前的数据
|
||||
changedFields: [], // 用于存储变更过的字段
|
||||
approvalDialogShow:false,
|
||||
vehicleInfoChange:false,
|
||||
insuranceChange:false,
|
||||
loading: false,
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -548,13 +596,25 @@ export default {
|
||||
this.setDefault();
|
||||
},
|
||||
},
|
||||
|
||||
async mounted() {
|
||||
this.id=this.$route.params?.id
|
||||
this.approvalForm.supplierId=this.$route.params?.supplierId
|
||||
await this.getSupplierServiceTree();
|
||||
await this.getTypeList();
|
||||
if( this.id){
|
||||
await this.vehicleInfo()
|
||||
}else{
|
||||
this.originData={
|
||||
vehicleType:'',
|
||||
vehicleStatus:'',
|
||||
virtualVehicle:'',
|
||||
serviceIds:[],
|
||||
hasLiabilityInsurance:'',
|
||||
insuranceCorp:'',
|
||||
liabilityInsuranceStartTime:'',
|
||||
liabilityInsuranceEndTime:'',
|
||||
insurancePicturePhoto:''
|
||||
}
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
@@ -587,6 +647,10 @@ export default {
|
||||
const [start, end] = date;
|
||||
this.showDatePicker = false;
|
||||
this.dateVal = `${this.formatDate(start)} - ${this.formatDate(end)}`;
|
||||
console.log('this.dateVal',this.dateVal)
|
||||
let timeObj = this.formatDateTimeRange(this.dateVal)
|
||||
console.log('timeObj',timeObj)
|
||||
|
||||
},
|
||||
formatDateTimeRange(str) {
|
||||
const [startStr, endStr] = str.split(' - ').map(s => s.trim());
|
||||
@@ -637,6 +701,9 @@ export default {
|
||||
this.vehicleLicense = 5
|
||||
}
|
||||
},
|
||||
onOversize() {
|
||||
this.$toast(`文件大小不能超过5M`)
|
||||
},
|
||||
async vehicleLicenseFrontHandler(file) { // 上传 行驶证首页
|
||||
const formData = new FormData();
|
||||
formData.append("file" , file.file);
|
||||
@@ -736,6 +803,8 @@ export default {
|
||||
this.vehicleLicenseInfo.overallDimension = '';
|
||||
this.vehicleLicenseInfo.tractionWeight = '';
|
||||
this.vehicleLicenseInfo.backPlateNo = ''; // 行驶证副页 车牌号,仅用来判断 ocr 识别是否成功
|
||||
this.vehicleLicenseInfo.energySign = '';
|
||||
this.vehicleLicenseInfo.marks = ''
|
||||
let res = await ocrHandler({
|
||||
ocrType: 3,
|
||||
imageUrl: this.vehicleLicenseBack,
|
||||
@@ -751,6 +820,8 @@ export default {
|
||||
this.vehicleLicenseInfo.overallDimension = backInfo?.externalSize;
|
||||
this.vehicleLicenseInfo.tractionWeight = backInfo?.TotalQuasiMass;
|
||||
this.vehicleLicenseInfo.backPlateNo = backInfo?.plateNo;
|
||||
this.vehicleLicenseInfo.energySign = backInfo?.fuelType;
|
||||
this.vehicleLicenseInfo.marks = backInfo?.marks
|
||||
}
|
||||
console.log('this.vehicle', this.vehicleLicenseInfo)
|
||||
},
|
||||
@@ -793,6 +864,7 @@ export default {
|
||||
let result=res.data;
|
||||
console.log("result",result)
|
||||
this.id=result.vehicleId
|
||||
this.approvalForm.vehicleId=this.id
|
||||
this.carNum=result.plateNumber
|
||||
this.isJoin=result.hasPolymerization.code
|
||||
this.selectedOption=result.vehicleType?.split(',').map((item)=>{
|
||||
@@ -834,6 +906,17 @@ export default {
|
||||
if( result.liabilityInsuranceEndTime && result.liabilityInsuranceStartTime ) {
|
||||
this.dateVal = formatDate1(result.liabilityInsuranceStartTime) + ' - ' + formatDate1(result.liabilityInsuranceEndTime)
|
||||
}
|
||||
this.originData={
|
||||
vehicleType:result.vehicleType,
|
||||
vehicleStatus:result.vehicleStatus,
|
||||
virtualVehicle:result.virtualVehicle,
|
||||
serviceIds:result.serviceIds,
|
||||
hasLiabilityInsurance:result.hasLiabilityInsurance,
|
||||
insuranceCorp:result.insuranceCorp,
|
||||
liabilityInsuranceStartTime:result.liabilityInsuranceStartTime,
|
||||
liabilityInsuranceEndTime:result.liabilityInsuranceEndTime,
|
||||
insurancePicturePhoto:result.insurancePicturePhoto
|
||||
}
|
||||
},
|
||||
isChange(e){
|
||||
this.hasLiabilityInsurance=e
|
||||
@@ -851,11 +934,191 @@ export default {
|
||||
isVehicleChange(e) {
|
||||
this.vehicleStatus=e
|
||||
},
|
||||
async submitBtn(){
|
||||
if( !this.vehicleLicenseFront ) {
|
||||
this.$toast('行驶证主页照片不能为空')
|
||||
async submitAuditHandle(){//提交审核
|
||||
let urls=[]
|
||||
this.insurancePictureFiles?.forEach(item => urls.push(item.url))
|
||||
let time =this.dateVal ? this.formatDateTimeRange(this.dateVal) : ''
|
||||
// let time1=time.endTime?.split(' ')
|
||||
let newFormValue={
|
||||
vehicleStatus:this.vehicleStatus,
|
||||
virtualVehicle:this.virtualVehicle,
|
||||
serviceIds:this.$refs.tree.getCheckedKeys(true) || [],
|
||||
vehicleType:this.selectedOption?.join(',') || '',
|
||||
hasLiabilityInsurance:this.hasLiabilityInsurance,
|
||||
insuranceCorp:this.insuranceCorp,
|
||||
insurancePicturePhoto:urls?.join(','),
|
||||
// liabilityInsuranceStartTime:time.startTime ? time.startTime : '',
|
||||
liabilityInsuranceEndTime:time.endTime ? time.endTime : '',
|
||||
}
|
||||
console.log('newFormValue',newFormValue)
|
||||
let oldFormValue={...this.originData,}
|
||||
console.log('oldFormValue',oldFormValue)
|
||||
|
||||
this.compareObjects(newFormValue,oldFormValue);
|
||||
if( this.changedFields && this.changedFields.length>0){
|
||||
const arr1Set = new Set(this.changedFields);
|
||||
const change1=['vehicleStatus','virtualVehicle','vehicleType','serviceIds']
|
||||
const change2=['hasLiabilityInsurance','insurancePicturePhoto','insuranceCorp','liabilityInsuranceStartTime','liabilityInsuranceEndTime']
|
||||
const serviceChangeItems = change1.filter(item => arr1Set.has(item));
|
||||
console.log('serviceChangeItems',serviceChangeItems)
|
||||
if(serviceChangeItems?.length>0){
|
||||
this.vehicleInfoChange=true
|
||||
this.approvalForm.serviceChange={}
|
||||
change1.forEach(key => {
|
||||
this.approvalForm.serviceChange[key] = this[key];
|
||||
if(key=='serviceIds'){
|
||||
this.approvalForm.serviceChange[key]=this.$refs.tree.getCheckedKeys(true)
|
||||
}
|
||||
if(key=='vehicleType'){
|
||||
this.approvalForm.serviceChange[key]=this.selectedOption?.join(',') || ''
|
||||
}
|
||||
});
|
||||
}else {
|
||||
this.vehicleInfoChange=false
|
||||
this.approvalForm.serviceChange=null
|
||||
}
|
||||
const insuranceChangeItems = change2.filter(item => arr1Set.has(item));
|
||||
console.log('insuranceChangeItems',insuranceChangeItems)
|
||||
if(insuranceChangeItems?.length>0){
|
||||
this.insuranceChange=true
|
||||
this.approvalForm.insuranceChange={}
|
||||
change2.forEach(key => {
|
||||
this.approvalForm.insuranceChange[key] =this[key];
|
||||
let time =this.dateVal ? this.formatDateTimeRange(this.dateVal) : ''
|
||||
if(key=='liabilityInsuranceStartTime' && time && time.startTime){
|
||||
this.approvalForm.insuranceChange[key]=time.startTime
|
||||
}
|
||||
if(key=='liabilityInsuranceEndTime' && time && time.endTime){
|
||||
// let time1=time.endTime?.split(' ')
|
||||
this.approvalForm.insuranceChange[key]= time.endTime
|
||||
}
|
||||
if(key=='insurancePicturePhoto' && this.insurancePictureFiles?.length>0){
|
||||
let urls=[]
|
||||
this.insurancePictureFiles?.forEach(item => urls.push(item.url))
|
||||
this.approvalForm.insuranceChange[key]=urls?.join(',')
|
||||
}
|
||||
});
|
||||
}else {
|
||||
this.insuranceChange=false
|
||||
this.approvalForm.insuranceChange=null
|
||||
}
|
||||
}
|
||||
if((this.vehicleInfoChange || this.insuranceChange) && this.id){
|
||||
this.approvalDialogShow=true
|
||||
console.log('11111',this.approvalForm.serviceChange)
|
||||
console.log('2222',this.approvalForm.insuranceChange)
|
||||
}else {
|
||||
this.approvalDialogShow=false
|
||||
await this.submitBtn();
|
||||
}
|
||||
},
|
||||
async submitApprovalHandle(){//提交审批-走接口
|
||||
if(this.vehicleInfoChange){
|
||||
if(!(this.selectedOption.length > 0)){
|
||||
this.$toast('车辆类别不能为空')
|
||||
return
|
||||
}
|
||||
let res = this.checkDisabledItems();
|
||||
if(!res) {
|
||||
return false
|
||||
}
|
||||
if( !this.virtualVehicle ) {
|
||||
this.$toast('车辆属性不能为空')
|
||||
return
|
||||
}
|
||||
if( !this.vehicleStatus ) {
|
||||
this.$toast('车辆状态不能为空')
|
||||
return
|
||||
}
|
||||
if(!this.approvalForm.serviceRemark){
|
||||
this.$toast('车辆和服务备注不能为空')
|
||||
return
|
||||
}
|
||||
}
|
||||
if(this.insuranceChange){
|
||||
if(this.hasLiabilityInsurance === null || this.hasLiabilityInsurance === undefined || this.hasLiabilityInsurance === '') { // 有职业责任险,就需要有保单照片
|
||||
this.$toast('救援职业责任险不能为空')
|
||||
return
|
||||
}
|
||||
if(!this.insurancePicturePhoto && this.hasLiabilityInsurance == 1) { // 有职业责任险,就需要有保单照片
|
||||
this.$toast('保单照片不能为空')
|
||||
return
|
||||
}
|
||||
if(this.selectedOption?.length==1 && this.selectedOption.includes(1)){//选择小修车时需清除原本的拖车服务类型
|
||||
let data=this.oldSupplierServiceList.filter(item => item.name ==='拖车服务')
|
||||
this.serviceIds = this.serviceIds.filter(item => !data[0].children.some(obj => obj.id === item));
|
||||
}
|
||||
if(!this.insuranceCorp && this.hasLiabilityInsurance == 1) { // 有职业责任险,就需要有保单照片
|
||||
this.$toast('承保保司不能为空')
|
||||
return
|
||||
}
|
||||
if(!this.dateVal && this.hasLiabilityInsurance == 1) { // 有职业责任险,就需要有保单照片
|
||||
this.$toast('保单有效期不能为空')
|
||||
return
|
||||
}
|
||||
if(!this.approvalForm.insuranceRemark){
|
||||
this.$toast('保单备注不能为空')
|
||||
return
|
||||
}
|
||||
}
|
||||
try {
|
||||
this.loading = true;
|
||||
await saveSupplierApproval({...this.approvalForm})
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
this.$toast('提交审批成功')
|
||||
this.closeApproval()
|
||||
setTimeout(()=>{
|
||||
this.$router.back();
|
||||
},2000)
|
||||
},
|
||||
compareObjects(newObj, oldObj) {
|
||||
this.changedFields=[]
|
||||
for (let key in newObj) {
|
||||
if( Array.isArray(newObj[key])){
|
||||
if(newObj[key]?.length != oldObj[key]?.length){
|
||||
this.changedFields.push(key);
|
||||
}else {
|
||||
// console.log('newObj[key]',newObj[key])
|
||||
if(newObj[key][0]?.id){
|
||||
let flag=newObj[key].every((item, index) => item.id == oldObj[key][index]?.id);
|
||||
// console.log('flag',flag)
|
||||
if(!flag){
|
||||
this.changedFields.push(key);
|
||||
}
|
||||
}else{
|
||||
let flag=newObj[key].every((value, index) => value == oldObj[key][index]);
|
||||
if(!flag){
|
||||
this.changedFields.push(key);
|
||||
}
|
||||
}
|
||||
}
|
||||
}else{
|
||||
let isEqual = (
|
||||
(newObj[key] == null && oldObj[key] == 0) ||
|
||||
(newObj[key] == 0 && oldObj[key] == null) ||
|
||||
(newObj[key] == oldObj[key])
|
||||
);
|
||||
if (!isEqual) {
|
||||
this.changedFields.push(key);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
closeApproval(){
|
||||
this.approvalForm.serviceRemark=''
|
||||
this.approvalForm.insuranceRemark=''
|
||||
this.approvalForm.vehicleOtherRemark=''
|
||||
this.approvalDialogShow=false
|
||||
this.vehicleInfoChange=false
|
||||
this.insuranceChange=false
|
||||
},
|
||||
async submitBtn(){
|
||||
if( !this.vehicleLicenseFront ) {
|
||||
this.$toast('行驶证主页照片不能为空')
|
||||
return
|
||||
}
|
||||
if( !this.vehicleLicenseBack ) {
|
||||
this.$toast('行驶证副页照片不能为空')
|
||||
return
|
||||
@@ -1076,4 +1339,69 @@ export default {
|
||||
pointer-events: none;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.pop_wrap {
|
||||
width: 340px;
|
||||
box-sizing: border-box;
|
||||
padding: 10px 15px;
|
||||
position: relative;
|
||||
.pop_title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.pop_content {
|
||||
width: 304px;
|
||||
font-size: 14px;
|
||||
color: #4C5361;
|
||||
margin-left: 6px;
|
||||
line-height: 25px;
|
||||
.iptWrap{
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
.tip_button_wrap {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
.close {
|
||||
border: 1px solid #ccc;
|
||||
color: black;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
.continue {
|
||||
padding: 6px 10px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
div:last-child{
|
||||
background-color: #3266be;
|
||||
color: #FFFFFF;
|
||||
margin-left: 8px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.loading {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.loading::after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid #000;
|
||||
border-top-color: transparent;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: translate(-50%, -50%) rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: translate(-50%, -50%) rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -95,6 +95,12 @@
|
||||
<span class="common_cls" @click.stop="showTip(item.liabilityInsuranceAuditMsg)" :class="getClass(item.rescueInsurance)?.className">{{item.rescueInsurance}}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="juhe flex-between">
|
||||
<span class="zdJuhe">车辆信息</span>
|
||||
<span class="flex-right" v-if="item.auditStatusStr">
|
||||
<span class="common_cls" @click.stop="showTip(item.auditMsg)" :class="getClass(item.auditStatusStr)?.className">{{item.auditStatusStr}}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="juhe flex-between">
|
||||
<span class="zdJuhe">最近登录时间</span>
|
||||
<span class="flex-right">{{item.lastLoginTime}}</span>
|
||||
@@ -326,7 +332,8 @@ export default {
|
||||
this.$router.push({
|
||||
name:'vehicleAdd',
|
||||
params:{
|
||||
id:item.vehicleId
|
||||
id:item.vehicleId,
|
||||
supplierId:item.supplierId
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
46
src/views/kpi/components/fit-table.vue
Normal file
46
src/views/kpi/components/fit-table.vue
Normal file
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<div class="wrap">
|
||||
<el-table :data="tableData"
|
||||
stripe
|
||||
border
|
||||
style="width: 100%"
|
||||
height="100%"
|
||||
v-loading="loading"
|
||||
class="custom-table">
|
||||
<el-table-column v-for="item in labelList" :key="item.prop" :label="item.label" :prop="item.prop" align="center">
|
||||
<template slot-scope="scope">{{scope.row[item.prop]}} </template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "fit-table",
|
||||
props: ['tableData', 'labelList', 'loading', 'isMobile','active'],
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/styles/mixin.scss";
|
||||
::v-deep .el-table{
|
||||
font-size: 11px;
|
||||
}
|
||||
::v-deep .el-table thead{
|
||||
color: #1D2129;
|
||||
font-weight: bold;
|
||||
}
|
||||
::v-deep .el-table th.el-table__cell.is-leaf {
|
||||
background-color: #E5E6EB;
|
||||
}
|
||||
::v-deep .el-table .el-table__cell{
|
||||
padding: 4px 0 !important;
|
||||
}
|
||||
</style>
|
||||
1203
src/views/kpi/kpiCaseNew.vue
Normal file
1203
src/views/kpi/kpiCaseNew.vue
Normal file
File diff suppressed because it is too large
Load Diff
@@ -39,7 +39,7 @@
|
||||
<van-tabs v-model="active" sticky @click="tabClickHandle">
|
||||
<van-tab v-for="(item,index) in tabArr" :key="index" :title="item.name"></van-tab>
|
||||
<div v-if="isMobile && !([0,1,2,3].includes(active))" class="tipArrow left">{{ leftArr }}</div>
|
||||
<div v-if="isMobile && !([9,10, 11].includes(active))" class="tipArrow right">>>></div>
|
||||
<div v-if="isMobile && !([7,8, 9].includes(active))" class="tipArrow right">>>></div>
|
||||
</van-tabs>
|
||||
<div v-loading="loadingData" :class="{'contentWrap':true,'webcontentWrap':!isMobile}" v-if="active===0">
|
||||
<!--<div :class="{'reciceOrder':true,'webCom':!isMobile}">
|
||||
@@ -232,13 +232,13 @@
|
||||
:total="total">
|
||||
</el-pagination>
|
||||
</div>
|
||||
<div v-loading="loadingData" class="contentWrap monthTotal" v-if="[5,6,7,8,9,10, 11].includes(active)">
|
||||
<div v-loading="loadingData" class="contentWrap monthTotal" v-if="[5,6,7,8,9].includes(active)">
|
||||
<div :class="{'comTab':true,'detailTable':isMobile}">
|
||||
<noFit-table :active='active' :is-mobile='isMobile' :table-data="detailList" :label-list="labelList"
|
||||
></noFit-table>
|
||||
</div>
|
||||
<el-pagination
|
||||
v-if="active !== 10"
|
||||
v-if="active !== 8"
|
||||
small
|
||||
:page-sizes="[20, 50, 100]"
|
||||
:current-page.sync="pageNum"
|
||||
@@ -279,8 +279,8 @@ export default {
|
||||
activeIndex: 0,
|
||||
//
|
||||
tabArr: [
|
||||
{name: '总览',value:0}, {name: '月/总'}, {name: '日/总'},{name: '月/师傅'}, {name: '日/师傅'}, {name: '拒单明细'},
|
||||
{name: '超时明细'}, {name: '催促明细'},{name: '投诉明细'}, {name: '不使用APP案件明细'}, {name: '车辆在线情况'} , {name: '聚合失败案件明细'}
|
||||
{name: '总览',value:0}, {name: '月/总'}, {name: '日/总'},{name: '月/师傅'}, {name: '日/师傅'}, /*{name: '拒单明细'},*/
|
||||
/*{name: '超时明细'},*/ {name: '催促明细'},{name: '投诉明细'}, {name: '不使用APP案件明细'}, {name: '车辆在线情况'} , {name: '聚合失败案件明细'}
|
||||
],
|
||||
list: [ {name: '服务评价'}, {name: 'APP使用情况'}, {name: ' 时效 '}],
|
||||
// driverList: [{name: '得分总览'},{name: '接单情况'}, {name: '服务评价'}, {name: 'APP使用情况'}, {name: '时效 '}],
|
||||
@@ -1096,7 +1096,7 @@ export default {
|
||||
|
||||
this.loading = false;
|
||||
} */
|
||||
else if ([ 5,6,7, 8,9,10,11].includes(this.active)) {
|
||||
else if ([ 5,6,7, 8,9].includes(this.active)) {
|
||||
this.detailList = []
|
||||
this.labelList = []
|
||||
let result = await getKpiDetailsData({
|
||||
@@ -1113,7 +1113,7 @@ export default {
|
||||
return {...item, date: formatVal};
|
||||
});
|
||||
this.loading = false
|
||||
if (this.active === 5) {//拒单明细
|
||||
/*if (this.active === 5) {//拒单明细
|
||||
this.labelList = [
|
||||
{label: '案件编号', prop: 'orderCode'},
|
||||
{label: '服务内容', prop: 'serviceName'},
|
||||
@@ -1133,7 +1133,8 @@ export default {
|
||||
{label: '超时时间', prop: 'time'},
|
||||
{label: '超时原因', prop: 'reason'},
|
||||
]
|
||||
} else if (this.active === 7) {//催促明细
|
||||
} else */
|
||||
if (this.active === 5) {//催促明细
|
||||
this.labelList = [
|
||||
{label: '案件编号', prop: 'orderCode'},
|
||||
{label: '二级合同名称', prop: 'contractName'},
|
||||
@@ -1150,7 +1151,7 @@ export default {
|
||||
{label: '市(B)', prop: 'bCity'},
|
||||
{label: '区(B)', prop: 'area'},
|
||||
]
|
||||
} else if (this.active === 8) {//投诉明细
|
||||
} else if (this.active === 6) {//投诉明细
|
||||
this.labelList = [
|
||||
{label: '案件编号', prop: 'orderCode'},
|
||||
{label: '服务内容', prop: 'serviceName'},
|
||||
@@ -1159,7 +1160,7 @@ export default {
|
||||
{label: '投诉类型', prop: 'complainTypeString'},
|
||||
{label: '责任供应商扣罚金额', prop: 'compensateFee'},
|
||||
]
|
||||
} else if (this.active === 9) {//不使用App案件明细
|
||||
} else if (this.active === 7) {//不使用App案件明细
|
||||
this.labelList = [
|
||||
{label: '案件编号', prop: 'orderCode'},
|
||||
{label: '服务内容', prop: 'serviceName'},
|
||||
@@ -1168,7 +1169,7 @@ export default {
|
||||
{label: '案件创建时间', prop: 'orderCreateTime'},
|
||||
{label: '事发地', prop: 'vehiclePointAddress'},
|
||||
]
|
||||
} else if (this.active === 10) {//车辆在线情况
|
||||
} else if (this.active === 8) {//车辆在线情况
|
||||
this.labelList = [
|
||||
// {label: '总车辆数', prop: 'totalCount'},
|
||||
{label: '在线车辆数(取每日的12点)', prop: 'twelveClockVehicleCount'},
|
||||
@@ -1177,7 +1178,7 @@ export default {
|
||||
{label: '在线率(在线车辆数/总车辆数)', prop: 'onlineRate'},
|
||||
// {label: '车辆平均在线时长', prop: ''},
|
||||
]
|
||||
} else if (this.active === 11) {//聚合失败案件明细
|
||||
} else if (this.active === 9) {//聚合失败案件明细
|
||||
this.labelList = [
|
||||
{label: '案件编号', prop: 'orderCode'},
|
||||
{label: '服务内容', prop: 'serviceName'},
|
||||
@@ -1605,19 +1606,19 @@ export default {
|
||||
},
|
||||
setType(type) {
|
||||
switch (type) {
|
||||
case 5:
|
||||
/*case 5:
|
||||
return 1;
|
||||
case 6:
|
||||
return 2;
|
||||
case 7:
|
||||
return 2;*/
|
||||
case 5:
|
||||
return 7;
|
||||
case 8:
|
||||
case 6:
|
||||
return 3;
|
||||
case 9:
|
||||
case 7:
|
||||
return 4;
|
||||
case 10:
|
||||
case 8:
|
||||
return 5;
|
||||
case 11:
|
||||
case 9:
|
||||
return 6;
|
||||
}
|
||||
},
|
||||
|
||||
@@ -65,6 +65,7 @@ export default {
|
||||
return {
|
||||
showPoup: false,
|
||||
used:false,
|
||||
saveLoading: true,
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
@@ -73,12 +74,19 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
async saveHandle() {
|
||||
await sendInsuranceEmail();
|
||||
this.$toast('操作成功');
|
||||
this.showPoup=false
|
||||
setTimeout(()=>{
|
||||
this.goBack()
|
||||
},1500)
|
||||
if( this.saveLoading ) {
|
||||
try {
|
||||
this.saveLoading = false;
|
||||
await sendInsuranceEmail();
|
||||
this.$toast('操作成功');
|
||||
this.showPoup = false
|
||||
setTimeout(() => {
|
||||
this.goBack()
|
||||
}, 1500)
|
||||
} finally {
|
||||
this.saveLoading = true;
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="bottom_wrap">
|
||||
<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 class="report_title">{{item.name}}</div>-->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
581
src/views/report/reportIndex-copy.vue
Normal file
581
src/views/report/reportIndex-copy.vue
Normal file
@@ -0,0 +1,581 @@
|
||||
<template>
|
||||
<!-- <van-pull-refresh v-model="isLoading" class="custom-pull-refresh safe-pull-refresh" @refresh="onRefresh">-->
|
||||
<div class="main_wrap">
|
||||
<div class="top_bg" :class="{'dispatch' : type == 1 , 'driver' : type != 1}">
|
||||
<!-- <div class="title">报备中心</div>-->
|
||||
</div>
|
||||
<div class="service_wrap">
|
||||
<service-item :order-info="orderInfo" @refresh="onRefreshHandler"></service-item>
|
||||
</div>
|
||||
<div class="chat_list" ref="chatList" >
|
||||
<!--ai对话框 s -->
|
||||
<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>
|
||||
</div>
|
||||
<report-list-item :report-list.sync="reportList" @getReport="getReportHandler" />
|
||||
<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">
|
||||
<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>
|
||||
<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>
|
||||
<!--预约时间报备 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>
|
||||
</div>
|
||||
<div class="report_common_content">
|
||||
<textarea class="report_textarea" id="text-input" rows="4" placeholder="点击这里输入补充报备内容" v-model.trim="remark"></textarea>
|
||||
<!-- <van-field-->
|
||||
<!-- v-model="remark"-->
|
||||
<!-- class="report_textarea"-->
|
||||
<!-- placeholder="点击这里输入补充报备内容" />-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="report_btn" @click="saveHandler">
|
||||
提交报备
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
|
||||
<van-popup v-model="showDatetime" round position="bottom">
|
||||
<van-datetime-picker
|
||||
class="dataTime"
|
||||
v-if="showDatetime"
|
||||
v-model="appointTime"
|
||||
type="datetime"
|
||||
:min-date="minDate"
|
||||
:filter="filter"
|
||||
@confirm="onConfirm"
|
||||
@cancel="showDatetime = false"
|
||||
/>
|
||||
</van-popup>
|
||||
</div>
|
||||
<!-- </van-pull-refresh>-->
|
||||
</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 },
|
||||
mixins: [myMixins],
|
||||
data() {
|
||||
return {
|
||||
addReportShow: false,
|
||||
remark: '',
|
||||
showDatetime: false,
|
||||
appointTime: '',
|
||||
minDate: new Date(),
|
||||
address: '',
|
||||
lat: '',
|
||||
lng: '',
|
||||
reportList: [],
|
||||
recordList: [],
|
||||
orderInfo: {},
|
||||
type: '', // 1 调度 2 司机
|
||||
currentInfo: '',
|
||||
userOrderId: '',
|
||||
userOrderCode: '',
|
||||
driverId: '',
|
||||
clickFlag: true,
|
||||
isLoading: false,
|
||||
}
|
||||
},
|
||||
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) {
|
||||
let _obj = JSON.parse(addressSession)
|
||||
this.address = _obj.startPoiAddress;
|
||||
this.lat = _obj.startLat;
|
||||
this.lng = _obj.startLng;
|
||||
this.adCode = _obj.adCode;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
filter(type, options) {
|
||||
if (type === 'minute') {
|
||||
return options.filter((option) => option % 5 === 0);
|
||||
}
|
||||
return options;
|
||||
},
|
||||
onRefreshHandler() {
|
||||
setTimeout(async () => {
|
||||
try {
|
||||
this.recordList = [];
|
||||
await this.getReportList();
|
||||
await this.getDetail();
|
||||
await this.getRecordList();
|
||||
await this.scrollToBottom();
|
||||
} finally {
|
||||
this.isLoading = false; // 结束加载状态
|
||||
}
|
||||
}, 100)
|
||||
},
|
||||
// 添加滚动方法
|
||||
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() {
|
||||
if( this.clickFlag ) {
|
||||
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
|
||||
}
|
||||
this.clickFlag = false;
|
||||
try {
|
||||
await newOrderReporting(data)
|
||||
Dialog.alert({
|
||||
title: '提示',
|
||||
message: "报备添加成功"
|
||||
}).then(async () => {
|
||||
await this.getRecordList()
|
||||
this.addReportShow = false
|
||||
this.scrollToBottom();
|
||||
this.initDialogData();
|
||||
this.clickFlag = true
|
||||
});
|
||||
} finally {
|
||||
this.clickFlag = true
|
||||
}
|
||||
}
|
||||
},
|
||||
initDialogData() {
|
||||
this.appointTime = '';
|
||||
this.address = '';
|
||||
this.lat = '';
|
||||
this.lng = '';
|
||||
this.remark = '';
|
||||
},
|
||||
addReportHandler(data) { // 点击添加报备弹框
|
||||
console.log('currentInfocurrentInfo', data)
|
||||
this.currentInfo = data;
|
||||
this.remark = '';
|
||||
this.addReportShow = true
|
||||
},
|
||||
getReportHandler(data) { // 点击获取当前报备信息
|
||||
console.log('dadadada', data.child)
|
||||
this.recordList.push({
|
||||
messageType: 4,
|
||||
content: data.child
|
||||
})
|
||||
this.scrollToBottom();
|
||||
if( data.child?.length == 1 ) {
|
||||
this.addReportHandler(data.child[0])
|
||||
}
|
||||
},
|
||||
async getDetail(){ // 订单详情
|
||||
if(this.userOrderId) {
|
||||
let result = await getOrderInfo({
|
||||
userOrderId: this.userOrderId,
|
||||
userOrderCode: this.userOrderCode
|
||||
})
|
||||
this.orderInfo = result.data
|
||||
} else {
|
||||
this.orderInfo = {}
|
||||
}
|
||||
|
||||
},
|
||||
async getReportList() { // 报备大类
|
||||
let res = await getReportListByOrder({
|
||||
orderId: this.userOrderId
|
||||
});
|
||||
this.reportList = res.data
|
||||
},
|
||||
onConfirm(data) {
|
||||
this.appointTime = timeFormat(new Date(data))
|
||||
this.showDatetime = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.custom-pull-refresh {
|
||||
height: 100% !important;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
#app {
|
||||
background: #F9FCFF !important;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.main_wrap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #F9FCFF !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// 添加以下样式确保正确的高度计算
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
.top_bg {
|
||||
width: 100%;
|
||||
height: 87px;
|
||||
/*.title {
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding-top: 52px;
|
||||
font-size: 17px;
|
||||
line-height: 24px;
|
||||
}*/
|
||||
}
|
||||
.dispatch { // 调度app头部背景色
|
||||
background: #354683;
|
||||
}
|
||||
.driver { // 司机app头部背景色
|
||||
background: #334885;
|
||||
}
|
||||
.service_wrap {
|
||||
margin-top: -75px;
|
||||
/*margin-bottom: 20px;*/
|
||||
}
|
||||
.chat_list {
|
||||
flex: 1;
|
||||
/*overflow: auto;*/
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
-webkit-overflow-scrolling: touch; // 为了iOS平滑滚动
|
||||
padding-top: 10px;
|
||||
/* 修复 iOS 滚动问题 */
|
||||
transform: translateZ(0);
|
||||
.top_tip_wrap {
|
||||
color: #7C8698;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
}
|
||||
.tip_wrap {
|
||||
color: #7C8698;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.ai_chat {
|
||||
padding: 25px 10px 20px;
|
||||
display: flex;
|
||||
.ai_left {
|
||||
.report_ai {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
.ai_right {
|
||||
.ai_title {
|
||||
color: #203152;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
li {
|
||||
font-size: 13px;
|
||||
color: #267EF0;
|
||||
line-height: 18px;
|
||||
margin-bottom: 15px;
|
||||
font-weight: bold;
|
||||
}
|
||||
li::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: #5680FA;
|
||||
border-radius: 50%; /* 圆形 */
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*客服人员,服务人员对话弹框样式 s*/
|
||||
.profile_photo {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
.mr {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.ml {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.mb20 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.customer_item {
|
||||
display: flex;
|
||||
padding-left: 10px;
|
||||
padding-right: 64px;
|
||||
.customer_left {
|
||||
}
|
||||
}
|
||||
.common_right {
|
||||
padding: 11px 13px;
|
||||
flex: 1;
|
||||
.customer_status::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: #5680FA;
|
||||
border-radius: 50%; /* 圆形 */
|
||||
margin-right: 10px;
|
||||
}
|
||||
.customer_status {
|
||||
font-size: 14px;
|
||||
color: #267EF0;
|
||||
line-height: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.service_status {
|
||||
font-size: 14px;
|
||||
color: #F07926;
|
||||
line-height: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.service_status::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: #F07926;
|
||||
border-radius: 50%; /* 圆形 */
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.customer_cls {
|
||||
border-radius: 0px 6px 6px 6px;
|
||||
background: #E3F0FF;
|
||||
}
|
||||
.service_cls {
|
||||
background: #FAEBD8;
|
||||
border-radius: 0px 6px 6px 6px;
|
||||
}
|
||||
.server_item {
|
||||
display: flex;
|
||||
padding-right: 10px;
|
||||
padding-left: 64px;
|
||||
}
|
||||
.response_con {
|
||||
font-size: 13px;
|
||||
color: #242A37;
|
||||
line-height: 18px;
|
||||
font-weight: bold;
|
||||
margin-top: 5px;
|
||||
}
|
||||
/*客服人员,服务人员对话弹框样式 e*/
|
||||
.dialog_wrap {
|
||||
.add_report_bg {
|
||||
width: 100%;
|
||||
height: 76px;
|
||||
}
|
||||
.report_content {
|
||||
width: calc(100% - 12px);
|
||||
margin: -30px auto 0;
|
||||
padding-right: 14px;
|
||||
padding-left: 20px;
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
padding-top: 25px;
|
||||
border-radius: 10px;
|
||||
.report_title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #267EF0;
|
||||
line-height: 22px;
|
||||
margin-bottom: 10px;
|
||||
.dot {
|
||||
width: 7px;
|
||||
height: 6px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
.report_time_content {
|
||||
padding: 13px;
|
||||
background: #F2F7FF;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #E2EAF6;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
.report_time_left {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: rgba(0, 0, 0, 0.9);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.add_report_time {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.report_arrow {
|
||||
width: 8px;
|
||||
height: 12px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
.report_common_content {
|
||||
margin-bottom: 27px;
|
||||
.report_textarea {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background: #F8FAFC;
|
||||
border-radius: 6px;
|
||||
min-height: 95px;
|
||||
border: 1px solid #E2EAF6;
|
||||
padding: 10px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.report_btn {
|
||||
width: calc(100% - 80px);
|
||||
height: 46px;
|
||||
line-height: 46px;
|
||||
background: #005DD5;
|
||||
border-radius: 23px;
|
||||
color: #FFFFFF;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin: 0 auto 40px;
|
||||
}
|
||||
}
|
||||
::v-deep .van-popup__close-icon {
|
||||
color: #0F458E;
|
||||
}
|
||||
</style>
|
||||
@@ -57,16 +57,30 @@
|
||||
</div>
|
||||
</div>
|
||||
<report-list-item :report-list.sync="reportList" @getReport="getReportHandler" />
|
||||
<van-popup ref="addReportModal" v-model="addReportShow" :close-on-click-overlay="false" closeable duration="0" round position="bottom">
|
||||
<van-popup ref="addReportModal" v-model="addReportShow" :close-on-click-overlay="false" z-index="500" 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">
|
||||
<div class="report_title" style="margin-bottom: 10px;"><span>{{currentInfo.name}}</span></div>
|
||||
<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>
|
||||
<!--<el-date-picker class="report_time_content owner_time high-zindex-picker"
|
||||
v-model="appointTime"
|
||||
type="datetime"
|
||||
:picker-options="pickerOptions"
|
||||
:minutes-step="5"
|
||||
format="yyyy-MM-dd HH:mm:00"
|
||||
placeholder="选择日期时间">
|
||||
</el-date-picker>-->
|
||||
<!--<el-date-picker
|
||||
v-model="appointTime"
|
||||
type="datetime"
|
||||
placeholder="选择日期时间">
|
||||
</el-date-picker>-->
|
||||
<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="">
|
||||
@@ -91,17 +105,15 @@
|
||||
</div>
|
||||
<!--修改地址报备 e -->
|
||||
</template>
|
||||
<div class="report_title">
|
||||
<img class="dot" src="@/assets/report/add_report_dot.png" alt="">
|
||||
<span>补充报备内容</span>
|
||||
</div>
|
||||
<div class="report_common_content">
|
||||
<textarea class="report_textarea" id="text-input" rows="4" placeholder="点击这里输入补充报备内容" v-model.trim="remark"></textarea>
|
||||
<!-- <van-field-->
|
||||
<!-- v-model="remark"-->
|
||||
<!-- class="report_textarea"-->
|
||||
<!-- placeholder="点击这里输入补充报备内容" />-->
|
||||
</div>
|
||||
<template v-if="currentInfo.component != 'time'">
|
||||
<div class="report_title">
|
||||
<img class="dot" src="@/assets/report/add_report_dot.png" alt="">
|
||||
<span>补充反馈内容</span>
|
||||
</div>
|
||||
<div class="report_common_content">
|
||||
<textarea class="report_textarea" id="text-input" rows="4" placeholder="点击这里输入补充反馈内容" v-model.trim="remark"></textarea>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="report_btn" @click="saveHandler">
|
||||
提交报备
|
||||
@@ -109,15 +121,16 @@
|
||||
</div>
|
||||
</van-popup>
|
||||
|
||||
<van-popup v-model="showDatetime" round position="bottom">
|
||||
<van-popup v-model="showDatetime" round position="bottom" :close-on-click-overlay="false">
|
||||
<van-datetime-picker
|
||||
class="dataTime"
|
||||
v-if="showDatetime"
|
||||
v-model="appointTime"
|
||||
type="datetime"
|
||||
:min-date="minDate"
|
||||
:filter="filter"
|
||||
@confirm="onConfirm"
|
||||
@cancel="showDatetime = false"
|
||||
@cancel="cancelHandler"
|
||||
/>
|
||||
</van-popup>
|
||||
</div>
|
||||
@@ -155,6 +168,12 @@
|
||||
driverId: '',
|
||||
clickFlag: true,
|
||||
isLoading: false,
|
||||
pickerOptions: {
|
||||
// 可选:限制预约时间不能小于当前时间(复用你原有逻辑)
|
||||
disabledDate: (time) => {
|
||||
return time.getTime() <= new Date().getTime();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
@@ -179,6 +198,12 @@
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
filter(type, options) {
|
||||
if (type === 'minute') {
|
||||
return options.filter((option) => option % 5 === 0);
|
||||
}
|
||||
return options;
|
||||
},
|
||||
onRefreshHandler() {
|
||||
setTimeout(async () => {
|
||||
try {
|
||||
@@ -238,10 +263,10 @@
|
||||
data.lat = this.lat;
|
||||
data.lng = this.lng;
|
||||
}
|
||||
if( !this.remark ) {
|
||||
/*if( !this.remark ) {
|
||||
Toast('备注内容不能为空')
|
||||
return
|
||||
}
|
||||
}*/
|
||||
this.clickFlag = false;
|
||||
try {
|
||||
await newOrderReporting(data)
|
||||
@@ -268,15 +293,21 @@
|
||||
this.remark = '';
|
||||
},
|
||||
addReportHandler(data) { // 点击添加报备弹框
|
||||
console.log('currentInfocurrentInfo', data)
|
||||
this.currentInfo = data;
|
||||
this.remark = '';
|
||||
this.addReportShow = true
|
||||
},
|
||||
getReportHandler(data) { // 点击获取当前报备信息
|
||||
console.log('dadadada', data.child)
|
||||
this.recordList.push({
|
||||
messageType: 4,
|
||||
content: data.child
|
||||
})
|
||||
this.scrollToBottom();
|
||||
if( data.child?.length == 1 ) {
|
||||
this.addReportHandler(data.child[0])
|
||||
}
|
||||
},
|
||||
async getDetail(){ // 订单详情
|
||||
if(this.userOrderId) {
|
||||
@@ -299,6 +330,10 @@
|
||||
onConfirm(data) {
|
||||
this.appointTime = timeFormat(new Date(data))
|
||||
this.showDatetime = false;
|
||||
},
|
||||
cancelHandler() {
|
||||
this.appointTime = ''
|
||||
this.showDatetime = false
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -535,6 +570,9 @@
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
.owner_time {
|
||||
padding: 0 !important;
|
||||
}
|
||||
.report_common_content {
|
||||
margin-bottom: 27px;
|
||||
.report_textarea {
|
||||
@@ -565,4 +603,22 @@
|
||||
::v-deep .van-popup__close-icon {
|
||||
color: #0F458E;
|
||||
}
|
||||
::v-deep .el-date-editor.el-input,::v-deep .el-date-editor.el-input__inner {
|
||||
width: 100%;
|
||||
}
|
||||
::v-deep .el-input__inner {
|
||||
background: none !important;
|
||||
}
|
||||
::v-deep .el-picker-panel {
|
||||
z-index: 100000000 !important;
|
||||
}
|
||||
.el-picker-panel{
|
||||
z-index: 100000000 !important;
|
||||
}
|
||||
::v-deep .high-zindex-picker {
|
||||
z-index: 9999 !important; // 高于 van-popup 默认层级(通常 1000-2000)
|
||||
}
|
||||
::v-deep .el-date-editor {
|
||||
overflow: visible !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user