发货通知单导入如果其中哪一票有不存在的物料就筛选掉，并提示这一票哪些是不存在的物料

src/views/modules/ecss/del_upload_excel.vue

@@ -34,9 +34,13 @@
       </div>
 
       <div v-if="showPreview" style="margin-top: 20px; margin-bottom: 30px;">
-        <h4>文件预览 - 按发票号汇总 (共{{ previewData.length }}个发票)</h4>
-
-        <el-table :data="previewData" border style="width: 100%" max-height="400" :show-overflow-tooltip="true" class="delClass">
+        <!-- 可导入的发票表格 -->
+        <div v-if="validInvoices.length > 0">
+          <h4 style="color: #67C23A; margin-bottom: 15px;">
+            <i class="el-icon-success" style="margin-right: 8px;"></i>
+            可导入的发票 (共{{ validInvoices.length }}个发票)
+          </h4>
+          <el-table :data="validInvoices" border style="width: 100%" max-height="300" :show-overflow-tooltip="true" class="delClass valid-table">
           <el-table-column label="操作" width="40" fixed="left">
             <template slot-scope="scope">
               <a type="text" size="small" style="color: red"  @click="deleteRow(scope.$index, scope.row)">删除</a>
@@ -44,13 +48,29 @@
           </el-table-column>
           <el-table-column prop="cmcInvoice" label="发票号" width="120" fixed="left">
             <template slot-scope="scope">
-              <span :style="scope.row.exists ? 'color: red; font-weight: bold;' : ''">
-                {{ scope.row.cmcInvoice }}
-                <el-tag v-if="scope.row.exists" type="danger" size="mini">已存在</el-tag>
-              </span>
+              <div>
+                <span :style="scope.row.exists ? 'color: red; font-weight: bold;' : ''">
+                  {{ scope.row.cmcInvoice }}
+                </span>
+                <div style="margin-top: 2px;">
+                  <el-tag v-if="scope.row.exists" type="warning" size="mini">已存在</el-tag>
+                </div>
+              </div>
             </template>
           </el-table-column>
           <el-table-column prop="destination" label="目的地" width="100"></el-table-column>
+          <el-table-column label="状态" width="100">
+            <template slot-scope="scope">
+              <div v-if="scope.row.exists">
+                <el-tag type="warning" size="small">已存在</el-tag>
+                <div style="font-size: 12px; color: #E6A23C; margin-top: 2px;">该发票号已生成发货通知单</div>
+              </div>
+              <div v-else>
+                <el-tag type="success" size="small">可导入</el-tag>
+                <div style="font-size: 12px; color: #67C23A; margin-top: 2px;">数据正常，可以导入</div>
+              </div>
+            </template>
+          </el-table-column>
           <el-table-column label="客户模板" width="150">
             <template slot-scope="scope">
               <el-input
@@ -139,6 +159,71 @@
             </template>
           </el-table-column>
         </el-table>
+        </div>
+
+        <!-- 物料不存在的发票表格 -->
+        <div v-if="invalidInvoices.length > 0" style="margin-top: 30px;">
+          <h4 style="color: #F56C6C; margin-bottom: 15px;">
+            <i class="el-icon-warning" style="margin-right: 8px;"></i>
+            物料不存在的发票 (共{{ invalidInvoices.length }}个发票，将不会导入)
+          </h4>
+          <el-table :data="invalidInvoices" border style="width: 100%" max-height="300" :show-overflow-tooltip="true" class="delClass invalid-table">
+            <el-table-column prop="cmcInvoice" label="发票号" width="120" fixed="left">
+              <template slot-scope="scope">
+                <div>
+                  <span
+                    class="clickable-invoice"
+                    style="color: #F56C6C; font-weight: bold;"
+                    @click="showInvalidMaterials(scope.row)">
+                    {{ scope.row.cmcInvoice }}
+                    <i class="el-icon-view" style="margin-left: 4px; font-size: 12px;"></i>
+                  </span>
+                  <div style="margin-top: 2px;">
+                    <el-tag type="danger" size="mini">物料不存在</el-tag>
+                  </div>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="destination" label="目的地" width="100"></el-table-column>
+            <el-table-column label="状态" width="100">
+              <template slot-scope="scope">
+                <div style="color: #F56C6C;">
+                  <el-tag type="danger" size="small">物料不存在</el-tag>
+                  <div style="font-size: 12px; margin-top: 2px;">将不会导入</div>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="不存在物料" width="150">
+              <template slot-scope="scope">
+                <div style="color: #F56C6C;">
+                  <el-tag type="danger" size="small">{{ scope.row.invalidMaterials ? scope.row.invalidMaterials.length : 0 }}个物料</el-tag>
+                  <div style="font-size: 12px; margin-top: 2px;">
+                    点击发票号查看详情
+                  </div>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="客户信息" width="150">
+              <template slot-scope="scope">
+                <div style="color: #999; font-size: 12px;">
+                  无需填写
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="readyDate" label="Ready Date" width="160"></el-table-column>
+            <el-table-column prop="totalQty" label="总数量" width="150" align="right">
+              <template slot-scope="scope">
+                {{ scope.row.totalQty || 0 }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="totalItems" label="明细数" width="160" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.totalItems || 0 }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="shippingMode" label="运输方式" min-width="80"></el-table-column>
+          </el-table>
+        </div>
       </div>
 
       <span slot="footer" class="dialog-footer" style="margin-top: 10px">
