Browse Source

工单详情页面的流程信息

seimin 2 years ago
parent
commit
65bd80f4b0

+ 169 - 5
pages/orderDetail/orderDetail.vue

@@ -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
     }

+ 6 - 0
request/api.js

@@ -129,3 +129,9 @@ export const reqFetchData = (type, target, id) =>
129 129
   request({
130 130
     url: `/${type}/fetchData/${target}/${id}`,
131 131
   });
132
+
133
+// 获取流程信息
134
+export const reqFetchWorkOrderLog = (id) =>
135
+  request({
136
+    url: `/ser/fetchWorkOrderLog/${id}`,
137
+  });

+ 26 - 3
static/fonts/demo_index.html

@@ -55,6 +55,12 @@
55 55
           <ul class="icon_lists dib-box">
56 56
           
57 57
             <li class="dib">
58
+              <span class="icon pda">&#xe636;</span>
59
+                <div class="name">icon_liucheng</div>
60
+                <div class="code-name">&amp;#xe636;</div>
61
+              </li>
62
+          
63
+            <li class="dib">
58 64
               <span class="icon pda">&#xe612;</span>
59 65
                 <div class="name">好评</div>
60 66
                 <div class="code-name">&amp;#xe612;</div>
@@ -150,9 +156,9 @@
150 156
 <pre><code class="language-css"
151 157
 >@font-face {
152 158
   font-family: 'pda';
153
-  src: url('iconfont.woff2?t=1651040512454') format('woff2'),
154
-       url('iconfont.woff?t=1651040512454') format('woff'),
155
-       url('iconfont.ttf?t=1651040512454') format('truetype');
159
+  src: url('iconfont.woff2?t=1651907681793') format('woff2'),
160
+       url('iconfont.woff?t=1651907681793') format('woff'),
161
+       url('iconfont.ttf?t=1651907681793') format('truetype');
156 162
 }
157 163
 </code></pre>
158 164
           <h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3>
@@ -179,6 +185,15 @@
179 185
         <ul class="icon_lists dib-box">
180 186
           
181 187
           <li class="dib">
188
+            <span class="icon pda pda-icon_liucheng"></span>
189
+            <div class="name">
190
+              icon_liucheng
191
+            </div>
192
+            <div class="code-name">.pda-icon_liucheng
193
+            </div>
194
+          </li>
195
+          
196
+          <li class="dib">
182 197
             <span class="icon pda pda-haoping"></span>
183 198
             <div class="name">
184 199
               好评
@@ -324,6 +339,14 @@
324 339
           
325 340
             <li class="dib">
326 341
                 <svg class="icon svg-icon" aria-hidden="true">
342
+                  <use xlink:href="#pda-icon_liucheng"></use>
343
+                </svg>
344
+                <div class="name">icon_liucheng</div>
345
+                <div class="code-name">#pda-icon_liucheng</div>
346
+            </li>
347
+          
348
+            <li class="dib">
349
+                <svg class="icon svg-icon" aria-hidden="true">
327 350
                   <use xlink:href="#pda-haoping"></use>
328 351
                 </svg>
329 352
                 <div class="name">好评</div>

+ 7 - 3
static/fonts/iconfont.css

@@ -1,8 +1,8 @@
1 1
 @font-face {
2 2
   font-family: "pda"; /* Project id 3307922 */
3
-  src: url('/static/fonts/iconfont.woff2?t=1651040512454') format('woff2'),
4
-       url('/static/fonts/iconfont.woff?t=1651040512454') format('woff'),
5
-       url('/static/fonts/iconfont.ttf?t=1651040512454') format('truetype');
3
+  src: url('/static/fonts/iconfont.woff2?t=1651907681793') format('woff2'),
4
+       url('/static/fonts/iconfont.woff?t=1651907681793') format('woff'),
5
+       url('/static/fonts/iconfont.ttf?t=1651907681793') format('truetype');
6 6
 }
7 7
 
8 8
 .pda {
@@ -13,6 +13,10 @@
13 13
   -moz-osx-font-smoothing: grayscale;
14 14
 }
15 15
 
16
+.pda-icon_liucheng:before {
17
+  content: "\e636";
18
+}
19
+
16 20
 .pda-haoping:before {
17 21
   content: "\e612";
18 22
 }

File diff suppressed because it is too large
+ 1 - 1
static/fonts/iconfont.js


+ 7 - 0
static/fonts/iconfont.json

@@ -6,6 +6,13 @@
6 6
   "description": "转运PDA",
7 7
   "glyphs": [
8 8
     {
9
+      "icon_id": "4852580",
10
+      "name": "icon_liucheng",
11
+      "font_class": "icon_liucheng",
12
+      "unicode": "e636",
13
+      "unicode_decimal": 58934
14
+    },
15
+    {
9 16
       "icon_id": "398877",
10 17
       "name": "好评",
11 18
       "font_class": "haoping",

BIN
static/fonts/iconfont.ttf


BIN
static/fonts/iconfont.woff


BIN
static/fonts/iconfont.woff2


+ 2 - 2
uni.scss

@@ -78,7 +78,7 @@ $textColorYellow: #F5A623;
78 78
     height: 32rpx;
79 79
     border-radius: 0 16rpx 16rpx 0;
80 80
     background-color: $backgroundColor;
81
-    left: -2rpx;
81
+    left: -1px;
82 82
     top: $top;
83 83
     transform: translateY(-50%);
84 84
     @include border;
@@ -92,7 +92,7 @@ $textColorYellow: #F5A623;
92 92
     height: 32rpx;
93 93
     border-radius: 16rpx 0 0 16rpx;
94 94
     background-color: $backgroundColor;
95
-    right: -2rpx;
95
+    right: -1px;
96 96
     top: $top;
97 97
     transform: translateY(-50%);
98 98
     @include border;