by2025/SmartParks_uniapp
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

工单
Some checks failed
Uniapp 自动化打包 CI/CD / 打包 Uniapp 项目 (push) Failing after 56s
Details

Browse Source
This commit is contained in:
liyuanchao
2025-08-26 17:31:30 +08:00
parent 264053bd7e
commit 85a1ce799a
4 changed files with 271 additions and 333 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
pages/sys/user/myRepair/addRepair.vue
View File

@@ -21,7 +21,7 @@
<text class="text-type">{{ selectedType }}</text>
<image class="right-arrow" src="/static/ic_right_arrow_g.png" />
</view>
<view class="add-repair-label">问题详情 <text class="add-repair-optional">(非必填)</text></view>
<view class="add-repair-label">备注 <text class="add-repair-optional">(非必填)</text></view>
<textarea v-model="repairInfo.remark" class="add-repair-detail-textarea"
placeholder="如果以上报事不能解决您的问题，可以在这里填写说明" />

8
pages/sys/user/myRepair/myRepair.vue
View File

@@ -23,7 +23,7 @@
<!-- 有数据时 -->
<view v-else class="repair-list-box">
<view v-for="(item, idx) in records" :key="idx" class="repair-card" @click="showDetail(item)">
<view v-for="(item, idx) in records" :key="idx" class="repair-card" @click="goDetail(item)">
<view class="repair-row">
<view class="repair-no">工单号：{{ item.orderNo }}</view>
<view class="repair-status" :class="getStatusColor(item.status)">
@@ -172,6 +172,12 @@
};
return statusMap[status] || '';
},
goDetail(item) {
const itemStr = encodeURIComponent(JSON.stringify(item));
uni.navigateTo({
url: "/pages/sys/workbench/order/orderDetail?item=" + itemStr,
});
},
showDetail(item) {
this.detailItem = item;
if (item.status == 0) {

592
pages/sys/workbench/order/orderDetail.vue
View File

@@ -1,330 +1,262 @@
<template>
<view class="page-container">
<view class="top-line" />
<!-- 工单状态进度 -->
<view class="repair-detail-progress-box">
<view class="repair-detail-progress">
<view v-for="(step, idx) in progressSteps" :key="idx" class="repair-detail-step">
<view
:class="['repair-detail-dot', detailStep >= idx ? 'active' : '', (detailStep === idx && detailStatus !== '已结束') ? 'current' : '']">
</view>
<view v-if="idx < progressSteps.length - 1"
:class="['repair-detail-line', detailStep > idx ? 'active' : '']"></view>
</view>
</view>
<view class="repair-detail-progress-labels">
<view v-for="(step, idx) in progressSteps" :key="idx" class="repair-detail-label">{{ step }}
</view>
</view>
</view>
<!-- 工单详情 -->
<view class="detail-list">
<view class="detail-value"><text class="detail-key">工单编号：</text>{{ detail.orderNo }}</view>
<view class="detail-value"><text class="detail-key">工单名称：</text>{{ detail.orderName }}</view>
<view class="detail-value"><text class="detail-key">工单类型：</text>{{ detail.typeName }}</view>
<view class="detail-value"><text class="detail-key">处理地点：</text>{{ detail.location }}</view>
<view class="detail-value"><text class="detail-key">创建时间：</text>{{ detail.createTime }}</view>
<view class="detail-value"><text class="detail-key">发起单位/人：</text>{{ detail.initiatorPeople }}</view>
<view class="detail-value remark"><text>备注：</text>{{ detail.remark }}</view>
<view class="detail-value"><text class="detail-key">工单图片：</text></view>
<view class="image-list" v-if="orderImgUrls.length > 0">
<u-image
v-for="(imgUrl, index) in orderImgUrls"
:key="index"
:src="imgUrl"
width="200rpx"
height="200rpx"
border-radius="10rpx"
@click="previewImage(orderImgUrls, index)"
style="margin-right: 20rpx; margin-bottom: 20rpx;"
mode="aspectFill"
></u-image>
</view>
</view>
<!-- 底部操作按钮 -->
<view
v-if="((!this.isManager&&this.detailStep != 0) || (this.isManager&&this.detailStep == 0))&&this.detailStep!=3"
class="btn-group">
<button class="btn ghost"
@click="transfer(1)">{{this.isManager ? '指派':this.detailStep == 2 ? '完成':'开始'}}</button>
<button v-if="this.detailStep == 1" class="btn primary" @click="transfer(2)">转派</button>
</view>
<SelectUser :visible.sync="showSelect" :list="users" :multiple="false" @confirm="onConfirm" />
</view>
</template>
<script>
import SelectUser from '@/components/SelectUser.vue'
export default {
components: {
SelectUser
},
data() {
return {
detailStep: 0,
detailStatus: '',
progressSteps: ['创建工单', '已接单', '处理中', '已结束'],
currentStatus: 2, // 0: 待分配，1: 已接单，2: 处理中，3: 已完成
detail: {},
isManager: false,
showSelect: false,
users: [],
orderImgUrls: [] // 添加用于存储处理后的图片URL数组
};
},
onLoad(options) {
this.isManager = this.vuex_user.roles[0].roleId == 1
if (options.item) {
const item = JSON.parse(decodeURIComponent(options.item));
this.detail = item;
// 现在可以使用item对象了
// 进度映射
this.getStepInfo()
// 处理图片URL
this.getImageUrl()
}
if ((this.isManager && this.detailStep == 0) || (!this.isManager && this.detailStep == 1)) {
this.getHandler()
}
},
methods: {
goBack() {
uni.navigateBack();
},
async getImageUrl() {
if (!this.detail.orderImgUrl) return;
const imgIds = this.detail.orderImgUrl.split(',');
const res = await this.$u.api.getImageUrl({}, imgIds);
if (res.code == 200 && res.data) {
// 提取res.data数组中每个对象的url字段
this.orderImgUrls = res.data.map(item => item.url);
}
},
async getHandler() {
let handlers = await this.$u.api.getHandler3({}, this.detail.type);
if (handlers.code === 200) {
this.users = [...this.users, ...handlers.data];
}
},
getStepInfo(){
if (this.detail.status == 0) {
this.detailStep = 0;
this.detailStatus = '创建工单';
} else if (this.detail.status == 4) {
this.detailStep = 3;
this.detailStatus = '已结束';
} else if (this.detail.status == 3) {
this.detailStep = 2;
this.detailStatus = '处理中';
} else {
this.detailStep = 1;
this.detailStatus = '已接单';
}
},
previewImage(urls, index) {
// 使用uView的图片预览组件
// 过滤掉空值
const validUrls = urls.filter(url => url && url.trim() !== '')
uni.previewImage({
urls: validUrls,
current: validUrls[index], // current 必须是 url，而不是索引
indicator: 'number', // 显示数字指示器
backgroundColor: '#000'
})
},
async onConfirm(selected) {
let params = this.detail
params.handler = selected[0].value
params.status = 1
let res = await this.$u.api.updateOrder2(params);
if (res.code == '200') {
// 关闭页面前发送事件通知前页面刷新
uni.$emit('refreshData', '');
this.detail.handler = selected.value
this.detail.status = 1
this.getStepInfo()
}
},
async submit() {
let params = this.detail
if(this.detail.status == 1||this.detail.status == 2){
params.status = 3
}else {
params.status = 4
}
let res = await this.$u.api.updateOrder2(params);
if (res.code == '200') {
// 关闭页面前发送事件通知前页面刷新
uni.$emit('refreshData', '');
this.detail.status = params.status
this.getStepInfo()
}
},
transfer(type) {
if (this.isManager || type == 2) {
this.showSelect = true
} else {
this.submit()
}
},
}
};
</script>
<style scoped>
.page-container {
background: #fff;
}
.top-line {
width: 100vw;
height: 3rpx;
background: #ECECEC;
}
.repair-detail-progress-box {
height: 107rpx;
margin-bottom: 41rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
}
.repair-detail-progress {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 5rpx;
margin-left: 85rpx;
width: 100%;
}
.repair-detail-step {
display: flex;
align-items: center;
flex: 1;
position: relative;
}
.repair-detail-dot {
width: 22rpx;
height: 22rpx;
border-radius: 50%;
background: #BDBDBD;
border: 2rpx solid #BDBDBD;
position: relative;
z-index: 2;
}
.repair-detail-dot.active {
background: #2186FF;
border-color: #2186FF;
}
.repair-detail-dot.current {
background: #EF8D00;
border-color: #EF8D00;
}
.repair-detail-line {
flex: 1;
height: 4rpx;
background: #BDBDBD;
margin: 0 2rpx;
z-index: 1;
}
.repair-detail-line.active {
background: #2186FF;
}
.repair-detail-progress-labels {
display: flex;
justify-content: space-between;
margin-left: 0;
width: 100%;
}
.repair-detail-label {
font-size: 22rpx;
color: #888;
text-align: center;
flex: 1;
position: relative;
top: 8rpx;
}
.detail-list {
font-size: 28rpx;
line-height: 2em;
margin-left: 40rpx;
}
.detail-key {
color: #595858;
}
.detail-value {
margin-bottom: 30rpx;
color: ##2F2F2F;
}
.remark {
white-space: pre-line;
}
.link {
color: #007CFF;
text-decoration: underline;
}
.image-list {
display: flex;
flex-wrap: wrap;
margin-top: 20rpx;
}
.image-item {
width: 200rpx;
height: 200rpx;
border-radius: 10rpx;
margin-right: 20rpx;
margin-bottom: 20rpx;
}
.btn-group {
display: flex;
justify-content: space-around;
margin-top: 60rpx;
}
.btn {
width: 276rpx;
height: 88rpx;
padding: 20rpx;
font-size: 30rpx;
border-radius: 50rpx;
display: flex;
align-items: center;
justify-content: center;
}
.primary {
background-color: #1890ff;
color: #fff;
}
.ghost {
background-color: #fff;
color: #1890ff;
border: 2rpx solid #1890ff;
}
</style>
<template>
<view class="page-container">
<view class="top-line" />
<view class="item-bg"><text class="detail-key">工单编号：</text>{{ detail.orderNo }}</view>
<view class="item-bg">
<view class="item-title">上报人信息</view>
<view class="detail-key">发起人：{{ detail.initiatorPeople }}</view>
<view class="detail-key">联系电话：{{ detail.initiatorPhone }}</view>
</view>
<view class="item-bg">
<view class="item-title">保修信息</view>
<view class="detail-key">工单名称：{{ detail.orderName }}</view>
<view class="detail-key">工单类型：{{ detail.typeName }}</view>
<view class="detail-key">处理地点：{{ detail.location }}</view>
<view class="detail-key">备注：{{ detail.remark }}</view>
<view class="detail-value"><text class="detail-key">工单图片：</text></view>
<view class="image-list" v-if="orderImgUrls.length > 0">
<u-image
v-for="(imgUrl, index) in orderImgUrls"
:key="index"
:src="imgUrl"
width="200rpx"
height="200rpx"
border-radius="10rpx"
@click="previewImage(orderImgUrls, index)"
style="margin-right: 20rpx; margin-bottom: 20rpx;"
mode="aspectFill"
></u-image>
</view>
</view>
<view v-if="detail.status>1" class="item-bg">
<view class="item-title">负责人信息</view>
<view class="detail-key">负责人：{{ detail.handlerText }}</view>
<view class="detail-key">联系电话：{{ detail.handlerPhone }}</view>
</view>
<!-- 纵向进度条 -->
<view class="item-bg">
<view class="item-title">进度跟踪</view>
<view v-for="(status, index) in detail.recordVoList" :key="index" class="repair-detail-step">
<view class="step-left">
<text class="step-date">{{ status.createTime.substring(0,11)}}</text>
<text class="step-time">{{ status.createTime.substring(11,16) }}</text>
</view>
<view class="step-dot-container">
<view class="repair-detail-dot" ></view>
<!-- 固定高度连线 -->
<view
v-if="index < detail.recordVoList.length - 1" class="repair-detail-line"
></view>
</view>
<view class="step-right">
<text class="step-name">{{ getStatusLabel(status.status) }}</text>
</view>
</view>
</view>
<!-- 底部操作按钮 -->
<view
v-if="((!isManager && detailStep != 0) || (isManager && detailStep == 0)) && detailStep != 3&&!isNaomalUser"
class="btn-group">
<button class="btn ghost"
@click="transfer(1)">{{ isManager ? '指派' : (detailStep == 2 ? '完成' : '开始') }}</button>
<button v-if="detailStep == 1" class="btn primary" @click="transfer(2)">转派</button>
</view>
<view class="kg">
</view>
<SelectUser :visible.sync="showSelect" :list="users" :multiple="false" @confirm="onConfirm" />
</view>
</template>
<script>
import SelectUser from '@/components/SelectUser.vue'
export default {
components: { SelectUser },
data() {
return {
detailStep: 0,
detailStatus: '',
currentStatus: 2,
detail: {},
isManager: false,
isNaomalUser:true,
showSelect: false,
users: [],
orderImgUrls: []
};
},
onLoad(options) {
this.isManager = this.vuex_user?.roles?.[0]?.roleId < 3
this.isNaomalUser = this.vuex_user?.roles?.[0]?.roleId >10
if (options.item) {
const item = JSON.parse(decodeURIComponent(options.item));
this.detail = item;
this.getStepInfo()
this.getImageUrl()
}
if ((this.isManager && this.detailStep == 0) || (!this.isManager && this.detailStep == 1)) {
this.getHandler()
}
},
methods: {
goBack() { uni.navigateBack(); },
async getImageUrl() {
if (!this.detail.orderImgUrl) return;
const imgIds = this.detail.orderImgUrl.split(',');
const res = await this.$u.api.getImageUrl({}, imgIds.join(','));
if (res.code == 200 && res.data) this.orderImgUrls = res.data.map(item => item.url);
},
async getHandler() {
let handlers = await this.$u.api.getHandler3({}, this.detail.type);
if (handlers.code === 200) this.users = [...this.users, ...handlers.data];
},
getStepInfo() {
let currentIndex = 0;
if (this.detail.status == 0) currentIndex = 0;
else if (this.detail.status == 1) currentIndex = 1;
else if (this.detail.status == 3) currentIndex = 2;
else if (this.detail.status == 4) currentIndex = 3;
this.detailStep = currentIndex;
},
getStatusLabel(status) {
const statusMap = {
0: "创建工单",
1: "已接单",
2: "已接单",
3: "处理中",
4: "已完成",
};
return statusMap[status] || "";
},
previewImage(urls, index) {
const validUrls = urls.filter(url => url && url.trim() !== '');
const currentIndex = validUrls.indexOf(urls[index]);
uni.previewImage({
urls: validUrls,
current: currentIndex >= 0 ? currentIndex : 0,
indicator: 'number',
backgroundColor: '#000'
})
},
async onConfirm(selected) {
let params = this.detail
params.handler = selected[0].value
params.status = 1
let res = await this.$u.api.updateOrder2(params);
if (res.code == '200') {
uni.$emit('refreshData', '');
if(!this.isManager){
uni.navigateBack();
return
}
this.detail.handler = selected.value
this.detail.status = 1
const d = new Date();
const z = n => n.toString().padStart(2, '0');
let time = `${d.getFullYear()}-${z(d.getMonth()+1)}-${z(d.getDate())} ${z(d.getHours())}:${z(d.getMinutes())}:${z(d.getSeconds())}`;
let step = {}
step.id= this.detail.recordVoList[0].id,
step.orderId= this.detail.recordVoList[0].orderId,
step.status= '1',
step.handler='',
step.handlerName='',
step.createTime= time
this.detail.recordVoList.push(step)
this.getStepInfo()
}
},
async submit() {
let params = this.detail
if (this.detail.status == 1 || this.detail.status == 2) params.status = 3
else params.status = 4
let res = await this.$u.api.updateOrder2(params);
if (res.code == 200) {
uni.$emit('refreshData', '');
this.detail.status = params.status
if(params.status ==3){
this.detail.handlerText = this.vuex_user.nickName
this.detail.handlerPhone = this.vuex_user.phonenumber
}
const d = new Date();
const z = n => n.toString().padStart(2, '0');
let time = `${d.getFullYear()}-${z(d.getMonth()+1)}-${z(d.getDate())} ${z(d.getHours())}:${z(d.getMinutes())}:${z(d.getSeconds())}`;
let step = {}
step.id= this.detail.recordVoList[0].id,
step.orderId= this.detail.recordVoList[0].orderId,
step.status= params.status,
step.handler='',
step.handlerName='',
step.createTime= time
this.detail.recordVoList.push(step)
this.getStepInfo()
}
},
transfer(type) {
if (this.isManager || type == 2) this.showSelect = true
else this.submit()
}
}
}
</script>
<style scoped>
.page-container { background: #f7f7f7; height: 100vh; }
.top-line { width: 100vw; height: 3rpx; background: #ECECEC; }
.item-bg{ background: #fff; border-radius: 20rpx; margin-top: 10px; margin-left: 25rpx; margin-right: 25rpx; padding: 25rpx; }
.item-title{ color: #000; font-size: 28rpx; font-weight: 600; margin-bottom: 20rpx; }
.repair-detail-step-container { display: flex; flex-direction: column; }
.repair-detail-step {
display: flex;
flex-direction: row;
margin-bottom: 20rpx;
}
.step-left { flex: 1; display: flex; flex-direction: column; align-items: flex-end; padding-right: 20rpx; }
.step-date { font-size: 24rpx; color: #333; }
.step-time { font-size: 24rpx; color: #666; margin-top: 10rpx; }
.step-dot-container {
display: flex;
flex-direction: column;
align-items: center;
width: 40rpx;
}
.repair-detail-dot {
width: 22rpx;
height: 22rpx;
border-radius: 50%;
background: #BDBDBD;
border: 2rpx solid #BDBDBD;
z-index: 2;
background: #2186FF;
border-color: #2186FF;
}
/* 固定高度连线 */
.repair-detail-line {
width: 4rpx;
height: 80rpx; /* 每条线的高度 */
background: #BDBDBD;
margin-top: 2rpx;
background: #2186FF;
}
.step-right { flex: 1; display: flex; flex-direction: column; padding-left: 20rpx; }
.step-name { font-size: 28rpx; color: #333; font-weight: bold; margin-bottom: 6rpx; }
.step-desc { font-size: 24rpx; color: #666; }
.detail-key { color: #222; font-size: 28rpx; margin-bottom: 20rpx; }
.detail-value { margin-bottom: 30rpx; color: #2F2F2F; }
.image-list { display: flex; flex-wrap: wrap; margin-top: 20rpx; }
.btn-group { display: flex; justify-content: space-around; margin-top: 60rpx; }
.btn { width: 276rpx; height: 88rpx; padding: 20rpx; font-size: 30rpx; border-radius: 50rpx; display: flex; align-items: center; justify-content: center; }
.primary { background-color: #1890ff; color: #fff; }
.ghost { background-color: #fff; color: #1890ff; border: 2rpx solid #1890ff; }
.kg{
height: 60rpx;
}
</style>