aiot-app/pages/warehouse/outHouse/bucketSelect.vue

<template>
  <view class="mainBox">
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="选择出库明细"
      @clickLeft="backAdd"
    >
      <template slot="right">
        <uni-icons
          type="search"
          size="30"
          @click.native="openSearch"
        ></uni-icons>
      </template>
    </uni-nav-bar>
    <u-collapse>
      <u-collapse-item title="基本信息" name="Docs guide">
        <CellInfo label="物品编码" :value="infoData.assetCode"></CellInfo>
        <CellInfo label="物品名称" :value="infoData.assetName"></CellInfo>
        <CellInfo
          v-for="(item, index) in tableHeader"
          :key="index"
          :label="item.label"
          :value="infoData[item.prop]"
        ></CellInfo>
        <CellInfo
          label="总库存量"
          :value="infoData.realInventoryNum"
        ></CellInfo>
        <!-- <CellInfo
          label="总包装数量"
          :value="infoData.realPacketNum"
        ></CellInfo> -->
      </u-collapse-item>
    </u-collapse>
    <view class="self-table-header">
      <view class="table-code">编码</view>
      <view class="table-batch">批次号</view>
    </view>
    <view class="listContent">
      <checkbox-group @change="handleChange">
        <view class="listBox" v-for="(item, index) in listData" :key="index">
          <label>
            <view class="self-table-tr">
              <view class="table-code">{{ item.onlyCode }}</view>
              <view class="table-batch">{{ item.batchNum }}</view>
              <view class="table-date"></view>
              <view class="other-info">
                <view>包装编码：{{ item.num }}</view>
                <view v-if="!infoData.isUnpack"
                  >最小包装单元：{{ item.measurementUnit }}{{ item.unit }}/{{
                    item.minPackUnit
                  }}</view
                >
                <view v-if="item.manufactureTime || item.procurementTime"
                  >{{ item.procurementTime ? '采购日期' : '生产日期' }}：{{
                    item.manufactureTime || item.procurementTime
                  }}</view
                >

                <view style="width: 100%"
                  >货位：{{ item.warehouseName }}-{{ item.areaName }}-{{
                    item.shelfCode
                  }}-{{ item.cargoSpaceCode }}</view
                >
                <view style="width: 100%">入库时间：{{ item.createTime }}</view>
              </view>
              <view class="checked">
                <checkbox
                  :value="item.onlyCode"
                  :checked="selectList.includes(item.onlyCode)"
                ></checkbox>
              </view>
            </view>
          </label>
        </view>
      </checkbox-group>
      <u-empty style="margin-top: 20vh" v-if="!listData.length" />
    </view>

    <view class="content-footer">
      <view class="op-tool">
        {{ selectList.length }}/{{ listData.length }}已选<text
          class="select-all text-primary"
          @click="selectAll = !selectAll"
          >全选</text
        >
        <template v-if="infoData.takeStockPattern == 1">
          <text class="text-primary" @click="openBatch">批量出库</text>
        </template>
      </view>
      <div v-if="infoData.sparePartsNum || infoData.sparePartsNum === 0">
        申领数量：{{ infoData.sparePartsNum }}
      </div>
      <u-button
        type="success"
        size="small"
        class="u-reset-button"
        :disabled="!selectList.length"
        @click="jumpAdd"
      >
        <view class="selBtn"> 提交 </view>
      </u-button>
    </view>

    <!-- 搜索组件 -->
    <u-popup :show="searchVisible" mode="right" @close="searchVisible = false">
      <view class="search-container">
        <view class="title">筛选</view>
        <uni-forms
          label-width="400rpx"
          ref="customForm"
          :modelValue="popupInfo"
          label-position="top"
        >
          <uni-forms-item label="货位" name="cargoSpaceCode">
            <uni-easyinput
              v-model="popupInfo.cargoSpaceCode"
              :inputBorder="false"
              placeholder="请输入"
            />
          </uni-forms-item>
          <uni-forms-item
            :label="`${getDictValue('物品类型', +assetType)}编码`"
            name="onlyCode"
          >
            <uni-easyinput
              v-model="popupInfo.onlyCode"
              :inputBorder="false"
              placeholder="请输入"
            />
          </uni-forms-item>
          <uni-forms-item label="批次号" name="batchNum">
            <uni-easyinput
              v-model="popupInfo.batchNum"
              :inputBorder="false"
              placeholder="请输入"
            />
          </uni-forms-item>
          <uni-forms-item label="包装编码" name="num">
            <uni-easyinput
              v-model="popupInfo.num"
              :inputBorder="false"
              placeholder="请输入"
            />
          </uni-forms-item>
          <uni-forms-item label="生产日期" name="range">
            <view class="time-wrapper">
              <uni-datetime-picker
                v-model="popupInfo.range"
                :border="false"
                :icon="false"
                type="daterange"
              />
            </view>
          </uni-forms-item>
          <uni-forms-item label="采购日期" name="productTime">
            <view class="time-wrapper">
              <uni-datetime-picker
                v-model="popupInfo.productTime"
                :border="false"
                :icon="false"
                type="daterange"
              />
            </view>
          </uni-forms-item>
        </uni-forms>
        <view class="footer">
          <view class="btn reset" @click="handleReset"> 重置 </view>
          <view class="btn search" @click="handleSearch"> 搜索 </view>
        </view>
      </view>
    </u-popup>

    <u-popup :show="batchVisible" mode="center" @close="batchVisible = false">
      <view class="search-container">
        <view class="title">批量选择</view>
        <view class="batch-box">
          <uni-number-box
            :key="forceUpdate"
            :min="0"
            v-model="multipleNum"
            :max="listData.length"
          ></uni-number-box>
        </view>
        <view class="footer">
          <view class="btn reset" @click="batchVisible = false"> 取消 </view>
          <view class="btn search" @click="batchConfirm"> 确定 </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import CellInfo from '@/components/CellInfo.vue'
