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

<template>
  <view class="price">
    <view class="picker-btn">
      <view class="btn">
        <button type="primary" @click="showPicker=true">
          {{$t('approval.gather')}}
        </button>
      </view>
      <view class="btn">
        <button type="primary" @click="sureChangePrice">
          {{$t('approval.affirmGather')}}
        </button>
      </view>
      
    </view>
     <u-sticky bgColor="#fff">
    <view class="change-price-title">
      <u-form labelPosition="left" :model="form" :rules="rules" ref="form1" >
      <!-- 开始日期 -->
      <u-form-item :label="$t('base.common.startDate')" borderBottom prop="startDate" @click="showSetDateCalendar = true">
        <u-input readonly  v-model="form.startDate" border="none" :placeholder="$t('base.common.placeholderS')+$t('base.common.startDate')" />
      </u-form-item>
      <!-- 结束日期 -->
       <u-form-item :label="$t('base.common.endDate')" borderBottom prop="endDate" @click="showEndDateCalendar = true">
        <u-input readonly  v-model="form.endDate" border="none" :placeholder="$t('base.common.placeholderS')+$t('base.common.endDate')" />
      </u-form-item>
     
    </u-form>
    </view>
     </u-sticky>
    <template v-if="newGatherIdList.length">
      <view class="order-card" v-for="(item, index) in newGatherIdList" :key="index">
        <view class="order-info">
          <p class="info-line">
            <text class="label">{{$t('spare.spareName')}}:</text>
            <text class="info">{{`${item.materialCode}_${item.materialName}_${item.materialSpec}`}}</text>
          </p>
          <p class="info-line">
            <text class="label">{{$t('spare.orderNum')}}:</text>
            <text class="info">{{item.purchNumber}}</text>
          </p>
        </view>
      </view>
        <!-- <p class="details-line details-title">
          <span >{{$t('spare.spareName')}}</span>
          <span>{{$t('spare.orderNum')}}</span>
        </p>
        <p v-for="(item,index) in newGatherIdList" :key="index" class="details-line">
          <span>{{item.materialName}}</span>
           <span>{{item.purchNumber}}</span>
        </p> -->
    </template>
    <template v-else>
      <u-empty mode="list" text='请先选择汇总信息' icon="https://cdn.uviewui.com/uview/empty/list.png">
      </u-empty>
    </template>
    <u-popup :show="showPicker" mode="center"   zIndex="998" :overlay="false" @close="showView = false" >
      <view class="picker-card">
          <!-- 选择汇总信息 -->
        <view class="choose-wrap" v-if="gatherList.length>0">
          <view  class="item">
            <view class="search-wrap">
              {{$t('approval.gatherSelection')}}:
            </view>
            <u-checkbox-group 
            v-model="gatherIds"
            placement="column"
            >
              <u-checkbox
              :customStyle="{marginBottom: '8px'}"
              v-for="(item, index) in gatherList"
              :key="index"
              :label="item.collectCode+'-'+item.materialName+'-'+item.purchNumber"
              :name="JSON.stringify(item)"
              >
              </u-checkbox>
            </u-checkbox-group>
          </view>
        </view>
        <view v-else>
          <u-empty mode="list" text='暂无信息' icon="https://cdn.uviewui.com/uview/empty/list.png">
          </u-empty>
        </view>
        <view class="card-oper">
          <view class="btn">
            <button @click="showPicker = false">{{$t('settings.cancelText')}}</button>
          </view>
          <view class="btn">
            <button type='primary' @click="getGathers">{{$t('settings.confirmText')}}</button>
          </view>
        </view>
      </view>
	  </u-popup>
     <u-calendar 
    color="#4680F9" 
    round='25' 
    :show="showSetDateCalendar" 
    @confirm="onSetDateConfirm" 
    @close="showSetDateCalendar=false">
    </u-calendar>


    <u-calendar 
    color="#4680F9" 
    round='25' 
    :show="showEndDateCalendar" 
    @confirm="onEndDateConfirm" 
    @close="showEndDateCalendar=false">
    </u-calendar>
  </view>
</template>

