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

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

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

@@ -1,16 +1,27 @@
 import React from 'react';
-import { Select, Form, CnNumberPicker, Dialog, CnSwitch, CnRadioGroup, CnRadio, Collapse, Icon, Balloon, } from '@cainiaofe/cn-ui';
+import {
+  Select,
+  Form,
+  CnNumberPicker,
+  CnTooltip,
+  Dialog,
+  CnSwitch,
+  CnRadioGroup,
+  CnRadio,
+  Collapse,
+  Icon,
+  Balloon,
+} 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 MddTableSimpleArray from '@src/components/mdd-table-simple-array';
-import FormilySelect from '@src/components/formily-select';
-import TableFormProxy from '@src/components/ajax-schema-form/formily-table-form-proxy';
-import { columnsTypeOptions } from '../../const';
+import useSwagger from '$src/hooks/useSwagger';
+import buildSwaggerApiJson from '$src/utils/buildSwaggerApiJson';
+import buildFieldsToCompJson from '$src/utils/buildFieldsToCompJson';
+import MddTableSimpleArray from '$src/components/mdd-table-simple-array';
+import FormilySelect from '$src/components/formily-select';
+import TableFormProxy from '$src/components/ajax-schema-form/formily-table-form-proxy';
 import styles from './DetailColumns.module.scss';
 
 const { Panel } = Collapse;
