@@ -56,7 +56,7 @@ const SlideIndex = () => { | |||||
headerStyle={{ padding: '24px 0', border: 'none' }} | headerStyle={{ padding: '24px 0', border: 'none' }} | ||||
bodyStyle={{ padding: '0 16px' }} | bodyStyle={{ padding: '0 16px' }} | ||||
onClose={() => { | onClose={() => { | ||||
//setCollapsed(true); | |||||
setCollapsed(true); | |||||
}} | }} | ||||
> | > | ||||
{renderMenu()} | {renderMenu()} | ||||
@@ -165,7 +165,7 @@ const FinishedProductPage: React.FC = () => { | |||||
<> | <> | ||||
<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='middle' icon={<PlusOutlined />}> 批量操作 </Button> | |||||
</div> | </div> | ||||
<Table rowKey="id" | <Table rowKey="id" | ||||
scroll={{ x: true }} | scroll={{ x: true }} | ||||
@@ -1,10 +1,10 @@ | |||||
import { Space, Table, Button, Image, Divider } from 'antd'; | |||||
import { Space, Table, Button, Image, Divider, Card } 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 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, DeleteOutlined } from '@ant-design/icons'; | |||||
import { antdUtils } from '@/utils/antd'; | import { antdUtils } from '@/utils/antd'; | ||||
interface Classify { | interface Classify { | ||||
@@ -28,6 +28,7 @@ interface DataType { | |||||
classify: Classify; | classify: Classify; | ||||
} | } | ||||
//素材 | |||||
const TablePage: React.FC = () => { | const TablePage: React.FC = () => { | ||||
const showDeleteConfirm = (item: DataType) => { | const showDeleteConfirm = (item: DataType) => { | ||||
@@ -191,11 +192,13 @@ const TablePage: React.FC = () => { | |||||
const data: Array<DataType> = mData as Array<DataType>; | const data: Array<DataType> = mData as Array<DataType>; | ||||
const [isDisableDelete, setDisableDelete] = useState<boolean>(true) | |||||
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]); | const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]); | ||||
const onSelectChange = (newSelectedRowKeys: React.Key[]) => { | const onSelectChange = (newSelectedRowKeys: React.Key[]) => { | ||||
console.log('selectedRowKeys changed: ', newSelectedRowKeys); | console.log('selectedRowKeys changed: ', newSelectedRowKeys); | ||||
setSelectedRowKeys(newSelectedRowKeys); | setSelectedRowKeys(newSelectedRowKeys); | ||||
setDisableDelete(newSelectedRowKeys.length === 0) | |||||
}; | }; | ||||
const rowSelection: TableRowSelection<DataType> = { | const rowSelection: TableRowSelection<DataType> = { | ||||
@@ -207,7 +210,7 @@ const TablePage: React.FC = () => { | |||||
Table.SELECTION_NONE, | Table.SELECTION_NONE, | ||||
{ | { | ||||
key: 'odd', | key: 'odd', | ||||
text: 'Select Odd Row', | |||||
text: '选择双数行', | |||||
onSelect: (changeableRowKeys) => { | onSelect: (changeableRowKeys) => { | ||||
let newSelectedRowKeys = []; | let newSelectedRowKeys = []; | ||||
newSelectedRowKeys = changeableRowKeys.filter((_, index) => { | newSelectedRowKeys = changeableRowKeys.filter((_, index) => { | ||||
@@ -221,7 +224,7 @@ const TablePage: React.FC = () => { | |||||
}, | }, | ||||
{ | { | ||||
key: 'even', | key: 'even', | ||||
text: 'Select Even Row', | |||||
text: '选择单数行', | |||||
onSelect: (changeableRowKeys) => { | onSelect: (changeableRowKeys) => { | ||||
let newSelectedRowKeys = []; | let newSelectedRowKeys = []; | ||||
newSelectedRowKeys = changeableRowKeys.filter((_, index) => { | newSelectedRowKeys = changeableRowKeys.filter((_, index) => { | ||||
@@ -236,16 +239,23 @@ const TablePage: React.FC = () => { | |||||
], | ], | ||||
}; | }; | ||||
return ( | return ( | ||||
<> | <> | ||||
<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' | |||||
pagination={{ position: ['bottomRight'] }} | |||||
/> | |||||
<div className='flex flex-row'> | |||||
<Card className='basis-1/4 w-[100px] mb-[10px] dark:bg-[rgb(33,41,70)] bg-white roundle-lg px[12px]'> | |||||
</Card> | |||||
<Card className='basis-3/4 mb-[10px] ml-[10px] dark:bg-[rgb(33,41,70)] bg-white roundle-lg px[12px]' bodyStyle={{ | |||||
paddingTop: 0, | |||||
paddingBottom: 0 | |||||
}}> | |||||
<div className="py-[8px] flex flex-row-reverse"> | |||||
<Button className="ml-5" danger size='middle' icon={<DeleteOutlined />} disabled={isDisableDelete}> 批量删除 </Button> | |||||
<Button className="ml-5" type='primary' size='middle' icon={<PlusOutlined />}> 新增素材 </Button> | |||||
</div> | |||||
<Table rowKey="id" rowSelection={rowSelection} scroll={{ x: true }} columns={columns} dataSource={data} className='bg-transparent' | |||||
pagination={{ position: ['bottomRight'] }} | |||||
/> | |||||
</Card> | |||||
</div> | </div> | ||||
</> | </> | ||||
); | ); | ||||
@@ -1,7 +1,6 @@ | |||||
import { Space, Table, message, Avatar } from 'antd'; | |||||
import { Space, Table, Image, Button, Card, Input, TreeSelect } 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 SampleAttrEditor from './components/attr-editor' | import SampleAttrEditor from './components/attr-editor' | ||||
@@ -9,9 +8,50 @@ import MaskPictureEditor from './components/mask-picture-editor'; | |||||
import type { SampleAttribute } from './components/attr-editor' | 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, PlusOutlined, DeleteOutlined, CarryOutOutlined } from '@ant-design/icons'; | |||||
import { antdUtils } from '@/utils/antd'; | import { antdUtils } from '@/utils/antd'; | ||||
const { Search } = Input; | |||||
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 />, | |||||
}, | |||||
], | |||||
}, | |||||
], | |||||
}, | |||||
]; | |||||
interface DataType { | interface DataType { | ||||
id: number; | id: number; | ||||
createTime: string; | createTime: string; | ||||
@@ -61,13 +101,7 @@ const TablePage: React.FC = () => { | |||||
dataIndex: 'oneImgUrl', | dataIndex: 'oneImgUrl', | ||||
key: 'oneImgUrl', | key: 'oneImgUrl', | ||||
render: (value: string) => ( | 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> | |||||
<Image className='bg-[gold] align-middle flex items-center justify-center w-[40px] h-[40px]' src={value} /> | |||||
), | ), | ||||
align: 'center', | align: 'center', | ||||
width: 100, | width: 100, | ||||
@@ -110,11 +144,11 @@ const TablePage: React.FC = () => { | |||||
// setEditData(record); | // setEditData(record); | ||||
setAttrEditorVisible(true); | setAttrEditorVisible(true); | ||||
}}>属性设置</a> | }}>属性设置</a> | ||||
<a | |||||
<a | |||||
onClick={() => { | onClick={() => { | ||||
navigate('/custom/product/sample/editor') | navigate('/custom/product/sample/editor') | ||||
}}>编辑</a> | }}>编辑</a> | ||||
<a | |||||
<a | |||||
onClick={() => { | onClick={() => { | ||||
showDeleteConfirm(record) | showDeleteConfirm(record) | ||||
}}>删除</a> | }}>删除</a> | ||||
@@ -242,6 +276,7 @@ const TablePage: React.FC = () => { | |||||
const [attrEditorVisible, setAttrEditorVisible] = useState(false); | const [attrEditorVisible, setAttrEditorVisible] = useState(false); | ||||
const [maskEditorVisible, setMaskEditorVisible] = useState(false); | const [maskEditorVisible, setMaskEditorVisible] = useState(false); | ||||
const [isDisableDelete, setDisableDelete] = useState<boolean>(true) | |||||
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]); | const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]); | ||||
const navigate = useNavigate(); | const navigate = useNavigate(); | ||||
const cancelHandle = () => { | const cancelHandle = () => { | ||||
@@ -259,6 +294,7 @@ const TablePage: React.FC = () => { | |||||
const onSelectChange = (newSelectedRowKeys: React.Key[]) => { | const onSelectChange = (newSelectedRowKeys: React.Key[]) => { | ||||
console.log('selectedRowKeys changed: ', newSelectedRowKeys); | console.log('selectedRowKeys changed: ', newSelectedRowKeys); | ||||
setSelectedRowKeys(newSelectedRowKeys); | setSelectedRowKeys(newSelectedRowKeys); | ||||
setDisableDelete(newSelectedRowKeys.length === 0) | |||||
}; | }; | ||||
const rowSelection: TableRowSelection<DataType> = { | const rowSelection: TableRowSelection<DataType> = { | ||||
@@ -270,7 +306,7 @@ const TablePage: React.FC = () => { | |||||
Table.SELECTION_NONE, | Table.SELECTION_NONE, | ||||
{ | { | ||||
key: 'odd', | key: 'odd', | ||||
text: 'Select Odd Row', | |||||
text: '选择双数行', | |||||
onSelect: (changeableRowKeys) => { | onSelect: (changeableRowKeys) => { | ||||
let newSelectedRowKeys = []; | let newSelectedRowKeys = []; | ||||
newSelectedRowKeys = changeableRowKeys.filter((_, index) => { | newSelectedRowKeys = changeableRowKeys.filter((_, index) => { | ||||
@@ -284,7 +320,7 @@ const TablePage: React.FC = () => { | |||||
}, | }, | ||||
{ | { | ||||
key: 'even', | key: 'even', | ||||
text: 'Select Even Row', | |||||
text: '选择单数行', | |||||
onSelect: (changeableRowKeys) => { | onSelect: (changeableRowKeys) => { | ||||
let newSelectedRowKeys = []; | let newSelectedRowKeys = []; | ||||
newSelectedRowKeys = changeableRowKeys.filter((_, index) => { | newSelectedRowKeys = changeableRowKeys.filter((_, index) => { | ||||
@@ -298,14 +334,42 @@ const TablePage: React.FC = () => { | |||||
}, | }, | ||||
], | ], | ||||
}; | }; | ||||
const [treeLine, setTreeLine] = useState(true); | |||||
const [showLeafIcon, setShowLeafIcon] = useState(false); | |||||
const [showIcon, setShowIcon] = useState<boolean>(false); | |||||
return ( | return ( | ||||
<div> | <div> | ||||
<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'] }} | |||||
/> | |||||
<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'> | |||||
<TreeSelect | |||||
treeDataSimpleMode | |||||
style={{ width: '100%' }} | |||||
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }} | |||||
treeLine={treeLine && { showLeafIcon }} | |||||
treeData={treeData} | |||||
treeIcon={showIcon} | |||||
size='large' | |||||
placeholder="请选择类目" | |||||
/> | |||||
<Input className='ml-[10px]' | |||||
placeholder='请输入样机名称'/> | |||||
<Button className="ml-5" type='primary' size='large'> 搜索 </Button> | |||||
<Button className="ml-2" danger size='large'> 重置 </Button> | |||||
</div> | |||||
<div className="py-[4px]"> | |||||
<Button className="ml-5" type='primary' size='large' icon={<PlusOutlined />}> 新增样机 </Button> | |||||
<Button className="ml-5" danger size='large' icon={<DeleteOutlined />} disabled={isDisableDelete}> 批量删除 </Button> | |||||
</div> | |||||
</div> | |||||
</Card> | |||||
<Card className='mt-[4px] dark:bg-[rgb(33,41,70)] bg-white roundle-lg px[12px]'> | |||||
<Table rowKey="id" rowSelection={rowSelection} scroll={{ x: true }} columns={columns} dataSource={data} className='bg-transparent' | |||||
pagination={{ position: ['bottomRight'] }} | |||||
/> | |||||
</Card> | |||||
</div> | </div> | ||||
<SampleAttrEditor | <SampleAttrEditor | ||||
onSave={saveAttributeHandle} | onSave={saveAttributeHandle} | ||||
@@ -316,7 +380,7 @@ const TablePage: React.FC = () => { | |||||
<MaskPictureEditor | <MaskPictureEditor | ||||
onSave={saveMaskPictureHandle} | onSave={saveMaskPictureHandle} | ||||
onCancel={()=>{ setMaskEditorVisible(false) }} | |||||
onCancel={() => { setMaskEditorVisible(false) }} | |||||
visible={maskEditorVisible} | visible={maskEditorVisible} | ||||
dataSource={maskPictures} /> | dataSource={maskPictures} /> | ||||
</div> | </div> | ||||
@@ -48,7 +48,7 @@ const ShapePage: React.FC = () => { | |||||
<Image className='bg-[gold] w-[40px] h-[40px]' src={value} /> | <Image className='bg-[gold] w-[40px] h-[40px]' src={value} /> | ||||
), | ), | ||||
align: 'center', | align: 'center', | ||||
width: 130, | |||||
width: 100, | |||||
}, | }, | ||||
{ | { | ||||
title: 'SPU编码', | title: 'SPU编码', | ||||
@@ -60,12 +60,13 @@ const ShapePage: React.FC = () => { | |||||
title: '样机名称', | title: '样机名称', | ||||
dataIndex: 'prototypeName', | dataIndex: 'prototypeName', | ||||
key: 'prototypeName', | key: 'prototypeName', | ||||
width: 150, | |||||
width: 200, | |||||
}, | }, | ||||
{ | { | ||||
title: '类目', | title: '类目', | ||||
key: 'categoryName', | key: 'categoryName', | ||||
dataIndex: 'categoryName' | |||||
dataIndex: 'categoryName', | |||||
width: 150, | |||||
}, | }, | ||||
{ | { | ||||
title: '款式数量', | title: '款式数量', | ||||
@@ -101,7 +102,6 @@ const ShapePage: React.FC = () => { | |||||
</a> | </a> | ||||
</Space> | </Space> | ||||
), | ), | ||||
width: 150, | |||||
}, | }, | ||||
]; | ]; | ||||
@@ -142,7 +142,7 @@ const ShapePage: React.FC = () => { | |||||
<> | <> | ||||
<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='middle' icon={<PlusOutlined />}> 新增款式 </Button> | |||||
</div> | </div> | ||||
<Table rowKey="id" | <Table rowKey="id" | ||||
scroll={{ x: true }} | scroll={{ x: true }} | ||||
@@ -31,7 +31,7 @@ const Login = () => { | |||||
setToken(data.accessToken); | setToken(data.accessToken); | ||||
const [ _, { data: menus } ] = await listMenus(); | const [ _, { data: menus } ] = await listMenus(); | ||||
const [err, {data: profile}] = await getProfile(); | const [err, {data: profile}] = await getProfile(); | ||||
// const [ error, {data: tokenData}] = await rerefshToken(data.refreshToken) | |||||
const [ error, {data: tokenData}] = await rerefshToken(data.refreshToken) | |||||
setCurrentUser(profile) | setCurrentUser(profile) | ||||
navigate('/'); | navigate('/'); | ||||
}; | }; | ||||
@@ -11,6 +11,6 @@ export default { | |||||
return request.post<any>('/app-api/member/auth/logout'); | return request.post<any>('/app-api/member/auth/logout'); | ||||
}, | }, | ||||
rerefshToken: (refreshToken: string) => { | rerefshToken: (refreshToken: string) => { | ||||
return request.post<TokenDTO>('/app-api/member/auth/refresh-token', { refreshToken }); | |||||
return request.post<TokenDTO>(`/app-api/member/auth/refresh-token?refreshToken=${refreshToken}`, { refreshToken }); | |||||
} | } | ||||
}; | }; |