优化：积分兑换列表

src/api/interface/activityManage.ts

@@ -238,3 +238,48 @@ export type deleteMallType = InterFunction<
   },
   null
 >;
+// 积分商品订单列表
+export type mallOrderListType = InterListFunction<
+  {
+    isAdmin?: number;
+    userId?: number;
+  },
+  {
+    id: number;
+    userId: number;
+    pointsMallId: number;
+    address: string;
+    trackingNumber: string;
+    userName: string;
+    userPhone: string;
+    trackintCompany: string;
+    sendStatus: number;
+    goods: string;
+    goodsUrl: string;
+    needPoints: number;
+    createTime: string;
+  }
+>;
+// 修改商品订单
+export type updateGoodsOrderType = InterFunction<
+  {
+    address?: string;
+    id?: number;
+    pointsMallId?: number;
+    sendStatus?: number;
+    trackingNumber?: string;
+    trackintCompany?: string;
+    userId?: number;
+    userName?: string;
+    userPhone?: string;
+  },
+  NonNullable<unknown>
+>;
+// 物流-状态码-字典
+export type listKdnDicType = InterFunction<
+  NonNullable<unknown>,
+  {
+    exName: string;
+    exCode: string;
+  }[]
+>;

src/api/modules/activityManage.ts

@@ -13,8 +13,11 @@ import {
   getMallListType,
   insertMallType,
   listActivityPagesType,
+  listKdnDicType,
+  mallOrderListType,
   SignInListType,
   splitCouponDownType,
+  updateGoodsOrderType,
   updateMallType,
 } from '../interface/activityManage';
 import axios from '../request';
@@ -100,4 +103,16 @@ export class ActivityManageAPI {
   static deleteMall: deleteMallType = (params) => {
     return axios.get('/oms/pointsMall/deleteMall', { params });
   };
+  // 积分商品订单列表
+  static mallOrderList: mallOrderListType = (params) => {
+    return axios.post('/oms/pointsMall/mallOrderList', params);
+  };
+  // 修改商品订单
+  static updateGoodsOrder: updateGoodsOrderType = (params) => {
+    return axios.post('/oms/pointsMall/updateGoodsOrder', params);
+  };
+  // 物流-状态码-字典
+  static listKdnDic: listKdnDicType = (params) => {
+    return axios.get('/oms/express/listExpressInfo', { params });
+  };
 }

src/pages/activityManage/pointExchangeGoods/index.tsx

@@ -160,7 +160,7 @@ const PointExchangeGoodsPage: React.FC = () => {
             label: '商品名称',
             name: 'name',
             type: 'Input',
-            placeholder: '请输入活动名称',
+            placeholder: '请输入商品名称',
             maxlength: 20,
           },
         ]}

src/pages/activityManage/pointExchangeList/comp/addEditModal/index.tsx

