Merge branch 'feat/test' of git.quantgroup.cn:ui/merchant-manage-ui into...

Merge branch 'feat/test' of git.quantgroup.cn:ui/merchant-manage-ui into feature-20240705-merge-day-example

config/groupMealRoute.js

@@ -41,4 +41,10 @@ export default [
     name: 'EmployeeManagement',
     component: './EmployeeManagement',
   },
+  {
+    title: '商户管理后台-企业团餐-外卖商品(示例)',
+    path: '/takeawayGoodsExample',
+    name: 'TakeawayGoodsExample',
+    component: '../example/proTable',
+  },
 ];

src/example/proForm/ModalForm/bll.js

+/**
+ * 业务逻辑处理
+ */
+import React from 'react';
+import { Modal } from 'antd';
+import { ExclamationCircleOutlined } from '@ant-design/icons';
+import moment from 'moment';
+import { apiEnterprisePickSelf } from './service';
+import { mealSections } from './staticData';
+
+// 获取自提点列表
+export const getPickSelf = async () => {
+  const res = await apiEnterprisePickSelf({});
+  if (res && res.data && res.data.records) {
+    const data = res.data.records;
+    return data.map(item => ({
+      label: item.pickselfName,
+      value: item.id,
+    }));
+  }
+  return [];
+};
+
+// 风险提示
+const { confirm } = Modal;
+export const checkConfirm = () => {
+  const mt = '';
+  return new Promise((resolve, reject) => {
+    confirm({
+      title: '风险提示',
+      icon: <ExclamationCircleOutlined />,
+      content: `确定关闭${mt}餐品类型？此餐品类型下关联的商户及商品将一并删除，不可逆请谨慎操作！`,
+      onOk() {
+        resolve(1);
+      },
+      onCancel() {
+        reject(new Error());
+      },
+    });
+  });
+};
+
+/**
+ * 接口获取数据转换为表单数据 转换餐段 mealTimePeriod
+ * 接口来源数据： [{mealPeriodType: '1', beginTime: '08:00', endTime: '09:00'}]
+ * 转换后表单结构：[{mealPeriodType: '1', time: [moment('08:00'), moment('09:00')]}]
+ */
+const transformMealTimePeriod = mealTimePeriod => {
+  const mealTimePeriodMap = {};
+  const mealTimePeriodArr = Object.keys(mealSections).map(() => ({}));
+
+  mealTimePeriod.forEach(item => {
+    const { mealPeriodType, beginTime, endTime } = item;
+    // 数据模型转换-餐段配置,转为 {餐段:餐段名称}
+    // 把mealTimePeriod按mealPeriodType转为map
+    const mealPeriodName = mealSections[mealPeriodType];
+    mealTimePeriodMap[mealPeriodType] = mealPeriodName;
+
+    // 数据模型转换-餐段和时间配置, [{餐段, time}, {}, {}]
+    const index = Object.keys(mealSections).indexOf(`${mealPeriodType}`);
+    if (index > -1) {
+      mealTimePeriodArr[index] = {
+        mealPeriodType: `${mealPeriodType}`,
+        time: [
+          moment(`${moment().format('YYYY-MM-DD')} ${beginTime}`),
+          moment(`${moment().format('YYYY-MM-DD')} ${endTime}`),
+        ],
+      };
+    }
+  });
+  return { mealTimePeriodMap, mealTimePeriodArr };
+};
+
+/**
+ * 3. 数据模型转换-接口获取数据转换为表单数据
+ */
+export const transformVOToFormData = data => {
+  const {
+    hideImage,
+    hidePrice,
+    id,
+    name,
+    mealLimit,
+    mealTimePeriod = [],
+    mealType: type,
+    weekPreview,
+    endOrderTime,
+  } = data;
+
+  const formData = {
+    id,
+    name,
+    weekPreview,
+    mealType: type?.map(item => `${item}`) ?? [],
+    hideInfo: [],
+    endOrderTime,
+  };
+
+  if (+hidePrice) {
+    formData.hideInfo.push('hidePrice');
+  }
+  if (+hideImage) {
+    formData.hideInfo.push('hideImage');
+  }
+
+  const { mealTimePeriodMap, mealTimePeriodArr } = transformMealTimePeriod(mealTimePeriod);
+
+  formData.mealTimePeriod = mealTimePeriodArr;
+  formData.mealLimit = mealLimit;
+  formData.mealTimePeriodMap = mealTimePeriodMap;
+  return formData;
+};
+
+/*
+ * 5. 表单数据转换-表单数据转换为接口数据
+ */
+export const transformFormDataToDTO = (res, selectedMealTypes, selectedMealSections) => {
+  const params = {
+    hideImage: 0, // 隐藏图片：默认0 不隐藏 必传
+    hidePrice: 0, // 隐藏价格：默认0 不隐藏 必传
+    ...res,
+  };
+  if (params.pickSelfIds) {
+    params.pickselfIds = params.pickSelfIds;
+    delete params.pickSelfIds;
+  }
+  /**
+   * 处理餐段 mealTimePeriod
+   * 表单来源数据：  [{mealPeriodType: '1', time: [moment('08:00'), moment('09:00')]}]
+   * 转换后数据结构：[{mealPeriodType: '1', beginTime: '08:00', endTime: '09:00'}]
+   */
+  const arr = [];
+  res.mealTimePeriod &&
+    res.mealTimePeriod.forEach(item => {
+      if (item && selectedMealSections[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;
+        arr.push(obj);
+      }
+    });
+  params.mealTimePeriod = arr;
+  /**
+   * hidePrice 隐藏价格：0不隐藏；1隐藏
+   * hideImage 隐藏图片：0不隐藏；1隐藏
+   */
+  if (res.hideInfo?.length) {
+    params.hidePrice = res.hideInfo.includes('hidePrice') ? 1 : 0;
+    params.hideImage = res.hideInfo.includes('hideImage') ? 1 : 0;
+  }
+  delete params.hideInfo;
+  return params;
+};

src/example/proForm/ModalForm/components/MealCheckbox.jsx

+import React from 'react';
+import { Checkbox } from 'antd';
+import { mealSections } from '../staticData';
+
+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/example/proForm/ModalForm/components/MealFormListLimitForm.jsx

+import React from 'react';
+import { Form, Row, Col, Input } from 'antd';
+import { mealType, mealSections } from '../staticData';
+import MealLimit from './MealLimit';
+
+/**
+ * 渲染 企业单笔消费限额 二维表单项目
+ */
+const MealLimitsFormList = (meals, selectedMealTypes) => (
+  <Form.List name="mealLimit" key="mealLimit">
+    {() => (
+      <>
+        {Object.keys(meals).map((meal, i) => (
+          <Row key={`meal${meal}`}>
+            <Col span={0}>
+              <Form.Item
+                label=""
+                name={[i, 'mealPeriodType']}
+                initialValue={meal}
+                labelCol={{ span: 0 }}
+                wrapperCol={{ span: 0 }}
+              >
+                <Input type="hidden" />
+              </Form.Item>
+            </Col>
+            <Col span={24}>
+              <Form.Item
+                label={`${mealSections[meal]}订单`}
+                required
+                labelCol={{ span: 4 }}
+                wrapperCol={{ span: 20 }}
+              >
+                <Form.List name={[i, 'limit']} required wrapperCol={{ span: 21 }}>
+                  {() => (
+                    <Row key={`row${meal}`}>
+                      {selectedMealTypes.map((t, j) => (
+                        <Col key={`col${t}`} span={7}>
+                          <Row>
+                            <Col span={0}>
+                              <Form.Item
+                                label=""
+                                name={[j, 'mealType']}
+                                labelCol={{ span: 0 }}
+                                initialValue={t}
+                                wrapperCol={{ span: 0 }}
+                              >
+                                <Input type="hidden" />
+                              </Form.Item>
+                            </Col>
+                            <Col span={24} offset={j ? 1 : 0}>
+                              <MealLimit label={mealType[t]} name={[j, 'limit']} />
+                            </Col>
+                          </Row>
+                        </Col>
+                      ))}
+                    </Row>
+                  )}
+                </Form.List>
+              </Form.Item>
+            </Col>
+          </Row>
+        ))}
+      </>
+    )}
+  </Form.List>
+);
+
+export default MealLimitsFormList;

src/example/proForm/ModalForm/components/MealLimit.jsx

+import React from 'react';
+import { Form, InputNumber } from 'antd';
+import { validateRequired, isCheckPriceTwoDecimal } from '@/utils/validator';
+
+const MealLimit = props => (
+  // console.log('props :>> ', props);
+  <Form.Item
+    label={`${props.label}限额`}
+    name={props.name}
+    initialValue={props.value}
+    labelCol={{ span: 10 }}
+    wrapperCol={{ span: 14 }}
+    rules={[
+      { validator: validateRequired, message: `请输入${props.label}限额` },
+      { validator: isCheckPriceTwoDecimal, message: '请输入正确的价格' },
+    ]}
+  >
+    <InputNumber addonAfter="元" max={999.99} />
+  </Form.Item>
+);
+export default MealLimit;

src/example/proForm/ModalForm/components/MealSection.jsx

+import React from 'react';
+import { Form, Row, Col, TimePicker } from 'antd';
+import { mealSections } from '../staticData';
+import MealCheckbox from './MealCheckbox';
+
+const MealSection = props => (
+  <Form.List name="mealTimePeriod">
+    {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>
+        ))}
+      </>
+    )}
+  </Form.List>
+);
+
+export default MealSection;

src/example/proForm/ModalForm/index.jsx

+/* eslint-disable no-unused-expressions */
+import React, { useEffect, useRef, useState } from 'react';
+import { notification } from 'antd';
+import { unstable_batchedUpdates } from 'react-dom';
+import { BetaSchemaForm } from '@ant-design/pro-components';
+import { layout, getBaseFormItem } from './staticData';
+import { checkConfirm, transformVOToFormData, transformFormDataToDTO } from './bll';
+import { apiEnterpriseInfo, apiNewEnterprise, apiEditEnterprise } from './service';
+
+// 企业客户信息
+const CustomerInfo = props => {
+  const [selectedMealSections, setSelectedMealSections] = useState([]); // 选中的餐段
+  const [selectedMealTypes, setSelectedMealTypes] = useState([]); // 选中的餐品类型
+  const refForm = useRef(null);
+  /**
+   *  7. 表单关闭
+   * isRefresh 是否刷新列表
+   */
+  const closeModal = isRefresh => {
+    if (!isRefresh && typeof props.onClose === 'function') {
+      props.onClose(isRefresh === 0);
+    }
+  };
+
+  /*
+   *  6. 表单提交
+   */
+  const submitForm = async () => {
+    // 校验表单
+    const formData = await refForm.current.validateFields();
+    // 转换成接口需要的数据
+    const data = transformFormDataToDTO(formData, selectedMealTypes, selectedMealSections);
+    let api = apiNewEnterprise;
+    // 如果有客户ID 则为编辑
+    if (props.id) {
+      data.id = props.id;
+      api = apiEditEnterprise;
+    }
+    const resp = await api(data);
+    if (resp && resp.data) {
+      // 保存成功后刷新列表
+      closeModal(0);
+      notification.success({ message: '保存成功！' });
+    }
+  };
+
+  /**
+   * 改变餐品类型 (选自助餐必选外卖，取消外卖必须取消自助餐)
+   * @param {array} mt 选中的餐品类型 ['1', '2']
+   * types: { 1: '外卖', 2: '自助餐', 4: '到店' }
+   */
+  const onChangeMealType = async mt => {
+    try {
+      // 编辑时，取消餐段需提示用户确认风险
+      if (props.id && mt.length < selectedMealTypes.length) {
+        await checkConfirm();
+      }
+      // 取消外卖，必须取消自助餐
+      if (selectedMealTypes.includes('1') && !mt.includes('1')) {
+        mt = mt.filter(item => item !== '2');
+      }
+      // 选择自助餐，必须选择外卖
+      if (!selectedMealTypes.includes('1') && mt.includes('2')) {
+        mt.push('1');
+      }
+
+      // 注意 须先set 再from.setFieldsValue 防止丢失数据
+      setSelectedMealTypes(mt);
+      refForm.current?.setFieldsValue?.({
+        mealType: mt,
+      });
+    } catch {
+      refForm.current?.setFieldsValue?.({
+        mealType: selectedMealTypes,
+      });
+    }
+  };
+  /**
+   * 改变餐段
+   * @param {object} e 事件对象
+   * selectedMealSections: { 1: '早餐', 2: '午餐', 4: '晚餐' }
+   */
+  const onChangeMealSection = e => {
+    const { id, checked, label } = e?.target || {};
+    const values = Object.assign({}, selectedMealSections);
+    // 选中则添加到选中餐段中，否则删除
+    if (checked) {
+      values[id] = label;
+    } else {
+      delete values[id];
+    }
+    // 设置选中餐段
+    setSelectedMealSections(values);
+    // 餐段都没选 则设置为空数组
+    if (Object.keys(values).length === 0) {
+      refForm.current?.setFieldsValue?.({
+        mealTimePeriod: null,
+      });
+    }
+    // 触发验证当前自段 是否显示表单提示
+    refForm.current?.validateFields?.(['mealTimePeriod']);
+  };
+
+  /**
+   * 获取表单信息
+   * 把接口数据转换成表单需要的数据格式
+   */
+  const getInfo = async () => {
+    // if (!props.id) {
+    //   return {};
+    // }
+    const res = await apiEnterpriseInfo(props.id);
+    if (res && res.data) {
+      // 转换成表单需要的数据
+      const formData = transformVOToFormData(res.data);
+
+      /**
+       * 使用setTimeout 的原因是防止 setState的时候 refForm丢失引用
+       * 导致 refForm.current.validateFields 报错
+       * 先渲染完表单再setState
+       * */
+      // setTimeout(() => {
+      //   // setState 会导致组件重新渲染 为了防止多次渲染 使用 unstable_batchedUpdates 之后
+      //   // React 18 会优化该问题
+      unstable_batchedUpdates(() => {
+        // 选中的餐品类型
+        setSelectedMealTypes(formData.mealType);
+        // 选中的餐段
+        setSelectedMealSections(formData.mealTimePeriodMap);
+      });
+      // });
+      // return formData;
+      refForm.current?.setFieldsValue?.(formData);
+    }
+    // return {};
+  };
+
+  useEffect(() => {
+    if (props.visible) {
+      // 如果有客户ID 则为编辑 需获取表单信息
+      if (props.id) {
+        getInfo();
+      }
+    }
+  }, [props.visible]);
+
+  const formColumns = getBaseFormItem({
+    onChangeMealType,
+    onChangeMealSection,
+    id: props.id,
+    selectedMealSections,
+    selectedMealTypes,
+    refForm,
+  });
+
+  return (
+    <BetaSchemaForm
+      layoutType="ModalForm"
+      title="企业客户信息"
+      open={props.visible}
+      width="900px"
+      modalProps={{
+        maskClosable: false,
+        destroyOnClose: true,
+      }}
+      // request={getInfo}
+      formRef={refForm}
+      onOpenChange={closeModal}
+      layout="horizontal"
+      {...layout}
+      onFinish={submitForm}
+      columns={formColumns}
+    />
+  );
+};
+export default CustomerInfo;

