Browse Source

update search components of finished product

dev
powersir 1 year ago
parent
commit
d0ffb8718d
3 changed files with 339 additions and 16 deletions
  1. +234
    -0
      mock/categoryList.json
  2. +105
    -15
      src/pages/custom/product/finished/index.tsx
  3. +0
    -1
      src/pages/custom/product/shape/index.tsx

+ 234
- 0
mock/categoryList.json View File

@@ -0,0 +1,234 @@
[
{
"id": 1,
"parentId": 0,
"categoryName": "婚纱礼服",
"categoryNameEn": "Wedding , Party & Events",
"level": 1,
"isLeaf": 0
},
{
"id": 119,
"parentId": 0,
"categoryName": "珠宝",
"categoryNameEn": "Jewelry",
"level": 1,
"isLeaf": 0
},
{
"id": 284,
"parentId": 0,
"categoryName": "表",
"categoryNameEn": "Watches",
"level": 1,
"isLeaf": 0
},
{
"id": 296,
"parentId": 0,
"categoryName": "玩具与礼物",
"categoryNameEn": "Toys & Gifts",
"level": 1,
"isLeaf": 0
},
{
"id": 494,
"parentId": 0,
"categoryName": "安全与监控",
"categoryNameEn": "Security & Surveillance",
"level": 1,
"isLeaf": 0
},
{
"id": 602,
"parentId": 0,
"categoryName": "消费类电子",
"categoryNameEn": "Electronics",
"level": 1,
"isLeaf": 0
},
{
"id": 786,
"parentId": 0,
"categoryName": "计算机和网络",
"categoryNameEn": "Computers & Networking",
"level": 1,
"isLeaf": 0
},
{
"id": 900,
"parentId": 0,
"categoryName": "办公文教 & 工商业",
"categoryNameEn": "Office & School & Business & Industrial",
"level": 1,
"isLeaf": 0
},
{
"id": 1180,
"parentId": 0,
"categoryName": "服装",
"categoryNameEn": "Apparel",
"level": 1,
"isLeaf": 0
},
{
"id": 1338,
"parentId": 0,
"categoryName": "健康与美容",
"categoryNameEn": "Health & Beauty",
"level": 1,
"isLeaf": 0
},
{
"id": 1681,
"parentId": 0,
"categoryName": "家居与花园",
"categoryNameEn": "Home & Garden",
"level": 1,
"isLeaf": 0
},
{
"id": 2376,
"parentId": 0,
"categoryName": "运动与户外产品",
"categoryNameEn": "Sports & Outdoors",
"level": 1,
"isLeaf": 0
},
{
"id": 2890,
"parentId": 0,
"categoryName": "其他产品",
"categoryNameEn": "Everything Else",
"level": 1,
"isLeaf": 0
},
{
"id": 3115,
"parentId": 0,
"categoryName": "手机和手机附件",
"categoryNameEn": "Cell Phones & Accessories",
"level": 1,
"isLeaf": 0
},
{
"id": 3215,
"parentId": 0,
"categoryName": "数码相机、摄影器材",
"categoryNameEn": "Cameras & Photo",
"level": 1,
"isLeaf": 0
},
{
"id": 3295,
"parentId": 0,
"categoryName": "箱包及箱包辅料",
"categoryNameEn": "Bags, Luggage & Accessories",
"level": 1,
"isLeaf": 0
},
{
"id": 3343,
"parentId": 0,
"categoryName": "电玩游戏",
"categoryNameEn": "Games & Accessories",
"level": 1,
"isLeaf": 0
},
{
"id": 3378,
"parentId": 0,
"categoryName": "时尚配件",
"categoryNameEn": "Fashion Accessories",
"level": 1,
"isLeaf": 0
},
{
"id": 3427,
"parentId": 0,
"categoryName": "鞋类及鞋类辅料",
"categoryNameEn": "Shoes & Accessories",
"level": 1,
"isLeaf": 0
},
{
"id": 3477,
"parentId": 0,
"categoryName": "母婴用品",
"categoryNameEn": "Baby, Kids & Maternity",
"level": 1,
"isLeaf": 0
},
{
"id": 3702,
"parentId": 0,
"categoryName": "汽车、摩托车",
"categoryNameEn": "Automobiles & Motorcycles",
"level": 1,
"isLeaf": 0
},
{
"id": 4093,
"parentId": 0,
"categoryName": "乐器",
"categoryNameEn": "Musical Instruments",
"level": 1,
"isLeaf": 0
},
{
"id": 4177,
"parentId": 0,
"categoryName": "照明灯饰",
"categoryNameEn": "Lights & Lighting",
"level": 1,
"isLeaf": 0
},
{
"id": 4263,
"parentId": 0,
"categoryName": "发制品",
"categoryNameEn": "Hair Products",
"level": 1,
"isLeaf": 0
},
{
"id": 4343,
"parentId": 0,
"categoryName": "战术装备",
"categoryNameEn": "Tactical Gear",
"level": 1,
"isLeaf": 0
},
{
"id": 4401,
"parentId": 0,
"categoryName": "家用电器",
"categoryNameEn": "Household Appliances",
"level": 1,
"isLeaf": 0
},
{
"id": 4555,
"parentId": 0,
"categoryName": "定制箱包",
"categoryNameEn": "Customized Bags",
"level": 1,
"isLeaf": 0
},
{
"id": 4556,
"parentId": 0,
"categoryName": "特定专用",
"categoryNameEn": "Dhtrading",
"level": 1,
"isLeaf": 0
},
{
"id": 4562,
"parentId": 0,
"categoryName": "柔性定制",
"categoryNameEn": "diy",
"level": 1,
"isLeaf": 2
}
]

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

