963 lines
31 KiB
Vue
963 lines
31 KiB
Vue
<template>
|
||
<div class="bom-form-page">
|
||
<!-- 表头卡片 -->
|
||
<el-card class="header-card" shadow="never">
|
||
<div class="header-bar">
|
||
<h3 class="title">EBOM清单</h3>
|
||
<div class="actions">
|
||
<el-button type="primary" @click="handleSave" :disabled="isReadonly" :loading="saveLoading">保存</el-button>
|
||
<el-button @click="handleCancel">取消</el-button>
|
||
<el-button
|
||
type="success"
|
||
@click="handleApprove"
|
||
:disabled="isReadonly || form.status === 'APPROVED'"
|
||
>审核</el-button>
|
||
<el-button
|
||
type="warning"
|
||
@click="handleUnApprove"
|
||
:disabled="form.status !== 'APPROVED'"
|
||
>反审核</el-button>
|
||
<el-button type="primary" link @click="collapsed = !collapsed">
|
||
{{ collapsed ? '展开' : '收起' }}
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 表头表单 -->
|
||
<el-form
|
||
v-show="!collapsed"
|
||
ref="formRef"
|
||
:model="form"
|
||
:rules="formRules"
|
||
label-width="80px"
|
||
class="grid-form"
|
||
>
|
||
<!-- 第1行 -->
|
||
<el-row :gutter="24">
|
||
<el-col :span="6">
|
||
<el-form-item label="单据编码" prop="bomCode">
|
||
<el-input v-model="form.bomCode" disabled placeholder="自动生成" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="业务类型" prop="businessType">
|
||
<el-select v-model="form.businessType" :disabled="isReadonly" style="width: 100%">
|
||
<el-option v-for="opt in BIZ_TYPE_OPTIONS" :key="opt.value" :label="opt.label" :value="opt.value" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="物料编码" prop="itemCode">
|
||
<div class="inline-select">
|
||
<el-input v-model="form.itemCode" disabled />
|
||
<el-button link type="primary" :disabled="isReadonly" @click="openProductDialog">选择</el-button>
|
||
</div>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="图纸号">
|
||
<el-input v-model="form.drawingNo" :disabled="isReadonly" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<!-- 第2行 -->
|
||
<el-row :gutter="24">
|
||
<el-col :span="6">
|
||
<el-form-item label="单据日期" prop="bomDate">
|
||
<el-date-picker
|
||
v-model="form.bomDate"
|
||
type="date"
|
||
value-format="YYYY-MM-DD"
|
||
:disabled="isReadonly"
|
||
style="width: 100%"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="操作员">
|
||
<el-input v-model="form.operatorName" disabled />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="物料名称">
|
||
<el-input v-model="form.itemName" disabled />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="版本号" prop="version">
|
||
<el-input-number
|
||
v-model="versionNumber"
|
||
:min="1"
|
||
:step="0.1"
|
||
:precision="1"
|
||
:disabled="isReadonly"
|
||
controls-position="right"
|
||
style="width: 100%"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<!-- 第3行 -->
|
||
<el-row :gutter="24">
|
||
<el-col :span="6">
|
||
<el-form-item label="单据状态">
|
||
<el-tag :type="form.status === 'APPROVED' ? 'success' : form.status === 'REJECTED' ? 'warning' : 'info'">
|
||
{{ STATUS_MAP[form.status]?.label || '开立' }}
|
||
</el-tag>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="审核员">
|
||
<el-input v-model="form.approverName" disabled />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="计量单位">
|
||
<el-input v-model="form.unitName" disabled />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="版本说明">
|
||
<el-input v-model="form.versionDesc" :disabled="isReadonly" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<!-- 第4行 -->
|
||
<el-row :gutter="24">
|
||
<el-col :span="6">
|
||
<el-form-item label="业务状态">
|
||
<el-select v-model="form.businessStatus" :disabled="isReadonly" style="width: 100%">
|
||
<el-option v-for="opt in BIZ_STATUS_OPTIONS" :key="opt.value" :label="opt.label" :value="opt.value" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="审核日期">
|
||
<el-date-picker v-model="form.approveDate" type="date" value-format="YYYY-MM-DD" disabled style="width: 100%" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="母件基数" prop="baseQty">
|
||
<el-input-number v-model="form.baseQty" :min="1" :step="1" :disabled="isReadonly" style="width: 100%" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="备注信息">
|
||
<el-input v-model="form.remark" type="textarea" :rows="1" :disabled="isReadonly" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
</el-card>
|
||
|
||
<!-- 物料明细卡片 -->
|
||
<el-card class="lines-card" shadow="never">
|
||
<div class="lines-header">
|
||
<span class="lines-title">物料信息</span>
|
||
<div class="lines-actions">
|
||
<el-button type="primary" plain :icon="Plus" :disabled="isReadonly" @click="addEmptyLine">新增物料</el-button>
|
||
</div>
|
||
</div>
|
||
|
||
<el-table :data="lines" border size="small" max-height="420">
|
||
<el-table-column label="序号" type="index" width="60" align="center" />
|
||
<el-table-column label="物料编码" min-width="160">
|
||
<template #default="{ row, $index }">
|
||
<div class="inline-select">
|
||
<span class="mono">{{ row.bomItemCode || '请添加物料' }}</span>
|
||
<el-button link type="primary" :disabled="isReadonly" @click="openItemDialog($index)">选择</el-button>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="bomItemName" label="物料名称" min-width="160" show-overflow-tooltip />
|
||
<el-table-column prop="bomItemSpec" label="型号规格" min-width="130" show-overflow-tooltip />
|
||
<el-table-column prop="unitName" label="主计量" width="80" align="center" />
|
||
<el-table-column label="计划线路" width="110" align="center">
|
||
<template #default="{ row }">
|
||
<el-select v-model="row.supplyType" :disabled="isReadonly" size="small" style="width: 100%">
|
||
<el-option v-for="opt in SUPPLY_TYPE_OPTIONS" :key="opt.value" :label="opt.label" :value="opt.value" />
|
||
</el-select>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="领料方式" width="110" align="center">
|
||
<template #default="{ row }">
|
||
<el-select v-model="row.pickType" :disabled="isReadonly" size="small" style="width: 100%">
|
||
<el-option v-for="opt in PICK_TYPE_OPTIONS" :key="opt.value" :label="opt.label" :value="opt.value" />
|
||
</el-select>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="分子" width="100" align="right">
|
||
<template #default="{ row }">
|
||
<el-input-number
|
||
v-model="row.quantity"
|
||
:min="0"
|
||
:precision="4"
|
||
:disabled="isReadonly"
|
||
size="small"
|
||
controls-position="right"
|
||
style="width: 100%"
|
||
/>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="用量方式" width="110" align="center">
|
||
<template #default="{ row }">
|
||
<el-select v-model="row.usageType" :disabled="isReadonly" size="small" style="width: 100%">
|
||
<el-option v-for="opt in USAGE_TYPE_OPTIONS" :key="opt.value" :label="opt.label" :value="opt.value" />
|
||
</el-select>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="图纸号" width="110">
|
||
<template #default="{ row }">
|
||
<el-input v-model="row.drawingNo" :disabled="isReadonly" size="small" />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="备注" min-width="110">
|
||
<template #default="{ row }">
|
||
<el-input v-model="row.remark" :disabled="isReadonly" size="small" />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" width="70" align="center" fixed="right">
|
||
<template #default="{ $index }">
|
||
<el-button link type="danger" :disabled="isReadonly" @click="removeLine($index)">删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-card>
|
||
|
||
<!-- ==================== 选择产品(母件)弹窗 ==================== -->
|
||
<el-dialog v-model="productDialogVisible" title="选择物料" width="900px" destroy-on-close>
|
||
<div class="item-select-layout">
|
||
<!-- 左侧分类树 -->
|
||
<div class="item-select-tree">
|
||
<el-input v-model="treeFilterText" placeholder="请输入分类名称" clearable style="margin-bottom: 8px" />
|
||
<el-tree
|
||
ref="treeRef"
|
||
:data="itemTypeTreeData"
|
||
:props="{ label: 'label', children: 'children' }"
|
||
:filter-node-method="filterNode"
|
||
highlight-current
|
||
default-expand-all
|
||
@node-click="handleTreeNodeClick"
|
||
/>
|
||
</div>
|
||
<!-- 右侧列表 -->
|
||
<div class="item-select-table">
|
||
<el-form :inline="true" @submit.prevent="searchProductItems" style="margin-bottom: 8px">
|
||
<el-form-item label="物料编码">
|
||
<el-input v-model="productQuery.itemCode" placeholder="请输入" clearable style="width: 120px" />
|
||
</el-form-item>
|
||
<el-form-item label="物料名称">
|
||
<el-input v-model="productQuery.itemName" placeholder="请输入" clearable style="width: 120px" />
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" @click="searchProductItems">搜索</el-button>
|
||
<el-button @click="resetProductSearch">重置</el-button>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button @click="queryAllProducts">查询所有</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
<el-table :data="productList" border size="small" max-height="380" v-loading="productLoading">
|
||
<el-table-column prop="itemCode" label="物料编码" width="130" />
|
||
<el-table-column prop="itemName" label="物料名称" min-width="160" show-overflow-tooltip />
|
||
<el-table-column prop="specification" label="型号规格" width="130" show-overflow-tooltip />
|
||
<el-table-column prop="unitName" label="主计量" width="70" align="center" />
|
||
<el-table-column label="供应方式" width="80" align="center">
|
||
<template #default="{ row }">
|
||
{{ getSupplyLabel(row.itemOrProduct) }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" width="70" align="center">
|
||
<template #default="{ row }">
|
||
<el-button type="primary" link @click="confirmProduct(row)">选择</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<div class="pagination-wrapper" style="margin-top: 8px">
|
||
<el-pagination
|
||
v-model:current-page="productQuery.pageNum"
|
||
v-model:page-size="productQuery.pageSize"
|
||
:page-sizes="[50, 100]"
|
||
:total="productTotal"
|
||
layout="total, sizes, prev, pager, next"
|
||
small
|
||
@size-change="searchProductItems"
|
||
@current-change="searchProductItems"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
<!-- ==================== 选择子件物料弹窗 ==================== -->
|
||
<el-dialog v-model="itemDialogVisible" title="选择物料" width="900px" destroy-on-close>
|
||
<div class="item-select-layout">
|
||
<div class="item-select-tree">
|
||
<el-input v-model="itemTreeFilterText" placeholder="请输入分类名称" clearable style="margin-bottom: 8px" />
|
||
<el-tree
|
||
ref="itemTreeRef"
|
||
:data="itemTypeTreeData"
|
||
:props="{ label: 'label', children: 'children' }"
|
||
:filter-node-method="filterNode"
|
||
highlight-current
|
||
default-expand-all
|
||
@node-click="handleItemTreeClick"
|
||
/>
|
||
</div>
|
||
<div class="item-select-table">
|
||
<el-form :inline="true" @submit.prevent="searchSubItems" style="margin-bottom: 8px">
|
||
<el-form-item label="物料编码">
|
||
<el-input v-model="itemQuery.itemCode" placeholder="请输入" clearable style="width: 120px" />
|
||
</el-form-item>
|
||
<el-form-item label="物料名称">
|
||
<el-input v-model="itemQuery.itemName" placeholder="请输入" clearable style="width: 120px" />
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" @click="searchSubItems">搜索</el-button>
|
||
<el-button @click="resetItemSearch">重置</el-button>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button @click="queryAllItems">查询所有</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
<el-table :data="itemList" border size="small" max-height="380" v-loading="itemLoading">
|
||
<el-table-column prop="itemCode" label="物料编码" width="130" />
|
||
<el-table-column prop="itemName" label="物料名称" min-width="160" show-overflow-tooltip />
|
||
<el-table-column prop="specification" label="型号规格" width="130" show-overflow-tooltip />
|
||
<el-table-column prop="unitName" label="主计量" width="70" align="center" />
|
||
<el-table-column label="供应方式" width="80" align="center">
|
||
<template #default="{ row }">
|
||
{{ getSupplyLabel(row.itemOrProduct) }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" width="70" align="center">
|
||
<template #default="{ row }">
|
||
<el-button type="primary" link @click="confirmItem(row)">选择</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<div class="pagination-wrapper" style="margin-top: 8px">
|
||
<el-pagination
|
||
v-model:current-page="itemQuery.pageNum"
|
||
v-model:page-size="itemQuery.pageSize"
|
||
:page-sizes="[50, 100]"
|
||
:total="itemTotal"
|
||
layout="total, sizes, prev, pager, next"
|
||
small
|
||
@size-change="searchSubItems"
|
||
@current-change="searchSubItems"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { computed, onMounted, reactive, ref, watch } from 'vue'
|
||
import { useRoute, useRouter } from 'vue-router'
|
||
import { ElMessage, ElMessageBox, type FormRules } from 'element-plus'
|
||
import { Plus } from '@element-plus/icons-vue'
|
||
import {
|
||
getEbom,
|
||
addEbom,
|
||
updateEbom,
|
||
approveEbom,
|
||
unapproveEbom,
|
||
listEbomLines,
|
||
addEbomLine,
|
||
updateEbomLine,
|
||
STATUS_MAP,
|
||
BIZ_TYPE_OPTIONS,
|
||
BIZ_STATUS_OPTIONS,
|
||
PICK_TYPE_OPTIONS,
|
||
USAGE_TYPE_OPTIONS,
|
||
SUPPLY_TYPE_OPTIONS,
|
||
type EbomHeader,
|
||
type EbomLine
|
||
} from '@/api/rd/ebom'
|
||
import { listMdItem, type MdItem } from '@/api/masterdata/item'
|
||
import { listItemType, handleTree, type ItemType } from '@/api/masterdata/itemtype'
|
||
|
||
const route = useRoute()
|
||
const router = useRouter()
|
||
|
||
// ============ 页面模式 ============
|
||
|
||
const bomId = computed(() => {
|
||
const raw = route.params.id
|
||
if (!raw) return undefined
|
||
const n = Number(raw)
|
||
return Number.isFinite(n) ? n : undefined
|
||
})
|
||
|
||
const mode = computed<'new' | 'edit' | 'view'>(() => {
|
||
if (route.name === 'EbomNew') return 'new'
|
||
if (route.name === 'EbomEdit') return 'edit'
|
||
return 'view'
|
||
})
|
||
|
||
const isReadonly = computed(() => mode.value === 'view' || form.status === 'APPROVED')
|
||
|
||
// ============ 表单数据 ============
|
||
|
||
const collapsed = ref(false)
|
||
const saveLoading = ref(false)
|
||
|
||
const form = reactive<any>({
|
||
bomId: undefined,
|
||
bomCode: '',
|
||
bomName: '',
|
||
bomDate: new Date().toISOString().slice(0, 10),
|
||
version: '1.0',
|
||
versionDesc: '',
|
||
status: 'DRAFT',
|
||
businessType: 'MECHANICAL',
|
||
businessStatus: 'NORMAL',
|
||
drawingNo: '',
|
||
itemId: undefined,
|
||
itemCode: '',
|
||
itemName: '',
|
||
itemSpec: '',
|
||
unitName: '',
|
||
baseQty: 1,
|
||
operatorName: 'admin',
|
||
approverName: '',
|
||
approveDate: '',
|
||
remark: ''
|
||
})
|
||
|
||
const formRules: FormRules = {
|
||
bomDate: [{ required: true, message: '请选择单据日期', trigger: 'blur' }],
|
||
businessType: [{ required: true, message: '请选择业务类型', trigger: 'change' }],
|
||
itemCode: [{ required: true, message: '请选择产品物料', trigger: 'blur' }],
|
||
baseQty: [{ required: true, message: '请输入母件基数', trigger: 'blur' }]
|
||
}
|
||
|
||
const versionNumber = computed({
|
||
get() {
|
||
const n = parseFloat(form.version || '1.0')
|
||
return Number.isFinite(n) ? n : 1.0
|
||
},
|
||
set(v: number) {
|
||
form.version = v.toFixed(1)
|
||
}
|
||
})
|
||
|
||
const lines = ref<any[]>([])
|
||
|
||
// ============ 物料明细操作 ============
|
||
|
||
function addEmptyLine() {
|
||
lines.value.push({
|
||
lineId: undefined,
|
||
bomItemId: undefined,
|
||
bomItemCode: '',
|
||
bomItemName: '',
|
||
bomItemSpec: '',
|
||
unitOfMeasure: '',
|
||
unitName: '',
|
||
itemOrProduct: 'ITEM',
|
||
quantity: 1,
|
||
supplyType: 'PURCHASE',
|
||
pickType: 'ORDER',
|
||
usageType: 'RATIO',
|
||
drawingNo: '',
|
||
remark: '',
|
||
_isNew: true
|
||
})
|
||
}
|
||
|
||
function removeLine(idx: number) {
|
||
lines.value.splice(idx, 1)
|
||
}
|
||
|
||
// ============ 数据加载 ============
|
||
|
||
async function loadData() {
|
||
if (!bomId.value) {
|
||
lines.value = []
|
||
addEmptyLine()
|
||
addEmptyLine()
|
||
return
|
||
}
|
||
try {
|
||
const header = (await getEbom(bomId.value)).data
|
||
Object.assign(form, {
|
||
...header,
|
||
bomDate: header.bomDate || header.createTime?.slice(0, 10) || '',
|
||
operatorName: header.operatorName || header.createBy || 'admin',
|
||
businessType: header.businessType || 'MECHANICAL',
|
||
businessStatus: header.businessStatus || 'NORMAL'
|
||
})
|
||
|
||
const linesRes = await listEbomLines({ bomCode: header.bomCode, pageNum: 1, pageSize: 500 })
|
||
lines.value = (linesRes.rows || []).map(row => ({
|
||
...row,
|
||
pickType: row.pickType || row.attr1 || 'ORDER',
|
||
usageType: row.usageType || row.attr2 || 'RATIO',
|
||
drawingNo: row.drawingNo || ''
|
||
}))
|
||
if (lines.value.length === 0) addEmptyLine()
|
||
} catch (e) {
|
||
console.error(e)
|
||
ElMessage.error('加载BOM数据失败')
|
||
}
|
||
}
|
||
|
||
// ============ 保存 ============
|
||
|
||
/** 校验子件无重复物料（同一BOM下子物料编码/ID不能重复） */
|
||
function validateNoDuplicateSubItems(): boolean {
|
||
const withItem = lines.value.filter((row) => row.bomItemId != null || (row.bomItemCode && String(row.bomItemCode).trim()))
|
||
const byCode = new Map<string, number>()
|
||
const byId = new Map<number, number>()
|
||
for (let i = 0; i < withItem.length; i++) {
|
||
const row = withItem[i]
|
||
const code = (row.bomItemCode && String(row.bomItemCode).trim()) || ''
|
||
const id = row.bomItemId
|
||
if (code && byCode.has(code)) {
|
||
ElMessage.warning(`存在重复的子物料编码：${code}，请删除重复行后再保存`)
|
||
return false
|
||
}
|
||
if (id != null && byId.has(id)) {
|
||
ElMessage.warning(`存在重复的子物料：${row.bomItemCode || id}，请删除重复行后再保存`)
|
||
return false
|
||
}
|
||
if (code) byCode.set(code, i)
|
||
if (id != null) byId.set(id, i)
|
||
}
|
||
return true
|
||
}
|
||
|
||
async function handleSave() {
|
||
if (!form.itemId) {
|
||
ElMessage.warning('请先选择产品物料')
|
||
return
|
||
}
|
||
if (!validateNoDuplicateSubItems()) {
|
||
return
|
||
}
|
||
saveLoading.value = true
|
||
try {
|
||
const headerPayload: Partial<EbomHeader> = {
|
||
bomId: form.bomId,
|
||
bomCode: form.bomCode,
|
||
bomName: form.bomName || `${form.itemName} BOM`,
|
||
bomDate: form.bomDate,
|
||
version: form.version,
|
||
versionDesc: form.versionDesc,
|
||
status: form.status,
|
||
businessType: form.businessType,
|
||
businessStatus: form.businessStatus,
|
||
drawingNo: form.drawingNo,
|
||
itemId: form.itemId,
|
||
itemCode: form.itemCode,
|
||
itemName: form.itemName,
|
||
itemSpec: form.itemSpec,
|
||
unitName: form.unitName,
|
||
baseQty: form.baseQty,
|
||
remark: form.remark
|
||
}
|
||
|
||
const saved = headerPayload.bomId
|
||
? (await updateEbom(headerPayload)).data
|
||
: (await addEbom(headerPayload)).data
|
||
Object.assign(form, saved)
|
||
|
||
// 保存明细行
|
||
for (const row of lines.value) {
|
||
if (!row.bomItemId) continue
|
||
const linePayload: Partial<EbomLine> = {
|
||
lineId: row.lineId || row.bomId, // 兼容旧字段
|
||
bomId: form.bomId,
|
||
bomCode: form.bomCode,
|
||
bomItemId: row.bomItemId,
|
||
bomItemCode: row.bomItemCode,
|
||
bomItemName: row.bomItemName,
|
||
bomItemSpec: row.bomItemSpec,
|
||
unitOfMeasure: row.unitOfMeasure || row.unitName || '',
|
||
unitName: row.unitName,
|
||
itemOrProduct: row.itemOrProduct || 'ITEM',
|
||
quantity: row.quantity,
|
||
supplyType: row.supplyType,
|
||
lossRate: row.lossRate,
|
||
remark: row.remark
|
||
}
|
||
if (row._isNew || !row.lineId) {
|
||
const savedLine = (await addEbomLine({
|
||
...linePayload,
|
||
lineId: undefined,
|
||
// 兼容旧 API 所需字段
|
||
itemId: form.itemId,
|
||
itemCode: form.itemCode,
|
||
itemName: form.itemName,
|
||
bomName: form.bomName,
|
||
version: form.version,
|
||
versionDesc: form.versionDesc,
|
||
status: form.status,
|
||
enableFlag: 'Y',
|
||
attr1: row.pickType,
|
||
attr2: row.usageType
|
||
} as any)).data
|
||
row.lineId = savedLine?.lineId || savedLine?.bomId
|
||
row._isNew = false
|
||
} else {
|
||
await updateEbomLine({
|
||
...linePayload,
|
||
itemId: form.itemId,
|
||
itemCode: form.itemCode,
|
||
itemName: form.itemName,
|
||
bomName: form.bomName,
|
||
version: form.version,
|
||
status: form.status,
|
||
enableFlag: 'Y',
|
||
attr1: row.pickType,
|
||
attr2: row.usageType
|
||
} as any)
|
||
}
|
||
}
|
||
|
||
ElMessage.success('保存成功')
|
||
if (mode.value === 'new' && form.bomId) {
|
||
router.replace({ name: 'EbomEdit', params: { id: form.bomId } })
|
||
}
|
||
} catch (e) {
|
||
console.error(e)
|
||
ElMessage.error('保存失败')
|
||
} finally {
|
||
saveLoading.value = false
|
||
}
|
||
}
|
||
|
||
// ============ 审核/反审核 ============
|
||
|
||
async function handleApprove() {
|
||
try {
|
||
await ElMessageBox.confirm('确认审核此BOM单据？', '提示', { type: 'warning' })
|
||
if (form.bomId) {
|
||
await approveEbom(form.bomId)
|
||
}
|
||
form.status = 'APPROVED'
|
||
form.approveDate = new Date().toISOString().slice(0, 10)
|
||
ElMessage.success('审核成功')
|
||
} catch (error: any) {
|
||
if (error !== 'cancel') ElMessage.error('审核失败')
|
||
}
|
||
}
|
||
|
||
async function handleUnApprove() {
|
||
try {
|
||
await ElMessageBox.confirm('确认反审核此BOM单据？', '提示', { type: 'warning' })
|
||
if (form.bomId) {
|
||
await unapproveEbom(form.bomId)
|
||
}
|
||
form.status = 'DRAFT'
|
||
form.approveDate = ''
|
||
form.approverName = ''
|
||
ElMessage.success('反审核成功')
|
||
} catch (error: any) {
|
||
if (error !== 'cancel') ElMessage.error('反审核失败')
|
||
}
|
||
}
|
||
|
||
function handleCancel() {
|
||
router.push({ name: 'EbomList' })
|
||
}
|
||
|
||
// ============ 物料分类树 ============
|
||
|
||
const itemTypeTreeData = ref<any[]>([])
|
||
const treeFilterText = ref('')
|
||
const itemTreeFilterText = ref('')
|
||
const treeRef = ref()
|
||
const itemTreeRef = ref()
|
||
|
||
function filterNode(value: string, data: any) {
|
||
if (!value) return true
|
||
return data.label?.includes(value)
|
||
}
|
||
|
||
watch(treeFilterText, (val) => {
|
||
treeRef.value?.filter(val)
|
||
})
|
||
|
||
watch(itemTreeFilterText, (val) => {
|
||
itemTreeRef.value?.filter(val)
|
||
})
|
||
|
||
async function loadItemTypeTree() {
|
||
try {
|
||
const res = await listItemType({ enableFlag: 'Y' })
|
||
const list = (res as any).data || res || []
|
||
itemTypeTreeData.value = Array.isArray(list) ? handleTree(list).map(toTreeNode) : []
|
||
} catch {
|
||
itemTypeTreeData.value = []
|
||
}
|
||
}
|
||
|
||
function toTreeNode(item: ItemType): any {
|
||
return {
|
||
id: item.itemTypeId,
|
||
label: `${item.itemTypeCode || ''}-${item.itemTypeName || ''}`.replace(/^-/, ''),
|
||
children: item.children?.map(toTreeNode) || []
|
||
}
|
||
}
|
||
|
||
function getSupplyLabel(value?: string): string {
|
||
const map: Record<string, string> = {
|
||
PRODUCT: '生产', ITEM: '采购', PRODUCE: '生产',
|
||
PURCHASE: '采购', OUTSOURCE: '委外', ASSEMBLY: '装配', PROCESS: '加工'
|
||
}
|
||
return map[value || ''] || value || '-'
|
||
}
|
||
|
||
// ============ 选择产品(母件)弹窗 ============
|
||
|
||
const productDialogVisible = ref(false)
|
||
const productLoading = ref(false)
|
||
const productList = ref<MdItem[]>([])
|
||
const productTotal = ref(0)
|
||
const productQuery = reactive({ itemCode: '', itemName: '', itemTypeId: undefined as number | undefined, pageNum: 1, pageSize: 100 })
|
||
|
||
function openProductDialog() {
|
||
productDialogVisible.value = true
|
||
productQuery.itemCode = ''
|
||
productQuery.itemName = ''
|
||
productQuery.itemTypeId = undefined
|
||
searchProductItems()
|
||
}
|
||
|
||
async function searchProductItems() {
|
||
productLoading.value = true
|
||
try {
|
||
const res = await listMdItem({
|
||
itemCode: productQuery.itemCode || undefined,
|
||
itemName: productQuery.itemName || undefined,
|
||
itemTypeId: productQuery.itemTypeId,
|
||
enableFlag: 'Y',
|
||
pageNum: productQuery.pageNum,
|
||
pageSize: productQuery.pageSize
|
||
})
|
||
productList.value = res.rows
|
||
productTotal.value = res.total
|
||
} finally {
|
||
productLoading.value = false
|
||
}
|
||
}
|
||
|
||
function resetProductSearch() {
|
||
productQuery.itemCode = ''
|
||
productQuery.itemName = ''
|
||
productQuery.pageNum = 1
|
||
searchProductItems()
|
||
}
|
||
|
||
function queryAllProducts() {
|
||
productQuery.itemCode = ''
|
||
productQuery.itemName = ''
|
||
productQuery.itemTypeId = undefined
|
||
productQuery.pageNum = 1
|
||
searchProductItems()
|
||
}
|
||
|
||
function handleTreeNodeClick(node: any) {
|
||
productQuery.itemTypeId = node.id
|
||
productQuery.pageNum = 1
|
||
searchProductItems()
|
||
}
|
||
|
||
function confirmProduct(row: MdItem) {
|
||
form.itemId = row.itemId
|
||
form.itemCode = row.itemCode
|
||
form.itemName = row.itemName
|
||
form.itemSpec = row.specification
|
||
form.unitName = row.unitName
|
||
if (!form.bomName) form.bomName = `${row.itemName} BOM`
|
||
productDialogVisible.value = false
|
||
}
|
||
|
||
// ============ 选择子件物料弹窗 ============
|
||
|
||
const itemDialogVisible = ref(false)
|
||
const itemLoading = ref(false)
|
||
const itemList = ref<MdItem[]>([])
|
||
const itemTotal = ref(0)
|
||
const itemQuery = reactive({ itemCode: '', itemName: '', itemTypeId: undefined as number | undefined, pageNum: 1, pageSize: 100 })
|
||
const editingLineIndex = ref(-1)
|
||
|
||
function openItemDialog(idx: number) {
|
||
editingLineIndex.value = idx
|
||
itemDialogVisible.value = true
|
||
itemQuery.itemCode = ''
|
||
itemQuery.itemName = ''
|
||
itemQuery.itemTypeId = undefined
|
||
searchSubItems()
|
||
}
|
||
|
||
async function searchSubItems() {
|
||
itemLoading.value = true
|
||
try {
|
||
const res = await listMdItem({
|
||
itemCode: itemQuery.itemCode || undefined,
|
||
itemName: itemQuery.itemName || undefined,
|
||
itemTypeId: itemQuery.itemTypeId,
|
||
enableFlag: 'Y',
|
||
pageNum: itemQuery.pageNum,
|
||
pageSize: itemQuery.pageSize
|
||
})
|
||
// 排除母件自身
|
||
itemList.value = res.rows.filter(it => it.itemId !== form.itemId)
|
||
itemTotal.value = res.total
|
||
} finally {
|
||
itemLoading.value = false
|
||
}
|
||
}
|
||
|
||
function resetItemSearch() {
|
||
itemQuery.itemCode = ''
|
||
itemQuery.itemName = ''
|
||
itemQuery.pageNum = 1
|
||
searchSubItems()
|
||
}
|
||
|
||
function queryAllItems() {
|
||
itemQuery.itemCode = ''
|
||
itemQuery.itemName = ''
|
||
itemQuery.itemTypeId = undefined
|
||
itemQuery.pageNum = 1
|
||
searchSubItems()
|
||
}
|
||
|
||
function handleItemTreeClick(node: any) {
|
||
itemQuery.itemTypeId = node.id
|
||
itemQuery.pageNum = 1
|
||
searchSubItems()
|
||
}
|
||
|
||
function confirmItem(row: MdItem) {
|
||
const idx = editingLineIndex.value
|
||
if (idx < 0) {
|
||
itemDialogVisible.value = false
|
||
return
|
||
}
|
||
// 检查子件重复（按物料ID或物料编码，避免同一BOM下重复子件）
|
||
const exists = lines.value.some(
|
||
(l, i) => i !== idx && (l.bomItemId === row.itemId || (l.bomItemCode && l.bomItemCode === row.itemCode))
|
||
)
|
||
if (exists) {
|
||
ElMessage.warning(`该物料已存在（${row.itemCode || row.itemName}），请勿重复添加`)
|
||
return
|
||
}
|
||
const line = lines.value[idx]
|
||
line.bomItemId = row.itemId
|
||
line.bomItemCode = row.itemCode
|
||
line.bomItemName = row.itemName
|
||
line.bomItemSpec = row.specification
|
||
line.unitOfMeasure = row.unitOfMeasure || ''
|
||
line.unitName = row.unitName || ''
|
||
line.itemOrProduct = row.itemOrProduct || 'ITEM'
|
||
itemDialogVisible.value = false
|
||
}
|
||
|
||
// ============ 生命周期 ============
|
||
|
||
onMounted(() => {
|
||
loadData()
|
||
loadItemTypeTree()
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.bom-form-page {
|
||
padding: 12px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
}
|
||
|
||
.header-bar {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding-bottom: 10px;
|
||
margin-bottom: 12px;
|
||
border-bottom: 1px solid #ebeef5;
|
||
}
|
||
|
||
.title {
|
||
margin: 0;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.actions {
|
||
display: flex;
|
||
gap: 8px;
|
||
align-items: center;
|
||
}
|
||
|
||
.grid-form :deep(.el-form-item) {
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.inline-select {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
width: 100%;
|
||
}
|
||
|
||
.mono {
|
||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.lines-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.lines-title {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.lines-actions {
|
||
display: flex;
|
||
gap: 8px;
|
||
}
|
||
|
||
/* 物料选择弹窗布局 */
|
||
.item-select-layout {
|
||
display: flex;
|
||
gap: 12px;
|
||
min-height: 460px;
|
||
}
|
||
|
||
.item-select-tree {
|
||
width: 180px;
|
||
flex-shrink: 0;
|
||
border-right: 1px solid #ebeef5;
|
||
padding-right: 12px;
|
||
overflow-y: auto;
|
||
max-height: 500px;
|
||
}
|
||
|
||
.item-select-table {
|
||
flex: 1;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.pagination-wrapper {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
</style>
|