<script lang="ts" setup>
|
import type { WorkResultSummary } from '#/api/mes/pro/feedback';
|
|
import { onMounted, reactive, ref } from 'vue';
|
|
import { Page } from '@vben/common-ui';
|
import { DICT_TYPE } from '@vben/constants';
|
import { getDictOptions } from '@vben/hooks';
|
|
import {
|
Button,
|
Card,
|
Col,
|
DatePicker,
|
Row,
|
Select,
|
Space,
|
Table,
|
Tag,
|
} from 'ant-design-vue';
|
|
import { getFeedbackSummary } from '#/api/mes/pro/feedback';
|
|
defineOptions({ name: 'MesWorkResultSummary' });
|
|
const loading = ref(false);
|
const summary = ref<WorkResultSummary>({});
|
|
const queryForm = reactive<{
|
beginDate?: string;
|
endDate?: string;
|
workOrderType?: number;
|
}>({});
|
|
const workOrderTypeOptions = getDictOptions(
|
DICT_TYPE.MES_PRO_WORK_ORDER_TYPE,
|
'number',
|
).map((option) => ({ label: option.label, value: option.value as number }));
|
|
async function loadSummary() {
|
loading.value = true;
|
try {
|
summary.value = await getFeedbackSummary({
|
beginDate: queryForm.beginDate,
|
endDate: queryForm.endDate,
|
workOrderType: queryForm.workOrderType,
|
});
|
} finally {
|
loading.value = false;
|
}
|
}
|
|
function handleRangeChange(_: unknown, dateStrings: string[]) {
|
queryForm.beginDate = dateStrings[0] || undefined;
|
queryForm.endDate = dateStrings[1] || undefined;
|
}
|
|
function resetQuery() {
|
queryForm.beginDate = undefined;
|
queryForm.endDate = undefined;
|
queryForm.workOrderType = undefined;
|
loadSummary();
|
}
|
|
onMounted(loadSummary);
|
</script>
|
|
<template>
|
<Page>
|
<Card class="mb-4">
|
<Space wrap>
|
<DatePicker.RangePicker
|
:placeholder="['开始日期', '结束日期']"
|
value-format="YYYY-MM-DD"
|
@change="handleRangeChange"
|
/>
|
<Select
|
v-model:value="queryForm.workOrderType"
|
allow-clear
|
:options="workOrderTypeOptions"
|
placeholder="工单类型"
|
style="width: 160px"
|
/>
|
<Button type="primary" :loading="loading" @click="loadSummary">
|
查询
|
</Button>
|
<Button @click="resetQuery">重置</Button>
|
</Space>
|
</Card>
|
|
<Row :gutter="16" class="mb-4">
|
<Col :span="8">
|
<Card>
|
<div class="text-sm text-gray-500">累计报工数量</div>
|
<div class="mt-2 text-2xl font-bold">
|
{{ summary.totalFeedbackQuantity ?? 0 }}
|
</div>
|
</Card>
|
</Col>
|
<Col :span="8">
|
<Card>
|
<div class="text-sm text-gray-500">累计合格数量</div>
|
<div class="mt-2 text-2xl font-bold text-green-600">
|
{{ summary.totalQualifiedQuantity ?? 0 }}
|
</div>
|
</Card>
|
</Col>
|
<Col :span="8">
|
<Card>
|
<div class="text-sm text-gray-500">累计报工单数</div>
|
<div class="mt-2 text-2xl font-bold text-blue-600">
|
{{ summary.totalFeedbackCount ?? 0 }}
|
</div>
|
</Card>
|
</Col>
|
</Row>
|
|
<Card class="mb-4" title="按工单类型汇总">
|
<Table
|
row-key="workOrderType"
|
:data-source="summary.byType ?? []"
|
:loading="loading"
|
:pagination="false"
|
size="middle"
|
>
|
<Table.Column title="工单类型" data-index="workOrderTypeName">
|
<template #default="{ record }">
|
<Tag color="blue">{{ record.workOrderTypeName }}</Tag>
|
</template>
|
</Table.Column>
|
<Table.Column
|
title="报工数量"
|
data-index="feedbackQuantity"
|
align="right"
|
/>
|
<Table.Column
|
title="合格数量"
|
data-index="qualifiedQuantity"
|
align="right"
|
/>
|
<Table.Column title="报工单数" data-index="feedbackCount" align="right" />
|
</Table>
|
</Card>
|
|
<Card title="按日期汇总">
|
<Table
|
row-key="date"
|
:data-source="summary.byDate ?? []"
|
:loading="loading"
|
:pagination="false"
|
size="middle"
|
>
|
<Table.Column title="日期" data-index="date" />
|
<Table.Column
|
title="报工数量"
|
data-index="feedbackQuantity"
|
align="right"
|
/>
|
<Table.Column
|
title="合格数量"
|
data-index="qualifiedQuantity"
|
align="right"
|
/>
|
<Table.Column title="报工单数" data-index="feedbackCount" align="right" />
|
</Table>
|
</Card>
|
</Page>
|
</template>
|
