diff --git a/package.json b/package.json
index 8dc067c03..bc416ca49 100644
--- a/package.json
+++ b/package.json
@@ -50,13 +50,14 @@
     "clipboard": "^2.0.11",
     "echarts": "^5.2.2",
     "element-plus": "^2.3.4",
+    "font-awesome": "^4.7.0",
     "js-beautify": "^1.14.8",
     "js-md5": "^0.7.3",
     "md5": "^2.3.0",
     "nprogress": "^0.2.0",
     "path-browserify": "^1.0.1",
     "path-to-regexp": "^6.2.0",
-    "pinia": "^2.0.33",
+    "pinia": "^2.1.6",
     "screenfull": "^6.0.0",
     "tinymce": "^6.7.0",
     "ts-md5": "^1.3.1",
@@ -84,6 +85,7 @@
     "eslint-plugin-vue": "^9.13.0",
     "fast-glob": "^3.2.11",
     "husky": "^8.0.3",
+    "less": "^4.2.0",
     "lint-staged": "^13.2.2",
     "postcss": "^8.4.23",
     "postcss-html": "^1.5.0",
diff --git a/src/api/workflowapi/index.ts b/src/api/workflowapi/index.ts
new file mode 100644
index 000000000..e3c5fe91e
--- /dev/null
+++ b/src/api/workflowapi/index.ts
@@ -0,0 +1,23 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+
+import { 
+	formTableName
+} from '@/api/workflowapi/types'
+
+//初始化工作流
+export function initializeWorkFlow(data: formTableName) {
+	return request({
+		url: '/systemapi/task_flow/init_workflow',
+		method: 'post',
+		data: data
+	});
+}
+//保存工作流
+export function setWorkFlowData(data: any):any {
+	return request({
+		url: '/systemapi/task_flow/init_workflow',
+		method: 'post',
+		data: data
+	});
+}
diff --git a/src/api/workflowapi/types.ts b/src/api/workflowapi/types.ts
new file mode 100644
index 000000000..859dfd0a0
--- /dev/null
+++ b/src/api/workflowapi/types.ts
@@ -0,0 +1,9 @@
+//表单名称
+export interface formTableName{
+	name?: string;
+}
+
+//错误提示
+export interface tipListStrucr{
+	
+}
diff --git a/src/components/workflow/addNode.vue b/src/components/workflow/addNode.vue
new file mode 100644
index 000000000..550665f1c
--- /dev/null
+++ b/src/components/workflow/addNode.vue
@@ -0,0 +1,249 @@
+<!--
+@ 作者: 秦东
+@ 时间: 2023-10-10 14:23:45
+@ 备注: 添加节点弹窗
+-->
+<script lang='ts' setup>
+let props = defineProps({
+    childNodeP: {
+        type: Object,
+        default: ()=> ({})
+    }
+})
+let emits = defineEmits(['update:childNodeP'])
+let visible = ref(false)
+//添加节点
+const addType = (type)=> {
+    visible.value = false;
+    if (type != 4) {
+        var data;
+        if (type == 1) {
+            data = {
+                "nodeName": "审核人",
+                "error": true,
+                "type": 1,
+                "settype": 1,
+                "selectMode": 0,
+                "selectRange": 0,
+                "directorLevel": 1,
+                "examineMode": 1,
+                "noHanderAction": 1,
+                "examineEndDirectorLevel": 0,
+                "childNode": props.childNodeP,
+                "nodeUserList": []
+            }
+        } else if (type == 2) {
+            data = {
+                "nodeName": "抄送人",
+                "type": 2,
+                "ccSelfSelectFlag": 1,
+                "childNode": props.childNodeP,
+                "nodeUserList": []
+            }
+        }else if (type == 3) {
+            data = {
+                "nodeName": "审核人",
+                "error": true,
+                "type": 3,
+                "settype": 1,
+                "selectMode": 0,
+                "selectRange": 0,
+                "directorLevel": 1,
+                "examineMode": 1,
+                "noHanderAction": 1,
+                "examineEndDirectorLevel": 0,
+                "childNode": props.childNodeP,
+                "nodeUserList": []
+            }
+        }
+        emits("update:childNodeP", data)
+    } else {
+        emits("update:childNodeP", {
+            "nodeName": "路由",
+            "type": 5,
+            "childNode": null,
+            "conditionNodes": [{
+                "nodeName": "条件1",
+                "error": true,
+                "type": 3,
+                "priorityLevel": 1,
+                "conditionList": [],
+                "nodeUserList": [],
+                "childNode": props.childNodeP,
+            }, {
+                "nodeName": "条件2",
+                "type": 3,
+                "priorityLevel": 2,
+                "conditionList": [],
+                "nodeUserList": [],
+                "childNode": null
+            }]
+        })
+    }
+}
+</script>
+<template>
+	<div class="add-node-btn-box">
+		<div class="add-node-btn">
+			<el-popover v-model="visible" placement="right-start"  width="auto">
+				<div class="add-node-popover-body">
+                    <a class="add-node-popover-item approver" @click="addType(1)">
+                        <div class="item-wrapper">
+                            <span class="iconfont"><el-icon><Stamp /></el-icon></span>
+                        </div>
+                        <p>审批人</p>
+                    </a>
+                    <a class="add-node-popover-item notifier" @click="addType(2)">
+                        <div class="item-wrapper">
+                            <span class="iconfont"><i class="fa fa-send"></i></span>
+                        </div>
+                        <p>抄送人</p>
+                    </a>
+					<a class="add-node-popover-item approver" @click="addType(3)">
+                        <div class="item-wrapper">
+                            <span class="iconfont"><i class="fa fa-pencil-square-o"></i></span>
+                        </div>
+                        <p>处理</p>
+                    </a>
+                    <a class="add-node-popover-item condition" @click="addType(4)">
+                        <div class="item-wrapper">
+                            <span class="iconfont"><i class="fa fa-sitemap"></i></span>
+                        </div>
+                        <p>条件分支</p>
+                    </a>
+                </div>
+				<template #reference>
+                    <button class="btn" type="button">
+                        <span class="iconfont"></span>
+                    </button>
+                </template>
+			</el-popover>
+		</div>
+	</div>
+</template>
+<style  lang='scss' scoped>
+
+</style>
+<style scoped lang="less">
+.add-node-btn-box {
+    width: 240px;
+    display: -webkit-inline-box;
+    display: -ms-inline-flexbox;
+    display: inline-flex;
+    -ms-flex-negative: 0;
+    flex-shrink: 0;
+    -webkit-box-flex: 1;
+    -ms-flex-positive: 1;
+    position: relative;
+    &:before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: -1;
+        margin: auto;
+        width: 2px;
+        height: 100%;
+        background-color: #cacaca
+    }
+    .add-node-btn {
+        user-select: none;
+        width: 240px;
+        padding: 20px 0 32px;
+        display: flex;
+        -webkit-box-pack: center;
+        justify-content: center;
+        flex-shrink: 0;
+        -webkit-box-flex: 1;
+        flex-grow: 1;
+        .btn {
+            outline: none;
+            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
+            width: 30px;
+            height: 30px;
+            background: #3296fa;
+            border-radius: 50%;
+            position: relative;
+            border: none;
+            line-height: 30px;
+            -webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1);
+            transition: all .3s cubic-bezier(.645, .045, .355, 1);
+            .iconfont {
+                color: #fff;
+                font-size: 16px
+            }
+            &:hover {
+                transform: scale(1.3);
+                box-shadow: 0 13px 27px 0 rgba(0, 0, 0, .1)
+            }
+            &:active {
+                transform: none;
+                background: #1e83e9;
+                box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1)
+            }
+        }
+    }
+}
+</style>
+<style lang="less">
+.add-node-popover-body {
+    display: flex;
+    .add-node-popover-item {
+        margin-right: 10px;
+        cursor: pointer;
+        text-align: center;
+        flex: 1;
+        color: #191f25!important;
+        .item-wrapper {
+            user-select: none;
+            display: inline-block;
+            width: 80px;
+            height: 80px;
+            margin-bottom: 5px;
+            background: #fff;
+            border: 1px solid #e2e2e2;
+            border-radius: 50%;
+            transition: all .3s cubic-bezier(.645, .045, .355, 1);
+            .iconfont {
+                font-size: 35px;
+                line-height: 80px
+            }
+        }
+        &.approver{
+            .item-wrapper {
+                color: #ff943e
+            }
+        }
+        &.notifier{
+            .item-wrapper {
+                color: #3296fa
+            }
+        }
+        &.condition{
+            .item-wrapper {
+                color: #15bc83
+            }
+        }
+        &:hover{
+            .item-wrapper {
+                background: #3296fa;
+                box-shadow: 0 10px 20px 0 rgba(50, 150, 250, .4)
+            }
+            .iconfont {
+                color: #fff
+            }
+        }
+        &:active{
+            .item-wrapper {
+                box-shadow: none;
+                background: #eaeaea
+            }
+            .iconfont {
+                color: inherit
+            }
+        }
+    }
+}
+</style>
diff --git a/src/components/workflow/nodeWrap.vue b/src/components/workflow/nodeWrap.vue
new file mode 100644
index 000000000..e63c915b8
--- /dev/null
+++ b/src/components/workflow/nodeWrap.vue
@@ -0,0 +1,299 @@
+<!--
+@ 作者: 秦东
+@ 时间: 2023-10-10 11:30:42
+@ 备注: 工作流引擎主干
+-->
+<script lang='ts' setup>
+import $func from '@/utils/workflow/index'
+import { useStore } from '@/store/workflow/index' 
+import { bgColors, placeholderList } from '@/utils/workflow/const'
+
+let _uid = getCurrentInstance().uid;
+
+let props = defineProps({
+    nodeConfig: {
+        type: Object,
+        default: () => ({}),
+    },
+    flowPermission: {
+        type: Object,
+        // eslint-disable-next-line vue/require-valid-default-prop
+        default: () => [],
+    },
+});
+//pinia 相关数据操作
+let store = useStore();
+let {
+    setPromoter,
+    setApprover,
+    setCopyer,
+    setCondition,
+    setFlowPermission,
+    setApproverConfig,
+    setCopyerConfig,
+    setConditionsConfig,
+} = store;
+let isTried = computed(()=> store.isTried)
+let flowPermission1 = computed(()=> store.flowPermission1)
+let approverConfig1 = computed(()=> store.approverConfig1)
+let copyerConfig1 = computed(()=> store.copyerConfig1)
+let conditionsConfig1 = computed(()=> store.conditionsConfig1)
+
+let defaultText = computed(() => {
+    return placeholderList[props.nodeConfig.type]
+});
+let showText = computed(() => {
+    if (props.nodeConfig.type == 0) return $func.arrToStr(props.flowPermission) || '所有人'
+    if (props.nodeConfig.type == 1) return $func.setApproverStr(props.nodeConfig)
+    return $func.copyerStr(props.nodeConfig)
+});
+let isInputList = ref([]);
+let isInput = ref(false);
+const resetConditionNodesErr = () => {
+    for (var i = 0; i < props.nodeConfig.conditionNodes.length; i++) {
+        // eslint-disable-next-line vue/no-mutating-props
+        props.nodeConfig.conditionNodes[i].error = $func.conditionStr(props.nodeConfig, i) == "请设置条件" && i != props.nodeConfig.conditionNodes.length - 1;
+    }
+}
+
+const clickEvent = (index) => {
+    if (index || index === 0) {
+        isInputList.value[index] = true;
+    } else {
+        isInput.value = true;
+    }
+};
+const blurEvent = (index) => {
+    if (index || index === 0) {
+        isInputList.value[index] = false;
+        // eslint-disable-next-line vue/no-mutating-props
+        props.nodeConfig.conditionNodes[index].nodeName = props.nodeConfig.conditionNodes[index].nodeName || "条件";
+    } else {
+        isInput.value = false;
+        // eslint-disable-next-line vue/no-mutating-props
+        props.nodeConfig.nodeName = props.nodeConfig.nodeName || defaultText
+    }
+};
+//删除节点
+const delNode = () => {
+    emits("update:nodeConfig", props.nodeConfig.childNode);
+};
+let emits = defineEmits(["update:flowPermission", "update:nodeConfig"]);
+const addTerm = () => {
+    let len = props.nodeConfig.conditionNodes.length + 1;
+    // eslint-disable-next-line vue/no-mutating-props
+    props.nodeConfig.conditionNodes.push({
+        nodeName: "条件" + len,
+        type: 3,
+        priorityLevel: len,
+        conditionList: [],
+        nodeUserList: [],
+        childNode: null,
+    });
+    resetConditionNodesErr()
+    emits("update:nodeConfig", props.nodeConfig);
+};
+const delTerm = (index) => {
+    // eslint-disable-next-line vue/no-mutating-props
+    props.nodeConfig.conditionNodes.splice(index, 1);
+    props.nodeConfig.conditionNodes.map((item, index) => {
+        item.priorityLevel = index + 1;
+        item.nodeName = `条件${index + 1}`;
+    });
+    resetConditionNodesErr()
+    emits("update:nodeConfig", props.nodeConfig);
+    if (props.nodeConfig.conditionNodes.length == 1) {
+        if (props.nodeConfig.childNode) {
+            if (props.nodeConfig.conditionNodes[0].childNode) {
+                reData(props.nodeConfig.conditionNodes[0].childNode, props.nodeConfig.childNode);
+            } else {
+                // eslint-disable-next-line vue/no-mutating-props
+                props.nodeConfig.conditionNodes[0].childNode = props.nodeConfig.childNode;
+            }
+        }
+        emits("update:nodeConfig", props.nodeConfig.conditionNodes[0].childNode);
+    }
+};
+const reData = (data, addData) => {
+    if (!data.childNode) {
+        data.childNode = addData;
+    } else {
+        reData(data.childNode, addData);
+    }
+};
+const setPerson = (priorityLevel) => {
+    var { type } = props.nodeConfig;
+    if (type == 0) {
+        setPromoter(true);
+        setFlowPermission({
+            value: props.flowPermission,
+            flag: false,
+            id: _uid,
+        });
+    } else if (type == 1) {
+        setApprover(true);
+        setApproverConfig({
+            value: {
+                ...JSON.parse(JSON.stringify(props.nodeConfig)),
+                ...{ settype: props.nodeConfig.settype ? props.nodeConfig.settype : 1 },
+            },
+            flag: false,
+            id: _uid,
+        });
+    } else if (type == 2) {
+        setCopyer(true);
+        setCopyerConfig({
+            value: JSON.parse(JSON.stringify(props.nodeConfig)),
+            flag: false,
+            id: _uid,
+        });
+    } else {
+        setCondition(true);
+        setConditionsConfig({
+            value: JSON.parse(JSON.stringify(props.nodeConfig)),
+            priorityLevel,
+            flag: false,
+            id: _uid,
+        });
+    }
+};
+const arrTransfer = (index, type = 1) => {
+    //向左-1,向右1
+    // eslint-disable-next-line vue/no-mutating-props
+    props.nodeConfig.conditionNodes[index] = props.nodeConfig.conditionNodes.splice(
+        index + type,
+        1,
+        props.nodeConfig.conditionNodes[index]
+    )[0];
+    props.nodeConfig.conditionNodes.map((item, index) => {
+        item.priorityLevel = index + 1;
+    });
+    resetConditionNodesErr()
+    emits("update:nodeConfig", props.nodeConfig);
+};
+//监听组块
+watch(flowPermission1, (flow) => {
+    if (flow.flag && flow.id === _uid) {
+        emits("update:flowPermission", flow.value);
+    }
+});
+watch(approverConfig1, (approver) => {
+    if (approver.flag && approver.id === _uid) {
+        emits("update:nodeConfig", approver.value);
+    }
+});
+watch(copyerConfig1, (copyer) => {
+    if (copyer.flag && copyer.id === _uid) {
+        emits("update:nodeConfig", copyer.value);
+    }
+});
+watch(conditionsConfig1, (condition) => {
+    if (condition.flag && condition.id === _uid) {
+        emits("update:nodeConfig", condition.value);
+    }
+});
+
+
+onMounted(() => {
+	if (props.nodeConfig.type == 1) {
+        // eslint-disable-next-line vue/no-mutating-props
+        props.nodeConfig.error = !$func.setApproverStr(props.nodeConfig);
+    } else if (props.nodeConfig.type == 2) {
+        // eslint-disable-next-line vue/no-mutating-props
+        props.nodeConfig.error = !$func.copyerStr(props.nodeConfig);
+    } else if (props.nodeConfig.type == 4) {
+        resetConditionNodesErr()
+    }
+})
+</script>
+<template>
+	<!--通用模块（0 发起人 1审批 2抄送 3处理 4条件 5路由）-->
+	<div v-if="nodeConfig.type < 4" class="node-wrap" >
+		<div class="node-wrap-box" :class="(nodeConfig.type == 0 ? 'start-node ' : '') +(isTried && nodeConfig.error ? 'active error' : '')">
+			<!--标签头部-->
+			<div class="title" :style="`background: rgb(${bgColors[nodeConfig.type]});`">	
+				<span v-if="nodeConfig.type == 0">{{ nodeConfig.nodeName }}</span>
+				<template v-else>
+					<span class="iconfont">{{nodeConfig.type == 1?'':''}}</span>
+					<input
+					v-if="isInput"
+					v-model="nodeConfig.nodeName"
+					type="text"
+					class="ant-input editable-title-input"
+					@blur="blurEvent()"
+					@focus="$event.currentTarget.select()"
+					v-focus
+					:placeholder="defaultText"
+					/>
+					<span v-else class="editable-title" @click="clickEvent()">{{ nodeConfig.nodeName }}</span>
+					<i class="anticon anticon-close close" @click="delNode"></i>
+				</template>
+			</div>
+			<!--标签主体-->
+			<div class="content" @click="setPerson">
+				<div class="text">
+					<span class="placeholder" v-if="!showText">请选择{{defaultText}}</span>
+					{{showText}}
+				</div>
+				<i class="anticon anticon-right arrow"></i>
+			</div>
+			<!--标签错误提示-->
+			<div class="error_tip" v-if="isTried && nodeConfig.error">
+				<i class="anticon anticon-exclamation-circle"></i>
+			</div>
+		</div>
+		<addNode v-model:childNodeP="nodeConfig.childNode" />
+	</div>
+	<!--路由模块-->
+	<div v-if="nodeConfig.type == 5" class="node-wrap" >
+		<div class="branch-box-wrap">
+			<div class="branch-box">
+				<button class="add-branch" @click="addTerm">添加条件</button>
+				<div class="col-box" v-for="(item, index) in nodeConfig.conditionNodes" :key="index">
+					<div class="condition-node">
+						<div class="condition-node-box">
+							<div class="auto-judge" :class="isTried && item.error ? 'error active' : ''">
+								<div class="sort-left" v-if="index != 0" @click="arrTransfer(index, -1)">&lt;</div>
+								<div class="title-wrapper">
+									<input
+										v-if="isInputList[index]"
+										type="text"
+										class="ant-input editable-title-input"
+										@blur="blurEvent(index)"
+										@focus="$event.currentTarget.select()"
+										v-focus
+										v-model="item.nodeName"
+									/>
+									<span v-else class="editable-title" @click="clickEvent(index)">{{ item.nodeName }}</span>
+									<span class="priority-title" @click="setPerson(item.priorityLevel)">优先级{{ item.priorityLevel }}</span>
+									<i class="anticon anticon-close close" @click="delTerm(index)"></i>
+								</div>
+								<div class="sort-right" v-if="index != nodeConfig.conditionNodes.length - 1" @click="arrTransfer(index)">&gt;</div>
+								<div class="content" @click="setPerson(item.priorityLevel)">{{ $func.conditionStr(nodeConfig, index) }}</div>
+								<div class="error_tip" v-if="isTried && item.error">
+									<i class="anticon anticon-exclamation-circle"></i>
+								</div>
+							</div>
+							<addNode v-model:childNodeP="item.childNode" />
+						</div>
+					</div>
+					<nodeWrap v-if="item.childNode" v-model:nodeConfig="item.childNode" />
+					<template v-if="index == 0">
+						<div class="top-left-cover-line"></div>
+						<div class="bottom-left-cover-line"></div>
+					</template>
+					<template v-if="index == nodeConfig.conditionNodes.length - 1">
+						<div class="top-right-cover-line"></div>
+						<div class="bottom-right-cover-line"></div>
+					</template>
+				</div>
+			</div>
+			<addNode v-model:childNodeP="nodeConfig.childNode" />
+		</div>
+	</div>
+	<!--循环组件-->
+	<nodeWrap v-if="nodeConfig.childNode" v-model:nodeConfig="nodeConfig.childNode"/>
+</template>
+<style  lang='scss' scoped>
+
+</style>
diff --git a/src/main.ts b/src/main.ts
index c6ee306ab..7eb4b790d 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -15,10 +15,13 @@ import 'virtual:svg-icons-register';
 // 国际化
 import i18n from '@/lang/index';
                                                                                                                                                                    