@@ -24,14 +35,17 @@ export default function DetailColumns(props) {
     data.set('hideCardTitle', true);
     forceUpdate();
 
-    return () => { data.set('hideCardTitle', false); forceUpdate(); };
-  }, [])
+    return () => {
+      data.set('hideCardTitle', false);
+      forceUpdate();
+    };
+  }, []);
 
   const onAddHandle = () => {
     data.add(
       {
         moduleName: '',
-        cols: 1,
+        hideSelfCard: true,
         params: [],
         canUpdateOtherColumns: true,
         canBeUpdated: true,
@@ -66,9 +80,18 @@ export default function DetailColumns(props) {
           <CnRadio value="column">上下布局</CnRadio>
         </CnRadioGroup>
       </Form.Item>
-      <Form.Item labelAlign="left" label="隐藏卡片头部" name="hideCardTitle">
-        <CnSwitch checked={data.get('hideCardTitle')} />
+      <Form.Item labelAlign="left" label="高度" name="height">
+        <CnNumberPicker defaultValue={data.get('height')} min={0} max={100} innerAfter="%" style={{ width: 90 }} />
+        <CnTooltip trigger={<Icon type="prompt" style={{ marginLeft: 6 }} />}>0-100 的整数，0 表示自动高度</CnTooltip>
       </Form.Item>
+      <Form.Item labelAlign="left" label="隐藏父级卡片" name="hideCard">
+        <CnSwitch checked={data.get('hideCard')} />
+      </Form.Item>
+      {!data.get('hideCard') && (
+        <Form.Item labelAlign="left" label="隐藏父级卡片头部" name="hideCardTitle">
+          <CnSwitch checked={data.get('hideCardTitle')} />
+        </Form.Item>
+      )}
       <Form.Item labelAlign="top" label="">
         <MddTableSimpleArray
           data={data.get('columnsBoxes')}
@@ -83,7 +106,8 @@ export default function DetailColumns(props) {
           }}
           onAdd={onAddHandle}
           onRemove={(index) => onRemoveHandle(index)}
-        // onRemove={onRemoveHandle}
+          otherInfo={{ columnsDirection: data.get('columnsDirection') }}
+          // onRemove={onRemoveHandle}
         />
       </Form.Item>
       {data.get('hideCardTitle') ? null : <ActionPanel schema={data} />}
@@ -91,100 +115,143 @@ export default function DetailColumns(props) {
   );
 }
 
-
 function customTitleRender(props) {
-  const { data, index, onChange, moduleDataSource } = props;
+  const { data, index, onChange, moduleDataSource, otherInfo = {} } = props;
 
-  return <div className={styles.title}>
-    <div className={styles.titleItem} >
-      <label className={styles.titleItemLabel}>模块地址</label>
-      <Select.AutoComplete
-        placeholder='请选择或者输入模块地址'
-        hasClear
-        size='small'
-        style={{
-          minWidth: 280,
-        }}
-        dataSource={moduleDataSource?.l4ModuleOptions || moduleDataSource || []}
-
-        value={data?.moduleName}
-        onChange={(v) => onChange({ ...data, moduleName: v })}
-      />
-    </div>
-    <div className={styles.titleItem}>
-      <label className={styles.titleItemLabel}>
-        <Balloon trigger={<div style={{ display: 'flex', alignItems: 'center' }}>占列数 <Icon type="help" size="small" /></div>} align="t">
-          <b>左右布局时，占列数之和应为24</b>
-        </Balloon>
-      </label>
-      <CnNumberPicker
-        size="small"
-        min={0}
-        max={24}
-        value={data?.cols}
-        onChange={(v) => onChange({ ...data, cols: v })}
-        placeholder="占列数 之和应为24"
-      />
+  return (
+    <div className={styles.title}>
+      <div className={styles.titleItem}>
+        <label className={styles.titleItemLabel}>模块地址</label>
+        <Select.AutoComplete
+          placeholder="请选择或者输入模块地址"
+          hasClear
+          size="small"
+          style={{
+            minWidth: 280,
+          }}
+          dataSource={moduleDataSource?.l4ModuleOptions || moduleDataSource || []}
+          value={data?.moduleName}
+          onChange={(v) => onChange({ ...data, moduleName: v })}
+        />
+      </div>
+      {otherInfo?.columnsDirection === 'row' && (
+        <div className={styles.titleItem}>
+          <label className={styles.titleItemLabel}>
+            <Balloon
+              trigger={
+                <div style={{ display: 'flex', alignItems: 'center' }}>
+                  占列数 <Icon type="help" size="small" />
+                </div>
+              }
+              align="t"
+            >
+              <b>左右布局时，占列数之和应为24</b>
+            </Balloon>
+          </label>
+          <CnNumberPicker
+            size="small"
+            min={0}
+            max={24}
+            value={data?.cols}
+            onChange={(v) => onChange({ ...data, cols: v })}
+            placeholder="占列数 之和应为24"
+          />
+        </div>
+      )}
     </div>
-  </div>
+  );
 }
 
 const layoutConfig = {
   wrapperCol: { span: 16 },
-  labelCol: { span: 8 }
-}
+  labelCol: { span: 8 },
+};
 
 function contentRender(props) {
-  return <ContentRender {...props} />
+  return <ContentRender {...props} />;
 }
 
 const ContentRender = (props) => {
-  const { data, index, onChange } = props;
+  const { data, index, onChange, otherInfo = {} } = props;
   // const [_, forceUpdate] = React.useState({});
 
-  return <>
-    <Form.Item name=""
-      wrapperCol={{ span: 22 }}
-      labelCol={{ span: 2 }}
-      style={{ position: 'relative' }}
-      label={
-        <div>
-          参数
-          <a
-            rel="noreferrer"
-            target="_blank"
-            href="https://yuque.antfin.com/docs/share/b146be2b-dec0-4f0d-80e4-c11a34a701bc"
-            title="在vscode插件中按住ctrl再点击查看"
-            className="help-link"
-          >
-            帮助
-          </a>
-        </div>
-      }
-    >
-      <TableFormProxy
-        keyTitle={'key(参数名)'}
-        valueTitle={'value(参数值) - .$ALL 可获取整个动态对象'}
-        value={data?.params}
-        onChange={(v) => onChange({ index, record: { ...data, params: v } })}
-      />
-    </Form.Item>
-    <Collapse accordion>
-      <Panel
-        title={
-          <Balloon trigger={<div style={{ width: 'fit-content', display: 'flex', alignItems: 'center' }}>其他配置：<Icon type="help" size="small" /></div>} align="t">
-            配置以下属性后，方可在每个分栏中 使用【触发其他分栏刷新】事件，引擎会监听 并自动更新其他分栏（触发一个 detail:updateColumns 事件。若分栏为 FTP 类型 则支持自动刷新，其他页面类型暂不支持）。
-            <div><b>建议在每个分栏模块中写胶水代码，手动控制其他分栏刷新。</b></div>
-          </Balloon>
-        }
-      >
-        <Form.Item {...layoutConfig} label="可以触发其他分栏刷新" name="">
-          <CnSwitch
-            defaultChecked={data?.canUpdateOtherColumns}
-            onChange={(v) => onChange({ index, record: { ...data, canUpdateOtherColumns: v } })}
+  return (
+    <>
+      {otherInfo?.columnsDirection === 'column' && (
+        <Form.Item wrapperCol={{ span: 20 }} labelCol={{ span: 4 }} label="高度" name="">
+          <CnNumberPicker
+            min={0}
+            max={100}
+            innerAfter="%"
+            style={{ width: 90 }}
+            defaultValue={data?.height}
+            onChange={(v) => onChange({ index, record: { ...data, height: v } })}
           />
+          <CnTooltip trigger={<Icon type="prompt" style={{ marginLeft: 6 }} />}>
+            仅在上下布局中生效：0-100 的整数，0 表示自动高度
+          </CnTooltip>
         </Form.Item>
-        {/* <Form.Item {...layoutConfig} label={
+      )}
+      <Form.Item
+        name=""
+        wrapperCol={{ span: 20 }}
+        labelCol={{ span: 4 }}
+        style={{ position: 'relative' }}
+        label={
+          <div>
+            参数
+            <a
+              rel="noreferrer"
+              target="_blank"
+              href="https://yuque.antfin.com/docs/share/b146be2b-dec0-4f0d-80e4-c11a34a701bc"
+              title="在vscode插件中按住ctrl再点击查看"
+              className="help-link"
+            >
+              帮助
+            </a>
+          </div>
+        }
+      >
+        <TableFormProxy
+          keyTitle={'key(参数名)'}
+          valueTitle={'value(参数值) - .$ALL 可获取整个动态对象'}
+          value={data?.params}
+          onChange={(v) => onChange({ index, record: { ...data, params: v } })}
+        />
+      </Form.Item>
+      <Form.Item wrapperCol={{ span: 20 }} labelCol={{ span: 4 }} label="隐藏 当前栏 卡片" name="">
+        <CnSwitch
+          defaultChecked={data?.hideSelfCard}
+          onChange={(v) => onChange({ index, record: { ...data, hideSelfCard: v } })}
+        />
+      </Form.Item>
+      <Collapse accordion>
+        <Panel
+          title={
+            <Balloon
+              trigger={
+                <div style={{ width: 'fit-content', display: 'flex', alignItems: 'center' }}>
+                  其他配置：
+                  <Icon type="help" size="small" />
+                </div>
+              }
+              align="t"
+            >
+              配置以下属性后，方可在每个分栏中 使用【触发其他分栏刷新】事件，引擎会监听 并自动更新其他分栏（触发一个
+              detail:updateColumns 事件。若分栏为 FTP 类型 则支持自动刷新，其他页面类型暂不支持）。
+              <div>
+                <b>建议在每个分栏模块中写胶水代码，手动控制其他分栏刷新。</b>
+              </div>
+            </Balloon>
+          }
+        >
+          <Form.Item {...layoutConfig} label="可以触发其他分栏刷新" name="">
+            <CnSwitch
+              defaultChecked={data?.canUpdateOtherColumns}
+              onChange={(v) => onChange({ index, record: { ...data, canUpdateOtherColumns: v } })}
+            />
+          </Form.Item>
+          {/* <Form.Item {...layoutConfig} label={
           <Balloon trigger={<div>可被其他分栏刷新<Icon type="help" size="small" /></div>} align="t">
             <b>以FTP页面格式 被更新，其他页面类型暂不支持</b>
           </Balloon>
@@ -194,23 +261,36 @@ const ContentRender = (props) => {
             onChange={(v) => onChange({ index, record: { ...data, canBeUpdated: v } })}
           />
         </Form.Item> */}
-        <Form.Item {...layoutConfig} label={'可被其他分栏刷新'} name="">
-          <CnSwitch
-            defaultChecked={data?.canBeUpdated}
-            onChange={(v) => onChange({ index, record: { ...data, canBeUpdated: v } })}
-          />
-        </Form.Item>
-        <Form.Item {...layoutConfig} label={
-          <Balloon trigger={<div >当前分栏为FTP时自动刷新<Icon type="help" size="small" /></div>} align="t">
-            <b>以FTP页面格式 被更新，其他页面类型暂不支持</b>
-          </Balloon>
-        } name="">
-          <CnSwitch
-            defaultChecked={data?.autoUpdateWhenIsFTP}
-            onChange={(v) => onChange({ index, record: { ...data, autoUpdateWhenIsFTP: v } })}
-          />
-        </Form.Item>
-      </Panel>
-    </Collapse>
-  </>
-}
+          <Form.Item {...layoutConfig} label={'可被其他分栏刷新'} name="">
+            <CnSwitch
+              defaultChecked={data?.canBeUpdated}
+              onChange={(v) => onChange({ index, record: { ...data, canBeUpdated: v } })}
+            />
+          </Form.Item>
+          <Form.Item
+            {...layoutConfig}
+            label={
+              <Balloon
+                trigger={
+                  <div>
+                    当前分栏为FTP时自动刷新
+                    <Icon type="help" size="small" />
+                  </div>
+                }
+                align="t"
+              >
+                <b>以FTP页面格式 被更新，其他页面类型暂不支持</b>
+              </Balloon>
+            }
+            name=""
+          >
+            <CnSwitch
+              defaultChecked={data?.autoUpdateWhenIsFTP}
+              onChange={(v) => onChange({ index, record: { ...data, autoUpdateWhenIsFTP: v } })}
+            />
+          </Form.Item>
+        </Panel>
+      </Collapse>
+    </>
+  );
+};

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Form, Input, Switch, Select } from '@cainiaofe/cn-ui';
 import ActionPanel from './Actions';
-import TableFormProxy from '@src/components/ajax-schema-form/table-form-proxy';
-import useModule from '@src/hooks/useModule';
+import TableFormProxy from '$src/components/ajax-schema-form/table-form-proxy';
+import useModule from '$src/hooks/useModule';
 
 /**
  * 自定义详情内容， 引入源码、其他页面等