src/example/proForm/ModalForm/service.js

+import request from '@/utils/request';
+import config from '@/../config/env.config';
+
+const { roleApi, apiPrefix } = config;
+
+/**
+ * 获取企业客户详细
+ * http://yapi.quantgroups.com/project/389/interface/api/65339
+ */
+export async function apiEnterpriseInfo(id) {
+  return request.get(`${apiPrefix}/enterprise/info?id=${id}`, {
+    prefix: roleApi,
+  });
+}
+/**
+ * 添加企业客户
+ * http://yapi.quantgroups.com/project/389/interface/api/65329
+ */
+export async function apiNewEnterprise(data) {
+  return request.post(`${apiPrefix}/enterprise/save`, {
+    data,
+    prefix: roleApi,
+  });
+}
+/**
+ * 编辑企业客户
+ * http://yapi.quantgroups.com/project/389/interface/api/65334
+ */
+export async function apiEditEnterprise(data) {
+  return request.post(`${apiPrefix}/enterprise/update`, {
+    data,
+    prefix: roleApi,
+  });
+}
+
+/**
+ * 查询自提点列表
+ * http://yapi.quantgroups.com/project/389/interface/api/65494
+ */
+export async function apiEnterprisePickSelf() {
+  return request.get(`${apiPrefix}/selfPickUpLocation/list`, {
+    prefix: roleApi,
+  });
+}