import { post, postJ, get } from '@/utils/api.js'
import { tableHeader } from '../common'
import dictMixins from '@/mixins/dictMixins'
// let [page, size, isEnd] = [1, 20, true]
export default {
  components: { CellInfo },
  mixins: [dictMixins],
  data () {
    return {
      selectList: [],
      listData: [],
      forceUpdate: false,
      multipleNumUpdate: false,
      searchVisible: false,
      batchVisible: false,
      assetType: '',
      assetCode: '',
      total: 0,
      infoData: {},
      popupInfo: {
        cargoSpaceCode: '',
        range: [],
        productTime: [],
        batchNum: '',
        num: '',
        onlyCode: ''
      },
      multipleNum: 0
    }
  },
  //选择的列表长度
  computed: {
    tableHeader () {
      return tableHeader(this.assetType)
    },
    selectAll: {
      set (val) {
        if (val) {
          this.selectList = this.listData.map(i => i.onlyCode)
        } else {
          this.selectList = []
        }
      },
      get () {
        return (
          this.selectList.length &&
          this.selectList.length == this.listData.length
        )
      }
    }
  },
  onLoad ({ assetCode, assetType }) {
    this.requestDict('物品类型')

    this.assetType = assetType
    this.assetCode = assetCode
    this.handleList(assetCode, assetType)

    this.infoData = uni.getStorageSync('outputInfoData') || {}
    this.selectList = (this.infoData.warehouseLedgerDetails || []).map(
      i => i.onlyCode
    )

    this.multipleNum = 0
  },
  onShow () {},
  //触底刷新
  // onReachBottom: function () {
  //   if (isEnd) {
  //     return
  //   }
  //   // 显示加载图标
  //   uni.showLoading({
  //     title: '数据加载中'
  //   })
  //   //获取更多数据
  //   page++
  //   this.getList()
  // },
  mounted () {},
  methods: {
    // 表格数据
    async handleList () {
      // this.selectList = []
      this.multipleNum = 0
      const params = {
        assetCode: this.assetCode,
        assetType: this.assetType,
        ...this.popupInfo
      }
      if (params.range?.length) {
        params.startTime = params.range[0]
        params.endTime = params.range[1]
      }
      if (params.productTime?.length) {
        params.startProductTime = params.productTime[0]
        params.endProductTime = params.productTime[1]
      }
      delete params.range
      delete params.productTime
      console.log('params--------', params)
      const res = await get(
        this.apiUrl + `/outInWarehouse/getWarehouseActualDetail`,
        params
      )
      if (res?.success) {
        this.listData = res.data
      }
    },
    openBatch () {
      this.multipleNum = 0
      this.batchVisible = true
    },
    batchConfirm () {
      if (!this.multipleNum) {
        uni.showToast({
          title: '请输入大于0的数量',
          icon: 'none'
        })
        return
      }
      this.batchVisible = false

      if (this.selectList.length === this.multipleNum) return

      if (this.selectList.length >= this.multipleNum) {
        this.selectList.splice(this.multipleNum, this.selectList.length)
      } else {
        let rest = this.multipleNum - this.selectList.length

        for (const p of this.listData) {
          if (!this.selectList.includes(p.onlyCode)) {
            this.selectList.push(p.onlyCode)
            rest--
          }

          if (!rest) break
        }
      }

      // this.selectList = this.listData
      //   .slice(0, this.multipleNum)
      //   .map(i => i.onlyCode)
    },
    handleReset () {
      this.popupInfo = {}
      this.handleList()
      this.searchVisible = false
    },
    handleSearch () {
      this.handleList()
      this.searchVisible = false
    },
    handleChange ({ detail }) {
      this.selectList = detail.value

      console.log(detail.value)
    },
    openSearch () {
      this.searchVisible = true
    },
    //跳转回添加页面
    jumpAdd () {
      uni.$emit(
        'bucketSelect',
        this.listData.filter(item => this.selectList.includes(item.onlyCode))
      )
      uni.navigateBack()
    },
    //返回添加页
    backAdd () {
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss" scoped>
.mainBox {
  height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  .u-popup {
    flex: 0;
  }
  .listContent {
    flex: 1;
    overflow: auto;
    padding-bottom: 125rpx;
  }
  .self-table-tr,
  .self-table-header {
    font-size: 28rpx;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .table-date,
    .table-batch,
    .table-code {
      box-sizing: border-box;
      width: 27%;
      padding: 0 5rpx;
      word-break: break-all;
    }
    .table-code {
      width: 50%;
    }
    .table-date {
      width: 37%;
    }

    .other-info {
      color: #aaa;
      width: 100%;
      display: flex;
      justify-content: space-between;
      font-size: 28rpx;
      flex-wrap: wrap;

      > view {
        margin-bottom: 10rpx;
      }
    }

    .checked {
      width: 100%;
      display: flex;
      justify-content: flex-end;
    }
  }

  .self-table-tr {
    border-bottom: 1rpx dashed #ccc;
    padding: 20rpx 10rpx;
  }
  .self-table-header {
    padding: 10rpx;
    border-bottom: 1rpx solid #ccc;
  }

  //底部按钮
  .content-footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 120rpx;
    border-top: 1rpx solid #eeecec;
    background-color: #ffffff;
    z-index: 999;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20rpx;
    box-sizing: border-box;
    .select-all {
      margin-left: 20rpx;
      margin-right: 30rpx;
    }
    .op-tool {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      // /deep/.u-number-box {
      //   align-items: stretch;
      //   height: 60rpx;
      //   margin: 0 15rpx;
      //   .u-number-box__input {
      //     width: 80rpx !important;
      //     height: auto !important;
      //   }
      //   .u-number-box__minus,
      //   .u-number-box__plus {
      //     height: auto !important;
      //   }
      // }
    }
    /deep/.u-button {
      height: 80rpx;
      font-size: 30rpx;
      width: 100rpx;
      margin: 0;
    }
  }
}

.search-container {
  width: 70vw;
  padding: 30rpx 36rpx;
  .batch-box {
    height: 100rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 80rpx;
  }
  .footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    box-shadow: 0 10rpx 30rpx 0 #000;
    .btn {
      width: 50%;
      height: 80rpx;
      border-radius: 0 !important;
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      &.reset {
        color: $j-primary-border-green;
      }
      &.search {
        color: #fff;
        background-color: $j-primary-border-green;
      }
    }
  }
  .title {
    font-weight: bold;
    font-size: 30rpx;
  }
  .status-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    view {
      background-color: rgba(242, 242, 242, 1);
      height: 60rpx;
      border-radius: 30rpx;
      line-height: 60rpx;
      text-align: center;
      width: 160rpx;
      border: 1rpx solid rgba(242, 242, 242, 1);
      &.active {
        color: #157a2c;
        border-color: rgba(21, 122, 44, 1);
      }
    }
  }
  /deep/.uni-date {
    .uni-icons {
      display: none;
    }
    .uni-date-x {
      padding: 0;
      view {
        margin: 0 20rpx;
      }
    }
  }
  /deep/.uni-date__x-input,
  /deep/.uni-easyinput__content-input {
    height: 60rpx;
    border-radius: 30rpx;
    overflow: hidden;
    background-color: rgba(242, 242, 242, 1);
  }
}
</style>