1221 lines
34 KiB
Vue
1221 lines
34 KiB
Vue
<!-- 编辑救援工单 -->
|
|
<template>
|
|
<view class="content">
|
|
<VNavigationBarVue :title="title"></VNavigationBarVue>
|
|
<view class="dil">
|
|
<!-- 编辑模式提示 -->
|
|
<view class="edit-mode-indicator" v-if="isEditMode">
|
|
正在编辑工单
|
|
</view>
|
|
|
|
<view style="color: #000;font-size: 34rpx;font-weight:bold;padding: 24rpx 0;">救援地址</view>
|
|
|
|
<!-- 救援地址 头部-->
|
|
<view class="top">
|
|
<view style="flex: 1;width: 0;">
|
|
<!-- 起 -->
|
|
<view class="top-box">
|
|
<view class="tb-left">
|
|
<image class="uicon" src="@/static/icons/initiate/start.png" mode="aspectFit"></image>
|
|
<view @click="getmap()" style="width: 100%; position: relative;">
|
|
<view class="text1" v-show="four == ''" v-if="rescueType != 5">请选择救援地址</view>
|
|
<view class="text1" v-show="four == ''" v-if="rescueType == 5">请选择扣车地址</view>
|
|
<view class="text1" v-show="four != ''">{{province}}{{city}}{{area}}</view>
|
|
<view class="hong1" v-show="four == ''">*必填，请填写详细地址</view>
|
|
<view class="hong2" v-show="four != ''">
|
|
<textarea disabled style="width: 100%; height: 100rpx;"
|
|
:placeholder="four"></textarea>
|
|
<view style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1;">
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 终 -->
|
|
<view class="top-box" v-if="rescueType == 1 || rescueType == 8"
|
|
style="border-top:1px solid #EAEAEA;">
|
|
<view class="tb-left">
|
|
<image class="uicon" src="@/static/icons/initiate/end.png" mode="aspectFit"></image>
|
|
<view @click="getmap1()" style="width: 100%; overflow: hidden; position: relative;">
|
|
<view class="text1" v-show="four1 == ''">请选择终点地址</view>
|
|
<view class="text1" v-show="four1 != ''">{{province1}}{{city1}}{{area1}}</view>
|
|
<view class="hong2" v-show="four1 != ''">
|
|
<textarea disabled style="width: 100%; height: 100rpx;"
|
|
:placeholder="four1"></textarea>
|
|
<view style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1;">
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<image v-if="rescueType == 1 || rescueType == 8" class="start-end"
|
|
src="@/static/icons/initiate/qiehuan.png" mode="aspectFit">
|
|
</image>
|
|
</view>
|
|
|
|
<view style="color: #000;font-size: 34rpx;font-weight:bold;padding: 24rpx 0;">救援地址备注</view>
|
|
<view class="jyxx">
|
|
<view class="jyxx-tinput">
|
|
<view class="text1">救援地址备注</view>
|
|
<view class="you">
|
|
<textarea auto-height v-model="remarkRescuePosition" placeholder="请输入救援地址备注"
|
|
placeholder-style="color: #929292;font-size:24rpx"
|
|
style="width:100%;min-height:100rpx;"></textarea>
|
|
</view>
|
|
</view>
|
|
<view class="jyxx-tinput">
|
|
<view class="text1">目的地备注</view>
|
|
<view class="you">
|
|
<textarea auto-height v-model="remarkDestinationInfo" placeholder="请输入目的地备注"
|
|
placeholder-style="color: #929292;font-size:24rpx"
|
|
style="width:100%;min-height:100rpx;"></textarea>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view style="color: #000;font-size: 34rpx;font-weight: bold;padding: 24rpx 0;">救援信息</view>
|
|
|
|
<!-- 填空 -->
|
|
<view class="jyxx">
|
|
<view class="jyxx-tinput" @click="show = true" v-if="isAppointment == 1">
|
|
<view class="text1"> <text class="hong1">*</text> 预约时间</view>
|
|
<view class="you">
|
|
<text>{{rescueTime}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="jyxx-tinput">
|
|
<view class="text1">故障车经办人</view>
|
|
<view class="you">
|
|
<input type="text" placeholder-style="color: #929292;font-size:24rpx" placeholder="请输入故障车经办人"
|
|
v-model="connectionName">
|
|
</view>
|
|
</view>
|
|
<view class="jyxx-tinput">
|
|
<view class="text1">经办人手机号</view>
|
|
<view class="you">
|
|
<input type="text" placeholder-style="color: #929292;font-size:24rpx" placeholder="请输入经办人手机号"
|
|
v-model="connectionPhone">
|
|
</view>
|
|
</view>
|
|
<view class="jyxx-tinput">
|
|
<view class="text1">车主</view>
|
|
<view class="you">
|
|
<input type="text" placeholder-style="color: #929292;font-size:24rpx" placeholder="请输入车主"
|
|
v-model="carOwner">
|
|
</view>
|
|
</view>
|
|
<view class="jyxx-tinput">
|
|
<view class="text1">车主手机号</view>
|
|
<view class="you">
|
|
<input type="text" placeholder-style="color: #929292;font-size:24rpx" placeholder="请输入车主手机号"
|
|
v-model="carOwnerPhone">
|
|
</view>
|
|
</view>
|
|
<view class="jyxx-tinput">
|
|
<view class="text1">车牌号</view>
|
|
<view class="you">
|
|
<input type="text" placeholder-style="color: #929292;font-size:24rpx" placeholder="请输入车牌号"
|
|
v-model="licenseNum">
|
|
</view>
|
|
</view>
|
|
<view class="jyxx-tinput">
|
|
<view class="text1">车型(品牌)</view>
|
|
<view class="you">
|
|
<input type="text" placeholder-style="color: #929292;font-size:24rpx" placeholder="请输入车型"
|
|
v-model="carBrand">
|
|
</view>
|
|
</view>
|
|
<view class="jyxx-tinput">
|
|
<view class="text1"> <text class="hong1">*</text> 车辆类型</view>
|
|
<view class="xz">
|
|
<view :class="{'xlan':carzhi == index}" class="kuang" v-for="(item,index) in car" :key="index"
|
|
@click="getzhi(index,item.value)">
|
|
<view class="">{{item.label}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="jyxx-tinput">
|
|
<view class="text1"> <text class="hong1">*</text> 故障车辆是否为新能源</view>
|
|
<view class="xz" style="flex-wrap: wrap;row-gap: 20rpx">
|
|
<view :class="{'xlan': ifNewEnergy==='1'}" class="kuang" @click="ifNewEnergy = '1'">
|
|
<view class="">是</view>
|
|
</view>
|
|
<view :class="{'xlan': ifNewEnergy==='0'}" class="kuang" @click="ifNewEnergy = '0'">
|
|
<view class="">否</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="jyxx-tinput">
|
|
<view class="text1"> <text class="hong1">*</text> 故障类型选择</view>
|
|
<view class="channel-container">
|
|
<view :class="{'channel-item-selected': selectedFaultTypeId === item.id}" class="channel-item"
|
|
v-for="(item,index) in faultTypeOptions" :key="index" @click="chooseFaultType(item)">
|
|
<view class="channel-text">{{item.name}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="xinput-fault" v-if="selectedFaultTypeId">
|
|
<view class="text1"> <text class="hong1">*</text> 故障现象选择</view>
|
|
<view class="source-container">
|
|
<view :class="{'source-item-selected': selectedPhenomenonId === item.id}" class="source-item"
|
|
v-for="(item,index) in filteredPhenomenonOptions" :key="index"
|
|
@click="choosePhenomenon(item)">
|
|
<view class="source-text">{{item.name}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="jyxx-tinput">
|
|
<view class="text1">故障现象备注</view>
|
|
<view class="you">
|
|
<textarea auto-height v-model="faultPhenomenon" placeholder="请输入故障现象备注"
|
|
placeholder-style="color: #929292;font-size:24rpx"
|
|
style="width:100%;min-height:100rpx;"></textarea>
|
|
</view>
|
|
</view>
|
|
<view class="jyxx-tinput">
|
|
<view class="text1">救援需求</view>
|
|
<view class="you">
|
|
<textarea auto-height v-model="rescueNeeds" placeholder="请输入救援需求"
|
|
placeholder-style="color: #929292;font-size:24rpx"
|
|
style="width:100%;min-height:100rpx;"></textarea>
|
|
</view>
|
|
</view>
|
|
<view class="jyxx-tinput">
|
|
<view class="text1">预估下车地</view>
|
|
<view class="you">
|
|
<input type="text" placeholder-style="color: #929292;font-size:24rpx" placeholder="请输入预估下车地"
|
|
v-model="estimateDownCar">
|
|
</view>
|
|
</view>
|
|
<view class="jyxx-tinput">
|
|
<view class="text1">预估费用(元)</view>
|
|
<view class="you">
|
|
<input type="text" placeholder-style="color: #929292;font-size:24rpx" placeholder="请输入预估费用"
|
|
v-model="estimateMoney">
|
|
</view>
|
|
</view>
|
|
<view class="jyxx-tinput" @click="shows = true" v-if="rescueType == 5">
|
|
<view class="text1"> <text class="hong1">*</text> 扣车地点</view>
|
|
<view class="you">
|
|
<text>{{kcname || ''}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="xinput">
|
|
<view class="text1"> <text class="hong1">*</text> 业务渠道选择</view>
|
|
<view class="channel-container">
|
|
<view :class="{'channel-item-selected': selectedChannelId === item.id}" class="channel-item"
|
|
v-for="(item,index) in channelOptions" :key="index" @click="chooseChannel(item)">
|
|
<view class="channel-text">{{item.name}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="xinput" v-if="selectedChannelId">
|
|
<view class="text1"> <text class="hong1">*</text> 来源选择</view>
|
|
<view class="source-container">
|
|
<view :class="{'source-item-selected': selectedSourceId === item.id}" class="source-item"
|
|
v-for="(item,index) in filteredSourceOptions" :key="index" @click="chooseSource(item)">
|
|
<view class="source-text">{{item.name}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="xinput" v-if="orderStatus == '1' || orderStatus == '0' ">
|
|
<view class="text1"> <text class="hong1">*</text> 收费类型</view>
|
|
<view class="xz">
|
|
<view :class="{'xlan':maneizhi == index}" class="kuang" v-for="(item,index) in manei" :key="index"
|
|
@click="getzhi2(index,item.value)">
|
|
<view class="">{{item.label}}</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="feeType == 2" style="margin-top: 10rpx;">
|
|
<text style="font-size: 24rpx; color: red; font-weight: bold;">
|
|
* 选择挂账即为同意该订单挂账，
|
|
司机在收费时可以选择该订单为挂账</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="xinput" v-if="rescueType !== 5">
|
|
<view class="text1"> <text class="hong1">*</text> 是否扣车</view>
|
|
<view class="xz" style="flex-wrap: wrap;row-gap: 20rpx">
|
|
<view :class="{'xlan': isKouChe==='1'}" class="kuang" @click="isKouChe = '1'">
|
|
<view class="">是</view>
|
|
</view>
|
|
<view :class="{'xlan': isKouChe==='0'}" class="kuang" @click="isKouChe = '0'">
|
|
<view class="">否</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="tinput">
|
|
<view class="text1" style="flex-shrink: 0;"> 备注</view>
|
|
<view class="you">
|
|
<input type="text" placeholder-style="color: #929292;font-size: 24rpx" placeholder="添加备注"
|
|
v-model="rescueDetail">
|
|
</view>
|
|
</view>
|
|
<u-datetime-picker :show="show" v-model="value1" @confirm="confirms" @cancel="cancels"
|
|
mode="datetime"></u-datetime-picker>
|
|
|
|
<view class="anniu" @click="postadd()">
|
|
<text>保存修改</text>
|
|
</view>
|
|
<view style="width: 100%; height: 60px;"></view>
|
|
</view>
|
|
<view class="">
|
|
<u-picker :show="shows" :columns="columns" @confirm="confirmm" @cancel="cancelm" keyName="label"></u-picker>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import tabBar from '../../components/tabBar/tabBar.vue'
|
|
import VNavigationBarVue from '../../components/VNavigationBar.vue'
|
|
import request from '../../utils/request'
|
|
import {
|
|
getTenantId
|
|
} from "@/utils/auth";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
isEditMode: true,
|
|
infoId: '',
|
|
orderId: '',
|
|
isKouChe: '0',
|
|
show: false,
|
|
value1: Number(new Date()),
|
|
rescueLongitude: '',
|
|
rescueLatitude: '',
|
|
connectionName: '',
|
|
connectionPhone: '',
|
|
carOwner: '',
|
|
carOwnerPhone: '',
|
|
rescuePosition: '',
|
|
rescueDetail: '',
|
|
rescueType: '',
|
|
carType: 1,
|
|
feeType: null,
|
|
licenseNum: '',
|
|
carBrand: '',
|
|
remarkDestinationInfo: '',
|
|
remarkRescuePosition: '',
|
|
faultPhenomenon: '',
|
|
rescueNeeds: '',
|
|
estimateDownCar: '',
|
|
estimateMoney: '',
|
|
isAppointment: 0,
|
|
rescueTime: '请选择约定时间',
|
|
carzhi: null,
|
|
maneizhi: null,
|
|
province: '',
|
|
city: '',
|
|
area: '',
|
|
four: '',
|
|
province1: '',
|
|
city1: '',
|
|
area1: '',
|
|
four1: '',
|
|
shows: false,
|
|
kcname: '',
|
|
columns: [],
|
|
title: '编辑工单',
|
|
manei: [],
|
|
car: [],
|
|
selectedChannelId: null,
|
|
selectedChannelName: '',
|
|
selectedSourceId: null,
|
|
selectedSourceName: null,
|
|
channelOptions: [],
|
|
sourceOptions: [],
|
|
selectedFaultTypeId: null,
|
|
selectedFaultTypeName: '',
|
|
selectedPhenomenonId: null,
|
|
selectedPhenomenonName: null,
|
|
faultTypeOptions: [],
|
|
phenomenonOptions: [],
|
|
ifNewEnergy: '',
|
|
userinfo: {},
|
|
destinationLongitude: null,
|
|
destinationLatitude: null,
|
|
destinationInfo: '',
|
|
orderStatus: '',
|
|
}
|
|
},
|
|
computed: {
|
|
filteredSourceOptions() {
|
|
if (!this.selectedChannelId) return [];
|
|
return this.sourceOptions.filter(item => item.pid == this.selectedChannelId);
|
|
},
|
|
filteredPhenomenonOptions() {
|
|
if (!this.selectedFaultTypeId) return [];
|
|
return this.phenomenonOptions.filter(item => item.pid == this.selectedFaultTypeId);
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
console.log('option', option)
|
|
this.rescueType = option.rescueType;
|
|
|
|
this.newtwo().then(() => {
|
|
if (option.data) {
|
|
const orderData = JSON.parse(decodeURIComponent(option.data));
|
|
this.populateFormData(orderData);
|
|
}
|
|
}).catch(error => {
|
|
console.error('加载选项数据失败:', error);
|
|
});
|
|
|
|
if (this.rescueType) {
|
|
switch (this.rescueType) {
|
|
case '1':
|
|
this.title = '编辑拖车工单'
|
|
break;
|
|
case '2':
|
|
this.title = '编辑送油工单'
|
|
break;
|
|
case '3':
|
|
this.title = '编辑搭电工单'
|
|
break;
|
|
case '4':
|
|
this.title = '编辑换胎工单'
|
|
break;
|
|
case '5':
|
|
this.title = '编辑扣车工单'
|
|
break;
|
|
default:
|
|
this.title = '编辑工单'
|
|
break;
|
|
}
|
|
}
|
|
|
|
// this.newtwo();
|
|
this.kcdd();
|
|
},
|
|
components: {
|
|
tabBar,
|
|
VNavigationBarVue
|
|
},
|
|
methods: {
|
|
async newtwo() {
|
|
return new Promise(async (resolve, reject) => {
|
|
try {
|
|
// 并行加载所有选项数据
|
|
const [feeTypeRes, carTypeRes] = await Promise.all([
|
|
request({
|
|
url: '/rescue/dict/data/type/fee_type',
|
|
method: 'get',
|
|
}),
|
|
request({
|
|
url: '/rescue/dict/data/type/rescue_car_type',
|
|
method: 'get',
|
|
})
|
|
]);
|
|
|
|
this.manei = feeTypeRes.data;
|
|
this.car = carTypeRes.data;
|
|
|
|
this.userinfo = uni.getStorageSync('userInfo');
|
|
|
|
// 并行加载其他选项数据
|
|
await Promise.all([
|
|
this.loadChannelOptions(),
|
|
this.loadSourceOptions(),
|
|
this.loadFaultTypeOptions(),
|
|
this.loadPhenomenonOptions()
|
|
]);
|
|
|
|
resolve();
|
|
} catch (error) {
|
|
console.error('加载选项数据失败:', error);
|
|
reject(error);
|
|
}
|
|
});
|
|
},
|
|
|
|
kcdd() {
|
|
request({
|
|
url: '/system/rescueInfo/getKcPosition',
|
|
method: 'get',
|
|
}).then((res) => {
|
|
this.columns.push(res.data)
|
|
})
|
|
},
|
|
|
|
confirmm(e) {
|
|
this.kcname = e.value[0].label
|
|
this.shows = false
|
|
},
|
|
|
|
cancelm() {
|
|
this.shows = false
|
|
},
|
|
|
|
confirms(e) {
|
|
const timestamp = e.value
|
|
const date = new Date(timestamp);
|
|
const year = date.getFullYear();
|
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
|
const day = String(date.getDate()).padStart(2, '0');
|
|
const hours = String(date.getHours()).padStart(2, '0');
|
|
const minutes = String(date.getMinutes()).padStart(2, '0');
|
|
this.rescueTime = `${year}-${month}-${day} ${hours}:${minutes}`
|
|
this.show = false
|
|
},
|
|
|
|
cancels() {
|
|
this.show = false
|
|
},
|
|
|
|
async postadd() {
|
|
// this.rescueSceneImage = this.imageList.join(",")
|
|
if (typeof this.rescueTime === "number") {} else {
|
|
this.rescueTime = ''
|
|
}
|
|
if (this.isAppointment == 'undefined') {
|
|
this.isAppointment = 0
|
|
}
|
|
if (this.rescueLongitude == "" || this.rescueLatitude == "") {
|
|
uni.showToast({
|
|
title: '起点位置不能为空',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
if (this.feeType === null) {
|
|
uni.showToast({
|
|
title: '请选择收费类型',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
let data = {
|
|
id: this.infoId,
|
|
rescueLongitude: this.rescueLongitude,
|
|
rescueLatitude: this.rescueLatitude,
|
|
destinationLongitude: this.destinationLongitude,
|
|
destinationLatitude: this.destinationLatitude,
|
|
connectionName: this.connectionName,
|
|
connectionPhone: this.connectionPhone,
|
|
carOwner: this.carOwner,
|
|
carOwnerPhone: this.carOwnerPhone,
|
|
rescuePosition: this.rescuePosition,
|
|
destinationInfo: this.destinationInfo,
|
|
licenseNum: this.licenseNum,
|
|
isAppointment: this.isAppointment,
|
|
rescueTime: this.rescueTime,
|
|
rescueDetail: this.rescueDetail,
|
|
rescueSceneImage: this.rescueSceneImage,
|
|
rescueType: this.rescueType,
|
|
carType: this.carType,
|
|
feeType: this.feeType,
|
|
kcPosition: this.kcname,
|
|
isKouChe: this.isKouChe,
|
|
faultPhenomenon: this.faultPhenomenon,
|
|
rescueNeeds: this.rescueNeeds,
|
|
estimateDownCar: this.estimateDownCar,
|
|
estimateMoney: this.estimateMoney,
|
|
isWeiXiu: '0',
|
|
carBrand: this.carBrand,
|
|
sectionRoad: (this.seletedRoad && this.seletedRoad.length > 0) ? this.seletedRoad[0] : null,
|
|
channel: this.selectedChannelName,
|
|
source: this.selectedSourceName,
|
|
remarkRescuePosition: this.remarkRescuePosition,
|
|
remarkDestinationInfo: this.remarkDestinationInfo,
|
|
faultType: this.selectedFaultTypeName,
|
|
phenomenon: this.selectedPhenomenonName,
|
|
ifNewEnergy: this.ifNewEnergy,
|
|
orderId: this.orderId,
|
|
}
|
|
|
|
try {
|
|
const res = await request({
|
|
url: '/app/rescueInfo/updateRescueInfoOnHomePage',
|
|
method: 'put',
|
|
data: data
|
|
});
|
|
|
|
if (res.code == 200) {
|
|
uni.showToast({
|
|
title: '修改成功'
|
|
})
|
|
|
|
// 触发全局事件，通知首页刷新数据
|
|
// uni.$emit('refreshHomePage');
|
|
|
|
setTimeout(() => {
|
|
uni.navigateBack({
|
|
delta: 1,
|
|
})
|
|
}, 1500);
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg || '修改失败',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
} catch (error) {
|
|
uni.showToast({
|
|
title: '修改失败，请重试',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
},
|
|
|
|
getmap() {
|
|
let that = this
|
|
console.log('选择位置Start')
|
|
uni.getLocation({
|
|
type: 'wgs84',
|
|
success: function(getres) {
|
|
console.log('当前位置的经度：' + getres.longitude);
|
|
console.log('当前位置的纬度：' + getres.latitude);
|
|
|
|
uni.chooseLocation({
|
|
latitude: getres.latitude,
|
|
longitude: getres.longitude,
|
|
success: function(res) {
|
|
console.log(res)
|
|
console.log('位置名称：' + res.name);
|
|
console.log('详细地址：' + res.address);
|
|
console.log('纬度：' + res.latitude);
|
|
console.log('经度：' + res.longitude);
|
|
that.rescueLongitude = res.longitude
|
|
that.rescueLatitude = res.latitude
|
|
|
|
that.rescuePosition = res.address
|
|
var address = res.address;
|
|
var reg = /.+?(省|市|自治区|自治州|县|区)/g;
|
|
let addressList = address.match(reg).toString().split(",");
|
|
if (addressList[0] == '重庆市' || addressList[0] == '北京市' ||
|
|
addressList[0] == '天津市' ||
|
|
addressList[0] == '上海市') {
|
|
that.province = addressList[0];
|
|
that.city = '市辖区';
|
|
that.area = addressList[1];
|
|
that.four = address.replace(that.province, '').replace(that
|
|
.city, '').replace(that
|
|
.area, '');
|
|
} else {
|
|
that.province = addressList[0];
|
|
that.city = addressList[1];
|
|
that.area = addressList[2];
|
|
that.four = address.replace(that.province, '').replace(that
|
|
.city, '').replace(that
|
|
.area, '');
|
|
};
|
|
console.log(that.four.indexOf(res.name));
|
|
if (that.four.indexOf(res.name) < 0) {
|
|
that.four = that.four + res.name
|
|
that.rescuePosition = that.rescuePosition + res.name
|
|
}
|
|
|
|
},
|
|
fail: (err) => {
|
|
console.log(err, 'err')
|
|
},
|
|
complete(res) {
|
|
console.log(res, 'cpmplete')
|
|
}
|
|
});
|
|
}
|
|
});
|
|
},
|
|
|
|
getmap1() {
|
|
let that = this
|
|
console.log('选择位置End')
|
|
uni.getLocation({
|
|
type: 'wgs84',
|
|
success: function(getres) {
|
|
console.log('当前位置的经度：' + getres.longitude);
|
|
console.log('当前位置的纬度：' + getres.latitude);
|
|
|
|
uni.chooseLocation({
|
|
latitude: getres.latitude,
|
|
longitude: getres.longitude,
|
|
success: function(res) {
|
|
console.log('位置名称：' + res.name);
|
|
console.log('详细地址：' + res.address);
|
|
console.log('纬度：' + res.latitude);
|
|
console.log('经度：' + res.longitude);
|
|
console.log(res)
|
|
that.destinationLongitude = res.longitude
|
|
that.destinationLatitude = res.latitude
|
|
that.destinationInfo = res.address
|
|
var address = res.address;
|
|
var reg = /.+?(省|市|自治区|自治州|县|区)/g;
|
|
let addressList = address.match(reg).toString().split(",");
|
|
if (addressList[0] == '重庆市' || addressList[0] == '北京市' ||
|
|
addressList[0] ==
|
|
'天津市' ||
|
|
addressList[0] == '上海市') {
|
|
that.province1 = addressList[0];
|
|
that.city1 = '市辖区';
|
|
that.area1 = addressList[1];
|
|
that.four1 = address.replace(that.province, '').replace(that
|
|
.city, '')
|
|
.replace(that
|
|
.area, '');
|
|
} else {
|
|
that.province1 = addressList[0];
|
|
that.city1 = addressList[1];
|
|
that.area1 = addressList[2];
|
|
that.four1 = address.replace(that.province, '').replace(that
|
|
.city, '')
|
|
.replace(that
|
|
.area, '');
|
|
};
|
|
console.log(that.four1);
|
|
|
|
}
|
|
});
|
|
}
|
|
});
|
|
},
|
|
|
|
getzhi(index, id) {
|
|
this.carType = id
|
|
this.carzhi = index
|
|
},
|
|
|
|
getzhi2(index, id) {
|
|
this.feeType = id
|
|
this.maneizhi = index
|
|
},
|
|
|
|
chooseChannel(item) {
|
|
if (this.selectedChannelId === item.id) {
|
|
this.selectedChannelId = null;
|
|
this.selectedChannelName = '';
|
|
this.selectedSourceId = null;
|
|
} else {
|
|
this.selectedChannelId = item.id;
|
|
this.selectedChannelName = item.name;
|
|
this.selectedSourceId = null;
|
|
}
|
|
},
|
|
|
|
chooseSource(item) {
|
|
if (this.selectedSourceId === item.id) {
|
|
this.selectedSourceId = null;
|
|
this.selectedSourceName = '';
|
|
} else {
|
|
this.selectedSourceId = item.id;
|
|
this.selectedSourceName = item.name;
|
|
}
|
|
},
|
|
|
|
chooseFaultType(item) {
|
|
if (this.selectedFaultTypeId === item.id) {
|
|
this.selectedFaultTypeId = null;
|
|
this.selectedFaultTypeName = '';
|
|
this.selectedPhenomenonId = null;
|
|
} else {
|
|
this.selectedFaultTypeId = item.id;
|
|
this.selectedFaultTypeName = item.name;
|
|
this.selectedPhenomenonId = null;
|
|
}
|
|
},
|
|
|
|
choosePhenomenon(item) {
|
|
if (this.selectedPhenomenonId === item.id) {
|
|
this.selectedPhenomenonId = null;
|
|
this.selectedPhenomenonName = '';
|
|
} else {
|
|
this.selectedPhenomenonId = item.id;
|
|
this.selectedPhenomenonName = item.name;
|
|
}
|
|
},
|
|
|
|
async loadSourceOptions() {
|
|
try {
|
|
const res = await request({
|
|
url: '/rescue-channel-source/listByPid',
|
|
method: 'get',
|
|
params: {
|
|
pid: null
|
|
}
|
|
});
|
|
if (res.code === 200) {
|
|
this.sourceOptions = res.data;
|
|
}
|
|
} catch (error) {
|
|
console.error('加载来源选项失败:', error);
|
|
}
|
|
},
|
|
|
|
async loadChannelOptions() {
|
|
try {
|
|
const res = await request({
|
|
url: '/rescue-channel-source/getChannelListByDispatchId',
|
|
method: 'get',
|
|
params: {
|
|
dispatchId: this.userinfo.id
|
|
}
|
|
});
|
|
if (res.code === 200 && res.data) {
|
|
this.channelOptions = res.data;
|
|
}
|
|
} catch (error) {
|
|
console.error('加载渠道选项失败:', error);
|
|
}
|
|
},
|
|
|
|
async loadFaultTypeOptions() {
|
|
try {
|
|
const res = await request({
|
|
url: '/rescue-type-phenomenon/typeList',
|
|
method: 'get'
|
|
});
|
|
if (res.code === 200 && res.data) {
|
|
this.faultTypeOptions = res.data;
|
|
}
|
|
} catch (error) {
|
|
console.error('加载故障类型选项失败:', error);
|
|
}
|
|
},
|
|
|
|
async loadPhenomenonOptions() {
|
|
try {
|
|
const res = await request({
|
|
url: '/rescue-type-phenomenon/listPhenomenonByPid',
|
|
method: 'get',
|
|
params: {
|
|
pid: null
|
|
}
|
|
});
|
|
if (res.code === 200) {
|
|
this.phenomenonOptions = res.data;
|
|
}
|
|
} catch (error) {
|
|
console.error('加载故障现象选项失败:', error);
|
|
}
|
|
},
|
|
|
|
populateFormData(orderData) {
|
|
this.infoId = orderData.id || '';
|
|
this.rescueType = orderData.rescueType || '';
|
|
this.rescueLongitude = orderData.rescueLongitude || '';
|
|
this.rescueLatitude = orderData.rescueLatitude || '';
|
|
this.rescuePosition = orderData.rescuePosition || '';
|
|
this.orderId = orderData.orderId || '';
|
|
this.orderStatus = orderData.orderStatus || '';
|
|
console.log('orderData.orderId', this.orderId)
|
|
|
|
// 解析救援地址
|
|
if (orderData.rescuePosition) {
|
|
this.parseAddress(orderData.rescuePosition, 'start');
|
|
}
|
|
|
|
// 处理目的地地址（仅拖车类型）
|
|
if (orderData.rescueType == 1 || orderData.rescueType == 8) {
|
|
this.destinationLongitude = orderData.destinationLongitude || null;
|
|
this.destinationLatitude = orderData.destinationLatitude || null;
|
|
this.destinationInfo = orderData.destinationInfo || '';
|
|
|
|
if (orderData.destinationInfo) {
|
|
this.parseAddress(orderData.destinationInfo, 'end');
|
|
}
|
|
}
|
|
|
|
// 其余字段赋值保持不变
|
|
this.isAppointment = orderData.isAppointment || 0;
|
|
if (orderData.rescueTime && orderData.rescueTime !== '暂无数据') {
|
|
this.rescueTime = orderData.rescueTime;
|
|
this.value1 = new Date(orderData.rescueTime).getTime();
|
|
}
|
|
|
|
this.connectionName = orderData.connectionName || '';
|
|
this.connectionPhone = orderData.connectionPhone || '';
|
|
this.carOwner = orderData.carOwner || '';
|
|
this.carOwnerPhone = orderData.carOwnerPhone || '';
|
|
this.licenseNum = orderData.licenseNum || '';
|
|
this.carBrand = orderData.carBrand || '';
|
|
this.carType = orderData.carType || 1;
|
|
|
|
// 设置车辆类型选中状态
|
|
if (this.car && this.car.length > 0) {
|
|
const carIndex = this.car.findIndex(item => item.value == this.carType);
|
|
if (carIndex !== -1) {
|
|
this.carzhi = carIndex;
|
|
}
|
|
}
|
|
|
|
this.ifNewEnergy = orderData.ifNewEnergy || '';
|
|
this.selectedFaultTypeName = orderData.faultType || '';
|
|
this.selectedPhenomenonName = orderData.phenomenon || '';
|
|
this.faultPhenomenon = orderData.faultPhenomenon || '';
|
|
this.rescueNeeds = orderData.rescueNeeds || '';
|
|
this.estimateDownCar = orderData.estimateDownCar || '';
|
|
this.estimateMoney = orderData.estimateMoney || '';
|
|
this.remarkRescuePosition = orderData.remarkRescuePosition || '';
|
|
this.remarkDestinationInfo = orderData.remarkDestinationInfo || '';
|
|
this.selectedChannelName = orderData.channel || '';
|
|
this.selectedSourceName = orderData.source || '';
|
|
|
|
// 收费类型赋值
|
|
this.feeType = orderData.feeType !== undefined && orderData.feeType !== null ? orderData.feeType : null;
|
|
|
|
// 设置收费类型选中状态
|
|
if (this.manei && this.manei.length > 0 && this.feeType !== null) {
|
|
const feeTypeNum = Number(this.feeType);
|
|
const feeIndex = this.manei.findIndex(item => Number(item.value) === feeTypeNum);
|
|
if (feeIndex !== -1) {
|
|
this.maneizhi = feeIndex;
|
|
}
|
|
}
|
|
|
|
this.isKouChe = orderData.isKouChe || '0';
|
|
this.kcname = orderData.kcPosition || '';
|
|
this.rescueDetail = orderData.rescueDetail || '';
|
|
|
|
this.$nextTick(() => {
|
|
setTimeout(() => {
|
|
this.setChannelAndSourceSelection(orderData.channel, orderData.source);
|
|
this.setFaultTypeAndPhenomenonSelection(orderData.faultType, orderData.phenomenon);
|
|
}, 500);
|
|
});
|
|
},
|
|
|
|
parseAddress(address, type) {
|
|
const reg = /.+?(省|市|自治区|自治州|县|区)/g;
|
|
const addressList = address.match(reg);
|
|
if (!addressList) return;
|
|
|
|
if (type === 'start') {
|
|
if (addressList[0] === '重庆市' || addressList[0] === '北京市' ||
|
|
addressList[0] === '天津市' || addressList[0] === '上海市') {
|
|
this.province = addressList[0];
|
|
this.city = '市辖区';
|
|
this.area = addressList[1] || '';
|
|
this.four = address.replace(this.province, '').replace(this.city, '').replace(this.area, '');
|
|
} else {
|
|
this.province = addressList[0] || '';
|
|
this.city = addressList[1] || '';
|
|
this.area = addressList[2] || '';
|
|
this.four = address.replace(this.province, '').replace(this.city, '').replace(this.area, '');
|
|
}
|
|
} else if (type === 'end') {
|
|
if (addressList[0] === '重庆市' || addressList[0] === '北京市' ||
|
|
addressList[0] === '天津市' || addressList[0] === '上海市') {
|
|
this.province1 = addressList[0];
|
|
this.city1 = '市辖区';
|
|
this.area1 = addressList[1] || '';
|
|
this.four1 = address.replace(this.province1, '').replace(this.city1, '').replace(this.area1, '');
|
|
} else {
|
|
this.province1 = addressList[0] || '';
|
|
this.city1 = addressList[1] || '';
|
|
this.area1 = addressList[2] || '';
|
|
this.four1 = address.replace(this.province1, '').replace(this.city1, '').replace(this.area1, '');
|
|
}
|
|
}
|
|
},
|
|
|
|
setChannelAndSourceSelection(channelName, sourceName) {
|
|
if (channelName && this.channelOptions.length > 0) {
|
|
const channel = this.channelOptions.find(item => item.name === channelName);
|
|
if (channel) {
|
|
this.selectedChannelId = channel.id;
|
|
this.selectedChannelName = channel.name;
|
|
|
|
if (sourceName && this.sourceOptions.length > 0) {
|
|
const source = this.sourceOptions.find(item => item.name === sourceName && item.pid ==
|
|
channel.id);
|
|
if (source) {
|
|
this.selectedSourceId = source.id;
|
|
this.selectedSourceName = source.name;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
setFaultTypeAndPhenomenonSelection(faultTypeName, phenomenonName) {
|
|
if (faultTypeName && this.faultTypeOptions.length > 0) {
|
|
const faultType = this.faultTypeOptions.find(item => item.name === faultTypeName);
|
|
if (faultType) {
|
|
this.selectedFaultTypeId = faultType.id;
|
|
this.selectedFaultTypeName = faultType.name;
|
|
|
|
if (phenomenonName && this.phenomenonOptions.length > 0) {
|
|
const phenomenon = this.phenomenonOptions.find(item => item.name === phenomenonName &&
|
|
item.pid == faultType.id);
|
|
if (phenomenon) {
|
|
this.selectedPhenomenonId = phenomenon.id;
|
|
this.selectedPhenomenonName = phenomenon.name;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.content {
|
|
width: 100%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
background: #F7F8FC;
|
|
display: flex;
|
|
flex-direction: column;
|
|
row-gap: 10rpx;
|
|
}
|
|
|
|
.dil {
|
|
flex: 1;
|
|
height: 0;
|
|
overflow: auto;
|
|
box-sizing: border-box;
|
|
background-color: #F6F6F6;
|
|
padding: 0px 12px;
|
|
}
|
|
|
|
.edit-mode-indicator {
|
|
background-color: #e6f7ff;
|
|
border: 1px solid #91d5ff;
|
|
border-radius: 8rpx;
|
|
padding: 16rpx;
|
|
margin-bottom: 20rpx;
|
|
font-size: 26rpx;
|
|
color: #1890ff;
|
|
text-align: center;
|
|
}
|
|
|
|
.top {
|
|
box-sizing: border-box;
|
|
padding: 0px 15px;
|
|
background: #FFFFFF;
|
|
border-radius: 16rpx;
|
|
border: 2rpx solid rgba(50, 125, 251, 0.05);
|
|
display: flex;
|
|
align-items: center;
|
|
column-gap: 28rpx;
|
|
|
|
.start-end {
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
}
|
|
}
|
|
|
|
.top-box {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
padding: 20px 0px;
|
|
}
|
|
|
|
.tb-left {
|
|
height: 100%;
|
|
width: 85%;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.uicon {
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
margin-right: 6px;
|
|
}
|
|
|
|
.text1 {
|
|
font-size: 28rpx;
|
|
color: #000;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.hong1 {
|
|
margin-top: 5px;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
color: #D42424;
|
|
}
|
|
|
|
.hong2 {
|
|
margin-top: 5px;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
|
|
input {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.jyxx {
|
|
background: #FFFFFF;
|
|
border-radius: 16rpx;
|
|
border: 2rpx solid rgba(50, 125, 251, 0.05);
|
|
padding: 14rpx 38rpx;
|
|
}
|
|
|
|
.jyxx-tinput {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
column-gap: 12rpx;
|
|
padding: 24rpx 0;
|
|
border-bottom: 2rpx solid rgba(151, 151, 152, 0.20);
|
|
|
|
&:last-child {
|
|
border: none;
|
|
}
|
|
|
|
.text1 {
|
|
font-size: 28rpx;
|
|
color: #000;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.you {
|
|
flex: 1;
|
|
width: 0;
|
|
}
|
|
}
|
|
|
|
.tinput {
|
|
width: 100%;
|
|
display: flex;
|
|
background: white;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
padding: 16px;
|
|
margin-top: 14px;
|
|
}
|
|
|
|
.xinput {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 36rpx;
|
|
margin-top: 14px;
|
|
background: #FFFFFF;
|
|
border-radius: 16rpx;
|
|
border: 2rpx solid rgba(50, 125, 251, 0.05);
|
|
}
|
|
|
|
.xinput-fault {
|
|
width: 100%;
|
|
padding: 0 0 26rpx 0;
|
|
margin-top: 14px;
|
|
background: #FFFFFF;
|
|
border-bottom: 2rpx solid rgba(151, 151, 152, 0.20);
|
|
}
|
|
|
|
.you {
|
|
text-align: right;
|
|
}
|
|
|
|
.xz {
|
|
margin-top: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.kuang {
|
|
width: 92rpx;
|
|
height: 50rpx;
|
|
font-size: 24rpx;
|
|
color: #327DFB;
|
|
border-radius: 5px;
|
|
border: 2rpx solid #327DFB;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-right: 24rpx;
|
|
border-radius: 24rpx;
|
|
}
|
|
|
|
.xlan {
|
|
background: #327DFB;
|
|
border: 2rpx solid #327DFB;
|
|
color: #fff;
|
|
}
|
|
|
|
.anniu {
|
|
width: 100%;
|
|
height: 88rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #fff;
|
|
margin-top: 30rpx;
|
|
background: #52c41a;
|
|
border-radius: 12rpx;
|
|
}
|
|
|
|
.anniu:active {
|
|
background: #389e0d;
|
|
}
|
|
|
|
.channel-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 20rpx;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.channel-item {
|
|
min-height: 50rpx;
|
|
padding: 0 24rpx;
|
|
border-radius: 25rpx;
|
|
border: 2rpx solid #327DFB;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: white;
|
|
}
|
|
|
|
.channel-item-selected {
|
|
background: #327DFB;
|
|
color: #fff;
|
|
}
|
|
|
|
.channel-text {
|
|
font-size: 24rpx;
|
|
color: inherit;
|
|
max-width: 240rpx;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.source-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 20rpx;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.source-item {
|
|
min-height: 50rpx;
|
|
padding: 0 24rpx;
|
|
border-radius: 25rpx;
|
|
border: 2rpx solid #327DFB;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: white;
|
|
}
|
|
|
|
.source-item-selected {
|
|
background: #327DFB;
|
|
color: #fff;
|
|
}
|
|
|
|
.source-text {
|
|
font-size: 24rpx;
|
|
color: inherit;
|
|
max-width: 240rpx;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
</style> |