fix: 修改分组

config/env.config.js

 const isProduction = process.env.NODE_ENV === 'production';
 const isPre = process.env.PRE_ENV === 'pre';
-const environment = 'xyqb';
+const environment = 'sc1';
 const envAPi = {
   api: `https://security-${environment}.liangkebang.net`, //'https://security-xyqb.liangkebang.net',
   kdspOpApi: `https://sc-merchant-api-${environment}.liangkebang.net`,

src/pages/GoodsManage/SearchForm/index.jsx

@@ -143,6 +143,7 @@ class goodsManage extends Component {
       <Form
         ref={this.formRef}
         name="horizontal_login"
+        initialValues={{ productType: 1 }}
         layout="inline"
         className={styles.searchForm}
       >

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

@@ -7,20 +7,13 @@ import styles from '../../style.less';
 const ItemTypes = {
   CARD: 'card',
 };
-const DragTag = ({ text, id, index, changePosition }) => {
+const DragTag = ({ text, id, index, changePosition, endChangePosition, edit }) => {
   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);
+    edit(id);
   };
   const handleInputChange = e => {
     setInputValue(e.target.value);
@@ -46,7 +39,12 @@ const DragTag = ({ text, id, index, changePosition }) => {
       changePosition(dragIndex, hoverIndex); // 调用传入的方法完成交换
       item.index = hoverIndex; // 将当前当前移动到Box的index赋值给当前拖动的box，不然会出现两个盒子疯狂抖动！
     },
-    drop: (item, monitor) => {},
+    drop: (item, monitor) => {
+      const dragIndex = item.index;
+      const hoverIndex = index;
+      if (dragIndex === hoverIndex) return; // 如果回到自己的坑，那就什么都不做
+      endChangePosition(dragIndex, hoverIndex); // 调用传入的方法完成交换
+    },
   });
 
   const [{ isDragging }, drag] = useDrag({

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

-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Button, Select, Tag } from 'antd';
 import { DndProvider } from 'react-dnd';
 import HTML5Backend from 'react-dnd-html5-backend';
@@ -6,42 +6,60 @@ import styles from '../../style.less';
 import DragTag from './DragTag';
 import InsertTag from './InsertTag';
 import GroupInfo from './GroupInfo';
+import {
+  apiDelStorage,
+  apiSortStorage,
+  apiStorageList,
+  apiSupplierShopList,
+  apiStorageInfo,
+} from '../../service';
 
 const GoodsGroup = options => {
   const [groupEdit, setGroupEdit] = useState(false);
   const [selected, setSelected] = useState(0);
+  const [storageId, setStorageId] = useState(0);
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [shops, setShops] = useState([]);
+  const [tags, setTags] = useState([]);
 
-  const [tags, setTags] = useState([
-    {
-      id: 0,
-      text: '000',
-    },
-    {
-      id: 1,
-      text: '111',
-    },
-    {
-      id: 2,
-      text: '000',
-    },
-    {
-      id: 3,
-      text: '111',
-    },
-    {
-      id: 4,
-      text: '000',
-    },
-    {
-      id: 5,
-      text: '111',
-    },
-  ]);
+  const getShopList = async () => {
+    const user = localStorage.getItem('user');
+    const json = JSON.parse(user);
+    const res = await apiSupplierShopList(json.id);
+    if (res && res.data && res.data.length > 0) {
+      setShops(
+        res.data.map(item => ({
+          label: item.name,
+          value: +item.id,
+        })),
+      );
+      options.changeShop(+res.data[0].id);
+    }
+  };
+
+  const getGroupList = async () => {
+    const res = await apiStorageList({
+      shopId: options.shopId,
+    });
+    if (res && res.data && res.data.length > 0) {
+      const arr = res.data
+        .sort((x, y) => x.priority - y.priority)
+        .map(item => ({
+          text: item.name,
+          id: item.rackId,
+        }));
+      setTags(arr);
+      setSelected(res.data[0].rackId);
+    }
+  };
+
+  const handelEdit = async id => {
+    setStorageId(id || 0);
+    setIsModalOpen(true);
+  };
 
   // 更换位置
-  const changePosition = (dragIndex, hoverIndex) => {
+  const changePosition = async (dragIndex, hoverIndex) => {
     const data = tags.slice();
     const temp = data[dragIndex];
     // 交换位置
@@ -49,21 +67,58 @@ const GoodsGroup = options => {
     data[hoverIndex] = temp;
     setTags(data);
   };
+  const endChangePosition = async (dragIndex, hoverIndex) => {
+    const data = tags.slice();
+    const temp = data[dragIndex];
+    // 交换位置
+    data[dragIndex] = data[hoverIndex];
+    data[hoverIndex] = temp;
+    const storageRankList = data.map((item, i) => ({
+      id: item.id,
+      priority: i + 1,
+    }));
+    const params = {
+      shopId: options.shopId,
+      storageRankList,
+    };
+    await apiSortStorage(params);
+    getGroupList();
+  };
+
+  const onSelect = i => {
+    setSelected(i);
+  };
+
+  useEffect(() => {
+    if (options.shopId) {
+      getGroupList();
+    }
+  }, [options.shopId]);
+  useEffect(() => {
+    getShopList();
+  }, []);
+  useEffect(() => {
+    options.changeGroup(selected);
+  }, [selected]);
 
   return (
     <div className={styles.groupBox}>
-      <div className={styles['groupBox-title']}>
-        <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>
+      {(shops && shops.length && (
+        <div className={styles['groupBox-title']}>
+          <div className={styles['groupBox-title--name']}>所属门店</div>
+          <Select
+            showSearch
+            value={options.shopId}
+            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>
@@ -75,35 +130,41 @@ const GoodsGroup = options => {
               {tags.map((item, index) => (
                 <DragTag
                   changePosition={changePosition}
+                  endChangePosition={endChangePosition}
                   index={index}
                   {...item}
                   selected={selected}
-                  changeGroup={e => setSelected(e)}
+                  edit={handelEdit}
                   key={item.id}
                 />
               ))}
-              <InsertTag handleOpen={setIsModalOpen} />
+              <InsertTag handleOpen={handelEdit} />
             </div>
           </DndProvider>
         ) : (
           <div className={styles['groupBox-body--dragbox']}>
-            {tags.map((item, index) => (
+            {tags.map(item => (
               <Tag
                 key={item.id}
-                onClick={() => setSelected(index)}
+                onClick={() => onSelect(item.id)}
                 className={[
                   styles['groupBox-body--tag-normal'],
-                  selected === index ? styles['groupBox-body--tag__cur'] : '',
+                  selected === item.id ? styles['groupBox-body--tag__cur'] : '',
                 ]}
               >
                 <span className={styles['groupBox-body--tag__text']}>{item.text}</span>
               </Tag>
             ))}
-            <InsertTag handleOpen={setIsModalOpen} />
+            <InsertTag key="insert" handleOpen={setIsModalOpen} />
           </div>
         )}
       </div>
-      <GroupInfo isModalOpen={isModalOpen} handleClose={setIsModalOpen} />
+      <GroupInfo
+        isModalOpen={isModalOpen}
+        id={storageId}
+        shopId={options.shopId}
+        handleClose={setIsModalOpen}
+      />
     </div>
   );
 };

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

-import React from 'react';
-import { Form, Modal, Input, Checkbox, Alert } from 'antd';
+import React, { useEffect } from 'react';
+import { Form, Modal, Input, Checkbox, Alert, message } from 'antd';
+import { apiCreateStorage, apiEditStorage, apiStorageInfo } from '../../service';
 
 const GroupInfo = options => {
   const [form] = Form.useForm();
@@ -12,10 +13,34 @@ const GroupInfo = options => {
   // 提交分组
   const handleConfirm = async () => {
     const values = await form.validateFields();
-    console.log('values :>> ', values);
+    const api = options.id ? apiEditStorage : apiCreateStorage;
+    const res = await api({
+      ...values,
+      shopId: options.shopId,
+      id: options.id,
+    });
     handleCancel();
+    options.search();
   };
 
+  const getInfo = async id => {
+    const res = await apiStorageInfo({
+      shopId: options.shopId,
+      id,
+    });
+    if (res && res.data && res.data.id) {
+      form.setFieldsValue({
+        name: res.data.name,
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (options.id && options.isModalOpen) {
+      getInfo(options.id);
+    }
+  }, [options.id, options.isModalOpen]);
+
   const extra = (
     <Alert
       message="选中后，顾客下单需至少选择1个“下单必选分组”商品每店仅可设置1个必点分组"

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

@@ -5,7 +5,7 @@ import styles from '../../style.less';
 
 const InsertTag = options => {
   const showInput = () => {
-    options.handleOpen(true);
+    options.handleOpen();
   };
 
   return (

src/pages/GoodsManage/Takeaway/index.jsx

@@ -4,7 +4,7 @@ import { MenuOutlined, HolderOutlined, FormOutlined, CloseCircleOutlined } from
 import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
 import { arrayMoveImmutable } from 'array-move';
 import GoodsGroup from './components/GoodsGroup';
-import { searchList, apiGoodsActionBatch } from '../service';
+import { apiTakeawayGoods, apiGoodsActionBatch } from '../service';
 import styles from '../style.less';
 import { takeawayColumn } from '../staticdata';
 // import VirtualTable from './components/VirtualTable';
@@ -19,6 +19,7 @@ const Takeaway = options => {
   const [tableData, setTableData] = useState([]);
   const [selectedRowKeys, setSelectedRowKeys] = useState([]);
   const [shopId, setShopId] = useState(0);
+  const [groupId, setGroupId] = useState(0);
   const [loading, setLoading] = useState(false);
   const [actionLoading, setActionLoading] = useState(false);
   const [visibleWeekTime, setVisibleWeekTime] = useState(false);
@@ -60,7 +61,13 @@ const Takeaway = options => {
 
   const getDataList = async () => {
     setLoading(true);
-    const res = await searchList({ productType: 1 });
+    const params = {
+      pageNo: 1,
+      productType: 5,
+      pageSize: 100000,
+      storageRackId: groupId,
+    };
+    const res = await apiTakeawayGoods(params);
     setLoading(false);
     if (res && res.data) {
       setTableData(res.data.records);
@@ -117,7 +124,7 @@ const Takeaway = options => {
   return (
     <div className={styles.takeawayBox}>
       <Spin spinning={loading}>
-        <GoodsGroup changeShop={setShopId} />
+        <GoodsGroup shopId={shopId} changeShop={setShopId} changeGroup={setGroupId} />
         <ActionBar
           selectedRowKeys={selectedRowKeys}
           handleSearch={getDataList}

src/pages/GoodsManage/index.jsx

@@ -61,7 +61,7 @@ class goodsManage extends Component {
     auditRow: {}, // 查看审核信息使用
     isVisibleDraft: false, // 显示隐藏草稿箱
     isEditDraft: false, // 是否编辑草稿
-    productType: 5, // 商品类型
+    productType: 1, // 商品类型
   };
 
   currentLog = null;
@@ -77,6 +77,7 @@ class goodsManage extends Component {
     this.categoryList();
     this.getVirtualCategory();
     this.specList();
+    this.setState({ productType: 5 });
   }
 
   handleSearch = page => {

src/pages/GoodsManage/service.js

@@ -297,3 +297,68 @@ export async function apiGoodsActionBatch(data) {
     data,
   });
 }
+// 外卖商品列表
+export async function apiTakeawayGoods(params) {
+  return request.post('/product/api/merchant/page', {
+    prefix: goodsApi,
+    data: stringify(params),
+    headers,
+  });
+}
+// 外卖商品排序
+export async function apiSortTakeawayGoods(data) {
+  return request.post('/v1/channels/products/sku/batchSort', {
+    prefix: goodsApi,
+    data,
+  });
+}
+// 获取供应商门店列表
+export async function apiSupplierShopList() {
+  return request.get('/api/merchants/shops/getBySupplierId?state=1', {
+    prefix: goodsApi,
+  });
+}
+// 分组创建（货架—创建货架）
+export async function apiCreateStorage(data) {
+  return request.post('/api/merchants/products/storageRack/create', {
+    prefix: goodsApi,
+    data,
+  });
+}
+// 编辑分组（货架—编辑货架）
+export async function apiEditStorage(data) {
+  return request.post('/api/merchants/products/storageRack/edit', {
+    prefix: goodsApi,
+    data,
+  });
+}
+// 分组详情（货架—货架详情）
+export async function apiStorageInfo(params) {
+  return request.post('/api/merchants/products/storageRack/queryByShopIdAndStorageRackId', {
+    prefix: goodsApi,
+    data: stringify(params),
+    headers,
+  });
+}
+// 删除分组（货架—删除货架）
+export async function apiDelStorage(data) {
+  return request.post('/api/merchants/products/storageRack/removeByShopIdAndId', {
+    prefix: goodsApi,
+    data,
+  });
+}
+// 分组排序（货架—排序货架）
+export async function apiSortStorage(data) {
+  return request.post('/api/merchants/products/storageRack/batchSort', {
+    prefix: goodsApi,
+    data,
+  });
+}
+// 分组列表（货架—货架列表）
+export async function apiStorageList(params) {
+  return request.post('/api/merchants/products/storageRack/listByShopIdAndStorageRackIds', {
+    prefix: goodsApi,
+    data: stringify(params),
+    headers,
+  });
+}

src/pages/GoodsManage/staticdata.js

@@ -399,15 +399,15 @@ export const batchAction = event => [
       </a>
     ),
   },
-  {
-    key: 'group',
-    type: '3',
-    label: (
-      <a type="text" onClick={() => event.onChangeState('group')}>
-        修改分组
-      </a>
-    ),
-  },
+  // {
+  //   key: 'group',
+  //   type: '3',
+  //   label: (
+  //     <a type="text" onClick={() => event.onChangeState('group')}>
+  //       修改分组
+  //     </a>
+  //   ),
+  // },
   {
     key: 'send',
     type: '6',