feat: 员工管理开发

src/pages/EmployeeManagement/components/batchFileModal.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, apiStaffExcel } from '../service';
+import styles from '../index.less';
+
+const { Dragger } = Upload;
+const { Item } = Form;
+const layout = {
+  labelCol: { span: 6 },
+  wrapperCol: { span: 16 },
+};
+const DepartmentModal = ({ visible, onClose, enterpriseList }) => {
+  const [form] = Form.useForm();
+
+  const handleCancel = val => {
+    form.resetFields();
+    onClose(val);
+  };
+
+  const handleImportChange = info => {
+    if (info.file.status === 'done') {
+      message.success('文件上传成功');
+    } else if (info.file.status === 'error') {
+      message.error('文件上传失败');
+    }
+  };
+
+  const handleSave = () => {
+    form.validateFields().then(async values => {
+      const params = {
+        enterpriseId: values.enterpriseId,
+        file: values.file,
+      };
+      const res = await apiStaffExcel(params);
+      if (res.businessCode === '0000') {
+        message.success('上传成功');
+        handleCancel(true);
+      }
+    });
+  };
+
+  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="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}
+            onChange={handleImportChange}
+            maxCount={1}
+            accept=".xls,.xlsx"
+          >
+            <UploadOutlined />
+            <p>
+              将文件拖到此处，或<a href="#">点击上传</a>
+            </p>
+          </Dragger>
+        </Item>
+      </Form>
+      <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>
+    </Modal>
+  );
+};
+
+export default DepartmentModal;

src/pages/EmployeeManagement/components/blacklistModal.jsx

