html逻辑优化

web_ui/templates/home.html

@@ -145,22 +145,26 @@
         </div>
 
         <div class="action-group">
+            <div v-if="globalTaskName" style="position: absolute; top: -30px; width: 100%; text-align: center; color: #E6A23C; font-weight: bold; font-size: 14px;">
+                <i class="el-icon-loading"></i> 系统忙碌中：正在执行 {{ globalTaskName }}，在此期间无法发起新的抓取。
+            </div>
+            
             <el-button 
                 type="success" 
-                :icon="syncing ? '' : 'el-icon-refresh'" 
-                :loading="syncing"
+                :icon="isSystemBusy ? 'el-icon-loading' : 'el-icon-refresh'" 
+                :disabled="isSystemBusy"
                 @click="syncReceipts"
                 round>
-                <span v-text="syncing ? '正在后台同步增量数据，请稍候...' : '读取最新收货明细报表'"></span>
+                <span v-text="syncing ? '请求已发送...' : '读取最新收货明细报表'"></span>
             </el-button>
             
             <el-button 
                 type="primary" 
-                :icon="syncingBom ? '' : 'el-icon-refresh-right'" 
-                :loading="syncingBom"
+                :icon="isSystemBusy ? 'el-icon-loading' : 'el-icon-refresh-right'" 
+                :disabled="isSystemBusy"
                 @click="syncBom"
                 round>
-                <span v-text="syncingBom ? '正在后台抓取 BOM 树，耗时较长，请稍候...' : '读取最新 BOM 表'"></span>
+                <span v-text="syncingBom ? '请求已发送...' : '读取最新 BOM 表'"></span>
             </el-button>
         </div>
     </div>
@@ -171,24 +175,53 @@
             data() {
                 return {
                     syncing: false,
-                    syncingBom: false
+                    syncingBom: false,
+                    isSystemBusy: false,
+                    globalTaskName: "",
+                    statusTimer: null
+                }
+            },
+            mounted() {
+                // 页面加载时立刻检查一次
+                this.checkTaskStatus();
+                // 之后每隔 3 秒轮询一次后端状态
+                this.statusTimer = setInterval(this.checkTaskStatus, 3000);
+            },
+            beforeDestroy() {
+                if (this.statusTimer) {
+                    clearInterval(this.statusTimer);
                 }
             },
             methods: {
+                checkTaskStatus() {
+                    axios.get('/api/task_status')
+                        .then(res => {
+                            this.isSystemBusy = res.data.is_busy;
+                            this.globalTaskName = res.data.task_name;
+                        })
+                        .catch(err => {
+                            // 忽略检查错误
+                        });
+                },
                 syncReceipts() {
                     this.syncing = true;
                     
                     axios.post('/api/sync_receipts')
                         .then(res => {
                             if (res.data.success) {
-                                this.$message.success('明细同步成功！' + res.data.message);
+                                this.$message.success('已触发！' + res.data.message);
+                                // 立即主动检查一次状态更新按钮
+                                setTimeout(this.checkTaskStatus, 500);
                             } else {
-                                this.$message.error('同步失败：' + res.data.message);
+                                this.$message.error('触发失败：' + res.data.message);
                             }
                         })
                         .catch(err => {
-                            this.$message.error('请求发生异常，请检查后端日志。');
-                            console.error(err);
+                            if (err.response && err.response.status === 409) {
+                                this.$message.warning(err.response.data.message);
+                            } else {
+                                this.$message.error('请求发生异常，请检查后端日志。');
+                            }
                         })
                         .finally(() => {
                             this.syncing = false;
@@ -200,14 +233,18 @@
                     axios.post('/api/sync_bom')
                         .then(res => {
                             if (res.data.success) {
-                                this.$message.success('BOM 同步成功！' + res.data.message);
+                                this.$message.success('已触发！' + res.data.message);
+                                setTimeout(this.checkTaskStatus, 500);
                             } else {
-                                this.$message.error('同步失败：' + res.data.message);
+                                this.$message.error('触发失败：' + res.data.message);
                             }
                         })
                         .catch(err => {
-                            this.$message.error('请求发生异常，这可能需要较长时间，请检查控制台日志。');
-                            console.error(err);
+                            if (err.response && err.response.status === 409) {
+                                this.$message.warning(err.response.data.message);
+                            } else {
+                                this.$message.error('请求发生异常，请检查后端日志。');
+                            }
                         })
                         .finally(() => {
                             this.syncingBom = false;