|
@@ -1,9 +1,163 @@ |
|
|
import { Empty } from 'antd'; |
|
|
|
|
|
|
|
|
import { Space, Tag, Table, Form, Row, Col, Input, InputNumber, Button, Avatar } from 'antd'; |
|
|
|
|
|
import type { ColumnsType } from 'antd/es/table'; |
|
|
|
|
|
import { t } from '@/utils/i18n'; |
|
|
|
|
|
import { IconBuguang } from '@/assets/icons/buguang'; |
|
|
|
|
|
import React, { useState } from 'react'; |
|
|
|
|
|
import type { TableRowSelection } from 'antd/es/table/interface'; |
|
|
|
|
|
|
|
|
|
|
|
interface DataType { |
|
|
|
|
|
id: number; |
|
|
|
|
|
createTime: string; |
|
|
|
|
|
spuCode: string; |
|
|
|
|
|
categoryId: number; |
|
|
|
|
|
prototypeName: string; |
|
|
|
|
|
createId: number; |
|
|
|
|
|
categoryName: string; |
|
|
|
|
|
createName: string; |
|
|
|
|
|
oneImgUrl: string; |
|
|
|
|
|
dictDetails: string[]; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const TablePage: React.FC = () => { |
|
|
|
|
|
|
|
|
|
|
|
const columns: ColumnsType<DataType> = [ |
|
|
|
|
|
{ |
|
|
|
|
|
title: '示例图', |
|
|
|
|
|
dataIndex: 'oneImgUrl', |
|
|
|
|
|
key: 'oneImgUrl', |
|
|
|
|
|
render: (value: string) => ( |
|
|
|
|
|
<div className='flex justify-center'> |
|
|
|
|
|
{value ? ( |
|
|
|
|
|
<img src={value} className='w-[40px] h-[40px] flex items-center rounded-[50%]' /> |
|
|
|
|
|
) : ( |
|
|
|
|
|
<Avatar className='bg-[gold] align-middle flex items-center justify-center w-[40px] h-[40px]' icon={<IconBuguang />} /> |
|
|
|
|
|
)} |
|
|
|
|
|
</div> |
|
|
|
|
|
), |
|
|
|
|
|
align: 'center', |
|
|
|
|
|
width: 100, |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
title: 'SPU编码', |
|
|
|
|
|
dataIndex: 'spuCode', |
|
|
|
|
|
key: 'spuCode', |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
title: '样机名称', |
|
|
|
|
|
dataIndex: 'prototypeName', |
|
|
|
|
|
key: 'prototypeName', |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
title:'类目', |
|
|
|
|
|
key: 'categoryName', |
|
|
|
|
|
dataIndex: 'categoryName' |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
title: '创建人', |
|
|
|
|
|
dataIndex: 'createName', |
|
|
|
|
|
key: 'createName', |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
title:'创建时间', |
|
|
|
|
|
key: 'createTime', |
|
|
|
|
|
dataIndex: 'createTime' |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
title: t("QkOmYwne" /* 操作 */), |
|
|
|
|
|
key: 'action', |
|
|
|
|
|
render: (_, record) => ( |
|
|
|
|
|
<Space size="middle"> |
|
|
|
|
|
<a>蒙版图 </a> |
|
|
|
|
|
<a>属性设置</a> |
|
|
|
|
|
<a>编辑</a> |
|
|
|
|
|
<a>删除</a> |
|
|
|
|
|
</Space> |
|
|
|
|
|
), |
|
|
|
|
|
}, |
|
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
|
|
const data: DataType[] = [ |
|
|
|
|
|
{ |
|
|
|
|
|
id: 77, |
|
|
|
|
|
createTime: "2023-07-21 15:05:59", |
|
|
|
|
|
spuCode: "2-35UD6O", |
|
|
|
|
|
categoryId: 1264, |
|
|
|
|
|
prototypeName: "kfc-test2", |
|
|
|
|
|
createId: 2, |
|
|
|
|
|
categoryName: "男士T恤", |
|
|
|
|
|
createName: "陈相荣✨", |
|
|
|
|
|
oneImgUrl: "http://192.168.10.136:9000/eshop/eshop_img/2023/7/21/20230721150600A003.png", |
|
|
|
|
|
dictDetails: [] |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
id: 76, |
|
|
|
|
|
createTime: "2023-07-13 17:24:25", |
|
|
|
|
|
spuCode: "2-47GEE7", |
|
|
|
|
|
categoryId: 1264, |
|
|
|
|
|
prototypeName: "kfc-test", |
|
|
|
|
|
createId: 2, |
|
|
|
|
|
categoryName: "男士T恤", |
|
|
|
|
|
createName: "陈相荣✨", |
|
|
|
|
|
oneImgUrl: "http://192.168.10.136:9000/eshop/eshop_img/2023/7/13/20230713172425A025.png", |
|
|
|
|
|
dictDetails: [] |
|
|
|
|
|
} |
|
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
|
|
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]); |
|
|
|
|
|
|
|
|
|
|
|
const onSelectChange = (newSelectedRowKeys: React.Key[]) => { |
|
|
|
|
|
console.log('selectedRowKeys changed: ', newSelectedRowKeys); |
|
|
|
|
|
setSelectedRowKeys(newSelectedRowKeys); |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const rowSelection: TableRowSelection<DataType> = { |
|
|
|
|
|
selectedRowKeys, |
|
|
|
|
|
onChange: onSelectChange, |
|
|
|
|
|
selections: [ |
|
|
|
|
|
Table.SELECTION_ALL, |
|
|
|
|
|
Table.SELECTION_INVERT, |
|
|
|
|
|
Table.SELECTION_NONE, |
|
|
|
|
|
{ |
|
|
|
|
|
key: 'odd', |
|
|
|
|
|
text: 'Select Odd Row', |
|
|
|
|
|
onSelect: (changeableRowKeys) => { |
|
|
|
|
|
let newSelectedRowKeys = []; |
|
|
|
|
|
newSelectedRowKeys = changeableRowKeys.filter((_, index) => { |
|
|
|
|
|
if (index % 2 !== 0) { |
|
|
|
|
|
return false; |
|
|
|
|
|
} |
|
|
|
|
|
return true; |
|
|
|
|
|
}); |
|
|
|
|
|
setSelectedRowKeys(newSelectedRowKeys); |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
key: 'even', |
|
|
|
|
|
text: 'Select Even Row', |
|
|
|
|
|
onSelect: (changeableRowKeys) => { |
|
|
|
|
|
let newSelectedRowKeys = []; |
|
|
|
|
|
newSelectedRowKeys = changeableRowKeys.filter((_, index) => { |
|
|
|
|
|
if (index % 2 !== 0) { |
|
|
|
|
|
return true; |
|
|
|
|
|
} |
|
|
|
|
|
return false; |
|
|
|
|
|
}); |
|
|
|
|
|
setSelectedRowKeys(newSelectedRowKeys); |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
], |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const CustomMade = () => { |
|
|
|
|
|
return ( |
|
|
return ( |
|
|
<Empty /> |
|
|
|
|
|
|
|
|
<div> |
|
|
|
|
|
<div className="mt-[16px] dark:bg-[rgb(33,41,70)] rounded-md"> |
|
|
|
|
|
<Table rowSelection={rowSelection} scroll={{ x: true }} columns={columns} dataSource={data} className='bg-transparent' |
|
|
|
|
|
pagination={{ position: ['bottomRight'] }} |
|
|
|
|
|
/> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
); |
|
|
); |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
export default CustomMade; |
|
|
|
|
|
|
|
|
export default TablePage; |