欢迎使用 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 版本。

###第 1 步：安装 Vue CLI 你可以使用 Vue CLI 来创建项目、生成应用和库代码，以及执行各种持续开发任务，比如测试、打包和部署。

全局安装 Vue CLI。

要使用 npm 命令安装 CLI，请打开终端/控制台窗口，输入如下命令：

npm install vue-cli -g ###第 2 步：创建工作空间和初始应用 你要在 Vue 工作区的上下文中开发应用。

要创建一个新的工作空间和初始入门应用：

运行 CLI 命令 vue init webpack 并提供 my-project 名称作为参数，如下所示：

vue init webpack my-project

vue init 命令会提示你提供要把哪些特性包含在初始应用中。按 Enter 或 Return 键可以接受默认值。

Vue CLI 会安装必要的Vue npm 包和其他依赖包。这可能要花几分钟的时间。

CLI 会创建一个新的工作区和一个简单的欢迎应用，随时可以运行它。 ###第 3 步：运行应用 Vue CLI 中包含一个服务器，方便你在本地构建和提供应用。

转到 workspace 文件夹（my-project）。

使用 CLI 命令 npm run dev 启动应用。

cd my-project npm run dev npm run dev 命令会启动开发服务器、监视文件，并在这些文件发生更改时重建应用。

访问 http://localhost:8080

你的应用会跟你打招呼 ###第4步：安装相关包依赖 npm i vant axios vuex ###第5步：初始化配置 ####① 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业务下相关接口地址

####② src目录下创建store/index.js 作为Vuex配置，内容如下： import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); const state = { isValid: true }; const getters = { //实时监听state值的变化(最新状态) valid(state) { return state.isValid; } }; const mutations = { passValid(state) { state.isValid = false; }, noValid(state) { state.isValid = true; } }; const actions = { passValid(context) { context.commit("passValid"); }, noValid(context) { context.commit("noValid"); } }; const store = new Vuex.Store({ state, getters, mutations, actions }); export default store;

对Vuex的使用有疑问？请跳转https://vuex.vuejs.org/

####③ 在入口文件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,Vant); Vue.prototype.axios = axios; Vue.prototype.qs = Qs; new Vue({ el: "#app", router, store, //使用store components: { App }, template: "<App/>" });

###第6步：使用动态表单 安装动态表单 npm i zr-dynamic-form-vue

修改src/components/HelloWorld.vue 删除不必要的信息，添加动态表单内容，修改后内容如下：

<template>
 <div class="hello">
   <form-zr
     ref="formSubmit"
     :code="code"
     :editId="editId"
     :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 FormZr from 'zr-dynamic-form-vue';
Vue.use(FormZr);
import { mapGetters } from "vuex";
import { Toast } from "vant";
export default {
  computed: {
   ...mapGetters(["valid"])
 },
 name: 'HelloWorld',
 data () {
   return {
     editId:'',
     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>```

###参数详解
参数信息 | 描述 | 类型 | 用例
------------ | ------------- | ------------ | ------------
`code` | 表单实体编码  | string | cxrf
`url` | 保存表单数据的url  | string | http://xxx.xxx.com/api/insert
`realm` | 多选、单选请求的数据源接口地址  | string | http://xxx.xxx.com/api/data
`detail`| 查看表单请求的Api接口地址  | string | http://xxx.xxx.com/api/detail
`editId` | 编辑页面传入的targetId   | string | w23s-swww-121f-12kk-12kk-okok
`formSubmit` | 动态表单组件的引用  | Object|Object
`view` | 表单查看  | boolean|true or false



###方法
方法 | 描述 | 类型 | 用例
------------ | ------------- | ------------ | ------------
`submit`       | 提交表单数据  | Object|{xxx:{},yyy:{},zzz:{}}