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

<template>
  <div class="ele-body">
    <el-card shadow="never">
      <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>{{ extInfo.documentSource }}</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.createTime }}</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"
            :max-height="300"
            :header-cell-style="rowClass"
            border
          >
            <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="批次号"
              prop="batchNo"
              align="center"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <!-- <el-table-column
              label="最小包装单元"
              align="center"
              width="120"
              prop="minPackingQuantity"
            >
              <template slot-scope="{ row, $index }">
                {{ row.minPackingQuantity }} {{ row.measureUnit }} /{{
                  row.packingUnit
                }}
              </template>
            </el-table-column> -->

            <el-table-column
              label="包装数量"
              v-if="clientEnvironmentId == 3"
              prop="packingQuantity"
              align="center"
            >
              <template slot-scope="{ row, $index }">
                {{ row.packingQuantity }} {{ row.packingUnit }}
              </template>
            </el-table-column>
            <el-table-column
              v-else
              label="包装数量"
              prop="packingQuantity"
              width="80"
            ></el-table-column>
            <el-table-column
              v-if="clientEnvironmentId == 3"
              label="最小包装单元"
              align="center"
              width="120"
              prop="minPackingQuantity"
            >
              <template slot-scope="{ row, $index }">
                {{ row.minPackingQuantity }} {{ row.measureUnit }} /{{
                  row.packingUnit
                }}
              </template>
            </el-table-column>
            <el-table-column
              v-else
              label="包装单位"
              prop="packingUnit"
            ></el-table-column>
            <el-table-column
              label="计量数量"
              prop="measureQuantity"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="计量单位"
              prop="measureUnit"
            ></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="price" align="center">
              <template slot-scope="{ row }">
                <template>
                  {{ row.price ? row.price : '-' + '元' }}/{{ row.measureUnit }}
                </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"
            >
            </el-table-column>
            <el-table-column
              label="仓库"
              prop="warehouseName"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
          </el-table>
        </div>
        <div class="mt20">
          <header-title :title="`包装明细`" size="16px"></header-title>
          <el-table
            ref="showPackingListTable"
            :data="showPackingList"
            tooltip-effect="dark"
            :max-height="300"
            :row-class-name="tableRowClassName"
            :header-cell-style="rowClass"
            border
            v-el-table-infinite-scroll="pickingHandleScroll"
          >
            <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="batchNo"
              :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="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="物料代号"
              width="200"
              prop="materielDesignation"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="{ row, $index }">
                <el-input
                  v-if="qualityInspectionItems.includes('materielDesignation')"
                  :ref="'packing_materielDesignation' + $index"
                  @keyup.native="
                    moveFocus(
                      $event,
                      $index,
                      'packing_materielDesignation',
                      '包装',
                      row
                    )
                  "
                  v-model="row.materielDesignation"
                ></el-input>
                <span v-else>{{ row.materielDesignation }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="客户代号"
              prop="clientCode"
              width="200"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="{ row, $index }">
                <el-input
                  v-if="qualityInspectionItems.includes('clientCode')"
                  :ref="'packing_clientCode' + $index"
                  @keyup.native="
                    moveFocus($event, $index, 'packing_clientCode', '包装', row)
                  "
                  v-model="row.clientCode"
                ></el-input>
                <span v-else>{{ row.clientCode }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="刻码"
              prop="engrave"
              width="200"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="{ row, $index }">
                <el-input
                  v-if="qualityInspectionItems.includes('engrave')"
                  :ref="'packing_engrave' + $index"
                  @keyup.native="
                    moveFocus($event, $index, 'packing_engrave', '包装', row)
                  "
                  v-model="row.engrave"
                ></el-input>
                <span v-else>{{ row.engrave }}</span>
              </template>
            </el-table-column>
            <el-table-column label="重量" prop="weight" width="100">
              <template slot-scope="{ row, $index }">
                <el-input
                  v-if="
                    row.measureUnit != row.weightUnit &&
                    qualityInspectionItems.includes('weight')
                  "
                  :ref="'packing_weight' + $index"
                  @keyup.native="
                    moveFocus($event, $index, 'packing_weight', '包装', row)
                  "
                  v-model.number="row.weight"
                  @input="weightInput($event, row, '包装')"
                ></el-input>
                <span v-else>{{ row.weight }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="重量单位"
              prop="weightUnit"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column label="质检结果" prop="result" width="120">
              <template slot-scope="{ row }">
                <el-select
                  v-if="qualityInspectionItems.includes('result')"
                  @change="changeWrapStatus($event, row, '包装')"
                  v-model="row.result"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in qualityResultsOptions"
                    :label="item.label"
                    :value="item.value"
                    :key="item.value"
                  >
                  </el-option>
                </el-select>
                <span v-else>{{ 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="productionDate"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              label="采购日期"
              prop="purchaseDate"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
          </el-table>
        </div>
        <div class="mt20">
          <header-title :title="`物料明细`" size="16px"> </header-title>
          <el-table
            ref="multipleTable"
            :data="showMaterialList"
            tooltip-effect="dark"
            :max-height="300"
            :row-class-name="tableRowClassName"
            :header-cell-style="rowClass"
            border
            style="width: 100%"
            stripe
            height="300px"
            v-el-table-infinite-scroll="materielHandleScroll"
          >
            <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="batchNo"></el-table-column>
            <el-table-column
              label="物料编码"
              prop="materialCode"
              :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="measureQuantity"
            ></el-table-column>
            <el-table-column
              label="计量单位"
              prop="measureUnit"
            ></el-table-column>
            <el-table-column
              label="物料代号"
              prop="materielDesignation"
              width="200"
            >
              <template slot-scope="{ row, $index }">
                <el-input
                  v-if="qualityInspectionItems.includes('materielDesignation')"
                  :ref="'material_materielDesignation' + $index"
                  @keyup.native="
                    moveFocus(
                      $event,
                      $index,
                      'material_materielDesignation',
                      '物料',
                      row
                    )
                  "
                  v-model="row.materielDesignation"
                ></el-input>
                <span v-else>{{ row.materielDesignation }}</span>
              </template>
            </el-table-column>
            <el-table-column label="客户代号" prop="clientCode" width="200">
              <template slot-scope="{ row, $index }">
                <el-input
                  v-if="qualityInspectionItems.includes('clientCode')"
                  :ref="'material_clientCode' + $index"
                  @keyup.native="
                    moveFocus(
                      $event,
                      $index,
                      'material_clientCode',
                      '物料',
                      row
                    )
                  "
                  v-model="row.clientCode"
                ></el-input>
                <span v-else>{{ row.clientCode }}</span>
              </template>
            </el-table-column>
            <el-table-column label="刻码" prop="engrave" width="200">
              <template slot-scope="{ row, $index }">
                <el-input
                  v-if="qualityInspectionItems.includes('engrave')"
                  :ref="'material_engrave' + $index"
                  @keyup.native="
                    moveFocus($event, $index, 'material_engrave', '物料', row)
                  "
                  v-model="row.engrave"
                ></el-input>
                <span v-else>{{ row.engrave }}</span>
              </template>
            </el-table-column>
            <el-table-column label="重量" prop="weight" width="100">
              <template slot-scope="{ row, $index }">
                <el-input
                  v-if="
                    row.measureUnit != row.weightUnit &&
                    qualityInspectionItems.includes('weight')
                  "
                  :ref="'material_weight' + $index"
                  @keyup.native="
                    moveFocus($event, $index, 'material_weight', '物料', row)
                  "
                  v-model.number="row.weight"
                  @input="weightInput($event, row, '物料')"
                ></el-input>
                <span v-else>{{ row.weight }}</span>
              </template>
            </el-table-column>
            <el-table-column label="重量单位" prop="weightUnit">
            </el-table-column>
            <el-table-column label="质检结果" prop="result" width="120">
              <template slot-scope="{ row }">
                <el-select
                  v-if="qualityInspectionItems.includes('result')"
                  @change="changeWrapStatus($event, row, '物料')"
                  v-model="row.result"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in qualityResultsOptions"
                    :label="item.label"
                    :value="item.value"
                    :key="item.value"
                  >
                  </el-option>
                </el-select>
                <span v-else>{{ qualityResults[row.result] }}</span>
              </template>
            </el-table-column>
            <el-table-column label="质检状态" prop="status" width="120">
              <template slot-scope="{ row }">
                <span>{{ qualityStatus[row.status] }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="submit">
        <el-button type="primary" @click="getStatus">保存</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
  import elTableInfiniteScroll from 'el-table-infinite-scroll';
  import { getFile } from '@/api/system/file/index.js';
  import storageApi from '@/api/warehouseManagement';
  import { allCategoryLevel } from '@/api/classifyManage';
  import {
    useDictLabel,
    sceneState,
    qualityResultsOptions,
    qualityResults,
    qualityStatus
  } from '@/utils/dict/index';
  import { mapGetters, mapActions } from 'vuex';
  import { deepClone } from '@/utils';
  export default {
    directives: {
      'el-table-infinite-scroll': elTableInfiniteScroll
    },
    props: {
      businessId: {
        type: String,
        default: ''
      },
      qualityInspectionItems: {
        type: Array,
        default: () => {
          return [
            'materielDesignation',
            'clientCode',
            'engrave',
            'weight',
            'result'
          ];
        }
      }
    },
    data() {
      return {
        newColumns: [], // 动态表头
        qualityFile: [], // 回执附件
        qualityResultsOptions, // 质检结果选项
        qualityStatus, // 质检状态 0未检 1已检
        qualityResults, // 质检结果 0无 1合格 2不合格
        productList: [], // 产品列表
        showPackingList: [], // 展示的包装列表
        packingList: [], // 包装列表
        showMaterialList: [], // 展示物料列表
        materialList: [], // 物料列表
        extInfo: {}, // 扩展信息
        pageSize: 20,
        pickingPageNum: 1,
        materielPageNum: 1,
        codeList: [],
        infoData: {},
        stepsTitle: '已完成',
        stepsStatus: 'success',
        active: 0
      };
    },
    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';
          }
        }
      }
    },
    computed: {
      ...mapGetters(['getDictValue']),
      clientEnvironmentId() {
        return this.$store.state.user.info.clientEnvironmentId;
      }
    },
    watch: {
      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
      }
    },
    created() {
      this.getFieldModel();
      this.requestDict('类型用途');
      this.getAllCategoryType();
      console.log('this.$route.query.id--', this.$route.query.id);
      this._getInfo(this.$route.query.id);
      console.log(
        'qualityInspectionItems-----------',
        this.qualityInspectionItems
      );
    },
    methods: {
      // 获取动态表头
      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];
        });
      },
      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) {
        const code = this.codeList.find((item) => item.dictCode == r);
        return code?.dictValue;
      },
      tableRowClassName({ row, rowIndex }) {
        console.log(row);
        if (row.result == 2) {
          return 'warning-row';
        } else {
          return '';
        }
      },
      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 };
        });
      },
      //获取质检状态(全部已检)
      async getStatus() {
        let packingAllChecked = true;
        let materialAllChecked = true;
        if (this.packingList?.length > 0) {
          packingAllChecked = this.packingList.every(
            (item) => item.status == 2
          );
        }
        if (this.materialList?.length > 0) {
          materialAllChecked = this.materialList.every(
            (item) => item.status == 2
          );
        }
        if (packingAllChecked && materialAllChecked) {
          // 处理包装数据
          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;
          let obj = deepClone(this.infoData);
          // 处理仓库id
          let warehouseId = [];
          let warehouseName = [];
          let warehouseIds = this.productList
            .map((item) => item.warehouseId)
            .flat();
          let warehouseNames = this.productList
            .map((item) => item.warehouseName)
            .flat();
          warehouseIds.forEach((item, index) => {
            if (!warehouseId.includes(item)) {
              warehouseId.push(item);
              warehouseName.push(warehouseNames[index]);
            }
          });
          obj.warehouseIds = warehouseId;
          obj.warehouseNames = warehouseName;
          console.log(obj);
          try {
            await storageApi.qualityInspection(obj);
            this.$router.push({
              path: '/warehouseManagement/stockManagement'
            });
          } catch (error) {
            this.$message.error('质检失败');
            return false;
          }
        } else {
          this.$message.error('请先完成包装和物料质检');
        }
      },
      // 选择质检结果改变质检状态
      changeWrapStatus(resultValue, row, type) {
        console.log(resultValue);
        switch (resultValue) {
          case 0:
            // 清空质检状态
            row.status = 0;
            break;
          default:
            // 默认已检质检状态
            row.status = 2;
            break;
        }
        if (type === '包装') {
          this.packingResultCahnge(resultValue, row);
        } else {
          this.materialResultCahnge(resultValue, row);
        }
      },
      // 包装质检结果修改
      packingResultCahnge(value, row) {
        // 修改物料质检结果( 1合格 2不合格)
        this.materialList.map((item, index) => {
          if (item.parentIndex === row.index) {
            this.$set(this.materialList[index], 'result', value);
            this.$set(this.materialList[index], 'status', 2);
          }
        });
      },
      // 物料质量结果修改
      materialResultCahnge(value, row) {
        // 修改包装质检结果
        let filterMaterialList = this.materialList.filter((item) => {
          return item.parentIndex == row.parentIndex;
        });
        let packingIndex = this.packingList.findIndex((item) => {
          return item.index == row.parentIndex;
        });
        let boolen = filterMaterialList.every((item) => {
          return item.result == 1;
        });
        this.$set(this.packingList[packingIndex], 'result', boolen ? 1 : 2);
        this.$set(this.packingList[packingIndex], 'status', 2);
      },
      // 重量限制
      weightInput(value, row, type) {
        const newValue = value.replace(/[^\d.]/g, ''); // 保留数字和小数点
        const decimalCount = (newValue.match(/\./g) || []).length; // 计算小数点的个数
        if (row.weight < 0) {
          row.weight = 0;
        } else if (row.weight > 9999) {
          row.weight = 9999;
        } else {
          if (decimalCount > 1) {
            // 如果小数点个数大于1，移除多余的小数点
            const lastIndex = newValue.lastIndexOf('.');
            row.weight =
              newValue.slice(0, lastIndex) + newValue.slice(lastIndex + 1);
          } else if (decimalCount === 1) {
            // 如果小数点个数等于1，允许小数点的输入
            row.weight = newValue;
          } else {
            row.weight = newValue === '' ? 0 : parseFloat(newValue); // 如果输入为空，则设为0
          }
        }
        if (type === '包装') {
          this.packingWeightCahnge(value, row);
        } else {
          this.materialWeightCahnge(row);
        }
      },
      // 包装重量修改
      packingWeightCahnge(value, row) {
        // 修改物品重量
        let filterPackingList = this.packingList.filter((item) => {
          return item.parentIndex === row.parentIndex;
        });
        let productIndex = this.productList.findIndex((item) => {
          return item.index === row.parentIndex;
        });
        let totalWeight = filterPackingList.reduce(
          (accumulator, currentValue) => {
            return this.$math.format(+accumulator + +currentValue.weight, 14);
          },
          0
        );
        this.$set(this.productList[productIndex], 'weight', totalWeight);
        // 修改拆分物料
        this.materialList.map((item, index) => {
          if (item.parentIndex === row.index) {
            console.log(value / row.measureQuantity);
            this.$set(
              this.materialList[index],
              'weight',
              this.$math.format(value / row.measureQuantity, 14) >= 0
                ? this.$math.format(value / row.measureQuantity, 14)
                : 0
            );
          }
        });
      },
      // 物料重量修改
      materialWeightCahnge(row) {
        // 修改包装重量
        let filterMaterialList = this.materialList.filter((item) => {
          return item.parentIndex === row.parentIndex;
        });
        let packingIndex = this.packingList.findIndex((item) => {
          return item.index === row.parentIndex;
        });
        let totalMaterialWeight = filterMaterialList.reduce(
          (accumulator, currentValue) => {
            return this.$math.format(+accumulator + +currentValue.weight, 14);
          },
          0
        );
        this.$set(
          this.packingList[packingIndex],
          'weight',
          totalMaterialWeight
        );
        // 修改物品重量
        let filterPackingList = this.packingList.filter((item) => {
          return (
            item.parentIndex === this.packingList[packingIndex].parentIndex
          );
        });
        let productIndex = this.productList.findIndex((item) => {
          return item.index === this.packingList[packingIndex].parentIndex;
        });
        let totalWeight = filterPackingList.reduce(
          (accumulator, currentValue) => {
            return this.$math.format(+accumulator + +currentValue.weight, 14);
          },
          0
        );
        this.$set(this.productList[productIndex], 'weight', totalWeight);
      },
      async _getInfo(id) {
        if (!id) return;
        const res = await storageApi.getInboundDetailsById(id);
        console.log('===', res);
        this.infoData = res;
        this.extInfo = res.extInfo;
        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
                          };
                        }
                      )
                    };
                  }
                )
            };
          }
        );
        // 获取包装维度数据
        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);
        }
      },
      // 键盘移动
      moveFocus(event, index, key, type, row) {
        let keyfield = [];
        let listLength = 0;
        switch (type) {
          case '包装':
            listLength = this.showPackingList.length;
            if (row.measureUnit != row.weightUnit) {
              keyfield = [
                'packing_materielDesignation',
                'packing_clientCode',
                'packing_engrave',
                'packing_weight'
              ];
            } else {
              keyfield = [
                'packing_materielDesignation',
                'packing_clientCode',
                'packing_engrave'
              ];
            }
            break;
          case '物料':
            listLength = this.showMaterialList.length;
            if (row.measureUnit != row.weightUnit) {
              keyfield = [
                'material_materielDesignation',
                'material_clientCode',
                'material_engrave',
                'material_weight'
              ];
            } else {
              keyfield = [
                'material_materielDesignation',
                'material_clientCode',
                'material_engrave'
              ];
            }
            break;
        }

        if (event.keyCode === 13) {
          // 回车
          if (
            index === listLength - 1 &&
            key === keyfield[keyfield.length - 1]
          ) {
            // 最后一行最后一个
            return;
          }

          this.$refs[key + index].blur();
          if (key === keyfield[keyfield.length - 1]) {
            // 当前行最后一个,跳转下一行第一个
            if (this.$refs[keyfield[0] + (index + 1)].value == 0) {
              this.$refs[keyfield[0] + (index + 1)].value = '';
            }
            this.$refs[keyfield[0] + (index + 1)].focus();
          } else {
            // 跳转下一个
            const nextkeyindex = keyfield.findIndex((k) => k === key) + 1;
            this.$nextTick(() => {
              if (this.$refs[keyfield[nextkeyindex] + index].value == 0) {
                this.$refs[keyfield[nextkeyindex] + index].value = '';
              }
              this.$refs[keyfield[nextkeyindex] + index].focus();
            });
          }
        }

        // 向上 =38
        if (event.keyCode === 38) {
          console.log('向上');
          if (index === 0) {
            // 第一行
            console.log('第一行无法向上');
            return;
          }
          this.$refs[key + index].blur();
          this.$nextTick(() => {
            if (this.$refs[key + (index - 1)].value == 0) {
              this.$refs[key + (index - 1)].value = '';
            }
            this.$refs[key + (index - 1)].focus();
          });
        }

        // 下 = 40
        if (event.keyCode === 40) {
          console.log('向下');
          if (index === listLength - 1) {
            // 最后一行
            console.log('最后一行无法向下');
            return;
          }
          this.$refs[key + index].blur();
          this.$nextTick(() => {
            if (this.$refs[key + (index + 1)].value == 0) {
              this.$refs[key + (index + 1)].value = '';
            }
            this.$refs[key + (index + 1)].focus();
          });
        }

        // 左 = 37
        if (event.keyCode === 37) {
          console.log('向左');
          if (index === 0 && key === keyfield[0]) {
            // 第一行第一个
            console.log('第一行第一个无法向左');
            return;
          }
          this.$refs[key + index].blur();
          if (key === keyfield[0]) {
            if (
              this.$refs[keyfield[keyfield.length - 1] + (index - 1)].value == 0
            ) {
              this.$refs[keyfield[keyfield.length - 1] + (index - 1)].value =
                '';
            }
            // 当前行第一个,跳转上一行最后一个
            this.$refs[keyfield[keyfield.length - 1] + (index - 1)].focus();
          } else {
            // 跳转上一个
            const prevkeyindex = keyfield.findIndex((k) => k === key) - 1;
            this.$nextTick(() => {
              if (this.$refs[keyfield[prevkeyindex] + index].value == 0) {
                this.$refs[keyfield[prevkeyindex] + index].value = '';
              }
              this.$refs[keyfield[prevkeyindex] + index].focus();
            });
          }
        }

        // 右 = 39
        if (event.keyCode === 39) {
          console.log('向右');
          if (
            index === listLength - 1 &&
            key === keyfield[keyfield.length - 1]
          ) {
            // 最后一行最后一个
            console.log('最后一行最后一个无法向左');
            return;
          }
          console.log(this.$refs);
          this.$refs[key + index].blur();
          if (key === keyfield[keyfield.length - 1]) {
            // 当前行最后一个,跳转下一行第一个
            if (this.$refs[keyfield[0] + (index + 1)].value == 0) {
              this.$refs[keyfield[0] + (index + 1)].value = '';
            }
            this.$refs[keyfield[0] + (index + 1)].focus();
          } else {
            // 跳转下一个
            const nextkeyindex = keyfield.findIndex((k) => k === key) + 1;
            this.$nextTick(() => {
              if (this.$refs[keyfield[nextkeyindex] + index].value == 0) {
                this.$refs[keyfield[nextkeyindex] + index].value = '';
              }
              this.$refs[keyfield[nextkeyindex] + index].focus();
            });
          }
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  .submit {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
  }
  ::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>