151 lines
6.8 KiB
JavaScript
151 lines
6.8 KiB
JavaScript
import React from 'react'
|
||
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;
|
||
|
||
@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);
|
||
}
|
||
|
||
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 => (
|
||
<div className="configItemWrapper">
|
||
<div className="configTitle">{group.groupName}</div>
|
||
<div className="configContent">
|
||
{group.items.map(item => (
|
||
<span className="editItem">{item.name}</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
))
|
||
}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
} |