Form3-generate NPM

1 项目介绍主要是 2 VForm组件在项目中的使用 3 VForm组件的二次开发

Project setup

npm install

Compiles and hot-reloads for development

npm run dev

1 使用VFormRender组件

1.1 启动该项目

    npm install 
    npm run dev

1.2 渲染器VFormRender打包

npm run lib-render完成打包 内含v-form-render组件。
输出的库文件: render.umd.js、render.style.css。

1.3 在需要使用的该组件的项目的根目录中新建lib\vform，将上述两个文件复制到vform目录

1.4 修改 main.ts/main.js文件引入VFormRender组件:

    import * as  VForm3Render from '@/../libs/render.umd.js';   //引入VFormRender组件
    import '@/../libs/render.style.css';                        //引入VFormRender样式
    app.use(VForm3Render)                                       //全局注册v-form-render等组件

1.5 如果使用Vite作为构建工具，则需要配置vite.config.js中的optimizeDeps和build属性，如下所示：

export default defineConfig({
    optimizeDeps: {
    //此处路径必须跟main.js中import路径完全一致！
    include: ['@/../libs/render.umd.js'],
  },
  build: {
    commonjsOptions: {
      include: /node_modules|libs/,
    },
  },
})

1.6 在项目中使用VFormRender组件

<template>
  <div>
    <v-form-render :form-json="formJson" :form-data="formData" :option-data="optionData" ref="vFormRef">
    </v-form-render>
    <el-button type="primary" @click="submitForm">Submit</el-button>
  </div>
</template>

// vue2

<script>
/* 注意：testFormJson是指表单设计器导出的json */
export testFormJson from './testForm.json';
export default {
    data() {
        return {
            formJson: testFormJson // 导入的表单json对象
            formData: {}, // 表单数据对象
            optionData: {}; // 选择项
        };
    }
    methods: {
        onSubmitFormData() {
            this.$refs.vFormRef.getFormData().then(formData => {
                // Form Validation OK
                alert( JSON.stringify(formData))
            }).catch(error => {
                // Form Validation failed
                this.$message.error(error)
            })
        }
    }
}
</script>

// vue3

<script lang="ts" setup>
/* 注意：testFormJson是指表单设计器导出的json */
export testFormJson from './testForm.json';
const formJson = reactive(testFormJson)
const formData = reactive({})
const optionData = reactive({})
const vFormRef = ref(null)
</script>

2 保存表单对象

实现思路：

2.1 新增一个保存表单的按钮增加 onSaveFormData的方法，通过调用表单对象的getFormData方法获取表单数据

2.2 点击保存按钮调用该方法将表单数据进行保存(提交给后台)

完整代码如下所示：

<template>
    <v-form-render
        ref="vFormRef"
        :form-json="formJson"
        :form-data="formData"
        :option-data="optionData"
    />
    <el-button type="primary" @click="onSubmitFormData">提交表单</el-button>
</template>

// vue2

<script>
export testFormJson from './testForm.json';
export default {
    data() {
        return {
            formJson: testFormJson // 导入的表单json对象
            formData: {}, // 表单数据对象
            optionData: {}; // 选择项
        };
    }
    methods: {
        onSubmitFormData() {
            this.$refs.vFormRef.getFormData().then(formData => {
                // Form Validation OK
                alert( JSON.stringify(formData))
            }).catch(error => {
                // Form Validation failed
                this.$message.error(error)
            })
        }
    }
}
</script>

// vue3：

<script lang="ts" setup>
const formJson = reactive(testFormJson);
const formData = ref();
const optionData = reactive({});
const vFormRef = ref(null);
const onSubmitFormData = () => {
  vFormRef.value.getFormData().then((formData: any) => {
    // Form Validation OK
    console.log(JSON.stringify(formData));
  })
    .catch((error: any) => {
    // Form Validation failed
      console.log(error, 'hshshsh');
    });
};
</script>

