From 62b0743abd407846e2493f42aec90c68b54a0955 Mon Sep 17 00:00:00 2001
From: zhang zhuo <cfn@leapy.cn>
Date: Fri, 28 Nov 2025 17:53:35 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A1=A8=E5=8D=95=E6=9E=84=E5=BB=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/tools/form/center.vue |  22 ++++-
 src/views/tools/form/config.ts  |   4 +
 src/views/tools/form/drag.vue   | 167 ++++++++++++++++++--------------
 src/views/tools/form/index.vue  |  18 +++-
 src/views/tools/form/item.vue   |  10 +-
 src/views/tools/form/left.vue   |  47 ++++-----
 src/views/tools/form/right.vue  |  35 ++++---
 7 files changed, 172 insertions(+), 131 deletions(-)

diff --git a/src/views/tools/form/center.vue b/src/views/tools/form/center.vue
index 8eca0e7..9a00887 100644
--- a/src/views/tools/form/center.vue
+++ b/src/views/tools/form/center.vue
@@ -4,7 +4,8 @@
 			<el-main class="h100">
 				<el-form class="h100" :label-position="config.labelPosition" :label-width="config.labelWidth"
 						 :size="config.size" :disabled="config.disabled">
-					<drag :fields="fields" @change="changeHandle" name="page" v-model:curId="curId"/>
+					<drag :fields="fields" @change="changeHandle" name="page" v-model:curKey="curKey"
+						  v-model:counter="counter"/>
 				</el-form>
 			</el-main>
 		</el-scrollbar>
@@ -12,16 +13,27 @@
 </template>
 
 <script setup>
-import {ref} from "vue"
+import {computed, ref} from "vue"
 import drag from "./drag.vue"
+
 defineExpose({clickAddComp})
 
 const props = defineProps({
 	fields: {type: Array, default: []},
-	config: {type: Object, default: {}}
+	config: {type: Object, default: {}},
+	counter: {type: Number, default: 0}
+})
+const emit = defineEmits(['change', "update:counter"])
+let curKey = ref("")
+
+const counter = computed({
+	get() {
+		return props.counter
+	},
+	set(value) {
+		emit('update:counter', value)
+	}
 })
