From 99f10b3c5f5c6b1569aa4ebe85550a90edf99f2b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com>
Date: Thu, 27 Feb 2025 19:14:53 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=A1=A8=E5=8D=95=E6=9E=84?=
 =?UTF-8?q?=E5=BB=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/tool/draggable/demo.vue             | 195 ++++++++++++++++--
 .../tool/draggable/elements/hw-table.vue      |   6 +-
 src/views/tool/draggable/exportConfig/form.js |  45 +++-
 .../tool/draggable/exportConfig/index.js      |   3 +-
 .../tool/draggable/exportConfig/input.js      |  12 +-
 .../tool/draggable/exportConfig/script.js     |  46 ++++-
 .../tool/draggable/exportConfig/table.js      | 159 ++++++++++++--
 src/views/tool/draggable/formBoard.vue        |   6 +-
 src/views/tool/draggable/index.vue            |  25 ++-
 .../option/functionDialog/request.vue         |   2 +-
 .../tool/draggable/option/table/tableType.vue |   6 +-
 .../draggable/viewElements/hw-table-view.vue  |  14 +-
 12 files changed, 453 insertions(+), 66 deletions(-)

diff --git a/src/views/tool/draggable/demo.vue b/src/views/tool/draggable/demo.vue
index 4df7bac..6a68060 100644
--- a/src/views/tool/draggable/demo.vue
+++ b/src/views/tool/draggable/demo.vue
@@ -1,31 +1,192 @@
 <template>
-  <div><span>单行文本</span>
-    <el-input v-model="pageForm['input-7f3ceb4e-9aaf-42ff-95f7-86c9205748d8']"
-              type="text" autocomplete="new-password" />
+  <div style="margin-bottom: 12px;">
+    <el-button :icon="Plus" type="primary" @click="aaAdd">新增</el-button>
+    <el-button :icon="Edit" type="success" :disabled="aaSelectionList.length !== 1" @click="aaUpdate()">编辑
+    </el-button>
+    <el-button :icon="Delete" type="danger" :disabled="!(aaSelectionList.length >= 1)" @click="aaDel()">删除
+    </el-button>
   </div>
+  <el-table :data="formData['table']"
+            style="width: 100%"
+            @selection-change="aaSelectionChange">
+    <el-table-column type="selection" width="55" />
+    <el-table-column prop="materialName" label="materialName" />
+    <el-table-column prop="planAmount" label="planAmount" />
+    <el-table-column prop="processName" label="processName" />
+    <el-table-column prop="releaseName" label="releaseName" />
+    <el-table-column prop="planId" label="planId" />
+    <el-table-column label="操作">
+      <template #default="scope">
+        <el-button
+          link
+          type="primary"
+          size="small"
+          @click.prevent="aaUpdate(scope)"
+        >
+          修改
+        </el-button>
+        <el-button
+          link
+          type="primary"
+          size="small"
+          @click.prevent="aaDel(scope)"
+        >
+          删除
+        </el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+
+  <el-dialog v-model="aaOperationFormVisible" :title="aaOperationTitle" width="500">
+    <el-form :model="aaOperationForm" label-width="120px">
+      <el-form-item label="materialName" :required="undefined">
+        <el-input v-model="aaOperationForm['materialName']"
+                  type="input" autocomplete="new-password" />
+      </el-form-item>
+      <el-form-item label="planAmount" :required="undefined">
+        <el-input v-model="aaOperationForm['planAmount']"
+                  type="input" autocomplete="new-password" />
+      </el-form-item>
+      <el-form-item label="processName" :required="undefined">
+        <el-input v-model="aaOperationForm['processName']"
+                  type="input" autocomplete="new-password" />
+      </el-form-item>
+      <el-form-item label="releaseName" :required="undefined">
+        <el-input v-model="aaOperationForm['releaseName']"
+                  type="input" autocomplete="new-password" />
+      </el-form-item>
+      <el-form-item label="planId" :required="undefined">
+        <el-input v-model="aaOperationForm['planId']"
+                  type="input" autocomplete="new-password" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="aaOperationFormVisible = false;aaOperationForm={}">关闭</el-button>
+        <el-button type="primary" @click="aaAddSubmit">
+          提交
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
   <div>
