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

package/src/ai/pageIR.js

@@ -0,0 +1,148 @@
+const pick = (obj, keys) => {
+  const res = {};
+  keys.forEach((key) => {
+    if (obj && obj[key] !== undefined) {
+      res[key] = obj[key];
+    }
+  });
+  return res;
+};
+
+const parseImports = (script = '') => {
+  const imports = [];
+  const reg = /^\s*import\s+(.+?)\s+from\s+['"](.+?)['"]/gm;
+  let match = reg.exec(script);
+  while (match) {
+    imports.push({
+      what: match[1].trim(),
+      from: match[2],
+    });
+    match = reg.exec(script);
+  }
+  return imports;
+};
+
+const parseFunctions = (script = '') => {
+  const functions = [];
+  const reg = /(?:function\s+([A-Za-z0-9_$]+)|const\s+([A-Za-z0-9_$]+)\s*=\s*(?:\([^)]*\)|[A-Za-z0-9_$]+)\s*=>)/g;
+  let match = reg.exec(script);
+  while (match) {
+    functions.push(match[1] || match[2]);
+    match = reg.exec(script);
+  }
+  return functions;
+};
+
+const getArray = (value) => (Array.isArray(value) ? value : []);
+
+export function buildPageIR({ schemaJson = {}, script = '', style = '', pageMeta = {} }) {
+  const body = schemaJson.body || {};
+  const filterFields = getArray(body.filter?.fields);
+  const tableColumns = getArray(body.table?.columns);
+  const headerToolbar = getArray(body.headerToolbar);
+  const actionColumns = getArray(body.table?.actionColumns);
+  const bulkActions = getArray(body.table?.bulkActions);
+
+  return {
+    meta: {
+      code: pageMeta.code,
+      name: pageMeta.name,
+      template: pageMeta.mddTemplateType || body.type,
+      editorVersion: schemaJson.editorVersion,
+      host: schemaJson.host,
+      pageType: schemaJson.type,
+      gmtModified: pageMeta.gmtModified,
+      modifierAccount: pageMeta.modifierAccount,
+    },
+    api: body.api
+      ? {
+          ...pick(body.api, ['type', 'host', 'method', 'url', 'content', 'value']),
+          watch: getArray(body.api.watch),
+          paramsKeys: Object.keys(body.api.params || {}),
+          formatResponseData: body.api.formatResponseData,
+          hasResponseHandleCode: !!body.api.responseHandleCode,
+        }
+      : null,
+    filter: {
+      count: filterFields.length,
+      fields: filterFields.map((field, index) => ({
+        index,
+        path: `body.filter.fields[${index}]`,
+        type: field.type,
+        name: field.name,
+        label: field.label,
+        colSpan: field.colSpan,
+        sourceUrl: field.source?.url,
+        sourceMethod: field.source?.method,
+        enumCode: field.source?.params?.code,
+      })),
+    },
+    headerToolbar: headerToolbar.map((item, index) => ({
+      index,
+      path: `body.headerToolbar[${index}]`,
+      type: item.type,
+      label: item.label,
+      name: item.name,
+      actionType: item.actionType,
+      action: item.action?.type,
+      value: item.action?.value,
+      title: item.action?.title,
+      shouldRender: item.action?.shouldRender || item.shouldRender,
+    })),
+    table: {
+      primaryKey: body.table?.primaryKey,
+      pagination: body.table?.pagination,
+      showSelect: body.table?.showSelect,
+      columnCount: tableColumns.length,
+      actionCount: actionColumns.length,
+      bulkActionCount: bulkActions.length,
+      columns: tableColumns.map((column, index) => ({
+        index,
+        path: `body.table.columns[${index}]`,
+        type: column.type,
+        name: column.name,
+        label: column.label,
+        lock: column.lock,
+        sortable: column.sortable,
+        filter: column.filter,
+        customType: column.customType,
+        value: column.value,
+        format: column.format,
+      })),
+      actionColumns: actionColumns.map((action, index) => ({
+        index,
+        path: `body.table.actionColumns[${index}]`,
+        type: action.type,
+        label: action.label,
+        name: action.name,
+        actionType: action.actionType,
+        action: action.action?.type,
+        value: action.action?.value,
+        title: action.action?.title,
+        shouldRender: action.action?.shouldRender || action.shouldRender,
+      })),
+    },
+    script: {
+      length: script.length,
+      imports: parseImports(script),
+      functions: parseFunctions(script),
+      hasSetModule: /\.setModule\s*\(/.test(script),
+      hasSetComponent: /\.setComponent\s*\(/.test(script),
+      hasMDDRenderEngine: script.indexOf('MDDRenderEngine') > -1,
+    },
+    style: {
+      length: style.length,
+    },
+  };
+}
+
+export function getPageCode(schemaJson = {}, pageMeta = {}) {
+  const searchParams = new URLSearchParams(window.location.search || '');
+  return (
+    pageMeta.code ||
+    searchParams.get('code') ||
+    schemaJson?.code ||
+    schemaJson?.body?.code ||
+    `local-${schemaJson?.body?.type || 'mdd'}`
+  );
+}

package/src/components/address-select/formily.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { formilyReact, formilyCore } from '@cainiaofe/cn-ui';
-import { mapSize, mapStatus } from '@src/utils/formilyHook';
+import { mapSize, mapStatus } from '$src/utils/formilyHook';
 import AddressCompoent from './index';
 
 const { connect, mapReadPretty, mapProps } = formilyReact;

package/src/components/ajax-schema-form/formily-table-form-proxy.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { formilyReact, formilyCore } from '@cainiaofe/cn-ui';
-import { mapSize, mapStatus } from '@src/utils/formilyHook';
+import { mapSize, mapStatus } from '$src/utils/formilyHook';
 import TableFormProxy from './table-form-proxy';
 
 const { connect, mapReadPretty, mapProps } = formilyReact;

package/src/components/ajax-schema-form/formily.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { formilyReact, formilyCore } from '@cainiaofe/cn-ui';
-import { mapSize, mapStatus } from '@src/utils/formilyHook';
+import { mapSize, mapStatus } from '$src/utils/formilyHook';
 import AjaxSchemaFrom from './index';
 
 const { connect, mapReadPretty, mapProps } = formilyReact;

package/src/components/ajax-schema-form/table-form-proxy.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import TableForm from './table-form';
-import { object2Array, array2Object } from '@src/schema/base-schema/AjaxSchema';
+import { object2Array, array2Object } from '$src/schema/base-schema/AjaxSchema';
 
 /**
  * <TableFromProxy value={{}} onChange={} />

package/src/components/ajax-schema-form/table-form.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Table, Input, Button, Select } from '@cainiaofe/cn-ui';
-import useSchema from '@src/hooks/useSchema';
+import useSchema from '$src/hooks/useSchema';
 import { GLOABL_DATA, splitValue, mergeValue, getFilterLabelList } from './const';
 
 const FAST_LIST_DATA = [{ label: '当前操作行数据对象', value: 'RECORD_DATA' }];

package/src/components/data-source-select/formily.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { formilyReact, formilyCore } from '@cainiaofe/cn-ui';
-import { mapSize, mapStatus } from '@src/utils/formilyHook';
+import { mapSize, mapStatus } from '$src/utils/formilyHook';
 import DataSourceSelect from './index';
 
 const { connect, mapReadPretty, mapProps } = formilyReact;

package/src/components/dynamic-value/base/formily.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { formilyReact, formilyCore } from '@cainiaofe/cn-ui';
-import { mapSize, mapStatus } from '@src/utils/formilyHook';
+import { mapSize, mapStatus } from '$src/utils/formilyHook';
 import DynamicValueBase from './index';
 
 const { connect, mapReadPretty, mapProps } = formilyReact;

package/src/components/dynamic-value/date/formily.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { formilyReact, formilyCore } from '@cainiaofe/cn-ui';
-import { mapSize, mapStatus } from '@src/utils/formilyHook';
+import { mapSize, mapStatus } from '$src/utils/formilyHook';
 import DynamicValueDate from './index';
 
 const { connect, mapReadPretty, mapProps } = formilyReact;

package/src/components/formily-select/index.tsx

@@ -86,7 +86,7 @@ const patchDataSource = (dataSource: any = []) => {
     if (!result.children || result.children.length === 0) {
       delete result.children;
     } else {
-      result.children = result.children.map(removeEmptyChildren);
+      result.children = result.children?.map?.(removeEmptyChildren);
     }
     return result;
   };

package/src/components/params-select/formily.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { formilyReact, formilyCore } from '@cainiaofe/cn-ui';
-import { mapSize, mapStatus } from '@src/utils/formilyHook';
+import { mapSize, mapStatus } from '$src/utils/formilyHook';
 import DataSourceSelect from './index';
 
 const { connect, mapReadPretty, mapProps } = formilyReact;

package/src/components/time-range/formily.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { formilyReact, formilyCore } from '@cainiaofe/cn-ui';
-import { mapSize, mapStatus } from '@src/utils/formilyHook';
+import { mapSize, mapStatus } from '$src/utils/formilyHook';
 import TimeRange from './index';
 
 const { connect, mapReadPretty, mapProps } = formilyReact;

package/src/hooks/useSchema.jsx

@@ -1,10 +1,10 @@
 import { useState } from 'react';
 import { createModel } from 'hox';
-import storage from '@src/utils/persistentStorage';
-import useSwagger from '@src/hooks/useSwagger';
-import { MDD_SCHEMA_LS_KEY } from '@src/common/const';
-import { Util } from '@src/schema';
-import { IS_VSCODE } from '@src/utils/vscode';
+import storage from '$src/utils/persistentStorage';
+import useSwagger from '$src/hooks/useSwagger';
+import { MDD_SCHEMA_LS_KEY } from '$src/common/const';
+import { Util } from '$src/schema';
+import { IS_VSCODE } from '$src/utils/vscode';
 
 function useSchema() {
   const { fetchSwaggerInfo } = useSwagger();

package/src/hooks/useSwagger.jsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
-import { getSwaggerInfo } from '@src/services';
+import { getSwaggerInfo } from '$src/services';
 import { createModel } from 'hox';
-import { getSwaggerInfoFromJson, buildSwaggerApiJson, buildFieldsToCompJson } from '@src/utils';
+import { getSwaggerInfoFromJson, buildSwaggerApiJson, buildFieldsToCompJson } from '$src/utils';
 
 /**
  * @returns 缓存swagger元数据信息, 方便后面匹配接口选择

package/src/schema/base-schema/AjaxSchema.js

@@ -1,4 +1,4 @@
-import JSONWatch from '@src/utils/JSONWatch';
+import JSONWatch from '$src/utils/JSONWatch';
 
 // https://yuque.antfin.com/docs/share/fcab2e9f-8f44-43b6-b84c-12ec19c2ef5d?# 《ajax schema》
 export default class AjaxSchema extends JSONWatch {

package/src/schema/base-schema/AjaxSchemaQueue.js

@@ -1,4 +1,4 @@
-import JSONWatch from '@src/utils/JSONWatch';
+import JSONWatch from '$src/utils/JSONWatch';
 import AjaxSchema from './AjaxSchema';
 
 // https://yuque.antfin.com/docs/share/fcab2e9f-8f44-43b6-b84c-12ec19c2ef5d?# 《ajax schema》

package/src/schema/blocks/edit-table.js

@@ -0,0 +1,57 @@
+/* eslint-disable indent */
+import JSONWatch from '$src/utils/JSONWatch';
+
+export default class EditTableSchema extends JSONWatch {
+  constructor(props) {
+    super({
+      columns: props, // 与 BlockSchema 中的 toJSON toJSONKey 对应
+    });
+  }
+
+  setFieldsAll(columns, ignoreUpdate = false) {
+    // TODO 已有的schema结构，如何merge
+    this.set('columns', columns, ignoreUpdate);
+  }
+
+  // 更新
+  setItemAll(value, type = 'columns', ignoreUpdate = false) {
+    this.set(type, value, ignoreUpdate);
+  }
+
+  add(field, key = 'columns', ignoreUpdate = false) {
+    this.data[key].push(field);
+    this.emit('$updated', null, ignoreUpdate);
+  }
+
+  remove(index, key = 'columns', ignoreUpdate = false) {
+    this.data[key].splice(index, 1);
+    this.emit('$updated', null, ignoreUpdate);
+  }
+  update(index, data, key = 'columns', ignoreUpdate = false) {
+    /**
+     * key 的类型如下：
+     * {string} primaryKey 主键
+     * {array} bulkActions 批量操作
+     * {array} columns 列
+     * {array} actionColumns 操作列
+     * {object} pagination 分页
+     */
+    if (['columns', 'actionColumns', 'bulkActions'].includes(key)) {
+      this.data[key].splice(index, 1, data);
+    } else {
+      this.data[key] = data;
+    }
+    this.emit('$updated', null, ignoreUpdate);
+  }
+
+  updateAll(data) {
+    this.data = data;
+    this.emit('$updated');
+  }
+
+  delete() {}
+
+  getJSON() {
+    return super.getJSON();
+  }
+}

package/src/schema/blocks/filter.js

@@ -0,0 +1,49 @@
+/* eslint-disable indent */
+import JSONWatch from '$src/utils/JSONWatch';
+import { getDefaultFomrLabelAlign } from '$src/utils';
+
+export default class FilterSchema extends JSONWatch {
+  constructor(props) {
+    super({
+      fields: props, // 与 BlockSchema 中的 toJSON toJSONKey 对应
+    });
+  }
+
+  setFieldsAll(fields, ignoreUpdate = false) {
+    this.set('fields', fields, ignoreUpdate);
+  }
+
+  // 更新
+  setItemAll(value, type = 'fields', ignoreUpdate = false) {
+    this.set(type, value, ignoreUpdate);
+  }
+
+  add(field, key = 'fields', ignoreUpdate = false) {
+    this.data[key].push(field);
+    this.emit('$updated', null, ignoreUpdate);
+  }
+
+  remove(index, key = 'fields', ignoreUpdate = false) {
+    this.data[key].splice(index, 1);
+    this.emit('$updated', null, ignoreUpdate);
+  }
+  update(index, data, key = 'fields', ignoreUpdate = false) {
+    if (['fields'].includes(key)) {
+      this.data[key].splice(index, 1, data);
+    } else {
+      this.data[key] = data;
+    }
+    this.emit('$updated', null, ignoreUpdate);
+  }
+
+  updateAll(data) {
+    this.data = data;
+    this.emit('$updated');
+  }
+
+  delete() {}
+
+  getJSON() {
+    return super.getJSON();
+  }
+}

package/src/schema/blocks/form.js

@@ -0,0 +1,49 @@
+/* eslint-disable indent */
+import JSONWatch from '$src/utils/JSONWatch';
+import { getDefaultFomrLabelAlign } from '$src/utils';
+
+export default class FormSchema extends JSONWatch {
+  constructor(props) {
+    super({
+      fields: props, // 与 BlockSchema 中的 toJSON toJSONKey 对应
+    });
+  }
+
+  setFieldsAll(fields, ignoreUpdate = false) {
+    this.set('fields', fields, ignoreUpdate);
+  }
+
+  // 更新
+  setItemAll(value, type = 'fields', ignoreUpdate = false) {
+    this.set(type, value, ignoreUpdate);
+  }
+
+  add(field, key = 'fields', ignoreUpdate = false) {
+    this.data[key].push(field);
+    this.emit('$updated', null, ignoreUpdate);
+  }
+
+  remove(index, key = 'fields', ignoreUpdate = false) {
+    this.data[key].splice(index, 1);
+    this.emit('$updated', null, ignoreUpdate);
+  }
+  update(index, data, key = 'fields', ignoreUpdate = false) {
+    if (['fields'].includes(key)) {
+      this.data[key].splice(index, 1, data);
+    } else {
+      this.data[key] = data;
+    }
+    this.emit('$updated', null, ignoreUpdate);
+  }
+
+  updateAll(data) {
+    this.data = data;
+    this.emit('$updated');
+  }
+
+  delete() {}
+
+  getJSON() {
+    return super.getJSON();
+  }
+}

package/src/schema/blocks/index.js

@@ -1,9 +1,31 @@
-import { EVENT_KEY } from '@src/common/const';
+import { EVENT_KEY } from '$src/common/const';
 import Schema from '../Schema';
 import Table from './table';
+import Filter from './filter';
+import Form from './form';
+import EditTable from './edit-table';
 
 export default class BlocksSchema extends Schema {
-  static Table = Table;
+  // static Table = Table;
+  // static Filter = Filter;
+  static BlocksInfoMap = {
+    'blocks-table': {
+      schema: Table,
+      toJSONKey: 'columns',
+    },
+    'blocks-edit-table': {
+      schema: EditTable,
+      toJSONKey: 'columns',
+    },
+    'blocks-filter': {
+      schema: Filter,
+      toJSONKey: 'fields',
+    },
+    'blocks-form': {
+      schema: Form,
+      toJSONKey: 'fields',
+    },
+  };
 
   /**
    * @param {*} props
@@ -13,10 +35,11 @@ export default class BlocksSchema extends Schema {
    * }
    */
   constructor(props, isCompleteSchema = false) {
-    const { type, blocks, ...more } = isCompleteSchema ? props.body : props;
+    const { type, blocks = [], ...more } = isCompleteSchema ? props.body : props;
     super(more);
     this.type = type;
-    this.blocks = new Table(blocks);
+    const RealSchema = BlocksSchema.BlocksInfoMap[type].schema;
+    this.blocks = new RealSchema(blocks);
 
     this.willDetach = this.initChangeListener();
   }
@@ -37,7 +60,7 @@ export default class BlocksSchema extends Schema {
   // 根据schema初始化对象, 二次打开
   initFromCache(schema) {
     const { body, ...more } = schema;
-    const { blocks, } = body;
+    const { blocks } = body;
     // 先关闭storage的更新
     if (this.willDetach) {
       this.willDetach();
@@ -46,7 +69,6 @@ export default class BlocksSchema extends Schema {
     this.init(more);
     this.blocks.updateAll(blocks);
 
-
     // 再开启change监听
     this.willDetach = this.initChangeListener();
   }
@@ -56,20 +78,20 @@ export default class BlocksSchema extends Schema {
     return this.type;
   }
 
-  //  table内容
-  getTablePanel() {
+  getPanel() {
     return this.blocks;
   }
 
   getAllJSON() {
     const res = super.getAllJSON();
-    return { ...res, type: 'blocks', }
+    return { ...res, type: 'blocks' };
   }
 
   toJSON() {
+    const toJSONKey = BlocksSchema.BlocksInfoMap[this.type].toJSONKey;
     return {
       type: this.type,
-      blocks: this.blocks.getJSON().columns, // 与 TableSchema constructor 中 的 key 对应
+      blocks: this.blocks.getJSON()[toJSONKey], // 与 TableSchema constructor 中 的 key 对应
     };
   }
 

package/src/schema/blocks/table.js

@@ -1,12 +1,11 @@
 /* eslint-disable indent */
-import JSONWatch from '@src/utils/JSONWatch';
+import JSONWatch from '$src/utils/JSONWatch';
 
 export default class TableSchema extends JSONWatch {
   constructor(props) {
     super({
-      columns: props, // 与 BlockSchema 中的 toJSON 对应
+      columns: props, // 与 BlockSchema 中的 toJSON toJSONKey 对应
     });
-
   }
 
   setFieldsAll(columns, ignoreUpdate = false) {
@@ -50,7 +49,7 @@ export default class TableSchema extends JSONWatch {
     this.emit('$updated');
   }
 
-  delete() { }
+  delete() {}
 
   getJSON() {
     return super.getJSON();

package/src/schema/detail/detail-item.js

@@ -1,4 +1,4 @@
-import JSONWatch from '@src/utils/JSONWatch';
+import JSONWatch from '$src/utils/JSONWatch';
 
 export default class DetailItemSchema extends JSONWatch {
   constructor(props) {
@@ -20,7 +20,7 @@ export default class DetailItemSchema extends JSONWatch {
       current = 1, // 步骤条，当前步数
       columnsDirection = 'row', // 分栏组件 方向，默认横向分栏
       columnsBoxes = [],
-      hideCardTitle = false,
+      height = 100,
       ...more
     } = props || {};
     super({
@@ -41,7 +41,7 @@ export default class DetailItemSchema extends JSONWatch {
       current,
       columnsDirection,
       columnsBoxes,
-      hideCardTitle,
+      height,
       ...more,
     });
   }
@@ -143,7 +143,7 @@ export default class DetailItemSchema extends JSONWatch {
      * {array} actionColumns 操作列
      * {object} pagination 分页
      */
-    if (['columnsBoxes','columns', 'actionColumns', 'bulkActions'].includes(key)) {
+    if (['columnsBoxes', 'columns', 'actionColumns', 'bulkActions'].includes(key)) {
       this.data[key].splice(index, 1, record);
     } else {
       this.data[key] = record;
@@ -195,5 +195,5 @@ export default class DetailItemSchema extends JSONWatch {
     this.emit('$updated');
   }
 
-  delete() { }
+  delete() {}
 }