From 0c3eada585b55145b1268e2660ff2d7685729fb5 Mon Sep 17 00:00:00 2001 From: deartibers <947466799@qq.com> Date: Wed, 19 Oct 2022 11:41:47 +0800 Subject: [PATCH] =?UTF-8?q?=E5=8A=A0=E7=8F=AD=E6=8A=98=E7=BA=BF=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/client/src/components/setup.jsx | 214 ++++++----- .../actions/employeeInformation.js | 11 + .../containers/employeeInformation.jsx | 335 +++++++++++------- .../containers/personnelFilesDetail.jsx | 6 +- .../src/sections/humanAffairs/style.less | 9 + web/client/src/utils/webapi.js | 2 +- 6 files changed, 338 insertions(+), 239 deletions(-) diff --git a/web/client/src/components/setup.jsx b/web/client/src/components/setup.jsx index a02fd3e..41d8792 100644 --- a/web/client/src/components/setup.jsx +++ b/web/client/src/components/setup.jsx @@ -1,125 +1,123 @@ import React, { useState, useEffect } from "react"; import { - Modal, - CheckboxGroup, - Checkbox, + Modal, + CheckboxGroup, + Checkbox, } from "@douyinfe/semi-ui"; -function Setup(props) { - const { - close, - tableType, - tableList, - length - } = props; +function Setup (props) { + const { + close, + tableType, + tableList, + length + } = props; + const [check, setCheck] = useState([]); - console.log(tableType, - tableList); - const [check, setCheck] = useState([]); - - const checkboxcss = { width: "25%", height: 16, margin: "0 0 20px 0" }; + const checkboxcss = { width: "25%", height: 16, margin: "0 0 20px 0" }; - useEffect(() => { - //获取是否勾选信息 - const checkItem = localStorage.getItem(tableType); - setCheck(checkItem?JSON.parse(checkItem) : []) - ischeck(); - }, []); - function ischeck(value) { - if (check.length >= length) { - if (check.includes(value)) { - return false; - } else { - return true; - } + useEffect(() => { + //获取是否勾选信息 + const checkItem = localStorage.getItem(tableType); + setCheck(checkItem ? JSON.parse(checkItem) : []) + ischeck(); + }, []); + function ischeck (value) { + if (check.length >= length) { + if (check.includes(value)) { + return false; + } else { + return true; + } + } } - } - return ( - - 表格属性设置 - + 表格属性设置 + + {check.length}/{length} + + + } + visible={true} + style={{ width: 600 }} + onOk={() => { + localStorage.setItem(tableType, JSON.stringify(check)); + close(); }} - > - {check.length}/length - - - } - visible={true} - style={{ width: 600 }} - onOk={() => { - localStorage.setItem(tableType, JSON.stringify(check)); - close(); - }} - onCancel={() => { - close(); - }} - > - { - setCheck(check); - ischeck(); - }} - > - {tableList.map((item,index)=>{ - return( -
{ + close(); }} + > + { + setCheck(check); + ischeck(); + }} > -
- {item.title} -
-
- {item.list?.map((itm) => { + {tableList.map((item, index) => { return ( - - {itm.name} - - ); - })} -
-
- )})} - - - ); +
+ {item.title} +
+
+ {item.list?.map((itm) => { + return ( + + {itm.name} + + ); + })} +
+ + ) + })} + + + ); } export default Setup; diff --git a/web/client/src/sections/humanAffairs/actions/employeeInformation.js b/web/client/src/sections/humanAffairs/actions/employeeInformation.js index 61999b5..419449d 100644 --- a/web/client/src/sections/humanAffairs/actions/employeeInformation.js +++ b/web/client/src/sections/humanAffairs/actions/employeeInformation.js @@ -13,3 +13,14 @@ export function getMemberNativePlace(query) {//查询籍贯列表 reducer: { name: "MemberNativePlace", params: { noClear: true } }, }); } +export function getMemberWorkPlace(query) {//查询工作地列表 + return (dispatch) => basicAction({ + type: "get", + dispatch: dispatch, + actionType: "GET_MemberWorkPlace", + query: query, + url: `${ApiTable.getMemberWorkPlace}`, + msg: { option: "查询工作地列表" }, + reducer: { name: "MemberWorkPlace", params: { noClear: true } }, + }); +} \ No newline at end of file diff --git a/web/client/src/sections/humanAffairs/containers/employeeInformation.jsx b/web/client/src/sections/humanAffairs/containers/employeeInformation.jsx index 3eb33c9..740704c 100644 --- a/web/client/src/sections/humanAffairs/containers/employeeInformation.jsx +++ b/web/client/src/sections/humanAffairs/containers/employeeInformation.jsx @@ -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() + getMemberNativePlaceList()//查询籍贯列表 + getMemberWorkPlaceList()//查询工作地列表 + getMemberSearchList()//查询人员列表 + attribute(); + localStorage.getItem(EMPLOYEEINFORMATION) == null + ? localStorage.setItem( + EMPLOYEEINFORMATION, + JSON.stringify(['userCode', 'userName', 'departmrnt']) + ) + : ""; + }, []) - // attribute(); - // localStorage.getItem(EMPLOYEEINFORMATION) == null - // ? localStorage.setItem( - // EMPLOYEEINFORMATION, - // JSON.stringify(['pushWay','noticeWay','logCount','monitorCount']) - // ) - // : ""; - }, [typeChoose]) - - 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 seachValueChange (value) { - setKeyword(value) + function getMemberWorkPlaceList () { + dispatch(humanAffairs.getMemberWorkPlace()).then((res) => {//查询工作地列表 + if (res.success) { + setWorkPlaceList(res.payload?.data) + } + }) } + 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", - render: (_, r, index) => { - return r.monitorCount - }, - }, - { - title: "监听问题", - dataIndex: "pushWay", - key: "pushWay", - render: (_, r, index) => { - return r.pushWay == 'email' ? '邮件通知' : '短信通知'; - }, - }, - { - title: "通知时效", - dataIndex: "text1", - key: "text1", + title: ( +
+ 员工编号 +
+ ), + dataIndex: "userCode", + key: "userCode", render: (_, r, index) => { - return r.text1 + return r.userCode; }, - }, - { - title: "启用状态", - dataIndex: "text2", - key: "text2", + }, { + title: ( +
+ 姓名 +
+ ), + dataIndex: "userName", + key: "userName", render: (_, r, index) => { - return r.text2 + return r.userName; }, - }, - { - title: "推送次数", - dataIndex: "time", - key: "time", + }, { + title: ( +
+ 所属部门 +
+ ), + dataIndex: "departmrnt", + key: "departmrnt", render: (_, r, index) => { - return r.time + return ( +
+ { + r.departmrnt.map((ite, idx) => { + let departmentsArr = [] + for (let i = 0; i < r.departmrnt.length; i++) { + departmentsArr.push(r.departmrnt[i].name) + } + return ( +
+ {idx == 0 ? + (
+ {ite.name} +
) : ('') + + } + { + r.departmrnt.length > 1 && idx == 1 ? ( + +
+ ... +
+ + ) : ('') + } +
+ ) + }) + } +
+ ) }, }, + // { + // 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 ( <>
@@ -174,77 +252,85 @@ const employeeInformation = (props) => { >
- - 职位 - 部门 - 编号 - 姓名 + + 职位 + 部门 + 编号 + 姓名 - } + } + field="keyword" pure showClear - placeholder='请输入或选择关键词' - value={keyword} style={{ width: 346, marginLeft: 12, marginRight: 12 }} - onChange={seachValueChange}> - + placeholder="请输入或选择关键词" + /> + + field='entryTime' type="dateRange" density="compact" showClear style={{ width: 370, color: "#F9F9F9" }} />
- {/* {.map((item) => { - return ( - - {item.name} - - ); - })} */} + + 全部 + + + 已婚已育 + + + 已婚 + + + 未婚 + - {/* {.map((item) => { + {nativeList.map((item) => { return ( - - {item.name} + + {item.nativePlace} ); - })} */} + })} - {/* {.map((item) => { + {workPlaceList.map((item) => { return ( - - {item.name} + + {item.workPlace} ); - })} */} + })}
@@ -256,11 +342,7 @@ const employeeInformation = (props) => { />
@@ -272,7 +354,7 @@ const employeeInformation = (props) => { "信息的为系统基础数据，来源于项企PEP、钉钉等系统，其他数据均为导入或自定义数据
- {/*
+
{ > s)} - dataSource={tableData} + dataSource={archivesList} bordered={false} empty="暂无数据" pagination={false} onRow={handleRow} - rowSelection={rowSelection} />
{ />
- */} + diff --git a/web/client/src/sections/humanAffairs/containers/personnelFilesDetail.jsx b/web/client/src/sections/humanAffairs/containers/personnelFilesDetail.jsx index 2099d3f..f600322 100644 --- a/web/client/src/sections/humanAffairs/containers/personnelFilesDetail.jsx +++ b/web/client/src/sections/humanAffairs/containers/personnelFilesDetail.jsx @@ -164,14 +164,14 @@ const Rest = (props) => { let textdate = []; for (let i = 0; i < res.payload?.data?.dayStatisticData?.length; i++) { if (textdate.findIndex((ev) => { - return ev.time == moment(res.payload.data.dayStatisticData[i].day).format('YYYY/MM') + return ev.time == moment(res.payload.data.dayStatisticData[i].day).format('YYYY/MM')&&ev.compensate == res.payload.data.dayStatisticData[i].compensate }) !== -1) { textdate[textdate.findIndex((ev) => { - return ev.time == moment(res.payload.data.dayStatisticData[i].day).format('YYYY/MM') + return ev.time == moment(res.payload.data.dayStatisticData[i].day).format('YYYY/MM')&&ev.compensate == res.payload.data.dayStatisticData[i].compensate })].num = textdate[textdate.findIndex((ev) => { - return ev.time == moment(res.payload.data.dayStatisticData[i].day).format('YYYY/MM') + return ev.time == moment(res.payload.data.dayStatisticData[i].day).format('YYYY/MM')&&ev.compensate == res.payload.data.dayStatisticData[i].compensate })].num + res.payload.data.dayStatisticData[i].duration / 3600 } else { diff --git a/web/client/src/sections/humanAffairs/style.less b/web/client/src/sections/humanAffairs/style.less index e69de29..a1290ea 100644 --- a/web/client/src/sections/humanAffairs/style.less +++ b/web/client/src/sections/humanAffairs/style.less @@ -0,0 +1,9 @@ +.semi-table{ + .semi-table-row:first-child{ + .semi-table-row-head{ + background: #F2F3F5; + color: #4A4A4A; + font-size: 14px; + } + } +} diff --git a/web/client/src/utils/webapi.js b/web/client/src/utils/webapi.js index 5709d4e..b4caad9 100644 --- a/web/client/src/utils/webapi.js +++ b/web/client/src/utils/webapi.js @@ -27,7 +27,7 @@ export const ApiTable = { getMemberVacate: 'member/vacate',//查询单个人员请假统计数据 getMemberExport: 'member/export',//导出员工信息 getMemberNativePlace: 'member/native_place',//查询籍贯列表 - + getMemberWorkPlace: 'member/work_place',//查询工作地列表 }; export const RouteTable = { apiRoot: "/api/root",