-    <el-form :model="pageForm['form-faa5bd9b-5d6b-4549-9646-2bc9f238c43d']" label-width="120px">
+    <el-form :model="a " label-width="120px">
       <el-form-item>
-        <el-button type="primary">提交</el-button>
-        <el-button>重置</el-button>
-      </el-form-item>
-    </el-form>
-  </div>
-  <div>
-    <el-form :model="pageForm['form-207b81de-b83d-4e60-be3b-1b8d4d9ad442']" label-width="120px">
-      <el-form-item>
-        <el-button type="primary">提交</el-button>
+        <el-button type="primary" @click="aSubmit">提交</el-button>
         <el-button>重置</el-button>
       </el-form-item>
     </el-form>
+    <pagination v-show="pageData.total > 0"
+                v-model:page="a['pageNum']"
+                v-model:limit="a['pageSize']"
+                :total="pageData.total" @pagination="aSubmit" />
   </div>
 </template>
 
 <script setup>
-const pageForm = ref({
-  'input-7f3ceb4e-9aaf-42ff-95f7-86c9205748d8': '',
-  'form-faa5bd9b-5d6b-4549-9646-2bc9f238c43d': {},
-  'form-207b81de-b83d-4e60-be3b-1b8d4d9ad442': {}
+import { Delete, Edit, Plus } from '@element-plus/icons-vue';
+import request from '@/utils/request';
+
+const formData = ref({});
+const formDataOperation = {
+  get: (key) => {
+    return formData.value[key];
+  },
+  set: (key, value) => {
+    formData.value[key] = value;
+  }
+};
+const pageData = ref({});
+
+const aaOperationForm = ref({
+  'materialName': '',
+  'planAmount': '',
+  'processName': '',
+  'releaseName': '',
+  'planId': ''
 });
 
+const a = ref({});
+
+
+const table = ref([]);
+
+const aaSelectionList = ref([]);
+
+const aaOperationFormVisible = ref(false);
+
+const aaOperationTitle = ref('');
+
+const aaSelectionChange = (e) => {
+  aaSelectionList.value = e;
+};
+const aaUpdate = (scope) => {
+  if (!scope) {
+    aaOperationForm.value = aaSelectionList.value[0];
+  } else {
+    aaOperationForm.value = scope.row;
+  }
+  aaOperationFormVisible.value = true;
+};
+
+const aaAdd = () => {
+  aaOperationForm.value = {};
+  aaOperationFormVisible.value = true;
+};
+
+
+const aaDel = () => {
+  ElMessageBox.confirm(
+    '确定删除这些数据吗?',
+    'Warning',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+      beforeClose: async (action, instance, done) => {
+        try {
+          let localData = pageData.value;
+          let formData = { id: aaSelectionList.value.map(v => v[id]) };
+
+          done();
+        } catch (e) {
+          console.log(e);
+        }
+      }
+    }
+  )
+    .then(async () => {
+      ElMessage({
+        type: 'success',
+        message: '删除完成'
+      });
+    })
+    .catch(() => {
+      ElMessage({
+        type: 'info',
+        message: '取消删除'
+      });
+    });
+};
+
+const aaAddSubmit = async () => {
+  let formData = aaOperationForm.value;
+  let localData = pageData.value;
+
+  aaOperationFormVisible.value = false;
+};
+
+const aSubmit = async () => {
+  let formData = a.value;
+  let localData = pageData.value;
+
+  const table = await request({
+    url: 'mes/planInfo/list',
+    method: 'get',
+    params: formData
+  });
+  formDataOperation.set('table', table.rows);
+  localData.total = table.total;
+};
+
 </script>
diff --git a/src/views/tool/draggable/elements/hw-table.vue b/src/views/tool/draggable/elements/hw-table.vue
index 9015759..f463475 100644
--- a/src/views/tool/draggable/elements/hw-table.vue
+++ b/src/views/tool/draggable/elements/hw-table.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="hw-input" @click.stop="inputClick"
+  <div class="hw-element" @click.stop="inputClick"
        :style="`background-color: ${(selectUuid === options.uuid) ? '#0001':'#0000'};border-color: ${(selectUuid === options.uuid) ? '#00afff':'#0000'}`">
     <tool v-if="selectUuid === options.uuid" :options="options" />
     <div>
       <el-table :data="tableData" style="width: 100%">
-        <el-table-column :prop="i.keyName" :label="i.name" v-for="i in options.thTdMap">
+        <el-table-column :prop="i.key" :label="i.name" v-for="i in options.thTdMap">
           <template #default="scope">
             {{ scope.$index }}
           </template>
@@ -54,7 +54,7 @@ const inputClick = () => {
 };
 </script>
 <style scoped lang="less">
-.hw-input {
+.hw-element {
   margin: 2px;
   border: 1px solid #0000;
   position: relative;
diff --git a/src/views/tool/draggable/exportConfig/form.js b/src/views/tool/draggable/exportConfig/form.js
index 061e5ed..9474b21 100644
--- a/src/views/tool/draggable/exportConfig/form.js
+++ b/src/views/tool/draggable/exportConfig/form.js
@@ -1,5 +1,5 @@
 import {
-  addVariables, addFunction
+  addFormVariables, addFunction
 } from './script.js';
 
 import {
@@ -18,6 +18,32 @@ const elementEnum = {
   'hw-input': getInputCode, 'hw-table': getTableCode
 };
 
+const getFormField = (tier, formData, elementData) => {
+  console.log(tier);
+  let res = ``;
+  if (tier && tier.length > 0) {
+    tier.forEach((item, index) => {
+      if (index === 0) {
+        res += `${item}`;
+      } else {
+        res += `['${item}']`;
+      }
+    });
+  }
+  // if (formData !== '') {
+  //   res += `['${formData}']`;
+  // }
+  console.log(res);
+  if (elementData !== '') {
+    if (res === '') {
+      res += `${elementData}`;
+    } else {
+      res += `['${elementData}']`;
+    }
+  }
+  return res;
+};
+
 const getFormCode = (data) => {
   let code = ``;
   let variablesCode = ``;
@@ -26,7 +52,8 @@ const getFormCode = (data) => {
   let formData = data.elementData || {};
   let tier = data.tier || [];
   let parentData = data.formData || {};
-  addVariables(tier, formData.options.key || ('form-' + formData.options.uuid), {});
+  let formVariables = getFormField(tier, parentData.options ? (parentData.options.key || ('form' + parentData.options.uuid)) : '', formData.options.key || ('form_' + formData.options.uuid));
+  addFormVariables(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}">`);
@@ -34,10 +61,10 @@ const getFormCode = (data) => {
     // 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}" >`);
+  addCode(`<el-form :model="${formVariables} " label-width="${formData.options.labelWidth}" >`);
 
+  tier.push(formData.options.key || ('form-' + formData.options.uuid));
   formData.tasks.forEach(task => {
     if (task.type === 'hw-form') {
       getFormCode({
@@ -58,10 +85,18 @@ const getFormCode = (data) => {
       <el-button>${formData.options.resetBottomName}</el-button>
     </el-form-item>`);
   addFunction(`
- const ${formData.options.key || ('form_' + formData.options.uuid)}Submit = (formData, formDataOperation, localData))=>{
+ const ${formData.options.key || ('form_' + formData.options.uuid)}Submit = async ()=>{
+    let formData = ${formVariables}.value
+    let localData = pageData.value
  ${formData.options.submitFunction}}
   `);
   addCode(`</el-form>`);
+  addCode(`
+    <pagination v-show="pageData.total > 0"
+                v-model:page="${formVariables}['${formData.options.pageNum}']"
+                v-model:limit="${formVariables}['${formData.options.pageSize}']"
+                :total="pageData.total" @pagination="${(formData.options.key || ('form_' + formData.options.uuid))}Submit" />
+  `);
   if (isForm) {
     // code += `</el-form-item>`;
     addCode(`</el-form-item>`);
diff --git a/src/views/tool/draggable/exportConfig/index.js b/src/views/tool/draggable/exportConfig/index.js
index a516343..63abb5d 100644
--- a/src/views/tool/draggable/exportConfig/index.js
+++ b/src/views/tool/draggable/exportConfig/index.js
@@ -1,6 +1,7 @@
 import { addCode, templateCombined, resetTemplate } from './template.js';
 import { getInputCode } from './input.js';
 import { getFormCode } from './form.js';
+import { getTableCode } from './table.js';
 import { scriptCombined, resetScript } from './script.js';
 import Download from '@/plugins/download';
 
@@ -10,7 +11,7 @@ const reset = () => {
 };
 
 const elementEnum = {
-  'hw-input': getInputCode, 'hw-form': getFormCode
+  'hw-input': getInputCode, 'hw-form': getFormCode, 'hw-table': getTableCode
 };
 
 const exportConfig = (e) => {
diff --git a/src/views/tool/draggable/exportConfig/input.js b/src/views/tool/draggable/exportConfig/input.js
index 0bde140..57c9062 100644
--- a/src/views/tool/draggable/exportConfig/input.js
+++ b/src/views/tool/draggable/exportConfig/input.js
@@ -1,5 +1,5 @@
 import {
-  addVariables, addFunction
+  addFormVariables, addFunction
 } from './script.js';
 
 import {
@@ -7,10 +7,14 @@ import {
 } from './template.js';
 
 const getFormField = (tier, formData, elementData) => {
-  let res = `pageForm`;
+  let res = ``;
   if (tier && tier.length > 0) {
     tier.forEach((item, index) => {
-      res += `['${item}']`;
+      if (index === 0) {
+        res += `${item}`;
+      } else {
+        res += `['${item}']`;
+      }
     });
   }
   // if (formData !== '') {
@@ -35,7 +39,7 @@ const getInputCode = (data) => {
   } else {
     code += `<div> <span>${inputData.options.name}</span>`;
   }
-  addVariables(tier, inputData.options.key || ('input-' + inputData.options.uuid), '');
+  addFormVariables(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) {
diff --git a/src/views/tool/draggable/exportConfig/script.js b/src/views/tool/draggable/exportConfig/script.js
index 59c9c46..f6c378c 100644
--- a/src/views/tool/draggable/exportConfig/script.js
+++ b/src/views/tool/draggable/exportConfig/script.js
@@ -5,19 +5,31 @@ let functionData = ``;
 const scriptCombined = () => {
   return `
 ${start}
+import { Delete, Edit, Plus } from '@element-plus/icons-vue';
 import request from '@/utils/request';
-const formDataOperation  = ref({})
+const formData = ref({});
+const formDataOperation = {
+  get: (key) => {
+    return formData.value[key];
+  },
+  set: (key, value) => {
+    formData.value[key] = value;
+  }
+};
+const pageData = ref({})
+${getFormVariablesData()}
 ${getVariablesData()}
 ${functionData}
 ${end}
 `;
 };
 
+let formVariablesStructure = {};
 let variablesStructure = {};
 
 
-const addVariables = (tier, key, type) => {
-  let obj = variablesStructure;
+const addFormVariables = (tier, key, type) => {
+  let obj = formVariablesStructure;
   if (tier.length > 0) {
     tier.forEach((t) => {
       obj = obj[t];
@@ -27,8 +39,32 @@ const addVariables = (tier, key, type) => {
     obj[key] = type;
   }
 };
+const addVariables = (key, type) => {
+  variablesStructure[key] = type;
+};
+const getFormVariablesData = () => {
+  let res = ``;
+  Object.keys(formVariablesStructure).forEach((t) => {
+    if (t) {
+      res += `
+    const ${t} = ref(${JSON.stringify(formVariablesStructure[t]) || ''})
+    `;
+    }
+  });
+  return res;
+
+  // return `
+  // const pageForm = ref(${JSON.stringify(formVariablesStructure)})
+  // `;
+};
 const getVariablesData = () => {
-  return `const pageForm = ref(${JSON.stringify(variablesStructure)})`;
+  let res = ``;
+  Object.keys(variablesStructure).forEach((t) => {
+    res += `
+    const ${t} = ref(${JSON.stringify(variablesStructure[t])})
+    `;
+  });
+  return res;
 };
 
 const addFunction = (code) => {
@@ -41,5 +77,5 @@ const resetScript = (data) => {
 };
 
 export {
-  addVariables, addFunction, scriptCombined, resetScript
+  addFormVariables, addVariables, addFunction, scriptCombined, resetScript
 };
diff --git a/src/views/tool/draggable/exportConfig/table.js b/src/views/tool/draggable/exportConfig/table.js
index f24b10b..24bb56e 100644
--- a/src/views/tool/draggable/exportConfig/table.js
+++ b/src/views/tool/draggable/exportConfig/table.js
@@ -1,11 +1,15 @@
 import {
-  addVariables, addFunction
+  addFormVariables, addFunction, addVariables
 } from './script.js';
 
 import {
   addCode
 } from './template.js';
+import { getInputCode } from './input.js';
 
+const elementEnum = {
+  'input': getInputCode
+};
 const getFormField = (tier, formData, elementData) => {
   let res = `pageForm`;
   if (tier && tier.length > 0) {
@@ -23,27 +27,156 @@ const getFormField = (tier, formData, elementData) => {
 };
 
 const getTableCode = (data) => {
-  let code = ``;
-  let variablesCode = ``;
-  let functionCode = ``;
   let isForm = data.isForm || false;
   let tier = data.tier || [];
-  let inputData = data.elementData || {};
+  let tableData = data.elementData || {};
+  let prefix = tableData.options.key || ('table_' + tableData.options.uuid);
   let formData = data.formData || {};
   if (isForm) {
-    code += `<el-form-item label="${inputData.options.name || ''}" :required="${inputData.options.required}">`;
+    addCode(`<el-form-item label="${tableData.options.name || ''}" :required="${tableData.options.required}">`);
   } else {
-    code += `<div> <span>${inputData.options.name}</span>`;
+
   }
-  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 (tableData.options.isOperate) {
+    addCode(`<div style="margin-bottom: 12px;" >
+      <el-button :icon="Plus" type="primary" @click="${prefix}Add">新增</el-button>
+      <el-button :icon="Edit" type="success" :disabled="${prefix}SelectionList.length !== 1" @click="${prefix}Update()">编辑
+      </el-button>
+      <el-button :icon="Delete" type="danger" :disabled="!(${prefix}SelectionList.length >= 1)" @click="${prefix}Del()">删除
+      </el-button>
+    </div>`);
+  }
+  addVariables(tableData.options.dataKey, []);
+  addVariables(`${prefix}SelectionList`, []);
+  addFunction(`const ${prefix}SelectionChange = (e)=>{
+  ${prefix}SelectionList.value = e;
+  }`);
+  addFunction(`
+  const ${prefix}Update = (scope) =>{
+  if(!scope){
+  ${prefix}OperationForm.value = ${prefix}SelectionList.value[0];
+  }else{
+  ${prefix}OperationForm.value = scope.row;
+  }
+  ${prefix}OperationFormVisible.value = true;
+  }
+  `);
+  addFunction(`
+  const ${prefix}Add = ()=>{
+  ${prefix}OperationForm.value = {}
+  ${prefix}OperationFormVisible.value = true;
+  }
+  `);
+  addFunction(`
+
+const ${prefix}Del = () => {
+  ElMessageBox.confirm(
+    '确定删除这些数据吗?',
+    'Warning',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+      beforeClose: async (action, instance, done) => {
+        try {
+  let localData = pageData.value;
+        let formData = { ${tableData.options.delField}: ${prefix}SelectionList.value.map(v => v[${tableData.options.delField}]) }
+        ${tableData.options.deleteFunction}
+          done();
+        } catch (e) {
+          console.log(e);
+        }
+      }
+    }
+  )
+    .then(async () => {
+      ElMessage({
+        type: 'success',
+        message: '删除完成'
+      });
+    })
+    .catch(() => {
+      ElMessage({
+        type: 'info',
+        message: '取消删除'
+      });
+    });
+};
+  `);
+  addCode(`
+    <el-table :data="formData['${tableData.options.dataKey}']"
+              style="width: 100%"
+              @selection-change="${prefix}SelectionChange">
+      <el-table-column type="selection" width="55" />
+      ${tableData.options.thTdMap.map(i => {
+    return `<el-table-column prop="${i.key}" label="${i.name}"  />`;
+  }).join('\n')}
+      <el-table-column label="操作">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            size="small"
+            @click.prevent="${prefix}Update(scope)"
+          >
+            修改
+          </el-button>
+              <el-button
+                link
+                type="primary"
+                size="small"
+            @click.prevent="${prefix}Del(scope)"
+              >
+                删除
+              </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+`);
   if (isForm) {
-    code += `</el-form-item>`;
+    addCode(`</el-form-item>`);
   } else {
-    code += `</div>`;
+
+  }
+  if (true) {
+    addVariables(`${prefix}OperationFormVisible`, false);
+    addVariables(`${prefix}OperationTitle`, '');
+    addFormVariables([], `${prefix}OperationForm`, {});
+    addCode(`
+        <el-dialog v-model="${prefix}OperationFormVisible" :title="${prefix}OperationTitle" width="500">
+      <el-form :model="${prefix}OperationForm" label-width="120px">`);
+
+    tableData.options.thTdMap.filter(e => e.isUpdate).map(e => {
+      const noFun = () => {
+      };
+      (elementEnum[e.type] || noFun)({
+        isForm: true,
+        formData: { options: { key: `${prefix}OperationForm` } },
+        elementData: { options: e },
+        tier: [`${prefix}OperationForm`]
+      });
+    });
+    addCode(`
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="${prefix}OperationFormVisible = false;${prefix}OperationForm={}">关闭</el-button>
+          <el-button type="primary" @click="${prefix}AddSubmit">
+            提交
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+    `);
+    addFunction(`
+    const ${prefix}AddSubmit = async ()=>{
+    let formData = ${prefix}OperationForm.value
+    let localData = pageData.value
+    ${tableData.options.updateFunction}
+    ${prefix}OperationFormVisible.value = false
+    }
+    `);
   }
-  addCode(code);
 
 };
 
diff --git a/src/views/tool/draggable/formBoard.vue b/src/views/tool/draggable/formBoard.vue
index 1b21a94..58dfc00 100644
--- a/src/views/tool/draggable/formBoard.vue
+++ b/src/views/tool/draggable/formBoard.vue
@@ -38,14 +38,14 @@ const props = defineProps({
 
 const { widgetList } = toRefs(props);
 
-const formData = ref({ pageVariable: {} });
+const formData = ref({});
 provide('globalFormData', formData);
 const formDataOperation = {
   get: (key) => {
-    return formData.value.pageVariable[key];
+    return formData.value[key];
   },
   set: (key, value) => {
-    formData.value.pageVariable[key] = value;
+    formData.value[key] = value;
   }
 };
 provide('formDataOperation', formDataOperation);
diff --git a/src/views/tool/draggable/index.vue b/src/views/tool/draggable/index.vue
index 70ebb1e..7c703a4 100644
--- a/src/views/tool/draggable/index.vue
+++ b/src/views/tool/draggable/index.vue
@@ -22,7 +22,13 @@
             </template>
           </draggable>
         </el-tab-pane>
-        <el-tab-pane label="模板列表" name="second">Config</el-tab-pane>
+        <el-tab-pane label="模板列表" name="second">
+          <div style="width:100%;height:30px;text-align:center;line-height: 30px;border: 1px solid #f8ac59"
+               v-for="(i,index) in saveDatas"
+               @click="setData(i)">
+            {{ index }}
+          </div>
+        </el-tab-pane>
         <el-tab-pane label="数据（）" name="three">
           <div class="dataBox">
             <div>{{ dragList }}</div>
@@ -37,6 +43,7 @@
       <div class="toolbar">
         <el-button type="primary" :icon="View" @click="viewForm">预览</el-button>
         <el-button type="primary" :icon="View" @click="exportFile">导出</el-button>
+        <el-button type="primary" :icon="View" @click="saveData">保存</el-button>
 
       </div>
       <nested-draggable :tasks="widgetList" style="height: 100%;" :formData="formData" />
@@ -102,6 +109,7 @@ const dragList = [
     isContainer: true,
     options: {
       name: '表单',
+      key: '',
       labelWidth: '120px',
       formData: {},
       isInLine: false,
@@ -162,10 +170,11 @@ const dragViewList = [
     isContainer: false,
     options: {
       name: '表格',
+      key: '',
       thTdMap: [
         {
           name: '字段name',
-          keyName: '字段key',
+          key: '字段key',
           type: 'input',
           isUpdate: true
         }
@@ -230,6 +239,18 @@ const exportFile = () => {
   let data = exportConfig(widgetList.value);
   console.log(data);
 };
+const saveData = () => {
+  let data = JSON.parse(localStorage.getItem('SAVE_DATA')) || [];
+  data.push(widgetList.value);
+  localStorage.setItem('SAVE_DATA', JSON.stringify(data));
+};
+const setData = (e) => {
+  widgetList.value = e;
+};
+const saveDatas = ref([]);
+onMounted(() => {
+  saveDatas.value = JSON.parse(localStorage.getItem('SAVE_DATA')) || [];
+});
 
 </script>
 <style scoped>
diff --git a/src/views/tool/draggable/option/functionDialog/request.vue b/src/views/tool/draggable/option/functionDialog/request.vue
index d4e1fea..a354332 100644
--- a/src/views/tool/draggable/option/functionDialog/request.vue
+++ b/src/views/tool/draggable/option/functionDialog/request.vue
@@ -90,7 +90,7 @@ const setParams = (e) => {
 
 const setRes = () => {
   if (form.value.storageLocation === 'page') {
-    return `formDataOperation.set('${form.value.fieldName}',${form.value.fieldName}${form.value.keys})`;
+    return `formDataOperation.set('${form.value.fieldName}',${form.value.fieldName}${form.value.keys ? ('.' + form.value.keys) : ''})`;
   } else {
     return `localData['${form.value.fieldName}'] = ${form.value.fieldName}${form.value.keys}`;
   }
diff --git a/src/views/tool/draggable/option/table/tableType.vue b/src/views/tool/draggable/option/table/tableType.vue
index 40ebd4e..714b0b7 100644
--- a/src/views/tool/draggable/option/table/tableType.vue
+++ b/src/views/tool/draggable/option/table/tableType.vue
@@ -7,9 +7,9 @@
             <el-input v-model="formData[keyValue][scope.$index]['name']" />
           </template>
         </el-table-column>
-        <el-table-column prop="keyName" label="字段key">
+        <el-table-column prop="key" label="字段key">
           <template #default="scope">
-            <el-input v-model="formData[keyValue][scope.$index]['keyName']" />
+            <el-input v-model="formData[keyValue][scope.$index]['key']" />
           </template>
         </el-table-column>
         <el-table-column label="字段类型">
@@ -63,7 +63,7 @@ const { formData, keyValue, itemName } = toRefs(props);
 const onAddItem = () => {
   formData.value[keyValue.value].push({
     name: '',
-    keyName: '',
+    key: '',
     type: 'input',
     isUpdate: true
   });
diff --git a/src/views/tool/draggable/viewElements/hw-table-view.vue b/src/views/tool/draggable/viewElements/hw-table-view.vue
index fd68e08..b72d4a7 100644
--- a/src/views/tool/draggable/viewElements/hw-table-view.vue
+++ b/src/views/tool/draggable/viewElements/hw-table-view.vue
@@ -1,11 +1,7 @@
 <script lang="ts">
-import hwInputView from './hw-input-view.vue';
 
 export default {
-  name: 'hw-table-view',
-  components: {
-    hwInputView
-  }
+  name: 'hw-table-view'
 };
 </script>
 <template>
@@ -17,11 +13,11 @@ export default {
       <el-button :icon="Delete" type="danger" :disabled="!(SelectionList.length >= 1)" @click="operateDelBtn">删除
       </el-button>
     </div>
-    <el-table :data="cs || globalFormData.pageVariable[options.dataKey]"
+    <el-table :data="globalFormData[options.dataKey]"
               style="width: 100%"
               @selection-change="tableSelectionChange">
       <el-table-column type="selection" width="55" />
-      <el-table-column :prop="i.keyName" :label="i.name" v-for="i in options.thTdMap" />
+      <el-table-column :prop="i.key" :label="i.name" v-for="i in options.thTdMap" />
       <el-table-column label="操作">
         <template #default="scope">
           <el-button
@@ -50,7 +46,7 @@ export default {
     <el-dialog v-model="tableAddFormVisible" title="添加表格信息" width="500">
       <el-form :model="form" label-width="120px">
         <component v-for="(i,k) in options.thTdMap.filter(e=>e.isUpdate)" :is="'hw-'+i.type+'-view'" :formData="form"
-                   :options="{name:i.name,key:i.keyName}" />
+                   :options="{name:i.name,key:i.key}" />
       </el-form>
       <template #footer>
         <div class="dialog-footer">
@@ -65,7 +61,7 @@ export default {
       <el-form :model="form" label-width="120px">
         <component v-for="(i,k) in options.thTdMap.filter(e=>e.isUpdate)" :is="'hw-'+(i.type||'input')+'-view'"
                    :formData="form"
-                   :options="{name:i.name,key:i.keyName}" />
+                   :options="{name:i.name,key:i.key}" />
       </el-form>
       <template #footer>
         <div class="dialog-footer">