|
|
@@ -79,10 +79,15 @@
|
|
|
border
|
|
|
stripe
|
|
|
row-key="rowKey"
|
|
|
- style="width: 100%"
|
|
|
+ style="width: 100%;height: 65vh;"
|
|
|
:row-style="{ height: '32px' }"
|
|
|
:header-row-style="{ height: '36px' }"
|
|
|
:span-method="tableSpanMethod"
|
|
|
+ :row-class-name="processTableRowClassName"
|
|
|
+ :cell-style="processTableCellStyle"
|
|
|
+ @row-click="onProcessTableRowClick"
|
|
|
+ @row-mouseenter="onProcessTableRowMouseEnter"
|
|
|
+ @row-mouseleave="onProcessTableRowMouseLeave"
|
|
|
:summary-method="tableSummaryMethod"
|
|
|
show-summary
|
|
|
show-overflow-tooltip
|
|
|
@@ -112,9 +117,9 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column label="工序编号" prop="工序号" width="100" align="center" />
|
|
|
+ <el-table-column label="工序编号" prop="工序号" width="90" align="center" />
|
|
|
<el-table-column label="工序名称" prop="工序名称" min-width="280" align="left" show-overflow-tooltip />
|
|
|
- <el-table-column label="员工姓名" prop="员工姓名" width="120" align="left">
|
|
|
+ <el-table-column label="员工姓名" prop="员工姓名" width="110" align="left">
|
|
|
<template #header>
|
|
|
<div class="process-production-col-header">
|
|
|
<span>员工姓名</span>
|
|
|
@@ -139,9 +144,9 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column label="完工数量" prop="数量" width="90" align="center" />
|
|
|
- <el-table-column v-if="!hideAmountColumns" label="工分" prop="工分" width="100" align="center" />
|
|
|
- <el-table-column v-if="!hideAmountColumns" label="工时" prop="工时" width="100" align="center" />
|
|
|
+ <el-table-column label="数量" prop="数量" width="90" align="center" />
|
|
|
+ <el-table-column v-if="!hideAmountColumns" label="定额分" prop="工分" width="100" align="center" />
|
|
|
+ <el-table-column v-if="!hideAmountColumns" label="标准总工时（秒）" prop="工时" width="150" align="center" />
|
|
|
<el-table-column v-if="!hideAmountColumns" label="工资" prop="工资" width="100" align="center" />
|
|
|
<el-table-column label="开工日期" prop="开工日期" width="110" align="center">
|
|
|
<template #header>
|
|
|
@@ -307,10 +312,17 @@ const pickGroupFromStaff = (staff) =>
|
|
|
staff?.小组 ?? staff?.group ?? staff?.['设备编组'] ?? staff?.['设备编号'] ?? staff?.team_name ?? ''
|
|
|
).trim()
|
|
|
|
|
|
+const pickStaffListFromProcess = (proc) => {
|
|
|
+ if (Array.isArray(proc?.staffs)) return proc.staffs
|
|
|
+ if (Array.isArray(proc?.员工列表)) return proc.员工列表
|
|
|
+ if (Array.isArray(proc?.staff_list)) return proc.staff_list
|
|
|
+ return []
|
|
|
+}
|
|
|
+
|
|
|
const flattenProcessList = (processList = []) => {
|
|
|
const rows = []
|
|
|
for (const proc of processList) {
|
|
|
- const staffs = Array.isArray(proc.staffs) ? proc.staffs : []
|
|
|
+ const staffs = pickStaffListFromProcess(proc)
|
|
|
if (!staffs.length) {
|
|
|
rows.push({
|
|
|
rowKey: `${proc.工序号}-empty`,
|
|
|
@@ -325,6 +337,7 @@ const flattenProcessList = (processList = []) => {
|
|
|
工时: '',
|
|
|
工资: '',
|
|
|
_processRowSpan: 1,
|
|
|
+ _groupRowSpan: 1,
|
|
|
})
|
|
|
continue
|
|
|
}
|
|
|
@@ -338,10 +351,11 @@ const flattenProcessList = (processList = []) => {
|
|
|
数量: staff.数量 ?? '',
|
|
|
开工日期: staff.开工日期 ?? '',
|
|
|
完工日期: staff.完工日期 ?? '',
|
|
|
- 工分: staff.工分 ?? '',
|
|
|
+ 工分: staff.工分 ?? staff.金额 ?? '',
|
|
|
工时: staff.工时 ?? '',
|
|
|
工资: staff.工资 ?? '',
|
|
|
_processRowSpan: index === 0 ? staffs.length : 0,
|
|
|
+ _groupRowSpan: 1,
|
|
|
})
|
|
|
})
|
|
|
}
|
|
|
@@ -366,8 +380,9 @@ const syncCheckboxFilterAfterDataChange = (options, selectedRef) => {
|
|
|
}
|
|
|
|
|
|
const applyCheckboxColumnFilter = (rows, options, selected, getValue) => {
|
|
|
+ if (!options.length) return rows
|
|
|
if (!selected.length) return []
|
|
|
- if (!options.length || selected.length >= options.length) return rows
|
|
|
+ if (selected.length >= options.length) return rows
|
|
|
const set = new Set(selected)
|
|
|
return rows.filter((row) => {
|
|
|
const val = getValue(row)
|
|
|
@@ -460,8 +475,14 @@ const recomputeProcessRowSpan = (rows) => {
|
|
|
j++
|
|
|
}
|
|
|
const group = rows.slice(i, j)
|
|
|
+ const groupName = String(group[0].小组 || '').trim()
|
|
|
+ const mergeGroup = groupName && group.every((r) => String(r.小组 || '').trim() === groupName)
|
|
|
group.forEach((row, idx) => {
|
|
|
- result.push({ ...row, _processRowSpan: idx === 0 ? group.length : 0 })
|
|
|
+ result.push({
|
|
|
+ ...row,
|
|
|
+ _processRowSpan: idx === 0 ? group.length : 0,
|
|
|
+ _groupRowSpan: mergeGroup ? (idx === 0 ? group.length : 0) : 1,
|
|
|
+ })
|
|
|
})
|
|
|
i = j
|
|
|
}
|
|
|
@@ -477,14 +498,71 @@ const displayTableData = computed(() => {
|
|
|
return recomputeProcessRowSpan(filtered)
|
|
|
})
|
|
|
|
|
|
+const resetAllColumnFilters = () => {
|
|
|
+ selectAllGroupFilter()
|
|
|
+ selectAllStaffNameFilter()
|
|
|
+ selectAllStartDateFilter()
|
|
|
+ selectAllFinishDateFilter()
|
|
|
+}
|
|
|
+
|
|
|
+const getProcessKey = (row) => `${row?.工序号 ?? ''}||${row?.工序名称 ?? ''}`
|
|
|
+
|
|
|
+const activeProcessKey = ref('')
|
|
|
+const hoveredProcessKey = ref('')
|
|
|
+
|
|
|
watch(flatTableRows, () => {
|
|
|
- syncGroupFilterAfterDataChange()
|
|
|
- syncStaffNameFilterAfterDataChange()
|
|
|
- syncStartDateFilterAfterDataChange()
|
|
|
- syncFinishDateFilterAfterDataChange()
|
|
|
+ resetAllColumnFilters()
|
|
|
+ activeProcessKey.value = ''
|
|
|
+ hoveredProcessKey.value = ''
|
|
|
+})
|
|
|
+
|
|
|
+const onProcessTableRowClick = (row) => {
|
|
|
+ activeProcessKey.value = getProcessKey(row)
|
|
|
+}
|
|
|
+
|
|
|
+const onProcessTableRowMouseEnter = (row) => {
|
|
|
+ hoveredProcessKey.value = getProcessKey(row)
|
|
|
+}
|
|
|
+
|
|
|
+const onProcessTableRowMouseLeave = () => {
|
|
|
+ hoveredProcessKey.value = ''
|
|
|
+}
|
|
|
+
|
|
|
+const isProcessRowHighlighted = (row, activeKey, hoverKey) => {
|
|
|
+ const key = getProcessKey(row)
|
|
|
+ return (activeKey && key === activeKey) || (hoverKey && key === hoverKey)
|
|
|
+}
|
|
|
+
|
|
|
+const processTableRowClassName = computed(() => {
|
|
|
+ const activeKey = activeProcessKey.value
|
|
|
+ const hoverKey = hoveredProcessKey.value
|
|
|
+ return ({ row }) => {
|
|
|
+ if (isProcessRowHighlighted(row, activeKey, hoverKey)) {
|
|
|
+ return activeKey && getProcessKey(row) === activeKey
|
|
|
+ ? 'process-production-row-active'
|
|
|
+ : 'process-production-row-hover'
|
|
|
+ }
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+const processTableCellStyle = computed(() => {
|
|
|
+ const activeKey = activeProcessKey.value
|
|
|
+ const hoverKey = hoveredProcessKey.value
|
|
|
+ return ({ row }) => {
|
|
|
+ if (isProcessRowHighlighted(row, activeKey, hoverKey)) {
|
|
|
+ return { backgroundColor: '#ff80ff' }
|
|
|
+ }
|
|
|
+ return {}
|
|
|
+ }
|
|
|
})
|
|
|
|
|
|
const tableSpanMethod = ({ row, column }) => {
|
|
|
+ if (column.property === '小组') {
|
|
|
+ const rowspan = row._groupRowSpan ?? 1
|
|
|
+ if (rowspan > 0) return { rowspan, colspan: 1 }
|
|
|
+ return { rowspan: 0, colspan: 0 }
|
|
|
+ }
|
|
|
if (column.property !== '工序号' && column.property !== '工序名称') {
|
|
|
return { rowspan: 1, colspan: 1 }
|
|
|
}
|
|
|
@@ -648,7 +726,11 @@ const executeProductionSearch = async (orderNo) => {
|
|
|
}
|
|
|
|
|
|
const data = res.data || {}
|
|
|
+ applyOrderSummaryFromWorkOrder(data, workorder)
|
|
|
processListRaw.value = data.工序列表 || []
|
|
|
+ resetAllColumnFilters()
|
|
|
+ activeProcessKey.value = ''
|
|
|
+ hoveredProcessKey.value = ''
|
|
|
if (!processListRaw.value.length) {
|
|
|
pageHint.value = '未找到报工数据'
|
|
|
}
|
|
|
@@ -830,6 +912,17 @@ defineExpose({ loadByWorkorder })
|
|
|
background: #fafafa;
|
|
|
}
|
|
|
|
|
|
+/* 合并单元格时按工序组整组高亮，同工序多员工行同步着色 */
|
|
|
+.process-production-table-wrap :deep(.el-table__body tr.process-production-row-active > td.el-table__cell),
|
|
|
+.process-production-table-wrap :deep(.el-table__body tr.process-production-row-active.el-table__row--striped > td.el-table__cell) {
|
|
|
+ background-color: #ff80ff !important;
|
|
|
+}
|
|
|
+
|
|
|
+.process-production-table-wrap :deep(.el-table__body tr.process-production-row-hover > td.el-table__cell),
|
|
|
+.process-production-table-wrap :deep(.el-table__body tr.process-production-row-hover.el-table__row--striped > td.el-table__cell) {
|
|
|
+ background-color: #ff80ff !important;
|
|
|
+}
|
|
|
+
|
|
|
.process-production-col-header {
|
|
|
display: inline-flex;
|
|
|
align-items: center;
|
