mall-web-ssr/pages/mobile/center/user/outOfStorage/purchase/_storeid.vue

<template>
  <div class="storage">
    <div class="com-mobile-header mobile-center-header">
      <a @click="goLastPage"><i class="iconfont icon-fanhui"></i></a>
      <p v-text="switchType === 'INBOUND' ? '采购入库' : '销售出库'"></p>
      <p class="en-name"><img :src="`/images/mobile/center/${user.data.enterprise.uu ? 'en' : 'self'}.png`" alt="">{{currentEnName}}</p>
    </div>
    <div class="mobile-fix-content mobile-centerfix-content" id="mobile-storage-center">
      <div class="storage-record" v-if="switchType === 'INBOUND'">
        <div class="btn-click">
          <span class="base-color" @click="saveClick('INBOUND')">保存</span>
          <span class="clear" @click="saveClick('clear')">取消</span>
        </div>
        <div class="storage-info">
          <div class="linetext">入库单： <span>系统自动生成</span></div>
          <div class="linetext">卖家名称： <span v-text="storageList.sellername || '-'">21324</span></div>
          <div class="linetext">所属订单： <span v-text="storageList.orid || '-'">21324</span></div>
          <div class="linetext" v-if="allObj.logistics">物流公司：<span v-text="allObj.logistics.companyName"></span></div>
          <div class="linetext" v-if="allObj.logistics">物流单号：<span v-text="allObj.logistics.number"></span></div>
          <!--<div class="linetext">录入人： <span v-text="storageList.sellername || '-'">21324</span></div>-->
          <div class="linetext">录入时间： <span v-text="storageList.createtime ? baseUtils.formatDate(new Date(storageList.createtime), 'yyyy-MM-dd hh:mm:ss') : '-'">21324</span></div>
        </div>
        <ul class="list-unstyled" v-if="storageList.invoiceDetails" style="margin-bottom:.8rem;">
          <li class="info-list clearfix" v-for="(item, index) in storageList.invoiceDetails">
            <span class="super"><em v-text="index + 1">1</em></span>
            <div class="linetext width50 fl">型号： <span v-text="item.cmpCode || '-'">21324</span></div>
            <div class="linetext width50 fl">品牌： <span v-text="item.brandNameEn || '-'">21324</span></div>
            <div class="linetext width50 fl">物料名称： <span v-text="item.kiName || '-'">21324</span></div>
            <div class="linetext width50 fl">规格： <span v-text="item.spec || '-'">21324</span></div>
            <div class="linetext width50 fl">入库数(PCS)：<span v-text="item.qty || '-'">-</span></div>
            <div class="linetext width50 fl">单价({{currency === 'RMB' ? '¥': '$'}})： <span class="base-color" v-text="item.taxUnitprice || '-'">21324</span></div>
          </li>
        </ul>
      </div>
      <div class="storage-record" v-if="switchType === 'OUTBOUND'">
        <div class="btn-click">
          <span class="base-color" @click="saveClick('OUTBOUND')">保存</span>
          <span class="clear" @click="saveClick('clear')">取消</span>
        </div>
        <div class="storage-info">
          <div class="logistics-line" v-show="showLogistics && logisticsCode">
            <ul class="similar">
              <li v-for="sCode in logisticsCode" @click.stop="setLogisticsCode(sCode.companyName)">
                <span v-text="sCode.companyName"></span>
              </li>
              <li v-if="logisticsCode.length <= 0"><span>请去PC端物流管理维护物流信息</span></li>
            </ul>
          </div>
          <div class="linetext">出库单： <span>系统自动生成</span></div>
          <div class="linetext">买家名称： <span v-text="storageList.buyentername || storageList.buyername">21324</span></div>
          <div class="linetext">所属订单： <span v-text="storageList.orderid || '-'">21324</span></div>
          <div class="linetext"><em>*</em>物流公司：<span>
            <input style="width:3rem;" type="text" readonly placeholder="请选择物流公司" v-model="allObj.logisticsInfo.companyName" @click.stop="showLogistics = !showLogistics">
          </span></div>
          <div class="linetext"><em>*</em>物流单号：<span>
            <input style="width:3rem;" type="text" v-model="allObj.logisticsInfo.number">
          </span></div>
          <!--<div class="linetext">录入人： <span v-text="storageList.sellername || '-'">21324</span></div>-->
          <div class="linetext">录入时间： <span v-text="storageList.createtime ? baseUtils.formatDate(new Date(storageList.createtime), 'yyyy-MM-dd hh:mm:ss') : '-'">21324</span></div>
        </div>
        <ul class="list-unstyled" v-if="storageList.purchaseDetails" style="margin-bottom:.8rem;">
          <li class="info-list clearfix" v-for="(item, index) in storageList.purchaseDetails">
            <span class="super"><em v-text="index + 1">1</em></span>
            <div class="linetext width50 fl">型号： <span v-text="item.cmpCode || '-'">21324</span></div>
            <div class="linetext width50 fl">品牌： <span v-text="item.brName || '-'">21324</span></div>
            <div class="linetext width50 fl">物料名称： <span v-text="item.kiName || '-'">21324</span></div>
            <div class="linetext width50 fl">规格： <span v-text="item.spec || '-'">21324</span></div>
            <div class="linetext width50 fl">应出库(PCS)： <span v-text="item.number || '-'">21324</span></div>
            <div class="linetext width50 fl">已出库(PCS)： <span v-text="item.shipQty || '-'">21324</span></div>
            <div class="linetext width50 fl">出库数(PCS)：
              <span v-if="item.qty === item.number">-</span>
              <input style="width:1.2rem;" v-else type="text" v-model="item.qty" @blur="ChangeSendCount(item, item.qty)">
            </div>
            <div class="linetext width50 fl">单价(¥)： <span class="base-color" v-text="item.taxUnitPrice || '-'">21324</span></div>
          </li>
        </ul>
      </div>
    </div>
    <remind-box :title="remindText" :timeoutCount="timeoutCount"></remind-box>
  </div>
