|
@@ -9,7 +9,7 @@
|
9
|
9
|
</view>
|
10
|
10
|
<!-- tab -->
|
11
|
11
|
<!-- 工单信息 -->
|
12
|
|
- <view class="orderDetail_info">
|
|
12
|
+ <view class="orderDetail_info" v-show="selectedTab === 1">
|
13
|
13
|
<view class="orderDetail_infoItem" v-if="orderInfo.id">
|
14
|
14
|
<view class="orderDetail_infoItem_header">
|
15
|
15
|
<view class="orderDetail_infoItem_header_title">
|
|
@@ -115,6 +115,46 @@
|
115
|
115
|
</view>
|
116
|
116
|
</view>
|
117
|
117
|
</view>
|
|
118
|
+ <!-- 流程信息 -->
|
|
119
|
+ <view class="orderDetail_info" v-show="selectedTab === 2">
|
|
120
|
+ <view class="orderDetail_infoItem" v-if="logList.length">
|
|
121
|
+ <view class="orderDetail_infoItem_header">
|
|
122
|
+ <view class="orderDetail_infoItem_header_title">
|
|
123
|
+ <view class="icon"></view>
|
|
124
|
+ <view class="taskNameAndWorkerName">
|
|
125
|
+ <text class="taskName">流程信息</text>
|
|
126
|
+ </view>
|
|
127
|
+ </view>
|
|
128
|
+ </view>
|
|
129
|
+ <view class="orderDetail_infoItem_item process">
|
|
130
|
+ <view class="orderDetail_process_item" v-for="(step,i) in logList" :key="i">
|
|
131
|
+ <view class="step_infoStart">
|
|
132
|
+ <view class="step_name">{{step.operationName}}</view>
|
|
133
|
+ <view class="step_time" v-if="step.record && step.record[0]">
|
|
134
|
+ {{step.record[0].operationTime|formatDate('MM-dd HH:mm')}}
|
|
135
|
+ </view>
|
|
136
|
+ </view>
|
|
137
|
+ <view class="step_icon pda pda-icon_liucheng"
|
|
138
|
+ :class="{'active':(step.record&&step.record[0]&&step.record[0].operationTime)}"></view>
|
|
139
|
+ <view class="step_infoEnd">
|
|
140
|
+ <view class="step_overtime" v-if="i!=0&&step.record&&step.record.length">
|
|
141
|
+ 耗时{{filterTime(step.record)}}
|
|
142
|
+ </view>
|
|
143
|
+ <view class="step_dept" v-if="step.record&&step.record[0]&&step.record[0].dept">
|
|
144
|
+ <text v-for="(dept,index) in step.record"
|
|
145
|
+ :key="index">{{dept?(deptDisplay == 2?dept.deptalias:dept.dept)+',':''}}</text>
|
|
146
|
+ </view>
|
|
147
|
+ </view>
|
|
148
|
+ </view>
|
|
149
|
+ </view>
|
|
150
|
+ </view>
|
|
151
|
+ </view>
|
|
152
|
+ <!-- 业务信息 -->
|
|
153
|
+ <view class="orderDetail_info" v-show="selectedTab === 3">
|
|
154
|
+ <view class="orderDetail_infoItem">
|
|
155
|
+ 业务信息
|
|
156
|
+ </view>
|
|
157
|
+ </view>
|
118
|
158
|
<!-- 底部 -->
|
119
|
159
|
<seiminFooterBtn :btns="btns"></seiminFooterBtn>
|
120
|
160
|
<seiminModel ref="seiminModel"></seiminModel>
|
|
@@ -124,6 +164,7 @@
|
124
|
164
|
<script>
|
125
|
165
|
import {
|
126
|
166
|
reqFetchData,
|
|
167
|
+ reqFetchWorkOrderLog,
|
127
|
168
|
} from "../../request/api.js";
|
128
|
169
|
import {
|
129
|
170
|
mapState
|
|
@@ -143,6 +184,8 @@
|
143
|
184
|
export default {
|
144
|
185
|
data() {
|
145
|
186
|
return {
|
|
187
|
+ // 路由传参
|
|
188
|
+ queryParams: {},
|
146
|
189
|
// 关联类型
|
147
|
190
|
ASSOCIATION_TYPES,
|
148
|
191
|
// 选项卡
|
|
@@ -161,8 +204,10 @@
|
161
|
204
|
],
|
162
|
205
|
// 当前选中的tab
|
163
|
206
|
selectedTab: 1,
|
164
|
|
- // 工单详情信息
|
|
207
|
+ // 工单信息
|
165
|
208
|
orderInfo: {},
|
|
209
|
+ // 流程信息
|
|
210
|
+ logList: [],
|
166
|
211
|
//底部按钮
|
167
|
212
|
btns: [],
|
168
|
213
|
};
|
|
@@ -172,14 +217,54 @@
|
172
|
217
|
},
|
173
|
218
|
methods: {
|
174
|
219
|
init(queryParams) {
|
175
|
|
- this.getData(queryParams);
|
|
220
|
+ this.queryParams = queryParams;
|
|
221
|
+ this.changeTab(1);
|
|
222
|
+ },
|
|
223
|
+ // 格式化时分秒
|
|
224
|
+ // (时间小于一分钟则显示秒,时间大于一分钟则显示分钟数,如超出一小时则显示小时和分钟。)time单位:秒
|
|
225
|
+ formatTime(time) {
|
|
226
|
+ let timeStr = "";
|
|
227
|
+ if (time >= 0 && time < 60) {
|
|
228
|
+ // 秒
|
|
229
|
+ timeStr = time + "秒";
|
|
230
|
+ } else if (time >= 60 && time < 3600) {
|
|
231
|
+ // 分钟
|
|
232
|
+ timeStr = Math.floor(time / 60) + "分钟";
|
|
233
|
+ } else if (time >= 3600) {
|
|
234
|
+ // 时 + 分
|
|
235
|
+ let h = "";
|
|
236
|
+ let m = "";
|
|
237
|
+ h = Math.floor(time / 3600) + "小时";
|
|
238
|
+ m = time % 3600 >= 60 ? Math.floor((time % 3600) / 60) + "分钟" : "";
|
|
239
|
+ timeStr = h + m;
|
|
240
|
+ }
|
|
241
|
+ return timeStr;
|
|
242
|
+ },
|
|
243
|
+ // 计算流程信息耗时
|
|
244
|
+ filterTime(step) {
|
|
245
|
+ let num = 0;
|
|
246
|
+ step.forEach((e) => {
|
|
247
|
+ num += e.difTime;
|
|
248
|
+ });
|
|
249
|
+ return this.formatTime(num / 1000);
|
176
|
250
|
},
|
177
|
251
|
// 切换tab
|
178
|
252
|
changeTab(id) {
|
179
|
253
|
this.selectedTab = id;
|
|
254
|
+ switch (id) {
|
|
255
|
+ case 1:
|
|
256
|
+ this.getInfo(this.queryParams);
|
|
257
|
+ break;
|
|
258
|
+ case 2:
|
|
259
|
+ this.getProcess(this.queryParams);
|
|
260
|
+ break;
|
|
261
|
+ case 3:
|
|
262
|
+ this.getInfo(this.queryParams);
|
|
263
|
+ break;
|
|
264
|
+ }
|
180
|
265
|
},
|
181
|
|
- //获取详情页数据
|
182
|
|
- getData(queryParams) {
|
|
266
|
+ //获取工单信息数据
|
|
267
|
+ getInfo(queryParams) {
|
183
|
268
|
uni.showLoading({
|
184
|
269
|
mask: true,
|
185
|
270
|
title: '加载中',
|
|
@@ -307,6 +392,26 @@
|
307
|
392
|
}
|
308
|
393
|
})
|
309
|
394
|
},
|
|
395
|
+ //获取流程信息数据
|
|
396
|
+ getProcess(queryParams) {
|
|
397
|
+ uni.showLoading({
|
|
398
|
+ mask: true,
|
|
399
|
+ title: '加载中',
|
|
400
|
+ })
|
|
401
|
+ reqFetchWorkOrderLog(queryParams.id).then(res => {
|
|
402
|
+ uni.hideLoading();
|
|
403
|
+ if (res.status == 200) {
|
|
404
|
+ // 流程信息
|
|
405
|
+ this.logList = res.data;
|
|
406
|
+ } else {
|
|
407
|
+ this.$refs.seiminModel.show({
|
|
408
|
+ skin: 'toast',
|
|
409
|
+ icon: 'error',
|
|
410
|
+ content: '请求失败',
|
|
411
|
+ })
|
|
412
|
+ }
|
|
413
|
+ })
|
|
414
|
+ },
|
310
|
415
|
},
|
311
|
416
|
onLoad(queryParams) {
|
312
|
417
|
console.log(queryParams);
|
|
@@ -421,11 +526,16 @@
|
421
|
526
|
flex: 1;
|
422
|
527
|
@include border(bottom);
|
423
|
528
|
@include flex(flex-start, stretch, column);
|
|
529
|
+ &.process{
|
|
530
|
+ padding-top: 90rpx;
|
|
531
|
+ padding-bottom: 90rpx;
|
|
532
|
+ }
|
424
|
533
|
|
425
|
534
|
&:last-of-type {
|
426
|
535
|
border-bottom: none;
|
427
|
536
|
}
|
428
|
537
|
|
|
538
|
+ // 工单信息
|
429
|
539
|
.orderDetail_infoItem_item_content {
|
430
|
540
|
margin-top: 20rpx;
|
431
|
541
|
@include flex(space-between, stretch);
|
|
@@ -445,6 +555,60 @@
|
445
|
555
|
word-break: break-all;
|
446
|
556
|
}
|
447
|
557
|
}
|
|
558
|
+
|
|
559
|
+ // 流程信息
|
|
560
|
+ .orderDetail_process_item {
|
|
561
|
+ min-height: 120rpx;
|
|
562
|
+ line-height: 50rpx;
|
|
563
|
+ color: #333;
|
|
564
|
+ @include flex(center);
|
|
565
|
+
|
|
566
|
+ &:last-of-type {
|
|
567
|
+ .step_icon {
|
|
568
|
+ &::after {
|
|
569
|
+ display: none;
|
|
570
|
+ }
|
|
571
|
+ }
|
|
572
|
+ }
|
|
573
|
+
|
|
574
|
+ .step_infoStart {
|
|
575
|
+ font-size: 28rpx;
|
|
576
|
+ flex: 1;
|
|
577
|
+ @include flex(flex-end);
|
|
578
|
+
|
|
579
|
+ .step_time {
|
|
580
|
+ margin-left: 16rpx;
|
|
581
|
+ }
|
|
582
|
+ }
|
|
583
|
+
|
|
584
|
+ .step_icon {
|
|
585
|
+ font-size: 38rpx;
|
|
586
|
+ margin-left: 30rpx;
|
|
587
|
+ margin-right: 30rpx;
|
|
588
|
+ position: relative;
|
|
589
|
+ color: #E5E9ED;
|
|
590
|
+
|
|
591
|
+ &.active {
|
|
592
|
+ color: #07863C;
|
|
593
|
+ }
|
|
594
|
+
|
|
595
|
+ &::after {
|
|
596
|
+ content: '';
|
|
597
|
+ position: absolute;
|
|
598
|
+ top: 60rpx;
|
|
599
|
+ left: 18rpx;
|
|
600
|
+ width: 1px;
|
|
601
|
+ height: calc(100% - 70rpx);
|
|
602
|
+ background-color: #DDE1E5;
|
|
603
|
+ }
|
|
604
|
+ }
|
|
605
|
+
|
|
606
|
+ .step_infoEnd {
|
|
607
|
+ font-size: 34rpx;
|
|
608
|
+ flex: 1;
|
|
609
|
+ padding-bottom: 16rpx;
|
|
610
|
+ }
|
|
611
|
+ }
|
448
|
612
|
}
|
449
|
613
|
}
|
450
|
614
|
}
|