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" v-if="infoData.bizType == 2">
                <el-form-item label="客户:">
                  <span>{{ infoData.clientName }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8" v-if="infoData.bizType == 2">
                <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 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">
              <template slot-scope="{ row }">
                <template>
                  {{ row.unitPrice ? row.unitPrice + '/元' : '' }}
                </template>
              </template>
            </el-table-column>

            <el-table-column label="金额" align="center" prop="contentImage" :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="产地" prop="provenance" :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="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="型号" 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="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>
  </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';

export default {
  components: { PageHeader, WareHouseDailog, mergeDetails, splitDetails },
  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: {}
    };
  },
  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.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;
        });
    }
  }
};
</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>