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

<template>
  <uni-popup ref="popup" background-color="#fff" :is-mask-click="false">
    <view class="container">
      <view class="tools-box">
        <uni-easyinput
          prefixIcon="search"
          v-model="searchVal"
          placeholder="编码、名称"
        ></uni-easyinput>
        <view class="all" v-if="!type || type == 'input'">
          <view>已选 {{ selectionList.length }}/{{ tableData.length }} 项</view>
          <text @click="checkAll = !checkAll" class="text-primary">全选</text>
        </view>
      </view>
      <view class="list-container">
        <checkbox-group @change="checkboxChange">
          <view
            class="assets-cell"
            v-for="(item, index) in showList"
            :key="index"
          >
            <label>
              <view class="title"
                >{{ item.assetName }} <text>{{ item.onlyCode }}</text></view
              >
              <view class="col">
                <text
                  ><text class="label">批次号</text> {{ item.batchNo }}</text
                >
                <text><text class="label">包装编码</text>{{ item.num }}</text>
              </view>
              <view class="col" v-if="!row.isUnpack">
                <text
                  ><text class="label">最小包装单元</text
                  >{{
                    `${item.measurementUnit || ''}${item.unit}/${
                      item.minPackUnit
                    }`
                  }}</text
                >
                <text><text class="label">入库天数</text>{{ item.day }}</text>
              </view>
              <view class="col">
                <text
                  ><text class="label">{{
                    item.manufactureTime ? '生产日期' : '采购日期'
                  }}</text
                  >{{ item.manufactureTime || item.procurementTime }}</text
                >
              </view>
              <view class="col">
                <text
                  ><text class="label">过期日期</text
                  >{{ item.expirationTime }}</text
                >
              </view>
              <checkbox
                :key="forceUpdate"
                :value="item.id + ''"
                :checked="item.checked || !!item.disabled"
                :disabled="!!item.disabled"
                v-if="type != 'detail'"
              ></checkbox>
            </label>
          </view>
        </checkbox-group>
      </view>
    </view>
    <view class="footer">
      <u-button
        size="large"
        type="success"
        @click="confirm"
        v-if="type != 'detail'"
        >确认添加</u-button
      >
      <u-button size="large" @click="cancel">返回</u-button>
    </view>
  </uni-popup>
</template>

<script>
import { tableHeader } from '../../common'
import { get } from '@/utils/api.js'
export default {
  props: {
    // 新增 or 反显
    type: {
      type: String,
      default: '' //新增
    },
    assetsList: {
      type: Array,
      default: () => []
    },
    preAssetsList: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      tableHeader,
      searchVal: '',
      tableData: [],
      selectionList: [],
      cargoSpace: '',
      row: {},
      callback: null,
      forceUpdate: true
    }
  },
  computed: {
    checkAll: {
      get () {
        return (
          this.selectionList.length &&
          this.selectionList.length == this.showList.length
        )
      },
      set (val) {
        if (val) {
          this.selectionList = this.showList.map(item => item.id + '')
          this.showList.map(item => (item.checked = true))
        } else {
          this.selectionList = []
          this.showList.map(item => (item.checked = false))
        }

        this.forceUpdate = !this.forceUpdate
      }
    },
    showList () {
      if (this.searchVal) {
        return this.tableData.filter(
          ({ assetName, onlyCode, assetCode, batchNo }) => {
            return (
              String(assetName).indexOf(this.searchVal) != -1 ||
              String(onlyCode).indexOf(this.searchVal) != -1
            )
          }
        )
      }
      return this.tableData
    }
  },
  methods: {
    async open (row, cargoSpaceId, callback) {
      this.row = row
      this.callback = callback
      this.$refs.popup.open('right')
      const disabledDetailReqList = [
        ...(this.preAssetsList.find(i => i.curId == row.curId)?.detailReqList ||
          []),
        ...(this.assetsList.find(i => i.curId == row.curId)?.detailReqList ||
          [])
      ]
      if (!this.type) {
        const res = await get(
          this.apiUrl + '/conventionalStockTransfer/warehouse/getGoodsSingle',
          {
            assetCode: row.assetCode,
            assetType: row.assetType,
            cargoSpaceId: cargoSpaceId
          }
        )
        if (res?.success) {
          this.tableData = res.data
            .map(i => {
              i.checked = false
              i.batchNo = i.batchNum

              const obj = (this.row.detailReqList || []).find(
                itm => itm.id == i.id
              )
              if (obj) {
                i.checked = true
                this.selectionList.push(i.id + '')
              }

              if (disabledDetailReqList.find(p => p.onlyCode == i.onlyCode)) {
                i.checked = false
                i.disabled = true
              }
              return i
            })
            .filter(item => !item.disabled)
        }
      } else {
        // 反显
        const reList =
          this.type == 'output' ? 'curDetailReqList' : 'detailReqList' //反显列表

        console.log(this.row[reList], 'this.row')
        this.tableData = uni.$u.deepClone(this.row[reList])

        this.tableData.forEach(itm => {
          if (itm.checked) {
            this.selectionList.push(itm.id + '')
          }
        })
      }
    },
    checkboxChange (val) {
      this.selectionList = val.detail.value
    },
    confirm () {
      let selection = this.tableData.map(item => {
        item.checked = this.selectionList.includes(item.id + '')
        return item
      })
      if (this.type !== 'output') {
        selection = this.tableData.filter(item => item.checked)
      }
      this.callback && this.callback(selection)
      this.cancel()
    },
    cancel () {
      this.tableData = []
      this.selectionList = []
      this.$refs.popup.close()
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 100vw;
  padding: 88rpx + $tab-height 10rpx 0; //安全高度
  box-sizing: border-box;
  background-color: $page-bg;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.tools-box {
  margin-bottom: 20rpx;
}

.all {
  display: flex;
  justify-content: flex-end;
  padding: 10rpx;
  padding-right: 30rpx;
  text {
    margin-left: 40rpx;
  }
}
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
.list-container {
  flex: 1;
  box-sizing: border-box;
  padding-bottom: 220rpx;
  overflow: auto;
}
.assets-cell {
  padding: 10rpx;
  font-size: 28rpx;
  position: relative;
  background-color: #fff;
  margin-bottom: 30rpx;
  color: #7f7f7f;
  .title {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    font-size: 32rpx;
    color: #555;
    margin-bottom: 10rpx;
  }

  .col {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8rpx;
    text {
      flex: 1;
    }

    .label {
      margin-right: 40rpx;
    }
  }
  uni-checkbox {
    position: absolute;
    right: 0;
    bottom: 10rpx;
  }
}
</style>