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

<template>
  <div class="px-3 py-2 text-sm text-gray-700">
    {{ title }}
  </div>
  <Draggable tag="ul" class="m-0 p-3 pt-0 grid grid-cols-2 gap-1" item-key="type"
    :group="{ name: 'form-design', pull: 'clone', put: false }" :clone="cloneWidget" :sort="false" :list="list"
    :allList="allList" :move="moveStart" :choose="setListIndex(allList)" @add="stopMove()">
    <template #item="{ element }">
      <li v-if="fields.includes(element.type)"
        class="bg-gray-100 text-xs text-gray-700 hover:text-blue-500 leading-8 cursor-move -outline-offset-1 hover:outline-dashed outline-1 outline-blue-500 list-none flex items-center">
        <i :class="'custom:' + element.type" class="ml-2 mr-1" />
        <span>{{ element.label }}</span>
      </li>
    </template>
  </Draggable>
</template>
<script lang="ts" setup>
import Draggable from 'vuedraggable'
import { ElMessage } from 'element-plus'
import { cloneDeep } from 'lodash-es'

const props = defineProps<{ fields: any[]; title: string; list: any[], allList: any }>()
let moveFlag = $ref(false)
const moveStart = () => {
  // const flag = props.allList.list.length < 5
  const array = props.allList.list.map((item: any) => item.model)
  const plateNumbers = array.filter((item: any) => item.includes('plate')).map((item: any) => {
    const match = item.match(/plate(\d+)/);
    return match ? match[1] : null;
  });
  const flag = plateNumbers.length < 5
  if (!flag && !moveFlag) {
    moveFlag = true
    ElMessage.warning('最多添加五个')
    return false
  }
  return flag
}
const stopMove = () => {
  moveFlag = false
}
</script>

<script lang="ts">
let listIndex = 1
function setListIndex(list: any) {
  if (list.list.length > 0) {
    const array = list.list.map((item: any) => item.model)
    const plateNumbers = array.filter((item: any) => item.includes('plate')).map((item: any) => {
      const match = item.match(/plate(\d+)/);
      return match ? match[1] : null;
    });
    listIndex = findMissingPositive(plateNumbers)
  }
}

export function cloneWidget(params: any) {
  const key = Math.random().toString(36).substring(2, 9)
  params = cloneDeep({
    ...params,
    key,
    // model: `${params.type}_${key}`,
    model: `plate${listIndex}`,
  })
  if (params.type === 'grid') {
    params.columns.forEach((i: any) => {
      i.list = i.list.map(cloneWidget)
    })
  }
  return params
}

function findMissingPositive(nums: any) {
    let numbers = nums.map(Number);
    numbers.sort((a:any, b:any) => a - b);
    let missing = 1;
    for (let i = 0; i < numbers.length; i++) {
        if (numbers[i] === missing) {
            missing++;
        }
    }
    return missing;
}
</script>