@cniot/mdd-editor 0.2.0-beta.9 → 0.3.1

package/src/template/detail/components/DetailTable.jsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import { Form, Dialog, Switch, CnMessage, Input, Icon } from '@cainiaofe/cn-ui';
-import MddTableForm from '@src/components/mdd-table-form';
+import { Form, Dialog, Switch, CnMessage, Input, Icon, NumberPicker } from '@cainiaofe/cn-ui';
+import MddTableForm from '$src/components/mdd-table-form';
 import MultiAjaxSchemaForm from './MultiAjaxSchemaForm';
-import useSwagger from '@src/hooks/useSwagger';
-import buildSwaggerApiJson from '@src/utils/buildSwaggerApiJson';
-import buildFieldsToCompJson from '@src/utils/buildFieldsToCompJson';
-import MddForm from '@src/components/mdd-form';
+import useSwagger from '$src/hooks/useSwagger';
+import buildSwaggerApiJson from '$src/utils/buildSwaggerApiJson';
+import buildFieldsToCompJson from '$src/utils/buildFieldsToCompJson';
+import MddForm from '$src/components/mdd-form';
 import ActionPanel from './Actions';
 import { columnsTypeOptionsWithCnTable } from '../../const';
 
@@ -141,13 +141,18 @@ export default function DetailTable(props) {
         onChange={({ index, record }) => onPaginationChangeHandle({ index, record })}
       />
 
-      <Form.Item labelAlign="left" label="是否影藏通用顶部操作区:" name="hideCommonToolbar">
+      <Form.Item labelAlign="left" label="是否隐藏通用顶部操作区:" name="hideCommonToolbar">
         <Switch autoWidth size="small" defaultChecked={data.get('hideCommonToolbar')} />
       </Form.Item>
 
       <div style={{ marginLeft: '10px', marginBottom: 8 }}>
         <label>最大高度：</label>
-        <Input value={data.get('maxHeight')} size="small" onChange={(v) => tablePropsChange('maxHeight', v)} />
+        <NumberPicker
+          value={data.get('maxHeight')}
+          size="small"
+          onChange={(v) => tablePropsChange('maxHeight', v)}
+          min={0}
+        />
         <span className="mdd-tip">
           <Icon type="prompt" /> 该属性可以实现一屏展示，支持calc函数,eg： calc(100vh - 100px)
         </span>

package/src/template/detail/components/MultiAjaxSchemaForm.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Icon, Button, Box } from '@cainiaofe/cn-ui';
-import AjaxSchemaForm from '@src/components/ajax-schema-form';
+import AjaxSchemaForm from '$src/components/ajax-schema-form';
 
 // schema 是 detail-item 对象
 /**

package/src/template/edit-table/HeaderToolbar.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import MddTableForm from '@src/components/mdd-table-form';
+import MddTableForm from '$src/components/mdd-table-form';
 
 export default function HeaderToolbarPanel({ schema }) {
   const mddFormRef = React.useRef();
@@ -19,7 +19,8 @@ export default function HeaderToolbarPanel({ schema }) {
   const onAddHandle = () => {
     schema.add(
       {
-        type: 'batch-add',
+        // type: 'batch-add',
+        type: 'editButton',
         label: '批量新增',
         action: {
           type: 'drawer', // 目前必须是 drawer

package/src/template/edit-table/Table.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import { Input, Switch, Icon } from '@cainiaofe/cn-ui';
-import MddTableForm from '@src/components/mdd-table-form';
+import { Input, Switch, Icon, NumberPicker } from '@cainiaofe/cn-ui';
+import MddTableForm from '$src/components/mdd-table-form';
 import { columnsTypeOptionsWithEditCnTable } from '../const';
 
 export default function TablePanel({ schema, swaggerFields = [] }) {
@@ -15,6 +15,8 @@ export default function TablePanel({ schema, swaggerFields = [] }) {
   const primaryKey = schema.get('primaryKey');
   // 批量操作
   const columns = schema.get('columns');
+  // 显示序号
+  const showIndex = schema.get('showIndex');
 
   const onAddHandle = (key) => {
     switch (key) {
@@ -47,6 +49,11 @@ export default function TablePanel({ schema, swaggerFields = [] }) {
     schema.update('', value, 'primaryKey');
   };
 
+  // 基础属性变更
+  const onBaseInfoChange = (key, value) => {
+    schema.update('', value, key);
+  };
+
   return (
     <div>
       <div style={{ marginLeft: '10px', marginBottom: 8 }}>
@@ -69,11 +76,57 @@ export default function TablePanel({ schema, swaggerFields = [] }) {
 
       <div style={{ marginLeft: '10px', marginBottom: 8 }}>
         <label>最大高度：</label>
-        <Input value={schema.get('maxHeight')} size="small" onChange={(v) => schema.update('', v, 'maxHeight')} />
+        <NumberPicker
+          value={schema.get('maxHeight')}
+          size="small"
+          onChange={(v) => schema.update('', v, 'maxHeight')}
+          min={0}
+        />
         <span className="mdd-tip">
           <Icon type="prompt" /> 该属性可以实现一屏展示，支持calc函数,eg： calc(100vh - 100px)
         </span>
       </div>
+
+      <div style={{ marginLeft: '10px', marginBottom: 8 }}>
+        <label>是否显示序号：</label>
+        <Switch autoWidth checked={showIndex} size="small" onChange={(v) => onBaseInfoChange('showIndex', v)} />
+        <span className="mdd-tip">
+          <Icon type="prompt" /> 纯前端自动序号{' '}
+        </span>
+      </div>
+      <div style={{ marginLeft: '10px', marginBottom: 8 }}>
+        <label>是否开启虚拟滚动：</label>
+        <Switch
+          autoWidth
+          checked={schema.get('useVirtual')}
+          size="small"
+          onChange={(v) => onBaseInfoChange('useVirtual', v)}
+        />
+      </div>
+      <div style={{ marginLeft: '10px', marginBottom: 8 }}>
+        <label>是否开启自动列宽：</label>
+        <Switch
+          autoWidth
+          checked={schema.get('columnsAutoWidth')}
+          size="small"
+          onChange={(v) => onBaseInfoChange('columnsAutoWidth', v)}
+        />
+        <span className="mdd-tip">
+          <Icon type="prompt" /> 如果有性能问题可以关闭该属性，同时手动设置列宽
+        </span>
+      </div>
+      <div style={{ marginLeft: '10px', marginBottom: 8 }}>
+        <label>是否隐藏通用顶部操作区：</label>
+        <Switch
+          autoWidth
+          checked={schema.get('hideCommonToolbar')}
+          size="small"
+          onChange={(v) => onBaseInfoChange('hideCommonToolbar', v)}
+        />
+        <span className="mdd-tip">
+          <Icon type="prompt" /> 是否隐藏table顶部操作区的通用操作按钮，比如全屏、斑马线、列设置、尺寸等
+        </span>
+      </div>
     </div>
   );
 }

package/src/template/formily-form-v2/FormInfo.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Form, NumberPicker, Select, Switch, Input } from '@cainiaofe/cn-ui';
-import MddForm from '@src/components/mdd-form';
+import MddForm from '$src/components/mdd-form';
 
 const labelDataSource = [
   {

package/src/template/formily-form-v2/FormItems.jsx

@@ -1,11 +1,7 @@
 import React from 'react';
-import MddTableForm, { PenetrateTypes } from '@src/components/mdd-table-form';
-import { componentOptions } from '../const';
-import { propFields } from '@src/common/comp-schema/fields/propFields';
-
-const FormComponentOptions = [...componentOptions];
-FormComponentOptions.splice(3, 0, { value: 'input-password', label: '密码输入框' });
-// FormComponentOptions.splice(8, 1); // 表单去除级联选择器
+import MddTableForm, { PenetrateTypes } from '$src/components/mdd-table-form';
+import { FormComponentOptions } from '../const';
+import { propFields } from '$src/common/comp-schema/fields/propFields';
 
 export default function FormItemsPanel({ schema, swaggerFields = [] }) {
   const mddFormRef = React.useRef();
@@ -56,7 +52,7 @@ export default function FormItemsPanel({ schema, swaggerFields = [] }) {
         ref={mddFormRef}
         data={fields || []}
         penetrateType={PenetrateTypes.FORM}
-        componentOptions={FormComponentOptions}
+        componentOptions={[...FormComponentOptions, , { value: 'blocks-form', label: '表单区块' }]}
         swaggerFieldDataSource={swaggerFields}
         title="配置表单项"
         onAdd={onAddHandle}

package/src/template/formilyform/components/AsyncDataSourceSetter/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 // import { Modal, Button } from 'antd';
 
-import DataSourceSelect from '@src/components/data-source-select';
+import DataSourceSelect from '$src/components/data-source-select';
 
 // const AsyncDataSourceSetter = observer((props) => {
 //   const [visible, setVisible] = useState(false);

package/src/template/formilyform/components/SubmitActionSetter/index.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 // import { Modal, Button } from 'antd';
 
-import ParamsSelect from '@src/components/params-select';
+import ParamsSelect from '$src/components/params-select';
 
 // const SubmitActionSetter = observer((props) => {
 //   const [visible, setVisible] = useState(false);

package/src/template/ftp/DataSource.jsx

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import DataSourceSelect from '@src/components/data-source-select';
+import DataSourceSelect from '$src/components/data-source-select';
 
 function DataSource({ schema }) {
   const [_, forceUpdate] = React.useState({});

package/src/template/ftp/Filter.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { Form, NumberPicker, Select, Input, Switch } from '@cainiaofe/cn-ui';
-import MddTableForm, { PenetrateTypes } from '@src/components/mdd-table-form';
-import MddForm from '@src/components/mdd-form';
+import MddTableForm, { PenetrateTypes } from '$src/components/mdd-table-form';
+import MddForm from '$src/components/mdd-form';
 import { componentOptions } from '../const';
 
-import { propFields } from '@src/common/comp-schema/fields/propFields';
+import { propFields } from '$src/common/comp-schema/fields/propFields';
 
 const labelDataSource = [
   {
@@ -83,10 +83,14 @@ export default function FilterPanel({ schema, swaggerFields = [] }) {
   const mddFormRef = React.useRef();
   const [_, forceUpdate] = React.useState({});
   React.useEffect(() => {
-    schema.on('$updated', (changeData, ignoreUpdate) => {
+    const handleUpdated = (changeData, ignoreUpdate) => {
       !ignoreUpdate && forceUpdate({});
-    });
-  }, []);
+    };
+    schema.on('$updated', handleUpdated);
+    return () => {
+      schema.off('$updated', handleUpdated);
+    };
+  }, [schema]);
 
   const fields = schema.get('fields');
 
@@ -121,7 +125,7 @@ export default function FilterPanel({ schema, swaggerFields = [] }) {
         ref={mddFormRef}
         data={fields}
         penetrateType={PenetrateTypes.FILTER}
-        componentOptions={componentOptions}
+        componentOptions={[...componentOptions, { value: 'blocks-filter', label: '筛选项区块' }]}
         title="配置查询条件"
         onAdd={onAddHandle}
         onRemove={onRemoveHandle}
@@ -140,6 +144,9 @@ export default function FilterPanel({ schema, swaggerFields = [] }) {
             schema.set(item.name, item.value);
           }}
         >
+          <Form.Item label="默认展开:" name="defaultExpand" help="仅在 新版布局中生效">
+            <Switch defaultChecked={schema.get('defaultExpand')} />
+          </Form.Item>
           <Form.Item label="文本位置:" name="labelAlign">
             <Select dataSource={labelDataSource} defaultValue={schema.get('labelAlign')} />
           </Form.Item>

package/src/template/ftp/HeaderToolbar.jsx

@@ -1,14 +1,18 @@
 import React from 'react';
-import MddTableForm from '@src/components/mdd-table-form';
+import MddTableForm from '$src/components/mdd-table-form';
 
 export default function HeaderToolbarPanel({ schema, moduleMap }) {
   const mddFormRef = React.useRef();
   const [_, forceUpdate] = React.useState({});
   React.useEffect(() => {
-    schema.on('$updated', (changeData, ignoreUpdate) => {
+    const handleUpdated = (changeData, ignoreUpdate) => {
       !ignoreUpdate && forceUpdate({});
-    });
-  }, []);
+    };
+    schema.on('$updated', handleUpdated);
+    return () => {
+      schema.off('$updated', handleUpdated);
+    };
+  }, [schema]);
 
   const operationFields = schema.getData();
 

package/src/template/ftp/Middle.jsx

@@ -2,11 +2,11 @@
  * 中间模块区
  */
 import React from 'react';