<script>
import {
  getCollecDtlList
} from "../../api/approval"
import dayjs from 'dayjs'
export default {
  data(){
    return {
      showSetDateCalendar:false,
      showEndDateCalendar:false,
      fixPrice:'',
      changePrice:null,
      showPicker:false,
      gatherList:[], //汇总选项列表
      keyword:'',
      proKeyword:'',
      gatherIds:[], //选择的汇总id
      newGatherIdList:[],//转换的汇总对象
      form:{
        startDate:dayjs().subtract(7,'day').format('YYYY-MM-DD 00:00:00'), 
        endDate:dayjs().add(15, 'day').format('YYYY-MM-DD 23:59:59'),
      },
      rules: {
        startDate:[{ required: true, message: this.$t('base.common.placeholderS')+this.$t('base.common.startDate'), trigger: "change" }],
        endDate:[{ required: true, message: this.$t('base.common.placeholderS')+this.$t('base.common.endDate'), trigger: "change" }],
      },
    }
  },
  onLoad(options) {
    this.getGatherDetails();
  },
  methods:{
    //确认汇总
    sureChangePrice(){
      let pages = getCurrentPages();
      let prevPage = pages[pages.length - 2]; //上一个页面
      let details=[]
      this.newGatherIdList.forEach(item=>{
          details.push({
            materialid: item.materialid,
            materialName: item.materialName,
            materialCode:item.materialCode,
            materialSpec:item.materialSpec,
            price: item.price,
            number: item.purchNumber - item.orderNumber ,
            cess: item.cess,
            taxPrice: item.price * (1 + (item.cess / 100)),
            sourceId: item.id,
          })  
      })
      prevPage.$vm.form.dtoList = details;
      uni.navigateBack();
    },
    
    //选择申请日期
    onSetDateConfirm(date){
      this.form.startDate = dayjs(date).format('YYYY-MM-DD 00:00:00');
      this.showSetDateCalendar = false;
      this.getGatherDetails();
    },
    //选择申请日期
    onEndDateConfirm(date){
      this.form.endDate = dayjs(date).format('YYYY-MM-DD 23:59:59');
      this.showEndDateCalendar = false;
      this.getGatherDetails();
    },
    //获取采购汇总信息
    getGatherDetails(){
      getCollecDtlList(this.form).then(res=>{
        console.log('==================',res);
        if(res.data.code == 0){
            this.gatherList=res.data.data
        }
      })
    },
    getGathers(){
      this.showPicker=false;
      this.gatherIds.forEach(item=>{
        this.newGatherIdList.push(JSON.parse(item));
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../common/css/apply.scss';
@import '../../common/css/approval.scss';
/* #ifndef APP-NVUE */
view {
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
}
page {
  background-color: #f8f8f8;
}
/* #endif*/
.price{
   /* #ifndef APP-NVUE */
  display: flex;
  width: 750rpx;
  min-height: 100vh;
  /* #endif */
  flex-direction: column;
  flex: 1;
  background-color: #f8f8f8;
  padding-bottom: 160rpx;
  .change-price-title{
    background-color: #fff;
    padding: 24rpx 32rpx;
    width: 100%;
    display: flex;
    .change-price-item{
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-bottom: 24rpx;
      .btn{
        width: 20%;
        margin-left: 16rpx;
      }
      .inp{
        margin-left: 16rpx;
        flex: 1;
      }
    }
  }
  
  .details-wrap{
    padding: 32rpx;
    background: #fff;
    margin-top: 24rpx;
    .details-line{
      display: flex;
      flex-direction: row;
      line-height: 40px;
      span{
        width: 50%;
        font-size: 28rpx;
        text-align: center;
      }
    }
    .details-title{
      span{
        font-weight: bold;
      }
    }
    .details-line:nth-child(odd){
      background-color: #f2f2f2;
    }
    .details-line:nth-child(even){
      background-color: #fff;
    }
  }
  
  .picker-btn{
    padding: 32rpx;
    position: fixed;
    bottom: 0;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    background-color: #fff;
    z-index: 75;
    .btn{
      width: 48%;
    }
  }
  // padding: 32rpx;
  .picker-card{
    padding: 32rpx 32rpx 144rpx;
    position: relative;
    height: 100%;
    overflow-y: scroll;
    .choose-wrap{
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      height: 100%;
      .item{
        width: 100%;
        height: 100%;
        overflow-y: scroll;
        .search-wrap{
          margin-bottom: 24rpx;
        }
      }
    }
    .card-oper{
      position: absolute;
      width: 100%;
      bottom: 0;
      left:0;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 24rpx;
      .btn{
        width: 45%;
      }
    }
  }
}
/deep/ .u-popup__content{
  height: 55%;
  overflow-y: scroll;
  width: 100%;
  border-radius: 6px;
}

/deep/ .u-form-item__body__left{
  width: 80px !important;
}
</style>