From 5728c5891ac13b41846b1026689b2ea239d71a18 Mon Sep 17 00:00:00 2001
From: herenshan112 <herenshan112@163.com>
Date: Wed, 15 May 2024 15:05:30 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8F=91=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DesignForm/aceDrawer.vue       |   5 +-
 src/components/DesignForm/dragControl.vue     |   1 +
 src/components/DesignForm/dragControlApp.vue  |  12 +-
 src/components/DesignForm/dragControlNew.vue  |  13 ++
 src/components/DesignForm/formControlAttr.vue |   4 +-
 .../DesignForm/formControlAttres.vue          |  13 ++
 .../DesignForm/formControlProperties.vue      |  49 ++++-
 .../public/form/calculate/cssInfo.ts          |   2 +-
 .../DesignForm/public/form/formGroup.vue      |  20 +-
 .../DesignForm/public/form/formItem.vue       |   4 +-
 .../DesignForm/public/headToolsApp.vue        |   8 +-
 .../appPage/appPageForm/pageForm.vue          | 208 +++++++++++++++++-
 .../appPage/appPageForm/previewPage.vue       |  87 ++++++++
 13 files changed, 399 insertions(+), 27 deletions(-)
 create mode 100644 src/views/sysworkflow/lowcodepage/appPage/appPageForm/previewPage.vue

diff --git a/src/components/DesignForm/aceDrawer.vue b/src/components/DesignForm/aceDrawer.vue
index 953b0e858..e221b85ab 100644
--- a/src/components/DesignForm/aceDrawer.vue
+++ b/src/components/DesignForm/aceDrawer.vue
@@ -83,5 +83,8 @@ onUnmounted(() => {
 	</el-drawer>
 </template>
 <style  lang='scss' scoped>
-
+#editJson, #editJsonCopy {
+    width: 100%;
+    height: calc(100vh - 90px);
+}
 </style>
diff --git a/src/components/DesignForm/dragControl.vue b/src/components/DesignForm/dragControl.vue
index 92e965505..ef5ad7a33 100644
--- a/src/components/DesignForm/dragControl.vue
+++ b/src/components/DesignForm/dragControl.vue
@@ -86,6 +86,7 @@ const useTemplateSelect = (data: FormData) => {
     emits('click', data)
 }
 const clone = (origin: any) => {
+	// console.log("All--->克隆选中的组件数据结构",origin)
     return jsonParseStringify(origin)
 }
 //数据监听
diff --git a/src/components/DesignForm/dragControlApp.vue b/src/components/DesignForm/dragControlApp.vue
index 30d91a195..c68f84d61 100644
--- a/src/components/DesignForm/dragControlApp.vue
+++ b/src/components/DesignForm/dragControlApp.vue
@@ -4,6 +4,7 @@
 @ 备注: 自定义表单组件页面(App专用)
 -->
 <script lang='ts' setup>
+import { jsonParseStringify } from '@/utils/DesignForm'
 import controlListData from '@/components/DesignForm/assembly'
 import Draggable from 'vuedraggable-es'
 import '@/assets/iconfont/iconfont.css'
@@ -93,6 +94,15 @@ const activities = [
     timestamp: '2018-04-11',
   },
 ]
+/**
+@ 作者: 秦东
+@ 时间: 2024-05-15 10:15:14
+@ 功能: 克隆选中的组件数据结构
+*/
+const clone = (origin: any) => {
+	// console.log("克隆选中的组件数据结构",origin)
+    return jsonParseStringify(origin)
+}
 </script>
 <template>
 	<div class="components-list">
@@ -113,7 +123,7 @@ const activities = [
 				ghost-class="ghost"
 				:sort="false"
 				:clone="clone"
-				item-key="key123"
+				:item-key="key123"
 			>
 			
 				<template #item="{ element }">
diff --git a/src/components/DesignForm/dragControlNew.vue b/src/components/DesignForm/dragControlNew.vue
index 2b899b6ee..e35e34ef4 100644
--- a/src/components/DesignForm/dragControlNew.vue
+++ b/src/components/DesignForm/dragControlNew.vue
@@ -4,6 +4,7 @@
 @ 备注: 自定义表单组件
 -->
 <script lang='ts' setup>
+import { jsonParseStringify } from '@/utils/DesignForm'
 import controlListData from '@/components/DesignForm/assembly'
 import Draggable from 'vuedraggable-es'
 import '@/assets/iconfont/iconfont.css'
@@ -93,6 +94,18 @@ const activities = [
     timestamp: '2018-04-11',
   },
 ]
