dynamic-forms-plug-in
v0.1.2
Published
动态表单组件组件封装
Downloads
4
Readme
动态表单
本项目实现通过配置的方式针对不同的功能开发不同的表单,后期维护无需修改代码。
项目运行和构建
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 可以避免首次展示提示校验的问题