feat(energy): 实现加氢记录管理页面（含三步导入）
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
kkfluous
134
apps/web-antd/src/views/energy/hydrogen-record/data.ts
Normal file
134
apps/web-antd/src/views/energy/hydrogen-record/data.ts
Normal file
@@ -0,0 +1,134 @@
|
||||
import type { VbenFormSchema } from '#/adapter/form';
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
import type { EnergyHydrogenRecordApi } from '#/api/energy/hydrogen-record';
|
||||
|
||||
import { useActionColumn } from '#/utils/table';
|
||||
import { getRangePickerDefaultProps } from '#/utils';
|
||||
|
||||
export const SOURCE_TYPE_OPTIONS = [
|
||||
{ label: 'Excel导入', value: 1, color: 'blue' },
|
||||
{ label: 'API同步', value: 2, color: 'green' },
|
||||
{ label: '手动录入', value: 3, color: 'default' },
|
||||
];
|
||||
|
||||
export const MATCH_STATUS_OPTIONS = [
|
||||
{ label: '待匹配', value: 0, color: 'orange' },
|
||||
{ label: '已匹配', value: 1, color: 'green' },
|
||||
{ label: '匹配失败', value: 2, color: 'red' },
|
||||
];
|
||||
|
||||
/** 搜索表单 */
|
||||
export function useGridFormSchema(): VbenFormSchema[] {
|
||||
return [
|
||||
{
|
||||
fieldName: 'stationId',
|
||||
label: '加氢站',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: '请输入加氢站',
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'plateNumber',
|
||||
label: '车牌号',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: '请输入车牌号',
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'hydrogenDate',
|
||||
label: '加氢日期',
|
||||
component: 'RangePicker',
|
||||
componentProps: {
|
||||
...getRangePickerDefaultProps(),
|
||||
class: 'w-full',
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'matchStatus',
|
||||
label: '匹配状态',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: MATCH_STATUS_OPTIONS,
|
||||
placeholder: '请选择匹配状态',
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'sourceType',
|
||||
label: '数据来源',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: SOURCE_TYPE_OPTIONS,
|
||||
placeholder: '请选择数据来源',
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/** 表格列配置 */
|
||||
export function useGridColumns(): VxeTableGridOptions<EnergyHydrogenRecordApi.Record>['columns'] {
|
||||
return [
|
||||
{
|
||||
field: 'stationName',
|
||||
title: '站点名称',
|
||||
minWidth: 150,
|
||||
fixed: 'left',
|
||||
},
|
||||
{
|
||||
field: 'plateNumber',
|
||||
title: '车牌号',
|
||||
minWidth: 120,
|
||||
},
|
||||
{
|
||||
field: 'hydrogenDate',
|
||||
title: '加氢日期',
|
||||
minWidth: 120,
|
||||
formatter: 'formatDate',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
field: 'hydrogenQuantity',
|
||||
title: '加氢量(KG)',
|
||||
minWidth: 100,
|
||||
align: 'right',
|
||||
},
|
||||
{
|
||||
field: 'unitPrice',
|
||||
title: '单价',
|
||||
minWidth: 80,
|
||||
align: 'right',
|
||||
},
|
||||
{
|
||||
field: 'amount',
|
||||
title: '金额',
|
||||
minWidth: 100,
|
||||
align: 'right',
|
||||
},
|
||||
{
|
||||
field: 'mileage',
|
||||
title: '里程数',
|
||||
minWidth: 80,
|
||||
align: 'right',
|
||||
},
|
||||
{
|
||||
field: 'sourceType',
|
||||
title: '数据来源',
|
||||
minWidth: 100,
|
||||
align: 'center',
|
||||
slots: { default: 'sourceType' },
|
||||
},
|
||||
{
|
||||
field: 'matchStatus',
|
||||
title: '匹配状态',
|
||||
minWidth: 100,
|
||||
align: 'center',
|
||||
slots: { default: 'matchStatus' },
|
||||
},
|
||||
useActionColumn(2),
|
||||
];
|
||||
}
|
||||
184
apps/web-antd/src/views/energy/hydrogen-record/index.vue
Normal file
184
apps/web-antd/src/views/energy/hydrogen-record/index.vue
Normal file
@@ -0,0 +1,184 @@
|
||||
<script lang="ts" setup>
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
import type { EnergyHydrogenRecordApi } from '#/api/energy/hydrogen-record';
|
||||
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { Page } from '@vben/common-ui';
|
||||
import { downloadFileFromBlobPart } from '@vben/utils';
|
||||
|
||||
import { Tag, message } from 'ant-design-vue';
|
||||
|
||||
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import {
|
||||
batchMatch,
|
||||
deleteHydrogenRecord,
|
||||
exportHydrogenRecord,
|
||||
getHydrogenRecordPage,
|
||||
} from '#/api/energy/hydrogen-record';
|
||||
import { $t } from '#/locales';
|
||||
|
||||
import {
|
||||
MATCH_STATUS_OPTIONS,
|
||||
SOURCE_TYPE_OPTIONS,
|
||||
useGridColumns,
|
||||
useGridFormSchema,
|
||||
} from './data';
|
||||
import ImportModal from './modules/import-modal.vue';
|
||||
|
||||
const importModalRef = ref<InstanceType<typeof ImportModal>>();
|
||||
|
||||
/** 刷新表格 */
|
||||
function handleRefresh() {
|
||||
gridApi.query();
|
||||
}
|
||||
|
||||
/** 打开导入弹窗 */
|
||||
function handleImport() {
|
||||
importModalRef.value?.open();
|
||||
}
|
||||
|
||||
/** 导出 */
|
||||
async function handleExport() {
|
||||
const formValues = await gridApi.formApi?.getValues();
|
||||
const blob = await exportHydrogenRecord(formValues ?? {});
|
||||
downloadFileFromBlobPart({ fileName: '加氢记录.xlsx', source: blob });
|
||||
}
|
||||
|
||||
/** 批量匹配 */
|
||||
async function handleBatchMatch() {
|
||||
const hideLoading = message.loading({ content: '正在匹配...', duration: 0 });
|
||||
try {
|
||||
const result = await batchMatch();
|
||||
message.success(
|
||||
`匹配完成：成功 ${result.successCount} 条，失败 ${result.failCount} 条`,
|
||||
);
|
||||
handleRefresh();
|
||||
} finally {
|
||||
hideLoading();
|
||||
}
|
||||
}
|
||||
|
||||
/** 删除记录 */
|
||||
async function handleDelete(row: EnergyHydrogenRecordApi.Record) {
|
||||
await deleteHydrogenRecord(row.id!);
|
||||
message.success($t('ui.actionMessage.operationSuccess'));
|
||||
handleRefresh();
|
||||
}
|
||||
|
||||
const [Grid, gridApi] = useVbenVxeGrid({
|
||||
formOptions: {
|
||||
collapsed: true,
|
||||
schema: useGridFormSchema(),
|
||||
},
|
||||
gridOptions: {
|
||||
columns: useGridColumns(),
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, formValues) => {
|
||||
return await getHydrogenRecordPage({
|
||||
pageNo: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
...formValues,
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
isHover: true,
|
||||
},
|
||||
toolbarConfig: {
|
||||
refresh: true,
|
||||
search: true,
|
||||
},
|
||||
} as VxeTableGridOptions<EnergyHydrogenRecordApi.Record>,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page auto-content-height>
|
||||
<ImportModal ref="importModalRef" @success="handleRefresh" />
|
||||
<Grid table-title="加氢记录列表">
|
||||
<template #toolbar-tools>
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
label: 'Excel导入',
|
||||
type: 'primary',
|
||||
icon: ACTION_ICON.UPLOAD,
|
||||
auth: ['energy:hydrogen-record:import'],
|
||||
onClick: handleImport,
|
||||
},
|
||||
{
|
||||
label: $t('ui.actionTitle.export'),
|
||||
icon: ACTION_ICON.DOWNLOAD,
|
||||
auth: ['energy:hydrogen-record:export'],
|
||||
onClick: handleExport,
|
||||
},
|
||||
{
|
||||
label: '重新匹配',
|
||||
icon: ACTION_ICON.REFRESH,
|
||||
auth: ['energy:hydrogen-record:batch-match'],
|
||||
onClick: handleBatchMatch,
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
<template #sourceType="{ row }">
|
||||
<Tag
|
||||
v-if="row.sourceType != null"
|
||||
:color="
|
||||
SOURCE_TYPE_OPTIONS.find((o) => o.value === row.sourceType)?.color
|
||||
"
|
||||
>
|
||||
{{
|
||||
SOURCE_TYPE_OPTIONS.find((o) => o.value === row.sourceType)
|
||||
?.label ?? row.sourceType
|
||||
}}
|
||||
</Tag>
|
||||
<span v-else>—</span>
|
||||
</template>
|
||||
<template #matchStatus="{ row }">
|
||||
<Tag
|
||||
v-if="row.matchStatus != null"
|
||||
:color="
|
||||
MATCH_STATUS_OPTIONS.find((o) => o.value === row.matchStatus)?.color
|
||||
"
|
||||
>
|
||||
{{
|
||||
MATCH_STATUS_OPTIONS.find((o) => o.value === row.matchStatus)
|
||||
?.label ?? row.matchStatus
|
||||
}}
|
||||
</Tag>
|
||||
<span v-else>—</span>
|
||||
</template>
|
||||
<template #actions="{ row }">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
label: $t('common.edit'),
|
||||
type: 'link',
|
||||
icon: ACTION_ICON.EDIT,
|
||||
auth: ['energy:hydrogen-record:update'],
|
||||
onClick: () => {},
|
||||
},
|
||||
{
|
||||
label: $t('common.delete'),
|
||||
type: 'link',
|
||||
danger: true,
|
||||
icon: ACTION_ICON.DELETE,
|
||||
auth: ['energy:hydrogen-record:delete'],
|
||||
popConfirm: {
|
||||
title: $t('ui.actionMessage.deleteConfirm', [row.plateNumber]),
|
||||
confirm: handleDelete.bind(null, row),
|
||||
},
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</Grid>
|
||||
</Page>
|
||||
</template>
|
||||
@@ -0,0 +1,301 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref, onUnmounted } from 'vue';
|
||||
|
||||
import {
|
||||
Button,
|
||||
Modal,
|
||||
Progress,
|
||||
Radio,
|
||||
Select,
|
||||
Statistic,
|
||||
Steps,
|
||||
Table,
|
||||
Tag,
|
||||
Upload,
|
||||
message,
|
||||
} from 'ant-design-vue';
|
||||
import { InboxOutlined } from '@ant-design/icons-vue';
|
||||
|
||||
import {
|
||||
importPreview,
|
||||
importConfirm,
|
||||
getImportProgress,
|
||||
} from '#/api/energy/hydrogen-record';
|
||||
import type { EnergyHydrogenRecordApi } from '#/api/energy/hydrogen-record';
|
||||
import { getStationConfigSimpleList } from '#/api/energy/station-config';
|
||||
|
||||
const emit = defineEmits(['success']);
|
||||
|
||||
const visible = ref(false);
|
||||
const currentStep = ref(0);
|
||||
const loading = ref(false);
|
||||
|
||||
// Step 1 data
|
||||
const stationId = ref<number>();
|
||||
const stationOptions = ref<{ label: string; value: number }[]>([]);
|
||||
const fileList = ref<any[]>([]);
|
||||
|
||||
// Step 2 data
|
||||
const previewData = ref<EnergyHydrogenRecordApi.ImportPreview>();
|
||||
const duplicateStrategy = ref('skip');
|
||||
|
||||
// Step 3 data
|
||||
const progressData = ref<EnergyHydrogenRecordApi.ImportProgress>({
|
||||
current: 0,
|
||||
total: 0,
|
||||
status: '',
|
||||
});
|
||||
const importResult = ref<Record<string, number>>();
|
||||
let progressTimer: ReturnType<typeof setInterval> | null = null;
|
||||
|
||||
function open() {
|
||||
visible.value = true;
|
||||
currentStep.value = 0;
|
||||
stationId.value = undefined;
|
||||
fileList.value = [];
|
||||
previewData.value = undefined;
|
||||
duplicateStrategy.value = 'skip';
|
||||
progressData.value = { current: 0, total: 0, status: '' };
|
||||
importResult.value = undefined;
|
||||
loadStations();
|
||||
}
|
||||
|
||||
async function loadStations() {
|
||||
const list = await getStationConfigSimpleList();
|
||||
stationOptions.value = list.map((s) => ({
|
||||
label: s.stationName,
|
||||
value: s.stationId,
|
||||
}));
|
||||
}
|
||||
|
||||
// Step 1 -> Step 2: Upload and preview
|
||||
async function handleNextStep() {
|
||||
if (!stationId.value) {
|
||||
message.warning('请选择加氢站');
|
||||
return;
|
||||
}
|
||||
if (fileList.value.length === 0) {
|
||||
message.warning('请上传文件');
|
||||
return;
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
try {
|
||||
const file = fileList.value[0].originFileObj || fileList.value[0];
|
||||
const result = await importPreview(stationId.value, file);
|
||||
previewData.value = result;
|
||||
currentStep.value = 1;
|
||||
} catch (e: any) {
|
||||
message.error(e.message || '预览失败');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// Step 2 -> Step 3: Confirm import
|
||||
async function handleConfirmImport() {
|
||||
if (!previewData.value) return;
|
||||
loading.value = true;
|
||||
try {
|
||||
importResult.value = await importConfirm(
|
||||
previewData.value.batchNo,
|
||||
duplicateStrategy.value,
|
||||
);
|
||||
currentStep.value = 2;
|
||||
startProgressPolling();
|
||||
} catch (e: any) {
|
||||
message.error(e.message || '导入失败');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function startProgressPolling() {
|
||||
if (!previewData.value) return;
|
||||
const batchNo = previewData.value.batchNo;
|
||||
progressTimer = setInterval(async () => {
|
||||
try {
|
||||
const progress = await getImportProgress(batchNo);
|
||||
progressData.value = progress;
|
||||
if (
|
||||
progress.status === 'completed' ||
|
||||
progress.status === 'failed' ||
|
||||
progress.status === 'not_found'
|
||||
) {
|
||||
stopProgressPolling();
|
||||
}
|
||||
} catch {
|
||||
stopProgressPolling();
|
||||
}
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
function stopProgressPolling() {
|
||||
if (progressTimer) {
|
||||
clearInterval(progressTimer);
|
||||
progressTimer = null;
|
||||
}
|
||||
}
|
||||
|
||||
function handleClose() {
|
||||
stopProgressPolling();
|
||||
visible.value = false;
|
||||
if (currentStep.value === 2) {
|
||||
emit('success');
|
||||
}
|
||||
}
|
||||
|
||||
onUnmounted(() => stopProgressPolling());
|
||||
|
||||
// Preview table columns
|
||||
const previewColumns = [
|
||||
{ title: '行号', dataIndex: 'rowNum', width: 60 },
|
||||
{ title: '车牌号', dataIndex: 'plateNumber', width: 100 },
|
||||
{ title: '加氢日期', dataIndex: 'hydrogenDate', width: 100 },
|
||||
{ title: '加氢量(KG)', dataIndex: 'hydrogenQuantity', width: 100 },
|
||||
{ title: '单价', dataIndex: 'unitPrice', width: 80 },
|
||||
{ title: '金额', dataIndex: 'amount', width: 80 },
|
||||
{ title: '里程数', dataIndex: 'mileage', width: 80 },
|
||||
];
|
||||
|
||||
// Handle file before upload (prevent auto-upload)
|
||||
function beforeUpload(file: File) {
|
||||
fileList.value = [file];
|
||||
return false;
|
||||
}
|
||||
|
||||
defineExpose({ open });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal
|
||||
v-model:open="visible"
|
||||
title="Excel 批量导入"
|
||||
:width="800"
|
||||
:footer="null"
|
||||
:mask-closable="false"
|
||||
@cancel="handleClose"
|
||||
>
|
||||
<Steps :current="currentStep" class="mb-6">
|
||||
<Steps.Step title="上传文件" />
|
||||
<Steps.Step title="预览确认" />
|
||||
<Steps.Step title="导入结果" />
|
||||
</Steps>
|
||||
|
||||
<!-- Step 1: Upload -->
|
||||
<div v-if="currentStep === 0">
|
||||
<div class="mb-4">
|
||||
<label class="mb-2 block font-medium">选择加氢站</label>
|
||||
<Select
|
||||
v-model:value="stationId"
|
||||
:options="stationOptions"
|
||||
placeholder="请选择加氢站"
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
<Upload.Dragger
|
||||
:file-list="fileList"
|
||||
:before-upload="beforeUpload"
|
||||
:max-count="1"
|
||||
accept=".xlsx,.xls"
|
||||
>
|
||||
<p class="ant-upload-drag-icon"><InboxOutlined /></p>
|
||||
<p class="ant-upload-text">点击或拖拽文件到此区域上传</p>
|
||||
<p class="ant-upload-hint">支持 .xlsx, .xls 格式</p>
|
||||
</Upload.Dragger>
|
||||
<div class="mt-4 flex justify-between">
|
||||
<a href="javascript:void(0)">下载导入模板</a>
|
||||
<Button type="primary" :loading="loading" @click="handleNextStep">
|
||||
下一步
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 2: Preview -->
|
||||
<div v-if="currentStep === 1 && previewData">
|
||||
<div class="mb-4 flex gap-4">
|
||||
<Statistic title="总行数" :value="previewData.totalCount" />
|
||||
<Statistic
|
||||
title="有效"
|
||||
:value="previewData.validCount"
|
||||
class="text-green-600"
|
||||
/>
|
||||
<Statistic
|
||||
title="重复"
|
||||
:value="previewData.duplicateCount"
|
||||
class="text-orange-500"
|
||||
/>
|
||||
<Statistic
|
||||
title="错误"
|
||||
:value="previewData.errorCount"
|
||||
class="text-red-500"
|
||||
/>
|
||||
</div>
|
||||
<Table
|
||||
:data-source="[...previewData.records, ...previewData.duplicates]"
|
||||
:columns="previewColumns"
|
||||
:row-class-name="
|
||||
(record: any) => (record.isDuplicate ? 'bg-yellow-50' : '')
|
||||
"
|
||||
:pagination="false"
|
||||
:scroll="{ y: 300 }"
|
||||
size="small"
|
||||
row-key="rowNum"
|
||||
/>
|
||||
<div v-if="previewData.errors?.length" class="mt-2">
|
||||
<Tag color="red">{{ previewData.errors.length }} 条错误记录</Tag>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<Radio.Group v-model:value="duplicateStrategy">
|
||||
<Radio value="skip">跳过重复记录</Radio>
|
||||
<Radio value="overwrite">覆盖重复记录</Radio>
|
||||
</Radio.Group>
|
||||
</div>
|
||||
<div class="mt-4 flex justify-end gap-2">
|
||||
<Button @click="currentStep = 0">上一步</Button>
|
||||
<Button type="primary" :loading="loading" @click="handleConfirmImport">
|
||||
确认导入
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 3: Result -->
|
||||
<div v-if="currentStep === 2">
|
||||
<div class="py-8 text-center">
|
||||
<Progress
|
||||
:percent="
|
||||
progressData.total > 0
|
||||
? Math.round((progressData.current / progressData.total) * 100)
|
||||
: 0
|
||||
"
|
||||
:status="
|
||||
progressData.status === 'failed'
|
||||
? 'exception'
|
||||
: progressData.status === 'completed'
|
||||
? 'success'
|
||||
: 'active'
|
||||
"
|
||||
/>
|
||||
<div v-if="importResult" class="mt-4">
|
||||
<p>
|
||||
成功导入
|
||||
<span class="font-bold text-green-600">{{
|
||||
importResult.successCount
|
||||
}}</span>
|
||||
条
|
||||
</p>
|
||||
<p v-if="(importResult.failCount ?? 0) > 0">
|
||||
失败
|
||||
<span class="font-bold text-red-500">{{
|
||||
importResult.failCount
|
||||
}}</span>
|
||||
条
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<Button type="primary" @click="handleClose">关闭</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</template>
|
||||
Reference in New Issue
Block a user