582 lines
13 KiB
Vue
582 lines
13 KiB
Vue
<template>
|
||
<view class="c_box">
|
||
<view class="db_">
|
||
<view class="">
|
||
<view class="size1">{{ order.carNum }}</view>
|
||
<view class="size2">{{ order.carModel }}</view>
|
||
</view>
|
||
<view class="">
|
||
<view class="size3">{{order.repairTypeText}}</view>
|
||
<view class="size4">进厂报修项目</view>
|
||
</view>
|
||
</view>
|
||
<view class="cont_title">
|
||
<view class="project-left">
|
||
<view class="c_t_title">
|
||
<image class="titleIcon" mode="aspectFit" src="/static/icons/order-icon1.png"></image>
|
||
所有维修项目
|
||
</view>
|
||
<view class="c_t_size">{{ 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="k_" v-if="order.ifShow">
|
||
<view class="db_k">
|
||
<view class="">车辆状态：<span :style="{ color: getFlagColor(order.flag) }" class="flag">
|
||
{{ order.flagStr }}
|
||
</span>
|
||
</view>
|
||
<view class="">服务顾问：{{ order.counselorName }}</view>
|
||
</view>
|
||
<view class="title_">客户信息：</view>
|
||
<view class="">车主信息：{{ order.userName }} {{ order.userPhone }}</view>
|
||
<view v-if="order.appointDate">
|
||
预约时间：{{ order.appointDate }}
|
||
</view>
|
||
<view class="">业务渠道：刘国强 23124422900</view>
|
||
<view class="">业务来源：{{ order.busiFrom }}</view>
|
||
<view class="">经办人：{{order.handleName}}</view>
|
||
<view v-if="order.payTypeText" class="">
|
||
支付方式：{{ order.payTypeText }}
|
||
</view>
|
||
<view v-if="!order.payTypeText">
|
||
支付方式：未结算
|
||
</view>
|
||
<view class="">创建日期：{{formatTimestamp(order.createTime)}}</view>
|
||
</view>
|
||
<view class="order-body">
|
||
<view class="footer">
|
||
<view @click="checkoutShow(order)" v-if="order.ifShow == false" class="btn pg">
|
||
展开
|
||
</view>
|
||
<view @click="checkoutShow(order)" v-else class="btn pg">
|
||
收起
|
||
</view>
|
||
<view @click="openPickcar(order.id)" v-if="order.ticketsStatus == '04' && order.isPickCar != 1"
|
||
class="btn pg">
|
||
接车
|
||
</view>
|
||
<view @click="projectDis"
|
||
v-if="order.ticketsStatus == '04' && order.isPickCar == 1 && (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="userInfo.roleCodes.includes('weixiu') || userInfo.roleCodes.includes('service_advisor') || userInfo.roleCodes.includes('general_inspection')"
|
||
@click="doVoid(order)" class="btn pg" style="border-color: #F2612E;color: #F2612E;">
|
||
<!-- 在什么都不能操作的情况下，可以查看详情-->
|
||
作废
|
||
</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="editWaresPrice" v-if="userInfo.roleCodes.includes('repair_warehouse')" 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";
|
||
import {
|
||
formatTimestamp
|
||
} from '@/utils/utils'
|
||
export default {
|
||
name: "orderCard",
|
||
props: {
|
||
order: {
|
||
type: Object,
|
||
default: () => {
|
||
return {}
|
||
}
|
||
},
|
||
userInfo: {
|
||
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,
|
||
ifLeader: false,
|
||
}
|
||
},
|
||
mounted() {
|
||
this.ifLeader = getStrData('ifLeader')
|
||
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: {
|
||
formatTimestamp(timestamp) {
|
||
return formatTimestamp(timestamp);
|
||
},
|
||
checkoutShow(order) {
|
||
console.log('修改之前的show', order.ifShow);
|
||
order.ifShow = !order.ifShow
|
||
console.log('修改之后的show', order.ifShow);
|
||
},
|
||
|
||
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'
|
||
})
|
||
},
|
||
/**
|
||
* 修改配件价格
|
||
*/
|
||
editWaresPrice() {
|
||
uni.navigateTo({
|
||
url: `/pages-order/orderDetail/orderDetail?id=${this.order.id}&isDetail=0`
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 作废
|
||
*/
|
||
doVoid(row) {
|
||
this.$emit('doVoid', row);
|
||
},
|
||
/**
|
||
* 添加项目
|
||
*/
|
||
addProj(order) {
|
||
this.$emit('addProj', order);
|
||
},
|
||
/**
|
||
* 接单
|
||
*/
|
||
openFile(orderId) {
|
||
console.log('执行');
|
||
this.$emit('getOrder', orderId);
|
||
},
|
||
/**
|
||
* 接车
|
||
*/
|
||
openPickcar(orderId) {
|
||
this.$emit('pickCar', orderId);
|
||
},
|
||
|
||
/**
|
||
* 项目派工
|
||
*/
|
||
projectDis(isNei) {
|
||
if ('1' == isNei) {
|
||
uni.navigateTo({
|
||
url: '/pages-order/choosePeople/choosePeople?id=' + this.order.id + '&isNei=' + isNei
|
||
})
|
||
} else {
|
||
let canOperate = this.order.canOperate ? '1' : '0'
|
||
uni.navigateTo({
|
||
url: '/pages-order/choosePeople/choosePeople?id=' + this.order.id + '&canOperate=' +
|
||
canOperate
|
||
})
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</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: 10rpx 0;
|
||
}
|
||
|
||
.carModel {
|
||
margin: 10rpx 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: 10rpx 0;
|
||
}
|
||
}
|
||
|
||
.footer {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
//column-gap: 10rpx;
|
||
padding-bottom: 30rpx;
|
||
|
||
.btn {
|
||
width: 172rpx;
|
||
height: 48rpx;
|
||
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
||
border: 2rpx solid #0174F6;
|
||
margin: 0 2rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #0174F6;
|
||
|
||
&.qc {
|
||
background: #0174F6;
|
||
color: #fff;
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
.c_box {
|
||
width: 100%;
|
||
// height: 300rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 8rpx;
|
||
box-sizing: border-box;
|
||
padding: 30rpx;
|
||
margin: 10px auto;
|
||
}
|
||
|
||
.db_ {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.db_c {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin: 30rpx auto;
|
||
}
|
||
|
||
.db_k {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
padding: 20rpx 0rpx;
|
||
border-bottom: 1px dashed #686B71;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.title_ {
|
||
font-weight: 800;
|
||
font-size: 28rpx;
|
||
color: #23252B;
|
||
}
|
||
|
||
.end_ {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: end;
|
||
}
|
||
|
||
.ds_ {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.l_buttom {
|
||
width: 168rpx;
|
||
height: 48rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 30rpx;
|
||
border: 2rpx solid #2E90F2;
|
||
color: #2E90F2;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #2E90F2;
|
||
margin-left: 10rpx;
|
||
}
|
||
|
||
.r_buttom {
|
||
width: 168rpx;
|
||
height: 48rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 30rpx;
|
||
border: 2rpx solid #F2612E;
|
||
color: #F2612E;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
margin-left: 10rpx;
|
||
}
|
||
|
||
.k_ {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #686B71;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.cont_title {
|
||
display: flex;
|
||
background: #F7F8F9;
|
||
border-radius: 8rpx;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 10rpx;
|
||
margin: 30rpx auto;
|
||
|
||
.titleIcon {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
|
||
.c_t_title {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #176C97;
|
||
}
|
||
|
||
.c_t_size {
|
||
font-weight: 600;
|
||
font-size: 24rpx;
|
||
color: #3B3D41;
|
||
}
|
||
|
||
.size1 {
|
||
font-weight: 600;
|
||
font-size: 28rpx;
|
||
color: #3B3D41;
|
||
}
|
||
|
||
.size2 {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #686B71;
|
||
}
|
||
|
||
.size3 {
|
||
font-weight: 600;
|
||
font-size: 28rpx;
|
||
color: #3B3D41;
|
||
}
|
||
|
||
.size4 {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #176C97;
|
||
}
|
||
</style> |