来源 | juejin.im/user/870468939940184
作者 | 前端小月月
背景
最近的你有没有接手的新项目,对这个有什么感觉?我最近接手了一个项目,先不论是否代码行数的多少,仅是思路就很混乱,像是一件衣服在打补丁,而衣服上还有混乱的线网,数据绕来绕去,和断掉的线头,举例说明下
关于以上的问题,我基于以往的项目,整理了一下管理系统的组件结构思路,希望可以在你的项目开发中提供一些帮助
#概述
关于一个管理系统,使用最多的便是增删改查,主要的逻辑是对数据的操作,基于以往的项目可以提取以下部分的公共结构
import React from "react";
import { Form, Input, Button } from "antd";
const SearchDemo = (props) => {
const [form] = Form.useForm();
const onFinish = (values) => {
console.log(values);
props.getListBySearch(values);
};
return (
<Form
layout="inline"
form={form}
name="control-hooks"
style={{ width: 400 }}
onFinish={onFinish}
>
<Form.Item name="nameKey" label="姓名">
<Input placeholder="请输入姓名关键字" />
</Form.Item>
<div>
<Button type="primary" htmlType="submit">
Submit
</Button>
</div>
</Form>
);
};
export default SearchDemo;
复制代码
import React from "react";
import { Button, Table } from "antd";
import EditContent from "./EditContent";
export default function TableList(props) {
const { list = [], total, getListByPage, pageConfig } = props;
const columns = [
{
title: "姓名",
dataIndex: "name",
key: "name"
},
{
title: "年龄",
dataIndex: "age",
key: "age"
},
{
title: "住址",
dataIndex: "address",
key: "address"
},
];
function changPage(page, pageSize) {
getListByPage({ current: page, pageSize });
}
return (
<Table
style={{ marginTop: 20 }}
size="small"
dataSource={list}
columns={columns}
pagination={{
...pageConfig,
total: total,
onChange: changPage
}}
/>
);
}
复制代码
❝列表操作可能同时存在多个弹窗,需对弹窗组件做统一参数处理,利用数据柯里化把父级参数运输到子组件内 ❞
业务逻辑层指index.js组件:负责整个页面的结构和逻辑处理
const [modalProps, setModalProps] = useState(dataSource.length);
复制代码
<Modal
footer={null}
{...modalProps}
maskClosable={false}
onCancel={() => setModalProps({ visible: false })} >
{modalProps.content && modalProps.content(commonProps)} {/* 使用柯里化对数据传递进行处理*/}
</Modal>
复制代码
{
title: "操作",
dataIndex: "operation",
key: "operation",
render: (text, record) => {
return (
<Button
onClick={() =>
setModalProps({
visible: true,
content: (commonProps) => (/*跨级传递父级参数*/
<EditContent record={record} {...commonProps} />
)
})
} >
修改
</Button>
);
}
}
复制代码
import React from "react";
import { Button } from "antd";
export default function EditContent(props) {
const { record, editItem, setModalProps } = props;
const item = { name: "修改后的名字" };
return (
<div>
{item.name}
<Button
onClick={() => {
editItem({ ...record, ...item });
setModalProps({ visible: false });
}} >
修改
</Button>
</div>
);
}
复制代码
根据不同的权限配置,展示不同的列表项
使用对象roleObj的权限配置方案,比if(){}else{}更简介直观
const [roleArr, setRoleArr] = useState([]);
const roleObj = {
0: [],
1: ["address", "operation"],
2: ["name", "age"]
};
。。。
<div>
<Radio.Group
onChange={(e) => setRoleArr(roleObj[e.target.value])}
defaultValue={0}
>
<Radio value={0}>展示全部</Radio>
<Radio value={1}>不展示操作和地址</Radio>
<Radio value={2}>不展示姓名和年龄</Radio>
</Radio.Group>
</div>
复制代码
根据传过来的数组,进行列表项的过滤
<Table
style={{ marginTop: 20 }}
size="small"
dataSource={list}
columns={columns.filter((item) => !roleArr.includes(item.key))}
pagination={{
...pageConfig,
total: total,
onChange: changPage
}}
/>
复制代码
针对前期的痛点,我们一一进行总结 完整代码[1]
modalProps
属性即可❝写代码之前一定要让自己的思路清晰,进行思维碰撞后的你开发起来会更小的得心应手 ❞
期许每个项目组猿们写代码都有一个统一清晰规范的思路,那无论你的换项目,还是交接给其他人都是可以无缝衔接
点个在看支持下