Merge branch 'feat/storeManagement' into feature/meal-3.0

* feat/storeManagement:
  feat: 接口联调
  feat: 接口文档对接
  feat: 员工管理开发
  feat: 员工管理开发
  feat: 企业店铺管理

config/config.js

@@ -293,6 +293,17 @@ export default {
               component: './businessManage/info',
             },
             ...groupMealRoute,
+            {
+              path: '/StoreManagement',
+              name: 'StoreManagement',
+              component: './StoreManagement',
+            },
+            {
+              title: '商户管理后台-员工员工管理',
+              path: '/EmployeeManagement',
+              name: 'EmployeeManagement',
+              component: './EmployeeManagement',
+            },
             {
               component: './404',
             },

src/pages/EmployeeManagement/components/RechargeDetailsModal.jsx

+import React from 'react';
+import { Modal, Table } from 'antd';
+
+const RechargeDetailsModal = ({ visible, onClose, list }) => {
+  const columns = [
+    {
+      title: '员工ID',
+      dataIndex: 'id',
+      key: 'id',
+    },
+    {
+      title: '员工姓名',
+      dataIndex: 'staffName',
+      key: 'staffName',
+    },
+    {
+      title: '充值余额',
+      dataIndex: 'rechargeAmount',
+      key: 'rechargeAmount',
+    },
+    {
+      title: '充值时间',
+      dataIndex: 'generateDate',
+      key: 'generateDate',
+    },
+  ];
+
+  return (
+    <Modal visible={visible} title="充值明细" onCancel={onClose} footer={null}>
+      <Table dataSource={list} columns={columns} pagination={false} border />
+    </Modal>
+  );
+};
+
+export default RechargeDetailsModal;

src/pages/EmployeeManagement/components/blacklistModal.jsx

+import React from 'react';
+import { Modal, Form, Input, Checkbox, message } from 'antd';
+import styles from '../index.less';
+import { apiStaffBlack } from '../service';
+
+const { Item } = Form;
+
+const BlacklistModal = ({ visible, onClose, list, employeeId }) => {
+  const [form] = Form.useForm();
+
+  const handleSave = () => {
+    form.validateFields().then(values => {
+      const params = {
+        employeeId,
+        ids: list,
+        isBlack: 1,
+        balanceBackFlag: 1,
+      };
+      apiStaffBlack(params).then(res => {
+        if (res.businessCode === '0000') {
+          message.success('设置成功');
+          onClose(true);
+        }
+      });
+    });
+  };
+
+  return (
+    <Modal visible={visible} title="设置员工黑名单" onCancel={onClose} onOk={handleSave}>
+      <Form form={form} layout="vertical">
+        <Item name="ids" label="您确定要把员工ID:">
+          {list.length && list.map(item => <span>{item},</span>)}
+        </Item>
+        <Item name="reason" label="加入黑名单吗？">
+          <div className={styles.blackList}>
+            <Checkbox disabled></Checkbox>
+            <div className={styles.left}>
+              <span>请确定要回收员工账户内的剩余余额&餐券吗？ </span>
+              <br />
+              <span>(勾选则回收，不勾选则不回收。)</span>
+            </div>
+          </div>
+        </Item>
+      </Form>
+    </Modal>
+  );
+};
+
+export default BlacklistModal;

src/pages/EmployeeManagement/components/departmentModal.jsx

