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' }}
bodyStyle={{ padding: '0 16px' }}
onClose={() => {
//setCollapsed(true);
setCollapsed(true);
}}
>
{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="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 }}


+ 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 { 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>
</>
);


+ 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 { 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>


+ 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} />
),
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 }}


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

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


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

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

Loading…
Cancel
Save