集成的表单设计的js改为setup语法糖，保持代码一致

package.json

@@ -4,7 +4,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "serve": "vite preview",
+    "serve": "vite preview --open",
     "tsc": "vue-tsc --noEmit"
   },
   "dependencies": {

src/App.vue

@@ -15,6 +15,7 @@ export default {
 </script>
 
 <template>
+  <!-- el-config-provider 设置系统语言 -->
   <el-config-provider :locale="locale">
     <router-view></router-view>
   </el-config-provider>
@@ -28,6 +29,7 @@ export default {
 /* 1px边框适配 */
 .border-top-1px {
   position: relative;
+
   &::after {
     content: "";
     position: absolute;
@@ -38,8 +40,10 @@ export default {
     transform: scaleY(0.5);
   }
 }
+
 .border-bottom-1px {
   position: relative;
+
   &::after {
     content: "";
     position: absolute;
@@ -50,8 +54,10 @@ export default {
     transform: scaleY(0.4);
   }
 }
+
 .border-left-1px {
   position: relative;
+
   &::after {
     content: "";
     position: absolute;
@@ -71,6 +77,7 @@ export default {
   align-items: center;
   justify-content: space-between;
 }
+
 /* 垂直居中对齐 */
 .flex-center-h {
   display: flex;
@@ -90,16 +97,20 @@ export default {
   flex-flow: wrap;
   align-content: space-between;
 }
+
 /* flex布局end */
 .font12 {
   font-size: 12px;
 }
+
 .font14 {
   font-size: 14px;
 }
+
 .font16 {
   font-size: 16px;
 }
+
 /* 超出省略... */
 .over1 {
   overflow: hidden;
@@ -141,5 +152,6 @@ export default {
   -moz-line-clamp: 3 !important;
   -moz-box-orient: vertical;
 }
+
 /* 超出省略...end */
 </style>

src/main.ts

@@ -22,8 +22,6 @@ import { permission } from './directives/permission'
 import SocketService from '@/socket/main'
 // SocketService.Instance.connect();
 
-import DesignForm from "../src/vueFormCreate";
-
 // 国际化
 import i18n from "@/lang/index";
 
@@ -79,7 +77,6 @@ Object.keys(ElIconModules).forEach((key) => {
 app.use(store, key)
 app.use(router);
 app.use(ElementPlus)
-app.use(DesignForm);
 app.use(i18n);
 app.mount('#app');
 //注册

src/views/manage/formConfiguration.vue

@@ -31,7 +31,7 @@
         </div>
         <!-- 详情页面 -->
         <el-drawer v-model="visible" :title="title" size="80%" @close="handleClose">
-            <ElDesignForm ref="jsonRef" />
+            <ElDesignForm ref="designFormRef" />
             <template #footer>
                 <span>
                     <el-button @click="handleClose">关闭</el-button>
@@ -64,6 +64,7 @@
 <script setup lang="ts">
 import { ref, nextTick } from 'vue'
 import { ElMessage, ElMessageBox } from "element-plus";
+import { ElDesignForm, ElGenerateForm } from "../../vueFormCreate";
 import { getStructureList, saveStructure, getStructureData, deleteStructure, deleteStructureData } from '@/services/api/systemApi/formConfiguration/formConfiguration'
 
 const visible = ref(false)
@@ -72,7 +73,7 @@ const loading = ref(true)
 const loadingDialog = ref(true)
 const searchValue = ref('')
 const tableList = ref()
-const jsonRef = ref()
+const designFormRef = ref()
 const title = ref('详情')
 const structureId = ref()
 const dataList = ref()
@@ -117,22 +118,23 @@ const handleScreen = () => init(searchValue.value, tablePage.value.pageNo, table
 const handleAdd = () => {
     title.value = '添加'
     visible.value = true
-    nextTick(() => jsonRef.value.clear())
+    nextTick(() => designFormRef.value.clear())
 }
 
 const handleDetails = (row: any) => {
     title.value = '详情'
     visible.value = true
-    nextTick(() => jsonRef.value.detailJson(row.formJson))
+    nextTick(() => designFormRef.value.detailJson(row.formJson))
 }
 
 const handleEdit = (row: any) => {
     title.value = '编辑'
     structureId.value = row.id
     visible.value = true
-    nextTick(() => jsonRef.value.detailJson(row.formJson))
+    nextTick(() => designFormRef.value.detailJson(row.formJson))
 }
 
+
 const handleQuery = (row: any) => {
     formId.value = row.formId
     dbTableName.value = row.dbTableName
@@ -171,11 +173,11 @@ const deleteData = (id: any) => {
 }
 
 const onConfirm = () => {
-    const json = jsonRef.value.state.widgetForm
+    const json = designFormRef.value.state.widgetForm
     if (title.value === '添加') {
         saveStructure(json).then((res: any) => {
             if (res.code === 200) {
-                jsonRef.value.handleClearable()
+                designFormRef.value.handleClearable()
                 init(searchValue.value, tablePage.value.pageNo, tablePage.value.pageSize)
                 visible.value = false
                 ElMessage({ type: 'success', message: '添加成功' })
@@ -184,7 +186,7 @@ const onConfirm = () => {
     } else {
         saveStructure(json, structureId.value).then((res: any) => {
             if (res.code === 200) {
-                jsonRef.value.handleClearable()
+                designFormRef.value.handleClearable()
                 init(searchValue.value, tablePage.value.pageNo, tablePage.value.pageSize)
                 visible.value = false
                 ElMessage({ type: 'success', message: '编辑成功' })
@@ -195,7 +197,7 @@ const onConfirm = () => {
 }
 
 const handleClose = () => {
-    jsonRef.value.handleClearable()
+    designFormRef.value.handleClearable()
     visible.value = false
 }
 

src/vueFormCreate/components/CodeEditor.vue

@@ -2,8 +2,8 @@
   <div ref="aceRef" style="width: 100%; height:  350px;"></div>
 </template>
 
-<script lang="ts">
-import { defineComponent, onMounted, reactive, toRefs, watch } from 'vue'
+<script lang="ts" setup>
+import { onMounted, watch, ref } from 'vue'
 // Ace 是一个用 JavaScript 编写的代码编辑器 仅生成文件
 import ace, { Ace } from 'ace-builds'
 
@@ -11,68 +11,58 @@ interface State {
   aceRef?: HTMLElement
   codeEditor?: Ace.Editor
 }
+const aceRef: any = ref<State>()
+const codeEditor: any = ref<State>()
 
-export default defineComponent({
-  name: 'CodeEditor',
-  props: {
-    value: {
-      type: String,
-      default: ''
-    },
-    language: {
-      type: String,
-      default: 'javascript'
-    },
-    theme: {
-      tyle: String,
-      default: 'github'
-    },
-    readonly: {
-      type: Boolean,
-      default: false
-    }
+const props = defineProps({
+  value: {
+    type: String,
+    default: ''
+  },
+  language: {
+    type: String,
+    default: 'javascript'
+  },
+  theme: {
+    tyle: String,
+    default: 'github'
   },
-  emits: ['update:value'],
-  setup(props, context) {
-    const state = reactive<State>({
-      aceRef: undefined,
-      codeEditor: undefined
-    })
+  readonly: {
+    type: Boolean,
+    default: false
+  }
+})
 
-    onMounted(() => {
-      state.codeEditor = ace.edit(state.aceRef!, {
-        mode: `ace/mode/${props.language}`,
-        theme: `ace/theme/${props.theme}`,
-        value: props.value,
-        readOnly: props.readonly,
-        fontSize: 12,
-        tabSize: 2
-      })
+const emits = defineEmits(['update:value'])
 
-      state.codeEditor.on('change', () =>
-        context.emit('update:value', state.codeEditor?.getValue())
-      )
-    })
+onMounted(() => {
+  codeEditor.value = ace.edit(aceRef.value!, {
+    mode: `ace/mode/${props.language}`,
+    theme: `ace/theme/${props.theme}`,
+    value: props.value,
+    readOnly: props.readonly,
+    fontSize: 12,
+    tabSize: 2
+  })
 
-    watch(
-      () => props.value,
-      val => {
-        if (state.codeEditor) {
-          const currentPosition = state.codeEditor?.selection.getCursor()
-          state.codeEditor.setValue(val)
-          state.codeEditor.clearSelection()
-          state.codeEditor.gotoLine(
-            currentPosition.row + 1,
-            currentPosition.column,
-            true
-          )
-        }
-      }
-    )
+  codeEditor.value.on('change', () =>
+    emits('update:value', codeEditor.value?.getValue())
+  )
+})
 
-    return {
-      ...toRefs(state)
+watch(
+  () => props.value,
+  val => {
+    if (codeEditor.value) {
+      const currentPosition = codeEditor.value?.selection.getCursor()
+      codeEditor.value.setValue(val)
+      codeEditor.value.clearSelection()
+      codeEditor.value.gotoLine(
+        currentPosition.row + 1,
+        currentPosition.column,
+        true
+      )
     }
   }
-})
+)
 </script>

src/vueFormCreate/components/ComponentGroup.vue

 <template>
   <div class="widget-cate">{{ title }}</div>
-  <Draggable
-    tag="ul"
-    item-key="type"
-    ghostClass="ghost"
-    :group="{ name: 'people', pull: 'clone', put: false }"
-    :sort="false"
-    :list="list"
-  >
+  <Draggable tag="ul" item-key="type" ghostClass="ghost" :group="{ name: 'people', pull: 'clone', put: false }"
+    :sort="false" :list="list">
     <template #item="{ element }">
-      <li
-        class="form-edit-widget-label"
-        :class="{ 'no-put': element.tpye === 'divider' }"
-      >
+      <li class="form-edit-widget-label" :class="{ 'no-put': element.tpye === 'divider' }">
         <a>
           <SvgIcon :iconClass="element.type" />
           <span>{{ element.label }}</span>
@@ -22,25 +13,17 @@
   </Draggable>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from 'vue'
+<script lang="ts" setup>
 import Draggable from 'vuedraggable'
 import SvgIcon from './SvgIcon.vue'
 
-export default defineComponent({
-  name: 'ComponentGroup',
-  components: {
-    Draggable,
-    SvgIcon
+const props = defineProps({
+  title: {
+    type: String,
+    required: true
   },
-  props: {
-    title: {
-      type: String,
-      required: true
-    },
-    list: {
-      required: true
-    }
+  list: {
+    required: true
   }
 })
 </script>

src/vueFormCreate/components/RichTextEditor.vue

@@ -2,10 +2,9 @@
   <div ref="editor"></div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import {
   computed,
-  defineComponent,
   onBeforeUnmount,
   onMounted,
   ref,
@@ -13,50 +12,44 @@ import {
 } from 'vue'
 import WangEditor from 'wangeditor'
 
-export default defineComponent({
-  name: 'RichTextEditor',
-  props: {
-    value: {
-      type: String,
-      default: ''
-    },
-    disable: {
-      type: Boolean,
-      default: false
-    }
+const props = defineProps({
+  value: {
+    type: String,
+    default: ''
   },
-  emits: ['update:value'],
-  setup(props, context) {
-    const editor = ref()
-
-    const content = computed({
-      set: val => context.emit('update:value', val),
-      get: () => props.value
-    })
-
-    let instance: WangEditor | null
-
-    onMounted(() => {
-      instance = new WangEditor(editor.value)
-      Object.assign(instance.config, {
-        zIndex: 9,
-        onchange: (html: string) => (content.value = html)
-      })
-      instance.create()
-
-      watchEffect(() =>
-        instance && props.disable ? instance.disable() : instance?.enable()
-      )
-    })
-
-    onBeforeUnmount(() => {
-      instance && instance.destroy()
-      instance = null
-    })
-
-    return {
-      editor
-    }
+  disable: {
+    type: Boolean,
+    default: false
   }
 })
+
+const emits = defineEmits(['update:value'])
+
+const editor = ref()
+
+const content = computed({
+  set: val => emits('update:value', val),
+  get: () => props.value
+})
+
+let instance: WangEditor | null
+
+onMounted(() => {
+  instance = new WangEditor(editor.value)
+  Object.assign(instance.config, {
+    zIndex: 9,
+    onchange: (html: string) => (content.value = html)
+  })
+  instance.create()
+
+  watchEffect(() =>
+    instance && props.disable ? instance.disable() : instance?.enable()
+  )
+})
+
+onBeforeUnmount(() => {
+  instance && instance.destroy()
+  instance = null
+})
+
 </script>

src/vueFormCreate/components/SvgIcon.vue

@@ -5,45 +5,35 @@
   </svg>
 </template>
 
-<script lang="ts">
-import { defineComponent, computed } from 'vue'
+<script lang="ts" setup>
+import { computed } from 'vue'
 import * as utils from '../utils'
 
-export default defineComponent({
-  name: 'SvgIcon',
-  props: {
-    iconClass: {
-      type: String,
-      required: true
-    },
-    className: {
-      type: String,
-      default: ''
-    }
+const props = defineProps({
+  iconClass: {
+    type: String,
+    required: true
   },
-  setup(props) {
-    const isExternal = computed(() => utils.isExternal(props.iconClass))
-    const iconName = computed(() => `#icon-${props.iconClass}`)
-    const svgClass = computed(() => {
-      if (props.className) {
-        return `svg-icon ${props.className}`
-      } else {
-        return 'svg-icon'
-      }
-    })
-    const styleExternalIcon = computed(() => ({
-      mask: `url(${props.iconClass}) no-repeat 50% 50%`,
-      '-webkit-mask': `url(${props.iconClass}) no-repeat 50% 50%`
-    }))
+  className: {
+    type: String,
+    default: ''
+  }
+})
 
-    return {
-      isExternal,
-      iconName,
-      svgClass,
-      styleExternalIcon
-    }
+const isExternal = computed(() => utils.isExternal(props.iconClass))
+const iconName = computed(() => `#icon-${props.iconClass}`)
+const svgClass = computed(() => {
+  if (props.className) {
+    return `svg-icon ${props.className}`
+  } else {
+    return 'svg-icon'
   }
 })
+const styleExternalIcon = computed(() => ({
+  mask: `url(${props.iconClass}) no-repeat 50% 50%`,
+  '-webkit-mask': `url(${props.iconClass}) no-repeat 50% 50%`
+}))
+
 </script>
 
 <style lang="scss" scoped>

src/vueFormCreate/config/element.ts

@@ -16,9 +16,9 @@ export interface WidgetForm {
     size: any
     hideRequiredAsterisk: boolean
     labelWidth: number
-    labelPosition: string
+    labelPosition: any
     dbTableName: string
-    dbTableComment: string,
+    dbTableComment: string
     formId: string
   }
 }
@@ -49,7 +49,7 @@ export const widgetForm: WidgetForm = {
 }
 export const put = () => {
   console.log('widgetForm', widgetForm);
-  
+
 }
 
 export const basicComponents = [

src/vueFormCreate/core/element/ElCustomHeader.vue

@@ -34,15 +34,14 @@
   </el-header>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script lang="ts" setup>
 import SvgIcon from '../../components/SvgIcon.vue'
 
-export default defineComponent({
-  name: 'CustomHeader',
-  components: {
-    SvgIcon
-  },
-  emits: ['uploadJson', 'clearable', 'preview', 'generateJson', 'generateCode']
-})
+const emits = defineEmits(['uploadJson', 'clearable', 'preview', 'generateJson', 'generateCode'])
 </script>
+
+<style lang="scss" scoped>
+:deep(.el-icon) {
+  width: 2em;
+}
+</style>

src/vueFormCreate/core/element/ElFormConfig.vue

@@ -37,39 +37,31 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import { WidgetForm } from '../../config/element'
 import { element } from '../../config'
-import { defineComponent, PropType, ref, watch } from 'vue'
+import { PropType, ref, watch } from 'vue'
 
-export default defineComponent({
-  name: 'ElFormConfig',
-  props: {
-    config: {
-      type: Object as PropType<WidgetForm['config']>,
-      required: true
-    }
-  },
-  emits: ['update:config'],
-  setup(props, context) {
-    const data = ref(props.config)
-
-    watch(data, () => {
-      context.emit('update:config', data)
-    })
-    const state = ref<any>({
-      widgetForm: element.widgetForm
-    })
+const props = defineProps({
+  config: {
+    type: Object as PropType<WidgetForm['config']>,
+    required: true
+  }
+})
+const emits = defineEmits(['update:config'])
+const data = ref(props.config)
 
-    // 编辑时更新数据
-    const updataNewData = (value: any) => data.value = value.config
+watch(data, () => {
+  emits('update:config', data)
+})
+const state = ref<any>({
+  widgetForm: element.widgetForm
+})
 
+// 编辑时更新数据
+const updataNewData = (value: any) => data.value = value.config
 
-    return {
-      data,
-      state,
-      updataNewData
-    }
-  }
+defineExpose({
+  updataNewData
 })
 </script>

src/vueFormCreate/core/element/ElGenerateForm.vue

 <template>
   <div class="fc-style" style="padding: 20px;">
-    <el-form ref="generateForm" label-suffix=":" :model="model" :rules="rules" :size="widgetForm.config.size"
-      :label-position="widgetForm.config.labelPosition" :label-width="`${widgetForm.config.labelWidth}px`"
-      :hide-required-asterisk="widgetForm.config.hideRequiredAsterisk">
-      <template v-for="(element, index) of widgetForm.list">
+    <el-form ref="generateForm" label-suffix=":" :model="state.model" :rules="state.rules"
+      :size="state.widgetForm.config.size" :label-position="state.widgetForm.config.labelPosition"
+      :label-width="`${state.widgetForm.config.labelWidth}px`"
+      :hide-required-asterisk="state.widgetForm.config.hideRequiredAsterisk">
+      <template v-for="(element, index) of state.widgetForm.list">
         <template v-if="element.type === 'grid'">
           <el-row type="flex" v-if="element.key" :key="element.key" :gutter="element.options.gutter ?? 0"
             :justify="element.options.justify" :align="element.options.align">
             <el-col v-for="(col, colIndex) of element.columns" :key="colIndex" :span="col.span ?? 0">
-              <ElGenerateFormItem v-for="colItem of col.list" :model="model" :key="colItem.key" :element="colItem"
+              <ElGenerateFormItem v-for="colItem of col.list" :model="state.model" :key="colItem.key" :element="colItem"
                 :config="data.config" :disabled="disabled" />
             </el-col>
           </el-row>
         </template>
-        <ElGenerateFormItem v-else :model="model" :key="element.key" :element="widgetForm.list[index]"
+        <ElGenerateFormItem v-else :model="state.model" :key="element.key" :element="state.widgetForm.list[index]"
           :config="data.config" :disabled="disabled" />
       </template>
     </el-form>
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, onMounted, reactive, toRefs, watch } from 'vue'
+<script lang="ts" setup>
+import { onMounted, reactive, toRefs, watch } from 'vue'
 import { ElMessage } from 'element-plus'
 import ElGenerateFormItem from './ElGenerateFormItem.vue'
 import { element } from '../../config'
 
-export default defineComponent({
-  name: 'ElGenerateForm',
-  components: {
-    ElGenerateFormItem
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: element.widgetForm
   },
-  props: {
-    data: {
-      type: Object,
-      default: element.widgetForm
-    },
-    value: {
-      type: Object
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    }
+  value: {
+    type: Object
   },
-  setup(props) {
-    const state = reactive({
-      generateForm: null as any,
-      model: {} as any,
-      rules: {} as any,
-      widgetForm:
-        (props.data && JSON.parse(JSON.stringify(props.data))) ??
-        element.widgetForm
-    })
-    const generateModel = (list: any[]) => {
-      for (let index = 0; index < list.length; index++) {
-        const model = list[index].model
-        if (!model) {
-          return
-        }
-        if (list[index].type === 'grid') {
-          list[index].columns.forEach((col: any) => generateModel(col.list))
-        } else {
-          if (props.value && Object.keys(props.value).includes(model)) {
-            state.model[model] = props.value[model]
-          } else {
-            state.model[model] = list[index].options.defaultValue
-          }
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+})
 
-          state.rules[model] = list[index].options.rules
-        }
+const state = reactive({
+  generateForm: null as any,
+  model: {} as any,
+  rules: {} as any,
+  widgetForm:
+    (props.data && JSON.parse(JSON.stringify(props.data))) ??
+    element.widgetForm
+})
+const generateModel = (list: any[]) => {
+  for (let index = 0; index < list.length; index++) {
+    const model = list[index].model
+    if (!model) {
+      return
+    }
+    if (list[index].type === 'grid') {
+      list[index].columns.forEach((col: any) => generateModel(col.list))
+    } else {
+      if (props.value && Object.keys(props.value).includes(model)) {
+        state.model[model] = props.value[model]
+      } else {
+        state.model[model] = list[index].options.defaultValue
       }
+
+      state.rules[model] = list[index].options.rules
     }
+  }
+}
 
-    const generateOptions = (list: any[]) => {
-      list.forEach(item => {
-        if (item.type === 'grid') {
-          item.columns.forEach((col: any) => generateOptions(col.list))
-        } else {
-          if (item.options.remote && item.options.remoteFunc) {
-            fetch(item.options.remoteFunc)
-              .then(resp => resp.json())
-              .then(json => {
-                if (json instanceof Array) {
-                  item.options.remoteOptions = json.map(data => ({
-                    label: data[item.options.props.label],
-                    value: data[item.options.props.value],
-                    children: data[item.options.props.children]
-                  }))
-                }
-              })
-          }
-        }
-      })
+const generateOptions = (list: any[]) => {
+  list.forEach(item => {
+    if (item.type === 'grid') {
+      item.columns.forEach((col: any) => generateOptions(col.list))
+    } else {
+      if (item.options.remote && item.options.remoteFunc) {
+        fetch(item.options.remoteFunc)
+          .then(resp => resp.json())
+          .then(json => {
+            if (json instanceof Array) {
+              item.options.remoteOptions = json.map(data => ({
+                label: data[item.options.props.label],
+                value: data[item.options.props.value],
+                children: data[item.options.props.children]
+              }))
+            }
+          })
+      }
     }
+  })
+}
 
-    watch(
-      () => props.data,
-      val => {
-        state.widgetForm =
-          (val && JSON.parse(JSON.stringify(val))) ?? element.widgetForm
-        state.model = {}
-        state.rules = {}
-        generateModel(state.widgetForm.list)
-        generateOptions(state.widgetForm.list)
-      },
-      { deep: true, immediate: true }
-    )
+watch(
+  () => props.data,
+  val => {
+    state.widgetForm =
+      (val && JSON.parse(JSON.stringify(val))) ?? element.widgetForm
+    state.model = {}
+    state.rules = {}
+    generateModel(state.widgetForm.list)
+    generateOptions(state.widgetForm.list)
+  },
+  { deep: true, immediate: true }
+)
 
-    onMounted(() => {
-      generateModel(state.widgetForm?.list ?? [])
-      generateOptions(state.widgetForm?.list ?? [])
-    })
+onMounted(() => {
+  generateModel(state.widgetForm?.list ?? [])
+  generateOptions(state.widgetForm?.list ?? [])
+})
 
-    const getData = () => {
-      return new Promise((resolve, reject) => {
-        state.generateForm
-          .validate()
-          .then((validate: boolean) => {
-            if (validate) {
-              // console.log('成功', state.generateForm);
-              resolve(state.model)
-            } else {
-              // console.log('失败');
-              ElMessage.error('验证失败')
-            }
-          })
-          .catch((error: Error) => {
-            reject(error)
-          })
+const getData = () => {
+  return new Promise((resolve, reject) => {
+    state.generateForm
+      .validate()
+      .then((validate: boolean) => {
+        if (validate) {
+          // console.log('成功', state.generateForm);
+          resolve(state.model)
+        } else {
+          // console.log('失败');
+          ElMessage.error('验证失败')
+        }
       })
-    }
+      .catch((error: Error) => {
+        reject(error)
+      })
+  })
+}
 
-    const reset = () => {
-      state.generateForm.resetFields()
-    }
+const reset = () => {
+  state.generateForm.resetFields()
+}
 
-    return {
-      ...toRefs(state),
-      getData,
-      reset
-    }
-  }
+defineExpose({
+  ...toRefs(state),
+  getData,
+  reset
 })
 </script>

src/vueFormCreate/core/element/ElWidgetConfig.vue

@@ -402,115 +402,95 @@
   </el-form>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref, watch, reactive } from 'vue'
+<script lang="ts" setup>
+import { ref, watch, reactive } from 'vue'
 import Draggable from 'vuedraggable'
 import SvgIcon from '../../components/SvgIcon.vue'
 import type { FormInstance, FormRules } from 'element-plus'
 
-export default defineComponent({
-  name: 'ElWidgetConfig',
-  components: {
-    Draggable,
-    SvgIcon
-  },
-  props: {
-    select: {
-      type: Object
-    }
-  },
-  emits: ['update:select'],
-  setup(props, context) {
-    const add = async (formEl: FormInstance | undefined) => {
-      if (!formEl) return
-      console.log('sda');
-      await formEl.validate((valid, fields) => {
-        if (valid) {
-          console.log('校验通过');
-        } else {
-          console.log('fields', fields);
-
-        }
-      })
-    }
-    const data = ref<any>(props.select)
-    const widgetConfigRef = ref<FormInstance>()
-    const rules = reactive<FormRules>({
-      model: [{ required: true, message: '字段标识不为空', trigger: 'blur' }],
-      dbFieldName: [{ required: true, message: '表字段名称不为空', trigger: 'blur' }],
-      dbFieldComment: [{ required: true, message: '表字段注释不为空', trigger: 'blur' }]
-    })
-    watch(
-      () => props.select,
-      (val) => (data.value = val)
-    )
-
-    watch(data, (val) => context.emit('update:select', val), { deep: true })
-
-    const hasKey = (key: string) =>
-      Object.keys(data.value.options).includes(key)
-
-    const handleInsertColumn = () => {
-      data.value.columns.push({
-        span: 0,
-        list: []
-      })
-    }
+const props = defineProps({
+  select: {
+    type: Object
+  }
+})
 
-    const handleInsertOption = () => {
-      const index = data.value.options.options.length + 1
-      data.value.options.options.push({
-        label: `Option ${index}`,
-        value: `Option ${index}`
-      })
-    }
+const emits = defineEmits(['update:select'])
 
-    const handleOptionsRemove = (index: number) => {
-      if (data.value.type === 'grid') {
-        data.value.columns.splice(index, 1)
-      } else {
-        data.value.options.options.splice(index, 1)
-      }
-    }
+const add = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  console.log('sda');
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('校验通过');
+    } else {
+      console.log('fields', fields);
 
-    const handleSliderModeChange = (checked: boolean) => {
-      checked
-        ? (data.value.options.defaultValue = [10, 90])
-        : (data.value.options.defaultValue = 0)
     }
+  })
+}
+const data = ref<any>(props.select)
+const widgetConfigRef = ref<FormInstance>()
+const rules = reactive<FormRules>({
+  model: [{ required: true, message: '字段标识不为空', trigger: 'blur' }],
+  dbFieldName: [{ required: true, message: '表字段名称不为空', trigger: 'blur' }],
+  dbFieldComment: [{ required: true, message: '表字段注释不为空', trigger: 'blur' }]
+})
+watch(
+  () => props.select,
+  (val) => (data.value = val)
+)
+
+watch(data, (val) => emits('update:select', val), { deep: true })
+
+const hasKey = (key: string) =>
+  Object.keys(data.value.options).includes(key)
+
+const handleInsertColumn = () => {
+  data.value.columns.push({
+    span: 0,
+    list: []
+  })
+}
+
+const handleInsertOption = () => {
+  const index = data.value.options.options.length + 1
+  data.value.options.options.push({
+    label: `Option ${index}`,
+    value: `Option ${index}`
+  })
+}
+
+const handleOptionsRemove = (index: number) => {
+  if (data.value.type === 'grid') {
+    data.value.columns.splice(index, 1)
+  } else {
+    data.value.options.options.splice(index, 1)
+  }
+}
 
-    const handleSelectModeChange = (val: boolean) => {
-      if (data.value.type === 'img-upload') {
-        return
-      }
-      if (val) {
-        if (data.value.options.defaultValue) {
-          if (!(data.value.options.defaultValue instanceof Array)) {
-            data.value.options.defaultValue = [data.value.options.defaultValue]
-          }
-        } else {
-          data.value.options.defaultValue = []
-        }
-      } else {
-        data.value.options.defaultValue.length
-          ? (data.value.options.defaultValue =
-            data.value.options.defaultValue[0])
-          : (data.value.options.defaultValue = null)
-      }
-    }
+const handleSliderModeChange = (checked: boolean) => {
+  checked
+    ? (data.value.options.defaultValue = [10, 90])
+    : (data.value.options.defaultValue = 0)
+}
 
-    return {
-      data,
-      rules,
-      widgetConfigRef,
-      hasKey,
-      handleInsertColumn,
-      handleInsertOption,
-      handleOptionsRemove,
-      handleSliderModeChange,
-      handleSelectModeChange,
-      add
+const handleSelectModeChange = (val: boolean) => {
+  if (data.value.type === 'img-upload') {
+    return
+  }
+  if (val) {
+    if (data.value.options.defaultValue) {
+      if (!(data.value.options.defaultValue instanceof Array)) {
+        data.value.options.defaultValue = [data.value.options.defaultValue]
+      }
+    } else {
+      data.value.options.defaultValue = []
     }
+  } else {
+    data.value.options.defaultValue.length
+      ? (data.value.options.defaultValue =
+        data.value.options.defaultValue[0])
+      : (data.value.options.defaultValue = null)
   }
-})
+}
 </script>

src/vueFormCreate/index.ts

 import { App } from 'vue'
-import ElDesignForm from './core/element/ElDesignForm.vue'
+import ElDesignForm from './core/element/ElDesignForm.vue' // 主页面
 import ElGenerateForm from './core/element/ElGenerateForm.vue'
 import Icons from './icons'
 import './styles/index.styl'
@@ -32,5 +32,5 @@ export {
 export default {
   install,
   ElDesignForm,
-  ElGenerateForm
-}
+  ElGenerateForm,
+}
\ No newline at end of file

vite.config.ts

@@ -122,6 +122,7 @@ export default ({ command, mode }) => {
       },
     },
     build: {
+      minify: 'terser',
       // 分块打包配置
       chunkSizeWarningLimit: 1500, // 分块打包，分解块，将大块分解成更小的块
       rollupOptions: {