perf: formdesign

src/components/FormDesign/src/components/VFormCreate/components/FormRender.vue

@@ -1,18 +1,10 @@
-<script lang="ts">
+<script lang="ts" setup>
 import type { PropType } from 'vue'
-import { defineComponent } from 'vue'
 import { Col, Row } from 'ant-design-vue'
 import type { IFormConfig, IVFormComponent } from '../../../typings/v-form-component'
 import VFormItem from '../../VFormItem/index.vue'
 
-export default defineComponent({
+defineProps({
-  name: 'FormRender',
-  components: {
-    VFormItem,
-    Row,
-    Col,
-  },
-  props: {
   formData: {
     type: Object,
     default: () => ({}),
@@ -29,16 +21,20 @@ export default defineComponent({
     type: Function as PropType<(key: string, value: any) => void>,
     default: null,
   },
-  },
-  emits: ['change', 'submit', 'reset'],
-  setup(_props) {},
 })
+
+const emit = defineEmits(['change', 'submit', 'reset'])
 </script>
 
 <template>
   <template v-if="['Grid'].includes(schema.component)">
     <Row class="grid-row">
-      <Col v-for="(colItem, index) in schema.columns" :key="index" class="grid-col" :span="colItem.span">
+      <Col
+        v-for="(colItem, index) in schema.columns"
+        :key="index"
+        class="grid-col"
+        :span="colItem.span"
+      >
         <FormRender
           v-for="(item, k) in colItem.children"
           :key="k"
@@ -56,11 +52,14 @@ export default defineComponent({
     :schema="schema"
     :form-data="formData"
     :set-form-model="setFormModel"
-    @change="$emit('change', { schema, value: $event })"
+    @change="emit('change', { schema, value: $event })"
-    @submit="$emit('submit', schema)"
+    @submit="emit('submit', schema)"
-    @reset="$emit('reset')"
+    @reset="emit('reset')"
+  >
+    <template
+      v-if="schema.componentProps && schema.componentProps.slotName"
+      #[schema.componentProps!.slotName]
     >
-    <template v-if="schema.componentProps && schema.componentProps.slotName" #[schema.componentProps!.slotName]>
       <slot :name="schema.componentProps!.slotName" />
     </template>
   </VFormItem>

src/components/FormDesign/src/components/VFormCreate/index.vue

@@ -45,12 +45,16 @@ export default defineComponent({
     })
 
     const noHiddenList = computed(() => {
-      return props.formConfig.schemas && props.formConfig.schemas.filter(item => item.hidden !== true)
+      return (
+        props.formConfig.schemas
+          && props.formConfig.schemas.filter(item => item.hidden !== true)
+      )
     })
 
     const fApi = useVModel(props, 'fApi', emit)
 
-    const { submit, validate, clearValidate, resetFields, validateField } = useFormInstanceMethods(props, formModelNew, context, eFormModel)
+    const { submit, validate, clearValidate, resetFields, validateField }
+        = useFormInstanceMethods(props, formModelNew, context, eFormModel)
 
     const { linkOn, ...methods } = useVFormMethods(
       { formConfig: props.formConfig, formData: props.formModel } as unknown as IProps,
@@ -78,7 +82,9 @@ export default defineComponent({
     /**
      * 获取表单属性
      */
-    const formModelProps = computed(() => omit(props.formConfig, ['disabled', 'labelWidth', 'schemas']) as Recordable)
+    const formModelProps = computed(
+      () => omit(props.formConfig, ['disabled', 'labelWidth', 'schemas']) as Recordable,
+    )
 
     const handleSubmit = () => {
       submit()
@@ -127,7 +133,10 @@ export default defineComponent({
           @reset="resetFields"
         >
           <template v-if="schema && schema.componentProps" #[`schema.componentProps!.slotName`]>
-            <slot :name="schema.componentProps!.slotName" v-bind="{ formModel, field: schema.field, schema }" />
+            <slot
+              :name="schema.componentProps!.slotName"
+              v-bind="{ formModel, field: schema.field, schema }"
+            />
           </template>
         </FormRender>
       </Row>

src/components/FormDesign/src/components/VFormDesign/components/CodeModal.vue

@@ -1,8 +1,8 @@
 <!--
  * @Description: 渲染代码
 -->
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent, reactive, toRefs } from 'vue'
+import { computed, reactive } from 'vue'
 import { Modal } from 'ant-design-vue'
 import { formatRules, removeAttrs } from '../../../utils'
 import type { IFormConfig } from '../../../typings/v-form-component'
@@ -38,37 +38,31 @@ let codeVueLast = `
      }
   }
 }
-<\/script>`
+<\/script>`;
 //
-export default defineComponent({
-  name: 'CodeModal',
-  components: { PreviewCode, Modal },
-  setup() {
 const state = reactive({
   open: false,
-      jsonData: {} as IFormConfig
+  jsonData: {} as IFormConfig,
-    })
+});
 
 const showModal = (formConfig: IFormConfig) => {
-      formConfig.schemas && formatRules(formConfig.schemas)
+  formConfig.schemas && formatRules(formConfig.schemas);
-      state.open = true
+  state.open = true;
-      state.jsonData = formConfig
+  state.jsonData = formConfig;
-    }
+};
 
 const editorVueJson = computed(() => {
-      return codeVueFront + JSON.stringify(removeAttrs(state.jsonData), null, '\t') + codeVueLast
+  return codeVueFront + JSON.stringify(removeAttrs(state.jsonData), null, '\t') + codeVueLast;
-    })
+});
 
-    return { ...toRefs(state), editorVueJson, showModal }
+defineExpose({ showModal })
-  }
-})
 </script>
 <template>
   <Modal
     title="代码"
     :footer="null"
-    :open="open"
+    :open="state.open"
-    @cancel="open = false"
+    @cancel="state.open = false"
     wrapClassName="v-code-modal"
     style="top: 20px"
     width="850px"

src/components/FormDesign/src/components/VFormDesign/components/ComponentProps.vue

@@ -2,7 +2,20 @@
  * @Description: 组件属性控件
 -->
 <script lang="ts">
-import { Checkbox, Col, Empty, Form, FormItem, Input, InputNumber, RadioGroup, Row, Select, Switch } from 'ant-design-vue'
+import {
+  Checkbox,
+  Col,
+  Empty,
+  Form,
+  FormItem,
+  Input,
+  InputNumber,
+  RadioGroup,
+  Row,
+  Select,
+  Switch,
+} from 'ant-design-vue'
+import RadioButtonGroup from '/@/components/Form/src/components/RadioButtonGroup.vue'
 import { computed, defineComponent, ref, watch } from 'vue'
 import { useFormDesignState } from '../../../hooks/useFormDesignState'
 import {
@@ -14,7 +27,6 @@ import {
 import { formItemsForEach, remove } from '../../../utils'
 import type { IBaseFormAttrs } from '../config/formItemPropsConfig'
 import FormOptions from './FormOptions.vue'
-import RadioButtonGroup from '@/components/Form/src/components/RadioButtonGroup.vue'
 
 export default defineComponent({
   name: 'ComponentProps',
@@ -45,8 +57,10 @@ export default defineComponent({
 
     const { formConfig } = useFormDesignState()
 
-    if (formConfig.value.currentItem)
+    if (formConfig.value.currentItem) {
-      formConfig.value.currentItem.componentProps = formConfig.value.currentItem.componentProps || {}
+      formConfig.value.currentItem.componentProps
+          = formConfig.value.currentItem.componentProps || {}
+    }
 
     watch(
       () => formConfig.value.currentItem?.field,
@@ -114,14 +128,14 @@ export default defineComponent({
     // 控制性的选项
     const controlOptions = computed(() => {
       return allOptions.value.filter((item) => {
-        return item.category === 'control'
+        return item.category == 'control'
       })
     })
 
     // 非控制性选择
     const inputOptions = computed(() => {
       return allOptions.value.filter((item) => {
-        return item.category === 'input'
+        return item.category == 'input'
       })
     })
 
@@ -199,12 +213,23 @@ export default defineComponent({
           </FormItem>
         </div>
         <FormItem label="关联字段">
-          <Select v-model:value="formConfig.currentItem.link" mode="multiple" :options="linkOptions" />
+          <Select
+            v-model:value="formConfig.currentItem.link"
+            mode="multiple"
+            :options="linkOptions"
+          />
         </FormItem>
 
         <FormItem
           v-if="
-            ['Select', 'CheckboxGroup', 'RadioGroup', 'TreeSelect', 'Cascader', 'AutoComplete'].includes(formConfig.currentItem.component)
+            [
+              'Select',
+              'CheckboxGroup',
+              'RadioGroup',
+              'TreeSelect',
+              'Cascader',
+              'AutoComplete',
+            ].includes(formConfig.currentItem.component)
           "
           label="选项"
         >

src/components/FormDesign/src/components/VFormDesign/components/FormItemProps.vue

@@ -3,7 +3,18 @@
 -->
 <script lang="ts">
 import { computed, defineComponent, watch } from 'vue'
-import { Checkbox, Col, Empty, Form, FormItem, Input, RadioGroup, Select, Slider, Switch } from 'ant-design-vue'
+import {
+  Checkbox,
+  Col,
+  Empty,
+  Form,
+  FormItem,
+  Input,
+  RadioGroup,
+  Select,
+  Slider,
+  Switch,
+} from 'ant-design-vue'
 import { isArray } from 'lodash-es'
 import {
   advanceFormItemColProps,
@@ -40,8 +51,10 @@ export default defineComponent({
       () => {
         if (formConfig.value.currentItem) {
           formConfig.value.currentItem.itemProps = formConfig.value.currentItem.itemProps || {}
-          formConfig.value.currentItem.itemProps.labelCol = formConfig.value.currentItem.itemProps.labelCol || {}
+          formConfig.value.currentItem.itemProps.labelCol
-          formConfig.value.currentItem.itemProps.wrapperCol = formConfig.value.currentItem.itemProps.wrapperCol || {}
+              = formConfig.value.currentItem.itemProps.labelCol || {}
+          formConfig.value.currentItem.itemProps.wrapperCol
+              = formConfig.value.currentItem.itemProps.wrapperCol || {}
         }
       },
       { deep: true, immediate: true },

src/components/FormDesign/src/components/VFormDesign/components/FormNode.vue

@@ -40,13 +40,19 @@ export default defineComponent({
 </script>
 
 <template>
-  <div class="drag-move-box" :class="{ active: schema.key === formConfig.currentItem?.key }" @click.stop="handleSelectItem">
+  <div
+    class="drag-move-box"
+    :class="{ active: schema.key === formConfig.currentItem?.key }"
+    @click.stop="handleSelectItem"
+  >
     <div class="form-item-box">
       <VFormItem :form-config="formConfig" :schema="schema" />
     </div>
+
     <div class="show-key-box">
       {{ schema.label + (schema.field ? `/${schema.field}` : '') }}
     </div>
+
     <FormNodeOperate :schema="schema" :current-item="formConfig.currentItem" />
   </div>
 </template>

src/components/FormDesign/src/components/VFormDesign/components/FormNodeOperate.vue

@@ -1,19 +1,14 @@
 <!--
  * @Description: 节点操作复制删除控件
 -->
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent } from 'vue'
+import { computed } from 'vue'
 import type { IVFormComponent } from '../../../typings/v-form-component'
 import { remove } from '../../../utils'
 import { useFormDesignState } from '../../../hooks/useFormDesignState'
-import Icon from '@/components/Icon/index'
+import { Icon } from '@/components/Icon'
 
-export default defineComponent({
+const props = defineProps({
-  name: 'FormNodeOperate',
-  components: {
-    Icon,
-  },
-  props: {
   schema: {
     type: Object,
     default: () => ({}),
@@ -22,8 +17,8 @@ export default defineComponent({
     type: Object,
     default: () => ({}),
   },
-  },
+})
-  setup(props) {
+
 const { formConfig, formDesignMethods } = useFormDesignState()
 const activeClass = computed(() => {
   return props.schema.key === props.currentItem.key ? 'active' : 'unactivated'
@@ -31,15 +26,20 @@ export default defineComponent({
 /**
        * 删除当前项
        */
-    const handleDelete = () => {
+function handleDelete() {
   const traverse = (schemas: IVFormComponent[]) => {
     schemas.some((formItem, index) => {
-          const { component, key } = formItem
+      const { component, key } = formItem;
       // 处理栅格和标签页布局
-          ;['Grid', 'Tabs'].includes(component) && formItem.columns?.forEach(item => traverse(item.children))
+      ['Grid', 'Tabs'].includes(component)
+              && formItem.columns?.forEach(item => traverse(item.children))
       if (key === props.currentItem.key) {
         const params: IVFormComponent
-              = schemas.length === 1 ? { component: '' } : schemas.length - 1 > index ? schemas[index + 1] : schemas[index - 1]
+                = schemas.length === 1
+                  ? { component: '' }
+                  : schemas.length - 1 > index
+                    ? schemas[index + 1]
+                    : schemas[index - 1]
         formDesignMethods.handleSetSelectItem(params)
         remove(schemas, index)
         return true
@@ -49,12 +49,9 @@ export default defineComponent({
   traverse(formConfig.value!.schemas)
 }
 
-    const handleCopy = () => {
+function handleCopy() {
   formDesignMethods.handleCopy()
 }
-    return { activeClass, handleDelete, handleCopy }
-  },
-})
 </script>
 
 <template>

src/components/FormDesign/src/components/VFormDesign/components/FormOptions.vue

@@ -1,20 +1,13 @@
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, reactive, toRefs } from 'vue'
 import { Input } from 'ant-design-vue'
 import { useFormDesignState } from '../../../hooks/useFormDesignState'
 import { remove } from '../../../utils'
 import message from '../../../utils/message'
-import Icon from '@/components/Icon/index'
+import { Icon } from '@/components/Icon'
 
-export default defineComponent({
-  name: 'FormOptions',
-  components: { Input, Icon },
-  // props: {},
-  setup() {
-    const state = reactive({})
 const { formConfig } = useFormDesignState()
 const key = formConfig.value.currentItem?.component === 'TreeSelect' ? 'treeData' : 'options'
-    const addOptions = () => {
+function addOptions() {
   if (!formConfig.value.currentItem?.componentProps?.[key])
     formConfig.value.currentItem!.componentProps![key] = []
   const len = formConfig.value.currentItem?.componentProps?.[key].length + 1
@@ -23,33 +16,22 @@ export default defineComponent({
     value: `${len}`,
   })
 }
-    const deleteOptions = (index: number) => {
+function deleteOptions(index: number) {
   remove(formConfig.value.currentItem?.componentProps?.[key], index)
 }
 
-    const addGridOptions = () => {
+function addGridOptions() {
   formConfig.value.currentItem?.columns?.push({
     span: 12,
     children: [],
   })
 }
-    const deleteGridOptions = (index: number) => {
+function deleteGridOptions(index: number) {
   if (index === 0)
     return message.warning('请至少保留一个栅格')
 
   remove(formConfig.value.currentItem!.columns!, index)
 }
-    return {
-      ...toRefs(state),
-      formConfig,
-      addOptions,
-      deleteOptions,
-      key,
-      deleteGridOptions,
-      addGridOptions,
-    }
-  },
-})
 </script>
 
 <template>

src/components/FormDesign/src/components/VFormDesign/components/FormProps.vue

@@ -1,28 +1,19 @@
 <!--
  * @Description: 右侧属性面板控件 表单属性面板
 -->
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue'
 import type { RadioChangeEvent } from 'ant-design-vue'
-import { Checkbox, Col, InputNumber, Slider } from 'ant-design-vue'
+import {
-
-// import RadioButtonGroup from '/@/components/RadioButtonGroup.vue';
-import { Form, FormItem, Radio } from 'ant-design-vue'
-import { useFormDesignState } from '../../../hooks/useFormDesignState'
-
-export default defineComponent({
-  name: 'FormProps',
-  components: {
-    InputNumber,
-    Slider,
   Checkbox,
-    RadioGroup: Radio.Group,
+  Col,
-    RadioButton: Radio.Button,
   Form,
   FormItem,
-    Col,
+  InputNumber,
-  },
+  Radio,
-  setup() {
+  Slider,
+} from 'ant-design-vue'
+import { useFormDesignState } from '../../../hooks/useFormDesignState'
+
 const { formConfig } = useFormDesignState()
 
 formConfig.value = formConfig.value || {
@@ -30,14 +21,10 @@ export default defineComponent({
   wrapperCol: { span: 24 },
 }
 
-    const lableLayoutChange = (e: RadioChangeEvent) => {
+function lableLayoutChange(e: RadioChangeEvent) {
   if (e.target.value === 'Grid')
     formConfig.value.layout = 'horizontal'
 }
-
-    return { formConfig, lableLayoutChange }
-  },
-})
 </script>
 
 <template>
@@ -46,33 +33,42 @@ export default defineComponent({
       <!--      <e-upload v-model="fileList"></e-upload> -->
 
       <FormItem label="表单布局">
-        <RadioGroup v-model:value="formConfig.layout" button-style="solid">
+        <Radio.Group v-model:value="formConfig.layout" button-style="solid">
-          <RadioButton value="horizontal">
+          <Radio.Button value="horizontal">
             水平
-          </RadioButton>
+          </Radio.Button>
-          <RadioButton value="vertical" :disabled="formConfig.labelLayout === 'Grid'">
+          <Radio.Button value="vertical" :disabled="formConfig.labelLayout === 'Grid'">
             垂直
-          </RadioButton>
+          </Radio.Button>
-          <RadioButton value="inline" :disabled="formConfig.labelLayout === 'Grid'">
+          <Radio.Button value="inline" :disabled="formConfig.labelLayout === 'Grid'">
             行内
-          </RadioButton>
+          </Radio.Button>
-        </RadioGroup>
+        </Radio.Group>
       </FormItem>
 
       <!-- <Row> -->
       <FormItem label="标签布局">
-        <RadioGroup v-model:value="formConfig.labelLayout" button-style="solid" @change="lableLayoutChange">
+        <Radio.Group
-          <RadioButton value="flex">
+          v-model:value="formConfig.labelLayout"
+          button-style="solid"
+          @change="lableLayoutChange"
+        >
+          <Radio.Button value="flex">
             固定
-          </RadioButton>
+          </Radio.Button>
-          <RadioButton value="Grid" :disabled="formConfig.layout !== 'horizontal'">
+          <Radio.Button value="Grid" :disabled="formConfig.layout !== 'horizontal'">
             栅格
-          </RadioButton>
+          </Radio.Button>
-        </RadioGroup>
+        </Radio.Group>
       </FormItem>
       <!-- </Row> -->
       <FormItem v-show="formConfig.labelLayout === 'flex'" label="标签宽度（px）">
-        <InputNumber v-model:value="formConfig.labelWidth" :style="{ width: '100%' }" :min="0" :step="1" />
+        <InputNumber
+          v-model:value="formConfig.labelWidth"
+          :style="{ width: '100%' }"
+          :min="0"
+          :step="1"
+        />
       </FormItem>
       <div v-if="formConfig.labelLayout === 'Grid'">
         <FormItem label="labelCol">
@@ -83,28 +79,28 @@ export default defineComponent({
         </FormItem>
 
         <FormItem label="标签对齐">
-          <RadioGroup v-model:value="formConfig.labelAlign" button-style="solid">
+          <Radio.Group v-model:value="formConfig.labelAlign" button-style="solid">
-            <RadioButton value="left">
+            <Radio.Button value="left">
               靠左
-            </RadioButton>
+            </Radio.Button>
-            <RadioButton value="right">
+            <Radio.Button value="right">
               靠右
-            </RadioButton>
+            </Radio.Button>
-          </RadioGroup>
+          </Radio.Group>
         </FormItem>
 
         <FormItem label="控件大小">
-          <RadioGroup v-model:value="formConfig.size" button-style="solid">
+          <Radio.Group v-model:value="formConfig.size" button-style="solid">
-            <RadioButton value="default">
+            <Radio.Button value="default">
               默认
-            </RadioButton>
+            </Radio.Button>
-            <RadioButton value="small">
+            <Radio.Button value="small">
               小
-            </RadioButton>
+            </Radio.Button>
-            <RadioButton value="large">
+            <Radio.Button value="large">
               大
-            </RadioButton>
+            </Radio.Button>
-          </RadioGroup>
+          </Radio.Group>
         </FormItem>
       </div>
       <FormItem label="表单属性">

src/components/FormDesign/src/components/VFormDesign/components/ImportJsonModal.vue

@@ -1,8 +1,8 @@
 <!--
  * @Description: 导入JSON模板
 -->
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, reactive, ref, toRefs } from 'vue'
+import { reactive, ref } from 'vue'
 
 // import message from '../../../utils/message';
 import { Modal, Upload } from 'ant-design-vue'
@@ -14,14 +14,6 @@ import { formItemsForEach, generateKey } from '../../../utils'
 import { CodeEditor, MODE } from '@/components/CodeEditor'
 import { useMessage } from '@/hooks/web/useMessage'
 
-export default defineComponent({
-  name: 'ImportJsonModal',
-  components: {
-    CodeEditor,
-    Upload,
-    Modal,
-  },
-  setup() {
 const { createMessage } = useMessage()
 
 const myEditor = ref(null)
@@ -53,13 +45,13 @@ export default defineComponent({
   handleSetSelectItem: null,
 })
 const { formDesignMethods } = useFormDesignState()
-    const handleCancel = () => {
+function handleCancel() {
   state.open = false
 }
-    const showModal = () => {
+function showModal() {
   state.open = true
 }
-    const handleImportJson = () => {
+function handleImportJson() {
   // 导入JSON
   try {
     const editorJsonData = JSON.parse(state.json) as IFormConfig
@@ -79,7 +71,7 @@ export default defineComponent({
     createMessage.error('导入失败，数据格式不对')
   }
 }
-    const beforeUpload = (e: File) => {
+function beforeUpload(e: File) {
   // 通过json文件导入
   const reader = new FileReader()
   reader.readAsText(e)
@@ -90,23 +82,13 @@ export default defineComponent({
   return false
 }
 
-    return {
+defineExpose({ showModal })
-      myEditor,
-      handleImportJson,
-      beforeUpload,
-      handleCancel,
-      showModal,
-      ...toRefs(state),
-      MODE,
-    }
-  },
-})
 </script>
 
 <template>
   <Modal
     title="JSON数据"
-    :open="open"
+    :open="state.open"
     cancel-text="关闭"
     :destroy-on-close="true"
     wrap-class-name="v-code-modal"
@@ -126,7 +108,12 @@ export default defineComponent({
       <a-button @click="handleCancel">
         取消
       </a-button>
-      <Upload class="upload-button" :before-upload="beforeUpload" :show-upload-list="false" accept="application/json">
+      <Upload
+        class="upload-button"
+        :before-upload="beforeUpload"
+        :show-upload-list="false"
+        accept="application/json"
+      >
         <a-button type="primary">
           导入json文件
         </a-button>

src/components/FormDesign/src/components/VFormDesign/components/JsonModal.vue

@@ -1,21 +1,15 @@
 <!--
  * @Description: 渲染JSON数据
 -->
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent, reactive, toRefs } from 'vue'
+import { computed, reactive } from 'vue'
 import { Modal } from 'ant-design-vue'
 import type { IFormConfig } from '../../../typings/v-form-component'
 import { formatRules, removeAttrs } from '../../../utils'
 import PreviewCode from './PreviewCode.vue'
 
-export default defineComponent({
+const emit = defineEmits(['cancel'])
-  name: 'JsonModal',
+
-  components: {
-    PreviewCode,
-    Modal,
-  },
-  emits: ['cancel'],
-  setup(_props, { emit }) {
 const state = reactive<{
   open: boolean
   jsonData: IFormConfig
@@ -27,7 +21,7 @@ export default defineComponent({
      * 显示Json数据弹框
      * @param jsonData
      */
-    const showModal = (jsonData: IFormConfig) => {
+function showModal(jsonData: IFormConfig) {
   formatRules(jsonData.schemas)
   state.jsonData = jsonData
   state.open = true
@@ -39,21 +33,19 @@ export default defineComponent({
 })
 
 // 关闭弹框
-    const handleCancel = () => {
+function handleCancel() {
   state.open = false
   emit('cancel')
 }
 
-    return { ...toRefs(state), editorJson, handleCancel, showModal }
+defineExpose({ showModal })
-  },
-})
 </script>
 
 <template>
   <Modal
     title="JSON数据"
     :footer="null"
-    :open="open"
+    :open="state.open"
     :destroy-on-close="true"
     wrap-class-name="v-code-modal"
     style="top: 20px"

src/components/FormDesign/src/components/VFormDesign/components/PreviewCode.vue

@@ -73,7 +73,13 @@ export default defineComponent({
       <CodeEditor ref="myEditor" :value="editorJson" :mode="MODE.JSON" />
     </div>
     <div class="copy-btn-box">
-      <a-button type="primary" class="copy-btn" data-clipboard-action="copy" :data-clipboard-text="editorJson" @click="handleCopyJson">
+      <a-button
+        type="primary"
+        class="copy-btn"
+        data-clipboard-action="copy"
+        :data-clipboard-text="editorJson"
+        @click="handleCopyJson"
+      >
         复制数据
       </a-button>
       <a-button type="primary" @click="handleExportJson">

src/components/FormDesign/src/components/VFormDesign/config/formItemPropsConfig.ts

@@ -183,7 +183,9 @@ export const baseFormItemProps: IBaseFormAttrs[] = [
     label: '控件-FormItem',
     component: 'Select',
     componentProps: {
-      options: baseComponents.concat(customComponents).map(item => ({ value: item.component, label: item.label })),
+      options: baseComponents
+        .concat(customComponents)
+        .map(item => ({ value: item.component, label: item.label })),
     },
   },
   {

src/components/FormDesign/src/components/VFormDesign/index.vue

@@ -1,9 +1,10 @@
 <script lang="ts" setup>
-import { type Ref, provide, ref } from 'vue'
+import type { Ref } from 'vue'
+import { provide, ref } from 'vue'
 import { Layout, LayoutContent, LayoutSider } from 'ant-design-vue'
-
 import { cloneDeep } from 'lodash-es'
-import { type UseRefHistoryReturn, useRefHistory } from '@vueuse/core'
+import type { UseRefHistoryReturn } from '@vueuse/core'
+import { useRefHistory } from '@vueuse/core'
 import VFormPreview from '../VFormPreview/index.vue'
 import VFormPreview2 from '../VFormPreview/useForm.vue'
 import type { IFormConfig, IVFormComponent, PropsTabKey } from '../../typings/v-form-component'
@@ -13,18 +14,14 @@ import type { IFormDesignMethods, IPropsPanel, IToolbarMethods } from '../../typ
 import CollapseItem from './modules/CollapseItem.vue'
 import FormComponentPanel from './modules/FormComponentPanel.vue'
 import JsonModal from './components/JsonModal.vue'
-
 import Toolbar from './modules/Toolbar.vue'
 import PropsPanel from './modules/PropsPanel.vue'
 import ImportJsonModal from './components/ImportJsonModal.vue'
 import CodeModal from './components/CodeModal.vue'
-
-import 'codemirror/mode/javascript/javascript'
-
 import { globalConfigState } from './config/formItemPropsConfig'
 import { useDesign } from '@/hooks/web/useDesign'
-
 import { CollapseContainer } from '@/components/Container/index'
+import 'codemirror/mode/javascript/javascript'
 
 defineProps({
   title: {
@@ -94,7 +91,9 @@ const historyReturn = useRefHistory(formConfig, {
  */
 function handleSetSelectItem(schema: IVFormComponent) {
   formConfig.value.currentItem = schema
-  handleChangePropsTabs(schema.key ? (formConfig.value.activeKey! === 1 ? 2 : formConfig.value.activeKey!) : 1)
+  handleChangePropsTabs(
+    schema.key ? (formConfig.value.activeKey! === 1 ? 2 : formConfig.value.activeKey!) : 1,
+  )
 }
 
 function setGlobalConfigState(formItem: IVFormComponent) {
@@ -154,7 +153,8 @@ function copyFormItem(formItem: IVFormComponent) {
  * @param item {IVFormComponent} 当前点击的组件
  * @param isCopy {boolean} 是否复制
  */
-function handleCopy(item: IVFormComponent = formConfig.value.currentItem as IVFormComponent, isCopy = true) {
+function handleCopy(item: IVFormComponent = formConfig.value.currentItem as IVFormComponent,
+  isCopy = true) {
   const key = formConfig.value.currentItem?.key
   /**
    * 遍历当表单项配置，如果是复制，则复制一份表单项，如果不是复制，则直接添加到表单项中
@@ -165,7 +165,9 @@ function handleCopy(item: IVFormComponent = formConfig.value.currentItem as IVFo
     schemas.some((formItem: IVFormComponent, index: number) => {
       if (formItem.key === key) {
         // 判断是不是复制
-        isCopy ? schemas.splice(index, 0, copyFormItem(formItem)) : schemas.splice(index + 1, 0, item)
+        isCopy
+          ? schemas.splice(index, 0, copyFormItem(formItem))
+          : schemas.splice(index + 1, 0, item)
         const event = {
           newIndex: index + 1,
         }
@@ -254,7 +256,7 @@ provide<IFormDesignMethods>('formDesignMethods', {
       collapsed-width="0"
       width="270"
       :zero-width-trigger-style="{
-        'margin-top': '-70px',
+        'margin-top': '-60px',
         'background-color': 'gray',
       }"
       breakpoint="md"
@@ -293,7 +295,11 @@ provide<IFormDesignMethods>('formDesignMethods', {
         @handle-open-code-modal="handleOpenModal(codeModal!)"
         @handle-clear-form-items="handleClearFormItems"
       />
-      <FormComponentPanel :current-item="formConfig.currentItem" :data="formConfig" @handle-set-select-item="handleSetSelectItem" />
+      <FormComponentPanel
+        :current-item="formConfig.currentItem"
+        :data="formConfig"
+        @handle-set-select-item="handleSetSelectItem"
+      />
     </LayoutContent>
     <LayoutSider
       :class="`right ${prefixCls}-sider`"
@@ -301,12 +307,15 @@ provide<IFormDesignMethods>('formDesignMethods', {
       :reverse-arrow="true"
       collapsed-width="0"
       width="270"
-      :zero-width-trigger-style="{ 'margin-top': '-70px', 'background-color': 'gray' }"
+      :zero-width-trigger-style="{ 'margin-top': '-60px', 'background-color': 'gray' }"
       breakpoint="lg"
     >
       <PropsPanel ref="propsPanel" :active-key="formConfig.activeKey">
         <template v-for="item of formConfig.schemas" #[`${item.component}Props`]="data">
-          <slot :name="`${item.component}Props`" v-bind="{ formItem: data, props: data.componentProps }" />
+          <slot
+            :name="`${item.component}Props`"
+            v-bind="{ formItem: data, props: data.componentProps }"
+          />
         </template>
       </PropsPanel>
     </LayoutSider>

src/components/FormDesign/src/components/VFormDesign/modules/CollapseItem.vue

@@ -2,24 +2,25 @@
 import { defineComponent, reactive } from 'vue'
 import draggable from 'vuedraggable'
 import type { IVFormComponent } from '../../../typings/v-form-component'
-
-// import { toRefs } from '@vueuse/core';
 import { Icon } from '@/components/Icon'
+import { useDesign } from '@/hooks/web/useDesign'
 
 export default defineComponent({
   name: 'CollapseItem',
   components: { Draggable: draggable, Icon },
   props: {
     list: {
-      type: [Array] as PropType<IVFormComponent[]>,
+      type: [Array],
       default: () => [],
     },
     handleListPush: {
-      type: Function as PropType<(item: IVFormComponent) => void>,
+      type: Function,
       default: null,
     },
   },
   setup(props, { emit }) {
+    const { prefixCls } = useDesign('form-design-collapse-item')
+
     const state = reactive({})
     const handleStart = (e: any, list1: IVFormComponent[]) => {
       emit('start', list1[e.oldIndex].component)
@@ -32,13 +33,13 @@ export default defineComponent({
     const cloneItem = (one) => {
       return props.handleListPush(one)
     }
-    return { state, handleStart, handleAdd, cloneItem }
+    return { prefixCls, state, handleStart, handleAdd, cloneItem }
   },
 })
 </script>
 
 <template>
-  <div>
+  <div :class="prefixCls">
     <Draggable
       tag="ul"
       :model-value="list"
@@ -54,7 +55,11 @@ export default defineComponent({
       @add="handleAdd"
     >
       <template #item="{ element, index }">
-        <li class="bs-box text-ellipsis" @dragstart="$emit('add-attrs', list, index)" @click="$emit('handle-list-push', element)">
+        <li
+          class="bs-box text-ellipsis"
+          @dragstart="$emit('add-attrs', list, index)"
+          @click="$emit('handle-list-push', element)"
+        >
           <!-- <svg v-if="element.icon.indexOf('icon-') > -1" class="icon" aria-hidden="true">
             <use :xlink:href="`#${element.icon}`" />
           </svg> -->
@@ -67,8 +72,11 @@ export default defineComponent({
 </template>
 
 <style lang="less" scoped>
+  @prefix-cls: ~'@{namespace}-form-design-collapse-item';
+
   @import url('../styles/variable.less');
 
+  .@{prefix-cls} {
     ul {
       display: flex;
       flex-wrap: wrap;
@@ -84,12 +92,16 @@ ul {
         margin: 2.7px;
         line-height: 20px;
         cursor: move;
-    border: 1px solid var(--border-color);
+        border: 1px solid @border-color;
         border-radius: 3px;
         transition: all 0.3s;
 
         &:hover {
           position: relative;
+          color: @primary-color;
+          border: 1px solid @primary-color;
+          // z-index: 1;
+          box-shadow: 0 2px 6px @primary-color;
         }
       }
     }
@@ -97,4 +109,5 @@ ul {
     svg {
       display: inline !important;
     }
+  }
 </style>

src/components/FormDesign/src/components/VFormDesign/modules/FormComponentPanel.vue

@@ -7,8 +7,8 @@ import draggable from 'vuedraggable'
 import { computed, defineComponent } from 'vue'
 import { cloneDeep } from 'lodash-es'
 import { Empty, Form } from 'ant-design-vue'
-import LayoutItem from '../components/LayoutItem.vue'
 import { useFormDesignState } from '../../../hooks/useFormDesignState'
+import LayoutItem from '../components/LayoutItem.vue'
 
 export default defineComponent({
   name: 'FormComponentPanel',
@@ -20,7 +20,7 @@ export default defineComponent({
   },
   emits: ['handleSetSelectItem'],
   setup(_, { emit }) {
-    const { formConfig } = useFormDesignState() as Recordable
+    const { formConfig } = useFormDesignState()
 
     /**
        * 拖拽完成事件
@@ -61,7 +61,11 @@ export default defineComponent({
 
 <template>
   <div class="form-panel v-form-container">
-    <Empty v-show="formConfig.schemas.length === 0" class="empty-text" description="从左侧选择控件添加" />
+    <Empty
+      v-show="formConfig.schemas.length === 0"
+      class="empty-text"
+      description="从左侧选择控件添加"
+    />
     <Form v-bind="formConfig">
       <div class="draggable-box">
         <Draggable
@@ -77,7 +81,12 @@ export default defineComponent({
           @start="handleDragStart"
         >
           <template #item="{ element }">
-            <LayoutItem class="drag-move" :schema="element" :data="formConfig" :current-item="formConfig.currentItem || {}" />
+            <LayoutItem
+              class="drag-move"
+              :schema="element"
+              :data="formConfig"
+              :current-item="formConfig.currentItem || {}"
+            />
           </template>
         </Draggable>
       </div>
@@ -124,6 +133,7 @@ export default defineComponent({
 
     .draggable-box {
       height: calc(100vh - 200px);
+      // width: 100%;
       overflow: auto;
 
       .drag-move {
@@ -132,8 +142,6 @@ export default defineComponent({
       }
 
       .list-main {
-      // height: 100%;
-      // overflow: auto;
         // 列表动画
         .list-enter-active {
           transition: all 0.5s;

src/components/FormDesign/src/components/VFormDesign/modules/PropsPanel.vue

@@ -28,7 +28,9 @@ export default defineComponent({
   setup() {
     const { formConfig } = useFormDesignState()
     const slotProps = computed(() => {
-      return customComponents.find(item => item.component === formConfig.value.currentItem?.component)
+      return customComponents.find(
+        item => item.component === formConfig.value.currentItem?.component,
+      )
     })
     return { formConfig, customComponents, slotProps }
   },

src/components/FormDesign/src/components/VFormDesign/modules/Toolbar.vue

@@ -6,7 +6,7 @@ import { defineComponent, inject, reactive, toRefs } from 'vue'
 import type { UseRefHistoryReturn } from '@vueuse/core'
 import { Divider, Tooltip } from 'ant-design-vue'
 import type { IFormConfig } from '../../../typings/v-form-component'
-import Icon from '@/components/Icon/index'
+import { Icon } from '@/components/Icon'
 
 interface IToolbarsConfig {
   type: string
@@ -109,11 +109,11 @@ export default defineComponent({
     justify-content: space-between;
     height: @operating-area-height;
     padding: 0 12px;
-  padding-left: 30px;
+    padding-left: 40px;
     font-size: 16px;
     line-height: @operating-area-height;
     text-align: left;
-  border-bottom: 2px solid var(--border-color);
+    border-bottom: 2px solid @border-color;
 
     a {
       margin: 0 5px;
@@ -124,6 +124,10 @@ export default defineComponent({
         color: #ccc;
       }
 
+      &:hover {
+        color: @primary-color;
+      }
+
       > span {
         padding-left: 2px;
         font-size: 14px;

src/components/FormDesign/src/components/VFormDesign/styles/drag.less

@@ -2,7 +2,6 @@
   height: 100%;
   overflow: auto;
 
-  /* stylelint-disable-next-line selector-pseudo-class-no-unknown */
   :deep(.list-main) {
     position: relative;
     padding: 5px;
@@ -17,12 +16,13 @@
       overflow: hidden;
 
       &::before {
+        content: '';
         position: absolute;
         top: 0;
         right: 0;
         width: 100%;
         height: 5px;
-        content: "";
+        background-color: @primary-color;
       }
     }
 
@@ -34,19 +34,25 @@
       overflow: hidden;
       transition: all 0.3s;
 
+      &:hover {
+        background-color: @primary-hover-bg-color;
+      }
+
       // 选择时 start
       &::before {
+        content: '';
         position: absolute;
         top: 0;
         right: -100%;
         width: 100%;
         height: 5px;
-        content: "";
         transition: all 0.3s;
+        background-color: @primary-color;
       }
 
       &.active {
         outline-offset: 0;
+        background-color: @primary-hover-bg-color;
 
         &::before {
           right: 0;
@@ -60,18 +66,18 @@
         word-wrap: break-word;
 
         &::before {
+          content: '';
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
-          content: "";
         }
 
         .ant-form-item {
-          padding-bottom: 6px;
           // 修改ant form-item的margin为padding
           margin: 0;
+          padding-bottom: 6px;
         }
       }
 
@@ -80,8 +86,9 @@
         position: absolute;
         right: 5px;
         bottom: 2px;
-        font-size: 14px;
         // z-index: 999;
+        color: @primary-color;
+        font-size: 14px;
       }
 
       .copy,
@@ -90,15 +97,15 @@
         top: 0;
         width: 30px;
         height: 30px;
-        line-height: 30px;
-        color: #fff;
-        text-align: center;
         // z-index: 989;
         transition: all 0.3s;
+        color: #fff;
+        line-height: 30px;
+        text-align: center;
 
         &.unactivated {
-          pointer-events: none;
           opacity: 0 !important;
+          pointer-events: none;
         }
 
         &.active {
@@ -109,10 +116,12 @@
       .copy {
         right: 30px;
         border-radius: 0 0 0 8px;
+        background-color: @primary-color;
       }
 
       .delete {
         right: 0;
+        background-color: @primary-color;
       }
     }
 
@@ -122,17 +131,17 @@
       width: 100%;
       padding: 5px;
       overflow: hidden;
-      background-color: @layout-background-color;
       transition: all 0.3s;
+      background-color: @layout-background-color;
 
       .form-item-box {
         position: relative;
         box-sizing: border-box;
 
         .ant-form-item {
-          padding-bottom: 15px;
           // 修改ant form-item的margin为padding
           margin: 0;
+          padding-bottom: 15px;
         }
       }
 
@@ -157,19 +166,19 @@
 
       // 选择时 start
       &::before {
+        content: '';
         position: absolute;
         top: 0;
         right: -100%;
         width: 100%;
         height: 5px;
-        content: "";
-        background: transparent;
         transition: all 0.3s;
+        background: transparent;
       }
 
       &.active {
-        background-color: @layout-hover-bg-color;
         outline-offset: 0;
+        background-color: @layout-hover-bg-color;
 
         &::before {
           right: 0;
@@ -184,15 +193,15 @@
           top: 0;
           width: 30px;
           height: 30px;
-          line-height: 30px;
-          color: #fff;
-          text-align: center;
           // z-index: 989;
           transition: all 0.3s;
+          color: #fff;
+          line-height: 30px;
+          text-align: center;
 
           &.unactivated {
-            pointer-events: none;
             opacity: 0 !important;
+            pointer-events: none;
           }
 
           &.active {
@@ -202,8 +211,8 @@
 
         > .copy {
           right: 30px;
-          background-color: @layout-color;
           border-radius: 0 0 0 8px;
+          background-color: @layout-color;
         }
 
         > .delete {

src/components/FormDesign/src/components/VFormItem/index.vue

@@ -1,32 +1,19 @@
 <!--
  * @Description:
 -->
-<script lang="ts">
+<script lang="ts" setup>
 import type { PropType } from 'vue'
-import { computed, defineComponent, reactive, toRefs, unref } from 'vue'
+import { computed, unref } from 'vue'
 import { asyncComputed } from '@vueuse/core'
 import { omit } from 'lodash-es'
 import { Col, Divider, FormItem, Tooltip } from 'ant-design-vue'
 import { componentMap } from '../../core/formItemConfig'
 import type { IFormConfig, IVFormComponent } from '../../typings/v-form-component'
 import { handleAsyncOptions } from '../../utils'
-
-// import FormItem from '/@/components/Form/src/components/FormItem.vue';
-
 import { useFormModelState } from '../../hooks/useFormDesignState'
 import { Icon } from '@/components/Icon'
 
-export default defineComponent({
+const props = defineProps({
-  name: 'VFormItem',
-  components: {
-    Tooltip,
-    Icon,
-    FormItem,
-    Divider,
-    Col,
-  },
-
-  props: {
   formData: {
     type: Object,
     default: () => ({}),
@@ -39,13 +26,10 @@ export default defineComponent({
     type: Object as PropType<IFormConfig>,
     required: true,
   },
-  },
-  emits: ['update:form-data', 'change'],
-  setup(props, { emit }) {
-    const state = reactive({
-      componentMap,
 })
 
+const emit = defineEmits(['update:form-data', 'change'])
+
 const { formModel: formData1, setFormModel } = useFormModelState()
 const colPropsComputed = computed(() => {
   const { colProps = {} } = props.schema
@@ -71,7 +55,10 @@ export default defineComponent({
       : formConfig.wrapperCol
     : {})
 
-      const style = formConfig.layout === 'horizontal' && formConfig.labelLayout === 'flex' ? { display: 'flex' } : {}
+  const style
+          = formConfig.layout === 'horizontal' && formConfig.labelLayout === 'flex'
+            ? { display: 'flex' }
+            : {}
 
   /**
        * 将字符串正则格式化成正则表达式
@@ -100,12 +87,12 @@ export default defineComponent({
     newConfig.rules = rules
 
   return newConfig
-    }) as Recordable
+}) as Recordable<any>
 
 const componentItem = computed(() => componentMap.get(props.schema.component as string))
 
 // console.log('component change:', props.schema.component, componentItem.value);
-    const handleClick = (schema: IVFormComponent) => {
+function handleClick(schema: IVFormComponent) {
   if (schema.component === 'Button' && schema.componentProps?.handle)
     emit(schema.componentProps?.handle)
 }
@@ -128,10 +115,12 @@ export default defineComponent({
      * 处理同步属性
      */
 const cmpProps = computed(() => {
-      const isCheck = props.schema && ['Switch', 'Checkbox', 'Radio'].includes(props.schema.component)
+  const isCheck
+          = props.schema && ['Switch', 'Checkbox', 'Radio'].includes(props.schema.component)
   const { field } = props.schema
 
-      let { disabled, ...attrs } = omit(props.schema.componentProps, ['options', 'treeData']) ?? {}
+  let { disabled, ...attrs }
+          = omit(props.schema.componentProps, ['options', 'treeData']) ?? {}
 
   disabled = props.formConfig.disabled || disabled
 
@@ -149,18 +138,6 @@ export default defineComponent({
   setFormModel(props.schema.field!, value)
   emit('change', value)
 }
-    return {
-      ...toRefs(state),
-      componentItem,
-      formItemProps,
-      handleClick,
-      asyncProps,
-      cmpProps,
-      handleChange,
-      colPropsComputed,
-    }
-  },
-})
 </script>
 
 <template>
@@ -176,8 +153,14 @@ export default defineComponent({
         </Tooltip>
       </template>
 
-      <slot v-if="schema.componentProps && schema.componentProps?.slotName" :name="schema.componentProps.slotName" v-bind="schema" />
+      <slot
-      <Divider v-else-if="schema.component === 'Divider' && schema.label && !formItemProps.hiddenLabel">
+        v-if="schema.componentProps && schema.componentProps?.slotName"
+        :name="schema.componentProps.slotName"
+        v-bind="schema"
+      />
+      <Divider
+        v-else-if="schema.component === 'Divider' && schema.label && !formItemProps.hiddenLabel"
+      >
         {{ schema.label }}
       </Divider>
       <!-- 部分控件需要一个空div -->

src/components/FormDesign/src/components/VFormItem/vFormItem.vue

@@ -11,19 +11,14 @@
   >
 -->
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent, unref } from 'vue'
+import { computed, unref } from 'vue'
 import type { IFormConfig, IVFormComponent } from '../../typings/v-form-component'
 import type { FormProps, FormSchema } from '@/components/Form'
 
-import FormItem from '/@/components/Form/src/components/FormItem.vue'
+import FormItem from '@/components/Form/src/components/FormItem.vue'
 
-export default defineComponent({
+const props = defineProps({
-  name: 'VFormItem',
-  components: {
-    FormItem,
-  },
-  props: {
   formData: {
     type: Object,
     default: () => ({}),
@@ -36,8 +31,8 @@ export default defineComponent({
     type: Object as PropType<IFormConfig>,
     required: true,
   },
-  },
+})
-  setup(props) {
+
 const schema = computed(() => {
   const schema: FormSchema = {
     ...unref(props.schema),
@@ -50,20 +45,12 @@ export default defineComponent({
 const getProps = computed((): FormProps => {
   return { ...unref(props.formConfig) } as FormProps
 })
-    return {
-      schemaNew: schema,
-      getProps,
-    }
-  },
-})
 </script>
 
 <template>
-  <FormItem :schema="schemaNew" :form-props="getProps">
+  <FormItem :schema="schema" :form-props="getProps">
     <template v-for="item in Object.keys($slots)" #[item]="data">
       <slot :name="item" v-bind="data || {}" />
     </template>
   </FormItem>
 </template>
-
-<style lang="less" scoped></style>

src/components/FormDesign/src/components/VFormPreview/index.vue

@@ -1,8 +1,8 @@
 <!--
  * @Description: 渲染组件，无法使用Vben的组件
 -->
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, reactive, ref, toRefs } from 'vue'
+import { reactive, ref } from 'vue'
 import { Modal } from 'ant-design-vue'
 import type { IFormConfig } from '../../typings/v-form-component'
 import type { IAnyObject } from '../../typings/base-type'
@@ -12,14 +12,6 @@ import type { IVFormMethods } from '../../hooks/useVFormMethods'
 import JsonModal from '../VFormDesign/components/JsonModal.vue'
 import type { IToolbarMethods } from '../../typings/form-type'
 
-export default defineComponent({
-  name: 'VFormPreview',
-  components: {
-    JsonModal,
-    VFormCreate,
-    Modal,
-  },
-  setup() {
 const jsonModal = ref<IToolbarMethods | null>(null)
 const state = reactive<{
   formModel: IAnyObject
@@ -37,7 +29,7 @@ export default defineComponent({
      * 显示Json数据弹框
      * @param jsonData
      */
-    const showModal = (jsonData: IFormConfig) => {
+function showModal(jsonData: IFormConfig) {
   // console.log('showModal-', jsonData);
   formatRules(jsonData.schemas)
   state.formConfig = jsonData
@@ -48,38 +40,29 @@ export default defineComponent({
      * 获取表单数据
      * @return {Promise<void>}
      */
-    const handleCancel = () => {
+function handleCancel() {
   state.open = false
-      state.formModel = {}
+  onCancel()
 }
-    const handleGetData = async () => {
+async function handleGetData() {
   const _data = await state.fApi.submit?.()
   jsonModal.value?.showModal?.(_data)
 }
 
-    const onSubmit = (_data: IAnyObject) => {
+function onSubmit(_data: IAnyObject) {
   //
 }
-    const onCancel = () => {
+function onCancel() {
   state.formModel = {}
 }
-    return {
+
-      handleGetData,
+defineExpose({ showModal, onCancel })
-      handleCancel,
-      ...toRefs(state),
-      showModal,
-      jsonModal,
-      onSubmit,
-      onCancel,
-    }
-  },
-})
 </script>
 
 <template>
   <Modal
     title="预览(支持布局)"
-    :open="open"
+    :open="state.open"
     ok-text="获取数据"
     cancel-text="关闭"
     style="top: 20px"
@@ -88,7 +71,12 @@ export default defineComponent({
     @ok="handleGetData"
     @cancel="handleCancel"
   >
-    <VFormCreate v-model:fApi="fApi" v-model:formModel="formModel" :form-config="formConfig" @submit="onSubmit">
+    <VFormCreate
+      v-model:fApi="state.fApi"
+      v-model:formModel="state.formModel"
+      :form-config="state.formConfig"
+      @submit="onSubmit"
+    >
       <template #slotName="{ formModel, field }">
         <a-input v-model:value="formModel[field]" placeholder="我是插槽传递的输入框" />
       </template>

src/components/FormDesign/src/hooks/useFormInstanceMethods.ts

@@ -1,11 +1,16 @@
-import { getCurrentInstance, toRaw } from 'vue'
 import type { Ref, SetupContext } from 'vue'
+import { getCurrentInstance, toRaw } from 'vue'
 import { cloneDeep, forOwn, isFunction } from 'lodash-es'
 import { Form } from 'ant-design-vue'
 import type { AForm, IVFormComponent } from '../typings/v-form-component'
 import type { IAnyObject } from '../typings/base-type'
 
-export function useFormInstanceMethods(props: IAnyObject, formdata, context: Partial<SetupContext>, _formInstance: Ref<AForm | null>) {
+export function useFormInstanceMethods(
+  props: IAnyObject,
+  formdata,
+  context: Partial<SetupContext>,
+  _formInstance: Ref<AForm | null>,
+) {
   /**
    * 绑定props和on中的上下文为parent
    */
@@ -13,8 +18,9 @@ export function useFormInstanceMethods(props: IAnyObject, formdata, context: Par
     const instance = getCurrentInstance()
     const vm = instance?.parent
     if (!vm)
-      return
+      return;
-    ;(props.formConfig.schemas as IVFormComponent[]).forEach((item) => {
+
+    (props.formConfig.schemas as IVFormComponent[]).forEach((item) => {
       // 绑定 props 中的上下文
       forOwn(item.componentProps, (value: any, key) => {
         if (isFunction(value))
@@ -35,7 +41,7 @@ export function useFormInstanceMethods(props: IAnyObject, formdata, context: Par
 
   const { resetFields, validate, clearValidate, validateField } = useForm(formdata, [])
 
-  const submit = () => {
+  const submit = async () => {
     // const _result = await validate();
 
     const data = cloneDeep(toRaw(formdata.value))

src/components/FormDesign/src/hooks/useVFormMethods.ts

@@ -13,7 +13,11 @@ export interface IProps {
   formModel: IAnyObject
 }
 
-type ISet = <T extends keyof IVFormComponent>(field: string, key: T, value: IVFormComponent[T]) => void
+type ISet = <T extends keyof IVFormComponent>(
+  field: string,
+  key: T,
+  value: IVFormComponent[T],
+) => void
 // 获取当前field绑定的表单项
 type IGet = (field: string) => IVFormComponent | undefined
 // 获取field在formData中的值
@@ -59,7 +63,8 @@ export function useVFormMethods(
    * @param {string} field
    * @return {IVFormComponent | undefined}
    */
-  const get: IGet = field => findFormItem(props.formConfig.schemas, item => item.field === field)
+  const get: IGet = field =>
+    findFormItem(props.formConfig.schemas, item => item.field === field)
 
   /**
    * 根据表单field设置表单项字段值
@@ -73,6 +78,20 @@ export function useVFormMethods(
       formItem[key] = value
   }
 
+  /**
+   * 设置表单项的props
+   * @param {string} field 需要设置的表单项field
+   * @param {string} key 需要设置的key
+   * @param value 需要设置的值
+   */
+  const setProps: ISetProps = (field, key, value) => {
+    const formItem = get(field)
+    if (formItem?.componentProps) {
+      ['options', 'treeData'].includes(key) && setValue(field, undefined)
+
+      formItem.componentProps[key] = value
+    }
+  }
   /**
    * 设置字段的值，设置后触发校验
    * @param {string} field  需要设置的字段
@@ -92,20 +111,6 @@ export function useVFormMethods(
       })
     }
   }
-  /**
-   * 设置表单项的props
-   * @param {string} field 需要设置的表单项field
-   * @param {string} key 需要设置的key
-   * @param value 需要设置的值
-   */
-  const setProps: ISetProps = (field, key, value) => {
-    const formItem = get(field)
-    if (formItem?.componentProps) {
-      ;['options', 'treeData'].includes(key) && setValue(field, undefined)
-
-      formItem.componentProps[key] = value
-    }
-  }
   /**
    * 设置表单配置方法
    * @param {string} key
@@ -143,7 +148,9 @@ export function useVFormMethods(
    * @param {string | undefined} field
    */
   const disable: IDisable = (field) => {
-    typeof field === 'string' ? setProps(field, 'disabled', true) : setFormConfig('disabled', field !== false)
+    typeof field === 'string'
+      ? setProps(field, 'disabled', true)
+      : setFormConfig('disabled', field !== false)
   }
 
   /**

src/components/FormDesign/src/typings/form-type.ts

@@ -44,5 +44,9 @@ export interface IFormDesignMethods {
   handleAddAttrs(schemas: IVFormComponent[], index: number): void
   setFormConfig(config: IFormConfig): void
   // 添加到表单中之前触发
-  handleBeforeColAdd(event: { newIndex: string }, schemas: IVFormComponent[], isCopy?: boolean): void
+  handleBeforeColAdd(
+    event: { newIndex: string },
+    schemas: IVFormComponent[],
+    isCopy?: boolean,
+  ): void
 }

src/components/FormDesign/src/typings/v-form-component.ts

@@ -177,7 +177,12 @@ export interface AForm {
    * validate one or several form items
    * @type Function
    */
-  validateField: (name: string, value: any, rules: Record<string, unknown>[], option?: validateOptions) => Promise<RuleError[]>
+  validateField: (
+    name: string,
+    value: any,
+    rules: Record<string, unknown>[],
+    option?: validateOptions,
+  ) => Promise<RuleError[]>
   /**
    * reset all the fields and remove validation result
    */

src/components/FormDesign/src/utils/index.ts

@@ -1,6 +1,5 @@
 // import { VueConstructor } from 'vue';
 import { cloneDeep, isArray, isFunction, isNumber, uniqueId } from 'lodash-es'
-import type { Ref } from 'vue'
 import type { IFormConfig, IVFormComponent, IValidationRule } from '../typings/v-form-component'
 
 // import { del } from '@vue/composition-api';
@@ -40,7 +39,10 @@ export function generateKey(formItem?: IVFormComponent): string | boolean {
  * @param value {number | ((item: T, index: number, array: Array<T>) => boolean}
  * @returns {T} 返回删除的数组项
  */
-export function remove<T>(array: Array<T>, value: number | ((item: T, index: number, array: Array<T>) => boolean)): T | undefined {
+export function remove<T>(
+  array: Array<T>,
+  value: number | ((item: T, index: number, array: Array<T>) => boolean),
+): T | undefined {
   let removeVal: Array<T | undefined> = []
   if (!isArray(array))
     return undefined
@@ -107,10 +109,10 @@ export function formItemsForEach(array: IVFormComponent[], cb: (item: IVFormComp
 /**
  * 查找表单项
  */
-export const findFormItem: (schemas: IVFormComponent[], cb: (formItem: IVFormComponent) => boolean) => IVFormComponent | undefined = (
+export const findFormItem: (
-  schemas,
+  schemas: IVFormComponent[],
-  cb,
+  cb: (formItem: IVFormComponent) => boolean,
-) => {
+) => IVFormComponent | undefined = (schemas, cb) => {
   let res
   const traverse = (schemas: IVFormComponent[]): boolean => {
     return schemas.some((formItem: IVFormComponent) => {
@@ -203,45 +205,3 @@ export function runCode<T>(code: any): T {
     return code
   }
 }
-
-/**
- * 针对 https://github.com/xaboy/form-create-designer 封装的工具类
- */
-
-// 编码表单 Conf
-export function encodeConf(designerRef: Ref<Recordable>) {
-  return JSON.stringify(designerRef.value.getOption())
-}
-
-// 编码表单 Fields
-export function encodeFields(designerRef: Ref<Recordable>) {
-  const rule = designerRef.value.getRule()
-  const fields: string[] = []
-  rule.forEach((item) => {
-    fields.push(JSON.stringify(item))
-  })
-  return fields
-}
-
-// 解码表单 Fields
-export function decodeFields(fields: string[]) {
-  const rule: object[] = []
-  fields.forEach((item) => {
-    rule.push(JSON.parse(item))
-  })
-  return rule
-}
-
-// 设置表单的 Conf 和 Fields
-export function setConfAndFields(designerRef: Ref<Recordable>, conf: string, fields: string[]) {
-  designerRef.value.setOption(JSON.parse(conf))
-  designerRef.value.setRule(decodeFields(fields))
-}
-
-// 设置表单的 Conf 和 Fields
-export function setConfAndFields2(detailPreview: Ref<Recordable>, conf: string, fields: string[], value?: object) {
-  detailPreview.value.option = JSON.parse(conf)
-  detailPreview.value.rule = decodeFields(fields)
-  if (value)
-    detailPreview.value.value = value
-}