feat: 升级antd + react

package.json

@@ -51,12 +51,14 @@
 	"dependencies": {
 		"@ant-design/colors": "^3.1.0",
 		"@ant-design/compatible": "^1.1.0",
+		"@ant-design/cssinjs": "^1.10.1",
 		"@ant-design/icons": "^4.7.0",
+		"@ant-design/pro-components": "^2.3.59",
 		"@ant-design/pro-layout": "^4.11.4",
 		"@ant-design/pro-table": "^1.0.31",
 		"@antv/data-set": "^0.10.2",
 		"@sentry/react": "^7.41.0",
-		"antd": "^4.19.3",
+		"antd": "^4.24.10",
 		"antd-img-crop": "4.12.2",
 		"antd-virtual-select": "^1.1.2",
 		"array-move": "^4.0.0",
@@ -71,13 +73,13 @@
 		"path-to-regexp": "^3.1.0",
 		"pubsub-js": "^1.9.4",
 		"qs": "^6.9.0",
-		"react": "^16.8.6",
+		"react": "^16.14.0",
 		"react-amap": "^1.2.8",
 		"react-bmapgl": "^0.2.17",
 		"react-copy-to-clipboard": "^5.0.1",
 		"react-dnd": "10.0.2",
 		"react-dnd-html5-backend": "10.0.2",
-		"react-dom": "^16.8.6",
+		"react-dom": "^16.14.0",
 		"react-helmet": "^5.2.1",
 		"react-router-dom": "^5.1.2",
 		"react-sortable-hoc": "^2.0.0",

src/global.less

@@ -69,3 +69,10 @@ ol {
     }
   }
 }
+.ant-pro-card-body {
+  padding: 0 !important;
+}
+.ant-pro-table-list-toolbar-container {
+  box-sizing: border-box;
+  padding: 10px 30px !important;
+}

src/pages/businessCustomer/components/CustomerInfo.jsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { Button, Divider, Form, Input, Checkbox, Col, Row, Modal, Select } from 'antd';
 import { ExclamationCircleOutlined } from '@ant-design/icons';
 import { jsonToArray } from '@/utils/utils';
-import { layout, typeOptions, boolOptions, infoOptions } from '../model/index';
+import { layout, typeOptions, boolOptions, infoOptions } from '../staticData/index';
 import style from '../style/info.less';
 import MealSection from './MealSection';
 import MealLimit from './MealLimit';
@@ -93,7 +93,7 @@ const CustomerInfo = props => {
   return (
     <Modal
       title="企业客户信息"
-      visible={props.visible}
+      open={props.visible}
       destroyOnClose
       maskClosable={false}
       width="850px"

src/pages/businessCustomer/components/MealSection.jsx

 import React from 'react';
 import { Form, Space, Checkbox, TimePicker } from 'antd';
-import { mealSections } from '../model/index';
+import { mealSections } from '../staticData/index';
 
 const MealSection = props =>
   mealSections.map(field => (

src/pages/businessCustomer/index.jsx

@@ -2,7 +2,7 @@ import React, { useState, useRef } from 'react';
 import ProTable from '@ant-design/pro-table';
 import { Button } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
-import { customerColumn } from './model/index';
+import { customerColumn } from './staticData/index';
 import CustomerInfo from './components/CustomerInfo';
 
 const BusinessCustomer = () => {

src/pages/businessCustomer/model/index.js → src/pages/businessCustomer/staticData/index.js

@@ -73,7 +73,7 @@ export const customerColumn = options => {
 export const typeOptions = {
   1: '外卖',
   2: '自助餐',
-  3: '到店',
+  4: '到店',
 };
 
 export const infoOptions = [

src/pages/businessGoods/components/SaleDateModal.jsx

+import React, { useState } from 'react';
+import { Form, Input, Radio, Space, Col, Row, Modal } from 'antd';
+import { ExclamationCircleOutlined } from '@ant-design/icons';
+import { jsonToArray } from '@/utils/utils';
+import { weekOptions } from '../staticData/goods';
+
+const SaleDateModal = props => {
+  const [form] = Form.useForm();
+  const [value, setValue] = useState(1);
+
+  // 关闭分组信息弹窗
+  const handleCancel = () => {
+    props.handleClose(false);
+  };
+
+  const onChangeWeek = e => {
+    setValue(e.target.value);
+  };
+
+  // 添加/保存分组
+  const handleConfirm = async () => {
+    const res = await form.validateFields();
+    console.log('res :>> ', res);
+  };
+
+  console.log('visible :>> ', props.visible);
+
+  return (
+    <Modal
+      title="设置可售日期"
+      open={props.visible}
+      destroyOnClose
+      maskClosable={false}
+      width="200px"
+      onOk={handleConfirm}
+      onCancel={handleCancel}
+    >
+      <Radio.Group onChange={onChangeWeek} value={value}>
+        <Space direction="vertical">
+          {Object.keys(weekOptions).map(key => (
+            <Radio value={key}>{weekOptions[key]}</Radio>
+          ))}
+        </Space>
+      </Radio.Group>
+    </Modal>
+  );
+};
+export default SaleDateModal;

src/pages/businessGoods/service/api.js

+import request from '@/utils/request';
+import config from '@/../config/env.config';
+
+// import qs from 'qs';
+
+const { kdspApi, goodsApi } = config;
+
+/**
+ * 获取企业外卖商品列表
+ * http://yapi.quantgroups.com/project/389/interface/api/64794
+ */
+export async function apiTakeawayList(param) {
+  return request.post('/v1/channels/products/pick/b/pageList', {
+    data: param,
+    prefix: goodsApi,
+  });
+}

src/pages/businessGoods/model/goods.js → src/pages/businessGoods/staticData/goods.js

@@ -16,8 +16,18 @@ export const mealColumn = {
   4: '晚餐',
 };
 
+export const weekOptions = {
+  1: '周一',
+  2: '周二',
+  3: '周三',
+  4: '周四',
+  5: '周五',
+  6: '周六',
+  7: '周日',
+};
+
 export const takeawayGoodsColumn = options => {
-  const { onDel, companyEnum, shopEnum, onChangeFlag } = options;
+  const { onDel, companyEnum, shopEnum, onChangeFlag, setVisibleSaleDate } = options;
   return [
     {
       title: '企业名称',
@@ -60,7 +70,7 @@ export const takeawayGoodsColumn = options => {
       render: (_, record) => (
         <Space>
           <span>{_}</span>
-          <span>
+          <span onClick={setVisibleSaleDate(true)}>
             <FormOutlined />
           </span>
         </Space>

src/pages/businessGoods/style/index.less

+.search {
+  padding: 0;
+  :global {
+    .ant-form-item {
+      display: block !important;
+    }
+  }
+}

src/pages/businessGoods/takeawayGoods.jsx

 import React, { useState, useRef } from 'react';
-import ProTable from '@ant-design/pro-table';
+import { ProTable } from '@ant-design/pro-components';
 import { Button, Space } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
-import { takeawayGoodsColumn } from './model/goods';
-// import CustomerInfo from './components/CustomerInfo';
+import { takeawayGoodsColumn } from './staticData/goods';
+import utilStyle from '@/utils/utils.less';
+import { apiTakeawayList } from './service/api';
+import SaleDateModal from './components/SaleDateModal';
 
 const BusinessCustomer = () => {
-  const [visible, setVisible] = useState(true);
-  const query = async () => {};
+  const [visibleSaleDate, setVisibleSaleDate] = useState(true); // 可售日期弹窗
+  const [visibleSaleSection, setVisibleSaleSection] = useState(true); // 可售餐段弹窗
+  const [visiblePrice, setVisiblePrice] = useState(true); // 修改企业商品价格弹窗
+  const [visibleSort, setVisibleSort] = useState(true); // 商品排序弹窗
+  const [visibleGoods, setVisibleGoods] = useState(true); // 添加外卖商品弹窗
+  const [activeKey, setActiveKey] = useState('tab1');
+  const query = async params => {
+    console.log('params :>> ', params);
+    const data = {
+      page: params.current,
+      size: params.pageSize,
+      data: params,
+    };
+    return apiTakeawayList(data);
+  };
   const onDel = async () => {};
+  const onAdd = async () => {};
+  const options = {
+    setVisibleSaleDate,
+    setVisibleSaleSection,
+    setVisiblePrice,
+    setVisibleSort,
+    setVisibleGoods,
+    onDel,
+  };
 
   return (
     <div>
       <ProTable
         search={{
+          span: 6,
+          className: utilStyle.formSearch,
           collapsed: false,
           collapseRender: () => null,
         }}
-        columns={takeawayGoodsColumn({ onDel })}
+        tableClassName={utilStyle.formTable}
+        columns={takeawayGoodsColumn(options)}
         request={params => query({ ...params })}
         rowKey={r => r.id}
         expandIconColumnIndex={10}
         bordered
-        // options={false}
-        tableAlertRender={() => (
-          <Space>
-            <Button>111</Button>
-            <Button>2222</Button>
-          </Space>
-        )}
+        options={false}
+        toolbar={{
+          menu: {
+            type: 'tab',
+            activeKey,
+            items: [
+              {
+                key: 'tab1',
+                label: <span>取餐点1</span>,
+              },
+              {
+                key: 'tab2',
+                label: <span>取餐点2</span>,
+              },
+              {
+                key: 'tab3',
+                label: <span>取餐点3</span>,
+              },
+            ],
+            onChange: key => {
+              setActiveKey(key);
+            },
+          },
+          actions: [
+            <Button key="1" icon={<PlusOutlined />} type="primary" onClick={onAdd}>
+              添加外卖商品
+            </Button>,
+          ],
+        }}
         scroll={{ x: '100%', y: 400 }}
       />
-      {/* <CustomerInfo visible={visible} /> */}
+      {visibleSaleDate && (
+        <SaleDateModal visible={visibleSaleDate} close={() => setVisibleSaleDate(false)} />
+      )}
     </div>
   );
 };

src/utils/utils.less

@@ -48,3 +48,14 @@
     visibility: hidden;
   }
 }
+.formSearch {
+  padding: 0;
+  :global {
+    .ant-form-item {
+      display: block !important;
+    }
+  }
+}
+.formTable {
+  padding: 0;
+}