count-pass-app/subpages/spare/choosespare.vue

<template>
  <view class="price apply-credit" :class="(showCalendar || showPicker)?'popupShow':''">
    <view class="picker-btn">
      <view class="btn">
        <u-button type="primary" @click="sureChangePrice">
          {{$t('settings.confirmText')}}
        </u-button>
      </view>
    </view>
    <u-sticky bgColor="#fff">
      <view class="change-price-title">
        <view class="btn">
          <u-button type="primary" @click="batchAdd">{{$t('spare.batchAdd')}}</u-button>
        </view>
        <view class="btn">
          <u-button type="primary" @click="orderAdd">{{work=='in'?$t('spare.orderAdd'):$t('spare.applyAdd')}}</u-button>
        </view>
      </view>
     </u-sticky>
    <template v-if="details.length">
      <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">
              <template v-if="item.sourceType == '101'">
                {{`${item.materialCode}_${item.materialName}_${item.materialSpec}_${getLabel(item.materialUnit,unitList)}`}}
              </template>
              <template v-else>
                {{`${item.code}_${item.name}_${item.spec}_${getLabel(item.unit,unitList)}`}}
              </template>
            </text>
          </p>
          <template v-if="work=='in'">
            <p class="info-line">
            <text class="label">{{$t('spare.source')}}:</text>
            <text class="info">{{item.sourceType == '102'?'批量添加':'订单:'+item.orderCode}}</text>
            </p>
            <p class="info-line">
              <text class="label">{{$t('spare.inStoreNumber')}}:</text>
              <u-input class="info" suffixIcon="edit-pen" border="none" :placeholder="$t('base.common.placeholderI')+$t('spare.inStoreNumber')" type="number" v-model="item.count" />
            </p>
            <p class="info-line">
              <text class="label">{{$t('spare.shelf')}}:</text>
              <u-icon class="info" name="list" size="30" @click="openShelf(item)" color="#2979ff"></u-icon>
            </p>
            <p class="info-line">
              <text class="label">{{$t('approval.remark')}}:</text>
              <u-input class="info" suffixIcon="edit-pen"  :placeholder="$t('approval.remark')" border="none" v-model="item.remark" />
            </p>
          </template>
          <template v-else>
            <p class="info-line">
            <text class="label">{{$t('spare.source')}}:</text>
            <text class="info">{{item.sourceType == '102'?'批量添加':'申请:'+item.takeCode}}</text>
            </p>
            <p class="info-line">
              <text class="label">{{$t('spare.canOutNumber')}}:</text>
              <text class="info">
                {{item.sourceType == '101'?(item.number - item.outNum):item.totalNum}}
              </text>
            </p>
            <p class="info-line">
              <text class="label">{{$t('spare.outStoreNumber')}}:</text>
              <u-input class="info" 
              @change="countChange(item)" 
              :disabled='item.materialShelves.length>1' 
              suffixIcon="edit-pen" 
              border="none" 
              placeholder="请输入出库数量" 
              type="number" 
              v-model="item.count" />
            </p>
            <p class="info-line">
              <text class="label">{{$t('spare.shelf')}}:</text>
              <u-icon class="info" name="list" size="30" @click="openShelf(item)" color="#2979ff"></u-icon>
            </p>
            <p class="info-line">
              <text class="label">{{$t('approval.remark')}}:</text>
              <u-input class="info" suffixIcon="edit-pen" :placeholder="$t('approval.remark')" border="none" v-model="item.remark" />
            </p>
          </template>
        </view>
        <view>
          <view class="card-oper">
            <view class="btn">
              <u-button type='error' size="small"  @click="tableDelete(item)">{{$t('search.delete')}}</u-button>
            </view>
          </view>
        </view>
      </view>
    </template>
    <template v-else>
      <u-empty mode="list" text='请添加入库明细' icon="https://cdn.uviewui.com/uview/empty/list.png">
      </u-empty>
    </template>
    <!-- 货架 -->
    <u-popup :show="shelfShow" mode="center"  @close="shelfShow = false" >
      <view class="picker-card">
        <view style="height:100%;overflow-y:auto;display:block">
          <template v-if="work == 'in'">
            <view class="order-card shelf-card" v-for="(item, index) in currentRow.shelfList" :key="index">
              <view class="order-info">
                  <p class="info-line">
                    <text class="label">货架:</text>
                    <u-input  class="info"  suffixIcon="edit-pen" border="none" :clearable="false" v-model="item.shelf"></u-input>
                  </p>
                  <p class="info-line">
                    <text class="label">货层:</text>
                    <u-input  class="info"  suffixIcon="edit-pen" border="none" :clearable="false" v-model="item.floor"></u-input>
                  </p>
                  <p class="info-line">
                    <text class="label">货位:</text>
                    <u-input  class="info"  suffixIcon="edit-pen" border="none" :clearable="false" v-model="item.seat"></u-input>
                  </p>
                  <p class="info-line">
                    <text class="label">附加码:</text>
                    <u-input  class="info" suffixIcon="edit-pen"  border="none" :clearable="false" v-model="item.sign"></u-input>
                  </p>
                  <p class="info-line">
                    <text class="label">数量:</text>
                    <u-input  class="info" type="number"  suffixIcon="edit-pen" border="none" :clearable="false" v-model="item.num"></u-input>
                  </p>
                  <p class="info-line">
                    <text class="label"></text>
                    <u-button type='error' size="small"  @click="deleteShelve(item,index)">删除</u-button>
                  </p>
                </view>
              </view>
            </template>
            <template v-else>
              <view class="order-card shelf-card" v-for="(item, index) in currentRow.materialShelves" :key="index">
                <view class="order-info">
                  <p class="info-line">
                    <text class="label">货架:</text>
                    <text class="info">{{item.shelf}}</text>  
                  </p>
                  <p class="info-line">
                    <text class="label">货层:</text>
                    <text class="info">{{item.floor}}</text>
                  </p>
                  <p class="info-line">
                    <text class="label">货位:</text>
                    <text class="info">{{item.seat}}</text>
                  </p>
                  <p class="info-line">
                    <text class="label">附加码:</text>
                    <text class="info">{{item.sign}}</text>
                  </p>
                  <p class="info-line">
                    <text class="label">库存数量:</text>
                    <text class="info">{{item.shelfNum}}</text>
                  </p>
                  <p class="info-line">
                    <text class="label">出库数量:</text>
                    <u-input  class="info" type="number" 
                    @change="changeShelveNum(item)"
                    suffixIcon="edit-pen"
                    border="none" 
                    :clearable="false" 
                    v-model="item.num">
                    </u-input>
                  </p>
                </view>
              </view>
            </template>
        </view>
        
        <view class="card-oper">
          <view class="btn"  v-if="work == 'in'">
            <u-button @click="addShelf">添加货架</u-button>
          </view>
          <view class="btn"  v-else>
            <u-button @click="confirmShelf">取 消</u-button>
          </view>
          <view class="btn">
            <u-button type='primary' @click="confirmShelf">{{$t('settings.confirmText')}}</u-button>
          </view>
        </view>
      </view>
      
	  </u-popup>
    <!-- 到货日期 -->
    <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'
