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))