Merge branch 'afterSale' of git.quantgroup.cn:ui/merchant-manage-ui into afterSale

config/config.js

@@ -122,6 +122,18 @@ export default {
               name: 'settleManage',
               component: './settleManage',
             },
+            {
+              path: '/auditPending',
+              name: 'auditPending',
+              icon: 'smile',
+              component: './AfterSaleManage/Pending',
+            },
+            {
+              path: '/passAudit',
+              name: 'passAudit',
+              icon: 'smile',
+              component: './AfterSaleManage/PassAudit',
+            },
             {
               path: '/appeal',
               name: 'appeal',

src/pages/AfterSaleManage/PassAudit/index.jsx

+import React, { useState, useRef } from 'react';
+import { Button, notification, Popconfirm } from 'antd';
+import ProTable from '@ant-design/pro-table';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import { searchList, shopCheck, jdInfo, trackInfo } from '../services';
+import { getDetail } from '../../afterSale/appeal/services';
+import { columnPassAudit } from '../data';
+import RejectModal from '../components/rejectModal';
+import DetailTable from '../components/detailTable';
+import ProofsModal from '../components/proofsModal';
+import LogisticsCom from '../../orderManage/pendingDeliveryOrder/components/LogisticsCom';
+import Detail from '../../afterSale/components/detail';
+
+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 [serviceNoInfo, setServiceNoInfo] = useState({});
+  const [LogisticsComList, setLogisticsComList] = useState({});
+  const [LogisticsComModalVisible, handleComModalVisible] = useState(false);
+  const [detailModal, setDetailModal] = useState(false);
+  const [selectedRow, setSelectedRow] = useState({});
+  const viewDetail = async ({ serviceNo }) => {
+    const data = await jdInfo({ serviceNo });
+    setDetailInfo(data?.skuQuantity || []);
+    setDetailVisible(true);
+  };
+  const closeModal = isReload => {
+    if (isReload === true) {
+      // eslint-disable-next-line no-unused-expressions
+      table.current?.reload?.();
+    }
+    setVisible(false);
+    setDetailVisible(false);
+    setProofsVisible(false);
+    handleComModalVisible(false);
+  };
+  const reject = async ({ serviceNo }) => {
+    setServiceNoInfo(serviceNo);
+    setVisible(true);
+  };
+  const viewProofs = proofs => {
+    if (!proofs) {
+      notification.warning({ message: '该订单没有凭证' });
+      return;
+    }
+    setProofsData(proofs.split(','));
+    setProofsVisible(true);
+  };
+  const refund = async ({ serviceNo }) => {
+    const data = await shopCheck({
+      serviceNo,
+      auditResult: 1,
+    });
+    if (data.businessCode === '0000') {
+      notification.success({ message: '操作成功' });
+      closeModal(true);
+    }
+  };
+  const handleCom = async ({ companyCode, logisticsNo }) => {
+    const tempObj = {
+      expressCompanyCode: companyCode,
+      expressCompanyName: companyCode,
+      deliveryNo: logisticsNo,
+      detailList: [],
+      key: Date.now(),
+    };
+    const data = await trackInfo({ companyCode, logisticsNo });
+    if (!data) {
+      notification.info({ message: '暂无物流信息' });
+      return;
+    }
+    if (data.logisticsList?.length) {
+      data.logisticsList.forEach(v => {
+        tempObj.detailList = [...tempObj.detailList, ...v.detailList];
+      });
+    }
+    handleComModalVisible(true);
+    setLogisticsComList(tempObj);
+  };
+  const viewAppeal = async r => {
+    const detailData = await getDetail({ appealNo: r.appealNo });
+    setDetailModal(true);
+    setSelectedRow(detailData);
+  };
+  const columns = [
+    ...columnPassAudit,
+    {
+      title: '售后凭证',
+      dataIndex: 'proofs',
+      hideInSearch: true,
+      order: 4,
+      render: proofs => <a onClick={() => viewProofs(proofs)}>查看凭证</a>,
+    },
+    {
+      title: '售后申诉',
+      dataIndex: 'appealFlag',
+      hideInSearch: true,
+      render: (appealFlag, r) => {
+        if (appealFlag) {
+          return <a onClick={() => viewAppeal(r)}>申诉</a>;
+        }
+        return <div> 未申诉</div>;
+      },
+    },
+    {
+      title: '操作',
+      hideInSearch: true,
+      width: 450,
+      render: (_, r) => [
+        <Popconfirm
+          title="确定允许退款？"
+          onConfirm={() => refund(r)}
+          okText="确认"
+          cancelText="取消"
+          disabled={!r.showRefund || !r.showRefunded}
+        >
+          <Button
+            key="link1"
+            className="mr10"
+            type="primary"
+            disabled={!r.showRefund || !r.showRefunded}
+          >
+            {r.showRefunded ? '已退款' : '允许退款'}
+          </Button>
+        </Popconfirm>,
+        <Button
+          key="link"
+          onClick={() => reject(r)}
+          type="primary"
+          className="mr10"
+          disabled={!r.showRefuse}
+        >
+          驳回
+        </Button>,
+        <Button key="link" onClick={() => viewDetail(r)} type="primary" className="mr10">
+          订单详情
+        </Button>,
+        <Button
+          key="link"
+          onClick={() => handleCom(r)}
+          type="primary"
+          className="mr10"
+          disabled={!r.showLogistics}
+        >
+          查看物流
+        </Button>,
+      ],
+    },
+  ];
+  return (
+    <PageHeaderWrapper>
+      <ProTable
+        columns={columns}
+        request={params => searchList(params, 2)}
+        rowKey="orderNo"
+        pagination={{
+          pagesSize: 20,
+        }}
+        bordered
+        actionRef={table}
+        scroll={{ x: '100%' }}
+        search={{
+          collapsed: false,
+        }}
+      />
+      <RejectModal visible={visible} onCancel={closeModal} serviceNo={serviceNoInfo} />
+      <DetailTable visible={detailVisible} onCancel={closeModal} dataSource={detailInfo} />
+      <ProofsModal visible={proofsVisible} onCancel={closeModal} data={proofsData} />
+      <LogisticsCom
+        onSubmit={closeModal}
+        onCancel={closeModal}
+        modalVisible={LogisticsComModalVisible}
+        value={LogisticsComList}
+        key={LogisticsComList.key}
+      />
+      <Detail data={selectedRow} modalVisible={detailModal} onCancel={closeModal}></Detail>
+    </PageHeaderWrapper>
+  );
+};

