floraachy
/
console
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

#search manage keyword modify

This commit is contained in:
chenhua 2020-11-23 00:19:55 +08:00
parent 63a57d2315
commit 7763613216
16 changed files with 2011 additions and 2034 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

517
web/src/pages/SearchManage/alias/AliasManage.js
View File

@ -1,273 +1,104 @@
import React, { PureComponent, Fragment } from 'react'; import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva'; import { connect } from 'dva';
import moment from 'moment';
import { import {
Row, Row,
Col, Col,
Card, Card,
Form, Form,
Input, Input,
Select,
Icon,
Button, Button,
Dropdown,
Menu,
InputNumber,
DatePicker,
Modal, Modal,
message, message,
Badge,
Divider, Divider,
Steps,
Radio,
} from 'antd'; } from 'antd';
import StandardTable from '@/components/StandardTable'; import StandardTable from '@/components/StandardTable';
import PageHeaderWrapper from '@/components/PageHeaderWrapper'; import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import styles from './AliasManage.less'; import styles from '../../List/TableList.less';
const FormItem = Form.Item; const FormItem = Form.Item;
const { Step } = Steps;
const { TextArea } = Input; 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 CreateForm = Form.create()(props => {
const { modalVisible, form, handleAdd, handleModalVisible } = props; const { modalVisible, form, handleAdd, handleModalVisible } = props;
const okHandle = () => { 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;
form.validateFields((err, fieldsValue) => { form.validateFields((err, fieldsValue) => {
if (err) return; if (err) return;
const formVals = { ...oldValue, ...fieldsValue }; form.resetFields();
this.setState( handleAdd(fieldsValue);
{
formVals,
},
() => {
if (currentStep < 2) {
this.forward();
} else {
handleUpdate(formVals);
}
}
);
}); });
}; };
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 UpdateForm = Form.create()(props => {
const { currentStep } = this.state; const { updateModalVisible, handleUpdateModalVisible, handleUpdate,values,form } = props;
this.setState({
currentStep: currentStep - 1, const okHandle = () => {
form.validateFields((err, fieldsValue) => {
if (err) return;
form.resetFields();
handleUpdate(fieldsValue);
}); });
}; };
forward = () => { return (
const { currentStep } = this.state; <Modal
this.setState({ destroyOnClose
currentStep: currentStep + 1, title="索引设置"
}); visible={updateModalVisible}
}; width={640}
onOk={okHandle}
renderContent = (currentStep, formVals) => { onCancel={() => handleUpdateModalVisible()}
const { form } = this.props; >
if (currentStep === 1) { <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="索引名称">
return [ {form.getFieldDecorator('index', {
<FormItem key="target" {...this.formLayout} label="监控对象"> initialValue: values.index,
{form.getFieldDecorator('target', { rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
initialValue: formVals.target, })(<Input placeholder="请输入名称" />)}
})( </FormItem>
<Select style={{ width: '100%' }}> <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="索引设置">
<Option value="0">表一</Option> {form.getFieldDecorator('settings', {
<Option value="1">表二</Option> initialValue: values.processors,
</Select> rules: [{ required: true }],
)} })(<TextArea
</FormItem>, style={{ minHeight: 24 }}
<FormItem key="template" {...this.formLayout} label="规则模板"> placeholder="请输入"
{form.getFieldDecorator('template', { rows={9}
initialValue: formVals.template, />)}
})( </FormItem>
<Select style={{ width: '100%' }}> </Modal>
<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 */ /* eslint react/no-multi-comp:0 */
@connect(({ rule, loading }) => ({ @connect(({ pipeline, loading }) => ({
rule, pipeline,
loading: loading.models.rule, loading: loading.models.pipeline,
})) }))
@Form.create() @Form.create()
class AliasManage extends PureComponent { class AliasManage extends PureComponent {
@ -277,65 +108,42 @@ class AliasManage extends PureComponent {
expandForm: false, expandForm: false,
selectedRows: [], selectedRows: [],
formValues: {}, 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 = [ columns = [
{ {
title: '索引名称', title: '索引名称',
dataIndex: 'name', dataIndex: 'index',
}, },
{ {
title: '别名', title: '文档数',
dataIndex: 'desc', dataIndex: 'docs.count',
}, },
{ {
title: '索引调用次数', title: '主分片数',
dataIndex: 'callNo', dataIndex: 'pri'
sorter: true,
align: 'right',
render: val => `${val} 万`,
// mark to display a total number
needTotal: true,
}, },
{ {
title: '索引状态', title: '从分片数',
dataIndex: 'status', dataIndex: 'rep'
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: '最后更新时间', title: '存储大小',
dataIndex: 'updatedAt', dataIndex: 'store.size'
sorter: true,
render: val => <span>{moment(val).format('YYYY-MM-DD HH:mm:ss')}</span>,
}, },
{ {
title: '操作', title: '操作',
render: (text, record) => ( render: (text, record) => (
<Fragment> <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" /> <Divider type="vertical" />
<a href="">订阅警报</a>
</Fragment> </Fragment>
), ),
}, },
@ -343,9 +151,9 @@ class AliasManage extends PureComponent {
componentDidMount() { componentDidMount() {
const { dispatch } = this.props; const { dispatch } = this.props;
dispatch({ // dispatch({
type: 'rule/fetch', // type: 'pipeline/fetch',
}); // });
} }
handleStandardTableChange = (pagination, filtersArg, sorter) => { handleStandardTableChange = (pagination, filtersArg, sorter) => {
@ -369,7 +177,7 @@ class AliasManage extends PureComponent {
} }
dispatch({ dispatch({
type: 'rule/fetch', type: 'pipeline/fetch',
payload: params, payload: params,
}); });
}; };
@ -381,29 +189,20 @@ class AliasManage extends PureComponent {
formValues: {}, formValues: {},
}); });
dispatch({ dispatch({
type: 'rule/fetch', type: 'pipeline/fetch',
payload: {}, payload: {},
}); });
}; };
toggleForm = () => { handleDeleteClick = e => {
const { expandForm } = this.state;
this.setState({
expandForm: !expandForm,
});
};
handleMenuClick = e => {
const { dispatch } = this.props; const { dispatch } = this.props;
const { selectedRows } = this.state; const { selectedRows } = this.state;
if (!selectedRows) return; if (!selectedRows) return;
switch (e.key) {
case 'remove':
dispatch({ dispatch({
type: 'rule/remove', type: 'pipeline/delete',
payload: { payload: {
key: selectedRows.map(row => row.key), key: selectedRows.map(row => row.name),
}, },
callback: () => { callback: () => {
this.setState({ this.setState({
@ -411,10 +210,6 @@ class AliasManage extends PureComponent {
}); });
}, },
}); });
break;
default:
break;
}
}; };
handleSelectRows = rows => { handleSelectRows = rows => {
@ -456,16 +251,18 @@ class AliasManage extends PureComponent {
handleUpdateModalVisible = (flag, record) => { handleUpdateModalVisible = (flag, record) => {
this.setState({ this.setState({
updateModalVisible: !!flag, updateModalVisible: !!flag,
stepFormValues: record || {}, updateFormValues: record || {},
}); });
}; };
handleAdd = fields => { handleAdd = fields => {
const { dispatch } = this.props; const { dispatch } = this.props;
dispatch({ dispatch({
type: 'rule/add', type: 'pipeline/add',
payload: { payload: {
name: fields.name,
desc: fields.desc, desc: fields.desc,
processors: fields.processors,
}, },
}); });
@ -476,15 +273,15 @@ class AliasManage extends PureComponent {
handleUpdate = fields => { handleUpdate = fields => {
const { dispatch } = this.props; const { dispatch } = this.props;
dispatch({ dispatch({
type: 'rule/update', type: 'pipeline/update',
payload: { payload: {
name: fields.name, name: fields.name,
desc: fields.desc, desc: fields.desc,
key: fields.key, processors: fields.processors,
}, },
}); });
message.success('配置成功'); message.success('修改成功');
this.handleUpdateModalVisible(); this.handleUpdateModalVisible();
}; };
@ -500,16 +297,6 @@ class AliasManage extends PureComponent {
{getFieldDecorator('name')(<Input placeholder="请输入" />)} {getFieldDecorator('name')(<Input placeholder="请输入" />)}
</FormItem> </FormItem>
</Col> </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}> <Col md={8} sm={24}>
<span className={styles.submitButtons}> <span className={styles.submitButtons}>
<Button type="primary" htmlType="submit"> <Button type="primary" htmlType="submit">
@ -518,9 +305,6 @@ class AliasManage extends PureComponent {
<Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}> <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
重置 重置
</Button> </Button>
<a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
展开 <Icon type="down" />
</a>
</span> </span>
</Col> </Col>
</Row> </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() { renderForm() {
const { expandForm } = this.state; return this.renderSimpleForm();
return expandForm ? this.renderAdvancedForm() : this.renderSimpleForm();
} }
render() { render() {
const { const data = {
rule: { data }, list: JSON.parse(this.datasource),
loading, pagination: {
} = this.props; pageSize: 5,
const { selectedRows, modalVisible, updateModalVisible, stepFormValues } = this.state; },
const menu = ( };
<Menu onClick={this.handleMenuClick} selectedKeys={[]}> const { selectedRows, modalVisible, updateModalVisible, updateFormValues } = this.state;
<Menu.Item key="remove">删除</Menu.Item>
<Menu.Item key="approval">批量审批</Menu.Item>
</Menu>
);
const parentMethods = { const parentMethods = {
handleAdd: this.handleAdd, handleAdd: this.handleAdd,
handleModalVisible: this.handleModalVisible, handleModalVisible: this.handleModalVisible,
@ -614,20 +338,17 @@ class AliasManage extends PureComponent {
<div className={styles.tableList}> <div className={styles.tableList}>
<div className={styles.tableListForm}>{this.renderForm()}</div> <div className={styles.tableListForm}>{this.renderForm()}</div>
<div className={styles.tableListOperator}> <div className={styles.tableListOperator}>
<Button icon="plus" type="primary" onClick={() => this.handleModalVisible(true)}>
新建
</Button>
{selectedRows.length > 0 && ( {selectedRows.length > 0 && (
<span> <span>
<Button>批量操作</Button> <Button onClick={() => this.handleDeleteClick()}>删除</Button>
<Dropdown overlay={menu}>
<Button>
更多操作 <Icon type="down" />
</Button>
</Dropdown>
</span> </span>
)} )}
</div> </div>
<StandardTable <StandardTable
selectedRows={selectedRows} selectedRows={selectedRows}
loading={loading}
data={data} data={data}
columns={this.columns} columns={this.columns}
onSelectRow={this.handleSelectRows} onSelectRow={this.handleSelectRows}
@ -636,14 +357,14 @@ class AliasManage extends PureComponent {
</div> </div>
</Card> </Card>
<CreateForm {...parentMethods} modalVisible={modalVisible} /> <CreateForm {...parentMethods} modalVisible={modalVisible} />
{stepFormValues && Object.keys(stepFormValues).length ? ( {updateFormValues && Object.keys(updateFormValues).length ? (
<UpdateForm <UpdateForm
{...updateMethods} {...updateMethods}
updateModalVisible={updateModalVisible} updateModalVisible={updateModalVisible}
values={stepFormValues} values={updateFormValues}
/> />
) : null} ) : null}
</Fragment> </Fragment>
); );
} }
} }

49
web/src/pages/SearchManage/alias/AliasManage.less
View File

@ -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;
}
}

16
web/src/pages/SearchManage/alias/param.js → web/src/pages/SearchManage/alias/Param.js
View File

@ -75,7 +75,7 @@ const UpdateForm = Form.create()(props => {
onOk={okHandle} onOk={okHandle}
onCancel={() => handleUpdateModalVisible()} onCancel={() => handleUpdateModalVisible()}
> >
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称"> <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="别名">
{form.getFieldDecorator('name', { {form.getFieldDecorator('name', {
initialValue: values.name, initialValue: values.name,
rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }], rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
@ -101,7 +101,7 @@ const UpdateForm = Form.create()(props => {
loading: loading.models.pipeline, loading: loading.models.pipeline,
})) }))
@Form.create() @Form.create()
class param extends PureComponent { class Param extends PureComponent {
state = { state = {
modalVisible: false, modalVisible: false,
updateModalVisible: false, updateModalVisible: false,
@ -177,15 +177,15 @@ class param extends PureComponent {
columns = [ columns = [
{ {
title: '模板名称', title: '字段名称',
dataIndex: 'name', dataIndex: 'name',
}, },
{ {
title: '模式', title: '别名',
dataIndex: 'index_patterns', dataIndex: 'index_patterns',
}, },
{ {
title: 'order', title: '排序',
dataIndex: 'order' dataIndex: 'order'
}, },
{ {
@ -196,7 +196,7 @@ class param extends PureComponent {
title: '操作', title: '操作',
render: (text, record) => ( render: (text, record) => (
<Fragment> <Fragment>
<a onClick={() => this.handleUpdateModalVisible(true, record)}>设置</a> <a onClick={() => this.handleUpdateModalVisible(true, record)}>别名设置</a>
<Divider type="vertical" /> <Divider type="vertical" />
<a onClick={() => { <a onClick={() => {
this.state.selectedRows.push(record); this.state.selectedRows.push(record);
@ -351,7 +351,7 @@ class param extends PureComponent {
<Form onSubmit={this.handleSearch} layout="inline"> <Form onSubmit={this.handleSearch} layout="inline">
<Row gutter={{ md: 8, lg: 24, xl: 48 }}> <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
<Col md={8} sm={24}> <Col md={8} sm={24}>
<FormItem label="模板名称"> <FormItem label="别名">
{getFieldDecorator('name')(<Input placeholder="请输入" />)} {getFieldDecorator('name')(<Input placeholder="请输入" />)}
</FormItem> </FormItem>
</Col> </Col>
@ -427,4 +427,4 @@ class param extends PureComponent {
} }
} }
export default param; export default Param;

14
web/src/pages/SearchManage/alias/rule.js → web/src/pages/SearchManage/alias/Rule.js
View File

@ -37,7 +37,7 @@ const CreateForm = Form.create()(props => {
onOk={okHandle} onOk={okHandle}
onCancel={() => handleModalVisible()} onCancel={() => handleModalVisible()}
> >
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称"> <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="index pattern 规则">
{form.getFieldDecorator('name', { {form.getFieldDecorator('name', {
rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }], rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
})(<Input placeholder="请输入名称" />)} })(<Input placeholder="请输入名称" />)}
@ -75,7 +75,7 @@ const UpdateForm = Form.create()(props => {
onOk={okHandle} onOk={okHandle}
onCancel={() => handleUpdateModalVisible()} onCancel={() => handleUpdateModalVisible()}
> >
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称"> <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="index pattern 规则">
{form.getFieldDecorator('name', { {form.getFieldDecorator('name', {
initialValue: values.name, initialValue: values.name,
rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }], rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
@ -177,15 +177,15 @@ class rule extends PureComponent {
columns = [ columns = [
{ {
title: '模板名称', title: '索引 pattern',
dataIndex: 'name', dataIndex: 'name',
}, },
{ {
title: '模式', title: 'rule',
dataIndex: 'index_patterns', dataIndex: 'index_patterns',
}, },
{ {
title: 'order', title: '排序',
dataIndex: 'order' dataIndex: 'order'
}, },
{ {
@ -196,7 +196,7 @@ class rule extends PureComponent {
title: '操作', title: '操作',
render: (text, record) => ( render: (text, record) => (
<Fragment> <Fragment>
<a onClick={() => this.handleUpdateModalVisible(true, record)}>设置</a> <a onClick={() => this.handleUpdateModalVisible(true, record)}>设置规则</a>
<Divider type="vertical" /> <Divider type="vertical" />
<a onClick={() => { <a onClick={() => {
this.state.selectedRows.push(record); this.state.selectedRows.push(record);
@ -351,7 +351,7 @@ class rule extends PureComponent {
<Form onSubmit={this.handleSearch} layout="inline"> <Form onSubmit={this.handleSearch} layout="inline">
<Row gutter={{ md: 8, lg: 24, xl: 48 }}> <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
<Col md={8} sm={24}> <Col md={8} sm={24}>
<FormItem label="模板名称"> <FormItem label="index pattern 规则">
{getFieldDecorator('name')(<Input placeholder="请输入" />)} {getFieldDecorator('name')(<Input placeholder="请输入" />)}
</FormItem> </FormItem>
</Col> </Col>

548
web/src/pages/SearchManage/analyzer/AnalyzerTest.js
View File

@ -1,430 +1,156 @@
import React, { PureComponent, Fragment } from 'react'; import React, { Component,Fragment } from 'react';
import { connect } from 'dva'; import { connect } from 'dva';
import { import { Card,Form,Input, Select,Button,message,Upload, Icon,Switch } from 'antd';
Row, const { Option } = Select;
Col, import { formatMessage, FormattedMessage } from 'umi/locale';
Card, import DescriptionList from '@/components/DescriptionList';
Form, import styles from '../../profile/AdvancedProfile.less';
Input, const { Description } = DescriptionList;
Button,
Modal,
message,
Divider,
} from 'antd';
import StandardTable from '@/components/StandardTable';
import PageHeaderWrapper from '@/components/PageHeaderWrapper'; import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import styles from '../../List/TableList.less';
const FormItem = Form.Item; const FormItem = Form.Item;
const { TextArea } = Input; 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 => { @connect(({logstash,loading }) => ({
const { updateModalVisible, handleUpdateModalVisible, handleUpdate,values,form } = props; data: logstash.logstash,
loading: loading.models.logstash,
const okHandle = () => { submitting: loading.effects['logstash/submitLogstashConfig'],
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,
})) }))
@Form.create() @Form.create()
class AnalyzerTest extends PureComponent { class AnalyzerTest extends Component {
state = { state = {
modalVisible: false, operationkey: 'tab1',
updateModalVisible: false, };logstash
expandForm: false, componentDidMount() {
selectedRows: [], // message.loading('数据加载中..', 'initdata');
formValues: {}, // const { dispatch } = this.props;
updateFormValues: {}, // dispatch({
}; // type: 'logstash/queryInitialLogstashConfig',
//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}`;
} }
onOperationTabChange = key => {
dispatch({ this.setState({ operationkey: key });
type: 'pipeline/fetch', };
payload: params, handleSubmit = e => {
}); const { dispatch, form } = this.props;
}; e.preventDefault();
form.validateFieldsAndScroll((err, values) => {
handleFormReset = () => { if (!err) {
const { form, dispatch } = this.props; let pdata = {
form.resetFields(); jdbc:{
this.setState({ type: values.dbtype,
formValues: {}, config: values.logstash.jdbcconf,
}); },
dispatch({ };
type: 'pipeline/fetch', if(e.target.name="kafka"){
payload: {}, pdata={
}); kafka:{
}; config: values.logstash.kafkaconf,
},
handleDeleteClick = e => { }
const { dispatch } = this.props; }
const { selectedRows } = this.state; dispatch({
type: 'logstash/submitLogstashConfig',
if (!selectedRows) return; payload: pdata,
dispatch({ });
type: 'pipeline/delete', }
payload: {
key: selectedRows.map(row => row.name),
},
callback: () => {
this.setState({
selectedRows: [],
});
},
}); });
}; };
handleSelectRows = rows => { render() {
this.setState({ const { operationkey } = this.state;
selectedRows: rows, 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; return (
<Fragment>
form.validateFields((err, fieldsValue) => { <Card className={styles.tabsCard} bordered={false}>
if (err) return; <div>
<Form onSubmit={this.handleSubmit} hideRequiredMark style={{ marginTop: 8 }}>
const values = { <FormItem {...formItemLayout} label="选择分词器">
...fieldsValue, {getFieldDecorator('index', {
updatedAt: fieldsValue.updatedAt && fieldsValue.updatedAt.valueOf(), initialValue: data.index,
}; rules: [
{
this.setState({ required: true,
formValues: values, message: "请选择分词器",
}); },
],
dispatch({ })(
type: 'rule/fetch', <Select placeholder="Please select" style={{ width: 150 }}>
payload: values, <Option value="blogs">blogs</Option>
}); <Option value="logs">logs</Option>
}); <Option value="filebeat">filebeat</Option>
}; </Select>
)}
handleModalVisible = flag => { </FormItem>
this.setState({ <FormItem {...formItemLayout} label="测试数据">
modalVisible: !!flag, {getFieldDecorator('bulk', {
}); initialValue: data.bulk,
}; rules: [
{
handleUpdateModalVisible = (flag, record) => { required: true,
this.setState({ message: '请输入测试数据',
updateModalVisible: !!flag, },
updateFormValues: record || {}, ],
}); })(
}; <TextArea
style={{ minHeight: 32, width: '100%' }}
handleAdd = fields => { placeholder=''
const { dispatch } = this.props; rows={12}
dispatch({ />
type: 'pipeline/add', )}
payload: { </FormItem>
name: fields.name, <FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
desc: fields.desc, <Button type="primary" htmlType="submit" loading={submitting}>
processors: fields.processors, <FormattedMessage id="form.submit" />
}, </Button>
});
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="请输入" />)}
</FormItem> </FormItem>
</Col> </Form>
<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>
)}
</div> </div>
<StandardTable </Card>
selectedRows={selectedRows} </Fragment>
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 AnalyzerTest; export default AnalyzerTest;

14
web/src/pages/SearchManage/analyzer/Manage.js
View File

@ -31,18 +31,18 @@ const CreateForm = Form.create()(props => {
return ( return (
<Modal <Modal
destroyOnClose destroyOnClose
title="新建模板" title="新建分词器"
visible={modalVisible} visible={modalVisible}
width={640} width={640}
onOk={okHandle} onOk={okHandle}
onCancel={() => handleModalVisible()} onCancel={() => handleModalVisible()}
> >
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称"> <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="分词器名称">
{form.getFieldDecorator('name', { {form.getFieldDecorator('name', {
rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }], rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
})(<Input placeholder="请输入名称" />)} })(<Input placeholder="请输入名称" />)}
</FormItem> </FormItem>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板设置"> <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="设置">
{form.getFieldDecorator('settings', { {form.getFieldDecorator('settings', {
rules: [{ required: true }], rules: [{ required: true }],
})(<TextArea })(<TextArea
@ -75,13 +75,13 @@ const UpdateForm = Form.create()(props => {
onOk={okHandle} onOk={okHandle}
onCancel={() => handleUpdateModalVisible()} onCancel={() => handleUpdateModalVisible()}
> >
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称"> <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="分词器名称">
{form.getFieldDecorator('name', { {form.getFieldDecorator('name', {
initialValue: values.name, initialValue: values.name,
rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }], rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
})(<Input placeholder="请输入名称" />)} })(<Input placeholder="请输入名称" />)}
</FormItem> </FormItem>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板设置"> <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="设置">
{form.getFieldDecorator('settings', { {form.getFieldDecorator('settings', {
initialValue: values.processors, initialValue: values.processors,
rules: [{ required: true }], rules: [{ required: true }],
@ -177,7 +177,7 @@ class Manage extends PureComponent {
columns = [ columns = [
{ {
title: '模板名称', title: '分词器名称',
dataIndex: 'name', dataIndex: 'name',
}, },
{ {
@ -351,7 +351,7 @@ class Manage extends PureComponent {
<Form onSubmit={this.handleSearch} layout="inline"> <Form onSubmit={this.handleSearch} layout="inline">
<Row gutter={{ md: 8, lg: 24, xl: 48 }}> <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
<Col md={8} sm={24}> <Col md={8} sm={24}>
<FormItem label="模板名称"> <FormItem label="分词器名称">
{getFieldDecorator('name')(<Input placeholder="请输入" />)} {getFieldDecorator('name')(<Input placeholder="请输入" />)}
</FormItem> </FormItem>
</Col> </Col>

49
web/src/pages/SearchManage/models/logstash.js Normal file
View File

@ -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;
},
},
};

12
web/src/pages/SearchManage/nlp/Intention.js
View File

@ -37,7 +37,7 @@ const CreateForm = Form.create()(props => {
onOk={okHandle} onOk={okHandle}
onCancel={() => handleModalVisible()} onCancel={() => handleModalVisible()}
> >
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称"> <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="意图识别">
{form.getFieldDecorator('name', { {form.getFieldDecorator('name', {
rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }], rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
})(<Input placeholder="请输入名称" />)} })(<Input placeholder="请输入名称" />)}
@ -75,7 +75,7 @@ const UpdateForm = Form.create()(props => {
onOk={okHandle} onOk={okHandle}
onCancel={() => handleUpdateModalVisible()} onCancel={() => handleUpdateModalVisible()}
> >
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称"> <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="意图识别">
{form.getFieldDecorator('name', { {form.getFieldDecorator('name', {
initialValue: values.name, initialValue: values.name,
rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }], rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
@ -177,13 +177,9 @@ class Intention extends PureComponent {
columns = [ columns = [
{ {
title: '模板名称', title: '意图识别',
dataIndex: 'name', dataIndex: 'name',
}, },
{
title: '模式',
dataIndex: 'index_patterns',
},
{ {
title: 'order', title: 'order',
dataIndex: 'order' dataIndex: 'order'
@ -351,7 +347,7 @@ class Intention extends PureComponent {
<Form onSubmit={this.handleSearch} layout="inline"> <Form onSubmit={this.handleSearch} layout="inline">
<Row gutter={{ md: 8, lg: 24, xl: 48 }}> <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
<Col md={8} sm={24}> <Col md={8} sm={24}>
<FormItem label="模板名称"> <FormItem label="意图识别">
{getFieldDecorator('name')(<Input placeholder="请输入" />)} {getFieldDecorator('name')(<Input placeholder="请输入" />)}
</FormItem> </FormItem>
</Col> </Col>

20
web/src/pages/SearchManage/nlp/Knowledge.js
View File

@ -31,18 +31,18 @@ const CreateForm = Form.create()(props => {
return ( return (
<Modal <Modal
destroyOnClose destroyOnClose
title="新建模板" title="新建知识图谱"
visible={modalVisible} visible={modalVisible}
width={640} width={640}
onOk={okHandle} onOk={okHandle}
onCancel={() => handleModalVisible()} onCancel={() => handleModalVisible()}
> >
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称"> <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="知识图谱">
{form.getFieldDecorator('name', { {form.getFieldDecorator('name', {
rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }], rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
})(<Input placeholder="请输入名称" />)} })(<Input placeholder="请输入名称" />)}
</FormItem> </FormItem>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板设置"> <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="设置">
{form.getFieldDecorator('settings', { {form.getFieldDecorator('settings', {
rules: [{ required: true }], rules: [{ required: true }],
})(<TextArea })(<TextArea
@ -69,19 +69,19 @@ const UpdateForm = Form.create()(props => {
return ( return (
<Modal <Modal
destroyOnClose destroyOnClose
title="模板设置" title="知识图谱设置"
visible={updateModalVisible} visible={updateModalVisible}
width={640} width={640}
onOk={okHandle} onOk={okHandle}
onCancel={() => handleUpdateModalVisible()} onCancel={() => handleUpdateModalVisible()}
> >
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称"> <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="知识图谱">
{form.getFieldDecorator('name', { {form.getFieldDecorator('name', {
initialValue: values.name, initialValue: values.name,
rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }], rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
})(<Input placeholder="请输入名称" />)} })(<Input placeholder="请输入名称" />)}
</FormItem> </FormItem>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板设置"> <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="设置">
{form.getFieldDecorator('settings', { {form.getFieldDecorator('settings', {
initialValue: values.processors, initialValue: values.processors,
rules: [{ required: true }], rules: [{ required: true }],
@ -177,13 +177,9 @@ class Knowledge extends PureComponent {
columns = [ columns = [
{ {
title: '模板名称', title: '知识图谱',
dataIndex: 'name', dataIndex: 'name',
}, },
{
title: '模式',
dataIndex: 'index_patterns',
},
{ {
title: 'order', title: 'order',
dataIndex: 'order' dataIndex: 'order'
@ -351,7 +347,7 @@ class Knowledge extends PureComponent {
<Form onSubmit={this.handleSearch} layout="inline"> <Form onSubmit={this.handleSearch} layout="inline">
<Row gutter={{ md: 8, lg: 24, xl: 48 }}> <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
<Col md={8} sm={24}> <Col md={8} sm={24}>
<FormItem label="模板名称"> <FormItem label="知识图谱">
{getFieldDecorator('name')(<Input placeholder="请输入" />)} {getFieldDecorator('name')(<Input placeholder="请输入" />)}
</FormItem> </FormItem>
</Col> </Col>

14
web/src/pages/SearchManage/nlp/Query.js
View File

@ -37,12 +37,12 @@ const CreateForm = Form.create()(props => {
onOk={okHandle} onOk={okHandle}
onCancel={() => handleModalVisible()} onCancel={() => handleModalVisible()}
> >
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称"> <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="语义词">
{form.getFieldDecorator('name', { {form.getFieldDecorator('name', {
rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }], rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
})(<Input placeholder="请输入名称" />)} })(<Input placeholder="请输入名称" />)}
</FormItem> </FormItem>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板设置"> <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="设置">
{form.getFieldDecorator('settings', { {form.getFieldDecorator('settings', {
rules: [{ required: true }], rules: [{ required: true }],
})(<TextArea })(<TextArea
@ -75,13 +75,13 @@ const UpdateForm = Form.create()(props => {
onOk={okHandle} onOk={okHandle}
onCancel={() => handleUpdateModalVisible()} onCancel={() => handleUpdateModalVisible()}
> >
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称"> <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="语义词">
{form.getFieldDecorator('name', { {form.getFieldDecorator('name', {
initialValue: values.name, initialValue: values.name,
rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }], rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
})(<Input placeholder="请输入名称" />)} })(<Input placeholder="请输入名称" />)}
</FormItem> </FormItem>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板设置"> <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="设置">
{form.getFieldDecorator('settings', { {form.getFieldDecorator('settings', {
initialValue: values.processors, initialValue: values.processors,
rules: [{ required: true }], rules: [{ required: true }],
@ -177,11 +177,11 @@ class Query extends PureComponent {
columns = [ columns = [
{ {
title: '模板名称', title: '语义词',
dataIndex: 'name', dataIndex: 'name',
}, },
{ {
title: '模式', title: '语义',
dataIndex: 'index_patterns', dataIndex: 'index_patterns',
}, },
{ {
@ -351,7 +351,7 @@ class Query extends PureComponent {
<Form onSubmit={this.handleSearch} layout="inline"> <Form onSubmit={this.handleSearch} layout="inline">
<Row gutter={{ md: 8, lg: 24, xl: 48 }}> <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
<Col md={8} sm={24}> <Col md={8} sm={24}>
<FormItem label="模板名称"> <FormItem label="语义词">
{getFieldDecorator('name')(<Input placeholder="请输入" />)} {getFieldDecorator('name')(<Input placeholder="请输入" />)}
</FormItem> </FormItem>
</Col> </Col>

18
web/src/pages/SearchManage/nlp/Text.js
View File

@ -31,18 +31,18 @@ const CreateForm = Form.create()(props => {
return ( return (
<Modal <Modal
destroyOnClose destroyOnClose
title="新建模板" title="新建文本聚类"
visible={modalVisible} visible={modalVisible}
width={640} width={640}
onOk={okHandle} onOk={okHandle}
onCancel={() => handleModalVisible()} onCancel={() => handleModalVisible()}
> >
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称"> <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="文本聚类">
{form.getFieldDecorator('name', { {form.getFieldDecorator('name', {
rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }], rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
})(<Input placeholder="请输入名称" />)} })(<Input placeholder="请输入名称" />)}
</FormItem> </FormItem>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板设置"> <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="设置">
{form.getFieldDecorator('settings', { {form.getFieldDecorator('settings', {
rules: [{ required: true }], rules: [{ required: true }],
})(<TextArea })(<TextArea
@ -69,19 +69,19 @@ const UpdateForm = Form.create()(props => {
return ( return (
<Modal <Modal
destroyOnClose destroyOnClose
title="模板设置" title="文本聚类设置"
visible={updateModalVisible} visible={updateModalVisible}
width={640} width={640}
onOk={okHandle} onOk={okHandle}
onCancel={() => handleUpdateModalVisible()} onCancel={() => handleUpdateModalVisible()}
> >
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称"> <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="文本聚类">
{form.getFieldDecorator('name', { {form.getFieldDecorator('name', {
initialValue: values.name, initialValue: values.name,
rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }], rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
})(<Input placeholder="请输入名称" />)} })(<Input placeholder="请输入名称" />)}
</FormItem> </FormItem>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板设置"> <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="设置">
{form.getFieldDecorator('settings', { {form.getFieldDecorator('settings', {
initialValue: values.processors, initialValue: values.processors,
rules: [{ required: true }], rules: [{ required: true }],
@ -177,11 +177,11 @@ class Text extends PureComponent {
columns = [ columns = [
{ {
title: '模板名称', title: '文本',
dataIndex: 'name', dataIndex: 'name',
}, },
{ {
title: '模式', title: '聚类',
dataIndex: 'index_patterns', dataIndex: 'index_patterns',
}, },
{ {
@ -351,7 +351,7 @@ class Text extends PureComponent {
<Form onSubmit={this.handleSearch} layout="inline"> <Form onSubmit={this.handleSearch} layout="inline">
<Row gutter={{ md: 8, lg: 24, xl: 48 }}> <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
<Col md={8} sm={24}> <Col md={8} sm={24}>
<FormItem label="模板名称"> <FormItem label="文本">
{getFieldDecorator('name')(<Input placeholder="请输入" />)} {getFieldDecorator('name')(<Input placeholder="请输入" />)}
</FormItem> </FormItem>
</Col> </Col>

854
web/src/pages/SearchManage/template/History.js
View File

@ -1,285 +1,631 @@
import React, { PureComponent } from 'react'; import React, { PureComponent, Fragment } from 'react';
import { findDOMNode } from 'react-dom';
import moment from 'moment';
import { connect } from 'dva'; import { connect } from 'dva';
import moment from 'moment';
import { import {
List, Row,
Card, Col,
Row, Card,
Col, Form,
Radio, Input,
Input, Select,
Progress, Icon,
Button, Button,
Icon, Dropdown,
Dropdown, Menu,
Menu, InputNumber,
Avatar, DatePicker,
Modal, Modal,
Form, message,
DatePicker, Badge,
Select, Divider,
Steps,
Radio,
} from 'antd'; } from 'antd';
import StandardTable from '@/components/StandardTable';
import PageHeaderWrapper from '@/components/PageHeaderWrapper'; import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import Result from '@/components/Result';
import styles from './History.less'; import styles from './History.less';
const FormItem = Form.Item; const FormItem = Form.Item;
const RadioButton = Radio.Button; const { Step } = Steps;
const { TextArea } = Input;
const { Option } = Select;
const RadioGroup = Radio.Group; const RadioGroup = Radio.Group;
const SelectOption = Select.Option; const getValue = obj =>
const { Search, TextArea } = Input; 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 }) => ({ @Form.create()
list, class UpdateForm extends PureComponent {
loading: loading.models.list, 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() @Form.create()
class History extends PureComponent { class History extends PureComponent {
state = { visible: false, done: false }; state = {
modalVisible: false,
updateModalVisible: false,
expandForm: false,
selectedRows: [],
formValues: {},
stepFormValues: {},
};
formLayout = { columns = [
labelCol: { span: 7 }, {
wrapperCol: { span: 13 }, 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,
}; };
if (sorter.field) {
componentDidMount() { params.sorter = `${sorter.field}_${sorter.order}`;
const { dispatch } = this.props;
dispatch({
type: 'list/fetch',
payload: {
count: 5,
},
});
} }
showModal = () => { dispatch({
this.setState({ type: 'rule/fetch',
visible: true, payload: params,
current: undefined, });
}); };
};
showEditModal = item => { handleFormReset = () => {
this.setState({ const { form, dispatch } = this.props;
visible: true, form.resetFields();
current: item, this.setState({
}); formValues: {},
}; });
dispatch({
type: 'rule/fetch',
payload: {},
});
};
handleDone = () => { toggleForm = () => {
setTimeout(() => this.addBtn.blur(), 0); const { expandForm } = this.state;
this.setState({ this.setState({
done: false, expandForm: !expandForm,
visible: false, });
}); };
};
handleCancel = () => { handleMenuClick = e => {
setTimeout(() => this.addBtn.blur(), 0); const { dispatch } = this.props;
this.setState({ const { selectedRows } = this.state;
visible: false,
});
};
handleSubmit = e => { if (!selectedRows) return;
e.preventDefault(); switch (e.key) {
const { dispatch, form } = this.props; case 'remove':
const { current } = this.state; dispatch({
const id = current ? current.id : ''; type: 'rule/remove',
payload: {
setTimeout(() => this.addBtn.blur(), 0); key: selectedRows.map(row => row.key),
form.validateFields((err, fieldsValue) => { },
if (err) return; callback: () => {
this.setState({ this.setState({
done: true, selectedRows: [],
});
dispatch({
type: 'list/submit',
payload: { id, ...fieldsValue },
}); });
},
}); });
}; break;
default:
deleteItem = id => { break;
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>
} }
> };
<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> </a>
</Dropdown> </div>
);
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; export default History;

210
web/src/pages/SearchManage/template/History.less
View File

@ -1,195 +1,49 @@
@import '~antd/lib/style/themes/default.less'; @import '~antd/lib/style/themes/default.less';
@import '~@/utils/utils.less'; @import '~@/utils/utils.less';
.standardList { .tableList {
.tableListOperator {
margin-bottom: 16px;
button {
margin-right: 8px;
}
}
}
.tableListForm {
:global { :global {
.ant-card-head { .ant-form-item {
border-bottom: none; margin-bottom: 24px;
} margin-right: 0;
.ant-card-head-title { display: flex;
line-height: 32px; > .ant-form-item-label {
padding: 24px 0; width: auto;
} line-height: 32px;
.ant-card-extra { padding-right: 8px;
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;
} }
> p { .ant-form-item-control {
margin-top: 4px; line-height: 32px;
margin-bottom: 0;
line-height: 22px;
} }
} }
.ant-form-item-control-wrapper {
flex: 1;
}
} }
.extraContentSearch { .submitButtons {
margin-left: 16px; display: block;
width: 272px; white-space: nowrap;
margin-bottom: 24px;
} }
} }
@media screen and (max-width: @screen-xs) { @media screen and (max-width: @screen-lg) {
.standardList { .tableListForm :global(.ant-form-item) {
:global { margin-right: 24px;
.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-md) { @media screen and (max-width: @screen-md) {
.standardList { .tableListForm :global(.ant-form-item) {
.listContent { margin-right: 8px;
& > 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;
} }
} }

845
web/src/pages/SearchManage/template/Param.js
View File

@ -1,284 +1,627 @@
import React, { PureComponent } from 'react'; import React, { PureComponent, Fragment } from 'react';
import { findDOMNode } from 'react-dom';
import moment from 'moment';
import { connect } from 'dva'; import { connect } from 'dva';
import moment from 'moment';
import { import {
List, Row,
Card, Col,
Row, Card,
Col, Form,
Radio, Input,
Input, Select,
Progress, Icon,
Button, Button,
Icon, Dropdown,
Dropdown, Menu,
Menu, InputNumber,
Avatar, DatePicker,
Modal, Modal,
Form, message,
DatePicker, Badge,
Select, Divider,
Steps,
Radio,
} from 'antd'; } from 'antd';
import StandardTable from '@/components/StandardTable';
import PageHeaderWrapper from '@/components/PageHeaderWrapper'; import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import Result from '@/components/Result';
import styles from './Param.less'; import styles from './Param.less';
const FormItem = Form.Item; const FormItem = Form.Item;
const RadioButton = Radio.Button; const { Step } = Steps;
const { TextArea } = Input;
const { Option } = Select;
const RadioGroup = Radio.Group; const RadioGroup = Radio.Group;
const SelectOption = Select.Option; const getValue = obj =>
const { Search, TextArea } = Input; 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 }) => ({ @Form.create()
list, class UpdateForm extends PureComponent {
loading: loading.models.list, 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() @Form.create()
class Param extends PureComponent { class Param extends PureComponent {
state = { visible: false, done: false }; state = {
modalVisible: false,
updateModalVisible: false,
expandForm: false,
selectedRows: [],
formValues: {},
stepFormValues: {},
};
formLayout = { columns = [
labelCol: { span: 7 }, {
wrapperCol: { span: 13 }, 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,
}; };
if (sorter.field) {
componentDidMount() { params.sorter = `${sorter.field}_${sorter.order}`;
const { dispatch } = this.props;
dispatch({
type: 'list/fetch',
payload: {
count: 5,
},
});
} }
showModal = () => { dispatch({
this.setState({ type: 'rule/fetch',
visible: true, payload: params,
current: undefined, });
}); };
};
showEditModal = item => { handleFormReset = () => {
this.setState({ const { form, dispatch } = this.props;
visible: true, form.resetFields();
current: item, this.setState({
}); formValues: {},
}; });
dispatch({
type: 'rule/fetch',
payload: {},
});
};
handleDone = () => { toggleForm = () => {
setTimeout(() => this.addBtn.blur(), 0); const { expandForm } = this.state;
this.setState({ this.setState({
done: false, expandForm: !expandForm,
visible: false, });
}); };
};
handleCancel = () => { handleMenuClick = e => {
setTimeout(() => this.addBtn.blur(), 0); const { dispatch } = this.props;
this.setState({ const { selectedRows } = this.state;
visible: false,
});
};
handleSubmit = e => { if (!selectedRows) return;
e.preventDefault(); switch (e.key) {
const { dispatch, form } = this.props; case 'remove':
const { current } = this.state; dispatch({
const id = current ? current.id : ''; type: 'rule/remove',
payload: {
setTimeout(() => this.addBtn.blur(), 0); key: selectedRows.map(row => row.key),
form.validateFields((err, fieldsValue) => { },
if (err) return; callback: () => {
this.setState({ this.setState({
done: true, selectedRows: [],
});
dispatch({
type: 'list/submit',
payload: { id, ...fieldsValue },
}); });
},
}); });
}; break;
default:
deleteItem = id => { break;
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>
} }
> };
<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> </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 = () => { const parentMethods = {
if (done) { handleAdd: this.handleAdd,
return ( handleModalVisible: this.handleModalVisible,
<Result };
type="success" const updateMethods = {
title="操作成功" handleUpdateModalVisible: this.handleUpdateModalVisible,
description="一系列的信息描述，很短同样也可以带标点。" handleUpdate: this.handleUpdate,
actions={ };
<Button type="primary" onClick={this.handleDone}> return (
知道了 <Fragment>
</Button> <Card bordered={false}>
} <div className={styles.tableList}>
className={styles.formResult} <div className={styles.tableListForm}>{this.renderForm()}</div>
/> <div className={styles.tableListOperator}>
); {selectedRows.length > 0 && (
} <span>
return ( <Button>批量操作</Button>
<Form onSubmit={this.handleSubmit}> <Dropdown overlay={menu}>
<FormItem label="模板名称" {...this.formLayout}> <Button>
{getFieldDecorator('title', { 更多操作 <Icon type="down" />
rules: [{ required: true, message: '请输入模板名称' }], </Button>
initialValue: current.title, </Dropdown>
})(<Input placeholder="请输入" />)} </span>
</FormItem> )}
<FormItem {...this.formLayout} label="模板内容"> </div>
{getFieldDecorator('subDescription', { <StandardTable
rules: [{ message: '请输入模板内容', min: 5 }], selectedRows={selectedRows}
initialValue: current.subDescription, loading={loading}
})(<TextArea rows={4} placeholder="请输入模内容" />)} data={data}
</FormItem> columns={this.columns}
</Form> onSelectRow={this.handleSelectRows}
); onChange={this.handleStandardTableChange}
}; />
return ( </div>
<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> </Card>
</div> <CreateForm {...parentMethods} modalVisible={modalVisible} />
{stepFormValues && Object.keys(stepFormValues).length ? (
<UpdateForm
{...updateMethods}
updateModalVisible={updateModalVisible}
values={stepFormValues}
/>
) : null}
</Fragment>
); );
} }
} }
export default Param; export default Param;

210
web/src/pages/SearchManage/template/Param.less
View File

@ -1,195 +1,49 @@
@import '~antd/lib/style/themes/default.less'; @import '~antd/lib/style/themes/default.less';
@import '~@/utils/utils.less'; @import '~@/utils/utils.less';
.standardList { .tableList {
.tableListOperator {
margin-bottom: 16px;
button {
margin-right: 8px;
}
}
}
.tableListForm {
:global { :global {
.ant-card-head { .ant-form-item {
border-bottom: none; margin-bottom: 24px;
} margin-right: 0;
.ant-card-head-title { display: flex;
line-height: 32px; > .ant-form-item-label {
padding: 24px 0; width: auto;
} line-height: 32px;
.ant-card-extra { padding-right: 8px;
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;
} }
> p { .ant-form-item-control {
margin-top: 4px; line-height: 32px;
margin-bottom: 0;
line-height: 22px;
} }
} }
.ant-form-item-control-wrapper {
flex: 1;
}
} }
.extraContentSearch { .submitButtons {
margin-left: 16px; display: block;
width: 272px; white-space: nowrap;
margin-bottom: 24px;
} }
} }
@media screen and (max-width: @screen-xs) { @media screen and (max-width: @screen-lg) {
.standardList { .tableListForm :global(.ant-form-item) {
:global { margin-right: 24px;
.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-md) { @media screen and (max-width: @screen-md) {
.standardList { .tableListForm :global(.ant-form-item) {
.listContent { margin-right: 8px;
& > 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;
} }
} }

655
web/src/pages/SearchManage/template/Summary.js
View File

@ -1,298 +1,439 @@
import React, { PureComponent } from 'react'; import React, { PureComponent, Fragment } from 'react';
import { findDOMNode } from 'react-dom';
import moment from 'moment';
import { connect } from 'dva'; import { connect } from 'dva';
import { import {
List,
Card,
Row, Row,
Col, Col,
Radio, Card,
Input,
Progress,
Button,
Icon,
Dropdown,
Menu,
Avatar,
Modal,
Form, Form,
Input,
Button,
Modal,
message,
Divider,
Icon,
DatePicker, DatePicker,
TimePicker,
Select, Select,
Popover,
} from 'antd'; } from 'antd';
import StandardTable from '@/components/StandardTable';
import PageHeaderWrapper from '@/components/PageHeaderWrapper'; import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import Result from '@/components/Result';
import styles from './Summary.less'; import styles from './Summary.less';
const FormItem = Form.Item; const FormItem = Form.Item;
const RadioButton = Radio.Button; const { TextArea } = Input;
const RadioGroup = Radio.Group; const fieldLabels = {
const SelectOption = Select.Option; keyword_type: '关键词分类'
const { Search, TextArea } = Input;
@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() @Form.create()
class Summary extends PureComponent { class Summary extends PureComponent {
state = { visible: false, done: false }; state = {
modalVisible: false,
formLayout = { updateModalVisible: false,
labelCol: { span: 7 }, expandForm: false,
wrapperCol: { span: 13 }, 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() { columns = [
const { dispatch } = this.props; {
dispatch({ title: '模板名称',
type: 'list/fetch', dataIndex: 'keyword',
payload: { },
count: 5, {
}, 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 = () => { dispatch({
this.setState({ type: 'pipeline/fetch',
visible: true, payload: params,
current: undefined, });
}); };
};
showEditModal = item => { handleFormReset = () => {
this.setState({ const { form, dispatch } = this.props;
visible: true, form.resetFields();
current: item, this.setState({
}); formValues: {},
}; });
dispatch({
type: 'pipeline/fetch',
payload: {},
});
};
handleDone = () => { handleDeleteClick = e => {
setTimeout(() => this.addBtn.blur(), 0); const { dispatch } = this.props;
this.setState({ const { selectedRows } = this.state;
done: false,
visible: false,
});
};
handleCancel = () => { if (!selectedRows) return;
setTimeout(() => this.addBtn.blur(), 0); dispatch({
this.setState({ type: 'pipeline/delete',
visible: false, payload: {
}); key: selectedRows.map(row => row.name),
}; },
callback: () => {
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;
this.setState({ 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({ dispatch({
type: 'list/submit', type: 'rule/fetch',
payload: { id }, payload: values,
}); });
}; });
};
render() { handleModalVisible = flag => {
const { this.setState({
list: { list }, modalVisible: !!flag,
loading, });
} = this.props; };
const {
form: { getFieldDecorator },
} = this.props;
const { visible, done, current = {} } = this.state;
const editAndDelete = (key, currentItem) => { handleUpdateModalVisible = (flag, record) => {
if (key === 'edit') this.showEditModal(currentItem); this.setState({
else if (key === 'delete') { updateModalVisible: !!flag,
Modal.confirm({ updateFormValues: record || {},
title: '删除模板', });
content: '确定删除该模板吗？', };
okText: '确认',
cancelText: '取消',
onOk: () => this.deleteItem(currentItem.id),
});
}
};
const modalFooter = done handleAdd = fields => {
? { footer: null, onCancel: this.handleDone } const { dispatch } = this.props;
: { okText: '保存', onOk: this.handleSubmit, onCancel: this.handleCancel }; dispatch({
type: 'pipeline/add',
payload: {
name: fields.name,
desc: fields.desc,
processors: fields.processors,
},
});
const Info = ({ title, value, bordered }) => ( message.success('添加成功');
<div className={styles.headerInfo}> this.handleModalVisible();
<span>{title}</span> };
<p>{value}</p>
{bordered && <em />}
</div>
);
const extraContent = ( handleUpdate = fields => {
<div className={styles.extraContent}> const { dispatch } = this.props;
<Search className={styles.extraContentSearch} placeholder="请输入模板内容" onSearch={() => ({})} /> dispatch({
</div> type: 'pipeline/update',
); payload: {
name: fields.name,
desc: fields.desc,
processors: fields.processors,
},
});
const paginationProps = { message.success('修改成功');
showSizeChanger: true, this.handleUpdateModalVisible();
showQuickJumper: true, };
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, pageSize: 5,
total: 50, },
}; };
const { selectedRows, modalVisible, updateModalVisible, updateFormValues } = this.state;
const ListContent = ({ data: { owner, createdAt, percent, status } }) => ( const parentMethods = {
<div className={styles.listContent}> handleAdd: this.handleAdd,
<div className={styles.listContentItem}> handleModalVisible: this.handleModalVisible,
<span>模板名称</span> };
<p>{owner}</p> const updateMethods = {
</div> handleUpdateModalVisible: this.handleUpdateModalVisible,
<div className={styles.listContentItem}> handleUpdate: this.handleUpdate,
<span>创建时间</span> };
<p>{moment(createdAt).format('YYYY-MM-DD HH:mm')}</p> return (
</div> <Fragment>
<div className={styles.listContentItem}> <Card bordered={false}>
<Progress percent={percent} status={status} strokeWidth={6} style={{ width: 180 }} /> <Row>
</div> <Col sm={8} xs={24}>
</div> <Info title="搜索次数" value="80000次" bordered />
);
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 />
</Col> </Col>
<Col sm={8} xs={24}> <Col sm={8} xs={24}>
<Info title="来源统计" value="100个" bordered /> <Info title="来源统计" value="100个" bordered />
</Col> </Col >
<Col sm={8} xs={24}> <Col sm={8} xs={24}>
<Info title="新词、热词 " value="100个" /> <Info title="新词、热词 " value="100个" />
</Col> </Col>
</Row> </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>
)}
/>
</Card> </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;