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

<template>
  <view class="kd-row">
    <checkbox-group @change="handleChange">
      <label>
        <view class="kd-col">
          <text class="title"
            >{{ item.assetName }}（{{ item.assetCode }}）</text
          >

          <uni-icons
            class="shanchu"
            v-if="type == 'output'"
            custom-prefix="iconfont"
            type="icon-shanchu"
            size="24"
            @click="deleteItem"
            color="#fa3534"
          ></uni-icons>
          <text v-if="type == 'input' || isApproval"
            >数量：{{ item.amount }}{{ curUnit }}</text
          >
        </view>

        <view class="kd-col" v-if="type === 'output'">
          <text
            >货位 ：{{
              `${item.outWarehouseAreaName}-${item.outWarehouseAreaGoodsCode}-${item.outGoodsAllocationCode}`
            }}</text
          >
        </view>
        <view class="kd-col">
          <text class="col-items">
            类型：{{ getDictValue('物品类型', item.assetType) }}
          </text>
          <text
            class="col-items"
            v-for="(itm, index) in tableHeader"
            :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.measurementUnit }}{{ item.unit }}/{{
              item.minPackUnit
            }}</text
          > -->
          <!-- <text class="col-items">编号：{{ item.num }}</text> -->
        </view>
        <template v-if="type === 'input' || type == 'detail'">
          <view class="kd-col">
            当前货位 ：{{
              `${item.outWarehouseAreaName}-${item.outWarehouseAreaGoodsCode}-${item.outGoodsAllocationCode}`
            }}
          </view>
          <view class="kd-col">
            调入货位 ：{{
              `${item.inWarehouseAreaName}-${item.inWarehouseAreaGoodsCode}-${item.inGoodsAllocationCode}`
            }}
          </view>
          <view style="text-align: right" v-if="type != 'detail'">
            <checkbox :checked="item.inputChecked"
          /></view>
        </template>
        <view class="num-box" v-if="type == 'output'">
          <view>待调出数量：{{ item.amount }}{{ curUnit }}</view>
          <view class="num-common">
            <view>选中数量</view>
            <u-number-box
              v-if="item.takeStockPattern"
              v-model="item.curAmount"
              :disabled="type == 'detail'"
              :min="0"
              :max="+item.amount"
            ></u-number-box>
            <text class="text-primary num" @click="handleDetail(item)" v-else>{{
              (item.curDetailReqList &&
                item.curDetailReqList.filter(i => i.checked).length) ||
              '选择'
            }}</text>
          </view>
        </view>
        <!-- <checkbox v-if="type == 'output'" :checked="item.checked" /> -->
        <view
          class="num-common"
          v-if="!type || type == 'detail'"
          style="color: #aaaaaa"
        >
          <template v-if="type == 'detail'">
            <template v-if="isApproval">
              <text class="text-primary num" @click="handleDetail(item)"
                >明细</text
              >
            </template>

            <template v-else>
              已选数量
              <text
                class="text-primary num"
                v-if="item.takeStockPattern"
                @click="handleDetail(item)"
                >{{ item.amount }}{{ curUnit }}</text
              >
              <text class="text-primary num" @click="handleDetail(item)" v-else
                >{{
                  (item.detailReqList &&
                    item.detailReqList.filter(
                      i => i.checked || type == 'detail'
                    ).length) ||
                  0
                }}{{ curUnit }}</text
              >
            </template>
          </template>
          <template v-else>
            '选中数量'
            <u-number-box
              v-if="item.takeStockPattern"
              v-model="item.amount"
              :min="0"
              :max="+item.max"
            ></u-number-box>
            <text class="text-primary num" @click="handleDetail(item)" v-else>{{
              (item.detailReqList &&
                item.detailReqList.filter(i => i.checked || type == 'detail')
                  .length) ||
              '选择'
            }}</text>
          </template>
        </view>
      </label>
    </checkbox-group>
    <DetailDialog ref="detailRef" :type="type" />
  </view>
</template>

<script>
import { tableHeader } from '../../common'
import DetailDialog from './DetailDialog'
import { mapActions, mapGetters } from 'vuex'
export default {
  components: { DetailDialog },
  props: {
    item: {
      type: Object,
      default: () => ({})
    },
    isApproval: {
      type: Boolean,
      default: false
    },
    type: String
  },
  data () {
    return {}
  },
  computed: {
    ...mapGetters(['getDictValue']),
    tableHeader () {
      return tableHeader(this.item.assetType)
    },
    curUnit () {
      return this.item.isUnpack
        ? this.item.unit ||
            (this.item.detailReqList &&
              this.item.detailReqList[0] &&
              this.item.detailReqList[0].unit)
        : this.item.minPackUnit ||
            (this.item.detailReqList &&
              this.item.detailReqList[0] &&
              this.item.detailReqList[0].minPackUnit)
    }
  },
  created () {
    this.requestDict('物品类型')
  },
  methods: {
    ...mapActions('dict', ['requestDict']),
    deleteItem () {
      this.$emit('deleteItem')
    },
    handleChange (e) {
      if (this.type === 'input') {
        this.item.inputChecked = !!e.detail.value.length
      } else {
        this.$set(this.item, 'checked', !!e.detail.value.length)
      }
    },
    goDetail ({ id }) {
      // uni.navigateTo({
      //   url: `/pages/warehouse/enterHouse/details?&id=${id}`
      // })
    },
    handleDetail (item) {
      if (this.type === 'detail' && !item.detailReqList?.length) {
        return
      }

      this.$refs.detailRef.open(item, this.cargoSpaceId, res => {
        if (this.type === 'output') {
          this.$set(item, 'curDetailReqList', res)
        } else {
          this.$set(
            item,
            'detailReqList',
            res.filter(i => i.checked)
          )
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.kd-row {
  font-size: 28rpx;
  padding: 14rpx 12rpx 6rpx;
  border-bottom: 1rpx solid $page-bg;
  .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;
  }
  /deep/.u-number-box {
    align-items: stretch;
    height: 60rpx;

    .u-number-box__input {
      width: 80rpx !important;
      height: auto !important;
    }
    .u-number-box__minus,
    .u-number-box__plus {
      height: auto !important;
    }
  }
}

.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;
}

.num-common {
  display: flex;
  // justify-content: flex-end;
  flex-direction: column;
  align-items: flex-end;
}
</style>