+import React from 'react';
+import { Modal, Form, Input, Checkbox } from 'antd';
+import styles from '../index.less';
+
+const { Item } = Form;
+
+const BlacklistModal = ({ visible, onClose, onSave, list }) => {
+  const [form] = Form.useForm();
+
+  const handleSave = () => {
+    form.validateFields().then(values => {
+      onSave(values);
+    });
+  };
+
+  return (
+    <Modal visible={visible} title="设置员工黑名单" onCancel={onClose} onOk={handleSave}>
+      <Form form={form} layout="vertical">
+        <Item name="employeeId" 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

@@ -40,7 +40,7 @@ const DepartmentModal = ({ visible, onClose, enterpriseList }) => {
 
   const getDepartmentExcel = async values => {
     const params = {
-      name: values.name,
+      enterpriseId: values.enterpriseId,
       file: values.file,
     };
     const res = await apiDepartmentExcel(params);
@@ -124,7 +124,12 @@ const DepartmentModal = ({ visible, onClose, enterpriseList }) => {
               },
             ]}
           >
-            <Upload beforeUpload={() => false} onChange={handleImportChange}>
+            <Upload
+              beforeUpload={() => false}
+              onChange={handleImportChange}
+              maxCount={1}
+              accept=".xls,.xlsx"
+            >
               <Button icon={<UploadOutlined />}>点击上传</Button>
             </Upload>
           </Item>

src/pages/EmployeeManagement/components/viewDepartmentModal.jsx

 import React, { useState } from 'react';
-import { Modal, Form, Input, Button, Table, Space, Row, Col, Select } from 'antd';
-import { apiDepartmentList } from '../service';
+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,
@@ -17,6 +21,11 @@ const ViewDepartmentModal = ({ visible, onClose, enterpriseList }) => {
     form.resetFields();
     onClose();
   };
+  const editName = row => {
+    setName(row.department);
+    setId(row.id);
+    setNameVisible(true);
+  };
 
   const handleSearch = async values => {
     setPagination({ ...pagination, page: 1 });
@@ -37,6 +46,21 @@ const ViewDepartmentModal = ({ visible, onClose, enterpriseList }) => {
     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',
@@ -64,7 +88,9 @@ const ViewDepartmentModal = ({ visible, onClose, enterpriseList }) => {
       key: 'operation',
       render: (_, record) => (
         <Space>
-          <Button type="link">修改部门名称</Button>
+          <Button type="link" onClick={editName(record)}>
+            修改部门名称
+          </Button>
         </Space>
       ),
     },
@@ -96,7 +122,6 @@ const ViewDepartmentModal = ({ visible, onClose, enterpriseList }) => {
           </Col>
         </Row>
       </Form>
-
       <Table
         dataSource={dataSource}
         columns={columns}
@@ -104,6 +129,27 @@ const ViewDepartmentModal = ({ visible, onClose, enterpriseList }) => {
         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>
   );
 };

src/pages/EmployeeManagement/data.js

@@ -53,7 +53,6 @@ export const columns = props => [
     align: 'center',
     render: _ => (
       <>
-        {' '}
         <Switch defaultChecked /> {_ ? '已开启' : '已关闭'}
       </>
     ),
@@ -77,8 +76,10 @@ export const columns = props => [
     align: 'center',
     key: 'option',
     render: (_, row) => [
-      <Button type="link">余额充值明细</Button>,
-      <Button type="link" disabled={!row?.isBlack} onClick={() => props.delShop(row)}>
+      <Button type="link" onClick={() => props.delEmployee(row)}>
+        余额充值明细
+      </Button>,
+      <Button type="link" disabled={!row?.isBlack} onClick={() => props.delEmployee(row)}>
         删除
       </Button>,
     ],

src/pages/EmployeeManagement/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, Upload } from 'antd';
+import {
+  Modal,
+  Form,
+  Select,
+  Table,
+  Card,
+  Row,
+  Col,
+  Input,
+  Button,
+  message,
+  Upload,
+  notification,
+} from 'antd';
 import { columns, repastTypeList } from './data';
 import styles from './index.less';
-import { apiStaffList, apiEnterpriseList, apiDepartmentList, apiStaffExcel } from './service.js';
+import {
+  apiStaffList,
+  apiEnterpriseList,
+  apiDepartmentList,
+  apiStaffExcel,
+  apiStaffDelete,
+} from './service.js';
 import NewEmployeeModal from './components/newEmployeeModal';
 import DepartmentModal from './components/departmentModal';
 import ViewDepartmentModal from './components/ViewDepartmentModal';
+import BlacklistModal from './components/BlacklistModal';
+import BatchFileModal from './components/batchFileModal';
+
+const fakeData = [
+  {
+    isBlack: 1,
+    id: 1,
+  },
+  {
+    isBlack: 1,
+    id: 2,
+  },
+];
 
 const { confirm } = Modal;
 const StoreManagement = () => {
   const [modalVisible, setModalVisible] = useState(false);
   const [departmentVisible, setDepartmentVisible] = useState(false);
   const [viewDepartmentVisible, setViewDepartmentVisible] = useState(false);
+  const [blacklistVisible, setBlacklistVisible] = useState(false);
+  const [batchFileVisible, setBatchFileVisible] = useState(false);
+  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
   const [staffList, setStaffList] = useState([]);
   const [enterpriseList, setEnterpriseList] = useState([]);
   const [firstEnterprise, setFirstEnterprise] = useState();
@@ -58,24 +93,22 @@ const StoreManagement = () => {
       setStaffList(list);
     }
   };
-  // 上传文件
-  const handleUpload = async info => {
-    if (info.file.status === 'done') {
-      console.log(info.file);
-      const res = await apiStaffExcel(info.file);
-      if (res.businessCode === '0000') {
-        message.success('上传成功');
-        shopList();
-      }
-    } else if (info.file.status === 'error') {
-      console.log('File upload failed:', info.file.error);
-    }
+  const rowSelection = {
+    selectedRowKeys,
+    onChange: setSelectedRowKeys,
+  };
+  //
+  const getBatchFile = () => {
+    setBatchFileVisible(true);
   };
+
   // 关闭弹框
   const handleCloseModal = val => {
     setModalVisible(false);
     setDepartmentVisible(false);
     setViewDepartmentVisible(false);
+    setBlacklistVisible(false);
+    setBatchFileVisible(false);
     if (val) {
       shopList();
     }
@@ -110,37 +143,32 @@ const StoreManagement = () => {
       shopList();
     }
   };
-
+  // 设置黑名单
+  const getBlacklist = () => {
+    if (!selectedRowKeys.length) {
+      notification.error({ message: '请选择员工' });
+      return;
+    }
+    setBlacklistVisible(true);
+  };
   useEffect(() => {
     getEnterpriseList();
   }, []);
 
-  const setMealTypeList = async () => {
-    // const res = await mealTypeList({ id: repastId });
-    // if (res.businessCode === '0000') {
-    // setRepastType(res.data);
-    setEditVisible(true);
-    // }
-  };
-  // 修改餐饮类型
-  const editRepastType = ({ id }) => {
-    setRepastId(id);
-    setMealTypeList();
-  };
   // 删除
-  const deleteShop = async id => {
-    // const res = await setShopDelete({ id });
-    // if (res.businessCode === '0000') {
-    //   message.success('删除成功！');
-    //   shopList();
-    // }
+  const deleteEmployee = async id => {
+    const res = await apiStaffDelete({ id });
+    if (res.businessCode === '0000') {
+      message.success('删除成功！');
+      shopList();
+    }
   };
   // 删除
-  const delShop = ({ staffName, id }) => {
+  const delEmployee = ({ staffName, id }) => {
     confirm({
       title: `确认删除企业员工#${staffName || ''}#?`,
       onOk() {
-        deleteShop(id);
+        deleteEmployee(id);
       },
       onCancel() {
         console.log('Cancel');
@@ -169,8 +197,7 @@ const StoreManagement = () => {
   };
 
   const res = {
-    editRepastType,
-    delShop,
+    delEmployee,
   };
   return (
     <PageHeaderWrapper>
@@ -256,10 +283,10 @@ const StoreManagement = () => {
           </Row>
         </Form>
         <div className={styles.addBtn}>
-          <Upload onChange={handleUpload} accept=".xls,.xlsx" maxCount={1} showUploadList={false}>
-            <Button type="primary">初始化数据上传Excel</Button>
-          </Upload>
-          <Button type="primary" className={styles.left}>
+          <Button type="primary" onClick={getBatchFile}>
+            批量新增员工
+          </Button>
+          <Button type="primary" className={styles.left} onClick={getBlacklist}>
             设置员工黑名单
           </Button>
           <Button
@@ -293,10 +320,12 @@ const StoreManagement = () => {
       </Card>
       <Table
         columns={columns(res)}
-        dataSource={staffList}
-        rowKey={r => r.appealNo}
+        // dataSource={staffList}
+        dataSource={fakeData}
+        rowKey={r => r.id}
         bordered
         onChange={handleTableChange}
+        rowSelection={rowSelection}
       />
       <NewEmployeeModal
         visible={modalVisible}
@@ -315,6 +344,16 @@ const StoreManagement = () => {
         enterpriseList={enterpriseList}
         onClose={handleCloseModal}
       />
+      <BlacklistModal
+        list={selectedRowKeys}
+        visible={blacklistVisible}
+        onClose={handleCloseModal}
+      />
+      <BatchFileModal
+        list={selectedRowKeys}
+        visible={batchFileVisible}
+        onClose={handleCloseModal}
+      />
     </PageHeaderWrapper>
   );
 };

src/pages/EmployeeManagement/index.less

@@ -28,3 +28,7 @@
   align-items: center;
   justify-content: flex-end;
 }
+
+.employees {
+  text-align: center;
+}

src/pages/EmployeeManagement/service.js

@@ -52,7 +52,8 @@ export const apiStaffSave = async params => {
 // http://yapi.quantgroups.com/project/389/interface/api/65384
 export const apiStaffExcel = async file => {
   const params = new FormData();
-  params.append('file', file);
+  params.append('file', file.file);
+  params.append('enterpriseId', file.enterpriseId);
   const data = await request.post('/api/consoles/enterprise/staff/excel', {
     prefix: goodsApi,
     data: params,
@@ -82,3 +83,23 @@ export const apiDepartmentExcel = async file => {
   });
   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;
+};