lanan-repair-app/components/orderCard.vue

582 lines
13 KiB
Vue
Raw Normal View History

2025-09-03 13:22:16 +08:00
<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>
2025-08-13 17:30:12 +08:00
</view>
2025-09-03 13:22:16 +08:00
<view class="cont_title">
2025-08-13 17:30:12 +08:00
<view class="project-left">
2025-09-03 13:22:16 +08:00
<view class="c_t_title">
2025-08-13 17:30:12 +08:00
<image class="titleIcon" mode="aspectFit" src="/static/icons/order-icon1.png"></image>
2025-09-03 13:22:16 +08:00
所有维修项目
2025-08-13 17:30:12 +08:00
</view>
2025-09-03 13:22:16 +08:00
<view class="c_t_size">{{ projectName }}</view>
2025-08-13 17:30:12 +08:00
</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>
2025-09-03 13:22:16 +08:00
<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>
2025-08-13 17:30:12 +08:00
</view>
2025-09-03 13:22:16 +08:00
<view class="title_">客户信息</view>
<view class="">车主信息{{ order.userName }} {{ order.userPhone }}</view>
2025-08-13 17:30:12 +08:00
<view v-if="order.appointDate">
预约时间{{ order.appointDate }}
</view>
2025-09-03 13:22:16 +08:00
<view class="">业务渠道刘国强 23124422900</view>
<view class="">业务来源{{ order.busiFrom }}</view>
<view class="">经办人{{order.handleName}}</view>
<view v-if="order.payTypeText" class="">
2025-08-13 17:30:12 +08:00
支付方式{{ order.payTypeText }}
</view>
<view v-if="!order.payTypeText">
支付方式未结算
</view>
2025-09-03 13:22:16 +08:00
<view class="">创建日期{{formatTimestamp(order.createTime)}}</view>
2025-08-13 17:30:12 +08:00
</view>
2025-09-03 13:22:16 +08:00
<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>
2025-08-13 17:30:12 +08:00
</view>
</view>
</view>
2025-09-03 13:22:16 +08:00
</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 {}
}
2025-08-13 17:30:12 +08:00
}
},
2025-09-03 13:22:16 +08:00
computed: {
projectName() {
if (this.order && this.order.projectList && this.order.projectList.length > 0) {
return this.order.projectList.map(m => m.name).join(',')
}
return ''
2025-08-13 17:30:12 +08:00
}
2025-09-03 13:22:16 +08:00
},
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) {
2025-09-30 09:37:26 +08:00
console.log('执行');
2025-09-03 13:22:16 +08:00
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
})
}
2025-08-13 17:30:12 +08:00
}
}
2025-09-03 13:22:16 +08:00
}
</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;
2025-08-13 17:30:12 +08:00
}
2025-09-03 13:22:16 +08:00
.flag {
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 24rpx;
2025-08-13 17:30:12 +08:00
}
2025-09-03 13:22:16 +08:00
}
.order-body {
.carNum {
margin: 10rpx 0;
2025-08-13 17:30:12 +08:00
}
2025-09-03 13:22:16 +08:00
.carModel {
margin: 10rpx 0;
font-weight: 500;
font-size: 28rpx;
color: #858BA0;
2025-08-13 17:30:12 +08:00
}
2024-10-18 20:03:26 +08:00
2025-09-03 13:22:16 +08:00
.project {
padding: 20rpx 10rpx;
background: #F2F2F7;
border-radius: 4rpx 4rpx 4rpx 4rpx;
display: flex;
align-items: center;
2024-11-04 17:04:44 +08:00
2025-09-03 13:22:16 +08:00
.project-left {
flex: 1;
width: 0;
2025-08-13 17:30:12 +08:00
}
2024-11-08 16:38:00 +08:00
2025-09-03 13:22:16 +08:00
.project-right {
padding: 0 16rpx;
display: flex;
flex-direction: column;
align-items: center;
2024-11-04 11:39:45 +08:00
2025-09-03 13:22:16 +08:00
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;
}
2024-11-04 11:39:45 +08:00
2025-08-13 17:30:12 +08:00
}
}
}
2025-09-03 13:22:16 +08:00
.c_box {
width: 100%;
// height: 300rpx;
background: #FFFFFF;
border-radius: 8rpx;
box-sizing: border-box;
padding: 30rpx;
margin: 10px auto;
2025-08-13 17:30:12 +08:00
}
2024-10-13 23:24:23 +08:00
2025-09-03 13:22:16 +08:00
.db_ {
display: flex;
align-items: center;
justify-content: space-between;
}
.db_c {
display: flex;
align-items: center;
justify-content: space-between;
margin: 30rpx auto;
2025-08-13 17:30:12 +08:00
}
2024-10-13 23:24:23 +08:00
2025-09-03 13:22:16 +08:00
.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;
2025-08-13 17:30:12 +08:00
}
2024-10-13 23:24:23 +08:00
2025-09-03 13:22:16 +08:00
.title_ {
font-weight: 800;
2025-08-13 17:30:12 +08:00
font-size: 28rpx;
2025-09-03 13:22:16 +08:00
color: #23252B;
2025-08-13 17:30:12 +08:00
}
2024-10-13 23:24:23 +08:00
2025-09-03 13:22:16 +08:00
.end_ {
display: flex;
align-items: center;
justify-content: end;
}
2024-10-13 23:24:23 +08:00
2025-09-03 13:22:16 +08:00
.ds_ {
2025-08-13 17:30:12 +08:00
display: flex;
align-items: center;
2025-09-03 13:22:16 +08:00
}
.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;
}
2024-10-13 23:24:23 +08:00
2025-08-13 17:30:12 +08:00
.project-left {
2025-09-03 13:22:16 +08:00
// flex: 1;
// width: 0;
2025-08-13 17:30:12 +08:00
}
2024-10-13 23:24:23 +08:00
2025-08-13 17:30:12 +08:00
.project-right {
padding: 0 16rpx;
display: flex;
flex-direction: column;
align-items: center;
2024-10-13 23:24:23 +08:00
2025-08-13 17:30:12 +08:00
border-left: 1rpx solid #DDDDDD;
2024-10-13 23:24:23 +08:00
2025-08-13 17:30:12 +08:00
.rightIcon {
width: 40rpx;
height: 40rpx;
}
2024-10-13 23:24:23 +08:00
2025-08-13 17:30:12 +08:00
.rightText {
font-weight: 500;
font-size: 24rpx;
color: #17DBB1;
}
}
2025-09-03 13:22:16 +08:00
}
2024-10-13 23:24:23 +08:00
2025-09-03 13:22:16 +08:00
.c_t_title {
font-weight: 400;
font-size: 24rpx;
color: #176C97;
}
2024-10-13 23:24:23 +08:00
2025-09-03 13:22:16 +08:00
.c_t_size {
font-weight: 600;
font-size: 24rpx;
color: #3B3D41;
2025-08-13 17:30:12 +08:00
}
2024-10-13 23:24:23 +08:00
2025-09-03 13:22:16 +08:00
.size1 {
font-weight: 600;
2025-08-13 17:30:12 +08:00
font-size: 28rpx;
2025-09-03 13:22:16 +08:00
color: #3B3D41;
2025-08-13 17:30:12 +08:00
}
2024-10-13 23:24:23 +08:00
2025-09-03 13:22:16 +08:00
.size2 {
font-weight: 400;
font-size: 24rpx;
color: #686B71;
}
2024-10-13 23:24:23 +08:00
2025-09-03 13:22:16 +08:00
.size3 {
font-weight: 600;
font-size: 28rpx;
color: #3B3D41;
}
2025-08-13 17:30:12 +08:00
2025-09-03 13:22:16 +08:00
.size4 {
font-weight: 400;
font-size: 24rpx;
color: #176C97;
2025-08-13 17:30:12 +08:00
}
2025-09-03 13:22:16 +08:00
</style>