feat: 添加企业客户逻辑

config/env.config.js

 const isProduction = process.env.NODE_ENV === 'production';
 const isPre = process.env.PRE_ENV === 'pre';
-const environment = 'yxm2';
+const environment = 'xyqb';
 const envAPi = {
   api: `https://security-${environment}.liangkebang.net`, //'https://security-xyqb.liangkebang.net',
   kdspOpApi: `https://sc-merchant-api-${environment}.liangkebang.net`,

src/pages/businessCustomer/components/CustomerInfo.jsx

-import React, { useState } from 'react';
-import { Button, Divider, Form, Input, Checkbox, Col, Row, Modal, Select } from 'antd';
+import React, { useEffect, useState } from 'react';
+import {
+  Button,
+  Divider,
+  Form,
+  Input,
+  InputNumber,
+  Checkbox,
+  Radio,
+  Col,
+  Row,
+  Modal,
+  Select,
+  message,
+} from 'antd';
 import { ExclamationCircleOutlined } from '@ant-design/icons';
 import { jsonToArray } from '@/utils/utils';
-import { layout, typeOptions, boolOptions, infoOptions } from '../staticData/index';
+import {
+  layout,
+  mealType,
+  boolOptions,
+  hideOptions,
+  infoOptions,
+  mealSections,
+} from '../staticData/index';
+import { apiEnterpriseInfo, apiNewEnterprise, apiEditEnterprise } from '../service';
 import style from '../style/info.less';
 import MealSection from './MealSection';
 import MealLimit from './MealLimit';
 
 const CheckboxGroup = Checkbox.Group;
+const RadioGroup = Radio.Group;
 const { confirm } = Modal;
 const CustomerInfo = props => {
   const [form] = Form.useForm();
@@ -22,6 +44,19 @@ const CustomerInfo = props => {
   // 添加/保存分组
   const handleConfirm = async () => {
     const res = await form.validateFields();
+    // const res = await form.getFieldsValue();
+    if (res.mealTimePeriod.length < 1) {
+      message.warn('请选择餐段');
+      return;
+    }
+    const params = Object.assign({}, res);
+    const arr = [];
+    res.mealTimePeriod.forEach(item => {
+      if (item.mealPeriodType) {
+        arr.push(item);
+      }
+    });
+    params.mealTimePeriod = arr;
     console.log('res :>> ', res);
   };
 
@@ -76,94 +111,109 @@ const CustomerInfo = props => {
   // 改变餐段
   const onChangeMealSection = e => {
     console.log('e.target :>> ', e.target);
-    const { value, checked, label } = e.target;
+    const { id, checked, label } = e.target;
     const values = Object.assign({}, meals);
     if (checked) {
-      values[value] = label;
+      values[id] = label;
       // values.push(value);
       // } else if (values.includes(value)) {
       // const index = values.findIndex(v => v === value);
       // values.splice(index, 1);
     } else {
-      delete values[value];
+      delete values[id];
     }
+    console.log('values :>> ', values);
     setMeals(values);
   };
 
+  // 获取企业客户新
+  const getInfo = async () => {
+    const res = await apiEnterpriseInfo(1);
+  };
+
+  useEffect(() => {
+    if (props.visible) {
+      getInfo();
+    }
+  }, [props.visible]);
+
   return (
     <Modal
       title="企业客户信息"
       open={props.visible}
       destroyOnClose
       maskClosable={false}
-      width="850px"
+      width="880px"
       onOk={handleConfirm}
       onCancel={handleCancel}
     >
-      <Form name="basicInfo" {...layout} form={form}>
+      <Form
+        name="basicInfo"
+        initialValues={{ mealTimePeriod: [{}, {}, {}] }}
+        {...layout}
+        form={form}
+      >
         <Form.Item
           label="公司名称"
-          name="businessName"
+          name="name"
           rules={[{ required: true, message: '请输入公司名称!' }]}
         >
           <Input />
         </Form.Item>
-        <Form.Item label="企业取餐点" name="qucan">
+        <Form.Item label="企业取餐点" name="pickselfIds">
           <Select />
         </Form.Item>
         <Form.Item
           label="企业截止时间"
-          name="times"
+          name="endOrderTime"
           wrapperCol={{ span: 20 }}
           rules={[{ required: true, message: '请输入企业截止时间!' }]}
           extra={<span>企业员工下单的截至时间，仅支持正整数，单位为分钟。</span>}
         >
           <Row>
-            <Col span={22}>
-              <Input />
-            </Col>
-            <Col span={2}>
-              <div className={style.tip}>分钟</div>
-            </Col>
+            <InputNumber min={0} max={600} addonAfter="分钟" />
           </Row>
         </Form.Item>
         <Form.Item
           label="餐品类型"
-          name="types"
+          name="mealType"
           rules={[{ required: true, message: '请选择餐品类型!' }]}
         >
-          <CheckboxGroup options={jsonToArray(typeOptions)} onChange={onChangeMealType} />
+          <CheckboxGroup options={jsonToArray(mealType)} onChange={onChangeMealType} />
         </Form.Item>
-        <Form.Item label="餐段配置" required>
+        <Form.Item label="餐段配置" required wrapperCol={{ span: 12 }}>
           <MealSection meals={meals} onChange={onChangeMealSection} />
         </Form.Item>
-        <Form.Item
+        {/* <Form.Item
           label="商品展示信息"
           name="xinxin"
           rules={[{ required: true, message: '请选择商品展示信息!' }]}
         >
           <CheckboxGroup options={infoOptions} />
-        </Form.Item>
+        </Form.Item> */}
         <Divider orientation="left" plain>
           企业单笔消费限额
         </Divider>
         {Object.keys(meals).map(meal => (
-          <Form.Item label={meals[meal]} required wrapperCol={{ span: 20 }}>
+          <Form.Item label={meals[meal]} key={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 span={7} offset={i ? 1 : 0} key={t}>
+                  <MealLimit value={t} label={mealType[t]} name={`${meal}-${t.value}`} />
                 </Col>
               ))}
             </Row>
           </Form.Item>
         ))}
+        <Form.Item label="商品隐藏信息" name="hideInfo">
+          <CheckboxGroup options={hideOptions} />
+        </Form.Item>
         <Form.Item
           label="是否周预览"
-          name="yulan"
+          name="weekPreview"
           rules={[{ required: true, message: '请选择是否周预览!' }]}
         >
-          <CheckboxGroup options={boolOptions} />
+          <RadioGroup options={boolOptions} />
         </Form.Item>
       </Form>
     </Modal>

src/pages/businessCustomer/components/MealCheckbox.jsx

+import React from 'react';
+import { Checkbox } from 'antd';
+import { mealSections } from '../staticData/index';
+
+const MealCheckbox = props => {
+  const onChange = e => {
+    props.onChange(props.field);
+    props.changeType(e);
+  };
+  return (
+    <Checkbox
+      onChange={onChange}
+      checked={props.meals[props.field]}
+      id={props.field}
+      label={mealSections[props.field]}
+    >
+      {mealSections[props.field]}
+    </Checkbox>
+  );
+};
+
+export default MealCheckbox;

src/pages/businessCustomer/components/MealLimit.jsx

@@ -12,15 +12,7 @@ const MealLimit = props => (
       { 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> */}
+    <InputNumber addonAfter="元" max={999.99} />
   </Form.Item>
 );
 

src/pages/businessCustomer/components/MealSection.jsx

 import React from 'react';
-import { Form, Space, Checkbox, TimePicker } from 'antd';
+import { Form, Space, TimePicker } from 'antd';
 import { mealSections } from '../staticData/index';
+import MealCheckbox from './MealCheckbox';
 
-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>
-  ));
+const MealSection = props => (
+  <Form.List name="mealTimePeriod">
+    {fields => (
+      <>
+        {Object.keys(mealSections).map((field, i) => (
+          <Space key={field} align="baseline">
+            <Form.Item label="" name={[fields[i].name, 'mealPeriodType']}>
+              <MealCheckbox changeType={props.onChange} meals={props.meals} field={field} />
+            </Form.Item>
+            <Form.Item
+              name={[fields[i].name, 'time']}
+              rules={[
+                props.meals[field] ? { type: 'array', required: true, message: '请选择!' } : {},
+              ]}
+            >
+              <TimePicker.RangePicker format="HH:mm" />
+            </Form.Item>
+          </Space>
+        ))}
+      </>
+    )}
+  </Form.List>
+);
 
 export default MealSection;

src/pages/businessCustomer/index.jsx

@@ -4,10 +4,18 @@ import { Button } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
 import { customerColumn } from './staticData/index';
 import CustomerInfo from './components/CustomerInfo';
+import { apiEnterpriseList } from './service';
 
 const BusinessCustomer = () => {
-  const [visible, setVisible] = useState(true);
-  const query = async () => {};
+  const [visible, setVisible] = useState(false);
+  const query = async params => {
+    const data = {
+      page: params.current,
+      size: params.pageSize,
+      data: params,
+    };
+    return apiEnterpriseList(data);
+  };
   const onEdit = async () => {};
 
   return (
@@ -24,13 +32,13 @@ const BusinessCustomer = () => {
         bordered
         options={false}
         toolBarRender={() => [
-          <Button key="3" icon={<PlusOutlined />} type="primary" onClick={onEdit}>
+          <Button key="3" icon={<PlusOutlined />} type="primary" onClick={() => setVisible(!0)}>
             添加企业客户
           </Button>,
         ]}
         scroll={{ x: '100%', y: 400 }}
       />
-      <CustomerInfo visible={visible} />
+      <CustomerInfo visible={visible} handleClose={setVisible} />
     </div>
   );
 };

src/pages/businessCustomer/service.js

+import request from '@/utils/request';
+import config from '@/../config/env.config';
+
+// import qs from 'qs';
+
+const { kdspApi, goodsApi } = config;
+
+/**
+ * 获取企业客户列表
+ * http://yapi.quantgroups.com/project/389/interface/api/65324
+ */
+export async function apiEnterpriseList(data) {
+  return request.post('/api/consoles/enterprise/pageList', {
+    data,
+    prefix: goodsApi,
+  });
+}
+/**
+ * 获取企业客户详细
+ * http://yapi.quantgroups.com/project/389/interface/api/65339
+ */
+export async function apiEnterpriseInfo(id) {
+  return request.get(`/api/consoles/enterprise/info?id=${id}`, {
+    prefix: goodsApi,
+  });
+}
+/**
+ * 添加企业客户
+ * http://yapi.quantgroups.com/project/389/interface/api/65329
+ */
+export async function apiNewEnterprise(data) {
+  return request.post('/api/consoles/enterprise/save', {
+    data,
+    prefix: goodsApi,
+  });
+}
+/**
+ * 编辑企业客户
+ * http://yapi.quantgroups.com/project/389/interface/api/65334
+ */
+export async function apiEditEnterprise(data) {
+  return request.post('/api/consoles/enterprise/update', {
+    data,
+    prefix: goodsApi,
+  });
+}

src/pages/businessCustomer/staticData/index.js

@@ -6,14 +6,64 @@ export const layout = {
   wrapperCol: { span: 18 },
 };
 
+// 餐品类型：（1外卖 2 自助餐 4到店）
+export const mealType = {
+  1: '外卖',
+  2: '自助餐',
+  4: '到店',
+};
+
+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 hideOptions = [
+  { label: '隐藏商品价格', value: 'hidePrice' },
+  { label: '隐藏商品图片', value: 'hideImage' },
+];
+
+// export const mealSections = [
+//   {
+//     label: '早餐',
+//     value: '1',
+//     key: 'time1',
+//   },
+//   {
+//     label: '中餐',
+//     value: '2',
+//     key: 'time2',
+//   },
+//   {
+//     label: '晚餐',
+//     value: '4',
+//     key: 'time4',
+//   },
+// ];
+export const mealSections = {
+  1: '早餐',
+  2: '中餐',
+  4: '晚餐',
+};
+
+// 企业列表字段
 export const customerColumn = options => {
   const { onEdit } = options;
   return [
+    {
+      title: 'ID',
+      dataIndex: 'enterpriseId',
+      hideInTable: true,
+    },
     {
       title: 'ID',
       dataIndex: 'id',
       width: 120,
       align: 'center',
+      hideInSearch: true,
     },
     {
       title: '公司名称',
@@ -23,21 +73,25 @@ export const customerColumn = options => {
     },
     {
       title: '截单时间(分钟)',
-      dataIndex: 'times',
+      dataIndex: 'endOrderTime',
       width: 120,
       align: 'center',
       hideInSearch: true,
     },
     {
       title: '餐品类型',
-      dataIndex: 'types',
+      dataIndex: 'mealType',
       width: 120,
       align: 'center',
       hideInSearch: true,
+      render(types) {
+        const arr = types.map(meal => mealType[meal]);
+        return arr.join('/');
+      },
     },
     {
       title: '创建人',
-      dataIndex: 'cr',
+      dataIndex: 'createdBy',
       width: 120,
       align: 'center',
       hideInSearch: true,
@@ -64,41 +118,3 @@ export const customerColumn = options => {
     },
   ];
 };
-
-// export const typeOptions = [
-//   { label: '外卖', value: 1 },
-//   { label: '自助餐', value: 2 },
-//   { label: '到店', value: 3 },
-// ];
-export const typeOptions = {
-  1: '外卖',
-  2: '自助餐',
-  4: '到店',
-};
-
-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/businessGoods/style/index.less

@@ -27,6 +27,9 @@
       margin-right: 15px;
     }
   }
+  &--batch-btn {
+    text-align: right;
+  }
 }
 .select-goods-box {
   display: flex;

src/pages/businessGoods/takeawayGoodsInfo.jsx

@@ -86,6 +86,10 @@ const TakeawayGoodsInfo = props => {
           </Row>
           <Row className={style['info-box--line']}>
             <Col span={24}>
+              <div className={style['info-box--batch-btn']}>
+                <Button>批量配置日期</Button>
+                <Button>批量配置餐段</Button>
+              </div>
               <Table columns={GoodsInfoColumn(options)} dataSource={dataSource} />
             </Col>
           </Row>