-import MddTableSimpleArray from '@src/components/mdd-table-simple-array';
-import TableFromProxy from '@src/components/ajax-schema-form/table-form-proxy';
+import MddTableSimpleArray from '$src/components/mdd-table-simple-array';
+import TableFromProxy from '$src/components/ajax-schema-form/table-form-proxy';
 import { Select, Input, Icon } from '@cainiaofe/cn-ui';
-import AjaxSchemaForm from '@src/components/ajax-schema-form';
-import DynamicValueBase from '@src/components/dynamic-value/base';
+import AjaxSchemaForm from '$src/components/ajax-schema-form';
+import DynamicValueBase from '$src/components/dynamic-value/base';
 
 import styles from './index.module.scss';
 
@@ -23,10 +23,14 @@ export default function Middle(props) {
   const [_, forceUpdate] = React.useState({});
 
   React.useEffect(() => {
-    schema.on('$updated', (changeData, ignoreUpdate) => {
+    const handleUpdated = (changeData, ignoreUpdate) => {
       !ignoreUpdate && forceUpdate({});
-    });
-  }, []);
+    };
+    schema.on('$updated', handleUpdated);
+    return () => {
+      schema.off('$updated', handleUpdated);
+    };
+  }, [schema]);
 
   const onAddHandle = () => {
     schema.addMiddle();

package/src/template/ftp/Table.jsx

@@ -1,25 +1,30 @@
 import React, { useEffect, useState } from 'react';
-import { Input, Switch, Icon, NumberPicker } from '@cainiaofe/cn-ui';
-import MddTableForm from '@src/components/mdd-table-form';
-import MddForm from '@src/components/mdd-form';
-import AjaxSchemaForm from '@src/components/ajax-schema-form';
+import { Input, Switch, Icon, NumberPicker, CnSwitch, CnTooltip } from '@cainiaofe/cn-ui';
+import MddTableForm from '$src/components/mdd-table-form';
+import MddForm from '$src/components/mdd-form';
+import AjaxSchemaForm from '$src/components/ajax-schema-form';
 import { columnsTypeOptionsWithCnTable } from '../const';
 
 export default function TablePanel({ schema, swaggerFields = [] }) {
   const columnMddFormRef = React.useRef();
   const bulkMddFormRef = React.useRef();
   const operateMddFormRef = React.useRef();
+  const rowDoubleClickRef = React.useRef();
 
   const [_, forceUpdate] = useState({});
   const [visibleRowDetail, setVisibleRowDetail] = useState(!!schema.get('rowDetailModule')?.path);
   useEffect(() => {
-    schema.on('$updated', (changeData, ignoreUpdate) => {
+    const handleUpdated = (changeData, ignoreUpdate) => {
       !ignoreUpdate && forceUpdate({});
-    });
+    };
+    schema.on('$updated', handleUpdated);
 
     // hack处理
     hackRowDetail(schema);
-  }, []);
+    return () => {
+      schema.off('$updated', handleUpdated);
+    };
+  }, [schema]);
   // 主键
   const primaryKey = schema.get('primaryKey');
   // 批量操作
