React:实现一个增删改查基本管理页面

记录一下最近根据自己写代码的习惯进行了一个改进后的写法调整，主要是为了增强可阅读性与美观性的，实现了增删改查等基础功能，用的react+typescript开发。

import { inject,observer } from 'mobx-react';
import * as React from 'react';
import { Table, Input, Button,Modal, Form, Select,message } from 'antd';
import { FormInstance } from 'antd/lib/form';
import { ExclamationCircleOutlined } from "@ant-design/icons";
import { columns } from './constans';
import { API } from "@/http";
import './style.less';
const { Search } = Input;
const { Option } = Select;
const { confirm } = Modal;
const formRef = React.createRef<FormInstance>();
const layout = {
labelCol: { span: 6 },
wrapperCol: { span: 18 },
};
interface IProps {
children: React.ReactNode;
home: any;
global: any;
route: any;
}
interface IState {
visible: boolean;
dataSource: any[];
typeList: any[];
total:number;
title:string;
isEdit:boolean;
initReqParams:{
page: number;
pageSize: number;
};
editId:number;
search:string;
}
class DataManager extends React.Component<IProps, IState> {
constructor(IProps: any) {
super(IProps);
}
state: IState = {
visible: false,
dataSource: [],
typeList:[],
total: 0,
title: '',
isEdit: false,
editId:undefined,
initReqParams: {
page: 1,
pageSize: 10,
},
search:'',
};
componentDidMount = ()=>{
this.getDataSourceList();
this.getDataType();
}
// 获取数据源类型
getDataType = async ()=>{
try {
const res = await API.getDataType()
if (res.success) {
this.setState({
typeList: res.data,
})
}
} catch (error) {
console.log(error,'error')
}
}
// 获取数据源列表信息
getDataSourceList = async () => {
const {initReqParams, search} = this.state;
const params = {
...initReqParams,
search
};
try {
const res = await API.getDataSourceList(params)
if (res.success) {
this.setState({
dataSource: res.data.list,
total: res.data.total
})
}
} catch (error) {
console.log(error,'error')
}
}
// 分页
onPageChange = (page) => {
const { initReqParams } = this.state;
this.setState({
initReqParams: {
...initReqParams,
page: page,
pageSize: 10,
},
}, () => {
this.getDataSourceList();
})
}
// 搜索字段
changeSearch = (value) =>{
this.setState({
search: value ? value.trim() : "",
}, () => {
this.getDataSourceList();
})
}
// 新增数据源
toAdd = () => {
this.setState({
visible: true,
title:'新增数据源',
isEdit:false,
});
};
// 编辑数据源
toEdit = (record)=>{
this.setState({
visible:true,
title:'编辑数据源',
isEdit:true,
editId: record.id,
},() => {
formRef.current.setFieldsValue({
dataName: record.dataName,
dataType: record.dataType,
describe: record.describe,
url: record.url,
});
});
}
// 删除数据源
toDelete = (id) => {
confirm({
title: "删除后无法恢复，确定删除该数据源吗?",
icon: <ExclamationCircleOutlined />,
okText: "确认",
cancelText: "取消",
onOk: async () => {
try {
const { success, message: msg } = await API.deleteDataSource({id});
if(success) {
message.success('删除成功');
this.getDataSourceList()
} else {
message.error(msg);
}
} catch (error) {
console.log(error,'error')
}
},
onCancel() {
message.error("删除取消");
},
});
};
// 保存新增编辑数据源
okSave = () => {
const {isEdit, editId} = this.state;
formRef.current.validateFields().then((value) => {
const saveObj = {
dataName: value.dataName,
dataType: value.dataType,
describe: value.describe,
url: value.url,
}
if(isEdit){
saveObj['id'] = editId;
}
this.save(saveObj);
})
}
save = async(saveObj)=>{
try{
const { success, message: msg } = await API.toSaveDataSource(saveObj);
if(success) {
message.success('保存成功');
this.setState({
visible: false,
editId: undefined,
isEdit: false,
})
this.getDataSourceList()
} else {
message.error(msg);
}
}catch(error){
console.log(error,"error")
}
}
// 关闭新增编辑模态框
onCancel = () => {
this.setState({
visible: false,
isEdit: false,
editId: undefined,
},()=>{
formRef.current.setFieldsValue({
dataName: undefined,
dataType: undefined,
describe: undefined,
url: undefined,
})
});
};
render() {
const { visible, title, initReqParams, total, dataSource, typeList} = this.state;
const allType = typeList? typeList.map((item) => {
return (
<Option key={item.id} value={item.name}>{item.name}</Option>
);
})
: null;
return (
<div className="pager-data-manager">
<div className="data-manager-content">
<div className="data-manager-header">
<Search
allowClear
placeholder="搜索数据源"
onSearch={(value) => {this.changeSearch(value)}}
style={{ width: 200 }}
/>
<Button type="primary" onClick={this.toAdd.bind(this)}>
添加数据源
</Button>
</div>
<Table
columns={columns({toEdit:this.toEdit, toDelete:this.toDelete})}
dataSource={dataSource}
pagination={{
pageSize: initReqParams.pageSize,
current: initReqParams.page,
total: total,
size: 'small',
showTotal:total =>
`共计 ${total} 条`,
onChange: this.onPageChange,
}}
/>
<Modal
visible={visible}
title={title}
okText="确定"
cancelText="取消"
onCancel={this.onCancel.bind(this)}
onOk={this.okSave.bind(this)}
>
<Form
{...layout}
name="dataRecord"
ref={formRef}
>
<Form.Item
label="来源类型"
name="dataType"
rules={[{ required: true, message: '请选择数据来源类型' }]}
>
<Select
allowClear
placeholder="请选择数据来源类型"
>
{allType}
</Select>
</Form.Item>
<Form.Item
label="数据源名称"
name="dataName"
rules={[
{ required: true, message: '请输入数据源名称' },
{
pattern: /^([0-9]|[a-z]|[A-Z]|[u4e00-u9fa5])+$/ig,
message: "仅支持数字、中英文"
}
]}
>
<Input placeholder='请输入数据源名称'/>
</Form.Item>
<Form.Item
label="URL"
name="url"
rules={[{ required: true, message: '请输入url' },
{type: 'url', message: '请输入正确的url'}]}
>
<Input placeholder='请输入url'/>
</Form.Item>
<Form.Item
label="描述"
name="describe"
rules={[{ message: '描述数据功能，可选输入' }]}
>
<Input.TextArea placeholder='请输入数据功能的描述'/>
</Form.Item>
</Form>
</Modal>
</div>
</div>
);
}
}
export default inject('global')(observer(DataManager))

最后

以上就是灵巧外套为你收集整理的React:实现一个增删改查基本管理页面的全部内容，希望文章能够帮你解决React:实现一个增删改查基本管理页面所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。