+
+/**
+@ 作者: 秦东
+@ 时间: 2024-05-15 10:15:14
+@ 功能: 克隆选中的组件数据结构
+*/
+const clone = (origin: any) => {
+	// console.log("new--->克隆选中的组件数据结构",origin)
+    return jsonParseStringify(origin)
+}
+
+
 </script>
 <template>
 	<div class="components-list">
diff --git a/src/components/DesignForm/formControlAttr.vue b/src/components/DesignForm/formControlAttr.vue
index 7cfb9531e..730b20f9c 100644
--- a/src/components/DesignForm/formControlAttr.vue
+++ b/src/components/DesignForm/formControlAttr.vue
@@ -62,7 +62,7 @@
     const { formConfig, formData } = toRefs(props)
     const store = useDesignFormStore() as any
     const controlData = computed(() => {
-        console.log("注册自定义事件----------------->",props.formInfo)
+        // console.log("注册自定义事件----------------->",props.formInfo)
         // console.log("注册自定义事件--------1--------->",store.controlAttr)
         return store.controlAttr
     })
@@ -3004,7 +3004,7 @@ const loadNextPage = () => {
                             </el-button>
                         </div>
                         <el-divider content-position="left">高级属性</el-divider>
-                        
+                       
                         <LayoutPage v-if="cssIsShouw(attrList)"  v-model:styles-val="controlDataStyls" :place="controlData.type" />
     
     
diff --git a/src/components/DesignForm/formControlAttres.vue b/src/components/DesignForm/formControlAttres.vue
index 87305a695..67bf990a6 100644
--- a/src/components/DesignForm/formControlAttres.vue
+++ b/src/components/DesignForm/formControlAttres.vue
@@ -120,6 +120,19 @@ const isSearch = state.isSearch
       }*/
     ]
 })
