@@ -1,29 +1,17 @@ | |||||
import { Space, Table, Button, Image, Divider, Badge, Modal, notification, message } from 'antd'; | |||||
import { Space, Table, Button, Image, Divider, Badge } from 'antd'; | |||||
import type { TableColumnsType } from 'antd'; | import type { TableColumnsType } from 'antd'; | ||||
import { t } from '@/utils/i18n'; | import { t } from '@/utils/i18n'; | ||||
import React, { useState } from 'react'; | import React, { useState } from 'react'; | ||||
import mData from '../../../../../mock/productListPage.json' | import mData from '../../../../../mock/productListPage.json' | ||||
import { PlusOutlined, ExclamationCircleFilled } from '@ant-design/icons'; | import { PlusOutlined, ExclamationCircleFilled } from '@ant-design/icons'; | ||||
import type { Product, ProductBase, ProductImage, ProductSku } from '@/models' | import type { Product, ProductBase, ProductImage, ProductSku } from '@/models' | ||||
import { antdUtils } from '@/utils/antd'; | |||||
const { confirm } = Modal; | |||||
type NotificationType = 'success' | 'info' | 'warning' | 'error'; | |||||
//成品 | //成品 | ||||
const FinishedProductPage: React.FC = () => { | const FinishedProductPage: React.FC = () => { | ||||
const [notificationApi, notificationContextHolder] = notification.useNotification(); | |||||
const [messageApi, messageContextHolder] = message.useMessage(); | |||||
const openNotificationWithIcon = (type: NotificationType) => { | |||||
notificationApi[type]({ | |||||
message: '删除成功', | |||||
description: | |||||
'商品信息已删除', | |||||
}); | |||||
}; | |||||
const showDeleteConfirm = () => { | const showDeleteConfirm = () => { | ||||
confirm({ | |||||
antdUtils.modal?.confirm({ | |||||
title: '确认要将该商品删除吗?', | title: '确认要将该商品删除吗?', | ||||
icon: <ExclamationCircleFilled />, | icon: <ExclamationCircleFilled />, | ||||
content: '请注意删除以后不可恢复!', | content: '请注意删除以后不可恢复!', | ||||
@@ -33,7 +21,7 @@ const FinishedProductPage: React.FC = () => { | |||||
onOk() { | onOk() { | ||||
return new Promise((resolve, reject) => { | return new Promise((resolve, reject) => { | ||||
setTimeout(() => { | setTimeout(() => { | ||||
messageApi.open({ | |||||
antdUtils.message?.open({ | |||||
type: 'success', | type: 'success', | ||||
content: '删除成功', | content: '删除成功', | ||||
}); | }); | ||||
@@ -41,7 +29,7 @@ const FinishedProductPage: React.FC = () => { | |||||
}, 1000); | }, 1000); | ||||
// openNotificationWithIcon('success') | // openNotificationWithIcon('success') | ||||
}).catch(() => messageApi.open({ | |||||
}).catch(() => antdUtils.message?.open({ | |||||
type: 'error', | type: 'error', | ||||
content: '操作失败', | content: '操作失败', | ||||
})); | })); | ||||
@@ -175,8 +163,6 @@ const FinishedProductPage: React.FC = () => { | |||||
return ( | return ( | ||||
<> | <> | ||||
{notificationContextHolder} | |||||
{messageContextHolder} | |||||
<div className='mt-[4px] dark:bg-[rgb(33,41,70)] bg-white roundle-lg px[12px]'> | <div className='mt-[4px] dark:bg-[rgb(33,41,70)] bg-white roundle-lg px[12px]'> | ||||
<div className="py-[8px]"> | <div className="py-[8px]"> | ||||
<Button className="ml-5" type='primary' size='large' icon={<PlusOutlined />}> 批量操作 </Button> | <Button className="ml-5" type='primary' size='large' icon={<PlusOutlined />}> 批量操作 </Button> | ||||
@@ -1,13 +1,11 @@ | |||||
import { Space, Tag, Table, Modal, message, Col, Input, InputNumber, Button, Avatar, Divider } from 'antd'; | |||||
import { Space, Table, Button, Image, Divider } from 'antd'; | |||||
import type { ColumnsType } from 'antd/es/table'; | import type { ColumnsType } from 'antd/es/table'; | ||||
import { t } from '@/utils/i18n'; | import { t } from '@/utils/i18n'; | ||||
import { IconBuguang } from '@/assets/icons/buguang'; | |||||
import React, { useState } from 'react'; | import React, { useState } from 'react'; | ||||
import type { TableRowSelection } from 'antd/es/table/interface'; | import type { TableRowSelection } from 'antd/es/table/interface'; | ||||
import mData from '../../../../../mock/findMaterialPage.json' | import mData from '../../../../../mock/findMaterialPage.json' | ||||
import { PlusOutlined, ExclamationCircleFilled } from '@ant-design/icons'; | import { PlusOutlined, ExclamationCircleFilled } from '@ant-design/icons'; | ||||
const { confirm } = Modal; | |||||
import { antdUtils } from '@/utils/antd'; | |||||
interface Classify { | interface Classify { | ||||
id: number; | id: number; | ||||
@@ -31,10 +29,9 @@ interface DataType { | |||||
} | } | ||||
const TablePage: React.FC = () => { | const TablePage: React.FC = () => { | ||||
const [messageApi, messageContextHolder] = message.useMessage(); | |||||
const showDeleteConfirm = (item: DataType) => { | const showDeleteConfirm = (item: DataType) => { | ||||
confirm({ | |||||
antdUtils.modal?.confirm({ | |||||
title: `确认删除标题为: ${item.materialName} 的素材吗?`, | title: `确认删除标题为: ${item.materialName} 的素材吗?`, | ||||
icon: <ExclamationCircleFilled />, | icon: <ExclamationCircleFilled />, | ||||
content: '请注意删除以后不可恢复!', | content: '请注意删除以后不可恢复!', | ||||
@@ -44,14 +41,14 @@ const TablePage: React.FC = () => { | |||||
onOk() { | onOk() { | ||||
return new Promise((resolve, reject) => { | return new Promise((resolve, reject) => { | ||||
setTimeout(() => { | setTimeout(() => { | ||||
messageApi.open({ | |||||
antdUtils.message?.open({ | |||||
type: 'success', | type: 'success', | ||||
content: '删除成功', | content: '删除成功', | ||||
}); | }); | ||||
resolve(null) | resolve(null) | ||||
}, 1000); | }, 1000); | ||||
}).catch(() => messageApi.open({ | |||||
}).catch(() => antdUtils.message?.open({ | |||||
type: 'error', | type: 'error', | ||||
content: '操作失败', | content: '操作失败', | ||||
})); | })); | ||||
@@ -69,10 +66,8 @@ const TablePage: React.FC = () => { | |||||
render: (value: string) => ( | render: (value: string) => ( | ||||
<div className='flex justify-center'> | <div className='flex justify-center'> | ||||
{value ? ( | {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 />} /> | |||||
)} | |||||
<Image src={value} className='w-[40px] h-[40px] flex items-center rounded-[50%]' /> | |||||
) : null} | |||||
</div> | </div> | ||||
), | ), | ||||
align: 'center', | align: 'center', | ||||
@@ -137,16 +132,16 @@ const TablePage: React.FC = () => { | |||||
filterSearch: false, | filterSearch: false, | ||||
}, | }, | ||||
{ | { | ||||
title:'描述', | |||||
title: '描述', | |||||
key: 'materialRemark', | key: 'materialRemark', | ||||
dataIndex: 'materialRemark' | dataIndex: 'materialRemark' | ||||
}, | }, | ||||
{ | { | ||||
title: '分辨率', | title: '分辨率', | ||||
key: 'materialInfo', | key: 'materialInfo', | ||||
render:(_, record) => ( | |||||
render: (_, record) => ( | |||||
<> | <> | ||||
{record.materialWidth}px * {record.materialHeight}px | |||||
{record.materialWidth}px * {record.materialHeight}px | |||||
</> | </> | ||||
), | ), | ||||
width: 150, | width: 150, | ||||
@@ -155,15 +150,15 @@ const TablePage: React.FC = () => { | |||||
title: '图片大小', | title: '图片大小', | ||||
dataIndex: 'materialSize', | dataIndex: 'materialSize', | ||||
key: 'materialRemark', | key: 'materialRemark', | ||||
render:(value: number) => ( | |||||
render: (value: number) => ( | |||||
<> | <> | ||||
{value}kb | |||||
{value}kb | |||||
</> | </> | ||||
), | ), | ||||
width: 100, | width: 100, | ||||
}, | }, | ||||
{ | { | ||||
title:'上传时间', | |||||
title: '上传时间', | |||||
key: 'createTime', | key: 'createTime', | ||||
dataIndex: 'createTime', | dataIndex: 'createTime', | ||||
width: 200, | width: 200, | ||||
@@ -186,8 +181,8 @@ const TablePage: React.FC = () => { | |||||
onClick={() => { | onClick={() => { | ||||
showDeleteConfirm(record) | showDeleteConfirm(record) | ||||
}}> | }}> | ||||
删除 | |||||
</a> | |||||
删除 | |||||
</a> | |||||
</Space> | </Space> | ||||
), | ), | ||||
width: 150, | width: 150, | ||||
@@ -244,17 +239,15 @@ const TablePage: React.FC = () => { | |||||
return ( | return ( | ||||
<> | <> | ||||
{messageContextHolder} | |||||
<div className='mt-[4px] dark:bg-[rgb(33,41,70)] bg-white roundle-lg px[12px]'> | <div className='mt-[4px] dark:bg-[rgb(33,41,70)] bg-white roundle-lg px[12px]'> | ||||
<div className="py-[8px]"> | |||||
<Button className="ml-5" type='primary' size='large' icon={<PlusOutlined/>}> 新增素材 </Button> | |||||
</div> | |||||
<Table rowKey="id" rowSelection={rowSelection} scroll={{ x: true }} columns={columns} dataSource={data} className='bg-transparent' | |||||
<div className="py-[8px]"> | |||||
<Button className="ml-5" type='primary' size='large' icon={<PlusOutlined />}> 新增素材 </Button> | |||||
</div> | |||||
<Table rowKey="id" rowSelection={rowSelection} scroll={{ x: true }} columns={columns} dataSource={data} className='bg-transparent' | |||||
pagination={{ position: ['bottomRight'] }} | pagination={{ position: ['bottomRight'] }} | ||||
/> | /> | ||||
</div> | |||||
</div> | |||||
</> | </> | ||||
); | ); | ||||
}; | }; | ||||
@@ -1,4 +1,4 @@ | |||||
import { Space, Modal, Table, Form, message, Col, Input, InputNumber, Button, Avatar } from 'antd'; | |||||
import { Space, Table, message, Avatar } from 'antd'; | |||||
import type { ColumnsType } from 'antd/es/table'; | import type { ColumnsType } from 'antd/es/table'; | ||||
import { t } from '@/utils/i18n'; | import { t } from '@/utils/i18n'; | ||||
import { IconBuguang } from '@/assets/icons/buguang'; | import { IconBuguang } from '@/assets/icons/buguang'; | ||||
@@ -10,8 +10,7 @@ import type { SampleAttribute } from './components/attr-editor' | |||||
import type { MaskPicture } from './components/mask-picture-editor'; | import type { MaskPicture } from './components/mask-picture-editor'; | ||||
import { useNavigate } from 'react-router-dom'; | import { useNavigate } from 'react-router-dom'; | ||||
import { ExclamationCircleFilled } from '@ant-design/icons'; | import { ExclamationCircleFilled } from '@ant-design/icons'; | ||||
const { confirm } = Modal; | |||||
import { antdUtils } from '@/utils/antd'; | |||||
interface DataType { | interface DataType { | ||||
id: number; | id: number; | ||||
@@ -28,10 +27,8 @@ interface DataType { | |||||
const TablePage: React.FC = () => { | const TablePage: React.FC = () => { | ||||
const [messageApi, messageContextHolder] = message.useMessage(); | |||||
const showDeleteConfirm = (item: DataType) => { | const showDeleteConfirm = (item: DataType) => { | ||||
confirm({ | |||||
antdUtils.modal?.confirm({ | |||||
title: `确认删除标题为: ${item.prototypeName} 的样机吗?`, | title: `确认删除标题为: ${item.prototypeName} 的样机吗?`, | ||||
icon: <ExclamationCircleFilled />, | icon: <ExclamationCircleFilled />, | ||||
content: `请注意删除以后不可恢复!`, | content: `请注意删除以后不可恢复!`, | ||||
@@ -41,14 +38,14 @@ const TablePage: React.FC = () => { | |||||
onOk() { | onOk() { | ||||
return new Promise((resolve, reject) => { | return new Promise((resolve, reject) => { | ||||
setTimeout(() => { | setTimeout(() => { | ||||
messageApi.open({ | |||||
antdUtils.message?.open({ | |||||
type: 'success', | type: 'success', | ||||
content: '删除成功', | content: '删除成功', | ||||
}); | }); | ||||
resolve(null) | resolve(null) | ||||
}, 1000); | }, 1000); | ||||
}).catch(() => messageApi.open({ | |||||
}).catch(() => antdUtils.message?.open({ | |||||
type: 'error', | type: 'error', | ||||
content: '操作失败', | content: '操作失败', | ||||
})); | })); | ||||
@@ -305,7 +302,6 @@ const TablePage: React.FC = () => { | |||||
return ( | return ( | ||||
<div> | <div> | ||||
{messageContextHolder} | |||||
<div className="dark:bg-[rgb(33,41,70)] rounded-md"> | <div className="dark:bg-[rgb(33,41,70)] rounded-md"> | ||||
<Table rowKey="id" rowSelection={rowSelection} scroll={{ x: true }} columns={columns} dataSource={data} className='bg-transparent' | <Table rowKey="id" rowSelection={rowSelection} scroll={{ x: true }} columns={columns} dataSource={data} className='bg-transparent' | ||||
pagination={{ position: ['bottomRight'] }} | pagination={{ position: ['bottomRight'] }} | ||||
@@ -1,21 +1,18 @@ | |||||
import { Space, Table, Button, Image, Divider, message, Modal } from 'antd'; | |||||
import { Space, Table, Button, Image, Divider } from 'antd'; | |||||
import type { TableColumnsType } from 'antd'; | import type { TableColumnsType } from 'antd'; | ||||
import { t } from '@/utils/i18n'; | import { t } from '@/utils/i18n'; | ||||
import { IconBuguang } from '@/assets/icons/buguang'; | |||||
import React, { useState } from 'react'; | import React, { useState } from 'react'; | ||||
import mData from '../../../../../mock/findDiySpecimenPage.json' | import mData from '../../../../../mock/findDiySpecimenPage.json' | ||||
import shapeData from '../../../../../mock/findSpecimensByPrototypeId.json' | import shapeData from '../../../../../mock/findSpecimensByPrototypeId.json' | ||||
import { PlusOutlined, ExclamationCircleFilled } from '@ant-design/icons'; | import { PlusOutlined, ExclamationCircleFilled } from '@ant-design/icons'; | ||||
import type { ShapeProperty, Shape, ProductImage } from '@/models' | import type { ShapeProperty, Shape, ProductImage } from '@/models' | ||||
import { antdUtils } from '@/utils/antd'; | |||||
const { confirm } = Modal; | |||||
const ShapePage: React.FC = () => { | const ShapePage: React.FC = () => { | ||||
const [messageApi, messageContextHolder] = message.useMessage(); | |||||
const showDeleteConfirm = (item: Shape) => { | const showDeleteConfirm = (item: Shape) => { | ||||
confirm({ | |||||
antdUtils.modal?.confirm({ | |||||
title: `确认删除标题为: ${item.sdParamEmplate.chinaName} 的素材吗?`, | title: `确认删除标题为: ${item.sdParamEmplate.chinaName} 的素材吗?`, | ||||
icon: <ExclamationCircleFilled />, | icon: <ExclamationCircleFilled />, | ||||
content: '请注意删除以后不可恢复!', | content: '请注意删除以后不可恢复!', | ||||
@@ -25,14 +22,14 @@ const ShapePage: React.FC = () => { | |||||
onOk() { | onOk() { | ||||
return new Promise((resolve, reject) => { | return new Promise((resolve, reject) => { | ||||
setTimeout(() => { | setTimeout(() => { | ||||
messageApi.open({ | |||||
antdUtils.message?.open({ | |||||
type: 'success', | type: 'success', | ||||
content: '删除成功', | content: '删除成功', | ||||
}); | }); | ||||
resolve(null) | resolve(null) | ||||
}, 1000); | }, 1000); | ||||
}).catch(() => messageApi.open({ | |||||
}).catch(() => antdUtils.message?.open({ | |||||
type: 'error', | type: 'error', | ||||
content: '操作失败', | content: '操作失败', | ||||
})); | })); | ||||
@@ -139,21 +136,10 @@ const ShapePage: React.FC = () => { | |||||
return <Table columns={expandedColumns} dataSource={data} pagination={false} />; | return <Table columns={expandedColumns} dataSource={data} pagination={false} />; | ||||
} | } | ||||
const data: Array<ShapeProperty> = mData as Array<ShapeProperty>; | const data: Array<ShapeProperty> = mData as Array<ShapeProperty>; | ||||
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]); | |||||
const onSelectChange = (newSelectedRowKeys: React.Key[]) => { | |||||
console.log('selectedRowKeys changed: ', newSelectedRowKeys); | |||||
setSelectedRowKeys(newSelectedRowKeys); | |||||
}; | |||||
return ( | return ( | ||||
<> | <> | ||||
{messageContextHolder} | |||||
<div className='mt-[4px] dark:bg-[rgb(33,41,70)] bg-white roundle-lg px[12px]'> | <div className='mt-[4px] dark:bg-[rgb(33,41,70)] bg-white roundle-lg px[12px]'> | ||||
<div className="py-[8px]"> | <div className="py-[8px]"> | ||||
<Button className="ml-5" type='primary' size='large' icon={<PlusOutlined />}> 新增款式 </Button> | <Button className="ml-5" type='primary' size='large' icon={<PlusOutlined />}> 新增款式 </Button> | ||||