fix: 解决 forwardRef 问题

src/pages/GoodsManage/SearchForm/index.jsx

@@ -147,7 +147,7 @@ class goodsManage extends Component {
         className={styles.searchForm}
       >
         <FormItem label="SKU编码" name="skuId">
-          <Input placeholder="请输入SKU编码" allowClear style={selectW} />
+          <InputNumber placeholder="请输入SKU编码" allowClear style={selectW} />
         </FormItem>
         <FormItem label="商品名称" name="skuName">
           <Input placeholder="请输入商品名称" allowClear style={selectW} />
@@ -212,6 +212,7 @@ class goodsManage extends Component {
           <Button onClick={() => this.onReset()} type="primary" className={styles.button}>
             重置
           </Button>
+          {this.state.productType !== 5 && (
             <Button
               loading={this.state.loading}
               onClick={() => this.onExportGoodsInfo()}
@@ -219,6 +220,7 @@ class goodsManage extends Component {
             >
               导出
             </Button>
+          )}
         </FormItem>
         {canEditable ? (
           <FormItem style={{ float: 'right' }}>

src/pages/GoodsManage/Takeaway/components/GoodsGroup.jsx

 import React, { useState } from 'react';
-import { Button, Modal, Tag } from 'antd';
+import { Button, Select, Tag } from 'antd';
 import { DndProvider } from 'react-dnd';
 import HTML5Backend from 'react-dnd-html5-backend';
 import styles from '../../style.less';
@@ -11,6 +11,7 @@ const GoodsGroup = options => {
   const [groupEdit, setGroupEdit] = useState(false);
   const [selected, setSelected] = useState(0);
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [shops, setShops] = useState([]);
 
   const [tags, setTags] = useState([
     {
@@ -52,10 +53,20 @@ const GoodsGroup = options => {
   return (
     <div className={styles.groupBox}>
       <div className={styles['groupBox-title']}>
-        <div>商品分组</div>
-        <Button className={styles['groupBox-btn']} onClick={() => setGroupEdit(!groupEdit)}>
-          {groupEdit ? '完成' : '编辑分组'}
-        </Button>
+        <div className={styles['groupBox-title--name']}>所属门店</div>
+        <Select
+          showSearch
+          placeholder="请选择所属门店"
+          onChange={options.changeShop}
+          filterOption={(input, option) =>
+            (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
+          }
+          options={shops}
+        />
+      </div>
+      <div className={styles['groupBox-title']}>
+        <div className={styles['groupBox-title--name']}>商品分组</div>
+        <Button onClick={() => setGroupEdit(!groupEdit)}>{groupEdit ? '完成' : '编辑分组'}</Button>
       </div>
       <div className={styles['groupBox-body']}>
         {groupEdit ? (

src/pages/GoodsManage/Takeaway/components/GroupInfo.jsx

-import React, { useState } from 'react';
+import React from 'react';
 import { Form, Modal, Input, Checkbox, Alert } from 'antd';
 
 const GroupInfo = options => {

src/pages/GoodsManage/Takeaway/components/MinimumPurchase.jsx

-import React, { forwardRef } from 'react';
+import React from 'react';
 import { Modal, Form, Input } from 'antd';
 
-const MinimumPurchase = forwardRef(options => {
+const MinimumPurchase = options => {
   const [form] = Form.useForm();
   const handleCancel = () => {
     options.cancel(false);
@@ -42,6 +42,6 @@ const MinimumPurchase = forwardRef(options => {
       </Form>
     </Modal>
   );
-});
+};
 
 export default MinimumPurchase;

src/pages/GoodsManage/Takeaway/components/SendModal.jsx

-import React, { forwardRef } from 'react';
+import React from 'react';
 import { Modal, Form, Radio } from 'antd';
 
-const SendModal = forwardRef(options => {
+const SendModal = options => {
   const [form] = Form.useForm();
   const handleCancel = () => {
     options.cancel(false);
@@ -47,6 +47,6 @@ const SendModal = forwardRef(options => {
       <div>开启后顾客单点这些商品不可下单</div>
     </Modal>
   );
-});
+};
 
 export default SendModal;

src/pages/GoodsManage/Takeaway/components/StockModal.jsx

-import React, { forwardRef, useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Modal, Form, Input, Checkbox, Radio, Switch } from 'antd';
 import { deepClone } from '@/utils/utils';
 import styles from '../../style.less';
 
-const StockModal = forwardRef(options => {
+const StockModal = options => {
   const [stockType, setStockType] = useState(0);
   const [maxStock, setMaxStock] = useState(0);
   const [form] = Form.useForm();
@@ -102,6 +102,6 @@ const StockModal = forwardRef(options => {
       <div className={styles['stock-box--red']}>修改成功后，原库存将被替换，请谨慎操作</div>
     </Modal>
   );
-});
+};
 
 export default StockModal;

src/pages/GoodsManage/Takeaway/components/SwitchGroupModal.jsx

-import React, { forwardRef } from 'react';
+import React from 'react';
 import { Modal, Form, Select } from 'antd';
 
-const SwitchGroupModal = forwardRef(options => {
+const SwitchGroupModal = options => {
   const [form] = Form.useForm();
   const handleCancel = () => {
     options.cancel(false);
@@ -47,6 +47,6 @@ const SwitchGroupModal = forwardRef(options => {
       </Form>
     </Modal>
   );
-});
+};
 
 export default SwitchGroupModal;

src/pages/GoodsManage/Takeaway/components/WeekTime.jsx

-import React, { forwardRef, useState } from 'react';
+import React, { useState } from 'react';
 import { Modal, Radio, Form, TimePicker, Checkbox } from 'antd';
 import { MinusSquareOutlined, PlusSquareOutlined } from '@ant-design/icons';
 import moment from 'moment';
@@ -6,7 +6,7 @@ import { deepClone } from '@/utils/utils';
 import { saleWeeks } from '../../staticdata';
 import styles from '../../style.less';
 
-const WeekTime = forwardRef(options => {
+const WeekTime = options => {
   const [form] = Form.useForm();
   const [type, setType] = useState(1);
 
@@ -163,6 +163,6 @@ const WeekTime = forwardRef(options => {
       </Form>
     </Modal>
   );
-});
+};
 
 export default WeekTime;

src/pages/GoodsManage/Takeaway/index.jsx

-import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import { Spin, Table, Modal, message, notification } from 'antd';
 import { MenuOutlined, HolderOutlined, FormOutlined, CloseCircleOutlined } from '@ant-design/icons';
 import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
@@ -117,7 +117,7 @@ const Takeaway = options => {
   return (
     <div className={styles.takeawayBox}>
       <Spin spinning={loading}>
-        <GoodsGroup />
+        <GoodsGroup changeShop={setShopId} />
         <ActionBar
           selectedRowKeys={selectedRowKeys}
           handleSearch={getDataList}

src/pages/GoodsManage/style.less

@@ -54,8 +54,14 @@
 .searchForm {
   :global {
     .ant-form-item-label {
-      line-height: 40px;
+      line-height: 32px;
+    }
+    .ant-form-item {
+      margin-bottom: 12px;
+    }
   }
+  .button {
+    margin: 1px 5px;
   }
 }
 .queryBtn {
@@ -133,6 +139,7 @@
 
 .takeawayBox {
   margin-top: 20px;
+  padding-bottom: 40px;
   background-color: #fff;
 }
 .groupBox {
@@ -142,9 +149,9 @@
     align-items: center;
     padding: 10px 0;
     font-size: 18px;
+    &--name {
+      margin-right: 15px;
     }
-  &-btn {
-    margin-left: 15px;
   }
   &-body {
     padding: 5px 0;