src/example/proForm/ModalForm/staticData.js

+import React from 'react';
+import moment from 'moment';
+import MealSection from './components/MealSection';
+import MealFormListLimit from './components/MealFormListLimitForm';
+import { getPickSelf } from './bll';
+
+const hideEnums = { hidePrice: '隐藏商品价格', hideImage: '隐藏商品图片' };
+const weekMap = new Map([[1, '是'], [0, '否']]);
+
+export const layout = {
+  labelCol: { span: 4 },
+  wrapperCol: { span: 18 },
+};
+
+// 餐品类型
+export const mealType = {
+  1: '外卖',
+  2: '自助餐',
+  4: '到店',
+};
+// 餐段
+export const mealSections = {
+  1: '早餐',
+  2: '午餐',
+  4: '晚餐',
+};
+
+// 校验时间
+const checkTime = (arr, current) => {
+  let valid = false;
+  arr.forEach(item => {
+    if (current < item.endTime) {
+      valid = true;
+    }
+  });
+  return valid;
+};
+// 验证餐段
+const validateMeals = (refForm, selectedMealSections) => {
+  const { mealTimePeriod = [] } = refForm.current?.getFieldValue?.() || {};
+  const arr = [];
+  let validTime = false;
+  mealTimePeriod.forEach(item => {
+    if (item && selectedMealSections[item.mealPeriodType]) {
+      const obj = { ...item };
+      if (obj.time?.length === 2) {
+        obj.beginTime = moment(obj.time[0]).format('HH:mm');
+        obj.endTime = moment(obj.time[1]).format('HH:mm');
+        if (checkTime(arr, obj.beginTime, selectedMealSections[item.mealPeriodType])) {
+          validTime = true;
+        }
+        arr.push(obj);
+      }
+    }
+  });
+  if (validTime) {
+    // eslint-disable-next-line prefer-promise-reject-errors
+    return Promise.reject('时间段不能交叉！');
+  }
+  return Promise.resolve();
+};
+
+// 获取 schemaForm 的 columns
+export const getBaseFormItem = options => {
+  const {
+    id,
+    selectedMealTypes,
+    onChangeMealType,
+    selectedMealSections,
+    onChangeMealSection,
+    refForm,
+  } = options;
+
+  const baseColumn = [
+    {
+      title: '企业名称',
+      dataIndex: 'name',
+      formItemProps: {
+        rules: [{ required: true, message: '请输入企业名称' }],
+      },
+    },
+    {
+      hideInForm: !!id,
+      title: '企业取餐点',
+      dataIndex: 'pickSelfIds',
+      valueType: 'select',
+      fieldProps: {
+        mode: 'multiple',
+      },
+      request: getPickSelf,
+      formItemProps: {
+        rules: [{ required: true, message: '请选择企业取餐点' }],
+      },
+    },
+    {
+      title: '企业截止时间',
+      dataIndex: 'endOrderTime',
+      valueType: 'digit',
+      formItemProps: {
+        rules: [{ required: true, message: '请输入企业截止时间' }],
+        addonAfter: '分钟',
+        extra: <span>企业员工下单的截至时间，仅支持正整数，单位为分钟。</span>,
+      },
+    },
+    {
+      title: '餐品类型',
+      dataIndex: 'mealType',
+      valueType: 'checkbox',
+      valueEnum: mealType,
+      formItemProps: {
+        rules: [{ required: true, message: '请选择餐品类型' }],
+      },
+      fieldProps: {
+        onChange: onChangeMealType,
+        name: 'mealType',
+      },
+    },
+    {
+      title: '餐段配置',
+      dataIndex: 'mealTimePeriod',
+      formItemProps: {
+        rules: [{ required: true, message: '请选择餐段配置' }],
+      },
+      fieldProps: {
+        copyIconProps: false, // 隐藏复制行按钮
+        deleteIconProps: false, // 隐藏删除行按钮
+        creatorButtonProps: false, // 隐藏添加行按钮
+      },
+      renderFormItem: () => (
+        <MealSection
+          meals={selectedMealSections}
+          validateMeals={() => validateMeals(refForm, selectedMealSections)}
+          onChangeSection={onChangeMealSection}
+        />
+      ),
+    },
+    {
+      title: '',
+      dataIndex: '',
+      valueType: 'divider',
+      formItemProps: {
+        wrapperCol: { span: 22 },
+      },
+      fieldProps: {
+        children: '企业单笔消费限额',
+        orientation: 'left',
+      },
+    },
+    {
+      title: '',
+      dataIndex: 'mealLimit',
+      formItemProps: {
+        labelCol: { span: 0 },
+        wrapperCol: { span: 24 },
+      },
+      renderFormItem: () => MealFormListLimit(selectedMealSections, selectedMealTypes),
+    },
+    {
+      title: '商品隐藏信息',
+      dataIndex: 'hideInfo',
+      valueType: 'checkbox',
+      valueEnum: hideEnums,
+    },
+    {
+      title: '是否周预览',
+      dataIndex: 'weekPreview',
+      formItemProps: {
+        rules: [{ required: true, message: '请选择是否周预览' }],
+      },
+      valueType: 'radio',
+      valueEnum: weekMap,
+      // convertValue: v => `${v}`, // 从接口获取的数据做简单转换
+    },
+  ];
+  return baseColumn;
+};

