fix: 恢复master代码

src/pages/businessCustomer/components/CustomerInfo.jsx

@@ -15,8 +15,8 @@ import {
   notification,
 } from 'antd';
 import { ExclamationCircleOutlined } from '@ant-design/icons';
-import moment from 'moment';
 import { jsonToArray } from '@/utils/utils';
+import moment from 'moment';
 import { layout, mealType, boolOptions, hideOptions, mealSections } from '../staticData/index';
 import {
   apiEnterpriseInfo,
@@ -33,54 +33,13 @@ const { confirm } = Modal;
 const CustomerInfo = props => {
   const [form] = Form.useForm();
   const [meals, setMeals] = useState({});
-  const [selectedMealTypes, setSelectedMealTypes] = useState([]);
+  const [mealTypes, setMealTypes] = useState([]);
   const [pickSelfList, setPickSelfList] = useState([]);
 
-  // 1. 表单展示
-  // const formItem = [
-  // {
-  //   label: '企业名称',
-  //   name: 'enterpriseName',
-  //   rules: [{ required: true, message: '请输入企业名称' }],
-  //   component: <Input placeholder="请输入企业名称" />,
-  // },
-
-  // 2. 预加载数据, 数据模型转换,用于表单回显
-
-  // 3. 表单交互逻辑
-
-  // 4. 表单校验
-  const validateForm = async () => {
-    const res = await form.validateFields();
-    console.log(11, res);
-    // TODO 其他校验
-  };
-
-  // 5. 数据模型转换, 表单到接口的转换, 可以用 lodash
-  const tranformFormData = data => {};
-
-  // 6. 表单关闭
-  const closeModal = index => {
-    if (props.onClose && typeof props.onClose === 'function') {
-      props.onClose(!!index);
-    }
-  };
-
-  // 7. 表单提交
-
-  const sumbitForm = async () => {
-    const valid = await validateForm();
-    if (!valid) {
-      return false;
-    }
-    return false;
-    // const params = tranformFormData(res);
-    // const resp = await apiNewEnterprise(params);
-    // if (resp && resp.data) {
-    //   // 保存成功后刷新列表
-    //   closeModal(1);
-    //   notification.success({ message: '保存成功！' });
-    // }
+  // 关闭分组信息弹窗
+  const handleCancel = () => {
+    props.reFresh();
+    props.handleClose(false);
   };
 
   // 校验时间
@@ -150,7 +109,7 @@ const CustomerInfo = props => {
           limit: [],
         };
         Object.keys(res.mealLimit[item]).forEach(t => {
-          if (selectedMealTypes.includes(t)) {
+          if (mealTypes.includes(t)) {
             json.limit.push({
               mealType: t,
               limit: res.mealLimit[item][t],
@@ -173,8 +132,8 @@ const CustomerInfo = props => {
     }
     const resp = await api(params);
     if (resp && resp.data) {
-      // 保存成功后刷新列表
-      closeModal(1);
+      handleCancel();
+      props.reFresh();
       notification.success({ message: '保存成功！' });
     }
   };
@@ -199,30 +158,26 @@ 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) {
+      if (props.id && ms.length < mealTypes.length) {
         await checkConfirm();
       }
       // 取消外卖，必须取消自助餐
-      if (selectedMealTypes.includes('1') && !ms.includes('1')) {
+      if (mealTypes.includes('1') && !ms.includes('1')) {
         ms = ms.filter(item => item !== '2');
       }
 
       // 选择自助餐，必须选择外卖
-      if (!selectedMealTypes.includes('1') && ms.includes('2')) {
+      if (!mealTypes.includes('1') && ms.includes('2')) {
         ms.push('1');
       }
-
       form.setFieldsValue({
         mealType: ms,
       });
-      setSelectedMealTypes(ms);
+      setMealTypes(ms);
     } catch {
       form.setFieldsValue({
-        mealType: selectedMealTypes,
+        mealType: mealTypes,
       });
     }
   };
@@ -242,70 +197,55 @@ const CustomerInfo = props => {
   const getInfo = async () => {
     const res = await apiEnterpriseInfo(props.id);
     if (res && res.data) {
-      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');
+      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 = [];
       }
-      if (+hideImage) {
-        formData.hideInfo.push('hideImage');
+      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;
+          });
+        });
       }
-
-      // 数据模型转换-餐段配置,转为 {餐段:餐段名称}
-      // 把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;
+      obj.hideInfo = [];
+      if (+res.data.hidePrice) {
+        obj.hideInfo.push('hidePrice');
+      }
+      if (+res.data.hideImage) {
+        obj.hideInfo.push('hideImage');
+      }
+      if (res.data.mealType) {
+        obj.mealType = res.data.mealType.map(item => `${item}`);
+      } else {
+        obj.mealType = [];
+      }
+      setMealTypes(obj.mealType);
+      const json = {};
+      if (res.data.mealTimePeriod) {
+        res.data.mealTimePeriod.forEach(item => {
+          json[item.mealPeriodType] = mealSections[item.mealPeriodType];
         });
-      });
-      formData.mealLimit = mealLimitMap;
-
-      setSelectedMealTypes(formData.mealType);
-      console.log('formData :>> ', formData);
-      form.setFieldsValue(formData);
+      }
+      setMeals(json);
+      form.setFieldsValue(obj);
     }
   };
 
@@ -328,13 +268,13 @@ const CustomerInfo = props => {
       if (props.id) {
         getInfo();
       } else {
-        setSelectedMealTypes([]);
+        setMealTypes([]);
         setMeals({});
         form.resetFields();
         getPickSelf();
       }
     } else {
-      setSelectedMealTypes([]);
+      setMealTypes([]);
       setMeals({});
       form.setFieldsValue({});
     }
@@ -347,8 +287,8 @@ const CustomerInfo = props => {
       destroyOnClose
       maskClosable={false}
       width="900px"
-      onOk={sumbitForm}
-      onCancel={() => closeModal(0)}
+      onOk={handleConfirm}
+      onCancel={handleCancel}
     >
       <Form
         name="basicInfo"
@@ -380,10 +320,10 @@ const CustomerInfo = props => {
           </Form.Item>
         )}
         <Form.Item
-          label="企业截止时间"
+          label="企业截单时间"
           name="endOrderTime"
           wrapperCol={{ span: 20 }}
-          rules={[{ required: true, message: '请输入企业截止时间!' }]}
+          rules={[{ required: true, message: '请输入企业截单时间!' }]}
           extra={<span>企业员工下单的截至时间，仅支持正整数，单位为分钟。</span>}
         >
           <InputNumber min={0} max={600} addonAfter="分钟" />
@@ -414,7 +354,7 @@ const CustomerInfo = props => {
                   >
                     {fs => (
                       <Row key={`row${meal}`}>
-                        {selectedMealTypes.map((t, i) => (
+                        {mealTypes.map((t, i) => (
                           <Col span={7} offset={i ? 1 : 0} key={t}>
                             <MealLimit value={t} label={mealType[t]} name={`${t}`} />
                           </Col>

src/pages/businessCustomer/components/MealLimit.jsx

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

src/pages/businessCustomer/components/MealSection.jsx

 import React from 'react';
-import { Form, Row, Col, TimePicker, Space } from 'antd';
+import { Form, Space, TimePicker } from 'antd';
 import { mealSections } from '../staticData/index';
 import MealCheckbox from './MealCheckbox';
 
@@ -8,32 +8,19 @@ const MealSection = props => (
     {fields => (
       <>
         {Object.keys(mealSections).map((field, i) => (
-          <Row key={field} align="baseline">
-            <Col span={4}>
-              <Form.Item label="" name={[i, 'mealPeriodType']}>
-                <MealCheckbox
-                  changeType={e => props.onChangeSection(e, props)}
-                  meals={props.meals}
-                  field={field}
-                />
-              </Form.Item>
-            </Col>
-            <Col span={18}>
-              <Form.Item
-                name={[i, 'time']}
-                rules={
-                  props.meals[field]
-                    ? [
-                        { type: 'array', required: true, message: '请选择!' },
-                        { validator: props.validateMeals, message: '时间段不能交叉！' },
-                      ]
-                    : []
-                }
-              >
-                <TimePicker.RangePicker format="HH:mm" minuteStep={30} />
-              </Form.Item>
-            </Col>
-          </Row>
+          <Space key={field} align="baseline">
+            <Form.Item label="" name={[i, 'mealPeriodType']}>
+              <MealCheckbox changeType={props.onChange} meals={props.meals} field={field} />
+            </Form.Item>
+            <Form.Item
+              name={[i, 'time']}
+              rules={
+                props.meals[field] ? [{ type: 'array', required: true, message: '请选择!' }] : []
+              }
+            >
+              <TimePicker.RangePicker format="HH:mm" minuteStep={30} />
+            </Form.Item>
+          </Space>
         ))}
       </>
     )}

src/pages/businessCustomer/index.jsx

@@ -3,9 +3,7 @@ import ProTable from '@ant-design/pro-table';
 import { Button } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
 import { customerColumn } from './staticData/index';
-// import CustomerInfo from './components/CustomerInfoCopy';
-// import CustomerInfo from './components/CustomerInfo';
-import CustomerInfo from '@/example/proForm/ModalForm/index';
+import CustomerInfo from './components/CustomerInfo';
 import utilStyle from '@/utils/utils.less';
 import { stringOrObjectTrim } from '@/utils/utils';
 import { apiEnterpriseList } from './service';
@@ -31,12 +29,6 @@ const BusinessCustomer = () => {
     setVisible(true);
   };
 
-  const onClose = refresh => {
-    console.log(3);
-    setVisible(false);
-    refresh && refTable.current.reload();
-  };
-
   return (
     <div className={utilStyle.formPageBox}>
       <ProTable
@@ -48,6 +40,7 @@ const BusinessCustomer = () => {
         columns={customerColumn({ onEdit })}
         request={params => query({ ...params })}
         rowKey={r => r.id}
+        expandIconColumnIndex={10}
         bordered
         options={false}
         toolBarRender={() => [
@@ -64,7 +57,12 @@ const BusinessCustomer = () => {
           </Button>,
         ]}
       />
-      {visible && <CustomerInfo visible={visible} id={id} onClose={onClose} />}
+      <CustomerInfo
+        visible={visible}
+        id={id}
+        reFresh={() => refTable.current.reload()}
+        handleClose={setVisible}
+      />
     </div>
   );
 };