表单设计器

du

6 天以前 da883ac7a3de1db2af3adee1e4da3583f8824c18

表单设计器

 ruoyi-ui/apps/web-antd/package.json

@@ -27,6 +27,8 @@
  },
  "dependencies": {
    "@ant-design/icons-vue": "^7.0.1",
    "@form-create/designer": "^3.2.11",
    "@form-create/element-ui": "^3.2.25",
    "@tinymce/tinymce-vue": "^6.0.1",
    "@vben/access": "workspace:*",
    "@vben/common-ui": "workspace:*",
@@ -48,6 +50,7 @@
    "crypto-js": "^4.2.0",
    "dayjs": "catalog:",
    "echarts": "^5.5.1",
    "element-plus": "^2.10.2",
    "jsencrypt": "^3.3.2",
    "lodash-es": "^4.17.21",
    "pinia": "catalog:",

 ruoyi-ui/apps/web-antd/src/bootstrap.ts

@@ -9,14 +9,16 @@
import '@vben/styles/antd';

import { useTitle } from '@vueuse/core';

import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css'; // æ ·å¼æ–‡ä»¶
import { setupGlobalComponent } from '#/components/global';
import { $t, setupI18n } from '#/locales';

import { initComponentAdapter } from './adapter/component';
import App from './app.vue';
import { router } from './router';

import formCreate from '@form-create/element-ui';
import FcDesigner from '@form-create/designer';
async function bootstrap(namespace: string) {
  // åˆå§‹åŒ–组件适配器
  await initComponentAdapter();
@@ -57,7 +59,9 @@

  // é…ç½®Motion插件
  app.use(MotionPlugin);

  app.use(ElementPlus);
  app.use(formCreate);
  app.use(FcDesigner);
  // åŠ¨æ€æ›´æ–°æ ‡é¢˜
  watchEffect(() => {
    if (preferences.app.dynamicTitle) {

 ruoyi-ui/apps/web-antd/src/views/tool/dynamicForm/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,19 @@
<template>
  <fc-designer ref="designer" />
</template>

<script setup>
import { ref } from 'vue';

const designer = ref();

// èŽ·å–表单 JSON é…ç½®
const getJson = () => {
  console.log(designer.value.getJson());
};

// åŠ è½½å·²æœ‰é…ç½®
const loadJson = (json) => {
  designer.value.setJson(json);
};
</script>