diff --git a/src/components.d.ts b/src/components.d.ts
index dbb2458..a832874 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -8,12 +8,14 @@
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     AddNode: typeof import('./components/workFlow/addNode.vue')['default']
+    AddNodeBan: typeof import('./components/workFlow/addNodeBan.vue')['default']
     AppContainer: typeof import('./components/AppContainer/index.vue')['default']
     ApproverDrawer: typeof import('./components/drawer/approverDrawer.vue')['default']
     Auth: typeof import('./components/Auth/index.vue')['default']
     AuthAll: typeof import('./components/AuthAll/index.vue')['default']
     BatchActionBar: typeof import('./components/BatchActionBar/index.vue')['default']
     ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default']
+    copy: typeof import('./components/workFlow/nodeWrap copy.vue')['default']
     CopyerDrawer: typeof import('./components/drawer/copyerDrawer.vue')['default']
     Copyright: typeof import('./components/Copyright/index.vue')['default']
     DeptSelect: typeof import('./components/DeptSelect/index.vue')['default']
@@ -27,6 +29,7 @@
     ImagesUpload: typeof import('./components/ImagesUpload/index.vue')['default']
     ImageUpload: typeof import('./components/ImageUpload/index.vue')['default']
     NodeWrap: typeof import('./components/workFlow/nodeWrap.vue')['default']
+    NodeWrapBan: typeof import('./components/workFlow/nodeWrapBan.vue')['default']
     NormalTable: typeof import('./components/NormalTable/index.vue')['default']
     PageHeader: typeof import('./components/PageHeader/index.vue')['default']
     PageMain: typeof import('./components/PageMain/index.vue')['default']

diff --git a/src/components.d.ts b/src/components.d.ts
index dbb2458..a832874 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -8,12 +8,14 @@
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     AddNode: typeof import('./components/workFlow/addNode.vue')['default']
+    AddNodeBan: typeof import('./components/workFlow/addNodeBan.vue')['default']
     AppContainer: typeof import('./components/AppContainer/index.vue')['default']
     ApproverDrawer: typeof import('./components/drawer/approverDrawer.vue')['default']
     Auth: typeof import('./components/Auth/index.vue')['default']
     AuthAll: typeof import('./components/AuthAll/index.vue')['default']
     BatchActionBar: typeof import('./components/BatchActionBar/index.vue')['default']
     ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default']
+    copy: typeof import('./components/workFlow/nodeWrap copy.vue')['default']
     CopyerDrawer: typeof import('./components/drawer/copyerDrawer.vue')['default']
     Copyright: typeof import('./components/Copyright/index.vue')['default']
     DeptSelect: typeof import('./components/DeptSelect/index.vue')['default']
@@ -27,6 +29,7 @@
     ImagesUpload: typeof import('./components/ImagesUpload/index.vue')['default']
     ImageUpload: typeof import('./components/ImageUpload/index.vue')['default']
     NodeWrap: typeof import('./components/workFlow/nodeWrap.vue')['default']
+    NodeWrapBan: typeof import('./components/workFlow/nodeWrapBan.vue')['default']
     NormalTable: typeof import('./components/NormalTable/index.vue')['default']
     PageHeader: typeof import('./components/PageHeader/index.vue')['default']
     PageMain: typeof import('./components/PageMain/index.vue')['default']
