薪酬页面滚动的修改

This commit is contained in:
黎永顺 2023-02-13 10:41:40 +08:00
parent df12fae609
commit d77a3f5fca
35 changed files with 834 additions and 1096 deletions

View File

@ -8,6 +8,7 @@ import React, { Component } from "react";
import { WeaCheckbox, WeaDatePicker, WeaFormItem, WeaInput, WeaSearchGroup, WeaTop } from "ecCom";
import * as API from "../../apis/ruleconfig";
import { Button, message } from "antd";
import "./index.less";
const Input = (props) => {
const { label, value } = props;

View File

@ -0,0 +1,11 @@
.appConfigWrapper {
height: 100%;
display: flex;
flex-direction: column;
.wea-search-group {
flex: 1;
height: 100%;
overflow: auto;
}
}

View File

@ -1,7 +1,7 @@
import React from "react";
import { inject, observer } from "mobx-react";
import { Button, DatePicker, Dropdown, Menu, message, Modal, Tag } from "antd";
import { WeaInputSearch, WeaTop } from "ecCom";
import { WeaInputSearch, WeaNewScroll, WeaTop } from "ecCom";
import { renderNoright } from "../../util"; // 渲染form数据的方法因为多个页面都会使用所以抽的公共方法在util中
import CustomTab from "../../components/customTab";
import moment from "moment";
@ -400,26 +400,26 @@ export default class Calculate extends React.Component {
dropMenuDatas={rightMenu} // 下拉菜单(和页面的右键菜单相同)
dropMenuProps={{ collectParams }}>
{/* 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能 */}
<CustomTab
searchOperationItem={renderRightOperation()}
onChange={v => {
}}
/>
<CustomPaginationTable
loading={loading}
columns={this.getColumns()}
dataSource={salaryListDataSource}
total={salaryListPageInfo.total}
current={salaryListPageInfo.pageNum}
pageSize={this.pageInfo.pageSize}
onPageChange={value => {
this.handleDataPageChange(value);
}}
onShowSizeChange={(current, pageSize) => {
this.pageInfo = { current, pageSize };
this.handleShowSizeChange(this.pageInfo);
}}
/>
<CustomTab searchOperationItem={renderRightOperation()}/>
<div className="tableWrapper">
<WeaNewScroll height="100%">
<CustomPaginationTable
loading={loading}
columns={this.getColumns()}
dataSource={salaryListDataSource}
total={salaryListPageInfo.total}
current={salaryListPageInfo.pageNum}
pageSize={this.pageInfo.pageSize}
onPageChange={value => {
this.handleDataPageChange(value);
}}
onShowSizeChange={(current, pageSize) => {
this.pageInfo = { current, pageSize };
this.handleShowSizeChange(this.pageInfo);
}}
/>
</WeaNewScroll>
</div>
</WeaTop>
{/*归档进度条*/}
{

View File

@ -1,7 +1,7 @@
import React from "react";
import { inject, observer } from "mobx-react";
import { Button, Col, DatePicker, Dropdown, Menu, message, Modal, Row, Switch } from "antd";
import { WeaDatePicker, WeaInputSearch, WeaSelect, WeaSlideModal, WeaTop } from "ecCom";
import { WeaDatePicker, WeaInputSearch, WeaNewScroll, WeaSelect, WeaSlideModal, WeaTop } from "ecCom";
import moment from "moment";
import { renderNoright } from "../../../util"; // 渲染form数据的方法因为多个页面都会使用所以抽的公共方法在util中
import CustomTab from "../../../components/customTab";
@ -698,7 +698,7 @@ export default class Attendance extends React.Component {
dropMenuDatas={rightMenu} // 下拉菜单(和页面的右键菜单相同)
dropMenuProps={{ collectParams }}>
{this.state.tabSelectedKey == 0
? <div>
? <div className="attendanceContent">
<CustomTab
topTab={topTab}
searchOperationItem={renderSearchOperationItem()}
@ -712,25 +712,28 @@ export default class Attendance extends React.Component {
onChange={v => {
}}
/>
<CustomPaginationTable
loading={loading}
columns={this.getColumns(attendanceColumns)}
dataSource={attendanceDataSource}
total={attendancePageInfo.total}
current={attendancePageInfo.pageNum}
pageSize={this.pageInfo.pageSize}
onPageChange={value => {
this.pageInfo.current = value;
this.handleDataPageChange(value);
}}
onShowSizeChange={(current, pageSize) => {
this.pageInfo = { current, pageSize };
this.handleDataShowSizeChange(this.pageInfo);
}}
/>
<div className="tableWrapper">
<WeaNewScroll height="100%">
<CustomPaginationTable
loading={loading}
columns={this.getColumns(attendanceColumns)}
dataSource={attendanceDataSource}
total={attendancePageInfo.total}
current={attendancePageInfo.pageNum}
pageSize={this.pageInfo.pageSize}
onPageChange={value => {
this.pageInfo.current = value;
this.handleDataPageChange(value);
}}
onShowSizeChange={(current, pageSize) => {
this.pageInfo = { current, pageSize };
this.handleDataShowSizeChange(this.pageInfo);
}}
/>
</WeaNewScroll>
</div>
</div>
: <div>
: <div className="attendanceContent">
<CustomTab
topTab={topTab}
searchOperationItem={renderRightOperation()}
@ -744,24 +747,28 @@ export default class Attendance extends React.Component {
/>
<TwoColContent
leftContent={
<CustomPaginationTable
loading={loading}
dataSource={fieldDataSource}
columns={getFieldColumns(
fieldTableStore.columns ? fieldTableStore.columns : []
)}
total={fieldPageInfo.total}
current={fieldPageInfo.pageNum}
pageSize={this.pageInfo.pageSize}
onPageChange={value => {
this.pageInfo.current = value;
this.handleFieldPageChange(value);
}}
onShowSizeChange={(current, pageSize) => {
this.pageInfo = { current, pageSize };
this.handleFieldShowSizeChange(this.pageInfo);
}}
/>
<div className="tableWrapper">
<WeaNewScroll height="100%">
<CustomPaginationTable
loading={loading}
dataSource={fieldDataSource}
columns={getFieldColumns(
fieldTableStore.columns ? fieldTableStore.columns : []
)}
total={fieldPageInfo.total}
current={fieldPageInfo.pageNum}
pageSize={this.pageInfo.pageSize}
onPageChange={value => {
this.pageInfo.current = value;
this.handleFieldPageChange(value);
}}
onShowSizeChange={(current, pageSize) => {
this.pageInfo = { current, pageSize };
this.handleFieldShowSizeChange(this.pageInfo);
}}
/>
</WeaNewScroll>
</div>
}
rightContent={
<TipLabel

View File

@ -2,7 +2,7 @@ import React from "react";
import { inject, observer } from "mobx-react";
import { toJS } from "mobx";
import { Button, Col, Dropdown, Menu, message, Modal, Popover, Row } from "antd";
import { WeaDatePicker, WeaHelpfulTip, WeaSelect, WeaSlideModal, WeaTab, WeaTable, WeaTop } from "ecCom";
import { WeaDatePicker, WeaHelpfulTip, WeaSelect, WeaSlideModal, WeaTab, WeaTable, WeaTop, WeaNewScroll } from "ecCom";
import moment from "moment";
import { getSearchs, renderLoading } from "../../../util"; // 渲染form数据的方法因为多个页面都会使用所以抽的公共方法在util中
import ImportModal from "../../../components/importModal";
@ -14,7 +14,6 @@ import AddItems from "../addItems";
import * as API from "../../../apis/cumDeduct";
import "./index.less";
@inject("cumDeductStore", "taxAgentStore")
@observer
export default class CumDeduct extends React.Component {
@ -731,15 +730,19 @@ export default class CumDeduct extends React.Component {
searchsBaseValue={form.getFormParams().username} // 外部input搜索值受控: 这里和高级搜索的requestname同步
/>
</div>
<WeaTable
rowKey="id"
rowSelection={rowSelection}
columns={newColumns}
dataSource={dataSource}
pagination={pagination}
loading={loading}
scroll={{ x: 1300 }}
/>
<div className="tableWrapper">
<WeaNewScroll height="100%">
<WeaTable
rowKey="id"
rowSelection={rowSelection}
columns={newColumns}
dataSource={dataSource}
pagination={pagination}
loading={loading}
scroll={{ x: 1300 }}
/>
</WeaNewScroll>
</div>
</WeaTop>
{modalVisiable && (
<ImportModal

View File

@ -1,4 +1,15 @@
.cumDeductWrapper {
.cumDeductWrapper, .payrollDistributionWrapper {
.wea-new-top-content {
display: flex;
flex-direction: column;
overflow: hidden;
.tableWrapper {
flex: 1;
overflow: hidden;
}
}
.weaTabWrapper {
position: relative;

View File

@ -2,7 +2,7 @@ import React from "react";
import { inject, observer } from "mobx-react";
import { toJS } from "mobx";
import { Button, Col, Dropdown, Menu, message, Modal, Popover, Row } from "antd";
import { WeaDatePicker, WeaHelpfulTip, WeaSelect, WeaSlideModal, WeaTab, WeaTable, WeaTop } from "ecCom";
import { WeaDatePicker, WeaHelpfulTip, WeaNewScroll, WeaSelect, WeaSlideModal, WeaTab, WeaTable, WeaTop } from "ecCom";
import moment from "moment";
import { getSearchs, renderLoading } from "../../../util"; // 渲染form数据的方法因为多个页面都会使用所以抽的公共方法在util中
import ImportModal from "../../../components/importModal";
@ -580,7 +580,7 @@ export default class CumSituation extends React.Component {
getTableDatas({
current,
pageSize,
taxYearMonth: this.state.monthValue + '-' + this.state.taxYearMonth,
taxYearMonth: this.state.monthValue + "-" + this.state.taxYearMonth,
taxAgentId: taxAgentId === "All" ? "" : taxAgentId,
year: monthValue
});
@ -590,7 +590,7 @@ export default class CumSituation extends React.Component {
getTableDatas({
current,
pageSize: pageObj.pageSize,
taxYearMonth: this.state.monthValue + '-' + this.state.taxYearMonth,
taxYearMonth: this.state.monthValue + "-" + this.state.taxYearMonth,
taxAgentId: taxAgentId === "All" ? "" : taxAgentId,
year: monthValue
});
@ -674,15 +674,19 @@ export default class CumSituation extends React.Component {
searchsBaseValue={form.getFormParams().username} // 外部input搜索值受控: 这里和高级搜索的requestname同步
/>
</div>
<WeaTable
rowKey="id"
rowSelection={rowSelection}
columns={newColumns}
dataSource={dataSource}
pagination={pagination}
loading={loading}
scroll={{ x: 1300 }}
/>
<div className="tableWrapper">
<WeaNewScroll height="100%">
<WeaTable
rowKey="id"
rowSelection={rowSelection}
columns={newColumns}
dataSource={dataSource}
pagination={pagination}
loading={loading}
scroll={{ x: 1300 }}
/>
</WeaNewScroll>
</div>
</WeaTop>
{modalVisiable &&
<ImportModal

View File

@ -2,7 +2,7 @@ import React from "react";
import { inject, observer } from "mobx-react";
import { toJS } from "mobx";
import { Button, Col, Dropdown, Menu, message, Modal, Popover, Row } from "antd";
import { WeaDatePicker, WeaHelpfulTip, WeaSelect, WeaSlideModal, WeaTab, WeaTable, WeaTop } from "ecCom";
import { WeaDatePicker, WeaHelpfulTip, WeaSelect, WeaSlideModal, WeaTab, WeaTable, WeaTop, WeaNewScroll } from "ecCom";
import moment from "moment";
import { getSearchs, renderLoading } from "../../../util"; // 渲染form数据的方法因为多个页面都会使用所以抽的公共方法在util中
import ImportModal from "../../../components/importModal";
@ -14,7 +14,6 @@ import { optionAddAll } from "../../../util/options";
import * as API from "../../../apis/otherDeduct";
import "./index.less";
@inject("otherDeductStore", "taxAgentStore")
@observer
export default class OtherDeduct extends React.Component {
@ -238,7 +237,7 @@ export default class OtherDeduct extends React.Component {
if (taxAgentId != null && taxAgentId !== "" && taxAgentId !== "All") {
params.taxAgentId = taxAgentId;
}
getTableDatas({...params, current: 1});
getTableDatas({ ...params, current: 1 });
};
//新功能
@ -712,14 +711,18 @@ export default class OtherDeduct extends React.Component {
searchsBaseValue={form.getFormParams().username} // 外部input搜索值受控: 这里和高级搜索的requestname同步
/>
</div>
<WeaTable
rowKey="id"
rowSelection={rowSelection}
columns={newColumns}
dataSource={dataSource}
pagination={pagination}
loading={loading}
/>
<div className="tableWrapper">
<WeaNewScroll height="100%">
<WeaTable
rowKey="id"
rowSelection={rowSelection}
columns={newColumns}
dataSource={dataSource}
pagination={pagination}
loading={loading}
/>
</WeaNewScroll>
</div>
</WeaTop>
{modalVisiable &&
<ImportModal

View File

@ -1,4 +1,15 @@
.cumDeductWrapper {
.wea-new-top-content {
display: flex;
flex-direction: column;
overflow: hidden;
.tableWrapper {
flex: 1;
overflow: hidden;
}
}
.linkWapper {
a {
color: #4d7ad8;
@ -15,6 +26,27 @@
}
}
.mySalaryBenefitsWrapper {
.wea-new-top-content {
& > div.attendanceContent {
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
.tableWrapper {
flex: 1;
overflow: hidden;
}
}
.ant-row, .ant-col-18, .tableWrapper {
height: 100%;
overflow: hidden;
}
}
}
.moreIconWrapper {
.ant-popover-inner {
min-width: 106px

View File

@ -1,7 +1,7 @@
import React, { Component } from "react";
import { inject, observer } from "mobx-react";
import { Button, Col, Dropdown, Menu, message, Modal, Popover, Row } from "antd";
import { WeaPopoverHrm, WeaSelect, WeaSlideModal, WeaTab, WeaTable, WeaTools, WeaTop } from "ecCom";
import { WeaPopoverHrm, WeaSelect, WeaSlideModal, WeaTab, WeaTable, WeaTools, WeaTop, WeaNewScroll } from "ecCom";
import InlineForm from "./components/inlineForm";
import { getSearchs, renderLoading } from "../../../util";
import * as API from "../../../apis/special";
@ -524,14 +524,18 @@ class SpecialAddDeduction extends Component {
searchsAd={this.getSearchsAdQuick(true)}
setShowSearchAd={bool => this.setState({ advanceParams: { ...advanceParams, visible: bool } })}
/>
<WeaTable
rowKey="id"
rowSelection={rowSelection}
columns={columns}
dataSource={dataSource}
pagination={pagination}
loading={loading.query}
/>
<div className="tableWrapper">
<WeaNewScroll height="100%">
<WeaTable
rowKey="id"
rowSelection={rowSelection}
columns={columns}
dataSource={dataSource}
pagination={pagination}
loading={loading.query}
/>
</WeaNewScroll>
</div>
<WeaSlideModal
className="specialAddSlideWrapper"
{...drawerParams}

View File

@ -6,6 +6,12 @@
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
.tableWrapper {
flex: 1;
overflow: hidden;
}
.wea-tab-search-ad-quick {
.wea-tab-left {

View File

@ -35,253 +35,3 @@ export const columns = [
key: 'cz',
}
]
export const declarationColumns = [
{
title: "序号",
dataIndex: 'title',
key: 'title',
},
{
title: "姓名",
dataIndex: 'title',
key: 'title',
},
{
title: "身份证件类型",
dataIndex: 'title',
key: 'title',
},
{
title: "身份证件号码",
dataIndex: 'title',
key: 'title',
},
{
title: "纳税人识别号",
dataIndex: 'title',
key: 'title',
},
{
title: "是否为非居民个人",
dataIndex: 'title',
key: 'title',
},
{
title: "所得项目",
dataIndex: 'title',
key: 'title',
},
{
title: "本月(次)情况",
children: [
{
title: "收入额计算",
children: [
{
title: "收入",
dataIndex: 'title',
key: 'title',
},
{
title: "费用",
dataIndex: 'title',
key: 'title',
},
{
title: "免税收入",
dataIndex: 'title',
key: 'title',
},
]
},
{
title: '减除费用',
dataIndex: 'title',
key: 'title'
},
{
title: "专项扣除",
children: [
{
title: "基本养老保险费",
dataIndex: 'title',
key: 'title'
},
{
title: "基本医疗保险费",
dataIndex: 'title',
key: 'title'
},
{
title: "失业保险费",
dataIndex: 'title',
key: 'title'
},
{
title: "住房公积金",
dataIndex: 'title',
key: 'title'
}
]
},
{
title: "其他扣除",
children: [
{
title: "年金",
dataIndex: 'title',
key: 'title'
},
{
title: "商业健康保险",
dataIndex: 'title',
key: 'title'
},
{
title: "税延养老保险",
dataIndex: 'title',
key: 'title'
},
{
title: "财产原值",
dataIndex: "title",
key: "title"
},
{
title: "允许扣除的税费",
dataIndex: "title",
key: "title"
},
{
title: "其他",
dataIndex: "title",
key: "title"
}
]
},
{
title: "累计情况(工资、薪金)",
children: [
{
title: "累计收入额",
dataIndex: "title",
key: "title"
},
{
title: "累计减除费用",
dataIndex: "title",
key: "title"
},
{
title: "累计专项扣除",
dataIndex: "title",
key: "title"
},
{
title: "累计专项附加扣除",
children: [
{
title: "子女教育",
dataIndex: "title",
key: "title"
},
{
title: "赡养老人",
dataIndex: "title",
key: "title"
},
{
title: "住房贷款利息",
dataIndex: "title",
key: "title"
},
{
title: "住房租金",
dataIndex: "title",
key: "title"
},
{
title: "继续教育",
dataIndex: "title",
key: "title"
}
]
},
{
title: "累计其他扣除",
dataIndex: "title",
key: "title"
}
]
}
]
},
{
title: "减按计税比例",
dataIndex: "title",
key: "title"
},
{
title: "准予扣除的捐赠额",
dataIndex: "title",
key: "title"
},
{
title: '税款计算',
children: [
{
title: "应纳税所得额",
dataIndex: "title",
key: "title"
},
{
title: "税率/预扣率",
dataIndex: "title",
key: "title"
},
{
title: "速算扣除数",
dataIndex: "title",
key: "title"
},
{
title: "应纳税额",
dataIndex: "title",
key: "title"
},
{
title: "减免税额",
dataIndex: "title",
key: "title"
},
{
title: "已扣缴税额",
dataIndex: "title",
key: "title"
},
{
title: "应补(退)税额",
dataIndex: "title",
key: "title"
},
{
title: "备注",
dataIndex: "title",
key: "title"
}
]
}
]
export const dataSource = [
{
title: "测试"
}
];

View File

@ -11,15 +11,14 @@ export default class GenerateModal extends React.Component {
super(props);
this.state = {
date: "",
taxAgentId: ""
taxAgentId: "",
loading: false
};
}
// 生成申报表
handleGenerate() {
const {
declareStore: { saveDeclare }
} = this.props;
handleGenerate = () => {
const { declareStore: { saveDeclare } } = this.props;
const { date, taxAgentId } = this.state;
if (_.isEmpty(date) && _.isEmpty(taxAgentId)) {
this.refs.weaError.showError();
@ -36,16 +35,18 @@ export default class GenerateModal extends React.Component {
this.refs.weaError1.showError();
return;
}
this.setState({ loading: true });
saveDeclare({ salaryMonthStr: date, taxAgentId }).then(() => {
this.setState({ loading: false });
this.props.onGenerate();
}).catch(() => {
this.setState({ loading: false });
});
}
};
render() {
const {
taxAgentStore: { taxAgentAdminOption },
declareStore: { loading }
} = this.props;
const { taxAgentStore: { taxAgentAdminOption } } = this.props;
const { loading } = this.state;
return (
<WeaDialog
visible={this.props.visible}
@ -67,9 +68,7 @@ export default class GenerateModal extends React.Component {
[<Button
type="primary"
loading={loading}
onClick={() => {
this.handleGenerate();
}}>
onClick={this.handleGenerate}>
生成申报表
</Button>]
}>

View File

@ -1,186 +1,81 @@
import React from "react";
import { inject, observer } from "mobx-react";
import { Button, DatePicker } from "antd";
import { WeaTop } from "ecCom";
import { renderNoright } from "../../util"; // 渲染form数据的方法因为多个页面都会使用所以抽的公共方法在util中
import { WeaNewScroll, WeaTop } from "ecCom";
import CustomTab from "../../components/customTab";
import CustomTable from "../../components/customTable";
import { columns } from "./columns";
import GenerateModal from "./generateModal";
import { getDeclareList } from "../../apis/declare";
import moment from "moment";
const { MonthPicker } = DatePicker;
@inject("declareStore", "taxAgentStore")
@inject("taxAgentStore")
@observer
export default class Declare extends React.Component {
constructor(props) {
super(props);
this.state = {
value: "",
selectedKey: "0",
declarationModalVisible: false,
startDate: moment(new Date()).startOf("year").format("YYYY-MM"),
endDate: moment(new Date())
.startOf("month")
.format("YYYY-MM")
};
this.searchParams = { current: 1 };
this.pageInfo = { current: 1, pageSize: 10 };
columns.map((item) => {
if (item.dataIndex == "cz") {
item.render = (text, record) => {
return (
<a
onClick={() => {
window.open(
"/spa/hrmSalary/static/index.html#/main/hrmSalary/generateDeclarationDetail?id=" +
record.id
);
}}>
查看
</a>
);
};
endDate: moment(new Date()).startOf("month").format("YYYY-MM"),
loading: false,
dataSource: [],
columns: [],
pageInfo: {
current: 1,
pageSize: 10,
total: 0
}
});
};
}
componentWillMount() {
const {
taxAgentStore: { getTaxAgentSelectListAsAdmin },
declareStore: { getDeclareList }
} = this.props;
this.searchParams = {
fromSalaryMonthStr: this.state.startDate,
endSalaryMonthStr: this.state.endDate,
current: 1
};
getDeclareList(this.searchParams);
const { taxAgentStore: { getTaxAgentSelectListAsAdmin } } = this.props;
this.getDeclareList();
getTaxAgentSelectListAsAdmin();
}
// 日期区间改变事件
handleRangePickerChange(type, value) {
const {
declareStore: { getDeclareList }
} = this.props;
this.setState({
[type]: value ? moment(value).format("YYYY-MM") : moment().format("YYYY-MM")
}, () => {
this.pageInfo.current = 1;
const { startDate: fromSalaryMonthStr, endDate: endSalaryMonthStr } = this.state;
getDeclareList({
fromSalaryMonthStr,
endSalaryMonthStr,
...this.pageInfo
});
});
}
// 查询列表
handleSearch() {
this.setState({ declarationModalVisible: false }, () => {
const { declareStore } = this.props;
const { getDeclareList } = declareStore;
this.searchParams = {
fromSalaryMonthStr: this.state.startDate,
endSalaryMonthStr: this.state.endDate,
current: 1
};
getDeclareList(this.searchParams);
});
}
getColumns() {
const {
declareStore: { listColumns }
} = this.props;
let columns = [...listColumns];
columns.push({
title: "操作",
dataIndex: "operate",
render: (text, record) => {
return (
<a
onClick={() => {
window.open(
"/spa/hrmSalary/static/index.html#/main/hrmSalary/generateDeclarationDetail?id=" +
record.id
);
}}>
查看
</a>
);
}
});
return columns;
}
handleDataPageChange(value) {
const {
declareStore: { getDeclareList }
} = this.props;
this.searchParams = {
fromSalaryMonthStr: this.state.startDate,
endSalaryMonthStr: this.state.endDate,
current: value
};
getDeclareList(this.searchParams);
}
handleShowSizeChange(pageInfo) {
const {
declareStore: { getDeclareList }
} = this.props;
this.searchParams = {
fromSalaryMonthStr: this.state.startDate,
endSalaryMonthStr: this.state.endDate,
getDeclareList = () => {
const { pageInfo, startDate: fromSalaryMonthStr, endDate: endSalaryMonthStr } = this.state;
const payload = {
fromSalaryMonthStr, endSalaryMonthStr,
...pageInfo
};
getDeclareList(this.searchParams);
}
this.setState({ loading: true });
getDeclareList(payload).then(({ status, data }) => {
this.setState({ loading: false });
if (status) {
const { columns, list: dataSource, total, pageNum: current, pageSize } = data;
this.setState({
columns, dataSource, total, current, pageSize
});
}
}).catch(() => this.setState({ loading: false }));
};
// 日期区间改变事件
handleRangePickerChange = (type, value) => {
this.setState({
[type]: value ? moment(value).format("YYYY-MM") : moment().format("YYYY-MM"),
pageInfo: { ...this.state.pageInfo, current: 1 }
}, () => {
this.getDeclareList();
});
};
handleSearch = () => {
this.setState({ declarationModalVisible: false }, () => this.getDeclareList());
};
handleDataPageChange = (current, pageSize = 10) => {
this.setState({
...this.state.pageInfo,
current,
pageSize
}, () => this.getDeclareList());
};
render() {
const { declareStore, taxAgentStore: { showOperateBtn } } = this.props;
const {
loading,
hasRight,
form,
condition,
tableStore,
showSearchAd,
getTableDatas,
doSearch,
setShowSearchAd,
listDataSource,
listColumns,
pageInfo
} = declareStore;
if (!hasRight && !loading) {
// 无权限处理
return renderNoright();
}
const rightMenu = [
// 右键菜单
// {
// key: "BTN_COLUMN",
// icon: <i className="icon-coms-Custom"/>,
// content: "显示列定制",
// onClick: this.showColumn
// }
];
const collectParams = {
// 收藏功能配置
favname: "个税申报表",
favouritetype: 1,
objid: 0,
link: "wui/index.html#/ns_demo03/index",
importantlevel: 1
};
const { taxAgentStore: { showOperateBtn } } = this.props;
const { loading, columns, dataSource, pageInfo } = this.state;
const renderRightOperation = () => {
const { startDate, endDate } = this.state;
return (
@ -219,38 +114,59 @@ export default class Declare extends React.Component {
return (
<div className="mySalaryBenefitsWrapper">
<WeaTop
title="个税申报表" // 文字
icon={<i className="icon-coms-fa"/>} // 左侧图标
iconBgcolor="#F14A2D" // 左侧图标背景色
showDropIcon={false} // 是否显示下拉按钮
dropMenuDatas={rightMenu} // 下拉菜单(和页面的右键菜单相同)
dropMenuProps={{ collectParams }} // 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能
<WeaTop title="个税申报表" icon={<i className="icon-coms-fa"/>}
iconBgcolor="#F14A2D" showDropIcon={false}
>
<CustomTab searchOperationItem={renderRightOperation()}/>
<CustomTable
loading={loading}
columns={this.getColumns()}
dataSource={listDataSource}
pagination={{
onChange: (value) => {
this.handleDataPageChange(value);
},
total: pageInfo.total,
showTotal: (total) => `${total}`,
current: pageInfo.pageNum
}}
/>
<div className="tableWrapper">
<WeaNewScroll height="100%">
<CustomTable
loading={loading}
columns={[
...columns,
{
title: "操作",
dataIndex: "operate",
render: (text, record) => {
return (
<a href="javascript:void(0);"
onClick={() => {
window.open(
"/spa/hrmSalary/static/index.html#/main/hrmSalary/generateDeclarationDetail?id=" +
record.id
);
}}>
查看
</a>
);
}
}
]}
dataSource={dataSource}
pagination={{
onChange: (value) => {
this.handleDataPageChange(value);
},
total: pageInfo.total,
showTotal: (total) => `${total}`,
current: pageInfo.current,
showSizeChanger: true,
pageSizeOptions: ["10", "20", "50", "100"],
showQuickJumper: true,
pageSize: pageInfo.pageSize,
onShowSizeChange: (current, pageSize) => {
this.handleDataPageChange(current, pageSize);
}
}}
/>
</WeaNewScroll>
</div>
</WeaTop>
{this.state.declarationModalVisible && (
<GenerateModal
onGenerate={() => {
this.handleSearch();
}}
onGenerate={this.handleSearch}
visible={this.state.declarationModalVisible}
onCancel={() => {
this.setState({ declarationModalVisible: false });
}}
onCancel={() => this.setState({ declarationModalVisible: false })}
/>
)}
</div>

View File

@ -1,14 +1,14 @@
import React from "react";
import { inject, observer } from "mobx-react";
import { Button, DatePicker } from "antd";
import { WeaTop } from "ecCom";
import { DatePicker } from "antd";
import { WeaNewScroll, WeaTop } from "ecCom";
import { renderNoright } from "../../util"; // 渲染form数据的方法因为多个页面都会使用所以抽的公共方法在util中
import CustomTab from "../../components/customTab";
import CustomPaginationTable from "../../components/customPaginationTable";
import moment from "moment";
import "./index.less";
import PayrollModal from "./payrollModal";
import Authority from "./authority";
import CustomPaginationTable from "../../components/customPaginationTable";
import "./index.less";
const { RangePicker } = DatePicker;
@ -84,7 +84,7 @@ export default class MySalary extends React.Component {
handleTabChange(selectedKey) {
if (selectedKey == "2") {
if (selectedKey === "2") {
const { mySalaryStore: { getRecordList } } = this.props;
getRecordList();
}
@ -102,14 +102,7 @@ export default class MySalary extends React.Component {
render() {
const { mySalaryStore } = this.props;
const {
loading,
hasRight,
form,
setMySalaryBill,
doSearch,
setShowSearchAd
} = mySalaryStore;
const { loading, hasRight, setMySalaryBill } = mySalaryStore;
const {
myBillDataSource,
recordListColumns,
@ -121,15 +114,6 @@ export default class MySalary extends React.Component {
if (!hasRight && !loading) { // 无权限处理
return renderNoright();
}
const rightMenu = [// 右键菜单
// {
// key: 'BTN_COLUMN',
// icon: <i className='icon-coms-Custom' />,
// content: '显示列定制',
// onClick: this.showColumn
// },
];
const collectParams = { // 收藏功能配置
favname: "我的薪资福利",
favouritetype: 1,
@ -137,55 +121,30 @@ export default class MySalary extends React.Component {
link: "wui/index.html#/ns_demo03/index",
importantlevel: 1
};
const adBtn = [ // 高级搜索内部按钮
<Button type="primary" onClick={doSearch}>搜索</Button>,
<Button type="ghost" onClick={() => form.resetForm()}>重置</Button>,
<Button type="ghost" onClick={() => setShowSearchAd(false)}>取消</Button>
];
const topTab = [
{
title: "工资单",
viewcondition: "0"
},
// {
// title: "社保福利",
// viewcondition: "1"
// },
{
title: "调薪记录",
viewcondition: "2"
}
];
const renderSearchOperationItem = () => {
if (this.state.selectedKey == "0") {
if (this.state.selectedKey === "0") {
return (<div><span className="tabSearchLabel">薪资所属月</span>
<RangePicker picker="month" format="yyyy-MM"
onChange={(value) => this.handleSalaryRangePickerChange(value)}
<RangePicker
picker="month"
format="yyyy-MM"
onChange={(value) => this.handleSalaryRangePickerChange(value)}
/>
</div>);
} else if (this.state.selectedKey == "1") {
return (<div><span className="tabSearchLabel">缴纳月份</span>
<div className="weaRangePickerWrapper">
<div className="monthPickerWrapper">
<MonthPicker/>
</div>
<span className="betweenLable">
</span>
<div className="monthPickerWrapper">
<MonthPicker/>
</div>
</div>
</div>);
} else {
return (<div></div>);
}
};
return (
<div className="mySalaryBenefitsWrapper">
<Authority ecId={`${this && this.props && this.props.ecId || ""}_Authority@lulowc`} store={mySalaryStore}>
@ -194,61 +153,56 @@ export default class MySalary extends React.Component {
icon={<i className="icon-coms-fa"/>} // 左侧图标
iconBgcolor="#F14A2D" // 左侧图标背景色
showDropIcon={false} // 是否显示下拉按钮
dropMenuDatas={rightMenu} // 下拉菜单(和页面的右键菜单相同)
dropMenuProps={{ collectParams }} // 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能
>
<CustomTab topTab={topTab}
searchOperationItem={
renderSearchOperationItem()
}
onChange={(v) => {
this.handleTabChange(v);
this.setState({ selectedKey: v });
}}
<CustomTab
topTab={topTab}
searchOperationItem={renderSearchOperationItem()}
onChange={(v) => {
this.handleTabChange(v);
this.setState({ selectedKey: v });
}}
/>
{
this.state.selectedKey == "0" &&
<CustomPaginationTable
loading={loading}
columns={this.getColumns()}
dataSource={myBillDataSource ? myBillDataSource : []}
total={myBillPageInfo.total}
current={myBillPageInfo.pageNum}
pageSize={this.pageInfo.pageSize}
onPageChange={(value) => {
this.pageInfo.current = value;
this.handlePageChange();
}}
onShowSizeChange={(current, pageSize) => {
this.pageInfo = { current, pageSize };
this.handlePageChange();
}}
/>
}
{/* {
this.state.selectedKey == '1' && <WeaTable columns={socialSecurityBenefitsColumns} dataSource={dataSource} scroll={{ x: 1000}}/>
} */}
{
this.state.selectedKey == "2" &&
<CustomPaginationTable
columns={recordListColumns}
dataSource={recordListDataSource}
total={recordListPageInfo.total}
current={recordListPageInfo.pageNum}
pageSize={this.historyPageInfo.pageSize}
onPageChange={(value) => {
this.historyPageInfo.current = value;
this.handleHistoryPageChange();
}}
onShowSizeChange={(current, pageSize) => {
this.historyPageInfo = { current, pageSize };
this.handleHistoryPageChange();
}}
/>
}
<div className="tableWrapper">
<WeaNewScroll height="100%">
{
this.state.selectedKey === "0" &&
<CustomPaginationTable
loading={loading}
columns={this.getColumns()}
dataSource={myBillDataSource ? myBillDataSource : []}
total={myBillPageInfo.total}
current={myBillPageInfo.pageNum}
pageSize={this.pageInfo.pageSize}
onPageChange={(value) => {
this.pageInfo.current = value;
this.handlePageChange();
}}
onShowSizeChange={(current, pageSize) => {
this.pageInfo = { current, pageSize };
this.handlePageChange();
}}
/>
}
{
this.state.selectedKey === "2" &&
<CustomPaginationTable
columns={recordListColumns}
dataSource={recordListDataSource}
total={recordListPageInfo.total}
current={recordListPageInfo.pageNum}
pageSize={this.historyPageInfo.pageSize}
onPageChange={(value) => {
this.historyPageInfo.current = value;
this.handleHistoryPageChange();
}}
onShowSizeChange={(current, pageSize) => {
this.historyPageInfo = { current, pageSize };
this.handleHistoryPageChange();
}}
/>
}
</WeaNewScroll>
</div>
</WeaTop>
</Authority>
{

View File

@ -8,4 +8,15 @@
margin-left: 10px;
margin-right: 10px
}
.wea-new-top-content {
display: flex;
flex-direction: column;
overflow: hidden;
.tableWrapper {
flex: 1;
overflow: hidden;
}
}
}

View File

@ -3,7 +3,7 @@ import { inject, observer } from "mobx-react";
import { toJS } from "mobx";
import { Button, DatePicker, message, Modal } from "antd";
import moment from "moment";
import { WeaHelpfulTip, WeaInputSearch, WeaSelect, WeaSlideModal, WeaTop } from "ecCom";
import { WeaHelpfulTip, WeaInputSearch, WeaNewScroll, WeaSelect, WeaSlideModal, WeaTop } from "ecCom";
import { renderLoading } from "../../util"; // 渲染form数据的方法因为多个页面都会使用所以抽的公共方法在util中
import CustomTab from "../../components/customTab";
import StepSlide from "../../components/stepSlide";
@ -360,7 +360,7 @@ export default class Payroll extends React.Component {
};
return (
<div>
<div className="payrollDistributionWrapper">
<WeaTop
title="工资单发放" // 文字
icon={<i className="icon-coms-fa"/>} // 左侧图标
@ -374,35 +374,39 @@ export default class Payroll extends React.Component {
this.setState({ selectedKey: v, stepSlideVisible: false, editSlideVisible: false });
}}
/>
{
this.state.selectedKey === "0" &&
<SalarySendList
onEditTemplate={(record) => {
this.handleTemplateListEdit(record);
}}
salaryYearMonth={this.salaryYearMonth}
handleListDataPageChange={(value, pageInfo) => {
this.handleListDataPageChange(value, pageInfo);
}}
handleListShowSizeChange={(pageInfo) => {
this.handleListShowSizeChange(pageInfo);
}}
/>
}
<div className="tableWrapper">
<WeaNewScroll height="100%">
{
this.state.selectedKey === "0" &&
<SalarySendList
onEditTemplate={(record) => {
this.handleTemplateListEdit(record);
}}
salaryYearMonth={this.salaryYearMonth}
handleListDataPageChange={(value, pageInfo) => {
this.handleListDataPageChange(value, pageInfo);
}}
handleListShowSizeChange={(pageInfo) => {
this.handleListShowSizeChange(pageInfo);
}}
/>
}
{
this.state.selectedKey === "1" &&
<TemplateSettingList
onEdit={(record) => {
this.handleTemplateListEdit(record);
}}
onCopy={(record) => {
this.handleTemplateListCopy(record);
}}
showOperateBtn={showOperateBtn}
onDelete={(record) => this.handleTemplateListDelete(record)}
/>
}
{
this.state.selectedKey === "1" &&
<TemplateSettingList
onEdit={(record) => {
this.handleTemplateListEdit(record);
}}
onCopy={(record) => {
this.handleTemplateListCopy(record);
}}
showOperateBtn={showOperateBtn}
onDelete={(record) => this.handleTemplateListDelete(record)}
/>
}
</WeaNewScroll>
</div>
</WeaTop>
{
this.state.stepSlideVisible && <StepSlide

View File

@ -14,6 +14,7 @@ import {
WeaFormItem,
WeaHelpfulTip,
WeaInput,
WeaNewScroll,
WeaPopoverHrm,
WeaSearchGroup,
WeaSelect,
@ -194,7 +195,7 @@ class Index extends Component {
const { payrollFilesStore: { tableStore, queryList } } = this.props;
const payload = { ...pageInfo };
this.setState({
loading: { ...loading, query: true },
loading: { ...loading, query: true }
});
queryList(payload, searchItemsValue, url).then(({ data, status }) => {
this.setState({ loading: { ...loading, query: false } });
@ -743,18 +744,6 @@ class Index extends Component {
})}> 重置 </Button>,
<Button type="ghost" onClick={() => this.setState({ showSearchAd: false })}> 取消 </Button>
];
const rightMenu = [
// 右键菜单
{
key: "BTN_COLUMN",
icon: <i className="icon-coms-Custom"/>,
content: "显示列定制",
onClick: () => {
tableStore.setColSetVisible(true);
tableStore.tableColSet(true);
}
}
];
const rowSelection = {
selectedRowKeys,
onChange: (selectedRowKeys) => this.setState({ selectedRowKeys })
@ -766,7 +755,6 @@ class Index extends Component {
icon={<i className="icon-coms-fa"/>} // 左侧图标
iconBgcolor="#F14A2D" // 左侧图标背景色
showDropIcon={true} // 是否显示下拉按钮
dropMenuDatas={rightMenu} // 下拉菜单(和页面的右键菜单相同)
>
<WeaTab
datas={tabCondition}
@ -803,21 +791,25 @@ class Index extends Component {
})} // 在搜索框中输入的文字改变时的回调: 这里需要同步高级搜索和外部搜索框的值form.updateFields({ username: v })
searchsBaseValue={this.state.searchItemsValue.username}
/>
<WeaTable
loading={loading.query}
rowKey="id"
columns={this.getColumns()} dataSource={dataSource} pagination={pagination}
// rowClassName={(record) => record.archiveStatus === "ARCHIVE" ? "archiveRow" : ""}
rowSelection={rowSelection}
scroll={{ x: 1200 }}
/>
{/*人员卡片*/}
<WeaPopoverHrm/>
<WeaTableComx
style={{ display: "none" }}
comsWeaTableStore={tableStore}
needScroll={true}
/>
<div className="tableWrapper">
<WeaNewScroll height="100%">
<WeaTable
loading={loading.query}
rowKey="id"
columns={this.getColumns()} dataSource={dataSource} pagination={pagination}
// rowClassName={(record) => record.archiveStatus === "ARCHIVE" ? "archiveRow" : ""}
rowSelection={rowSelection}
scroll={{ x: 1200 }}
/>
{/*人员卡片*/}
<WeaPopoverHrm/>
<WeaTableComx
style={{ display: "none" }}
comsWeaTableStore={tableStore}
needScroll={true}
/>
</WeaNewScroll>
</div>
</WeaTop>
<div style={{ display: "none" }}>
<ImportMenu
@ -832,10 +824,12 @@ class Index extends Component {
className="slideOuterWrapper"
visible={slideParams.visible}
top={0}
width={55}
measureT="%"
width={800}
measureX="px"
height={100}
direction={"right"}
measure={"%"}
measureY="%"
direction="right"
title={
<SlideModalTitle
subtitle="员工薪资档案"

View File

@ -1,4 +1,15 @@
.payrollFilesWrapper {
.wea-new-top-content {
display: flex;
flex-direction: column;
overflow: hidden;
.tableWrapper {
flex: 1;
overflow: hidden;
}
}
.archiveRow {
background: #F1F3F4;
}

View File

@ -1,7 +1,7 @@
import React from "react";
import { inject, observer } from "mobx-react";
import { Button, Dropdown, Menu, message, Modal, Switch } from "antd";
import { WeaInputSearch, WeaSlideModal, WeaTop } from "ecCom";
import { WeaInputSearch, WeaNewScroll, WeaSlideModal, WeaTop } from "ecCom";
import { renderLoading } from "../../util"; // 渲染form数据的方法因为多个页面都会使用所以抽的公共方法在util中
import CustomTab from "../../components/customTab";
import SystemSalaryItemModal from "./systemSalaryItemModal";
@ -352,36 +352,35 @@ export default class SalaryItem extends React.Component {
iconBgcolor="#F14A2D" // 左侧图标背景色
showDropIcon={false} // 是否显示下拉按钮
>
<CustomTab
searchOperationItem={
renderRightOperation()
}
/>
<CustomPaginationTable
rowKey={record => record.id}
loading={loading}
rowSelection={rowSelection}
dataSource={tableDataSource}
columns={this.getColumns(tableColumns)}
total={this.state.searchParams.total}
current={this.state.searchParams.current}
pageSize={this.state.searchParams.pageSize}
onPageChange={(value) => {
this.handlePageChange(value);
}}
onShowSizeChange={(current, pageSize) => {
this.setState({
searchParams: {
...this.state.searchParams,
current,
pageSize
}
}, () => {
this.handleShowSizeChange({ name: this.state.searchValue, ...this.state.searchParams });
});
}}
/>
<CustomTab searchOperationItem={renderRightOperation()}/>
<div className="tableWrapper">
<WeaNewScroll height="100%">
<CustomPaginationTable
rowKey={record => record.id}
loading={loading}
rowSelection={rowSelection}
dataSource={tableDataSource}
columns={this.getColumns(tableColumns)}
total={this.state.searchParams.total}
current={this.state.searchParams.current}
pageSize={this.state.searchParams.pageSize}
onPageChange={(value) => {
this.handlePageChange(value);
}}
onShowSizeChange={(current, pageSize) => {
this.setState({
searchParams: {
...this.state.searchParams,
current,
pageSize
}
}, () => {
this.handleShowSizeChange({ name: this.state.searchValue, ...this.state.searchParams });
});
}}
/>
</WeaNewScroll>
</div>
</WeaTop>
{

View File

@ -2,7 +2,7 @@ import React from "react";
import { inject, observer } from "mobx-react";
import { toJS } from "mobx";
import { Button, Dropdown, Menu, message, Modal, Popover } from "antd";
import { WeaHelpfulTip, WeaSlideModal, WeaTab, WeaTable, WeaTop } from "ecCom";
import { WeaHelpfulTip, WeaSlideModal, WeaTab, WeaTable, WeaTop, WeaNewScroll } from "ecCom";
import { getSearchs, renderLoading } from "../../../util"; // 渲染form数据的方法因为多个页面都会使用所以抽的公共方法在util中
import BaseForm from "./baseForm";
import SlideModalTitle from "../../../components/slideModalTitle";
@ -760,17 +760,21 @@ export default class Archives extends React.Component {
onSearchChange={v => form.updateFields({ username: v })} // 在搜索框中输入的文字改变时的回调: 这里需要同步高级搜索和外部搜索框的值
searchsBaseValue={form.getFormParams().username} // 外部input搜索值受控: 这里和高级搜索的requestname同步
/>
<WeaTable
loading={loading.query}
rowKey="baseInfo"
columns={this.getColumns()} dataSource={dataSourceActive} pagination={pagination}
rowSelection={rowSelection}
scroll={{ x: 1200 }}
/>
{
!_.isEmpty(this.getColumns()) &&
<TipLabel>{this.getTipChildren()}</TipLabel>
}
<div className="tableWrapper">
<WeaNewScroll height="100%">
<WeaTable
loading={loading.query}
rowKey="baseInfo"
columns={this.getColumns()} dataSource={dataSourceActive} pagination={pagination}
rowSelection={rowSelection}
scroll={{ x: 1200 }}
/>
{
!_.isEmpty(this.getColumns()) &&
<TipLabel>{this.getTipChildren()}</TipLabel>
}
</WeaNewScroll>
</div>
</WeaTop>
{
this.state.editSlideVisible &&

View File

@ -9,7 +9,8 @@
padding-right: 10px;
border: 1px solid #e2e2e2;
margin-bottom: 0 !important;
.ant-select-selection{
.ant-select-selection {
height: 30px;
border-radius: 0;
}
@ -23,14 +24,21 @@
border-bottom: none;
}
}
.mySalaryBenefitsWrapper{
.tdEllipsis{
.mySalaryBenefitsWrapper {
.tableWrapper {
flex: 1;
overflow: hidden;
}
.tdEllipsis {
display: inline-block;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.optWrapper {
display: flex;
align-items: center;
@ -40,6 +48,7 @@
}
}
}
//提示语
.helpWrapper {
display: flex;
@ -50,30 +59,32 @@
}
}
.slideOuterWrapper{
.wea-slide-modal-title{
.slideOuterWrapper {
.wea-slide-modal-title {
height: initial;
line-height: initial;
text-align: left;
}
.rodal-close{
.rodal-close {
z-index: 99;
top: 10px!important;
top: 10px !important;
}
}
@media (min-width: 1260px){
.slideOuterWrapper{
.reqTopWrapper .wea-new-top-req-title>div:first-child>div{
max-width: 100%!important;
@media (min-width: 1260px) {
.slideOuterWrapper {
.reqTopWrapper .wea-new-top-req-title > div:first-child > div {
max-width: 100% !important;
}
}
}
@media screen and (min-width: 1060px) and (max-width: 1260px) {
.slideOuterWrapper{
.reqTopWrapper .wea-new-top-req-title>div:first-child>div{
max-width: calc(100% - 96px)!important;
.slideOuterWrapper {
.reqTopWrapper .wea-new-top-req-title > div:first-child > div {
max-width: calc(100% - 96px) !important;
}
}
}

View File

@ -2,7 +2,7 @@ import React from "react";
import { inject, observer } from "mobx-react";
import { toJS } from "mobx";
import { Button, Dropdown, Menu, message, Modal, Switch } from "antd";
import { WeaSelect, WeaSlideModal, WeaTop } from "ecCom";
import { WeaNewScroll, WeaSelect, WeaSlideModal, WeaTop } from "ecCom";
import { WeaTableNew } from "comsMobx";
import { renderNoright } from "../../../util"; // 渲染form数据的方法因为多个页面都会使用所以抽的公共方法在util中
import CustomTab from "../../../components/customTab";
@ -260,17 +260,7 @@ export default class Programme extends React.Component {
render() {
const { programmeStore, taxAgentStore: { showOperateBtn } } = this.props;
const {
loading,
hasRight,
form,
condition,
tableStore,
showSearchAd,
getTableDatas,
doSearch,
setShowSearchAd
} = programmeStore;
const { loading, hasRight, form, tableStore, getTableDatas } = programmeStore;
const {
selectedKey,
setSelectedKey,
@ -287,34 +277,7 @@ export default class Programme extends React.Component {
tableColumns,
tablePageInfo
} = programmeStore;
if (!hasRight && !loading) {
// 无权限处理
return renderNoright();
}
const rightMenu = [
// 右键菜单
];
const collectParams = {
// 收藏功能配置
favname: "社保福利方案",
favouritetype: 1,
objid: 0,
link: "wui/index.html#/ns_demo03/index",
importantlevel: 1
};
const adBtn = [
// 高级搜索内部按钮
<Button type="primary" onClick={doSearch}>
搜索
</Button>,
<Button type="ghost" onClick={() => form.resetForm()}>
重置
</Button>,
<Button type="ghost" onClick={() => setShowSearchAd(false)}>
取消
</Button>
];
if (!hasRight && !loading) return renderNoright();
const topTab = [
{
@ -377,11 +340,6 @@ export default class Programme extends React.Component {
this.setState({ customEdit: false });
};
// const renderSearchOperationItem = () => {
// const { programmeStore: {setCustomSelectkey, getCustomCategoryList}} = this.props;
// return
// }
const handleOnSave = () => {
const { programmeStore } = this.props;
const { currentOperate } = this.state;
@ -449,15 +407,13 @@ export default class Programme extends React.Component {
};
return (
<div className="mySalaryBenefitsWrapper">
<div className="socialSecurityAndWelfareSchemeWrapper">
<WeaTop
title="社保福利方案" // 文字
icon={<i className="icon-coms-fa"/>} // 左侧图标
iconBgcolor="#F14A2D" // 左侧图标背景色
showDropIcon={false} // 是否显示下拉按钮
dropMenuDatas={rightMenu} // 下拉菜单(和页面的右键菜单相同)
dropMenuProps={{ collectParams }}>
{/* 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能 */}
>
<CustomTab
topTab={topTab}
searchOperationItem={
@ -500,37 +456,41 @@ export default class Programme extends React.Component {
}
}}
/>
{selectedKey == "custom"
? <TwoColContent
leftContent={
<WeaMobxTable // table内部做了loading加载处理页面就不需要再加了
comsWeaTableStore={tableStore} // table store
hasOrder={true} // 是否启用排序
needScroll={true} // 是否启用table内部列表滚动将自适应到父级高度
getColumns={this.getCustomColumns}
onOperatesClick={this.onCustomOperatesClick.bind(this)}
<div className="tableWrapper">
<WeaNewScroll height="100%">
{selectedKey == "custom"
? <TwoColContent
leftContent={
<WeaMobxTable // table内部做了loading加载处理页面就不需要再加了
comsWeaTableStore={tableStore} // table store
hasOrder={true} // 是否启用排序
needScroll={true} // 是否启用table内部列表滚动将自适应到父级高度
getColumns={this.getCustomColumns}
onOperatesClick={this.onCustomOperatesClick.bind(this)}
/>
}
rightContent={renderCustomRightContent()}
/>
}
rightContent={renderCustomRightContent()}
/>
: <CustomPaginationTable
loading={loading}
columns={this.getColumns(tableColumns)}
dataSource={tableDataSource}
total={toJS(tablePageInfo).total}
current={toJS(tablePageInfo).pageNum}
pageSize={this.pageInfo.pageSize}
onPageChange={value => {
this.handlePageChange(value);
}}
onShowSizeChange={(current, pageSize) => {
this.pageInfo = { current, pageSize };
const {
programmeStore: { form, getTableDatas, selectedKey }
} = this.props;
getTableDatas(selectedKey, this.pageInfo);
}}
/>}
: <CustomPaginationTable
loading={loading}
columns={this.getColumns(tableColumns)}
dataSource={tableDataSource}
total={toJS(tablePageInfo).total}
current={toJS(tablePageInfo).pageNum}
pageSize={this.pageInfo.pageSize}
onPageChange={value => {
this.handlePageChange(value);
}}
onShowSizeChange={(current, pageSize) => {
this.pageInfo = { current, pageSize };
const {
programmeStore: { form, getTableDatas, selectedKey }
} = this.props;
getTableDatas(selectedKey, this.pageInfo);
}}
/>}
</WeaNewScroll>
</div>
</WeaTop>
<WeaSlideModal
className="slideOuterWrapper"

View File

@ -16,12 +16,6 @@
}
}
.mySalaryBenefitsWrapper {
.wea-new-top-content {
overflow: hidden auto !important;
}
}
.customFLOuter {
.customFLWrapper {
padding: 16px 50px;
@ -32,6 +26,19 @@
}
}
.socialSecurityAndWelfareSchemeWrapper, .mySalaryBenefitsWrapper {
.wea-new-top-content {
display: flex;
flex-direction: column;
overflow: hidden;
.tableWrapper {
flex: 1;
overflow: hidden;
}
}
}
.copyDialogWrapper {
.wea-dialog-body {
height: auto !important;

View File

@ -1,7 +1,7 @@
import React from "react";
import { inject, observer } from "mobx-react";
import { Button, DatePicker, Dropdown, Menu, message, Modal } from "antd";
import { WeaTop } from "ecCom";
import { WeaNewScroll, WeaTop } from "ecCom";
import { renderNoright } from "../../../util"; // 渲染form数据的方法因为多个页面都会使用所以抽的公共方法在util中
import Accountdialog from "./components/accountDialog";
import AbnormalDrawer from "./components/abnormalDrawer";
@ -424,11 +424,7 @@ export default class StandingBook extends React.Component {
_.filter(tableStore.columns, (it) => it.hide && it.hide === "false"),
(item) => ({ ...item, width: item.oldWidth })
);
if (!hasRight && !loading) {
// 无权限处理
return renderNoright();
}
if (!hasRight && !loading) return renderNoright();
const rightBtns = [
// 右键菜单
<Button
@ -445,23 +441,6 @@ export default class StandingBook extends React.Component {
核算
</Button>
];
const rightMenu = [
// 右键菜单
// {
// key: "BTN_COLUMN",
// icon: <i className="icon-coms-Custom" />,
// content: "显示列定制",
// onClick: this.showColumn,
// },
];
const collectParams = {
// 收藏功能配置
favname: "社保福利台账",
favouritetype: 1,
objid: 0,
link: "wui/index.html#/ns_demo03/index",
importantlevel: 1
};
return (
<div className="standingbookWrapper">
@ -470,9 +449,6 @@ export default class StandingBook extends React.Component {
icon={<i className="icon-coms-fa"/>} // 左侧图标
iconBgcolor="#F14A2D" // 左侧图标背景色
buttons={showOperateBtn ? rightBtns : []}
// showDropIcon={true} // 是否显示下拉按钮
// dropMenuDatas={rightMenu} // 下拉菜单(和页面的右键菜单相同)
// dropMenuProps={{ collectParams }} // 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能
>
<div className="billDateWrapper">
<div>账单月份</div>
@ -494,32 +470,36 @@ export default class StandingBook extends React.Component {
onChange={(val) => this.handleChangeMonth("endTime", val)}
/>
</div>
<CustomPaginationTable
loading={loading}
columns={_.filter(columns, (it) => it.dataIndex !== "id").map(item => {
item.width = "150px";
if (item.dataIndex === "billMonth") item.fixed = "left";
if (item.dataIndex === "action") return { ...item };
return {
...item,
render: (text) => {
return <span className="tdEllipsis" title={text}>{text}</span>;
}
};
})}
dataSource={list}
total={total}
current={this.state.current}
pageSize={this.pageInfo.pageSize}
onPageChange={(current) => {
this.handleShowSizeChange({ ...this.pageInfo, current });
}}
onShowSizeChange={(current, pageSize) => {
this.pageInfo = { current, pageSize };
this.handleShowSizeChange(this.pageInfo);
}}
scroll={{ x: 2300 }}
/>
<div className="tableWrapper">
<WeaNewScroll height="100%">
<CustomPaginationTable
loading={loading}
columns={_.filter(columns, (it) => it.dataIndex !== "id").map(item => {
item.width = "150px";
if (item.dataIndex === "billMonth") item.fixed = "left";
if (item.dataIndex === "action") return { ...item };
return {
...item,
render: (text) => {
return <span className="tdEllipsis" title={text}>{text}</span>;
}
};
})}
dataSource={list}
total={total}
current={this.state.current}
pageSize={this.pageInfo.pageSize}
onPageChange={(current) => {
this.handleShowSizeChange({ ...this.pageInfo, current });
}}
onShowSizeChange={(current, pageSize) => {
this.pageInfo = { current, pageSize };
this.handleShowSizeChange(this.pageInfo);
}}
scroll={{ x: 2300 }}
/>
</WeaNewScroll>
</div>
{dialogProps.visible && (
<Accountdialog

View File

@ -1,22 +1,34 @@
.standingbookWrapper {
.wea-new-top-content {
display: flex;
flex-direction: column;
overflow: hidden;
.tableWrapper {
flex: 1;
overflow: hidden;
}
.wea-new-table {
.ant-table-row:hover {
.more {
display: inline-block;
}
}
.linkTo {
text-decoration: none;
color: #4d7ad8;
}
.more {
margin-left: 8px;
cursor: pointer;
color: #4d7ad8;
// display: none;
}
.tdEllipsis{
.tdEllipsis {
display: inline-block;
width: 100%;
overflow: hidden;
@ -25,11 +37,13 @@
}
}
}
.billDateWrapper {
display: flex;
align-items: center;
height: 46px;
padding: 0 16px;
.to {
padding: 0 8px;
}

View File

@ -1,56 +1,79 @@
.normalWapper {
.topContent {
padding: 8px 20px;
.standingBookDetailWapper {
display: flex;
flex-direction: column;
height: 100%;
.normalWapper {
flex: 1;
display: flex;
align-items: center;
.month {
margin-right: 26px;
span:first-child {
margin-right: 8px;
}
i {
color: #666;
margin-left: 8px;
}
}
}
.tabOption {
display: flex;
align-items: center;
padding: 8px 20px;
justify-content: flex-end;
i.icon-coms-Batch-delete, i.icon-coms-Add-to, button {
cursor: pointer;
margin-right: 10px;
}
.anticon-search {
margin-right: 0px;
}
.wea-input-focus-btn {
margin-right: 0px;
}
}
.tdEllipsis {
display: inline-block;
width: 100%;
flex-direction: column;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.tableWrapper {
flex: 1;
overflow: hidden;
}
.topContent {
padding: 8px 20px;
display: flex;
align-items: center;
.month {
margin-right: 26px;
span:first-child {
margin-right: 8px;
}
i {
color: #666;
margin-left: 8px;
}
}
}
.tabOption {
display: flex;
align-items: center;
padding: 8px 20px;
justify-content: flex-end;
i.icon-coms-Batch-delete, i.icon-coms-Add-to, button {
cursor: pointer;
margin-right: 10px;
}
.anticon-search {
margin-right: 0px;
}
.wea-input-focus-btn {
margin-right: 0px;
}
}
.tdEllipsis {
display: inline-block;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
//退差;补差
.regressionWrapper, .differenceWrapper {
height: calc(100vh - 47px);
overflow: auto;
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
.tableWrapper {
flex: 1;
overflow: hidden;
}
.tdEllipsis {
display: inline-block;

View File

@ -7,13 +7,14 @@
import React, { Component } from "react";
import RegTop from "./regTop";
import { message, Modal } from "antd";
import { WeaNewScroll } from "ecCom";
import { getQueryString } from "../../../../util/url";
import RegList from "./regList";
import AcctResultImportModal from "../../../calculateDetail/acctResult/importModal/acctResultImportModal";
import * as API from "../../../../apis/standingBook";
import "./index.less";
import RegEditDetial from "./regEditDetial";
import { calcPageNo } from "../../../../util";
import RegList from "./regList";
import RegEditDetial from "./regEditDetial";
import AcctResultImportModal from "../../../calculateDetail/acctResult/importModal/acctResultImportModal";
import "./index.less";
class MakeupDifference extends Component {
constructor(props) {
@ -107,31 +108,35 @@ class MakeupDifference extends Component {
onChange={this.handleChangeOpt}
selectKey={selectKey}
/>
<RegList
type="difference"
ref={dom => this.diffListRef = dom}
onChangeRowkey={(selectKey) => this.setState({ selectKey })}
onEdit={this.handleEdit}
/>
{/*编辑弹框*/}
<RegEditDetial {...returnEditPersonSlide} onCancel={this.handleCloseModal}/>
{/*导入补差*/}
{
importDiffModal.visible &&
<AcctResultImportModal
visiable={importDiffModal.visible}
fieldData={fieldData}
onAdd={fieldData => this.setState({ fieldData })}
onCancel={() => {
this.setState({ importDiffModal: { ...importDiffModal, visible: false }, fieldData: {} }, () => {
const name = this.regTopRef.state.name;
this.diffListRef.recessionList({ userName: name });
});
}}
isStandingBook
standingBookType="difference"
/>
}
<div className="tableWrapper">
<WeaNewScroll height="100%">
<RegList
type="difference"
ref={dom => this.diffListRef = dom}
onChangeRowkey={(selectKey) => this.setState({ selectKey })}
onEdit={this.handleEdit}
/>
{/*编辑弹框*/}
<RegEditDetial {...returnEditPersonSlide} onCancel={this.handleCloseModal}/>
{/*导入补差*/}
{
importDiffModal.visible &&
<AcctResultImportModal
visiable={importDiffModal.visible}
fieldData={fieldData}
onAdd={fieldData => this.setState({ fieldData })}
onCancel={() => {
this.setState({ importDiffModal: { ...importDiffModal, visible: false }, fieldData: {} }, () => {
const name = this.regTopRef.state.name;
this.diffListRef.recessionList({ userName: name });
});
}}
isStandingBook
standingBookType="difference"
/>
}
</WeaNewScroll>
</div>
</div>
);
}

View File

@ -8,7 +8,7 @@ import React, { Component } from "react";
import { Button, Icon, message, Modal, Spin, Tooltip } from "antd";
import { inject, observer } from "mobx-react";
import { toJS } from "mobx";
import { WeaInputSearch, WeaTable } from "ecCom";
import { WeaInputSearch, WeaNewScroll, WeaTable } from "ecCom";
import { calcPageNo } from "../../../../util";
import { getQueryString } from "../../../../util/url";
import ProgressModal from "../../../../components/progressModal";
@ -674,18 +674,20 @@ export default class NormalIndex extends Component {
/>
</div>
{/* table */}
<div>
<Spin spinning={loading}>
<WeaTable
rowKey="id"
columns={columns}
dataSource={list}
loading={loading}
pagination={pagination}
rowSelection={rowSelection}
scroll={{ x: 1200, y: "calc(100vh - 233px)" }}
/>
</Spin>
<div className="tableWrapper">
<WeaNewScroll height="100%">
<Spin spinning={loading}>
<WeaTable
rowKey="id"
columns={columns}
dataSource={list}
loading={loading}
pagination={pagination}
rowSelection={rowSelection}
scroll={{ x: 1200 }}
/>
</Spin>
</WeaNewScroll>
{/*编辑弹框*/}
<RegEditDetial {...returnEditPersonSlide} onCancel={this.handleCloseNormalStandingBookModal}/>
<AdjustmentSlide

View File

@ -7,7 +7,7 @@
import React, { Component } from "react";
import { Button, Icon, Spin, Tooltip } from "antd";
import { inject, observer } from "mobx-react";
import { WeaTable } from "ecCom";
import { WeaNewScroll, WeaTable } from "ecCom";
import "./index.less";
@inject("standingBookStore")
@ -116,17 +116,19 @@ export default class OverViewIndex extends Component {
<Button type="primary" onClick={this.handleExport}>导出全部</Button>
</div>
{/* table */}
<div>
<Spin spinning={loading}>
<WeaTable
rowKey="id"
columns={columns}
dataSource={list}
loading={loading}
pagination={pagination}
scroll={{ x: 1200, y: "calc(100vh - 200px)" }}
/>
</Spin>
<div className="tableWrapper">
<WeaNewScroll height="100%">
<Spin spinning={loading}>
<WeaTable
rowKey="id"
columns={columns}
dataSource={list}
loading={loading}
pagination={pagination}
scroll={{ x: 1200 }}
/>
</Spin>
</WeaNewScroll>
</div>
</div>
);

View File

@ -6,6 +6,7 @@
*/
import React, { Component } from "react";
import { message, Modal } from "antd";
import { WeaNewScroll } from "ecCom";
import RegTop from "./regTop";
import RegList from "./regList";
import RegAddEmployee from "./regAddEmployee";
@ -132,23 +133,27 @@ class Regression extends Component {
onChange={this.handleChangeOpt}
selectKey={selectKey}
/>
<RegList
type="regression"
ref={dom => this.regListRef = dom}
visible={returnPersonModal.visible}
onChangeRowkey={(selectKey) => this.setState({ selectKey })}
onEdit={this.handleEdit}
/>
{/*编辑弹框*/}
<RegEditDetial {...returnEditPersonSlide} onCancel={this.handleCloseModal}/>
{/* 弹框 */}
<RegAddEmployee
ref={dom => this.regEmmployeeRef = dom}
{...returnPersonModal}
loading={loading}
onCancel={this.handleCloseModal}
onSave={this.handleSave}
/>
<div className="tableWrapper">
<WeaNewScroll height="100%">
<RegList
type="regression"
ref={dom => this.regListRef = dom}
visible={returnPersonModal.visible}
onChangeRowkey={(selectKey) => this.setState({ selectKey })}
onEdit={this.handleEdit}
/>
{/*编辑弹框*/}
<RegEditDetial {...returnEditPersonSlide} onCancel={this.handleCloseModal}/>
{/* 弹框 */}
<RegAddEmployee
ref={dom => this.regEmmployeeRef = dom}
{...returnPersonModal}
loading={loading}
onCancel={this.handleCloseModal}
onSave={this.handleSave}
/>
</WeaNewScroll>
</div>
</div>
);
}

View File

@ -370,10 +370,12 @@ class SupplementarySlide extends Component {
className="supplementarySlideWrapper"
visible={visible}
top={0}
width={45}
measureT="%"
width={800}
measureX="px"
height={100}
measureY="%"
direction="right"
measure="%"
title={
<SlideModalTitle
subtitle={title}

View File

@ -398,7 +398,7 @@ export default class TaxAgent extends React.Component {
);
return (
<div className="mySalaryBenefitsWrapper">
<div className="taxWithholdingAgentWrapper">
<WeaTop
title="个税扣缴义务人" // 文字
icon={<i className="icon-coms-fa"/>} // 左侧图标

View File

@ -1,4 +1,4 @@
.mySalaryBenefitsWrapper {
.taxWithholdingAgentWrapper {
height: 100%;
.wea-new-top-wapper {
@ -80,27 +80,30 @@
}
}
.slideWrapper{
.slideRefereUser{
.operateBtn{
.slideWrapper {
.slideRefereUser {
.operateBtn {
display: flex;
align-items: center;
//.addOrDelBtn{
.ant-btn{
margin-left: 10px;
border-radius: 0;
padding: 0;
background: transparent;
border: none;
font-size: 20px;
line-height: 20px;
}
.ant-btn.ant-btn-primary[disabled]{
color: #d8d8d8;
}
.ant-btn.ant-btn-primary{
color: #55a1f8;
}
.ant-btn {
margin-left: 10px;
border-radius: 0;
padding: 0;
background: transparent;
border: none;
font-size: 20px;
line-height: 20px;
}
.ant-btn.ant-btn-primary[disabled] {
color: #d8d8d8;
}
.ant-btn.ant-btn-primary {
color: #55a1f8;
}
//}
}
}

View File

@ -1,8 +1,8 @@
import { observable, action, toJS } from 'mobx';
import { message } from 'antd';
import { WeaForm, WeaTableNew } from 'comsMobx';
import { action, observable } from "mobx";
import { message } from "antd";
import { WeaForm, WeaTableNew } from "comsMobx";
import * as API from '../apis/declare'; // 引入API接口文件
import * as API from "../apis/declare"; // 引入API接口文件
const { TableStore } = WeaTableNew;
@ -17,21 +17,22 @@ export class DeclareStore {
// 列表
@observable listDataSource = [];
@observable listColumns = [];
@observable pageInfo = {}
@observable pageInfo = {};
// 详情页
@observable declareInfo = {}; // 详情基本信息
@observable detailTableStore = new TableStore();
@observable detailDataSource = [];
@observable datailColumns = [];
@observable detailPageInfo = {}
@observable detailPageInfo = {};
@action setPageinfo = pageinfo => this.pageInfo = pageinfo;
// 初始化操作
@action
doInit = () => {
this.getCondition();
this.getTableDatas();
}
};
// 获得高级搜索表单数据
@action
@ -41,10 +42,10 @@ export class DeclareStore {
this.condition = res.condition;
this.form.initFormFields(res.condition); // 渲染高级搜索form表单
} else {
message.error(res.msg || '接口调用失败!')
message.error(res.msg || "接口调用失败!");
}
}));
}
};
// 渲染table数据
@action
@ -57,11 +58,11 @@ export class DeclareStore {
this.tableStore.getDatas(res.datas); // table 请求数据
this.hasRight = res.hasRight;
} else {
message.error(res.msg || '接口调用失败!')
message.error(res.msg || "接口调用失败!");
}
this.loading = false;
}));
}
};
@action
setShowSearchAd = bool => this.showSearchAd = bool;
@ -70,77 +71,76 @@ export class DeclareStore {
@action doSearch = () => {
this.getTableDatas();
this.showSearchAd = false;
}
};
//个税申报表-个税申报表列表
@action
getDeclareList = (params = {}) => {
this.loading = true
this.loading = true;
API.getDeclareList(params).then(res => {
if(res.status) {
this.listDataSource = res.data.list ? res.data.list: [];
this.listColumns = res.data.columns
this.pageInfo = res.data
if (res.status) {
this.listDataSource = res.data.list ? res.data.list : [];
this.listColumns = res.data.columns;
// this.setPageinfo({...this.pageInfo, })
this.pageInfo = res.data;
} else {
message.error(res.errormsg || '获取失败')
message.error(res.errormsg || "获取失败");
}
this.loading = false
})
}
this.loading = false;
});
};
//个税申报表-个税申报表生成
@action
saveDeclare = (params) => {
return new Promise((resolve, reject) => {
this.loading= true;
this.loading = true;
API.saveDeclare(params).then(res => {
this.loading= false;
if(res.status) {
message.success("生成成功")
this.loading = false;
if (res.status) {
message.success("生成成功");
resolve();
} else {
message.error(res.errormsg || "生成失败")
reject()
message.error(res.errormsg || "生成失败");
reject();
}
})
})
});
});
}
};
//个税申报表-个税申报表相关信息
@action
getDeclareInfo = (taxDeclarationId) => {
API.getDeclareInfo({taxDeclarationId}).then(res => {
if(res.status) {
this.declareInfo = res.data
API.getDeclareInfo({ taxDeclarationId }).then(res => {
if (res.status) {
this.declareInfo = res.data;
} else {
message.error(res.errormsg || "获取失败")
message.error(res.errormsg || "获取失败");
}
})
}
});
};
// 个税申报表详情列表
@action
getDetailList = (taxDeclarationIdStr, params = {}) => {
API.getDetailList({taxDeclarationIdStr, ...params}).then(res => {
if(res.status) {
API.getDetailList({ taxDeclarationIdStr, ...params }).then(res => {
if (res.status) {
this.detailDataSource = res.data.list ? res.data.list : [];
this.datailColumns = res.data.columns
this.detailPageInfo = res.data
this.datailColumns = res.data.columns;
this.detailPageInfo = res.data;
// this.detailTableStore.getDatas(res.data.dataKey.datas)
} else {
message.error(res.errrmsg || "获取失败")
message.error(res.errrmsg || "获取失败");
}
})
}
});
};
// 个税申报表导出
@action
exportSalaryArchive = (id) => {
API.exportSalaryArchive(id)
}
API.exportSalaryArchive(id);
};
}