feat: 商户管理后台完结

src/pages/AfterSalesClaimForm/ClaimDescription.jsx

+import React, { useState, forwardRef, useImperativeHandle } from 'react';
+import { Form } from '@ant-design/compatible';
+import { Modal, Button } from 'antd';
+
+// 0: 待财务审核
+// 1: 审核通过
+// 2: 审核拒绝,
+
+const ExamineFormModal = forwardRef((props, ref) => {
+  const { form, claimVisible, closeClaimDescription, refresh } = props;
+  const [detailData, setDetailData] = useState({});
+  useImperativeHandle(ref, () => ({
+    setDetailData,
+    ...form,
+  }));
+
+  const onCancelEvent = () => {
+    closeClaimDescription();
+  };
+
+  const footerButton = [
+    <Button type="primary" key="cancel" onClick={onCancelEvent}>
+      关闭
+    </Button>,
+  ];
+  return (
+    <Modal
+      title="赔款说明"
+      centered
+      visible={claimVisible}
+      footer={detailData.audit ? footerButton : null}
+      bodyStyle={{ padding: '12px 0' }}
+      onCancel={onCancelEvent}
+    ></Modal>
+  );
+});
+
+export default Form.create()(ExamineFormModal);

src/pages/AfterSalesClaimForm/index.jsx

-// import React, { useState, useRef, useEffect } from 'react';
-// import ProTable from '@ant-design/pro-table';
-// import { PageHeaderWrapper } from '@ant-design/pro-layout';
-// import { columns, auditStatusValueEnum } from './staticdata';
-// import { accountApplyList, accountApplyDetail } from './service';
-// import ExamineFormModal from './ExamineFormModal';
-// import styled from './index.less';
-// import { getAppChannelAllList } from '@/services/common';
+import React, { useState, useRef, useEffect } from 'react';
+import ProTable from '@ant-design/pro-table';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import { Button, Image } from 'antd';
+import { saveAs } from 'file-saver';
+import { columnsConfig, getLastItem, checkImage } from './staticdata';
+import { getQueryClamsList } from './service';
+import ClaimDescription from './ClaimDescription';
 
-// /**
-//  * 渠道管理-审批记录 和 财务管理-资金审核
-//  * 共用一个页面
-//  * @param {*} router options
-//  * @returns ReactDOM
-//  */
-// const CapitalExamine = ({ route }) => {
-//   const isAudit = route.name === 'capitalExamine'; // 是否时资金审核页面
-//   const ref = useRef();
-//   const actionRef = useRef();
-//   const [examVisible, setExamVisible] = useState(false);
-//   const [examLoading, setExamLoading] = useState(false);
-//   const [channelAllList, setChannelAllList] = useState({});
-//   const search = {
-//     collapsed: false,
-//     collapseRender: () => null,
-//   };
+/**
+ * 售后赔款单
+ * 售后赔款单
+ * @param {*} router options
+ * @returns ReactDOM
+ */
+const AfterSalesClaimForm = ({ route }) => {
+  const ref = useRef();
+  const actionRef = useRef();
+  const [claimVisible, setclaimVisible] = useState(false);
+  const [claimLoading, setclaimLoading] = useState(false);
+  const [imagePreView, setImagePreView] = useState({
+    src: '',
+    visible: false,
+  });
+  const search = {
+    collapsed: false,
+    collapseRender: () => null,
+  };
 
-//   const query = async param => {
-//     const timeArray = param?.createdAt;
-//     if (timeArray?.length) {
-//       const [createdStartAt, createdEndAt] = timeArray;
-//       param.createdStartAt = createdStartAt;
-//       param.createdEndAt = createdEndAt;
-//       delete param.createdAt;
-//     }
-//     const [data] = await accountApplyList(param);
-//     return {
-//       total: data.total,
-//       data: data?.records,
-//     };
-//   };
+  const query = async params => {
+    const { createdAt, singleType, singleNumber, current: pageNo, ...other } = params;
+    const queryParams = { ...other, pageNo };
+    if (singleType && singleNumber) {
+      if (+singleType === 0) queryParams.id = singleNumber;
+      if (+singleType === 1) queryParams.orderNo = singleNumber;
+    }
+    if (createdAt?.length) {
+      const [startTime, endTime] = createdAt;
+      queryParams.startTime = startTime;
+      queryParams.endTime = endTime;
+    }
+    const { data } = await getQueryClamsList(queryParams);
+    return {
+      total: data.total,
+      data: data?.records,
+    };
+  };
 
-//   const openExamineFormModal = async (row, audit) => {
-//     setExamLoading(true);
-//     const [data, error] = await accountApplyDetail(row.id);
-//     if (!error) {
-//       data.audit = !!audit;
-//       data.auditStatusName = auditStatusValueEnum[data.auditStatus].text;
-//       actionRef.current.setDetailData(data);
-//       setExamVisible(true);
-//     }
-//     setExamLoading(false);
-//   };
+  const openSetclaimModal = async (row, audit) => {
+    setclaimLoading(true);
+    setclaimVisible(true);
+    setclaimLoading(false);
+  };
 
-//   const closeExamineFormModal = () => {
-//     setExamVisible(false);
-//   };
+  const closeClaimDescription = () => {
+    setclaimVisible(false);
+  };
 
-//   const columsOptions = {
-//     isAudit,
-//     openExamineFormModal,
-//     channelAllList,
-//   };
-//   // 获取所有渠道
-//   const getChannelAllList = async () => {
-//     const [data] = (await getAppChannelAllList()) || [];
-//     const list = {};
-//     if (data) {
-//       data.forEach(item => {
-//         list[item.id] = item.name;
-//       });
-//       setChannelAllList(list);
-//     }
-//   };
+  const refreshTable = () => {
+    ref.current.reload();
+  };
+  // eslint-disable-next-line consistent-return
+  const downLoadFile = async url => {
+    if (await checkImage(url)) {
+      setImagePreView({ src: url, visible: true });
+      return null;
+    }
+    saveAs(url, getLastItem(url));
+  };
 
-//   const refreshTable = () => {
-//     ref.current.reload();
-//   };
+  const toolBarRender = () => [
+    <Button type="link" onClick={openSetclaimModal}>
+      赔款说明
+    </Button>,
+  ];
 
-//   useEffect(() => {
-//     getChannelAllList();
-//   }, []);
-//   const onReset = () => {};
+  const onReset = () => {};
 
-//   return (
-//     <PageHeaderWrapper>
-//       <ProTable
-//         bordered
-//         loading={examLoading}
-//         type="cardList"
-//         request={query}
-//         className={styled.tableProName}
-//         tableClassName="capital"
-//         columns={columns(columsOptions, 'parent')}
-//         rowKey={(_, index) => index}
-//         search={search}
-//         options={false}
-//         actionRef={ref}
-//         toolBarRender={false}
-//         pagination={{
-//           pageSize: 10,
-//         }}
-//         onReset={onReset}
-//         // toolBarRender={[]}
-//         scroll={{ x: '100%', y: 430 }}
-//       ></ProTable>
-//       <ExamineFormModal
-//         refresh={refreshTable}
-//         examVisible={examVisible}
-//         wrappedComponentRef={actionRef}
-//         closeExamineFormModal={closeExamineFormModal}
-//       />
-//     </PageHeaderWrapper>
-//   );
-// };
+  return (
+    <PageHeaderWrapper>
+      <ProTable
+        bordered
+        loading={claimLoading}
+        type="cardList"
+        request={query}
+        tableClassName="capital"
+        columns={columnsConfig({ downLoadFile })}
+        rowKey={row => row.id}
+        search={search}
+        options={false}
+        actionRef={ref}
+        toolBarRender={toolBarRender}
+        pagination={{ pageSize: 10 }}
+        onReset={onReset}
+        scroll={{ x: '100%', y: 430 }}
+      />
+      <ClaimDescription
+        refresh={refreshTable}
+        claimVisible={claimVisible}
+        wrappedComponentRef={actionRef}
+        closeClaimDescription={closeClaimDescription}
+      />
+      <Image
+        width={200}
+        style={{ display: 'none' }}
+        src={imagePreView.src}
+        preview={{
+          visible: imagePreView.visible,
+          scaleStep: '1',
+          src: imagePreView.src,
+          onVisibleChange: value => {
+            setImagePreView({
+              src: '',
+              visible: false,
+            });
+          },
+        }}
+      />
+    </PageHeaderWrapper>
+  );
+};
 
