修改表单构建

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

@@ -1,5 +1,6 @@
 <script lang="ts">
 import hwInput from './hw-input.vue';
+import hwInputNumber from './hw-input-number.vue';
 import hwTable from './hw-table.vue';
 import tool from './tool.vue';
 
@@ -7,6 +8,7 @@ export default {
   name: 'hw-form',
   components: {
     hwInput,
+    hwInputNumber,
     hwTable,
     tool
   }
@@ -31,7 +33,7 @@ export default {
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup>hwInput;
 import draggable from 'vuedraggable';
 import nestedDraggable from '@/views/tool/draggable/nest.vue';
 

src/views/tool/draggable/elements/hw-input-number.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="hw-input" @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" />
+    <el-form-item :label="options.name" :required="options.required">
+      <el-input-number v-model="formData[options.key || ('input-'+options.uuid)]" :disabled="options.disabled"
+                       :step="options.step" :min="options.min || -Infinity" :max="options.max || Infinity"
+                       :controls-position="options.controlsPosition?'right':'' "
+      />
+    </el-form-item>
+  </div>
+</template>
+<script lang="ts" setup>
+import tool from './tool.vue';
+import { inject } from 'vue';
+
+defineOptions({
+  name: 'hw-input-number'
+});
+
+const props = defineProps({
+  options: Object,
+  formData: Object
+});
+const { options, formData } = toRefs(props);
+const getOptions = inject('getOptions');
+
+const selectUuid = inject('selectUuid');
+const getSelectUuid = inject('getSelectUuid');
+const inputClick = () => {
+  getOptions(options.value);
+  getSelectUuid(options.value.uuid);
+};
+</script>
+<style scoped lang="less">
+.hw-input {
+  margin: 2px;
+  border: 1px solid #0000;
+  position: relative;
+  padding: 12px 2px 2px;
+
+  &:hover {
+    background-color: #0001;
+    border: 1px solid #00afff;
+  }
+}
+</style>
+
+
+

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

@@ -3,7 +3,8 @@
        :style="`background-color: ${(selectUuid === options.uuid) ? '#0001':'#0000'};border-color: ${(selectUuid === options.uuid) ? '#00afff':'#0000'}`">
     <tool v-if="selectUuid === options.uuid" :options="options" />
     <el-form-item :label="options.name" :required="options.required">
-      <el-input v-model="formData[options.key || ('input-'+options.uuid)]" :disabled="options.disabled" />
+      <el-input v-model="formData[options.key || ('input-'+options.uuid)]" :disabled="options.disabled"
+                :type="options.type" :show-password="options.type === 'password'" autocomplete="new-password" />
     </el-form-item>
   </div>
 </template>

src/views/tool/draggable/index.vue

@@ -138,7 +138,13 @@ const dragList = [
     name: '多行文本',
     id: 3
   },
-  { type: 'hw-input-number', isContainer: false, options: { name: '计数器', step: 2 }, name: '计数器', id: 4 },
+  {
+    type: 'hw-input-number',
+    isContainer: false,
+    options: { name: '计数器', step: 1, disabled: false, min: -Infinity, max: Infinity, controlsPosition: false },
+    name: '计数器',
+    id: 4
+  },
   {
     type: 'hw-radio-group', isContainer: false,
     options: { name: '单选框组', items: [{ value: '1', label: '1' }, { value: '1', label: '1' }] },
@@ -162,9 +168,11 @@ const dragViewList = [
         }
       ],
       dataKey: '',
+      isOperate: true,
       updateFunction: '',
+      addFunction: '',
       deleteFunction: '',
-      isOperate: true
+      delField: ''
     },
     name: '表格',
     id: 101

src/views/tool/draggable/nest.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
 import hwInput from './elements/hw-input.vue';
+import hwInputNumber from './elements/hw-input-number.vue';
 import hwTable from './elements/hw-table.vue';
 import hwForm from './elements/hw-form.vue';
 
@@ -7,6 +8,7 @@ export default {
   name: 'nested-draggable',
   components: {
     hwInput,
+    hwInputNumber,
     hwTable,
     hwForm
   }

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

@@ -0,0 +1,22 @@
+<template>
+  <el-form-item :label="itemName">
+    <el-input-number v-model="formData[keyValue]" />
+  </el-form-item>
+</template>
+<script lang="ts" setup>
+
+const props = defineProps({
+  formData: String,
+  keyValue: String,
+  itemName: String
+});
+
+const { formData, keyValue, itemName } = toRefs(props);
+
+
+</script>
+<style scoped lang="less">
+</style>
+
+
+

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

@@ -1,6 +1,7 @@
 <script lang="ts">
 
 import inputType from './inputType.vue';
+import inputNumberType from './inputNumberType.vue';
 import tableType from './tableType.vue';
 import inputAreaType from './inputAreaType.vue';
 import switchType from './switchType.vue';
@@ -10,6 +11,7 @@ export default {
   name: 'option-form',
   components: {
     inputType,
+    inputNumberType,
     tableType,
     inputAreaType,
     switchType,
@@ -32,11 +34,12 @@ const props = defineProps({
 const { formData } = toRefs(props);
 
 const typeEnum = {
-  inputType: ['name', 'key', 'labelWidth', 'submitBottomName', 'resetBottomName', 'total', 'pageNum', 'pageSize', 'dataKey'],
+  inputType: ['name', 'key', 'labelWidth', 'submitBottomName', 'resetBottomName', 'total', 'pageNum', 'pageSize', 'dataKey', 'delField'],
   inputAreaType: [],
+  inputNumberType: ['min', 'max', 'step'],
   tableType: ['thTdMap'],
-  switchType: ['isReset', 'isResetBottom', 'isSubmitBottom', 'disabled', 'isPagination', 'isInLine', 'isOperate'],
-  functionType: ['submitFunction', 'updateFunction', 'deleteFunction']
+  switchType: ['isReset', 'isResetBottom', 'isSubmitBottom', 'disabled', 'isPagination', 'isInLine', 'isOperate', 'controlsPosition'],
+  functionType: ['submitFunction', 'updateFunction', 'deleteFunction', 'addFunction']
 };
 const nameEnum = {
   name: '组件名称',
@@ -58,7 +61,13 @@ const nameEnum = {
   thTdMap: '表单数据设置',
   updateFunction: '修改函数',
   deleteFunction: '删除函数',
-  isOperate: '是否显示操作组'
+  addFunction: '新增函数',
+  isOperate: '是否显示操作组',
+  delField: '删除的字段名',
+  min: '最小值',
+  max: '最大值',
+  step: '步长',
+  controlsPosition: '按钮是否位于右侧'
 };
 const getType = (e) => {
   let res = '';

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

@@ -62,7 +62,9 @@ const { formData, keyValue, itemName } = toRefs(props);
 const onAddItem = () => {
   formData.value[keyValue.value].push({
     name: '',
-    keyName: ''
+    keyName: '',
+    type: 'input',
+    isUpdate: true
   });
 };
 const delItem = (e) => {

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

@@ -1,6 +1,7 @@
 <template>
   <el-form-item :label="options.name" :required="options.required">
-    <el-input v-model="formData[options.key || ('input-'+options.uuid)]" :disabled="options.disabled" />
+    <el-input v-model="formData[options.key || ('input-'+options.uuid)]" :disabled="options.disabled"
+              :type="options.type" :show-password="options.type === 'password'" />
   </el-form-item>
 </template>
 <script lang="ts" setup>

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

@@ -11,9 +11,11 @@ export default {
 <template>
   <div>
     <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>
+      <el-button :icon="Plus" type="primary" @click="addBtn">新增</el-button>
+      <el-button :icon="Edit" type="success" :disabled="SelectionList.length !== 1" @click="operateUpdateBtn">编辑
+      </el-button>
+      <el-button :icon="Delete" type="danger" :disabled="!(SelectionList.length >= 1)" @click="operateDelBtn">删除
+      </el-button>
     </div>
     <el-table :data="cs || globalFormData.pageVariable[options.dataKey]"
               style="width: 100%"
@@ -45,9 +47,24 @@ export default {
       </el-table-column>
     </el-table>
 
+    <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}" />
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="tableAddFormVisible = false;form={}">关闭</el-button>
+          <el-button type="primary" @click="addSubmit">
+            提交
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
     <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"
+        <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}" />
       </el-form>
       <template #footer>
@@ -82,7 +99,9 @@ const cs = [
 const { options } = toRefs(props);
 const globalFormData = inject('globalFormData');
 const tableUpdateFormVisible = ref(false);
+const tableAddFormVisible = ref(false);
 const form = ref({});
+const addForm = ref({});
 const formDataOperation = inject('formDataOperation');
 const localData = ref({});
 const SelectionList = ref([]);
@@ -92,11 +111,66 @@ const tableSelectionChange = (e) => {
   console.log(SelectionList.value);
 };
 const addBtn = () => {
-
+  tableAddFormVisible.value = true;
+  addForm.value = {};
+};
+const addSubmit = async () => {
+  tableAddFormVisible.value = false;
+  try {
+    const fun = () => {
+      return `return async ()=>{
+        ${options.value.updateFunction}
+      }`;
+    };
+    const addFunction = new Function('formData', 'request', 'formDataOperation', 'localData', fun());
+    await addFunction(addForm.value, request, formDataOperation, localData.value)();
+    tableAddFormVisible.value = false;
+  } catch (e) {
+    console.log(e);
+  }
+};
+const operateUpdateBtn = () => {
+  form.value = SelectionList.value?.[0] || {};
+  tableUpdateFormVisible.value = true;
+};
+const operateDelBtn = () => {
+  ElMessageBox.confirm(
+    '确定删除这些数据吗?',
+    'Warning',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+      beforeClose: async (action, instance, done) => {
+        try {
+          const fun = () => {
+            return `return async ()=>{
+        ${options.value.deleteFunction}
+      }`;
+          };
+          const deleteFunction = new Function('formData', 'request', 'formDataOperation', 'localData', fun());
+          await deleteFunction({ [options.value.delField]: SelectionList.value.map(v => v[options.value.delField]) }, request, formDataOperation, localData.value)();
+          done();
+        } catch (e) {
+          console.log(e);
+        }
+      }
+    }
+  )
+    .then(async () => {
+      ElMessage({
+        type: 'success',
+        message: '删除完成'
+      });
+    })
+    .catch(() => {
+      ElMessage({
+        type: 'info',
+        message: '取消删除'
+      });
+    });
 };
 const updateBtn = (scope) => {
-  console.log(scope);
-  console.log(options.value.thTdMap);
   form.value = scope.row;
   tableUpdateFormVisible.value = true;
 };
@@ -109,6 +183,7 @@ const onSubmit = async () => {
     };
     const updateFunction = new Function('formData', 'request', 'formDataOperation', 'localData', fun());
     await updateFunction(form.value, request, formDataOperation, localData.value)();
+    tableUpdateFormVisible.value = false;
     console.log();
   } catch (e) {
     console.log(e);
@@ -123,7 +198,7 @@ const delBtn = async (scope) => {
       }`;
     };
     const deleteFunction = new Function('formData', 'request', 'formDataOperation', 'localData', fun());
-    await deleteFunction(scope.row, request, formDataOperation, localData.value)();
+    await deleteFunction({ [options.value.delField]: scope.row[options.value.delField] }, request, formDataOperation, localData.value)();
   } catch (e) {
     console.log(e);
   }