修改表单构建

src/utils/request.ts

@@ -83,9 +83,7 @@ service.interceptors.request.use(
         // 生成一个 AES 密钥
         const aesKey = generateAesKey();
         config.headers[encryptHeader] = encrypt(encryptBase64(aesKey));
-        console.log(config.data);
         config.data = typeof config.data === 'object' ? encryptWithAes(JSON.stringify(config.data), aesKey) : encryptWithAes(config.data, aesKey);
-        console.log(typeof config.data === 'object');
       }
     }
     // FormData数据去请求头Content-Type

src/views/tool/draggable/index.vue

@@ -157,11 +157,14 @@ const dragViewList = [
         {
           name: '字段name',
           keyName: '字段key',
-          type: 'text',
+          type: 'input',
           isUpdate: true
         }
       ],
-      dataKey: ''
+      dataKey: '',
+      updateFunction: '',
+      deleteFunction: '',
+      isOperate: true
     },
     name: '表格',
     id: 101

src/views/tool/draggable/option/functionDialog/request.vue

@@ -104,7 +104,7 @@ const onSubmit = () => {
     ${setParams(form.value.method)}
   })
   ${setRes()}
-  ${form.value.isTotal ? `formData.total = ${form.value.fieldName}.total` : ''}
+  ${form.value.isTotal ? `localData.total = ${form.value.fieldName}.total` : ''}
   `;
 };
 

src/views/tool/draggable/option/functionType.vue

@@ -24,9 +24,9 @@ export default {
             预定义参数：<br>
             formData:表单数据<br>
             request:网络请求<br>
-            formDataOperation:页面变量存储<br>
+            localData:组件数据<br>
+            formDataOperation:页面数据<br>
             包含get,set两个方法<br>
-            localData:页面数据<br>
           </template>
           <el-icon style="margin-left: 4px">
             <Warning />

src/views/tool/draggable/option/optionForm.vue

@@ -25,18 +25,18 @@ export default {
   </el-form>
 </template>
 <script lang="ts" setup>
-import { watch } from 'vue';
 
 const props = defineProps({
   formData: Object
 });
+const { formData } = toRefs(props);
 
 const typeEnum = {
   inputType: ['name', 'key', 'labelWidth', 'submitBottomName', 'resetBottomName', 'total', 'pageNum', 'pageSize', 'dataKey'],
   inputAreaType: [],
   tableType: ['thTdMap'],
-  switchType: ['isReset', 'isResetBottom', 'isSubmitBottom', 'disabled', 'isPagination', 'isInLine'],
-  functionType: ['submitFunction']
+  switchType: ['isReset', 'isResetBottom', 'isSubmitBottom', 'disabled', 'isPagination', 'isInLine', 'isOperate'],
+  functionType: ['submitFunction', 'updateFunction', 'deleteFunction']
 };
 const nameEnum = {
   name: '组件名称',
@@ -48,14 +48,17 @@ const nameEnum = {
   isResetBottom: '是否显示重置按钮',
   isSubmitBottom: '是否显示确定按钮',
   disabled: '是否禁用',
-  submitFunction: '提交回调函数',
+  submitFunction: '提交函数',
   isPagination: '是否分页',
   total: '总数字段名',
   pageNum: '当前页字段名',
   pageSize: '每页条数字段名',
   dataKey: '获取的数据字段',
   isInLine: '是否为行内表单',
-  thTdMap: '表单数据设置'
+  thTdMap: '表单数据设置',
+  updateFunction: '修改函数',
+  deleteFunction: '删除函数',
+  isOperate: '是否显示操作组'
 };
 const getType = (e) => {
   let res = '';
@@ -64,20 +67,10 @@ const getType = (e) => {
       res = key;
     }
   });
-  console.log(res);
   return res;
 };
 
 
-const { formData } = toRefs(props);
-watch(formData, e => {
-  console.log(formData.value);
-});
-
-const onSubmit = () => {
-  console.log('submit!');
-};
-
 </script>
 <style scoped lang="less">
 </style>

src/views/tool/draggable/option/tableType.vue

@@ -1,7 +1,7 @@
 <template>
   <el-form-item :label="itemName">
     <div style="overflow:auto;">
-      <el-table :data="formData[keyValue]" :style="`min-width:${(formData[keyValue].length+2)*150}px`" max-height="250">
+      <el-table :data="formData[keyValue]" style="min-width:700px">
         <el-table-column prop="name" label="字段名">
           <template #default="scope">
             <el-input v-model="formData[keyValue][scope.$index]['name']" />
@@ -17,11 +17,11 @@
             <el-select v-model="formData[keyValue][scope.$index]['type']">
               <el-option
                 label="文本"
-                value="text"
+                value="input"
               />
               <el-option
                 label="数字"
-                value="number"
+                value="input-number"
               />
               <el-option
                 label="时间"
@@ -30,7 +30,7 @@
             </el-select>
           </template>
         </el-table-column>
-        <el-table-column label="是否可编辑">
+        <el-table-column label="是否可编辑" width="100">
           <template #default="scope">
             <el-switch v-model="formData[keyValue][scope.$index]['isUpdate']" />
           </template>

src/views/tool/draggable/viewElements/hw-form-view.vue

@@ -23,10 +23,11 @@ export default {
         <el-button v-if="options.isResetBottom" @click="onReset">{{ options.resetBottomName }}</el-button>
       </el-form-item>
     </el-form>
-    <pagination v-show="formData[options.key || ('form-'+options.uuid)][options.total] > 0"
+    {{ formData[options.key || ('form-' + options.uuid)] }}
+    <pagination v-show="localData.total > 0"
                 v-model:page="formData[options.key || ('form-'+options.uuid)][options.pageNum]"
                 v-model:limit="formData[options.key || ('form-'+options.uuid)][options.pageSize]"
-                :total="formData[options.key || ('form-'+options.uuid)][options.total]" @pagination="onSubmit" />
+                :total="localData.total" @pagination="onSubmit" />
   </div>
 </template>
 

src/views/tool/draggable/viewElements/hw-table-view.vue

@@ -1,6 +1,24 @@
+<script lang="ts">
+import hwInputView from './hw-input-view.vue';
+
+export default {
+  name: 'hw-table-view',
+  components: {
+    hwInputView
+  }
+};
+</script>
 <template>
   <div>
-    <el-table :data="globalFormData.pageVariable[options.dataKey]" style="width: 100%">
+    <div style="margin-bottom: 12px;" v-if="options.isOperate">
+      <el-button :icon="Plus" type="primary" disabled @click="addBtn">新增</el-button>
+      <el-button :icon="Edit" type="success" disabled>编辑</el-button>
+      <el-button :icon="Delete" type="danger" disabled>删除</el-button>
+    </div>
+    <el-table :data="cs || globalFormData.pageVariable[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 label="操作">
         <template #default="scope">
@@ -26,9 +44,27 @@
         </template>
       </el-table-column>
     </el-table>
+
+    <el-dialog v-model="tableUpdateFormVisible" title="修改表格信息" width="500">
+      <el-form :model="form" label-width="120px">
+        <component v-for="(i,k) in options.thTdMap" :is="'hw-'+i.type+'-view'" :formData="form"
+                   :options="{name:i.name,key:i.keyName}" />
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="tableUpdateFormVisible = false;form={}">关闭</el-button>
+          <el-button type="primary" @click="onSubmit">
+            提交
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
   </div>
 </template>
 <script lang="ts" setup>
+import { Delete, Edit, Plus } from '@element-plus/icons-vue';
+import request from '@/utils/request';
+
 
 defineOptions({
   name: 'hw-table-view'
@@ -38,13 +74,59 @@ const props = defineProps({
   options: Object
 });
 
+const cs = [
+  { a: 1 },
+  { a: 2 }
+];
+
 const { options } = toRefs(props);
 const globalFormData = inject('globalFormData');
+const tableUpdateFormVisible = ref(false);
+const form = ref({});
+const formDataOperation = inject('formDataOperation');
+const localData = ref({});
+const SelectionList = ref([]);
+
+const tableSelectionChange = (e) => {
+  SelectionList.value = e;
+  console.log(SelectionList.value);
+};
+const addBtn = () => {
+
+};
 const updateBtn = (scope) => {
   console.log(scope);
+  console.log(options.value.thTdMap);
+  form.value = scope.row;
+  tableUpdateFormVisible.value = true;
+};
+const onSubmit = async () => {
+  try {
+    const fun = () => {
+      return `return async ()=>{
+        ${options.value.updateFunction}
+      }`;
+    };
+    const updateFunction = new Function('formData', 'request', 'formDataOperation', 'localData', fun());
+    await updateFunction(form.value, request, formDataOperation, localData.value)();
+    console.log();
+  } catch (e) {
+    console.log(e);
+  }
 };
-const delBtn = (scope) => {
-  console.log(scope.row);
+
+const delBtn = async (scope) => {
+  try {
+    const fun = () => {
+      return `return async ()=>{
+        ${options.value.deleteFunction}
+      }`;
+    };
+    const deleteFunction = new Function('formData', 'request', 'formDataOperation', 'localData', fun());
+    await deleteFunction(scope.row, request, formDataOperation, localData.value)();
+  } catch (e) {
+    console.log(e);
+  }
 };
 </script>
 <style scoped lang="less">