前几周写过类似的文章，不过那个是用来试水的，之前用的vue3，现在用的vue2，从本文章开始，接下来我会讲解如何实现仿钉钉表单设计和流程设计动态化面板，后续会开放源代码下载。

本次讲解如何实现表单设计和相关代码释义，vuedraggable相关用法自己百度，先看最终效果：

整体显示效果：

左侧拖入效果：

组件被流程设计里使用后效果：

单项或多选数据源编辑效果：

表单设计界面，之前文章有介绍过，思路很简单，大概步骤如下：

1、界面分三块，组件实现结合element，无需自己实现组件
2、使用vuedraggable插件，左边拖到右边，无需自己实现拖动
3、选中组件，实现不同的属性栏，根据不同组件是否展示相关属性和设置相关属性
4、每次从组件库拖动，给组件生产唯一ID和name，方便查找和标识、存储等

整个组件一个vue文件就可以搞定

先看script里代码，组件头部，主要引用了vuedraggable插件，然后一个props 里 接受了外部流程设计（node）节点传输参数

流程设计节点（node））传输过来，主要用于判定组件是否用于流程设计里作为审批条件

dragList 组件库
widgetList 表单设计JSON，也就是组件拖动过去循环的数据源，同时监听回调给changd方法
IndexActive 当前选中组件索引
optionsDialog 是否显示单选组件和多选组件，数据源的编辑弹窗
isDrag 是否在拖动

addOption,delOption 添加删除当前组件数据源里的项
widget 获取当前组件对象
changeActive 点击切换当前组件选中
IsNodeFlow 判断组件是否被设为流程条件，直接检测当前name（唯一标识）在节点string里是否存在

deleteActive 删除组件
getKeyRandom 产生随机数
cloneDefaultField 左侧组件库，拖动之前给当前对象生产 ID 和 name
onStart,onEnd 左侧组件库拖动开始 拖动结束

onStart2,onEnd2 中间组件面板，拖动开始 拖动结束
showPropsName 取得当前组件名称，是否显示【唯一名称】界面
showPropsPlaceholder 是否显示【提示文字】界面，其他方法也是控制下图中的属性是否显示

现在再看界面代码，所有结构如下，CSS相关就不说明了，后续开放源代码后自行下载：

左侧组件库界面和代码，根据默认设置的dragList集合里的数据，循环界面组件：

中间拖动面板界面和代码，主打的就是循环读取拖动过来的数据，进行解析展示，和选中：

右侧属性面板界面和代码，主要是根据当前选中组件，进行各种判定，是否展示相关属性或者进行更改：

至此，整个表单设计面板基本完成，下一篇将介绍流程设计。