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

<template>
  <div class="bom-container">
    <!-- 当没有传入id时显示创建按钮 -->
    <div v-if="!id" class="create-bom">
      <el-button 
        type="primary"
        :loading="createLoading"
        :disabled="createLoading"
        @click="handleCreate"
        class="create-button"
      >
        <template v-if="!createLoading">
          <i class="el-icon-plus"></i> 创建参数
        </template>
        <template v-else>
          创建中...
        </template>
      </el-button>
    </div>

    <!-- 当传入id时显示数据区域 -->
    <div v-else class="bom-details">
      <div v-if="loading" class="loading-indicator">
        加载中...
        <div class="spinner"></div>
      </div>
      
      <div v-if="error" class="error-message">
        加载失败: {{ error }}
        <button @click="fetchData" class="retry-button">重试</button>
      </div>

      <div v-if="data && !loading">
        <el-form label-width="100px">
          <el-form-item label="参数名称">
            <el-input v-model="info.bomName" @blur="handleUpdateBom"/>
          </el-form-item>
          <el-form-item label="参数编码">
            <el-input v-model="info.bomCode" @blur="handleUpdateBom"/>
          </el-form-item>
        </el-form>
        <BomItem :bomId="id" />
      </div>
    </div>
  </div>
</template>

<script>
import { addBom, updateBom, getBom } from '@/api/wms/bom';
import { listBomItem } from '@/api/wms/bomItem';
import { updateProduct } from '@/api/wms/product';
import { updateRawMaterial } from '@/api/wms/rawMaterial';

import BomItem from './BomItem.vue';

export default {
  props: {
    id: [String, Number],   // 支持字符串或数字类型的ID
    itemId: [String, Number],
    type: String            // 可选类型参数
  },
  components: {
    BomItem
  },
  data() {
    return {
      loading: false,
      error: null,
      data: null,
      info: {},
      createLoading: false,
    };
  },
  watch: {
    id: {
      immediate: true, // 组件创建时立即执行
      handler(newVal) {
        if (newVal) {
          console.log('侦听到变化')
          this.fetchBomDetails();
        } else {
          // 没有ID时重置数据
          this.data = null;
          this.error = null;
        }
      }
    }
  },
  methods: {
    async fetchBomDetails() {
      try {
        this.loading = true;
        this.error = null;
        
        // 实际项目中替换为真实API调用
        const response = await listBomItem({
          bomId: this.id
        })
        this.data = response.rows;

        const response2 = await getBom(this.id)
        this.info = response2.data;
      } catch (err) {
        this.error = err.message || '请求失败，请重试';
        console.error('获取参数详情失败:', err);
      } finally {
        this.loading = false;
      }
    },
    
    async handleCreate() {
      // 防止重复点击
      if (this.createLoading) return;
      
      try {
        this.createLoading = true;
        const bomResponse = await addBom({
          bomName: (this.type == 'product' ? '产品参数' : '原材料参数') + new Date().getTime(),
          bomCode: (this.type == 'product' ? 'P' : 'R') + new Date().getTime()
        });
        
        this.$message.success('创建参数成功');
        const bomData = bomResponse.data;

        // 根据类型更新产品/原材料
        if (this.type == 'product' && this.itemId) {
          await updateProduct({
            productId: this.itemId,
            bomId: bomData.bomId
          });
        } else if (this.type == 'raw_material' && this.itemId) {
          await updateRawMaterial({
            rawMaterialId: this.itemId,
            bomId: bomData.bomId
          });
        }
        this.$store.dispatch('category/getBomMap');
        
        // 触发事件
        this.$emit('addBom', bomData);
      } catch (error) {
        console.error('创建失败:', error);
        this.$message.error(`创建失败: ${error.message || '未知错误'}`);
      } finally {
        this.createLoading = false;
      }
    },
    
    handleUpdateBom() {
      this.$message.warning('正在更新参数...');
      updateBom({
        bomId: this.id,
        bomName: this.info.bomName,
        bomCode: this.info.bomCode
      }).then(_ => {
        this.$message.success('更新参数成功');
        this.$store.dispatch('category/getBomMap');
      })
    },

    fetchData() {
      // 重试获取数据
      if (this.id) this.fetchBomDetails();
    }
  }
};
</script>

<style scoped>
.create-bom {
  text-align: center;
  padding: 40px 0;
}

.create-button {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 12px 24px;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.create-button:hover {
  background-color: #388E3C;
}

.loading-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px;
  color: #666;
}

.spinner {
  width: 20px;
  height: 20px;
  border: 3px solid rgba(0,0,0,0.1);
  border-radius: 50%;
  border-top-color: #3498db;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.error-message {
  padding: 20px;
  background-color: #ffebee;
  color: #d32f2f;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.retry-button {
  padding: 8px 16px;
  background-color: #f44336;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  width: 120px;
}

.bom-info {
  margin-top: 20px;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 4px;
  border-left: 4px solid #2196F3;
}

.bom-info p {
  margin: 10px 0;
}
</style>