From a0634feaeff923d82e2e33a990e3a7d3b53405e4 Mon Sep 17 00:00:00 2001
From: MustangDeng <670124965@qq.com>
Date: Fri, 11 Mar 2022 10:44:42 +0800
Subject: [PATCH] =?UTF-8?q?=E5=85=B6=E4=BB=96=E6=89=A3=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
pc4mobx/hrmSalary/apis/otherDeduct.js | 32 ++-
.../otherDeduct/editSlideContent.js | 138 ++++++++++
.../otherDeduct/editSlideContent.less | 22 ++
.../dataAcquisition/otherDeduct/index.js | 245 +++++++++++++++++-
.../dataAcquisition/otherDeduct/index.less | 0
pc4mobx/hrmSalary/stores/index.js | 4 +-
pc4mobx/hrmSalary/stores/otherDeduct.js | 131 ++++++++++
7 files changed, 553 insertions(+), 19 deletions(-)
create mode 100644 pc4mobx/hrmSalary/pages/dataAcquisition/otherDeduct/editSlideContent.js
create mode 100644 pc4mobx/hrmSalary/pages/dataAcquisition/otherDeduct/editSlideContent.less
create mode 100644 pc4mobx/hrmSalary/pages/dataAcquisition/otherDeduct/index.less
create mode 100644 pc4mobx/hrmSalary/stores/otherDeduct.js
diff --git a/pc4mobx/hrmSalary/apis/otherDeduct.js b/pc4mobx/hrmSalary/apis/otherDeduct.js
index 58fd4c5f..6612bcee 100644
--- a/pc4mobx/hrmSalary/apis/otherDeduct.js
+++ b/pc4mobx/hrmSalary/apis/otherDeduct.js
@@ -3,7 +3,14 @@ import { WeaTools } from 'ecCom';
//数据采集-其他免税扣除列表
export const getOtherDeductList = params => {
- return WeaTools.callApi('/api/bs/hrmsalary/otherDeduction/list', 'POST', params);
+ return fetch('/api/bs/hrmsalary/otherDeduction/list', {
+ method: 'POST',
+ mode: 'cors',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify(params)
+ }).then(res => res.json())
}
//数据采集-其他免税扣除列表的高级搜索
@@ -17,7 +24,16 @@ export const getImportOtherDeductParam = params => {
}
//数据采集-其他免税扣除-导出
-export const exportOtherDeductList = params => {
+export const exportOtherDeductList = (ids = "") => {
+ fetch('/api/bs/hrmsalary/otherDeduction/export?ids=' + ids).then(res => res.blob().then(blob => {
+ var filename=`其他免税扣除.xlsx`
+ var a = document.createElement('a');
+ var url = window.URL.createObjectURL(blob);
+ a.href = url;
+ a.download = filename;
+ a.click();
+ window.URL.revokeObjectURL(url);
+ }))
return WeaTools.callApi('/api/bs/hrmsalary/otherDeduction/export', 'POST', params);
}
@@ -27,6 +43,14 @@ export const getOtherDeductDetailList = params => {
}
//数据采集-其他免税扣除-导出明细
-export const exportOtherDeductDetailList = params => {
- return WeaTools.callApi('/api/bs/hrmsalary/otherDeduction/exportDetail', 'POST', params);
+export const exportOtherDeductDetailList = ids => {
+ fetch('/api/bs/hrmsalary/otherDeduction/exportDetail?ids=' + ids).then(res => res.blob().then(blob => {
+ var filename=`其他免税扣除.xlsx`
+ var a = document.createElement('a');
+ var url = window.URL.createObjectURL(blob);
+ a.href = url;
+ a.download = filename;
+ a.click();
+ window.URL.revokeObjectURL(url);
+ }))
}
\ No newline at end of file
diff --git a/pc4mobx/hrmSalary/pages/dataAcquisition/otherDeduct/editSlideContent.js b/pc4mobx/hrmSalary/pages/dataAcquisition/otherDeduct/editSlideContent.js
new file mode 100644
index 00000000..f6106d94
--- /dev/null
+++ b/pc4mobx/hrmSalary/pages/dataAcquisition/otherDeduct/editSlideContent.js
@@ -0,0 +1,138 @@
+import React from 'react';
+import { Row, Col, Table, DatePicker } from "antd"
+import { inject, observer } from 'mobx-react';
+import { WeaInput, WeaTextarea, WeaSearchGroup, WeaSelect } from "ecCom";
+import { slideColumns} from './columns';
+import "./editSlideContent.less"
+import { WeaTableNew } from "comsMobx"
+const WeaTable = WeaTableNew.WeaTable;
+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('cumDeductStore', "taxAgentStore")
+@observer
+export default class EditSlideContent extends React.Component {
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ taxAgentId: "",
+ startDate: moment(new Date()).format("YYYY-MM"),
+ endDate: moment(new Date()).format("YYYY-MM"),
+ }
+ }
+
+ componentWillMount() { // 初始化渲染页面
+ this.state = {
+ editable: this.props.editable === undefined ? "true": this.props.editable
+ }
+ 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 { cumDeductStore} = this.props;
+ const { getCumDeductDetailList, currentRecord } = cumDeductStore;
+ getCumDeductDetailList(currentRecord.id, param);
+ }
+
+
+ render() {
+ const { taxAgentStore: {taxAgentOption}} = this.props;
+ const { cumDeductStore } = this.props;
+ const { slideTableStore, currentRecord } = cumDeductStore;
+ const { startDate, endDate, taxAgentId } = this.state;
+ return (
+
+
+
+ {currentRecord.username}
+
+
+ 申报月份
+
+
+ {
+ let startDate = moment(v).format("YYYY-MM")
+ this.setState({startDate})
+ this.fetchCumDeductDetailList({
+ declareMonth: [startDate, endDate],
+ taxAgentId: taxAgentId
+ })
+ }}
+ />
+
+
+ 至
+
+
+ {
+ let endDate = moment(v).format("YYYY-MM")
+ this.setState({endDate})
+ this.fetchCumDeductDetailList({
+ declareMonth: [startDate, endDate],
+ taxAgentId: taxAgentId
+ })
+ }}
+ />
+
+
+
+
+ 个税扣缴义务人
+ {
+ this.setState({taxAgentId: v})
+ this.fetchCumDeductDetailList({
+ declareMonth: [startDate, endDate],
+ taxAgentId: v
+ })
+ }}
+ />
+
+
+
+
+
+
+
+ )
+ }
+}
\ No newline at end of file
diff --git a/pc4mobx/hrmSalary/pages/dataAcquisition/otherDeduct/editSlideContent.less b/pc4mobx/hrmSalary/pages/dataAcquisition/otherDeduct/editSlideContent.less
new file mode 100644
index 00000000..14f22326
--- /dev/null
+++ b/pc4mobx/hrmSalary/pages/dataAcquisition/otherDeduct/editSlideContent.less
@@ -0,0 +1,22 @@
+.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;
+ }
+ }
+}
\ No newline at end of file
diff --git a/pc4mobx/hrmSalary/pages/dataAcquisition/otherDeduct/index.js b/pc4mobx/hrmSalary/pages/dataAcquisition/otherDeduct/index.js
index 5c4b1957..8b488d40 100644
--- a/pc4mobx/hrmSalary/pages/dataAcquisition/otherDeduct/index.js
+++ b/pc4mobx/hrmSalary/pages/dataAcquisition/otherDeduct/index.js
@@ -2,38 +2,151 @@ import React from 'react';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
-import { Button, Table, DatePicker } from 'antd';
+import { Button, Table, DatePicker, Dropdown, Menu, Modal, message } from 'antd';
-import { WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaTable } from 'ecCom';
+import { WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaDatePicker, WeaSelect, WeaHelpfulTip, WeaSlideModal } from 'ecCom';
+import { WeaTableNew } from "comsMobx"
+import moment from 'moment';
+
+const WeaTable = WeaTableNew.WeaTable;
import { renderNoright, getSearchs } from '../../../util'; // 渲染form数据的方法:因为多个页面都会使用,所以抽的公共方法在util中
import CustomTab from '../../../components/customTab';
import ContentWrapper from '../../../components/contentWrapper';
-
+import ImportModal from '../../../components/importModal'
import { columns, dataSource } from './columns';
+
const { MonthPicker } = DatePicker;
-@inject('baseTableStore')
+import "./index.less"
+
+import SlideModalTitle from '../../../components/slideModalTitle';
+import EditSlideContent from './editSlideContent';
+
+
+@inject('otherDeductStore', "taxAgentStore")
@observer
export default class OtherDeduct extends React.Component {
constructor(props) {
super(props);
this.state = {
value: "",
- selectedKey: "0"
+ selectedKey: "0",
+ visiable: false,
+ monthValue: moment(new Date()).format("YYYY-MM"),
+ taxAgentId: ""
}
}
- render() {
- const { baseTableStore } = this.props;
- const { loading, hasRight, form, condition, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd } = baseTableStore;
+ componentWillMount() { // 初始化渲染页面
+ const { otherDeductStore: { doInit }, taxAgentStore: { fetchTaxAgentOption } } = this.props;
+ doInit();
+ fetchTaxAgentOption();
+ }
+
+ getSearchsAdQuick() {
+ const { monthValue, taxAgentId } = this.state;
+ const { taxAgentStore: { taxAgentOption }, otherDeductStore: {form, getTableDatas} } = this.props;
+ return (
+
+
+ 申报月份:
+ {
+ this.setState({monthValue: v})
+ getTableDatas({ declareMonth: [v], taxAgentId })
+ }}
+ />
+
+
+
+
+
+
+
+ 个税扣缴义务人:
+ {
+ this.setState({taxAgentId: v})
+ getTableDatas({ taxAgentId: v, declareMonth: [monthValue]})
+ }}
+ />
+
+
+ )
+ }
+
+ onEdit = (record) => {
+ const { otherDeductStore: { slideVisiable, setSlideVisiable, getCumDeductDetailList, setCurrentRecord } } = this.props;
+ setSlideVisiable(true)
+ setCurrentRecord(record)
+ getCumDeductDetailList(record.id);
+ }
+
+ // 增加编辑功能,重写columns绑定事件
+ getColumns = (columns) => {
+ let newColumns = '';
+ newColumns = columns.map(column => {
+ let newColumn = column;
+ newColumn.render = (text, record, index) => { //前端元素转义
+ let valueSpan = record[newColumn.dataIndex + "span"] !== undefined ? record[newColumn.dataIndex + "span"] : record[newColumn.dataIndex];
+ switch(newColumn.dataIndex) {
+ case "username":
+ return {this.onEdit(record)}}
+ dangerouslySetInnerHTML={{ __html: valueSpan }} />
+ case "operate":
+ return {this.onEdit(record)}}>查看明细
+ default:
+ return
+ }
+ }
+ return newColumn;
+ });
+ return newColumns;
+ }
+
+ handleCancel() {
+ const { otherDeductStore } = this.props;
+ const { modalVisiable, setModalVisiable, setStep } = otherDeductStore
+ setModalVisiable(false);
+ setStep(0);
+ }
+
+
+ onOperatesClick = (record, index, operate, flag) => {
+ switch(operate.index.toString()){
+ case '0': // 查看明细
+ this.onEdit(record);
+ break;
+ }
+ };
+
+ render() {
+ const { otherDeductStore, taxAgentStore } = this.props;
+ const { loading, hasRight, form, condition, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd } = otherDeductStore;
+ const { taxAgentOption, step } = taxAgentStore
+ const { slideVisiable, setSlideVisiable, modalVisiable, setModalVisiable, slideTableStore } = otherDeductStore
+ const selectedRowKeys = toJS(tableStore.selectedRowKeys) || [];
+
+ const detailSelectedRowKeys = toJS(slideTableStore.selectedRowKeys) || [];
if (!hasRight && !loading) { // 无权限处理
return renderNoright();
}
const rightMenu = [// 右键菜单
- {
+ {
key: 'BTN_COLUMN',
icon: ,
content: '显示列定制',
@@ -54,18 +167,77 @@ export default class OtherDeduct extends React.Component {
];
const topTab = [
- ];
+ ];
const renderSearchOperationItem = () => {
return
-
}
+ const handleButtonClick = () => {
+ const { otherDeductStore: {exportCumDeductList}} = this.props;
+ exportCumDeductList();
+ }
+
+ const handleMenuClick = () => {
+ if(selectedRowKeys.length == 0) {
+ message.warning("未选择条目")
+ return
+ }
+ const { otherDeductStore: { exportCumDeductList } } = this.props;
+ exportCumDeductList(selectedRowKeys.join(","))
+ }
+
+ const handleBtnImport = () => {
+ const { otherDeductStore: { setModalVisiable, setStep } } = this.props;
+ setStep(0);
+ setModalVisiable(true)
+ }
+
+
+
+ const btns = [
+ ,
+
+ 导出选中
+
+ } type="ghost">
+ 导出全部
+
+ ]
+
+ const handleExportAllDetailClick = () => {
+ const {otherDeductStore: {exportCumDeductDetailList} } =this.props;
+ exportCumDeductDetailList();
+ }
+
+ const handleExportSelectedDetailClick = () => {
+ if(detailSelectedRowKeys.length == 0) {
+ message.warning("未选择条目")
+ return
+ }
+ const { otherDeductStore: { exportCumDeductDetailList } } = this.props;
+ exportCumDeductList(detailSelectedRowKeys.join(","))
+
+ }
+
+ const renderBtns = () => {
+ return (
+
+ 导出选中
+
+ } type="ghost">
+ 导出全部
+
+ )
+ }
+
+
return (
-
+
-
+
+
+ setShowSearchAd(bool)} //高级搜索面板受控
+ searchsAd={getSearchs(form, toJS(condition), 2)} // 高级搜索内部数据
+ buttonsAd={adBtn} // 高级搜索内部按钮
+ onSearch={getTableDatas} // 点搜索按钮时的回调
+ searchsAdQuick={this.getSearchsAdQuick()}
+ onSearchChange={v => form.updateFields({ username: v })} // 在搜索框中输入的文字改变时的回调: 这里需要同步高级搜索和外部搜索框的值
+ searchsBaseValue={form.getFormParams().username} // 外部input搜索值受控: 这里和高级搜索的requestname同步
+ />
+
+
+
{ this.handleCancel() }} />
+ {
+ slideVisiable && {this.state.currentOperate == "add" ? doSave() : doUpdate()}}
+ editable={false}
+ btns={
+ renderBtns()
+ }
+ />
+ }
+ content={()}
+ onClose={() => setSlideVisiable(false)}
+ showMask={true}
+ closeMaskOnClick={() => setSlideVisiable(false)} />
+ }
)
}
diff --git a/pc4mobx/hrmSalary/pages/dataAcquisition/otherDeduct/index.less b/pc4mobx/hrmSalary/pages/dataAcquisition/otherDeduct/index.less
new file mode 100644
index 00000000..e69de29b
diff --git a/pc4mobx/hrmSalary/stores/index.js b/pc4mobx/hrmSalary/stores/index.js
index cbe7f65a..d403ff6a 100644
--- a/pc4mobx/hrmSalary/stores/index.js
+++ b/pc4mobx/hrmSalary/stores/index.js
@@ -5,6 +5,7 @@ import { TaxAgentStore } from './taxAgent';
import { BaseFormStore } from './baseForm';
import { taxRateStore } from './taxRate';
import { CumDeductStore } from "./cumDeduct"
+import { OtherDeductStore } from "./otherDeduct"
module.exports = {
baseFormStore: new BaseFormStore(),
@@ -12,6 +13,7 @@ module.exports = {
mySalaryStore: new MySalaryStore(),
taxAgentStore: new TaxAgentStore(),
taxRateStore: new taxRateStore(),
- cumDeductStore: new CumDeductStore()
+ cumDeductStore: new CumDeductStore(),
+ otherDeductStore: new OtherDeductStore()
};
diff --git a/pc4mobx/hrmSalary/stores/otherDeduct.js b/pc4mobx/hrmSalary/stores/otherDeduct.js
new file mode 100644
index 00000000..d45b932f
--- /dev/null
+++ b/pc4mobx/hrmSalary/stores/otherDeduct.js
@@ -0,0 +1,131 @@
+import { observable, action, toJS } from 'mobx';
+import { message } from 'antd';
+import { WeaForm, WeaTableNew } from 'comsMobx';
+
+import * as API from '../apis/otherDeduct'; // 引入API接口文件
+import * as TaxAgentApi from '../apis/taxAgent'
+
+const { TableStore } = WeaTableNew;
+
+export class OtherDeductStore {
+ @observable tableStore = new TableStore(); // new table
+ @observable slideTableStore = new TableStore();
+ @observable form = new WeaForm(); // nrew 一个form
+ @observable condition = []; // 存储后台得到的form数据
+ @observable hasRight = true; // 判断用户是有权限查看当前页面: 没有权限渲染无权限页面,有权限渲染数据
+ @observable showSearchAd = false; // 高级搜索面板显示
+ @observable loading = true; // 数据加载状态
+ @observable step = 0; // 当前所在第几步
+ @observable slideVisiable = false; // slide 是否隐藏
+
+ @observable slideDataSource = [];
+
+ @observable importResult = {}
+ @observable modalVisiable = false; // 模态框显示
+
+ @observable currentRecord = {}; // 当前record
+
+ @action
+ setCurrentRecord = currentRecord => this.currentRecord = currentRecord;
+
+ @action
+ setModalVisiable = visiable => this.modalVisiable = visiable
+
+ @action
+ setStep = step => this.step = step;
+
+ @action
+ setSlideVisiable = slideVisiable => this.slideVisiable = slideVisiable;
+
+
+ // 初始化操作
+ @action
+ doInit = () => {
+ this.getCondition();
+ this.getTableDatas();
+ }
+
+ // 获得高级搜索表单数据
+ @action
+ getCondition = () => {
+ API.getOtherDeductSaCondition().then(action(res => {
+ if (res.status) { // 接口请求成功/失败处理
+ this.condition = res.data.condition;
+ this.form.initFormFields(res.data.condition); // 渲染高级搜索form表单
+ } else {
+ message.error(res.msg || '接口调用失败!')
+ }
+ }));
+ }
+
+ // 渲染table数据
+ @action
+ getTableDatas = (params) => {
+ params = params || {};
+ this.loading = true;
+ let requestParams = this.form.getFormParams() || {};
+ requestParams = {...requestParams, ...params}
+ API.getOtherDeductList(params).then(action(res => {
+ if (res.status) { // 接口请求成功/失败处理
+ this.tableStore.getDatas(res.data.datas); // table 请求数据
+ } else {
+ message.error(res.msg || '接口调用失败!')
+ }
+ this.loading = false;
+ }));
+ }
+
+ @action
+ setShowSearchAd = bool => this.showSearchAd = bool;
+
+ // 高级搜索 - 搜索
+ @action doSearch = () => {
+ this.getTableDatas();
+ this.showSearchAd = false;
+ }
+
+ // 导入
+ @action importFile = (params) => {
+ API.importCumDeductParam(params).then(action(res => {
+ if(res.status) {
+ this.importResult = res.data
+ }
+ }))
+ }
+
+ // 导入预览
+ @action previewImport = (params) => {
+ API.importCumDeductPreview(params).then(action(res => {
+ if(res.status) {
+ this.slideDataSource = res.data.preview
+ }
+ }))
+ }
+
+ // 导出
+ @action exportCumDeductList = (ids = "") => {
+ API.exportCumDeductList(ids)
+ }
+
+ // 查询明细
+ @action getCumDeductDetailList = (id, param = {}) => {
+ let requestParams = {"accumulatedSpecialAdditionalDeductionId": id};
+ requestParams = {...requestParams, ...param}
+ API.getCumDeductDetailList(requestParams).then(res => {
+ if(res.status) {
+ if (res.status) { // 接口请求成功/失败处理
+ this.slideTableStore.getDatas(res.data.datas); // table 请求数据
+ } else {
+ message.error(res.msg || '接口调用失败!')
+ }
+ }
+ })
+ }
+
+ // 导出明细
+ @action exportCumDeductDetailList = (ids = "") => {
+ API.exportCumDeductDetailList(ids)
+ }
+
+
+}
\ No newline at end of file