mall-web-ssr/pages/mobile/center/vendor/outOfStorage/index.vue

<template>
  <div class="storage">
    <div class="com-mobile-header mobile-center-header">
      <a @click="goLastPage"><i class="iconfont icon-fanhui"></i></a>
      <p>产品出入库</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>
        <div class="storage-head">
          <span class="inline-block" :class="{'active': switchType === 'INBOUND'}" @click="setSwitchType('INBOUND')">入库</span>
          <span class="inline-block" :class="{'active': switchType === 'OUTBOUND'}" @click="setSwitchType('OUTBOUND')">出库</span>
        </div>
        <div class="storage-record">
          <div class="search-content clearfix">
            <div class="search">
              <input type="text" v-model="filterParams.keyword" :placeholder="switchType ==='OUTBOUND' ? (handleItem === 0 ? '出库单号/买家名称':'订单号/买家名称') : (handleItem === 0 ? '入库单号/卖家名称':'发货单/卖家名称')" class="staff-search" @keyup.13="filterRecord">
              <span @click="filterRecord"><i class="iconfont icon-sousuo"></i></span>
            </div>
          </div>
          <div class="tab-content">
            <span :class="{'active': handleItem === 0}" @click="setHandleItem(0)">{{switchType === 'INBOUND' ? '查看入库记录' : '查看出库记录'}}</span>
            <span :class="{'active': handleItem === 1}" @click="setHandleItem(1)">{{switchType === 'INBOUND' ? '其它入库' : '其它出库'}}</span>
            <span :class="{'active': handleItem === 2}" @click="setHandleItem(2)">{{switchType === 'INBOUND' ? '采购入库' : '销售出库'}}</span>
          </div>
          <div class="filters-wrap" v-show="handleItem !== 1">
            <base-filter
              v-for="filterOption in filterOptions"
              :key="filterOption.selectOption"
              :selectItems="filterOption.selectItems"
              :defaultVal="filterOption.defaultVal"
              :selectOption="filterOption.selectOption"
              @selectAction="onSelectAction"
              :title="filterOption.title">
            </base-filter>
          </div>
          <div class="list-content">
            <storage-list :listData="storageList" :switchType="switchType" :handleItem="handleItem" v-if="handleItem !== 1"></storage-list>
            <other-storage :switchType="switchType" v-else></other-storage>
          </div>
          <empty-status  v-if="isEmpty && handleItem !== 1" :type="'collect'" :showLink="true" :text="'抱歉，没有相关信息'"></empty-status>
          <pull-up :fixId="'mobile-storage-center'" :searchMore="fetching" :allPage="allPage" :page="page" @pullUpAction="onPullUpAction"></pull-up>
        </div>
      </div>
    </div>
    <remind-box :title="remindText" :timeoutCount="timeoutCount"></remind-box>
  </div>