@@ -27,13 +32,17 @@ export default function TablePanel({ schema, swaggerFields = [] }) {
   const columns = schema.get('columns');
   // 操作列
   const actionColumns = schema.get('actionColumns');
+  // 行双击配置
+  const rowDoubleClick = schema.get('rowDoubleClick');
   const pagination = schema.get('pagination');
   // 树形
   const tree = schema.get('tree');
   // 显示序号
   const showIndex = schema.get('showIndex');
-  // 影藏底部操作区
+  // 隐藏底部操作区
   const hideCommonToolbar = schema.get('hideCommonToolbar');
+  // 操作列按钮最长字符数
+  const actionMaxCharNum = schema.get('actionMaxCharNum');
   // 操作列宽度
   const actionWidth = schema.get('actionWidth');
   // 是否显示多选
@@ -42,6 +51,8 @@ export default function TablePanel({ schema, swaggerFields = [] }) {
   const rowDetailModule = schema.get('rowDetailModule');
   // 远程排序
   const remoteSort = schema.get('remoteSort');
+  // 父子节点级联勾选
+  const treeLinkageCheck = schema.get('treeLinkageCheck');
 
   // 加载子节点数据源面板
   const loadChildrenDataApiPanel = schema.getLoadChildrenDataApiPanel();
@@ -98,6 +109,23 @@ export default function TablePanel({ schema, swaggerFields = [] }) {
         );
         operateMddFormRef.current?.updateData(schema.get('actionColumns'));
         break;
+      case 'rowDoubleClick':
+        // 操作列，默认带上当前行对象
+        schema.add(
+          {
+            type: 'button',
+            action: {
+              type: 'url',
+              params: {
+                record: '$TABLE.RECORD_DATA',
+              },
+            },
+          },
+          'rowDoubleClick',
+          true,
+        );
+        rowDoubleClickRef.current?.updateData(schema.get('rowDoubleClick'));
+        break;
       default:
         break;
     }
@@ -111,6 +139,8 @@ export default function TablePanel({ schema, swaggerFields = [] }) {
       columnMddFormRef.current?.updateData(schema.get('columns'));
     } else if (key === 'actionColumns') {
       operateMddFormRef.current?.updateData(schema.get('actionColumns'));
+    } else if (key === 'rowDoubleClick') {
+      rowDoubleClickRef.current?.updateData(schema.get('rowDoubleClick'));
     }
   };
 
