kd-aiot-frontend-wms/src/views/warehouseManagement/stockManagement/details.vue

<template>
  <div class="ele-body">
    <el-card shadow="never">
      <div class="page-title">
        <PageHeader title="入库单详情"></PageHeader>
      </div>
      <div>
        <div class="stepsStatus">
          <el-steps :active="active" align-center>
            <el-step title="创建"></el-step>
            <el-step title="待审核"></el-step>
            <el-step :title="stepsTitle" :status="stepsStatus"></el-step>
          </el-steps>
        </div>
        <div class="content-detail">
          <header-title title="基本信息" size="16px"></header-title>
          <div class="mt20">
            <el-form label-width="120px">
              <el-col :span="8">
                <el-form-item label="入库单:">
                  <span>{{ infoData.bizNo }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="入库物品类型:">
                  <span>{{ handleAssetType(extInfo.assetType) }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="入库场景:">
                  <span>{{ getSceneState(infoData.bizType) }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="关联订单:">
                  <span>{{ infoData.sourceBizNo }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="权属部门:">
                  <span>{{ extInfo.deptName }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="入库登记人:">
                  <span>{{ extInfo.createUserName }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="入库时间:">
                  <span>{{ infoData.storageTime }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="状态:">
                  <span>{{ stepsTitle }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="审核人:">
                  <span>{{ infoData.verifyName }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="客户:">
                  <span>{{ infoData.clientName }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="供应商:">
                  <span>{{ extInfo.supplierName }}</span>
                </el-form-item>
              </el-col>
              <!-- <el-col :span="8">
                <el-form-item label="送货人:">
                  <span>{{ infoData.fromUser }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="送货人联系方式:">
                  <span>{{ extInfo.deliveryPhone }}</span>
                </el-form-item>
              </el-col> -->
              <el-col :span="8">
                <el-form-item label="附件:">
                  <el-link
                    type="primary"
                    v-for="item in infoData.qualityFile"
                    @click="download(item)"
                    :key="item.name"
                    >{{ item.name }}</el-link
                  >
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="备注:">
                  <span>{{ infoData.remark }}</span>
                </el-form-item>
              </el-col>
            </el-form>
          </div>
        </div>
        <div class="content-detail mt20">
          <header-title title="产品信息" size="16px"> </header-title>
          <el-table
            ref="productListTable"
            :data="productList"
            tooltip-effect="dark"
            border
            :max-height="300"
            :header-cell-style="rowClass"
          >
            <el-table-column label="序号" type="index" width="50">
            </el-table-column>
            <el-table-column
              label="编码"
              prop="categoryCode"
              align="center"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="名称"
              align="center"
              prop="categoryName"
              :show-overflow-tooltip="true"
            ></el-table-column>

            <el-table-column
              label="二维码"
              width="120"
              :show-overflow-tooltip="true"
              v-if="$route.query.verifyStatus === '2'"
            >
              <template slot-scope="{ row }">
                <el-link type="primary" @click="openQRCode(row, 2)">
                  查看
                </el-link>
              </template>
            </el-table-column>

            <el-table-column
              v-if="clientEnvironmentId == 4"
              label="级别"
              prop="level"
              align="center"
            >
            </el-table-column>
            <el-table-column
              label="型号"
              align="center"
              prop="categoryModel"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="规格"
              align="center"
              prop="specification"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="牌号"
              align="center"
              prop="brandNum"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              v-for="(item, index) in newColumns"
              :label="item.label"
              :align="item.align"
              :prop="item.prop"
              :show-overflow-tooltip="item.showOverflowTooltip"
            ></el-table-column>
            <el-table-column
              label="库存状态"
              align="center"
              prop="qualityControl"
              :show-overflow-tooltip="true"
              v-if="this.stepsStatus == 'success'"
            >
              <template slot-scope="{ row }">
                {{ row.qualityControl == 1 ? '预入库' : '已入库' }}
              </template>
            </el-table-column>
            <el-table-column
              label="批次号"
              prop="batchNo"
              align="center"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column label="数量" prop="packingQuantity" align="center">
              <template slot-scope="{ row, $index }">
                {{ row.packingQuantity }}
              </template>
            </el-table-column>
            <el-table-column
              label="单位"
              align="center"
              width="120"
              prop="packingUnit"
            >
            </el-table-column>
            <el-table-column
              label="计量数量"
              prop="measureQuantity"
              width="100"
              align="center"
            >
            </el-table-column>
            <el-table-column label="计量单位" prop="measureUnit" align="center">
            </el-table-column>
            <el-table-column
              label="单重"
              prop="singleWeight"
              align="center"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              label="总重"
              prop="weight"
              align="center"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              label="重量单位"
              prop="weightUnit"
              align="center"
              :show-overflow-tooltip="true"
            >
            </el-table-column>

            <el-table-column
              label="单价"
              prop="unitPrice"
              align="center"
              v-if="isPrice == 1"
            >
              <template slot-scope="{ row }">
                <template>
                  {{ row.unitPrice ? row.unitPrice + '/元' : '' }}
                </template>
              </template>
            </el-table-column>

            <el-table-column
              label="金额"
              align="center"
              prop="contentImage"
              v-if="isPrice == 1"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="{ row, $index }">
                {{ row.totalMoney ? row.totalMoney : 0 }}
              </template>
            </el-table-column>
            <el-table-column
              v-if="clientEnvironmentId == 4"
              label="采购原因"
              align="center"
              prop="purpose"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="供应商"
              prop="supplierName"
              :show-overflow-tooltip="true"
              width="120"
            >
            </el-table-column>
            <el-table-column
              width="120"
              label="供应商代号"
              prop="supplierCode"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              label="产地"
              align="center"
              prop="provenance"
              :show-overflow-tooltip="true"
              width="120"
            >
              <template slot-scope="{ row, $index }">
                {{
                  row.provenance &&
                  row.provenance
                    .map((item) => getDictValue('产地', item))
                    .join(',')
                }}
              </template>
            </el-table-column>
            <el-table-column label="机型" prop="modelKey" width="200">
            </el-table-column>
            <el-table-column label="颜色" prop="colorKey" width="200">
            </el-table-column>
            <el-table-column
              label="仓库"
              prop="warehouseName"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              label="生产日期"
              prop="detailProductionDate"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              label="采购日期"
              prop="detailPurchaseDate"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              label="失效日期"
              prop="detailExpireDate"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              v-if="infoData.verifyStatus == 2"
              label="操作"
              width="200"
              fixed="right"
              align="center"
            >
              <template slot-scope="{ row, $index }">
                <el-button
                  v-if="isUpper(row)"
                  type="text"
                  @click="shelvesWarehouse(row, $index, '产品')"
                  >下架</el-button
                >
                <el-button
                  v-else
                  type="text"
                  @click="handleWareHouse(row, $index, '产品')"
                  >上架</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="mt20">
          <!-- {{ this.packingList }} -->
          <header-title :title="`包装明细`" size="16px">
            <el-button
              v-for="item in mergeOptions"
              size="mini"
              type="primary"
              @click="openMergeDialog(item)"
              >合并成{{ item.conversionUnit }}</el-button
            >
            <el-button
              v-for="item in splitOptions"
              size="mini"
              type="primary"
              @click="openSplitDialog(item)"
              >拆分到{{ item.packageUnit }}</el-button
            >
          </header-title>
          <el-table
            ref="showPackingListTable"
            :data="packingList"
            tooltip-effect="dark"
            :max-height="300"
            border
            :row-class-name="tableRowClassName"
            :header-cell-style="rowClass"
            @selection-change="productSplit"
          >
            <el-table-column
              v-if="infoData.verifyStatus == 2"
              key="selection"
              label="选择"
              type="selection"
              width="55"
              align="center"
              fixed="left"
            >
            </el-table-column>
            <el-table-column label="序号" type="index" width="50">
            </el-table-column>

            <el-table-column
              label="批次号"
              prop="batchNo"
              width="80"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="包装编码"
              prop="packageNo"
              width="130"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="名称"
              prop="categoryName"
              width="120"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="编码"
              prop="categoryCode"
              width="120"
              :show-overflow-tooltip="true"
            ></el-table-column>

            <el-table-column
              label="二维码"
              width="120"
              :show-overflow-tooltip="true"
              v-if="$route.query.verifyStatus === '2'"
            >
              <template slot-scope="{ row }">
                <el-link type="primary" @click="openQRCode(row, 3)">
                  查看
                </el-link>
              </template>
            </el-table-column>

            <el-table-column
              label="型号"
              prop="categoryModel"
              width="80"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="规格"
              prop="specification"
              width="80"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="牌号"
              prop="brandNum"
              width="80"
              :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="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="materielDesignation"
              :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="clientCode"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              label="供应商"
              prop="supplierName"
              :show-overflow-tooltip="true"
              width="120"
            >
            </el-table-column>
            <el-table-column
              label="供应商代号"
              prop="supplierCode"
              :show-overflow-tooltip="true"
              width="120"
            >
            </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="modelKey" width="200">
            </el-table-column>
            <el-table-column label="颜色" prop="colorKey" width="200">
            </el-table-column>
            <el-table-column
              label="质检结果"
              prop="result"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="{ row }">
                <span>{{ qualityResults[row.result] }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="质检状态"
              prop="status"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="{ row }">
                <span>{{ qualityStatus[row.status] }}</span>
              </template>
            </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="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="expireDate"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              v-if="infoData.verifyStatus == 2"
              label="操作"
              width="200"
              fixed="right"
              align="center"
            >
              <template slot-scope="{ row, $index }">
                <el-button
                  v-if="row.areaId != null"
                  type="text"
                  @click="shelvesWarehouse(row, $index, '包装')"
                  >下架</el-button
                >
                <el-button
                  v-else
                  type="text"
                  @click="handleWareHouse(row, $index, '包装')"
                  >上架</el-button
                >
                {{ row.areaId }}
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            :page-sizes="[5, 10, 20, 30]"
            :page-size.sync="pages.size"
            :current-page.sync="pages.pageNum"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          >
          </el-pagination>
        </div>
      </div>
    </el-card>
    <WareHouseDailog
      ref="wareHouseDailogRef"
      @houseData="houseData"
    ></WareHouseDailog>
    <mergeDetails
      ref="mergeDetailsRef"
      @refresh="getPackingList"
    ></mergeDetails>
    <splitDetails ref="splitDetailsRef"></splitDetails>

    <printQRCode
      ref="printQRCodeRef"
      :assetType="extInfo.assetType"
    ></printQRCode>
  </div>
</template>

<script>
  import mergeDetails from './mergeDetails.vue';
  import splitDetails from './splitDetails.vue';
  import WareHouseDailog from '../components/warehouseShelvesDialog.vue';
  import elTableInfiniteScroll from 'el-table-infinite-scroll';
  import { getFile } from '@/api/system/file/index.js';
  import PageHeader from '@/components/PageHeader';
  import storageApi from '@/api/warehouseManagement';
  import { getCode } from '@/api/codeManagement/index.js';
  import { allCategoryLevel } from '@/api/classifyManage';
  import {
    useDictLabel,
    sceneState,
    qualityStatus,
    qualityResults
  } from '@/utils/dict/index';
  import { mapGetters, mapActions } from 'vuex';
  import { parameterGetByCode } from '@/api/sys/index.js';

  import printQRCode from './components/printQRCode.vue';

  export default {
    components: {
      PageHeader,
      WareHouseDailog,
      mergeDetails,
      splitDetails,
      printQRCode
    },
    directives: {
      'el-table-infinite-scroll': elTableInfiniteScroll
    },
    data() {
      return {
        total: 0,
        pages: { pageNum: 1, size: 10 },
        oldSelectionList: [],
        selectionList: [],
        mergeOptions: [],
        splitOptions: [],
        currentId: '',
        newColumns: [], // 动态表头
        qualityStatus,
        qualityResults,
        // qualityStatus: {
        //   0: '未质检',
        //   1: '已质检'
        // }, // 质检状态 0未检 1已检
        // qualityResults: {
        //   1: '合格',
        //   2: '不合格'
        // }, // 质检结果 1合格 2不合格
        productList: [], // 产品列表
        showPackingList: [], // 展示的包装列表
        packingList: [], // 包装列表
        showMaterialList: [], // 展示物料列表
        materialList: [], // 物料列表
        extInfo: {}, // 扩展信息
        pageSize: 20,
        pickingPageNum: 1,
        materielPageNum: 1,
        codeList: [],
        infoData: {},
        stepsTitle: '已完成',
        stepsStatus: 'success',
        active: 0,
        verifyStatus: '',
        rowData: {},
        isPrice: 1
      };
    },
    watch: {
      'infoData.verifyStatus': {
        immediate: true,
        handler(val) {
          if (val == 0) {
            this.active = 1;
            this.stepsTitle = '未审核';
            this.stepsStatus = 'wait';
          } else if (val == 1) {
            this.active = 2;
            this.stepsTitle = '审核中';
            this.stepsStatus = 'process';
          } else if (val == 2) {
            this.active = 2;
            this.stepsTitle = '审核通过';
            this.stepsStatus = 'success';
          } else if (val == 3) {
            this.active = 2;
            this.stepsTitle = '驳回';
            this.stepsStatus = 'error';
          }
        }
      },
      packingList: {
        handler(newVal) {
          console.log('包装列表', newVal);
          console.log('当前包装列表加载页数', this.pickingPageNum);
          this.showPackingList = newVal.slice(
            0,
            this.pageSize * (this.pickingPageNum > 0 ? this.pickingPageNum : 1)
          );
        },
        deep: true
      },
      materialList: {
        handler(newVal) {
          console.log('物料列表', newVal);
          console.log('当前物料列表加载页数', this.materielPageNum);
          this.showMaterialList = newVal.slice(
            0,
            this.pageSize *
              (this.materielPageNum > 0 ? this.materielPageNum : 1)
          );
        },
        deep: true
      }
    },
    computed: {
      ...mapGetters(['getDictValue']),
      clientEnvironmentId() {
        return this.$store.state.user.info.clientEnvironmentId;
      }
    },
    created() {
      this.getFieldModel();
      this.requestDict('类型用途');
      this.requestDict('不拆物料层规格');
      this.requestDict('产地');
      //仓库出入库是否显示金额（0：不显示 1：显示）
      parameterGetByCode({
        code: 'wms_price'
      }).then((res) => {
        this.isPrice = res.value;
      });
      this.getAllCategoryType();
      this._getInfo();
      this.verifyStatus = this.$route.query.verifyStatus;
    },
    methods: {
      openMergeDialog(dimensionRow) {
        this.$refs.mergeDetailsRef.open(dimensionRow, this.selectionList);
      },
      openSplitDialog(dimensionRow) {
        this.$refs.splitDetailsRef.open(dimensionRow, this.selectionList);
      },
      productSplit(selectionList) {
        console.log(selectionList);
        let isUnification = selectionList.every(
          (item) =>
            item.packingUnit == selectionList[0].packingUnit &&
            item.categoryId == selectionList[0].categoryId
        );
        if (isUnification) {
          if (selectionList.length > 0) {
            this.selectionList = selectionList;
            this.oldSelectionList = selectionList;
            if (this.mergeOptions.length == 0) {
              storageApi
                .getCategoryPackageDisposition({
                  categoryIds: [this.selectionList[0].categoryId]
                })
                .then((data) => {
                  console.log(data);
                  console.log(this.selectionList[0]);
                  // 形成合并按钮
                  let mergeIndex = data.findIndex(
                    (item) =>
                      item.packageUnit == this.selectionList[0].packingUnit &&
                      item.packageUnit != item.conversionUnit
                  );
                  console.log(mergeIndex);
                  this.mergeOptions = data.filter(
                    (item) => item.sort == data[mergeIndex].sort
                  );
                  // 形成拆分按钮
                  let splitIndex = data.findIndex(
                    (item) =>
                      item.conversionUnit ==
                        this.selectionList[0].packingUnit &&
                      item.packageUnit != item.conversionUnit
                  );
                  this.splitOptions = data.filter(
                    (item) => item.sort == data[splitIndex].sort
                  );
                });
            }
          } else {
            this.mergeOptions = [];
            this.splitOptions = [];
          }
        } else {
          this.$message.error('请选择相同物品和包装装单位');
          this.$refs.showPackingListTable.clearSelection();
        }
        console.log(isUnification);
      },
      // 获取动态表头
      getFieldModel() {
        storageApi.fieldModel({ fieldModel: 't_main_category' }).then((res) => {
          let newRes = res.map((m) => {
            return {
              prop: 'extField.' + m.prop,
              label: m.label,
              align: 'center',
              showOverflowTooltip: true
            };
          });
          this.newColumns = [...newRes];
        });
      },
      isUpper(row) {
        if (
          !row.outInDetailRecordRequestList ||
          row.outInDetailRecordRequestList.length === 0
        ) {
          return false;
        }
        return row.outInDetailRecordRequestList.some(
          (item) => item.areaId && item.goodsShelfId && item.goodsAllocationId
        );
      },
      formDataData() {
        // 处理包装数据
        this.packingList = this.packingList.map((packingItem) => {
          return {
            ...packingItem,
            materialDetailList: this.materialList.filter(
              (item) => item.parentIndex === packingItem.index
            )
          };
        });
        // 处理产品数据
        this.productList = this.productList.map((productItem) => {
          return {
            ...productItem,
            outInDetailRecordRequestList: this.packingList.filter(
              (item) => item.parentIndex === productItem.index
            )
          };
        });
        this.infoData.outInDetailList = this.productList;
      },
      houseData(argum, idx, type) {
        console.log('-argum-------------------', argum);
        switch (type) {
          case '产品':
            this.packingList.forEach((item) => {
              console.log(item, 'item');
              console.log(this.productList[idx], 'index');

              if (
                item.batchNo === this.productList[idx].batchNo &&
                item.categoryId === this.productList[idx].categoryId &&
                item.categoryName === this.productList[idx].categoryName
              ) {
                this.$set(item, 'areaId', argum[0].areaId);
                this.$set(item, 'areaName', argum[0].areaName);
                this.$set(item, 'goodsShelfId', argum[0].shelfId);
                this.$set(item, 'goodsShelfName', argum[0].shelfCode);
                this.$set(item, 'goodsAllocationId', argum[0].cargoSpaceId);
                this.$set(item, 'goodsAllocationName', argum[0].cargoSpaceCode);
              }
            });
            break;
          case '包装':
            this.$set(this.packingList[idx], 'areaId', argum[0].areaId);
            this.$set(this.packingList[idx], 'areaName', argum[0].areaName);
            this.$set(this.packingList[idx], 'goodsShelfId', argum[0].shelfId);
            this.$set(
              this.packingList[idx],
              'goodsShelfName',
              argum[0].shelfCode
            );
            this.$set(
              this.packingList[idx],
              'goodsAllocationId',
              argum[0].cargoSpaceId
            );
            this.$set(
              this.packingList[idx],
              'goodsAllocationName',
              argum[0].cargoSpaceCode
            );
            break;
        }

        const data2 = this.packingList.filter((item) => item.areaId);

        this.formDataData();
        for (let i = 0; i < this.infoData.outInDetailList.length; i++) {
          const batchNo = this.infoData.outInDetailList[i].batchNo;
          const categoryId = this.infoData.outInDetailList[i].categoryId;
          const categoryName = this.infoData.outInDetailList[i].categoryName;
          if (
            this.rowData.batchNo == batchNo &&
            this.rowData.categoryId == categoryId &&
            this.rowData.categoryName == categoryName
          ) {
            this.infoData.outInDetailList[i].outInDetailRecordRequestList =
              data2;
          }
        }
        storageApi
          .upperLowerShelves(this.infoData)
          .then((data) => {
            console.log(data);
            this._getInfo();
            this.$message.success('上架成功');
          })
          .catch(() => {
            this.$message.error('上架失败');
          });
      },
      handleWareHouse(row, idx, type) {
        console.log(row, 'kkkkk');
        this.rowData = row;
        this.$refs.wareHouseDailogRef.open(row, idx, type);
      },
      shelvesWarehouse(row, idx, type) {
        if (type == '产品') {
          for (let i = 0; i < this.infoData.outInDetailList.length; i++) {
            const batchNo = this.infoData.outInDetailList[i].batchNo;
            const categoryId = this.infoData.outInDetailList[i].categoryId;
            const categoryName = this.infoData.outInDetailList[i].categoryName;
            if (
              row.batchNo == batchNo &&
              row.categoryId == categoryId &&
              row.categoryName == categoryName
            ) {
              let data12 = row.outInDetailRecordRequestList.map((item) => ({
                ...item,
                areaId: '',
                areaName: '',
                goodsShelfId: '',
                goodsShelfName: '',
                goodsAllocationId: '',
                goodsAllocationName: ''
              }));
              this.$set(
                this.infoData.outInDetailList[i],
                'outInDetailRecordRequestList',
                data12
              );
            }
          }
        } else {
          for (let i = 0; i < this.infoData.outInDetailList.length; i++) {
            const batchNo = this.infoData.outInDetailList[i].batchNo;
            const categoryId = this.infoData.outInDetailList[i].categoryId;
            const categoryName = this.infoData.outInDetailList[i].categoryName;

            if (
              this.packingList[idx].batchNo == batchNo &&
              this.packingList[idx].categoryId == categoryId &&
              this.packingList[idx].categoryName == categoryName
            ) {
              let dataList = this.infoData.outInDetailList[
                i
              ].outInDetailRecordRequestList.filter((item) => item.areaId);
              for (let j = 0; j < dataList.length; j++) {
                const idd = dataList[j].id;
                if (this.packingList[idx].id == idd) {
                  this.$set(dataList[j], 'areaId', '');
                  this.$set(dataList[j], 'areaName', '');
                  this.$set(dataList[j], 'goodsShelfId', '');
                  this.$set(dataList[j], 'goodsShelfName', '');
                  this.$set(dataList[j], 'goodsAllocationId', '');
                  this.$set(dataList[j], 'goodsAllocationName', '');
                }
              }
            }
            console.log(this.packingList[idx].id, 'this.packingList[idx].id');
          }
        }
        // this.formDataData();

        storageApi
          .upperLowerShelves(this.infoData)
          .then((data) => {
            console.log(data);
            this._getInfo();
            this.$message.success('下架成功');
          })
          .catch(() => {
            this.$message.error('下架失败');
          });
      },
      pickingHandleScroll() {
        console.log('---------pickingHandleScroll------------');
        if (this.showPackingList.length < this.packingList.length) {
          if (this.packingList.length > this.pageSize) {
            this.pickingPageNum += 1;
          }
          this.pickingFetchData();
        }
      },
      pickingFetchData() {
        const start = (this.pickingPageNum - 1) * this.pageSize;
        const end = start + this.pageSize;
        this.showPackingList = this.showPackingList.concat(
          this.packingList.slice(start, end)
        );
      },
      materielHandleScroll() {
        console.log('---------materielHandleScroll------------');
        if (this.showMaterialList.length < this.materialList.length) {
          if (this.materialList.length > this.pageSize) {
            this.materielPageNum += 1;
          }
          this.materielFetchData();
        }
      },
      materielFetchData() {
        const start = (this.materielPageNum - 1) * this.pageSize;
        const end = start + this.pageSize;
        this.showMaterialList = this.showMaterialList.concat(
          this.materialList.slice(start, end)
        );
        console.log(this.showMaterialList);
      },
      ...mapActions('dict', ['requestDict']),
      getSceneState: useDictLabel(sceneState),
      handleAssetType(r) {
        let arr = r?.split(',');
        const filteredData = this.codeList.filter((item) =>
          arr?.includes(item.dictCode)
        );
        return filteredData.map((item) => item.dictValue).join(',');
      },
      tableRowClassName({ row, rowIndex }) {
        if (row.result == 2) {
          return 'warning-row';
        } else {
          return '';
        }
      },
      goBack() {
        this.$router.go(-1);
      },
      rowClass({ row, column, rowIndex, columnIndex }) {
        if (rowIndex === 1) {
          return {
            display: 'none',
            background: '#EEEEEE'
          };
        }
        return { background: '#0000' };
      },
      async getAllCategoryType() {
        const { data } = await allCategoryLevel();
        this.codeList = data.map((item) => {
          return { dictCode: item.id, dictValue: item.name };
        });
      },

      getDeptName() {
        if (this.extInfo.createUserId) {
          storageApi.getGroupById(this.extInfo.createUserId).then((res) => {
            this.extInfo.deptName = res?.groupName;
          });
        }
      },

      async _getInfo() {
        const res = await storageApi.getInboundDetailsById(
          this.$route.query.id
        );
        console.log('==============================res', res);
        this.infoData = res;
        this.extInfo = res.extInfo;
        //根据createUserId查部门
        this.getDeptName();
        this.productList = res.outInDetailList.map(
          (productItem, productIndex) => {
            return {
              ...productItem,
              index: this.productList.length + productIndex,
              outInDetailRecordRequestList:
                productItem.outInDetailRecordRequestList.map(
                  (packingItem, packingIndex) => {
                    return {
                      ...packingItem,
                      index:
                        this.productList.length +
                        productIndex +
                        '-' +
                        packingIndex, // 包装索引
                      parentIndex: this.productList.length + productIndex, // 物品索引
                      categoryName: productItem.categoryName,
                      categoryCode: productItem.categoryCode,
                      materialDetailList: packingItem.materialDetailList.map(
                        (materialItem, materialIndex) => {
                          return {
                            ...materialItem,
                            index:
                              this.productList.length +
                              productIndex +
                              '-' +
                              packingIndex +
                              '——' +
                              materialIndex, // 包装索引
                            parentIndex:
                              this.productList.length +
                              productIndex +
                              '-' +
                              packingIndex, // 物品索引
                            categoryName: productItem.categoryName,
                            categoryCode: productItem.categoryCode
                          };
                        }
                      )
                    };
                  }
                )
            };
          }
        );
        this.getPackingList();
        // // 获取包装维度数据
        // const arr = [];
        // for (const key in this.productList) {
        //   for (const k in this.productList[key].outInDetailRecordRequestList) {
        //     arr.push({
        //       ...this.productList[key].outInDetailRecordRequestList[k]
        //     });
        //   }
        // }
        // this.packingList = arr;
        // // 获取物料维度数据
        // let iArr = [];
        // arr.forEach((item) => {
        //   item.materialDetailList.forEach((ele) => {
        //     iArr.push({ ...ele });
        //   });
        // });
        // this.materialList = iArr;
        // console.log(this.packingList);
        // console.log(this.materialList);
        // this.pickingFetchData();
        // this.materielFetchData();
      },
      download(row) {
        if (row.storePath) {
          getFile({ objectName: row.storePath }, row.name);
        }
      },
      handleCurrentChange(e) {
        this.getPackingList();
      },
      handleSizeChange(e) {
        this.pages.pageNum = 1;
        this.getPackingList();
      },
      getPackingList() {
        storageApi
          .getOutInRecordsPage({
            ...this.pages,
            outInId: this.$route.query.id
          })
          .then((data) => {
            this.total = data.count;
            console.log(data.list, 'data.list');
            this.packingList = data.list;
          });
      },
      /**
       *
       *
       * 以下二维码功能
       */
      openQRCode(row, type) {
        this.$refs.printQRCodeRef.open(row, type);
      }
    }
  };
</script>

<style lang="scss" scoped>
  ::v-deep .warning-row {
    color: red;
  }

  ::v-deep .page-title {
    border-bottom: none;
  }

  ::v-deep .page-title-div {
    width: 100%;
  }

  .stepsStatus {
    width: 40%;
    margin: 0 auto;
  }

  .el-form-item {
    margin-bottom: 10px;
  }

  .p20 {
    padding: 20px;
  }

  .flex {
    display: flex;
  }

  .title {
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;

    span {
      font-size: 16px;
    }

    .col {
      padding-left: 40px;
      font-size: 14px;
      color: #aaaaaa;
    }
  }

  .degree {
    margin-right: 10px;
    padding: 0px 15px;
    color: #fff;
    font-size: 13px;
    line-height: 23px;
    border-radius: 23px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    span {
      width: 5px;
      height: 5px;
      border-radius: 100%;
      margin-right: 6px;
      background-color: #fff;
    }
  }

  .red {
    background-color: rgb(163, 0, 20);
  }

  .blue {
    background-color: #1989fa;
  }

  .createdInfo {
    justify-content: space-around;
    margin-top: 10px;
    font-size: 14px;

    .col {
      color: #6e6e6e;
      padding-right: 10px;
    }
  }

  .mt40 {
    margin-top: 40px;
  }

  .custSteps {
    margin-top: 20px;
    margin-left: 70px;

    .box {
      width: 158px;
      border: 1px solid #ccc;
      padding: 10px;
      flex-direction: row;
      flex-wrap: wrap;
      // justify-content: space-between;
      font-size: 12px;
      color: #9e9e9e;

      .x {
        width: 20px;
        height: 15px;
        margin-right: 5px;
      }

      .q {
        background-color: #d0e4d5;
      }

      .b {
        background-color: #1989fa;
      }

      .g {
        background-color: #157a2c;
      }

      .r {
        background-color: #a30014;
      }

      .a {
        align-items: center;
        margin-bottom: 10px;
      }

      .mr10 {
        margin-right: 10px;
      }

      .mb0 {
        margin-bottom: 0;
      }
    }

    .stepsInfo {
      // flex: 1;
      width: 483px;
    }
  }

  .mt20 {
    margin-top: 20px;
  }

  .content-detail {
    overflow: hidden;
  }

  .executor {
    font-size: 14px;

    .col {
      color: #6e6e6e;
      padding-right: 10px;
    }
  }

  .result {
    justify-content: space-around;
  }

  .mr20 {
    margin-right: 20px;
  }

  .details {
    font-size: 14px;
    margin-bottom: 10px;
  }

  .customSteps {
    margin-top: 40px;
    font-size: 14px;
    margin-left: 80px;

    .time {
      font-size: 12px;
      color: #6e6e6e;
      margin-right: 20px;
      position: relative;

      &::after {
        content: '';
        width: 1px;
        height: 100%;
        background-color: #157a2c;
        position: absolute;
        right: -26px;
      }
    }

    .flex:last-child {
      .time {
        &::after {
          display: none;
        }
      }
    }

    .round {
      margin-right: 20px;
      width: 10px;
      height: 10px;
      border-radius: 100%;
      background-color: #157a2c;
      position: relative;

      span {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 4px;
        height: 4px;
        background-color: #fff;
        border-radius: 100%;
        transform: translate(-2px, -2px);
      }
    }

    .text {
      .info {
        margin-top: 10px;
        width: 955px;
        background-color: #f0f3f3;
        overflow: hidden;
        padding: 10px;
        margin-bottom: 10px;
      }
    }
  }

  .switch_left li {
    border-right: 1px solid rgba(222, 222, 222, 1);
    border-left: 1px solid rgba(222, 222, 222, 1);
  }
</style>