<template>
|
<j-modal
|
:title="title"
|
:width="width"
|
:visible="visible"
|
switchFullscreen
|
@ok="handleOk"
|
:okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
|
@cancel="handleCancel"
|
cancelText="关闭">
|
|
<a-button :style="{ marginBottom: '10px' }" type="primary" @click="handleAdd">新增</a-button>
|
<vxe-table
|
ref="table"
|
border
|
:data="dataSource"
|
:edit-config="{trigger: 'click', mode: 'cell'}"
|
:edit-rules="editRules"
|
>
|
<vxe-table-column type="seq" width="40"/>
|
<vxe-table-column width="200" title="工单号" field="workOrderCode">
|
<template #default="{ row }">
|
<span v-if="row.workOrderCode">{{ row.workOrderCode }}</span>
|
<span v-else class="placeholder-text">系统自动生成</span>
|
</template>
|
</vxe-table-column>
|
<vxe-table-column
|
title="物料编号"
|
field="materialNumber"
|
:edit-render="{name: '$select', options: materialOptions, events: {change: handleMaterialChange}}">
|
<template #default="{ row }">
|
<span v-if="row.materialNumber">{{ row.materialNumber }}</span>
|
<span v-else class="placeholder-text">请选择物料编号</span>
|
</template>
|
</vxe-table-column>
|
<vxe-table-column title="物料名称" field="materialName">
|
<template #default="{ row }">
|
<span v-if="row.materialName">{{ row.materialName }}</span>
|
<span v-else class="placeholder-text">物料名称自动填充</span>
|
</template>
|
</vxe-table-column>
|
<vxe-table-column title="产线" field="factoryName"></vxe-table-column>
|
<vxe-table-column
|
title="班组"
|
field="groupId"
|
:edit-render="{name: '$select', options: groupOptions, events: {change: handleGroupChange}}">
|
</vxe-table-column>
|
<vxe-table-column title="班次id" :visible="false" field="shiftName"></vxe-table-column>
|
<vxe-table-column title="班次" field="shiftName"></vxe-table-column>
|
<vxe-table-column
|
title="排产日期"
|
field="workOrderDate"
|
:edit-render="{name: '$select', options: workOrderDateOptions, events: {change: handleWorkOrderDateChange}}">
|
</vxe-table-column>
|
<vxe-table-column
|
title="计划生产数量"
|
field="planQuantity"
|
width="150"
|
:edit-render="{name: '$input'}">
|
<template #default="{ row }">
|
<span v-if="row.planQuantity">{{ row.planQuantity }}</span>
|
<span v-else class="placeholder-text">请填写计划生产数量</span>
|
</template>
|
</vxe-table-column>
|
<vxe-table-column title="操作">
|
<template #default="{ row }">
|
<vxe-button size="small" class="error-button" @click="handleRemove(row)">删除</vxe-button>
|
</template>
|
</vxe-table-column>
|
</vxe-table>
|
</j-modal>
|
</template>
|
|
<script>
|
|
import MesProductionWorkOrderForm from './MesProductionWorkOrderForm'
|
import { ajaxGetDictItems } from '@api/api'
|
import { getAction, postAction } from '@api/manage'
|
|
export default {
|
name: 'MesProductionWorkOrderModal',
|
components: {
|
MesProductionWorkOrderForm
|
},
|
data () {
|
return {
|
title: '排产明细',
|
width: 1300,
|
visible: false,
|
disableSubmit: false,
|
loading: false,
|
dataSource: [],
|
groupOptions: [],
|
groupShiftMap: {},
|
materialOptions: [],
|
materNumberNameMap: {},
|
workOrderDateOptions: [],
|
url: {
|
queryShiftGroupByFactoryId: '/base/shiftGroup/queryShiftGroupByFactoryId',
|
addSchedulePlan: '/mesproductionworkorder/mesProductionWorkOrder/addSchedulePlan'
|
},
|
editRules: {
|
materialNumber: [
|
{ required: true, message: '物料编号必须选择' }
|
],
|
groupId: [
|
{ required: true, message: '班组必须选择' }
|
],
|
workOrderDate: [
|
{ required: true, message: '排产日期必须选择' }
|
],
|
planQuantity: [
|
{ required: true, message: '计划生产数量为必填' }
|
]
|
}
|
}
|
},
|
methods: {
|
// 生成日期范围数组
|
generateDateRangeOptions(startDate, endDate) {
|
const dateOptions = [];
|
const start = new Date(startDate);
|
const end = new Date(endDate);
|
|
// 设置时间为每天的0点
|
start.setHours(0, 0, 0, 0);
|
end.setHours(0, 0, 0, 0);
|
|
// 生成日期范围内的所有日期
|
for (let date = new Date(start); date <= end; date.setDate(date.getDate() + 1)) {
|
const formattedDate = this.formatDate(date);
|
dateOptions.push({
|
value: formattedDate,
|
label: formattedDate
|
});
|
}
|
return dateOptions;
|
},
|
// 格式化日期为 YYYY-MM-DD
|
formatDate(date) {
|
const year = date.getFullYear();
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
const day = String(date.getDate()).padStart(2, '0');
|
return `${year}-${month}-${day}`;
|
},
|
// 生成工单号的方法
|
generateWorkOrderCode(row) {
|
console.log('row:', row)
|
// 获取各个字段的值
|
const factoryCode = row.factoryCode || ''; // 产线编号
|
const materialNumber = row.materialNumber || ''; // 物料编号
|
const workDate = row.workOrderDate || ''; // 排产日期
|
const shiftCode = row.shiftCode || ''; // 班次编号
|
|
// 格式化排产日期（如果需要特定格式，比如只取年月日）
|
let formattedDate = workDate;
|
if (workDate && workDate.length >= 10) {
|
// 如果是完整日期格式，提取 YYYY-MM-DD 部分
|
formattedDate = workDate.substring(0, 10).replace(/-/g, '');
|
}
|
// 拼接工单号
|
return `${factoryCode}${materialNumber}${formattedDate}${shiftCode}`;
|
},
|
// 在适当时机更新工单号
|
updateWorkOrderCode(row) {
|
row.workOrderCode = this.generateWorkOrderCode(row);
|
},
|
handleWorkOrderDateChange($event, value) {
|
$event.row.workOrderDate = value.value;
|
this.updateWorkOrderCode($event.row)
|
},
|
handleMaterialChange($event, value) {
|
const key = value.value
|
if (key && this.materNumberNameMap[key]) {
|
$event.row.materialName = this.materNumberNameMap[key]
|
} else {
|
$event.row.materialName = '';
|
}
|
// 更新物料编号
|
$event.row.materialNumber = key;
|
// 重新生成工单号
|
this.updateWorkOrderCode($event.row);
|
},
|
handleGroupChange($event, value) {
|
const key = value.value
|
// 从 groupShiftMap 中获取对应的班次信息
|
if (key && this.groupShiftMap[key]) {
|
// 更新当前行的班次字段
|
$event.row.shiftId = this.groupShiftMap[key].shiftId;
|
$event.row.shiftCode = this.groupShiftMap[key].shiftCode;
|
$event.row.shiftName = this.groupShiftMap[key].shiftName;
|
} else {
|
// 如果没有匹配的班次信息，则清空班次字段
|
$event.row.shiftId = '';
|
$event.row.shiftCode = '';
|
$event.row.shiftName = '';
|
}
|
// 重新生成工单号
|
this.updateWorkOrderCode($event.row);
|
},
|
initDictSelectOptions(record) {
|
return new Promise((resolve) => {
|
// 并行执行多个异步请求
|
const promises = [];
|
|
// 获取班组和班次信息
|
if (record && record.length > 0) {
|
const factoryId = record[0].factoryId
|
const shiftGroupPromise = getAction(this.url.queryShiftGroupByFactoryId, { factoryId: factoryId }).then(res => {
|
if (res.success) {
|
// 修正映射逻辑
|
this.groupOptions = res.result.map(item => {
|
return {
|
value: item.id,
|
label: item.groupName
|
}
|
})
|
// 保存班组和班次的映射关系
|
this.groupShiftMap = res.result.reduce((map, item) => {
|
map[item.id] = {
|
shiftId: item.shiftId,
|
shiftCode: item.shiftCode_dictText,
|
shiftName: item.shiftId_dictText
|
}
|
return map
|
}, {})
|
}
|
}).catch(() => {
|
// 即使请求失败也不阻塞
|
});
|
promises.push(shiftGroupPromise);
|
}
|
|
//获取物料编号下拉选项
|
const materialNumberPromise = ajaxGetDictItems("lsw_material,material_name,material_number,del_flag!='1' order by material_number asc", null).then(res => {
|
if (res.success) {
|
// 假设物料编号字段为 materialNumber，需要根据实际字段调整
|
// 将物料选项存储到组件数据中，供表格使用
|
this.materialOptions = res.result.map(item => {
|
return {
|
value: item.value,
|
label: item.value
|
}
|
});
|
this.materNumberNameMap = res.result.reduce((map, item) => {
|
map[item.value] = item.text
|
return map
|
}, {})
|
}
|
}).catch(() => {
|
// 即使请求失败也不阻塞
|
});
|
promises.push(materialNumberPromise);
|
|
// 等待所有请求完成
|
Promise.all(promises).then(() => {
|
resolve();
|
});
|
})
|
},
|
edit (record, dateRange) {
|
// 先加载字典数据，再初始化表单
|
this.initDictSelectOptions(record).then(() => {
|
this.$nextTick(() => {
|
// 根据日期范围生成排产日期选项
|
if (dateRange && dateRange.length === 2) {
|
this.workOrderDateOptions = this.generateDateRangeOptions(dateRange[0], dateRange[1]);
|
}
|
|
// 为每条记录生成工单号
|
if (record && record.length > 0) {
|
record.forEach(row => {
|
if (!row.workOrderCode) {
|
this.updateWorkOrderCode(row);
|
}
|
});
|
}
|
this.dataSource = record
|
this.visible = true
|
// 数据加载完成后激活所有行的编辑状态
|
this.$nextTick(() => {
|
if (this.$refs.table && this.dataSource.length > 0) {
|
// 激活第一行进入编辑状态
|
this.$refs.table.setActiveRow(this.dataSource[0])
|
}
|
})
|
});
|
})
|
},
|
close () {
|
this.$emit('close');
|
this.visible = false;
|
},
|
handleAdd() {
|
// 创建新行数据
|
const newRow = {
|
workOrderCode: this.dataSource.length > 0 ? this.dataSource[0].factoryCode : '',
|
materialNumber: '', // 物料编号（需选择）
|
materialName: '', // 物料名称（自动填充）
|
factoryId: this.dataSource.length > 0 ? this.dataSource[0].factoryId : '',
|
factoryCode: this.dataSource.length > 0 ? this.dataSource[0].factoryCode : '',
|
factoryName: this.dataSource.length > 0 ? this.dataSource[0].factoryName : '',
|
groupId: '', // 班组（需选择）
|
shiftId: '', // 班次ID
|
shiftCode: '', // 班次编号
|
shiftName: '', // 班次名称
|
workOrderDate: '', // 排产日期（需选择）
|
planQuantity: '' // 计划生产数量（需填写）
|
}
|
// 将新行添加到数据源中
|
this.dataSource.push(newRow);
|
// 激活新增的行进入编辑状态
|
this.$nextTick(() => {
|
if (this.$refs.table) {
|
this.$refs.table.setActiveRow(newRow);
|
}
|
});
|
},
|
handleRemove(row) {
|
let table = this.$refs.table
|
this.$confirm({
|
title: '提示',
|
content: '确认要删除吗？',
|
okText: '确定',
|
cancelText: '取消',
|
onOk: () => {
|
// 删除行
|
table.remove(row)
|
}
|
})
|
},
|
handleOk () {
|
// 表格全表校验
|
this.$refs.table.validate((valid) => {
|
if (valid) {
|
this.$message.error("请完成所有必填信息后再提交！")
|
} else {
|
let tableData = this.$refs.table.getTableData().fullData
|
console.log(tableData)
|
postAction(this.url.addSchedulePlan, tableData).then(res=> {
|
if (res.success) {
|
this.$message.success(res.message)
|
this.submitCallback()
|
} else {
|
this.$message.warning(res.message)
|
}
|
})
|
}
|
})
|
},
|
submitCallback(){
|
this.$emit('ok');
|
this.visible = false;
|
},
|
handleCancel () {
|
this.close()
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
|
.placeholder-text {
|
color: #999;
|
font-style: italic;
|
}
|
|
.error-button {
|
background-color: #ff4d4f !important;
|
border-color: #ff4d4f !important;
|
color: #fff !important;
|
}
|
|
</style>
|
