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

<template>
  <view class="price" :class="showCalendar?'popupShow':''">
    <view class="picker-btn">
      <view class="btn">
        <button type="primary" @click="batchAdd">
          {{$t('spare.chooseSpare')}}
        </button>
      </view>
      <view class="btn">
        <button type="primary" @click="sureChangePrice">
          {{$t('settings.confirmText')}}
        </button>
      </view>
      
    </view>
    <template v-if="details.length">
        <template v-if="encode =='applyOrder'">
          <view class="order-card" v-for="(item, index) in details" :key="index">
            <view class="order-info">
              <p class="info-line">
                <text class="label">{{$t('spare.spareName')}}:</text>
                <text class="info">
                  {{`${item.code}_${item.name}_${item.spec}_${getLabel(item.unit,unitList)}`}}
                </text>
              </p>

              <p class="info-line">
                <text class="label">{{$t('spare.orderNum')}}</text>
                <u-input class="info" 
                suffixIcon="edit-pen"  border="none" 
                type="number" v-model="item.number" 
                :placeholder="$t('base.common.placeholderI')+$t('spare.orderNum')"/>
              </p>

              <p class="info-line">
                <text class="label">{{$t('spare.noTaxPrice')}}</text>
                <u-input class="info" 
                suffixIcon="edit-pen"  border="none" 
                type="number" v-model="item.price" 
                :placeholder="$t('base.common.placeholderI')+$t('spare.noTaxPrice')"/>
              </p>

              <p class="info-line">
                <text class="label">{{$t('spare.taxPrice')}}:</text>
                <u-input class="info" 
                suffixIcon="edit-pen"  border="none" 
                type="number" v-model="item.taxPrice" 
                :placeholder="$t('base.common.placeholderI')+$t('spare.taxPrice')"/>
              </p>

              <p class="info-line">
                <text class="label">{{$t('spare.tax')}}:</text>
                <u-input class="info" 
                suffixIcon="edit-pen"  border="none" 
                type="number" v-model="item.cess" 
                :placeholder="$t('base.common.placeholderI')+$t('spare.tax')"/>
              </p>
              <p class="info-line">
                <text class="label">{{$t('spare.transportPrice')}}:</text>
                <u-input class="info" 
                suffixIcon="edit-pen"  border="none" 
                type="number" v-model="item.freightPrice" 
                :placeholder="$t('base.common.placeholderI')+$t('spare.transportPrice')"/>
              </p>
              <p class="info-line">
                <text class="label">{{$t('spare.arriveDate')}}:</text>
                <text class="info"  @click="setArrivalDate(index)">
                <template v-if="item.arrivalDate">
                  {{item.arrivalDate}}
                </template>
                <template v-else>
                  {{$t('spare.chooseDate')}}
                </template></text>
              </p>
              <p class="info-line">
                <text class="label">{{$t('approval.remark')}}:</text>
                <u-input suffixIcon="edit-pen"  border="none"
                v-model="item.remark" 
                :placeholder="$t('base.common.placeholderI')+$t('spare.remark')"/>
              </p>
            </view>
          </view>
        </template>
        <template v-if="encode =='applyTake'">
          <view class="order-card" v-for="(item, index) in details" :key="index">
          <view class="order-info">
            <p class="info-line">
              <text class="label">{{$t('spare.spareName')}}:</text>
              <text class="info">
                {{`${item.code}_${item.name}_${item.spec}_${getLabel(item.unit,unitList)}`}}
              </text>
            </p>
            <p class="info-line">
              <text class="label">{{$t('spare.applyNum')}}</text>
              <u-input class="info" 
              suffixIcon="edit-pen"  border="none" 
              type="number" v-model="item.number" 
              :placeholder="$t('base.common.placeholderI')+$t('spare.applyNum')"/>
            </p>
            <p class="info-line">
              <text class="label">{{$t('spare.price')}}</text>
              <u-input class="info" 
              suffixIcon="edit-pen"  border="none" 
              type="number" v-model="item.price" 
              :placeholder="$t('base.common.placeholderI')+$t('spare.price')"/>
            </p>
            <p class="info-line">
              <text class="label">{{$t('approval.remark')}}:</text>
              <u-input  class="info" suffixIcon="edit-pen"  border="none"
              v-model="item.remark" 
              :placeholder="$t('base.common.placeholderI')+$t('spare.remark')"/>
            </p>
          </view>
        </view>
        </template>
      
    </template>
    <template v-else>
      <u-empty mode="list" text='请先选择申请备件' icon="https://cdn.uviewui.com/uview/empty/list.png">
      </u-empty>
    </template>
    <!-- 到货日期 -->
    <u-calendar 
    color="#4680F9" 
    round='25' 
    :show="showCalendar" 
    @confirm="onDateConfirm" 
    @close="showCalendar=false">
    </u-calendar>
  </view>
