分页逻辑调整

This commit is contained in:
MustangDeng 2022-04-24 17:52:38 +08:00
parent 82b6c05819
commit c382c9ce53
18 changed files with 185 additions and 91 deletions

View File

@ -63,7 +63,7 @@ export default class CalculateDetail extends React.Component {
return (
<div style={{display: "inline-block"}}>
<Button type="primary" style={{marginRight: "10px"}} onClick={() => this.handleAccount()}>核算</Button>
<Button type="default" style={{marginRight: "10px"}} onClick={() => this.setState({stepSlideVisible: true})}>校验</Button>
{/* <Button type="default" style={{marginRight: "10px"}} onClick={() => this.setState({stepSlideVisible: true})}>校验</Button> */}
<Dropdown.Button style={{marginRight: "10px"}} overlay={menu}>更多</Dropdown.Button>
<WeaInputSearch />
</div>

View File

@ -111,7 +111,7 @@ export default class SalaryDetail extends React.Component {
引用${baseSalarySobCycle.socialSecurityCycle}的福利台账数据`}
placement="topLeft"
/>
<span className="warningspan" onClick={() => {this.setState({visible: true})}}>校验异常0</span>
{/* <span className="warningspan" onClick={() => {this.setState({visible: true})}}>校验异常0</span> */}
</div>
<div className="tableWrapper">
<WeaTable dataSource={acctResultListDateSource} columns={this.getColumns()} />

View File

@ -6,7 +6,7 @@ import { WeaTableNew } from "comsMobx"
import { Button, Table, DatePicker, Row, Col, Menu, Dropdown, Switch } from 'antd';
import { WeaInputSearch, WeaSlideModal, WeaHelpfulTip, WeaCheckbox, WeaDatePicker, WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaSelect, WeaTable } from 'ecCom';
import moment from 'moment'
import { renderNoright, getSearchs } from '../../../util'; // 渲染form数据的方法因为多个页面都会使用所以抽的公共方法在util中
import CustomTab from '../../../components/customTab';
import ContentWrapper from '../../../components/contentWrapper';
@ -24,7 +24,9 @@ import TwoColContent from '../../../components/twoColContent'
import TipLabel from '../../../components/TipLabel'
import ItemMangeFormModal from './itemMangeFormModal'
const { MonthPicker } = DatePicker;
// const { MonthPicker } = DatePicker;
const { RangePicker } = DatePicker;
@inject('attendanceStore')
@ -45,8 +47,6 @@ export default class Attendance extends React.Component {
this.state = {
value: "",
selectedKey: "0",
startDate: "",
endDate: "",
modalParam: {},
modalVisiable: false,
selectItemVisible: false,
@ -108,7 +108,7 @@ export default class Attendance extends React.Component {
const { attendanceStore } = this.props;
const { loading, hasRight, form, condition, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd } = attendanceStore;
const { step, setStep, setSlideVisiable, slideVisiable, doBatchDelete, attendTableStore, fieldSettingAttendList, fieldSettingCustomList, setFieldSettingAttendList, setFieldSettingCustomList, searchFieldSettingList } = attendanceStore;
const { getAttendanceFieldSettingList, saveAttendanceFieldSetting, fieldDataSource, fieldTableStore, fieldPageInfo, attendanceDataSource, attendanceColumns} = attendanceStore
const { getAttendanceFieldSettingList, saveAttendanceFieldSetting, fieldDataSource, fieldTableStore, fieldPageInfo, attendanceDataSource, attendanceColumns, attendancePageInfo} = attendanceStore
const selectedRowKeys = toJS(tableStore.selectedRowKeys) || []; // tableStore 右侧选中数组
if (!hasRight && !loading) { // 无权限处理
@ -161,35 +161,19 @@ export default class Attendance extends React.Component {
const renderSearchOperationItem = () => {
return <div>
<Button type="primary" style={{ marginRight: '10px' }} onClick={() => { this.setState({ refereAttendFormVisible: true }) }}>引用</Button>
<Button type="default" onClick={() => { this.setState({ modalVisiable: true }) }}>导入</Button>
<Button type="default" onClick={() => { this.setState({ modalVisiable: true, step: 0 }) }}>导入</Button>
</div>
}
const renderLeftOperation = () => {
const { attendanceStore: {getAttendanceList}} = this.props;
return <MonthRange
label={"薪资所属月"}
onStartDateChange={(value) => {
this.setState({
startDate: value
})
this.listSearch = {
salaryYearMonth: [value, this.state.endDate]
}
getAttendanceList(this.listSearch)
}}
onEndDateChange={(value) => {
this.setState({
endDate: value
})
this.listSearch = {
salaryYearMonth: [this.state.startDate, value]
}
getAttendanceList(this.listSearch)
}}
/>
return <span style={{marginLeft: "20px"}}>薪资所属月: <RangePicker picker="month" format="yyyy-MM" onChange={(range) => {
this.listSearch = {
salaryYearMonth: range.map(item => moment(item).format("YYYY-MM"))
}
getAttendanceList(this.listSearch)
}}/></span>
}

View File

@ -28,6 +28,7 @@ export default class Declare extends React.Component {
startDate: moment(new Date()).format("YYYY-MM"),
endDate: moment(new Date()).format("YYYY-MM")
}
this.searchParams = {current: 1}
columns.map(item => {
if(item.dataIndex == "cz") {
item.render =(text, record) => {
@ -63,20 +64,21 @@ export default class Declare extends React.Component {
})
const { declareStore } = this.props;
const { getDeclareList } = declareStore
getDeclareList({
fromSalaryMonthStr: this.state.startDate,
endSalaryMonthStr: value
})
this.searchParams.fromSalaryMonthStr = this.state.startDate
this.searchParams.endSalaryMonthStr = value
getDeclareList(this.searchParams)
}
// 查询列表
handleSearch() {
const { declareStore } = this.props;
const { getDeclareList } = declareStore
getDeclareList({
this.searchParams = {
fromSalaryMonthStr: this.state.startDate,
endSalaryMonthStr: this.state.endDate
})
endSalaryMonthStr: this.state.endDate,
current: 1
}
getDeclareList(this.searchParams)
}
getColumns() {
@ -95,11 +97,16 @@ export default class Declare extends React.Component {
}
handleDataPageChange(value) {
}
render() {
const { declareStore } = this.props;
const { loading, hasRight, form, condition,
tableStore, showSearchAd, getTableDatas, doSearch,
setShowSearchAd, listDataSource, listColumns } = declareStore;
setShowSearchAd, listDataSource, listColumns, pageInfo } = declareStore;
if (!hasRight && !loading) { // 无权限处理
return renderNoright();
@ -171,7 +178,13 @@ export default class Declare extends React.Component {
renderRightOperation()
}
/>
<WeaTable columns={this.getColumns()} dataSource={listDataSource}/>
<WeaTable columns={this.getColumns()} dataSource={listDataSource}
pagination={{
onChange: (value) => {this.handleDataPageChange(value)},
total: pageInfo.total,
current: pageInfo.pageNum
}}
/>
</WeaTop>
</WeaRightMenu>
{

View File

@ -67,11 +67,11 @@ export const slideStep3Columns = [
dataIndex: 'formulaContent',
key: 'formulaContent'
},
{
title: "个税申请表对应字段",
dataIndex: 'taxDeclarationColumn',
key: 'taxDeclarationColumn',
}
// {
// title: "个税申请表对应字段",
// dataIndex: 'taxDeclarationColumn',
// key: 'taxDeclarationColumn',
// }
]
export const slideStep4Columns = [

View File

@ -216,7 +216,7 @@ export default class Ledger extends React.Component {
"关联人员",
"薪资项目",
"调薪记薪规则",
"校验规则",
// "校验规则",
]
const handleStep1Save = () => {
@ -305,14 +305,14 @@ export default class Ledger extends React.Component {
</div>
}
{
(currentStep == 2 || currentStep == 3) && <div>
currentStep == 2 && <div>
<Button type="default" onClick={() => {this.setState({stepSlideVisible: false})}}>完成跳过所有步骤</Button>
<Button type="default" style={{marginLeft: "10px"}} onClick={() => {prevStep()}}>上一步</Button>
<Button type="primary" style={{marginLeft: '10px'}} onClick={() => {handleStepSave()}}>保存并进入下一步</Button>
</div>
}
{
currentStep == 4 &&
currentStep == 3 &&
<div>
<Button type="default" style={{marginRight: "10px"}} onClick={() => {prevStep()}}>上一步</Button>
<Button type="primary" onClick={() => {handleStepSave()}}>完成</Button>
@ -336,9 +336,9 @@ export default class Ledger extends React.Component {
{
currentStep == 3 && <CalRulesForm />
}
{
{/* {
currentStep == 4 && <ValidRulesForm />
}
} */}
</div>
@ -357,7 +357,7 @@ export default class Ledger extends React.Component {
title={
<SlideModalTitle
subtitle={"编辑账套"}
tabs={[{title: '基础设置', key: 0}, {title: "关联人员", key: 1}, {title: "薪资项目", key: 2}, {title: '调薪计薪规则', key: 3}, {title: "校验规则", key: 4}]}
tabs={[{title: '基础设置', key: 0}, {title: "关联人员", key: 1}, {title: "薪资项目", key: 2}, {title: '调薪计薪规则', key: 3}]}
editable={true}
selectedTab={selectedTab}
onSave={() => this.handleEditSlideSave()}
@ -379,9 +379,9 @@ export default class Ledger extends React.Component {
{
selectedTab == 3 && <CalRulesForm edit={true}/>
}
{
{/* {
selectedTab == 4 && <ValidRulesForm edit={true}/>
}
} */}
</div>}
onClose={() => this.setState({editSlideVisible: false})}
showMask={true}

View File

@ -102,7 +102,7 @@ export default class CanMoveItem extends React.Component {
</span>
</div>
{
this.state.showContent && <Table rowSelection={rowSelection} dataSource={this.props.dataSource} columns={this.state.columns} pagination={false}/>
this.state.showContent && <WeaTable rowSelection={rowSelection} dataSource={this.props.dataSource} columns={this.state.columns} pagination={false}/>
}
{
this.state.addItemVisible && <AddSalaryItemModal

View File

@ -7,6 +7,10 @@ import moment from 'moment'
@inject('payrollStore')
@observer
export default class SalarySendList extends React.Component {
constructor(props) {
super(props)
this.searchParams = {}
}
componentWillMount() {
const { payrollStore: {getPayrollList} } = this.props;
@ -30,6 +34,12 @@ export default class SalarySendList extends React.Component {
}
// 页面跳转
handleDataPageChange(value) {
this.searchParams.current = value;
const { payrollStore: {getPayrollList} } = this.props;
getPayrollList(this.searchParams)
}
// 获取表头数据
getColumns() {
@ -91,10 +101,16 @@ export default class SalarySendList extends React.Component {
render() {
const { payrollStore } = this.props;
const { salarySendTableStore, salarySendDataSource } = payrollStore;
const { salarySendTableStore, salarySendDataSource, pageInfo } = payrollStore;
return (
<div>
<WeaTable columns={this.getColumns()} dataSource={salarySendDataSource}/>
<WeaTable columns={this.getColumns()} dataSource={salarySendDataSource}
pagination={{
onChange: (value) => {this.handleDataPageChange(value)},
total: pageInfo.total,
current: pageInfo.pageNum
}}
/>
</div>
)
}

View File

@ -1,7 +1,7 @@
import React from 'react'
import { Row, Col, Table, Modal, Icon, Button, Select, message } from 'antd'
const { Option } = Select
import { WeaInput, WeaSelect, WeaDatePicker } from "ecCom"
import { WeaInput, WeaSelect, WeaDatePicker, WeaTable } from "ecCom"
import { changeSalaryModalColumns, dataSource } from './columns'
import RequiredLabelTip from '../../components/requiredLabelTip'
import "./index.less"
@ -267,7 +267,7 @@ export default class ChangeSalaryModal extends React.Component {
<div className="tableWrapper">
{
this.state.inited && <Table rowSelection={rowSelection} dataSource={salaryArchiveItems} columns={this.getColumns()}/>
this.state.inited && <WeaTable rowSelection={rowSelection} dataSource={salaryArchiveItems} columns={this.getColumns()}/>
}
</div>
</div>

View File

@ -152,10 +152,17 @@ export default class SalaryFile extends React.Component {
})
}
// 页面跳转
handlePageChange = (value) => {
const { salaryFileStore: {getTableDatas, form}} = this.props;
form.updateFields({ current: value })
getTableDatas()
}
render() {
const { salaryFileStore } = this.props;
const { loading, hasRight, form, condition, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd } = salaryFileStore;
const { importType, previewColumns, previewDataSource, dataSource, currentId, editAgentVisible, setEditAgentVisible } = salaryFileStore;
const { importType, previewColumns, previewDataSource, dataSource, currentId, editAgentVisible, setEditAgentVisible, pageInfo } = salaryFileStore;
const { selectedTab, step, selectedRowKeys } = this.state;
if (!hasRight && !loading) { // 无权限处理
return renderNoright();
@ -291,6 +298,11 @@ export default class SalaryFile extends React.Component {
rowSelection={rowSelection}
columns={this.getColumns()}
dataSource={dataSource}
pagination={{
onChange: (value) => {this.handlePageChange(value)},
total: pageInfo.total,
current: pageInfo.pageNum
}}
/>
</WeaTop>
</WeaRightMenu>

View File

@ -1,5 +1,6 @@
import React from 'react';
import { Table } from 'antd'
import { WeaTable } from 'ecCom'
import { inject, observer } from 'mobx-react';
import ChangeSalaryModal from './changeSalaryModal'
@ -12,12 +13,13 @@ export default class SalaryItemChangeList extends React.Component {
changeSalaryVisible: false,
recordId: ""
}
this.searchParams = {}
}
componentWillMount() {
const { salaryFileStore: { fetchSingleSalaryItemList }, id} = this.props;
fetchSingleSalaryItemList({salaryArchiveId: this.props.id})
this.searchParams = {salaryArchiveId: this.props.id, current: 1}
fetchSingleSalaryItemList(this.searchParams)
}
handleEdit(record) {
@ -30,34 +32,47 @@ export default class SalaryItemChangeList extends React.Component {
})
}
// 获取Columns
getColumns() {
const { salaryFileStore: {singleSalaryItemList} } = this.props;
let columns = []
if(singleSalaryItemList.columns) {
columns = [...singleSalaryItemList.columns]
// 获取Columns
getColumns() {
const { salaryFileStore: {singleSalaryItemList} } = this.props;
let columns = []
if(singleSalaryItemList.columns) {
columns = [...singleSalaryItemList.columns]
}
if(columns.length > 0) {
columns.push({
title: '操作',
key: "cz",
dataIndex: "cz",
render: (text, record) => {
return (
<a onClick={() => {this.handleEdit(record)}}>编辑</a>
)
}
})
}
return columns
}
if(columns.length > 0) {
columns.push({
title: '操作',
key: "cz",
dataIndex: "cz",
render: (text, record) => {
return (
<a onClick={() => {this.handleEdit(record)}}>编辑</a>
)
}
})
// 页面跳转
handlePageChange(value) {
this.searchParams.current = value
const { salaryFileStore: {singleSalaryItemList} } = this.props;
singleSalaryItemList(this.searchParams)
}
return columns
}
render() {
const { salaryFileStore } = this.props;
const { singleSalaryItemList } = salaryFileStore
return (
<div>
<Table dataSource={singleSalaryItemList.list ? singleSalaryItemList.list: []} columns={this.getColumns()} />
<WeaTable dataSource={singleSalaryItemList.list ? singleSalaryItemList.list: []} columns={this.getColumns()}
pagination={{
onChange: (value) => {this.handlePageChange(value)},
total: singleSalaryItemList.total,
current: singleSalaryItemList.pageNum
}}
/>
{
this.state.changeSalaryVisible && <ChangeSalaryModal
currentId={this.props.id}

View File

@ -1,6 +1,6 @@
import React from 'react'
import { dataSource, slideSalaryItemColumns } from "./columns"
import { WeaInputSearch } from 'ecCom'
import { WeaInputSearch, WeaTable } from 'ecCom'
import { Table } from 'antd'
import { inject, observer } from 'mobx-react';
import "./index.less"
@ -8,10 +8,22 @@ import "./index.less"
@inject('salaryFileStore')
@observer
export default class SlideSalaryItem extends React.Component {
constructor(props) {
super(props)
this.searchParam = {}
}
componentWillMount() {
const { salaryFileStore: {adjustRecordSalaryItemList}} = this.props;
adjustRecordSalaryItemList({})
}
// 切换
handlePageChange(value) {
this.searchParam.current = value;
const { salaryFileStore: {adjustRecordSalaryItemList}} = this.props;
adjustRecordSalaryItemList(this.searchParam)
}
render() {
const { salaryFileStore: {salaryItemList} } = this.props;
return (
@ -20,7 +32,14 @@ export default class SlideSalaryItem extends React.Component {
<WeaInputSearch className="inputSearch"/>
</div>
<div className="tableWrapper">
<Table dataSource={salaryItemList.list} columns={salaryItemList.columns ? salaryItemList.columns : []}/>
<WeaTable dataSource={salaryItemList.list}
columns={salaryItemList.columns ? salaryItemList.columns : []}
pagination={{
onChange: (value) => {this.handlePageChange(value)},
total: salaryItemList.total,
current: salaryItemList.pageNum
}}
/>
</div>
</div>
)

View File

@ -1,5 +1,6 @@
import React from 'react';
import { Table } from 'antd'
import { WeaTable } from 'ecCom'
import { inject, observer } from 'mobx-react';
import EditAgentModal from './editAgentModal'
@ -12,11 +13,13 @@ export default class TaxAgentChangeList extends React.Component {
recordId: '',
editAgentVisible: false
}
this.searchParams = {}
}
componentWillMount() {
const { salaryFileStore: { fetchSingleTaxAgentList }} = this.props;
fetchSingleTaxAgentList({salaryArchiveId: this.props.id})
this.searchParams = {salaryArchiveId: this.props.id, current: 1}
fetchSingleTaxAgentList(this.searchParams)
}
// 编辑回调
@ -50,12 +53,27 @@ export default class TaxAgentChangeList extends React.Component {
return columns
}
// 页面跳转
handlePageChange(value) {
this.searchParams.current = value
const { salaryFileStore: { fetchSingleTaxAgentList }} = this.props;
fetchSingleTaxAgentList(this.searchParams)
}
render() {
const { salaryFileStore } = this.props;
const { singleTaxAgentList } = salaryFileStore
return (
<div>
<Table dataSource={singleTaxAgentList.list ? singleTaxAgentList.list: []} columns={this.getColumns()} />
<WeaTable
dataSource={singleTaxAgentList.list ? singleTaxAgentList.list: []}
columns={this.getColumns()}
pagination={{
onChange: (value) => {this.handlePageChange(value)},
total: singleTaxAgentList.total,
current: singleTaxAgentList.pageNum
}}
/>
{
this.state.editAgentVisible && <EditAgentModal
currentId={this.props.id}

View File

@ -32,6 +32,7 @@ export default class SalaryItem extends React.Component {
searchValue: "",
formalModalVisible: false
}
this.searchParams = {}
columns.map(item => {
if(item.dataIndex == "refere") {
item.render = () => {
@ -115,13 +116,21 @@ export default class SalaryItem extends React.Component {
handleSearch(value) {
const { salaryItemStore: {getTableDatas}} = this.props;
getTableDatas({name: value})
this.searchParams = {name: value, current: 1}
getTableDatas(this.searchParams)
}
handlePageChnage(value) {
this.searchParams.current = value;
const { salaryItemStore: {getTableDatas}} = this.props;
getTableDatas(this.searchParams)
}
render() {
const { salaryItemStore } = this.props;
const { loading, hasRight, form, condition, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd } = salaryItemStore;
const { tableDataSource, tableColumns, systemItemVisible, setSystemItemVisible, deleteItemVisible, setDeleteItemVisible, deleteItemList, editSlideVisible, setEditSlideVisible, request } = salaryItemStore
const { tableDataSource, tableColumns, systemItemVisible, setSystemItemVisible, deleteItemVisible, setDeleteItemVisible, deleteItemList, editSlideVisible, setEditSlideVisible, request, pageInfo } = salaryItemStore
const { formalModalVisible} = this.state;
if (!hasRight && !loading) { // 无权限处理
return renderNoright();
@ -218,9 +227,6 @@ export default class SalaryItem extends React.Component {
setRequest(value)
}
return (
<div className="mySalaryBenefitsWrapper">
<WeaRightMenu
@ -252,6 +258,11 @@ export default class SalaryItem extends React.Component {
<WeaTable
dataSource={tableDataSource}
columns={this.getColumns(tableColumns)}
pagination={{
onChange: (value) => {this.handlePageChnage(value)},
total: pageInfo.total,
current: pageInfo.pageNum
}}
/>
</WeaTop>
@ -265,8 +276,6 @@ export default class SalaryItem extends React.Component {
deleteItemVisible && <DeleteSalaryItemModal visible={deleteItemVisible} onCancel={() => {setDeleteItemVisible(false)}}/>
}
{
editSlideVisible &&
<WeaSlideModal visible={editSlideVisible}

View File

@ -17,6 +17,7 @@ export class DeclareStore {
// 列表
@observable listDataSource = [];
@observable listColumns = [];
@observable pageInfo = {}
// 详情页
@observable declareInfo = {}; // 详情基本信息
@ -77,6 +78,7 @@ export class DeclareStore {
if(res.status) {
this.listDataSource = res.data.list ? res.data.list: [];
this.listColumns = res.data.columns
this.pageInfo = res.data
} else {
message.error(res.errormsg || '获取失败')
}

View File

@ -28,6 +28,7 @@ export class payrollStore {
// **** 工资单页面 ****
@observable salarySendTableStore = new TableStore(); // 工资单列表
@observable salarySendDataSource = [];
@observable pageInfo = {}
// **** 工资单详情页 ****
@observable salarySendDetailBaseInfo = {}; // 工资单详情基础信息
@ -322,6 +323,7 @@ export class payrollStore {
if(res.status) {
this.salarySendDataSource = res.data.datas
this.salarySendTableStore.getDatas(res.data.dataKey.datas)
this.pageInfo = res.data.pageInfo
} else {
message.error(res.errormsg || "获取失败");
}

View File

@ -21,6 +21,7 @@ export class salaryFileStore {
@observable previewDataSource = [];
@observable dataSource = [];
@observable detailForm= {}
@observable pageInfo = {}; // 分页数据
@observable salaryArchiveTaxAgentForm = {}
@observable salaryItemChangeForm = {}
@observable taxAgentList = []
@ -80,6 +81,7 @@ export class salaryFileStore {
item.key = item.id
return item;
})
this.pageInfo = res.data.pageInfo
} else {
message.error(res.errormsg || '接口调用失败!')
}

View File

@ -33,6 +33,7 @@ export class SalaryItemStore {
@observable tableDataSource = []; // 主列表
@observable tableColumns = []; // 主列表列
@observable pageInfo = {}; // 分页数据
// ** 公式 **
// 类型列表
@ -89,6 +90,7 @@ export class SalaryItemStore {
if (res.status) { // 接口请求成功/失败处理
this.tableDataSource = res.data.list
this.tableColumns = res.data.columns
this.pageInfo = res.data
// this.tableStore.getDatas(res.data.datas); // table 请求数据
} else {
message.error(res.errormsg || '接口调用失败!')