npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

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;
}

使用自定义组件

  1. 在使用的组件中注入,如下示例
import CascadeAmountLimit from './cascade-amount-limit.component.vue'
@Component({
 components: {}
 })
export default class DynamicFormCustomInfo extends Vue {
  created(){
   this.addDynamicFormComponent('CascadeAmountLimit', CascadeAmountLimit);
  }
}
  1. 也可以在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

  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 正常应该表示有效,之前版本这个取值是反的,这个版本进行了修正,请有使用到自定义组件的地方进行及时改正