From 64d172717748c383a5c88348037354bffd60f966 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 27 五月 2025 17:52:03 +0800
Subject: [PATCH] 页面样式修改
---
src/views/tool/build/DraggableItem.vue | 68 ++++++++++++++++++++++++++++++++++
1 files changed, 68 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..9ae2354
--- /dev/null
+++ b/src/views/tool/build/DraggableItem.vue
@@ -0,0 +1,68 @@
+<template>
+ <el-col :span="element.span" :class="className" @click.stop="activeItem(element)">
+ <el-form-item :label="element.label" :label-width="element.labelWidth ? element.labelWidth + 'px' : null"
+ :required="element.required" v-if="element.layout === 'colFormItem'">
+ <render :key="element.tag" :conf="element" v-model="element.defaultValue" />
+ </el-form-item>
+ <el-row :gutter="element.gutter" :class="element.class" @click.stop="activeItem(element)" v-else>
+ <span class="component-name"> {{ element.componentName }} </span>
+ <draggable group="componentsGroup" :animation="340" :list="element.children" class="drag-wrapper" item-key="label"
+ ref="draggableItemRef" :component-data="getComponentData()">
+ <template #item="scoped">
+ <draggable-item :key="scoped.element.renderKey" :drawing-list="element.children" :element="scoped.element"
+ :index="index" :active-id="activeId" :form-conf="formConf" @activeItem="activeItem(scoped.element)"
+ @copyItem="copyItem(scoped.element, element.children)"
+ @deleteItem="deleteItem(scoped.index, element.children)" />
+ </template>
+ </draggable>
+ </el-row>
+ <span class="drawing-item-copy" title="澶嶅埗" @click.stop="copyItem(element)">
+ <el-icon><CopyDocument /></el-icon>
+ </span>
+ <span class="drawing-item-delete" title="鍒犻櫎" @click.stop="deleteItem(index)">
+ <el-icon><Delete /></el-icon>
+ </span>
+ </el-col>
+</template>
+<script setup name="DraggableItem">
+import draggable from "vuedraggable/dist/vuedraggable.common"
+import render from '@/utils/generator/render'
+
+const props = defineProps({
+ element: Object,
+ index: Number,
+ drawingList: Array,
+ activeId: {
+ type: [String, Number]
+ },
+ formConf: Object
+})
+const className = ref('')
+const draggableItemRef = ref(null)
+const emits = defineEmits(['activeItem', 'copyItem', 'deleteItem'])
+
+function activeItem(item) {
+ emits('activeItem', item)
+}
+function copyItem(item, parent) {
+ emits('copyItem', item, parent ?? props.drawingList)
+}
+function deleteItem(item, parent) {
+ emits('deleteItem', item, parent ?? props.drawingList)
+}
+
+function getComponentData() {
+ return {
+ gutter: props.element.gutter,
+ justify: props.element.justify,
+ align: props.element.align
+ }
+}
+
+watch(() => props.activeId, (val) => {
+ className.value = (props.element.layout === 'rowFormItem' ? 'drawing-row-item' : 'drawing-item') + (val === props.element.formId ? ' active-from-item' : '')
+ if (props.formConf.unFocusedComponentBorder) {
+ className.value += ' unfocus-bordered'
+ }
+}, { immediate: true })
+</script>
\ No newline at end of file
--
Gitblit v1.9.3