kd-aiot-frontend-wms/src/views/warehouseManagement/inventoryAllocation/components/WareHouseAllocationDailog.vue

<template>
  <el-dialog
    :visible.sync="visible"
    title="选择货位"
    @before-close="cancel"
    width="874px"
  >
    <el-form :model="formData" label-width="100px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="选择仓库">
            {{ formData.warehouse.name }}
          </el-form-item></el-col
        >
        <el-col :span="8">
          <el-form-item label="选择库区">
            <el-select filterable v-model="area">
              <el-option
                v-for="(item, index) in areaList"
                :key="index"
                :label="item.areaCode"
                :value="item.areaId"
                @click.native="() => (formData.area = item)"
              ></el-option>
            </el-select> </el-form-item
        ></el-col>
        <el-col :span="8">
          <el-form-item label="选择货架">
            <el-select filterable v-model="shelves">
              <el-option
                v-for="(item, index) in shelvesList"
                :key="index"
                :label="item.goodsshelvesCode"
                :value="item.goodsshelvesId"
                @click.native="() => (formData.shelves = item)"
              ></el-option>
            </el-select> </el-form-item
        ></el-col>
      </el-row>
    </el-form>
    <div class="status-legend">
      <div
        v-for="(item, index) in warehouseDefinition_locationStatus"
        :key="index"
      >
        <span :style="{ 'background-color': item.color }"></span
        >{{ item.label }}
      </div>
    </div>
    <div class="content-box">
      <div
        v-for="p in locationList"
        :key="p.id"
        class="box"
        @click="handleSelect(p)"
        :style="{
          'background-color': getStatus(p.allocationStatus).color,
          cursor: [1, 2].includes(p.allocationStatus)
            ? 'pointer'
            : 'not-allowed'
        }"
      >
        {{ p.goodsAllocationCode }}
      </div>
      <div class="placeholder-box"></div>
      <div class="placeholder-box"></div>
      <div class="placeholder-box"></div>
      <div class="placeholder-box"></div>
    </div>
    <template slot="footer">
      <el-button @click="cancel">关闭</el-button>
    </template>
    <CargoSpaceInfoDialog
      ref="CargoSpaceInfoRef"
      :assetsList="assetsList"
      :prAssetsList="prAssetsList"
      @success="cargoSpaceInfoConfirm"
    />
  </el-dialog>
</template>

<script>
  // import { getWarehouseChildren } from '@/api/stockManagement/outgoingManagement'
  import { warehouseDefinition_locationStatus } from '@/utils/dict/warehouseDefinition';
  import CargoSpaceInfoDialog from './CargoSpaceInfoDialog.vue';
  import { useDict } from '@/utils/dict/index';
  import { deepClone } from '@/utils/index';
  export default {
    components: {
      CargoSpaceInfoDialog
    },
    props: {
      warehouseObj: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      return {
        warehouseDefinition_locationStatus,
        visible: false,
        value: '',
        row: {},
        formData: {
          warehouse: {
            id: '',
            name: ''
          },
          area: {
            areaId: '',
            areaName: ''
          },
          shelves: {
            goodsshelvesId: '',
            goodsshelvesCode: ''
          }
        },
        warehouse: '',
        area: '',
        shelves: '',
        warehouseList: [],
        inOrOut: '', //调入调出
        assetsList: [], //调出已选
        prAssetsList: [] //预调出已选
      };
    },
    computed: {
      areaList() {
        this.area = '';
        this.shelves = '';
        return (
          this.warehouseList.find((i) => i.id === this.formData.warehouse.id)
            ?.wareHouseArea || []
        );
      },
      shelvesList() {
        this.shelves = '';
        return (
          this.areaList.find((i) => i.areaId === this.area)
            ?.wareHouseGoodsshelves || []
        );
      },
      locationList() {
        return (
          this.shelvesList.find((i) => i.goodsshelvesId === this.shelves)
            ?.wareHouseGoodsAllocation || []
        );
      }
    },
    created() {
      this._getWarehouseChildren();
    },
    methods: {
      getStatus: useDict(warehouseDefinition_locationStatus),
      open(type, warehouse) {
        this.inOrOut = type;
        this.formData.warehouse = warehouse;
        this.visible = true;
      },
      // 选中货位
      handleSelect(p) {
        if (![1, 2].includes(p.allocationStatus)) {
          return;
        }
        const { warehouse, area, shelves } = this.formData;

        const data = {
          warehouseId: warehouse.id,
          warehouseName: warehouse.name,
          areaId: area.areaId,
          areaName: area.areaName,
          shelfId: shelves.goodsshelvesId,
          shelfCode: shelves.goodsshelvesCode,
          cargoSpaceId: p.goodsAllocationId,
          cargoSpaceCode: p.goodsAllocationCode
        };
        if (this.inOrOut === 'output') {
          this.$refs.CargoSpaceInfoRef.open(data);
        } else {
          this.$emit('inputSuccess', data);
          this.cancel();
        }
      },
      // 选中货位上资产
      cargoSpaceInfoConfirm(list) {
        this.$emit('outputSuccess', list);
        this.cancel();
      },
      async _getWarehouseChildren() {
        const res = await getWarehouseChildren();
        if (res?.success) {
          this.warehouseList = res.data;
        }
      },
      cancel() {
        this.row = {};
        this.area = '';
        this.shelves = '';
        this.visible = false;
      }
    }
  };
</script>

<style lang="scss" scoped>
  .status-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 12px 0;
    div {
      margin: 0 12px;
    }
    span {
      display: inline-block;
      width: 13px;
      height: 13px;
      margin: 0 4px;
    }
  }

  .content-box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    max-height: 40vh;
    overflow: auto;
    .box {
      cursor: pointer;
      width: 134px;
      height: 64px;
      background-clip: content-box;
      margin-bottom: 4px;
      line-height: 64px;
      text-align: center;
    }
    .placeholder-box {
      width: 134px;
    }
  }
</style>