@@ -154,16 +239,16 @@
       <!-- 搜索表单 -->
       <el-form :inline="true" :model="templateSearchData" label-width="100px" style="margin-bottom: 15px;">
         <el-form-item label="模板名称:">
-          <el-input 
-            v-model="templateSearchData.templateName" 
+          <el-input
+            v-model="templateSearchData.templateName"
             placeholder="请输入模板名称"
             style="width: 200px;"
             clearable>
           </el-input>
         </el-form-item>
         <el-form-item label="客户名称:">
-          <el-input 
-            v-model="templateSearchData.customerName" 
+          <el-input
+            v-model="templateSearchData.customerName"
             placeholder="请输入客户名称"
             style="width: 200px;"
             clearable>
@@ -174,7 +259,7 @@
           <el-button @click="resetTemplateSearch">重置</el-button>
         </el-form-item>
       </el-form>
-      
+
       <el-table
         :height="400"
         :data="customerTemplateList"
@@ -372,6 +457,46 @@
         <el-button type="primary" @click="confirmEdit">保存</el-button>
       </span>
     </el-dialog>
+
+    <!-- 物料不存在详情对话框 -->
+    <el-dialog
+      :title="`发票号 ${invalidMaterialsDialog.invoice} - 不存在的物料详情`"
+      :visible.sync="invalidMaterialsDialog.visible"
+      width="320px"
+      class="invalid-materials-dialog"
+      @close="closeInvalidMaterialsDialog">
+      <div class="invalid-materials-content">
+        <el-table
+          :data="invalidMaterialsDialog.materials"
+          border
+          style="width: 100%; margin-top: 15px;"
+          max-height="300">
+          <el-table-column
+            type="index"
+            label="序号"
+            width="60"
+            align="center">
+          </el-table-column>
+          <el-table-column
+            prop="material"
+            label="物料号"
+            align="left">
+            <template slot-scope="scope">
+              <span style="color: #F56C6C; font-weight: bold;">{{ scope.row }}</span>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="materials-summary" style="margin-top: 15px; padding: 10px; background-color: #FEF0F0; border-radius: 4px;">
+          <span style="color: #F56C6C;">
+            <i class="el-icon-info"></i>
+            共发现 <strong>{{ invalidMaterialsDialog.materials.length }}</strong> 个不存在的物料
+          </span>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="closeInvalidMaterialsDialog">确定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -432,9 +557,25 @@
           value: '',
           fieldName: '', // 要编辑的字段名
           row: null // 当前编辑的行数据
+        },
+        // 物料不存在详情对话框相关数据
+        invalidMaterialsDialog: {
+          visible: false,
+          invoice: '',
+          materials: []
         }
       }
     },
