周沫沫历险记 2 years ago
parent
commit
1278909652
  1. 345
      web/client/src/sections/humanAffairs/containers/communication/employeeCommunication.jsx
  2. 2
      web/client/src/sections/humanAffairs/containers/index.js
  3. 8
      web/client/src/sections/humanAffairs/nav-item.jsx
  4. 13
      web/client/src/sections/humanAffairs/routes.js

345
web/client/src/sections/humanAffairs/containers/communication/employeeCommunication.jsx

@ -0,0 +1,345 @@
import React, { useEffect, useRef, useState, useMemo } from 'react';
import { connect } from 'react-redux';
import moment from 'moment'
import { Select, Input, Button, Popconfirm, Radio, Tooltip, Table, Pagination, Skeleton } from '@douyinfe/semi-ui';
// import SalesMemberModal from './salesMemberModal'
// import ImportSalersModal from './importSalersModal'
import { IconSearch } from '@douyinfe/semi-icons';
import { SkeletonScreen } from "$components";
import '../../style.less'
const EmployeeCommunication = (props) => {
const { dispatch, actions } = props
const { humanAffairs } = actions;
const [keywordTarget, setKeywordTarget] = useState('dep');
const [keyword, setKeyword] = useState('');//
const [limits, setLimits] = useState()//
const [query, setQuery] = useState({ limit: 10, page: 0 }); //
// const [modalV, setModalV] = useState(false);
// const [dataToEdit, setDataToEdit] = useState(null);
const [tableData, setTableData] = useState([]);
// const [importModalV, setImportModalV] = useState(false);
const page = useRef(query.page);
function seachValueChange(value) {
setKeyword(value)
}
useEffect(() => {
// dispatch(humanAffairs.getMemberList())
// getMemberSearchList()
}, []);
useEffect(() => {
// getMemberSearchList()//
}, [query])
// function getMemberSearchList() {
// let kt = keywordTarget == 'place' ? '' : keywordTarget;
// let k = keywordTarget == 'place' ? '' : keyword;
// let placeSearch = keywordTarget == 'place' ? keyword : '';
// dispatch(humanAffairs.getSalesList({ keywordTarget: kt, keyword: k, placeSearch, ...query })).then(r => {
// if (r.success) {
// setTableData(r.payload?.data?.rows);
// setLimits(r.payload?.data?.count)
// }
// })
// }
function handleRow(record, index) {//
if (index % 2 === 0) {
return {
style: {
background: '#FAFCFF',
}
};
} else {
return {};
}
}
// const closeAndFetch = () => {
// setModalV(false)
// getMemberSearchList();
// }
// const starHeader = (header) => {
// return <div>
// <img src="/assets/images/hrImg/V.png" style={{ width: 14, height: 14 }} /> {header}
// </div>
// }
// const getMultis = (arrStr) => {//2
// return <div style={{ display: 'flex' }}>
// {
// arrStr.length ?
// arrStr.map((ite, idx) => {
// return (
// <div key={idx} style={{ display: 'flex' }}>
// {idx < 2 ?
// <div style={{ padding: '0px 4px 1px 4px', color: '#FFF', fontSize: 12, background: 'rgba(0,90,189,0.8)', borderRadius: 2, marginRight: 4 }}>
// {ite}
// </div> : ''
// }
// {
// arrStr.length > 2 && idx == 2 ?
// <Tooltip content={arrStr.join(',')} trigger="click" style={{ lineHeight: 2 }}>
// <div style={{ padding: '0px 4px 1px 4px ', color: 'rgba(0,90,189,0.8)', fontSize: 12, marginRight: 4, cursor: "pointer" }}>
// +{arrStr.length - 2}
// </div>
// </Tooltip>
// : ''
// }
// </div>
// )
// }) : '-'
// }
// </div>
// }
// const columns = [{
// title: '',
// dataIndex: 'id',
// key: 'id',
// width: 60,
// render: (text, record, index) => index + 1
// }, {
// title: starHeader(''),
// dataIndex: 'name',
// key: 'name',
// width: 80
// },
// {
// title: starHeader(''),
// dataIndex: 'department',
// key: 'department',
// width: 200,
// render: (text, r, index) => {
// let arrStr = text.map(t => t.name);
// return getMultis(arrStr);
// }
// }, {
// title: '(/)',
// dataIndex: 'provinces',
// key: 'provinces',
// width: 160,
// render: (text, record, index) => {
// return getMultis(text?.split('') || []);
// }
// }, {
// title: '()',
// dataIndex: 'cities',
// key: 'cities',
// width: 160,
// render: (text, record, index) => {
// return text ? getMultis(text?.split('') || []) : '-';
// }
// }, {
// title: '线',
// dataIndex: 'businessLines',
// key: 'businessLines',
// width: 140,
// render: (text, record, index) => {
// return text ? getMultis(text?.split('') || []) : '-';
// }
// }, {
// title: starHeader(''),
// dataIndex: 'post',
// key: 'post',
// width: 120,
// render: (text, record) => <span>{text || '-'}</span>
// }, {
// title: starHeader(''),
// dataIndex: 'hireDate',
// key: 'hireDate',
// width: 120,
// render: (text, record) => <span>{text || '-'}</span>
// }, {
// title: starHeader(''),
// dataIndex: 'regularDate',
// key: 'regularDate',
// width: 120,
// render: (text, record) => <span>{text || '-'}</span>
// }, {
// title: starHeader(''),
// dataIndex: 'workYears',
// key: 'workYears',
// width: 120,
// render: (_, r, index) => {
// return (r.hireDate ? <span style={{ color: '#1890FF' }}>{String(moment(new Date()).diff(r.hireDate, 'years', true)).substring(0, 3) + ''}</span> : '-')
// },
// }, {
// title: '',
// dataIndex: 'action',
// width: 120,
// render: (text, record) => {
// return <div>
// <span style={{ color: '#1890FF', cursor: 'pointer' }} onClick={() => onEdit(record)}></span>&nbsp;&nbsp;
// <Popconfirm
// title='' content="" position='topLeft'
// onConfirm={() => confirmDelete(record.pepUserId)} style={{ width: 330 }}
// > <span style={{ color: '#1890FF', cursor: 'pointer' }}></span></Popconfirm>
// </div>
// }
// }];
// const onEdit = (data) => {
// setModalV(true);
// setDataToEdit(data);
// }
// const confirmDelete = (pepUserId) => {
// dispatch(humanAffairs.delSalesMember({ pepUserId, msg: '' })).then(res => {
// if (res.success) {
// getMemberSearchList();
// }
// });
// }
const scroll = useMemo(() => ({}), []);
return (<div style={{ padding: '0px 12px' }}>
<div style={{ display: 'flex' }}>
<div style={{ color: 'rgba(0,0,0,0.45)', fontSize: 14 }}>员工关系</div>
<div style={{ color: 'rgba(0,0,0,0.45)', fontSize: 14, margin: '0px 8px' }}>/</div>
<div style={{ color: 'rgba(0,0,0,0.45)', fontSize: 14 }}>员工沟通</div>
<div style={{ color: '#033C9A', fontSize: 14, margin: '0px 8px' }}>/</div>
<div style={{ color: '#033C9A', fontSize: 14 }}>员工沟通统计</div>
</div>
<div style={{ background: '#FFFFFF', boxShadow: '0px 0px 12px 2px rgba(220,222,224,0.2)', borderRadius: 2, padding: '20px 0px 20px 19px ', marginTop: 12 }}>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
<div style={{ display: 'flex', alignItems: 'baseline' }}>
<div style={{ width: 0, height: 20, borderLeft: '3px solid #0F7EFB', borderTop: '3px solid transparent', borderBottom: '3px solid transparent' }}></div>
<div style={{ fontFamily: "YouSheBiaoTiHei", fontSize: 24, color: '#033C9A', marginLeft: 8 }}>员工沟通统计</div>
<div style={{ marginLeft: 6, fontSize: 12, color: '#969799', fontFamily: "DINExp", }}>EMPLOYEE COMMUNICATION</div>
</div>
</div>
{/* <div style={{ margin: '18px 0px' }}>
<div style={{ display: 'flex', margin: '16px 0px', justifyContent: 'space-between' }}>
<div style={{ display: 'flex' }}>
<div style={{ padding: '6px 20px', background: '#0F7EFB', color: '#FFFFFF', fontSize: 14, cursor: "pointer", marginRight: 18 }}
onClick={() => {
setModalV(true);
setDataToEdit(null);
}}>
新增
</div>
<div>
<Select value={keywordTarget} onChange={setKeywordTarget} style={{ width: 100 }} >
<Select.Option value='dep'>部门</Select.Option>
<Select.Option value='place'>地区</Select.Option>
</Select>
</div>
<div style={{ margin: '0px 18px' }}>
<Input suffix={<IconSearch />}
showClear
placeholder='请输入关键词搜索'
value={keyword}
style={{ width: 346 }}
onChange={seachValueChange}>
</Input>
</div>
<Button theme='solid' type='primary' style={{ width: 80, borderRadius: 2, height: 32, background: '#DBECFF', color: '#005ABD' }}
onClick={() => {
setQuery({ limit: 10, page: 0 })
}}>查询</Button>
</div>
<div style={{ display: 'flex', marginRight: 20 }}>
<div style={{ padding: '6px 20px', background: '#00BA85', color: '#FFFFFF', fontSize: 14, marginLeft: 18 }}>
导出
</div>
</div>
</div>
<div style={{ border: '1px solid #C7E1FF', background: '#F4F8FF', borderRadius: 2, height: 32, width: 669, padding: '8px 0px 7px 12px', display: 'flex', alignItems: 'center', color: '#0F7EFB', fontSize: 12 }}>
<img src="/assets/images/hrImg/!.png" alt="" style={{ width: 14, height: 14, marginRight: 8 }} />
表格中带有认证标识"
<img src="/assets/images/hrImg/V.png" alt="" style={{ width: 14, height: 14 }} />
"信息的为系统基础数据来源于项企PEP钉钉等系统其他数据均为导入或自定义数据
</div>
<div style={{ marginTop: 20 }}>
<Skeleton
// loading={loading}
loading={false}
active={true}
placeholder={SkeletonScreen()}
>
<Table
columns={columns}
dataSource={tableData}
bordered={false}
empty="暂无数据"
pagination={false}
onChange={({ sorter }) => {
if (sorter.key == 'userCode') {
if (sorter.sortOrder == 'descend') {
setOrder({ orderBy: 'code', orderDirection: 'DESC' })
} else {
setOrder({ orderBy: 'code', orderDirection: 'ASC' })
}
} else if (sorter.key == 'age') {
if (sorter.sortOrder == 'descend') {
setOrder({ orderBy: 'age', orderDirection: 'DESC' })
} else {
setOrder({ orderBy: 'age', orderDirection: 'ASC' })
}
} else {
if (sorter.sortOrder == 'descend') {
setOrder({ orderBy: 'hiredate', orderDirection: 'DESC' })
} else {
setOrder({ orderBy: 'hiredate', orderDirection: 'ASC' })
}
}
}}
onRow={handleRow}
scroll={scroll}
/>
</Skeleton>
<div style={{
display: "flex",
justifyContent: "space-between",
padding: "20px 20px",
}}>
<div></div>
<div style={{ display: 'flex', }}>
<span style={{ lineHeight: "30px", fontSize: 13, color: 'rgba(0,90,189,0.8)' }}>
{limits}条信息
</span>
<Pagination
total={limits}
showSizeChanger
currentPage={query.page + 1}
pageSizeOpts={[10, 20, 30, 40]}
onChange={(currentPage, pageSize) => {
setQuery({ limit: pageSize, page: currentPage - 1 });
page.current = currentPage - 1
}}
/>
</div>
</div>
</div>
</div> */}
</div>
{/* {
modalV ? <SalesMemberModal
dataToEdit={dataToEdit} getMultis={getMultis}
close={() => closeAndFetch()}
onCancel={() => setModalV(false)} /> : ''
}
{
importModalV ? <ImportSalersModal
onCancel={() => {
setImportModalV(false);
getMemberSearchList();
}} /> : ''
} */}
</div>)
}
function mapStateToProps(state) {
const { auth, global, SalesMemberList } = state;
return {
user: auth.user,
actions: global.actions,
};
}
export default connect(mapStateToProps)(EmployeeCommunication);