-// 样式                                                                                                                                                                                                                                                 
+// 样式   
+import 'font-awesome/css/font-awesome.min.css'
+import 'element-plus/es/components/message/style/css';                                                                                                                                                                                                                                           
 import 'element-plus/theme-chalk/dark/css-vars.css';
 import '@/styles/index.scss';
 import 'uno.css';
+import '@/styles/workflowcss/override-element-ui.css'
 
 import ComComponents from '@/components/DesignForm/index'
 
diff --git a/src/store/workflow/index.ts b/src/store/workflow/index.ts
new file mode 100644
index 000000000..68739f121
--- /dev/null
+++ b/src/store/workflow/index.ts
@@ -0,0 +1,52 @@
+/**
+ * 缓存工作流节点内容
+ */
+import { defineStore } from 'pinia';
+export const useStore = defineStore('store', {
+	state: () => ({
+		tableId: '',
+		isTried: false,
+		promoterDrawer: false,
+		flowPermission1: {},
+		approverDrawer: false,
+		approverConfig1: {},
+		copyerDrawer: false,
+		copyerConfig1: {},
+		conditionDrawer: false,
+		conditionsConfig1: {
+			conditionNodes: [],
+		},
+	}),
+	actions: {
+		setTableId(payload:any) {
+			this.tableId = payload
+		},
+		setIsTried(payload:any) {
+			this.isTried = payload
+		},
+		setPromoter(payload:any) {
+			this.promoterDrawer = payload
+		},
+		setFlowPermission(payload:any) {
+			this.flowPermission1 = payload
+		},
+		setApprover(payload:any) {
+			this.approverDrawer = payload
+		},
+		setApproverConfig(payload:any) {
+			this.approverConfig1 = payload
+		},
+		setCopyer(payload:any) {
+			this.copyerDrawer = payload
+		},
+		setCopyerConfig(payload:any) {
+			this.copyerConfig1 = payload
+		},
+		setCondition(payload:any) {
+			this.conditionDrawer = payload
+		},
+		setConditionsConfig(payload:any) {
+			this.conditionsConfig1 = payload
+		},
+	}
+})
diff --git a/src/styles/workflowcss/override-element-ui.css b/src/styles/workflowcss/override-element-ui.css
new file mode 100644
index 000000000..746993df5
--- /dev/null
+++ b/src/styles/workflowcss/override-element-ui.css
@@ -0,0 +1,114 @@
+.el-drawer__header {
+    margin-bottom: 0 !important;
+    padding: 14px 5px 14px 5px !important;
+    /* border-bottom: 1px solid #f2f2f2 !important; */
+    color: #323232 !important;
+    font-size: 16px !important;
+}
+.el-drawer__header .el-drawer__title{
+    font-size: 16px !important;
+}
+.demo-drawer__content {
+    display: flex !important;
+    flex-direction: column !important;
+    height: 100% !important;
+}
+
+.drawer_content {
+    flex: 1 !important;
+}
+
+.demo-drawer__content>div {
+    border-top: 1px solid #F2F2F2 !important;
+}
+
+/* .el-button {
+    min-width: 79px !important;
+    padding: 8px 12px !important;
+    font-size: 12px !important;
+    border-radius: 2px !important;
+    color: #323232 !important;
+    background: #f2f2f2 !important;
+    height: 30px !important;
+}
+
+.el-button.el-button--primary {
+    background: #46A6FE !important;
+    color: #fff !important;
+} */
+
+.demo-drawer__footer {
+    padding: 10px 30px !important;
+    border-top: 1px solid #F2F2F2 !important;
+}
+
+.demo-drawer__footer .el-button {
+    float: right !important;
+    margin-right: 10px !important;
+}
+
+/* .el-dialog {
+    width: 520px;
+    border: 1px solid #DDE1E5 !important;
+    border-radius: 3px !important;
+}
+
+.el-dialog__header {
+    padding: 0 0 0 20px !important;
+    line-height: 50px !important;
+    height: 50px !important;
+    background: #fff !important;
+    border-bottom: 1px solid #F2F2F2 !important;
+}
+
+.el-dialog__header .el-dialog__title {
+    font-size: 16px !important;
+    line-height: 50px !important;
+    color: #333333 !important;
+}
+
+.el-dialog__header .el-dialog__headerbtn {
+    height: 12px !important;
+    width: 12px !important;
+}
+
+.el-dialog__header .el-icon-close {
+    width: 12px !important;
+    height: 12px !important;
+    float: left !important;
+} */
+
+/* .el-dialog__header .el-icon-close::before {
+    display: block !important;
+    width: 12px !important;
+    height: 12px !important;
+    background: url(~@/assets/images/add-close.png) no-repeat center !important;
+    background-size: 100% 100% !important;
+    content: "" !important;
+} */
+.el-drawer__body {
+    padding: 0 !important;
+}
+/* .el-dialog__footer {
+    border-top: 1px solid #F2F2F2 !important;
+    padding-bottom: 10px !important;
+} */
+
+/* .el-checkbox,
+.el-checkbox__input.is-checked+.el-checkbox__label,
+.el-radio,
+.el-radio__input.is-checked+.el-radio__label,
+.el-dialog__body,
+.el-tree {
+    color: #333 !important;
+}
+
+.el-radio__label, .el-checkbox__label {
+    font-size: 12px !important;
+}
+.my-el-custom-spinner {
+    display: inline-block !important;
+    width: 80px !important;
+    height: 80px !important;
+    background: url(~@/assets/images/loading.gif) no-repeat center !important;
+} */
diff --git a/src/styles/workflowcss/workflow.css b/src/styles/workflowcss/workflow.css
new file mode 100644
index 000000000..f78c92e71
--- /dev/null
+++ b/src/styles/workflowcss/workflow.css
@@ -0,0 +1,1730 @@
+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: rgba(0, 0, 0, 0)
+}
+
+@-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, .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, .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, .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: rgb(242, 86, 67)
+}
+.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 .3s cubic-bezier(.645, .045, .355, 1);
+    position: relative;
+    color: rgba(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 .3s cubic-bezier(.645, .045, .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 .3s cubic-bezier(.645, .045, .355, 1);
+    transition: all .3s cubic-bezier(.645, .045, .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 .3s cubic-bezier(.645, .045, .355, 1);
+    transition: all .3s cubic-bezier(.645, .045, .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, .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, .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: rgba(0, 0, 0, 0)
+}
+
+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, .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: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    padding-bottom: 30px
+}
+
+.error-modal-desc {
+    font-size: 13px;
+    color: rgba(25, 31, 37, .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, .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 .1s cubic-bezier(.645, .045, .355, 1);
+    box-shadow: 0 2px 5px 0 rgba(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, .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, .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, .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 .3s cubic-bezier(.645, .045, .355, 1);
+    transition: all .3s cubic-bezier(.645, .045, .355, 1)
+}
+
+.dingflow-design .add-branch:hover {
+    transform: translateX(-50%) scale(1.1);
+    box-shadow: 0 8px 16px 0 rgba(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 .1s cubic-bezier(.645, .045, .355, 1);
+    box-shadow: 0 2px 5px 0 rgba(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, .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, .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, .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, .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, .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/utils/workflow/const.ts b/src/utils/workflow/const.ts
new file mode 100644
index 000000000..723fd5427
--- /dev/null
+++ b/src/utils/workflow/const.ts
@@ -0,0 +1,38 @@
+/**
+ * 公共量
+ */
+export let bgColors = ['87, 106, 149', '255, 148, 62', '50, 150, 250','255,102,0','255,255,255']
+export let placeholderList = ["发起人", "审核人", "抄送人", "执行人"];
+
+export let setTypes = [
+  {value: 1, label: '指定成员'},
+  {value: 2, label: '主管'},
+  {value: 4, label: '发起人自选'},
+  {value: 5, label: '发起人自己'},
+  {value: 7, label: '连续多级主管'},
+]
+
+export let selectModes = [
+  {value: 1, label: '选一个人'},
+  {value: 2, label: '选多个人'},
+]
+
+export let selectRanges = [
+  {value: 1, label: '全公司'},
+  {value: 2, label: '指定成员'},
+  {value: 3, label: '指定角色'},
+]
+
+export let optTypes = [
+  {value: '1', label: '小于'},
+  {value: '2', label: '大于'},
+  {value: '3', label: '小于等于'},
+  {value: '4', label: '等于'},
+  {value: '5', label: '大于等于'},
+  {value: '6', label: '介于两个数之间'},
+]
+
+export let opt1s = [
+  {value: '<', label: '<'},
+  {value: '≤', label: '≤'},
+]
diff --git a/src/utils/workflow/index.ts b/src/utils/workflow/index.ts
new file mode 100644
index 000000000..d33a7e985
--- /dev/null
+++ b/src/utils/workflow/index.ts
@@ -0,0 +1,157 @@
+function All() {}
+All.prototype = {
+    timer: "",
+    debounce(fn:any, delay = 500) {
+        var _this = this;
+        return (arg: any) => {
+            //获取函数的作用域和变量
+            let that = this;
+            let args = arg;
+            clearTimeout(_this.timer) // 清除定时器
+            _this.timer = setTimeout(function() {
+                fn.call(that, args)
+            }, delay)
+        }
+    },
+    setCookie(val:any) { //cookie设置[{key:value}]、获取key、清除['key1','key2']
+        for (var i = 0, len = val.length; i < len; i++) {
+            for (var key in val[i]) {
+                document.cookie = key + '=' + encodeURIComponent(val[i][key]) + "; path=/";
+            }
+        }
+    },
+    getCookie(name:any) {
+        var strCookie = document.cookie;
+        var arrCookie = strCookie.split("; ");
+        for (var i = 0, len = arrCookie.length; i < len; i++) {
+            var arr = arrCookie[i].split("=");
+            if (name == arr[0]) {
+                return decodeURIComponent(arr[1]);
+            }
+        }
+    },
+    clearCookie(name:any) {
+        var myDate = new Date();
+        myDate.setTime(-1000); //设置时间    
+        for (var i = 0, len = name.length; i < len; i++) {
+            document.cookie = "" + name[i] + "=''; path=/; expires=" + myDate.toUTCString();
+        }
+    },
+    arrToStr(arr:any) {
+        if (arr) {
+            return arr.map((item: { name: any; }) => { return item.name }).toString()
+        }
+    },
+    toggleClass(arr:any, elem:any, key = 'id') {
+        return arr.some((item: { [x: string]: any; }) => { return item[key] == elem[key] });
+    },
+    toChecked(arr:any, elem:any, key = 'id') {
+        var isIncludes = this.toggleClass(arr, elem, key);
+        !isIncludes ? arr.push(elem) : this.removeEle(arr, elem, key);
+    },
+    removeEle(arr:any, elem:any, key = 'id') {
+        var includesIndex;
+        arr.map((item:any, index:any) => {
+            if (item[key] == elem[key]) {
+                includesIndex = index
+            }
+        });
+        arr.splice(includesIndex, 1);
+    },
+    setApproverStr(nodeConfig:any) {
+        if (nodeConfig.settype == 1) {
+            if (nodeConfig.nodeUserList.length == 1) {
+                return nodeConfig.nodeUserList[0].name
+            } else if (nodeConfig.nodeUserList.length > 1) {
+                if (nodeConfig.examineMode == 1) {
+                    return this.arrToStr(nodeConfig.nodeUserList)
+                } else if (nodeConfig.examineMode == 2) {
+                    return nodeConfig.nodeUserList.length + "人会签"
+                }
+            }
+        } else if (nodeConfig.settype == 2) {
+            let level = nodeConfig.directorLevel == 1 ? '直接主管' : '第' + nodeConfig.directorLevel + '级主管'
+            if (nodeConfig.examineMode == 1) {
+                return level
+            } else if (nodeConfig.examineMode == 2) {
+                return level + "会签"
+            }
+        } else if (nodeConfig.settype == 4) {
+            if (nodeConfig.selectRange == 1) {
+                return "发起人自选"
+            } else {
+                if (nodeConfig.nodeUserList.length > 0) {
+                    if (nodeConfig.selectRange == 2) {
+                        return "发起人自选"
+                    } else {
+                        return '发起人从' + nodeConfig.nodeUserList[0].name + '中自选'
+                    }
+                } else {
+                    return "";
+                }
+            }
+        } else if (nodeConfig.settype == 5) {
+            return "发起人自己"
+        } else if (nodeConfig.settype == 7) {
+            return '从直接主管到通讯录中级别最高的第' + nodeConfig.examineEndDirectorLevel + '个层级主管'
+        }
+    },
+    dealStr(str:any, obj:any) {
+        let arr: any[] = [];
+        let list = str.split(",");
+        for (var elem in obj) {
+            list.map((item: string) => {
+                if (item == elem) {
+                    arr.push(obj[elem].value)
+                }
+            })
+        }
+        return arr.join("或")
+    },  
+    conditionStr(nodeConfig:any, index:any) {
+        var { conditionList, nodeUserList } = nodeConfig.conditionNodes[index];
+        if (conditionList.length == 0) {
+            return (index == nodeConfig.conditionNodes.length - 1) && nodeConfig.conditionNodes[0].conditionList.length != 0 ? '其他条件进入此流程' : '请设置条件'
+        } else {
+            let str = ""
+            for (var i = 0; i < conditionList.length; i++) {
+                var { columnId, columnType, showType, showName, optType, zdy1, opt1, zdy2, opt2, fixedDownBoxValue } = conditionList[i];
+                if (columnId == 0) {
+                    if (nodeUserList.length != 0) {
+                        str += '发起人属于：'
+                        str += nodeUserList.map((item: { name: any; }) => { return item.name }).join("或") + " 并且 "
+                    }
+                }
+                if (columnType == "String" && showType == "3") {
+                    if (zdy1) {
+                        str += showName + '属于：' + this.dealStr(zdy1, JSON.parse(fixedDownBoxValue)) + " 并且 "
+                    }
+                }
+                if (columnType == "Double") {
+                    if (optType != 6 && zdy1) {
+                        var optTypeStr = ["", "<", ">", "≤", "=", "≥"][optType]
+                        str += `${showName} ${optTypeStr} ${zdy1} 并且 `
+                    } else if (optType == 6 && zdy1 && zdy2) {
+                        str += `${zdy1} ${opt1} ${showName} ${opt2} ${zdy2} 并且 `
+                    }
+                }
+            }
+            return str ? str.substring(0, str.length - 4) : '请设置条件'
+        }
+    },
+    copyerStr(nodeConfig:any) {
+        if (nodeConfig.nodeUserList.length != 0) {
+            return this.arrToStr(nodeConfig.nodeUserList)
+        } else {
+            if (nodeConfig.ccSelfSelectFlag == 1) {
+                return "发起人自选"
+            }
+        }
+    }, 
+    toggleStrClass(item: { zdy1: string; }, key: any) {
+        let a = item.zdy1 ? item.zdy1.split(",") : []
+        return a.some((item: any) => { return item == key });
+    },
+}
+
+export default new (All as any)();
diff --git a/src/views/sysworkflow/codepage/index.vue b/src/views/sysworkflow/codepage/index.vue
index 6e6d02315..19c5ff14d 100644
--- a/src/views/sysworkflow/codepage/index.vue
+++ b/src/views/sysworkflow/codepage/index.vue
@@ -11,7 +11,7 @@ import CreateForm from '@/views/sysworkflow/codepage/createform.vue'
 import SetupConfig from '@/views/sysworkflow/codepage/setupconfig.vue'
 import DataTableStructure from '@/views/sysworkflow/codepage/datatablestructure.vue'
 
-
+const contbody = ref()
 const queryParams = reactive<SearchForm>({
 	page: 1,
 	pagesize:15
@@ -23,7 +23,7 @@ const show =ref(false);		//加载表单
 const drawerOpenOrClose = ref(false);
 const total = ref(0);					//记录总数
 const contList = ref<customerFormCont[]>()
-const drawerWith = ref<number>(0);
+const drawerWith = ref();
 const editid = ref<string>("")
 const formConfigCont = reactive<customerFormConfig>({
 	formname:"",
@@ -48,6 +48,7 @@ function resetQuery(){
 //新增表单
 function openDialog(){
 	formId.value = ""
+	drawerWith.value = contbody.value?.clientWidth
 	getProductionMarkForm()
 		.then(({data})=>{
 			formConfigCont.formlogo = data.formlogo
@@ -122,14 +123,15 @@ function setupCustomerForm(cont:customerFormCont){
 }
 onMounted(()=>{
 	handleQuery();
-	drawerWith.value = window.innerWidth - 220
+	// drawerWith.value = window.innerWidth - 220
 });
 window.addEventListener("resize", function(){
-	drawerWith.value = window.innerWidth -220
+	// drawerWith.value = window.innerWidth -220
 	// console.log("搜索表单-->",window.innerWidth);
 })
 //编辑表单
 function editCustomerForm(cont:customerFormCont){
+	drawerWith.value = contbody.value?.clientWidth
 	formId.value = cont.id.toString();
 	drawerOpenOrClose.value = true;
 }
@@ -143,7 +145,7 @@ const openDataTableStructure = (cont:customerFormCont) =>{
 }
 </script>
 <template>
-	<div class="app-container">
+	<div ref="contbody" class="app-container">
 		<div class="search">
 			<el-form ref="queryFormRef" :model="queryParams" :inline="true">
 				<el-form-item label="关键字" prop="keywords">
diff --git a/src/views/sysworkflow/flow/flowcanvas.vue b/src/views/sysworkflow/flow/flowcanvas.vue
new file mode 100644
index 000000000..3f15b50bd
--- /dev/null
+++ b/src/views/sysworkflow/flow/flowcanvas.vue
@@ -0,0 +1,129 @@
+<!--
+@ 作者: 秦东
+@ 时间: 2023-05-26 09:19:46
+@ 备注: 
+-->
+<script lang='ts' setup>
+import '@/styles/workflowcss/workflow.css'
+
+import { useStore } from '@/store/workflow/index' 
+import { tipListStrucr } from '@/api/workflowapi/types'
+import { initializeWorkFlow,setWorkFlowData } from '@/api/workflowapi/index'
+
+let { setTableId, setIsTried } = useStore()
+
+let tipList = ref<any>([]);
+let tipVisible = ref(false);
+let nowVal = ref(100);	//缩放比例
+let processConfig = ref<any>({});
+let nodeConfig = ref({});
+let workFlowDef = ref({});
+let flowPermission = ref([]);
+let directorMaxLevel = ref(0);
+
+//首次加载页面
+onMounted(async ()=>{
+	let { data } = await initializeWorkFlow({name:""})
+	console.log("data",data)
+	let {
+		nodeConfig: nodes,
+		flowPermission: flows,
+		directorMaxLevel: directors,
+		workFlowDef: works,
+		tableId,
+	} = data;
+	nodeConfig.value = nodes;
+	flowPermission.value = flows;
+	directorMaxLevel.value = directors;
+	workFlowDef.value = works;
+	setTableId(tableId);
+})
+//错误提示
+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 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(JSON.stringify(processConfig.value));
+	let res = await setWorkFlowData(processConfig.value);
+	if (res.code == 200) {
+		ElMessage.success("设置成功")
+		setTimeout(function () {
+			window.location.href = "";
+		}, 200);
+	}
+};
+//缩放画布
+const zoomSize = (type:number) => {
+  if (type == 1) {
+    if (nowVal.value == 50) {
+      return;
+    }
+    nowVal.value -= 10;
+  } else {
+    if (nowVal.value == 300) {
+      return;
+    }
+    nowVal.value += 10;
+  }
+};
+</script>
+<template>
+	<div class="canvas_body">
+		<div class="fd-nav-content-new">
+			<!--画板-->
+			<section class="dingflow-design">		
+				<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>
+		</div>
+	</div>
+</template>
+<style  lang='scss' scoped>
+.canvas_body{
+	height: 100%;
+    width: inherit;
+}
+</style>
diff --git a/src/views/sysworkflow/flow/index.vue b/src/views/sysworkflow/flow/index.vue
index 646627ec6..52fe63570 100644
--- a/src/views/sysworkflow/flow/index.vue
+++ b/src/views/sysworkflow/flow/index.vue
@@ -4,11 +4,170 @@
 @ 备注: 
 -->
 <script lang='ts' setup>
+import '@/styles/workflowcss/workflow.css'
 
+import { useStore } from '@/store/workflow/index' 
+import { tipListStrucr } from '@/api/workflowapi/types'
+import { initializeWorkFlow,setWorkFlowData } from '@/api/workflowapi/index'
+
+
+const flowcont = ref()
+const drawer = ref(false)
+const drawerWidht = ref()
+const openfloaw = ()=>{
+	drawerWidht.value = flowcont.value?.clientWidth
+	console.log("clientHeight--->",drawerWidht.value)
+	drawer.value = true
+}
+
+let { setTableId, setIsTried } = useStore()
+
+let tipList = ref<any>([]);
+let tipVisible = ref(false);
+let nowVal = ref(100);	//缩放比例
+let processConfig = ref<any>({});
+let nodeConfig = ref({});
+let workFlowDef = ref({});
+let flowPermission = ref([]);
+let directorMaxLevel = ref(0);
+
+//首次加载页面
+onMounted(async ()=>{
+	initWorkFlowData()
+})
+//初始化工作流数据
+const initWorkFlowData = async() => {
+	let { data } = await initializeWorkFlow({name:""})
+	console.log("data",data)
+	let {
+		nodeConfig: nodes,
+		flowPermission: flows,
+		directorMaxLevel: directors,
+		workFlowDef: works,
+		tableId,
+	} = data;
+	nodeConfig.value = nodes;
+	flowPermission.value = flows;
+	directorMaxLevel.value = directors;
+	workFlowDef.value = works;
+	setTableId(tableId);
+}
+//错误提示
+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 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(JSON.stringify(processConfig.value));
+	let res = await setWorkFlowData(processConfig.value);
+	if (res.code == 200) {
+		ElMessage.success("设置成功")
+		setTimeout(function () {
+			window.location.href = "";
+		}, 200);
+	}
+};
+//缩放画布
+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 clearCanvas = () =>{
+	ElMessageBox.confirm('确定要清空画布?')
+    .then(() => {
+		initWorkFlowData()
+		setIsTried(false);
+		tipList.value = []
+    })
+}
 </script>
 <template>
-	<div>流程</div>
+	<div ref="flowcont">
+		<el-button type="primary" @click="openfloaw">添加</el-button>
+		<el-drawer v-model="drawer" :size="drawerWidht" :show-close="false">
+			<template #header="{ close, titleId, titleClass }">
+				<h4 :id="titleId" :class="titleClass">创建流程</h4>
+				<el-button type="warning" @click="clearCanvas">
+					<el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
+					清空
+				</el-button>
+				<el-button type="primary" @click="saveSet">
+					<el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
+					发布
+				</el-button>
+				<el-button type="danger" @click="close">
+					<el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
+					关闭
+				</el-button>
+			</template>
+			<div class="canvas_body">
+				<div class="fd-nav-content-new">
+					<!--画板-->
+					<section class="dingflow-design">		
+						<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>
+				</div>
+			</div>
+		</el-drawer>
+	</div>
 </template>
 <style  lang='scss' scoped>
+.canvas_body{
+	height: 100%;
+    width: inherit;
+}
 
 </style>
diff --git a/src/views/taskplatform/taskmanagement/edittaskcustomerform.vue b/src/views/taskplatform/taskmanagement/edittaskcustomerform.vue
index 58a35fcb1..f57d58575 100644
--- a/src/views/taskplatform/taskmanagement/edittaskcustomerform.vue
+++ b/src/views/taskplatform/taskmanagement/edittaskcustomerform.vue
@@ -39,6 +39,10 @@ const props = defineProps({
 	infoid:{
 		type:String,
 		default:""
+	},
+	drawerwith:{
+		type:Number,
+		default:0
 	}
 })
 const submitButton = {
@@ -217,7 +221,7 @@ watch(()=>props.iseditopen,()=>{
 })
 </script>
 <template>
-	<el-drawer  v-model="isShow" v-loading="loadingData" :title="versiontitle"  :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :size="drawerWith" class="drawerClass" >
+	<el-drawer  v-model="isShow" v-loading="loadingData" :title="versiontitle"  :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :size="props.drawerwith" class="drawerClass" >
 		<div class="drawerBody">
 			<ak-form
 				ref="formEl"
diff --git a/src/views/taskplatform/taskmanagement/taskcustomerform.vue b/src/views/taskplatform/taskmanagement/taskcustomerform.vue
index 21730986f..78e73a7d5 100644
--- a/src/views/taskplatform/taskmanagement/taskcustomerform.vue
+++ b/src/views/taskplatform/taskmanagement/taskcustomerform.vue
@@ -35,6 +35,10 @@ const props = defineProps({
 	infoid:{
 		type:String,
 		default:""
+	},
+	drawerwith:{
+		type:Number,
+		default:0
 	}
 })
 const submitButton = {
@@ -162,7 +166,7 @@ watch(()=>props.isopen,()=>{
 })
 </script>
 <template>
-	<el-drawer  v-model="drawerOpenOrClose" v-loading="loadingData" :title="versiontitle"  :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :size="drawerWith" class="drawerClass" >
+	<el-drawer  v-model="drawerOpenOrClose" v-loading="loadingData" :title="versiontitle"  :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :size="props.drawerwith" class="drawerClass" >
 		<div class="drawerBody">
 			<ak-form
 				ref="formEl"
diff --git a/src/views/taskplatform/taskmanagement/tasklist.vue b/src/views/taskplatform/taskmanagement/tasklist.vue
index fc68a9448..76a6ecef7 100644
--- a/src/views/taskplatform/taskmanagement/tasklist.vue
+++ b/src/views/taskplatform/taskmanagement/tasklist.vue
@@ -64,6 +64,7 @@ function handleSelectionChange(selection: any) {
 }
 //添加记录
 const addDialog = () =>{
+	drawerWith.value = contbody.value?.clientWidth
 	openTaskDialog.value = true;
 }
 //批量删除
@@ -72,7 +73,7 @@ const batchDeleteLog = () =>{
 }
 //编辑表单
 const editFormLogDialog = (val:any) =>{
-	console.log("编辑表单",val)
+	drawerWith.value = contbody.value?.clientWidth
 	versionId.value = val.version_id.toString()
 	versionTitle.value = val.title
 	mastersKey.value = val.mastersKeyStr.toString()
@@ -86,9 +87,12 @@ const DeleteFormLog = (id:any) =>{
 			searchQuery();
 		})
 }
+const contbody = ref()
+const drawerWith = ref<number>(0);
 //加载数据
 onMounted(() => {
 	searchQuery();
+	drawerWith.value = contbody.value?.clientWidth
 });
 
 //打开自定义表单
@@ -100,6 +104,7 @@ const openCustomerForm = (id:string,title:string) =>{
 }
 </script>
 <template>
+	<div ref="contbody">
 	<div class="app-container">
 		<div class="search">
 			<el-form ref="searckFormRef" :model="searchData" :inline="true">
@@ -174,9 +179,10 @@ const openCustomerForm = (id:string,title:string) =>{
 			/>
 		</el-card>
 		<TaskEntry v-model:isshow="openTaskDialog" @opencustomerform="openCustomerForm" />
-		<TaskCustomerForm v-model:isopen="openTaskDrawer" :versionid="versionId" :versiontitle="versionTitle" @searchquery="searchQuery" />
-		<EditTaskCustomerForm v-model:iseditopen="openEditTaskDrawer" :versionid="versionId" :versiontitle="versionTitle" :masterskey="mastersKey" infoid="2"  @searchquery="searchQuery" />
+		<TaskCustomerForm v-model:isopen="openTaskDrawer" :versionid="versionId" :versiontitle="versionTitle" :drawerwith="drawerWith" @searchquery="searchQuery" />
+		<EditTaskCustomerForm v-model:iseditopen="openEditTaskDrawer" :versionid="versionId" :versiontitle="versionTitle" :masterskey="mastersKey" infoid="2" :drawerwith="drawerWith"  @searchquery="searchQuery" />
 	</div>
+</div>
 </template>
 <style  lang='scss' scoped>