基本信息
-
使用arco脚本初始化，并修改以下几个文件
-
各个文件代码如下：
local/index.tsx
const i18n = {
'en-US': {
'menu.list': 'List',
'menu.list.searchTable': 'Search Table',
'searchTable.form.search': 'Search',
'searchTable.form.reset': 'Reset',
'searchTable.columns.id': 'Collection ID',
'searchTable.columns.name': 'Collection Name',
'searchTable.columns.contentType': 'Content genre',
'searchTable.columns.filterType': 'Filter method',
'searchTable.columns.createdTime': 'Creation time',
'searchTable.columns.status': 'Status',
'searchTable.columns.contentNum': 'Content quantity',
'searchTable.columns.operations': 'Operation',
'searchTable.columns.operations.view': 'View',
'searchTable.columns.operations.update': 'Edit',
'searchTable.columns.operations.offline': 'Offline',
'searchTable.columns.operations.online': 'Online',
'searchTable.operations.add': 'New',
'searchTable.operations.upload': 'Bulk upload',
'searchTable.operation.download': 'Download',
'searchForm.id.placeholder': 'Please enter the collection ID',
'searchForm.name.placeholder': 'Please enter the collection name',
'searchForm.all.placeholder': 'all',
'searchForm.username.placeholder': 'Please enter the username',
'searchForm.all.select.placeholder': 'Please select',
'searchForm.phone_number.placeholder': 'Please enter the phone number',
'searchForm.email_address.placeholder': 'Please enter the email',
'searchTable.columns.username': 'Username',
'searchTable.columns.full_name': 'Name',
'searchTable.columns.gender': 'Gender',
'searchTable.columns.phone_number': 'Phone Number',
'searchTable.columns.email_address': 'Email',
'searchTable.columns.account_expired': 'Account Expired',
'searchTable.columns.account_locked': 'Account Locked',
'searchTable.columns.credentials_expired': 'Credentials Expired',
'searchTable.columns.enabled': 'Enabled',
'searchTable.operations.addUser': 'Add User',
},
'zh-CN': {
'menu.list': '列表页',
'menu.list.searchTable': '查询表格',
'searchTable.form.search': '查询',
'searchTable.form.reset': '重置',
'searchTable.columns.id': '集合编号',
'searchTable.columns.name': '集合名称',
'searchTable.columns.contentType': '内容体裁',
'searchTable.columns.filterType': '筛选方式',
'searchTable.columns.createdTime': '创建时间',
'searchTable.columns.status': '状态',
'searchTable.columns.contentNum': '内容量',
'searchTable.columns.operations': '操作',
'searchTable.columns.operations.view': '查看',
'searchTable.columns.operations.update': '修改',
'searchTable.columns.operations.online': '上线',
'searchTable.columns.operations.offline': '下线',
'searchTable.operations.add': '新建',
'searchTable.operations.upload': '批量导入',
'searchTable.operation.download': '下载',
'searchForm.id.placeholder': '请输入集合编号',
'searchForm.name.placeholder': '请输入集合名称',
'searchForm.all.placeholder': '全部',
'searchForm.username.placeholder': '请输入用户名',
'searchForm.all.select.placeholder': '请选择',
'searchForm.phone_number.placeholder': '请输入手机号码',
'searchForm.email_address.placeholder': '请输入邮箱地址',
'searchTable.columns.username': '用户名',
'searchTable.columns.full_name': '姓名',
'searchTable.columns.gender': '性别',
'searchTable.columns.phone_number': '手机号码',
'searchTable.columns.email_address': '邮箱',
'searchTable.columns.account_expired': '账号过期',
'searchTable.columns.account_locked': '账号被锁',
'searchTable.columns.credentials_expired': '密码过期',
'searchTable.columns.enabled': '账号状态',
'searchTable.operations.addUser': '添加用户',
},
};
export default i18n;add-form.tsx
import React, { useContext } from "react";
import { Modal, Button, Switch } from '@arco-design/web-react';
import dayjs from 'dayjs';
import {
Form,
Input,
Select,
DatePicker,
Grid,
} from '@arco-design/web-react';
import { GlobalContext } from '@/context';
import locale from './locale';
import useLocale from '@/utils/useLocale';
import { IconRefresh, IconSearch } from '@arco-design/web-react/icon';
import { ContentType, FilterType, Status } from './constants';
import styles from './style/index.module.less';
const { Row, Col } = Grid;
const { useForm } = Form;
function AddForm(props: any) {
const { lang } = useContext(GlobalContext);
const t = useLocale(locale);
const [form] = useForm();
const handleSubmit = () => {
const values = form.getFieldsValue();
props.onSearch(values);
};
const handleReset = () => {
form.resetFields();
props.onSearch({});
};
const colSpan = lang === 'zh-CN' ? 8 : 12;
return (<>
<Modal
style={{width: 1000}}
title='Modal Title'
visible={props.visible}
onOk={() => props.onOk()}
onCancel={() => props.onOk()}
autoFocus={false}
focusLock={true}
>
<Form form={form} labelCol={{span: 6}} wrapperCol={{span: 16}}>
<Row gutter={20}>
<Col span={8}>
<Form.Item
label="用户名"
field="username"
rules={[
{required: true, message: '请输入用户名'},
{max: 10, message: '用户名的长度不能超过 10'},
]}
>
<Input placeholder="请输入用户名"/>
</Form.Item>
</Col>
<Col span={8}>
<Form.Item
label="姓名"
field="full_name"
rules={[
{required: true, message: '请输入姓名'},
{max: 10, message: '姓名的长度不能超过 10'},
]}
>
<Input placeholder="请输入姓名"/>
</Form.Item>
</Col>
<Col span={8}>
<Form.Item
label="性别"
field="gender"
rules={[{required: true, message: '请选择性别'}]}
>
<Select placeholder="请选择">
<Select.Option value="MALE">男</Select.Option>
<Select.Option value="FEMALE">女</Select.Option>
</Select>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="密码"
field="secret_code"
rules={[
{required: true, message: '请输入密码'},
{min: 5, max: 16, message: '密码长度要在 5 - 16 之间'},
]}
>
<Input.Password placeholder="请输入密码"/>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="确认密码"
field="confirm_secret_code"
rules={[
{required: true, message: '请确认密码'},
{
validator: async (value, callback) => {
return new Promise((resolve) => {
if (value !== form.getFieldValue('secret_code')) {
setTimeout(() => {
callback('两次输入的密码不匹配');
resolve();
}, 1000);
} else {
resolve();
}
})
}
},
]}
>
<Input.Password placeholder="请确认密码"/>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="手机号"
field="phone_number"
rules={[
{
required: true,
message: '请输入手机号',
},
{
match: /^1\d{10}$/,
message: '手机号格式错误',
},
]}
>
<Input placeholder="请输入手机号"/>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="联系邮箱"
field="email_address"
rules={[{type: 'email', message: '邮箱格式不正确'}]}
>
<Input placeholder="请输入联系邮箱"/>
</Form.Item>
</Col>
<>
<Col span={12}>
<Form.Item label="是否锁定" field={'account_locked'} triggerPropName={'checked'}>
<Switch checkedText="是" uncheckedText="否" defaultChecked/>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="账号是否到期" field="account_expired" triggerPropName={'checked'}>
<Switch checkedText="是" uncheckedText="否" defaultChecked/>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="账号是否启用" field="enabled" triggerPropName={'checked'}>
<Switch checkedText="是" uncheckedText="否" defaultChecked/>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="密码是否过期"
field="credentials_expired"
triggerPropName={'checked'}
>
<Switch checkedText="是" uncheckedText="否" defaultChecked/>
</Form.Item>
</Col>
</>
</Row>
</Form>
</Modal>
</>)
}
export default AddForm;form.tsx
import React, { useContext } from 'react';
import dayjs from 'dayjs';
import {
Form,
Input,
Select,
DatePicker,
Button,
Grid,
} from '@arco-design/web-react';
import { GlobalContext } from '@/context';
import locale from './locale';
import useLocale from '@/utils/useLocale';
import { IconRefresh, IconSearch } from '@arco-design/web-react/icon';
import { ContentType, FilterType, Status } from './constants';
import styles from './style/index.module.less';
import AddForm from './add-form';
const { Row, Col } = Grid;
const { useForm } = Form;
function SearchForm(props: {
onSearch: (values: Record<string, any>) => void;
}) {
const { lang } = useContext(GlobalContext);
const t = useLocale(locale);
const [form] = useForm();
const handleSubmit = () => {
const values = form.getFieldsValue();
props.onSearch(values);
};
const handleReset = () => {
form.resetFields();
props.onSearch({});
};
const colSpan = lang === 'zh-CN' ? 8 : 12;
return (
<div className={styles['search-form-wrapper']}>
<Form
form={form}
className={styles['search-form']}
labelAlign="left"
labelCol={{span: 5}}
wrapperCol={{span: 19}}
>
<Row gutter={24}>
<Col span={colSpan}>
<Form.Item label={'ID'} field="id">
<Input placeholder={t['searchForm.id.placeholder']} allowClear/>
</Form.Item>
</Col>
<Col span={colSpan}>
<Form.Item label={t['searchTable.columns.username']} field="username">
<Input
allowClear
placeholder={t['searchForm.username.placeholder']}
/>
</Form.Item>
</Col>
<Col span={colSpan}>
<Form.Item
label={t['searchTable.columns.gender']}
field="gender"
>
<Select
allowClear
placeholder={t['searchForm.all.select.placeholder']}
/>
</Form.Item>
</Col>
<Col span={colSpan}>
<Form.Item
label={t['searchTable.columns.phone_number']}
field="phone_number"
>
<Input
allowClear
placeholder={t['searchForm.phone_number.placeholder']}
/>
</Form.Item>
</Col>
<Col span={colSpan}>
<Form.Item
label={t['searchTable.columns.email_address']}
field="email_address"
>
<Input
allowClear
placeholder={t['searchForm.email_address.placeholder']}
/>
</Form.Item>
</Col>
<Col span={colSpan}>
<Form.Item
label={t['searchTable.columns.account_expired']}
field="account_expired"
>
<Select
allowClear
placeholder={t['searchForm.all.select.placeholder']}
/>
</Form.Item>
</Col>
<Col span={colSpan}>
<Form.Item
label={t['searchTable.columns.account_locked']}
field="account_locked"
>
<Select
allowClear
placeholder={t['searchForm.all.select.placeholder']}
/>
</Form.Item>
</Col>
<Col span={colSpan}>
<Form.Item
label={t['searchTable.columns.credentials_expired']}
field="credentials_expired"
>
<Select
allowClear
placeholder={t['searchForm.all.select.placeholder']}
/>
</Form.Item>
</Col>
<Col span={colSpan}>
<Form.Item
label={t['searchTable.columns.enabled']}
field="enabled"
>
<Select
allowClear
placeholder={t['searchForm.all.select.placeholder']}
/>
</Form.Item>
</Col>
</Row>
</Form>
<div className={styles['right-button']}>
<Button type="primary" icon={<IconSearch/>} onClick={handleSubmit}>
{t['searchTable.form.search']}
</Button>
<Button icon={<IconRefresh/>} onClick={handleReset}>
{t['searchTable.form.reset']}
</Button>
</div>
</div>
);
}
export default SearchForm;index.tsx
import React, { useState, useEffect, useMemo } from 'react';
import {
Table,
Card,
PaginationProps,
Button,
Space,
} from '@arco-design/web-react';
import PermissionWrapper from '@/components/PermissionWrapper';
import { IconDownload, IconPlus } from '@arco-design/web-react/icon';
import axios from 'axios';
import useLocale from '@/utils/useLocale';
import SearchForm from './form';
import locale from './locale';
import styles from './style/index.module.less';
import './mock';
import { getColumns } from './constants';
import AddForm from './add-form';
export const ContentType = ['图文', '横版短视频', '竖版短视频'];
export const FilterType = ['规则筛选', '人工'];
export const Status = ['已上线', '未上线'];
function SearchTable() {
const t = useLocale(locale);
const tableCallback = async (record, type) => {
console.log(record, type);
};
const columns = useMemo(() => getColumns(t, tableCallback), [t]);
const [data, setData] = useState([]);
const [visible, setVisible] = React.useState(false);
const [pagination, setPatination] = useState<PaginationProps>({
sizeCanChange: true,
showTotal: true,
pageSize: 10,
current: 1,
pageSizeChangeResetCurrent: true,
});
const [loading, setLoading] = useState(true);
const [formParams, setFormParams] = useState({});
useEffect(() => {
fetchData();
}, [pagination.current, pagination.pageSize, JSON.stringify(formParams)]);
function fetchData() {
const { current, pageSize } = pagination;
setLoading(true);
axios
.get('/api/list', {
params: {
page: current,
pageSize,
...formParams,
},
})
.then((res) => {
setData(res.data.list);
setPatination({
...pagination,
current,
pageSize,
total: res.data.total,
});
setLoading(false);
});
}
function onChangeTable(pagination) {
setPatination(pagination);
}
function handleSearch(params) {
setFormParams(params);
}
return (
<div>
<AddForm visible={visible} onOk={() => setVisible(false)} />
<Card
title={t['menu.list.searchTable']}
headerStyle={{ border: 'none', height: 'auto', paddingTop: '20px' }}
>
<SearchForm onSearch={handleSearch} />
<PermissionWrapper
requiredPermissions={[
{ resource: 'menu.list.searchTable', actions: ['write'] },
]}
>
<div className={styles['button-group']}>
<Space>
<Button type="primary" icon={<IconPlus />} onClick={() => setVisible(true)}>
{t['searchTable.operations.add']}
</Button>
<Button>{t['searchTable.operations.upload']}</Button>
</Space>
<Space>
<Button icon={<IconDownload />}>
{t['searchTable.operation.download']}
</Button>
</Space>
</div>
</PermissionWrapper>
<Table
rowKey="id"
loading={loading}
onChange={onChangeTable}
pagination={pagination}
columns={columns}
data={data}
/>
</Card>
</div>
);
}
export default SearchTable;
- 点击pro查询表格的
新建 按钮
预期结果
没有警告
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent