# CardDetailForm 事项卡片

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/card-detail-form/freepass)
- 平台：PC
- 维护者：蒋贝贝
- 设计稿：http://pd.e-cology.com.cn/pd/E10/interface/e10xiaoguotu/PC/sjl/kpxqwzb/
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[CardDetailForm]

## 代码演示

### 基础用法

直接引入组件进行使用

```jsx
import { Component } from 'react';
import {
  CardDetailForm, constants, CardDetailFormItemProps, CardDetailFormStore,
  FormDatas, FormLayoutType, FormStore, Form, FormItemProps, Title, Button,
  BaseProps, Trigger, SelectOptionProps, utils,
} from '@weapp/ui';
import CardDetailFormDemoStore from "./store";
import { observer } from 'mobx-react';
import { listDataParams, mockFetchData } from './document';
import { classnames } from '@weapp/utils';
import imgSrc from "../../../../assets/images/ODTLcjxAfvqbxHnVXCYX.png"
const { needRTL } = utils;

let defaultSelectedData = [
  {
    id: `id_3`,
    user: `用户_3`,
    time: `2018-09-03`,
    name: `选项(3)`,
    icon: 'Icon-personnel',
  },
]

const { uiPcClsPrefix, cardDetailFormClsPrefix } = constants;
interface CardDetailFormDemoProps {
}
interface CustomRenderItemProps extends BaseProps {
}

interface UrgencyOptionsProps extends BaseProps {
  options: SelectOptionProps[],
}
interface SingleUrgencyOptionProps extends BaseProps {
  data: SelectOptionProps;
}
const prefixCls = `${uiPcClsPrefix}-demo-card-detail-form`;

const cardDetailFormDemoStore = new CardDetailFormDemoStore();

const items: CardDetailFormItemProps = {
  'normal_alwaysShow': {
    itemType: 'INPUT',
    showGroupId: 'normal',
    showType: 'alwaysShow',
    required: true,
  },
  'alwaysShow_alwaysShow': {
    itemType: 'INPUT',
    showType: 'alwaysShow',
    showGroupId: 'alwaysShow',
  },
  'collapsible': {
    itemType: 'INPUT',
    showType: 'collapsible',
    required: true,
  },
  'tags_notEmpty_normal': {
    itemType: 'INPUT',
    placeholder: 'task',
    otherParams: {
      showType: 'notEmpty',
      showGroupId: 'normal',
    }
    // //autoFocus: true,
  },
  'tags_notEmpty_alwaysShow': {
    itemType: 'INPUT',
    placeholder: 'task',
    showType: 'notEmpty',
    showGroupId: 'alwaysShow',
    //autoFocus: true,
    otherParams: {
    },
  },
  'tags_notEmpty_alwaysShow2': {
    itemType: 'INPUT',
    placeholder: 'task',
    showType: 'notEmpty',
    showGroupId: 'alwaysShow',
    //autoFocus: true,
    otherParams: {
    },
  },
  'tags_collapsible_collapsible': {
    itemType: 'INPUT',
    placeholder: 'task',
    showType: 'collapsible',
    showGroupId: 'collapsible',
    //autoFocus: true,
    otherParams: {
    },
  },
  'tags_notEmpty_follow': {
    itemType: 'INPUT',
    placeholder: 'task',
    showType: 'notEmpty',
    showGroupId: 'follow',
    //autoFocus: true,
    otherParams: {
    },
  },
  'follow': {
    itemType: 'INPUT',
    showType: 'follow',
    value: '1',
  },
}

let layout: FormLayoutType[] = [
  [
    { id: '1', label: '始终展示区域A', items: ['normal_alwaysShow'], labelSpan: 6, hide: false, groupId: 'normal', order: 1 }, //A
  ],
  [
    { id: '3', label: '始终展示区域B', items: ['alwaysShow_alwaysShow'], labelSpan: 6, hide: false, groupId: 'alwaysShow', order: 2 }, //B
  ],
  [
    { id: '5', label: '跟随折叠隐藏区域-默认字段', items: ['collapsible'], labelSpan: 6, hide: false, groupId: 'collapsible', order: 2 }, //C
  ],
  [
    { id: '7', label: 'A区有值时展示', items: ['tags_notEmpty_normal'], icon: 'Icon-Associated-tasks', labelSpan: 6, hide: false, groupId: 'tags', order: 2 }, //C
    { id: '9', label: 'B区有值时展示', items: ['tags_notEmpty_alwaysShow'], icon: 'Icon-Associated-tasks', labelSpan: 6, hide: false, groupId: 'tags', order: 1 },
    { id: '8', label: 'B区有值时展示2', items: ['tags_notEmpty_alwaysShow2'], icon: 'Icon-Associated-tasks', labelSpan: 6, hide: false, groupId: 'tags', order: 3 },
    { id: '10', label: 'C区跟随展示', items: ['tags_collapsible_collapsible'], icon: 'Icon-Associated-tasks', labelSpan: 6, hide: false, groupId: 'tags', order: 1 },
    { id: '11', label: 'E区有值时展示', items: ['tags_notEmpty_follow'], icon: 'Icon-Associated-tasks', labelSpan: 6, hide: false, groupId: 'tags', order: 2 },
  ],
  [
    { id: '12', label: 'E区始终展示', items: ['follow'], labelSpan: 6, hide: false, groupId: 'follow', order: 1 }, //E
  ]
]

const cardDetailFormStore = new CardDetailFormStore();

@observer
class SingleUrgencyOption extends Component<SingleUrgencyOptionProps> {
  changeValue = () => {
    const { data: op } = this.props;
    cardDetailFormDemoStore.setValue(op.id);
  }
  render() {
    const { data: op } = this.props;
    const cls = classnames(`${cardDetailFormClsPrefix}-urgency`, {
      needRTL: needRTL?.(),
    })
    return (
      <div key={op.id} className={cls} onClick={this.changeValue}>
        <span className={`${cardDetailFormClsPrefix}-urgency-icon ${cardDetailFormClsPrefix}-urgency-icon-${op && op.className}`} />
        <span className={`${cardDetailFormClsPrefix}-urgency-content`}>{op && op.content}</span>
      </div>
    )
  }
}
@observer
class UrgencyOptions extends Component<UrgencyOptionsProps> {
  render() {
    const { options } = this.props;
    return (
      <div className={`${cardDetailFormClsPrefix}-urgency-options`}>
        {
          options.map((op) => {
            return (
              <SingleUrgencyOption data={op} key={op.id} />
            )
          })
        }
      </div>
    )
  }
}

// 紧急程度Urgency组件样式可引用组件内部统一样式，或自行开发
@observer
class Urgency extends Component<any> {
  childRef?: HTMLDivElement;
  getChildRef = (el: HTMLDivElement) => this.childRef = el;
  getOption = () => {
    const { props } = this.props;
    const { options } = props;
    const { value } = cardDetailFormDemoStore;
    return options.find((op: SelectOptionProps) => op.id === value);
  }
  getPopupContainer = () => this.childRef;
  render() {
    const { props } = this.props;
    const { options } = props;
    const op = this.getOption();
    return (
      <Trigger
       
        popup={(<UrgencyOptions options={options} />)}
        getPopupContainer={this.getPopupContainer}
      >
        <div className={`${cardDetailFormClsPrefix}-urgency`} ref={this.getChildRef}>
          <span className={`${cardDetailFormClsPrefix}-urgency-icon ${cardDetailFormClsPrefix}-urgency-icon-${op && op.className}`} />
          <span className={`${cardDetailFormClsPrefix}-urgency-content`}>{op && op.content}</span>
        </div>
      </Trigger>
    )
  }
}

@observer
class CardDetailFormDemo extends Component<CardDetailFormDemoProps> {
  formTopStore = new FormStore();
  componentDidMount() {
    const data: FormDatas = {
      'creater': '杨文元',
      'task': '1',
    };
    this.initCardDetailForm().then(() => {
      cardDetailFormStore.updateDatas({
      });
    })
    let topLayout: FormLayoutType[] = [
      [
        { id: '1', label: '负责人', items: ['creater'], labelSpan: 6, hide: false, groupId: 'normal', },
      ],
      [
        {
          id: '2', label: '到期日', items: ['date'], labelSpan: 6, hide: false, groupId: 'normal',
          className: `${cardDetailFormClsPrefix}-label`, // cardDetailForm组件特殊label字体颜色样式类名
        },
      ],
      [
        {
          id: '3', label: '紧急程度', items: ['urgency'], labelSpan: 6, hide: false, groupId: 'normal',
          className: `${cardDetailFormClsPrefix}-label`, // cardDetailForm组件特殊label字体颜色样式类名
        },
      ],
    ];
    const topItems: FormItemProps = {
      'creater': {
        itemType: 'INPUT',
        readOnly: true,
        // browserBean: {
        //   type: 'demo',
        //   module: 'common',
        //   // multiple: true,
        // },
        showType: 'alwaysShow',
      },
      'date': {
        showType: 'alwaysShow',
        readOnly: true,
        itemType: 'DESCRIPTION',
      },
      'urgency': {
        itemType: 'CUSTOM',
        readOnly: true,
        showType: 'alwaysShow',
        options: [
          { id: '1', content: '正常', className: 'normal' },
          { id: '2', content: '紧急', className: 'urgent' },
          { id: '3', content: '非常紧急', className: 'veryUrgent' },
        ],
      },
    }
    this.formTopStore.initForm({
      items: topItems, data: {
        'creater': '杨文元',
        'date': '2021-04-25',
        'urgency': '1',
      }, groups: [], layout: topLayout
    });
    cardDetailFormDemoStore.setValue('1');
  }
  initCardDetailForm = () => {
    return new Promise((resolve) => { // 模拟接口前后顺序
      const allDatas = {
        groups: [
          {
            "id": "normal",
            "title": "常用",
            "visible": true,
            "order": 1
          },
          {
            "id": "alwaysShow",
            "title": "总是显示",
            "visible": true,
            "order": 2
          },
          {
            "id": "collapsible",
            "title": "合并",
            "visible": true,
            "order": 3
          },
          {
            "id": "tags",
            "title": "标签",
            "visible": true,
            "order": 4
          },
          {
            "id": "follow",
            "title": "标签下方显示",
            "visible": true,
            "order": 5
          }
        ],
        layout: [
          [
            {
              "id": "mainline",
              "label": "关联项目",
              "labelSpan": 6,
              "order": 0,
              "groupId": "tags",
              "hide": false,
              "items": [
                "mainline"
              ],
              "icon": "Icon-project-management-o",
              "otherParams": {}
            },
            {
              "id": "document",
              "label": "关联文档",
              "labelSpan": 6,
              "order": 0,
              "groupId": "tags",
              "hide": false,
              "items": [
                "document"
              ],
              "icon": "Icon-Knowledge-document-o",
              "otherParams": {}
            },
            {
              "id": "task",
              "label": "关联任务",
              "labelSpan": 6,
              "order": 0,
              "groupId": "tags",
              "hide": false,
              "items": [
                "task"
              ],
              "icon": "Icon-task-o",
              "otherParams": {}
            },
            {
              "id": "customer",
              "label": "关联客户",
              "labelSpan": 6,
              "order": 0,
              "groupId": "tags",
              "hide": false,
              "items": [
                "customer"
              ],
              "icon": "Icon-customer-o",
              "otherParams": {}
            },
            {
              "id": "clue",
              "label": "关联线索",
              "labelSpan": 6,
              "order": 0,
              "groupId": "tags",
              "hide": false,
              "items": [
                "clue"
              ],
              "icon": "Icon-clue-o",
              "otherParams": {}
            },
            {
              "id": "saleChance",
              "label": "关联商机",
              "labelSpan": 6,
              "order": 0,
              "groupId": "tags",
              "hide": false,
              "items": [
                "saleChance"
              ],
              "icon": "Icon-business-opportunity-o",
              "otherParams": {}
            },
            {
              "id": "contract",
              "label": "关联合同",
              "labelSpan": 6,
              "order": 0,
              "groupId": "tags",
              "hide": false,
              "items": [
                "contract"
              ],
              "icon": "Icon-contract-o",
              "otherParams": {}
            },
            {
              "id": "production",
              "label": "关联产品",
              "labelSpan": 6,
              "order": 0,
              "groupId": "tags",
              "hide": false,
              "items": [
                "production"
              ],
              "icon": "Icon-product-o",
              "otherParams": {}
            },
            {
              "id": "competitor",
              "label": "关联对手",
              "labelSpan": 6,
              "order": 0,
              "groupId": "tags",
              "hide": false,
              "items": [
                "competitor"
              ],
              "icon": "Icon-competitor-o",
              "otherParams": {}
            },
            {
              "id": "contact",
              "label": "关联联系人",
              "labelSpan": 6,
              "order": 0,
              "groupId": "tags",
              "hide": false,
              "items": [
                "contact"
              ],
              "icon": "Icon-contacts-o",
              "otherParams": {}
            },
            {
              "id": "marketactivity",
              "label": "关联活动",
              "labelSpan": 6,
              "order": 0,
              "groupId": "tags",
              "hide": false,
              "items": [
                "marketactivity"
              ],
              "icon": "Icon-Marketing-activities-o",
              "otherParams": {}
            },
            {
              "id": "calendar",
              "label": "关联日程",
              "labelSpan": 6,
              "order": 0,
              "groupId": "tags",
              "hide": false,
              "items": [
                "calendar"
              ],
              "icon": "Icon-schedule-o",
              "otherParams": {}
            },
            {
              "id": "workreport",
              "label": "关联报告",
              "labelSpan": 6,
              "order": 0,
              "groupId": "tags",
              "hide": false,
              "items": [
                "workreport"
              ],
              "icon": "Icon-report-o",
              "otherParams": {}
            },
            {
              "id": "kpiFlow",
              "label": "关联绩效",
              "labelSpan": 6,
              "order": 0,
              "groupId": "tags",
              "hide": false,
              "items": [
                "kpiFlow"
              ],
              "icon": "Icon-performance-appraisal-o",
              "otherParams": {}
            },
            {
              "id": "email",
              "label": "关联邮件",
              "labelSpan": 6,
              "order": 0,
              "groupId": "tags",
              "hide": false,
              "items": [
                "email"
              ],
              "icon": "Icon-mail-o",
              "otherParams": {}
            },
            {
              "id": "workflow",
              "label": "关联流程",
              "labelSpan": 6,
              "order": 0,
              "groupId": "tags",
              "hide": false,
              "items": [
                "workflow"
              ],
              "icon": "Icon-Approval-process-o",
              "otherParams": {}
            },
            {
              "id": "formdatareport",
              "label": "关联数据",
              "labelSpan": 6,
              "order": 0,
              "groupId": "tags",
              "hide": false,
              "items": [
                "formdatareport",
                "frptreport"
              ],
              "icon": "Icon-report-form-o",
              "otherParams": {}
            },
            {
              "id": "biaoge",
              "label": "关联表单",
              "labelSpan": 6,
              "order": 0,
              "groupId": "tags",
              "hide": false,
              "items": [
                "biaoge"
              ],
              "icon": "Icon-Table-layout-o",
              "otherParams": {}
            },
            {
              "id": "folder",
              "label": "关联文件夹",
              "labelSpan": 6,
              "order": 0,
              "groupId": "tags",
              "hide": false,
              "items": [
                "folder"
              ],
              "icon": "Icon-folder",
              "otherParams": {}
            },
            {
              "id": "ebuilderform",
              "label": "关联e-builder",
              "labelSpan": 6,
              "order": 0,
              "groupId": "tags",
              "hide": false,
              "items": [
                "ebuilderObjform",
                "ebuilderform"
              ],
              "icon": "Icon-e-builder-o",
              "otherParams": {}
            }
          ]
        ],
        items: {
          "capital": {
            "itemType": "BROWSER",
            "visible": true,
            "disable": false,
            "required": false,
            "readOnly": false,
            "multiple": false,
            "common": true,
            "browserBean": {
              "hasAdvanceSearch": true,
              "hasLeftData": false,
              "disabledTabCache": false,
              "showCheckStrictly": true,
              "canSelectAllUser": false,
              "defaultCheckStrictly": true,
              "defaultAccount": false,
              "enableAddData": false,
              "enableExtendButton": false,
              "defaultStopDept": false,
              "module": "crm",
              "type": "capital",
              "multiple": true,
              "defaultOpen": false,
              "multType": false,
              "multCheckbox": false
            },
            "otherParams": {
              "showType": "notEmpty",
              "showGroupId": "alwaysShow"
            }
          },
          "production": {
            "itemType": "BROWSER",
            "visible": true,
            "disable": false,
            "required": false,
            "readOnly": false,
            "multiple": false,
            "common": true,
            "browserBean": {
              "hasAdvanceSearch": true,
              "hasLeftData": false,
              "disabledTabCache": false,
              "showCheckStrictly": true,
              "canSelectAllUser": false,
              "defaultCheckStrictly": true,
              "defaultAccount": false,
              "enableAddData": false,
              "enableExtendButton": false,
              "defaultStopDept": false,
              "module": "crm",
              "type": "production",
              "multiple": true,
              "defaultOpen": false,
              "multType": false,
              "multCheckbox": false
            },
            "otherParams": {
              "showType": "notEmpty",
              "showGroupId": "alwaysShow"
            }
          },
          "marketactivity": {
            "itemType": "BROWSER",
            "visible": true,
            "disable": false,
            "required": false,
            "readOnly": false,
            "multiple": false,
            "common": true,
            "browserBean": {
              "hasAdvanceSearch": true,
              "hasLeftData": false,
              "disabledTabCache": false,
              "showCheckStrictly": true,
              "canSelectAllUser": false,
              "defaultCheckStrictly": true,
              "defaultAccount": false,
              "enableAddData": false,
              "enableExtendButton": false,
              "defaultStopDept": false,
              "module": "crm",
              "type": "marketactivity",
              "multiple": true,
              "defaultOpen": false,
              "multType": false,
              "multCheckbox": false
            },
            "otherParams": {
              "showType": "notEmpty",
              "showGroupId": "alwaysShow"
            }
          },
          "document": {
            "itemType": "BROWSER",
            "visible": true,
            "disable": false,
            "required": false,
            "readOnly": false,
            "multiple": false,
            "common": true,
            "browserBean": {
              "hasAdvanceSearch": true,
              "hasLeftData": false,
              "disabledTabCache": false,
              "showCheckStrictly": true,
              "canSelectAllUser": false,
              "browserAssociativeProps": {
                "enableAddData": true,
                "addInfo": "添加文档"
              },
              "propParams": {
                "folderType": "company",
                "folderId": "200"
              },
              "defaultCheckStrictly": true,
              "defaultAccount": false,
              "enableAddData": false,
              "enableExtendButton": false,
              "defaultStopDept": false,
              "module": "doc",
              "type": "document",
              "multiple": true,
              "defaultOpen": false,
              "multType": false,
              "multCheckbox": false
            },
            "otherParams": {
              "showType": "notEmpty",
              "showGroupId": "alwaysShow"
            }
          },
          "quote": {
            "itemType": "BROWSER",
            "visible": true,
            "disable": false,
            "required": false,
            "readOnly": false,
            "multiple": false,
            "common": true,
            "browserBean": {
              "hasAdvanceSearch": true,
              "hasLeftData": false,
              "disabledTabCache": false,
              "showCheckStrictly": true,
              "canSelectAllUser": false,
              "defaultCheckStrictly": true,
              "defaultAccount": false,
              "enableAddData": false,
              "enableExtendButton": false,
              "defaultStopDept": false,
              "module": "crm",
              "type": "quote",
              "multiple": true,
              "defaultOpen": false,
              "multType": false,
              "multCheckbox": false
            },
            "otherParams": {
              "showType": "notEmpty",
              "showGroupId": "alwaysShow"
            }
          },
          "competitor": {
            "itemType": "BROWSER",
            "visible": true,
            "disable": false,
            "required": false,
            "readOnly": false,
            "multiple": false,
            "common": true,
            "browserBean": {
              "hasAdvanceSearch": true,
              "hasLeftData": false,
              "disabledTabCache": false,
              "showCheckStrictly": true,
              "canSelectAllUser": false,
              "defaultCheckStrictly": true,
              "defaultAccount": false,
              "enableAddData": false,
              "enableExtendButton": false,
              "defaultStopDept": false,
              "module": "crm",
              "type": "competitor",
              "multiple": true,
              "defaultOpen": false,
              "multType": false,
              "multCheckbox": false
            },
            "otherParams": {
              "showType": "notEmpty",
              "showGroupId": "alwaysShow"
            }
          },
          "contact": {
            "itemType": "BROWSER",
            "visible": true,
            "disable": false,
            "required": false,
            "readOnly": false,
            "multiple": false,
            "common": true,
            "browserBean": {
              "hasAdvanceSearch": true,
              "hasLeftData": false,
              "disabledTabCache": false,
              "showCheckStrictly": true,
              "canSelectAllUser": false,
              "defaultCheckStrictly": true,
              "defaultAccount": false,
              "enableAddData": false,
              "enableExtendButton": false,
              "defaultStopDept": false,
              "module": "crm",
              "type": "contact",
              "multiple": true,
              "defaultOpen": false,
              "multType": false,
              "multCheckbox": false
            },
            "otherParams": {
              "showType": "notEmpty",
              "showGroupId": "alwaysShow"
            }
          },
          "clue": {
            "itemType": "BROWSER",
            "visible": true,
            "disable": false,
            "required": false,
            "readOnly": false,
            "multiple": false,
            "common": true,
            "browserBean": {
              "hasAdvanceSearch": true,
              "hasLeftData": false,
              "disabledTabCache": false,
              "showCheckStrictly": true,
              "canSelectAllUser": false,
              "defaultCheckStrictly": true,
              "defaultAccount": false,
              "enableAddData": false,
              "enableExtendButton": false,
              "defaultStopDept": false,
              "module": "crm",
              "type": "clue",
              "multiple": true,
              "defaultOpen": false,
              "multType": false,
              "multCheckbox": false
            },
            "otherParams": {
              "showType": "notEmpty",
              "showGroupId": "alwaysShow"
            }
          },
          "ebuilderform": {
            "itemType": "BROWSER",
            "visible": true,
            "disable": false,
            "required": false,
            "readOnly": false,
            "multiple": false,
            "common": true,
            "browserBean": {
              "hasAdvanceSearch": true,
              "hasLeftData": true,
              "disabledTabCache": false,
              "showCheckStrictly": true,
              "canSelectAllUser": false,
              "commonParams": {
                "queryType": "data"
              },
              "defaultCheckStrictly": true,
              "defaultAccount": false,
              "enableAddData": false,
              "enableExtendButton": false,
              "cardDetailDialogParams": {
                "fromMatter": "1"
              },
              "defaultStopDept": false,
              "module": "ebuilder/form",
              "type": "ebuilderMatter",
              "multiple": true,
              "defaultOpen": false,
              "multType": false,
              "multCheckbox": false
            },
            "otherParams": {
              "showType": "notEmpty",
              "showGroupId": "alwaysShow"
            }
          },
          "workreport": {
            "itemType": "BROWSER",
            "visible": true,
            "disable": false,
            "required": false,
            "readOnly": false,
            "multiple": false,
            "common": true,
            "browserBean": {
              "hasAdvanceSearch": true,
              "hasLeftData": false,
              "disabledTabCache": false,
              "showCheckStrictly": true,
              "canSelectAllUser": false,
              "defaultCheckStrictly": true,
              "defaultAccount": false,
              "enableAddData": false,
              "enableExtendButton": false,
              "defaultStopDept": false,
              "module": "plan",
              "type": "planBrowser",
              "multiple": true,
              "defaultOpen": false,
              "multType": false,
              "multCheckbox": false
            },
            "otherParams": {
              "showType": "notEmpty",
              "showGroupId": "alwaysShow"
            }
          },
          "frptreport": {
            "itemType": "BROWSER",
            "visible": true,
            "disable": false,
            "required": false,
            "readOnly": false,
            "multiple": false,
            "common": true,
            "browserBean": {
              "hasAdvanceSearch": true,
              "hasLeftData": true,
              "disabledTabCache": false,
              "showCheckStrictly": true,
              "canSelectAllUser": false,
              "commonParams": {
                "isList": true,
                "queryType": "report"
              },
              "defaultCheckStrictly": true,
              "defaultAccount": false,
              "enableAddData": false,
              "enableExtendButton": false,
              "defaultStopDept": false,
              "module": "formdatareport",
              "type": "frpt_report",
              "multiple": true,
              "defaultOpen": false,
              "multType": false,
              "multCheckbox": false
            },
            "otherParams": {
              "showType": "notEmpty",
              "showGroupId": "alwaysShow"
            }
          },
          "email": {
            "itemType": "BROWSER",
            "visible": true,
            "disable": false,
            "required": false,
            "readOnly": false,
            "multiple": false,
            "common": true,
            "browserBean": {
              "hasAdvanceSearch": true,
              "hasLeftData": false,
              "disabledTabCache": false,
              "showCheckStrictly": true,
              "canSelectAllUser": false,
              "defaultCheckStrictly": true,
              "defaultAccount": false,
              "enableAddData": false,
              "enableExtendButton": false,
              "defaultStopDept": false,
              "module": "mail/base",
              "type": "mailResource",
              "multiple": true,
              "defaultOpen": false,
              "multType": false,
              "multCheckbox": false
            },
            "otherParams": {
              "showType": "notEmpty",
              "showGroupId": "alwaysShow"
            }
          },
          "calendar": {
            "itemType": "BROWSER",
            "visible": true,
            "disable": false,
            "required": false,
            "readOnly": false,
            "multiple": false,
            "common": true,
            "browserBean": {
              "hasAdvanceSearch": true,
              "hasLeftData": false,
              "disabledTabCache": false,
              "showCheckStrictly": true,
              "canSelectAllUser": false,
              "defaultCheckStrictly": true,
              "defaultAccount": false,
              "enableAddData": false,
              "enableExtendButton": false,
              "defaultStopDept": false,
              "module": "calendar",
              "type": "calendarBrowser",
              "multiple": true,
              "defaultOpen": false,
              "multType": false,
              "multCheckbox": false
            },
            "otherParams": {
              "showType": "notEmpty",
              "showGroupId": "alwaysShow"
            }
          },
          "biaoge": {
            "itemType": "BROWSER",
            "visible": true,
            "disable": false,
            "required": false,
            "readOnly": false,
            "multiple": false,
            "common": true,
            "browserBean": {
              "hasAdvanceSearch": true,
              "hasLeftData": false,
              "disabledTabCache": false,
              "showCheckStrictly": true,
              "canSelectAllUser": false,
              "commonParams": {
                "queryCondition": true,
                "isList": true
              },
              "defaultCheckStrictly": true,
              "defaultAccount": false,
              "enableAddData": false,
              "enableExtendButton": false,
              "defaultStopDept": false,
              "module": "formdatareport",
              "type": "frpt_form",
              "multiple": true,
              "defaultOpen": false,
              "multType": false,
              "multCheckbox": false
            },
            "otherParams": {
              "showType": "notEmpty",
              "showGroupId": "alwaysShow"
            }
          },
          "workflow": {
            "itemType": "BROWSER",
            "visible": true,
            "disable": false,
            "required": false,
            "readOnly": false,
            "multiple": false,
            "common": true,
            "browserBean": {
              "hasAdvanceSearch": true,
              "hasLeftData": false,
              "disabledTabCache": false,
              "showCheckStrictly": true,
              "canSelectAllUser": false,
              "defaultCheckStrictly": true,
              "defaultAccount": false,
              "enableAddData": false,
              "enableExtendButton": false,
              "defaultStopDept": false,
              "module": "workflow/core",
              "type": "wfcRequest",
              "multiple": true,
              "defaultOpen": false,
              "multType": false,
              "multCheckbox": false
            },
            "otherParams": {
              "showType": "notEmpty",
              "showGroupId": "alwaysShow"
            }
          },
          "mainline": {
            "itemType": "BROWSER",
            "visible": true,
            "disable": false,
            "required": false,
            "readOnly": false,
            "multiple": false,
            "common": true,
            "browserBean": {
              "hasAdvanceSearch": true,
              "hasLeftData": false,
              "disabledTabCache": false,
              "showCheckStrictly": true,
              "canSelectAllUser": false,
              "defaultCheckStrictly": true,
              "defaultAccount": false,
              "enableAddData": false,
              "enableExtendButton": false,
              "defaultStopDept": false,
              "module": "project",
              "type": "mainlineBrowser",
              "multiple": true,
              "defaultOpen": false,
              "multType": false,
              "multCheckbox": false
            },
            "otherParams": {
              "queryUrl": "/project/link/queryLinkProjects",
              "addUrl": "/project/link/addLinkProjects",
              "showType": "notEmpty",
              "deleteUrl": "/project/link/deleteLinkProjects",
              "showGroupId": "alwaysShow"
            }
          },
          "contract": {
            "itemType": "BROWSER",
            "visible": true,
            "disable": false,
            "required": false,
            "readOnly": false,
            "multiple": false,
            "common": true,
            "browserBean": {
              "hasAdvanceSearch": true,
              "hasLeftData": false,
              "disabledTabCache": false,
              "showCheckStrictly": true,
              "canSelectAllUser": false,
              "defaultCheckStrictly": true,
              "defaultAccount": false,
              "enableAddData": false,
              "enableExtendButton": false,
              "defaultStopDept": false,
              "module": "crm",
              "type": "contract",
              "multiple": true,
              "defaultOpen": false,
              "multType": false,
              "multCheckbox": false
            },
            "otherParams": {
              "showType": "notEmpty",
              "showGroupId": "alwaysShow"
            }
          },
          "saleChance": {
            "itemType": "BROWSER",
            "visible": true,
            "disable": false,
            "required": false,
            "readOnly": false,
            "multiple": false,
            "common": true,
            "browserBean": {
              "hasAdvanceSearch": true,
              "hasLeftData": false,
              "disabledTabCache": false,
              "showCheckStrictly": true,
              "canSelectAllUser": false,
              "defaultCheckStrictly": true,
              "defaultAccount": false,
              "enableAddData": false,
              "enableExtendButton": false,
              "defaultStopDept": false,
              "module": "crm",
              "type": "saleChance",
              "multiple": true,
              "defaultOpen": false,
              "multType": false,
              "multCheckbox": false
            },
            "otherParams": {
              "showType": "notEmpty",
              "showGroupId": "alwaysShow"
            }
          },
          "kpiFlow": {
            "itemType": "BROWSER",
            "visible": true,
            "disable": false,
            "required": false,
            "readOnly": false,
            "multiple": false,
            "common": true,
            "browserBean": {
              "hasAdvanceSearch": true,
              "hasLeftData": false,
              "disabledTabCache": false,
              "showCheckStrictly": true,
              "canSelectAllUser": false,
              "defaultCheckStrictly": true,
              "defaultAccount": false,
              "enableAddData": false,
              "enableExtendButton": false,
              "defaultStopDept": false,
              "module": "performance",
              "type": "performanceBrowser",
              "multiple": true,
              "defaultOpen": false,
              "multType": false,
              "multCheckbox": false
            },
            "otherParams": {
              "showType": "notEmpty",
              "showGroupId": "alwaysShow"
            }
          },
          "ebuilderObjform": {
            "itemType": "BROWSER",
            "visible": true,
            "disable": false,
            "required": false,
            "readOnly": false,
            "multiple": false,
            "common": true,
            "browserBean": {
              "hasAdvanceSearch": true,
              "hasLeftData": true,
              "disabledTabCache": false,
              "showCheckStrictly": true,
              "canSelectAllUser": false,
              "commonParams": {
                "queryType": "obj"
              },
              "defaultCheckStrictly": true,
              "defaultAccount": false,
              "enableAddData": false,
              "enableExtendButton": false,
              "defaultStopDept": false,
              "module": "ebuilder/form",
              "type": "ebuilderMatter",
              "multiple": true,
              "defaultOpen": false,
              "multType": false,
              "multCheckbox": false
            },
            "otherParams": {
              "showType": "notEmpty",
              "showGroupId": "alwaysShow"
            }
          },
          "task": {
            "itemType": "BROWSER",
            "visible": true,
            "disable": false,
            "required": false,
            "readOnly": false,
            "multiple": false,
            "common": true,
            "browserBean": {
              "hasAdvanceSearch": true,
              "hasLeftData": false,
              "disabledTabCache": false,
              "showCheckStrictly": true,
              "canSelectAllUser": false,
              "defaultCheckStrictly": true,
              "defaultAccount": false,
              "enableAddData": false,
              "enableExtendButton": false,
              "defaultStopDept": false,
              "module": "task",
              "type": "taskBrowser",
              "multiple": true,
              "defaultOpen": false,
              "multType": false,
              "multCheckbox": false
            },
            "otherParams": {
              "showType": "notEmpty",
              "showGroupId": "alwaysShow"
            }
          },
          "folder": {
            "itemType": "BROWSER",
            "visible": true,
            "disable": false,
            "required": false,
            "readOnly": false,
            "multiple": false,
            "common": true,
            "browserBean": {
              "hasAdvanceSearch": true,
              "hasLeftData": false,
              "disabledTabCache": false,
              "showCheckStrictly": true,
              "canSelectAllUser": false,
              "dataParams": {
                "operateType": "relevance"
              },
              "commonParams": {
                "operateType": "relevance"
              },
              "defaultCheckStrictly": true,
              "defaultAccount": false,
              "enableAddData": false,
              "enableExtendButton": false,
              "defaultStopDept": false,
              "module": "doc",
              "type": "folder",
              "multiple": true,
              "defaultOpen": false,
              "multType": false,
              "multCheckbox": false
            },
            "otherParams": {
              "showType": "notEmpty",
              "showGroupId": "alwaysShow"
            }
          },
          "formdatareport": {
            "itemType": "BROWSER",
            "visible": true,
            "disable": false,
            "required": false,
            "readOnly": false,
            "multiple": false,
            "common": true,
            "browserBean": {
              "hasAdvanceSearch": true,
              "hasLeftData": true,
              "disabledTabCache": false,
              "showCheckStrictly": true,
              "canSelectAllUser": false,
              "commonParams": {
                "source": "relevance",
                "isList": true,
                "queryType": "form"
              },
              "defaultCheckStrictly": true,
              "defaultAccount": false,
              "enableAddData": false,
              "enableExtendButton": false,
              "defaultStopDept": false,
              "module": "formdatareport",
              "type": "frpt_report",
              "multiple": true,
              "defaultOpen": false,
              "multType": false,
              "multCheckbox": false
            },
            "otherParams": {
              "showType": "notEmpty",
              "showGroupId": "alwaysShow"
            }
          },
          "customer": {
            "itemType": "BROWSER",
            "visible": true,
            "disable": false,
            "required": false,
            "readOnly": false,
            "multiple": false,
            "common": true,
            "browserBean": {
              "hasAdvanceSearch": true,
              "hasLeftData": false,
              "disabledTabCache": false,
              "showCheckStrictly": true,
              "canSelectAllUser": false,
              "defaultCheckStrictly": true,
              "defaultAccount": false,
              "enableAddData": false,
              "enableExtendButton": false,
              "defaultStopDept": false,
              "module": "crm",
              "type": "customer",
              "multiple": true,
              "defaultOpen": false,
              "multType": false,
              "multCheckbox": false
            },
            "otherParams": {
              "showType": "notEmpty",
              "showGroupId": "alwaysShow"
            }
          }
        },
        data: {}
      };
      cardDetailFormStore.init({ hoverEdit: false, isMobile: false, ...allDatas } as any); // 先初始化
      // cardDetailFormStore.init({ items, layout, data: {}, hoverEdit: false, isMobile: false }); // 先初始化
      resolve({});
    })
  }
  getData = () => {
    const { description, getFormDatas } = cardDetailFormStore;
    console.log('任务描述：description', description);
    console.log('顶部表单数据', this.formTopStore.getFormDatas());
    console.log('表单数据：getFormDatas', getFormDatas());
  }
  customRenderFormSwitch = (key: string, props: CustomRenderItemProps) => {
    if (key === 'urgency') return (
      <Urgency {...props} />
    )
    return (<div></div>)
  }
  onChange = (value?: FormDatas) => {
    console.log('value', value);
  }
  validate = () => cardDetailFormStore.validate();
  reset = () => cardDetailFormStore.reset();
  update = () => {
    cardDetailFormStore.updateDatas({
      "tags_notEmpty_normal": 'tags_notEmpty_normal'
    })
  }
  updateNormal = () => {
    // 方法一
    // cardDetailFormStore.formStores.normal.updateDatas({
    //   "normal_alwaysShow": 'normal_alwaysShow'
    // })
    // 方法二
    cardDetailFormStore.updateDatasNotReFormat('normal', {
      "normal_alwaysShow": 'normal_alwaysShow'
    })
  }
  render() {
    const btns = [
      (<Button key='getData' type="primary" onClick={this.getData}>获取数据</Button>),
      (<Button key='validate' type="primary" onClick={this.validate}>校验</Button>),
      (<Button key='reset' type="primary" onClick={this.reset}>重置</Button>),
      (<Button key='update' type="primary" onClick={this.update}>主动更新数据测试(D区: groupId='tag')</Button>),
      (<Button key='update' type="primary" onClick={this.updateNormal}>主动更新数据测试(非D区)</Button>),
    ]
    return (
      <div className={prefixCls}>
        <Title noIcon buttons={btns} leftCol={0} rightCol={24} className={`${prefixCls}-title`} />
        <CardDetailForm.Title
         
          url={imgSrc}
          className="testCardDetailFormTitle"
          store={cardDetailFormStore}
          enableMultilineText
        />
        {
          this.formTopStore.isFormInit && (
            <Form.Skeleton store={this.formTopStore} stopSkeleton={this.formTopStore.isFormInit}>
              <Form store={this.formTopStore} customRenderFormSwitch={this.customRenderFormSwitch} />
            </Form.Skeleton>
          )
        }
        <CardDetailForm
          className="testCardDetailForm"
         
          store={cardDetailFormStore}
          tagNumber={3}
          openLoading
        >
        </CardDetailForm>
      </div>
    );
  }
}

export default CardDetailFormDemo
```

