feat: 分组添加编辑功能

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

-import React, { useRef } from 'react';
+import React, { useRef, useState } from 'react';
 import { useDrag, useDrop } from 'react-dnd';
-import { Tag } from 'antd';
+import { Tag, Input } from 'antd';
 import { HolderOutlined, FormOutlined, CloseCircleOutlined } from '@ant-design/icons';
 import styles from '../../style.less';
 
 const ItemTypes = {
   CARD: 'card',
 };
-const DragTag = ({ text, id, index, changePosition }) => {
+const DragTag = ({ text, id, index, changePosition, selected, groupEdit, changeGroup }) => {
+  const [isEdit, setIsEdit] = useState(false);
+  const [inputValue, setInputValue] = useState('');
+  const refInput = useRef();
+
+  const handleEdit = () => {
+    setIsEdit(true);
+    setInputValue(text || '');
+    const timer = setTimeout(() => {
+      if (refInput.current) {
+        refInput.current.focus();
+      }
+      clearTimeout(timer);
+    }, 1);
+  };
+  const handleInputChange = e => {
+    setInputValue(e.target.value);
+  };
+  const handleInputConfirm = () => {
+    setIsEdit(false);
+    setInputValue('');
+  };
+
+  const handleClose = () => {
+    console.log('111 :>> ', 111);
+  };
+
   const ref = useRef(null);
   // 因为没有定义收集函数，所以返回值数组第一项不要
   const [, drop] = useDrop({
@@ -33,19 +59,42 @@ const DragTag = ({ text, id, index, changePosition }) => {
     }),
   });
 
-  return (
+  const inputRender = () => (
+    <Input
+      type="text"
+      size="small"
+      ref={refInput}
+      className={styles['groupBox-body--tag-input']}
+      value={inputValue}
+      onChange={handleInputChange}
+      onBlur={handleInputConfirm}
+      onPressEnter={handleInputConfirm}
+    />
+  );
+
+  const groupEditRender = () => (
     <Tag
       className={styles['groupBox-body--tag']}
       ref={drag(drop(ref))}
       style={{
         opacity: isDragging ? 0.3 : 1,
+        display: isEdit ? 'none' : 'inline-block',
       }}
     >
       <HolderOutlined className={styles['groupBox-body--tag__move']} />
       <span>{text}</span>
-      <FormOutlined className={styles['groupBox-body--tag__edit']} />
-      <CloseCircleOutlined className={styles['groupBox-body--tag__close']} />
+      <span>
+        <FormOutlined className={styles['groupBox-body--tag__edit']} onClick={handleEdit} />
+      </span>
+      <CloseCircleOutlined className={styles['groupBox-body--tag__close']} onClick={handleClose} />
     </Tag>
   );
+
+  return (
+    <>
+      {isEdit && inputRender()}
+      {groupEditRender()}
+    </>
+  );
 };
 export default DragTag;

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

-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import { Input, Tag } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
 import styles from '../../style.less';
@@ -6,12 +6,18 @@ import styles from '../../style.less';
 const InsertTag = options => {
   const [inputVisible, setInputVisible] = useState(false);
   const [inputValue, setInputValue] = useState('');
-
+  const refInput = useRef();
   const showInput = () => {
     setInputVisible(true);
+    const timer = setTimeout(() => {
+      if (refInput.current) {
+        refInput.current.focus();
+      }
+      clearTimeout(timer);
+    }, 1);
   };
   const handleInputChange = e => {
-    setInputValue(e.target.value);
+    setInputValue(e.target.value || '');
   };
   const handleInputConfirm = () => {
     setInputVisible(false);
@@ -19,11 +25,12 @@ const InsertTag = options => {
   };
 
   return (
-    <span>
+    <>
       {inputVisible && (
         <Input
           type="text"
           size="small"
+          ref={refInput}
           className={styles['groupBox-body--tag-input']}
           value={inputValue}
           onChange={handleInputChange}
@@ -39,7 +46,7 @@ const InsertTag = options => {
           <PlusOutlined /> 添加
         </Tag>
       )}
-    </span>
+    </>
   );
 };
 

src/pages/GoodsManage/Takeaway/index.jsx

@@ -8,6 +8,9 @@ import DragTag from './components/DragTag';
 import InsertTag from './components/InsertTag';
 
 const Takeaway = options => {
+  const [groupEdit, setGroupEdit] = useState(false);
+  const [selected, setSelected] = useState(0);
+
   const [tags, setTags] = useState([
     {
       id: 0,
@@ -33,17 +36,43 @@ const Takeaway = options => {
       <div className={styles.groupBox}>
         <div className={styles['groupBox-title']}>
           <div>商品分组</div>
-          <Button className={styles['groupBox-btn']}>编辑分组</Button>
+          <Button className={styles['groupBox-btn']} onClick={() => setGroupEdit(!groupEdit)}>
+            {groupEdit ? '完成' : '编辑分组'}
+          </Button>
         </div>
         <div className={styles['groupBox-body']}>
+          {groupEdit ? (
             <DndProvider backend={HTML5Backend}>
               <div className={styles['groupBox-body--dragbox']}>
                 {tags.map((item, index) => (
-                <DragTag changePosition={changePosition} index={index} {...item} key={item.id} />
+                  <DragTag
+                    changePosition={changePosition}
+                    index={index}
+                    {...item}
+                    selected={selected}
+                    changeGroup={e => setSelected(e)}
+                    key={item.id}
+                  />
                 ))}
                 <InsertTag />
               </div>
             </DndProvider>
+          ) : (
+            <div className={styles['groupBox-body--dragbox']}>
+              {tags.map((item, index) => (
+                <Tag
+                  onClick={() => setSelected(index)}
+                  className={[
+                    styles['groupBox-body--tag-normal'],
+                    selected === index ? styles['groupBox-body--tag__cur'] : '',
+                  ]}
+                >
+                  <span>{item.text}</span>
+                </Tag>
+              ))}
+              <InsertTag />
+            </div>
+          )}
         </div>
       </div>
     </div>

src/pages/GoodsManage/index.jsx

@@ -61,6 +61,7 @@ class goodsManage extends Component {
     auditRow: {}, // 查看审核信息使用
     isVisibleDraft: false, // 显示隐藏草稿箱
     isEditDraft: false, // 是否编辑草稿
+    productType: 5, // 商品类型
   };
 
   currentLog = null;
@@ -279,6 +280,9 @@ class goodsManage extends Component {
   };
 
   changeProductType = e => {
+    this.setState({
+      productType: e || 1,
+    });
     this.categoryList(e);
   };
 
@@ -415,8 +419,10 @@ class goodsManage extends Component {
               setArea={(isALL, type) => this.setArea(isALL, type)}
             />
           </Card>
+          {this.state.productType === 5 ? (
             <Takeaway />
-
+          ) : (
+            <>
               <Spin spinning={this.state.loading}>
                 <Table
                   dataSource={tableData?.records}
@@ -488,6 +494,9 @@ class goodsManage extends Component {
                 isType={this.state.isType}
                 templateList={this.state.templateList}
               />
+            </>
+          )}
+        </Spin>
         {this.state.serviceVisble && (
           <ServiceGoods
             visible={this.state.serviceVisble}
@@ -501,7 +510,6 @@ class goodsManage extends Component {
             isDraft={this.state.isEditDraft}
           />
         )}
-        </Spin>
         {this.state.visibleAuditModal && (
           <InfoAudit
             visible={this.state.visibleAuditModal}

src/pages/GoodsManage/style.less

@@ -150,9 +150,12 @@
     padding: 5px 15px;
     &--tag {
       position: relative;
+      box-sizing: border-box;
+      height: 28px;
       margin-right: 20px;
-      padding: 3px 10px;
+      padding: 0 15px 0 10px;
       font-size: 14px;
+      line-height: 26px;
       &__move {
         cursor: move;
       }
@@ -171,8 +174,23 @@
         cursor: pointer;
       }
     }
+    &--tag-normal {
+      position: relative;
+      height: 28px;
+      padding: 0 10px;
+      font-size: 14px;
+      line-height: 26px;
+      cursor: pointer;
+    }
     &--tag-input {
       width: 80px;
+      height: 26px;
+      margin-right: 20px;
+    }
+    &--tag__cur {
+      color: #fff;
+      background-color: #1890ff;
+      border: 1px solid #1890ff;
     }
     &--new {
       cursor: pointer;