From c3999819c99c5774616a664e049cb2552e543254 Mon Sep 17 00:00:00 2001
From: kkfluous <kkfluous@kdemacbook-air.local>
Date: Mon, 16 Mar 2026 01:27:31 +0800
Subject: [PATCH] =?UTF-8?q?feat(energy):=20=E5=AE=9E=E7=8E=B0=E5=8A=A0?=
 =?UTF-8?q?=E6=B0=A2=E8=AE=B0=E5=BD=95=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=EF=BC=88=E5=90=AB=E4=B8=89=E6=AD=A5=E5=AF=BC=E5=85=A5=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/views/energy/hydrogen-record/data.ts  | 134 ++++++++
 .../views/energy/hydrogen-record/index.vue    | 184 +++++++++++
 .../hydrogen-record/modules/import-modal.vue  | 301 ++++++++++++++++++
 3 files changed, 619 insertions(+)
 create mode 100644 apps/web-antd/src/views/energy/hydrogen-record/data.ts
 create mode 100644 apps/web-antd/src/views/energy/hydrogen-record/index.vue
 create mode 100644 apps/web-antd/src/views/energy/hydrogen-record/modules/import-modal.vue

diff --git a/apps/web-antd/src/views/energy/hydrogen-record/data.ts b/apps/web-antd/src/views/energy/hydrogen-record/data.ts
new file mode 100644
index 0000000..5589495
--- /dev/null
+++ b/apps/web-antd/src/views/energy/hydrogen-record/data.ts
@@ -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),
+  ];
+}
diff --git a/apps/web-antd/src/views/energy/hydrogen-record/index.vue b/apps/web-antd/src/views/energy/hydrogen-record/index.vue
new file mode 100644
index 0000000..953636f
--- /dev/null
+++ b/apps/web-antd/src/views/energy/hydrogen-record/index.vue
@@ -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>
diff --git a/apps/web-antd/src/views/energy/hydrogen-record/modules/import-modal.vue b/apps/web-antd/src/views/energy/hydrogen-record/modules/import-modal.vue
new file mode 100644
index 0000000..897c779
--- /dev/null
+++ b/apps/web-antd/src/views/energy/hydrogen-record/modules/import-modal.vue
@@ -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>