245 lines
9.9 KiB
JavaScript
245 lines
9.9 KiB
JavaScript
import React from 'react'
|
||
import { Row, Col, Upload, Icon, Radio, Switch, Modal } from 'antd'
|
||
import { WeaInput, WeaDraggable } from 'ecCom'
|
||
import { inject, observer } from 'mobx-react';
|
||
import BackgroundUpload from '../components/backgroundUpload'
|
||
import RequiredLabelTip from '../../../components/requiredLabelTip';
|
||
|
||
const Dragger = Upload.Dragger;
|
||
|
||
@inject('payrollStore')
|
||
@observer
|
||
export default class ShowSettingForm extends React.Component {
|
||
|
||
componentWillMount() {
|
||
const { payrollStore } = this.props;
|
||
const { initShowSettingForm } = payrollStore
|
||
initShowSettingForm(this.props.id)
|
||
}
|
||
// form 字段变化时的回调
|
||
handleChange(params) {
|
||
const { payrollStore: {salaryTemplateShowSet, setSalaryTemplateShowSet}} = this.props;
|
||
let request = {...salaryTemplateShowSet, ...params};
|
||
setSalaryTemplateShowSet(request);
|
||
}
|
||
|
||
// 工资单主题 插入变量
|
||
handleThemeNameCllck(param) {
|
||
const { payrollStore } = this.props;
|
||
const { salaryTemplateShowSet, setSalaryTemplateShowSet } = payrollStore;
|
||
let request= {...salaryTemplateShowSet};
|
||
request.theme = (request.theme ? request.theme : "") + param;
|
||
setSalaryTemplateShowSet(request);
|
||
}
|
||
|
||
handleDownClick(index) {
|
||
const {payrollStore: {salaryItemSet, setSalaryItemSet}} = this.props
|
||
let downItem = salaryItemSet[index + 1];
|
||
let thisItem = salaryItemSet[index]
|
||
let resultSet = [...salaryItemSet]
|
||
resultSet[index] = downItem;
|
||
resultSet[index + 1] = thisItem;
|
||
setSalaryItemSet(resultSet)
|
||
}
|
||
|
||
handleUpClick(index) {
|
||
const {payrollStore: {salaryItemSet, setSalaryItemSet}} = this.props
|
||
let upItem = salaryItemSet[index - 1]
|
||
let thisItem = salaryItemSet[index]
|
||
let resultSet = [...salaryItemSet]
|
||
resultSet[index] = upItem
|
||
resultSet[index - 1] = thisItem;
|
||
setSalaryItemSet(resultSet)
|
||
}
|
||
|
||
handleDeleteItem(group, item) {
|
||
const { payrollStore : {salaryItemSet, setSalaryItemSet}} = this.props;
|
||
console.log("item:", item);
|
||
let resultSalaryItemSet = [...salaryItemSet]
|
||
resultSalaryItemSet.map(sourceGroup => {
|
||
if(sourceGroup.id == group.id) {
|
||
sourceGroup.items.map((sourceItem, index) => {
|
||
if(sourceItem.id == item.id) {
|
||
sourceGroup.items.splice(index, 1)
|
||
}
|
||
})
|
||
}
|
||
})
|
||
setSalaryItemSet(resultSalaryItemSet)
|
||
}
|
||
|
||
handleDrag(data1, data2) {
|
||
console.log("data1:", data1);
|
||
console.log("data2:", data2);
|
||
}
|
||
|
||
handleDeleteClick(index) {
|
||
Modal.confirm({
|
||
title: '信息确认',
|
||
content: '确认删除',
|
||
onOk:() => {
|
||
const {payrollStore: {salaryItemSet, setSalaryItemSet}} = this.props;
|
||
let resultSalaryItemSet = [...salaryItemSet]
|
||
resultSalaryItemSet.splice(index, 1)
|
||
setSalaryItemSet(resultSalaryItemSet)
|
||
},
|
||
onCancel: () => {
|
||
},
|
||
});
|
||
}
|
||
|
||
render() {
|
||
const { payrollStore } = this.props;
|
||
const { salaryTemplateShowSet } = payrollStore;
|
||
const { salaryItemSet } = payrollStore
|
||
const { theme,
|
||
background,
|
||
textContent,
|
||
textContentPosition,
|
||
salaryItemNullStatus,
|
||
salaryItemZeroStatus
|
||
} = salaryTemplateShowSet
|
||
const dropProps = {
|
||
name: 'file',
|
||
action: '/api/doc/upload/uploadFile',
|
||
onChange(info) {
|
||
const { status } = info.file;
|
||
if (status !== 'uploading') {
|
||
console.log(info.file, info.fileList);
|
||
}
|
||
if (status === 'done') {
|
||
message.success(`${info.file.name} file uploaded successfully.`);
|
||
} else if (status === 'error') {
|
||
message.error(`${info.file.name} file upload failed.`);
|
||
}
|
||
},
|
||
onDrop(e) {
|
||
console.log('Dropped files', e.dataTransfer.files);
|
||
},
|
||
};
|
||
return (
|
||
<div className="showSettingForm">
|
||
<div className="settingItemWrapper">
|
||
<div className="itemTitle">主题及其他设置</div>
|
||
<div className="itemContent">
|
||
<Row className="formItem">
|
||
<Col span={12}>
|
||
<Row>
|
||
<Col span={8}>工资单主题<RequiredLabelTip /></Col>
|
||
<Col span={16}>
|
||
<WeaInput style={{width: "200px"}} value={theme} onChange={(value) => {
|
||
this.handleChange({theme:value})
|
||
}}/>
|
||
</Col>
|
||
</Row>
|
||
</Col>
|
||
<Col span={12}>
|
||
<span style={{float: "right"}}>
|
||
插入变量：
|
||
<a onClick={() => {
|
||
this.handleThemeNameCllck("${companyName}")
|
||
}} className="themeFormalStr">公司名称</a>
|
||
<a onClick={() => {
|
||
this.handleThemeNameCllck("${salaryMonth}")
|
||
}} className="themeFormalStr">薪资所属月</a>
|
||
</span>
|
||
</Col>
|
||
</Row>
|
||
<Row className="formItem">
|
||
<Col span={4}>工资单背景</Col>
|
||
<Col span={20}>
|
||
<BackgroundUpload imageUrl={background} onChange={(value) => {
|
||
this.handleChange({background: value})
|
||
}}/>
|
||
{/* <Dragger {...dropProps} style={{width: "100px"}}>
|
||
<div style={{ padding: '55px 0' }}>
|
||
<Icon type="plus" />
|
||
</div>
|
||
</Dragger> */}
|
||
</Col>
|
||
</Row>
|
||
|
||
<Row className="formItem">
|
||
<Col span={4}>文本内容</Col>
|
||
<Col span={20}>
|
||
<WeaInput value={textContent} onChange={(value) => {
|
||
this.handleChange({textContent: value})
|
||
}}/>
|
||
</Col>
|
||
</Row>
|
||
|
||
<Row className="formItem">
|
||
<Col span={4}>文本内容位置</Col>
|
||
<Col span={20}>
|
||
<Radio.Group value={textContentPosition} onChange={(e) => {
|
||
this.handleChange({textContentPosition: e.target.value})
|
||
}}>
|
||
<Radio value={"1"}>薪资项目前</Radio>
|
||
<Radio value={"2"}>薪资项目后</Radio>
|
||
</Radio.Group>
|
||
</Col>
|
||
</Row>
|
||
|
||
<Row className="formItem">
|
||
<Col span={6}>薪资项为空时不显示</Col>
|
||
<Col span={18}>
|
||
<Switch checked={salaryItemNullStatus} onChange={(value) => {
|
||
this.handleChange({salaryItemNullStatus: value})
|
||
}}/>
|
||
</Col>
|
||
</Row>
|
||
|
||
<Row className="formItem">
|
||
<Col span={6}>薪资项为0时不显示</Col>
|
||
<Col span={18}>
|
||
<Switch checked={salaryItemZeroStatus} onChange={(value) => {
|
||
this.handleChange({salaryItemZeroStatus: value})
|
||
}}/>
|
||
</Col>
|
||
</Row>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="settingItemWrapper">
|
||
<div className="itemTitle">薪资项目设置</div>
|
||
<div className="itemContent">
|
||
{
|
||
salaryItemSet.map((group, index) => (
|
||
<div className="configItemWrapper" >
|
||
<div className="configTitle">{group.groupName}
|
||
{
|
||
index < salaryItemSet.length - 1 &&
|
||
<Icon type="caret-down" style={{marginLeft: "10px" , cursor: "pointer", color: "#666"}}
|
||
onClick={() => {
|
||
this.handleDownClick(index)
|
||
}}
|
||
/>
|
||
}
|
||
|
||
{
|
||
index > 0 && <Icon type="caret-up" style={{marginLeft: "10px", cursor: 'pointer', color: "#666"}}
|
||
onClick={() => {
|
||
this.handleUpClick(index)
|
||
}}/>
|
||
}
|
||
|
||
<i className="icon-coms-Delete" style={{cursor: "pointer", color: '#666', marginLeft: "10px"}} onClick={() => {
|
||
this.handleDeleteClick(index)
|
||
}}/>
|
||
</div>
|
||
<div className="configContent">
|
||
{group.items.map(item => (
|
||
<span className="editItem">{item.name} <Icon type="cross" style={{cursor: "pointer"}} onClick={() => {
|
||
this.handleDeleteItem(group, item)
|
||
}}/></span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
))
|
||
}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
} |