374 lines
13 KiB
Vue
374 lines
13 KiB
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="搜索 编号/名称/规格/子件..."
|
|
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 label="状态" width="100" align="center">
|
|
<template #default="{ row }">
|
|
<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>
|
|
</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="16">
|
|
<el-form-item label="父件 (成品)" prop="parent_id">
|
|
<el-select
|
|
v-model="form.parent_id"
|
|
placeholder="请搜索并选择父件"
|
|
filterable
|
|
style="width: 100%"
|
|
:disabled="isEditMode"
|
|
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="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-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-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" 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%"
|
|
>
|
|
<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="140">
|
|
<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="150">
|
|
<template #default="{ row }">
|
|
<el-input v-model="row.remark" placeholder="备注" />
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column label="操作" width="60" 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
|
|
is_enabled: boolean
|
|
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)
|
|
const isEditMode = ref(false)
|
|
|
|
const bomList = ref<BomItem[]>([])
|
|
const materialOptions = ref<MaterialBase[]>([])
|
|
const searchKeyword = ref('')
|
|
|
|
const formRef = ref<FormInstance>()
|
|
const form = reactive({
|
|
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>({
|
|
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
|
|
} 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) {}
|
|
}
|
|
|
|
// 监听父件变化，自动设置前缀
|
|
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'
|
|
isEditMode.value = false
|
|
dialogVisible.value = true
|
|
}
|
|
|
|
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, version)
|
|
if (res.code === 200) {
|
|
const data = res.data
|
|
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 || ''
|
|
}))
|
|
|
|
// 解析编号到 前缀/后缀
|
|
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 (e) { ElMessage.error('获取详情失败') }
|
|
}
|
|
|
|
const handleDelete = (row: BomItem) => {
|
|
ElMessageBox.confirm(`确定删除 ${row.bom_no} (${row.version}) 吗？`, '警告', { type: 'warning' })
|
|
.then(async () => {
|
|
try {
|
|
const res = await deleteBom(row.bom_no, row.version)
|
|
if (res.code === 200) {
|
|
ElMessage.success('删除成功')
|
|
fetchBomList()
|
|
}
|
|
} catch (e) {}
|
|
})
|
|
.catch(() => {})
|
|
}
|
|
|
|
const resetForm = () => {
|
|
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 = (idx: number) => form.children.splice(idx, 1)
|
|
|
|
const submitForm = async () => {
|
|
if (!formRef.value) return
|
|
await formRef.value.validate(async (valid) => {
|
|
if (!valid) return
|
|
if (!fullBomNo.value) return ElMessage.warning('BOM编号不能为空')
|
|
if (form.children.length === 0) return ElMessage.warning('请至少添加一个子件')
|
|
|
|
const payload = {
|
|
bom_no: fullBomNo.value,
|
|
version: form.version,
|
|
parent_id: form.parent_id,
|
|
is_enabled: form.is_enabled,
|
|
children: form.children
|
|
}
|
|
|
|
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 (e) { 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; width: 100%; }
|
|
.option-name { font-weight: bold; color: #303133; }
|
|
.option-spec { font-size: 12px; color: #909399; margin-left: 15px; }
|
|
</style> |