文章目录
使用ProComponents的原因
一般后台管理系统,大部分页面功能都是列表和表单的形式。
即便使用了组件
、等,依旧需要写大量高度重复性的代码,比如列表页通常会有 筛选栏、操作栏、表格区域、和分页栏 四个部分, 新增/编辑 页通常有N+表单项(eg: 输入框、下拉框、级联框、单选按钮、多选按钮等等)。之前也考虑将高重复性的代码抽离成组件,通过配置参数,来实现相对应的功能。
在组件设计阶段,将组件的灵活性和易用性作为首要目标(当然终极目标肯定是要实现基础功能,不然做组件的意义何在),因此将每一个模块作为单独的组件,最终实现了筛选栏、操作栏、表单项三个组件,后来随着业务需求的增加,也在不断扩展组件的能力,目前相对比较成熟,可以满足基础的列表/表单页面功能。
没有的按钮什么的去antd里面找就ok
看下效果图
代码奉上(无接口版本只是静态页面),接口版本稍后
javascript
import { DownOutlined } from '@ant-design/icons';
import type { ProColumns } from '@ant-design/pro-components';
import { ProTable, TableDropdown } from '@ant-design/pro-components';
import { Button, Switch } from 'antd';
import React, { useState } from 'react';
export type TableListItem = {
key: number;
attendanceEnabled: boolean;
name: string;
responsible: string;
};
const tableListDataSource: TableListItem[] = [];
const responsible = ['付小小', '曲丽丽', '林东东', '陈帅帅', '兼某某'];
for (let i = 0; i < 5; i += 1) {
tableListDataSource.push({
key: i,
attendanceEnabled: false,
name: 'AppName',
responsible: responsible[Math.floor(Math.random() * responsible.length)],
});
}
export default function YourComponent() {
const [dataSource, setDataSource] = useState(tableListDataSource);
const handleSwitchChange = (key, checked) => {
console.log(key,checked);
const newData = [...dataSource];
const target = newData.find((item) => key === item.key);
if (target) {
target.attendanceEnabled = checked;
setDataSource(newData);
}
};
const columns: ProColumns<TableListItem>[] = [
{
title: '部门ID',
width: 80,
dataIndex: 'key',
},
{
title: '是否开启考勤',
width: 120,
dataIndex: 'attendanceEnabled',
valueType: 'option',
render: (_, record) => {
return (
<Switch checked={record.attendanceEnabled} onChange={(checked) => handleSwitchChange(record.key, checked)}></Switch>
);
},
},
{
title: '名称',
width: 80,
dataIndex: 'name',
render: (_) => <a>{_}</a>,
},
{
title: '部门负责人',
width: 80,
dataIndex: 'responsible',
valueEnum: {
all: { text: '全部' },
付小小: { text: '付小小' },
曲丽丽: { text: '曲丽丽' },
林东东: { text: '林东东' },
陈帅帅: { text: '陈帅帅' },
兼某某: { text: '兼某某' },
},
},
{
title: '考勤结果推送至群',
width: 180,
key: 'option',
valueType: 'option',
render: () => [
<a key="link">推送至</a>,
<a key="link2">修改负责人</a>,
],
},
];
return (
<ProTable<TableListItem>
dataSource={dataSource}
rowKey="key"
// 分页设置
pagination={{
showQuickJumper: true,
}}
columns={columns}
search={false}
headerTitle="罚款罚款,全部罚款!"
/>
);
}