添加订单审核

src/pages/afterSale/appeal/index.jsx

@@ -2,41 +2,55 @@ import React, { useState } from 'react';
 import ProTable from '@ant-design/pro-table';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 // import { FormInstance } from 'antd/lib/form';
+import { notification } from 'antd';
 import Detail from '../components/detail';
 import ImgModal from '../components/imgModal';
 import styles from './styles.less';
 import { columns } from './staticdata';
-import { query, getDetail, audit } from './services';
+import { query, getDetail } from './services';
+import AuditModal from '../components/audit';
 
 const Appeal = () => {
   // const protable = useRef();
   // const ref = useRef(FormInstance);
   const [detailModal, changeDetailModal] = useState(false);
+  const [auditModal, changeAuditModal] = useState(false);
   const [imgModal, changeImgModal] = useState(false);
   const [selectedRow, getRow] = useState({});
   const [imgData, getImgData] = useState([]);
   const [imgTitle, changeImgTitle] = useState('');
 
-  const handleAudit = async row => {
-    const data = await audit({
-      appealNo: row.appealNo,
-      appealResult: row.appealResult,
-      refuseReason: row.refuseReason,
-      receiverName: row.merchantName,
-      receiverPhone: row.merchantPhone,
-      receiveAddress: row.merchantAddress,
-    });
-    console.log('data-audiit', data);
-  };
+  // const handleAudit = async row => {
+  //   const data = await audit({
+  //     appealNo: row.appealNo,
+  //     appealResult: row.appealResult,
+  //     refuseReason: row.refuseReason,
+  //     receiverName: row.merchantName,
+  //     receiverPhone: row.merchantPhone,
+  //     receiveAddress: row.merchantAddress,
+  //   });
+  //   console.log('data-audiit', data);
+  // };
   const openDetail = async row => {
     const detailData = await getDetail({ appealNo: row.appealNo });
     changeDetailModal(true);
     getRow(detailData);
   };
+
+  const openAudit = async row => {
+    const detailData = await getDetail({ appealNo: row.appealNo });
+    getRow(detailData);
+    changeAuditModal(true);
+  };
   const openImgModal = imgList => {
+    if (!imgList.length) {
+      notification.error({
+        message: '啊哦～没有数据！',
+      });
+      return;
+    }
     // const list = ['https://www.baidu.com/img/flexible/logo/pc/result@2.png'];
     getImgData(imgList);
-    // getImgData(list);
     changeImgModal(true);
     changeImgTitle('查看图片');
   };
@@ -45,10 +59,15 @@ const Appeal = () => {
       changeDetailModal(false);
       return;
     }
+    if (params === 'Audit') {
+      changeAuditModal(false);
+      return;
+    }
     changeImgModal(false);
   };
   const res = {
-    handleAudit,
+    // handleAudit,
+    openAudit,
     openDetail,
     openImgModal,
   };
