update material & shape search operation

src/layout/index.tsx

@@ -108,7 +108,7 @@ const BasicLayout: React.FC = () => {
         handle: {
           parentPaths: ['/custom', '/custom/product', '/custom/product/sample'],
           path: '/*/custom/product/sample/editor',
-          name: '蒙版编辑',
+          name: '蒙板编辑',
         },
       }
     ]);

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

@@ -1,11 +1,14 @@
-import { Space, Table, Button, Image, Divider, Card } from 'antd';
-import type { ColumnsType } from 'antd/es/table';
+import React, { useState, useRef } from 'react';
+import { Space, Table, Button, Image, Divider, Card, Input } from 'antd';
+import type { InputRef } from 'antd';
+import type { ColumnType, ColumnsType } from 'antd/es/table';
+import type { FilterConfirmProps, TableRowSelection } from 'antd/es/table/interface';
 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, DeleteOutlined } from '@ant-design/icons';
+import { PlusOutlined, ExclamationCircleFilled, DeleteOutlined, SearchOutlined } from '@ant-design/icons';
 import { antdUtils } from '@/utils/antd';
+import mData from '../../../../../mock/findMaterialPage.json'
+
+const { Search } = Input;
 
 interface Classify {
   id: number;
@@ -28,6 +31,53 @@ interface DataType {
   classify: Classify;
 }
 
+type DataIndex = keyof DataType;
+
+const filters = [
+  {
+    text: '全部素材',
+    value: '1',
+  },
+  {
+    text: '卡通',
+    value: '2',
+    children: [
+      {
+        text: '海贼王',
+        value: '20',
+      },
+      {
+        text: '火影忍者',
+        value: '21',
+      },
+      {
+        text: '死神',
+        value: '22',
+      },
+    ],
+  },
+  {
+    text: '风景',
+    value: '3',
+  },
+  {
+    text: '插图',
+    value: '4',
+  },
+  {
+    text: '模型',
+    value: '5',
+  },
+  {
+    text: '图标',
+    value: '6',
+  },
+  {
+    text: '其他',
+    value: '52',
+  },
+]
+
 //素材
 const TablePage: React.FC = () => {
 
@@ -59,6 +109,64 @@ const TablePage: React.FC = () => {
     });
   };
 
+  const [searchText, setSearchText] = useState('');
+  const [searchedColumn, setSearchedColumn] = useState('');
+  const searchInput = useRef<InputRef>(null);
+
+  const [onSearching, setOnSearching] = useState(false);
+
+  const handleSearch = (
+    selectedKeys: string[],
+    confirm: (param?: FilterConfirmProps) => void,
+    dataIndex: DataIndex,
+  ) => {
+    setOnSearching(true);
+    setTimeout(()=>{
+      setOnSearching(false);
+      confirm();
+    }, 1000)
+    // confirm();
+    setSearchText(selectedKeys[0]);
+    setSearchedColumn(dataIndex);
+  };
+
+  const handleReset = (clearFilters: () => void) => {
+    clearFilters();
+    setSearchText('');
+  };
+
+  const getColumnSearchProps = (dataIndex: DataIndex): ColumnType<DataType> => ({
+    filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters, close }) => (
+      <div style={{ padding: 8 }} onKeyDown={(e) => e.stopPropagation()}>
+        <Search
+          ref={searchInput}
+          placeholder={"输入图片标题"}
+          value={selectedKeys[0]}
+          onChange={(e) => setSelectedKeys(e.target.value ? [e.target.value] : [])}
+          onSearch={() => handleSearch(selectedKeys as string[], confirm, dataIndex)}
+          allowClear
+          style={{ marginBottom: 8, display: 'block' }}
+          enterButton="搜索" 
+          size="large" 
+          loading={onSearching}
+        />
+      </div>
+    ),
+    filterIcon: (filtered: boolean) => (
+      <SearchOutlined style={{ color: filtered ? '#1677ff' : undefined }} />
+    ),
+    onFilter: (value, record) =>
+      record[dataIndex]
+        .toString()
+        .toLowerCase()
+        .includes((value as string).toLowerCase()),
+    onFilterDropdownOpenChange: (visible) => {
+      if (visible) {
+        setTimeout(() => searchInput.current?.select(), 100);
+      }
+    },
+  });
+
   const columns: ColumnsType<DataType> = [
     {
       title: '图片',
@@ -79,56 +187,14 @@ const TablePage: React.FC = () => {
       dataIndex: 'materialName',
       key: 'materialName',
       width: 150,
+      ...getColumnSearchProps('materialName'),
     },
     {
       title: '分类',
       dataIndex: ['classify', 'classifyName'],
       key: 'classify',
       width: 80,
-      filters: [
-        {
-          text: '全部素材',
-          value: '1',
-        },
-        {
-          text: '卡通',
-          value: '2',
-          children: [
-            {
-              text: '海贼王',
-              value: '20',
-            },
-            {
-              text: '火影忍者',
-              value: '21',
-            },
-            {
-              text: '死神',
-              value: '22',
-            },
-          ],
-        },
-        {
-          text: '风景',
-          value: '3',
-        },
-        {
-          text: '插图',
-          value: '4',
-        },
-        {
-          text: '模型',
-          value: '5',
-        },
-        {
-          text: '图标',
-          value: '6',
-        },
-        {
-          text: '其他',
-          value: '52',
-        },
-      ],
+      filters,
       filterMode: 'tree',
       filterSearch: false,
     },
@@ -190,6 +256,8 @@ const TablePage: React.FC = () => {
     },
   ];
 
+
+
   const data: Array<DataType> = mData as Array<DataType>;
 
   const [isDisableDelete, setDisableDelete] = useState<boolean>(true)

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

@@ -1,13 +1,52 @@
-import { Space, Table, Button, Image, Divider } from 'antd';
+import { Space, Table, Button, Image, Divider, Card, Input, TreeSelect  } from 'antd';
 import type { TableColumnsType } from 'antd';
 import { t } from '@/utils/i18n';
 import React, { useState } from 'react';
 import mData from '../../../../../mock/findDiySpecimenPage.json'
 import shapeData from '../../../../../mock/findSpecimensByPrototypeId.json'
-import { PlusOutlined, ExclamationCircleFilled } from '@ant-design/icons';
+import { PlusOutlined, ExclamationCircleFilled, CarryOutOutlined } from '@ant-design/icons';
 import type { ShapeProperty, Shape, ProductImage } from '@/models'
 import { antdUtils } from '@/utils/antd';
 
+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 />,
+          },
+        ],
+      },
+    ],
+  },
+];
+
 
 const ShapePage: React.FC = () => {
 
@@ -137,21 +176,43 @@ const ShapePage: React.FC = () => {
   }
 
   const data: Array<ShapeProperty> = mData as Array<ShapeProperty>;
-
+  const [treeLine, setTreeLine] = useState(true);
+  const [showLeafIcon, setShowLeafIcon] = useState(false);
+  const [showIcon, setShowIcon] = useState<boolean>(false);
   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-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' 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>
     </>
 
   );