feat: 添加单点不送、更改分组弹窗

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

@@ -3,7 +3,7 @@ import { Button, Dropdown, Menu, message, Modal } from 'antd';
 import { PlusOutlined, DownOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
 import { batchAction } from '../../staticdata';
 import styles from '../../style.less';
-import { apiChangeStateGoods } from './service';
+import { apiChangeStateGoods } from '../../service';
 
 const ActionBar = options => {
   // 上下架
@@ -35,25 +35,10 @@ const ActionBar = options => {
    */
   const onChangeState = type => {
     if (options.selectedRowKeys && options.selectedRowKeys.length) {
-      switch (type) {
-        case 'up':
-          changeStatus(7);
-          break;
-        case 'down':
-          changeStatus(6);
-          break;
-        case 'stock':
-          options.openModal('stock');
-          break;
-        case 'time':
-          options.openModal('time');
-          break;
-        case 'buy':
-          changeStatus(7);
-          break;
-        default:
-          changeStatus(7);
-          break;
+      if (['up', 'down'].includes(type)) {
+        changeStatus(type === 'up' ? 7 : 6);
+      } else {
+        options.openModal(type);
       }
     } else {
       message.warning('请选择商品！');

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

+import React, { forwardRef } from 'react';
+import { Modal, Form, Input } from 'antd';
+
+const MinimumPurchase = forwardRef(options => {
+  const [form] = Form.useForm();
+  const handleCancel = () => {
+    options.cancel(false);
+  };
+  const handleOk = async () => {
+    const values = await form.validateFields();
+    console.log('values :>> ', values);
+  };
+
+  return (
+    <Modal
+      visible={options.visible}
+      title="修改最少购买数量"
+      onOk={handleOk}
+      maskClosable={false}
+      destroyOnClose
+      onCancel={handleCancel}
+    >
+      <Form
+        name="basic"
+        form={form}
+        labelCol={{ span: 6 }}
+        wrapperCol={{ span: 16 }}
+        autoComplete="off"
+      >
+        <Form.Item
+          label="最少购买/份"
+          name="minPurchaseNum"
+          rules={[{ required: true, message: '请输入最少购买数量!' }]}
+        >
+          <Input maxLength={6} type="number" />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+});
+
+export default MinimumPurchase;

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

+import React, { forwardRef } from 'react';
+import { Modal, Form, Radio } from 'antd';
+
+const SendModal = forwardRef(options => {
+  const [form] = Form.useForm();
+  const handleCancel = () => {
+    options.cancel(false);
+  };
+  const handleOk = async () => {
+    const values = await form.validateFields();
+    console.log('values :>> ', values);
+  };
+
+  const radioOptions = [{ label: '是', value: 1 }, { label: '否', value: 0 }];
+  const initialValues = Object.assign({}, options.initialValues);
+
+  return (
+    <Modal
+      visible={options.visible}
+      title="设置单点不送"
+      onOk={handleOk}
+      maskClosable={false}
+      destroyOnClose
+      onCancel={handleCancel}
+    >
+      <Form
+        name="basic"
+        form={form}
+        labelCol={{ span: 6 }}
+        wrapperCol={{ span: 16 }}
+        initialValues={initialValues}
+        autoComplete="off"
+      >
+        <Form.Item
+          label="单点不送"
+          name="isSingleDelivery"
+          rules={[{ required: true, message: '请选择!' }]}
+        >
+          <Radio.Group options={radioOptions} />
+        </Form.Item>
+      </Form>
+      <div>开启后顾客单点这些商品不可下单</div>
+    </Modal>
+  );
+});
+
+export default SendModal;

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

+import React, { forwardRef, useState } from 'react';
+import { Modal, Form } from 'antd';
+
+const StockModal = forwardRef(options => {
+  const [form] = Form.useForm();
+  const handleCancel = () => {
+    options.cancel(false);
+  };
+  const handleOk = async () => {
+    const values = await form.validateFields();
+    console.log('values :>> ', values);
+  };
+
+  const initialValues = Object.assign(
+    {
+      saleTimeType: 1,
+      saleDates: [],
+      saleTimes: [[]],
+    },
+    options.initialValues,
+  );
+
+  return (
+    <Modal
+      visible={options.visible}
+      title="售卖时间"
+      onOk={handleOk}
+      maskClosable={false}
+      destroyOnClose
+      onCancel={handleCancel}
+    >
+      <Form
+        name="basic"
+        form={form}
+        labelCol={{ span: 6 }}
+        wrapperCol={{ span: 16 }}
+        initialValues={initialValues}
+        autoComplete="off"
+      >
+        <Form.Item
+          label="剩余库存"
+          name="saleTimeType"
+          rules={[{ required: true, message: '请输入剩余库存!' }]}
+        >
+          <div>1</div>
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+});
+
+export default StockModal;

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

+import React, { forwardRef } from 'react';
+import { Modal, Form, Select } from 'antd';
+
+const SwitchGroupModal = forwardRef(options => {
+  const [form] = Form.useForm();
+  const handleCancel = () => {
+    options.cancel(false);
+  };
+  const handleOk = async () => {
+    const values = await form.validateFields();
+    console.log('values :>> ', values);
+  };
+
+  const radioOptions = [{ label: '是', value: 1 }, { label: '否', value: 0 }];
+  const initialValues = Object.assign({}, options.initialValues);
+
+  return (
+    <Modal
+      visible={options.visible}
+      title="更改分组"
+      onOk={handleOk}
+      maskClosable={false}
+      destroyOnClose
+      onCancel={handleCancel}
+    >
+      <Form
+        name="basic"
+        form={form}
+        labelCol={{ span: 6 }}
+        wrapperCol={{ span: 16 }}
+        initialValues={initialValues}
+        autoComplete="off"
+      >
+        <Form.Item
+          label="分组"
+          name="storageRackId"
+          rules={[{ required: true, message: '请选择!' }]}
+        >
+          <Select options={radioOptions} />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+});
+
+export default SwitchGroupModal;

src/pages/GoodsManage/Takeaway/index.jsx

@@ -10,12 +10,19 @@ import { takeawayColumn } from '../staticdata';
 // import VirtualTable from './components/VirtualTable';
 import ActionBar from './components/ActionBar';
 import WeekTime from './components/WeekTime';
+import StockModal from './components/StockModal';
+import SendModal from './components/SendModal';
+import MinimumPurchaseModal from './components/MinimumPurchase';
 
 const Takeaway = options => {
   const [tableData, setTableData] = useState([]);
   const [selectedRowKeys, setSelectedRowKeys] = useState([]);
   const [loading, setLoading] = useState(false);
   const [visibleWeekTime, setVisibleWeekTime] = useState(false);
+  const [visibleStock, setVisibleStock] = useState(false);
+  const [visibleBuy, setVisibleBuy] = useState(false);
+  const [visibleSend, setVisibleSend] = useState(false);
+  const [visibleSwitchGroup, setVisibleSwitchGroup] = useState(false);
 
   const rowSelection = {
     selectedRowKeys,
@@ -60,6 +67,10 @@ const Takeaway = options => {
   // 显示弹窗
   const openModal = type => {
     type === 'time' && setVisibleWeekTime(true);
+    type === 'stock' && setVisibleStock(true);
+    type === 'group' && setVisibleSwitchGroup(true);
+    type === 'buy' && setVisibleBuy(true);
+    type === 'send' && setVisibleSend(true);
   };
 
   useEffect(() => {
@@ -86,17 +97,11 @@ const Takeaway = options => {
             },
           }}
         />
-        {/* <VirtualTable
-          columns={takeawayColumn.call(this)}
-          rowKey={record => record.skuId}
-          dataSource={tableData}
-          scroll={{
-            y: 300,
-            x: '100%',
-          }}
-        /> */}
       </Spin>
       <WeekTime visible={visibleWeekTime} cancel={setVisibleWeekTime} />
+      <StockModal visible={visibleStock} cancel={setVisibleStock} />
+      <SendModal visible={visibleSend} cancel={setVisibleSend} />
+      <MinimumPurchaseModal visible={visibleBuy} cancel={setVisibleBuy} />
     </div>
   );
 };