### 自定义顶部输入框

自定义顶部输入框

```jsx
import { Component } from 'react';
import {
  CardDetailForm, constants, CardDetailFormItemProps, CardDetailFormStore,
  FormDatas, FormLayoutType, FormStore, Form, FormItemProps
} from '@weapp/ui';
import { observer } from 'mobx-react';
import imgSrc from "../../../../assets/images/ODTLcjxAfvqbxHnVXCYX.png"

const { uiPcClsPrefix, cardDetailFormClsPrefix } = constants;
interface CardDetailFormDemoProps {
}

const prefixCls = `${uiPcClsPrefix}-demo-card-detail-form`;

const formTopStore = new FormStore();

const items: CardDetailFormItemProps = {
  'normal_alwaysShow': {
    itemType: 'INPUT',
    showGroupId: 'normal',
    showType: 'alwaysShow',
  },
  'alwaysShow_alwaysShow': {
    itemType: 'INPUT',
    showType: 'alwaysShow',
    showGroupId: 'alwaysShow',
  },
  'collapsible': {
    itemType: 'INPUT',
    showType: 'collapsible',
  },
  'tags_notEmpty_normal': {
    itemType: 'INPUT',
    placeholder: 'task',
    showType: 'notEmpty',
    showGroupId: 'normal',
    // //autoFocus: true,
  },
  'tags_notEmpty_alwaysShow': {
    itemType: 'INPUT',
    placeholder: 'task',
    showType: 'notEmpty',
    showGroupId: 'alwaysShow',
    //autoFocus: true,
    otherParams: {
    },
  },
  'tags_collapsible_collapsible': {
    itemType: 'INPUT',
    placeholder: 'task',
    showType: 'collapsible',
    showGroupId: 'collapsible',
    //autoFocus: true,
    otherParams: {
    },
  },
  'tags_notEmpty_follow': {
    itemType: 'INPUT',
    placeholder: 'task',
    showType: 'notEmpty',
    showGroupId: 'follow',
    //autoFocus: true,
    otherParams: {
    },
  },
  'follow': {
    itemType: 'INPUT',
    showType: 'follow',
    value: '1',
  },
}

let layout: FormLayoutType[] = [
  [
    { id: '1', label: '始终展示区域A', items: ['normal_alwaysShow'], labelSpan: 6, hide: false, groupId: 'normal' },
  ],
  [
    { id: '3', label: '始终展示区域B', items: ['alwaysShow_alwaysShow'], labelSpan: 6, hide: false, groupId: 'alwaysShow' },
  ],
  [
    { id: '5', label: '跟随折叠隐藏区域-默认字段', items: ['collapsible'], labelSpan: 6, hide: false, groupId: 'collapsible' },
  ],
  [
    { id: '7', label: 'A区有值时展示', items: ['tags_notEmpty_normal'], icon: 'Icon-Associated-tasks', labelSpan: 6, hide: false, groupId: 'tags' },
    { id: '9', label: 'B区有值时展示', items: ['tags_notEmpty_alwaysShow'], icon: 'Icon-Associated-tasks', labelSpan: 6, hide: false, groupId: 'tags' },
    { id: '10', label: 'C区跟随展示', items: ['tags_collapsible_collapsible'], icon: 'Icon-Associated-tasks', labelSpan: 6, hide: false, groupId: 'tags' },
    { id: '11', label: 'E区有值时展示', items: ['tags_notEmpty_follow'], icon: 'Icon-Associated-tasks', labelSpan: 6, hide: false, groupId: 'tags' },
  ],
  [
    { id: '12', label: 'E区始终展示', items: ['follow'], labelSpan: 6, hide: false, groupId: 'follow' },
  ]
]

const cardDetailFormStore = new CardDetailFormStore();

@observer
class CardDetailFormDemo extends Component<CardDetailFormDemoProps> {
  componentDidMount() {
    const data: FormDatas = {
      'creater': '杨文元',
    };
    cardDetailFormStore.init({ items, layout, data, hoverEdit: false, isMobile: false  });
    const topLayout: FormLayoutType[] = [
      [
        { id: '1', label: '负责人', items: ['creater'], labelSpan: 6, hide: false, groupId: 'normal', },
        {
          id: '2', label: '部门', items: ['department'], labelSpan: 6, hide: false, groupId: 'normal',
          className: `${cardDetailFormClsPrefix}-label`, // cardDetailForm组件特殊label字体颜色样式类名
        },
        {
          id: '3', label: '到期日', items: ['date'], labelSpan: 6, hide: false, groupId: 'normal',
          className: `${cardDetailFormClsPrefix}-label`, // cardDetailForm组件特殊label字体颜色样式类名
        },
      ]];
    const topItems: FormItemProps = {
      'creater': {
        itemType: 'INPUT',
        // browserBean: {
        //   type: 'demo',
        //   module: 'common',
        //   // multiple: true,
        // },
        showType: 'alwaysShow',
      },
      'date': {
        showType: 'alwaysShow',
        itemType: 'DESCRIPTION',
      },
      'department': {
        itemType: 'DESCRIPTION',
        showType: 'alwaysShow',
      },

    }
    formTopStore.initForm({
      items: topItems, data: {
        'creater': '杨文元',
        'date': '2021-04-25',
        'department': '商务部',
      }, groups: [], layout: topLayout
    });
  }
  customRenderInput = () => {
    return <div>自定义顶部输入框内容</div>
  }
  onChange = (groupId: string, value?: FormDatas) => {
    console.log('onChange', groupId, value);
  }
  onBlur = (groupId: string, value?: FormDatas) => {
    console.log('onBlur', groupId, value);
  }
  render() {
    return (
      <div className={prefixCls}>
        <CardDetailForm
          className="testCardDetailForm"
         
          store={cardDetailFormStore}
          onChange={this.onChange}
          onBlur={this.onBlur}
          showBtnContent="展开"
          hideBtnContent="收起"
        >
          <CardDetailForm.Title
           
            url={imgSrc}
            className="testCardDetailFormTitle"
            store={cardDetailFormStore}
            customRenderInput={this.customRenderInput}
          />
          <Form store={formTopStore} />
        </CardDetailForm>
      </div>
    );
  }
}

export default CardDetailFormDemo
```