</template>

<script>
import { getLabel } from '../../utils/util'
import {request} from '../../utils/request'
import dayjs from 'dayjs'
export default {
  data(){
    return {
      getLabel,
      showCalendar:false,
      details:[],
      currentIndex:'',
      keyword:'',
      spareKeyword:'',
      detailList:[], //选择的备件
      currentTreeId:'',
      unitList:[],
      encode:'',
    }
  },
  onLoad(options) {
    this.encode = options.encode
    if(this.encode == 'applyTake'){
      uni.setNavigationBarTitle({
        title: '领用申请'
      });
    }else if(this.encode == 'applyOrder'){
      uni.setNavigationBarTitle({
        title: '采购订单'
      });
    }
    this.getSpareTree()
  },
  onReady() {
    
  },
  methods:{
    //批量添加
    batchAdd(){
      uni.navigateTo({ url: `/subpages/spare/batchAdd`})
    },
    //确认调价
    sureChangePrice(){
      let pages = getCurrentPages();
      let prevPage = pages[pages.length - 2]; //上一个页面
      if(this.encode == 'applyTake'){
        prevPage.$vm.form.details = this.details;
      }else if(this.encode == 'applyOrder'){
        prevPage.$vm.form.detailList = this.details;
      }
      uni.navigateBack();
    },
    //备件大类
    getSpareTree(){
      //获取单位
      request({
        url:'/admin/dict/type/spare_unit',
        method:'get',
      })
      .then(res=>{
        if(res.data.code == 0){
          this.unitList = res.data.data
        }
      })
    },
    //确认选择备件
    spareConfirm(){
      this.detailList.forEach(item=>{
        let obj = JSON.parse(item)
        let isHave = false
        this.details.forEach(i=>{
          if(obj.id == i.id){
            isHave = true
          }
        })
        if(!isHave){
          if(this.encode == 'applyOrder'){
            obj.number=undefined
            obj.price=undefined
            obj.taxPrice=undefined
            obj.freightPrice=undefined
            obj.arrivalDate = undefined
            obj.remark=undefined
          }else if(this.encode == 'applyTake'){
            obj.number=undefined
            obj.remark=undefined
            obj.price=undefined
            obj.materialId = obj.id
          }
          
          this.details.push(obj)
        }
      })
      this.details.forEach((item,index)=>{
        let isHave = false
        this.detailList.forEach(i=>{
          let obj = JSON.parse(i)
          if(obj.id == item.id){
            isHave = true
          }
        })
        if(!isHave){
          this.details.splice(index,1)
        }
      })
    },
    //重新计算单价和含税单价
    priceChange(row, index) {
      row.taxPrice = row.price * (1 + (row.cess / 100));
    },
    //重新计算单价和含税单价
    taxPriceChange(row, index) {
      row.price = row.taxPrice / (1 + (row.cess / 100));
    },
    //打开日期选择
    setArrivalDate(index){
      this.currentIndex = index
      this.showCalendar = true
    },
    //选择调价日期
    onDateConfirm(date){
      this.details[this.currentIndex].arrivalDate = dayjs(date).format('YYYY-MM-DD')
      console.log(this.details);
      this.showCalendar = false;
    },
  }
}
</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;
  .picker-btn{
    padding: 32rpx;
    position: fixed;
    bottom: 0;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    background-color: #fff;
    z-index: 2;
    .btn{
      width: 48%;
    }
  }
}
/deep/ .u-popup__content{
  height: 70%;
  overflow-y: scroll;
  border-radius: 6px;
}
.popupShow {
	overflow: hidden;
	position: fixed;
}
</style>