diff --git a/src/api/DesignForm/types.ts b/src/api/DesignForm/types.ts
index 454dfcb27..14509f581 100644
--- a/src/api/DesignForm/types.ts
+++ b/src/api/DesignForm/types.ts
@@ -106,7 +106,13 @@ export interface formData{
 		formName:any
     };
     config: any;
-	events?:any
+	events?:any;
+	styles:{
+		divStyle:{},
+		labelStyle:{},
+		inputStyle:{}
+	};
+	purview?:any;
 }
 //表单基本信息
 export interface formTableInfo{
diff --git a/src/api/workflowapi/index.ts b/src/api/workflowapi/index.ts
index f4a65e55d..99139b612 100644
--- a/src/api/workflowapi/index.ts
+++ b/src/api/workflowapi/index.ts
@@ -95,3 +95,19 @@ export function switchFlowVersion(data: any) {
 		data: data
 	});
 }
+//判断是否已经存在工作流以及是否开启
+export function judgeFormFlowIsOpen(data: any) {
+	return request({
+		url: '/systemapi/task_flow/judgeFormFlowIsOpen',
+		method: 'post',
+		data: data
+	});
+}
+//开启或关闭表单流程
+export function openFormFlow(data: any) {
+	return request({
+		url: '/systemapi/task_flow/openFormFlow',
+		method: 'post',
+		data: data
+	});
+}
diff --git a/src/components/workflow/drwer/analysisForm.ts b/src/components/workflow/drwer/analysisForm.ts
new file mode 100644
index 000000000..8c8ce1276
--- /dev/null
+++ b/src/components/workflow/drwer/analysisForm.ts
@@ -0,0 +1,46 @@
+import { formData } from '@/api/DesignForm/types'
+/**
+@ 作者: 秦东
+@ 时间: 2024-03-13 08:31:44
+@ 功能: 分析自定义表格数据
+*/
+export const AnalysisForm = (formData:formData) => {
+	let mastAry = new Array
+	console.log("组件---->", formData)
+	if(formData.list && formData.list.length > 0) {
+		formData.list.forEach((item:any) => {
+			switch(item.type) {
+				case "tabs":
+					break;
+				case "title":
+					break;
+				case "txt":
+					break;
+				case "table":
+					break;
+				case "grid":
+					break;
+				case "card":
+					break;
+				case "divider":
+					break;
+				case "div":
+					break;
+				case "flex":
+					break;
+				case "button":
+					break;
+				default:
+					console.log("组件", item)
+					mastAry.push(
+						{
+							name:item.name,
+							value:4
+						}
+					)
+					break;
+			}
+		})
+	}
+	console.log("mastAry组件", mastAry)
+}
diff --git a/src/components/workflow/drwer/promoterDrawer.vue b/src/components/workflow/drwer/promoterDrawer.vue
index e08228444..ebc903272 100644
--- a/src/components/workflow/drwer/promoterDrawer.vue
+++ b/src/components/workflow/drwer/promoterDrawer.vue
@@ -5,10 +5,29 @@
 -->
 <script lang='ts' setup>
 import employeesDialog from '@/components/workflow/dialog/employeesDialog.vue'
-
+import { AnalysisForm } from '@/components/workflow/drwer/analysisForm'
 import $func from '@/utils/workflow/index'
 import { useStore } from '@/store/workflow/index' 
 
+
+const props = defineProps({
+	formData:{
+		type:Object,
+		default(){
+			return {}
+		}
+	}
+});
+
+const formData =  computed({
+	get() {
+		return props.formData
+	},
+	set(val: formStruct) {
+		emits('update:formData', val)
+	}
+});
+
 let flowPermission = ref([])
 let promoterVisible = ref(false)
 let checkedList = ref([])
@@ -17,6 +36,8 @@ let store = useStore()
 let { setPromoter, setFlowPermission } = store
 let promoterDrawer = computed(()=> store.promoterDrawer)
 let flowPermission1 = computed(()=> store.flowPermission1)
