工单详情页面的流程信息

pages/orderDetail/orderDetail.vue

@@ -9,7 +9,7 @@
     </view>
     <!-- tab -->
     <!-- 工单信息 -->
-    <view class="orderDetail_info">
+    <view class="orderDetail_info" v-show="selectedTab === 1">
       <view class="orderDetail_infoItem" v-if="orderInfo.id">
         <view class="orderDetail_infoItem_header">
           <view class="orderDetail_infoItem_header_title">
@@ -115,6 +115,46 @@
         </view>
       </view>
     </view>
+    <!-- 流程信息 -->
+    <view class="orderDetail_info" v-show="selectedTab === 2">
+      <view class="orderDetail_infoItem" v-if="logList.length">
+        <view class="orderDetail_infoItem_header">
+          <view class="orderDetail_infoItem_header_title">
+            <view class="icon"></view>
+            <view class="taskNameAndWorkerName">
+              <text class="taskName">流程信息</text>
+            </view>
+          </view>
+        </view>
+        <view class="orderDetail_infoItem_item process">
+          <view class="orderDetail_process_item" v-for="(step,i) in logList" :key="i">
+            <view class="step_infoStart">
+              <view class="step_name">{{step.operationName}}</view>
+              <view class="step_time" v-if="step.record && step.record[0]">
+                {{step.record[0].operationTime|formatDate('MM-dd HH:mm')}}
+              </view>
+            </view>
+            <view class="step_icon pda pda-icon_liucheng"
+              :class="{'active':(step.record&&step.record[0]&&step.record[0].operationTime)}"></view>
+            <view class="step_infoEnd">
+              <view class="step_overtime" v-if="i!=0&&step.record&&step.record.length">
+                耗时{{filterTime(step.record)}}
+              </view>
+              <view class="step_dept" v-if="step.record&&step.record[0]&&step.record[0].dept">
+                <text v-for="(dept,index) in step.record"
+                  :key="index">{{dept?(deptDisplay == 2?dept.deptalias:dept.dept)+',':''}}</text>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <!-- 业务信息 -->
+    <view class="orderDetail_info" v-show="selectedTab === 3">
+      <view class="orderDetail_infoItem">
+        业务信息
+      </view>
+    </view>
     <!-- 底部 -->
     <seiminFooterBtn :btns="btns"></seiminFooterBtn>
     <seiminModel ref="seiminModel"></seiminModel>
@@ -124,6 +164,7 @@
 <script>
   import {
     reqFetchData,
+    reqFetchWorkOrderLog,
   } from "../../request/api.js";
   import {
     mapState
@@ -143,6 +184,8 @@
   export default {
     data() {
       return {
+        // 路由传参
+        queryParams: {},
         // 关联类型
         ASSOCIATION_TYPES,
         // 选项卡
@@ -161,8 +204,10 @@
         ],
         // 当前选中的tab
         selectedTab: 1,
-        // 工单详情信息
+        // 工单信息
         orderInfo: {},
+        // 流程信息
+        logList: [],
         //底部按钮
         btns: [],
       };
@@ -172,14 +217,54 @@
     },
     methods: {
       init(queryParams) {
-        this.getData(queryParams);
+        this.queryParams = queryParams;
+        this.changeTab(1);
+      },
+      // 格式化时分秒
+      // （时间小于一分钟则显示秒，时间大于一分钟则显示分钟数，如超出一小时则显示小时和分钟。）time单位:秒
+      formatTime(time) {
+        let timeStr = "";
+        if (time >= 0 && time < 60) {
+          // 秒
+          timeStr = time + "秒";
+        } else if (time >= 60 && time < 3600) {
+          // 分钟
+          timeStr = Math.floor(time / 60) + "分钟";
+        } else if (time >= 3600) {
+          // 时 + 分
+          let h = "";
+          let m = "";
+          h = Math.floor(time / 3600) + "小时";
+          m = time % 3600 >= 60 ? Math.floor((time % 3600) / 60) + "分钟" : "";
+          timeStr = h + m;
+        }
+        return timeStr;
+      },
+      // 计算流程信息耗时
+      filterTime(step) {
+        let num = 0;
+        step.forEach((e) => {
+          num += e.difTime;
+        });
+        return this.formatTime(num / 1000);
       },
       // 切换tab
       changeTab(id) {
         this.selectedTab = id;
+        switch (id) {
+          case 1:
+            this.getInfo(this.queryParams);
+            break;
+          case 2:
+            this.getProcess(this.queryParams);
+            break;
+          case 3:
+            this.getInfo(this.queryParams);
+            break;
+        }
       },
-      //获取详情页数据
-      getData(queryParams) {
+      //获取工单信息数据
+      getInfo(queryParams) {
         uni.showLoading({
           mask: true,
           title: '加载中',
@@ -307,6 +392,26 @@
           }
         })
       },
+      //获取流程信息数据
+      getProcess(queryParams) {
+        uni.showLoading({
+          mask: true,
+          title: '加载中',
+        })
+        reqFetchWorkOrderLog(queryParams.id).then(res => {
+          uni.hideLoading();
+          if (res.status == 200) {
+            // 流程信息
+            this.logList = res.data;
+          } else {
+            this.$refs.seiminModel.show({
+              skin: 'toast',
+              icon: 'error',
+              content: '请求失败',
+            })
+          }
+        })
+      },
     },
     onLoad(queryParams) {
       console.log(queryParams);
@@ -421,11 +526,16 @@
           flex: 1;
           @include border(bottom);
           @include flex(flex-start, stretch, column);
+          &.process{
+            padding-top: 90rpx;
+            padding-bottom: 90rpx;
+          }
 
           &:last-of-type {
             border-bottom: none;
           }
 
+          // 工单信息
           .orderDetail_infoItem_item_content {
             margin-top: 20rpx;
             @include flex(space-between, stretch);
@@ -445,6 +555,60 @@
               word-break: break-all;
             }
           }
+
+          // 流程信息
+          .orderDetail_process_item {
+            min-height: 120rpx;
+            line-height: 50rpx;
+            color: #333;
+            @include flex(center);
+
+            &:last-of-type {
+              .step_icon {
+                &::after {
+                  display: none;
+                }
+              }
+            }
+
+            .step_infoStart {
+              font-size: 28rpx;
+              flex: 1;
+              @include flex(flex-end);
+
+              .step_time {
+                margin-left: 16rpx;
+              }
+            }
+
+            .step_icon {
+              font-size: 38rpx;
+              margin-left: 30rpx;
+              margin-right: 30rpx;
+              position: relative;
+              color: #E5E9ED;
+
+              &.active {
+                color: #07863C;
+              }
+
+              &::after {
+                content: '';
+                position: absolute;
+                top: 60rpx;
+                left: 18rpx;
+                width: 1px;
+                height: calc(100% - 70rpx);
+                background-color: #DDE1E5;
+              }
+            }
+
+            .step_infoEnd {
+              font-size: 34rpx;
+              flex: 1;
+              padding-bottom: 16rpx;
+            }
+          }
         }
       }
     }

