feat: 表单模板第二版

src/pages/businessCustomer/components/CustomerInfoCopy.jsx

@@ -45,7 +45,9 @@ const CustomerInfo = props => {
     }
     setSelectedMealTypes([]);
     setMeals({});
-    form.setFieldsValue({});
+    form.setFieldsValue({
+      mealLimit: [],
+    });
   };
 
   /*
@@ -66,50 +68,25 @@ const CustomerInfo = props => {
   };
 
   /*
-   *  5. 表单校验
+   *  5. 表单提交数据处理及校验
    */
-  // 校验时间
-  const checkTime = (arr, curren, curName) => {
-    let valid = false;
-    arr.forEach(item => {
-      if (curren < item.endTime) {
-        valid = true;
-        const name = meals[item.mealPeriodType];
-        notification.error({ message: `${curName}起始时间不能早于${name}截止时间` });
-      }
-    });
-    return valid;
-  };
   const validateForm = async () => {
     const res = await form.validateFields();
-    if (res.mealTimePeriod.length < 1) {
-      message.warn('请选择餐段');
-      return;
-    }
     const params = {
       hideImage: 0,
       hidePrice: 0,
       ...res,
     };
     const arr = [];
-    let validTime = false;
     res.mealTimePeriod.forEach(item => {
       if (item && meals[item.mealPeriodType]) {
-        const obj = Object.assign({}, item);
+        const obj = { ...item };
         obj.beginTime = moment(obj.time[0]).format('HH:mm');
         obj.endTime = moment(obj.time[1]).format('HH:mm');
         delete obj.time;
-        if (checkTime(arr, obj.beginTime, meals[item.mealPeriodType])) {
-          validTime = true;
-        }
         arr.push(obj);
       }
     });
-    if (validTime) {
-      // notification.error({ message: '时间段不能交叉！' });
-      return;
-    }
-
     params.mealTimePeriod = arr;
     if (res.hideInfo && res.hideInfo.length) {
       params.hidePrice = res.hideInfo.includes('hidePrice') ? 1 : 0;
@@ -117,10 +94,6 @@ const CustomerInfo = props => {
       delete params.hideInfo;
     }
     const limits = [];
-    if (!res.mealLimit) {
-      notification.error({ message: '请输入限额！' });
-      return;
-    }
     // 处理限额
     Object.keys(res.mealLimit).forEach(item => {
       const mealPeriodType = item.replace('limit', '');
@@ -140,17 +113,47 @@ const CustomerInfo = props => {
         limits.push(json);
       }
     });
-    if (limits.length < 1) {
-      notification.error({ message: '请选择餐段配置！' });
-      return;
-    }
     params.mealLimit = limits;
-    submitForm(params);
+    console.log(params, '.....');
+    // submitForm(params);
   };
 
   /*
    *  4. 表单交互逻辑
    */
+  // 校验时间
+  const checkTime = (arr, curren, curName) => {
+    let valid = false;
+    arr.forEach(item => {
+      if (curren < item.endTime) {
+        valid = true;
+        const name = meals[item.mealPeriodType];
+      }
+    });
+    return valid;
+  };
+  const validateMeals = () => {
+    const { mealTimePeriod = [] } = form.getFieldValue();
+    const arr = [];
+    let validTime = false;
+    mealTimePeriod.forEach(item => {
+      if (item && meals[item.mealPeriodType]) {
+        const obj = { ...item };
+        obj.beginTime = moment(obj.time[0]).format('HH:mm');
+        obj.endTime = moment(obj.time[1]).format('HH:mm');
+        delete obj.time;
+        if (checkTime(arr, obj.beginTime, meals[item.mealPeriodType])) {
+          validTime = true;
+        }
+        arr.push(obj);
+      }
+    });
+    if (validTime) {
+      // eslint-disable-next-line prefer-promise-reject-errors
+      return Promise.reject('时间段不能交叉！');
+    }
+    return Promise.resolve();
+  };
   // 风险提示
   const checkConfirm = () => {
     const mt = '';
@@ -170,10 +173,8 @@ const CustomerInfo = props => {
   };
   // 改变餐品类型 (选自助餐必选外卖)
   const onChangeMealType = async ms => {
-    console.log('mealTypes', selectedMealTypes, ms);
     try {
       // 编辑时，取消餐段，提示确认
-      console.log('props.info :>> ', props.id);
       if (props.id && ms.length < selectedMealTypes.length) {
         await checkConfirm();
       }
@@ -199,6 +200,7 @@ const CustomerInfo = props => {
   };
   // 改变餐段
   const onChangeMealSection = e => {
+    console.log(e);
     const { id, checked, label } = e.target;
     const values = Object.assign({}, meals);
     if (checked) {
@@ -206,6 +208,12 @@ const CustomerInfo = props => {
     } else {
       delete values[id];
     }
+    // 判断餐段配置是否都没选
+    if (Object.keys(values).length === 0) {
+      form.setFieldsValue({
+        mealTimePeriod: [],
+      });
+    }
     setMeals(values);
   };
 
@@ -239,7 +247,7 @@ const CustomerInfo = props => {
   };
   // 数据模型转换-消费限额, 转为{餐段: {餐品类型: 限额}}
   const processMealLimit = mealLimit => {
-    const mealLimitMap = [];
+    const mealLimitMap = {};
     mealLimit.forEach(item => {
       const { mealPeriodType, limit } = item;
 
@@ -251,7 +259,6 @@ const CustomerInfo = props => {
         {},
       );
     });
-    console.log('mealLimitMap :>> ', mealLimitMap);
     return mealLimitMap;
   };
 
@@ -290,7 +297,6 @@ const CustomerInfo = props => {
     formData.mealTimePeriod = mealTimePeriodArr;
     formData.mealLimit = mealLimitMap;
     formData.mealTimePeriodMap = mealTimePeriodMap;
-
     return formData;
   };
 
@@ -325,11 +331,6 @@ const CustomerInfo = props => {
     if (props.visible) {
       if (props.id) {
         getInfo();
-      } else {
-        setSelectedMealTypes([]);
-        setMeals({});
-        form.resetFields();
-        getPickSelf();
       }
     }
   }, [props.visible]);
@@ -420,7 +421,9 @@ const CustomerInfo = props => {
       wrapperCol: { span: 12 },
       name: 'mealTimePeriod',
       rules: [{ required: true, message: '请选择餐段配置' }],
-      component: <MealSection meals={meals} onChange={onChangeMealSection} />,
+      component: (
+        <MealSection meals={meals} validateMeals={validateMeals} onChange={onChangeMealSection} />
+      ),
     },
     {
       name: 'Divider',
@@ -457,7 +460,7 @@ const CustomerInfo = props => {
       destroyOnClose
       maskClosable={false}
       width="900px"
-      onOk={submitForm}
+      onOk={validateForm}
       onCancel={() => closeModal(0)}
     >
       <Form

src/pages/businessCustomer/components/MealLimit.jsx

@@ -7,6 +7,7 @@ const MealLimit = props => (
   <Form.Item
     label={`${props.label}限额`}
     name={props.name}
+    value={props.value}
     rules={[
       { validator: validateRequired, message: `请输入${props.label}限额` },
       { validator: isCheckPriceTwoDecimal, message: '请输入正确的价格' },

src/pages/businessCustomer/components/MealSection.jsx

@@ -15,7 +15,12 @@ const MealSection = props => (
             <Form.Item
               name={[i, 'time']}
               rules={
-                props.meals[field] ? [{ type: 'array', required: true, message: '请选择!' }] : []
+                props.meals[field]
+                  ? [
+                      { type: 'array', required: true, message: '请选择!' },
+                      { validator: props.validateMeals, message: '时间段不能交叉！' },
+                    ]
+                  : []
               }
             >
               <TimePicker.RangePicker format="HH:mm" minuteStep={30} />

src/pages/businessCustomer/index.jsx

@@ -64,7 +64,7 @@ const BusinessCustomer = () => {
           </Button>,
         ]}
       />
-      <CustomerInfo visible={visible} id={id} onClose={onClose} />
+      {visible && <CustomerInfo visible={visible} id={id} onClose={onClose} />}
     </div>
   );
 };