+import React, { useEffect, useState } from 'react';
+import { Form, Input, message, Modal, ModalProps, Select } from 'antd';
+import { InterListType, InterReqType } from '~/api/interface';
+import { mallOrderListType, updateGoodsOrderType } from '~/api/interface/activityManage';
+import { Uploader } from '~/components/uploader';
+import { UploadOutlined } from '@ant-design/icons';
+import { ActivityManageAPI } from '~/api';
+
+// 详情类型
+type DetailType = InterListType<mallOrderListType>[0];
+// 请求数据
+type ReqType = InterReqType<updateGoodsOrderType>;
+
+const AddEditModalView: React.FC<ModalProps & { onCancel: () => void; data?: DetailType }> = ({
+  open,
+  title,
+  onCancel,
+  data,
+}) => {
+  // 店铺图片列表
+  const [imageList, setImageList] = useState<any>([]);
+  // 表单数据
+  const [form] = Form.useForm<ReqType>();
+  // 关闭弹窗
+  const handleCancel = () => {
+    onCancel?.();
+  };
+  // 快递列表
+  const [kdnDicList, setKdnDicList] = useState<
+    {
+      label: string;
+      value: string;
+    }[]
+  >([]);
+  // 获取快递字典
+  const getKdnDicList = async () => {
+    const res = await ActivityManageAPI.listKdnDic();
+    if (res && res.code === '200') {
+      setKdnDicList((res.result || [])?.map((i) => ({ label: i?.exName, value: i?.exCode })));
+      // console.log('获取快递字典 --->', res.result);
+    }
+  };
+  // 确定事件
+  const handleOk = () => {
+    form
+      .validateFields()
+      .then(async (values) => {
+        await handleSubmit(values);
+      })
+      .catch((err) => {
+        message
+          .warning({
+            content: err.errorFields[0].errors[0],
+          })
+          .then();
+      });
+  };
+  // 提交数据
+  const handleSubmit = async (values: ReqType) => {
+    const res = await ActivityManageAPI.updateGoodsOrder({
+      ...data,
+      ...values,
+      sendStatus: 1,
+    });
+    if (res && res.code === '200') {
+      message.success('发货成功');
+      handleCancel();
+    }
+  };
+  // 组件挂载
+  useEffect(() => {
+    getKdnDicList().then();
+    if (!open) return;
+    form.setFieldsValue(data);
+    try {
+      setImageList(
+        (JSON.parse(data?.goodsUrl || `[]`) || [])?.map((i: { url: string }, j: number) => ({
+          id: j,
+          url: i,
+        })),
+      );
+    } catch (e) {
+      setImageList([]);
+    }
+  }, [open]);
+  return (
+    <Modal open={open} title={title} onCancel={handleCancel} onOk={handleOk}>
+      <Form form={form} labelCol={{ span: 4 }} wrapperCol={{ span: 14 }}>
+        <Form.Item
+          label='商品名称'
+          name='goods'
+          rules={[{ required: true, message: '请输入商品名称' }]}
+        >
+          <Input placeholder={'请输入商品名称'} maxLength={25} allowClear disabled />
+        </Form.Item>
+        <Form.Item
+          label='商品图片'
+          name='goodsUrl'
+          rules={[{ required: true, message: '请上传商品图片' }]}
+        >
+          <Uploader
+            fileUpload
+            listType='picture-card'
+            defaultFileList={imageList}
+            disabled={true}
+            fileLength={1}
+            fileSize={10}
+          >
+            <UploadOutlined />
+          </Uploader>
+        </Form.Item>
+        <Form.Item
+          label='消耗积分'
+          name='needPoints'
+          rules={[
+            { required: true, message: '请输入消耗积分' },
+            { pattern: /^[1-9]\d*$/, message: '请输入正整数' },
+            {
+              validator: (_rule, value) => {
+                if (value > 99999999) {
+                  return Promise.reject('最大不能超过99999999');
+                }
+                return Promise.resolve();
+              },
+            },
+          ]}
+        >
+          <Input
+            placeholder={'请输入消耗积分'}
+            maxLength={25}
+            allowClear
+            type={'number'}
+            disabled
+          />
+        </Form.Item>
+        <Form.Item
+          label='快递公司'
+          name='trackintCompany'
+          rules={[{ required: true, message: '请选择快递公司' }]}
+        >
+          <Select placeholder={'请输入商品名称'} options={kdnDicList} allowClear />
+        </Form.Item>
+        <Form.Item
+          label='快递单号'
+          name='trackingNumber'
+          rules={[{ required: true, message: '请输入快递单号' }]}
+        >
+          <Input placeholder={'请输入快递单号'} maxLength={25} allowClear />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+
+export default AddEditModalView;

src/pages/activityManage/pointExchangeList/index.tsx

+import React, { useEffect, useState } from 'react';
+import SearchBox from '~/components/search-box';
+import { Button, message, Table } from 'antd';
+import { ActivityManageAPI } from '~/api';
+import { mallOrderListType } from '~/api/interface/activityManage';
+import { InterListType, InterReqListType } from '~/api/interface';
+import { ColumnsType } from 'antd/es/table';
+import AddEditModalView from './comp/addEditModal/index';
+
+// 表格列表
+type TableType = InterListType<mallOrderListType>;
+// 搜索表单的类型
+type ReqType = InterReqListType<mallOrderListType>;
+// 搜索表单的数据
+let query: ReqType = {};
+
+const PointExchangeListPage: React.FC = () => {
+  // 新增编辑弹窗是否开启
+  const [addEditShow, setAddEditShow] = useState<boolean>(false);
+  // 需要编辑的数据
+  const [recordData, setRecordData] = useState<TableType[0]>();
+  // 表格数据
+  const [tableData, setTableData] = useState<TableType>([]);
+  // 表格分页配置
+  const [pagination, setPagination] = useState({
+    total: 0,
+    pageSize: 10,
+    current: 1,
+    totalPage: 0,
+  });
+  // +++++++++++++++++++++++++++++++++++++++++++++++++++ //
+  // 新版通用部分(ES6+ for React) ZhangLK 2022/08/30 Start
+  // 加载列表
+  const getTableList = async (value = {}) => {
+    // 只需要修改这个地方的接口即可
+    const res = await ActivityManageAPI.mallOrderList({
+      pageNo: pagination.current,
+      pageSize: pagination.pageSize,
+      ...value,
+      ...query,
+      isAdmin: 1,
+    });
+    if (res && res.code === '200') {
+      const { list, pageNo, totalCount, pageSize, totalPage } = res.result; // 解构
+      setPagination({
+        total: totalCount,
+        current: pageNo,
+        pageSize,
+        totalPage,
+      });
+      setTableData(list || []);
+      // console.log('加载列表 --->', list);
+    } else {
+      message.warning(res.message);
+    }
+  };
+  // 翻页
+  const paginationChange = (pageNo: number, pageSize: number) => {
+    getTableList({ pageNo, pageSize }).then();
+  };
+  // 表单提交
+  const onFinish = (data: ReqType) => {
+    pagination.current = 1;
+    query = data;
+    getTableList(data).then();
+  };
+  // +++++++++++++++++++++++++++++++++++++++++++++++++++ //
+  // 页面挂载
+  useEffect(() => {
+    query = {};
+    (async () => {
+      await getTableList();
+    })();
+  }, []);
+  // 表格列配置
+  const columns: ColumnsType<TableType[0]> = [
+    {
+      title: '兑换商品',
+      dataIndex: 'goods',
+      align: 'center',
+      width: '150px',
+      ellipsis: true,
+    },
+    {
+      title: '收货姓名',
+      dataIndex: 'userName',
+      align: 'center',
+    },
+    {
+      title: '收货电话',
+      dataIndex: 'userPhone',
+      align: 'center',
+    },
+    {
+      title: '收货地址',
+      dataIndex: 'address',
+      align: 'center',
+      width: '200px',
+      ellipsis: true,
+    },
+    {
+      title: '是否发货',
+      dataIndex: 'sendStatus',
+      align: 'center',
+      render: (text) => (text !== 1 ? '未发货' : '已发货'),
+    },
+    {
+      title: '下单时间',
+      dataIndex: 'createTime',
+      align: 'center',
+    },
+    {
+      title: '操作',
+      dataIndex: 'id',
+      align: 'center',
+      render: (_text, record) => (
+        <>
+          <Button
+            type='link'
+            disabled={record.sendStatus === 1}
+            onClick={() => {
+              setRecordData(record);
+              setAddEditShow(true);
+            }}
+          >
+            发货
+          </Button>
+        </>
+      ),
+    },
+  ];
+  return (
+    <>
+      <SearchBox
+        search={[
+          {
+            label: '收货姓名',
+            name: 'userName',
+            type: 'Input',
+            placeholder: '请输入收货姓名',
+            maxlength: 20,
+          },
+          {
+            label: '收货人电话',
+            name: 'userPhone',
+            type: 'Input',
+            placeholder: '请输入收货人电话',
+            maxlength: 20,
+          },
+        ]}
+        isSearch={true}
+        isReset={true}
+        searchData={onFinish}
+      />
+      <Table
+        size='small'
+        dataSource={tableData}
+        columns={columns}
+        rowKey='id'
+        // scroll={{ x: 1000 }}
+        bordered
+        pagination={{
+          total: pagination.total,
+          pageSize: pagination.pageSize,
+          current: pagination.current,
+          showSizeChanger: true,
+          showQuickJumper: true,
+          onChange: (page: number, pageSize: number) => paginationChange(page, pageSize),
+          showTotal: (total, range) => `当前 ${range[0]}-${range[1]} 条记录 / 共 ${total} 条数据`,
+        }}
+      />
+      <AddEditModalView
+        open={addEditShow}
+        title={'发货'}
+        data={recordData}
+        onCancel={() => {
+          setAddEditShow(false);
+          setRecordData(undefined);
+          paginationChange(pagination?.current, pagination?.pageSize);
+        }}
+      />
+    </>
+  );
+};
+
+export default PointExchangeListPage;

src/router/router.tsx

@@ -38,6 +38,7 @@ import {
   ContactsOutlined,
   CommentOutlined,
   DropboxOutlined,
+  OrderedListOutlined,
 } from '@ant-design/icons';
 import { Spin } from 'antd';
 
@@ -176,6 +177,7 @@ import NoticeManageView from '~/pages/resourceManage/noticeManage';
 import CustomApplyPage from '~/pages/customManage/customApply';
 import StoreDecoratePage from '~/pages/resourceManage/storeDecorate';
 import PointExchangeGoodsPage from '~/pages/activityManage/pointExchangeGoods';
+import PointExchangeListPage from '~/pages/activityManage/pointExchangeList';
 const AddressManageView = React.lazy(() => import('~/pages/systemManage/addressManage'));
 
 // const IndustryListView = React.lazy(() => import('~/pages/mallManage/industryManage/industryList')); //行业列表
@@ -1059,7 +1061,16 @@ export const routerList: Array<RouteObjectType> = [
           id: 930,
           title: '兑换商品',
           icon: <DropboxOutlined />,
-          develop: true,
+        },
+      },
+      {
+        path: '/activityManage/pointExchangeList',
+        element: withLoadingComponent(<PointExchangeListPage />),
+        errorElement: <ErrorPage />,
+        meta: {
+          id: 940,
+          title: '兑换记录',
+          icon: <OrderedListOutlined />,
         },
       },
     ],