修改表单构建

src/views/tool/draggable/exportConfig/index.js

@@ -0,0 +1,10 @@
+import { addCode, combined } from '@/views/tool/draggable/exportConfig/template.js';
+
+const exportConfig = (e) => {
+  console.log(e);
+};
+
+
+export {
+  exportConfig
+};

src/views/tool/draggable/exportConfig/input.js

@@ -0,0 +1,21 @@
+import {
+  addVariables, addFunction
+} from './script.js';
+
+const getInput = (data) => {
+  let code = ``;
+  let variablesCode = ``;
+  let functionCode = ``;
+  let isForm = data.isForm || false;
+  let inputData = data.elementData || {};
+  let formData = data.formData || {};
+  if (isForm) {
+    code += `<el-form-item label="${formData.name || ''} required="${formData.required}">`;
+  }
+  code += `<el-input v-model="${formData.option.key || ('form' + formData.option.uuid)}[options.key || ('input-'+options.uuid)]" disabled="options.disabled"
+              :type="options.type" :show-password="options.type === 'password'" autocomplete="new-password" />`;
+  if (isForm) {
+    code += `</el-form-item>`;
+  }
+
+};

src/views/tool/draggable/exportConfig/script.js

@@ -0,0 +1,16 @@
+const start = `<script  setup>`;
+const end = `</script>`;
+let variablesData = ``;
+let functionData = ``;
+
+const addVariables = (code) => {
+  variablesData += code;
+};
+
+const addFunction = (code) => {
+  functionData += code;
+};
+
+export {
+  addVariables, addFunction
+};

src/views/tool/draggable/exportConfig/style.js

@@ -0,0 +1,2 @@
+const start = `<style scoped>`;
+const end = `</style>`;

src/views/tool/draggable/exportConfig/template.js

@@ -0,0 +1,18 @@
+const start = `<template>`;
+const end = `</template>`;
+let content = ``;
+const combined = () => {
+  return `
+${start}
+${content}
+${end}
+`;
+};
+
+const addCode = (code) => {
+  content += code;
+};
+
+export {
+  combined, addCode
+};

src/views/tool/draggable/index.vue

@@ -36,6 +36,7 @@
     <div class="right-box">
       <div class="toolbar">
         <el-button type="primary" :icon="View" @click="viewForm">预览</el-button>
+        <el-button type="primary" :icon="View" @click="exportFile">导出</el-button>
 
       </div>
       <nested-draggable :tasks="widgetList" style="height: 100%;" :formData="formData" />
@@ -71,6 +72,7 @@ import { v4 as getUuid } from 'uuid';
 import nestedDraggable from './nest.vue';
 import elementMini from './element-mini.vue';
 import formBoard from './formBoard.vue';
+import { exportConfig } from '@/views/tool/draggable/exportConfig';
 
 interface type {
   name: string,
@@ -214,6 +216,10 @@ const addElement = (e) => {
 const viewForm = () => {
   viewDialogVisible.value = true;
 };
+const exportFile = () => {
+  let data = exportConfig(widgetList.value);
+  console.log(data);
+};
 </script>
 <style scoped>
 .model {
@@ -259,13 +265,14 @@ const viewForm = () => {
 .option-box {
   width: 400px;
   display: inline-block;
-  //user-select: none;
   vertical-align: top;
   margin: 8px;
   border: 1px solid #ccc;
   min-height: 100px;
+  //user-select: none;
 }
 
+//user-select: none;
 .dataBox {
   width: 100%;
   display: inline-block;