819527061@qq.com
2024-11-15 b5d3561a2e06106ed9cce2c6bcc9c2463951e998
pages/check-the-schedule/check-the-schedule.vue
@@ -1,146 +1,166 @@
<template>
   <view class="check-the-schedule">
      <combined-title title="查看进度"></combined-title>
      <view class="scheduleTable" v-for="(item,index) in scheduleData">
         <uni-table border stripe emptyText="暂无更多数据">
            <!-- 表格数据行 -->
            <uni-tr>
               <uni-th align="center">任务名称</uni-th>
               <uni-td>{{ item.name }}</uni-td>
            </uni-tr>
            <uni-tr>
               <uni-th align="center">处理人</uni-th>
               <uni-td>
                  <view class="">
                     <u-tag :text="role.nickname" type="primary" size="mini" style="display:inline-block;margin-left: 5%;" plain v-for="(role,roleIndex) in item.assignees" :key="roleIndex"></u-tag>
                  </view>
               </uni-td>
            </uni-tr>
            <uni-tr>
               <uni-th align="center">审批操作</uni-th>
               <uni-td>{{item.deleteReason}}</uni-td>
            </uni-tr>
            <uni-tr>
               <uni-th align="center">审批意见</uni-th>
               <uni-td>{{ item.comment }}</uni-td>
            </uni-tr>
            <uni-tr>
               <uni-th align="center">耗时</uni-th>
               <uni-td>
               <text>{{item.duration >= 86400000
                              ? parseInt(item.duration / 86400000 + '天' + parseInt(item.duration % 86400000) / 3600000 + '时' + parseInt(item.duration % 3600000) / 60000 + '分')
                              : item.duration >= 3600000
                              ? parseInt(item.duration / 3600000) + '时' + parseInt((item.duration / 3600000) % 3600000) + '分'
                              : parseInt(item.duration / 60000) + '分'}}</text>
               </uni-td>
            </uni-tr>
            <uni-tr>
               <uni-th align="center">创建时间</uni-th>
               <uni-td>{{ item.createTime }}</uni-td>
            </uni-tr>
            <uni-tr>
               <uni-th align="center">完成时间</uni-th>
               <uni-td>{{ item.endTime }}</uni-td>
            </uni-tr>
            <uni-tr>
               <uni-th align="center">状态</uni-th>
               <uni-td :style="{color:(item.endTime==null?'#969696':'#007AFF')}">{{ item.endTime ==null? '待处理' : '已办理' }}</uni-td>
            </uni-tr>
         </uni-table>
      </view>
  <view class="check-the-schedule">
    <combined-title title="查看进度"></combined-title>
    <view class="scheduleTable" v-for="(item,index) in scheduleData">
      <uni-table border stripe emptyText="暂无更多数据">
        <!-- 表格数据行 -->
        <uni-tr>
          <uni-th align="center">任务名称</uni-th>
          <uni-td>{{ item.name }}</uni-td>
        </uni-tr>
        <uni-tr>
          <uni-th align="center">处理人</uni-th>
          <uni-td>
            <view class="assigneesContainer">
              <u-tag :text="role.nickname" type="primary" size="mini" plain v-for="(role,roleIndex) in item.assignees"
                     :key="roleIndex"></u-tag>
            </view>
          </uni-td>
        </uni-tr>
        <uni-tr>
          <uni-th align="center">审批操作</uni-th>
          <uni-td>{{ item.deleteReason || ''  }}</uni-td>
        </uni-tr>
        <uni-tr>
          <uni-th align="center">审批意见</uni-th>
          <uni-td>{{ item.comment=='undefined'?'未填写':item.comment|| '未填写' }}</uni-td>
        </uni-tr>
        <uni-tr>
          <uni-th align="center">耗时</uni-th>
          <uni-td>
            <text>{{
                item.duration >= 86400000
                    ? parseInt(item.duration / 86400000 + '天' + parseInt(item.duration % 86400000) / 3600000 + '时' + parseInt(item.duration % 3600000) / 60000 + '分')
                    : item.duration >= 3600000
                    ? parseInt(item.duration / 3600000) + '时' + parseInt((item.duration / 3600000) % 3600000) + '分'
                    : parseInt(item.duration / 60000) + '分'
              }}
            </text>
          </uni-td>
        </uni-tr>
        <uni-tr>
          <uni-th align="center">创建时间</uni-th>
          <uni-td>{{ item.createTime }}</uni-td>
        </uni-tr>
        <uni-tr>
          <uni-th align="center">完成时间</uni-th>
          <uni-td>{{ item.endTime ||'' }}</uni-td>
        </uni-tr>
        <uni-tr>
          <uni-th align="center">状态</uni-th>
          <uni-td :style="{color:(item.endTime==null?'#969696':'#007AFF')}">{{
              item.endTime == null ? '待处理' : '已办理'
            }}
          </uni-td>
        </uni-tr>
      </uni-table>
    </view>
      <!-- 菜单栏 -->
      <popup-menu @menuShow="menushow" ref="menuRef"></popup-menu>
   </view>
    <!-- 菜单栏 -->
    <popup-menu @menuShow="menushow" ref="menuRef"></popup-menu>
  </view>
