From 382b461b68d426044aafe7d923eacb98e54dfe15 Mon Sep 17 00:00:00 2001
From: yueli <yueli@example.com>
Date: Thu, 16 Jul 2026 14:00:44 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=8C=82=E8=BD=BDImportDialog=20+=20?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E8=B7=AF=E7=94=B1=E7=99=BD=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 页面挂载
- buyOdoo.vue: 新增「批量导入」按钮(新增旁边), ImportDialog material
- list.vue: 新增「批量导入」按钮, ImportDialog material
- BomManage.vue: 新增「导入BOM」按钮(新建BOM左边), ImportDialog bom

## 白屏修复
- AppMain.vue: 移除 transition mode=out-in 动画包裹(导致首次访问白屏)
  改为 :key=route.fullPath 强制创建新实例
---
 inventory-web/src/layout/components/AppMain.vue |  6 ++----
 inventory-web/src/views/bom/BomManage.vue       |  9 ++++++++-
 inventory-web/src/views/material/buyOdoo.vue    | 12 +++++++++++-
 inventory-web/src/views/material/list.vue       | 11 ++++++++++-
 4 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/inventory-web/src/layout/components/AppMain.vue b/inventory-web/src/layout/components/AppMain.vue
index 817dbe8..b588ffd 100644
--- a/inventory-web/src/layout/components/AppMain.vue
+++ b/inventory-web/src/layout/components/AppMain.vue
@@ -1,9 +1,7 @@
 <template>
   <section class="app-main">
-    <router-view v-slot="{ Component }">
-      <transition name="fade-transform" mode="out-in">
-        <component :is="Component" />
-      </transition>
+    <router-view v-slot="{ Component, route }">
+      <component :is="Component" :key="route.fullPath" />
     </router-view>
   </section>
 </template>
diff --git a/inventory-web/src/views/bom/BomManage.vue b/inventory-web/src/views/bom/BomManage.vue
index e24b563..8469075 100644
--- a/inventory-web/src/views/bom/BomManage.vue
+++ b/inventory-web/src/views/bom/BomManage.vue
@@ -19,6 +19,7 @@
             </el-input>
             <el-button @click="expandAllGroups" size="small" style="margin-right: 6px;">全部展开</el-button>
             <el-button @click="collapseAllGroups" size="small" style="margin-right: 10px;">全部折叠</el-button>
+            <el-button v-if="userStore.hasPermission('bom_manage:operation')" type="success" plain :icon="Upload" @click="showImportDialog = true" style="margin-right:10px">导入BOM</el-button>
             <el-button v-if="userStore.hasPermission('bom_manage:operation')" type="primary" :icon="Plus" @click="handleCreate">新建 BOM</el-button>
           </div>
         </div>
@@ -249,15 +250,20 @@
       </template>
     </el-dialog>
   </div>
