个税扣缴义务人页面
This commit is contained in:
MustangDeng
parent
93a07d6ff2
commit
975d1e2049
|
|
@ -1,8 +1,9 @@
|
|||
import { WeaTools } from 'ecCom';
|
||||
|
||||
|
||||
//个税扣缴义务人列表
|
||||
export const getTaxAgentList = params => {
|
||||
return WeaTools.callApi('/api/bs/hrmsalary/taxAgent/list', 'POST', params);
|
||||
return WeaTools.callApi('/api/bs/hrmsalary/taxAgent/list', 'GET', params);
|
||||
}
|
||||
|
||||
//获取个税扣缴义务人表单
|
||||
|
|
@ -22,7 +23,14 @@ export const updateTaxAgent = params => {
|
|||
|
||||
//删除个税扣缴义务人
|
||||
export const deleteTaxAgent = params => {
|
||||
return WeaTools.callApi('/api/bs/hrmsalary/taxAgent/delete', 'POST', params);
|
||||
return fetch('/api/bs/hrmsalary/taxAgent/delete', {
|
||||
method: 'POST',
|
||||
mode: 'cors',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(params)
|
||||
})
|
||||
}
|
||||
|
||||
//个税扣缴义务人下拉列表
|
||||
|
|
|
|||
|
|
@ -144,4 +144,4 @@ export default class MySalary extends React.Component {
|
|||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import React from 'react'
|
||||
import { Button, Modal, Row, Col } from 'antd';
|
||||
import { Button, Modal, Row, Col, message } from 'antd';
|
||||
import { WeaTextarea, WeaInput } from "ecCom";
|
||||
import { logColumns, dataSource } from "../../common/columns"
|
||||
|
||||
|
|
@ -7,13 +7,44 @@ export default class EditModal extends React.Component {
|
|||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
value: ""
|
||||
name: "",
|
||||
remark: ""
|
||||
}
|
||||
}
|
||||
|
||||
componentWillMount() { // 初始化渲染页面
|
||||
this.setState({
|
||||
name: this.props.name,
|
||||
remark: this.props.remark
|
||||
})
|
||||
}
|
||||
|
||||
validate() {
|
||||
if(this.state.name == "") {
|
||||
message.warning("个税扣缴义务人名称不能为空");
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
submitAdd() {
|
||||
if(this.validate) {
|
||||
this.props.onSubmitAdd({name: this.state.name, description: this.state.remark})
|
||||
}
|
||||
}
|
||||
|
||||
submitUpdate() {
|
||||
if(this.validate) {
|
||||
this.props.onSubmitUpdate({id: this.props.currentId, name: this.state.name, description: this.state.remark})
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Modal title={this.props.title} visible={this.props.visible}
|
||||
onOk={() => alert("ok")} onCancel={this.props.onCancel}
|
||||
onOk={() => {
|
||||
this.props.operate == "add" ? this.submitAdd() : this.submitUpdate();
|
||||
}} onCancel={this.props.onCancel}
|
||||
>
|
||||
<Row gutter={16}>
|
||||
<Col span={6}>
|
||||
|
|
@ -22,16 +53,10 @@ export default class EditModal extends React.Component {
|
|||
<Col span={18}>
|
||||
<WeaInput
|
||||
id="name"
|
||||
value={this.state.value}
|
||||
onChange={value => {
|
||||
console.log(value);
|
||||
this.setState({ value });
|
||||
}}
|
||||
customBlur={v => {
|
||||
console.log("custom blur", v);
|
||||
}}
|
||||
onFocus={v => console.log("focus", v)}
|
||||
onBlur={v => console.log("blur", v)}
|
||||
value={this.state.name}
|
||||
onChange={(v) => {this.setState({
|
||||
name: v
|
||||
})}}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
|
|
@ -41,7 +66,13 @@ export default class EditModal extends React.Component {
|
|||
<div className="formLabel">备注:</div>
|
||||
</Col>
|
||||
<Col span={18}>
|
||||
<WeaTextarea value={this.state.value} onChange={(value) => { this.setState({ value }) }} />
|
||||
<WeaTextarea value={this.state.remark} onChange={
|
||||
(v) => {
|
||||
this.setState({
|
||||
remark: v
|
||||
})
|
||||
}
|
||||
} />
|
||||
</Col>
|
||||
</Row>
|
||||
</Modal>
|
||||
|
|
|
|||
|
|
@ -5,8 +5,11 @@ import { toJS } from 'mobx';
|
|||
import { Button, Table, DatePicker, Row, Col, Modal, Form, Input } from 'antd';
|
||||
const { TextArea } = Input;
|
||||
|
||||
import { WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaTable, WeaInputSearch, WeaInput, WeaTextarea } from 'ecCom';
|
||||
import { WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaInputSearch, WeaInput, WeaTextarea } from 'ecCom';
|
||||
|
||||
import { WeaTableNew } from 'comsMobx';
|
||||
|
||||
const WeaTable = WeaTableNew.WeaTable;
|
||||
import { renderNoright, getSearchs } from '../../util'; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
|
||||
import CustomTab from '../../components/customTab';
|
||||
import ContentWrapper from '../../components/contentWrapper';
|
||||
|
|
@ -30,19 +33,87 @@ export default class TaxAgent extends React.Component {
|
|||
selectedKey: "0",
|
||||
searchValue: "",
|
||||
logViewVisiable: false,
|
||||
modalVisiable: false
|
||||
modalVisiable: false,
|
||||
remarkValue: "",
|
||||
nameValue: "",
|
||||
title: "新增个税扣缴义务人",
|
||||
currentOperate: "add",
|
||||
currentId: "",
|
||||
}
|
||||
}
|
||||
|
||||
componentWillMount() { // 初始化渲染页面
|
||||
const { taxAgentStore: { doInit } } = this.props;
|
||||
doInit();
|
||||
}
|
||||
|
||||
showLogView = () => {
|
||||
this.setState({logViewVisiable: true})
|
||||
}
|
||||
|
||||
onEdit = (record) => {
|
||||
this.setState({
|
||||
remarkValue: record.description,
|
||||
nameValue: record.name,
|
||||
title: "编辑个税扣缴义务人",
|
||||
currentOperate: "update",
|
||||
currentId: record.id
|
||||
})
|
||||
const {taxAgentStore : { setModalVisiable }} = this.props
|
||||
setModalVisiable(true)
|
||||
}
|
||||
|
||||
// 增加编辑功能，重写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 "name":
|
||||
return <a onClick={() => {this.onEdit(record)}}
|
||||
dangerouslySetInnerHTML={{ __html: valueSpan }} />
|
||||
case "operate":
|
||||
return <a onClick={() => {this.onEdit(record)}}>编辑</a>
|
||||
default:
|
||||
return <div dangerouslySetInnerHTML={{ __html: valueSpan }} />
|
||||
}
|
||||
}
|
||||
return newColumn;
|
||||
});
|
||||
columns.push(
|
||||
{
|
||||
title: "操作",
|
||||
dataIndex: 'operate',
|
||||
key: 'operate',
|
||||
render: (text, record) => {
|
||||
return <a onClick={() => {this.onEdit(record)}}></a>
|
||||
}
|
||||
}
|
||||
)
|
||||
return newColumns;
|
||||
}
|
||||
|
||||
onOperatesClick = (record, index, operate, flag) => {
|
||||
const {taxAgentStore : {doDelete}} = this.props;
|
||||
switch(operate.index.toString()){
|
||||
case '0': // 删除
|
||||
Modal.confirm({
|
||||
title: "信息确认",
|
||||
content: "薪资档案中有员工在用该个税扣缴义务人，清空后才可删除",
|
||||
onOk() {
|
||||
doDelete([record.id])
|
||||
},
|
||||
onCancel() {}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const { taxAgentStore } = this.props;
|
||||
const { loading, hasRight, form, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd } = taxAgentStore;
|
||||
const { modelVisiable, setModelVisiable } = taxAgentStore;
|
||||
// const { condition } = baseFormStore
|
||||
const { loading, hasRight, form, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd, doInsert } = taxAgentStore;
|
||||
const { modalVisiable, setModalVisiable, doUpdate } = taxAgentStore;
|
||||
|
||||
const topTab = [
|
||||
];
|
||||
|
|
@ -61,26 +132,30 @@ export default class TaxAgent extends React.Component {
|
|||
onClick: this.showLogView
|
||||
},
|
||||
];
|
||||
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>,
|
||||
];
|
||||
|
||||
const initEditModal = () => {
|
||||
this.setState({
|
||||
nameValue: '',
|
||||
remarkValue: "",
|
||||
title: "新增个税扣缴义务人",
|
||||
currentOperate: "add"
|
||||
})
|
||||
}
|
||||
|
||||
const showEditModal = () => {
|
||||
|
||||
initEditModal();
|
||||
setModalVisiable(true)
|
||||
}
|
||||
|
||||
const renderSearchOperationItem = () => {
|
||||
return <div>
|
||||
<Button type="primary" onClick={() => { this.setState({modalVisiable: true}) }}>新增</Button>
|
||||
<Button type="primary" onClick={() => { showEditModal() }}>新增</Button>
|
||||
{' '}
|
||||
<WeaInputSearch
|
||||
value={this.state.searchValue}
|
||||
placeholder={'请输入个税扣缴义务人名称'}
|
||||
onSearch={(name) => doSearch(name)}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
|
|
@ -113,7 +188,6 @@ export default class TaxAgent extends React.Component {
|
|||
iconBgcolor='#F14A2D' // 左侧图标背景色
|
||||
showDropIcon={true} // 是否显示下拉按钮
|
||||
dropMenuDatas={rightMenu} // 下拉菜单（和页面的右键菜单相同）
|
||||
dropMenuProps={{ collectParams }} // 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能
|
||||
>
|
||||
<CustomTab topTab={topTab}
|
||||
searchOperationItem={
|
||||
|
|
@ -123,9 +197,15 @@ export default class TaxAgent extends React.Component {
|
|||
this.setState({ selectedKey: v })
|
||||
}}
|
||||
/>
|
||||
<Row gutter={16}>
|
||||
<Row gutter={16} style={{overflow: "hidden", width: "100%"}}>
|
||||
<Col sm={24} md={24} lg={18} xl={18}>
|
||||
<WeaTable columns={columns} dataSource={dataSource} />
|
||||
<WeaTable // table内部做了loading加载处理，页面就不需要再加了
|
||||
comsWeaTableStore={tableStore} // table store
|
||||
hasOrder={true} // 是否启用排序
|
||||
needScroll={true} // 是否启用table内部列表滚动，将自适应到父级高度
|
||||
getColumns={this.getColumns}
|
||||
onOperatesClick={this.onOperatesClick.bind(this)}
|
||||
/>
|
||||
</Col>
|
||||
<Col sm={24} md={24} lg={6} xl={6}>
|
||||
{renderTipsLabel()}
|
||||
|
|
@ -135,11 +215,19 @@ export default class TaxAgent extends React.Component {
|
|||
</WeaTop>
|
||||
</WeaRightMenu>
|
||||
|
||||
<EditModal
|
||||
title={"新增个税扣缴义务人"}
|
||||
visible={this.state.modalVisiable}
|
||||
onCancel={() => {this.setState({modalVisiable: false})}}
|
||||
{
|
||||
modalVisiable && <EditModal
|
||||
title={this.state.title}
|
||||
visible={modalVisiable}
|
||||
name={this.state.nameValue}
|
||||
remark={this.state.remarkValue}
|
||||
onCancel={() => {setModalVisiable(false)}}
|
||||
onSubmitAdd={(params) => {doInsert(params)}}
|
||||
operate={this.state.currentOperate}
|
||||
onSubmitUpdate={(params) => {doUpdate(params)}}
|
||||
currentId={this.state.currentId}
|
||||
/>
|
||||
}
|
||||
|
||||
<LogViewModal
|
||||
visible={this.state.logViewVisiable}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@
|
|||
border-bottom: 1px solid #e2ecf2;
|
||||
border-right: 1px solid #e2ecf2;
|
||||
border-radius: 0px 0px 5px 5px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
.titleWrapper {
|
||||
width: 100%;
|
||||
line-height: 19.2px;
|
||||
|
|
@ -26,6 +28,10 @@
|
|||
.formLabel {
|
||||
font-size: 14px;
|
||||
}
|
||||
.contentWrapper {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,9 @@ import { message } from 'antd';
|
|||
import { WeaForm, WeaTableNew } from 'comsMobx';
|
||||
import moment from 'moment'
|
||||
|
||||
import * as API from '../apis'; // 引入API接口文件
|
||||
import * as API from '../apis/taxAgent'; // 引入API接口文件
|
||||
import { columns } from '../pages/socialSecurityBenefits/archives/columns';
|
||||
import { dataSource } from '../pages/mySalary/columns';
|
||||
|
||||
const { TableStore } = WeaTableNew;
|
||||
|
||||
|
|
@ -15,10 +17,25 @@ export class TaxAgentStore {
|
|||
@observable showSearchAd = false; // 高级搜索面板显示
|
||||
@observable loading = true; // 数据加载状态
|
||||
|
||||
@observable modalVisiable = false; // EditModal 模态框
|
||||
|
||||
@observable columns = [];
|
||||
@observable dataSource = [];
|
||||
|
||||
|
||||
|
||||
@action
|
||||
setModalVisiable = visiable => this.modalVisiable = visiable;
|
||||
|
||||
@action
|
||||
setColumns = columns => this.columns = columns;
|
||||
|
||||
@action
|
||||
setDataSource = dataSource => this.dataSource = dataSource;
|
||||
|
||||
// 初始化操作
|
||||
@action
|
||||
doInit = () => {
|
||||
this.getCondition();
|
||||
this.getTableDatas();
|
||||
}
|
||||
|
||||
|
|
@ -39,12 +56,12 @@ export class TaxAgentStore {
|
|||
@action
|
||||
getTableDatas = (params) => {
|
||||
this.loading = true;
|
||||
const formParams = this.form.getFormParams() || {};
|
||||
params = params || formParams;
|
||||
API.getTableDatas(params).then(action(res => {
|
||||
if (res.api_status) { // 接口请求成功/失败处理
|
||||
this.tableStore.getDatas(res.datas); // table 请求数据
|
||||
this.hasRight = res.hasRight;
|
||||
params = params || {};
|
||||
API.getTaxAgentList(params).then(action(res => {
|
||||
if (res.status) { // 接口请求成功/失败处理
|
||||
let current = this.tableStore.current || 1;
|
||||
let sortParams = this.tableStore.sortParams.toJS() || [];
|
||||
this.tableStore.getDatas(res.data.datas)
|
||||
} else {
|
||||
message.error(res.msg || '接口调用失败！')
|
||||
}
|
||||
|
|
@ -56,9 +73,50 @@ export class TaxAgentStore {
|
|||
setShowSearchAd = bool => this.showSearchAd = bool;
|
||||
|
||||
// 高级搜索 - 搜索
|
||||
@action doSearch = () => {
|
||||
this.getTableDatas();
|
||||
@action doSearch = (name) => {
|
||||
this.getTableDatas({name});
|
||||
this.showSearchAd = false;
|
||||
}
|
||||
|
||||
// 新增
|
||||
@action doInsert = (params) => {
|
||||
API.saveTaxAgent(params).then(res => {
|
||||
if(res.status) {
|
||||
message.success("新增成功");
|
||||
this.setModalVisiable(false)
|
||||
this.getTableDatas();
|
||||
this.showSearchAd = false;
|
||||
} else {
|
||||
message.error("新增失败");
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 更新
|
||||
@action doUpdate = (params) => {
|
||||
API.updateTaxAgent(params).then(res => {
|
||||
if(res.status) {
|
||||
message.success("更新成功");
|
||||
this.setModalVisiable(false)
|
||||
this.getTableDatas();
|
||||
this.showSearchAd = false;
|
||||
} else {
|
||||
message.error("新增失败");
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@action doDelete = (params) => {
|
||||
API.deleteTaxAgent(params).then(res => {
|
||||
if(res.status) {
|
||||
message.success("删除成功");
|
||||
this.setModalVisiable(false)
|
||||
this.getTableDatas();
|
||||
this.showSearchAd = false;
|
||||
} else {
|
||||
message.error("删除失败");
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue