feat: 添加企业客户信息

src/pages/businessCustomer/components/CustomerInfo.jsx

-import React from 'react';
-import { Button, Form, Input, Alert, Cascader, Col, Row, Modal, Select } from 'antd';
-import { layout } from '../model/index';
+import React, { useState } from 'react';
+import { Button, Divider, Form, Input, Checkbox, Col, Row, Modal, Select } from 'antd';
+import { ExclamationCircleOutlined } from '@ant-design/icons';
+import { jsonToArray } from '@/utils/utils';
+import { layout, typeOptions, boolOptions, infoOptions } from '../model/index';
+import style from '../style/info.less';
+import MealSection from './MealSection';
+import MealLimit from './MealLimit';
 
+const CheckboxGroup = Checkbox.Group;
+const { confirm } = Modal;
 const CustomerInfo = props => {
   const [form] = Form.useForm();
+  const [meals, setMeals] = useState({});
+  const [mealTypes, setMealTypes] = useState([]);
 
   // 关闭分组信息弹窗
   const handleCancel = () => {
@@ -11,9 +20,75 @@ const CustomerInfo = props => {
   };
 
   // 添加/保存分组
-  const handleConfirm = async () => {};
+  const handleConfirm = async () => {
+    const res = await form.validateFields();
+    console.log('res :>> ', res);
+  };
+
+  // 风险提示
+  const checkConfirm = () => {
+    const mt = '';
+    return new Promise((resolve, reject) => {
+      confirm({
+        title: '风险提示',
+        icon: <ExclamationCircleOutlined />,
+        content: `确定关闭${mt}餐品类型？此餐品类型下关联的商户及商品将一并删除，不可逆请谨慎操作！`,
+        onOk() {
+          resolve(1);
+        },
+        onCancel() {
+          reject(new Error());
+        },
+      });
+    });
+  };
 
-  const extra = <Alert message="选中后，顾客下单需至少选择1个“下单必选分组”" type="error" />;
+  // 改变餐品类型
+  const onChangeMealType = async ms => {
+    try {
+      if (props.info && props.info.id && ms.length < mealTypes.length) {
+        await checkConfirm();
+      }
+      if (mealTypes.includes('1') && mealTypes.includes('2')) {
+        if (!(ms.includes('1') && ms.includes('2'))) {
+          if (ms.includes('3')) {
+            ms = ['3'];
+          } else {
+            ms = [];
+          }
+        }
+      } else if (ms.length < 3 && ms.length) {
+        ms = ['1', '2'];
+        if (ms.includes('3')) {
+          ms.push('3');
+        }
+      }
+      form.setFieldsValue({
+        types: ms,
+      });
+      setMealTypes(ms);
+    } catch {
+      form.setFieldsValue({
+        types: mealTypes,
+      });
+    }
+  };
+  // 改变餐段
+  const onChangeMealSection = e => {
+    console.log('e.target :>> ', e.target);
+    const { value, checked, label } = e.target;
+    const values = Object.assign({}, meals);
+    if (checked) {
+      values[value] = label;
+      // values.push(value);
+      // } else if (values.includes(value)) {
+      // const index = values.findIndex(v => v === value);
+      // values.splice(index, 1);
+    } else {
+      delete values[value];
+    }
+    setMeals(values);
+  };
 
   return (
     <Modal
@@ -21,27 +96,74 @@ const CustomerInfo = props => {
       visible={props.visible}
       destroyOnClose
       maskClosable={false}
-      width="800px"
+      width="850px"
       onOk={handleConfirm}
       onCancel={handleCancel}
     >
-      <Form name="basic" {...layout} form={form}>
+      <Form name="basicInfo" {...layout} form={form}>
         <Form.Item
           label="公司名称"
-          name="name"
+          name="businessName"
           rules={[{ required: true, message: '请输入公司名称!' }]}
         >
           <Input />
         </Form.Item>
-        <Form.Item label="下单必选分组" name="necessary" extra={extra}>
-          <Input />
+        <Form.Item label="企业取餐点" name="qucan">
+          <Select />
         </Form.Item>
         <Form.Item
           label="企业截止时间"
-          name="name"
+          name="times"
+          wrapperCol={{ span: 20 }}
           rules={[{ required: true, message: '请输入企业截止时间!' }]}
+          extra={<span>企业员工下单的截至时间，仅支持正整数，单位为分钟。</span>}
         >
-          <Input />
+          <Row>
+            <Col span={22}>
+              <Input />
+            </Col>
+            <Col span={2}>
+              <div className={style.tip}>分钟</div>
+            </Col>
+          </Row>
+        </Form.Item>
+        <Form.Item
+          label="餐品类型"
+          name="types"
+          rules={[{ required: true, message: '请选择餐品类型!' }]}
+        >
+          <CheckboxGroup options={jsonToArray(typeOptions)} onChange={onChangeMealType} />
+        </Form.Item>
+        <Form.Item label="餐段配置" required>
+          <MealSection meals={meals} onChange={onChangeMealSection} />
+        </Form.Item>
+        <Form.Item
+          label="商品展示信息"
+          name="xinxin"
+          rules={[{ required: true, message: '请选择商品展示信息!' }]}
+        >
+          <CheckboxGroup options={infoOptions} />
+        </Form.Item>
+        <Divider orientation="left" plain>
+          企业单笔消费限额
+        </Divider>
+        {Object.keys(meals).map(meal => (
+          <Form.Item label={meals[meal]} required wrapperCol={{ span: 20 }}>
+            <Row>
+              {mealTypes.map((t, i) => (
+                <Col span={7} offset={i ? 1 : 0}>
+                  <MealLimit value={t} label={typeOptions[t]} name={`${meal}-${t.value}`} />
+                </Col>
+              ))}
+            </Row>
+          </Form.Item>
+        ))}
+        <Form.Item
+          label="是否周预览"
+          name="yulan"
+          rules={[{ required: true, message: '请选择是否周预览!' }]}
+        >
+          <CheckboxGroup options={boolOptions} />
         </Form.Item>
       </Form>
     </Modal>

src/pages/businessCustomer/components/MealLimit.jsx

+import React from 'react';
+import { Form, InputNumber, Row, Col } from 'antd';
+import style from '../style/info.less';
+import { validateRequired, isCheckPriceTwoDecimal } from '@/utils/validator';
+
+const MealLimit = props => (
+  <Form.Item
+    label={`${props.label}限额`}
+    name={props.name}
+    rules={[
+      { validator: validateRequired, message: `请输入${props.label}限额` },
+      { validator: isCheckPriceTwoDecimal, message: '请输入正确的价格' },
+    ]}
+  >
+    <InputNumber addonAfter="元" max={999.99} defaultValue={100} />
+    {/* <Row>
+      <Col span={18}>
+        <Input maxLength={6} />
+      </Col>
+      <Col span={6}>
+        <div className={style.tip}>元</div>
+      </Col>
+    </Row> */}
+  </Form.Item>
+);
+
+export default MealLimit;

src/pages/businessCustomer/components/MealSection.jsx

+import React from 'react';
+import { Form, Space, Checkbox, TimePicker } from 'antd';
+import { mealSections } from '../model/index';
+
+const MealSection = props =>
+  mealSections.map(field => (
+    <Space key={field.key} align="baseline">
+      <Form.Item label="">
+        <Checkbox onChange={props.onChange} value={field.value} label={field.label}>
+          {field.label}
+        </Checkbox>
+      </Form.Item>
+      <Form.Item name={[field.time, field.key]}>
+        <TimePicker.RangePicker format="HH:mm" />
+      </Form.Item>
+    </Space>
+  ));
+
+export default MealSection;

src/pages/businessCustomer/model/index.js

 import React from 'react';
 import { Button } from 'antd';
 
+export const layout = {
+  labelCol: { span: 4 },
+  wrapperCol: { span: 18 },
+};
+
 export const customerColumn = options => {
   const { onEdit } = options;
   return [
     {
       title: 'ID',
-      dataIndex: 'name',
+      dataIndex: 'id',
       width: 120,
       align: 'center',
     },
@@ -18,21 +23,21 @@ export const customerColumn = options => {
     },
     {
       title: '截单时间(分钟)',
-      dataIndex: 'name',
+      dataIndex: 'times',
       width: 120,
       align: 'center',
       hideInSearch: true,
     },
     {
       title: '餐品类型',
-      dataIndex: 'name',
+      dataIndex: 'types',
       width: 120,
       align: 'center',
       hideInSearch: true,
     },
     {
       title: '创建人',
-      dataIndex: 'name',
+      dataIndex: 'cr',
       width: 120,
       align: 'center',
       hideInSearch: true,
@@ -60,7 +65,40 @@ export const customerColumn = options => {
   ];
 };
 
-export const layout = {
-  labelCol: { span: 4 },
-  wrapperCol: { span: 18 },
+// export const typeOptions = [
+//   { label: '外卖', value: 1 },
+//   { label: '自助餐', value: 2 },
+//   { label: '到店', value: 3 },
+// ];
+export const typeOptions = {
+  1: '外卖',
+  2: '自助餐',
+  3: '到店',
 };
+
+export const infoOptions = [
+  { label: '商品价格及图片', value: 1 },
+  { label: '仅商品价格', value: 2 },
+  { label: '仅商品图片', value: 3 },
+  { label: '均不展示', value: 4 },
+];
+
+export const boolOptions = [{ label: '是', value: 1 }, { label: '否', value: 0 }];
+
+export const mealSections = [
+  {
+    label: '早餐',
+    value: '1',
+    key: 'time1',
+  },
+  {
+    label: '中餐',
+    value: '2',
+    key: 'time2',
+  },
+  {
+    label: '晚餐',
+    value: '3',
+    key: 'time3',
+  },
+];

src/pages/businessCustomer/style/info.less

+.tip {
+  height: 32px;
+  padding-left: 5px;
+  line-height: 32px;
+}

src/utils/utils.js

@@ -149,6 +149,13 @@ export const stringOrObjectTrim = params => {
   return params;
 };
 
+// json转数组用于[Radio/Select/Checkbox]的options
+export const jsonToArray = (obj, valueType) =>
+  Object.keys(obj).map(key => ({
+    label: obj[key],
+    value: valueType === 'number' ? +key : key,
+  }));
+
 export const getObjectType = v => Object.prototype.toString.call(v).replace(/\[object |]/g, '');
 
 // 获取长表单错误提示