<script> import draggable from 'vuedraggable' import render from '@/utils/generator/render' const components = { itemBtns(h, element, index, parent) { const { copyItem, deleteItem } = this.$listeners return [ <span class="drawing-item-copy" title="复制" onClick={event => { copyItem(element, parent); event.stopPropagation() }}> <i class="el-icon-copy-document" /> </span>, <span class="drawing-item-delete" title="删除" onClick={event => { deleteItem(index, parent); event.stopPropagation() }}> <i class="el-icon-delete" /> </span> ] } } const layouts = { colFormItem(h, element, index, parent) { const { activeItem } = this.$listeners let className = this.activeId === element.formId ? 'drawing-item active-from-item' : 'drawing-item' if (this.formConf.unFocusedComponentBorder) className += ' unfocus-bordered' return ( <el-col span={element.span} class={className} nativeOnClick={event => { activeItem(element); event.stopPropagation() }}> <el-form-item label-width={element.labelWidth ? `${element.labelWidth}px` : null} label={element.label} required={element.required}> <render key={element.renderKey} conf={element} onInput={ event => { this.$set(element, 'defaultValue', event) }} /> </el-form-item> {components.itemBtns.apply(this, arguments)} </el-col> ) }, rowFormItem(h, element, index, parent) { const { activeItem } = this.$listeners const className = this.activeId === element.formId ? 'drawing-row-item active-from-item' : 'drawing-row-item' let child = renderChildren.apply(this, arguments) if (element.type === 'flex') { child = <el-row type={element.type} justify={element.justify} align={element.align}> {child} </el-row> } return ( <el-col span={element.span}> <el-row gutter={element.gutter} class={className} nativeOnClick={event => { activeItem(element); event.stopPropagation() }}> <span class="component-name">{element.componentName}</span> <draggable list={element.children} animation={340} group="componentsGroup" class="drag-wrapper"> {child} </draggable> {components.itemBtns.apply(this, arguments)} </el-row> </el-col> ) } } function renderChildren(h, element, index, parent) { if (!Array.isArray(element.children)) return null return element.children.map((el, i) => { const layout = layouts[el.layout] if (layout) { return layout.call(this, h, el, i, element.children) } return layoutIsNotFound() }) } function layoutIsNotFound() { throw new Error(`没有与${this.element.layout}匹配的layout`) } export default { components: { render, draggable }, props: [ 'element', 'index', 'drawingList', 'activeId', 'formConf' ], render(h) { const layout = layouts[this.element.layout] if (layout) { return layout.call(this, h, this.element, this.index, this.drawingList) } return layoutIsNotFound() } } </script>