-const emit = defineEmits(['change'])
-let curId = ref("")
 
 // 添加项时
 function clickAddComp(e) {
diff --git a/src/views/tools/form/config.ts b/src/views/tools/form/config.ts
index 2e6ef85..8b431e4 100644
--- a/src/views/tools/form/config.ts
+++ b/src/views/tools/form/config.ts
@@ -188,6 +188,7 @@ export const fieldEditors = {
 		{key: 'props.disabled', label: '是否禁用', type: 'switch'},
 	],
 	button: [
+		{key: 'labelWidth', label: '标签宽度', type: 'number'},
 		{key: 'btnText', label: '按钮文字', type: 'input'},
 		{
 			key: 'props.type', label: '按钮类型', type: 'select', options: [
@@ -205,6 +206,9 @@ export const fieldEditors = {
 		{key: 'props.round', label: '圆角按钮', type: 'switch'},
 		{key: 'props.circle', label: '圆形按钮', type: 'switch'},
 		{key: 'props.disabled', label: '是否禁用', type: 'switch'},
+	],
+	layout: [
+		{key: 'props.gutter', label: '分栏间隔', type: 'number'},
 	]
 }
 // 'year' | 'years' |'month' | 'months' | 'date' | 'dates' | 'datetime' | 'week' | 'datetimerange' | 'daterange' | 'monthrange' | 'yearrange'
diff --git a/src/views/tools/form/drag.vue b/src/views/tools/form/drag.vue
index 3762038..b1dce77 100644
--- a/src/views/tools/form/drag.vue
+++ b/src/views/tools/form/drag.vue
@@ -1,25 +1,26 @@
 <template>
 	<draggable :list="fields" :scroll="true" animation="200" item-key="id" class="w100 h100"
 			   :group="group" @update:list="fields = $event" @add="addComp" @sort="sortComp"
-			   ghostClass="ghostClass" :class="{empty: fields.length === 0}">
+			   ghostClass="ghostClass" :class="{empty: fields.length === 0, layout: isRow}">
 		<template #item="{ element, index }">
-			<div class="box w100">
-				<el-row v-if="element.name === 'layout'" class="item row" :class="{'active': curr===element.field}"
+			<el-col :span="element.span || 24" class="col">
+				<el-row v-if="element.name === 'layout'" class="item row" :class="{'active': curr===element.id}"
 						@click.stop="clickComp(element)" v-bind="element.props">
-					<span class="name">{{ element.field }}</span>
-					<drag :fields="element.children" @change="changeHandle" :name="element.field" v-model:curId="curr"/>
+					<span class="name">{{ element.field_name }}</span>
+					<drag :fields="element.children" v-model:curKey="curr" :name="element.field_name"
+						  :is-row="true" v-model:counter="counter" @change="changeHandle"/>
 				</el-row>
-				<item v-else class="item" :class="{'active': curr===element.field}" :field="element"
+				<item v-else class="item" :class="{'active': curr===element.id}" :field="element"
 					  @click.stop="clickComp(element)"/>
-				<div v-if="curr===element.field" class="tools-box">
-					<el-icon size="22" class="icon-box remove" @click="delComp(index)">
+				<div v-if="curr===element.id" class="tools-box">
+					<el-icon size="22" class="icon-box remove" @click.stop="delComp(index)">
 						<component :is="'pi-icon-shan-chu'"/>
 					</el-icon>
-					<el-icon size="20" class="icon-box copy ml5" @click="copyComp(index)">
+					<el-icon size="20" class="icon-box copy ml5" @click.stop="copyComp(index)">
 						<component :is="'pi-icon-fu-zhi'"/>
 					</el-icon>
 				</div>
-			</div>
+			</el-col>
 		</template>
 	</draggable>
 </template>
@@ -27,25 +28,36 @@
 <script setup>
 import draggable from 'vuedraggable'
 import {computed, nextTick} from "vue"
-import tools from "@/utils/tools"
 import item from "./item.vue"
 import drag from "./drag.vue"
+import tools from "@/utils/tools.js"
 
-const emit = defineEmits(['change', 'update:curId'])
+const emit = defineEmits(['change', 'update:curKey', 'update:counter'])
 
 const props = defineProps({
 	fields: {type: Array, default: []},
-	name: {type: String, default: 'page'},
-	curId: {type: String, default: ''},
+	curKey: {type: String, default: ''},
+	isRow: {type: Boolean, default: false},
+	counter: {type: Number, default: 0},
+	name: {type: String, default: 'page'}
 })
 
 const group = {name: props.name, pull: true, put: true}
 const curr = computed({
 	get() {
-		return props.curId
+		return props.curKey
 	},
 	set(value) {
-		emit('update:curId', value)
+		emit('update:curKey', value)
+	}
+})
+
+const counter = computed({
+	get() {
+		return props.counter
+	},
+	set(value) {
+		emit('update:counter', value)
 	}
 })
 
@@ -53,7 +65,7 @@ const curr = computed({
 function sortComp(e) {
 	let element = props.fields[e.newIndex]
 	if (element) {
-		curr.value = element.field
+		curr.value = element.id
 		emit('change', element)
 	}
 }
@@ -61,16 +73,19 @@ function sortComp(e) {
 // 添加项时
 function addComp(e) {
 	let element = props.fields[e.newIndex]
-	curr.value = element.field
+	if (props.isRow) {
+		element.span = 12
+	}
+	curr.value = element.id
 	emit('change', element)
 }
 
 // 选中项
 function clickComp(element) {
-	if (curr.value === element.field) {
+	if (curr.value === element.id) {
 		return;
 	}
-	curr.value = element.field
+	curr.value = element.id
 	emit('change', element)
 }
 
@@ -91,7 +106,7 @@ function delComp(index) {
 			}
 		}
 		let element = props.fields[i] || {}
-		curr.value = element.field || null
+		curr.value = element.id || null
 		emit('change', element)
 	})
 }
@@ -100,23 +115,21 @@ function copyComp(index) {
 	nextTick(() => {
 		// 复制当前元素到尾部
 		const tmp = JSON.parse(JSON.stringify(props.fields[index]))
-		tmp.field = increaseNum(tmp.field)
+		tmp.field_name = increaseNum(tmp.field_name)
+		tmp.id = increaseNum(tmp.id)
+		counter.value++
 		props.fields.push(tmp)
 		// 将复制的元素移动到当前元素下边
 		tools.array.zIndexTo(props.fields, props.fields.length - 1, index + 1)
 		let element = props.fields[index + 1]
-		element.field = increaseNum(element.field)
-		curr.value = element.field
+		curr.value = element.id
 		emit('change', element)
 	})
 }
 
 function increaseNum(str) {
-	return str.replace(/(\d+)(?!.*\d)/, (match) => {
-		// 处理前导 0
-		const len = match.length;
-		const num = (parseInt(match, 10) + 1).toString();
-		return num.padStart(len, '0');
+	return str.replace(/(\d+)(?!.*\d)/, () => {
+		return props.counter.toString();
 	});
 }
 
@@ -139,6 +152,10 @@ function changeHandle(e) {
 	}
 }
 
+:deep(.el-form-item,.el-form-item--default) {
+	margin-bottom: 0 !important;
+}
+
 .w100 {
 	width: 100%;
 }
@@ -149,6 +166,11 @@ function changeHandle(e) {
 
 .empty {
 	padding: 40px 0;
+	display: block !important;
+}
+
+.layout {
+	display: contents;
 }
 
 .active {
@@ -156,61 +178,60 @@ function changeHandle(e) {
 	color: #787be8;
 }
 
-.box {
+.col {
 	position: relative;
-	cursor: pointer;
+}
 
-	.item {
-		padding: 12px 10px;
-		border: 1px;
-		border-radius: 3px;
-		position: relative;
-	}
+.item {
+	padding: 12px 10px;
+	border: 1px;
+	border-radius: 3px;
+	position: relative;
+	margin-bottom: 18px !important;
+}
 
-	.row {
-		border: 1px dashed #c1c1c1;
-		margin-bottom: 18px;
-		padding: 20px 12px;
+.row {
+	border: 1px dashed #c1c1c1;
+	padding: 20px 12px;
 
-		.name {
-			position: absolute;
-			top: 0;
-			left: 0;
-			font-size: 12px;
-			color: #bbb;
-			display: inline-block;
-			padding: 0 6px;
-		}
-	}
-
-	.tools-box {
+	.name {
 		position: absolute;
-		right: 10px;
-		top: -16px;
+		top: 0;
+		left: 0;
+		font-size: 12px;
+		color: #bbb;
 		display: inline-block;
-		padding: 5px;
-		border-radius: 4px;
+		padding: 0 6px;
+	}
+}
 
-		.icon-box {
-			cursor: pointer;
-		}
+.tools-box {
+	position: absolute;
+	right: 10px;
+	top: -16px;
+	display: inline-block;
+	padding: 5px;
+	border-radius: 4px;
 
-		.icon-box.remove {
-			color: var(--el-color-danger);
-		}
+	.icon-box {
+		cursor: pointer;
+	}
 
-		.icon-box.copy {
-			color: var(--el-color-primary);
-		}
+	.icon-box.remove {
+		color: var(--el-color-danger);
+	}
 
-		.ml5 {
-			margin-left: 5px;
-		}
+	.icon-box.copy {
+		color: var(--el-color-primary);
+	}
 
-		.disabled {
-			cursor: no-drop;
-			color: #c3c3c3;
-		}
+	.ml5 {
+		margin-left: 5px;
+	}
+
+	.disabled {
+		cursor: no-drop;
+		color: #c3c3c3;
 	}
 }
 </style>
diff --git a/src/views/tools/form/index.vue b/src/views/tools/form/index.vue
index 924230d..098950a 100644
--- a/src/views/tools/form/index.vue
+++ b/src/views/tools/form/index.vue
@@ -1,9 +1,10 @@
 <template>
 	<el-container class="pi-panel">
 		<el-main class="main">
-			<left-panel @addField="addField"></left-panel>
+			<left-panel @addField="addField" v-model:counter="counter"></left-panel>
 			<el-divider direction="vertical" style="height: 100%"/>
-			<center-panel ref="centerRef" :fields="fields" :config="config" @change="setField"></center-panel>
+			<center-panel ref="centerRef" :fields="fields" :config="config" @change="setField"
+						  v-model:counter="counter"></center-panel>
 			<el-divider direction="vertical" style="height: 100%"/>
 			<right-panel :config="config" :curField="curField" @save="tempSave"></right-panel>
 		</el-main>
@@ -30,14 +31,19 @@ let config = ref({
 	disabled: false
 })
 let curField = ref({})
+let counter = ref(0)
 
 onMounted(() => {
-	fields.value = tools.data.get("FORM-DATA") || []
+	fields.value = tools.data.get("FORM-FIELDS-DATA") || []
+	const _config = tools.data.get("FORM-CONFIG-DATA")
+	if (_config) {
+		config.value = _config
+	}
+	counter.value = tools.data.get("FORM-COUNTER-DATA") || 0
 })
 
 function setField(v) {
 	curField.value = v
-	curField.value.field = v.id
 }
 
 function addField(e) {
@@ -46,7 +52,9 @@ function addField(e) {
 
 function tempSave() {
 	console.log("保存参数", fields.value)
-	tools.data.set("FORM-DATA", fields.value)
+	tools.data.set("FORM-FIELDS-DATA", fields.value)
+	tools.data.set("FORM-CONFIG-DATA", config.value)
+	tools.data.set("FORM-COUNTER-DATA", counter.value)
 	proxy.$message.success("保存成功")
 }
 
diff --git a/src/views/tools/form/item.vue b/src/views/tools/form/item.vue
index 510cd14..90cf4c9 100644
--- a/src/views/tools/form/item.vue
+++ b/src/views/tools/form/item.vue
@@ -1,5 +1,5 @@
 <template>
-	<el-form-item :label="field.title" :required="field.required">
+	<el-form-item :label="field.title" :required="field.required" :label-width="field.labelWidth">
 		<component :is="getComponent(field.name)" v-model="field.value" v-bind="field.props"
 				   :style="{width: field.width}">
 			<template v-if="field.name === 'select'" #default>
@@ -13,7 +13,8 @@
 			<template v-else-if="field.name === 'checkbox'" #default>
 				<el-checkbox-button v-if="field.style === 'button'" v-for="(op, idx) in field.options" :key="idx"
 									:label="op.label" :value="op.value"/>
-				<el-checkbox v-else v-for="(op, id) in field.options" :key="id" :label="op.label" :value="op.value"/>
+				<el-checkbox v-else v-for="(op, id) in field.options" :key="id" :label="op.label"
+							 :value="op.value"/>
 			</template>
 			<template
 				v-if="field.name === 'upload' && (field.props.listType === 'text' || field.props.listType === 'picture')"
@@ -33,8 +34,7 @@
 					{{ field.tip }}
 				</div>
 			</template>
-			<template v-if="field.name === 'button' && field.btnText"
-					  #default>
+			<template v-if="field.name === 'button' && field.btnText"  #default>
 				{{ field.btnText }}
 			</template>
 		</component>
@@ -49,6 +49,6 @@ const props = defineProps({
 })
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 
 </style>
diff --git a/src/views/tools/form/left.vue b/src/views/tools/form/left.vue
index 51b9e5c..960874f 100644
--- a/src/views/tools/form/left.vue
+++ b/src/views/tools/form/left.vue
@@ -9,7 +9,7 @@
 					输入组件
 				</el-text>
 			</div>
-			<draggable v-model="inputComps" animation="200" item-key="id" class="go-base" :group="group" :sort="false"
+			<draggable v-model="inputComps" animation="200" item-key="name" class="go-base" :group="group" :sort="false"
 					   :clone="cloneField">
 				<template #item="{ element }">
 					<div class="item" @click="handleClick(element)">
@@ -31,7 +31,7 @@
 					选择组件
 				</el-text>
 			</div>
-			<draggable v-model="choiceComps" animation="200" item-key="id" class="go-base" :group="group" :sort="false"
+			<draggable v-model="choiceComps" animation="200" item-key="name" class="go-base" :group="group" :sort="false"
 					   :clone="cloneField">
 				<template #item="{ element }">
 					<div class="item" @click="handleClick(element)">
@@ -53,7 +53,7 @@
 					布局组件
 				</el-text>
 			</div>
-			<draggable v-model="layoutComps" animation="200" item-key="id" class="go-base" :group="group" :sort="false"
+			<draggable v-model="layoutComps" animation="200" item-key="name" class="go-base" :group="group" :sort="false"
 					   :clone="cloneField">
 				<template #item="{ element }">
 					<div class="item" @click="handleClick(element)">
@@ -73,13 +73,15 @@
 
 <script setup>
 import draggable from 'vuedraggable'
-import {ref} from "vue"
+import {computed, ref} from "vue"
 
-const emit = defineEmits(['addField'])
+const emit = defineEmits(['addField', 'update:counter'])
+const props = defineProps({
+	counter: {type: Number, default: 0}
+})
 
 const group = {name: 'base', pull: 'clone', put: false}
 const inputComps = [{
-	id: "i1",
 	title: "单行文本",
 	icon: "pi-icon-line-input",
 	name: "text",
@@ -90,7 +92,6 @@ const inputComps = [{
 	width: "100%",
 	required: false
 }, {
-	id: "i2",
 	title: "多行文本",
 	icon: "pi-icon-multi-input",
 	name: "textarea",
@@ -101,7 +102,6 @@ const inputComps = [{
 	width: "100%",
 	required: false
 }, {
-	id: "i3",
 	title: "密码",
 	icon: "pi-icon-lock",
 	name: "password",
@@ -113,7 +113,6 @@ const inputComps = [{
 	width: "100%",
 	required: false
 }, {
-	id: "i4",
 	title: "计数器",
 	icon: "pi-icon-number-input",
 	name: "number",
@@ -126,7 +125,6 @@ const inputComps = [{
 	value: 1
 }]
 const choiceComps = [{
-	id: "c1",
 	title: "下拉组件",
 	icon: "pi-icon-select",
 	name: "select",
@@ -136,7 +134,6 @@ const choiceComps = [{
 	width: "100%",
 	required: false,
 }, {
-	id: "c2",
 	title: "级联组件",
 	icon: "pi-icon-cascader",
 	name: "cascader",
@@ -152,7 +149,6 @@ const choiceComps = [{
 	width: "100%",
 	required: false,
 }, {
-	id: "c3",
 	title: "单选组件",
 	icon: "pi-icon-radio",
 	name: "radio",
@@ -163,7 +159,6 @@ const choiceComps = [{
 	style: '',
 	required: false,
 }, {
-	id: "c4",
 	title: "多选组件",
 	icon: "pi-icon-checkbox",
 	name: "checkbox",
@@ -173,7 +168,6 @@ const choiceComps = [{
 	style: '',
 	required: false,
 }, {
-	id: "c5",
 	title: "开关",
 	icon: "pi-icon-switch",
 	name: "switch",
@@ -181,7 +175,6 @@ const choiceComps = [{
 	rules: [],
 	required: false,
 }, {
-	id: "c6",
 	title: "滑块",
 	icon: "pi-icon-slider",
 	name: "slider",
@@ -190,7 +183,6 @@ const choiceComps = [{
 	width: "100%",
 	required: false,
 }, {
-	id: "c7",
 	title: "时间选择",
 	icon: "pi-icon-time-picker",
 	name: "time",
@@ -200,7 +192,6 @@ const choiceComps = [{
 	},
 	rules: []
 }, {
-	id: "c8",
 	title: "时间范围",
 	icon: "pi-icon-time-range",
 	name: "timerange",
@@ -213,7 +204,6 @@ const choiceComps = [{
 	width: "100%",
 	required: false,
 }, {
-	id: "c9",
 	title: "日期选择",
 	icon: "pi-icon-date-picker",
 	name: "date",
@@ -226,7 +216,6 @@ const choiceComps = [{
 	width: "100%",
 	required: false,
 }, {
-	id: "c10",
 	title: "日期范围",
 	icon: "pi-icon-date-range",
 	name: "daterange",
@@ -239,7 +228,6 @@ const choiceComps = [{
 	width: "100%",
 	required: false,
 }, {
-	id: "c11",
 	title: "评分",
 	icon: "pi-icon-rate",
 	name: "rate",
@@ -247,7 +235,6 @@ const choiceComps = [{
 	rules: [],
 	required: false,
 }, {
-	id: "c12",
 	title: "颜色选择",
 	icon: "pi-icon-color-picker",
 	name: "color",
@@ -255,7 +242,6 @@ const choiceComps = [{
 	rules: [],
 	required: false,
 }, {
-	id: 'c13',
 	title: "上传",
 	icon: "pi-icon-upload-file",
 	name: "upload",
@@ -268,7 +254,6 @@ const choiceComps = [{
 	btnText: "点击上传"
 }]
 const layoutComps = [{
-	id: 'row',
 	title: "行容器",
 	icon: "pi-icon-row-layout",
 	name: "layout",
@@ -277,7 +262,6 @@ const layoutComps = [{
 	},
 	children: []
 }, {
-	id: 'l2',
 	title: "按钮",
 	icon: "pi-icon-button",
 	name: "button",
@@ -286,13 +270,20 @@ const layoutComps = [{
 	},
 	btnText: "按钮文字"
 }];
-let num = ref(100)
+const counter = computed({
+	get() {
+		return props.counter
+	},
+	set(value) {
+		emit('update:counter', value)
+	}
+})
 
 function cloneField(e) {
 	const field = JSON.parse(JSON.stringify(e));
-	field.id = field.id + num.value;
-	field.index = num.value
-	num.value++
+	field.field_name = field.name + "_" + counter.value;
+	field.id = field.name + counter.value
+	counter.value++
 	return field
 }
 
diff --git a/src/views/tools/form/right.vue b/src/views/tools/form/right.vue
index 778c247..8635f15 100644
--- a/src/views/tools/form/right.vue
+++ b/src/views/tools/form/right.vue
@@ -4,15 +4,18 @@
 			<el-tabs v-model="activeName" stretch>
 				<el-tab-pane label="组件属性" name="field">
 					<el-form v-model="fForm" label-width="90px">
-						<el-form-item v-if="fForm.name !== 'button'" label="字段名" prop="field">
-							<el-input v-model="fForm.field"></el-input>
+						<el-form-item v-if="fForm.name !== 'button' && fForm.name !== 'layout'" label="字段名" prop="field_name">
+							<el-input v-model="fForm.field_name"></el-input>
 						</el-form-item>
-						<el-form-item label="标题" prop="title">
+						<el-form-item v-if="fForm.name !== 'layout'" label="标题" prop="title">
 							<el-input v-model="fForm.title"></el-input>
 						</el-form-item>
-						<el-form-item v-if="fForm.name !== 'button'" label="默认值" prop="value">
+						<el-form-item v-if="fForm.name !== 'button' && fForm.name !== 'layout'" label="默认值" prop="value">
 							<el-input v-model="fForm.value"></el-input>
 						</el-form-item>
+						<el-form-item v-if="fForm.span !== undefined" label="栅格列数" prop="span">
+							<el-slider v-model="fForm.span" :min="1" :max="24"/>
+						</el-form-item>
 						<template v-for="item in fieldEditors[fForm.name] || []" :key="item.key">
 							<el-form-item :label="item.label">
 								<el-input
@@ -69,17 +72,19 @@
 								</template>
 							</pi-draggable>
 						</template>
-						<el-divider>正则校验</el-divider>
-						<pi-draggable v-model="fForm.rules" item-key="regex" :template="{regex:'',message:''}">
-							<template #default="scope">
-								<el-form-item label="表达式">
-									<el-input v-model="scope.element.regex"/>
-								</el-form-item>
-								<el-form-item label="错误提示">
-									<el-input v-model="scope.element.message"/>
-								</el-form-item>
-							</template>
-						</pi-draggable>
+						<template v-if="fForm.name !== 'button' && fForm.name !== 'layout'">
+							<el-divider>正则校验</el-divider>
+							<pi-draggable v-model="fForm.rules" item-key="regex" :template="{regex:'',message:''}">
+								<template #default="scope">
+									<el-form-item label="表达式">
+										<el-input v-model="scope.element.regex"/>
+									</el-form-item>
+									<el-form-item label="错误提示">
+										<el-input v-model="scope.element.message"/>
+									</el-form-item>
+								</template>
+							</pi-draggable>
+						</template>
 					</el-form>
 				</el-tab-pane>
 				<el-tab-pane label="表单属性" name="form">