123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402 |
- import React, { useState, useEffect, useCallback, useRef } from 'react';
- import { FormattedMessage, history, useModel } from 'umi';
- import { Spin, Popover, Dropdown, MenuProps } from 'antd';
- import styles from './index.less';
- import cx from 'classnames';
- import PageHeader from '@/sagacare_components/PageHeader';
- import Search from '@/sagacare_components/Search';
- import Table from '@/sagacare_components/Table';
- import Empty from './components/Empty';
- import PersonModal from './components/personModal';
- import ImportModal from './components/StartImport';
- import ImportError from './components/StartImport/ImportError';
- import ImportSuccess from './components/StartImport/ImportSuccess';
- import { EllipsisOutlined } from '@ant-design/icons';
- import {
- queryUserList,
- queryCompanyOAById,
- queryControlSpaceCompany,
- } from '@/services/sagacare_service/member';
- const Member: React.FC = () => {
- const { initialState } = useModel('@@initialState');
- const [perVisible, setPerVisible] = useState(false); //人员对话框显示
- const [importVisible, setImportVisible] = useState(false); //人员对话框显示
- const [temporary, setTemporary] = useState(false); //是否是临时成员添加
- const [invalidSign, setInvalidSign] = useState(false); //显示作废
- const [spaceMap, setSpaceMap] = useState<any>();
- const [searchStr, setSearchStr] = useState();
- const [isSyncOa, setIsSyncOa] = useState(true); //是否是OA同步
- const [userList, setUserList] = useState<any>([]);
- const [total, setTotal] = useState();
- const [loading, setLoading] = useState(false);
- const [page, setPage] = useState({
- pageNum: 1,
- pageSize: 10,
- });
- const [checkUser, setCheckUser] = useState({}); //查看的人
- const [checkSign, setCheckSign] = useState('add'); // 三种状态 查看 编辑 新增
- const [refreshNum, setRefreshNum] = useState(0); //刷新列表
- // const statusArr = {
- // 2: '正常',
- // 3: '待激活',
- // 5: '已作废',
- // };
- const userTpeyArr = {
- 1: '普通成员',
- 2: '临时成员',
- 3: '管理员',
- };
- const [sorter, setSorter] = useState<any>({
- updateDate: 'DESC', //'ASC' : 'DESC'
- });
- const getColumns = () => {
- return [
- {
- title: '姓名',
- dataIndex: 'name',
- },
- {
- title: '类型',
- dataIndex: 'manageUserType',
- filteredValue: [],
- single: true,
- filters: [
- { value: '1', label: '普通成员' },
- { value: '2', label: '临时成员' },
- { value: '3', label: '管理员' },
- ],
- render: function (content, item, index) {
- return <span>{userTpeyArr[content]}</span>;
- },
- },
- {
- title: '手机号',
- dataIndex: 'phone',
- },
- {
- title: '职务',
- dataIndex: 'job',
- },
- {
- title: '常驻工区',
- dataIndex: 'permanentSpaceName',
- },
- {
- title: '可控工区',
- dataIndex: 'isAllControl',
- render: function (content, item, index) {
- return <span>{content ? '部分可控' : '全部可控'}</span>;
- },
- },
- {
- title: '更新时间',
- dataIndex: 'updateDate',
- sorter: true,
- sortered: sorter.updateDate,
- },
- {
- title: '状态',
- dataIndex: 'status',
- render: function (content, item, index) {
- //debugger;
- return (
- <div>
- <span
- className={cx(styles.circle, {
- [styles.activated]: content == '待激活',
- })}
- ></span>
- <span>{content}</span>
- </div>
- );
- },
- },
- {
- title: '',
- dataIndex: '',
- render: function (content, item) {
- const menuItems: MenuProps['items'] = [
- {
- key: '1',
- label: (
- <div
- className={styles.operateLi}
- onClick={() => {
- checkPerson(item);
- }}
- >
- 查看
- </div>
- ),
- },
- {
- key: '2',
- label: (
- <div
- className={styles.operateLi}
- onClick={() => {
- editPerson(item);
- }}
- >
- 编辑
- </div>
- ),
- },
- {
- key: '3',
- label: (
- <div
- className={cx(styles.operateLi, { [styles.disabled]: item.oaId })}
- onClick={() => {
- invalidPerson(item);
- }}
- >
- 作废
- </div>
- ),
- },
- ];
- return (
- <Dropdown menu={{ items: menuItems }}>
- <EllipsisOutlined style={{ color: '#4D5262', fontSize: '20px' }} />
- </Dropdown>
- );
- },
- },
- ];
- };
- const goToInvalid = () => {
- history.push(`/member/invalid`);
- };
- const refreshList = () => {
- setRefreshNum(refreshNum + 1);
- };
- const onClose = () => {
- setPerVisible(false);
- };
- const onImClose = () => {
- setImportVisible(false);
- };
- const showImport = () => {
- setImportVisible(true);
- };
- const [uploadResult, setUploadResult] = useState(null);
- useEffect(() => {
- var paramObj = {
- criteria: {
- param: searchStr,
- status: 1,
- companyId: initialState?.currentUser?.companyId,
- // manageUserType: [],
- },
- page: page.pageNum,
- size: page.pageSize,
- orders: [
- {
- column: 'updateDate',
- asc: sorter.updateDate == 'DESC' ? true : false,
- },
- ],
- };
- setLoading(true);
- queryUserList(paramObj)
- .then((res) => {
- debugger;
- setLoading(false);
- var uarr = res.content || [];
- var count = res.count || 0;
- setUserList(uarr);
- setTotal(count);
- })
- .catch((err) => {
- setLoading(false);
- });
- }, [searchStr, page, sorter, refreshNum]);
- useEffect(() => {
- //查询受控列表
- var paramObj = {
- criteria: {
- companyId: initialState?.currentUser?.companyId,
- },
- };
- queryControlSpaceCompany(paramObj)
- .then((res) => {
- var data = res.data || {};
- setSpaceMap(data);
- })
- .catch((err) => {});
- queryCompanyOAById({ companyId: initialState?.currentUser?.companyId })
- .then((res) => {
- var isSyncOa = res?.isSyncOa;
- setIsSyncOa(isSyncOa == 1 ? true : false);
- })
- .catch((err) => {});
- }, []);
- const checkPerson = (item) => {
- setPerVisible(true);
- setInvalidSign(false);
- setCheckSign('check'); //设置为查看状态
- setCheckUser(item);
- setTemporary(false);
- };
- const editPerson = (item) => {
- setPerVisible(true);
- setInvalidSign(false);
- setCheckSign('edit');
- setCheckUser(item);
- setTemporary(false);
- };
- //作废用户
- const invalidPerson = (item) => {
- setInvalidSign(true);
- setPerVisible(true);
- setCheckUser(item);
- setTemporary(false);
- };
- //添加临时用户
- const addTemporaryPerson = () => {
- setPerVisible(true);
- setInvalidSign(false);
- setCheckSign('add');
- setCheckUser({});
- setTemporary(true);
- };
- const addNewPerson = () => {
- setPerVisible(true);
- setInvalidSign(false);
- setCheckSign('add');
- setCheckUser({});
- setTemporary(false);
- };
- return (
- <div className={styles.memberwrap}>
- <PageHeader
- title={<FormattedMessage id="menu.member" />}
- action={
- <div className={styles.headerRight}>
- <Search changeSearchStr={setSearchStr} />
- {isSyncOa ? (
- <>
- <div className={styles.allIn}>已开启OA同步</div>
- <div
- className={styles.invalid}
- onClick={() => {
- goToInvalid();
- }}
- >
- 已作废
- </div>
- <div className={styles.addButton} onClick={addTemporaryPerson}>
- 添加临时成员
- </div>
- </>
- ) : (
- <>
- <div className={styles.allIn} onClick={showImport}>
- 批量导入
- </div>
- <div
- className={styles.invalid}
- onClick={() => {
- goToInvalid();
- }}
- >
- 已作废
- </div>
- <div className={styles.addButton} onClick={addNewPerson}>
- 新增成员
- </div>
- </>
- )}
- </div>
- }
- />
- <div className={styles.bottomTable}>
- <Table
- columns={getColumns()}
- rowKey="userId"
- dataSource={userList}
- loading={loading}
- page={page}
- total={total}
- pagination={!!userList.length}
- onFilterChange={(key, options) => {
- debugger;
- // if (key == 'spaceName' || key == 'tenantName') {
- // setShowFilterIds(options);
- // }
- }}
- onRowClick={(record) => {}}
- onSortChange={(col: any, direction: string) => {
- setSorter({ [col['dataIndex']]: direction });
- }}
- onPageChange={(p) => {
- setPage(p);
- }}
- />
- {!userList.length && !loading && <Empty />}
- </div>
- {perVisible && (
- <PersonModal
- invalidSign={invalidSign}
- temporary={temporary}
- checkUser={checkUser}
- checkSign={checkSign}
- onClose={onClose}
- setCheckSign={setCheckSign}
- setInvalidSign={setInvalidSign}
- spaceMap={spaceMap}
- refreshList={refreshList}
- ></PersonModal>
- )}
- {importVisible && (
- <ImportModal
- onUploadDone={(res) => {
- setImportVisible(false);
- setUploadResult(res);
- console.log(res);
- console.log(uploadResult);
- }}
- onClose={onImClose}
- ></ImportModal>
- )}
- {uploadResult && uploadResult.result == 'fail' && (
- <ImportError
- info={uploadResult}
- onClose={(type) => {
- console.log(type);
- if (type == 2) {
- setImportVisible(true);
- setUploadResult(null);
- } else {
- setUploadResult(null);
- }
- }}
- />
- )}
- {uploadResult && uploadResult.result == 'success' && (
- <ImportSuccess
- info={uploadResult}
- onClose={() => {
- setUploadResult(null);
- }}
- />
- )}
- </div>
- );
- };
- export default Member;
|