request/api.js

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

static/fonts/demo_index.html

@@ -55,6 +55,12 @@
           <ul class="icon_lists dib-box">
           
             <li class="dib">
+              <span class="icon pda">&#xe636;</span>
+                <div class="name">icon_liucheng</div>
+                <div class="code-name">&amp;#xe636;</div>
+              </li>
+          
+            <li class="dib">
               <span class="icon pda">&#xe612;</span>
                 <div class="name">好评</div>
                 <div class="code-name">&amp;#xe612;</div>
@@ -150,9 +156,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'pda';
-  src: url('iconfont.woff2?t=1651040512454') format('woff2'),
-       url('iconfont.woff?t=1651040512454') format('woff'),
-       url('iconfont.ttf?t=1651040512454') format('truetype');
+  src: url('iconfont.woff2?t=1651907681793') format('woff2'),
+       url('iconfont.woff?t=1651907681793') format('woff'),
+       url('iconfont.ttf?t=1651907681793') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -179,6 +185,15 @@
         <ul class="icon_lists dib-box">
           
           <li class="dib">
+            <span class="icon pda pda-icon_liucheng"></span>
+            <div class="name">
+              icon_liucheng
+            </div>
+            <div class="code-name">.pda-icon_liucheng
+            </div>
+          </li>
+          
+          <li class="dib">
             <span class="icon pda pda-haoping"></span>
             <div class="name">
               好评
@@ -324,6 +339,14 @@
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#pda-icon_liucheng"></use>
+                </svg>
+                <div class="name">icon_liucheng</div>
+                <div class="code-name">#pda-icon_liucheng</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#pda-haoping"></use>
                 </svg>
                 <div class="name">好评</div>

static/fonts/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "pda"; /* Project id 3307922 */
-  src: url('/static/fonts/iconfont.woff2?t=1651040512454') format('woff2'),
-       url('/static/fonts/iconfont.woff?t=1651040512454') format('woff'),
-       url('/static/fonts/iconfont.ttf?t=1651040512454') format('truetype');
+  src: url('/static/fonts/iconfont.woff2?t=1651907681793') format('woff2'),
+       url('/static/fonts/iconfont.woff?t=1651907681793') format('woff'),
+       url('/static/fonts/iconfont.ttf?t=1651907681793') format('truetype');
 }
 
 .pda {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.pda-icon_liucheng:before {
+  content: "\e636";
+}
+
 .pda-haoping:before {
   content: "\e612";
 }

static/fonts/iconfont.json

@@ -6,6 +6,13 @@
   "description": "转运PDA",
   "glyphs": [
     {
+      "icon_id": "4852580",
+      "name": "icon_liucheng",
+      "font_class": "icon_liucheng",
+      "unicode": "e636",
+      "unicode_decimal": 58934
+    },
+    {
       "icon_id": "398877",
       "name": "好评",
       "font_class": "haoping",

uni.scss

@@ -78,7 +78,7 @@ $textColorYellow: #F5A623;
     height: 32rpx;
     border-radius: 0 16rpx 16rpx 0;
     background-color: $backgroundColor;
-    left: -2rpx;
+    left: -1px;
     top: $top;
     transform: translateY(-50%);
     @include border;
@@ -92,7 +92,7 @@ $textColorYellow: #F5A623;
     height: 32rpx;
     border-radius: 16rpx 0 0 16rpx;
     background-color: $backgroundColor;
-    right: -2rpx;
+    right: -1px;
     top: $top;
     transform: translateY(-50%);
     @include border;