Browse Source

update modal,message

dev
powersir 1 year ago
parent
commit
c1e43b5fc0
4 changed files with 35 additions and 74 deletions
  1. +5
    -19
      src/pages/custom/product/finished/index.tsx
  2. +20
    -27
      src/pages/custom/product/material/index.tsx
  3. +5
    -9
      src/pages/custom/product/sample/index.tsx
  4. +5
    -19
      src/pages/custom/product/shape/index.tsx

+ 5
- 19
src/pages/custom/product/finished/index.tsx View File

@@ -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>


+ 20
- 27
src/pages/custom/product/material/index.tsx View File

@@ -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>
</> </>

); );
}; };




+ 5
- 9
src/pages/custom/product/sample/index.tsx View File

@@ -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'] }}


+ 5
- 19
src/pages/custom/product/shape/index.tsx View File

@@ -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>


Loading…
Cancel
Save