qt
/
salary-management-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

工资单模板接口对接

This commit is contained in:
MustangDeng 2022-04-14 19:32:57 +08:00
parent 7f08c6ae5c
commit 5b743bc4a9
7 changed files with 309 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
pc4mobx/hrmSalary/apis/payroll.js
View File

@ -58,7 +58,7 @@ export const getPayrollTemplateList = params => {
//工资单-获取薪资账套下拉列表
export const getPayrollTemplateLedgerList = params => {
return WeaTools.callApi('/api/bs/hrmsalary/salaryBill/template/selectSalarySobList', 'get', params);
return WeaTools.callApi('/api/bs/hrmsalary/salaryBill/template/selectSalarySobList', 'POST', params);
}
@ -79,7 +79,14 @@ export const getPayrollItemList = params => {
//工资单-更改默认使用
export const changePayrollDefaultUse = params => {
return WeaTools.callApi('/api/bs/hrmsalary/salaryBill/template/defaultUse', 'get', params);
return fetch('/api/bs/hrmsalary/salaryBill/template/defaultUse', {
method: 'POST',
mode: 'cors',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(params)
}).then(res => res.json())
}
//工资单-新建工资单
@ -112,13 +119,27 @@ export const updatePayrollShow = params => {
//工资单-复制工资单
export const duplicatePayroll = params => {
return WeaTools.callApi('/api/bs/hrmsalary/salaryBill/template/copy', 'POST', params);
return fetch('/api/bs/hrmsalary/salaryBill/template/copy', {
method: 'POST',
mode: 'cors',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(params)
}).then(res => res.json())
}
//工资单-删除工资单
export const deletePayroll = params => {
return WeaTools.callApi('/api/bs/hrmsalary/salaryBill/template/delete', 'POST', params);
return fetch('/api/bs/hrmsalary/salaryBill/template/delete', {
method: 'POST',
mode: 'cors',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(params)
}).then(res => res.json())
}
//工资单-获取租户名

3
pc4mobx/hrmSalary/pages/payroll/components/backgroundUpload.js
View File

@ -28,6 +28,9 @@ function beforeUpload(file) {
visible: false
}
}
componentWillMount() {
this.props.imageUrl && this.setState({imageUrl: this.props.imageUrl})
}
// 上传完成监听
handleChange = (info) => {

38
pc4mobx/hrmSalary/pages/payroll/copyModal.js Normal file
View File

@ -0,0 +1,38 @@
import React from 'react'
import { notNull } from '../../util/validate'
import { Modal, Button, Row, Col, message } from 'antd';
import { WeaInput } from "ecCom"
import RequiredLabelTip from '../../components/requiredLabelTip';
export default class CopyModal extends React.Component {
constructor(props) {
super(props)
this.state = {
name: ''
}
}
handleChange(value) {
this.setState({name: value})
}
handleSave() {
if(!notNull(this.state.name)) {
message.warning("工资单名称不能为空")
}
this.props.onSave && this.props.onSave(this.state.name)
}
render(){
const { name } = this.state;
return (
<Modal width={600} title="复制工资单" visible={this.props.visible} onCancel={() => {this.props.onCancel()}} footer={
<Button type="primary" onClick={() => {this.handleSave()}}>保存</Button>
}>
<Row>
<Col span={6}>工资单名称<RequiredLabelTip /></Col>
<Col span={18}>
<WeaInput value={name}
onChange={(value) => {this.handleChange(value)}}/>
</Col>
</Row>
</Modal>
)
}
}

115
pc4mobx/hrmSalary/pages/payroll/index.js
View File

@ -2,7 +2,7 @@ import React from 'react';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import { Button, Table, DatePicker, message } from 'antd';
import { Button, Table, DatePicker, message, Modal } from 'antd';
import moment from 'moment'
import { WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaTable,WeaDatePicker, WeaHelpfulTip, WeaSelect, WeaInputSearch, WeaSlideModal } from 'ecCom';
@ -19,6 +19,7 @@ import ShowSettingForm from './stepForm/showSettingForm'
import SlideModalTitle from "../../components/slideModalTitle"
import TemplateSettingList from './templateSettingList'
import { notNull } from '../../util/validate';
import CopyModal from './copyModal';
const { MonthPicker } = DatePicker;
@ -37,7 +38,13 @@ export default class Payroll extends React.Component {
currentStep: 0,
stepSlideVisible: false,
selectedTab: 0,
editSlideVisible: false
editSlideVisible: false,
initSelected: false,
ledgerOptions: [],
templateSearchValue: "", // 工资单模板列表-搜索条件-名称
templateSelect: "", // 工资单模板列表-搜索条件-账套下拉选中值
templateCurrentId: "",
copyModalVisible: false
}
columns.map(item => {
if(item.dataIndex == "cz") {
@ -64,7 +71,7 @@ export default class Payroll extends React.Component {
item.render = () => {
return (
<div style={{display: "inline-block"}}>
<a style={{marginRight: "10px"}} >编辑</a>
<a style={{marginRight: "10px"}}>编辑</a>
<a style={{marginRight: "10px"}}>复制</a>
<a style={{marginRight: "10px"}}>删除</a>
<a >操作日志</a>
@ -90,11 +97,81 @@ export default class Payroll extends React.Component {
})
}
componentWillMount() {
const { payrollStore } = this.props;
const { getPayrollTemplateLedgerList } = payrollStore;
// 获取薪资账套下拉列表
getPayrollTemplateLedgerList().then((options) => {
this.setState({
initSelected: true,
ledgerOptions: options
})
})
}
// 模板搜索
handleTemplateSearch() {
const { templateSearchValue, templateSelect } = this.state;
let params = {name: templateSearchValue, salarySobId: templateSelect}
const { payrollStore: {getPayrollTemplateList}} = this.props;
getPayrollTemplateList(params)
}
// 模板选择框下拉改变事件
handleTemplateSelectChange(value) {
this.setState({templateSelect: value})
this.handleTemplateSearch()
}
// 模板列表编辑
handleTemplateListEdit(record) {
this.setState({templateCurrentId: record.id, selectedTab: 0},() => {
this.setState({editSlideVisible: true})
})
}
// 模板列表复制
handleTemplateListCopy(record) {
this.setState({
templateCurrentId: record.id
}, () => {
this.setState({
copyModalVisible: true
})
})
}
// 复制模板保存事件监听
handleCopyModalSave(value) {
const { payrollStore } = this.props;
const { duplicatePayroll } = payrollStore
duplicatePayroll(this.state.templateCurrentId, value).then(() => {
this.setState({
copyModalVisible: false
})
})
}
// 模板列表删除
handleTemplateListDelete(record) {
const { payrollStore: { deletePayroll }} = this.props;
Modal.confirm({
title: '信息确认',
content: '确认删除',
onOk:() => {
deletePayroll([record.id])
},
onCancel: () => {
},
});
}
render() {
const { payrollStore } = this.props;
const { loading, hasRight, form, condition, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd } = payrollStore;
const { currentStep, selectedTab } = this.state
const { currentStep, selectedTab, templateSearchValue, templateSelect } = this.state
if (!hasRight && !loading) { // 无权限处理
return renderNoright();
}
@ -155,21 +232,21 @@ export default class Payroll extends React.Component {
return (
<div style={{display: "inline-block"}}>
<Button type="primary" onClick={() => {this.setState({stepSlideVisible: true})}}>新建</Button>
<WeaSelect style={{width: "200px", marginLeft: "10px", marginRight: "10px"}}/>
<WeaInputSearch style={{marginleft: "10px"}}/>
{
this.state.initSelected && <WeaSelect options={this.state.ledgerOptions} style={{width: "200px", marginLeft: "10px", marginRight: "10px"}} value={templateSelect} onChange={(value) => {this.handleTemplateSelectChange(value)}}/>
}
<WeaInputSearch style={{marginleft: "10px"}} placeholder="请输入工资单名称" value={templateSearchValue} onChange={(value) => {this.setState({templateSearchValue: value})}} onSearch={(value) => {this.handleTemplateSearch(value)}}/>
</div>
)
}
}
const steps = [
"基础设置",
"显示设置"
]
const validateStep1 = () => {
const { payrollStore: {templateBaseData}} = this.props;
if(!notNull(templateBaseData.name)) {
@ -221,7 +298,14 @@ export default class Payroll extends React.Component {
{
this.state.selectedKey == 1 &&
<TemplateSettingList />
<TemplateSettingList onEdit={(record) => {
this.handleTemplateListEdit(record)
}}
onCopy={(record) => {
this.handleTemplateListCopy(record)
}}
onDelete={(record)=> this.handleTemplateListDelete(record)}
/>
}
</WeaTop>
@ -284,16 +368,19 @@ export default class Payroll extends React.Component {
}
content={<div>
{
selectedTab == 0 && <BaseInformForm />
selectedTab == 0 && <BaseInformForm id={this.state.templateCurrentId}/>
}
{
selectedTab == 1 && <ShowSettingForm />
selectedTab == 1 && <ShowSettingForm id={this.state.templateCurrentId}/>
}
</div>}
onClose={() => this.setState({editSlideVisible: false})}
showMask={true}
closeMaskOnClick={() => this.setState({editSlideVisible: false})} />
}
{
this.state.copyModalVisible && <CopyModal onSave={(value) => this.handleCopyModalSave(value)} visible={this.state.copyModalVisible} onCancel={() => {this.setState({copyModalVisible: false})}}/>
}
</div>
)
}

8
pc4mobx/hrmSalary/pages/payroll/stepForm/showSettingForm.js
View File

@ -3,6 +3,7 @@ import { Row, Col, Upload, Icon, Radio, Switch } from 'antd'
import { WeaInput } from 'ecCom'
import { inject, observer } from 'mobx-react';
import BackgroundUpload from '../components/backgroundUpload'
import RequiredLabelTip from '../../../components/requiredLabelTip';
const Dragger = Upload.Dragger;
@ -18,9 +19,8 @@ export default class ShowSettingForm extends React.Component {
// form 字段变化时的回调
handleChange(params) {
const { payrollStore: {salaryTemplateShowSet, setSalaryTemplateShowSet}} = this.props;
let request= {...salaryTemplateShowSet, ...params};
let request = {...salaryTemplateShowSet, ...params};
setSalaryTemplateShowSet(request);
// this.props.onChange && this.props.onChange(request);
}
// 工资单主题 插入变量
@ -69,7 +69,7 @@ export default class ShowSettingForm extends React.Component {
<Row className="formItem">
<Col span={12}>
<Row>
<Col span={8}>工资单主题</Col>
<Col span={8}>工资单主题<RequiredLabelTip /></Col>
<Col span={16}>
<WeaInput style={{width: "200px"}} value={theme} onChange={(value) => {this.handleChange({theme:value})}}/>
</Col>
@ -84,7 +84,7 @@ export default class ShowSettingForm extends React.Component {
<Row className="formItem">
<Col span={4}>工资单主题</Col>
<Col span={20}>
<BackgroundUpload onChnage={(value) => {this.handleChange({textContentPosition: value})}}/>
<BackgroundUpload imageUrl={background} onChange={(value) => {this.handleChange({background: value})}}/>
{/* <Dragger {...dropProps} style={{width: "100px"}}>
<div style={{ padding: '55px 0' }}>
<Icon type="plus" />

62
pc4mobx/hrmSalary/pages/payroll/templateSettingList.js
View File

@ -1,5 +1,6 @@
import React from 'react'
import { inject, observer } from 'mobx-react';
import { Radio } from 'antd'
import { WeaTableNew } from 'comsMobx';
const WeaTable = WeaTableNew.WeaTable;
@ -11,6 +12,63 @@ export default class TemplateSettingList extends React.Component {
const { getPayrollTemplateList } = payrollStore;
getPayrollTemplateList();
}
// 编辑操作按钮
onEdit(record) {
this.props.onEdit && this.props.onEdit(record)
}
// 复制操作按钮
onCopy(record) {
this.props.onCopy && this.props.onCopy(record)
}
// 删除操作按钮
onDelete(record) {
this.props.onDelete && this.props.onDelete(record)
}
// 操作按钮
onOperatesClick = (record, index, operate, flag) => {
switch(operate.index.toString()){
case '0': // 编辑
this.onEdit(record);
break;
case "1": // 复制
this.onCopy(record);
break;
case "2": // 删除
this.onDelete(record);
break;
}
};
// 默认使用配置
recordItemChange(record) {
const { payrollStore } = this.props;
const { changePayrollDefaultUse } = payrollStore;
changePayrollDefaultUse(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 "useType":
return <Radio checked={record.useType == "1"} onChange={(value) => {this.recordItemChange(record)}}/>
default:
return <div dangerouslySetInnerHTML={{ __html: valueSpan }} />
}
}
return newColumn;
});
return newColumns;
}
render() {
const { payrollStore } = this.props;
const { templateStore } = payrollStore;
@ -20,8 +78,8 @@ export default class TemplateSettingList extends React.Component {
comsWeaTableStore={templateStore} // table store
hasOrder={true} // 是否启用排序
needScroll={true} // 是否启用table内部列表滚动，将自适应到父级高度
// getColumns={this.getColumns}
// onOperatesClick={this.onOperatesClick.bind(this)}
getColumns={this.getColumns}
onOperatesClick={this.onOperatesClick.bind(this)}
/>
</div>
)

80
pc4mobx/hrmSalary/stores/payroll.js
View File

@ -80,8 +80,7 @@ export class payrollStore {
// 工资单模板-工资单模板列表
@action
getPayrollTemplateList = () => {
let params = {}
getPayrollTemplateList = (params = {}) => {
API.getPayrollTemplateList(params).then(res => {
if(res.status) {
this.templateStore.getDatas(res.data.datas);
@ -134,6 +133,9 @@ export class payrollStore {
}
API.getPayrollShowForm(params).then(res => {
if(res.status) {
if(id !== "") {
this.salaryItemSet = res.data.salaryTemplateSalaryItemSet
}
this.salaryTemplateShowSet = res.data.salaryTemplateShowSet.data
} else {
message.error(res.errormsg || "获取失败")
@ -207,5 +209,79 @@ export class payrollStore {
})
})
}
//工资单-获取薪资账套下拉列表
@action
getPayrollTemplateLedgerList = () => {
return new Promise((resolve, reject) => {
API.getPayrollTemplateLedgerList().then(res => {
if(res.status) {
this.payrollTemplateLedgerList = res.data.map(item => {
let result = {}
result.showname = item.content;
result.selected = false;
result.key = item.id
return result;
})
resolve(this.payrollTemplateLedgerList)
} else {
message.error(res.errormsg || "获取失败");
reject()
}
})
})
}
// 工资单模板-工资单模板默认使用
@action
changePayrollDefaultUse(id = "") {
if(id == "") {
message.warning("id必填");
return
}
let params = {
id
}
API.changePayrollDefaultUse(params).then(res => {
if(res.status) {
message.success("设置成功");
} else {
message.success(res.errormsg || "设置失败")
}
})
}
// 工资单模板-复制工资单模板
@action
duplicatePayroll = (id, name) => {
let params = {
id, name
}
return new Promise((resolve, reject) => {
API.duplicatePayroll(params).then(res => {
if(res.status) {
message.success("复制成功")
this.getPayrollTemplateList()
resolve()
} else {
message.error(res.errormsg || "复制失败")
reject();
}
})
})
}
// 工资单模板-删除工资单模板
@action
deletePayroll = (ids) => {
API.deletePayroll(ids).then(res => {
if(res.status) {
message.success("删除成功");
this.getPayrollTemplateList()
} else {
message.error(res.errormsg || "删除失败");
}
})
}
}