对于出库选单和Bom库的逻辑完善以及功能美化

inventory-web/src/views/bom/BomManage.vue

@@ -7,7 +7,7 @@
           <div class="header-right">
             <el-input
                 v-model="searchKeyword"
-                placeholder="搜索 BOM编号/父子件名称/规格"
+                placeholder="搜索 编号/名称/规格/子件..."
                 style="width: 300px; margin-right: 15px;"
                 clearable
                 @clear="fetchBomList"
@@ -31,12 +31,19 @@
             <el-tag>{{ row.version }}</el-tag>
           </template>
         </el-table-column>
-        <el-table-column prop="child_count" label="子件数" width="100" align="center" />
-        <el-table-column label="操作" width="280" align="center" fixed="right">
+        <el-table-column label="状态" width="100" align="center">
           <template #default="{ row }">
-            <el-button type="primary" link @click="handleEdit(row.bom_no)">编辑</el-button>
-            <el-button type="success" link @click="handleSaveAs(row.bom_no)">另存为</el-button>
-            <el-button type="danger" link @click="handleDelete(row.bom_no)">删除</el-button>
+            <el-tag :type="row.is_enabled ? 'success' : 'danger'">
+              {{ row.is_enabled ? '启用' : '禁用' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="child_count" label="子件数" width="80" align="center" />
+        <el-table-column label="操作" width="250" align="center" fixed="right">
+          <template #default="{ row }">
+            <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
+            <el-button type="success" link @click="handleSaveAs(row)">另存为</el-button>
+            <el-button type="danger" link @click="handleDelete(row)">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -46,57 +53,66 @@
       <el-form :model="form" label-width="120px" ref="formRef" :rules="rules">
 
         <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="BOM 编号" prop="bom_no">
-              <el-input
-                  v-model="form.bom_no"
-                  placeholder="请输入BOM编号"
+          <el-col :span="16">
+            <el-form-item label="父件 (成品)" prop="parent_id">
+              <el-select
+                  v-model="form.parent_id"
+                  placeholder="请搜索并选择父件"
+                  filterable
+                  style="width: 100%"
                   :disabled="isEditMode"
-                  clearable
-              />
+                  class="beautified-select"
+                  @change="onParentChange"
+              >
+                <el-option
+                    v-for="item in materialOptions"
+                    :key="item.id"
+                    :label="`${item.name} (${item.spec})`"
+                    :value="item.id"
+                >
+                  <div class="option-row">
+                    <span class="option-name">{{ item.name }}</span>
+                    <span class="option-spec">{{ item.spec }}</span>
+                  </div>
+                </el-option>
+              </el-select>
             </el-form-item>
           </el-col>
-          <el-col :span="12">
-            <el-form-item label="版本" prop="version">
-              <el-input v-model="form.version" placeholder="例如：V1.0" />
+          <el-col :span="8">
+            <el-form-item label="是否启用" prop="is_enabled">
+              <el-switch v-model="form.is_enabled" active-text="启用" inactive-text="禁用" />
             </el-form-item>
           </el-col>
         </el-row>
 
-        <el-form-item label="父件 (成品)" prop="parent_id">
-          <el-select
-              v-model="form.parent_id"
-              placeholder="请搜索并选择父件"
-              filterable
-              style="width: 100%"
-              :disabled="isEditMode"
-              class="beautified-select"
-          >
-            <el-option
-                v-for="item in materialOptions"
-                :key="item.id"
-                :label="`${item.name} (${item.spec})`"
-                :value="item.id"
-            >
-              <div class="option-row">
-                <span class="option-name">{{ item.name }}</span>
-                <span class="option-spec">{{ item.spec }}</span>
+        <el-row :gutter="20">
+          <el-col :span="14">
+            <el-form-item label="BOM 编号" required>
+              <el-input v-model="form.bom_suffix" placeholder="输入后缀 (如 -001)" :disabled="isEditMode">
+                <template #prepend v-if="form.bom_prefix">{{ form.bom_prefix }}</template>
+              </el-input>
+              <div style="font-size: 12px; color: #909399; line-height: 1.2; margin-top: 4px;">
+                最终编号: <span style="font-weight: bold">{{ fullBomNo }}</span>
               </div>
-            </el-option>
-          </el-select>
-        </el-form-item>
+            </el-form-item>
+          </el-col>
+          <el-col :span="10">
+            <el-form-item label="版本号" prop="version">
+              <el-input v-model="form.version" placeholder="如: V1.0" />
+            </el-form-item>
+          </el-col>
+        </el-row>
 
         <div style="font-weight: bold; margin: 15px 0 10px 0; border-left: 4px solid #409EFF; padding-left: 10px;">子件列表</div>
 
-        <el-table :data="form.children" border style="width: 100%; margin-bottom: 15px">
-          <el-table-column label="子件物料" min-width="300">
+        <el-table :data="form.children" border style="width: 100%; margin-bottom: 15px" max-height="300">
+          <el-table-column label="子件物料" min-width="280">
             <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"
@@ -113,27 +129,21 @@
             </template>
           </el-table-column>
 
-          <el-table-column label="用量" width="150">
+          <el-table-column label="用量" width="140">
             <template #default="{ row }">
-              <el-input-number
-                  v-model="row.dosage"
-                  :min="0"
-                  :precision="4"
-                  style="width: 100%"
-                  controls-position="right"
-              />
+              <el-input-number v-model="row.dosage" :min="0" :precision="4" style="width: 100%" controls-position="right" />
             </template>
           </el-table-column>
 
-          <el-table-column label="备注" width="180">
+          <el-table-column label="备注" width="150">
             <template #default="{ row }">
               <el-input v-model="row.remark" placeholder="备注" />
             </template>
           </el-table-column>
 
-          <el-table-column label="操作" width="80" align="center">
+          <el-table-column label="操作" width="60" align="center">
             <template #default="{ $index }">
-              <el-button type="danger" link @click="removeChild($index)">删除</el-button>
+              <el-button type="danger" link @click="removeChild($index)">删</el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -160,20 +170,20 @@ import { Plus, Search } 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
+  is_enabled: boolean
   child_count: number
 }
-
 interface MaterialBase {
   id: number
   name: string
   spec: string
 }
-
 interface ChildRow {
   child_id: number | null
   dosage: number
@@ -183,7 +193,6 @@ interface ChildRow {
 const loading = ref(false)
 const dialogVisible = ref(false)
 const saving = ref(false)
-// isEditMode: true表示编辑现有BOM，false表示新建或另存为
 const isEditMode = ref(false)
 
 const bomList = ref<BomItem[]>([])
@@ -192,14 +201,23 @@ const searchKeyword = ref('')
 
 const formRef = ref<FormInstance>()
 const form = reactive({
-  bom_no: '',
+  bom_prefix: '',  // 自动生成的父件规格前缀
+  bom_suffix: '',  // 用户输入的后缀
   parent_id: null as number | null,
   version: 'V1.0',
+  is_enabled: true,
   children: [] as ChildRow[]
 })
 
+// 计算最终的 BOM 编号
+const fullBomNo = computed(() => {
+  if (form.bom_prefix) {
+    return form.bom_prefix + (form.bom_suffix ? ('-' + form.bom_suffix) : '')
+  }
+  return form.bom_suffix
+})
+
 const rules = reactive<FormRules>({
-  bom_no: [{ required: true, message: '请输入BOM编号', trigger: 'blur' }],
   parent_id: [{ required: true, message: '请选择父件', trigger: 'change' }],
   version: [{ required: true, message: '请输入版本号', trigger: 'blur' }]
 })
@@ -210,164 +228,121 @@ const fetchBomList = async () => {
   loading.value = true
   try {
     const res = await getBomList({ keyword: searchKeyword.value })
-    if (res.code === 200) {
-      bomList.value = res.data
-    } else {
-      ElMessage.error(res.msg || '获取列表失败')
-    }
-  } catch (error) {
-    ElMessage.error('网络错误')
-  } finally {
-    loading.value = false
-  }
+    if (res.code === 200) bomList.value = res.data
+  } 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)
+    if (res.code === 200) materialOptions.value = res.data
+  } catch (error) {}
+}
+
+// 监听父件变化，自动设置前缀
+const onParentChange = (val: number) => {
+  const selected = materialOptions.value.find(m => m.id === val)
+  if (selected && selected.spec) {
+    form.bom_prefix = selected.spec
+  } else {
+    form.bom_prefix = ''
   }
 }
 
 const handleCreate = () => {
   resetForm()
   dialogTitle.value = '新建 BOM'
-  dialogVisible.value = true
   isEditMode.value = false
+  dialogVisible.value = true
 }
 
