修改表单构建

1 day ago · aee8da950b
parent e575398ab4
commit aee8da950b
8 changed files with 234 additions and 10 deletions
--- a/src/router/index.ts
+++ b/src/router/index.ts
@ -31,6 +31,11 @@ export const constantRoutes: RouteRecordRaw[] = [
    hidden: true,
    component: () => import('@/views/board/index.vue')
  },
+  {
+    path: '/formCs',
+    hidden: true,
+    component: () => import('@/views/tool/draggable/demo.vue')
+  },
  {
    path: '/board2',
    hidden: true,
--- a/src/views/tool/draggable/demo.vue
+++ b/src/views/tool/draggable/demo.vue
@ -0,0 +1,50 @@
+<template>
+  <div>
+    <el-form :model="pageForm['form-34dc0db2-484e-4df1-b66c-12566e18524f']" label-width="120px">
+      <el-form-item label="表单" required="undefined">
+        <el-form :model="pageForm['form-7833bd1b-472d-4cda-abbb-d67dd50ddccf']" label-width="120px">
+          <el-form-item label="单行文本" :required="false">
+            <el-input
+              v-model="pageForm['form-34dc0db2-484e-4df1-b66c-12566e18524f']['form-7833bd1b-472d-4cda-abbb-d67dd50ddccf']['input-0f7bc3d0-a462-4a37-9b35-e90103b2461b']"
+              type="text" autocomplete="new-password" />
+          </el-form-item>
+        </el-form>
+      </el-form-item>
+    </el-form>
+  </div>
+  <div>
+    <el-form :model="pageForm['form-0bd2b044-1785-43b3-9985-44f9a8fe64c3']" label-width="120px">
+      <el-form-item label="单行文本" :required="false">
+        <el-input
+          v-model="pageForm['form-0bd2b044-1785-43b3-9985-44f9a8fe64c3']['input-4edcec9a-bce1-4a69-a7f0-520d0e0b330b']"
+          type="text" autocomplete="new-password" />
+      </el-form-item>
+    </el-form>
+  </div>
+  <div>
+    <el-form :model="pageForm['form-aec5764a-5743-4ad0-87dc-d8af1bd7b70d']" label-width="120px">
+      <el-form-item label="单行文本" :required="false">
+        <el-input
+          v-model="pageForm['form-aec5764a-5743-4ad0-87dc-d8af1bd7b70d']['input-a7fa75bb-0456-4347-ad08-bfba9cb54089']"
+          type="text" autocomplete="new-password" />
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script setup>
+const pageForm = ref({
+  'form-34dc0db2-484e-4df1-b66c-12566e18524f': {
+    'form-7833bd1b-472d-4cda-abbb-d67dd50ddccf': {
+      'input-0f7bc3d0-a462-4a37-9b35-e90103b2461b': ''
+    }
+  },
+  'form-0bd2b044-1785-43b3-9985-44f9a8fe64c3': {
+    'input-4edcec9a-bce1-4a69-a7f0-520d0e0b330b': ''
+  },
+  'form-aec5764a-5743-4ad0-87dc-d8af1bd7b70d': {
+    'input-a7fa75bb-0456-4347-ad08-bfba9cb54089': ''
+  }
+});
+
+</script>
--- a/src/views/tool/draggable/exportConfig/form.js
+++ b/src/views/tool/draggable/exportConfig/form.js
@ -0,0 +1,66 @@
+import {
+  addVariables
+} from './script.js';
+
+import {
+  addCode
+} from './template.js';
+
+import {
+  getInputCode
+} from './input.js';
+
+const elementEnum = {
+  'hw-input': getInputCode
+};
+
+const getFormCode = (data) => {
+  let code = ``;
+  let variablesCode = ``;
+  let functionCode = ``;
+  let isForm = data.isForm || false;
+  let formData = data.elementData || {};
+  let tier = data.tier || [];
+  let parentData = data.formData || {};
+  addVariables(tier, formData.options.key || ('form-' + formData.options.uuid), {});
+  if (isForm) {
+    // code += `<el-form-item label="${formData.options.name || ''}" required="${formData.options.required}">`;
+    addCode(`<el-form-item label="${formData.options.name || ''}" required="${formData.options.required}">`);
+  } else {
+    console.log(123123);
+    // code += `<div> `;
+    addCode(`<div> `);
+  }
+  tier.push(formData.options.key || ('form-' + formData.options.uuid));
+  // code += `<el-form :model="pageForm['${formData.options.key || ('form-' + formData.options.uuid)}']" label-width="${formData.options.labelWidth}" >`;
+  addCode(`<el-form :model="pageForm['${formData.options.key || ('form-' + formData.options.uuid)}']" label-width="${formData.options.labelWidth}" >`);
+
+  formData.tasks.forEach(task => {
+    console.log(task);
+    if (task.type === 'hw-form') {
+      getFormCode({
+        isForm: true, formData: formData, elementData: task, tier
+      });
+    } else {
+      elementEnum[task.type]({
+        isForm: true, formData: formData, elementData: task, tier
+      });
+    }
+  });
+
+  // code += `</el-form>`;
+  addCode(`</el-form>`);
+  if (isForm) {
+    // code += `</el-form-item>`;
+    addCode(`</el-form-item>`);
+  } else {
+    // code += `</div>`;
+    addCode(`</div>`);
+  }
+  addCode(code);
+
+};
+
+export {
+  getFormCode
+};
--- a/src/views/tool/draggable/exportConfig/index.js
+++ b/src/views/tool/draggable/exportConfig/index.js
@ -1,7 +1,32 @@
-import { addCode, combined } from '@/views/tool/draggable/exportConfig/template.js';
+import { addCode, templateCombined, resetTemplate } from './template.js';
+import { getInputCode } from './input.js';
+import { getFormCode } from './form.js';
+import { scriptCombined, resetScript } from './script.js';
+import Download from '@/plugins/download';
+
+const reset = () => {
+  resetScript();
+  resetTemplate();
+};
+
+const elementEnum = {
+  'hw-input': getInputCode, 'hw-form': getFormCode
+};

 const exportConfig = (e) => {
+  reset();
  console.log(e);
+  e.map(v => {
+    elementEnum[v.type]({
+      isForm: false, elementData: v, formData: {}
+    });
+  });
+  let template = templateCombined();
+  let script = scriptCombined();
+  let codeStr = template + script;
+  console.log(codeStr);
+  const blob = new Blob([codeStr], { type: 'text/plain;charset=utf-8' });
+  // Download.saveAs(blob, Date.now() + '.vue');
 };


--- a/src/views/tool/draggable/exportConfig/input.js
+++ b/src/views/tool/draggable/exportConfig/input.js
@ -2,20 +2,51 @@ import {
  addVariables, addFunction
 } from './script.js';

-const getInput = (data) => {
+import {
+  addCode
+} from './template.js';
+
+const getFormField = (tier, formData, elementData) => {
+  let res = `pageForm`;
+  if (tier && tier.length > 0) {
+    tier.forEach((item, index) => {
+      res += `['${item}']`;
+    });
+  }
+  // if (formData !== '') {
+  //   res += `['${formData}']`;
+  // }
+  if (elementData !== '') {
+    res += `['${elementData}']`;
+  }
+  return res;
+};
+
+const getInputCode = (data) => {
  let code = ``;
  let variablesCode = ``;
  let functionCode = ``;
  let isForm = data.isForm || false;
+  let tier = data.tier || [];
  let inputData = data.elementData || {};
  let formData = data.formData || {};
  if (isForm) {
-    code += `<el-form-item label="${formData.name || ''} required="${formData.required}">`;
+    code += `<el-form-item label="${inputData.options.name || ''}" :required="${inputData.options.required}">`;
+  } else {
+    code += `<div> <span>${inputData.options.name}</span>`;
  }
-  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" />`;
+  addVariables(tier, inputData.options.key || ('input-' + inputData.options.uuid), '');
+  code += `<el-input v-model="${getFormField(tier, formData.options ? (formData.options.key || ('form' + formData.options.uuid)) : '', inputData.options.key || ('input-' + inputData.options.uuid))}" ${inputData.options.disabled ? 'disabled' : ''}
+              type="${inputData.options.type}" ${inputData.options.type === 'password' ? 'show-password' : ''} autocomplete="new-password" />`;
  if (isForm) {
    code += `</el-form-item>`;
+  } else {
+    code += `</div>`;
  }
+  addCode(code);
+
+};

+export {
+  getInputCode
 };
--- a/src/views/tool/draggable/exportConfig/script.js
+++ b/src/views/tool/draggable/exportConfig/script.js
@ -2,15 +2,43 @@ const start = `<script  setup>`;
 const end = `</script>`;
 let variablesData = ``;
 let functionData = ``;
+const scriptCombined = () => {
+  return `
+${start}
+${getVariablesData()}
+${functionData}
+${end}
+`;
+};
+
+let variablesStructure = {};
+

-const addVariables = (code) => {
-  variablesData += code;
+const addVariables = (tier, key, type) => {
+  debugger
+  let obj = variablesStructure;
+  if (tier.length > 0) {
+    tier.forEach((t) => {
+      obj = obj[t];
+    });
+    obj[key] = type;
+  } else {
+    obj[key] = type;
+  }
+};
+const getVariablesData = () => {
+  return `const pageForm = ref(${JSON.stringify(variablesStructure)})`;
 };

 const addFunction = (code) => {
  functionData += code;
 };
+const resetScript = (data) => {
+  variablesData = ``;
+  variablesStructure = {};
+  functionData = ``;
+};

 export {
-  addVariables, addFunction
+  addVariables, addFunction, scriptCombined, resetScript
 };
--- a/src/views/tool/draggable/exportConfig/template.js
+++ b/src/views/tool/draggable/exportConfig/template.js
@ -1,7 +1,7 @@
 const start = `<template>`;
 const end = `</template>`;
 let content = ``;
-const combined = () => {
+const templateCombined = () => {
  return `
 ${start}
 ${content}
@ -12,7 +12,10 @@ ${end}
 const addCode = (code) => {
  content += code;
 };
+const resetTemplate = (data) => {
+  content = ``;
+};

 export {
-  combined, addCode
+  templateCombined, addCode, resetTemplate
 };
--- a/src/views/tool/draggable/index.vue
+++ b/src/views/tool/draggable/index.vue
@ -220,6 +220,22 @@ const exportFile = () => {
  let data = exportConfig(widgetList.value);
  console.log(data);
 };
+
+// const
+
+const aa = ref({ a: 1 });
+const bb = (v) => {
+  console.log(v);
+  v.a += 1;
+  console.log(v);
+};
+
+setTimeout(() => {
+  bb(aa.value);
+  setTimeout(() => {
+    console.log(aa.value);
+  }, 100);
+}, 100);
 </script>
 <style scoped>
 .model {