因为这个项目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);