@@ -118,6 +148,10 @@ export default function TablePanel({ schema, swaggerFields = [] }) {
     schema.update(index, record, key, true);
   };
 
+  const onActionMaxCharNum = (value) => {
+    schema.update('', value ? Number(value) : '', 'actionMaxCharNum');
+  };
+
   const onActionWidthChange = (value) => {
     schema.update('', value ? Number(value) : '', 'actionWidth');
   };
@@ -132,6 +166,7 @@ export default function TablePanel({ schema, swaggerFields = [] }) {
     if (!value) {
       // 关闭直接初始化rowDetailModule字段
       onChangeHandle({}, 'rowDetailModule');
+      onBaseInfoChange('rowDetailDefaultOpenAll', false);
     }
   };
 
@@ -178,6 +213,39 @@ export default function TablePanel({ schema, swaggerFields = [] }) {
           schema.setItemAll(newList, 'actionColumns', true);
         }}
       />
+      <MddTableForm
+        ref={rowDoubleClickRef}
+        data={rowDoubleClick}
+        title={() => (
+          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+            配置行双击事件
+            <CnSwitch
+              size="small"
+              checked={schema.get('rowDoubleClick')?.length > 0}
+              onChange={(checked) => {
+                if (checked) onAddHandle('rowDoubleClick');
+                else onRemoveHandle(0, 'rowDoubleClick');
+              }}
+            />
+            <CnTooltip trigger={<Icon type="prompt" />}>
+              行双击事件 和 操作列按钮 配置保持一致，下面 关于按钮的配置 均会失效，请只关注 双击 要执行的事件本身
+            </CnTooltip>
+          </div>
+        )}
+        titleType={[]}
+        draggable={false}
+        titleRender={() => '行双击 事件配置'}
+        onRemove={() => {}}
+        onChange={({ index, record }) => onChangeHandle({ index, record }, 'rowDoubleClick')}
+      />
+      <div style={{ marginLeft: '10px', marginBottom: 8 }}>
+        <label>操作列按钮最长字符数：</label>
+        <NumberPicker value={actionMaxCharNum} size="small" onChange={onActionMaxCharNum} min={1} max={10} />
+        <span className="mdd-tip">
+          <Icon type="prompt" /> 超长部分会显示为“...”[注意：需全局开启配置后 此项生效；在低版本 CN-UI 上不生效，如
+          实施工作台；可能会对一码多端效果造成影响，慎用]
+        </span>
+      </div>
       <div style={{ marginLeft: '10px', marginBottom: 8 }}>
         <label>操作列宽度：</label>
         <Input value={actionWidth} size="small" onChange={onActionWidthChange} />
