From 12d19c93e9abacb18312969326b8ff1896b0b8af Mon Sep 17 00:00:00 2001
From: kkfluous <kkfluous@kdemacbook-air.local>
Date: Mon, 16 Mar 2026 01:30:34 +0800
Subject: [PATCH] =?UTF-8?q?feat(energy):=20=E5=AE=9E=E7=8E=B0=E5=8A=A0?=
 =?UTF-8?q?=E6=B0=A2=E6=98=8E=E7=BB=86=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=EF=BC=88=E5=90=AB=E5=AE=A1=E6=A0=B8=E5=BC=B9=E7=AA=97=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-detail/data.ts  | 181 +++++++++++++++
 .../views/energy/hydrogen-detail/index.vue    | 216 ++++++++++++++++++
 .../hydrogen-detail/modules/audit-modal.vue   | 108 +++++++++
 3 files changed, 505 insertions(+)
 create mode 100644 apps/web-antd/src/views/energy/hydrogen-detail/data.ts
 create mode 100644 apps/web-antd/src/views/energy/hydrogen-detail/index.vue
 create mode 100644 apps/web-antd/src/views/energy/hydrogen-detail/modules/audit-modal.vue

diff --git a/apps/web-antd/src/views/energy/hydrogen-detail/data.ts b/apps/web-antd/src/views/energy/hydrogen-detail/data.ts
new file mode 100644
index 0000000..d738ad7
--- /dev/null
+++ b/apps/web-antd/src/views/energy/hydrogen-detail/data.ts
@@ -0,0 +1,181 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { EnergyHydrogenDetailApi } from '#/api/energy/hydrogen-detail';
+
+import { useActionColumn } from '#/utils/table';
+import { getRangePickerDefaultProps } from '#/utils';
+
+export const AUDIT_STATUS_OPTIONS = [
+  { label: '待审核', value: 0, color: 'orange' },
+  { label: '已审核', value: 1, color: 'green' },
+  { label: '审核驳回', value: 2, color: 'red' },
+];
+
+export const DEDUCTION_STATUS_OPTIONS = [
+  { label: '未扣款', value: 0, color: 'default' },
+  { label: '已扣款', value: 1, color: 'green' },
+  { label: '扣款失败', value: 2, color: 'red' },
+];
+
+export const SETTLEMENT_STATUS_OPTIONS = [
+  { label: '未结算', value: 0, color: 'default' },
+  { label: '已结算', value: 1, color: 'green' },
+];
+
+/** 搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'stationName',
+      label: '加氢站',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入加氢站',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'customerName',
+      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: 'auditStatus',
+      label: '审核状态',
+      component: 'Select',
+      componentProps: {
+        options: AUDIT_STATUS_OPTIONS,
+        placeholder: '请选择审核状态',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'deductionStatus',
+      label: '扣款状态',
+      component: 'Select',
+      componentProps: {
+        options: DEDUCTION_STATUS_OPTIONS,
+        placeholder: '请选择扣款状态',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'settlementStatus',
+      label: '结算状态',
+      component: 'Select',
+      componentProps: {
+        options: SETTLEMENT_STATUS_OPTIONS,
+        placeholder: '请选择结算状态',
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 表格列配置 */
+export function useGridColumns(): VxeTableGridOptions<EnergyHydrogenDetailApi.Detail>['columns'] {
+  return [
+    {
+      type: 'checkbox',
+      width: 60,
+      fixed: 'left',
+    },
+    {
+      field: 'stationName',
+      title: '加氢站',
+      minWidth: 150,
+      fixed: 'left',
+    },
+    {
+      field: 'customerName',
+      title: '客户名称',
+      minWidth: 150,
+    },
+    {
+      field: 'plateNumber',
+      title: '车牌号',
+      minWidth: 120,
+    },
+    {
+      field: 'hydrogenDate',
+      title: '加氢日期',
+      minWidth: 120,
+      formatter: 'formatDate',
+      align: 'center',
+    },
+    {
+      field: 'hydrogenQuantity',
+      title: '加氢量',
+      minWidth: 80,
+      align: 'right',
+    },
+    {
+      field: 'costPrice',
+      title: '成本单价',
+      minWidth: 80,
+      align: 'right',
+    },
+    {
+      field: 'costAmount',
+      title: '成本金额',
+      minWidth: 100,
+      align: 'right',
+    },
+    {
+      field: 'customerPrice',
+      title: '对客单价',
+      minWidth: 80,
+      align: 'right',
+    },
+    {
+      field: 'customerAmount',
+      title: '对客金额',
+      minWidth: 100,
+      align: 'right',
+    },
+    {
+      field: 'auditStatus',
+      title: '审核状态',
+      minWidth: 100,
+      align: 'center',
+      slots: { default: 'auditStatus' },
+    },
+    {
+      field: 'deductionStatus',
+      title: '扣款状态',
+      minWidth: 100,
+      align: 'center',
+      slots: { default: 'deductionStatus' },
+    },
+    {
+      field: 'settlementStatus',
+      title: '结算状态',
+      minWidth: 100,
+      align: 'center',
+      slots: { default: 'settlementStatus' },
+    },
+    useActionColumn(2),
+  ];
+}
diff --git a/apps/web-antd/src/views/energy/hydrogen-detail/index.vue b/apps/web-antd/src/views/energy/hydrogen-detail/index.vue
new file mode 100644
index 0000000..e3301c6
--- /dev/null
+++ b/apps/web-antd/src/views/energy/hydrogen-detail/index.vue
@@ -0,0 +1,216 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { EnergyHydrogenDetailApi } from '#/api/energy/hydrogen-detail';
+
+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 {
+  exportHydrogenDetail,
+  getHydrogenDetailPage,
+} from '#/api/energy/hydrogen-detail';
+import { $t } from '#/locales';
+
+import {
+  AUDIT_STATUS_OPTIONS,
+  DEDUCTION_STATUS_OPTIONS,
+  SETTLEMENT_STATUS_OPTIONS,
+  useGridColumns,
+  useGridFormSchema,
+} from './data';
+import AuditModal from './modules/audit-modal.vue';
+
+const auditModalRef = ref<InstanceType<typeof AuditModal>>();
+const checkedRecords = ref<EnergyHydrogenDetailApi.Detail[]>([]);
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出 */
+async function handleExport() {
+  const formValues = await gridApi.formApi?.getValues();
+  const blob = await exportHydrogenDetail(formValues ?? {});
+  downloadFileFromBlobPart({ fileName: '加氢明细.xlsx', source: blob });
+}
+
+/** 批量审核 */
+function handleBatchAudit() {
+  const selected = checkedRecords.value.filter((r) => r.auditStatus === 0);
+  if (selected.length === 0) {
+    message.warning('请选择待审核记录');
+    return;
+  }
+  auditModalRef.value?.open(selected);
+}
+
+/** 单条审核 */
+function handleAudit(row: EnergyHydrogenDetailApi.Detail) {
+  auditModalRef.value?.open([row]);
+}
+
+/** 编辑（占位） */
+function handleEdit(_row: EnergyHydrogenDetailApi.Detail) {
+  // TODO: open edit modal
+}
+
+/** 查看（占位） */
+function handleView(_row: EnergyHydrogenDetailApi.Detail) {
+  // TODO: open view modal
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    collapsed: true,
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    checkboxConfig: {
+      reserve: true,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getHydrogenDetailPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+    onCheckboxChange: ({ records }) => {
+      checkedRecords.value = records;
+    },
+    onCheckboxAll: ({ records }) => {
+      checkedRecords.value = records;
+    },
+  } as VxeTableGridOptions<EnergyHydrogenDetailApi.Detail>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <AuditModal ref="auditModalRef" @success="handleRefresh" />
+    <Grid table-title="加氢明细列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: '批量审核',
+              type: 'primary',
+              icon: ACTION_ICON.AUDIT,
+              disabled: checkedRecords.length === 0,
+              auth: ['energy:hydrogen-detail:update'],
+              onClick: handleBatchAudit,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['energy:hydrogen-detail:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+
+      <template #auditStatus="{ row }">
+        <Tag
+          v-if="row.auditStatus != null"
+          :color="
+            AUDIT_STATUS_OPTIONS.find((o) => o.value === row.auditStatus)?.color
+          "
+        >
+          {{
+            AUDIT_STATUS_OPTIONS.find((o) => o.value === row.auditStatus)
+              ?.label ?? row.auditStatus
+          }}
+        </Tag>
+        <span v-else>—</span>
+      </template>
+
+      <template #deductionStatus="{ row }">
+        <Tag
+          v-if="row.deductionStatus != null"
+          :color="
+            DEDUCTION_STATUS_OPTIONS.find(
+              (o) => o.value === row.deductionStatus,
+            )?.color
+          "
+        >
+          {{
+            DEDUCTION_STATUS_OPTIONS.find(
+              (o) => o.value === row.deductionStatus,
+            )?.label ?? row.deductionStatus
+          }}
+        </Tag>
+        <span v-else>—</span>
+      </template>
+
+      <template #settlementStatus="{ row }">
+        <Tag
+          v-if="row.settlementStatus != null"
+          :color="
+            SETTLEMENT_STATUS_OPTIONS.find(
+              (o) => o.value === row.settlementStatus,
+            )?.color
+          "
+        >
+          {{
+            SETTLEMENT_STATUS_OPTIONS.find(
+              (o) => o.value === row.settlementStatus,
+            )?.label ?? row.settlementStatus
+          }}
+        </Tag>
+        <span v-else>—</span>
+      </template>
+
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '审核',
+              type: 'link',
+              icon: ACTION_ICON.AUDIT,
+              show: row.auditStatus === 0,
+              auth: ['energy:hydrogen-detail:update'],
+              onClick: () => handleAudit(row),
+            },
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              show: row.auditStatus === 0 || row.auditStatus === 2,
+              auth: ['energy:hydrogen-detail:update'],
+              onClick: () => handleEdit(row),
+            },
+            {
+              label: $t('common.view'),
+              type: 'link',
+              icon: ACTION_ICON.VIEW,
+              show: row.auditStatus === 1,
+              onClick: () => handleView(row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/energy/hydrogen-detail/modules/audit-modal.vue b/apps/web-antd/src/views/energy/hydrogen-detail/modules/audit-modal.vue
new file mode 100644
index 0000000..8c2e393
--- /dev/null
+++ b/apps/web-antd/src/views/energy/hydrogen-detail/modules/audit-modal.vue
@@ -0,0 +1,108 @@
+<script lang="ts" setup>
+import type { EnergyHydrogenDetailApi } from '#/api/energy/hydrogen-detail';
+
+import { computed, ref } from 'vue';
+
+import { Descriptions, Input, message, Modal, Radio } from 'ant-design-vue';
+
+import { auditHydrogenDetail } from '#/api/energy/hydrogen-detail';
+
+const emit = defineEmits(['success']);
+
+const visible = ref(false);
+const loading = ref(false);
+const records = ref<EnergyHydrogenDetailApi.Detail[]>([]);
+const approved = ref(true);
+const remark = ref('');
+
+const isBatch = computed(() => records.value.length > 1);
+const totalAmount = computed(() =>
+  records.value.reduce((sum, r) => sum + (r.customerAmount || 0), 0),
+);
+
+function open(data: EnergyHydrogenDetailApi.Detail[]) {
+  records.value = data;
+  approved.value = true;
+  remark.value = '';
+  visible.value = true;
+}
+
+async function handleConfirm() {
+  loading.value = true;
+  try {
+    let successCount = 0;
+    for (const record of records.value) {
+      await auditHydrogenDetail(
+        record.id!,
+        approved.value,
+        remark.value || undefined,
+      );
+      successCount++;
+    }
+    message.success(`审核完成，共 ${successCount} 条`);
+    visible.value = false;
+    emit('success');
+  } catch (e: any) {
+    message.error(e.message || '审核失败');
+  } finally {
+    loading.value = false;
+  }
+}
+
+defineExpose({ open });
+</script>
+
+<template>
+  <Modal
+    v-model:open="visible"
+    title="审核"
+    :confirm-loading="loading"
+    @ok="handleConfirm"
+    @cancel="visible = false"
+  >
+    <!-- Single record summary -->
+    <Descriptions
+      v-if="!isBatch && records[0]"
+      :column="2"
+      bordered
+      size="small"
+      class="mb-4"
+    >
+      <Descriptions.Item label="车牌号">{{
+        records[0].plateNumber
+      }}</Descriptions.Item>
+      <Descriptions.Item label="加氢站">{{
+        records[0].stationName
+      }}</Descriptions.Item>
+      <Descriptions.Item label="加氢日期">{{
+        records[0].hydrogenDate
+      }}</Descriptions.Item>
+      <Descriptions.Item label="对客金额"
+        >¥{{ records[0].customerAmount }}</Descriptions.Item
+      >
+    </Descriptions>
+
+    <!-- Batch summary -->
+    <div v-if="isBatch" class="mb-4 rounded bg-gray-50 p-4">
+      <p>已选中 <strong>{{ records.length }}</strong> 条记录</p>
+      <p>合计金额：<strong>¥{{ totalAmount.toFixed(2) }}</strong></p>
+    </div>
+
+    <div class="mb-4">
+      <label class="mb-2 block font-medium">审核结果</label>
+      <Radio.Group v-model:value="approved">
+        <Radio :value="true">通过</Radio>
+        <Radio v-if="!isBatch" :value="false">驳回</Radio>
+      </Radio.Group>
+    </div>
+
+    <div>
+      <label class="mb-2 block font-medium">审核备注</label>
+      <Input.TextArea
+        v-model:value="remark"
+        :rows="3"
+        placeholder="请输入审核备注（选填）"
+      />
+    </div>
+  </Modal>
+</template>