free-sun
/
HumanResource
18
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

(+)web接入数据

master
ww664853070 2 years ago
parent
a004cc142b
commit
caa139f86f
6 changed files with 260 additions and 114 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 11
      api/app/lib/controllers/employeeAssessment/index.js
  2. 76
      web/client/src/sections/humanAffairs/containers/highMonthly.jsx
  3. 76
      web/client/src/sections/humanAffairs/containers/highQuarter.jsx
  4. 75
      web/client/src/sections/humanAffairs/containers/monthlyProcess.jsx
  5. 76
      web/client/src/sections/humanAffairs/containers/quarter.jsx
  6. 60
      web/client/src/sections/humanAffairs/containers/regularKPI.jsx

11
api/app/lib/controllers/employeeAssessment/index.js
View File

@ -15,18 +15,19 @@ async function getemployeeAssessmentList(ctx) {
const { type } = ctx.params; const { type } = ctx.params;
let rlst = []; let rlst = [];
const findObj = { const findObj = {
order: [["id", "desc"]] order: [["year", "desc"],["month", "desc"]],
where:{}
}; };
if (Number(limit) > 0 && Number(page) >= 0) { if (Number(limit) > 0 && Number(page) >= 0) {
findObj.limit = Number(limit); findObj.limit = Number(limit);
findObj.offset = Number(page) * Number(limit); findObj.offset = Number(page) * Number(limit);
} }
if (year && month) { if (year && month) {
findObj.year = year; findObj.where.year = year;
findObj.month = month; findObj.where.month = month;
} }
if (type) { if (type) {
findObj.type = type; findObj.where.type = type;
} }
rlst = await models.PerformanceAll.findAndCountAll(findObj); rlst = await models.PerformanceAll.findAndCountAll(findObj);
ctx.status = 200; ctx.status = 200;

76
web/client/src/sections/humanAffairs/containers/highMonthly.jsx
View File

@ -1,16 +1,28 @@
import React, { useEffect, useState, useMemo } from 'react'; import React, { useEffect, useState, useMemo } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { Table, Pagination, Skeleton, DatePicker } from '@douyinfe/semi-ui'; import { Table, Pagination, Skeleton, DatePicker,Button } from '@douyinfe/semi-ui';
import { SkeletonScreen } from "$components"; import { SkeletonScreen } from "$components";
import '../style.less' import '../style.less'
import moment from 'moment'
const HighMonthly = (props) => { const HighMonthly = (props) => {
const { dispatch, actions } = props const [year, setYear] = useState(null)
const [limits, setLimits] = useState()//每页实际条数 const [month, setMonth] = useState(null)
const { dispatch, actions, employeeAssessmentList } = props
const [query, setQuery] = useState({ limit: 10, page: 0 }); //页码信息 const [query, setQuery] = useState({ limit: 10, page: 0 }); //页码信息
const [tableData, setTableData] = useState([{ id: 1, year: '1月', statement: '高管月度测试12.xlsx' }, { id: 2, year: '2月', statement: '测试12.xlsx' }, { id: 3, year: '3月', statement: '测试12.xlsx' }, { id: 4, year: '4月', statement: '测试12.xlsx' }, { id: 5, year: '5月', statement: '测试12.xlsx' }, { id: 6, year: '6月', statement: '测试12.xlsx' }, { id: 7, year: '7月', statement: '测试12.xlsx' }, { id: 8, year: '8月', statement: '测试12.xlsx' }, { id: 9, year: '9月', statement: '测试12.xlsx' }, { id: 10, year: '10月', statement: '测试12.xlsx' }, { id: 11, year: '11月', statement: '测试12.xlsx' }, { id: 12, year: '12月', statement: '测试12.xlsx' }]); const { getemployeeAssessmentList } = actions.humanAffairs;
const [downloadUrl, setDownloadUrl] = useState(null);
const [downloadKey, setDownloadKey] = useState(null);
useEffect(() => {
getList()
}, [query])
function getList() {
dispatch(getemployeeAssessmentList(query, 4))
}
function exportReport(url){
setDownloadUrl(`/_file-server${url}`);
setDownloadKey(Math.random());
}
function handleRow(record, index) {// 给偶数行设置斑马纹 function handleRow(record, index) {// 给偶数行设置斑马纹
if (index % 2 === 0) { if (index % 2 === 0) {
return { return {
@ -31,14 +43,15 @@ const HighMonthly = (props) => {
render: (text, record, index) => index + 1 render: (text, record, index) => index + 1
}, { }, {
title: '月份', title: '月份',
dataIndex: 'year', dataIndex: 'yearMonth',
key: 'year', key: 'yearMonth',
width: 80 width: 80,
render: (text, record, index) => `${record.year}-${record.month}`
}, },
{ {
title: '报表', title: '报表',
dataIndex: 'statement', dataIndex: 'name',
key: 'statement', key: 'name',
width: 200, width: 200,
// render: (text, r, index) => { // render: (text, r, index) => {
@ -49,33 +62,46 @@ const HighMonthly = (props) => {
width: 120, width: 120,
render: (text, record) => { render: (text, record) => {
return <div> return <div>
<span style={{ color: '#1890FF', cursor: 'pointer' }}>下载</span> <span onClick={() => exportReport(record.path)} style={{ color: '#1890FF', cursor: 'pointer' }}>下载</span>
</div> </div>
} }
}]; }];
function getTime(date, dateString) {
if (date) {
setYear(moment(date).format('YYYY'))
setMonth(moment(date).format('MM'))
} else {
setYear(null)
setMonth(null)
}
}
function search() {
let query = { limit: 10, page: 0, year: year, month: month }
setQuery(query)
}
const scroll = useMemo(() => ({}), []); const scroll = useMemo(() => ({}), []);
return ( return (
<> <>
<div style={{ padding: '0px 12px' }}> <div style={{ padding: '0px 12px' }}>
<div style={{ display: 'flex' }}> <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 }}>绩效考核</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, margin: '0px 8px' }}>/</div>
<div style={{ color: 'rgba(0,0,0,0.45)', fontSize: 14 }}>高管考核</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, margin: '0px 8px' }}>/</div>
<div style={{ color: '#033C9A', fontSize: 14 }}>月度过程考核</div> <div style={{ color: '#033C9A', fontSize: 14 }}>正式员工考核</div>
</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={{ 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: 'center', justifyContent: 'space-between' }}>
<div style={{ display: 'flex', alignItems: 'baseline' }}> <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={{ 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={{ fontFamily: "YouSheBiaoTiHei", fontSize: 24, color: '#033C9A', marginLeft: 8 }}>正式员工考核</div>
<div style={{ marginLeft: 6, fontSize: 12, color: '#969799', fontFamily: "DINExp", }}>MONTHLY PROCESS ASSESSMENT</div> <div style={{ marginLeft: 6, fontSize: 12, color: '#969799', fontFamily: "DINExp", }}>FORMAL EMPLOYEE ASSESSMENT</div>
</div> </div>
</div> </div>
<div style={{ width: '100%', height: '35px', lineHeight: '35px', marginTop: '20px' }}> <div style={{ width: '100%', height: '35px', lineHeight: '35px', marginTop: '20px' }}>
查询时间：<DatePicker defaultValue={new Date()} type="month" style={{ width: 200 }} /> 查询时间：<DatePicker type="month" style={{ width: 200 }} onChange={getTime} />
<Button onClick={search} theme='solid' type='primary' style={{ marginLeft: 15 }}>查询</Button>
</div> </div>
<div style={{ marginTop: 20 }}> <div style={{ marginTop: 20 }}>
<Skeleton <Skeleton
@ -86,7 +112,7 @@ const HighMonthly = (props) => {
> >
<Table <Table
columns={columns} columns={columns}
dataSource={tableData} dataSource={employeeAssessmentList.rows}
bordered={false} bordered={false}
empty="暂无数据" empty="暂无数据"
pagination={false} pagination={false}
@ -102,15 +128,15 @@ const HighMonthly = (props) => {
<div></div> <div></div>
<div style={{ display: 'flex', }}> <div style={{ display: 'flex', }}>
<span style={{ lineHeight: "30px", fontSize: 13, color: 'rgba(0,90,189,0.8)' }}> <span style={{ lineHeight: "30px", fontSize: 13, color: 'rgba(0,90,189,0.8)' }}>
共{limits}条信息 共{employeeAssessmentList.count}条信息
</span> </span>
<Pagination <Pagination
total={limits} total={employeeAssessmentList.count}
showSizeChanger showSizeChanger
currentPage={query.page + 1} currentPage={query.page + 1}
pageSizeOpts={[10, 20, 30, 40]} pageSizeOpts={[10, 20, 30, 40]}
onChange={(currentPage, pageSize) => { onChange={(currentPage, pageSize) => {
setQuery({ limit: pageSize, page: currentPage - 1 }); setQuery({ limit: pageSize, page: currentPage - 1, year: year, month: month });
page.current = currentPage - 1 page.current = currentPage - 1
}} }}
/> />
@ -118,16 +144,20 @@ const HighMonthly = (props) => {
</div> </div>
</div> </div>
</div> </div>
{
downloadUrl ? <iframe key={downloadKey} src={downloadUrl} style={{ display: 'none' }} /> : ''
}
</div> </div>
</> </>
) )
} }
function mapStateToProps(state) { function mapStateToProps(state) {
const { auth, global } = state; const { auth, global, employeeAssessmentList } = state;
return { return {
user: auth.user, user: auth.user,
actions: global.actions, actions: global.actions,
employeeAssessmentList: employeeAssessmentList.data || {}
}; };
} }

76
web/client/src/sections/humanAffairs/containers/highQuarter.jsx
View File

@ -1,16 +1,28 @@
import React, { useEffect, useState, useMemo } from 'react'; import React, { useEffect, useState, useMemo } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { Table, Pagination, Skeleton, DatePicker } from '@douyinfe/semi-ui'; import { Table, Pagination, Skeleton, DatePicker,Button } from '@douyinfe/semi-ui';
import { SkeletonScreen } from "$components"; import { SkeletonScreen } from "$components";
import '../style.less' import '../style.less'
import moment from 'moment'
const HighQuarter = (props) => { const HighQuarter = (props) => {
const { dispatch, actions } = props const [year, setYear] = useState(null)
const [limits, setLimits] = useState()//每页实际条数 const [month, setMonth] = useState(null)
const { dispatch, actions, employeeAssessmentList } = props
const [query, setQuery] = useState({ limit: 10, page: 0 }); //页码信息 const [query, setQuery] = useState({ limit: 10, page: 0 }); //页码信息
const [tableData, setTableData] = useState([{ id: 1, year: '1月', statement: '高管季度测试12.xlsx' }, { id: 2, year: '2月', statement: '测试12.xlsx' }, { id: 3, year: '3月', statement: '测试12.xlsx' }, { id: 4, year: '4月', statement: '测试12.xlsx' }, { id: 5, year: '5月', statement: '测试12.xlsx' }, { id: 6, year: '6月', statement: '测试12.xlsx' }, { id: 7, year: '7月', statement: '测试12.xlsx' }, { id: 8, year: '8月', statement: '测试12.xlsx' }, { id: 9, year: '9月', statement: '测试12.xlsx' }, { id: 10, year: '10月', statement: '测试12.xlsx' }, { id: 11, year: '11月', statement: '测试12.xlsx' }, { id: 12, year: '12月', statement: '测试12.xlsx' }]); const { getemployeeAssessmentList } = actions.humanAffairs;
const [downloadUrl, setDownloadUrl] = useState(null);
const [downloadKey, setDownloadKey] = useState(null);
useEffect(() => {
getList()
}, [query])
function getList() {
dispatch(getemployeeAssessmentList(query, 5))
}
function exportReport(url){
setDownloadUrl(`/_file-server${url}`);
setDownloadKey(Math.random());
}
function handleRow(record, index) {// 给偶数行设置斑马纹 function handleRow(record, index) {// 给偶数行设置斑马纹
if (index % 2 === 0) { if (index % 2 === 0) {
return { return {
@ -31,14 +43,15 @@ const HighQuarter = (props) => {
render: (text, record, index) => index + 1 render: (text, record, index) => index + 1
}, { }, {
title: '月份', title: '月份',
dataIndex: 'year', dataIndex: 'yearMonth',
key: 'year', key: 'yearMonth',
width: 80 width: 80,
render: (text, record, index) => `${record.year}-${record.month}`
}, },
{ {
title: '报表', title: '报表',
dataIndex: 'statement', dataIndex: 'name',
key: 'statement', key: 'name',
width: 200, width: 200,
// render: (text, r, index) => { // render: (text, r, index) => {
@ -49,33 +62,46 @@ const HighQuarter = (props) => {
width: 120, width: 120,
render: (text, record) => { render: (text, record) => {
return <div> return <div>
<span style={{ color: '#1890FF', cursor: 'pointer' }}>下载</span> <span onClick={() => exportReport(record.path)} style={{ color: '#1890FF', cursor: 'pointer' }}>下载</span>
</div> </div>
} }
}]; }];
function getTime(date, dateString) {
if (date) {
setYear(moment(date).format('YYYY'))
setMonth(moment(date).format('MM'))
} else {
setYear(null)
setMonth(null)
}
}
function search() {
let query = { limit: 10, page: 0, year: year, month: month }
setQuery(query)
}
const scroll = useMemo(() => ({}), []); const scroll = useMemo(() => ({}), []);
return ( return (
<> <>
<div style={{ padding: '0px 12px' }}> <div style={{ padding: '0px 12px' }}>
<div style={{ display: 'flex' }}> <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 }}>绩效考核</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, margin: '0px 8px' }}>/</div>
<div style={{ color: 'rgba(0,0,0,0.45)', fontSize: 14 }}>高管考核</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, margin: '0px 8px' }}>/</div>
<div style={{ color: '#033C9A', fontSize: 14 }}>季度考核</div> <div style={{ color: '#033C9A', fontSize: 14 }}>正式员工考核</div>
</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={{ 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: 'center', justifyContent: 'space-between' }}>
<div style={{ display: 'flex', alignItems: 'baseline' }}> <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={{ 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={{ fontFamily: "YouSheBiaoTiHei", fontSize: 24, color: '#033C9A', marginLeft: 8 }}>正式员工考核</div>
<div style={{ marginLeft: 6, fontSize: 12, color: '#969799', fontFamily: "DINExp", }}>QUARTERLY ASSESSMENT</div> <div style={{ marginLeft: 6, fontSize: 12, color: '#969799', fontFamily: "DINExp", }}>FORMAL EMPLOYEE ASSESSMENT</div>
</div> </div>
</div> </div>
<div style={{ width: '100%', height: '35px', lineHeight: '35px', marginTop: '20px' }}> <div style={{ width: '100%', height: '35px', lineHeight: '35px', marginTop: '20px' }}>
查询时间：<DatePicker defaultValue={new Date()} type="month" style={{ width: 200 }} /> 查询时间：<DatePicker type="month" style={{ width: 200 }} onChange={getTime} />
<Button onClick={search} theme='solid' type='primary' style={{ marginLeft: 15 }}>查询</Button>
</div> </div>
<div style={{ marginTop: 20 }}> <div style={{ marginTop: 20 }}>
<Skeleton <Skeleton
@ -86,7 +112,7 @@ const HighQuarter = (props) => {
> >
<Table <Table
columns={columns} columns={columns}
dataSource={tableData} dataSource={employeeAssessmentList.rows}
bordered={false} bordered={false}
empty="暂无数据" empty="暂无数据"
pagination={false} pagination={false}
@ -102,15 +128,15 @@ const HighQuarter = (props) => {
<div></div> <div></div>
<div style={{ display: 'flex', }}> <div style={{ display: 'flex', }}>
<span style={{ lineHeight: "30px", fontSize: 13, color: 'rgba(0,90,189,0.8)' }}> <span style={{ lineHeight: "30px", fontSize: 13, color: 'rgba(0,90,189,0.8)' }}>
共{limits}条信息 共{employeeAssessmentList.count}条信息
</span> </span>
<Pagination <Pagination
total={limits} total={employeeAssessmentList.count}
showSizeChanger showSizeChanger
currentPage={query.page + 1} currentPage={query.page + 1}
pageSizeOpts={[10, 20, 30, 40]} pageSizeOpts={[10, 20, 30, 40]}
onChange={(currentPage, pageSize) => { onChange={(currentPage, pageSize) => {
setQuery({ limit: pageSize, page: currentPage - 1 }); setQuery({ limit: pageSize, page: currentPage - 1, year: year, month: month });
page.current = currentPage - 1 page.current = currentPage - 1
}} }}
/> />
@ -118,16 +144,20 @@ const HighQuarter = (props) => {
</div> </div>
</div> </div>
</div> </div>
{
downloadUrl ? <iframe key={downloadKey} src={downloadUrl} style={{ display: 'none' }} /> : ''
}
</div> </div>
</> </>
) )
} }
function mapStateToProps(state) { function mapStateToProps(state) {
const { auth, global } = state; const { auth, global, employeeAssessmentList } = state;
return { return {
user: auth.user, user: auth.user,
actions: global.actions, actions: global.actions,
employeeAssessmentList: employeeAssessmentList.data || {}
}; };
} }

75
web/client/src/sections/humanAffairs/containers/monthlyProcess.jsx
View File

@ -1,16 +1,28 @@
import React, { useEffect, useState, useMemo } from 'react'; import React, { useEffect, useState, useMemo } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { Table, Pagination, Skeleton, DatePicker } from '@douyinfe/semi-ui'; import { Table, Pagination, Skeleton, DatePicker,Button } from '@douyinfe/semi-ui';
import { SkeletonScreen } from "$components"; import { SkeletonScreen } from "$components";
import '../style.less' import '../style.less'
import moment from 'moment'
const MonthlyProcess = (props) => { const MonthlyProcess = (props) => {
const { dispatch, actions } = props const [year, setYear] = useState(null)
const [limits, setLimits] = useState()//每页实际条数 const [month, setMonth] = useState(null)
const { dispatch, actions, employeeAssessmentList } = props
const [query, setQuery] = useState({ limit: 10, page: 0 }); //页码信息 const [query, setQuery] = useState({ limit: 10, page: 0 }); //页码信息
const [tableData, setTableData] = useState([{ id: 1, year: '1月', statement: '中层月度测试12.xlsx' }, { id: 2, year: '2月', statement: '测试12.xlsx' }, { id: 3, year: '3月', statement: '测试12.xlsx' }, { id: 4, year: '4月', statement: '测试12.xlsx' }, { id: 5, year: '5月', statement: '测试12.xlsx' }, { id: 6, year: '6月', statement: '测试12.xlsx' }, { id: 7, year: '7月', statement: '测试12.xlsx' }, { id: 8, year: '8月', statement: '测试12.xlsx' }, { id: 9, year: '9月', statement: '测试12.xlsx' }, { id: 10, year: '10月', statement: '测试12.xlsx' }, { id: 11, year: '11月', statement: '测试12.xlsx' }, { id: 12, year: '12月', statement: '测试12.xlsx' }]); const { getemployeeAssessmentList } = actions.humanAffairs;
const [downloadUrl, setDownloadUrl] = useState(null);
const [downloadKey, setDownloadKey] = useState(null);
useEffect(() => {
getList()
}, [query])
function getList() {
dispatch(getemployeeAssessmentList(query, 2))
}
function exportReport(url){
setDownloadUrl(`/_file-server${url}`);
setDownloadKey(Math.random());
}
function handleRow(record, index) {// 给偶数行设置斑马纹 function handleRow(record, index) {// 给偶数行设置斑马纹
if (index % 2 === 0) { if (index % 2 === 0) {
return { return {
@ -31,14 +43,15 @@ const MonthlyProcess = (props) => {
render: (text, record, index) => index + 1 render: (text, record, index) => index + 1
}, { }, {
title: '月份', title: '月份',
dataIndex: 'year', dataIndex: 'yearMonth',
key: 'year', key: 'yearMonth',
width: 80 width: 80,
render: (text, record, index) => `${record.year}-${record.month}`
}, },
{ {
title: '报表', title: '报表',
dataIndex: 'statement', dataIndex: 'name',
key: 'statement', key: 'name',
width: 200, width: 200,
// render: (text, r, index) => { // render: (text, r, index) => {
@ -49,11 +62,24 @@ const MonthlyProcess = (props) => {
width: 120, width: 120,
render: (text, record) => { render: (text, record) => {
return <div> return <div>
<span style={{ color: '#1890FF', cursor: 'pointer' }}>下载</span> <span onClick={() => exportReport(record.path)} style={{ color: '#1890FF', cursor: 'pointer' }}>下载</span>
</div> </div>
} }
}]; }];
function getTime(date, dateString) {
if (date) {
setYear(moment(date).format('YYYY'))
setMonth(moment(date).format('MM'))
} else {
setYear(null)
setMonth(null)
}
}
function search() {
let query = { limit: 10, page: 0, year: year, month: month }
setQuery(query)
}
const scroll = useMemo(() => ({}), []); const scroll = useMemo(() => ({}), []);
return ( return (
<> <>
@ -61,20 +87,21 @@ const MonthlyProcess = (props) => {
<div style={{ display: 'flex' }}> <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 }}>绩效考核</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, margin: '0px 8px' }}>/</div>
<div style={{ color: 'rgba(0,0,0,0.45)', fontSize: 14 }}>中层考核</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, margin: '0px 8px' }}>/</div>
<div style={{ color: '#033C9A', fontSize: 14 }}>月度过程考核</div> <div style={{ color: '#033C9A', fontSize: 14 }}>正式员工考核</div>
</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={{ 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: 'center', justifyContent: 'space-between' }}>
<div style={{ display: 'flex', alignItems: 'baseline' }}> <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={{ 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={{ fontFamily: "YouSheBiaoTiHei", fontSize: 24, color: '#033C9A', marginLeft: 8 }}>正式员工考核</div>
<div style={{ marginLeft: 6, fontSize: 12, color: '#969799', fontFamily: "DINExp", }}>Monthly process assessment</div> <div style={{ marginLeft: 6, fontSize: 12, color: '#969799', fontFamily: "DINExp", }}>FORMAL EMPLOYEE ASSESSMENT</div>
</div> </div>
</div> </div>
<div style={{ width: '100%', height: '35px', lineHeight: '35px', marginTop: '20px' }}> <div style={{ width: '100%', height: '35px', lineHeight: '35px', marginTop: '20px' }}>
查询时间：<DatePicker defaultValue={new Date()} type="month" style={{ width: 200 }} /> 查询时间：<DatePicker type="month" style={{ width: 200 }} onChange={getTime} />
<Button onClick={search} theme='solid' type='primary' style={{ marginLeft: 15 }}>查询</Button>
</div> </div>
<div style={{ marginTop: 20 }}> <div style={{ marginTop: 20 }}>
<Skeleton <Skeleton
@ -85,7 +112,7 @@ const MonthlyProcess = (props) => {
> >
<Table <Table
columns={columns} columns={columns}
dataSource={tableData} dataSource={employeeAssessmentList.rows}
bordered={false} bordered={false}
empty="暂无数据" empty="暂无数据"
pagination={false} pagination={false}
@ -101,15 +128,15 @@ const MonthlyProcess = (props) => {
<div></div> <div></div>
<div style={{ display: 'flex', }}> <div style={{ display: 'flex', }}>
<span style={{ lineHeight: "30px", fontSize: 13, color: 'rgba(0,90,189,0.8)' }}> <span style={{ lineHeight: "30px", fontSize: 13, color: 'rgba(0,90,189,0.8)' }}>
共{limits}条信息 共{employeeAssessmentList.count}条信息
</span> </span>
<Pagination <Pagination
total={limits} total={employeeAssessmentList.count}
showSizeChanger showSizeChanger
currentPage={query.page + 1} currentPage={query.page + 1}
pageSizeOpts={[10, 20, 30, 40]} pageSizeOpts={[10, 20, 30, 40]}
onChange={(currentPage, pageSize) => { onChange={(currentPage, pageSize) => {
setQuery({ limit: pageSize, page: currentPage - 1 }); setQuery({ limit: pageSize, page: currentPage - 1, year: year, month: month });
page.current = currentPage - 1 page.current = currentPage - 1
}} }}
/> />
@ -117,16 +144,20 @@ const MonthlyProcess = (props) => {
</div> </div>
</div> </div>
</div> </div>
{
downloadUrl ? <iframe key={downloadKey} src={downloadUrl} style={{ display: 'none' }} /> : ''
}
</div> </div>
</> </>
) )
} }
function mapStateToProps(state) { function mapStateToProps(state) {
const { auth, global } = state; const { auth, global, employeeAssessmentList } = state;
return { return {
user: auth.user, user: auth.user,
actions: global.actions, actions: global.actions,
employeeAssessmentList: employeeAssessmentList.data || {}
}; };
} }

76
web/client/src/sections/humanAffairs/containers/quarter.jsx
View File

@ -1,16 +1,28 @@
import React, { useEffect, useState, useMemo } from 'react'; import React, { useEffect, useState, useMemo } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { Table, Pagination, Skeleton, DatePicker } from '@douyinfe/semi-ui'; import { Table, Pagination, Skeleton, DatePicker,Button } from '@douyinfe/semi-ui';
import { SkeletonScreen } from "$components"; import { SkeletonScreen } from "$components";
import '../style.less' import '../style.less'
import moment from 'moment'
const Quarter = (props) => { const Quarter = (props) => {
const { dispatch, actions } = props const [year, setYear] = useState(null)
const [limits, setLimits] = useState()//每页实际条数 const [month, setMonth] = useState(null)
const { dispatch, actions, employeeAssessmentList } = props
const [query, setQuery] = useState({ limit: 10, page: 0 }); //页码信息 const [query, setQuery] = useState({ limit: 10, page: 0 }); //页码信息
const [tableData, setTableData] = useState([{ id: 1, year: '1月', statement: '中层季度测试12.xlsx' }, { id: 2, year: '2月', statement: '测试12.xlsx' }, { id: 3, year: '3月', statement: '测试12.xlsx' }, { id: 4, year: '4月', statement: '测试12.xlsx' }, { id: 5, year: '5月', statement: '测试12.xlsx' }, { id: 6, year: '6月', statement: '测试12.xlsx' }, { id: 7, year: '7月', statement: '测试12.xlsx' }, { id: 8, year: '8月', statement: '测试12.xlsx' }, { id: 9, year: '9月', statement: '测试12.xlsx' }, { id: 10, year: '10月', statement: '测试12.xlsx' }, { id: 11, year: '11月', statement: '测试12.xlsx' }, { id: 12, year: '12月', statement: '测试12.xlsx' }]); const { getemployeeAssessmentList } = actions.humanAffairs;
const [downloadUrl, setDownloadUrl] = useState(null);
const [downloadKey, setDownloadKey] = useState(null);
useEffect(() => {
getList()
}, [query])
function getList() {
dispatch(getemployeeAssessmentList(query, 3))
}
function exportReport(url){
setDownloadUrl(`/_file-server${url}`);
setDownloadKey(Math.random());
}
function handleRow(record, index) {// 给偶数行设置斑马纹 function handleRow(record, index) {// 给偶数行设置斑马纹
if (index % 2 === 0) { if (index % 2 === 0) {
return { return {
@ -31,14 +43,15 @@ const Quarter = (props) => {
render: (text, record, index) => index + 1 render: (text, record, index) => index + 1
}, { }, {
title: '月份', title: '月份',
dataIndex: 'year', dataIndex: 'yearMonth',
key: 'year', key: 'yearMonth',
width: 80 width: 80,
render: (text, record, index) => `${record.year}-${record.month}`
}, },
{ {
title: '报表', title: '报表',
dataIndex: 'statement', dataIndex: 'name',
key: 'statement', key: 'name',
width: 200, width: 200,
// render: (text, r, index) => { // render: (text, r, index) => {
@ -49,11 +62,24 @@ const Quarter = (props) => {
width: 120, width: 120,
render: (text, record) => { render: (text, record) => {
return <div> return <div>
<span style={{ color: '#1890FF', cursor: 'pointer' }}>下载</span> <span onClick={() => exportReport(record.path)} style={{ color: '#1890FF', cursor: 'pointer' }}>下载</span>
</div> </div>
} }
}]; }];
function getTime(date, dateString) {
if (date) {
setYear(moment(date).format('YYYY'))
setMonth(moment(date).format('MM'))
} else {
setYear(null)
setMonth(null)
}
}
function search() {
let query = { limit: 10, page: 0, year: year, month: month }
setQuery(query)
}
const scroll = useMemo(() => ({}), []); const scroll = useMemo(() => ({}), []);
return ( return (
<> <>
@ -61,20 +87,21 @@ const Quarter = (props) => {
<div style={{ display: 'flex' }}> <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 }}>绩效考核</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, margin: '0px 8px' }}>/</div>
<div style={{ color: 'rgba(0,0,0,0.45)', fontSize: 14 }}>中层考核</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, margin: '0px 8px' }}>/</div>
<div style={{ color: '#033C9A', fontSize: 14 }}>季度考核</div> <div style={{ color: '#033C9A', fontSize: 14 }}>正式员工考核</div>
</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={{ 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: 'center', justifyContent: 'space-between' }}>
<div style={{ display: 'flex', alignItems: 'baseline' }}> <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={{ 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={{ fontFamily: "YouSheBiaoTiHei", fontSize: 24, color: '#033C9A', marginLeft: 8 }}>正式员工考核</div>
<div style={{ marginLeft: 6, fontSize: 12, color: '#969799', fontFamily: "DINExp", }}>QUARTERLY ASSESSMENT</div> <div style={{ marginLeft: 6, fontSize: 12, color: '#969799', fontFamily: "DINExp", }}>FORMAL EMPLOYEE ASSESSMENT</div>
</div> </div>
</div> </div>
<div style={{ width: '100%', height: '35px', lineHeight: '35px', marginTop: '20px' }}> <div style={{ width: '100%', height: '35px', lineHeight: '35px', marginTop: '20px' }}>
查询时间：<DatePicker defaultValue={new Date()} type="month" style={{ width: 200 }} /> 查询时间：<DatePicker type="month" style={{ width: 200 }} onChange={getTime} />
<Button onClick={search} theme='solid' type='primary' style={{ marginLeft: 15 }}>查询</Button>
</div> </div>
<div style={{ marginTop: 20 }}> <div style={{ marginTop: 20 }}>
<Skeleton <Skeleton
@ -85,7 +112,7 @@ const Quarter = (props) => {
> >
<Table <Table
columns={columns} columns={columns}
dataSource={tableData} dataSource={employeeAssessmentList.rows}
bordered={false} bordered={false}
empty="暂无数据" empty="暂无数据"
pagination={false} pagination={false}
@ -101,15 +128,15 @@ const Quarter = (props) => {
<div></div> <div></div>
<div style={{ display: 'flex', }}> <div style={{ display: 'flex', }}>
<span style={{ lineHeight: "30px", fontSize: 13, color: 'rgba(0,90,189,0.8)' }}> <span style={{ lineHeight: "30px", fontSize: 13, color: 'rgba(0,90,189,0.8)' }}>
共{limits}条信息 共{employeeAssessmentList.count}条信息
</span> </span>
<Pagination <Pagination
total={limits} total={employeeAssessmentList.count}
showSizeChanger showSizeChanger
currentPage={query.page + 1} currentPage={query.page + 1}
pageSizeOpts={[10, 20, 30, 40]} pageSizeOpts={[10, 20, 30, 40]}
onChange={(currentPage, pageSize) => { onChange={(currentPage, pageSize) => {
setQuery({ limit: pageSize, page: currentPage - 1 }); setQuery({ limit: pageSize, page: currentPage - 1, year: year, month: month });
page.current = currentPage - 1 page.current = currentPage - 1
}} }}
/> />
@ -117,17 +144,22 @@ const Quarter = (props) => {
</div> </div>
</div> </div>
</div> </div>
{
downloadUrl ? <iframe key={downloadKey} src={downloadUrl} style={{ display: 'none' }} /> : ''
}
</div> </div>
</> </>
) )
} }
function mapStateToProps(state) { function mapStateToProps(state) {
const { auth, global } = state; const { auth, global, employeeAssessmentList } = state;
return { return {
user: auth.user, user: auth.user,
actions: global.actions, actions: global.actions,
employeeAssessmentList: employeeAssessmentList.data || {}
}; };
} }
export default connect(mapStateToProps)(Quarter); export default connect(mapStateToProps)(Quarter);

60
web/client/src/sections/humanAffairs/containers/regularKPI.jsx
View File

@ -1,23 +1,28 @@
import React, { useEffect, useState, useMemo } from 'react'; import React, { useEffect, useState, useMemo } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { Table, Pagination, Skeleton, DatePicker } from '@douyinfe/semi-ui'; import { Table, Pagination, Skeleton, DatePicker, Button } from '@douyinfe/semi-ui';
import { SkeletonScreen } from "$components"; import { SkeletonScreen } from "$components";
import moment from 'moment'
import '../style.less' import '../style.less'
const RegularKPI = (props) => { const RegularKPI = (props) => {
const { dispatch, actions,employeeAssessmentList } = props const [year, setYear] = useState(null)
const [limits, setLimits] = useState()//每页实际条数 const [month, setMonth] = useState(null)
const { dispatch, actions, employeeAssessmentList } = props
const [query, setQuery] = useState({ limit: 10, page: 0 }); //页码信息 const [query, setQuery] = useState({ limit: 10, page: 0 }); //页码信息
const { getemployeeAssessmentList } = actions.humanAffairs; const { getemployeeAssessmentList } = actions.humanAffairs;
const [downloadUrl, setDownloadUrl] = useState(null);
const [downloadKey, setDownloadKey] = useState(null);
useEffect(() => { useEffect(() => {
getList() getList()
}, [query]) }, [query])
function getList() { function getList() {
dispatch(getemployeeAssessmentList(query, 1)) dispatch(getemployeeAssessmentList(query, 1))
} }
const [tableData, setTableData] = useState([{ id: 1, year: '1月', statement: '正式员工测试12.xlsx' }, { id: 2, year: '2月', statement: '测试12.xlsx' }, { id: 3, year: '3月', statement: '测试12.xlsx' }, { id: 4, year: '4月', statement: '测试12.xlsx' }, { id: 5, year: '5月', statement: '测试12.xlsx' }, { id: 6, year: '6月', statement: '测试12.xlsx' }, { id: 7, year: '7月', statement: '测试12.xlsx' }, { id: 8, year: '8月', statement: '测试12.xlsx' }, { id: 9, year: '9月', statement: '测试12.xlsx' }, { id: 10, year: '10月', statement: '测试12.xlsx' }, { id: 11, year: '11月', statement: '测试12.xlsx' }, { id: 12, year: '12月', statement: '测试12.xlsx' }]); function exportReport(url){
setDownloadUrl(`/_file-server${url}`);
setDownloadKey(Math.random());
}
function handleRow(record, index) {// 给偶数行设置斑马纹 function handleRow(record, index) {// 给偶数行设置斑马纹
if (index % 2 === 0) { if (index % 2 === 0) {
return { return {
@ -38,14 +43,15 @@ const RegularKPI = (props) => {
render: (text, record, index) => index + 1 render: (text, record, index) => index + 1
}, { }, {
title: '月份', title: '月份',
dataIndex: 'year', dataIndex: 'yearMonth',
key: 'year', key: 'yearMonth',
width: 80 width: 80,
render: (text, record, index) => `${record.year}-${record.month}`
}, },
{ {
title: '报表', title: '报表',
dataIndex: 'statement', dataIndex: 'name',
key: 'statement', key: 'name',
width: 200, width: 200,
// render: (text, r, index) => { // render: (text, r, index) => {
@ -56,13 +62,25 @@ const RegularKPI = (props) => {
width: 120, width: 120,
render: (text, record) => { render: (text, record) => {
return <div> return <div>
<span style={{ color: '#1890FF', cursor: 'pointer' }}>下载</span> <span onClick={() => exportReport(record.path)} style={{ color: '#1890FF', cursor: 'pointer' }}>下载</span>
</div> </div>
} }
}]; }];
function getTime(date, dateString) {
if (date) {
setYear(moment(date).format('YYYY'))
setMonth(moment(date).format('MM'))
} else {
setYear(null)
setMonth(null)
}
}
function search() {
let query = { limit: 10, page: 0, year: year, month: month }
setQuery(query)
}
const scroll = useMemo(() => ({}), []); const scroll = useMemo(() => ({}), []);
console.log(employeeAssessmentList, '---------------');
return ( return (
<> <>
<div style={{ padding: '0px 12px' }}> <div style={{ padding: '0px 12px' }}>
@ -82,7 +100,8 @@ const RegularKPI = (props) => {
</div> </div>
</div> </div>
<div style={{ width: '100%', height: '35px', lineHeight: '35px', marginTop: '20px' }}> <div style={{ width: '100%', height: '35px', lineHeight: '35px', marginTop: '20px' }}>
查询时间：<DatePicker defaultValue={new Date()} type="month" style={{ width: 200 }} /> 查询时间：<DatePicker type="month" style={{ width: 200 }} onChange={getTime} />
<Button onClick={search} theme='solid' type='primary' style={{ marginLeft: 15 }}>查询</Button>
</div> </div>
<div style={{ marginTop: 20 }}> <div style={{ marginTop: 20 }}>
<Skeleton <Skeleton
@ -93,7 +112,7 @@ const RegularKPI = (props) => {
> >
<Table <Table
columns={columns} columns={columns}
dataSource={tableData} dataSource={employeeAssessmentList.rows}
bordered={false} bordered={false}
empty="暂无数据" empty="暂无数据"
pagination={false} pagination={false}
@ -109,15 +128,15 @@ const RegularKPI = (props) => {
<div></div> <div></div>
<div style={{ display: 'flex', }}> <div style={{ display: 'flex', }}>
<span style={{ lineHeight: "30px", fontSize: 13, color: 'rgba(0,90,189,0.8)' }}> <span style={{ lineHeight: "30px", fontSize: 13, color: 'rgba(0,90,189,0.8)' }}>
共{limits}条信息 共{employeeAssessmentList.count}条信息
</span> </span>
<Pagination <Pagination
total={limits} total={employeeAssessmentList.count}
showSizeChanger showSizeChanger
currentPage={query.page + 1} currentPage={query.page + 1}
pageSizeOpts={[10, 20, 30, 40]} pageSizeOpts={[10, 20, 30, 40]}
onChange={(currentPage, pageSize) => { onChange={(currentPage, pageSize) => {
setQuery({ limit: pageSize, page: currentPage - 1 }); setQuery({ limit: pageSize, page: currentPage - 1, year: year, month: month });
page.current = currentPage - 1 page.current = currentPage - 1
}} }}
/> />
@ -125,6 +144,9 @@ const RegularKPI = (props) => {
</div> </div>
</div> </div>
</div> </div>
{
downloadUrl ? <iframe key={downloadKey} src={downloadUrl} style={{ display: 'none' }} /> : ''
}
</div> </div>
</> </>
) )
@ -135,7 +157,7 @@ function mapStateToProps(state) {
return { return {
user: auth.user, user: auth.user,
actions: global.actions, actions: global.actions,
employeeAssessmentList: employeeAssessmentList employeeAssessmentList: employeeAssessmentList.data || {}
}; };
} }

Write Preview
Loading…
Cancel
Save