使用项目组件对 form-create-designer 进行增强

src/views/bpm/form/editor/index.vue

@@ -45,6 +45,7 @@ import * as FormApi from '@/api/bpm/form'
 import FcDesigner from '@form-create/designer'
 import { encodeConf, encodeFields, setConfAndFields } from '@/utils/formCreate'
 import { useTagsViewStore } from '@/store/modules/tagsView'
+import { useFormCreateDesigner } from '@/components/FormCreate'
 
 defineOptions({ name: 'BpmFormEditor' })
 
@@ -55,6 +56,7 @@ const { query } = useRoute() // 路由信息
 const { delView } = useTagsViewStore() // 视图操作
 
 const designer = ref() // 表单设计器
+useFormCreateDesigner(designer) // 表单设计器增强
 const dialogVisible = ref(false) // 弹窗是否展示
 const formLoading = ref(false) // 表单的加载中：提交的按钮禁用
 const formData = ref({

src/views/bpm/form/index.vue

@@ -88,7 +88,7 @@
 
   <!-- 表单详情的弹窗 -->
   <Dialog v-model="detailVisible" title="表单详情" width="800">
-    <my-form-create :option="detailData.option" :rule="detailData.rule" />
+    <form-create :option="detailData.option" :rule="detailData.rule" />
   </Dialog>
 </template>
 

src/views/bpm/processInstance/detail/index.vue

@@ -24,15 +24,15 @@
             {{ processInstance?.startUser.nickname }}
             <el-tag size="small" type="info">{{ processInstance?.startUser.deptName }}</el-tag>
           </el-form-item>
-          <el-card class="mb-15px !-mt-10px" v-if="runningTasks[index].formId > 0">
+          <el-card v-if="runningTasks[index].formId > 0" class="mb-15px !-mt-10px">
             <template #header>
               <span class="el-icon-picture-outline">
                 填写表单【{{ runningTasks[index]?.formName }}】
               </span>
             </template>
             <form-create
-              v-model:api="approveFormFApis[index]"
               v-model="approveForms[index].value"
+              v-model:api="approveFormFApis[index]"
               :option="approveForms[index].option"
               :rule="approveForms[index].rule"
             />
@@ -91,7 +91,7 @@
       </template>
       <!-- 情况一：流程表单 -->
       <el-col v-if="processInstance?.processDefinition?.formType === 10" :offset="6" :span="16">
-        <my-form-create
+        <form-create
           v-model="detailForm.value"
           v-model:api="fApi"
           :option="detailForm.option"

src/views/infra/build/index.vue

@@ -30,8 +30,7 @@
   </Dialog>
 </template>
 <script lang="ts" setup>
-defineOptions({ name: 'InfraBuild' })
-import FcDesigner from '@form-create/designer'
+import { useFormCreateDesigner } from '@/components/FormCreate'
 import { useClipboard } from '@vueuse/core'
 import { isString } from '@/utils/is'
 
@@ -41,6 +40,8 @@ import xml from 'highlight.js/lib/languages/java'
 import json from 'highlight.js/lib/languages/json'
 import formCreate from '@form-create/element-ui'
 
+defineOptions({ name: 'InfraBuild' })
+
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息
 
@@ -49,7 +50,7 @@ const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formType = ref(-1) // 表单的类型：0 - 生成 JSON；1 - 生成 Options；2 - 生成组件
 const formData = ref('') // 表单数据
-
+useFormCreateDesigner(designer) // 表单设计器增强
 /** 打开弹窗 */
 const openModel = (title: string) => {
   dialogVisible.value = true
@@ -81,12 +82,12 @@ const makeTemplate = () => {
   const rule = designer.value.getRule()
   const opt = designer.value.getOption()
   return `<template>
-    <my-form-create
+    <form-create
       v-model:api="fApi"
       :rule="rule"
       :option="option"
       @submit="onSubmit"
-    ></my-form-create>
+    ></form-create>
   </template>
   <script setup lang=ts>
     const faps = ref(null)