feat: 更新商品字段

src/pages/ServiceGoods/common.less

@@ -221,7 +221,7 @@
     }
     .ant-form-item {
       margin-bottom: 0;
-      margin-left: 20px;
+      margin-left: 40px;
     }
   }
 }
@@ -253,7 +253,7 @@
   line-height: 20px;
   text-align: center;
   margin: 0 10px;
-  padding:0 8px;
+  padding: 0 8px;
   border-radius: 8px;
 }
 .repertoryLimit {
@@ -276,7 +276,7 @@
   }
 }
 .conBg {
-  background:#f8f8f8 ;
+  background: #f8f8f8;
   min-width: 100%;
   width: fit-content;
   :global {
@@ -299,6 +299,5 @@
 .rowWarp {
   display: flex;
   flex-flow: row wrap;
-  background:#f8f8f8 ;
-
+  background: #f8f8f8;
 }

src/pages/ServiceGoods/components/AddRepertoryModal.jsx

@@ -2,40 +2,98 @@ import React, { useState, useEffect, forwardRef, useRef, useImperativeHandle } f
 import { Button, Modal, Radio, Form, InputNumber, Switch } from 'antd';
 import styles from '../common.less';
 import { ENUM_SET_REPERTORY } from '../config';
+import { debounce } from '@/utils/utils';
 
 const AddRepertoryModal = (props, ref) => {
   const [confirmLoading, setConfirmLoading] = useState(false);
-  const [modalText, setModalText] = useState('Content of the modal');
   const [openRepertory, setOpenRepertory] = useState(false);
+  const [form] = Form.useForm();
+  const [repertoryState, setRepertoryState] = useState('');
+  const [initialValues, setInitialValues] = useState({
+    productStock: 0,
+    maxStock: 0,
+    autoStock: 0,
+  });
 
-  // const {
-  //   open,
-  //   setOpen,
-  // } = props;
+  const { modifiedInventory, intactData, repertoryModel } = props;
   useImperativeHandle(ref, () => ({
     // changeVal 就是暴露给父组件的方法
     setOpenRepertory: newVal => {
       setOpenRepertory(newVal);
     },
   }));
-  const onChange3 = () => {};
-
-  const handleOk = () => {
-    setModalText('The modal will be closed after two seconds');
-    setConfirmLoading(true);
-    setTimeout(() => {
-      setOpenRepertory(false);
-      setConfirmLoading(false);
-    }, 2000);
+  // 自动补全
+  const onChangeAutoStock = e => {
+    form.setFieldsValue({
+      autoStock: e ? 1 : 0,
+    });
+  };
+  // 勾选库存设置
+  const onChangeSetRepertory = e => {
+    console.log('form', form);
+    setRepertoryState(`${e.target.value}`);
+    if (+e.target.value === 0) {
+      form.setFieldsValue({
+        productStock: 0,
+      });
+    } else {
+      const { maxStock } = form.getFieldsValue(['maxStock']);
+      form.setFieldsValue({
+        productStock: maxStock,
+      });
+    }
+  };
+  // 最大库存设置
+  const onChangeMaxStock = e => {
+    // 已经勾选最大库存 自动更新剩余库存
+    if (+repertoryState === 1) {
+      form.setFieldsValue({
+        productStock: e,
+      });
+    }
+  };
+  const getFormValues = debounce(() => {
+    const values = form.getFieldsValue();
+    console.log('values========', values);
+  }, 400);
+  const handleOk = async () => {
+    const values = await form.validateFields();
+    console.log('values', values);
+    // 回调库存
+    modifiedInventory(values);
+    // setConfirmLoading(true);
+    // setTimeout(() => {
+    //   setOpenRepertory(false);
+    //   setConfirmLoading(false);
+    // }, 2000);
   };
 
   const handleCancel = () => {
-    console.log('Clicked cancel button');
     setOpenRepertory(false);
   };
   useEffect(() => {
     console.log('open', openRepertory);
-  }, [openRepertory]);
+    const { productStock, serviceItem } = intactData?.items;
+    const { autoStock, maxStock } = serviceItem;
+    const params = {
+      productStock,
+      autoStock,
+      maxStock,
+    };
+    switch (repertoryModel) {
+      case 'all': // 统一设置
+        setInitialValues(params);
+        break;
+      case 'mlti': // 多规格设置
+        setInitialValues(params);
+        break;
+      case 'singular': // 单规格设置
+        setInitialValues(params);
+        break;
+      default:
+        break;
+    }
+  }, [openRepertory, intactData]);
   return (
     <>
       {openRepertory && (
@@ -46,10 +104,10 @@ const AddRepertoryModal = (props, ref) => {
           confirmLoading={confirmLoading}
           onCancel={handleCancel}
         >
-          <Form>
+          <Form form={form} initialValues={initialValues} onValuesChange={getFormValues}>
             <Form.Item className={styles.itemInlineModal}>
               <Form.Item
-                name="receptionVolume"
+                name="productStock"
                 label="剩余库存"
                 style={{
                   display: 'flex',
@@ -58,28 +116,36 @@ const AddRepertoryModal = (props, ref) => {
                 rules={[{ required: true, message: '请填写剩余库存' }]}
               >
                 <InputNumber
-                  min={1}
+                  min={0}
                   style={{ width: 200, display: 'inline-block' }}
                   placeholder="请输入"
                 />
               </Form.Item>
-              <Form.Item name="limitPurchase" style={{ width: 200, display: 'inline-block' }}>
-                <Radio.Group options={ENUM_SET_REPERTORY} onChange={onChange3} value={1} />
+              <Form.Item style={{ width: 200, display: 'inline-block' }}>
+                <Radio.Group value={repertoryState} onChange={onChangeSetRepertory}>
+                  <Radio.Button value="0">清空</Radio.Button>
+                  <Radio.Button value="1">最大</Radio.Button>
+                </Radio.Group>
               </Form.Item>
             </Form.Item>
             <Form.Item
-              name="receptionVolume"
+              name="maxStock"
               label="最大库存"
               rules={[{ required: true, message: '请填写最大库存' }]}
             >
-              <InputNumber min={1} style={{ width: 200 }} placeholder="请输入" />
+              <InputNumber
+                min={0}
+                style={{ width: 200 }}
+                placeholder="请输入"
+                onChange={onChangeMaxStock}
+              />
             </Form.Item>
-            <Form.Item name="receptionVolume" label="自动补足">
+            <Form.Item name="autoStock" label="自动补足">
               <Switch
                 checkedChildren="开启"
                 unCheckedChildren="关闭"
-                defaultChecked
-                onChange={onChange3}
+                // defaultChecked
+                onChange={onChangeAutoStock}
               />
             </Form.Item>
             <div className={styles.textStyle}>修改成功后，原库存将被替换，请谨慎操作！</div>