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