From 3f541afe59b9f367f37cd6ec5c379b5c8d197b73 Mon Sep 17 00:00:00 2001
From: herenshan112 <herenshan112@163.com>
Date: Wed, 12 Jun 2024 13:51:23 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DesignForm/app/index.vue       | 851 +++++++++++++++++-
 .../DesignForm/formControlProperties.vue      | 181 ++++
 .../lowcodepage/pageFlow/appTableFlow.vue     | 533 +++++++++++
 .../lowcodepage/runApp/runAppForm.vue         |  13 +-
 4 files changed, 1576 insertions(+), 2 deletions(-)
 create mode 100644 src/views/sysworkflow/lowcodepage/pageFlow/appTableFlow.vue

diff --git a/src/components/DesignForm/app/index.vue b/src/components/DesignForm/app/index.vue
index faaa24c2b..176d8172e 100644
--- a/src/components/DesignForm/app/index.vue
+++ b/src/components/DesignForm/app/index.vue
@@ -4,11 +4,860 @@
 @ 备注: App表单列表
 -->
 <script lang='ts' setup>
+import { json2string,objToStringify,string2json,stringToObj } from '@/utils/DesignForm/form'
+import { onBeforeRouteLeave, useRoute, useRouter } from 'vue-router'
+import { useDesignFormStore } from '@/store/DesignForm/designForm'
+import { attrButton,FormPageList,FormPageConfig } from '@/api/DesignForm/tableButton'
+import { inputUnit,timeUnit,choiceUnit,switchUnit,orgUnit,checkboxUnit } from '@/api/DesignForm/fieldUnit'
+import type { FormInstance, FormRules,ElNotification  } from 'element-plus'
+import { gainFormPageListCont } from '@/api/DesignForm/requestapi'
+import { Picture,InfoFilled,QuestionFilled } from '@element-plus/icons-vue'
 