@@ -74,6 +93,11 @@ const Appeal = () => {
         modalVisible={detailModal}
         onCancel={() => closeModal('Detail')}
       ></Detail>
+      <AuditModal
+        data={selectedRow}
+        modalVisible={auditModal}
+        onCancel={() => closeModal('Audit')}
+      ></AuditModal>
       <ImgModal
         imgData={imgData}
         modalVisible={imgModal}

src/pages/afterSale/appeal/staticdata.js

@@ -8,7 +8,7 @@ export const refuseReasonEnum = {
 };
 
 export function columns(res) {
-  const { handleAudit, openDetail, openImgModal } = res;
+  const { openAudit, openDetail, openImgModal } = res;
   return [
     {
       title: '售后申诉单ID',
@@ -91,8 +91,9 @@ export function columns(res) {
       key: 'proofs',
       hideInSearch: true,
       render: proofs => {
-        const list = proofs.split(',');
-        return <a onClick={() => openImgModal(list)}>查看</a>;
+        console.log('proofs', proofs);
+        const list = proofs && proofs !== '-' ? proofs.split(',') : [];
+        return <a onClick={() => openImgModal(list)}>查看凭证</a>;
       },
     },
     {
@@ -123,8 +124,9 @@ export function columns(res) {
       key: 'supplement',
       hideInSearch: true,
       render: supplement => {
-        const list = supplement.split(',');
-        return <a onClick={() => openImgModal(list)}>查看</a>;
+        console.log('supplement', supplement);
+        const list = supplement && supplement !== '-' ? supplement.split(',') : [];
+        return <a onClick={() => openImgModal(list)}>查看补充资料</a>;
       },
     },
     {
@@ -149,7 +151,7 @@ export function columns(res) {
       valueType: 'option',
       key: 'option',
       render: (_, row) => [
-        <Button disabled={!row.showAudit} type="primary" onClick={() => handleAudit(row)}>
+        <Button disabled={row.showAudit} type="primary" onClick={() => openAudit(row)}>
           审核
         </Button>,
         <Button disabled={!row.showDetail} type="primary" onClick={() => openDetail(row)}>

src/pages/afterSale/components/audit.jsx

+import React from 'react';
+import { Modal, Row, Col, Input, Form, Select, notification } from 'antd';
+import { audit } from '../appeal/services';
+
+const { TextArea } = Input;
+const FormItem = Form.Item;
+const { Option } = Select;
+
+const AuditModal = props => {
+  const {
+    modalVisible,
+    onCancel,
+    data,
+    form: { getFieldDecorator, getFieldValue, validateFields, resetFields },
+  } = props;
+
+  const handleOk = () => {
+    // 掉接口
+    // 成功后掉取消接口
+    validateFields(async (error, fieldsValue) => {
+      if (!error) {
+        const auditData = await audit({
+          ...fieldsValue,
+          appealNo: data.appealNo,
+        });
+        if (auditData && auditData.code === '0000') {
+          notification.success({ message: '审核成功' });
+          resetFields();
+          onCancel();
+        }
+      }
+    });
+  };
+  const layout = {
+    labelCol: { span: 3 },
+    wrapperCol: { span: 15 },
+  };
+  const isAgree = () => getFieldValue('appealResult') === '1';
+  const isRefuse = () => getFieldValue('appealResult') && getFieldValue('appealResult') !== '1';
+  return (
+    <Modal
+      destroyOnClose
+      title="订单审核"
+      width="800px"
+      visible={modalVisible}
+      onCancel={() => onCancel()}
+      onOk={() => handleOk()}
+      bodyStyle={{ maxHeight: '800px', minHeight: '200px', overflow: 'auto' }}
+    >
+      {data ? (
+        <div>
+          <Row gutter={[10, 20]}>
+            <Col span={12}>
+              <p>申诉单ID: {data.appealNo}</p>
+            </Col>
+            <Col span={12}>
+              <p>订单ID: {data.orderNo}</p>
+            </Col>
+          </Row>
+          <Row gutter={[10, 20]}>
+            <Col span={12}>
+              <p>售后单ID: {data.serviceNo}</p>
+            </Col>
+            <Col span={12}>
+              <p>商家名称: {data.merchantName}</p>
+            </Col>
+          </Row>
+          <Row gutter={[10, 20]}>
+            <Col span={12}>
+              <p>商家手机号: {data.merchantPhone}</p>
+            </Col>
+            <Col span={12}>
+              <p>商家退货地址: {data.merchantAddress}</p>
+            </Col>
+          </Row>
+          <hr style={{ border: 'none', borderTop: '1px solid #eee', margin: '30px 0' }} />
+          <Row type="flex" gutter={[10, 20]}>
+            <Col span={13}>
+              <p>是否同意售后: {data.isAgree}</p>
+            </Col>
+          </Row>
+          <Row type="flex" gutter={[10, 20]} style={{ marginBottom: '10px' }}>
+            <Col span={4}>商家拒绝原因:</Col>
+            <Col span={20}>
+              <p style={{ width: '70%', marginLeft: '-25px' }}> {data.serviceReason}</p>
+            </Col>
+          </Row>
+
+          <Row type="flex" justify="start" align="middle" gutter={[10, 20]}>
+            <Col span={12}>争议问题描述: {data.disputeDesc}</Col>
+            {/* <Col span={16}>
+              <TextArea value={data.disputeDesc} />
+            </Col> */}
+          </Row>
+          <hr style={{ border: 'none', borderTop: '1px solid #eee', margin: '30px 0' }} />
+
+          <Row type="flex" align="middle" gutter={[10, 20]} style={{ minHeight: '100px' }}>
+            <Col>售后凭证： </Col>
+            {data.proofs &&
+              data.proofs.split(',').map(item => (
+                <Col key={item} span={4}>
+                  <img key={item} width="100%" src={item} alt="" />
+                </Col>
+              ))}
+          </Row>
+          <Row
+            type="flex"
+            justify="start"
+            align="middle"
+            gutter={[10, 20]}
+            style={{ minHeight: '100px' }}
+          >
+            <Col span={3}>补充资料：</Col>
+            {data.supplement &&
+              data.supplement.split(',').map(item => (
+                <Col key={item} span={8}>
+                  <img width="100%" src={item} key={item} alt="" />
+                </Col>
+              ))}
+          </Row>
+          <hr style={{ border: 'none', borderTop: '1px solid #eee', margin: '30px 0' }} />
+          <Row gutter={[10, 20]}>
+            <Form {...layout} name="formData">
+              <FormItem label="审核结果">
+                {getFieldDecorator('appealResult')(
+                  <Select placeholder="选择审核结果">
+                    <Option value="1">同意</Option>
+                    <Option value="2">不同意</Option>
+                  </Select>,
+                )}
+              </FormItem>
+              {isAgree() && (
+                <div>
+                  <FormItem label="退货地址">
+                    {getFieldDecorator('receiveAddress', {
+                      rules: [
+                        {
+                          required: true,
+                          message: '请填写退货地址!',
+                        },
+                      ],
+                    })(<Input placeholder="请填写退货地址" allowClear />)}
+                  </FormItem>
+                  <FormItem label="收件人">
+                    {getFieldDecorator('receiverName', {
+                      rules: [
+                        {
+                          required: true,
+                          message: '请填写收件人!',
+                        },
+                      ],
+                    })(<Input placeholder="请填写收件人" allowClear />)}
+                  </FormItem>
+                  <FormItem label="手机号码">
+                    {getFieldDecorator('receiverPhone', {
+                      rules: [
+                        {
+                          required: true,
+                          message: '请填写手机号码!',
+                        },
+                      ],
+                    })(<Input placeholder="请填写手机号码" allowClear />)}
+                  </FormItem>
+                </div>
+              )}
+              {isRefuse() && (
+                <FormItem label="拒绝原因">
+                  {getFieldDecorator('refuseReason', {
+                    rules: [
+                      {
+                        required: true,
+                        message: '请填写拒绝原因!',
+                      },
+                    ],
+                  })(
+                    <TextArea
+                      placeholder="请填写拒绝原因"
+                      allowClear
+                      autoSize={{ minRows: 3, maxRows: 6 }}
+                    />,
+                  )}
+                </FormItem>
+              )}
+            </Form>
+          </Row>
+        </div>
+      ) : (
+        '暂无详情信息'
+      )}
+    </Modal>
+  );
+};
+
+export default Form.create()(AuditModal);