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

<template>
  <div id="inventoryAllocate">
    <el-card class="box-card">
      <header-title title="基本信息"></header-title>
      <el-form label-width="65px" label-position="left" class="ele-form-search">
        <el-row :gutter="15">
          <el-col :span="8" class="col_height">
            <el-form-item label="调拨编码:" prop="code">
              <template>
                <el-input :disabled="true" v-model="params.code"></el-input>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="col_height">
            <el-form-item label="调拨类型:" prop="warehouseId">
              <template>
                <el-select
                  :disabled="isEdit"
                  @change="allocateChange"
                  style="width: 100%"
                  v-model="allocateId"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in allocationType"
                    :label="item.label"
                    :value="item.code"
                    :key="item.code"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="col_height">
            <el-form-item label="调拨名称:" prop="name">
              <template>
                <el-input
                  :disabled="isEdit"
                  v-model="params.name"
                  placeholder="请输入内容"
                ></el-input>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="productBox">
        <div class="productsList">
          <header-title title="调出明细"></header-title>
          <el-form
            label-position="left"
            class="ele-form-search"
            @keyup.enter.native="search"
            @submit.native.prevent
          >
            <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item
                  label-width="65px"
                  label="所属工厂:"
                  prop="factoryId"
                >
                  <el-select
                    :disabled="isEdit"
                    style="width: 100%"
                    @change="factoryChange"
                    v-model="factoryId"
                    placeholder="请选择工厂"
                  >
                    <el-option
                      v-for="item in factoryList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label-width="65px"
                  label="调出仓库:"
                  prop="warehouseId"
                >
                  <template>
                    <el-select
                      :disabled="isEdit"
                      style="width: 100%"
                      @change="outWarehouseChange"
                      v-model="params.outWarehouseId"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in outTreeList"
                        :disabled="item.hiden"
                        :label="item.name"
                        :value="item.id"
                        :key="item.name"
                      >
                      </el-option>
                    </el-select>
                  </template>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label-width="65px"
                  label="调出库区:"
                  prop="outCargoAreaId"
                >
                  <template>
                    <el-select
                      @change="outCargoAreaChange"
                      style="width: 100%"
                      v-model="params.outCargoAreaId"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in outCargoAreaList"
                        :label="item.name"
                        :value="item.id"
                        :key="item.name"
                      >
                      </el-option>
                    </el-select>
                  </template>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label-width="65px"
                  label="调出货架:"
                  prop="warehouseId"
                >
                  <template>
                    <el-select
                      style="width: 100%"
                      @change="outShelvesChange"
                      v-model="params.outShelvesId"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in outShelvesList"
                        :label="item.name"
                        :value="item.id"
                        :key="item.name"
                      >
                      </el-option>
                    </el-select>
                  </template>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label-width="65px"
                  label="调出货位:"
                  prop="warehouseId"
                >
                  <template>
                    <el-select
                      style="width: 100%"
                      @change="outFreightIdChange"
                      v-model="params.outFreightId"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in outFreightList"
                        :label="item.name"
                        :value="item.id"
                        :key="item.name"
                      >
                      </el-option>
                    </el-select>
                  </template>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="15">
              <el-col :span="18">
                <el-input
                  placeholder="请输入名称/编码/批次号/型号/规格/客户代号/刻码"
                  v-model="query.keyWord"
                  class="input-with-select"
                >
                  <el-button
                    slot="append"
                    icon="el-icon-search"
                    type="primary"
                    @click="querySearch"
                    >搜索</el-button
                  >
                </el-input>
              </el-col>
              <el-col :span="6">
                <div
                  style="
                    display: flex;
                    justify-content: flex-end;
                    margin-bottom: 10px;
                  "
                >
                  <el-button
                    @click="queryReset"
                    icon="el-icon-refresh-left"
                    size="small"
                    type="primary"
                    >重置</el-button
                  >
                  <el-button type="primary" @click="merge">调出</el-button>
                </div>
              </el-col>
            </el-row>
          </el-form>
          <el-table
            ref="table"
            :height="530"
            :data="productList"
            row-key="id"
            @selection-change="selecctedRow"
            tooltip-effect="dark"
            border
          >
            <el-table-column
              fixed="left"
              align="center"
              width="50"
              :reserve-selection="true"
              :selectable="checkSelectable"
              type="selection"
            ></el-table-column>
            <el-table-column label="序号" type="index" width="50">
            </el-table-column>
            <el-table-column
              label="物品编码"
              prop="categoryCode"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="物品名称"
              prop="categoryName"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="仓库"
              prop="warehouseName"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              label="库区"
              prop="areaName"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              label="货架"
              prop="goodsShelfName"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              label="货位"
              prop="goodsAllocationName"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              label="批次号"
              prop="batchNo"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="牌号"
              prop="brandNum"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="型号"
              prop="categoryModel"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="规格"
              prop="specification"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="包装编码"
              prop="packageNo"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="包装数量"
              prop="packingQuantity"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="包装单位"
              prop="packingUnit"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="计量数量"
              prop="measureQuantity"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="计量单位"
              prop="measureUnit"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="重量"
              prop="weight"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              label="重量单位"
              prop="weightUnit"
              :show-overflow-tooltip="true"
            >
            </el-table-column>

            <el-table-column
              label="生产日期"
              prop="productionDate"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              label="采购日期"
              prop="purchaseDate"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              label="发货条码"
              prop="barcodes"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              label="客户代号"
              prop="clientCode"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              label="刻码"
              prop="engrave"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              label="物料代号"
              prop="materielDesignation"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
          </el-table>
          <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            :page-sizes="[10, 20, 50, 100]"
            :page-size.sync="size"
            :current-page.sync="page"
            @current-change="getProductList"
            @size-change="getProductList"
          >
          </el-pagination>
        </div>
        <div class="allocateDetails">
          <header-title :title="`调入明细`"></header-title>
          <el-form
            label-position="left"
            class="ele-form-search"
            @keyup.enter.native="search"
            @submit.native.prevent
          >
            <el-row :gutter="15">
              <el-col :span="12">
                <el-form-item
                  label-width="65px"
                  label="调入仓库:"
                  prop="warehouseId"
                >
                  <template>
                    <el-select
                      :disabled="allocateId == 1 || isEdit"
                      @change="inWarehouseChange"
                      style="width: 100%"
                      v-model="params.inWarehouseId"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in inTreeList"
                        :disabled="item.hiden"
                        :label="item.name"
                        :value="item.id"
                        :key="item.name"
                      >
                      </el-option>
                    </el-select>
                  </template>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label-width="65px"
                  label="调入库区:"
                  prop="outCargoAreaId"
                >
                  <template>
                    <el-select
                      @change="inCargoAreaChange"
                      style="width: 100%"
                      v-model="params.inCargoAreaId"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in inCargoAreaList"
                        :label="item.name"
                        :value="item.id"
                        :key="item.name"
                      >
                      </el-option>
                    </el-select>
                  </template>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label-width="65px"
                  label="调入货架:"
                  prop="warehouseId"
                >
                  <template>
                    <el-select
                      style="width: 100%"
                      @change="inShelvesChange"
                      v-model="params.inShelvesId"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in inShelvesList"
                        :label="item.name"
                        :value="item.id"
                        :key="item.name"
                      >
                      </el-option>
                    </el-select>
                  </template>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label-width="65px"
                  label="调入货位:"
                  prop="warehouseId"
                >
                  <template>
                    <el-select
                      style="width: 100%"
                      @change="inFreightIdChange"
                      v-model="params.inFreightId"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in inFreightList"
                        :label="item.name"
                        :value="item.id"
                        :key="item.name"
                      >
                      </el-option>
                    </el-select>
                  </template>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-table
            ref="detailTable"
            :data="tableData"
            :height="575"
            tooltip-effect="dark"
            border
          >
            <el-table-column label="序号" type="index" width="50">
            </el-table-column>
            <el-table-column
              label="物品编码"
              prop="categoryCode"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="物品名称"
              prop="categoryName"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="调出区域"
              width="200"
              prop="outWarehouseArea"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              label="调入区域"
              width="200"
              prop="inWarehouseArea"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              label="牌号"
              prop="brandNum"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="型号"
              prop="categoryModel"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="规格"
              prop="specification"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="包装编码"
              prop="packageNo"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="包装数量"
              prop="packingQuantity"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="包装单位"
              prop="packingUnit"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="计量数量"
              prop="measureQuantity"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="计量单位"
              prop="measureUnit"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="重量"
              prop="weight"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              label="重量单位"
              prop="weightUnit"
              :show-overflow-tooltip="true"
            >
            </el-table-column>

            <el-table-column label="操作" width="100" fixed="right">
              <template slot-scope="{ row, $index }">
                <el-button
                  @click="deleted(row, $index)"
                  type="text"
                  size="small"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div class="submit_item">
            <el-button type="primary" @click="submit(0)">保存</el-button
            ><el-button type="primary" @click="config">提交</el-button></div
          >
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
  import storageApi from '@/api/warehouseManagement/index.js';
  import { getCode } from '@/api/codeManagement/index.js';
  import { allocationType } from '@/utils/dict/warehouse';
  import { getWarehouseList } from '@/api/classifyManage/itemInformation';
  import warehouseDefinition from '@/api/warehouseManagement/warehouseDefinition';
  export default {
    data() {
      return {
        query: {},
        allocationType,
        outTreeList: [],
        inTreeList: [],
        selectionIds: [],
        selection: [],
        tableData: [],
        productList: [],
        allocateId: 1,
        currentPullAreaId: '',
        currentPullAreaName: '',
        currentTuneAreaId: '',
        currentTuneAreaName: '',
        pullLibrary: [], // 调出库
        tuneLibrary: [], // 调入库
        outWarehouseList: [],
        inWarehouseList: [],
        params: {
          code: '',
          name: '',
          outWarehouseId: '', // 调出仓库
          outWarehouseName: '',
          outCargoAreaId: '', // 调出库区
          outCargoAreaName: '',
          outShelvesId: '', // 调出货架
          outShelvesName: '',
          outFreightId: '', // 调出货位
          outFreightName: '',
          inWarehouseId: '', // 调入仓库
          inWarehouseName: '',
          inCargoAreaId: '', // 调入库区
          inCargoAreaName: '',
          inShelvesId: '', // 调入货架
          inShelvesName: '',
          inFreightId: '', // 调入货位
          inFreightName: ''
        },
        outCargoAreaList: [], // 调出库区列表
        outShelvesList: [], // 调出货架列表
        outFreightList: [], // 调出货位列表
        inCargoAreaList: [], // 调入库区列表
        inShelvesList: [], // 调入货架列表
        inFreightList: [], // 调入货位列表
        treeLoading: false,
        currentObj: {},
        factoryList: [],
        isEdit: false,
        factoryId: '', // 工厂ID
        transferOrderId: '', // 调拨单ID
        page: 1,
        size: 20,
        total: 0
      };
    },
    async created() {
      const code = await getCode('transfer_no');
      this.params.code = code;
      // this.getTreeData();
      this.getFactoryList();
      if (this.$route.query.isEdit) {
        this.isEdit = true;
        this.getEditInfo();
      }
    },
    watch: {
      productList() {
        this.doLayout();
      }
    },
    methods: {
      doLayout() {
        let that = this;
        this.$nextTick(() => {
          console.log('操作了！！');
          console.log('that.$refs.table------', that.$refs.table);
          that.$refs.table.doLayout();
        });
      },
      async getEditInfo() {
        const dataList = await storageApi.getAllotDetailList({
          applyId: this.$route.query.id
        });
        const baseInfo = await storageApi.getAllotDetail(this.$route.query.id);
        // 初始化基础数据
        this.factoryId = baseInfo.factoriesId;
        this.allocateId = baseInfo.type;
        this.transferOrderId = baseInfo.id;
        await this.getTreeData(); // 初始仓库
        this.params = {
          code: baseInfo.allotCode,
          name: baseInfo.name,
          outWarehouseId: baseInfo.sourceWarehouseId, // 调出仓库
          outWarehouseName: baseInfo.sourceWarehouse,
          outCargoAreaId: '', // 调出库区
          outCargoAreaName: '',
          outShelvesId: '', // 调出货架
          outShelvesName: '',
          outFreightId: '', // 调出货位
          outFreightName: '',
          inWarehouseId: baseInfo.targetWarehouseId, // 调入仓库
          inWarehouseName: baseInfo.targetWarehouse,
          inCargoAreaId: '', // 调入库区
          inCargoAreaName: '',
          inShelvesId: '', // 调入货架
          inShelvesName: '',
          inFreightId: '', // 调入货位
          inFreightName: ''
        };
        if (this.allocateId == 1) {
          // 库内调拨
          await this.outWarehouseChange(baseInfo.sourceWarehouseId); // 加载调出库区
        } else {
          // 库外调拨
          await this.outWarehouseChange(baseInfo.sourceWarehouseId); // 加载调出库区
          this.inWarehouseChange(baseInfo.targetWarehouseId); // 加载调入库区
        }
        // 处理右边显示数据
        this.selectionIds = dataList.map((item) => item.outInDetailRecordId);
        this.selection = this.productList.filter((item) => {
          return this.selectionIds.includes(item.id);
        });
        this.selection.forEach((item) => {
          this.$refs.table.toggleRowSelection(item);
        });
        console.log('this.selection------', this.selection);
        this.tableData = this.selection.map((item, index) => {
          let filterObj = dataList.filter(
            (ite) => ite.outInDetailRecordId == item.id
          )[0];
          console.log('filterObj---', filterObj);
          return {
            ...item,
            warehouseId: filterObj.warehouseId,
            warehouseName: filterObj.warehouseName,
            areaId: filterObj.areaId,
            areaName: filterObj.areaName,
            goodsAllocationId: filterObj.goodsAllocationId,
            goodsAllocationName: filterObj.goodsAllocationName,
            goodsShelfId: filterObj.goodsShelfId,
            goodsShelfName: filterObj.goodsShelfName,
            targetAreaId: filterObj.targetAreaId,
            targetAreaName: filterObj.targetAreaName,
            targetGoodsAllocationId: filterObj.targetGoodsAllocationId,
            targetGoodsAllocationName: filterObj.targetGoodsAllocationName,
            targetGoodsShelfId: filterObj.targetGoodsShelfId,
            targetGoodsShelfName: filterObj.targetGoodsShelfName,
            targetWarehouseId: filterObj.targetWarehouseId,
            targetWarehouseName: filterObj.targetWarehouseName,
            outWarehouseArea:
              filterObj.warehouseName +
              (filterObj.areaName ? '-' + filterObj.areaName : '') +
              (filterObj.goodsShelfName ? '-' + filterObj.goodsShelfName : '') +
              (filterObj.goodsAllocationName
                ? '-' + filterObj.goodsAllocationName
                : ''),
            inWarehouseArea:
              filterObj.targetWarehouseName +
              (filterObj.targetAreaName ? '-' + filterObj.targetAreaName : '') +
              (filterObj.targetGoodsShelfName
                ? '-' + filterObj.targetGoodsShelfName
                : '') +
              (filterObj.targetGoodsAllocationName
                ? '-' + filterObj.targetGoodsAllocationName
                : '')
          };
        });
        console.log('this.tableData--------!!!!!', this.tableData);
        console.log(dataList);
        console.log(baseInfo);
      },
      factoryChange() {
        this.reset();
        this.getTreeData();
      },
      search() {
        if (this.allocateId == 1) {
          // 库内调拨
          if (this.params.inFreightId && this.params.outFreightId) {
            if (this.params.inFreightId === this.params.outFreightId) {
              this.productList = [];
              return this.$message.error('调入货位不能与调出货位相同');
            }
          } else if (!this.params.inFreightId && !this.params.outFreightId) {
            if (this.params.inShelvesId && this.params.outShelvesId) {
              if (this.params.inShelvesId === this.params.outShelvesId) {
                this.productList = [];
                return this.$message.error('调入货架不能与调出货架相同');
              }
            } else if (!this.params.inShelvesId && !this.params.outShelvesId) {
              if (this.params.inCargoAreaId && this.params.outCargoAreaId) {
                if (this.params.inCargoAreaId === this.params.outCargoAreaId) {
                  this.productList = [];
                  return this.$message.error('调入库区不能与调出库区相同');
                }
              } else if (
                !this.params.inCargoAreaId &&
                !this.params.outCargoAreaId
              ) {
                this.productList = [];
                return this.$message.error('调入库区与调出库区不能为空');
              } else {
                this.productList = [];
                return this.$message.error('调入库区与调出库区必须同时填写');
              }
            } else {
              this.productList = [];
              return this.$message.error('调入货架与调出货架必须同时填写');
            }
          } else {
            this.productList = [];
            return this.$message.error('调入货位与调出货位必须同时填写');
          }
          this.getProductList();
        } else {
          // 库外调拨
          if (!this.params.inFreightId && !this.params.outFreightId) {
            if (!this.params.inShelvesId && !this.params.outShelvesId) {
              if (!this.params.inCargoAreaId && !this.params.outCargoAreaId) {
                this.productList = [];
                return this.$message.error('调入库区与调出库区不能为空');
              } else if (
                this.params.inCargoAreaId &&
                this.params.outCargoAreaId
              ) {
                this.getProductList();
              } else {
                this.productList = [];
                return this.$message.error('调入库区与调出库区必须同时填写');
              }
            } else if (this.params.inShelvesId && this.params.outShelvesId) {
              this.getProductList();
            } else {
              this.productList = [];
              return this.$message.error('调入货架与调出货架必须同时填写');
            }
          } else if (this.params.inFreightId && this.params.outFreightId) {
            this.getProductList();
          } else {
            this.productList = [];
            return this.$message.error('调入货位与调出货位必须同时填写');
          }
        }
      },
      reset() {
        this.params = {
          ...this.params,
          outWarehouseId: '', // 调出仓库
          outWarehouseName: '',
          outCargoAreaId: '', // 调出库区
          outCargoAreaName: '',
          outShelvesId: '', // 调出货架
          outShelvesName: '',
          outFreightId: '', // 调出货位
          outFreightName: '',
          inWarehouseId: '', // 调入仓库
          inWarehouseName: '',
          inCargoAreaId: '', // 调入库区
          inCargoAreaName: '',
          inShelvesId: '', // 调入货架
          inShelvesName: '',
          inFreightId: '', // 调入货位
          inFreightName: ''
        };
        this.total = 0;
        this.productList = [];
        this.selection = [];
        this.selectionIds = [];
        this.outCargoAreaList = []; // 调出库区列表
        this.inCargoAreaList = []; // 调入库区列表
        this.outShelvesList = []; // 调出货架列表
        this.inShelvesList = []; // 调入货架列表
        this.outFreightList = []; // 调出货位列表
        this.inFreightList = []; // 调入货位列表
      },
      queryReset() {
        this.query = {};
        this.page = 1;
        this.getProductList();
      },
      querySearch() {
        this.page = 1;
        this.getProductList();
      },
      //获取工厂列表
      async getFactoryList() {
        const res = await warehouseDefinition.getFactoryarea({
          pageNum: 1,
          size: 9999,
          type: 1
        });
        this.factoryList = res.list;
      },
      async outWarehouseChange(val) {
        this.outCargoAreaList = this.outTreeList.filter(
          (item) => item.id == val
        )[0].children;
        this.params.outWarehouseName = this.outTreeList.filter(
          (item) => item.id == val
        )[0].name;
        this.productList = [];
        this.tableData = [];
        this.selection = [];
        this.selectionIds = [];
        this.params.outCargoAreaId = ''; // 调出库区
        this.params.outCargoAreaName = '';
        this.params.outShelvesId = ''; // 调出货架
        this.params.outShelvesName = '';
        this.params.outFreightId = ''; // 调出货位
        this.params.outFreightName = '';
        this.outShelvesList = []; // 调出货架列表
        this.outFreightList = []; // 调出货位列表
        if (this.allocateId == 2) {
          // 过滤调入库区
          this.inTreeList = this.inTreeList.map((item) => {
            if (item.id === val) {
              return {
                ...item,
                hiden: true
              };
            } else {
              return {
                ...item,
                hiden: false
              };
            }
          });
        } else {
          this.inCargoAreaList = this.outCargoAreaList;
          this.params.inWarehouseName = this.params.outWarehouseName;
          this.params.inWarehouseId = this.params.outWarehouseId;
          this.params.inCargoAreaId = ''; // 调出库区
          this.params.inCargoAreaName = '';
          this.params.inShelvesId = ''; // 调出货架
          this.params.inShelvesName = '';
          this.params.inFreightId = ''; // 调出货位
          this.params.inFreightName = '';
          this.inShelvesList = []; // 调入货架列表
          this.inFreightList = []; // 调入货位列表
        }
        await this.getProductList();
      },
      outCargoAreaChange(val) {
        this.outShelvesList = this.outCargoAreaList.filter(
          (item) => item.id == val
        )[0].children;
        this.params.outCargoAreaName = this.outCargoAreaList.filter(
          (item) => item.id == val
        )[0].name;
        this.productList = [];
        this.params.outShelvesId = ''; // 调出货架
        this.params.outShelvesName = '';
        this.params.outFreightId = ''; // 调出货位
        this.params.outFreightName = '';
        this.outFreightList = []; // 调出货位列表
        this.getProductList();
      },
      outShelvesChange(val) {
        this.outFreightList = this.outShelvesList.filter(
          (item) => item.id == val
        )[0].children;
        this.params.outShelvesName = this.outShelvesList.filter(
          (item) => item.id == val
        )[0].name;
        this.productList = [];
        this.params.outFreightId = ''; // 调出货位
        this.params.outFreightName = '';
        this.getProductList();
      },
      outFreightIdChange(val) {
        this.params.outFreightName = this.outFreightList.filter(
          (item) => item.id == val
        )[0].name;
        this.getProductList();
      },
      inWarehouseChange(val) {
        this.inCargoAreaList = this.inTreeList.filter(
          (item) => item.id == val
        )[0].children;
        this.params.inWarehouseName = this.inTreeList.filter(
          (item) => item.id == val
        )[0].name;
        // this.productList = [];
        // this.tableData = [];
        // this.selection = [];
        // this.selectionIds = [];
        this.params.inCargoAreaId = ''; // 调出库区
        this.params.inCargoAreaName = '';
        this.params.inShelvesId = ''; // 调出货架
        this.params.inShelvesName = '';
        this.params.inFreightId = ''; // 调出货位
        this.params.inFreightName = '';
        this.inShelvesList = []; // 调入货架列表
        this.inFreightList = []; // 调入货位列表
        if (this.allocateId == 2) {
          // 过滤调出库区(库外调拨)
          this.outTreeList = this.outTreeList.map((item) => {
            if (item.id === val) {
              return {
                ...item,
                hiden: true
              };
            } else {
              return {
                ...item,
                hiden: false
              };
            }
          });
          console.log(this.outTreeList);
        }
      },
      inCargoAreaChange(val) {
        this.inShelvesList = this.inCargoAreaList.filter(
          (item) => item.id == val
        )[0].children;
        this.params.inCargoAreaName = this.inCargoAreaList.filter(
          (item) => item.id == val
        )[0].name;
        // this.productList = [];
        this.params.inShelvesId = ''; // 调出货架
        this.params.inShelvesName = '';
        this.params.inFreightId = ''; // 调出货位
        this.params.inFreightName = '';
        this.inFreightList = []; // 调入货位列表
      },
      inShelvesChange(val) {
        this.inFreightList = this.inShelvesList.filter(
          (item) => item.id == val
        )[0].children;
        this.params.inShelvesName = this.inShelvesList.filter(
          (item) => item.id == val
        )[0].name;
        // this.productList = [];
        this.params.inFreightId = ''; // 调出货位
        this.params.inFreightName = '';
      },
      inFreightIdChange(val) {
        this.params.inFreightName = this.inFreightList.filter(
          (item) => item.id == val
        )[0].name;
      },
      // 调出区域改变
      outChange(val) {
        console.log(this.$refs.outTree.getNodeByValue(val));
        let obj = this.$refs.outTree.getNodeByValue(val);
        this.currentObj = obj;
        this.getProductList();
      },
      // 调入区域改变
      inChange(val) {
        let obj = this.$refs.outTree.getNodeByValue(val);
      },
      async getProductList() {
        let params = {
          ...this.query,
          warehouseId: this.params.outWarehouseId,
          warehouseAreaId: this.params.outCargoAreaId,
          warehouseAreaGoodsId: this.params.outShelvesId,
          warehouseAreaGoodsShelvesId: this.params.outFreightId
        };
        const data = await storageApi.getPackingList({
          ...params,
          pageNum: this.page,
          size: this.size
        });
        this.total = data.count;
        this.productList = data.list;
      },
      async getTreeData() {
        try {
          this.treeLoading = true;
          let res = await storageApi.getWarehouseTrees({
            factoriesId: this.factoryId
          });
          this.treeLoading = false;
          if (res?.code === '0') {
            this.outTreeList = res.data;
            this.inTreeList = res.data;
          }
        } catch (error) {
          console.log(error);
        }
        this.treeLoading = false;
      },
      deleted(row, index) {
        this.tableData.splice(index, 1);
        console.log(this.selectionIds);
        this.selectionIds = this.selectionIds.filter((item) => item !== row.id);
      },
      config() {
        if (this.allocateId == 1) {
          // 库内
          this.submit(2);
        } else {
          // 库外
          this.submit(1);
        }
      },
      submit(status) {
        if (this.tableData.length > 0) {
          let params = {
            categoryCode: this.tableData
              .map((item) => item.categoryCode)
              .join(','),
            categoryName: this.tableData
              .map((item) => item.categoryName)
              .join(','),
            allotApplyAddPOBuilders: this.tableData.map((item) => {
              return {
                warehouseId: item.warehouseId,
                warehouseName: item.warehouseName,
                areaId: item.areaId,
                areaName: item.areaName,
                goodsAllocationId: item.goodsAllocationId,
                goodsAllocationName: item.goodsAllocationName,
                goodsShelfId: item.goodsShelfId,
                goodsShelfName: item.goodsShelfName,
                outInDetailRecordId: item.id,
                targetAreaId: item.targetAreaId,
                targetAreaName: item.targetAreaName,
                targetGoodsAllocationId: item.targetGoodsAllocationId,
                targetGoodsAllocationName: item.targetGoodsAllocationName,
                targetGoodsShelfId: item.targetGoodsShelfId,
                targetGoodsShelfName: item.targetGoodsShelfName,
                targetWarehouseId: item.targetWarehouseId,
                targetWarehouseName: item.targetWarehouseName
              };
            }),
            allotCode: this.params.code,
            name: this.params.name,
            id: this.transferOrderId,
            sourceWarehouse: this.params.outWarehouseName,
            sourceWarehouseId: this.params.outWarehouseId,
            targetWarehouse: this.params.inWarehouseName,
            targetWarehouseId: this.params.inWarehouseId,
            status: status,
            type: this.allocateId
          };
          console.log('params------------', params);
          storageApi.allotApplySave(params).then(() => {
            this.$message.success('保存成功');
            this.$router.go(-1);
          });
        } else {
          this.$message.error('请调入相关数据');
        }
      },
      checkSelectable(row) {
        return !this.selectionIds.includes(row.id);
      },
      allocateChange(val) {
        this.allocateId = val;
        this.params = {
          ...this.params,
          outWarehouseId: '', // 调出仓库
          outWarehouseName: '',
          outCargoAreaId: '', // 调出库区
          outCargoAreaName: '',
          outShelvesId: '', // 调出货架
          outShelvesName: '',
          outFreightId: '', // 调出货位
          outFreightName: '',
          inWarehouseId: '', // 调入仓库
          inWarehouseName: '',
          inCargoAreaId: '', // 调入库区
          inCargoAreaName: '',
          inShelvesId: '', // 调入货架
          inShelvesName: '',
          inFreightId: '', // 调入货位
          inFreightName: ''
        };
        this.total = 0;
        this.productList = [];
        this.outShelvesList = [];
        this.outCargoAreaList = [];
        this.outFreightList = [];
        this.inShelvesList = [];
        this.inCargoAreaList = [];
        this.inFreightList = [];
        this.selectionIds = [];
        this.selection = [];
        this.tableData = [];
        this.$refs.table.clearSelection();
        this.getTreeData();
        // this.params = {
        //   outWarehouseId: '',
        //   outWarehouseName: '',
        //   inWarehouseId: '',
        //   inWarehouseName: ''
        // };
        // this.currentPullAreaId = '';
        // this.currentPullAreaName = '';
        // this.currentTuneAreaId = '';
        // this.currentTuneAreaName = '';
        // this.pullLibrary = [];
        // this.tuneLibrary = [];
        // this.productList = [];
        // this.tableData = [];
        // this.productList = [];
        // this.getWarehouseOptions();
      },
      pullClick(id, name) {
        if (this.currentPullAreaId == id) {
          return false;
        } else {
          console.log('-------------');
          this.currentPullAreaId = id;
          this.currentPullAreaName = name;
          this.currentTuneAreaId = '';
          this.currentTuneAreaName = '';
        }

        storageApi
          .getPackingList({
            warehouseAreaId: id,
            pageNum: 1,
            size: 9999
          })
          .then(({ list }) => {
            this.productList = list;
          });
      },
      tuneClick(id, name, boolen) {
        if (!this.currentPullAreaId) {
          return this.$message.error('请先选择调出库');
        }
        if (boolen) {
          return false;
        }
        this.currentTuneAreaId = id;
        this.currentTuneAreaName = name;
      },
      selecctedRow(val) {
        this.selection = val;
      },
      async getWarehouseOptions() {
        const { data } = await storageApi.getWarehouseTrees();
        this.outWarehouseList = data;
        this.inWarehouseList = data;
      },
      async merge() {
        if (this.selection.length > 0) {
          console.log(this.selection);
          console.log(this.selectionIds);
          let boolen = this.selection.every((item) =>
            this.selectionIds.includes(item.id)
          );
          if (this.selection.length > 0 && !boolen) {
            this.selection = this.selection.filter(
              (item) => !this.selectionIds.includes(item.id)
            );
            // // 判断货位
            // if (this.params.inFreightId) {
            //   let isBoolen = this.selection.some(
            //     (item) => item.goodsAllocationId == this.params.inFreightId
            //   );
            //   if (isBoolen) {
            //     return this.$message.error('所选物品货位与调入货位重复！');
            //   }
            // }
            // // 判断货架
            // if (!this.params.inFreightId && this.params.inShelvesId) {
            //   let isBoolen = this.selection.some(
            //     (item) => item.goodsShelfId == this.params.inShelvesId
            //   );
            //   if (isBoolen) {
            //     return this.$message.error('所选物品货架与调入货架重复！');
            //   }
            // }
            // // 判断库区
            // if (!this.params.inCargoAreaId) {
            //   return this.$message.error('调入库区不能为空');
            // } else if (
            //   !this.params.inFreightId &&
            //   !this.params.inShelvesId &&
            //   this.params.inCargoAreaId
            // ) {
            //   let isBoolen = this.selection.some(
            //     (item) => item.areaId == this.params.inCargoAreaId
            //   );
            //   if (isBoolen) {
            //     return this.$message.error('所选物品库区与调入库区重复');
            //   }
            // }

            if (
              this.params.inCargoAreaId &&
              !this.params.inFreightId &&
              !this.params.inShelvesId
            ) {
              // 只有调入库区
              for (let i = 0; i < this.selection.length; i++) {
                console.log(this.selection[i].areaId);
                console.log(this.params.inCargoAreaId);
                if (this.selection[i].areaId == this.params.inCargoAreaId) {
                  return this.$message.error('所选物品库区与调入库区重复');
                }
              }
            } else if (
              this.params.inCargoAreaId &&
              this.params.inShelvesId &&
              !this.params.inFreightId
            ) {
              // 只有调入库区/货架
              for (let i = 0; i < this.selection.length; i++) {
                if (this.selection[i].areaId == this.params.inCargoAreaId) {
                  // 库区相同
                  if (
                    this.selection[i].goodsShelfId == this.params.inShelvesId
                  ) {
                    // 货架相同
                    return this.$message.error(
                      '所选物品库区/货架与调入库区/货架重复'
                    );
                  } else {
                    // 货架不同直接录入
                  }
                } else {
                  // 库区不同直接录入
                }
              }
            } else if (
              this.params.inCargoAreaId &&
              this.params.inShelvesId &&
              this.params.inFreightId
            ) {
              // 只有调入库区/货架/货位
              for (let i = 0; i < this.selection.length; i++) {
                if (this.selection[i].areaId == this.params.inCargoAreaId) {
                  // 库区相同
                  if (
                    this.selection[i].goodsShelfId == this.params.inShelvesId
                  ) {
                    // 货架相同
                    if (
                      this.selection[i].goodsAllocationId ==
                      this.params.inFreightId
                    ) {
                      // 货位相同
                      return this.$message.error(
                        '所选物品库区/货架/货位与调入库区/货架/货位重复'
                      );
                    } else {
                      // 货位不同直接录入
                    }
                  } else {
                    // 货架不同直接录入
                  }
                } else {
                  // 库区不同直接录入
                }
              }
            } else {
              return this.$message.error('调入库区不能为空');
            }

            this.selectionIds = this.selectionIds.concat(
              this.selection.map((item) => item.id)
            );
            console.log('this.selection---------', this.selection);
            console.log('this.selectionIds---', this.selectionIds);
            this.tableData = this.tableData.concat(
              this.selection.map((item) => {
                console.log('this.params---------', this.params);
                return {
                  ...item,
                  warehouseId: this.params.outWarehouseId,
                  warehouseName: this.params.outWarehouseName,
                  areaId: this.params.outCargoAreaId,
                  areaName: this.params.outCargoAreaName,
                  goodsAllocationId: this.params.outFreightId,
                  goodsAllocationName: this.params.outFreightName,
                  goodsShelfId: this.params.outShelvesId,
                  goodsShelfName: this.params.outShelvesName,
                  targetAreaId: this.params.inCargoAreaId,
                  targetAreaName: this.params.inCargoAreaName,
                  targetGoodsAllocationId: this.params.inFreightId,
                  targetGoodsAllocationName: this.params.inFreightName,
                  targetGoodsShelfId: this.params.inShelvesId,
                  targetGoodsShelfName: this.params.inShelvesName,
                  targetWarehouseId: this.params.inWarehouseId,
                  targetWarehouseName: this.params.inWarehouseName,
                  outWarehouseArea:
                    this.params.outWarehouseName +
                    (this.params.outCargoAreaName
                      ? '-' + this.params.outCargoAreaName
                      : '') +
                    (this.params.outShelvesName
                      ? '-' + this.params.outShelvesName
                      : '') +
                    (this.params.outFreightName
                      ? '-' + this.params.outFreightName
                      : ''),
                  inWarehouseArea:
                    this.params.inWarehouseName +
                    (this.params.inCargoAreaName
                      ? '-' + this.params.inCargoAreaName
                      : '') +
                    (this.params.inShelvesName
                      ? '-' + this.params.inShelvesName
                      : '') +
                    (this.params.inFreightName
                      ? '-' + this.params.inFreightName
                      : '')
                };
              })
            );
            console.log('this.tableData---------', this.tableData);
          } else {
            this.$message.error('请选择正确的行');
          }
        } else {
          this.$message.error('请选择调出物品信息');
        }
      }
    }
  };
