355 lines
8.7 KiB
Vue
355 lines
8.7 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>
|
||
<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') " class="btn pg">
|
||
<!--修改派工-->
|
||
修改派工
|
||
</view>
|
||
<view @click="projectDis('1')" v-if="order.ticketsStatus == '05' && 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="(order.ticketsStatus == '04' || order.ticketsStatus == '05')&& (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,
|
||
}
|
||
},
|
||
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: {
|
||
|
||
getFlagColor(flag) {
|
||
if (flag == 1) {
|
||
return '#E8A321'
|
||
} else if (flag === 2) {
|
||
return '#999'
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 开始施工
|
||
*/
|
||
doOrder(id){
|
||
this.$emit('startWork',id);
|
||
},
|
||
/**
|
||
* 查看详情
|
||
*/
|
||
gotoDetail() {
|
||
uni.navigateTo({
|
||
url: '/pages-order/orderDetail/orderDetail?id=' + this.order.id + '&isDetail=' + '1'
|
||
})
|
||
},
|
||
|
||
/**
|
||
* 作废
|
||
*/
|
||
doVoid(row){
|
||
this.$emit('doVoid',row);
|
||
},
|
||
/**
|
||
* 添加项目
|
||
*/
|
||
addProj(order){
|
||
this.$emit('addProj',order);
|
||
},
|
||
/**
|
||
* 接单
|
||
*/
|
||
openFile(orderId){
|
||
this.$emit('getOrder',orderId);
|
||
},
|
||
|
||
/**
|
||
* 项目派工
|
||
*/
|
||
projectDis(isNei){
|
||
if('1'==isNei){
|
||
uni.navigateTo({
|
||
url: '/pages-order/choosePeople/choosePeople?id=' + this.order.id + '&isNei='+isNei
|
||
})
|
||
}else {
|
||
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>
|