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

<template>
  <div class="ele-body">
    <el-card shadow="never">
      <header-title title="基本信息">
        <div class="right_control">
          <el-upload
            ref="fileUploadBtn"
            action="#"
            :auto-upload="false"
            :on-change="onChange"
            :limit="1"
            :show-file-list="false"
            accept=".xls,.xlsx"
          >
            <el-button type="primary">备品备件导入excel</el-button>
          </el-upload>
          <el-button type="primary" @click="back">返回</el-button>
        </div>
      </header-title>
      <el-form
        :model="formData"
        ref="formName"
        label-width="110px"
        :rules="rules"
      >
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="物品类型" prop="extInfo.assetType">
              <el-select
                style="width: 100%"
                multiple
                v-model="formData.extInfo.assetType"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in goodsLists"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="入库类型" prop="bizType">
              <el-select
                style="width: 100%"
                filterable
                placeholder="请选择"
                v-model="formData.bizType"
                clearable
              >
                <el-option
                  v-for="item in sceneState"
                  :key="item.code"
                  :value="item.code + ''"
                  :label="item.label"
                ></el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="6">
            <el-form-item label="单据来源" prop="documentSource">
              <el-input
                placeholder="请选择"
                v-model="formData.extInfo.documentSource"
                @click.native="openDocumentSourceDialog"
              >
                <el-button
                  @click="clearDocumentSource"
                  slot="append"
                  icon="el-icon-circle-close"
                ></el-button>
              </el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="6">
            <el-form-item label="权属部门" prop="deptName">
              <el-input
                placeholder="权属部门"
                disabled
                v-model="formData.extInfo.deptName"
                clearable
              />
            </el-form-item>
          </el-col> -->
          <el-col :span="6">
            <el-form-item label="入库登记人">
              <el-input
                placeholder="登记人"
                disabled
                v-model="formData.extInfo.createUserName"
                clearable /></el-form-item
          ></el-col>
          <el-col :span="6" v-if="formData.bizType == 2">
            <el-form-item label="供应商" prop="supplierName">
              <el-input
                placeholder="请输入"
                clearable
                v-model="formData.extInfo.supplierName"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="送货人" prop="fromUser">
              <el-input
                placeholder="请输入"
                v-model="formData.fromUser"
                clearable
              /> </el-form-item
          ></el-col>
          <el-col :span="6">
            <el-form-item label="送货人联系方式" prop="deliveryPhone">
              <el-input
                placeholder="请输入"
                v-model="formData.extInfo.deliveryPhone"
                clearable /></el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="备注" prop="remark">
              <el-input
                v-model="formData.remark"
                placeholder="请详细说明"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="inbound_details">
        <header-title title="产品信息">
          <el-button type="primary" @click="addProduct">添加</el-button>
        </header-title>
        <div class="form_table">
          <el-form
            ref="productListRef"
            :model="{ productList: productList }"
            :show-message="false"
          >
            <el-button
              v-if="productList.length != 0"
              type="success"
              plain
              style="margin-bottom: 20px; float: right; margin-right: 20px"
              size="mini"
              @click="listSaveArrs"
              >批量保存</el-button
            >
            <el-button
              v-if="productList.length != 0 && this.packingList.length == 0"
              type="success"
              plain
              style="margin-bottom: 20px; float: right; margin-right: 20px"
              size="mini"
              @click="handleWareHouse(productList[0])"
              >批量选择仓库</el-button
            >
            <el-table
              :header-cell-style="rowClass"
              :max-height="300"
              border
              ref="productListTable"
              :data="productList"
              tooltip-effect="dark"
            >
              <el-table-column
                label="序号"
                type="index"
                width="50"
                align="center"
              >
              </el-table-column>
              <el-table-column
                label="编码"
                prop="categoryCode"
                align="center"
                width="130"
                :show-overflow-tooltip="true"
              ></el-table-column>
              <el-table-column
                label="名称"
                align="center"
                width="200"
                prop="categoryName"
                :show-overflow-tooltip="true"
              ></el-table-column>
              <el-table-column
                label="型号"
                align="center"
                width="100"
                prop="categoryModel"
                :show-overflow-tooltip="true"
              ></el-table-column>
              <el-table-column
                label="规格"
                align="center"
                width="100"
                prop="specification"
                :show-overflow-tooltip="true"
              ></el-table-column>
              <el-table-column
                label="牌号"
                align="center"
                width="100"
                prop="brandNum"
                :show-overflow-tooltip="true"
              ></el-table-column>
              <el-table-column
                label="批次号"
                align="center"
                width="100"
                prop="batchNo"
              >
                <template slot-scope="{ row, $index }">
                  <template v-if="row.isSave">
                    {{ row.batchNo }}
                  </template>
                  <el-form-item
                    v-else
                    :prop="`productList.${$index}.batchNo`"
                    required
                  >
                    <el-input
                      :ref="'batchNo' + $index"
                      @keyup.native="
                        moveFocus($event, $index, 'batchNo', '产品', row)
                      "
                      v-model.number="row.batchNo"
                    >
                    </el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column
                label="最小包装单元"
                align="center"
                prop="minPackingQuantity"
                width="200"
              >
                <template slot-scope="{ row, $index }">
                  <template v-if="row.isSave">
                    {{ row.minPackingQuantity }}
                  </template>
                  <el-form-item
                    v-else
                    :prop="`productList.${$index}.minPackingQuantity`"
                    required
                  >
                    <el-input
                      type="number"
                      :ref="'minPackingQuantity' + $index"
                      @keyup.native="
                        moveFocus(
                          $event,
                          $index,
                          'minPackingQuantity',
                          '产品',
                          row
                        )
                      "
                      v-model="row.minPackingQuantity"
                      @input="minPackingQuantityChange(row, $event, $index)"
                    >
                      <template slot="append">
                        {{ row.measureUnit }} /{{ row.packingUnit }}
                      </template>
                    </el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column
                label="包装数量"
                prop="packingQuantity"
                width="150"
                align="center"
              >
                <template slot-scope="{ row, $index }">
                  <template v-if="row.isSave">
                    {{ row.packingQuantity }} {{ row.packingUnit }}
                  </template>
                  <el-form-item
                    v-else
                    :prop="`productList.${$index}.packingQuantity`"
                    required
                  >
                    <el-input
                      :ref="'packingQuantity' + $index"
                      @keyup.native="
                        moveFocus(
                          $event,
                          $index,
                          'packingQuantity',
                          '产品',
                          row
                        )
                      "
                      v-model.number="row.packingQuantity"
                      @input="packNum(row, $event, $index)"
                    >
                      <template slot="append">
                        {{ row.packingUnit ? row.packingUnit : '/' }}
                      </template>
                    </el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column
                label="计量数量"
                prop="measureQuantity"
                :show-overflow-tooltip="true"
              >
                <template slot-scope="{ row, $index }">
                  {{
                    $math.format(
                      row.minPackingQuantity * row.packingQuantity,
                      14
                    )
                  }}
                </template>
              </el-table-column>
              <el-table-column
                label="计量单位"
                prop="measureUnit"
                width="100"
                align="center"
              >
                <template slot-scope="{ row, $index }">
                  <template>
                    {{ row.measureUnit }}
                  </template>
                </template>
              </el-table-column>
              <el-table-column
                label="重量"
                align="center"
                prop="weight"
                :show-overflow-tooltip="true"
              >
                <template slot-scope="{ row, $index }">
                  {{ row.weight }}
                  <template slot="append">
                    {{ row.measureUnit }}
                  </template>
                </template>
              </el-table-column>
              <el-table-column
                label="重量单位"
                align="center"
                prop="weightUnit"
                :show-overflow-tooltip="true"
              >
                <template slot-scope="{ row, $index }">
                  {{ row.weightUnit }}
                  <template slot="append"> </template>
                </template>
              </el-table-column>
              <el-table-column
                label="单价"
                prop="price"
                width="200"
                align="center"
              >
                <template slot-scope="{ row, $index }">
                  <template v-if="row.isSave">
                    {{ row.price }}元/{{ row.measureUnit }}
                  </template>
                  <el-form-item v-else>
                    <el-input
                      type="number"
                      :ref="'price' + $index"
                      @keyup.native="
                        moveFocus($event, $index, 'price', '产品', row)
                      "
                      v-model.number="row.price"
                      placeholder="非必填"
                      @input="
                        (value) => (row.price = value.replace(/[^0-9.]+/g, ''))
                      "
                    >
                      <template slot="append">
                        元/{{ row.measureUnit }}
                      </template>
                    </el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column
                label="金额"
                align="center"
                prop="contentImage"
                :show-overflow-tooltip="true"
              >
                <template slot-scope="{ row, $index }">
                  {{
                    calcSumTotal(
                      row.packingQuantity,
                      row.minPackingQuantity,
                      row.price,
                      row
                    )
                  }}
                </template>
              </el-table-column>
              <el-table-column
                label="仓库"
                align="center"
                prop="warehouseName"
                :show-overflow-tooltip="true"
                width="300"
              >
                <template slot-scope="{ row, $index }">
                  <el-form-item
                    :prop="`productList.${$index}.warehouseId`"
                    required
                  >
                    <div
                      :class="
                        row.warehouseName
                          ? 'wareHouse_style'
                          : 'wareHouse_style red_color'
                      "
                      @click="handleWareHouse(row, $index)"
                    >
                      <span>
                        {{
                          row.warehouseName ? row.warehouseName : '请选择仓库'
                        }}
                      </span>
                    </div>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column
                label="采购原因"
                align="center"
                width="200"
                prop="purpose"
                :show-overflow-tooltip="true"
              >
                <template slot-scope="{ row, $index }">
                  <template v-if="row.isSave">
                    {{ row.purpose }}
                  </template>
                  <el-input
                    v-else
                    :ref="'purpose' + $index"
                    @keyup.native="
                      moveFocus($event, $index, 'purpose', '产品', row)
                    "
                    v-model="row.purpose"
                  >
                  </el-input>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                width="200"
                fixed="right"
                align="center"
              >
                <template slot="header" slot-scope="scope"> 操作 </template>
                <template slot-scope="{ row, $index }">
                  <el-button
                    type="text"
                    v-show="!row.isSave"
                    @click="listSave(row, $index)"
                    >保存</el-button
                  >
                  <el-button
                    type="text"
                    v-show="row.isSave"
                    @click="listEdit(row, $index)"
                    >编辑</el-button
                  >
                  <el-button type="text" @click="listDel(row, $index)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-form>
        </div>
      </div>
      <div v-if="showPackingList.length > 0" class="inbound_details">
        <header-title :title="`包装明细`">
          <div class="switch_right">
            <el-button
              style="margin-left: 20px"
              type="text"
              @click="dateSetting"
              >批量设置{{
                curDateType === 'productionDate' ? '生产日期' : '采购日期'
              }}</el-button
            >
          </div>
        </header-title>
        <el-table
          v-if="isWrapTable"
          ref="packingListTable"
          :data="showPackingList"
          tooltip-effect="dark"
          :key="formData.bizType"
          :header-cell-style="rowClass"
          style="width: 100%"
          border
          stripe
          :max-height="300"
          v-el-table-infinite-scroll="pickingHandleScroll"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            fixed="left"
            type="selection"
            align="center"
            width="50"
          >
          </el-table-column>
          <el-table-column label="序号" type="index" width="50">
          </el-table-column>
          <el-table-column
            label="编码"
            prop="categoryCode"
            width="130"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            label="名称"
            prop="categoryName"
            width="150"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            label="批次号"
            prop="batchNo"
            width="70"
          ></el-table-column>
          <el-table-column
            :label="`包装编码`"
            prop="packageNo"
            width="200"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            label="包装数量"
            prop="packingQuantity"
            width="80"
          ></el-table-column>
          <el-table-column
            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="isUnpack">
            <template slot-scope="{ row, $index }">
              {{ row.isUnpack ? '是' : '否' }}
            </template>
          </el-table-column>
          <el-table-column
            label="仓库"
            :show-overflow-tooltip="true"
            prop="warehouseName"
            width="200"
          ></el-table-column>
          <el-table-column
            label="物料代号"
            prop="materielDesignation"
            width="130"
          >
            <template slot-scope="{ row, $index }">
              <el-input
                v-if="!row.isPack"
                :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">
            <template slot-scope="{ row, $index }">
              <el-input
                v-if="!row.isPack"
                :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="140">
            <template slot-scope="{ row, $index }">
              <el-input
                v-if="!row.isPack"
                :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.isPack && row.measureUnit != row.weightUnit"
                :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">
            <template slot-scope="{ row }">
              {{ row.weightUnit }}
            </template>
          </el-table-column>

          <el-table-column label="质检结果" prop="result" width="120">
            <template slot-scope="{ row }">
              <el-select
                v-if="!row.isPack"
                @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-column label="生产日期" prop="" width="220">
            <template slot="header" slot-scope="scope">
              <el-select filterable v-model="curDateType">
                <el-option value="productionDate" label="生产日期"></el-option>
                <el-option value="purchaseDate" label="采购日期"></el-option>
              </el-select>
            </template>
            <template slot-scope="{ row }">
              <template v-if="formData.bizType == 5">
                {{ row[curDateType] }}
              </template>
              <el-date-picker
                v-else
                :disabled="row.isPack"
                size="small"
                v-model="row[curDateType]"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期"
              >
              </el-date-picker>
            </template>
          </el-table-column>
          <!-- <el-table-column label="操作" width="120" fixed="right">
            <template slot-scope="{ row, $index }">
              <el-button type="text" @click="wrapDelete(row, $index)">
                删除
              </el-button>
            </template>
          </el-table-column> -->
        </el-table>
      </div>
      <div v-if="showMaterialList.length > 0" class="inbound_details">
        <header-title :title="`物料明细`"></header-title>
        <el-table
          ref="materialListTable"
          :data="showMaterialList"
          tooltip-effect="dark"
          :key="formData.bizType"
          :header-cell-style="rowClass"
          style="width: 100%"
          border
          stripe
          :max-height="300"
          v-el-table-infinite-scroll="materielHandleScroll"
        >
          <el-table-column label="序号" type="index" width="50">
          </el-table-column>
          <el-table-column
            label="编码"
            prop="categoryCode"
            width="130"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            label="名称"
            prop="categoryName"
            width="150"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            label="批次号"
            prop="batchNo"
            width="70"
          ></el-table-column>
          <el-table-column
            label="物料编码"
            prop="materialCode"
            width="200"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            label="计量数量"
            prop="measureQuantity"
            width="90"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            width="80"
            label="计量单位"
            prop="measureUnit"
          ></el-table-column>
          <el-table-column
            label="物料代号"
            prop="materielDesignation"
            width="130"
          >
            <template slot-scope="{ row, $index }">
              <el-input
                v-if="!row.isPack"
                :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">
            <template slot-scope="{ row, $index }">
              <el-input
                v-if="!row.isPack"
                :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="140">
            <template slot-scope="{ row, $index }">
              <el-input
                v-if="!row.isPack"
                :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.isPack && row.measureUnit != row.weightUnit"
                :ref="'material_weight' + $index"
                @keyup.native="
                  moveFocus($event, $index, 'material_weight', '物料', row)
                "
                @input="weightInput($event, row, '物料')"
                v-model.number="row.weight"
              ></el-input>
              <span v-else>{{ row.weight }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="重量单位"
            prop="weightUnit"
            width="100"
          ></el-table-column>
          <el-table-column label="质检结果" prop="result" width="120">
            <template slot-scope="{ row }">
              <el-select
                v-if="!row.isPack"
                @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-column label="操作" width="120" fixed="right">
            <template slot-scope="{ row, $index }">
              <el-button type="text" @click="materialDelete(row, $index)">
                删除
              </el-button>
            </template>
          </el-table-column> -->
        </el-table>
      </div>
      <div v-if="showPackingList.length > 0" class="storage_btn">
        <el-button type="primary" :loading="saveLoading" @click="storage"
          >入库</el-button
        >
      </div>
    </el-card>
    <!-- 产品选择弹框 -->
    <selectType
      :visibleDialog.sync="visibleDialog"
      :title="title"
      :bizScene="formData.bizType"
      :treeIds="formData.extInfo.assetType"
      :loadTree.sync="loadTree"
      @selectTableData="addGoods"
    />
    <!-- 仓库选择弹框 -->
    <WarehousingDialog
      ref="wareHouseDailogRef"
      @selection="wareHouseSelection"
    ></WarehousingDialog>
    <!-- 生产日期、采购日期弹框 -->
    <el-dialog :visible.sync="dateVisible" title="选择日期" width="400px">
      <el-date-picker
        size="small"
        v-model="batchTime"
        type="datetime"
        style="width: 320px"
        value-format="yyyy-MM-dd HH:mm:ss"
        placeholder="选择日期"
      >
      </el-date-picker>
      <div style="text-align: right; margin-top: 20px">
        <el-button @click="dateVisible = false">取消</el-button>
        <el-button type="primary" @click="dateConfirm" :disabled="!batchTime"
          >确认</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import XLSX from 'xlsx';
  import elTableInfiniteScroll from 'el-table-infinite-scroll';
  import storageApi from '@/api/warehouseManagement/index.js';
  import WarehousingDialog from '../components/WarehousingDialog.vue';
  import { getCode } from '@/api/codeManagement/index.js';
  import selectType from './components/selectType';
  import warehouseDefinition from '@/api/warehouseManagement/warehouseDefinition';
  import { sceneState } from '@/utils/dict/index';
  import { getTreeByGroup } from '@/api/classifyManage';
  import outin from '@/api/warehouseManagement/outin';
  import { deepClone } from '@/utils';
  export default {
    components: {
      selectType,
      WarehousingDialog
    },
    // 虚拟列表滚动方法
    directives: {
      'el-table-infinite-scroll': elTableInfiniteScroll
    },
    data() {
      return {
        sceneState,
        saveLoading: false,
        dateVisible: false,
        loadTree: true,
        visibleDialog: false,
        title: '选择产品',
        goodsLists: [],
        formData: {
          bizType: '',
          extInfo: {
            assetType: []
          }
        },
        rules: {
          'extInfo.assetType': {
            required: true,
            message: '请选择物品类型',
            trigger: 'blur'
          },
          bizType: {
            required: true,
            message: '请选择入库场景',
            trigger: 'change'
          }
        },
        qualityResultsOptions: [
          {
            label: '合格',
            value: 1
          },
          {
            label: '不合格',
            value: 2
          }
        ],
        qualityStatus: {
          0: '未质检',
          1: '已质检'
        }, // 质检状态 0未检 1已检
        qualityResults: {
          1: '合格',
          2: '不合格'
        }, // 质检结果 1合格 2不合格
        productList: [], // 产品列表
        packingList: [], // 包装列表
        showPackingList: [], // 包装列表(虚拟列表)
        materialList: [], // 物料列表
        showMaterialList: [], // 物料列表(虚拟列表)
        curDateType: 'productionDate',
        packingListSelected: [], // 包装选择列表
        isWrapTable: true, // 解决表格不刷新问题（包装）
        currentPackingQuantity: '', // 当前包装数量
        batchTime: '', // 生产日期、采购日期
        pageSize: 20, // 物料和包装列表条数
        pickingPageNum: 1, // 包装虚拟分页页数
        materielPageNum: 1 // 物料虚拟分页页数
      };
    },
    computed: {
      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.getListItems();
      this.initUserInfo();
      if (this.$route.query.id) {
        storageApi
          .getApplystorageDetailById(this.$route.query.id)
          .then(async (data) => {
            console.log(data);
            this.formData.extInfo.assetType = [data.rootCategoryLevelId];
            this.formData.bizType = String(data.type);
            this.formData.extInfo.documentSource = data.code;
            const batchNo = await getCode('lot_number_code');
            this.productList = data.detailList.map((item, index) => {
              return {
                index: this.productList.length + index,
                categoryId: item.categoryId, // 物品id
                categoryName: item.categoryName, // 物品名称
                categoryCode: item.categoryCode, // 物品编码
                categoryModel: item.modelType, // 物品型号
                specification: item.specification, // 规格
                brandNum: item.brandNum, // 牌号
                batchNo: batchNo, // 批次号
                minPackingQuantity: item.quantity, // 最小包装单元数量
                packingQuantity: 1, // 包装数量
                packingUnit: item.packingUnit, // 包装单位
                measureQuantity: 0, // 计量数量
                measureUnit: item.measuringUnit, // 计量单位
                netWeight: item.netWeight > -1 ? item.netWeight : 0, // 净重
                weight: item.packingWeight, // 重量
                weightUnit: item.weightUnit, // 重量单位
                totalMoney: '', // 总价
                price: item.price, // 单价
                purpose: item.purpose, // 用途
                isUnpack: item.isUnpack, // 是否允许拆包
                warehouseId: item.warehouseId, // 仓库Id
                warehouseName: item.warehouseName, // 仓库名称
                warehouseIds: [item.warehouseId],
                warehouseNames: [item.warehouseName]
              };
            });
            this.$nextTick(() => {
              this.listSaveArrs();
            });
          });
      }
    },
    methods: {
      // 初始化当前用户信息
      async initUserInfo() {
        const res = await warehouseDefinition.tree();
        let info = JSON.parse(localStorage.getItem('info'));
        let obj = res.find(
          (item) => item.id === info.deptIds[info.deptIds.length - 1]
        );
        if (!obj) return;
        this.formData.extInfo.deptCode = obj.id;
        this.formData.extInfo.deptName = obj.name;
        this.formData.extInfo.createUserName = info.name;
        this.formData.createUserId = info.userId;
      },
      // 获取物品列表
      async getListItems() {
        const { data } = await getTreeByGroup({ type: 2 });
        this.goodsLists = data;
      },
      // 打开单据来源弹窗
      openDocumentSourceDialog() {
        console.log('打开单据来源弹窗');
      },
      // 清除单据来源
      clearDocumentSource() {
        this.formData.extInfo.documentSource = '';
      },
      // 返回
      back() {
        this.$router.go(-1);
      },
      // 添加产品
      addProduct() {
        if (this.formData.extInfo.assetType.length <= 0) {
          return this.$message.error('请选择物品类型');
        }
        if (!this.formData.bizType) {
          return this.$message.error('请选择入库类型');
        }
        this.visibleDialog = true;
      },
      // 键盘移动
      moveFocus(event, index, key, type, row) {
        let keyfield = [];
        let listLength = 0;
        switch (type) {
          case '产品':
            listLength = this.productList.length;
            keyfield = [
              'batchNo',
              'minPackingQuantity',
              'packingQuantity',
              'price',
              'purpose'
            ];
            break;
          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();
            });
          }
        }
      },
      handleAvatarSuccess() {
        this.$refs.fileUploadBtn.clearFiles(); //上传成功之后清除历史记录**加粗样式**
      },
      async onChange(file) {
        console.log(XLSX);
        this.warehousingMaterialList = [];
        this.resultArray = [];
        const loading = this.$loading({
          lock: true,
          text: '加载中...'
        });
        /**
         * 1. 使用原生api去读取好的文件
         * */
        // console.log("原始上传的文件", file);
        // 读取文件不是立马能够读取到的，所以是异步的，使用Promise
        let dataBinary = await new Promise((resolve) => {
          // Web API构造函数FileReader，可实例化对象，去调用其身上方法，去读取解析文件信息
          let reader = new FileReader(); // https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
          // console.log("实例化对象有各种方法", reader);
          reader.readAsBinaryString(file.raw); // 读取raw的File文件
          reader.onload = (ev) => {
            // console.log("文件解析流程进度事件", ev);
            resolve(ev.target.result); // 将解析好的结果扔出去，以供使用
          };
        });
        // console.log("读取出的流文件", dataBinary);

        /**
         * 2. 使用xlsx插件去解析已经读取好的二进制excel流文件
         * */
        let workBook = XLSX.read(dataBinary, {
          type: 'binary',
          cellDates: true
        });
        // excel中有很多的sheet，这里取了第一个sheet：workBook.SheetNames[0]
        let firstWorkSheet = workBook.Sheets[workBook.SheetNames[0]];
        // 分为第一行的数据，和第一行下方的数据
        // const header = this.getHeaderRow(firstWorkSheet);
        // console.log('读取的excel表头数据（第一行）', header);
        const xlsxData = XLSX.utils.sheet_to_json(firstWorkSheet);
        console.log('读取所有excel数据', xlsxData);
        // let modelTypeList = xlsxData.map((item) => {
        //   return item['型号'];
        // });
        // let nameList = xlsxData.map((item) => {
        //   return item['物品名称'];
        // });
        let codeList = xlsxData.map((item) => {
          return item['sap物料码'];
        });
        let functionType = {};
        xlsxData.map((item) => {
          functionType[item['sap物料码']] = item['采购原因'];
        });
        this.formData.extInfo.assetType = ['6']; //备品备件
        this.formData.bizType = '2'; // 采购入库
        outin
          .getListByNameOrModeType({
            // modelTypeList,
            // nameList,
            codeList,
            categoryLevelId: '6'
          })
          .then(async (data) => {
            console.log('查询到的备件数据', data);
            const batchNo = await getCode('lot_number_code');
            // 添加包装数量和最小包装单元
            this.productList = data.map((item, index) => {
              console.log(xlsxData);
              let filterArray = xlsxData.filter(
                (xlsxItem) => xlsxItem['sap物料码'] == item.code
              );
              console.log(filterArray);
              return {
                index: this.productList.length + index,
                categoryId: item.id, // 物品id
                categoryName: item.name, // 物品名称
                categoryCode: item.code, // 物品编码
                categoryModel: item.modelType, // 物品型号
                specification: item.specification, // 规格
                brandNum: item.brandNum, // 牌号
                batchNo: batchNo, // 批次号
                minPackingQuantity: filterArray[0]['数量'], // 最小包装单元数量
                packingQuantity: 1, // 包装数量
                packingUnit: item.packingUnit, // 包装单位
                measureQuantity: 0, // 计量数量
                measureUnit: item.measuringUnit, // 计量单位
                netWeight: item.netWeight > -1 ? item.netWeight : 0, // 净重
                weight: 0, // 重量
                weightUnit: item.weightUnit, // 重量单位
                totalMoney: '', // 总价
                price: item.price, // 单价
                purpose: functionType[item.code], // 用途
                isUnpack: item.isUnpack // 是否允许拆包
              };
            });
            console.log(this.productList);
            this.handleAvatarSuccess();
            loading.close();
          })
          .catch(() => {
            loading.close();
          });
      },
      // 入库
      storage() {
        let boolen = this.productList.every((item) => item.isSave);
        if (!boolen) {
          this.$message.warning('请先保存所有产品信息');
          return;
        }
        // 处理包装数据
        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.formData.outInDetailList = this.productList;
        let obj = deepClone(this.formData);
        // 处理物品类型assetType
        obj.extInfo.assetType = obj.extInfo.assetType.join(',');
        // 处理仓库id
        let warehouseId = [];
        let warehouseName = [];
        let warehouseIds = this.productList
          .map((item) => item.warehouseIds)
          .flat();
        let warehouseNames = this.productList
          .map((item) => item.warehouseNames)
          .flat();
        warehouseIds.forEach((item, index) => {
          if (!warehouseId.includes(item)) {
            warehouseId.push(item);
            warehouseName.push(warehouseNames[index]);
          }
        });
        obj.warehouseIds = warehouseId;
        obj.warehouseNames = warehouseName;
        // 是否需要审核(0审核 1跳过审核)
        if (obj.bizType == '12') {
          obj.isSkip = 1;
        } else {
          obj.isSkip = 0;
        }
        // obj.isSkip = 1;
        console.log(obj);
        this.saveLoading = true;
        storageApi
          .storage(obj)
          .then(async (res) => {
            console.log('入库成功', res);
            if (res.code == 0) {
              try {
                // 委外入库（非采购）
                if (obj.bizType == '12') {
                  await storageApi.qualityInspectionTwo({
                    outInId: res.data[0]
                  });
                } else {
                  await storageApi.submitTwo({ outInId: res.data[0] });
                }
                this.$message.success('入库成功');
                this.saveLoading = false;
                this.$router.push('/warehouseManagement/stockManagement');
              } catch (error) {
                this.saveLoading = false;
                console.log('提交流程失败', error);
              }
            }
          })
          .catch((err) => {
            console.log('入库失败', err);
            this.saveLoading = false;
          });
      },
      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);
      },
      // 日期选择
      dateConfirm() {
        this.packingListSelected.forEach((item) => {
          this.$set(item, this.curDateType, this.batchTime);
        });
        this.batchTime = '';
        this.dateVisible = false;
      },
      // 包装重量修改
      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);
      },
      // 包装质检结果修改
      packingResultCahnge(value, row) {
        // 修改物料质检结果( 1合格 2不合格)
        this.materialList.map((item, index) => {
          if (item.parentIndex === row.index) {
            this.$set(this.materialList[index], 'result', value);
          }
        });
      },
      // 物料质量结果修改
      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);
      },
      // 重量限制
      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);
        }
      },
      //计算金额
      calcSumTotal(packingQuantity, minPackingQuantity, price, row) {
        //最小包装单元,包装数量,单价
        const total = {
          packingQuantity: Number(packingQuantity > 0 ? packingQuantity : 0),
          minPackingQuantity: Number(
            minPackingQuantity > 0 ? minPackingQuantity : 0
          ),
          price: Number(price > 0 ? price : 0)
        };
        let number = Number(
          this.$math.format(
            total.packingQuantity * total.minPackingQuantity * total.price,
            14
          )
        );

        row.totalMoney = number;
        return number;
      },

      // 包装维度最小包装单元改变——>总重量
      minPackingQuantityChange(row, value, index) {
        console.log(value);
        if (row.measureUnit !== 'KG') {
          if (value.replace(/^(0+)|[^\d]+/g, '') > 9999) {
            this.$set(this.productList[index], 'minPackingQuantity', 9999);
          } else {
            this.$set(
              this.productList[index],
              'minPackingQuantity',
              value.replace(/^(0+)|[^\d]+/g, '')
            );
          }
        } else {
          if (value < 1) {
            this.$set(this.productList[index], 'minPackingQuantity', 1);
          } else if (value > 9999) {
            this.$set(this.productList[index], 'minPackingQuantity', 9999);
          }
        }
        if (row.packingQuantity >= 0 && value >= 0) {
          this.packNum(row, row.packingQuantity, index);
        }
      },
      // 包装数量过滤处理改变——>总重量
      packNum(row, value, index) {
        const total = {
          minPackingQuantity: Number(
            row.minPackingQuantity > 0
              ? row.minPackingQuantity > 9999
                ? 9999
                : row.minPackingQuantity
              : 0
          ),
          packingQuantity: Number(
            row.packingQuantity > 0
              ? row.packingQuantity > 9999
                ? 9999
                : row.packingQuantity
              : 0
          )
        };
        const totals = Number(
          this.$math.format(
            total.minPackingQuantity * total.packingQuantity,
            14
          )
        );
        if (row.measureUnit == row.weightUnit) {
          row.weight = Number(
            this.$math.format(
              total.minPackingQuantity *
                1 *
                Number(total.packingQuantity).toFixed(2),
              14
            )
          );
        } else {
          row.weight = Number(
            this.$math.format(
              totals *
                (row.netWeight > 0 ? Number(row.netWeight).toFixed(2) : 0),
              14
            )
          );
        }
        this.$set(this.productList[index], 'measureQuantity', totals);
        // 清空仓库
        this.$set(this.productList[index], 'warehouseId', '');
        this.$set(this.productList[index], 'warehouseName', '');
        if (value.replace(/^(0+)|[^\d]+/g, '') > 9999) {
          this.$set(this.productList[index], 'packingQuantity', 9999);
        } else {
          this.$set(
            this.productList[index],
            'packingQuantity',
            value.replace(/^(0+)|[^\d]+/g, '')
          );
        }
        // return (row.packingQuantity = value.replace(/^(0+)|[^\d]+/g, ''));
      },
      // 表格样式
      rowClass({ row, column, rowIndex, columnIndex }) {
        if (rowIndex === 1) {
          return {
            display: 'none',
            background: '#EEEEEE'
          };
        }
        return { background: '#0000' };
      },
      // 添加物品明细
      async addGoods(data) {
        const batchNo = await getCode('lot_number_code');
        let productList = data.map((item, index) => {
          return {
            index: this.productList.length + index,
            categoryId: item.id, // 物品id
            categoryName: item.name, // 物品名称
            categoryCode: item.code, // 物品编码
            categoryModel: item.listSavemodelType, // 物品型号
            specification: item.specification, // 规格
            brandNum: item.brandNum, // 牌号
            batchNo: batchNo, // 批次号
            minPackingQuantity: '', // 最小包装单元数量
            packingQuantity: '', // 包装数量
            packingUnit: item.packingUnit, // 包装单位
            measureQuantity: 0, // 计量数量
            measureUnit: item.measuringUnit, // 计量单位
            netWeight: item.netWeight > -1 ? item.netWeight : 0, // 净重
            weight: 0, // 重量
            weightUnit: item.weightUnit, // 重量单位
            totalMoney: '', // 总价
            price: item.price, // 单价
            purpose: '', // 用途
            isUnpack: item.isUnpack // 是否允许拆包
          };
        });
        this.productList = this.productList.concat(productList);
      },
      // 物品保存验证表单（批量）
      validateForm() {
        return new Promise(async (resolve, reject) => {
          let list = this.productList.map(async (row, index) => {
            let fileds = [
              `productList.${index}.batchNo`,
              `productList.${index}.minPackingQuantity`,
              `productList.${index}.packingQuantity`,
              `productList.${index}.warehouseId`
            ];
            console.log(fileds);
            if (row.isSave) {
              return Promise.resolve(true);
            } else {
              return await Promise.all(
                fileds.map(
                  (item) =>
                    new Promise(async (res, rej) => {
                      this.$refs.productListRef.validateField(item, (err) => {
                        if (err) {
                          rej(err);
                        } else {
                          res(true);
                        }
                      });
                    })
                )
              );
            }
          });
          console.log(list);
          Promise.all(list)
            .then(() => {
              console.log('保存成功！');
              resolve();
            })
            .catch((err) => {
              console.log('保存失败！');
              this.$message.error('请填入必填项！');
              reject(err);
            });
        });
      },
      // 产品批量保存
      async listSaveArrs() {
        this.validateForm()
          .then(async () => {
            // 批量获取包装编码并处理
            let packingCodePrams = this.productList.map((row) => {
              if (row.isSave) {
                return {};
              } else {
                return {
                  assetCode: row.categoryCode + row.index,
                  batchNum: row.batchNo,
                  num: row.packingQuantity
                };
              }
            });
            let filterPackingCodePrams = packingCodePrams.filter(
              (item) => item.assetCode
            );
            let { data } = await storageApi.getAssetNum(filterPackingCodePrams);
            let packingCodeList = [];
            packingCodePrams.forEach((item, index) => {
              packingCodeList[index] = data.filter(
                (ite) => ite.assetCode == item.assetCode
              );
            });
            // 批量生成包装
            this.productList.map((row, index) => {
              if (!row.isSave) {
                this.generateWrappers(row, index, packingCodeList[index]);
                this.$set(this.productList[index], 'isSave', true);
              }
            });
            // 加载虚拟列表数据(分页)
            // this.pickingFetchData();
            // this.materielFetchData();
          })
          .catch((err) => {
            console.log(err);
          });
      },
      // 物品保存验证表单（单独）
      validateFormIndividually(index) {
        return new Promise(async (resolve) => {
          console.log(index);
          let fileds = [
            `productList.${index}.batchNo`,
            `productList.${index}.minPackingQuantity`,
            `productList.${index}.packingQuantity`,
            `productList.${index}.warehouseId`
          ];
          Promise.all(
            fileds.map(
              (item) =>
                new Promise(async (res, rej) => {
                  this.$refs.productListRef.validateField(item, (err) => {
                    if (err) {
                      rej(err);
                    } else {
                      res(true);
                    }
                  });
                })
            )
          )
            .then(() => {
              resolve();
            })
            .catch(() => {
              this.$message.error('请填入必填项！');
            });
        });
      },
      // 产品编辑
      listEdit(row) {
        console.log(row);
        this.$set(row, 'isSave', false);
        // 重新计算重量
        const totals = Number(
          this.$math.format(row.minPackingQuantity * row.packingQuantity, 14)
        );
        if (row.measureUnit == row.weightUnit) {
          row.weight = Number(
            this.$math.format(
              row.minPackingQuantity *
                1 *
                Number(row.packingQuantity).toFixed(2),
              14
            )
          );
        } else {
          row.weight = Number(
            this.$math.format(
              totals *
                (row.netWeight > 0 ? Number(row.netWeight).toFixed(2) : 0),
              14
            )
          );
        }
        console.log(row);
        this.deletePackingAndMaterial(row);
      },
      // 根据产品信息删除包装和物料
      deletePackingAndMaterial(row) {
        // 删除包装(去掉不相同的包装)
        this.packingList = this.packingList.filter(
          (item) => item.parentIndex !== row.index
        );
        this.showPackingList = this.showPackingList.filter(
          (item) => item.parentIndex !== row.index
        );
        this.pickingPageNum = Math.ceil(
          this.showPackingList.length / this.pageSize
        );
        console.log('包装当前页数');
        console.log(this.pickingPageNum);
        // 删除物料(获取相同物料)
        let packingIndexs = this.packingList.map((item) => item.index);
        this.materialList = this.materialList.filter((item) =>
          packingIndexs.includes(item.parentIndex)
        );
        this.showMaterialList = this.showMaterialList.filter((item) =>
          packingIndexs.includes(item.parentIndex)
        );
        this.materielPageNum = Math.ceil(
          this.showMaterialList.length / this.pageSize
        );
        console.log('物料当前页数');
        console.log(this.showMaterialList.length);
        console.log(this.pageSize);
        console.log(this.materielPageNum);
      },
      // 产品保存操作
      listSave(row, index) {
        this.validateFormIndividually(index).then(async () => {
          console.log('保存成功');
          // 获取包装编码列表
          const { data } = await storageApi.getAssetNum([
            {
              assetCode: row.categoryCode + row.index,
              batchNum: row.batchNo,
              num: row.packingQuantity
            }
          ]);
          this.generateWrappers(row, index, data);
          this.$set(this.productList[index], 'isSave', true);
          // 加载虚拟列表数据(分页)
          // this.pickingFetchData();
          // this.materielFetchData();
        });
      },
      //入库明细删除
      listDel(row, index) {
        this.productList.splice(index, 1);
        this.deletePackingAndMaterial(row);
      },
      // 打开仓库弹框
      handleWareHouse(row, idx) {
        if (idx > -1) {
          if (row.packingQuantity > 0) {
            this.$refs.wareHouseDailogRef.open(row.packingQuantity, idx);
          } else {
            this.$message.error('请先填写包装数量！');
          }
        } else {
          let boolen = this.productList.every(
            (item) =>
              item.packingQuantity == this.productList[0].packingQuantity
          );
          if (boolen) {
            if (row.packingQuantity > 0) {
              this.$refs.wareHouseDailogRef.open(row.packingQuantity, idx);
            } else {
              this.$message.error('请先填写包装数量！');
            }
          } else {
            this.$message.error('请保证产品包装数量一致！');
          }
        }
      },
      wareHouseSelection(argum, idx) {
        console.log(argum);
        console.log(idx);
        // 方便包装遍历获取仓库id和名称
        let warehouseIds = [];
        let warehouseNames = [];
        argum.forEach((item) => {
          for (let index = 0; index < item.packingQuantity; index++) {
            warehouseIds.push(item.warehouseId);
            warehouseNames.push(item.warehouseName);
          }
        });
        console.log(warehouseIds);
        console.log(warehouseNames);
        if (idx > -1) {
          this.$set(
            this.productList[idx],
            'warehouseId',
            argum.map((item) => item.warehouseId).join(',')
          );
          this.$set(
            this.productList[idx],
            'warehouseName',
            argum.map((item) => item.warehouseName).join(',')
          );
          this.$set(this.productList[idx], 'warehouseIds', warehouseIds);
          this.$set(this.productList[idx], 'warehouseNames', warehouseNames);
        } else {
          this.productList.map((item, index) => {
            this.$set(
              this.productList[index],
              'warehouseId',
              argum.map((item) => item.warehouseId).join(',')
            );
            this.$set(
              this.productList[index],
              'warehouseName',
              argum.map((item) => item.warehouseName).join(',')
            );
            this.$set(this.productList[index], 'warehouseIds', warehouseIds);
            this.$set(
              this.productList[index],
              'warehouseNames',
              warehouseNames
            );
          });
        }
        this.$forceUpdate();
      },
      // 生成包装
      generateWrappers(row, productIndex, packingCodeList) {
        let packingList = [];
        for (let index = 0; index < row.packingQuantity; index++) {
          let item = {
            index: row.index + '-' + index, // 包装索引
            warehouseId: row.warehouseIds[index], // 仓库id
            warehouseName: row.warehouseNames[index], // 仓库名称
            categoryName: row.categoryName, // 产品名称
            categoryCode: row.categoryCode, // 产品编码
            parentIndex: row.index, // 产品索引
            batchNo: row.batchNo, // 批次号
            packageNo: packingCodeList[index].onlyCode, // 包装编码
            packingQuantity: 1, // 包装数量
            packingUnit: row.packingUnit, // 包装单位
            measureQuantity: row.minPackingQuantity, // 计量数量
            measureUnit: row.measureUnit, // 计量单位
            weight: Number(
              this.$math.format(row.weight / row.packingQuantity, 14)
            ), // 重量
            weightUnit: row.weightUnit, // 重量单位
            barcodes: '', // 发货条码
            clientCode: '', // 客户代号
            materielDesignation: '', // 物料代号
            engrave: '', // 刻码
            isUnpack: row.isUnpack, // 是否允许拆包
            productionDate: '', // 生产日期
            purchaseDate: '', // 采购时间
            result: 1, // 结果(1合格 2不合格)
            status: 1 // 状态(0=未质检 1已质检)
          };
          packingList.push(item);
        }

        // 单独点击保存并插入对应位置(包装)
        // if (productIndex > -1) {
        if (productIndex == 0) {
          this.packingList.splice(productIndex, 0, ...packingList);
        } else {
          let packingIndex = this.packingList.findLastIndex(
            (item) => item.parentIndex === productIndex - 1
          );
          this.packingList.splice(packingIndex + 1, 0, ...packingList);
        }
        // } else {
        //   // 批量点击生成包装
        //   this.packingList = this.packingList.concat(packingList);
        // }

        // 单独点击保存并插入对应位置(物料)
        let materialList = packingList
          .map((item) => {
            if (item.isUnpack) {
              return this.generateMaterial(item);
            } else {
              return [];
            }
          })
          .flat();
        console.log(materialList);
        if (materialList.length > 0) {
          // if (productIndex > -1) {
          if (productIndex == 0) {
            this.materialList.splice(0, 0, ...materialList);
          } else {
            let preLastPackingIndex = this.packingList.findLastIndex((ite) => {
              return ite.parentIndex <= productIndex - 1 && ite.isUnpack;
            });
            // console.log('preLastPackingIndex-------', preLastPackingIndex);
            // console.log(this.packingList);
            // console.log(this.packingList[preLastPackingIndex]);
            // console.log(this.materialList);
            // console.log(this.packingList[preLastPackingIndex].index);
            let preLastMaterialIndex = this.materialList.findLastIndex(
              (ite) => {
                return (
                  ite.parentIndex == this.packingList[preLastPackingIndex].index
                );
              }
            );
            // console.log('preLastMaterialIndex-------', preLastMaterialIndex);
            this.materialList.splice(
              preLastMaterialIndex + 1,
              0,
              ...materialList
            );
          }
          // } else {
          //   this.materialList = this.materialList.concat(materialList);
          // }
          console.log(this.materialList);
        }
      },
      // 生成物料
      generateMaterial(row) {
        let materialList = [];
        for (let index = 0; index < row.measureQuantity; index++) {
          materialList.push({
            materialCode: row.packageNo + index.toString().padStart(4, '0'), // 物料编码
            index: row.index + '——' + index, // 包装索引
            warehouseId: row.warehouseId, // 仓库id
            warehouseName: row.warehouseName, // 仓库名称
            categoryName: row.categoryName, // 产品名称
            categoryCode: row.categoryCode, // 产品编码
            parentIndex: row.index, // 产品索引
            batchNo: row.batchNo, // 批次号
            packageNo: row.packageNo, // 包装编码
            measureQuantity: 1, // 计量数量
            measureUnit: row.measureUnit, // 计量单位
            weight: Number(
              this.$math.format(row.weight / row.packingQuantity, 14)
            ), // 重量
            weightUnit: row.weightUnit, // 重量单位
            barcodes: '', // 发货条码
            clientCode: '', // 客户代号
            materielDesignation: '', // 物料代号
            engrave: '', // 刻码
            result: 1, // 结果(1合格 2不合格)
            status: 1 // 状态(0=未质检 1已质检)
          });
        }
        return materialList;
      },
      // 设置时间
      dateSetting() {
        if (!this.packingListSelected.length) {
          return this.$message.error(`请选择${this.title}明细！`);
        }
        this.dateVisible = true;
      },
      // 选择包装列表
      handleSelectionChange(val) {
        this.packingListSelected = val;
      },
      // 选择质检结果改变质检状态
      changeWrapStatus(resultValue, row, type) {
        console.log(resultValue);
        switch (resultValue) {
          case '0':
            // 清空质检状态
            row.status = 0;
            break;
          default:
            // 默认已检质检状态
            row.status = 1;
            break;
        }
        if (type === '包装') {
          this.packingResultCahnge(resultValue, row);
        } else {
          this.materialResultCahnge(resultValue, row);
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  .inbound_details {
    margin-top: 10px;
    .el-form-item {
      margin-bottom: 0 !important;
    }
  }
  .right_control {
    display: flex;
    > button {
      margin-left: 20px;
    }
  }
  .storage_btn {
    margin-top: 20px;
    display: flex;
    align-content: center;
    justify-content: center;
  }
  .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: 200px !important;
  }
  .red_color {
    color: red;
  }
  .wareHouse_style {
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    white-space: nowrap;
  }
</style>