@@ -187,7 +255,12 @@ export default function TablePanel({ schema, swaggerFields = [] }) {
       </div>
       <div style={{ marginLeft: '10px', marginBottom: 8 }}>
         <label>最大高度：</label>
-        <Input value={schema.get('maxHeight')} size="small" onChange={(v) => onBaseInfoChange('maxHeight', v)} />
+        <NumberPicker
+          value={schema.get('maxHeight')}
+          size="small"
+          onChange={(v) => onBaseInfoChange('maxHeight', v)}
+          min={0}
+        />
         <span className="mdd-tip">
           <Icon type="prompt" /> 该属性可以实现一屏展示，支持calc函数,eg： calc(100vh - 100px)
         </span>
@@ -217,6 +290,17 @@ export default function TablePanel({ schema, swaggerFields = [] }) {
           onChange={({ index, record }) => onChangeHandle({ index, record }, 'rowDetailModule')}
         />
       )}
+      {visibleRowDetail && (
+        <div style={{ marginLeft: '10px', marginBottom: 8 }}>
+          <label>行详情是否默认展开全部：</label>
+          <Switch
+            autoWidth
+            checked={schema.get('rowDetailDefaultOpenAll')}
+            size="small"
+            onChange={(v) => onBaseInfoChange('rowDetailDefaultOpenAll', v)}
+          />
+        </div>
+      )}
       <div style={{ marginLeft: '10px', marginBottom: 8 }}>
         <label>树形：</label>
         <Switch autoWidth checked={tree} size="small" onChange={(v) => onBaseInfoChange('tree', v)} />
