| | |
| | | const props = defineProps<{ |
| | | /** 当前工单编号 */ |
| | | workOrderId?: number; |
| | | /** 当前工作站编号 */ |
| | | workstationId?: number; |
| | | }>(); |
| | | |
| | | // --- 模式 --- |
| | |
| | | try { |
| | | const result = await getWorkOrderParamRecordPage({ |
| | | workOrderId: props.workOrderId, |
| | | workstationId: props.workstationId, |
| | | pageNo: 1, |
| | | pageSize: 100, |
| | | }); |
| | |
| | | } |
| | | } |
| | | |
| | | // 工单变更时加载记录 |
| | | // 工单或工作站变更时加载记录 |
| | | watch( |
| | | () => props.workOrderId, |
| | | () => [props.workOrderId, props.workstationId], |
| | | () => { |
| | | handleCancelForm(); |
| | | refreshRecordList(); |
| | | }, |
| | | { immediate: true }, |
| | | ); |
| | | |
| | | /** 格式化参数值展示 */ |
| | | function formatParamDisplay(detail: MesProWorkOrderParamRecordApi.ParamRecordDetail) { |
| | | const unit = detail.unitMeasureName ? ` ${detail.unitMeasureName}` : ''; |
| | | return `${detail.paramName}: ${detail.paramValue ?? '-'}${unit}`; |
| | | } |
| | | </script> |
| | | |
| | | <template> |
| | |
| | | <!-- 无工单提示 --> |
| | | <div v-if="!workOrderId" class="record-param-tab__empty"> |
| | | <IconifyIcon icon="lucide:alert-circle" class="record-param-tab__empty-icon" /> |
| | | <p>请先从左侧选择一条工单任务</p> |
| | | <p>请先选择工作站和工单任务</p> |
| | | </div> |
| | | |
| | | <!-- 空列表 --> |
| | |
| | | 备注:{{ record.remark }} |
| | | </div> |
| | | <div class="record-param-tab__card-params"> |
| | | <span |
| | | <div |
| | | v-for="d in record.details" |
| | | :key="d.id" |
| | | class="record-param-tab__param-tag" |
| | | class="record-param-tab__param-row" |
| | | > |
| | | {{ formatParamDisplay(d) }} |
| | | </span> |
| | | <span class="record-param-tab__param-name">{{ d.paramName }}</span> |
| | | <span class="record-param-tab__param-value"> |
| | | {{ d.paramValue ?? '-' }}<span v-if="d.unitMeasureName" class="record-param-tab__param-unit"> {{ d.unitMeasureName }}</span> |
| | | </span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | } |
| | | |
| | | .record-param-tab__card-params { |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | gap: 6px; |
| | | display: grid; |
| | | grid-template-columns: repeat(3, 1fr); |
| | | gap: 4px 16px; |
| | | margin-top: 8px; |
| | | } |
| | | |
| | | .record-param-tab__param-tag { |
| | | display: inline-flex; |
| | | align-items: center; |
| | | padding: 3px 10px; |
| | | border-radius: 4px; |
| | | .record-param-tab__param-row { |
| | | display: flex; |
| | | align-items: baseline; |
| | | gap: 8px; |
| | | font-size: 13px; |
| | | line-height: 1.6; |
| | | padding: 2px 0; |
| | | } |
| | | |
| | | .record-param-tab__param-name { |
| | | flex-shrink: 0; |
| | | color: #8c8c8c; |
| | | min-width: 100px; |
| | | |
| | | &::after { |
| | | content: ':'; |
| | | } |
| | | } |
| | | |
| | | .record-param-tab__param-value { |
| | | color: #1a1a1a; |
| | | font-weight: 500; |
| | | } |
| | | |
| | | .record-param-tab__param-unit { |
| | | color: #8c8c8c; |
| | | font-size: 12px; |
| | | background: #f6ffed; |
| | | color: #389e0d; |
| | | border: 1px solid #d9f7be; |
| | | } |
| | | </style> |