春风项目四线(合箱线、总装线)
jiang
2024-01-24 ed7f09e0376d542bfddb05268f0081ba89a86868
提交 | 用户 | 时间
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>