493 lines
15 KiB
Vue
493 lines
15 KiB
Vue
<template>
|
||
<div class="kingdee-toolbar">
|
||
<n-space>
|
||
<n-button
|
||
size="small"
|
||
:disabled="kingdeeLoading || !kingdeeTableData.length"
|
||
@click="kingdeeToggleExpandAll"
|
||
>
|
||
{{ kingdeeAllExpanded ? '全部收起' : '全部展开' }}
|
||
</n-button>
|
||
<n-button
|
||
size="small"
|
||
type="primary"
|
||
:disabled="kingdeeLoading || !kingdeeTableData.length"
|
||
@click="handleGanttSchedule"
|
||
>
|
||
<template #icon><n-icon><CalendarOutline /></n-icon></template>
|
||
甘特图排产
|
||
</n-button>
|
||
</n-space>
|
||
</div>
|
||
<n-data-table
|
||
v-model:expanded-row-keys="kingdeeExpandedKeys"
|
||
:columns="kingdeeMoColumns"
|
||
:data="kingdeeTableData"
|
||
:loading="kingdeeLoading"
|
||
:row-key="kingdeeMoRowKey"
|
||
:scroll-x="kingdeeMoScrollX"
|
||
:max-height="kingdeeTableMaxHeight"
|
||
:row-class-name="kingdeeMoRowClassName"
|
||
size="small"
|
||
style="margin-bottom:15px"
|
||
/>
|
||
<div style="margin-bottom: 1px;">
|
||
<!-- <template #footer> -->
|
||
<n-space justify="end">
|
||
<n-button type="error" :disabled="kingdeeLoading" @click="reCrawlReorderForm">
|
||
重新读取数据
|
||
</n-button>
|
||
<n-button type="primary" :disabled="kingdeeLoading" :loading="actionLoading" @click="handleSaveDraft">
|
||
保存草稿
|
||
</n-button>
|
||
<n-button type="info" :disabled="kingdeeLoading" :loading="actionLoading" @click="handleSyncOrderAndPlan">
|
||
同步订单计划
|
||
</n-button>
|
||
<n-button @click="$emit('close-modal')">关闭</n-button>
|
||
</n-space>
|
||
<!-- </template> -->
|
||
</div>
|
||
|
||
</template>
|
||
|
||
|
||
<script setup lang="ts">
|
||
import { ref, h, computed, defineProps, onMounted, watch, defineEmits} from 'vue'
|
||
import { NButton, NSpace, NIcon, NTag, NDatePicker, NDataTable, useMessage, useDialog, type DataTableColumns } from 'naive-ui'
|
||
import { type KingdeePrdMo, type KingdeeProcessRoute, resolveProcessName } from '@/api/orderProject'
|
||
import { useRouter } from 'vue-router'
|
||
import { CalendarOutline } from '@vicons/ionicons5'
|
||
|
||
|
||
const emit = defineEmits(['close-modal','holdTemporarilyCallback', "synchronizationCallback","reCrawlCallback"])
|
||
const dialog = useDialog()
|
||
const message = useMessage()
|
||
const router = useRouter()
|
||
|
||
const props = defineProps({
|
||
kingdeeTableData: {
|
||
type: Array,
|
||
default: () => []
|
||
},
|
||
selectedId:{
|
||
type: Number,
|
||
default: null
|
||
},
|
||
/** 父页面查询/重读数据时的加载状态 */
|
||
loading: {
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
})
|
||
|
||
onMounted(() => {
|
||
kingdeeTableData.value = (props.kingdeeTableData as KingdeeMoTableRow[]) || []
|
||
})
|
||
|
||
watch(() => props.kingdeeTableData, () => {
|
||
kingdeeTableData.value = (props.kingdeeTableData as KingdeeMoTableRow[]) || []
|
||
}, { deep: true })
|
||
|
||
const kingdeeModalVisible = ref(false)
|
||
/** 子组件自身操作（保存/同步）的加载状态 */
|
||
const actionLoading = ref(false)
|
||
/** 表格与按钮共用：父级查询 loading 或本地操作 loading */
|
||
const kingdeeLoading = computed(() => props.loading || actionLoading.value)
|
||
/** 主表行：工序仅存 processRoutes，避免 children 触发树形重复行 */
|
||
type KingdeeMoTableRow = Omit<KingdeePrdMo, 'children'> & { processRoutes: KingdeeProcessRoute[] }
|
||
const kingdeeTableData = ref<KingdeeMoTableRow[]>([])
|
||
const kingdeeExpandedKeys = ref<Array<string | number>>([])
|
||
// const kingdeeCurrentProjectId = ref<number | null>(null) // 记录当前正在查询的订单ID
|
||
const kingdeeTableMaxHeight = 'min(78vh, 720px)'
|
||
const kingdeeMoScrollX = 1820
|
||
const kingdeeProcessScrollX = 1540
|
||
|
||
const kingdeeMoColumns: DataTableColumns<KingdeeMoTableRow> = [
|
||
{
|
||
type: 'expand',
|
||
expandable: () => true,
|
||
renderExpand: (row) => renderKingdeeExpand(row),
|
||
},
|
||
{
|
||
title: '类型', key: 'rowType', width: 96, align: 'center',
|
||
render() {
|
||
return h(NTag, { size: 'small', type: 'info', bordered: false }, { default: () => '生产订单' })
|
||
}
|
||
},
|
||
{ title: '单据编号', key: 'billNo', width: 120, align: 'center', ellipsis: { tooltip: true } },
|
||
{ title: '生产令号', key: 'productionOrderNo', width: 130, align: 'center', ellipsis: { tooltip: true } },
|
||
{ title: '工艺路线', key: 'routingNo', width: 110, align: 'center', ellipsis: { tooltip: true } },
|
||
{ title: '物料编码', key: 'materialCode', width: 180, ellipsis: { tooltip: true } },
|
||
{ title: '物料名称', key: 'materialName', width: 160, ellipsis: { tooltip: true } },
|
||
{
|
||
title: '数量', key: 'quantity', width: 90, align: 'center',
|
||
render(row) {
|
||
return formatKingdeeQty(row.quantity)
|
||
}
|
||
},
|
||
{ title: '生产车间', key: 'workShopName', width: 100, align: 'center', ellipsis: { tooltip: true } },
|
||
{ title: '规格型号', key: 'specModel', width: 110, align: 'center', ellipsis: { tooltip: true } },
|
||
{ title: '单位', key: 'unit', width: 60, align: 'center' },
|
||
{
|
||
title: '计划开工', key: 'planStartTime', width: 180, align: 'center',
|
||
render(row) {
|
||
return renderKingdeePlanPickerMo(row, 'planStartTime')
|
||
}
|
||
},
|
||
{
|
||
title: '计划完工', key: 'planFinishTime', width: 180, align: 'center',
|
||
render(row) {
|
||
return renderKingdeePlanPickerMo(row, 'planFinishTime')
|
||
}
|
||
},
|
||
{
|
||
title: '领料状态', key: 'pickMtrlStatus', width: 90, align: 'center',
|
||
render(row) {
|
||
const val = row.pickMtrlStatus
|
||
return val != null ? (pickMtrlStatusMap[String(val)] ?? val) : '-'
|
||
}
|
||
},
|
||
]
|
||
|
||
const kingdeeProcessColumns: DataTableColumns<KingdeeProcessRoute> = [
|
||
{
|
||
title: '类型', key: 'rowType', width: 72, align: 'center',
|
||
render() {
|
||
return h(NTag, { size: 'small', type: 'warning', bordered: false }, { default: () => '工序' })
|
||
}
|
||
},
|
||
{
|
||
title: '工序号', key: 'operNumber', width: 80, align: 'center',
|
||
render(row) {
|
||
return row.operNumber != null ? String(row.operNumber) : '-'
|
||
}
|
||
},
|
||
{
|
||
title: '工序名称', key: 'processName', width: 100, align: 'center',
|
||
render(row) {
|
||
return resolveProcessName(row) || '-'
|
||
}
|
||
},
|
||
{ title: '工序说明', key: 'operDescription', width: 140, ellipsis: { tooltip: true } },
|
||
{ title: '工作中心', key: 'workCenterName', width: 110, align: 'center', ellipsis: { tooltip: true } },
|
||
{ title: '生产车间', key: 'departmentName', width: 110, align: 'center', ellipsis: { tooltip: true } },
|
||
{
|
||
title: '计划开始时间', key: 'planStartTime', width: 180, align: 'center',
|
||
render(row) {
|
||
return renderKingdeePlanPicker(row, 'planStartTime')
|
||
}
|
||
},
|
||
{
|
||
title: '计划结束时间', key: 'planFinishTime', width: 180, align: 'center',
|
||
render(row) {
|
||
return renderKingdeePlanPicker(row, 'planFinishTime')
|
||
}
|
||
},
|
||
{
|
||
title: '活动量', key: 'activityQty', width: 90, align: 'center',
|
||
render(row) {
|
||
return formatKingdeeQty(row.activityQty)
|
||
}
|
||
},
|
||
{ title: '活动单位', key: 'activityUnit', width: 80, align: 'center' },
|
||
{ title: '控制码', key: 'optCtrlCodeName', width: 120, align: 'center', ellipsis: { tooltip: true } },
|
||
{
|
||
title: '是否质检', key: 'qualityInspection', width: 88, align: 'center',
|
||
render(row) {
|
||
const yes = Number(row.qualityInspection) === 1
|
||
return h(NTag, { size: 'small', type: yes ? 'success' : 'default', bordered: false }, {
|
||
default: () => (yes ? '是' : '否'),
|
||
})
|
||
}
|
||
},
|
||
{
|
||
title: '是否入库', key: 'storageEntry', width: 88, align: 'center',
|
||
render(row) {
|
||
const yes = Number(row.storageEntry) === 1
|
||
return h(NTag, {
|
||
size: 'small',
|
||
type: yes ? 'warning' : 'default',
|
||
bordered: false,
|
||
}, {
|
||
default: () => (yes ? '是' : '否'),
|
||
})
|
||
}
|
||
},
|
||
]
|
||
|
||
|
||
|
||
|
||
const kingdeeAllExpanded = computed(() => {
|
||
const total = kingdeeTableData.value.length
|
||
if (!total) return false
|
||
return kingdeeExpandedKeys.value.length >= total
|
||
})
|
||
|
||
const pickMtrlStatusMap: Record<string, string> = {
|
||
'1': '未领料',
|
||
'2': '待定',
|
||
'3': '已领料',
|
||
}
|
||
|
||
function kingdeeMoRowClassName() {
|
||
return 'kingdee-mo-row'
|
||
}
|
||
|
||
|
||
function formatDateTime(ts: number) {
|
||
const d = new Date(ts)
|
||
const pad = (n: number) => String(n).padStart(2, '0')
|
||
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
|
||
}
|
||
|
||
function parseKingdeePlanTime(val: string | number | null | undefined): number | null {
|
||
if (val == null || val === '') return null
|
||
if (typeof val === 'number') return val
|
||
const ts = new Date(val.replace(' ', 'T')).getTime()
|
||
return Number.isNaN(ts) ? null : ts
|
||
}
|
||
|
||
|
||
function renderKingdeePlanPicker(row: KingdeeProcessRoute, field: 'planStartTime' | 'planFinishTime') {
|
||
return h(NDatePicker, {
|
||
value: parseKingdeePlanTime(row[field]),
|
||
type: 'datetime',
|
||
clearable: true,
|
||
size: 'small',
|
||
style: { width: '100%' },
|
||
onUpdateValue: (val: number | null) => {
|
||
row[field] = val != null ? formatDateTime(val) : null
|
||
},
|
||
})
|
||
}
|
||
|
||
|
||
function renderKingdeePlanPickerMo(row: KingdeeMoTableRow, field: 'planStartTime' | 'planFinishTime') {
|
||
return h(NDatePicker, {
|
||
value: parseKingdeePlanTime(row[field]),
|
||
type: 'datetime',
|
||
clearable: true,
|
||
size: 'small',
|
||
style: { width: '100%' },
|
||
onUpdateValue: (val: number | null) => {
|
||
row[field] = val != null ? formatDateTime(val) : null
|
||
},
|
||
})
|
||
}
|
||
|
||
function formatKingdeeQty(val: number | null | undefined) {
|
||
return val != null ? Number(val).toFixed(3) : '-'
|
||
}
|
||
|
||
|
||
function kingdeeMoRowKey(row: KingdeeMoTableRow) {
|
||
return `mo-${row.productionOrderNo}-${row.billNo}`
|
||
}
|
||
|
||
function kingdeeToggleExpandAll() {
|
||
if (kingdeeAllExpanded.value) {
|
||
kingdeeExpandedKeys.value = []
|
||
} else {
|
||
kingdeeExpandedKeys.value = kingdeeTableData.value.map(kingdeeMoRowKey)
|
||
}
|
||
}
|
||
|
||
|
||
|
||
function renderKingdeeExpand(row: KingdeeMoTableRow) {
|
||
const routes = getKingdeeRoutes(row)
|
||
if (!routes.length) {
|
||
return h('div', { class: 'kingdee-expand-empty' }, '暂无工艺路线工序')
|
||
}
|
||
return h('div', { class: 'kingdee-expand-wrap' }, [
|
||
h(NDataTable, {
|
||
class: 'kingdee-process-table',
|
||
columns: kingdeeProcessColumns,
|
||
data: routes,
|
||
rowKey: kingdeeProcessRowKey,
|
||
size: 'small',
|
||
bordered: true,
|
||
striped: true,
|
||
scrollX: kingdeeProcessScrollX,
|
||
}),
|
||
])
|
||
}
|
||
|
||
function getKingdeeRoutes(mo: KingdeeMoTableRow) {
|
||
return mo.processRoutes
|
||
}
|
||
function kingdeeProcessRowKey(row: KingdeeProcessRoute) {
|
||
return `route-${row.operNumber}-${row.workCenterName}-${row.operDescription}`
|
||
}
|
||
|
||
// 甘特图排产
|
||
function handleGanttSchedule() {
|
||
// 将待排产数据和当前项目ID存入 sessionStorage，供甘特图页面使用
|
||
sessionStorage.setItem('gantt_schedule_data', JSON.stringify(kingdeeTableData.value))
|
||
if (props.selectedId) {
|
||
sessionStorage.setItem('gantt_project_id', String(props.selectedId))
|
||
}
|
||
// 跳转到甘特图排产独立页面
|
||
router.push('/biz/orderProject/gantt')
|
||
}
|
||
|
||
// 同步订单和计划表（等待父组件接口完成后再关 loading，避免第一次点击“没反应”）
|
||
async function handleSyncOrderAndPlan() {
|
||
if (!props.selectedId || actionLoading.value) return
|
||
|
||
actionLoading.value = true
|
||
try {
|
||
const draftData = kingdeeTableData.value.map(mo => {
|
||
const { processRoutes, ...rest } = mo
|
||
return { ...rest, children: processRoutes } as KingdeePrdMo
|
||
})
|
||
|
||
const res = await new Promise<unknown>((resolve, reject) => {
|
||
emit('synchronizationCallback', props.selectedId, draftData, (result: unknown, err?: unknown) => {
|
||
if (err) reject(err)
|
||
else resolve(result)
|
||
})
|
||
})
|
||
|
||
if (res === 'success') {
|
||
message.success('同步订单计划成功')
|
||
emit('close-modal')
|
||
}
|
||
} catch {
|
||
// 错误拦截器已处理
|
||
} finally {
|
||
actionLoading.value = false
|
||
}
|
||
}
|
||
|
||
|
||
|
||
const reCrawlReorderForm = () => {
|
||
// // 暂存金蝶生产订单数据（草稿）
|
||
if (!props.selectedId) return
|
||
|
||
dialog.warning({
|
||
title: '提示',
|
||
content: '重启读取会导致当前页面数据全部重置, 确定需要重新读取吗？',
|
||
positiveText: '确定',
|
||
negativeText: '取消',
|
||
onPositiveClick: () => {
|
||
// 加载态由父组件 reCrawlReorderForm 的 kingdeeLoading 控制
|
||
emit('reCrawlCallback', props.selectedId, true)
|
||
}
|
||
})
|
||
|
||
|
||
|
||
}
|
||
|
||
const handleSaveDraft = () => {
|
||
// // 暂存金蝶生产订单数据（草稿）
|
||
if (!props.selectedId) return
|
||
|
||
actionLoading.value = true
|
||
try {
|
||
const draftData = kingdeeTableData.value.map(mo => {
|
||
const { processRoutes, ...rest } = mo
|
||
return { ...rest, children: processRoutes } as KingdeePrdMo
|
||
})
|
||
emit('holdTemporarilyCallback', props.selectedId, draftData)
|
||
message.success('草稿保存成功')
|
||
} catch (error) {
|
||
// 错误拦截器已处理
|
||
} finally {
|
||
actionLoading.value = false
|
||
}
|
||
|
||
}
|
||
// // 暂存金蝶生产订单数据（草稿）
|
||
// async function handleSaveDraft() {
|
||
// if (!kingdeeCurrentProjectId) return
|
||
|
||
// kingdeeLoading.value = true
|
||
// try {
|
||
// // 恢复数据结构，将 processRoutes 转换为 children
|
||
// const draftData = kingdeeTableData.value.map(mo => {
|
||
// const { processRoutes, ...rest } = mo
|
||
// return { ...rest, children: processRoutes } as KingdeePrdMo
|
||
// })
|
||
|
||
// emit('holdTemporarilyCallback', { id:kingdeeCurrentProjectId, data:draftData })
|
||
// // await orderProjectApi.saveKingdeeOrderDraft(kingdeeCurrentProjectId.value, draftData)
|
||
// // message.success('草稿保存成功')
|
||
// } catch (error) {
|
||
// // 错误拦截器已处理
|
||
// } finally {
|
||
// kingdeeLoading.value = false
|
||
// }
|
||
// }
|
||
</script>
|
||
|
||
|
||
<style scoped>
|
||
.search-form {
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.table-toolbar {
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.kingdee-toolbar {
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
:deep(.kingdee-modal .n-card) {
|
||
max-height: 94vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
:deep(.kingdee-modal .n-card__content) {
|
||
flex: 1;
|
||
min-height: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
:deep(.kingdee-mo-row td) {
|
||
background-color: rgba(32, 128, 240, 0.06) !important;
|
||
font-weight: 500;
|
||
}
|
||
|
||
:deep(.kingdee-mo-row:hover td) {
|
||
background-color: rgba(32, 128, 240, 0.1) !important;
|
||
}
|
||
|
||
.kingdee-expand-wrap {
|
||
margin: 4px 8px 8px 36px;
|
||
padding: 12px 14px 14px;
|
||
border: 1px solid var(--n-border-color);
|
||
border-left: 4px solid #18a058;
|
||
border-radius: 6px;
|
||
background: var(--n-action-color);
|
||
}
|
||
|
||
:deep(.kingdee-process-table .n-data-table-th) {
|
||
background: rgba(24, 160, 88, 0.12) !important;
|
||
}
|
||
|
||
:deep(.kingdee-process-table .n-data-table-td) {
|
||
background-color: var(--n-color) !important;
|
||
}
|
||
|
||
:deep(.kingdee-process-table .n-data-table-tr--striped .n-data-table-td) {
|
||
background-color: var(--n-action-color) !important;
|
||
}
|
||
|
||
.kingdee-expand-empty {
|
||
margin: 4px 8px 8px 36px;
|
||
padding: 12px 14px;
|
||
font-size: 13px;
|
||
color: var(--n-text-color-3);
|
||
border: 1px dashed var(--n-border-color);
|
||
border-radius: 6px;
|
||
background: var(--n-action-color);
|
||
}
|
||
</style>
|