diff --git a/src/components/workFlow/addNodeBan.vue b/src/components/workFlow/addNodeBan.vue
new file mode 100644
index 0000000..5f996d1
--- /dev/null
+++ b/src/components/workFlow/addNodeBan.vue
@@ -0,0 +1,240 @@
+<script setup>
+import { ref } from 'vue'
+const props = defineProps({
+  childNodeP: {
+    type: Object,
+    default: () => ({}),
+  },
+})
+const emits = defineEmits(['update:childNodeP'])
+const visible = ref(false)
+const addType = (type) => {
+  visible.value = false
+  if (type != 4) {
+    let 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: [],
+      }
+    }
+    emits('update:childNodeP', data)
+  }
+  else {
+    emits('update:childNodeP', {
+      nodeName: '路由',
+      type: 4,
+      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"></span>
+            </div>
+            <p>审批人</p>
+          </a>
+          <a class="add-node-popover-item notifier" @click="addType(2)">
+            <div class="item-wrapper">
+              <span class="iconfont"></span>
+            </div>
+            <p>抄送人</p>
+          </a>
+          <a class="add-node-popover-item condition" @click="addType(4)">
+            <div class="item-wrapper">
+              <span class="iconfont"></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 scoped lang="scss">
+.add-node-btn-box {
+  width: 240px;
+  display: inline-box;
+  display: 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 rgb(0 0 0 / 10%);
+      width: 30px;
+      height: 30px;
+      background: #3296fa;
+      border-radius: 50%;
+      position: relative;
+      border: none;
+      line-height: 30px;
+      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+      .iconfont {
+        color: #fff;
+        font-size: 16px;
+      }
+
+      &:hover {
+        transform: scale(1.3);
+        box-shadow: 0 13px 27px 0 rgb(0 0 0 / 10%);
+      }
+
+      &:active {
+        transform: none;
+        background: #1e83e9;
+        box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+.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 0.3s cubic-bezier(0.645, 0.045, 0.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 rgb(50 150 250 / 40%);
+      }
+
+      .iconfont {
+        color: #fff;
+      }
+    }
+
+    &:active {
+      .item-wrapper {
+        box-shadow: none;
+        background: #eaeaea;
+      }
+
+      .iconfont {
+        color: inherit;
+      }
+    }
+  }
+}
+</style>

diff --git a/src/components.d.ts b/src/components.d.ts
index dbb2458..a832874 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -8,12 +8,14 @@
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     AddNode: typeof import('./components/workFlow/addNode.vue')['default']
+    AddNodeBan: typeof import('./components/workFlow/addNodeBan.vue')['default']
     AppContainer: typeof import('./components/AppContainer/index.vue')['default']
     ApproverDrawer: typeof import('./components/drawer/approverDrawer.vue')['default']
     Auth: typeof import('./components/Auth/index.vue')['default']
     AuthAll: typeof import('./components/AuthAll/index.vue')['default']
     BatchActionBar: typeof import('./components/BatchActionBar/index.vue')['default']
     ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default']
+    copy: typeof import('./components/workFlow/nodeWrap copy.vue')['default']
     CopyerDrawer: typeof import('./components/drawer/copyerDrawer.vue')['default']
     Copyright: typeof import('./components/Copyright/index.vue')['default']
     DeptSelect: typeof import('./components/DeptSelect/index.vue')['default']
@@ -27,6 +29,7 @@
     ImagesUpload: typeof import('./components/ImagesUpload/index.vue')['default']
     ImageUpload: typeof import('./components/ImageUpload/index.vue')['default']
     NodeWrap: typeof import('./components/workFlow/nodeWrap.vue')['default']
+    NodeWrapBan: typeof import('./components/workFlow/nodeWrapBan.vue')['default']
     NormalTable: typeof import('./components/NormalTable/index.vue')['default']
     PageHeader: typeof import('./components/PageHeader/index.vue')['default']
     PageMain: typeof import('./components/PageMain/index.vue')['default']
diff --git a/src/components/workFlow/addNodeBan.vue b/src/components/workFlow/addNodeBan.vue
new file mode 100644
index 0000000..5f996d1
--- /dev/null
+++ b/src/components/workFlow/addNodeBan.vue
@@ -0,0 +1,240 @@
+<script setup>
+import { ref } from 'vue'
+const props = defineProps({
+  childNodeP: {
+    type: Object,
+    default: () => ({}),
+  },
+})
+const emits = defineEmits(['update:childNodeP'])
+const visible = ref(false)
+const addType = (type) => {
+  visible.value = false
+  if (type != 4) {
+    let 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: [],
+      }
+    }
+    emits('update:childNodeP', data)
+  }
+  else {
+    emits('update:childNodeP', {
+      nodeName: '路由',
+      type: 4,
+      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"></span>
+            </div>
+            <p>审批人</p>
+          </a>
+          <a class="add-node-popover-item notifier" @click="addType(2)">
+            <div class="item-wrapper">
+              <span class="iconfont"></span>
+            </div>
+            <p>抄送人</p>
+          </a>
+          <a class="add-node-popover-item condition" @click="addType(4)">
+            <div class="item-wrapper">
+              <span class="iconfont"></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 scoped lang="scss">
+.add-node-btn-box {
+  width: 240px;
+  display: inline-box;
+  display: 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 rgb(0 0 0 / 10%);
+      width: 30px;
+      height: 30px;
+      background: #3296fa;
+      border-radius: 50%;
+      position: relative;
+      border: none;
+      line-height: 30px;
+      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+      .iconfont {
+        color: #fff;
+        font-size: 16px;
+      }
+
+      &:hover {
+        transform: scale(1.3);
+        box-shadow: 0 13px 27px 0 rgb(0 0 0 / 10%);
+      }
+
+      &:active {
+        transform: none;
+        background: #1e83e9;
+        box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+.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 0.3s cubic-bezier(0.645, 0.045, 0.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 rgb(50 150 250 / 40%);
+      }
+
+      .iconfont {
+        color: #fff;
+      }
+    }
+
+    &:active {
+      .item-wrapper {
+        box-shadow: none;
+        background: #eaeaea;
+      }
+
+      .iconfont {
+        color: inherit;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/workFlow/nodeWrapBan.vue b/src/components/workFlow/nodeWrapBan.vue
new file mode 100644
index 0000000..2de6650
--- /dev/null
+++ b/src/components/workFlow/nodeWrapBan.vue
@@ -0,0 +1,229 @@
+<script setup>
+import { computed, getCurrentInstance, onMounted, ref, watch } from 'vue'
+import $func from '@/plugins/preload'
+import useWorkFlowStore from '@/store/modules/workFlow'
+const props = defineProps({
+  nodeConfig: {
+    type: Object,
+    default: () => ({}),
+  },
+  flowPermission: {
+    type: Object,
+    default: () => {},
+  },
+})
+
+const emits = defineEmits(['update:flowPermission', 'update:nodeConfig'])
+
+const workFlowStore = useWorkFlowStore()
+
+const _uid = getCurrentInstance().uid
+const bgColors = ['87, 106, 149', '255, 148, 62', '50, 150, 250']
+const placeholderList = ['发起人', '审核人', '抄送人']
+const defaultText = computed(() => {
+  return placeholderList[props.nodeConfig.type]
+})
+const showText = computed(() => {
+  console.log('showText')
+  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)
+})
+watch(() => props.nodeConfig, (val) => {
+  console.log('watch nodeConfig')
+  if (props.nodeConfig.type == 1) {
+    return $func.setApproverStr(props.nodeConfig)
+  }
+  return $func.copyerStr(props.nodeConfig)
+}, {
+  deep: true, // 深度监听的参数
+})
+
+const isInputList = ref([])
+const isInput = ref(false)
+const resetConditionNodesErr = () => {
+  for (let i = 0; i < props.nodeConfig.conditionNodes.length; i++) {
+    props.nodeConfig.conditionNodes[i].error = $func.conditionStr(props.nodeConfig, i) == '请设置条件' && i != props.nodeConfig.conditionNodes.length - 1
+  }
+}
+onMounted(() => {
+  if (props.nodeConfig.type == 1) {
+    props.nodeConfig.error = !$func.setApproverStr(props.nodeConfig)
+  }
+  else if (props.nodeConfig.type == 2) {
+    props.nodeConfig.error = !$func.copyerStr(props.nodeConfig)
+  }
+  else if (props.nodeConfig.type == 4) {
+    resetConditionNodesErr()
+  }
+})
+const {
+  setPromoter,
+  setApprover,
+  setCopyer,
+  setCondition,
+  setFlowPermission,
+  setApproverConfig,
+  setCopyerConfig,
+  setConditionsConfig,
+} = workFlowStore
+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
+    props.nodeConfig.conditionNodes[index].nodeName = props.nodeConfig.conditionNodes[index].nodeName || '条件'
+  }
+  else {
+    isInput.value = false
+    props.nodeConfig.nodeName = props.nodeConfig.nodeName || defaultText
+  }
+}
+const arrTransfer = (index, type = 1) => {
+  // 向左-1,向右1
+  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)
+}
+</script>
+
+<template>
+  <div v-if="nodeConfig.type < 3" class="node-wrap">
+    <div class="node-wrap-box" :class="(nodeConfig.type === 0 ? 'start-node ' : '') + (workFlowStore.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"
+            v-focus
+            type="text"
+            class="ant-input editable-title-input"
+            :placeholder="defaultText"
+            @blur="blurEvent()"
+            @focus="$event.currentTarget.select()"
+          >
+          <span v-else class="editable-title">{{ nodeConfig.nodeName }}</span>
+          <!-- <i class="anticon anticon-close close" /> -->
+        </template>
+      </div>
+      <div class="content">
+        <div class="text">
+          <span v-if="!showText" class="placeholder">请选择{{ defaultText }}</span>
+          {{ showText }}
+        </div>
+        <!-- <i class="anticon anticon-right arrow" /> -->
+      </div>
+      <div v-if="workFlowStore.isTried && nodeConfig.error" class="error_tip">
+        <!-- <i class="anticon anticon-exclamation-circle" /> -->
+      </div>
+    </div>
+    <add-node-ban v-model:childNodeP="nodeConfig.childNode" />
+  </div>
+  <div v-if="nodeConfig.type === 4" class="branch-wrap">
+    <div class="branch-box-wrap">
+      <div class="branch-box">
+        <button class="add-branch">
+          添加条件
+        </button>
+        <div v-for="(item, index) in nodeConfig.conditionNodes" :key="index" class="col-box">
+          <div class="condition-node">
+            <div class="condition-node-box">
+              <div class="auto-judge" :class="workFlowStore.isTried && item.error ? 'error active' : ''">
+                <!-- <div v-if="index !== 0" class="sort-left">
+                  &lt;
+                </div> -->
+                <div class="title-wrapper">
+                  <input
+                    v-if="isInputList[index]"
+                    v-model="item.nodeName"
+                    v-focus
+                    type="text"
+                    class="ant-input editable-title-input"
+                    @blur="blurEvent(index)"
+                    @focus="$event.currentTarget.select()"
+                  >
+                  <span v-else class="editable-title">{{ item.nodeName }}</span>
+                  <span class="priority-title">优先级{{ item.priorityLevel }}</span>
+                  <!-- <i class="anticon anticon-close close" /> -->
+                </div>
+                <!-- <div v-if="index !== nodeConfig.conditionNodes.length - 1" class="sort-right">
+                  &gt;
+                </div> -->
+                <div class="content">
+                  {{ $func.conditionStr(nodeConfig, index) }}
+                </div>
+                <div v-if="workFlowStore.isTried && item.error" class="error_tip">
+                  <!-- <i class="anticon anticon-exclamation-circle" /> -->
+                </div>
+              </div>
+              <add-node-ban v-model:childNodeP="item.childNode" />
+            </div>
+          </div>
+          <node-wrap-ban v-if="item.childNode" v-model:nodeConfig="item.childNode" />
+          <template v-if="index === 0">
+            <div class="top-left-cover-line" />
+            <div class="bottom-left-cover-line" />
+          </template>
+          <template v-if="index === nodeConfig.conditionNodes.length - 1">
+            <div class="top-right-cover-line" />
+            <div class="bottom-right-cover-line" />
+          </template>
+        </div>
+      </div>
+      <add-node-ban v-model:childNodeP="nodeConfig.childNode" />
+    </div>
+  </div>
+  <node-wrap-ban v-if="nodeConfig.childNode" v-model:nodeConfig="nodeConfig.childNode" />
+</template>
+
+<style>
+.error_tip {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translate(150%, 0);
+  font-size: 24px;
+}
+
+.promoter_person .el-dialog__body {
+  padding: 10px 20px 14px;
+}
+
+.selected_list {
+  margin-bottom: 20px;
+  line-height: 30px;
+}
+
+.selected_list span {
+  margin-right: 10px;
+  padding: 3px 6px 3px 9px;
+  line-height: 12px;
+  white-space: nowrap;
+  border-radius: 2px;
+  border: 1px solid rgb(220 220 220 / 100%);
+}
+
+.selected_list img {
+  margin-left: 5px;
+  width: 7px;
+  height: 7px;
+  cursor: pointer;
+}
+</style>

diff --git a/src/components.d.ts b/src/components.d.ts
index dbb2458..a832874 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -8,12 +8,14 @@
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     AddNode: typeof import('./components/workFlow/addNode.vue')['default']
+    AddNodeBan: typeof import('./components/workFlow/addNodeBan.vue')['default']
     AppContainer: typeof import('./components/AppContainer/index.vue')['default']
     ApproverDrawer: typeof import('./components/drawer/approverDrawer.vue')['default']
     Auth: typeof import('./components/Auth/index.vue')['default']
     AuthAll: typeof import('./components/AuthAll/index.vue')['default']
     BatchActionBar: typeof import('./components/BatchActionBar/index.vue')['default']
     ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default']
+    copy: typeof import('./components/workFlow/nodeWrap copy.vue')['default']
     CopyerDrawer: typeof import('./components/drawer/copyerDrawer.vue')['default']
     Copyright: typeof import('./components/Copyright/index.vue')['default']
     DeptSelect: typeof import('./components/DeptSelect/index.vue')['default']
@@ -27,6 +29,7 @@
     ImagesUpload: typeof import('./components/ImagesUpload/index.vue')['default']
     ImageUpload: typeof import('./components/ImageUpload/index.vue')['default']
     NodeWrap: typeof import('./components/workFlow/nodeWrap.vue')['default']
+    NodeWrapBan: typeof import('./components/workFlow/nodeWrapBan.vue')['default']
     NormalTable: typeof import('./components/NormalTable/index.vue')['default']
     PageHeader: typeof import('./components/PageHeader/index.vue')['default']
     PageMain: typeof import('./components/PageMain/index.vue')['default']
diff --git a/src/components/workFlow/addNodeBan.vue b/src/components/workFlow/addNodeBan.vue
new file mode 100644
index 0000000..5f996d1
--- /dev/null
+++ b/src/components/workFlow/addNodeBan.vue
@@ -0,0 +1,240 @@
+<script setup>
+import { ref } from 'vue'
+const props = defineProps({
+  childNodeP: {
+    type: Object,
+    default: () => ({}),
+  },
+})
+const emits = defineEmits(['update:childNodeP'])
+const visible = ref(false)
+const addType = (type) => {
+  visible.value = false
+  if (type != 4) {
+    let 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: [],
+      }
+    }
+    emits('update:childNodeP', data)
+  }
+  else {
+    emits('update:childNodeP', {
+      nodeName: '路由',
+      type: 4,
+      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"></span>
+            </div>
+            <p>审批人</p>
+          </a>
+          <a class="add-node-popover-item notifier" @click="addType(2)">
+            <div class="item-wrapper">
+              <span class="iconfont"></span>
+            </div>
+            <p>抄送人</p>
+          </a>
+          <a class="add-node-popover-item condition" @click="addType(4)">
+            <div class="item-wrapper">
+              <span class="iconfont"></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 scoped lang="scss">
+.add-node-btn-box {
+  width: 240px;
+  display: inline-box;
+  display: 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 rgb(0 0 0 / 10%);
+      width: 30px;
+      height: 30px;
+      background: #3296fa;
+      border-radius: 50%;
+      position: relative;
+      border: none;
+      line-height: 30px;
+      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+      .iconfont {
+        color: #fff;
+        font-size: 16px;
+      }
+
+      &:hover {
+        transform: scale(1.3);
+        box-shadow: 0 13px 27px 0 rgb(0 0 0 / 10%);
+      }
+
+      &:active {
+        transform: none;
+        background: #1e83e9;
+        box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+.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 0.3s cubic-bezier(0.645, 0.045, 0.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 rgb(50 150 250 / 40%);
+      }
+
+      .iconfont {
+        color: #fff;
+      }
+    }
+
+    &:active {
+      .item-wrapper {
+        box-shadow: none;
+        background: #eaeaea;
+      }
+
+      .iconfont {
+        color: inherit;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/workFlow/nodeWrapBan.vue b/src/components/workFlow/nodeWrapBan.vue
new file mode 100644
index 0000000..2de6650
--- /dev/null
+++ b/src/components/workFlow/nodeWrapBan.vue
@@ -0,0 +1,229 @@
+<script setup>
+import { computed, getCurrentInstance, onMounted, ref, watch } from 'vue'
+import $func from '@/plugins/preload'
+import useWorkFlowStore from '@/store/modules/workFlow'
+const props = defineProps({
+  nodeConfig: {
+    type: Object,
+    default: () => ({}),
+  },
+  flowPermission: {
+    type: Object,
+    default: () => {},
+  },
+})
+
+const emits = defineEmits(['update:flowPermission', 'update:nodeConfig'])
+
+const workFlowStore = useWorkFlowStore()
+
+const _uid = getCurrentInstance().uid
+const bgColors = ['87, 106, 149', '255, 148, 62', '50, 150, 250']
+const placeholderList = ['发起人', '审核人', '抄送人']
+const defaultText = computed(() => {
+  return placeholderList[props.nodeConfig.type]
+})
+const showText = computed(() => {
+  console.log('showText')
+  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)
+})
+watch(() => props.nodeConfig, (val) => {
+  console.log('watch nodeConfig')
+  if (props.nodeConfig.type == 1) {
+    return $func.setApproverStr(props.nodeConfig)
+  }
+  return $func.copyerStr(props.nodeConfig)
+}, {
+  deep: true, // 深度监听的参数
+})
+
+const isInputList = ref([])
+const isInput = ref(false)
+const resetConditionNodesErr = () => {
+  for (let i = 0; i < props.nodeConfig.conditionNodes.length; i++) {
+    props.nodeConfig.conditionNodes[i].error = $func.conditionStr(props.nodeConfig, i) == '请设置条件' && i != props.nodeConfig.conditionNodes.length - 1
+  }
+}
+onMounted(() => {
+  if (props.nodeConfig.type == 1) {
+    props.nodeConfig.error = !$func.setApproverStr(props.nodeConfig)
+  }
+  else if (props.nodeConfig.type == 2) {
+    props.nodeConfig.error = !$func.copyerStr(props.nodeConfig)
+  }
+  else if (props.nodeConfig.type == 4) {
+    resetConditionNodesErr()
+  }
+})
+const {
+  setPromoter,
+  setApprover,
+  setCopyer,
+  setCondition,
+  setFlowPermission,
+  setApproverConfig,
+  setCopyerConfig,
+  setConditionsConfig,
+} = workFlowStore
+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
+    props.nodeConfig.conditionNodes[index].nodeName = props.nodeConfig.conditionNodes[index].nodeName || '条件'
+  }
+  else {
+    isInput.value = false
+    props.nodeConfig.nodeName = props.nodeConfig.nodeName || defaultText
+  }
+}
+const arrTransfer = (index, type = 1) => {
+  // 向左-1,向右1
+  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)
+}
+</script>
+
+<template>
+  <div v-if="nodeConfig.type < 3" class="node-wrap">
+    <div class="node-wrap-box" :class="(nodeConfig.type === 0 ? 'start-node ' : '') + (workFlowStore.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"
+            v-focus
+            type="text"
+            class="ant-input editable-title-input"
+            :placeholder="defaultText"
+            @blur="blurEvent()"
+            @focus="$event.currentTarget.select()"
+          >
+          <span v-else class="editable-title">{{ nodeConfig.nodeName }}</span>
+          <!-- <i class="anticon anticon-close close" /> -->
+        </template>
+      </div>
+      <div class="content">
+        <div class="text">
+          <span v-if="!showText" class="placeholder">请选择{{ defaultText }}</span>
+          {{ showText }}
+        </div>
+        <!-- <i class="anticon anticon-right arrow" /> -->
+      </div>
+      <div v-if="workFlowStore.isTried && nodeConfig.error" class="error_tip">
+        <!-- <i class="anticon anticon-exclamation-circle" /> -->
+      </div>
+    </div>
+    <add-node-ban v-model:childNodeP="nodeConfig.childNode" />
+  </div>
+  <div v-if="nodeConfig.type === 4" class="branch-wrap">
+    <div class="branch-box-wrap">
+      <div class="branch-box">
+        <button class="add-branch">
+          添加条件
+        </button>
+        <div v-for="(item, index) in nodeConfig.conditionNodes" :key="index" class="col-box">
+          <div class="condition-node">
+            <div class="condition-node-box">
+              <div class="auto-judge" :class="workFlowStore.isTried && item.error ? 'error active' : ''">
+                <!-- <div v-if="index !== 0" class="sort-left">
+                  &lt;
+                </div> -->
+                <div class="title-wrapper">
+                  <input
+                    v-if="isInputList[index]"
+                    v-model="item.nodeName"
+                    v-focus
+                    type="text"
+                    class="ant-input editable-title-input"
+                    @blur="blurEvent(index)"
+                    @focus="$event.currentTarget.select()"
+                  >
+                  <span v-else class="editable-title">{{ item.nodeName }}</span>
+                  <span class="priority-title">优先级{{ item.priorityLevel }}</span>
+                  <!-- <i class="anticon anticon-close close" /> -->
+                </div>
+                <!-- <div v-if="index !== nodeConfig.conditionNodes.length - 1" class="sort-right">
+                  &gt;
+                </div> -->
+                <div class="content">
+                  {{ $func.conditionStr(nodeConfig, index) }}
+                </div>
+                <div v-if="workFlowStore.isTried && item.error" class="error_tip">
+                  <!-- <i class="anticon anticon-exclamation-circle" /> -->
+                </div>
+              </div>
+              <add-node-ban v-model:childNodeP="item.childNode" />
+            </div>
+          </div>
+          <node-wrap-ban v-if="item.childNode" v-model:nodeConfig="item.childNode" />
+          <template v-if="index === 0">
+            <div class="top-left-cover-line" />
+            <div class="bottom-left-cover-line" />
+          </template>
+          <template v-if="index === nodeConfig.conditionNodes.length - 1">
+            <div class="top-right-cover-line" />
+            <div class="bottom-right-cover-line" />
+          </template>
+        </div>
+      </div>
+      <add-node-ban v-model:childNodeP="nodeConfig.childNode" />
+    </div>
+  </div>
+  <node-wrap-ban v-if="nodeConfig.childNode" v-model:nodeConfig="nodeConfig.childNode" />
+</template>
+
+<style>
+.error_tip {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translate(150%, 0);
+  font-size: 24px;
+}
+
+.promoter_person .el-dialog__body {
+  padding: 10px 20px 14px;
+}
+
+.selected_list {
+  margin-bottom: 20px;
+  line-height: 30px;
+}
+
+.selected_list span {
+  margin-right: 10px;
+  padding: 3px 6px 3px 9px;
+  line-height: 12px;
+  white-space: nowrap;
+  border-radius: 2px;
+  border: 1px solid rgb(220 220 220 / 100%);
+}
+
+.selected_list img {
+  margin-left: 5px;
+  width: 7px;
+  height: 7px;
+  cursor: pointer;
+}
+</style>
diff --git a/src/css/workflow.css b/src/css/workflow.css
index 43a0bf8..eee3dec 100644
--- a/src/css/workflow.css
+++ b/src/css/workflow.css
@@ -1677,6 +1677,9 @@
 }
 
 .dingflow-design .end-node {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   border-radius: 50%;
   font-size: 14px;
   color: rgb(25 31 37 / 40%);

diff --git a/src/components.d.ts b/src/components.d.ts
index dbb2458..a832874 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -8,12 +8,14 @@
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     AddNode: typeof import('./components/workFlow/addNode.vue')['default']
+    AddNodeBan: typeof import('./components/workFlow/addNodeBan.vue')['default']
     AppContainer: typeof import('./components/AppContainer/index.vue')['default']
     ApproverDrawer: typeof import('./components/drawer/approverDrawer.vue')['default']
     Auth: typeof import('./components/Auth/index.vue')['default']
     AuthAll: typeof import('./components/AuthAll/index.vue')['default']
     BatchActionBar: typeof import('./components/BatchActionBar/index.vue')['default']
     ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default']
+    copy: typeof import('./components/workFlow/nodeWrap copy.vue')['default']
     CopyerDrawer: typeof import('./components/drawer/copyerDrawer.vue')['default']
     Copyright: typeof import('./components/Copyright/index.vue')['default']
     DeptSelect: typeof import('./components/DeptSelect/index.vue')['default']
@@ -27,6 +29,7 @@
     ImagesUpload: typeof import('./components/ImagesUpload/index.vue')['default']
     ImageUpload: typeof import('./components/ImageUpload/index.vue')['default']
     NodeWrap: typeof import('./components/workFlow/nodeWrap.vue')['default']
+    NodeWrapBan: typeof import('./components/workFlow/nodeWrapBan.vue')['default']
     NormalTable: typeof import('./components/NormalTable/index.vue')['default']
     PageHeader: typeof import('./components/PageHeader/index.vue')['default']
     PageMain: typeof import('./components/PageMain/index.vue')['default']
diff --git a/src/components/workFlow/addNodeBan.vue b/src/components/workFlow/addNodeBan.vue
new file mode 100644
index 0000000..5f996d1
--- /dev/null
+++ b/src/components/workFlow/addNodeBan.vue
@@ -0,0 +1,240 @@
+<script setup>
+import { ref } from 'vue'
+const props = defineProps({
+  childNodeP: {
+    type: Object,
+    default: () => ({}),
+  },
+})
+const emits = defineEmits(['update:childNodeP'])
+const visible = ref(false)
+const addType = (type) => {
+  visible.value = false
+  if (type != 4) {
+    let 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: [],
+      }
+    }
+    emits('update:childNodeP', data)
+  }
+  else {
+    emits('update:childNodeP', {
+      nodeName: '路由',
+      type: 4,
+      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"></span>
+            </div>
+            <p>审批人</p>
+          </a>
+          <a class="add-node-popover-item notifier" @click="addType(2)">
+            <div class="item-wrapper">
+              <span class="iconfont"></span>
+            </div>
+            <p>抄送人</p>
+          </a>
+          <a class="add-node-popover-item condition" @click="addType(4)">
+            <div class="item-wrapper">
+              <span class="iconfont"></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 scoped lang="scss">
+.add-node-btn-box {
+  width: 240px;
+  display: inline-box;
+  display: 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 rgb(0 0 0 / 10%);
+      width: 30px;
+      height: 30px;
+      background: #3296fa;
+      border-radius: 50%;
+      position: relative;
+      border: none;
+      line-height: 30px;
+      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+      .iconfont {
+        color: #fff;
+        font-size: 16px;
+      }
+
+      &:hover {
+        transform: scale(1.3);
+        box-shadow: 0 13px 27px 0 rgb(0 0 0 / 10%);
+      }
+
+      &:active {
+        transform: none;
+        background: #1e83e9;
+        box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+.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 0.3s cubic-bezier(0.645, 0.045, 0.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 rgb(50 150 250 / 40%);
+      }
+
+      .iconfont {
+        color: #fff;
+      }
+    }
+
+    &:active {
+      .item-wrapper {
+        box-shadow: none;
+        background: #eaeaea;
+      }
+
+      .iconfont {
+        color: inherit;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/workFlow/nodeWrapBan.vue b/src/components/workFlow/nodeWrapBan.vue
new file mode 100644
index 0000000..2de6650
--- /dev/null
+++ b/src/components/workFlow/nodeWrapBan.vue
@@ -0,0 +1,229 @@
+<script setup>
+import { computed, getCurrentInstance, onMounted, ref, watch } from 'vue'
+import $func from '@/plugins/preload'
+import useWorkFlowStore from '@/store/modules/workFlow'
+const props = defineProps({
+  nodeConfig: {
+    type: Object,
+    default: () => ({}),
+  },
+  flowPermission: {
+    type: Object,
+    default: () => {},
+  },
+})
+
+const emits = defineEmits(['update:flowPermission', 'update:nodeConfig'])
+
+const workFlowStore = useWorkFlowStore()
+
+const _uid = getCurrentInstance().uid
+const bgColors = ['87, 106, 149', '255, 148, 62', '50, 150, 250']
+const placeholderList = ['发起人', '审核人', '抄送人']
+const defaultText = computed(() => {
+  return placeholderList[props.nodeConfig.type]
+})
+const showText = computed(() => {
+  console.log('showText')
+  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)
+})
+watch(() => props.nodeConfig, (val) => {
+  console.log('watch nodeConfig')
+  if (props.nodeConfig.type == 1) {
+    return $func.setApproverStr(props.nodeConfig)
+  }
+  return $func.copyerStr(props.nodeConfig)
+}, {
+  deep: true, // 深度监听的参数
+})
+
+const isInputList = ref([])
+const isInput = ref(false)
+const resetConditionNodesErr = () => {
+  for (let i = 0; i < props.nodeConfig.conditionNodes.length; i++) {
+    props.nodeConfig.conditionNodes[i].error = $func.conditionStr(props.nodeConfig, i) == '请设置条件' && i != props.nodeConfig.conditionNodes.length - 1
+  }
+}
+onMounted(() => {
+  if (props.nodeConfig.type == 1) {
+    props.nodeConfig.error = !$func.setApproverStr(props.nodeConfig)
+  }
+  else if (props.nodeConfig.type == 2) {
+    props.nodeConfig.error = !$func.copyerStr(props.nodeConfig)
+  }
+  else if (props.nodeConfig.type == 4) {
+    resetConditionNodesErr()
+  }
+})
+const {
+  setPromoter,
+  setApprover,
+  setCopyer,
+  setCondition,
+  setFlowPermission,
+  setApproverConfig,
+  setCopyerConfig,
+  setConditionsConfig,
+} = workFlowStore
+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
+    props.nodeConfig.conditionNodes[index].nodeName = props.nodeConfig.conditionNodes[index].nodeName || '条件'
+  }
+  else {
+    isInput.value = false
+    props.nodeConfig.nodeName = props.nodeConfig.nodeName || defaultText
+  }
+}
+const arrTransfer = (index, type = 1) => {
+  // 向左-1,向右1
+  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)
+}
+</script>
+
+<template>
+  <div v-if="nodeConfig.type < 3" class="node-wrap">
+    <div class="node-wrap-box" :class="(nodeConfig.type === 0 ? 'start-node ' : '') + (workFlowStore.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"
+            v-focus
+            type="text"
+            class="ant-input editable-title-input"
+            :placeholder="defaultText"
+            @blur="blurEvent()"
+            @focus="$event.currentTarget.select()"
+          >
+          <span v-else class="editable-title">{{ nodeConfig.nodeName }}</span>
+          <!-- <i class="anticon anticon-close close" /> -->
+        </template>
+      </div>
+      <div class="content">
+        <div class="text">
+          <span v-if="!showText" class="placeholder">请选择{{ defaultText }}</span>
+          {{ showText }}
+        </div>
+        <!-- <i class="anticon anticon-right arrow" /> -->
+      </div>
+      <div v-if="workFlowStore.isTried && nodeConfig.error" class="error_tip">
+        <!-- <i class="anticon anticon-exclamation-circle" /> -->
+      </div>
+    </div>
+    <add-node-ban v-model:childNodeP="nodeConfig.childNode" />
+  </div>
+  <div v-if="nodeConfig.type === 4" class="branch-wrap">
+    <div class="branch-box-wrap">
+      <div class="branch-box">
+        <button class="add-branch">
+          添加条件
+        </button>
+        <div v-for="(item, index) in nodeConfig.conditionNodes" :key="index" class="col-box">
+          <div class="condition-node">
+            <div class="condition-node-box">
+              <div class="auto-judge" :class="workFlowStore.isTried && item.error ? 'error active' : ''">
+                <!-- <div v-if="index !== 0" class="sort-left">
+                  &lt;
+                </div> -->
+                <div class="title-wrapper">
+                  <input
+                    v-if="isInputList[index]"
+                    v-model="item.nodeName"
+                    v-focus
+                    type="text"
+                    class="ant-input editable-title-input"
+                    @blur="blurEvent(index)"
+                    @focus="$event.currentTarget.select()"
+                  >
+                  <span v-else class="editable-title">{{ item.nodeName }}</span>
+                  <span class="priority-title">优先级{{ item.priorityLevel }}</span>
+                  <!-- <i class="anticon anticon-close close" /> -->
+                </div>
+                <!-- <div v-if="index !== nodeConfig.conditionNodes.length - 1" class="sort-right">
+                  &gt;
+                </div> -->
+                <div class="content">
+                  {{ $func.conditionStr(nodeConfig, index) }}
+                </div>
+                <div v-if="workFlowStore.isTried && item.error" class="error_tip">
+                  <!-- <i class="anticon anticon-exclamation-circle" /> -->
+                </div>
+              </div>
+              <add-node-ban v-model:childNodeP="item.childNode" />
+            </div>
+          </div>
+          <node-wrap-ban v-if="item.childNode" v-model:nodeConfig="item.childNode" />
+          <template v-if="index === 0">
+            <div class="top-left-cover-line" />
+            <div class="bottom-left-cover-line" />
+          </template>
+          <template v-if="index === nodeConfig.conditionNodes.length - 1">
+            <div class="top-right-cover-line" />
+            <div class="bottom-right-cover-line" />
+          </template>
+        </div>
+      </div>
+      <add-node-ban v-model:childNodeP="nodeConfig.childNode" />
+    </div>
+  </div>
+  <node-wrap-ban v-if="nodeConfig.childNode" v-model:nodeConfig="nodeConfig.childNode" />
+</template>
+
+<style>
+.error_tip {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translate(150%, 0);
+  font-size: 24px;
+}
+
+.promoter_person .el-dialog__body {
+  padding: 10px 20px 14px;
+}
+
+.selected_list {
+  margin-bottom: 20px;
+  line-height: 30px;
+}
+
+.selected_list span {
+  margin-right: 10px;
+  padding: 3px 6px 3px 9px;
+  line-height: 12px;
+  white-space: nowrap;
+  border-radius: 2px;
+  border: 1px solid rgb(220 220 220 / 100%);
+}
+
+.selected_list img {
+  margin-left: 5px;
+  width: 7px;
+  height: 7px;
+  cursor: pointer;
+}
+</style>
diff --git a/src/css/workflow.css b/src/css/workflow.css
index 43a0bf8..eee3dec 100644
--- a/src/css/workflow.css
+++ b/src/css/workflow.css
@@ -1677,6 +1677,9 @@
 }
 
 .dingflow-design .end-node {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   border-radius: 50%;
   font-size: 14px;
   color: rgb(25 31 37 / 40%);
diff --git a/src/views/setting.vue b/src/views/setting.vue
index 5cd7866..1376467 100644
--- a/src/views/setting.vue
+++ b/src/views/setting.vue
@@ -9,9 +9,14 @@
 import copyerDrawer from '@/components/drawer/copyerDrawer.vue'
 import conditionDrawer from '@/components/drawer/conditionDrawer.vue'
 import { getWorkFlowData, setWorkFlowData } from '@/plugins/api.js'
+const props = defineProps({
+  allowEditNode: {
+    type: Boolean,
+    default: true,
+  },
+})
 const workFlowStore = useWorkFlowStore()
 const router = useRouter()
-
 const tipList = ref([])
 const tipVisible = ref(false)
 const nowVal = ref(100)
@@ -138,13 +143,18 @@
           <span>{{ nowVal }}%</span>
           <div class="zoom-in" :class="nowVal === 300 && 'disabled'" @click="zoomSize(2)" />
         </div> -->
-        <div class="box-scale" :style="`transform: scale(${nowVal / 100});`">
-          <node-wrap v-model:nodeConfig="nodeConfig" v-model:flowPermission="flowPermission" />
+        <!-- 可编辑 -->
+        <div v-if="allowEditNode" class="box-scale" :style="`transform: scale(${nowVal / 100});`">
+          <node-wrap v-if="props.allowEditNode" v-model:nodeConfig="nodeConfig" v-model:flowPermission="flowPermission" />
           <div class="end-node">
-            <div class="end-node-circle" />
-            <div class="end-node-text">
-              流程结束
-            </div>
+            <p>结束</p>
+          </div>
+        </div>
+        <!-- 不可编辑 -->
+        <div v-if="!allowEditNode" class="box-scale" :style="`transform: scale(${nowVal / 100});`">
+          <node-wrap-ban :node-config="nodeConfig" :flow-permission="flowPermission" />
+          <div class="end-node">
+            <p>结束</p>
           </div>
         </div>
       </section>
@@ -163,6 +173,31 @@
   justify-content: flex-end;
   margin: 20px;
 }
+
+.box-scale {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+// .end-node-circle {
+.end-node {
+  justify-content: center;
+  flex-direction: column;
+  align-content: center;
+
+  p {
+    width: 280px;
+    height: 40px;
+    line-height: 40px;
+    color: #fff;
+    text-align: center;
+    background-color: #8cafff;
+    border-radius: 4px;
+    font-size: 14px;
+    margin: 0;
+  }
+}
+// }
 </style>
 
 <style>

diff --git a/src/components.d.ts b/src/components.d.ts
index dbb2458..a832874 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -8,12 +8,14 @@
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     AddNode: typeof import('./components/workFlow/addNode.vue')['default']
+    AddNodeBan: typeof import('./components/workFlow/addNodeBan.vue')['default']
     AppContainer: typeof import('./components/AppContainer/index.vue')['default']
     ApproverDrawer: typeof import('./components/drawer/approverDrawer.vue')['default']
     Auth: typeof import('./components/Auth/index.vue')['default']
     AuthAll: typeof import('./components/AuthAll/index.vue')['default']
     BatchActionBar: typeof import('./components/BatchActionBar/index.vue')['default']
     ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default']
+    copy: typeof import('./components/workFlow/nodeWrap copy.vue')['default']
     CopyerDrawer: typeof import('./components/drawer/copyerDrawer.vue')['default']
     Copyright: typeof import('./components/Copyright/index.vue')['default']
     DeptSelect: typeof import('./components/DeptSelect/index.vue')['default']
@@ -27,6 +29,7 @@
     ImagesUpload: typeof import('./components/ImagesUpload/index.vue')['default']
     ImageUpload: typeof import('./components/ImageUpload/index.vue')['default']
     NodeWrap: typeof import('./components/workFlow/nodeWrap.vue')['default']
+    NodeWrapBan: typeof import('./components/workFlow/nodeWrapBan.vue')['default']
     NormalTable: typeof import('./components/NormalTable/index.vue')['default']
     PageHeader: typeof import('./components/PageHeader/index.vue')['default']
     PageMain: typeof import('./components/PageMain/index.vue')['default']
diff --git a/src/components/workFlow/addNodeBan.vue b/src/components/workFlow/addNodeBan.vue
new file mode 100644
index 0000000..5f996d1
--- /dev/null
+++ b/src/components/workFlow/addNodeBan.vue
@@ -0,0 +1,240 @@
+<script setup>
+import { ref } from 'vue'
+const props = defineProps({
+  childNodeP: {
+    type: Object,
+    default: () => ({}),
+  },
+})
+const emits = defineEmits(['update:childNodeP'])
+const visible = ref(false)
+const addType = (type) => {
+  visible.value = false
+  if (type != 4) {
+    let 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: [],
+      }
+    }
+    emits('update:childNodeP', data)
+  }
+  else {
+    emits('update:childNodeP', {
+      nodeName: '路由',
+      type: 4,
+      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"></span>
+            </div>
+            <p>审批人</p>
+          </a>
+          <a class="add-node-popover-item notifier" @click="addType(2)">
+            <div class="item-wrapper">
+              <span class="iconfont"></span>
+            </div>
+            <p>抄送人</p>
+          </a>
+          <a class="add-node-popover-item condition" @click="addType(4)">
+            <div class="item-wrapper">
+              <span class="iconfont"></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 scoped lang="scss">
+.add-node-btn-box {
+  width: 240px;
+  display: inline-box;
+  display: 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 rgb(0 0 0 / 10%);
+      width: 30px;
+      height: 30px;
+      background: #3296fa;
+      border-radius: 50%;
+      position: relative;
+      border: none;
+      line-height: 30px;
+      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+      .iconfont {
+        color: #fff;
+        font-size: 16px;
+      }
+
+      &:hover {
+        transform: scale(1.3);
+        box-shadow: 0 13px 27px 0 rgb(0 0 0 / 10%);
+      }
+
+      &:active {
+        transform: none;
+        background: #1e83e9;
+        box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+.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 0.3s cubic-bezier(0.645, 0.045, 0.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 rgb(50 150 250 / 40%);
+      }
+
+      .iconfont {
+        color: #fff;
+      }
+    }
+
+    &:active {
+      .item-wrapper {
+        box-shadow: none;
+        background: #eaeaea;
+      }
+
+      .iconfont {
+        color: inherit;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/workFlow/nodeWrapBan.vue b/src/components/workFlow/nodeWrapBan.vue
new file mode 100644
index 0000000..2de6650
--- /dev/null
+++ b/src/components/workFlow/nodeWrapBan.vue
@@ -0,0 +1,229 @@
+<script setup>
+import { computed, getCurrentInstance, onMounted, ref, watch } from 'vue'
+import $func from '@/plugins/preload'
+import useWorkFlowStore from '@/store/modules/workFlow'
+const props = defineProps({
+  nodeConfig: {
+    type: Object,
+    default: () => ({}),
+  },
+  flowPermission: {
+    type: Object,
+    default: () => {},
+  },
+})
+
+const emits = defineEmits(['update:flowPermission', 'update:nodeConfig'])
+
+const workFlowStore = useWorkFlowStore()
+
+const _uid = getCurrentInstance().uid
+const bgColors = ['87, 106, 149', '255, 148, 62', '50, 150, 250']
+const placeholderList = ['发起人', '审核人', '抄送人']
+const defaultText = computed(() => {
+  return placeholderList[props.nodeConfig.type]
+})
+const showText = computed(() => {
+  console.log('showText')
+  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)
+})
+watch(() => props.nodeConfig, (val) => {
+  console.log('watch nodeConfig')
+  if (props.nodeConfig.type == 1) {
+    return $func.setApproverStr(props.nodeConfig)
+  }
+  return $func.copyerStr(props.nodeConfig)
+}, {
+  deep: true, // 深度监听的参数
+})
+
+const isInputList = ref([])
+const isInput = ref(false)
+const resetConditionNodesErr = () => {
+  for (let i = 0; i < props.nodeConfig.conditionNodes.length; i++) {
+    props.nodeConfig.conditionNodes[i].error = $func.conditionStr(props.nodeConfig, i) == '请设置条件' && i != props.nodeConfig.conditionNodes.length - 1
+  }
+}
+onMounted(() => {
+  if (props.nodeConfig.type == 1) {
+    props.nodeConfig.error = !$func.setApproverStr(props.nodeConfig)
+  }
+  else if (props.nodeConfig.type == 2) {
+    props.nodeConfig.error = !$func.copyerStr(props.nodeConfig)
+  }
+  else if (props.nodeConfig.type == 4) {
+    resetConditionNodesErr()
+  }
+})
+const {
+  setPromoter,
+  setApprover,
+  setCopyer,
+  setCondition,
+  setFlowPermission,
+  setApproverConfig,
+  setCopyerConfig,
+  setConditionsConfig,
+} = workFlowStore
+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
+    props.nodeConfig.conditionNodes[index].nodeName = props.nodeConfig.conditionNodes[index].nodeName || '条件'
+  }
+  else {
+    isInput.value = false
+    props.nodeConfig.nodeName = props.nodeConfig.nodeName || defaultText
+  }
+}
+const arrTransfer = (index, type = 1) => {
+  // 向左-1,向右1
+  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)
+}
+</script>
+
+<template>
+  <div v-if="nodeConfig.type < 3" class="node-wrap">
+    <div class="node-wrap-box" :class="(nodeConfig.type === 0 ? 'start-node ' : '') + (workFlowStore.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"
+            v-focus
+            type="text"
+            class="ant-input editable-title-input"
+            :placeholder="defaultText"
+            @blur="blurEvent()"
+            @focus="$event.currentTarget.select()"
+          >
+          <span v-else class="editable-title">{{ nodeConfig.nodeName }}</span>
+          <!-- <i class="anticon anticon-close close" /> -->
+        </template>
+      </div>
+      <div class="content">
+        <div class="text">
+          <span v-if="!showText" class="placeholder">请选择{{ defaultText }}</span>
+          {{ showText }}
+        </div>
+        <!-- <i class="anticon anticon-right arrow" /> -->
+      </div>
+      <div v-if="workFlowStore.isTried && nodeConfig.error" class="error_tip">
+        <!-- <i class="anticon anticon-exclamation-circle" /> -->
+      </div>
+    </div>
+    <add-node-ban v-model:childNodeP="nodeConfig.childNode" />
+  </div>
+  <div v-if="nodeConfig.type === 4" class="branch-wrap">
+    <div class="branch-box-wrap">
+      <div class="branch-box">
+        <button class="add-branch">
+          添加条件
+        </button>
+        <div v-for="(item, index) in nodeConfig.conditionNodes" :key="index" class="col-box">
+          <div class="condition-node">
+            <div class="condition-node-box">
+              <div class="auto-judge" :class="workFlowStore.isTried && item.error ? 'error active' : ''">
+                <!-- <div v-if="index !== 0" class="sort-left">
+                  &lt;
+                </div> -->
+                <div class="title-wrapper">
+                  <input
+                    v-if="isInputList[index]"
+                    v-model="item.nodeName"
+                    v-focus
+                    type="text"
+                    class="ant-input editable-title-input"
+                    @blur="blurEvent(index)"
+                    @focus="$event.currentTarget.select()"
+                  >
+                  <span v-else class="editable-title">{{ item.nodeName }}</span>
+                  <span class="priority-title">优先级{{ item.priorityLevel }}</span>
+                  <!-- <i class="anticon anticon-close close" /> -->
+                </div>
+                <!-- <div v-if="index !== nodeConfig.conditionNodes.length - 1" class="sort-right">
+                  &gt;
+                </div> -->
+                <div class="content">
+                  {{ $func.conditionStr(nodeConfig, index) }}
+                </div>
+                <div v-if="workFlowStore.isTried && item.error" class="error_tip">
+                  <!-- <i class="anticon anticon-exclamation-circle" /> -->
+                </div>
+              </div>
+              <add-node-ban v-model:childNodeP="item.childNode" />
+            </div>
+          </div>
+          <node-wrap-ban v-if="item.childNode" v-model:nodeConfig="item.childNode" />
+          <template v-if="index === 0">
+            <div class="top-left-cover-line" />
+            <div class="bottom-left-cover-line" />
+          </template>
+          <template v-if="index === nodeConfig.conditionNodes.length - 1">
+            <div class="top-right-cover-line" />
+            <div class="bottom-right-cover-line" />
+          </template>
+        </div>
+      </div>
+      <add-node-ban v-model:childNodeP="nodeConfig.childNode" />
+    </div>
+  </div>
+  <node-wrap-ban v-if="nodeConfig.childNode" v-model:nodeConfig="nodeConfig.childNode" />
+</template>
+
+<style>
+.error_tip {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translate(150%, 0);
+  font-size: 24px;
+}
+
+.promoter_person .el-dialog__body {
+  padding: 10px 20px 14px;
+}
+
+.selected_list {
+  margin-bottom: 20px;
+  line-height: 30px;
+}
+
+.selected_list span {
+  margin-right: 10px;
+  padding: 3px 6px 3px 9px;
+  line-height: 12px;
+  white-space: nowrap;
+  border-radius: 2px;
+  border: 1px solid rgb(220 220 220 / 100%);
+}
+
+.selected_list img {
+  margin-left: 5px;
+  width: 7px;
+  height: 7px;
+  cursor: pointer;
+}
+</style>
diff --git a/src/css/workflow.css b/src/css/workflow.css
index 43a0bf8..eee3dec 100644
--- a/src/css/workflow.css
+++ b/src/css/workflow.css
@@ -1677,6 +1677,9 @@
 }
 
 .dingflow-design .end-node {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   border-radius: 50%;
   font-size: 14px;
   color: rgb(25 31 37 / 40%);
diff --git a/src/views/setting.vue b/src/views/setting.vue
index 5cd7866..1376467 100644
--- a/src/views/setting.vue
+++ b/src/views/setting.vue
@@ -9,9 +9,14 @@
 import copyerDrawer from '@/components/drawer/copyerDrawer.vue'
 import conditionDrawer from '@/components/drawer/conditionDrawer.vue'
 import { getWorkFlowData, setWorkFlowData } from '@/plugins/api.js'
+const props = defineProps({
+  allowEditNode: {
+    type: Boolean,
+    default: true,
+  },
+})
 const workFlowStore = useWorkFlowStore()
 const router = useRouter()
-
 const tipList = ref([])
 const tipVisible = ref(false)
 const nowVal = ref(100)
@@ -138,13 +143,18 @@
           <span>{{ nowVal }}%</span>
           <div class="zoom-in" :class="nowVal === 300 && 'disabled'" @click="zoomSize(2)" />
         </div> -->
-        <div class="box-scale" :style="`transform: scale(${nowVal / 100});`">
-          <node-wrap v-model:nodeConfig="nodeConfig" v-model:flowPermission="flowPermission" />
+        <!-- 可编辑 -->
+        <div v-if="allowEditNode" class="box-scale" :style="`transform: scale(${nowVal / 100});`">
+          <node-wrap v-if="props.allowEditNode" v-model:nodeConfig="nodeConfig" v-model:flowPermission="flowPermission" />
           <div class="end-node">
-            <div class="end-node-circle" />
-            <div class="end-node-text">
-              流程结束
-            </div>
+            <p>结束</p>
+          </div>
+        </div>
+        <!-- 不可编辑 -->
+        <div v-if="!allowEditNode" class="box-scale" :style="`transform: scale(${nowVal / 100});`">
+          <node-wrap-ban :node-config="nodeConfig" :flow-permission="flowPermission" />
+          <div class="end-node">
+            <p>结束</p>
           </div>
         </div>
       </section>
@@ -163,6 +173,31 @@
   justify-content: flex-end;
   margin: 20px;
 }
+
+.box-scale {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+// .end-node-circle {
+.end-node {
+  justify-content: center;
+  flex-direction: column;
+  align-content: center;
+
+  p {
+    width: 280px;
+    height: 40px;
+    line-height: 40px;
+    color: #fff;
+    text-align: center;
+    background-color: #8cafff;
+    border-radius: 4px;
+    font-size: 14px;
+    margin: 0;
+  }
+}
+// }
 </style>
 
 <style>
diff --git a/src/views/system/process/detailProcess.vue b/src/views/system/process/detailProcess.vue
new file mode 100644
index 0000000..2f14306
--- /dev/null
+++ b/src/views/system/process/detailProcess.vue
@@ -0,0 +1,184 @@
+<!-- 编辑流程页面 -->
+<script lang="ts" setup name="DetailProcess">
+import { reactive, ref } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
+import type { Ref } from 'vue'
+import setting from '../../setting.vue'
+import type { Iform } from './process'
+import WorkFlow from '@/components/workFlow/workFlow.vue'
+const emits = defineEmits(['close'])
+const ruleFormRef = ref<FormInstance>()
+const form: Ref<Iform> = ref({
+  number: '11111', // 编号
+  name: '111', // 名称
+  business: 'sss', // 关联业务
+  desc: '2', // 流程描述
+  selectDecision: '同意 驳回 拒绝', // 选择的决策
+  rejectTo: '2', // 可驳回至
+  changeData: '2', // 驳回修改数据
+  isMessage: 'shi', // 审批结果通知发起人
+})
+// 可选决策项
+const decision = [
+  {
+    id: 'reject-refuse',
+    title: '同意 驳回 拒绝',
+  },
+  {
+    id: 'reject',
+    title: '同意 驳回',
+  },
+  {
+    id: 'refuse',
+    title: '同意 拒绝',
+  },
+]
+// 可驳回至
+const reject = [
+  {
+    id: 'change',
+    title: '单据修改',
+  },
+]
+// 驳回修改数据
+const rejectChangeData = [
+  {
+    id: 'all',
+    title: '重新按流程走',
+  },
+  {
+    id: 'part',
+    title: '送至驳回节点',
+  },
+]
+// 审批结果通知发起人
+const messageData = [
+  {
+    id: 'yes',
+    title: '是',
+  },
+  {
+    id: 'no',
+    title: '否',
+  },
+]
+// 关闭
+const close = () => {
+  emits('close')
+}
+</script>
+
+<template>
+  <div class="edit-process">
+    <h5 class="title">
+      流程编辑
+    </h5>
+    <div class="edit">
+      <div class="button-area">
+        <el-button type="primary" @click="close">
+          关闭
+        </el-button>
+      </div>
+      <el-form ref="ruleFormRef" :model="form" label-width="150px">
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item label="流程编号">
+              {{ form.number }}
+            </el-form-item>
+            <el-form-item label="可选决策项">
+              <el-select v-model="form.selectDecision" disabled placeholder="请选择">
+                <el-option
+                  v-for="item in decision"
+                  :key="item.id"
+                  :label="item.title"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="流程描述">
+              <el-input v-model="form.desc" disabled type="textarea" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="流程名称">
+              {{ form.name }}
+            </el-form-item>
+
+            <el-form-item v-if="form.selectDecision !== 'refuse'" label="可驳回至">
+              <el-select v-model="form.rejectTo" disabled placeholder="请选择">
+                <el-option
+                  v-for="item in reject"
+                  :key="item.id"
+                  :label="item.title"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="审批结果通知发起人">
+              <el-select v-model="form.isMessage" disabled placeholder="请选择">
+                <el-option
+                  v-for="item in messageData"
+                  :key="item.id"
+                  :label="item.title"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="关联业务">
+              {{ form.business }}
+            </el-form-item>
+            <el-form-item v-if="form.selectDecision !== 'refuse'" label="驳回修改数据">
+              <el-select v-model="form.changeData" disabled placeholder="请选择">
+                <el-option
+                  v-for="item in rejectChangeData"
+                  :key="item.id"
+                  :label="item.title"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
+    <h5 class="title">
+      流程配置
+    </h5>
+    <setting :allow-edit-node="false" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .edit-process {
+    width: 100%;
+
+    .title {
+      margin: 0 0 20px;
+      font-weight: 600;
+    }
+
+    .edit {
+      width: 100%;
+      padding: 12px;
+      background-color: #fff;
+      border-radius: 7px;
+      margin: 0 0 20px;
+
+      .button-area {
+        width: 100%;
+        display: flex;
+        justify-content: flex-end;
+        margin-bottom: 20px;
+      }
+    }
+
+    .set {
+      width: 100%;
+      background-color: #fff;
+      border-radius: 7px;
+      margin: 20px 0;
+    }
+  }
+</style>

diff --git a/src/components.d.ts b/src/components.d.ts
index dbb2458..a832874 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -8,12 +8,14 @@
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     AddNode: typeof import('./components/workFlow/addNode.vue')['default']
+    AddNodeBan: typeof import('./components/workFlow/addNodeBan.vue')['default']
     AppContainer: typeof import('./components/AppContainer/index.vue')['default']
     ApproverDrawer: typeof import('./components/drawer/approverDrawer.vue')['default']
     Auth: typeof import('./components/Auth/index.vue')['default']
     AuthAll: typeof import('./components/AuthAll/index.vue')['default']
     BatchActionBar: typeof import('./components/BatchActionBar/index.vue')['default']
     ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default']
+    copy: typeof import('./components/workFlow/nodeWrap copy.vue')['default']
     CopyerDrawer: typeof import('./components/drawer/copyerDrawer.vue')['default']
     Copyright: typeof import('./components/Copyright/index.vue')['default']
     DeptSelect: typeof import('./components/DeptSelect/index.vue')['default']
@@ -27,6 +29,7 @@
     ImagesUpload: typeof import('./components/ImagesUpload/index.vue')['default']
     ImageUpload: typeof import('./components/ImageUpload/index.vue')['default']
     NodeWrap: typeof import('./components/workFlow/nodeWrap.vue')['default']
+    NodeWrapBan: typeof import('./components/workFlow/nodeWrapBan.vue')['default']
     NormalTable: typeof import('./components/NormalTable/index.vue')['default']
     PageHeader: typeof import('./components/PageHeader/index.vue')['default']
     PageMain: typeof import('./components/PageMain/index.vue')['default']
diff --git a/src/components/workFlow/addNodeBan.vue b/src/components/workFlow/addNodeBan.vue
new file mode 100644
index 0000000..5f996d1
--- /dev/null
+++ b/src/components/workFlow/addNodeBan.vue
@@ -0,0 +1,240 @@
+<script setup>
+import { ref } from 'vue'
+const props = defineProps({
+  childNodeP: {
+    type: Object,
+    default: () => ({}),
+  },
+})
+const emits = defineEmits(['update:childNodeP'])
+const visible = ref(false)
+const addType = (type) => {
+  visible.value = false
+  if (type != 4) {
+    let 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: [],
+      }
+    }
+    emits('update:childNodeP', data)
+  }
+  else {
+    emits('update:childNodeP', {
+      nodeName: '路由',
+      type: 4,
+      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"></span>
+            </div>
+            <p>审批人</p>
+          </a>
+          <a class="add-node-popover-item notifier" @click="addType(2)">
+            <div class="item-wrapper">
+              <span class="iconfont"></span>
+            </div>
+            <p>抄送人</p>
+          </a>
+          <a class="add-node-popover-item condition" @click="addType(4)">
+            <div class="item-wrapper">
+              <span class="iconfont"></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 scoped lang="scss">
+.add-node-btn-box {
+  width: 240px;
+  display: inline-box;
+  display: 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 rgb(0 0 0 / 10%);
+      width: 30px;
+      height: 30px;
+      background: #3296fa;
+      border-radius: 50%;
+      position: relative;
+      border: none;
+      line-height: 30px;
+      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+      .iconfont {
+        color: #fff;
+        font-size: 16px;
+      }
+
+      &:hover {
+        transform: scale(1.3);
+        box-shadow: 0 13px 27px 0 rgb(0 0 0 / 10%);
+      }
+
+      &:active {
+        transform: none;
+        background: #1e83e9;
+        box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+.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 0.3s cubic-bezier(0.645, 0.045, 0.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 rgb(50 150 250 / 40%);
+      }
+
+      .iconfont {
+        color: #fff;
+      }
+    }
+
+    &:active {
+      .item-wrapper {
+        box-shadow: none;
+        background: #eaeaea;
+      }
+
+      .iconfont {
+        color: inherit;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/workFlow/nodeWrapBan.vue b/src/components/workFlow/nodeWrapBan.vue
new file mode 100644
index 0000000..2de6650
--- /dev/null
+++ b/src/components/workFlow/nodeWrapBan.vue
@@ -0,0 +1,229 @@
+<script setup>
+import { computed, getCurrentInstance, onMounted, ref, watch } from 'vue'
+import $func from '@/plugins/preload'
+import useWorkFlowStore from '@/store/modules/workFlow'
+const props = defineProps({
+  nodeConfig: {
+    type: Object,
+    default: () => ({}),
+  },
+  flowPermission: {
+    type: Object,
+    default: () => {},
+  },
+})
+
+const emits = defineEmits(['update:flowPermission', 'update:nodeConfig'])
+
+const workFlowStore = useWorkFlowStore()
+
+const _uid = getCurrentInstance().uid
+const bgColors = ['87, 106, 149', '255, 148, 62', '50, 150, 250']
+const placeholderList = ['发起人', '审核人', '抄送人']
+const defaultText = computed(() => {
+  return placeholderList[props.nodeConfig.type]
+})
+const showText = computed(() => {
+  console.log('showText')
+  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)
+})
+watch(() => props.nodeConfig, (val) => {
+  console.log('watch nodeConfig')
+  if (props.nodeConfig.type == 1) {
+    return $func.setApproverStr(props.nodeConfig)
+  }
+  return $func.copyerStr(props.nodeConfig)
+}, {
+  deep: true, // 深度监听的参数
+})
+
+const isInputList = ref([])
+const isInput = ref(false)
+const resetConditionNodesErr = () => {
+  for (let i = 0; i < props.nodeConfig.conditionNodes.length; i++) {
+    props.nodeConfig.conditionNodes[i].error = $func.conditionStr(props.nodeConfig, i) == '请设置条件' && i != props.nodeConfig.conditionNodes.length - 1
+  }
+}
+onMounted(() => {
+  if (props.nodeConfig.type == 1) {
+    props.nodeConfig.error = !$func.setApproverStr(props.nodeConfig)
+  }
+  else if (props.nodeConfig.type == 2) {
+    props.nodeConfig.error = !$func.copyerStr(props.nodeConfig)
+  }
+  else if (props.nodeConfig.type == 4) {
+    resetConditionNodesErr()
+  }
+})
+const {
+  setPromoter,
+  setApprover,
+  setCopyer,
+  setCondition,
+  setFlowPermission,
+  setApproverConfig,
+  setCopyerConfig,
+  setConditionsConfig,
+} = workFlowStore
+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
+    props.nodeConfig.conditionNodes[index].nodeName = props.nodeConfig.conditionNodes[index].nodeName || '条件'
+  }
+  else {
+    isInput.value = false
+    props.nodeConfig.nodeName = props.nodeConfig.nodeName || defaultText
+  }
+}
+const arrTransfer = (index, type = 1) => {
+  // 向左-1,向右1
+  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)
+}
+</script>
+
+<template>
+  <div v-if="nodeConfig.type < 3" class="node-wrap">
+    <div class="node-wrap-box" :class="(nodeConfig.type === 0 ? 'start-node ' : '') + (workFlowStore.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"
+            v-focus
+            type="text"
+            class="ant-input editable-title-input"
+            :placeholder="defaultText"
+            @blur="blurEvent()"
+            @focus="$event.currentTarget.select()"
+          >
+          <span v-else class="editable-title">{{ nodeConfig.nodeName }}</span>
+          <!-- <i class="anticon anticon-close close" /> -->
+        </template>
+      </div>
+      <div class="content">
+        <div class="text">
+          <span v-if="!showText" class="placeholder">请选择{{ defaultText }}</span>
+          {{ showText }}
+        </div>
+        <!-- <i class="anticon anticon-right arrow" /> -->
+      </div>
+      <div v-if="workFlowStore.isTried && nodeConfig.error" class="error_tip">
+        <!-- <i class="anticon anticon-exclamation-circle" /> -->
+      </div>
+    </div>
+    <add-node-ban v-model:childNodeP="nodeConfig.childNode" />
+  </div>
+  <div v-if="nodeConfig.type === 4" class="branch-wrap">
+    <div class="branch-box-wrap">
+      <div class="branch-box">
+        <button class="add-branch">
+          添加条件
+        </button>
+        <div v-for="(item, index) in nodeConfig.conditionNodes" :key="index" class="col-box">
+          <div class="condition-node">
+            <div class="condition-node-box">
+              <div class="auto-judge" :class="workFlowStore.isTried && item.error ? 'error active' : ''">
+                <!-- <div v-if="index !== 0" class="sort-left">
+                  &lt;
+                </div> -->
+                <div class="title-wrapper">
+                  <input
+                    v-if="isInputList[index]"
+                    v-model="item.nodeName"
+                    v-focus
+                    type="text"
+                    class="ant-input editable-title-input"
+                    @blur="blurEvent(index)"
+                    @focus="$event.currentTarget.select()"
+                  >
+                  <span v-else class="editable-title">{{ item.nodeName }}</span>
+                  <span class="priority-title">优先级{{ item.priorityLevel }}</span>
+                  <!-- <i class="anticon anticon-close close" /> -->
+                </div>
+                <!-- <div v-if="index !== nodeConfig.conditionNodes.length - 1" class="sort-right">
+                  &gt;
+                </div> -->
+                <div class="content">
+                  {{ $func.conditionStr(nodeConfig, index) }}
+                </div>
+                <div v-if="workFlowStore.isTried && item.error" class="error_tip">
+                  <!-- <i class="anticon anticon-exclamation-circle" /> -->
+                </div>
+              </div>
+              <add-node-ban v-model:childNodeP="item.childNode" />
+            </div>
+          </div>
+          <node-wrap-ban v-if="item.childNode" v-model:nodeConfig="item.childNode" />
+          <template v-if="index === 0">
+            <div class="top-left-cover-line" />
+            <div class="bottom-left-cover-line" />
+          </template>
+          <template v-if="index === nodeConfig.conditionNodes.length - 1">
+            <div class="top-right-cover-line" />
+            <div class="bottom-right-cover-line" />
+          </template>
+        </div>
+      </div>
+      <add-node-ban v-model:childNodeP="nodeConfig.childNode" />
+    </div>
+  </div>
+  <node-wrap-ban v-if="nodeConfig.childNode" v-model:nodeConfig="nodeConfig.childNode" />
+</template>
+
+<style>
+.error_tip {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translate(150%, 0);
+  font-size: 24px;
+}
+
+.promoter_person .el-dialog__body {
+  padding: 10px 20px 14px;
+}
+
+.selected_list {
+  margin-bottom: 20px;
+  line-height: 30px;
+}
+
+.selected_list span {
+  margin-right: 10px;
+  padding: 3px 6px 3px 9px;
+  line-height: 12px;
+  white-space: nowrap;
+  border-radius: 2px;
+  border: 1px solid rgb(220 220 220 / 100%);
+}
+
+.selected_list img {
+  margin-left: 5px;
+  width: 7px;
+  height: 7px;
+  cursor: pointer;
+}
+</style>
diff --git a/src/css/workflow.css b/src/css/workflow.css
index 43a0bf8..eee3dec 100644
--- a/src/css/workflow.css
+++ b/src/css/workflow.css
@@ -1677,6 +1677,9 @@
 }
 
 .dingflow-design .end-node {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   border-radius: 50%;
   font-size: 14px;
   color: rgb(25 31 37 / 40%);
diff --git a/src/views/setting.vue b/src/views/setting.vue
index 5cd7866..1376467 100644
--- a/src/views/setting.vue
+++ b/src/views/setting.vue
@@ -9,9 +9,14 @@
 import copyerDrawer from '@/components/drawer/copyerDrawer.vue'
 import conditionDrawer from '@/components/drawer/conditionDrawer.vue'
 import { getWorkFlowData, setWorkFlowData } from '@/plugins/api.js'
+const props = defineProps({
+  allowEditNode: {
+    type: Boolean,
+    default: true,
+  },
+})
 const workFlowStore = useWorkFlowStore()
 const router = useRouter()
-
 const tipList = ref([])
 const tipVisible = ref(false)
 const nowVal = ref(100)
@@ -138,13 +143,18 @@
           <span>{{ nowVal }}%</span>
           <div class="zoom-in" :class="nowVal === 300 && 'disabled'" @click="zoomSize(2)" />
         </div> -->
-        <div class="box-scale" :style="`transform: scale(${nowVal / 100});`">
-          <node-wrap v-model:nodeConfig="nodeConfig" v-model:flowPermission="flowPermission" />
+        <!-- 可编辑 -->
+        <div v-if="allowEditNode" class="box-scale" :style="`transform: scale(${nowVal / 100});`">
+          <node-wrap v-if="props.allowEditNode" v-model:nodeConfig="nodeConfig" v-model:flowPermission="flowPermission" />
           <div class="end-node">
-            <div class="end-node-circle" />
-            <div class="end-node-text">
-              流程结束
-            </div>
+            <p>结束</p>
+          </div>
+        </div>
+        <!-- 不可编辑 -->
+        <div v-if="!allowEditNode" class="box-scale" :style="`transform: scale(${nowVal / 100});`">
+          <node-wrap-ban :node-config="nodeConfig" :flow-permission="flowPermission" />
+          <div class="end-node">
+            <p>结束</p>
           </div>
         </div>
       </section>
@@ -163,6 +173,31 @@
   justify-content: flex-end;
   margin: 20px;
 }
+
+.box-scale {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+// .end-node-circle {
+.end-node {
+  justify-content: center;
+  flex-direction: column;
+  align-content: center;
+
+  p {
+    width: 280px;
+    height: 40px;
+    line-height: 40px;
+    color: #fff;
+    text-align: center;
+    background-color: #8cafff;
+    border-radius: 4px;
+    font-size: 14px;
+    margin: 0;
+  }
+}
+// }
 </style>
 
 <style>
diff --git a/src/views/system/process/detailProcess.vue b/src/views/system/process/detailProcess.vue
new file mode 100644
index 0000000..2f14306
--- /dev/null
+++ b/src/views/system/process/detailProcess.vue
@@ -0,0 +1,184 @@
+<!-- 编辑流程页面 -->
+<script lang="ts" setup name="DetailProcess">
+import { reactive, ref } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
+import type { Ref } from 'vue'
+import setting from '../../setting.vue'
+import type { Iform } from './process'
+import WorkFlow from '@/components/workFlow/workFlow.vue'
+const emits = defineEmits(['close'])
+const ruleFormRef = ref<FormInstance>()
+const form: Ref<Iform> = ref({
+  number: '11111', // 编号
+  name: '111', // 名称
+  business: 'sss', // 关联业务
+  desc: '2', // 流程描述
+  selectDecision: '同意 驳回 拒绝', // 选择的决策
+  rejectTo: '2', // 可驳回至
+  changeData: '2', // 驳回修改数据
+  isMessage: 'shi', // 审批结果通知发起人
+})
+// 可选决策项
+const decision = [
+  {
+    id: 'reject-refuse',
+    title: '同意 驳回 拒绝',
+  },
+  {
+    id: 'reject',
+    title: '同意 驳回',
+  },
+  {
+    id: 'refuse',
+    title: '同意 拒绝',
+  },
+]
+// 可驳回至
+const reject = [
+  {
+    id: 'change',
+    title: '单据修改',
+  },
+]
+// 驳回修改数据
+const rejectChangeData = [
+  {
+    id: 'all',
+    title: '重新按流程走',
+  },
+  {
+    id: 'part',
+    title: '送至驳回节点',
+  },
+]
+// 审批结果通知发起人
+const messageData = [
+  {
+    id: 'yes',
+    title: '是',
+  },
+  {
+    id: 'no',
+    title: '否',
+  },
+]
+// 关闭
+const close = () => {
+  emits('close')
+}
+</script>
+
+<template>
+  <div class="edit-process">
+    <h5 class="title">
+      流程编辑
+    </h5>
+    <div class="edit">
+      <div class="button-area">
+        <el-button type="primary" @click="close">
+          关闭
+        </el-button>
+      </div>
+      <el-form ref="ruleFormRef" :model="form" label-width="150px">
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item label="流程编号">
+              {{ form.number }}
+            </el-form-item>
+            <el-form-item label="可选决策项">
+              <el-select v-model="form.selectDecision" disabled placeholder="请选择">
+                <el-option
+                  v-for="item in decision"
+                  :key="item.id"
+                  :label="item.title"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="流程描述">
+              <el-input v-model="form.desc" disabled type="textarea" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="流程名称">
+              {{ form.name }}
+            </el-form-item>
+
+            <el-form-item v-if="form.selectDecision !== 'refuse'" label="可驳回至">
+              <el-select v-model="form.rejectTo" disabled placeholder="请选择">
+                <el-option
+                  v-for="item in reject"
+                  :key="item.id"
+                  :label="item.title"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="审批结果通知发起人">
+              <el-select v-model="form.isMessage" disabled placeholder="请选择">
+                <el-option
+                  v-for="item in messageData"
+                  :key="item.id"
+                  :label="item.title"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="关联业务">
+              {{ form.business }}
+            </el-form-item>
+            <el-form-item v-if="form.selectDecision !== 'refuse'" label="驳回修改数据">
+              <el-select v-model="form.changeData" disabled placeholder="请选择">
+                <el-option
+                  v-for="item in rejectChangeData"
+                  :key="item.id"
+                  :label="item.title"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
+    <h5 class="title">
+      流程配置
+    </h5>
+    <setting :allow-edit-node="false" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .edit-process {
+    width: 100%;
+
+    .title {
+      margin: 0 0 20px;
+      font-weight: 600;
+    }
+
+    .edit {
+      width: 100%;
+      padding: 12px;
+      background-color: #fff;
+      border-radius: 7px;
+      margin: 0 0 20px;
+
+      .button-area {
+        width: 100%;
+        display: flex;
+        justify-content: flex-end;
+        margin-bottom: 20px;
+      }
+    }
+
+    .set {
+      width: 100%;
+      background-color: #fff;
+      border-radius: 7px;
+      margin: 20px 0;
+    }
+  }
+</style>
diff --git a/src/views/system/process/editProcess.vue b/src/views/system/process/editProcess.vue
index c172ada..235a18a 100644
--- a/src/views/system/process/editProcess.vue
+++ b/src/views/system/process/editProcess.vue
@@ -9,9 +9,9 @@
 const emits = defineEmits(['close'])
 const ruleFormRef = ref<FormInstance>()
 const form: Ref<Iform> = ref({
-  number: '', // 编号
-  name: '', // 名称
-  business: '', // 关联业务
+  number: '11111', // 编号
+  name: '111', // 名称
+  business: 'sss', // 关联业务
   desc: '', // 流程描述
   selectDecision: '', // 选择的决策
   rejectTo: '', // 可驳回至
@@ -139,59 +139,68 @@
           关闭
         </el-button>
       </div>
-      <el-form ref="ruleFormRef" :model="form" label-width="140px" :rules="rules">
-        <el-form-item label="流程编号">
-          {{ form.number }}
-        </el-form-item>
-        <el-form-item label="流程名称">
-          {{ form.name }}
-        </el-form-item>
-        <el-form-item label="关联业务">
-          {{ form.business }}
-        </el-form-item>
-        <el-form-item label="流程描述">
-          <el-input v-model="form.desc" type="textarea" />
-        </el-form-item>
-        <el-form-item label="可选决策项" prop="selectDecision">
-          <el-select v-model="form.selectDecision" placeholder="请选择" @change="changeDecision">
-            <el-option
-              v-for="item in decision"
-              :key="item.id"
-              :label="item.title"
-              :value="item.id"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item v-if="form.selectDecision !== 'refuse'" label="可驳回至" prop="rejectTo">
-          <el-select v-model="form.rejectTo" placeholder="请选择" @change="changeRejectTo">
-            <el-option
-              v-for="item in reject"
-              :key="item.id"
-              :label="item.title"
-              :value="item.id"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item v-if="form.selectDecision !== 'refuse'" label="驳回修改数据" prop="changeData">
-          <el-select v-model="form.changeData" placeholder="请选择" @change="changeData">
-            <el-option
-              v-for="item in rejectChangeData"
-              :key="item.id"
-              :label="item.title"
-              :value="item.id"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="审批结果通知发起人" prop="isMessage">
-          <el-select v-model="form.isMessage" placeholder="请选择" @change="changeMessage">
-            <el-option
-              v-for="item in messageData"
-              :key="item.id"
-              :label="item.title"
-              :value="item.id"
-            />
-          </el-select>
-        </el-form-item>
+      <el-form ref="ruleFormRef" :model="form" label-width="150px" :rules="rules">
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item label="流程编号">
+              {{ form.number }}
+            </el-form-item>
+            <el-form-item label="可选决策项" prop="selectDecision">
+              <el-select v-model="form.selectDecision" placeholder="请选择" @change="changeDecision">
+                <el-option
+                  v-for="item in decision"
+                  :key="item.id"
+                  :label="item.title"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="流程描述">
+              <el-input v-model="form.desc" type="textarea" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="流程名称">
+              {{ form.name }}
+            </el-form-item>
+
+            <el-form-item v-if="form.selectDecision !== 'refuse'" label="可驳回至" prop="rejectTo">
+              <el-select v-model="form.rejectTo" placeholder="请选择" @change="changeRejectTo">
+                <el-option
+                  v-for="item in reject"
+                  :key="item.id"
+                  :label="item.title"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="审批结果通知发起人" prop="isMessage">
+              <el-select v-model="form.isMessage" placeholder="请选择" @change="changeMessage">
+                <el-option
+                  v-for="item in messageData"
+                  :key="item.id"
+                  :label="item.title"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="关联业务">
+              {{ form.business }}
+            </el-form-item>
+            <el-form-item v-if="form.selectDecision !== 'refuse'" label="驳回修改数据" prop="changeData">
+              <el-select v-model="form.changeData" placeholder="请选择" @change="changeData">
+                <el-option
+                  v-for="item in rejectChangeData"
+                  :key="item.id"
+                  :label="item.title"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
     </div>
     <!-- <button class="title" @click="goSetting">

diff --git a/src/components.d.ts b/src/components.d.ts
index dbb2458..a832874 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -8,12 +8,14 @@
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     AddNode: typeof import('./components/workFlow/addNode.vue')['default']
+    AddNodeBan: typeof import('./components/workFlow/addNodeBan.vue')['default']
     AppContainer: typeof import('./components/AppContainer/index.vue')['default']
     ApproverDrawer: typeof import('./components/drawer/approverDrawer.vue')['default']
     Auth: typeof import('./components/Auth/index.vue')['default']
     AuthAll: typeof import('./components/AuthAll/index.vue')['default']
     BatchActionBar: typeof import('./components/BatchActionBar/index.vue')['default']
     ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default']
+    copy: typeof import('./components/workFlow/nodeWrap copy.vue')['default']
     CopyerDrawer: typeof import('./components/drawer/copyerDrawer.vue')['default']
     Copyright: typeof import('./components/Copyright/index.vue')['default']
     DeptSelect: typeof import('./components/DeptSelect/index.vue')['default']
@@ -27,6 +29,7 @@
     ImagesUpload: typeof import('./components/ImagesUpload/index.vue')['default']
     ImageUpload: typeof import('./components/ImageUpload/index.vue')['default']
     NodeWrap: typeof import('./components/workFlow/nodeWrap.vue')['default']
+    NodeWrapBan: typeof import('./components/workFlow/nodeWrapBan.vue')['default']
     NormalTable: typeof import('./components/NormalTable/index.vue')['default']
     PageHeader: typeof import('./components/PageHeader/index.vue')['default']
     PageMain: typeof import('./components/PageMain/index.vue')['default']
diff --git a/src/components/workFlow/addNodeBan.vue b/src/components/workFlow/addNodeBan.vue
new file mode 100644
index 0000000..5f996d1
--- /dev/null
+++ b/src/components/workFlow/addNodeBan.vue
@@ -0,0 +1,240 @@
+<script setup>
+import { ref } from 'vue'
+const props = defineProps({
+  childNodeP: {
+    type: Object,
+    default: () => ({}),
+  },
+})
+const emits = defineEmits(['update:childNodeP'])
+const visible = ref(false)
+const addType = (type) => {
+  visible.value = false
+  if (type != 4) {
+    let 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: [],
+      }
+    }
+    emits('update:childNodeP', data)
+  }
+  else {
+    emits('update:childNodeP', {
+      nodeName: '路由',
+      type: 4,
+      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"></span>
+            </div>
+            <p>审批人</p>
+          </a>
+          <a class="add-node-popover-item notifier" @click="addType(2)">
+            <div class="item-wrapper">
+              <span class="iconfont"></span>
+            </div>
+            <p>抄送人</p>
+          </a>
+          <a class="add-node-popover-item condition" @click="addType(4)">
+            <div class="item-wrapper">
+              <span class="iconfont"></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 scoped lang="scss">
+.add-node-btn-box {
+  width: 240px;
+  display: inline-box;
+  display: 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 rgb(0 0 0 / 10%);
+      width: 30px;
+      height: 30px;
+      background: #3296fa;
+      border-radius: 50%;
+      position: relative;
+      border: none;
+      line-height: 30px;
+      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+      .iconfont {
+        color: #fff;
+        font-size: 16px;
+      }
+
+      &:hover {
+        transform: scale(1.3);
+        box-shadow: 0 13px 27px 0 rgb(0 0 0 / 10%);
+      }
+
+      &:active {
+        transform: none;
+        background: #1e83e9;
+        box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+.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 0.3s cubic-bezier(0.645, 0.045, 0.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 rgb(50 150 250 / 40%);
+      }
+
+      .iconfont {
+        color: #fff;
+      }
+    }
+
+    &:active {
+      .item-wrapper {
+        box-shadow: none;
+        background: #eaeaea;
+      }
+
+      .iconfont {
+        color: inherit;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/workFlow/nodeWrapBan.vue b/src/components/workFlow/nodeWrapBan.vue
new file mode 100644
index 0000000..2de6650
--- /dev/null
+++ b/src/components/workFlow/nodeWrapBan.vue
@@ -0,0 +1,229 @@
+<script setup>
+import { computed, getCurrentInstance, onMounted, ref, watch } from 'vue'
+import $func from '@/plugins/preload'
+import useWorkFlowStore from '@/store/modules/workFlow'
+const props = defineProps({
+  nodeConfig: {
+    type: Object,
+    default: () => ({}),
+  },
+  flowPermission: {
+    type: Object,
+    default: () => {},
+  },
+})
+
+const emits = defineEmits(['update:flowPermission', 'update:nodeConfig'])
+
+const workFlowStore = useWorkFlowStore()
+
+const _uid = getCurrentInstance().uid
+const bgColors = ['87, 106, 149', '255, 148, 62', '50, 150, 250']
+const placeholderList = ['发起人', '审核人', '抄送人']
+const defaultText = computed(() => {
+  return placeholderList[props.nodeConfig.type]
+})
+const showText = computed(() => {
+  console.log('showText')
+  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)
+})
+watch(() => props.nodeConfig, (val) => {
+  console.log('watch nodeConfig')
+  if (props.nodeConfig.type == 1) {
+    return $func.setApproverStr(props.nodeConfig)
+  }
+  return $func.copyerStr(props.nodeConfig)
+}, {
+  deep: true, // 深度监听的参数
+})
+
+const isInputList = ref([])
+const isInput = ref(false)
+const resetConditionNodesErr = () => {
+  for (let i = 0; i < props.nodeConfig.conditionNodes.length; i++) {
+    props.nodeConfig.conditionNodes[i].error = $func.conditionStr(props.nodeConfig, i) == '请设置条件' && i != props.nodeConfig.conditionNodes.length - 1
+  }
+}
+onMounted(() => {
+  if (props.nodeConfig.type == 1) {
+    props.nodeConfig.error = !$func.setApproverStr(props.nodeConfig)
+  }
+  else if (props.nodeConfig.type == 2) {
+    props.nodeConfig.error = !$func.copyerStr(props.nodeConfig)
+  }
+  else if (props.nodeConfig.type == 4) {
+    resetConditionNodesErr()
+  }
+})
+const {
+  setPromoter,
+  setApprover,
+  setCopyer,
+  setCondition,
+  setFlowPermission,
+  setApproverConfig,
+  setCopyerConfig,
+  setConditionsConfig,
+} = workFlowStore
+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
+    props.nodeConfig.conditionNodes[index].nodeName = props.nodeConfig.conditionNodes[index].nodeName || '条件'
+  }
+  else {
+    isInput.value = false
+    props.nodeConfig.nodeName = props.nodeConfig.nodeName || defaultText
+  }
+}
+const arrTransfer = (index, type = 1) => {
+  // 向左-1,向右1
+  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)
+}
+</script>
+
+<template>
+  <div v-if="nodeConfig.type < 3" class="node-wrap">
+    <div class="node-wrap-box" :class="(nodeConfig.type === 0 ? 'start-node ' : '') + (workFlowStore.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"
+            v-focus
+            type="text"
+            class="ant-input editable-title-input"
+            :placeholder="defaultText"
+            @blur="blurEvent()"
+            @focus="$event.currentTarget.select()"
+          >
+          <span v-else class="editable-title">{{ nodeConfig.nodeName }}</span>
+          <!-- <i class="anticon anticon-close close" /> -->
+        </template>
+      </div>
+      <div class="content">
+        <div class="text">
+          <span v-if="!showText" class="placeholder">请选择{{ defaultText }}</span>
+          {{ showText }}
+        </div>
+        <!-- <i class="anticon anticon-right arrow" /> -->
+      </div>
+      <div v-if="workFlowStore.isTried && nodeConfig.error" class="error_tip">
+        <!-- <i class="anticon anticon-exclamation-circle" /> -->
+      </div>
+    </div>
+    <add-node-ban v-model:childNodeP="nodeConfig.childNode" />
+  </div>
+  <div v-if="nodeConfig.type === 4" class="branch-wrap">
+    <div class="branch-box-wrap">
+      <div class="branch-box">
+        <button class="add-branch">
+          添加条件
+        </button>
+        <div v-for="(item, index) in nodeConfig.conditionNodes" :key="index" class="col-box">
+          <div class="condition-node">
+            <div class="condition-node-box">
+              <div class="auto-judge" :class="workFlowStore.isTried && item.error ? 'error active' : ''">
+                <!-- <div v-if="index !== 0" class="sort-left">
+                  &lt;
+                </div> -->
+                <div class="title-wrapper">
+                  <input
+                    v-if="isInputList[index]"
+                    v-model="item.nodeName"
+                    v-focus
+                    type="text"
+                    class="ant-input editable-title-input"
+                    @blur="blurEvent(index)"
+                    @focus="$event.currentTarget.select()"
+                  >
+                  <span v-else class="editable-title">{{ item.nodeName }}</span>
+                  <span class="priority-title">优先级{{ item.priorityLevel }}</span>
+                  <!-- <i class="anticon anticon-close close" /> -->
+                </div>
+                <!-- <div v-if="index !== nodeConfig.conditionNodes.length - 1" class="sort-right">
+                  &gt;
+                </div> -->
+                <div class="content">
+                  {{ $func.conditionStr(nodeConfig, index) }}
+                </div>
+                <div v-if="workFlowStore.isTried && item.error" class="error_tip">
+                  <!-- <i class="anticon anticon-exclamation-circle" /> -->
+                </div>
+              </div>
+              <add-node-ban v-model:childNodeP="item.childNode" />
+            </div>
+          </div>
+          <node-wrap-ban v-if="item.childNode" v-model:nodeConfig="item.childNode" />
+          <template v-if="index === 0">
+            <div class="top-left-cover-line" />
+            <div class="bottom-left-cover-line" />
+          </template>
+          <template v-if="index === nodeConfig.conditionNodes.length - 1">
+            <div class="top-right-cover-line" />
+            <div class="bottom-right-cover-line" />
+          </template>
+        </div>
+      </div>
+      <add-node-ban v-model:childNodeP="nodeConfig.childNode" />
+    </div>
+  </div>
+  <node-wrap-ban v-if="nodeConfig.childNode" v-model:nodeConfig="nodeConfig.childNode" />
+</template>
+
+<style>
+.error_tip {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translate(150%, 0);
+  font-size: 24px;
+}
+
+.promoter_person .el-dialog__body {
+  padding: 10px 20px 14px;
+}
+
+.selected_list {
+  margin-bottom: 20px;
+  line-height: 30px;
+}
+
+.selected_list span {
+  margin-right: 10px;
+  padding: 3px 6px 3px 9px;
+  line-height: 12px;
+  white-space: nowrap;
+  border-radius: 2px;
+  border: 1px solid rgb(220 220 220 / 100%);
+}
+
+.selected_list img {
+  margin-left: 5px;
+  width: 7px;
+  height: 7px;
+  cursor: pointer;
+}
+</style>
diff --git a/src/css/workflow.css b/src/css/workflow.css
index 43a0bf8..eee3dec 100644
--- a/src/css/workflow.css
+++ b/src/css/workflow.css
@@ -1677,6 +1677,9 @@
 }
 
 .dingflow-design .end-node {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   border-radius: 50%;
   font-size: 14px;
   color: rgb(25 31 37 / 40%);
diff --git a/src/views/setting.vue b/src/views/setting.vue
index 5cd7866..1376467 100644
--- a/src/views/setting.vue
+++ b/src/views/setting.vue
@@ -9,9 +9,14 @@
 import copyerDrawer from '@/components/drawer/copyerDrawer.vue'
 import conditionDrawer from '@/components/drawer/conditionDrawer.vue'
 import { getWorkFlowData, setWorkFlowData } from '@/plugins/api.js'
+const props = defineProps({
+  allowEditNode: {
+    type: Boolean,
+    default: true,
+  },
+})
 const workFlowStore = useWorkFlowStore()
 const router = useRouter()
-
 const tipList = ref([])
 const tipVisible = ref(false)
 const nowVal = ref(100)
@@ -138,13 +143,18 @@
           <span>{{ nowVal }}%</span>
           <div class="zoom-in" :class="nowVal === 300 && 'disabled'" @click="zoomSize(2)" />
         </div> -->
-        <div class="box-scale" :style="`transform: scale(${nowVal / 100});`">
-          <node-wrap v-model:nodeConfig="nodeConfig" v-model:flowPermission="flowPermission" />
+        <!-- 可编辑 -->
+        <div v-if="allowEditNode" class="box-scale" :style="`transform: scale(${nowVal / 100});`">
+          <node-wrap v-if="props.allowEditNode" v-model:nodeConfig="nodeConfig" v-model:flowPermission="flowPermission" />
           <div class="end-node">
-            <div class="end-node-circle" />
-            <div class="end-node-text">
-              流程结束
-            </div>
+            <p>结束</p>
+          </div>
+        </div>
+        <!-- 不可编辑 -->
+        <div v-if="!allowEditNode" class="box-scale" :style="`transform: scale(${nowVal / 100});`">
+          <node-wrap-ban :node-config="nodeConfig" :flow-permission="flowPermission" />
+          <div class="end-node">
+            <p>结束</p>
           </div>
         </div>
       </section>
@@ -163,6 +173,31 @@
   justify-content: flex-end;
   margin: 20px;
 }
+
+.box-scale {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+// .end-node-circle {
+.end-node {
+  justify-content: center;
+  flex-direction: column;
+  align-content: center;
+
+  p {
+    width: 280px;
+    height: 40px;
+    line-height: 40px;
+    color: #fff;
+    text-align: center;
+    background-color: #8cafff;
+    border-radius: 4px;
+    font-size: 14px;
+    margin: 0;
+  }
+}
+// }
 </style>
 
 <style>
diff --git a/src/views/system/process/detailProcess.vue b/src/views/system/process/detailProcess.vue
new file mode 100644
index 0000000..2f14306
--- /dev/null
+++ b/src/views/system/process/detailProcess.vue
@@ -0,0 +1,184 @@
+<!-- 编辑流程页面 -->
+<script lang="ts" setup name="DetailProcess">
+import { reactive, ref } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
+import type { Ref } from 'vue'
+import setting from '../../setting.vue'
+import type { Iform } from './process'
+import WorkFlow from '@/components/workFlow/workFlow.vue'
+const emits = defineEmits(['close'])
+const ruleFormRef = ref<FormInstance>()
+const form: Ref<Iform> = ref({
+  number: '11111', // 编号
+  name: '111', // 名称
+  business: 'sss', // 关联业务
+  desc: '2', // 流程描述
+  selectDecision: '同意 驳回 拒绝', // 选择的决策
+  rejectTo: '2', // 可驳回至
+  changeData: '2', // 驳回修改数据
+  isMessage: 'shi', // 审批结果通知发起人
+})
+// 可选决策项
+const decision = [
+  {
+    id: 'reject-refuse',
+    title: '同意 驳回 拒绝',
+  },
+  {
+    id: 'reject',
+    title: '同意 驳回',
+  },
+  {
+    id: 'refuse',
+    title: '同意 拒绝',
+  },
+]
+// 可驳回至
+const reject = [
+  {
+    id: 'change',
+    title: '单据修改',
+  },
+]
+// 驳回修改数据
+const rejectChangeData = [
+  {
+    id: 'all',
+    title: '重新按流程走',
+  },
+  {
+    id: 'part',
+    title: '送至驳回节点',
+  },
+]
+// 审批结果通知发起人
+const messageData = [
+  {
+    id: 'yes',
+    title: '是',
+  },
+  {
+    id: 'no',
+    title: '否',
+  },
+]
+// 关闭
+const close = () => {
+  emits('close')
+}
+</script>
+
+<template>
+  <div class="edit-process">
+    <h5 class="title">
+      流程编辑
+    </h5>
+    <div class="edit">
+      <div class="button-area">
+        <el-button type="primary" @click="close">
+          关闭
+        </el-button>
+      </div>
+      <el-form ref="ruleFormRef" :model="form" label-width="150px">
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item label="流程编号">
+              {{ form.number }}
+            </el-form-item>
+            <el-form-item label="可选决策项">
+              <el-select v-model="form.selectDecision" disabled placeholder="请选择">
+                <el-option
+                  v-for="item in decision"
+                  :key="item.id"
+                  :label="item.title"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="流程描述">
+              <el-input v-model="form.desc" disabled type="textarea" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="流程名称">
+              {{ form.name }}
+            </el-form-item>
+
+            <el-form-item v-if="form.selectDecision !== 'refuse'" label="可驳回至">
+              <el-select v-model="form.rejectTo" disabled placeholder="请选择">
+                <el-option
+                  v-for="item in reject"
+                  :key="item.id"
+                  :label="item.title"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="审批结果通知发起人">
+              <el-select v-model="form.isMessage" disabled placeholder="请选择">
+                <el-option
+                  v-for="item in messageData"
+                  :key="item.id"
+                  :label="item.title"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="关联业务">
+              {{ form.business }}
+            </el-form-item>
+            <el-form-item v-if="form.selectDecision !== 'refuse'" label="驳回修改数据">
+              <el-select v-model="form.changeData" disabled placeholder="请选择">
+                <el-option
+                  v-for="item in rejectChangeData"
+                  :key="item.id"
+                  :label="item.title"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
+    <h5 class="title">
+      流程配置
+    </h5>
+    <setting :allow-edit-node="false" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .edit-process {
+    width: 100%;
+
+    .title {
+      margin: 0 0 20px;
+      font-weight: 600;
+    }
+
+    .edit {
+      width: 100%;
+      padding: 12px;
+      background-color: #fff;
+      border-radius: 7px;
+      margin: 0 0 20px;
+
+      .button-area {
+        width: 100%;
+        display: flex;
+        justify-content: flex-end;
+        margin-bottom: 20px;
+      }
+    }
+
+    .set {
+      width: 100%;
+      background-color: #fff;
+      border-radius: 7px;
+      margin: 20px 0;
+    }
+  }
+</style>
diff --git a/src/views/system/process/editProcess.vue b/src/views/system/process/editProcess.vue
index c172ada..235a18a 100644
--- a/src/views/system/process/editProcess.vue
+++ b/src/views/system/process/editProcess.vue
@@ -9,9 +9,9 @@
 const emits = defineEmits(['close'])
 const ruleFormRef = ref<FormInstance>()
 const form: Ref<Iform> = ref({
-  number: '', // 编号
-  name: '', // 名称
-  business: '', // 关联业务
+  number: '11111', // 编号
+  name: '111', // 名称
+  business: 'sss', // 关联业务
   desc: '', // 流程描述
   selectDecision: '', // 选择的决策
   rejectTo: '', // 可驳回至
@@ -139,59 +139,68 @@
           关闭
         </el-button>
       </div>
-      <el-form ref="ruleFormRef" :model="form" label-width="140px" :rules="rules">
-        <el-form-item label="流程编号">
-          {{ form.number }}
-        </el-form-item>
-        <el-form-item label="流程名称">
-          {{ form.name }}
-        </el-form-item>
-        <el-form-item label="关联业务">
-          {{ form.business }}
-        </el-form-item>
-        <el-form-item label="流程描述">
-          <el-input v-model="form.desc" type="textarea" />
-        </el-form-item>
-        <el-form-item label="可选决策项" prop="selectDecision">
-          <el-select v-model="form.selectDecision" placeholder="请选择" @change="changeDecision">
-            <el-option
-              v-for="item in decision"
-              :key="item.id"
-              :label="item.title"
-              :value="item.id"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item v-if="form.selectDecision !== 'refuse'" label="可驳回至" prop="rejectTo">
-          <el-select v-model="form.rejectTo" placeholder="请选择" @change="changeRejectTo">
-            <el-option
-              v-for="item in reject"
-              :key="item.id"
-              :label="item.title"
-              :value="item.id"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item v-if="form.selectDecision !== 'refuse'" label="驳回修改数据" prop="changeData">
-          <el-select v-model="form.changeData" placeholder="请选择" @change="changeData">
-            <el-option
-              v-for="item in rejectChangeData"
-              :key="item.id"
-              :label="item.title"
-              :value="item.id"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="审批结果通知发起人" prop="isMessage">
-          <el-select v-model="form.isMessage" placeholder="请选择" @change="changeMessage">
-            <el-option
-              v-for="item in messageData"
-              :key="item.id"
-              :label="item.title"
-              :value="item.id"
-            />
-          </el-select>
-        </el-form-item>
+      <el-form ref="ruleFormRef" :model="form" label-width="150px" :rules="rules">
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item label="流程编号">
+              {{ form.number }}
+            </el-form-item>
+            <el-form-item label="可选决策项" prop="selectDecision">
+              <el-select v-model="form.selectDecision" placeholder="请选择" @change="changeDecision">
+                <el-option
+                  v-for="item in decision"
+                  :key="item.id"
+                  :label="item.title"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="流程描述">
+              <el-input v-model="form.desc" type="textarea" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="流程名称">
+              {{ form.name }}
+            </el-form-item>
+
+            <el-form-item v-if="form.selectDecision !== 'refuse'" label="可驳回至" prop="rejectTo">
+              <el-select v-model="form.rejectTo" placeholder="请选择" @change="changeRejectTo">
+                <el-option
+                  v-for="item in reject"
+                  :key="item.id"
+                  :label="item.title"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="审批结果通知发起人" prop="isMessage">
+              <el-select v-model="form.isMessage" placeholder="请选择" @change="changeMessage">
+                <el-option
+                  v-for="item in messageData"
+                  :key="item.id"
+                  :label="item.title"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="关联业务">
+              {{ form.business }}
+            </el-form-item>
+            <el-form-item v-if="form.selectDecision !== 'refuse'" label="驳回修改数据" prop="changeData">
+              <el-select v-model="form.changeData" placeholder="请选择" @change="changeData">
+                <el-option
+                  v-for="item in rejectChangeData"
+                  :key="item.id"
+                  :label="item.title"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
     </div>
     <!-- <button class="title" @click="goSetting">
diff --git a/src/views/system/process/process.vue b/src/views/system/process/process.vue
index 040ad8f..ea89ddc 100644
--- a/src/views/system/process/process.vue
+++ b/src/views/system/process/process.vue
@@ -4,6 +4,7 @@
 import { Delete } from '@element-plus/icons-vue'
 import type { IlistQuery } from './process'
 import EditProcess from './editProcess.vue'
+import DetailProcess from './detailProcess.vue'
 import { delLoginLog, getLoginLogList } from '@/api/system/log'
 
 const { proxy } = getCurrentInstance() as any
@@ -228,7 +229,7 @@
       </div>
       <!-- 详情 -->
       <div v-if="active === 'detail'">
-        详情
+        <detail-process @close="close" />
       </div>
     </app-container>
   </div>