From dc104b5a0b3ff81a0f6c123a5cbaf846ff204794 Mon Sep 17 00:00:00 2001
From: herenshan112 <herenshan112@163.com>
Date: Thu, 25 Apr 2024 10:00:44 +0800
Subject: [PATCH 1/5] =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E5=BA=94?=
 =?UTF-8?q?=E7=94=A8=E8=8F=9C=E5=8D=95=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/DesignForm/requestapi.ts              | 16 ++++
 src/types/components.d.ts                     |  8 --
 .../sysworkflow/lowcodepage/appFormList.vue   | 23 ++++--
 .../lowcodepage/appPage/appMenuGroup.vue      |  9 +++
 .../lowcodepage/appPage/appMenus.vue          | 78 ++++++++++++++++---
 .../sysworkflow/lowcodepage/appPage/index.vue |  6 +-
 6 files changed, 114 insertions(+), 26 deletions(-)

diff --git a/src/api/DesignForm/requestapi.ts b/src/api/DesignForm/requestapi.ts
index ac414fdfe..fa7a2eba4 100644
--- a/src/api/DesignForm/requestapi.ts
+++ b/src/api/DesignForm/requestapi.ts
@@ -375,3 +375,19 @@ export function saveAppMenu(data: any) {
 		data: data
 	});
 }