</template>
<script>
import popupMenu from '@/components/common/popup-menu/popup-menu.vue';
import combinedTitle from '@/components/common/combined-title/combined-title.vue';
export default {
   data() {
      return {
         scheduleData: {
            // meizhongshenqing: '葛泉矿申请:煤矸石',
            // renwu: '发运审批',
            // liucheng: '发运通知单',
            // faqiren: '葛泉矿',
            // shenpiCaozuo: '审批通过',
            // shenpiyijian: '同意',
            // haoshi: '19秒',
            // createTime: '2022-5-25 12:06:15'
         },
         applicationId:null,
         menuShow:false
      };
   },
   onLoad(options){
      this.applicationId = JSON.parse(options.index);
   },
   // 点击导航栏菜单后
   onNavigationBarButtonTap(e) {
      // console.log(e);
      this.$refs.menuRef.menuClick();
   },
   onShow(){
      if(this.menuShow == true){
         this.$refs.menuRef.menuClick()
      }
      this.init();
   },
   components: {
      combinedTitle,
      popupMenu
   },
   methods: {
      init(){
         this.historicFlow()
      },
      historicFlow(){
         this.$reqGet('historicFlow',{},this.applicationId).then(res=>{
            console.log('查看进度',res);
            if(res.code == 0){
               this.scheduleData = res.data
            }
         })
      },
      menushow(e){
         this.menuShow = e
      }
   }
  data() {
    return {
      scheduleData: {
        // meizhongshenqing: '葛泉矿申请:煤矸石',
        // renwu: '发运审批',
        // liucheng: '发运通知单',
        // faqiren: '葛泉矿',
        // shenpiCaozuo: '审批通过',
        // shenpiyijian: '同意',
        // haoshi: '19秒',
        // createTime: '2022-5-25 12:06:15'
      },
      applicationId: null,
      menuShow: false
    };
  },
  onLoad(options) {
    this.applicationId = JSON.parse(options.index);
  },
  // 点击导航栏菜单后
  onNavigationBarButtonTap(e) {
    // console.log(e);
    this.$refs.menuRef.menuClick();
  },
  onShow() {
    if (this.menuShow == true) {
      this.$refs.menuRef.menuClick()
    }
    this.init();
  },
  components: {
    combinedTitle,
    popupMenu
  },
  methods: {
    init() {
      this.historicFlow()
    },
    historicFlow() {
      this.$reqGet('historicFlow', {}, this.applicationId).then(res => {
        console.log('查看进度', res);
        if (res.code == 0) {
          this.scheduleData = res.data
        }
      })
    },
    menushow(e) {
      this.menuShow = e
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep.check-the-schedule {
   width: 100%;
   height: 100%;
   .scheduleTable {
      margin: vww(10) auto 0;
      width: 91%;
      .uni-table {
         .uni-table-tr {
            .uni-table-th {
               width: vww(88);
               height: vww(40);
               background-color: #f5f5f5;
               color: #111111;
               font-size: vww(13);
               font-weight: 500;
            }
            .uni-table-td {
               width: vww(240);
               height: vww(40);
               background-color: #ffffff;
               color: #111111;
               font-size: vww(13);
            }
         }
      }
      // 边框
      // .table--border{
      //    border:1px solid #DDDDDD;
      // }
   }
  width: 100%;
  height: 100%;
  .scheduleTable {
    margin: vww(10) auto 0;
    width: 91%;
    .uni-table {
      .uni-table-tr {
        .uni-table-th {
          width: vww(88);
          height: vww(40);
          background-color: #f5f5f5;
          color: #111111;
          font-size: vww(13);
          font-weight: 500;
        }
        .uni-table-td {
          width: vww(240);
          height: vww(40);
          background-color: #ffffff;
          color: #111111;
          font-size: vww(13);
        }
        // 处理人标签盒子
        .assigneesContainer {
          .u-transition {
            display: inline-block;
            margin-left: vww(3);
          }
        }
      }
    }
    // 边框
    // .table--border{
    //    border:1px solid #DDDDDD;
    // }
  }
}
</style>