You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
306 lines
12 KiB
306 lines
12 KiB
import React, { useEffect, useRef, useState, useMemo } from 'react';
|
|
import { connect } from 'react-redux';
|
|
import moment from 'moment'
|
|
import { Select, Input, Button, Tooltip, Table, Pagination, Skeleton, DatePicker } from '@douyinfe/semi-ui';
|
|
import { IconSearch } from '@douyinfe/semi-icons';
|
|
import DetailModal from './detailModal';
|
|
import { SkeletonScreen } from "$components";
|
|
import '../../style.less'
|
|
|
|
const EmployeeCommunication = (props) => {
|
|
const { dispatch, actions } = props
|
|
const { humanAffairs } = actions;
|
|
const [keywordTarget, setKeywordTarget] = useState('personalName');
|
|
const [keyword, setKeyword] = useState('');//搜索内容
|
|
const [limits, setLimits] = useState()//每页实际条数
|
|
const [query, setQuery] = useState({ limit: 10, page: 0 }); //页码信息
|
|
const [modalV, setModalV] = useState(false);
|
|
const [dataToDetail, setDataToDetail] = useState(null);
|
|
const [tableData, setTableData] = useState([]);
|
|
const page = useRef(query.page);
|
|
function seachValueChange(value) {
|
|
setKeyword(value)
|
|
}
|
|
|
|
useEffect(() => {
|
|
getEmployeeCommunicateData();
|
|
}, []);
|
|
|
|
function getEmployeeCommunicateData(param) {
|
|
let queryParam = param || query;
|
|
dispatch(humanAffairs.getEmployeeCommunicate({ keywordTarget, keyword, ...queryParam })).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 columns = [{
|
|
title: '序号',
|
|
dataIndex: 'id',
|
|
key: 'id',
|
|
width: 60,
|
|
render: (text, record, index) => index + 1
|
|
}, {
|
|
title: '被沟通人',
|
|
dataIndex: 'personalName',
|
|
key: 'personalName',
|
|
width: 100
|
|
}, {
|
|
title: '岗位',
|
|
dataIndex: 'job',
|
|
key: 'job',
|
|
width: 100,
|
|
}, {
|
|
title: '部门',
|
|
dataIndex: 'departmentName',
|
|
key: 'departmentName',
|
|
width: 120,
|
|
render: (t, r) => {
|
|
return (<Tooltip content={r.departmentName} style={{ lineHeight: 2 }}>
|
|
<div style={{
|
|
textOverflow: 'ellipsis',
|
|
overflow: 'hidden',
|
|
whiteSpace: 'nowrap',
|
|
width: 120
|
|
}}>{r.departmentName}</div>
|
|
</Tooltip>)
|
|
}
|
|
}, {
|
|
title: '沟通时间',
|
|
dataIndex: 'communicateDate',
|
|
key: 'communicateDate',
|
|
width: 130,
|
|
}, {
|
|
title: '沟通内容',
|
|
dataIndex: 'communicateContent',
|
|
key: 'communicateContent',
|
|
width: 140,
|
|
render: (t, r) => {
|
|
return (<Tooltip content={t}>
|
|
<div style={{
|
|
textOverflow: 'ellipsis',
|
|
overflow: 'hidden',
|
|
whiteSpace: 'nowrap',
|
|
width: 120
|
|
}}>
|
|
{t}
|
|
</div>
|
|
</Tooltip>)
|
|
}
|
|
}, {
|
|
title: '沟通成果',
|
|
dataIndex: 'communicateResult',
|
|
key: 'communicateResult',
|
|
width: 120,
|
|
render: (t, r) => {
|
|
return (<Tooltip content={t}>
|
|
<div style={{
|
|
textOverflow: 'ellipsis',
|
|
overflow: 'hidden',
|
|
whiteSpace: 'nowrap',
|
|
width: 120
|
|
}}>
|
|
{t}
|
|
</div>
|
|
</Tooltip>)
|
|
}
|
|
}, {
|
|
title: '对被沟通人近期表现的评价',
|
|
dataIndex: 'valuation',
|
|
key: 'valuation',
|
|
width: 120,
|
|
render: (t, r) => {
|
|
return (<Tooltip content={t}>
|
|
<div style={{
|
|
textOverflow: 'ellipsis',
|
|
overflow: 'hidden',
|
|
whiteSpace: 'nowrap',
|
|
width: 120
|
|
}}>
|
|
{t}
|
|
</div>
|
|
</Tooltip>)
|
|
}
|
|
}, {
|
|
title: '沟通情况反馈',
|
|
dataIndex: 'communicateCondition',
|
|
key: 'communicateCondition',
|
|
width: 120,
|
|
render: (t, r) => {
|
|
return (<Tooltip content={t}>
|
|
<div style={{
|
|
textOverflow: 'ellipsis',
|
|
overflow: 'hidden',
|
|
whiteSpace: 'nowrap',
|
|
width: 120
|
|
}}>
|
|
{t}
|
|
</div>
|
|
</Tooltip>)
|
|
}
|
|
}, {
|
|
title: '下一步工作计划或提升方向',
|
|
dataIndex: 'nextPlan',
|
|
key: 'nextPlan',
|
|
width: 120,
|
|
render: (t, r) => {
|
|
return (<Tooltip content={t}>
|
|
<div style={{
|
|
textOverflow: 'ellipsis',
|
|
overflow: 'hidden',
|
|
whiteSpace: 'nowrap',
|
|
width: 120
|
|
}}>
|
|
{t}
|
|
</div>
|
|
</Tooltip>)
|
|
}
|
|
}, {
|
|
title: '操作',
|
|
dataIndex: 'action',
|
|
width: 120,
|
|
render: (text, record) => {
|
|
return <div>
|
|
<span style={{ color: '#1890FF', cursor: 'pointer' }} onClick={() => onDetail(record)}>查看详情</span>
|
|
</div>
|
|
}
|
|
}];
|
|
|
|
const onDetail = (data) => {
|
|
setModalV(true);
|
|
setDataToDetail(data);
|
|
}
|
|
|
|
const closeAndFetch = () => {
|
|
setModalV(false)
|
|
}
|
|
|
|
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>
|
|
<Select value={keywordTarget} onChange={setKeywordTarget} style={{ width: 120 }} >
|
|
<Select.Option value='personalName'>被沟通人</Select.Option>
|
|
<Select.Option value='job'>岗位</Select.Option>
|
|
<Select.Option value='departmentName'>部门</Select.Option>
|
|
</Select>
|
|
</div>
|
|
<div style={{ margin: '0px 18px' }}>
|
|
<Input suffix={<IconSearch />}
|
|
showClear
|
|
placeholder='请输入关键词搜索'
|
|
value={keyword}
|
|
style={{ width: 346 }}
|
|
onChange={seachValueChange}>
|
|
</Input>
|
|
</div>
|
|
<div style={{ marginRight: '18px' }}>
|
|
<span style={{ verticalAlign: 'sub', color: 'rgba(0, 0, 0, 0.65)', fontSize: '14px', fontWeight: 'bold' }}>沟通时间：</span>
|
|
<DatePicker
|
|
initValue={[moment(new Date()).add(-1, 'y').format('YYYY-MM-DD'), moment(new Date()).format('YYYY-MM-DD')]}
|
|
field='entryTime' type="dateRange" density="compact" showClear style={{ width: 370, color: "#F9F9F9" }} />
|
|
</div>
|
|
<Button theme='solid' type='primary' style={{ width: 80, borderRadius: 2, height: 32, background: '#DBECFF', color: '#005ABD' }}
|
|
onClick={() => {
|
|
setQuery({ limit: 10, page: 0 })
|
|
getEmployeeCommunicateData({ limit: 10, page: 0 });
|
|
}}>查询</Button>
|
|
</div>
|
|
<div style={{ display: 'flex', marginRight: 20 }}>
|
|
<div style={{ padding: '6px 20px', background: '#0F7EFB', color: '#FFFFFF', fontSize: 14, marginLeft: 18, cursor: "pointer" }}>
|
|
导出
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style={{ marginTop: 20 }}>
|
|
<Skeleton
|
|
// loading={loading}
|
|
loading={false}
|
|
active={true}
|
|
placeholder={SkeletonScreen()}
|
|
>
|
|
<Table
|
|
columns={columns}
|
|
dataSource={tableData}
|
|
bordered={false}
|
|
empty="暂无数据"
|
|
pagination={false}
|
|
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 });
|
|
getEmployeeCommunicateData({ limit: pageSize, page: currentPage - 1 });
|
|
page.current = currentPage - 1
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{
|
|
modalV ? <DetailModal
|
|
dataToDetail={dataToDetail}
|
|
close={() => closeAndFetch()}
|
|
onCancel={() => setModalV(false)} /> : ''
|
|
}
|
|
</div >)
|
|
}
|
|
|
|
function mapStateToProps(state) {
|
|
const { auth, global, SalesMemberList } = state;
|
|
return {
|
|
user: auth.user,
|
|
actions: global.actions,
|
|
};
|
|
}
|
|
|
|
export default connect(mapStateToProps)(EmployeeCommunication);
|