src/example/proTable/index.jsx

+import React, { useState, useRef } from 'react';
+import { ProTable } from '@ant-design/pro-components';
+import { Button } from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
+import { customerColumn } from './staticData';
+import CustomerInfo from '@/example/proForm/ModalForm/index';
+import utilStyle from '@/utils/utils.less';
+import { stringOrObjectTrim } from '@/utils/utils';
+import { apiEnterpriseList } from './service';
+
+const BusinessCustomer = () => {
+  const refTable = useRef();
+  const [visible, setVisible] = useState(false);
+  const [id, setId] = useState('');
+  const query = async params => {
+    const data = {
+      page: params.current,
+      size: params.pageSize,
+      data: stringOrObjectTrim(params),
+    };
+    const res = await apiEnterpriseList(data);
+    return {
+      data: res.data.records,
+      total: res.data.total,
+    };
+  };
+  const onEdit = v => {
+    setId(v);
+    setVisible(true);
+  };
+
+  const onClose = refresh => {
+    setVisible(false);
+    refresh && refTable.current.reload();
+  };
+
+  return (
+    <div className={utilStyle.formPageBox}>
+      <ProTable
+        actionRef={refTable}
+        search={{
+          span: 8,
+          className: utilStyle.formSearch,
+          collapsed: false,
+          collapseRender: () => null,
+        }}
+        columns={customerColumn({ onEdit })}
+        request={params => query({ ...params })}
+        rowKey={r => r.id}
+        bordered
+        options={false}
+        toolBarRender={() => [
+          <Button
+            key="add"
+            icon={<PlusOutlined />}
+            type="primary"
+            onClick={() => {
+              setId('');
+              setVisible(!0);
+            }}
+          >
+            添加企业客户
+          </Button>,
+        ]}
+      />
+      {visible && <CustomerInfo visible={visible} id={id} onClose={onClose} />}
+    </div>
+  );
+};
+
+export default BusinessCustomer;

