zr-dynamic-form-vue
v1.3.6-rc.4
Published
zr-dynamic-form-vue
Downloads
148
Readme
欢迎使用 Vue版 动态表单
此为表单运行时使用说明
Vue版动态表单是基于Vue-cli Vant打造的表单运行时的组件,组件集成了DataTime、Digital、DropDown、Email、FileUpload、MultiCheckBox、MultiTextBox、Radio、Switch、TextInput、SelectTree等诸多组件
环境搭建
前提条件
Node.js 8.9 或更高版本。
要检查你的版本,请在终端/控制台窗口中运行 node -v 。
要获取 Node.js,请转到 nodejs.org。
你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。
使用动态表单
安装动态表单
npm i zr-dynamic-form-vue
添加配置项
初始化配置 src目录下创建config/index.js 作为应用全局初始化配置,内容如下:
export default {
install(Vue) {
Vue.prototype.baseUrl = "http://dynamicform-service-fat.m.lunztech.cn/api/v1/dynamicform/formdatas/published/content?formCode=";
Vue.prototype.api = "http://dynamicform-service-fat.m.lunztech.cn/api/v1/";
}};
baseUrl、api可根据实际业务场景自行配置,也可进行配置的新增,此处为VPS业务下相关接口地址
在入口文件main.js里添加相关配置信息,内容如下:
import axios from 'axios'
import Qs from 'qs'
// import Vant from 'vant'; // 改为了局部引入
// import 'vant/lib/index.css'; // 改为了局部引入
import config from "./config/index";
import store from './store'//引入store
Vue.use(config);
Vue.prototype.axios = axios;
Vue.prototype.qs = Qs;
new Vue({
el: "#app",
router,
store, //使用store
components: { App },
template: "<App/>"
});
如果本身项目没有引用vant,这里可以不配置vant。如果引用了,优先考虑局部引入。
配置表单
在main.js或者App.vue中添加如下代码
import FormZr from "zr-dynamic-form-vue";
...
Vue.use(FormZr);
示例表单
修改src/components/HelloWorld.vue 删除不必要的信息,添加动态表单内容,修改后内容如下:
<template>
<div class="hello">
<form-zr
ref="formSubmit"
:code="code"
:targetId="targetId"
:url="url"
:realm="realm"
:detail="detail"></form-zr>
<slot name="buttons">
<van-button
type="info"
:disabled="valid"
native-type="button"
@click="submit"
size="large"
>提交</van-button
>
</slot>
</div>
</template>
<script>
import Vue from 'vue';
import { mapGetters } from "vuex";
import { Toast } from "vant";
export default {
computed: {
...mapGetters(["valid"])
},
name: 'HelloWorld',
data () {
return {
targetId:'',
title: "新建VPS",
showPicker: false,
endTimePop: false,
currentDate: new Date(),
columns: ["门店1", "门店2", "门店3", "门店4", "门店5"],
userForm: {
userId: "",
districtCode: "",
shopName: "",
linkMan: "",
linkPhone: "",
vin: "",
installTime: "",
installAdd: "",
num: "",
creditPeriod: ""
}, // 业务表单数据
code: "csyxs", // csyxs
url:
this.api + "dynamicform/formdatas", // 保存数据的url
realm: this.api, // 多选单选请求数据源
detail: this.api + "dynamicform/formdatas/detail?formCode="
}
},
methods: {
submit() {
// 编辑时
if (this.$route.query.id) {
this.axios
.put(
this.api +
"order/vpsInstall",
this.userForm
)
.then(res => {
if (res.status === 200) {
Toast.success("业务表单数据编辑成功");
setTimeout(() => {
this.$refs.formSubmit.submit(res.data.id, "edit");
this.onBack();
}, 800);
}
});
} else {
// 业务表单数据保存
this.axios
.post(
this.api +
"order/vpsInstall",
this.userForm
)
.then(res => {
if (res.status === 200) {
Toast.success("业务表单数据保存成功");
setTimeout(() => {
this.$refs.formSubmit.submit(res.data.id, "add");
this.onBack();
}, 800);
}
});
}
},
}
}
</script>
如何创建使用自定义组件
- 在views文件夹下创建自定义组件,例如:Custom.vue 示例内容如下: 模板文件内容:
<template>
<div>
<lay-out
:isRequired="isRequired"
:showLabel="showLabel"
:label="label"
:errorMsg="errorMsg"
>
<input
type="text"
:placeholder="placeholder"
:minlength="min"
:maxlength="max"
v-model="val"
:readonly="model.readonly"
:disabled="isView"
@input="onInputEvent(val, valid, name)"
class="van-field__control"
/>
</lay-out>
</div>
</template>
layout为通用布局组件 属性值按照组件需要书写
<script>
import formMixins from "zr-dynamic-form-vue/dist/mixins/form-model.js";
export default {
name: "SelfTextBox",
props: ["placeholder", "label"],
mixins: [formMixins],
data() {
return {
max: "",
min: ""
};
},
methods: {
setData(val) {
this.valid = false;
this.val = val;
},
onInputEvent(val, valid, name) {
this.updateFormData(val);
}
}
};
</script>
如何使用?
也可以在main.js或者App.vue,或者需要使用的组件中使用这种方式来注入组件
import SelfTextBox from "./Custom"; // 引入自定义组件
import Vue from "vue";
Vue.component('SelfTextBox', SelfTextBox);
或者在vue组件钩子中调用原型上的方法添加自定义组件
created() {
this.$FormZr.addComponent('SelfTextBox', SelfTextBox);
}
控件组件mixin API说明
参数 参数信息 | 描述 | 类型 | 默认值 ------------ | ------------- | ------------ | ------------
associatedEntities
| 关联实体code | string |
model
| 结构模型 | Object |
name
| 关联实体属性(多属性时这个字段没有用) | string
valid
| 通过为true,不通过为false | boolean | true
checkValidate
| 验证条件(veeValidator) | string |
cascadeValueChange
| 级联值变化事件 | Subject<{ name: string; val: any; model: any }> |
valueChanged
| 控件值变化事件(多属性时这个字段没有用) | Subject<{ name: string; val: any; model: any }>
controlBroadCast
| 控件广播 | Subject<{ name: string; val: any; valid: boolean }> |
methods
方法名 | 描述
------------ | -------------
setData(val)
| 设置组件数据onInputEvent(value, name)
| 输入时触发的方法,会更新控件的val值,广播控件值
check()
| 验证控件状态(使用veeValidator)
setCascadeValue(controlValue)
| 设置级联值
updateFormData(val)
| 更新表单值
setCascade()
| 设置级联关系
onCascadeParentValueChange(cascadeValues)
| 级联父级值发生变化
broadControlValueChange()
| 广播控件值变化
handleDefaultValue()
| 处理默认值
onDefaultCascadeValueChange()
| 触发默认级联
表单组件API说明
参数详解
参数信息 | 描述 | 类型 | 默认值
------------ | ------------- | ------------ | ------------
code
| 表单编码 | string | ''
labelCode
| 表单标签编码 | string | ''
targetId
| 编辑页面传入的targetId | string | ''
isView
| 表单查看 | boolean| false
方法
方法 | 描述 | 类型 | 用例
------------ | ------------- | ------------ | ------------
submit
| 提交表单数据 | Object|{xxx:{},yyy:{},zzz:{}}
Typescript支持
组件支持Typescript方式引用
自定义组件说明
由于vue中ts和js定义组件方式不同,所以在使用自定义组件时需要先定义一个ts的组件基类 基类参考Control
可以直接使用项目包中的文件 然后可以使用ts方式自定义组件了
import { Control } from 'zr-dynamic-form-vue/types/form-model'
@Component({
components: {},
})
export default class CascadeAmountLimit extends Control {
}
如果有需要,请自行再封装一次Control即可
支持泛型
控件的模型model数据支持泛型约束,类型需要集成自ControlViewModel
export default class CascadeAmountLimit extends Control<AmountLimitControlViewModel> {
}
export interface AmountLimitViewModel extends ControlViewModel {
limit: number;
}
使用自定义组件
- 在使用的组件中注入,如下示例
import CascadeAmountLimit from './cascade-amount-limit.component.vue'
@Component({
components: {}
})
export default class DynamicFormCustomInfo extends Vue {
created(){
this.addDynamicFormComponent('CascadeAmountLimit', CascadeAmountLimit);
}
}
- 也可以在main.ts或者App.vue,或者需要使用的组件中使用这种方式来注入组件
import CascadeAmountLimit from './cascade-amount-limit.component.vue'
...
Vue.component('CascadeAmountLimit', CascadeAmountLimit);
组件mounted钩子问题
自定义组件中如果需要有执行mounted等钩子请在组件中自行定义,基类中提供了mounted的默认实现但是运行时并不会执行,可以这样来写
export default class CascadeAmountLimit extends Control {
public mounted () {
super.mounted();
}
}
更新
V1.3.5-beta.7
- 支持控件隐藏时清空数据
- 显隐规则模型数据字段从 showHiddenRule改为showHiddenRules
- 修复正则表单式验证多个造成的冲突
- 修正数字控件清空数据时值变成字符串造成数据库自动转化为0
- ts类型声明完善,支持表单和控件,控件基类支持泛型
- 更新说明文档,更易于使用
- 修正车型和地区控件清空数据不生效
- 移除控件和表单mixin不必要的props
1.3.5更新
控件值变化事件
控件值变化事件变更为broadControlValueChange
valueChanged
控件值变化
cascadeValueChange
级联值变化
controlBroadCast
广播事件
broadControlValueChange
可以触发这三个事件
默认赋值方式
修改控件setData
方法签名,修改为setData(val)
;移除第一个model
参数,因为在组件的props
已经有组件的model
属性
vant 版本问题
请使用2.12.x
大版本,针对vant部分组件的input事件做了针对性处理,将忽略通过setData设置双向绑定的val后触发的input事件,
editId修改为targetId
为了能和业务术语更贴近,表单的editId字段被修正为targetId,请及时更新项目中的相关引用
组件内部valid取值问题
组件内部表示组件是否可用的字段valid
valid = true
正常应该表示有效,之前版本这个取值是反的,这个版本进行了修正,请有使用到自定义组件的地方进行及时改正