</script>
<style lang="scss" scoped>
  #inventoryAllocate {
    height: 100%;
    .el-form-item {
      margin-bottom: 5px !important;
    }
    .submit_item {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-top: 8px;
      height: 40px;
    }
    :deep(.el-form-item__label) {
      padding-right: 5px !important;
    }
    :deep(.el-card) {
      height: 100%;
      .el-card__body {
        height: 100%;
        box-sizing: border-box;
        overflow: hidden;
        display: flex;
        flex-direction: column;
      }
    }
    .col_height {
      height: 45px !important;
    }
    .productBox {
      display: flex;
      flex: 1;
      > div {
        flex: 1;
        overflow: hidden;
      }
    }
    .selectBox {
      padding: 20px;
    }
    .box-card {
      margin: 20px;
    }
    .productsList {
      margin-right: 10px;
      display: flex;
      flex-direction: column;
      :deep(.el-table) {
        flex: 1;
        display: flex;
        flex-direction: column;
        .el-table__body-wrapper {
          flex: 1;
        }
      }
    }
    .allocateDetails {
      display: flex;
      flex-direction: column;
      :deep(.el-table) {
        flex: 1;
        display: flex;
        flex-direction: column;
        .el-table__body-wrapper {
          flex: 1;
        }
      }
    }
  }
</style>