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

package/src/schema/detail/index.js

@@ -1,10 +1,10 @@
-import { EVENT_KEY } from '@src/common/const';
+import { EVENT_KEY } from '$src/common/const';
 import Schema from '../Schema';
 import { Message } from '@cainiaofe/cn-ui';
 import DetailItem from './detail-item';
 import AjaxSchema from '../base-schema/AjaxSchema';
-import buildSwaggerApiJson from '@src/utils/buildSwaggerApiJson';
-import buildFieldsToCompJson from '@src/utils/buildFieldsToCompJson';
+import buildSwaggerApiJson from '$src/utils/buildSwaggerApiJson';
+import buildFieldsToCompJson from '$src/utils/buildFieldsToCompJson';
 
 export default class DetailSchema extends Schema {
   /**
@@ -20,6 +20,8 @@ export default class DetailSchema extends Schema {
       hasAnchor = false,
       children,
       initDataSource,
+      fullHeight,
+      whiteBackground,
       ...more
     } = isCompleteSchema ? props.body : props;
     super(more);
@@ -27,6 +29,8 @@ export default class DetailSchema extends Schema {
     this.hasBackBtn = hasBackBtn;
     this.backText = backText;
     this.hasAnchor = hasAnchor; // 是否带电梯
+    this.fullHeight = fullHeight;
+    this.whiteBackground = whiteBackground;
     this.initChildren(children, initDataSource);
 
     this.initDataSource = initDataSource ? new AjaxSchema(initDataSource) : {};
@@ -39,21 +43,21 @@ export default class DetailSchema extends Schema {
     /* eslint-disable */
     this.children = children
       ? children
-          .map((item) => {
-            if (!item) return null;
-            return new DetailItem(item);
-          })
-          .filter(Boolean)
+        .map((item) => {
+          if (!item) return null;
+          return new DetailItem(item);
+        })
+        .filter(Boolean)
       : [
-          new DetailItem({
-            groupId: '',
-            type: 'detail-card',
-            label: '基础信息',
-            col: 3,
-            columns: [],
-            source: [initDataSource],
-          }),
-        ];
+        new DetailItem({
+          groupId: '',
+          type: 'detail-card',
+          label: '基础信息',
+          col: 3,
+          columns: [],
+          source: [initDataSource],
+        }),
+      ];
   }
 
   // 基础信息change key 主要是 hasBackBtn 和 backText
