feat(search): searchComponent

src/components/SearchComponent/index.tsx

@@ -12,9 +12,10 @@ import {
   PreviewText,
   Select,
   Space,
+  TreeSelect,
 } from '@formily/antd';
 import type { Field, FieldDataSource } from '@formily/core';
-import { createForm, onFieldReact } from '@formily/core';
+import { createForm, onFieldReact, onFieldValueChange } from '@formily/core';
 import GroupNameControl from '@/components/SearchComponent/GroupNameControl';
 import {
   DeleteOutlined,
@@ -95,6 +96,7 @@ const SchemaField = createSchemaField({
     PreviewText,
     GroupNameControl,
     Space,
+    TreeSelect,
   },
 });
 
@@ -181,9 +183,33 @@ const SearchComponent = <T extends Record<string, any>>(props: Props<T>) => {
               });
               f.setFieldState(typeFiled.query('.value'), async (state) => {
                 state.componentType = 'Select';
-                state.loading = true;
+                // state.loading = true;
                 state.dataSource = option;
-                state.loading = false;
+                // state.loading = false;
+              });
+            } else if (_field?.valueType === 'treeSelect') {
+              let option: { label: any; value: any }[] | FieldDataSource | undefined = [];
+              if (_field?.valueEnum) {
+                option = Object.values(_field?.valueEnum || {}).map((item) => ({
+                  label: item.text,
+                  value: item.status,
+                }));
+              } else if (_field?.request) {
+                option = await _field.request();
+              }
+              f.setFieldState(typeFiled.query('.termType'), (_state) => {
+                _state.value = 'eq';
+              });
+              f.setFieldState(typeFiled.query('.value'), (state) => {
+                state.componentType = 'TreeSelect';
+                state.dataSource = option;
+                console.log(option, 'optin');
+                state.componentProps = {
+                  ..._field.fieldProps,
+                  treeNodeFilterProp: 'name',
+                  // filterOption: (input: string, option: any) =>
+                  //   option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0,
+                };
               });
             } else if (_field?.valueType === 'digit') {
               f.setFieldState(typeFiled.query('.value'), async (state) => {
@@ -211,6 +237,11 @@ const SearchComponent = <T extends Record<string, any>>(props: Props<T>) => {
               });
             }
           });
+          onFieldValueChange('*.*.column', (field1, form1) => {
+            form1.setFieldState(field1.query('.value'), (state1) => {
+              state1.value = null;
+            });
+          });
         },
       }),
     [target],

src/pages/device/Instance/index.tsx

@@ -1,10 +1,10 @@
-import {PageContainer} from '@ant-design/pro-layout';
-import type {ActionType, ProColumns} from '@jetlinks/pro-table';
-import type {DeviceInstance} from '@/pages/device/Instance/typings';
+import { PageContainer } from '@ant-design/pro-layout';
+import type { ActionType, ProColumns } from '@jetlinks/pro-table';
+import type { DeviceInstance } from '@/pages/device/Instance/typings';
 import moment from 'moment';
