@cniot/mdd-editor 0.2.0-beta.5 → 0.2.0-beta.51

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

@@ -0,0 +1,79 @@
+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 { columnsTypeOptionsWithCnTable } from '../const';
+
+export default function TablePanel({ schema }) {
+  const columnMddFormRef = React.useRef();
+
+  const [_, forceUpdate] = useState({});
+
+  useEffect(() => {
+    schema.on('$updated', (changeData, ignoreUpdate) => {
+      !ignoreUpdate && forceUpdate({});
+    });
+
+    // hack处理
+    hackRowDetail(schema);
+  }, []);
+
+
+  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);
+    if (key === 'columns') {
+      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={columnsTypeOptionsWithCnTable.filter(col => col.value !== 'blocks-table')}
+        onAdd={() => onAddHandle('columns')}
+        onRemove={(index) => onRemoveHandle(index, 'columns')}
+        onChange={({ index, record }) => onChangeHandle({ index, record }, 'columns')}
+        onSort={(newList) => {
+          schema.setItemAll(newList, 'columns', true);
+        }}
+      />
+    </div>
+  );
+}
+
+// 处理rowDetail字段改成 rowDetailModule字段的问题
+function hackRowDetail(schema) {
+  const rowDetail = schema.get('rowDetail');
+  if (rowDetail) {
+    schema.set('rowDetail', undefined);
+  }
+}

package/src/template/blocks/index.module.scss

@@ -0,0 +1,33 @@
+.customTabItem {
+  padding: 8px;
+}
+
+.tabTitle {
+  font-size: 14px;
+}
+
+.tabLabel {
+  display: inline-block;
+  padding: 0 2px;
+}
+
+:global {
+  .mdd-tip {
+    color: #999;
+    display: inline;
+    padding-left: 20px;
+  }
+}
+
+.middleBox {
+  margin-left: '10px';
+  margin-bottom: 8px;
+  display: flex;
+}
+.middleBoxLeft {
+  width: 100px;
+  text-align: right;
+}
+.middleBoxRight {
+  flex: 1;
+}

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 = [
   {
@@ -185,6 +191,10 @@ export const columnsTypeOptionsWithCnTable = [
   //   value: 'cn-file',
   //   label: '附件',
   // },
+  {
+    value: 'blocks-table',
+    label: '列表区块',
+  },
 ];
 
 // edit table 只有文本
@@ -225,7 +235,14 @@ export const columnsTypeOptionsWithEditCnTable = [
     value: 'edit-cascader-select',
     label: '级联选择器',
   },
-
+  {
+    value: 'blocks-table',
+    label: '列表区块',
+  },
+  {
+    value: 'blocks-edit-table',
+    label: '可编辑表格区块',
+  },
   {
     value: 'edit-custom',
     label: '自定义',

package/src/template/detail/DetailItems.jsx

@@ -1,11 +1,12 @@
 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';
 import DetailCustom from './components/DetailCustom';
 import DetailStaticStep from './components/DetailStaticStep';
+import DetailColumns from './components/DetailColumns';
 import styles from './index.module.scss';
 
 const typeContent = [
@@ -37,6 +38,13 @@ const typeContent = [
       return <DetailStaticStep {...props} />;
     },
   },
+  {
+    label: '布局',
+    value: 'detail-columns',
+    contentRender: (props) => {
+      return <DetailColumns {...props} />;
+    },
+  },
   {
     label: '内嵌页面',
     value: 'import-component',
@@ -62,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

@@ -0,0 +1,296 @@
+import React from 'react';
+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 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 styles from './DetailColumns.module.scss';
+
+const { Panel } = Collapse;
+
+export default function DetailColumns(props) {
+  const { data, index: idx, onChange } = props;
+  const [_, forceUpdate] = React.useState({});
+
+  // 当是 详情 分栏时 把 hideCardTitle 默认置为 true
+  React.useEffect(() => {
+    data.set('hideCardTitle', true);
+    forceUpdate();
+
+    return () => {
+      data.set('hideCardTitle', false);
+      forceUpdate();
+    };
+  }, []);
+
+  const onAddHandle = () => {
+    data.add(
+      {
+        moduleName: '',
+        hideSelfCard: true,
+        params: [],
+        canUpdateOtherColumns: true,
+        canBeUpdated: true,
+      },
+      'columnsBoxes',
+    );
+    forceUpdate({});
+  };
+  const onRemoveHandle = (index) => {
+    data.remove(index, 'columnsBoxes');
+    forceUpdate({});
+  };
+
+  const onChangeHandle = ({ index, record }) => {
+    data.update(index, record, 'columnsBoxes');
+    forceUpdate({});
+  };
+
+  return (
+    <Form
+      labelCol={{ span: 4 }}
+      wrapperCol={{ span: 19 }}
+      size="small"
+      onChange={(values, item) => {
+        data.set(item.name, item.value);
+        onChange({ index: idx, record: data });
+      }}
+    >
+      <Form.Item labelAlign="left" label="布局方式" name="columnsDirection">
+        <CnRadioGroup defaultValue={data.get('columnsDirection')}>
+          <CnRadio value="row">左右布局</CnRadio>
+          <CnRadio value="column">上下布局</CnRadio>
+        </CnRadioGroup>
+      </Form.Item>
+      <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')}
+          titleRender={customTitleRender}
+          contentRender={contentRender}
+          title="配置分栏信息"
+          tip={'左右布局时，占列数之和应为24'}
+          onChange={onChangeHandle}
+          onSort={(newList) => {
+            data.setItemAll(newList, 'columnsBoxes');
+            forceUpdate({});
+          }}
+          onAdd={onAddHandle}
+          onRemove={(index) => onRemoveHandle(index)}
+          otherInfo={{ columnsDirection: data.get('columnsDirection') }}
+          // onRemove={onRemoveHandle}
+        />
+      </Form.Item>
+      {data.get('hideCardTitle') ? null : <ActionPanel schema={data} />}
+    </Form>
+  );
+}
+
+function customTitleRender(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>
+      {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>
+  );
+}
+
+const layoutConfig = {
+  wrapperCol: { span: 16 },
+  labelCol: { span: 8 },
+};
+
+function contentRender(props) {
+  return <ContentRender {...props} />;
+}
+
+const ContentRender = (props) => {
+  const { data, index, onChange, otherInfo = {} } = props;
+  // const [_, forceUpdate] = React.useState({});
+
+  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
+        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>
+        } name="">
+          <CnSwitch
+            defaultChecked={data?.canBeUpdated}
+            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>
+    </>
+  );
+};

package/src/template/detail/components/DetailColumns.module.scss

@@ -0,0 +1,18 @@
+.title {
+    width: 100%;
+  display: flex;
+  gap: 12px;
+}
+
+.titleItem {
+  display: flex;
+  align-items: center;
+}
+
+
+.titleItemLabel {
+    padding-right: 12px;
+    &:first-of-type{
+        padding-left: 0;
+    }
+}

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';
 
 /**
  * 自定义详情内容， 引入源码、其他页面等