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

<template>
  <view class="content launch">
    <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'
          placeholderColor="#c8d8ef"
          searchIconColor="#c8d8ef"
          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="allLaunchList.length">
        <u-list @scrolltolower="scrolltolower" :preLoadScreen="1.5">
          <u-list-item v-for="(item, index) in allLaunchList" :key="index">
            <view class="order-card">
              <view class="order-card-title">
                {{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.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.completionProgress')}}：</text>
                  <text class="info">{{item.completion?item.completion+'%' : ''}}</text>
                </p>
              </view>
              <view>
                <view class="card-oper">
                 
                  <view class="btn">
                    <button class="oper-btn red" v-if="item.status == 1" @click="revokeShow(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="showRevoke" @confirm="revoke" ref="addModal" showCancelButton closeOnClickOverlay @cancel="showRevoke=false" @close="showRevoke=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 {
  getLaunchList,
  revoke, //撤回
  press, //催办
} from "../../api/approval"
export default {
  data(){
    return{
      handleOpinion:'',
      dayjs,
      showRevoke:false, //撤回弹窗
      page: {
        pages: 1,
        size: 10,
      },
      hasMore:false,
      allLaunchList:[],
      keyword:'',
      loading:true,
      currentItem:{},
    }
  },
  onLoad(options) {
    this.getLaunchList()
  },
  methods:{
    //催办
    press(item){
      let _this = this
      this.$refs.loadingToast.show({
          type:"loading",
          message: _this.$t('base.common.loading'),
          duration:'100000',
				})
      press(item.id).then(res=>{
        this.$refs.loadingToast.hide()
        if(res.data.code == 200){
          uni.showToast({
            title: _this.$t('approval.urgingSucceeded'),
            icon: 'success',
          })
        }else{
            uni.showModal({
              // title: '提示',
              content: res.data.msg || _this.$t('base.common.equestFailed'),
              showCancel: false,
            })
          }
      })
    },
    checkView(item){
      console.log(item,'item---------------');
      uni.navigateTo({ url: '/subpages/approvalform/'+item.flowCode+'?id='+item.id })
    },
    //撤回
    revoke(){
      let _this = this
      this.$refs.loadingToast.show({
        type:"loading",
        message: _this.$t('base.common.loading'),
        duration:'100000',
      })
      revoke(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.handleOpinion=''
          this.showRevoke = false
          this.getLaunchList()
        }else{
            uni.showModal({
              // title: '提示',
              content: res.data.msg || _this.$t('base.common.equestFailed'),
              showCancel: false,
            })
          }
      })
    },
    revokeShow(item){
      this.currentItem = item
      this.showRevoke = true
      
    },
    //获取列表
    getLaunchList(){
      this.loading=true
      let data={
        currentPage:this.page.pages,
        pageSize:this.page.size,
        keyword:this.keyword || '',
      }
      getLaunchList(data).then(res=>{
        if (res.data.code == 200) {
          if (this.hasMore) {
            this.allLaunchList = [
              ...this.allLaunchList,
              ...res.data.data.list,
            ];
          } else {
            this.allLaunchList = res.data.data.list;
          }
          console.log(this.allLaunchList);
          this.total = res.data.data.pagination.total
          if (this.allLaunchList.length >= this.total) {
            this.hasMore = false;
          } else {
            this.hasMore = true;
          }
          this.loading = false
        }
      })
    },
    //加载更多
    scrolltolower() {
      console.log("1111111111111111");
      if (this.hasMore) {
        this.page.pages += 1;
        this.getLaunchList();
      }
    },
    //搜索列表
    searchList(){
      this.page.pages = 1
      this.hasMore = false
      this.getLaunchList()
    },
    //转化时间
    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>