来源 | juejin.im/user/870468939940184  

作者 | 前端小月月

背景

最近的你有没有接手的新项目，对这个有什么感觉？我最近接手了一个项目，先不论是否代码行数的多少，仅是思路就很混乱，像是一件衣服在打补丁，而衣服上还有混乱的线网，数据绕来绕去，和断掉的线头，举例说明下

关于补丁

• 没有对数据进行扩展处理，一个值一个变量。例如：获取数据详情返回的多个对象，便依次存储多个对象，这样在参数变更时，便要不停地补充参数，如果你使用的是react，就会发现大量的state还没有注释它是用来干什么的，不管对于维护者，还是初入者都是不友好的，其实我们可以存储在一个变量里，在使用时直接调用对象的参数
• 列表的列表项[1，2，3，4，5]的展示，可能会根据权限展示不同的列表，刚开始是1，2，3，根据==1，==2，==3，后来变成1，2，3，4，就。。。。
• 其实我们根据业务场景是否可以传入一个数组arr=[1,2,3,4],根据includes判断是否在数组内(此处会在列表展示区做详细解释)

关于线网

• 把父级组件的静态数据number=3，和回调方法传给子类，回调方法里使用的却是，子类传回来的父类的静态数据number

关于断掉的线头

• 例如使用antd的Tabs:如果只是单纯的点击切换模块，没有进行模块的特殊处理，则不需要onChange的方法，和状态存储 ，确定我们想要的，避免无效代码

关于以上的问题，我基于以往的项目，整理了一下管理系统的组件结构思路，希望可以在你的项目开发中提供一些帮助

#概述

公共结构

关于一个管理系统，使用最多的便是增删改查，主要的逻辑是对数据的操作，基于以往的项目可以提取以下部分的公共结构

数据流向

• 搜索排序分页通过操作的参数获取，列表的展示数据
• 列表操作区会根据删除或者修改后，重新获取列表数据

零 · 项目准备

• 此次针对 搜索 列表 分页 区域
• 使用react作范例，版本号如下

壹 · 存储搜索参数数据+列表展示区

搜索和分页数据需要统一存储

顶端组件代码和效果展示

搜索组件SearchForm.js

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 (
<Formlayout="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">
          SubmitButton>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 (
<Tablestyle={{ marginTop: 20 }}size="small"dataSource={list}columns={columns}pagination={{...pageConfig,total: total,onChange: changPage
      }}
    />
  );
}复制代码

贰·列表操作区+列表展示区

❝

列表操作可能同时存在多个弹窗，需对弹窗组件做统一参数处理，利用数据柯里化把父级参数运输到子组件内

❞

数据统一管理

业务逻辑层指index.js组件：负责整个页面的结构和逻辑处理

效果展示

数据存储统一管理

• 弹窗数据统一管理

 const [modalProps, setModalProps] = useState(dataSource.length);
复制代码

• 使用柯里化父级传递参数统一管理

    footer={null}
    {...modalProps}
    maskClosable={false}
    onCancel={() => setModalProps({ visible: false })} >
    {modalProps.content && modalProps.content(commonProps)} {/* 使用柯里化对数据传递进行处理*/}
</Modal>复制代码

列表组件新增操作项

 {
title: "操作",
dataIndex: "operation",
key: "operation",
render: (text, record) => {
return (
<ButtononClick={() =>
              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}<ButtononClick={() => {
          editItem({ ...record, ...item });
          setModalProps({ visible: false });
        }}  >
        修改Button>div>
  );
}复制代码

叁 · 列表权限控制

根据不同的权限配置，展示不同的列表项

效果展示

权限配置

使用对象roleObj的权限配置方案，比if(){}else{}更简介直观

const [roleArr, setRoleArr] = useState([]);
const roleObj = {
0: [],
1: ["address", "operation"],
2: ["name", "age"]
  };
。。。