-// export default CapitalExamine;
+export default AfterSalesClaimForm;

src/pages/AfterSalesClaimForm/service.js

+import request from '@/utils/request';
+import config from '@/../config/env.config';
+
+export const getQueryClamsList = params =>
+  request.post('/api/kdsp/queryClams', {
+    prefix: config.goodsApi,
+    data: params || {},
+  });

src/pages/AfterSalesClaimForm/staticdata.js

+import React from 'react';
+import { Image as ImageComponent, Button } from 'antd';
+
+export const getLastItem = thePath => thePath.substring(thePath.lastIndexOf('/') + 1);
+export const isImageType = url => {
+  const index = url.lastIndexOf('.');
+  const ext = url.substr(index + 1);
+  return ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].includes(
+    ext.toLowerCase(),
+  );
+};
+
+export const checkImage = url =>
+  new Promise(resolve => {
+    const image = new Image();
+    image.onload = () => {
+      resolve(true);
+    };
+    image.onerror = () => {
+      resolve(false);
+    };
+    image.src = url;
+  });
+
+const csListStyle = {
+  color: '#1890FF',
+  textAlign: 'left',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+  cursor: 'pointer',
+};
+
+export const typeConfig = {
+  1: {
+    text: '退运费',
+  },
+  2: {
+    text: '商品破损',
+  },
+};
+
+const singleNumberSearch = {
+  0: {
+    text: '赔款单号',
+  },
+  1: {
+    text: '订单编号',
+  },
+};
+
+export const columnsConfig = props => [
+  {
+    title: '单号搜索',
+    key: 'singleType',
+    dataIndex: 'singleType',
+    hideInTable: true,
+    valueEnum: singleNumberSearch,
+  },
+  {
+    key: 'singleNumber',
+    dataIndex: 'singleNumber',
+    hideInTable: true,
+  },
+  {
+    title: '赔款单号',
+    key: 'id',
+    dataIndex: 'id',
+    align: 'center',
+    hideInSearch: true,
+  },
+  {
+    title: '订单号',
+    key: 'orderNo',
+    dataIndex: 'orderNo',
+    align: 'center',
+    hideInSearch: true,
+  },
+  {
+    title: '赔款金额',
+    key: 'amount',
+    dataIndex: 'amount',
+    align: 'center',
+    width: 100,
+    hideInSearch: true,
+  },
+  {
+    title: '赔款类型',
+    key: 'type',
+    dataIndex: 'type',
+    align: 'center',
+    valueEnum: typeConfig,
+  },
+  {
+    title: '索赔原因',
+    key: 'reason',
+    dataIndex: 'reason',
+    align: 'center',
+    hideInSearch: true,
+  },
+  {
+    title: '退款说明',
+    key: 'remark',
+    dataIndex: 'remark',
+    align: 'center',
+    ellipsis: true,
+    hideInSearch: true,
+  },
+  {
+    title: '创建时间',
+    key: 'createdAt',
+    dataIndex: 'createdAt',
+    align: 'center',
+    valueType: 'dateRange',
+  },
+  {
+    title: '用户凭证',
+    key: 'proof',
+    dataIndex: 'proof',
+    align: 'center',
+    width: 190,
+    hideInSearch: true,
+    render: value =>
+      (value.userList || []).map(item => (
+        <ImageComponent style={{ paddingLeft: 5, marginTop: 5 }} key={item} width={50} src={item} />
+      )),
+  },
+  {
+    title: '审核意见',
+    key: 'proof',
+    dataIndex: 'proof',
+    align: 'center',
+    width: 190,
+    hideInSearch: true,
+    render: value =>
+      (value.csList || []).map(item => (
+        <div style={csListStyle} onClick={() => props.downLoadFile(item)}>
+          {item}
+        </div>
+      )),
+  },
+];