antvis · simplexiao · Sep 15, 2023 · Sep 15, 2023 · Sep 15, 2023 · Sep 15, 2023
diff --git a/packages/li-analysis-assets/src/widgets/FilterWidget/Component/FilterCard/index.tsx b/packages/li-analysis-assets/src/widgets/FilterWidget/Component/FilterCard/index.tsx
@@ -17,12 +17,23 @@ const EMPTY_DATASET_FILTER: DatasetFilter = { relation: 'AND', children: [] };
 
 type FilterCardProps = {
   id: string;
+  showDeleteFilter: boolean;
+  showAddFilter: boolean;
+  showFilterRelation: boolean;
   datasetOptions: { id: string; name: string }[];
   selectedDatasets: string[];
   onDel: () => void;
 };
 
-const FilterCard = ({ id, datasetOptions, selectedDatasets, onDel }: FilterCardProps) => {
+const FilterCard = ({
+  id,
+  showDeleteFilter,
+  showAddFilter,
+  showFilterRelation,
+  datasetOptions,
+  selectedDatasets,
+  onDel,
+}: FilterCardProps) => {
   const { token } = useToken();
   const [datasetId, setDatasetId] = useState(id);
   // TODO: 筛选条件不进行筛选自己，获取全量数据
@@ -86,26 +97,33 @@ const FilterCard = ({ id, datasetOptions, selectedDatasets, onDel }: FilterCardP
       bodyStyle={{ padding: 0 }}
       extra={
         <>
-          <Select
-            value={relation}
-            size="small"
-            disabled={isUnselectedDataset(datasetId)}
-            style={{ width: 65, marginLeft: 10 }}
-            options={[
-              { label: '并且', value: 'AND' },
-              { label: '或者', value: 'OR' },
-            ]}
-            onChange={(val: DatasetFilter['relation']) => onRelationChange(val)}
-          />
-          <Popconfirm title="确定要删除此筛选器？" onConfirm={onDelFilter} okText="确定" cancelText="取消">
-            <Button type="link" icon={<DeleteOutlined style={{ color: '#c0c0c0', opacity: 0.6 }} />} />
-          </Popconfirm>
+          {showFilterRelation && (
+            <Select
+              value={relation}
+              size="small"
+              disabled={isUnselectedDataset(datasetId)}
+              style={{ width: 65, marginLeft: 10 }}
+              options={[
+                { label: '并且', value: 'AND' },
+                { label: '或者', value: 'OR' },
+              ]}
+              onChange={(val: DatasetFilter['relation']) => onRelationChange(val)}
+            />
+          )}
+
+          {showDeleteFilter && (
+            <Popconfirm title="确定要删除此筛选器？" onConfirm={onDelFilter} okText="确定" cancelText="取消">
+              <Button type="link" icon={<DeleteOutlined style={{ color: '#c0c0c0', opacity: 0.6 }} />} />
+            </Popconfirm>
+          )}
         </>
       }
     >
       {!isUnselectedDataset(datasetId) && (
         <FilterList
           filterNodes={filterNodes}
+          showDeleteFilter={showDeleteFilter}
+          showAddFilter={showAddFilter}
           data={_data}
           columns={columns}
           // @ts-ignore

diff --git a/packages/li-analysis-assets/src/widgets/FilterWidget/Component/index.tsx b/packages/li-analysis-assets/src/widgets/FilterWidget/Component/index.tsx
@@ -7,10 +7,12 @@ import { isEmpty, isUndefined, uniqueId } from 'lodash-es';
 import React, { useState } from 'react';
 import FilterCard, { UNSELECTED_DATASET_ID } from './FilterCard';
 import './index.less';
+import type { Properties } from '../registerForm';
 
 const CLS_PREFIX = 'li-analysis-filter-widget';
 
-export default function FilterWidget() {
+const FilterWidget = (props: Properties) => {
+  const { showAddFilter, showDeleteFilter, showFilterRelation } = props;
   const [dataSourcesList] = useDatasetList();
   const datasets = dataSourcesList.filter((item): item is LocalDataset | RemoteDataset => isLocalOrRemoteDataset(item));
   const datasetOptions = datasets.map((item) => ({ id: item.id, name: item.metadata.name }));
@@ -30,6 +32,9 @@ export default function FilterWidget() {
           <FilterCard
             key={id}
             id={id}
+            showDeleteFilter={showDeleteFilter}
+            showAddFilter={showAddFilter}
+            showFilterRelation={showFilterRelation}
             selectedDatasets={selectedDatasets}
             datasetOptions={datasetOptions}
             onDel={() => {
@@ -38,23 +43,27 @@ export default function FilterWidget() {
           />
         );
       })}
-      <div
-        className={classNames(`${CLS_PREFIX}__add-filter`, {
-          [`${CLS_PREFIX}__add-filter_opcity`]: filterWidget.length === 0,
-        })}
-      >
-        <Button
-          block
-          size="small"
-          disabled={isEmpty(datasets)}
-          icon={<PlusOutlined />}
-          onClick={() => {
-            setfilterWidget([...filterWidget, uniqueId(UNSELECTED_DATASET_ID)]);
-          }}
+      {showAddFilter && (
+        <div
+          className={classNames(`${CLS_PREFIX}__add-filter`, {
+            [`${CLS_PREFIX}__add-filter_opcity`]: filterWidget.length === 0,
+          })}
         >
-          新增过滤器
-        </Button>
-      </div>
+          <Button
+            block
+            size="small"
+            disabled={isEmpty(datasets)}
+            icon={<PlusOutlined />}
+            onClick={() => {
+              setfilterWidget([...filterWidget, uniqueId(UNSELECTED_DATASET_ID)]);
+            }}
+          >
+            新增过滤器
+          </Button>
+        </div>
+      )}
     </div>
   );
-}
+};
+
+export default FilterWidget;
diff --git a/packages/li-analysis-assets/src/widgets/FilterWidget/index.tsx b/packages/li-analysis-assets/src/widgets/FilterWidget/index.tsx
@@ -1,5 +1,6 @@
 import { implementWidget } from '@antv/li-sdk';
 import component from './Component/index';
+import registerForm from './registerForm';
 
 export default implementWidget({
   version: 'v0.1',
@@ -10,6 +11,11 @@ export default implementWidget({
     type: 'Atom',
     category: 'DataAnalysis',
   },
+  defaultProperties: {
+    showAddFilter: false,
+    showDeleteFilter: false,
+    showFilterRelation: false,
+  },
   component,
-  registerForm: { schema: {} },
+  registerForm,
 });
diff --git a/packages/li-analysis-assets/src/widgets/FilterWidget/registerForm.ts b/packages/li-analysis-assets/src/widgets/FilterWidget/registerForm.ts
@@ -0,0 +1,41 @@
+import type { WidgetRegisterForm, WidgetRegisterFormProps } from '@antv/li-sdk';
+
+/**
+ * 属性面板生产的数据类型定义
+ */
+export type Properties = {
+  /** 启用新增过滤器 */
+  showAddFilter: boolean;
+  /** 启用删除过滤器 */
+  showDeleteFilter: boolean;
+  /** 启用逻辑运算 */
+  showFilterRelation: boolean;
+};
+
+export default (props: WidgetRegisterFormProps): WidgetRegisterForm<Properties> => {
+  // 属性面板表单的 Schema 定义，来自表单库 formily 的 Schema
+  const schema = {
+    showAddFilter: {
+      title: '启用新增过筛选',
+      type: 'boolean',
+      'x-decorator': 'FormItem',
+      'x-component': 'Switch',
+      default: false,
+    },
+    showDeleteFilter: {
+      title: '启用删除筛选',
+      type: 'boolean',
+      'x-decorator': 'FormItem',
+      'x-component': 'Switch',
+      default: false,
+    },
+    showFilterRelation: {
+      title: '启用逻辑运算',
+      type: 'boolean',
+      'x-decorator': 'FormItem',
+      'x-component': 'Switch',
+      default: false,
+    },
+  };
+  return { schema };
+};
diff --git a/packages/li-p2/src/components/Filter/FilterItem/index.tsx b/packages/li-p2/src/components/Filter/FilterItem/index.tsx
@@ -13,6 +13,7 @@ const { useToken } = theme;
 export const CLS_PREFIX = 'li-filter-item';
 
 export type FilterItemProps = {
+  showDeleteFilter: boolean;
   defaultValue: FilterNode;
   data: Record<string, any>[];
   columns: ColumnType[];
@@ -22,7 +23,7 @@ export type FilterItemProps = {
 };
 
 export const FilterItem = (props: FilterItemProps) => {
-  const { defaultValue, data, columns, selectedFields = [], onDelField } = props;
+  const { showDeleteFilter, defaultValue, data, columns, selectedFields = [], onDelField } = props;
   const [filterNode, setFilterNode] = useState(defaultValue);
   const field = isEmpty(filterNode.field) ? undefined : filterNode.field;
   const { token } = useToken();
@@ -96,11 +97,13 @@ export const FilterItem = (props: FilterItemProps) => {
     <div className={`${CLS_PREFIX}`} style={{ borderColor: token.colorBorder }}>
       <div className={`${CLS_PREFIX}__filter-field`}>
         <span>过滤字段</span>
-        <div className={`${CLS_PREFIX}__del-filter`}>
-          <Popconfirm title="确定要删除此筛选字段？" onConfirm={onDelField} okText="确定" cancelText="取消">
-            <DeleteOutlined />
-          </Popconfirm>
-        </div>
+        {showDeleteFilter && (
+          <div className={`${CLS_PREFIX}__del-filter`}>
+            <Popconfirm title="确定要删除此筛选字段？" onConfirm={onDelField} okText="确定" cancelText="取消">
+              <DeleteOutlined />
+            </Popconfirm>
+          </div>
+        )}
       </div>
 
       <div className={`${CLS_PREFIX}__field-operator`}>

diff --git a/packages/li-p2/src/components/Filter/FilterList/index.tsx b/packages/li-p2/src/components/Filter/FilterList/index.tsx
@@ -10,6 +10,8 @@ export const CLS_PREFIX = 'li-filter-list';
 
 export type FilterListProps = {
   data: Record<string, any>[];
+  showDeleteFilter: boolean;
+  showAddFilter: boolean;
   columns: ColumnType[];
   filterNodes: FilterNode[];
   addFilterNode: (filterNode: FilterNode, filterLogicalOperator?: FilterLogicalOperators) => void;
@@ -19,6 +21,8 @@ export type FilterListProps = {
 
 export const FilterList = ({
   data,
+  showDeleteFilter = true,
+  showAddFilter = true,
   columns,
   filterNodes,
   addFilterNode,
@@ -63,6 +67,7 @@ export const FilterList = ({
         return (
           <FilterItem
             key={item.id}
+            showDeleteFilter={showDeleteFilter}
             defaultValue={item}
             data={data}
             columns={columns}
@@ -72,9 +77,11 @@ export const FilterList = ({
         );
       })}
 
-      <div className={`${CLS_PREFIX}__add-btn`}>
-        <PlusCircleOutlined className={`${CLS_PREFIX}__add-icon`} onClick={addFilterField} />
-      </div>
+      {showAddFilter && (
+        <div className={`${CLS_PREFIX}__add-btn`}>
+          <PlusCircleOutlined className={`${CLS_PREFIX}__add-icon`} onClick={addFilterField} />
+        </div>
+      )}
     </>
   );
 };