2
web/client/src/sections/humanAffairs/containers/index.js

@ -7,6 +7,7 @@ import DeptArchives from './deptArchives';
import AttendanceStatistics from './attendanceStatistics'; import AttendanceStatistics from './attendanceStatistics';
import LeaveStatistics from './leaveStatistics'; import LeaveStatistics from './leaveStatistics';
import OvertimeStatistics from './overtimeStatistics'; import OvertimeStatistics from './overtimeStatistics';
import EmployeeCommunication from './communication/employeeCommunication';
//招聘 //招聘
import AppointmentRecords from './appointmentRecords'; import AppointmentRecords from './appointmentRecords';
import PersonnelDistribution from './salersDistribution/personnelDistribution'; import PersonnelDistribution from './salersDistribution/personnelDistribution';
@ -43,4 +44,5 @@ export {
EmployeeAuth, FormMaintenance, EmployeeAuth, FormMaintenance,
PersonnelFilesDetail, PersonnelFilesDetail,
PersonalTrainRecord, PersonalTrainRecord,
EmployeeCommunication
}; };

8
web/client/src/sections/humanAffairs/nav-item.jsx

@ -38,6 +38,14 @@ export function getNavItem(user, dispatch) {
}, { }, {
itemKey: 'overtimeStatistics', to: '/humanAffairs/employeeRelationship/leaveManagement/overtimeStatistics', text: '加班统计' itemKey: 'overtimeStatistics', to: '/humanAffairs/employeeRelationship/leaveManagement/overtimeStatistics', text: '加班统计'
}] }]
}, {
itemKey: 'communication',
text: '员工沟通',
icon: <iconpark-icon style={{ width: 20, height: 20 }} name="iconcbbumen"></iconpark-icon>,
to: '/humanAffairs/employeeRelationship/communication/employeeCommunication',
items: [{
itemKey: 'employeeCommunication', to: '/humanAffairs/employeeRelationship/communication/employeeCommunication', text: '员工沟通统计'
}]
}, { }, {
itemKey: 'recruitRecord', itemKey: 'recruitRecord',
text: '招聘记录', text: '招聘记录',

13
web/client/src/sections/humanAffairs/routes.js

@ -10,7 +10,8 @@ import {
EmployeeAuth, FormMaintenance, EmployeeAuth, FormMaintenance,
PersonnelFilesDetail, PersonnelFilesDetail,
PersonalTrainRecord, PersonalTrainRecord,
DepartmentTrainRecord DepartmentTrainRecord,
EmployeeCommunication
} from './containers'; } from './containers';
export default [{ export default [{
@ -76,6 +77,16 @@ export default [{
component: OvertimeStatistics, component: OvertimeStatistics,
breadcrumb: '加班统计', breadcrumb: '加班统计',
}] }]
}, {
path: '/communication',
key: 'communication',
breadcrumb: '员工沟通',
childRoutes: [{
path: '/employeeCommunication',
key: 'employeeCommunication',
component: EmployeeCommunication,
breadcrumb: '员工沟通统计',
}]
}] }]
}, { }, {
path: '/recruit', path: '/recruit',

Loading…
Cancel
Save