Pre Merge pull request !41 from Bleachtred/ts

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);
 

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>