feat: 简单优化

src/pages/businessCustomer/components/CustomerInfo.jsx

@@ -15,8 +15,8 @@ import {
   notification,
 } from 'antd';
 import { ExclamationCircleOutlined } from '@ant-design/icons';
-import { jsonToArray } from '@/utils/utils';
 import moment from 'moment';
+import { jsonToArray } from '@/utils/utils';
 import { layout, mealType, boolOptions, hideOptions, mealSections } from '../staticData/index';
 import {
   apiEnterpriseInfo,
@@ -33,15 +33,9 @@ const { confirm } = Modal;
 const CustomerInfo = props => {
   const [form] = Form.useForm();
   const [meals, setMeals] = useState({});
-  const [mealTypes, setMealTypes] = useState([]);
+  const [selectedMealTypes, setSelectedMealTypes] = useState([]);
   const [pickSelfList, setPickSelfList] = useState([]);
 
-  // 关闭分组信息弹窗
-  const handleCancel = () => {
-    props.reFresh();
-    props.handleClose(false);
-  };
-
   // 校验时间
   const checkTime = (arr, curren, curName) => {
     let valid = false;
@@ -109,7 +103,7 @@ const CustomerInfo = props => {
           limit: [],
         };
         Object.keys(res.mealLimit[item]).forEach(t => {
-          if (mealTypes.includes(t)) {
+          if (selectedMealTypes.includes(t)) {
             json.limit.push({
               mealType: t,
               limit: res.mealLimit[item][t],
@@ -132,8 +126,8 @@ const CustomerInfo = props => {
     }
     const resp = await api(params);
     if (resp && resp.data) {
-      handleCancel();
-      props.reFresh();
+      // 保存成功后刷新列表
+      props.onClose && props.onClose(true);
       notification.success({ message: '保存成功！' });
     }
   };
@@ -158,30 +152,30 @@ const CustomerInfo = props => {
 
   // 改变餐品类型 (选自助餐必选外卖)
   const onChangeMealType = async ms => {
+    console.log('mealTypes', selectedMealTypes, ms);
     try {
-      if (props.info && props.info.id && ms.length < mealTypes.length) {
+      // 编辑时，取消餐段，提示确认
+      console.log('props.info :>> ', props.id);
+      if (props.id && ms.length < selectedMealTypes.length) {
         await checkConfirm();
       }
-      // 添加餐段
-      if (mealTypes.length < ms.length) {
-        if (!ms.includes('1') && ms.includes('2')) {
-          ms.push('1');
-        }
-      } else if (!ms.includes('1') && ms.includes('2')) {
-        // 去除餐段
-        if (ms.includes('4')) {
-          ms = ['4'];
-        } else {
-          ms = [];
-        }
+      // 取消外卖，必须取消自助餐
+      if (selectedMealTypes.includes('1') && !ms.includes('1')) {
+        ms = ms.filter(item => item !== '2');
+      }
+
+      // 选择自助餐，必须选择外卖
+      if (!selectedMealTypes.includes('1') && ms.includes('2')) {
+        ms.push('1');
       }
+
       form.setFieldsValue({
         mealType: ms,
       });
-      setMealTypes(ms);
+      setSelectedMealTypes(ms);
     } catch {
       form.setFieldsValue({
-        mealType: mealTypes,
+        mealType: selectedMealTypes,
       });
     }
   };
@@ -201,55 +195,69 @@ const CustomerInfo = props => {
   const getInfo = async () => {
     const res = await apiEnterpriseInfo(props.id);
     if (res && res.data) {
-      const obj = Object.assign({}, res.data);
-      if (res.data.mealTimePeriod && res.data.mealTimePeriod.length) {
-        const m = moment().format('YYYY-MM-DD');
-        const arr = Object.keys(mealSections);
-        obj.mealTimePeriod = Object.keys(mealSections).map(() => ({}));
-        res.data.mealTimePeriod.forEach((item, i) => {
-          if (item) {
-            const index = arr.indexOf(`${item.mealPeriodType}`);
-            if (index > -1) {
-              obj.mealTimePeriod[index] = {
-                mealPeriodType: `${item.mealPeriodType}`,
-                time: [moment(`${m} ${item.beginTime}`), moment(`${m} ${item.endTime}`)],
-              };
-            }
-          }
-        });
-      } else {
-        obj.mealTimePeriod = [];
-      }
-      obj.mealLimit = {};
-      if (res.data.mealLimit && res.data.mealLimit.length) {
-        res.data.mealLimit.forEach(item => {
-          obj.mealLimit[`limit${item.mealPeriodType}`] = {};
-          item.limit.forEach(limit => {
-            obj.mealLimit[`limit${item.mealPeriodType}`][limit.mealType] = limit.limit;
-          });
-        });
-      }
-      obj.hideInfo = [];
-      if (+res.data.hidePrice) {
-        obj.hideInfo.push('hidePrice');
-      }
-      if (+res.data.hideImage) {
-        obj.hideInfo.push('hideImage');
+      const {
+        hideImage,
+        hidePrice,
+        id,
+        name,
+        mealLimit,
+        mealTimePeriod = [],
+        mealType: type,
+        weekPreview,
+      } = res.data;
+      const formData = {
+        id,
+        name,
+        weekPreview,
+        mealType: type?.map(item => `${item}`) ?? [],
+        hideInfo: [],
+      };
+
+      // 数据模型转换-隐藏信息
+      if (+hidePrice) {
+        formData.hideInfo.push('hidePrice');
       }
-      if (res.data.mealType) {
-        obj.mealType = res.data.mealType.map(item => `${item}`);
-      } else {
-        obj.mealType = [];
+      if (+hideImage) {
+        formData.hideInfo.push('hideImage');
       }
-      setMealTypes(obj.mealType);
-      const json = {};
-      if (res.data.mealTimePeriod) {
-        res.data.mealTimePeriod.forEach(item => {
-          json[item.mealPeriodType] = mealSections[item.mealPeriodType];
+
+      // 数据模型转换-餐段配置,转为 {餐段:餐段名称}
+      // 把mealTimePeriod按mealPeriodType转为map
+      const mealTimePeriodMap = {};
+      mealTimePeriod.forEach(item => {
+        mealTimePeriodMap[item.mealPeriodType] = mealSections[item.mealPeriodType];
+      });
+      setMeals(mealTimePeriodMap);
+
+      // 数据模型转换-餐段和时间配置, [{餐段, time}, {}, {}]
+      const mealTimePeriodArr = Object.keys(mealSections).map(() => ({}));
+      formData.mealTimePeriod = mealTimePeriodArr;
+      mealTimePeriod.forEach(item => {
+        if (!item) return;
+        const index = Object.keys(mealSections).indexOf(`${item.mealPeriodType}`);
+        if (index > -1) {
+          formData.mealTimePeriod[index] = {
+            mealPeriodType: `${item.mealPeriodType}`,
+            time: [
+              moment(`${moment().format('YYYY-MM-DD')} ${item.beginTime}`),
+              moment(`${moment().format('YYYY-MM-DD')} ${item.endTime}`),
+            ],
+          };
+        }
+      });
+
+      // 数据模型转换-消费限额, 转为{餐段: {餐品类型: 限额}}
+      const mealLimitMap = {};
+      mealLimit.forEach(item => {
+        mealLimitMap[`limit${item.mealPeriodType}`] = {};
+        item.limit.forEach(t => {
+          mealLimitMap[`limit${item.mealPeriodType}`][t.mealType] = t.limit;
         });
-      }
-      setMeals(json);
-      form.setFieldsValue(obj);
+      });
+      formData.mealLimit = mealLimitMap;
+
+      setSelectedMealTypes(formData.mealType);
+      form.setFieldsValue(formData);
     }
   };
 
@@ -272,13 +280,13 @@ const CustomerInfo = props => {
       if (props.id) {
         getInfo();
       } else {
-        setMealTypes([]);
+        setSelectedMealTypes([]);
         setMeals({});
         form.resetFields();
         getPickSelf();
       }
     } else {
-      setMealTypes([]);
+      setSelectedMealTypes([]);
       setMeals({});
       form.setFieldsValue({});
     }
@@ -292,7 +300,7 @@ const CustomerInfo = props => {
       maskClosable={false}
       width="900px"
       onOk={handleConfirm}
-      onCancel={handleCancel}
+      onCancel={() => props.onClose(false)}
     >
       <Form
         name="basicInfo"
@@ -358,7 +366,7 @@ const CustomerInfo = props => {
                   >
                     {fs => (
                       <Row key={`row${meal}`}>
-                        {mealTypes.map((t, i) => (
+                        {selectedMealTypes.map((t, i) => (
                           <Col span={7} offset={i ? 1 : 0} key={t}>
                             <MealLimit value={t} label={mealType[t]} name={`${t}`} />
                           </Col>

src/pages/businessCustomer/index.jsx

@@ -29,6 +29,12 @@ const BusinessCustomer = () => {
     setVisible(true);
   };
 
+  const onClose = refresh => {
+    console.log(3);
+    setVisible(false);
+    refresh && refTable.current.reload();
+  };
+
   return (
     <div className={utilStyle.formPageBox}>
       <ProTable
@@ -57,12 +63,7 @@ const BusinessCustomer = () => {
           </Button>,
         ]}
       />
-      <CustomerInfo
-        visible={visible}
-        id={id}
-        reFresh={() => refTable.current.reload()}
-        handleClose={setVisible}
-      />
+      <CustomerInfo visible={visible} id={id} onClose={onClose} />
     </div>
   );
 };