取消订单开发

config/config.js

@@ -145,6 +145,11 @@ export default {
               name: 'appeal',
               component: './afterSale/appeal',
             },
+            {
+              path: '/cancelBillManage',
+              name: 'cancelBillManage',
+              component: './cancelBillManage',
+            },
             {
               component: './404',
             },

config/env.config.js

 const isProduction = process.env.NODE_ENV === 'production';
 
 let envAPi = {
-  api: '//backstms-test2.liangkebang.net',
-  kdspOpApi: 'https://kdsp-operation-test2.liangkebang.net',
-  kdspApi: 'https://sc-op-api-test2.liangkebang.net/',
+  api: '//backstms-gyl.liangkebang.net',
+  kdspOpApi: 'https://kdsp-operation-gyl.liangkebang.net',
+  kdspApi: 'https://sc-op-api-gyl.liangkebang.net',
 
   qiniuHost: 'https://appsync.lkbang.net',
-  opapiHost: 'https://opapi-test2.liangkebang.net',
+  opapiHost: 'https://opapi-gyl.liangkebang.net',
   // opapiHost: 'http://192.168.29.45:7000',
 };
 

src/pages/cancelBillManage/PassAudit.jsx

+import React, { useState, useRef, useEffect } from 'react';
+import { Button } from 'antd';
+import ProTable from '@ant-design/pro-table';
+import { searchList, orderDetail } from './service';
+import { column } from './data';
+import DetailTable from './components/detailTable';
+
+export default () => {
+  const table = useRef();
+  const [detailVisible, setDetailVisible] = useState(false);
+  const [detailInfo, setDetailInfo] = useState([]);
+  const viewDetail = async ({ serviceNo }) => {
+    const data = await orderDetail({ serviceNo });
+    setDetailInfo(data || []);
+    setDetailVisible(true);
+  };
+  const closeModal = isReload => {
+    if (isReload === true) {
+      // eslint-disable-next-line no-unused-expressions
+      table.current?.reload?.();
+    }
+    setDetailVisible(false);
+  };
+
+  const query = async (params, type) => {
+    const tempParams = {
+      ...params,
+      applyTimeStartAt: params.applyTime?.[0],
+      applyTimeEndAt: params.applyTime?.[1],
+      orderTimeStartAt: params.orderTime?.[0],
+      orderTimeEndAt: params.orderTime?.[1],
+      auditStatus: 2,
+    };
+
+    return searchList(tempParams, type);
+  };
+  const columns = [
+    ...column,
+    {
+      title: '操作',
+      hideInSearch: true,
+      width: 150,
+      dataIndex: 'action',
+      fixed: 'right',
+      render: (_, r) => [
+        <Button key="link3" onClick={() => viewDetail(r)} type="primary" className="mr10">
+          订单详情
+        </Button>,
+      ],
+    },
+  ];
+  useEffect(() => {
+    query(
+      {
+        current: 1,
+        pageSize: 20,
+      },
+      2,
+    );
+  });
+  return (
+    <div>
+      <ProTable
+        key="passaudit"
+        columns={columns}
+        request={params => query(params, 2)}
+        rowKey="skuId"
+        pagination={{
+          pagesSize: 20,
+        }}
+        bordered
+        actionRef={table}
+        scroll={{ x: '100%', y: 400 }}
+        toolBarRender={false}
+        search={{
+          collapsed: false,
+          collapseRender: () => null,
+        }}
+      />
+      <DetailTable visible={detailVisible} onCancel={closeModal} dataSource={detailInfo} />
+    </div>
+  );
+};

src/pages/cancelBillManage/Pending.jsx

+import React, { useState, useRef } from 'react';
+import { Button } from 'antd';
+import ProTable from '@ant-design/pro-table';
+// import { searchList, auditInfoApi, orderDetail } from './service';
+import { searchList, orderDetail } from './service';
+import { column } from './data';
+import AuditModal from './components/auditModal';
+import DetailTable from './components/detailTable';
+
+export default () => {
+  const table = useRef();
+  const [visible, setVisible] = useState(false);
+  const [detailVisible, setDetailVisible] = useState(false);
+  const [detailInfo, setDetailInfo] = useState([]);
+  const [auditInfo, setAuditInfo] = useState({});
+
+  const query = async (params, type) => {
+    const tempParams = {
+      ...params,
+      applyTimeStartAt: params.applyTime?.[0],
+      applyTimeEndAt: params.applyTime?.[1],
+      orderTimeStartAt: params.orderTime?.[0],
+      orderTimeEndAt: params.orderTime?.[1],
+      auditStatus: 1,
+    };
+
+    return searchList(tempParams, type);
+  };
+
+  const viewDetail = async ({ serviceNo }) => {
+    const data = await orderDetail({ serviceNo });
+    setDetailInfo(data || []);
+    setDetailVisible(true);
+  };
+  const closeModal = isReload => {
+    if (isReload === true) {
+      // eslint-disable-next-line no-unused-expressions
+      table.current?.reload?.();
+    }
+    setVisible(false);
+    setDetailVisible(false);
+  };
+  const openAudit = async ({ serviceNo }) => {
+    // const data = await auditInfoApi({ serviceNo });
+    setAuditInfo({ serviceNo });
+    setVisible(true);
+  };
+  const columns = [
+    ...column,
+    {
+      title: '操作',
+      hideInSearch: true,
+      dataIndex: 'action',
+      width: 250,
+      fixed: 'right',
+      render: (_, r) => [
+        <Button key="link1" onClick={() => openAudit(r)} className="mr10" type="primary">
+          审核
+        </Button>,
+        <Button key="link" onClick={() => viewDetail(r)} type="primary">
+          订单详情
+        </Button>,
+      ],
+    },
+  ];
+  return (
+    <div>
+      <ProTable
+        columns={columns}
+        request={params => query(params, 1)}
+        rowKey="serviceNo"
+        pagination={{
+          pagesSize: 20,
+        }}
+        bordered
+        actionRef={table}
+        scroll={{ x: '100%', y: 400 }}
+        search={{
+          collapsed: false,
+          collapseRender: () => null,
+        }}
+        toolBarRender={false}
+      />
+      <AuditModal visible={visible} onCancel={closeModal} formData={auditInfo} />
+      <DetailTable visible={detailVisible} onCancel={closeModal} dataSource={detailInfo} />
+    </div>
+  );
+};

