修改bom表逻辑和出库选单内容

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

@@ -4,95 +4,145 @@
       <template #header>
         <div class="card-header">
           <span class="title">BOM 配方管理</span>
-          <div>
+          <div class="header-right">
+            <el-input
+                v-model="searchKeyword"
+                placeholder="搜索 BOM编号/父子件名称/规格"
+                style="width: 300px; margin-right: 15px;"
+                clearable
+                @clear="fetchBomList"
+                @keyup.enter="fetchBomList"
+            >
+              <template #append>
+                <el-button :icon="Search" @click="fetchBomList" />
+              </template>
+            </el-input>
             <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="parent_spec" label="父件规格" min-width="180" />
-        <el-table-column prop="version" label="版本" width="100" />
-        <el-table-column prop="child_count" label="子件数量" width="100" />
+        <el-table-column prop="bom_no" label="BOM编号" min-width="180" sortable />
+        <el-table-column prop="parent_name" label="父件名称" min-width="150" />
+        <el-table-column prop="parent_spec" label="父件规格" min-width="150" />
+        <el-table-column prop="version" label="版本" width="100" align="center">
+          <template #default="{ row }">
+            <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">
           <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>
+            <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>
           </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-dialog v-model="dialogVisible" :title="dialogTitle" width="850px" destroy-on-close :close-on-click-modal="false">
+      <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编号"
+                  :disabled="isEditMode"
+                  clearable
+              />
+            </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-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="!!form.bom_no && !isSaveAs"
+              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"
-            />
+                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-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>
+
+        <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">
             <template #default="{ row, $index }">
               <el-select
-                v-model="row.child_id"
-                placeholder="请选择"
-                filterable
-                style="width: 100%"
-                @change="(val) => onChildChange(val, $index)"
+                  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} (${item.spec})`"
-                  :value="item.id"
-                />
+                    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>
             </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%"
+                  v-model="row.dosage"
+                  :min="0"
+                  :precision="4"
+                  style="width: 100%"
+                  controls-position="right"
               />
             </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">
+
+          <el-table-column label="操作" width="80" align="center">
             <template #default="{ $index }">
-              <el-button type="danger" size="small" @click="removeChild($index)">删除</el-button>
+              <el-button type="danger" link @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>
+          <el-button type="primary" plain :icon="Plus" @click="addChild" style="width: 100%">添加一行子件</el-button>
         </div>
       </el-form>
+
       <template #footer>
         <span class="dialog-footer">
           <el-button @click="dialogVisible = false">取消</el-button>
@@ -104,9 +154,9 @@
 </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 { ref, reactive, onMounted, computed } from 'vue'
+import { ElMessage, ElMessageBox, FormInstance, FormRules } from 'element-plus'
+import { Plus, Search } from '@element-plus/icons-vue'
 import { getBomList, getBomDetail, saveBom, deleteBom } from '@/api/bom'
 import { getMaterialBaseList } from '@/api/inbound/stock'
 
@@ -133,24 +183,33 @@ interface ChildRow {
 const loading = ref(false)
 const dialogVisible = ref(false)
 const saving = ref(false)
-const isSaveAs = ref(false)
+// isEditMode: true表示编辑现有BOM，false表示新建或另存为
+const isEditMode = ref(false)
 
 const bomList = ref<BomItem[]>([])
 const materialOptions = ref<MaterialBase[]>([])
+const searchKeyword = ref('')
 
+const formRef = ref<FormInstance>()
 const form = reactive({
   bom_no: '',
   parent_id: null as number | null,
-  version: 'v1',
+  version: 'V1.0',
   children: [] as ChildRow[]
 })
 
+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' }]
+})
+
 const dialogTitle = ref('新建 BOM')
 
 const fetchBomList = async () => {
   loading.value = true
   try {
-    const res = await getBomList()
+    const res = await getBomList({ keyword: searchKeyword.value })
     if (res.code === 200) {
       bomList.value = res.data
     } else {
@@ -178,7 +237,7 @@ const handleCreate = () => {
   resetForm()
   dialogTitle.value = '新建 BOM'
   dialogVisible.value = true
-  isSaveAs.value = false
+  isEditMode.value = false
 }
 
 const handleEdit = async (bomNo: string) => {
@@ -196,7 +255,8 @@ const handleEdit = async (bomNo: string) => {
       }))
       dialogTitle.value = '编辑 BOM'
       dialogVisible.value = true
-      isSaveAs.value = false
+      // 编辑模式下，BOM编号不可改
+      isEditMode.value = true
     } else {
       ElMessage.error(res.msg || '获取详情失败')
     }
@@ -210,7 +270,7 @@ const handleSaveAs = async (bomNo: string) => {
     const res = await getBomDetail(bomNo)
     if (res.code === 200) {
       const data = res.data
-      // 清空 bom_no，表示新建
+      // 清空 bom_no，要求用户输入新的
       form.bom_no = ''
       form.parent_id = data.parent_id
       form.version = data.version + '_copy'
@@ -221,7 +281,8 @@ const handleSaveAs = async (bomNo: string) => {
       }))
       dialogTitle.value = '另存为新版'
       dialogVisible.value = true
-      isSaveAs.value = true
+      // 另存为模式，BOM编号可编辑
+      isEditMode.value = false
     } else {
       ElMessage.error(res.msg || '获取详情失败')
     }
@@ -231,30 +292,33 @@ const handleSaveAs = async (bomNo: string) => {
 }
 
 const handleDelete = (bomNo: string) => {
-  ElMessageBox.confirm('确定删除该 BOM 吗？', '警告', {
-    type: 'warning'
+  ElMessageBox.confirm('确定删除该 BOM 吗？此操作不可恢复', '警告', {
+    type: 'warning',
+    confirmButtonText: '确定删除',
+    cancelButtonText: '取消'
   })
-    .then(async () => {
-      try {
-        const res = await deleteBom(bomNo)
-        if (res.code === 200) {
-          ElMessage.success('删除成功')
-          fetchBomList()
-        } else {
-          ElMessage.error(res.msg || '删除失败')
+      .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 (error) {
-        ElMessage.error('网络错误')
-      }
-    })
-    .catch(() => {})
+      })
+      .catch(() => {})
 }
 
 const resetForm = () => {
   form.bom_no = ''
   form.parent_id = null
-  form.version = 'v1'
+  form.version = 'V1.0'
   form.children = []
+  if (formRef.value) formRef.value.resetFields()
 }
 
 const addChild = () => {
@@ -270,55 +334,58 @@ const removeChild = (index: number) => {
 }
 
 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('请为每个子件选择物料')
+  if (!formRef.value) return
+
+  await formRef.value.validate(async (valid) => {
+    if (!valid) return
+
+    if (form.children.length === 0) {
+      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 || '保存失败')
+    for (const child of form.children) {
+      if (!child.child_id) {
+        ElMessage.warning('请为每个子件选择物料')
+        return
+      }
+      if (child.child_id === form.parent_id) {
+        ElMessage.warning('子件不能与父件相同')
+        return
+      }
     }
-  } catch (error) {
-    ElMessage.error('网络错误')
-  } finally {
-    saving.value = false
-  }
+
+    const payload = {
+      bom_no: form.bom_no, // 必填
+      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(() => {
@@ -333,8 +400,29 @@ onMounted(() => {
   justify-content: space-between;
   align-items: center;
 }
+.header-right {
+  display: flex;
+  align-items: center;
+}
 .title {
   font-size: 18px;
   font-weight: bold;
 }
-</style>
+
+/* 下拉框选项样式优化 */
+.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;
+}
+</style>