src/pages/AfterSaleManage/Pending/index.jsx

+import React, { useState, useRef } from 'react';
+import { notification, Button } from 'antd';
+import ProTable from '@ant-design/pro-table';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import { searchList, auditInfoApi, jdInfo } from '../services';
+import { columnSticData, appealType } from '../data';
+import AuditModal from '../components/auditModal';
+import DetailTable from '../components/detailTable';
+import ProofsModal from '../components/proofsModal';
+import { getDetail } from '../../afterSale/appeal/services';
+import Detail from '../../afterSale/components/detail';
+
+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 [detailModal, setDetailModal] = useState(false);
+  const [selectedRow, setSelectedRow] = useState({});
+
+  const viewDetail = async ({ serviceNo }) => {
+    const data = await jdInfo({ serviceNo });
+    setDetailInfo(data?.skuQuantity || []);
+    setDetailVisible(true);
+  };
+  const closeModal = isReload => {
+    if (isReload === true) {
+      // 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 viewAppeal = async r => {
+    const detailData = await getDetail({ appealNo: r.appealNo });
+    setDetailModal(true);
+    setSelectedRow(detailData);
+  };
+  const columns = [
+    ...columnSticData,
+    {
+      title: '售后凭证',
+      dataIndex: 'proofs',
+      hideInSearch: true,
+      order: 4,
+      render: proofs => <a onClick={() => viewProofs(proofs)}>查看凭证</a>,
+    },
+    {
+      title: '售后申诉',
+      dataIndex: 'appealFlag',
+      valueEnum: appealType,
+      hideInSearch: true,
+      render: (appealFlag, r) => {
+        if (appealFlag) {
+          return <a onClick={() => viewAppeal(r)}>已申诉</a>;
+        }
+        return <div>未申诉</div>;
+      },
+    },
+    {
+      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={params => searchList(params, 1)}
+        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} />
+      <Detail data={selectedRow} modalVisible={detailModal} onCancel={closeModal}></Detail>
+    </PageHeaderWrapper>
+  );
+};

src/pages/AfterSaleManage/components/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
+                autoSize={{ minRows: 3, maxRows: 6 }}
+              />,
+            )}
+          </FormItem>
+        )}
+      </Form>
+    </Modal>
+  );
+};
+
+export default Form.create()(AuditModal);

src/pages/AfterSaleManage/components/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/components/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/components/rejectModal.jsx

+import React from 'react';
+import { Modal, Form, Input, notification } from 'antd';
+import { shopCheck } from '../services';
+
+const FormItem = Form.Item;
+const { TextArea } = Input;
+const RejectModal = props => {
+  const {
+    visible,
+    onCancel,
+    form: { getFieldDecorator, validateFields, resetFields },
+    serviceNo = null,
+  } = props;
+
+  const handleCancel = isSuccess => {
+    resetFields();
+    onCancel(isSuccess);
+  };
+  const handleOk = () => {
+    validateFields(async (error, fieldsValue) => {
+      if (!error) {
+        const data = await shopCheck({
+          ...fieldsValue,
+          serviceNo,
+          auditResult: 2,
+        });
+        if (data.code === '0000') {
+          notification.success({ message: '操作成功' });
+          handleCancel(true);
+        }
+      }
+    });
+  };
+
+  const layout = {
+    labelCol: { span: 6 },
+    wrapperCol: { span: 16 },
+  };
+  return (
+    <Modal title="驳回" visible={visible} onOk={() => handleOk()} onCancel={() => handleCancel()}>
+      <Form {...layout} name="formData">
+        <FormItem label="原因">
+          {getFieldDecorator('refuseDesc', {
+            rules: [
+              {
+                required: true,
+                message: '请填写原因!',
+              },
+            ],
+          })(
+            <TextArea placeholder="请填写原因" allowClear autoSize={{ minRows: 3, maxRows: 6 }} />,
+          )}
+        </FormItem>
+      </Form>
+    </Modal>
+  );
+};
+
+export default Form.create()(RejectModal);

src/pages/AfterSaleManage/data.js

+export const appealType = {
+  1: '已申诉',
+  0: '未申诉',
+};
+export const columnSticData = [
+  {
+    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: '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,
+  },
+];
+export const columnPassAudit = [
+  ...columnSticData,
+  {
+    title: '商家退货地址',
+    dataIndex: 'merchantAddress',
+    hideInSearch: true,
+  },
+  {
+    title: '退回物流',
+    dataIndex: 'expressCompanyName',
+    hideInSearch: true,
+  },
+  {
+    title: '退回物流单号',
+    dataIndex: 'deliveryNo',
+    hideInSearch: true,
+  },
+  {
+    title: '售后状态',
+    dataIndex: 'serviceStatus',
+    hideInSearch: true,
+  },
+];

src/pages/AfterSaleManage/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, queryStatus) {
+  const param = {
+    ...params,
+    pageNo: params.current,
+    queryStatus,
+  };
+  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,
+  });
+}
+
+// 审核核检
+export async function shopCheck(params) {
+  return request.post('/api/kdsp/op/afs/shop/check', {
+    params,
+    prefix: kdspApi,
+  });
+}
+// 查询物流信息
+export async function trackInfo(params) {
+  const data = await request.get('/api/kdsp/logistics/kd100/track-list', {
+    params,
+    prefix: kdspApi,
+  });
+  if (data.businessCode === '0000') {
+    return data.data;
+  }
+  return {};
+}

src/pages/AfterSaleManage/styles.less

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

src/pages/orderManage/pendingDeliveryOrder/components/LogisticsCom.jsx

@@ -13,7 +13,11 @@ const LogisticsCom = props => {
   return (
     <Modal
       destroyOnClose
-      title={`${result?.expressCompanyName}-${result?.deliveryNo}`}
+      title={`${
+        result?.expressCompanyName
+          ? `${result?.expressCompanyName}-${result?.deliveryNo}`
+          : '物流信息'
+      }`}
       visible={modalVisible}
       onCancel={() => onCancel()}
       onOk={() => onCancel()}