-const handleEdit = async (bomNo: string) => {
+const handleEdit = async (row: BomItem) => {
+  await loadDetail(row.bom_no, row.version)
+  dialogTitle.value = '编辑 BOM'
+  isEditMode.value = true // 编辑时不允许修改编号前缀/后缀
+  dialogVisible.value = true
+}
+
+const handleSaveAs = async (row: BomItem) => {
+  await loadDetail(row.bom_no, row.version)
+  dialogTitle.value = '另存为新版/变体'
+  isEditMode.value = true // 另存为时，编号部分依然锁定（因为我们是在同一个编号下新增版本）
+
+  // 提示用户修改版本号
+  form.version = form.version + '_V2'
+  dialogVisible.value = true
+}
+
+const loadDetail = async (bomNo: string, version: string) => {
   try {
-    const res = await getBomDetail(bomNo)
+    const res = await getBomDetail(bomNo, version)
     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.is_enabled = data.is_enabled
       form.children = data.children.map((child: any) => ({
         child_id: child.child_id,
         dosage: child.dosage,
         remark: child.remark || ''
       }))
-      dialogTitle.value = '编辑 BOM'
-      dialogVisible.value = true
-      // 编辑模式下，BOM编号不可改
-      isEditMode.value = true
-    } else {
-      ElMessage.error(res.msg || '获取详情失败')
+
+      // 解析编号到 前缀/后缀
+      if (data.parent_spec && bomNo.startsWith(data.parent_spec)) {
+        form.bom_prefix = data.parent_spec
+        // 移除前缀和可能的分隔符
+        let suffix = bomNo.substring(data.parent_spec.length)
+        if (suffix.startsWith('-')) suffix = suffix.substring(1)
+        form.bom_suffix = suffix
+      } else {
+        form.bom_prefix = ''
+        form.bom_suffix = bomNo
+      }
     }
-  } catch (error) {
-    ElMessage.error('网络错误')
-  }
+  } catch (e) { 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
-      // 另存为模式，BOM编号可编辑
-      isEditMode.value = false
-    } else {
-      ElMessage.error(res.msg || '获取详情失败')
-    }
-  } catch (error) {
-    ElMessage.error('网络错误')
-  }
-}
-
-const handleDelete = (bomNo: string) => {
-  ElMessageBox.confirm('确定删除该 BOM 吗？此操作不可恢复', '警告', {
-    type: 'warning',
-    confirmButtonText: '确定删除',
-    cancelButtonText: '取消'
-  })
+const handleDelete = (row: BomItem) => {
+  ElMessageBox.confirm(`确定删除 ${row.bom_no} (${row.version}) 吗？`, '警告', { type: 'warning' })
       .then(async () => {
         try {
-          const res = await deleteBom(bomNo)
+          const res = await deleteBom(row.bom_no, row.version)
           if (res.code === 200) {
             ElMessage.success('删除成功')
             fetchBomList()
-          } else {
-            ElMessage.error(res.msg || '删除失败')
           }
-        } catch (error) {
-          ElMessage.error('网络错误')
-        }
+        } catch (e) {}
       })
       .catch(() => {})
 }
 
 const resetForm = () => {
-  form.bom_no = ''
+  form.bom_prefix = ''
+  form.bom_suffix = ''
   form.parent_id = null
   form.version = 'V1.0'
+  form.is_enabled = true
   form.children = []
   if (formRef.value) formRef.value.resetFields()
 }
 