### 自定义顶部内容

自定义顶部内容

```jsx
import { Component } from 'react';
import {
  CardDetailForm, constants, CardDetailFormItemProps, CardDetailFormStore,
  FormDatas, FormLayoutType, FormStore, Form, FormItemProps,
} from '@weapp/ui';
import { observer } from 'mobx-react';

const { uiPcClsPrefix, cardDetailFormClsPrefix } = constants;
interface CardDetailFormDemoProps {
}

const prefixCls = `${uiPcClsPrefix}-demo-card-detail-form`;

const formTopStore = new FormStore();

const items: CardDetailFormItemProps = {
  'normal_alwaysShow': {
    itemType: 'INPUT',
    showGroupId: 'normal',
    showType: 'alwaysShow',
  },
  'alwaysShow_alwaysShow': {
    itemType: 'INPUT',
    showType: 'alwaysShow',
    showGroupId: 'alwaysShow',
  },
  'collapsible': {
    itemType: 'INPUT',
    showType: 'collapsible',
  },
  'tags_notEmpty_normal': {
    itemType: 'INPUT',
    placeholder: 'task',
    showType: 'notEmpty',
    showGroupId: 'normal',
    // //autoFocus: true,
  },
  'tags_notEmpty_alwaysShow': {
    itemType: 'INPUT',
    placeholder: 'task',
    showType: 'notEmpty',
    showGroupId: 'alwaysShow',
    //autoFocus: true,
    otherParams: {
    },
  },
  'tags_collapsible_collapsible': {
    itemType: 'INPUT',
    placeholder: 'task',
    showType: 'collapsible',
    showGroupId: 'collapsible',
    //autoFocus: true,
    otherParams: {
    },
  },
  'tags_notEmpty_follow': {
    itemType: 'INPUT',
    placeholder: 'task',
    showType: 'notEmpty',
    showGroupId: 'follow',
    //autoFocus: true,
    otherParams: {
    },
  },
  'follow': {
    itemType: 'INPUT',
    showType: 'follow',
    value: '1',
  },
}

let layout: FormLayoutType[] = [
  [
    { id: '1', label: '始终展示区域A', items: ['normal_alwaysShow'], labelSpan: 6, hide: false, groupId: 'normal' },
  ],
  [
    { id: '3', label: '始终展示区域B', items: ['alwaysShow_alwaysShow'], labelSpan: 6, hide: false, groupId: 'alwaysShow' },
  ],
  [
    { id: '5', label: '跟随折叠隐藏区域-默认字段', items: ['collapsible'], labelSpan: 6, hide: false, groupId: 'collapsible' },
  ],
  [
    { id: '7', label: 'A区有值时展示', items: ['tags_notEmpty_normal'], icon: 'Icon-Associated-tasks', labelSpan: 6, hide: false, groupId: 'tags' },
    { id: '9', label: 'B区有值时展示', items: ['tags_notEmpty_alwaysShow'], icon: 'Icon-Associated-tasks', labelSpan: 6, hide: false, groupId: 'tags' },
    { id: '10', label: 'C区跟随展示', items: ['tags_collapsible_collapsible'], icon: 'Icon-Associated-tasks', labelSpan: 6, hide: false, groupId: 'tags' },
    { id: '11', label: 'E区有值时展示', items: ['tags_notEmpty_follow'], icon: 'Icon-Associated-tasks', labelSpan: 6, hide: false, groupId: 'tags' },
  ],
  [
    { id: '12', label: 'E区始终展示', items: ['follow'], labelSpan: 6, hide: false, groupId: 'follow' },
  ]
]

const cardDetailFormStore = new CardDetailFormStore();

@observer
class CardDetailFormDemo extends Component<CardDetailFormDemoProps> {
  componentDidMount() {
    const data: FormDatas = {
      'creater': '杨文元',
    };
    cardDetailFormStore.init({ items, layout, data, hoverEdit: true, isMobile: false });
    const topLayout: FormLayoutType[] = [
      [
        { id: '1', label: '负责人', items: ['creater'], labelSpan: 6, hide: false, groupId: 'normal', },
        {
          id: '2', label: '部门', items: ['department'], labelSpan: 6, hide: false, groupId: 'normal',
          className: `${cardDetailFormClsPrefix}-label`, // cardDetailForm组件特殊label字体颜色样式类名
        },
        {
          id: '3', label: '到期日', items: ['date'], labelSpan: 6, hide: false, groupId: 'normal',
          className: `${cardDetailFormClsPrefix}-label`, // cardDetailForm组件特殊label字体颜色样式类名
        },
      ]];
    const topItems: FormItemProps = {
      'creater': {
        itemType: 'INPUT',
        // browserBean: {
        //   type: 'demo',
        //   module: 'common',
        //   // multiple: true,
        // },
        showType: 'alwaysShow',
      },
      'date': {
        showType: 'alwaysShow',
        itemType: 'DESCRIPTION',
      },
      'department': {
        itemType: 'DESCRIPTION',
        showType: 'alwaysShow',
      },

    }
    formTopStore.initForm({
      items: topItems, data: {
        'creater': '杨文元',
        'date': '2021-04-25',
        'department': '商务部',
      }, groups: [], layout: topLayout
    });
  }
  onChange = (groupId: string, value?: FormDatas) => {
    console.log('onChange', groupId, value);
  }
  onBlur = (groupId: string, value?: FormDatas) => {
    console.log('onBlur', groupId, value);
  }
  render() {
    return (
      <div className={prefixCls}>
        <CardDetailForm
          className="testCardDetailForm"
         
          store={cardDetailFormStore}
          onChange={this.onChange}
          onBlur={this.onBlur}
        >
          <div className={`${prefixCls}-top`}>
            内部留言
          </div>
          <Form store={formTopStore} />
        </CardDetailForm>
      </div>
    );
  }
}

export default CardDetailFormDemo
```

