未审核开发

config/config.js

@@ -122,6 +122,12 @@ export default {
               name: 'settleManage',
               component: './settleManage',
             },
+            {
+              path: '/auditPending',
+              name: 'auditPending',
+              icon: 'smile',
+              component: './AfterSaleManage/Pending',
+            },
             {
               component: './404',
             },

src/pages/AfterSaleManage/Pending/auditModal.jsx

+import React from 'react';
+import { Modal, Form, Input, TreeSelect, notification } from 'antd';
+import { shopAudit } from './services';
+
+const FormItem = Form.Item;
+const { TextArea } = Input;
+const AuditModal = props => {
+  const {
+    visible,
+    onCancel,
+    form: { getFieldDecorator, getFieldValue, validateFields, resetFields },
+    formData = {},
+  } = props;
+
+  const handleCancel = isSuccess => {
+    resetFields();
+    onCancel(isSuccess);
+  };
+  const treeData = [
+    {
+      title: '同意',
+      value: '1',
+    },
+    {
+      title: '不同意',
+      value: '2',
+      children: [
+        {
+          title: '商品与出售商品不符',
+          value: '2-1',
+        },
+        {
+          title: '影响二次销售',
+          value: '2-2',
+        },
+      ],
+    },
+  ];
+  const handleOk = () => {
+    // 掉接口
+    // 成功后掉取消接口
+    validateFields(async (error, fieldsValue) => {
+      if (!error) {
+        let { auditResult } = fieldsValue;
+        const refuseCode = auditResult.split('-')?.[1] || '';
+        auditResult = auditResult.split('-')?.[0];
+        const data = await shopAudit({
+          ...fieldsValue,
+          refuseCode,
+          auditResult,
+          serviceNo: formData?.serviceNo,
+        });
+        if (data.code === '0000') {
+          notification.success({ message: '审核成功' });
+          handleCancel(true);
+        }
+      }
+    });
+  };
+
+  const layout = {
+    labelCol: { span: 6 },
+    wrapperCol: { span: 16 },
+  };
+  const isAgree = () => getFieldValue('auditResult') === '1';
+  const isRefuse = () => getFieldValue('auditResult') && getFieldValue('auditResult') !== '1';
+
+  return (
+    <Modal
+      title="售后操作确认"
+      visible={visible}
+      onOk={() => handleOk()}
+      onCancel={() => handleCancel()}
+    >
+      <Form {...layout} name="formData">
+        <FormItem label="" style={{ marginLeft: '120px' }}>
+          {getFieldDecorator('auditResult')(
+            <TreeSelect
+              style={{ width: '315px' }}
+              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+              treeData={treeData}
+              placeholder="请选择"
+            />,
+          )}
+        </FormItem>
+        {isAgree() && (
+          <div>
+            <FormItem label="退货地址">
+              {getFieldDecorator('receiveAddress', {
+                initialValue: formData.address,
+                rules: [
+                  {
+                    required: true,
+                    message: '请填写退货地址!',
+                  },
+                ],
+              })(<Input placeholder="请填写退货地址" allowClear />)}
+            </FormItem>
+            <FormItem label="收件人">
+              {getFieldDecorator('receiverName', {
+                initialValue: formData.name,
+                rules: [
+                  {
+                    required: true,
+                    message: '请填写收件人!',
+                  },
+                ],
+              })(<Input placeholder="请填写收件人" allowClear />)}
+            </FormItem>
+            <FormItem label="手机号码">
+              {getFieldDecorator('receiverPhone', {
+                initialValue: formData.phone,
+                rules: [
+                  {
+                    required: true,
+                    message: '请填写手机号码!',
+                  },
+                ],
+              })(<Input placeholder="请填写手机号码" allowClear />)}
+            </FormItem>
+          </div>
+        )}
+        {isRefuse() && (
+          <FormItem label="拒绝原因">
+            {getFieldDecorator('refuseDesc', {
+              initialValue: formData.refuseDesc,
+              rules: [
+                {
+                  required: true,
+                  message: '请填写拒绝原因!',
+                },
+              ],
+            })(<TextArea placeholder="请填写拒绝原因" allowClear />)}
+          </FormItem>
+        )}
+      </Form>
+    </Modal>
+  );
+};
+
+export default Form.create()(AuditModal);