+//获取完整APP菜单树
+export function gainAllAppMenu(data: any) {
+	return request({
+		url: '/systemapi/app/gainAllAppMenu',
+		method: 'post',
+		data: data
+	});
+}
+//获取完整APP菜单树
+export function editAppMenuCont(data: any) {
+	return request({
+		url: '/systemapi/app/editAppMenuCont',
+		method: 'post',
+		data: data
+	});
+}
diff --git a/src/types/components.d.ts b/src/types/components.d.ts
index 494e33af9..070842f01 100644
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -32,7 +32,6 @@ declare module '@vue/runtime-core' {
     ElCard: typeof import('element-plus/es')['ElCard']
     ElCarousel: typeof import('element-plus/es')['ElCarousel']
     ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
-    ElCascader: typeof import('element-plus/es')['ElCascader']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElCol: typeof import('element-plus/es')['ElCol']
@@ -64,7 +63,6 @@ declare module '@vue/runtime-core' {
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
     ElPopover: typeof import('element-plus/es')['ElPopover']
-    ElProgress: typeof import('element-plus/es')['ElProgress']
     ElRadio: typeof import('element-plus/es')['ElRadio']
     ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
@@ -113,13 +111,7 @@ declare module '@vue/runtime-core' {
     IconSelect: typeof import('./../components/IconSelect/index.vue')['default']
     IEpCaretBottom: typeof import('~icons/ep/caret-bottom')['default']
     IEpClose: typeof import('~icons/ep/close')['default']
-    IEpDelete: typeof import('~icons/ep/delete')['default']
-    IEpEdit: typeof import('~icons/ep/edit')['default']
-    IEpPlus: typeof import('~icons/ep/plus')['default']
-    IEpRefresh: typeof import('~icons/ep/refresh')['default']
-    IEpSearch: typeof import('~icons/ep/search')['default']
     IEpSetting: typeof import('~icons/ep/setting')['default']
-    IEpView: typeof import('~icons/ep/view')['default']
     LangSelect: typeof import('./../components/LangSelect/index.vue')['default']
     LayoutPage: typeof import('./../components/DesignForm/layoutPage/index.vue')['default']
     List: typeof import('./../components/DesignForm/public/form/components/list.vue')['default']
diff --git a/src/views/sysworkflow/lowcodepage/appFormList.vue b/src/views/sysworkflow/lowcodepage/appFormList.vue
index 573ac8c0b..2a64a9b83 100644
--- a/src/views/sysworkflow/lowcodepage/appFormList.vue
+++ b/src/views/sysworkflow/lowcodepage/appFormList.vue
@@ -53,12 +53,14 @@ const pageAppTotal = ref<number>(0)	//总记录数
 const contList = ref<customerFormCont[]>()
 
 const lookPageIsShow = ref(false)
+const loadingApp = ref(false)
 /**
 @ 作者: 秦东
 @ 时间: 2024-03-21 10:54:23
 @ 功能: 获取表单列表
 */
 const getFormAppList = () => {
+	loadingApp.value = true
 	let sendInfo = {
 		page:pageApp.value,
 		pagesize:pageAppSize.value,
@@ -66,11 +68,13 @@ const getFormAppList = () => {
 	}
 	getCustomerFormList(sendInfo)
 		.then(({ data }) => {
-			// console.log("搜索表单-->",data);
+			console.log("搜索表单-->",data);
 			pageAppTotal.value = data.total
 			contList.value = data.list
 		})
-		.finally(() => {})
+		.finally(() => {
+			loadingApp.value = false
+		})
 }
 /**
 @ 作者: 秦东
@@ -225,9 +229,18 @@ const editAppCont = (val:string) => {
 	appKey.value = val.toString();
 	appPageShow.value = true;
 }
+/**
+@ 作者: 秦东
+@ 时间: 2024-04-24 10:44:42
+@ 功能: 翻页
+*/
+const fanyePage = (val: number) =>{
+	pageApp.value = val
+	getFormAppList()
+}
 </script>
 <template>
-    <div>
+    <div v-loading="loadingApp">
 		<el-row :gutter="10" >
 			<el-col v-for="item in contList" :key="item.id"  :xs="8" :sm="12" :md="8" :lg="8" :xl="8" style=" margin-top: 10px;">
 				<el-card class="cardpattern"  body-style="padding:5px;">
@@ -274,14 +287,14 @@ const editAppCont = (val:string) => {
 			</el-col>		
 		</el-row>
 		<div class="formGroupPage">
-			<el-pagination layout="prev, pager, next" v-model:current-page="pageApp" :page-size="pageAppSize" :total="pageAppTotal" />
+			<el-pagination layout="prev, pager, next" v-model:current-page="pageApp" :page-size="pageAppSize" :total="pageAppTotal" @current-change="fanyePage" />
 		</div>
 
 		<TableFlow  v-model:isopen="openTaskDrawer" :versionid="versionId" :versiontitle="versionTitle" :drawerwith="props.drawerWith" @searchquery="getFormAppList" />
 
 		<LowCodeFormPage v-if="addFormIsShow" :drawer-with="props.drawerWith" v-model:form-key="formId" @refreshPage="refreshPage" />
 
-		<DesignAPPpage  v-model:is-show="appPageShow" v-model:form-key="appKey" :drawer-with="props.drawerWith"  @refreshPage="closeAppPage" />
+		<DesignAPPpage  v-model:is-show="appPageShow" v-model:form-key="appKey" :drawer-with="props.drawerWith"  @refreshPage="getFormAppList" />
 
 		<el-drawer
 			v-model="lookPageIsShow"
diff --git a/src/views/sysworkflow/lowcodepage/appPage/appMenuGroup.vue b/src/views/sysworkflow/lowcodepage/appPage/appMenuGroup.vue
index d2e5eb89d..c00fee7f1 100644
--- a/src/views/sysworkflow/lowcodepage/appPage/appMenuGroup.vue
+++ b/src/views/sysworkflow/lowcodepage/appPage/appMenuGroup.vue
@@ -26,11 +26,18 @@ const props = defineProps({
 		default:1
 	}
 });
+const isNotEdit = ref(false)
 const emits = defineEmits(["update:isShow","updateMenu"]);
 watch(()=>props.isShow,(val:boolean)=>{
 	if(val){
 		console.log("props.appCont",props.appCont)
 		console.log("props.menuParentKey",props.menuParentKey)
+		if(props.menuParentKey !=""){
+			menuGroupInfo.group = props.menuParentKey
+			isNotEdit.value = true
+		}else{
+			isNotEdit.value = false
+		}
 		getOldMenuTree()
 	}
 })
@@ -51,6 +58,7 @@ const handleClose = () => {
 	loading.value = false;
 	emits("updateMenu")
 	emits("update:isShow",false)
+	isNotEdit.value = false
 	resetForm()
 }
 /**
@@ -149,6 +157,7 @@ const saveMenuData = () => {
 					value-key="id"
 					check-on-click-node
 					clearable
+					:disabled="isNotEdit"
 				/>
 			</el-form-item>
 		</el-form>
diff --git a/src/views/sysworkflow/lowcodepage/appPage/appMenus.vue b/src/views/sysworkflow/lowcodepage/appPage/appMenus.vue
index 80dcdda5c..72304afb6 100644
--- a/src/views/sysworkflow/lowcodepage/appPage/appMenus.vue
+++ b/src/views/sysworkflow/lowcodepage/appPage/appMenus.vue
@@ -8,11 +8,21 @@ import type {
   AllowDropType,
   NodeDropType,
 } from 'element-plus/es/components/tree/src/tree.type'
+
+import { gainAllAppMenu,editAppMenuCont } from '@/api/DesignForm/requestapi'
+
 import SvgIcon from "@/components/SvgIcon/index.vue";
 import { threeShiyanData } from "@/api/date/type"
 import AppMenuSvgPage from "@/components/IconSelect/appMenuSvgPage.vue";
+import AppMenuGroup from "@/views/sysworkflow/lowcodepage/appPage/appMenuGroup.vue"
 
 const props = defineProps({
+	appCont:{
+		type:Object,
+		default(){
+			return {}
+		}
+	},
 	formKey:{
 		type:String,
 		default:""
@@ -25,21 +35,43 @@ const props = defineProps({
 	}
 });
 const svgIsShow = ref(false)
+const emits = defineEmits(["update:menusTree"]);
+/**
+@ 作者: 秦东
+@ 时间: 2024-04-24 13:17:30
+@ 功能: 菜单列表
+*/
+const appMenuTree =  computed({
+	get() {
+		return props.menusTree
+	},
+	set(val: any) {
+		emits('update:menusTree', val)
+	}
+});
+
+
 /**
 @ 作者: 秦东
 @ 时间: 2024-04-22 10:06:20
 @ 功能: 树移动完毕后执行的操作
 */
 const handleDrop = (
-  draggingNode: Node,
-  dropNode: Node,
-  dropType: NodeDropType,
-  ev: DragEvents
+	draggingNode: Node,
+	dropNode: Node,
+	dropType: NodeDropType,
+	ev: DragEvents
 ) => {
-	console.log('draggingNode:', draggingNode)
-  	console.log('dropNode:', dropNode)
-  	console.log('dropType:', dropType)
-	console.log('ev:', ev)
+	
+	let sendCont = {
+		id:props.appCont.uuid,
+		menuTree:appMenuTree.value
+	}
+	editAppMenuCont(sendCont)
+		.then((data)=>{
+			console.log('树移动完毕后执行的操作============>',data)
+		})
+	
 }
 
 const treeList = ref<any[]>([])
@@ -102,10 +134,36 @@ const diguiData = (val:any) =>{
 		}
 	}
 }
+/**
+@ 作者: 秦东
+@ 时间: 2024-04-24 13:12:18
+@ 功能: 新建子分组
+*/
+const menuGroupShow = ref(false)
+const menuParentKey = ref("")
+const addNewSunMenuGroup = (val:any) =>{
+	console.log('新建子分组:', val);
+	menuParentKey.value = val.id
+	menuGroupShow.value = true
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-04-24 13:22:47
+@ 功能: 更新
+*/
+const gainSunAppContent = () =>{
+	console.log('更新:');
+	gainAllAppMenu({id:props.appCont.uuid})
+		.then((data) =>{
+			console.log('更新:',data);
+			appMenuTree.value = data.data
+		})
+}
 </script>
 <template>
+	<AppMenuGroup v-model:is-show="menuGroupShow" :menu-parent-key="menuParentKey" :app-cont="props.appCont" @updateMenu="gainSunAppContent" />
 	<el-tree
-		:data="props.menusTree"
+		:data="appMenuTree"
 		draggable
 		default-expand-all
 		node-key="id"
@@ -124,7 +182,7 @@ const diguiData = (val:any) =>{
 					<el-dropdown-item>修改名称</el-dropdown-item>
 					<el-dropdown-item>复制</el-dropdown-item>
 					<el-dropdown-item>移动到</el-dropdown-item>
-					<el-dropdown-item divided>新建子分组</el-dropdown-item>
+					<el-dropdown-item divided @click="addNewSunMenuGroup(data)">新建子分组</el-dropdown-item>
 					<el-dropdown-item>新建普通表单</el-dropdown-item>
 					<el-dropdown-item>新建流程表单</el-dropdown-item>
 					<el-dropdown-item divided>隐藏PC端</el-dropdown-item>
diff --git a/src/views/sysworkflow/lowcodepage/appPage/index.vue b/src/views/sysworkflow/lowcodepage/appPage/index.vue
index a2b709b1f..480be3ba6 100644
--- a/src/views/sysworkflow/lowcodepage/appPage/index.vue
+++ b/src/views/sysworkflow/lowcodepage/appPage/index.vue
@@ -101,7 +101,7 @@ const addMenu = (key?:string) => {
 </script>
 <template>
 	<div  class="drawerClass">
-		<AppMenuGroup v-model:is-show="menuGroupShow" :menu-parent-key="menuParentKey" :app-cont="appCont" @updateMenu="gainAppContent" />
+		
 		<el-drawer  v-model="props.isShow" title="设置/编辑自定义表单" :with-header="false" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :size="props.drawerWith">
 			<div class="common-layout">
 				<el-container>
@@ -233,7 +233,7 @@ const addMenu = (key?:string) => {
 									</el-menu-item>
 								</el-menu> -->
 
-								<AppMenus :form-Key="formKey" :menus-tree="menusTree" />
+								<AppMenus :form-Key="formKey" v-model:menus-tree="menusTree" :app-cont="appCont" />
 
 
 
@@ -247,7 +247,7 @@ const addMenu = (key?:string) => {
 					</el-container>
 				</el-container>
 			</div>
-
+			<AppMenuGroup v-model:is-show="menuGroupShow" :menu-parent-key="menuParentKey" :app-cont="appCont" @updateMenu="gainAppContent" />
 		</el-drawer >
 	</div>
 </template>

From 2d257a3156c2c9c93cf3932bd60bd746e42bd047 Mon Sep 17 00:00:00 2001
From: herenshan112 <herenshan112@163.com>
Date: Tue, 7 May 2024 16:58:44 +0800
Subject: [PATCH 2/5] =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E5=BA=94?=
 =?UTF-8?q?=E7=94=A8=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/DesignForm/requestapi.ts              |  24 ++++
 src/components/IconSelect/appMenuSvgPage.vue  |   6 +
 src/types/components.d.ts                     |   8 ++
 .../lowcodepage/appPage/appMenus.vue          |  91 +++++++++++--
 .../appPage/appPageForm/pageFlow.vue          |  17 +++
 .../appPage/appPageForm/pageForm.vue          |  26 ++++
 .../appPage/appPageForm/pageList.vue          |  25 ++++
 .../lowcodepage/appPage/createAppFormPage.vue | 121 ++++++++++++++++++
 .../appPage/editAppMenuNamePage.vue           | 112 ++++++++++++++++
 .../sysworkflow/lowcodepage/appPage/index.vue |  26 +++-
 10 files changed, 440 insertions(+), 16 deletions(-)
 create mode 100644 src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageFlow.vue
 create mode 100644 src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageForm.vue
 create mode 100644 src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageList.vue
 create mode 100644 src/views/sysworkflow/lowcodepage/appPage/createAppFormPage.vue
 create mode 100644 src/views/sysworkflow/lowcodepage/appPage/editAppMenuNamePage.vue

diff --git a/src/api/DesignForm/requestapi.ts b/src/api/DesignForm/requestapi.ts
index fa7a2eba4..415aca5cd 100644
--- a/src/api/DesignForm/requestapi.ts
+++ b/src/api/DesignForm/requestapi.ts
@@ -391,3 +391,27 @@ export function editAppMenuCont(data: any) {
 		data: data
 	});
 }
+//修改菜单名称
+export function editAppMenuLable(data: any) {
+	return request({
+		url: '/systemapi/app/editAppMenuLable',
+		method: 'post',
+		data: data
+	});
+}
+//显示和隐藏菜单
+export function appMenuShowOrHide(data: any) {
+	return request({
+		url: '/systemapi/app/appMenuShowOrHide',
+		method: 'post',
+		data: data
+	});
+}
+//编辑菜单状态
+export function delAppMenu(data: any) {
+	return request({
+		url: '/systemapi/app/delAppMenu',
+		method: 'post',
+		data: data
+	});
+}
diff --git a/src/components/IconSelect/appMenuSvgPage.vue b/src/components/IconSelect/appMenuSvgPage.vue
index 294852549..2ec6de95b 100644
--- a/src/components/IconSelect/appMenuSvgPage.vue
+++ b/src/components/IconSelect/appMenuSvgPage.vue
@@ -17,6 +17,11 @@ const props = defineProps({
 		require: false,
 		default:""
 	},
+	svgId:{
+		type:String,
+		require: false,
+		default:""
+	},
 	iconList:{
 		type:Object,
 		default(){
@@ -54,6 +59,7 @@ const handleClose = () => {
 @ 功能: 确定
 */
 const handleSelect = (svgName:string) => {
+	console.log("确定",props.svgId)
 	emits("update:svgName",svgName)
 	handleClose()
 }
diff --git a/src/types/components.d.ts b/src/types/components.d.ts
index 070842f01..494e33af9 100644
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -32,6 +32,7 @@ declare module '@vue/runtime-core' {
     ElCard: typeof import('element-plus/es')['ElCard']
     ElCarousel: typeof import('element-plus/es')['ElCarousel']
     ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
+    ElCascader: typeof import('element-plus/es')['ElCascader']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElCol: typeof import('element-plus/es')['ElCol']
@@ -63,6 +64,7 @@ declare module '@vue/runtime-core' {
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
     ElPopover: typeof import('element-plus/es')['ElPopover']
+    ElProgress: typeof import('element-plus/es')['ElProgress']
     ElRadio: typeof import('element-plus/es')['ElRadio']
     ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
@@ -111,7 +113,13 @@ declare module '@vue/runtime-core' {
     IconSelect: typeof import('./../components/IconSelect/index.vue')['default']
     IEpCaretBottom: typeof import('~icons/ep/caret-bottom')['default']
     IEpClose: typeof import('~icons/ep/close')['default']
+    IEpDelete: typeof import('~icons/ep/delete')['default']
+    IEpEdit: typeof import('~icons/ep/edit')['default']
+    IEpPlus: typeof import('~icons/ep/plus')['default']
+    IEpRefresh: typeof import('~icons/ep/refresh')['default']
+    IEpSearch: typeof import('~icons/ep/search')['default']
     IEpSetting: typeof import('~icons/ep/setting')['default']
+    IEpView: typeof import('~icons/ep/view')['default']
     LangSelect: typeof import('./../components/LangSelect/index.vue')['default']
     LayoutPage: typeof import('./../components/DesignForm/layoutPage/index.vue')['default']
     List: typeof import('./../components/DesignForm/public/form/components/list.vue')['default']
diff --git a/src/views/sysworkflow/lowcodepage/appPage/appMenus.vue b/src/views/sysworkflow/lowcodepage/appPage/appMenus.vue
index 72304afb6..31e100d7b 100644
--- a/src/views/sysworkflow/lowcodepage/appPage/appMenus.vue
+++ b/src/views/sysworkflow/lowcodepage/appPage/appMenus.vue
@@ -8,13 +8,15 @@ import type {
   AllowDropType,
   NodeDropType,
 } from 'element-plus/es/components/tree/src/tree.type'
-
-import { gainAllAppMenu,editAppMenuCont } from '@/api/DesignForm/requestapi'
+import { appMenuTreeInfo,appSetInfo } from "@/api/date/type"
+import { gainAllAppMenu,editAppMenuCont,appMenuShowOrHide,delAppMenu } from '@/api/DesignForm/requestapi'
 
 import SvgIcon from "@/components/SvgIcon/index.vue";
 import { threeShiyanData } from "@/api/date/type"
 import AppMenuSvgPage from "@/components/IconSelect/appMenuSvgPage.vue";
 import AppMenuGroup from "@/views/sysworkflow/lowcodepage/appPage/appMenuGroup.vue"
+import EditAppMenuNamePage from "@/views/sysworkflow/lowcodepage/appPage/editAppMenuNamePage.vue"
+import CreateAppFormPage from "@/views/sysworkflow/lowcodepage/appPage/createAppFormPage.vue"
 
 const props = defineProps({
 	appCont:{
@@ -32,10 +34,15 @@ const props = defineProps({
 		default(){
 			return {}
 		}
-	}
+	},
+	drawerWith:{
+		type:Number,
+		default:0
+	},
 });
 const svgIsShow = ref(false)
 const emits = defineEmits(["update:menusTree"]);
+const appOenMenu = ref<appMenuTreeInfo>({})
 /**
 @ 作者: 秦东
 @ 时间: 2024-04-24 13:17:30
@@ -159,9 +166,64 @@ const gainSunAppContent = () =>{
 			appMenuTree.value = data.data
 		})
 }
+/**
+@ 作者: 秦东
+@ 时间: 2024-04-25 13:23:46
+@ 功能: 修改名称
+*/
+const editAppMenuNameShow = ref(false)
+const editMenuName = (val:appMenuTreeInfo) =>{
+	console.log('修改名称:',val);
+	appOenMenu.value = val
+	editAppMenuNameShow.value = true
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-05-07 09:00:47
+@ 功能: 显示和隐藏菜单
+*/
+const showOrHide = (val:appMenuTreeInfo,types:number) =>{
+	console.log('显示和隐藏菜单:',val,types);
+	let sendInfo = {
+		types:types,
+		menuInfo:val
+	}
+
+	appMenuShowOrHide(sendInfo)
+		.then((data) =>{
+			console.log('显示和隐藏菜单:',data);
+			gainSunAppContent()
+		});
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-05-07 10:03:30
+@ 功能: 删除app自定义菜单
+*/
+const editAppMenu = (val:appMenuTreeInfo) =>{
+	console.log('editAppMenu:',val);
+	let sendInfo = {
+		id:val.id.toString(),
+		status:3
+	}
+	delAppMenu(sendInfo)
+		.then((data) =>{
+			console.log('删除app自定义菜单:',data);
+			gainSunAppContent()
+		});
+}
+const saveAppFormIsShow = ref(false)
+/**
+@ 作者: 秦东
+@ 时间: 2024-05-07 11:21:39
+@ 功能: 新增表单页面
+*/
+const createNewPage = () => {
+	saveAppFormIsShow.value = true;
+}
 </script>
 <template>
-	<AppMenuGroup v-model:is-show="menuGroupShow" :menu-parent-key="menuParentKey" :app-cont="props.appCont" @updateMenu="gainSunAppContent" />
+	<CreateAppFormPage v-if="saveAppFormIsShow" v-model:is-show="saveAppFormIsShow" :drawer-with="props.drawerWith" :app-cont="props.appCont"  />
 	<el-tree
 		:data="appMenuTree"
 		draggable
@@ -179,22 +241,25 @@ const gainSunAppContent = () =>{
 			<el-dropdown>
 				<svg-icon class="svgBox"  prefix="icon" icon-class="set" />
 				<template #dropdown>
-					<el-dropdown-item>修改名称</el-dropdown-item>
-					<el-dropdown-item>复制</el-dropdown-item>
-					<el-dropdown-item>移动到</el-dropdown-item>
+					<el-dropdown-item @click="editMenuName(data)">修改名称</el-dropdown-item>
+					<!-- <el-dropdown-item @click="">复制</el-dropdown-item> -->
+					<!-- <el-dropdown-item @click="moveMenus(data)">移动到</el-dropdown-item> -->
 					<el-dropdown-item divided @click="addNewSunMenuGroup(data)">新建子分组</el-dropdown-item>
-					<el-dropdown-item>新建普通表单</el-dropdown-item>
-					<el-dropdown-item>新建流程表单</el-dropdown-item>
-					<el-dropdown-item divided>隐藏PC端</el-dropdown-item>
-					<el-dropdown-item>隐藏移动端</el-dropdown-item>
-					<el-dropdown-item divided><el-text class="mx-1" type="danger">删除</el-text></el-dropdown-item>
+					<!-- <el-dropdown-item @click="">新建普通表单</el-dropdown-item>
+					<el-dropdown-item @click="">新建流程表单</el-dropdown-item> -->
+					<el-dropdown-item v-if="data.type==1" @click="createNewPage(data.id)">新建页面</el-dropdown-item>
+					<el-dropdown-item @click="showOrHide(data,1)" divided><el-text v-if="data.pcIsShow==1">隐藏PC端</el-text><el-text v-else>取消-隐藏PC端</el-text></el-dropdown-item>
+					<el-dropdown-item @click="showOrHide(data,2)"><el-text v-if="data.wapIsShow==1">隐藏移动端</el-text><el-text v-else>取消-隐藏移动端</el-text></el-dropdown-item>
+					<el-dropdown-item @click="editAppMenu(data)" divided><el-text class="mx-1" type="danger">删除</el-text></el-dropdown-item>
 				</template>
 			</el-dropdown>
 		</div>
 			
 		</template>
 	</el-tree>
-	<AppMenuSvgPage v-model:is-show="svgIsShow" v-model:svg-name="svgName" :icon-list="allIconNames" />
+	<AppMenuSvgPage v-model:is-show="svgIsShow" v-model:svg-name="svgName" :svg-id="svgId" :icon-list="allIconNames" />
+	<AppMenuGroup v-model:is-show="menuGroupShow" :menu-parent-key="menuParentKey" :app-cont="props.appCont" @updateMenu="gainSunAppContent" />
+	<EditAppMenuNamePage v-model:is-show="editAppMenuNameShow" :menu-cont="appOenMenu" @updateMenu="gainSunAppContent" />
 </template>
 <style  lang='scss' scoped>
 .appMenuTitle{
diff --git a/src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageFlow.vue b/src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageFlow.vue
new file mode 100644
index 000000000..fcd177aaf
--- /dev/null
+++ b/src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageFlow.vue
@@ -0,0 +1,17 @@
+<!--
+@ 作者: 秦东
+@ 时间: 2024-05-07 15:07:51
+@ 备注: 表单流程
+-->
+<script lang='ts' setup>
+
+</script>
+<template>
+	<el-main class="mainBox">Main</el-main>
+</template>
+<style  lang='scss' scoped>
+.mainBox{
+	padding: 0;
+	overflow-y : auto;
+}
+</style>
diff --git a/src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageForm.vue b/src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageForm.vue
new file mode 100644
index 000000000..ea0db54db
--- /dev/null
+++ b/src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageForm.vue
@@ -0,0 +1,26 @@
+<!--
+@ 作者: 秦东
+@ 时间: 2024-05-07 15:05:29
+@ 备注: 自定义表单
+-->
+<script lang='ts' setup>
+
+</script>
+<template>
+	<el-aside class="asideBox">Aside</el-aside>
+	<el-main class="mainBox">Main</el-main>
+	<el-aside class="asideBox">Aside</el-aside>
+</template>
+<style  lang='scss' scoped>
+.asideBox{
+	height: calc(100vh - 40px);
+	width: 300px;
+	overflow-y : auto;
+}
+.mainBox{
+	border-left: 1px solid #ECECEC;
+	border-right: 1px solid #ECECEC;
+	padding: 0;
+	overflow-y : auto;
+}
+</style>
diff --git a/src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageList.vue b/src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageList.vue
new file mode 100644
index 000000000..474174aee
--- /dev/null
+++ b/src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageList.vue
@@ -0,0 +1,25 @@
+<!--
+@ 作者: 秦东
+@ 时间: 2024-05-07 15:09:21
+@ 备注: 表单列表
+-->
+<script lang='ts' setup>
+
+</script>
+<template>
+	<el-main class="mainBox">Main</el-main>
+	<el-aside class="asideBox">Aside</el-aside>
+</template>
+<style  lang='scss' scoped>
+.asideBox{
+	height: calc(100vh - 40px);
+	width: 300px;
+	overflow-y : auto;
+}
+.mainBox{
+	border-left: 1px solid #ECECEC;
+	border-right: 1px solid #ECECEC;
+	padding: 0;
+	overflow-y : auto;
+}
+</style>
diff --git a/src/views/sysworkflow/lowcodepage/appPage/createAppFormPage.vue b/src/views/sysworkflow/lowcodepage/appPage/createAppFormPage.vue
new file mode 100644
index 000000000..861e0118b
--- /dev/null
+++ b/src/views/sysworkflow/lowcodepage/appPage/createAppFormPage.vue
@@ -0,0 +1,121 @@
+<!--
+@ 作者: 秦东
+@ 时间: 2024-05-07 11:26:40
+@ 备注: 编辑表单
+-->
+<script lang='ts' setup>
+import PageForm from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/pageForm.vue"
+import PageFlow from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/pageFlow.vue"
+import PageList from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/pageList.vue"
+const props = defineProps({
+	appCont:{
+		type:Object,
+		default(){
+			return {}
+		}
+	},
+	isShow:{
+		type: Boolean,
+		default: false,
+	},
+	drawerWith:{
+		type:Number,
+		default:0
+	},
+});
+const emits = defineEmits(["update:isShow"]);
+const tabsActive = ref(1)
+
+/**
+@ 作者: 秦东
+@ 时间: 2024-05-07 15:11:24
+@ 功能: 关闭页面
+*/
+const closeSavePageForm = () =>{
+	emits("update:isShow",false)
+}
+</script>
+<template>
+	<el-drawer  v-model="props.isShow" title="设置/编辑自定义表单" :with-header="false" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :size="props.drawerWith">
+		<div class="common-layout">
+			<el-container>
+				<el-header class="headerBox">
+					<div class="headLeft">
+						<el-space wrap>
+							<el-avatar shape="square" :size="25" :src="props.appCont.appSvg" />
+							<el-tooltip
+								class="box-item"
+								effect="dark"
+								:content="props.appCont.appName"
+								placement="bottom"
+							>
+								<el-text class="w-150px mb-2" truncated>{{ props.appCont.appName }}</el-text>
+							</el-tooltip>
+							<i class="fa fa-angle-right"></i>
+							<el-tooltip
+								class="box-item"
+								effect="dark"
+								:content="props.appCont.appName"
+								placement="bottom"
+							>
+								<el-text class="w-150px mb-2" truncated>未命名表单</el-text>
+							</el-tooltip>
+						</el-space>
+					</div>
+					<div>
+						<el-tabs v-model="tabsActive" @tab-click="handleClick" :stretch="true" class="tabsMain">
+								<el-tab-pane label="① 页面管理" :name="1">
+								</el-tab-pane>
+								<el-tab-pane label="② 流程设计" :name="2">
+								</el-tab-pane>
+								<el-tab-pane label="③ 列表设计" :name="3">
+								</el-tab-pane>
+						</el-tabs>
+					</div>
+					<div class="headRight">
+						<el-button type="danger" size="small" @click="closeSavePageForm" >关闭</el-button>
+					</div>
+				</el-header>
+				<el-container>
+					<PageForm v-if="tabsActive==1" />
+					<PageFlow v-if="tabsActive==2" />
+					<PageList v-if="tabsActive==3" />
+				</el-container>
+			</el-container>
+		</div>
+	</el-drawer>
+</template>
+<style  lang='scss' scoped>
+.headerBox{
+	padding: 0px;
+	border-bottom: 2px solid #ECECEC;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	.headLeft{
+		width: 300px;
+		padding-left: 5px;
+		span{
+			max-width:100px;
+		}
+	}
+	.headRight{
+		width: 300px;
+		text-align: right;
+		padding-right: 5px;
+	}
+	.tabsMain{
+		::v-deep .el-tabs__header{
+			margin: 0px;
+		}
+		::v-deep .el-tabs__nav-scroll{
+			margin: 0 auto!important;
+		}
+
+		::v-deep .el-drawer__body{
+			padding: 0;
+		}
+	}
+}
+
+</style>
diff --git a/src/views/sysworkflow/lowcodepage/appPage/editAppMenuNamePage.vue b/src/views/sysworkflow/lowcodepage/appPage/editAppMenuNamePage.vue
new file mode 100644
index 000000000..12c2078e3
--- /dev/null
+++ b/src/views/sysworkflow/lowcodepage/appPage/editAppMenuNamePage.vue
@@ -0,0 +1,112 @@
+<!--
+@ 作者: 秦东
+@ 时间: 2024-04-25 13:30:19
+@ 备注: 修改自定义应用菜单
+-->
+<script lang='ts' setup>
+import { appMenuTreeInfo } from "@/api/date/type" 
+import { editAppMenuLable } from '@/api/DesignForm/requestapi'
+const props = defineProps({
+	isShow:{
+		type: Boolean,
+		default: false,
+	},
+	menuCont:{
+		type:Object,
+		default(){
+			return {}
+		}
+	},
+});
+const saveMenuName = ref(ElForm);
+const loading = ref(false)
+const emits = defineEmits(["update:isShow","updateMenu"]);
+const appMenuInfo = ref<appMenuTreeInfo>({})
+//监听页面是否打开
+watch(()=>props.isShow,(val:boolean)=>{
+	if(val){
+		appMenuInfo.value = props.menuCont
+	}
+})
+/**
+@ 作者: 秦东
+@ 时间: 2024-04-25 13:39:46
+@ 功能: 关闭页面
+*/
+const handleClose = () => {
+	loading.value = false;
+	emits("updateMenu")
+	emits("update:isShow",false)
+	resetForm()
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-04-24 09:33:56
+@ 功能: 重置表单
+*/
+const resetForm = () => {
+	saveMenuName.value.resetFields();
+	saveMenuName.value.clearValidate();
+	appMenuInfo.label = "";
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-04-24 09:29:59
+@ 功能: 表单验证规则
+*/
+const rules = reactive({
+	label: [{ required: true, message: "请输入名称", trigger: "blur" }],
+});
+/**
+@ 作者: 秦东
+@ 时间: 2024-04-25 13:44:42
+@ 功能: 提交数据
+*/
+const saveMenuData = () => {
+	loading.value = true;
+	saveMenuName.value.validate((valid: any) => {
+		if (valid) {
+			editAppMenuLable({id:appMenuInfo.value.id, label:appMenuInfo.value.label})
+				.then((data) =>{
+					console.log("提交数据", data)
+					ElMessage({
+						message: data.msg,
+						type: 'success',
+					});
+					handleClose();
+				})
+		}else{
+			loading.value = false;
+		}
+	})
+}
+</script>
+<template>
+	<el-dialog
+		v-model="props.isShow"
+		title="编辑名称"
+		width="500"
+		:before-close="handleClose"
+	>
+		<el-form
+			ref="saveMenuName"
+			:model="appMenuInfo"
+			:rules="rules"
+			label-width="120px"
+		>
+			<el-form-item label="名称" prop="label">
+				<el-input v-model="appMenuInfo.label" clearable placeholder="请输入名称" />
+			</el-form-item>
+			
+		</el-form>
+		<template #footer>
+			<div class="dialog-footer">
+				<el-button @click="handleClose">取消</el-button>
+				<el-button type="primary" v-loading="loading" :disabled="loading" @click="saveMenuData">确定</el-button>
+			</div>
+		</template>
+	</el-dialog>
+</template>
+<style  lang='scss' scoped>
+
+</style>
diff --git a/src/views/sysworkflow/lowcodepage/appPage/index.vue b/src/views/sysworkflow/lowcodepage/appPage/index.vue
index 480be3ba6..0616c47b4 100644
--- a/src/views/sysworkflow/lowcodepage/appPage/index.vue
+++ b/src/views/sysworkflow/lowcodepage/appPage/index.vue
@@ -29,7 +29,7 @@ const props = defineProps({
 const emits = defineEmits(["update:isShow","update:svgName","refreshPage"]);
 const squareUrl = 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png'
 const drawerOpenOrClose = ref(false)
-const tabsActive = ref("1")
+const tabsActive = ref(1)
 const menusTree = ref<appMenuTreeInfo[]>([])
 const appCont = reactive<appSetInfo>({
 	appKey:"1",	
@@ -97,7 +97,14 @@ const addMenu = (key?:string) => {
 	}
 	menuGroupShow.value = true;
 }
+/**
+@ 作者: 秦东
+@ 时间: 2024-05-06 11:09:44
+@ 功能: 创建页面
+*/
+const addAppPageForm = (key?:string) => {
 
+}
 </script>
 <template>
 	<div  class="drawerClass">
@@ -145,7 +152,7 @@ const addMenu = (key?:string) => {
 											<el-button type="primary" class="fa fa-plus" />
 											<template #dropdown>
 												<el-dropdown-menu>
-													<el-dropdown-item  >
+													<!-- <el-dropdown-item  >
 														<el-row>
 															<el-col :span="24">
 																<el-space wrap>
@@ -170,6 +177,19 @@ const addMenu = (key?:string) => {
 																任务协同、业务审批
 															</el-col>
 														</el-row>
+													</el-dropdown-item> -->
+													<el-dropdown-item  @click="addAppPageForm">
+														<el-row>
+															<el-col :span="24">
+																<el-space wrap>
+																	<svg-icon style="color: #eebe77;" prefix="icon" icon-class="liuChengBiaoDan" />
+																	新建页面
+																</el-space>
+															</el-col>
+															<el-col :span="24" style="padding-left:20px; font-size:12px;">
+																数据收集、事件记录<br>任务协同、业务审批
+															</el-col>
+														</el-row>
 													</el-dropdown-item>
 													<el-dropdown-item divided @click="addMenu">
 														<el-row>
@@ -233,7 +253,7 @@ const addMenu = (key?:string) => {
 									</el-menu-item>
 								</el-menu> -->
 
-								<AppMenus :form-Key="formKey" v-model:menus-tree="menusTree" :app-cont="appCont" />
+								<AppMenus :form-Key="formKey" v-model:menus-tree="menusTree" :app-cont="appCont" :drawer-with="props.drawerWith" />
 
 
 

From 2c3e4b719fd9051d9a9315e910d73001f0483824 Mon Sep 17 00:00:00 2001
From: herenshan112 <herenshan112@163.com>
Date: Thu, 9 May 2024 14:48:18 +0800
Subject: [PATCH 3/5] =?UTF-8?q?=E6=9B=B4=E6=94=B9=E7=89=88=E6=9C=AC?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DesignForm/dragControl.vue     |   5 +-
 src/components/DesignForm/dragControlNew.vue  | 141 ++++++++++++++++++
 src/components/DesignForm/formVersion.vue     | 139 +++++++++++++++++
 src/types/components.d.ts                     |   2 +
 .../sysworkflow/lowcodepage/appFormList.vue   |   2 +-
 .../lowcodepage/appPage/appMenus.vue          |  10 +-
 .../appPage/appPageForm/pageForm.vue          | 121 ++++++++++++++-
 .../lowcodepage/appPage/createAppFormPage.vue |  78 +++++++++-
 .../sysworkflow/lowcodepage/appPage/index.vue |   6 +-
 src/views/sysworkflow/lowcodepage/index.vue   |   3 +-
 .../sysworkflow/lowcodepage/pageDesignes.vue  |  19 ++-
 11 files changed, 509 insertions(+), 17 deletions(-)
 create mode 100644 src/components/DesignForm/dragControlNew.vue
 create mode 100644 src/components/DesignForm/formVersion.vue

diff --git a/src/components/DesignForm/dragControl.vue b/src/components/DesignForm/dragControl.vue
index 8f610b1c7..92e965505 100644
--- a/src/components/DesignForm/dragControl.vue
+++ b/src/components/DesignForm/dragControl.vue
@@ -41,7 +41,7 @@ const searchField = [
     'component',
     'button'
 ]
-const designType = inject('formDesignType') as string
+const designType = inject('formDesignType') as string	//注入一个由祖先组件或整个应用 (通过 app.provide()) 提供的值。
 const formDataList = ref<any[]>([])
 const isSearch = computed(() => {
     return designType === 'search'
@@ -82,6 +82,7 @@ const useTemplateClick = () => {
     useTemplateEl.value.open()
 }
 const useTemplateSelect = (data: FormData) => {
+	console.log("使用模版",data);
     emits('click', data)
 }
 const clone = (origin: any) => {
@@ -197,7 +198,9 @@ const setupStatus = (val:any) =>{
 			ref="useTemplateEl"
 			@click="useTemplateSelect"
 		/>
+
 		<div>版本</div>
+		{{props.formId}}
 		<el-tabs  v-model="activeName" :stretch="true" class="demo-tabs"  @tab-change="handleTabsClick" >
 			<el-tab-pane v-for="(item,index) in props.versioncont" :key="index" :label="'V'+item.version" :name="item.id" class="tab_pane_body">
 				<el-button v-if="item.status!=1" type="primary" round @click="setupStatus(item)">启用</el-button>
diff --git a/src/components/DesignForm/dragControlNew.vue b/src/components/DesignForm/dragControlNew.vue
new file mode 100644
index 000000000..2b899b6ee
--- /dev/null
+++ b/src/components/DesignForm/dragControlNew.vue
@@ -0,0 +1,141 @@
+<!--
+@ 作者: 秦东
+@ 时间: 2024-05-09 10:47:19
+@ 备注: 自定义表单组件
+-->
+<script lang='ts' setup>
+import controlListData from '@/components/DesignForm/assembly'
+import Draggable from 'vuedraggable-es'
+import '@/assets/iconfont/iconfont.css'
+
+//引入页面
+import FormVersion from '@/components/DesignForm/formVersion.vue';
+
+
+const props = withDefaults(
+    defineProps<{
+      tableKey?: number | string,
+	  signCode?: number | string,
+    }>(),
+    {}
+)
+const designType = inject('formDesignType') as string	//注入一个由祖先组件或整个应用 (通过 app.provide()) 提供的值。
+// 默认搜索允许显示的字段
+const searchField = [
+    'input',
+    'radio',
+    'checkbox',
+    'select',
+    'datePicker',
+    'timePicker',
+    'inputNumber',
+    'cascader',
+    'component',
+    'button'
+]
+/**
+@ 作者: 秦东
+@ 时间: 2024-05-09 10:58:56
+@ 功能: 表单组件数据
+*/
+const controlList = computed(() => {
+    if (designType === 'search') {
+		// 只返回基础字段
+		const temp: any = []
+		controlListData.forEach((item: any) => {
+			if (item.children) {
+				const filter = item.children.filter((ch: any) => {
+					return searchField.includes(ch.type)
+				})
+				if (filter && filter.length) {
+					temp.push({ title: item.title, children: filter })
+				}
+			}
+		})
+      	return temp
+    } else {
+      	return controlListData
+    }
+})
+const tableVersion = ref()	//版本显示器
+
+const emits = defineEmits<{
+	(e: 'versionUpdateForm', value: string): void
+}>()
+/**
+@ 作者: 秦东
+@ 时间: 2024-05-09 11:36:59
+@ 功能: 启用和禁用版本
+*/
+const enableOrDisable = (val?:any) =>{
+	console.log("启用和禁用版本",val)
+	emits('versionUpdateForm', val)
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-05-09 11:40:15
+@ 功能: 打开版本选择页面
+*/
+const useVersionClick = () => {
+	tableVersion.value.open()
+}
+const activities = [
+  {
+    content: 'Event start',
+    timestamp: '2018-04-15',
+  },
+  {
+    content: 'Approved',
+    timestamp: '2018-04-13',
+  },
+  {
+    content: 'Success',
+    timestamp: '2018-04-11',
+  },
+]
+</script>
+<template>
+	<div class="components-list">
+		<div v-for="(list, index) in controlList" :key="index">
+			<div class="title">
+				{{ list.title }}
+				<div
+					class="template"
+					@click="useVersionClick"
+				>
+				版本
+				</div>
+			</div>
+			<draggable
+				v-model="list.children"
+				tag="ul"
+				:group="{ name: 'form', pull: 'clone', put: false }"
+				ghost-class="ghost"
+				:sort="false"
+				:clone="clone"
+				item-key="key123"
+			>
+			
+				<template #item="{ element }">
+					<li class="fontIcon" :class="[element.type]">
+						<i v-if="element.iconFont==''" :class="`icon-${element.icon}`"></i>
+						<i  v-if="element.iconFont!=''" :class="`fa ${element.iconFont} `"></i>
+						<span :title="element.label">{{ element.label }}</span>
+					</li>
+				</template>
+			</draggable>
+		</div>
+	</div>
+	<FormVersion ref="tableVersion" :table-key="props.tableKey" :sign-code="props.signCode" @enableOrDisable="enableOrDisable" />
+</template>
+<style  lang='scss' scoped>
+.tab_pane_body{
+	text-align: center;
+	
+}
+.fontIcon{
+	i{
+		padding: 4px 0px 0 0px;
+	}
+}
+</style>
diff --git a/src/components/DesignForm/formVersion.vue b/src/components/DesignForm/formVersion.vue
new file mode 100644
index 000000000..40f6e57a3
--- /dev/null
+++ b/src/components/DesignForm/formVersion.vue
@@ -0,0 +1,139 @@
+<!--
+@ 作者: 秦东
+@ 时间: 2024-05-08 14:52:03
+@ 备注: 版本管理
+-->
+<script lang='ts' setup>
+import { customerFormVersionCont } from '@/api/DesignForm/type'
+import { haveCustomerFormVersion,enableVersion } from '@/api/DesignForm/requestapi'
+const props = withDefaults(
+    defineProps<{
+      tableKey?: number | string,
+	  signCode?: number | string,
+    }>(),
+    {}
+)
+
+const emits = defineEmits<{
+    (e: 'click', value: string): void
+	(e: 'enableOrDisable', value: string): void
+}>()
+const isOpen = ref(false)
+const versionList = ref<customerFormVersionCont[]>([])			//版本内容列表
+const loading = ref(false)
+/**
+@ 作者: 秦东
+@ 时间: 2024-05-09 14:21:25
+@ 功能: 编辑状态
+*/
+const setupStatus = (val:any) =>{
+	enableVersion({id:val.id.toString()})
+		.then(() =>{
+			
+			init()
+			emits('enableOrDisable', val.id.toString())
+		});
+}
+
+/**
+@ 作者: 秦东
+@ 时间: 2024-05-08 14:55:50
+@ 功能: 打开页面
+*/
+const open = () => {
+	console.log("open",isOpen)
+    isOpen.value = true
+    init()
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-05-08 14:56:13
+@ 功能: 初始化数据
+*/
+const init = () => {
+	loading.value= true
+	haveCustomerFormVersion({id:props.tableKey})
+		.then(({data})=>{
+			console.log("加载异常-------------->",data)
+			versionList.value = data
+			// if(data.length > 0){
+			// 	data.forEach((item:any) => {
+			// 		if(item.status == 1){
+			// 			versionId.value = item.id.toString()
+			// 			emits('update:formVersion', item.id.toString())
+			// 		}
+			// 	});
+			// }
+		})
+		.finally(()=>{loading.value= false})
+}
+
+defineExpose({
+    open
+})
+/**
+@ 作者: 秦东
+@ 时间: 2024-05-09 14:03:54
+@ 功能: 设置颜色
+*/
+const setColor = (val:number) => {
+	if(val == 1){
+		return "#67C23A"
+	}else{
+		return "#F56C6C"
+	}
+}
+</script>
+<template>
+	<div
+		v-if="isOpen"
+		class="use-template active"	
+		v-loading="loading"	
+	>
+
+		<span class="close icon-close" @click="isOpen = false"></span>
+		<div v-if="versionList.length === 0" class="no-date">暂无版本</div>
+		<div v-else class="list">
+			<el-scrollbar class="timeLineBox">
+				<el-timeline style="max-width: 600px">
+					<el-timeline-item   v-for="item in versionList" :key="item.id"  placement="top" :color="setColor(item.status)">
+						<el-card v-if="item.status==1" >
+							<el-row>
+								<el-col>版本：V{{ item.version }}</el-col>
+								<el-col>创建人：{{ item.createrName }}</el-col>
+								<el-col>创建时间：{{ item.dayTime }}</el-col>
+								<el-col style="text-align:right"><el-button text type="success" size="small" disabled>使用中</el-button></el-col>
+							</el-row>
+						</el-card>
+						<el-card v-else >
+							<el-row>
+								<el-col>版本：V{{ item.version }}</el-col>
+								<el-col>创建人：{{ item.createrName }}</el-col>
+								<el-col>创建时间：{{ item.dayTime }}</el-col>
+								<el-col style="text-align:right"><el-button  type="primary" size="small" @click="setupStatus(item)">启用</el-button></el-col>
+							</el-row>
+						</el-card>
+					</el-timeline-item>
+					
+				
+				</el-timeline>
+			</el-scrollbar>
+		</div>
+	</div>
+</template>
+<style  lang='scss' scoped>
+.use-template{
+	width:250px;
+	top: 40px;
+	.list{
+		padding: 30px 5px;
+	}
+}
+.timeLineBox{
+	height: calc(100vh - 80px);
+	::v-deep .el-card__body{
+		padding:5px;
+		// color: #FFF;
+	}
+}
+</style>
diff --git a/src/types/components.d.ts b/src/types/components.d.ts
index 494e33af9..58d574dfb 100644
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -22,6 +22,7 @@ declare module '@vue/runtime-core' {
     DesignLayoutPage: typeof import('./../components/DesignForm/designLayout/designLayoutPage.vue')['default']
     DiyIconfont: typeof import('./../components/DesignForm/public/expand/diy-iconfont.vue')['default']
     DragControl: typeof import('./../components/DesignForm/dragControl.vue')['default']
+    DragControlNew: typeof import('./../components/DesignForm/dragControlNew.vue')['default']
     ElAffix: typeof import('element-plus/es')['ElAffix']
     ElAside: typeof import('element-plus/es')['ElAside']
     ElAvatar: typeof import('element-plus/es')['ElAvatar']
@@ -105,6 +106,7 @@ declare module '@vue/runtime-core' {
     FormGroup1: typeof import('./../components/DesignForm/public/form/formGroup1.vue')['default']
     FormItem: typeof import('./../components/DesignForm/public/form/formItem.vue')['default']
     FormPageCont: typeof import('./../components/DesignForm/tableListPage/formPageCont.vue')['default']
+    FormVersion: typeof import('./../components/DesignForm/formVersion.vue')['default']
     FormWord: typeof import('./../components/workflow/dialog/formWord.vue')['default']
     GithubCorner: typeof import('./../components/GithubCorner/index.vue')['default']
     Hamburger: typeof import('./../components/Hamburger/index.vue')['default']
diff --git a/src/views/sysworkflow/lowcodepage/appFormList.vue b/src/views/sysworkflow/lowcodepage/appFormList.vue
index 2a64a9b83..4d63f1f3f 100644
--- a/src/views/sysworkflow/lowcodepage/appFormList.vue
+++ b/src/views/sysworkflow/lowcodepage/appFormList.vue
@@ -294,7 +294,7 @@ const fanyePage = (val: number) =>{
 
 		<LowCodeFormPage v-if="addFormIsShow" :drawer-with="props.drawerWith" v-model:form-key="formId" @refreshPage="refreshPage" />
 
-		<DesignAPPpage  v-model:is-show="appPageShow" v-model:form-key="appKey" :drawer-with="props.drawerWith"  @refreshPage="getFormAppList" />
+		<DesignAPPpage  v-model:is-show="appPageShow" v-model:form-key="appKey"  :group-key="props.groupId" :drawer-with="props.drawerWith"  @refreshPage="getFormAppList" />
 
 		<el-drawer
 			v-model="lookPageIsShow"
diff --git a/src/views/sysworkflow/lowcodepage/appPage/appMenus.vue b/src/views/sysworkflow/lowcodepage/appPage/appMenus.vue
index 31e100d7b..b49320eb6 100644
--- a/src/views/sysworkflow/lowcodepage/appPage/appMenus.vue
+++ b/src/views/sysworkflow/lowcodepage/appPage/appMenus.vue
@@ -39,6 +39,10 @@ const props = defineProps({
 		type:Number,
 		default:0
 	},
+	groupKey:{
+		type:String,
+		default:""
+	}
 });
 const svgIsShow = ref(false)
 const emits = defineEmits(["update:menusTree"]);
@@ -218,12 +222,14 @@ const saveAppFormIsShow = ref(false)
 @ 时间: 2024-05-07 11:21:39
 @ 功能: 新增表单页面
 */
-const createNewPage = () => {
+const creetMenuId = ref("")
+const createNewPage = (val?:string) => {
+	creetMenuId.value = val.toString();
 	saveAppFormIsShow.value = true;
 }
 </script>
 <template>
-	<CreateAppFormPage v-if="saveAppFormIsShow" v-model:is-show="saveAppFormIsShow" :drawer-with="props.drawerWith" :app-cont="props.appCont"  />
+	<CreateAppFormPage v-if="saveAppFormIsShow" v-model:is-show="saveAppFormIsShow" :drawer-with="props.drawerWith"  :form-Key="props.formKey" :app-cont="props.appCont"  :group-key="props.groupKey" :menu-id="creetMenuId"   />
 	<el-tree
 		:data="appMenuTree"
 		draggable
diff --git a/src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageForm.vue b/src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageForm.vue
index ea0db54db..61af4c2fc 100644
--- a/src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageForm.vue
+++ b/src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageForm.vue
@@ -4,18 +4,131 @@
 @ 备注: 自定义表单
 -->
 <script lang='ts' setup>
+import { useRoute, useRouter } from 'vue-router'
+import { json2string,objToStringify,string2json,stringToObj } from '@/utils/DesignForm/form'
+import { customerFormVersionCont } from '@/api/DesignForm/type'
+import { FormData,formStruct,DrawerStruct, VideoMsg } from '@/api/DesignForm/types'
 
+
+//引入页面
+import DragControl from '@/components/DesignForm/dragControl.vue';
+
+const props = defineProps({
+	appCont:{
+		type:Object,
+		default(){
+			return {}
+		}
+	},
+	formKey:{
+		type:String,
+		default:""
+	},
+	groupKey:{
+		type:String,
+		default:""
+	},
+	formVersion:{
+		type:String,
+		default:""
+	},
+  	formconfigcont:{
+		type:Object,
+		default(){
+			return {}
+		}
+	},
+	state:{
+		type:Object,
+		default(){
+			return {}
+		}
+	}
+});
+
+const emits = defineEmits<{
+    (e: 'update:state', val: formStruct): void
+	(e: 'update:formKey', val: string): void
+	(e: 'update:formVersion', val: string): void
+	(e: 'judgeFormIsEdit', val: boolean): void
+	(e: 'runNextWindows', val: number): void
+	(e: 'closeFormPage'): void
+}>()
+
+const state =  computed({
+	get() {
+		return props.state
+	},
+	set(val: formStruct) {
+		emits('update:state', val)
+	}
+});
+
+const formKeyVal =  computed({
+	get() {
+		return props.formKey
+	},
+	set(val: formStruct) {
+		emits('update:formKey', val)
+	}
+});
+const versionCont = ref<customerFormVersionCont[]>([])			//版本内容列表
+
+// 搜索设计时左侧快速添加字段
+const searchCheckField = (data: FormData) => {
+    state.value.formData.list.push(data)
+}
+// 选择模板
+const selectTemplate = (data: FormData) => {
+	state.value.formData = stringToObj(objToStringify(data))
+}
+//编辑版本状态
+const editversionstaus = (id:string) =>{
+
+}
+//打开脚本预览
+const openAceEditDrawer = (params: any) => {
+
+}
 </script>
 <template>
-	<el-aside class="asideBox">Aside</el-aside>
-	<el-main class="mainBox">Main</el-main>
-	<el-aside class="asideBox">Aside</el-aside>
+	<el-aside class="asideBox leftBox">
+		<DragControl
+			v-model:versionid="props.formVersion"
+			:formid="state.formOtherData.source"
+			:versioncont="versionCont"
+      		@click-check="searchCheckField"
+      		@click="selectTemplate"
+			@editversionstaus="editversionstaus"
+		/>
+	</el-aside>
+	<el-main class="mainBox rightBox">
+		
+	</el-main>
+	<el-aside class="asideBox">
+		<form-control-attr
+			ref="formControlAttrEl"
+			v-model:formOtherData="state.formOtherData"
+			:form-data="state.formData.form"
+			:form-config="state.formData.config"
+			:customerformid="props.groupKey"
+			:form-list="state.formData.list"
+			:form-info="state.formData"
+			@open-dialog="openAceEditDrawer"
+		/>
+	</el-aside>
 </template>
 <style  lang='scss' scoped>
 .asideBox{
 	height: calc(100vh - 40px);
-	width: 300px;
+	
 	overflow-y : auto;
+	.leftBox{
+		width: 250px;
+	}
+	.rightBox{
+		width: 300px;
+	}
 }
 .mainBox{
 	border-left: 1px solid #ECECEC;
diff --git a/src/views/sysworkflow/lowcodepage/appPage/createAppFormPage.vue b/src/views/sysworkflow/lowcodepage/appPage/createAppFormPage.vue
index 861e0118b..02c102fbc 100644
--- a/src/views/sysworkflow/lowcodepage/appPage/createAppFormPage.vue
+++ b/src/views/sysworkflow/lowcodepage/appPage/createAppFormPage.vue
@@ -4,6 +4,10 @@
 @ 备注: 编辑表单
 -->
 <script lang='ts' setup>
+import { useRoute, useRouter } from 'vue-router'
+import { customerFormConfig,formStruct } from '@/api/DesignForm/types'
+import { getProductionMarkForm } from '@/api/DesignForm/requestapi'
+
 import PageForm from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/pageForm.vue"
 import PageFlow from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/pageFlow.vue"
 import PageList from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/pageList.vue"
@@ -22,10 +26,57 @@ const props = defineProps({
 		type:Number,
 		default:0
 	},
+	formKey:{
+		type:String,
+		default:""
+	},
+	groupKey:{
+		type:String,
+		default:""
+	},
+	menuId:{
+		type:String,
+		default:""
+	}
 });
 const emits = defineEmits(["update:isShow"]);
 const tabsActive = ref(1)
-
+const route: any = useRoute().query || {}
+const formConfigCont = reactive<customerFormConfig>({
+	formName:"",
+	formlogo:""
+})
+//表单版本ID
+const formVersion = ref<string>("")
+const state = reactive<formStruct>({
+    formData: {
+		list: [],
+		form: {
+			size: 'default',
+			name:'',
+			formName: formConfigCont.formName
+		},
+		config: {
+			groupKey:props.formGroupKey
+		},
+		styles:{
+			divStyle:{},
+			labelStyle:{},
+			inputStyle:{}
+		},
+		purview:[]
+    },
+    editor: {},
+    loading: false,
+    formDataPreview: {},
+    previewVisible: false, // 预览窗口
+    designType: route.type, // 当前页面设计类型，有效值search
+    formDict: {},
+    formOtherData: {
+		source: route.source || '',
+		formName: formConfigCont.formName
+    }
+})
 /**
 @ 作者: 秦东
 @ 时间: 2024-05-07 15:11:24
@@ -34,6 +85,20 @@ const tabsActive = ref(1)
 const closeSavePageForm = () =>{
 	emits("update:isShow",false)
 }
+
+onBeforeMount(() => {
+	getProductionMarkForm()
+		.then(({data})=>{
+			formConfigCont.formlogo = data.formlogo
+			formConfigCont.formName = data.formname
+			state.formData.form.name = data.formlogo
+			state.formData.form.formName = data.formname
+			state.formOtherData.formName = data.formname
+		})
+		.finally(()=>{
+			
+		})
+})
 </script>
 <template>
 	<el-drawer  v-model="props.isShow" title="设置/编辑自定义表单" :with-header="false" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :size="props.drawerWith">
@@ -55,10 +120,10 @@ const closeSavePageForm = () =>{
 							<el-tooltip
 								class="box-item"
 								effect="dark"
-								:content="props.appCont.appName"
+								:content="state.formData.form.formName"
 								placement="bottom"
 							>
-								<el-text class="w-150px mb-2" truncated>未命名表单</el-text>
+								<el-text class="w-150px mb-2" truncated>{{ state.formData.form.formName }}</el-text>
 							</el-tooltip>
 						</el-space>
 					</div>
@@ -73,13 +138,14 @@ const closeSavePageForm = () =>{
 						</el-tabs>
 					</div>
 					<div class="headRight">
+					{{ props.menuId }}
 						<el-button type="danger" size="small" @click="closeSavePageForm" >关闭</el-button>
 					</div>
 				</el-header>
 				<el-container>
-					<PageForm v-if="tabsActive==1" />
-					<PageFlow v-if="tabsActive==2" />
-					<PageList v-if="tabsActive==3" />
+					<PageForm v-if="tabsActive==1" :form-Key="props.formKey" :app-cont="props.appCont" :group-key="props.groupKey" v-model:state="state" v-model:form-version="formVersion" :formconfigcont="formConfigCont" />
+					<PageFlow v-if="tabsActive==2" :form-Key="props.formKey" :app-cont="props.appCont" :group-key="props.groupKey" />
+					<PageList v-if="tabsActive==3" :form-Key="props.formKey" :app-cont="props.appCont" :group-key="props.groupKey" />
 				</el-container>
 			</el-container>
 		</div>
diff --git a/src/views/sysworkflow/lowcodepage/appPage/index.vue b/src/views/sysworkflow/lowcodepage/appPage/index.vue
index 0616c47b4..0ed34f95f 100644
--- a/src/views/sysworkflow/lowcodepage/appPage/index.vue
+++ b/src/views/sysworkflow/lowcodepage/appPage/index.vue
@@ -24,6 +24,10 @@ const props = defineProps({
 	isShow:{
 		type: Boolean,
 		default: false,
+	},
+	groupKey:{
+		type:String,
+		default:""
 	}
 });
 const emits = defineEmits(["update:isShow","update:svgName","refreshPage"]);
@@ -253,7 +257,7 @@ const addAppPageForm = (key?:string) => {
 									</el-menu-item>
 								</el-menu> -->
 
-								<AppMenus :form-Key="formKey" v-model:menus-tree="menusTree" :app-cont="appCont" :drawer-with="props.drawerWith" />
+								<AppMenus :form-Key="props.formKey" v-model:menus-tree="menusTree" :group-key="props.groupKey" :app-cont="appCont" :drawer-with="props.drawerWith" />
 
 
 
diff --git a/src/views/sysworkflow/lowcodepage/index.vue b/src/views/sysworkflow/lowcodepage/index.vue
index 6fa9e0138..a193b0680 100644
--- a/src/views/sysworkflow/lowcodepage/index.vue
+++ b/src/views/sysworkflow/lowcodepage/index.vue
@@ -56,6 +56,7 @@ const handleCommand = (command: string,groupId: string) => {
 		createApp(sendInfo)
 			.then((data)=>{
 				formKey.value = data.data.uuid
+				groupKey.value = groupId.toString()
 				nextTick(() =>{
 					appPageShow.value = true
 				});
@@ -209,7 +210,7 @@ const getRongQiAttr = () => {
 			<el-pagination layout="prev, pager, next" v-model:current-page="page" :page-size="pageSize" :total="pageTotal" />
 		</div>
 
-		<DesignAPPpage v-model:is-show="appPageShow"  :drawer-with="drawerWith" v-model:form-key="formKey" @refreshPage="refreshPage" />
+		<DesignAPPpage v-model:is-show="appPageShow"  :drawer-with="drawerWith" v-model:form-key="formKey" :group-key="groupKey" @refreshPage="refreshPage"  />
 			
 		<LowCodeFormPage v-if="addFormIsShow" :drawer-with="drawerWith" v-model:form-key="formKey" :form-group-key="formGroupKey" @refreshPage="refreshPage" />
 		<LowCodeFormGroupPage v-if="addFormGroupIsShow" :drawer-with="drawerGroupWith"  :group-key="groupKey" @refreshPage="refreshPage" />
diff --git a/src/views/sysworkflow/lowcodepage/pageDesignes.vue b/src/views/sysworkflow/lowcodepage/pageDesignes.vue
index 77d27c647..a7ebe9c54 100644
--- a/src/views/sysworkflow/lowcodepage/pageDesignes.vue
+++ b/src/views/sysworkflow/lowcodepage/pageDesignes.vue
@@ -19,6 +19,7 @@ import { submitAndCancelButton,cancelButton,submitButton } from "@/api/DesignFor
 
 //引入页面
 import DragControl from '@/components/DesignForm/dragControl.vue';
+import DragControlNew from '@/components/DesignForm/dragControlNew.vue';
 import HeadTools from '@/components/DesignForm/public/headTools.vue';
 // import HeadTools from '@/components/DesignForm/public/headToolsNew.vue';
 import FormDesign from '@/components/DesignForm/public/form/form.vue'
@@ -55,6 +56,7 @@ const emits = defineEmits<{
 	(e: 'judgeFormIsEdit', val: boolean): void
 	(e: 'runNextWindows', val: number): void
 	(e: 'closeFormPage'): void
+	(e: 'verTabsClick'): void
 }>()
 
 const state =  computed({
@@ -565,16 +567,31 @@ onMounted(() => {
 // watch(() =>versionId.value ,(val:string)=>{
 // 	emits('update:formVersion', val)
 // })	
+/**
+@ 作者: 秦东
+@ 时间: 2024-05-09 14:29:06
+@ 功能: 根据启用版本进行加载页面
+*/
+const versionUpdateForm = (val:string) => {
+	console.log("加载异常-------111------->",val)
+	versionId.value = val
+	
+	getInitData()
+}
 </script>
 <template>
 	<div class="design_container">
-		<DragControl
+		<!-- <DragControl
 			v-model:versionid="versionId"
 			:formid="state.formOtherData.source"
 			:versioncont="versionCont"
       		@click-check="searchCheckField"
       		@click="selectTemplate"
 			@editversionstaus="editversionstaus"
+		/> -->
+		<DragControlNew
+			:table-key="state.formData.form.name"
+			@versionUpdateForm="versionUpdateForm"
 		/>
 		<div class="main-body">
 			<HeadTools v-loading="state.loading" :customerformid="formKeyVal" @click="headToolClick" />

From 5e1cb059b9ef3b0270a116c9c49d44ef1c4833ea Mon Sep 17 00:00:00 2001
From: herenshan112 <herenshan112@163.com>
Date: Mon, 13 May 2024 11:43:27 +0800
Subject: [PATCH 4/5] =?UTF-8?q?=E4=B8=AD=E6=9C=9F=E5=8F=91=E7=89=88?=
 =?UTF-8?q?=E3=80=82=E6=B5=8B=E8=AF=95=E6=B5=81=E7=A8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DesignForm/assembly/isSearch.ts           |    3 +
 src/components/DesignForm/dragControlApp.vue  |  141 ++
 src/components/DesignForm/formControlAttr.vue |    2 +-
 .../DesignForm/formControlProperties.vue      | 2197 +++++++++++++++++
 src/components/DesignForm/rule/numberRules.ts |   33 +
 src/components/DesignForm/validateApp.ts      |  104 +
 src/styles/workflowcss/workflow.css           | 1733 +++++++++++++
 src/styles/workflowcss/workflow.min.css       |    1 +
 src/types/components.d.ts                     |    3 +
 src/views/dashboard/index.vue                 |  364 ++-
 src/views/dashboard/index_1.vue               |  146 ++
 src/views/dashboard/index_old.vue             |  250 --
 .../sysworkflow/lowcodepage/appFormList.vue   |    1 +
 .../lowcodepage/appPage/appMenus.vue          |    1 +
 .../appPage/appPageForm/pageForm.vue          |   24 +-
 .../lowcodepage/appPage/createAppFormPage.vue |    4 +-
 16 files changed, 4610 insertions(+), 397 deletions(-)
 create mode 100644 src/components/DesignForm/dragControlApp.vue
 create mode 100644 src/components/DesignForm/formControlProperties.vue
 create mode 100644 src/components/DesignForm/rule/numberRules.ts
 create mode 100644 src/components/DesignForm/validateApp.ts
 create mode 100644 src/styles/workflowcss/workflow.css
 create mode 100644 src/styles/workflowcss/workflow.min.css
 create mode 100644 src/views/dashboard/index_1.vue
 delete mode 100644 src/views/dashboard/index_old.vue

diff --git a/src/components/DesignForm/assembly/isSearch.ts b/src/components/DesignForm/assembly/isSearch.ts
index e69de29bb..986549346 100644
--- a/src/components/DesignForm/assembly/isSearch.ts
+++ b/src/components/DesignForm/assembly/isSearch.ts
@@ -0,0 +1,3 @@
+export const formControlProject = (val:any) =>{
+	return []
+}
diff --git a/src/components/DesignForm/dragControlApp.vue b/src/components/DesignForm/dragControlApp.vue
new file mode 100644
index 000000000..30d91a195
--- /dev/null
+++ b/src/components/DesignForm/dragControlApp.vue
@@ -0,0 +1,141 @@
+<!--
+@ 作者: 秦东
+@ 时间: 2024-05-09 15:12:45
+@ 备注: 自定义表单组件页面(App专用)
+-->
+<script lang='ts' setup>
+import controlListData from '@/components/DesignForm/assembly'
+import Draggable from 'vuedraggable-es'
+import '@/assets/iconfont/iconfont.css'
+
+//引入页面
+import FormVersion from '@/components/DesignForm/formVersion.vue';
+
+
+const props = withDefaults(
+    defineProps<{
+      tableKey?: number | string,
+	  signCode?: number | string,
+    }>(),
+    {}
+)
+const designType = inject('formDesignType') as string	//注入一个由祖先组件或整个应用 (通过 app.provide()) 提供的值。
+// 默认搜索允许显示的字段
+const searchField = [
+    'input',
+    'radio',
+    'checkbox',
+    'select',
+    'datePicker',
+    'timePicker',
+    'inputNumber',
+    'cascader',
+    'component',
+    'button'
+]
+/**
+@ 作者: 秦东
+@ 时间: 2024-05-09 10:58:56
+@ 功能: 表单组件数据
+*/
+const controlList = computed(() => {
+    if (designType === 'search') {
+		// 只返回基础字段
+		const temp: any = []
+		controlListData.forEach((item: any) => {
+			if (item.children) {
+				const filter = item.children.filter((ch: any) => {
+					return searchField.includes(ch.type)
+				})
+				if (filter && filter.length) {
+					temp.push({ title: item.title, children: filter })
+				}
+			}
+		})
+      	return temp
+    } else {
+      	return controlListData
+    }
+})
+const tableVersion = ref()	//版本显示器
+
+const emits = defineEmits<{
+	(e: 'versionUpdateForm', value: string): void
+}>()
+/**
+@ 作者: 秦东
+@ 时间: 2024-05-09 11:36:59
+@ 功能: 启用和禁用版本
+*/
+const enableOrDisable = (val?:any) =>{
+	console.log("启用和禁用版本",val)
+	emits('versionUpdateForm', val)
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-05-09 11:40:15
+@ 功能: 打开版本选择页面
+*/
+const useVersionClick = () => {
+	tableVersion.value.open()
+}
+const activities = [
+  {
+    content: 'Event start',
+    timestamp: '2018-04-15',
+  },
+  {
+    content: 'Approved',
+    timestamp: '2018-04-13',
+  },
+  {
+    content: 'Success',
+    timestamp: '2018-04-11',
+  },
+]
+</script>
+<template>
+	<div class="components-list">
+		<div v-for="(list, index) in controlList" :key="index">
+			<div class="title">
+				{{ list.title }}
+				<div
+					class="template"
+					@click="useVersionClick"
+				>
+				版本
+				</div>
+			</div>
+			<draggable
+				v-model="list.children"
+				tag="ul"
+				:group="{ name: 'form', pull: 'clone', put: false }"
+				ghost-class="ghost"
+				:sort="false"
+				:clone="clone"
+				item-key="key123"
+			>
+			
+				<template #item="{ element }">
+					<li class="fontIcon" :class="[element.type]">
+						<i v-if="element.iconFont==''" :class="`icon-${element.icon}`"></i>
+						<i  v-if="element.iconFont!=''" :class="`fa ${element.iconFont} `"></i>
+						<span :title="element.label">{{ element.label }}</span>
+					</li>
+				</template>
+			</draggable>
+		</div>
+	</div>
+	<FormVersion ref="tableVersion" :table-key="props.tableKey" :sign-code="props.signCode" @enableOrDisable="enableOrDisable" />
+</template>
+<style  lang='scss' scoped>
+.tab_pane_body{
+	text-align: center;
+	
+}
+.fontIcon{
+	i{
+		padding: 4px 0px 0 0px;
+	}
+}
+</style>
diff --git a/src/components/DesignForm/formControlAttr.vue b/src/components/DesignForm/formControlAttr.vue
index 515cad92c..7cfb9531e 100644
--- a/src/components/DesignForm/formControlAttr.vue
+++ b/src/components/DesignForm/formControlAttr.vue
@@ -1423,7 +1423,7 @@
     defineExpose({ getFormFieldBySource })
     //判断输入框是否可写
     const isNotWrite = (val:any) =>{
-        // console.log("判断输入框是否可写--->",val)
+        console.log("判断输入框是否可写--->",val,props.customerformid)
         if(val.key === "name" && props.customerformid != ""){
             return true
         }
diff --git a/src/components/DesignForm/formControlProperties.vue b/src/components/DesignForm/formControlProperties.vue
new file mode 100644
index 000000000..3ff623007
--- /dev/null
+++ b/src/components/DesignForm/formControlProperties.vue
@@ -0,0 +1,2197 @@
+<!--
+@ 作者: 秦东
+@ 时间: 2024-05-10 08:47:28
+@ 备注: 表单控件（app）专用
+-->
+<script lang='ts' setup>
+import { getRequest } from '@/api/DesignForm'
+import { chineseToPinyin,customerFormGroupList } from '@/api/DesignForm/requestapi'
+import { formatNumber } from '@/api/DesignForm/utils'
+import appValidate from './validateApp'
+import appNumberValidate from './rule/numberRules'
+import { useDesignFormStore } from '@/store/DesignForm/designForm'
+
+import { VideoMsg,PublicAtrr } from '@/api/DesignForm/types'
+import { genFileId } from 'element-plus'
+import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
+
+//数学计算公式编辑器
+import MathFormula from '@/components/DesignForm/math/mathFormula.vue'
+//样式布局
+import LayoutPage from '@/components/DesignForm/layoutPage/index.vue'
+/**
+@ 作者: 秦东
+@ 时间: 2024-05-10 09:07:53
+@ 功能: 接收父级参数
+*/
+const props = withDefaults(			
+    defineProps<{
+        formData: any
+        formList: any
+        formConfig: any
+        formOtherData: any
+        customerformid: number | string,
+		formInfo: any
+    }>(),
+    {
+        formConfig: () => {
+            return {}
+        },
+        formOtherData: () => {
+            // 其他不需要保存在formData里的数据
+            return {}
+        }
+    }
+)
+//注册自定义事件
+const emits = defineEmits<{
+    (e: 'openDialog', data: any): void
+    (e: 'update:formOtherData', data: any): void
+    (e: 'videoMsgChange', data: VideoMsg): void
+        //(e: 'update:formData', data: any): void
+        //(e: 'update:formConfig', data: any): void
+}>()
+/**
+@ 作者: 秦东
+@ 时间: 2024-05-10 09:08:19
+@ 功能: 接收值转化ref对象
+*/
+const { formConfig, formData } = toRefs(props)
+const store = useDesignFormStore() as any
+const designType = inject('formDesignType')
+const dataSourceOption = ref([])
+
+const controlData = computed(() => {
+    console.log("注册自定义事件----------------->",store.controlAttr)
+    return store.controlAttr
+})
+/**
+@ 作者: 秦东
+@ 时间: 2024-05-10 09:14:03
+@ 功能: 表单及组件单元控制属性
+*/
+const state = reactive({
+	dataSourceList: [],			//数据源列表
+	customRulesList: [
+		...appValidate
+	], // 自定义校验规则
+	tooltip: {
+        css: '当前表单应用页的样式，类似于.vue文件中的style scoped中的样式',
+        dict: '数据字典，用于匹配多选组、下拉选择等，提供动态获取Options接口字典数据，一般不设置，从接口dict获取。json格式："sex":{"0":"男","1":"女"}',
+        rules:"可参考UI组件表单校验，<a href='https://element-plus.gitee.io/zh-CN/component/form.html#%E8%A1%A8%E5%8D%95%E6%A0%A1%E9%AA%8C' target='_blank' style='color:red'>详情点击</a>",
+        props: '可添加当前组件所有prop属性及事件方法'
+    },
+	tabsName: 'second',
+	numberRulesList:[
+		...appNumberValidate
+	]
+})
+/**
+@ 作者: 秦东
+@ 时间: 2024-05-10 10:15:14
+@ 功能: 分组数据
+*/
+const page = ref<number>(1)
+const pageSize = ref<number>(200000)
+const loadingmore = ref(false)
+const loadingnomore = ref(false)
+const formGroup = ref<any[]>([])
+const gainFormGroupList = () =>{
+	loadingmore.value = true;
+	let sendInfo = {
+		page:page.value,
+		pagesize:pageSize.value,
+		state:1
+	}
+	customerFormGroupList(sendInfo)
+		.then((data)=>{
+			formGroup.value = data.data
+		})
+		.finally(()=>{
+			loadingmore.value = false;
+		})
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-05-10 09:44:23
+@ 功能: 表单控制项
+*/
+const formControlProject = computed(()=>{
+	const isSearch = state.isSearch;
+	return [
+		{
+            label: '表单名称',
+            placeholder: '用于保存的表单名称',
+            value: props.formOtherData.formName,
+            key: 'formName',
+            hide: isSearch
+        },
+        {
+            label: '数据源',
+            placeholder: '请选择数据源',
+            value: formatNumber(props.formOtherData.source),
+            type: 'select',
+            options: dataSourceOption.value,
+            key: 'source',
+            hide: isSearch || !dataSourceOption.value?.length,
+            clearable: true
+        },
+        {
+            label: '表单标识',
+            value: formData.value.name,
+            placeholder: '表单唯一标识，可为空',
+            key: 'name',
+            hide: isSearch
+        }
+	];
+})
+/**
+@ 作者: 秦东
+@ 时间: 2024-05-10 11:20:18
+@ 功能: 根据选定数据源获取表单字段
+*/
+const getFormFieldBySource = (id?: string) => {
+    if (state.isSearch) {
+        // 搜索设计这里不需要数据源
+        return
+    }
+    const source = id
+    if (source) {
+        getRequest('sourceById', { id: source })
+            .then(res => {
+                    // console.log(res)
+                const tableData = res.data.result?.tableData
+                if (tableData && tableData.length) {
+                    state.dataSourceList = tableData.filter(
+                    (item: any) => item.enterable
+                    )
+                }
+            })
+            .catch(res => {
+                // console.log(res)
+            })
+    }
+}
+defineExpose({ getFormFieldBySource })
+
+
+/**
+@ 作者: 秦东
+@ 时间: 2024-05-10 11:19:01
+@ 功能: 表单属性修改
+*/
+const formAttrChange = (obj: any, val?: any) => {
+    console.log("表单属性修改--->",obj,val,{ [obj.key]: obj.value })
+    if (obj.key === 'source') {
+        getFormFieldBySource(obj.value) // 改变了数据源了，重新请求数据
+            // 清空设计区已选择的组件，再一次选择时字段标识才会变
+        store.setActiveKey('')
+        store.setControlAttr({})
+    }
+    if (['formName', 'source'].includes(obj.key)) {
+        emits(
+            'update:formOtherData',
+            Object.assign(props.formOtherData, { [obj.key]: obj.value })
+        )
+        formData.value[obj.key] = obj.value
+        return
+    }
+    if (obj.path === 'config') {
+        formConfig.value[obj.key] = obj.value || val
+    } else {
+        formData.value[obj.key] = obj.value
+    }
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-05-10 10:17:29
+@ 功能: 组件加载完毕执行
+*/
+onMounted(() => {
+    gainFormGroupList()
+})
+/**
+@ 作者: 秦东
+@ 时间: 2024-05-10 11:22:26
+@ 功能: 判断输入框是否可写
+*/
+const isNotWrite = (val:any) =>{
+    // console.log("判断输入框是否可写--->",val,props.customerformid)
+    if(val.key === "name" && props.customerformid != ""){
+        return true
+    }
+    return false
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-03-18 11:42:52
+@ 功能: 上传图标相关
+*/
+const imgUploadApiUrl = import.meta.env.VITE_APP_BASE_API+"/api/upordown" //上传地址
+const handleAvatarSuccess: UploadProps['onSuccess'] = (
+	response,
+	uploadFile
+) => {
+	//   imageUrl.value = URL.createObjectURL(uploadFile.raw!)
+	formConfig.value.imageUrl = response.data.url
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-05-10 11:28:40
+@ 功能: 上传前验证
+*/
+const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
+	console.log("beforeAvatarUpload",rawFile.type)
+  	if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/jpg' && rawFile.type !== 'image/png' && rawFile.type !== 'image/gif' && rawFile.type !== 'image/icon') {
+    	ElMessage.error('请上传以下格式的图片(jpg、jpeg、png、gif、icon)!'+rawFile.type)
+    	return false
+  	} else if (rawFile.size / 1024 / 1024 > 2) {
+    	ElMessage.error('图片大小不要大于 2MB!')
+    	return false
+  	}
+  	return true
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-05-10 11:34:15
+@ 功能: 表单接口事件
+*/
+const eventClick = (type: string, tooltip?: string) => {
+    emits('openDialog', { type: type, title: tooltip, direction: 'ltr' })
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-05-10 11:52:57
+@ 功能: 编辑表单样式
+*/
+const editFormStyle = (tooltip: string) => {
+    emits('openDialog', {
+        codeType: 'css',
+        direction: 'ltr',
+        type: 'css',
+        title: tooltip
+    })
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-05-10 11:53:45
+@ 功能: 设置数据字典
+*/
+const editFormDict = (tooltip: string) => {
+    emits('openDialog', {
+        type: 'dict',
+        direction: 'ltr',
+        codeType: 'json',
+        title: tooltip
+    })
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-05-10 13:19:37
+@ 功能: 组件属性
+*/
+const componentProperties = computed(()=>{
+	if (Object.keys(controlData.value).length){
+		const {
+            control = {},
+            type,
+            name,
+            config = {},
+            item = {},
+            attr = {},
+            selectvalue = "default",
+            mathFormula = {}
+        }: { 
+			control: any;
+			type:any;
+			name:any;
+			item:any;
+			attr:any; 
+			config: any,
+			selectvalue:any,
+			mathFormula:any 
+		} = controlData.value
+		let columnIndex = false // 是否显示序号列
+		if (type === 'table') {
+            // 表格时处理
+            const list = controlData.value && controlData.value.list
+            if (list && list.length > 0) {
+                columnIndex = list[0].type === 'index'
+            }
+        }
+		const temp =reactive<PublicAtrr[]>([
+			{
+                label: '自定义Class',
+                value: config.className,
+                placeholder: '样式类名',
+                path: 'config.className'
+            },
+			{
+                label: '字段标识',
+                value: name,
+                type:Object.keys(state.dataSourceList).length > 0 ? 'select' : 'text',
+                placeholder: '字段唯一标识，对应数据库',
+                dict: state.dataSourceList,
+                path: 'name',
+                vHide: [
+                    'grid',
+                    'tabs',
+                    'card',
+                    'title',
+                    'gridChild',
+                    'tableColumn',
+                    'divider',
+                    'txt',
+                    'div',
+                    'button'
+                ],
+                eventName: 'filedNameKey'
+            },
+			{
+                label: '占位内容',
+                value: control.placeholder,
+                placeholder: 'placeholder',
+                path: 'control.placeholder',
+                vShow: [
+                    'password',
+                    'input',
+                    'textarea',
+                    'select',
+                    'date',
+                    'number',
+                    'datePicker',
+                    'tinymce',
+                    'timePicker',
+                    'treeSelect'
+                ]
+            },
+			{
+                label: '按钮类型',
+                value: control.type,
+                path: 'control.type',
+                type: 'select',
+                dict: {
+                    primary: 'primary',
+                    success: 'success',
+                    info: 'info',
+                    warning: 'warning',
+                    danger: 'danger'
+                },
+                vShow: ['button'],
+                clearable: true
+            },
+            {
+                label: '按钮名称',
+                value: control.label,
+                path: 'control.label',
+                vShow: ['button']
+            },
+			{
+                label: '按钮事件',
+                value: control.key,
+                path: 'control.key',
+                type: 'select',
+                dict: {
+                    submit: '提交表单',
+                    reset: '重置表单',
+                    cancel: '取消返回',
+                    none: '无动作(自定义)'
+                },
+                vShow: ['button']
+            },
+			{
+                label: '对齐方式',
+                value: config.textAlign,
+                path: 'config.textAlign',
+                type: 'select',
+                dict: {
+                    left: 'left',
+                    right: 'right',
+                    center: 'center'
+                },
+                vShow: ['button', 'div']
+            },
+			{
+                label: 'label值',
+                value: item.label,
+                path: 'item.label',
+                vHide: [
+                    'table',
+                    'grid',
+                    'tabs',
+                    'title',
+                    'gridChild',
+                    'div',
+                    'inputSlot',
+                    'flex',
+                    'button',
+                    'txt'
+                ],
+                eventName: 'labelNameVal'
+            },
+			{
+                label: '隐藏label',
+                value: item.showLabel,
+                path: 'item.showLabel',
+                type: 'switch',
+                vHide: [
+                    'table',
+                    'grid',
+                    'tabs',
+                    'title',
+                    'gridChild',
+                    'divider',
+                    'card',
+                    'div',
+                    'inputSlot',
+                    'flex',
+                    'button',
+                    'txt'
+                ]
+            },
+			{
+                label: '帮助信息',
+                value: config.help,
+                path: 'config.help',
+                vHide: [
+                    'table',
+                    'grid',
+                    'tabs',
+                    'gridChild',
+                    'divider',
+                    'div',
+                    'inputSlot',
+                    'flex',
+                    'button',
+                    'txt'
+                ]
+            },
+            {
+                label: '表单栅格',
+                value: config.span,
+                placeholder: '表单区域栅格宽，0为自动宽',
+                path: 'config.span',
+                vHide: ['gridChild'],
+                isNum: true
+            },
+			{
+                label: '文本值',
+                value: control.modelValue,
+                placeholder: '支持html',
+                path: 'control.modelValue',
+                vShow: ['txt'],
+                inputStyle: 'textarea'
+            },
+            {
+                label: '设为密码',
+                value: type,
+                type: 'select',
+                dict: { input: '文本', password: '密码' },
+                path: 'type',
+                vShow: ['input', 'password'],
+                vIf: state.isSearch // 搜索模式下隐藏 为true
+            },
+            {
+                label: '文本域高度',
+                value: control.rows,
+                placeholder: '输入框行数',
+                path: 'control.rows',
+                vShow: ['textarea'],
+                isNum: true
+            },
+            {
+                label: '前缀',
+                value: config.prepend,
+                placeholder: '文本前缀',
+                path: 'config.prepend',
+                vShow: ['input', 'password']
+            },
+            {
+                label: '后缀',
+                value: config.append,
+                placeholder: '文本后缀',
+                path: 'config.append',
+                vShow: ['input', 'password']
+            },
+            {
+                label: '状态打开时的值',
+                value: control.activeValue,
+                placeholder: '状态打开时的值',
+                path: 'control.activeValue',
+                vShow: ['switch'],
+                isNum: true
+            },
+            {
+                label: '状态关闭时的值',
+                value: control.inactiveValue,
+                placeholder: '状态关闭时的值',
+                path: 'control.inactiveValue',
+                vShow: ['switch'],
+                isNum: true
+            },
+			{
+                label: '增加按钮文案',
+                value: config.addBtnText,
+                path: 'config.addBtnText',
+                type: 'text',
+                Show: ['flex', 'table']
+            },
+            {
+                label: '删除按钮文案',
+                value: config.delBtnText,
+                path: 'config.delBtnText',
+                type: 'text',
+                vShow: ['flex', 'table']
+            },
+            {
+                label: '是否多选',
+                value: control.multiple,
+                path: 'control.multiple',
+                type: 'switch',
+                vShow: ['select', 'treeSelect'],
+                eventName: 'selectMultiple'
+            },
+            {
+                label: '可清空',
+                value: control.clearable,
+                path: 'control.clearable',
+                type: 'switch',
+                vShow: ['select']
+            },
+            {
+                label: '是否禁用',
+                value: control.disabled,
+                path: 'control.disabled',
+                type: 'switch',
+                vShow: [
+                    'input',
+                    'password',
+                    'textarea',
+                    'radio',
+                    'checkbox',
+                    'select',
+                    'date',
+                    'switch',
+                    'number',
+                    'cascader',
+                    'upload',
+                    'rate',
+                    'tinymce',
+                    'treeSelect'
+                ],
+                vIf: state.isSearch
+            },
+            {
+                label: '是否禁用编辑',
+                value: config.editDisabled,
+                path: 'config.editDisabled',
+                type: 'switch',
+                vShow: [
+                    'input',
+                    'password',
+                    'textarea',
+                    'radio',
+                    'checkbox',
+                    'select',
+                    'date',
+                    'switch',
+                    'number',
+                    'cascader',
+                    'upload',
+                    'treeSelect',
+                    'table',
+                    'flex'
+                ],
+                vIf: state.isSearch
+            },
+            {
+                    label: '添加页隐藏',
+                    value: config.disabledAdd,
+                    path: 'config.disabledAdd',
+                    type: 'switch',
+                    vIf: state.isSearch,
+                    vHide: ['inputSlot']
+            },
+            {
+                label: '编辑页隐藏',
+                value: config.disabledEdit,
+                path: 'config.disabledEdit',
+                type: 'switch',
+                vIf: state.isSearch,
+                vHide: ['inputSlot']
+            },
+            {
+                label: '详情页隐藏',
+                value: config.disabledDetail,
+                path: 'config.disabledDetail',
+                type: 'switch',
+                vIf: state.isSearch,
+                vHide: ['inputSlot']
+            },
+            {
+                label: '设为Input输入框的前/后缀',
+                value: type === 'inputSlot',
+                path: '',
+                type: 'switch',
+                vShow: ['select', 'inputSlot'],
+                eventName: 'setInputSlot'
+            },
+            {
+                label: '标题',
+                value: control.modelValue,
+                path: 'control.modelValue',
+                vShow: ['title']
+            },
+            {
+                label: '占据的列数span',
+                value: attr.span,
+                path: 'attr.span',
+                vShow: ['gridChild'],
+                eventName: 'formatNumber',
+                isNum: true
+            },
+            {
+                label: '左侧的间隔格数offset',
+                value: attr.offset,
+                path: 'attr.offset',
+                vShow: ['gridChild'],
+                eventName: 'formatNumber',
+                isNum: true
+            },
+            {
+                label: '向右移动格数push',
+                value: attr.push,
+                path: 'attr.push',
+                vShow: ['gridChild'],
+                eventName: 'formatNumber',
+                isNum: true
+            },
+            {
+                label: '向左移动格数pull',
+                value: attr.pull,
+                path: 'attr.pull',
+                vShow: ['gridChild'],
+                eventName: 'formatNumber',
+                isNum: true
+            },
+            {
+                label: '序号列',
+                value: columnIndex,
+                type: 'switch',
+                vShow: ['table'],
+                eventName: 'tableColumn1'
+            },
+				{
+                label: '组件名',
+                value: config.componentName,
+                placeholder: '全局注册的组件名称',
+                path: 'config.componentName',
+                vShow: ['component']
+            },
+			{
+				label: '隐藏条件',
+				value: config.associatedForms,
+				path: 'config.associatedForms',
+				type: 'associatedForms_hide',
+				vIf: state.isSearch,
+				vShow: ['associatedForms']
+			},
+            {
+				label: '关联表单',
+				value: config.associatedForms,
+				path: 'config.associatedForms',
+				type: 'associatedForms_form',
+				vIf: state.isSearch,
+				vShow: ['associatedForms']
+			},
+            {
+				label: '数据范围',
+				value: config.associatedForms,
+				path: 'config.associatedForms',
+				type: 'associatedForms_dataRange',
+				vIf: state.isSearch,
+				vShow: ['associatedForms']
+			},
+            {
+				label: '数据填充规则',
+				value: config.associatedForms,
+				path: 'config.associatedForms',
+				type: 'associatedForms_FillRoles',
+				vIf: state.isSearch,
+				vShow: ['associatedForms']
+			},
+            {
+                label: '轮播图设置',
+                value: config.carousel,
+                path: 'config.carousel',
+                type: 'carousel',
+                vIf: state.isSearch,
+                vShow: ['lowcodeCarsusel']
+            },
+
+			{
+				label: '穿梭框名',
+				value: config.transfer,
+				path: 'config.transfer',
+				type: 'transfer_name',
+				vIf: state.isSearch,
+				vShow: ['lowcodeTransfer']
+			},
+			{
+				label: '选项数据源',
+				value: config.transfer,
+				path: 'config.transfer',
+				type: 'transfer_options_datasource',
+				vIf: state.isSearch,
+				vShow: ['lowcodeTransfer']
+			},
+            {
+                label: '上传视频',
+                value: config.uploadvideo,
+                path: 'config.uploadvideo',
+                type: 'uploadvideo_url',
+                vIf: state.isSearch,
+                vShow: ['videoUpAndPlay']
+            },
+			{
+				label: '上传图片',
+				value: config.lowcodeImage,
+				path: 'config.lowcodeImage',
+				type: 'lowcodeImage_url',
+				vIf: state.isSearch,
+				vShow: ['lowcodeImage']
+			},
+			{
+				label: '尺寸',
+				value: config.lowcodeImage,
+				path: 'config.lowcodeImage',
+				type: 'lowcodeImage_showMode',
+				vIf: state.isSearch,
+				vShow: ['lowcodeImage']
+			},
+			{
+				label: '契合度',
+				value: config.lowcodeImage,
+				path: 'config.lowcodeImage',
+				type: 'lowcodeImage_fit',
+				vIf: state.isSearch,
+				vShow: ['lowcodeImage']
+			},
+			{
+				label: '圆角',
+				value: config.lowcodeImage,
+				path: 'config.lowcodeImage',
+				type: 'lowcodeImage_radius',
+				vIf: state.isSearch,
+				vShow: ['lowcodeImage']
+			},
+			{
+				label: '边框和阴影',
+				value: config.lowcodeImage,
+				path: 'config.lowcodeImage',
+				type: 'lowcodeImage_boderAndShadow',
+				vIf: state.isSearch,
+				vShow: ['lowcodeImage']
+			},
+			{
+				label: '图片链接',
+				value: config.lowcodeImage,
+				path: 'config.lowcodeImage',
+				type: 'lowcodeImage_link',
+				vIf: state.isSearch,
+				vShow: ['lowcodeImage']
+			},
+			{
+				label: '浮动',
+				value: config.lowcodeImage,
+				path: 'config.lowcodeImage',
+				type: 'lowcodeImage_float',
+				vIf: state.isSearch,
+				vShow: ['lowcodeImage']
+			},
+			{
+				label: '内外四边距',
+				value: config.lowcodeImage,
+				path: 'config.lowcodeImage',
+				type: 'lowcodeImage_marginAndPadding',
+				vIf: state.isSearch,
+				vShow: ['lowcodeImage']
+			},
+            {
+                label: '视频宽度(像素)',
+                value: config.uploadvideo,
+                path: 'config.uploadvideo',
+                type: 'uploadvideo_width',
+                vIf: state.isSearch,
+                vShow: ['videoUpAndPlay']
+            },
+            {
+                label: '视频高度(像素)',
+                value: config.uploadvideo,
+                path: 'config.uploadvideo',
+                type: 'uploadvideo_height',
+                vIf: state.isSearch,
+                vShow: ['videoUpAndPlay']
+            },
+            {
+                label: '视频自动播放',
+                value: config.uploadvideo,
+                path: 'config.uploadvideo',
+                type: 'uploadvideo_autoPlay',
+                vIf: state.isSearch,
+                vShow: ['videoUpAndPlay']
+            },
+            {
+                label: '视频循环播放',
+                value: config.uploadvideo,
+                path: 'config.uploadvideo',
+                type: 'uploadvideo_loopPlay',
+                vIf: state.isSearch,
+                vShow: ['videoUpAndPlay']
+            },
+            
+            
+            {
+                label: '上传地址',
+                value: control.action,
+                placeholder: '图片/文件上传地址,可不填有默认值',
+                path: 'control.action',
+                vShow: ['upload']
+            },
+            {
+                label: '文件字段名',
+                value: control.name,
+                placeholder: '上传的文件字段名,默认file',
+                path: 'control.name',
+                vShow: ['upload']
+            },
+            {
+                label: '列表类型',
+                value: control.listType,
+                type: 'select',
+                dict: {
+                    text: 'text',
+                    picture: 'picture',
+                    'picture-card': 'picture-card'
+                },
+                path: 'control.listType',
+                vShow: ['upload']
+            },
+            {
+                label: '提示文字',
+                value: config.tip,
+                placeholder: '提示说明文字',
+                path: 'config.tip',
+                vShow: ['upload']
+            },
+            {
+                label: '按钮文本',
+                value: config.btnText,
+                placeholder: '上传按钮文本',
+                path: 'config.btnText',
+                vShow: ['upload']
+            },
+            {
+                label: 'direction',
+                type: 'select',
+                dict: { horizontal: 'horizontal', vertical: 'vertical' },
+                placeholder: '分割线方向，默认horizontal',
+                value: control.direction,
+                path: 'control.direction',
+                vShow: ['divider']
+            },
+            {
+                label: 'border-style',
+                placeholder: '分隔符样式，默认solid',
+                value: control.borderStyle,
+                path: 'control.borderStyle',
+                vShow: ['divider']
+            },
+            {
+                label: 'content-position',
+                type: 'select',
+                dict: { left: 'left', right: 'right', center: 'center' },
+                value: control.contentPosition,
+                path: 'control.contentPosition',
+                vShow: ['divider']
+            },
+            {
+                label: '最小值',
+                value: control.min,
+                path: 'control.min',
+                vShow: ['slider'],
+                eventName: 'formatNumber',
+                isNum: true
+            },
+            {
+                label: '最大值',
+                value: control.max,
+                path: 'control.max',
+                vShow: ['rate', 'slider'],
+                eventName: 'formatNumber',
+                isNum: true
+            },
+            {
+                label: '步长',
+                value: control.step,
+                path: 'control.step',
+                vShow: ['slider'],
+                eventName: 'formatNumber',
+                isNum: true
+            },
+            {
+                label: 'type',
+                value: control.type,
+                path: 'control.type',
+                vShow: ['datePicker'],
+                type: 'select',
+                placeholder: '显示类型',
+                dict: {
+                    year: 'year',
+                    month: 'month',
+                    date: 'date',
+                    datetime: 'datetime',
+                    week: 'week',
+                    datetimerange: 'datetimerange',
+                    daterange: 'daterange',
+                    monthrange: 'monthrange'
+                }
+            },
+            {
+                label: 'format',
+                value: control.format,
+                path: 'control.format',
+                vShow: ['datePicker', 'timePicker'],
+                placeholder: '显示在输入框中的格式'
+            },
+            {
+                label: 'color-format',
+                value: control.colorFormat,
+                path: 'control.colorFormat',
+                type: 'select',
+                placeholder: '写入 v-model 的颜色的格式',
+                dict: { hsl: 'hsl', hsv: 'hsv', hex: 'hex', rgb: 'rgb' },
+                vShow: ['colorPicker']
+            },
+            {
+                label: '文本高度',
+                value: control.height,
+                path: 'control.height',
+                placeholder: '文本高度(预览查看效果)',
+                vShow: ['tinymce']
+            },
+            {
+                label: '文本宽度',
+                value: control.width,
+                path: 'control.width',
+                placeholder: '文本宽度(预览查看效果)',
+                vShow: ['tinymce']
+            },
+            {
+                label: '图片上传地址',
+                value: control.imgUrl,
+                path: 'control.imgUrl',
+                placeholder: '图片上传地址',
+                vShow: ['tinymce']
+            },
+            {
+                label: '附件上传地址',
+                value: control.blobUrl,
+                path: 'control.blobUrl',
+                placeholder: '附件上传地址',
+                vShow: ['tinymce']
+            },
+            {
+                label: '显示模式',
+                value: config.style,
+                path: 'config.style',
+                placeholder: '显示风格(预览查看效果)',
+                type: 'select',
+                dict: { default: 'default', simple: 'simple' },
+                vShow: ['tinymce']
+            },
+            {
+                label: '默认值',
+                value: control.mathsValue,
+                selectvalue: selectvalue,
+                path: 'control.mathsValue',
+                placeholder: '显示风格(预览查看效果)',
+                type: 'digitpage',
+                dict: { default: '自定义', simple: '编辑公式' },
+                vShow: ['digitpage'],
+                control:control
+            }
+		])
+		// 过滤显示对应的值
+		return temp.filter((item: any) => {
+            let hasFilter = true
+            if (item.vShow) {
+                hasFilter = item.vShow.includes(type)
+            }
+            if (item.vHide) {
+                hasFilter = !item.vHide.includes(type)
+            }
+            if (item.vIf) {
+            // 不显示vif＝true的
+                hasFilter = false
+            }
+            return hasFilter
+        })
+	} else {
+        return []
+    }
+});
+/**
+@ 作者: 秦东
+@ 时间: 2024-05-10 13:33:51
+@ 功能: 组件属性变化
+*/
+const controlChange = (obj: any, val: any) => {
+	switch (obj.eventName) {
+        case 'selectMultiple':
+            if (val) {
+                // 多选，将值改为数组
+                controlData.value.control.modelValue = []
+            } else {
+                // 单选
+                controlData.value.control.modelValue = ''
+            }
+            break
+        case 'tableColumn1':
+            tableColumnAdd(val)
+            break
+        case 'formatNumber':
+            val = parseInt(val) // 将值转数值
+            break
+        case 'filedNameKey':
+            // 选择字段标识时，同时修改显示标题
+            // 根据value找key
+            if (obj.type === 'select') {
+                state.dataSourceList.forEach((item: any) => {
+                    if (item.name === val) {
+                        if (controlData.value.item) {
+                            controlData.value.item.label = item.label
+                        }
+                        controlData.value.name = item.label
+                    }
+                })
+            }
+            break
+        case 'setInputSlot':
+            if (val) {
+                // 将类型改为inputSlot
+                controlData.value.type = 'inputSlot'
+                ElMessage.success(
+                    `请在对应的Input输入框属性前后缀设置key:${controlData.value.name}`
+                )
+            } else {
+                controlData.value.type = 'select'
+            }
+            // 这里会报错Cannot set properties of null (setting 'checked')
+            // 因value:type===inputSlot，这里使用了v-model，影响不大暂不处理
+            break
+        case 'labelNameVal':
+            if(val != ""){
+                chineseToPinyin({title:val,types:8,connector:"",formJson:JSON.stringify(props.formInfo)})
+                    .then((data:any)=>{
+                        if(data.code == 0){
+                            if(data.data != ""){
+                                if(!fileSignAry.includes(data.data)){
+                                    controlData.value.name = data.data
+                                    fileSignAry.push(data.data)
+                                }else{
+                                    let isEnd = true;
+                                    do{
+                                        let titleVal = data.data + Rand(10000000,99999999)
+                                        if(!fileSignAry.includes(titleVal)){
+                                            controlData.value.name = titleVal;
+                                            fileSignAry.push(titleVal);
+                                            isEnd=false;
+                                        }
+                                    }while(isEnd);
+                                }
+                            }else{
+                                if(!fileSignAry.includes(val)){
+                                    controlData.value.name = val 
+                                    fileSignAry.push(val)
+                                }else{
+                                    let titleVal = val + Rand(10000000,99999999)
+                                    if(!fileSignAry.includes(titleVal)){
+                                        controlData.value.name = titleVal;
+                                        fileSignAry.push(titleVal);
+                                    }
+                                }
+                                
+                            }
+                            
+                        }
+                    })
+            }
+                
+                // console.log("字段编辑--fileSignAry--》",fileSignAry)
+        	break
+    }
+    if (obj.path) {
+        const newVal = obj.isNum ? formatNumber(val) : val // 类型为数字时转整数
+        obj.path && getPropByPath(controlData.value, obj.path, newVal)
+    }
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-05-10 13:39:12
+@ 功能: 子表时添加序号和操作列
+*/
+const tableColumnAdd = (val: string) => {
+    const item = {
+        name: 'index',
+        type: 'index',
+        item: {
+            label: '序号'
+        },
+        control: {},
+        config: {}
+    }
+    if (val) {
+          controlData.value.list.unshift(item)
+    } else {
+          controlData.value.list.splice(0, 1)
+    }
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-05-10 13:40:14
+@ 功能: 修改指定路径下的值
+*/
+const getPropByPath = (obj: any, path: string, val: any) => {
+    let tempObj = obj
+    const keyArr = path.split('.')
+    let i = 0
+    for (i; i < keyArr.length - 1; i++) {
+        const key = keyArr[i]
+        if (key in tempObj) {
+            tempObj = tempObj[key]
+        } else {
+            throw new Error(`${key} is undefined`)
+        }
+    }
+    const key = keyArr[i]
+    const value = tempObj[keyArr[i]]
+       
+    if (val !== undefined) {
+        tempObj[key] = val
+    }
+    return {
+        obj: tempObj,
+        key: key,
+        value: value
+    }
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-05-10 15:02:37
+@ 功能: 默认值处理
+*/
+const unitInfo = ref<any>()
+const formListmap = ref<any>()
+const subUnit = ref<any>()
+const mathBoxShow = ref(false)
+const digitPageSub = (val:any,envt:any) => {
+    subUnit.value = val
+    controlData.value.selectvalue = envt
+    formListmap.value = props.formList
+    if(envt == "simple"){
+        unitInfo.value = attrList.value
+        mathBoxShow.value = true
+    }
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-05-10 15:05:47
+@ 功能: 打开数学公司编辑器
+*/
+const openMathDialog = (val:any) => {
+    subUnit.value = val
+    formListmap.value = props.formList
+    unitInfo.value = attrList.value
+    mathBoxShow.value = true
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-05-10 15:30:55
+@ 功能: 根据不同类型判断是否显示当前属性
+*/
+const showHide = (type: string[], show?: boolean) => {
+        // show=true 条件成立显示，false符合条件隐藏
+	if (
+	    (type && type.length === 0) ||
+	    Object.keys(controlData.value).length === 0
+	) {
+	      return false
+	}
+	const index = type.indexOf(controlData.value.type)
+	return show ? index !== -1 : index === -1
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-03-01 08:16:459097
+@ 功能: 判断是否是组件
+*/
+const cssIsShouw = (val:any) => {  
+	console.log("判断是否是组件",val)
+    if(val && val.length  && val.length > 0){ 
+        return true;
+    }    
+    return false;
+}
+</script>
+<template>
+	<div class="sidebar-tools">
+		<el-tabs v-model="state.tabsName">
+			<el-tab-pane label="字段配置" name="first">
+				<el-scrollbar class="formAttributeBox">
+					<el-form size="small" class="form">
+						<el-divider content-position="left">通用属性</el-divider>
+						<template v-for="(item, index) in componentProperties" :key="index">
+							<el-form-item :label="item.label"  class="form_cont">
+								<el-select
+                                    v-if="item.type === 'select'"
+                                    :placeholder="item.placeholder"
+                                    v-model="item.value"
+                                    :filterable="item.path === 'name'"
+                                    :allow-create="item.path === 'name'"
+                                    :clearable="item.clearable"
+                                    @change="controlChange(item, $event)"
+                                >
+                                    <el-option
+										v-for="(opt, key) in item.dict"
+										:key="key"
+										:value="item.path === 'name' ? opt.name : key"
+										:label="item.path === 'name' ? `${opt.label}(${opt.name})` : opt"
+                                    />
+                                </el-select>
+								<el-switch
+                                    v-else-if="item.type === 'switch'"
+                                    v-model="item.value"
+                                    @change="controlChange(item, $event)"
+                                />
+								<template v-else-if="item.type === 'digitpage'">
+									<el-row>
+										<el-col :span="12">
+                                            <el-select
+                                                v-model="item.selectvalue"
+                                                :placeholder="item.placeholder"
+                                                :filterable="item.path === 'name'"
+                                                :allow-create="item.path === 'name'"
+                                                :clearable="item.clearable"
+                                                @change="digitPageSub(item, $event)"
+                                            >
+                                                <el-option
+                                                    v-for="(opt, key) in item.dict"
+                                                    :key="key"
+                                                    :value="item.path === 'name' ? opt.name : key"
+                                                    :label="item.path === 'name' ? `${opt.label}(${opt.name})` : opt"
+                                                />
+                                            </el-select>
+                                        </el-col>
+                                        <el-col :span="12">
+                                            <el-input-number
+                                                v-if="item.selectvalue == 'default'"
+                                                v-model="item.value"
+                                                class="mx-4"
+                                            />
+                                        </el-col>
+									</el-row>
+									<div  v-if="item.selectvalue == 'simple'" style="width:100%;cursor: pointer; margin-top:10px;"  @click="openMathDialog(item)" v-html="item.control.mathFormula.formulaHtml"></div>
+                                    <MathFormula  v-model:show="mathBoxShow" :sub-unit="subUnit" :unit-info="attrList" :form-listmap="formListmap" @updata-digit="updataDigit" />
+								</template>
+								<el-row v-else-if="item.type === 'uploadvideo_url'">
+									<el-upload  
+										:action="uploadUrl"  :before-remove="beforeRemove"
+										:on-success="videoUploadOk" :show-file-list="true"
+										:on-error="videoUploadErr"
+										:limit="1"
+										:on-exceed="handleExceed"
+										accept=".mp4,.MOV,.WMV,.FLV,.AVI,.AVCHD,.WebM,.MKV,.rmvb"
+									>
+                                        <el-button v-if="!controlData.control.videoMsg[videoIndex].videoReady" type="primary">点此上传</el-button>
+                                        <el-button v-if="controlData.control.videoMsg[videoIndex].videoReady" type="primary">已上传,点击修改</el-button>
+                                    </el-upload>
+								</el-row>
+								<el-row v-else-if="item.type === 'uploadvideo_autoPlay'">
+                                    <el-switch v-model="controlData.control.videoMsg[videoIndex].videoAutoPlay" />
+                                </el-row>
+                                <el-row v-else-if="item.type === 'uploadvideo_loopPlay'">
+                                    <el-switch v-model="controlData.control.videoMsg[videoIndex].loop" />
+                                </el-row>
+                                <el-row v-else-if="item.type === 'uploadvideo_width'">
+                                    <el-input-number v-model="controlData.control.videoMsg[videoIndex].videoWidth" :step="50" :max="4096"/>
+                                </el-row>
+                                <el-row v-else-if="item.type === 'uploadvideo_height'">
+                                    <el-input-number v-model="controlData.control.videoMsg[videoIndex].videoHeight" :step="50" :max="2160"/>
+                                </el-row>
+                                <el-row v-else-if="item.type === 'carousel'">
+                                    <el-button  type="primary" append-to-body="true" modal="true" @click="dialogTableVisible = true"  >轮播图设置</el-button>
+                                </el-row>
+								<el-row v-else-if="item.type === 'transfer_name'">
+									<el-input
+										v-model="controlData.config.transferName"
+										placeholder="请输入穿梭框名"
+										style="width:221px"
+									/>
+								</el-row>
+								<el-row v-else-if="item.type ==='transfer_options_datasource'">
+									<el-select
+										v-model="controlData.config.transferDataSource"
+										placeholder="选项数据源"
+										style="width: 150px; height:20px"
+									>
+										<el-option
+											v-for="dataSourceOption1 in transferDataSourceOptions"
+											:key="dataSourceOption1.value"
+											:label="dataSourceOption1.label"
+											:value="dataSourceOption1.value"
+										/>
+									</el-select>
+									<div v-if="controlData.config.transferDataSource==='固定选项'" style="width: auto;margin-top:33px;margin-left:-220px;padding-bottom: 6px;">
+										<el-button  type="primary" append-to-body="true" modal="true" @click="transferDialogTableVisible = true"  >编辑固定选项</el-button>
+									</div>
+									<div v-if="controlData.config.transferDataSource==='数据源'" style="width: auto;margin-top: 20px;">
+										<el-input
+											v-model="controlData.config.apiUrl"
+											style="width:278px;margin-left: -68px;margin-top: -5px;"
+											placeholder="数据源接口url"
+										>
+											<template #prepend>
+												<el-select
+													v-model="controlData.config.method"
+													style="width: 100px"
+												>
+													<el-option label="get" value="get" />
+													<el-option label="post" value="post" />
+												</el-select>
+											</template>
+										</el-input>
+									</div>
+								</el-row>
+								<el-row v-else-if="item.type === 'lowcodeImage_radius'">
+									<el-switch v-model="controlData.control.radius" style="margin-right: 15px;"/>
+									<el-popover
+										placement="top-start"
+										:width="200"
+										trigger="hover"
+										content="数值越大圆角程度越高"
+									>
+										<template #reference>
+											<el-input-number v-if="controlData.control.radius" v-model="controlData.control.radiusNum" :step="1"/>
+										</template>
+									</el-popover>
+								</el-row>
+								<el-row v-else-if="item.type === 'lowcodeImage_url'">
+									<el-upload 
+										:action="uploadUrl"  :before-remove="beforeRemove"
+										:on-success="lowcodeImageUploadSuccess" 
+										:on-error="videoUploadErr"
+										:limit="1"
+										accept=".jpg,.jpeg,.png,.tif,.tga,.bmp,.dds,.svg,.eps,.pdf,.hdr,.raw,.exr,.psd,.afphoto,.afdesign"
+									>
+										<el-button v-if="!controlData.control.uploadFlag" type="primary">点此上传</el-button>
+										<el-button v-if="controlData.control.uploadFlag" type="primary">已上传,点击修改</el-button>
+									</el-upload>
+								</el-row>
+								<el-row v-else-if="item.type === 'lowcodeImage_showMode'">
+									<el-select
+										v-model="controlData.control.showMode"
+										placeholder="选项数据源"
+										style="width: 150px; height:20px"
+									>
+										<el-option
+											v-for="showModeSelected in showModeSelectOptions"
+											:key="showModeSelected.value"
+											:label="showModeSelected.label"
+											:value="showModeSelected.value"
+										/>
+									</el-select>
+									<div v-if="controlData.control.showMode==='自定义像素值'" style="width: auto;margin-top:33px;margin-left:-187px;padding-bottom: 6px;">
+										<span style="margin-right: 10px;">宽度(像素) </span><el-input-number  v-model="controlData.control.pxWidth" style="margin-bottom: 10px;" /><br/>
+										<span style="margin-right: 10px;">高度(像素) </span><el-input-number v-model="controlData.control.pxHeight" />
+									</div>
+									<div v-if="controlData.control.showMode==='自定义占父容器比例'" style="width: auto;margin-top:33px;margin-left:-187px;padding-bottom: 6px;">
+										<span style="margin-right: 10px;">百分比宽 </span><el-input-number v-model="controlData.control.widthPercent" style="margin-bottom: 10px;"/><br/>
+										<span style="margin-right: 10px;">百分比高 </span><el-input-number v-model="controlData.control.heightPercent" />
+									</div>
+								</el-row>
+								<el-row v-else-if="item.type === 'lowcodeImage_fit'">
+									<el-radio-group v-model="controlData.control.fit">
+										<el-popover
+											placement="top-start"
+											title="fill"
+											:width="200"
+											trigger="hover"
+											content="默认值。调整替换后的内容大小，以填充元素的内容框。如有必要，将拉伸或挤压物体以适应该对象。"
+										>
+											<template #reference>
+												<el-radio :label="1" :value="1">fill</el-radio>
+											</template>
+										</el-popover>
+										<el-popover
+											placement="top-start"
+											title="contain"
+											:width="200"
+											trigger="hover"
+											content="缩放替换后的内容以保持其纵横比，同时将其放入元素的内容框。"
+										>
+											<template #reference>
+												<el-radio :label="2" :value="2">contain</el-radio>
+											</template>
+										</el-popover>
+
+										<el-popover
+											placement="top-start"
+											title="cover"
+											:width="200"
+											trigger="hover"
+											content="调整替换内容的大小，以在填充元素的整个内容框时保持其长宽比。该对象将被裁剪以适应。"
+										>
+											<template #reference>
+												<el-radio :label="3" :value="3">cover</el-radio>
+											</template>
+										</el-popover>
+
+										<el-popover
+											placement="top-start"
+											title="none"
+											:width="200"
+											trigger="hover"
+											content="不对替换的内容调整大小。"
+										>
+											<template #reference>
+												<el-radio :label="4" :value="4">none</el-radio>
+											</template>
+										</el-popover>										
+										<el-popover
+											placement="top-start"
+											title="scale-down"
+											:width="200"
+											trigger="hover"
+											content="调整内容大小就像没有指定内容或包含内容一样（将导致较小的具体对象尺寸）"
+										>
+											<template #reference>
+												<el-radio :label="5" :value="5">scale-down</el-radio>
+											</template>
+										</el-popover>
+									</el-radio-group>
+								</el-row>
+								<el-row v-else-if="item.type === 'lowcodeImage_boderAndShadow'">
+									<el-switch v-model="controlData.control.boderAndShadow" style="margin-right: 15px;"/>
+								</el-row>
+								<el-row v-else-if="item.type === 'lowcodeImage_link'">
+									<el-input
+									v-model="controlData.control.link"
+									placeholder="请录入图片链接地址"
+									style="width:221px"
+									/>
+								</el-row>
+								<el-row v-else-if="item.type === 'lowcodeImage_marginAndPadding'">
+									<div style="width: auto;margin-top:33px;margin-left:-47px;padding-bottom: 6px;">
+										<span style="margin-right: 10px;"> 外边距(上)</span><el-input-number  v-model="controlData.control.mt" style="margin-bottom: 10px;"/><br/>
+										<span style="margin-right: 10px;"> 外边距(下)</span><el-input-number v-model="controlData.control.mb" style="margin-bottom: 10px;"/><br/>
+										<span style="margin-right: 10px;"> 外边距(左)</span><el-input-number  v-model="controlData.control.ml" style="margin-bottom: 10px;"/><br/>
+										<span style="margin-right: 10px;"> 外边距(右)</span><el-input-number v-model="controlData.control.mr" style="margin-bottom: 10px;"/><br/>
+										<span style="margin-right: 10px;"> 内边距(上)</span><el-input-number  v-model="controlData.control.pt" style="margin-bottom: 10px;"/><br/>
+										<span style="margin-right: 10px;"> 内边距(下)</span><el-input-number v-model="controlData.control.pb" style="margin-bottom: 10px;"/><br/>
+										<span style="margin-right: 10px;"> 内边距(左)</span><el-input-number  v-model="controlData.control.pl" style="margin-bottom: 10px;"/><br/>
+										<span style="margin-right: 10px;"> 内边距(右)</span><el-input-number v-model="controlData.control.pr" style="margin-bottom: 10px;"/><br/>
+									</div>
+								</el-row>
+								<el-row v-else-if="item.type === 'lowcodeImage_float'">
+									<el-switch v-model="controlData.control.floatFlag" style="margin-right: 15px;"/>
+									<el-select
+										v-if="controlData.control.floatFlag"
+										v-model="controlData.control.floatValue"
+										style="width: 150px; height:20px"
+									>
+										<el-option
+											v-for="showModeSelected1 in floatSelectOptions"
+											:key="showModeSelected1.value"
+											:label="showModeSelected1.label"
+											:value="showModeSelected1.value"
+										/>
+									</el-select>
+									
+								</el-row>
+								<el-row v-else-if="item.type === 'associatedForms_hide'">
+									<el-button v-if="controlData.control.hideConditionHtml===''" style="padding-top: 5px;" type="primary" link append-to-body="true" modal="true" @click="associatedFormsHideDialoghandle"  >设置隐藏条件</el-button>
+									<div   style="width:100%; cursor: pointer;"  @click="associatedFormsHideDialoghandle" v-html="controlData.control.hideConditionHtml"></div>
+								</el-row>
+								<el-row v-else-if="item.type === 'associatedForms_form'">
+                                    <div  style="margin-top: 25px;margin-left: -60px;">
+                                        <el-tree-select
+                                            v-model="controlData.control.formid"
+                                            style="width: 260px;"
+                                            :data="customerFormTree[0].children"
+                                            check-strictly
+                                            :render-after-expand="false"
+                                            filterable
+                                            @change="formidChanged"
+                                        />
+                                    </div>
+                                    <!-- <div v-html="controlData.control.formid"></div> -->
+								</el-row> 
+
+                                <el-row v-else-if="item.type === 'associatedForms_dataRange'">
+									<el-button v-if="controlData.control.dataRangeConditionHtml===''" style="padding-top: 5px;" type="primary" link append-to-body="true" modal="true" @click="associatedFormsDataRangeDialoghandle"  >设置数据范围</el-button>
+									<div style="width:100%; cursor: pointer;" @click="associatedFormsDataRangeDialoghandle"  v-html="controlData.control.dataRangeConditionHtml"></div>
+								</el-row>
+
+
+                                <el-row v-else-if="item.type === 'associatedForms_FillRoles'">
+									<el-button  style="padding-top: 5px;" type="primary" link append-to-body="true" modal="true" @click="associatedFormsDataFillRolesDialoghandle"  >设置数据填充规则</el-button>
+								
+								</el-row>
+								<el-input
+                                    v-else
+                                    :type="item.inputStyle"
+                                    v-model="item.value"
+                                    :placeholder="item.placeholder"
+                                    @input="controlChange(item, $event)"
+                                />
+							</el-form-item>
+						</template>
+						<template v-if="controlData.config">
+							<el-form-item label="联动条件"  class="form_cont">
+                                <el-switch v-model="controlData.config.linkKey" />
+                            </el-form-item>
+							<template v-if="controlData.config.linkKey">
+                                <el-form-item  class="form_cont">
+                                    <el-input
+                                    v-model="controlData.config.linkValue"
+                                    type="textarea"
+                                    placeholder="表达式如: $.input>1 $表示为当前表单数据，input为字段标识"
+                                    />
+                                </el-form-item>
+                                <el-form-item
+                                    class="form_cont"
+                                    v-if="
+                                    showHide(
+                                        [
+                                        'input',
+                                        'textarea',
+                                        'radio',
+                                        'checkbox',
+                                        'select',
+                                        'date',
+                                        'switch',
+                                        'number',
+                                        'cascader',
+                                        'slider',
+                                        'datePicker',
+                                        'timePicker',
+                                        'colorPicker',
+                                        'inputNumber',
+                                        'rate',
+                                        'treeSelect'
+                                        ],
+                                        true
+                                    )
+                                    "
+                                    label="联动结果"
+                                >
+                                    <el-radio-group
+                                        v-model="controlData.config.linkResult"
+                                        class="option-radio"
+                                    >
+                                        <el-radio label="hidden">隐藏(默认)</el-radio>
+                                        <el-radio label="disabled">禁用</el-radio>
+                                    </el-radio-group>
+                                </el-form-item>
+                            </template>
+						</template>
+						<template v-if="showHide(['tabs'], true)">
+                            <!-- <div class="h3"><h3>标签配置项</h3></div> -->
+                            <el-divider content-position="left">标签配置项</el-divider>
+                            <el-form-item
+                                class="form_cont"
+                                v-for="(item, index) in controlData.columns"
+                                :key="index"
+                            >
+                                <el-col :span="12">
+                                    <el-input v-model="item.label" placeholder="标签配置项" />
+                                </el-col>
+                                <el-col :span="2" :offset="1">
+                                    <i
+                                        class="icon-del"
+                                        @click="delSelectOption(index as number, 'tabs')"
+                                    ></i>
+                                </el-col>
+                            </el-form-item>
+                            <el-form-item  class="form_cont">
+                                <el-button @click="addSelectOption('tabs')">增加标签</el-button>
+                            </el-form-item>
+                        </template>
+						<!--编号规则设置--->
+						<div v-if="showHide(['serialNumber'],true)">
+							<el-divider content-position="left">编码规则配置</el-divider>
+							<el-form-item label="编码方式" class="form_cont">
+                                <el-switch v-model="controlData.config.automatic" inline-prompt active-text="自动编码" inactive-text="手动编码" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #E6A23C" />
+                            </el-form-item>
+							<div v-if="controlData.config.automatic">
+                                <el-form-item v-for="(item, index) in controlData.config.customRules" :key="index" class="form_cont">
+                                    
+                                    <el-input v-model="item.rule" :placeholder="item.message?item.message:'请输入自定义字符'">
+                                        <template #prepend>
+                                            <el-select
+                                                v-model="item.type"
+                                                style="width: 100px"
+                                                @change="rulesSelectNumChange(item, $event)"
+                                            >
+                                                <el-option
+                                                    v-for="list in state.numberRulesList"
+                                                    :key="list.type"
+                                                    :label="list.label"
+                                                    :value="list.type"
+                                                />
+                                            </el-select>
+                                        </template>
+                                        <template #append>
+                                            <i
+                                            class="icon-del"
+                                            @click="delNumRules(index as number)"
+                                            ></i>
+                                        </template>
+                                    </el-input>
+    
+    
+                                </el-form-item>
+                                <el-form-item class="form_cont">
+                                    <el-button @click="addNumRules">添加规则</el-button>
+                                </el-form-item>
+                            </div>
+						</div>
+						<div
+                            v-if="
+                            showHide(
+                                [
+                                'radio',
+                                'select',
+                                'checkbox',
+                                'cascader',
+                                'inputSlot',
+                                'treeSelect'
+                                ],
+                                true
+                            )
+                            "
+                        >
+							<el-divider content-position="left">选项配置</el-divider>
+							<el-form-item v-if="showHide(['select'], true)" label="添加全部项" class="form_cont">
+                                <el-input
+                                    v-model="controlData.config.addAll"
+                                    placeholder="请输入全部项文案"
+                                />
+                            </el-form-item>
+							<el-form-item label="选项数据源" class="form_cont">
+                                <el-select
+                                    v-model="controlData.config.optionsType"
+                                    @change="controlData.config.optionsFun = ''"
+                                >
+                                    <el-option :value="0" label="固定选项" />
+                                    <el-option :value="1" label="数据源" />
+                                    <el-option :value="2" label="接口字典" />
+                                </el-select>
+                            </el-form-item>
+							<template v-if="controlData.config.optionsType === 0">
+                                <div v-if="controlData.type !== 'cascader'">
+                                    <el-form-item
+                                        v-for="(item, index) in controlData.options"
+                                        :key="index"
+                                        class="form_cont"
+                                    >
+                                        <el-col :span="10">
+                                            <el-input v-model="item.label" placeholder="选项标签" />
+                                        </el-col>
+                                        <el-col :span="10" :offset="1">
+                                            <el-input v-model="item.value" placeholder="选项值" />
+                                        </el-col>
+                                        <el-col :span="2" :offset="1">
+                                            <i
+                                                class="icon-del"
+                                                @click="delSelectOption(index as number)"
+                                            ></i>
+                                        </el-col>
+                                    </el-form-item>
+                                </div>
+                                <el-form-item class="form_cont">
+                                    <el-button @click="addSelectOption">{{ controlData.type === 'cascader' ? '编辑' : '新增' }}</el-button>
+                                </el-form-item>
+                            </template>
+							<template v-else>
+                                <el-form-item class="form_cont">
+                                    <el-input
+                                        v-model="controlData.config.optionsFun"
+                                        :placeholder="
+                                            getOptionPlaceholder(controlData.config.optionsType)
+                                        "
+                                    >
+                                        <template
+                                            v-if="controlData.config.optionsType === 1"
+                                            #prepend
+                                        >
+                                            <el-select
+                                                v-model="controlData.config.method"
+                                                style="width: 80px"
+                                            >
+                                                <el-option label="get" value="get" />
+                                                <el-option label="post" value="post" />
+                                            </el-select>
+                                        </template>
+                                    </el-input>
+                                </el-form-item>
+                                <template v-if="controlData.config.optionsType === 1">
+                                    <el-form-item label="指定label属性值" class="form_cont">
+                                        <el-input
+                                            v-model="controlData.config.label"
+                                            placeholder="返回数据中没有label时可设置"
+                                        />
+                                    </el-form-item>
+                                    <el-form-item label="指定value属性值" class="form_cont">
+                                        <el-input
+                                            v-model="controlData.config.value"
+                                            placeholder="返回数据中没有value时可设置"
+                                        />
+                                    </el-form-item>
+                                </template>
+                                <el-form-item v-if="controlData.config.optionsType === 1" class="form_cont">
+                                    <el-button
+                                        @click="
+                                            optionsEvent(
+                                            'optionsParams',
+                                            '请求前处理事件，参数(data,route,form) data请求参数,route页面路由,form表单值'
+                                            )
+                                        "
+                                    >beforeRequest</el-button>
+                                    <el-button
+                                        @click="
+                                            optionsEvent(
+                                            'optionsResult',
+                                            '请求返回结束处理；，也可为字符串，如opt=formatTest'
+                                            )
+                                        "
+                                    >afterResponse</el-button>
+                                </el-form-item>
+                            </template>
+                            <el-form-item label="尝试转换value值为" class="form_cont">
+                                <el-select
+                                    v-model="controlData.config.transformData"
+                                    placeholder="默认为number"
+                                >
+                                    <el-option value="none">不转换</el-option>
+                                    <el-option value="number">number</el-option>
+                                    <el-option value="string">string</el-option>
+                                </el-select>
+                            </el-form-item>
+						</div>
+						<template
+                            v-if="
+								!state.isSearch &&
+								showHide([
+									'txt',
+									'title',
+									'table',
+									'grid',
+									'tabs',
+									'card',
+									'switch',
+									'gridChild',
+									'tableColumn',
+									'divider',
+									'div',
+									'button'
+								])
+                            "
+                        >
+							<el-divider content-position="left">校验设置</el-divider>
+							<div v-if="showHide(['input', 'password', 'component'], true)">
+                                <el-form-item
+                                    v-for="(item, index) in controlData.customRules"
+                                    :key="item.type"
+                                    class="form_cont"
+                                >
+                                    <el-input v-model="item.message" placeholder="校验提示信息">
+                                        <template #prepend>
+                                            <el-select
+                                            v-model="item.type"
+                                            style="width: 80px"
+                                            @change="rulesSelectChange(item, $event)"
+                                            >
+                                            <el-option
+                                                v-for="list in state.customRulesList"
+                                                :key="list.type"
+                                                :label="list.label"
+                                                :value="list.type"
+                                            />
+                                            </el-select>
+                                        </template>
+                                        <template #append>
+                                            <i
+                                            class="icon-del"
+                                            @click="delAddRules(index as number)"
+                                            ></i>
+                                        </template>
+                                    </el-input>
+                                    <el-input
+                                        v-if="item.type === 'rules'"
+                                        v-model="item.rules"
+                                        placeholder="正则表达式"
+                                    />
+                                    <el-input
+                                        v-if="item.type === 'methods'"
+                                        v-model="item.methods"
+                                        placeholder="方法名称，此方法仅适用于导出vue文件"
+                                    />
+                                </el-form-item>
+                                <el-form-item class="form_cont">
+                                    <el-button @click="addRulesFast">快速添加</el-button>
+                                    <el-button @click="addRules(state.tooltip.rules)"
+                                    >编写校验规则
+                                        <el-tooltip
+                                            :content="state.tooltip.rules"
+                                            placement="top"
+                                            raw-content
+                                        >
+                                            <el-icon>
+                                                <QuestionFilled />
+                                            </el-icon>
+                                        </el-tooltip>
+                                    </el-button>
+                                </el-form-item>
+                            </div>
+							<el-form-item class="form_cont" v-else>
+								<el-checkbox
+									:model-value="checkboxRequired"
+									@change="requiredChange"
+									>必填
+								</el-checkbox>
+								<el-input
+									v-if="controlData.item?.rules && controlData.item?.rules[0]"
+									v-model="controlData.item.rules[0].message"
+									placeholder="自定义必填错误提示"
+								/>
+                            </el-form-item>
+						</template>
+						<el-divider content-position="left">其他属性</el-divider>
+						<div v-if="showHide(['grid', 'card', 'gridChild', 'divider', 'div'])"  class="form_cont">
+                            
+    
+                            <el-button
+                            size="small"
+                            @click="openAttrDialog('', state.tooltip.props)"
+                            >编辑属性
+                            <el-tooltip :content="state.tooltip.props" placement="top">
+                                <el-icon>
+                                <QuestionFilled />
+                                </el-icon>
+                            </el-tooltip>
+                            </el-button>
+                        </div>
+                        <el-divider content-position="left">高级属性</el-divider>
+                        
+                        <LayoutPage v-if="cssIsShouw(attrList)"  v-model:styles-val="controlDataStyls" :place="controlData.type" />
+    
+
+
+
+
+
+
+
+					</el-form>
+				</el-scrollbar>
+			</el-tab-pane>
+			<el-tab-pane label="表单配置" name="second">
+				<el-scrollbar class="formAttributeBox">
+					<el-form size="small" class="form">
+						<el-divider content-position="left">基础配置</el-divider>
+						<el-form-item  class="form_cont">
+							<template #label>
+								归属分组
+							</template>
+							<el-select id="groupForm" v-model="formConfig.groupKey" placeholder="Select" ref="groupForm">
+								<el-option v-for="item in formGroup.list" :key="item.idStr" :label="item.title" :value="item.idStr" />
+								<p v-if="loadingmore">加载中</p>
+								<p v-if="loadingnomore">无数据</p>
+							</el-select>
+						</el-form-item>
+						<el-form-item
+                            v-for="(item, index) in formControlProject.filter(item => !item.hide)"
+                            :label="item.label"
+                            :key="index"
+                            class="form_cont"
+                        >
+							<el-select
+                                v-if="item.type === 'select'"
+                                v-model="item.value"
+                                :filterable="item.key === 'class'"
+                                :allow-create="item.key === 'class'"
+                                :placeholder="item.placeholder"
+                                :clearable="item.clearable"
+                                @change="formAttrChange(item)"
+                            >
+                                <el-option        
+                                    v-for="opt in item.options"
+                                    :key="opt.label || opt.name"
+                                    :label="opt.label || opt.name"
+                                    :value="formatNumber(opt.value ?? opt.id)"
+                                />
+                            </el-select>
+							<el-switch
+                                v-else-if="item.type === 'switch'"
+                                v-model="item.value"
+                                @input="formAttrChange(item)"
+                            />
+							<el-input
+                                v-else
+                                v-model="item.value"
+                                :placeholder="item.placeholder"
+                                :disabled="isNotWrite(item)"
+                                @input="formAttrChange(item)"
+                            />
+						</el-form-item>
+						<el-form-item  class="form_cont">
+							<template #label>
+								表单图标
+							</template>
+							<el-upload
+								class="avatar-uploader"
+								:action="imgUploadApiUrl"
+								:show-file-list="false"
+								:on-success="handleAvatarSuccess"
+								:before-upload="beforeAvatarUpload"
+							>
+								<img v-if="formConfig.imageUrl" :src="formConfig.imageUrl" class="avatar" />
+								<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
+							</el-upload>
+						</el-form-item>
+						<template v-if="!state.isSearch">
+							<el-divider content-position="left">接口数据事件</el-divider>
+							<el-form-item v-if="!state.isSearch" class="form_cont">
+                                <template #label >
+                                    添加时获取请求
+                                    <el-tooltip
+                                        content="新增表单数据时，从接口获取新增初始数据"
+                                        placement="top"
+                                    >
+                                        <el-icon><QuestionFilled /></el-icon>
+                                    </el-tooltip>
+                                </template>
+                                <el-switch
+                                    v-model="formConfig.addLoad"
+                                    @change="formAttrChange({ key: 'addLoad', path: 'config' }, $event)"
+                                />
+                            </el-form-item>
+							<el-form-item label="新增数据保存url" class="form_cont">
+                                <el-input
+                                    v-model="formConfig.addUrl"
+                                    placeholder="表单提交的url，非特殊不需要设置"
+                                />
+                            </el-form-item>
+                            <el-form-item label="修改数据保存url" class="form_cont">
+                                <el-input
+                                    v-model="formConfig.editUrl"
+                                    placeholder="修改提交的url，非特殊不需要设置"
+                                />
+                            </el-form-item>
+                            <el-form-item label="获取表单数据url" class="form_cont">
+                                <el-input
+                                    v-model="formConfig.requestUrl"
+                                    placeholder="获取表单数据url，非特殊不需要设置"
+                                />
+                            </el-form-item>
+							<el-form-item class="event-btn form_cont">
+								<el-button
+                                    @click="
+                                    eventClick(
+                                        'beforeRequest',
+                                        '获取表单初始数据前事件，可修改请求参数'
+                                    )
+                                    "
+                                >
+									beforeRequest
+                                </el-button>
+								<el-button
+                                    @click="
+                                    eventClick(
+                                        'afterResponse',
+                                        '获取表单初始数据后事件，可对请求返回数据进行处理；也可为字符串，如opt=formatTest'
+                                    )
+                                    "
+                                    >afterResponse
+                                </el-button>
+                                <el-button
+                                    @click="
+                                    eventClick(
+                                        'beforeSubmit',
+                                        '表单数据提交前事件，可对提交数据进行处理；也可为字符串，如opt=formatTest'
+                                    )
+                                    "
+                                    >beforeSubmit
+                                </el-button>
+                                <el-button
+                                    @click="eventClick('afterSubmit', '表单数据提交成功事件')"
+                                    >afterSubmit
+                                </el-button>
+                                <el-button
+                                    @click="
+                                    eventClick(
+                                        'change',
+                                        '表单组件值改变事件。当表单某值改变时，可修改其他组件的值；也可为字符串，如opt=formChange,字符串即为/utils/formChangeValue(name,model,key)中的key值'
+                                    )
+                                    "
+                                    >表单组件改变事件change
+                                </el-button>
+							</el-form-item>
+						</template>
+						<el-divider content-position="left">表单整体布局</el-divider>
+						<el-form-item label="组件尺寸" class="form_cont">
+                            <el-radio-group v-model="formData.size">
+                                <el-radio-button label="large">大</el-radio-button>
+                                <el-radio-button label="default">适中</el-radio-button>
+                                <el-radio-button label="small">小</el-radio-button>
+                            </el-radio-group>
+                        </el-form-item>
+						<el-form-item label="表单样式名称" class="form_cont">
+							<el-select
+                                v-model="formData.class"
+                                class="m-2"
+                                placeholder="额外添加的表单class类名"
+                            >
+                                <el-option
+									v-for="item in optionsCss"
+									:key="item.value"
+									:label="item.label"
+									:value="item.value"
+                                />
+                            </el-select>
+						</el-form-item>
+						<el-form-item label="行内表单模式" class="form_cont">
+                            <el-switch v-model="formData.inline" active-text="开启" inactive-text="关闭" />
+                        </el-form-item>
+						<el-form-item label="标签宽度" class="form_cont">
+                            <el-input v-model="formData.labelWidth" clearable placeholder="表单标签宽度">
+                                <template #suffix >PX</template>
+                            </el-input>
+                        </el-form-item>
+						<el-form-item label="标签后缀" class="form_cont">
+                            <el-input v-model="formData.labelSuffix" placeholder="表单标签后缀" />
+                        </el-form-item>
+						<el-form-item label="表单标签对齐方式" class="form_cont">
+                            <el-radio-group v-model="formData.labelPosition">
+                                <el-radio-button label="left">左</el-radio-button>
+                                <el-radio-button label="right">右</el-radio-button>
+                                <el-radio-button label="top">上</el-radio-button>
+                            </el-radio-group>
+                        </el-form-item>
+						<el-form-item label="必填项星号位置" class="form_cont">
+                            <el-radio-group v-model="formData.requireAsteriskPosition">
+                                <el-radio-button label="left">左</el-radio-button>
+                                <el-radio-button label="right">右</el-radio-button>
+                            </el-radio-group>
+                        </el-form-item>
+						<el-form-item label="是否隐藏星号" class="form_cont">
+                            <el-switch v-model="formData.hideRequiredAsterisk" active-text="隐藏" inactive-text="显示" style="--el-switch-on-color: #ff4949; --el-switch-off-color: #13ce66" />
+                        </el-form-item>
+						<el-form-item label="校验错误信息" class="form_cont">
+                            <el-switch v-model="formData.showMessage" active-text="显示" inactive-text="隐藏" />
+                        </el-form-item>
+                        <el-form-item label="以行内形式展示校验信息" class="form_cont">
+                            <el-switch v-model="formData.inlineMessage" active-text="显示" inactive-text="隐藏" />
+                        </el-form-item>
+                        <el-form-item label="是否显示校验结果反馈图标" class="form_cont">
+                            <el-switch v-model="formData.statusIcon" active-text="显示" inactive-text="隐藏" />
+                        </el-form-item>
+						<el-divider content-position="left">表单功能补充</el-divider>
+						<el-form-item class="form_cont">
+                            <el-button @click="editFormStyle(state.tooltip.css)">
+                                编辑表单样式
+                                <el-tooltip :content="state.tooltip.css" placement="top">
+                                    <el-icon>
+                                        <QuestionFilled />
+                                    </el-icon>
+                                </el-tooltip>
+                            </el-button>
+                            <el-button @click="editFormDict(state.tooltip.dict)">
+                                设置数据字典
+                                <el-tooltip :content="state.tooltip.dict" placement="top">
+                                    <el-icon>
+                                        <QuestionFilled />
+                                    </el-icon>
+                                </el-tooltip>
+                            </el-button>
+                        </el-form-item>
+					</el-form>
+				</el-scrollbar>
+			</el-tab-pane>
+		</el-tabs>
+	</div>
+</template>
+<style  lang='scss' scoped>
+.formAttributeBox{
+	height: calc(100vh - 105px)
+}
+li::before {
+    content: "";
+    display: inline-block;
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    background-color: gray;
+    margin-right: 5px;
+    margin-left: 5px;
+    margin-bottom: 3.5px;
+}
+
+.sidebar-tools .el-tabs__content{
+    padding: 0;
+}
+.el-collapse-item__header {
+    padding-left: 10px;
+    background-color: rgb(229, 229, 229);
+}
+.el-collapse-item__header{
+    padding-left: 10px;
+    background-color: rgb(229, 229, 229);
+}
+
+.form_cont{
+    padding: 0 10px;
+}
+.avatar-uploader{
+	width: 100px;
+	height: 100px;
+	.avatar{
+		width: 100px;
+		height: 100px;
+	}
+	.avatar-uploader-icon{
+		width: 100px;
+		height: 100px;
+	}
+}
+.custom-tree-node {
+	flex: 1;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	font-size: 14px;
+	padding-right: 8px;
+}
+.custom-tree-node:hover{
+	background-color:antiquewhite;
+}
+
+.associatedFormsHideDialogMain7{
+	display: flex;
+}
+.el-main{
+	--el-main-padding: 5px
+}
+</style>
diff --git a/src/components/DesignForm/rule/numberRules.ts b/src/components/DesignForm/rule/numberRules.ts
new file mode 100644
index 000000000..3c7283809
--- /dev/null
+++ b/src/components/DesignForm/rule/numberRules.ts
@@ -0,0 +1,33 @@
+/**
+@ 作者: 秦东
+@ 时间: 2024-05-10 09:38:51
+@ 功能: 数字规则列表
+*/
+interface NumberValidateTypes {
+	type: string
+	label: string
+	msg: string
+}
+const NumberValidateConfig: NumberValidateTypes[] = [
+	{
+		type: 'time',
+		label: '时间',
+		msg:'请选择时间格式'
+	},
+	{
+		type: 'text',
+		label: '自定义字符',
+		msg:'请输入自定义字符'
+	},
+	{
+		type: 'serialnumber',
+		label: '流水序号',
+		msg:'流水号起始值'
+	},
+	{
+		type: 'randomnumber',
+		label: '随机数',
+		msg:'请输入随机数位数'
+	}
+]
+export default NumberValidateConfig
diff --git a/src/components/DesignForm/validateApp.ts b/src/components/DesignForm/validateApp.ts
new file mode 100644
index 000000000..c2478bad1
--- /dev/null
+++ b/src/components/DesignForm/validateApp.ts
@@ -0,0 +1,104 @@
+// 快速添加 内置校验规则
+interface ValidateTypes {
+	type: string
+	label: string
+	regExp?: RegExp
+	message?: string
+}
+const validateConfig: ValidateTypes[] = [
+	{
+	  type: 'required',
+	  label: '必填',
+	  regExp: /^\s*$/,
+	  message: '必填项'
+	},
+	{
+	  type: 'mobile',
+	  label: '手机号码',
+	  regExp: /^0{0,1}(13[0-9]|15[7-9]|153|156|18[7-9])[0-9]{8}$/,
+	  message: '请输入手机号码'
+	},
+	{
+	  type: 'tel',
+	  label: '固话',
+	  regExp: /^0\d{2,3}-\d{7,8}$/,
+	  message: '请输入固定电话号码'
+	},
+	{
+	  type: 'phone',
+	  label: '固话或手机',
+	  regExp: /^((0\d{2,3}(-?)\d{7,8})|(1[3456789]\d{9}))$/,
+	  message: '请输入固定电话号码或手机号'
+	},
+	{
+	  type: 'email',
+	  label: '邮箱',
+	  regExp: /^[a-z0-9A-Z._%-]+@([a-z0-9A-Z-]+\.)+[a-zA-Z]{2,4}$/,
+	  message: '请输入邮箱地址'
+	},
+	{
+	  type: 'int',
+	  label: '正整数',
+	  regExp: /^[0-9]*[1-9][0-9]*$/,
+	  message: '请输入正整数'
+	},
+	{
+	  type: 'number',
+	  label: '数字',
+	  regExp: /^\d+(\.\d+)?$/,
+	  message: '请输入数字'
+	},
+	{
+	  type: 'money',
+	  label: '金额',
+	  regExp: /^[0-9]+\.?[0-9]{0,2}$/,
+	  message: '请输入正确的金额，最多两位小数'
+	},
+	{
+	  type: 'card',
+	  label: '身份证',
+	  regExp:
+		/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
+	  message: '请输入身份证号'
+	},
+	{
+	  type: 'cn',
+	  label: '中文',
+	  regExp: /[\u4e00-\u9fa5]+/,
+	  message: '请输入中文'
+	},
+	{
+	  type: 'numberLetter',
+	  label: '数字字母',
+	  regExp: /[0-9a-zA-Z]$/,
+	  message: '请输入数字或字母'
+	},
+	{
+	  type: 'url',
+	  label: '网址',
+	  regExp: /^https?:\/\/((.)+(\.)?)*(:\d+)?(\/((\.)?(\?)?=?&?.(\?)?)*)*$/,
+	  message: '请输入网址'
+	},
+	{
+	  type: 'longitude',
+	  label: '经度',
+	  regExp: /^[-+]?(0?\d{1,2}\.\d{1,10}|1[0-7]?\d\.\d{1,10}|180\.0{1,10})$/,
+	  message: '请输入正确的经度'
+	},
+	{
+	  type: 'latitude',
+	  label: '纬度',
+	  regExp: /^[-+]?([0-8]?\d{1}\.\d{1,10}|90\.0{1,10})$/,
+	  message: '请输入正确的纬度'
+	},
+	{
+		type: 'rules',
+		label: '自定义正则',
+		message:""
+	},
+	{
+		type: 'methods',
+		label: '自定义方法'
+	}
+]
+export default validateConfig
diff --git a/src/styles/workflowcss/workflow.css b/src/styles/workflowcss/workflow.css
new file mode 100644
index 000000000..9b5a0e6cf
--- /dev/null
+++ b/src/styles/workflowcss/workflow.css
@@ -0,0 +1,1733 @@
+body {
+  background: #eee;
+}
+
+@font-face {
+  font-family: Chinese Quote;
+  src: local("PingFang SC"), local("SimSun");
+  unicode-range: u+2018, u+2019, u+201c, u+201d;
+}
+
+body,
+html {
+  width: 100%;
+  /* height: 100% */
+}
+
+input::-ms-clear,
+input::-ms-reveal {
+  display: none;
+}
+
+*,
+:after,
+:before {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: sans-serif;
+  line-height: 1.15;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  -ms-overflow-style: scrollbar;
+  -webkit-tap-highlight-color: transparent;
+}
+
+@-ms-viewport {
+  width: device-width;
+}
+
+article,
+aside,
+dialog,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section {
+  display: block;
+}
+
+body {
+  margin: 0;
+  font-family: Chinese Quote, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  font-variant: tabular-nums;
+  line-height: 1.5;
+  color: rgba(0, 0, 0, 0.65);
+  background-color: #fff;
+}
+
+[tabindex="-1"]:focus {
+  outline: none !important;
+}
+
+hr {
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-top: 0;
+  margin-bottom: .5em;
+  color: rgba(0, 0, 0, 0.85);
+  font-weight: 500;
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 1em;
+}
+
+abbr[data-original-title],
+abbr[title] {
+  text-decoration: underline;
+  text-decoration: underline dotted;
+  cursor: help;
+  border-bottom: 0;
+}
+
+address {
+  margin-bottom: 1em;
+  font-style: normal;
+  line-height: inherit;
+}
+
+input[type=number],
+input[type=password],
+input[type=text],
+textarea {
+  -webkit-appearance: none;
+}
+
+dl,
+ol,
+ul {
+  margin-top: 0;
+  margin-bottom: 1em;
+}
+
+ol ol,
+ol ul,
+ul ol,
+ul ul {
+  margin-bottom: 0;
+}
+
+dt {
+  font-weight: 500;
+}
+
+dd {
+  margin-bottom: .5em;
+  margin-left: 0;
+}
+
+blockquote {
+  margin: 0 0 1em;
+}
+
+dfn {
+  font-style: italic;
+}
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+small {
+  font-size: 80%;
+}
+
+sub,
+sup {
+  position: relative;
+  font-size: 75%;
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -.25em;
+}
+
+sup {
+  top: -.5em;
+}
+
+a {
+  color: #1890ff;
+  background-color: transparent;
+  text-decoration: none;
+  outline: none;
+  cursor: pointer;
+  transition: color .3s;
+  -webkit-text-decoration-skip: objects;
+}
+
+a:focus {
+  text-decoration: underline;
+  text-decoration-skip: auto;
+}
+
+a:hover {
+  color: #40a9ff;
+}
+
+a:active {
+  color: #096dd9;
+}
+
+a:active,
+a:hover {
+  outline: 0;
+  text-decoration: none;
+}
+
+code,
+kbd,
+pre,
+samp {
+  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
+  font-size: 1em;
+}
+
+pre {
+  margin-top: 0;
+  margin-bottom: 1em;
+  overflow: auto;
+}
+
+figure {
+  margin: 0 0 1em;
+}
+
+img {
+  vertical-align: middle;
+  border-style: none;
+}
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+[role=button],
+a,
+area,
+button,
+input:not([type=range]),
+label,
+select,
+summary,
+textarea {
+  touch-action: manipulation;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+caption {
+  padding-top: .75em;
+  padding-bottom: .3em;
+  color: rgba(0, 0, 0, 0.45);
+  text-align: left;
+  caption-side: bottom;
+}
+
+th {
+  text-align: inherit;
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  color: inherit;
+}
+
+button,
+input {
+  overflow: visible;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+[type=reset],
+[type=submit],
+button,
+html [type=button] {
+  -webkit-appearance: button;
+}
+
+[type=button]::-moz-focus-inner,
+[type=reset]::-moz-focus-inner,
+[type=submit]::-moz-focus-inner,
+button::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+input[type=checkbox],
+input[type=radio] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+input[type=date],
+input[type=datetime-local],
+input[type=month],
+input[type=time] {
+  -webkit-appearance: listbox;
+}
+
+textarea {
+  overflow: auto;
+  resize: vertical;
+}
+
+fieldset {
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+legend {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  padding: 0;
+  margin-bottom: .5em;
+  font-size: 1.5em;
+  line-height: inherit;
+  color: inherit;
+  white-space: normal;
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+[type=number]::-webkit-inner-spin-button,
+[type=number]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+[type=search] {
+  outline-offset: -2px;
+  -webkit-appearance: none;
+}
+
+[type=search]::-webkit-search-cancel-button,
+[type=search]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-file-upload-button {
+  font: inherit;
+  -webkit-appearance: button;
+}
+
+output {
+  display: inline-block;
+}
+
+summary {
+  display: list-item;
+}
+
+template {
+  display: none;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+mark {
+  padding: .2em;
+  background-color: #feffe6;
+}
+
+::selection {
+  background: #1890ff;
+  color: #fff;
+}
+
+.clearfix {
+  zoom: 1;
+}
+
+.clearfix:after,
+.clearfix:before {
+  content: "";
+  display: table;
+}
+
+.clearfix:after {
+  clear: both;
+}
+
+@font-face {
+  font-family: anticon;
+  font-display: fallback;
+  src: url("https://at.alicdn.com/t/font_148784_v4ggb6wrjmkotj4i.eot");
+  src: url("https://at.alicdn.com/t/font_148784_v4ggb6wrjmkotj4i.woff") format("woff"), url("https://at.alicdn.com/t/font_148784_v4ggb6wrjmkotj4i.ttf") format("truetype"), url("https://at.alicdn.com/t/font_148784_v4ggb6wrjmkotj4i.svg#iconfont") format("svg");
+}
+
+.anticon {
+  display: inline-block;
+  font-style: normal;
+  vertical-align: baseline;
+  text-align: center;
+  text-transform: none;
+  line-height: 1;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.anticon:before {
+  display: block;
+  font-family: anticon !important;
+}
+
+.anticon-close:before {
+  content: "\E633";
+}
+
+.anticon-right:before {
+  content: "\E61F";
+}
+
+.anticon-exclamation-circle {
+  color: #f25643;
+}
+
+.anticon-exclamation-circle:before {
+  content: "\E62C";
+}
+
+.anticon-left:before {
+  content: "\E620";
+}
+
+.anticon-close-circle:before {
+  content: "\E62E";
+}
+
+.ant-btn {
+  line-height: 1.5;
+  display: inline-block;
+  font-weight: 400;
+  text-align: center;
+  touch-action: manipulation;
+  cursor: pointer;
+  background-image: none;
+  border: 1px solid transparent;
+  white-space: nowrap;
+  padding: 0 15px;
+  font-size: 14px;
+  border-radius: 4px;
+  height: 32px;
+  user-select: none;
+  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  position: relative;
+  color: rgba(0, 0, 0, 0.65);
+  background-color: #fff;
+  border-color: #d9d9d9;
+}
+
+.ant-btn > .anticon {
+  line-height: 1;
+}
+
+.ant-btn,
+.ant-btn:active,
+.ant-btn:focus {
+  outline: 0;
+}
+
+.ant-btn > a:only-child {
+  color: currentColor;
+}
+
+.ant-btn > a:only-child:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: transparent;
+}
+
+.ant-btn:focus,
+.ant-btn:hover {
+  color: #40a9ff;
+  background-color: #fff;
+  border-color: #40a9ff;
+}
+
+.ant-btn:focus > a:only-child,
+.ant-btn:hover > a:only-child {
+  color: currentColor;
+}
+
+.ant-btn:focus > a:only-child:after,
+.ant-btn:hover > a:only-child:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: transparent;
+}
+
+.ant-btn.active,
+.ant-btn:active {
+  color: #096dd9;
+  background-color: #fff;
+  border-color: #096dd9;
+}
+
+.ant-btn.active > a:only-child,
+.ant-btn:active > a:only-child {
+  color: currentColor;
+}
+
+.ant-btn.active > a:only-child:after,
+.ant-btn:active > a:only-child:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: transparent;
+}
+
+.ant-btn.active,
+.ant-btn:active,
+.ant-btn:focus,
+.ant-btn:hover {
+  background: #fff;
+  text-decoration: none;
+}
+
+.ant-btn > i,
+.ant-btn > span {
+  pointer-events: none;
+}
+
+.ant-btn:before {
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  bottom: -1px;
+  right: -1px;
+  background: #fff;
+  opacity: .35;
+  content: "";
+  border-radius: inherit;
+  z-index: 1;
+  transition: opacity .2s;
+  pointer-events: none;
+  display: none;
+}
+
+.ant-btn .anticon {
+  transition: margin-left 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+
+.ant-btn:active > span,
+.ant-btn:focus > span {
+  position: relative;
+}
+
+.ant-btn > .anticon + span,
+.ant-btn > span + .anticon {
+  margin-left: 8px;
+}
+
+.fd-nav-container {
+  display: inline-block;
+  position: relative;
+}
+
+.fd-nav-container .ghost-bar {
+  position: absolute;
+  width: 150px;
+  height: 100%;
+  left: 0;
+  background: #1583f2;
+  -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+
+.fd-nav-container .ghost-bar:after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  margin-left: -5px;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 5px 6px;
+  border-color: transparent transparent #f6f6f6;
+}
+
+.fd-nav-item {
+  position: relative;
+  cursor: pointer;
+  display: inline-block;
+  line-height: 60px;
+  width: 150px;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.fd-nav-item .order-num {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  line-height: 20px;
+  border: 1px solid #fff;
+  border-radius: 50%;
+  margin-right: 6px;
+  -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+
+.fd-nav-item.active .order-num {
+  color: #1583f2;
+  background: #fff;
+}
+
+.ant-input {
+  font-family: Chinese Quote, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-variant: tabular-nums;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  position: relative;
+  display: inline-block;
+  padding: 4px 11px;
+  width: 100%;
+  height: 32px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: rgba(0, 0, 0, 0.65);
+  background-color: #fff;
+  background-image: none;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  transition: all .3s;
+}
+
+.ant-input::-moz-placeholder {
+  color: #bfbfbf;
+  opacity: 1;
+}
+
+.ant-input:-ms-input-placeholder {
+  color: #bfbfbf;
+}
+
+.ant-input::-webkit-input-placeholder {
+  color: #bfbfbf;
+}
+
+.ant-input:focus,
+.ant-input:hover {
+  border-color: #40a9ff;
+  border-right-width: 1px !important;
+}
+
+.ant-input:focus {
+  outline: 0;
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+}
+
+textarea.ant-input {
+  max-width: 100%;
+  height: auto;
+  vertical-align: bottom;
+  transition: all .3s, height 0s;
+  min-height: 32px;
+}
+
+a,
+abbr,
+acronym,
+address,
+applet,
+article,
+aside,
+audio,
+b,
+big,
+blockquote,
+body,
+canvas,
+caption,
+center,
+cite,
+code,
+dd,
+del,
+details,
+dfn,
+div,
+dl,
+dt,
+em,
+fieldset,
+figcaption,
+figure,
+footer,
+form,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+header,
+hgroup,
+html,
+i,
+iframe,
+img,
+ins,
+kbd,
+label,
+legend,
+li,
+mark,
+menu,
+nav,
+object,
+ol,
+p,
+pre,
+q,
+s,
+samp,
+section,
+small,
+span,
+strike,
+strong,
+sub,
+summary,
+sup,
+table,
+tbody,
+td,
+tfoot,
+th,
+thead,
+time,
+tr,
+tt,
+u,
+ul,
+var,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+*,
+:after,
+:before {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+html {
+  font-family: sans-serif;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+}
+
+body,
+html {
+  font-size: 14px;
+}
+
+body {
+  font-family: Microsoft Yahei, Lucida Grande, Lucida Sans Unicode, Helvetica, Arial, Verdana, sans-serif;
+  line-height: 1.6;
+  background-color: #fff;
+  position: static !important;
+  -webkit-tap-highlight-color: transparent;
+}
+
+ol,
+ul {
+  list-style-type: none;
+}
+
+b,
+strong {
+  font-weight: 700;
+}
+
+img {
+  border: 0;
+}
+
+button,
+input,
+select,
+textarea {
+  font-family: inherit;
+  font-size: 100%;
+  margin: 0;
+}
+
+textarea {
+  overflow: auto;
+  vertical-align: top;
+  -webkit-appearance: none;
+}
+
+button,
+input {
+  line-height: normal;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+button,
+html input[type=button],
+input[type=reset],
+input[type=submit] {
+  -webkit-appearance: button;
+  cursor: pointer;
+}
+
+input[type=search] {
+  -webkit-appearance: textfield;
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box;
+  box-sizing: content-box;
+}
+
+input[type=search]::-webkit-search-cancel-button,
+input[type=search]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+table {
+  width: 100%;
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+
+table,
+td,
+th {
+  border: 0;
+}
+
+td,
+th {
+  padding: 0;
+  vertical-align: top;
+}
+
+th {
+  font-weight: 700;
+  text-align: left;
+}
+
+thead th {
+  white-space: nowrap;
+}
+
+a {
+  text-decoration: none;
+  cursor: pointer;
+  color: #3296fa;
+}
+
+a:active,
+a:hover {
+  outline: 0;
+  color: #3296fa;
+}
+
+small {
+  font-size: 80%;
+}
+
+body,
+html {
+  font-size: 12px !important;
+  color: #191f25 !important;
+  background: #f6f6f6 !important;
+}
+
+.wrap {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: 100%;
+}
+
+@font-face {
+  font-family: IconFont;
+  src: url("//at.alicdn.com/t/font_135284_ph2thxxbzgf.eot");
+  src: url("//at.alicdn.com/t/font_135284_ph2thxxbzgf.eot?#iefix") format("embedded-opentype"), url("//at.alicdn.com/t/font_135284_ph2thxxbzgf.woff") format("woff"), url("//at.alicdn.com/t/font_135284_ph2thxxbzgf.ttf") format("truetype"), url("//at.alicdn.com/t/font_135284_ph2thxxbzgf.svg#IconFont") format("svg");
+}
+
+.iconfont {
+  font-family: IconFont !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -webkit-text-stroke-width: .2px;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.fd-nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 997;
+  width: 100%;
+  height: 60px;
+  font-size: 14px;
+  color: #fff;
+  background: #3296fa;
+  display: flex;
+  align-items: center;
+}
+
+.fd-nav > * {
+  flex: 1;
+  width: 100%;
+}
+
+.fd-nav .fd-nav-left {
+  display: -webkit-box;
+  display: flex;
+  align-items: center;
+}
+
+.fd-nav .fd-nav-center {
+  flex: none;
+  width: 600px;
+  text-align: center;
+}
+
+.fd-nav .fd-nav-right {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  text-align: right;
+}
+
+.fd-nav .fd-nav-back {
+  display: inline-block;
+  width: 60px;
+  height: 60px;
+  font-size: 22px;
+  border-right: 1px solid #1583f2;
+  text-align: center;
+  cursor: pointer;
+}
+
+.fd-nav .fd-nav-back:hover {
+  background: #5af;
+}
+
+.fd-nav .fd-nav-back:active {
+  background: #1583f2;
+}
+
+.fd-nav .fd-nav-back .anticon {
+  line-height: 60px;
+}
+
+.fd-nav .fd-nav-title {
+  width: 0;
+  flex: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  padding: 0 15px;
+}
+
+.fd-nav a {
+  color: #fff;
+  margin-left: 12px;
+}
+
+.fd-nav .button-publish {
+  min-width: 80px;
+  margin-left: 4px;
+  margin-right: 15px;
+  color: #3296fa;
+  border-color: #fff;
+}
+
+.fd-nav .button-publish.ant-btn:focus,
+.fd-nav .button-publish.ant-btn:hover {
+  color: #3296fa;
+  border-color: #fff;
+  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.3);
+}
+
+.fd-nav .button-publish.ant-btn:active {
+  color: #3296fa;
+  background: #d6eaff;
+  box-shadow: none;
+}
+
+.fd-nav .button-preview {
+  min-width: 80px;
+  margin-left: 16px;
+  margin-right: 4px;
+  color: #fff;
+  border-color: #fff;
+  background: transparent;
+}
+
+.fd-nav .button-preview.ant-btn:focus,
+.fd-nav .button-preview.ant-btn:hover {
+  color: #fff;
+  border-color: #fff;
+  background: #59acfc;
+}
+
+.fd-nav .button-preview.ant-btn:active {
+  color: #fff;
+  border-color: #fff;
+  background: #2186ef;
+}
+
+.fd-nav-content {
+  position: fixed;
+  top: 60px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding-bottom: 30px;
+}
+
+.fd-nav-content-new {
+  position: relative;
+  width: initial;
+  height: calc(100% - 60px);
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding-bottom: 30px;
+}
+
+.error-modal-desc {
+  font-size: 13px;
+  color: rgba(25, 31, 37, 0.56);
+  line-height: 22px;
+  margin-bottom: 14px;
+}
+
+.error-modal-list {
+  height: 200px;
+  overflow-y: auto;
+  margin-right: -25px;
+  padding-right: 25px;
+}
+
+.error-modal-item {
+  padding: 10px 20px;
+  line-height: 21px;
+  background: #f6f6f6;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+  border-radius: 4px;
+}
+
+.error-modal-item-label {
+  flex: none;
+  font-size: 15px;
+  color: rgba(25, 31, 37, 0.56);
+  padding-right: 10px;
+}
+
+.error-modal-item-content {
+  text-align: right;
+  flex: 1;
+  font-size: 13px;
+  color: #191f25;
+}
+
+#body.blur {
+  -webkit-filter: blur(3px);
+  filter: blur(3px);
+}
+
+.zoom {
+  display: flex;
+  position: fixed;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  height: 40px;
+  width: 125px;
+  right: 40px;
+  margin-top: 30px;
+  z-index: 10;
+}
+
+.zoom .zoom-in,
+.zoom .zoom-out {
+  width: 30px;
+  height: 30px;
+  background: #fff;
+  color: #c1c1cd;
+  cursor: pointer;
+  background-size: 100%;
+  background-repeat: no-repeat;
+}
+
+.zoom .zoom-out {
+  background-image: url(https://gw.alicdn.com/tfs/TB1s0qhBHGYBuNjy0FoXXciBFXa-90-90.png);
+}
+
+.zoom .zoom-out.disabled {
+  opacity: .5;
+}
+
+.zoom .zoom-in {
+  background-image: url(https://gw.alicdn.com/tfs/TB1UIgJBTtYBeNjy1XdXXXXyVXa-90-90.png);
+}
+
+.zoom .zoom-in.disabled {
+  opacity: .5;
+}
+
+.auto-judge:hover .editable-title,
+.node-wrap-box:hover .editable-title {
+  border-bottom: 1px dashed #fff;
+}
+
+.auto-judge:hover .editable-title.editing,
+.node-wrap-box:hover .editable-title.editing {
+  text-decoration: none;
+  border: 1px solid #d9d9d9;
+}
+
+.auto-judge:hover .editable-title {
+  border-color: #15bc83;
+}
+
+.editable-title {
+  line-height: 15px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  border-bottom: 1px dashed transparent;
+}
+
+.editable-title:before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 40px;
+}
+
+.editable-title:hover {
+  border-bottom: 1px dashed #fff;
+}
+
+.editable-title-input {
+  flex: none;
+  height: 18px;
+  padding-left: 4px;
+  text-indent: 0;
+  font-size: 12px;
+  line-height: 18px;
+  z-index: 1;
+}
+
+.editable-title-input:hover {
+  text-decoration: none;
+}
+
+.ant-btn {
+  position: relative;
+}
+
+.node-wrap-box {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  position: relative;
+  width: 220px;
+  min-height: 72px;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  background: #fff;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.node-wrap-box:after {
+  pointer-events: none;
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 2;
+  border-radius: 4px;
+  border: 1px solid transparent;
+  transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
+}
+
+.node-wrap-box.active:after,
+.node-wrap-box:active:after,
+.node-wrap-box:hover:after {
+  border: 1px solid #3296fa;
+  box-shadow: 0 0 6px 0 rgba(50, 150, 250, 0.3);
+}
+
+.node-wrap-box.active .close,
+.node-wrap-box:active .close,
+.node-wrap-box:hover .close {
+  display: block;
+}
+
+.node-wrap-box.error:after {
+  border: 1px solid #f25643;
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
+}
+
+.node-wrap-box .title {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding-left: 16px;
+  padding-right: 30px;
+  width: 100%;
+  height: 24px;
+  line-height: 24px;
+  font-size: 12px;
+  color: #fff;
+  text-align: left;
+  background: #576a95;
+  border-radius: 4px 4px 0 0;
+}
+
+.node-wrap-box .title .iconfont {
+  font-size: 12px;
+  margin-right: 5px;
+}
+
+.node-wrap-box .placeholder {
+  color: #bfbfbf;
+}
+
+.node-wrap-box .close {
+  display: none;
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 20px;
+  height: 20px;
+  font-size: 14px;
+  color: #fff;
+  border-radius: 50%;
+  text-align: center;
+  line-height: 20px;
+}
+
+.node-wrap-box .content {
+  position: relative;
+  font-size: 14px;
+  padding: 16px;
+  padding-right: 30px;
+}
+
+.node-wrap-box .content .text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+
+.node-wrap-box .content .arrow {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 20px;
+  height: 14px;
+  font-size: 14px;
+  color: #979797;
+}
+
+.start-node.node-wrap-box .content .text {
+  display: block;
+  white-space: nowrap;
+}
+
+.node-wrap-box:before {
+  content: "";
+  position: absolute;
+  top: -12px;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  transform: translateX(-50%);
+  width: 0;
+  height: 4px;
+  border-style: solid;
+  border-width: 8px 6px 4px;
+  border-color: #cacaca transparent transparent;
+  background: #f5f5f7;
+}
+
+.node-wrap-box.start-node:before {
+  content: none;
+}
+
+.top-left-cover-line {
+  left: -1px;
+}
+
+.top-left-cover-line,
+.top-right-cover-line {
+  position: absolute;
+  height: 8px;
+  width: 50%;
+  background-color: #f5f5f7;
+  top: -4px;
+}
+
+.top-right-cover-line {
+  right: -1px;
+}
+
+.bottom-left-cover-line {
+  left: -1px;
+}
+
+.bottom-left-cover-line,
+.bottom-right-cover-line {
+  position: absolute;
+  height: 8px;
+  width: 50%;
+  background-color: #f5f5f7;
+  bottom: -4px;
+}
+
+.bottom-right-cover-line {
+  right: -1px;
+}
+
+.dingflow-design {
+  width: 100%;
+  background-color: #f5f5f7;
+  overflow: auto;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  top: 0;
+}
+
+.dingflow-design .box-scale {
+  transform: scale(1);
+  display: inline-block;
+  position: relative;
+  width: 100%;
+  padding: 54.5px 0;
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: flex-start;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  min-width: -webkit-min-content;
+  min-width: -moz-min-content;
+  min-width: min-content;
+  background-color: #f5f5f7;
+  transform-origin: 50% 0px 0px;
+}
+
+.dingflow-design .node-wrap {
+  flex-direction: column;
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -webkit-box-flex: 1;
+  -ms-flex-positive: 1;
+  padding: 0 50px;
+  position: relative;
+}
+
+.dingflow-design .branch-wrap,
+.dingflow-design .node-wrap {
+  display: inline-flex;
+  width: 100%;
+}
+
+.dingflow-design .branch-box-wrap {
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 270px;
+  width: 100%;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.dingflow-design .branch-box {
+  display: flex;
+  overflow: visible;
+  min-height: 180px;
+  height: auto;
+  border-bottom: 2px solid #ccc;
+  border-top: 2px solid #ccc;
+  position: relative;
+  margin-top: 15px;
+}
+
+.dingflow-design .branch-box .col-box {
+  background: #f5f5f7;
+}
+
+.dingflow-design .branch-box .col-box:before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 0;
+  margin: auto;
+  width: 2px;
+  height: 100%;
+  background-color: #cacaca;
+}
+
+.dingflow-design .add-branch {
+  border: none;
+  outline: none;
+  user-select: none;
+  justify-content: center;
+  font-size: 12px;
+  padding: 0 10px;
+  height: 30px;
+  line-height: 30px;
+  border-radius: 15px;
+  color: #3296fa;
+  background: #fff;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+  position: absolute;
+  top: -16px;
+  left: 50%;
+  transform: translateX(-50%);
+  transform-origin: center center;
+  cursor: pointer;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+
+.dingflow-design .add-branch:hover {
+  transform: translateX(-50%) scale(1.1);
+  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.1);
+}
+
+.dingflow-design .add-branch:active {
+  transform: translateX(-50%);
+  box-shadow: none;
+}
+
+.dingflow-design .col-box {
+  display: inline-flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  flex-direction: column;
+  -webkit-box-align: center;
+  align-items: center;
+  position: relative;
+}
+
+.dingflow-design .condition-node {
+  min-height: 220px;
+}
+
+.dingflow-design .condition-node,
+.dingflow-design .condition-node-box {
+  display: inline-flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  flex-direction: column;
+  -webkit-box-flex: 1;
+}
+
+.dingflow-design .condition-node-box {
+  padding-top: 30px;
+  padding-right: 50px;
+  padding-left: 50px;
+  -webkit-box-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  align-items: center;
+  flex-grow: 1;
+  position: relative;
+}
+
+.dingflow-design .condition-node-box:before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  width: 2px;
+  height: 100%;
+  background-color: #cacaca;
+}
+
+.dingflow-design .auto-judge {
+  position: relative;
+  width: 220px;
+  min-height: 72px;
+  background: #fff;
+  border-radius: 4px;
+  padding: 14px 19px;
+  cursor: pointer;
+}
+
+.dingflow-design .auto-judge:after {
+  pointer-events: none;
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 2;
+  border-radius: 4px;
+  border: 1px solid transparent;
+  transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
+}
+
+.dingflow-design .auto-judge.active:after,
+.dingflow-design .auto-judge:active:after,
+.dingflow-design .auto-judge:hover:after {
+  border: 1px solid #3296fa;
+  box-shadow: 0 0 6px 0 rgba(50, 150, 250, 0.3);
+}
+
+.dingflow-design .auto-judge.active .close,
+.dingflow-design .auto-judge:active .close,
+.dingflow-design .auto-judge:hover .close {
+  display: block;
+}
+
+.dingflow-design .auto-judge.error:after {
+  border: 1px solid #f25643;
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
+}
+
+.dingflow-design .auto-judge .title-wrapper {
+  position: relative;
+  font-size: 12px;
+  color: #15bc83;
+  text-align: left;
+  line-height: 16px;
+}
+
+.dingflow-design .auto-judge .title-wrapper .editable-title {
+  display: inline-block;
+  max-width: 120px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.dingflow-design .auto-judge .title-wrapper .priority-title {
+  display: inline-block;
+  float: right;
+  margin-right: 10px;
+  color: rgba(25, 31, 37, 0.56);
+}
+
+.dingflow-design .auto-judge .placeholder {
+  color: #bfbfbf;
+}
+
+.dingflow-design .auto-judge .close {
+  display: none;
+  position: absolute;
+  right: -10px;
+  top: -10px;
+  width: 20px;
+  height: 20px;
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.25);
+  border-radius: 50%;
+  text-align: center;
+  line-height: 20px;
+  z-index: 2;
+}
+
+.dingflow-design .auto-judge .content {
+  font-size: 14px;
+  color: #191f25;
+  text-align: left;
+  margin-top: 6px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+
+.dingflow-design .auto-judge .sort-left,
+.dingflow-design .auto-judge .sort-right {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  display: none;
+  z-index: 1;
+}
+
+.dingflow-design .auto-judge .sort-left {
+  left: 0;
+  border-right: 1px solid #f6f6f6;
+}
+
+.dingflow-design .auto-judge .sort-right {
+  right: 0;
+  border-left: 1px solid #f6f6f6;
+}
+
+.dingflow-design .auto-judge:hover .sort-left,
+.dingflow-design .auto-judge:hover .sort-right {
+  display: flex;
+  align-items: center;
+}
+
+.dingflow-design .auto-judge .sort-left:hover,
+.dingflow-design .auto-judge .sort-right:hover {
+  background: #efefef;
+}
+
+.dingflow-design .end-node {
+  border-radius: 50%;
+  font-size: 14px;
+  color: rgba(25, 31, 37, 0.4);
+  text-align: left;
+}
+
+.dingflow-design .end-node .end-node-circle {
+  width: 10px;
+  height: 10px;
+  margin: auto;
+  border-radius: 50%;
+  background: #dbdcdc;
+}
+
+.dingflow-design .end-node .end-node-text {
+  margin-top: 5px;
+  text-align: center;
+}
+
+.approval-setting {
+  border-radius: 2px;
+  margin: 20px 0;
+  position: relative;
+  background: #fff;
+}
+
+.ant-btn {
+  position: relative;
+}
diff --git a/src/styles/workflowcss/workflow.min.css b/src/styles/workflowcss/workflow.min.css
new file mode 100644
index 000000000..9634dc5c7
--- /dev/null
+++ b/src/styles/workflowcss/workflow.min.css
@@ -0,0 +1 @@
+body{background:#eee}@font-face{font-family:Chinese Quote;src:local("PingFang SC"),local("SimSun");unicode-range:u+2018, u+2019, u+201c, u+201d}body,html{width:100%}input::-ms-clear,input::-ms-reveal{display:none}*,:after,:before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:transparent}@-ms-viewport{width:device-width}article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{margin:0;font-family:Chinese Quote, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif;font-size:14px;font-variant:tabular-nums;line-height:1.5;color:rgba(0,0,0,0.65);background-color:#fff}[tabindex="-1"]:focus{outline:none !important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5em;color:rgba(0,0,0,0.85);font-weight:500}p{margin-top:0;margin-bottom:1em}abbr[data-original-title],abbr[title]{text-decoration:underline;text-decoration:underline dotted;cursor:help;border-bottom:0}address{margin-bottom:1em;font-style:normal;line-height:inherit}input[type=number],input[type=password],input[type=text],textarea{-webkit-appearance:none}dl,ol,ul{margin-top:0;margin-bottom:1em}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:500}dd{margin-bottom:.5em;margin-left:0}blockquote{margin:0 0 1em}dfn{font-style:italic}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#1890ff;background-color:transparent;text-decoration:none;outline:none;cursor:pointer;transition:color .3s;-webkit-text-decoration-skip:objects}a:focus{text-decoration:underline;text-decoration-skip:auto}a:hover{color:#40a9ff}a:active{color:#096dd9}a:active,a:hover{outline:0;text-decoration:none}code,kbd,pre,samp{font-family:SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;font-size:1em}pre{margin-top:0;margin-bottom:1em;overflow:auto}figure{margin:0 0 1em}img{vertical-align:middle;border-style:none}svg:not(:root){overflow:hidden}[role=button],a,area,button,input:not([type=range]),label,select,summary,textarea{touch-action:manipulation}table{border-collapse:collapse}caption{padding-top:.75em;padding-bottom:.3em;color:rgba(0,0,0,0.45);text-align:left;caption-side:bottom}th{text-align:inherit}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit;color:inherit}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5em;font-size:1.5em;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item}template{display:none}[hidden]{display:none !important}mark{padding:.2em;background-color:#feffe6}::selection{background:#1890ff;color:#fff}.clearfix{zoom:1}.clearfix:after,.clearfix:before{content:"";display:table}.clearfix:after{clear:both}@font-face{font-family:anticon;font-display:fallback;src:url("https://at.alicdn.com/t/font_148784_v4ggb6wrjmkotj4i.eot");src:url("https://at.alicdn.com/t/font_148784_v4ggb6wrjmkotj4i.woff") format("woff"),url("https://at.alicdn.com/t/font_148784_v4ggb6wrjmkotj4i.ttf") format("truetype"),url("https://at.alicdn.com/t/font_148784_v4ggb6wrjmkotj4i.svg#iconfont") format("svg")}.anticon{display:inline-block;font-style:normal;vertical-align:baseline;text-align:center;text-transform:none;line-height:1;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.anticon:before{display:block;font-family:anticon !important}.anticon-close:before{content:"\E633"}.anticon-right:before{content:"\E61F"}.anticon-exclamation-circle{color:#f25643}.anticon-exclamation-circle:before{content:"\E62C"}.anticon-left:before{content:"\E620"}.anticon-close-circle:before{content:"\E62E"}.ant-btn{line-height:1.5;display:inline-block;font-weight:400;text-align:center;touch-action:manipulation;cursor:pointer;background-image:none;border:1px solid transparent;white-space:nowrap;padding:0 15px;font-size:14px;border-radius:4px;height:32px;user-select:none;transition:all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);position:relative;color:rgba(0,0,0,0.65);background-color:#fff;border-color:#d9d9d9}.ant-btn>.anticon{line-height:1}.ant-btn,.ant-btn:active,.ant-btn:focus{outline:0}.ant-btn>a:only-child{color:currentColor}.ant-btn>a:only-child:after{content:"";position:absolute;top:0;left:0;bottom:0;right:0;background:transparent}.ant-btn:focus,.ant-btn:hover{color:#40a9ff;background-color:#fff;border-color:#40a9ff}.ant-btn:focus>a:only-child,.ant-btn:hover>a:only-child{color:currentColor}.ant-btn:focus>a:only-child:after,.ant-btn:hover>a:only-child:after{content:"";position:absolute;top:0;left:0;bottom:0;right:0;background:transparent}.ant-btn.active,.ant-btn:active{color:#096dd9;background-color:#fff;border-color:#096dd9}.ant-btn.active>a:only-child,.ant-btn:active>a:only-child{color:currentColor}.ant-btn.active>a:only-child:after,.ant-btn:active>a:only-child:after{content:"";position:absolute;top:0;left:0;bottom:0;right:0;background:transparent}.ant-btn.active,.ant-btn:active,.ant-btn:focus,.ant-btn:hover{background:#fff;text-decoration:none}.ant-btn>i,.ant-btn>span{pointer-events:none}.ant-btn:before{position:absolute;top:-1px;left:-1px;bottom:-1px;right:-1px;background:#fff;opacity:.35;content:"";border-radius:inherit;z-index:1;transition:opacity .2s;pointer-events:none;display:none}.ant-btn .anticon{transition:margin-left 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)}.ant-btn:active>span,.ant-btn:focus>span{position:relative}.ant-btn>.anticon+span,.ant-btn>span+.anticon{margin-left:8px}.fd-nav-container{display:inline-block;position:relative}.fd-nav-container .ghost-bar{position:absolute;width:150px;height:100%;left:0;background:#1583f2;-webkit-transition:all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);transition:all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)}.fd-nav-container .ghost-bar:after{content:"";position:absolute;bottom:0;left:50%;margin-left:-5px;width:0;height:0;border-style:solid;border-width:0 5px 6px;border-color:transparent transparent #f6f6f6}.fd-nav-item{position:relative;cursor:pointer;display:inline-block;line-height:60px;width:150px;text-align:center;white-space:nowrap}.fd-nav-item .order-num{display:inline-block;width:20px;height:20px;line-height:20px;border:1px solid #fff;border-radius:50%;margin-right:6px;-webkit-transition:all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);transition:all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)}.fd-nav-item.active .order-num{color:#1583f2;background:#fff}.ant-input{font-family:Chinese Quote, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif;font-variant:tabular-nums;box-sizing:border-box;margin:0;padding:0;list-style:none;position:relative;display:inline-block;padding:4px 11px;width:100%;height:32px;font-size:14px;line-height:1.5;color:rgba(0,0,0,0.65);background-color:#fff;background-image:none;border:1px solid #d9d9d9;border-radius:4px;transition:all .3s}.ant-input::-moz-placeholder{color:#bfbfbf;opacity:1}.ant-input:-ms-input-placeholder{color:#bfbfbf}.ant-input::-webkit-input-placeholder{color:#bfbfbf}.ant-input:focus,.ant-input:hover{border-color:#40a9ff;border-right-width:1px !important}.ant-input:focus{outline:0;box-shadow:0 0 0 2px rgba(24,144,255,0.2)}textarea.ant-input{max-width:100%;height:auto;vertical-align:bottom;transition:all .3s, height 0s;min-height:32px}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;outline:0;font-size:100%;font:inherit;vertical-align:baseline}*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body,html{font-size:14px}body{font-family:Microsoft Yahei, Lucida Grande, Lucida Sans Unicode, Helvetica, Arial, Verdana, sans-serif;line-height:1.6;background-color:#fff;position:static !important;-webkit-tap-highlight-color:transparent}ol,ul{list-style-type:none}b,strong{font-weight:700}img{border:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}textarea{overflow:auto;vertical-align:top;-webkit-appearance:none}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}table{width:100%;border-spacing:0;border-collapse:collapse}table,td,th{border:0}td,th{padding:0;vertical-align:top}th{font-weight:700;text-align:left}thead th{white-space:nowrap}a{text-decoration:none;cursor:pointer;color:#3296fa}a:active,a:hover{outline:0;color:#3296fa}small{font-size:80%}body,html{font-size:12px !important;color:#191f25 !important;background:#f6f6f6 !important}.wrap{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100%}@font-face{font-family:IconFont;src:url("//at.alicdn.com/t/font_135284_ph2thxxbzgf.eot");src:url("//at.alicdn.com/t/font_135284_ph2thxxbzgf.eot?#iefix") format("embedded-opentype"),url("//at.alicdn.com/t/font_135284_ph2thxxbzgf.woff") format("woff"),url("//at.alicdn.com/t/font_135284_ph2thxxbzgf.ttf") format("truetype"),url("//at.alicdn.com/t/font_135284_ph2thxxbzgf.svg#IconFont") format("svg")}.iconfont{font-family:IconFont !important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-webkit-text-stroke-width:.2px;-moz-osx-font-smoothing:grayscale}.fd-nav{position:fixed;top:0;left:0;right:0;z-index:997;width:100%;height:60px;font-size:14px;color:#fff;background:#3296fa;display:flex;align-items:center}.fd-nav>*{flex:1;width:100%}.fd-nav .fd-nav-left{display:-webkit-box;display:flex;align-items:center}.fd-nav .fd-nav-center{flex:none;width:600px;text-align:center}.fd-nav .fd-nav-right{display:flex;align-items:center;justify-content:flex-end;text-align:right}.fd-nav .fd-nav-back{display:inline-block;width:60px;height:60px;font-size:22px;border-right:1px solid #1583f2;text-align:center;cursor:pointer}.fd-nav .fd-nav-back:hover{background:#5af}.fd-nav .fd-nav-back:active{background:#1583f2}.fd-nav .fd-nav-back .anticon{line-height:60px}.fd-nav .fd-nav-title{width:0;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 15px}.fd-nav a{color:#fff;margin-left:12px}.fd-nav .button-publish{min-width:80px;margin-left:4px;margin-right:15px;color:#3296fa;border-color:#fff}.fd-nav .button-publish.ant-btn:focus,.fd-nav .button-publish.ant-btn:hover{color:#3296fa;border-color:#fff;box-shadow:0 10px 20px 0 rgba(0,0,0,0.3)}.fd-nav .button-publish.ant-btn:active{color:#3296fa;background:#d6eaff;box-shadow:none}.fd-nav .button-preview{min-width:80px;margin-left:16px;margin-right:4px;color:#fff;border-color:#fff;background:transparent}.fd-nav .button-preview.ant-btn:focus,.fd-nav .button-preview.ant-btn:hover{color:#fff;border-color:#fff;background:#59acfc}.fd-nav .button-preview.ant-btn:active{color:#fff;border-color:#fff;background:#2186ef}.fd-nav-content{position:fixed;top:60px;left:0;right:0;bottom:0;z-index:1;overflow-x:hidden;overflow-y:auto;padding-bottom:30px}.fd-nav-content-new{position:relative;width:initial;height:calc(100% - 60px);overflow-x:hidden;overflow-y:auto;padding-bottom:30px}.error-modal-desc{font-size:13px;color:rgba(25,31,37,0.56);line-height:22px;margin-bottom:14px}.error-modal-list{height:200px;overflow-y:auto;margin-right:-25px;padding-right:25px}.error-modal-item{padding:10px 20px;line-height:21px;background:#f6f6f6;display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;border-radius:4px}.error-modal-item-label{flex:none;font-size:15px;color:rgba(25,31,37,0.56);padding-right:10px}.error-modal-item-content{text-align:right;flex:1;font-size:13px;color:#191f25}#body.blur{-webkit-filter:blur(3px);filter:blur(3px)}.zoom{display:flex;position:fixed;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;height:40px;width:125px;right:40px;margin-top:30px;z-index:10}.zoom .zoom-in,.zoom .zoom-out{width:30px;height:30px;background:#fff;color:#c1c1cd;cursor:pointer;background-size:100%;background-repeat:no-repeat}.zoom .zoom-out{background-image:url(https://gw.alicdn.com/tfs/TB1s0qhBHGYBuNjy0FoXXciBFXa-90-90.png)}.zoom .zoom-out.disabled{opacity:.5}.zoom .zoom-in{background-image:url(https://gw.alicdn.com/tfs/TB1UIgJBTtYBeNjy1XdXXXXyVXa-90-90.png)}.zoom .zoom-in.disabled{opacity:.5}.auto-judge:hover .editable-title,.node-wrap-box:hover .editable-title{border-bottom:1px dashed #fff}.auto-judge:hover .editable-title.editing,.node-wrap-box:hover .editable-title.editing{text-decoration:none;border:1px solid #d9d9d9}.auto-judge:hover .editable-title{border-color:#15bc83}.editable-title{line-height:15px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border-bottom:1px dashed transparent}.editable-title:before{content:"";position:absolute;top:0;left:0;bottom:0;right:40px}.editable-title:hover{border-bottom:1px dashed #fff}.editable-title-input{flex:none;height:18px;padding-left:4px;text-indent:0;font-size:12px;line-height:18px;z-index:1}.editable-title-input:hover{text-decoration:none}.ant-btn{position:relative}.node-wrap-box{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative;width:220px;min-height:72px;-ms-flex-negative:0;flex-shrink:0;background:#fff;border-radius:4px;cursor:pointer}.node-wrap-box:after{pointer-events:none;content:"";position:absolute;top:0;bottom:0;left:0;right:0;z-index:2;border-radius:4px;border:1px solid transparent;transition:all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);box-shadow:0 2px 5px 0 rgba(0,0,0,0.1)}.node-wrap-box.active:after,.node-wrap-box:active:after,.node-wrap-box:hover:after{border:1px solid #3296fa;box-shadow:0 0 6px 0 rgba(50,150,250,0.3)}.node-wrap-box.active .close,.node-wrap-box:active .close,.node-wrap-box:hover .close{display:block}.node-wrap-box.error:after{border:1px solid #f25643;box-shadow:0 2px 5px 0 rgba(0,0,0,0.1)}.node-wrap-box .title{position:relative;display:flex;align-items:center;padding-left:16px;padding-right:30px;width:100%;height:24px;line-height:24px;font-size:12px;color:#fff;text-align:left;background:#576a95;border-radius:4px 4px 0 0}.node-wrap-box .title .iconfont{font-size:12px;margin-right:5px}.node-wrap-box .placeholder{color:#bfbfbf}.node-wrap-box .close{display:none;position:absolute;right:10px;top:50%;transform:translateY(-50%);width:20px;height:20px;font-size:14px;color:#fff;border-radius:50%;text-align:center;line-height:20px}.node-wrap-box .content{position:relative;font-size:14px;padding:16px;padding-right:30px}.node-wrap-box .content .text{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}.node-wrap-box .content .arrow{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:20px;height:14px;font-size:14px;color:#979797}.start-node.node-wrap-box .content .text{display:block;white-space:nowrap}.node-wrap-box:before{content:"";position:absolute;top:-12px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:0;height:4px;border-style:solid;border-width:8px 6px 4px;border-color:#cacaca transparent transparent;background:#f5f5f7}.node-wrap-box.start-node:before{content:none}.top-left-cover-line{left:-1px}.top-left-cover-line,.top-right-cover-line{position:absolute;height:8px;width:50%;background-color:#f5f5f7;top:-4px}.top-right-cover-line{right:-1px}.bottom-left-cover-line{left:-1px}.bottom-left-cover-line,.bottom-right-cover-line{position:absolute;height:8px;width:50%;background-color:#f5f5f7;bottom:-4px}.bottom-right-cover-line{right:-1px}.dingflow-design{width:100%;background-color:#f5f5f7;overflow:auto;position:absolute;bottom:0;left:0;right:0;top:0}.dingflow-design .box-scale{transform:scale(1);display:inline-block;position:relative;width:100%;padding:54.5px 0;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap;min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content;background-color:#f5f5f7;transform-origin:50% 0px 0px}.dingflow-design .node-wrap{flex-direction:column;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-flex:1;-ms-flex-positive:1;padding:0 50px;position:relative}.dingflow-design .branch-wrap,.dingflow-design .node-wrap{display:inline-flex;width:100%}.dingflow-design .branch-box-wrap{display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-height:270px;width:100%;-ms-flex-negative:0;flex-shrink:0}.dingflow-design .branch-box{display:flex;overflow:visible;min-height:180px;height:auto;border-bottom:2px solid #ccc;border-top:2px solid #ccc;position:relative;margin-top:15px}.dingflow-design .branch-box .col-box{background:#f5f5f7}.dingflow-design .branch-box .col-box:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;margin:auto;width:2px;height:100%;background-color:#cacaca}.dingflow-design .add-branch{border:none;outline:none;user-select:none;justify-content:center;font-size:12px;padding:0 10px;height:30px;line-height:30px;border-radius:15px;color:#3296fa;background:#fff;box-shadow:0 2px 4px 0 rgba(0,0,0,0.1);position:absolute;top:-16px;left:50%;transform:translateX(-50%);transform-origin:center center;cursor:pointer;z-index:1;display:inline-flex;align-items:center;-webkit-transition:all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);transition:all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)}.dingflow-design .add-branch:hover{transform:translateX(-50%) scale(1.1);box-shadow:0 8px 16px 0 rgba(0,0,0,0.1)}.dingflow-design .add-branch:active{transform:translateX(-50%);box-shadow:none}.dingflow-design .col-box{display:inline-flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-align:center;align-items:center;position:relative}.dingflow-design .condition-node{min-height:220px}.dingflow-design .condition-node,.dingflow-design .condition-node-box{display:inline-flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-flex:1}.dingflow-design .condition-node-box{padding-top:30px;padding-right:50px;padding-left:50px;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;flex-grow:1;position:relative}.dingflow-design .condition-node-box:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;width:2px;height:100%;background-color:#cacaca}.dingflow-design .auto-judge{position:relative;width:220px;min-height:72px;background:#fff;border-radius:4px;padding:14px 19px;cursor:pointer}.dingflow-design .auto-judge:after{pointer-events:none;content:"";position:absolute;top:0;bottom:0;left:0;right:0;z-index:2;border-radius:4px;border:1px solid transparent;transition:all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);box-shadow:0 2px 5px 0 rgba(0,0,0,0.1)}.dingflow-design .auto-judge.active:after,.dingflow-design .auto-judge:active:after,.dingflow-design .auto-judge:hover:after{border:1px solid #3296fa;box-shadow:0 0 6px 0 rgba(50,150,250,0.3)}.dingflow-design .auto-judge.active .close,.dingflow-design .auto-judge:active .close,.dingflow-design .auto-judge:hover .close{display:block}.dingflow-design .auto-judge.error:after{border:1px solid #f25643;box-shadow:0 2px 5px 0 rgba(0,0,0,0.1)}.dingflow-design .auto-judge .title-wrapper{position:relative;font-size:12px;color:#15bc83;text-align:left;line-height:16px}.dingflow-design .auto-judge .title-wrapper .editable-title{display:inline-block;max-width:120px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.dingflow-design .auto-judge .title-wrapper .priority-title{display:inline-block;float:right;margin-right:10px;color:rgba(25,31,37,0.56)}.dingflow-design .auto-judge .placeholder{color:#bfbfbf}.dingflow-design .auto-judge .close{display:none;position:absolute;right:-10px;top:-10px;width:20px;height:20px;font-size:14px;color:rgba(0,0,0,0.25);border-radius:50%;text-align:center;line-height:20px;z-index:2}.dingflow-design .auto-judge .content{font-size:14px;color:#191f25;text-align:left;margin-top:6px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}.dingflow-design .auto-judge .sort-left,.dingflow-design .auto-judge .sort-right{position:absolute;top:0;bottom:0;display:none;z-index:1}.dingflow-design .auto-judge .sort-left{left:0;border-right:1px solid #f6f6f6}.dingflow-design .auto-judge .sort-right{right:0;border-left:1px solid #f6f6f6}.dingflow-design .auto-judge:hover .sort-left,.dingflow-design .auto-judge:hover .sort-right{display:flex;align-items:center}.dingflow-design .auto-judge .sort-left:hover,.dingflow-design .auto-judge .sort-right:hover{background:#efefef}.dingflow-design .end-node{border-radius:50%;font-size:14px;color:rgba(25,31,37,0.4);text-align:left}.dingflow-design .end-node .end-node-circle{width:10px;height:10px;margin:auto;border-radius:50%;background:#dbdcdc}.dingflow-design .end-node .end-node-text{margin-top:5px;text-align:center}.approval-setting{border-radius:2px;margin:20px 0;position:relative;background:#fff}.ant-btn{position:relative}
diff --git a/src/types/components.d.ts b/src/types/components.d.ts
index 58d574dfb..629ff6695 100644
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -22,6 +22,7 @@ declare module '@vue/runtime-core' {
     DesignLayoutPage: typeof import('./../components/DesignForm/designLayout/designLayoutPage.vue')['default']
     DiyIconfont: typeof import('./../components/DesignForm/public/expand/diy-iconfont.vue')['default']
     DragControl: typeof import('./../components/DesignForm/dragControl.vue')['default']
+    DragControlApp: typeof import('./../components/DesignForm/dragControlApp.vue')['default']
     DragControlNew: typeof import('./../components/DesignForm/dragControlNew.vue')['default']
     ElAffix: typeof import('element-plus/es')['ElAffix']
     ElAside: typeof import('element-plus/es')['ElAside']
@@ -58,6 +59,7 @@ declare module '@vue/runtime-core' {
     ElImageViewer: typeof import('element-plus/es')['ElImageViewer']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
+    ElLink: typeof import('element-plus/es')['ElLink']
     ElMain: typeof import('element-plus/es')['ElMain']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
@@ -102,6 +104,7 @@ declare module '@vue/runtime-core' {
     FormControlAttr: typeof import('./../components/DesignForm/formControlAttr.vue')['default']
     FormControlAttr_2024024: typeof import('./../components/DesignForm/formControlAttr_2024024.vue')['default']
     FormControlAttres: typeof import('./../components/DesignForm/formControlAttres.vue')['default']
+    FormControlProperties: typeof import('./../components/DesignForm/formControlProperties.vue')['default']
     FormGroup: typeof import('./../components/DesignForm/public/form/formGroup.vue')['default']
     FormGroup1: typeof import('./../components/DesignForm/public/form/formGroup1.vue')['default']
     FormItem: typeof import('./../components/DesignForm/public/form/formItem.vue')['default']
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index ba0021956..e8e25e700 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,146 +1,250 @@
-<!--
-@ 作者: 秦东
-@ 时间: 2023-11-06 13:39:13
-@ 备注: 首页
--->
-<script lang='ts' setup>
-import * as echarts from 'echarts';	//引入图形界面
+<script lang="ts">
+export default { name: "Dashboard" };
+</script>
 
+<script setup lang="ts">
 import { useUserStore } from "@/store/modules/user";
+import { useTransition, TransitionPresets } from "@vueuse/core";
 
-
-import { orgInfo } from '@/api/displayboardapi/types'
-import { getOrgChiled,getCompanyDeparment,targetListForDepartment } from '@/api/displayboardapi/indexapi'
-
-import UserInfo from "@/views/dashboard/components/userinfo.vue";
-import SanLianpIng from "@/views/dashboard/components/sanlianping.vue";
-import EducationChart from "@/views/dashboard/components/education.vue";
-import AllOrgYear from "@/views/dashboard/components/allorgyear.vue";
-import OrgUserAge from "@/views/dashboard/components/orguserage.vue"; 
-import OrgEducation from "@/views/dashboard/components/orgeducation.vue"; 
-import Application from "@/views/dashboard/components/application.vue";  
-import HostNews from "@/views/dashboard/components/hostnews.vue";
+import GithubCorner from "@/components/GithubCorner/index.vue";
+import SvgIcon from "@/components/SvgIcon/index.vue";
+import BarChart from "./components/BarChart.vue";
+import PieChart from "./components/PieChart.vue";
+import RadarChart from "./components/RadarChart.vue";
 
 const userStore = useUserStore();
-const orgListCont = ref<orgInfo[]>([])
-const educationOrgId = ref<number>(309)
-const masterBody = ref<any>(null)
-const drawerWidht = ref<any>()
-/**
- * 获取行政组织
- */
-function getOrgList(){
-	getOrgChiled({id:313})
-		.then(( {data} )=>{
-			console.log("获取行政组织-2-->",data)
-			orgListCont.value = data.list
-			educationOrgId.value = data.current
-		})
-}
 
+const date: Date = new Date();
 
+const greetings = computed(() => {
+  if (date.getHours() >= 6 && date.getHours() < 8) {
+    return "晨起披衣出草堂，轩窗已自喜微凉🌅！";
+  } else if (date.getHours() >= 8 && date.getHours() < 12) {
+    return "上午好🌞！";
+  } else if (date.getHours() >= 12 && date.getHours() < 18) {
+    return "下午好☕！";
+  } else if (date.getHours() >= 18 && date.getHours() < 24) {
+    return "晚上好🌃！";
+  } else if (date.getHours() >= 0 && date.getHours() < 6) {
+    return "偷偷向银河要了一把碎星，只等你闭上眼睛撒入你的梦中，晚安🌛！";
+  }
+});
 
-const orgAllYears = ref<any>()	//当前年
+const duration = 5000;
 
-const oenOrg = ref<any>() //单一行政组织
+// 收入金额
+const amount = ref(0);
+const amountOutput = useTransition(amount, {
+  duration: duration,
+  transition: TransitionPresets.easeOutExpo,
+});
+amount.value = 2000;
 
+// 访问数
+const visitCount = ref(0);
+const visitCountOutput = useTransition(visitCount, {
+  duration: duration,
+  transition: TransitionPresets.easeOutExpo,
+});
+visitCount.value = 2000;
 
-//渲染完页面再执行
-onMounted(() => {
-	
-	drawerWidht.value = masterBody.value?.clientWidth
-	getOrgList();
-	// console.log("热门新闻----100---->",drawerWidht.value)
-})
+//消息数
+const messageCount = ref(0);
+const messageCountOutput = useTransition(messageCount, {
+  duration: duration,
+  transition: TransitionPresets.easeOutExpo,
+});
+messageCount.value = 2000;
+
+// 订单数
+const orderCount = ref(0);
+const orderCountOutput = useTransition(orderCount, {
+  duration: duration,
+  transition: TransitionPresets.easeOutExpo,
+});
+orderCount.value = 2000;
 </script>
+
 <template>
-		<div ref="masterBody" class="app_container">
-			<el-row :gutter="10">
-				<el-col :xs="24" :sm="16" :md="16" :lg="18" :xl="19" class="readback">
-					<AllOrgYear  :org-list-cont="orgListCont" :education-org-id="educationOrgId" />
-				</el-col>
-				<el-col :xs="24" :sm="8" :md="8" :lg="6" :xl="5" class="greenColor">
-					<UserInfo :user-store="userStore" />
-				</el-col>
-			</el-row>
-			<el-row :gutter="10" class="cart_top_juLi">
-				<el-col :xs="24" :sm="16" :md="16" :lg="18" :xl="19" class="readback">
-
-					<el-row :gutter="10">
-						<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="readback">
-						
-							<OrgUserAge :org-list-cont="orgListCont" :education-org-id="educationOrgId" />
-						
-						</el-col>
-						<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="readback">
-							
-							<OrgEducation :org-list-cont="orgListCont" :education-org-id="educationOrgId" />
-						
-						</el-col>
-					</el-row>
-					
-					
-
-
-
-				</el-col>
-				<el-col :xs="24" :sm="8" :md="8" :lg="6" :xl="5" class="greenColor">
-				
-					<HostNews v-model:drawer-widht="drawerWidht" />
-				
-				</el-col>
-			</el-row>
-			<el-row :gutter="10" class="cart_top_juLi">
-				<el-col :xs="24" :sm="16" :md="16" :lg="18" :xl="19" class="readback">
-				
-					<SanLianpIng />
-				
-				</el-col>
-				<el-col :xs="24" :sm="8" :md="8" :lg="6" :xl="5" class="greenColor">
-					<Application :org-list-cont="orgListCont" :education-org-id="educationOrgId" />
-					
-				</el-col>
-			</el-row>
-			
-		</div>
+  <div class="dashboard-container">
+    <!-- github角标 -->
+    
+
+    <!-- 用户信息 -->
+    <el-row class="mb-8">
+      <el-card class="w-full">
+        <div class="flex justify-between flex-wrap">
+          <div class="flex items-center">
+            <img
+              class="user-avatar"
+              :src="userStore.avatar + '?imageView2/1/w/80/h/80'"
+            />
+            <span class="ml-[10px] text-[16px]">
+              {{ userStore.nickname }}
+            </span>
+          </div>
+
+          <div class="leading-[40px]">
+            {{ greetings }}
+          </div>
+
+          <div v-if="false" class="space-x-2 flex items-center" >
+            <el-link
+              target="_blank"
+              type="danger"
+              href="https://www.cnblogs.com/haoxianrui/p/16090029.html"
+              >官方0到1教程</el-link
+            >
+            <el-divider direction="vertical" />
+            <el-link
+              target="_blank"
+              type="success"
+              href="https://gitee.com/youlaiorg/vue3-element-admin"
+              >Gitee源码</el-link
+            >
+            <el-divider direction="vertical" />
+            <el-link
+              target="_blank"
+              type="primary"
+              href="https://github.com/youlaitech/vue3-element-admin"
+              >GitHub源码
+            </el-link>
+          </div>
+        </div>
+      </el-card>
+    </el-row>
+
+    <!-- 数据卡片 -->
+    <el-row :gutter="40" class="mb-4">
+      <el-col :xs="24" :sm="12" :lg="6" class="mb-4">
+        <div class="data-box">
+          <div
+            class="text-[#40c9c6] hover:!text-white hover:bg-[#40c9c6] p-3 rounded"
+          >
+            <svg-icon icon-class="uv" size="3em" />
+          </div>
+          <div class="flex flex-col space-y-3">
+            <div class="text-[var(--el-text-color-secondary)]">访问数</div>
+            <div class="text-lg">
+              {{ Math.round(visitCountOutput) }}
+            </div>
+          </div>
+        </div>
+      </el-col>
+
+      <!--消息数-->
+      <el-col :xs="24" :sm="12" :lg="6" class="mb-4">
+        <div class="data-box">
+          <div
+            class="text-[#36a3f7] hover:!text-white hover:bg-[#36a3f7] p-3 rounded"
+          >
+            <svg-icon icon-class="message" size="3em" />
+          </div>
+          <div class="flex flex-col space-y-3">
+            <div class="text-[var(--el-text-color-secondary)]">消息数</div>
+            <div class="text-lg">
+              {{ Math.round(messageCountOutput) }}
+            </div>
+          </div>
+        </div>
+      </el-col>
+
+      <el-col :xs="24" :sm="12" :lg="6" class="mb-4">
+        <div class="data-box">
+          <div
+            class="text-[#f4516c] hover:!text-white hover:bg-[#f4516c] p-3 rounded"
+          >
+            <svg-icon icon-class="money" size="3em" />
+          </div>
+          <div class="flex flex-col space-y-3">
+            <div class="text-[var(--el-text-color-secondary)]">收入金额</div>
+            <div class="text-lg">
+              {{ Math.round(amountOutput) }}
+            </div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :xs="24" :sm="12" :lg="6" class="mb-2">
+        <div class="data-box">
+          <div
+            class="text-[#34bfa3] hover:!text-white hover:bg-[#34bfa3] p-3 rounded"
+          >
+            <svg-icon icon-class="shopping" size="3em" />
+          </div>
+          <div class="flex flex-col space-y-3">
+            <div class="text-[var(--el-text-color-secondary)]">订单数</div>
+            <div class="text-lg">
+              {{ Math.round(orderCountOutput) }}
+            </div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+
+    <!-- Echarts 图表 -->
+    <el-row :gutter="40">
+      <el-col :sm="24" :lg="8" class="mb-4">
+        <BarChart
+          id="barChart"
+          height="400px"
+          width="100%"
+          class="bg-[var(--el-bg-color-overlay)]"
+        />
+      </el-col>
+
+      <el-col :xs="24" :sm="12" :lg="8" class="mb-4">
+        <PieChart
+          id="pieChart"
+          height="400px"
+          width="100%"
+          class="bg-[var(--el-bg-color-overlay)]"
+        />
+      </el-col>
+
+      <el-col :xs="24" :sm="12" :lg="8" class="mb-4">
+        <RadarChart
+          id="radarChart"
+          height="400px"
+          width="100%"
+          class="bg-[var(--el-bg-color-overlay)]"
+        />
+      </el-col>
+    </el-row>
+  </div>
 </template>
-<style  lang='scss' scoped>
-.app_container{
-	padding: 10px 20px 0px 20px;
-	height: calc(100vh - 90px);
-	overflow: hidden;
-	overflow-y: auto;
-}
-.readback{
-	// background-color:#FF0000;
-	.allOrgAxisCares{
-		display: block;
-		width:100%;
-		height:280px;
-		overflow:auto;
-	}
-	
-}
-.orgAllMothsTitle{
-	width:100%;
-	display: flex;
-	align-items: center;
-	justify-content:space-between;
-		
-}
-.greenColor{
-	// background-color:#FFAC52;
-	
-	// padding:0 10px 0 10px;
-}
-.span_icon_left{
-	margin-right:10px;
-}
-.cart_top_juLi{
-	// margin-top:10px;
-}
-.titleInfo{
-	font-size: 20px;
-	font-weight: bold;
+
+<style lang="scss" scoped>
+.dashboard-container {
+  position: relative;
+  padding: 24px;
+
+  .user-avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+  }
+
+  .github-corner {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 99;
+    border: 0;
+  }
+
+  .data-box {
+    display: flex;
+    justify-content: space-between;
+    padding: 20px;
+    font-weight: bold;
+    color: var(--el-text-color-regular);
+    background: var(--el-bg-color-overlay);
+    border-color: var(--el-border-color);
+    box-shadow: var(--el-box-shadow-dark);
+  }
+
+  .svg-icon {
+    fill: currentcolor !important;
+  }
 }
 </style>
diff --git a/src/views/dashboard/index_1.vue b/src/views/dashboard/index_1.vue
new file mode 100644
index 000000000..ba0021956
--- /dev/null
+++ b/src/views/dashboard/index_1.vue
@@ -0,0 +1,146 @@
+<!--
+@ 作者: 秦东
+@ 时间: 2023-11-06 13:39:13
+@ 备注: 首页
+-->
+<script lang='ts' setup>
+import * as echarts from 'echarts';	//引入图形界面
+
+import { useUserStore } from "@/store/modules/user";
+
+
+import { orgInfo } from '@/api/displayboardapi/types'
+import { getOrgChiled,getCompanyDeparment,targetListForDepartment } from '@/api/displayboardapi/indexapi'
+
+import UserInfo from "@/views/dashboard/components/userinfo.vue";
+import SanLianpIng from "@/views/dashboard/components/sanlianping.vue";
+import EducationChart from "@/views/dashboard/components/education.vue";
+import AllOrgYear from "@/views/dashboard/components/allorgyear.vue";
+import OrgUserAge from "@/views/dashboard/components/orguserage.vue"; 
+import OrgEducation from "@/views/dashboard/components/orgeducation.vue"; 
+import Application from "@/views/dashboard/components/application.vue";  
+import HostNews from "@/views/dashboard/components/hostnews.vue";
+
+const userStore = useUserStore();
+const orgListCont = ref<orgInfo[]>([])
+const educationOrgId = ref<number>(309)
+const masterBody = ref<any>(null)
+const drawerWidht = ref<any>()
+/**
+ * 获取行政组织
+ */
+function getOrgList(){
+	getOrgChiled({id:313})
+		.then(( {data} )=>{
+			console.log("获取行政组织-2-->",data)
+			orgListCont.value = data.list
+			educationOrgId.value = data.current
+		})
+}
+
+
+
+const orgAllYears = ref<any>()	//当前年
+
+const oenOrg = ref<any>() //单一行政组织
+
+
+//渲染完页面再执行
+onMounted(() => {
+	
+	drawerWidht.value = masterBody.value?.clientWidth
+	getOrgList();
+	// console.log("热门新闻----100---->",drawerWidht.value)
+})
+</script>
+<template>
+		<div ref="masterBody" class="app_container">
+			<el-row :gutter="10">
+				<el-col :xs="24" :sm="16" :md="16" :lg="18" :xl="19" class="readback">
+					<AllOrgYear  :org-list-cont="orgListCont" :education-org-id="educationOrgId" />
+				</el-col>
+				<el-col :xs="24" :sm="8" :md="8" :lg="6" :xl="5" class="greenColor">
+					<UserInfo :user-store="userStore" />
+				</el-col>
+			</el-row>
+			<el-row :gutter="10" class="cart_top_juLi">
+				<el-col :xs="24" :sm="16" :md="16" :lg="18" :xl="19" class="readback">
+
+					<el-row :gutter="10">
+						<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="readback">
+						
+							<OrgUserAge :org-list-cont="orgListCont" :education-org-id="educationOrgId" />
+						
+						</el-col>
+						<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="readback">
+							
+							<OrgEducation :org-list-cont="orgListCont" :education-org-id="educationOrgId" />
+						
+						</el-col>
+					</el-row>
+					
+					
+
+
+
+				</el-col>
+				<el-col :xs="24" :sm="8" :md="8" :lg="6" :xl="5" class="greenColor">
+				
+					<HostNews v-model:drawer-widht="drawerWidht" />
+				
+				</el-col>
+			</el-row>
+			<el-row :gutter="10" class="cart_top_juLi">
+				<el-col :xs="24" :sm="16" :md="16" :lg="18" :xl="19" class="readback">
+				
+					<SanLianpIng />
+				
+				</el-col>
+				<el-col :xs="24" :sm="8" :md="8" :lg="6" :xl="5" class="greenColor">
+					<Application :org-list-cont="orgListCont" :education-org-id="educationOrgId" />
+					
+				</el-col>
+			</el-row>
+			
+		</div>
+</template>
+<style  lang='scss' scoped>
+.app_container{
+	padding: 10px 20px 0px 20px;
+	height: calc(100vh - 90px);
+	overflow: hidden;
+	overflow-y: auto;
+}
+.readback{
+	// background-color:#FF0000;
+	.allOrgAxisCares{
+		display: block;
+		width:100%;
+		height:280px;
+		overflow:auto;
+	}
+	
+}
+.orgAllMothsTitle{
+	width:100%;
+	display: flex;
+	align-items: center;
+	justify-content:space-between;
+		
+}
+.greenColor{
+	// background-color:#FFAC52;
+	
+	// padding:0 10px 0 10px;
+}
+.span_icon_left{
+	margin-right:10px;
+}
+.cart_top_juLi{
+	// margin-top:10px;
+}
+.titleInfo{
+	font-size: 20px;
+	font-weight: bold;
+}
+</style>
diff --git a/src/views/dashboard/index_old.vue b/src/views/dashboard/index_old.vue
deleted file mode 100644
index e8e25e700..000000000
--- a/src/views/dashboard/index_old.vue
+++ /dev/null
@@ -1,250 +0,0 @@
-<script lang="ts">
-export default { name: "Dashboard" };
-</script>
-
-<script setup lang="ts">
-import { useUserStore } from "@/store/modules/user";
-import { useTransition, TransitionPresets } from "@vueuse/core";
-
-import GithubCorner from "@/components/GithubCorner/index.vue";
-import SvgIcon from "@/components/SvgIcon/index.vue";
-import BarChart from "./components/BarChart.vue";
-import PieChart from "./components/PieChart.vue";
-import RadarChart from "./components/RadarChart.vue";
-
-const userStore = useUserStore();
-
-const date: Date = new Date();
-
-const greetings = computed(() => {
-  if (date.getHours() >= 6 && date.getHours() < 8) {
-    return "晨起披衣出草堂，轩窗已自喜微凉🌅！";
-  } else if (date.getHours() >= 8 && date.getHours() < 12) {
-    return "上午好🌞！";
-  } else if (date.getHours() >= 12 && date.getHours() < 18) {
-    return "下午好☕！";
-  } else if (date.getHours() >= 18 && date.getHours() < 24) {
-    return "晚上好🌃！";
-  } else if (date.getHours() >= 0 && date.getHours() < 6) {
-    return "偷偷向银河要了一把碎星，只等你闭上眼睛撒入你的梦中，晚安🌛！";
-  }
-});
-
-const duration = 5000;
-
-// 收入金额
-const amount = ref(0);
-const amountOutput = useTransition(amount, {
-  duration: duration,
-  transition: TransitionPresets.easeOutExpo,
-});
-amount.value = 2000;
-
-// 访问数
-const visitCount = ref(0);
-const visitCountOutput = useTransition(visitCount, {
-  duration: duration,
-  transition: TransitionPresets.easeOutExpo,
-});
-visitCount.value = 2000;
-
-//消息数
-const messageCount = ref(0);
-const messageCountOutput = useTransition(messageCount, {
-  duration: duration,
-  transition: TransitionPresets.easeOutExpo,
-});
-messageCount.value = 2000;
-
-// 订单数
-const orderCount = ref(0);
-const orderCountOutput = useTransition(orderCount, {
-  duration: duration,
-  transition: TransitionPresets.easeOutExpo,
-});
-orderCount.value = 2000;
-</script>
-
-<template>
-  <div class="dashboard-container">
-    <!-- github角标 -->
-    
-
-    <!-- 用户信息 -->
-    <el-row class="mb-8">
-      <el-card class="w-full">
-        <div class="flex justify-between flex-wrap">
-          <div class="flex items-center">
-            <img
-              class="user-avatar"
-              :src="userStore.avatar + '?imageView2/1/w/80/h/80'"
-            />
-            <span class="ml-[10px] text-[16px]">
-              {{ userStore.nickname }}
-            </span>
-          </div>
-
-          <div class="leading-[40px]">
-            {{ greetings }}
-          </div>
-
-          <div v-if="false" class="space-x-2 flex items-center" >
-            <el-link
-              target="_blank"
-              type="danger"
-              href="https://www.cnblogs.com/haoxianrui/p/16090029.html"
-              >官方0到1教程</el-link
-            >
-            <el-divider direction="vertical" />
-            <el-link
-              target="_blank"
-              type="success"
-              href="https://gitee.com/youlaiorg/vue3-element-admin"
-              >Gitee源码</el-link
-            >
-            <el-divider direction="vertical" />
-            <el-link
-              target="_blank"
-              type="primary"
-              href="https://github.com/youlaitech/vue3-element-admin"
-              >GitHub源码
-            </el-link>
-          </div>
-        </div>
-      </el-card>
-    </el-row>
-
-    <!-- 数据卡片 -->
-    <el-row :gutter="40" class="mb-4">
-      <el-col :xs="24" :sm="12" :lg="6" class="mb-4">
-        <div class="data-box">
-          <div
-            class="text-[#40c9c6] hover:!text-white hover:bg-[#40c9c6] p-3 rounded"
-          >
-            <svg-icon icon-class="uv" size="3em" />
-          </div>
-          <div class="flex flex-col space-y-3">
-            <div class="text-[var(--el-text-color-secondary)]">访问数</div>
-            <div class="text-lg">
-              {{ Math.round(visitCountOutput) }}
-            </div>
-          </div>
-        </div>
-      </el-col>
-
-      <!--消息数-->
-      <el-col :xs="24" :sm="12" :lg="6" class="mb-4">
-        <div class="data-box">
-          <div
-            class="text-[#36a3f7] hover:!text-white hover:bg-[#36a3f7] p-3 rounded"
-          >
-            <svg-icon icon-class="message" size="3em" />
-          </div>
-          <div class="flex flex-col space-y-3">
-            <div class="text-[var(--el-text-color-secondary)]">消息数</div>
-            <div class="text-lg">
-              {{ Math.round(messageCountOutput) }}
-            </div>
-          </div>
-        </div>
-      </el-col>
-
-      <el-col :xs="24" :sm="12" :lg="6" class="mb-4">
-        <div class="data-box">
-          <div
-            class="text-[#f4516c] hover:!text-white hover:bg-[#f4516c] p-3 rounded"
-          >
-            <svg-icon icon-class="money" size="3em" />
-          </div>
-          <div class="flex flex-col space-y-3">
-            <div class="text-[var(--el-text-color-secondary)]">收入金额</div>
-            <div class="text-lg">
-              {{ Math.round(amountOutput) }}
-            </div>
-          </div>
-        </div>
-      </el-col>
-      <el-col :xs="24" :sm="12" :lg="6" class="mb-2">
-        <div class="data-box">
-          <div
-            class="text-[#34bfa3] hover:!text-white hover:bg-[#34bfa3] p-3 rounded"
-          >
-            <svg-icon icon-class="shopping" size="3em" />
-          </div>
-          <div class="flex flex-col space-y-3">
-            <div class="text-[var(--el-text-color-secondary)]">订单数</div>
-            <div class="text-lg">
-              {{ Math.round(orderCountOutput) }}
-            </div>
-          </div>
-        </div>
-      </el-col>
-    </el-row>
-
-    <!-- Echarts 图表 -->
-    <el-row :gutter="40">
-      <el-col :sm="24" :lg="8" class="mb-4">
-        <BarChart
-          id="barChart"
-          height="400px"
-          width="100%"
-          class="bg-[var(--el-bg-color-overlay)]"
-        />
-      </el-col>
-
-      <el-col :xs="24" :sm="12" :lg="8" class="mb-4">
-        <PieChart
-          id="pieChart"
-          height="400px"
-          width="100%"
-          class="bg-[var(--el-bg-color-overlay)]"
-        />
-      </el-col>
-
-      <el-col :xs="24" :sm="12" :lg="8" class="mb-4">
-        <RadarChart
-          id="radarChart"
-          height="400px"
-          width="100%"
-          class="bg-[var(--el-bg-color-overlay)]"
-        />
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.dashboard-container {
-  position: relative;
-  padding: 24px;
-
-  .user-avatar {
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-  }
-
-  .github-corner {
-    position: absolute;
-    top: 0;
-    right: 0;
-    z-index: 99;
-    border: 0;
-  }
-
-  .data-box {
-    display: flex;
-    justify-content: space-between;
-    padding: 20px;
-    font-weight: bold;
-    color: var(--el-text-color-regular);
-    background: var(--el-bg-color-overlay);
-    border-color: var(--el-border-color);
-    box-shadow: var(--el-box-shadow-dark);
-  }
-
-  .svg-icon {
-    fill: currentcolor !important;
-  }
-}
-</style>
diff --git a/src/views/sysworkflow/lowcodepage/appFormList.vue b/src/views/sysworkflow/lowcodepage/appFormList.vue
index 4d63f1f3f..002717e0f 100644
--- a/src/views/sysworkflow/lowcodepage/appFormList.vue
+++ b/src/views/sysworkflow/lowcodepage/appFormList.vue
@@ -226,6 +226,7 @@ const appKey = ref<string>("")
 @ 功能: 编辑app内容
 */
 const editAppCont = (val:string) => {
+	emits('getRongQiAttr')
 	appKey.value = val.toString();
 	appPageShow.value = true;
 }
diff --git a/src/views/sysworkflow/lowcodepage/appPage/appMenus.vue b/src/views/sysworkflow/lowcodepage/appPage/appMenus.vue
index b49320eb6..1a6f5ae94 100644
--- a/src/views/sysworkflow/lowcodepage/appPage/appMenus.vue
+++ b/src/views/sysworkflow/lowcodepage/appPage/appMenus.vue
@@ -239,6 +239,7 @@ const createNewPage = (val?:string) => {
 		@node-drop="handleDrop"
 	>
 		<template #default="{ node, data }">
+		
 		<div class="appMenuTitle">
 			<el-space wrap>
 				<svg-icon  prefix="icon" :icon-class="data.svg" @click="setAppMenusSvg(data)" />
diff --git a/src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageForm.vue b/src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageForm.vue
index 61af4c2fc..5bb53cf7b 100644
--- a/src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageForm.vue
+++ b/src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageForm.vue
@@ -11,7 +11,7 @@ import { FormData,formStruct,DrawerStruct, VideoMsg } from '@/api/DesignForm/typ
 
 
 //引入页面
-import DragControl from '@/components/DesignForm/dragControl.vue';
+import DragControlApp from '@/components/DesignForm/dragControlApp.vue';
 
 const props = defineProps({
 	appCont:{
@@ -63,8 +63,8 @@ const state =  computed({
 		emits('update:state', val)
 	}
 });
-
-const formKeyVal =  computed({
+provide('formDesignType', state.value.designType)
+const appFormKeyVal =  computed({
 	get() {
 		return props.formKey
 	},
@@ -73,7 +73,7 @@ const formKeyVal =  computed({
 	}
 });
 const versionCont = ref<customerFormVersionCont[]>([])			//版本内容列表
-
+const tableKey = ref("")
 // 搜索设计时左侧快速添加字段
 const searchCheckField = (data: FormData) => {
     state.value.formData.list.push(data)
@@ -93,25 +93,21 @@ const openAceEditDrawer = (params: any) => {
 </script>
 <template>
 	<el-aside class="asideBox leftBox">
-		<DragControl
-			v-model:versionid="props.formVersion"
-			:formid="state.formOtherData.source"
-			:versioncont="versionCont"
-      		@click-check="searchCheckField"
-      		@click="selectTemplate"
-			@editversionstaus="editversionstaus"
+		<DragControlApp
+			:table-key="state.formData.form.name"
+			@versionUpdateForm="versionUpdateForm"
 		/>
 	</el-aside>
 	<el-main class="mainBox rightBox">
-		
+		{{state.formData.config}}
 	</el-main>
 	<el-aside class="asideBox">
-		<form-control-attr
+		<formControlProperties
 			ref="formControlAttrEl"
 			v-model:formOtherData="state.formOtherData"
 			:form-data="state.formData.form"
 			:form-config="state.formData.config"
-			:customerformid="props.groupKey"
+			:customerformid="tableKey"
 			:form-list="state.formData.list"
 			:form-info="state.formData"
 			@open-dialog="openAceEditDrawer"
diff --git a/src/views/sysworkflow/lowcodepage/appPage/createAppFormPage.vue b/src/views/sysworkflow/lowcodepage/appPage/createAppFormPage.vue
index 02c102fbc..1383808f5 100644
--- a/src/views/sysworkflow/lowcodepage/appPage/createAppFormPage.vue
+++ b/src/views/sysworkflow/lowcodepage/appPage/createAppFormPage.vue
@@ -57,7 +57,7 @@ const state = reactive<formStruct>({
 			formName: formConfigCont.formName
 		},
 		config: {
-			groupKey:props.formGroupKey
+			groupKey:props.groupKey
 		},
 		styles:{
 			divStyle:{},
@@ -138,7 +138,7 @@ onBeforeMount(() => {
 						</el-tabs>
 					</div>
 					<div class="headRight">
-					{{ props.menuId }}
+					{{props.groupKey}}
 						<el-button type="danger" size="small" @click="closeSavePageForm" >关闭</el-button>
 					</div>
 				</el-header>

From cbd2458f17518fe28b8e74b65f60486d9435964c Mon Sep 17 00:00:00 2001
From: herenshan112 <herenshan112@163.com>
Date: Mon, 13 May 2024 11:43:49 +0800
Subject: [PATCH 5/5] =?UTF-8?q?=E4=BE=9D=E8=B5=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/types/components.d.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/types/components.d.ts b/src/types/components.d.ts
index 629ff6695..c342609f9 100644
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -120,6 +120,8 @@ declare module '@vue/runtime-core' {
     IEpClose: typeof import('~icons/ep/close')['default']
     IEpDelete: typeof import('~icons/ep/delete')['default']
     IEpEdit: typeof import('~icons/ep/edit')['default']
+    IEpMessageBox: typeof import('~icons/ep/message-box')['default']
+    IEpOperation: typeof import('~icons/ep/operation')['default']
     IEpPlus: typeof import('~icons/ep/plus')['default']
     IEpRefresh: typeof import('~icons/ep/refresh')['default']
     IEpSearch: typeof import('~icons/ep/search')['default']