| 提交 | 用户 | 时间 | ||
| fd2207 | 1 | <script> |
| 懒 | 2 | import draggable from 'vuedraggable' |
| 3 | import render from '@/utils/generator/render' | |
| 4 | ||
| 5 | const components = { | |
| 6 | itemBtns(h, element, index, parent) { | |
| 7 | const { copyItem, deleteItem } = this.$listeners | |
| 8 | return [ | |
| 9 | <span class="drawing-item-copy" title="复制" onClick={event => { | |
| 10 | copyItem(element, parent); event.stopPropagation() | |
| 11 | }}> | |
| 12 | <i class="el-icon-copy-document" /> | |
| 13 | </span>, | |
| 14 | <span class="drawing-item-delete" title="删除" onClick={event => { | |
| 15 | deleteItem(index, parent); event.stopPropagation() | |
| 16 | }}> | |
| 17 | <i class="el-icon-delete" /> | |
| 18 | </span> | |
| 19 | ] | |
| 20 | } | |
| 21 | } | |
| 22 | const layouts = { | |
| 23 | colFormItem(h, element, index, parent) { | |
| 24 | const { activeItem } = this.$listeners | |
| 25 | let className = this.activeId === element.formId ? 'drawing-item active-from-item' : 'drawing-item' | |
| 26 | if (this.formConf.unFocusedComponentBorder) className += ' unfocus-bordered' | |
| 27 | return ( | |
| 28 | <el-col span={element.span} class={className} | |
| 29 | nativeOnClick={event => { activeItem(element); event.stopPropagation() }}> | |
| 30 | <el-form-item label-width={element.labelWidth ? `${element.labelWidth}px` : null} | |
| 31 | label={element.label} required={element.required}> | |
| 32 | <render key={element.renderKey} conf={element} onInput={ event => { | |
| 33 | this.$set(element, 'defaultValue', event) | |
| 34 | }} /> | |
| 35 | </el-form-item> | |
| 36 | {components.itemBtns.apply(this, arguments)} | |
| 37 | </el-col> | |
| 38 | ) | |
| 39 | }, | |
| 40 | rowFormItem(h, element, index, parent) { | |
| 41 | const { activeItem } = this.$listeners | |
| 42 | const className = this.activeId === element.formId ? 'drawing-row-item active-from-item' : 'drawing-row-item' | |
| 43 | let child = renderChildren.apply(this, arguments) | |
| 44 | if (element.type === 'flex') { | |
| 45 | child = <el-row type={element.type} justify={element.justify} align={element.align}> | |
| 46 | {child} | |
| 47 | </el-row> | |
| 48 | } | |
| 49 | return ( | |
| 50 | <el-col span={element.span}> | |
| 51 | <el-row gutter={element.gutter} class={className} | |
| 52 | nativeOnClick={event => { activeItem(element); event.stopPropagation() }}> | |
| 53 | <span class="component-name">{element.componentName}</span> | |
| 54 | <draggable list={element.children} animation={340} group="componentsGroup" class="drag-wrapper"> | |
| 55 | {child} | |
| 56 | </draggable> | |
| 57 | {components.itemBtns.apply(this, arguments)} | |
| 58 | </el-row> | |
| 59 | </el-col> | |
| 60 | ) | |
| 61 | } | |
| 62 | } | |
| 63 | ||
| 64 | function renderChildren(h, element, index, parent) { | |
| 65 | if (!Array.isArray(element.children)) return null | |
| 66 | return element.children.map((el, i) => { | |
| 67 | const layout = layouts[el.layout] | |
| 68 | if (layout) { | |
| 69 | return layout.call(this, h, el, i, element.children) | |
| 70 | } | |
| 71 | return layoutIsNotFound() | |
| 72 | }) | |
| 73 | } | |
| 74 | ||
| 75 | function layoutIsNotFound() { | |
| 76 | throw new Error(`没有与${this.element.layout}匹配的layout`) | |
| 77 | } | |
| 78 | ||
| 79 | export default { | |
| 80 | components: { | |
| 81 | render, | |
| 82 | draggable | |
| 83 | }, | |
| 84 | props: [ | |
| 85 | 'element', | |
| 86 | 'index', | |
| 87 | 'drawingList', | |
| 88 | 'activeId', | |
| 89 | 'formConf' | |
| 90 | ], | |
| 91 | render(h) { | |
| 92 | const layout = layouts[this.element.layout] | |
| 93 | ||
| 94 | if (layout) { | |
| 95 | return layout.call(this, h, this.element, this.index, this.drawingList) | |
| 96 | } | |
| 97 | return layoutIsNotFound() | |
| 98 | } | |
| 99 | } | |
| 100 | </script> | |
