From fe3b671d946b587167e39b06f79a42fc1546c6cf Mon Sep 17 00:00:00 2001
From: herenshan112 <herenshan112@163.com>
Date: Sat, 27 Jul 2024 10:11:01 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=98=BE=E7=A4=BABUG?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DesignForm/app/formPage.vue    |   4 +
 src/components/DesignForm/app/index.vue       |   2 +-
 .../DesignForm/public/form/form.vue           |   4 +-
 .../DesignForm/public/form/formGroup.vue      |  18 +-
 .../public/form/formGroup_20240726.vue        | 627 ++++++++++++++++++
 .../DesignForm/tableListPage/formPageCont.vue |  36 +-
 .../appLayoutEdit/appContainerPage.vue        |  17 +
 7 files changed, 675 insertions(+), 33 deletions(-)
 create mode 100644 src/components/DesignForm/public/form/formGroup_20240726.vue

diff --git a/src/components/DesignForm/app/formPage.vue b/src/components/DesignForm/app/formPage.vue
index b901bc7..334d324 100644
--- a/src/components/DesignForm/app/formPage.vue
+++ b/src/components/DesignForm/app/formPage.vue
@@ -1041,11 +1041,15 @@ function optionsValue3Get2(data: any,fieldName: string){
 	emits('optionsValue3Get3',data,fieldName)
 	
 }
+
+
 </script>
 <template>
 	<div class="common-layout">
+	
 		<el-container v-if="props.isWorkFlow==1">
 			<el-main class="formMainBox">
+			
 				<el-form
 					v-bind="formData.form"
 					ref="ruleForm"
