count-pass-app/subpages/approval/pending.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" plain borderColor="#4680F9" color="#4680F9" :text="$t('approval.examLoading')"></u-tag>
                <u-tag v-if="item.status == 2" size="mini" plain borderColor="#4680F9" color="#4680F9" :text="$t('approval.examPass')"></u-tag>
                <u-tag v-if="item.status == 3" size="mini" plain borderColor="#4680F9" color="#4680F9" :text="$t('approval.examReject')"></u-tag>
                <u-tag v-if="item.status == 4" size="mini" plain borderColor="#4680F9" color="#4680F9" :text="$t('approval.processReject')"></u-tag>
                <u-tag v-if="item.status == 5" size="mini" plain borderColor="#4680F9" color="#4680F9" :text="$t('approval.examStop')"></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.thisStep || 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.expirationTime')}}：</text>
                  <text class="info">{{item.dueDate || ''}}</text>
                </p>
              </view>
              <view>
                <view class="card-oper">
                  <view class="btn">
                    <button class="oper-btn bule" @click="audit(item)">{{$t('approval.adopt')}}</button>
                  </view>
                  <view class="btn">
                    <button class="oper-btn red" @click="reject(item)">{{$t('approval.refuse')}}</button>
                  </view>
                  <view class="btn">
                    <button class="oper-btn info" @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="showReject" @confirm="confirm('reject')" ref="addModal" showCancelButton closeOnClickOverlay @cancel="showReject=false" @close="showReject=false">
      <view class="invite-box">
        <view class="invite-box-title">{{$t('approval.approvalComments')}}</view>
        <u--input :placeholder="$t('base.common.placeholderII')+$t('approval.approvalComments')" border="surround" v-model="handleOpinion"></u--input>
      </view>
    </u-modal>
    <u-modal :show="showAudit" @confirm="confirm('audit')" ref="addModal" showCancelButton closeOnClickOverlay @cancel="showAudit=false" @close="showAudit=false">
      <view class="invite-box">
        <view class="invite-box-title">{{$t('approval.approvalComments')}}</view>
        <u--input :placeholder="$t('base.common.placeholderII')+$t('approval.approvalComments')" border="surround" v-model="handleOpinion"></u--input>
      </view>
    </u-modal>
    <u-toast ref="loadingToast" />
  </view>
</template>

<script>
import dayjs from 'dayjs'
import {
  getPendingList,
  audit, //通过
  reject, //拒绝
  getApprovalInfo,
} from "../../api/approval"
import uniAgreementsVue from '../../components/uni-agreements/uni-agreements.vue'
export default {
  data(){
    return{
      handleOpinion:'',
      showAudit:false,
      showReject:false,
      dayjs,
      page: {
        pages: 1,
        size: 10,
      },
      hasMore:false,
      allPendingList:[],
      keyword:'',
      loading:true,
      currentItem:undefined,
      currentId:undefined,
      enCode:undefined,
    }
  },
  onLoad(options) {
    this.getPendingList()
  },
  methods:{
    getPendingList(){
      this.loading=true
      let data={
        currentPage:this.page.pages,
        pageSize:this.page.size,
        keyword:this.keyword || '',
      }
      getPendingList(1,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
        }
      })
    },
    audit(item){
      let encode = item.flowCode[0].toUpperCase()+item.flowCode.slice(1)
      getApprovalInfo(encode,item.processId).then(res=>{
        if(res.data.code == 200){
          this.currentItem = res.data.data
          this.showAudit = true
          this.currentId = item.id
          this.enCode=item.flowCode
        }
      })
    },
    reject(item){
      let encode = item.flowCode[0].toUpperCase()+item.flowCode.slice(1)
      getApprovalInfo(encode,item.processId).then(res=>{
        if(res.data.code == 200){
          this.currentItem = res.data.data
          this.showReject = true
          this.currentId = item.id
          this.enCode=item.flowCode
        }
      })
    },
    //确定
    confirm(value){
      let _this = this
      let data = {
        enCode:this.enCode,
        formData:this.currentItem,
        handleOpinion:this.handleOpinion,
        copyIds: "",
        signImg: ""
      }
      this.showReject=false
      this.showAudit=false
      this.$refs.loadingToast.show({
        type:"loading",
        message: _this.$t('base.common.loading'),
        duration:'100000',
      })
      if(value == 'audit'){
        audit(this.currentId,data).then(res=>{
          this.$refs.loadingToast.hide()
          if(res.data.code == 200){
            uni.showToast({
              title: _this.$t('approval.approved'),
              icon: 'success',
            })
            this.searchList()
          }else{
            uni.showToast({
              title: res.data.msg || _this.$t('base.common.equestFailed'),
              icon: 'none',
            })
          }
        })
      }else{
        reject(this.currentId,data).then(res=>{
          this.$refs.loadingToast.hide()
          if(res.data.code == 200){
            uni.showToast({
              title: _this.$t('approval.approvalRejection'),
              icon: 'success',
            })
            this.searchList()
          }else{
            uni.showToast({
              title: res.data.msg || _this.$t('base.common.equestFailed'),
              icon: 'none',
            })
          }
        })
      }
    },
    //加载更多
    scrolltolower() {
      console.log("1111111111111111");
      if (this.hasMore) {
        this.page.pages += 1;
        this.getPendingList();
      }
    },
    checkView(item){
      console.log(item);
      uni.navigateTo({ url: '/subpages/approvalform/'+item.flowCode+'?id='+item.processId })
    },
    //搜索列表
    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';
/deep/ .u-modal__content{
  flex-direction: column;
}
</style>