plus-ui/src/components/BuildCode/index.vue

<!-- 代码构建 -->
<template>
  <div class="reset">
    <v-form-designer class="build" ref="buildRef" :designer-config="designerConfig">
      <template #customToolButtons v-if="showBtn">
        <el-button link type="primary" icon="Select" @click="getJson">保存</el-button>
      </template>
    </v-form-designer>
  </div>
</template>

<script setup lang="ts">

import { propTypes } from "@/utils/propTypes";

const props = defineProps({
  showBtn: propTypes.bool.def(false),
  formJson: propTypes.object.def({})
})

const designerConfig = reactive({
  languageMenu: true,
  toolbarMaxWidth: 450,
  // importJsonButton: false,
  // exportJsonButton: false,
  exportCodeButton: false,
  // generateSFCButton: false,
  formTemplates: true
})

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>

<style lang="scss">
.build {
  margin: 0 !important;
  overflow-y: auto !important;

  & header.main-header {
    display: none;
  }

  & .right-toolbar-con {
    text-align: right !important;
  }
}
.reset {

}
</style>