优化

src/App.vue

@@ -28,7 +28,7 @@ const locale2 = computed(() => {
 	return messages.value[locale.value]
 })
 
-console.log('%c PI %c 里派提供技术支持', 'background:#4caf50;color:#fff;border-radius:3px;', '')
+console.log('%c PI %c 里派提供技术支持 www.leapy.cn', 'background:#4caf50;color:#fff;border-radius:3px;', '')
 if (app_color) {
 	document.documentElement.style.setProperty('--el-color-primary', app_color);
 	for (let i = 1; i <= 9; i++) {

src/store/index.ts

@@ -3,5 +3,9 @@ import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 
 const pinia = createPinia()
 pinia.use(piniaPluginPersistedstate)
+// 控制台日志关闭
+;(pinia as any)._p = (pinia as any)._p.filter(
+	(p: any) => p.name !== "pinia:devtools"
+)
 
 export default pinia

src/views/tools/form/center.vue

@@ -1,10 +1,10 @@
 <template>
 	<section class="panel">
-		<el-scrollbar class="height-100">
+		<el-scrollbar class="h100">
-			<el-main class="height-100">
+			<el-main class="h100">
-				<el-form class="height-100" :label-position="config.labelPosition" :label-width="config.labelWidth"
+				<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"/>
+					<drag :fields="fields" @change="changeHandle" name="page" v-model:curId="curId"/>
 				</el-form>
 			</el-main>
 		</el-scrollbar>
@@ -12,6 +12,7 @@
 </template>
 
 <script setup>
+import {ref} from "vue"
 import drag from "./drag.vue"
 defineExpose({clickAddComp})
 
@@ -20,6 +21,7 @@ const props = defineProps({
 	config: {type: Object, default: {}}
 })
 const emit = defineEmits(['change'])
+let curId = ref("")
 
 // 添加项时
 function clickAddComp(e) {
@@ -42,7 +44,7 @@ function changeHandle(e) {
 }
 
 
-.height-100 {
+.h100 {
 	height: 100%;
 }
 

src/views/tools/form/drag.vue

@@ -1,17 +1,17 @@
 <template>
-	<draggable :list="fields" :scroll="true" animation="200" item-key="id" class="height-100"
+	<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">
+			   ghostClass="ghostClass" :class="{empty: fields.length === 0}">
 		<template #item="{ element, index }">
-			<div class="box">
+			<div class="box w100">
-				<el-row v-if="element.name === 'layout'" class="item row" :class="{'active': curIndex===index}"
+				<el-row v-if="element.name === 'layout'" class="item row" :class="{'active': curr===element.field}"
-						@click="clickComp(element, index)">
+						@click.stop="clickComp(element)" v-bind="element.props">
 					<span class="name">{{ element.field }}</span>
-					<drag :fields="element.children" @change="changeHandle" :name="element.field"/>
+					<drag :fields="element.children" @change="changeHandle" :name="element.field" v-model:curId="curr"/>
 				</el-row>
-				<item v-else class="item" :class="{'active': curIndex===index}" :field="element"
+				<item v-else class="item" :class="{'active': curr===element.field}" :field="element"
-					  @click="clickComp(element,index)"/>
+					  @click.stop="clickComp(element)"/>
-				<div v-if="curIndex===index" class="tools-box">
+				<div v-if="curr===element.field" class="tools-box">
 					<el-icon size="22" class="icon-box remove" @click="delComp(index)">
 						<component :is="'pi-icon-shan-chu'"/>
 					</el-icon>
@@ -26,46 +26,52 @@
 
 <script setup>
 import draggable from 'vuedraggable'
-import {nextTick, ref} from "vue"
+import {computed, nextTick} from "vue"
 import tools from "@/utils/tools"
 import item from "./item.vue"
 import drag from "./drag.vue"
 
-
+const emit = defineEmits(['change', 'update:curId'])
-console.log(drag)
 
 const props = defineProps({
 	fields: {type: Array, default: []},
-	name: {type: String, default: 'page'}
+	name: {type: String, default: 'page'},
+	curId: {type: String, default: ''},
+})
+
+const group = {name: props.name, pull: true, put: true}
+const curr = computed({
+	get() {
+		return props.curId
+	},
+	set(value) {
+		emit('update:curId', value)
+	}
 })
-const emit = defineEmits(['change'])
-const group = {name: props.name, pull: false, put: true}
-let curIndex = ref(0)
-let curComp = ref({})
 
 // 排序
 function sortComp(e) {
-	curIndex.value = e.newIndex
+	let element = props.fields[e.newIndex]
-	curComp.value = props.fields[e.newIndex]
+	if (element) {
-	emit('change', curComp.value)
+		curr.value = element.field
+		emit('change', element)
+	}
 }
 
 // 添加项时
 function addComp(e) {
 	let element = props.fields[e.newIndex]
-	curIndex.value = e.newIndex
+	curr.value = element.field
-	curComp.value = element
+	emit('change', element)
-	emit('change', curComp.value)
 }
 
 // 选中项
-function clickComp(element, index) {
+function clickComp(element) {
-	if (curIndex.value === index) {
+	if (curr.value === element.field) {
 		return;
 	}
-	curIndex.value = index
+	curr.value = element.field
-	curComp.value = element
+	emit('change', element)
-	emit('change', curComp.value)
 }
 
 // 删除字段
@@ -74,7 +80,7 @@ function delComp(index) {
 		// 原数组长度
 		const len = props.fields.length
 		props.fields.splice(index, 1);
-		let i = -1;
+		let i = 0;
 		if (len > 1) {
 			if (index === 0) {
 				i = 0;
@@ -84,9 +90,9 @@ function delComp(index) {
 				i = index
 			}
 		}
-		curIndex.value = i
+		let element = props.fields[i] || {}
-		curComp.value = props.fields[i]
+		curr.value = element.field || null
-		emit('change', curComp.value || {})
+		emit('change', element)
 	})
 }
 
@@ -94,15 +100,26 @@ function copyComp(index) {
 	nextTick(() => {
 		// 复制当前元素到尾部
 		const tmp = JSON.parse(JSON.stringify(props.fields[index]))
+		tmp.field = increaseNum(tmp.field)
 		props.fields.push(tmp)
 		// 将复制的元素移动到当前元素下边
 		tools.array.zIndexTo(props.fields, props.fields.length - 1, index + 1)
-		curIndex.value = index + 1
+		let element = props.fields[index + 1]
-		curComp.value = props.fields[index + 1]
+		element.field = increaseNum(element.field)
-		emit('change', curComp.value)
+		curr.value = element.field
+		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');
+	});
+}
+
 function changeHandle(e) {
 	emit('change', e)
 }
@@ -122,6 +139,18 @@ function changeHandle(e) {
 	}
 }
 
+.w100 {
+	width: 100%;
+}
+
+.h100 {
+	height: 100%;
+}
+
+.empty {
+	padding: 40px 0;
+}
+
 .active {
 	border: 1px dashed #787be8 !important;
 	color: #787be8;
@@ -139,9 +168,9 @@ function changeHandle(e) {
 	}
 
 	.row {
-		min-height: 80px;
 		border: 1px dashed #c1c1c1;
 		margin-bottom: 18px;
+		padding: 20px 12px;
 
 		.name {
 			position: absolute;

src/views/tools/form/index.vue

@@ -5,17 +5,20 @@
 			<el-divider direction="vertical" style="height: 100%"/>
 			<center-panel ref="centerRef" :fields="fields" :config="config" @change="setField"></center-panel>
 			<el-divider direction="vertical" style="height: 100%"/>
-			<right-panel :config="config" :curField="curField"></right-panel>
+			<right-panel :config="config" :curField="curField" @save="tempSave"></right-panel>
 		</el-main>
 	</el-container>
 </template>
 
 <script setup>
-import {ref} from "vue"
+import {onMounted, ref, getCurrentInstance} from "vue"
 import leftPanel from "./left"
 import centerPanel from "./center"
 import rightPanel from "./right"
+import tools from "@/utils/tools"
 
+const {proxy} = getCurrentInstance()
+const centerRef = ref(null)
 let fields = ref([])
 let config = ref({
 	ref: 'formRef',
@@ -27,7 +30,10 @@ let config = ref({
 	disabled: false
 })
 let curField = ref({})
-const centerRef = ref(null)
+
+onMounted(() => {
+	fields.value = tools.data.get("FORM-DATA") || []
+})
 
 function setField(v) {
 	curField.value = v
@@ -38,6 +44,12 @@ function addField(e) {
 	centerRef.value.clickAddComp(e)
 }
 
+function tempSave() {
+	console.log("保存参数", fields.value)
+	tools.data.set("FORM-DATA", fields.value)
+	proxy.$message.success("保存成功")
+}
+
 </script>
 
 <style scoped>

src/views/tools/form/left.vue

@@ -144,7 +144,7 @@ const choiceComps = [{
 		props: {
 			label: 'label',
 			value: 'value',
-			multiple: true,
+			multiple: false,
 		},
 		options: [{label: '一号楼', value: 'r1', children: [{label: '二单元', value: 'c2'}]}]
 	},
@@ -209,7 +209,9 @@ const choiceComps = [{
 		format: 'HH:mm:ss',
 		valueFormat: 'HH:mm:ss'
 	},
-	rules: []
+	rules: [],
+	width: "100%",
+	required: false,
 }, {
 	id: "c9",
 	title: "日期选择",
@@ -271,7 +273,7 @@ const layoutComps = [{
 	icon: "pi-icon-row-layout",
 	name: "layout",
 	props: {
-		gutter: '15'
+		gutter: 15
 	},
 	children: []
 }, {

src/views/tools/form/right.vue

@@ -113,6 +113,9 @@
 						<el-form-item label="禁用表单" prop="disabled">
 							<el-switch v-model="cForm.disabled"/>
 						</el-form-item>
+						<el-form-item prop="act">
+							<el-button type="primary" @click="emit('save')">暂存</el-button>
+						</el-form-item>
 					</el-form>
 				</el-tab-pane>
 			</el-tabs>
@@ -130,7 +133,7 @@ const props = defineProps({
 	curField: {type: Object, default: {}},
 	config: {type: Object, default: {}}
 })
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue', 'save'])
 let activeName = ref("field")
 let cForm = computed({
 	get() {