Zr-dynamic-form-vue NPM

欢迎使用 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说明

参数参数信息 | 描述 | 类型 | 默认值 ------------ | ------------- | ------------ | ------------

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属性