feat: add BOM management page
Co-authored-by: aider (openai/DeepSeek-V3.2-Thinking) <aider@aider.chat>
This commit is contained in:
@ -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>
|
||||
|
||||
Reference in New Issue
Block a user