diff --git a/src/components/DesignForm/app/index.vue b/src/components/DesignForm/app/index.vue
index acc1f2e..22fe051 100644
--- a/src/components/DesignForm/app/index.vue
+++ b/src/components/DesignForm/app/index.vue
@@ -1268,7 +1268,7 @@ const judgeListTitle = (val:any,viewConfig:any) => {
 			</el-col>
 		</el-row>
 		<FormPageCont v-model:is-show="lookPageInfoIsShow" :drawer-with="drawerWith" :page-info="pageInfoCont" :table-page-class="tablePageClass" :oper-state="operState" @getPageData="getPageData" />
-		<FormPageCont v-model:is-show="asflookPageInfoIsShow" :drawer-with="drawerWith" :page-info="currentAsfTableDataList[0]" :table-page-class="tablePageClass" :oper-state="operState" @getPageData="getPageData" />
+		<!-- <FormPageCont v-model:is-show="asflookPageInfoIsShow" :drawer-with="drawerWith" :page-info="currentAsfTableDataList[0]" :table-page-class="tablePageClass" :oper-state="operState" @getPageData="getPageData" /> -->
 		<TableFlow  v-model:isopen="openTaskDrawer" :versionid="props.versionid" :versiontitle="props.versiontitle" :drawerwith="drawerWith" :pick-app-menu="pickAppMenu" @searchquery="getListData" />
 	
 	</div>
diff --git a/src/components/DesignForm/public/form/form.vue b/src/components/DesignForm/public/form/form.vue
index 0e9dfd1..d7570bc 100644
--- a/src/components/DesignForm/public/form/form.vue
+++ b/src/components/DesignForm/public/form/form.vue
@@ -6,7 +6,8 @@
 <script lang='ts' setup>
 import '@/assets/scss/element-var.scss'
 import '@/assets/scss/index.scss'
-import FormGroup from './formGroup.vue'
+// import FormGroup from './formGroup.vue'
+import FormGroup from '@/components/DesignForm/public/form/formGroup.vue'
 
 import { FormData,FormList,FormDataStyle } from '@/api/DesignForm/types'
 import { getRequest } from '@/api/DesignForm'
@@ -1618,6 +1619,7 @@ defineExpose({
 </script>
 <template>
 	<div v-loading="loading">
+	
 		<el-form
 			v-bind="formData.form"
 			ref="ruleForm"
diff --git a/src/components/DesignForm/public/form/formGroup.vue b/src/components/DesignForm/public/form/formGroup.vue
index 23469d1..3032a72 100644
--- a/src/components/DesignForm/public/form/formGroup.vue
+++ b/src/components/DesignForm/public/form/formGroup.vue
@@ -281,6 +281,7 @@ const groupClick = (item: any, ele?: string) => {
 }
 // 返回栅格宽度
 const getFormItemStyle = (ele: FormList) => {
+	// console.log("返回栅格宽度311---->",ele)
     if (ele.config?.span === 0) {
       	return { width: 'auto', margin: '0 5px' }
     }
@@ -375,7 +376,7 @@ onMounted(()=>{
 
 const getFormItemLableStyle = (ele: any) => {
     if(ele?.labelStyle){ 
-    //   console.log("返回栅格宽度3",AnalysisCss(ele?.labelStyle))
+    //   console.log("返回栅格宽度3",AnalysisCss(ele))
       return AnalysisCss(ele?.labelStyle)
     }
 }
@@ -386,6 +387,7 @@ function optionsValue3Get1(data: any,fieldName: string){
 
 </script>
 <template>
+	
 	<draggable
 		itemKey="id"
 		:list="dataList"
@@ -402,7 +404,7 @@ function optionsValue3Get1(data: any,fieldName: string){
 	>
 	
 		<template #item="{ element, index }">
-		
+			
 			<div
 				class="group"
 				:class="{
@@ -414,6 +416,7 @@ function optionsValue3Get1(data: any,fieldName: string){
 				v-show="linksShow(element, index)"
 				v-if="linksIf(element)"
 			>
+		
 			<!-- {{element}} -->
 				<!--选项卡组件-->
 				<template v-if="element.type === 'tabs'">
@@ -557,31 +560,21 @@ function optionsValue3Get1(data: any,fieldName: string){
 						<td :style="getFormItemLableStyle(element.styles)">{{ element.control?.label }}</td>
 						</el-button>
 					</div>
-					
 				</template>
 				<!--创建人-->
 				<FounderForm v-else-if="element.type === 'founder'" :data="element" :tablekey="props.tableinfo" :numrun="props.numrun" />
-				
 				<!--创建时间-->
 				<FounderTime  v-else-if="element.type === 'founderTime'" :data="element" :tablekey="props.tableinfo" :numrun="props.numrun" />
-				
 				<!--修改时间-->
 				<EditTime v-else-if="element.type === 'editTime'" :data="element" :tablekey="props.tableinfo" :numrun="props.numrun" />
-				
 				<!--拥有者-->
 				<OwnerPage v-else-if="element.type === 'owner'" :data="element" :tablekey="props.tableinfo" :numrun="props.numrun"  />
 				<!--所属部门-->
 				<DeptOrgPage v-else-if="element.type === 'deptOrg'" :data="element" :tablekey="props.tableinfo" :numrun="props.numrun" />
-
 				<DigitPage v-else-if="element.type === 'digitpage'" :data="element" />
-
-
-
 				<AssociatedForms  v-else-if="element.type === 'associatedForms'" :data="element" :form-props="formProps" :tablekey="props.tableinfo" />
-
 				<LowcodeImage  v-else-if="element.type === 'lowcodeImage'" :data="element" />
 				<LowcodeTransfer  v-else-if="element.type === 'lowcodeTransfer'" :data="element" />
-
 				<VideoUpAndPlay  v-else-if="element.type === 'videoUpAndPlay'" :data="element" />
 				<LowcodeCarsusel  v-else-if="element.type === 'lowcodeCarsusel'" :data="element" />
 				<SignatureMap  v-else-if="element.type === 'signaturemap'" :data="element" />
@@ -593,7 +586,6 @@ function optionsValue3Get1(data: any,fieldName: string){
 				<SerialNumber  v-else-if="element.type === 'serialNumber'" :data="element" :tablekey="props.tableinfo.name" :numrun="props.numrun" />
 				<!--其他组件-->
 				<FormItem v-else :data="element" @optionsValue3Get1="optionsValue3Get1"/>
-				
 				<!--组件设计外功能框架-->
 				<template v-if="type === 5">
 					<div class="drag-control">
diff --git a/src/components/DesignForm/public/form/formGroup_20240726.vue b/src/components/DesignForm/public/form/formGroup_20240726.vue
new file mode 100644
index 0000000..23469d1
--- /dev/null
+++ b/src/components/DesignForm/public/form/formGroup_20240726.vue
@@ -0,0 +1,627 @@
+<!--
+@ 作者: 秦东
+@ 时间: 2023-09-20 13:00:49
+@ 备注: 自定义表单组件渲染
+-->
+<script lang='ts' setup>
+import { computed, watch, inject, onUnmounted } from 'vue'
+import Draggable from 'vuedraggable-es'
+import FormItem from './formItem.vue'
+import ChildTable from './childTable.vue'
+import Tooltips from '@/components/DesignForm/tooltip.vue'
+import FlexBox from './flexBox.vue'
+import { useDesignFormStore } from '@/store/DesignForm/designForm'
+import { FormList,formTableInfo } from '@/api/DesignForm/types'
+import {
+  constFormBtnEvent,
+  constFormProps
+} from '@/api/DesignForm/utils'
+import { Md5 } from 'ts-md5';
+import { jsonParseStringify } from '@/utils/DesignForm'
+
+import { AnalysisCss } from '@/components/DesignForm/public/form/calculate/cssInfo.ts'
+
+const props = withDefaults(
+    defineProps<{
+      	data: FormList[]
+		tableinfo:formTableInfo
+		numrun?:number
+		
+    }>(),
+    {
+		data: () => {
+			return []
+		}
+    }
+)
+
+let emits = defineEmits(['optionsValue3Get2']);
+
+const store = useDesignFormStore() as any //自定义表单存储器
+const formProps = inject(constFormProps, {}) as any
+const type = computed(() => {				//动态计算属性
+  	return formProps.value.type
+})
+const state = reactive({
+    clone: true, // 允许clone
+    gridAdd: false
+})
+const dataList = ref<any>(props.data)
+
+watch(
+    () => props.data,
+    (v: FormList[]) => {
+      	dataList.value = v
+		// console.log("监听表单变化++++++++++>",v)
+    },
+	{
+    deep: true
+}
+)
+const activeKey = computed(() => {
+    return store.activeKey
+})
+// 禁止容器嵌套
+const notNested = (type: string) => {
+    // const controlType = ['grid', 'table', 'tabs', 'div', 'flex', 'card']
+	const controlType = ['grid',  'tabs',  'div',  'card']
+	// let kjkdh = controlType.includes(type)
+	// console.log("禁止容器嵌套",kjkdh,controlType)
+    return controlType.includes(type)
+	// return false
+}
+const notNestedTableFlex = (type: string) => {
+    const controlType = ['grid', 'table', 'tabs', 'div', 'flex', 'card']
+	// let kjkdh = controlType.includes(type)
+	// console.log("禁止容器嵌套",kjkdh,controlType)
+    return controlType.includes(type)
+	// return false
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-06-22 15:03:31
+@ 功能: 判断不能重复出现的组件
+*/
+const determineDuplicates = (type: string) => {
+	const controlType = ["founder","founderTime","editTime","owner","deptOrg"]
+	// console.log("判断不能重复出现的组件",dataList);
+	if(dataList.value.length > 0){
+		let jibuqi = 0;
+		dataList.value.forEach((item:any)=>{
+			// console.log("组件循环",item);
+			if(controlType.includes(type)){
+				if(type == item.type){
+					jibuqi++
+				}
+			}
+			
+		})
+		// console.log("组件循环",jibuqi);
+		if(jibuqi > 1){
+			ElMessage({
+				showClose: true,
+				message: '此类控件在表单中只能出现一次！不可重复添加！',
+				type: 'error',
+			})
+			return true;
+		}else{
+			return false
+		}
+	}else{
+		return false
+	}
+	// return controlType.includes(type)
+}
+// 删除或复制
+const click = (action: string, index: number, item?: any) => {
+    if (type.value !== 5) {
+      return // 非设计模式
+    }
+    if (action === 'clone') {
+		const key = item.type + new Date().getTime().toString()
+		const newItem = jsonParseStringify(item)
+		dataList.value.splice(index, 0, Object.assign(newItem, { name: key }))
+    } else if (action === 'del') {
+		dataList.value.splice(index, 1)
+		// 清空右侧栏信息
+		store.setActiveKey('')
+		store.setControlAttr({})
+    } else if (action === 'gridAdd') {
+		item.columns.push({
+			list: [],
+			attr: { span: 12 }
+		})
+    } else if (action === 'delGridChild') {
+      	item.splice(index, 1)
+    }
+}
+const draggableAdd = (evt: any) => {
+    if (type.value !== 5) {
+      	return // 非设计模式
+    }
+    const newIndex = evt.newIndex
+    const key = new Date().getTime().toString()
+    const obj: any = dataList.value[newIndex]
+    const isNested = evt.target && evt.target.getAttribute('data-type') // 不能嵌套
+	// console.log("设计拖拽事件-----1------->",newIndex)
+    // console.log("设计拖拽事件-----2------->",key)
+    // console.log("设计拖拽事件-----3------->",obj)
+	// console.log("设计拖拽事件-----4------->",isNested)
+	// console.log("设计拖拽事件-----4------->",dataList.value)
+    if ((isNested === 'not-nested' && notNested(obj.type))  || ((isNested === 'not-table' || isNested === 'not-flex') && notNestedTableFlex(obj.type)) || determineDuplicates(obj.type)) {
+		dataList.value.splice(newIndex, 1)
+		return
+    }
+    if (!obj) {
+      	return
+    }
+    const label = obj.label || obj.item.label
+    delete obj.label
+    delete obj.icon
+    let objectItem = {}
+    // 不需要添加item的项
+    const notNeedItem = [
+		'txt',
+		'title',
+		'button',
+		'table',
+		'grid',
+		'tabs',
+		'flex',
+		'div'
+    ]
+	// console.log("非设计模式-->",obj.type)
+    if (!notNeedItem.includes(obj.type)) {
+		objectItem = {
+			item: {
+				label: label
+			}
+		}
+    }
+    // 不需要name的组件
+    let nameObj = {}
+    const notNeedName = [
+		'txt',
+		'title',
+		'button',
+		'grid',
+		'tabs',
+		'divider',
+		'div',
+		'card'
+    ]
+	switch(obj.type){
+		case "founder":
+			nameObj = {
+				name: "creater"
+			}
+			// console.log("founder--->creater",nameObj)
+			break
+		case "founderTime":
+			nameObj = {
+				name: "creater_time"
+			}
+			// console.log("founderTime-->creater_time",nameObj)
+			break
+		case "editTime":
+			nameObj = {
+				name: "edit_time"
+			}
+			// console.log("editTime--->edit_time",nameObj)
+			break
+		case "owner":
+			nameObj = {
+				name: "owner"
+			}
+			// console.log("owner------>owner",nameObj)
+			break
+		case "deptOrg":
+			nameObj = {
+				name:"org"
+			}
+			// console.log("deptOrg---->org",nameObj)
+			break
+		default:
+			if (!notNeedName.includes(obj.type) && !obj.name) {
+				nameObj = {
+					name: obj.type + key
+				}
+			}
+	}
+    
+
+	// console.log("设计拖拽事件-----5------->",obj)
+    // console.log("设计拖拽事件-----6------->",nameObj)
+    // console.log("设计拖拽事件-----7------->",objectItem)
+
+    Object.assign(obj, nameObj, objectItem)
+	// console.log("设计拖拽事件-----8------->",obj)
+    groupClick(obj)
+}
+const getGroupName = (item: any) => {
+    if (item.name) {
+      	return item.name
+    } else {
+		let md5Object:any = new Md5()
+		md5Object.appendAsciiStr(JSON.stringify(item))
+		let md5Str = md5Object.end()
+		return md5Str
+    }
+}
+// 点击激活当前
+/**
+ * styles:{
+				divStyle:{},
+				labelStyle:{},
+				inputStyle:{}
+			}
+ */
+const groupClick = (item: any, ele?: string) => {
+    // 设计模式下才执行
+    if (type.value !== 5) {
+      	return
+    }
+    if (ele) {
+      	item.type = ele
+    }
+	if(!item.styles){
+		item.styles={
+				divStyle:{},
+				labelStyle:{},
+				inputStyle:{}
+			}
+	}
+	// console.log("点击激活当前--->",item)
+    store.setActiveKey(getGroupName(item))
+    store.setControlAttr(item)
+    // grid时显示添加列按钮
+    state.gridAdd = item.type === 'grid'
+    // state.clone = !notNested(item.type)
+	state.clone = !notNestedTableFlex(item.type)
+}
+// 返回栅格宽度
+const getFormItemStyle = (ele: FormList) => {
+    if (ele.config?.span === 0) {
+      	return { width: 'auto', margin: '0 5px' }
+    }
+    if (ele.config && ele.config.span) {
+      	return { width: (ele.config.span / 24) * 100 + '%' }
+    }
+	if(ele.styles?.divStyle){
+    //   console.log("返回栅格宽度3",AnalysisCss(ele.styles.divStyle))
+      return AnalysisCss(ele.styles.divStyle)
+    }
+}
+// 根据关联条件显示隐藏当前项
+const linksShow = (el: FormList, index: number) => {
+
+	/* 
+		
+	*/
+    // 当前项设置了关联条件，当关联主体的值等于当前组件设定的值时
+    if (!el.config) {
+      	return true
+    }
+    const key = el.config.linkKey
+	//liwenxuan 关联选项设置效果实现  
+	//console.log("linksShow--------"+index+"--------"+JSON.stringify(el))
+	//仅第一次加载会触发，须将出现在配置条件中的表单项隐藏。
+	
+    const value = el.config.linkValue
+    const linkResult = el.config.linkResult
+    if (key && value && type.value !== 5) {
+		const Fn = new Function('$', `return (${value})`)
+		// console.log(Fn)
+		const pass = Fn(formProps.value.model)
+		if (linkResult === 'disabled') {
+			// 设置为disabled后返回显示状态
+			dataList.value[index].control.disabled = pass
+			return true
+		} else {
+			return pass
+		}
+    }
+    return true
+}
+// 根据表单设置不显示指定字段
+const linksIf = (obj: FormList) => {
+    const { type } = formProps.value
+    const { config: { disabledAdd, disabledEdit, disabledDetail } = {} } = obj
+    if (type === 1) {
+		if (disabledAdd) {
+			// 编辑页 || 新增页
+			return false // 不显示
+		}
+    } else if (type === 2) {
+		// 编辑
+		if (disabledEdit) {
+			return false
+		}
+    } else if (type === 4 || type === 3) {
+		// 查看
+		if (disabledDetail) {
+			return false
+		}
+    }
+    // 如果当前字段的name值存在于表单数据的vIf中，则不显示
+    const vIf: string | string[] = formProps.value.hideField
+    if (vIf?.length > 0 && obj.name) {
+      	return vIf.indexOf(obj.name) === -1 // 存在时返回false隐藏
+    }
+    return true
+}
+//按钮点击事件
+const injectBtnEvent:any = inject(constFormBtnEvent)
+const clickBtn = (control: any) => {
+	// console.log(control)
+    // 0: '提交表单',
+    // 1: '重置表单',
+    // 2: '取消返回',
+    // 3: '无动作(自定义)'
+    if (type.value !== 5) {
+		// 非设计模式才触发事件
+		injectBtnEvent && injectBtnEvent(control)
+    }
+}
+onUnmounted(() => {
+    // console.log('formGroup onUnmounted')
+    dataList.value = {}
+    store.setActiveKey('')
+    store.setControlAttr({})
+})
+onMounted(()=>{
+	// console.log('formGroup onMounted',props.data,dataList.value,props.tableinfo)
+})
+
+const getFormItemLableStyle = (ele: any) => {
+    if(ele?.labelStyle){ 
+    //   console.log("返回栅格宽度3",AnalysisCss(ele?.labelStyle))
+      return AnalysisCss(ele?.labelStyle)
+    }
+}
+
+function optionsValue3Get1(data: any,fieldName: string){
+	emits('optionsValue3Get2',data,fieldName)
+}
+
+</script>
+<template>
+	<draggable
+		itemKey="id"
+		:list="dataList"
+		name="fade"
+		class="drag"
+		v-bind="{
+		group: 'form',
+		ghostClass: 'ghost',
+		animation: 200,
+		handle: '.drag-move',
+		disabled: type !== 5
+		}"
+		@add="draggableAdd"
+	>
+	
+		<template #item="{ element, index }">
+		
+			<div
+				class="group"
+				:class="{
+				['group-' + element.type]: true,
+				active: activeKey === getGroupName(element)
+				}"
+				:style="getFormItemStyle(element)"
+				@click.stop="groupClick(element)"
+				v-show="linksShow(element, index)"
+				v-if="linksIf(element)"
+			>
+			<!-- {{element}} -->
+				<!--选项卡组件-->
+				<template v-if="element.type === 'tabs'">
+					<div class="form-tabs">
+						<el-tabs
+						v-bind="element.control"
+						:class="[element.config?.className]"
+						>
+						<el-tab-pane
+							v-for="(item, tIndex) in element.columns"
+							:label="item.label"
+							:key="tIndex"
+						>
+							<form-group :data="item.list" data-type="not-nested" />
+						</el-tab-pane>
+						</el-tabs>
+					</div>
+				</template>
+				<!--标题组件-->
+				<template v-else-if="element.type === 'title'">
+					<div
+						class="title"
+						:class="[element.config.className]"
+						v-bind="element.control"
+						:style="getFormItemLableStyle(element.styles)"
+					>
+						<span  v-html="element.control.modelValue"></span>
+						<Tooltips
+							:content="element.config.help"
+							v-if="element.config.help"
+						/>
+					</div>
+				</template>
+				<!--文字组件-->
+				<template v-else-if="element.type === 'txt'">
+					<div
+						v-bind="element.control"
+						:class="[element.config.className]"
+						v-html="element.control.modelValue"
+					>
+					</div>
+				</template>
+				<!--表格组件-->
+				<template v-else-if="element.type === 'table'">
+					<div class="form-table" v-if="type === 5">
+						<!-- <form-group :data="element.list" data-type="not-nested" /> -->
+						<form-group :data="element.list" data-type="not-table" />
+					</div>
+					
+					<child-table v-else :data="element" />
+				</template>
+				<!--格栅布局-->
+				<template v-else-if="element.type === 'grid'">
+					<el-row class="form-row" :class="[element.className]">
+						<el-col
+							class="form-col"
+							:class="{
+								'active-col': activeKey === getGroupName(col),
+								[col.className]: col.className
+							}"
+							v-bind="col.attr"
+							v-for="(col, i) in element.columns"
+							:key="i"
+							@click.stop="groupClick(col, 'gridChild')"
+						>
+							<form-group :data="col.list" data-type="not-nested" />
+							<div class="drag-control" v-if="type === 5">
+								<div class="item-control">
+								<i
+									class="icon-del"
+									@click.stop="click('delGridChild', i as number, element.columns)"
+								>
+								</i>
+								</div>
+							</div>
+						</el-col>
+					</el-row>
+				</template>
+				<!--卡片布局-->
+				<template v-else-if="element.type === 'card'">
+					<el-collapse model-value="1">
+						<el-collapse-item :title="element.item.label" name="1">
+							<template #title v-if="element.help">
+								{{ element.item.label }}
+								<Tooltips :content="element.help" />
+							</template>
+							<form-group :data="element.list" data-type="not-nested" />
+						</el-collapse-item>
+					</el-collapse>
+				</template>
+				<!--分割线-->
+				<template v-else-if="element.type === 'divider'">
+					<el-divider v-bind="element.control">{{ element.item && element.item.label }}</el-divider>
+				</template>
+				<!--div容器-->
+				<template v-else-if="element.type === 'div'">
+					<div
+						class="div-layout"
+						v-bind="element.control"
+						:class="{
+						[element.className]: element.className,
+						inline: element.config?.inline,
+						[element.config?.textAlign]: element.config?.textAlign
+						}"
+					>
+						<form-group :data="element.list" data-type="not-nested" />
+					</div>
+				</template>
+				<!--弹性布局-->
+				<template v-else-if="element.type === 'flex'">
+					<!-- <form-group
+						:data="element.list"
+						data-type="not-nested"
+						v-if="type === 5"
+					/> -->
+					<form-group
+						:data="element.list"
+						data-type="not-flex"
+						v-if="type === 5"
+					/>
+					<flex-box :data="element" v-else />
+					<el-button
+						style="position: relative; top: -28px; left: 10px"
+						v-if="element.config.addBtnText && type === 5"
+						size="small"
+					>
+						{{ element.config.addBtnText }}
+					</el-button>
+				</template>
+				<!--按钮-->
+				<template v-else-if="element.type === 'button'">
+					<div
+						:class="[element.config?.className]"
+						:style="{ 'text-align': element.config?.textAlign }"
+					>
+						<el-button
+						v-bind="element.control"
+						@click="clickBtn(element.control)"
+						color="#626aef"
+						>
+						<td :style="getFormItemLableStyle(element.styles)">{{ element.control?.label }}</td>
+						</el-button>
+					</div>
+					
+				</template>
+				<!--创建人-->
+				<FounderForm v-else-if="element.type === 'founder'" :data="element" :tablekey="props.tableinfo" :numrun="props.numrun" />
+				
+				<!--创建时间-->
+				<FounderTime  v-else-if="element.type === 'founderTime'" :data="element" :tablekey="props.tableinfo" :numrun="props.numrun" />
+				
+				<!--修改时间-->
+				<EditTime v-else-if="element.type === 'editTime'" :data="element" :tablekey="props.tableinfo" :numrun="props.numrun" />
+				
+				<!--拥有者-->
+				<OwnerPage v-else-if="element.type === 'owner'" :data="element" :tablekey="props.tableinfo" :numrun="props.numrun"  />
+				<!--所属部门-->
+				<DeptOrgPage v-else-if="element.type === 'deptOrg'" :data="element" :tablekey="props.tableinfo" :numrun="props.numrun" />
+
+				<DigitPage v-else-if="element.type === 'digitpage'" :data="element" />
+
+
+
+				<AssociatedForms  v-else-if="element.type === 'associatedForms'" :data="element" :form-props="formProps" :tablekey="props.tableinfo" />
+
+				<LowcodeImage  v-else-if="element.type === 'lowcodeImage'" :data="element" />
+				<LowcodeTransfer  v-else-if="element.type === 'lowcodeTransfer'" :data="element" />
+
+				<VideoUpAndPlay  v-else-if="element.type === 'videoUpAndPlay'" :data="element" />
+				<LowcodeCarsusel  v-else-if="element.type === 'lowcodeCarsusel'" :data="element" />
+				<SignatureMap  v-else-if="element.type === 'signaturemap'" :data="element" />
+
+				<OrgCentent v-else-if="element.type === 'orgCentent'" :data="element" />
+				<BaiduMap v-else-if="element.type === 'baidumap'" :data="element" />
+				<OrgCitys v-else-if="element.type === 'organization'" :data="element" />
+				<UrlLink v-else-if="element.type === 'urllink'" :data="element" />
+				<SerialNumber  v-else-if="element.type === 'serialNumber'" :data="element" :tablekey="props.tableinfo.name" :numrun="props.numrun" />
+				<!--其他组件-->
+				<FormItem v-else :data="element" @optionsValue3Get1="optionsValue3Get1"/>
+				
+				<!--组件设计外功能框架-->
+				<template v-if="type === 5">
+					<div class="drag-control">
+						<div class="item-control">
+							<i
+								class="icon-plus"
+								@click.stop="click('gridAdd', index, element)"
+								v-if="state.gridAdd"
+								title="添加列"
+							></i>
+							<i
+								class="icon-clone"
+								@click.stop="click('clone', index, element)"
+								v-if="state.clone"
+								title="克隆"
+							></i>
+							<i class="icon-del" @click.stop="click('del', index)"></i>
+						</div>
+						<div class="drag-move icon-move"></div>
+					</div>
+					<div class="tooltip" style="display: black;">{{ element.name }}</div>
+				</template>
+
+			</div>
+		</template>
+  	</draggable>
+</template>
+<style  lang='scss' scoped>
+
+</style>
+
diff --git a/src/components/DesignForm/tableListPage/formPageCont.vue b/src/components/DesignForm/tableListPage/formPageCont.vue
index d1b932e..0fbcf8e 100644
--- a/src/components/DesignForm/tableListPage/formPageCont.vue
+++ b/src/components/DesignForm/tableListPage/formPageCont.vue
@@ -254,25 +254,25 @@ const jsuanKuandu = () => {
 		
 			<el-container>
 				<el-main>
+				
 					<ak-form
-							ref="formEl"
-							v-loading="formLoading" element-loading-text="Loading..."
-							:form-data="formState.formData"
-							:type="props.tablePageClass"
-							:dict="formState.dict"
-							request-url="getFormContent"
-							add-url="saveFormContent"
-							edit-url="editFormContent"
-							:before-submit="beforeSubmit"
-							:close-app-submit="closeDrawer"
-							:change-key-val="changeKeyVal"
-							:anew-submit = "anewSubmit"
-							:save-edit-form-info="saveEditFormInfo"
-							:send-draft-submit= "sendDraftSubmit"
-							:after-submit="afterSubmit"
-							:submit-edit="submitEdit"
-						/>
-						
+						ref="formEl"
+						v-loading="formLoading" element-loading-text="Loading..."
+						:form-data="formState.formData"
+						:type="props.tablePageClass"
+						:dict="formState.dict"
+						request-url="getFormContent"
+						add-url="saveFormContent"
+						edit-url="editFormContent"
+						:before-submit="beforeSubmit"
+						:close-app-submit="closeDrawer"
+						:change-key-val="changeKeyVal"
+						:anew-submit = "anewSubmit"
+						:save-edit-form-info="saveEditFormInfo"
+						:send-draft-submit= "sendDraftSubmit"
+						:after-submit="afterSubmit"
+						:submit-edit="submitEdit"
+					/>
 					<el-divider  v-if="pageLog&&pageLog.length > 0" content-position="left">历史记录</el-divider>
 					<el-timeline style="width: 100%">
 						<el-timeline-item v-for="(item,index) in pageLog" :key="index" :timestamp="item.time+' 操作人：'+item.creater" placement="top">
diff --git a/src/views/sysworkflow/lowcodepage/newLowCode/appLayoutEdit/appContainerPage.vue b/src/views/sysworkflow/lowcodepage/newLowCode/appLayoutEdit/appContainerPage.vue
index 0727b82..8c17d26 100644
--- a/src/views/sysworkflow/lowcodepage/newLowCode/appLayoutEdit/appContainerPage.vue
+++ b/src/views/sysworkflow/lowcodepage/newLowCode/appLayoutEdit/appContainerPage.vue
@@ -48,6 +48,8 @@ const checkedMenu = ref<appMenuTreeInfo>("")
 const appPageKey = ref<string>("")	//自定义App表单Id
 const isNew = ref(false)
 const saveAppFormIsShow = ref(false)
+const menuParentKey = ref<string>("")
+const menuGroupShow = ref(false) //添加菜单分组
 /**
 @ 作者: 秦东
 @ 时间: 2024-07-22 11:40:06
@@ -130,6 +132,21 @@ const addAppPageForm = (key?:string) => {
 	isNew.value = true
 	// console.log("新建-->")	
 }
+
+
+/**
+@ 作者: 秦东
+@ 时间: 2024-04-23 16:57:39
+@ 功能: 添加菜单分组
+*/
+const addMenu = (key?:string) => {
+	if(key){
+		menuParentKey.value = key;
+	}else{
+		menuParentKey.value = "";
+	}
+	menuGroupShow.value = true;
+}
 </script>
 <template>
 	<el-drawer  v-model="props.editIsOpen" :with-header="false" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :size="props.drawerWith">