✨ feat(mes): 重构工单对话框，合并排产与详情功能
YunaiV
parent
0bcab49fc0
commit
e4c0a881f0
|
|
@ -1,74 +0,0 @@
|
|||
<!-- MES 生产任务进度展示 -->
|
||||
<!-- TODO @芋艿：待 review -->
|
||||
<template>
|
||||
<div v-loading="loading">
|
||||
<el-empty v-if="!list.length" description="暂无排产任务" />
|
||||
<div v-else class="flex flex-wrap gap-20px p-10px">
|
||||
<el-card
|
||||
v-for="task in list"
|
||||
:key="task.id"
|
||||
class="w-240px"
|
||||
shadow="hover"
|
||||
>
|
||||
<div class="text-center">
|
||||
<el-progress
|
||||
type="circle"
|
||||
:percentage="getProgress(task)"
|
||||
:width="100"
|
||||
:color="task.colorCode || '#00AEF3'"
|
||||
/>
|
||||
<div class="mt-10px font-bold text-14px">{{ task.name }}</div>
|
||||
<div class="mt-5px text-12px text-gray-500">
|
||||
{{ task.processName }} - {{ task.workstationName }}
|
||||
</div>
|
||||
<div class="mt-5px text-12px">
|
||||
<dict-tag :type="DICT_TYPE.MES_PRO_TASK_STATUS" :value="task.status" />
|
||||
</div>
|
||||
<div class="mt-5px text-12px text-gray-400">
|
||||
排产: {{ task.quantity }} | 已产: {{ task.producedQuantity }} | 合格: {{ task.qualifyQuantity }}
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DICT_TYPE } from '@/utils/dict'
|
||||
import { ProTaskApi, ProTaskVO } from '@/api/mes/pro/task'
|
||||
|
||||
defineOptions({ name: 'ProTaskProgress' })
|
||||
|
||||
const props = defineProps<{
|
||||
workOrderId: number
|
||||
}>()
|
||||
|
||||
const loading = ref(false)
|
||||
const list = ref<ProTaskVO[]>([])
|
||||
|
||||
/** 计算进度百分比 */
|
||||
const getProgress = (task: ProTaskVO): number => {
|
||||
if (!task.quantity || task.quantity === 0) return 0
|
||||
const percent = (task.producedQuantity / task.quantity) * 100
|
||||
return Math.min(Math.round(percent), 100)
|
||||
}
|
||||
|
||||
/** 查询任务列表（复用 page 接口，按工单过滤） */
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await ProTaskApi.getTaskPage({
|
||||
workOrderId: props.workOrderId,
|
||||
pageNo: 1,
|
||||
pageSize: 999
|
||||
})
|
||||
list.value = data.list
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
watch(() => props.workOrderId, () => getList())
|
||||
|
||||
onMounted(() => getList())
|
||||
</script>
|
||||
|
|
@ -1,109 +0,0 @@
|
|||
<!-- MES 排产 Drawer：展示工单概要 + 工序步骤导航 + 当前工序的任务列表 -->
|
||||
<template>
|
||||
<el-drawer v-model="visible" title="排产" size="75%" :destroy-on-close="true">
|
||||
<div v-if="currentWorkOrder">
|
||||
<!-- 工单概要信息 -->
|
||||
<el-descriptions :column="3" border class="mb-15px">
|
||||
<el-descriptions-item label="工单编码">{{ currentWorkOrder.code }}</el-descriptions-item>
|
||||
<el-descriptions-item label="工单名称">{{ currentWorkOrder.name }}</el-descriptions-item>
|
||||
<el-descriptions-item label="产品">{{ currentWorkOrder.productName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="数量">{{ currentWorkOrder.quantity }}</el-descriptions-item>
|
||||
<el-descriptions-item label="客户">{{ currentWorkOrder.clientName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="需求日期">
|
||||
{{ formatDate(currentWorkOrder.requestDate, 'YYYY-MM-DD') }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<!-- 工序步骤导航 -->
|
||||
<el-steps
|
||||
v-if="routeProcessList.length"
|
||||
:active="activeProcessStep"
|
||||
finish-status="success"
|
||||
class="mb-15px"
|
||||
@change="handleStepChange"
|
||||
>
|
||||
<el-step
|
||||
v-for="(rp, index) in routeProcessList"
|
||||
:key="rp.processId"
|
||||
:title="rp.processName"
|
||||
:description="'第' + (index + 1) + '道工序'"
|
||||
style="cursor: pointer"
|
||||
@click="handleStepClick(index)"
|
||||
/>
|
||||
</el-steps>
|
||||
<el-empty v-else description="该产品未配置工艺路线，请先在工艺路线中维护" />
|
||||
|
||||
<!-- 当前工序的任务列表 -->
|
||||
<ProTaskList
|
||||
v-if="currentProcess"
|
||||
:work-order-id="currentWorkOrder.id"
|
||||
:work-order-code="currentWorkOrder.code"
|
||||
:work-order-name="currentWorkOrder.name"
|
||||
:route-id="currentRouteId"
|
||||
:process-id="currentProcess.processId"
|
||||
:item-id="currentWorkOrder.productId"
|
||||
:unit-measure-id="currentWorkOrder.unitMeasureId"
|
||||
:process-list="routeProcessList"
|
||||
/>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { formatDate } from '@/utils/formatTime'
|
||||
import { ProRouteProcessApi, ProRouteProcessVO } from '@/api/mes/pro/route/process'
|
||||
import { ProRouteProductApi } from '@/api/mes/pro/route/product'
|
||||
import ProTaskList from './ProTaskList.vue'
|
||||
|
||||
defineOptions({ name: 'ScheduleDrawer' })
|
||||
|
||||
// ==================== Drawer 状态 ====================
|
||||
const visible = ref(false)
|
||||
const currentWorkOrder = ref<any>(null)
|
||||
const routeProcessList = ref<ProRouteProcessVO[]>([])
|
||||
const activeProcessStep = ref(0)
|
||||
const currentRouteId = ref(0)
|
||||
|
||||
/** 当前选中的工序 */
|
||||
const currentProcess = computed(() => {
|
||||
return routeProcessList.value[activeProcessStep.value]
|
||||
})
|
||||
|
||||
/**
|
||||
* 打开排产 Drawer
|
||||
*
|
||||
* @param row 工单行数据（ProWorkOrderVO）
|
||||
*/
|
||||
const open = async (row: any) => {
|
||||
currentWorkOrder.value = row
|
||||
visible.value = true
|
||||
activeProcessStep.value = 0
|
||||
routeProcessList.value = []
|
||||
|
||||
// 通过产品查找工艺路线，再加载工序列表
|
||||
try {
|
||||
// 临时方案：查所有工艺路线产品，前端匹配（后续需后端提供"根据产品查询工艺路线"接口）
|
||||
const routeProducts = await ProRouteProductApi.getRouteProductListByRoute(0)
|
||||
const matched = routeProducts?.find((rp: any) => rp.itemId === row.productId)
|
||||
if (matched) {
|
||||
currentRouteId.value = matched.routeId
|
||||
const processes = await ProRouteProcessApi.getRouteProcessListByRoute(matched.routeId)
|
||||
routeProcessList.value = processes.sort((a: any, b: any) => a.sort - b.sort)
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('加载工艺路线工序失败', e)
|
||||
}
|
||||
}
|
||||
|
||||
/** 工序步骤切换（el-steps @change） */
|
||||
const handleStepChange = (index: number) => {
|
||||
activeProcessStep.value = index
|
||||
}
|
||||
|
||||
/** 工序步骤点击 */
|
||||
const handleStepClick = (index: number) => {
|
||||
activeProcessStep.value = index
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
|
|
@ -0,0 +1,235 @@
|
|||
<!-- MES 生产排产 - 工单排产对话框（表单布局与 WorkOrderForm 保持一致，全部 disabled） -->
|
||||
<template>
|
||||
<Dialog :title="dialogTitle" v-model="dialogVisible" width="960px">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
label-width="120px"
|
||||
v-loading="formLoading"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="工单编码" prop="code">
|
||||
<el-input v-model="formData.code" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="工单名称" prop="name">
|
||||
<el-input v-model="formData.name" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="工单来源" prop="orderSourceType">
|
||||
<el-select v-model="formData.orderSourceType" class="!w-1/1" disabled>
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.MES_PRO_WORK_ORDER_SOURCE_TYPE)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8" v-if="formData.orderSourceType === MesProWorkOrderSourceTypeEnum.ORDER">
|
||||
<el-form-item label="来源单据编号" prop="orderSourceCode">
|
||||
<el-input v-model="formData.orderSourceCode" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="工单类型" prop="type">
|
||||
<el-select v-model="formData.type" class="!w-1/1" disabled>
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.MES_PRO_WORK_ORDER_TYPE)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="产品" prop="productId">
|
||||
<MdItemSelect v-model="formData.productId" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="工单数量" prop="quantity">
|
||||
<el-input-number
|
||||
v-model="formData.quantity"
|
||||
:min="0"
|
||||
:precision="2"
|
||||
class="!w-1/1"
|
||||
disabled
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="客户" prop="clientId">
|
||||
<MdClientSelect v-model="formData.clientId" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col
|
||||
:span="8"
|
||||
v-if="
|
||||
formData.type === MesProWorkOrderTypeEnum.OUTSOURCE ||
|
||||
formData.type === MesProWorkOrderTypeEnum.PURCHASE
|
||||
"
|
||||
>
|
||||
<el-form-item label="供应商" prop="vendorId">
|
||||
<MdVendorSelect v-model="formData.vendorId" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="批次号" prop="batchCode">
|
||||
<el-input v-model="formData.batchCode" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="需求日期" prop="requestDate">
|
||||
<el-date-picker
|
||||
v-model="formData.requestDate"
|
||||
type="date"
|
||||
value-format="x"
|
||||
class="!w-1/1"
|
||||
disabled
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="工单状态" prop="status">
|
||||
<dict-tag :type="DICT_TYPE.MES_PRO_WORK_ORDER_STATUS" :value="formData.status" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input type="textarea" v-model="formData.remark" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<!-- 工序步骤导航（仅排产模式显示） -->
|
||||
<el-steps
|
||||
v-if="isSchedule && routeProcessList.length && formData.id"
|
||||
:active="activeProcessStep"
|
||||
finish-status="success"
|
||||
align-center
|
||||
simple
|
||||
class="my-15px"
|
||||
>
|
||||
<el-step
|
||||
v-for="(rp, index) in routeProcessList"
|
||||
:key="rp.processId"
|
||||
:title="rp.processName"
|
||||
style="cursor: pointer"
|
||||
@click="activeProcessStep = index"
|
||||
/>
|
||||
</el-steps>
|
||||
|
||||
<!-- 当前工序的任务列表（仅排产模式显示） -->
|
||||
<el-card
|
||||
v-for="(rp, index) in routeProcessList"
|
||||
v-show="isSchedule && activeProcessStep === index && formData.id"
|
||||
:key="rp.processId"
|
||||
shadow="never"
|
||||
>
|
||||
<ProTaskList
|
||||
:work-order-id="formData.id!"
|
||||
:work-order-code="formData.code!"
|
||||
:work-order-name="formData.name!"
|
||||
:route-id="currentRouteId"
|
||||
:process-id="rp.processId"
|
||||
:item-id="formData.productId!"
|
||||
:unit-measure-id="(formData as any).unitMeasureId"
|
||||
:process-list="routeProcessList"
|
||||
/>
|
||||
</el-card>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="dialogVisible = false">关 闭</el-button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
|
||||
import { ProWorkOrderApi } from '@/api/mes/pro/workorder'
|
||||
import { ProRouteProcessApi, ProRouteProcessVO } from '@/api/mes/pro/route/process'
|
||||
import { ProRouteProductApi } from '@/api/mes/pro/route/product'
|
||||
import MdItemSelect from '@/views/mes/md/item/components/MdItemSelect.vue'
|
||||
import MdClientSelect from '@/views/mes/md/client/components/MdClientSelect.vue'
|
||||
import MdVendorSelect from '@/views/mes/md/vendor/components/MdVendorSelect.vue'
|
||||
import { MesProWorkOrderSourceTypeEnum, MesProWorkOrderTypeEnum } from '@/views/mes/utils/constants'
|
||||
import ProTaskList from './ProTaskList.vue'
|
||||
|
||||
defineOptions({ name: 'WorkOrderForm2' })
|
||||
|
||||
const dialogVisible = ref(false)
|
||||
const dialogTitle = ref('')
|
||||
const formLoading = ref(false)
|
||||
const formType = ref('') // 'detail' - 详情；'schedule' - 排产
|
||||
const formData = ref<any>({})
|
||||
const formRef = ref()
|
||||
|
||||
/** 是否为排产模式 */
|
||||
const isSchedule = computed(() => formType.value === 'schedule')
|
||||
|
||||
// ==================== 工序步骤 ====================
|
||||
const routeProcessList = ref<ProRouteProcessVO[]>([])
|
||||
const activeProcessStep = ref(0)
|
||||
const currentRouteId = ref(0)
|
||||
|
||||
/**
|
||||
* 打开对话框
|
||||
*
|
||||
* @param type 'detail' - 工单详情；'schedule' - 生产排产
|
||||
* @param id 工单 ID
|
||||
*/
|
||||
const open = async (type: string, id: number) => {
|
||||
dialogVisible.value = true
|
||||
dialogTitle.value = type === 'schedule' ? '生产排产' : '工单详情'
|
||||
formType.value = type
|
||||
formLoading.value = true
|
||||
formData.value = {}
|
||||
routeProcessList.value = []
|
||||
activeProcessStep.value = 0
|
||||
|
||||
try {
|
||||
// 加载工单详情
|
||||
formData.value = await ProWorkOrderApi.getWorkOrder(id)
|
||||
|
||||
// 排产模式：加载工艺路线工序列表
|
||||
if (type === 'schedule' && formData.value.productId) {
|
||||
await loadRouteProcesses(formData.value.productId)
|
||||
}
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 加载工艺路线工序列表 */
|
||||
const loadRouteProcesses = async (productId: number) => {
|
||||
try {
|
||||
// 临时方案：查所有工艺路线产品，前端匹配（后续需后端提供"根据产品查询工艺路线"接口）
|
||||
const routeProducts = await ProRouteProductApi.getRouteProductListByRoute(0)
|
||||
const matched = routeProducts?.find((rp: any) => rp.itemId === productId)
|
||||
if (matched) {
|
||||
currentRouteId.value = matched.routeId
|
||||
const processes = await ProRouteProcessApi.getRouteProcessListByRoute(matched.routeId)
|
||||
routeProcessList.value = processes.sort((a: any, b: any) => a.sort - b.sort)
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('加载工艺路线工序失败', e)
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
|
|
@ -65,7 +65,7 @@
|
|||
|
||||
<!-- 甘特图预览 -->
|
||||
<ContentWrap title="排产甘特图">
|
||||
<GanttChart ref="ganttPreviewRef" :tasks="ganttTasks" :readonly="true" :height="350" />
|
||||
<GanttChart :tasks="ganttTasks" :readonly="true" :height="350" />
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 待排产工单列表 -->
|
||||
|
|
@ -81,7 +81,7 @@
|
|||
>
|
||||
<el-table-column label="工单编码" prop="code" width="220" fixed="left">
|
||||
<template #default="scope">
|
||||
<el-button link type="primary" @click="openWorkOrderDetail(scope.row.id)">
|
||||
<el-button link type="primary" @click="openForm('detail', scope.row.id)">
|
||||
{{ scope.row.code }}
|
||||
</el-button>
|
||||
</template>
|
||||
|
|
@ -120,9 +120,10 @@
|
|||
<el-table-column label="操作" align="center" width="160" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
v-if="scope.row.status === MesProWorkOrderStatusEnum.CONFIRMED"
|
||||
link
|
||||
type="primary"
|
||||
@click="openScheduleDrawer(scope.row)"
|
||||
@click="openForm('schedule', scope.row.id)"
|
||||
v-hasPermi="['mes:pro-task:create']"
|
||||
>
|
||||
排产
|
||||
|
|
@ -139,12 +140,10 @@
|
|||
/>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 排产 Drawer -->
|
||||
<ScheduleDrawer ref="scheduleDrawerRef" />
|
||||
<!-- 排产对话框（工单详情 + 工序步骤 + 任务列表） -->
|
||||
<WorkOrderForm2 ref="formRef" />
|
||||
<!-- 甘特图编辑 Dialog -->
|
||||
<GanttEdit ref="ganttEditRef" />
|
||||
<!-- 工单详情弹窗 -->
|
||||
<WorkOrderForm ref="workOrderFormRef" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
@ -158,8 +157,7 @@ import MdItemSelect from '@/views/mes/md/item/components/MdItemSelect.vue'
|
|||
import MdClientSelect from '@/views/mes/md/client/components/MdClientSelect.vue'
|
||||
import GanttChart from './components/GanttChart.vue'
|
||||
import GanttEdit from './GanttEdit.vue'
|
||||
import ScheduleDrawer from './ScheduleDrawer.vue'
|
||||
import WorkOrderForm from '@/views/mes/pro/workorder/WorkOrderForm.vue'
|
||||
import WorkOrderForm2 from './WorkOrderForm2.vue'
|
||||
|
||||
defineOptions({ name: 'MesProTask' })
|
||||
|
||||
|
|
@ -181,7 +179,6 @@ const queryParams = reactive({
|
|||
const queryFormRef = ref() // 搜索表单 ref
|
||||
|
||||
const ganttTasks = ref<any[]>([]) // 甘特图任务数据，格式与 ProTaskVO 相同，供 GanttChart 组件渲染
|
||||
const ganttPreviewRef = ref() // TODO @AI：是不是 ganttPreviewRef 可以去掉；
|
||||
|
||||
/** 查询待排产工单列表（支持父子工单树形展示） */
|
||||
const getWorkOrderList = async () => {
|
||||
|
|
@ -223,17 +220,10 @@ const resetQuery = () => {
|
|||
handleQuery()
|
||||
}
|
||||
|
||||
/** 打开排产 Drawer */
|
||||
// TODO @芋艿：这里的作用，需要在看看；
|
||||
const scheduleDrawerRef = ref()
|
||||
const openScheduleDrawer = (row: any) => {
|
||||
scheduleDrawerRef.value.open(row)
|
||||
}
|
||||
|
||||
/** 点击工单编码，查看工单详情 */
|
||||
const workOrderFormRef = ref()
|
||||
const openWorkOrderDetail = (id: number) => {
|
||||
workOrderFormRef.value.open('detail', id)
|
||||
/** 打开排产/详情对话框 */
|
||||
const formRef = ref()
|
||||
const openForm = (type: string, id: number) => {
|
||||
formRef.value.open(type, id)
|
||||
}
|
||||
|
||||
// TODO @芋艿：后续可以考虑把甘特图预览和编辑合并成一个组件，统一管理甘特图数据和刷新逻辑；
|
||||
|
|
|
|||
Loading…
Reference in New Issue