rtk-web-wms-cloud/src/views/wms/incoming/productionWarehousing/components/ProductWareHousingPlan.vue

<template>
  <el-dialog
    v-dialogDrag
    title="入库明细"
    :visible.sync="open"
    width="1200px"
    append-to-body
    @open="dialogOpen"
  >
    <el-table v-loading="loading" :data="list" border size="mini">
      <el-table-column label="箱号" align="center" prop="caseNo" width="150" />
      <el-table-column
        label="产品编码"
        align="center"
        prop="productCode"
        width="150"
        show-overflow-tooltip
      />
      <el-table-column
        label="产品名称"
        align="center"
        prop="productName"
        width="120"
        show-overflow-tooltip
      />
      <el-table-column
        label="BOM版本"
        min-width="130"
        align="center"
        prop="mesBomVersion"
      />
      <el-table-column
        label="生产订单"
        align="center"
        prop="workOrderNo"
        show-overflow-tooltip
        width="130"
      />
      <el-table-column label="装箱数量" align="center" prop="inQty" />
      <el-table-column label="计划数量" align="center" prop="planAmount" />
      <el-table-column
        label="打包类型"
        align="center"
        prop="wmsStockLogicName"
      />
      <el-table-column
        label="选择仓库"
        align="center"
        width="150"
        prop="wmsStockName"
      >
        <template slot-scope="scope">
          <StockSelect
            :ref="`stock-${scope.$index}`"
            v-model="scope.row.wmsStockName"
            filterable
            @change="
              ($event) => {
                stockChange($event, scope.$index, scope.row);
              }
            "
          />
        </template>
      </el-table-column>
      <el-table-column
        label="选择区域"
        align="center"
        width="150"
        prop="wmsStoreAreaName"
      >
        <template slot-scope="scope">
          <AreaSelect
            :ref="`area-${scope.$index}`"
            v-model="scope.row.wmsStoreAreaId"
            filterable
            @change="
              ($event) => {
                areaChange($event, scope.$index, scope.row);
              }
            "
          />
        </template>
      </el-table-column>
      <el-table-column
        label="选择货位"
        align="center"
        width="150"
        prop="wmsStockLocationName"
      >
        <template slot-scope="scope">
          <LocationSelect
            :ref="`location-${scope.$index}`"
            v-model="scope.row.wmsStockLocationId"
            filterable
            @change="locationChange($event, scope.row)"
          />
        </template>
      </el-table-column>
      <!-- <el-table-column label="入库类型" align="center" prop="wmsStockLogicId">
        <template slot-scope="scope">
          <IncomingStockType ref="incomingStockType" v-model="scope.row.wmsStockLogicId" />
        </template>
      </el-table-column> -->
    </el-table>

    <div slot="footer" class="dialog-footer">
      <el-button
        v-hasPermi="['wms:incoming-produce-detail:create']"
        type="primary"
        :loading="ensureLoading"
        @click="handleSure"
        >完成入库</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import {
  getIncomingProduceDetailPage,
  createBatchIncomingProduceDetail,
} from "@/api/wms/incoming/production";
import { getProduceStockedPage } from "@/api/wms/inquirePurchase/complexDocuments";
import { deleteIncomingProduceDetail } from "@/api/wms/inquirePurchase/complexDocuments";
import StockSelect from "../../wareHousing/components/StockSelect.vue";
import AreaSelect from "../../wareHousing/components/AreaSelect.vue";
import LocationSelect from "../../wareHousing/components/LocationSelect.vue";

export default {
  name: "ProductWareHousingPlan",
  components: {
    StockSelect,
    AreaSelect,
    LocationSelect,
  },
  props: {
    currentRows: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      ensureLoading: false,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      list: [],
      // 查询参数
      queryParams: {
        pageNo: 1,
        // pageSize: 100,
        // masterId: null,
        // warehousingOrderNo: null,
        // productCode: null,
        // planAmount: null,
        // workOrderNo: null,
        // caseNo: null,
        // inQty: null,
        // stockCode: null,
        // areaCode: null,
        // locationCode: null,
        // createTime: []
      },
    };
  },
  methods: {
    /** 查询列表 */
    getList() {
      // this.list = this.currentRows
      //
      this.loading = true;
      const queryParams = {
        ...this.queryParams,
        storageStatus: 0,
      };
      getIncomingProduceDetailPage(queryParams)
        .then((response) => {
          this.list = response.data.list;
          this.total = response.data.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 完成入库
    handleSure() {
      if (this.list.length <= 0) {
        this.$modal.msgWarning("暂无入库数据，无法入库");
        return;
      }
      const isEmpty = this.list.every(
        (item) =>
          item.wmsStockId &&
          item.wmsStoreAreaId &&
          item.wmsStockLocationId &&
          item.workOrderNo &&
          item.warehousingOrderNo &&
          item.productCode &&
          item.detailErpId
      );
      if (!isEmpty) {
        this.$modal.msgWarning("数据不能为空");
        return;
      }
      this.ensureLoading = true;
      const wareHousingList = this.list.map((item) => {
        const {
          wmsStockId: stockCode,
          wmsStoreAreaId: areaCode,
          wmsStockLocationId: locationCode,
          masterId,
          warehousingOrderNo,
          detailErpId,
          productCode,
          planAmount,
          workOrderNo,
          caseNo,
          inQty,
          wmsStockLogicId,
        } = item;
        return {
          stockCode,
          areaCode,
          locationCode,
          masterId,
          warehousingOrderNo,
          detailErpId,
          productCode,
          planAmount,
          workOrderNo,
          caseNo,
          inQty,
          wmsStockLogicId,
        };
      });
      createBatchIncomingProduceDetail(wareHousingList)
        .then((res) => {
          this.$modal.msgSuccess("入库成功");
          this.open = false;
          this.ensureLoading = false;
          this.$parent.getList();
          this.$emit("complete");
        })
        .finally(() => {
          this.loading = false;
          this.ensureLoading = false;
        });
    },
    stockChange(item, index, row) {
      if (item) {
        const { id } = item;
        row.wmsStockId = id;
        row.wmsStoreAreaName = undefined;
        row.wmsStockLocationName = undefined;
        this.$refs[`area-${index}`].options = [];
        this.$refs[`area-${index}`].fetchAreaList(id);
      }
    },
    areaChange(item, index, row) {
      if (item) {
        const { id } = item;
        row.wmsStoreAreaId = id;
        row.wmsStockLocationName = undefined;
        this.$refs[`location-${index}`].options = [];
        this.$refs[`location-${index}`].fetchLocationList(id);
      }
    },
    locationChange(item, row) {
      row.wmsStockLocationId = item.id;
    },
    dialogOpen() {
      this.$nextTick(() => {
        this.getList();
      });
    },
  },
};
</script>

<style></style>