+import { softDeletion,retractRunWorkFlow } from '@/api/taskapi/management'
+
+
+//引入组件
+import FormPageCont from '@/components/DesignForm/tableListPage/formPageCont.vue'
+import TableFlow from '@/views/sysworkflow/lowcodepage/pageFlow/appTableFlow.vue'
+
+const props = withDefaults(
+    defineProps<{
+		data: FormPageList
+		searchData?: attrButton[]
+		config:FormPageConfig
+		formId?:string
+		beforeRequest?: (params: any, rout: any) => any
+		afterResponse?: (result: any) => any | string
+		beforeDelete?: (params: any, route: any) => any
+		showPage?: boolean
+		requestUrl?: string // 请求的api
+		deleteUrl?: string // 删除的api
+		dict?: { [key: string | number]: string | number }
+		fixedBottomScroll?: boolean
+		query?: { [key: string]: any } // 一些附加的请求参数
+		autoLoad?: boolean // 初始时自动请求加载数据
+		delKey?: string // 删除标识
+		lookPageIsShow?:boolean,
+		versionid?:string,
+		signCode?:string,
+		pickAppMenu?:any
+		versiontitle?:string,
+    }>(),
+    {
+		showPage: true,
+		data: () => {
+			return { columns: [],controlBtn:[],operateBtn:[],config:{} }
+		},
+		searchData: () => {
+			return []
+		},
+		config:() =>{
+			return {}
+		},
+		dict: () => {
+			return {}
+		},
+		formId:() =>{
+			return ""
+		},
+		versionid:() =>{
+			return ""
+		},
+		versiontitle:() =>{
+			return ""
+		},
+		fixedBottomScroll: true,
+		autoLoad: true,
+		delKey: 'id',
+		query: () => {
+			return {}
+		},
+		lookPageIsShow:() => {
+			return false
+		}
+    }
+)
+const emits = defineEmits<{
+    (e: 'selectionChange', row: any): void
+    (e: 'btnClick', btn: any, row?: any): void // 列表上面及表格列表里添加删除按钮事件
+}>()
+const operState = ref<number>(1)	//操作状态	1：新增；2：重新发起；3：申请修改；4：提交审批;5:普通表单修改
+const idList = ref<string[]>([])
+const designStore = useDesignFormStore()
+const route = useRoute()
+const router = useRouter()
+const tableDataList = ref([]) // 表格行数据
+const openTaskDrawer = ref(false)	//新增数据
+
+const state = reactive({
+    loading: false,
+    currentPage: 1,
+    pageSize: props.config?.pageSize || 2,
+    total: 0,
+    selectionChecked: [],
+    dict: {}, // 接口返回的
+    searchFormDown: false,
+    treeValue: {}, // 侧栏树选中的值
+    tableScrollMargin: 0,
+    columnsCheck: designStore.getColumnsCheck(route.path),
+    currentNodeKey: ''
+})
+/**
+@ 作者: 秦东
+@ 时间: 2024-03-28 16:03:12
+@ 功能: 判断类型
+*/
+const unitIsShow = (val:tableButton,unitName:string) => {
+	// val.pattern
+	switch (val.fieldClass) {
+		case "id":		//自定义表单保留字
+			return inputUnit.includes(unitName);
+			break;
+		case "masters_key": //自定义表单保留字
+			return inputUnit.includes(unitName);
+			break;
+		case "creater": //自定义表单保留字
+			return inputUnit.includes(unitName);
+			break;
+		case "creater_time": //自定义表单保留字
+			return timeUnit.includes(unitName);
+			break;
+		case "edit_time": //自定义表单保留字
+			return timeUnit.includes(unitName);
+			break;
+		case "flow_id": //自定义表单保留字
+			return inputUnit.includes(unitName);
+			break;
+		case "baidumap":		//自定义表单保留字
+			return inputUnit.includes(unitName);
+			break;
+		case "input":		//自定义表单保留字
+			return inputUnit.includes(unitName);
+			break;
+		case "radio":		//自定义表单保留字
+			return choiceUnit.includes(unitName);
+			break;
+		case "switch":		//自定义表单保留字
+			return switchUnit.includes(unitName);
+			break;
+		case "orgCentent":		//自定义表单保留字
+			return orgUnit.includes(unitName);
+			break;
+		case "varchar":		//自定义表单保留字
+			return inputUnit.includes(unitName);
+			break;
+		case "checkbox":
+			return checkboxUnit.includes(unitName);
+			break;
+		default:
+			return inputUnit.includes(unitName);
+			break;
+	}
+}
+
+/**
+@ 作者: 秦东
+@ 时间: 2024-03-28 13:17:46
+@ 功能: 重置表单
+*/
+const ruleSearchForm = ref()
+const resetFields = (formEl: FormInstance | undefined) => {
+	
+	// formEl.resetFields()
+	// console.log("formEl",formEl,formEl.resetFields())
+    // if (!formEl) return
+  	// formEl.resetFields()
+	if(props.searchData && props.searchData.length > 0){
+		props.searchData.forEach((item:any)=>{
+			item.value="";
+		})
+	}
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-04-01 11:36:07
+@ 功能: 功能按钮动作
+*/
+const setUpClick = (val:string,id:string) =>{
+	console.log("功能按钮动作",val,"----id----->",props.versionid,"-----formId---->",props.versiontitle)
+	if(val.key == "newAdd"){
+		drawerWith.value = container.value?.clientWidth
+		openTaskDrawer.value = true
+	}else{
+		if(idList.value.length > 0){
+			ElMessageBox.confirm("确认删除此数据项?删除后不可恢复！", "警告", {
+				confirmButtonText: "确定",
+				cancelButtonText: "取消",
+				type: "warning",
+			}).then(() => {
+				let sendData = {
+					id:idList.value,
+					isTrue:2
+				}
+				softDeletion(sendData)
+					.then((data)=>{
+						console.log('cancel!',data)
+						ElNotification({
+							title: '温馨提示！',
+							message: data.mag,
+							type: 'success',
+						})
+						getPageData()
+					})
+			});
+		}else{
+			ElMessage.error("你还未选中要删除的项目！");
+		}
+		
+	}
+	
+}
+
+/**
+@ 作者: 秦东
+@ 时间: 2024-04-01 13:30:06
+@ 功能: 表格选择操作
+*/
+const selectionChange = (row: any) => {
+    state.selectionChecked = row
+    emits('selectionChange', row)
+	console.log('selectionChange', row)
+	idList.value.length = 0
+	console.log('idList.value-1-->', idList.value)
+	if(row && row.length>0){
+		row.forEach((item:any) => {
+			console.log('item', item.masters_key)
+			idList.value.push(item.masters_key.toString())
+		})
+	}
+	console.log('idList.value--->', idList.value)
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-04-01 13:31:37
+@ 功能: 获取表格头内容
+*/
+const columnsFilter = computed(() => {
+    if (!state.columnsCheck?.length) {
+      	return props.data.columns
+    } else {
+		return props.data.columns.filter((item: any) => {
+			return state.columnsCheck.includes(item.prop || item.type)
+		})
+    }
+})
+/**
+@ 作者: 秦东
+@ 时间: 2024-04-01 14:14:36
+@ 功能: 翻页操作
+*/
+const handleSizeChange = (page: number) => {
+	console.log("翻页操作",page)
+    state.pageSize = page
+    getListData(1)
+}
+const handleCurrentChange = (page: number) => {
+    getListData(page)
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-04-01 14:15:16
+@ 功能: 获取数据
+*/
+// 筛选查询列表数据
+const getListData = (page?: number) => {
+	if (page) {
+      	state.currentPage = page
+    }
+	getPageData()
+}
+watch(()=>props.lookPageIsShow,(val:boolean)=>{
+	if(val && props.formId != ""){
+		getPageData()
+		
+	}
+})
+watch(()=>props.formId,(val:any)=>{
+	getPageData()
+},{
+	deep: true,
+})
+/**
+@ 作者: 秦东
+@ 时间: 2024-04-01 15:51:32
+@ 功能: 获取数据
+*/
+const getPageData = () => {
+	state.loading = true;
+	let sendData = {
+		formId:props.formId,
+		page:state.currentPage,
+		pagesize:state.pageSize,
+		searchData:json2string(props.searchData)
+	}
+	console.log("获取列表详细信息",sendData)
+	gainFormPageListCont(sendData)
+		.then((data)=>{
+			console.log("获取列表详细信息----------------->",data)
+			tableDataList.value = data.data.list
+			state.total = data.data.total
+			state.loading = false;
+		})
+		.finally(()=>{
+			state.loading = false;
+		})
+}
+onMounted(()=>{
+	getPageData()
+})
+/**
+@ 作者: 秦东
+@ 时间: 2024-04-02 13:59:21
+@ 功能: 判断单选值
+*/
+const judjeRadio = (val: any, options: any[]) => {
+	// console.log("判断单选值",val, options)
+	if(options.length > 0){
+		options.forEach((item)=>{
+			if(item.value == val){
+				console.log("判断单选值",val, item.value,item.label)
+				val =  item.label
+			}
+		})
+	}
+	if(val == 0 || val == "0"){
+		val = ""
+	}
+	return val
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-04-02 14:49:40
+@ 功能: 判断开关类型
+*/
+const judjeSwitch = (val:any,yesVal:any) => {
+	if(val == yesVal) return true;
+	return false;
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-04-03 13:13:56
+@ 功能: 列表信息删除信息
+*/
+const confirmEvent = (val:any) => {
+	let sendData = {
+		id:[val.masters_key],
+		isTrue:2
+	}
+	softDeletion(sendData)
+		.then((data)=>{
+			console.log('cancel!',data)
+			ElNotification({
+				title: '温馨提示！',
+				message: data.mag,
+				type: 'success',
+			})
+			getPageData()
+		})
+}
+const cancelEvent = (val:any) => {
+  console.log('cancel!',val)
+}
+const container = ref()	//实例化内容容器
+const drawerWith = ref();	//编辑表单时抽屉宽度
+/**
+@ 作者: 秦东
+@ 时间: 2024-04-03 13:24:06
+@ 功能: 查看详细内容
+*/
+const tablePageClass = ref(1)
+const lookPageInfoIsShow = ref(false)
+const pageInfoCont = ref<any>()
+const lookPageInfo = (val:any) => {
+	tablePageClass.value = 4;
+	pageInfoCont.value = val
+	drawerWith.value = container.value?.clientWidth
+	lookPageInfoIsShow.value = true;
+	
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-04-05 11:29:50
+@ 功能: 编辑表单内容
+*/
+
+const editInfo = (val:any) => {
+	console.log('修改数据!',val)
+	operState.value = 5;
+	tablePageClass.value = 2;
+	pageInfoCont.value = val
+	drawerWith.value = container.value?.clientWidth
+	lookPageInfoIsShow.value = true;
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-04-10 15:32:55
+@ 功能: 提交审批
+*/
+const submitApproval = (val:any) => {
+	operState.value = 4
+	tablePageClass.value = 2;
+	pageInfoCont.value = val
+	drawerWith.value = container.value?.clientWidth
+	lookPageInfoIsShow.value = true;
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-04-11 09:36:59
+@ 功能: 撤回申请
+*/
+const withdrawApplication  = (val:any) => {
+	// console.log("撤回申请", val);
+	let sendInfo = {
+		id: val.masters_key,
+	}
+	retractRunWorkFlow(sendInfo)
+		.then((data)=>{
+			ElMessage({
+				message: '撤回成功！',
+				type: 'success'
+			})
+			getPageData()
+		})
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-04-11 11:17:42
+@ 功能: 重新提交申请
+*/
+const afreshSendFlow = (val:any) => {
+	operState.value = 2
+	tablePageClass.value = 2;
+	pageInfoCont.value = val
+	drawerWith.value = container.value?.clientWidth
+	lookPageInfoIsShow.value = true;
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-04-11 11:19:21
+@ 功能: 申请修改数据
+*/
+const editFormSendFlow = (val:any) => {
+	operState.value = 3
+	tablePageClass.value = 2;
+	pageInfoCont.value = val
+	drawerWith.value = container.value?.clientWidth
+	lookPageInfoIsShow.value = true;
+}
 </script>
 <template>
-	<div>1</div>
+	<div ref="container" v-loading="state.loading" class="table-list-comm">
+		
+		<el-row class="rowBox">
+			<el-col :span="24">
+				<el-form  v-if="config.searchIsShow" ref="ruleSearchForm" class="seacherForm">
+					<template v-for="(item, index) in searchData" :key="index">
+						<div class="group group-input">
+							<el-form-item :label="item.label"  class="form_cont">
+								<el-input
+									v-model="item.value"
+									:placeholder="'请输入'+item.label"
+									clearable
+									v-if="unitIsShow(item,'input')"
+								/>
+								<el-date-picker
+									v-model="item.value"
+									type="datetime"
+									:placeholder="'请选择'+item.label"
+									:shortcuts="shortcuts"
+									v-if="unitIsShow(item,'time')"
+								/>
+								<el-select
+									v-model="item.value"
+									clearable
+									:placeholder="'请选择'+item.label"
+									v-if="unitIsShow(item,'radio')"
+								>
+									<el-option
+										v-for="itemOpt in item.options"
+										:key="itemOpt.value"
+										:label="itemOpt.label"
+										:value="itemOpt.value"
+									/>
+								</el-select>
+								<el-select
+									v-model="item.value"
+									clearable
+									:placeholder="'请选择'+item.label"
+									v-if="unitIsShow(item,'switch')"
+								>
+									<el-option
+										:key="item.activeValue"
+										label="是"
+										:value="item.activeValue"
+									/>
+									<el-option
+										:key="item.inactiveValue"
+										label="否"
+										:value="item.inactiveValue"
+									/>
+								</el-select>
+								<el-select
+									v-model="item.value"
+									multiple
+									clearable
+									:placeholder="'请选择'+item.label"
+									v-if="unitIsShow(item,'checkbox')"
+								>
+									<el-option
+										v-for="itemOpt in item.options"
+										:key="itemOpt.value"
+										:label="itemOpt.label"
+										:value="itemOpt.value"
+									/>
+								</el-select>
+								<el-select
+									v-model="item.value"
+									clearable
+									:placeholder="'请选择'+item.label"
+									v-if="unitIsShow(item,'org')"
+								>
+								</el-select>
+							</el-form-item>
+						</div>
+						
+					</template>
+					<div class="group group-btn" v-if="searchData.length">
+						<el-button type="primary" @click="getPageData"><el-icon><Search /></el-icon>查询</el-button>
+						<el-button @click="resetFields(ruleSearchForm)"><el-icon><Refresh /></el-icon>重置</el-button>
+					</div>
+				</el-form>
+			</el-col>
+			<el-col :span="24">
+				<div class="operateButArea">
+					<div class="operatLeft">
+						<el-text v-if="data.controlBtn.length === 0" class="mx-1 tipBox" type="info">操作按钮区域</el-text>
+						<el-button
+							v-for="item in data.controlBtn"
+							v-bind="item"
+							:key="item.type"
+							@click="setUpClick(item)"
+						>
+							{{ item.label }}
+						</el-button>
+					</div>
+					<div>
+						<el-tooltip
+							v-if="config.searchFormIsShow"
+							class="box-item"
+							effect="dark"
+							content="折叠查询表单"
+							placement="bottom"
+						>
+							<el-icon @click="config.searchIsShow=!config.searchIsShow"><Search /></el-icon>
+						</el-tooltip>
+					</div>
+				</div>
+			</el-col>
+			<el-col :span="24">
+				<el-table
+					v-bind="data.tableProps"
+					ref="table"
+					:data="tableDataList"
+					@selection-change="selectionChange"
+					table-layout="fixed"
+				>
+					<template
+						v-for="item in columnsFilter"
+						:key="item.id || item.label"
+					>
+					
+						<el-table-column v-if="['-'].includes(item.fieldClass)" :type="item.type" :prop="item.field" :label="item.label" config="" width="60">
+							<template v-if="item.help" #header="scope">
+								{{ scope.column.label }}
+								<tooltip :content="item.help" />
+							</template>
+						</el-table-column>
+						<el-table-column v-else-if="item.fieldClass=='__control'"  :prop="item.field" :label="item.label" config=""  width="160">
+							<template #default="scope">
+								<el-button-group>
+									<el-tooltip
+										v-if="scope.row.flowIsOpen==1&&scope.row.taskStatus==1"
+										class="box-item"
+										effect="dark"
+										content="提交审批"
+										placement="top-end"
+									>
+										<el-button type="success" size="small" class="fa fa-send-o"   @click="submitApproval(scope.row)" />
+									</el-tooltip>
+
+									<el-tooltip
+										v-if="scope.row.flowIsOpen==1&&scope.row.taskStatus==2"
+										class="box-item"
+										effect="dark"
+										content="重新申请"
+										placement="top-end"
+									>
+										<el-button type="warning" size="small" class="fa fa-retweet"  @click="afreshSendFlow(scope.row)" />
+									</el-tooltip>
+									<el-tooltip
+										class="box-item"
+										effect="dark"
+										content="查看详情"
+										placement="top-end"
+									>
+										<el-button @click="lookPageInfo(scope.row)" type="primary" size="small" class="fa fa-eye"  />
+									</el-tooltip>
+									<el-popconfirm
+										v-if="scope.row.flowIsOpen==1&&scope.row.isRetract"
+										confirm-button-text="确定"
+										cancel-button-text="取消"
+										:icon="QuestionFilled"
+										icon-color="#F56C6C"
+										title="您确定要撤回此次申请？一经撤回！需要此流程重新提交申请！"
+										@confirm="withdrawApplication (scope.row)"
+										@cancel="cancelEvent(scope.row)"
+									>
+										<template #reference>
+											<el-button  size="small" class="fa fa-reply-all"  />
+										</template>
+									</el-popconfirm>
+									<el-tooltip
+										v-if="scope.row.flowIsOpen==2"
+										class="box-item"
+										effect="dark"
+										content="编辑"
+										placement="top-end"
+									>
+										<el-button @click="editInfo(scope.row)" type="info" size="small" class="fa fa-edit"  />
+									</el-tooltip>
+									<el-popconfirm
+										v-if="scope.row.taskStatus==2||scope.row.taskStatus==1"
+										confirm-button-text="确定"
+										cancel-button-text="取消"
+										:icon="QuestionFilled"
+										icon-color="#F56C6C"
+										title="您确定要删除此条记录?一经删除！数据将不可恢复！"
+										@confirm="confirmEvent(scope.row)"
+										@cancel="cancelEvent(scope.row)"
+									>
+										<template #reference>
+											<el-button type="danger" size="small" class="fa fa-trash-o"  />
+										</template>
+									</el-popconfirm>
+
+									<el-tooltip
+										v-if="scope.row.flowIsOpen==1&&scope.row.taskStatus==4"
+										class="box-item"
+										effect="dark"
+										content="申请修改"
+										placement="top-end"
+									>
+										<el-button type="info" size="small" class="fa fa-edit" @click="editFormSendFlow(scope.row)" />
+									</el-tooltip>
+								</el-button-group>
+							</template>
+						</el-table-column>
+						<el-table-column v-else  :prop="item.field" :label="item.label" config="">
+							<template v-if="item.help" #header="scope">
+								{{ scope.column.label }}
+								<tooltip :content="item.help" />
+							</template>
+							<template v-if="item.fieldClass=='radio'" #default="scope">
+								<!-- {{scope.row[scope.column.property]}}{{item}} -->
+								{{ judjeRadio(scope.row[scope.column.property],item.options) }}
+							</template>
+							<template v-if="item.fieldClass=='upload'" #default="scope" >
+							<div class="demo-image__error">
+								<el-image
+									style="width: 50px; height: 50px"
+									:src="scope.row[scope.column.property]"
+								>
+									<template #error>
+										<div class="image-slot">
+											<el-icon><Picture /></el-icon>
+										</div>
+									</template>
+								</el-image>
+							</div>
+							</template>
+							<template v-if="item.fieldClass=='switch'" #default="scope">	
+								
+								<el-tag
+									v-if="judjeSwitch(scope.row[scope.column.property],item.activeValue)"
+									type="success"
+									effect="light"
+								>
+									启用
+								</el-tag>
+								<el-tag
+									v-else
+									type="danger"
+									effect="light"
+								>
+									禁用
+								</el-tag>
+							</template>
+							<template v-if="item.fieldClass=='baidumap'" #default="scope">
+								{{scope.row[scope.column.property]}}
+							</template>
+						</el-table-column>
+					</template>
+				</el-table>
+			</el-col>
+			<el-col v-if="state.total > 0" :span="24">
+				<div class="pageBox">
+					<el-pagination
+						v-model:currentPage="state.currentPage"
+						v-model:page-size="state.pageSize"
+						:page-sizes="[20, 30, 40, 50] as any"
+						:total="state.total"
+						layout="total, sizes, prev, pager, next, jumper"
+						@size-change="handleSizeChange"
+						@current-change="handleCurrentChange"
+					/>
+				</div>
+			</el-col>
+			<el-col :span="24"  style="display:none">
+			
+				{{ tableDataList}}
+			</el-col>
+			<el-col :span="24" style="display:none">
+				<el-button-group>
+							<el-tooltip
+								
+								class="box-item"
+								effect="dark"
+								content="提交审批"
+								placement="top-end"
+							>
+								<el-button type="success" size="small" class="fa fa-send-o" />
+							</el-tooltip>
+
+							<el-tooltip
+								
+								class="box-item"
+								effect="dark"
+								content="重新申请"
+								placement="top-end"
+							>
+								<el-button type="warning" size="small" class="fa fa-retweet"   />
+							</el-tooltip>
+							<el-tooltip
+								class="box-item"
+								effect="dark"
+								content="查看详情"
+								placement="top-end"
+							>
+								<el-button type="primary" size="small" class="fa fa-eye"  />
+							</el-tooltip>
+							<el-tooltip
+								
+								class="box-item"
+								effect="dark"
+								content="撤回"
+								placement="top-end"
+							>
+								<el-button  size="small" class="fa fa-reply-all"  />
+							</el-tooltip>
+							<el-tooltip
+								
+								class="box-item"
+								effect="dark"
+								content="删除"
+								placement="top-end"
+							>
+								<el-button type="danger" size="small" class="fa fa-trash-o"  />
+							</el-tooltip>
+
+							<el-tooltip
+								
+								class="box-item"
+								effect="dark"
+								content="申请修改"
+								placement="top-end"
+							>
+								<el-button type="info" size="small" class="fa fa-edit"  />
+							</el-tooltip>
+							</el-button-group>
+			
+			
+			</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" />
+		
+		<TableFlow  v-model:isopen="openTaskDrawer" :versionid="props.versionid" :versiontitle="props.versiontitle" :drawerwith="drawerWith" :pick-app-menu="pickAppMenu" @searchquery="getListData" />
+	
+	</div>
 </template>
 <style  lang='scss' scoped>
+.rowBox{
+	width:100%;
+}
+.table-list-comm{
+	padding:0px 15px 15px 15px;
+}
+.seacherForm{
+	min-height: auto;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+}
+.pageBox{
+	width:100%;
+	margin-top:20px;
+	text-align: center;
+	display: flex;
+  	justify-content: center;
+}
+.operateButArea{
+		width: 100%;
+		display: flex;
+		align-items: center;
+  		justify-content: space-between;
+		margin-top:15px;
+		.operatLeft{
+			padding-bottom: 2px;
+		}
+}
+.group{
+	width: auto;
+    margin-right: 10px;
+}
+.demo-image__error .block {
+  padding: 0px 0;
+  text-align: center;
+  border-right: solid 1px var(--el-border-color);
+  display: inline-block;
+  width: 100%;
+  box-sizing: border-box;
+  vertical-align: top;
+}
+.demo-image__error .demonstration {
+  display: block;
+  color: var(--el-text-color-secondary);
+  font-size: 14px;
+  margin-bottom: 20px;
+}
+.demo-image__error .el-image {
+  padding: 0 5px;
+  max-width: 300px;
+  max-height: 200px;
+  width: 100%;
+  height: 200px;
+}
 
+.demo-image__error .image-slot {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background: var(--el-fill-color-light);
+  color: var(--el-text-color-secondary);
+  font-size: 30px;
+}
+.demo-image__error .image-slot .el-icon {
+  font-size: 30px;
+}
 </style>
diff --git a/src/components/DesignForm/formControlProperties.vue b/src/components/DesignForm/formControlProperties.vue
index 7e01b6cf3..4ca69f9e3 100644
--- a/src/components/DesignForm/formControlProperties.vue
+++ b/src/components/DesignForm/formControlProperties.vue
@@ -1159,6 +1159,124 @@ const controlChange = (obj: any, val: any) => {
         obj.path && getPropByPath(controlData.value, obj.path, newVal)
     }
 }
+// 更多属性弹窗
+const openAttrDialog = (type?: string, tooltip?: string) => {
+        let editData = controlData.value.control
+        if (controlData.value.type === 'button') {
+            // 按钮组件编辑属性
+            editData = controlData.value.config
+            type = 'button'
+        }
+        switch (type) {
+            case 'treeSelect':
+                editData = controlData.value.control.data
+                break
+            case 'cascader':
+                editData = controlData.value.options
+                break
+            case 'optionsParams': // 选项请求附加参数
+                editData = controlData.value.config.beforeRequest
+                // params.codeType = 'json'
+                break
+            case 'optionsResult':
+                editData = controlData.value.config.afterResponse
+                break
+        }
+        const emitsParams = {
+            content: editData,
+            title: tooltip,
+            type: type,
+            direction: 'ltr',
+            callback: (result: any) => {
+                switch (type) {
+                case 'treeSelect':
+                    controlData.value.control.data = result
+                    break
+                case 'cascader':
+                    controlData.value.options = result
+                    break
+                case 'optionsParams':
+                    controlData.value.config.beforeRequest = result
+                    break
+                case 'optionsResult':
+                    controlData.value.config.afterResponse = result
+                    break
+                case 'button':
+                    controlData.value.config = result
+                    break
+                default:
+                    controlData.value.control = {}
+                    Object.assign(controlData.value.control, result)
+                }
+            }
+        }
+        emits('openDialog', emitsParams)
+    }
+ // 必填校验
+ const requiredChange = (val: any) => {
+        if (!controlData.value.item?.rules) {
+              controlData.value.item.rules = []
+        }
+        if (val) {
+            controlData.value.item.rules.push({
+                required: true,
+                message: '必填项',
+                trigger: 'change'
+            })
+        } else {
+              controlData.value.item.rules.splice(0, 1)
+        }
+    }
+// 多选固定选项增加
+const addSelectOption = (type: any) => {
+        if (controlData.value.type === 'cascader') {
+            // 级联时打开弹窗口
+            openAttrDialog('cascader')
+        } else if (controlData.value.type === 'treeSelect') {
+              openAttrDialog('treeSelect', '编辑组件下拉选项数据')
+        } else {
+            if (type === 'tabs') {
+                controlData.value.columns.push({
+                label: '标签名称',
+                list: []
+                })
+            } else {
+                controlData.value.options.push({
+                label: '',
+                value: ''
+                })
+            }
+        }
+    }
+// 属性设置相关结束
+    // 多选固定选项删除
+    const delSelectOption = (index: number, type?: string) => {
+        if (type === 'tabs') {
+              controlData.value.columns.splice(index, 1)
+        } else {
+              controlData.value.options.splice(index, 1)
+        }
+    }
+// 添加校验规则
+const addRules = (tooltip: string) => {
+        if (!controlData.value.item?.rules) {
+              controlData.value.item.rules = []
+        }
+        const params = {
+            content: controlData.value.item?.rules,
+            title: tooltip,
+            direction: 'ltr',
+            callback: (result: any) => {
+                Object.assign(controlData.value.item.rules, result)
+            }
+        }
+        emits('openDialog', params)
+    }
+// 校验规则必填勾选设置，存在校验规则时勾选
+const checkboxRequired = computed(() => {
+        const val = controlData.value && controlData.value.item?.rules
+        return val && val.length > 0
+    })
 /**
 @ 作者: 秦东
 @ 时间: 2024-05-10 13:39:12
@@ -1180,6 +1298,17 @@ const tableColumnAdd = (val: string) => {
           controlData.value.list.splice(0, 1)
     }
 }
+// 快速添加一条校验规则
+const addRulesFast = () => {
+        if (!controlData.value.customRules) {
+              controlData.value.customRules = []
+        }
+        controlData.value.customRules.push({
+            type: 'required',
+            message: '必填项',
+            trigger: 'blur'
+        })
+    }
 /**
 @ 作者: 秦东
 @ 时间: 2024-05-10 13:40:14
@@ -1313,6 +1442,58 @@ watch(()=>store.activeKey, (val:string) => {
 const controlDataStyls = computed(() => {
         return store.controlAttr.styles
 })
+// 返回选项配置提示
+const getOptionPlaceholder = (type: number) => {
+        switch (type) {
+            case 1:
+                return '数据源接口URL,可带参数'
+            case 2:
+                return '字典key，默认为字段标识'
+        }
+        return ''
+    }
+// 删除一条校验规则
+const delAddRules = (index: number) => {
+        controlData.value.customRules &&
+        controlData.value.customRules.splice(index, 1)
+    }
+//添加一条编码规则
+const addNumRules = () => {
+        if (!controlData.value.config.customRules) {
+            controlData.value.config.customRules = []
+        }
+        controlData.value.config.customRules.push({
+            type:'time',
+            rule:"YYYYMMDD"
+        })
+    }
+//删除一条编码规则
+const delNumRules = (index: number) => {
+        controlData.value.config.customRules &&
+        controlData.value.config.customRules.splice(index, 1)
+    }
+// 快速添加校验规则改变时，填写默认的校验提示信息
+const rulesSelectChange = (item: any, val: string) => {
+        const filter = validate.filter(item => item.type === val)
+        if (filter && filter.length) {
+              item.message = filter[0].message
+        }
+    }
+    const rulesSelectNumChange = (item: any, val: string) => {
+        // console.log("快速添加校验规则改变时",item,val)
+        const filter = state.numberRulesList.filter(item => item.type === val)
+        if (filter && filter.length) {
+              item.message = filter[0].msg
+            if(val == "time") {
+                item.rule = "YYYYMMDD"
+            }else{
+                item.rule = ""
+            }
+        }
+    }
+  
+   
+   
 </script>
 <template>
 	<div class="sidebar-tools_e">
diff --git a/src/views/sysworkflow/lowcodepage/pageFlow/appTableFlow.vue b/src/views/sysworkflow/lowcodepage/pageFlow/appTableFlow.vue
new file mode 100644
index 000000000..995418266
--- /dev/null
+++ b/src/views/sysworkflow/lowcodepage/pageFlow/appTableFlow.vue
@@ -0,0 +1,533 @@
+<!--
+@ 作者: 秦东
+@ 时间: 2024-06-12 10:58:03
+@ 备注: App表单。有无流程处理
+-->
+<script lang='ts' setup>
+import { nodeFlow,conditionInfo,nodelPeoples } from '@/api/taskapi/types'
+import { haveCustomerFormVersion,generateFlow,echoTableFormPage,realTimeUpdateFlow } from '@/api/taskapi/management'
+import { string2json,stringToObj } from '@/utils/DesignForm/form'
+import { judgeSubmitCancel,startRunFlow,gainAppPageInfo } from '@/api/DesignForm/requestapi'
+import { notAsA_BasisForJudgment,asAnApprovalActionControl,fixedValueControl,timeControl,timeEquation,submitButton, afreshSubmitButton } from '@/utils/workflow/const'
+import { appPageDataInit,appWorkFlow } from "@/api/date/type"
+
+
+import FlowStep from '@/views/taskplatform/taskmanagement/flowStep.vue'
+
+const props = defineProps({
+	isopen:{
+		type:Boolean,
+		default:true
+	},
+	versionid:{
+		type:String,
+		default:""
+	},
+	versiontitle:{
+		type:String,
+		default:""
+	},
+	drawerwith:{
+		type:Number,
+		default:0
+	},
+	pickAppMenu:{
+		type:Object,
+		default(){
+			return {}
+		}
+	}
+})
+const formLoading = ref(false) //loading
+const flowLoading = ref(false) //loading
+
+const flowFactor = reactive<conditionInfo[]>([])	//表单组件
+const flowMap = ref<any[]>();			//工作流
+const nextStep = ref<number>(0);
+const currentProgress  = ref<number>(1);
+const nodeKey = ref<string>('');
+//获取工作流条件
+const gainFlowChart = reactive<nodeFlow>({
+	id:"0"
+})
+
+const nodelUserList = reactive<nodelPeoples[]>([])
+/**
+@ 作者: 秦东
+@ 时间: 2024-04-08 15:35:54
+@ 功能: 表单基本数据结构
+*/
+const state = reactive<any>({
+	type: 1, // 1新增；2修改；3查看（表单模式） ；4查看； 5设计
+    formData: {
+      list: [],
+      form: {},
+      config: {},
+	  powerstr:{}
+    },
+    dict: {},
+    formId: props.versionid,
+    id: 0,
+    loading: true
+})
+const emits = defineEmits(["update:isopen","searchquery"]);
+const drawerOpenOrClose =   computed({
+	get: () => props.isopen,
+	set: (val) => {
+		emits("update:isopen", val);
+	},
+});
+
+const drawbox =   computed({
+	get: () => {
+		if(props.drawerwith > 1200){
+			return '50%';
+		}else{
+			return props.drawerwith
+		}
+	},
+	set: (val:number) => {
+		return val
+	},
+});
+const isFlowTable = ref(false) //判断是不是流程表单
+//获取表单数据
+const getTaskFormData = () =>{
+	formLoading.value = true
+	flowLoading.value = true
+	echoTableFormPage({id:props.versionid.toString()})
+		.then(({ data }) =>{
+			console.log("表单数据",data)
+			if(data.tableFormPage.flowIsOpen == 1 && data.tableFormPage.flowkeystr != "0"){
+				isFlowTable.value = true;
+				
+			}else{
+				isFlowTable.value = false;
+			}
+			gainFlowChart.id=data.tableFormPage.flowkeystr
+			console.log("表单数据--->1",data.flowPage.flowList)
+			flowMap.value = data.flowPage.flowList
+			state.id=props.versionid
+			state.formData = stringToObj(data.tableFormPage.mastesform)
+      		state.dict = string2json(data.tableFormPage.dict)
+			state.formData.powerstr = string2json(data.tableFormPage.powerstr)
+			judgeSubmitCancel({"name":data.tableFormPage.mastesformjson})
+				.then((datajud:any) =>{
+					if(datajud.code == 0){
+						if (datajud.data == 3 || datajud.data == 4){
+							state.formData.list.push(submitButton)
+						}
+					}
+				})
+		})
+		.finally(()=>{
+			formLoading.value = false
+			flowLoading.value = false
+		})
+}
+
+//监听页面变化
+watch(()=>props.isopen,()=>{
+	if(props.isopen){
+		
+		// getTaskFormData();
+		initLoadData();
+	}else{
+		initData()
+	}
+})
+//数据初始化
+const initData = () => {
+	state.formData = {
+      list: [],
+      form: {},
+      config: {}
+    };
+	state.dict = {};
+	state.formId = 0;
+	state.id = 0;
+	state.loading = true;
+	let aryLen = flowFactor.length
+	if(aryLen > 0) flowFactor.splice(0,aryLen);
+}
+//组件解析
+const changeKeyVal = (key:any,val:any,type:any,attribute:any) => {
+	// console.log("改变表单值--key--->",key)
+	// console.log("改变表单值--val--->",val,Array.isArray(val))
+	// console.log("改变表单值--type--->",type)
+	// console.log("改变表单值--attribute--->",attribute)
+
+	// console.log("改变表单值--type-1-true->",notAsA_BasisForJudgment.indexOf(type))
+
+
+	// console.log("改变表单值--flowFactor--->",flowFactor)
+	
+
+	// if(notAsA_BasisForJudgment.indexOf(type) != -1){
+	// 	console.log("改变表单值--type--true->",notAsA_BasisForJudgment.indexOf(type))
+	// }
+	let unitsVal = val
+	let isUpdateFlowChart = false
+	//单选，多选，下拉菜单
+	if(notAsA_BasisForJudgment.indexOf(type) === -1){
+		let isWrite = true
+		flowFactor.forEach((item:any)=>{
+			if(item.factorid == key){
+				isWrite = false
+				
+				item.type=3
+				if(type == "checkbox"){
+					item.isCheckbox = true
+					item.answers = val.map(String)
+				}else{
+					item.isCheckbox = false
+					item.oneanswer = val.toString()
+				}
+				if(notAsA_BasisForJudgment.indexOf(type) === -1){
+					isUpdateFlowChart = true
+				}
+			}
+		})
+		if(isWrite){
+			if(type == "checkbox"){
+				flowFactor.push({
+					factorid:key,
+					type:3,
+					isCheckbox:true,
+					answers:val.map(String)
+				})
+			}else{
+				flowFactor.push({
+					factorid:key,
+					type:3,
+					isCheckbox:false,
+					oneanswer:val.toString()
+				})
+			}
+			isUpdateFlowChart = true
+		}
+		// console.log("改变表单值--flowFactor--->",flowFactor)
+		
+	}
+	// console.log("改变表单值--flowFactor--1->",unitsVal,timeControl,type)
+	//时间类空间附加判断条件
+	if(timeControl.indexOf(type) > -1 || fixedValueControl.indexOf(type) > -1 || type == "input"){
+		// console.log("改变表单值--flowFactor--3->",unitsVal)
+		let addNewTime = true		//判断是否新增
+		flowFactor.forEach((item:any)=>{
+			// console.log("改变表单值--flowFactor--5->",item.type)
+			if(item.type == 2){
+				addNewTime = false
+				// console.log("改变表单值--flowFactor--5====1->",item.type)
+				// console.log("改变表单值--flowFactor--5====3->",item.customFields,item.customFields.length)
+				if(item.customFields && item.customFields.length > 0){
+					// console.log("改变表单值--flowFactor--5====2->",item.customFields)
+					let sunNewAdd = true
+					item.customFields.forEach((sunItem:any)=>{
+						// console.log("改变表单值--flowFactor-4->",sunItem.wordfield , key,sunItem.wordfield == key)
+						if(sunItem.wordfield == key){
+							sunNewAdd = false
+							isUpdateFlowChart = true
+							if(timeEquation.indexOf(attribute) === -1){			//非区间性时间
+								sunItem.leftval = val.toString()
+							}else{ //区间性时间
+								if(Array.isArray(val)){
+									if(val.length >= 2){
+										sunItem.leftval =  val[0].toString()
+										sunItem.rightval = val[val.length - 1].toString()
+									}
+								}
+							}
+						}
+					})
+					if(sunNewAdd){
+						isUpdateFlowChart = true
+						if(timeEquation.indexOf(attribute) === -1){//非区间性时间
+							let customFieldInfo = {
+								wordfield: key,
+								optType: "1",
+								leftval: val.toString()
+							}
+							item.customFields.push(customFieldInfo)
+						}else{ //区间性时间
+							if(Array.isArray(val)){
+								if(val.length >= 2){
+									let customFieldInfo = {
+										wordfield: key,
+										optType: "6",
+										leftval: val[0].toString(),
+										leftoptType:"3",
+										rightoptType:"3",
+										rightval:val[val.length - 1].toString()
+									}
+									item.customFields.push(customFieldInfo)
+								}
+							}
+						}
+					}
+				}
+			}
+		})
+		
+		if(addNewTime){	//新增自定义类数据判断
+			isUpdateFlowChart = true
+			if(timeEquation.indexOf(attribute) === -1){			//非区间性时间
+				let customFieldInfo = {
+					wordfield: key,
+					optType: "1",
+					leftval: val.toString()
+				}
+				let condInfo = {
+					factorid:"customFields",
+					type:2,
+					isCheckbox:false,
+					customFields:[customFieldInfo]
+				}
+				flowFactor.push(condInfo)
+			}else{		//区间性时间
+				if(Array.isArray(val)){
+					
+					if(val.length >= 2){
+						let customFieldInfo = {
+							wordfield: key,
+							optType: "6",
+							leftval: val[0].toString(),
+							leftoptType:"3",
+							rightoptType:"3",
+							rightval:val[val.length - 1].toString()
+						}
+						let condInfo = {
+							factorid:"customFields",
+							type:2,
+							isCheckbox:false,
+							customFields:[customFieldInfo]
+						}
+						flowFactor.push(condInfo)
+					}
+				}
+			}
+			
+		}
+	}
+	//操作人
+	if(asAnApprovalActionControl.indexOf(type) > -1){
+		isUpdateFlowChart = true
+		let isWriteUs = true
+		nodelUserList.forEach((item:any)=>{
+			if(item.factorid == key){
+				isWriteUs = false
+				item.userList = val
+			}
+		})
+		if(isWriteUs){
+			nodelUserList.push({
+				factorid:key,
+				userList:val
+			})
+		}
+	}
+
+	// console.log("改变表单值--flowFactor--->",flowFactor)
+	//更新工作流图
+	if(isUpdateFlowChart){
+		flowLoading.value = true
+		//获取工作流不进图
+		gainFlowChart.conditionList=flowFactor
+		gainFlowChart.nodelPeople=nodelUserList
+		gainFlowChart.oldFlow = flowMap
+		// console.log("获取工作流不进图--gainFlowChart--->",gainFlowChart)
+		realTimeUpdateFlow(gainFlowChart)
+			.then((data:any) =>{
+				// console.log("获取工作流不进图-new-->",data)
+				flowMap.value = data.data.flowList
+				nextStep.value = data.data.nextStep;
+				currentProgress.value  = data.data.Step;
+				nodeKey.value = data.data.nodeKey;
+				// // console.log("获取工作流不进图-1-->",flowMap.value)
+				flowLoading.value = false
+			})
+	}
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-04-09 16:41:20
+@ 功能: 提交成功回调
+*/
+const afterSubmit = (type: string,val?:any) => {
+	console.log("表单提交成功------------------>",type,val)
+	console.log("流程------------------>",flowMap)
+	if (type === 'success') {
+		if(isFlowTable.value){
+			if(val.code == 0){
+				if(val.data){
+					let sendInfo ={
+						id:val.data.uuid,
+						flowList:flowMap.value,
+						state:3
+					}
+					startRunFlow(sendInfo)
+						.then((data:any)=>{
+							console.log("流程提交成功--------1---------->",data)
+						})
+				}
+			}
+		}
+	}
+	closeAppSubmit()
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-04-09 16:49:09
+@ 功能: 表单前置数据
+*/
+const beforeSubmit = (params: any) => {
+    params.formId =  props.versionid
+    params.id = ""
+	// emits("update:isopen", false);
+    return params
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-04-09 16:50:01
+@ 功能: 关闭操作
+*/
+const closeAppSubmit = () =>{
+	emits("searchquery")
+	emits("update:isopen", false);
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-04-09 16:50:37
+@ 功能: 保存草稿
+*/
+const saveDraftPage = (type: string,val?:any) => {
+	if (type === 'success') {
+		if(isFlowTable.value){
+			if(val.code == 0){
+				let sendInfo ={
+						id:val.data.uuid,
+						flowList:flowMap.value,
+						state:1
+					}
+					startRunFlow(sendInfo)
+						.then((data:any)=>{
+							// console.log("流程提交成功--------1---------->",data)
+						})
+			}
+		}
+	}
+	closeAppSubmit()
+}
+
+
+//app表单
+const stateForm = reactive<any>({
+	type: 1, // 1新增；2修改；3查看（表单模式） ；4查看； 5设计
+    formData: {
+      list: [],
+      form: {},
+      config: {},
+	  powerstr:{}
+    },
+    dict: {},
+    formId: "1",
+    id: 0,
+	formId: 0,
+	versionId: 0,
+    loading: true
+})
+const appInitData = ref<appPageDataInit>("")
+const mastesformjson = ref("")	//
+const isFlow = ref(2)
+const versionId = ref<string>("")	//表单版本号
+const versionTitle = ref<string>("")	//表单名称
+/**
+@ 作者: 秦东
+@ 时间: 2024-06-03 09:00:10
+@ 功能: 初始化数据
+*/
+const initLoadData = () => {
+	console.log("initLoadData",props.pickAppMenu.type,props.pickAppMenu.type != 1)
+	if(props.pickAppMenu.type != 1){
+		// appFormTitle.value = props.pickAppMenu.label
+		gainAppPageInfo({id:props.pickAppMenu.id})
+		.then((data)=>{
+			console.log("获取初始化表单数据",data)
+			appInitData.value = data.data
+			console.log("获取初始化表单数据---!",appInitData.value)
+			mastesformjson.value = data.data.appForm.mastesformjson
+			isFlow.value = data.data.appForm.flowIsOpen
+			
+			versionId.value = data.data.appForm.id.toString()
+			versionTitle.value = data.data.appForm.name
+			
+			if(data.data.page){
+				console.log("data.data.mastesform", data.data)
+				stateForm.id=data.data.appForm.version.toString()
+				stateForm.formId =data.data.appForm.cfid.toString()
+				stateForm.versionId =data.data.appForm.id.toString()
+				stateForm.formData = stringToObj(data.data.appForm.mastesform)
+				stateForm.dict = string2json(data.data.appForm.dict)
+				stateForm.formData.powerstr = string2json(data.data.appForm.powerstr)
+				console.log("data.data.mastesform", stateForm.formData)
+				
+				judgeSubmitCancel({"name":data.data.appForm.mastesformjson})
+					.then((datajud:any) =>{
+						if(datajud.code == 0){
+							if (datajud.data == 3 || datajud.data == 4){
+								stateForm.formData.list.push(submitButton)
+							}
+						}
+					})
+			}
+			
+		})
+	}
+	
+}
+</script>
+<template>
+	<el-drawer  v-model="drawerOpenOrClose" v-loading="loadingData" :title="versiontitle"  :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :size="drawbox" class="drawerClass" >
+		<AppFormPage
+						
+						ref="formEl"
+						:number="props.pickAppMenu.id"
+						:isWorkFlow="isFlow"
+						:form-data="stateForm.formData"
+						:type="1"
+						:mastesformjson="mastesformjson"
+						:flowkey="appInitData.flowkey"
+						:groupid="appInitData.groupid"
+						:sign-code="appInitData.signCode"
+						:version-id="versionid"
+						:after-submit="afterSubmit"
+						add-url="addData"
+					/>
+	</el-drawer>
+	
+</template>
+<style  lang='scss' scoped>
+.common-layout{
+	height: calc(100vh - 55px);
+	padding: 0 15px;
+	.el-main{
+		height: calc(100vh - 55px);
+		padding:0;
+	}
+	.flowBox{
+		height: calc(100vh - 55px);
+		border-left: 1px solid #ccc;
+		padding: 0 15px;
+	}
+	.el-header{
+		padding:0 10px;
+		line-height:30px;
+		text-align:right;
+		font-size:20px;
+		i{
+			cursor:pointer;
+		}
+	}
+	
+}
+</style>
diff --git a/src/views/sysworkflow/lowcodepage/runApp/runAppForm.vue b/src/views/sysworkflow/lowcodepage/runApp/runAppForm.vue
index 5248ae346..eaf388987 100644
--- a/src/views/sysworkflow/lowcodepage/runApp/runAppForm.vue
+++ b/src/views/sysworkflow/lowcodepage/runApp/runAppForm.vue
@@ -180,8 +180,19 @@ watch(() => props.pickAppMenu,(val:any) => {
 		<el-col :span="24">
 			<el-scrollbar class="scroBox">
 				<el-card class="tispMsg"  shadow="always">
-					<!-- <akPageList /> -->
+		
+					<AppPageList v-if="appInitData.pageList"
+						:data="stateList.tableData"
+						:search-data="stateList.searchData"
+						:config="stateList.config"
+						:form-id="appInitData.appForm.cfid.toString()"
+						:versionid="appInitData.versionId" 
+						:versiontitle="versionTitle"
+						:sign-code="appInitData.signCode"
+						:pickAppMenu="props.pickAppMenu"
+					/>
 					<AppFormPage
+						v-else
 						ref="formEl"
 						:number="props.pickAppMenu.id"
 						:isWorkFlow="isFlow"