feat(cas): 索赔复核审批单数详情

杜志良
2 parents b0d9f878 7528c134
Showing 14 changed files with 1052 additions and 68 deletions
package.json
pnpm-lock.yaml
src/components/CardView/index.tsx
src/components/CardView/style.less
src/components/RowText/index.tsx
src/components/RowText/style.less
src/routes/ClaimReviewApprove/DetailList/page.tsx
src/routes/ClaimReviewApprove/entity.ts
src/routes/ClaimReviewApprove/page.tsx
src/routes/ClaimReviewApprove/service.ts
src/routes/demo/page.tsx
src/routes/page.tsx
src/style/global.scss
src/utils/rmb.ts
 {
-  "name": "<feewee>fw-h5app-template</feewee>",
+  "name": "h5app-cas",
   "version": "1.0.0",
   "scripts": {
     "reset": "npx rimraf ./**/node_modules",
@@ -27,11 +27,12 @@
   "dependencies": {
     "@ant-design/cssinjs": "^1.21.1",
     "@ant-design/icons": "^5.4.0",
-    "@feewee/h5app-common": "^0.1.138",
+    "@feewee/h5app-common": "^0.1.168",
     "@modern-js/runtime": "~2.57.0",
     "ahooks": "^3.8.0",
     "antd": "^5.20.0",
     "clsx": "^2.1.1",
+    "currency.js": "^2.0.4",
     "dayjs": "^1.11.12",
     "lodash": "^4.17.21",
     "query-string": "^9.1.0",
@@ -44,8 +45,8 @@
     "@modern-js-app/eslint-config": "~2.57.0",
     "@modern-js/app-tools": "~2.57.0",
     "@modern-js/eslint-config": "~2.57.0",
-    "@modern-js/plugin-tailwindcss": "~2.57.0",
     "@modern-js/plugin-polyfill": "~2.57.0",
+    "@modern-js/plugin-tailwindcss": "~2.57.0",
     "@modern-js/tsconfig": "~2.57.0",
     "@rsdoctor/rspack-plugin": "^0.3.11",
     "@types/jest": "^29.5.12",
@@ -15,8 +15,8 @@ importers:
         specifier: ^5.4.0
         version: 5.4.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@feewee/h5app-common':
-        specifier: ^0.1.138
-        version: 0.1.141(antd@5.20.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: ^0.1.168
+        version: 0.1.168(antd@5.20.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@modern-js/runtime':
         specifier: ~2.57.0
         version: 2.57.1(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -29,6 +29,9 @@ importers:
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
+      currency.js:
+        specifier: ^2.0.4
+        version: 2.0.4
       dayjs:
         specifier: ^1.11.12
         version: 1.11.13
@@ -151,6 +154,13 @@ packages:
       react: '>=16.0.0'
       react-dom: '>=16.0.0'
  
+  '@ant-design/icons@5.5.1':
+    resolution: {integrity: sha512-0UrM02MA2iDIgvLatWrj6YTCYe0F/cwXvVE0E2SqGrL7PZireQwgEKTKBisWpZyal5eXZLvuM98kju6YtYne8w==}
+    engines: {node: '>=8'}
+    peerDependencies:
+      react: '>=16.0.0'
+      react-dom: '>=16.0.0'
+
   '@ant-design/react-slick@1.1.2':
     resolution: {integrity: sha512-EzlvzE6xQUBrZuuhSAFTdsr4P2bBBHGZwKFemEfq8gIGyIQCxalYfZW/T2ORbtQx5rU69o+WycP3exY/7T1hGA==}
     peerDependencies:
@@ -1576,8 +1586,8 @@ packages:
     engines: {node: '>=14', npm: '>=6'}
     hasBin: true
  
-  '@feewee/h5app-common@0.1.141':
-    resolution: {integrity: sha512-21YZ5GqrRh4xzuQcfUzikvOsNVz4PxGMsL9V8H9ISGclkAe+VFjy1SWRDoVTSqSP4HCxjfGrBJJ0sysIMujZNQ==}
+  '@feewee/h5app-common@0.1.168':
+    resolution: {integrity: sha512-08x8IC2jaJGmM7UaQQcRmkBcJcb13prgOFVbSMkmeBq7+fj/rQxGOQTe2HwjU4NNOHCJOrv2Gjmnufy49GvI5g==}
     engines: {node: '>=18', npm: '>=6.9.0'}
     peerDependencies:
       antd: '>=5'
@@ -1892,8 +1902,8 @@ packages:
     resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
     engines: {node: '>= 8'}
  
-  '@nutui/icons-react@1.0.4':
-    resolution: {integrity: sha512-nLFYpJvMBkKzT+PpfMaYoO6vJXMTM0yxAragTkEHt9HAFNjdTdvByCSRfUazHHdLdr1AJxS9h62VB1+jmBEtWA==}
+  '@nutui/icons-react@1.0.5':
+    resolution: {integrity: sha512-0TYl3Fk+sVz95DKqn/7isYAvaK5YGnaBwMMib4rqYLoqi9GGFwgU9rp2hYXu/X5IYdWgshj0xiuGMK75/vUYbQ==}
  
   '@nutui/nutui-react@2.6.15':
     resolution: {integrity: sha512-/xX4pB6HSXSWwqnumoJR+omirA9b8HznDvwFHFr/iu+KJn4D658VAVR47T4Z0ROEq9lmErmlcDxjqnxmJOzl6w==}
@@ -2338,14 +2348,14 @@ packages:
   '@swc/plugin-styled-components@2.0.9':
     resolution: {integrity: sha512-0aPv7lNed27qs8JBklLkVSlLhpPRU3YKRnKplObaAyhNWbpbOkCbVSTay5ArFT2Gz1rz844Np7l4DMozEtZRBg==}
  
-  '@tanstack/react-virtual@3.10.6':
-    resolution: {integrity: sha512-xaSy6uUxB92O8mngHZ6CvbhGuqxQ5lIZWCBy+FjhrbHmOwc6BnOnKkYm2FsB1/BpKw/+FVctlMbEtI+F6I1aJg==}
+  '@tanstack/react-virtual@3.10.9':
+    resolution: {integrity: sha512-OXO2uBjFqA4Ibr2O3y0YMnkrRWGVNqcvHQXmGvMu6IK8chZl3PrDxFXdGZ2iZkSrKh3/qUYoFqYe+Rx23RoU0g==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
  
-  '@tanstack/virtual-core@3.10.6':
-    resolution: {integrity: sha512-1giLc4dzgEKLMx5pgKjL6HlG5fjZMgCjzlKAlpr7yoUtetVPELgER1NtephAI910nMwfPTHNyWKSFmJdHkz2Cw==}
+  '@tanstack/virtual-core@3.10.9':
+    resolution: {integrity: sha512-kBknKOKzmeR7lN+vSadaKWXaLS0SZZG+oqpQ/k80Q6g9REn6zRHS/ZYdrIzHnpHgy/eWs00SujveUN/GJT2qTw==}
  
   '@trysound/sax@0.2.0':
     resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
@@ -3403,6 +3413,10 @@ packages:
   csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
  
+  currency.js@2.0.4:
+    resolution: {integrity: sha512-6/OplJYgJ0RUlli74d93HJ/OsKVBi8lB1+Z6eJYS1YZzBuIp4qKKHpJ7ad+GvTlWmLR/hLJOWTykN5Nm8NJ7+w==}
+    engines: {node: '>=4'}
+
   current-script-polyfill@1.0.0:
     resolution: {integrity: sha512-qv8s+G47V6Hq+g2kRE5th+ASzzrL7b6l+tap1DHKK25ZQJv3yIFhH96XaQ7NGL+zRW3t/RDbweJf/dJDe5Z5KA==}
  
@@ -5812,6 +5826,10 @@ packages:
     resolution: {integrity: sha512-t6dqMECpCkqfyv2FfwVS1xcB6lgXW/0XZSaKdsCNGYkqMO76AFiJEg4vINzoDKcZa6MS7JX+OHIjwh06K5vczw==}
     engines: {node: '>=18'}
  
+  query-string@9.1.1:
+    resolution: {integrity: sha512-MWkCOVIcJP9QSKU52Ngow6bsAWAPlPK2MludXvcrS2bGZSl+T1qX9MZvRIkqUIkGLJquMJHWfsT6eRqUpp4aWg==}
+    engines: {node: '>=18'}
+
   querystring-es3@0.2.1:
     resolution: {integrity: sha512-773xhDQnZBMFobEiztv8LIl70ch5MSF/jUQVlhwFyBILqq96anmoctVIYz+ZRp0qbCKATTn6ev02M3r7Ga5vqA==}
     engines: {node: '>=0.4.x'}
@@ -6091,6 +6109,12 @@ packages:
   react-is@18.3.1:
     resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
  
+  react-photo-view@1.2.6:
+    resolution: {integrity: sha512-Fq17yxkMIv0oFp7HOJr39HgCZRP6A9K5T5rixJ4flSUYT2OO3V8vNxEExjhIKgIrfmTu+mDnHYEsI9RRWi1JHw==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
   react-refresh@0.14.2:
     resolution: {integrity: sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==}
     engines: {node: '>=0.10.0'}
@@ -7360,6 +7384,16 @@ snapshots:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
  
+  '@ant-design/icons@5.5.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@ant-design/colors': 7.1.0
+      '@ant-design/icons-svg': 4.4.2
+      '@babel/runtime': 7.25.6
+      classnames: 2.5.1
+      rc-util: 5.43.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   '@ant-design/react-slick@1.1.2(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.25.6
@@ -9243,13 +9277,13 @@ snapshots:
       - jest
       - supports-color
  
-  '@feewee/h5app-common@0.1.141(antd@5.20.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@feewee/h5app-common@0.1.168(antd@5.20.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@ant-design/icons': 5.4.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@ant-design/icons': 5.5.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@feewee/helper-wasm': 0.2.7
-      '@nutui/icons-react': 1.0.4
+      '@nutui/icons-react': 1.0.5
       '@nutui/nutui-react': 2.6.15(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@tanstack/react-virtual': 3.10.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@tanstack/react-virtual': 3.10.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       ahooks: 3.8.1(react@18.3.1)
       antd: 5.20.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       antd-mobile: 5.37.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -9260,9 +9294,10 @@ snapshots:
       js-cookie: 3.0.5
       localforage: 1.10.0
       lodash: 4.17.21
-      query-string: 9.1.0
+      query-string: 9.1.1
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
+      react-photo-view: 1.2.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
     transitivePeerDependencies:
       - debug
  
@@ -9964,12 +9999,12 @@ snapshots:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.17.1
  
-  '@nutui/icons-react@1.0.4': {}
+  '@nutui/icons-react@1.0.5': {}
  
   '@nutui/nutui-react@2.6.15(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.25.6
-      '@nutui/icons-react': 1.0.4
+      '@nutui/icons-react': 1.0.5
       '@nutui/touch-emulator': 1.0.0
       '@react-spring/web': 9.6.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@use-gesture/react': 10.2.20(react@18.3.1)
@@ -10600,13 +10635,13 @@ snapshots:
     dependencies:
       '@swc/counter': 0.1.3
  
-  '@tanstack/react-virtual@3.10.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@tanstack/react-virtual@3.10.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@tanstack/virtual-core': 3.10.6
+      '@tanstack/virtual-core': 3.10.9
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
  
-  '@tanstack/virtual-core@3.10.6': {}
+  '@tanstack/virtual-core@3.10.9': {}
  
   '@trysound/sax@0.2.0': {}
  
@@ -11971,6 +12006,8 @@ snapshots:
  
   csstype@3.1.3: {}
  
+  currency.js@2.0.4: {}
+
   current-script-polyfill@1.0.0: {}
  
   data-uri-to-buffer@3.0.1: {}
@@ -14490,6 +14527,12 @@ snapshots:
       filter-obj: 5.1.0
       split-on-first: 3.0.0
  
+  query-string@9.1.1:
+    dependencies:
+      decode-uri-component: 0.4.1
+      filter-obj: 5.1.0
+      split-on-first: 3.0.0
+
   querystring-es3@0.2.1: {}
  
   queue-microtask@1.2.3: {}
@@ -14827,7 +14870,7 @@ snapshots:
  
   rc-util@5.43.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
-      '@babel/runtime': 7.24.5
+      '@babel/runtime': 7.25.6
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
       react-is: 18.3.1
@@ -14861,6 +14904,11 @@ snapshots:
  
   react-is@18.3.1: {}
  
+  react-photo-view@1.2.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   react-refresh@0.14.2: {}
  
   react-router-dom@6.22.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+import type React from 'react';
+import './style.less';
+
+interface Props {
+  style?: React.CSSProperties;
+  children: React.ReactNode;
+}
+
+export default function CardView({ style, children }: Props) {
+  return (
+    <div className="card-view" style={style}>
+      {children}
+    </div>
+  );
+}
+.card-view {
+  padding: 15px;
+  border-bottom: 1px solid #eee;
+  background-color: #fff;
+}
+import React from 'react';
+import type { CSSProperties } from 'react';
+import { Row } from '@feewee/h5app-common';
+
+import './style.less';
+
+interface ComponentProps {
+  title: string;
+  content: string | number;
+  rowStyle?: CSSProperties;
+  titleStyle?: CSSProperties;
+  contentStyle?: CSSProperties;
+}
+
+export default function RowText({ title, content, rowStyle, titleStyle, contentStyle }: ComponentProps) {
+  return (
+    <Row className="row-wrapper" style={rowStyle}>
+      <span className="label" style={titleStyle}>
+        {title}：
+      </span>
+      <span className="content" style={contentStyle}>
+        {content}
+      </span>
+    </Row>
+  );
+}
+.row-wrapper {
+  margin-bottom: 10px;
+}
+
+.label {
+  color: #666;
+  font-size: 14px;
+  line-height: 14px;
+  font-weight: 500;
+}
+
+.content {
+  color: #666;
+  font-size: 14px;
+  line-height: 14px;
+  font-weight: 500;
+  flex: 1;
+}
+
+.labelBold {
+  color: #333;
+  font-size: 15px;
+  font-weight: bold;
+}
+
+.contentBold {
+  .labelBold;
+  flex: 1;
+}
+/* eslint-disable max-lines */
+import { useEffect, useState, useMemo } from 'react';
+import { helper, PageProvider, PoolTable, usePagination, useUrlParams, FilePreview } from '@feewee/h5app-common';
+import { useNavigate } from '@modern-js/runtime/router';
+import { cloneDeep } from 'lodash';
+import dayjs from 'dayjs';
+
+import type { DimensionEnum, QueryTypeEnum } from '../entity';
+import { QueryItemTypeEnum, QueryItemTypeNameMap } from '../entity';
+import { reviewListApi, type ReviewListResult } from '../service';
+import rmb from '@/utils/rmb';
+
+interface PageParams {
+  applyId: number;
+  queryType: QueryTypeEnum;
+  queryItemType: QueryItemTypeEnum;
+  type: DimensionEnum | QueryTypeEnum.USER_PUNISH;
+  typeId: number;
+}
+
+/**
+ * 单数明细
+ */
+const DetailList = () => {
+  const params = useUrlParams<PageParams>();
+  const navigate = useNavigate();
+
+  const { queryType, queryItemType } = params;
+
+  // 添加了动态数据后的 list 和 columns
+  const [assembledList, setAssembledList] = useState<ReviewListResult[]>([]);
+
+  const [delay, setDelay] = useState(true);
+  const { list, param, setParams, loading, errMsg, resetParam, pagination } = usePagination(reviewListApi, params, delay);
+  const { current = 1, pageSize = 15 } = param;
+
+  useEffect(() => {
+    if (params.applyId) {
+      setDelay(false);
+      setParams({ ...params, pageSize: 50 }, true);
+    }
+  }, []);
+
+  function renderSecondaryAmount(val: number) {
+    return (
+      <span>
+        <span>{rmb.p(val)}</span>元
+      </span>
+    );
+  }
+
+  const columns = useMemo(() => {
+    let baseColumns = [
+      {
+        title: '索赔单号',
+        dataIndex: 'claimNo',
+        width: 120,
+      },
+      {
+        title: '附件',
+        dataIndex: 'fid',
+        width: 150,
+        render: val => <div style={{ maxWidth: 400 }}>{/* <FeeweeUploadAttachment maxCount={1} fidList={val ? [val] : []} disabled /> */}</div>,
+      },
+      {
+        title: '索赔类型',
+        dataIndex: 'claimTypeName',
+        render: text => text || '--',
+      },
+    ];
+
+    // 根据 queryItemType 展示不同列
+    if ([QueryItemTypeEnum.SYSTEM_TOTAL, QueryItemTypeEnum.SYSTEM_ONLY].includes(queryItemType)) {
+      baseColumns = baseColumns.concat([
+        {
+          title: '车牌号',
+          dataIndex: 'plateNo',
+          render: text => text || '--',
+        },
+        {
+          title: '车架号',
+          dataIndex: 'vin',
+          render: text => text || '--',
+        },
+        {
+          title: '车辆名称',
+          dataIndex: 'carName',
+          render: text => text || '--',
+        },
+        {
+          title: '系统生成金额',
+          dataIndex: 'totalFee',
+          align: 'right',
+          render: renderSecondaryAmount,
+        },
+        {
+          title: '差异原因',
+          dataIndex: 'differenceReason',
+          render: text => text || '--',
+        },
+      ]);
+    } else if (queryItemType === QueryItemTypeEnum.IMPORT_ONLY) {
+      baseColumns = baseColumns.concat([
+        {
+          title: '厂家兑现金额',
+          dataIndex: 'amount',
+          width: 100,
+          align: 'right',
+          render: renderSecondaryAmount,
+        },
+      ]);
+    } else if (queryItemType === QueryItemTypeEnum.DIFFERENCE_COUNT) {
+      baseColumns = baseColumns.concat([
+        {
+          title: '系统生成金额',
+          dataIndex: 'totalFee',
+          align: 'center',
+          children: [
+            {
+              title: '小计',
+              dataIndex: 'totalFee',
+              width: 100,
+              align: 'right',
+              render: renderSecondaryAmount,
+            },
+            {
+              title: '工时费',
+              dataIndex: 'systemManHoursFee',
+              width: 100,
+              align: 'right',
+              render: renderSecondaryAmount,
+            },
+            {
+              title: '材料费',
+              dataIndex: 'systemPartFee',
+              width: 100,
+              align: 'right',
+              render: renderSecondaryAmount,
+            },
+          ],
+        },
+        {
+          title: '提报金额',
+          dataIndex: 'submitAmount',
+          align: 'center',
+          children: [
+            {
+              title: '小计',
+              dataIndex: 'submitAmount',
+              width: 100,
+              align: 'right',
+              render: renderSecondaryAmount,
+            },
+            {
+              title: '工时费',
+              dataIndex: 'submitManHoursFee',
+              width: 100,
+              align: 'right',
+              render: renderSecondaryAmount,
+            },
+            {
+              title: '材料费',
+              dataIndex: 'submitPartFee',
+              width: 100,
+              align: 'right',
+              render: renderSecondaryAmount,
+            },
+          ],
+        },
+        {
+          title: '厂家兑现金额',
+          dataIndex: 'factoryAmount', // @note 前端定义，仅作数据查找
+          align: 'center',
+          children: [
+            {
+              title: '小计',
+              dataIndex: 'amount',
+              width: 100,
+              align: 'right',
+              render: renderSecondaryAmount,
+            },
+            // @slot 存放 importData 中的数据
+          ],
+        },
+        {
+          title: '差异金额',
+          dataIndex: 'claimNo',
+          align: 'center',
+          children: [
+            {
+              title: '系统生成与厂家兑现差异',
+              dataIndex: 'differenceAmount',
+              width: 100,
+              align: 'right',
+              render: val => (
+                <span>
+                  <span className="danger">{rmb.p(val)}</span>元
+                </span>
+              ),
+            },
+            {
+              title: '索赔提报与厂家兑现差异',
+              dataIndex: 'differenceSubmitAmount',
+              width: 100,
+              align: 'right',
+              render: val => (
+                <span>
+                  <span className="danger">{rmb.p(val)}</span>元
+                </span>
+              ),
+            },
+          ],
+        },
+        {
+          title: '车牌号',
+          dataIndex: 'plateNo',
+          render: text => text || '--',
+        },
+        {
+          title: '车架号',
+          dataIndex: 'vin',
+          render: text => text || '--',
+        },
+        {
+          title: '车辆名称',
+          dataIndex: 'carName',
+          render: text => text || '--',
+        },
+      ]);
+    } else {
+      baseColumns = baseColumns.concat([
+        {
+          title: '车牌号',
+          dataIndex: 'plateNo',
+          render: text => text || '--',
+        },
+        {
+          title: '车架号',
+          dataIndex: 'vin',
+          render: text => text || '--',
+        },
+        {
+          title: '车辆名称',
+          dataIndex: 'carName',
+          render: text => text || '--',
+        },
+        {
+          title: '厂家兑现金额',
+          dataIndex: 'amount',
+          align: 'right',
+          render: renderSecondaryAmount,
+        },
+        {
+          title: '系统生成金额',
+          dataIndex: 'totalFee',
+          align: 'right',
+          render: renderSecondaryAmount,
+        },
+        {
+          title: '差异金额',
+          dataIndex: 'differenceAmount',
+          align: 'right',
+          render: val => (
+            <span>
+              <span className="danger">{rmb.p(val)}</span>元
+            </span>
+          ),
+        },
+      ]);
+    }
+
+    // 动态列：工时费、配件费、救援费等，差异时放到厂家兑现列中，其余情况追加在列后面
+    const extraColumns = [];
+    // 添加额外动态列数据
+    const newList = cloneDeep(list);
+    if (newList.length > 0) {
+      // 构建表头
+      if (newList[0].importData && ![QueryItemTypeEnum.SYSTEM_TOTAL, QueryItemTypeEnum.SYSTEM_ONLY].includes(queryItemType)) {
+        const { importData } = newList[0];
+        if (importData) {
+          try {
+            // { "工时费": 10, "配件费": 20, "救援费": 30, ... }
+            const data = JSON.parse(importData);
+            for (const key in data) {
+              extraColumns.push({
+                title: key,
+                dataIndex: key,
+                align: 'right',
+                width: 100,
+                render: val => <span className="warning">{val}</span>,
+              });
+            }
+          } catch (e) {
+            console.error('parse importData fail:', e);
+          }
+        }
+      }
+
+      // 构建表格数据
+      // 2. 解析数据，若数据列有 importData 则解析为对象形式
+      for (let i = 0; i < newList.length; i++) {
+        if (newList[i].importData) {
+          try {
+            const data = JSON.parse(newList[i].importData);
+            Object.assign(newList[i], data);
+          } catch (e) {
+            console.error('parse importData fail:', e);
+          }
+        }
+      }
+
+      // 处理分页数据
+      if (current === 1) {
+        setAssembledList(newList);
+      } else {
+        // 替换当前页数据
+        const start = (current - 1) * pageSize;
+        const end = start + pageSize;
+        const newPageList = [...assembledList];
+        newPageList.splice(start, end - start, ...newList);
+        setAssembledList(newPageList);
+      }
+    }
+
+    // 跟进差异类型，添加额外列
+    if (queryItemType === QueryItemTypeEnum.DIFFERENCE_COUNT) {
+      for (const column of baseColumns) {
+        // @ts-ignore
+        if (column.dataIndex === 'factoryAmount') {
+          // @ts-ignore
+          column.children = column.children.concat(extraColumns);
+          break;
+        }
+      }
+    } else {
+      baseColumns = baseColumns.concat(extraColumns);
+    }
+
+    // 添加提报信息
+    baseColumns = baseColumns.concat([
+      {
+        title: '提报人',
+        dataIndex: 'claimer',
+        width: 80,
+        render: val => val || '--',
+      },
+      {
+        title: '提报商家',
+        dataIndex: 'submitDealerName',
+        render: val => val || '--',
+      },
+      {
+        title: '提报时间',
+        dataIndex: 'commitTime',
+        render: val => dayjs(val).format('YYYY-MM-DD HH:mm:ss'),
+      },
+    ]);
+    return baseColumns;
+  }, [queryType, queryItemType, list]);
+
+  return (
+    <PageProvider
+      tittle={QueryItemTypeNameMap[params.queryItemType]}
+      loading={loading}
+      errMsg={errMsg}
+      onBackClick={() => helper.checkBack(() => navigate(-1))}
+    >
+      <PoolTable list={assembledList} columns={columns} rowKey="claimNo" {...pagination} />
+    </PageProvider>
+  );
+};
+
+export default DetailList;
+export enum MatchStatusEnum {
+  /** 匹配一致 */
+  MATCH = 1,
+  /** 无工单记录 */
+  NO_ORDER = 2,
+  /** 匹配不一致 */
+  NOT_MATCH = 3,
+}
+
+export enum MatchStatusName {
+  /** 匹配一致 */
+  匹配一致 = 1,
+  /** 无工单记录 */
+  无工单 = 2,
+  /** 匹配不一致 */
+  匹配差异 = 3,
+}
+
+export enum DimensionEnum {
+  /** 索赔类型 */
+  CLAIM_TYPE = 1,
+  /** 索赔人员 */
+  CLAIM_USER = 2,
+  /** 施工门店 */
+  CLAIM_SHOP = 3,
+  /** 差异原因 */
+  DIFFERENCE_REASON = 4,
+}
+
+export const DimensionData = [
+  {
+    value: DimensionEnum.CLAIM_TYPE,
+    title: '索赔类型',
+  },
+  {
+    value: DimensionEnum.CLAIM_USER,
+    title: '索赔人员',
+  },
+  {
+    value: DimensionEnum.CLAIM_SHOP,
+    title: '施工门店',
+  },
+  {
+    value: DimensionEnum.DIFFERENCE_REASON,
+    title: '差异原因',
+  },
+];
+
+export const DimensionNamesMap: Record<string, string> = {
+  [DimensionEnum.CLAIM_TYPE]: '索赔类型',
+  [DimensionEnum.CLAIM_USER]: '索赔人员',
+  [DimensionEnum.CLAIM_SHOP]: '施工门店',
+  [DimensionEnum.DIFFERENCE_REASON]: '差异原因',
+};
+
+export enum TypeEnum {
+  /** 奖励 */
+  REWARD = 1,
+  /** 处罚 */
+  PUNISH = 0,
+}
+
+export enum SubTypeEnum {
+  /** 门店分摊 */
+  APPORTION = 1,
+  /** 门店 */
+  SHOP = 2,
+  /** 人员 */
+  USER = 3,
+}
+
+export const SubTypeNameMap = {
+  [SubTypeEnum.APPORTION]: '门店分摊',
+  [SubTypeEnum.SHOP]: '门店',
+  [SubTypeEnum.USER]: '人员',
+};
+
+export enum QueryTypeEnum {
+  /** 索赔 */
+  REVIEW_BEFORE = 1,
+  /** 差异 */
+  REVIEW_AFTER = 2,
+  /** 人员处罚 */
+  USER_PUNISH = 3,
+}
+
+export enum QueryItemTypeEnum {
+  /** 霏车车系统 */
+  SYSTEM_TOTAL = 1,
+  /** 系统有，导入无 */
+  SYSTEM_ONLY = 2,
+  /** 导入合计 */
+  TOTAL_COUNT = 3,
+  /** 一致 */
+  MATCH_COUNT = 4,
+  /** 差异 */
+  DIFFERENCE_COUNT = 5,
+  /** 系统无，导入有 */
+  IMPORT_ONLY = 6,
+}
+
+export const QueryItemTypeNameMap = {
+  [QueryItemTypeEnum.SYSTEM_TOTAL]: '霏车车系统单数',
+  [QueryItemTypeEnum.SYSTEM_ONLY]: '系统有，导入无单数',
+  [QueryItemTypeEnum.TOTAL_COUNT]: '提报单数',
+  [QueryItemTypeEnum.MATCH_COUNT]: '匹配一致单数',
+  [QueryItemTypeEnum.DIFFERENCE_COUNT]: '匹配差异单数',
+  [QueryItemTypeEnum.IMPORT_ONLY]: '系统无，导入有单数',
+};
+import { Button, helper, Toast, PageProvider } from '@feewee/h5app-common';
+import { Helmet } from '@modern-js/runtime/head';
+import { useNavigate } from '@modern-js/runtime/router';
+
+// 索赔复核审批 todo 待迁移
+function Index() {
+  const navigate = useNavigate();
+
+  return (
+    <PageProvider tittle="索赔复核审批" onBackClick={() => helper.checkBack(() => navigate(-1))}>
+      <main className="p-4 h-screen h-svh">
+        <div className=" mt-4">
+          <Button
+            type="primary"
+            shape="round"
+            className="!mx-auto !block !mt-4"
+            onClick={() =>
+              Toast.show({
+                content: '成功提示',
+                icon: 'success',
+              })
+            }
+          >
+            吐司提示
+          </Button>
+        </div>
+      </main>
+    </PageProvider>
+  );
+}
+
+export default Index;
+import type { PromisePageResp, PageBaseParams } from '@feewee/h5app-common';
+import { host, http } from '@feewee/h5app-common';
+
+import type { DimensionEnum, MatchStatusEnum, QueryItemTypeEnum, QueryTypeEnum, SubTypeEnum, TypeEnum } from './entity';
+
+export interface DetailResult {
+  // 申请id
+  applyId: number;
+  // 文件id
+  fid: string;
+  // 文件名称
+  fName: string;
+  // 文件大小,单位b
+  fSize: number;
+  // 品牌名称
+  brandName: string;
+  // 往来单位名称
+  contactUnits: string;
+  // 申报商家 id
+  applyDealerId: number;
+  // 申报商家名称
+  applyDealerName: string;
+  // 匹配结果的最早提报时间
+  beginTime: number;
+  // 匹配结果的最晚提报时间
+  endTime: number;
+  // 未复核单数
+  notReviewedCount: number;
+  // 未复核金额
+  notReviewedAmount: number;
+  // 超60天未复核单数
+  overtimeNotReviewedCount: number;
+  // 厂家审核金额
+  amount: number;
+}
+
+export interface ClaimBeforeData {
+  // 类型
+  type: DimensionEnum;
+  // 类型id
+  typeId: number;
+  // 类型名称
+  typeName: string;
+  // 系统单数
+  systemCount: number;
+  // 系统金额
+  systemAmount: number;
+  // 系统有,导入无单数
+  notExistsCount: number;
+  // 系统有,导入无金额
+  notExistsAmount: number;
+  // 本次导入 合计单数
+  total: number;
+  // 本次导入 合计金额
+  totalAmount: number;
+  // 本次导入 匹配一致单数
+  consistentCount: number;
+  // 本次导入 匹配一致金额
+  consistentAmount: number;
+  // 本次导入 匹配不一致单数
+  nonConsistentCount: number;
+  // 本次导入 匹配不一致金额
+  nonConsistentAmount: number;
+  // 本次导入,系统无,导入有单数
+  importNonSystemCount: number;
+  // 本次导入,系统无,导入有金额
+  importNonSystemAmount: number;
+}
+
+export interface ClaimAfterData {
+  // 类型id
+  typeId: number;
+  // 类型名称
+  typeName: string;
+  // 差异单数
+  nonConsistentCount: number;
+  // 差异金额
+  nonConsistentAmount: number;
+  // 系统金额
+  systemAmount: number;
+  // 厂家金额
+  factoryAmount: number;
+}
+
+export interface PunishData {
+  // 人员id
+  userId: number;
+  // 人员名称
+  userName: number;
+  // 提报单数
+  submitCount: number;
+  // 差异单数
+  nonConsistentCount: number;
+  // 差异金额
+  nonConsistentAmount: number;
+  // 差异金额占比
+  nonConsistentRate: number;
+  // 处罚金额
+  punishAmount: number;
+  // 处罚绩效得分率
+  punishRate: number;
+}
+
+export interface FactoryPunishOrRewardData {
+  // 合计金额
+  totalAmount: number;
+  //
+  items: FactoryPunishOrRewardItem[];
+}
+
+export interface FactoryPunishOrRewardItem {
+  // 厂家奖励/处罚id
+  id: number;
+  // 文件名称
+  fName: string;
+  // 文件id
+  fid: string;
+  // 兑现方式
+  cashType: number;
+  // 处罚类型
+  projectTypeName: string;
+  // 金额
+  amount: number;
+  // 是否门店分摊
+  apportion: boolean;
+  // 是否门店
+  shop: boolean;
+  // 是否人员
+  user: boolean;
+}
+
+export interface FactoryPunishOrRewardTypeDetail {
+  // 对象id
+  targetId: number;
+  // 对象名称
+  targetName: string;
+  // 金额
+  amount: number;
+  // 比例
+  proportion: number;
+  // 绩效得分率
+  scoringRate: number;
+  // 岗位名称
+  postName: string;
+  // 在职门店名称
+  shopName: string;
+}
+
+export interface ReviewListParams extends PageBaseParams {
+  applyId: number;
+  type: DimensionEnum | QueryTypeEnum.USER_PUNISH;
+  typeId: number;
+  queryType: QueryTypeEnum;
+  queryItemType: QueryItemTypeEnum;
+  keywords?: string;
+}
+
+export interface ReviewListResult {
+  // 导入数据id
+  importDataId: number;
+  // 索赔单号
+  claimNo: string;
+  // 索赔类型
+  claimType: number;
+  // 索赔类型名称
+  claimTypeName: string;
+  // 复核附件
+  fid: string;
+  // 厂家兑现金额
+  amount: number;
+  // 系统生成-总金额
+  totalFee: number;
+  // 系统生成-工时费
+  systemManHoursFee: number;
+  // 系统生成-材料费
+  systemPartFee: number;
+  // 系统生成与厂家差异金额
+  differenceAmount: number;
+  // 提报-总金额
+  submitAmount: number;
+  // 提报-工时费
+  submitManHoursFee: number;
+  // 提报-材料费
+  submitPartFee: number;
+  // 提报-与厂家差异金额
+  differenceSubmitAmount: number;
+  // 上传其他信息:json格式
+  importData: string;
+  // 提报人
+  claimer: string;
+  // 提报商家名称
+  submitDealerName: string;
+  // 提报时间
+  commitTime: number;
+  // VIN
+  vin: string;
+  // 车牌号
+  plateNo: string;
+  // 车辆
+  carName: string;
+  // 差异原因
+  differenceReasonId: number;
+  differenceReason: string;
+  // 是否已复核 1: 未填写差异原因,2: 已填写差异原因
+  reviewStatus: number;
+}
+
+export interface DetailListParams {
+  importDataNo: string; // 导入明细编号,同一文件一致
+  claimNo?: string; // 索赔单号
+  distributorName?: string; // 经销商
+  vin?: string;
+  claimType?: number; // 索赔类型
+  matchStatus?: MatchStatusEnum; // 匹配状态，1：匹配一致，2：无工单记录，3：匹配不一致
+  current?: number;
+  pageSize?: number;
+}
+
+export interface DetailListResult {
+  id: number; // 复核 id
+  createTime: number; // 创建时间
+  updateTime: number; // 更新时间
+  createBy: string; // 创建人
+  updateBy: string; // 更新人
+  groupId: number; // 集团id
+  importDataNo: string; // 导入明细编号,同一文件一致
+  reviewAmount: number; // 复核后金额
+  differenceReason: string; // 差异原因， 1.工时费，材料费差异:2.厂家拒绝:3.漏报:4.其他4s店支付:5.家直接打款到公司账户;6.同一工单分多次提报;7.多个工单一次提报(See: 索赔数据不一致原因)
+  differenceReasonName: string; // 差异原因名称
+  distributorName: string; // 经销商
+  claimNo: string; // 索赔单号
+  vin: string; // 车架号
+  claimType: string; // 索赔类型
+  manHoursFee: number; // 工时费
+  partFee: number; // 配件费
+  rescueFee: number; // 救援费
+  totalFee: number; // 总结算费用
+  remark: string; // 复核备注
+  fids: string; // 附件ids
+  matchStatus: number; // 匹配状态，1: 匹配一致，2: 匹配不一致，3: 无工单记录(See: 索赔匹配状
+}
+
+export interface ReviewDetailResult {
+  claimOrderReviewData: ReviewData; // 复核数据
+  claimOrders: ClaimOrder[]; // 索赔单信息
+  punishes: ReviewPunish[]; // 处罚信息
+}
+
+export interface ReviewData {
+  id: number; // 主键
+  createTime: number; // 创建时间
+  updateTime: number; // 更新时间
+  createBy: string; // 创建人
+  updateBy: string; // 更新人
+  groupId: number; // 集团id
+  importDataNo: string; // 导入明细编号,同一文件一致
+  reviewAmount: number; // 复核后金额
+  differenceReason: string; // 差异原因， 1.工时费，材料费差异;2.厂家拒绝;3.漏报;4.其他4s店支付;5.厂家直接打款到公司账户;6.同一工单分多次提报;7.多个工单一次提报(See: 索赔数据不一致原因)
+  differenceReasonName: string; // 差异原因名称
+  distributorName: string; // 经销商
+  claimNo: string; // 索赔单号
+  vin: string; // 车架号
+  claimType: number; // 索赔类型
+  manHoursFee: number; // 工时费
+  partFee: number; // 配件费
+  rescueFee: number; // 救援费
+  totalFee: number; // 总结算费用
+  remark: string; // 复核备注
+  fids: string; // 附件ids
+  matchStatus: number; // 匹配状态，1: 匹配一致，2: 匹配不一致，3: 无工单记录(See: 索赔匹配状态)
+}
+
+export interface ClaimOrder {
+  type: number; // 三包类型(1:首保 2: 三包件5: 市场行动)
+  claimUsername: number; // 索赔确认/提报员工姓名
+  claimSubmitAmount: number; // 提报金额
+  claimOrderId: number; // 索赔单id
+  orderNo: number; // 工单号
+  ownerName: number; // 车主姓名
+  carName: number; // 车辆名称
+  vin: number; // 车辆vin码
+  plateNo: number; // 车牌号
+  specCode: number; // 车型代码
+  receiverName: number; // 接车人姓名
+  judgeNames: number; // 故障判断员
+}
+
+export interface ReviewPunish {
+  id: number; // 复核id
+  createTime: number; // 创建时间
+  updateTime: number; // 更新时间
+  dataId: number; // 索赔复核导入数据id
+  punishUserId: number; // 处罚人员id
+  punishUsername: string; // 处罚人员
+  punishAmount: number; // 处罚金额
+  achievements: number; // 处罚绩效
+  punishId: number; // 绩效系统id
+  shopId: number;
+  shopName: string;
+}
+
+// 详情
+export function detailApi(applyId: number): Promise<DetailResult> {
+  return http.get(`${host.cas}/erp/claim/review/apply/detail`, { applyId });
+}
+
+// 复核前数据
+export function dataBeforeReviewApi(params: { applyId: number; type: DimensionEnum }): Promise<ClaimBeforeData[]> {
+  return http.get(`${host.cas}/erp/claim/review/apply/before/review`, params);
+}
+
+// 复核后数据
+export function dataAfterReviewApi(params: { applyId: number; type: DimensionEnum }): Promise<ClaimAfterData[]> {
+  return http.get(`${host.cas}/erp/claim/review/apply/after/review`, params);
+}
+
+// 处罚信息
+export function punishListApi(applyId: number): Promise<PunishData[]> {
+  return http.get(`${host.cas}/erp/claim/review/apply/punish/list`, { applyId });
+}
+
+// 厂家处罚/奖励信息 1:奖励 2：处罚
+export function factoryPunishOrRewardListApi(params: { applyId: number; type: TypeEnum }): Promise<FactoryPunishOrRewardData> {
+  return http.get(`${host.cas}/erp/claim/review/apply/factory/info`, params);
+}
+
+// 厂家处罚/奖励类型详情 1:门店分摊,2:门店,3:人员
+export function factoryPunishOrRewardTypeDetailApi(params: { id: number; type: SubTypeEnum }): Promise<FactoryPunishOrRewardTypeDetail[]> {
+  return http.get(`${host.cas}/erp/claim/review/apply/factory/info/detail`, params);
+}
+
+// 复核列表
+export function reviewListApi(params: ReviewListParams): PromisePageResp<ReviewListResult> {
+  return http.get(`${host.cas}/erp/claim/review/apply/import/data/page`, params);
+}
+
+// 详情明细
+export function detailListApi(params: DetailListParams): PromisePageResp<DetailListResult> {
+  return http.get(`${host.cas}/erp/claim/order/review/data/list`, params);
+}
+
+// 复核详情
+export function reviewDetailApi(id: number): Promise<ReviewDetailResult> {
+  return http.get(`${host.cas}/erp/claim/order/review/data/${id}`);
+}
-import { Helmet } from '@modern-js/runtime/head';
-import { ListRow, Button, Icon, IconFont, Space, PageProvider } from '@feewee/h5app-common';
-import { useSafeState } from 'ahooks';
-import { useEffect } from 'react';
-
-const Index = () => {
-  const [loading, setLoading] = useSafeState(true);
-
-  useEffect(() => {
-    setTimeout(() => setLoading(false), 2500);
-  }, []);
-
-  return (
-    <>
-      <Helmet>
-        {/* 这里面可以映入外部的一些样式或者js之类的，如果有需要的话。也可以调整head里的信息 */}
-        <link rel="icon" type="image/x-icon" href="https://lf3-static.bytednsdoc.com/obj/eden-cn/uhbfnupenuhf/favicon.ico" />
-      </Helmet>
-      <PageProvider tittle="demo页面" loading={loading}>
-        <main className="p-5">
-          <div>demo 页面</div>
-          <ListRow title="标题" description="副标题" extra="描述文字" radius={6} align="center" onClick={() => console.info('点击事件')} />
-          <Button type="primary">默认</Button>
-          <Space>
-            <Icon.Add />
-            <IconFont name="down" />
-          </Space>
-        </main>
-      </PageProvider>
-    </>
-  );
-};
-
-export default Index;
-import { Button, Toast } from '@feewee/h5app-common';
-import { Helmet } from '@modern-js/runtime/head';
+import { Button, PageProvider, Toast } from '@feewee/h5app-common';
 import { useNavigate } from '@modern-js/runtime/router';
  
 function Index() {
   const navigate = useNavigate();
  
   return (
-    <>
-      <Helmet>
-        <link rel="icon" type="image/x-icon" href="https://lf3-static.bytednsdoc.com/obj/eden-cn/uhbfnupenuhf/favicon.ico" />
-      </Helmet>
+    <PageProvider tittle="急救待办">
       <main className="p-4 h-screen h-svh">
-        <div className="text-center">这是首页</div>
         <div className=" mt-4">
-          <Button type="info" shape="round" fill="outline" className="!mx-auto !block" onClick={() => navigate('/demo')}>
-            跳转页面
+          <Button
+            type="info"
+            shape="round"
+            fill="outline"
+            className="!mx-auto !block"
+            onClick={() => navigate('/ClaimReviewApprove/DetailList?applyId=22&queryType=1&queryItemType=5&type=1&typeId=12')}
+          >
+            索赔复核审批详情
           </Button>
  
           <Button
@@ -32,7 +33,7 @@ function Index() {
           </Button>
         </div>
       </main>
-    </>
+    </PageProvider>
   );
 }
  
@@ -51,3 +51,7 @@ body {
     height: 100%;
   }
 }
+
+.bg-color {
+  background-color: #f4f6fa;
+}
+import currency from 'currency.js';
+
+type RMBOption = { price?: number; symbol?: boolean; precision?: boolean };
+
+// 人民币格式化
+const RMB = ({ price = 0, symbol = true, precision = true }: RMBOption) => {
+  return currency(price, {
+    symbol: symbol ? '￥' : '',
+    precision: precision ? 2 : 0,
+  }).format();
+};
+
+// 人民币格式化-不包含符号和小数
+const rmb = (price?: number) => RMB({ price, symbol: false, precision: false });
+
+// 人民币格式化-包含符号，不包含小数
+const rmbS = (price?: number) => RMB({ price, precision: false });
+
+// 人民币格式化-包含小数，不包含符号
+const rmbP = (price?: number) => RMB({ price, symbol: false });
+
+// 人民币格式化-包含符号和小数
+const rmbSP = (price?: number) => RMB({ price });
+
+export default {
+  _: rmb,
+  s: rmbS,
+  p: rmbP,
+  sp: rmbSP,
+};