修改表单构建

src/views/tool/draggable/elements/hw-form.vue

@@ -18,7 +18,7 @@ export default {
        :style="`background-color: ${(selectUuid === options.uuid) ? '#0001':'#0000'};border-color: ${(selectUuid === options.uuid) ? '#00afff':'#ccc'}`">
     <tool v-if="selectUuid === options.uuid" :options="options" />
     <span>{{ options.name }}</span>
-    <el-form :model="formData[options.key || ('form-'+options.uuid)]">
+    <el-form :model="formData[options.key || ('form-'+options.uuid)]" :label-width="options.labelWidth">
       <draggable style="min-height: 10px;" :list="tasks" :group="{ name: 'list' }" itemKey="id">
         <template #item="{ element }">
           <div>

src/views/tool/draggable/elements/hw-table.vue

@@ -4,11 +4,29 @@
     <tool v-if="selectUuid === options.uuid" :options="options" />
     <div>
       <el-table :data="tableData" style="width: 100%">
-        <el-table-column :prop="i" :label="options.thTdMap[i]" v-for="i in Object.keys(options.thTdMap)">
+        <el-table-column :prop="i.keyName" :label="i.name" v-for="i in options.thTdMap">
           <template #default="scope">
             {{ scope.$index }}
           </template>
         </el-table-column>
+        <el-table-column label="Operations">
+          <template #default="scope">
+            <el-button
+              link
+              type="primary"
+              size="small"
+            >
+              修改
+            </el-button>
+            <el-button
+              link
+              type="primary"
+              size="small"
+            >
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
       </el-table>
     </div>
   </div>

src/views/tool/draggable/index.vue

@@ -153,7 +153,14 @@ const dragViewList = [
     isContainer: false,
     options: {
       name: '表格',
-      thTdMap: { planId: '字段planId', dispatchCode: '字段dispatchCode', materialName: '字段materialName' },
+      thTdMap: [
+        {
+          name: '字段name',
+          keyName: '字段key',
+          type: 'text',
+          isUpdate: true
+        }
+      ],
       dataKey: ''
     },
     name: '表格',

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

@@ -1,6 +1,7 @@
 <script lang="ts">
 
 import inputType from './inputType.vue';
+import tableType from './tableType.vue';
 import inputAreaType from './inputAreaType.vue';
 import switchType from './switchType.vue';
 import functionType from './functionType.vue';
@@ -9,6 +10,7 @@ export default {
   name: 'option-form',
   components: {
     inputType,
+    tableType,
     inputAreaType,
     switchType,
     functionType
@@ -32,6 +34,7 @@ const props = defineProps({
 const typeEnum = {
   inputType: ['name', 'key', 'labelWidth', 'submitBottomName', 'resetBottomName', 'total', 'pageNum', 'pageSize', 'dataKey'],
   inputAreaType: [],
+  tableType: ['thTdMap'],
   switchType: ['isReset', 'isResetBottom', 'isSubmitBottom', 'disabled', 'isPagination', 'isInLine'],
   functionType: ['submitFunction']
 };
@@ -51,7 +54,8 @@ const nameEnum = {
   pageNum: '当前页字段名',
   pageSize: '每页条数字段名',
   dataKey: '获取的数据字段',
-  isInLine: '是否为行内表单'
+  isInLine: '是否为行内表单',
+  thTdMap: '表单数据设置'
 };
 const getType = (e) => {
   let res = '';

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

@@ -0,0 +1,76 @@
+<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-column prop="name" label="字段名">
+          <template #default="scope">
+            <el-input v-model="formData[keyValue][scope.$index]['name']" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="keyName" label="字段key">
+          <template #default="scope">
+            <el-input v-model="formData[keyValue][scope.$index]['keyName']" />
+          </template>
+        </el-table-column>
+        <el-table-column label="字段类型">
+          <template #default="scope">
+            <el-select v-model="formData[keyValue][scope.$index]['type']">
+              <el-option
+                label="文本"
+                value="text"
+              />
+              <el-option
+                label="数字"
+                value="number"
+              />
+              <el-option
+                label="时间"
+                value="date"
+              />
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column label="是否可编辑">
+          <template #default="scope">
+            <el-switch v-model="formData[keyValue][scope.$index]['isUpdate']" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="" label="" width="50">
+          <template #default="scope">
+            <el-button size="small" type="danger" :icon="Delete" circle @click="delItem(scope.$index)" />
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <el-button @click="onAddItem">
+      添加字段
+    </el-button>
+  </el-form-item>
+</template>
+<script lang="ts" setup>import {
+  Delete
+} from '@element-plus/icons-vue';
+
+const props = defineProps({
+  formData: String,
+  keyValue: String,
+  itemName: String
+});
+
+const { formData, keyValue, itemName } = toRefs(props);
+
+const onAddItem = () => {
+  formData.value[keyValue.value].push({
+    name: '',
+    keyName: ''
+  });
+};
+const delItem = (e) => {
+  formData.value[keyValue.value].splice(e, 1);
+};
+</script>
+<style scoped lang="less">
+</style>
+
+
+

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

@@ -14,7 +14,7 @@ export default {
 <template>
   <div>
     <el-form :model="formData[options.key || ('form-'+options.uuid)]"
-             :inline="options.isInLine">
+             :inline="options.isInLine" :label-width="options.labelWidth">
       <component v-for="i in tasks" :is="i.type+'-view'" :options="i.options" :tasks="i.tasks"
                  :formData="formData[options.key || ('form-'+options.uuid)]" />
       <el-form-item>
@@ -23,7 +23,6 @@ export default {
         <el-button v-if="options.isResetBottom" @click="onReset">{{ options.resetBottomName }}</el-button>
       </el-form-item>
     </el-form>
-    <!--    {{ localData }}-->
     <pagination v-show="formData[options.key || ('form-'+options.uuid)][options.total] > 0"
                 v-model:page="formData[options.key || ('form-'+options.uuid)][options.pageNum]"
                 v-model:limit="formData[options.key || ('form-'+options.uuid)][options.pageSize]"

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

@@ -1,7 +1,30 @@
 <template>
   <div>
     <el-table :data="globalFormData.pageVariable[options.dataKey]" style="width: 100%">
-      <el-table-column :prop="i" :label="options.thTdMap[i]" v-for="i in Object.keys(options.thTdMap)" />
+      <el-table-column :prop="i.keyName" :label="i.name" v-for="i in options.thTdMap" />
+      <el-table-column label="操作">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            size="small"
+            @click.prevent="updateBtn(scope)"
+          >
+            修改
+          </el-button>
+          <el-popconfirm title="确定要删除此项数据吗?" @confirm="delBtn(scope)">
+            <template #reference>
+              <el-button
+                link
+                type="primary"
+                size="small"
+              >
+                删除
+              </el-button>
+            </template>
+          </el-popconfirm>
+        </template>
+      </el-table-column>
     </el-table>
   </div>
 </template>
@@ -17,6 +40,12 @@ const props = defineProps({
 
 const { options } = toRefs(props);
 const globalFormData = inject('globalFormData');
+const updateBtn = (scope) => {
+  console.log(scope);
+};
+const delBtn = (scope) => {
+  console.log(scope.row);
+};
 </script>
 <style scoped lang="less">
 </style>