### 鼠标移入编辑(整体配置)

鼠标移入编辑(整体配置)

```jsx
import { Component } from 'react';
import {
  CardDetailForm, constants, CardDetailFormItemProps, CardDetailFormStore,
  FormDatas, FormLayoutType, FormStore, Form, FormItemProps, Title, Button,
  BaseProps, Trigger, SelectOptionProps,
} from '@weapp/ui';
import CardDetailFormDemoStore from "./store";
import { observer } from 'mobx-react';
import imgSrc from "../../../../assets/images/ODTLcjxAfvqbxHnVXCYX.png"

const { uiPcClsPrefix, cardDetailFormClsPrefix } = constants;
interface CardDetailFormDemoProps {
}
interface CustomRenderItemProps extends BaseProps {
}

interface UrgencyOptionsProps extends BaseProps {
  options: SelectOptionProps[],
}
interface SingleUrgencyOptionProps extends BaseProps {
  data: SelectOptionProps;
}
const prefixCls = `${uiPcClsPrefix}-demo-card-detail-form`;

const formTopStore = new FormStore();

const cardDetailFormDemoStore = new CardDetailFormDemoStore();

const items: CardDetailFormItemProps = {
  'normal_alwaysShow': {
    itemType: 'INPUT',
    showGroupId: 'normal',
    showType: 'alwaysShow',
  },
  'alwaysShow_alwaysShow': {
    itemType: 'INPUT',
    showType: 'alwaysShow',
    showGroupId: 'alwaysShow',
  },
  'collapsible': {
    itemType: 'INPUT',
    showType: 'collapsible',
  },
  'tags_notEmpty_normal': {
    itemType: 'INPUT',
    placeholder: 'task',
    showType: 'notEmpty',
    showGroupId: 'normal',
    // autoFocus: true,
  },
  'tags_notEmpty_alwaysShow': {
    itemType: 'INPUT',
    placeholder: 'task',
    showType: 'notEmpty',
    showGroupId: 'alwaysShow',
    // autoFocus: true,
    otherParams: {
    },
  },
  'tags_notEmpty_alwaysShow2': {
    itemType: 'INPUT',
    placeholder: 'task',
    showType: 'notEmpty',
    showGroupId: 'alwaysShow',
    // autoFocus: true,
    otherParams: {
    },
  },
  'tags_collapsible_collapsible': {
    itemType: 'INPUT',
    placeholder: 'task',
    showType: 'collapsible',
    showGroupId: 'collapsible',
    // autoFocus: true,
    otherParams: {
    },
  },
  'tags_notEmpty_follow': {
    itemType: 'INPUT',
    placeholder: 'task',
    showType: 'notEmpty',
    showGroupId: 'follow',
    // autoFocus: true,
    otherParams: {
    },
  },
  'follow': {
    itemType: 'INPUT',
    showType: 'follow',
    value: '1',
  },
}

let layout: FormLayoutType[] = [
  [
    { id: '1', label: '始终展示区域A', items: ['normal_alwaysShow'], labelSpan: 6, hide: false, groupId: 'normal', order: 1 },
  ],
  [
    { id: '3', label: '始终展示区域B', items: ['alwaysShow_alwaysShow'], labelSpan: 6, hide: false, groupId: 'alwaysShow', order: 2 },
  ],
  [
    { id: '5', label: '跟随折叠隐藏区域-默认字段', items: ['collapsible'], labelSpan: 6, hide: false, groupId: 'collapsible', order: 2 },
  ],
  [
    { id: '7', label: 'A区有值时展示', items: ['tags_notEmpty_normal'], icon: 'Icon-Associated-tasks', labelSpan: 6, hide: false, groupId: 'tags', order: 2 },
    { id: '9', label: 'B区有值时展示', items: ['tags_notEmpty_alwaysShow'], icon: 'Icon-Associated-tasks', labelSpan: 6, hide: false, groupId: 'tags', order: 1 },
    { id: '8', label: 'B区有值时展示2', items: ['tags_notEmpty_alwaysShow2'], icon: 'Icon-Associated-tasks', labelSpan: 6, hide: false, groupId: 'tags', order: 3 },
    { id: '10', label: 'C区跟随展示', items: ['tags_collapsible_collapsible'], icon: 'Icon-Associated-tasks', labelSpan: 6, hide: false, groupId: 'tags', order: 1 },
    { id: '11', label: 'E区有值时展示', items: ['tags_notEmpty_follow'], icon: 'Icon-Associated-tasks', labelSpan: 6, hide: false, groupId: 'tags', order: 2 },
  ],
  [
    { id: '12', label: 'E区始终展示', items: ['follow'], labelSpan: 6, hide: false, groupId: 'follow', order: 1 },
  ]
]

const cardDetailFormStore = new CardDetailFormStore();

@observer
class SingleUrgencyOption extends Component<SingleUrgencyOptionProps> {
  changeValue = () => {
    const { data: op } = this.props;
    cardDetailFormDemoStore.setValue(op.id);
  }
  render() {
    const { data: op } = this.props;
    return (
      <div key={op.id} className={`${cardDetailFormClsPrefix}-urgency`} onClick={this.changeValue}>
        <span className={`${cardDetailFormClsPrefix}-urgency-icon ${cardDetailFormClsPrefix}-urgency-icon-${op && op.className}`} />
        <span className={`${cardDetailFormClsPrefix}-urgency-content`}>{op && op.content}</span>
      </div>
    )
  }
}
@observer
class UrgencyOptions extends Component<UrgencyOptionsProps> {
  render() {
    const { options } = this.props;
    return (
      <div className={`${cardDetailFormClsPrefix}-urgency-options`}>
        {
          options.map((op) => {
            return (
              <SingleUrgencyOption data={op} key={op.id} />
            )
          })
        }
      </div>
    )
  }
}

// 紧急程度Urgency组件样式可引用组件内部统一样式，或自行开发
@observer
class Urgency extends Component<any> {
  childRef?: HTMLDivElement;
  getChildRef = (el: HTMLDivElement) => this.childRef = el;
  getOption = () => {
    const { props } = this.props;
    const { options } = props;
    const { value } = cardDetailFormDemoStore;
    return options.find((op: SelectOptionProps) => op.id === value);
  }
  getPopupContainer = () => this.childRef;
  render() {
    const { props } = this.props;
    const { options } = props;
    const op = this.getOption();
    return (
      <Trigger
       
        popup={(<UrgencyOptions options={options} />)}
        getPopupContainer={this.getPopupContainer}
      >
        <div className={`${cardDetailFormClsPrefix}-urgency`} ref={this.getChildRef}>
          <span className={`${cardDetailFormClsPrefix}-urgency-icon ${cardDetailFormClsPrefix}-urgency-icon-${op && op.className}`} />
          <span className={`${cardDetailFormClsPrefix}-urgency-content`}>{op && op.content}</span>
        </div>
      </Trigger>
    )
  }
}

@observer
class CardDetailFormDemo extends Component<CardDetailFormDemoProps> {
  componentDidMount() {
    const data: FormDatas = {
      'creater': '杨文元',
      'task': '1',
    };
    this.initCardDetailForm().then(() => {
      cardDetailFormStore.updateDatas({
        normal_notEmpty: '1',
        tags_notEmpty_normal: '1',
        collapsible: 'collapsible',
      });
    })
    let topLayout: FormLayoutType[] = [
      [
        { id: '1', label: '负责人', items: ['creater'], labelSpan: 6, hide: false, groupId: 'normal', },
        {
          id: '2', label: '到期日', items: ['date'], labelSpan: 6, hide: false, groupId: 'normal',
          className: `${cardDetailFormClsPrefix}-label`, // cardDetailForm组件特殊label字体颜色样式类名
        },
        {
          id: '3', label: '紧急程度', items: ['urgency'], labelSpan: 6, hide: false, groupId: 'normal',
          className: `${cardDetailFormClsPrefix}-label`, // cardDetailForm组件特殊label字体颜色样式类名
        },
      ]];
    const topItems: FormItemProps = {
      'creater': {
        itemType: 'INPUT',
        readOnly: true,
        // browserBean: {
        //   type: 'demo',
        //   module: 'common',
        //   // multiple: true,
        // },
        showType: 'alwaysShow',
      },
      'date': {
        showType: 'alwaysShow',
        readOnly: true,
        itemType: 'DESCRIPTION',
      },
      'urgency': {
        itemType: 'CUSTOM',
        readOnly: true,
        showType: 'alwaysShow',
        options: [
          { id: '1', content: '正常', className: 'normal' },
          { id: '2', content: '紧急', className: 'urgent' },
          { id: '3', content: '非常紧急', className: 'veryUrgent' },
        ],
      },
    }
    formTopStore.initForm({
      items: topItems, data: {
        'creater': '杨文元',
        'date': '2021-04-25',
        'urgency': '1',
      }, groups: [], layout: topLayout
    });
    cardDetailFormDemoStore.setValue('1');
  }
  initCardDetailForm = () => {
    return new Promise((resolve) => { // 模拟接口前后顺序
      cardDetailFormStore.init({ items, layout, data: {}, hoverEdit: true }); // 先初始化
      resolve({});
    })
  }
  getData = () => {
    const { description, getFormDatas } = cardDetailFormStore;
    console.log('任务描述：description', description);
    console.log('顶部表单数据', formTopStore.getFormDatas());
    console.log('表单数据：getFormDatas', getFormDatas());
  }
  customRenderFormSwitch = (key: string, props: CustomRenderItemProps) => {
    if (key === 'urgency') return (
      <Urgency {...props} />
    )
    return (<div></div>)
  }
  onChange = (value?: FormDatas) => {
    console.log('value', value);
  }
  render() {
    const btns = [
      (<Button key='getData' type="primary" onClick={this.getData}>获取数据</Button>),
    ]
    return (
      <div className={prefixCls}>
        <Title noIcon buttons={btns} className={`${prefixCls}-title`} />
        <CardDetailForm
          className="testCardDetailForm"
         
          store={cardDetailFormStore}
        >
          <CardDetailForm.Title
           
            url={imgSrc}
            className="testCardDetailFormTitle"
            store={cardDetailFormStore}
          />
          <Form store={formTopStore} customRenderFormSwitch={this.customRenderFormSwitch} />
        </CardDetailForm>
      </div>
    );
  }
}

export default CardDetailFormDemo
```

