aiot-app/pages/warehouse/enterHouse/components/ReturnSelect.vue

<template>
  <view class="assets-container">
    <u-popup :show="visible" mode="bottom" @close="visible = false">
      <view class="title">选择资产编号</view>
      <checkbox-group @change="handleCheckChange">
        <view class="list-wrapper">
          <view v-for="(item, index) in tableData" :key="index" class="cell">
            <label>
              <view class="row">
                <view class="col">
                  <text class="label">编码</text
                  ><text class="content">{{ item.assetCode }}</text>
                </view>
                <view class="col">
                  <text class="label">名称</text
                  ><text class="content">{{ item.assetName }}</text>
                </view>
                <view class="col">
                  <text class="label">批次号</text
                  ><text class="content">{{ item.batchNum }}</text>
                </view>
                <view class="col">
                  <text class="label">牌号</text
                  ><text class="content">{{ item.brandNum }}</text>
                </view>
                <view class="col">
                  <text class="label">型号</text
                  ><text class="content">{{ item.modelType }}</text>
                </view>
                <view class="col">
                  <text class="label">最小单元</text
                  ><text class="content"
                    >{{ item.measurementUnit }}{{ item.unit }} /{{
                      item.minPackUnit
                    }}</text
                  >
                </view>
                <view class="col">
                  <text class="label">生产设备编号</text
                  ><text class="content">{{ item.assetRefCode }}</text>
                </view>
                <view class="col">
                  <text class="label">生产日期</text
                  ><text class="content">{{ item.manufactureTime }}</text>
                </view>
              </view>
              <checkbox :value="item.id + ''"></checkbox
            ></label>
          </view>
        </view>
      </checkbox-group>
      <div class="footer">
        <u-button @click="cancel">取消</u-button>
        <u-button type="success" @click="confirm">确认</u-button>
      </div>
    </u-popup>
  </view>
</template>

<script>
import { post, postJ, get, getJ } from '@/utils/api.js'
export default {
  data () {
    return {
      visible: false,
      tableData: [],
      selectList: [],
      callback: null
    }
  },

  methods: {
    open (row, callback) {
      this.visible = true
      this.callback = callback
      this._getAssetLedgerDetail(row)
    },
    confirm () {
      if (!this.selectList?.length) {
        return this.$message.error('选择资产编号')
      }

      this.callback &&
        this.callback(
          this.tableData.filter(item => this.selectList.includes(item.id + ''))
        )
      this.cancel()
    },
    cancel () {
      this.selectList = []
      this.visible = false
    },
    handleCheckChange ({ detail }) {
      this.selectList = detail.value
    },
    async _getAssetLedgerDetail ({
      assetCode,
      assetType,
      measurementUnit,
      minPackUnit,
      unit
    }) {
      this.tableData = []

      console.log('_getAssetLedgerDetail', {
        assetCode,
        assetType,
        measurementUnit,
        minPackUnit,
        unit
      })
      const res = await get(
        this.apiUrl + '/outInWarehouse/select/getAssetLedgerDetail',
        {
          assetCode,
          assetType,
          measurementUnit,
          minPackUnit,
          unit
        }
      )
      if (res?.success) {
        this.tableData = res.data
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  font-size: 30rpx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20rpx;
  padding: 10rpx 0;
  background-color: $j-primary-border-green;
  color: #fff;
}
.list-wrapper {
  height: 60vh;
  overflow: auto;
  .cell {
    position: relative;

    checkbox {
      position: absolute;
      bottom: 10rpx;
      right: 10rpx;
    }
  }
  .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    border-bottom: 1rpx solid #ccc;
    padding-bottom: 30rpx;
    margin-bottom: 20rpx;
    .col {
      width: 50%;
      font-size: 28rpx;
      margin-bottom: 10rpx;
      color: grey;
      display: flex;
      .label {
        display: inline-block;
        width: 160rpx;
        text-align: right;
        margin-right: 20rpx;
      }
      .content {
        flex: 1;
      }
    }
  }
}

.footer {
  display: flex;
  justify-content: space-between;

  /deep/uni-button {
    border: none !important;
    border-radius: 0 !important;
  }
}
</style>