+/** 
+    * 获取非负整数随机数 
+    * @param Min 最小整数  
+    * @param Max 最大整数 
+    * @returns 随机数 
+    */
+const Rand = (Min: number, Max: number) => {
+        switch (Min) {
+            case 0: return Math.round(Math.random() * Max);
+            case 1: return Math.ceil(Math.random() * Max);
+            default: return Math.round(Math.random() * (Max - Min) + Min);
+        }
+}
 const attrList = computed(() => {
     if (Object.keys(controlData.value).length) {
       const {
diff --git a/src/components/DesignForm/formControlProperties.vue b/src/components/DesignForm/formControlProperties.vue
index f36ee10be..6a06faabf 100644
--- a/src/components/DesignForm/formControlProperties.vue
+++ b/src/components/DesignForm/formControlProperties.vue
@@ -62,7 +62,7 @@ const designType = inject('formDesignType')
 const dataSourceOption = ref([])
 
 const controlData = computed(() => {
-    console.log("注册自定义事件----------------->",store.controlAttr)
+    // console.log("注册自定义事件----------------->",store.controlAttr)
     return store.controlAttr
 })
 /**
@@ -1046,6 +1046,7 @@ const attrList = computed(()=>{
 @ 时间: 2024-05-10 13:33:51
 @ 功能: 组件属性变化
 */
+const fileSignAry = reactive<any>([])
 const controlChange = (obj: any, val: any) => {
 	switch (obj.eventName) {
         case 'selectMultiple':
@@ -1237,20 +1238,32 @@ const showHide = (type: string[], show?: boolean) => {
 @ 功能: 判断是否是组件
 */
 const cssIsShouw = (val:any) => {  
-	console.log("判断是否是组件",val)
+	// console.log("判断是否是组件",val)
     if(val && val.length  && val.length > 0){ 
         return true;
     }    
     return false;
 }
-
+/** 
+    * 获取非负整数随机数 
+    * @param Min 最小整数  
+    * @param Max 最大整数 
+    * @returns 随机数 
+    */
+    const Rand = (Min: number, Max: number) => {
+        switch (Min) {
+            case 0: return Math.round(Math.random() * Max);
+            case 1: return Math.ceil(Math.random() * Max);
+            default: return Math.round(Math.random() * (Max - Min) + Min);
+        }
+    }
 /**
 @ 作者: 秦东
 @ 时间: 2024-05-13 15:46:24
 @ 功能: 
 */
 watch(()=>store.activeKey, (val:string) => {
-    console.log("监听数据编号--->", val)
+    // console.log("监听数据编号--->", val)
 	if(controlData.value.type==='lowcodeCarsusel'){
             const carsuselConfigData:CarsuselConfig[] = controlData.value.control.carsuselConfigArr
             carsuselConfigData.forEach(element => {
@@ -1261,14 +1274,26 @@ watch(()=>store.activeKey, (val:string) => {
                     element.imgId = onlyNumber;
                 }
             });
-        }else if(controlData.value.type==='associatedForms'){
+    }else if(controlData.value.type==='associatedForms'){
             controlData.value.control.fillRoles[0].id = uuidv4().replaceAll('-','').toString();
-        }
+    }
+	if (val) {
+        // 有值时自动跳到第一项
+        state.tabsName = 'first'
+        cssIsShouw(attrList)
+    }
+})
+/**
+@ 作者: 秦东
+@ 时间: 2024-05-15 11:07:37
+@ 功能: 获取组件样式Demo
+*/
+const controlDataStyls = computed(() => {
+        return store.controlAttr.styles
 })
-
 </script>
 <template>
-	<div class="sidebar-tools">
+	<div class="sidebar-tools_e">
 		<el-tabs v-model="state.tabsName">
 			<el-tab-pane label="字段配置" name="first">
 				<el-scrollbar class="formAttributeBox">
@@ -1917,7 +1942,7 @@ watch(()=>store.activeKey, (val:string) => {
                             </el-button>
                         </div>
                         <el-divider content-position="left">高级属性</el-divider>
-                        
+                       
                         <LayoutPage v-if="cssIsShouw(attrList)"  v-model:styles-val="controlDataStyls" :place="controlData.type" />
     
 
@@ -2172,8 +2197,10 @@ li::before {
     margin-bottom: 3.5px;
 }
 
-.sidebar-tools .el-tabs__content{
-    padding: 0;
+.sidebar-tools_e .el-tabs__content{
+		padding: 0;
+	
+    
 }
 .el-collapse-item__header {
     padding-left: 10px;
diff --git a/src/components/DesignForm/public/form/calculate/cssInfo.ts b/src/components/DesignForm/public/form/calculate/cssInfo.ts
index 504d6dccf..168e0f0ab 100644
--- a/src/components/DesignForm/public/form/calculate/cssInfo.ts
+++ b/src/components/DesignForm/public/form/calculate/cssInfo.ts
@@ -174,7 +174,7 @@ export const AnalysisCss = (ele:any) =>{
     if(ele['fontColor'] && ele['fontColor'] != ""){
         styleObject['color'] = ele['fontColor'];
     }
-  console.log("分析css==>",styleObject);
+//   console.log("分析css==>",styleObject);
   return styleObject
 }
 
diff --git a/src/components/DesignForm/public/form/formGroup.vue b/src/components/DesignForm/public/form/formGroup.vue
index 04f37fd10..37a550f23 100644
--- a/src/components/DesignForm/public/form/formGroup.vue
+++ b/src/components/DesignForm/public/form/formGroup.vue
@@ -50,7 +50,10 @@ watch(
     (v: FormList[]) => {
       	dataList.value = v
 		// console.log("监听表单变化++++++++++>",v)
-    }
+    },
+	{
+    deep: true
+}
 )
 const activeKey = computed(() => {
     return store.activeKey
@@ -102,7 +105,11 @@ const draggableAdd = (evt: any) => {
     const key = new Date().getTime().toString()
     const obj: any = dataList.value[newIndex]
     const isNested = evt.target && evt.target.getAttribute('data-type') // 不能嵌套
-	// console.log("不能嵌套",obj,isNested)
+	// 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))) {
 		dataList.value.splice(newIndex, 1)
 		return
@@ -150,6 +157,11 @@ const draggableAdd = (evt: any) => {
 			name: obj.type + key
 		}
     }
+
+	// console.log("设计拖拽事件-----5------->",obj)
+    // console.log("设计拖拽事件-----6------->",nameObj)
+    // console.log("设计拖拽事件-----7------->",objectItem)
+
     Object.assign(obj, nameObj, objectItem)
     groupClick(obj)
 }
@@ -203,7 +215,7 @@ const getFormItemStyle = (ele: FormList) => {
       	return { width: (ele.config.span / 24) * 100 + '%' }
     }
 	if(ele.styles?.divStyle){
-      console.log("返回栅格宽度3",AnalysisCss(ele.styles.divStyle))
+    //   console.log("返回栅格宽度3",AnalysisCss(ele.styles.divStyle))
       return AnalysisCss(ele.styles.divStyle)
     }
 }
@@ -502,7 +514,7 @@ const getFormItemLableStyle = (ele: any) => {
 						</div>
 						<div class="drag-move icon-move"></div>
 					</div>
-					<div class="tooltip" style="display: none;">{{ element.name }}</div>
+					<div class="tooltip" style="display: black;">{{ element.name }}</div>
 				</template>
 
 			</div>
diff --git a/src/components/DesignForm/public/form/formItem.vue b/src/components/DesignForm/public/form/formItem.vue
index 1f5991f6b..88c2c9022 100644
--- a/src/components/DesignForm/public/form/formItem.vue
+++ b/src/components/DesignForm/public/form/formItem.vue
@@ -469,13 +469,13 @@ onUnmounted(() => {})
 */
 const getFormItemLableStyle = (ele: any) => {
     if(ele?.labelStyle){
-      console.log("返回栅格宽度3",AnalysisCss(ele?.labelStyle))
+    //   console.log("返回栅格宽度3",AnalysisCss(ele?.labelStyle))
       return AnalysisCss(ele?.labelStyle)
     }
 }
 const getFormItemInputStyle = (ele: any,sty:number) => {
     if(ele?.inputStyle){
-      console.log("返回栅格宽度4",AnalysisInputCss(ele?.inputStyle,sty))
+    //   console.log("返回栅格宽度4",AnalysisInputCss(ele?.inputStyle,sty))
       return AnalysisInputCss(ele?.inputStyle,sty)
     }
 }
diff --git a/src/components/DesignForm/public/headToolsApp.vue b/src/components/DesignForm/public/headToolsApp.vue
index 8c011d2ef..b01f39060 100644
--- a/src/components/DesignForm/public/headToolsApp.vue
+++ b/src/components/DesignForm/public/headToolsApp.vue
@@ -8,7 +8,7 @@ const props = withDefaults(
 	defineProps<{
       showKey?: string[] // showKey,hideKey设置其中一个即可，showKey优先
       hideKey?: string[] // 设置了showKey时，hideKey无效
-	  customerformid?: number | string,
+	  customerformid?: string,
     }>(),
 	{
 		showKey: () => {
@@ -16,6 +16,9 @@ const props = withDefaults(
 		},
 		hideKey: () => {
 			return []
+		},
+		customerformid: () => {
+			return ""
 		}
     }
 )
@@ -47,10 +50,11 @@ const btnList = computed(() => {
 const btnClick = (type: string) => {
 	emits('click', type)
 }
+
 </script>
 <template>
 	<div class="main-head-tools">
-		<div>{{props.customerformid}}</div>
+		<div></div>
 		<div>
 			<span v-for="item in btnList">
 				<el-button
diff --git a/src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageForm.vue b/src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageForm.vue
index 6191ef155..c86497d6a 100644
--- a/src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageForm.vue
+++ b/src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageForm.vue
@@ -4,6 +4,7 @@
 @ 备注: 自定义表单
 -->
 <script lang='ts' setup>
+import { useDesignFormStore } from '@/store/DesignForm/designForm'
 import { useRoute, useRouter } from 'vue-router'
 import { json2string,objToStringify,string2json,stringToObj } from '@/utils/DesignForm/form'
 import { customerFormVersionCont } from '@/api/DesignForm/type'
@@ -15,6 +16,7 @@ import { saveProductionForm,getOneProductionForm,haveCustomerFormVersion,editCus
 import DragControlApp from '@/components/DesignForm/dragControlApp.vue';
 import HeadToolsApp from '@/components/DesignForm/public/headToolsApp.vue';
 import FormDesign from '@/components/DesignForm/public/form/form.vue'
+import PreviewPage from '@/views/sysworkflow/lowcodepage/appPage/appPageForm/previewPage.vue'
 
 const props = defineProps({
 	appCont:{
@@ -84,6 +86,15 @@ const route: any = useRoute().query || {}
 const versionCont = ref<customerFormVersionCont[]>([])			//版本内容列表
 const tableKey = ref("")
 const versionId = ref<string>("")		//版本号
+const store = useDesignFormStore()
+const drawer = reactive<DrawerStruct>({
+    visible: false,
+    type: '',
+    title: '',
+    codeType: '',
+    direction: undefined, //弹出方向rtl / ltr
+    callback: ''
+})
 // 搜索设计时左侧快速添加字段
 const searchCheckField = (data: FormData) => {
     state.value.formData.list.push(data)
@@ -98,14 +109,123 @@ const editversionstaus = (id:string) =>{
 }
 //打开脚本预览
 const openAceEditDrawer = (params: any) => {
+	const { type, direction, codeType, title, callback, content } = params
+	drawer.direction = direction // 窗口位置ltr/rtl
+    drawer.type = type // 作为窗口唯一标识，在窗口关闭时可根据type作不同处理
+    drawer.codeType = codeType || '' // 显示代码类型
+    drawer.title = title ? `提示：${title}` : ''
+    drawer.visible = true
+    drawer.callback = callback
+    let editData =codeType === 'json'? json2string(content, true): objToStringify(content, true)
+	switch (type) {
+		case 'css':
+			editData = state.value.formData.config?.style || ''
+			break
+		case 'dict':
+			// 格式化一下
+			editData = json2string(state.value.formDict, true)
+			break
+		case 'beforeRequest':
+		case 'beforeSubmit':
+		case 'afterResponse':
+		case 'afterSubmit':
+		case 'change':
+			// eslint-disable-next-line no-case-declarations
+			const beforeData = state.value.formData.events || {}
+			if (beforeData[type]) {
+				editData = objToStringify(beforeData[type], true)
+			} else {
+				if (['afterResponse', 'afterSubmit'].includes(type)) {
+					editData = afterResponse
+				} else if (type === 'change') {
+					editData = onChange
+				} else {
+					editData = beforeRequest
+				}
+			}
+			break
+		// case 'afterResponse':
+		// case 'afterSubmit':
+		//   const newData = state.formData.events || {}
+		//   if (newData[type]) {
+		//     editData = objToStringify(newData[type], true)
+		//   } else {
+		//     editData = afterResponse
+		//   }
+		//   break
 
+		case 'optionsParams':
+			if (!content) {
+				editData = beforeRequest
+			}
+			break
+		case 'optionsResult':
+			if (!content) {
+				editData = afterResponse
+			}
+			break
+    }
+    drawer.content = editData
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-05-15 13:28:57
+@ 功能: 关闭脚本预览窗，并初始化脚本预览参数
+*/
+const dialogCancel = () => {
+    drawer.visible = false
+    drawer.type = ''
+    drawer.title = ''
+    drawer.codeType = ''
+    drawer.callback = ''
+    drawer.content = ''
 }
 /**
 @ 作者: 秦东
 @ 时间: 2024-05-13 14:40:40
 @ 功能: 表单编辑功能按钮回调事件
 */
-const buttonCallbackEvent = (type: string) => {}
+const buttonCallbackEvent = (type: string) => {
+	console.log("表单编辑功能按钮回调事件", type)
+	switch (type) {
+		case 'del':	//清空
+			state.value.formData.list = []
+			store.setActiveKey('')
+			store.setControlAttr({})
+			break
+		case 'eye':	//预览
+			store.setActiveKey('')
+			store.setControlAttr({})
+			let stringPreview = objToStringify(state.value.formData) // 防止预览窗口数据修改影响
+			const formName = state.value.formData.form.name
+			const reg = new RegExp(`get${formName}ControlByName`, 'g')
+			stringPreview = stringPreview.replace(
+				reg,
+				`getPreview${formName}ControlByName`
+			)
+			state.value.formDataPreview = stringToObj(stringPreview)
+			state.value.formDataPreview.form.name = `Preview${formName}` // 修改下表单名
+			// console.log("预览数据",state.value.formDataPreview);
+			state.value.previewVisible = true
+			break
+		case 'json':	//生成脚本预览
+			openAceEditDrawer({
+				direction: 'rtl',
+				content: state.value.formData,
+				title: '可编辑修改或将已生成的脚本粘贴进来'
+			})
+			break
+		case 'save':	//保存
+			if(props.appPageKey && props.appPageKey != ""){	//存在，进行编辑操作
+
+			}else{ //不存在，进行新增操作
+				saveAppFormData();
+			}
+			break
+		case 'branch':	//另存为新版
+			break
+	}
+}
 
 /**
 @ 作者: 秦东
@@ -195,6 +315,53 @@ const versionUpdateForm = (val:string) => {
 	
 	getInitData()
 }
+/**
+@ 作者: 秦东
+@ 时间: 2024-05-15 13:14:40
+@ 功能: 关闭预览
+*/
+const closePreviewPage = (val:boolean) => {
+	// console.log("关闭预览",val)
+	state.value.previewVisible = val
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-05-15 13:58:21
+@ 功能: 写入自建应用App表单
+*/
+const saveAppFormData = () => {
+	let sendData: any = {
+		jsondata:JSON.stringify(state.value.formData),
+		data: objToStringify(state.value.formData),
+		source: state.value.formOtherData.source, // 数据源允许在表单属性设置里修改的
+		name: state.value.formOtherData.formName, // 表单名称，用于在显示所有已创建的表单列表里显示
+		type: 3, // 1表单 2列表 3:app表单
+		dict: json2string(state.value.formDict),
+		appKey:appFormKeyVal.value,
+		groupKey:props.groupKey
+	}
+	console.log("写入自建应用App表单",sendData)
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-05-15 14:07:39
+@ 功能: 编辑App自定义表单
+*/
+const editAppFormTable = () => {
+	let sendData: any = {
+		jsondata:JSON.stringify(state.value.formData),
+		data: objToStringify(state.value.formData),
+		source: state.value.formOtherData.source, // 数据源允许在表单属性设置里修改的
+		name: state.value.formOtherData.formName, // 表单名称，用于在显示所有已创建的表单列表里显示
+		type: 1, // 1表单 2列表
+		dict: json2string(state.value.formDict),
+		appKey:appFormKeyVal,
+		groupKey:props.groupKey,
+		id:props.appPageKey.toString(),
+		version:versionId.value.toString(),
+	}
+	console.log("编辑App自定义表单",sendData)
+}
 </script>
 <template>
 	<el-aside class="asideBox leftBox">
@@ -205,9 +372,16 @@ const versionUpdateForm = (val:string) => {
 	</el-aside>
 	<el-main class="mainBox rightBox">
 		<HeadToolsApp  v-loading="state.loading"  :customerformid="propsappPageKey" @click="buttonCallbackEvent" />
-		<div v-loading="state.loading" class="main-form">
+		<div v-loading="state.loading" class="main_form">
 				<div v-if="state.formData.list.length === 0" class="empty-tips">
-					从左侧拖拽来添加组件
+					从左侧拖拽来添加组件<br>
+					appCont：{{ props.appCont }} <br>
+					formKey：{{ props.formKey }} <br>
+					appPageKey：{{ props.appPageKey }} <br>
+					groupKey：{{ props.groupKey }} <br>
+					formVersion：{{ props.formVersion }} <br>
+					formconfigcont：{{ props.formconfigcont }} <br>
+					state：{{ props.state }} <br>
 				</div>
 				<FormDesign 
 					:type="5"
@@ -228,6 +402,16 @@ const versionUpdateForm = (val:string) => {
 			@open-dialog="openAceEditDrawer"
 		/>
 	</el-aside>
+	<ace-drawer
+		v-model="drawer.visible"
+		:title="drawer.title"
+		:direction="drawer.direction"
+		:content="drawer.content"
+		:code-type="drawer.codeType"
+		@before-close="dialogCancel"
+		@confirm="dialogConfirm"
+	/>
+	<PreviewPage v-model:state="state"   @clickClose="closePreviewPage" />
 </template>
 <style  lang='scss' scoped>
 .asideBox{
@@ -250,4 +434,22 @@ const versionUpdateForm = (val:string) => {
 .scr_form_box{
 	height: calc(100vh - 80px);
 }
+.main_form {
+    background: #fff;
+    border: 1px dashed #999;
+    margin: 10px;
+    height: calc(100vh - 105px);
+    overflow-y: auto;
+    overflow-x: hidden;
+    position: relative;
+}
+.main_form .empty-tips {
+    text-align: center;
+    width: 100%;
+    font-size: 20px;
+    color: #ccc;
+    position: absolute;
+    left: 0;
+    top: 100px;
+}
 </style>
diff --git a/src/views/sysworkflow/lowcodepage/appPage/appPageForm/previewPage.vue b/src/views/sysworkflow/lowcodepage/appPage/appPageForm/previewPage.vue
new file mode 100644
index 000000000..ee4d16c49
--- /dev/null
+++ b/src/views/sysworkflow/lowcodepage/appPage/appPageForm/previewPage.vue
@@ -0,0 +1,87 @@
+<!--
+@ 作者: 秦东
+@ 时间: 2024-05-15 13:09:38
+@ 备注: 预览页面
+-->
+<script lang='ts' setup>
+import FormDesign from '@/components/DesignForm/public/form/form.vue'
+const props = defineProps({
+	state:{
+		type:Object,
+		default(){
+			return {}
+		}
+	}
+});
+const emits = defineEmits<{
+    (e: 'update:state', val: any): void
+	(e: 'clickClose'): void
+}>()
+const state =  computed({
+	get() {
+		return props.state
+	},
+	set(val: formStruct) {
+		emits('update:state', val)
+	}
+});
+/**
+@ 作者: 秦东
+@ 时间: 2024-05-15 13:12:54
+@ 功能: 提交预览
+*/
+const previewForm = ref()
+const previewSubmit = () => {
+	previewForm.value.validate((valid: boolean, fields: any) => {
+		if (valid) {
+			// alert('校验通过')
+			ElMessage.success('校验通过')
+			// console.log(fields)
+		} else {
+			// alert('校验不通过')
+			// console.log('error submit!', fields)
+			ElMessage.error('校验不通过')
+			return false
+      	}
+    })
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-05-15 13:16:09
+@ 功能: 关闭预览
+*/
+const clickClose = () => {
+	// console.log("关闭预览")
+	emits('clickClose', false)
+}
+</script>
+<template>
+	<div>
+		<el-drawer
+			v-model="state.previewVisible"
+			title="预览"
+			:append-to-body="true"
+			size="50%"
+		>
+			<FormDesign 
+				:type="1"
+				ref="previewForm"
+				:form-data="state.formDataPreview"
+				:dict="state.formDict"
+			/>
+			<template #footer>
+				<div class="dialog-footer">
+					<el-button size="small" type="primary" @click="previewSubmit">
+						提交
+					</el-button>
+					<el-button size="small" @click="clickClose">
+						取消
+					</el-button>
+				</div>
+			</template>
+      	</el-drawer>
+	</div>
+</template>
+<style  lang='scss' scoped>
+
+</style>