From 0fe0c7083b705e65f35a788ee5fe2ba904cb7aed Mon Sep 17 00:00:00 2001
From: bleachtred <bleachtred@163.com>
Date: Thu, 14 Sep 2023 17:37:35 +0800
Subject: [PATCH] =?UTF-8?q?fix=20=E4=BF=AE=E5=A4=8Dvform3=E8=A1=A8?=
 =?UTF-8?q?=E5=8D=95=E6=9E=84=E5=BB=BA=E9=A1=B5=E9=9D=A2=E7=A9=BA=E7=99=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main.ts                    |  6 ++++
 src/views/tool/build/index.vue | 50 +++++++++++++++++++++++++++++++++-
 2 files changed, 55 insertions(+), 1 deletion(-)

diff --git a/src/main.ts b/src/main.ts
index 0ad939a6..b725e745 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -4,6 +4,10 @@ import 'uno.css';
 import '@/assets/styles/index.scss';
 import 'element-plus/theme-chalk/dark/css-vars.css';
 
+// 表单设计页面样式
+import 'vform3-builds/dist/designer.style.css';
+import VForm3 from 'vform3-builds';
+import ElementPlus from 'element-plus'
 // App、router、store
 import App from './App.vue';
 import store from './store';
@@ -51,6 +55,8 @@ app.use(router);
 app.use(store);
 app.use(i18n);
 app.use(plugins);
+app.use(VForm3);
+app.use(ElementPlus);
 // 自定义指令
 directive(app);
 
diff --git a/src/views/tool/build/index.vue b/src/views/tool/build/index.vue
index 45f54575..6e9703d2 100644
--- a/src/views/tool/build/index.vue
+++ b/src/views/tool/build/index.vue
@@ -1,3 +1,51 @@
 <template>
-  <div>表单构建 <svg-icon icon-class="build" /></div>
+  <div style="margin-left:-200px">
+    <!-- 表单设计 -->
+    <v-form-designer class="vform3-designer-container" 
+    ref="vfDesigner" 
+    :designer-config="designerConfig"
+    >
+      <template #customToolButtons>
+        <el-button link type="primary" icon="CircleCheck" @click="saveFormJson">保存</el-button>
+      </template>
+    </v-form-designer>
+  </div>
 </template>
+
+<script setup>
+const { proxy } = getCurrentInstance()
+// 设计表单组件 ref
+const vfDesigner = ref(null)
+
+// 界面显示设置
+const designerConfig = reactive({
+  exportJsonButton: true,
+  importJsonButton: true,
+  clearDesignerButton: true,
+  exportCodeButton: true,
+  generateSFCButton: true,
+  toolbarMaxWidth: 610 // 顶部按钮整体宽度，在 customToolButtons slot 中添加按钮时要加长宽度
+})
+
+// 点击保存按钮
+const saveFormJson = () => {
+  let formJson = vfDesigner.value.getFormJson()
+  if(formJson.widgetList.length == 0){
+    proxy?.$modal.msgError('请从左侧列表中选择一个组件！')
+    return
+  }
+  // 自行保存
+  console.log(JSON.stringify(formJson))
+}
+</script>
+
+<style lang="scss">
+.vform3-designer-container{
+  .main-header{
+    display: none !important;
+  }
+  .field-wrapper .drag-handler{
+        top: -20px;
+  }
+}
+</style>
-- 
Gitee