klp-oa/klp-ui/src/views/wms/receive/plan/index.vue

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="计划名称" prop="planName">
        <el-input v-model="queryParams.planName" placeholder="请输入收货计划名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="计划日期" prop="planDate">
        <el-date-picker clearable v-model="queryParams.planDate" type="date" value-format="yyyy-MM-dd"
          placeholder="请选择计划日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single"
          @click="handleUpdate">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
          @click="handleDelete">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-row :gutter="20" v-loading="loading">
      <el-col :span="6" v-for="(row, index) in deliveryPlanList" :key="row.planId">
        <el-card shadow="hover" class="delivery-plan-card">
          <div class="card-header">
            <el-checkbox v-model="row.selected" @change="handleCardSelectionChange(row)"></el-checkbox>
            <div class="card-title">{{ row.planName }}</div>
          </div>
          <div class="card-content">
            <div class="content-item">
              <span class="label">计划日期：</span>
              <span>{{ parseTime(row.planDate, '{y}-{m}-{d}') }}</span>
            </div>
            <div class="content-item">
              <span class="label">备注：</span>
              <span>{{ row.remark || '-' }}</span>
            </div>
            <div class="content-item">
              <span class="label">创建人：</span>
              <span>{{ row.createBy }}</span>
            </div>
            <div class="content-item">
              <span class="label">更新时间：</span>
              <span>{{ parseTime(row.updateTime, '{y}-{m}-{d}') }}</span>
            </div>
          </div>
          <div class="card-actions">
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(row)">修改</el-button>
            <el-button size="mini" type="text" icon="el-icon-upload2" @click="openImportDialog(row)">导入</el-button>
            <el-button size="mini" type="text" icon="el-icon-notebook-2" @click="openDetailDialog(row)">明细</el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(row)">删除</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <!-- 添加或修改收货计划对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="收货计划名称" prop="planName">
          <el-input v-model="form.planName" placeholder="请输入收货计划名称" />
        </el-form-item>
        <el-form-item label="计划日期" prop="planDate">
          <el-date-picker clearable v-model="form.planDate" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="请选择计划日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 待收货明细管理对话框 -->
    <el-dialog title="待收货明细管理" :visible.sync="detailOpen" width="1400px" append-to-body @close="resetDetail">
      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane label="计划入库" name="plan">
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button type="primary" plain icon="el-icon-plus" size="mini"
                @click="openDetailAddDialog">新增</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="detailMultiple"
                @click="handleDetailBatchDelete">批量删除</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button type="danger" plain icon="el-icon-delete" size="mini"
                @click="handleDetailClear">清空</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button type="default" plain icon="el-icon-refresh" size="mini"
                @click="getDetailList">刷新</el-button>
            </el-col>
          </el-row>
          <el-table v-loading="detailLoading" :data="detailList" border @selection-change="handleDetailSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="warehouseArea" label="逻辑库区" width="120" />
            <el-table-column prop="lotNo" label="入场卷号" width="120" />
            <el-table-column prop="supplierLotNo" label="厂家卷号" width="120" />
            <el-table-column prop="productLotNo" label="成品卷号" width="120" />
            <el-table-column prop="productionDate" label="生产/发货日期" width="150">
              <template slot-scope="scope">
                {{ parseTime(scope.row.productionDate, '{y}-{m}-{d}') }}
              </template>
            </el-table-column>
            <el-table-column prop="weight" label="重量(kg)" width="100" />
            <el-table-column prop="goodsName" label="名称" width="120" />
            <el-table-column prop="spec" label="规格" width="120" />
            <el-table-column prop="length" label="长度(mm)" width="100" />
            <el-table-column prop="materialType" label="材质" width="100" />
            <el-table-column prop="manufacturer" label="生产厂家" width="120" />
            <el-table-column prop="surfaceTreatment" label="表面处理" width="100" />
            <el-table-column prop="zincCoating" label="锌层" width="80" />
            <el-table-column prop="teamGroup" label="班组" width="100" />
            <el-table-column prop="temperRolling" label="调制度" width="100" />
            <el-table-column prop="coatingType" label="镀层种类" width="100" />
            <el-table-column prop="goodsType" label="类型" width="100" />
            <el-table-column prop="receiveStatus" label="状态" width="80">
              <template slot-scope="scope">
                <el-tag
                  :type="scope.row.receiveStatus === '0' ? 'info' : scope.row.receiveStatus === '1' ? 'success' : 'danger'">
                  {{ scope.row.receiveStatus === '0' ? '待收货' : scope.row.receiveStatus === '1' ? '已收货' : '异常' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right">
              <template slot-scope="scope">
                <el-button size="mini" type="text" @click="openDetailEditDialog(scope.row)">修改</el-button>
                <el-button size="mini" type="text" class="btn-danger"
                  @click="handleDetailDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination v-show="detailTotal > 0" :total="detailTotal" :page.sync="detailQueryParams.pageNum"
            :limit.sync="detailQueryParams.pageSize" @pagination="getDetailList" />
        </el-tab-pane>
        <el-tab-pane label="实际入库表格" name="actual">
          <el-table v-loading="actualLoading" :data="actualList" border height="400">
            <el-table-column prop="enterCoilNo" label="入场卷号" />
            <el-table-column prop="currentCoilNo" label="成品卷号" />
            <el-table-column prop="itemName" label="名称" width="120" />
            <el-table-column prop="specification" label="规格" width="120" />
            <el-table-column prop="materialType" label="材质" width="100" />
            <el-table-column prop="netWeight" label="重量(kg)" width="100" />
            <el-table-column prop="manufacturer" label="生产厂家" width="120" />
            <el-table-column prop="zincLayer" label="镀层质量" width="80" />
            <el-table-column prop="warehouseName" label="库区" width="100" />
            <el-table-column prop="qualityStatus" label="质量状态" width="100" />
            <el-table-column prop="createTime" label="入库时间">
              <template slot-scope="scope">
                {{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="差异对比" name="diff">
          <div class="diff-config">
            <el-form :model="diffConfig" inline>
              <el-form-item label="重量差异阈值(kg)">
                <el-input-number v-model="diffConfig.weightThreshold" :precision="2" :step="0.1" :min="0" style="width: 120px;" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="mini" @click="calculateDiff">重新计算差异</el-button>
              </el-form-item>
            </el-form>
            <span class="config-tip">重量差异在此阈值内视为相同，超出则标记为不一致</span>
          </div>
          <el-row :gutter="16" class="diff-row">
            <el-col :span="12">
              <div class="diff-section">
                <div class="section-header">
                  <span class="section-icon missing-icon">●</span>
                  <span class="section-title">计划有实际无（少收）</span>
                  <span class="section-count">{{ missingCoils.length }}</span>
                </div>
                <el-table v-loading="diffLoading" height="300" :data="missingCoils" border size="small" class="diff-table">
                  <el-table-column prop="lotNo" label="入场卷号" />
                  <el-table-column prop="goodsName" label="名称" width="100" />
                  <el-table-column prop="spec" label="规格" width="100" />
                  <el-table-column prop="materialType" label="材质" width="80" />
                  <el-table-column prop="weight" label="重量(kg)" width="90" />
                </el-table>
                <div v-if="missingCoils.length === 0" class="empty-tip">暂无少收卷</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="diff-section">
                <div class="section-header">
                  <span class="section-icon extra-icon">●</span>
                  <span class="section-title">实际有计划无（多收）</span>
                  <span class="section-count">{{ extraCoils.length }}</span>
                </div>
                <el-table v-loading="diffLoading" height="300" :data="extraCoils" border size="small" class="diff-table">
                  <el-table-column prop="enterCoilNo" label="入场卷号" />
                  <el-table-column prop="itemName" label="名称" width="100" />
                  <el-table-column prop="specification" label="规格" width="100" />
                  <el-table-column prop="materialType" label="材质" width="80" />
                  <el-table-column prop="netWeight" label="重量(kg)" width="90" />
                </el-table>
                <div v-if="extraCoils.length === 0" class="empty-tip">暂无多收卷</div>
              </div>
            </el-col>
          </el-row>
          
          <div class="diff-section">
            <div class="section-header">
              <span class="section-icon diff-icon">●</span>
              <span class="section-title">字段不一致</span>
              <span class="section-count">{{ diffCoils.length }}</span>
            </div>
            <el-table v-loading="diffLoading" height="300" :data="diffCoils" border size="small" class="diff-table">
              <el-table-column prop="lotNo" label="入场卷号" width="120" />
              <el-table-column label="字段差异" min-width="500">
                <template #default="scope">
                  <div class="diff-content">
                    <div v-for="(diff, index) in scope.row.diffs" :key="index" class="diff-item">
                      <span class="field-label">{{ diff.fieldName }}</span>
                      <div class="value-row">
                        <span class="value-label">计划:</span>
                        <span class="plan-value">{{ diff.planValue }}</span>
                      </div>
                      <div class="value-row">
                        <span class="value-label">实际:</span>
                        <span class="actual-value">{{ diff.actualValue }}</span>
                      </div>
                    </div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <div v-if="diffCoils.length === 0" class="empty-tip">暂无字段不一致的卷</div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>

    <!-- 添加或修改待收货明细对话框 -->
    <el-dialog :title="detailFormTitle" :visible.sync="detailFormOpen" width="600px" append-to-body
      @close="resetDetailForm">
      <el-form ref="detailForm" :model="detailForm" :rules="detailRules" label-width="100px">
        <el-form-item label="逻辑库区" prop="warehouseArea">
          <el-input v-model="detailForm.warehouseArea" placeholder="请输入逻辑库区" />
        </el-form-item>
        <el-form-item label="入场卷号" prop="lotNo">
          <el-input v-model="detailForm.lotNo" placeholder="请输入入场卷号" />
        </el-form-item>
        <el-form-item label="厂家卷号" prop="supplierLotNo">
          <el-input v-model="detailForm.supplierLotNo" placeholder="请输入厂家卷号" />
        </el-form-item>
        <el-form-item label="成品卷号" prop="productLotNo">
          <el-input v-model="detailForm.productLotNo" placeholder="请输入成品卷号" />
        </el-form-item>
        <el-form-item label="生产/发货日期" prop="productionDate">
          <el-date-picker clearable v-model="detailForm.productionDate" type="date" value-format="yyyy-MM-dd"
            placeholder="请选择生产/发货日期" style="width: 100%;">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="重量(kg)" prop="weight">
          <el-input-number v-model="detailForm.weight" :precision="2" :step="0.01" style="width: 100%;" />
        </el-form-item>
        <el-form-item label="名称" prop="goodsName">
          <el-input v-model="detailForm.goodsName" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item label="规格" prop="spec">
          <el-input v-model="detailForm.spec" placeholder="请输入规格" />
        </el-form-item>
        <el-form-item label="长度(mm)" prop="length">
          <el-input-number v-model="detailForm.length" :precision="2" :step="0.01" style="width: 100%;" />
        </el-form-item>
        <el-form-item label="材质" prop="materialType">
          <el-input v-model="detailForm.materialType" placeholder="请输入材质" />
        </el-form-item>
        <el-form-item label="生产厂家" prop="manufacturer">
          <el-input v-model="detailForm.manufacturer" placeholder="请输入生产厂家" />
        </el-form-item>
        <el-form-item label="表面处理" prop="surfaceTreatment">
          <el-input v-model="detailForm.surfaceTreatment" placeholder="请输入表面处理" />
        </el-form-item>
        <el-form-item label="锌层" prop="zincCoating">
          <el-input v-model="detailForm.zincCoating" placeholder="请输入锌层" />
        </el-form-item>
        <el-form-item label="班组" prop="teamGroup">
          <el-input v-model="detailForm.teamGroup" placeholder="请输入班组" />
        </el-form-item>
        <el-form-item label="调制度" prop="temperRolling">
          <el-input v-model="detailForm.temperRolling" placeholder="请输入调制度" />
        </el-form-item>
        <el-form-item label="镀层种类" prop="coatingType">
          <el-input v-model="detailForm.coatingType" placeholder="请输入镀层种类" />
        </el-form-item>
        <el-form-item label="类型" prop="goodsType">
          <el-input v-model="detailForm.goodsType" placeholder="请输入类型" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="detailForm.remark" type="textarea" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="detailButtonLoading" type="primary" @click="submitDetailForm">确 定</el-button>
        <el-button @click="detailFormOpen = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 待收货明细导入对话框 -->
    <el-dialog title="待收货明细导入" :visible.sync="importOpen" width="1000px" append-to-body>
      <div class="import-container">
        <div class="file-upload-area" :class="{ disabled: importStatus === 'processing' }">
          <el-upload ref="upload" class="upload-excel" action="" :auto-upload="false" :show-file-list="false"
            :on-change="handleFileChange" accept=".xlsx,.xls"
            :disabled="importStatus === 'processing' || validateLoading || importLoading">
            <el-button type="primary" icon="el-icon-upload2">选择Excel文件</el-button>
          </el-upload>

          <el-button type="success" icon="el-icon-check" @click="handleValidate" v-if="file && importStatus === 'idle'"
            :disabled="!file || validateLoading" :loading="validateLoading">
            校验数据
          </el-button>
          <el-button type="warning" icon="el-icon-circle-check" @click="startImport"
            v-if="file && importStatus === 'idle'"
            :disabled="!file || !isValidated || errorList.length > 0 || importLoading" :loading="importLoading">
            开始导入
          </el-button>
          <el-button type="default" icon="el-icon-refresh" @click="resetImport"
            :disabled="importStatus === 'processing' || validateLoading || importLoading">
            重置
          </el-button>
        </div>

        <div class="template-download">
          <el-link type="primary" icon="el-icon-download" @click="downloadTemplate">下载导入模板</el-link>
          <span class="template-tip">请按照模板格式填写数据</span>
        </div>

        <div v-if="errorList.length > 0" class="error-list">
          <el-alert title="数据校验失败" type="error" :description="`共发现${errorList.length}条错误，请修正后重新导入`" show-icon />
          <el-table :data="errorList" border size="small" max-height="200">
            <el-table-column prop="rowNum" label="行号" width="80" />
            <el-table-column prop="errorMsg" label="错误信息" />
          </el-table>
        </div>

        <div v-if="tableData.length > 0 && importStatus === 'idle'" class="data-preview">
          <el-alert title="数据预览" type="info" :description="`共解析出 ${tableData.length} 条有效数据`" show-icon
            :closable="false" />
          <el-table :data="tableData" border size="small" max-height="300" stripe>
            <el-table-column prop="warehouseArea" label="逻辑库区" width="100" />
            <el-table-column prop="lotNo" label="入场卷号" width="100" />
            <el-table-column prop="supplierLotNo" label="厂家卷号" width="100" />
            <el-table-column prop="productLotNo" label="成品卷号" width="100" />
            <el-table-column prop="productionDate" label="生产/发货日期" width="120" />
            <el-table-column prop="weight" label="重量(kg)" width="100" />
            <el-table-column prop="goodsName" label="名称" width="120" />
            <el-table-column prop="spec" label="规格" width="100" />
            <el-table-column prop="length" label="长度(mm)" width="100" />
            <el-table-column prop="materialType" label="材质" width="100" />
            <el-table-column prop="manufacturer" label="生产厂家" width="120" />
          </el-table>
        </div>

        <div v-if="importStatus === 'processing'" class="import-progress">
          <el-alert title="正在导入数据" type="warning" :description="`当前进度：${progress}%`" show-icon :closable="false" />
          <el-progress :percentage="progress" status="success" />
          <p class="progress-tip">已导入 {{ importedCount }} / {{ totalCount }} 条数据</p>
        </div>

        <div v-if="importStatus === 'finished'" class="import-finished">
          <el-alert title="导入完成" type="success" :description="`共成功导入 ${importedCount} 条数据，总计 ${totalCount} 条`"
            show-icon />
        </div>

        <div v-if="importStatus === 'error'" class="import-error">
          <el-alert title="导入失败" type="error" :description="importErrorMsg" show-icon />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as XLSX from 'xlsx';
import { listDeliveryPlan, getDeliveryPlan, delDeliveryPlan, addDeliveryPlan, updateDeliveryPlan } from "@/api/wms/deliveryPlan";
import { listReceivePlan, getReceivePlan, delReceivePlan, addReceivePlan, updateReceivePlan, checkReceivePlan, delReceivePlanBatch } from "@/api/wms/receivePlan";
import { listCoilWithIds } from "@/api/wms/coil";
import { listPendingAction } from "@/api/wms/pendingAction";

const TEMPLATE_HEADERS = [
  '逻辑库区', '入场卷号', '厂家卷号', '成品卷号', '生产/发货日期', '重量(kg)',
  '名称', '规格', '长度(mm)', '材质', '生产厂家', '表面处理', '锌层',
  '班组', '调制度', '镀层种类', '类型', '备注'
];

const HEADER_MAP = {
  '逻辑库区': 'warehouseArea',
  '入场卷号': 'lotNo',
  '厂家卷号': 'supplierLotNo',
  '成品卷号': 'productLotNo',
  '生产/发货日期': 'productionDate',
  '重量(kg)': 'weight',
  '名称': 'goodsName',
  '规格': 'spec',
  '长度(mm)': 'length',
  '材质': 'materialType',
  '生产厂家': 'manufacturer',
  '表面处理': 'surfaceTreatment',
  '锌层': 'zincCoating',
  '班组': 'teamGroup',
  '调制度': 'temperRolling',
  '镀层种类': 'coatingType',
  '类型': 'goodsType',
  '备注': 'remark'
};

export default {
  name: "DeliveryPlan",
  data() {
    return {
      buttonLoading: false,
      loading: true,
      ids: [],
      single: true,
      multiple: true,
      showSearch: true,
      total: 0,
      deliveryPlanList: [],
      title: "",
      open: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        planName: undefined,
        planDate: undefined,
        planType: 1
      },
      form: {
        planName: '',
        planDate: '',
      },
      rules: {},

      detailOpen: false,
      detailLoading: false,
      detailList: [],
      detailTotal: 0,
      currentPlanId: null,
      detailQueryParams: {
        pageNum: 1,
        pageSize: 10,
        planId: null
      },
      detailFormOpen: false,
      detailFormTitle: '',
      detailButtonLoading: false,
      detailIds: [],
      detailSingle: true,
      detailMultiple: true,
      detailForm: {},
      detailRules: {
        lotNo: [{ required: true, message: '入场卷号不能为空', trigger: 'blur' }]
      },

      activeTab: 'plan',
      actualLoading: false,
      actualList: [],
      diffLoading: false,
      missingCoils: [],
      extraCoils: [],
      diffCoils: [],
      diffConfig: {
        weightThreshold: 0.5
      },

      importOpen: false,
      file: null,
      rawData: [],
      tableData: [],
      errorList: [],
      isValidated: false,
      progress: 0,
      importedCount: 0,
      totalCount: 0,
      importStatus: 'idle',
      importErrorMsg: '',
      validateLoading: false,
      importLoading: false
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      listDeliveryPlan(this.queryParams).then(response => {
        this.deliveryPlanList = response.rows.map(item => ({
          ...item,
          selected: false
        }));
        this.total = response.total;
        this.loading = false;
        this.ids = [];
        this.single = true;
        this.multiple = true;
      });
    },
    cancel() {
      this.open = false;
      this.reset();
    },
    reset() {
      this.form = {
        planId: undefined,
        planName: undefined,
        planDate: undefined,
        planType: 1,
        remark: undefined,
        delFlag: undefined,
        createTime: undefined,
        createBy: undefined,
        updateTime: undefined,
        updateBy: undefined
      };
      this.resetForm("form");
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleCardSelectionChange(row) {
      this.ids = this.deliveryPlanList.filter(item => item.selected).map(item => item.planId);
      this.single = this.ids.length !== 1;
      this.multiple = !this.ids.length;
    },
    handleAdd() {
      this.form.planDate = new Date().toLocaleString().substring(0, 19).replace(/\//g, '-').replace('T', ' ');
      this.form.planName = new Date().toLocaleDateString().replace(/\//g, '-') + '收货计划';
      this.form.planType = 1;
      this.open = true;
      this.title = "添加收货计划";
    },
    handleUpdate(row) {
      this.loading = true;
      this.reset();
      const planId = row.planId || this.ids[0];
      getDeliveryPlan(planId).then(response => {
        this.loading = false;
        this.form = response.data;
        this.open = true;
        this.title = "修改收货计划";
      });
    },
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.buttonLoading = true;
          if (this.form.planId != null) {
            updateDeliveryPlan(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            }).finally(() => {
              this.buttonLoading = false;
            });
          } else {
            addDeliveryPlan(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            }).finally(() => {
              this.buttonLoading = false;
            });
          }
        }
      });
    },
    handleDelete(row) {
      const planIds = row.planId || this.ids;
      this.$modal.confirm('是否确认删除收货计划编号为"' + planIds + '"的数据项？').then(() => {
        this.loading = true;
        return delDeliveryPlan(planIds);
      }).then(() => {
        this.loading = false;
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      }).finally(() => {
        this.loading = false;
      });
    },
    handleExport() {
      this.download('wms/deliveryPlan/export', {
        ...this.queryParams
      }, `deliveryPlan_${new Date().getTime()}.xlsx`);
    },

    openDetailDialog(row) {
      this.currentPlanId = row.planId;
      this.detailQueryParams.planId = row.planId;
      this.detailOpen = true;
      this.getDetailList();
    },
    resetDetail() {
      this.detailList = [];
      this.currentPlanId = null;
      this.activeTab = 'plan';
      this.actualList = [];
      this.missingCoils = [];
      this.extraCoils = [];
      this.diffCoils = [];
    },
    handleTabClick(tab) {
      if (tab.name === 'actual' && this.actualList.length === 0) {
        this.getActualList();
      } else if (tab.name === 'diff' && (this.missingCoils.length === 0 && this.extraCoils.length === 0 && this.diffCoils.length === 0)) {
        this.calculateDiff();
      }
    },
    getActualList() {
      this.actualLoading = true;
      listPendingAction({
        warehouseId: this.currentPlanId,
        actionType: 401,
        pageSize: 99999,
        pageNum: 1,
      }).then(response => {
        const coilIds = response.rows.map(item => item.coilId).join(',');
        listCoilWithIds({ coilIds }).then(actualRes => {
          this.actualList = actualRes.rows;
          this.actualLoading = false;
        });
      }).catch(() => {
        this.actualLoading = false;
      });
    },
    calculateDiff() {
      this.diffLoading = true;
      Promise.all([
        listReceivePlan({ pageNum: 1, pageSize: 99999, planId: this.currentPlanId }),
        listPendingAction({
          warehouseId: this.currentPlanId,
          actionType: 401,
          pageSize: 99999,
          pageNum: 1,
        }).then(response => {
          const coilIds = response.rows.map(item => item.coilId).join(',');
          return listCoilWithIds({ coilIds }).then(actualRes => {
            this.actualLoading = false;
            return actualRes;
          });
        })
      ]).then(([planRes, actualRes]) => {
        const planList = planRes.rows;
        const actualList = actualRes.rows;

        const planLotNoMap = new Map();
        planList.forEach(item => {
          planLotNoMap.set(item.lotNo, item);
        });

        const actualLotNoMap = new Map();
        actualList.forEach(item => {
          actualLotNoMap.set(item.enterCoilNo, item);
        });

        this.missingCoils = planList.filter(item => !actualLotNoMap.has(item.lotNo));

        this.extraCoils = actualList.filter(item => !planLotNoMap.has(item.enterCoilNo));

        this.diffCoils = [];
        const compareFields = [
          { planField: 'goodsName', actualField: 'itemName', fieldName: '名称' },
          { planField: 'spec', actualField: 'specification', fieldName: '规格' },
          { planField: 'materialType', actualField: 'material', fieldName: '材质' },
          { planField: 'weight', actualField: 'netWeight', fieldName: '重量', isNumber: true },
          { planField: 'manufacturer', actualField: 'manufacturer', fieldName: '生产厂家' },
          { planField: 'zincCoating', actualField: 'zincLayer', fieldName: '锌层' }
        ];

        const diffMap = new Map();
        planList.forEach(planItem => {
          const actualItem = actualLotNoMap.get(planItem.lotNo);
          if (actualItem) {
            const diffs = [];
            compareFields.forEach(field => {
              let planValue = String(planItem[field.planField] || '');
              let actualValue = String(actualItem[field.actualField] || '');
              if (field.isNumber) {
                planValue = Number(planValue);
                actualValue = Number(actualValue);
              }
              let isDiff = false;
              if (field.isNumber) {
                isDiff = Math.abs(planValue - actualValue) > this.diffConfig.weightThreshold;
              } else {
                isDiff = planValue !== actualValue;
              }
              if (isDiff) {
                diffs.push({
                  fieldName: field.fieldName,
                  planValue,
                  actualValue
                });
              }
            });
            if (diffs.length > 0) {
              diffMap.set(planItem.lotNo, {
                lotNo: planItem.lotNo,
                diffs
              });
            }
          }
        });
        this.diffCoils = Array.from(diffMap.values());

        this.diffLoading = false;
      }).catch(() => {
        this.diffLoading = false;
      });
    },
    getDetailList() {
      this.detailLoading = true;
      this.detailIds = [];
      this.detailSingle = true;
      this.detailMultiple = true;
      listReceivePlan(this.detailQueryParams).then(response => {
        this.detailList = response.rows;
        this.detailTotal = response.total;
        this.detailLoading = false;
      });
    },
    openDetailAddDialog() {
      this.detailForm = {
        planId: this.currentPlanId,
        receiveStatus: '0'
      };
      this.detailFormTitle = '新增待收货明细';
      this.detailFormOpen = true;
      this.$nextTick(() => {
        this.$refs.detailForm && this.$refs.detailForm.clearValidate();
      });
    },
    openDetailEditDialog(row) {
      this.detailForm = { ...row };
      this.detailFormTitle = '修改待收货明细';
      this.detailFormOpen = true;
      this.$nextTick(() => {
        this.$refs.detailForm && this.$refs.detailForm.clearValidate();
      });
    },
    resetDetailForm() {
      this.detailForm = {};
    },
    submitDetailForm() {
      this.$refs.detailForm.validate(valid => {
        if (valid) {
          this.detailButtonLoading = true;
          if (this.detailForm.receiveId != null) {
            updateReceivePlan(this.detailForm).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.detailFormOpen = false;
              this.getDetailList();
            }).finally(() => {
              this.detailButtonLoading = false;
            });
          } else {
            addReceivePlan(this.detailForm).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.detailFormOpen = false;
              this.getDetailList();
            }).finally(() => {
              this.detailButtonLoading = false;
            });
          }
        }
      });
    },
    handleDetailDelete(row) {
      this.$modal.confirm('是否确认删除该待收货明细？').then(() => {
        return delReceivePlan(row.receiveId);
      }).then(() => {
        this.getDetailList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },
    handleDetailSelectionChange(selection) {
      this.detailIds = selection.map(item => item.receiveId);
      this.detailSingle = this.detailIds.length !== 1;
      this.detailMultiple = !this.detailIds.length;
    },
    handleDetailBatchDelete() {
      const receiveIds = this.detailIds.join(',');
      this.$modal.confirm('是否确认删除选中的' + this.detailIds.length + '条待收货明细？').then(() => {
        this.detailLoading = true;
        return delReceivePlan(receiveIds);
      }).then(() => {
        this.getDetailList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { }).finally(() => {
        this.detailLoading = false;
      });
    },
    handleDetailClear() {
      this.$modal.confirm('是否确认清空当前收货计划下的所有待收货明细？此操作不可恢复！').then(() => {
        this.detailLoading = true;
        return listReceivePlan({ pageNum: 1, pageSize: 99999, planId: this.currentPlanId });
      }).then(response => {
        const allIds = response.rows.map(item => item.receiveId);
        if (allIds.length === 0) {
          this.$modal.msgInfo('暂无数据可清空');
          return;
        }
        return delReceivePlanBatch(allIds);
      }).then(() => {
        this.getDetailList();
        this.$modal.msgSuccess("清空成功");
      }).catch(() => { }).finally(() => {
        this.detailLoading = false;
      });
    },

    openImportDialog(row) {
      this.currentPlanId = row.planId;
      this.importOpen = true;
    },
    handleFileChange(file) {
      if (this.validateLoading || this.importLoading || this.importStatus === 'processing') {
        this.$message.warning('当前有操作正在进行中，请完成后再选择新文件');
        return;
      }
      this.file = file.raw;
      this.isValidated = false;
      this.readExcel();
    },
    async readExcel() {
      if (!this.file) return;
      try {
        const fileReader = new FileReader();
        fileReader.readAsArrayBuffer(this.file);
        fileReader.onload = async (e) => {
          try {
            const data = new Uint8Array(e.target.result);
            const workbook = XLSX.read(data, { type: 'array' });
            const sheetName = workbook.SheetNames[0];
            const worksheet = workbook.Sheets[sheetName];
            const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
            this.validateHeaders(jsonData[0]);
            this.rawData = jsonData.slice(1).filter(row => row.length > 0);
            this.formatExcel();
            this.$message.success(`成功解析Excel，共读取到 ${this.rawData.length} 条数据`);
          } catch (error) {
            this.handleError(`解析Excel失败：${error.message}`);
          }
        };
      } catch (error) {
        this.handleError(`读取文件失败：${error.message}`);
      }
    },
    validateHeaders(headers) {
      this.errorList = [];
      if (!headers || headers.length < TEMPLATE_HEADERS.length) {
        this.errorList.push({
          rowNum: 1,
          errorMsg: `表头数量不匹配，要求至少${TEMPLATE_HEADERS.length}列`
        });
        return;
      }
      TEMPLATE_HEADERS.forEach((header, index) => {
        if (headers[index] !== header) {
          this.errorList.push({
            rowNum: 1,
            errorMsg: `第${index + 1}列表头错误，要求："${header}"，实际："${headers[index] || ''}"`
          });
        }
      });
      if (this.errorList.length > 0) {
        this.$message.error('Excel表头格式不符合要求，请检查！');
      }
    },
    async handleValidate() {
      if (this.validateLoading) {
        this.$message.warning('正在校验数据，请稍候...');
        return;
      }
      if (!this.file) {
        this.$message.warning('请先选择Excel文件');
        return;
      }
      this.isValidated = true;
      if (this.rawData.length === 0) {
        this.$message.warning('暂无数据可校验');
        return;
      }
      this.validateLoading = true;
      this.errorList = [];
      try {
        for (let i = 0; i < this.rawData.length; i++) {
          const row = this.rawData[i];
          const rowNum = i + 2;
          const rowObj = this.formatRowData(row, rowNum);
          if (!rowObj.lotNo || rowObj.lotNo.trim() === '') {
            this.errorList.push({ rowNum, errorMsg: '入场卷号不能为空' });
          }
          if (rowObj.weight && isNaN(Number(rowObj.weight))) {
            this.errorList.push({ rowNum, errorMsg: '重量必须是数字' });
          }
          if (rowObj.length && isNaN(Number(rowObj.length))) {
            this.errorList.push({ rowNum, errorMsg: '长度必须是数字' });
          }
        }
        if (this.errorList.length > 0) {
          this.$message.error(`数据校验失败，共发现${this.errorList.length}条错误`);
        } else {
          this.$message.success('数据校验通过，可以开始导入');
        }
      } catch (error) {
        this.handleError(`校验数据时发生错误：${error.message}`);
      } finally {
        this.validateLoading = false;
      }
    },
    formatExcel() {
      this.tableData = [];
      if (this.rawData.length === 0) return;
      this.rawData.forEach((row, index) => {
        const rowNum = index + 2;
        const rowObj = this.formatRowData(row, rowNum);
        this.tableData.push(rowObj);
      });
    },
    formatRowData(row, rowNum) {
      const rowObj = {};
      TEMPLATE_HEADERS.forEach((header, index) => {
        const field = HEADER_MAP[header];
        rowObj[field] = row[index] != null ? row[index].toString().trim() : '';
      });
      rowObj.rowNum = rowNum;
      return rowObj;
    },
    async startImport() {
      if (this.importLoading) {
        this.$message.warning('正在导入数据，请勿重复操作...');
        return;
      }
      if (!this.file || this.tableData.length === 0) {
        this.$message.warning('暂无数据可导入');
        return;
      }
      const confirm = await this.$confirm(
        '确认导入已校验通过的数据？导入过程中请勿刷新页面或关闭浏览器！',
        '导入确认',
        {
          confirmButtonText: '确认导入',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(() => false);
      if (!confirm) return;
      this.importLoading = true;
      this.importStatus = 'processing';
      this.progress = 0;
      this.importedCount = 0;
      this.totalCount = this.tableData.length;
      this.importErrorMsg = '';
      try {
        await this.batchImport();
        this.importStatus = 'finished';
        this.$message.success(`导入完成！共成功导入${this.importedCount}条数据`);
      } catch (error) {
        this.handleError(`导入失败：${error.message}，已导入${this.importedCount}条数据`);
      } finally {
        this.importLoading = false;
      }
    },
    async batchImport() {
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.importStatus === 'error') break;
        const row = this.tableData[i];
        try {
          await this.importOneRow(row);
          this.importedCount++;
          const currentProgress = Math.round(((i + 1) / this.totalCount) * 100);
          this.progress = currentProgress;
          await new Promise(resolve => setTimeout(resolve, 50));
        } catch (error) {
          throw new Error(`第${row.rowNum}行导入失败：${error.message}`);
        }
      }
    },
    async importOneRow(row) {
      const params = {
        planId: this.currentPlanId,
        warehouseArea: row.warehouseArea,
        lotNo: row.lotNo,
        supplierLotNo: row.supplierLotNo,
        productLotNo: row.productLotNo,
        productionDate: row.productionDate,
        weight: row.weight ? Number(row.weight) : null,
        receiveStatus: '0',
        goodsName: row.goodsName,
        spec: row.spec,
        length: row.length ? Number(row.length) : null,
        materialType: row.materialType,
        manufacturer: row.manufacturer,
        surfaceTreatment: row.surfaceTreatment,
        zincCoating: row.zincCoating,
        teamGroup: row.teamGroup,
        temperRolling: row.temperRolling,
        coatingType: row.coatingType,
        goodsType: row.goodsType,
        remark: row.remark
      };
      const res = await addReceivePlan(params);
      if (res.code !== 200) {
        throw new Error(res.msg || '接口返回异常');
      }
    },
    resetImport() {
      if (this.validateLoading || this.importLoading || this.importStatus === 'processing') {
        this.$message.warning('当前有操作正在进行中，无法重置');
        return;
      }
      if (this.file || this.tableData.length > 0 || this.errorList.length > 0) {
        const confirm = this.$confirm(
          '确认重置所有状态？已选择的文件、解析的数据和校验结果将被清空！',
          '重置确认',
          {
            confirmButtonText: '确认重置',
            cancelButtonText: '取消',
            type: 'info'
          }
        ).catch(() => false);
        if (!confirm) return;
      }
      this.file = null;
      this.rawData = [];
      this.tableData = [];
      this.errorList = [];
      this.isValidated = false;
      this.progress = 0;
      this.importedCount = 0;
      this.totalCount = 0;
      this.importStatus = 'idle';
      this.importErrorMsg = '';
      this.$refs.upload?.clearFiles();
      this.$message.success('已重置所有状态');
    },
    downloadTemplate() {
      const templateData = [
        TEMPLATE_HEADERS,
        ['A库区', 'LOT001', 'SUP001', 'PROD001', '2024-01-01', 1000.50, '钢板', '1.0*1000', 2000, 'Q235', '宝钢', '镀锌', '80', '甲班', '1.5', 'GI', '原料', '示例备注']
      ];
      const wb = XLSX.utils.book_new();
      const ws = XLSX.utils.aoa_to_sheet(templateData);
      ws['!cols'] = [
        { wch: 12 }, { wch: 12 }, { wch: 12 }, { wch: 12 }, { wch: 15 }, { wch: 12 },
        { wch: 15 }, { wch: 12 }, { wch: 12 }, { wch: 12 }, { wch: 15 }, { wch: 12 },
        { wch: 10 }, { wch: 10 }, { wch: 10 }, { wch: 12 }, { wch: 10 }, { wch: 15 }
      ];
      XLSX.utils.book_append_sheet(wb, ws, '导入模板');
      XLSX.writeFile(wb, '待收货明细导入模板.xlsx');
    },
    handleError(message) {
      this.$message.error(message);
      this.importStatus = 'error';
      this.importErrorMsg = message;
      this.validateLoading = false;
      this.importLoading = false;
    }
  }
};
</script>

<style scoped>
.delivery-plan-card {
  margin-bottom: 20px;
  height: 100%;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.card-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.card-content {
  margin-bottom: 20px;
}

.content-item {
  margin-bottom: 10px;
  display: flex;
  align-items: flex-start;
}

.content-item:last-child {
  margin-bottom: 0;
}

.label {
  width: 80px;
  font-weight: 500;
  color: #606266;
  margin-right: 10px;
}

.card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.btn-danger {
  color: #f56c6c;
}

.import-container {
  padding: 20px;
}

.file-upload-area {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.file-upload-area.disabled {
  opacity: 0.6;
  pointer-events: none;
}

.template-download {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.template-tip {
  font-size: 12px;
  color: #909399;
}

.error-list {
  margin-bottom: 20px;
}

.data-preview {
  margin-bottom: 20px;
}

.import-progress {
  margin-bottom: 20px;
  padding: 10px;
  background: #f5f7fa;
  border-radius: 4px;
}

.progress-tip {
  margin: 10px 0 0 0;
  color: #666;
  font-size: 14px;
}

.import-finished,
.import-error {
  margin-bottom: 20px;
}

.diff-config {
  background: #fff;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  border: 1px solid #e4e7ed;
  display: flex;
  align-items: center;
  gap: 16px;
}

.config-tip {
  font-size: 12px;
  color: #909399;
}

.diff-section {
  background: #fafafa;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  border: 1px solid #e4e7ed;
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e4e7ed;
}

.section-icon {
  font-size: 10px;
  margin-right: 8px;
}

.missing-icon {
  color: #f56c6c;
}

.extra-icon {
  color: #67c23a;
}

.diff-icon {
  color: #e6a23c;
}

.section-title {
  font-size: 14px;
  font-weight: 600;
  color: #303133;
}

.section-count {
  margin-left: auto;
  background: #e4e7ed;
  color: #606266;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
}

.diff-table {
  background: #fff;
}

.diff-content {
  padding: 8px 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.diff-item {
  padding: 0;
  display: flex;
  gap: 20px;
  background: #f8f9fa;
  border-radius: 4px;
  margin-bottom: 8px;
  border-left: 3px solid #e6a23c;
}

.value-label {
  color: #909399;
  margin-right: 8px;
  width: 36px;
}

.plan-value {
  color: #606266;
  font-family: monospace;
}

.actual-value {
  color: #f56c6c;
  font-family: monospace;
}

.empty-tip {
  text-align: center;
  padding: 20px;
  color: #909399;
  font-size: 14px;
}
</style>