数据采集页面重构
This commit is contained in:
parent
a11ad9d7d1
commit
87024ceda9
|
|
@ -26,11 +26,12 @@ class AddItems extends Component {
|
|||
}
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.setState({
|
||||
baseInfo: {
|
||||
...this.state.baseInfo,
|
||||
declareMonth: this.props.editId.declareMonth,
|
||||
declareMonth: this.props.editId.declareMonth || this.props.editId.taxYearMonth,
|
||||
taxAgentId: this.props.editId.taxAgentId,
|
||||
taxAgentName: this.props.editId.taxAgentName,
|
||||
employeeId: this.props.editId.employeeId,
|
||||
|
|
@ -46,12 +47,13 @@ class AddItems extends Component {
|
|||
});
|
||||
});
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps, nextContext) {
|
||||
if (nextProps.editId !== this.props.editId) {
|
||||
this.setState({
|
||||
baseInfo: {
|
||||
...this.state.baseInfo,
|
||||
declareMonth: nextProps.editId.declareMonth,
|
||||
declareMonth: nextProps.editId.declareMonth || nextProps.editId.taxYearMonth,
|
||||
taxAgentId: nextProps.editId.taxAgentId,
|
||||
taxAgentName: nextProps.editId.taxAgentName,
|
||||
employeeId: nextProps.editId.employeeId,
|
||||
|
|
|
|||
|
|
@ -30,21 +30,45 @@ class TableRecord extends Component {
|
|||
accumulatedSituationId: "",
|
||||
specialAddDeductionId: "",
|
||||
taxAgentId: "",
|
||||
declareMonth: []
|
||||
declareMonth: null,
|
||||
taxYearMonth: null
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.getTableRecordData();
|
||||
this.convertData(this.props);
|
||||
}
|
||||
|
||||
getTableRecordData = (payload) => {
|
||||
const { loading, pageInfo } = this.state;
|
||||
const { url, ...extraPayload } = this.props;
|
||||
const module = { ...pageInfo, url, ...extraPayload, ...payload };
|
||||
componentWillReceiveProps(nextProps, nextContext) {
|
||||
this.convertData(nextProps);
|
||||
}
|
||||
|
||||
convertData = (props) => {
|
||||
const { recordPayload } = this.state;
|
||||
const { record, screenParams } = props;
|
||||
const modules = _.reduce(screenParams, (pre, cur) => (_.assign(pre, {
|
||||
[cur]: record[cur],
|
||||
[screenParams[0]]: record.id
|
||||
})), {});
|
||||
this.setState({
|
||||
recordPayload: {
|
||||
...recordPayload,
|
||||
...modules
|
||||
}
|
||||
}, () => this.getTableRecordData());
|
||||
};
|
||||
|
||||
getTableRecordData = () => {
|
||||
const { loading, pageInfo, recordPayload } = this.state;
|
||||
const { url, screenParams } = this.props;
|
||||
const monthkey = screenParams[screenParams.length - 1];
|
||||
const module = {
|
||||
...pageInfo, ...recordPayload, url,
|
||||
[monthkey]: Object.prototype.toString.call(recordPayload[monthkey]) === "[object Array]" ? _.compact(recordPayload[monthkey]) : recordPayload[monthkey]
|
||||
};
|
||||
this.setState({ loading: { ...loading, query: true } });
|
||||
getTableRecordDate(_.omit(module, ["className", "items", "total"])).then(({ status, data }) => {
|
||||
getTableRecordDate(_.pick(module, [...screenParams, "current", "pageSize", "url"])).then(({ status, data }) => {
|
||||
this.setState({ loading: { ...loading, query: false } });
|
||||
if (status) {
|
||||
const { columns, list: dataSource, pageNum: current, pageSize, total } = data;
|
||||
|
|
@ -65,17 +89,30 @@ class TableRecord extends Component {
|
|||
*/
|
||||
handleTablerecordScreen = ({ key, value }) => {
|
||||
const { recordPayload } = this.state;
|
||||
// this.setState({
|
||||
// recordPayload: {
|
||||
// ...recordPayload,
|
||||
// [key]: value
|
||||
// }
|
||||
// }, () => {
|
||||
// this.tableRecordRef.getTableRecordData(this.state.recordPayload);
|
||||
// });
|
||||
this.setState({
|
||||
recordPayload: {
|
||||
...recordPayload,
|
||||
[key]: value
|
||||
}
|
||||
}, () => this.getTableRecordData());
|
||||
};
|
||||
handleResetSelectKeys = () => {
|
||||
this.setState({
|
||||
selectedRowKeys: [],
|
||||
recordPayload: {
|
||||
accumulatedSpecialAdditionalDeductionId: "",
|
||||
otherTaxExemptDeductionId: "",
|
||||
accumulatedSituationId: "",
|
||||
specialAddDeductionId: "",
|
||||
taxAgentId: "",
|
||||
declareMonth: null,
|
||||
taxYearMonth: null
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { className, screenParams, taxAgentOption } = this.props;
|
||||
const { className, screenParams, taxAgentOption, record } = this.props;
|
||||
const { columns, dataSource, loading, selectedRowKeys, pageInfo, recordPayload } = this.state;
|
||||
const rowSelection = {
|
||||
selectedRowKeys,
|
||||
|
|
@ -102,16 +139,20 @@ class TableRecord extends Component {
|
|||
});
|
||||
}
|
||||
};
|
||||
const items = [
|
||||
const items = screenParams.length === 1 ? [
|
||||
{
|
||||
com: Input({ value: editId.username })
|
||||
com: Input({ value: record.username })
|
||||
}
|
||||
] : [
|
||||
{
|
||||
com: Input({ value: record.username })
|
||||
},
|
||||
{
|
||||
com: DataCollectionDateRangePick({
|
||||
label: "税款所属期",
|
||||
range: recordPayload.declareMonth,
|
||||
range: recordPayload[screenParams[screenParams.length - 1]] || [],
|
||||
onChange: this.handleTablerecordScreen,
|
||||
key: "declareMonth"
|
||||
key: screenParams[screenParams.length - 1]
|
||||
})
|
||||
},
|
||||
{
|
||||
|
|
@ -126,7 +167,10 @@ class TableRecord extends Component {
|
|||
];
|
||||
return (
|
||||
<div className="tableRecordWrapper">
|
||||
<WeaSearchGroup className={className} showGroup needTigger={false} items={items} col={3}/>
|
||||
{
|
||||
!_.isEmpty(screenParams) &&
|
||||
<WeaSearchGroup className={className} showGroup needTigger={false} items={items} col={3}/>
|
||||
}
|
||||
<UnifiedTable
|
||||
rowKey="id"
|
||||
rowSelection={rowSelection}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ class ImportFormCom extends Component {
|
|||
};
|
||||
|
||||
render() {
|
||||
const { taxAgentOption, declareMonth, taxAgentId } = this.props;
|
||||
const { taxAgentOption = [], declareMonth, taxAgentId } = this.props;
|
||||
const items = [
|
||||
{
|
||||
com: DataCollectionDatePicker({
|
||||
|
|
@ -29,13 +29,15 @@ class ImportFormCom extends Component {
|
|||
{
|
||||
com: DataCollectionSelect({
|
||||
label: "个税扣缴义务人",
|
||||
value: taxAgentId,
|
||||
value: taxAgentId || "",
|
||||
onChange: this.screenChange,
|
||||
options: [{ key: "", showname: "全部" }, ...taxAgentOption],
|
||||
key: "taxAgentId"
|
||||
})
|
||||
}
|
||||
];
|
||||
!declareMonth && items.shift();
|
||||
_.isNil(taxAgentId) && items.pop();
|
||||
return (
|
||||
<WeaSearchGroup className="screenWrapper" showGroup needTigger={false} items={items}
|
||||
col={2}/>
|
||||
|
|
|
|||
|
|
@ -272,7 +272,7 @@ class Index extends Component {
|
|||
/*
|
||||
* Author: 黎永顺
|
||||
* Description:新增数据采集-累计专项附加扣除
|
||||
* Params:
|
||||
* Params: screenParams规则：日期必须放在数组最后一位，人员信息必须第一位
|
||||
* Date: 2023/2/20
|
||||
*/
|
||||
handleAddData = (title = "新建", editId = {}) => {
|
||||
|
|
@ -299,6 +299,7 @@ class Index extends Component {
|
|||
className="accumulated"
|
||||
taxAgentOption={taxAgentOption}
|
||||
url="/api/bs/hrmsalary/addUpDeduction/getDetailList"
|
||||
record={editId}
|
||||
screenParams={["accumulatedSpecialAdditionalDeductionId", "taxAgentId", "declareMonth"]}
|
||||
/>
|
||||
}
|
||||
|
|
@ -327,6 +328,8 @@ class Index extends Component {
|
|||
data: {}
|
||||
}
|
||||
});
|
||||
this.tableRecordRef && this.tableRecordRef.handleResetSelectKeys();
|
||||
this.handleDebounce = null;
|
||||
};
|
||||
/*
|
||||
* Author: 黎永顺
|
||||
|
|
@ -401,20 +404,47 @@ class Index extends Component {
|
|||
*/
|
||||
getDetailOptBtns = () => {
|
||||
return [
|
||||
<Dropdown.Button
|
||||
// onClick={this.handleExportAllDetailClick}
|
||||
overlay={
|
||||
<Menu
|
||||
// onClick={handleExportSelectedDetailClick}
|
||||
>
|
||||
<Menu.Item key="1">导出选中</Menu.Item>
|
||||
</Menu>
|
||||
}
|
||||
type="primary">
|
||||
<Dropdown.Button onClick={this.handleExportAllDetail}
|
||||
overlay={<Menu
|
||||
onClick={this.handleExportSelectDetail}>
|
||||
<Menu.Item key="1">导出选中</Menu.Item>
|
||||
</Menu>}
|
||||
type="primary">
|
||||
导出全部
|
||||
</Dropdown.Button>
|
||||
];
|
||||
};
|
||||
/*
|
||||
* Author: 黎永顺
|
||||
* Description: 导出详情数据
|
||||
* Params:
|
||||
* Date: 2023/2/21
|
||||
*/
|
||||
handleExportDetail = (url) => {
|
||||
if (!this.handleDebounce) {
|
||||
this.handleDebounce = _.debounce(() => {
|
||||
window.open(`${window.location.origin}/api/bs/hrmsalary/addUpDeduction/exportDetail${url}`, "_self");
|
||||
this.handleDebounce = null;
|
||||
}, 500);
|
||||
}
|
||||
this.handleDebounce();
|
||||
};
|
||||
handleExportSelectDetail = () => {
|
||||
const { selectedRowKeys: ids, recordPayload } = this.tableRecordRef.state;
|
||||
if (ids.length === 0) {
|
||||
message.warning("请选择需要导出的数据");
|
||||
return;
|
||||
}
|
||||
const exportParams = _.reduce(_.keys(_.omitBy(recordPayload, it => !it)), (pre, cur) => pre + `&${cur}=${recordPayload[cur]}`, "");
|
||||
const payload = `?${exportParams}&ids=${ids.join(",")}`;
|
||||
this.handleExportDetail(payload);
|
||||
};
|
||||
handleExportAllDetail = () => {
|
||||
const { recordPayload } = this.tableRecordRef.state;
|
||||
const exportParams = _.reduce(_.keys(_.omitBy(recordPayload, it => !it)), (pre, cur) => pre + `&${cur}=${recordPayload[cur]}`, "");
|
||||
const payload = `?${exportParams}&ids=`;
|
||||
this.handleExportDetail(payload);
|
||||
};
|
||||
/*
|
||||
* Author: 黎永顺
|
||||
* Description: 数据采集-导入相关
|
||||
|
|
@ -494,18 +524,22 @@ class Index extends Component {
|
|||
export default Index;
|
||||
|
||||
export const DataCollectionDatePicker = (props) => {
|
||||
const { value, label, onChange, format = "YYYY-MM", key, screen = true } = props;
|
||||
return <WeaFormItem label={label} labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
|
||||
const {
|
||||
value, label, onChange, format = "YYYY-MM", key, screen = true,
|
||||
tip = "提示：默认显示本年截至当前月所有员工申报的累计专项附加及其他扣除额",
|
||||
labelCol = 8, wrapperCol = 16
|
||||
} = props;
|
||||
return <WeaFormItem label={label} labelCol={{ span: labelCol }} wrapperCol={{ span: wrapperCol }}>
|
||||
<WeaDatePicker value={value} onChange={(val) => onChange({ key, value: val })} format={format}/>
|
||||
{
|
||||
screen &&
|
||||
<WeaHelpfulTip title="提示：默认显示本年截至当前月所有员工申报的累计专项附加及其他扣除额" width={200}/>
|
||||
<WeaHelpfulTip title={tip} width={200}/>
|
||||
}
|
||||
</WeaFormItem>;
|
||||
};
|
||||
export const DataCollectionSelect = (props) => {
|
||||
const { value, label, onChange, options, key } = props;
|
||||
return <WeaFormItem label={label} labelCol={{ span: 10 }} wrapperCol={{ span: 14 }}>
|
||||
const { value, label, onChange, options, key, labelCol = 10, wrapperCol = 14 } = props;
|
||||
return <WeaFormItem label={label} labelCol={{ span: labelCol }} wrapperCol={{ span: wrapperCol }}>
|
||||
<WeaSelect value={value} onChange={(val) => onChange({ key, value: val })} options={options}/>
|
||||
</WeaFormItem>;
|
||||
};
|
||||
|
|
@ -518,8 +552,18 @@ export const DataCollectionDateRangePick = (props) => {
|
|||
const { range, label, onChange, format = "YYYY-MM", key } = props;
|
||||
const [value1 = "", value2 = ""] = range;
|
||||
return <WeaFormItem label={label} labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
|
||||
<WeaDatePicker value={value1} onChange={(val) => onChange({ key, value: [val, value2] })} format={format}/>
|
||||
<WeaDatePicker
|
||||
value={value1} onChange={(val) => onChange({ key, value: [val, value2] })} format={format}
|
||||
disabledDate={(current) => {
|
||||
return current && value2 && current.getTime() > new Date(value2).getTime();
|
||||
}}
|
||||
/>
|
||||
<span className="to">至</span>
|
||||
<WeaDatePicker value={value2} onChange={(val) => onChange({ key, value: [value1, val] })} format={format}/>
|
||||
<WeaDatePicker
|
||||
value={value2} onChange={(val) => onChange({ key, value: [value1, val] })} format={format}
|
||||
disabledDate={(current) => {
|
||||
return current && value1 && current.getTime() < new Date(value1).getTime();
|
||||
}}
|
||||
/>
|
||||
</WeaFormItem>;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -65,133 +65,6 @@ export const columns = [
|
|||
key: "title"
|
||||
}
|
||||
];
|
||||
|
||||
export const modalColumns = [
|
||||
{
|
||||
title: "姓名",
|
||||
dataIndex: "username",
|
||||
key: "username"
|
||||
},
|
||||
{
|
||||
title: "个税扣缴义务人",
|
||||
dataIndex: "taxAgentName",
|
||||
key: "taxAgentName"
|
||||
},
|
||||
{
|
||||
title: "部门",
|
||||
dataIndex: "departmentName",
|
||||
key: "departmentName"
|
||||
},
|
||||
{
|
||||
title: "手机号",
|
||||
dataIndex: "mobile",
|
||||
key: "mobile"
|
||||
},
|
||||
{
|
||||
title: "工号",
|
||||
dataIndex: "jobNum",
|
||||
key: "jobNum"
|
||||
},
|
||||
{
|
||||
title: "证件号码",
|
||||
dataIndex: "idNo",
|
||||
key: "idNo"
|
||||
},
|
||||
{
|
||||
title: "入职日期",
|
||||
dataIndex: "hiredate",
|
||||
key: "hiredate"
|
||||
},
|
||||
{
|
||||
title: "累计收入额",
|
||||
dataIndex: "addUpIncome",
|
||||
key: "addUpIncome"
|
||||
},
|
||||
{
|
||||
title: "累计减除费用",
|
||||
dataIndex: "addUpSubtraction",
|
||||
key: "addUpSubtraction"
|
||||
},
|
||||
{
|
||||
title: "累计社保个人合计",
|
||||
dataIndex: "addUpSocialSecurityTotal",
|
||||
key: "addUpSocialSecurityTotal"
|
||||
},
|
||||
{
|
||||
title: "累计公积金个人合计",
|
||||
dataIndex: "addUpAccumulationFundTotal",
|
||||
key: "addUpAccumulationFundTotal"
|
||||
},
|
||||
{
|
||||
title: "累计子女教育",
|
||||
dataIndex: "addUpChildEducation",
|
||||
key: "addUpChildEducation"
|
||||
},
|
||||
{
|
||||
title: "累计继续教育",
|
||||
dataIndex: "addUpContinuingEducation",
|
||||
key: "addUpContinuingEducation"
|
||||
},
|
||||
{
|
||||
title: "累计住房贷款利息",
|
||||
dataIndex: "addUpHousingLoanInterest",
|
||||
key: "addUpHousingLoanInterest"
|
||||
},
|
||||
{
|
||||
title: "累计住房租金",
|
||||
dataIndex: "addUpHousingRent",
|
||||
key: "addUpHousingRent"
|
||||
},
|
||||
{
|
||||
title: "累计赡养老人",
|
||||
dataIndex: "addUpSupportElderly",
|
||||
key: "addUpSupportElderly"
|
||||
},
|
||||
{
|
||||
title: "累计企业（职业）年金及其他福利",
|
||||
dataIndex: "addUpEnterpriseAndOther",
|
||||
key: "addUpEnterpriseAndOther"
|
||||
},
|
||||
{
|
||||
title: "累计其他免税扣除",
|
||||
dataIndex: "addUpOtherDeduction",
|
||||
key: "addUpOtherDeduction"
|
||||
},
|
||||
{
|
||||
title: "累计免税收入",
|
||||
dataIndex: "addUpTaxExemptIncome",
|
||||
key: "addUpTaxExemptIncome"
|
||||
},
|
||||
{
|
||||
title: "累计准予扣除的捐赠额",
|
||||
dataIndex: "addUpAllowedDonation",
|
||||
key: "addUpAllowedDonation"
|
||||
},
|
||||
{
|
||||
title: "累计减免税额",
|
||||
dataIndex: "addUpTaxSavings",
|
||||
key: "addUpTaxSavings"
|
||||
},
|
||||
{
|
||||
title: "累计已预扣预缴税额",
|
||||
dataIndex: "addUpAdvanceTax",
|
||||
key: "addUpAdvanceTax"
|
||||
},
|
||||
{
|
||||
title: "累计婴幼儿照护",
|
||||
dataIndex: "addUpInfantCare",
|
||||
key: "addUpInfantCare"
|
||||
},
|
||||
{
|
||||
title: "累计大病医疗",
|
||||
dataIndex: "addUpIllnessMedical",
|
||||
key: "addUpIllnessMedical"
|
||||
}
|
||||
|
||||
];
|
||||
|
||||
export const dataSource = [];
|
||||
|
||||
export const dataCollectCondition = [
|
||||
{
|
||||
items: [
|
||||
|
|
@ -353,11 +226,10 @@ export const dataCollectCondition = [
|
|||
defaultshow: true
|
||||
}
|
||||
];
|
||||
|
||||
export const taxOptions = [
|
||||
{
|
||||
key: "01",
|
||||
showname: "一月",
|
||||
showname: "一月"
|
||||
},
|
||||
{
|
||||
key: "02",
|
||||
|
|
@ -402,5 +274,5 @@ export const taxOptions = [
|
|||
{
|
||||
key: "12",
|
||||
showname: "十二月"
|
||||
},
|
||||
}
|
||||
];
|
||||
|
|
|
|||
|
|
@ -1,201 +0,0 @@
|
|||
import React from "react";
|
||||
import { Col, DatePicker, Row } from "antd";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import { WeaTable } from "ecCom";
|
||||
import "./editSlideContent.less";
|
||||
import moment from "moment";
|
||||
|
||||
const { MonthPicker } = DatePicker;
|
||||
|
||||
let emptyItem = {
|
||||
incomeLowerLimit: "0.00",
|
||||
incomeUpperLimit: "0.00",
|
||||
dutyFreeValue: "0.00",
|
||||
dutyFreeRate: "0.00",
|
||||
taxableIncomeLl: "0.00",
|
||||
taxableIncomeUl: "0.00",
|
||||
taxRate: "0.00",
|
||||
taxDeduction: "0.00"
|
||||
};
|
||||
|
||||
@inject("cumSituationStore", "taxAgentStore")
|
||||
@observer
|
||||
export default class EditSlideContent extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
taxAgentId: "",
|
||||
startDate: "",
|
||||
endDate: "",
|
||||
editable:
|
||||
this.props.editable === undefined ? "true" : this.props.editable
|
||||
};
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
// 初始化渲染页面
|
||||
const {
|
||||
taxAgentStore: { fetchTaxAgentOption }
|
||||
} = this.props;
|
||||
fetchTaxAgentOption();
|
||||
}
|
||||
|
||||
addItem() {
|
||||
const {
|
||||
taxRateStore: { setDataSource }
|
||||
} = this.props;
|
||||
let dataSource = [...this.props.taxRateStore.dataSource];
|
||||
let indexNum = 1;
|
||||
if (dataSource.length > 0) {
|
||||
indexNum = dataSource[dataSource.length - 1].indexNum + 1;
|
||||
}
|
||||
let item = { ...emptyItem };
|
||||
item.indexNum = indexNum;
|
||||
dataSource.push(item);
|
||||
setDataSource(dataSource);
|
||||
}
|
||||
|
||||
fetchCumDeductDetailList(param) {
|
||||
const { cumSituationStore } = this.props;
|
||||
const { getCumDeductDetailList, currentRecord } = cumSituationStore;
|
||||
getCumDeductDetailList(currentRecord.id, param);
|
||||
}
|
||||
|
||||
// 日期格式变化加载数据
|
||||
handleFetchCumDeductDetailList(startDate, endDate, taxAgentId) {
|
||||
let declareMonth = [];
|
||||
if (startDate != "" && startDate != undefined) {
|
||||
declareMonth.push(startDate);
|
||||
}
|
||||
|
||||
if (endDate != "" && endDate != undefined) {
|
||||
declareMonth.push(endDate);
|
||||
}
|
||||
let item = {
|
||||
taxAgentId: taxAgentId
|
||||
};
|
||||
if (declareMonth.length != 0) {
|
||||
item.taxYearMonth = declareMonth;
|
||||
}
|
||||
this.fetchCumDeductDetailList(item);
|
||||
}
|
||||
|
||||
onSelectChange = (val) => {
|
||||
const { onChangeSlideSelectKey } = this.props;
|
||||
onChangeSlideSelectKey && onChangeSlideSelectKey(val);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { cumSituationStore } = this.props;
|
||||
const { startDate, endDate, taxAgentId } = this.state;
|
||||
const {
|
||||
getCumDeductDetailList,
|
||||
currentRecord,
|
||||
slideColumns,
|
||||
slidePageObj,
|
||||
slideTableDataSource,
|
||||
setSlidePageObj,
|
||||
slideLoading
|
||||
} = cumSituationStore;
|
||||
const declareMonth = [startDate, endDate];
|
||||
|
||||
const pagination = {
|
||||
current: slidePageObj.current,
|
||||
pageSize: slidePageObj.pageSize,
|
||||
total: slidePageObj.total,
|
||||
showTotal: (total) => `共 ${total} 条`,
|
||||
showSizeChanger: true,
|
||||
onShowSizeChange(current, pageSize) {
|
||||
setSlidePageObj({ ...slidePageObj, current, pageSize });
|
||||
getCumDeductDetailList(currentRecord.id, {
|
||||
...slidePageObj,
|
||||
current,
|
||||
pageSize,taxAgentId:currentRecord.taxAgentId,
|
||||
declareMonth: _.filter(declareMonth, item => item)
|
||||
});
|
||||
},
|
||||
onChange(current) {
|
||||
setSlidePageObj({
|
||||
...slidePageObj,
|
||||
current,taxAgentId:currentRecord.taxAgentId,
|
||||
pageSize: slidePageObj.pageSize
|
||||
});
|
||||
getCumDeductDetailList(currentRecord.id, {
|
||||
...slidePageObj,
|
||||
current,
|
||||
pageSize,
|
||||
declareMonth: _.filter(declareMonth, item => item)
|
||||
});
|
||||
}
|
||||
};
|
||||
const newColumns = _.map([...slideColumns], (item) => ({ ...item }));
|
||||
const rowSelection = {
|
||||
selectedRowKeys: this.props.slideSelectedKey,
|
||||
onChange: this.onSelectChange
|
||||
};
|
||||
return (
|
||||
<div className="cumDeductSlide">
|
||||
<Row className="topLabelBar">
|
||||
<Col span={4}>
|
||||
<span className="username">{currentRecord.username}</span>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<span className="formLabel">申报月份</span>
|
||||
<div className="weaRangePickerWrapper">
|
||||
<div className="monthPickerWrapper">
|
||||
<MonthPicker
|
||||
width={100}
|
||||
format="YYYY-MM"
|
||||
value={startDate}
|
||||
onChange={(v) => {
|
||||
let startDate = "";
|
||||
if (v != "" && v != undefined) {
|
||||
startDate = moment(v).format("YYYY-MM");
|
||||
}
|
||||
this.setState({ startDate });
|
||||
this.handleFetchCumDeductDetailList(
|
||||
startDate,
|
||||
endDate,
|
||||
taxAgentId
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<span className="betweenLable">至</span>
|
||||
<div className="monthPickerWrapper">
|
||||
<MonthPicker
|
||||
width={100}
|
||||
value={endDate}
|
||||
onChange={(v) => {
|
||||
let endDate = "";
|
||||
if (v != "" && v != undefined) {
|
||||
endDate = moment(v).format("YYYY-MM");
|
||||
}
|
||||
this.setState({ endDate });
|
||||
this.handleFetchCumDeductDetailList(
|
||||
startDate,
|
||||
endDate,
|
||||
currentRecord.taxAgentId
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<div>
|
||||
<WeaTable
|
||||
rowKey="id"
|
||||
rowSelection={rowSelection}
|
||||
columns={newColumns}
|
||||
dataSource={slideTableDataSource}
|
||||
pagination={pagination}
|
||||
loading={slideLoading}
|
||||
scroll={{ x: newColumns ? newColumns.length * 150 : 900 }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
.cumDeductSlide {
|
||||
.topLabelBar {
|
||||
padding: 10px 20px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.formLabel {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.weaRangePickerWrapper {
|
||||
display: inline-block;
|
||||
.monthPickerWrapper {
|
||||
width: 100px;
|
||||
display: inline-block;
|
||||
}
|
||||
.betweenLable {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,64 +0,0 @@
|
|||
.slideOuterWrapper {
|
||||
.wea-slide-modal-title {
|
||||
height: initial;
|
||||
line-height: initial;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.rodal-close {
|
||||
z-index: 99;
|
||||
top: 10px !important;
|
||||
}
|
||||
|
||||
.linkWapper {
|
||||
a {
|
||||
color: #4d7ad8;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
i {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.moreIconWrapper {
|
||||
.ant-popover-inner {
|
||||
min-width: 106px
|
||||
}
|
||||
|
||||
.ant-popover-inner-content {
|
||||
padding: 0;
|
||||
|
||||
.ant-menu {
|
||||
.ant-menu-item {
|
||||
border-right: none;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -83,6 +83,30 @@
|
|||
}
|
||||
}
|
||||
|
||||
.screenSituationWrapper {
|
||||
padding: 0;
|
||||
|
||||
.wea-content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.wea-form-cell {
|
||||
padding: 0 16px;
|
||||
|
||||
.wea-date-picker {
|
||||
width: 70%;
|
||||
|
||||
input {
|
||||
min-width: inherit !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wea-helpful-tip {
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.dataContent {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -65,68 +65,6 @@ export const columns = [
|
|||
key: "title"
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
export const modalColumns = [
|
||||
{
|
||||
title: "姓名",
|
||||
dataIndex: "username",
|
||||
key: "username"
|
||||
},
|
||||
{
|
||||
title: "个税扣缴义务人",
|
||||
dataIndex: "taxAgentName",
|
||||
key: "taxAgentName"
|
||||
},
|
||||
{
|
||||
title: "部门",
|
||||
dataIndex: "departmentName",
|
||||
key: "departmentName"
|
||||
},
|
||||
{
|
||||
title: "手机号",
|
||||
dataIndex: "mobile",
|
||||
key: "mobile"
|
||||
},
|
||||
{
|
||||
title: "工号",
|
||||
dataIndex: "jobNum",
|
||||
key: "jobNum"
|
||||
},
|
||||
{
|
||||
title: "证件号码",
|
||||
dataIndex: "idNo",
|
||||
key: "idNo"
|
||||
},
|
||||
{
|
||||
title: "入职日期",
|
||||
dataIndex: "hiredate",
|
||||
key: "hiredate"
|
||||
},
|
||||
{
|
||||
title: "商业健康保险",
|
||||
dataIndex: "businessHealthyInsurance",
|
||||
key: "businessHealthyInsurance"
|
||||
},
|
||||
{
|
||||
title: "税延养老保险",
|
||||
dataIndex: "taxDelayEndowmentInsurance",
|
||||
key: "taxDelayEndowmentInsurance"
|
||||
},
|
||||
{
|
||||
title: "其他",
|
||||
dataIndex: "otherDeduction",
|
||||
key: "otherDeduction"
|
||||
},
|
||||
{
|
||||
title: "准予扣除的捐赠额",
|
||||
dataIndex: "deductionAllowedDonation",
|
||||
key: "deductionAllowedDonation"
|
||||
}
|
||||
];
|
||||
|
||||
export const dataSource = [];
|
||||
|
||||
export const dataCollectCondition = [
|
||||
{
|
||||
items: [
|
||||
|
|
|
|||
|
|
@ -1,213 +0,0 @@
|
|||
import React from "react";
|
||||
import { Col, DatePicker, Row } from "antd";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import { WeaTable } from "ecCom";
|
||||
import "./editSlideContent.less";
|
||||
import moment from "moment";
|
||||
|
||||
const { MonthPicker } = DatePicker;
|
||||
|
||||
let emptyItem = {
|
||||
incomeLowerLimit: "0.00",
|
||||
incomeUpperLimit: "0.00",
|
||||
dutyFreeValue: "0.00",
|
||||
dutyFreeRate: "0.00",
|
||||
taxableIncomeLl: "0.00",
|
||||
taxableIncomeUl: "0.00",
|
||||
taxRate: "0.00",
|
||||
taxDeduction: "0.00"
|
||||
};
|
||||
|
||||
@inject("otherDeductStore", "taxAgentStore")
|
||||
@observer
|
||||
export default class EditSlideContent extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
taxAgentId: "",
|
||||
startDate: "",
|
||||
endDate: "",
|
||||
editable:
|
||||
this.props.editable === undefined ? "true" : this.props.editable
|
||||
};
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
// 初始化渲染页面
|
||||
const {
|
||||
taxAgentStore: { fetchTaxAgentOption }
|
||||
} = this.props;
|
||||
fetchTaxAgentOption();
|
||||
}
|
||||
|
||||
addItem() {
|
||||
const {
|
||||
taxRateStore: { setDataSource }
|
||||
} = this.props;
|
||||
let dataSource = [...this.props.taxRateStore.dataSource];
|
||||
let indexNum = 1;
|
||||
if (dataSource.length > 0) {
|
||||
indexNum = dataSource[dataSource.length - 1].indexNum + 1;
|
||||
}
|
||||
let item = { ...emptyItem };
|
||||
item.indexNum = indexNum;
|
||||
dataSource.push(item);
|
||||
setDataSource(dataSource);
|
||||
}
|
||||
|
||||
fetchCumDeductDetailList(param) {
|
||||
const { otherDeductStore } = this.props;
|
||||
const { getOtherDeductDetailList, currentRecord } = otherDeductStore;
|
||||
getOtherDeductDetailList(currentRecord.id, param);
|
||||
}
|
||||
|
||||
// 日期格式变化加载数据
|
||||
handleFetchCumDeductDetailList(startDate, endDate, taxAgentId) {
|
||||
let declareMonth = [];
|
||||
if (startDate != "" && startDate != undefined) {
|
||||
declareMonth.push(startDate);
|
||||
}
|
||||
|
||||
if (endDate != "" && endDate != undefined) {
|
||||
declareMonth.push(endDate);
|
||||
}
|
||||
let item = {
|
||||
taxAgentId: taxAgentId
|
||||
};
|
||||
if (declareMonth.length != 0) {
|
||||
item.declareMonth = declareMonth;
|
||||
}
|
||||
this.fetchCumDeductDetailList(item);
|
||||
}
|
||||
|
||||
onSelectChange = (val) => {
|
||||
const { onChangeSlideSelectKey } = this.props;
|
||||
onChangeSlideSelectKey && onChangeSlideSelectKey(val);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { otherDeductStore } = this.props;
|
||||
const {
|
||||
getOtherDeductDetailList,
|
||||
currentRecord,
|
||||
slideColumns,
|
||||
slidePageObj,
|
||||
slideTableDataSource,
|
||||
setSlidePageObj,
|
||||
slideLoading
|
||||
} = otherDeductStore;
|
||||
const { startDate, endDate, taxAgentId } = this.state;
|
||||
const declareMonth = [startDate, endDate];
|
||||
|
||||
const pagination = {
|
||||
current: slidePageObj.current,
|
||||
pageSize: slidePageObj.pageSize,
|
||||
total: slidePageObj.total,
|
||||
showTotal: (total) => `共 ${total} 条`,
|
||||
showSizeChanger: true,
|
||||
onShowSizeChange(current, pageSize) {
|
||||
setSlidePageObj({ ...slidePageObj, current, pageSize });
|
||||
getOtherDeductDetailList(currentRecord.id, {
|
||||
...slidePageObj,
|
||||
current,
|
||||
pageSize,
|
||||
declareMonth: _.filter(declareMonth, item => item)
|
||||
});
|
||||
},
|
||||
onChange(current) {
|
||||
setSlidePageObj({
|
||||
...slidePageObj,
|
||||
current, taxAgentId: currentRecord.taxAgentId,
|
||||
pageSize: slidePageObj.pageSize
|
||||
});
|
||||
getOtherDeductDetailList(currentRecord.id, {
|
||||
...slidePageObj,
|
||||
current, taxAgentId: currentRecord.taxAgentId,
|
||||
declareMonth: _.filter(declareMonth, item => item)
|
||||
});
|
||||
}
|
||||
};
|
||||
const newColumns = _.map([...slideColumns], (item) => ({ ...item }));
|
||||
const rowSelection = {
|
||||
selectedRowKeys: this.props.slideSelectedKey,
|
||||
onChange: this.onSelectChange
|
||||
};
|
||||
return (
|
||||
<div className="cumDeductSlide">
|
||||
<Row className="topLabelBar">
|
||||
<Col span={4}>
|
||||
<span className="username">{currentRecord.username}</span>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<span className="formLabel">税款所属期</span>
|
||||
<div className="weaRangePickerWrapper">
|
||||
<div className="monthPickerWrapper">
|
||||
<MonthPicker
|
||||
width={100}
|
||||
format="YYYY-MM"
|
||||
value={startDate}
|
||||
onChange={(v) => {
|
||||
let startDate = "";
|
||||
if (v != "" && v != undefined) {
|
||||
startDate = moment(v).format("YYYY-MM");
|
||||
}
|
||||
this.setState({ startDate });
|
||||
this.handleFetchCumDeductDetailList(
|
||||
startDate,
|
||||
endDate,
|
||||
taxAgentId
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<span className="betweenLable">至</span>
|
||||
<div className="monthPickerWrapper">
|
||||
<MonthPicker
|
||||
width={100}
|
||||
value={endDate}
|
||||
onChange={(v) => {
|
||||
let endDate = "";
|
||||
if (v != "" && v != undefined) {
|
||||
endDate = moment(v).format("YYYY-MM");
|
||||
}
|
||||
this.setState({ endDate });
|
||||
this.handleFetchCumDeductDetailList(
|
||||
startDate,
|
||||
endDate,
|
||||
currentRecord.taxAgentId
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
{/*<Col span={8}>*/}
|
||||
{/* <span className="formLabel">个税扣缴义务人</span>*/}
|
||||
{/* <WeaSelect*/}
|
||||
{/* showSearch // 设置select可搜索*/}
|
||||
{/* style={{ width: 100 }}*/}
|
||||
{/* options={taxAgentOption}*/}
|
||||
{/* value={taxAgentId}*/}
|
||||
{/* onChange={(v) => {*/}
|
||||
{/* this.setState({ taxAgentId: v });*/}
|
||||
{/* this.handleFetchCumDeductDetailList(startDate, endDate, v);*/}
|
||||
{/* }}*/}
|
||||
{/* />*/}
|
||||
{/*</Col>*/}
|
||||
</Row>
|
||||
|
||||
<div>
|
||||
<WeaTable
|
||||
rowKey="id"
|
||||
rowSelection={rowSelection}
|
||||
columns={newColumns}
|
||||
dataSource={slideTableDataSource}
|
||||
pagination={pagination}
|
||||
loading={slideLoading}
|
||||
scroll={{ x: 900 }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
.cumDeductSlide {
|
||||
.topLabelBar {
|
||||
padding: 10px 20px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.formLabel {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.weaRangePickerWrapper {
|
||||
display: inline-block;
|
||||
.monthPickerWrapper {
|
||||
width: 100px;
|
||||
display: inline-block;
|
||||
}
|
||||
.betweenLable {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,25 +0,0 @@
|
|||
import React, { Component } from "react";
|
||||
import { Form } from "antd";
|
||||
import { WeaSelect } from "ecCom";
|
||||
import { optionAddWhole } from "../../../../util/options";
|
||||
|
||||
class InlineForm extends Component {
|
||||
|
||||
render() {
|
||||
const { taxAgentOption = [], form, onChange } = this.props;
|
||||
return (
|
||||
<Form inline>
|
||||
<Form.Item label="个税扣缴义务人">
|
||||
<WeaSelect
|
||||
style={{ width: 200 }}
|
||||
showSearch // 设置select可搜索
|
||||
options={optionAddWhole(taxAgentOption)}
|
||||
{...form.getFieldProps("taxAgentId", { initialValue: "", onChange })}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Form.create()(InlineForm);
|
||||
|
|
@ -1,87 +0,0 @@
|
|||
import React, { Component } from "react";
|
||||
import { WeaTable } from "ecCom";
|
||||
import * as API from "../../../../apis/special";
|
||||
|
||||
class SpecialAddContent extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
dataSource: [],
|
||||
columns: [],
|
||||
loading: {
|
||||
query: false
|
||||
},
|
||||
selectedRowKeys: [],
|
||||
pageInfo: {
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps, nextContext) {
|
||||
if (nextProps.specialId !== this.props.specialId) {
|
||||
nextProps.specialId && this.specialAddDeductionGetDetailList({ specialAddDeductionId: nextProps.specialId });
|
||||
}
|
||||
}
|
||||
|
||||
specialAddDeductionGetDetailList = (payload) => {
|
||||
this.setState({ loading: { ...this.state.loading, query: true } });
|
||||
API.specialAddDeductionGetDetailList(payload).then(({ status, data }) => {
|
||||
this.setState({ loading: { ...this.state.loading, query: false } });
|
||||
if (status) {
|
||||
const { columns, list: dataSource, pageSize, pageNum, total } = data;
|
||||
this.setState({
|
||||
columns, dataSource,
|
||||
pageInfo: {
|
||||
...this.pageInfo,
|
||||
pageSize, pageNum, total
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { columns, dataSource, pageInfo, selectedRowKeys, loading } = this.state;
|
||||
const { specialId } = this.props;
|
||||
const pagination = {
|
||||
...pageInfo,
|
||||
showTotal: (total) => `共 ${total} 条`,
|
||||
pageSizeOptions: ["10", "20", "50", "100"],
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
onShowSizeChange: (current, pageSize) => {
|
||||
this.setState({
|
||||
pageInfo: { ...pageInfo, current, pageSize }
|
||||
}, () => {
|
||||
this.specialAddDeductionGetDetailList({ specialAddDeductionId: specialId, current, pageSize });
|
||||
});
|
||||
},
|
||||
onChange: (current) => {
|
||||
this.setState({
|
||||
pageInfo: { ...pageInfo, current }
|
||||
}, () => {
|
||||
this.specialAddDeductionGetDetailList({ specialAddDeductionId: specialId, current });
|
||||
});
|
||||
}
|
||||
};
|
||||
const rowSelection = {
|
||||
selectedRowKeys,
|
||||
onChange: (selectedRowKeys) => this.setState({ selectedRowKeys })
|
||||
};
|
||||
return (
|
||||
<WeaTable
|
||||
rowKey="id"
|
||||
rowSelection={rowSelection}
|
||||
columns={columns}
|
||||
dataSource={dataSource}
|
||||
pagination={pagination}
|
||||
loading={loading.query}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default SpecialAddContent;
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,98 +0,0 @@
|
|||
.specialAddWrapper {
|
||||
height: 100%;
|
||||
|
||||
.wea-new-top-wapper {
|
||||
.specialAddContent {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
|
||||
.tableWrapper {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.wea-tab-search-ad-quick {
|
||||
.wea-tab-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.wea-tab-right {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.wea-search-container-search-ad-quick {
|
||||
top: 47px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.linkWapper {
|
||||
a {
|
||||
color: #4d7ad8;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
i {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.moreIconWrapper {
|
||||
.ant-popover-inner {
|
||||
min-width: 106px
|
||||
}
|
||||
|
||||
.ant-popover-inner-content {
|
||||
padding: 0;
|
||||
|
||||
.ant-menu {
|
||||
.ant-menu-item {
|
||||
border-right: none;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.specialAddSlideWrapper {
|
||||
.wea-slide-modal-title {
|
||||
height: initial;
|
||||
line-height: initial;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.rodal-close {
|
||||
z-index: 99;
|
||||
top: 10px !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (min-width: 1260px) {
|
||||
.specialAddSlideWrapper {
|
||||
.reqTopWrapper .wea-new-top-req-title > div:first-child > div {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1060px) and (max-width: 1260px) {
|
||||
.specialAddSlideWrapper {
|
||||
.reqTopWrapper .wea-new-top-req-title > div:first-child > div {
|
||||
max-width: calc(100% - 96px) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue