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

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;
+}

package/src/template/blocks/Form.jsx

@@ -0,0 +1,136 @@
+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 { FormComponentOptions } 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.FORM}
+        componentOptions={FormComponentOptions}
+        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;
+}

package/src/template/blocks/Table.jsx

@@ -1,11 +1,11 @@
 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 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 = [] }) {
+export default function TablePanel({ schema }) {
   const columnMddFormRef = React.useRef();
 
   const [_, forceUpdate] = useState({});

package/src/template/const.js

@@ -78,6 +78,12 @@ export const componentOptions = [
   },
 ];
 
+export const FormComponentOptions = [...componentOptions];
+FormComponentOptions.splice(3, 0, { value: 'input-password', label: '密码输入框' });
+FormComponentOptions.splice(3, 0, { value: 'message', label: '信息提示' });
+FormComponentOptions.splice(3, 0, { value: 'global-phone-picker', label: '国际电话输入框' });
+// FormComponentOptions.splice(8, 1); // 表单去除级联选择器
+
 // 列类型数据
 export const columnsTypeOptions = [
   {
@@ -120,10 +126,6 @@ export const columnsTypeOptions = [
     value: 'images',
     label: '附件/图片',
   },
-  {
-    value: 'blocks-table',
-    label: '列表区块',
-  },
   {
     value: 'custom',
     label: '自定义',
@@ -189,6 +191,10 @@ export const columnsTypeOptionsWithCnTable = [
   //   value: 'cn-file',
   //   label: '附件',
   // },
+  {
+    value: 'blocks-table',
+    label: '列表区块',
+  },
 ];
 
 // edit table 只有文本
@@ -229,10 +235,18 @@ export const columnsTypeOptionsWithEditCnTable = [
     value: 'edit-cascader-select',
     label: '级联选择器',
   },
+  {
+    value: 'upload',
+    label: 'OSS上传',
+  },
   {
     value: 'blocks-table',
     label: '列表区块',
   },
+  {
+    value: 'blocks-edit-table',
+    label: '可编辑表格区块',
+  },
   {
     value: 'edit-custom',
     label: '自定义',

package/src/template/detail/DetailItems.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Input, Select, Balloon, Icon } from '@cainiaofe/cn-ui';
-import MddTableArray from '@src/components/mdd-table-array';
+import MddTableArray from '$src/components/mdd-table-array';
 import DetailCard from './components/DetailCard';
 import DetailImageView from './components/DetailImageView';
 import DetailTable from './components/DetailTable';
@@ -70,6 +70,11 @@ const customTitleRender = (props) => {
       // 类型是步骤条
       data.initStepSource();
     }
+    if (key === 'type' && val === 'detail-columns') {
+      data.set('hideCard', true);
+    } else {
+      data.set('hideCard', false);
+    }
     onChange(data);
   };
   return (

package/src/template/detail/components/Actions.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 ActionsPanel({ schema }) {
   const mddFormRef = React.useRef();

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

@@ -1,13 +1,16 @@
 import React from 'react';
 import { Form, CnNumberPicker, Dialog, CnSwitch, CnRadioGroup, CnRadio } from '@cainiaofe/cn-ui';
-import MddTableForm from '@src/components/mdd-table-form';
+import MddTableForm from '$src/components/mdd-table-form';
 import MultiAjaxSchemaForm from './MultiAjaxSchemaForm';
 import ActionPanel from './Actions';
-import useSwagger from '@src/hooks/useSwagger';
-import buildSwaggerApiJson from '@src/utils/buildSwaggerApiJson';
-import buildFieldsToCompJson from '@src/utils/buildFieldsToCompJson';
+import useSwagger from '$src/hooks/useSwagger';
+import buildSwaggerApiJson from '$src/utils/buildSwaggerApiJson';
+import buildFieldsToCompJson from '$src/utils/buildFieldsToCompJson';
 import { columnsTypeOptions } from '../../const';
 
+const _columnsTypeOptions = [...columnsTypeOptions];
+_columnsTypeOptions.splice(5, 0, { value: 'message', label: '信息提示' });
+
 // 额外formily schema字段
 const extraFieldSchema = {
   renderToTitle: {
@@ -141,7 +144,7 @@ export default function DetailCard(props) {
           title=""
           extraFieldSchema={extraFieldSchema}
           swaggerFieldDataSource={responseFields}
-          componentOptions={columnsTypeOptions}
+          componentOptions={_columnsTypeOptions}
           onAdd={() => onAddHandle()}
           onRemove={(index) => onRemoveHandle(index)}
           onChange={({ index, record }) => onChangeHandle({ index, record })}