对于出库选单和Bom库的逻辑完善以及功能美化
This commit is contained in:
@ -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>
|
||||
@ -29,6 +29,7 @@
|
||||
center
|
||||
show-icon
|
||||
style="margin-bottom: 20px"
|
||||
:closable="false"
|
||||
/>
|
||||
|
||||
<el-table
|
||||
@ -49,6 +50,12 @@
|
||||
<el-table-column prop="name" label="名称" min-width="150" show-overflow-tooltip />
|
||||
<el-table-column prop="standard" label="规格型号" min-width="150" show-overflow-tooltip />
|
||||
|
||||
<el-table-column prop="warehouse_location" label="库位" width="150" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<span style="color: #409EFF; font-weight: bold;">{{ row.warehouse_location || '-' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="available_quantity" label="当前库存" width="120" align="right">
|
||||
<template #default="{ row }">
|
||||
<span style="color: green; font-weight: bold;">{{ row.available_quantity }}</span>
|
||||
@ -63,6 +70,8 @@
|
||||
:max="row.available_quantity"
|
||||
size="small"
|
||||
style="width: 100%"
|
||||
controls-position="right"
|
||||
@change="(val) => handleMainQuantityChange(val, row)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@ -74,13 +83,13 @@
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div v-if="selectedItems.length > 0" style="margin-top: 15px; text-align: right; color: #606266;">
|
||||
<div v-if="selectedItems.length > 0" style="margin-top: 15px; text-align: right; color: #606266; font-size: 14px;">
|
||||
共 <span style="color: red; font-weight: bold;">{{ selectedItems.length }}</span> 种物品，
|
||||
合计出库 <span style="color: red; font-weight: bold;">{{ totalExportCount }}</span> 件
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-dialog v-model="manualDialogVisible" title="选择库存物品" width="85%" top="5vh" destroy-on-close>
|
||||
<el-dialog v-model="manualDialogVisible" title="选择库存物品" width="85%" top="5vh" destroy-on-close :close-on-click-modal="false">
|
||||
<div class="filter-container">
|
||||
<el-input
|
||||
v-model="searchKeyword"
|
||||
@ -91,15 +100,18 @@
|
||||
@input="filterStock"
|
||||
/>
|
||||
<span style="margin-left: 15px; color: #909399; font-size: 12px;">
|
||||
提示：勾选物品后，可直接在表格中修改【本次出库】数量
|
||||
提示：点击表格行可勾选；<span style="color: #F56C6C; font-weight: bold;">修改数量会自动勾选</span>
|
||||
</span>
|
||||
</div>
|
||||
<el-table
|
||||
ref="manualTableRef"
|
||||
:data="filteredStockData"
|
||||
height="500"
|
||||
border
|
||||
row-key="uniqueKey"
|
||||
@selection-change="handleStockSelection"
|
||||
@row-click="handleRowClick"
|
||||
style="cursor: pointer"
|
||||
>
|
||||
<el-table-column type="selection" width="55" align="center" :reserve-selection="true" />
|
||||
<el-table-column label="类型" width="90" align="center">
|
||||
@ -109,18 +121,20 @@
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="名称" show-overflow-tooltip />
|
||||
<el-table-column prop="standard" label="规格" show-overflow-tooltip />
|
||||
<el-table-column prop="warehouse_location" label="库位" width="120" show-overflow-tooltip />
|
||||
<el-table-column prop="available_quantity" label="可用库存" width="100" align="right" />
|
||||
|
||||
<el-table-column label="本次出库" width="160" align="center" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-input-number
|
||||
v-model="row.export_quantity"
|
||||
:min="1"
|
||||
:min="0"
|
||||
:max="row.available_quantity"
|
||||
size="small"
|
||||
style="width: 100%"
|
||||
placeholder="数量"
|
||||
placeholder="0"
|
||||
@click.stop
|
||||
@change="(val) => handleManualQuantityChange(val, row)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@ -134,13 +148,13 @@
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog v-model="bomSelectVisible" title="按 BOM 套餐添加" width="600px">
|
||||
<el-dialog v-model="bomSelectVisible" title="按 BOM 套餐添加" width="600px" destroy-on-close :close-on-click-modal="false">
|
||||
<el-form label-width="100px">
|
||||
<el-form-item label="选择产品">
|
||||
<el-select v-model="selectedBomNo" filterable placeholder="请选择产品BOM配方" style="width: 100%">
|
||||
<el-select v-model="selectedBomNo" filterable placeholder="请选择启用状态的 BOM 配方" style="width: 100%">
|
||||
<el-option
|
||||
v-for="b in bomOptions"
|
||||
:key="b.bom_no"
|
||||
:key="`${b.bom_no}_${b.version}`"
|
||||
:label="`${b.parent_name} - ${b.version}`"
|
||||
:value="b.bom_no"
|
||||
/>
|
||||
@ -174,6 +188,7 @@
|
||||
<el-table-column prop="typeLabel" label="类型" width="80" />
|
||||
<el-table-column prop="name" label="名称" />
|
||||
<el-table-column prop="standard" label="规格" />
|
||||
<el-table-column prop="warehouse_location" label="库位" width="100" />
|
||||
<el-table-column prop="export_quantity" label="本次出库" width="120" align="center">
|
||||
<template #default="{ row }">
|
||||
<span style="font-weight: bold; color: #F56C6C; font-size: 16px;">{{ row.export_quantity }}</span>
|
||||
@ -205,7 +220,6 @@
|
||||
<h1>IRIS出库拣货确认单</h1>
|
||||
<div class="print-meta-row">
|
||||
<span>打印时间: {{ currentTime }}</span>
|
||||
<span>单据编号: {{ currentOrderNo }}</span>
|
||||
</div>
|
||||
<div class="header-line"></div>
|
||||
</div>
|
||||
@ -213,11 +227,12 @@
|
||||
<table class="print-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 60px;">序号</th>
|
||||
<th style="width: 50px;">序号</th>
|
||||
<th>物料名称</th>
|
||||
<th>规格型号</th>
|
||||
<th style="width: 60px;">单位</th>
|
||||
<th style="width: 100px;">出库数量</th>
|
||||
<th style="width: 80px;">库位</th>
|
||||
<th style="width: 50px;">单位</th>
|
||||
<th style="width: 90px;">出库数量</th>
|
||||
<th style="width: 60px;">备注</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@ -226,17 +241,18 @@
|
||||
<td style="text-align: center;">{{ index + 1 }}</td>
|
||||
<td class="cell-padding">{{ item.name }}</td>
|
||||
<td class="cell-padding">{{ item.standard }}</td>
|
||||
<td style="text-align: center;">{{ item.warehouse_location || '-' }}</td>
|
||||
<td style="text-align: center;">件</td>
|
||||
<td style="text-align: center; font-weight: bold; font-size: 16px;">{{ item.export_quantity }}</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr v-if="validSelectedItems.length === 0">
|
||||
<td colspan="6" style="text-align: center; padding: 20px;">无数据</td>
|
||||
<td colspan="7" style="text-align: center; padding: 20px;">无数据</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="4" style="text-align: right; font-weight: bold; padding-right: 15px;">合计:</td>
|
||||
<td colspan="5" style="text-align: right; font-weight: bold; padding-right: 15px;">合计:</td>
|
||||
<td style="text-align: center; font-weight: bold; font-size: 18px;">{{ totalExportCount }}</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
@ -264,26 +280,25 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import { Printer, Search, Plus, Download, List } from '@element-plus/icons-vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { ElMessage, ElTable, ElMessageBox } from 'element-plus'
|
||||
import { getAllStock, printSelectionList } from '@/api/inbound/stock'
|
||||
import { getBomList, getBomDetail } from '@/api/bom'
|
||||
|
||||
// --- 状态变量 ---
|
||||
// 核心：购物车数据
|
||||
const selectedItems = ref<any[]>([])
|
||||
|
||||
// 弹窗与加载状态
|
||||
const manualDialogVisible = ref(false)
|
||||
const bomSelectVisible = ref(false)
|
||||
const previewVisible = ref(false)
|
||||
const exportLoading = ref(false)
|
||||
const printLoading = ref(false)
|
||||
|
||||
// 数据缓存
|
||||
const allStockData = ref<any[]>([])
|
||||
const filteredStockData = ref<any[]>([])
|
||||
const searchKeyword = ref('')
|
||||
const tempSelection = ref<any[]>([]) // 手动添加时的临时勾选
|
||||
const tempSelection = ref<any[]>([])
|
||||
|
||||
// 表格引用
|
||||
const manualTableRef = ref<InstanceType<typeof ElTable>>()
|
||||
|
||||
// BOM 相关
|
||||
const bomOptions = ref<any[]>([])
|
||||
@ -292,11 +307,8 @@ const bomSets = ref(1)
|
||||
|
||||
// 打印相关
|
||||
const currentTime = ref('')
|
||||
const currentOrderNo = ref('')
|
||||
|
||||
// --- 计算属性 ---
|
||||
|
||||
// 有效的出库项 (数量 > 0)
|
||||
const validSelectedItems = computed(() => {
|
||||
return selectedItems.value.filter(item => item.export_quantity > 0)
|
||||
})
|
||||
@ -306,7 +318,6 @@ const totalExportCount = computed(() => {
|
||||
})
|
||||
|
||||
// --- 辅助方法 ---
|
||||
|
||||
const getTypeTag = (type: string) => {
|
||||
switch (type) {
|
||||
case 'material': return 'info'
|
||||
@ -316,14 +327,7 @@ const getTypeTag = (type: string) => {
|
||||
}
|
||||
}
|
||||
|
||||
const generateOrderNo = () => {
|
||||
const now = new Date();
|
||||
const dateStr = now.getFullYear() + (now.getMonth()+1).toString().padStart(2,'0') + now.getDate().toString().padStart(2,'0');
|
||||
const random = Math.floor(Math.random()*1000).toString().padStart(3, '0');
|
||||
return 'OUT' + dateStr + '-' + random;
|
||||
}
|
||||
|
||||
// --- 核心逻辑 1：手动添加库存 (支持弹窗内修改数量) ---
|
||||
// --- 核心逻辑 1：手动添加库存 ---
|
||||
|
||||
const openManualSelect = async () => {
|
||||
manualDialogVisible.value = true
|
||||
@ -331,24 +335,21 @@ const openManualSelect = async () => {
|
||||
if (allStockData.value.length === 0) {
|
||||
try {
|
||||
const res: any = await getAllStock()
|
||||
|
||||
// 1. 分类处理并打上标记
|
||||
const rawMaterials = (res.materials || []).map((i: any) => ({ ...i, type: 'material', typeLabel: '采购件' }))
|
||||
const rawSemis = (res.semis || []).map((i: any) => ({ ...i, type: 'semi', typeLabel: '半成品' }))
|
||||
const rawProducts = (res.products || []).map((i: any) => ({ ...i, type: 'product', typeLabel: '成品' }))
|
||||
|
||||
// 2. 合并
|
||||
const list = [...rawMaterials, ...rawSemis, ...rawProducts]
|
||||
|
||||
// 3. 规范化并生成 UniqueKey
|
||||
allStockData.value = list.map((i: any) => ({
|
||||
...i,
|
||||
name: i.name || i.material_name || i.product_name || '未知名称',
|
||||
standard: i.standard || i.spec_model || '',
|
||||
// ★ 确保 Key 唯一，格式：类型_ID
|
||||
// ★ 确保读取库位字段，如果没有则为空
|
||||
warehouse_location: i.warehouse_location || (i.warehouse_loc) || '',
|
||||
uniqueKey: `${i.type}_${i.id}`,
|
||||
available_quantity: parseFloat(i.available_quantity) || 0,
|
||||
export_quantity: 1 // ★ 默认初始化为1，方便用户在弹窗里看到并修改
|
||||
export_quantity: 0
|
||||
}))
|
||||
|
||||
filteredStockData.value = allStockData.value
|
||||
@ -356,9 +357,8 @@ const openManualSelect = async () => {
|
||||
ElMessage.error('加载库存数据失败')
|
||||
}
|
||||
} else {
|
||||
// 每次打开时，重置筛选，并将所有项的“本次出库”重置为1（或保留上次，视需求而定，这里重置为1以防混淆）
|
||||
searchKeyword.value = ''
|
||||
allStockData.value.forEach(item => item.export_quantity = 1)
|
||||
allStockData.value.forEach(item => item.export_quantity = 0)
|
||||
filteredStockData.value = allStockData.value
|
||||
}
|
||||
}
|
||||
@ -375,16 +375,28 @@ const filterStock = () => {
|
||||
)
|
||||
}
|
||||
|
||||
const handleStockSelection = (val: any[]) => {
|
||||
tempSelection.value = val
|
||||
const handleStockSelection = (val: any[]) => { tempSelection.value = val }
|
||||
|
||||
// 点击行任意位置切换勾选
|
||||
const handleRowClick = (row: any) => {
|
||||
if (manualTableRef.value) {
|
||||
manualTableRef.value.toggleRowSelection(row, undefined)
|
||||
}
|
||||
}
|
||||
|
||||
// 弹窗内：当数量变化时，自动联动勾选状态
|
||||
const handleManualQuantityChange = (val: number | undefined, row: any) => {
|
||||
if (!manualTableRef.value) return
|
||||
if (val && val > 0) {
|
||||
manualTableRef.value.toggleRowSelection(row, true)
|
||||
} else {
|
||||
manualTableRef.value.toggleRowSelection(row, false)
|
||||
}
|
||||
}
|
||||
|
||||
const confirmManualAdd = () => {
|
||||
if (tempSelection.value.length === 0) {
|
||||
return ElMessage.warning('请先勾选需要添加的物品')
|
||||
}
|
||||
if (tempSelection.value.length === 0) return ElMessage.warning('请先勾选需要添加的物品')
|
||||
|
||||
// 1. 过滤已存在的 (避免重复)
|
||||
const newItems = tempSelection.value.filter(item =>
|
||||
!selectedItems.value.find(existing => existing.uniqueKey === item.uniqueKey)
|
||||
)
|
||||
@ -394,29 +406,50 @@ const confirmManualAdd = () => {
|
||||
return ElMessage.warning('选中的物品已全部在清单中')
|
||||
}
|
||||
|
||||
// 2. 深拷贝加入购物车 (防止引用关联)
|
||||
const itemsToAdd = newItems.map(item => {
|
||||
const copy = JSON.parse(JSON.stringify(item))
|
||||
// ★ 关键修改：直接使用用户在弹窗里输入的 export_quantity
|
||||
// 如果用户把输入框清空了(undefined)，则默认为1
|
||||
copy.export_quantity = (item.export_quantity && item.export_quantity > 0) ? item.export_quantity : 1
|
||||
copy.export_quantity = item.export_quantity || 0
|
||||
return copy
|
||||
})
|
||||
|
||||
selectedItems.value.push(...itemsToAdd)
|
||||
manualDialogVisible.value = false
|
||||
tempSelection.value = [] // 清空临时勾选
|
||||
tempSelection.value = []
|
||||
ElMessage.success(`成功添加 ${itemsToAdd.length} 项物品`)
|
||||
}
|
||||
|
||||
// 主界面数量变更逻辑 (降为0时弹窗移除)
|
||||
const handleMainQuantityChange = (val: number | undefined, row: any) => {
|
||||
if (val === 0) {
|
||||
ElMessageBox.confirm(
|
||||
`物品【${row.name}】数量为0，确定要从清单中移除吗？`,
|
||||
'移除确认',
|
||||
{
|
||||
confirmButtonText: '移除',
|
||||
cancelButtonText: '保留 (恢复为1)',
|
||||
type: 'warning',
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
const index = selectedItems.value.findIndex(item => item.uniqueKey === row.uniqueKey)
|
||||
if (index > -1) {
|
||||
selectedItems.value.splice(index, 1)
|
||||
ElMessage.success('已移除')
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
row.export_quantity = 1
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// --- 核心逻辑 2：按 BOM 添加 ---
|
||||
|
||||
const openBomSelect = async () => {
|
||||
bomSelectVisible.value = true
|
||||
// 每次打开 BOM 弹窗重置套数为 1
|
||||
bomSets.value = 1
|
||||
try {
|
||||
const res = await getBomList()
|
||||
const res = await getBomList({ active_only: true })
|
||||
bomOptions.value = res.data || []
|
||||
} catch (e) {
|
||||
ElMessage.error('加载 BOM 列表失败')
|
||||
@ -426,24 +459,19 @@ const openBomSelect = async () => {
|
||||
const confirmBomAdd = async () => {
|
||||
if(!selectedBomNo.value) return ElMessage.warning('请选择 BOM');
|
||||
|
||||
// 确保库存数据已加载，用于匹配
|
||||
if (allStockData.value.length === 0) {
|
||||
await openManualSelect()
|
||||
manualDialogVisible.value = false // 仅加载数据，不显示弹窗
|
||||
manualDialogVisible.value = false
|
||||
}
|
||||
|
||||
try {
|
||||
const detailRes = await getBomDetail(selectedBomNo.value)
|
||||
const bomRows = detailRes.data || []
|
||||
const bomRows = detailRes.data?.children || []
|
||||
|
||||
let addedCount = 0;
|
||||
|
||||
// 遍历 BOM 子件
|
||||
bomRows.forEach((bomItem: any) => {
|
||||
// ★ 这里本身就是“选择数量”的逻辑：用量 * 套数
|
||||
const needQty = (parseFloat(bomItem.dosage) || 0) * bomSets.value
|
||||
|
||||
// 简单匹配逻辑：匹配 base_id (最准确)
|
||||
// ★ BOM 添加时，匹配本地库存数据，带入库位信息
|
||||
const stockCandidate = allStockData.value.find(s =>
|
||||
(s.base_id && s.base_id == bomItem.child_id)
|
||||
)
|
||||
@ -451,10 +479,13 @@ const confirmBomAdd = async () => {
|
||||
if (stockCandidate) {
|
||||
const existing = selectedItems.value.find(e => e.uniqueKey === stockCandidate.uniqueKey)
|
||||
if (existing) {
|
||||
// 如果已存在，累加数量
|
||||
existing.export_quantity += needQty
|
||||
} else {
|
||||
const newItem = JSON.parse(JSON.stringify(stockCandidate))
|
||||
// 如果后端 BomService 也返回了 warehouse_location (聚合的)，这里优先使用
|
||||
if (bomItem.warehouse_location) {
|
||||
newItem.warehouse_location = bomItem.warehouse_location
|
||||
}
|
||||
newItem.export_quantity = needQty
|
||||
selectedItems.value.push(newItem)
|
||||
}
|
||||
@ -486,19 +517,16 @@ const handlePreview = () => {
|
||||
}
|
||||
const now = new Date();
|
||||
currentTime.value = `${now.getFullYear()}-${now.getMonth()+1}-${now.getDate()} ${now.getHours()}:${now.getMinutes()}`;
|
||||
currentOrderNo.value = generateOrderNo();
|
||||
previewVisible.value = true
|
||||
}
|
||||
|
||||
const confirmPrint = async () => {
|
||||
previewVisible.value = false;
|
||||
|
||||
// 记录日志
|
||||
try {
|
||||
const payload = validSelectedItems.value.map(item => ({
|
||||
name: item.name, standard: item.standard, quantity: item.export_quantity
|
||||
}));
|
||||
// 不阻塞打印
|
||||
printSelectionList(JSON.parse(JSON.stringify(payload))).catch(() => {});
|
||||
} catch (e) {}
|
||||
|
||||
@ -512,19 +540,18 @@ const confirmExport = () => {
|
||||
exportLoading.value = true;
|
||||
try {
|
||||
let csvContent = "\uFEFF";
|
||||
csvContent += "类型,名称,规格型号,本次出库数量\n";
|
||||
|
||||
csvContent += "类型,名称,规格型号,库位,本次出库数量\n";
|
||||
validSelectedItems.value.forEach(item => {
|
||||
const safeName = (item.name || '').replace(/,/g, ' ');
|
||||
const safeStd = (item.standard || '').replace(/,/g, ' ');
|
||||
csvContent += `${item.typeLabel},${safeName},${safeStd},${item.export_quantity}\n`;
|
||||
const safeLoc = (item.warehouse_location || '').replace(/,/g, ' ');
|
||||
csvContent += `${item.typeLabel},${safeName},${safeStd},${safeLoc},${item.export_quantity}\n`;
|
||||
});
|
||||
|
||||
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
|
||||
const link = document.createElement("a");
|
||||
link.href = URL.createObjectURL(blob);
|
||||
const timestamp = new Date().toISOString().slice(0,19).replace(/[-T:]/g, "");
|
||||
link.download = `出库单_${timestamp}.csv`;
|
||||
link.download = `出库拣货单_${timestamp}.csv`;
|
||||
link.click();
|
||||
ElMessage.success('导出成功');
|
||||
previewVisible.value = false;
|
||||
@ -547,69 +574,27 @@ const confirmExport = () => {
|
||||
::v-deep(.el-card__body) { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
|
||||
|
||||
/* ================= ★★★ 打印专用样式 ★★★ ================= */
|
||||
|
||||
/* 1. 默认状态：屏幕上隐藏打印区域 */
|
||||
#print-area { display: none; }
|
||||
|
||||
/* 2. 打印状态：隐藏所有非打印内容，独显 #print-area */
|
||||
@media print {
|
||||
@page { margin: 0; size: auto; }
|
||||
|
||||
body * { visibility: hidden; }
|
||||
.el-dialog__wrapper, .v-modal, .el-message, .no-print-content { display: none !important; }
|
||||
|
||||
#print-area, #print-area * { visibility: visible; }
|
||||
|
||||
#print-area {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 20mm;
|
||||
background-color: white;
|
||||
display: block !important;
|
||||
z-index: 99999;
|
||||
position: fixed; left: 0; top: 0; width: 100%; height: 100%;
|
||||
margin: 0; padding: 20mm; background-color: white;
|
||||
display: block !important; z-index: 99999;
|
||||
}
|
||||
|
||||
.print-header { text-align: center; margin-bottom: 20px; }
|
||||
.print-header h1 { font-size: 24px; margin: 0 0 10px 0; font-weight: bold; color: #000; }
|
||||
.print-meta-row { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 5px; }
|
||||
.print-meta-row { display: flex; justify-content: flex-start; font-size: 12px; margin-bottom: 5px; }
|
||||
.header-line { border-bottom: 2px solid #000; margin-top: 5px; }
|
||||
|
||||
.print-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 40px;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
.print-table th, .print-table td {
|
||||
border: 1px solid #000;
|
||||
padding: 12px 8px;
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.print-table { width: 100%; border-collapse: collapse; margin-bottom: 40px; border: 1px solid #000; }
|
||||
.print-table th, .print-table td { border: 1px solid #000; padding: 12px 8px; text-align: left; font-size: 14px; color: #000; }
|
||||
.print-table th { text-align: center; font-weight: bold; }
|
||||
.cell-padding { padding-left: 10px; }
|
||||
|
||||
.print-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 60px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.signature-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.print-footer { display: flex; justify-content: space-between; margin-top: 60px; padding: 0 20px; }
|
||||
.signature-item { display: flex; flex-direction: column; align-items: center; width: 30%; }
|
||||
.sig-label { font-size: 14px; margin-bottom: 40px; text-align: left; width: 100%; }
|
||||
.sig-line { border-bottom: 1px solid #000; width: 100%; height: 1px; display: block; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user