-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 addChild = () => form.children.push({ child_id: null, dosage: 0, remark: '' })
+const removeChild = (idx: number) => form.children.splice(idx, 1)
 
 const submitForm = async () => {
   if (!formRef.value) return
-
   await formRef.value.validate(async (valid) => {
     if (!valid) 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
-      }
-    }
+    if (!fullBomNo.value) return ElMessage.warning('BOM编号不能为空')
+    if (form.children.length === 0) return ElMessage.warning('请至少添加一个子件')
 
     const payload = {
-      bom_no: form.bom_no, // 必填
+      bom_no: fullBomNo.value,
       version: form.version,
       parent_id: form.parent_id,
-      children: form.children.map(c => ({
-        child_id: c.child_id,
-        dosage: c.dosage,
-        remark: c.remark
-      }))
+      is_enabled: form.is_enabled,
+      children: form.children
     }
 
     saving.value = true
@@ -377,14 +352,9 @@ const submitForm = async () => {
         ElMessage.success('保存成功')
         dialogVisible.value = false
         fetchBomList()
-      } else {
-        ElMessage.error(res.msg || '保存失败')
-      }
-    } catch (error) {
-      ElMessage.error('网络错误')
-    } finally {
-      saving.value = false
-    }
+      } else { ElMessage.error(res.msg || '保存失败') }
+    } catch (e) { ElMessage.error('网络错误') }
+    finally { saving.value = false }
   })
 }
 
@@ -395,34 +365,10 @@ onMounted(() => {
 </script>
 
 <style scoped>
-.card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-.header-right {
-  display: flex;
-  align-items: center;
-}
-.title {
-  font-size: 18px;
-  font-weight: bold;
-}
-
-/* 下拉框选项样式优化 */
-.option-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-}
-.option-name {
-  font-weight: bold;
-  color: #303133;
-}
-.option-spec {
-  font-size: 12px;
-  color: #909399;
-  margin-left: 15px;
-}
+.card-header { display: flex; justify-content: space-between; align-items: center; }
+.header-right { display: flex; align-items: center; }
+.title { font-size: 18px; font-weight: bold; }
+.option-row { display: flex; justify-content: space-between; width: 100%; }
+.option-name { font-weight: bold; color: #303133; }
+.option-spec { font-size: 12px; color: #909399; margin-left: 15px; }
 </style>