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 { t } from '@/utils/i18n';
import React, { useState } from 'react';
import mData from '../../../../../mock/productListPage.json'
import { PlusOutlined, ExclamationCircleFilled } from '@ant-design/icons';
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 [notificationApi, notificationContextHolder] = notification.useNotification();
const [messageApi, messageContextHolder] = message.useMessage();

const openNotificationWithIcon = (type: NotificationType) => {
notificationApi[type]({
message: '删除成功',
description:
'商品信息已删除',
});
};

const showDeleteConfirm = () => {
confirm({
antdUtils.modal?.confirm({
title: '确认要将该商品删除吗?',
icon: <ExclamationCircleFilled />,
content: '请注意删除以后不可恢复!',
@@ -33,7 +21,7 @@ const FinishedProductPage: React.FC = () => {
onOk() {
return new Promise((resolve, reject) => {
setTimeout(() => {
messageApi.open({
antdUtils.message?.open({
type: 'success',
content: '删除成功',
});
@@ -41,7 +29,7 @@ const FinishedProductPage: React.FC = () => {
}, 1000);
// openNotificationWithIcon('success')

}).catch(() => messageApi.open({
}).catch(() => antdUtils.message?.open({
type: 'error',
content: '操作失败',
}));
@@ -175,8 +163,6 @@ const FinishedProductPage: React.FC = () => {

return (
<>
{notificationContextHolder}
{messageContextHolder}
<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>


+ 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 { t } from '@/utils/i18n';
import { IconBuguang } from '@/assets/icons/buguang';
import React, { useState } from 'react';
import type { TableRowSelection } from 'antd/es/table/interface';
import mData from '../../../../../mock/findMaterialPage.json'
import { PlusOutlined, ExclamationCircleFilled } from '@ant-design/icons';

const { confirm } = Modal;
import { antdUtils } from '@/utils/antd';

interface Classify {
id: number;
@@ -31,10 +29,9 @@ interface DataType {
}

const TablePage: React.FC = () => {
const [messageApi, messageContextHolder] = message.useMessage();

const showDeleteConfirm = (item: DataType) => {
confirm({
antdUtils.modal?.confirm({
title: `确认删除标题为: ${item.materialName} 的素材吗?`,
icon: <ExclamationCircleFilled />,
content: '请注意删除以后不可恢复!',
@@ -44,14 +41,14 @@ const TablePage: React.FC = () => {
onOk() {
return new Promise((resolve, reject) => {
setTimeout(() => {
messageApi.open({
antdUtils.message?.open({
type: 'success',
content: '删除成功',
});
resolve(null)
}, 1000);

}).catch(() => messageApi.open({
}).catch(() => antdUtils.message?.open({
type: 'error',
content: '操作失败',
}));
@@ -69,10 +66,8 @@ const TablePage: React.FC = () => {
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 />} />
)}
<Image src={value} className='w-[40px] h-[40px] flex items-center rounded-[50%]' />
) : null}
</div>
),
align: 'center',
@@ -137,16 +132,16 @@ const TablePage: React.FC = () => {
filterSearch: false,
},
{
title:'描述',
title: '描述',
key: 'materialRemark',
dataIndex: 'materialRemark'
},
{
title: '分辨率',
key: 'materialInfo',
render:(_, record) => (
render: (_, record) => (
<>
{record.materialWidth}px * {record.materialHeight}px
{record.materialWidth}px * {record.materialHeight}px
</>
),
width: 150,
@@ -155,15 +150,15 @@ const TablePage: React.FC = () => {
title: '图片大小',
dataIndex: 'materialSize',
key: 'materialRemark',
render:(value: number) => (
render: (value: number) => (
<>
{value}kb
{value}kb
</>
),
width: 100,
},
{
title:'上传时间',
title: '上传时间',
key: 'createTime',
dataIndex: 'createTime',
width: 200,
@@ -186,8 +181,8 @@ const TablePage: React.FC = () => {
onClick={() => {
showDeleteConfirm(record)
}}>
删除
</a>
删除
</a>
</Space>
),
width: 150,
@@ -244,17 +239,15 @@ const TablePage: React.FC = () => {

return (
<>
{messageContextHolder}
<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'] }}
/>
</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 { t } from '@/utils/i18n';
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 { useNavigate } from 'react-router-dom';
import { ExclamationCircleFilled } from '@ant-design/icons';

const { confirm } = Modal;
import { antdUtils } from '@/utils/antd';

interface DataType {
id: number;
@@ -28,10 +27,8 @@ interface DataType {

const TablePage: React.FC = () => {

const [messageApi, messageContextHolder] = message.useMessage();

const showDeleteConfirm = (item: DataType) => {
confirm({
antdUtils.modal?.confirm({
title: `确认删除标题为: ${item.prototypeName} 的样机吗?`,
icon: <ExclamationCircleFilled />,
content: `请注意删除以后不可恢复!`,
@@ -41,14 +38,14 @@ const TablePage: React.FC = () => {
onOk() {
return new Promise((resolve, reject) => {
setTimeout(() => {
messageApi.open({
antdUtils.message?.open({
type: 'success',
content: '删除成功',
});
resolve(null)
}, 1000);

}).catch(() => messageApi.open({
}).catch(() => antdUtils.message?.open({
type: 'error',
content: '操作失败',
}));
@@ -305,7 +302,6 @@ const TablePage: React.FC = () => {

return (
<div>
{messageContextHolder}
<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'
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 { t } from '@/utils/i18n';
import { IconBuguang } from '@/assets/icons/buguang';
import React, { useState } from 'react';
import mData from '../../../../../mock/findDiySpecimenPage.json'
import shapeData from '../../../../../mock/findSpecimensByPrototypeId.json'
import { PlusOutlined, ExclamationCircleFilled } from '@ant-design/icons';
import type { ShapeProperty, Shape, ProductImage } from '@/models'
import { antdUtils } from '@/utils/antd';

const { confirm } = Modal;

const ShapePage: React.FC = () => {

const [messageApi, messageContextHolder] = message.useMessage();

const showDeleteConfirm = (item: Shape) => {
confirm({
antdUtils.modal?.confirm({
title: `确认删除标题为: ${item.sdParamEmplate.chinaName} 的素材吗?`,
icon: <ExclamationCircleFilled />,
content: '请注意删除以后不可恢复!',
@@ -25,14 +22,14 @@ const ShapePage: React.FC = () => {
onOk() {
return new Promise((resolve, reject) => {
setTimeout(() => {
messageApi.open({
antdUtils.message?.open({
type: 'success',
content: '删除成功',
});
resolve(null)
}, 1000);

}).catch(() => messageApi.open({
}).catch(() => antdUtils.message?.open({
type: 'error',
content: '操作失败',
}));
@@ -139,21 +136,10 @@ const ShapePage: React.FC = () => {
return <Table columns={expandedColumns} dataSource={data} pagination={false} />;
}



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 (
<>
{messageContextHolder}
<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>


Loading…
Cancel
Save