+let approverConfig1 = computed(():any=> store.approverConfig1)
+
 let visible = computed({
     get() {
         return promoterDrawer.value
@@ -48,14 +69,44 @@ const savePromoter = () => {
 const closeDrawer = () => {
     setPromoter(false)
 }
+/**
+@ 作者: 秦东
+@ 时间: 2024-03-13 08:24:54
+@ 功能: 解析表单
+*/
+const jieForm = () => {
+	AnalysisForm(formData.value)
+}
+
+
+
+onMounted(() => {
+	jieForm();
+})
 </script>
 <template>
 	<el-drawer v-model="visible" :append-to-body="true" title="发起人"  class="set_promoter" :show-close="false" :size="550" :before-close="savePromoter"> 
 		<div class="demo-drawer__content">
+			
             <div class="promoter_content drawer_content">
-                <p>{{ $func.arrToStr(flowPermission) || '所有人' }}</p>
-                <el-button type="primary" @click="addPromoter">添加/修改发起人</el-button>
+				<el-divider content-position="left">节点属性</el-divider>
+				<div class="info_box">
+					<p>{{ $func.arrToStr(flowPermission) || '所有人' }}</p>
+                	<el-button type="primary" @click="addPromoter">添加/修改发起人</el-button>
+				</div>
+				<br />
+				-----------------------------------------
+				<br />
+                {{approverConfig1}}<br />
+				<br />
+				-----------------------------------------
+				<br />
+				<!-- {{approverConfig1.value.nodeNumber}} <br />
+				{{approverConfig1.value.nodeName}} -->
+				<el-divider content-position="left">操作权限</el-divider>
+				{{formData}}
             </div>
+			
             <div class="demo-drawer__footer clear">
                 <el-button type="primary" @click="savePromoter">确 定</el-button>
                 <el-button @click="closeDrawer">取 消</el-button>
@@ -72,7 +123,10 @@ const closeDrawer = () => {
 <style  lang='scss' scoped>
 .set_promoter {
     .promoter_content {
-        padding: 0 20px;
+        padding: 0 0px;
+		.info_box{
+			padding: 0 20px;
+		}
         .el-button {
             margin-bottom: 20px;
         }
diff --git a/src/components/workflow/nodeWrap.vue b/src/components/workflow/nodeWrap.vue
index fde58cb1a..38a65b859 100644
--- a/src/components/workflow/nodeWrap.vue
+++ b/src/components/workflow/nodeWrap.vue
@@ -135,6 +135,10 @@ const reData = (data: any, addData: any) => {
 };
 const setPerson = (priorityLevel: any) => {
   var { type } = props.nodeConfig;
+
+console.log("选中节点--->",type,props.nodeConfig)
+
+
   if (type == 0) {
     setPromoter(true);
     setFlowPermission({
diff --git a/src/views/sysworkflow/lowcodepage/index.vue b/src/views/sysworkflow/lowcodepage/index.vue
index 051e6a01a..1029960d8 100644
--- a/src/views/sysworkflow/lowcodepage/index.vue
+++ b/src/views/sysworkflow/lowcodepage/index.vue
@@ -51,6 +51,7 @@ const refreshPage = (pageType:string) =>{
 		addFormGroupIsShow.value = false;
 	}
 }
+
 </script>
 <template>
 	<div ref="contbody" class="box_content">
@@ -68,8 +69,8 @@ const refreshPage = (pageType:string) =>{
 		</el-affix>
 
 
-		<LowCodeFormPage v-if="addFormIsShow" :drawer-with="drawerWith" :form-key="formKey" @refreshPage="refreshPage" />
-		<LowCodeFormGroupPage v-if="addFormGroupIsShow" :drawer-with="drawerWith" :group-key="groupKey" @refreshPage="refreshPage" />
+		<LowCodeFormPage v-if="addFormIsShow" :drawer-with="drawerWith" v-model:form-key="formKey" @refreshPage="refreshPage" />
+		<LowCodeFormGroupPage v-if="addFormGroupIsShow" :drawer-with="drawerWith"  :group-key="groupKey" @refreshPage="refreshPage" />
 
 
 
diff --git a/src/views/sysworkflow/lowcodepage/lowCodeFormPage.vue b/src/views/sysworkflow/lowcodepage/lowCodeFormPage.vue
index d48372152..87cb3ee3a 100644
--- a/src/views/sysworkflow/lowcodepage/lowCodeFormPage.vue
+++ b/src/views/sysworkflow/lowcodepage/lowCodeFormPage.vue
@@ -49,7 +49,8 @@ const state = reactive<formStruct>({
 			divStyle:{},
 			labelStyle:{},
 			inputStyle:{}
-		}
+		},
+		purview:{}
     },
     editor: {},
     loading: false,
@@ -63,6 +64,15 @@ const state = reactive<formStruct>({
     }
 })
 
+const formKeyStr =  computed({
+	get() {
+		return props.formKey
+	},
+	set(val: formStruct) {
+		emits('update:formKey', val)
+	}
+});
+
 
 const judgeFormIsEdit = (val:boolean) => {
 	pageDesignIsWrite.value = val;
@@ -150,19 +160,21 @@ const runNextWindows = (val:number) => {
 	creetTabsActive.value = val
 	tabsActive.value = val
 }
-
+onMounted(()=>{
+	formKeyStr.value = "13"
+})
 </script>
 <template>
 	<div  class="drawerClass">
 	<el-drawer  v-model="drawerOpenOrClose" title="设置/编辑自定义表单" :with-header="false" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :size="props.drawerWith">
 		<el-tabs v-model="tabsActive" @tab-click="handleClick" stretch class="tabsMain">
 			<el-tab-pane label="页面设计" :name="1">
-				<PageDesignEs v-model:state="state" :form-key="props.formKey" :formconfigcont="formConfigCont" @judgeFormIsEdit="judgeFormIsEdit" @runNextWindows="runNextWindows" @closeFormPage="closeFormPage" />
+				<PageDesignEs v-model:state="state"  v-model:form-key="formKeyStr" :formconfigcont="formConfigCont" @judgeFormIsEdit="judgeFormIsEdit" @runNextWindows="runNextWindows" @closeFormPage="closeFormPage" />
 			</el-tab-pane>
 			<el-tab-pane label="流程设计" :name="2">
-				<WorkFlow v-model:state="state" :form-key="props.formKey" @judgeFormIsEdit="judgeFormIsEdit" @runNextWindows="runNextWindows" @closeFormPage="closeFormPage" />
+				<WorkFlow v-model:state="state"  v-model:form-key="formKeyStr" @judgeFormIsEdit="judgeFormIsEdit" @runNextWindows="runNextWindows" @closeFormPage="closeFormPage" />
 			</el-tab-pane>
-			<el-tab-pane label="列表设计" :name="3"></el-tab-pane>
+			<el-tab-pane label="列表设计" :name="3">{{formKeyStr}}</el-tab-pane>
 			<el-tab-pane label="页面设置" :name="4"></el-tab-pane>
 		</el-tabs>
   	</el-drawer>
diff --git a/src/views/sysworkflow/lowcodepage/pageDesignes.vue b/src/views/sysworkflow/lowcodepage/pageDesignes.vue
index 9a4eeea68..1d90010e7 100644
--- a/src/views/sysworkflow/lowcodepage/pageDesignes.vue
+++ b/src/views/sysworkflow/lowcodepage/pageDesignes.vue
@@ -46,6 +46,7 @@ const props = defineProps({
 
 const emits = defineEmits<{
     (e: 'update:state', val: formStruct): void
+	(e: 'update:formKey', val: string): void
 	(e: 'judgeFormIsEdit', val: boolean): void
 	(e: 'runNextWindows', val: number): void
 	(e: 'closeFormPage'): void
@@ -59,6 +60,16 @@ const state =  computed({
 		emits('update:state', val)
 	}
 });
+
+const formKeyVal =  computed({
+	get() {
+		return props.formKey
+	},
+	set(val: formStruct) {
+		emits('update:formKey', val)
+	}
+});
+
 // 当前表单设计类型，供各子组件调用以展示不同页面，统一方式不需要每个组件都从路由中取
 provide('formDesignType', state.value.designType)
 const vueFileEl = ref()
@@ -140,7 +151,7 @@ const headToolClick = (type: string) => {
 			break
 		case 'save':			//保存
 			// saveData();
-			if(props.formKey != ""){
+			if(formKeyVal.value != ""){
 				editSaveData();
 			}else{
 				saveDataNew();
@@ -260,13 +271,14 @@ const saveDataNew = () => {
 
 	saveProductionForm(params)
 		.then((res: any) => {
-			// console.log("数据保存", res)
+			console.log("数据保存", res)
 			if(res.code == 0){
 				emits('judgeFormIsEdit', false)
 				ElMessage({
 					message: res.message || '保存成功！',
 					type: 'success'
 				})
+				emits('update:formKey', res.data.id)
 				// emits("handlequery");
 				// emits("update:draweropenclose", false);
 				emits("runNextWindows",2);
@@ -298,7 +310,7 @@ const editSaveData = () =>{
 		name: state.value.formOtherData.formName, // 表单名称，用于在显示所有已创建的表单列表里显示
 		type: 1, // 1表单 2列表
 		dict: json2string(state.value.formDict),
-		id:props.formKey.toString(),
+		id:formKeyVal.value.toString(),
 		version:versionId.value.toString(),
 	}
 	state.value.loading = true
@@ -466,9 +478,9 @@ const previewSubmit = () => {
 @ 功能: 获取表单内容
 */
 const getInitData = ()	=> {
-	if (props.formKey) {
+	if (formKeyVal.value) {
 		state.value.loading = true
-		getOneProductionForm({id: props.formKey.toString()})
+		getOneProductionForm({id: formKeyVal.value.toString()})
 			.then((res:any) => {
 				if(res.code == 0){
 					const result = res.data
@@ -532,7 +544,7 @@ onMounted(() => {
 			@editversionstaus="editversionstaus"
 		/>
 		<div class="main-body">
-			<HeadTools v-loading="state.loading" :customerformid="props.formKey" @click="headToolClick" />
+			<HeadTools v-loading="state.loading" :customerformid="formKeyVal" @click="headToolClick" />
 			<div v-loading="state.loading" class="main-form">
 				<div v-if="state.formData.list.length === 0" class="empty-tips">
 					从左侧拖拽来添加组件
@@ -549,7 +561,7 @@ onMounted(() => {
 			v-model:formOtherData="state.formOtherData"
 			:form-data="state.formData.form"
 			:form-config="state.formData.config"
-			:customerformid="props.formKey"
+			:customerformid="formKeyVal"
 			:form-list="state.formData.list"
 			@open-dialog="openAceEditDrawer"
 		/>
diff --git a/src/views/sysworkflow/lowcodepage/workFlow.vue b/src/views/sysworkflow/lowcodepage/workFlow.vue
index e2802094e..4d1a413bb 100644
--- a/src/views/sysworkflow/lowcodepage/workFlow.vue
+++ b/src/views/sysworkflow/lowcodepage/workFlow.vue
@@ -4,9 +4,11 @@
 @ 备注: 工作流
 -->
 <script lang='ts' setup>
+import '@/styles/workflowcss/workflow.scss'
+
 import { useStore } from '@/store/workflow/index' 
 import { flowversion } from '@/api/workflowapi/types'
-import { initializeWorkFlow,setWorkFlowData,gainFlowVersionList,saveFlowCont,gainFlowInfo,editFlowCont,saveNewFlow,switchFlowVersion } from '@/api/workflowapi/index'
+import { initializeWorkFlow,setWorkFlowData,gainFlowVersionList,saveFlowCont,gainFlowInfo,editFlowCont,saveNewFlow,switchFlowVersion,judgeFormFlowIsOpen,openFormFlow } from '@/api/workflowapi/index'
 
 import FlowImgSrc from '@/assets/images/3.png'
 
@@ -38,7 +40,32 @@ const state =  computed({
 		emits('update:state', val)
 	}
 });
+const formKeyVal =  computed({
+	get() {
+		return props.formKey
+	},
+	set(val: formStruct) {
+		emits('update:formKey', val)
+	}
+});
+let { setTableId, setIsTried } = useStore()
 const flowIsTrue = ref(false)
+const isRead = ref(false)      //判断操作功能按钮
+const openOfClise = ref(false)  //当前版本状态
+const versionList = reactive<flowversion[]>([]); //工作流版本列表
+const enableVersion = ref<string>("1");    //流程版本
+const enableFlow = ref<any>();
+const activeTabs = ref<string>("");			//当前工作流版本
+const isFormFlow = ref(true);		//兼容
+const closeOrOpenVersion = ref(false);  //判断是否显示版本启用与关闭
+
+let nowVal = ref(100);	//缩放比例
+let nodeConfig = ref<any>({}); 	//节点配置
+let flowPermission = ref([]); //工作流权限
+let processConfig = ref<any>({});	//工作流信息
+let directorMaxLeveling = ref<number>(0);	//主管深度（层级）
+let workFlowDef = ref({});			//流程名称
+let tipList = ref<any>([]);		//信息提示
 
 /**
 @ 作者: 秦东
@@ -46,19 +73,444 @@ const flowIsTrue = ref(false)
 @ 功能: 开启流程
 */
 const createFormFlow = () =>{
-	flowIsTrue.value = true
+	if(formKeyVal.value == ""){
+		flowIsTrue.value = false;
+		ElMessageBox.alert('您还未设置表单！请先设置完表单后，在创建流程！','温馨提示！',{
+			confirmButtonText: '确定',
+			callback: (action: Action) => {
+				emits("runNextWindows",1);
+			},
+		})
+	}else{
+		openOrCloseFormFlow(1)
+		getFlowVerList()
+		flowIsTrue.value = true
+	}
+	// flowIsTrue.value = true
 }
+const openOrCloseFormFlow = (val:number) => {
+	openFormFlow({id:formKeyVal.value.toString(),status:val})
+}
+//初始化工作流数据
+const initWorkFlowData = async() => {
+	let { data } = await initializeWorkFlow({name:state.value.formData.form.formName})
+	// console.log("data-=------>",data)
+	processConfig.value = data;
+	let {
+		nodeConfig:nodes,
+		flowPermission:flowPermissiones,
+		directorMaxLevel:levels,
+		workFlowDef:workName,
+		tableId,
+	} = data;
+	processConfig.value.workFlowDef.formKey = formKeyVal.value
+	nodeConfig.value = nodes;
+	flowPermission.value = flowPermissiones;
+	directorMaxLeveling = levels;
+	workFlowDef.value = workName;
+	setTableId(tableId);
+	// console.log("max--1->",data)
+	// console.log("max--6->",tableId)
+	// console.log("max--2->",flowPermission)
+	// console.log("max--3->",nodeConfig)
+	// console.log("max--4->",directorMaxLevel)
+	// console.log("max--5->",processConfig)
+}
+//缩放画布
+const zoomSize = (type:number) => {
+	if (type == 1) {
+		if (nowVal.value == 50) {
+		return;
+		}
+		nowVal.value -= 10;
+	} else {
+		if (nowVal.value == 300) {
+		return;
+		}
+		nowVal.value += 10;
+	}
+};
+
+//获取工作流版本列表
+const getFlowVerList = ()=>{
+	gainFlowVersionList({id:formKeyVal.value.toString()})
+		.then(({data})=>{
+			console.log("获取工作流版本列表-->",data)
+			// versionList = data;
+			versionList.splice(0,versionList.length)
+			if(data){
+				if(data.length>0){
+
+					data.forEach((item:any)=>{
+
+						if(item.state == 1){
+							activeTabs.value = item.id
+							enableFlow.value = item
+							enableVersion.value = item.id
+						}
+						versionList.push({
+							id:item.id,
+							key:item.key,
+							state:item.state,
+							version:item.version
+						})
+					})
+					if(versionList.length > 1){
+						closeOrOpenVersion.value = true
+					}else{
+						closeOrOpenVersion.value = false
+					}
+					
+					// console.log("获取工作流版本列表--1-1-->",enableFlow.value);
+					if(enableFlow.value == "" || enableFlow.value == undefined){
+						enableFlow.value = versionList[0]
+						// activeTabs.value = versionList[0].id
+						enableVersion.value = versionList[0].id
+					}
+					isRead.value = true
+				}else{
+					isRead.value = false
 
+				}
+			}
+			// console.log("获取工作流版本列表---1-->",activeTabs.value);
+			// console.log("获取工作流版本列表---2-->",enableFlow.value);
+			// console.log("获取工作流版本列表---3-->",enableVersion.value);
+			// console.log("获取工作流版本列表---3-1->",versionList[0],versionList);
+		})
+		.finally(()=>{
+			if(isRead.value == true){
+				gainFlowCont();
+			}else{
+				clearCanvas(1);
+			}
+			clickOpenOrClose();
+			
+		})
+}
+//判断当前工作流版本是否启用
+const clickOpenOrClose = () => {
+	console.log("判断当前工作流版本是否启用",enableFlow,activeTabs.value)
+	if(enableFlow.value.id==activeTabs.value){
+		openOfClise.value = true
+	}else{
+		openOfClise.value = false
+	}
+	// console.log("openOfClise",openOfClise.value)
+	// console.log("enableFlow.version=1=activeTabs",enableFlow.value,activeTabs.value)
+}
+//获取流程内容
+const gainFlowCont = () =>{
+	gainFlowInfo({id:enableVersion.value.toString()})
+		.then((data:any)=>{
+						// console.log("获取工作流版本列表-1->",data,enableFlow.value)
+			if(data.code == 0){
+				processConfig.value = data.data;
+				processConfig.value.workFlowDef.formKey = formKeyVal.value
+				nodeConfig.value = data.data.nodeConfig;
+				flowPermission.value = data.data.flowPermission;
+				directorMaxLeveling = data.data.directorMaxLevel;
+				workFlowDef.value = data.data.workFlowDef;
+				setTableId(data.data.tableId);
+				flowIsTrue.value = true;
+				// console.log("max--1->",data)
+				// console.log("max--6->",data.data.tableId)
+				// console.log("max--2->",data.data.flowPermission)
+				// console.log("max--3->",nodeConfig)
+				// console.log("max--4->",data.data.directorMaxLevel)
+				// console.log("max--5->",processConfig.value)
+			}else{
+				clearCanvas(1);
+			}
+			// initWorkFlowData();
+		})
+}
+//清空画布
+const clearCanvas = (isOk?:any) =>{
+	if(isOk==1){
+		initWorkFlowData()
+		setIsTried(false);
+		tipList.value = []
+	}else{
+		ElMessageBox.confirm('确定要清空画布?')
+		.then(() => {
+			initWorkFlowData()
+			setIsTried(false);
+			tipList.value = []
+		})
+	}
+	
+	enableFlow.value = ""
+}
+//错误提示
+const reErr = ({ childNode }:any) => {
+	if (childNode) {
+		let { type, error, nodeName, conditionNodes } = childNode;
+		if (type == 1 || type == 2 || type == 3) {
+			if (error) {
+				tipList.value.push({
+					name: nodeName,
+					type: ["", "审核人", "抄送人", "执行人"][type],
+				});
+			}
+			reErr(childNode);
+		} else if (type == 4) {
+			reErr(childNode);
+		} else if (type == 5) {
+			reErr(childNode);
+			for (var i = 0; i < conditionNodes.length; i++) {
+				if (conditionNodes[i].error) {
+					tipList.value.push({ name: conditionNodes[i].nodeName, type: "条件" });
+				}
+				reErr(conditionNodes[i]);
+			}
+		}
+	} else {
+		childNode = null;
+	}
+};
+//选择工作流版本
+const clickFormTable = (val:any) =>{
+	console.log("切换表单",val,activeTabs.value)
+	enableVersion.value = val
+	gainFlowCont();
+	clickOpenOrClose();
+	// getTableFieldList(versionIndex.value,val)
+}
+//流程版本启用禁用
+const setupState = (val:number) =>{
+	let sendCont = {
+		id:enableVersion.value.toString(),
+		status:val
+	}
+	if(val == 1){
+		activeTabs.value = enableVersion.value
+	}
+	switchFlowVersion(sendCont)
+		.then((data:any)=>{
+			ElMessage.success(data.msg);
+			// activeTabs.value = enableVersion.value
+			// enableFlow.value.id = enableVersion.value
+			if(versionList.length > 0){
+				versionList.forEach(item=>{
+					if(item.id == enableVersion.value){
+						enableFlow.value = item
+					}
+				})
+			}
+			
+		})
+		.finally(()=>{
+			clickOpenOrClose();
+		})
+	// console.log("enableFlow.version==activeTabs",enableFlow.version,activeTabs)
+}
+//发布新流程
+const saveSet = async () => {
+	setIsTried(true);
+	tipList.value = [];
+	
+	reErr(nodeConfig.value);
+	if (tipList.value.length != 0) {
+		tipVisible.value = true;
+		return;
+	}
+	processConfig.value.flowPermission = flowPermission.value;
+	// eslint-disable-next-line no-console
+	console.log("processConfig",processConfig.value);
+	console.log("flowPermission",flowPermission.value);
+	console.log("nodeConfig",nodeConfig.value);
+	saveFlowCont(processConfig.value)
+		.then((data:any) => {
+			if(data.code == 0){
+				ElMessage.success("设置成功");
+				emits("runNextWindows",3);
+				// clearCanvas(1);
+			}
+		})
+		.finally(()=>{
+			// emits("chanerequest");
+			getFlowVerList()
+		})
+	// let res = await setWorkFlowData(processConfig.value);
+	// if (res.code == 200) {
+	// 	ElMessage.success("设置成功")
+	// 	setTimeout(function () {
+	// 		window.location.href = "";
+	// 	}, 200);
+	// }
+	
+};
+//编辑当前版本流程
+const saveEdit =()=>{
+	setIsTried(true);
+	tipList.value = [];
+	
+	reErr(nodeConfig.value);
+	if (tipList.value.length != 0) {
+		tipVisible.value = true;
+		return;
+	}
+	processConfig.value.flowPermission = flowPermission.value;
+	// eslint-disable-next-line no-console
+	console.log("processConfig",flowPermission);
+	// console.log("flowPermission",flowPermission.value);
+	console.log("activeTabs",enableFlow.value);
+	let sendCont = {
+		id:enableVersion.value.toString(),
+		flowinfo:processConfig.value
+	}
+	editFlowCont(sendCont)
+		.then((data:any) => {
+			if(data.code == 0){
+				ElMessage.success("设置成功");
+				// emits("update:openDrawer", false);
+				// clearCanvas(1);
+				emits("runNextWindows",3);
+			}
+		})
+		.finally(()=>{
+			// emits("chanerequest");
+			getFlowVerList()
+		})
+}
+//另存为新版
+const saveNew = () => {
+	setIsTried(true);
+	tipList.value = [];
+	
+	reErr(nodeConfig.value);
+	if (tipList.value.length != 0) {
+		tipVisible.value = true;
+		return;
+	}
+	processConfig.value.flowPermission = flowPermission.value;
+	// eslint-disable-next-line no-console
+	// console.log("processConfig",flowPermission);
+	// console.log("flowPermission",flowPermission.value);
+	// console.log("activeTabs",enableFlow.value);
+	let sendCont = {
+		id:enableVersion.value.toString(),
+		flowinfo:processConfig.value
+	}
+	saveNewFlow(sendCont)
+		.then((data:any) => {
+			if(data.code == 0){
+				ElMessage.success("设置成功");
+				emits("runNextWindows",3);
+			}
+		})
+		.finally(()=>{
+			getFlowVerList()
+		})
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-03-12 15:49:35
+@ 功能: 关闭表单流程
+*/
+const closwFormFlow = () => {
+	flowIsTrue.value = false;
+	openOrCloseFormFlow(2)
+}
+onMounted(()=>{
+	if(formKeyVal.value == ""){
+		flowIsTrue.value = false;
+	}else{
+		judgeFormFlowIsOpen({id:formKeyVal.value.toString()})
+			.then((data)=>{
+				console.log("判断是否已经存在工作流以及是否开启",data)
+				if(data.data.isOpen == 1){
+					flowIsTrue.value = true;
+					getFlowVerList()
+				}else{
+					flowIsTrue.value = false;
+				}
+			})
+	}
+})
 </script>
 <template>
 	<div class="design_flow_work">
-		<el-row v-if="flowIsTrue" >
-			<el-col :span="24">1</el-col>
-			<el-col :span="24">2</el-col>
+		<el-row v-if="flowIsTrue" style="height: 100%;">
+			<el-col :span="24">
+				<table class="table_box">
+					<tr>
+						<td class="table_td_title"><el-text v-if="isRead">版本：</el-text></td>
+						<td class="table_td_info">
+							<div class="tabs_box">
+								<el-tabs v-if="isRead" v-model="activeTabs"  @tab-change="clickFormTable">
+									<el-tab-pane  v-for="item in versionList" :key="item.id" :name="item.id">
+										<template #label>
+											<el-icon><Share /></el-icon>
+											<span class="my-label">V{{item.version}}</span>
+										</template>
+									</el-tab-pane>
+								</el-tabs>
+							</div>
+							
+				
+							<div class="but_box">
+								<el-button v-if="isRead && !openOfClise && closeOrOpenVersion" type="success"  size="small" plain  @click="setupState(1)">
+									<el-icon class="el-icon--left"><Delete /></el-icon>
+									启用
+								</el-button>
+								<el-button v-if="isRead && openOfClise && closeOrOpenVersion"  type="warning"  size="small" plain @click="setupState(2)">
+									<el-icon class="el-icon--left"><Delete /></el-icon>
+									禁用
+								</el-button>
+								<el-button   size="small" plain  @click="clearCanvas">
+									<el-icon class="el-icon--left"><Delete /></el-icon>
+									清空
+								</el-button>
+								<el-button v-if="!isRead"   size="small" plain  @click="saveSet">
+									<el-icon class="el-icon--left"><Promotion /></el-icon>
+									发布
+								</el-button>
+								<el-button v-if="isRead"  size="small" plain @click="saveEdit">
+									<el-icon class="fa fa-save" style="margin-right:5px"></el-icon>
+									保存
+								</el-button>
+								<el-button v-if="isRead" type="warning"  size="small"  @click="saveNew">
+									<el-icon class="el-icon--left"><Share /></el-icon>
+									另存为新版
+								</el-button>
+								<el-button type="danger"  size="small" @click="closwFormFlow">
+									<el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
+									关闭流程
+								</el-button>
+							</div>
+						</td>
+					</tr>
+				</table>
+			</el-col>
+			<el-col :span="24">
+			
+				
+				<section class="dingflow-design" style="top:40px">		
+					<div class="zoom">
+						<div class="zoom-out" :class="nowVal == 50 && 'disabled'" @click="zoomSize(1)"></div>
+								<span>{{ nowVal }}%</span>
+						<div class="zoom-in" :class="nowVal == 300 && 'disabled'" @click="zoomSize(2)"></div>
+					</div>
+					<div class="box-scale" :style="`transform: scale(${ nowVal / 100});`">
+						<nodeWrap v-model:nodeConfig="nodeConfig" v-model:flowPermission="flowPermission" />
+						<div class="end-node">
+							<div class="end-node-circle"></div>
+							<div class="end-node-text">流程结束</div>
+						</div>
+					</div>
+				</section>
+				<errorDialog v-model:visible="tipVisible" :list="tipList" />
+				<promoterDrawer v-model:form-data="state.formData" />
+				<approverDrawer :directormaxlevel="directorMaxLeveling" :node-config="nodeConfig"  :is-form-flow="isFormFlow"  :customer-form-key="formKeyVal" />
+				<copyerDrawer />
+				<conditionDrawer  :is-form-flow="isFormFlow"  :customer-form-key="formKeyVal" />
+			</el-col>
 		</el-row>
 		<div v-else class="flow_work_begin">
 			<el-result title="" sub-title="">
-				<template #icon>
+				<template #icon>{{formKeyVal}}<br>{{state}} <br>
 					流程可实现需要多人流转的业务场景。<br>绘制流程图，设定数据流转方式，即可搭建线上工作流。<br><br>
 					<el-image
 						:src="FlowImgSrc"
@@ -85,4 +537,69 @@ const createFormFlow = () =>{
 	align-items: center;
   	justify-content: center;
 }
+/* 去掉tabs标签栏下的下划线 */
+::v-deep .el-tabs__nav-wrap::after {
+  position: static !important;
+  /* background-color: #fff; */
+}
+::v-deep .el-tabs__item{
+	padding:0 10px;
+}
+.version_but{
+	display: flex;
+	align-items: center;
+  	justify-content: space-between;
+}
+.tabs_box{
+	max-width: 60%;
+	min-width:30%
+}
+.but_box{
+	max-width: 50%;
+	min-width: 40%;
+	overflow: hidden;
+	overflow-x: auto;
+	padding:5px 10px 5px 0;
+	text-align: right;
+}
+
+.table_box{
+	width: 100%;
+}
+.table_td_title{
+	width: 60px;
+	text-align: right;
+	align-items: center;
+	vertical-align: middle;
+}
+.table_td_info{
+	display: flex;
+	// width: calc(100% - 100px);
+	align-items: center;
+  	justify-content: space-between;
+}
+</style>
+<style>
+.canvas_body{
+	height: 100%;
+    width: inherit;
+}
+.flow_version{
+	
+}
+.flow_version > .el-tabs__content{
+    padding: 0px;
+	height:0px;
+}
+.flow_version > .el-tabs__header{
+	margin:0px;
+}
+.flow_version .custom-tabs-label span {
+  padding:0 10px;
+}
+
+.right_kongx{
+	margin-right:50px
+	
+}
 </style>