add form build

LiuHao

2023-04-19 2976130876609dfa895a7e6a310bf31c12c2307e

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