拖拽插件添加拖拽数量控制

fhKeeper/formulahousekeeper/plugIn/form-design-master/src/components/ComponentGroup.vue

@@ -10,6 +10,8 @@
     :clone="cloneWidget"
     :sort="false"
     :list="list"
+    :move="moveStart"
+    @add="stopMove()"
   >
     <template #item="{ element }">
       <li
@@ -24,9 +26,22 @@
 </template>
 <script lang="ts" setup>
 import Draggable from 'vuedraggable'
+import { ElMessage } from 'element-plus'
 import { cloneDeep } from 'lodash-es'
 
-defineProps<{ fields: any[]; title: string; list: any[] }>()
+const props = defineProps<{ fields: any[]; title: string; list: any[], allList: any }>()
+let moveFlag = $ref(false)
+const moveStart = () => {
+  const flag = props.allList.list.length < 5
+  if(!flag && !moveFlag) {
+    moveFlag = true
+    ElMessage.warning('最多添加五个')
+  }
+  return flag
+}
+const stopMove = () => {
+  moveFlag = false
+}
 </script>
 
 <script lang="ts">

fhKeeper/formulahousekeeper/plugIn/form-design-master/src/design/DesignForm.vue

@@ -5,16 +5,19 @@
         title="基础字段"
         :fields="basicFieldsList"
         :list="basicComponents"
+        :allList="widgetForm"
       />
       <ComponentGroup
         title="高级字段"
         :fields="advanceFieldsList"
         :list="advanceComponents"
+        :allList="widgetForm"
       />
       <ComponentGroup
         title="布局字段"
         :fields="layoutFieldsList"
         :list="layoutComponents"
+        :allList="widgetForm"
       />
     </aside>