### 鼠标移入编辑(按布局配置)

鼠标移入编辑(按布局配置)

```jsx
import { Component } from 'react';
import {
  CardDetailForm, constants, CardDetailFormItemProps, CardDetailFormStore,
  FormDatas, FormLayoutType, FormStore, Form, FormItemProps, Title, Button,
  BaseProps, Trigger, SelectOptionProps,
} from '@weapp/ui';
import CardDetailFormDemoStore from "./store";
import { observer } from 'mobx-react';
import imgSrc from "../../../../assets/images/ODTLcjxAfvqbxHnVXCYX.png"

const { uiPcClsPrefix, cardDetailFormClsPrefix } = constants;
interface CardDetailFormDemoProps {
}
interface CustomRenderItemProps extends BaseProps {
}

interface UrgencyOptionsProps extends BaseProps {
  options: SelectOptionProps[],
}
interface SingleUrgencyOptionProps extends BaseProps {
  data: SelectOptionProps;
}
const prefixCls = `${uiPcClsPrefix}-demo-card-detail-form`;

const formTopStore = new FormStore();

const cardDetailFormDemoStore = new CardDetailFormDemoStore();

const items: CardDetailFormItemProps = {
  'normal_alwaysShow': {
    itemType: 'INPUT',
    showGroupId: 'normal',
    showType: 'alwaysShow',
  },
  'alwaysShow_alwaysShow': {
    itemType: 'INPUT',
    showType: 'alwaysShow',
    showGroupId: 'alwaysShow',
  },
  'collapsible': {
    itemType: 'INPUT',
    showType: 'collapsible',
  },
  'tags_notEmpty_normal': {
    itemType: 'INPUT',
    placeholder: 'task',
    showType: 'notEmpty',
    showGroupId: 'normal',
    // //autoFocus: true,
  },
  'tags_notEmpty_alwaysShow': {
    itemType: 'INPUT',
    placeholder: 'task',
    showType: 'notEmpty',
    showGroupId: 'alwaysShow',
    //autoFocus: true,
    otherParams: {
    },
  },
  'tags_notEmpty_alwaysShow2': {
    itemType: 'INPUT',
    placeholder: 'task',
    showType: 'notEmpty',
    showGroupId: 'alwaysShow',
    //autoFocus: true,
    otherParams: {
    },
  },
  'tags_collapsible_collapsible': {
    itemType: 'INPUT',
    placeholder: 'task',
    showType: 'collapsible',
    showGroupId: 'collapsible',
    //autoFocus: true,
    otherParams: {
    },
  },
  'tags_notEmpty_follow': {
    itemType: 'INPUT',
    placeholder: 'task',
    showType: 'notEmpty',
    showGroupId: 'follow',
    //autoFocus: true,
    otherParams: {
    },
  },
  'follow': {
    itemType: 'INPUT',
    showType: 'follow',
    value: '1',
  },
}

let layout: FormLayoutType[] = [
  [
    { id: '1', label: '始终展示区域A', items: ['normal_alwaysShow'], labelSpan: 6, hide: false, groupId: 'normal', order: 1, otherParams: { hoverEdit: true } },
  ],
  [
    { id: '3', label: '始终展示区域B', items: ['alwaysShow_alwaysShow'], labelSpan: 6, hide: false, groupId: 'alwaysShow', order: 2, otherParams: { hoverEdit: true } },
  ],
  [
    { id: '5', label: '跟随折叠隐藏区域-默认字段', items: ['collapsible'], labelSpan: 6, hide: false, groupId: 'collapsible', order: 2, otherParams: { hoverEdit: true } },
  ],
  [
    { id: '7', label: 'A区有值时展示', items: ['tags_notEmpty_normal'], icon: 'Icon-Associated-tasks', labelSpan: 6, hide: false, groupId: 'tags', order: 2, otherParams: { hoverEdit: true } },
    { id: '9', label: 'B区有值时展示', items: ['tags_notEmpty_alwaysShow'], icon: 'Icon-Associated-tasks', labelSpan: 6, hide: false, groupId: 'tags', order: 1, otherParams: { hoverEdit: true } },
    { id: '8', label: 'B区有值时展示2', items: ['tags_notEmpty_alwaysShow2'], icon: 'Icon-Associated-tasks', labelSpan: 6, hide: false, groupId: 'tags', order: 3, otherParams: { hoverEdit: true } },
    { id: '10', label: 'C区跟随展示', items: ['tags_collapsible_collapsible'], icon: 'Icon-Associated-tasks', labelSpan: 6, hide: false, groupId: 'tags', order: 1, otherParams: { hoverEdit: true } },
    { id: '11', label: 'E区有值时展示', items: ['tags_notEmpty_follow'], icon: 'Icon-Associated-tasks', labelSpan: 6, hide: false, groupId: 'tags', order: 2, otherParams: { hoverEdit: true } },
  ],
  [
    { id: '12', label: 'E区始终展示', items: ['follow'], labelSpan: 6, hide: false, groupId: 'follow', order: 1, otherParams: { hoverEdit: true } },
  ]
]

const cardDetailFormStore = new CardDetailFormStore();

@observer
class SingleUrgencyOption extends Component<SingleUrgencyOptionProps> {
  changeValue = () => {
    const { data: op } = this.props;
    cardDetailFormDemoStore.setValue(op.id);
  }
  render() {
    const { data: op } = this.props;
    return (
      <div key={op.id} className={`${cardDetailFormClsPrefix}-urgency`} onClick={this.changeValue}>
        <span className={`${cardDetailFormClsPrefix}-urgency-icon ${cardDetailFormClsPrefix}-urgency-icon-${op && op.className}`} />
        <span className={`${cardDetailFormClsPrefix}-urgency-content`}>{op && op.content}</span>
      </div>
    )
  }
}
@observer
class UrgencyOptions extends Component<UrgencyOptionsProps> {
  render() {
    const { options } = this.props;
    return (
      <div className={`${cardDetailFormClsPrefix}-urgency-options`}>
        {
          options.map((op) => {
            return (
              <SingleUrgencyOption data={op} key={op.id} />
            )
          })
        }
      </div>
    )
  }
}

// 紧急程度Urgency组件样式可引用组件内部统一样式，或自行开发
@observer
class Urgency extends Component<any> {
  childRef?: HTMLDivElement;
  getChildRef = (el: HTMLDivElement) => this.childRef = el;
  getOption = () => {
    const { props } = this.props;
    const { options } = props;
    const { value } = cardDetailFormDemoStore;
    return options.find((op: SelectOptionProps) => op.id === value);
  }
  getPopupContainer = () => this.childRef;
  render() {
    const { props } = this.props;
    const { options } = props;
    const op = this.getOption();
    return (
      <Trigger
       
        popup={(<UrgencyOptions options={options} />)}
        getPopupContainer={this.getPopupContainer}
      >
        <div className={`${cardDetailFormClsPrefix}-urgency`} ref={this.getChildRef}>
          <span className={`${cardDetailFormClsPrefix}-urgency-icon ${cardDetailFormClsPrefix}-urgency-icon-${op && op.className}`} />
          <span className={`${cardDetailFormClsPrefix}-urgency-content`}>{op && op.content}</span>
        </div>
      </Trigger>
    )
  }
}

@observer
class CardDetailFormDemo extends Component<CardDetailFormDemoProps> {
  componentDidMount() {
    const data: FormDatas = {
      'creater': '杨文元',
      'task': '1',
    };
    this.initCardDetailForm().then(() => {
      cardDetailFormStore.updateDatas({
        normal_notEmpty: '1',
        tags_notEmpty_normal: '1',
        collapsible: 'collapsible',
      });
    })
    let topLayout: FormLayoutType[] = [
      [
        { id: '1', label: '负责人', items: ['creater'], labelSpan: 6, hide: false, groupId: 'normal', },
        {
          id: '2', label: '到期日', items: ['date'], labelSpan: 6, hide: false, groupId: 'normal',
          className: `${cardDetailFormClsPrefix}-label`, // cardDetailForm组件特殊label字体颜色样式类名
        },
        {
          id: '3', label: '紧急程度', items: ['urgency'], labelSpan: 6, hide: false, groupId: 'normal',
          className: `${cardDetailFormClsPrefix}-label`, // cardDetailForm组件特殊label字体颜色样式类名
        },
      ]];
    const topItems: FormItemProps = {
      'creater': {
        itemType: 'INPUT',
        readOnly: true,
        // browserBean: {
        //   type: 'demo',
        //   module: 'common',
        //   // multiple: true,
        // },
        showType: 'alwaysShow',
      },
      'date': {
        showType: 'alwaysShow',
        readOnly: true,
        itemType: 'DESCRIPTION',
      },
      'urgency': {
        itemType: 'CUSTOM',
        readOnly: true,
        showType: 'alwaysShow',
        options: [
          { id: '1', content: '正常', className: 'normal' },
          { id: '2', content: '紧急', className: 'urgent' },
          { id: '3', content: '非常紧急', className: 'veryUrgent' },
        ],
      },
    }
    formTopStore.initForm({
      items: topItems, data: {
        'creater': '杨文元',
        'date': '2021-04-25',
        'urgency': '1',
      }, groups: [], layout: topLayout
    });
    cardDetailFormDemoStore.setValue('1');
  }
  initCardDetailForm = () => {
    return new Promise((resolve) => { // 模拟接口前后顺序
      cardDetailFormStore.init({ items, layout, data: {}, hoverEdit: false, isMobile: false  }); // 先初始化
      resolve({});
    })
  }
  getData = () => {
    const { description, getFormDatas } = cardDetailFormStore;
    console.log('任务描述：description', description);
    console.log('顶部表单数据', formTopStore.getFormDatas());
    console.log('表单数据：getFormDatas', getFormDatas());
  }
  customRenderFormSwitch = (key: string, props: CustomRenderItemProps) => {
    if (key === 'urgency') return (
      <Urgency {...props} />
    )
    return (<div></div>)
  }
  onChange = (value?: FormDatas) => {
    console.log('value', value);
  }
  render() {
    const btns = [
      (<Button key='getData' type="primary" onClick={this.getData}>获取数据</Button>),
    ]
    return (
      <div className={prefixCls}>
        <Title noIcon buttons={btns} className={`${prefixCls}-title`} />
        <CardDetailForm
          className="testCardDetailForm"
         
          store={cardDetailFormStore}
        >
          <CardDetailForm.Title
           
            url={imgSrc}
            className="testCardDetailFormTitle"
            store={cardDetailFormStore}
          />
          <Form store={formTopStore} customRenderFormSwitch={this.customRenderFormSwitch} />
        </CardDetailForm>
      </div>
    );
  }
}

export default CardDetailFormDemo
```

