动态表单

本项目实现通过配置的方式针对不同的功能开发不同的表单，后期维护无需修改代码。

项目运行和构建

npm run serve

npm run build

软件架构

1. UmyUi 大数据表格
2. vue2
3. element-ui
4. vue-router
5. vuex
6. scss

界面布局

插件安装教程

1. 安装: npm install dynamic-forms-plug-in
2. 卸载： npm uninstall dynamic-forms-plug-in
3. 直接升级: npm update dynamic-forms-plug-in

插件使用说明

1. main.js里引入

   import myEdge from 'dynamic-forms-plug-in';//动态表单插件 import "dynamic-forms-plug-in/dist/dynamic-forms-plug-in.css"; //动态表单插件 Vue.use(myEdge);//动态表单插件

2. vue.config.js中配置需要转译的依赖包 module.exports = { transpileDependencies: [ 'dynamic-forms-plug-in' ],

    ...}

description

1. 打包: npm run lib
2. 登录: npm login account:wh... password:my... email:lov...
3. 发包： npm publish

参与贡献

1. Fork 本仓库
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request

特技

1. 使用 Readme_XXX.md 来支持不同的语言，例如 Readme_en.md, Readme_zh.md
2. Gitee 官方博客 blog.gitee.com
3. 你可以 https://gitee.com/explore 这个地址来了解 Gitee 上的优秀开源项目
4. GVP 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5. Gitee 官方提供的使用手册 https://gitee.com/help
6. Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 https://gitee.com/gitee-stars/

组件引用

组操作 （作为单页面使用）

<addgroup @getSubFiled="getSubFiled" :columnTypeOptions="columnTypeOptions">

1. columnTypeOptions:参数类型列表
2. getSubFiled: 提交方法，参数为处理后的信息

新增
var url = ""; this.$router.push({ path: url, query: { } }); 编辑 var url = ""; this.$router.push({ path: url, query: { formGroup:"编辑信息",isEdit:true } });

表单操作 （作为单页面使用）

<addform @getSubFiled="getSubFiled" :columnTypeOptions="columnTypeOptions">

1. columnTypeOptions:参数类型列表
2. getSubFiled: 提交方法，参数为处理后的信息

新增
var url = ""; this.$router.push({ path: url, query: { } }); 编辑 var url = ""; this.$router.push({ path: url, query: { formDatas: "编辑信息",isEdit:true } });

组列表（表格形式）

<groupTable :mainList="mainList" :hasOperation="true":firstTotal="firstTotal" :headerList="headerList" @edit="edit" @handleCurrentChange="handleCurrentChange" @handleSelectionChange="handleSelectionChange">

1. mainList:表格数据(需要和表头对应) versionList格式：[{id:"",version:""}]
2. hasOperation：是否展示操作栏
3. firstTotal:数据总条数
4. headerList:表头数据 例子:[ { key: "entityName", comment: "实体名称" }, { key: "groupName", comment: "分组名称" }, { key: "versionList", comment: "历史版本" }, ]
5. edit 编辑方法 可用于跳转 上方 组操作(row：所选行数据)
6. handleCurrentChange 换页
7. handleSelectionChange 多选

表单列表（表格形式，内置分配功能）

<formTable ref="formindexcomp" :mainList="mainList" :hasOperation="true" :firstTotal="firstTotal" :headerList="headerList" :dialogFormVisible="dialogFormVisible" :moduleOptions="moduleOptions" @allocation="allocation" @edit="edit" @getElementFormData="getElementFormData" @subBtnForms="subBtnForms" @diaClose="diaClose" @handleCurrentChange="handleCurrentChange" @handleSelectionChange="handleSelectionChange">

1. mainList:表格数据(需要和表头对应) versionList格式：[{id:"",version:""}]
2. hasOperation：是否展示操作栏
3. firstTotal:数据总条数
4. headerList:表头数据 例子:[ { key: "formName", comment: "表单名称" }, { key: "name", comment: "名称" }, { key: "versionList", comment: "历史版本" }, ]
5. dialogFormVisible 分配弹窗是否开启
6. moduleOptions 分配弹窗所属页面下拉数据
7. allocation：分配按钮点击事件(row：所选行数据)
8. edit 编辑方法 可用于跳转 上方 表单操作(row：所选行数据)
9. getElementFormData 切换 表单所在页面的按钮弹窗
10. subBtnForms 分配提交 (data,所选表单的内容)
11. diaClose 分配弹窗关闭事件
12. handleCurrentChange 换页
13. handleSelectionChange多选

this.$refs.formindexcomp.handleTreecheckData();用于分配弹窗树形结构的默认选中 this.$refs.formindexcomp.handleAllocationData(); 调用 上方 allocation 方法后 需要 转换为树形结构的参数

表单展示组件 用于配置后，页面按钮展示的表单内容

1. formDataList: 需要转换为表单的数据

this.$refs.basicForm.$refs.formFiles.validate((valid) => { if(valid){

}else{

}
})

//提交之前 调用这个代码块可以获取填写内容是否通过配置的校验

this.$refs.basicForm.subFormData() 获取表单填写的内容

添加 v-if 可以避免首次展示提示校验的问题