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

<template>
  <div id="inventoryAllocate">
    <el-card class="box-card">
      <div class="selectBox">
        <el-form
          label-width="80px"
          label-position="left"
          class="ele-form-search"
        >
          <el-row :gutter="15">
            <el-col :span="6">
              <el-form-item label="调拨类型:" prop="warehouseId">
                <template>
                  <el-select
                    clearable
                    @change="allocateChange"
                    style="width: 100%"
                    v-model="allocateId"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in typeOptions"
                      :label="item.label"
                      :value="item.value"
                      :key="item.value"
                    >
                    </el-option>
                  </el-select>
                </template>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="调出仓库:" prop="warehouseId">
                <template>
                  <el-select
                    clearable
                    style="width: 100%"
                    v-model="params.outWarehouseId"
                    @change="warehouseChange($event, '调出')"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in outWarehouseList"
                      :label="item.name"
                      :value="item.id"
                      :key="item.id"
                    >
                    </el-option>
                  </el-select>
                </template>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="调入仓库:" prop="warehouseId">
                <template>
                  <el-select
                    :disabled="allocateId == 1"
                    clearable
                    style="width: 100%"
                    v-model="params.inWarehouseId"
                    @change="warehouseChange($event, '调入')"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in inWarehouseList"
                      :label="item.name"
                      :value="item.id"
                      :key="item.id"
                    >
                    </el-option>
                  </el-select>
                </template>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="reservoirArea">
        <div>
          <div
            >调出库区{{
              currentPullAreaName ? `(${currentPullAreaName})` : '(未选)'
            }}</div
          >
          <div class="box">
            <div
              :class="currentPullAreaId == item.id ? 'click_border' : ''"
              v-for="item in pullLibrary"
              @click="pullClick(item.id, item.name)"
              >{{ item.name }}</div
            >
          </div>
        </div>
        <div>
          <div
            >调入库区{{
              currentTuneAreaName ? `(${currentTuneAreaName})` : '(未选)'
            }}</div
          >
          <div class="box">
            <div
              :class="
                allocateId == 1 && currentPullAreaId === item.id
                  ? 'unClick_color'
                  : currentTuneAreaId === item.id
                  ? 'click_border'
                  : ''
              "
              v-for="item in tuneLibrary"
              @click="
                tuneClick(
                  item.id,
                  item.name,
                  allocateId == 1 && currentPullAreaId === item.id
                )
              "
              >{{ item.name }}</div
            >
          </div>
        </div>
      </div>
    </el-card>
    <el-card class="box-card">
      <div class="productsList">
        <header-title
          :title="`物品信息${
            currentPullAreaName ? `(${currentPullAreaName})` : '(未选)'
          }`"
          ><el-button type="primary" @click="merge"
            >调入</el-button
          ></header-title
        >
        <el-table
          ref="table"
          :data="productList"
          @selection-change="selecctedRow"
          tooltip-effect="dark"
          :max-height="500"
          border
        >
          <el-table-column
            align="center"
            width="50"
            :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="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="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="goodsAllocationName"
            :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="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>
      </div>
      <div class="allocateDetails">
        <header-title :title="`调拨明细`"
          ><el-button type="primary" @click="submit"
            >保存</el-button
          ></header-title
        >
        <el-table
          ref="detailTable"
          :data="tableData"
          tooltip-effect="dark"
          :max-height="500"
          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="牌号"
            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="outWarehouseAreaName"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            label="调入库区"
            prop="inWarehouseName"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="{ row, $index }">
              <el-button @click="deleted(row, $index)" type="text" size="small"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>
<script>
  import storageApi from '@/api/warehouseManagement/index.js';
  import { getWarehouseList } from '@/api/classifyManage/itemInformation';
  export default {
    data() {
      return {
        typeOptions: [
          { label: '库内调拨', value: 1 },
          { label: '库外调拨', value: 2 }
        ],
        selectionIds: [],
        selection: [],
        tableData: [],
        productList: [],
        allocateId: 1,
        currentPullAreaId: '',
        currentPullAreaName: '',
        currentTuneAreaId: '',
        currentTuneAreaName: '',
        pullLibrary: [], // 调出库
        tuneLibrary: [], // 调入库
        outWarehouseList: [],
        inWarehouseList: [],
        params: {
          outWarehouseId: '',
          outWarehouseName: '',
          inWarehouseId: '',
          inWarehouseName: ''
        }
      };
    },
    created() {
      this.getWarehouseOptions();
    },
    methods: {
      deleted(row, index) {
        this.tableData.splice(index, 1);
        console.log(this.selectionIds);
        this.selectionIds = this.selectionIds.filter((item) => item !== row.id);
      },
      submit() {
        if (this.tableData.length > 0) {
          let params = {
            categoryCode: this.tableData
              .map((item) => item.categoryCode)
              .join(','),
            categoryName: this.tableData
              .map((item) => item.categoryName)
              .join(','),
            outInDetailRecordId: this.tableData.map((item) => item.id),
            sourceWarehouse: this.params.outWarehouseName,
            sourceWarehouseId: this.params.outWarehouseId,
            sourceWarehouseArea: this.currentPullAreaName,
            sourceWarehouseAreaId: this.currentPullAreaId,
            targetWarehouse: this.params.inWarehouseName,
            targetWarehouseId: this.params.inWarehouseId,
            targetWarehouseArea: this.currentTuneAreaName,
            targetWarehouseAreaId: this.currentTuneAreaId,
            status: 0,
            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 = {
          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 warehouseChange(val, type) {
        console.log(val);
        console.log(type);
        storageApi.getListByWarehouseId(val).then((data) => {
          console.log(data);
          if (this.allocateId == 1) {
            // 库内调拨同步选择仓库
            this.params.inWarehouseId = val;
            this.pullLibrary = data;
            this.tuneLibrary = data;
            this.params = {
              outWarehouseId: val,
              outWarehouseName: this.outWarehouseList.filter(
                (item) => item.id == val
              )[0].name,
              inWarehouseId: val,
              inWarehouseName: this.inWarehouseList.filter(
                (item) => item.id == val
              )[0].name
            };
            console.log(this.params);
          } else {
            if (type === '调出') {
              this.pullLibrary = data;
              this.currentPullAreaId = '';
              this.currentPullAreaName = '';
              this.currentTuneAreaId = '';
              this.currentTuneAreaName = '';
              this.inWarehouseList = this.inWarehouseList.filter(
                (item) => item.id !== val
              );
              this.params.outWarehouseId = val;
              this.params.outWarehouseName = this.outWarehouseList.filter(
                (item) => item.id === val
              )[0].name;
              this.productList = [];
            } else {
              this.tuneLibrary = data;
              this.outWarehouseList = this.outWarehouseList.filter(
                (item) => item.id !== val
              );
              this.params.inWarehouseId = val;
              this.params.inWarehouseName = this.inWarehouseList.filter(
                (item) => item.id === val
              )[0].name;
            }
          }
        });
      },
      async getWarehouseOptions() {
        const { data } = await storageApi.getWarehouseTrees();
        this.outWarehouseList = data;
        this.inWarehouseList = data;
      },
      getAreaData() {
        console.log('this.current----', this.current.data);
        params = {
          warehouseId:
            this.current.data?.level == 0 ? this.current.data.id : '',
          warehouseAreaId:
            this.current.data?.level == 1 ? this.current.data.id : '',
          warehouseAreaGoodsId:
            this.current.data?.level == 2 ? this.current.data.id : '',
          ...where,
          ...order
        };
        const data = storageApi.getPackingList({
          ...params,
          pageNum: page,
          size: limit
        });
      },
      async merge() {
        if (
          this.selection.length > 0 &&
          this.currentPullAreaId &&
          this.currentTuneAreaId
        ) {
          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)
            );
            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) => {
                return {
                  ...item,
                  outWarehouseAreaId: this.currentPullAreaId,
                  outWarehouseAreaName: this.currentPullAreaName,
                  inWarehouseId: this.currentTuneAreaId,
                  inWarehouseName: this.currentTuneAreaName
                };
              })
            );
            console.log('this.tableData---------', this.tableData);
          } else {
            this.$message.error('请选择正确的行');
          }
        } else {
          this.$message.error('请选择调入库和调出库以及物品信息');
        }
      }
    }
  };
</script>
<style lang="scss" scoped>
  #inventoryAllocate {
    .selectBox {
      padding: 20px;
    }
    .box-card {
      margin: 20px;
    }
    .click_border {
      box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px,
        rgb(51, 51, 51) 0px 0px 0px 5px;
    }
    .unClick_color {
      background-color: #ccc !important;
    }
    .reservoirArea {
      display: flex;
      padding: 5px 20px;
      > div {
        flex: 1;
        .box {
          > div {
            display: inline-block;
            width: 120px;
            height: 80px;
            margin: 10px;
            margin-left: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            color: #fff;
            background-color: #409eff;
            cursor: pointer;
          }
        }
      }
    }
    .allocateDetails {
      padding: 5px 20px;
      > div {
        padding: 10px;
      }
    }
    .productsList {
      padding: 5px 20px;
      > div {
        padding: 10px;
      }
    }
  }
</style>