+import React, { useState } from 'react';
+import { Modal, Form, Radio, Input, Button, Upload, message, Select } from 'antd';
+import { UploadOutlined } from '@ant-design/icons';
+import { apiDepartmentSave, apiDepartmentExcel } from '../service';
+
+const { Dragger } = Upload;
+const { Item } = Form;
+const layout = {
+  labelCol: { span: 6 },
+  wrapperCol: { span: 16 },
+};
+const DepartmentModal = ({ visible, onClose, enterpriseList }) => {
+  const [form] = Form.useForm();
+  const [importMode, setImportMode] = useState(false);
+
+  const handleCancel = val => {
+    form.resetFields();
+    setImportMode(false);
+    onClose(val);
+  };
+
+  const handleImportChange = info => {
+    if (info.file.status === 'done') {
+      message.success('文件上传成功');
+    } else if (info.file.status === 'error') {
+      message.error('文件上传失败');
+    }
+  };
+
+  const getDepartmentSave = async values => {
+    const params = {
+      name: values.name,
+      enterpriseId: values.enterpriseId,
+    };
+    const res = await apiDepartmentSave(params);
+    if (res.businessCode === '0000') {
+      message.success('保存成功');
+      handleCancel(true);
+    }
+  };
+
+  const getDepartmentExcel = async values => {
+    const params = {
+      enterpriseId: values.enterpriseId,
+      file: values.file,
+    };
+    const res = await apiDepartmentExcel(params);
+    if (res.businessCode === '0000') {
+      message.success('保存成功');
+      handleCancel(true);
+    }
+  };
+
+  const handleSave = () => {
+    form.validateFields().then(values => {
+      if (importMode) {
+        getDepartmentExcel(values);
+        return;
+      }
+      getDepartmentSave(values);
+    });
+  };
+
+  return (
+    <Modal
+      title="创建部门"
+      visible={visible}
+      onCancel={() => handleCancel(false)}
+      footer={[
+        <Button key="cancel" onClick={onClose}>
+          取消
+        </Button>,
+        <Button key="save" type="primary" onClick={() => handleSave()}>
+          保存
+        </Button>,
+      ]}
+      initialValue={{ configMode: 0 }}
+    >
+      <Form form={form} {...layout}>
+        <Item
+          label="选择企业"
+          name="enterpriseId"
+          rules={[{ required: true, message: '请选择企业' }]}
+        >
+          <Select
+            placeholder="请选择企业"
+            allowClear
+            showSearch
+            filterOption={(input, option) =>
+              (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
+            }
+            options={enterpriseList}
+          />
+        </Item>
+
+        <Item
+          label="配置方式"
+          name="configMode"
+          rules={[{ required: true, message: '请选择配置方式' }]}
+          initialValue={0}
+        >
+          <Radio.Group>
+            <Radio value={0} onChange={() => setImportMode(false)}>
+              单个添加
+            </Radio>
+            <Radio value={1} onChange={() => setImportMode(true)}>
+              批量导入
+            </Radio>
+          </Radio.Group>
+        </Item>
+
+        {importMode ? (
+          <Item
+            label="上传文件"
+            name="file"
+            rules={[
+              { required: true, message: '请上传文件' },
+              {
+                // eslint-disable-next-line no-confusing-arrow
+                validator: (_, value) =>
+                  value && value.fileList.length > 0
+                    ? Promise.resolve()
+                    : // eslint-disable-next-line prefer-promise-reject-errors
+                      Promise.reject('请上传文件'),
+              },
+            ]}
+          >
+            <Dragger
+              beforeUpload={() => false}
+              maxCount={1}
+              accept=".xls,.xlsx"
+              onChange={handleImportChange}
+            >
+              <UploadOutlined />
+              <p>
+                将文件拖到此处，或<a href="#">点击上传</a>
+              </p>
+            </Dragger>
+          </Item>
+        ) : (
+          <Item
+            label="部门名称"
+            name="name"
+            rules={[{ required: true, message: '请输入部门名称' }]}
+          >
+            <Input />
+          </Item>
+        )}
+      </Form>
+    </Modal>
+  );
+};
+
+export default DepartmentModal;

src/pages/EmployeeManagement/components/newEmployeeModal.jsx

+import React, { useState } from 'react';
+import { Modal, Form, Input, Button, Select, message, Upload, Radio } from 'antd';
+import { UploadOutlined } from '@ant-design/icons';
+import { apiStaffSave, apiStaffExcel } from '../service';
+import styles from '../index.less';
+
+const { Dragger } = Upload;
+const { Option } = Select;
+
+const layout = {
+  labelCol: { span: 6 },
+  wrapperCol: { span: 16 },
+};
+const NewEmployeeModal = props => {
+  const { departmentList, visible, onClose, enterpriseList, getDepartmentList } = props;
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState(false);
+  const [importMode, setImportMode] = useState(false);
+  const handleCancel = val => {
+    form.resetFields();
+    setImportMode(false);
+    onClose(val);
+  };
+  const handleSave = () => {
+    form.validateFields().then(async values => {
+      setLoading(true);
+      if (importMode) {
+        const res = await apiStaffExcel(values);
+        if (res.businessCode === '0000') {
+          message.success('上传成功');
+          handleCancel(true);
+        }
+        return;
+      }
+      const res = await apiStaffSave(values);
+      if (res.businessCode === '0000') {
+        setLoading(false);
+        message.success('保存成功');
+        handleCancel(true);
+      }
+    });
+  };
+
+  const validatePhone = (_, value) => {
+    console.log(value);
+    const phoneRegex = /^1[3456789]\d{9}$/;
+    if (!value || phoneRegex.test(value)) {
+      return Promise.resolve();
+    }
+    // eslint-disable-next-line prefer-promise-reject-errors
+    return Promise.reject('请输入有效的手机号码');
+  };
+
+  const onChange = value => {
+    getDepartmentList(value);
+  };
+  return (
+    <Modal
+      visible={visible}
+      title="添加新员工"
+      onCancel={onClose}
+      footer={[
+        <Button key="cancel" onClick={onClose}>
+          取消
+        </Button>,
+        <Button key="save" type="primary" loading={loading} onClick={handleSave}>
+          保存
+        </Button>,
+      ]}
+    >
+      <Form form={form} {...layout}>
+        <Form.Item
+          name="enterpriseId"
+          label="企业"
+          rules={[
+            {
+              required: true,
+              message: '请选择企业',
+            },
+          ]}
+        >
+          <Select
+            onChange={onChange}
+            placeholder="请选择企业"
+            allowClear
+            showSearch
+            filterOption={(input, option) =>
+              (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
+            }
+            options={enterpriseList}
+          />
+        </Form.Item>
+        <Form.Item
+          label="配置方式"
+          name="configMode"
+          rules={[{ required: true, message: '请选择配置方式' }]}
+          initialValue={0}
+        >
+          <Radio.Group>
+            <Radio value={0} onChange={() => setImportMode(false)}>
+              单个添加
+            </Radio>
+            <Radio value={1} onChange={() => setImportMode(true)}>
+              批量导入
+            </Radio>
+          </Radio.Group>
+        </Form.Item>
+        {importMode ? (
+          <>
+            <Form.Item
+              label="上传文件"
+              name="file"
+              rules={[
+                { required: true, message: '请上传文件' },
+                {
+                  // eslint-disable-next-line no-confusing-arrow
+                  validator: (_, value) =>
+                    value && value.fileList.length > 0
+                      ? Promise.resolve()
+                      : // eslint-disable-next-line prefer-promise-reject-errors
+                        Promise.reject('请上传文件'),
+                },
+              ]}
+            >
+              <Dragger beforeUpload={() => false} maxCount={1} accept=".xls,.xlsx">
+                <UploadOutlined />
+                <p>
+                  将文件拖到此处，或<a href="#">点击上传</a>
+                </p>
+              </Dragger>
+            </Form.Item>
+            <div className={styles.employees}>
+              <a
+                data-v-7e627236=""
+                href="https://img.mumcooking.com//personnel/excel.xlsx?v1"
+                className="batchDialog-row-download-a"
+              >
+                员工导入模版.xlsx
+              </a>
+            </div>
+          </>
+        ) : (
+          <>
+            {' '}
+            <Form.Item
+              name="departmentId"
+              label="部门"
+              rules={[
+                {
+                  required: true,
+                  message: '请选择部门',
+                },
+              ]}
+            >
+              <Select
+                placeholder="请选择部门"
+                allowClear
+                showSearch
+                filterOption={(input, option) =>
+                  (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
+                }
+                options={departmentList}
+              />
+            </Form.Item>
+            <Form.Item
+              name="staffNo"
+              label="员工ID"
+              rules={[
+                {
+                  required: true,
+                  message: '请输入员工ID',
+                },
+              ]}
+            >
+              <Input />
+            </Form.Item>
+            <Form.Item
+              name="staffName"
+              label="员工姓名"
+              rules={[
+                {
+                  required: true,
+                  message: '请输入员工姓名',
+                },
+              ]}
+            >
+              <Input />
+            </Form.Item>
+            <Form.Item
+              name="mobile"
+              label="员工手机号"
+              rules={[
+                {
+                  required: true,
+                  message: '请输入员工手机号',
+                },
+                {
+                  validator: validatePhone,
+                },
+              ]}
+            >
+              <Input maxLength={11} />
+            </Form.Item>
+          </>
+        )}
+      </Form>
+    </Modal>
+  );
+};
+
+export default NewEmployeeModal;

src/pages/EmployeeManagement/components/viewDepartmentModal.jsx

+import React, { useState } from 'react';
+import { Modal, Form, Input, Button, Table, Space, Row, Col, Select, message } from 'antd';
+import { apiDepartmentList, apiDepartmentUpdate } from '../service';
+
+const { Item } = Form;
+
+const ViewDepartmentModal = ({ visible, onClose, enterpriseList }) => {
+  const [form] = Form.useForm();
+  const [refForm] = Form.useForm();
+  const [dataSource, setDataSource] = useState([]);
+  const [nameVisible, setNameVisible] = useState(false);
+  const [value, setValue] = useState('');
+  const [name, setName] = useState('');
+  const [id, setId] = useState('');
+  const [pagination, setPagination] = useState({
+    page: 1,
+    size: 10,
+  });
+
+  const handleCancel = () => {
+    form.resetFields();
+    onClose();
+  };
+  const editName = row => {
+    setName(row.department);
+    setId(row.id);
+    setNameVisible(true);
+  };
+
+  const handleSearch = async values => {
+    setPagination({ ...pagination, page: 1 });
+    setValue(value);
+    const res = await apiDepartmentList({ value, ...pagination });
+    if (res.businessCode === '0000' && res.data?.records?.length) {
+      const list = res.data.records;
+      const optionData = list.map(item => ({
+        value: item.id,
+        label: item.name,
+      }));
+      setDataSource(optionData);
+    }
+  };
+
+  const handleTableChange = (pag, filters, sorter) => {
+    setPagination(pag);
+    handleSearch();
+  };
+
+  const handleSave = () => {
+    form.validateFields().then(async values => {
+      const params = {
+        enterpriseId: form.id,
+        id,
+        name: values.name,
+      };
+      const res = await apiDepartmentUpdate(params);
+      if (res.businessCode === '0000') {
+        message.success('修改成功');
+        setNameVisible(false);
+        handleSearch();
+      }
+    });
+  };
+  const columns = [
+    {
+      title: 'ID',
+      dataIndex: 'id',
+      key: 'id',
+    },
+    {
+      title: '部门',
+      dataIndex: 'department',
+      key: 'department',
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createTime',
+      key: 'createTime',
+    },
+    {
+      title: '创建人',
+      dataIndex: 'creator',
+      key: 'creator',
+    },
+    {
+      title: '操作',
+      dataIndex: 'operation',
+      key: 'operation',
+      render: (_, record) => (
+        <Space>
+          <Button type="link" onClick={editName(record)}>
+            修改部门名称
+          </Button>
+        </Space>
+      ),
+    },
+  ];
+
+  return (
+    <Modal visible={visible} onCancel={handleCancel} width={800} footer={null} title="查看部门">
+      <Form form={form} onFinish={handleSearch}>
+        <Row gutter={16}>
+          <Col span={10}>
+            <Item name="id" style={{ width: '300px' }}>
+              <Select
+                placeholder="请选择企业"
+                allowClear
+                showSearch
+                filterOption={(input, option) =>
+                  (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
+                }
+                options={enterpriseList}
+              />
+            </Item>
+          </Col>
+          <Col>
+            <Item>
+              <Button type="primary" htmlType="submit">
+                搜索
+              </Button>
+            </Item>
+          </Col>
+        </Row>
+      </Form>
+      <Table
+        dataSource={dataSource}
+        columns={columns}
+        pagination={pagination}
+        onChange={handleTableChange}
+        bordered
+      />
+      <Modal
+        title="修改部门名称"
+        visible={nameVisible}
+        footer={[
+          <Button key="cancel">取消</Button>,
+          <Button key="save" type="primary" onClick={() => handleSave()}>
+            保存
+          </Button>,
+        ]}
+      >
+        <Form form={refForm}>
+          <Form.Item
+            label="部门名称"
+            name="name"
+            initialValues={name}
+            rules={[{ required: true, message: '请填写部门名称' }]}
+          >
+            <Input />
+          </Form.Item>
+        </Form>
+      </Modal>
+    </Modal>
+  );
+};
+
+export default ViewDepartmentModal;

src/pages/EmployeeManagement/data.js

+import React from 'react';
+import { Image as ImageComponent, Button, Switch } from 'antd';
+import { FormOutlined } from '@ant-design/icons';
+
+export const repastTypeList = [
+  {
+    value: 0,
+    label: '拉黑',
+  },
+  {
+    value: 1,
+    label: '正常',
+  },
+];
+
+export const columns = props => [
+  {
+    title: '部门名称',
+    key: 'departmentName',
+    dataIndex: 'departmentName',
+    align: 'center',
+  },
+  {
+    title: '员工姓名',
+    key: 'staffName',
+    dataIndex: 'staffName',
+    align: 'center',
+  },
+  {
+    title: '员工手机号',
+    key: 'mobile',
+    dataIndex: 'mobile',
+    align: 'center',
+  },
+  {
+    title: '员工状态',
+    key: 'isBlack',
+    dataIndex: 'isBlack',
+    align: 'center',
+    render: _ => (_ ? '拉黑' : '正常'),
+  },
+  {
+    title: '余额/券状态',
+    key: 'balanceBackFlag',
+    dataIndex: 'balanceBackFlag',
+    align: 'center',
+    render: _ => (_ ? '是' : '否'),
+  },
+  {
+    title: '是否消费限额',
+    key: 'isLimit',
+    dataIndex: 'isLimit',
+    align: 'center',
+    render: (_, row) => (
+      <>
+        <Switch
+          checkedChildren="限额"
+          unCheckedChildren="不限额"
+          defaultChecked={row?.isLimit}
+          onChange={val => props.handleLimitChange(val, row)}
+        />
+      </>
+    ),
+  },
+  {
+    title: '员工企业余额',
+    key: 'balanceBackFlag',
+    dataIndex: 'balanceBackFlag',
+    align: 'center',
+  },
+  {
+    title: '有效餐券张数',
+    key: 'couponCount',
+    dataIndex: 'couponCount',
+    align: 'center',
+  },
+  {
+    title: '操作',
+    dataIndex: 'option',
+    valueType: 'option',
+    align: 'center',
+    key: 'option',
+    render: (_, row) => [
+      <Button type="link" onClick={() => props.goDetails(row)}>
+        余额充值明细
+      </Button>,
+      <Button type="link" disabled={!row?.isBlack} onClick={() => props.delEmployee(row)}>
+        删除
+      </Button>,
+    ],
+  },
+];

src/pages/EmployeeManagement/index.less

+.tip {
+  padding-top: 5px;
+  color: #ff8c00;
+  font-size: 12px;
+}
+
+.card {
+  margin-bottom: 16px;
+}
+
+.btn {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  display: flex;
+}
+
+.left {
+  margin-left: 20px;
+}
+
+.editShop {
+  margin-bottom: 10px;
+}
+
+.addBtn {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.employees {
+  text-align: center;
+}
+
+.blackList {
+  display: flex;
+  align-items: center;
+  color: #8e8e8e;
+
+  span {
+    &:nth-child(1) {
+      font-size: 12px;
+    }
+
+    &:nth-child(3) {
+      font-size: 10px;
+    }
+  }
+}

src/pages/EmployeeManagement/service.js

+import request from '@/utils/request';
+import config from '../../../config/env.config';
+import { stringify } from 'qs';
+import _ from 'lodash';
+
+const { goodsApi } = config;
+
+//  [企业员工]-列表查询
+//  http://yapi.quantgroups.com/project/389/interface/api/65359
+export const apiStaffList = async params => {
+  const data = await request.post('/api/consoles/enterprise/staff/pageList', {
+    prefix: goodsApi,
+    data: params,
+  });
+  return data;
+};
+
+// [企业客户]-列表查询
+// http://yapi.quantgroups.com/project/389/interface/api/65324
+export const apiEnterpriseList = async () => {
+  const data = await request.post('/api/consoles/enterprise/pageList', {
+    prefix: goodsApi,
+    data: {
+      page: 1,
+      size: 10000,
+    },
+  });
+  return data;
+};
+
+// [企业部门]-列表查询
+// http://yapi.quantgroups.com/project/389/interface/api/65344
+export const apiDepartmentList = async params => {
+  const data = await request.post('/api/consoles/enterprise/department/pageList', {
+    prefix: goodsApi,
+    data: params,
+  });
+  return data;
+};
+
+// [企业员工]-添加员工
+// http://yapi.quantgroups.com/project/389/interface/api/65364
+export const apiStaffSave = async params => {
+  const data = await request.post('/api/consoles/enterprise/staff/save', {
+    prefix: goodsApi,
+    data: params,
+  });
+  return data;
+};
+
+// [企业员工]-导入员工
+// http://yapi.quantgroups.com/project/389/interface/api/65384
+export const apiStaffExcel = async file => {
+  const params = new FormData();
+  params.append('file', file.file);
+  params.append('enterpriseId', file.enterpriseId);
+  const data = await request.post('/api/consoles/enterprise/staff/excel', {
+    prefix: goodsApi,
+    data: params,
+  });
+  return data;
+};
+
+// [企业部门]-新增企业部门
+// http://yapi.quantgroups.com/project/389/interface/api/65349
+export const apiDepartmentSave = async params => {
+  const data = await request.post('/api/consoles/enterprise/department/save', {
+    prefix: goodsApi,
+    data: params,
+  });
+  return data;
+};
+
+// [企业部门]-导入企业部门
+// http://yapi.quantgroups.com/project/389/interface/api/65354
+export const apiDepartmentExcel = async file => {
+  const params = new FormData();
+  params.append('file', file.file);
+  params.append('enterpriseId', file.enterpriseId);
+  const data = await request.post('/api/consoles/enterprise/department/excel', {
+    prefix: goodsApi,
+    data: params,
+  });
+  return data;
+};
+
+// [企业员工]-删除员工
+// http://yapi.quantgroups.com/project/389/interface/api/65374
+export const apiStaffDelete = async params => {
+  const data = await request.post('/api/consoles/enterprise/staff/delete', {
+    prefix: goodsApi,
+    data: params,
+  });
+  return data;
+};
+
+// [企业部门]-更新部门
+// http://yapi.quantgroups.com/project/389/interface/api/65474
+export const apiDepartmentUpdate = async params => {
+  const data = await request.post('/api/consoles/enterprise/department/update', {
+    prefix: goodsApi,
+    data: params,
+  });
+  return data;
+};
+
+// [企业员工]-充值明细查询
+// http://yapi.quantgroups.com/project/389/interface/api/65489
+export const apiGenerateLogList = async params => {
+  const data = await request.get('/api/consoles/enterprise/staff/generateLog/list', {
+    prefix: goodsApi,
+    params,
+  });
+  return data;
+};
+
+// [企业员工]-员工限额
+// http://yapi.quantgroups.com/project/389/interface/api/65379
+export const apiStaffLimit = async params => {
+  const data = await request.post('/api/consoles/enterprise/staff/limit', {
+    prefix: goodsApi,
+    data: params,
+  });
+  return data;
+};
+
+// [企业员工]-拉黑员工
+// http://yapi.quantgroups.com/project/389/interface/api/65369
+export const apiStaffBlack = async params => {
+  const data = await request.post('/api/consoles/enterprise/staff/black', {
+    prefix: goodsApi,
+    data: params,
+  });
+  return data;
+};

src/pages/StoreManagement/addModal/index.jsx

+import React, { useState, useEffect, forwardRef, useRef, useImperativeHandle } from 'react';
+import { Button, Modal, Select, Form, notification } from 'antd';
+import styles from '../index.less';
+import { apiSelectedList, apiSelectList, apiShopAdd } from '../service.js';
+
+const AddModal = props => {
+  const { addVisible, enterpriseId, name } = props;
+  const [selectList, setSelectList] = useState([]);
+  const [options, setOptions] = useState([]);
+  const handleCancel = () => {
+    props.onCancel(false);
+  };
+  const handleChange = value => {
+    setSelectList(value);
+  };
+  const onOk = async () => {
+    if (!selectList.length) {
+      notification.error({
+        message: '请添加微店',
+      });
+      return;
+    }
+    const res = await apiShopAdd({ enterpriseId, shopIds: selectList });
+    if (res.businessCode === '0000') {
+      notification.success({
+        message: '添加成功',
+      });
+      props.onCancel(true);
+    }
+  };
+  const getSelectedList = async () => {
+    const res = await apiSelectedList({ enterpriseId });
+    if (res.businessCode === '0000') {
+      const { data } = res;
+      const list = [];
+      data.forEach(item => {
+        list.push(item.id);
+      });
+      setSelectList(list);
+    }
+  };
+  const getSelectList = async () => {
+    const res = await apiSelectList({ id: enterpriseId });
+    if (res.businessCode === '0000') {
+      const optionData = res.data.map(item => ({
+        value: item.id,
+        label: item.name,
+      }));
+      setOptions(optionData);
+    }
+  };
+
+  useEffect(() => {
+    if (addVisible) {
+      getSelectedList();
+    }
+  }, [addVisible]);
+  return (
+    <>
+      <Modal title="添加企业店铺" onOk={onOk} visible={addVisible} onCancel={() => handleCancel}>
+        <Form>
+          <Form.Item label="企业名称">
+            <span>{name}</span>
+          </Form.Item>
+          <Form.Item label="添加微店" name="shopIds" initialValue={selectList}>
+            <Select
+              mode="multiple"
+              allowClear
+              style={{ width: '100%' }}
+              placeholder="请选择微店"
+              onChange={handleChange}
+              options={options}
+            />
+          </Form.Item>
+          <Form.Item label="餐饮类型">
+            <span>到店</span>
+          </Form.Item>
+        </Form>
+      </Modal>
+    </>
+  );
+};
+
+export default AddModal;

src/pages/StoreManagement/data.js

+import React from 'react';
+import { Image as ImageComponent, Button } from 'antd';
+import { FormOutlined } from '@ant-design/icons';
+
+export const repastTypeList = [
+  {
+    value: 1,
+    label: '外卖',
+  },
+  {
+    value: 2,
+    label: '自助餐',
+  },
+  {
+    value: 4,
+    label: '到店',
+  },
+];
+
+export const columns = props => [
+  {
+    title: '微店ID',
+    key: 'id',
+    dataIndex: 'id',
+    align: 'center',
+  },
+  {
+    title: '微店名称',
+    key: 'shopName',
+    dataIndex: 'shopName',
+    align: 'center',
+  },
+  {
+    title: '餐饮类型',
+    key: 'mealType',
+    dataIndex: 'mealType',
+    align: 'center',
+    render: (_, row) => {
+      const status = !row?.pickselfName;
+      if (row?.mealType?.length) {
+        return (
+          <Button type="text" disabled={status} onClick={() => props.editRepastType(row)}>
+            {row.mealType?.map((item, index) => (
+              <span>{repastTypeList.find(itm => itm.value === item)?.label}&nbsp;</span>
+            ))}
+            <FormOutlined />
+          </Button>
+        );
+      }
+      return '/';
+    },
+  },
+  {
+    title: '所属企业取餐点',
+    key: 'pickselfName',
+    dataIndex: 'pickselfName',
+    align: 'center',
+    render: (text, record) => {
+      if (record.pickselfName?.length) {
+        return text.map((item, index) => (
+          <span>
+            {item}
+            {index < record.pickselfName.length - 1 && ','}
+          </span>
+        ));
+      }
+      return '/';
+    },
+  },
+  {
+    title: '修改人',
+    key: 'updatedBy',
+    dataIndex: 'updatedBy',
+    align: 'center',
+  },
+  {
+    title: '修改时间',
+    key: 'amount',
+    dataIndex: 'amount',
+    align: 'center',
+  },
+  {
+    title: '操作',
+    dataIndex: 'option',
+    valueType: 'option',
+    align: 'center',
+    key: 'option',
+    render: (_, row) => (
+      <Button type="link" disabled={row?.pickselfName?.length} onClick={() => props.delShop(row)}>
+        删除
+      </Button>
+    ),
+  },
+];

src/pages/StoreManagement/editRepastModal/index.jsx

+import React, { useState, useEffect, forwardRef, useRef, useImperativeHandle } from 'react';
+import { Button, Modal, Radio, Form, Space, message, Checkbox, Col, Row } from 'antd';
+import styles from '../index.less';
+import { apiShopUpdate } from '../service.js';
+
+const EditRepastModal = props => {
+  const [form] = Form.useForm();
+  const { editVisible, repastType, id } = props;
+  const handleCancel = () => {
+    props.onCancel();
+  };
+  const onOk = () => {
+    form.validateFields().then(async values => {
+      const params = {
+        id,
+        mealTypeList: values.mealTypeList,
+      };
+      const res = await apiShopUpdate(params);
+      if (res.businessCode === '0000') {
+        message.success('修改成功');
+        handleCancel(true);
+      }
+    });
+  };
+  return (
+    <>
+      <Modal title="餐饮类型" onOk={onOk} visible={editVisible} onCancel={() => handleCancel()}>
+        <Form layout="vertical" autoComplete="off" form={form}>
+          <Form.Item
+            label="取餐点下商户餐品类型"
+            rules={[{ required: true, message: '请选择商户餐品类型' }]}
+          >
+            <Checkbox.Group>
+              <Space direction="mealTypeList">
+                {(repastType.length &&
+                  repastType.map((index, value) => <Checkbox>{index}</Checkbox>)) ||
+                  ''}
+              </Space>
+            </Checkbox.Group>
+            <p className={styles.tip}>切换餐品类型后，请及时维护商品</p>
+          </Form.Item>
+          <Form.Item label="是否开启餐品类型">
+            <Checkbox.Group>
+              <Space direction="vertical">
+                <Checkbox>到店</Checkbox>
+              </Space>
+            </Checkbox.Group>
+            <p className={styles.tip}>关闭【到店】餐类时，关联到店企业商品将一并删除</p>
+          </Form.Item>
+        </Form>
+      </Modal>
+    </>
+  );
+};
+
+export default EditRepastModal;

src/pages/StoreManagement/index.jsx

+import React, { useState, useRef, forwardRef, useEffect } from 'react';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import { Modal, Form, Select, Table, Card, Row, Col, Input, Button, message } from 'antd';
+import { columns, repastTypeList } from './data';
+import EditRepastModal from './editRepastModal';
+import AddModal from './addModal';
+import styles from './index.less';
+import {
+  setShopList,
+  setShopDelete,
+  mealTypeList,
+  apiEnterpriseList,
+  busineesTypeCheck,
+} from './service.js';
+
+const { confirm } = Modal;
+const StoreManagement = () => {
+  const [page, setPage] = useState({
+    page: 1,
+    size: 10,
+  });
+  const [searchForm, setSearchForm] = useState({});
+  const formRef = useRef(null);
+  const [editVisible, setEditVisible] = useState(false);
+  const [addVisible, setAddVisible] = useState(false);
+  const [repastType, setRepastType] = useState([]);
+  const [repastId, setRepastId] = useState(null);
+  const [enterpriseList, setEnterpriseList] = useState();
+  const [firstEnterprise, setFirstEnterprise] = useState('');
+  const [enterprise, setEnterprise] = useState({});
+  const [dataList, setDataList] = useState([]);
+  const [name, setName] = useState('');
+
+  const shopList = async () => {
+    const params = {
+      ...page,
+      data: searchForm,
+    };
+    const res = await setShopList(params);
+    if (res.businessCode === '0000') {
+      setDataList(res.data?.records);
+    }
+  };
+
+  // 企业查询
+  const getEnterpriseList = async () => {
+    const res = await apiEnterpriseList();
+    if (res.businessCode === '0000' && res.data?.records?.length) {
+      const list = res.data.records;
+      const firstOption = list[0].id;
+      const optionData = list.map(item => ({
+        value: item.id,
+        label: item.name,
+      }));
+      setFirstEnterprise(firstOption);
+      setEnterpriseList(optionData);
+      setSearchForm({ enterpriseId: firstOption });
+      shopList();
+    }
+  };
+  useEffect(() => {
+    getEnterpriseList();
+  }, []);
+
+  useEffect(() => {
+    shopList();
+  }, [searchForm, page]);
+  // 关闭弹框
+  const closeModal = value => {
+    if (value) {
+      shopList();
+    }
+    setEditVisible(false);
+    setAddVisible(false);
+  };
+  const setMealTypeList = async () => {
+    setEditVisible(true);
+    const res = await mealTypeList({ id: repastId });
+    if (res.businessCode === '0000') {
+      setRepastType(res.data);
+      setEditVisible(true);
+    }
+  };
+  // 修改餐饮类型
+  const editRepastType = ({ id }) => {
+    setRepastId(id);
+    setMealTypeList();
+  };
+  // 删除
+  const editShop = async id => {
+    const res = await setShopDelete({ id });
+    if (res.businessCode === '0000') {
+      message.success('删除成功！');
+      shopList();
+    }
+  };
+  // 删除
+  const delShop = ({ shopName, id }) => {
+    confirm({
+      title: `确认删除企业商户#${shopName || ''}#?`,
+      content: '注：删除微店后，其商户下企业商品一并删除',
+      onOk() {
+        editShop(id);
+      },
+      onCancel() {
+        console.log('Cancel');
+      },
+    });
+  };
+  const onChange = (value, option) => {
+    setEnterprise(option);
+  };
+  // 添加商户
+  const addShop = async () => {
+    const res = await busineesTypeCheck({ id: searchForm.id });
+    if (res.businessCode === '0000') {
+      const val = enterpriseList.find(item => item.value === searchForm.enterpriseId).label;
+      setName(val);
+      setAddVisible(true);
+    }
+  };
+  // 搜索
+  const onFinish = async values => {
+    setSearchForm(values);
+    setPage({ current: 1, pageSize: 10 });
+  };
+  // 重置
+  const onReset = () => {
+    formRef.current.resetFields();
+    setSearchForm({ enterpriseId: firstEnterprise });
+  };
+  // 分页
+  const handleTableChange = val => {
+    setPage(val);
+  };
+
+  const res = {
+    editRepastType,
+    delShop,
+  };
+  return (
+    <PageHeaderWrapper>
+      <Card className={styles.card}>
+        {firstEnterprise && (
+          <Form ref={formRef} onFinish={onFinish}>
+            <Row gutter={24}>
+              <Col span={8}>
+                <Form.Item
+                  label="企业名称"
+                  name="enterpriseId"
+                  wrapperCol={{ span: 16 }}
+                  rules={[{ required: true }]}
+                  initialValue={firstEnterprise}
+                >
+                  <Select
+                    allowClear
+                    showSearch
+                    filterOption={(input, option) =>
+                      (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
+                    }
+                    onChange={onChange}
+                    options={enterpriseList}
+                  />
+                </Form.Item>
+              </Col>
+              <Col span={8}>
+                <Form.Item label="微店名称" name="shopName" wrapperCol={{ span: 16 }}>
+                  <Input maxLength="20" allowClear />
+                </Form.Item>
+              </Col>
+              <Col span={8}>
+                <Form.Item label="微店ID" name="shopId" wrapperCol={{ span: 16 }}>
+                  <Input maxLength="20" allowClear />
+                </Form.Item>
+              </Col>
+              <Col span={8}>
+                <Form.Item label="餐品类型" name="mealType" wrapperCol={{ span: 16 }}>
+                  <Select
+                    allowClear
+                    showSearch
+                    filterOption={(input, option) =>
+                      (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
+                    }
+                    options={repastTypeList}
+                    placeholder="全部"
+                  />
+                </Form.Item>
+              </Col>
+              <Col className={styles.btn}>
+                <Form.Item>
+                  <Button type="primary" htmlType="submit">
+                    搜索
+                  </Button>
+                  <Button htmlType="button" onClick={onReset} className={styles.left}>
+                    重置
+                  </Button>
+                  <Button type="primary" onClick={addShop} className={styles.left}>
+                    添加商户
+                  </Button>
+                </Form.Item>
+              </Col>
+            </Row>
+          </Form>
+        )}
+      </Card>
+      <Table
+        columns={columns(res)}
+        dataSource={dataList}
+        rowKey={r => r.appealNo}
+        bordered
+        onChange={handleTableChange}
+      />
+      <EditRepastModal
+        editVisible={editVisible}
+        repastType={repastType}
+        id={repastId}
+        onCancel={closeModal}
+      />
+      <AddModal addVisible={addVisible} name={name} onCancel={closeModal} />
+    </PageHeaderWrapper>
+  );
+};
+export default StoreManagement;

src/pages/StoreManagement/index.less

+.tip {
+  padding-top: 5px;
+  color: #ff8c00;
+  font-size: 12px;
+}
+.card {
+  margin-bottom: 16px;
+}
+.btn {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  display: flex;
+}
+.left {
+  margin-left: 20px;
+}
+.editShop {
+  margin-bottom: 10px;
+}

src/pages/StoreManagement/service.js

+import request from '@/utils/request';
+import config from '../../../config/env.config';
+import { stringify } from 'qs';
+import _ from 'lodash';
+
+const { goodsApi } = config;
+const headers = {
+  'Content-Type': 'application/x-www-form-urlencoded',
+};
+// [企业店铺]-列表查询
+// http://yapi.quantgroups.com/project/389/interface/api/65284
+export const setShopList = async params => {
+  const data = await request.post('/api/consoles/enterprise/shop/list', {
+    prefix: goodsApi,
+    data: params,
+  });
+  return data;
+};
+
+// [企业店铺]-删除企业下面的店铺
+// http://yapi.quantgroups.com/project/389/interface/api/65319
+export const setShopDelete = async params => {
+  const data = await request.post('/api/consoles/enterprise/shop/delete', {
+    prefix: goodsApi,
+    data: params,
+  });
+  return data;
+};
+
+// [企业店铺]-查询餐品类型
+// http://yapi.quantgroups.com/project/389/interface/api/65314
+export const mealTypeList = async params => {
+  const data = await request.post('/api/consoles/enterprise/shop/mealType/list', {
+    prefix: goodsApi,
+    data: params,
+  });
+  return data;
+};
+
+// [企业店铺]-添加企业店铺
+// http://yapi.quantgroups.com/project/389/interface/api/65304
+export const shopAdd = async params => {
+  const data = await request.post('/api/consoles/enterprise/shop/add', {
+    prefix: goodsApi,
+    data: params,
+  });
+  return data;
+};
+
+// 企业店铺]-修改餐品类型
+// http://yapi.quantgroups.com/project/389/interface/api/65309
+export const apiShopUpdate = async params => {
+  const data = await request.post('/api/consoles/enterprise/shop/update', {
+    prefix: goodsApi,
+    data: params,
+  });
+  return data;
+};
+
+// [企业客户]-列表查询
+// http://yapi.quantgroups.com/project/389/interface/api/65324
+export const apiEnterpriseList = async () => {
+  const data = await request.post('/api/consoles/enterprise/shop/update', {
+    prefix: goodsApi,
+    data: {
+      page: 1,
+      size: 10000,
+    },
+  });
+  return data;
+};
+// [企业店铺]-可选择店铺列表
+// http://yapi.quantgroups.com/project/389/interface/api/65524
+export const apiSelectList = async params => {
+  const data = await request.post('/api/console/enterprise/shop/select/list', {
+    prefix: goodsApi,
+    data: params,
+  });
+  return data;
+};
+
+// [企业店铺]-添加企业店铺校验是否是到店类型
+// http://yapi.quantgroups.com/project/389/interface/api/65304
+export const busineesTypeCheck = async params => {
+  const data = await request.post('/api/console/enterprise/shop/busineesType/check', {
+    prefix: goodsApi,
+    data: params,
+  });
+  return data;
+};
+
+// [企业店铺]-添加企业店铺
+// http://yapi.quantgroups.com/project/389/interface/api/65304
+export const apiShopAdd = async params => {
+  const data = await request.post('/api/consoles/enterprise/shop/add', {
+    prefix: goodsApi,
+    data: params,
+  });
+  return data;
+};
+
+// [企业店铺]-企业已选的店铺
+// http://yapi.quantgroups.com/project/389/interface/api/65534
+export const apiSelectedList = async params => {
+  const data = await request.post('/api/consoles/enterprise/shop/selected/list', {
+    prefix: goodsApi,
+    data: params,
+  });
+  return data;
+};