+
+  <!-- 批量导入弹窗 -->
+  <ImportDialog v-model="showImportDialog" import-type="bom" @success="fetchBomSummary" />
+
 </template>
 
 <script setup lang="ts">
 import { ref, reactive, onMounted, computed, nextTick, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { ElMessage, ElMessageBox, FormInstance, FormRules } from 'element-plus'
-import { Plus, Search, EditPen } from '@element-plus/icons-vue'
+import { Plus, Search, EditPen, Upload } from '@element-plus/icons-vue'
 import { useRouter } from 'vue-router'
 import { getBomList, getBomSummary, getBomDetail, saveBom, deleteBom, getDraftDetail, saveDraft, publishDraft } from '@/api/bom'
+import ImportDialog from '@/components/ImportDialog.vue'
 import { searchMaterialBase } from '@/api/inbound/buy'
 import { useUserStore } from '@/stores/user'
 
@@ -303,6 +309,7 @@ const getDraftHash = () => {
 }
 
 const userStore = useUserStore()
+const showImportDialog = ref(false)
 const route = useRoute()
 const router = useRouter()
 const loading = ref(false)
diff --git a/inventory-web/src/views/material/buyOdoo.vue b/inventory-web/src/views/material/buyOdoo.vue
index a5b6550..c2404c2 100644
--- a/inventory-web/src/views/material/buyOdoo.vue
+++ b/inventory-web/src/views/material/buyOdoo.vue
@@ -149,6 +149,10 @@
             <el-icon style="margin-right: 5px"><Plus /></el-icon>新增
           </el-button>
 
+          <el-button v-if="userStore.hasPermission('material_list:operation')" type="success" plain @click="showImportDialog = true" style="margin-right: 10px">
+            <el-icon style="margin-right: 5px"><Upload /></el-icon>批量导入
+          </el-button>
+
           <el-button plain @click="expandAllGroups" style="margin-right: 8px">全部展开</el-button>
           <el-button plain @click="collapseAllGroups" style="margin-right: 8px">全部折叠</el-button>
 
@@ -699,11 +703,15 @@
       </el-dialog>
     </el-card>
   </div>
+
+  <!-- 批量导入弹窗 -->
+  <ImportDialog v-model="showImportDialog" import-type="material" @success="getList" />
+
 </template>
 
 <script setup lang="ts">
 import { ref, reactive, onMounted, nextTick, computed, watch } from 'vue';
-import { Plus, Document, DocumentCopy, Refresh, Setting, Rank, Camera, Download, Bell, CircleCheck, Files, ZoomIn, Delete, Picture, FolderOpened, Loading } from '@element-plus/icons-vue';
+import { Plus, Document, DocumentCopy, Refresh, Setting, Rank, Camera, Download, Bell, CircleCheck, Files, ZoomIn, Delete, Picture, FolderOpened, Loading, Upload } from '@element-plus/icons-vue';
 import { ElMessage, ElMessageBox, ElLoading } from 'element-plus';
 import type { FormInstance, FormRules } from 'element-plus';
 import { useUserStore } from '@/stores/user';
@@ -728,6 +736,7 @@ import { uploadFile, deleteFile } from '@/api/common/upload';
 import { usePasteUpload } from '@/hooks/usePasteUpload';
 import WebRtcCamera from '@/components/Camera/WebRtcCamera.vue';
 import ImageSearchDialog from '@/components/ImageSearchDialog.vue';
+import ImportDialog from '@/components/ImportDialog.vue';
 import { imageSearch as imageSearchApi, type ImageSearchItem } from '@/api/common/upload';
 
 const userStore = useUserStore();
@@ -790,6 +799,7 @@ const isUploading = ref(false);
 const tableSize = ref<'large' | 'default' | 'small'>('large');
 const advancedFilterVisible = ref(false);
 const imageSearchVisible = ref(false);
+const showImportDialog = ref(false);
 const advancedConditions = ref([{ field: '', operator: '', value: '' }]);
 
 const fieldOptions = computed(() => {
diff --git a/inventory-web/src/views/material/list.vue b/inventory-web/src/views/material/list.vue
index eaa045b..12b9dbc 100644
--- a/inventory-web/src/views/material/list.vue
+++ b/inventory-web/src/views/material/list.vue
@@ -149,6 +149,9 @@
           <el-button v-if="userStore.hasPermission('material_list:operation')" type="primary" @click="handleAdd" style="margin-right: 10px">
             <el-icon style="margin-right: 5px"><Plus /></el-icon>新增
           </el-button>
+          <el-button v-if="userStore.hasPermission('material_list:operation')" type="success" plain @click="showImportDialog = true" style="margin-right: 10px">
+            <el-icon style="margin-right: 5px"><Upload /></el-icon>批量导入
+          </el-button>
 
           <el-tooltip content="刷新" placement="top">
             <el-button circle :icon="Refresh" @click="getList" />
@@ -701,11 +704,15 @@
       </el-dialog>
     </el-card>
   </div>
+
+  <!-- 批量导入弹窗 -->
+  <ImportDialog v-model="showImportDialog" import-type="material" @success="handleQuery" />
+
 </template>
 
 <script setup lang="ts">
 import { ref, reactive, onMounted, nextTick, computed, watch } from 'vue';
-import { Plus, Document, DocumentCopy, Refresh, Setting, Rank, Camera, Download, Bell, CircleCheck, Files, ZoomIn, Delete, Picture, ShoppingCart } from '@element-plus/icons-vue';
+import { Plus, Document, DocumentCopy, Refresh, Setting, Rank, Camera, Download, Bell, CircleCheck, Files, ZoomIn, Delete, Picture, ShoppingCart, Upload } from '@element-plus/icons-vue';
 import { ElMessage, ElMessageBox, ElLoading } from 'element-plus';
 import type { FormInstance, FormRules } from 'element-plus';
 import { useUserStore } from '@/stores/user';
@@ -729,6 +736,7 @@ import { uploadFile, deleteFile } from '@/api/common/upload';
 import { usePasteUpload } from '@/hooks/usePasteUpload';
 import WebRtcCamera from '@/components/Camera/WebRtcCamera.vue';
 import ImageSearchDialog from '@/components/ImageSearchDialog.vue';
+import ImportDialog from '@/components/ImportDialog.vue';
 import { imageSearch as imageSearchApi, type ImageSearchItem } from '@/api/common/upload';
 
 const userStore = useUserStore();
@@ -794,6 +802,7 @@ const isUploading = ref(false);
 const tableSize = ref<'large' | 'default' | 'small'>('large');
 const advancedFilterVisible = ref(false);
 const imageSearchVisible = ref(false);
+const showImportDialog = ref(false);
 const advancedConditions = ref([{ field: '', operator: '', value: '' }]);
 const fieldOptions = computed(() => {
   const allFields = [