src/pages/AfterSaleManage/Pending/data.js

+export const appealType = {
+  1: '已申诉',
+  0: '未申诉',
+};

src/pages/AfterSaleManage/Pending/detailTable.jsx

+import React from 'react';
+import { Modal, Table } from 'antd';
+
+export default props => {
+  const { visible, onCancel, dataSource } = props;
+  const handleCancel = () => {
+    onCancel();
+  };
+  const columns = [
+    {
+      title: '商品名称',
+      dataIndex: 'skuName',
+    },
+    {
+      title: '商品属性',
+      dataIndex: 'skuAttr',
+    },
+    {
+      title: '商品件数',
+      dataIndex: 'quantity',
+    },
+  ];
+  return (
+    <Modal title="售后操作确认" visible={visible} onCancel={handleCancel} footer={null}>
+      <Table dataSource={dataSource} columns={columns} key="skuName" pagination={false} />
+    </Modal>
+  );
+};

src/pages/AfterSaleManage/Pending/index.jsx

+import React, { useState, useRef } from 'react';
+import { Button, notification } from 'antd';
+import ProTable from '@ant-design/pro-table';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import { searchList, auditInfoApi, jdInfo } from './services';
+import { appealType } from './data';
+import AuditModal from './auditModal';
+import DetailTable from './detailTable';
+import ProofsModal from './proofsModal';
+
+// 售后状态和售后类型，售后原因枚举，
+export default () => {
+  const table = useRef();
+  const [visible, setVisible] = useState(false);
+  const [detailVisible, setDetailVisible] = useState(false);
+  const [detailInfo, setDetailInfo] = useState([]);
+  const [proofsVisible, setProofsVisible] = useState(false);
+  const [proofsData, setProofsData] = useState([]);
+  const [auditInfo, setAuditInfo] = useState({});
+  const viewDetail = async ({ serviceNo }) => {
+    const data = await jdInfo({ serviceNo });
+    setDetailInfo(data?.skuQuantity || []);
+    setDetailVisible(true);
+  };
+  const closeModal = isReload => {
+    if (isReload) {
+      // eslint-disable-next-line no-unused-expressions
+      table.current?.reload?.();
+    }
+    setVisible(false);
+    setDetailVisible(false);
+    setProofsVisible(false);
+  };
+  const openAudit = async ({ serviceNo }) => {
+    const data = await auditInfoApi({ serviceNo });
+    setAuditInfo({ ...data?.data, serviceNo });
+    setVisible(true);
+  };
+  const viewProofs = proofs => {
+    if (!proofs) {
+      notification.warning({ message: '该订单没有凭证' });
+      return;
+    }
+    setProofsData(proofs.split(','));
+    setProofsVisible(true);
+  };
+  const columns = [
+    {
+      title: '订单ID',
+      dataIndex: 'orderNo',
+      hideInSearch: true,
+    },
+    {
+      title: '售后单ID',
+      dataIndex: 'serviceNo',
+      hideInSearch: true,
+    },
+    {
+      title: '收货人姓名',
+      dataIndex: 'receiverName',
+    },
+    {
+      title: '收货人手机号',
+      dataIndex: 'receiverPhone',
+    },
+    {
+      title: '收货人地址',
+      dataIndex: 'receiveAddress',
+      hideInSearch: true,
+    },
+    {
+      title: '售后类型',
+      dataIndex: 'serviceType',
+      hideInSearch: true,
+      valueEnum: {
+        1: '退款不退货',
+        2: '退货退款',
+      },
+    },
+    {
+      title: '售后原因',
+      dataIndex: 'serviceReason',
+      hideInSearch: true,
+    },
+    {
+      title: '售后凭证',
+      dataIndex: 'proofs',
+      hideInSearch: true,
+      render: proofs => <a onClick={() => viewProofs(proofs)}>查看凭证</a>,
+    },
+    {
+      title: '售后发生时间',
+      dataIndex: 'serviceTime',
+      hideInSearch: true,
+    },
+    {
+      title: '超时时间',
+      dataIndex: 'overTime',
+      hideInSearch: true,
+    },
+    {
+      title: '是否催办',
+      dataIndex: 'reminderFlag',
+      hideInSearch: true,
+      valueEnum: {
+        1: '是',
+        2: '否',
+      },
+    },
+    {
+      title: '是否同意售后',
+      dataIndex: 'isAgree',
+      hideInSearch: true,
+    },
+    {
+      title: '拒绝原因',
+      dataIndex: 'refuseReason',
+      hideInSearch: true,
+    },
+    {
+      title: '售后申诉',
+      dataIndex: 'appealFlag',
+      valueEnum: appealType,
+      hideInSearch: true,
+    },
+    {
+      title: '操作',
+      hideInSearch: true,
+      width: 200,
+      render: (_, r) => [
+        <Button key="link1" onClick={() => openAudit(r)} className="mr10" type="primary">
+          审核
+        </Button>,
+        <Button key="link" onClick={() => viewDetail(r)} type="primary">
+          订单详情
+        </Button>,
+      ],
+    },
+  ];
+  return (
+    <PageHeaderWrapper>
+      <ProTable
+        columns={columns}
+        request={searchList}
+        rowKey="orderNo"
+        pagination={{
+          pagesSize: 20,
+        }}
+        bordered
+        actionRef={table}
+        scroll={{ x: '100%' }}
+        search={{
+          collapsed: false,
+        }}
+      />
+      <AuditModal visible={visible} onCancel={closeModal} formData={auditInfo} />
+      <DetailTable visible={detailVisible} onCancel={closeModal} dataSource={detailInfo} />
+      <ProofsModal visible={proofsVisible} onCancel={closeModal} data={proofsData} />
+    </PageHeaderWrapper>
+  );
+};

