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

<template>
  <div class="app-container">
    <el-card shadow="always">
      <template #header>
        <div class="card-header">
          <span class="title">BOM 配方管理</span>
          <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" 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" 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>

    <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="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>
              </div>
            </el-option>
          </el-select>
        </el-form-item>

        <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)"
              >
                <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>
            </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%"
                  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" align="center">
            <template #default="{ $index }">
              <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" 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>
          <el-button type="primary" :loading="saving" @click="submitForm">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
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'

interface BomItem {
  bom_no: string
  parent_id: number
  parent_name: string
  version: string
  child_count: number
}

interface MaterialBase {
  id: number
  name: string
  spec: string
}

interface ChildRow {
  child_id: number | null
  dosage: number
  remark: string
}

const loading = ref(false)
const dialogVisible = ref(false)
const saving = 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.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({ keyword: searchKeyword.value })
    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
  isEditMode.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
      // 编辑模式下，BOM编号不可改
      isEditMode.value = true
    } 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
      // 另存为模式，BOM编号可编辑
      isEditMode.value = false
    } else {
      ElMessage.error(res.msg || '获取详情失败')
    }
  } catch (error) {
    ElMessage.error('网络错误')
  }
}

const handleDelete = (bomNo: string) => {
  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 || '删除失败')
          }
        } catch (error) {
          ElMessage.error('网络错误')
        }
      })
      .catch(() => {})
}

const resetForm = () => {
  form.bom_no = ''
  form.parent_id = null
  form.version = 'V1.0'
  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 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
      }
    }

    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(() => {
  fetchBomList()
  fetchMaterialOptions()
})
</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;
}
</style>