3 表单的渲染

当表单需要显示后端已保存的数据对象时，从后端接口获取后赋值给v-form-render的form-data属性，需要在mounted函数中完成；如只需显示空白表单，则form-data属性可传入空对象{}。

代码如下所示：

vue2:

<script>
export default {
    data() {
        return {
            formJson: testFormJson, // 导入的表单json对象
            formData: {}, // 表单数据对象
            optionData: {}; // 选择项
        };
    }
    // 表单数据初次渲染
    mounted() {
        // testFormData: 后端获取到的表单数据 进行一些处理后可渲染到表单上  例如处理后如下所示 
        // 注意 对象中的属性名与导入的json对象中的 name属性进行对应 方可渲染
        const testFormData = {
            keyword: 'jdjdjjd', 
        }; 
        
        this.$refs.vFormRef.setFormData(testFormData);
    },

    // 表单数据提交
    methods: {
        onSubmitFormData() {
            this.$refs.vFormRef.getFormData().then(formData => {
                // Form Validation OK
                alert( JSON.stringify(formData))
            }).catch(error => {
                // Form Validation failed
                this.$message.error(error)
            })
        }
    }
}
</script>

vue3：

<script lang="ts" setup>
const formJson = reactive(testFormJson);
const formData = ref();
const optionData = reactive({});
const vFormRef = ref(null);

// 表单数据初次渲染
onMounted(async () => {
    // testFormData: 后端获取到的表单数据 进行一些处理后可渲染到表单上  例如处理后如下所示 
    // 注意 对象中的属性名与导入的json对象中的 name属性进行对应 方可渲染
  const testFormData = {
    keyword: 'jdjdjjd',
  };
  vFormRef.value.setFormData(testFormData);
});

// 表单数据提交
const onSubmitFormData = () => {
  vFormRef.value.getFormData().then((formData: any) => {
    // Form Validation OK
    console.log(JSON.stringify(formData));
  })
    .catch((error: any) => {
    // Form Validation failed
      console.log(error, 'hshshsh');
    });
};
</script>

4 二次开发指南

组件案例在 src/extension中例如 alert 字段组件的开发

4.1 定义容器的 JSON Schema 具体代码见src/extension/sample/extension-schema.js

JSON Schema的解释说明

type: 字段组件的类型名称必须唯一不可以和现在已有的组件重复。

icon：容器图标名称，可以去iconfont.cn下载所需的svg文件，放入src/icons/svg目录即可（自动加载）可为空。

formItemFlag：是否嵌套于el-form-item组件内，因el-alert并不需要显示字段标签，故此处设置为false。

options：组件属性对象，每一个属性值对应一个属性编辑器-在页面左侧被加载。

4.2 编写字段组件的SFC文件，字段组件在设计期和运行期共用，故只需要编写一个SFC文件。注意，命名规则需严格遵守：组件名称-widget

alert-widget.vue 具体代码见src/extension/sample/alert/alert-widget.vue。

由于formItemFlag设置为false，故此处必须使用static-content-wrapper包裹组件（如formItemFlag设置为true，则应使用form-item-wrapper包裹组件），5~8行代码对应options属性值的动态绑定，handelCloseCustomEvent方法处理了自定义事件onClose交互逻辑。

4.3 加载options对应的属性编辑器，对应表单设计器右侧的SettingPanel面板，具体代码参见extension-loader.js

在alert的属性编辑器代码中共加载了9个属性编辑器，其中包含onClose事件编辑器，其他属性使用预先加载的默认属性编辑器。

以上使用到的字符串资源分别位于src\lang\zh-CN_extension.js、src\lang\en-US_extension.js两个文件中。

4.4 字段组件开发完毕，扩展组件的加载由extension-loader.js的loadExtension()方法执行，该方法在main.js中被调用

@everything-registry/sub-chunk-1694

3.1.1

1 year ago

3.1.0