1.1.4 • Published 1 year ago
iast-library-form-designer v1.1.4
iast-library-form-designer 科学院可视化表单设计器
介绍
本项目使用 vue-cli 4 搭建，基于 vue 和 element-ui 实现，使用了最新的前端技术栈。
二次开发
二次开发需要 vue 的基础，如果还不了解 vue 请查看 Vue官方文档
外部传入参数
表单设计器（iast-library-form-designer）入参：
| 参数名 | 参数类型 | 描述 |
|---|---|---|
| preview | Boolean | 是否为预览状态：true = 是；false（默认） = 否 |
| generateCode | Boolean | 是否输出表单代码：true = 是；false（默认） = 否 |
| generateJson | Boolean | 是否输出表单JSON结构数据：true = 是；false（默认） = 否 |
| importJson | Boolean | 是否允许导入JSON格式表单代码：true = 是；false（默认） = 否 |
| clearable | Boolean | 是否允许清空表单设计：true = 是（默认）；false = 否 |
| variables | Object | 引入变量：主要为当前登录用户信息 |
| appId | String | 应用ID |
| currentFormId | String | 表单ID |
| currentFormVersionId | String | 表单版本ID |
| systemConfig | Object | 系统参数 |
表单渲染器（iss-library-form-renderer）入参：
| 参数名 | 参数类型 | 描述 |
|---|---|---|
| source | Object | 表单结构信息：JSON结构数据，存放表单及其组件的详细信息 |
| value | Object | 表单录入值 |
| edit | Boolean | 是否为编辑状态：true = 是；false（默认） = 否 |
| printRead | Boolean | 是否为打印状态：true = 是；false（默认） = 否 |
| preview | Boolean | 是否为预览状态：true = 是；false（默认） = 否 |
| preferPlatform | String | 终端展示类型：’pc‘ = 电脑端（默认），’pad‘ = 平板电脑，’mobile‘ = 手机 |
| lockPlatform | Boolean | 是否锁定终端类型：true = 是（默认）；false = 否 |
| variables | Object | 引入变量：主要为当前登录用户信息 |
| currentFormId | String | 表单ID |
| formPublishVersionId | String | 表单发布ID |
目录解析
.
|──util
| |──form-generator.js
| |──generate-code.js
| |──request.js
| |──index.js
| |──event-bus.js
| |──layout-handle-put.js
| |──layout-clone.js
| |──key-generator.js
| |──version-upgrade.js
| |──history-manager.js
|──core-renderer
| |──GenerateFormItem.vue
| |──CoreRenderer.vue
| |──Layouts
| | |──GenerateColItem.vue
| | |──GenerateReport.vue
| | |──GenerateCard.vue
| | |──GenerateCollapseItem.vue
| | |──GenerateTableItem.vue
| | |──GenerateTable.vue
| | |──GenerateTabItem.vue
| |──GenerateElementItem.vue
| |──GenerateDisplayItem.vue
|──adapters
| |──api-adapter.js
| |──api-instance.js
|──components
| |──UploadFileComponent.vue
| |──MemberSelectorItem.vue
| |──OrganizationSelector.vue
| |──UploadImageComponent.vue
| |──RichTextEditor.vue
| |──TextComponent.vue
| |──MemberSelector.vue
|──common
| |──config
| | |──components-config.js
| |──components
| | |──BaseHelpIcon.vue
| | |──BaseIcon.vue
| |──consts
| | |──datasource-types.js
| | |──common-patterns.js
| | |──component-meta.js
| | |──variable-list.js
| | |──component-internal-config.js
| | |──form-base-config.js
| | |──component-type.js
| | |──common-reg-exp.js
| | |──font-options.js
|──core-designer
| |──DataSource
| | |──index.vue
| | |──DynamicArray.vue
| | |──DataSourceDialog.vue
| |──CodeEditor
| | |──index.vue
| |──WidgetConfigAdvanced.vue
| |──CoreDesigner.vue
| |──ComponentsList
| | |──ComponentSection.vue
| |──WidgetConfig.vue
| |──WidgetForm.vue
| |──Layouts
| | |──WidgetCollapseItem.vue
| | |──WidgetTableItem.vue
| | |──WidgetColItem.vue
| | |──WidgetTabItem.vue
| | |──WidgetCard.vue
| | |──WidgetTable.vue
| | |──WidgetReport.vue
| |──EventPanel
| | |──EventConfig.vue
| | |──EventDialog.vue
| | |──EventMain.vue
| |──WidgetElementItem.vue
| |──Dialogs
| | |──CodeDialog.vue
| | |──DesignerCustomDialog.vue
| | |──PreviewDialog.vue
| | |──DictSelector
| | | |──DictSelectorDialog.vue
| |──WidgetFormItem.vue
| |──FormConfig.vue
| |──WidgetDisplayItem.vue
|──assets
| |──images
| | |──form_design_empty.png
| | |──form_design_mobile.png
| | |──common_empty.png
| | |──form_design_components_list.png
| |──styles
| | |──renderer
| | | |──generate-display-item.scss
| | | |──index.scss
| | | |──generate-layout-report.scss
| | | |──generate-form-item.scss
| | | |──generate-layout-table.scss
| | | |──container.scss
| | | |──generate-layout-card.scss
| | | |──generate-layout-grid.scss
| | | |──generate-layout-collapse.scss
| | |──_var.scss
| | |──common
| | | |──editor.scss
| | | |──element-restyle.scss
| | | |──org-selector.scss
| | | |──upload-file.scss
| | |──theme
| | | |──element-variables.scss
| | | |──fonts
| | | | |──element-icons.woff
| | | | |──element-icons.ttf
| | |──designer
| | | |──widget-layout.scss
| | | |──index.scss
| | | |──widget-layout-reports.scss
| | | |──designer-preview.scss
| | | |──container.scss
| | | |──widget-layout-tables.scss
| | | |──widget-view.scss
| | | |──widget-vars.scss
| | | |──widget-layout-grid.scss
| | | |──widget-layout-card.scss
| | | |──widget-layout-collapse.scss
| | | |──designer-dialog.scss
| | | |──widget-display-item.scss
| | | |──widget-layout-tabs.scss
| | | |──widget-form.scss
| | | |──designer-center.scss
| | | |──widget-config.scss
| | | |──component-list.scss
| | |──_theme.scss
TODO 待完善README