### 校验方案

校验方案

```jsx
import { Component } from 'react';
import {
  CardDetailForm, constants, CardDetailFormItemProps, CardDetailFormStore,
  FormLayoutType, Title, Button, FormDatas,
} from '@weapp/ui';
import { observer } from 'mobx-react';

const { uiPcClsPrefix } = constants;
interface CardDetailFormDemoProps {
}

const prefixCls = `${uiPcClsPrefix}-demo-card-detail-form`;

const items: CardDetailFormItemProps = {
  'normal_alwaysShow': {
    itemType: 'INPUT',
    showGroupId: 'normal',
    showType: 'alwaysShow',
    required: true,
  },
  'normal_alwaysShow_1': {
    itemType: 'INPUT',
    showGroupId: 'normal',
    showType: 'alwaysShow',
    required: true,
  },
  'alwaysShow_alwaysShow': {
    itemType: 'INPUT',
    showType: 'alwaysShow',
    showGroupId: 'alwaysShow',
    required: true,
  },
  'collapsible': {
    itemType: 'INPUT',
    showType: 'collapsible',
    required: true,
  },
  'tags_notEmpty_normal': {
    itemType: 'INPUT',
    placeholder: 'task',
    required: true,
    otherParams: {
      showType: 'notEmpty',
      showGroupId: 'normal',
    }
  },
  'tags_notEmpty_alwaysShow': {
    itemType: 'INPUT',
    placeholder: 'task',
    showType: 'notEmpty',
    showGroupId: 'alwaysShow',
    required: true,
  },
  'tags_notEmpty_alwaysShow2': {
    itemType: 'INPUT',
    placeholder: 'task',
    showType: 'notEmpty',
    showGroupId: 'alwaysShow',
    required: true,
  },
  'tags_collapsible_collapsible': {
    itemType: 'INPUT',
    placeholder: 'task',
    showType: 'collapsible',
    showGroupId: 'collapsible',
    required: true,
  },
  'tags_notEmpty_follow': {
    itemType: 'INPUT',
    placeholder: 'task',
    showType: 'notEmpty',
    showGroupId: 'follow',
    required: true,
  },
  'follow': {
    itemType: 'INPUT',
    showType: 'follow',
    required: true,
  },
}

let layout: FormLayoutType[] = [
  [
    { id: '1', label: '始终展示区域A', items: ['normal_alwaysShow'], labelSpan: 6, hide: false, groupId: 'normal', order: 1 }, //A
  ],
  [
    { id: '2', label: '始终展示区域A-1', items: ['normal_alwaysShow_1'], labelSpan: 6, hide: false, groupId: 'normal', order: 1 }, //A
  ],
  [
    { id: '3', label: '始终展示区域B', items: ['alwaysShow_alwaysShow'], labelSpan: 6, hide: false, groupId: 'alwaysShow', order: 2 }, //B
  ],
  [
    { id: '5', label: '跟随折叠隐藏区域-默认字段', items: ['collapsible'], labelSpan: 6, hide: false, groupId: 'collapsible', order: 2 }, //C
  ],
  [
    { id: '7', label: 'A区有值时展示', items: ['tags_notEmpty_normal'], icon: 'Icon-Associated-tasks', labelSpan: 6, hide: false, groupId: 'tags', order: 2 }, //C
    { id: '9', label: 'B区有值时展示', items: ['tags_notEmpty_alwaysShow'], icon: 'Icon-Associated-tasks', labelSpan: 6, hide: false, groupId: 'tags', order: 1 },
    { id: '8', label: 'B区有值时展示2', items: ['tags_notEmpty_alwaysShow2'], icon: 'Icon-Associated-tasks', labelSpan: 6, hide: false, groupId: 'tags', order: 3 },
    { id: '10', label: 'C区跟随展示', items: ['tags_collapsible_collapsible'], icon: 'Icon-Associated-tasks', labelSpan: 6, hide: false, groupId: 'tags', order: 1 },
    { id: '11', label: 'E区有值时展示', items: ['tags_notEmpty_follow'], icon: 'Icon-Associated-tasks', labelSpan: 6, hide: false, groupId: 'tags', order: 2 },
  ],
  [
    { id: '12', label: 'E区始终展示', items: ['follow'], labelSpan: 6, hide: false, groupId: 'follow', order: 1 }, //E
  ]
]

const cardDetailFormStore = new CardDetailFormStore();

@observer
class CardDetailFormDemo extends Component<CardDetailFormDemoProps> {
  componentDidMount() {
    cardDetailFormStore.init({
      items, layout, data: {}, hoverEdit: false, isMobile: false,
      // defaultValidate: true, // 默认校验
    }); // 先初始化
  }
  validate = () => {
    cardDetailFormStore.validate();
  }
  validateByGroupId = () => {
    cardDetailFormStore.validateByGroupId('normal').then((pass) => { // 以normal为例
      console.log(`分组ID: normal`, pass);
    })
  }
  onChange = (groupId: string, value?: FormDatas | undefined, otherParams?: any) => {
    // 按照字段实时校验
    const keys = value ? Object.keys(value) : [];
    const key = keys[0] || '';
    if (key) {
      cardDetailFormStore.validateByGroupId(groupId, {
        [`${key}`]: 'required',
      }).then((pass) => { // 以normal为例
        console.log(`分组ID: normal`, key, pass);
      })
    }
  }
  render() {
    const btns = [
      (<Button  key='validate' type="primary" onClick={this.validate}>全局校验</Button>),
      (<Button  key='validate' type="primary" onClick={this.validateByGroupId}>按照分组校验</Button>),
    ]
    return (
      <div className={prefixCls}>
        <Title  noIcon buttons={btns} leftCol={0} rightCol={24} className={`${prefixCls}-title`} />
        <CardDetailForm 
          store={cardDetailFormStore}
          onChange={this.onChange}
        />
      </div>
    );
  }
}

export default CardDetailFormDemo
```

### 设置url模式

设置url模式

```jsx
import { Component } from 'react';
import {
	CardDetailForm, constants, CardDetailFormStore,
	FormDatas, FormStore, Title, Button,
	BaseProps, SelectOptionProps, CardDetailFormAllDatas, AnyObj,
} from '@weapp/ui';
import { observer } from 'mobx-react';
import { request, RequestOptionConfig } from '@weapp/utils';

const { getShowGroupId } = CardDetailForm;

const { uiPcClsPrefix } = constants;
interface CardDetailFormDemoProps {
}

const prefixCls = `${uiPcClsPrefix}-demo-card-detail-form`;

const cardDetailFormStore = new CardDetailFormStore();
@observer
class CardDetailFormDemo extends Component<CardDetailFormDemoProps> {

	componentDidMount() {
	}
	onChange = (value?: FormDatas) => {
		console.log('value', value);
	}
	validate = () => cardDetailFormStore.validate();
	reset = () => cardDetailFormStore.reset();
	getData = () => console.log(cardDetailFormStore.getFormDatas());

	beforeInit = (datas: CardDetailFormAllDatas) => { // 初始化Form前钩子(doRequest使用)
		datas.items = {
			...datas.items,
			common: {
				"itemType": "PLUGIN",
				"visible": true,
				"disable": false,
				"required": false,
				"readOnly": false,
				"multiple": false,
				"common": true,
				"pluginParams": {
					packageName: '@weapp/my',
					compName: "PureEntityTag",
					type: '0',
				},
				"otherParams": {
					"queryUrl": "/my/tag/common/queryEntityTag",
					"addUrl": "/my/tag/common/addEntityTag",
					"showType": "collapsible",
					"deleteUrl": "/my/tag/common/removeEntityTag"
				}
			}
		}
		return datas;
	}

	//beforeInit = (datas: CardDetailFormAllDatas): Promise<CardDetailFormAllDatas> => {
	//   return new Promise((resolve) => {
	//     resolve(datas);
	//   })
	// }

	afterUpdateRelevanceDatas = (datas: AnyObj) => {
		const { items } = cardDetailFormStore;
		console.log('afterUpdateRelevanceDatas', datas, 'groupid', getShowGroupId(items['upload']));
	}

	render() {
		const btns = [
			(<Button key='getData' type="primary" onClick={this.getData}>获取数据</Button>),
			(<Button key='validate' type="primary" onClick={this.validate}>校验</Button>),
			(<Button key='reset' type="primary" onClick={this.reset}>重置</Button>),
		]
		return (
			<div className={prefixCls}>
				<Title noIcon buttons={btns} className={`${prefixCls}-title`} />
				<CardDetailForm
					className="testCardDetailForm"
				
					store={cardDetailFormStore}
					beforeInit={this.beforeInit}
					mode={true}
					url={'/api/bcw/form/defaultCardDetailForm'}
					module={'blog'}
					params={{
						"excludeLayout": [
								"upload"
						]
				}}
					saveDataParams={{
						"objectId": "835856431797576185",
						"objectModule": "blog",
						"objectName": "蒋贝贝的2023年 3月 3日的日报"
				}}
					saveParams={{
						"objectId": "835856431797576185",
						"module": "blog",
						"objectName": "蒋贝贝的2023年 3月 3日的日报"
				}}
					dataParams={{
						"module": "blog",
						"objectId": "835856431797576185",
						"excludeLayout": [
								"upload"
						]
				}}
					cardDetailDialogParams={{
						"objectId": "835856431797576185",
						"objectModule": "blog"
				}}
					afterUpdateRelevanceDatas={this.afterUpdateRelevanceDatas}
				/>
			</div>
		);
	}
}

export default CardDetailFormDemo
```

