若依 2.1

2020-02-24 09:28:16 +08:00
parent 46a1695292
commit cb0a4b78ee
61 changed files with 4144 additions and 60 deletions
--- a/ruoyi-ui/src/views/tool/build/DraggableItem.vue
+++ b/ruoyi-ui/src/views/tool/build/DraggableItem.vue
@ -0,0 +1,100 @@
+<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>