mirror of https://github.com/openspug/spug
style migrate v3
parent
d85cb94583
commit
bbb286c3c9
|
@ -3,60 +3,45 @@
|
|||
* Copyright (c) <spug.dev@gmail.com>
|
||||
* Released under the AGPL-3.0 License.
|
||||
*/
|
||||
import React from 'react';
|
||||
import React, { useState } from 'react';
|
||||
import { observer } from 'mobx-react';
|
||||
import { Modal, Form, Input, message } from 'antd';
|
||||
import http from 'libs/http';
|
||||
import store from './store';
|
||||
|
||||
@observer
|
||||
class ComForm extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
loading: false,
|
||||
}
|
||||
}
|
||||
export default observer(function () {
|
||||
const [form] = Form.useForm();
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
handleSubmit = () => {
|
||||
this.setState({loading: true});
|
||||
const formData = this.props.form.getFieldsValue();
|
||||
function handleSubmit() {
|
||||
setLoading(true);
|
||||
const formData = form.getFieldsValue();
|
||||
formData['id'] = store.record.id;
|
||||
http.post('/api/account/role/', formData)
|
||||
.then(res => {
|
||||
message.success('操作成功');
|
||||
store.formVisible = false;
|
||||
store.fetchRecords()
|
||||
}, () => this.setState({loading: false}))
|
||||
};
|
||||
|
||||
render() {
|
||||
const info = store.record;
|
||||
const {getFieldDecorator} = this.props.form;
|
||||
return (
|
||||
<Modal
|
||||
visible
|
||||
width={800}
|
||||
maskClosable={false}
|
||||
title={store.record.id ? '编辑角色' : '新建角色'}
|
||||
onCancel={() => store.formVisible = false}
|
||||
confirmLoading={this.state.loading}
|
||||
onOk={this.handleSubmit}>
|
||||
<Form labelCol={{span: 6}} wrapperCol={{span: 14}}>
|
||||
<Form.Item required label="角色名称">
|
||||
{getFieldDecorator('name', {initialValue: info['name']})(
|
||||
<Input placeholder="请输入角色名称"/>
|
||||
)}
|
||||
</Form.Item>
|
||||
<Form.Item label="备注信息">
|
||||
{getFieldDecorator('desc', {initialValue: info['desc']})(
|
||||
<Input.TextArea placeholder="请输入角色备注信息"/>
|
||||
)}
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
)
|
||||
}, () => setLoading(false))
|
||||
}
|
||||
}
|
||||
|
||||
export default Form.create()(ComForm)
|
||||
return (
|
||||
<Modal
|
||||
visible
|
||||
width={800}
|
||||
maskClosable={false}
|
||||
title={store.record.id ? '编辑角色' : '新建角色'}
|
||||
onCancel={() => store.formVisible = false}
|
||||
confirmLoading={loading}
|
||||
onOk={handleSubmit}>
|
||||
<Form form={form} initialValues={store.record} labelCol={{span: 6}} wrapperCol={{span: 14}}>
|
||||
<Form.Item required name="name" label="角色名称">
|
||||
<Input placeholder="请输入角色名称"/>
|
||||
</Form.Item>
|
||||
<Form.Item name="desc" label="备注信息">
|
||||
<Input.TextArea placeholder="请输入角色备注信息"/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
)
|
||||
})
|
|
@ -5,10 +5,11 @@
|
|||
*/
|
||||
import React from 'react';
|
||||
import { observer } from 'mobx-react';
|
||||
import { Table, Divider, Modal, message } from 'antd';
|
||||
import { Divider, Modal, message } from 'antd';
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
import http from 'libs/http';
|
||||
import store from './store';
|
||||
import { LinkButton } from "components";
|
||||
import { LinkButton, TableCard, AuthButton } from "components";
|
||||
|
||||
@observer
|
||||
class ComTable extends React.Component {
|
||||
|
@ -59,15 +60,16 @@ class ComTable extends React.Component {
|
|||
};
|
||||
|
||||
render() {
|
||||
let data = store.records;
|
||||
if (store.f_name) {
|
||||
data = data.filter(item => item['name'].toLowerCase().includes(store.f_name.toLowerCase()))
|
||||
}
|
||||
return (
|
||||
<Table
|
||||
<TableCard
|
||||
rowKey="id"
|
||||
title="角色列表"
|
||||
loading={store.isFetching}
|
||||
dataSource={data}
|
||||
dataSource={store.dataSource}
|
||||
onReload={store.fetchRecords}
|
||||
actions={[
|
||||
<AuthButton type="primary" icon={<PlusOutlined/>} onClick={() => store.showForm()}>新建</AuthButton>
|
||||
]}
|
||||
pagination={{
|
||||
showSizeChanger: true,
|
||||
showLessItems: true,
|
||||
|
|
|
@ -5,8 +5,8 @@
|
|||
*/
|
||||
import React from 'react';
|
||||
import { observer } from 'mobx-react';
|
||||
import { Input, Button } from 'antd';
|
||||
import { SearchForm, AuthCard } from 'components';
|
||||
import { Input } from 'antd';
|
||||
import { SearchForm, AuthDiv, Breadcrumb } from 'components';
|
||||
import ComTable from './Table';
|
||||
import ComForm from './Form';
|
||||
import PagePerm from './PagePerm';
|
||||
|
@ -16,23 +16,22 @@ import store from './store';
|
|||
|
||||
export default observer(function () {
|
||||
return (
|
||||
<AuthCard auth="system.role.view">
|
||||
<AuthDiv auth="system.role.view">
|
||||
<Breadcrumb>
|
||||
<Breadcrumb.Item>首页</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>系统管理</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>角色管理</Breadcrumb.Item>
|
||||
</Breadcrumb>
|
||||
<SearchForm>
|
||||
<SearchForm.Item span={8} title="角色名称">
|
||||
<Input allowClear value={store.f_name} onChange={e => store.f_name = e.target.value} placeholder="请输入"/>
|
||||
</SearchForm.Item>
|
||||
<SearchForm.Item span={8}>
|
||||
<Button type="primary" icon="sync" onClick={store.fetchRecords}>刷新</Button>
|
||||
</SearchForm.Item>
|
||||
</SearchForm>
|
||||
<div style={{marginBottom: 16}}>
|
||||
<Button type="primary" icon="plus" onClick={() => store.showForm()}>新建</Button>
|
||||
</div>
|
||||
<ComTable/>
|
||||
{store.formVisible && <ComForm/>}
|
||||
{store.pagePermVisible && <PagePerm/>}
|
||||
{store.deployPermVisible && <DeployPerm/>}
|
||||
{store.hostPermVisible && <HostPerm/>}
|
||||
</AuthCard>
|
||||
)
|
||||
</AuthDiv>
|
||||
);
|
||||
})
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
* Copyright (c) <spug.dev@gmail.com>
|
||||
* Released under the AGPL-3.0 License.
|
||||
*/
|
||||
import { observable } from "mobx";
|
||||
import { observable, computed } from 'mobx';
|
||||
import http from 'libs/http';
|
||||
import codes from './codes';
|
||||
import lds from 'lodash';
|
||||
|
@ -24,6 +24,12 @@ class Store {
|
|||
|
||||
@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
|
||||
}
|
||||
|
||||
constructor() {
|
||||
this.initPermissions()
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue