dynamic-forms-plug-in v0.1.2
动态表单
本项目实现通过配置的方式针对不同的功能开发不同的表单，后期维护无需修改代码。
项目运行和构建
npm run serve
npm run build软件架构
1. UmyUi 大数据表格
2. vue2
3. element-ui
4. vue-router
5. vuex
6. scss界面布局
插件安装教程
- 安装: npm install dynamic-forms-plug-in
- 卸载： npm uninstall dynamic-forms-plug-in
- 直接升级: npm update dynamic-forms-plug-in
插件使用说明
main.js里引入
import myEdge from 'dynamic-forms-plug-in';//动态表单插件 import "dynamic-forms-plug-in/dist/dynamic-forms-plug-in.css"; //动态表单插件 Vue.use(myEdge);//动态表单插件
vue.config.js中配置需要转译的依赖包 module.exports = { transpileDependencies: 'dynamic-forms-plug-in' ,
...}
description
- 打包: npm run lib
- 登录: npm login account:wh... password:my... email:lov...
- 发包： npm publish
参与贡献
- Fork 本仓库
- 新建 Feat_xxx 分支
- 提交代码
- 新建 Pull Request
特技
- 使用 Readme_XXX.md 来支持不同的语言，例如 Readme_en.md, Readme_zh.md
- Gitee 官方博客 blog.gitee.com
- 你可以 https://gitee.com/explore 这个地址来了解 Gitee 上的优秀开源项目
- GVP 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
- Gitee 官方提供的使用手册 https://gitee.com/help
- Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 https://gitee.com/gitee-stars/
组件引用
组操作 （作为单页面使用）
<addgroup @getSubFiled="getSubFiled" :columnTypeOptions="columnTypeOptions">
- columnTypeOptions:参数类型列表
- 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">
- columnTypeOptions:参数类型列表
- 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">
- mainList:表格数据(需要和表头对应) versionList格式：{id:"",version:""}
- hasOperation：是否展示操作栏
- firstTotal:数据总条数
- headerList:表头数据 例子: { key: "entityName", comment: "实体名称" }, { key: "groupName", comment: "分组名称" }, { key: "versionList", comment: "历史版本" },
- edit 编辑方法 可用于跳转 上方 组操作(row：所选行数据)
- handleCurrentChange 换页
- 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">
- mainList:表格数据(需要和表头对应) versionList格式：{id:"",version:""}
- hasOperation：是否展示操作栏
- firstTotal:数据总条数
- headerList:表头数据 例子: { key: "formName", comment: "表单名称" }, { key: "name", comment: "名称" }, { key: "versionList", comment: "历史版本" },
- dialogFormVisible 分配弹窗是否开启
- moduleOptions 分配弹窗所属页面下拉数据
- allocation：分配按钮点击事件(row：所选行数据)
- edit 编辑方法 可用于跳转 上方 表单操作(row：所选行数据)
- getElementFormData 切换 表单所在页面的按钮弹窗
- subBtnForms 分配提交 (data,所选表单的内容)
- diaClose 分配弹窗关闭事件
- handleCurrentChange 换页
- handleSelectionChange多选this.$refs.formindexcomp.handleTreecheckData();用于分配弹窗树形结构的默认选中 this.$refs.formindexcomp.handleAllocationData(); 调用 上方 allocation 方法后 需要 转换为树形结构的参数
表单展示组件 用于配置后，页面按钮展示的表单内容
- formDataList: 需要转换为表单的数据
this.$refs.basicForm.$refs.formFiles.validate((valid) => { if(valid){
}else{
}
})//提交之前 调用这个代码块可以获取填写内容是否通过配置的校验
this.$refs.basicForm.subFormData() 获取表单填写的内容
添加 v-if 可以避免首次展示提示校验的问题