@@ -1,15 +1,60 @@
import { Space, Table, Button, Image, Divider, Badge } from 'antd';
import type { TableColumnsType } from 'antd';
import { Space, Table, Button, Image, Divider, Badge, Card, Input, Select, DatePicker, Cascader } from 'antd';
import type { TableColumnsType, DatePickerProps } 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 { PlusOutlined, ExclamationCircleFilled, SearchOutlined,UndoOutlined } from '@ant-design/icons';
import type { Product, ProductBase, ProductImage, ProductSku } from '@/models'
import { antdUtils } from '@/utils/antd';
import customParseFormat from 'dayjs/plugin/customParseFormat';

import dayjs from 'dayjs';
dayjs.extend(customParseFormat);

const { RangePicker } = DatePicker;
const dateFormat = 'YYYY/MM/DD';

const options = [
{
value: '0',
label: 'SPU编码',
},
{
value: '1',
label: '商品标题',
},
{
value: '2',
label: '原SPU编码',
},
];


interface Option {
value: string;
label: string;
children?: Option[];
isLeaf?: boolean;
}

const categoryOptions: Option[] = [
{
value: '1',
label: '婚纱礼服',
isLeaf: false,
},
{
value: '119',
label: '珠宝',
isLeaf: false,
},
];

//成品
const FinishedProductPage: React.FC = () => {

const [optionsList, setOptions] = useState<Option[]>(categoryOptions);

const showDeleteConfirm = () => {
antdUtils.modal?.confirm({
title: '确认要将该商品删除吗?',
@@ -161,22 +206,67 @@ const FinishedProductPage: React.FC = () => {

const data: Array<Product> = mData as Array<Product>;

const onChange = (value: (string | number)[], selectedOptions: Option[]) => {
console.log(value, selectedOptions);
};
const loadData = (selectedOptions: Option[]) => {
const targetOption = selectedOptions[selectedOptions.length - 1];
// load options lazily
setTimeout(() => {
targetOption.children = [
{
label: `${targetOption.label} Dynamic 1`,
value: 'dynamic1',
},
{
label: `${targetOption.label} Dynamic 2`,
value: 'dynamic2',
},
];
setOptions([...optionsList]);
}, 1000);
};

const onKeywordsTypeChanged = (value: string, selectedOptions: Option | Option[]) => {
console.log(value, selectedOptions);
};

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='middle' icon={<PlusOutlined />}> 批量操作 </Button>
</div>
<Table rowKey="id"
scroll={{ x: true }}
columns={columns}
expandable={{ expandedRowRender: expandedColumnsRender, defaultExpandedRowKeys: ['0'] }}
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-normal items-center'>
<Cascader options={optionsList} style={{ width: '20%' }} loadData={loadData} onChange={onChange} placeholder="请选择商品类目" changeOnSelect/>
<Space.Compact className='ml-[5px]'>
<Select defaultValue="0" options={options} onChange={onKeywordsTypeChanged}/>
<Input allowClear/>

</Space.Compact>
<RangePicker
className='ml-[5px]'
format={dateFormat}
/>
<Space.Compact>
<Button className="ml-5" type='primary' size='large' icon={<SearchOutlined />}> 搜索 </Button>
<Button type='primary' size='large' icon={<UndoOutlined />}> 重置 </Button>
</Space.Compact>
<div className="py-[4px]">
<Button className="ml-5" type='primary' size='large' icon={<PlusOutlined />}> 批量操作 </Button>
</div>
</div>
</Card>

<Card className='mt-[4px] dark:bg-[rgb(33,41,70)] bg-white roundle-lg px[12px]'>
<Table rowKey="id"
scroll={{ x: true }}
columns={columns}
expandable={{ expandedRowRender: expandedColumnsRender, defaultExpandedRowKeys: ['0'] }}
dataSource={data}
className='bg-transparent'
pagination={{ position: ['bottomRight'] }} />
</Card>
</div>
</>

);
};



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

@@ -214,7 +214,6 @@ const ShapePage: React.FC = () => {
pagination={{ position: ['bottomRight'] }} />
</Card>
</>

);
};



Loading…
Cancel
Save