src/pages/cancelBillManage/components/auditModal.jsx

+import React from 'react';
+import { Modal, Form, Input, Cascader, notification } from 'antd';
+import { shopAudit } from '../service';
+
+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 = [
+    {
+      label: '同意',
+      value: true,
+    },
+    {
+      label: '不同意',
+      value: false,
+      children: [
+        {
+          label: '订单已发货',
+          value: 10,
+        },
+        {
+          label: '已与客户沟通继续发货',
+          value: 20,
+        },
+        {
+          label: '其他',
+          value: 30,
+        },
+      ],
+    },
+  ];
+  const handleOk = () => {
+    validateFields(async (error, fieldsValue) => {
+      if (!error) {
+        const { approve } = fieldsValue;
+        const data = await shopAudit({
+          ...fieldsValue,
+          refuseReasonCode: approve?.[1],
+          approve: approve?.[0],
+          serviceNo: formData?.serviceNo,
+        });
+        if (data.businessCode === '0000') {
+          notification.success({ message: '审核成功' });
+          handleCancel(true);
+        }
+      }
+    });
+  };
+
+  const layout = {
+    labelCol: { span: 6 },
+    wrapperCol: { span: 16 },
+  };
+  const approve = getFieldValue('approve');
+  const isRefuse = () => approve && approve[0] !== 1;
+  return (
+    <Modal
+      title="售后操作确认"
+      visible={visible}
+      onOk={() => handleOk()}
+      onCancel={() => handleCancel()}
+    >
+      <Form {...layout} name="formData">
+        <FormItem label="审核结果">
+          {getFieldDecorator('approve')(
+            <Cascader
+              allowClear
+              showSearch
+              style={{ width: '315px' }}
+              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+              options={treeData}
+              placeholder="请选择"
+            />,
+          )}
+        </FormItem>
+        {isRefuse() && approve[1] === 30 && (
+          <FormItem label="拒绝原因">
+            {getFieldDecorator('refuseReasonRemark', {
+              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/cancelBillManage/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: '商品名称',
+      width: 400,
+      dataIndex: 'skuName',
+    },
+    {
+      title: '商品属性',
+      dataIndex: 'skuAttr',
+    },
+    {
+      title: '商品件数',
+      dataIndex: 'count',
+    },
+  ];
+  return (
+    <Modal title="订单详情" visible={visible} onCancel={handleCancel} footer={null} width={800}>
+      <Table dataSource={dataSource} columns={columns} key="skuName" pagination={false} bordered />
+    </Modal>
+  );
+};

src/pages/cancelBillManage/components/rejectModal.jsx

+import React from 'react';
+import { Modal, Form, Input, notification } from 'antd';
+import { shopCheck } from '../service';
+
+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('refuseReasonRemark', {
+            rules: [
+              {
+                required: true,
+                message: '请填写原因!',
+              },
+            ],
+          })(
+            <TextArea placeholder="请填写原因" allowClear autoSize={{ minRows: 3, maxRows: 6 }} />,
+          )}
+        </FormItem>
+      </Form>
+    </Modal>
+  );
+};
+
+export default Form.create()(RejectModal);

src/pages/cancelBillManage/data.js

