@cniot/mdd-editor 0.2.0-beta.8 → 0.3.0

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 }) {

package/src/toolbar.jsx

@@ -1,13 +1,17 @@
 import React from 'react';
 import { Dialog, CnIcon, CnButton, CnTooltip, CnDrawer, CnTab, CnTabItem, CnCard } from '@cainiaofe/cn-ui';
 import MDDRenderEngine, { JSONWatch } from '@cniot/mdd-render-engine';
-import Monaco from '@src/components/ajax-schema-form/monaco';
+import Monaco from '$src/components/ajax-schema-form/monaco';
+import LocalAIDrawer from '$src/ai/LocalAIDrawer';
 
-import { EVENT_KEY } from '@src/common/const';
+import { EVENT_KEY } from '$src/common/const';
 
 import './index.less';
 
-const isDebug = window?.location?.search?.indexOf('debug') >= 0;
+// window.localStorage.__l4_location_search_debug__ = true; // 调试使用
+// window.localStorage.__l4_ftp_filter_expand__ = true; // 调试使用
+const isDebug =
+  window?.location?.search?.indexOf('debug') >= 0 || window.localStorage?.__l4_location_search_debug__ === 'true';
 
 /**
  * 顶部操作区
@@ -21,18 +25,36 @@ const isDebug = window?.location?.search?.indexOf('debug') >= 0;
  * }
  */
 export default function Toolbar(props) {
-  const { schema, scriptInfo = { script: '', style: '' }, showScript, scriptTopButtons } = props;
+  const {
+    schema,
+    scriptInfo = { script: '', style: '' },
+    showScript,
+    scriptTopButtons,
+    aiBridge = true,
+    pageMeta,
+    onSchemaApplied,
+  } = props;
   const [fullscreen, setFullscreen] = React.useState(false);
   const [codeVisible, setCodeVisible] = React.useState(false);
   const [schemaVisible, setSchemaVisible] = React.useState(false);
+  const [aiVisible, setAiVisible] = React.useState(false);
+  const [scriptEditorInfo, setScriptEditorInfo] = React.useState(scriptInfo);
+  const [schemaEditorCode, setSchemaEditorCode] = React.useState(
+    JSON.stringify(schema?.getAllJSON() || {}, null, 2),
+  );
 
-  const scriptRef = React.useRef(scriptInfo);
-  const schemaRef = React.useRef(JSON.stringify(schema?.getAllJSON() || {}, null, 2));
+  const scriptRef = React.useRef(scriptEditorInfo);
+  const schemaRef = React.useRef(schemaEditorCode);
 
   const editorHeight = 'calc(100vh - 146px)';
 
   const scriptChange = (scriptChangeCode) => {
-    scriptRef.current.script = scriptChangeCode; // 缓存脚本
+    const nextScriptInfo = {
+      script: scriptChangeCode,
+      style: scriptRef.current.style,
+    };
+    scriptRef.current = nextScriptInfo; // 缓存脚本
+    setScriptEditorInfo(nextScriptInfo);
     schema.emit(EVENT_KEY.SCRIPT_UPDATE, {
       script: scriptChangeCode,
       style: scriptRef.current.style,
@@ -40,11 +62,13 @@ export default function Toolbar(props) {
   };
 
   const styleChange = (styleChangeCode) => {
-    scriptRef.current.style = styleChangeCode; // 缓存样式
-    schema.emit(EVENT_KEY.SCRIPT_UPDATE, {
+    const nextScriptInfo = {
       script: scriptRef.current.script,
       style: styleChangeCode,
-    });
+    };
+    scriptRef.current = nextScriptInfo; // 缓存样式
+    setScriptEditorInfo(nextScriptInfo);
+    schema.emit(EVENT_KEY.SCRIPT_UPDATE, nextScriptInfo);
   };
 
   // schema change
@@ -52,6 +76,15 @@ export default function Toolbar(props) {
     schema.emit(EVENT_KEY.SCHEMA_UPDATE_FORCE, newSchemaCode);
   };
 
+  const onLocalAIApply = ({ schemaJson, scriptInfo: nextScriptInfo }) => {
+    scriptRef.current = nextScriptInfo;
+    setScriptEditorInfo(nextScriptInfo);
+    const nextSchemaCode = JSON.stringify(schemaJson || schema?.getAllJSON() || {}, null, 2);
+    schemaRef.current = nextSchemaCode;
+    setSchemaEditorCode(nextSchemaCode);
+    onSchemaApplied?.();
+  };
+
   return (
     <div>
       <div className="mdd-editor-toolbar">
@@ -77,7 +110,6 @@ export default function Toolbar(props) {
             脚本
           </CnTooltip>
         )}
-
         <CnTooltip
           trigger={
             <CnButton text onClick={() => setFullscreen(true)}>
@@ -87,6 +119,17 @@ export default function Toolbar(props) {
         >
           预览
         </CnTooltip>
+        {aiBridge !== false && (
+          <CnTooltip
+            trigger={
+              <CnButton type="primary" size="small" className="mdd-editor-ai-button" onClick={() => setAiVisible(true)}>
+                本地 AI
+              </CnButton>
+            }
+          >
+            本地 AI
+          </CnTooltip>
+        )}
       </div>
       <Dialog v2 title="预览" width="90vw" visible={fullscreen} onClose={() => setFullscreen(false)} footer={false}>
         <MDDRenderEngine
@@ -99,6 +142,24 @@ export default function Toolbar(props) {
           }
         />
       </Dialog>
+      {aiVisible && (
+        <CnDrawer
+          title="本地 AI 工作区"
+          width="720px"
+          footer={false}
+          visible={aiVisible}
+          onClose={() => setAiVisible(false)}
+        >
+          <LocalAIDrawer
+            schema={schema}
+            scriptInfo={scriptEditorInfo}
+            pageMeta={pageMeta}
+            bridgeConfig={aiBridge}
+            onApply={onLocalAIApply}
+          />
+        </CnDrawer>
+      )}
+
       {/*  代码编辑  */}
       <CnDrawer
         title="脚本编辑"
@@ -121,7 +182,7 @@ export default function Toolbar(props) {
               <Monaco
                 defaultLanguage="javascript"
                 height={editorHeight}
-                defaultValue={scriptInfo.script}
+                value={scriptEditorInfo.script}
                 onChange={scriptChange}
               />
             </CnTabItem>
@@ -129,7 +190,7 @@ export default function Toolbar(props) {
               <Monaco
                 defaultLanguage="less"
                 height={editorHeight}
-                defaultValue={scriptInfo.style}
+                value={scriptEditorInfo.style}
                 onChange={styleChange}
               />
             </CnTabItem>
@@ -164,9 +225,10 @@ export default function Toolbar(props) {
           <Monaco
             defaultLanguage="json"
             height={editorHeight}
-            defaultValue={schemaRef.current}
+            value={schemaEditorCode}
             onChange={(v) => {
               schemaRef.current = v;
+              setSchemaEditorCode(v);
             }}
           />
         </CnCard>

package/src/utils/buildFieldsToCompJson.js

@@ -1,6 +1,6 @@
-import { SWAGGER_DT } from '@src/common/const';
-import { calcWordWidth } from '@src/utils';
-import { propFields } from '@src/common/comp-schema/fields/propFields';
+import { SWAGGER_DT } from '$src/common/const';
+import { calcWordWidth } from '$src/utils';
+import { propFields } from '$src/common/comp-schema/fields/propFields';
 
 // 不生成字段 黑名单
 const REMOVE_FIELDS_NAME = ['page', 'pageSize', 'pageNo', 'currentPage', 'userContext'];

package/src/utils/persistentStorage.js

@@ -1,5 +1,5 @@
 // 用于LS储存
-import { PERSISTENT_STORE_LS_KEY } from '@src/common/const';
+import { PERSISTENT_STORE_LS_KEY } from '$src/common/const';
 
 class PersistentStorage {
   constructor() {

package/src/utils/swagger/api2SchemaFromSwagger.js

@@ -1,8 +1,8 @@
 import merge from 'lodash/merge';
-import buildSwaggerApiJson from '@src/utils/buildSwaggerApiJson';
-import buildFieldsToCompJson from '@src/utils/buildFieldsToCompJson';
-import jsonSchemaRefParser from '@src/utils/jsonSchemaRefParser';
-import { getDefaultFomrLabelAlign } from '@src/utils';
+import buildSwaggerApiJson from '$src/utils/buildSwaggerApiJson';
+import buildFieldsToCompJson from '$src/utils/buildFieldsToCompJson';
+import jsonSchemaRefParser from '$src/utils/jsonSchemaRefParser';
+import { getDefaultFomrLabelAlign } from '$src/utils';
 
 /** 将swaggerjson 转换成前端能用的swagger对象 */
 export function getSwaggerInfoFromJson(swaggerJson) {
@@ -186,14 +186,14 @@ export function api2SchemaFromSwaggerApiInfo(api, schemaType, apiInfo, extraSche
         },
         tree: false,
         showIndex: false,
-        hideCommonToolbar: false,
+        hideCommonToolbar: true,
       },
       headerToolbar: [],
     };
-  } else if (schemaType === 'blocks-table') {
+  } else if (schemaType?.startsWith('blocks-')) {
     result.type = 'blocks';
     result.body = {
-      type: 'blocks-table',
+      type: schemaType,
       blocks: [],
     };
   }