From 8a1c08baaf0ee002b471996b195e7da180b90209 Mon Sep 17 00:00:00 2001
From: feige <791364011@qq.com>
Date: 星期一, 21 七月 2025 09:38:47 +0800
Subject: [PATCH] 增加了前端代码库
---
src/views/tool/build/DraggableItem.vue | 100 ++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 100 insertions(+), 0 deletions(-)
diff --git a/src/views/tool/build/DraggableItem.vue b/src/views/tool/build/DraggableItem.vue
new file mode 100644
index 0000000..e881778
--- /dev/null
+++ b/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}鍖归厤鐨刲ayout`)
+}
+
+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>
--
Gitblit v1.9.1