feat: 添加ProTable示例

config/groupMealRoute.js

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

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 => {
+    console.log(3);
+    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>
+      ),
+    },
+  ];
+};