parent
a761ea3d0d
commit
72c4fa2c77
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,76 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
Typography,
|
||||
Card,
|
||||
Table,
|
||||
Form,
|
||||
Grid,
|
||||
Input,
|
||||
Select,
|
||||
Button,
|
||||
Space,
|
||||
DatePicker,
|
||||
} from '@arco-design/web-react';
|
||||
import type { TableProps } from '@arco-design/web-react';
|
||||
import styles from './style/index.module.less';
|
||||
|
||||
export interface SearchTableProps extends TableProps {
|
||||
searchFields: any[];
|
||||
}
|
||||
|
||||
const { Item: FormItem, useForm } = Form;
|
||||
const { Row, Col } = Grid;
|
||||
const { RangePicker } = DatePicker;
|
||||
|
||||
function SearchTable(props?: SearchTableProps) {
|
||||
const { columns, data, searchFields } = props || {};
|
||||
const [form] = useForm();
|
||||
|
||||
const handleSearch = () => {
|
||||
//
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
form.resetFields();
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{searchFields && searchFields.length > 0 && (
|
||||
<Form form={form} className={styles.mb24}>
|
||||
<Row gutter={12}>
|
||||
{searchFields.map((item) => {
|
||||
return (
|
||||
<Col flex={item.width || '200px'} key={item.field}>
|
||||
<FormItem field={item.field} noStyle>
|
||||
{item.ele}
|
||||
</FormItem>
|
||||
</Col>
|
||||
);
|
||||
})}
|
||||
<Col flex={1} className={styles.alignRight}>
|
||||
<Space size={12}>
|
||||
<Button type="primary" onClick={handleSearch}>
|
||||
查询
|
||||
</Button>
|
||||
<Button onClick={handleReset}>重置</Button>
|
||||
</Space>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form>
|
||||
)}
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
rowSelection={{
|
||||
type: 'checkbox',
|
||||
checkAll: true,
|
||||
}}
|
||||
border={false}
|
||||
pagePosition="bl"
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default SearchTable;
|
||||
@ -0,0 +1,11 @@
|
||||
.mb24 {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.w200 {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.alignRight {
|
||||
text-align: right;
|
||||
}
|
||||
@ -0,0 +1,13 @@
|
||||
import React from 'react';
|
||||
import { Typography, Card } from '@arco-design/web-react';
|
||||
|
||||
function AlbumWorks() {
|
||||
return (
|
||||
<Card>
|
||||
<Typography.Title heading={6}>这是专辑作品</Typography.Title>
|
||||
<Typography.Text>You can add content here :)</Typography.Text>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default AlbumWorks;
|
||||
@ -0,0 +1,146 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
Input,
|
||||
Select,
|
||||
Button,
|
||||
Avatar,
|
||||
Space,
|
||||
DatePicker,
|
||||
} from '@arco-design/web-react';
|
||||
import { useAsyncEffect } from 'ahooks';
|
||||
import { IconDelete } from '@arco-design/web-react/icon';
|
||||
import SearchTable from '@/components/SearchTable';
|
||||
|
||||
const { RangePicker } = DatePicker;
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '名称',
|
||||
dataIndex: 'name',
|
||||
render: (name) => {
|
||||
return (
|
||||
<Space size={8}>
|
||||
<Avatar size={24} />
|
||||
<span>{name}</span>
|
||||
</Space>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '类型',
|
||||
dataIndex: 'type',
|
||||
},
|
||||
{
|
||||
title: '粉丝数',
|
||||
dataIndex: 'fans',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '专辑数',
|
||||
dataIndex: 'album',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '歌曲数',
|
||||
dataIndex: 'song',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '加入时间',
|
||||
dataIndex: 'time',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'operation',
|
||||
render: (_, record) => (
|
||||
<>
|
||||
<Button type="text">编辑</Button>
|
||||
<Button type="text">权限</Button>
|
||||
<Button type="text" status="danger" icon={<IconDelete />}>
|
||||
删除
|
||||
</Button>
|
||||
</>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const defaultData = [
|
||||
{
|
||||
key: '1',
|
||||
name: 'Jane Doe',
|
||||
type: '个人',
|
||||
fans: '1.2万',
|
||||
album: '2张',
|
||||
song: '30首',
|
||||
time: '2024.05.26',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: 'Jane Doe',
|
||||
type: '个人',
|
||||
fans: '1.2万',
|
||||
album: '2张',
|
||||
song: '30首',
|
||||
time: '2024.05.26',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
name: 'Jane Doe',
|
||||
type: '个人',
|
||||
fans: '1.2万',
|
||||
album: '2张',
|
||||
song: '30首',
|
||||
time: '2024.05.26',
|
||||
},
|
||||
{
|
||||
key: '4',
|
||||
name: 'Jane Doe',
|
||||
type: '个人',
|
||||
fans: '1.2万',
|
||||
album: '2张',
|
||||
song: '30首',
|
||||
time: '2024.05.26',
|
||||
},
|
||||
{
|
||||
key: '5',
|
||||
name: 'Jane Doe',
|
||||
type: '个人',
|
||||
fans: '1.2万',
|
||||
album: '2张',
|
||||
song: '30首',
|
||||
time: '2024.05.26',
|
||||
},
|
||||
];
|
||||
|
||||
const options = [
|
||||
{ label: '个人', value: 0 },
|
||||
{ label: '团体', value: 1 },
|
||||
];
|
||||
const searchFields = [
|
||||
{
|
||||
field: 'q',
|
||||
ele: <Input placeholder="输入搜索内容" allowClear />,
|
||||
},
|
||||
{
|
||||
field: 'q2',
|
||||
ele: <Select placeholder="请选择" options={options} allowClear />,
|
||||
},
|
||||
{
|
||||
field: 'q3',
|
||||
ele: <RangePicker mode="month" allowClear />,
|
||||
},
|
||||
];
|
||||
|
||||
function Artists() {
|
||||
const [data, setData] = useState<any>();
|
||||
|
||||
useAsyncEffect(async () => {
|
||||
setData(defaultData);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<SearchTable searchFields={searchFields} columns={columns} data={data} />
|
||||
);
|
||||
}
|
||||
|
||||
export default Artists;
|
||||
@ -0,0 +1,13 @@
|
||||
import React from 'react';
|
||||
import { Typography, Card } from '@arco-design/web-react';
|
||||
|
||||
function Index() {
|
||||
return (
|
||||
<Card>
|
||||
<Typography.Title heading={6}>这是首页</Typography.Title>
|
||||
<Typography.Text>You can add content here :)</Typography.Text>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default Index;
|
||||
Loading…
Reference in new issue