1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071 |
- <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>
|