表单构建

src/views/tools/form/center.vue

@@ -1,16 +1,113 @@
 <template>
 	<section class="panel">
 		<el-main>
-
+			<draggable v-model="data" :scroll="true" animation="200" item-key="id" class="go-page-body"
+					   :group="group"
+					   @add="addComp" @sort="sortComp" ghostClass="ghostClass">
+				<template #item="{ element, index }">
+					<div class="comp-box">
+						<div class="comp-item" :class="{'active': curIndex==index}" @click="clickComp(element,index)">
+							<component :is="allComps[element.name]" v-model="value.components[index]"></component>
+						</div>
+						<div v-if="curIndex==index" class="tools-box">
+							<el-icon size="18" class="icon-box" @click="delComp(index)">
+								<component :is="'sc-icon-Delete'"/>
+							</el-icon>
+							<el-icon size="18" class="icon-box mt15" @click="copyComp(index)">
+								<component :is="'sc-icon-copy'"/>
+							</el-icon>
+							<el-icon size="18" class="icon-box mt15" :class="{disabled: index == 0}"
+									 @click="moveUpComp(index)">
+								<component :is="'el-icon-ArrowUpBold'"/>
+							</el-icon>
+							<el-icon size="18" class="icon-box mt15"
+									 :class="{disabled: index == value.components.length-1}"
+									 @click="moveDownComp(index)">
+								<component :is="'el-icon-ArrowDownBold'"/>
+							</el-icon>
+						</div>
+					</div>
+				</template>
+			</draggable>
 		</el-main>
 	</section>
 </template>
 
 <script setup>
+import {ref} from "vue";
+
+const emit = defineEmits(["change"])
+
+let data = ref({})
+const group = {name: 'page', pull: false, put: true}
+let curIndex = ref(0)
+let curComp = ref({})
+
+// 排序
+function sortComp(e) {
+	curIndex.value = e.newIndex
+	curComp.value = data.value.components[e.newIndex]
+}
+
+// 添加项
+function addComp(e) {
+	let element = data.value.components[e.newIndex]
+	// 删除提示
+	curIndex.value = e.newIndex
+	curComp.value = element
+	emit('change', curComp.value, curIndex.value, data.value)
+}
+
+
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .panel {
 	flex: 1;
 }
+::-webkit-scrollbar {
+	display: none;
+}
+:deep(.ghostClass) {
+	.comp {
+		display: none;
+	}
+	.tips {
+		padding: 10px;
+		border: 1px dashed var(--el-color-primary);
+		text-align: center;
+		color: var(--el-color-primary);
+	}
+}
+.active {
+	border: 2px solid #1890ff;
+	box-shadow: var(--el-box-shadow-light);
+}
+.comp-box {
+	position: relative;
+	cursor: pointer;
+	.comp-item {
+		position: relative;
+	}
+	.tools-box {
+		position: absolute;
+		right: -42px;
+		top: 0;
+		background: var(--el-color-primary);
+		display: inline-grid;
+		padding: 15px 8px;
+		border-radius: 4px;
+		.icon-box {
+			cursor: pointer;
+			color: #FFFFFF;
+		}
+		.mt15 {
+			margin-top: 15px;
+		}
+		.disabled {
+			cursor: no-drop;
+			color: #c3c3c3;
+		}
+	}
+}
 </style>

src/views/tools/form/index.vue

@@ -18,5 +18,7 @@ import rightPanel from "./right"
 </script>
 
 <style scoped>
-.main {display: flex;}
+.main {
+	display: flex;
+}
 </style>