lanan-repair-app/pages-order/addOrder/editOrder.vue
2025-01-08 17:19:40 +08:00

728 lines
22 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="container">
<view class="containerBody">
<VNavigationBar background-color="rgba(0,0,0,0)" title="编辑工单" title-color="#333"></VNavigationBar>
<view class="body">
<view class="card cardInfo userCard">
<template>
<view class="userTitle">工单信息</view>
<view class="userContainer" style="padding-bottom: 20rpx">
<view style="display: flex;align-items: center">
<view class="infoItem" style="flex: 1">
<text class="label">客户姓名</text>
<input type="text" style="text-align: left" v-model="formData.userName" placeholder="请填写客户姓名"/>
</view>
<view class="infoItem" style="flex: 1">
<text class="label">客户电话</text>
<input type="text" style="text-align: left" v-model="formData.userMobile" placeholder="请填写客户电话"/>
</view>
</view>
<view style="display: flex;align-items: center">
<view class="infoItem" style="flex: 1">
<text class="label">经办人姓名</text>
<input type="text" style="text-align: left" v-model="formData.handleName" placeholder="请填写经办人姓名"/>
</view>
<view class="infoItem" style="flex: 1">
<text class="label">经办人电话</text>
<input type="text" style="text-align: left" v-model="formData.handleMobile" placeholder="请填写经办人电话"/>
</view>
</view>
<view style="display: flex;align-items: center">
<view class="infoItem" style="flex: 1">
<text class="label">进厂时间</text>
<picker
mode="date"
:value="formData.inTime"
start="2020-01-01"
end="2030-12-31"
@change="bindDateChange1">
<view style="margin-left: 10rpx">
{{ formData.inTime}}
</view>
</picker>
</view>
<view class="infoItem" style="flex: 1">
<text class="label">预计完工</text>
<picker
mode="date"
:value="formData.outTime"
start="2020-01-01"
end="2030-12-31"
@change="bindDateChange2">
<view style="margin-left: 10rpx">
{{ formData.outTime}}
</view>
</picker>
</view>
</view>
<view style="display: flex;align-items: center">
<view class="infoItem" style="flex: 1">
<text class="label">表显里程</text>
<input type="text" style="text-align: left" v-model="formData.mileageTraveled" placeholder="请填写表显里程"/>
</view>
<view class="infoItem" style="flex: 1">
<text class="label">三包单位</text>
<input type="text" style="text-align: left" v-model="formData.threePackUnits" placeholder="请填写三包单位"/>
</view>
</view>
<view style="display: flex;align-items: center">
<view class="infoItem" style="flex: 1">
<text class="label">最近保养日期</text>
<picker
mode="date"
:value="formData.maintenanceDate"
start="2020-01-01"
@change="bindDateChange3">
<view style="margin-left: 10rpx">
{{ formData.maintenanceDate}}
</view>
</picker>
</view>
<view class="infoItem" style="flex: 1">
<text class="label">最近保养公里数</text>
<input type="text" style="text-align: left" v-model="formData.maintenanceMileage" placeholder="请填写最近保养公里数"/>
</view>
</view>
<view style="display: flex;align-items: center">
<view class="infoItem" style="flex: 1">
<text class="label">年检到期时间</text>
<picker
mode="date"
:value="formData.nextInspectionDate"
start="2020-01-01"
@change="bindDateChange4">
<view style="margin-left: 10rpx">
{{ formData.nextInspectionDate}}
</view>
</picker>
</view>
<view class="infoItem" style="flex: 1">
<text class="label">保险到期时间</text>
<picker
mode="date"
:value="formData.insuranceExpiryDate"
start="2020-01-01"
@change="bindDateChange5">
<view style="margin-left: 10rpx">
{{ formData.insuranceExpiryDate}}
</view>
</picker>
</view>
</view>
<view style="display: flex;align-items: center">
<view class="infoItem" style="flex: 1">
<text class="label">保险名称</text>
<input type="text" style="text-align: left" v-model="formData.insuranceName" placeholder="请填写保险名称"/>
</view>
</view>
<view style="display: flex;align-items: center">
<view class="infoItem" style="flex: 1">
<text class="label">承保险种</text>
<uni-data-checkbox multiple v-model="insuranceTypeArray" :localdata="insuranceTypeList"></uni-data-checkbox>
</view>
</view>
<view style="display: flex;align-items: center">
<view class="infoItem" style="flex: 1">
<text class="label">上年保费</text>
<view style="display: flex">
<input type="decimal" style="text-align: left" v-model="formData.jiaoqiang" placeholder="请输入交强险保费"/>
商:<input type="decimal" style="text-align: left" v-model="formData.shangye" placeholder="请输入商业险保费"/>
</view>
</view>
</view>
<view style="display: flex;align-items: center">
<view class="infoItem" style="flex: 1">
<text class="label">救援费</text>
<input type="text" style="text-align: left" v-model="formData.rescueMoney" placeholder="请填写救援费"/>
</view>
<view class="infoItem" style="flex: 1">
<text class="label">三包费</text>
<input type="text" style="text-align: left" v-model="formData.threePackMoney" placeholder="请填写救援费"/>
</view>
</view>
<view style="display: flex;align-items: center">
<view class="infoItem" style="flex: 1">
<text class="label">定损费</text>
<input type="text" style="text-align: left" v-model="formData.confirmFaultMoney" placeholder="请填写定损费"/>
</view>
<view class="infoItem" style="flex: 1">
<text class="label">管理费</text>
<input type="text" style="text-align: left" v-model="formData.managerMoney" placeholder="请填写管理费"/>
</view>
</view>
<view style="display: flex;align-items: center">
<view class="infoItem" style="flex: 1" v-if="partDisposals && partDisposals.length>0">
<text class="label">旧件处置方式</text>
<picker @change="partDisposalChange" :value="partDisposalIndex" :range="partDisposals" range-key="label" >
<view class="uni-input">{{ partDisposals[partDisposalIndex].label}}</view>
</picker>
</view>
<view class="infoItem" style="flex: 1" v-if="repairTypes && repairTypes.length>0">
<text class="label">维修类型</text>
<picker @change="repairTypeChange" :value="repairTypeIndex" :range="repairTypes" range-key="label" >
<view class="uni-input">{{ repairTypes[repairTypeIndex].label}}</view>
</picker>
</view>
</view>
</view>
</template>
</view>
</view>
<view class="footer">
<view class="btn" @click="submitUpload">保存工单</view>
</view>
</view>
</view>
</template>
<script>
import VNavigationBar from '@/components/VNavigationBar.vue'
import request from "@/utils/request";
import {getToken, setUserInfo, getUserInfo,getStorageWithExpiry,setStorageWithExpiry} from '@/utils/auth.js'
import {getDictByCode,formatDate} from "@/utils/utils";
export default {
components: {
VNavigationBar,
},
data() {
return {
phone: '',
repairTypes:[],
repairTypeIndex:0,
partDisposals:[],
partDisposalIndex:0,
formData:{
userName: "",
userMobile: "",
inTime: null,
outTime: null,
handleName: null,
handleMobile: null,
mileageTraveled:null,
threePackUnits:null,
insuranceName:null,
managerMoney:0.00,
rescueMoney:0.00,
threePackMoney:0.00,
confirmFaultMoney:0.00,
partDisposal:null,
repairType:null,
nextInspectionDate:null,
insuranceExpiryDate:null,
jiaoqiang:null,
shangye:null,
},
//承保险种-、三者、车损、驾乘、不计
insuranceTypeList:[{
text: '交强',
value: '交强'
}, {
text: '三者',
value: '三者'
}, {
text: '车损',
value: '车损'
},{
text: '驾乘',
value: '驾乘'
},{
text: '不计',
value: '不计'
}],
//选中的险种
insuranceTypeArray:[],
//ticketId 工单Id
ticketId:null,
}
},
onLoad(data) {
this.ticketId = data.ticketId
// this.formData.inTime = formatDate(Date.now())
// this.formData.outTime = formatDate(Date.now())
// this.formData.maintenanceDate = formatDate(Date.now())
this.initDict("insurance_type")
this.initDict("repair_type")
this.initDict("repair_part_disposal")
this.getOrderDetail()
},
onShow() {
},
methods: {
getOrderDetail(){
request({
url: '/admin-api/repair/tickets/getById',
method: 'get',
params:{id:this.ticketId}
}).then((res)=> {
let resultObj= res.data
//进厂日期
if (null != resultObj.inTime){
resultObj.inTime = formatDate(resultObj.inTime)
}
//最近保养日期
if (null != resultObj.maintenanceDate){
resultObj.maintenanceDate = formatDate(resultObj.maintenanceDate)
}
//预计竣工日期
if (null != resultObj.outTime){
resultObj.outTime = formatDate(resultObj.outTime)
}
//年检到期时间
if (null != resultObj.nextInspectionDate){
resultObj.nextInspectionDate = formatDate(resultObj.nextInspectionDate)
}
//保险到期时间
if (null != resultObj.insuranceExpiryDate){
resultObj.insuranceExpiryDate = formatDate(resultObj.insuranceExpiryDate)
}
if(resultObj.insuranceType){
this.insuranceTypeArray = resultObj.insuranceType.split(",")
}
this.formData = resultObj
})
},
// 日期选择 事件
bindDateChange1(e) {
this.formData.inTime = e.target.value; // 更新选择的日期到data中的date变量
},
// 日期选择 事件
bindDateChange3(e) {
this.formData.maintenanceDate = e.target.value; // 更新选择的日期到data中的date变量
},
// 日期选择 事件
bindDateChange4(e) {
this.formData.nextInspectionDate = e.target.value; // 更新选择的日期到data中的date变量
},
// 日期选择 事件
bindDateChange5(e) {
this.formData.insuranceExpiryDate = e.target.value; // 更新选择的日期到data中的date变量
},
// 日期选择 事件
bindDateChange2(e) {
this.formData.outTime = e.target.value; // 更新选择的日期到data中的date变量
},
repairTypeChange(event){
const newIndex = event.detail.value;
this.repairTypeIndex = newIndex;
this.formData.repairType = this.repairTypes[newIndex].value;
},
partDisposalChange(event){
const newIndex = event.detail.value;
this.partDisposalIndex = newIndex;
this.formData.partDisposal = this.repairTypes[newIndex].value;
},
async initDict(dictCode){
let dictArray = getStorageWithExpiry(dictCode);
console.log(dictArray,"partDisposals")
if(null==dictArray || undefined==dictArray){
request({
url: '/admin-api/system/dict-data/type',
method: 'get',
params:{type:dictCode}
}).then((res) => {
console.log(res)
if (res.code == 200) {
setStorageWithExpiry(dictCode,res.data,3600)
this.$nextTick(()=>{
if("repair_type"==dictCode){
this.repairTypes = res.data
this.buildRepairType()
}else if("repair_part_disposal"){
this.partDisposals = res.data
}else if("insurance_type"){
this.buildInsuranceTypeList()
}
})
}
})
}else{
this.$nextTick(()=>{
if("repair_type"==dictCode){
this.repairTypes = dictArray
this.buildRepairType()
}else if("repair_part_disposal"){
this.partDisposals = dictArray
}else if("insurance_type"){
this.buildInsuranceTypeList()
}
})
}
},
/**
* 组装承保险种待选值
*/
buildInsuranceTypeList(data){
if(data && data.length>0){
this.insuranceTypeList=[]
data.map((item)=>{
let thisObj={
text:item.label,
value:item.value
}
this.insuranceTypeList.push(thisObj)
})
}
},
buildRepairType(){
if(this.pageData.repairType){
this.repairTypes.map((item,index)=>{
if(item.value==this.pageData.repairType){
this.repairTypeIndex = index
this.formData.repairType = this.repairTypes[index].value;
return
}
})
}else{
//默认选中第一个
this.repairTypeIndex = 0
this.formData.repairType = this.repairTypes[0].value;
}
},
/**
* 创建工单前上传图片
*/
submitUpload(){
let dataObj = this.formData
if(this.insuranceTypeArray.length>0){
dataObj.insuranceType= this.insuranceTypeArray.join(",")
}
request({
url: '/admin-api/repair/tickets/updateById',
method: 'POST',
data: this.formData
}).then(res => {
uni.showToast({
title: '修改成功',
icon: 'success'
})
setTimeout(()=>{
uni.navigateTo({
url: `/pages-home/home/home`
});
},600)
})
},
}
}
</script>
<style lang="less" scoped>
.popup-content {
@include flex;
align-items: center;
justify-content: center;
padding: 15px;
height: auto;
background-color: #fff;
}
.container {
height: 100%;
background-color: #F3F5F7;
.containerBody {
height: 100%;
display: flex;
flex-direction: column;
background: linear-gradient(180deg, #C1DEFF 0%, rgba(193, 222, 255, 0) 100%);
background-size: 100% 500rpx;
background-repeat: no-repeat;
}
.body {
flex: 1;
height: 0;
overflow: auto;
.card {
background: #FFFFFF;
border-radius: 8rpx 8rpx 8rpx 8rpx;
margin: 20rpx 32rpx;
}
.phone {
background: #0174F6;
.phoneHeader {
padding: 20rpx 30rpx;
.title {
font-weight: bold;
font-size: 32rpx;
color: #FFFFFF;
margin-bottom: 10rpx;
}
.desc {
font-weight: 500;
font-size: 24rpx;
color: rgba(255, 255, 255, 0.7);
}
}
.phoneBody {
background: #FFFFFF;
border-radius: 8rpx 8rpx 8rpx 8rpx;
padding: 0 30rpx;
.searchBox {
padding: 40rpx 0;
border-bottom: 1rpx solid #EEEEEE;
}
.btn {
padding: 40rpx 0;
display: flex;
align-items: center;
justify-content: center;
column-gap: 10rpx;
font-weight: 500;
font-size: 32rpx;
color: #0174F6;
.btnIcon {
width: 32rpx;
height: 32rpx;
}
}
}
}
.cardInfo {
&.none {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
.cardNoneIcon {
width: 336rpx;
}
.btn {
position: absolute;
bottom: 40rpx;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
column-gap: 10rpx;
font-weight: 500;
font-size: 28rpx;
color: #0174F6;
}
}
}
.projTitle, .userTitle, .carTitle {
padding: 30rpx;
font-weight: bold;
font-size: 32rpx;
color: #333333;
}
.carCard {
.carListTab {
display: flex;
align-items: center;
column-gap: 32rpx;
padding: 0 26rpx 22rpx;
.carTabItem {
display: flex;
flex-direction: column;
align-items: center;
row-gap: 10rpx;
font-weight: 500;
font-size: 24rpx;
color: #333333;
&.active {
.carImage {
border: 2rpx solid #0174F6;
}
color: #0174F6;
}
.carImage {
width: 128rpx;
height: 80rpx;
background: #F2F2F7;
border-radius: 8rpx 8rpx 8rpx 8rpx;
}
}
.carTabItemNew {
display: flex;
flex-direction: column;
align-items: center;
row-gap: 10rpx;
font-weight: 500;
font-size: 24rpx;
color: #333333;
border: 2rpx solid #0174F6; /* 默认边框颜色为透明 */
justify-content: center; /* 垂直居中 */
font-weight: bold;
font-size: 32rpx;
padding: 10rpx; /* 可以根据需要调整内边距 */
width: 128rpx; /* 与 .carImage 宽度一致 */
height: 80rpx; /* 与 .carImage 高度一致 */
border-radius: 8rpx 8rpx 8rpx 8rpx;
margin-top: -37rpx;
}
}
.carDetail {
background: linear-gradient(180deg, rgba(1, 116, 246, 0.15) 0%, rgba(255, 255, 255, 0) 100%) no-repeat;
background-size: 100% 184rpx;
padding: 30rpx 30rpx 0;
.carHeader {
border-radius: 8rpx 8rpx 8rpx 8rpx;
display: flex;
align-items: center;
column-gap: 20rpx;
padding-bottom: 30rpx;
.carImage {
width: 192rpx;
height: 120rpx;
background: #F2F2F7;
border-radius: 8rpx 8rpx 8rpx 8rpx;
}
.carHeaderRight {
display: flex;
flex-direction: column;
row-gap: 20rpx;
font-weight: bold;
font-size: 32rpx;
color: #333333;
.carType {
font-weight: 500;
font-size: 28rpx;
color: #858BA0;
}
}
}
.carBody {
display: flex;
flex-direction: column;
row-gap: 30rpx;
padding-top: 30rpx;
border-top: 1rpx solid #DDDDDD;
}
.carFoot {
}
}
}
.projCard {
.projList {
padding: 0 30rpx;
display: flex;
gap: 20rpx;
flex-wrap: wrap;
.projItem {
padding: 10rpx 16rpx;
border-radius: 4rpx 4rpx 4rpx 4rpx;
border: 2rpx solid #0174F6;
font-weight: 500;
font-size: 24rpx;
color: #0174F6;
}
}
}
.userCard {
.userContainer {
display: flex;
flex-direction: column;
row-gap: 30rpx;
margin: 0 30rpx;
}
}
.infoItem {
display: flex;
flex-direction: column;
.label {
font-weight: 500;
font-size: 28rpx;
color: #858BA0;
}
.value {
font-weight: 500;
font-size: 28rpx;
color: #333333;
}
}
.projFoot, .userFoot, .carFoot {
padding: 30rpx;
font-weight: 500;
font-size: 28rpx;
color: #0174F6;
display: flex;
align-items: center;
justify-content: center;
column-gap: 6rpx;
}
}
.footer {
height: 136rpx;
background: #FFFFFF;
border-radius: 0rpx 0rpx 0rpx 0rpx;
display: flex;
align-items: center;
justify-content: center;
.btn {
width: 510rpx;
height: 76rpx;
background: #0174F6;
border-radius: 38rpx 38rpx 38rpx 38rpx;
font-weight: bold;
font-size: 32rpx;
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
}
}
.radio-label {
//display: flex;
align-items: center;
margin-bottom: 10rpx;
}
.radio-label text {
margin-left: 10rpx;
}
}
</style>