import {
  fetchTree,
  getSpareOption
} from "../../api/stock"
export default {
  data(){
    return {
      getLabel,
      shelfShow:false,
      showCalendar:false,
      showPicker:false,
      details:[],
      currentIndex:'',
      keyword:'',
      spareKeyword:'',
      detailList:[], //选择的备件
      unitList:[],
      work:'',
      purveyId:'',
      currentRow:{},
    }
  },
  onLoad(options) {
    this.work = options.work
    this.details = JSON.parse(options.content)
    this.purveyId = options.purveyId
    this.dept = options.dept
    this.getSpareTree()
  },
  onReady() {
    
  },
  methods:{
    //确认调价
    sureChangePrice(){
      let pages = getCurrentPages();
      let prevPage = pages[pages.length - 2]; //上一个页面
      prevPage.$vm.form.detailList = this.details;
      uni.navigateBack();
    },
    //批量添加
    batchAdd(){
      uni.navigateTo({ url: `/subpages/spare/batchAdd`})
    },
    //订单添加
    orderAdd(){
      if(this.work == 'in'){
        uni.navigateTo({ url: `/subpages/spare/chooseorder?purveyId=${this.purveyId}&work=in`})
      }else{
        uni.navigateTo({ url: `/subpages/spare/chooseorder?dept=${this.dept}&work=out`})
      }
    },
    //确认货架
    confirmShelf(){
      let num = 0
      console.log(this.currentRow.materialShelves);
      this.currentRow.materialShelves.forEach(item=>{
        num+=parseInt(item.num) || 0
      })
      this.currentRow.count = num
      console.log(this.currentRow);
      this.details=JSON.parse(JSON.stringify(this.details))
      this.shelfShow = false
    },
    //备件大类
    getSpareTree(){
      //获取单位
      request({
        url:'/admin/dict/type/spare_unit',
        method:'get',
      })
      .then(res=>{
        if(res.data.code == 0){
          this.unitList = res.data.data
        }
      })
    },
    //出库数量变化
    countChange(row){
      if(row.sourceType == '101'){
        if(row.count>(row.number - row.outNum)){
          row.count = row.number - row.outNum
          uni.showToast({
            title: '出库数量不能大于可出库数量!',
            icon: 'none',
            mask: true
          })
          console.log(row);
          this.details=JSON.parse(JSON.stringify(this.details))
        }
      }else{
        if(row.count>row.totalNum){
          row.count = row.totalNum
          uni.showToast({
            title: '出库数量不能大于可出库数量!',
            icon: 'none',
            mask: true
          })
          console.log(row);
          this.details=JSON.parse(JSON.stringify(this.details))
        }
      }
    },
    //修改货架数量
    changeShelveNum(row){
      if(row.num>row.shelfNum){
          uni.showToast({
            title: '出库数量不能大于库存数量!',
            icon: 'none',
            mask: true
          })
          row.num = row.shelfNum
      }
          console.log(row);
    },
    //获取产品选项
    getSpare(id){
      let data = {
        fullCode:id,
      }
      getSpareOption(data,this.spareKeyword).then(res=>{
        if(res.data.code == 0){
          this.spareList=res.data.data
          this.spareList.forEach(item=>{
            item.content = JSON.stringify(item)
          })
        }
      })
    },
    //货架删除
    deleteShelve(row,index){
      if(this.currentRow.shelfList.length==1){
        uni.showToast({
          title: '最少保留一条货架信息',
          icon:'none',
          mask: true
        })
      }else{
        this.currentRow.shelfList.splice(index,1)
      }
    },
    //添加货架
    addShelf(){
      this.currentRow.shelfList.push({
        shelf:0,
        floor:0,
        seat:0,
        sign:0,
        num:0,
      })
    },
    //打开货架
    openShelf(item){
      console.log(item);
      this.currentRow = item
      this.shelfShow = true
    },
    //确认选择备件
    spareConfirm(){
      this.detailList.forEach(item=>{
        let obj = JSON.parse(item)
        let isHave = false
        this.details.forEach(i=>{
          if(obj.id == i.id && i.sourceType == '102'){
            isHave = true
          }
        })
        if(!isHave && this.work == 'in'){
          obj.materialId = obj.id
          obj.count=''
          obj.remark=''
          obj.sourceType = '102'
          if(obj.defaultShelves.length){
            obj.shelfList = obj.defaultShelves
          }else{
            obj.shelfList = [{
              shelf:0,
              floor:0,
              seat:0,
              sign:0,
              num:0,
            }]
          }
          this.details.push(obj)
        }else if(!isHave && this.work == 'out'){
          obj.materialName = obj.name
          obj.materialId = obj.id
          obj.count=0
          // item.materialShelves.forEach(i=>{
          //   i.num = 0
          // })
          obj.remark=''
          obj.cess = parseInt(obj.cess)
          obj.sourceType = '102'
          this.details.push(obj)
        }
      })
      this.showPicker = false
    },
    //打开日期选择
    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;
    },
    //删除
    tableDelete(e){
      this.details = this.details.filter(item=>{
        return item.id != e.id
      })
    },
  }
}
</script>

