feat: 表单设计拖拽 问题调整

src/components/packages/formEditor/components/Layout/CollapseLayout.jsx

@@ -1,44 +1,37 @@
-import { defineComponent, resolveComponent, watch, useAttrs, defineAsyncComponent } from 'vue'
+import { defineComponent, resolveComponent, watch, useAttrs, defineAsyncComponent, inject } from 'vue'
 import Selection from '@ER/formEditor/components/Selection/selectElement.jsx'
 import LayoutDragGable from './DragGable.jsx'
 import hooks from '@ER/hooks'
 export default defineComponent({
-  name: 'CollapseLayout',
-  inheritAttrs: false,
-  customOptions: {},
-  props: {
-    data: Object,
-    parent: Array
-  },
-  setup (props) {
-    const ns = hooks.useNamespace('CollapseLayout')
-    if (!props.data.options.defaultValue.length) {
-      props.data.options.defaultValue.push(props.data.columns[0].id)
-    }
-    return () => {
-      return (
-        <Selection {...useAttrs()} hasCopy hasDel hasDrag hasWidthScale data={props.data} parent={props.parent}>
-          <el-collapse vModel={props.data.options.defaultValue} accordion={props.data.options.accordion}>
-            {
-              props.data.columns.map((element, index0) => {
-                return (
-                  <el-collapse-item title={element.label} name={element.id}>
-                    <Selection
-                      class={[ns.e('area')]}
-                      data={element} parent={props.data}
-                    >
-                      <LayoutDragGable
-                        data={element.list}
-                        data-layout-type={'collapse-col'}
-                        parent={element}/>
-                    </Selection>
-                  </el-collapse-item>
-                )
-              })
-            }
-          </el-collapse>
-        </Selection>
-      )
-    }
-  }
+	name: 'CollapseLayout',
+	inheritAttrs: false,
+	customOptions: {},
+	props: {
+		data: Object,
+		parent: Array
+	},
+	setup(props) {
+		const ER = inject('Everright')
+		const ns = hooks.useNamespace('CollapseLayout')
+		if (!props.data.options.defaultValue.length) {
+			props.data.options.defaultValue.push(props.data.columns[0].id)
+		}
+		return () => {
+			return (
+				<Selection {...useAttrs()} hasCopy hasDel hasDrag hasWidthScale data={props.data} parent={props.parent}>
+					<el-collapse vModel={props.data.options.defaultValue} accordion={props.data.options.accordion}>
+						{props.data.columns.map((element, index0) => {
+							return (
+								<el-collapse-item title={element.label} name={element.id}>
+									<Selection class={[ER.state.mode === 'edit' ? ns.e('area') : '']} data={element} parent={props.data}>
+										<LayoutDragGable data={element.list} data-layout-type={'collapse-col'} parent={element} />
+									</Selection>
+								</el-collapse-item>
+							)
+						})}
+					</el-collapse>
+				</Selection>
+			)
+		}
+	}
 })

src/components/packages/formEditor/components/Layout/TabsLayout.jsx

@@ -12,6 +12,10 @@ export default defineComponent({
   },
   setup (props) {
     const ns = hooks.useNamespace('TabsLayout')
+    if (!props.data.options.defaultValue) {
+      // eslint-disable-next-line vue/no-setup-props-destructure
+      props.data.options.defaultValue = props.data.columns[0].id
+    }
     return () => {
       return (
         <Selection {...useAttrs()} data={props.data} parent={props.parent} hasCopy hasDel hasDrag hasWidthScale>
@@ -21,7 +25,7 @@ export default defineComponent({
                 return (
                   <Selection
                     class={[ns.e('area')]}
-                    tag='el-tab-pane' label={element.label} name={element.value} data={element} parent={props.data}
+                    tag='el-tab-pane' label={element.label} name={element.id} data={element} parent={props.data}
                   >
                     <LayoutDragGable
                       data-layout-type={'tabs-col'}

src/components/packages/theme/formEditor/Canves.scss

@@ -5,7 +5,7 @@
     height: auto;
   }
   .el-form-item {
-    align-items: start;
+    align-items: flex-start;
   }
   @include e(editModel) {
     height: calc(100% - 40px);

src/components/packages/theme/formEditor/FormTypes/Checkbox.scss

@@ -2,7 +2,7 @@
   @include e(blockLayout) {
     display: flex;
     flex-direction: column;
-    align-items: start;
+    align-items: flex-start;
     .el-checkbox {
       margin-right: 0;
     }

src/components/packages/theme/formEditor/FormTypes/Radio.scss

@@ -1,7 +1,7 @@
 @include b(FormTypesRadio) {
   @include e(blockLayout) {
     flex-direction: column;
-    align-items: start;
+    align-items: flex-start;
     .el-radio {
       margin-right: 0;
     }

src/views/flow/create/components/FormDesign1.vue

@@ -1,71 +0,0 @@
-<script setup name="FormDesign">
-import { onBeforeUnmount, onMounted, ref } from 'vue'
-import { erFormEditor } from 'everright-formeditor'
-import 'Everright-formEditor/dist/style.css'
-import useFlowStore from '@/store/modules/flow'
-import { storeToRefs } from 'pinia'
-const flowStore = useFlowStore()
-const { processForm } = storeToRefs(flowStore)
-const { VITE_APP_BASE_API } = import.meta.env
-const EReditorRef = ref()
-const uploadFileApi = ref(`${VITE_APP_BASE_API}/v1/oss/upload`)
-
-const handleListener = obj => {}
-
-// 保存当前的表单数据 processForm.value = '{formStructure: 表单结构值, formData: {}}
-const exportJsonEv = () => {
-	const formStructure = EReditorRef.value.getData()
-	const finallyForm = { formStructure, formData: {} }
-	processForm.value = JSON.stringify(finallyForm)
-}
-
-const validate = () => {
-	// 根据后续的业务需求 调整 validate 的功能
-	exportJsonEv()
-	return new Promise((resolve, reject) => {
-		const formStructure = EReditorRef.value.getData()
-		const fields = formStructure?.fields || []
-		const bool = fields.length
-		if (bool) {
-			resolve(true)
-		} else {
-			reject(false)
-		}
-	})
-}
-
-// onBeforeUnmount(() => {
-// 	const formData = EReditorRef.value.getData()
-// 	if (formData.hasOwnProperty('fields')) {
-// 		// 离开前 做处理
-// 		// const { fields } = formData
-// 		// console.log(fields.length, '=======')
-// 	} else {
-// 		ElMessage.error(`表单设计有误，请重新配置`)
-// 	}
-// })
-
-const updateCompInfo = () => {
-	if (processForm.value) {
-		// {formStructure: 表单结构值, formData: {}}
-		const { formStructure } = JSON.parse(processForm.value)
-		EReditorRef.value.setData(formStructure || {})
-	}
-}
-
-// 初始化的时候，渲染当前组件的值
-onMounted(() => {
-	updateCompInfo()
-})
-
-defineExpose({
-	exportJsonEv,
-	validate,
-	updateCompInfo
-})
-</script>
-<template>
-	<div class="form-design-wrap">
-		<er-form-editor ref="EReditorRef" :is-show-i18n="false" :fileUploadURI="uploadFileApi" @listener="handleListener" />
-	</div>
-</template>

src/views/login/components/passwordForm.vue

@@ -43,7 +43,7 @@ export default {
 		return {
 			form: {
 				username: 'admin',
-				password: '100607',
+				password: 'Aa!123',
 				code: '',
 				autologin: false
 			},