update search components of finished product

mock/categoryList.json

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

src/pages/custom/product/finished/index.tsx

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

src/pages/custom/product/shape/index.tsx

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