优化前端

web_ui/templates/bom_compare.html

@@ -211,7 +211,7 @@
                 <div class="toolbar" v-if="currentParentCode">
                     <!-- 第一行：期间选择 -->
                     <el-row :gutter="20" type="flex" align="middle" style="flex-wrap: wrap; margin-bottom: 10px;">
-                        <el-col :span="11">
+                        <el-col :span="10">
                             <span style="font-size: 14px; font-weight: bold; margin-right: 10px;">期间 A (基准期)</span>
                             <el-date-picker
                                 v-model="periodA_start"
@@ -232,7 +232,7 @@
                             </el-date-picker>
                         </el-col>
                         
-                        <el-col :span="11">
+                        <el-col :span="10">
                             <span style="font-size: 14px; font-weight: bold; margin-right: 10px;">期间 B (对比期)</span>
                             <el-date-picker
                                 v-model="periodB_start"
@@ -252,8 +252,9 @@
                                 style="width: 140px;">
                             </el-date-picker>
                         </el-col>
-                        <el-col :span="2">
+                        <el-col :span="4" style="display: flex; gap: 10px;">
                             <el-button type="primary" size="small" icon="el-icon-search" @click="fetchTreeData" :loading="loadingData">执行对比</el-button>
+                            <el-button type="success" size="small" icon="el-icon-download" @click="exportExcel" :loading="exporting">导出 Excel</el-button>
                         </el-col>
                     </el-row>
                     
@@ -418,6 +419,7 @@
                     parents: [],
                     loadingParents: false,
                     loadingData: false,
+                    exporting: false,
                     currentParentCode: null,
                     tableData: [],
                     originalTableData: [],
@@ -562,6 +564,59 @@
                     };
                     
                     this.tableData = filterInvisibleNodes(newData);
+                },
+                
+                exportExcel() {
+                    if (!this.currentParentCode) {
+                        this.$message.warning('请先选择一个成品父件并执行对比');
+                        return;
+                    }
+                    
+                    if (!this.periodA_start || !this.periodA_end || !this.periodB_start || !this.periodB_end) {
+                        this.$message.warning('请完整选择期间A和期间B的时间范围');
+                        return;
+                    }
+                    
+                    this.exporting = true;
+                    
+                    const params = new URLSearchParams({
+                        start_a: this.periodA_start,
+                        end_a: this.periodA_end,
+                        start_b: this.periodB_start,
+                        end_b: this.periodB_end
+                    });
+                    
+                    axios({
+                        url: `/api/export_compare/${this.currentParentCode}?${params.toString()}`,
+                        method: 'GET',
+                        responseType: 'blob' // 重要：设置响应类型为 blob
+                    })
+                    .then(response => {
+                        // 创建下载链接
+                        const url = window.URL.createObjectURL(new Blob([response.data]));
+                        const link = document.createElement('a');
+                        link.href = url;
+                        // 从响应头中获取文件名，如果没有则使用默认文件名
+                        const contentDisposition = response.headers['content-disposition'];
+                        let fileName = `BOM成本对比_${this.currentParentCode}.xlsx`;
+                        if (contentDisposition) {
+                            const fileNameMatch = contentDisposition.match(/filename="?(.+)"?/);
+                            if (fileNameMatch && fileNameMatch.length === 2) {
+                                fileName = decodeURIComponent(fileNameMatch[1]);
+                            }
+                        }
+                        link.setAttribute('download', fileName);
+                        document.body.appendChild(link);
+                        link.click();
+                        document.body.removeChild(link);
+                        window.URL.revokeObjectURL(url);
+                        this.exporting = false;
+                        this.$message.success('导出成功');
+                    })
+                    .catch(error => {
+                        this.exporting = false;
+                        this.$message.error('导出失败，请重试');
+                    });
                 }
             }
         })