Merge branch 'master' of ssh://git.infini.ltd:64221/infini/search-center
This commit is contained in:
shiyang
commit
4395fed312
|
|
@ -1,273 +1,104 @@
|
|||
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 './AliasManage.less';
|
||||
import styles from '../../List/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 (
|
||||
<Modal
|
||||
destroyOnClose
|
||||
title="新建规则"
|
||||
visible={modalVisible}
|
||||
onOk={okHandle}
|
||||
onCancel={() => handleModalVisible()}
|
||||
>
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="描述">
|
||||
{form.getFieldDecorator('desc', {
|
||||
rules: [{ required: true, message: '请输入至少五个字符的规则描述！', min: 5 }],
|
||||
})(<Input placeholder="请输入" />)}
|
||||
</FormItem>
|
||||
</Modal>
|
||||
);
|
||||
});
|
||||
|
||||
@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;
|
||||
const { formVals: oldValue } = this.state;
|
||||
const { modalVisible, form, handleAdd, handleModalVisible } = props;
|
||||
const okHandle = () => {
|
||||
form.validateFields((err, fieldsValue) => {
|
||||
if (err) return;
|
||||
const formVals = { ...oldValue, ...fieldsValue };
|
||||
this.setState(
|
||||
{
|
||||
formVals,
|
||||
},
|
||||
() => {
|
||||
if (currentStep < 2) {
|
||||
this.forward();
|
||||
} else {
|
||||
handleUpdate(formVals);
|
||||
}
|
||||
}
|
||||
);
|
||||
form.resetFields();
|
||||
handleAdd(fieldsValue);
|
||||
});
|
||||
};
|
||||
return (
|
||||
<Modal
|
||||
destroyOnClose
|
||||
title="新建索引"
|
||||
visible={modalVisible}
|
||||
width={640}
|
||||
onOk={okHandle}
|
||||
onCancel={() => handleModalVisible()}
|
||||
>
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="索引名称">
|
||||
{form.getFieldDecorator('index', {
|
||||
rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
|
||||
})(<Input placeholder="请输入名称" />)}
|
||||
</FormItem>
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="索引设置">
|
||||
{form.getFieldDecorator('settings', {
|
||||
rules: [{ required: true }],
|
||||
})(<TextArea
|
||||
style={{ minHeight: 24 }}
|
||||
placeholder="请输入"
|
||||
rows={9}
|
||||
/>)}
|
||||
</FormItem>
|
||||
</Modal>
|
||||
);
|
||||
});
|
||||
|
||||
backward = () => {
|
||||
const { currentStep } = this.state;
|
||||
this.setState({
|
||||
currentStep: currentStep - 1,
|
||||
const UpdateForm = Form.create()(props => {
|
||||
const { updateModalVisible, handleUpdateModalVisible, handleUpdate,values,form } = props;
|
||||
|
||||
const okHandle = () => {
|
||||
form.validateFields((err, fieldsValue) => {
|
||||
if (err) return;
|
||||
form.resetFields();
|
||||
handleUpdate(fieldsValue);
|
||||
});
|
||||
};
|
||||
|
||||
forward = () => {
|
||||
const { currentStep } = this.state;
|
||||
this.setState({
|
||||
currentStep: currentStep + 1,
|
||||
});
|
||||
};
|
||||
|
||||
renderContent = (currentStep, formVals) => {
|
||||
const { form } = this.props;
|
||||
if (currentStep === 1) {
|
||||
return [
|
||||
<FormItem key="target" {...this.formLayout} label="监控对象">
|
||||
{form.getFieldDecorator('target', {
|
||||
initialValue: formVals.target,
|
||||
})(
|
||||
<Select style={{ width: '100%' }}>
|
||||
<Option value="0">表一</Option>
|
||||
<Option value="1">表二</Option>
|
||||
</Select>
|
||||
)}
|
||||
</FormItem>,
|
||||
<FormItem key="template" {...this.formLayout} label="规则模板">
|
||||
{form.getFieldDecorator('template', {
|
||||
initialValue: formVals.template,
|
||||
})(
|
||||
<Select style={{ width: '100%' }}>
|
||||
<Option value="0">规则模板一</Option>
|
||||
<Option value="1">规则模板二</Option>
|
||||
</Select>
|
||||
)}
|
||||
</FormItem>,
|
||||
<FormItem key="type" {...this.formLayout} label="规则类型">
|
||||
{form.getFieldDecorator('type', {
|
||||
initialValue: formVals.type,
|
||||
})(
|
||||
<RadioGroup>
|
||||
<Radio value="0">强</Radio>
|
||||
<Radio value="1">弱</Radio>
|
||||
</RadioGroup>
|
||||
)}
|
||||
</FormItem>,
|
||||
];
|
||||
}
|
||||
if (currentStep === 2) {
|
||||
return [
|
||||
<FormItem key="time" {...this.formLayout} label="开始时间">
|
||||
{form.getFieldDecorator('time', {
|
||||
rules: [{ required: true, message: '请选择开始时间！' }],
|
||||
})(
|
||||
<DatePicker
|
||||
style={{ width: '100%' }}
|
||||
showTime
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
placeholder="选择开始时间"
|
||||
/>
|
||||
)}
|
||||
</FormItem>,
|
||||
<FormItem key="frequency" {...this.formLayout} label="调度周期">
|
||||
{form.getFieldDecorator('frequency', {
|
||||
initialValue: formVals.frequency,
|
||||
})(
|
||||
<Select style={{ width: '100%' }}>
|
||||
<Option value="month">月</Option>
|
||||
<Option value="week">周</Option>
|
||||
</Select>
|
||||
)}
|
||||
</FormItem>,
|
||||
];
|
||||
}
|
||||
return [
|
||||
<FormItem key="name" {...this.formLayout} label="别名">
|
||||
{form.getFieldDecorator('name', {
|
||||
rules: [{ required: true, message: '请输入别名！' }],
|
||||
initialValue: formVals.name,
|
||||
})(<Input placeholder="请输入" />)}
|
||||
</FormItem>,
|
||||
<FormItem key="desc" {...this.formLayout} label="描述">
|
||||
{form.getFieldDecorator('desc', {
|
||||
rules: [{ required: true, message: '请输入至少五个字符的描述！', min: 5 }],
|
||||
initialValue: formVals.desc,
|
||||
})(<TextArea rows={4} placeholder="请输入至少五个字符" />)}
|
||||
</FormItem>,
|
||||
];
|
||||
};
|
||||
|
||||
renderFooter = currentStep => {
|
||||
const { handleUpdateModalVisible } = this.props;
|
||||
if (currentStep === 1) {
|
||||
return [
|
||||
<Button key="back" style={{ float: 'left' }} onClick={this.backward}>
|
||||
上一步
|
||||
</Button>,
|
||||
<Button key="cancel" onClick={() => handleUpdateModalVisible()}>
|
||||
取消
|
||||
</Button>,
|
||||
<Button key="forward" type="primary" onClick={() => this.handleNext(currentStep)}>
|
||||
下一步
|
||||
</Button>,
|
||||
];
|
||||
}
|
||||
if (currentStep === 2) {
|
||||
return [
|
||||
<Button key="back" style={{ float: 'left' }} onClick={this.backward}>
|
||||
上一步
|
||||
</Button>,
|
||||
<Button key="cancel" onClick={() => handleUpdateModalVisible()}>
|
||||
取消
|
||||
</Button>,
|
||||
<Button key="submit" type="primary" onClick={() => this.handleNext(currentStep)}>
|
||||
完成
|
||||
</Button>,
|
||||
];
|
||||
}
|
||||
return [
|
||||
<Button key="cancel" onClick={() => handleUpdateModalVisible()}>
|
||||
取消
|
||||
</Button>,
|
||||
<Button key="forward" type="primary" onClick={() => this.handleNext(currentStep)}>
|
||||
下一步
|
||||
</Button>,
|
||||
];
|
||||
};
|
||||
|
||||
render() {
|
||||
const { updateModalVisible, handleUpdateModalVisible } = this.props;
|
||||
const { currentStep, formVals } = this.state;
|
||||
|
||||
return (
|
||||
<Modal
|
||||
width={640}
|
||||
bodyStyle={{ padding: '32px 40px 48px' }}
|
||||
destroyOnClose
|
||||
title="别名配置"
|
||||
visible={updateModalVisible}
|
||||
footer={this.renderFooter(currentStep)}
|
||||
onCancel={() => handleUpdateModalVisible()}
|
||||
>
|
||||
<Steps style={{ marginBottom: 28 }} size="small" current={currentStep}>
|
||||
<Step title="基本信息" />
|
||||
<Step title="配置规则属性" />
|
||||
<Step title="设定调度周期" />
|
||||
</Steps>
|
||||
{this.renderContent(currentStep, formVals)}
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal
|
||||
destroyOnClose
|
||||
title="索引设置"
|
||||
visible={updateModalVisible}
|
||||
width={640}
|
||||
onOk={okHandle}
|
||||
onCancel={() => handleUpdateModalVisible()}
|
||||
>
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="索引名称">
|
||||
{form.getFieldDecorator('index', {
|
||||
initialValue: values.index,
|
||||
rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
|
||||
})(<Input placeholder="请输入名称" />)}
|
||||
</FormItem>
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="索引设置">
|
||||
{form.getFieldDecorator('settings', {
|
||||
initialValue: values.processors,
|
||||
rules: [{ required: true }],
|
||||
})(<TextArea
|
||||
style={{ minHeight: 24 }}
|
||||
placeholder="请输入"
|
||||
rows={9}
|
||||
/>)}
|
||||
</FormItem>
|
||||
</Modal>
|
||||
);
|
||||
});
|
||||
|
||||
/* eslint react/no-multi-comp:0 */
|
||||
@connect(({ rule, loading }) => ({
|
||||
rule,
|
||||
loading: loading.models.rule,
|
||||
@connect(({ pipeline, loading }) => ({
|
||||
pipeline,
|
||||
loading: loading.models.pipeline,
|
||||
}))
|
||||
@Form.create()
|
||||
class AliasManage extends PureComponent {
|
||||
|
|
@ -277,65 +108,42 @@ class AliasManage extends PureComponent {
|
|||
expandForm: false,
|
||||
selectedRows: [],
|
||||
formValues: {},
|
||||
stepFormValues: {},
|
||||
updateFormValues: {},
|
||||
};
|
||||
datasource = `[{"health":"green","status":"open","index":"blogs_fixed","uuid":"Q6zngGf9QVaWqpV0lF-0nw","pri":"1","rep":"1","docs.count":"1594","docs.deleted":"594","store.size":"17.9mb","pri.store.size":"8.9mb"},{"health":"red","status":"open","index":"elastic_qa","uuid":"_qkVlQ5LRoOKffV-nFj8Uw","pri":"1","rep":"1","docs.count":null,"docs.deleted":null,"store.size":null,"pri.store.size":null},{"health":"green","status":"open","index":".kibana-event-log-7.9.0-000001","uuid":"fgTtyl62Tc6F1ddJfPwqHA","pri":"1","rep":"1","docs.count":"20","docs.deleted":"0","store.size":"25kb","pri.store.size":"12.5kb"},{"health":"green","status":"open","index":"blogs","uuid":"Mb2n4wnNQSKqSToI_QO0Yg","pri":"1","rep":"1","docs.count":"1594","docs.deleted":"0","store.size":"11mb","pri.store.size":"5.5mb"},{"health":"green","status":"open","index":".kibana-event-log-7.9.0-000002","uuid":"8GpbwnDXR2KJUsw6srLnWw","pri":"1","rep":"1","docs.count":"9","docs.deleted":"0","store.size":"96.9kb","pri.store.size":"48.4kb"},{"health":"green","status":"open","index":".apm-agent-configuration","uuid":"vIaV9k2VS-W48oUOe2xNWA","pri":"1","rep":"1","docs.count":"0","docs.deleted":"0","store.size":"416b","pri.store.size":"208b"},{"health":"green","status":"open","index":"logs_server1","uuid":"u56jv2AyR2KOkruOfxIAnA","pri":"1","rep":"1","docs.count":"5386","docs.deleted":"0","store.size":"5.1mb","pri.store.size":"2.5mb"},{"health":"green","status":"open","index":".kibana_1","uuid":"dBCrfVblRPGVlYAIlP_Duw","pri":"1","rep":"1","docs.count":"3187","docs.deleted":"50","store.size":"24.8mb","pri.store.size":"12.4mb"},{"health":"green","status":"open","index":".tasks","uuid":"3RafayGeSNiqglO2BHof9Q","pri":"1","rep":"1","docs.count":"3","docs.deleted":"0","store.size":"39.9kb","pri.store.size":"19.9kb"},{"health":"green","status":"open","index":"filebeat-7.9.0-elastic_qa","uuid":"tktSYU14S3CrsrJb0ybpSQ","pri":"1","rep":"1","docs.count":"3009880","docs.deleted":"0","store.size":"1.6gb","pri.store.size":"850.1mb"},{"health":"green","status":"open","index":"analysis_test","uuid":"6ZHEAW1ST_qfg7mo4Bva4w","pri":"1","rep":"1","docs.count":"0","docs.deleted":"0","store.size":"416b","pri.store.size":"208b"},{"health":"green","status":"open","index":".apm-custom-link","uuid":"Y4N2TeVERrGacEGwY-NPAQ","pri":"1","rep":"1","docs.count":"0","docs.deleted":"0","store.size":"416b","pri.store.size":"208b"},{"health":"green","status":"open","index":"kibana_sample_data_ecommerce","uuid":"4FIWJKhGSr6bE72R0xEQyA","pri":"1","rep":"1","docs.count":"4675","docs.deleted":"0","store.size":"9.2mb","pri.store.size":"4.6mb"},{"health":"green","status":"open","index":".kibana_task_manager_1","uuid":"9afyndU_Q26oqOiEIoqRJw","pri":"1","rep":"1","docs.count":"6","docs.deleted":"2","store.size":"378.8kb","pri.store.size":"12.5kb"},{"health":"green","status":"open","index":".async-search","uuid":"2VbJgnN7SsqC-DWN64yXUQ","pri":"1","rep":"1","docs.count":"0","docs.deleted":"0","store.size":"3.9kb","pri.store.size":"3.7kb"}]`;
|
||||
|
||||
columns = [
|
||||
{
|
||||
title: '索引名称',
|
||||
dataIndex: 'name',
|
||||
dataIndex: 'index',
|
||||
},
|
||||
{
|
||||
title: '别名',
|
||||
dataIndex: 'desc',
|
||||
title: '文档数',
|
||||
dataIndex: 'docs.count',
|
||||
},
|
||||
{
|
||||
title: '索引调用次数',
|
||||
dataIndex: 'callNo',
|
||||
sorter: true,
|
||||
align: 'right',
|
||||
render: val => `${val} 万`,
|
||||
// mark to display a total number
|
||||
needTotal: true,
|
||||
title: '主分片数',
|
||||
dataIndex: 'pri'
|
||||
},
|
||||
{
|
||||
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 <Badge status={statusMap[val]} text={status[val]} />;
|
||||
},
|
||||
title: '从分片数',
|
||||
dataIndex: 'rep'
|
||||
},
|
||||
{
|
||||
title: '最后更新时间',
|
||||
dataIndex: 'updatedAt',
|
||||
sorter: true,
|
||||
render: val => <span>{moment(val).format('YYYY-MM-DD HH:mm:ss')}</span>,
|
||||
title: '存储大小',
|
||||
dataIndex: 'store.size'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
render: (text, record) => (
|
||||
<Fragment>
|
||||
<a onClick={() => this.handleUpdateModalVisible(true, record)}>配置别名</a>
|
||||
<a onClick={() => this.handleUpdateModalVisible(true, record)}>别名设置</a>
|
||||
<Divider type="vertical" />
|
||||
<a onClick={() => {
|
||||
this.state.selectedRows.push(record);
|
||||
this.handleDeleteClick();
|
||||
}}>删除</a>
|
||||
<Divider type="vertical" />
|
||||
<a href="">订阅警报</a>
|
||||
</Fragment>
|
||||
),
|
||||
},
|
||||
|
|
@ -343,9 +151,9 @@ class AliasManage extends PureComponent {
|
|||
|
||||
componentDidMount() {
|
||||
const { dispatch } = this.props;
|
||||
dispatch({
|
||||
type: 'rule/fetch',
|
||||
});
|
||||
// dispatch({
|
||||
// type: 'pipeline/fetch',
|
||||
// });
|
||||
}
|
||||
|
||||
handleStandardTableChange = (pagination, filtersArg, sorter) => {
|
||||
|
|
@ -369,7 +177,7 @@ class AliasManage extends PureComponent {
|
|||
}
|
||||
|
||||
dispatch({
|
||||
type: 'rule/fetch',
|
||||
type: 'pipeline/fetch',
|
||||
payload: params,
|
||||
});
|
||||
};
|
||||
|
|
@ -381,29 +189,20 @@ class AliasManage extends PureComponent {
|
|||
formValues: {},
|
||||
});
|
||||
dispatch({
|
||||
type: 'rule/fetch',
|
||||
type: 'pipeline/fetch',
|
||||
payload: {},
|
||||
});
|
||||
};
|
||||
|
||||
toggleForm = () => {
|
||||
const { expandForm } = this.state;
|
||||
this.setState({
|
||||
expandForm: !expandForm,
|
||||
});
|
||||
};
|
||||
|
||||
handleMenuClick = e => {
|
||||
handleDeleteClick = e => {
|
||||
const { dispatch } = this.props;
|
||||
const { selectedRows } = this.state;
|
||||
|
||||
if (!selectedRows) return;
|
||||
switch (e.key) {
|
||||
case 'remove':
|
||||
dispatch({
|
||||
type: 'rule/remove',
|
||||
type: 'pipeline/delete',
|
||||
payload: {
|
||||
key: selectedRows.map(row => row.key),
|
||||
key: selectedRows.map(row => row.name),
|
||||
},
|
||||
callback: () => {
|
||||
this.setState({
|
||||
|
|
@ -411,10 +210,6 @@ class AliasManage extends PureComponent {
|
|||
});
|
||||
},
|
||||
});
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
handleSelectRows = rows => {
|
||||
|
|
@ -456,16 +251,18 @@ class AliasManage extends PureComponent {
|
|||
handleUpdateModalVisible = (flag, record) => {
|
||||
this.setState({
|
||||
updateModalVisible: !!flag,
|
||||
stepFormValues: record || {},
|
||||
updateFormValues: record || {},
|
||||
});
|
||||
};
|
||||
|
||||
handleAdd = fields => {
|
||||
const { dispatch } = this.props;
|
||||
dispatch({
|
||||
type: 'rule/add',
|
||||
type: 'pipeline/add',
|
||||
payload: {
|
||||
name: fields.name,
|
||||
desc: fields.desc,
|
||||
processors: fields.processors,
|
||||
},
|
||||
});
|
||||
|
||||
|
|
@ -476,15 +273,15 @@ class AliasManage extends PureComponent {
|
|||
handleUpdate = fields => {
|
||||
const { dispatch } = this.props;
|
||||
dispatch({
|
||||
type: 'rule/update',
|
||||
type: 'pipeline/update',
|
||||
payload: {
|
||||
name: fields.name,
|
||||
desc: fields.desc,
|
||||
key: fields.key,
|
||||
processors: fields.processors,
|
||||
},
|
||||
});
|
||||
|
||||
message.success('配置成功');
|
||||
message.success('修改成功');
|
||||
this.handleUpdateModalVisible();
|
||||
};
|
||||
|
||||
|
|
@ -500,16 +297,6 @@ class AliasManage extends PureComponent {
|
|||
{getFieldDecorator('name')(<Input placeholder="请输入" />)}
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col md={8} sm={24}>
|
||||
<FormItem label="别名">
|
||||
{getFieldDecorator('status')(
|
||||
<Select placeholder="请选择" style={{ width: '100%' }}>
|
||||
<Option value="0">关闭</Option>
|
||||
<Option value="1">运行中</Option>
|
||||
</Select>
|
||||
)}
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col md={8} sm={24}>
|
||||
<span className={styles.submitButtons}>
|
||||
<Button type="primary" htmlType="submit">
|
||||
|
|
@ -518,9 +305,6 @@ class AliasManage extends PureComponent {
|
|||
<Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
|
||||
重置
|
||||
</Button>
|
||||
<a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
|
||||
展开 <Icon type="down" />
|
||||
</a>
|
||||
</span>
|
||||
</Col>
|
||||
</Row>
|
||||
|
|
@ -528,78 +312,18 @@ class AliasManage extends PureComponent {
|
|||
);
|
||||
}
|
||||
|
||||
renderAdvancedForm() {
|
||||
const {
|
||||
form: { getFieldDecorator },
|
||||
} = this.props;
|
||||
return (
|
||||
<Form onSubmit={this.handleSearch} layout="inline">
|
||||
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
|
||||
<Col md={8} sm={24}>
|
||||
<FormItem label="索引名称">
|
||||
{getFieldDecorator('name')(<Input placeholder="请输入" />)}
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col md={8} sm={24}>
|
||||
<FormItem label="别名">
|
||||
{getFieldDecorator('status')(
|
||||
<Select placeholder="请选择" style={{ width: '100%' }}>
|
||||
<Option value="0">关闭</Option>
|
||||
<Option value="1">运行中</Option>
|
||||
</Select>
|
||||
)}
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col md={8} sm={24}>
|
||||
<FormItem label="索引状态">
|
||||
{getFieldDecorator('number')(<InputNumber style={{ width: '100%' }} />)}
|
||||
</FormItem>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
|
||||
<Col md={8} sm={24}>
|
||||
<FormItem label="更新日期">
|
||||
{getFieldDecorator('date')(
|
||||
<DatePicker style={{ width: '100%' }} placeholder="请输入更新日期" />
|
||||
)}
|
||||
</FormItem>
|
||||
</Col>
|
||||
</Row>
|
||||
<div style={{ overflow: 'hidden' }}>
|
||||
<div style={{ float: 'right', marginBottom: 24 }}>
|
||||
<Button type="primary" htmlType="submit">
|
||||
查询
|
||||
</Button>
|
||||
<Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
|
||||
重置
|
||||
</Button>
|
||||
<a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
|
||||
收起 <Icon type="up" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
renderForm() {
|
||||
const { expandForm } = this.state;
|
||||
return expandForm ? this.renderAdvancedForm() : this.renderSimpleForm();
|
||||
return this.renderSimpleForm();
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
rule: { data },
|
||||
loading,
|
||||
} = this.props;
|
||||
const { selectedRows, modalVisible, updateModalVisible, stepFormValues } = this.state;
|
||||
const menu = (
|
||||
<Menu onClick={this.handleMenuClick} selectedKeys={[]}>
|
||||
<Menu.Item key="remove">删除</Menu.Item>
|
||||
<Menu.Item key="approval">批量审批</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
|
||||
const data = {
|
||||
list: JSON.parse(this.datasource),
|
||||
pagination: {
|
||||
pageSize: 5,
|
||||
},
|
||||
};
|
||||
const { selectedRows, modalVisible, updateModalVisible, updateFormValues } = this.state;
|
||||
const parentMethods = {
|
||||
handleAdd: this.handleAdd,
|
||||
handleModalVisible: this.handleModalVisible,
|
||||
|
|
@ -614,20 +338,17 @@ class AliasManage extends PureComponent {
|
|||
<div className={styles.tableList}>
|
||||
<div className={styles.tableListForm}>{this.renderForm()}</div>
|
||||
<div className={styles.tableListOperator}>
|
||||
<Button icon="plus" type="primary" onClick={() => this.handleModalVisible(true)}>
|
||||
新建
|
||||
</Button>
|
||||
{selectedRows.length > 0 && (
|
||||
<span>
|
||||
<Button>批量操作</Button>
|
||||
<Dropdown overlay={menu}>
|
||||
<Button>
|
||||
更多操作 <Icon type="down" />
|
||||
</Button>
|
||||
</Dropdown>
|
||||
<Button onClick={() => this.handleDeleteClick()}>删除</Button>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<StandardTable
|
||||
selectedRows={selectedRows}
|
||||
loading={loading}
|
||||
data={data}
|
||||
columns={this.columns}
|
||||
onSelectRow={this.handleSelectRows}
|
||||
|
|
@ -636,14 +357,14 @@ class AliasManage extends PureComponent {
|
|||
</div>
|
||||
</Card>
|
||||
<CreateForm {...parentMethods} modalVisible={modalVisible} />
|
||||
{stepFormValues && Object.keys(stepFormValues).length ? (
|
||||
{updateFormValues && Object.keys(updateFormValues).length ? (
|
||||
<UpdateForm
|
||||
{...updateMethods}
|
||||
updateModalVisible={updateModalVisible}
|
||||
values={stepFormValues}
|
||||
values={updateFormValues}
|
||||
/>
|
||||
) : null}
|
||||
</Fragment>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,49 +0,0 @@
|
|||
@import '~antd/lib/style/themes/default.less';
|
||||
@import '~@/utils/utils.less';
|
||||
|
||||
.tableList {
|
||||
.tableListOperator {
|
||||
margin-bottom: 16px;
|
||||
button {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tableListForm {
|
||||
:global {
|
||||
.ant-form-item {
|
||||
margin-bottom: 24px;
|
||||
margin-right: 0;
|
||||
display: flex;
|
||||
> .ant-form-item-label {
|
||||
width: auto;
|
||||
line-height: 32px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
.ant-form-item-control {
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
.ant-form-item-control-wrapper {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.submitButtons {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @screen-lg) {
|
||||
.tableListForm :global(.ant-form-item) {
|
||||
margin-right: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @screen-md) {
|
||||
.tableListForm :global(.ant-form-item) {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
|
@ -75,7 +75,7 @@ const UpdateForm = Form.create()(props => {
|
|||
onOk={okHandle}
|
||||
onCancel={() => handleUpdateModalVisible()}
|
||||
>
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称">
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="别名">
|
||||
{form.getFieldDecorator('name', {
|
||||
initialValue: values.name,
|
||||
rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
|
||||
|
|
@ -101,7 +101,7 @@ const UpdateForm = Form.create()(props => {
|
|||
loading: loading.models.pipeline,
|
||||
}))
|
||||
@Form.create()
|
||||
class param extends PureComponent {
|
||||
class Param extends PureComponent {
|
||||
state = {
|
||||
modalVisible: false,
|
||||
updateModalVisible: false,
|
||||
|
|
@ -177,15 +177,15 @@ class param extends PureComponent {
|
|||
|
||||
columns = [
|
||||
{
|
||||
title: '模板名称',
|
||||
title: '字段名称',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '模式',
|
||||
title: '别名',
|
||||
dataIndex: 'index_patterns',
|
||||
},
|
||||
{
|
||||
title: 'order',
|
||||
title: '排序',
|
||||
dataIndex: 'order'
|
||||
},
|
||||
{
|
||||
|
|
@ -196,7 +196,7 @@ class param extends PureComponent {
|
|||
title: '操作',
|
||||
render: (text, record) => (
|
||||
<Fragment>
|
||||
<a onClick={() => this.handleUpdateModalVisible(true, record)}>设置</a>
|
||||
<a onClick={() => this.handleUpdateModalVisible(true, record)}>别名设置</a>
|
||||
<Divider type="vertical" />
|
||||
<a onClick={() => {
|
||||
this.state.selectedRows.push(record);
|
||||
|
|
@ -351,7 +351,7 @@ class param extends PureComponent {
|
|||
<Form onSubmit={this.handleSearch} layout="inline">
|
||||
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
|
||||
<Col md={8} sm={24}>
|
||||
<FormItem label="模板名称">
|
||||
<FormItem label="别名">
|
||||
{getFieldDecorator('name')(<Input placeholder="请输入" />)}
|
||||
</FormItem>
|
||||
</Col>
|
||||
|
|
@ -427,4 +427,4 @@ class param extends PureComponent {
|
|||
}
|
||||
}
|
||||
|
||||
export default param;
|
||||
export default Param;
|
||||
|
|
@ -37,7 +37,7 @@ const CreateForm = Form.create()(props => {
|
|||
onOk={okHandle}
|
||||
onCancel={() => handleModalVisible()}
|
||||
>
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称">
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="index pattern 规则">
|
||||
{form.getFieldDecorator('name', {
|
||||
rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
|
||||
})(<Input placeholder="请输入名称" />)}
|
||||
|
|
@ -75,7 +75,7 @@ const UpdateForm = Form.create()(props => {
|
|||
onOk={okHandle}
|
||||
onCancel={() => handleUpdateModalVisible()}
|
||||
>
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称">
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="index pattern 规则">
|
||||
{form.getFieldDecorator('name', {
|
||||
initialValue: values.name,
|
||||
rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
|
||||
|
|
@ -177,15 +177,15 @@ class rule extends PureComponent {
|
|||
|
||||
columns = [
|
||||
{
|
||||
title: '模板名称',
|
||||
title: '索引 pattern',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '模式',
|
||||
title: 'rule',
|
||||
dataIndex: 'index_patterns',
|
||||
},
|
||||
{
|
||||
title: 'order',
|
||||
title: '排序',
|
||||
dataIndex: 'order'
|
||||
},
|
||||
{
|
||||
|
|
@ -196,7 +196,7 @@ class rule extends PureComponent {
|
|||
title: '操作',
|
||||
render: (text, record) => (
|
||||
<Fragment>
|
||||
<a onClick={() => this.handleUpdateModalVisible(true, record)}>设置</a>
|
||||
<a onClick={() => this.handleUpdateModalVisible(true, record)}>设置规则</a>
|
||||
<Divider type="vertical" />
|
||||
<a onClick={() => {
|
||||
this.state.selectedRows.push(record);
|
||||
|
|
@ -351,7 +351,7 @@ class rule extends PureComponent {
|
|||
<Form onSubmit={this.handleSearch} layout="inline">
|
||||
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
|
||||
<Col md={8} sm={24}>
|
||||
<FormItem label="模板名称">
|
||||
<FormItem label="index pattern 规则">
|
||||
{getFieldDecorator('name')(<Input placeholder="请输入" />)}
|
||||
</FormItem>
|
||||
</Col>
|
||||
|
|
@ -1,430 +1,156 @@
|
|||
import React, { PureComponent, Fragment } from 'react';
|
||||
import React, { Component,Fragment } from 'react';
|
||||
import { connect } from 'dva';
|
||||
import {
|
||||
Row,
|
||||
Col,
|
||||
Card,
|
||||
Form,
|
||||
Input,
|
||||
Button,
|
||||
Modal,
|
||||
message,
|
||||
Divider,
|
||||
} from 'antd';
|
||||
import StandardTable from '@/components/StandardTable';
|
||||
import { Card,Form,Input, Select,Button,message,Upload, Icon,Switch } from 'antd';
|
||||
const { Option } = Select;
|
||||
import { formatMessage, FormattedMessage } from 'umi/locale';
|
||||
import DescriptionList from '@/components/DescriptionList';
|
||||
import styles from '../../profile/AdvancedProfile.less';
|
||||
const { Description } = DescriptionList;
|
||||
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
|
||||
|
||||
import styles from '../../List/TableList.less';
|
||||
|
||||
const FormItem = Form.Item;
|
||||
const { TextArea } = Input;
|
||||
const { Dragger } = Upload;
|
||||
|
||||
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 (
|
||||
<Modal
|
||||
destroyOnClose
|
||||
title="新建模板"
|
||||
visible={modalVisible}
|
||||
width={640}
|
||||
onOk={okHandle}
|
||||
onCancel={() => handleModalVisible()}
|
||||
>
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称">
|
||||
{form.getFieldDecorator('name', {
|
||||
rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
|
||||
})(<Input placeholder="请输入名称" />)}
|
||||
</FormItem>
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板设置">
|
||||
{form.getFieldDecorator('settings', {
|
||||
rules: [{ required: true }],
|
||||
})(<TextArea
|
||||
style={{ minHeight: 24 }}
|
||||
placeholder="请输入"
|
||||
rows={9}
|
||||
/>)}
|
||||
</FormItem>
|
||||
</Modal>
|
||||
);
|
||||
});
|
||||
|
||||
const UpdateForm = Form.create()(props => {
|
||||
const { updateModalVisible, handleUpdateModalVisible, handleUpdate,values,form } = props;
|
||||
|
||||
const okHandle = () => {
|
||||
form.validateFields((err, fieldsValue) => {
|
||||
if (err) return;
|
||||
form.resetFields();
|
||||
handleUpdate(fieldsValue);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
destroyOnClose
|
||||
title="模板设置"
|
||||
visible={updateModalVisible}
|
||||
width={640}
|
||||
onOk={okHandle}
|
||||
onCancel={() => handleUpdateModalVisible()}
|
||||
>
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称">
|
||||
{form.getFieldDecorator('name', {
|
||||
initialValue: values.name,
|
||||
rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
|
||||
})(<Input placeholder="请输入名称" />)}
|
||||
</FormItem>
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板设置">
|
||||
{form.getFieldDecorator('settings', {
|
||||
initialValue: values.processors,
|
||||
rules: [{ required: true }],
|
||||
})(<TextArea
|
||||
style={{ minHeight: 24 }}
|
||||
placeholder="请输入"
|
||||
rows={9}
|
||||
/>)}
|
||||
</FormItem>
|
||||
</Modal>
|
||||
);
|
||||
});
|
||||
|
||||
/* eslint react/no-multi-comp:0 */
|
||||
@connect(({ pipeline, loading }) => ({
|
||||
pipeline,
|
||||
loading: loading.models.pipeline,
|
||||
@connect(({logstash,loading }) => ({
|
||||
data: logstash.logstash,
|
||||
loading: loading.models.logstash,
|
||||
submitting: loading.effects['logstash/submitLogstashConfig'],
|
||||
}))
|
||||
|
||||
@Form.create()
|
||||
class AnalyzerTest extends PureComponent {
|
||||
state = {
|
||||
modalVisible: false,
|
||||
updateModalVisible: false,
|
||||
expandForm: false,
|
||||
selectedRows: [],
|
||||
formValues: {},
|
||||
updateFormValues: {},
|
||||
};
|
||||
//index template detail example
|
||||
// {
|
||||
// ".ml-state" : {
|
||||
// "order" : 0,
|
||||
// "version" : 7090199,
|
||||
// "index_patterns" : [
|
||||
// ".ml-state*"
|
||||
// ],
|
||||
// "settings" : {
|
||||
// "index" : {
|
||||
// "hidden" : "true",
|
||||
// "lifecycle" : {
|
||||
// "name" : "ml-size-based-ilm-policy",
|
||||
// "rollover_alias" : ".ml-state-write"
|
||||
// },
|
||||
// "auto_expand_replicas" : "0-1"
|
||||
// }
|
||||
// },
|
||||
// "mappings" : {
|
||||
// "_meta" : {
|
||||
// "version" : "7090199"
|
||||
// },
|
||||
// "enabled" : false
|
||||
// },
|
||||
// "aliases" : { }
|
||||
// }
|
||||
// }
|
||||
datasource = `
|
||||
[
|
||||
{
|
||||
"name" : "filebeat-7.9.1",
|
||||
"index_patterns" : "[filebeat-7.9.1-*]",
|
||||
"order" : "1",
|
||||
"version" : null,
|
||||
"composed_of" : ""
|
||||
},
|
||||
{
|
||||
"name" : "apm-7.9.1-span",
|
||||
"index_patterns" : "[apm-7.9.1-span*]",
|
||||
"order" : "2",
|
||||
"version" : null,
|
||||
"composed_of" : ""
|
||||
},
|
||||
{
|
||||
"name" : ".lists-default",
|
||||
"index_patterns" : "[.lists-default-*]",
|
||||
"order" : "0",
|
||||
"version" : null,
|
||||
"composed_of" : ""
|
||||
},
|
||||
{
|
||||
"name" : ".monitoring-es",
|
||||
"index_patterns" : "[.monitoring-es-7-*]",
|
||||
"order" : "0",
|
||||
"version" : "7000199",
|
||||
"composed_of" : ""
|
||||
},
|
||||
{
|
||||
"name" : ".monitoring-beats",
|
||||
"index_patterns" : "[.monitoring-beats-7-*]",
|
||||
"order" : "0",
|
||||
"version" : "7000199",
|
||||
"composed_of" : ""
|
||||
}]`;
|
||||
|
||||
columns = [
|
||||
{
|
||||
title: '模板名称',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '模式',
|
||||
dataIndex: 'index_patterns',
|
||||
},
|
||||
{
|
||||
title: 'order',
|
||||
dataIndex: 'order'
|
||||
},
|
||||
{
|
||||
title: '版本',
|
||||
dataIndex: 'version'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
render: (text, record) => (
|
||||
<Fragment>
|
||||
<a onClick={() => this.handleUpdateModalVisible(true, record)}>设置</a>
|
||||
<Divider type="vertical" />
|
||||
<a onClick={() => {
|
||||
this.state.selectedRows.push(record);
|
||||
this.handleDeleteClick();
|
||||
}}>删除</a>
|
||||
</Fragment>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
componentDidMount() {
|
||||
const { dispatch } = this.props;
|
||||
// dispatch({
|
||||
// type: 'pipeline/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}`;
|
||||
class AnalyzerTest extends Component {
|
||||
state = {
|
||||
operationkey: 'tab1',
|
||||
};logstash
|
||||
componentDidMount() {
|
||||
// message.loading('数据加载中..', 'initdata');
|
||||
// const { dispatch } = this.props;
|
||||
// dispatch({
|
||||
// type: 'logstash/queryInitialLogstashConfig',
|
||||
// });
|
||||
}
|
||||
|
||||
dispatch({
|
||||
type: 'pipeline/fetch',
|
||||
payload: params,
|
||||
});
|
||||
};
|
||||
|
||||
handleFormReset = () => {
|
||||
const { form, dispatch } = this.props;
|
||||
form.resetFields();
|
||||
this.setState({
|
||||
formValues: {},
|
||||
});
|
||||
dispatch({
|
||||
type: 'pipeline/fetch',
|
||||
payload: {},
|
||||
});
|
||||
};
|
||||
|
||||
handleDeleteClick = e => {
|
||||
const { dispatch } = this.props;
|
||||
const { selectedRows } = this.state;
|
||||
|
||||
if (!selectedRows) return;
|
||||
dispatch({
|
||||
type: 'pipeline/delete',
|
||||
payload: {
|
||||
key: selectedRows.map(row => row.name),
|
||||
},
|
||||
callback: () => {
|
||||
this.setState({
|
||||
selectedRows: [],
|
||||
});
|
||||
},
|
||||
onOperationTabChange = key => {
|
||||
this.setState({ operationkey: key });
|
||||
};
|
||||
handleSubmit = e => {
|
||||
const { dispatch, form } = this.props;
|
||||
e.preventDefault();
|
||||
form.validateFieldsAndScroll((err, values) => {
|
||||
if (!err) {
|
||||
let pdata = {
|
||||
jdbc:{
|
||||
type: values.dbtype,
|
||||
config: values.logstash.jdbcconf,
|
||||
},
|
||||
};
|
||||
if(e.target.name="kafka"){
|
||||
pdata={
|
||||
kafka:{
|
||||
config: values.logstash.kafkaconf,
|
||||
},
|
||||
}
|
||||
}
|
||||
dispatch({
|
||||
type: 'logstash/submitLogstashConfig',
|
||||
payload: pdata,
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
handleSelectRows = rows => {
|
||||
this.setState({
|
||||
selectedRows: rows,
|
||||
});
|
||||
};
|
||||
render() {
|
||||
const { operationkey } = this.state;
|
||||
const { submitting, data, loading } = this.props;
|
||||
const {
|
||||
form: { getFieldDecorator, getFieldValue },
|
||||
} = this.props;
|
||||
const formItemLayout = {
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 7 },
|
||||
md:{span:5},
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 12 },
|
||||
md: { span: 15 },
|
||||
},
|
||||
};
|
||||
const submitFormLayout = {
|
||||
wrapperCol: {
|
||||
xs: { span: 24, offset: 0 },
|
||||
sm: { span: 10, offset: 7 },
|
||||
},
|
||||
};
|
||||
const uploadProps = {
|
||||
name: 'file',
|
||||
multiple: true,
|
||||
action: '',
|
||||
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.`);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
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,
|
||||
updateFormValues: record || {},
|
||||
});
|
||||
};
|
||||
|
||||
handleAdd = fields => {
|
||||
const { dispatch } = this.props;
|
||||
dispatch({
|
||||
type: 'pipeline/add',
|
||||
payload: {
|
||||
name: fields.name,
|
||||
desc: fields.desc,
|
||||
processors: fields.processors,
|
||||
},
|
||||
});
|
||||
|
||||
message.success('添加成功');
|
||||
this.handleModalVisible();
|
||||
};
|
||||
|
||||
handleUpdate = fields => {
|
||||
const { dispatch } = this.props;
|
||||
dispatch({
|
||||
type: 'pipeline/update',
|
||||
payload: {
|
||||
name: fields.name,
|
||||
desc: fields.desc,
|
||||
processors: fields.processors,
|
||||
},
|
||||
});
|
||||
|
||||
message.success('修改成功');
|
||||
this.handleUpdateModalVisible();
|
||||
};
|
||||
|
||||
renderSimpleForm() {
|
||||
const {
|
||||
form: { getFieldDecorator },
|
||||
} = this.props;
|
||||
return (
|
||||
<Form onSubmit={this.handleSearch} layout="inline">
|
||||
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
|
||||
<Col md={8} sm={24}>
|
||||
<FormItem label="模板名称">
|
||||
{getFieldDecorator('name')(<Input placeholder="请输入" />)}
|
||||
return (
|
||||
<Fragment>
|
||||
<Card className={styles.tabsCard} bordered={false}>
|
||||
<div>
|
||||
<Form onSubmit={this.handleSubmit} hideRequiredMark style={{ marginTop: 8 }}>
|
||||
<FormItem {...formItemLayout} label="选择分词器">
|
||||
{getFieldDecorator('index', {
|
||||
initialValue: data.index,
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择分词器",
|
||||
},
|
||||
],
|
||||
})(
|
||||
<Select placeholder="Please select" style={{ width: 150 }}>
|
||||
<Option value="blogs">blogs</Option>
|
||||
<Option value="logs">logs</Option>
|
||||
<Option value="filebeat">filebeat</Option>
|
||||
</Select>
|
||||
)}
|
||||
</FormItem>
|
||||
<FormItem {...formItemLayout} label="测试数据">
|
||||
{getFieldDecorator('bulk', {
|
||||
initialValue: data.bulk,
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入测试数据',
|
||||
},
|
||||
],
|
||||
})(
|
||||
<TextArea
|
||||
style={{ minHeight: 32, width: '100%' }}
|
||||
placeholder=''
|
||||
rows={12}
|
||||
/>
|
||||
)}
|
||||
</FormItem>
|
||||
<FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
|
||||
<Button type="primary" htmlType="submit" loading={submitting}>
|
||||
<FormattedMessage id="form.submit" />
|
||||
</Button>
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col md={8} sm={24}>
|
||||
<span className={styles.submitButtons}>
|
||||
<Button type="primary" htmlType="submit">
|
||||
查询
|
||||
</Button>
|
||||
<Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
|
||||
重置
|
||||
</Button>
|
||||
</span>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
renderForm() {
|
||||
return this.renderSimpleForm();
|
||||
}
|
||||
|
||||
render() {
|
||||
const data = {
|
||||
list: JSON.parse(this.datasource),
|
||||
pagination: {
|
||||
pageSize: 5,
|
||||
},
|
||||
};
|
||||
const { selectedRows, modalVisible, updateModalVisible, updateFormValues } = this.state;
|
||||
const parentMethods = {
|
||||
handleAdd: this.handleAdd,
|
||||
handleModalVisible: this.handleModalVisible,
|
||||
};
|
||||
const updateMethods = {
|
||||
handleUpdateModalVisible: this.handleUpdateModalVisible,
|
||||
handleUpdate: this.handleUpdate,
|
||||
};
|
||||
return (
|
||||
<Fragment>
|
||||
<Card bordered={false}>
|
||||
<div className={styles.tableList}>
|
||||
<div className={styles.tableListForm}>{this.renderForm()}</div>
|
||||
<div className={styles.tableListOperator}>
|
||||
<Button icon="plus" type="primary" onClick={() => this.handleModalVisible(true)}>
|
||||
新建
|
||||
</Button>
|
||||
{selectedRows.length > 0 && (
|
||||
<span>
|
||||
<Button onClick={() => this.handleDeleteClick()}>删除</Button>
|
||||
</span>
|
||||
)}
|
||||
</Form>
|
||||
</div>
|
||||
<StandardTable
|
||||
selectedRows={selectedRows}
|
||||
data={data}
|
||||
columns={this.columns}
|
||||
onSelectRow={this.handleSelectRows}
|
||||
onChange={this.handleStandardTableChange}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
<CreateForm {...parentMethods} modalVisible={modalVisible} />
|
||||
{updateFormValues && Object.keys(updateFormValues).length ? (
|
||||
<UpdateForm
|
||||
{...updateMethods}
|
||||
updateModalVisible={updateModalVisible}
|
||||
values={updateFormValues}
|
||||
/>
|
||||
) : null}
|
||||
</Fragment>
|
||||
</Card>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default AnalyzerTest;
|
||||
|
|
|
|||
|
|
@ -31,18 +31,18 @@ const CreateForm = Form.create()(props => {
|
|||
return (
|
||||
<Modal
|
||||
destroyOnClose
|
||||
title="新建模板"
|
||||
title="新建分词器"
|
||||
visible={modalVisible}
|
||||
width={640}
|
||||
onOk={okHandle}
|
||||
onCancel={() => handleModalVisible()}
|
||||
>
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称">
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="分词器名称">
|
||||
{form.getFieldDecorator('name', {
|
||||
rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
|
||||
})(<Input placeholder="请输入名称" />)}
|
||||
</FormItem>
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板设置">
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="设置">
|
||||
{form.getFieldDecorator('settings', {
|
||||
rules: [{ required: true }],
|
||||
})(<TextArea
|
||||
|
|
@ -75,13 +75,13 @@ const UpdateForm = Form.create()(props => {
|
|||
onOk={okHandle}
|
||||
onCancel={() => handleUpdateModalVisible()}
|
||||
>
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称">
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="分词器名称">
|
||||
{form.getFieldDecorator('name', {
|
||||
initialValue: values.name,
|
||||
rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
|
||||
})(<Input placeholder="请输入名称" />)}
|
||||
</FormItem>
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板设置">
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="设置">
|
||||
{form.getFieldDecorator('settings', {
|
||||
initialValue: values.processors,
|
||||
rules: [{ required: true }],
|
||||
|
|
@ -177,7 +177,7 @@ class Manage extends PureComponent {
|
|||
|
||||
columns = [
|
||||
{
|
||||
title: '模板名称',
|
||||
title: '分词器名称',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
|
|
@ -351,7 +351,7 @@ class Manage extends PureComponent {
|
|||
<Form onSubmit={this.handleSearch} layout="inline">
|
||||
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
|
||||
<Col md={8} sm={24}>
|
||||
<FormItem label="模板名称">
|
||||
<FormItem label="分词器名称">
|
||||
{getFieldDecorator('name')(<Input placeholder="请输入" />)}
|
||||
</FormItem>
|
||||
</Col>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,49 @@
|
|||
import { routerRedux } from 'dva/router';
|
||||
import { message } from 'antd';
|
||||
import { getLogstashConfig, saveLogstashConfig } from '@/services/datamanagement';
|
||||
|
||||
export default {
|
||||
namespace: 'logstash',
|
||||
|
||||
state: {
|
||||
logstash: {
|
||||
jdbc:{},
|
||||
kafka:{},
|
||||
}
|
||||
},
|
||||
effects: {
|
||||
*queryInitialLogstashConfig(_, {call, put}){
|
||||
const istate = yield call(getLogstashConfig);
|
||||
yield put({
|
||||
type: 'initLogstashState',
|
||||
payload: istate,
|
||||
});
|
||||
message.loading('数据加载完成', 'initdata');
|
||||
},
|
||||
*submitLogstashConfig({payload}, {call, put}){
|
||||
console.log(payload);
|
||||
const rel = yield call(saveLogstashConfig, payload);
|
||||
if(rel.message == "Ok") {
|
||||
message.success('提交成功');
|
||||
yield put({
|
||||
type: 'updateState',
|
||||
payload: payload,
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
reducers: {
|
||||
initLogstashState(state, { payload: istate }) {
|
||||
return {
|
||||
logstash: istate
|
||||
}
|
||||
},
|
||||
updateState(state, {payload: newState}){
|
||||
var obj = {
|
||||
...state,
|
||||
logstash: Object.assign(state.logstash, newState),
|
||||
};
|
||||
return obj;
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
@ -37,7 +37,7 @@ const CreateForm = Form.create()(props => {
|
|||
onOk={okHandle}
|
||||
onCancel={() => handleModalVisible()}
|
||||
>
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称">
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="意图识别">
|
||||
{form.getFieldDecorator('name', {
|
||||
rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
|
||||
})(<Input placeholder="请输入名称" />)}
|
||||
|
|
@ -75,7 +75,7 @@ const UpdateForm = Form.create()(props => {
|
|||
onOk={okHandle}
|
||||
onCancel={() => handleUpdateModalVisible()}
|
||||
>
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称">
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="意图识别">
|
||||
{form.getFieldDecorator('name', {
|
||||
initialValue: values.name,
|
||||
rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
|
||||
|
|
@ -177,13 +177,9 @@ class Intention extends PureComponent {
|
|||
|
||||
columns = [
|
||||
{
|
||||
title: '模板名称',
|
||||
title: '意图识别',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '模式',
|
||||
dataIndex: 'index_patterns',
|
||||
},
|
||||
{
|
||||
title: 'order',
|
||||
dataIndex: 'order'
|
||||
|
|
@ -351,7 +347,7 @@ class Intention extends PureComponent {
|
|||
<Form onSubmit={this.handleSearch} layout="inline">
|
||||
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
|
||||
<Col md={8} sm={24}>
|
||||
<FormItem label="模板名称">
|
||||
<FormItem label="意图识别">
|
||||
{getFieldDecorator('name')(<Input placeholder="请输入" />)}
|
||||
</FormItem>
|
||||
</Col>
|
||||
|
|
|
|||
|
|
@ -31,18 +31,18 @@ const CreateForm = Form.create()(props => {
|
|||
return (
|
||||
<Modal
|
||||
destroyOnClose
|
||||
title="新建模板"
|
||||
title="新建知识图谱"
|
||||
visible={modalVisible}
|
||||
width={640}
|
||||
onOk={okHandle}
|
||||
onCancel={() => handleModalVisible()}
|
||||
>
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称">
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="知识图谱">
|
||||
{form.getFieldDecorator('name', {
|
||||
rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
|
||||
})(<Input placeholder="请输入名称" />)}
|
||||
</FormItem>
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板设置">
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="设置">
|
||||
{form.getFieldDecorator('settings', {
|
||||
rules: [{ required: true }],
|
||||
})(<TextArea
|
||||
|
|
@ -69,19 +69,19 @@ const UpdateForm = Form.create()(props => {
|
|||
return (
|
||||
<Modal
|
||||
destroyOnClose
|
||||
title="模板设置"
|
||||
title="知识图谱设置"
|
||||
visible={updateModalVisible}
|
||||
width={640}
|
||||
onOk={okHandle}
|
||||
onCancel={() => handleUpdateModalVisible()}
|
||||
>
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称">
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="知识图谱">
|
||||
{form.getFieldDecorator('name', {
|
||||
initialValue: values.name,
|
||||
rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
|
||||
})(<Input placeholder="请输入名称" />)}
|
||||
</FormItem>
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板设置">
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="设置">
|
||||
{form.getFieldDecorator('settings', {
|
||||
initialValue: values.processors,
|
||||
rules: [{ required: true }],
|
||||
|
|
@ -177,13 +177,9 @@ class Knowledge extends PureComponent {
|
|||
|
||||
columns = [
|
||||
{
|
||||
title: '模板名称',
|
||||
title: '知识图谱',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '模式',
|
||||
dataIndex: 'index_patterns',
|
||||
},
|
||||
{
|
||||
title: 'order',
|
||||
dataIndex: 'order'
|
||||
|
|
@ -351,7 +347,7 @@ class Knowledge extends PureComponent {
|
|||
<Form onSubmit={this.handleSearch} layout="inline">
|
||||
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
|
||||
<Col md={8} sm={24}>
|
||||
<FormItem label="模板名称">
|
||||
<FormItem label="知识图谱">
|
||||
{getFieldDecorator('name')(<Input placeholder="请输入" />)}
|
||||
</FormItem>
|
||||
</Col>
|
||||
|
|
|
|||
|
|
@ -37,12 +37,12 @@ const CreateForm = Form.create()(props => {
|
|||
onOk={okHandle}
|
||||
onCancel={() => handleModalVisible()}
|
||||
>
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称">
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="语义词">
|
||||
{form.getFieldDecorator('name', {
|
||||
rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
|
||||
})(<Input placeholder="请输入名称" />)}
|
||||
</FormItem>
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板设置">
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="设置">
|
||||
{form.getFieldDecorator('settings', {
|
||||
rules: [{ required: true }],
|
||||
})(<TextArea
|
||||
|
|
@ -75,13 +75,13 @@ const UpdateForm = Form.create()(props => {
|
|||
onOk={okHandle}
|
||||
onCancel={() => handleUpdateModalVisible()}
|
||||
>
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称">
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="语义词">
|
||||
{form.getFieldDecorator('name', {
|
||||
initialValue: values.name,
|
||||
rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
|
||||
})(<Input placeholder="请输入名称" />)}
|
||||
</FormItem>
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板设置">
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="设置">
|
||||
{form.getFieldDecorator('settings', {
|
||||
initialValue: values.processors,
|
||||
rules: [{ required: true }],
|
||||
|
|
@ -177,11 +177,11 @@ class Query extends PureComponent {
|
|||
|
||||
columns = [
|
||||
{
|
||||
title: '模板名称',
|
||||
title: '语义词',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '模式',
|
||||
title: '语义',
|
||||
dataIndex: 'index_patterns',
|
||||
},
|
||||
{
|
||||
|
|
@ -351,7 +351,7 @@ class Query extends PureComponent {
|
|||
<Form onSubmit={this.handleSearch} layout="inline">
|
||||
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
|
||||
<Col md={8} sm={24}>
|
||||
<FormItem label="模板名称">
|
||||
<FormItem label="语义词">
|
||||
{getFieldDecorator('name')(<Input placeholder="请输入" />)}
|
||||
</FormItem>
|
||||
</Col>
|
||||
|
|
|
|||
|
|
@ -31,18 +31,18 @@ const CreateForm = Form.create()(props => {
|
|||
return (
|
||||
<Modal
|
||||
destroyOnClose
|
||||
title="新建模板"
|
||||
title="新建文本聚类"
|
||||
visible={modalVisible}
|
||||
width={640}
|
||||
onOk={okHandle}
|
||||
onCancel={() => handleModalVisible()}
|
||||
>
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称">
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="文本聚类">
|
||||
{form.getFieldDecorator('name', {
|
||||
rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
|
||||
})(<Input placeholder="请输入名称" />)}
|
||||
</FormItem>
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板设置">
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="设置">
|
||||
{form.getFieldDecorator('settings', {
|
||||
rules: [{ required: true }],
|
||||
})(<TextArea
|
||||
|
|
@ -69,19 +69,19 @@ const UpdateForm = Form.create()(props => {
|
|||
return (
|
||||
<Modal
|
||||
destroyOnClose
|
||||
title="模板设置"
|
||||
title="文本聚类设置"
|
||||
visible={updateModalVisible}
|
||||
width={640}
|
||||
onOk={okHandle}
|
||||
onCancel={() => handleUpdateModalVisible()}
|
||||
>
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称">
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="文本聚类">
|
||||
{form.getFieldDecorator('name', {
|
||||
initialValue: values.name,
|
||||
rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
|
||||
})(<Input placeholder="请输入名称" />)}
|
||||
</FormItem>
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板设置">
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="设置">
|
||||
{form.getFieldDecorator('settings', {
|
||||
initialValue: values.processors,
|
||||
rules: [{ required: true }],
|
||||
|
|
@ -177,11 +177,11 @@ class Text extends PureComponent {
|
|||
|
||||
columns = [
|
||||
{
|
||||
title: '模板名称',
|
||||
title: '文本',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '模式',
|
||||
title: '聚类',
|
||||
dataIndex: 'index_patterns',
|
||||
},
|
||||
{
|
||||
|
|
@ -351,7 +351,7 @@ class Text extends PureComponent {
|
|||
<Form onSubmit={this.handleSearch} layout="inline">
|
||||
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
|
||||
<Col md={8} sm={24}>
|
||||
<FormItem label="模板名称">
|
||||
<FormItem label="文本">
|
||||
{getFieldDecorator('name')(<Input placeholder="请输入" />)}
|
||||
</FormItem>
|
||||
</Col>
|
||||
|
|
|
|||
|
|
@ -1,285 +1,631 @@
|
|||
import React, { PureComponent } from 'react';
|
||||
import { findDOMNode } from 'react-dom';
|
||||
import moment from 'moment';
|
||||
import React, { PureComponent, Fragment } from 'react';
|
||||
import { connect } from 'dva';
|
||||
import moment from 'moment';
|
||||
import {
|
||||
List,
|
||||
Card,
|
||||
Row,
|
||||
Col,
|
||||
Radio,
|
||||
Input,
|
||||
Progress,
|
||||
Button,
|
||||
Icon,
|
||||
Dropdown,
|
||||
Menu,
|
||||
Avatar,
|
||||
Modal,
|
||||
Form,
|
||||
DatePicker,
|
||||
Select,
|
||||
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 Result from '@/components/Result';
|
||||
|
||||
import styles from './History.less';
|
||||
|
||||
const FormItem = Form.Item;
|
||||
const RadioButton = Radio.Button;
|
||||
const { Step } = Steps;
|
||||
const { TextArea } = Input;
|
||||
const { Option } = Select;
|
||||
const RadioGroup = Radio.Group;
|
||||
const SelectOption = Select.Option;
|
||||
const { Search, TextArea } = Input;
|
||||
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 (
|
||||
<Modal
|
||||
destroyOnClose
|
||||
title="新建规则"
|
||||
visible={modalVisible}
|
||||
onOk={okHandle}
|
||||
onCancel={() => handleModalVisible()}
|
||||
>
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="描述">
|
||||
{form.getFieldDecorator('desc', {
|
||||
rules: [{ required: true, message: '请输入至少五个字符的规则描述！', min: 5 }],
|
||||
})(<Input placeholder="请输入" />)}
|
||||
</FormItem>
|
||||
</Modal>
|
||||
);
|
||||
});
|
||||
|
||||
@connect(({ list, loading }) => ({
|
||||
list,
|
||||
loading: loading.models.list,
|
||||
@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;
|
||||
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 [
|
||||
<FormItem key="target" {...this.formLayout} label="监控对象">
|
||||
{form.getFieldDecorator('target', {
|
||||
initialValue: formVals.target,
|
||||
})(
|
||||
<Select style={{ width: '100%' }}>
|
||||
<Option value="0">表一</Option>
|
||||
<Option value="1">表二</Option>
|
||||
</Select>
|
||||
)}
|
||||
</FormItem>,
|
||||
<FormItem key="template" {...this.formLayout} label="规则模板">
|
||||
{form.getFieldDecorator('template', {
|
||||
initialValue: formVals.template,
|
||||
})(
|
||||
<Select style={{ width: '100%' }}>
|
||||
<Option value="0">规则模板一</Option>
|
||||
<Option value="1">规则模板二</Option>
|
||||
</Select>
|
||||
)}
|
||||
</FormItem>,
|
||||
<FormItem key="type" {...this.formLayout} label="规则类型">
|
||||
{form.getFieldDecorator('type', {
|
||||
initialValue: formVals.type,
|
||||
})(
|
||||
<RadioGroup>
|
||||
<Radio value="0">强</Radio>
|
||||
<Radio value="1">弱</Radio>
|
||||
</RadioGroup>
|
||||
)}
|
||||
</FormItem>,
|
||||
];
|
||||
}
|
||||
if (currentStep === 2) {
|
||||
return [
|
||||
<FormItem key="time" {...this.formLayout} label="开始时间">
|
||||
{form.getFieldDecorator('time', {
|
||||
rules: [{ required: true, message: '请选择开始时间！' }],
|
||||
})(
|
||||
<DatePicker
|
||||
style={{ width: '100%' }}
|
||||
showTime
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
placeholder="选择开始时间"
|
||||
/>
|
||||
)}
|
||||
</FormItem>,
|
||||
<FormItem key="frequency" {...this.formLayout} label="调度周期">
|
||||
{form.getFieldDecorator('frequency', {
|
||||
initialValue: formVals.frequency,
|
||||
})(
|
||||
<Select style={{ width: '100%' }}>
|
||||
<Option value="month">月</Option>
|
||||
<Option value="week">周</Option>
|
||||
</Select>
|
||||
)}
|
||||
</FormItem>,
|
||||
];
|
||||
}
|
||||
return [
|
||||
<FormItem key="name" {...this.formLayout} label="别名">
|
||||
{form.getFieldDecorator('name', {
|
||||
rules: [{ required: true, message: '请输入别名！' }],
|
||||
initialValue: formVals.name,
|
||||
})(<Input placeholder="请输入" />)}
|
||||
</FormItem>,
|
||||
<FormItem key="desc" {...this.formLayout} label="描述">
|
||||
{form.getFieldDecorator('desc', {
|
||||
rules: [{ required: true, message: '请输入至少五个字符的描述！', min: 5 }],
|
||||
initialValue: formVals.desc,
|
||||
})(<TextArea rows={4} placeholder="请输入至少五个字符" />)}
|
||||
</FormItem>,
|
||||
];
|
||||
};
|
||||
|
||||
renderFooter = currentStep => {
|
||||
const { handleUpdateModalVisible } = this.props;
|
||||
if (currentStep === 1) {
|
||||
return [
|
||||
<Button key="back" style={{ float: 'left' }} onClick={this.backward}>
|
||||
上一步
|
||||
</Button>,
|
||||
<Button key="cancel" onClick={() => handleUpdateModalVisible()}>
|
||||
取消
|
||||
</Button>,
|
||||
<Button key="forward" type="primary" onClick={() => this.handleNext(currentStep)}>
|
||||
下一步
|
||||
</Button>,
|
||||
];
|
||||
}
|
||||
if (currentStep === 2) {
|
||||
return [
|
||||
<Button key="back" style={{ float: 'left' }} onClick={this.backward}>
|
||||
上一步
|
||||
</Button>,
|
||||
<Button key="cancel" onClick={() => handleUpdateModalVisible()}>
|
||||
取消
|
||||
</Button>,
|
||||
<Button key="submit" type="primary" onClick={() => this.handleNext(currentStep)}>
|
||||
完成
|
||||
</Button>,
|
||||
];
|
||||
}
|
||||
return [
|
||||
<Button key="cancel" onClick={() => handleUpdateModalVisible()}>
|
||||
取消
|
||||
</Button>,
|
||||
<Button key="forward" type="primary" onClick={() => this.handleNext(currentStep)}>
|
||||
下一步
|
||||
</Button>,
|
||||
];
|
||||
};
|
||||
|
||||
render() {
|
||||
const { updateModalVisible, handleUpdateModalVisible } = this.props;
|
||||
const { currentStep, formVals } = this.state;
|
||||
|
||||
return (
|
||||
<Modal
|
||||
width={640}
|
||||
bodyStyle={{ padding: '32px 40px 48px' }}
|
||||
destroyOnClose
|
||||
title="模板配置"
|
||||
visible={updateModalVisible}
|
||||
footer={this.renderFooter(currentStep)}
|
||||
onCancel={() => handleUpdateModalVisible()}
|
||||
>
|
||||
<Steps style={{ marginBottom: 28 }} size="small" current={currentStep}>
|
||||
<Step title="基本信息" />
|
||||
<Step title="模板规则属性" />
|
||||
<Step title="设定调度周期" />
|
||||
</Steps>
|
||||
{this.renderContent(currentStep, formVals)}
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/* eslint react/no-multi-comp:0 */
|
||||
@connect(({ rule, loading }) => ({
|
||||
rule,
|
||||
loading: loading.models.rule,
|
||||
}))
|
||||
@Form.create()
|
||||
class History extends PureComponent {
|
||||
state = { visible: false, done: false };
|
||||
state = {
|
||||
modalVisible: false,
|
||||
updateModalVisible: false,
|
||||
expandForm: false,
|
||||
selectedRows: [],
|
||||
formValues: {},
|
||||
stepFormValues: {},
|
||||
};
|
||||
|
||||
formLayout = {
|
||||
labelCol: { span: 7 },
|
||||
wrapperCol: { span: 13 },
|
||||
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 <Badge status={statusMap[val]} text={status[val]} />;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '最后更新时间',
|
||||
dataIndex: 'updatedAt',
|
||||
sorter: true,
|
||||
render: val => <span>{moment(val).format('YYYY-MM-DD HH:mm:ss')}</span>,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
render: (text, record) => (
|
||||
<Fragment>
|
||||
<a onClick={() => this.handleUpdateModalVisible(true, record)}>配置模板</a>
|
||||
<Divider type="vertical" />
|
||||
<a href="">订阅警报</a>
|
||||
</Fragment>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
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,
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
const { dispatch } = this.props;
|
||||
dispatch({
|
||||
type: 'list/fetch',
|
||||
payload: {
|
||||
count: 5,
|
||||
},
|
||||
});
|
||||
if (sorter.field) {
|
||||
params.sorter = `${sorter.field}_${sorter.order}`;
|
||||
}
|
||||
|
||||
showModal = () => {
|
||||
this.setState({
|
||||
visible: true,
|
||||
current: undefined,
|
||||
});
|
||||
};
|
||||
dispatch({
|
||||
type: 'rule/fetch',
|
||||
payload: params,
|
||||
});
|
||||
};
|
||||
|
||||
showEditModal = item => {
|
||||
this.setState({
|
||||
visible: true,
|
||||
current: item,
|
||||
});
|
||||
};
|
||||
handleFormReset = () => {
|
||||
const { form, dispatch } = this.props;
|
||||
form.resetFields();
|
||||
this.setState({
|
||||
formValues: {},
|
||||
});
|
||||
dispatch({
|
||||
type: 'rule/fetch',
|
||||
payload: {},
|
||||
});
|
||||
};
|
||||
|
||||
handleDone = () => {
|
||||
setTimeout(() => this.addBtn.blur(), 0);
|
||||
this.setState({
|
||||
done: false,
|
||||
visible: false,
|
||||
});
|
||||
};
|
||||
toggleForm = () => {
|
||||
const { expandForm } = this.state;
|
||||
this.setState({
|
||||
expandForm: !expandForm,
|
||||
});
|
||||
};
|
||||
|
||||
handleCancel = () => {
|
||||
setTimeout(() => this.addBtn.blur(), 0);
|
||||
this.setState({
|
||||
visible: false,
|
||||
});
|
||||
};
|
||||
handleMenuClick = e => {
|
||||
const { dispatch } = this.props;
|
||||
const { selectedRows } = this.state;
|
||||
|
||||
handleSubmit = e => {
|
||||
e.preventDefault();
|
||||
const { dispatch, form } = this.props;
|
||||
const { current } = this.state;
|
||||
const id = current ? current.id : '';
|
||||
|
||||
setTimeout(() => this.addBtn.blur(), 0);
|
||||
form.validateFields((err, fieldsValue) => {
|
||||
if (err) return;
|
||||
if (!selectedRows) return;
|
||||
switch (e.key) {
|
||||
case 'remove':
|
||||
dispatch({
|
||||
type: 'rule/remove',
|
||||
payload: {
|
||||
key: selectedRows.map(row => row.key),
|
||||
},
|
||||
callback: () => {
|
||||
this.setState({
|
||||
done: true,
|
||||
});
|
||||
dispatch({
|
||||
type: 'list/submit',
|
||||
payload: { id, ...fieldsValue },
|
||||
selectedRows: [],
|
||||
});
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
deleteItem = id => {
|
||||
const { dispatch } = this.props;
|
||||
dispatch({
|
||||
type: 'list/submit',
|
||||
payload: { id },
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const {
|
||||
list: { list },
|
||||
loading,
|
||||
} = this.props;
|
||||
const {
|
||||
form: { getFieldDecorator },
|
||||
} = this.props;
|
||||
const { visible, done, current = {} } = this.state;
|
||||
|
||||
const editAndDelete = (key, currentItem) => {
|
||||
if (key === 'edit') this.showEditModal(currentItem);
|
||||
else if (key === 'delete') {
|
||||
Modal.confirm({
|
||||
title: '删除模板',
|
||||
content: '确定删除该模板吗？',
|
||||
okText: '确认',
|
||||
cancelText: '取消',
|
||||
onOk: () => this.deleteItem(currentItem.id),
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const modalFooter = done
|
||||
? { footer: null, onCancel: this.handleDone }
|
||||
: { okText: '保存', onOk: this.handleSubmit, onCancel: this.handleCancel };
|
||||
|
||||
const Info = ({ title, value, bordered }) => (
|
||||
<div className={styles.headerInfo}>
|
||||
<span>{title}</span>
|
||||
<p>{value}</p>
|
||||
{bordered && <em />}
|
||||
</div>
|
||||
);
|
||||
|
||||
const extraContent = (
|
||||
<div className={styles.extraContent}>
|
||||
<Search className={styles.extraContentSearch} placeholder="请输入模板内容" onSearch={() => ({})} />
|
||||
</div>
|
||||
);
|
||||
|
||||
const paginationProps = {
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
pageSize: 5,
|
||||
total: 50,
|
||||
};
|
||||
|
||||
const ListContent = ({ data: { owner, createdAt, percent, status } }) => (
|
||||
<div className={styles.listContent}>
|
||||
<div className={styles.listContentItem}>
|
||||
<span>模板名称</span>
|
||||
<p>{owner}</p>
|
||||
</div>
|
||||
<div className={styles.listContentItem}>
|
||||
<span>创建时间</span>
|
||||
<p>{moment(createdAt).format('YYYY-MM-DD HH:mm')}</p>
|
||||
</div>
|
||||
<div className={styles.listContentItem}>
|
||||
<Progress percent={percent} status={status} strokeWidth={6} style={{ width: 180 }} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const MoreBtn = props => (
|
||||
<Dropdown
|
||||
overlay={
|
||||
<Menu onClick={({ key }) => editAndDelete(key, props.current)}>
|
||||
<Menu.Item key="edit">编辑</Menu.Item>
|
||||
<Menu.Item key="delete">删除</Menu.Item>
|
||||
</Menu>
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
>
|
||||
<a>
|
||||
更多 <Icon type="down" />
|
||||
};
|
||||
|
||||
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 (
|
||||
<Form onSubmit={this.handleSearch} layout="inline">
|
||||
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
|
||||
<Col md={8} sm={24}>
|
||||
<FormItem label="模板名称">
|
||||
{getFieldDecorator('name')(<Input placeholder="请输入" />)}
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col md={8} sm={24}>
|
||||
<span className={styles.submitButtons}>
|
||||
<Button type="primary" htmlType="submit">
|
||||
查询
|
||||
</Button>
|
||||
<Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
|
||||
重置
|
||||
</Button>
|
||||
<a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
|
||||
展开 <Icon type="down" />
|
||||
</a>
|
||||
</span>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
renderAdvancedForm() {
|
||||
const {
|
||||
form: { getFieldDecorator },
|
||||
} = this.props;
|
||||
return (
|
||||
<Form onSubmit={this.handleSearch} layout="inline">
|
||||
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
|
||||
<Col md={8} sm={24}>
|
||||
<FormItem label="模板名称">
|
||||
{getFieldDecorator('name')(<Input placeholder="请输入" />)}
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col md={8} sm={24}>
|
||||
<FormItem label="状态">
|
||||
{getFieldDecorator('number')(<InputNumber style={{ width: '100%' }} />)}
|
||||
</FormItem>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
|
||||
<Col md={8} sm={24}>
|
||||
<FormItem label="更新日期">
|
||||
{getFieldDecorator('date')(
|
||||
<DatePicker style={{ width: '100%' }} placeholder="请输入更新日期" />
|
||||
)}
|
||||
</FormItem>
|
||||
</Col>
|
||||
</Row>
|
||||
<div style={{ overflow: 'hidden' }}>
|
||||
<div style={{ float: 'right', marginBottom: 24 }}>
|
||||
<Button type="primary" htmlType="submit">
|
||||
查询
|
||||
</Button>
|
||||
<Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
|
||||
重置
|
||||
</Button>
|
||||
<a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
|
||||
收起 <Icon type="up" />
|
||||
</a>
|
||||
</Dropdown>
|
||||
);
|
||||
|
||||
const getModalContent = () => {
|
||||
if (done) {
|
||||
return (
|
||||
<Result
|
||||
type="success"
|
||||
title="操作成功"
|
||||
description="一系列的信息描述，很短同样也可以带标点。"
|
||||
actions={
|
||||
<Button type="primary" onClick={this.handleDone}>
|
||||
知道了
|
||||
</Button>
|
||||
}
|
||||
className={styles.formResult}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Form onSubmit={this.handleSubmit}>
|
||||
<FormItem label="模板名称" {...this.formLayout}>
|
||||
{getFieldDecorator('title', {
|
||||
rules: [{ required: true, message: '请输入模板名称' }],
|
||||
initialValue: current.title,
|
||||
})(<Input placeholder="请输入" />)}
|
||||
</FormItem>
|
||||
<FormItem {...this.formLayout} label="模板内容">
|
||||
{getFieldDecorator('subDescription', {
|
||||
rules: [{ message: '请输入模板内容', min: 5 }],
|
||||
initialValue: current.subDescription,
|
||||
})(<TextArea rows={4} placeholder="请输入模内容" />)}
|
||||
</FormItem>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
return (
|
||||
<div className={styles.standardList}>
|
||||
<Card
|
||||
className={styles.listCard}
|
||||
bordered={false}
|
||||
title="搜索模板"
|
||||
style={{ marginTop: 24 }}
|
||||
bodyStyle={{ padding: '0 32px 40px 32px' }}
|
||||
extra={extraContent}
|
||||
>
|
||||
<Button
|
||||
type="dashed"
|
||||
style={{ width: '100%', marginBottom: 8 }}
|
||||
icon="plus"
|
||||
onClick={this.showModal}
|
||||
ref={component => {
|
||||
/* eslint-disable */
|
||||
this.addBtn = findDOMNode(component);
|
||||
/* eslint-enable */
|
||||
}}
|
||||
>
|
||||
添加
|
||||
</Button>
|
||||
<List
|
||||
size="large"
|
||||
rowKey="id"
|
||||
loading={loading}
|
||||
pagination={paginationProps}
|
||||
dataSource={list}
|
||||
renderItem={item => (
|
||||
<List.Item
|
||||
actions={[
|
||||
<a
|
||||
onClick={e => {
|
||||
e.preventDefault();
|
||||
this.showEditModal(item);
|
||||
}}
|
||||
>
|
||||
编辑
|
||||
</a>,
|
||||
<MoreBtn current={item} />,
|
||||
]}
|
||||
>
|
||||
<List.Item.Meta
|
||||
avatar={<Avatar src={item.logo} shape="square" size="large" />}
|
||||
title={<a href={item.href}>{item.title}</a>}
|
||||
description={item.subDescription}
|
||||
/>
|
||||
<ListContent data={item} />
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
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 = (
|
||||
<Menu onClick={this.handleMenuClick} selectedKeys={[]}>
|
||||
<Menu.Item key="remove">删除</Menu.Item>
|
||||
<Menu.Item key="approval">批量审批</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
|
||||
const parentMethods = {
|
||||
handleAdd: this.handleAdd,
|
||||
handleModalVisible: this.handleModalVisible,
|
||||
};
|
||||
const updateMethods = {
|
||||
handleUpdateModalVisible: this.handleUpdateModalVisible,
|
||||
handleUpdate: this.handleUpdate,
|
||||
};
|
||||
return (
|
||||
<Fragment>
|
||||
<Card bordered={false}>
|
||||
<div className={styles.tableList}>
|
||||
<div className={styles.tableListForm}>{this.renderForm()}</div>
|
||||
<div className={styles.tableListOperator}>
|
||||
{selectedRows.length > 0 && (
|
||||
<span>
|
||||
<Button>批量操作</Button>
|
||||
<Dropdown overlay={menu}>
|
||||
<Button>
|
||||
更多操作 <Icon type="down" />
|
||||
</Button>
|
||||
</Dropdown>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<StandardTable
|
||||
selectedRows={selectedRows}
|
||||
loading={loading}
|
||||
data={data}
|
||||
columns={this.columns}
|
||||
onSelectRow={this.handleSelectRows}
|
||||
onChange={this.handleStandardTableChange}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
<CreateForm {...parentMethods} modalVisible={modalVisible} />
|
||||
{stepFormValues && Object.keys(stepFormValues).length ? (
|
||||
<UpdateForm
|
||||
{...updateMethods}
|
||||
updateModalVisible={updateModalVisible}
|
||||
values={stepFormValues}
|
||||
/>
|
||||
) : null}
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default History;
|
||||
|
|
|
|||
|
|
@ -1,195 +1,49 @@
|
|||
@import '~antd/lib/style/themes/default.less';
|
||||
@import '~@/utils/utils.less';
|
||||
|
||||
.standardList {
|
||||
.tableList {
|
||||
.tableListOperator {
|
||||
margin-bottom: 16px;
|
||||
button {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tableListForm {
|
||||
:global {
|
||||
.ant-card-head {
|
||||
border-bottom: none;
|
||||
}
|
||||
.ant-card-head-title {
|
||||
line-height: 32px;
|
||||
padding: 24px 0;
|
||||
}
|
||||
.ant-card-extra {
|
||||
padding: 24px 0;
|
||||
}
|
||||
.ant-list-pagination {
|
||||
text-align: right;
|
||||
margin-top: 24px;
|
||||
}
|
||||
.ant-avatar-lg {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
}
|
||||
}
|
||||
.headerInfo {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
& > span {
|
||||
color: @text-color-secondary;
|
||||
display: inline-block;
|
||||
font-size: @font-size-base;
|
||||
line-height: 22px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
& > p {
|
||||
color: @heading-color;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
margin: 0;
|
||||
}
|
||||
& > em {
|
||||
background-color: @border-color-split;
|
||||
position: absolute;
|
||||
height: 56px;
|
||||
width: 1px;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
.listContent {
|
||||
font-size: 0;
|
||||
.listContentItem {
|
||||
color: @text-color-secondary;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
font-size: @font-size-base;
|
||||
margin-left: 40px;
|
||||
> span {
|
||||
line-height: 20px;
|
||||
.ant-form-item {
|
||||
margin-bottom: 24px;
|
||||
margin-right: 0;
|
||||
display: flex;
|
||||
> .ant-form-item-label {
|
||||
width: auto;
|
||||
line-height: 32px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
> p {
|
||||
margin-top: 4px;
|
||||
margin-bottom: 0;
|
||||
line-height: 22px;
|
||||
.ant-form-item-control {
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
.ant-form-item-control-wrapper {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.extraContentSearch {
|
||||
margin-left: 16px;
|
||||
width: 272px;
|
||||
.submitButtons {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @screen-xs) {
|
||||
.standardList {
|
||||
:global {
|
||||
.ant-list-item-content {
|
||||
display: block;
|
||||
flex: none;
|
||||
width: 100%;
|
||||
}
|
||||
.ant-list-item-action {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
.listContent {
|
||||
margin-left: 0;
|
||||
& > div {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
.listCard {
|
||||
:global {
|
||||
.ant-card-head-title {
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @screen-sm) {
|
||||
.standardList {
|
||||
.extraContentSearch {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.headerInfo {
|
||||
margin-bottom: 16px;
|
||||
& > em {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: @screen-lg) {
|
||||
.tableListForm :global(.ant-form-item) {
|
||||
margin-right: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @screen-md) {
|
||||
.standardList {
|
||||
.listContent {
|
||||
& > div {
|
||||
display: block;
|
||||
}
|
||||
& > div:last-child {
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.listCard {
|
||||
:global {
|
||||
.ant-radio-group {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @screen-lg) and (min-width: @screen-md) {
|
||||
.standardList {
|
||||
.listContent {
|
||||
& > div {
|
||||
display: block;
|
||||
}
|
||||
& > div:last-child {
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @screen-xl) {
|
||||
.standardList {
|
||||
.listContent {
|
||||
& > div {
|
||||
margin-left: 24px;
|
||||
}
|
||||
& > div:last-child {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1400px) {
|
||||
.standardList {
|
||||
.listContent {
|
||||
text-align: right;
|
||||
& > div:last-child {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.standardListForm {
|
||||
:global {
|
||||
.ant-form-item {
|
||||
margin-bottom: 12px;
|
||||
&:last-child {
|
||||
padding-top: 4px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.formResult {
|
||||
width: 100%;
|
||||
[class^='title'] {
|
||||
margin-bottom: 8px;
|
||||
.tableListForm :global(.ant-form-item) {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,284 +1,627 @@
|
|||
import React, { PureComponent } from 'react';
|
||||
import { findDOMNode } from 'react-dom';
|
||||
import moment from 'moment';
|
||||
import React, { PureComponent, Fragment } from 'react';
|
||||
import { connect } from 'dva';
|
||||
import moment from 'moment';
|
||||
import {
|
||||
List,
|
||||
Card,
|
||||
Row,
|
||||
Col,
|
||||
Radio,
|
||||
Input,
|
||||
Progress,
|
||||
Button,
|
||||
Icon,
|
||||
Dropdown,
|
||||
Menu,
|
||||
Avatar,
|
||||
Modal,
|
||||
Form,
|
||||
DatePicker,
|
||||
Select,
|
||||
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 Result from '@/components/Result';
|
||||
|
||||
import styles from './Param.less';
|
||||
|
||||
const FormItem = Form.Item;
|
||||
const RadioButton = Radio.Button;
|
||||
const { Step } = Steps;
|
||||
const { TextArea } = Input;
|
||||
const { Option } = Select;
|
||||
const RadioGroup = Radio.Group;
|
||||
const SelectOption = Select.Option;
|
||||
const { Search, TextArea } = Input;
|
||||
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 (
|
||||
<Modal
|
||||
destroyOnClose
|
||||
title="新建规则"
|
||||
visible={modalVisible}
|
||||
onOk={okHandle}
|
||||
onCancel={() => handleModalVisible()}
|
||||
>
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="描述">
|
||||
{form.getFieldDecorator('desc', {
|
||||
rules: [{ required: true, message: '请输入至少五个字符的规则描述！', min: 5 }],
|
||||
})(<Input placeholder="请输入" />)}
|
||||
</FormItem>
|
||||
</Modal>
|
||||
);
|
||||
});
|
||||
|
||||
@connect(({ list, loading }) => ({
|
||||
list,
|
||||
loading: loading.models.list,
|
||||
@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;
|
||||
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 [
|
||||
<FormItem key="target" {...this.formLayout} label="监控对象">
|
||||
{form.getFieldDecorator('target', {
|
||||
initialValue: formVals.target,
|
||||
})(
|
||||
<Select style={{ width: '100%' }}>
|
||||
<Option value="0">表一</Option>
|
||||
<Option value="1">表二</Option>
|
||||
</Select>
|
||||
)}
|
||||
</FormItem>,
|
||||
<FormItem key="template" {...this.formLayout} label="规则模板">
|
||||
{form.getFieldDecorator('template', {
|
||||
initialValue: formVals.template,
|
||||
})(
|
||||
<Select style={{ width: '100%' }}>
|
||||
<Option value="0">规则模板一</Option>
|
||||
<Option value="1">规则模板二</Option>
|
||||
</Select>
|
||||
)}
|
||||
</FormItem>,
|
||||
<FormItem key="type" {...this.formLayout} label="规则类型">
|
||||
{form.getFieldDecorator('type', {
|
||||
initialValue: formVals.type,
|
||||
})(
|
||||
<RadioGroup>
|
||||
<Radio value="0">强</Radio>
|
||||
<Radio value="1">弱</Radio>
|
||||
</RadioGroup>
|
||||
)}
|
||||
</FormItem>,
|
||||
];
|
||||
}
|
||||
if (currentStep === 2) {
|
||||
return [
|
||||
<FormItem key="time" {...this.formLayout} label="开始时间">
|
||||
{form.getFieldDecorator('time', {
|
||||
rules: [{ required: true, message: '请选择开始时间！' }],
|
||||
})(
|
||||
<DatePicker
|
||||
style={{ width: '100%' }}
|
||||
showTime
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
placeholder="选择开始时间"
|
||||
/>
|
||||
)}
|
||||
</FormItem>,
|
||||
<FormItem key="frequency" {...this.formLayout} label="调度周期">
|
||||
{form.getFieldDecorator('frequency', {
|
||||
initialValue: formVals.frequency,
|
||||
})(
|
||||
<Select style={{ width: '100%' }}>
|
||||
<Option value="month">月</Option>
|
||||
<Option value="week">周</Option>
|
||||
</Select>
|
||||
)}
|
||||
</FormItem>,
|
||||
];
|
||||
}
|
||||
return [
|
||||
<FormItem key="name" {...this.formLayout} label="别名">
|
||||
{form.getFieldDecorator('name', {
|
||||
rules: [{ required: true, message: '请输入别名！' }],
|
||||
initialValue: formVals.name,
|
||||
})(<Input placeholder="请输入" />)}
|
||||
</FormItem>,
|
||||
<FormItem key="desc" {...this.formLayout} label="描述">
|
||||
{form.getFieldDecorator('desc', {
|
||||
rules: [{ required: true, message: '请输入至少五个字符的描述！', min: 5 }],
|
||||
initialValue: formVals.desc,
|
||||
})(<TextArea rows={4} placeholder="请输入至少五个字符" />)}
|
||||
</FormItem>,
|
||||
];
|
||||
};
|
||||
|
||||
renderFooter = currentStep => {
|
||||
const { handleUpdateModalVisible } = this.props;
|
||||
if (currentStep === 1) {
|
||||
return [
|
||||
<Button key="back" style={{ float: 'left' }} onClick={this.backward}>
|
||||
上一步
|
||||
</Button>,
|
||||
<Button key="cancel" onClick={() => handleUpdateModalVisible()}>
|
||||
取消
|
||||
</Button>,
|
||||
<Button key="forward" type="primary" onClick={() => this.handleNext(currentStep)}>
|
||||
下一步
|
||||
</Button>,
|
||||
];
|
||||
}
|
||||
if (currentStep === 2) {
|
||||
return [
|
||||
<Button key="back" style={{ float: 'left' }} onClick={this.backward}>
|
||||
上一步
|
||||
</Button>,
|
||||
<Button key="cancel" onClick={() => handleUpdateModalVisible()}>
|
||||
取消
|
||||
</Button>,
|
||||
<Button key="submit" type="primary" onClick={() => this.handleNext(currentStep)}>
|
||||
完成
|
||||
</Button>,
|
||||
];
|
||||
}
|
||||
return [
|
||||
<Button key="cancel" onClick={() => handleUpdateModalVisible()}>
|
||||
取消
|
||||
</Button>,
|
||||
<Button key="forward" type="primary" onClick={() => this.handleNext(currentStep)}>
|
||||
下一步
|
||||
</Button>,
|
||||
];
|
||||
};
|
||||
|
||||
render() {
|
||||
const { updateModalVisible, handleUpdateModalVisible } = this.props;
|
||||
const { currentStep, formVals } = this.state;
|
||||
|
||||
return (
|
||||
<Modal
|
||||
width={640}
|
||||
bodyStyle={{ padding: '32px 40px 48px' }}
|
||||
destroyOnClose
|
||||
title="参数配置"
|
||||
visible={updateModalVisible}
|
||||
footer={this.renderFooter(currentStep)}
|
||||
onCancel={() => handleUpdateModalVisible()}
|
||||
>
|
||||
<Steps style={{ marginBottom: 28 }} size="small" current={currentStep}>
|
||||
<Step title="基本信息" />
|
||||
<Step title="参数规则属性" />
|
||||
<Step title="设定调度周期" />
|
||||
</Steps>
|
||||
{this.renderContent(currentStep, formVals)}
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/* eslint react/no-multi-comp:0 */
|
||||
@connect(({ rule, loading }) => ({
|
||||
rule,
|
||||
loading: loading.models.rule,
|
||||
}))
|
||||
@Form.create()
|
||||
class Param extends PureComponent {
|
||||
state = { visible: false, done: false };
|
||||
state = {
|
||||
modalVisible: false,
|
||||
updateModalVisible: false,
|
||||
expandForm: false,
|
||||
selectedRows: [],
|
||||
formValues: {},
|
||||
stepFormValues: {},
|
||||
};
|
||||
|
||||
formLayout = {
|
||||
labelCol: { span: 7 },
|
||||
wrapperCol: { span: 13 },
|
||||
columns = [
|
||||
{
|
||||
title: '参数名称',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
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 <Badge status={statusMap[val]} text={status[val]} />;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '最后更新时间',
|
||||
dataIndex: 'updatedAt',
|
||||
sorter: true,
|
||||
render: val => <span>{moment(val).format('YYYY-MM-DD HH:mm:ss')}</span>,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
render: (text, record) => (
|
||||
<Fragment>
|
||||
<a onClick={() => this.handleUpdateModalVisible(true, record)}>配置参数</a>
|
||||
<Divider type="vertical" />
|
||||
<a href="">订阅警报</a>
|
||||
</Fragment>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
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,
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
const { dispatch } = this.props;
|
||||
dispatch({
|
||||
type: 'list/fetch',
|
||||
payload: {
|
||||
count: 5,
|
||||
},
|
||||
});
|
||||
if (sorter.field) {
|
||||
params.sorter = `${sorter.field}_${sorter.order}`;
|
||||
}
|
||||
|
||||
showModal = () => {
|
||||
this.setState({
|
||||
visible: true,
|
||||
current: undefined,
|
||||
});
|
||||
};
|
||||
dispatch({
|
||||
type: 'rule/fetch',
|
||||
payload: params,
|
||||
});
|
||||
};
|
||||
|
||||
showEditModal = item => {
|
||||
this.setState({
|
||||
visible: true,
|
||||
current: item,
|
||||
});
|
||||
};
|
||||
handleFormReset = () => {
|
||||
const { form, dispatch } = this.props;
|
||||
form.resetFields();
|
||||
this.setState({
|
||||
formValues: {},
|
||||
});
|
||||
dispatch({
|
||||
type: 'rule/fetch',
|
||||
payload: {},
|
||||
});
|
||||
};
|
||||
|
||||
handleDone = () => {
|
||||
setTimeout(() => this.addBtn.blur(), 0);
|
||||
this.setState({
|
||||
done: false,
|
||||
visible: false,
|
||||
});
|
||||
};
|
||||
toggleForm = () => {
|
||||
const { expandForm } = this.state;
|
||||
this.setState({
|
||||
expandForm: !expandForm,
|
||||
});
|
||||
};
|
||||
|
||||
handleCancel = () => {
|
||||
setTimeout(() => this.addBtn.blur(), 0);
|
||||
this.setState({
|
||||
visible: false,
|
||||
});
|
||||
};
|
||||
handleMenuClick = e => {
|
||||
const { dispatch } = this.props;
|
||||
const { selectedRows } = this.state;
|
||||
|
||||
handleSubmit = e => {
|
||||
e.preventDefault();
|
||||
const { dispatch, form } = this.props;
|
||||
const { current } = this.state;
|
||||
const id = current ? current.id : '';
|
||||
|
||||
setTimeout(() => this.addBtn.blur(), 0);
|
||||
form.validateFields((err, fieldsValue) => {
|
||||
if (err) return;
|
||||
if (!selectedRows) return;
|
||||
switch (e.key) {
|
||||
case 'remove':
|
||||
dispatch({
|
||||
type: 'rule/remove',
|
||||
payload: {
|
||||
key: selectedRows.map(row => row.key),
|
||||
},
|
||||
callback: () => {
|
||||
this.setState({
|
||||
done: true,
|
||||
});
|
||||
dispatch({
|
||||
type: 'list/submit',
|
||||
payload: { id, ...fieldsValue },
|
||||
selectedRows: [],
|
||||
});
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
deleteItem = id => {
|
||||
const { dispatch } = this.props;
|
||||
dispatch({
|
||||
type: 'list/submit',
|
||||
payload: { id },
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const {
|
||||
list: { list },
|
||||
loading,
|
||||
} = this.props;
|
||||
const {
|
||||
form: { getFieldDecorator },
|
||||
} = this.props;
|
||||
const { visible, done, current = {} } = this.state;
|
||||
|
||||
const editAndDelete = (key, currentItem) => {
|
||||
if (key === 'edit') this.showEditModal(currentItem);
|
||||
else if (key === 'delete') {
|
||||
Modal.confirm({
|
||||
title: '删除模板',
|
||||
content: '确定删除该模板吗？',
|
||||
okText: '确认',
|
||||
cancelText: '取消',
|
||||
onOk: () => this.deleteItem(currentItem.id),
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const modalFooter = done
|
||||
? { footer: null, onCancel: this.handleDone }
|
||||
: { okText: '保存', onOk: this.handleSubmit, onCancel: this.handleCancel };
|
||||
|
||||
const Info = ({ title, value, bordered }) => (
|
||||
<div className={styles.headerInfo}>
|
||||
<span>{title}</span>
|
||||
<p>{value}</p>
|
||||
{bordered && <em />}
|
||||
</div>
|
||||
);
|
||||
|
||||
const extraContent = (
|
||||
<div className={styles.extraContent}>
|
||||
<Search className={styles.extraContentSearch} placeholder="请输入模板内容" onSearch={() => ({})} />
|
||||
</div>
|
||||
);
|
||||
|
||||
const paginationProps = {
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
pageSize: 5,
|
||||
total: 50,
|
||||
};
|
||||
|
||||
const ListContent = ({ data: { owner, createdAt, percent, status } }) => (
|
||||
<div className={styles.listContent}>
|
||||
<div className={styles.listContentItem}>
|
||||
<span>模板名称</span>
|
||||
<p>{owner}</p>
|
||||
</div>
|
||||
<div className={styles.listContentItem}>
|
||||
<span>创建时间</span>
|
||||
<p>{moment(createdAt).format('YYYY-MM-DD HH:mm')}</p>
|
||||
</div>
|
||||
<div className={styles.listContentItem}>
|
||||
<Progress percent={percent} status={status} strokeWidth={6} style={{ width: 180 }} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const MoreBtn = props => (
|
||||
<Dropdown
|
||||
overlay={
|
||||
<Menu onClick={({ key }) => editAndDelete(key, props.current)}>
|
||||
<Menu.Item key="edit">编辑</Menu.Item>
|
||||
<Menu.Item key="delete">删除</Menu.Item>
|
||||
</Menu>
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
>
|
||||
<a>
|
||||
更多 <Icon type="down" />
|
||||
};
|
||||
|
||||
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 (
|
||||
<Form onSubmit={this.handleSearch} layout="inline">
|
||||
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
|
||||
<Col md={8} sm={24}>
|
||||
<FormItem label="参数名称">
|
||||
{getFieldDecorator('name')(<Input placeholder="请输入" />)}
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col md={8} sm={24}>
|
||||
<span className={styles.submitButtons}>
|
||||
<Button type="primary" htmlType="submit">
|
||||
查询
|
||||
</Button>
|
||||
<Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
|
||||
重置
|
||||
</Button>
|
||||
<a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
|
||||
展开 <Icon type="down" />
|
||||
</a>
|
||||
</span>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
renderAdvancedForm() {
|
||||
const {
|
||||
form: { getFieldDecorator },
|
||||
} = this.props;
|
||||
return (
|
||||
<Form onSubmit={this.handleSearch} layout="inline">
|
||||
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
|
||||
<Col md={8} sm={24}>
|
||||
<FormItem label="参数名称">
|
||||
{getFieldDecorator('name')(<Input placeholder="请输入" />)}
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col md={8} sm={24}>
|
||||
<FormItem label="索引状态">
|
||||
{getFieldDecorator('number')(<InputNumber style={{ width: '100%' }} />)}
|
||||
</FormItem>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
|
||||
<Col md={8} sm={24}>
|
||||
<FormItem label="更新日期">
|
||||
{getFieldDecorator('date')(
|
||||
<DatePicker style={{ width: '100%' }} placeholder="请输入更新日期" />
|
||||
)}
|
||||
</FormItem>
|
||||
</Col>
|
||||
</Row>
|
||||
<div style={{ overflow: 'hidden' }}>
|
||||
<div style={{ float: 'right', marginBottom: 24 }}>
|
||||
<Button type="primary" htmlType="submit">
|
||||
查询
|
||||
</Button>
|
||||
<Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
|
||||
重置
|
||||
</Button>
|
||||
<a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
|
||||
收起 <Icon type="up" />
|
||||
</a>
|
||||
</Dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
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 = (
|
||||
<Menu onClick={this.handleMenuClick} selectedKeys={[]}>
|
||||
<Menu.Item key="remove">删除</Menu.Item>
|
||||
<Menu.Item key="approval">批量审批</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
|
||||
const getModalContent = () => {
|
||||
if (done) {
|
||||
return (
|
||||
<Result
|
||||
type="success"
|
||||
title="操作成功"
|
||||
description="一系列的信息描述，很短同样也可以带标点。"
|
||||
actions={
|
||||
<Button type="primary" onClick={this.handleDone}>
|
||||
知道了
|
||||
</Button>
|
||||
}
|
||||
className={styles.formResult}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Form onSubmit={this.handleSubmit}>
|
||||
<FormItem label="模板名称" {...this.formLayout}>
|
||||
{getFieldDecorator('title', {
|
||||
rules: [{ required: true, message: '请输入模板名称' }],
|
||||
initialValue: current.title,
|
||||
})(<Input placeholder="请输入" />)}
|
||||
</FormItem>
|
||||
<FormItem {...this.formLayout} label="模板内容">
|
||||
{getFieldDecorator('subDescription', {
|
||||
rules: [{ message: '请输入模板内容', min: 5 }],
|
||||
initialValue: current.subDescription,
|
||||
})(<TextArea rows={4} placeholder="请输入模内容" />)}
|
||||
</FormItem>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
return (
|
||||
<div className={styles.standardList}>
|
||||
<Card
|
||||
className={styles.listCard}
|
||||
bordered={false}
|
||||
title="搜索模板"
|
||||
style={{ marginTop: 24 }}
|
||||
bodyStyle={{ padding: '0 32px 40px 32px' }}
|
||||
extra={extraContent}
|
||||
>
|
||||
<Button
|
||||
type="dashed"
|
||||
style={{ width: '100%', marginBottom: 8 }}
|
||||
icon="plus"
|
||||
onClick={this.showModal}
|
||||
ref={component => {
|
||||
/* eslint-disable */
|
||||
this.addBtn = findDOMNode(component);
|
||||
/* eslint-enable */
|
||||
}}
|
||||
>
|
||||
添加
|
||||
</Button>
|
||||
<List
|
||||
size="large"
|
||||
rowKey="id"
|
||||
loading={loading}
|
||||
pagination={paginationProps}
|
||||
dataSource={list}
|
||||
renderItem={item => (
|
||||
<List.Item
|
||||
actions={[
|
||||
<a
|
||||
onClick={e => {
|
||||
e.preventDefault();
|
||||
this.showEditModal(item);
|
||||
}}
|
||||
>
|
||||
编辑
|
||||
</a>,
|
||||
<MoreBtn current={item} />,
|
||||
]}
|
||||
>
|
||||
<List.Item.Meta
|
||||
avatar={<Avatar src={item.logo} shape="square" size="large" />}
|
||||
title={<a href={item.href}>{item.title}</a>}
|
||||
description={item.subDescription}
|
||||
/>
|
||||
<ListContent data={item} />
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
const parentMethods = {
|
||||
handleAdd: this.handleAdd,
|
||||
handleModalVisible: this.handleModalVisible,
|
||||
};
|
||||
const updateMethods = {
|
||||
handleUpdateModalVisible: this.handleUpdateModalVisible,
|
||||
handleUpdate: this.handleUpdate,
|
||||
};
|
||||
return (
|
||||
<Fragment>
|
||||
<Card bordered={false}>
|
||||
<div className={styles.tableList}>
|
||||
<div className={styles.tableListForm}>{this.renderForm()}</div>
|
||||
<div className={styles.tableListOperator}>
|
||||
{selectedRows.length > 0 && (
|
||||
<span>
|
||||
<Button>批量操作</Button>
|
||||
<Dropdown overlay={menu}>
|
||||
<Button>
|
||||
更多操作 <Icon type="down" />
|
||||
</Button>
|
||||
</Dropdown>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<StandardTable
|
||||
selectedRows={selectedRows}
|
||||
loading={loading}
|
||||
data={data}
|
||||
columns={this.columns}
|
||||
onSelectRow={this.handleSelectRows}
|
||||
onChange={this.handleStandardTableChange}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
<CreateForm {...parentMethods} modalVisible={modalVisible} />
|
||||
{stepFormValues && Object.keys(stepFormValues).length ? (
|
||||
<UpdateForm
|
||||
{...updateMethods}
|
||||
updateModalVisible={updateModalVisible}
|
||||
values={stepFormValues}
|
||||
/>
|
||||
) : null}
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default Param;
|
||||
|
|
|
|||
|
|
@ -1,195 +1,49 @@
|
|||
@import '~antd/lib/style/themes/default.less';
|
||||
@import '~@/utils/utils.less';
|
||||
|
||||
.standardList {
|
||||
.tableList {
|
||||
.tableListOperator {
|
||||
margin-bottom: 16px;
|
||||
button {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tableListForm {
|
||||
:global {
|
||||
.ant-card-head {
|
||||
border-bottom: none;
|
||||
}
|
||||
.ant-card-head-title {
|
||||
line-height: 32px;
|
||||
padding: 24px 0;
|
||||
}
|
||||
.ant-card-extra {
|
||||
padding: 24px 0;
|
||||
}
|
||||
.ant-list-pagination {
|
||||
text-align: right;
|
||||
margin-top: 24px;
|
||||
}
|
||||
.ant-avatar-lg {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
}
|
||||
}
|
||||
.headerInfo {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
& > span {
|
||||
color: @text-color-secondary;
|
||||
display: inline-block;
|
||||
font-size: @font-size-base;
|
||||
line-height: 22px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
& > p {
|
||||
color: @heading-color;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
margin: 0;
|
||||
}
|
||||
& > em {
|
||||
background-color: @border-color-split;
|
||||
position: absolute;
|
||||
height: 56px;
|
||||
width: 1px;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
.listContent {
|
||||
font-size: 0;
|
||||
.listContentItem {
|
||||
color: @text-color-secondary;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
font-size: @font-size-base;
|
||||
margin-left: 40px;
|
||||
> span {
|
||||
line-height: 20px;
|
||||
.ant-form-item {
|
||||
margin-bottom: 24px;
|
||||
margin-right: 0;
|
||||
display: flex;
|
||||
> .ant-form-item-label {
|
||||
width: auto;
|
||||
line-height: 32px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
> p {
|
||||
margin-top: 4px;
|
||||
margin-bottom: 0;
|
||||
line-height: 22px;
|
||||
.ant-form-item-control {
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
.ant-form-item-control-wrapper {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.extraContentSearch {
|
||||
margin-left: 16px;
|
||||
width: 272px;
|
||||
.submitButtons {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @screen-xs) {
|
||||
.standardList {
|
||||
:global {
|
||||
.ant-list-item-content {
|
||||
display: block;
|
||||
flex: none;
|
||||
width: 100%;
|
||||
}
|
||||
.ant-list-item-action {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
.listContent {
|
||||
margin-left: 0;
|
||||
& > div {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
.listCard {
|
||||
:global {
|
||||
.ant-card-head-title {
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @screen-sm) {
|
||||
.standardList {
|
||||
.extraContentSearch {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.headerInfo {
|
||||
margin-bottom: 16px;
|
||||
& > em {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: @screen-lg) {
|
||||
.tableListForm :global(.ant-form-item) {
|
||||
margin-right: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @screen-md) {
|
||||
.standardList {
|
||||
.listContent {
|
||||
& > div {
|
||||
display: block;
|
||||
}
|
||||
& > div:last-child {
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.listCard {
|
||||
:global {
|
||||
.ant-radio-group {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @screen-lg) and (min-width: @screen-md) {
|
||||
.standardList {
|
||||
.listContent {
|
||||
& > div {
|
||||
display: block;
|
||||
}
|
||||
& > div:last-child {
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @screen-xl) {
|
||||
.standardList {
|
||||
.listContent {
|
||||
& > div {
|
||||
margin-left: 24px;
|
||||
}
|
||||
& > div:last-child {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1400px) {
|
||||
.standardList {
|
||||
.listContent {
|
||||
text-align: right;
|
||||
& > div:last-child {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.standardListForm {
|
||||
:global {
|
||||
.ant-form-item {
|
||||
margin-bottom: 12px;
|
||||
&:last-child {
|
||||
padding-top: 4px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.formResult {
|
||||
width: 100%;
|
||||
[class^='title'] {
|
||||
margin-bottom: 8px;
|
||||
.tableListForm :global(.ant-form-item) {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,298 +1,439 @@
|
|||
import React, { PureComponent } from 'react';
|
||||
import { findDOMNode } from 'react-dom';
|
||||
import moment from 'moment';
|
||||
import React, { PureComponent, Fragment } from 'react';
|
||||
import { connect } from 'dva';
|
||||
import {
|
||||
List,
|
||||
Card,
|
||||
Row,
|
||||
Col,
|
||||
Radio,
|
||||
Input,
|
||||
Progress,
|
||||
Button,
|
||||
Icon,
|
||||
Dropdown,
|
||||
Menu,
|
||||
Avatar,
|
||||
Modal,
|
||||
Card,
|
||||
Form,
|
||||
Input,
|
||||
Button,
|
||||
Modal,
|
||||
message,
|
||||
Divider,
|
||||
Icon,
|
||||
DatePicker,
|
||||
TimePicker,
|
||||
Select,
|
||||
Popover,
|
||||
} from 'antd';
|
||||
|
||||
import StandardTable from '@/components/StandardTable';
|
||||
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
|
||||
import Result from '@/components/Result';
|
||||
|
||||
import styles from './Summary.less';
|
||||
|
||||
const FormItem = Form.Item;
|
||||
const RadioButton = Radio.Button;
|
||||
const RadioGroup = Radio.Group;
|
||||
const SelectOption = Select.Option;
|
||||
const { Search, TextArea } = Input;
|
||||
const { TextArea } = Input;
|
||||
const fieldLabels = {
|
||||
keyword_type: '关键词分类'
|
||||
|
||||
@connect(({ list, loading }) => ({
|
||||
list,
|
||||
loading: loading.models.list,
|
||||
};
|
||||
|
||||
|
||||
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 (
|
||||
<Modal
|
||||
destroyOnClose
|
||||
title="新建模板"
|
||||
visible={modalVisible}
|
||||
width={640}
|
||||
onOk={okHandle}
|
||||
onCancel={() => handleModalVisible()}>
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="关键词">
|
||||
{form.getFieldDecorator('name', {
|
||||
rules: [{ required: true, message: '请输入至少一个字符的名称！', min: 1 }],
|
||||
})(<Input placeholder="请输入关键词" />)}
|
||||
</FormItem>
|
||||
<Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label='关键词分类'>
|
||||
{form.getFieldDecorator('keyword_type', {
|
||||
rules: [{ required: true, message: '请选择关键词类型' }],
|
||||
})(
|
||||
<Select labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} placeholder="请选择关键词类型">
|
||||
<Option value="keyun">敏感词</Option>
|
||||
<Option value="huoyun">提示词</Option>
|
||||
<Option value="xianlu1">同义词</Option>
|
||||
<Option value="xianlu2">过滤词</Option>
|
||||
<Option value="xianlu3">停用词</Option>
|
||||
<Option value="xianlu4">保留词</Option>
|
||||
<Option value="xianlu5">纠错词</Option>
|
||||
<Option value="xianlu6">相关搜索</Option>
|
||||
<Option value="xianlu7">热点词管理</Option>
|
||||
</Select>
|
||||
)}
|
||||
</Form.Item>
|
||||
</Modal>
|
||||
);
|
||||
});
|
||||
|
||||
const Info = ({ title, value, bordered }) => (
|
||||
<div className={styles.headerInfo}>
|
||||
<span>{title}</span>
|
||||
<p>{value}</p>
|
||||
{bordered && <em />}
|
||||
</div>
|
||||
);
|
||||
|
||||
const UpdateForm = Form.create()(props => {
|
||||
const { updateModalVisible, handleUpdateModalVisible, handleUpdate,values,form } = props;
|
||||
|
||||
const okHandle = () => {
|
||||
form.validateFields((err, fieldsValue) => {
|
||||
if (err) return;
|
||||
form.resetFields();
|
||||
handleUpdate(fieldsValue);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal destroyOnClose title="新增关键词" visible={updateModalVisible} width={640} onOk={okHandle}
|
||||
onCancel={() => handleUpdateModalVisible()}>
|
||||
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="关键词">
|
||||
{form.getFieldDecorator('keyword', {
|
||||
initialValue: values.keyword,
|
||||
rules: [{ required: true, message: '请输入至少一个字符的名称！', min: 1 }],
|
||||
})(<Input placeholder="请输入关键词" />)}
|
||||
</FormItem>
|
||||
|
||||
<Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={fieldLabels.keyword_type}>
|
||||
{form.getFieldDecorator('keyword_type', {
|
||||
initialValue: values.value,
|
||||
rules: [{ required: true, message: '请选择关键词类型' }],
|
||||
})(
|
||||
<Select placeholder="请选择关键词类型">
|
||||
<Option value="keyun">敏感词</Option>
|
||||
<Option value="huoyun">提示词</Option>
|
||||
<Option value="xianlu">同义词</Option>
|
||||
<Option value="xianlu">过滤词</Option>
|
||||
<Option value="xianlu">停用词</Option>
|
||||
<Option value="xianlu">保留词</Option>
|
||||
<Option value="xianlu">纠错词</Option>
|
||||
<Option value="xianlu">相关搜索</Option>
|
||||
<Option value="xianlu">热点词管理</Option>
|
||||
</Select>
|
||||
)}
|
||||
</Form.Item>
|
||||
</Modal>
|
||||
);
|
||||
});
|
||||
|
||||
/* eslint react/no-multi-comp:0 */
|
||||
@connect(({ pipeline, loading }) => ({
|
||||
pipeline,
|
||||
loading: loading.models.pipeline,
|
||||
}))
|
||||
@Form.create()
|
||||
class Summary extends PureComponent {
|
||||
state = { visible: false, done: false };
|
||||
|
||||
formLayout = {
|
||||
labelCol: { span: 7 },
|
||||
wrapperCol: { span: 13 },
|
||||
state = {
|
||||
modalVisible: false,
|
||||
updateModalVisible: false,
|
||||
expandForm: false,
|
||||
selectedRows: [],
|
||||
formValues: {},
|
||||
updateFormValues: {},
|
||||
};
|
||||
datasource = `
|
||||
[
|
||||
{
|
||||
"keyword" : "template1",
|
||||
"type" : "2",
|
||||
"value": "keyun"
|
||||
},
|
||||
{
|
||||
"keyword" : "template2",
|
||||
"type" : "1",
|
||||
"value": "keyun"
|
||||
},{
|
||||
"keyword" : "template3",
|
||||
"type" : "3",
|
||||
"value": "keyun"
|
||||
},{
|
||||
"keyword" : "template4",
|
||||
"type" : "4",
|
||||
"value": "keyun"
|
||||
},
|
||||
{
|
||||
"keyword" : "template5",
|
||||
"type" : "5",
|
||||
"value": "keyun"
|
||||
},{
|
||||
"keyword" : "template6",
|
||||
"type" : "2",
|
||||
"value": "keyun"
|
||||
},
|
||||
{
|
||||
"keyword" : "template7",
|
||||
"type" : "1",
|
||||
"value": "keyun"
|
||||
}]`;
|
||||
|
||||
componentDidMount() {
|
||||
const { dispatch } = this.props;
|
||||
dispatch({
|
||||
type: 'list/fetch',
|
||||
payload: {
|
||||
count: 5,
|
||||
},
|
||||
});
|
||||
columns = [
|
||||
{
|
||||
title: '模板名称',
|
||||
dataIndex: 'keyword',
|
||||
},
|
||||
{
|
||||
title: '索引数',
|
||||
dataIndex: 'type',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
render: (text, record) => (
|
||||
<Fragment>
|
||||
<Divider type="vertical" />
|
||||
<a onClick={() => {
|
||||
this.state.selectedRows.push(record);
|
||||
this.handleDeleteClick();
|
||||
}}>删除</a>
|
||||
</Fragment>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
componentDidMount() {
|
||||
const { dispatch } = this.props;
|
||||
// dispatch({
|
||||
// type: 'pipeline/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}`;
|
||||
}
|
||||
|
||||
showModal = () => {
|
||||
this.setState({
|
||||
visible: true,
|
||||
current: undefined,
|
||||
});
|
||||
};
|
||||
dispatch({
|
||||
type: 'pipeline/fetch',
|
||||
payload: params,
|
||||
});
|
||||
};
|
||||
|
||||
showEditModal = item => {
|
||||
this.setState({
|
||||
visible: true,
|
||||
current: item,
|
||||
});
|
||||
};
|
||||
handleFormReset = () => {
|
||||
const { form, dispatch } = this.props;
|
||||
form.resetFields();
|
||||
this.setState({
|
||||
formValues: {},
|
||||
});
|
||||
dispatch({
|
||||
type: 'pipeline/fetch',
|
||||
payload: {},
|
||||
});
|
||||
};
|
||||
|
||||
handleDone = () => {
|
||||
setTimeout(() => this.addBtn.blur(), 0);
|
||||
this.setState({
|
||||
done: false,
|
||||
visible: false,
|
||||
});
|
||||
};
|
||||
handleDeleteClick = e => {
|
||||
const { dispatch } = this.props;
|
||||
const { selectedRows } = this.state;
|
||||
|
||||
handleCancel = () => {
|
||||
setTimeout(() => this.addBtn.blur(), 0);
|
||||
this.setState({
|
||||
visible: false,
|
||||
});
|
||||
};
|
||||
|
||||
handleSubmit = e => {
|
||||
e.preventDefault();
|
||||
const { dispatch, form } = this.props;
|
||||
const { current } = this.state;
|
||||
const id = current ? current.id : '';
|
||||
|
||||
setTimeout(() => this.addBtn.blur(), 0);
|
||||
form.validateFields((err, fieldsValue) => {
|
||||
if (err) return;
|
||||
if (!selectedRows) return;
|
||||
dispatch({
|
||||
type: 'pipeline/delete',
|
||||
payload: {
|
||||
key: selectedRows.map(row => row.name),
|
||||
},
|
||||
callback: () => {
|
||||
this.setState({
|
||||
done: true,
|
||||
selectedRows: [],
|
||||
});
|
||||
dispatch({
|
||||
type: 'list/submit',
|
||||
payload: { id, ...fieldsValue },
|
||||
});
|
||||
});
|
||||
};
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
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,
|
||||
});
|
||||
|
||||
deleteItem = id => {
|
||||
const { dispatch } = this.props;
|
||||
dispatch({
|
||||
type: 'list/submit',
|
||||
payload: { id },
|
||||
type: 'rule/fetch',
|
||||
payload: values,
|
||||
});
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const {
|
||||
list: { list },
|
||||
loading,
|
||||
} = this.props;
|
||||
const {
|
||||
form: { getFieldDecorator },
|
||||
} = this.props;
|
||||
const { visible, done, current = {} } = this.state;
|
||||
handleModalVisible = flag => {
|
||||
this.setState({
|
||||
modalVisible: !!flag,
|
||||
});
|
||||
};
|
||||
|
||||
const editAndDelete = (key, currentItem) => {
|
||||
if (key === 'edit') this.showEditModal(currentItem);
|
||||
else if (key === 'delete') {
|
||||
Modal.confirm({
|
||||
title: '删除模板',
|
||||
content: '确定删除该模板吗？',
|
||||
okText: '确认',
|
||||
cancelText: '取消',
|
||||
onOk: () => this.deleteItem(currentItem.id),
|
||||
});
|
||||
}
|
||||
};
|
||||
handleUpdateModalVisible = (flag, record) => {
|
||||
this.setState({
|
||||
updateModalVisible: !!flag,
|
||||
updateFormValues: record || {},
|
||||
});
|
||||
};
|
||||
|
||||
const modalFooter = done
|
||||
? { footer: null, onCancel: this.handleDone }
|
||||
: { okText: '保存', onOk: this.handleSubmit, onCancel: this.handleCancel };
|
||||
handleAdd = fields => {
|
||||
const { dispatch } = this.props;
|
||||
dispatch({
|
||||
type: 'pipeline/add',
|
||||
payload: {
|
||||
name: fields.name,
|
||||
desc: fields.desc,
|
||||
processors: fields.processors,
|
||||
},
|
||||
});
|
||||
|
||||
const Info = ({ title, value, bordered }) => (
|
||||
<div className={styles.headerInfo}>
|
||||
<span>{title}</span>
|
||||
<p>{value}</p>
|
||||
{bordered && <em />}
|
||||
</div>
|
||||
);
|
||||
message.success('添加成功');
|
||||
this.handleModalVisible();
|
||||
};
|
||||
|
||||
const extraContent = (
|
||||
<div className={styles.extraContent}>
|
||||
<Search className={styles.extraContentSearch} placeholder="请输入模板内容" onSearch={() => ({})} />
|
||||
</div>
|
||||
);
|
||||
handleUpdate = fields => {
|
||||
const { dispatch } = this.props;
|
||||
dispatch({
|
||||
type: 'pipeline/update',
|
||||
payload: {
|
||||
name: fields.name,
|
||||
desc: fields.desc,
|
||||
processors: fields.processors,
|
||||
},
|
||||
});
|
||||
|
||||
const paginationProps = {
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
message.success('修改成功');
|
||||
this.handleUpdateModalVisible();
|
||||
};
|
||||
|
||||
renderSimpleForm() {
|
||||
const {
|
||||
form: { getFieldDecorator },
|
||||
} = this.props;
|
||||
return (
|
||||
<Form onSubmit={this.handleSearch} layout="inline">
|
||||
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
|
||||
<Col lg={6} md={12} sm={24}>
|
||||
<Form.Item label={fieldLabels.keyword_type}>
|
||||
{getFieldDecorator('keyword_type', {
|
||||
rules: [{ required: true, message: '请选择关键词类型' }],
|
||||
})(
|
||||
<Select placeholder="请选择关键词类型">
|
||||
<Option value="keyun">敏感词</Option>
|
||||
<Option value="huoyun">提示词</Option>
|
||||
<Option value="xianlu">同义词</Option>
|
||||
<Option value="xianlu">过滤词</Option>
|
||||
<Option value="xianlu">停用词</Option>
|
||||
<Option value="xianlu">保留词</Option>
|
||||
<Option value="xianlu">纠错词</Option>
|
||||
<Option value="xianlu">相关搜索</Option>
|
||||
<Option value="xianlu">热点词管理</Option>
|
||||
</Select>
|
||||
)}
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col md={8} sm={24}>
|
||||
<FormItem label="关键词">
|
||||
{getFieldDecorator('name')(<Input placeholder="请输入关键词" />)}
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col md={8} sm={24}>
|
||||
<span className={styles.submitButtons}>
|
||||
<Button type="primary" htmlType="submit">
|
||||
查询
|
||||
</Button>
|
||||
<Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
|
||||
重置
|
||||
</Button>
|
||||
</span>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
renderForm() {
|
||||
return this.renderSimpleForm();
|
||||
}
|
||||
|
||||
render() {
|
||||
const data = {
|
||||
list: JSON.parse(this.datasource),
|
||||
pagination: {
|
||||
pageSize: 5,
|
||||
total: 50,
|
||||
};
|
||||
|
||||
const ListContent = ({ data: { owner, createdAt, percent, status } }) => (
|
||||
<div className={styles.listContent}>
|
||||
<div className={styles.listContentItem}>
|
||||
<span>模板名称</span>
|
||||
<p>{owner}</p>
|
||||
</div>
|
||||
<div className={styles.listContentItem}>
|
||||
<span>创建时间</span>
|
||||
<p>{moment(createdAt).format('YYYY-MM-DD HH:mm')}</p>
|
||||
</div>
|
||||
<div className={styles.listContentItem}>
|
||||
<Progress percent={percent} status={status} strokeWidth={6} style={{ width: 180 }} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const MoreBtn = props => (
|
||||
<Dropdown
|
||||
overlay={
|
||||
<Menu onClick={({ key }) => editAndDelete(key, props.current)}>
|
||||
<Menu.Item key="edit">编辑</Menu.Item>
|
||||
<Menu.Item key="delete">删除</Menu.Item>
|
||||
</Menu>
|
||||
}
|
||||
>
|
||||
<a>
|
||||
更多 <Icon type="down" />
|
||||
</a>
|
||||
</Dropdown>
|
||||
);
|
||||
|
||||
const getModalContent = () => {
|
||||
if (done) {
|
||||
return (
|
||||
<Result
|
||||
type="success"
|
||||
title="操作成功"
|
||||
description="一系列的信息描述，很短同样也可以带标点。"
|
||||
actions={
|
||||
<Button type="primary" onClick={this.handleDone}>
|
||||
知道了
|
||||
</Button>
|
||||
}
|
||||
className={styles.formResult}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Form onSubmit={this.handleSubmit}>
|
||||
<FormItem label="模板名称" {...this.formLayout}>
|
||||
{getFieldDecorator('title', {
|
||||
rules: [{ required: true, message: '请输入模板名称' }],
|
||||
initialValue: current.title,
|
||||
})(<Input placeholder="请输入" />)}
|
||||
</FormItem>
|
||||
<FormItem {...this.formLayout} label="模板内容">
|
||||
{getFieldDecorator('subDescription', {
|
||||
rules: [{ message: '请输入模板内容', min: 5 }],
|
||||
initialValue: current.subDescription,
|
||||
})(<TextArea rows={4} placeholder="请输入模内容" />)}
|
||||
</FormItem>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
return (
|
||||
<div className={styles.standardList}>
|
||||
<Card bordered={false}>
|
||||
<Row>
|
||||
<Col sm={8} xs={24}>
|
||||
<Info title="搜索次数" value="80000次" bordered />
|
||||
},
|
||||
};
|
||||
const { selectedRows, modalVisible, updateModalVisible, updateFormValues } = this.state;
|
||||
const parentMethods = {
|
||||
handleAdd: this.handleAdd,
|
||||
handleModalVisible: this.handleModalVisible,
|
||||
};
|
||||
const updateMethods = {
|
||||
handleUpdateModalVisible: this.handleUpdateModalVisible,
|
||||
handleUpdate: this.handleUpdate,
|
||||
};
|
||||
return (
|
||||
<Fragment>
|
||||
<Card bordered={false}>
|
||||
<Row>
|
||||
<Col sm={8} xs={24}>
|
||||
<Info title="搜索次数" value="80000次" bordered />
|
||||
</Col>
|
||||
<Col sm={8} xs={24}>
|
||||
<Info title="来源统计" value="100个" bordered />
|
||||
</Col>
|
||||
</Col >
|
||||
<Col sm={8} xs={24}>
|
||||
<Info title="新词、热词 " value="100个" />
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
|
||||
<Card
|
||||
className={styles.listCard}
|
||||
bordered={false}
|
||||
title="搜索模板"
|
||||
style={{ marginTop: 24 }}
|
||||
bodyStyle={{ padding: '0 32px 40px 32px' }}
|
||||
extra={extraContent}
|
||||
>
|
||||
<Button
|
||||
type="dashed"
|
||||
style={{ width: '100%', marginBottom: 8 }}
|
||||
icon="plus"
|
||||
onClick={this.showModal}
|
||||
ref={component => {
|
||||
/* eslint-disable */
|
||||
this.addBtn = findDOMNode(component);
|
||||
/* eslint-enable */
|
||||
}}
|
||||
>
|
||||
添加
|
||||
</Button>
|
||||
<List
|
||||
size="large"
|
||||
rowKey="id"
|
||||
loading={loading}
|
||||
pagination={paginationProps}
|
||||
dataSource={list}
|
||||
renderItem={item => (
|
||||
<List.Item
|
||||
actions={[
|
||||
<a
|
||||
onClick={e => {
|
||||
e.preventDefault();
|
||||
this.showEditModal(item);
|
||||
}}
|
||||
>
|
||||
编辑
|
||||
</a>,
|
||||
<MoreBtn current={item} />,
|
||||
]}
|
||||
>
|
||||
<List.Item.Meta
|
||||
avatar={<Avatar src={item.logo} shape="square" size="large" />}
|
||||
title={<a href={item.href}>{item.title}</a>}
|
||||
description={item.subDescription}
|
||||
/>
|
||||
<ListContent data={item} />
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
<Info title="新词、热词 " value="100个" />
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
<Card bordered={false}>
|
||||
<div className={styles.tableList}>
|
||||
<StandardTable
|
||||
selectedRows={selectedRows}
|
||||
data={data}
|
||||
columns={this.columns}
|
||||
onSelectRow={this.handleSelectRows}
|
||||
onChange={this.handleStandardTableChange}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
<CreateForm {...parentMethods} modalVisible={modalVisible} />
|
||||
{updateFormValues && Object.keys(updateFormValues).length ? (
|
||||
<UpdateForm
|
||||
{...updateMethods}
|
||||
updateModalVisible={updateModalVisible}
|
||||
values={updateFormValues}
|
||||
/>
|
||||
) : null}
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
export default Summary;
|
||||
}
|
||||
export default Summary;
|
||||
Loading…
Reference in New Issue