FcDesigner

Appearance

获取层级结构 ​

在设计器中，您可以使用 getDescription 和 getFormDescription 方法获取当前拖拽表单的层级结构。这些方法帮助您查看和操作表单组件的组织结构。

注意

层级结构与表单最终的渲染规则可能存在不一致的情况。例如，某些嵌套组件层级结构和最终规则不同。

数据结构 ​

ts
export type DescriptionData = Array<{
    //唯一值
    _fc_id: string;
    //组件类型
    type: string;
    //字段id
    field?: string;
    //组件名称
    title?: string;
    //插槽名称
    slot?: string;
    //组件属性配置
    props: Object;
    //子级
    children?: DescriptionData;
}>

示例 ​

description.png

vue
<fc-designer ref="designer" />

所有组件的层级结构 ​

通过getDescription方法获取当前设计器中所有组件的层级结构，包括设计器内的所有组件，无论是表单组件还是非表单组件。

vue
<template>
    <fc-designer ref="designer" />
</template>


<script>
    export default {
        methods: {
            getDescription() {
                // 调用 getDescription 方法获取所有组件的层级结构
                const tree = this.$refs.designer.getDescription();
                console.log(tree);
            }
        }
    }
</script>

返回的数据结构：

json
[
  {
    "_fc_id": "id_Fxltly0ebc4rbfc",
    "type": "input",
    "field": "Fwt8ly0ebc4rbec",
    "title": "输入框",
    "props": {}
  },
  {
    "_fc_id": "id_Fpaxly0ebaayb8c",
    "type": "fcRow",
    "props": {},
    "children": [
      {
        "_fc_id": "id_Fenmly0ebaaybac",
        "type": "col",
        "props": {
          "span": 12
        },
        "children": [
          {
            "_fc_id": "id_Fbpaly0ec9c0brc",
            "type": "slider",
            "field": "Fy9ply0ec9c0bqc",
            "title": "滑块",
            "props": {}
          }
        ]
      },
      {
        "_fc_id": "id_Fyhfly0ebaaybcc",
        "type": "col",
        "props": {
          "span": 12
        },
        "children": [
          {
            "_fc_id": "id_Funoly0ebxmlboc",
            "type": "rate",
            "field": "Fyxily0ebxmlbnc",
            "title": "评分",
            "props": {}
          }
        ]
      },
      {
        "_fc_id": "id_Fub2ly0ech3rbvc",
        "type": "col",
        "props": {
          "span": 12
        },
        "children": [
          {
            "_fc_id": "id_F4dsly0ecjt3bxc",
            "type": "elButton",
            "props": {}
          }
        ]
      },
      {
        "_fc_id": "id_Fl6jly0ecgndbtc",
        "type": "col",
        "props": {
          "span": 12
        },
        "children": [
          {
            "_fc_id": "id_F340ly0ect4cc0c",
            "type": "timePicker",
            "field": "F23sly0ect4cbzc",
            "title": "时间",
            "props": {}
          }
        ]
      }
    ]
  },
  {
    "_fc_id": "id_F50fly0enjnlc3c",
    "type": "fcRow",
    "field": "F7j1ly0enjnlc2c",
    "title": "子表单",
    "props": {},
    "children": [
      {
        "_fc_id": "id_F69aly0enn91c9c",
        "type": "input",
        "field": "F2emly0enn91c8c",
        "title": "多行输入框",
        "props": {
          "type": "textarea"
        }
      },
      {
        "_fc_id": "id_Fy8sly0enlh4c6c",
        "type": "input",
        "field": "Fzvtly0enlh4c5c",
        "title": "输入框",
        "props": {}
      }
    ]
  },
  {
    "_fc_id": "id_Fvm5ly0entiqcec",
    "type": "tableForm",
    "field": "Fieqly0entipcdc",
    "title": "表格表单",
    "props": {},
    "children": [
      {
        "_fc_id": "id_Filuly0entiqcgc",
        "type": "tableFormColumn",
        "props": {
          "label": "自定义名称",
          "width": "auto"
        },
        "children": [
          {
            "_fc_id": "id_F1kmly0enux1cic",
            "type": "input",
            "field": "Fh9zly0enux1chc",
            "title": "输入框",
            "props": {}
          }
        ]
      },
      {
        "_fc_id": "id_Ftlvly0enw7eckc",
        "type": "tableFormColumn",
        "props": {
          "label": "自定义名称",
          "width": "auto"
        },
        "children": [
          {
            "_fc_id": "id_Frmlly0eo0h4cmc",
            "type": "switch",
            "field": "Fqxyly0eo0h4clc",
            "title": "开关",
            "props": {}
          }
        ]
      }
    ]
  }
]

仅获取表单组件的层级结构 ​

通过getFormDescription方法获取当前设计器中所有表单组件的层级结构，过滤掉非表单组件。

vue
<script>
    export default {
        methods(){
            getDescription() {
                const tree = this.$refs.designer.getFormDescription();
            }
        }
    }
</script>

返回数据结构：

json
[
  {
    "_fc_id": "id_Fxltly0ebc4rbfc",
    "type": "input",
    "field": "Fwt8ly0ebc4rbec",
    "title": "输入框",
    "props": {}
  },
  {
    "_fc_id": "id_Fbpaly0ec9c0brc",
    "type": "slider",
    "field": "Fy9ply0ec9c0bqc",
    "title": "滑块",
    "props": {}
  },
  {
    "_fc_id": "id_Funoly0ebxmlboc",
    "type": "rate",
    "field": "Fyxily0ebxmlbnc",
    "title": "评分",
    "props": {}
  },
  {
    "_fc_id": "id_F340ly0ect4cc0c",
    "type": "timePicker",
    "field": "F23sly0ect4cbzc",
    "title": "时间",
    "props": {}
  },
  {
    "_fc_id": "id_F50fly0enjnlc3c",
    "type": "fcRow",
    "field": "F7j1ly0enjnlc2c",
    "title": "子表单",
    "props": {},
    "children": [
      {
        "_fc_id": "id_F69aly0enn91c9c",
        "type": "input",
        "field": "F2emly0enn91c8c",
        "title": "多行输入框",
        "props": {
          "type": "textarea"
        }
      },
      {
        "_fc_id": "id_Fy8sly0enlh4c6c",
        "type": "input",
        "field": "Fzvtly0enlh4c5c",
        "title": "输入框",
        "props": {}
      }
    ]
  },
  {
    "_fc_id": "id_Fvm5ly0entiqcec",
    "type": "tableForm",
    "field": "Fieqly0entipcdc",
    "title": "表格表单",
    "props": {},
    "children": [
      {
        "_fc_id": "id_F1kmly0enux1cic",
        "type": "input",
        "field": "Fh9zly0enux1chc",
        "title": "输入框",
        "props": {}
      },
      {
        "_fc_id": "id_Frmlly0eo0h4cmc",
        "type": "switch",
        "field": "Fqxyly0eo0h4clc",
        "title": "开关",
        "props": {}
      }
    ]
  }
]

数据结构详解 ​

  • _fc_id： 唯一标识符，用于唯一识别每个组件。
  • type： 组件类型，如 input、slider 等。
  • field： 字段 ID，表单中每个组件的字段标识。
  • title： 组件名称，用于描述组件功能。
  • slot： 插槽名称，用于指定组件插槽。
  • props： 组件的属性配置，包含组件的所有配置信息。
  • children： 子级组件的层级结构，表示当前组件下的所有子组件。