salary-management-front/pc4mobx/hrmSalary/pages/dataAcquisition/attendance/itemMangeFormModal.js

125 lines
3.7 KiB
JavaScript

import React from "react";
import { Button, Col, Row, Switch } from "antd";
import { inject, observer } from "mobx-react";
import { WeaDialog, WeaInput, WeaSelect } from "ecCom";
import "./index.less";
@inject("attendanceStore")
@observer
export default class ItemMangeFormModal extends React.Component {
componentWillMount() {
const { attendanceStore: { currentItem, currentItemOperate } } = this.props;
if (currentItemOperate == "add") {
this.state = {
request: {
fieldName: "",
fieldType: "1",
enableStatus: 0,
description: ""
}
};
} else {
this.state = {
request: currentItem
};
}
}
handleChange(params) {
const { request } = this.state;
let result = { ...request, ...params };
this.setState({ request: result });
}
convertFieldType = (fileTypeStr) => {
if (fileTypeStr == "数值") {
return "1";
} else if (fileTypeStr == "文本") {
return "2";
} else if (fileTypeStr == "1" || fileTypeStr == "2") {
return fileTypeStr;
}
return "";
};
render() {
const options = [
{
key: "1",
selected: true,
showname: "数值"
},
{
key: "2",
selected: false,
showname: "文本"
}
];
const { request } = this.state;
const { fieldName, fieldType, enableStatus, description } = request;
let fileTypeKey = this.convertFieldType(fieldType);
const { attendanceStore: { currentItemOperate } } = this.props;
return (
<WeaDialog style={{ width: 600 }} visible={this.props.visible} onCancel={this.props.onCancel}
title="新建考勤自定义字段"
initLoadCss
className="itemManageModalWrapper"
buttons={[
<Button type="primary" onClick={() => {
currentItemOperate == "add" ? this.props.onSave(this.state.request) :
this.props.onUpdate(this.state.request);
}
}>保存</Button>
]}>
<div style={{ padding: "16px 120px" }}>
<Row gutter={[10, 10]} style={{ marginBottom: "10px" }}>
<Col span={8}>
字段名称
</Col>
<Col span={16}>
<WeaInput viewAttr={3} style={{ width: "200px" }} value={fieldName} onChange={(v) => {
this.handleChange({ fieldName: v });
}}/>
</Col>
</Row>
<Row gutter={[10, 10]} style={{ marginBottom: "10px" }}>
<Col span={8}>
类型
</Col>
<Col span={16}>
<WeaSelect style={{ width: "200px" }} options={options} value={fileTypeKey}
onChange={(v) => this.handleChange({ fieldType: v })}
/>
</Col>
</Row>
<Row gutter={[10, 10]} style={{ marginBottom: "10px" }}>
<Col span={8}>
是否启用
</Col>
<Col span={16}>
<Switch checked={enableStatus == 1} onChange={(value) => {
let enableStatus = 0;
if (value) {
enableStatus = 1;
}
this.handleChange({ enableStatus });
}}/>
</Col>
</Row>
<Row gutter={[10, 10]} style={{ marginBottom: "10px" }}>
<Col span={8}>
备注
</Col>
<Col span={16}>
<WeaInput style={{ width: "200px" }} value={description} onChange={(v) => {
this.handleChange({ description: v });
}}/>
</Col>
</Row>
</div>
</WeaDialog>
);
}
}