feat: 添加分组

package.json

@@ -69,6 +69,8 @@
 		"react": "^16.8.6",
 		"react-amap": "^1.2.8",
 		"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-helmet": "^5.2.1",
 		"react-router-dom": "^5.1.2",
@@ -127,4 +129,4 @@
 		"scripts/**/*.js"
 	],
 	"author": "congmin.hao"
-}
+}
\ No newline at end of file

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

+import React, { useRef } from 'react';
+import { useDrag, useDrop } from 'react-dnd';
+import { Tag } 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 ref = useRef(null);
+  // 因为没有定义收集函数，所以返回值数组第一项不要
+  const [, drop] = useDrop({
+    accept: ItemTypes.CARD,
+    hover: (item, monitor) => {
+      if (!ref.current) return;
+      const dragIndex = item.index;
+      const hoverIndex = index;
+      if (dragIndex === hoverIndex) return; // 如果回到自己的坑，那就什么都不做
+      changePosition(dragIndex, hoverIndex); // 调用传入的方法完成交换
+      item.index = hoverIndex; // 将当前当前移动到Box的index赋值给当前拖动的box，不然会出现两个盒子疯狂抖动！
+    },
+    drop: (item, monitor) => {},
+  });
+
+  const [{ isDragging }, drag] = useDrag({
+    type: ItemTypes.CARD,
+    item: { id, index, type: ItemTypes.CARD },
+    end: () => {},
+    isDragging: monitor => index === monitor.getItem().index,
+    collect: monitor => ({
+      isDragging: monitor.isDragging(),
+    }),
+  });
+
+  return (
+    <Tag
+      className={styles['groupBox-body--tag']}
+      ref={drag(drop(ref))}
+      style={{
+        opacity: isDragging ? 0.3 : 1,
+      }}
+    >
+      <HolderOutlined className={styles['groupBox-body--tag__move']} />
+      <span>{text}</span>
+      <FormOutlined className={styles['groupBox-body--tag__edit']} />
+      <CloseCircleOutlined className={styles['groupBox-body--tag__close']} />
+    </Tag>
+  );
+};
+export default DragTag;

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

+import React, { useState } from 'react';
+import { Input, Tag } from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
+import styles from '../../style.less';
+
+const InsertTag = options => {
+  const [inputVisible, setInputVisible] = useState(false);
+  const [inputValue, setInputValue] = useState('');
+
+  const showInput = () => {
+    setInputVisible(true);
+  };
+  const handleInputChange = e => {
+    setInputValue(e.target.value);
+  };
+  const handleInputConfirm = () => {
+    setInputVisible(false);
+    setInputValue('');
+  };
+
+  return (
+    <span>
+      {inputVisible && (
+        <Input
+          type="text"
+          size="small"
+          className={styles['groupBox-body--tag-input']}
+          value={inputValue}
+          onChange={handleInputChange}
+          onBlur={handleInputConfirm}
+          onPressEnter={handleInputConfirm}
+        />
+      )}
+      {!inputVisible && (
+        <Tag
+          className={[styles['groupBox-body--tag'], styles['groupBox-body--new']]}
+          onClick={showInput}
+        >
+          <PlusOutlined /> 添加
+        </Tag>
+      )}
+    </span>
+  );
+};
+
+export default InsertTag;

src/pages/GoodsManage/Takeaway/index.jsx

+import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { Spin, Button, Modal, message, notification, Tag } from 'antd';
+import { PlusOutlined, HolderOutlined, FormOutlined, CloseCircleOutlined } from '@ant-design/icons';
+import { DndProvider } from 'react-dnd';
+import HTML5Backend from 'react-dnd-html5-backend';
+import styles from '../style.less';
+import DragTag from './components/DragTag';
+import InsertTag from './components/InsertTag';
+
+const Takeaway = options => {
+  const [tags, setTags] = useState([
+    {
+      id: 0,
+      text: '000',
+    },
+    {
+      id: 1,
+      text: '111',
+    },
+  ]);
+
+  const changePosition = (dragIndex, hoverIndex) => {
+    const data = tags.slice();
+    const temp = data[dragIndex];
+    // 交换位置
+    data[dragIndex] = data[hoverIndex];
+    data[hoverIndex] = temp;
+    setTags(data);
+  };
+
+  return (
+    <div className={styles.takeawayBox}>
+      <div className={styles.groupBox}>
+        <div className={styles['groupBox-title']}>
+          <div>商品分组</div>
+          <Button className={styles['groupBox-btn']}>编辑分组</Button>
+        </div>
+        <div className={styles['groupBox-body']}>
+          <DndProvider backend={HTML5Backend}>
+            <div className={styles['groupBox-body--dragbox']}>
+              {tags.map((item, index) => (
+                <DragTag changePosition={changePosition} index={index} {...item} key={item.id} />
+              ))}
+              <InsertTag />
+            </div>
+          </DndProvider>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Takeaway;

src/pages/GoodsManage/index.jsx

@@ -27,6 +27,7 @@ import TempleatModal from './TempleatModal';
 import ServiceGoods from '../ServiceGoods';
 import InfoAudit from './infoAudit';
 import DraftModal from './DraftModal';
+import Takeaway from './Takeaway';
 
 import { GOOD_MANAGE } from '@/../config/permission.config';
 
@@ -414,6 +415,8 @@ class goodsManage extends Component {
               setArea={(isALL, type) => this.setArea(isALL, type)}
             />
           </Card>
+          <Takeaway />
+
           <Spin spinning={this.state.loading}>
             <Table
               dataSource={tableData?.records}

src/pages/GoodsManage/style.less

@@ -130,3 +130,55 @@
   text-align: left;
   word-break: break-all;
 }
+
+.takeawayBox {
+  margin-top: 20px;
+  background-color: #fff;
+}
+.groupBox {
+  padding: 0 24px;
+  &-title {
+    display: flex;
+    align-items: center;
+    padding: 10px 0;
+    font-size: 18px;
+  }
+  &-btn {
+    margin-left: 15px;
+  }
+  &-body {
+    padding: 5px 15px;
+    &--tag {
+      position: relative;
+      margin-right: 20px;
+      padding: 3px 10px;
+      font-size: 14px;
+      &__move {
+        cursor: move;
+      }
+      &__edit {
+        margin-left: 5px;
+        color: #1890ff;
+        cursor: pointer;
+      }
+      &__close {
+        position: absolute;
+        top: 0;
+        right: 0;
+        color: #1890ff;
+        font-size: 16px;
+        transform: translate(50%, -50%);
+        cursor: pointer;
+      }
+    }
+    &--tag-input {
+      width: 80px;
+    }
+    &--new {
+      cursor: pointer;
+    }
+    &--dragbox {
+      padding: 0;
+    }
+  }
+}