Browse Source

update sample search components

dev
powersir 1 year ago
parent
commit
62f13ae8ec
7 changed files with 115 additions and 41 deletions
  1. +1
    -1
      src/layout/slide/index.tsx
  2. +1
    -1
      src/pages/custom/product/finished/index.tsx
  3. +22
    -12
      src/pages/custom/product/material/index.tsx
  4. +84
    -20
      src/pages/custom/product/sample/index.tsx
  5. +5
    -5
      src/pages/custom/product/shape/index.tsx
  6. +1
    -1
      src/pages/login/index.tsx
  7. +1
    -1
      src/request/service/auth.ts

+ 1
- 1
src/layout/slide/index.tsx View File

@@ -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()}


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

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


+ 22
- 12
src/pages/custom/product/material/index.tsx View File

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


+ 84
- 20
src/pages/custom/product/sample/index.tsx View File

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


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

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


+ 1
- 1
src/pages/login/index.tsx View File

@@ -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('/');
}; };


+ 1
- 1
src/request/service/auth.ts View File

@@ -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 });
} }
}; };

Loading…
Cancel
Save