zr-dynamic-form-vue
npm i zr-dynamic-form-vue
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里添加相关配置信息，内容如下：
`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: "
});
`
> 如果本身项目没有引用vant，这里可以不配置vant。如果引用了，优先考虑局部引入。
$3
在main.js或者App.vue中添加如下代码
`js
import FormZr from "zr-dynamic-form-vue";
...
Vue.use(FormZr);
`
$3
修改src/components/HelloWorld.vue 删除不必要的信息，添加动态表单内容，修改后内容如下：
`vue
:code="code"
:targetId="targetId"
:url="url"
:realm="realm"
:detail="detail">
:disabled="valid"
native-type="button"
@click="submit"
size="large"
>提交 >
`
$3
- 在views文件夹下创建自定义组件,例如：Custom.vue
示例内容如下：
模板文件内容：
`html
:showLabel="showLabel"
:label="label"
:errorMsg="errorMsg"
>
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"
/>
`
layout为通用布局组件 属性值按照组件需要书写
`html
`
如何使用?
也可以在main.js或者App.vue,或者需要使用的组件中使用这种方式来注入组件
`js
import SelfTextBox from "./Custom"; // 引入自定义组件
import Vue from "vue";
Vue.component('SelfTextBox', SelfTextBox);
`
或者在vue组件钩子中调用原型上的方法添加自定义组件
`js
created() {
this.$FormZr.addComponent('SelfTextBox', SelfTextBox);
}
`
$3
参数
参数信息 | 描述 | 类型 | 默认值
------------ | ------------- | ------------ | ------------
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() | 触发默认级联
$3
#### 参数详解
参数信息 | 描述 | 类型 | 默认值
------------ | ------------- | ------------ | ------------
code | 表单编码 | string | ''
labelCode | 表单标签编码 | string | ''
targetId | 编辑页面传入的targetId | string | ''
isView | 表单查看 | boolean| false
#### 方法
方法 | 描述 | 类型 | 用例
------------ | ------------- | ------------ | ------------
submit | 提交表单数据 | Object|{xxx:{},yyy:{},zzz:{}}
Typescript支持
组件支持Typescript方式引用
$3
由于vue中ts和js定义组件方式不同，所以在使用自定义组件时需要先定义一个ts的组件基类
基类参考Control
可以直接使用项目包中的文件
然后可以使用ts方式自定义组件了
`ts
import { Control } from 'zr-dynamic-form-vue/types/form-model'
@Component({
components: {},
})
export default class CascadeAmountLimit extends Control {
}
`
> 如果有需要，请自行再封装一次Control即可
#### 支持泛型
控件的模型model数据支持泛型约束，类型需要集成自ControlViewModel
`ts
export default class CascadeAmountLimit extends Control {
}
export interface AmountLimitViewModel extends ControlViewModel {
limit: number;
}
`
#### 使用自定义组件
1. 在使用的组件中注入，如下示例
`ts
import CascadeAmountLimit from './cascade-amount-limit.component.vue'
@Component({
components: {}
})
export default class DynamicFormCustomInfo extends Vue {
created(){
this.addDynamicFormComponent('CascadeAmountLimit', CascadeAmountLimit);
}
}
`
2. 也可以在main.ts或者App.vue,或者需要使用的组件中使用这种方式来注入组件
`ts
import CascadeAmountLimit from './cascade-amount-limit.component.vue'
...
Vue.component('CascadeAmountLimit', CascadeAmountLimit);
`
#### 组件mounted钩子问题
自定义组件中如果需要有执行mounted等钩子请在组件中自行定义，基类中提供了mounted的默认实现但是运行时并不会执行，可以这样来写
`ts
export default class CascadeAmountLimit extends Control {
public mounted () {
super.mounted();
}
}
`
更新
$3
1. 支持控件隐藏时清空数据
2. 显隐规则模型数据字段从 showHiddenRule改为showHiddenRules
3. 修复正则表单式验证多个造成的冲突
4. 修正数字控件清空数据时值变成字符串造成数据库自动转化为0
5. ts类型声明完善，支持表单和控件，控件基类支持泛型
6. 更新说明文档，更易于使用
7. 修正车型和地区控件清空数据不生效
8. 移除控件和表单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` 正常应该表示有效，之前版本这个取值是反的，这个版本进行了修正，请有使用到自定义组件的地方进行及时改正