</template>
<script>
  import { RemindBox, PullUp, EmptyStatus } from '~components/mobile/common'
  export default {
    middleware: 'authenticated',
    layout: 'mobile',
    fetch({route, store}) {
      return route.query.type === 'INBOUND' ? Promise.all([
        store.dispatch('product/getLoadEnterpriseId', {id:route.params.storeid}),
        store.dispatch('loadCurrencyData')
      ]) : Promise.all([
        store.dispatch('product/getLoadPurchaseId', {id:route.params.storeid}),
        store.dispatch('product/getLoadLogistics', {count:30, page: 1}),
        store.dispatch('loadCurrencyData')
      ])
    },
    data () {
      return {
        remindText: '',
        timeoutCount: 0,
        switchType: this.$route.query.type,
        storageList: {},
        showLogistics: false,
        allObj:{
          logisticsInfo: {},
          map: []
        }
      }
    },
    components: {
      RemindBox,
      PullUp,
      EmptyStatus
    },
    mounted () {
      let data = this.$store.state.product.storage.detail.data
      this.storageList = data ? JSON.parse(JSON.stringify(this.$store.state.product.storage.detail.data)) : {}
      let _this = this
      document.body.onclick = function() {
        _this.showLogistics = false
      }
    },
    computed: {
      logisticsCode () {
        return this.$store.state.product.storage.logistics.data
      }
    },
    methods: {
      onRemind: function (str) {
        this.remindText = str
        this.timeoutCount++
      },
      setFilterType (type) {
        let bound = ''
        if(type === 'OTHER_INBOUND') {
          bound = '其他入库'
        } else if(type === 'OTHER_OUTBOUND'){
          bound = '其他出库'
        } else if (type === 'PURCHASE_INBOUND') {
          bound = '采购入库'
        } else if(type === 'SELL_OUTBOUND') {
          bound = '销售出库'
        } else {
          bound = '全部类型'
        }
        return bound
      },
      ChangeSendCount (type, val) {
        let newShipQty = type.shipQty ? type.shipQty : 0
        if (val > type.number - newShipQty) {
          this.onRemind('本次发货数量不能大于已剩数量')
          val = type.number - newShipQty
        }
        type.qty = val
      },
      setLogisticsCode (val) {
        this.showLogistics = false
        this.allObj.logisticsInfo.companyName = val
      },
      saveClick (type) {
        if(type === 'clear') {
          this.$router.push(`/mobile/center/${this.switchType === 'OUTBOUND' ? 'vendor' : 'user'}/outOfStorage?providerType=person&handleItem=2&type=${this.$route.query.type}`)
        }else if(type === 'OUTBOUND'){
          if(!this.allObj.logisticsInfo.companyName) {
            this.onRemind('请先选择物流公司')
          } else if(!this.allObj.logisticsInfo.number) {
              this.onRemind('请填写物流单号')
          } else {
            let arr = []
            this.storageList.purchaseDetails.forEach(val => {
              if(val.qty) {
                arr.push({id: val.id, qty: Number(val.qty)})
              }
            })
            if(arr.length <= 0) {
              this.onRemind('最少填写一个发货数量')
            } else {
              this.allObj.sendType = this.storageList.sendType
              this.allObj.map = arr
              this.allObj.jsonSdAddress = this.storageList.jsonAddress
              this.$http.post(`/trade/invoice/inFpu/save?id=${this.storageList.id}`, this.allObj)
                .then(response => {
                  if(response.data.code === 1){
                    this.onRemind('保存信息成功')
                    setTimeout(() => {
                      this.$router.push(`/mobile/center/vendor/outOfStorage?providerType=person&handleItem=2&type=${this.$route.query.type}`)
                    }, 1000)
                  } else {
                    this.onRemind('保存信息失败')
                  }
                }).catch(err => {
                  this.onRemind('保存信息失败')
              })
            }
          }
        } else if(type === 'INBOUND') {
          this.$http.put(`/trade/order/signReceive?_status=ensureaccept&invoiceId=${this.storageList.invoiceid}`)
            .then(response => {
              if(response.data.code === 1){
                this.onRemind('保存信息成功')
                setTimeout(() => {
                  this.$router.push(`/mobile/center/user/outOfStorage?providerType=person&handleItem=2&type=${this.$route.query.type}`)
                }, 1000)
              } else {
                this.onRemind('保存信息失败')
              }
            }).catch(err => {
              this.onRemind('保存信息失败')
            })
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  $base-color: #3f84f6;
  $title-color: #ffa200;
  $red-color: #ff0000;
  #mobile-storage-center {
    padding-bottom: .5rem;
    margin: 0 auto;
  }
  .storage-record{
    padding: 0.24rem 0.24rem;
    margin: 0 auto;
    .btn-click{
      padding: 0.24rem 0.24rem;
      position: fixed;
      bottom: 1rem;
      left: 0;
      right: 0;
      text-align: center;
      background: #f1f3f6;
      span{
        display:inline-block;
        width:30%;
        height: .6rem;
        line-height: .6rem;
        margin: 0 .1rem;
        border-radius:.05rem;
        &.clear{
          color:#fafbfc;
          background: #b5b5b5;
        }
        &.base-color{
          color:#fff;
          background: $base-color;
        }
      }
    }
    .storage-info{
      position:relative;
      padding: 0.24rem 0.24rem;
      background: #fff;
      margin-bottom:.2rem;
      .logistics-line{
        position: absolute;
        top: 2.6rem;
        left: 1.75rem;
        border: 1px solid $base-color;
        border-radius: .04rem;
        width: 3rem;
        background: #fff;
        z-index: 1;
        max-height: 3.96rem;
        overflow-y: auto;
        .similar {
          li {
            height: .66rem;
            line-height: .66rem;
            padding: 0 .19rem;
            font-size: .24rem;
            &:active, &:focus {
              background: #f7f7f7;
            }
          }
        }
      }
    }
    .linetext{
      color:#666;
      line-height: .6rem;
      overflow: hidden;
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis;
      white-space: nowrap;
      em{
        color:$red-color;
      }
      input{
        height: .5rem;
        font-size: .24rem;
        border-radius: .04rem;
        border: 1px solid #d2d2d2;
        padding: 0 .1rem;
      }
      input[readonly] {
        padding: 0 .2rem;
        background: url('/images/mobile/select-arrow.png') no-repeat;
        background-size: .24rem .15rem;
        background-position: 2.6rem .2rem;
      }
      span{
        color:#333;
        &.base-color{
          color:$base-color;
        }
      }
    }
    .info-list{
      position:relative;
      padding: 0.3rem 0.24rem;
      background: #fff;
      margin-bottom:.2rem;
      .width50{
        display:inline-block;
        width: 48%;
        margin-left: .1rem;
      }
      >span{
        display:inline-block;
        position:absolute;
        left:0;
        top:0;
        padding: 0 .1rem;
        background: $title-color;
        border-radius: 0 .5rem .5rem 0;
        line-height: .3rem;
        height:.3rem;
        color:#fff;
        font-size: .24rem;
      }
    }
  }
</style>