@@ -56,7 +56,7 @@ const SlideIndex = () => { | |||
headerStyle={{ padding: '24px 0', border: 'none' }} | |||
bodyStyle={{ padding: '0 16px' }} | |||
onClose={() => { | |||
//setCollapsed(true); | |||
setCollapsed(true); | |||
}} | |||
> | |||
{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="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> | |||
<Table rowKey="id" | |||
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 { t } from '@/utils/i18n'; | |||
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'; | |||
import { PlusOutlined, ExclamationCircleFilled, DeleteOutlined } from '@ant-design/icons'; | |||
import { antdUtils } from '@/utils/antd'; | |||
interface Classify { | |||
@@ -28,6 +28,7 @@ interface DataType { | |||
classify: Classify; | |||
} | |||
//素材 | |||
const TablePage: React.FC = () => { | |||
const showDeleteConfirm = (item: DataType) => { | |||
@@ -191,11 +192,13 @@ const TablePage: React.FC = () => { | |||
const data: Array<DataType> = mData as Array<DataType>; | |||
const [isDisableDelete, setDisableDelete] = useState<boolean>(true) | |||
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]); | |||
const onSelectChange = (newSelectedRowKeys: React.Key[]) => { | |||
console.log('selectedRowKeys changed: ', newSelectedRowKeys); | |||
setSelectedRowKeys(newSelectedRowKeys); | |||
setDisableDelete(newSelectedRowKeys.length === 0) | |||
}; | |||
const rowSelection: TableRowSelection<DataType> = { | |||
@@ -207,7 +210,7 @@ const TablePage: React.FC = () => { | |||
Table.SELECTION_NONE, | |||
{ | |||
key: 'odd', | |||
text: 'Select Odd Row', | |||
text: '选择双数行', | |||
onSelect: (changeableRowKeys) => { | |||
let newSelectedRowKeys = []; | |||
newSelectedRowKeys = changeableRowKeys.filter((_, index) => { | |||
@@ -221,7 +224,7 @@ const TablePage: React.FC = () => { | |||
}, | |||
{ | |||
key: 'even', | |||
text: 'Select Even Row', | |||
text: '选择单数行', | |||
onSelect: (changeableRowKeys) => { | |||
let newSelectedRowKeys = []; | |||
newSelectedRowKeys = changeableRowKeys.filter((_, index) => { | |||
@@ -236,16 +239,23 @@ const TablePage: React.FC = () => { | |||
], | |||
}; | |||
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> | |||
</> | |||
); | |||
@@ -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 { t } from '@/utils/i18n'; | |||
import { IconBuguang } from '@/assets/icons/buguang'; | |||
import React, { useState } from 'react'; | |||
import type { TableRowSelection } from 'antd/es/table/interface'; | |||
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 { MaskPicture } from './components/mask-picture-editor'; | |||
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'; | |||
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 { | |||
id: number; | |||
createTime: string; | |||
@@ -61,13 +101,7 @@ const TablePage: React.FC = () => { | |||
dataIndex: 'oneImgUrl', | |||
key: 'oneImgUrl', | |||
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', | |||
width: 100, | |||
@@ -110,11 +144,11 @@ const TablePage: React.FC = () => { | |||
// setEditData(record); | |||
setAttrEditorVisible(true); | |||
}}>属性设置</a> | |||
<a | |||
<a | |||
onClick={() => { | |||
navigate('/custom/product/sample/editor') | |||
}}>编辑</a> | |||
<a | |||
<a | |||
onClick={() => { | |||
showDeleteConfirm(record) | |||
}}>删除</a> | |||
@@ -242,6 +276,7 @@ const TablePage: React.FC = () => { | |||
const [attrEditorVisible, setAttrEditorVisible] = useState(false); | |||
const [maskEditorVisible, setMaskEditorVisible] = useState(false); | |||
const [isDisableDelete, setDisableDelete] = useState<boolean>(true) | |||
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]); | |||
const navigate = useNavigate(); | |||
const cancelHandle = () => { | |||
@@ -259,6 +294,7 @@ const TablePage: React.FC = () => { | |||
const onSelectChange = (newSelectedRowKeys: React.Key[]) => { | |||
console.log('selectedRowKeys changed: ', newSelectedRowKeys); | |||
setSelectedRowKeys(newSelectedRowKeys); | |||
setDisableDelete(newSelectedRowKeys.length === 0) | |||
}; | |||
const rowSelection: TableRowSelection<DataType> = { | |||
@@ -270,7 +306,7 @@ const TablePage: React.FC = () => { | |||
Table.SELECTION_NONE, | |||
{ | |||
key: 'odd', | |||
text: 'Select Odd Row', | |||
text: '选择双数行', | |||
onSelect: (changeableRowKeys) => { | |||
let newSelectedRowKeys = []; | |||
newSelectedRowKeys = changeableRowKeys.filter((_, index) => { | |||
@@ -284,7 +320,7 @@ const TablePage: React.FC = () => { | |||
}, | |||
{ | |||
key: 'even', | |||
text: 'Select Even Row', | |||
text: '选择单数行', | |||
onSelect: (changeableRowKeys) => { | |||
let newSelectedRowKeys = []; | |||
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 ( | |||
<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> | |||
<SampleAttrEditor | |||
onSave={saveAttributeHandle} | |||
@@ -316,7 +380,7 @@ const TablePage: React.FC = () => { | |||
<MaskPictureEditor | |||
onSave={saveMaskPictureHandle} | |||
onCancel={()=>{ setMaskEditorVisible(false) }} | |||
onCancel={() => { setMaskEditorVisible(false) }} | |||
visible={maskEditorVisible} | |||
dataSource={maskPictures} /> | |||
</div> | |||
@@ -48,7 +48,7 @@ const ShapePage: React.FC = () => { | |||
<Image className='bg-[gold] w-[40px] h-[40px]' src={value} /> | |||
), | |||
align: 'center', | |||
width: 130, | |||
width: 100, | |||
}, | |||
{ | |||
title: 'SPU编码', | |||
@@ -60,12 +60,13 @@ const ShapePage: React.FC = () => { | |||
title: '样机名称', | |||
dataIndex: 'prototypeName', | |||
key: 'prototypeName', | |||
width: 150, | |||
width: 200, | |||
}, | |||
{ | |||
title: '类目', | |||
key: 'categoryName', | |||
dataIndex: 'categoryName' | |||
dataIndex: 'categoryName', | |||
width: 150, | |||
}, | |||
{ | |||
title: '款式数量', | |||
@@ -101,7 +102,6 @@ const ShapePage: React.FC = () => { | |||
</a> | |||
</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="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> | |||
<Table rowKey="id" | |||
scroll={{ x: true }} | |||
@@ -31,7 +31,7 @@ const Login = () => { | |||
setToken(data.accessToken); | |||
const [ _, { data: menus } ] = await listMenus(); | |||
const [err, {data: profile}] = await getProfile(); | |||
// const [ error, {data: tokenData}] = await rerefshToken(data.refreshToken) | |||
const [ error, {data: tokenData}] = await rerefshToken(data.refreshToken) | |||
setCurrentUser(profile) | |||
navigate('/'); | |||
}; | |||
@@ -11,6 +11,6 @@ export default { | |||
return request.post<any>('/app-api/member/auth/logout'); | |||
}, | |||
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 }); | |||
} | |||
}; |