aiot-app/pages/warehouse/inventoryAllocation copy/components/PreInventory.vue

<template>
  <uni-popup ref="popup" background-color="#fff" :is-mask-click="false">
    <view class="pre-container">
      <view class="title">货位：{{ title }}1</view>
      <view class="list-wrapper">
        <view class="kd-row" v-for="(item, index) in list" :key="index">
          <view class="kd-col">
            <text class="title">{{ item.assetName }}</text>
            <text
              >当前货位 ：{{
                `${item.outWarehouseAreaName}-${item.outWarehouseAreaGoodsCode}-${item.outGoodsAllocationCode}`
              }}</text
            >
          </view>
          <view class="kd-col">物品编码：{{ item.assetCode }}</view>
          <view class="kd-col" v-if="!item.isUnpack"
            >最小包装单元：{{
              `${item.measurementUnit || ''}${item.unit}/${item.minPackUnit}`
            }}</view
          >
          <view class="kd-col">
            <text
              class="col-items"
              v-for="(itm, index) in tableHeader(item.assetType)"
              :key="index"
            >
              {{ itm.label }}：
              <template v-if="itm.formatter">{{
                itm.formatter(item)
              }}</template>
              <template v-else>{{ item[itm.prop] }}</template></text
            >
            <text class="col-items"
              >待调出数量：{{ item.amount
              }}{{ item.isUnpack ? item.unit : item.minPackUnit }}</text
            >
            <text class="col-items"
              >选中数量:{{
                item.takeStockPattern
                  ? item.curAmount
                  : item.curDetailReqList &&
                    item.curDetailReqList.filter(i => i.checked).length
              }}</text
            >
          </view>
          <view class="delete-box text-danger" @click="handleDel(index)">
            移除
          </view>
        </view>
      </view>
      <view class="footer">
        <u-button size="large" type="success" @click="confirm"
          >确认调入</u-button
        >
        <u-button size="large" @click="cancel">取消</u-button>
      </view>
    </view>
  </uni-popup>
</template>

<script>
import { tableHeader } from '../../common'
export default {
  data () {
    return {
      list: [],
      resolve: null,
      reject: null,
      title: ''
    }
  },
  methods: {
    tableHeader,
    open (list, warehouse) {
      this.list = uni.$u.deepClone(
        list.filter(item => {
          return (
            (item.takeStockPattern && item.curAmount > 0) ||
            (!item.takeStockPattern &&
              item.curDetailReqList.filter(p => p.checked)?.length)
          )
        })
      )
      this.title = `${warehouse.areaName}-${warehouse.shelfCode}-${warehouse.cargoSpaceCode}`
      this.$refs.popup.open('right')

      return new Promise((res, rej) => {
        this.resolve = res
        this.reject = rej
      })
    },
    handleDel (index) {
      uni.showModal({
        title: '提示',
        content: '是否移除当前调拨物品',
        success: res => {
          if (res.confirm) {
            this.list.splice(index, 1)
          }
        }
      })
    },
    confirm () {
      if (!this.list.length) {
        return uni.showToast({
          title: '无调拨数据！',
          icon: 'none'
        })
      }
      this.resolve && this.resolve()
      this.$refs.popup.close()
    },
    cancel () {
      this.reject && this.reject()
      this.$refs.popup.close()
    }
  }
}
</script>

<style lang="scss" scoped>
.pre-container {
  width: 100vw;
  height: 100vh;
  background-color: $page-bg;
  display: flex;
  flex-direction: column;
}
.list-wrapper {
  padding: 20rpx 20rpx 220rpx;
  overflow: auto;
  flex: 1;
  .delete-box {
    border-top: 1rpx solid #ccc;
    text-align: right;
    font-size: 32rpx;
    padding: 10rpx;
  }
}

.title {
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  background: #fff;
}
.kd-row {
  font-size: 28rpx;
  padding: 14rpx 12rpx 6rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
  .kd-col {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 2rpx;
    color: #aaaaaa;
    margin-bottom: 8rpx;

    .col-items {
      width: 50%;
    }

    .status {
      background-color: $page-bg;
      display: inline-block;
      padding: 4rpx 10rpx;
      border-radius: 18rpx;
    }
  }
  .title {
    font-weight: bold;
    color: #333333;
  }
}

.center {
  text-align: center;
  margin-bottom: 10rpx;
  color: #999;
}
.no_data {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #999;
  font-size: 28rpx;
}

.warehouse {
  display: flex;
  align-items: center;
}

.arrow {
  display: inline-block;
  position: relative;
  width: 50rpx;
  height: 10rpx;
  margin: 0 20rpx;
  &::after,
  &::before {
    content: '';
    position: absolute;
  }
  &::after {
    border-top: 4rpx solid #aaaaaa;
    border-right: 4rpx solid #aaaaaa;
    width: 12rpx;
    height: 12rpx;
    right: 0rpx;
    top: -6rpx;
    transform: rotate(45deg);
  }
  &::before {
    height: 4rpx;
    background-color: #aaaaaa;
    width: 50rpx;
  }
}

.num-box {
  display: flex;
  color: #aaaaaa;
  justify-content: space-between;
  .num {
    margin-bottom: 5rpx;
    display: inline-block;
    border: 1rpx solid $j-primary-green;
    padding: 8rpx 20rpx;
    border-radius: 10rpx;
  }
}
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
</style>