count-pass-app/subpages/approval/done.vue

<template>
  <view class="content pending">
    <u-sticky bgColor="#fff">
      <view class="search-wrap">
        <view class="input-wrap">
          <u-search
          bgColor='#fff'
          :showAction='false' 
          :placeholder="$t('base.list.inputPlaceholder')" 
          @search="searchList"
          @clear='searchList'
          v-model="keyword">
          </u-search>
          <view class="search-btn" @click="searchList">{{$t("customer_meter.search")}}</view>
        </view>
        <!-- <uni-icons type="settings-filled" size='24' @click="onClickRight"></uni-icons> -->
      </view>
    </u-sticky>
    <view class="swiper-box">
      <template v-if="allPendingList.length">
        <u-list @scrolltolower="scrolltolower" :preLoadScreen="1.5">
          <u-list-item v-for="(item, index) in allPendingList" :key="index">
            <view class="order-card">
              <view class="order-card-title">
                {{$t('approval.approvalTitle')}}:{{item.fullName}}
                <u-tag v-if="item.status == 1" size="mini" borderColor="#4680F9" bgColor="#fff" color="#4680F9" :text="$t('approval.adopt')"></u-tag>
                <u-tag v-else size="mini" borderColor="#4680F9" bgColor="#fff" color="#4680F9" :text="$t('approval.reject')"></u-tag>
              </view>
              <view class="order-info">
                <p class="info-line">
                  <text class="label">{{$t('approval.process')}}：</text>
                  <text class="info">{{item.flowName || ''}}</text>
                </p>
                <p class="info-line">
                  <text class="label">{{$t('approval.originatingTime')}}：</text>
                  <text class="info">{{formatTime(item.startTime) || ''}}</text>
                </p>
                <p class="info-line">
                  <text class="label">{{$t('approval.originator')}}：</text>
                  <text class="info">{{item.userName || ''}}</text>
                </p>
                <p class="info-line">
                  <text class="label">{{$t('approval.currentNode')}}：</text>
                  <text class="info">{{item.currentNodeName}}</text>
                </p>
                <!-- <p class="info-line">
                  <text class="label">{{$t('approval.urgency')}}</text>
                  <text class="info" v-if="item.flowUrgent == 1">{{$t('approval.ordinary')}}</text>
                  <text class="info" v-if="item.flowUrgent == 2">{{$t('approval.important')}}</text>
                  <text class="info" v-if="item.flowUrgent == 3">{{$t('approval.urgent')}}</text>
                </p> -->
                <p class="info-line">
                  <text class="label">{{$t('approval.timeReceipt')}}：</text>
                  <text class="info">{{item.claimTime || ''}}</text>
                </p>
                <p class="info-line">
                  <text class="label">{{$t('approval.handlingTime')}}：</text>
                  <text class="info">{{item.creatorTime || ''}}</text>
                </p>
              </view>
              <view>
                <view class="card-oper">
                  <view class="btn" v-if="item.currentNodeName != '流程已结束'">
                    <button class="oper-btn red" @click="recall(item)">{{$t('approval.withdraw')}}</button>
                  </view>
                  <view class="btn">
                    <button class="oper-btn bule" @click="checkView(item)">{{$t('approval.details')}}</button>
                  </view>
                </view>
              </view>
            </view>
          </u-list-item>
        </u-list>
      </template>
      <template v-else>
        <u-empty mode="list" icon="https://cdn.uviewui.com/uview/empty/list.png">
        </u-empty>
      </template>
    </view>
    <u-loading-page 
    color="#666" 
    loading-mode="semicircle"
    :loading="loading">
    </u-loading-page>
    <u-modal :show="showRecall" @confirm="confirm" ref="addModal" showCancelButton closeOnClickOverlay @cancel="showRecall=false" @close="showRecall=false">
      <view class="invite-box">
        <view class="invite-box-title">{{$t('approval.reasonWithdrawal')}}</view>
        <u--input :placeholder="$t('base.common.placeholderI')+$t('approval.reasonWithdrawal')" border="surround" v-model="handleOpinion"></u--input>
      </view>
    </u-modal>
    <u-toast ref="loadingToast" />
  </view>
</template>

<script>
import dayjs from 'dayjs'
import {
  getPendingList,
  recall, //撤回
} from "../../api/approval"
export default {
  data(){
    return{
      dayjs,
      handleOpinion:"",
      showRecall:false,
      page: {
        pages: 1,
        size: 10,
      },
      hasMore:false,
      allPendingList:[],
      keyword:'',
      loading:true,
    }
  },
  onLoad(options) {
    this.getPendingList()
  },
  methods:{
    getPendingList(){
      this.loading=true
      let data={
        currentPage:this.page.pages,
        pageSize:this.page.size,
        keyword:this.keyword || '',
      }
      getPendingList(2,data).then(res=>{
        if (res.data.code == 200) {
          if (this.hasMore) {
            this.allPendingList = [
              ...this.allPendingList,
              ...res.data.data.list,
            ];
          } else {
            this.allPendingList = res.data.data.list;
          }
          console.log(this.allPendingList);
          this.total = res.data.data.pagination.total
          if (this.allPendingList.length >= this.total) {
            this.hasMore = false;
          } else {
            this.hasMore = true;
          }
          this.loading = false
        }
      })
    },
    recall(item){
      this.currentItem = item
      this.showRecall = true
    },
    //
    confirm(){
      let _this=this
      this.$refs.loadingToast.show({
        type:"loading",
        message: _this.$t('base.common.loading'),
        duration:'100000',
      })
      this.showRecall = false
      recall(this.currentItem.id,{handleOpinion:this.handleOpinion}).then(res=>{
        this.$refs.loadingToast.hide()
        if(res.data.code == 200){
          uni.showToast({
            title: _this.$t('approval.withdrawalSucceeded'),
            icon: 'success',
          })
          this.searchList()
        }else{
          uni.showModal({
            // title: '提示',
            content: res.data.msg || _this.$t('base.common.equestFailed'),
            showCancel: false,
          })
        }
      })
    },
    checkView(item){
      console.log(item);
      uni.navigateTo({ url: '/subpages/approvalform/'+item.flowCode+'?id='+item.processId })
    },
    //加载更多
    scrolltolower() {
      console.log("1111111111111111");
      if (this.hasMore) {
        this.page.pages += 1;
        this.getPendingList();
      }
    },
    //搜索列表
    searchList(){
      this.page.pages = 1
      this.hasMore = false
      this.getPendingList()
    },
    //转化时间
    formatTime(time){
      let str =''
      if(time){
        time = Number(time)
        str=dayjs(time).format('YYYY-MM-DD HH:mm:ss')
      }else{
        str =''
      }
      return str
    }
  }
}
</script>
<style>
/* #ifndef APP-NVUE */
view {
  /* display: flex; */
  box-sizing: border-box;
  /* flex-direction: column; */
}

page {
	box-sizing: border-box;
	/* padding: 40rpx 40rpx 80rpx; */
	height: 100%;
}
/* #endif*/
</style>
<style lang="scss" scoped>
@import '../../common/css/approval.scss';
</style>