|
|
@ -1,7 +1,8 @@ |
|
|
|
import React, { useEffect, useState, useRef } from 'react'; |
|
|
|
import { connect } from 'react-redux'; |
|
|
|
import { Select, SkeletonScreen, Button, Pagination, Skeleton, Form } from '@douyinfe/semi-ui'; |
|
|
|
import { Table, Button, Pagination, Skeleton, Form, Tooltip } from '@douyinfe/semi-ui'; |
|
|
|
import { IconSearch } from '@douyinfe/semi-icons'; |
|
|
|
import { SkeletonScreen } from "$components"; |
|
|
|
import '../style.less' |
|
|
|
import { Setup } from "$components"; |
|
|
|
import moment from 'moment' |
|
|
@ -13,13 +14,9 @@ const employeeInformation = (props) => { |
|
|
|
const { humanAffairs } = actions; |
|
|
|
|
|
|
|
const form = useRef();//表单 |
|
|
|
let [archivesList, setArchivesList] = useState([]); |
|
|
|
const [personnelModal, setPersonnelModal] = useState(false);//档案弹框 |
|
|
|
const [exportModalVs, setExportModalVs] = useState(false); |
|
|
|
const [keyword, setKeyword] = useState('');//搜索内容 |
|
|
|
const [keywordTarget, setKeywordTarget] = useState('');//搜索类型 |
|
|
|
const [downloadUrl, setDownloadUrl] = useState('') |
|
|
|
let [typeChoose, setTypeChoose] = useState(''); |
|
|
|
let [archivesList, setArchivesList] = useState([]);//人员列表 |
|
|
|
let [workPlaceList, setWorkPlaceList] = useState([]);//工作地点 |
|
|
|
let [nativeList, setNativeList] = useState([]);//户籍地 |
|
|
|
|
|
|
|
const [setup, setSetup] = useState(false);//表格设置是否显现 |
|
|
|
const [setupp, setSetupp] = useState([]);//实际显示的表格列表 |
|
|
@ -29,49 +26,62 @@ const employeeInformation = (props) => { |
|
|
|
const EMPLOYEEINFORMATION = "employeeInformation"; |
|
|
|
const tableList = [//表格属性 |
|
|
|
{ |
|
|
|
title: '推送信息', |
|
|
|
title: '基础信息', |
|
|
|
list: [ |
|
|
|
{ name: "策略类型", value: "pushWay" }, |
|
|
|
{ name: "推送机制", value: "noticeWay" }, |
|
|
|
{ name: "监听设备数量", value: "monitorCount" }, |
|
|
|
{ name: "累计推送次数", value: "logCount" }, |
|
|
|
{ name: "员工编号", value: "userCode" }, |
|
|
|
{ name: "姓名", value: "userName" }, |
|
|
|
{ name: "所属部门", value: "departmrnt" }, |
|
|
|
// { name: "监听设备数量", value: "monitorCount" }, |
|
|
|
// { name: "累计推送次数", value: "logCount" }, |
|
|
|
] |
|
|
|
} |
|
|
|
]; |
|
|
|
useEffect(() => { |
|
|
|
getMemberSearchList() |
|
|
|
getMemberNativePlaceList() |
|
|
|
|
|
|
|
// attribute(); |
|
|
|
// localStorage.getItem(EMPLOYEEINFORMATION) == null |
|
|
|
// ? localStorage.setItem( |
|
|
|
// EMPLOYEEINFORMATION, |
|
|
|
// JSON.stringify(['pushWay','noticeWay','logCount','monitorCount']) |
|
|
|
// ) |
|
|
|
// : ""; |
|
|
|
}, [typeChoose]) |
|
|
|
getMemberNativePlaceList()//查询籍贯列表 |
|
|
|
getMemberWorkPlaceList()//查询工作地列表 |
|
|
|
getMemberSearchList()//查询人员列表 |
|
|
|
attribute(); |
|
|
|
localStorage.getItem(EMPLOYEEINFORMATION) == null |
|
|
|
? localStorage.setItem( |
|
|
|
EMPLOYEEINFORMATION, |
|
|
|
JSON.stringify(['userCode', 'userName', 'departmrnt']) |
|
|
|
) |
|
|
|
: ""; |
|
|
|
}, []) |
|
|
|
|
|
|
|
function getMemberSearchList () {//搜索项企用户 |
|
|
|
dispatch(humanAffairs.getMemberList({ keywordTarget, keyword, state: typeChoose })).then((res) => {//搜索项企用户 |
|
|
|
function getMemberSearchList () {//查询人员列表 |
|
|
|
let obj = form.current.getValues() |
|
|
|
if (form.current.getValues().entryTime?.length > 1) { |
|
|
|
obj.hiredateStart = moment(form.current.getValues().entryTime[0]).format('YYYY-MM-DD') |
|
|
|
obj.hiredateEnd = moment(form.current.getValues().entryTime[1]).format('YYYY-MM-DD') |
|
|
|
} |
|
|
|
else { |
|
|
|
obj.hiredateStart = '' |
|
|
|
obj.hiredateEnd = '' |
|
|
|
} |
|
|
|
setQuery({ limit: 10, page: 0 }) |
|
|
|
dispatch(humanAffairs.getMemberList({ ...obj, ...query })).then((res) => {//查询人员列表 |
|
|
|
if (res.success) { |
|
|
|
setArchivesList(res.payload?.data?.rows) |
|
|
|
setLimits(res.payload?.data?.count) |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
function getMemberNativePlaceList(){ |
|
|
|
dispatch(humanAffairs.getMemberNativePlace()).then((res) => {//搜索项企用户 |
|
|
|
function getMemberNativePlaceList () { |
|
|
|
dispatch(humanAffairs.getMemberNativePlace()).then((res) => {//查询籍贯列表 |
|
|
|
if (res.success) { |
|
|
|
// setArchivesList(res.payload?.data?.rows) |
|
|
|
console.log('res.payload?.data?.rows',res.payload?.data); |
|
|
|
setNativeList(res.payload?.data) |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
function typeOnChange (e) {//角色选择 |
|
|
|
setTypeChoose(e.target.value); |
|
|
|
function getMemberWorkPlaceList () { |
|
|
|
dispatch(humanAffairs.getMemberWorkPlace()).then((res) => {//查询工作地列表 |
|
|
|
if (res.success) { |
|
|
|
setWorkPlaceList(res.payload?.data) |
|
|
|
} |
|
|
|
function seachValueChange (value) { |
|
|
|
setKeyword(value) |
|
|
|
}) |
|
|
|
} |
|
|
|
const columns = []; |
|
|
|
//获取表格属性设置 |
|
|
|
function attribute () { |
|
|
|
const arr = localStorage.getItem(EMPLOYEEINFORMATION) |
|
|
@ -80,61 +90,117 @@ const employeeInformation = (props) => { |
|
|
|
|
|
|
|
const column = [ |
|
|
|
{ |
|
|
|
title: "关联项目", |
|
|
|
dataIndex: "noticeWay", |
|
|
|
key: "noticeWay", |
|
|
|
render: (_, r, index) => { |
|
|
|
return r.noticeWay; |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "创建时间", |
|
|
|
dataIndex: "logCount", |
|
|
|
key: "logCount", |
|
|
|
render: (_, r, index) => { |
|
|
|
return (r.logCount + '次') |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "接收人", |
|
|
|
dataIndex: "monitorCount", |
|
|
|
key: "monitorCount", |
|
|
|
title: ( |
|
|
|
<div> |
|
|
|
<img src="/assets/images/hrImg/V.png" alt="" style={{ width: 14, height: 14 }} /> 员工编号 |
|
|
|
</div> |
|
|
|
), |
|
|
|
dataIndex: "userCode", |
|
|
|
key: "userCode", |
|
|
|
render: (_, r, index) => { |
|
|
|
return r.monitorCount |
|
|
|
}, |
|
|
|
return r.userCode; |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "监听问题", |
|
|
|
dataIndex: "pushWay", |
|
|
|
key: "pushWay", |
|
|
|
}, { |
|
|
|
title: ( |
|
|
|
<div> |
|
|
|
<img src="/assets/images/hrImg/V.png" alt="" style={{ width: 14, height: 14 }} /> 姓名 |
|
|
|
</div> |
|
|
|
), |
|
|
|
dataIndex: "userName", |
|
|
|
key: "userName", |
|
|
|
render: (_, r, index) => { |
|
|
|
return r.pushWay == 'email' ? '邮件通知' : '短信通知'; |
|
|
|
}, |
|
|
|
return r.userName; |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "通知时效", |
|
|
|
dataIndex: "text1", |
|
|
|
key: "text1", |
|
|
|
}, { |
|
|
|
title: ( |
|
|
|
<div> |
|
|
|
<img src="/assets/images/hrImg/V.png" alt="" style={{ width: 14, height: 14 }} /> 所属部门 |
|
|
|
</div> |
|
|
|
), |
|
|
|
dataIndex: "departmrnt", |
|
|
|
key: "departmrnt", |
|
|
|
render: (_, r, index) => { |
|
|
|
return r.text1 |
|
|
|
}, |
|
|
|
}, |
|
|
|
return ( |
|
|
|
<div> |
|
|
|
{ |
|
|
|
title: "启用状态", |
|
|
|
dataIndex: "text2", |
|
|
|
key: "text2", |
|
|
|
render: (_, r, index) => { |
|
|
|
return r.text2 |
|
|
|
}, |
|
|
|
}, |
|
|
|
r.departmrnt.map((ite, idx) => { |
|
|
|
let departmentsArr = [] |
|
|
|
for (let i = 0; i < r.departmrnt.length; i++) { |
|
|
|
departmentsArr.push(r.departmrnt[i].name) |
|
|
|
} |
|
|
|
return ( |
|
|
|
<div key={idx} style={{ display: 'flex' }}> |
|
|
|
{idx == 0 ? |
|
|
|
(<div style={{ padding: '0px 4px 1px 4px ', color: '#FFFFFF', fontSize: 12, background: 'rgba(0,90,189,0.8)', borderRadius: 2, marginRight: 4 }}> |
|
|
|
{ite.name} |
|
|
|
</div>) : ('') |
|
|
|
|
|
|
|
} |
|
|
|
{ |
|
|
|
title: "推送次数", |
|
|
|
dataIndex: "time", |
|
|
|
key: "time", |
|
|
|
render: (_, r, index) => { |
|
|
|
return r.time |
|
|
|
r.departmrnt.length > 1 && idx == 1 ? ( |
|
|
|
<Tooltip content={departmentsArr.join(',')} trigger="click" style={{ lineHeight: 2 }}> |
|
|
|
<div style={{ padding: '0px 4px 1px 4px ', color: '#FFFFFF', fontSize: 12, background: 'rgba(0,90,189,0.8)', borderRadius: 2, marginRight: 4, cursor: "pointer", }}> |
|
|
|
... |
|
|
|
</div> |
|
|
|
</Tooltip> |
|
|
|
) : ('') |
|
|
|
} |
|
|
|
</div> |
|
|
|
) |
|
|
|
}) |
|
|
|
} |
|
|
|
</div> |
|
|
|
) |
|
|
|
}, |
|
|
|
}, |
|
|
|
// { |
|
|
|
// title: "创建时间", |
|
|
|
// dataIndex: "logCount", |
|
|
|
// key: "logCount", |
|
|
|
// render: (_, r, index) => { |
|
|
|
// return (r.logCount + '次') |
|
|
|
// }, |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// title: "接收人", |
|
|
|
// dataIndex: "monitorCount", |
|
|
|
// key: "monitorCount", |
|
|
|
// render: (_, r, index) => { |
|
|
|
// return r.monitorCount |
|
|
|
// }, |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// title: "监听问题", |
|
|
|
// dataIndex: "pushWay", |
|
|
|
// key: "pushWay", |
|
|
|
// render: (_, r, index) => { |
|
|
|
// return r.pushWay == 'email' ? '邮件通知' : '短信通知'; |
|
|
|
// }, |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// title: "通知时效", |
|
|
|
// dataIndex: "text1", |
|
|
|
// key: "text1", |
|
|
|
// render: (_, r, index) => { |
|
|
|
// return r.text1 |
|
|
|
// }, |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// title: "启用状态", |
|
|
|
// dataIndex: "text2", |
|
|
|
// key: "text2", |
|
|
|
// render: (_, r, index) => { |
|
|
|
// return r.text2 |
|
|
|
// }, |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// title: "推送次数", |
|
|
|
// dataIndex: "time", |
|
|
|
// key: "time", |
|
|
|
// render: (_, r, index) => { |
|
|
|
// return r.time |
|
|
|
// }, |
|
|
|
// }, |
|
|
|
]; |
|
|
|
for (let i = 0; i < arr.length; i++) { |
|
|
|
let colum = column.filter((item) => { |
|
|
@ -144,6 +210,18 @@ const employeeInformation = (props) => { |
|
|
|
} |
|
|
|
setSetupp(columns); |
|
|
|
} |
|
|
|
function handleRow (record, index) {//斑马条纹 |
|
|
|
// 给偶数行设置斑马纹 |
|
|
|
if (index % 2 === 0) { |
|
|
|
return { |
|
|
|
style: { |
|
|
|
background: '#FAFCFF', |
|
|
|
} |
|
|
|
}; |
|
|
|
} else { |
|
|
|
return {}; |
|
|
|
} |
|
|
|
} |
|
|
|
return ( |
|
|
|
<> |
|
|
|
<div style={{ padding: '0px 12px' }}> |
|
|
@ -174,77 +252,85 @@ const employeeInformation = (props) => { |
|
|
|
> |
|
|
|
<div> |
|
|
|
<div style={{ display: 'flex', alignItems: 'center' }}> |
|
|
|
<Form.Select value={keywordTarget} |
|
|
|
pure onChange={setKeywordTarget} placeholder='请选择搜索类型' style={{ width: 200 }} showClear> |
|
|
|
<Select.Option value='role'>职位</Select.Option> |
|
|
|
<Select.Option value='dep'>部门</Select.Option> |
|
|
|
<Select.Option value='number'>编号</Select.Option> |
|
|
|
<Select.Option value='name'>姓名</Select.Option> |
|
|
|
<Form.Select |
|
|
|
pure |
|
|
|
field="keywordTarget" |
|
|
|
placeholder="请选择搜索类型" |
|
|
|
style={{ width: 200 }} |
|
|
|
showClear |
|
|
|
> |
|
|
|
<Form.Select.Option value='role'>职位</Form.Select.Option> |
|
|
|
<Form.Select.Option value='dep'>部门</Form.Select.Option> |
|
|
|
<Form.Select.Option value='number'>编号</Form.Select.Option> |
|
|
|
<Form.Select.Option value='name'>姓名</Form.Select.Option> |
|
|
|
</Form.Select> |
|
|
|
<Form.Input suffix={<IconSearch />} |
|
|
|
<Form.Input |
|
|
|
suffix={<IconSearch />} |
|
|
|
field="keyword" |
|
|
|
pure |
|
|
|
showClear |
|
|
|
placeholder='请输入或选择关键词' |
|
|
|
value={keyword} |
|
|
|
style={{ width: 346, marginLeft: 12, marginRight: 12 }} |
|
|
|
onChange={seachValueChange}> |
|
|
|
</Form.Input> |
|
|
|
placeholder="请输入或选择关键词" |
|
|
|
/> |
|
|
|
|
|
|
|
<Form.DatePicker |
|
|
|
label='入职时间:' |
|
|
|
field='enableType' type="dateRange" density="compact" showClear style={{ width: 370, color: "#F9F9F9" }} /> |
|
|
|
field='entryTime' type="dateRange" density="compact" showClear style={{ width: 370, color: "#F9F9F9" }} /> |
|
|
|
</div> |
|
|
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}> |
|
|
|
<div style={{ display: 'flex', alignItems: 'center' }}> |
|
|
|
<Form.Select |
|
|
|
label='婚姻状况:' |
|
|
|
label="婚育状态:" |
|
|
|
field="marital" |
|
|
|
labelPosition="left" |
|
|
|
field='enableType' |
|
|
|
style={{ width: 246, marginRight: 20, color: "#F9F9F9", }} |
|
|
|
placeholder="全部" |
|
|
|
filter |
|
|
|
style={{ width: 246, marginRight: 20, color: "#F9F9F9", }} |
|
|
|
showClear |
|
|
|
> |
|
|
|
{/* {.map((item) => { |
|
|
|
return ( |
|
|
|
<Form.Select.Option key={item.value} value={item.value}> |
|
|
|
{item.name} |
|
|
|
<Form.Select.Option value=''> |
|
|
|
全部 |
|
|
|
</Form.Select.Option> |
|
|
|
<Form.Select.Option value='已婚已育'> |
|
|
|
已婚已育 |
|
|
|
</Form.Select.Option> |
|
|
|
<Form.Select.Option value='已婚'> |
|
|
|
已婚 |
|
|
|
</Form.Select.Option> |
|
|
|
<Form.Select.Option value='未婚'> |
|
|
|
未婚 |
|
|
|
</Form.Select.Option> |
|
|
|
); |
|
|
|
})} */} |
|
|
|
</Form.Select> |
|
|
|
<Form.Select |
|
|
|
label='户籍地:' |
|
|
|
labelPosition="left" |
|
|
|
field='enableType' |
|
|
|
field='native' |
|
|
|
style={{ width: 246, marginRight: 20, color: "#F9F9F9", }} |
|
|
|
placeholder="全部" |
|
|
|
filter |
|
|
|
showClear |
|
|
|
> |
|
|
|
{/* {.map((item) => { |
|
|
|
{nativeList.map((item) => { |
|
|
|
return ( |
|
|
|
<Form.Select.Option key={item.value} value={item.value}> |
|
|
|
{item.name} |
|
|
|
<Form.Select.Option key={item.nativePlace} value={item.nativePlace}> |
|
|
|
{item.nativePlace} |
|
|
|
</Form.Select.Option> |
|
|
|
); |
|
|
|
})} */} |
|
|
|
})} |
|
|
|
</Form.Select> |
|
|
|
<Form.Select |
|
|
|
label='工作地点:' |
|
|
|
labelPosition="left" |
|
|
|
field='enableType' |
|
|
|
field='workPlace' |
|
|
|
style={{ width: 246, marginRight: 20, color: "#F9F9F9", }} |
|
|
|
placeholder="全部" |
|
|
|
filter |
|
|
|
showClear |
|
|
|
> |
|
|
|
{/* {.map((item) => { |
|
|
|
{workPlaceList.map((item) => { |
|
|
|
return ( |
|
|
|
<Form.Select.Option key={item.value} value={item.value}> |
|
|
|
{item.name} |
|
|
|
<Form.Select.Option key={item.workPlace} value={item.workPlace}> |
|
|
|
{item.workPlace} |
|
|
|
</Form.Select.Option> |
|
|
|
); |
|
|
|
})} */} |
|
|
|
})} |
|
|
|
</Form.Select> |
|
|
|
</div> |
|
|
|
<div style={{ display: 'flex', alignItems: 'center' }}> |
|
|
@ -256,11 +342,7 @@ const employeeInformation = (props) => { |
|
|
|
/> |
|
|
|
<Button theme='solid' type='primary' style={{ width: 80, borderRadius: 2, height: 32, background: '#DBECFF', color: '#005ABD' }} |
|
|
|
onClick={() => { |
|
|
|
// dispatch(humanAffairs.getMemberList({ keywordTarget, keyword, state: typeChoose })).then((res) => {//搜索项企用户 |
|
|
|
// if (res.success) { |
|
|
|
// setArchivesList(res.payload.data.rows) |
|
|
|
// } |
|
|
|
// }) |
|
|
|
getMemberSearchList() |
|
|
|
}}>查询</Button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
@ -272,7 +354,7 @@ const employeeInformation = (props) => { |
|
|
|
<img src="/assets/images/hrImg/V.png" alt="" style={{ width: 14, height: 14 }} /> |
|
|
|
"信息的为系统基础数据,来源于项企PEP、钉钉等系统,其他数据均为导入或自定义数据 |
|
|
|
</div> |
|
|
|
{/* <div style={{ marginTop: 20 }}> |
|
|
|
<div style={{ marginTop: 20 }}> |
|
|
|
<Skeleton |
|
|
|
// loading={loading} |
|
|
|
loading={false} |
|
|
@ -281,12 +363,11 @@ const employeeInformation = (props) => { |
|
|
|
> |
|
|
|
<Table |
|
|
|
columns={setupp.filter((s) => s)} |
|
|
|
dataSource={tableData} |
|
|
|
dataSource={archivesList} |
|
|
|
bordered={false} |
|
|
|
empty="暂无数据" |
|
|
|
pagination={false} |
|
|
|
onRow={handleRow} |
|
|
|
rowSelection={rowSelection} |
|
|
|
/> |
|
|
|
</Skeleton> |
|
|
|
<div |
|
|
@ -315,7 +396,7 @@ const employeeInformation = (props) => { |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> */} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|