<div className="ant-drawer-footer" style={{ width: '600' }}>
<Button style={{ marginLeft: 8 }} onClick={this.props.onClose}>
关闭
</Button>
</div>
closable={true} // 小叉叉
maskClosable={true}
destroyOnClose={true}
一般回显的id给修改的id附不上值时,从表单里获取id的值
id:this.props.form.getFieldValue('id')
name: this.props.form.getFieldValue('name')
{getFieldDecorator('id', {
initialValue: this.props.id || ''
})(<Input type="hidden" />)}
<Form.Item>
{getFieldDecorator('name', {
validateTrigger: 'onBlur',
rules: [
{
required: true,
message: '请输入字典名称'
},
{
pattern: /^[^\s]*$/,
message: '不能输入空格'
},
{
pattern: /^[\u4e00-\u9fa5a-zA-Z0-9()()]+$/,
message: '不能输入特殊字符,只可以输入括号'
},
{
validator: this.inputOnBlurname
}
],
initialValue: this.props.name
})(<Input placeholder="字典名称" />)}
</Form.Item>
/**
* 校验字典名称是否重复
* @return {[type]} [description]
*/
inputOnBlurname = (rule, value, callback) => {
POST(HTTP_DEP + '/dict/isnotname', {
id: this.props.id,
pid: this.props.pid,
name: this.props.form.getFieldValue('name')
}).then(function(res) {
if (res.state === '1') {
callback();
} else {
callback('字典名称重复');
}
});
};
*
import React, { Component } from 'react';
import { Icon, Menu, Dropdown, Avatar } from 'antd';
import { connect } from 'react-redux';
import { browserHistory } from 'react-router';
<Dropdown overlay={work} trigger={['click']}>
<li style={{ paddingRight: '22PX' }}>
<Avatar icon="carry-out" />
</li>
</Dropdown>
const work = (
<Menu>
<Menu.Item style={styles.workTitle} >
<a href="javascript:void(0)" style={{color: '#1990ff'}} > 我的文档库 </a>
</Menu.Item>
{
this.state.dataList.map((item, index) => {
let { extension } = item;
let fileIcon;
if(extension == 'txt') {
fileIcon = 'file-text';
} else if(extension == 'xls' || extension == 'xlsx') {
fileIcon = 'file-excel';
} else if(extension == 'doc' || extension == 'docx') {
fileIcon = 'file-word';
} else if(extension == 'pdf') {
fileIcon = 'file-pdf';
} else if(extension == 'ppt' || extension == 'pptx') {
fileIcon = 'file-ppt'
} else {
fileIcon = 'file-zip'
}
return (
<Menu.Item key={index} style={styles.workItem}>
<a href="javascript:void(0)" style={{color: '#808080'}} onClick={() => this.downloadFile(item)}>
<Avatar style={{ backgroundColor: '#3391e5', marginRight: '15px' }} icon={fileIcon} />
{item.name}
</a>
</Menu.Item>
)
})
}
{
this.state.dataList.length > 0 &&
<Menu.Item style={styles.workFooter}>
<a href="javascript:void(0)" onClick={this.more}> 查看更多 </a>
</Menu.Item>
}
{
this.state.dataList.length == 0 &&
<Menu.Item style={styles.workFooter}>
<a href="javascript:void(0)"> 暂无数据 </a>
</Menu.Item>
}
</Menu>
);
/**
* 下载方法
* @param {[type]} record [description]
* @return {[type]} [description]
*/
downloadFile = record => {
let { id, extension } = record;
PostExcelFile({
url: HTTP_DEP + '/,
fileType: extension,
type: 'get'
});
};
const styles = {
headerUl: {
display: 'flex',
width: '400px',
height: '100%',
listStyle: 'none',
justifyContent: 'flex-end',
alignItems: 'center',
paddingLeft: 0,
paddingRight: '15px'
},
iconFont: {
padding: '0 12px'
},
headerItem: {
paddingRight: '6px'
},
userStyle: {
position: 'absolute',
left: 0,
bottom: 0,
width: '100%',
borderTop: '1px solid #e9e9e9',
padding: '10px 16px',
background: '#fff',
textAlign: 'right'
},
workTitle: {
textAlign: 'center',
borderBottom: '1px solid rgb(232, 232, 232)',
paddingTop: '10px',
paddingBottom: '10px'
},
workItem: {
width: '330px',
paddingTop: '12px',
paddingBottom: '12px',
paddingLeft: '24px',
paddingRight: '24px',
color: '14px',
borderBottom: '1px solid rgb(232, 232, 232)'
},
workFooter: {
width: '330px',
textAlign: 'center',
paddingTop: '10px',
paddingBottom: '10px'
}
};
this.state = {
loading: false // 页面加载
};
自定义开始loading
//格式化日期
import moment from 'moment';
('789456123').format('YYYY')
moment('789456123', 'YYYY-MM-DD')
handleSubmit = e => {
let that = this;
e.preventDefault();
this.props.form.validateFieldsAndScroll((err, values) => {
if (!err) {
that.saveSigneding(values);
}
});
};
<Form.Item>
{getFieldDecorator('sdf', {
rules: [
{
max: 16,
message: '最长可输入16个字符'
}
],
initialValue: ''
})(<Input />)}
</Form.Item>
/**
* 把form 表单的数据安照词根进行分类
* @param {[type]} data [description]
* @param {[type]} array [description]
* @return {[type]} [description]
*/
const formtFormToMap = (data, array) => {
let obj = {};
// 先把数据进行大的归类
for (let key in data) {
for (let i = 0; i < array.length; i++) {
// 判断是否存在子项
if (!obj[array[i]]) {
obj[array[i]] = {};
}
let reg = new RegExp(array[i] + '_');
if (reg.test(key)) {
let _key = key.replace(reg, '');
obj[array[i]][_key] = data[key] || '';
}
}
}
return obj;
};
1,在子组件想获取的值的地方加
let id = res.approvalId;
that.props.setApprovalId(id);
2,在父组件里面写
setApprovalId = id => {
this.setState({
approvalId: id
});
};
setApprovalId={this.setApprovalId}
在把值丢进自己想丢的地方
import {Popover,Icon} from 'antd';
<Popover
title={'提示'}
content={
<span>
限制立项申请时间到期望完成时间的月数参数
</span>
}
>
<Icon
type="question-circle"
style={{ marginLeft: '5px', position: 'absolute' }}
/>
</Popover>