From 2976130876609dfa895a7e6a310bf31c12c2307e Mon Sep 17 00:00:00 2001
From: LiuHao <liuhaoai545@gmail>
Date: 星期三, 19 四月 2023 21:04:42 +0800
Subject: [PATCH] add form build
---
src/components/BuildCode/render.vue | 62 ++++++++++++++++++++
src/types/vform3-builds.d.ts | 4 +
package.json | 1
src/components/BuildCode/index.vue | 66 ++++++++++++++++++++++
4 files changed, 133 insertions(+), 0 deletions(-)
diff --git a/package.json b/package.json
index 8f64123..03aa1bf 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
"@vueuse/core": "9.5.0",
"animate.css": "4.1.1",
"await-to-js": "^3.0.0",
+ "vform3-builds": "3.0.8",
"axios": "^1.3.4",
"echarts": "5.4.0",
"element-plus": "2.2.27",
diff --git a/src/components/BuildCode/index.vue b/src/components/BuildCode/index.vue
new file mode 100644
index 0000000..9315732
--- /dev/null
+++ b/src/components/BuildCode/index.vue
@@ -0,0 +1,66 @@
+<!-- 浠ｇ爜鏋勫缓 -->
+<script setup lang="ts">
+
+import { ComponentInternalInstance } from "vue";
+
+const props = defineProps({
+ showBtn: {
+ type: Boolean,
+ default: false
+ },
+ formJson: {
+ type: Object,
+ default: undefined
+ }
+})
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const buildRef = ref();
+const emits = defineEmits(['reJson', 'saveDesign']);
+
+
+
+//鑾峰彇琛ㄥ崟json
+const getJson = () => {
+ const formJson = JSON.stringify(buildRef.value.getFormJson())
+ const fieldJson = JSON.stringify(buildRef.value.getFieldWidgets())
+ let data = {
+ formJson, fieldJson
+ }
+ emits("saveDesign", data)
+}
+
+onMounted(() => {
+ if (props.formJson) {
+ buildRef.value.setFormJson(props.formJson)
+ }
+})
+</script>
+
+<template>
+ <div>
+ <v-form-designer
+ class="build"
+ ref="buildRef"
+ :designer-config="{ importJsonButton: true, exportJsonButton: true, exportCodeButton: true, generateSFCButton: true, formTemplates: true }"
+ >
+ <template #customToolButtons v-if="showBtn">
+ <el-button link type="primary" icon="Select" @click="getJson">淇濆瓨</el-button>
+ </template>
+ </v-form-designer>
+ </div>
+</template>
+
+<style lang="scss">
+.build {
+ margin: 0 !important;
+ overflow-y: auto !important;
+
+ & header.main-header {
+ display: none;
+ }
+
+ & .right-toolbar-con {
+ text-align: right !important;
+ }
+}
+</style>
diff --git a/src/components/BuildCode/render.vue b/src/components/BuildCode/render.vue
new file mode 100644
index 0000000..5693ed8
--- /dev/null
+++ b/src/components/BuildCode/render.vue
@@ -0,0 +1,62 @@
+<!-- 鍔ㄦ�佽〃鍗曟覆鏌� -->
+<script setup name="Render">
+
+const props = defineProps({
+ formJson: {
+ type: [String, Object],
+ default: {}
+ },
+ formData: {
+ type: [String, Object],
+ default: {}
+ },
+ isView: {
+ type: Boolean,
+ default: false
+ }
+})
+
+const vFormRef = ref(null)
+// 鑾峰彇琛ㄥ崟鏁版嵁-寮傛
+const getFormData = () => {
+ return vFormRef.value.getFormData()
+}
+
+/**
+ * 璁剧疆琛ㄥ崟鍐呭
+ * @param {琛ㄥ崟閰嶇疆} formConf
+ * formConfig锛歿 formTemplate锛氳〃鍗曟ā鏉匡紝formData锛氳〃鍗曟暟鎹紝hiddenField锛氶渶瑕侀殣钘忕殑瀛楁瀛楃涓查泦鍚堬紝disabledField锛氶渶瑕佺鐢ㄧ殑鑷瀛楃涓查泦鍚坿
+ */
+const initForm = (formConf) => {
+ const { formTemplate, formData, hiddenField, disabledField } = toRaw(formConf)
+ if (formTemplate) {
+ vFormRef.value.setFormJson(formTemplate)
+ if (formData) {
+ vFormRef.value.setFormData(formData)
+ }
+ if (disabledField && disabledField.length > 0) {
+ setTimeout(() => {
+ vFormRef.value.disableWidgets(disabledField)
+ }, 200)
+ }
+ if (hiddenField && hiddenField.length > 0) {
+ setTimeout(() => {
+ vFormRef.value.hideWidgets(hiddenField)
+ }, 200)
+ }
+ if (props.isView) {
+ console.log(props.isView)
+ setTimeout(() => {
+ vFormRef.value.disableForm()
+ }, 100)
+ }
+ }
+}
+defineExpose({ getFormData, initForm })
+</script>
+
+<template>
+ <div class="">
+ <v-form-render ref="vFormRef" :form-json="formJson" :form-data="formData" />
+ </div>
+</template>
diff --git a/src/types/vform3-builds.d.ts b/src/types/vform3-builds.d.ts
new file mode 100644
index 0000000..82573de
--- /dev/null
+++ b/src/types/vform3-builds.d.ts
@@ -0,0 +1,4 @@
+declare module 'vform3-builds' {
+ const content: any;
+ export = content;
+}
--
Gitblit v1.9.3