-import {Badge, Button, Dropdown, Menu, message, Tooltip} from 'antd';
-import {useEffect, useRef, useState} from 'react';
-import {useHistory, useIntl} from 'umi';
+import { Badge, Button, Dropdown, Menu, message, Tooltip } from 'antd';
+import { useEffect, useRef, useState } from 'react';
+import { useHistory, useIntl } from 'umi';
 import {
   CheckCircleOutlined,
   DeleteOutlined,
@@ -16,20 +16,22 @@ import {
   StopOutlined,
   SyncOutlined,
 } from '@ant-design/icons';
-import {model} from '@formily/reactive';
+import { model } from '@formily/reactive';
 import Service from '@/pages/device/Instance/service';
-import type {MetadataItem} from '@/pages/device/Product/typings';
+import type { MetadataItem } from '@/pages/device/Product/typings';
 import Save from './Save';
 import Export from './Export';
 import Import from './Import';
 import Process from './Process';
 import SearchComponent from '@/components/SearchComponent';
-import {PermissionButton, ProTableCard} from '@/components';
+import { PermissionButton, ProTableCard } from '@/components';
 import SystemConst from '@/utils/const';
 import Token from '@/utils/token';
 import DeviceCard from '@/components/ProTableCard/CardItems/device';
-import {getMenuPathByParams, MENUS_CODE} from '@/utils/menu';
-import {useLocation} from '@/hooks';
+import { getMenuPathByParams, MENUS_CODE } from '@/utils/menu';
+import { useLocation } from '@/hooks';
+import { service as deptService } from '@/pages/system/Department';
+import { service as categoryService } from '@/pages/device/Category';
 
 export const statusMap = new Map();
 statusMap.set('在线', 'success');
@@ -254,6 +256,98 @@ const Instance = () => {
       filterMultiple: false,
     },
     {
+      dataIndex: 'categoryId',
+      title: '产品分类',
+      valueType: 'treeSelect',
+      hideInTable: true,
+      fieldProps: {
+        fieldNames: {
+          label: 'name',
+          value: 'id',
+        },
+      },
+      request: () =>
+        categoryService
+          .queryTree({
+            paging: false,
+          })
+          .then((resp: any) => resp.result),
+    },
+    {
+      dataIndex: 'productId$product-info',
+      title: '接入方式',
+      valueType: 'select',
+      hideInTable: true,
+      request: () =>
+        service.queryGatewayList().then((resp) =>
+          resp.result.map((item: any) => ({
+            label: item.name,
+            value: `accessId is ${item.id}`,
+          })),
+        ),
+    },
+    {
+      dataIndex: 'deviceType',
+      title: '设备类型',
+      valueType: 'select',
+      hideInTable: true,
+      valueEnum: {
+        device: {
+          text: '直连设备',
+          status: 'device',
+        },
+        childrenDevice: {
+          text: '网关子设备',
+          status: 'childrenDevice',
+        },
+        gateway: {
+          text: '网关设备',
+          status: 'gateway',
+        },
+      },
+    },
+    {
+      dataIndex: 'id$dim-assets',
+      title: '所属部门',
+      valueType: 'treeSelect',
+      hideInTable: true,
+      fieldProps: {
+        fieldNames: {
+          label: 'name',
+          value: 'value',
+        },
+      },
+      request: () =>
+        deptService
+          .queryOrgThree({
+            paging: false,
+          })
+          .then((resp) => {
+            const formatValue = (list: any[]) => {
+              const _list: any[] = [];
+              list.forEach((item) => {
+                if (item.children) {
+                  item.children = formatValue(item.children);
+                }
+                _list.push({
+                  ...item,
+                  value: JSON.stringify({
+                    assetType: 'device',
+                    targets: [
+                      {
+                        type: 'org',
+                        id: item.id,
+                      },
+                    ],
+                  }),
+                });
+              });
+              return _list;
+            };
+            return formatValue(resp.result);
+          }),
+    },
+    {
       title: intl.formatMessage({
         id: 'pages.table.description',
         defaultMessage: '说明',

src/pages/device/Instance/service.ts

@@ -238,6 +238,9 @@ class Service extends BaseService<DeviceInstance> {
     request(`/${SystemConst.API_BASE}/device/metadata/mapping/product/${productId}`, {
       method: 'GET',
     });
+
+  //接入方式
+  public queryGatewayList = () => request(`/${SystemConst.API_BASE}/gateway/device/providers`);
 }
 
 export default Service;

src/pages/device/Product/index.tsx

@@ -22,6 +22,8 @@ import { getMenuPathByParams, MENUS_CODE } from '@/utils/menu';
 import { AIcon, PermissionButton, ProTableCard } from '@/components';
 import ProductCard from '@/components/ProTableCard/CardItems/product';
 import { downloadObject } from '@/utils/util';
+import { service as categoryService } from '@/pages/device/Category';
+import { service as deptService } from '@/pages/system/Department';
 
 export const service = new Service('device-product');
 export const statusMap = {
@@ -298,6 +300,65 @@ const Product = observer(() => {
       // hideInSearch: true,
     },
     {
+      dataIndex: 'categoryId',
+      title: '分类',
+      valueType: 'treeSelect',
+      hideInTable: true,
+      fieldProps: {
+        fieldNames: {
+          label: 'name',
+          value: 'id',
+        },
+      },
+      request: () =>
+        categoryService
+          .queryTree({
+            paging: false,
+          })
+          .then((resp: any) => resp.result),
+    },
+    {
+      dataIndex: 'id$dim-assets',
+      title: '所属部门',
+      valueType: 'treeSelect',
+      hideInTable: true,
+      fieldProps: {
+        fieldNames: {
+          label: 'name',
+          value: 'value',
+        },
+      },
+      request: () =>
+        deptService
+          .queryOrgThree({
+            paging: false,
+          })
+          .then((resp) => {
+            const formatValue = (list: any[]) => {
+              const _list: any[] = [];
+              list.forEach((item) => {
+                if (item.children) {
+                  item.children = formatValue(item.children);
+                }
+                _list.push({
+                  ...item,
+                  value: JSON.stringify({
+                    assetType: 'product',
+                    targets: [
+                      {
+                        type: 'org',
+                        id: item.id,
+                      },
+                    ],
+                  }),
+                });
+              });
+              return _list;
+            };
+            return formatValue(resp.result);
+          }),
+    },
+    {
       title: intl.formatMessage({
         id: 'pages.data.option',
         defaultMessage: '操作',

src/utils/BaseService.ts

@@ -27,7 +27,7 @@ class BaseService<T> implements IBaseService<T> {
     return request(`${this.uri}/_query/no-paging?paging=false`, { data, method: 'POST' });
   }
 
-  queryNoPaging(params: any): Promise<unknown> {
+  queryNoPaging(params?: any): Promise<unknown> {
     return request(`${this.uri}/_query/no-paging?paging=false`, { params, method: 'GET' });
   }