add form build

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",

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>

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>

src/types/vform3-builds.d.ts

@@ -0,0 +1,4 @@
+declare module 'vform3-builds' {
+  const content: any;
+  export = content;
+}