xiamen-sb-uniapp/pages/spare/spare-store copy.vue

<template>
  <view>
    <my-add-button @handleClick="handleClick" />
    <view class="border-bottom">
      <u-tabs class="p-fixed left0 right0 zIndex" :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
    </view>
    <view class="">
      <template v-if="listData.length > 0">
        <view class="mx3 my2 p3 bg-color-white box p-relative" v-for="(item, index) in listData" :key="index" @longpress="showMask(item.id,$event)">
          <common-mask :item="item" :maskId="maskId" @hide="maskId = 0" />
          <view class="d-flex j-between border-bottom pb-2 a-center">
            <view class="text-color-b f-size-26">{{ item.no }}</view>
            <my-badge :text="item.num+''" :status="'success'" />
          </view>
          <view class="mt-2 d-flex j-between">
            <view class="text-color-3 f-size-32 f-weight-bold">{{
                            item.spareName
                        }} - 价格：{{
                            item.price
                        }}</view>
          </view>
          <view class="f-size-26 text-color-6 f-weight-4 mt-2">{{
                        item.storeName
                    }}</view>
          <view class="d-flex j-end edit-box">
            <view class="text-color-3 f-size-32 edit mask-red">
              <view @click.stop="handleDelSpareStore(item)">删除</view>
            </view>
            <view class="text-color-3 f-size-32 edit">
              <view @click.stop="handleOutStore(item)">出库</view>
            </view>
            <view class="text-color-3 f-size-32 edit">
              <view @click.stop="handleInStore(item)">入库</view>
            </view>
            <view class="text-color-3 f-size-32 edit">
              <view @click.stop="handleTransfer(item)">调拨</view>
            </view>
          </view>
        </view>
        <view class="py3">
          <u-loadmore :status="status" />
        </view>
      </template>
      <template v-else>
        <view class="empty">
          <u-empty text="暂无数据" mode="list"></u-empty>
        </view>
      </template>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          name: '全部'
        },
        {
          name: '待接单'
        },
        {
          name: '进行中'
        },
        {
          name: '待验收'
        },
        {
          name: '待支付'
        }
      ],
      current: 0,
      // 加载更多
      status: 'loadmore',
      page: 1,
      limit: 10,
      spareName: '',
      spareNo: '',
      type: '',
      loadMore: true,
      listData: [],
      statusMap: {},
      maskId: 0
    }
  },
  onPullDownRefresh() {
    // 请求结束取消刷新
    this.page = 1
    this.loadMore = true
    this.listData = []
    ;(this.detailId = ''), this.initData()
    uni.stopPullDownRefresh()
  },
  onReachBottom() {
    if (this.loadMore) {
      this.page++
      this.initData()
    }
  },
  onLoad(option) {
    this.detailId = option.detailId
    this.spareName = option.spareName
    this.spareNo = option.spareNo
    this.statusMap = this.$DictCache.getLabelByValueMapByType(this.$DictCache.TYPE.REPAIR_APPLICATION_FORM_STATUS)
  },
  onShow() {
    this.page = 1
    this.loadMore = true
    this.listData = []
    this.initData()
  },
  onHide() {
    this.maskId = 0
  },
  methods: {
    showMask(id, e) {
      this.maskId = id
      // #ifdef H5
      e.preventDefault()
      // #endif
    },
    handleOutStore(item) {
      const that = this
      uni.navigateTo({
        url: '/pages/spare/spare-store-out?spareId=' + item.spareId + '&spareName=' + item.spareName + '&spareNo=' + item.no + '&storeId=' + item.storeId + '&storeNum=' + item.num + '&storeName=' + item.storeName + '&price=' + item.price
      })
    },
    // 通过
    handleInStore(item) {
      const that = this
      uni.navigateTo({
        url: '/pages/spare/spare-store-in?spareId=' + item.spareId + '&spareName=' + item.spareName + '&spareNo=' + item.no + '&storeId=' + item.storeId + '&storeNum=' + item.num + '&storeName=' + item.storeName + '&price=' + item.price
      })
    },
    handleTransfer(item) {
      const that = this
      uni.navigateTo({
        url: '/pages/spare/spare-store-transfer?spareId=' + item.spareId + '&spareName=' + item.spareName + '&spareNo=' + item.no + '&storeId=' + item.storeId + '&storeNum=' + item.num + '&storeName=' + item.storeName + '&price=' + item.price
      })
    },
    handleDelSpareStore(item) {
      const that = this
      this.$Http
        .deleteSpareStore({
          id: item.id
        })
        .then(res => {
          uni.showToast({ icon: 'none', title: '刪除成功!', duration: 2000 })
          that.page = 1
          that.loadMore = true
          that.listData = []
          that.initData()
        })
    },
    handleClick() {
      const that = this
      uni.navigateTo({
        url: '/pages/spare/spare-store-add?spareId=' + that.detailId + '&spareName=' + that.spareName + '&spareNo=' + that.spareNo
      })
    },
    // tab
    change(index) {
      this.current = index
      this.type = index
      this.page = 1
      this.loadMore = true
      this.listData = []
      this.initData()
    },
    // 跳转详情
    handleDetail(id) {
      if (this.maskId != 0) return (this.maskId = 0)
      uni.navigateTo({
        url: '/pages/repair-detail/repair-detail?detailId=' + id
      })
    },
    // 初始化
    initData() {
      const that = this
      that.status = 'loading'
      this.$Http
        .getSpareStorePage({
          spareId: this.detailId,
          pageNum: this.page,
          pageSize: this.limit
        })
        .then(res => {
          const data = res.data.rows
          if (data && data.length > 0 && data.length < that.limit) {
            that.status = 'nomore'
            that.loadMore = false
          } else if (data.length == that.limit) {
            that.status = 'loadmore'
          } else {
            that.status = 'nomore'
          }
          that.listData = [...that.listData, ...data]
        })
    }
  }
}
</script>

<style lang="less">
page {
  background-color: #f4f4f4;
}

.box {
  border-radius: 20rpx;
  padding-right: 0;
}

.edit-box {
  padding: 0 30rpx;
  margin-top: 40rpx;

  .edit {
    padding: 8rpx 24rpx;
    border: 1px solid #ddd;
    border-radius: 20rpx;
    font-size: 26rpx;
    color: #666;
    margin-left: 30rpx;
  }
}
</style>