mirror of https://github.com/openspug/spug
style migrate v3
vapao
parent
715b59f902
commit
ef401d914f
|
|
@ -3,86 +3,63 @@
|
||||||
* Copyright (c) <spug.dev@gmail.com>
|
* Copyright (c) <spug.dev@gmail.com>
|
||||||
* Released under the AGPL-3.0 License.
|
* Released under the AGPL-3.0 License.
|
||||||
*/
|
*/
|
||||||
import React from 'react';
|
import React, { useState } from 'react';
|
||||||
import { observer } from 'mobx-react';
|
import { observer } from 'mobx-react';
|
||||||
import { Modal, Form, Input, message } from 'antd';
|
import { Modal, Form, Input, message } from 'antd';
|
||||||
import http from 'libs/http';
|
import http from 'libs/http';
|
||||||
import store from './store';
|
import store from './store';
|
||||||
|
|
||||||
@observer
|
export default observer(function () {
|
||||||
class ComForm extends React.Component {
|
const [form] = Form.useForm();
|
||||||
constructor(props) {
|
const [loading, setLoading] = useState(false);
|
||||||
super(props);
|
|
||||||
this.state = {
|
|
||||||
loading: false,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
handleSubmit = () => {
|
function handleSubmit() {
|
||||||
this.setState({loading: true});
|
setLoading(true);
|
||||||
const formData = this.props.form.getFieldsValue();
|
const formData = form.getFieldsValue();
|
||||||
formData['id'] = store.record.id;
|
formData['id'] = store.record.id;
|
||||||
http.post('/api/alarm/contact/', formData)
|
http.post('/api/alarm/contact/', formData)
|
||||||
.then(res => {
|
.then(res => {
|
||||||
message.success('操作成功');
|
message.success('操作成功');
|
||||||
store.formVisible = false;
|
store.formVisible = false;
|
||||||
store.fetchRecords()
|
store.fetchRecords()
|
||||||
}, () => this.setState({loading: false}))
|
}, () => setLoading(false))
|
||||||
};
|
}
|
||||||
|
|
||||||
render() {
|
return (
|
||||||
const info = store.record;
|
<Modal
|
||||||
const {getFieldDecorator} = this.props.form;
|
visible
|
||||||
return (
|
width={800}
|
||||||
<Modal
|
maskClosable={false}
|
||||||
visible
|
title={store.record.id ? '编辑联系人' : '新建联系人'}
|
||||||
width={800}
|
onCancel={() => store.formVisible = false}
|
||||||
maskClosable={false}
|
confirmLoading={loading}
|
||||||
title={store.record.id ? '编辑联系人' : '新建联系人'}
|
onOk={handleSubmit}>
|
||||||
onCancel={() => store.formVisible = false}
|
<Form form={form} initialValues={store.record} labelCol={{span: 6}} wrapperCol={{span: 14}}>
|
||||||
confirmLoading={this.state.loading}
|
<Form.Item required name="name" label="姓名">
|
||||||
onOk={this.handleSubmit}>
|
<Input placeholder="请输入联系人姓名"/>
|
||||||
<Form labelCol={{span: 6}} wrapperCol={{span: 14}}>
|
</Form.Item>
|
||||||
<Form.Item required label="姓名">
|
<Form.Item name="phone" label="手机号">
|
||||||
{getFieldDecorator('name', {initialValue: info['name']})(
|
<Input placeholder="请输入手机号"/>
|
||||||
<Input placeholder="请输入联系人姓名"/>
|
</Form.Item>
|
||||||
)}
|
<Form.Item name="email" label="邮箱">
|
||||||
</Form.Item>
|
<Input placeholder="请输入邮箱地址"/>
|
||||||
<Form.Item label="手机号">
|
</Form.Item>
|
||||||
{getFieldDecorator('phone', {initialValue: info['phone']})(
|
<Form.Item name="wx_token" label="微信Token" extra={
|
||||||
<Input placeholder="请输入手机号"/>
|
<a target="_blank" rel="noopener noreferrer"
|
||||||
)}
|
href="https://spug.dev/docs/alarm-contact/">如何获取微信 Token ？</a>}>
|
||||||
</Form.Item>
|
<Input placeholder="请输入微信token"/>
|
||||||
<Form.Item label="邮箱">
|
</Form.Item>
|
||||||
{getFieldDecorator('email', {initialValue: info['email']})(
|
<Form.Item name="ding" label="钉钉" extra={<span>
|
||||||
<Input placeholder="请输入邮箱地址"/>
|
|
||||||
)}
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item label="微信Token" extra={
|
|
||||||
<a target="_blank" rel="noopener noreferrer"
|
|
||||||
href="https://spug.dev/docs/alarm-contact/">如何获取微信 Token ？</a>}>
|
|
||||||
{getFieldDecorator('wx_token', {initialValue: info['wx_token']})(
|
|
||||||
<Input placeholder="请输入微信token"/>
|
|
||||||
)}
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item label="钉钉" extra={<span>
|
|
||||||
钉钉收不到通知？请参考
|
钉钉收不到通知？请参考
|
||||||
<a target="_blank" rel="noopener noreferrer"
|
<a target="_blank" rel="noopener noreferrer"
|
||||||
href="https://spug.dev/docs/install-error/#%E9%92%89%E9%92%89%E6%94%B6%E4%B8%8D%E5%88%B0%E9%80%9A%E7%9F%A5%EF%BC%9F">官方文档</a>
|
href="https://spug.dev/docs/install-error/#%E9%92%89%E9%92%89%E6%94%B6%E4%B8%8D%E5%88%B0%E9%80%9A%E7%9F%A5%EF%BC%9F">官方文档</a>
|
||||||
</span>}>
|
</span>}>
|
||||||
{getFieldDecorator('ding', {initialValue: info['ding']})(
|
<Input placeholder="请输入钉钉机器人完整地址"/>
|
||||||
<Input placeholder="请输入钉钉机器人完整地址"/>
|
</Form.Item>
|
||||||
)}
|
<Form.Item name="qy_wx" label="企业微信">
|
||||||
</Form.Item>
|
<Input placeholder="请输入企业微信机器人完整地址"/>
|
||||||
<Form.Item label="企业微信">
|
</Form.Item>
|
||||||
{getFieldDecorator('qy_wx', {initialValue: info['qy_wx']})(
|
</Form>
|
||||||
<Input placeholder="请输入企业微信机器人完整地址"/>
|
</Modal>
|
||||||
)}
|
)
|
||||||
</Form.Item>
|
})
|
||||||
</Form>
|
|
||||||
</Modal>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Form.create()(ComForm)
|
|
||||||
|
|
@ -6,10 +6,10 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { observer } from 'mobx-react';
|
import { observer } from 'mobx-react';
|
||||||
import { Table, Modal, message } from 'antd';
|
import { Table, Modal, message } from 'antd';
|
||||||
import ComForm from './Form';
|
import { PlusOutlined } from '@ant-design/icons';
|
||||||
|
import { Action, TableCard, AuthButton } from 'components';
|
||||||
import { http, hasPermission } from 'libs';
|
import { http, hasPermission } from 'libs';
|
||||||
import store from './store';
|
import store from './store';
|
||||||
import { Action } from "components";
|
|
||||||
|
|
||||||
@observer
|
@observer
|
||||||
class ComTable extends React.Component {
|
class ComTable extends React.Component {
|
||||||
|
|
@ -32,40 +32,42 @@ class ComTable extends React.Component {
|
||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
let data = store.records;
|
|
||||||
if (store.f_name) {
|
|
||||||
data = data.filter(item => item['name'].toLowerCase().includes(store.f_name.toLowerCase()))
|
|
||||||
}
|
|
||||||
return (
|
return (
|
||||||
<React.Fragment>
|
<TableCard
|
||||||
<Table
|
rowKey="id"
|
||||||
rowKey="id"
|
title="报警联系人"
|
||||||
loading={store.isFetching}
|
loading={store.isFetching}
|
||||||
dataSource={data}
|
dataSource={store.dataSource}
|
||||||
pagination={{
|
onReload={store.fetchRecords}
|
||||||
showSizeChanger: true,
|
actions={[
|
||||||
showLessItems: true,
|
<AuthButton
|
||||||
hideOnSinglePage: true,
|
auth="alarm.contact.add"
|
||||||
showTotal: total => `共 ${total} 条`,
|
type="primary"
|
||||||
pageSizeOptions: ['10', '20', '50', '100']
|
icon={<PlusOutlined/>}
|
||||||
}}>
|
onClick={() => store.showForm()}>新建</AuthButton>
|
||||||
<Table.Column width={80} title="序号" key="series" render={(_, __, index) => index + 1}/>
|
]}
|
||||||
<Table.Column title="姓名" dataIndex="name"/>
|
pagination={{
|
||||||
<Table.Column title="手机号" dataIndex="phone"/>
|
showSizeChanger: true,
|
||||||
<Table.Column ellipsis title="邮箱" dataIndex="email"/>
|
showLessItems: true,
|
||||||
<Table.Column ellipsis title="钉钉" dataIndex="ding"/>
|
hideOnSinglePage: true,
|
||||||
<Table.Column ellipsis title="企业微信" dataIndex="qy_wx"/>
|
showTotal: total => `共 ${total} 条`,
|
||||||
{hasPermission('alarm.contact.edit|alarm.contact.del') && (
|
pageSizeOptions: ['10', '20', '50', '100']
|
||||||
<Table.Column title="操作" render={info => (
|
}}>
|
||||||
<Action>
|
<Table.Column title="姓名" dataIndex="name"/>
|
||||||
<Action.Button auth="alarm.contact.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
|
<Table.Column title="手机号" dataIndex="phone"/>
|
||||||
<Action.Button auth="alarm.contact.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
|
<Table.Column ellipsis title="邮箱" dataIndex="email"/>
|
||||||
</Action>
|
<Table.Column ellipsis hide title="钉钉" dataIndex="ding"/>
|
||||||
)}/>
|
<Table.Column ellipsis hide title="微信" dataIndex="wx_token"/>
|
||||||
)}
|
<Table.Column ellipsis hide title="企业微信" dataIndex="qy_wx"/>
|
||||||
</Table>
|
{hasPermission('alarm.contact.edit|alarm.contact.del') && (
|
||||||
{store.formVisible && <ComForm/>}
|
<Table.Column title="操作" render={info => (
|
||||||
</React.Fragment>
|
<Action>
|
||||||
|
<Action.Button auth="alarm.contact.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
|
||||||
|
<Action.Button auth="alarm.contact.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
|
||||||
|
</Action>
|
||||||
|
)}/>
|
||||||
|
)}
|
||||||
|
</TableCard>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -5,26 +5,27 @@
|
||||||
*/
|
*/
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { observer } from 'mobx-react';
|
import { observer } from 'mobx-react';
|
||||||
import { Input, Button } from 'antd';
|
import { Input } from 'antd';
|
||||||
import { SearchForm, AuthDiv, AuthCard } from 'components';
|
import { SearchForm, AuthDiv, Breadcrumb } from 'components';
|
||||||
import ComTable from './Table';
|
import ComTable from './Table';
|
||||||
|
import ComForm from './Form';
|
||||||
import store from './store';
|
import store from './store';
|
||||||
|
|
||||||
export default observer(function () {
|
export default observer(function () {
|
||||||
return (
|
return (
|
||||||
<AuthCard auth="alarm.contact.view">
|
<AuthDiv auth="alarm.contact.view">
|
||||||
|
<Breadcrumb>
|
||||||
|
<Breadcrumb.Item>首页</Breadcrumb.Item>
|
||||||
|
<Breadcrumb.Item>报警中心</Breadcrumb.Item>
|
||||||
|
<Breadcrumb.Item>报警联系人</Breadcrumb.Item>
|
||||||
|
</Breadcrumb>
|
||||||
<SearchForm>
|
<SearchForm>
|
||||||
<SearchForm.Item span={8} title="姓名">
|
<SearchForm.Item span={8} title="姓名">
|
||||||
<Input allowClear value={store.f_name} onChange={e => store.f_name = e.target.value} placeholder="请输入"/>
|
<Input allowClear value={store.f_name} onChange={e => store.f_name = e.target.value} placeholder="请输入"/>
|
||||||
</SearchForm.Item>
|
</SearchForm.Item>
|
||||||
<SearchForm.Item span={8}>
|
|
||||||
<Button type="primary" icon="sync" onClick={store.fetchRecords}>刷新</Button>
|
|
||||||
</SearchForm.Item>
|
|
||||||
</SearchForm>
|
</SearchForm>
|
||||||
<AuthDiv auth="alarm.contact.add" style={{marginBottom: 16}}>
|
|
||||||
<Button type="primary" icon="plus" onClick={() => store.showForm()}>新建</Button>
|
|
||||||
</AuthDiv>
|
|
||||||
<ComTable/>
|
<ComTable/>
|
||||||
</AuthCard>
|
{store.formVisible && <ComForm/>}
|
||||||
)
|
</AuthDiv>
|
||||||
|
);
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
* Copyright (c) <spug.dev@gmail.com>
|
* Copyright (c) <spug.dev@gmail.com>
|
||||||
* Released under the AGPL-3.0 License.
|
* Released under the AGPL-3.0 License.
|
||||||
*/
|
*/
|
||||||
import { observable } from "mobx";
|
import { observable, computed } from 'mobx';
|
||||||
import http from 'libs/http';
|
import http from 'libs/http';
|
||||||
|
|
||||||
class Store {
|
class Store {
|
||||||
|
|
@ -14,6 +14,12 @@ class Store {
|
||||||
|
|
||||||
@observable f_name;
|
@observable f_name;
|
||||||
|
|
||||||
|
@computed get dataSource() {
|
||||||
|
let records = this.records;
|
||||||
|
if (this.f_name) records = records.filter(x => x.name.toLowerCase().includes(this.f_name.toLowerCase()))
|
||||||
|
return records
|
||||||
|
}
|
||||||
|
|
||||||
fetchRecords = () => {
|
fetchRecords = () => {
|
||||||
this.isFetching = true;
|
this.isFetching = true;
|
||||||
return http.get('/api/alarm/contact/')
|
return http.get('/api/alarm/contact/')
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue