437 lines
11 KiB
Vue
437 lines
11 KiB
Vue
<template>
|
||
<view class="orderCard">
|
||
<view class="order-top">
|
||
<view class="orderNo">
|
||
工单编号：{{ order.orderNo }}
|
||
</view>
|
||
<view :style="{ color: getFlagColor(order.flag) }" class="flag">
|
||
{{ order.flagStr }}
|
||
</view>
|
||
</view>
|
||
<view class="order-body">
|
||
<view class="carNum">
|
||
{{ order.carNum }}
|
||
</view>
|
||
<view class="carModel">
|
||
{{ order.carModel }}
|
||
</view>
|
||
<view class="project">
|
||
<view class="project-left">
|
||
<view class="title">
|
||
<image class="titleIcon" mode="aspectFit" src="/static/icons/order-icon1.png"></image>
|
||
维修项目
|
||
</view>
|
||
<view class="desc">
|
||
{{ projectName }}
|
||
</view>
|
||
</view>
|
||
<view v-if="order.ticketsStatus == '05'" class="project-right">
|
||
<image class="rightIcon" mode="aspectFit" src="/static/icons/success.png"></image>
|
||
<text class="rightText">已派工</text>
|
||
</view>
|
||
</view>
|
||
<view class="baseInfo">
|
||
<view>
|
||
客户信息：{{ order.userName }} {{ order.userPhone }}
|
||
</view>
|
||
<view v-if="order.appointDate">
|
||
预约时间：{{ order.appointDate }}
|
||
</view>
|
||
<view>
|
||
服务顾问：{{ order.counselorName }}
|
||
</view>
|
||
</view>
|
||
<!-- 作废modal框-->
|
||
<view >
|
||
<u-modal showCancelButton @cancel="doVoidCancel" @confirm = "doVoidConfirm" :show="show" :title="title">
|
||
<input type="text" v-model="voidData.remark" placeholder="请输入作废原因" >
|
||
</u-modal>
|
||
</view>
|
||
<!-- 普通弹窗---拍照上传 -->
|
||
<uni-popup ref="popup" background-color="#fff">
|
||
<view class="popup-content">
|
||
<view class="dl-avatar-box">
|
||
<uni-file-picker :value="fileList" :sizeType="sizeType" @select="afterRead" @delete="deleteFile" limit="9" title="请上传诊断维修单和车辆维修前照片"></uni-file-picker>
|
||
</view>
|
||
<button type="primary" @click="receiveOrder">保存</button>
|
||
</view>
|
||
</uni-popup>
|
||
<view class="footer">
|
||
<view @click="projectDis" v-if="order.ticketsStatus == '04' && (userInfo.roleCodes.includes('service_advisor') || userInfo.roleCodes.includes('general_inspection'))" class="btn pg">
|
||
项目派工
|
||
</view>
|
||
<view @click="projectDis" v-if="order.ticketsStatus == '05' && userInfo.roleCodes.includes('repair_staff') && ifLeader && order.canOperate" class="btn pg">
|
||
<!--维修班组长且当前施工人是本班组内的人，可以重新派工-->
|
||
重新派工
|
||
</view>
|
||
<view @click="projectDis" v-if="order.ticketsStatus == '05' && (userInfo.roleCodes.includes('service_advisor') || userInfo.roleCodes.includes('general_inspection'))" class="btn pg">
|
||
<!--服务顾问和总检，可以重新派工-->
|
||
重新派工
|
||
</view>
|
||
<view @click="openFile(order.id)" v-if="order.ticketsStatus == '05' && order.ticketsWorkStatus=='01' && roleCanJd" class="btn qc">
|
||
接单
|
||
</view>
|
||
<!-- <view @click="doOrder(order.id)" v-if="order.ticketsStatus == '05' && order.ticketsWorkStatus=='04' && roleCanSg" class="btn qc">-->
|
||
<!-- 开始施工-->
|
||
<!-- </view>-->
|
||
<view v-if="order.ticketsStatus == '06' && roleCanQc" class="btn qc">
|
||
告知取车
|
||
</view>
|
||
<view v-if="userInfo.roleCodes.includes('weixiu') || userInfo.roleCodes.includes('service_advisor') || userInfo.roleCodes.includes('general_inspection')" @click="doVoid(order)" class="btn pg">
|
||
<!-- 在什么都不能操作的情况下，可以查看详情-->
|
||
作废
|
||
</view>
|
||
<view v-if="userInfo.roleCodes.includes('weixiu') || userInfo.roleCodes.includes('service_advisor') || userInfo.roleCodes.includes('general_inspection')" @click="addProj(order)" class="btn pg">
|
||
添加项目
|
||
</view>
|
||
<view @click="gotoDetail" class="btn pg">
|
||
<!-- 在什么都不能操作的情况下，可以查看详情-->
|
||
查看详情
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getUserInfo,
|
||
getStrData
|
||
} from '@/utils/auth';
|
||
import request from '@/utils/request';
|
||
import config from "@/config";
|
||
import upload from "@/utils/upload";
|
||
export default {
|
||
name: "orderCard",
|
||
props: {
|
||
order: {
|
||
type: Object,
|
||
default: () => {
|
||
return {}
|
||
}
|
||
}
|
||
},
|
||
computed: {
|
||
projectName() {
|
||
if (this.order && this.order.projectList && this.order.projectList.length > 0) {
|
||
return this.order.projectList.map(m => m.name).join(',')
|
||
}
|
||
return ''
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
//上传的图片数组
|
||
fileList: [],
|
||
sizeType:['compressed'],
|
||
show:false,
|
||
title:'作废',
|
||
voidData:{},
|
||
//当前角色是否可以告知取车
|
||
roleCanQc:false,
|
||
//当前角色是否可以接单
|
||
roleCanJd:false,
|
||
//当前用户是否可以进行施工、施工过程、结束施工操作---
|
||
roleCanSg:false,
|
||
//当前用户
|
||
userInfo:{},
|
||
ifLeader:false,
|
||
takeOrderId:'',
|
||
}
|
||
},
|
||
mounted(){
|
||
this.ifLeader = getStrData('ifLeader')
|
||
this.userInfo = getUserInfo()
|
||
if(this.userInfo.roleCodes.includes("service_advisor") || this.userInfo.roleCodes.includes("general_inspection") || (this.userInfo.roleCodes.includes("repair_staff") && getStrData("ifLeader"))){
|
||
//服务顾问、总检可以派工,维修班组长需要判断是否可以派工
|
||
this.roleCanPg = true
|
||
}
|
||
if(this.userInfo.roleCodes.includes("service_advisor")){
|
||
//服务顾问可以告知取车
|
||
this.roleCanQc = true
|
||
}
|
||
if(this.userInfo.roleCodes.includes("repair_staff") && this.order.nowRepairId==this.userInfo.id){
|
||
//维修工角色,并且指派处理的人就是当前用户可以接单
|
||
this.roleCanJd = true
|
||
}
|
||
},
|
||
onLoad(){
|
||
|
||
},
|
||
methods: {
|
||
/**
|
||
* 接单上传附件
|
||
*/
|
||
openFile(id){
|
||
this.takeOrderId = id
|
||
this.$refs.popup.open("bottom")
|
||
},
|
||
|
||
|
||
afterRead(file) {
|
||
for (let i = 0; i < file.tempFilePaths.length; i++) {
|
||
upload({
|
||
url:'/admin-api/infra/file/upload',
|
||
filePath: file.tempFilePaths[i]
|
||
}).then((res)=>{
|
||
this.fileList.push({
|
||
url: config.baseImageUrl+res.data
|
||
})
|
||
console.log(this.fileList)
|
||
})
|
||
}
|
||
},
|
||
|
||
deleteFile(file, index) {
|
||
this.fileList.splice(index, 1);
|
||
},
|
||
|
||
getFlagColor(flag) {
|
||
if (flag == 1) {
|
||
return '#E8A321'
|
||
} else if (flag === 2) {
|
||
return '#999'
|
||
}
|
||
},
|
||
/**
|
||
* 接单
|
||
*/
|
||
receiveOrder(){
|
||
let fileStr = this.fileList.map(item=>item.url.replace(config.baseImageUrl,"")).join(",")
|
||
request({
|
||
url: '/admin-api/repair/tickets/take',
|
||
method: 'get',
|
||
params:{
|
||
id:this.takeOrderId,
|
||
image:fileStr
|
||
}
|
||
}).then((res) => {
|
||
console.log(res)
|
||
if (res.code == 200) {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '接单成功，请尽快处理！'
|
||
})
|
||
this.$emit('childEvent');
|
||
}else{
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: res.message
|
||
})
|
||
}
|
||
})
|
||
},
|
||
/**
|
||
* 开始施工
|
||
*/
|
||
doOrder(id){
|
||
this.$emit('startWork',id);
|
||
},
|
||
/**
|
||
* 查看详情
|
||
*/
|
||
gotoDetail() {
|
||
uni.navigateTo({
|
||
url: '/pages-order/orderDetail/orderDetail?id=' + this.order.id + '&isDetail=' + '1'
|
||
})
|
||
},
|
||
|
||
/**
|
||
* 作废
|
||
*/
|
||
doVoid(row){
|
||
this.show = true
|
||
this.voidData = {
|
||
id : row.id,
|
||
remark : '',
|
||
ticketsStatus : '03'
|
||
}
|
||
},
|
||
/**
|
||
* 添加项目
|
||
*/
|
||
addProj(order){
|
||
this.$emit('addProj',order);
|
||
},
|
||
|
||
/**
|
||
* 作废请求后台方法
|
||
*/
|
||
doVoidConfirm(){
|
||
request({
|
||
url: '/admin-api/repair/tickets/void',
|
||
method: 'POST',
|
||
data:this.voidData
|
||
}).then((res) => {
|
||
if (res.code == 200){
|
||
uni.showToast({
|
||
title: "操作成功",
|
||
icon: "success",
|
||
})
|
||
}
|
||
this.doVoidCancel()
|
||
this.$emit('childEvent')
|
||
})
|
||
},
|
||
|
||
doVoidCancel(){
|
||
this.show = false
|
||
},
|
||
|
||
/**
|
||
* 项目派工
|
||
*/
|
||
projectDis(){
|
||
uni.navigateTo({
|
||
url: '/pages-order/choosePeople/choosePeople?id=' + this.order.id
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.popup-content {
|
||
@include flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 30rpx 30rpx 120rpx 30rpx;
|
||
height: auto;
|
||
background-color: #fff;
|
||
}
|
||
.orderCard {
|
||
background: #FFFFFF;
|
||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
border-left: 4rpx solid #FFB323;
|
||
padding: 0 30rpx;
|
||
margin: 15rpx 0;
|
||
}
|
||
|
||
.order-top {
|
||
padding: 20rpx 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
border-bottom: 1px solid #F3F5F7;
|
||
|
||
.orderNo {
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #858BA0;
|
||
}
|
||
|
||
.flag {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
.order-body {
|
||
.carNum {
|
||
margin: 20rpx 0;
|
||
}
|
||
|
||
.carModel {
|
||
margin: 20rpx 0;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #858BA0;
|
||
}
|
||
|
||
.project {
|
||
padding: 20rpx 10rpx;
|
||
background: #F2F2F7;
|
||
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.project-left {
|
||
flex: 1;
|
||
width: 0;
|
||
}
|
||
|
||
.project-right {
|
||
padding: 0 16rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
border-left: 1rpx solid #DDDDDD;
|
||
|
||
.rightIcon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
|
||
.rightText {
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #17DBB1;
|
||
}
|
||
}
|
||
|
||
.title {
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #0174F6;
|
||
display: flex;
|
||
align-items: center;
|
||
column-gap: 8rpx;
|
||
}
|
||
|
||
.titleIcon {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
}
|
||
|
||
.desc {
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
margin-top: 10rpx;
|
||
}
|
||
}
|
||
|
||
.baseInfo {
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #858BA0;
|
||
|
||
& > view {
|
||
margin: 30rpx 0;
|
||
}
|
||
}
|
||
|
||
.footer {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
column-gap: 10rpx;
|
||
padding-bottom: 30rpx;
|
||
|
||
.btn {
|
||
width: 172rpx;
|
||
height: 60rpx;
|
||
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
||
border: 2rpx solid #0174F6;
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #0174F6;
|
||
|
||
&.qc {
|
||
background: #0174F6;
|
||
color: #fff;
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
</style>
|