<script lang="ts" setup>
|
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
import type { MesProFeedbackApi } from '#/api/mes/pro/feedback';
|
|
import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
|
|
import {
|
DICT_TYPE,
|
MesProFeedbackStatusEnum,
|
} from '@vben/constants';
|
import { useVbenModal } from '@vben/common-ui';
|
|
import { Button, message, Popconfirm, Space } from 'ant-design-vue';
|
|
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
import {
|
approveFeedback,
|
deleteFeedback,
|
getFeedbackPage,
|
rejectFeedback,
|
submitFeedback,
|
} from '#/api/mes/pro/feedback';
|
import { $t } from '#/locales';
|
|
import FeedbackForm from '../../../pro/feedback/modules/form.vue';
|
|
defineOptions({ name: 'WorkbenchFeedbackHistoryTab' });
|
|
const props = defineProps<{
|
taskId?: number;
|
/** 外部触发刷新 */
|
refreshKey?: number;
|
}>();
|
|
const emit = defineEmits<{ reported: [] }>();
|
|
const [FormModal, formModalApi] = useVbenModal({
|
connectedComponent: FeedbackForm,
|
destroyOnClose: true,
|
});
|
|
/** 查看详情 */
|
function handleDetail(row: MesProFeedbackApi.Feedback) {
|
formModalApi.setData({ formType: 'detail', id: row.id }).open();
|
}
|
|
/** 编辑（仅草稿） */
|
function handleEdit(row: MesProFeedbackApi.Feedback) {
|
formModalApi.setData({ formType: 'update', id: row.id }).open();
|
}
|
|
/** 删除（仅草稿） */
|
async function handleDelete(row: MesProFeedbackApi.Feedback) {
|
await deleteFeedback(row.id!);
|
message.success('删除成功');
|
refreshGrid();
|
emit('reported');
|
}
|
|
/** 提交（仅草稿） */
|
async function handleSubmit(row: MesProFeedbackApi.Feedback) {
|
await submitFeedback(row.id!);
|
message.success('报工单已提交');
|
refreshGrid();
|
emit('reported');
|
}
|
|
/** 审批通过（仅审批中） */
|
async function handleApprove(row: MesProFeedbackApi.Feedback) {
|
const finished = await approveFeedback(row.id!);
|
message.success(
|
finished ? '报工单已审批完成' : '报工成功，请等待质量检验完成！',
|
);
|
refreshGrid();
|
emit('reported');
|
}
|
|
/** 驳回（仅审批中） */
|
async function handleReject(row: MesProFeedbackApi.Feedback) {
|
await rejectFeedback(row.id!);
|
message.success('报工单已驳回');
|
refreshGrid();
|
emit('reported');
|
}
|
|
/** 状态常量供模板使用 */
|
const STATUS_PREPARE = MesProFeedbackStatusEnum.PREPARE;
|
const STATUS_APPROVING = MesProFeedbackStatusEnum.APPROVING;
|
|
const gridHeight = ref(300);
|
const gridContainerRef = ref<HTMLElement>();
|
let resizeObserver: ResizeObserver | null = null;
|
|
const [Grid, gridApi] = useVbenVxeGrid({
|
gridOptions: {
|
columns: [
|
{
|
field: 'code',
|
title: '报订单号',
|
width: 160,
|
slots: { default: 'code' },
|
},
|
{ field: 'workOrderCode', title: '工单编码', width: 140 },
|
{ field: 'processName', title: '工序', width: 100 },
|
{ field: 'itemName', title: '产品', minWidth: 120 },
|
{ field: 'feedbackQuantity', title: '报工数量', width: 100 },
|
{ field: 'qualifiedQuantity', title: '合格品', width: 90 },
|
{ field: 'unqualifiedQuantity', title: '不良品', width: 90 },
|
{ field: 'feedbackUserNickname', title: '报工人', width: 100 },
|
{ field: 'approveUserNickname', title: '审核人', width: 100 },
|
{
|
field: 'status',
|
title: '状态',
|
width: 100,
|
cellRender: {
|
name: 'CellDict',
|
props: { type: DICT_TYPE.MES_PRO_FEEDBACK_STATUS },
|
},
|
},
|
{
|
field: 'feedbackTime',
|
title: '报工时间',
|
width: 170,
|
formatter: 'formatDateTime',
|
},
|
{
|
title: '操作',
|
width: 260,
|
fixed: 'right',
|
slots: { default: 'actions' },
|
},
|
],
|
height: gridHeight.value,
|
keepSource: true,
|
proxyConfig: {
|
ajax: {
|
query: async ({ page }) => {
|
if (!props.taskId) {
|
return { list: [], total: 0 };
|
}
|
return await getFeedbackPage({
|
taskId: props.taskId,
|
pageNo: page.currentPage,
|
pageSize: page.pageSize,
|
});
|
},
|
},
|
},
|
rowConfig: { isHover: true, keyField: 'id' },
|
toolbarConfig: { refresh: true },
|
} as VxeTableGridOptions<MesProFeedbackApi.Feedback>,
|
});
|
|
function updateGridHeight() {
|
if (gridContainerRef.value) {
|
const h = gridContainerRef.value.clientHeight;
|
if (h > 100 && h !== gridHeight.value) {
|
gridHeight.value = h;
|
gridApi.setGridOptions({ height: h });
|
}
|
}
|
}
|
|
onMounted(() => {
|
nextTick(() => {
|
updateGridHeight();
|
if (gridContainerRef.value) {
|
resizeObserver = new ResizeObserver(() => updateGridHeight());
|
resizeObserver.observe(gridContainerRef.value);
|
}
|
});
|
});
|
|
onBeforeUnmount(() => {
|
resizeObserver?.disconnect();
|
resizeObserver = null;
|
});
|
|
function refreshGrid() {
|
gridApi.query();
|
}
|
|
// 监听 taskId 变化刷新
|
watch(
|
() => props.taskId,
|
() => {
|
if (props.taskId) {
|
gridApi.query();
|
}
|
},
|
);
|
|
// 监听外部 refreshKey 变化刷新
|
watch(
|
() => props.refreshKey,
|
() => {
|
gridApi.query();
|
},
|
);
|
</script>
|
|
<template>
|
<div class="feedback-history-tab">
|
<FormModal @success="refreshGrid" />
|
|
<div v-if="!taskId" class="feedback-history-tab__empty">
|
请从左侧工单列表选择一条任务查看报工记录
|
</div>
|
|
<div v-else ref="gridContainerRef" class="feedback-history-tab__grid">
|
<Grid table-title="报工记录">
|
<template #code="{ row }">
|
<Button type="link" @click="handleDetail(row)">
|
{{ row.code }}
|
</Button>
|
</template>
|
<template #actions="{ row }">
|
<Space :size="4" wrap>
|
<Button type="link" size="small" @click="handleDetail(row)">
|
查看
|
</Button>
|
<!-- 草稿：编辑、删除、提交 -->
|
<Button
|
v-if="row.status === STATUS_PREPARE"
|
type="link"
|
size="small"
|
@click="handleEdit(row)"
|
>
|
编辑
|
</Button>
|
<Popconfirm
|
v-if="row.status === STATUS_PREPARE"
|
title="确认提交该报工单？提交后将不能修改。"
|
@confirm="handleSubmit(row)"
|
>
|
<Button type="link" size="small">
|
提交
|
</Button>
|
</Popconfirm>
|
<Popconfirm
|
v-if="row.status === STATUS_PREPARE"
|
title="确认删除该报工单？"
|
@confirm="handleDelete(row)"
|
>
|
<Button type="link" size="small" danger>
|
删除
|
</Button>
|
</Popconfirm>
|
<!-- 审批中：审批通过、驳回 -->
|
<Popconfirm
|
v-if="row.status === STATUS_APPROVING"
|
title="确认审批通过该报工单？"
|
@confirm="handleApprove(row)"
|
>
|
<Button type="link" size="small">
|
审批通过
|
</Button>
|
</Popconfirm>
|
<Popconfirm
|
v-if="row.status === STATUS_APPROVING"
|
title="确认驳回该报工单？"
|
@confirm="handleReject(row)"
|
>
|
<Button type="link" size="small" danger>
|
驳回
|
</Button>
|
</Popconfirm>
|
</Space>
|
</template>
|
</Grid>
|
</div>
|
</div>
|
</template>
|
|
<style lang="scss" scoped>
|
.feedback-history-tab {
|
padding: 16px 20px;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
overflow: hidden;
|
}
|
|
.feedback-history-tab__grid {
|
flex: 1;
|
min-height: 0;
|
overflow: hidden;
|
}
|
|
.feedback-history-tab__empty {
|
padding: 64px 0;
|
text-align: center;
|
color: #8c8c8c;
|
font-size: 16px;
|
}
|
</style>
|
