You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
besure_web/src/views/mes/plan/PlanForm.vue

491 lines
16 KiB
Vue

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<Dialog :title="dialogTitle" v-model="dialogVisible">
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="110px"
v-loading="formLoading"
>
<el-form-item :label="t('ProductionPlan.Plan.dialogTaskLabel')" prop="taskId">
<el-select
disabled
v-model="formData.taskId"
clearable
filterable
:placeholder="t('ProductionPlan.Plan.dialogTaskPlaceholder')"
@change="handleTaskChange"
>
<el-option
v-for="item in taskList"
:key="item.id"
:label="item.code"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item :label="t('ProductionPlan.Plan.dialogTaskDetailLabel')" prop="taskId">
<el-select
disabled
v-model="formData.taskDetailId"
clearable
filterable
:placeholder="t('ProductionPlan.Plan.dialogTaskDetailPlaceholder')"
@change="handleTaskDetailChange"
>
<el-option
v-for="item in taskDetailList"
:key="item.id"
:label="item.productName+'-未计划:'+(item.number-item.planNumber)"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item prop="code">
<template #label>
<span>
{{ t('ProductionPlan.Plan.dialogCodeLabel') }}
<el-tooltip :content="t('ProductionPlan.Plan.dialogCodeTooltip')" placement="top">
<Icon icon="ep:question-filled" />
</el-tooltip>
</span>
</template>
<el-row :gutter="10" class="!w-full">
<el-col :xs="24" :sm="18" :md="16" :lg="14" :xl="12">
<el-input
:disabled="formData.isCode == true || formType === 'update'"
v-model="formData.code"
:placeholder="t('ProductionPlan.Plan.dialogCodePlaceholder')"
/>
</el-col>
<el-col :xs="24" :sm="6" :md="4" :lg="3" :xl="2">
<div>
<el-switch
v-model="formData.isCode"
:disabled="formType === 'update'"
/>
</div>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="交货日期">
<el-input :model-value="deliveryDateText" disabled />
</el-form-item>
<!-- <el-form-item label="产品" prop="productId">-->
<!-- <el-select-->
<!-- :disabled='editDisable'-->
<!-- v-model="formData.productId"-->
<!-- clearable-->
<!-- filterable-->
<!-- placeholder="请选择产品"-->
<!-- class="!w-1/1"-->
<!-- >-->
<!-- <el-option-->
<!-- v-for="item in productList"-->
<!-- :key="item.id"-->
<!-- :label="item.name"-->
<!-- :value="item.id"-->
<!-- />-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<el-form-item label="设备" prop="deviceId">
<el-input
:model-value="deviceDisplayText"
placeholder="点击选择设备"
readonly
@click="openDeviceSelectDialog"
/>
</el-form-item>
<el-form-item :label="t('ProductionPlan.Plan.dialogPlanNumberLabel')" prop="planNumber">
<el-input v-model="formData.planNumber" />
</el-form-item>
<el-form-item :label="t('ProductionPlan.Plan.dialogPreProductionLabel')" prop="isPreProduction">
<el-radio-group v-model="formData.isPreProduction">
<el-radio
v-for="dict in getIntDictOptions(DICT_TYPE.MES_PRE_PRODUCTION)"
:key="dict.value"
:label="dict.value"
>
{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<!-- <el-form-item label="热压数量" prop="reyaNumber">
<el-input v-model="formData.reyaNumber" />
</el-form-item> -->
<el-form-item :label="t('ProductionPlan.Plan.dialogPlanStartLabel')" prop="planStartTime">
<el-date-picker
v-model="formData.planStartTime"
type="date"
value-format="x"
:placeholder="t('ProductionPlan.Plan.dialogPlanStartPlaceholder')"
class="!w-full"
@change="handlePlanStartTimeChange"
/>
</el-form-item>
<el-form-item :label="t('ProductionPlan.Plan.dialogPlanEndLabel')" prop="planEndTime">
<el-date-picker
v-model="formData.planEndTime"
type="date"
value-format="x"
:placeholder="t('ProductionPlan.Plan.dialogPlanEndPlaceholder')"
class="!w-full"
@change="handlePlanEndTimeChange"
/>
</el-form-item>
<el-form-item label="最晚开工时间" prop="latestStartTime">
<el-date-picker
v-model="formData.latestStartTime"
type="date"
value-format="x"
:disabled-date="latestStartDisabledDate"
placeholder="请选择最晚开工时间"
class="!w-full"
/>
</el-form-item>
<!-- <el-form-item label="班别" prop="groupType">
<el-radio-group v-model="formData.groupType">
<el-radio
v-for="dict in getIntDictOptions(DICT_TYPE.MES_GROUP_TYPE)"
:key="dict.value"
:label="dict.value"
>
{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item> -->
<el-form-item :label="t('ProductionPlan.Plan.dialogRemarkLabel')" prop="remark">
<el-input type="textarea" v-model="formData.remark" :placeholder="t('ProductionPlan.Plan.dialogRemarkPlaceholder')" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading">{{ t('ProductionPlan.Plan.dialogSubmitButtonText') }}</el-button>
<el-button @click="dialogVisible = false">{{ t('ProductionPlan.Plan.dialogCancelButtonText') }}</el-button>
</template>
</Dialog>
<TableSelectDialog
ref="deviceSelectDialogRef"
title="选择设备"
:columns="deviceColumns"
:fetch-api="fetchDeviceLedgerPage"
selection-type="single"
row-key="id"
@confirm="handleDeviceSelectConfirm"
/>
</template>
<script setup lang="ts">
import dayjs from 'dayjs'
import { PlanApi, PlanVO } from '@/api/mes/plan'
import { TaskApi, TaskDetailVO, TaskVO } from '@/api/mes/task'
import { DeviceLedgerApi, DeviceLedgerVO } from '@/api/mes/deviceledger'
import TableSelectDialog from '@/components/TableSelectDialog/TableSelectDialog.vue'
import { DICT_TYPE, getIntDictOptions } from "@/utils/dict";
/** 生产计划 表单 */
defineOptions({ name: 'PlanForm' })
const taskList = ref<TaskVO[]>([]) // 用户列表
const taskDetailList = ref<TaskDetailVO[]>([]) // 用户列表
const deviceSelectDialogRef = ref()
const selectedDeviceRows = ref<DeviceLedgerVO[]>([])
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中1修改时的数据加载2提交的按钮禁用
const formType = ref('') // 表单的类型create - 新增update - 修改
const formData = ref({
id: undefined,
code: undefined,
productId: undefined,
taskDetailId: undefined,
taskId: undefined,
planNumber: undefined,
reyaNumber: undefined,
finishNumber: undefined,
status: undefined,
planStartTime: undefined,
planEndTime: undefined,
startTime: undefined,
endTime: undefined,
productionManagerId: undefined,
remark: undefined,
groupType: undefined,
isEnable: undefined,
deviceId: undefined,
deviceName: undefined,
workerId: undefined,
isPreProduction: undefined,
isCode: undefined,
latestStartTime: undefined,
finishDate: undefined,
deliveryDate: undefined
})
const deliveryDateText = computed(() => {
const sourceValue = formData.value.finishDate || formData.value.deliveryDate
if (!sourceValue) return ''
const value = dayjs(sourceValue)
if (!value.isValid()) return String(sourceValue)
return value.format('YYYY-MM-DD')
})
const deviceDisplayText = computed(() => {
if (selectedDeviceRows.value.length) {
return selectedDeviceRows.value
.map((item: any) => item.deviceName || item.name || item.code || `ID:${item.id}`)
.join('、')
}
if (formData.value.deviceName) return String(formData.value.deviceName)
return ''
})
const deviceColumns = [
{ label: '设备编号', prop: 'deviceCode', minWidth: 140 },
{ label: '设备名称', prop: 'deviceName', minWidth: 160 },
{ label: '设备型号', prop: 'deviceModel', minWidth: 140 },
{ label: '所属车间', prop: 'workshop', minWidth: 140 }
]
const latestStartDisabledDate = (date: Date) => {
if (!formData.value.finishDate) return false
const deliveryDate = dayjs(formData.value.finishDate)
if (!deliveryDate.isValid()) return false
return dayjs(date).startOf('day').valueOf() > deliveryDate.startOf('day').valueOf()
}
const validateLatestStartTime = (_rule: any, value: any, callback: (error?: Error) => void) => {
if (!value) {
callback()
return
}
if (!formData.value.finishDate) {
callback()
return
}
const latestStart = dayjs(value)
const deliveryDate = dayjs(formData.value.finishDate)
if (!latestStart.isValid() || !deliveryDate.isValid()) {
callback()
return
}
if (latestStart.startOf('day').valueOf() > deliveryDate.startOf('day').valueOf()) {
callback(new Error('最晚开工时间不能晚于交货日期'))
return
}
callback()
}
const validatePlanStartTime = (_rule: any, value: any, callback: (error?: Error) => void) => {
if (!value || !formData.value.planEndTime) {
callback()
return
}
const startTime = Number(value)
const endTime = Number(formData.value.planEndTime)
if (Number.isNaN(startTime) || Number.isNaN(endTime)) {
callback()
return
}
if (startTime > endTime) {
callback(new Error('计划开始时间不能晚于计划结束时间'))
return
}
callback()
}
const validatePlanEndTime = (_rule: any, value: any, callback: (error?: Error) => void) => {
if (!value || !formData.value.planStartTime) {
callback()
return
}
const endTime = Number(value)
const startTime = Number(formData.value.planStartTime)
if (Number.isNaN(endTime) || Number.isNaN(startTime)) {
callback()
return
}
if (endTime < startTime) {
callback(new Error('计划结束时间不能早于计划开始时间'))
return
}
callback()
}
const formRules = reactive({
taskDetailId: [{ required: true, message: t('ProductionPlan.Plan.validatorTaskDetailRequired'), trigger: 'blur' }],
taskId: [{ required: true, message: t('ProductionPlan.Plan.validatorTaskRequired'), trigger: 'blur' }],
planNumber: [{ required: true, message: t('ProductionPlan.Plan.validatorPlanNumberRequired'), trigger: 'blur' }],
// reyaNumber: [{ required: true, message: t('ProductionPlan.Plan.validatorReyaNumberRequired'), trigger: 'blur' }],
planStartTime: [
{ required: true, message: t('ProductionPlan.Plan.validatorPlanStartRequired'), trigger: 'blur' },
{ validator: validatePlanStartTime, trigger: 'change' }
],
planEndTime: [
{ required: true, message: t('ProductionPlan.Plan.validatorPlanEndRequired'), trigger: 'blur' },
{ validator: validatePlanEndTime, trigger: 'change' }
],
deviceId: [{ required: true, message: '请选择设备', trigger: 'change' }],
isPreProduction: [{ required: true, message: t('ProductionPlan.Plan.validatorPreProductionRequired'), trigger: 'blur' }],
latestStartTime: [
{ required: true, message: '请选择最晚开工时间', trigger: 'blur' },
{ validator: validateLatestStartTime, trigger: 'change' }
]
})
const formRef = ref() // 表单 Ref
const fetchDeviceLedgerPage = (params: Record<string, any>) => {
console.log('11',taskDetailList.value[0])
return DeviceLedgerApi.getDeviceLedgerPage({
...params,
isScheduled: 1,
productId: taskDetailList.value[0].productId
})
}
const openDeviceSelectDialog = () => {
const rows = selectedDeviceRows.value.length
? selectedDeviceRows.value.map((item: any) => ({ ...item, id: Number(item.id) }))
: formData.value.deviceId
? [
{
id: Number(formData.value.deviceId),
deviceName: formData.value.deviceName
}
]
: []
deviceSelectDialogRef.value?.open(rows)
}
const handleDeviceSelectConfirm = (payload: { ids: (number | string)[]; rows: any[] }) => {
const row = payload.rows?.[0]
if (!row) return
const deviceId = Number(row.id)
if (!Number.isFinite(deviceId)) return
formData.value.deviceId = deviceId
formData.value.deviceName = row.deviceName || row.name || row.code || `设备ID:${deviceId}`
selectedDeviceRows.value = [row]
}
const syncFinishDateByTaskDetail = () => {
const detail = taskDetailList.value.find((item: any) => Number(item.id) === Number(formData.value.taskDetailId))
formData.value.finishDate = detail?.finishDate || detail?.deliveryDate || undefined
}
/** 打开弹窗 */
const open = async (type: string, id?: number,
taskId?: number, productId?: number, number?: number, taskDetailId?:string,
taskDeliveryDate?: string | number) => {
dialogVisible.value = true
dialogTitle.value = t('action.' + type)
formType.value = type
resetForm()
formData.value.deliveryDate = taskDeliveryDate || undefined
if(taskId) {
formData.value.taskId = taskId
taskDetailList.value =await TaskApi.getTaskDetailListByTaskId(formData.value.taskId)
if(taskDetailId){
const taskDetails = taskDetailList.value.filter(item => item.id === taskDetailId)
if(taskDetails && taskDetails.length > 0 && taskDetails[0].id) {
formData.value.taskDetailId = taskDetails[0].id
formData.value.finishDate = (taskDetails[0] as any).finishDate || undefined
formData.value.deliveryDate = (taskDetails[0] as any).deliveryDate || taskDeliveryDate || undefined
}
}
}
if(productId)
formData.value.productId = productId
if(number){
formData.value.planNumber = number
formData.value.reyaNumber = number
}
// 修改时,设置数据
if (id) {
formLoading.value = true
try {
formData.value = await PlanApi.getPlan(id)
if (formData.value.deviceId) {
selectedDeviceRows.value = [
{
id: Number(formData.value.deviceId),
deviceName: formData.value.deviceName
} as DeviceLedgerVO
]
}
} finally {
formLoading.value = false
}
}
taskList.value = await TaskApi.getPlanTaskList()
}
defineExpose({ open }) // 提供 open 方法,用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
const submitForm = async () => {
// 校验表单
await formRef.value.validate()
// 提交请求
formLoading.value = true
try {
const data = formData.value as unknown as PlanVO
if (formType.value === 'create') {
await PlanApi.createPlan(data)
message.success(t('common.createSuccess'))
} else {
await PlanApi.updatePlan(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
code: undefined,
productId: undefined,
taskDetailId: undefined,
taskId: undefined,
planNumber: 0,
finishNumber: 0,
status: undefined,
planStartTime: undefined,
planEndTime: undefined,
startTime: undefined,
endTime: undefined,
productionManagerId: undefined,
remark: undefined,
groupType: undefined,
isEnable: undefined,
deviceId: undefined,
deviceName: undefined,
isPreProduction: 0,
isCode: true,
latestStartTime: undefined,
finishDate: undefined,
deliveryDate: undefined
}
selectedDeviceRows.value = []
formRef.value?.resetFields()
}
/** 任务单变化 */
const handleTaskChange = async() => {
taskDetailList.value =await TaskApi.getTaskDetailListByTaskId(formData.value.taskId)
formData.value.taskDetailId = undefined
formData.value.finishDate = undefined
}
/** 明细变化 */
const handleTaskDetailChange = async() => {
syncFinishDateByTaskDetail()
}
const handlePlanStartTimeChange = () => {
formRef.value?.validateField(['planStartTime', 'planEndTime'])
}
const handlePlanEndTimeChange = () => {
formRef.value?.validateField(['planStartTime', 'planEndTime'])
}
</script>