cip-components/cip-form-design/widgets/form-components/group.vue

<template>
  <div class="component-group" v-if="group.components.length>0">
    <div class="component-group__label">
      {{group.label}}
    </div>
<!--    <ul class="component-group__list">-->
    <vue-draggable :model-value="group.components"
                   item-key="type"
                   tag="ul"
                   :group="{name: 'components', pull: 'clone', put:false}"
                   :sort="false"
                   :clone="cloneComponent">
      <template #item="{element}">
        <form-component-item :item="element" @click="addComponent(element)"></form-component-item>
      </template>
    </vue-draggable>
<!--    </ul>-->
  </div>
</template>
<script>
import { defineComponent } from 'vue'
import VueDraggable from 'vuedraggable'
import FormComponentItem from './item'
import { getCopyRow } from '../../util'

export default defineComponent({
  components: { VueDraggable, FormComponentItem },
  props: {
    group: Object
  },
  emits: ['add'],
  setup (props, { emit }) {
    const cloneComponent = (component) => {
      return getCopyRow({ config: component })
      // const type = component.type
      // const sign = generateFieldKey(type)
      // const element = {
      //   id: sign, // 选中标示
      //   key: sign,
      //   config: { ...component }
      // }
      // if (twoValueComponentList.includes(type)) {
      //   element.config.otherKey = `other_${sign}`
      // }
      // return element
    }
    const addComponent = (component) => {
      emit('add', cloneComponent(component))
    }
    return {
      cloneComponent,
      addComponent
    }
  }
})
</script>
<style lang="less">
.component-group{
  &__label{
    font-size: 13px;
    color: rgb(102, 102, 102);
    padding: 8px 12px;
  }
  ul{
    margin:0;
    padding: 0 10px 10px;
    overflow: hidden;
    position: relative;
  }
}
</style>