</template>
<script>
  import { RemindBox, PullUp, EmptyStatus } from '~components/mobile/common'
  import { ModalWrapper, BaseFilter } from '~components/mobile/base'
  import { StorageList, OtherStorage } from '~components/mobile/center/outOfStorage'
  export default {
    middleware: 'authenticated',
    layout: 'mobile',
    data () {
      return {
        remindText: '',
        timeoutCount: 0,
        switchType: 'INBOUND',
        handleItem: 0,
        filterOptions: [
          {
            title: '交易时间',
            selectOption: 'date',
            selectItems: [{
              key: '30天',
              val: 1
            }, {
              key: '90天',
              val: 2
            }, {
              key: '180天',
              val: 3
            }, {
              key: '自定义',
              val: 4
            }],
            defaultVal: 1
          }
        ],
        page: 1,
        isChange: false,
        storageList: [],
        filterParams:{
          count: 10
        },
        filter:{
          count: 10,
          sorting: {"createtime":"DESC"},
          status: '502-406'
        }
      }
    },
    components: {
      RemindBox,
      PullUp,
      EmptyStatus,
      BaseFilter,
      StorageList,
      OtherStorage
    },
    created () {
      this.switchType = this.$route.query.type ? this.$route.query.type : 'INBOUND'
      this.handleItem = this.$route.query.handleItem ? Number(this.$route.query.handleItem) : 0
    },
    watch: {
      'storageData': {
        handler: function (val) {
          if (val && val.content) {
            if(this.isChange){
              this.storageList = val.content
              this.isChange = false
            }
            this.storageList = [...this.storageList, ...val.content]
          }
        }
      }
    },
    computed: {
      storageData () {
        return this.allStorageData.data
      },
      allStorageData () {
        return this.$store.state.product.storage.list
      },
      fetching () {
        return this.allStorageData.fetching
      },
      allPage () {
        return this.storageData.totalPages
      },
      isEmpty () {
        return this.storageList.length === 0
      }
    },
    methods: {
      onRemind: function (str) {
        this.remindText = str
        this.timeoutCount++
      },
      onPullUpAction () {
        this.page++
        this.filterParams.page = this.page
        this.filter.page = this.page
        this.reloadList()
      },
      setSwitchType (type) {
        if(type !== this.switchType) {
          this.switchType = type
          this.filterParams.type = type
          this.page = 1
          this.filterParams.page = 1
          this.filter.page = 1
          this.isChange = true
          this.reloadList()
        }
      },
      setHandleItem (type) {
        if(type !== this.handleItem) {
          this.handleItem = type
          if(type !== 1) {
            this.filterParams.page = 1
            this.filter.page = 1
            this.page = 1
            this.isChange = true
            this.reloadList()
          }
        }
      },
      setSelect (type, val) {
        if (type === 'date') {
          if (val) {
            this.filterParams.fromDate = val.fromDate
            this.filter.startMils = val.fromDate
            this.filterParams.toDate = val.toDate
            this.filter.endMils = val.toDate
          } else {
            this.filterParams.fromDate = null
            this.filter.startMils = null
            this.filterParams.toDate = null
            this.filter.endMils = null
          }
        } else {
          this.filterParams[type] = val
          this.filter[type] = val
        }
        this.filterRecord()
      },
      initFilterParams () {
        this.filterParams = {
          keyword: '',
          fromDate: '',
          toDate: '',
          type: ''
        },
          this.filter = {
            keyword: '',
            startMils: '',
            endMils: ''
          }
      },
      onSelectAction (selectObj) {
        this.setSelect(selectObj.key, selectObj.value)
      },
      filterRecord () {
        this.filterParams.page = 1
        this.filter.page = 1
        this.filterParams.type = this.switchType
        this.isChange = true
        this.reloadList()
      },
      reloadList () {
        if(this.handleItem === 0) {
          this.$store.dispatch('product/getLoadStorageData', this.filterParams)
        } else if(this.handleItem === 2) {
          if(this.switchType === 'INBOUND') {
            this.filterParams.type = null
            this.$store.dispatch('product/getLoadEnterpriseData', this.filterParams)
          } else {
            this.$store.dispatch('product/getLoadPurchaseData', this.filter)
          }
        }
      },
    }
  }
</script>
<style lang="scss">
  $base-color: #3f84f6;
  #mobile-storage-center {
    padding-bottom: .5rem;
    margin: 0 auto;
    .storage-head {
      height: .82rem;
      line-height: .82rem;
      text-align: center;
      background: #fff;
      span {
        font-size: .29rem;
        &:last-child {
          margin-left: 2.6rem;
        }
        &.active {
          color: $base-color;
          border-bottom: 1px solid $base-color;
        }
      }
    }
    .storage-record {
      .search-content {
        padding: .20rem 0;
        text-align: center;
        input {
          margin: 0;
          width: 7.1rem;
          border: 1px solid $base-color;
        }
      }
      .tab-content{
        margin: 0 auto .13rem;
        width: 7.1rem;
        overflow: hidden;
        text-align: center;
        span{
          float: left;
          display: inline-block;
          width: 2.36rem;
          height: .62rem;
          line-height: .62rem;
          text-align: center;
          color: #999999;
          font-size: .26rem;
          background-color: #ffffff;
          border: solid 1px #d7d7d7;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          &.active{
            background-color: #3f84f6;
            border: none;
            color: #fff;
          }
          &:first-child{
            border-top-left-radius: .05rem;
            border-bottom-left-radius: .05rem;
          }
          &:nth-child(2){
            border-left: none;
            border-right: none;
          }
          &:last-child{
            border-top-right-radius: .05rem;
            border-bottom-right-radius: .05rem;
          }
        }
      }
      .filters-wrap{
        background: #fff;
        margin: 0 auto .13rem;
        width: 7.1rem;
        overflow: hidden;
        padding: .1rem;
      }
      .list-content{
        margin: 0 auto;
        padding: 0 .20rem;
        margin-bottom:1.2rem;
      }
    }
  }
</style>