因为这个项目license问题无法开源，更多技术支持与服务请加入我的知识星球。

接上一节

6、增加一个types.ts 类型

export interface FormForm {
  id: number | string | undefined;
  formName: string;
  formContent?: string;
  remark: string;
}

7、api增加一个getForm

export const getForm = (formId) => defHttp.get({ url: `/flowable/form/${formId}`});

8、SysFormList页面增加VForm3设计器的页面

<!-- 流程表单设计器对话框 -->
    <el-dialog :title="designer.title" v-model="designer.open" fullscreen>
      <div id="form-designer">
        <v-form-designer ref="vfDesignerRef" :resetFormJson="true" :designer-config="designerConfig">
          <!-- 自定义按钮插槽 -->
          <template #customToolButtons>
            <el-button link type="primary" icon="Finished" @click="dialog.open = true">保存</el-button>
          </template>
        </v-form-designer>
      </div>
    </el-dialog>
    <!-- 预览表单对话框 -->
    <el-dialog :title="render.title" v-model="render.open" width="60%" append-to-body>
      <v-form-render :form-json="{}" :form-data="{}" ref="vfRenderRef" />
    </el-dialog>
    
    <!-- 添加或修改流程表单对话框 -->
    <el-dialog :title="dialog.title" v-model="dialog.open" width="600px" append-to-body>
      <el-form ref="formFormRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="表单名称" prop="formName">
          <el-input v-model="form.formName" placeholder="请输入表单名称" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

9、引入表单设计器需要的组件与变量

import { ElForm } from 'element-plus';
  import 'element-plus/dist/index.css'
  import 'element-plus/theme-chalk/display.css'
  import '@/lib/vform/designer.style.css';
  import { useMessage } from '/@/hooks/web/useMessage';
  
  const { createMessage, createConfirm } = useMessage();

  const formRef = ref();
  const queryParam = reactive<any>({});
  const toggleSearchStatus = ref<boolean>(false);
  const registerModal = ref();
  const userStore = useUserStore();
  
  const ids = ref<Array<number | string>>([]);
  const vfDesignerRef = ref(null);
  const vfRenderRef = ref(null);
  const formFormRef = ref(ElForm);
  const queryFormRef = ref(ElForm);
  
  const designerConfig = reactive({
    externalLink: true,
    toolbarMaxWidth: 510,
    // languageMenu: true,
    //externalLink: false,
    //formTemplates: false,
    //eventCollapse: false,
    //clearDesignerButton: false,
    //previewFormButton: false,
  })
  const designer = reactive<DialogOption>({
    open: false,
    title: ''
  })
  const render = reactive<DialogOption>({
    open: false,
    title: ''
  })
  const dialog = reactive<DialogOption>({
    open: false,
    title: ''
  });
  const initFormData: FormForm = {
    id: undefined,
    formName: '',
    formContent: '',
    remark: ''
  }
  const data = reactive<FormForm>({
    form: {...initFormData},
    rules: {
      formName: [{ required: true, message: "表单名称不能为空", trigger: "blur" }]
    }
  });
  
  const {form, rules } = toRefs<FormForm>(data);