创建BOM防止重复点击

klp-ui/src/views/wms/bom/components/BomPanel.vue

@@ -2,9 +2,20 @@
   <div class="bom-container">
     <!-- 当没有传入id时显示创建按钮 -->
     <div v-if="!id" class="create-bom">
-      <button @click="handleCreate" class="create-button">
-        + 创建BOM
-      </button>
+      <el-button 
+        type="primary"
+        :loading="createLoading"
+        :disabled="createLoading"
+        @click="handleCreate"
+        class="create-button"
+      >
+        <template v-if="!createLoading">
+          <i class="el-icon-plus"></i> 创建BOM
+        </template>
+        <template v-else>
+          创建中...
+        </template>
+      </el-button>
     </div>
 
     <!-- 当传入id时显示数据区域 -->
@@ -56,7 +67,8 @@ export default {
       loading: false,
       error: null,
       data: null,
-      info: {}
+      info: {},
+      createLoading: false,
     };
   },
   watch: {
@@ -96,33 +108,41 @@ export default {
       }
     },
     
-    handleCreate() {
-      // 触发自定义事件
-      addBom({
-        bomName: (this.type == 'product' ? '产品BOM' : '原材料BOM') + new Date().getTime(),
-        bomCode: (this.type == 'product' ? 'P' : 'R') + new Date().getTime()
-      }).then(bom => {
+    async handleCreate() {
+      // 防止重复点击
+      if (this.createLoading) return;
+      
+      try {
+        this.createLoading = true;
+        const bomResponse = await addBom({
+          bomName: (this.type == 'product' ? '产品BOM' : '原材料BOM') + new Date().getTime(),
+          bomCode: (this.type == 'product' ? 'P' : 'R') + new Date().getTime()
+        });
+        
         this.$message.success('创建BOM成功');
-        console.log(bom, this.itemId)
-        if (this.type == 'product') {
-          updateProduct({
+        const bomData = bomResponse.data;
+
+        // 根据类型更新产品/原材料
+        if (this.type == 'product' && this.itemId) {
+          await updateProduct({
             productId: this.itemId,
-            bomId: bom.data.bomId
-          }).then(_ => {
-            this.$emit('addBom', bom.data);
-          })
-        }
-        else if (this.type == 'raw_material') {
-          updateRawMaterial({
+            bomId: bomData.bomId
+          });
+        } else if (this.type == 'raw_material' && this.itemId) {
+          await updateRawMaterial({
             rawMaterialId: this.itemId,
-            bomId: bom.data.bomId
-          }).then(_ => {
-            this.$emit('addBom', bom.data);
-          })
+            bomId: bomData.bomId
+          });
         }
         
-      })
-      console.log('创建BOM操作');
+        // 触发事件
+        this.$emit('addBom', bomData);
+      } catch (error) {
+        console.error('创建失败:', error);
+        this.$message.error(`创建失败: ${error.message || '未知错误'}`);
+      } finally {
+        this.createLoading = false;
+      }
     },
     
     handleUpdateBom() {