@@ -126,7 +130,7 @@ export default class DetailSchema extends Schema {
   // 根据schema初始化对象, 二次打开
   initFromCache(schema) {
     const { body, ...more } = schema;
-    const { hasBackBtn, backText, hasAnchor, children } = body;
+    const { hasBackBtn, backText, hasAnchor, fullHeight, whiteBackground, children } = body;
 
     // 先关闭storage的更新
     // if (this.willDetach) {
@@ -136,6 +140,8 @@ export default class DetailSchema extends Schema {
     this.baseInfoChange('hasBackBtn', hasBackBtn);
     this.baseInfoChange('backText', backText);
     this.baseInfoChange('hasAnchor', hasAnchor);
+    this.baseInfoChange('fullHeight,', fullHeight);
+    this.baseInfoChange('whiteBackground,', whiteBackground);
     this.initChildren(children);
 
     this.refreshChildrenListener();
@@ -186,6 +192,8 @@ export default class DetailSchema extends Schema {
       hasBackBtn: this.hasBackBtn,
       backText: this.backText,
       hasAnchor: this.hasAnchor,
+      fullHeight: this.fullHeight,
+      whiteBackground: this.whiteBackground,
       children: this.children.map((item) => item.getJSON()),
     };
   }

package/src/schema/edit-table/header-toolbar.js

@@ -1,4 +1,4 @@
-import JSONWatch from '@src/utils/JSONWatch';
+import JSONWatch from '$src/utils/JSONWatch';
 
 export default class HeaderToolbar extends JSONWatch {
   constructor(operationFields = []) {

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

@@ -1,14 +1,14 @@
-import JSONWatch from '@src/utils/JSONWatch';
-import { EVENT_KEY } from '@src/common/const';
+import JSONWatch from '$src/utils/JSONWatch';
+import { EVENT_KEY } from '$src/common/const';
 import Schema from '../Schema';
 import { Message } from '@cainiaofe/cn-ui';
 import Table from './table';
 import AjaxSchema from '../base-schema/AjaxSchema';
 import HeaderToolbar from './header-toolbar';
-import buildSwaggerApiJson from '@src/utils/buildSwaggerApiJson';
-import buildFieldsToCompJson from '@src/utils/buildFieldsToCompJson';
+import buildSwaggerApiJson from '$src/utils/buildSwaggerApiJson';
+import buildFieldsToCompJson from '$src/utils/buildFieldsToCompJson';
 
-export default class FtpSchema extends Schema {
+export default class EditTableSchema extends Schema {
   /**
    * @param {*} props
    *  type:"edit-table",
@@ -31,6 +31,7 @@ export default class FtpSchema extends Schema {
       hasAddRow = true,
       hasDeleteRow = true,
       headerToolbar = [],
+      maxRowLength,
       ...more
     } = isCompleteSchema ? props.body : props;
     super(more);
@@ -41,6 +42,7 @@ export default class FtpSchema extends Schema {
     this.deleteBtnText = deleteBtnText;
     this.hasSaveBtn = hasSaveBtn;
     this.hasAddRow = hasAddRow;
+    this.maxRowLength = maxRowLength;
     this.hasDeleteRow = hasDeleteRow;
 
     this.initApi = new AjaxSchema(initApi);
@@ -102,6 +104,7 @@ export default class FtpSchema extends Schema {
       hasAddRow,
       hasDeleteRow,
       headerToolbar,
+      maxRowLength,
     } = body;
 
     // 先关闭storage的更新
@@ -119,6 +122,7 @@ export default class FtpSchema extends Schema {
     this.saveBtnText = saveBtnText;
     this.hasSaveBtn = hasSaveBtn;
     this.hasAddRow = hasAddRow;
+    this.maxRowLength = maxRowLength;
     this.hasDeleteRow = hasDeleteRow;
 
     // 再开启change监听
@@ -191,6 +195,7 @@ export default class FtpSchema extends Schema {
       deleteBtnText: this.deleteBtnText,
       hasSaveBtn: this.hasSaveBtn,
       hasAddRow: this.hasAddRow,
+      maxRowLength: this.maxRowLength,
       hasDeleteRow: this.hasDeleteRow,
       initApi: this.initApi.getJSON(),
       submitApi: this.submitApi.getJSON(),

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

@@ -1,4 +1,4 @@
-import JSONWatch from '@src/utils/JSONWatch';
+import JSONWatch from '$src/utils/JSONWatch';
 
 export default class TableSchema extends JSONWatch {
   constructor(props) {
@@ -9,12 +9,16 @@ export default class TableSchema extends JSONWatch {
       primaryKey = 'id',
       tree = false, // 开启树形
       showIndex = false, // 是否显示序号
-      hideCommonToolbar = false, // 是否影藏通用顶部操作区
+      hideCommonToolbar = true, // 是否隐藏通用顶部操作区
+      useVirtual = true, // 开启虚拟滚动
+      columnsAutoWidth = true, // 开启列宽自适应
       pagination = {
         defaultPageSize: 20, // 默认分页大小
         paging: true, // 开启分页
         disableGlobalConfig: false, // 禁用全局分页配置
       },
+      maxHeight,
+      storageKey = Date.now(),
     } = props || {};
     super({
       columns,
@@ -25,6 +29,10 @@ export default class TableSchema extends JSONWatch {
       tree,
       showIndex,
       hideCommonToolbar,
+      useVirtual,
+      columnsAutoWidth,
+      maxHeight,
+      storageKey,
     });
   }
 

package/src/schema/formily-form/data-source.js

@@ -1,4 +1,4 @@
-import JSONWatch from '@src/utils/JSONWatch';
+import JSONWatch from '$src/utils/JSONWatch';
 
 export default class DataSourceSchema extends JSONWatch {
   constructor(api) {

package/src/schema/formily-form/form-schema.js

@@ -1,4 +1,4 @@
-import JSONWatch from '@src/utils/JSONWatch';
+import JSONWatch from '$src/utils/JSONWatch';
 
 export default class FormSchema extends JSONWatch {
   constructor(props) {

package/src/schema/formily-form/index.js

@@ -1,13 +1,13 @@
-import JSONWatch from '@src/utils/JSONWatch';
+import JSONWatch from '$src/utils/JSONWatch';
 import Schema from '../Schema';
 import DataSource from './data-source';
-import FormSchema from '@src/schema/formily-form/form-schema';
-import buildSwagerApiJosn from '@src/utils/buildSwaggerApiJson';
-import { schemaScenarioList } from '@src/services';
-import { makeSchema, list2Schema } from '@src/utils/formilyUtil';
-import { EVENT_KEY } from '@src/common/const';
-import buildFieldsToCompJson from '@src/utils/buildFieldsToCompJson';
-import buildSwaggerApiJson from '@src/utils/buildSwaggerApiJson';
+import FormSchema from '$src/schema/formily-form/form-schema';
+import buildSwagerApiJosn from '$src/utils/buildSwaggerApiJson';
+import { schemaScenarioList } from '$src/services';
+import { makeSchema, list2Schema } from '$src/utils/formilyUtil';
+import { EVENT_KEY } from '$src/common/const';
+import buildFieldsToCompJson from '$src/utils/buildFieldsToCompJson';
+import buildSwaggerApiJson from '$src/utils/buildSwaggerApiJson';
 import upperFirst from 'lodash/upperFirst';
 
 const fieldsComp2FormilyComp = (str) => {

package/src/schema/formily-form-v2/form-info.js

@@ -1,5 +1,5 @@
-import JSONWatch from '@src/utils/JSONWatch';
-import { getDefaultFomrLabelAlign } from '@src/utils';
+import JSONWatch from '$src/utils/JSONWatch';
+import { getDefaultFomrLabelAlign } from '$src/utils';
 
 // 表单基础信息配置
 export default class FormInfo extends JSONWatch {

package/src/schema/formily-form-v2/form-items.js

@@ -1,4 +1,4 @@
-import JSONWatch from '@src/utils/JSONWatch';
+import JSONWatch from '$src/utils/JSONWatch';
 
 // 表单项配置
 export default class FormItems extends JSONWatch {

package/src/schema/formily-form-v2/index.js

@@ -1,11 +1,11 @@
-import { EVENT_KEY } from '@src/common/const';
+import { EVENT_KEY } from '$src/common/const';
 import Schema from '../Schema';
 import FormInfo from './form-info';
 import FormItems from './form-items';
 import AjaxSchema from '../base-schema/AjaxSchema';
 import AjaxSchemaQueue from '../base-schema/AjaxSchemaQueue';
-import buildSwaggerApiJson from '@src/utils/buildSwaggerApiJson';
-import buildFieldsToCompJson from '@src/utils/buildFieldsToCompJson';
+import buildSwaggerApiJson from '$src/utils/buildSwaggerApiJson';
+import buildFieldsToCompJson from '$src/utils/buildFieldsToCompJson';
 
 export default class FormilyFormV2Schema extends Schema {
   static FormInfo = FormInfo;

package/src/schema/ftp/data-source.js

@@ -1,4 +1,4 @@
-import JSONWatch from '@src/utils/JSONWatch';
+import JSONWatch from '$src/utils/JSONWatch';
 
 export default class DataSourceSchema extends JSONWatch {
   constructor(props) {

package/src/schema/ftp/filter.js

@@ -1,5 +1,5 @@
-import JSONWatch from '@src/utils/JSONWatch';
-import { getDefaultFomrLabelAlign } from '@src/utils';
+import JSONWatch from '$src/utils/JSONWatch';
+import { getDefaultFomrLabelAlign } from '$src/utils';
 
 export default class Filter extends JSONWatch {
   constructor(props) {

package/src/schema/ftp/header-toolbar.js

@@ -1,4 +1,4 @@
-import JSONWatch from '@src/utils/JSONWatch';
+import JSONWatch from '$src/utils/JSONWatch';
 
 export default class HeaderToolbar extends JSONWatch {
   constructor(operationFields = []) {

package/src/schema/ftp/index.js

@@ -1,5 +1,5 @@
-import JSONWatch from '@src/utils/JSONWatch';
-import { EVENT_KEY } from '@src/common/const';
+import JSONWatch from '$src/utils/JSONWatch';
+import { EVENT_KEY } from '$src/common/const';
 import Schema from '../Schema';
 import { Message } from '@cainiaofe/cn-ui';
 import Table from './table';
@@ -8,8 +8,8 @@ import Filter from './filter';
 // import Tab from './tab';
 // import DataSource from './data-source';
 import AjaxSchema from '../base-schema/AjaxSchema';
-import buildSwaggerApiJson from '@src/utils/buildSwaggerApiJson';
-import buildFieldsToCompJson from '@src/utils/buildFieldsToCompJson';
+import buildSwaggerApiJson from '$src/utils/buildSwaggerApiJson';
+import buildFieldsToCompJson from '$src/utils/buildFieldsToCompJson';
 
 import MiddleItem from './middle-item';
 

package/src/schema/ftp/middle-item.js

@@ -1,4 +1,4 @@
-import JSONWatch from '@src/utils/JSONWatch';
+import JSONWatch from '$src/utils/JSONWatch';
 import AjaxSchema from '../base-schema/AjaxSchema';
 
 const Default_AjaxSchema = {

package/src/schema/ftp/table.js

@@ -1,17 +1,20 @@
 /* eslint-disable indent */
-import JSONWatch from '@src/utils/JSONWatch';
+import JSONWatch from '$src/utils/JSONWatch';
 import AjaxSchema from '../base-schema/AjaxSchema';
 
 export default class TableSchema extends JSONWatch {
   constructor(props) {
     const {
       columns = [],
+      rowDoubleClick = [],
       actionColumns = [],
       bulkActions = [],
       primaryKey = 'id',
       tree = false, // 开启树形
+      treeLinkageCheck = false, // 树形 是否父子级联勾选
       showIndex = false, // 是否显示序号
-      hideCommonToolbar = false, // 是否影藏通用顶部操作区
+      hideCommonToolbar = false, // 是否隐藏通用顶部操作区
+      actionMaxCharNum, // 操作列按钮最长字符数，可能会对一码多端效果造成影响，慎用
       actionWidth, // 操作列宽度
       showSelect = false, // 是否显示勾选操作
       remoteSort = false, // 是否开启远程排序
@@ -33,6 +36,7 @@ export default class TableSchema extends JSONWatch {
 
     super({
       columns,
+      rowDoubleClick,
       actionColumns,
       bulkActions,
       primaryKey,
@@ -40,12 +44,14 @@ export default class TableSchema extends JSONWatch {
       tree,
       showIndex,
       hideCommonToolbar,
+      actionMaxCharNum,
       actionWidth,
       showSelect,
       rowDetailModule,
       remoteSort,
       useVirtual,
       columnsAutoWidth,
+      treeLinkageCheck,
       ...more,
     });
     this.initAjaxSchemaData(loadChildrenDataApi);
@@ -92,7 +98,7 @@ export default class TableSchema extends JSONWatch {
      * {array} actionColumns 操作列
      * {object} pagination 分页
      */
-    if (['columns', 'actionColumns', 'bulkActions'].includes(key)) {
+    if (['columns', 'actionColumns', 'bulkActions', 'rowDoubleClick'].includes(key)) {
       this.data[key].splice(index, 1, data);
     } else {
       this.data[key] = data;

package/src/schema/util.js

@@ -5,9 +5,9 @@ import FormilyFormSchema from './formily-form';
 import FormilyFormV2Schema from './formily-form-v2';
 import DetailSchema from './detail';
 import EditTableSchema from './edit-table';
-import { EVENT_KEY, MDD_SCHEMA_LS_KEY } from '@src/common/const';
-import storage from '@src/utils/persistentStorage';
-import { IS_VSCODE, emitSave } from '@src/utils/vscode';
+import { EVENT_KEY, MDD_SCHEMA_LS_KEY } from '$src/common/const';
+import storage from '$src/utils/persistentStorage';
+import { IS_VSCODE, emitSave } from '$src/utils/vscode';
 
 /**
  * 构建schema对象

package/src/services/index.js

@@ -1,6 +1,6 @@
 // import { request } from 'ice';
 import axios from 'axios';
-import jsonSchemaRefParser from '@src/utils/jsonSchemaRefParser';
+import jsonSchemaRefParser from '$src/utils/jsonSchemaRefParser';
 // import $RefParser from '@apidevtools/json-schema-ref-parser';
 
 function transferOpenAPI3ToSwagger2(data) {

package/src/template/blocks/EditTable.jsx

@@ -0,0 +1,62 @@
+import React, { useEffect, useState } from 'react';
+import { Input, Switch, Icon, NumberPicker } from '@cainiaofe/cn-ui';
+import MddTableForm from '$src/components/mdd-table-form';
+import { columnsTypeOptionsWithEditCnTable } from '../const';
+
+export default function EditTablePanel({ schema }) {
+  const columnMddFormRef = React.useRef();
+  const [_, forceUpdate] = useState({});
+  useEffect(() => {
+    schema.on('$updated', (changeData, ignoreUpdate) => {
+      !ignoreUpdate && forceUpdate({});
+    });
+  }, []);
+
+  const columns = schema.get('columns');
+
+  const onAddHandle = (key) => {
+    switch (key) {
+      case 'columns':
+        schema.add(
+          {
+            type: 'text',
+            label: '展示项',
+            name: '',
+          },
+          'columns',
+          true,
+        );
+        columnMddFormRef.current?.updateData(schema.get('columns'));
+        break;
+      default:
+        break;
+    }
+  };
+  const onRemoveHandle = (index, key) => {
+    schema.remove(index, key, true);
+    columnMddFormRef.current?.updateData(schema.get('columns'));
+  };
+
+  const onChangeHandle = ({ index, record }, key) => {
+    schema.update(index, record, key, true);
+  };
+
+  return (
+    <div>
+      <MddTableForm
+        ref={columnMddFormRef}
+        data={columns}
+        title="配置可编辑表格列"
+        componentOptions={columnsTypeOptionsWithEditCnTable.filter(
+          (col) => !['blocks-edit-table', 'blocks-table'].includes(col.value),
+        )}
+        onAdd={() => onAddHandle('columns')}
+        onRemove={(index) => onRemoveHandle(index, 'columns')}
+        onChange={({ index, record }) => onChangeHandle({ index, record }, 'columns')}
+        onSort={(newList) => {
+          schema.setItemAll(newList, 'columns', true);
+        }}
+      />
+    </div>
+  );
+}

package/src/template/blocks/Filter.jsx

@@ -0,0 +1,137 @@
+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 { componentOptions } from '../const';
+
+import { propFields } from '$src/common/comp-schema/fields/propFields';
+
+
+const Default_Add_Schema = {
+  type: 'input',
+  label: '输入框',
+  name: '',
+  input: propFields.input,
+};
+
+// 缓存保存逻辑下拉数据源
+const Save_Selected_Options = [
+  {
+    label: '不开启',
+    value: '',
+  },
+  {
+    label: '开启客户端缓存',
+    value: 'local',
+  },
+  {
+    label: '开启服务端缓存',
+    value: 'server',
+  },
+];
+
+const FormColOpts = [
+  {
+    label: '自适应',
+    value: 0,
+  },
+  {
+    label: '1',
+    value: 1,
+  },
+  {
+    label: '2',
+    value: 2,
+  },
+  {
+    label: '3',
+    value: 3,
+  },
+  {
+    label: '4',
+    value: 4,
+  },
+  {
+    label: '5',
+    value: 5,
+  },
+  {
+    label: '6',
+    value: 6,
+  },
+  {
+    label: '7',
+    value: 7,
+  },
+  {
+    label: '8',
+    value: 8,
+  },
+];
+
+export default function FilterPanel({ schema, swaggerFields = [] }) {
+  const mddFormRef = React.useRef();
+  const [_, forceUpdate] = React.useState({});
+  React.useEffect(() => {
+    schema.on('$updated', (changeData, ignoreUpdate) => {
+      !ignoreUpdate && forceUpdate({});
+    });
+  }, []);
+
+  const fields = schema.get('fields');
+
+  const refreshMddTableForm = () => {
+    mddFormRef.current?.updateData(schema.get('fields'));
+  };
+
+  const onAddHandle = () => {
+    schema.add(Default_Add_Schema, 'fields', true);
+    refreshMddTableForm();
+  };
+  const onRemoveHandle = (index) => {
+    schema.remove(index, 'fields', true);
+    refreshMddTableForm();
+  };
+
+  const onChangeHandle = ({ index, record }) => {
+    // 移除多余propsField
+    for (const k in propFields) {
+      if (record.type !== k) {
+        !['name'].includes(k) && delete record[k];
+      }
+    }
+
+    schema.update(index, record, 'fields', true);
+  };
+
+  return (
+    <div>
+      {/* MddTableForm 组件已经内置了状态，在需要update的时候再刷新，不要每次schema变化就刷新  */}
+      <MddTableForm
+        ref={mddFormRef}
+        data={fields}
+        penetrateType={PenetrateTypes.FILTER}
+        componentOptions={componentOptions}
+        title="配置查询条件"
+        onAdd={onAddHandle}
+        onRemove={onRemoveHandle}
+        onChange={onChangeHandle}
+        swaggerFieldDataSource={swaggerFields}
+        onSort={(newList) => {
+          schema.setFieldsAll(newList, true);
+        }}
+      />
+    </div>
+  );
+}
+
+/**
+ * 兼容老的格式，老格式是boolean 类型现在改成string类型
+ * https://alidocs.dingtalk.com/i/nodes/Obva6QBXJwxNZoMOC34Bmylx8n4qY5Pr
+ */
+function adaptorSaveSelected(enableSaveSelected) {
+  if (typeof enableSaveSelected === 'boolean') {
+    return enableSaveSelected === true ? Save_Selected_Options[1].value : Save_Selected_Options[0].value;
+  }
+  return enableSaveSelected;
+}