+// import { Tag, Badge } from 'antd';
+// import React from 'react';
+
+export const appealType = {
+  1: '已申诉',
+  0: '未申诉',
+};
+export const column = [
+  {
+    title: '订单ID',
+    dataIndex: 'orderId',
+    width: 200,
+  },
+  {
+    title: '收货人姓名',
+    dataIndex: 'receiverName',
+    width: 200,
+  },
+  {
+    title: '收货人手机号',
+    dataIndex: 'receiverPhone',
+    width: 200,
+  },
+
+  {
+    title: '订单取消提交时间',
+    dataIndex: 'applyTime',
+    key: 'applyTime',
+    valueType: 'dateRange',
+    width: 200,
+  },
+  {
+    title: '订单创建时间',
+    dataIndex: 'orderTime',
+    key: 'orderTime',
+    valueType: 'dateRange',
+    width: 200,
+  },
+  {
+    title: '支付完成时间',
+    dataIndex: 'payFinishTime',
+    key: 'payFinishTime',
+    // valueType: 'dateRange',
+    hideInSearch: true,
+    width: 200,
+  },
+
+  {
+    title: '收货人地址',
+    dataIndex: 'receiverAddress',
+    width: 200,
+    hideInSearch: true,
+  },
+
+  {
+    title: '提交订单取消时状态',
+    dataIndex: 'applyAtOrderStatus',
+    hideInSearch: true,
+    width: 200,
+    valueEnum: {
+      1: '待收货（发货中）',
+      2: '待收货（已发货）',
+    },
+  },
+
+  {
+    title: '是否催办',
+    dataIndex: 'reminderFlag',
+    hideInSearch: true,
+    width: 120,
+    valueEnum: {
+      true: '是',
+      false: '否',
+    },
+  },
+  {
+    title: '审核状态',
+    dataIndex: 'auditStatus',
+    hideInSearch: true,
+    width: 120,
+    valueEnum: {
+      1: '待审核',
+      2: '已审核',
+    },
+  },
+  {
+    title: '审核结果',
+    dataIndex: 'auditResult',
+    hideInSearch: true,
+    width: 200,
+    valueEnum: {
+      0: '待处理',
+      1: '同意',
+      2: '不同意',
+    },
+  },
+  {
+    title: '审核拒绝原因',
+    dataIndex: 'refuseReason',
+    hideInSearch: true,
+    width: 200,
+  },
+  {
+    title: '审核超时时间',
+    dataIndex: 'auditOverTime',
+    hideInSearch: true,
+    width: 200,
+  },
+];

src/pages/cancelBillManage/index.jsx

+import { Tabs } from 'antd';
+import React from 'react';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import Pending from './Pending';
+import PassAudit from './PassAudit';
+
+const { TabPane } = Tabs;
+
+export default function CancelBillManage() {
+  // const [tabKey, setTabKey] = useState({});
+  // const changeTab = () => {
+  //   const key = tabKey + 1;
+  //   setTabKey(key)
+  // }
+  return (
+    <PageHeaderWrapper>
+      <Tabs defaultActiveKey="1">
+        <TabPane tab="未审核" key="1">
+          <Pending />
+        </TabPane>
+        <TabPane tab="已审核" key="2">
+          <PassAudit />
+        </TabPane>
+      </Tabs>
+    </PageHeaderWrapper>
+  );
+}

src/pages/cancelBillManage/service.js

+import request from '@/utils/request';
+// import config from '../../../config/env.config';
+// import { stringify } from 'qs';
+// import _ from 'lodash';
+
+// const { kdspApi } = config;
+const kdspApi = 'http://192.168.29.106:7000';
+
+// 分页查询所有数据
+export async function searchList(params, auditStatus) {
+  const param = {
+    ...params,
+    pageIndex: params.current,
+    pageSize: params.pageSize || 20,
+    auditStatus,
+  };
+  const data = await request.post('/cancel-order/apply/page-list', {
+    prefix: kdspApi,
+    // data: stringify(param),
+    data: param,
+    // headers: {
+    //   'Content-Type': 'application/x-www-form-urlencoded',
+    // },
+  });
+  if (data.data) {
+    return {
+      total: data.data.total,
+      data: data.data.records,
+    };
+  }
+  return {
+    total: 0,
+    data: [],
+  };
+}
+
+// 售后单详情
+export async function orderDetail(params) {
+  const data = await request.get('/cancel-order/sku', {
+    prefix: kdspApi,
+    params,
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+    },
+  });
+  return data.data || [];
+}
+// 售后审核
+export async function shopAudit(params) {
+  return request.post('/cancel-order/audit', {
+    data: params,
+    prefix: kdspApi,
+  });
+}
+// 查询审核信息
+// export async function auditInfoApi(params) {
+//   return request.get('/api/kdsp/op/afs/back-info', {
+//     params,
+//     prefix: kdspApi,
+//   });
+// }
+
+// 审核核检
+export async function shopCheck(params) {
+  return request.post('/api/kdsp/op/afs/shop/check', {
+    params,
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+    },
+    prefix: kdspApi,
+  });
+}
+// 查询物流信息
+export async function trackInfo(params) {
+  const data = await request.get('/api/kdsp/op/logistics/kd100/track-list', {
+    params,
+    prefix: kdspApi,
+  });
+  if (data.businessCode === '0000') {
+    return data.data;
+  }
+  return {};
+}

src/pages/cancelBillManage/styles.less

+.proofs {
+  padding: 5px;
+  border: 1px solid #ddd;
+  border-radius: 10px;
+}
+
+.proofsWrap {
+  display: flex;
+  justify-content: space-between;
+  min-height: 300px;
+  max-height: 600px;
+  overflow: auto;
+}
+.detailWrap {
+  min-height: 300px;
+  max-height: 600px;
+  overflow: auto;
+}