### 设置url模式(非实时保存关联浏览框数据)

设置url模式(非实时保存关联浏览框数据)

```jsx
import { Component } from 'react';
import {
  CardDetailForm, constants, CardDetailFormStore,
  FormDatas, Title, Button,
} from '@weapp/ui';
import { observer } from 'mobx-react';

const { uiPcClsPrefix } = constants;
interface CardDetailFormDemoProps {
}
const prefixCls = `${uiPcClsPrefix}-demo-card-detail-form`;

const cardDetailFormStore = new CardDetailFormStore();
@observer
class CardDetailFormDemo extends Component<CardDetailFormDemoProps> {

  onChange = (value?: FormDatas) => {
    console.log('value', value);
  }
  validate = () => cardDetailFormStore.validate();
  reset = () => cardDetailFormStore.reset();
  getData = () => console.log(cardDetailFormStore.getFormDatas());
  save = () => cardDetailFormStore.doSave();
  render() {
    const btns = [
      (<Button key='getData' type="primary" onClick={this.getData}>获取数据</Button>),
      (<Button key='getData' type="primary" onClick={this.save}>保存关联字段数据</Button>),
      (<Button key='validate' type="primary" onClick={this.validate}>校验</Button>),
      (<Button key='reset' type="primary" onClick={this.reset}>重置</Button>),
    ]
    return (
      <div className={prefixCls}>
        <Title noIcon buttons={btns} leftCol={0} rightCol={24} className={`${prefixCls}-title`} />
        <CardDetailForm
          className="testCardDetailForm"
         
          store={cardDetailFormStore}
          mode={true}
          url={'/api/bcw/form/defaultCardDetailForm'}
          module={'bcw'}
          saveDataParams={{
            objectId: "4032202098417870868",
            objectModule: "workflow",
            objectModuleId: 0,
          }}
          saveParams={{
            module: 'workflow',
            objectName: 'test',
          }}
          dataParams={{
            module: 'workflow',
            objectId: "4032202098417870868",
          }}
          prohibitRealTimeSaving
          cardDetailDialogParams={{
            objectId: "4032202098417870868",
            objectModule: "workflow",
          }}
        />
      </div>
    );
  }
}

export default CardDetailFormDemo
```

### 非url模式(公共关联项目)

非url模式(公共关联项目)

```jsx
import { Component } from 'react';
import {
	CardDetailForm, constants, CardDetailFormStore,
	FormDatas, FormStore, Title, Button,
	BaseProps, SelectOptionProps,
} from '@weapp/ui';
import CardDetailFormDemoStore from "./store";
import { observer } from 'mobx-react';
import { request } from '@weapp/utils';

const { uiPcClsPrefix } = constants;
interface CardDetailFormDemoProps {
}
const prefixCls = `${uiPcClsPrefix}-demo-card-detail-form`;

const cardDetailFormStore = new CardDetailFormStore();
@observer
class CardDetailFormDemo extends Component<CardDetailFormDemoProps> {

	componentDidMount() {
		cardDetailFormStore.doRequest('/api/bcw/form/defaultCardDetailForm', false, {
			store: cardDetailFormStore,
			module: 'document',
			saveDataParams: {
				objectId: "4032202098417870868", // 卡片id
				objectModule: "document", // 模块
				objectModuleId: 0, // 模块id
			},
			saveParams: {
				module: 'document', // 模块
				objectName: 'test', // 卡片名称
			},
			dataParams: {
				module: 'document', // 模块
				objectId: "4032202098417870868", // 卡片id
			},
			cardDetailDialogParams: {
				objectId: "4032202098417870868", // 卡片id
				objectModule: "document", // 模块
			}
		}).then((result) => {
			console.log('afterDoRequest', result);
		})
	}
	onChange = (value?: FormDatas) => {
		console.log('value', value);
	}
	validate = () => cardDetailFormStore.validate();
	reset = () => cardDetailFormStore.reset();
	getData = () => console.log(cardDetailFormStore.getFormDatas());
	render() {
		const btns = [
			(<Button key='getData' type="primary" onClick={this.getData}>获取数据</Button>),
			(<Button key='validate' type="primary" onClick={this.validate}>校验</Button>),
			(<Button key='reset' type="primary" onClick={this.reset}>重置</Button>),
		]
		return (
			<div className={prefixCls}>
				<Title noIcon buttons={btns} className={`${prefixCls}-title`} />
				<CardDetailForm
					className="testCardDetailForm"
				
					store={cardDetailFormStore}
					module={'document'}
				/>
			</div>
		);
	}
}

export default CardDetailFormDemo
```

### 密级校验(非url模式)

密级校验(非url模式)

```jsx
import { Component } from 'react';
import { constants, CardDetailFormStore, Select, CardDetailForm, SelectValueType, utils, CardDetailFormAllDatas } from '@weapp/ui';
import { observer } from 'mobx-react';
import { request } from '@weapp/utils';

const { getRandom } = utils;
const { uiPcClsPrefix } = constants;
interface CardDetailFormDemoProps {
}
interface CardDetailFormDemoState {
  value: SelectValueType;
}

const prefixCls = `${uiPcClsPrefix}-demo-card-detail-form`;
@observer
class CardDetailFormDemo extends Component<CardDetailFormDemoProps, CardDetailFormDemoState> {
  cardDetailFormStore = new CardDetailFormStore();
  constructor(props: CardDetailFormDemoProps) {
    super(props);
    this.state = {
      value: ['0'],
    }
  }
  componentDidMount() {
    this.cardDetailFormStore.doRequest(
      '/api/bcw/form/defaultCardDetailForm',
      false,
      {
        store: this.cardDetailFormStore,
        module: 'document',
        saveDataParams: {
          objectId: "4032202098417870868", // 卡片id
          objectModule: "document", // 模块
          objectModuleId: 0, // 模块id
        },
        saveParams: {
          module: 'document', // 模块
          objectName: 'test', // 卡片名称
        },
        dataParams: {
          module: 'document', // 模块
          objectId: "4032202098417870868", // 卡片id
        },
        cardDetailDialogParams: {
          objectId: "4032202098417870868", // 卡片id
          objectModule: "document", // 模块
        },
        beforeInit: this.beforeInit,
      }
    );
  }
  beforeInit = (initParams: CardDetailFormAllDatas) => {
    console.log('----------------- 接口返回布局信息后 -----------------');
    this.cardDetailFormStore.secretLevelStore.init({
      secretLevel: 5,
      secretLevelValidity: '',
      prohibitRealTimeSaving: false, // 默认false, true代表禁止实时保存
    }, initParams); // 非url模式，在cardDetailFormStore.init后调用
    return initParams;
  }
  validateSecretLevel = (value: SelectValueType) => {
    // 过滤密级数据
    this.setState({ value }, () => {
      this.cardDetailFormStore.secretLevelStore.validateSecretLevel(parseInt(value as string), '');
    });
  }
  render() {
    const options = [
      { id: '5', content: '密级(低)' },
      { id: '3', content: '密级(中)' },
      { id: '0', content: '密级(高)' }
    ];

    return (
      <div className={prefixCls}>
        <Select value={this.state.value} data={options} onChange={this.validateSecretLevel}></Select>
        <CardDetailForm store={this.cardDetailFormStore} />
      </div>
    );
  }
}

export default CardDetailFormDemo
```

### 密级校验(url模式)

密级校验(url模式)

```jsx
import { Component } from 'react';
import { constants, CardDetailFormStore, Select, CardDetailForm, SelectValueType, utils, CardDetailFormAllDatas } from '@weapp/ui';
import { observer } from 'mobx-react';

const { getRandom } = utils;
const { uiPcClsPrefix } = constants;
interface CardDetailFormDemoProps {
}
interface CardDetailFormDemoState {
  value: SelectValueType;
}
const prefixCls = `${uiPcClsPrefix}-demo-card-detail-form`;
@observer
class CardDetailFormDemo extends Component<CardDetailFormDemoProps, CardDetailFormDemoState> {
  cardDetailFormStore = new CardDetailFormStore();
  constructor(props: CardDetailFormDemoProps) {
    super(props);
    this.state = {
      value: ['5'],
    }
  }
  validateSecretLevel = (value: SelectValueType) => {
    // console.time();
    this.setState({ value }, () => {
      this.cardDetailFormStore.secretLevelStore.validateSecretLevel(parseInt(value as string), '');
    });
    // console.timeEnd();
  }
  // // 新版本写法
  beforeInit = (initParams: CardDetailFormAllDatas) => {
    console.log('----------------- 接口返回布局信息后 -----------------');
    this.cardDetailFormStore.secretLevelStore.init({
      secretLevel: 5,
      secretLevelValidity: '',
      prohibitRealTimeSaving: false, // 默认false, true代表禁止实时保存
    }, initParams); // 非url模式，在cardDetailFormStore.init后调用
    return initParams;
  }
  render() {
    const options = [
      { id: '5', content: '密级(低)' },
      { id: '3', content: '密级(中)' },
      { id: '0', content: '密级(高)' }
    ];
    
    return (
      <div className={prefixCls}>
        <Select value={this.state.value} data={options} onChange={this.validateSecretLevel}></Select>
        <CardDetailForm
					className="testCardDetailForm"
					store={this.cardDetailFormStore}
					beforeInit={this.beforeInit}
					mode={true}
					url={'/api/bcw/form/defaultCardDetailForm'}
					module={'document'}
					saveDataParams={{
						objectId: "4032202098417870869", // 卡片id
						objectModule: "document", // 模块
						objectModuleId: 0, // 模块id
					}}
					saveParams={{
						module: 'document', // 模块
						objectName: 'test', // 卡片名称
					}}
					dataParams={{
						module: 'document', // 模块
						objectId: "4032202098417870869", // 卡片id
					}}
					cardDetailDialogParams={{
						objectId: "4032202098417870869", // 卡片id
						objectModule: "document", // 模块
					}}
				/>
      </div>
    );
  }
}

export default CardDetailFormDemo
```

### 关联事项设置

关联事项设置

```jsx
import { CardDetailForm, Button } from '@weapp/ui';
import React from 'react';
import SettingView from './settingView';
const { Setting } = CardDetailForm;

interface SettingDemoState {
  visible: boolean
}
class SettingDemo extends React.Component<any, SettingDemoState> {
  constructor(props: any) {
    super(props);
    this.state = {
      visible: false,
    }
  }
  showDialog = () => this.setState({ visible: true })
  onClose = () => this.setState({ visible: false });
  onSave = (data?: any[]) => {
    console.log('data', data);
    this.onClose();
  }
  params = {
    "businessId":"folder_123456789"
  }
  saveParams = {
    "businessId":"folder_123456789",
    "newParams": '1',
  }
  render() {
    const { visible } = this.state;
    return <>
      <Setting
       
        visible={visible}
        onClose={this.onClose}
        onSave={this.onSave}
        module="bcw"
        params={this.params}
        saveParams={this.saveParams}
      />
      <Button type="primary" onClick={this.showDialog}>设置事项关联</Button>
      <SettingView />
    </>
  }
}
export default SettingDemo;
```

### 关联事项设置(无弹窗)

关联事项设置(无弹窗)

```jsx
import { CardDetailForm, CardDetailFormSettingContentRef, Button, Title, constants, EditableTableColumn } from '@weapp/ui';
import React from 'react';
const { SettingContent } = CardDetailForm;

const { uiPcClsPrefix } = constants;
const prefixCls = `${uiPcClsPrefix}-demo-card-detail-form-settingContent`;

class SettingDemo extends React.Component<any> {
  contentRef = React.createRef<CardDetailFormSettingContentRef>();
  onSave = () => {
    this.contentRef?.current?.doSave?.().then((result) => {
      console.log('result', result);
    })
  }
  params = {
    "businessId":"folder_123456789"
  }
  render() {
    return <>
      <Title className={`${prefixCls}-title`} noIcon title="基础设置(无弹窗)" buttons={(
        <Button onClick={this.onSave} type="primary" key="save">保存</Button>
      )} />
      <SettingContent
       
        module="bcw"
        params={this.params}
        ref={this.contentRef}
      />
    </>
  }
}
export default SettingDemo;
```

### 自定义请求

自定义请求

