import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import {
Row,
Col,
Card,
Form,
Input,
Select,
Icon,
Button,
Dropdown,
Menu,
InputNumber,
DatePicker,
Modal,
message,
Badge,
Divider,
Steps,
Radio,
} from 'antd';
import StandardTable from '@/components/StandardTable';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import styles from './TableList.less';
const FormItem = Form.Item;
const { Step } = Steps;
const { TextArea } = Input;
const { Option } = Select;
const RadioGroup = Radio.Group;
const getValue = obj =>
Object.keys(obj)
.map(key => obj[key])
.join(',');
const statusMap = ['default', 'processing', 'success', 'error'];
const status = ['关闭', '运行中', '已上线', '异常'];
const CreateForm = Form.create()(props => {
const { modalVisible, form, handleAdd, handleModalVisible } = props;
const okHandle = () => {
form.validateFields((err, fieldsValue) => {
if (err) return;
form.resetFields();
handleAdd(fieldsValue);
});
};
return (
handleModalVisible()}
>
{form.getFieldDecorator('desc', {
rules: [{ required: true, message: '请输入至少五个字符的规则描述!', min: 5 }],
})()}
);
});
@Form.create()
class UpdateForm extends PureComponent {
static defaultProps = {
handleUpdate: () => {},
handleUpdateModalVisible: () => {},
values: {},
};
constructor(props) {
super(props);
this.state = {
formVals: {
name: props.values.name,
desc: props.values.desc,
key: props.values.key,
target: '0',
template: '0',
type: '1',
time: '',
frequency: 'month',
},
currentStep: 0,
};
this.formLayout = {
labelCol: { span: 7 },
wrapperCol: { span: 13 },
};
}
handleNext = currentStep => {
const { form, handleUpdate } = this.props;
const { formVals: oldValue } = this.state;
form.validateFields((err, fieldsValue) => {
if (err) return;
const formVals = { ...oldValue, ...fieldsValue };
this.setState(
{
formVals,
},
() => {
if (currentStep < 2) {
this.forward();
} else {
handleUpdate(formVals);
}
}
);
});
};
backward = () => {
const { currentStep } = this.state;
this.setState({
currentStep: currentStep - 1,
});
};
forward = () => {
const { currentStep } = this.state;
this.setState({
currentStep: currentStep + 1,
});
};
renderContent = (currentStep, formVals) => {
const { form } = this.props;
if (currentStep === 1) {
return [
{form.getFieldDecorator('target', {
initialValue: formVals.target,
})(
)}
,
{form.getFieldDecorator('template', {
initialValue: formVals.template,
})(
)}
,
{form.getFieldDecorator('type', {
initialValue: formVals.type,
})(
强
弱
)}
,
];
}
if (currentStep === 2) {
return [
{form.getFieldDecorator('time', {
rules: [{ required: true, message: '请选择开始时间!' }],
})(
)}
,
{form.getFieldDecorator('frequency', {
initialValue: formVals.frequency,
})(
)}
,
];
}
return [
{form.getFieldDecorator('name', {
rules: [{ required: true, message: '请输入规则名称!' }],
initialValue: formVals.name,
})()}
,
{form.getFieldDecorator('desc', {
rules: [{ required: true, message: '请输入至少五个字符的规则描述!', min: 5 }],
initialValue: formVals.desc,
})()}
,
];
};
renderFooter = currentStep => {
const { handleUpdateModalVisible, values } = this.props;
if (currentStep === 1) {
return [
,
,
,
];
}
if (currentStep === 2) {
return [
,
,
,
];
}
return [
,
,
];
};
render() {
const { updateModalVisible, handleUpdateModalVisible, values } = this.props;
const { currentStep, formVals } = this.state;
return (
handleUpdateModalVisible(false, values)}
afterClose={() => handleUpdateModalVisible()}
>
{this.renderContent(currentStep, formVals)}
);
}
}
/* eslint react/no-multi-comp:0 */
@connect(({ rule, loading }) => ({
rule,
loading: loading.models.rule,
}))
@Form.create()
class TableList extends PureComponent {
state = {
modalVisible: false,
updateModalVisible: false,
expandForm: false,
selectedRows: [],
formValues: {},
stepFormValues: {},
};
columns = [
{
title: '规则名称',
dataIndex: 'name',
},
{
title: '描述',
dataIndex: 'desc',
},
{
title: '服务调用次数',
dataIndex: 'callNo',
sorter: true,
align: 'right',
render: val => `${val} 万`,
// mark to display a total number
needTotal: true,
},
{
title: '状态',
dataIndex: 'status',
filters: [
{
text: status[0],
value: 0,
},
{
text: status[1],
value: 1,
},
{
text: status[2],
value: 2,
},
{
text: status[3],
value: 3,
},
],
render(val) {
return ;
},
},
{
title: '上次调度时间',
dataIndex: 'updatedAt',
sorter: true,
render: val => {moment(val).format('YYYY-MM-DD HH:mm:ss')},
},
{
title: '操作',
render: (text, record) => (
this.handleUpdateModalVisible(true, record)}>配置
订阅警报
),
},
];
componentDidMount() {
const { dispatch } = this.props;
dispatch({
type: 'rule/fetch',
});
}
handleStandardTableChange = (pagination, filtersArg, sorter) => {
const { dispatch } = this.props;
const { formValues } = this.state;
const filters = Object.keys(filtersArg).reduce((obj, key) => {
const newObj = { ...obj };
newObj[key] = getValue(filtersArg[key]);
return newObj;
}, {});
const params = {
currentPage: pagination.current,
pageSize: pagination.pageSize,
...formValues,
...filters,
};
if (sorter.field) {
params.sorter = `${sorter.field}_${sorter.order}`;
}
dispatch({
type: 'rule/fetch',
payload: params,
});
};
handleFormReset = () => {
const { form, dispatch } = this.props;
form.resetFields();
this.setState({
formValues: {},
});
dispatch({
type: 'rule/fetch',
payload: {},
});
};
toggleForm = () => {
const { expandForm } = this.state;
this.setState({
expandForm: !expandForm,
});
};
handleMenuClick = e => {
const { dispatch } = this.props;
const { selectedRows } = this.state;
if (selectedRows.length === 0) return;
switch (e.key) {
case 'remove':
dispatch({
type: 'rule/remove',
payload: {
key: selectedRows.map(row => row.key),
},
callback: () => {
this.setState({
selectedRows: [],
});
},
});
break;
default:
break;
}
};
handleSelectRows = rows => {
this.setState({
selectedRows: rows,
});
};
handleSearch = e => {
e.preventDefault();
const { dispatch, form } = this.props;
form.validateFields((err, fieldsValue) => {
if (err) return;
const values = {
...fieldsValue,
updatedAt: fieldsValue.updatedAt && fieldsValue.updatedAt.valueOf(),
};
this.setState({
formValues: values,
});
dispatch({
type: 'rule/fetch',
payload: values,
});
});
};
handleModalVisible = flag => {
this.setState({
modalVisible: !!flag,
});
};
handleUpdateModalVisible = (flag, record) => {
this.setState({
updateModalVisible: !!flag,
stepFormValues: record || {},
});
};
handleAdd = fields => {
const { dispatch } = this.props;
dispatch({
type: 'rule/add',
payload: {
desc: fields.desc,
},
});
message.success('添加成功');
this.handleModalVisible();
};
handleUpdate = fields => {
const { dispatch } = this.props;
dispatch({
type: 'rule/update',
payload: {
name: fields.name,
desc: fields.desc,
key: fields.key,
},
});
message.success('配置成功');
this.handleUpdateModalVisible();
};
renderSimpleForm() {
const {
form: { getFieldDecorator },
} = this.props;
return (
);
}
renderAdvancedForm() {
const {
form: { getFieldDecorator },
} = this.props;
return (
);
}
renderForm() {
const { expandForm } = this.state;
return expandForm ? this.renderAdvancedForm() : this.renderSimpleForm();
}
render() {
const {
rule: { data },
loading,
} = this.props;
const { selectedRows, modalVisible, updateModalVisible, stepFormValues } = this.state;
const menu = (
);
const parentMethods = {
handleAdd: this.handleAdd,
handleModalVisible: this.handleModalVisible,
};
const updateMethods = {
handleUpdateModalVisible: this.handleUpdateModalVisible,
handleUpdate: this.handleUpdate,
};
return (
{this.renderForm()}
{selectedRows.length > 0 && (
)}
{stepFormValues && Object.keys(stepFormValues).length ? (
) : null}
);
}
}
export default TableList;