|
|
@@ -0,0 +1,193 @@ |
|
|
|
import { Space, Table, Form, Button, Card, Input, TreeSelect, Image } from 'antd'; |
|
|
|
import type { ColumnsType } from 'antd/es/table'; |
|
|
|
import { t } from '@/utils/i18n'; |
|
|
|
import React, { useState } from 'react'; |
|
|
|
import { useNavigate } from 'react-router-dom'; |
|
|
|
import { |
|
|
|
ExclamationCircleFilled, |
|
|
|
PlusOutlined, |
|
|
|
CarryOutOutlined, |
|
|
|
SearchOutlined, |
|
|
|
UndoOutlined |
|
|
|
} from '@ant-design/icons'; |
|
|
|
import { antdUtils } from '@/utils/antd'; |
|
|
|
import { ShpopeeProductVO } from '@/models'; |
|
|
|
import mockData from '../../../../../mock/shopeeProduct.json' |
|
|
|
|
|
|
|
const treeData = [ |
|
|
|
{ |
|
|
|
value: 'parent 1', |
|
|
|
title: 'parent 1', |
|
|
|
icon: <CarryOutOutlined />, |
|
|
|
children: [ |
|
|
|
{ |
|
|
|
value: 'parent 1-0', |
|
|
|
title: 'parent 1-0', |
|
|
|
icon: <CarryOutOutlined />, |
|
|
|
children: [ |
|
|
|
{ |
|
|
|
value: 'leaf1', |
|
|
|
title: 'leaf1', |
|
|
|
icon: <CarryOutOutlined />, |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 'leaf2', |
|
|
|
title: 'leaf2', |
|
|
|
icon: <CarryOutOutlined />, |
|
|
|
}, |
|
|
|
], |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 'parent 1-1', |
|
|
|
title: 'parent 1-1', |
|
|
|
icon: <CarryOutOutlined />, |
|
|
|
children: [ |
|
|
|
{ |
|
|
|
value: 'sss', |
|
|
|
title: 'sss', |
|
|
|
icon: <CarryOutOutlined />, |
|
|
|
}, |
|
|
|
], |
|
|
|
}, |
|
|
|
], |
|
|
|
}, |
|
|
|
]; |
|
|
|
|
|
|
|
export default () => { |
|
|
|
|
|
|
|
const showDeleteConfirm = (item: ShpopeeProductVO) => { |
|
|
|
antdUtils.modal?.confirm({ |
|
|
|
title: `确认删除编码为: ${item.spuCode} 的产品吗?`, |
|
|
|
icon: <ExclamationCircleFilled />, |
|
|
|
content: `请注意删除以后不可恢复!`, |
|
|
|
okText: '删除', |
|
|
|
okType: 'danger', |
|
|
|
cancelText: '取消', |
|
|
|
onOk() { |
|
|
|
return new Promise((resolve, reject) => { |
|
|
|
setTimeout(() => { |
|
|
|
antdUtils.message?.open({ |
|
|
|
type: 'success', |
|
|
|
content: '删除成功', |
|
|
|
}); |
|
|
|
resolve(null) |
|
|
|
}, 1000); |
|
|
|
|
|
|
|
}).catch(() => antdUtils.message?.open({ |
|
|
|
type: 'error', |
|
|
|
content: '操作失败', |
|
|
|
})); |
|
|
|
}, |
|
|
|
onCancel() { |
|
|
|
}, |
|
|
|
}); |
|
|
|
}; |
|
|
|
|
|
|
|
const columns: ColumnsType<ShpopeeProductVO> = [ |
|
|
|
{ |
|
|
|
title: '缩略图', |
|
|
|
dataIndex: 'imgUrl', |
|
|
|
key: 'imgUrl', |
|
|
|
render: (value: string) => ( |
|
|
|
<div className='flex justify-center'> |
|
|
|
{value ? ( |
|
|
|
<Image src={value} className='w-[40px] h-[40px] flex items-center rounded-[5%]' /> |
|
|
|
) : null} |
|
|
|
</div> |
|
|
|
), |
|
|
|
align: 'center', |
|
|
|
width: 100, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '产品编码', |
|
|
|
dataIndex: 'spuCode', |
|
|
|
key: 'spuCode', |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '产品名称', |
|
|
|
dataIndex: 'itemName', |
|
|
|
key: 'itemName', |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '类目', |
|
|
|
key: 'catePubName', |
|
|
|
dataIndex: 'catePubName' |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '成品spu', |
|
|
|
dataIndex: 'spuCode', |
|
|
|
key: 'spuCode', |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '是否刊登', |
|
|
|
dataIndex: 'isPublish', |
|
|
|
key: 'isPublish', |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '刊登时间', |
|
|
|
key: 'publishTime', |
|
|
|
dataIndex: 'publishTime' |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: t("QkOmYwne" /* 操作 */), |
|
|
|
key: 'action', |
|
|
|
render: (_, record) => ( |
|
|
|
<Space size="middle"> |
|
|
|
<a onClick={() => { |
|
|
|
}}>编辑</a> |
|
|
|
<a onClick={() => { |
|
|
|
showDeleteConfirm(record) |
|
|
|
}}>删除</a> |
|
|
|
</Space> |
|
|
|
), |
|
|
|
}, |
|
|
|
]; |
|
|
|
|
|
|
|
const [searchFrom] = Form.useForm(); |
|
|
|
const navigate = useNavigate(); |
|
|
|
|
|
|
|
|
|
|
|
const [treeLine, setTreeLine] = useState(true); |
|
|
|
const [showLeafIcon, setShowLeafIcon] = useState(false); |
|
|
|
const [showIcon, setShowIcon] = useState<boolean>(false); |
|
|
|
|
|
|
|
return ( |
|
|
|
<div> |
|
|
|
<div> |
|
|
|
<Card className='mt-[4px] dark:bg-[rgb(33,41,70)] bg-white roundle-lg px[12px]' bodyStyle={{ paddingTop: 4, paddingBottom: 4 }}> |
|
|
|
<div className='flex justify-between content-center'> |
|
|
|
<div className='flex justify-normal items-center'> |
|
|
|
<Form layout='inline' form={searchFrom}> |
|
|
|
<Form.Item name="name" label="所属类目"> |
|
|
|
<TreeSelect |
|
|
|
treeDataSimpleMode |
|
|
|
style={{ width: '100%' }} |
|
|
|
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }} |
|
|
|
treeLine={treeLine && { showLeafIcon }} |
|
|
|
treeData={treeData} |
|
|
|
treeIcon={showIcon} |
|
|
|
size='large' |
|
|
|
placeholder="请选择类目" |
|
|
|
/> |
|
|
|
</Form.Item> |
|
|
|
{/* <Form.Item className='w-[250px]' name="status" label="店铺"> |
|
|
|
<Input placeholder='请输入店铺名称' /> |
|
|
|
</Form.Item> */} |
|
|
|
</Form> |
|
|
|
<Space.Compact className="ml-5"> |
|
|
|
<Button type='primary' size='large' icon={<SearchOutlined />}> 搜索 </Button> |
|
|
|
<Button type='primary' size='large' icon={<UndoOutlined />}> 重置 </Button> |
|
|
|
</Space.Compact> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</Card> |
|
|
|
<Card className='mt-[4px] dark:bg-[rgb(33,41,70)] bg-white roundle-lg px[12px]'> |
|
|
|
<Table rowKey="id" scroll={{ x: true }} columns={columns} dataSource={mockData as ShpopeeProductVO[]} className='bg-transparent' |
|
|
|
pagination={{ position: ['bottomRight'] }} |
|
|
|
/> |
|
|
|
</Card> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
); |
|
|
|
}; |
|
|
|
|