+    computed: {
+      // 可导入的发票（不包含物料不存在的发票）
+      validInvoices() {
+        return this.previewData.filter(item => !item.hasInvalidMaterials)
+      },
+      // 物料不存在的发票
+      invalidInvoices() {
+        return this.previewData.filter(item => item.hasInvalidMaterials)
+      }
+    },
     watch: {
       // 深度监听pageData的变化，自动保存到缓存
       pageData: {
@@ -956,8 +1097,14 @@
 
       // 从预览数据保存
       saveFromPreview() {
-        // 验证每个发票的必填信息
-        for (let item of this.previewData) {
+        // 检查是否有可导入的发票
+        if (this.validInvoices.length === 0) {
+          this.$message.warning('没有可导入的发票！')
+          return false
+        }
+
+        // 只验证可导入发票的必填信息
+        for (let item of this.validInvoices) {
           if (!item.selectedCustomer) {
             this.$message.error(`发票号 ${item.cmcInvoice} 请选择客户`)
             return false
@@ -985,10 +1132,17 @@
         formData.append("buNo", this.pageData.buNo)
         formData.append("username", this.$store.state.user.name)
         formData.append("file", this.fileList[0].raw)
-        // 添加被删除的发票号列表
-        formData.append("deletedInvoices", JSON.stringify(this.deletedInvoices))
-        // 为每个发票设置客户信息
-        this.previewData.forEach((item, index) => {
+        // 添加被删除的发票号列表（包括用户手动删除的和物料不存在的）
+        const allDeletedInvoices = [...this.deletedInvoices]
+        // 将物料不存在的发票也添加到删除列表中
+        this.invalidInvoices.forEach(item => {
+          if (!allDeletedInvoices.includes(item.cmcInvoice)) {
+            allDeletedInvoices.push(item.cmcInvoice)
+          }
+        })
+        formData.append("deletedInvoices", JSON.stringify(allDeletedInvoices))
+        // 只为可导入的发票设置客户信息
+        this.validInvoices.forEach((item, index) => {
           formData.append(`customerName_${item.cmcInvoice}`, item.selectedCustomer)
           formData.append(`localShipAddress_${item.cmcInvoice}`, item.selectedLocalAddress)
           formData.append(`overseasShipper_${item.cmcInvoice}`, item.selectedOverseasShipper)
@@ -1223,8 +1377,11 @@
           if (!this.deletedInvoices.includes(row.cmcInvoice)) {
             this.deletedInvoices.push(row.cmcInvoice)
           }
-          // 从预览数据中移除该行
-          this.previewData.splice(index, 1)
+          // 从预览数据中移除该行（根据发票号查找）
+          const previewIndex = this.previewData.findIndex(item => item.cmcInvoice === row.cmcInvoice)
+          if (previewIndex !== -1) {
+            this.previewData.splice(previewIndex, 1)
+          }
           this.$message.success(`发票号 "${row.cmcInvoice}" 已删除`)
           // 保存到缓存
           this.saveToCache()
@@ -1274,6 +1431,20 @@
           document.body.removeChild(linkNode)
         })
       },
+
+      // 显示物料不存在详情
+      showInvalidMaterials(row) {
+        this.invalidMaterialsDialog.invoice = row.cmcInvoice
+        this.invalidMaterialsDialog.materials = row.invalidMaterials || []
+        this.invalidMaterialsDialog.visible = true
+      },
+
+      // 关闭物料不存在详情对话框
+      closeInvalidMaterialsDialog() {
+        this.invalidMaterialsDialog.visible = false
+        this.invalidMaterialsDialog.invoice = ''
+        this.invalidMaterialsDialog.materials = []
+      },
     }
   }
 </script>
@@ -1408,4 +1579,65 @@
   color: #c0c4cc;
 }
 
+/* 可点击发票号样式 */
+.clickable-invoice {
+  cursor: pointer !important;
+  text-decoration: underline;
+  transition: all 0.3s;
+}
+
+.clickable-invoice:hover {
+  color: #409EFF !important;
+  text-shadow: 0 0 3px rgba(64, 158, 255, 0.3);
+}
+
+/* 表格样式区分 */
+.valid-table .el-table__header {
+  background-color: #F0F9FF !important;
+}
+
+.valid-table .el-table th {
+  background-color: #F0F9FF !important;
+  color: #67C23A !important;
+}
+
+.invalid-table .el-table__header {
+  background-color: #FEF0F0 !important;
+}
+
+.invalid-table .el-table th {
+  background-color: #FEF0F0 !important;
+  color: #F56C6C !important;
+}
+
+.invalid-table .el-table .el-table__row:hover > td {
+  background-color: #FDF2F2 !important;
+}
+
+/* 物料不存在详情对话框样式 */
+.invalid-materials-dialog .el-dialog__body {
+  padding: 20px;
+}
+
+.invalid-materials-content .warning-tip {
+  padding: 12px 16px;
+  background-color: #FEF0F0;
+  border: 1px solid #FBC4C4;
+  border-radius: 4px;
+  margin-bottom: 15px;
+}
+
+.invalid-materials-content .materials-summary {
+  text-align: center;
+  font-size: 14px;
+}
+
+.invalid-materials-dialog .el-table th {
+  background-color: #FEF0F0 !important;
+}
+
+.invalid-materials-dialog .el-table .el-table__row:hover > td {
+  background-color: #FDF2F2 !important;
+}
+
 </style>