@@ -225,8 +309,25 @@ export default function TablePanel({ schema, swaggerFields = [] }) {
           开启后也可通过下面的懒加载设置改成懒加载模式，不配置则需要一次性返回树形数据
         </span>
       </div>
+
       {tree && (
-        <div style={{ marginLeft: '10px', marginBottom: 8, display: 'flex' }}>
+        <div style={{ marginLeft: '20px', marginBottom: 8, display: 'flex' }}>
+          <label>父子节点级联勾选：</label>
+          <Switch
+            autoWidth
+            checked={treeLinkageCheck}
+            size="small"
+            onChange={(v) => onBaseInfoChange('treeLinkageCheck', v)}
+          />
+
+          <span className="mdd-tip">
+            <Icon type="prompt" />{' '}
+            父节点勾选默认会勾选所有子节点,子节点勾选默认会勾上父节点【必须配置唯一主键，不支持异步数据】
+          </span>
+        </div>
+      )}
+      {tree && (
+        <div style={{ marginLeft: '20px', marginBottom: 8, display: 'flex' }}>
           <label>子节点懒加载配置：</label>
           <div>
             <AjaxSchemaForm schema={loadChildrenDataApiPanel} isSelectType={false} />
@@ -236,6 +337,7 @@ export default function TablePanel({ schema, swaggerFields = [] }) {
           </div>
         </div>
       )}
+
       <div style={{ marginLeft: '10px', marginBottom: 8 }}>
         <label>是否显示序号：</label>
         <Switch autoWidth checked={showIndex} size="small" onChange={(v) => onBaseInfoChange('showIndex', v)} />
@@ -244,7 +346,7 @@ export default function TablePanel({ schema, swaggerFields = [] }) {
         </span>
       </div>
       <div style={{ marginLeft: '10px', marginBottom: 8 }}>
-        <label>是否影藏通用顶部操作区：</label>
+        <label>是否隐藏通用顶部操作区：</label>
         <Switch
           autoWidth
           checked={hideCommonToolbar}
@@ -252,7 +354,7 @@ export default function TablePanel({ schema, swaggerFields = [] }) {
           onChange={(v) => onBaseInfoChange('hideCommonToolbar', v)}
         />
         <span className="mdd-tip">
-          <Icon type="prompt" /> 是否影藏table顶部操作区的通用操作按钮，比如全屏、斑马线、列设置、尺寸等
+          <Icon type="prompt" /> 是否隐藏table顶部操作区的通用操作按钮，比如全屏、斑马线、列设置、尺寸等
         </span>
       </div>
       <div style={{ marginLeft: '10px', marginBottom: 8 }}>
@@ -283,6 +385,35 @@ export default function TablePanel({ schema, swaggerFields = [] }) {
           <Icon type="prompt" /> 纯前端筛选
         </span>
       </div>
+
+      <div style={{ marginLeft: '10px', marginBottom: 8 }}>
+        <label>是否开启多维指标排序：</label>
+        <Switch
+          autoWidth
+          checked={schema.get('customSort')}
+          size="small"
+          onChange={(v) => {
+            onBaseInfoChange('customSort', v);
+            !v && onBaseInfoChange('customSortStorage', '');
+          }}
+        />
+        <span className="mdd-tip">
+          <Icon type="prompt" /> 纯前端排序
+        </span>
+
+        {schema.get('customSort') && (
+          <Input
+            style={{ marginLeft: 8 }}
+            value={schema.get('customSortStorage')}
+            size="small"
+            placeholder="跟随页面缓存"
+            onChange={(v) => {
+              onBaseInfoChange('customSortStorage', v);
+            }}
+          />
+        )}
+      </div>
+
       <div style={{ marginLeft: '10px', marginBottom: 8 }}>
         <label>是否开启列头复制：</label>
         <Switch autoWidth checked={schema.get('copy')} size="small" onChange={(v) => onBaseInfoChange('copy', v)} />

package/src/template/simple-ftp/Table.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { Input, Switch, Icon, NumberPicker } from '@cainiaofe/cn-ui';
-import MddTableForm from '@src/components/mdd-table-form';
-import MddForm from '@src/components/mdd-form';
+import MddTableForm from '$src/components/mdd-table-form';
+import MddForm from '$src/components/mdd-form';
 import { columnsTypeOptionsWithCnTable } from '../const';
 
 export default function TablePanel({ schema }) {