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