```jsx
import { Component } from 'react';
import {
  CardDetailForm, CardDetailFormStore, Button, Dialog
} from '@weapp/ui';
import { observer } from 'mobx-react';
import { request, RequestOptionConfig } from '@weapp/utils';

interface CardDetailFormDemoProps {
}

@observer
class CardDetailFormDemo extends Component<CardDetailFormDemoProps, any> {
  constructor(props: CardDetailFormDemoProps) {
    super(props);
    this.state = {
      visible: false,
    }
  }
  cardDetailFormStore = new CardDetailFormStore();
  saveDataParams = {
    objectId: "4032202098417870868", // 卡片id
    objectModule: "document", // 模块
    objectModuleId: 0, // 模块id
  }
  saveParams = {
    module: 'document', // 模块
    objectName: 'test', // 卡片名称
  }
  dataParams = {
    module: 'document', // 模块
    objectId: "4032202098417870868", // 卡片id
  }
  cardDetailDialogParams = {
    objectId: "4032202098417870868", // 卡片id
    objectModule: "document", // 模块
  }
  fetchData = (options: RequestOptionConfig) => {
    // options内输出的url内容在network对应可抓到
    return request({
      ...options, headers: {
        ...options.headers,
        testHeaderId: '1',
      }
    });
  }
  onClose = () => this.setState({ visible: false })
  onOpen = () => this.setState({ visible: true })
  render() {
    const { visible } = this.state;
    return (
      <>
        <Button onClick={this.onOpen}>测试fetchData</Button>
        <Dialog
          title="测试fetchData"
          visible={visible}
          onClose={this.onClose}
          destroyOnClose
          closable
        >
          <CardDetailForm
            store={this.cardDetailFormStore}
            mode={true}
            url={'/api/bcw/form/defaultCardDetailForm'}
            module={'document'}
            saveDataParams={this.saveDataParams}
            saveParams={this.saveParams}
            dataParams={this.dataParams}
            cardDetailDialogParams={this.cardDetailDialogParams}
            fetchData={this.fetchData}
          />
        </Dialog>
      </>
    );
  }
}

export default CardDetailFormDemo
```

## API

### 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |  |
| --- | --- | --- | --- | --- | --- |
| store | 事项卡片组件实例 | CardDetailFormStore | 是 |  |  |
| onChange | 表单字段值改变事件 | (groupId: string, value?: FormDatas, otherParams?: any) => void, | 否 |  |  |
| onBlur | 表单字段失去焦点事件 | (groupId: string, value?: FormDatas, otherParams?: any) => void, | 否 |  |  |
| formProps | 表单自定义设置 | CardDetailFormCustomProps | 否 |  |  |
| showBtnContent | 自定义折叠面板显示按钮内容 | string \| ReactNode | 否 |  |  |
| hideBtnContent | 自定义折叠面板隐藏按钮内容 | string \| ReactNode | 否 |  |  |
| dataParams | 获取关联字段数据接口自定义参数 | 具体见 urldemo | 否 |  |  |
| saveParams | 保存接口自定义参数 |  | 否 | 具体见 urldemo |  |
| saveDataParams | 保存关联字段数据接口自定义参数 | 具体见 urldemo | 否 |  |  |
| tagNumber | 关联字段区域每行显示个数 | 否 | 5 |  |  |
| url | 支持 url 配置模式 | string | 否 |  |  |
| method | 支持 method 配置(url 模式) | string | 否 |  |  |
| params | 支持接口传参配置(url 模式) | any | 否 |  |  |
| prohibitRealTimeSaving | 禁止实时保存关联数据 | boolean | 否 |  |  |
| hideTags | 隐藏标签区（D 区）内容 | boolean | 否 |  |  |
| hideTagFooter | 隐藏折叠面板开关 | boolean | 否 |  |  |
| cardDetailDialogParams | 打开事项卡片弹框附加参数(同Browser中的cardDetailDialogParams配置) | object | 否 |  |  |
| afterInit | 初始化后置事件(仅mode=true模式) | () => void | 否 |  |  |
| beforeInit | 初始化Form前置事件(仅mode=true模式或doRequest使用) | (datas: CardDetailFormAllDatas) => Promise<CardDetailFormAllDatas> \| CardDetailFormAllDatas | 否 |  |  |
| defaultValidate | 设置是否初始化默认校验(非url模式，在调用doRequest/init方式时传递，url模式在props上传递) | boolean | 否 |  |  |
| openLoading | 开启 CardDetailForm 的loading效果 | boolean | 否 |  |  |
| afterUpdateRelevanceDatas | 关联数据更新后回调事件 | (datas: AnyObj) => void | 否 |  |  |
| requestHeaderParams | 接口headers参数 | AnyObj | 否 |  |  |
| fetchData | 自定义请求数据(mode=true模式时设置, 非mode=true，在doRequest方法内传入) | (options: RequestOptionConfig) => RequestPromise | 否 |  |  |
| globalReadOnly | 全局只读模式 | boolean | 否 | false |  |
| allowRequestHeaderParamsTrans | 允许requestHeaderParams透传 | boolean | 否 |  |  |
| requestHeaderParamsFields | 接口headers参数（传递给字段） | AnyObj | 否 |  |  |
#### cardDetailDialogParams例子

```
  {
    objectId: "4032202098417870868", // 卡片id
    objectModule: "document", // 模块
  }
```

### CardDetailForm.Title 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| store | 事项卡片组件实例 | CardDetailFormStore | 是 |  |
| url | 头像地址 | string | 否 |  |
| avatarProps | 顶部头像组件自定义配置 | AvatarProps | 否 |  |
| titleProps | 顶部输入框组件自定义配置 | InputProps | 否 |  |
| description | 任务描述 | ReactText | 否 |  |
| onChangeDescription | 修改任务描述回调事件 | 否 |  |  |
| customRenderInput | 自定义顶部输入框 | 否 |  |  |
| enableMultilineText | 任务描述的多行文本模式 | 否 |  |  |
| textareaProps | 任务描述字段自定义设置(多行文本) | TextareaProps | 否 |  |
### CardDetailForm.Setting 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| visible | 显示/隐藏标记 | boolean | 否 |  |
| onClose | 关闭事件回调 | () => void | 否 |  |
| onSave | 保存回调 | (data?: any[]) => void | 否 |  |
| dialogProps | Dialog自定义参数(Dialog组件所有属性) | DialogProps | 否 |  |
| module | 接口module | string | 否 |  |
| params | 查询接口自定义参数 | AnyObj | 否 |  |
| getColumns | 自定义列 | (columns: EditableTableColumn[]) => EditableTableColumn[] | 否 |  |
| requestHeaderParams | 接口headers参数 | AnyObj | 否 |  |
| saveParams | 保存接口自定义参数 | AnyObj | 否 |  |
### CardDetailForm.Content 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| dialogProps | Dialog自定义参数(Dialog组件所有属性) | DialogProps | 否 |  |
| module | 接口module | string | 否 |  |
| params | 查询接口自定义参数 | AnyObj | 否 |  |
| getColumns | 自定义列 | (columns: EditableTableColumn[]) => EditableTableColumn[] | 否 |  |
| saveParams | 保存接口自定义参数 | AnyObj | 否 |  |
| requestHeaderParams | 接口headers参数 | AnyObj | 否 |  |
#### CardDetailForm.getShowGroupId API说明

```
CardDetailForm 公共规则：获取字段的groupId
getShowGroupId: (item: FormItemProps) => string;
```

#### CardDetailFormCustomProps 参数说明如下：

```
CardDetailForm组件内部共四个分组，分别为 normal、alwaysShow、collapsible、tags、follow

formProps参数支持设置以上三个分组的Form组件自定义参数，即normal、alwaysShow、collapsible、follow，tags分组目前不支持

formProps: CardDetailFormCustomProps = {
  normal: { onChange: this.onChange }, // onChange仅为参考，实际单个formProps支持配置除store之外的所有Form组件参数
  alwaysShow: {},
  collapsible: {},
}
```

#### layout 及 items 配置说明

```
该组件共涉及五个Form组件，即五个分组，groupId分别为normal(A区)、alwaysShow(B区)、collapsible(C区)、tags(D区)、follow(E区)。
其中A、B始终展示，不跟随下方折叠面板区域显示或隐藏，内部字段可设置为始终展示或者有数据时展示类型
C区，始终跟随下方折叠面板区域显示或隐藏，内部字段仅可设置为始终折叠模式
D区，为关联字段区域，内部字段可设置为有数据时展示及始终折叠类型，选中分别会添加至B区或C区。
E区，为关联字段下方区域，常见于任务卡片的子任务字段设置，内部字段可设置为始终展示或者有数据时展示类型。

注意：A、B、E、三个区域的有数据时展示类型字段，如需与D区有关联关系，则必须统一设置在groupId = tags分组内，
     设置在groupId为normal、alwayShow、follow分组内，则视为这三个分组的默认字段，与D区无关联关系。(具体可参考案例一：基础用法)

一、items配置说明
items配置基本与Form组件一致，另新增以下参数
1.showType：可配置为'normal' | 'notEmpty' | 'collapsible' | 'follow'，分别为，始终展示，有数据时展示、始终折叠、跟随部分(即标签下方区域)
2.showGroupId: 可配置为'alwaysShow' | 'normal',主要与showType配合使用，代表该字段需关联至哪个分组，
  其中showType为collapsible仅可关联至C区, showType为follow仅可关联至E区，不可以设置showGroupId。
3.otherParams内新增cardDetailFormProps配置，用于自定义权限校验
```

cardDetailFormProps: {

```
targetModule: ik, // 保存数据时，浏览框数据内存储的targetModule

module: 'ebuilder', //模块标识，用于判断是否有license权限、是否未免费版本等
```

}

```
二、layout配置说明
1.layout配置基本与Form组件一致
2.D区，及groupId = 'tags'配置，需新增icon参数配置。

三、注意：layout中hide字段，设置默认的字段显示或者隐藏，当该字段不需要展示时，请在初始化组件的时候将hide设置为true，或者不传该字段给组件；需要默认显示该字段时，需设置hide为false。

四、字段排序
可排序字段为相同groupId及groupId=tags分组内的showGroupId为一组排序，通过layout中的order配置，用于实现各区插入字段排序功能，order为升序排列。

五、init方法说明
init方法参数配置：
1.必须有layout、items、data，用于表单布局，group按照组件内部处理即可
2.组件分为自行调用初始化及通过url配置模式，若为自定调用初始化的使用方式，请在init的时候加上hoverEdit及isMoble参数配置。其中hoverEdit用于控制是否默认开始数据移入显示的效果，
isMobile用于区分是pc端还是移动端
3.isMobile说明：若未使用url模式，且D区有自定义的关联字段，则必须配置该参数，用于判断pc端非url模式，默认初始化有值才显示的自定义关联字段布局。
4.若满足第三点情况，但不配置isMobile参数为false，也可单独使用CardDetailFormStore的updateDatas或updateDatasNotReFormat方法自行处理。
```

#### CardDetailFormStore API 说明

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| init | 初始化任务卡片(仅初始化Form布局) | (allDatas: CardDetailFormAllDatas) => void | 否 |  |
| getFormDatas | 获取任务卡片表单数据 | () => FormDatas | 否 |  |
| updateDatas | 更新任务卡片表单数据(包含重新排版功能，适用groupId为'tags'的D区) | (datas: FormDatas) => void | 否 |  |
| updateDatasNotReFormat | 更新任务卡片表单数据(不包含重新排版功能，适用groupId不为'tags'的分区) | (datas: FormDatas) => void | 否 |  |
| reset | 重置任务卡片表单数据 | () => void | 否 |  |
| validate | 校验任务卡片表单数据 | () => void | 否 |  |
| validateByGroupId | 校验任务卡片表单数据(按照分组校验、按照自定义校验配置校验) | (groupId: string, customRules?: AnyObj) => boolean | 否 |  |
| doSave | 保存关联字段数据 | () => Promise |  |  |
| doRequest | 初始化任务卡片(包含请求接口及公共关联浏览框字段处理逻辑) | (url: string, isMobile: boolean, props: CardDetailFormProps & MCardDetailFormProps) => Promise\ | 否 |  |
| secretLevelStore | 密级数据过滤store | SecretLevelStoreType | 否 |  |
#### CardDetailFormAllDatas 说明

```
interface CardDetailFormAllDatas {
  items: CardDetailFormItemProps,
  layout: FormLayoutType[],
  data: FormDatas,
  isMobile?: boolean,
  hoverEdit?: boolean, // 与Form组件一致，仅支持pc端
  groups?: Array<FormGroupProps>,
  module?: string,
  saveDataParams?: any,
  dataParams?: any,
  customGrouping?: boolean,
  /* 打开事项卡片附加的参数 */
  cardDetailDialogParams?: AnyObj;
  /* 设置是否初始化默认校验(非url模式，在调用doRequest/init方式时传递，url模式在props上传递) */
  defaultValidate?: boolean,
  /* 默认校验分组设置 */
  defaultValidateGroupIds?: Array<string>;
  /* 接口headers参数 */
  requestHeaderParams?: AnyObj;
}
```

#### SecretLevelStore API 说明

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| init | 初始化 | (props: SecretLevelStoreProps) => void | 否 |  |
| validateSecretLevel | 密级校验方法 | (secretLevel: number, secretLevelValidity: string, prohibitRealTimeSaving?: boolean) => void | 否 |  |
#### SecretLevelStoreProps 说明

```
interface SecretLevelStoreProps {
  secretLevel: number, //密级等级(默认值)
  secretLevelValidity: string, // 保密期限(默认值) 
  prohibitRealTimeSaving?: boolean, // 禁止公共关联字段实时保存功能
}
```
