diff --git a/mock/rule.js b/mock/rule.js
index 2090ce8e18a0687987045ab6119471aa21508d86..fea91ca11357b64799ed5c845dc307058b324816 100644
--- a/mock/rule.js
+++ b/mock/rule.js
@@ -8,10 +8,10 @@ for (let i = 0; i < 46; i += 1) {
disabled: ((i % 6) === 0),
href: 'https://ant.design',
avatar: ['https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png', 'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png'][i % 2],
- no: `TradeCode ${i}`,
+ name: `TradeCode ${i}`,
title: `一个任务名称 ${i}`,
owner: '曲丽丽',
- description: '这是一段描述',
+ desc: '这是一段描述',
callNo: Math.floor(Math.random() * 1000),
status: Math.floor(Math.random() * 10) % 4,
updatedAt: new Date(`2017-07-${Math.floor(i / 2) + 1}`),
@@ -51,8 +51,8 @@ export function getRule(req, res, u) {
dataSource = filterDataSource;
}
- if (params.no) {
- dataSource = dataSource.filter(data => data.no.indexOf(params.no) > -1);
+ if (params.name) {
+ dataSource = dataSource.filter(data => data.name.indexOf(params.name) > -1);
}
let pageSize = 10;
@@ -83,12 +83,12 @@ export function postRule(req, res, u, b) {
}
const body = (b && b.body) || req.body;
- const { method, no, description } = body;
+ const { method, name, desc, key } = body;
switch (method) {
/* eslint no-case-declarations:0 */
case 'delete':
- tableListDataSource = tableListDataSource.filter(item => no.indexOf(item.no) === -1);
+ tableListDataSource = tableListDataSource.filter(item => key.indexOf(item.key) === -1);
break;
case 'post':
const i = Math.ceil(Math.random() * 10000);
@@ -96,10 +96,10 @@ export function postRule(req, res, u, b) {
key: i,
href: 'https://ant.design',
avatar: ['https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png', 'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png'][i % 2],
- no: `TradeCode ${i}`,
+ name: `TradeCode ${i}`,
title: `一个任务名称 ${i}`,
owner: '曲丽丽',
- description,
+ desc,
callNo: Math.floor(Math.random() * 1000),
status: Math.floor(Math.random() * 10) % 2,
updatedAt: new Date(),
@@ -107,6 +107,14 @@ export function postRule(req, res, u, b) {
progress: Math.ceil(Math.random() * 100),
});
break;
+ case 'update':
+ tableListDataSource = tableListDataSource.map((item) => {
+ if (item.key === key) {
+ return { ...item, desc, name };
+ }
+ return item;
+ });
+ break;
default:
break;
}
diff --git a/src/models/rule.js b/src/models/rule.js
index 9ae968f8d0204c32e02a9f9fa0cb4f8785c4c7ef..8303dd21198c112689c84f7c42918c3da4bca430 100644
--- a/src/models/rule.js
+++ b/src/models/rule.js
@@ -1,4 +1,4 @@
-import { queryRule, removeRule, addRule } from '../services/api';
+import { queryRule, removeRule, addRule, updateRule } from '../services/api';
export default {
namespace: 'rule',
@@ -34,6 +34,14 @@ export default {
});
if (callback) callback();
},
+ *update({ payload, callback }, { call, put }) {
+ const response = yield call(updateRule, payload);
+ yield put({
+ type: 'save',
+ payload: response,
+ });
+ if (callback) callback();
+ },
},
reducers: {
diff --git a/src/routes/List/TableList.js b/src/routes/List/TableList.js
index a74860c78d2026b4797a59031c211e3f068fb11f..507442cc18d233352e70820744591f46df144145 100644
--- a/src/routes/List/TableList.js
+++ b/src/routes/List/TableList.js
@@ -1,77 +1,21 @@
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 } from 'antd';
+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 PageHeaderLayout from '../../layouts/PageHeaderLayout';
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 columns = [
- {
- title: '规则编号',
- dataIndex: 'no',
- },
- {
- title: '描述',
- dataIndex: 'description',
- },
- {
- 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: () => (
-
- 配置
-
- 订阅警报
-
- ),
- },
-];
const CreateForm = Form.create()((props) => {
const { modalVisible, form, handleAdd, handleModalVisible } = props;
@@ -83,6 +27,7 @@ const CreateForm = Form.create()((props) => {
};
return (
{
label="描述"
>
{form.getFieldDecorator('desc', {
- rules: [{ required: true, message: 'Please input some description...' }],
+ rules: [{ required: true, message: '请输入至少五个字符的规则描述！', min: 5 }],
})(
)}
@@ -103,6 +48,190 @@ const CreateForm = Form.create()((props) => {
);
});
+@Form.create()
+class UpdateForm extends PureComponent {
+ 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;
+ form.validateFields((err, fieldsValue) => {
+ if (err) return;
+ const formVals = { ...this.state.formVals, ...fieldsValue };
+ this.setState({
+ formVals,
+ }, () => {
+ if (currentStep < 2) {
+ this.forward();
+ } else {
+ handleUpdate(this.state.formVals);
+ }
+ });
+ });
+ }
+ backward = () => {
+ this.setState({
+ currentStep: this.state.currentStep - 1,
+ });
+ }
+ forward = () => {
+ this.setState({
+ currentStep: this.state.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 } = this.props;
+ if (currentStep === 1) {
+ return [
+ ,
+ ,
+ ,
+ ];
+ }
+ if (currentStep === 2) {
+ return [
+ ,
+ ,
+ ,
+ ];
+ }
+ return [
+ ,
+ ,
+ ];
+ }
+ render() {
+ const { updateModalVisible, handleUpdateModalVisible } = this.props;
+ const { currentStep, formVals } = this.state;
+
+ return (
+ handleUpdateModalVisible()}
+ >
+
+
+
+
+
+ { this.renderContent(currentStep, formVals) }
+
+ );
+ }
+}
+
+/* eslint react/no-multi-comp:0 */
@connect(({ rule, loading }) => ({
rule,
loading: loading.models.rule,
@@ -111,9 +240,11 @@ const CreateForm = Form.create()((props) => {
export default class TableList extends PureComponent {
state = {
modalVisible: false,
+ updateModalVisible: false,
expandForm: false,
selectedRows: [],
formValues: {},
+ stepFormValues: {},
};
componentDidMount() {
@@ -123,6 +254,67 @@ export default class TableList extends PureComponent {
});
}
+ 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)}>配置
+
+ 订阅警报
+
+ ),
+ },
+ ];
+
handleStandardTableChange = (pagination, filtersArg, sorter) => {
const { dispatch } = this.props;
const { formValues } = this.state;
@@ -172,13 +364,12 @@ export default class TableList extends PureComponent {
const { selectedRows } = this.state;
if (!selectedRows) return;
-
switch (e.key) {
case 'remove':
dispatch({
type: 'rule/remove',
payload: {
- no: selectedRows.map(row => row.no).join(','),
+ key: selectedRows.map(row => row.key),
},
callback: () => {
this.setState({
@@ -228,18 +419,37 @@ export default class TableList extends PureComponent {
});
}
+ handleUpdateModalVisible = (flag, record) => {
+ this.setState({
+ updateModalVisible: !!flag,
+ stepFormValues: record || {},
+ });
+ }
+
handleAdd = (fields) => {
this.props.dispatch({
type: 'rule/add',
payload: {
- description: fields.desc,
+ desc: fields.desc,
},
});
message.success('添加成功');
- this.setState({
- modalVisible: false,
+ this.handleModalVisible();
+ }
+
+ handleUpdate = (fields) => {
+ this.props.dispatch({
+ type: 'rule/update',
+ payload: {
+ name: fields.name,
+ desc: fields.desc,
+ key: fields.key,
+ },
});
+
+ message.success('配置成功');
+ this.handleUpdateModalVisible();
}
renderSimpleForm() {
@@ -248,8 +458,8 @@ export default class TableList extends PureComponent {