src/pages/AfterSaleManage/Pending/proofsModal.jsx

+import React from 'react';
+import { Modal } from 'antd';
+import style from './styles.less';
+
+export default props => {
+  const { visible, onCancel, data } = props;
+  const handleCancel = () => {
+    onCancel();
+  };
+  return (
+    <Modal title="售后凭证" visible={visible} onCancel={handleCancel} footer={null}>
+      <div className={style.proofsWrap}>
+        {data.map(item => (
+          <img src={item} key={item} alt={item} className={style.proofs} />
+        ))}
+      </div>
+    </Modal>
+  );
+};

src/pages/AfterSaleManage/Pending/services.js

+import request from '@/utils/request';
+import config from '../../../../config/env.config';
+
+let { kdspApi } = config;
+kdspApi = 'http://yapi.quantgroups.com/mock/351';
+
+// 分页查询所有数据
+export async function searchList(params) {
+  const param = {
+    ...params,
+    pageNo: params.current,
+  };
+  const data = await request.post('/api/kdsp/op/afs/shop/list', {
+    data: param,
+    prefix: kdspApi,
+  });
+  if (data.data) {
+    return {
+      total: data.data.total,
+      data: data.data.records,
+    };
+  }
+  return {
+    total: 0,
+    data: [],
+  };
+}
+
+// 售后单详情
+export async function jdInfo(params) {
+  const data = await request.get('/api/kdsp/op/afs/jd-info', {
+    params,
+    prefix: kdspApi,
+  });
+  return data.data || {};
+}
+// 售后审核
+export async function shopAudit(params) {
+  return request.post('/api/kdsp/op/afs/shop/audit', {
+    params,
+    prefix: kdspApi,
+  });
+}
+// 查询审核信息
+export async function auditInfoApi(serviceNo) {
+  return request.get('/api/kdsp/op/afs/back-info', {
+    params: { serviceNo },
+    prefix: kdspApi,
+  });
+}

src/pages/AfterSaleManage/Pending/styles.less

+.proofs {
+  padding: 10px;
+}
+
+.proofsWrap {
+  max-height: 600px;
+  overflow: auto;
+}