src/example/proTable/service.js

+import request from '@/utils/request';
+import config from '@/../config/env.config';
+
+const { roleApi, apiPrefix } = config;
+
+/**
+ * 获取企业客户列表
+ * http://yapi.quantgroups.com/project/389/interface/api/65324
+ */
+export async function apiEnterpriseList(data) {
+  return request.post(`${apiPrefix}/enterprise/pageList`, {
+    data,
+    prefix: roleApi,
+  });
+}

src/example/proTable/staticData.js

+import React from 'react';
+import { Button } from 'antd';
+
+export const layout = {
+  labelCol: { span: 4 },
+  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 = {
+  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: '公司名称',
+      dataIndex: 'name',
+      width: 120,
+      align: 'center',
+    },
+    {
+      title: '截单时间(分钟)',
+      dataIndex: 'endOrderTime',
+      width: 120,
+      align: 'center',
+      hideInSearch: true,
+    },
+    {
+      title: '餐品类型',
+      dataIndex: 'mealType',
+      width: 120,
+      align: 'center',
+      hideInSearch: true,
+      render(types) {
+        if (types && types.length && typeof types === 'object') {
+          const arr = types.map(meal => mealType[meal]);
+          return arr.join('/');
+        }
+        return '-';
+      },
+    },
+    {
+      title: '创建人',
+      dataIndex: 'createdBy',
+      width: 120,
+      align: 'center',
+      hideInSearch: true,
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createdAt',
+      width: 120,
+      align: 'center',
+      hideInSearch: true,
+    },
+    {
+      title: '操作',
+      hideInSearch: true,
+      dataIndex: 'action',
+      width: 200,
+      align: 'center',
+      fixed: 'right',
+      render: (val, r) => (
+        <Button key="edit" onClick={() => onEdit(r.id)}>
+          编辑
+        </Button>
+      ),
+    },
+  ];
+};