From fcebe7084837d42ea035d569021e998be3e1324a Mon Sep 17 00:00:00 2001
From: dxc <duxingchen@iris-rs.cn>
Date: Thu, 12 Feb 2026 09:47:22 +0800
Subject: [PATCH] feat: add BOM management page

Co-authored-by: aider (openai/DeepSeek-V3.2-Thinking) <aider@aider.chat>
---
 inventory-web/src/views/bom/BomManage.vue | 338 ++++++++++++++++++++++
 1 file changed, 338 insertions(+)

diff --git a/inventory-web/src/views/bom/BomManage.vue b/inventory-web/src/views/bom/BomManage.vue
index e69de29..c15ea98 100644
--- a/inventory-web/src/views/bom/BomManage.vue
+++ b/inventory-web/src/views/bom/BomManage.vue
@@ -0,0 +1,338 @@
+<template>
+  <div class="app-container">
+    <el-card shadow="always">
+      <template #header>
+        <div class="card-header">
+          <span class="title">BOM 配方管理</span>
+          <div>
+            <el-button type="primary" :icon="Plus" @click="handleCreate">新建 BOM</el-button>
+          </div>
+        </div>
+      </template>
+
+      <el-table v-loading="loading" :data="bomList" border style="width: 100%">
+        <el-table-column prop="bom_no" label="BOM编号" min-width="180" />
+        <el-table-column prop="parent_name" label="父件名称" min-width="180" />
+        <el-table-column prop="version" label="版本" width="100" />
+        <el-table-column prop="child_count" label="子件数量" width="100" />
+        <el-table-column label="操作" width="280" align="center" fixed="right">
+          <template #default="{ row }">
+            <el-button type="primary" size="small" @click="handleEdit(row.bom_no)">编辑</el-button>
+            <el-button type="success" size="small" @click="handleSaveAs(row.bom_no)">另存为新版</el-button>
+            <el-button type="danger" size="small" @click="handleDelete(row.bom_no)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+
+    <!-- BOM 编辑弹窗 -->
+    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="800px" destroy-on-close>
+      <el-form :model="form" label-width="120px" ref="formRef">
+        <el-form-item label="父件 (成品)" prop="parent_id" required>
+          <el-select
+            v-model="form.parent_id"
+            placeholder="请选择父件物料"
+            filterable
+            style="width: 100%"
+            :disabled="!!form.bom_no && !isSaveAs"
+          >
+            <el-option
+              v-for="item in materialOptions"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="版本" prop="version">
+          <el-input v-model="form.version" placeholder="默认 v1" :disabled="!!form.bom_no && !isSaveAs" />
+        </el-form-item>
+        <div style="font-weight: bold; margin-bottom: 10px;">子件列表</div>
+        <el-table :data="form.children" border style="width: 100%; margin-bottom: 15px">
+          <el-table-column label="子件物料" min-width="300">
+            <template #default="{ row, $index }">
+              <el-select
+                v-model="row.child_id"
+                placeholder="请选择"
+                filterable
+                style="width: 100%"
+                @change="(val) => onChildChange(val, $index)"
+              >
+                <el-option
+                  v-for="item in materialOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                />
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column label="用量" width="150">
+            <template #default="{ row }">
+              <el-input-number
+                v-model="row.dosage"
+                :min="0"
+                :precision="4"
+                style="width: 100%"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column label="备注" width="180">
+            <template #default="{ row }">
+              <el-input v-model="row.remark" placeholder="备注" />
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="80">
+            <template #default="{ $index }">
+              <el-button type="danger" size="small" @click="removeChild($index)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div style="margin-top: 10px; text-align: center;">
+          <el-button type="primary" @click="addChild">添加子件</el-button>
+        </div>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="dialogVisible = false">取消</el-button>
+          <el-button type="primary" :loading="saving" @click="submitForm">保存</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus } from '@element-plus/icons-vue'
+import { getBomList, getBomDetail, saveBom, deleteBom } from '@/api/bom'
+import { getMaterialBaseList } from '@/api/inbound/stock'
+
+interface BomItem {
+  bom_no: string
+  parent_id: number
+  parent_name: string
+  version: string
+  child_count: number
+}
+
+interface MaterialBase {
+  id: number
+  name: string
+}
+
+interface ChildRow {
+  child_id: number | null
+  dosage: number
+  remark: string
+}
+
+const loading = ref(false)
+const dialogVisible = ref(false)
+const saving = ref(false)
+const isSaveAs = ref(false)
+
+const bomList = ref<BomItem[]>([])
+const materialOptions = ref<MaterialBase[]>([])
+
+const form = reactive({
+  bom_no: '',
+  parent_id: null as number | null,
+  version: 'v1',
+  children: [] as ChildRow[]
+})
+
+const dialogTitle = ref('新建 BOM')
+
+const fetchBomList = async () => {
+  loading.value = true
+  try {
+    const res = await getBomList()
+    if (res.code === 200) {
+      bomList.value = res.data
+    } else {
+      ElMessage.error(res.msg || '获取列表失败')
+    }
+  } catch (error) {
+    ElMessage.error('网络错误')
+  } finally {
+    loading.value = false
+  }
+}
+
+const fetchMaterialOptions = async () => {
+  try {
+    const res = await getMaterialBaseList()
+    if (res.code === 200) {
+      materialOptions.value = res.data
+    }
+  } catch (error) {
+    console.error('获取物料列表失败', error)
+  }
+}
+
+const handleCreate = () => {
+  resetForm()
+  dialogTitle.value = '新建 BOM'
+  dialogVisible.value = true
+  isSaveAs.value = false
+}
+
+const handleEdit = async (bomNo: string) => {
+  try {
+    const res = await getBomDetail(bomNo)
+    if (res.code === 200) {
+      const data = res.data
+      form.bom_no = data.bom_no
+      form.parent_id = data.parent_id
+      form.version = data.version
+      form.children = data.children.map((child: any) => ({
+        child_id: child.child_id,
+        dosage: child.dosage,
+        remark: child.remark || ''
+      }))
+      dialogTitle.value = '编辑 BOM'
+      dialogVisible.value = true
+      isSaveAs.value = false
+    } else {
+      ElMessage.error(res.msg || '获取详情失败')
+    }
+  } catch (error) {
+    ElMessage.error('网络错误')
+  }
+}
+
+const handleSaveAs = async (bomNo: string) => {
+  try {
+    const res = await getBomDetail(bomNo)
+    if (res.code === 200) {
+      const data = res.data
+      // 清空 bom_no，表示新建
+      form.bom_no = ''
+      form.parent_id = data.parent_id
+      form.version = data.version + '_copy'
+      form.children = data.children.map((child: any) => ({
+        child_id: child.child_id,
+        dosage: child.dosage,
+        remark: child.remark || ''
+      }))
+      dialogTitle.value = '另存为新版'
+      dialogVisible.value = true
+      isSaveAs.value = true
+    } else {
+      ElMessage.error(res.msg || '获取详情失败')
+    }
+  } catch (error) {
+    ElMessage.error('网络错误')
+  }
+}
+
+const handleDelete = (bomNo: string) => {
+  ElMessageBox.confirm('确定删除该 BOM 吗？', '警告', {
+    type: 'warning'
+  })
+    .then(async () => {
+      try {
+        const res = await deleteBom(bomNo)
+        if (res.code === 200) {
+          ElMessage.success('删除成功')
+          fetchBomList()
+        } else {
+          ElMessage.error(res.msg || '删除失败')
+        }
+      } catch (error) {
+        ElMessage.error('网络错误')
+      }
+    })
+    .catch(() => {})
+}
+
+const resetForm = () => {
+  form.bom_no = ''
+  form.parent_id = null
+  form.version = 'v1'
+  form.children = []
+}
+
+const addChild = () => {
+  form.children.push({
+    child_id: null,
+    dosage: 0,
+    remark: ''
+  })
+}
+
+const removeChild = (index: number) => {
+  form.children.splice(index, 1)
+}
+
+const onChildChange = (val: number, index: number) => {
+  // 可以做一些校验，比如不能与父件相同
+}
+
+const submitForm = async () => {
+  if (!form.parent_id) {
+    ElMessage.warning('请选择父件')
+    return
+  }
+  if (form.children.length === 0) {
+    ElMessage.warning('请至少添加一个子件')
+    return
+  }
+  for (const child of form.children) {
+    if (!child.child_id) {
+      ElMessage.warning('请为每个子件选择物料')
+      return
+    }
+    if (child.child_id === form.parent_id) {
+      ElMessage.warning('子件不能与父件相同')
+      return
+    }
+  }
+
+  const payload = {
+    bom_no: form.bom_no || undefined,
+    version: form.version,
+    parent_id: form.parent_id,
+    children: form.children.map(c => ({
+      child_id: c.child_id,
+      dosage: c.dosage,
+      remark: c.remark
+    }))
+  }
+
+  saving.value = true
+  try {
+    const res = await saveBom(payload)
+    if (res.code === 200) {
+      ElMessage.success('保存成功')
+      dialogVisible.value = false
+      fetchBomList()
+    } else {
+      ElMessage.error(res.msg || '保存失败')
+    }
+  } catch (error) {
+    ElMessage.error('网络错误')
+  } finally {
+    saving.value = false
+  }
+}
+
+onMounted(() => {
+  fetchBomList()
+  fetchMaterialOptions()
+})
+</script>
+
+<style scoped>
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.title {
+  font-size: 18px;
+  font-weight: bold;
+}
+</style>