<style lang="scss" scoped>
@import '../../common/css/apply.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;
    flex-direction: row;
    justify-content: space-between;
    .btn{
      width: 48%;
    }
  }
  .picker-btn{
    padding: 32rpx;
    position: fixed;
    bottom: 0;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    background-color: #fff;
    z-index: 100;
    .btn{
      width: 100%;
    }
  }
  // padding: 32rpx;
  .picker-card{
    padding: 32rpx 32rpx 144rpx;
    position: relative;
    height: 100%;
    overflow-y: scroll;
    display: block;
    .choose-wrap{
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      height: 100%;
      .item{
        width: 45%;
        height: 100%;
        overflow-y: scroll;
        .search-wrap{
          margin-bottom: 24rpx;
        }
        .tree{
          p{
            line-height: 64rpx;
          }
        }
      }
    }
    .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: 70%;
  width: 90%;
  overflow-y: scroll;
  border-radius: 6px;
  background-color: #f8f8f8;
}
.popupShow {
	overflow: hidden;
	position: fixed;
}
.order-card{
  position: relative;
  box-shadow:0 0 16rpx 0px rgba(0, 0, 0, 0.1);
  // background-color: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  // margin-top: 24rpx;
  margin: 24rpx 24rpx 0;
  z-index: 50;
  display: block;
    
  .order-card-title{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    // background: linear-gradient(to right, rgb(245, 249, 255), #fff);
    padding: 16rpx 24rpx;
    line-height: 50rpx;
    font-size: 32rpx;
    font-weight: 600;
    color: #fff;
    box-shadow:0 0 16rpx 0px rgba(0, 0, 0, 0.1);
}
  
  .order-info {
    background-color: #fff;
    font-size: 28rpx;
    line-height: 56rpx;
    padding: 24rpx;
    color: #333;
    position: relative;
    .info-line {
      display: flex;
      flex-direction: row;
      align-items: center;
      line-height: 72rpx;
      .label {
        width: 200rpx;
        text-align: center;
        font-size: 24rpx;
      }
      .info {
        flex: 1;
        font-weight: bold;
        font-size: 28rpx;
      }
      .tag{
        padding: 0 16rpx 0 12rpx;
        border-top-right-radius: 40rpx;
        border-bottom-right-radius: 40rpx;
        height: 40rpx;
        line-height: 40rpx;
      }
      .tag-ls{
        border: 1px solid #f9ae3d;
        background-color: #fdf6ec;
        color: #f9ae3d;
      }
      .tag-gd{
        border: 1px solid #3c9cff;
        background-color: #ecf5ff;
        color: #3c9cff;
      }
      .tag-gx{
        border: 1px solid #5ac725;
        background-color: #f5fff0;
        color: #5ac725;
      }
    }
    .qrcode-logo{
      position: absolute;
      width: 128rpx;
      height: 128rpx;
      bottom: 24rpx;
      right: 24rpx;
      .img{
        width: 100%;
        height: 100%;
      }
    }
  }
  .card-oper{
    background-color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding: 24rpx;
    .btn{
      width: 25%;
      margin-left: 32rpx;
    }
  }
}
.shelf-card{
  margin: 0 0 24rpx; 
  display: block;
  .order-info{
    flex-direction: row;
    flex-wrap: wrap;
    .info-line{
      width: 50%;
      .label{
        width: 120rpx;
      }
    }
  }
}
</style>