diff --git a/.eslintrc b/.eslintrc
index 7d9970d..cd94cc4 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -5,7 +5,7 @@
     "no-tabs":"off",
     "no-const-assign": "off",
     "no-console": "off",
-    // "eqeqeq": "off",
+    "eqeqeq": "off",
     "vue/component-name-in-template-casing": ["error", "kebab-case", {
       "registeredComponentsOnly": false,
       "ignores": []

diff --git a/.eslintrc b/.eslintrc
index 7d9970d..cd94cc4 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -5,7 +5,7 @@
     "no-tabs":"off",
     "no-const-assign": "off",
     "no-console": "off",
-    // "eqeqeq": "off",
+    "eqeqeq": "off",
     "vue/component-name-in-template-casing": ["error", "kebab-case", {
       "registeredComponentsOnly": false,
       "ignores": []
diff --git "a/src/assets/images/workFlowImg/\345\256\241\346\211\271\344\272\272.png" "b/src/assets/images/workFlowImg/\345\256\241\346\211\271\344\272\272.png"
new file mode 100644
index 0000000..e934468
--- /dev/null
+++ "b/src/assets/images/workFlowImg/\345\256\241\346\211\271\344\272\272.png"
Binary files differ

diff --git a/.eslintrc b/.eslintrc
index 7d9970d..cd94cc4 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -5,7 +5,7 @@
     "no-tabs":"off",
     "no-const-assign": "off",
     "no-console": "off",
-    // "eqeqeq": "off",
+    "eqeqeq": "off",
     "vue/component-name-in-template-casing": ["error", "kebab-case", {
       "registeredComponentsOnly": false,
       "ignores": []
diff --git "a/src/assets/images/workFlowImg/\345\256\241\346\211\271\344\272\272.png" "b/src/assets/images/workFlowImg/\345\256\241\346\211\271\344\272\272.png"
new file mode 100644
index 0000000..e934468
--- /dev/null
+++ "b/src/assets/images/workFlowImg/\345\256\241\346\211\271\344\272\272.png"
Binary files differ
diff --git "a/src/assets/images/workFlowImg/\346\212\204\351\200\201\344\272\272.png" "b/src/assets/images/workFlowImg/\346\212\204\351\200\201\344\272\272.png"
new file mode 100644
index 0000000..23521a1
--- /dev/null
+++ "b/src/assets/images/workFlowImg/\346\212\204\351\200\201\344\272\272.png"
Binary files differ

diff --git a/.eslintrc b/.eslintrc
index 7d9970d..cd94cc4 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -5,7 +5,7 @@
     "no-tabs":"off",
     "no-const-assign": "off",
     "no-console": "off",
-    // "eqeqeq": "off",
+    "eqeqeq": "off",
     "vue/component-name-in-template-casing": ["error", "kebab-case", {
       "registeredComponentsOnly": false,
       "ignores": []
diff --git "a/src/assets/images/workFlowImg/\345\256\241\346\211\271\344\272\272.png" "b/src/assets/images/workFlowImg/\345\256\241\346\211\271\344\272\272.png"
new file mode 100644
index 0000000..e934468
--- /dev/null
+++ "b/src/assets/images/workFlowImg/\345\256\241\346\211\271\344\272\272.png"
Binary files differ
diff --git "a/src/assets/images/workFlowImg/\346\212\204\351\200\201\344\272\272.png" "b/src/assets/images/workFlowImg/\346\212\204\351\200\201\344\272\272.png"
new file mode 100644
index 0000000..23521a1
--- /dev/null
+++ "b/src/assets/images/workFlowImg/\346\212\204\351\200\201\344\272\272.png"
Binary files differ
diff --git "a/src/assets/images/workFlowImg/\346\235\241\344\273\266.png" "b/src/assets/images/workFlowImg/\346\235\241\344\273\266.png"
new file mode 100644
index 0000000..92c6e6d
--- /dev/null
+++ "b/src/assets/images/workFlowImg/\346\235\241\344\273\266.png"
Binary files differ

diff --git a/.eslintrc b/.eslintrc
index 7d9970d..cd94cc4 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -5,7 +5,7 @@
     "no-tabs":"off",
     "no-const-assign": "off",
     "no-console": "off",
-    // "eqeqeq": "off",
+    "eqeqeq": "off",
     "vue/component-name-in-template-casing": ["error", "kebab-case", {
       "registeredComponentsOnly": false,
       "ignores": []
diff --git "a/src/assets/images/workFlowImg/\345\256\241\346\211\271\344\272\272.png" "b/src/assets/images/workFlowImg/\345\256\241\346\211\271\344\272\272.png"
new file mode 100644
index 0000000..e934468
--- /dev/null
+++ "b/src/assets/images/workFlowImg/\345\256\241\346\211\271\344\272\272.png"
Binary files differ
diff --git "a/src/assets/images/workFlowImg/\346\212\204\351\200\201\344\272\272.png" "b/src/assets/images/workFlowImg/\346\212\204\351\200\201\344\272\272.png"
new file mode 100644
index 0000000..23521a1
--- /dev/null
+++ "b/src/assets/images/workFlowImg/\346\212\204\351\200\201\344\272\272.png"
Binary files differ
diff --git "a/src/assets/images/workFlowImg/\346\235\241\344\273\266.png" "b/src/assets/images/workFlowImg/\346\235\241\344\273\266.png"
new file mode 100644
index 0000000..92c6e6d
--- /dev/null
+++ "b/src/assets/images/workFlowImg/\346\235\241\344\273\266.png"
Binary files differ
diff --git a/src/components/workFlow/addNode.vue b/src/components/workFlow/addNode.vue
index 5bf1d43..19cc830 100644
--- a/src/components/workFlow/addNode.vue
+++ b/src/components/workFlow/addNode.vue
@@ -91,19 +91,19 @@
         <div class="add-node-popover-body">
           <div class="add-node-popover-item approver" @click="addType(1)">
             <div class="item-wrapper">
-              <img src="../assets/img/审批人.png" alt="" class="img-style">
+              <img src="../../assets/images/workFlowImg/审批人.png" alt="" class="img-style">
             </div>
             <p>审批人</p>
           </div>
           <div class="add-node-popover-item notifier" @click="addType(2)">
             <div class="item-wrapper">
-              <img src="../assets/img/抄送人.png" alt="" class="img-style">
+              <img src="../../assets/images/workFlowImg/抄送人.png" alt="" class="img-style">
             </div>
             <p>抄送人</p>
           </div>
           <div class="add-node-popover-item condition" @click="addType(4)">
             <div class="item-wrapper">
-              <img src="../assets/img/条件.png" alt="" class="img-style">
+              <img src="../../assets/images/workFlowImg/条件.png" alt="" class="img-style">
             </div>
             <p>条件分支</p>
           </div>

diff --git a/.eslintrc b/.eslintrc
index 7d9970d..cd94cc4 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -5,7 +5,7 @@
     "no-tabs":"off",
     "no-const-assign": "off",
     "no-console": "off",
-    // "eqeqeq": "off",
+    "eqeqeq": "off",
     "vue/component-name-in-template-casing": ["error", "kebab-case", {
       "registeredComponentsOnly": false,
       "ignores": []
diff --git "a/src/assets/images/workFlowImg/\345\256\241\346\211\271\344\272\272.png" "b/src/assets/images/workFlowImg/\345\256\241\346\211\271\344\272\272.png"
new file mode 100644
index 0000000..e934468
--- /dev/null
+++ "b/src/assets/images/workFlowImg/\345\256\241\346\211\271\344\272\272.png"
Binary files differ
diff --git "a/src/assets/images/workFlowImg/\346\212\204\351\200\201\344\272\272.png" "b/src/assets/images/workFlowImg/\346\212\204\351\200\201\344\272\272.png"
new file mode 100644
index 0000000..23521a1
--- /dev/null
+++ "b/src/assets/images/workFlowImg/\346\212\204\351\200\201\344\272\272.png"
Binary files differ
diff --git "a/src/assets/images/workFlowImg/\346\235\241\344\273\266.png" "b/src/assets/images/workFlowImg/\346\235\241\344\273\266.png"
new file mode 100644
index 0000000..92c6e6d
--- /dev/null
+++ "b/src/assets/images/workFlowImg/\346\235\241\344\273\266.png"
Binary files differ
diff --git a/src/components/workFlow/addNode.vue b/src/components/workFlow/addNode.vue
index 5bf1d43..19cc830 100644
--- a/src/components/workFlow/addNode.vue
+++ b/src/components/workFlow/addNode.vue
@@ -91,19 +91,19 @@
         <div class="add-node-popover-body">
           <div class="add-node-popover-item approver" @click="addType(1)">
             <div class="item-wrapper">
-              <img src="../assets/img/审批人.png" alt="" class="img-style">
+              <img src="../../assets/images/workFlowImg/审批人.png" alt="" class="img-style">
             </div>
             <p>审批人</p>
           </div>
           <div class="add-node-popover-item notifier" @click="addType(2)">
             <div class="item-wrapper">
-              <img src="../assets/img/抄送人.png" alt="" class="img-style">
+              <img src="../../assets/images/workFlowImg/抄送人.png" alt="" class="img-style">
             </div>
             <p>抄送人</p>
           </div>
           <div class="add-node-popover-item condition" @click="addType(4)">
             <div class="item-wrapper">
-              <img src="../assets/img/条件.png" alt="" class="img-style">
+              <img src="../../assets/images/workFlowImg/条件.png" alt="" class="img-style">
             </div>
             <p>条件分支</p>
           </div>
diff --git a/src/components/workFlow/nodeWrap.vue b/src/components/workFlow/nodeWrap.vue
index 5bf1d43..f6e3bd1 100644
--- a/src/components/workFlow/nodeWrap.vue
+++ b/src/components/workFlow/nodeWrap.vue
@@ -1,194 +1,1093 @@
-<script lang="ts" setup name="AddNode">
-import { ref } from 'vue'
+<script lang="ts" setup name="NodeWrap">
+import { onMounted, ref } from 'vue'
+import addNode from './addNode.vue'
+// import cptPopver from './cptPopver'
 const props = defineProps({
   nodeConfig: {
     type: Object,
     default: () => ({}),
   },
-  childNodeP: {
-    type: Object,
-    default: () => ({}),
-  },
-  tip: {
-    type: String,
+  dataFields: {
+    type: Array,
+    default: () => ([]),
+  } as any,
+  isTried: {
+    type: Boolean,
   },
 })
-const emits = defineEmits(['update:childNodeP', 'doSetPerson'])
-const visible = ref(false)
-const parentObj = ref({})
+// import {
+//   companyRoles, //树状app角色
+//   companyUsersList, //用户列表
+// } from '@/api/company'
+const emits = defineEmits(['update:nodeConfig'])
+const placeholderList = ['发起人', '审核人', '抄送人']
+const directorLevelList = ref([{
+  value: '1',
+  label: '第一级主管',
+},
+{
+  value: '2',
+  label: '第二级主管',
+},
+])
+// 审批弹框字段Obj
+const approverConfig = ref({}) as any
+const searchUser = ref('')
+const directorLevel = ref('1') // 主管层级
+const nodeUser = ref('') // 审批人（stringList）
+const approverDrawer = ref(false) // 审批弹框
+const defaultApprovalDrawer = ref(false) // 默认条件弹框
+const conditionDrawer = ref(false) // 条件弹框
+// 条件弹框字段
+const conditionsConfig = ref({}) as any
+const conditionConfig = ref({}) // 条件弹框item
+const useroptions = ref([
+  { name: 'admin', id: '1', userName: 'admin' },
+  { name: 'Anna', id: '2', userName: 'Anna' },
+])
+const userInfo = ref({
+  data: [],
+  total: 0,
+})
+const examineModeList = ref([{
+  value: '1',
+  label: '会签审批',
+  mark: '需要所有审批人同意，该审批节点才通过',
+},
+{
+  value: '2',
+  label: '或签审批',
+  mark: '任意一名审批人同意，该审批节点即通过',
+},
+{
+  value: '3',
+  label: '逐级审批',
+  mark: '按人事部门层级逐级依次审批后，该审批节点才通过',
+},
+])
+const operatorList = ['=', '!=', '>', '>=', '<', '<=']
+const isInputList = ref([])
+const isInput = ref(false)
+const hasFlag = ref(false)
+const conditionTip = ref('')
+const bPriorityLevel = ref('')
+const setTypeLabel = ref('')
+const conditionList = ref([])
+const pager = ref({
+  current: 1,
+  size: 10,
+})
+const selectionList = ref([]) // 表格选中id
+const userOriginList = ref([])
 
-const addType = (type: number) => {
-  visible.value = false
-  let data
-  if (type !== 4) {
-    if (type === 1) {
-      data = {
-        nodeName: '审核人',
-        error: true,
-        type: 1,
-        nodeId: 'approvalID',
-        examineMode: '1',
-        nodeUserType: {
-          type: 'manager',
-          value: '',
-          valueList: [],
-          valueName: '',
-        },
-        childNode: props.childNodeP,
-      }
+watch(() => approverDrawer.value, (newValue) => {
+  if (!newValue) {
+    defaultApprovalDrawer.value = false
+    hasFlag.value = false
+    conditionTip.value = ''
+  }
+})
+
+watch(() => approverConfig.value, (newValue: any) => {
+  if (newValue.nodeUserType.type === 'manager') {
+    setTypeLabel.value = '部门主管：'
+  }
+  if (newValue.nodeUserType.type === 'role' && newValue.type === 1) {
+    setTypeLabel.value = '审批角色：'
+  }
+  if (newValue.nodeUserType.type === 'role' && newValue.type === 2) {
+    setTypeLabel.value = '抄送角色：'
+  }
+  if (newValue.nodeUserType.type === 'user') {
+    setTypeLabel.value = '指定用户：'
+  }
+  setTypeLabel.value = ''
+})
+
+const remoteMethod = (query: any) => {
+  searchUser.value = query
+  if (query !== '') {
+    if (approverConfig.value.nodeUserType.type === 'user') {
+      // this.companyUsersList();
     }
-    else if (type === 2) {
-      data = {
-        nodeName: '抄送人',
-        error: true,
-        type: 2,
-        nodeId: 'copyID',
-        nodeUserType: {
-          type: 'manager',
-          value: 'm-1',
-          valueName: '第一级主管',
-          valueList: [],
-        },
-        childNode: props.childNodeP,
-      }
-    }
-    const param = ['', '', data, props.tip]
-    emits('doSetPerson', param) // 添加节点自动弹出弹框
   }
   else {
-    data = {
-      nodeName: '路由',
-      type: 4,
-      nodeId: 'conditionID',
-      childNode: props.childNodeP,
-      conditionNodes: [{
-        nodeName: '条件1',
-        error: true,
-        type: 3,
-        priorityLevel: 1,
-        conditionList: [],
-        childNode: null,
-      }, {
-        nodeName: '默认',
-        error: true,
-        type: 3,
-        priorityLevel: 2,
-        conditionList: [],
-        childNode: null,
-      }],
-    }
-    const param = [1, '', data]
-    emits('doSetPerson', param) // 添加节点自动弹出弹框
+    useroptions.value = userOriginList.value
   }
-  emits('update:childNodeP', data)
 }
+
+const selectionChange = (val: any) => {
+  selectionList.value = val.map((item: any) => item.id)
+}
+
+const saveUserInfo = () => {
+  approverConfig.value.nodeUserType.valueList = selectionList.value
+  // this.dialogFlag = false;
+}
+
+// 删除条件组和条件
+const removeCondition = (conditonflag: string | number, index: number | string, ind: number | string) => {
+  if (conditonflag === 'group') {
+    approverConfig.value.conditionList.splice(index, 1)
+    return
+  }
+  approverConfig.value.conditionList[
+    index
+  ].conditionChildrenNodes.splice(ind, 1)
+}
+
+// 审批选择节点
+const setExamineModeRadio = (val: string) => {
+  approverConfig.value.nodeUserType.value = ''
+  approverConfig.value.nodeUserType.valueList = []
+  if (val === '3') {
+    approverConfig.value.nodeUserType.type = 'manager'
+  }
+}
+
+// 添加条件组
+const addConditionGroup = (flag: string | number, item: any) => {
+  if (flag === '1') {
+    item.conditionChildrenNodes.push({
+      conditionOperator: '',
+      leftFileds: '',
+      centerFileds: '',
+      rightFileds: '',
+    })
+    return
+  }
+  approverConfig.value.conditionList.push({
+    conditionChildrenNodes: [],
+    conditionGroupOperator: '',
+  })
+}
+
+// 节点类型
+const setTypeRadio = (val: string) => {
+  if (approverConfig.value.nodeUserType.valueList.length > 0) {
+    approverConfig.value.nodeUserType.valueList = ''
+  }
+  // this.approverConfig.nodeUserType.value = ''
+  if (val === 'role') {
+    // this.companyRoles()
+    return
+  }
+  if (val === 'user') {
+    // this.companyUsersList()
+    return
+  }
+  if (val === 'manager') {
+    approverConfig.value.nodeUserType.value = '部门主管'
+  }
+}
+
+// 修改节点name
+const editNodename = () => {
+  approverConfig.value.titleInputFlag = true
+}
+
+const nodeNameBlur = () => {
+  approverConfig.value.titleInputFlag = false
+}
+
+// 条件显示
+const conditionStr = (item: any, index: number) => {
+  const {
+    conditionList, // 条件组
+    conditionString, // 条件数据
+    conditionStringName, // 条件显示
+  } = item
+  const arr = [true] // 判断条件是否有值
+  if (conditionList.length === 0 || conditionString === '') {
+    if (item.nodeName === '默认') {
+      return '其他情况'
+    }
+    return '请设置条件'
+  }
+  if (conditionList.length !== 0) {
+    if (conditionList.length === 1) {
+      // 当条件组为一个
+      conditionList[0].conditionChildrenNodes
+        && conditionList[0].conditionChildrenNodes.forEach(
+          (item: any, index: number) => {
+            if (item.leftFileds == '' || item.centerFileds == '' || item.rightFileds == '') {
+              arr.push(false)
+            }
+            if (index !== 0 && item.conditionOperator == '') {
+              arr.push(false)
+            }
+          },
+        )
+    }
+    else {
+      // 当条件组为多个（判断是否有运算符）
+      conditionList.forEach((item: any, index: number) => {
+        if (index != conditionList.length - 1) {
+          // 条件组不为最后一个.校验是否有条件运算符
+          if (item.conditionGroupOperator == '') { arr.push(false) }
+        }
+        if (
+          item.conditionChildrenNodes
+          && item.conditionChildrenNodes.length > 0
+        ) {
+          item.conditionChildrenNodes.forEach((it: any, ind: number) => {
+            if (
+              it.leftFileds === ''
+              || it.centerFileds === ''
+              || it.rightFileds == ''
+            ) { arr.push(false) }
+            if (ind !== 0 && it.conditionOperator == '') { arr.push(false) }
+          })
+        }
+        else if (
+          item.conditionChildrenNodes
+          && item.conditionChildrenNodes.length == 0
+        ) {
+          arr.push(false)
+        }
+      })
+    }
+    if (arr.includes(false)) {
+      return '请设置条件'
+    }
+  }
+  return conditionStringName
+}
+
+const dealStr = (str: string, obj: any) => {
+  const arr: any = []
+  const list = str.split(',')
+  for (const elem in obj) {
+    // list.map((item) => {
+    //   if (item == elem) {
+    //     arr.push(obj[elem].value)
+    //   }
+    // })
+    list.forEach((item) => {
+      if (item == elem) {
+        arr.push(obj[elem].value)
+      }
+    })
+  }
+  return arr.join('或')
+}
+
+// 审批人抄送人显示和校验
+const setApproverStr = (nodeConfig: any) => {
+  let type = '会签'
+  let role = '部门主管'
+  if (nodeConfig.nodeUserType.type === 'role') { role = '角色' }
+  if (nodeConfig.nodeUserType.type === 'user') { role = '用户' }
+  if (nodeConfig.nodeUserType.value == '') { return '' }
+  if (nodeConfig.type === 1) {
+    // 审批
+    if (nodeConfig.examineMode === '1') { type = '会签' }
+    if (nodeConfig.examineMode === '2') { type = '或签' }
+    if (nodeConfig.examineMode === '3') { type = '逐级审批' }
+    if (nodeConfig.nodeUserType.type === 'manager' && nodeConfig.examineMode === '3') {
+      if (nodeConfig.nodeUserType.value.includes('m')) {
+        return `由发起人向上的${nodeConfig.nodeUserType.valueName}审批`
+      }
+      else {
+        return `由${nodeConfig.nodeUserType.valueName}审批`
+      }
+    }
+    if (nodeConfig.nodeUserType.type === 'manager' && nodeConfig.examineMode !== '3') {
+      return `由${role}${type}`
+    }
+    return `由${role}：${nodeConfig.nodeUserType.valueName}${type}`
+  }
+  if (nodeConfig.type === 2) {
+    // 抄送
+    if (nodeConfig.nodeUserType.value == '') { return '' }
+    if (nodeConfig.nodeUserType.type === 'manager') {
+      // 主管
+      if (nodeConfig.nodeUserType.value.includes('m')) {
+        return `给发起人向上的${nodeConfig.nodeUserType.valueName}抄送`
+      }
+      else {
+        return `给${nodeConfig.nodeUserType.valueName}抄送`
+      }
+    }
+    // 角色、用户
+    return `给${role}：${nodeConfig.nodeUserType.valueName}抄送`
+  }
+}
+
+// 保存条件设置
+const saveCondition = () => {
+  approverDrawer.value = false
+  let conditionString = '' // 后端要的数据
+  let conditionStringName = '' // 前端显示
+  // 条件循环设置
+  if (approverConfig.value.conditionList.length > 0) {
+    approverConfig.value.conditionList.forEach((item: any, indx: number) => {
+      if (item.conditionChildrenNodes && item.conditionChildrenNodes.length > 0) {
+        item.conditionChildrenNodes.forEach((it: any, ind: number) => {
+          conditionString = conditionString + it.conditionOperator + it.leftFileds + it.centerFileds + it.rightFileds
+          conditionStringName = conditionStringName + it.conditionOperator + it.leftFiledsName + it.centerFileds + it.rightFileds
+        })
+      }
+      conditionString = conditionString + item.conditionGroupOperator
+      conditionStringName = conditionStringName + item.conditionGroupOperator
+    })
+  }
+  approverConfig.value.conditionString = conditionString
+  approverConfig.value.conditionStringName = conditionStringName
+  for (let i = 0; i < conditionsConfig.value.conditionNodes.length; i++) {
+    conditionsConfig.value.conditionNodes[i].error
+      = conditionStr(conditionsConfig.value.conditionNodes[i], i) == '请设置条件'
+  }
+  // 区分添加节点后自动出现弹框及点击出现弹框
+  if (hasFlag.value) {
+    // 先注释-----------------------------
+    // props.nodeConfig.childNode = conditionsConfig.value
+    emits('update:nodeConfig', props.nodeConfig)
+  }
+  else {
+    emits('update:nodeConfig', conditionsConfig.value)
+  }
+}
+// 保存弹框设置
+const saveApprover = () => {
+  if (approverConfig.value.type === 3) {
+    saveCondition()
+    return
+  }
+  const list = approverConfig.value.nodeUserType.valueList
+  const nameList: any = [] // 下拉框:审批角色是name，指定用户是userName
+  if (list.length > 0) {
+    useroptions.value.forEach((item) => {
+      list.forEach((i: string | number) => {
+        if (approverConfig.value.nodeUserType.type === 'role') {
+          if (item.id === i) { nameList.push(item.name) }
+        }
+        if (approverConfig.value.nodeUserType.type === 'user') {
+          if (item.id === i) { nameList.push(item.userName) }
+        }
+      })
+    })
+    approverConfig.value.nodeUserType.value = list.join(',')
+    approverConfig.value.nodeUserType.valueName = nameList.join(',')
+  }
+  else if (approverConfig.value.nodeUserType.type !== 'manager') {
+    approverConfig.value.nodeUserType.value = ''
+    approverConfig.value.nodeUserType.valueName = ''
+  }
+  if (approverConfig.value.nodeUserType.type === 'manager') {
+    // 抄送 、审批人逐级审批
+    if (approverConfig.value.type === 2 || approverConfig.value.type === 1) {
+      let num = approverConfig.value.nodeUserType.value
+      if (num.includes('m')) {
+        num = num.substring(2)
+      }
+      directorLevelList.value.forEach((item, index: number) => {
+        if (index === num - 1) { approverConfig.value.nodeUserType.valueName = item.label }
+      })
+      // 默认值
+      if (approverConfig.value.type === 1 && approverConfig.value.nodeUserType.type == 'manager' && !approverConfig.value.nodeUserType.value) {
+        approverConfig.value.nodeUserType.value = '主管'
+      }
+    }
+    else {
+      approverConfig.value.nodeUserType.value = '主管'
+    }
+  }
+  approverConfig.value.error = setApproverStr(approverConfig.value) === ''
+  // 通过hasFlag区分添加节点后自动出现弹框及点击出现弹框
+  if (hasFlag.value) {
+    if (props.nodeConfig.conditionNodes && props.nodeConfig.conditionNodes.length > 0 && conditionTip.value) { // 条件分支
+      props.nodeConfig.conditionNodes.forEach((element: any) => {
+        if (element.childNode && (!element.childNode.nodeUserType.value && element.childNode.nodeName === approverConfig.value.nodeName)) { // 条件分支节点赋值
+          element.childNode = approverConfig.value
+        }
+      })
+    }
+    // 先注释-------------------
+    // else {
+    //   props.nodeConfig.childNode = approverConfig.value
+    // }
+    emits('update:nodeConfig', props.nodeConfig)
+  }
+  else {
+    emits('update:nodeConfig', approverConfig.value)
+  }
+  approverDrawer.value = false
+}
+// 条件字段显示name
+const dataFieldsChange = (it: any) => {
+  props.dataFields.forEach((item: any) => {
+    if (item.key === it.leftFileds) {
+      it.leftFiledsName = item.name
+      it.leftFiledsType = item.type
+    }
+  })
+}
+
+// 删除节点
+const delNode = () => {
+  emits('update:nodeConfig', props.nodeConfig.childNode)
+}
+
+// 添加条件
+const addTerm = () => {
+  const len = props.nodeConfig.conditionNodes.length
+  // --------------------------------------------
+  // props.nodeConfig.conditionNodes.push({
+  //   nodeName: `条件${len}`,
+  //   type: 3,
+  //   priorityLevel: len + 1,
+  //   conditionList: [],
+  //   childNode: null,
+  // })
+  // for (let i = 0; i < props.nodeConfig.conditionNodes.length; i++) {
+  //   props.nodeConfig.conditionNodes[i].error
+  //     = conditionStr(props.nodeConfig.conditionNodes[i], i)
+  //     == '请设置条件'
+  //     && i != props.nodeConfig.conditionNodes.length - 1
+  // }
+  // -------------------------------------------------
+  emits('update:nodeConfig', props.nodeConfig)
+}
+
+const reData = (data: any, addData: any) => {
+  if (!data.childNode) {
+    data.childNode = addData
+  }
+  else {
+    reData(data.childNode, addData)
+  }
+}
+
+// 删除条件
+const delTerm = (index: number | string) => {
+  // ---------------------------------------------------
+  // props.nodeConfig.conditionNodes.splice(index, 1)
+  // for (let i = 0; i < props.nodeConfig.conditionNodes.length; i++) {
+  //   props.nodeConfig.conditionNodes[i].error
+  //     = conditionStr(props.nodeConfig.conditionNodes[i], i)
+  //     == '请设置条件'
+  //     && i != props.nodeConfig.conditionNodes.length - 1
+  // }
+  // ------------------------------------------------------------
+  emits('update:nodeConfig', props.nodeConfig)
+  if (props.nodeConfig.conditionNodes.length == 1) {
+    if (props.nodeConfig.childNode) {
+      if (props.nodeConfig.conditionNodes[0].childNode) {
+        reData(
+          props.nodeConfig.conditionNodes[0].childNode,
+          props.nodeConfig.childNode,
+        )
+      }
+      // ------------------------------------------------------
+      // else {
+      //   props.nodeConfig.conditionNodes[0].childNode = props.nodeConfig.childNode
+      // }
+      // ------------------------------------------------------
+    }
+    emits('update:nodeConfig', props.nodeConfig.conditionNodes[0].childNode)
+  }
+}
+
+// 打开弹框
+const setPerson = (priorityLevel: any, item: any, data: any, tip: string) => {
+  approverDrawer.value = true
+  // 默认条件
+  if (item && item.nodeName === '默认') {
+    defaultApprovalDrawer.value = true
+  }
+  else {
+    defaultApprovalDrawer.value = false
+  }
+  if (tip) {
+    conditionTip.value = tip
+  }
+  if (data) { // 添加节点自动出现弹框传值
+    hasFlag.value = true
+    // 条件
+    if (priorityLevel == 1) {
+      bPriorityLevel.value = priorityLevel
+      conditionsConfig.value = JSON.parse(JSON.stringify(data))
+      approverConfig.value = conditionsConfig.value.conditionNodes[priorityLevel - 1]
+      return
+    }
+    // 审批人、抄送人
+    approverConfig.value = JSON.parse(JSON.stringify(data))
+  }
+  else { // 点击出现弹框
+    // 条件
+    const { type } = props.nodeConfig
+    if (type == 4) {
+      bPriorityLevel.value = priorityLevel
+      conditionsConfig.value = JSON.parse(JSON.stringify(props.nodeConfig))
+      approverConfig.value = conditionsConfig.value.conditionNodes[priorityLevel - 1]
+      return
+    }
+    // 审批人、抄送人
+    approverConfig.value = JSON.parse(JSON.stringify(props.nodeConfig))
+  }
+
+  if (approverConfig.value.nodeUserType && approverConfig.value.nodeUserType.type === 'role') {
+    // this.companyRoles()
+    return
+  }
+  if (approverConfig.value.nodeUserType && approverConfig.value.nodeUserType.type === 'user') {
+    // this.companyUsersList()
+
+  }
+}
+// 获取角色
+// companyRoles() {
+//   companyRoles(this.$store.state.userInfo.companyId).then((res) => {
+//     res.data.forEach((item) => {
+//       if (item.application.appNum === this.$route.query.appNum) {
+//         this.useroptions = item.roleInfos
+//       }
+//     })
+//   })
+// },
+// 获取用户(有效)
+// async companyUsersList() {
+//   let params = {
+//     companyId: this.$store.state.userInfo.companyId,
+//     // current: this.pager.current,
+//     size: 20000,
+//     status: "enable",
+//     nameLike: this.searchUser
+//     // ...this.filters    //搜索条件
+//   }
+//   let res = await companyUsersList(params);
+//   if (res.code === '200') {
+//     res.data.records.forEach((item) => {
+//       item.name = item.nickName ? item.nickName : item.userName
+//     })
+//     this.useroptions = res.data.records;
+//     this.userInfo.data = res.data.records;
+//     this.userInfo.total = res.data.total;
+//     return res.data.records;
+//   }
+
+// },
+// -------------------------------------------------------------------------
+// const arrTransfer = (index: number, 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: any, index: number) => {
+//     item.priorityLevel = index + 1
+//   })
+//   for (let i = 0; i < props.nodeConfig.conditionNodes.length; i++) {
+//     props.nodeConfig.conditionNodes[i].error
+//       = conditionStr(props.nodeConfig.conditionNodes[i], i)
+//       == '请设置条件'
+//       && i != props.nodeConfig.conditionNodes.length - 1
+//   }
+//   emits('update:nodeConfig', props.nodeConfig)
+// }
+// -------------------------------------------------------------------------
+
+onMounted(async () => {
+  if (props.nodeConfig.type == 1) {
+    // -------------------------------------------------
+    // props.nodeConfig.error = setApproverStr(props.nodeConfig) == ''
+    // -------------------------------------------------
+
+  }
+  else if (props.nodeConfig.type == 2) {
+    // -------------------------------------------------
+    // props.nodeConfig.error = setApproverStr(props.nodeConfig) === ''
+    // -------------------------------------------------
+
+  }
+  else if (props.nodeConfig.type == 4) {
+    // -------------------------------------------------
+
+    // for (let i = 0; i < props.nodeConfig.conditionNodes.length; i++) {
+    //   props.nodeConfig.conditionNodes[i].error
+    //     = conditionStr(props.nodeConfig.conditionNodes[i], i)
+    //     == '请设置条件'
+    // }
+    // -------------------------------------------------
+
+  }
+})
 </script>
 
 <template>
-  <div class="add-node-btn-box">
-    <div class="add-node-btn">
-      <el-popover v-model="visible" placement="right-start" popper-class="add-node-popover">
-        <div class="add-node-popover-body">
-          <div class="add-node-popover-item approver" @click="addType(1)">
-            <div class="item-wrapper">
-              <img src="../assets/img/审批人.png" alt="" class="img-style">
-            </div>
-            <p>审批人</p>
+  <div class="nodeflow-components">
+    <div v-if="nodeConfig.type !== 4" class="node-wrap">
+      <div v-if="nodeConfig.type && nodeConfig.type !== 0" class="node-wrap-box" :class=" (nodeConfig.type === 0 ? 'start-node ' : '') + (isTried && nodeConfig.error ? 'active error' : '') ">
+        <div @click="setPerson">
+          <div
+            class="title" :style="
+              `background: rgb(${['87, 106, 149', '230, 162, 60', '72, 128, 255'][nodeConfig.type]});` "
+          >
+            <span class="editable-title">{{ nodeConfig.nodeName }}</span>
+            <i v-if="nodeConfig.type !== 0" class="el-icon-close close" @click.stop="delNode()" />
           </div>
-          <div class="add-node-popover-item notifier" @click="addType(2)">
-            <div class="item-wrapper">
-              <img src="../assets/img/抄送人.png" alt="" class="img-style">
+          <div class="content">
+            <div v-if="nodeConfig.type === 1" class="text">
+              <span v-if="setApproverStr(nodeConfig) === ''" class="placeholder">
+                请选择{{ placeholderList[nodeConfig.type] }}
+              </span>
+              {{ setApproverStr(nodeConfig) }}
             </div>
-            <p>抄送人</p>
+            <div v-if="nodeConfig.type === 2" class="text">
+              <span v-if="setApproverStr(nodeConfig) === ''" class="placeholder">
+                请选择{{ placeholderList[nodeConfig.type] }}
+              </span>
+              {{ setApproverStr(nodeConfig) }}
+            </div>
+            <i class="el-icon-arrow-right arrow" />
           </div>
-          <div class="add-node-popover-item condition" @click="addType(4)">
-            <div class="item-wrapper">
-              <img src="../assets/img/条件.png" alt="" class="img-style">
-            </div>
-            <p>条件分支</p>
+          <div v-if="isTried && nodeConfig.error" class="error_tip">
+            <i class="el-icon-warning" style="color: rgb(242 86 67);" />
           </div>
         </div>
-        <!-- <button slot="reference" class="btn" type="button">
-          <i style="color: #fff;" class="el-icon-plus" />
-        </button> -->
-        <button>加上</button>
-      </el-popover>
+      </div>
+      <button>+</button>
+      <!-- <addNode :childNodeP.sync="nodeConfig.childNode"></addNode> -->
     </div>
+    <div v-if="nodeConfig.type === 4" class="branch-wrap">
+      <div class="branch-box-wrap">
+        <div class="branch-box">
+          <button class="add-branch" @click="addTerm">
+            添加条件
+          </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="isTried && item.error ? 'error active' : '' " @click="setPerson(item.priorityLevel, item, '', '')">
+                  <div v-if="index !== 0" class="sort-left" @click.stop="arrTransfer(index, -1)">
+                    &lt;
+                  </div>
+                  <div class="title-wrapper">
+                    <span class="editable-title">{{ item.nodeName }}</span>
+                    <span class="priority-title">优先级{{ item.priorityLevel }}</span>
+                    <i class="el-icon-close close" @click.stop="delTerm(index)" />
+                  </div>
+                  <div v-if=" index !== nodeConfig.conditionNodes .length - 1 " class="sort-right" @click.stop="arrTransfer(index)">
+                    &gt;
+                  </div>
+                  <div class="content">
+                    {{ conditionStr(item, index) }}
+                  </div>
+                  <div v-if="isTried && item.error" class="error_tip">
+                    <i class="el-icon-warning" style="color: rgb(242 86 67);" />
+                  </div>
+                </div>
+                <add-node v-model:child-node-p="item.childNode" tip="条件" />
+              </div>
+            </div>
+            <node-wrap v-if="item.childNode && item.childNode" v-model:node-config="item.childNode" :is-tried="isTried" :data-fields="dataFields" />
+            <div v-if="index === 0" class="top-left-cover-line" />
+            <div v-if="index === 0" class="bottom-left-cover-line" />
+            <div v-if="index === nodeConfig.conditionNodes.length - 1" class="top-right-cover-line" />
+            <div v-if="index === nodeConfig.conditionNodes.length - 1" class="bottom-right-cover-line" />
+          </div>
+        </div>
+        <!-- <add-node v-model:child-node-p="nodeConfig.childNode" /> -->
+      </div>
+    </div>
+    <node-wrap v-if="nodeConfig.childNode && nodeConfig.childNode" :node-config="nodeConfig.childNode" :is-tried="isTried" :data-fields="dataFields" />
+    <el-drawer v-model="approverDrawer" custom-class="set_promoter" append-to-body direction="rtl" size="560px" :before-close="saveApprover">
+      <!-- <div slot="title" class="title flex"> -->
+      <div class="title flex">
+        <span v-if="!approverConfig.titleInputFlag">{{ approverConfig.nodeName }}</span>
+        <el-input v-else v-model="approverConfig.nodeName" maxlength="20" autofocus placeholder="" @blur="nodeNameBlur" />
+        <!-- 默认条件不需编辑 -->
+        <i v-if="!defaultApprovalDrawer" class="iconfont icon-icon_edit1 mainColor" @click="editNodename" />
+      </div>
+      <div>
+        <div v-if="approverConfig.type === 1" class="drawer-content">
+          <el-tabs :is-hide-nav="true">
+            <el-tab-pane label="节点类型">
+              <el-radio-group v-model="approverConfig.examineMode" @change="setExamineModeRadio">
+                <el-radio v-for="item in examineModeList" :key="item.value" :label="item.value">
+                  {{ item.label }}
+                  <span class="mark">({{ item.mark }})</span>
+                </el-radio>
+              </el-radio-group>
+            </el-tab-pane>
+            <el-tab-pane label="审批人类型">
+              <div v-if="approverConfig.examineMode === '3'">
+                <p style="margin-bottom: 16px;">
+                  连续多级部门主管<span style="color: #828282;margin-left: 8px;">(按照组织架构，发起人<span style="color: #4880ff;">向上的各级主管</span>依次审批)</span>
+                </p>
+                <el-radio-group v-model="approverConfig.nodeUserType.value">
+                  <el-radio :label="`m-${directorLevel}`">
+                    <span style="margin-right: 8px;">直到发起人向上的</span>
+                    <el-select v-model="directorLevel" style="width: 140px;" placeholder="请选择">
+                      <el-option v-for="(item, index) in directorLevelList" :key="index" :label="item.label" :value="item.value" />
+                    </el-select>
+                  </el-radio>
+                  <cpt-popver :type="true" />
+                  <el-radio :label="directorLevel">
+                    <span style="margin-right: 8px;">直到</span>
+                    <el-select v-model="directorLevel" style="width: 140px;" placeholder="请选择">
+                      <el-option v-for="(item, index) in directorLevelList" :key="index" :label="item.label" :value="item.value" />
+                    </el-select>
+                  </el-radio>
+                  <cpt-popver />
+                </el-radio-group>
+              </div>
+              <div v-else>
+                <el-radio-group v-model="approverConfig.nodeUserType.type" @change="setTypeRadio">
+                  <el-radio label="manager">
+                    部门主管
+                  </el-radio>
+                  <el-radio label="role">
+                    审批角色
+                  </el-radio>
+                  <el-radio label="user">
+                    指定用户
+                  </el-radio>
+                </el-radio-group>
+                <div v-if=" approverConfig.nodeUserType.type && approverConfig.nodeUserType.type !== 'manager' ">
+                  <el-form ref="form" label-width="90px">
+                    <el-form-item :label="setTypeLabel">
+                      <div v-if="approverConfig.nodeUserType.type === 'user'">
+                        <el-select v-model="approverConfig.nodeUserType.valueList" remote :remote-method="remoteMethod" filterable multiple placeholder="请选择">
+                          <el-option v-for="item in useroptions" :key="item.id" :label="item.userName" :value="item.id" />
+                        </el-select>
+                      </div>
+                      <div v-if="approverConfig.nodeUserType.type === 'role'">
+                        <el-select v-model="approverConfig.nodeUserType.valueList" filterable multiple placeholder="请选择">
+                          <el-option v-for="item in useroptions" :key="item.id" :label="item.name" :value="item.id" />
+                        </el-select>
+                      </div>
+                    </el-form-item>
+                  </el-form>
+                </div>
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+        <div v-if="approverConfig.type === 2" class="drawer-content">
+          <el-tabs :is-hide-nav="true">
+            <el-tab-pane label="抄送人类型">
+              <div>
+                <el-radio-group v-model="approverConfig.nodeUserType.type" @change="setTypeRadio">
+                  <el-radio label="manager">
+                    连续多级部门主管
+                  </el-radio>
+                  <el-radio label="role">
+                    抄送角色
+                  </el-radio>
+                  <el-radio label="user">
+                    指定用户
+                  </el-radio>
+                </el-radio-group>
+                <div v-if=" approverConfig.nodeUserType.type !== 'manager' ">
+                  <el-form v-if="approverConfig.nodeUserType.type" ref="form" label-width="90px">
+                    <el-form-item :label="setTypeLabel">
+                      <div v-if="approverConfig.nodeUserType.type === 'user'">
+                        <el-select v-model="approverConfig.nodeUserType.valueList" remote :remote-method="remoteMethod" filterable multiple placeholder="请选择">
+                          <el-option v-for="item in useroptions" :key="item.id" :label="item.userName" :value="item.id" />
+                        </el-select>
+                      </div>
+                      <div v-if="approverConfig.nodeUserType.type === 'role'">
+                        <el-select v-model="approverConfig.nodeUserType.valueList" filterable multiple placeholder="请选择">
+                          <el-option v-for="item in useroptions" :key="item.id" :label="item.name" :value="item.id" />
+                        </el-select>
+                      </div>
+                    </el-form-item>
+                  </el-form>
+                </div>
+                <div v-else>
+                  <p style="margin-bottom: 16px;font-size: 14px;">
+                    按组织架构，发起人<span style="color: #4880ff;">向上的各级主管</span>依次抄送
+                  </p>
+                  <el-radio-group v-model=" approverConfig.nodeUserType.value ">
+                    <el-radio :label="`m-${directorLevel}`">
+                      <span style="margin-right: 8px;">直到发起人向上的</span>
+                      <el-select v-model="directorLevel" style="width: 140px;" placeholder="请选择" @change=" approverConfig.nodeUserType.value = `m-${directorLevel}` ">
+                        <el-option v-for="(item, index) in directorLevelList" :key="index" :label="item.label" :value="item.value" />
+                      </el-select>
+                    </el-radio>
+                    <cpt-popver :type="true" />
+                    <el-radio :label="directorLevel">
+                      <span style="margin-right: 8px;">直到</span>
+                      <el-select v-model="directorLevel" style="width: 140px;" placeholder="请选择" @change=" approverConfig.nodeUserType.value = directorLevel ">
+                        <el-option v-for="(item, index) in directorLevelList" :key="index" :label="item.label" :value="item.value" />
+                      </el-select>
+                    </el-radio>
+                    <cpt-popver />
+                  </el-radio-group>
+                </div>
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+        <div v-if="approverConfig.type === 3" class="drawer-content drawer-content-condition">
+          <!-- 默认条件 -->
+          <div v-if="defaultApprovalDrawer" class="default-style">
+            其他情况
+          </div>
+          <div v-else>
+            <div v-for="(item, index) in approverConfig.conditionList" :key="index">
+              <div class="condition-conent-group">
+                <div class="condition-group-title flex">
+                  <div class="dang-style">
+                    条件组
+                  </div>
+                  <div>
+                    <i class="remove el-icon-delete" @click="removeCondition('group', index, 0)" />
+                  </div>
+                </div>
+                <div v-for="(it, ind) in item.conditionChildrenNodes" :key="ind" class="condition-group-select">
+                  <div class="mg-bot-10">
+                    <div v-if="ind === 0" class="flex flex-style">
+                      <span class="dang-style">当</span>
+                      <i class="remove el-icon-delete" @click=" removeCondition('oneCondition', index, ind) " />
+                    </div>
+                    <div v-else class="flex">
+                      <el-select v-model="it.conditionOperator" style="width: 110px;" placeholder="请选择">
+                        <el-option label="且" value="&&" />
+                        <el-option label="或" value="||" />
+                      </el-select>
+                      <i class="remove iconfont icon-icon_viewpicture_delete" @click=" removeCondition('oneCondition', index, ind) " />
+                    </div>
+                  </div>
+                  <el-row :gutter="5" class="mg-bot-10">
+                    <el-col :span="8">
+                      <el-select v-model="it.leftFileds" placeholder="请选择" @change="dataFieldsChange(it)">
+                        <el-option v-for="item in dataFields" :key="item.key" :label="item.name" :value="item.key" />
+                      </el-select>
+                    </el-col>
+                    <el-col :span="5">
+                      <el-select v-model="it.centerFileds" placeholder="请选择">
+                        <el-option v-for="item in operatorList" :key="item" :label="item" :value="item" />
+                      </el-select>
+                    </el-col>
+                    <el-col :span="10">
+                      <el-date-picker v-if="it.leftFiledsType === 'date'" v-model="it.rightFileds" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" />
+                      <el-input v-else v-model="it.rightFileds" placeholder="请输入" />
+                    </el-col>
+                  </el-row>
+                </div>
+                <div class="conditionbtn" @click="addConditionGroup('1', item)">
+                  <el-button type="">
+                    <i class="el-button-suffix el-icon-plus" />添加条件
+                  </el-button>
+                </div>
+              </div>
+              <div v-if=" index === 0 && approverConfig.conditionList.length > 1 " class="flex" style="height: 54px;padding: 0 24px;">
+                <el-select v-model="item.conditionGroupOperator" style="width: 110px;margin-top: 7px;" placeholder="请选择">
+                  <el-option label="且" value="&&" />
+                  <el-option label="或" value="||" />
+                </el-select>
+              </div>
+            </div>
+            <div class="conditionbtn">
+              <el-button type="" @click="addConditionGroup('0', {})">
+                <i class="el-button-suffix el-icon-plus" />添加条件组
+              </el-button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="set_promoter_footer flex">
+        <!-- 默认条件弹框只展示关闭按钮 -->
+        <div v-if="defaultApprovalDrawer">
+          <el-button type="primary" @click="approverDrawer = false">
+            关闭
+          </el-button>
+        </div>
+        <div v-else class="flex">
+          <el-button type="primary" @click="saveApprover">
+            确定
+          </el-button>
+          <el-button @click="approverDrawer = false">
+            取消
+          </el-button>
+        </div>
+      </div>
+    </el-drawer>
   </div>
 </template>
 
-<style lang="scss" scoped>
-.add-node-btn-box {
-  width: 240px;
-  display: inline-flex;
-  flex-shrink: 0;
-  position: relative;
+<style lang="scss">
+.el-dialog__title {
+  font-size: 18px !important;
+  font-weight: 600 !important;
+}
 
-  &:first-child {
-    margin-left: 16px;
+.default-style {
+  margin-left: 25px;
+}
+
+.search-style {
+  label {
+    width: 50px !important;
   }
 
-  &::before {
-    content: "";
-    position: absolute;
-    top: 1px;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: -1;
-    margin: auto;
-    width: 1px;
-    // height: 100%;
-    background-color: #ebebeb;
+  .el-row {
+    padding-right: 0 !important;
+  }
+
+  .el-form-item__content {
+    margin-left: 50px !important;
   }
 }
 
-.img-style {
-  width: 36px;
+.flex-style {
+  display: flex;
+  justify-content: space-between;
 }
 
-.add-node-popover {
-  padding: 14px 26px;
+.dang-style {
+  font-size: 14px;
+}
 
-  .add-node-popover-body {
-    display: flex;
+.dialog-style {
+  z-index: 99999 !important;
+  background: rgb(0 0 0 / 50%);
+}
 
-    .add-node-popover-item {
-      margin-right: 20px;
-      text-align: center;
-      cursor: pointer;
+.v-modal {
+  background: none !important;
+  z-index: -1 !important;
+}
+
+.set_promoter {
+  .el-drawer__header {
+    margin-bottom: 0;
+    padding: 0 24px;
+    border-bottom: 1px solid #ebebeb;
+
+    .title {
+      height: 64px;
+      line-height: 64px;
+      font-size: 20px;
+      color: #333;
+      justify-content: flex-start;
+
+      i {
+        margin-left: 8px;
+        font-size: 30px;
+      }
+    }
+  }
+
+  .el-drawer__body {
+    overflow-y: auto;
+    max-height: calc(100% - 64px);
+    padding-bottom: 80px;
+  }
+
+  .drawer-content {
+    padding: 24px;
+
+    .el-radio {
+      margin-bottom: 16px;
+
+      .mark {
+        color: #828282;
+      }
+
+      &.is-checked {
+        .mark {
+          color: #4880ff;
+        }
+      }
 
       &:last-child {
-        margin-right: 0;
-      }
-
-      i {
-        font-size: 36px;
-      }
-
-      p {
-        color: #333;
-        margin-top: 4px;
-      }
-    }
-
-    .approver {
-      i {
-        color: #e6a23c;
-      }
-    }
-
-    .condition {
-      i {
-        color: #67c23a;
-      }
-    }
-
-    .notifier {
-      i {
-        color: #4880ff;
+        margin-bottom: 0;
       }
     }
   }
+
+  .drawer-content-condition {
+    padding: 24px 0;
+
+    .condition-conent-group {
+      border-bottom: solid 1px #ebebeb;
+      padding-bottom: 20px;
+
+      .condition-group-title {
+        padding: 0 24px;
+        background: #f7f8fa;
+        height: 48px;
+        border-top: solid 1px #ebebeb;
+        border-bottom: solid 1px #ebebeb;
+        margin-bottom: 12px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      .condition-group-select {
+        padding: 0 24px;
+      }
+
+      .remove {
+        color: #828282;
+
+        &:hover {
+          cursor: pointer;
+          color: #4880ff;
+        }
+      }
+
+      .mg-bot-10 {
+        margin-bottom: 10px;
+      }
+
+      .conditionbtn {
+        .el-button {
+          border: 1px dashed #4880ff;
+          width: 110px;
+        }
+      }
+    }
+
+    .conditionbtn {
+      padding: 0 24px;
+      margin-top: 26px;
+
+      .el-button {
+        border: solid 1px #4880ff;
+        color: #4880ff;
+        width: 123px;
+      }
+    }
+  }
+
+  .set_promoter_footer {
+    height: 80px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    padding: 24px;
+    justify-content: flex-end;
+    background: #fff;
+    width: 100%;
+    border-top: 1px solid #ebebeb;
+    z-index: 2;
+  }
+
+  .icon-icon_explain {
+    color: #bfbfbf;
+  }
+}
+
+.error_tip {
+  position: absolute;
+  top: 36px;
+  right: 0;
+  transform: translate(150%, 0);
+
+  i {
+    font-size: 24px;
+  }
+}
+
+.add-node-popover-body {
+  display: flex;
+}
+
+.el-drawer:focus,
+.el-drawer__close-btn:focus {
+  outline: none;
 }
 </style>

diff --git a/.eslintrc b/.eslintrc
index 7d9970d..cd94cc4 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -5,7 +5,7 @@
     "no-tabs":"off",
     "no-const-assign": "off",
     "no-console": "off",
-    // "eqeqeq": "off",
+    "eqeqeq": "off",
     "vue/component-name-in-template-casing": ["error", "kebab-case", {
       "registeredComponentsOnly": false,
       "ignores": []
diff --git "a/src/assets/images/workFlowImg/\345\256\241\346\211\271\344\272\272.png" "b/src/assets/images/workFlowImg/\345\256\241\346\211\271\344\272\272.png"
new file mode 100644
index 0000000..e934468
--- /dev/null
+++ "b/src/assets/images/workFlowImg/\345\256\241\346\211\271\344\272\272.png"
Binary files differ
diff --git "a/src/assets/images/workFlowImg/\346\212\204\351\200\201\344\272\272.png" "b/src/assets/images/workFlowImg/\346\212\204\351\200\201\344\272\272.png"
new file mode 100644
index 0000000..23521a1
--- /dev/null
+++ "b/src/assets/images/workFlowImg/\346\212\204\351\200\201\344\272\272.png"
Binary files differ
diff --git "a/src/assets/images/workFlowImg/\346\235\241\344\273\266.png" "b/src/assets/images/workFlowImg/\346\235\241\344\273\266.png"
new file mode 100644
index 0000000..92c6e6d
--- /dev/null
+++ "b/src/assets/images/workFlowImg/\346\235\241\344\273\266.png"
Binary files differ
diff --git a/src/components/workFlow/addNode.vue b/src/components/workFlow/addNode.vue
index 5bf1d43..19cc830 100644
--- a/src/components/workFlow/addNode.vue
+++ b/src/components/workFlow/addNode.vue
@@ -91,19 +91,19 @@
         <div class="add-node-popover-body">
           <div class="add-node-popover-item approver" @click="addType(1)">
             <div class="item-wrapper">
-              <img src="../assets/img/审批人.png" alt="" class="img-style">
+              <img src="../../assets/images/workFlowImg/审批人.png" alt="" class="img-style">
             </div>
             <p>审批人</p>
           </div>
           <div class="add-node-popover-item notifier" @click="addType(2)">
             <div class="item-wrapper">
-              <img src="../assets/img/抄送人.png" alt="" class="img-style">
+              <img src="../../assets/images/workFlowImg/抄送人.png" alt="" class="img-style">
             </div>
             <p>抄送人</p>
           </div>
           <div class="add-node-popover-item condition" @click="addType(4)">
             <div class="item-wrapper">
-              <img src="../assets/img/条件.png" alt="" class="img-style">
+              <img src="../../assets/images/workFlowImg/条件.png" alt="" class="img-style">
             </div>
             <p>条件分支</p>
           </div>
diff --git a/src/components/workFlow/nodeWrap.vue b/src/components/workFlow/nodeWrap.vue
index 5bf1d43..f6e3bd1 100644
--- a/src/components/workFlow/nodeWrap.vue
+++ b/src/components/workFlow/nodeWrap.vue
@@ -1,194 +1,1093 @@
-<script lang="ts" setup name="AddNode">
-import { ref } from 'vue'
+<script lang="ts" setup name="NodeWrap">
+import { onMounted, ref } from 'vue'
+import addNode from './addNode.vue'
+// import cptPopver from './cptPopver'
 const props = defineProps({
   nodeConfig: {
     type: Object,
     default: () => ({}),
   },
-  childNodeP: {
-    type: Object,
-    default: () => ({}),
-  },
-  tip: {
-    type: String,
+  dataFields: {
+    type: Array,
+    default: () => ([]),
+  } as any,
+  isTried: {
+    type: Boolean,
   },
 })
-const emits = defineEmits(['update:childNodeP', 'doSetPerson'])
-const visible = ref(false)
-const parentObj = ref({})
+// import {
+//   companyRoles, //树状app角色
+//   companyUsersList, //用户列表
+// } from '@/api/company'
+const emits = defineEmits(['update:nodeConfig'])
+const placeholderList = ['发起人', '审核人', '抄送人']
+const directorLevelList = ref([{
+  value: '1',
+  label: '第一级主管',
+},
+{
+  value: '2',
+  label: '第二级主管',
+},
+])
+// 审批弹框字段Obj
+const approverConfig = ref({}) as any
+const searchUser = ref('')
+const directorLevel = ref('1') // 主管层级
+const nodeUser = ref('') // 审批人（stringList）
+const approverDrawer = ref(false) // 审批弹框
+const defaultApprovalDrawer = ref(false) // 默认条件弹框
+const conditionDrawer = ref(false) // 条件弹框
+// 条件弹框字段
+const conditionsConfig = ref({}) as any
+const conditionConfig = ref({}) // 条件弹框item
+const useroptions = ref([
+  { name: 'admin', id: '1', userName: 'admin' },
+  { name: 'Anna', id: '2', userName: 'Anna' },
+])
+const userInfo = ref({
+  data: [],
+  total: 0,
+})
+const examineModeList = ref([{
+  value: '1',
+  label: '会签审批',
+  mark: '需要所有审批人同意，该审批节点才通过',
+},
+{
+  value: '2',
+  label: '或签审批',
+  mark: '任意一名审批人同意，该审批节点即通过',
+},
+{
+  value: '3',
+  label: '逐级审批',
+  mark: '按人事部门层级逐级依次审批后，该审批节点才通过',
+},
+])
+const operatorList = ['=', '!=', '>', '>=', '<', '<=']
+const isInputList = ref([])
+const isInput = ref(false)
+const hasFlag = ref(false)
+const conditionTip = ref('')
+const bPriorityLevel = ref('')
+const setTypeLabel = ref('')
+const conditionList = ref([])
+const pager = ref({
+  current: 1,
+  size: 10,
+})
+const selectionList = ref([]) // 表格选中id
+const userOriginList = ref([])
 
-const addType = (type: number) => {
-  visible.value = false
-  let data
-  if (type !== 4) {
-    if (type === 1) {
-      data = {
-        nodeName: '审核人',
-        error: true,
-        type: 1,
-        nodeId: 'approvalID',
-        examineMode: '1',
-        nodeUserType: {
-          type: 'manager',
-          value: '',
-          valueList: [],
-          valueName: '',
-        },
-        childNode: props.childNodeP,
-      }
+watch(() => approverDrawer.value, (newValue) => {
+  if (!newValue) {
+    defaultApprovalDrawer.value = false
+    hasFlag.value = false
+    conditionTip.value = ''
+  }
+})
+
+watch(() => approverConfig.value, (newValue: any) => {
+  if (newValue.nodeUserType.type === 'manager') {
+    setTypeLabel.value = '部门主管：'
+  }
+  if (newValue.nodeUserType.type === 'role' && newValue.type === 1) {
+    setTypeLabel.value = '审批角色：'
+  }
+  if (newValue.nodeUserType.type === 'role' && newValue.type === 2) {
+    setTypeLabel.value = '抄送角色：'
+  }
+  if (newValue.nodeUserType.type === 'user') {
+    setTypeLabel.value = '指定用户：'
+  }
+  setTypeLabel.value = ''
+})
+
+const remoteMethod = (query: any) => {
+  searchUser.value = query
+  if (query !== '') {
+    if (approverConfig.value.nodeUserType.type === 'user') {
+      // this.companyUsersList();
     }
-    else if (type === 2) {
-      data = {
-        nodeName: '抄送人',
-        error: true,
-        type: 2,
-        nodeId: 'copyID',
-        nodeUserType: {
-          type: 'manager',
-          value: 'm-1',
-          valueName: '第一级主管',
-          valueList: [],
-        },
-        childNode: props.childNodeP,
-      }
-    }
-    const param = ['', '', data, props.tip]
-    emits('doSetPerson', param) // 添加节点自动弹出弹框
   }
   else {
-    data = {
-      nodeName: '路由',
-      type: 4,
-      nodeId: 'conditionID',
-      childNode: props.childNodeP,
-      conditionNodes: [{
-        nodeName: '条件1',
-        error: true,
-        type: 3,
-        priorityLevel: 1,
-        conditionList: [],
-        childNode: null,
-      }, {
-        nodeName: '默认',
-        error: true,
-        type: 3,
-        priorityLevel: 2,
-        conditionList: [],
-        childNode: null,
-      }],
-    }
-    const param = [1, '', data]
-    emits('doSetPerson', param) // 添加节点自动弹出弹框
+    useroptions.value = userOriginList.value
   }
-  emits('update:childNodeP', data)
 }
+
+const selectionChange = (val: any) => {
+  selectionList.value = val.map((item: any) => item.id)
+}
+
+const saveUserInfo = () => {
+  approverConfig.value.nodeUserType.valueList = selectionList.value
+  // this.dialogFlag = false;
+}
+
+// 删除条件组和条件
+const removeCondition = (conditonflag: string | number, index: number | string, ind: number | string) => {
+  if (conditonflag === 'group') {
+    approverConfig.value.conditionList.splice(index, 1)
+    return
+  }
+  approverConfig.value.conditionList[
+    index
+  ].conditionChildrenNodes.splice(ind, 1)
+}
+
+// 审批选择节点
+const setExamineModeRadio = (val: string) => {
+  approverConfig.value.nodeUserType.value = ''
+  approverConfig.value.nodeUserType.valueList = []
+  if (val === '3') {
+    approverConfig.value.nodeUserType.type = 'manager'
+  }
+}
+
+// 添加条件组
+const addConditionGroup = (flag: string | number, item: any) => {
+  if (flag === '1') {
+    item.conditionChildrenNodes.push({
+      conditionOperator: '',
+      leftFileds: '',
+      centerFileds: '',
+      rightFileds: '',
+    })
+    return
+  }
+  approverConfig.value.conditionList.push({
+    conditionChildrenNodes: [],
+    conditionGroupOperator: '',
+  })
+}
+
+// 节点类型
+const setTypeRadio = (val: string) => {
+  if (approverConfig.value.nodeUserType.valueList.length > 0) {
+    approverConfig.value.nodeUserType.valueList = ''
+  }
+  // this.approverConfig.nodeUserType.value = ''
+  if (val === 'role') {
+    // this.companyRoles()
+    return
+  }
+  if (val === 'user') {
+    // this.companyUsersList()
+    return
+  }
+  if (val === 'manager') {
+    approverConfig.value.nodeUserType.value = '部门主管'
+  }
+}
+
+// 修改节点name
+const editNodename = () => {
+  approverConfig.value.titleInputFlag = true
+}
+
+const nodeNameBlur = () => {
+  approverConfig.value.titleInputFlag = false
+}
+
+// 条件显示
+const conditionStr = (item: any, index: number) => {
+  const {
+    conditionList, // 条件组
+    conditionString, // 条件数据
+    conditionStringName, // 条件显示
+  } = item
+  const arr = [true] // 判断条件是否有值
+  if (conditionList.length === 0 || conditionString === '') {
+    if (item.nodeName === '默认') {
+      return '其他情况'
+    }
+    return '请设置条件'
+  }
+  if (conditionList.length !== 0) {
+    if (conditionList.length === 1) {
+      // 当条件组为一个
+      conditionList[0].conditionChildrenNodes
+        && conditionList[0].conditionChildrenNodes.forEach(
+          (item: any, index: number) => {
+            if (item.leftFileds == '' || item.centerFileds == '' || item.rightFileds == '') {
+              arr.push(false)
+            }
+            if (index !== 0 && item.conditionOperator == '') {
+              arr.push(false)
+            }
+          },
+        )
+    }
+    else {
+      // 当条件组为多个（判断是否有运算符）
+      conditionList.forEach((item: any, index: number) => {
+        if (index != conditionList.length - 1) {
+          // 条件组不为最后一个.校验是否有条件运算符
+          if (item.conditionGroupOperator == '') { arr.push(false) }
+        }
+        if (
+          item.conditionChildrenNodes
+          && item.conditionChildrenNodes.length > 0
+        ) {
+          item.conditionChildrenNodes.forEach((it: any, ind: number) => {
+            if (
+              it.leftFileds === ''
+              || it.centerFileds === ''
+              || it.rightFileds == ''
+            ) { arr.push(false) }
+            if (ind !== 0 && it.conditionOperator == '') { arr.push(false) }
+          })
+        }
+        else if (
+          item.conditionChildrenNodes
+          && item.conditionChildrenNodes.length == 0
+        ) {
+          arr.push(false)
+        }
+      })
+    }
+    if (arr.includes(false)) {
+      return '请设置条件'
+    }
+  }
+  return conditionStringName
+}
+
+const dealStr = (str: string, obj: any) => {
+  const arr: any = []
+  const list = str.split(',')
+  for (const elem in obj) {
+    // list.map((item) => {
+    //   if (item == elem) {
+    //     arr.push(obj[elem].value)
+    //   }
+    // })
+    list.forEach((item) => {
+      if (item == elem) {
+        arr.push(obj[elem].value)
+      }
+    })
+  }
+  return arr.join('或')
+}
+
+// 审批人抄送人显示和校验
+const setApproverStr = (nodeConfig: any) => {
+  let type = '会签'
+  let role = '部门主管'
+  if (nodeConfig.nodeUserType.type === 'role') { role = '角色' }
+  if (nodeConfig.nodeUserType.type === 'user') { role = '用户' }
+  if (nodeConfig.nodeUserType.value == '') { return '' }
+  if (nodeConfig.type === 1) {
+    // 审批
+    if (nodeConfig.examineMode === '1') { type = '会签' }
+    if (nodeConfig.examineMode === '2') { type = '或签' }
+    if (nodeConfig.examineMode === '3') { type = '逐级审批' }
+    if (nodeConfig.nodeUserType.type === 'manager' && nodeConfig.examineMode === '3') {
+      if (nodeConfig.nodeUserType.value.includes('m')) {
+        return `由发起人向上的${nodeConfig.nodeUserType.valueName}审批`
+      }
+      else {
+        return `由${nodeConfig.nodeUserType.valueName}审批`
+      }
+    }
+    if (nodeConfig.nodeUserType.type === 'manager' && nodeConfig.examineMode !== '3') {
+      return `由${role}${type}`
+    }
+    return `由${role}：${nodeConfig.nodeUserType.valueName}${type}`
+  }
+  if (nodeConfig.type === 2) {
+    // 抄送
+    if (nodeConfig.nodeUserType.value == '') { return '' }
+    if (nodeConfig.nodeUserType.type === 'manager') {
+      // 主管
+      if (nodeConfig.nodeUserType.value.includes('m')) {
+        return `给发起人向上的${nodeConfig.nodeUserType.valueName}抄送`
+      }
+      else {
+        return `给${nodeConfig.nodeUserType.valueName}抄送`
+      }
+    }
+    // 角色、用户
+    return `给${role}：${nodeConfig.nodeUserType.valueName}抄送`
+  }
+}
+
+// 保存条件设置
+const saveCondition = () => {
+  approverDrawer.value = false
+  let conditionString = '' // 后端要的数据
+  let conditionStringName = '' // 前端显示
+  // 条件循环设置
+  if (approverConfig.value.conditionList.length > 0) {
+    approverConfig.value.conditionList.forEach((item: any, indx: number) => {
+      if (item.conditionChildrenNodes && item.conditionChildrenNodes.length > 0) {
+        item.conditionChildrenNodes.forEach((it: any, ind: number) => {
+          conditionString = conditionString + it.conditionOperator + it.leftFileds + it.centerFileds + it.rightFileds
+          conditionStringName = conditionStringName + it.conditionOperator + it.leftFiledsName + it.centerFileds + it.rightFileds
+        })
+      }
+      conditionString = conditionString + item.conditionGroupOperator
+      conditionStringName = conditionStringName + item.conditionGroupOperator
+    })
+  }
+  approverConfig.value.conditionString = conditionString
+  approverConfig.value.conditionStringName = conditionStringName
+  for (let i = 0; i < conditionsConfig.value.conditionNodes.length; i++) {
+    conditionsConfig.value.conditionNodes[i].error
+      = conditionStr(conditionsConfig.value.conditionNodes[i], i) == '请设置条件'
+  }
+  // 区分添加节点后自动出现弹框及点击出现弹框
+  if (hasFlag.value) {
+    // 先注释-----------------------------
+    // props.nodeConfig.childNode = conditionsConfig.value
+    emits('update:nodeConfig', props.nodeConfig)
+  }
+  else {
+    emits('update:nodeConfig', conditionsConfig.value)
+  }
+}
+// 保存弹框设置
+const saveApprover = () => {
+  if (approverConfig.value.type === 3) {
+    saveCondition()
+    return
+  }
+  const list = approverConfig.value.nodeUserType.valueList
+  const nameList: any = [] // 下拉框:审批角色是name，指定用户是userName
+  if (list.length > 0) {
+    useroptions.value.forEach((item) => {
+      list.forEach((i: string | number) => {
+        if (approverConfig.value.nodeUserType.type === 'role') {
+          if (item.id === i) { nameList.push(item.name) }
+        }
+        if (approverConfig.value.nodeUserType.type === 'user') {
+          if (item.id === i) { nameList.push(item.userName) }
+        }
+      })
+    })
+    approverConfig.value.nodeUserType.value = list.join(',')
+    approverConfig.value.nodeUserType.valueName = nameList.join(',')
+  }
+  else if (approverConfig.value.nodeUserType.type !== 'manager') {
+    approverConfig.value.nodeUserType.value = ''
+    approverConfig.value.nodeUserType.valueName = ''
+  }
+  if (approverConfig.value.nodeUserType.type === 'manager') {
+    // 抄送 、审批人逐级审批
+    if (approverConfig.value.type === 2 || approverConfig.value.type === 1) {
+      let num = approverConfig.value.nodeUserType.value
+      if (num.includes('m')) {
+        num = num.substring(2)
+      }
+      directorLevelList.value.forEach((item, index: number) => {
+        if (index === num - 1) { approverConfig.value.nodeUserType.valueName = item.label }
+      })
+      // 默认值
+      if (approverConfig.value.type === 1 && approverConfig.value.nodeUserType.type == 'manager' && !approverConfig.value.nodeUserType.value) {
+        approverConfig.value.nodeUserType.value = '主管'
+      }
+    }
+    else {
+      approverConfig.value.nodeUserType.value = '主管'
+    }
+  }
+  approverConfig.value.error = setApproverStr(approverConfig.value) === ''
+  // 通过hasFlag区分添加节点后自动出现弹框及点击出现弹框
+  if (hasFlag.value) {
+    if (props.nodeConfig.conditionNodes && props.nodeConfig.conditionNodes.length > 0 && conditionTip.value) { // 条件分支
+      props.nodeConfig.conditionNodes.forEach((element: any) => {
+        if (element.childNode && (!element.childNode.nodeUserType.value && element.childNode.nodeName === approverConfig.value.nodeName)) { // 条件分支节点赋值
+          element.childNode = approverConfig.value
+        }
+      })
+    }
+    // 先注释-------------------
+    // else {
+    //   props.nodeConfig.childNode = approverConfig.value
+    // }
+    emits('update:nodeConfig', props.nodeConfig)
+  }
+  else {
+    emits('update:nodeConfig', approverConfig.value)
+  }
+  approverDrawer.value = false
+}
+// 条件字段显示name
+const dataFieldsChange = (it: any) => {
+  props.dataFields.forEach((item: any) => {
+    if (item.key === it.leftFileds) {
+      it.leftFiledsName = item.name
+      it.leftFiledsType = item.type
+    }
+  })
+}
+
+// 删除节点
+const delNode = () => {
+  emits('update:nodeConfig', props.nodeConfig.childNode)
+}
+
+// 添加条件
+const addTerm = () => {
+  const len = props.nodeConfig.conditionNodes.length
+  // --------------------------------------------
+  // props.nodeConfig.conditionNodes.push({
+  //   nodeName: `条件${len}`,
+  //   type: 3,
+  //   priorityLevel: len + 1,
+  //   conditionList: [],
+  //   childNode: null,
+  // })
+  // for (let i = 0; i < props.nodeConfig.conditionNodes.length; i++) {
+  //   props.nodeConfig.conditionNodes[i].error
+  //     = conditionStr(props.nodeConfig.conditionNodes[i], i)
+  //     == '请设置条件'
+  //     && i != props.nodeConfig.conditionNodes.length - 1
+  // }
+  // -------------------------------------------------
+  emits('update:nodeConfig', props.nodeConfig)
+}
+
+const reData = (data: any, addData: any) => {
+  if (!data.childNode) {
+    data.childNode = addData
+  }
+  else {
+    reData(data.childNode, addData)
+  }
+}
+
+// 删除条件
+const delTerm = (index: number | string) => {
+  // ---------------------------------------------------
+  // props.nodeConfig.conditionNodes.splice(index, 1)
+  // for (let i = 0; i < props.nodeConfig.conditionNodes.length; i++) {
+  //   props.nodeConfig.conditionNodes[i].error
+  //     = conditionStr(props.nodeConfig.conditionNodes[i], i)
+  //     == '请设置条件'
+  //     && i != props.nodeConfig.conditionNodes.length - 1
+  // }
+  // ------------------------------------------------------------
+  emits('update:nodeConfig', props.nodeConfig)
+  if (props.nodeConfig.conditionNodes.length == 1) {
+    if (props.nodeConfig.childNode) {
+      if (props.nodeConfig.conditionNodes[0].childNode) {
+        reData(
+          props.nodeConfig.conditionNodes[0].childNode,
+          props.nodeConfig.childNode,
+        )
+      }
+      // ------------------------------------------------------
+      // else {
+      //   props.nodeConfig.conditionNodes[0].childNode = props.nodeConfig.childNode
+      // }
+      // ------------------------------------------------------
+    }
+    emits('update:nodeConfig', props.nodeConfig.conditionNodes[0].childNode)
+  }
+}
+
+// 打开弹框
+const setPerson = (priorityLevel: any, item: any, data: any, tip: string) => {
+  approverDrawer.value = true
+  // 默认条件
+  if (item && item.nodeName === '默认') {
+    defaultApprovalDrawer.value = true
+  }
+  else {
+    defaultApprovalDrawer.value = false
+  }
+  if (tip) {
+    conditionTip.value = tip
+  }
+  if (data) { // 添加节点自动出现弹框传值
+    hasFlag.value = true
+    // 条件
+    if (priorityLevel == 1) {
+      bPriorityLevel.value = priorityLevel
+      conditionsConfig.value = JSON.parse(JSON.stringify(data))
+      approverConfig.value = conditionsConfig.value.conditionNodes[priorityLevel - 1]
+      return
+    }
+    // 审批人、抄送人
+    approverConfig.value = JSON.parse(JSON.stringify(data))
+  }
+  else { // 点击出现弹框
+    // 条件
+    const { type } = props.nodeConfig
+    if (type == 4) {
+      bPriorityLevel.value = priorityLevel
+      conditionsConfig.value = JSON.parse(JSON.stringify(props.nodeConfig))
+      approverConfig.value = conditionsConfig.value.conditionNodes[priorityLevel - 1]
+      return
+    }
+    // 审批人、抄送人
+    approverConfig.value = JSON.parse(JSON.stringify(props.nodeConfig))
+  }
+
+  if (approverConfig.value.nodeUserType && approverConfig.value.nodeUserType.type === 'role') {
+    // this.companyRoles()
+    return
+  }
+  if (approverConfig.value.nodeUserType && approverConfig.value.nodeUserType.type === 'user') {
+    // this.companyUsersList()
+
+  }
+}
+// 获取角色
+// companyRoles() {
+//   companyRoles(this.$store.state.userInfo.companyId).then((res) => {
+//     res.data.forEach((item) => {
+//       if (item.application.appNum === this.$route.query.appNum) {
+//         this.useroptions = item.roleInfos
+//       }
+//     })
+//   })
+// },
+// 获取用户(有效)
+// async companyUsersList() {
+//   let params = {
+//     companyId: this.$store.state.userInfo.companyId,
+//     // current: this.pager.current,
+//     size: 20000,
+//     status: "enable",
+//     nameLike: this.searchUser
+//     // ...this.filters    //搜索条件
+//   }
+//   let res = await companyUsersList(params);
+//   if (res.code === '200') {
+//     res.data.records.forEach((item) => {
+//       item.name = item.nickName ? item.nickName : item.userName
+//     })
+//     this.useroptions = res.data.records;
+//     this.userInfo.data = res.data.records;
+//     this.userInfo.total = res.data.total;
+//     return res.data.records;
+//   }
+
+// },
+// -------------------------------------------------------------------------
+// const arrTransfer = (index: number, 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: any, index: number) => {
+//     item.priorityLevel = index + 1
+//   })
+//   for (let i = 0; i < props.nodeConfig.conditionNodes.length; i++) {
+//     props.nodeConfig.conditionNodes[i].error
+//       = conditionStr(props.nodeConfig.conditionNodes[i], i)
+//       == '请设置条件'
+//       && i != props.nodeConfig.conditionNodes.length - 1
+//   }
+//   emits('update:nodeConfig', props.nodeConfig)
+// }
+// -------------------------------------------------------------------------
+
+onMounted(async () => {
+  if (props.nodeConfig.type == 1) {
+    // -------------------------------------------------
+    // props.nodeConfig.error = setApproverStr(props.nodeConfig) == ''
+    // -------------------------------------------------
+
+  }
+  else if (props.nodeConfig.type == 2) {
+    // -------------------------------------------------
+    // props.nodeConfig.error = setApproverStr(props.nodeConfig) === ''
+    // -------------------------------------------------
+
+  }
+  else if (props.nodeConfig.type == 4) {
+    // -------------------------------------------------
+
+    // for (let i = 0; i < props.nodeConfig.conditionNodes.length; i++) {
+    //   props.nodeConfig.conditionNodes[i].error
+    //     = conditionStr(props.nodeConfig.conditionNodes[i], i)
+    //     == '请设置条件'
+    // }
+    // -------------------------------------------------
+
+  }
+})
 </script>
 
 <template>
-  <div class="add-node-btn-box">
-    <div class="add-node-btn">
-      <el-popover v-model="visible" placement="right-start" popper-class="add-node-popover">
-        <div class="add-node-popover-body">
-          <div class="add-node-popover-item approver" @click="addType(1)">
-            <div class="item-wrapper">
-              <img src="../assets/img/审批人.png" alt="" class="img-style">
-            </div>
-            <p>审批人</p>
+  <div class="nodeflow-components">
+    <div v-if="nodeConfig.type !== 4" class="node-wrap">
+      <div v-if="nodeConfig.type && nodeConfig.type !== 0" class="node-wrap-box" :class=" (nodeConfig.type === 0 ? 'start-node ' : '') + (isTried && nodeConfig.error ? 'active error' : '') ">
+        <div @click="setPerson">
+          <div
+            class="title" :style="
+              `background: rgb(${['87, 106, 149', '230, 162, 60', '72, 128, 255'][nodeConfig.type]});` "
+          >
+            <span class="editable-title">{{ nodeConfig.nodeName }}</span>
+            <i v-if="nodeConfig.type !== 0" class="el-icon-close close" @click.stop="delNode()" />
           </div>
-          <div class="add-node-popover-item notifier" @click="addType(2)">
-            <div class="item-wrapper">
-              <img src="../assets/img/抄送人.png" alt="" class="img-style">
+          <div class="content">
+            <div v-if="nodeConfig.type === 1" class="text">
+              <span v-if="setApproverStr(nodeConfig) === ''" class="placeholder">
+                请选择{{ placeholderList[nodeConfig.type] }}
+              </span>
+              {{ setApproverStr(nodeConfig) }}
             </div>
-            <p>抄送人</p>
+            <div v-if="nodeConfig.type === 2" class="text">
+              <span v-if="setApproverStr(nodeConfig) === ''" class="placeholder">
+                请选择{{ placeholderList[nodeConfig.type] }}
+              </span>
+              {{ setApproverStr(nodeConfig) }}
+            </div>
+            <i class="el-icon-arrow-right arrow" />
           </div>
-          <div class="add-node-popover-item condition" @click="addType(4)">
-            <div class="item-wrapper">
-              <img src="../assets/img/条件.png" alt="" class="img-style">
-            </div>
-            <p>条件分支</p>
+          <div v-if="isTried && nodeConfig.error" class="error_tip">
+            <i class="el-icon-warning" style="color: rgb(242 86 67);" />
           </div>
         </div>
-        <!-- <button slot="reference" class="btn" type="button">
-          <i style="color: #fff;" class="el-icon-plus" />
-        </button> -->
-        <button>加上</button>
-      </el-popover>
+      </div>
+      <button>+</button>
+      <!-- <addNode :childNodeP.sync="nodeConfig.childNode"></addNode> -->
     </div>
+    <div v-if="nodeConfig.type === 4" class="branch-wrap">
+      <div class="branch-box-wrap">
+        <div class="branch-box">
+          <button class="add-branch" @click="addTerm">
+            添加条件
+          </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="isTried && item.error ? 'error active' : '' " @click="setPerson(item.priorityLevel, item, '', '')">
+                  <div v-if="index !== 0" class="sort-left" @click.stop="arrTransfer(index, -1)">
+                    &lt;
+                  </div>
+                  <div class="title-wrapper">
+                    <span class="editable-title">{{ item.nodeName }}</span>
+                    <span class="priority-title">优先级{{ item.priorityLevel }}</span>
+                    <i class="el-icon-close close" @click.stop="delTerm(index)" />
+                  </div>
+                  <div v-if=" index !== nodeConfig.conditionNodes .length - 1 " class="sort-right" @click.stop="arrTransfer(index)">
+                    &gt;
+                  </div>
+                  <div class="content">
+                    {{ conditionStr(item, index) }}
+                  </div>
+                  <div v-if="isTried && item.error" class="error_tip">
+                    <i class="el-icon-warning" style="color: rgb(242 86 67);" />
+                  </div>
+                </div>
+                <add-node v-model:child-node-p="item.childNode" tip="条件" />
+              </div>
+            </div>
+            <node-wrap v-if="item.childNode && item.childNode" v-model:node-config="item.childNode" :is-tried="isTried" :data-fields="dataFields" />
+            <div v-if="index === 0" class="top-left-cover-line" />
+            <div v-if="index === 0" class="bottom-left-cover-line" />
+            <div v-if="index === nodeConfig.conditionNodes.length - 1" class="top-right-cover-line" />
+            <div v-if="index === nodeConfig.conditionNodes.length - 1" class="bottom-right-cover-line" />
+          </div>
+        </div>
+        <!-- <add-node v-model:child-node-p="nodeConfig.childNode" /> -->
+      </div>
+    </div>
+    <node-wrap v-if="nodeConfig.childNode && nodeConfig.childNode" :node-config="nodeConfig.childNode" :is-tried="isTried" :data-fields="dataFields" />
+    <el-drawer v-model="approverDrawer" custom-class="set_promoter" append-to-body direction="rtl" size="560px" :before-close="saveApprover">
+      <!-- <div slot="title" class="title flex"> -->
+      <div class="title flex">
+        <span v-if="!approverConfig.titleInputFlag">{{ approverConfig.nodeName }}</span>
+        <el-input v-else v-model="approverConfig.nodeName" maxlength="20" autofocus placeholder="" @blur="nodeNameBlur" />
+        <!-- 默认条件不需编辑 -->
+        <i v-if="!defaultApprovalDrawer" class="iconfont icon-icon_edit1 mainColor" @click="editNodename" />
+      </div>
+      <div>
+        <div v-if="approverConfig.type === 1" class="drawer-content">
+          <el-tabs :is-hide-nav="true">
+            <el-tab-pane label="节点类型">
+              <el-radio-group v-model="approverConfig.examineMode" @change="setExamineModeRadio">
+                <el-radio v-for="item in examineModeList" :key="item.value" :label="item.value">
+                  {{ item.label }}
+                  <span class="mark">({{ item.mark }})</span>
+                </el-radio>
+              </el-radio-group>
+            </el-tab-pane>
+            <el-tab-pane label="审批人类型">
+              <div v-if="approverConfig.examineMode === '3'">
+                <p style="margin-bottom: 16px;">
+                  连续多级部门主管<span style="color: #828282;margin-left: 8px;">(按照组织架构，发起人<span style="color: #4880ff;">向上的各级主管</span>依次审批)</span>
+                </p>
+                <el-radio-group v-model="approverConfig.nodeUserType.value">
+                  <el-radio :label="`m-${directorLevel}`">
+                    <span style="margin-right: 8px;">直到发起人向上的</span>
+                    <el-select v-model="directorLevel" style="width: 140px;" placeholder="请选择">
+                      <el-option v-for="(item, index) in directorLevelList" :key="index" :label="item.label" :value="item.value" />
+                    </el-select>
+                  </el-radio>
+                  <cpt-popver :type="true" />
+                  <el-radio :label="directorLevel">
+                    <span style="margin-right: 8px;">直到</span>
+                    <el-select v-model="directorLevel" style="width: 140px;" placeholder="请选择">
+                      <el-option v-for="(item, index) in directorLevelList" :key="index" :label="item.label" :value="item.value" />
+                    </el-select>
+                  </el-radio>
+                  <cpt-popver />
+                </el-radio-group>
+              </div>
+              <div v-else>
+                <el-radio-group v-model="approverConfig.nodeUserType.type" @change="setTypeRadio">
+                  <el-radio label="manager">
+                    部门主管
+                  </el-radio>
+                  <el-radio label="role">
+                    审批角色
+                  </el-radio>
+                  <el-radio label="user">
+                    指定用户
+                  </el-radio>
+                </el-radio-group>
+                <div v-if=" approverConfig.nodeUserType.type && approverConfig.nodeUserType.type !== 'manager' ">
+                  <el-form ref="form" label-width="90px">
+                    <el-form-item :label="setTypeLabel">
+                      <div v-if="approverConfig.nodeUserType.type === 'user'">
+                        <el-select v-model="approverConfig.nodeUserType.valueList" remote :remote-method="remoteMethod" filterable multiple placeholder="请选择">
+                          <el-option v-for="item in useroptions" :key="item.id" :label="item.userName" :value="item.id" />
+                        </el-select>
+                      </div>
+                      <div v-if="approverConfig.nodeUserType.type === 'role'">
+                        <el-select v-model="approverConfig.nodeUserType.valueList" filterable multiple placeholder="请选择">
+                          <el-option v-for="item in useroptions" :key="item.id" :label="item.name" :value="item.id" />
+                        </el-select>
+                      </div>
+                    </el-form-item>
+                  </el-form>
+                </div>
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+        <div v-if="approverConfig.type === 2" class="drawer-content">
+          <el-tabs :is-hide-nav="true">
+            <el-tab-pane label="抄送人类型">
+              <div>
+                <el-radio-group v-model="approverConfig.nodeUserType.type" @change="setTypeRadio">
+                  <el-radio label="manager">
+                    连续多级部门主管
+                  </el-radio>
+                  <el-radio label="role">
+                    抄送角色
+                  </el-radio>
+                  <el-radio label="user">
+                    指定用户
+                  </el-radio>
+                </el-radio-group>
+                <div v-if=" approverConfig.nodeUserType.type !== 'manager' ">
+                  <el-form v-if="approverConfig.nodeUserType.type" ref="form" label-width="90px">
+                    <el-form-item :label="setTypeLabel">
+                      <div v-if="approverConfig.nodeUserType.type === 'user'">
+                        <el-select v-model="approverConfig.nodeUserType.valueList" remote :remote-method="remoteMethod" filterable multiple placeholder="请选择">
+                          <el-option v-for="item in useroptions" :key="item.id" :label="item.userName" :value="item.id" />
+                        </el-select>
+                      </div>
+                      <div v-if="approverConfig.nodeUserType.type === 'role'">
+                        <el-select v-model="approverConfig.nodeUserType.valueList" filterable multiple placeholder="请选择">
+                          <el-option v-for="item in useroptions" :key="item.id" :label="item.name" :value="item.id" />
+                        </el-select>
+                      </div>
+                    </el-form-item>
+                  </el-form>
+                </div>
+                <div v-else>
+                  <p style="margin-bottom: 16px;font-size: 14px;">
+                    按组织架构，发起人<span style="color: #4880ff;">向上的各级主管</span>依次抄送
+                  </p>
+                  <el-radio-group v-model=" approverConfig.nodeUserType.value ">
+                    <el-radio :label="`m-${directorLevel}`">
+                      <span style="margin-right: 8px;">直到发起人向上的</span>
+                      <el-select v-model="directorLevel" style="width: 140px;" placeholder="请选择" @change=" approverConfig.nodeUserType.value = `m-${directorLevel}` ">
+                        <el-option v-for="(item, index) in directorLevelList" :key="index" :label="item.label" :value="item.value" />
+                      </el-select>
+                    </el-radio>
+                    <cpt-popver :type="true" />
+                    <el-radio :label="directorLevel">
+                      <span style="margin-right: 8px;">直到</span>
+                      <el-select v-model="directorLevel" style="width: 140px;" placeholder="请选择" @change=" approverConfig.nodeUserType.value = directorLevel ">
+                        <el-option v-for="(item, index) in directorLevelList" :key="index" :label="item.label" :value="item.value" />
+                      </el-select>
+                    </el-radio>
+                    <cpt-popver />
+                  </el-radio-group>
+                </div>
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+        <div v-if="approverConfig.type === 3" class="drawer-content drawer-content-condition">
+          <!-- 默认条件 -->
+          <div v-if="defaultApprovalDrawer" class="default-style">
+            其他情况
+          </div>
+          <div v-else>
+            <div v-for="(item, index) in approverConfig.conditionList" :key="index">
+              <div class="condition-conent-group">
+                <div class="condition-group-title flex">
+                  <div class="dang-style">
+                    条件组
+                  </div>
+                  <div>
+                    <i class="remove el-icon-delete" @click="removeCondition('group', index, 0)" />
+                  </div>
+                </div>
+                <div v-for="(it, ind) in item.conditionChildrenNodes" :key="ind" class="condition-group-select">
+                  <div class="mg-bot-10">
+                    <div v-if="ind === 0" class="flex flex-style">
+                      <span class="dang-style">当</span>
+                      <i class="remove el-icon-delete" @click=" removeCondition('oneCondition', index, ind) " />
+                    </div>
+                    <div v-else class="flex">
+                      <el-select v-model="it.conditionOperator" style="width: 110px;" placeholder="请选择">
+                        <el-option label="且" value="&&" />
+                        <el-option label="或" value="||" />
+                      </el-select>
+                      <i class="remove iconfont icon-icon_viewpicture_delete" @click=" removeCondition('oneCondition', index, ind) " />
+                    </div>
+                  </div>
+                  <el-row :gutter="5" class="mg-bot-10">
+                    <el-col :span="8">
+                      <el-select v-model="it.leftFileds" placeholder="请选择" @change="dataFieldsChange(it)">
+                        <el-option v-for="item in dataFields" :key="item.key" :label="item.name" :value="item.key" />
+                      </el-select>
+                    </el-col>
+                    <el-col :span="5">
+                      <el-select v-model="it.centerFileds" placeholder="请选择">
+                        <el-option v-for="item in operatorList" :key="item" :label="item" :value="item" />
+                      </el-select>
+                    </el-col>
+                    <el-col :span="10">
+                      <el-date-picker v-if="it.leftFiledsType === 'date'" v-model="it.rightFileds" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" />
+                      <el-input v-else v-model="it.rightFileds" placeholder="请输入" />
+                    </el-col>
+                  </el-row>
+                </div>
+                <div class="conditionbtn" @click="addConditionGroup('1', item)">
+                  <el-button type="">
+                    <i class="el-button-suffix el-icon-plus" />添加条件
+                  </el-button>
+                </div>
+              </div>
+              <div v-if=" index === 0 && approverConfig.conditionList.length > 1 " class="flex" style="height: 54px;padding: 0 24px;">
+                <el-select v-model="item.conditionGroupOperator" style="width: 110px;margin-top: 7px;" placeholder="请选择">
+                  <el-option label="且" value="&&" />
+                  <el-option label="或" value="||" />
+                </el-select>
+              </div>
+            </div>
+            <div class="conditionbtn">
+              <el-button type="" @click="addConditionGroup('0', {})">
+                <i class="el-button-suffix el-icon-plus" />添加条件组
+              </el-button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="set_promoter_footer flex">
+        <!-- 默认条件弹框只展示关闭按钮 -->
+        <div v-if="defaultApprovalDrawer">
+          <el-button type="primary" @click="approverDrawer = false">
+            关闭
+          </el-button>
+        </div>
+        <div v-else class="flex">
+          <el-button type="primary" @click="saveApprover">
+            确定
+          </el-button>
+          <el-button @click="approverDrawer = false">
+            取消
+          </el-button>
+        </div>
+      </div>
+    </el-drawer>
   </div>
 </template>
 
-<style lang="scss" scoped>
-.add-node-btn-box {
-  width: 240px;
-  display: inline-flex;
-  flex-shrink: 0;
-  position: relative;
+<style lang="scss">
+.el-dialog__title {
+  font-size: 18px !important;
+  font-weight: 600 !important;
+}
 
-  &:first-child {
-    margin-left: 16px;
+.default-style {
+  margin-left: 25px;
+}
+
+.search-style {
+  label {
+    width: 50px !important;
   }
 
-  &::before {
-    content: "";
-    position: absolute;
-    top: 1px;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: -1;
-    margin: auto;
-    width: 1px;
-    // height: 100%;
-    background-color: #ebebeb;
+  .el-row {
+    padding-right: 0 !important;
+  }
+
+  .el-form-item__content {
+    margin-left: 50px !important;
   }
 }
 
-.img-style {
-  width: 36px;
+.flex-style {
+  display: flex;
+  justify-content: space-between;
 }
 
-.add-node-popover {
-  padding: 14px 26px;
+.dang-style {
+  font-size: 14px;
+}
 
-  .add-node-popover-body {
-    display: flex;
+.dialog-style {
+  z-index: 99999 !important;
+  background: rgb(0 0 0 / 50%);
+}
 
-    .add-node-popover-item {
-      margin-right: 20px;
-      text-align: center;
-      cursor: pointer;
+.v-modal {
+  background: none !important;
+  z-index: -1 !important;
+}
+
+.set_promoter {
+  .el-drawer__header {
+    margin-bottom: 0;
+    padding: 0 24px;
+    border-bottom: 1px solid #ebebeb;
+
+    .title {
+      height: 64px;
+      line-height: 64px;
+      font-size: 20px;
+      color: #333;
+      justify-content: flex-start;
+
+      i {
+        margin-left: 8px;
+        font-size: 30px;
+      }
+    }
+  }
+
+  .el-drawer__body {
+    overflow-y: auto;
+    max-height: calc(100% - 64px);
+    padding-bottom: 80px;
+  }
+
+  .drawer-content {
+    padding: 24px;
+
+    .el-radio {
+      margin-bottom: 16px;
+
+      .mark {
+        color: #828282;
+      }
+
+      &.is-checked {
+        .mark {
+          color: #4880ff;
+        }
+      }
 
       &:last-child {
-        margin-right: 0;
-      }
-
-      i {
-        font-size: 36px;
-      }
-
-      p {
-        color: #333;
-        margin-top: 4px;
-      }
-    }
-
-    .approver {
-      i {
-        color: #e6a23c;
-      }
-    }
-
-    .condition {
-      i {
-        color: #67c23a;
-      }
-    }
-
-    .notifier {
-      i {
-        color: #4880ff;
+        margin-bottom: 0;
       }
     }
   }
+
+  .drawer-content-condition {
+    padding: 24px 0;
+
+    .condition-conent-group {
+      border-bottom: solid 1px #ebebeb;
+      padding-bottom: 20px;
+
+      .condition-group-title {
+        padding: 0 24px;
+        background: #f7f8fa;
+        height: 48px;
+        border-top: solid 1px #ebebeb;
+        border-bottom: solid 1px #ebebeb;
+        margin-bottom: 12px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      .condition-group-select {
+        padding: 0 24px;
+      }
+
+      .remove {
+        color: #828282;
+
+        &:hover {
+          cursor: pointer;
+          color: #4880ff;
+        }
+      }
+
+      .mg-bot-10 {
+        margin-bottom: 10px;
+      }
+
+      .conditionbtn {
+        .el-button {
+          border: 1px dashed #4880ff;
+          width: 110px;
+        }
+      }
+    }
+
+    .conditionbtn {
+      padding: 0 24px;
+      margin-top: 26px;
+
+      .el-button {
+        border: solid 1px #4880ff;
+        color: #4880ff;
+        width: 123px;
+      }
+    }
+  }
+
+  .set_promoter_footer {
+    height: 80px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    padding: 24px;
+    justify-content: flex-end;
+    background: #fff;
+    width: 100%;
+    border-top: 1px solid #ebebeb;
+    z-index: 2;
+  }
+
+  .icon-icon_explain {
+    color: #bfbfbf;
+  }
+}
+
+.error_tip {
+  position: absolute;
+  top: 36px;
+  right: 0;
+  transform: translate(150%, 0);
+
+  i {
+    font-size: 24px;
+  }
+}
+
+.add-node-popover-body {
+  display: flex;
+}
+
+.el-drawer:focus,
+.el-drawer__close-btn:focus {
+  outline: none;
 }
 </style>
diff --git a/src/components/workFlow/workFlow.vue b/src/components/workFlow/workFlow.vue
new file mode 100644
index 0000000..439b560
--- /dev/null
+++ b/src/components/workFlow/workFlow.vue
@@ -0,0 +1,764 @@
+<script lang="ts" setup name="WorkFlow">
+import { ref } from 'vue'
+import nodeWrap from '@/components/workFlow/nodeWrap.vue'
+
+// 流程设置
+const isTried = ref(false)
+const tipList = ref([])
+const nodeConfig = ref({
+  error: true,
+  childNode: {
+    nodeName: '审核人',
+    nodeUserType: {
+      valueName: 'admin',
+      valueList: ['admin'],
+      type: 'user',
+      value: 'admin',
+    },
+    examineMode: '1',
+    error: false,
+    type: 1,
+    nodeId: 'approvalID',
+  },
+})
+const dataFields = ref([
+  { name: '日期', key: 'date', type: 'date' },
+  { name: '地址', key: 'adress' },
+  { name: '状态', key: 'state' },
+])
+const nowVal = ref(100)
+const flowPermission = ref([])
+const tableId = ref('')
+const nodeConfigss = ref({
+  type: 0, // 类型
+  priorityLevel: '', // 优先级
+  settype: '', // 审批人类型
+  selectMode: '', // 1人还是多人
+  selectRange: '', // 选择范围
+  directorLevel: '', // 主管层级
+  examineMode: '', // 多人审批时采用的审批方式  （依次审批 ，会签）
+  noHanderAction: '', // 审批人为空时 (自动审批通过/不允许发起, 转交给审核管理员)
+  examineEndType: '',
+  examineEndRoleId: '',
+  examineEndDirectorLevel: '', // 审批终点层级
+  ccSelfSelectFlag: '', // 抄送人
+  conditionList: [], // 条件设置
+  nodeUserList: [], // 人员列表
+})
+
+const reErr = (data: any) => {
+  if (data.childNode) {
+    if (data.childNode.type == 1) {
+      // 审批人
+      if (data.childNode.error) {
+        tipList.value.push({
+          name: data.childNode.nodeName,
+          type: '审核人',
+        })
+      }
+      reErr(data.childNode)
+    }
+    else if (data.childNode.type == 2) {
+      if (data.childNode.error) {
+        tipList.value.push({
+          name: data.childNode.nodeName,
+          type: '抄送人',
+        })
+      }
+      reErr(data.childNode)
+    }
+    else if (data.childNode.type == 3) {
+      reErr(data.childNode.childNode)
+    }
+    else if (data.childNode.type == 4) {
+      reErr(data.childNode)
+      for (
+        let i = 0; i < data.childNode.conditionNodes.length; i++
+      ) {
+        if (data.childNode.conditionNodes[i].error) {
+          tipList.value.push({
+            name: data.childNode.conditionNodes[i].nodeName,
+            type: '条件',
+          })
+        }
+        reErr(data.childNode.conditionNodes[i])
+      }
+    }
+  }
+  else {
+    data.childNode = null
+  }
+}
+
+// 给数据加preId(递归)
+const handleData = (data: any) => {
+  if (data.childNode) {
+    data.childNode.preId = data.nodeId
+    handleData(data.childNode)
+  }
+  return data
+}
+const workflowSave = () => {
+  // 调接口存数据
+  const data = handleData(nodeConfig.value)
+  console.log('data', data)
+  // this.$message.success('保存成功')
+}
+const zoomSize = (type: number | string) => {
+  if (type == 1) {
+    if (nowVal.value == 50) {
+      return
+    }
+    nowVal.value -= 10
+  }
+  else {
+    if (nowVal.value == 300) {
+      return
+    }
+    nowVal.value += 10
+  }
+}
+// 保存
+const saveData = () => {
+  isTried.value = true
+  tipList.value = []
+  reErr(nodeConfig.value)
+  if (tipList.value.length != 0) {
+    return
+  }
+  workflowSave()
+}
+</script>
+
+<template>
+  <div class="work-flow">
+    <div class="button-area">
+      <el-button type="primary" class="btn-style" @click="saveData">
+        保存
+      </el-button>
+    </div>
+
+    <div class="approval-flow fd-nav-content">
+      <div class="dingflow-design">
+        <div class="zoom flex">
+          <div :class="`zoom-out${nowVal === 50 ? ' disabled' : ''}`" @click="zoomSize(1)" />
+          <span>{{ nowVal }}%</span>
+          <div :class="`zoom-in${nowVal === 300 ? ' disabled' : ''}`" @click="zoomSize(2)" />
+        </div>
+        <div id="box-scale" class="box-scale" :style="`transform: scale(${nowVal / 100}); transform-origin: 50% 0px 0px;`">
+          <div class="end-node flex">
+            <p>开始</p>
+          </div>
+          <node-wrap v-bind="$attrs" :node-config="nodeConfig" :data-fields="dataFields" :is-tried="isTried" />
+          <div class="end-node flex">
+            <p>结束</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.work-flow {
+  width: 100%;
+  padding-top: 12px;
+
+  .button-area {
+    // width: 100%;
+    display: flex;
+    justify-content: flex-end;
+    margin: 0 12px 12px 0;
+  }
+
+  .approval-flow {
+    .dingflow-design {
+      .zoom {
+        display: flex;
+        justify-content: flex-end;
+        margin: 12px 12px 12px 0;
+
+        .zoom-in,
+        .zoom-out {
+          width: 30px;
+          height: 30px;
+          background: #fff;
+          color: #c1c1cd;
+          cursor: pointer;
+          background-size: 100%;
+          background-repeat: no-repeat;
+        }
+
+        .zoom-out {
+          // background-image: url(https://gw.alicdn.com/tfs/TB1s0qhBHGYBuNjy0FoXXciBFXa-90-90.png);
+        }
+
+        .zoom-out.disabled {
+          opacity: 0.5;
+        }
+
+        .zoom-in {
+          // background-image: url(https://gw.alicdn.com/tfs/TB1UIgJBTtYBeNjy1XdXXXXyVXa-90-90.png);
+        }
+
+        .zoom-in.disabled {
+          opacity: 0.5;
+        }
+      }
+
+      .box-scale {
+        transform: scale(1);
+        // display: inline-block;
+        // position: relative;
+        // width: 100%;
+        // padding: 54.5px 0;
+        // transform-origin: 0 0 0;
+        // left: 40%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .branch-wrap {
+          .branch-box-wrap {
+            margin-left: -240px;
+
+            .auto-judge {
+              position: relative;
+              width: 280px;
+              min-height: 100px;
+              background: #fff;
+              border-radius: 4px;
+              cursor: pointer;
+
+              .title-wrapper {
+                // position: relative;
+                font-size: 12px;
+                color: #333;
+                text-align: left;
+                height: 38px;
+                line-height: 38px;
+                padding: 0 13px 0 0;
+                border-bottom: 1px solid #ebebeb;
+              }
+            }
+          }
+        }
+
+        .node-wrap-box {
+          display: inline-flex;
+          flex-direction: column;
+          position: relative;
+          width: 280px;
+          min-height: 72px;
+          background: #fff;
+          border-radius: 4px;
+          cursor: pointer;
+        }
+
+        .node-wrap-box::after {
+          pointer-events: none;
+          content: "";
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          z-index: 2;
+          border-radius: 4px;
+          border: 1px solid transparent;
+          transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
+          box-shadow: 0 2px 5px 0 rgb(0 0 0 / 10%);
+        }
+
+        .end-node {
+          justify-content: center;
+          flex-direction: column;
+
+          p {
+            width: 280px;
+            height: 40px;
+            line-height: 40px;
+            color: #fff;
+            text-align: center;
+            background-color: #8cafff;
+            border-radius: 4px;
+            font-size: 14px;
+          }
+        }
+      }
+    }
+  }
+
+  .fd-nav-content {
+    // position: fixed;
+    // top: 60px;
+    // left: 0;
+    // right: 0;
+    // bottom: 0;
+    // z-index: 1;
+    // overflow-x: hidden;
+    // overflow-y: auto;
+    overflow: auto;
+    padding-bottom: 30px;
+  }
+
+  .dingflow-design {
+    width: 100%;
+    background-color: #f5f8ff;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+    align-content: center;
+    padding-bottom: 50px;
+  }
+
+  .editable-title {
+    font-size: 14px;
+    padding-left: 18px;
+  }
+
+  .dingflow-design .ie-polyfill-container {
+    display: grid;
+    -ms-grid-columns: min-content;
+  }
+
+  .dingflow-design .node-wrap {
+    flex-direction: column;
+    -webkit-box-pack: start;
+    -ms-flex-pack: start;
+    justify-content: flex-start;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    // flex-wrap: wrap;
+    -webkit-box-flex: 1;
+    -ms-flex-positive: 1;
+    // padding: 0 50px;
+    position: relative;
+  }
+
+  .dingflow-design .branch-wrap,
+  .dingflow-design .node-wrap {
+    display: inline-flex;
+    // width: 100%;
+  }
+
+  .dingflow-design .branch-box-wrap {
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    flex-direction: column;
+    // flex-wrap: wrap;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    min-height: 270px;
+    width: 100%;
+    -ms-flex-negative: 0;
+    flex-shrink: 0;
+  }
+
+  .dingflow-design .branch-box {
+    display: flex;
+    overflow: visible;
+    min-height: 180px;
+    height: auto;
+    border-bottom: 1px solid #ebebeb;
+    border-top: 1px solid #ebebeb;
+    position: relative;
+    margin-top: 15px;
+  }
+
+  .dingflow-design .branch-box .col-box::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 0;
+    margin: auto;
+    width: 1px;
+    height: 100%;
+    background-color: #ebebeb;
+  }
+
+  .dingflow-design .add-branch {
+    border: none;
+    outline: none;
+    user-select: none;
+    justify-content: center;
+    font-size: 12px;
+    padding: 0 10px;
+    height: 30px;
+    line-height: 30px;
+    border-radius: 15px;
+    color: #4880ff;
+    background: #fff;
+    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
+    position: absolute;
+    top: -16px;
+    left: 50%;
+    transform: translateX(-50%);
+    transform-origin: center center;
+    cursor: pointer;
+    z-index: 1;
+    display: inline-flex;
+    align-items: center;
+    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  }
+
+  .dingflow-design .add-branch:hover {
+    transform: translateX(-50%) scale(1.1);
+    box-shadow: 0 8px 16px 0 rgb(0 0 0 / 10%);
+  }
+
+  .dingflow-design .add-branch:active {
+    transform: translateX(-50%);
+    box-shadow: none;
+  }
+
+  .dingflow-design .col-box {
+    display: inline-flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    flex-direction: column;
+    -webkit-box-align: center;
+    align-items: center;
+    position: relative;
+  }
+
+  .dingflow-design .condition-node {
+    min-height: 220px;
+  }
+
+  .dingflow-design .condition-node,
+  .dingflow-design .condition-node-box {
+    display: inline-flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    flex-direction: column;
+    -webkit-box-flex: 1;
+  }
+
+  .dingflow-design .condition-node-box {
+    padding-top: 30px;
+    padding-right: 50px;
+    padding-left: 50px;
+    -webkit-box-pack: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    align-items: center;
+    flex-grow: 1;
+    position: relative;
+  }
+
+  .dingflow-design .condition-node-box::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: auto;
+    width: 1px;
+    height: 100%;
+    background-color: #ebebeb;
+  }
+
+  .dingflow-design .auto-judge::after {
+    pointer-events: none;
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 2;
+    border-radius: 4px;
+    border: 1px solid transparent;
+    transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
+    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 10%);
+  }
+
+  .dingflow-design .auto-judge.active::after,
+  .dingflow-design .auto-judge:active::after,
+  .dingflow-design .auto-judge:hover::after {
+    border: 1px solid #4880ff;
+    box-shadow: 0 0 6px 0 rgb(50 150 250 / 30%);
+  }
+
+  .dingflow-design .auto-judge.active .close,
+  .dingflow-design .auto-judge:active .close,
+  .dingflow-design .auto-judge:hover .close {
+    display: block;
+  }
+
+  .dingflow-design .auto-judge.error::after {
+    border: 1px solid #f25643;
+    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 10%);
+  }
+
+  .dingflow-design .auto-judge .title-wrapper .editable-title {
+    display: inline-block;
+    max-width: 120px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-size: 16px;
+  }
+
+  .dingflow-design .auto-judge .title-wrapper .priority-title {
+    display: inline-block;
+    float: right;
+    margin-right: 35px;
+    color: #828282;
+  }
+
+  .dingflow-design .auto-judge .title-wrapper .priority-button {
+    display: inline-block;
+    height: 28px;
+    float: right;
+    margin-right: 10px;
+    border: 1px solid rgb(0 0 0 / 15%);
+    border-radius: 4px;
+    color: rgb(0 0 0 / 65%);
+  }
+
+  .dingflow-design .auto-judge .title-wrapper .priority-button div {
+    display: inline-block;
+  }
+
+  .dingflow-design .auto-judge .title-wrapper .priority-button .priority-content {
+    padding: 0 8px;
+    font-size: 12px;
+    line-height: 28px;
+    border-left: 1px solid rgb(0 0 0 / 15%);
+    border-right: 1px solid rgb(0 0 0 / 15%);
+  }
+
+  .dingflow-design .auto-judge .placeholder {
+    color: #bfbfbf;
+  }
+
+  .dingflow-design .auto-judge .close {
+    display: none;
+    position: absolute;
+    right: 22px;
+    top: 8px;
+    width: 20px;
+    height: 20px;
+    font-size: 14px;
+    color: rgb(0 0 0 / 25%);
+    border-radius: 50%;
+    text-align: center;
+    line-height: 20px;
+    z-index: 2;
+  }
+
+  .dingflow-design .auto-judge .content {
+    height: calc(100% - 39px);
+    display: flex;
+    align-items: center;
+    max-width: calc(100% - 36px);
+    padding: 0 18px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 14px;
+  }
+
+  .dingflow-design .auto-judge .sort-left,
+  .dingflow-design .auto-judge .sort-right {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    display: none;
+    z-index: 1;
+    color: rgb(0 0 0 / 25%);
+  }
+
+  .dingflow-design .auto-judge .sort-left {
+    left: 4px;
+    top: 33px;
+    color: rgb(0 0 0 / 50%);
+  }
+
+  .dingflow-design .auto-judge .sort-right {
+    right: 26px;
+    top: 33px;
+  }
+
+  .dingflow-design .auto-judge:hover .sort-left,
+  .dingflow-design .auto-judge:hover .sort-right {
+    display: flex;
+    align-items: center;
+  }
+
+  .dingflow-design .add-node-btn {
+    user-select: none;
+    width: 240px;
+    padding: 30px 0;
+    display: flex;
+    -webkit-box-pack: center;
+    justify-content: center;
+    flex-shrink: 0;
+    -webkit-box-flex: 1;
+    flex-grow: 1;
+    // margin-left: -55px;
+  }
+
+  .dingflow-design .add-node-btn .btn {
+    outline: none;
+    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
+    width: 30px;
+    height: 30px;
+    background: #4880ff;
+    border-radius: 50%;
+    position: relative;
+    border: none;
+    line-height: 30px;
+    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+    // margin-left: 36px;
+  }
+
+  .dingflow-design .add-node-btn .btn .iconfont {
+    color: #fff;
+    font-size: 16px;
+  }
+
+  .dingflow-design .add-node-btn .btn:hover {
+    transform: scale(1.3);
+    box-shadow: 0 13px 27px 0 rgb(0 0 0 / 10%);
+  }
+
+  .dingflow-design .add-node-btn .btn:active {
+    transform: none;
+    background: #1e83e9;
+    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
+  }
+
+  .top-left-cover-line {
+    left: -1px;
+  }
+
+  .top-left-cover-line,
+  .top-right-cover-line {
+    position: absolute;
+    height: 3px;
+    width: 50%;
+    background-color: #f5f8ff;
+    top: -2px;
+  }
+
+  .top-right-cover-line {
+    right: -1px;
+  }
+
+  .bottom-left-cover-line {
+    left: -1px;
+  }
+
+  .bottom-left-cover-line,
+  .bottom-right-cover-line {
+    position: absolute;
+    height: 3px;
+    width: 50%;
+    background-color: #f5f8ff;
+    bottom: -2px;
+  }
+
+  .bottom-right-cover-line {
+    right: -1px;
+  }
+
+  .node-wrap-box.active::after,
+  .node-wrap-box:active::after,
+  .node-wrap-box:hover::after {
+    border: 1px solid #3296fa;
+    box-shadow: 0 0 6px 0 rgb(50 150 250 / 30%);
+  }
+
+  .node-wrap-box.active .close,
+  .node-wrap-box:active .close,
+  .node-wrap-box:hover .close {
+    display: block;
+  }
+
+  .node-wrap-box.error::after {
+    border: 1px solid #f25643;
+    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 10%);
+  }
+
+  .node-wrap-box .title {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding-left: 16px;
+    // padding-right: 30px;
+    // width: 100%;
+    height: 40px;
+    line-height: 40px;
+    font-size: 16px;
+    color: #fff;
+    text-align: left;
+    background: #576a95;
+    border-radius: 4px 4px 0 0;
+  }
+
+  .node-wrap-box .title .iconfont {
+    font-size: 12px;
+    margin-right: 5px;
+  }
+
+  .node-wrap-box .placeholder {
+    color: #bfbfbf;
+  }
+
+  .node-wrap-box .close {
+    display: none;
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 20px;
+    height: 20px;
+    font-size: 14px;
+    color: #fff;
+    border-radius: 50%;
+    text-align: center;
+    line-height: 20px;
+  }
+
+  .node-wrap-box .content {
+    position: relative;
+    font-size: 14px;
+    padding: 20px 18px;
+
+    /* padding-right: 30px */
+  }
+
+  .node-wrap-box .content .text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+  }
+
+  .node-wrap-box .content .arrow {
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 20px;
+    height: 14px;
+    font-size: 14px;
+    color: #979797;
+  }
+
+  .start-node.node-wrap-box .content .text {
+    display: block;
+    white-space: nowrap;
+  }
+}
+</style>

diff --git a/.eslintrc b/.eslintrc
index 7d9970d..cd94cc4 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -5,7 +5,7 @@
     "no-tabs":"off",
     "no-const-assign": "off",
     "no-console": "off",
-    // "eqeqeq": "off",
+    "eqeqeq": "off",
     "vue/component-name-in-template-casing": ["error", "kebab-case", {
       "registeredComponentsOnly": false,
       "ignores": []
diff --git "a/src/assets/images/workFlowImg/\345\256\241\346\211\271\344\272\272.png" "b/src/assets/images/workFlowImg/\345\256\241\346\211\271\344\272\272.png"
new file mode 100644
index 0000000..e934468
--- /dev/null
+++ "b/src/assets/images/workFlowImg/\345\256\241\346\211\271\344\272\272.png"
Binary files differ
diff --git "a/src/assets/images/workFlowImg/\346\212\204\351\200\201\344\272\272.png" "b/src/assets/images/workFlowImg/\346\212\204\351\200\201\344\272\272.png"
new file mode 100644
index 0000000..23521a1
--- /dev/null
+++ "b/src/assets/images/workFlowImg/\346\212\204\351\200\201\344\272\272.png"
Binary files differ
diff --git "a/src/assets/images/workFlowImg/\346\235\241\344\273\266.png" "b/src/assets/images/workFlowImg/\346\235\241\344\273\266.png"
new file mode 100644
index 0000000..92c6e6d
--- /dev/null
+++ "b/src/assets/images/workFlowImg/\346\235\241\344\273\266.png"
Binary files differ
diff --git a/src/components/workFlow/addNode.vue b/src/components/workFlow/addNode.vue
index 5bf1d43..19cc830 100644
--- a/src/components/workFlow/addNode.vue
+++ b/src/components/workFlow/addNode.vue
@@ -91,19 +91,19 @@
         <div class="add-node-popover-body">
           <div class="add-node-popover-item approver" @click="addType(1)">
             <div class="item-wrapper">
-              <img src="../assets/img/审批人.png" alt="" class="img-style">
+              <img src="../../assets/images/workFlowImg/审批人.png" alt="" class="img-style">
             </div>
             <p>审批人</p>
           </div>
           <div class="add-node-popover-item notifier" @click="addType(2)">
             <div class="item-wrapper">
-              <img src="../assets/img/抄送人.png" alt="" class="img-style">
+              <img src="../../assets/images/workFlowImg/抄送人.png" alt="" class="img-style">
             </div>
             <p>抄送人</p>
           </div>
           <div class="add-node-popover-item condition" @click="addType(4)">
             <div class="item-wrapper">
-              <img src="../assets/img/条件.png" alt="" class="img-style">
+              <img src="../../assets/images/workFlowImg/条件.png" alt="" class="img-style">
             </div>
             <p>条件分支</p>
           </div>
diff --git a/src/components/workFlow/nodeWrap.vue b/src/components/workFlow/nodeWrap.vue
index 5bf1d43..f6e3bd1 100644
--- a/src/components/workFlow/nodeWrap.vue
+++ b/src/components/workFlow/nodeWrap.vue
@@ -1,194 +1,1093 @@
-<script lang="ts" setup name="AddNode">
-import { ref } from 'vue'
+<script lang="ts" setup name="NodeWrap">
+import { onMounted, ref } from 'vue'
+import addNode from './addNode.vue'
+// import cptPopver from './cptPopver'
 const props = defineProps({
   nodeConfig: {
     type: Object,
     default: () => ({}),
   },
-  childNodeP: {
-    type: Object,
-    default: () => ({}),
-  },
-  tip: {
-    type: String,
+  dataFields: {
+    type: Array,
+    default: () => ([]),
+  } as any,
+  isTried: {
+    type: Boolean,
   },
 })
-const emits = defineEmits(['update:childNodeP', 'doSetPerson'])
-const visible = ref(false)
-const parentObj = ref({})
+// import {
+//   companyRoles, //树状app角色
+//   companyUsersList, //用户列表
+// } from '@/api/company'
+const emits = defineEmits(['update:nodeConfig'])
+const placeholderList = ['发起人', '审核人', '抄送人']
+const directorLevelList = ref([{
+  value: '1',
+  label: '第一级主管',
+},
+{
+  value: '2',
+  label: '第二级主管',
+},
+])
+// 审批弹框字段Obj
+const approverConfig = ref({}) as any
+const searchUser = ref('')
+const directorLevel = ref('1') // 主管层级
+const nodeUser = ref('') // 审批人（stringList）
+const approverDrawer = ref(false) // 审批弹框
+const defaultApprovalDrawer = ref(false) // 默认条件弹框
+const conditionDrawer = ref(false) // 条件弹框
+// 条件弹框字段
+const conditionsConfig = ref({}) as any
+const conditionConfig = ref({}) // 条件弹框item
+const useroptions = ref([
+  { name: 'admin', id: '1', userName: 'admin' },
+  { name: 'Anna', id: '2', userName: 'Anna' },
+])
+const userInfo = ref({
+  data: [],
+  total: 0,
+})
+const examineModeList = ref([{
+  value: '1',
+  label: '会签审批',
+  mark: '需要所有审批人同意，该审批节点才通过',
+},
+{
+  value: '2',
+  label: '或签审批',
+  mark: '任意一名审批人同意，该审批节点即通过',
+},
+{
+  value: '3',
+  label: '逐级审批',
+  mark: '按人事部门层级逐级依次审批后，该审批节点才通过',
+},
+])
+const operatorList = ['=', '!=', '>', '>=', '<', '<=']
+const isInputList = ref([])
+const isInput = ref(false)
+const hasFlag = ref(false)
+const conditionTip = ref('')
+const bPriorityLevel = ref('')
+const setTypeLabel = ref('')
+const conditionList = ref([])
+const pager = ref({
+  current: 1,
+  size: 10,
+})
+const selectionList = ref([]) // 表格选中id
+const userOriginList = ref([])
 
-const addType = (type: number) => {
-  visible.value = false
-  let data
-  if (type !== 4) {
-    if (type === 1) {
-      data = {
-        nodeName: '审核人',
-        error: true,
-        type: 1,
-        nodeId: 'approvalID',
-        examineMode: '1',
-        nodeUserType: {
-          type: 'manager',
-          value: '',
-          valueList: [],
-          valueName: '',
-        },
-        childNode: props.childNodeP,
-      }
+watch(() => approverDrawer.value, (newValue) => {
+  if (!newValue) {
+    defaultApprovalDrawer.value = false
+    hasFlag.value = false
+    conditionTip.value = ''
+  }
+})
+
+watch(() => approverConfig.value, (newValue: any) => {
+  if (newValue.nodeUserType.type === 'manager') {
+    setTypeLabel.value = '部门主管：'
+  }
+  if (newValue.nodeUserType.type === 'role' && newValue.type === 1) {
+    setTypeLabel.value = '审批角色：'
+  }
+  if (newValue.nodeUserType.type === 'role' && newValue.type === 2) {
+    setTypeLabel.value = '抄送角色：'
+  }
+  if (newValue.nodeUserType.type === 'user') {
+    setTypeLabel.value = '指定用户：'
+  }
+  setTypeLabel.value = ''
+})
+
+const remoteMethod = (query: any) => {
+  searchUser.value = query
+  if (query !== '') {
+    if (approverConfig.value.nodeUserType.type === 'user') {
+      // this.companyUsersList();
     }
-    else if (type === 2) {
-      data = {
-        nodeName: '抄送人',
-        error: true,
-        type: 2,
-        nodeId: 'copyID',
-        nodeUserType: {
-          type: 'manager',
-          value: 'm-1',
-          valueName: '第一级主管',
-          valueList: [],
-        },
-        childNode: props.childNodeP,
-      }
-    }
-    const param = ['', '', data, props.tip]
-    emits('doSetPerson', param) // 添加节点自动弹出弹框
   }
   else {
-    data = {
-      nodeName: '路由',
-      type: 4,
-      nodeId: 'conditionID',
-      childNode: props.childNodeP,
-      conditionNodes: [{
-        nodeName: '条件1',
-        error: true,
-        type: 3,
-        priorityLevel: 1,
-        conditionList: [],
-        childNode: null,
-      }, {
-        nodeName: '默认',
-        error: true,
-        type: 3,
-        priorityLevel: 2,
-        conditionList: [],
-        childNode: null,
-      }],
-    }
-    const param = [1, '', data]
-    emits('doSetPerson', param) // 添加节点自动弹出弹框
+    useroptions.value = userOriginList.value
   }
-  emits('update:childNodeP', data)
 }
+
+const selectionChange = (val: any) => {
+  selectionList.value = val.map((item: any) => item.id)
+}
+
+const saveUserInfo = () => {
+  approverConfig.value.nodeUserType.valueList = selectionList.value
+  // this.dialogFlag = false;
+}
+
+// 删除条件组和条件
+const removeCondition = (conditonflag: string | number, index: number | string, ind: number | string) => {
+  if (conditonflag === 'group') {
+    approverConfig.value.conditionList.splice(index, 1)
+    return
+  }
+  approverConfig.value.conditionList[
+    index
+  ].conditionChildrenNodes.splice(ind, 1)
+}
+
+// 审批选择节点
+const setExamineModeRadio = (val: string) => {
+  approverConfig.value.nodeUserType.value = ''
+  approverConfig.value.nodeUserType.valueList = []
+  if (val === '3') {
+    approverConfig.value.nodeUserType.type = 'manager'
+  }
+}
+
+// 添加条件组
+const addConditionGroup = (flag: string | number, item: any) => {
+  if (flag === '1') {
+    item.conditionChildrenNodes.push({
+      conditionOperator: '',
+      leftFileds: '',
+      centerFileds: '',
+      rightFileds: '',
+    })
+    return
+  }
+  approverConfig.value.conditionList.push({
+    conditionChildrenNodes: [],
+    conditionGroupOperator: '',
+  })
+}
+
+// 节点类型
+const setTypeRadio = (val: string) => {
+  if (approverConfig.value.nodeUserType.valueList.length > 0) {
+    approverConfig.value.nodeUserType.valueList = ''
+  }
+  // this.approverConfig.nodeUserType.value = ''
+  if (val === 'role') {
+    // this.companyRoles()
+    return
+  }
+  if (val === 'user') {
+    // this.companyUsersList()
+    return
+  }
+  if (val === 'manager') {
+    approverConfig.value.nodeUserType.value = '部门主管'
+  }
+}
+
+// 修改节点name
+const editNodename = () => {
+  approverConfig.value.titleInputFlag = true
+}
+
+const nodeNameBlur = () => {
+  approverConfig.value.titleInputFlag = false
+}
+
+// 条件显示
+const conditionStr = (item: any, index: number) => {
+  const {
+    conditionList, // 条件组
+    conditionString, // 条件数据
+    conditionStringName, // 条件显示
+  } = item
+  const arr = [true] // 判断条件是否有值
+  if (conditionList.length === 0 || conditionString === '') {
+    if (item.nodeName === '默认') {
+      return '其他情况'
+    }
+    return '请设置条件'
+  }
+  if (conditionList.length !== 0) {
+    if (conditionList.length === 1) {
+      // 当条件组为一个
+      conditionList[0].conditionChildrenNodes
+        && conditionList[0].conditionChildrenNodes.forEach(
+          (item: any, index: number) => {
+            if (item.leftFileds == '' || item.centerFileds == '' || item.rightFileds == '') {
+              arr.push(false)
+            }
+            if (index !== 0 && item.conditionOperator == '') {
+              arr.push(false)
+            }
+          },
+        )
+    }
+    else {
+      // 当条件组为多个（判断是否有运算符）
+      conditionList.forEach((item: any, index: number) => {
+        if (index != conditionList.length - 1) {
+          // 条件组不为最后一个.校验是否有条件运算符
+          if (item.conditionGroupOperator == '') { arr.push(false) }
+        }
+        if (
+          item.conditionChildrenNodes
+          && item.conditionChildrenNodes.length > 0
+        ) {
+          item.conditionChildrenNodes.forEach((it: any, ind: number) => {
+            if (
+              it.leftFileds === ''
+              || it.centerFileds === ''
+              || it.rightFileds == ''
+            ) { arr.push(false) }
+            if (ind !== 0 && it.conditionOperator == '') { arr.push(false) }
+          })
+        }
+        else if (
+          item.conditionChildrenNodes
+          && item.conditionChildrenNodes.length == 0
+        ) {
+          arr.push(false)
+        }
+      })
+    }
+    if (arr.includes(false)) {
+      return '请设置条件'
+    }
+  }
+  return conditionStringName
+}
+
+const dealStr = (str: string, obj: any) => {
+  const arr: any = []
+  const list = str.split(',')
+  for (const elem in obj) {
+    // list.map((item) => {
+    //   if (item == elem) {
+    //     arr.push(obj[elem].value)
+    //   }
+    // })
+    list.forEach((item) => {
+      if (item == elem) {
+        arr.push(obj[elem].value)
+      }
+    })
+  }
+  return arr.join('或')
+}
+
+// 审批人抄送人显示和校验
+const setApproverStr = (nodeConfig: any) => {
+  let type = '会签'
+  let role = '部门主管'
+  if (nodeConfig.nodeUserType.type === 'role') { role = '角色' }
+  if (nodeConfig.nodeUserType.type === 'user') { role = '用户' }
+  if (nodeConfig.nodeUserType.value == '') { return '' }
+  if (nodeConfig.type === 1) {
+    // 审批
+    if (nodeConfig.examineMode === '1') { type = '会签' }
+    if (nodeConfig.examineMode === '2') { type = '或签' }
+    if (nodeConfig.examineMode === '3') { type = '逐级审批' }
+    if (nodeConfig.nodeUserType.type === 'manager' && nodeConfig.examineMode === '3') {
+      if (nodeConfig.nodeUserType.value.includes('m')) {
+        return `由发起人向上的${nodeConfig.nodeUserType.valueName}审批`
+      }
+      else {
+        return `由${nodeConfig.nodeUserType.valueName}审批`
+      }
+    }
+    if (nodeConfig.nodeUserType.type === 'manager' && nodeConfig.examineMode !== '3') {
+      return `由${role}${type}`
+    }
+    return `由${role}：${nodeConfig.nodeUserType.valueName}${type}`
+  }
+  if (nodeConfig.type === 2) {
+    // 抄送
+    if (nodeConfig.nodeUserType.value == '') { return '' }
+    if (nodeConfig.nodeUserType.type === 'manager') {
+      // 主管
+      if (nodeConfig.nodeUserType.value.includes('m')) {
+        return `给发起人向上的${nodeConfig.nodeUserType.valueName}抄送`
+      }
+      else {
+        return `给${nodeConfig.nodeUserType.valueName}抄送`
+      }
+    }
+    // 角色、用户
+    return `给${role}：${nodeConfig.nodeUserType.valueName}抄送`
+  }
+}
+
+// 保存条件设置
+const saveCondition = () => {
+  approverDrawer.value = false
+  let conditionString = '' // 后端要的数据
+  let conditionStringName = '' // 前端显示
+  // 条件循环设置
+  if (approverConfig.value.conditionList.length > 0) {
+    approverConfig.value.conditionList.forEach((item: any, indx: number) => {
+      if (item.conditionChildrenNodes && item.conditionChildrenNodes.length > 0) {
+        item.conditionChildrenNodes.forEach((it: any, ind: number) => {
+          conditionString = conditionString + it.conditionOperator + it.leftFileds + it.centerFileds + it.rightFileds
+          conditionStringName = conditionStringName + it.conditionOperator + it.leftFiledsName + it.centerFileds + it.rightFileds
+        })
+      }
+      conditionString = conditionString + item.conditionGroupOperator
+      conditionStringName = conditionStringName + item.conditionGroupOperator
+    })
+  }
+  approverConfig.value.conditionString = conditionString
+  approverConfig.value.conditionStringName = conditionStringName
+  for (let i = 0; i < conditionsConfig.value.conditionNodes.length; i++) {
+    conditionsConfig.value.conditionNodes[i].error
+      = conditionStr(conditionsConfig.value.conditionNodes[i], i) == '请设置条件'
+  }
+  // 区分添加节点后自动出现弹框及点击出现弹框
+  if (hasFlag.value) {
+    // 先注释-----------------------------
+    // props.nodeConfig.childNode = conditionsConfig.value
+    emits('update:nodeConfig', props.nodeConfig)
+  }
+  else {
+    emits('update:nodeConfig', conditionsConfig.value)
+  }
+}
+// 保存弹框设置
+const saveApprover = () => {
+  if (approverConfig.value.type === 3) {
+    saveCondition()
+    return
+  }
+  const list = approverConfig.value.nodeUserType.valueList
+  const nameList: any = [] // 下拉框:审批角色是name，指定用户是userName
+  if (list.length > 0) {
+    useroptions.value.forEach((item) => {
+      list.forEach((i: string | number) => {
+        if (approverConfig.value.nodeUserType.type === 'role') {
+          if (item.id === i) { nameList.push(item.name) }
+        }
+        if (approverConfig.value.nodeUserType.type === 'user') {
+          if (item.id === i) { nameList.push(item.userName) }
+        }
+      })
+    })
+    approverConfig.value.nodeUserType.value = list.join(',')
+    approverConfig.value.nodeUserType.valueName = nameList.join(',')
+  }
+  else if (approverConfig.value.nodeUserType.type !== 'manager') {
+    approverConfig.value.nodeUserType.value = ''
+    approverConfig.value.nodeUserType.valueName = ''
+  }
+  if (approverConfig.value.nodeUserType.type === 'manager') {
+    // 抄送 、审批人逐级审批
+    if (approverConfig.value.type === 2 || approverConfig.value.type === 1) {
+      let num = approverConfig.value.nodeUserType.value
+      if (num.includes('m')) {
+        num = num.substring(2)
+      }
+      directorLevelList.value.forEach((item, index: number) => {
+        if (index === num - 1) { approverConfig.value.nodeUserType.valueName = item.label }
+      })
+      // 默认值
+      if (approverConfig.value.type === 1 && approverConfig.value.nodeUserType.type == 'manager' && !approverConfig.value.nodeUserType.value) {
+        approverConfig.value.nodeUserType.value = '主管'
+      }
+    }
+    else {
+      approverConfig.value.nodeUserType.value = '主管'
+    }
+  }
+  approverConfig.value.error = setApproverStr(approverConfig.value) === ''
+  // 通过hasFlag区分添加节点后自动出现弹框及点击出现弹框
+  if (hasFlag.value) {
+    if (props.nodeConfig.conditionNodes && props.nodeConfig.conditionNodes.length > 0 && conditionTip.value) { // 条件分支
+      props.nodeConfig.conditionNodes.forEach((element: any) => {
+        if (element.childNode && (!element.childNode.nodeUserType.value && element.childNode.nodeName === approverConfig.value.nodeName)) { // 条件分支节点赋值
+          element.childNode = approverConfig.value
+        }
+      })
+    }
+    // 先注释-------------------
+    // else {
+    //   props.nodeConfig.childNode = approverConfig.value
+    // }
+    emits('update:nodeConfig', props.nodeConfig)
+  }
+  else {
+    emits('update:nodeConfig', approverConfig.value)
+  }
+  approverDrawer.value = false
+}
+// 条件字段显示name
+const dataFieldsChange = (it: any) => {
+  props.dataFields.forEach((item: any) => {
+    if (item.key === it.leftFileds) {
+      it.leftFiledsName = item.name
+      it.leftFiledsType = item.type
+    }
+  })
+}
+
+// 删除节点
+const delNode = () => {
+  emits('update:nodeConfig', props.nodeConfig.childNode)
+}
+
+// 添加条件
+const addTerm = () => {
+  const len = props.nodeConfig.conditionNodes.length
+  // --------------------------------------------
+  // props.nodeConfig.conditionNodes.push({
+  //   nodeName: `条件${len}`,
+  //   type: 3,
+  //   priorityLevel: len + 1,
+  //   conditionList: [],
+  //   childNode: null,
+  // })
+  // for (let i = 0; i < props.nodeConfig.conditionNodes.length; i++) {
+  //   props.nodeConfig.conditionNodes[i].error
+  //     = conditionStr(props.nodeConfig.conditionNodes[i], i)
+  //     == '请设置条件'
+  //     && i != props.nodeConfig.conditionNodes.length - 1
+  // }
+  // -------------------------------------------------
+  emits('update:nodeConfig', props.nodeConfig)
+}
+
+const reData = (data: any, addData: any) => {
+  if (!data.childNode) {
+    data.childNode = addData
+  }
+  else {
+    reData(data.childNode, addData)
+  }
+}
+
+// 删除条件
+const delTerm = (index: number | string) => {
+  // ---------------------------------------------------
+  // props.nodeConfig.conditionNodes.splice(index, 1)
+  // for (let i = 0; i < props.nodeConfig.conditionNodes.length; i++) {
+  //   props.nodeConfig.conditionNodes[i].error
+  //     = conditionStr(props.nodeConfig.conditionNodes[i], i)
+  //     == '请设置条件'
+  //     && i != props.nodeConfig.conditionNodes.length - 1
+  // }
+  // ------------------------------------------------------------
+  emits('update:nodeConfig', props.nodeConfig)
+  if (props.nodeConfig.conditionNodes.length == 1) {
+    if (props.nodeConfig.childNode) {
+      if (props.nodeConfig.conditionNodes[0].childNode) {
+        reData(
+          props.nodeConfig.conditionNodes[0].childNode,
+          props.nodeConfig.childNode,
+        )
+      }
+      // ------------------------------------------------------
+      // else {
+      //   props.nodeConfig.conditionNodes[0].childNode = props.nodeConfig.childNode
+      // }
+      // ------------------------------------------------------
+    }
+    emits('update:nodeConfig', props.nodeConfig.conditionNodes[0].childNode)
+  }
+}
+
+// 打开弹框
+const setPerson = (priorityLevel: any, item: any, data: any, tip: string) => {
+  approverDrawer.value = true
+  // 默认条件
+  if (item && item.nodeName === '默认') {
+    defaultApprovalDrawer.value = true
+  }
+  else {
+    defaultApprovalDrawer.value = false
+  }
+  if (tip) {
+    conditionTip.value = tip
+  }
+  if (data) { // 添加节点自动出现弹框传值
+    hasFlag.value = true
+    // 条件
+    if (priorityLevel == 1) {
+      bPriorityLevel.value = priorityLevel
+      conditionsConfig.value = JSON.parse(JSON.stringify(data))
+      approverConfig.value = conditionsConfig.value.conditionNodes[priorityLevel - 1]
+      return
+    }
+    // 审批人、抄送人
+    approverConfig.value = JSON.parse(JSON.stringify(data))
+  }
+  else { // 点击出现弹框
+    // 条件
+    const { type } = props.nodeConfig
+    if (type == 4) {
+      bPriorityLevel.value = priorityLevel
+      conditionsConfig.value = JSON.parse(JSON.stringify(props.nodeConfig))
+      approverConfig.value = conditionsConfig.value.conditionNodes[priorityLevel - 1]
+      return
+    }
+    // 审批人、抄送人
+    approverConfig.value = JSON.parse(JSON.stringify(props.nodeConfig))
+  }
+
+  if (approverConfig.value.nodeUserType && approverConfig.value.nodeUserType.type === 'role') {
+    // this.companyRoles()
+    return
+  }
+  if (approverConfig.value.nodeUserType && approverConfig.value.nodeUserType.type === 'user') {
+    // this.companyUsersList()
+
+  }
+}
+// 获取角色
+// companyRoles() {
+//   companyRoles(this.$store.state.userInfo.companyId).then((res) => {
+//     res.data.forEach((item) => {
+//       if (item.application.appNum === this.$route.query.appNum) {
+//         this.useroptions = item.roleInfos
+//       }
+//     })
+//   })
+// },
+// 获取用户(有效)
+// async companyUsersList() {
+//   let params = {
+//     companyId: this.$store.state.userInfo.companyId,
+//     // current: this.pager.current,
+//     size: 20000,
+//     status: "enable",
+//     nameLike: this.searchUser
+//     // ...this.filters    //搜索条件
+//   }
+//   let res = await companyUsersList(params);
+//   if (res.code === '200') {
+//     res.data.records.forEach((item) => {
+//       item.name = item.nickName ? item.nickName : item.userName
+//     })
+//     this.useroptions = res.data.records;
+//     this.userInfo.data = res.data.records;
+//     this.userInfo.total = res.data.total;
+//     return res.data.records;
+//   }
+
+// },
+// -------------------------------------------------------------------------
+// const arrTransfer = (index: number, 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: any, index: number) => {
+//     item.priorityLevel = index + 1
+//   })
+//   for (let i = 0; i < props.nodeConfig.conditionNodes.length; i++) {
+//     props.nodeConfig.conditionNodes[i].error
+//       = conditionStr(props.nodeConfig.conditionNodes[i], i)
+//       == '请设置条件'
+//       && i != props.nodeConfig.conditionNodes.length - 1
+//   }
+//   emits('update:nodeConfig', props.nodeConfig)
+// }
+// -------------------------------------------------------------------------
+
+onMounted(async () => {
+  if (props.nodeConfig.type == 1) {
+    // -------------------------------------------------
+    // props.nodeConfig.error = setApproverStr(props.nodeConfig) == ''
+    // -------------------------------------------------
+
+  }
+  else if (props.nodeConfig.type == 2) {
+    // -------------------------------------------------
+    // props.nodeConfig.error = setApproverStr(props.nodeConfig) === ''
+    // -------------------------------------------------
+
+  }
+  else if (props.nodeConfig.type == 4) {
+    // -------------------------------------------------
+
+    // for (let i = 0; i < props.nodeConfig.conditionNodes.length; i++) {
+    //   props.nodeConfig.conditionNodes[i].error
+    //     = conditionStr(props.nodeConfig.conditionNodes[i], i)
+    //     == '请设置条件'
+    // }
+    // -------------------------------------------------
+
+  }
+})
 </script>
 
 <template>
-  <div class="add-node-btn-box">
-    <div class="add-node-btn">
-      <el-popover v-model="visible" placement="right-start" popper-class="add-node-popover">
-        <div class="add-node-popover-body">
-          <div class="add-node-popover-item approver" @click="addType(1)">
-            <div class="item-wrapper">
-              <img src="../assets/img/审批人.png" alt="" class="img-style">
-            </div>
-            <p>审批人</p>
+  <div class="nodeflow-components">
+    <div v-if="nodeConfig.type !== 4" class="node-wrap">
+      <div v-if="nodeConfig.type && nodeConfig.type !== 0" class="node-wrap-box" :class=" (nodeConfig.type === 0 ? 'start-node ' : '') + (isTried && nodeConfig.error ? 'active error' : '') ">
+        <div @click="setPerson">
+          <div
+            class="title" :style="
+              `background: rgb(${['87, 106, 149', '230, 162, 60', '72, 128, 255'][nodeConfig.type]});` "
+          >
+            <span class="editable-title">{{ nodeConfig.nodeName }}</span>
+            <i v-if="nodeConfig.type !== 0" class="el-icon-close close" @click.stop="delNode()" />
           </div>
-          <div class="add-node-popover-item notifier" @click="addType(2)">
-            <div class="item-wrapper">
-              <img src="../assets/img/抄送人.png" alt="" class="img-style">
+          <div class="content">
+            <div v-if="nodeConfig.type === 1" class="text">
+              <span v-if="setApproverStr(nodeConfig) === ''" class="placeholder">
+                请选择{{ placeholderList[nodeConfig.type] }}
+              </span>
+              {{ setApproverStr(nodeConfig) }}
             </div>
-            <p>抄送人</p>
+            <div v-if="nodeConfig.type === 2" class="text">
+              <span v-if="setApproverStr(nodeConfig) === ''" class="placeholder">
+                请选择{{ placeholderList[nodeConfig.type] }}
+              </span>
+              {{ setApproverStr(nodeConfig) }}
+            </div>
+            <i class="el-icon-arrow-right arrow" />
           </div>
-          <div class="add-node-popover-item condition" @click="addType(4)">
-            <div class="item-wrapper">
-              <img src="../assets/img/条件.png" alt="" class="img-style">
-            </div>
-            <p>条件分支</p>
+          <div v-if="isTried && nodeConfig.error" class="error_tip">
+            <i class="el-icon-warning" style="color: rgb(242 86 67);" />
           </div>
         </div>
-        <!-- <button slot="reference" class="btn" type="button">
-          <i style="color: #fff;" class="el-icon-plus" />
-        </button> -->
-        <button>加上</button>
-      </el-popover>
+      </div>
+      <button>+</button>
+      <!-- <addNode :childNodeP.sync="nodeConfig.childNode"></addNode> -->
     </div>
+    <div v-if="nodeConfig.type === 4" class="branch-wrap">
+      <div class="branch-box-wrap">
+        <div class="branch-box">
+          <button class="add-branch" @click="addTerm">
+            添加条件
+          </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="isTried && item.error ? 'error active' : '' " @click="setPerson(item.priorityLevel, item, '', '')">
+                  <div v-if="index !== 0" class="sort-left" @click.stop="arrTransfer(index, -1)">
+                    &lt;
+                  </div>
+                  <div class="title-wrapper">
+                    <span class="editable-title">{{ item.nodeName }}</span>
+                    <span class="priority-title">优先级{{ item.priorityLevel }}</span>
+                    <i class="el-icon-close close" @click.stop="delTerm(index)" />
+                  </div>
+                  <div v-if=" index !== nodeConfig.conditionNodes .length - 1 " class="sort-right" @click.stop="arrTransfer(index)">
+                    &gt;
+                  </div>
+                  <div class="content">
+                    {{ conditionStr(item, index) }}
+                  </div>
+                  <div v-if="isTried && item.error" class="error_tip">
+                    <i class="el-icon-warning" style="color: rgb(242 86 67);" />
+                  </div>
+                </div>
+                <add-node v-model:child-node-p="item.childNode" tip="条件" />
+              </div>
+            </div>
+            <node-wrap v-if="item.childNode && item.childNode" v-model:node-config="item.childNode" :is-tried="isTried" :data-fields="dataFields" />
+            <div v-if="index === 0" class="top-left-cover-line" />
+            <div v-if="index === 0" class="bottom-left-cover-line" />
+            <div v-if="index === nodeConfig.conditionNodes.length - 1" class="top-right-cover-line" />
+            <div v-if="index === nodeConfig.conditionNodes.length - 1" class="bottom-right-cover-line" />
+          </div>
+        </div>
+        <!-- <add-node v-model:child-node-p="nodeConfig.childNode" /> -->
+      </div>
+    </div>
+    <node-wrap v-if="nodeConfig.childNode && nodeConfig.childNode" :node-config="nodeConfig.childNode" :is-tried="isTried" :data-fields="dataFields" />
+    <el-drawer v-model="approverDrawer" custom-class="set_promoter" append-to-body direction="rtl" size="560px" :before-close="saveApprover">
+      <!-- <div slot="title" class="title flex"> -->
+      <div class="title flex">
+        <span v-if="!approverConfig.titleInputFlag">{{ approverConfig.nodeName }}</span>
+        <el-input v-else v-model="approverConfig.nodeName" maxlength="20" autofocus placeholder="" @blur="nodeNameBlur" />
+        <!-- 默认条件不需编辑 -->
+        <i v-if="!defaultApprovalDrawer" class="iconfont icon-icon_edit1 mainColor" @click="editNodename" />
+      </div>
+      <div>
+        <div v-if="approverConfig.type === 1" class="drawer-content">
+          <el-tabs :is-hide-nav="true">
+            <el-tab-pane label="节点类型">
+              <el-radio-group v-model="approverConfig.examineMode" @change="setExamineModeRadio">
+                <el-radio v-for="item in examineModeList" :key="item.value" :label="item.value">
+                  {{ item.label }}
+                  <span class="mark">({{ item.mark }})</span>
+                </el-radio>
+              </el-radio-group>
+            </el-tab-pane>
+            <el-tab-pane label="审批人类型">
+              <div v-if="approverConfig.examineMode === '3'">
+                <p style="margin-bottom: 16px;">
+                  连续多级部门主管<span style="color: #828282;margin-left: 8px;">(按照组织架构，发起人<span style="color: #4880ff;">向上的各级主管</span>依次审批)</span>
+                </p>
+                <el-radio-group v-model="approverConfig.nodeUserType.value">
+                  <el-radio :label="`m-${directorLevel}`">
+                    <span style="margin-right: 8px;">直到发起人向上的</span>
+                    <el-select v-model="directorLevel" style="width: 140px;" placeholder="请选择">
+                      <el-option v-for="(item, index) in directorLevelList" :key="index" :label="item.label" :value="item.value" />
+                    </el-select>
+                  </el-radio>
+                  <cpt-popver :type="true" />
+                  <el-radio :label="directorLevel">
+                    <span style="margin-right: 8px;">直到</span>
+                    <el-select v-model="directorLevel" style="width: 140px;" placeholder="请选择">
+                      <el-option v-for="(item, index) in directorLevelList" :key="index" :label="item.label" :value="item.value" />
+                    </el-select>
+                  </el-radio>
+                  <cpt-popver />
+                </el-radio-group>
+              </div>
+              <div v-else>
+                <el-radio-group v-model="approverConfig.nodeUserType.type" @change="setTypeRadio">
+                  <el-radio label="manager">
+                    部门主管
+                  </el-radio>
+                  <el-radio label="role">
+                    审批角色
+                  </el-radio>
+                  <el-radio label="user">
+                    指定用户
+                  </el-radio>
+                </el-radio-group>
+                <div v-if=" approverConfig.nodeUserType.type && approverConfig.nodeUserType.type !== 'manager' ">
+                  <el-form ref="form" label-width="90px">
+                    <el-form-item :label="setTypeLabel">
+                      <div v-if="approverConfig.nodeUserType.type === 'user'">
+                        <el-select v-model="approverConfig.nodeUserType.valueList" remote :remote-method="remoteMethod" filterable multiple placeholder="请选择">
+                          <el-option v-for="item in useroptions" :key="item.id" :label="item.userName" :value="item.id" />
+                        </el-select>
+                      </div>
+                      <div v-if="approverConfig.nodeUserType.type === 'role'">
+                        <el-select v-model="approverConfig.nodeUserType.valueList" filterable multiple placeholder="请选择">
+                          <el-option v-for="item in useroptions" :key="item.id" :label="item.name" :value="item.id" />
+                        </el-select>
+                      </div>
+                    </el-form-item>
+                  </el-form>
+                </div>
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+        <div v-if="approverConfig.type === 2" class="drawer-content">
+          <el-tabs :is-hide-nav="true">
+            <el-tab-pane label="抄送人类型">
+              <div>
+                <el-radio-group v-model="approverConfig.nodeUserType.type" @change="setTypeRadio">
+                  <el-radio label="manager">
+                    连续多级部门主管
+                  </el-radio>
+                  <el-radio label="role">
+                    抄送角色
+                  </el-radio>
+                  <el-radio label="user">
+                    指定用户
+                  </el-radio>
+                </el-radio-group>
+                <div v-if=" approverConfig.nodeUserType.type !== 'manager' ">
+                  <el-form v-if="approverConfig.nodeUserType.type" ref="form" label-width="90px">
+                    <el-form-item :label="setTypeLabel">
+                      <div v-if="approverConfig.nodeUserType.type === 'user'">
+                        <el-select v-model="approverConfig.nodeUserType.valueList" remote :remote-method="remoteMethod" filterable multiple placeholder="请选择">
+                          <el-option v-for="item in useroptions" :key="item.id" :label="item.userName" :value="item.id" />
+                        </el-select>
+                      </div>
+                      <div v-if="approverConfig.nodeUserType.type === 'role'">
+                        <el-select v-model="approverConfig.nodeUserType.valueList" filterable multiple placeholder="请选择">
+                          <el-option v-for="item in useroptions" :key="item.id" :label="item.name" :value="item.id" />
+                        </el-select>
+                      </div>
+                    </el-form-item>
+                  </el-form>
+                </div>
+                <div v-else>
+                  <p style="margin-bottom: 16px;font-size: 14px;">
+                    按组织架构，发起人<span style="color: #4880ff;">向上的各级主管</span>依次抄送
+                  </p>
+                  <el-radio-group v-model=" approverConfig.nodeUserType.value ">
+                    <el-radio :label="`m-${directorLevel}`">
+                      <span style="margin-right: 8px;">直到发起人向上的</span>
+                      <el-select v-model="directorLevel" style="width: 140px;" placeholder="请选择" @change=" approverConfig.nodeUserType.value = `m-${directorLevel}` ">
+                        <el-option v-for="(item, index) in directorLevelList" :key="index" :label="item.label" :value="item.value" />
+                      </el-select>
+                    </el-radio>
+                    <cpt-popver :type="true" />
+                    <el-radio :label="directorLevel">
+                      <span style="margin-right: 8px;">直到</span>
+                      <el-select v-model="directorLevel" style="width: 140px;" placeholder="请选择" @change=" approverConfig.nodeUserType.value = directorLevel ">
+                        <el-option v-for="(item, index) in directorLevelList" :key="index" :label="item.label" :value="item.value" />
+                      </el-select>
+                    </el-radio>
+                    <cpt-popver />
+                  </el-radio-group>
+                </div>
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+        <div v-if="approverConfig.type === 3" class="drawer-content drawer-content-condition">
+          <!-- 默认条件 -->
+          <div v-if="defaultApprovalDrawer" class="default-style">
+            其他情况
+          </div>
+          <div v-else>
+            <div v-for="(item, index) in approverConfig.conditionList" :key="index">
+              <div class="condition-conent-group">
+                <div class="condition-group-title flex">
+                  <div class="dang-style">
+                    条件组
+                  </div>
+                  <div>
+                    <i class="remove el-icon-delete" @click="removeCondition('group', index, 0)" />
+                  </div>
+                </div>
+                <div v-for="(it, ind) in item.conditionChildrenNodes" :key="ind" class="condition-group-select">
+                  <div class="mg-bot-10">
+                    <div v-if="ind === 0" class="flex flex-style">
+                      <span class="dang-style">当</span>
+                      <i class="remove el-icon-delete" @click=" removeCondition('oneCondition', index, ind) " />
+                    </div>
+                    <div v-else class="flex">
+                      <el-select v-model="it.conditionOperator" style="width: 110px;" placeholder="请选择">
+                        <el-option label="且" value="&&" />
+                        <el-option label="或" value="||" />
+                      </el-select>
+                      <i class="remove iconfont icon-icon_viewpicture_delete" @click=" removeCondition('oneCondition', index, ind) " />
+                    </div>
+                  </div>
+                  <el-row :gutter="5" class="mg-bot-10">
+                    <el-col :span="8">
+                      <el-select v-model="it.leftFileds" placeholder="请选择" @change="dataFieldsChange(it)">
+                        <el-option v-for="item in dataFields" :key="item.key" :label="item.name" :value="item.key" />
+                      </el-select>
+                    </el-col>
+                    <el-col :span="5">
+                      <el-select v-model="it.centerFileds" placeholder="请选择">
+                        <el-option v-for="item in operatorList" :key="item" :label="item" :value="item" />
+                      </el-select>
+                    </el-col>
+                    <el-col :span="10">
+                      <el-date-picker v-if="it.leftFiledsType === 'date'" v-model="it.rightFileds" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" />
+                      <el-input v-else v-model="it.rightFileds" placeholder="请输入" />
+                    </el-col>
+                  </el-row>
+                </div>
+                <div class="conditionbtn" @click="addConditionGroup('1', item)">
+                  <el-button type="">
+                    <i class="el-button-suffix el-icon-plus" />添加条件
+                  </el-button>
+                </div>
+              </div>
+              <div v-if=" index === 0 && approverConfig.conditionList.length > 1 " class="flex" style="height: 54px;padding: 0 24px;">
+                <el-select v-model="item.conditionGroupOperator" style="width: 110px;margin-top: 7px;" placeholder="请选择">
+                  <el-option label="且" value="&&" />
+                  <el-option label="或" value="||" />
+                </el-select>
+              </div>
+            </div>
+            <div class="conditionbtn">
+              <el-button type="" @click="addConditionGroup('0', {})">
+                <i class="el-button-suffix el-icon-plus" />添加条件组
+              </el-button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="set_promoter_footer flex">
+        <!-- 默认条件弹框只展示关闭按钮 -->
+        <div v-if="defaultApprovalDrawer">
+          <el-button type="primary" @click="approverDrawer = false">
+            关闭
+          </el-button>
+        </div>
+        <div v-else class="flex">
+          <el-button type="primary" @click="saveApprover">
+            确定
+          </el-button>
+          <el-button @click="approverDrawer = false">
+            取消
+          </el-button>
+        </div>
+      </div>
+    </el-drawer>
   </div>
 </template>
 
-<style lang="scss" scoped>
-.add-node-btn-box {
-  width: 240px;
-  display: inline-flex;
-  flex-shrink: 0;
-  position: relative;
+<style lang="scss">
+.el-dialog__title {
+  font-size: 18px !important;
+  font-weight: 600 !important;
+}
 
-  &:first-child {
-    margin-left: 16px;
+.default-style {
+  margin-left: 25px;
+}
+
+.search-style {
+  label {
+    width: 50px !important;
   }
 
-  &::before {
-    content: "";
-    position: absolute;
-    top: 1px;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: -1;
-    margin: auto;
-    width: 1px;
-    // height: 100%;
-    background-color: #ebebeb;
+  .el-row {
+    padding-right: 0 !important;
+  }
+
+  .el-form-item__content {
+    margin-left: 50px !important;
   }
 }
 
-.img-style {
-  width: 36px;
+.flex-style {
+  display: flex;
+  justify-content: space-between;
 }
 
-.add-node-popover {
-  padding: 14px 26px;
+.dang-style {
+  font-size: 14px;
+}
 
-  .add-node-popover-body {
-    display: flex;
+.dialog-style {
+  z-index: 99999 !important;
+  background: rgb(0 0 0 / 50%);
+}
 
-    .add-node-popover-item {
-      margin-right: 20px;
-      text-align: center;
-      cursor: pointer;
+.v-modal {
+  background: none !important;
+  z-index: -1 !important;
+}
+
+.set_promoter {
+  .el-drawer__header {
+    margin-bottom: 0;
+    padding: 0 24px;
+    border-bottom: 1px solid #ebebeb;
+
+    .title {
+      height: 64px;
+      line-height: 64px;
+      font-size: 20px;
+      color: #333;
+      justify-content: flex-start;
+
+      i {
+        margin-left: 8px;
+        font-size: 30px;
+      }
+    }
+  }
+
+  .el-drawer__body {
+    overflow-y: auto;
+    max-height: calc(100% - 64px);
+    padding-bottom: 80px;
+  }
+
+  .drawer-content {
+    padding: 24px;
+
+    .el-radio {
+      margin-bottom: 16px;
+
+      .mark {
+        color: #828282;
+      }
+
+      &.is-checked {
+        .mark {
+          color: #4880ff;
+        }
+      }
 
       &:last-child {
-        margin-right: 0;
-      }
-
-      i {
-        font-size: 36px;
-      }
-
-      p {
-        color: #333;
-        margin-top: 4px;
-      }
-    }
-
-    .approver {
-      i {
-        color: #e6a23c;
-      }
-    }
-
-    .condition {
-      i {
-        color: #67c23a;
-      }
-    }
-
-    .notifier {
-      i {
-        color: #4880ff;
+        margin-bottom: 0;
       }
     }
   }
+
+  .drawer-content-condition {
+    padding: 24px 0;
+
+    .condition-conent-group {
+      border-bottom: solid 1px #ebebeb;
+      padding-bottom: 20px;
+
+      .condition-group-title {
+        padding: 0 24px;
+        background: #f7f8fa;
+        height: 48px;
+        border-top: solid 1px #ebebeb;
+        border-bottom: solid 1px #ebebeb;
+        margin-bottom: 12px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      .condition-group-select {
+        padding: 0 24px;
+      }
+
+      .remove {
+        color: #828282;
+
+        &:hover {
+          cursor: pointer;
+          color: #4880ff;
+        }
+      }
+
+      .mg-bot-10 {
+        margin-bottom: 10px;
+      }
+
+      .conditionbtn {
+        .el-button {
+          border: 1px dashed #4880ff;
+          width: 110px;
+        }
+      }
+    }
+
+    .conditionbtn {
+      padding: 0 24px;
+      margin-top: 26px;
+
+      .el-button {
+        border: solid 1px #4880ff;
+        color: #4880ff;
+        width: 123px;
+      }
+    }
+  }
+
+  .set_promoter_footer {
+    height: 80px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    padding: 24px;
+    justify-content: flex-end;
+    background: #fff;
+    width: 100%;
+    border-top: 1px solid #ebebeb;
+    z-index: 2;
+  }
+
+  .icon-icon_explain {
+    color: #bfbfbf;
+  }
+}
+
+.error_tip {
+  position: absolute;
+  top: 36px;
+  right: 0;
+  transform: translate(150%, 0);
+
+  i {
+    font-size: 24px;
+  }
+}
+
+.add-node-popover-body {
+  display: flex;
+}
+
+.el-drawer:focus,
+.el-drawer__close-btn:focus {
+  outline: none;
 }
 </style>
diff --git a/src/components/workFlow/workFlow.vue b/src/components/workFlow/workFlow.vue
new file mode 100644
index 0000000..439b560
--- /dev/null
+++ b/src/components/workFlow/workFlow.vue
@@ -0,0 +1,764 @@
+<script lang="ts" setup name="WorkFlow">
+import { ref } from 'vue'
+import nodeWrap from '@/components/workFlow/nodeWrap.vue'
+
+// 流程设置
+const isTried = ref(false)
+const tipList = ref([])
+const nodeConfig = ref({
+  error: true,
+  childNode: {
+    nodeName: '审核人',
+    nodeUserType: {
+      valueName: 'admin',
+      valueList: ['admin'],
+      type: 'user',
+      value: 'admin',
+    },
+    examineMode: '1',
+    error: false,
+    type: 1,
+    nodeId: 'approvalID',
+  },
+})
+const dataFields = ref([
+  { name: '日期', key: 'date', type: 'date' },
+  { name: '地址', key: 'adress' },
+  { name: '状态', key: 'state' },
+])
+const nowVal = ref(100)
+const flowPermission = ref([])
+const tableId = ref('')
+const nodeConfigss = ref({
+  type: 0, // 类型
+  priorityLevel: '', // 优先级
+  settype: '', // 审批人类型
+  selectMode: '', // 1人还是多人
+  selectRange: '', // 选择范围
+  directorLevel: '', // 主管层级
+  examineMode: '', // 多人审批时采用的审批方式  （依次审批 ，会签）
+  noHanderAction: '', // 审批人为空时 (自动审批通过/不允许发起, 转交给审核管理员)
+  examineEndType: '',
+  examineEndRoleId: '',
+  examineEndDirectorLevel: '', // 审批终点层级
+  ccSelfSelectFlag: '', // 抄送人
+  conditionList: [], // 条件设置
+  nodeUserList: [], // 人员列表
+})
+
+const reErr = (data: any) => {
+  if (data.childNode) {
+    if (data.childNode.type == 1) {
+      // 审批人
+      if (data.childNode.error) {
+        tipList.value.push({
+          name: data.childNode.nodeName,
+          type: '审核人',
+        })
+      }
+      reErr(data.childNode)
+    }
+    else if (data.childNode.type == 2) {
+      if (data.childNode.error) {
+        tipList.value.push({
+          name: data.childNode.nodeName,
+          type: '抄送人',
+        })
+      }
+      reErr(data.childNode)
+    }
+    else if (data.childNode.type == 3) {
+      reErr(data.childNode.childNode)
+    }
+    else if (data.childNode.type == 4) {
+      reErr(data.childNode)
+      for (
+        let i = 0; i < data.childNode.conditionNodes.length; i++
+      ) {
+        if (data.childNode.conditionNodes[i].error) {
+          tipList.value.push({
+            name: data.childNode.conditionNodes[i].nodeName,
+            type: '条件',
+          })
+        }
+        reErr(data.childNode.conditionNodes[i])
+      }
+    }
+  }
+  else {
+    data.childNode = null
+  }
+}
+
+// 给数据加preId(递归)
+const handleData = (data: any) => {
+  if (data.childNode) {
+    data.childNode.preId = data.nodeId
+    handleData(data.childNode)
+  }
+  return data
+}
+const workflowSave = () => {
+  // 调接口存数据
+  const data = handleData(nodeConfig.value)
+  console.log('data', data)
+  // this.$message.success('保存成功')
+}
+const zoomSize = (type: number | string) => {
+  if (type == 1) {
+    if (nowVal.value == 50) {
+      return
+    }
+    nowVal.value -= 10
+  }
+  else {
+    if (nowVal.value == 300) {
+      return
+    }
+    nowVal.value += 10
+  }
+}
+// 保存
+const saveData = () => {
+  isTried.value = true
+  tipList.value = []
+  reErr(nodeConfig.value)
+  if (tipList.value.length != 0) {
+    return
+  }
+  workflowSave()
+}
+</script>
+
+<template>
+  <div class="work-flow">
+    <div class="button-area">
+      <el-button type="primary" class="btn-style" @click="saveData">
+        保存
+      </el-button>
+    </div>
+
+    <div class="approval-flow fd-nav-content">
+      <div class="dingflow-design">
+        <div class="zoom flex">
+          <div :class="`zoom-out${nowVal === 50 ? ' disabled' : ''}`" @click="zoomSize(1)" />
+          <span>{{ nowVal }}%</span>
+          <div :class="`zoom-in${nowVal === 300 ? ' disabled' : ''}`" @click="zoomSize(2)" />
+        </div>
+        <div id="box-scale" class="box-scale" :style="`transform: scale(${nowVal / 100}); transform-origin: 50% 0px 0px;`">
+          <div class="end-node flex">
+            <p>开始</p>
+          </div>
+          <node-wrap v-bind="$attrs" :node-config="nodeConfig" :data-fields="dataFields" :is-tried="isTried" />
+          <div class="end-node flex">
+            <p>结束</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.work-flow {
+  width: 100%;
+  padding-top: 12px;
+
+  .button-area {
+    // width: 100%;
+    display: flex;
+    justify-content: flex-end;
+    margin: 0 12px 12px 0;
+  }
+
+  .approval-flow {
+    .dingflow-design {
+      .zoom {
+        display: flex;
+        justify-content: flex-end;
+        margin: 12px 12px 12px 0;
+
+        .zoom-in,
+        .zoom-out {
+          width: 30px;
+          height: 30px;
+          background: #fff;
+          color: #c1c1cd;
+          cursor: pointer;
+          background-size: 100%;
+          background-repeat: no-repeat;
+        }
+
+        .zoom-out {
+          // background-image: url(https://gw.alicdn.com/tfs/TB1s0qhBHGYBuNjy0FoXXciBFXa-90-90.png);
+        }
+
+        .zoom-out.disabled {
+          opacity: 0.5;
+        }
+
+        .zoom-in {
+          // background-image: url(https://gw.alicdn.com/tfs/TB1UIgJBTtYBeNjy1XdXXXXyVXa-90-90.png);
+        }
+
+        .zoom-in.disabled {
+          opacity: 0.5;
+        }
+      }
+
+      .box-scale {
+        transform: scale(1);
+        // display: inline-block;
+        // position: relative;
+        // width: 100%;
+        // padding: 54.5px 0;
+        // transform-origin: 0 0 0;
+        // left: 40%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .branch-wrap {
+          .branch-box-wrap {
+            margin-left: -240px;
+
+            .auto-judge {
+              position: relative;
+              width: 280px;
+              min-height: 100px;
+              background: #fff;
+              border-radius: 4px;
+              cursor: pointer;
+
+              .title-wrapper {
+                // position: relative;
+                font-size: 12px;
+                color: #333;
+                text-align: left;
+                height: 38px;
+                line-height: 38px;
+                padding: 0 13px 0 0;
+                border-bottom: 1px solid #ebebeb;
+              }
+            }
+          }
+        }
+
+        .node-wrap-box {
+          display: inline-flex;
+          flex-direction: column;
+          position: relative;
+          width: 280px;
+          min-height: 72px;
+          background: #fff;
+          border-radius: 4px;
+          cursor: pointer;
+        }
+
+        .node-wrap-box::after {
+          pointer-events: none;
+          content: "";
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          z-index: 2;
+          border-radius: 4px;
+          border: 1px solid transparent;
+          transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
+          box-shadow: 0 2px 5px 0 rgb(0 0 0 / 10%);
+        }
+
+        .end-node {
+          justify-content: center;
+          flex-direction: column;
+
+          p {
+            width: 280px;
+            height: 40px;
+            line-height: 40px;
+            color: #fff;
+            text-align: center;
+            background-color: #8cafff;
+            border-radius: 4px;
+            font-size: 14px;
+          }
+        }
+      }
+    }
+  }
+
+  .fd-nav-content {
+    // position: fixed;
+    // top: 60px;
+    // left: 0;
+    // right: 0;
+    // bottom: 0;
+    // z-index: 1;
+    // overflow-x: hidden;
+    // overflow-y: auto;
+    overflow: auto;
+    padding-bottom: 30px;
+  }
+
+  .dingflow-design {
+    width: 100%;
+    background-color: #f5f8ff;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+    align-content: center;
+    padding-bottom: 50px;
+  }
+
+  .editable-title {
+    font-size: 14px;
+    padding-left: 18px;
+  }
+
+  .dingflow-design .ie-polyfill-container {
+    display: grid;
+    -ms-grid-columns: min-content;
+  }
+
+  .dingflow-design .node-wrap {
+    flex-direction: column;
+    -webkit-box-pack: start;
+    -ms-flex-pack: start;
+    justify-content: flex-start;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    // flex-wrap: wrap;
+    -webkit-box-flex: 1;
+    -ms-flex-positive: 1;
+    // padding: 0 50px;
+    position: relative;
+  }
+
+  .dingflow-design .branch-wrap,
+  .dingflow-design .node-wrap {
+    display: inline-flex;
+    // width: 100%;
+  }
+
+  .dingflow-design .branch-box-wrap {
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    flex-direction: column;
+    // flex-wrap: wrap;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    min-height: 270px;
+    width: 100%;
+    -ms-flex-negative: 0;
+    flex-shrink: 0;
+  }
+
+  .dingflow-design .branch-box {
+    display: flex;
+    overflow: visible;
+    min-height: 180px;
+    height: auto;
+    border-bottom: 1px solid #ebebeb;
+    border-top: 1px solid #ebebeb;
+    position: relative;
+    margin-top: 15px;
+  }
+
+  .dingflow-design .branch-box .col-box::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 0;
+    margin: auto;
+    width: 1px;
+    height: 100%;
+    background-color: #ebebeb;
+  }
+
+  .dingflow-design .add-branch {
+    border: none;
+    outline: none;
+    user-select: none;
+    justify-content: center;
+    font-size: 12px;
+    padding: 0 10px;
+    height: 30px;
+    line-height: 30px;
+    border-radius: 15px;
+    color: #4880ff;
+    background: #fff;
+    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
+    position: absolute;
+    top: -16px;
+    left: 50%;
+    transform: translateX(-50%);
+    transform-origin: center center;
+    cursor: pointer;
+    z-index: 1;
+    display: inline-flex;
+    align-items: center;
+    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  }
+
+  .dingflow-design .add-branch:hover {
+    transform: translateX(-50%) scale(1.1);
+    box-shadow: 0 8px 16px 0 rgb(0 0 0 / 10%);
+  }
+
+  .dingflow-design .add-branch:active {
+    transform: translateX(-50%);
+    box-shadow: none;
+  }
+
+  .dingflow-design .col-box {
+    display: inline-flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    flex-direction: column;
+    -webkit-box-align: center;
+    align-items: center;
+    position: relative;
+  }
+
+  .dingflow-design .condition-node {
+    min-height: 220px;
+  }
+
+  .dingflow-design .condition-node,
+  .dingflow-design .condition-node-box {
+    display: inline-flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    flex-direction: column;
+    -webkit-box-flex: 1;
+  }
+
+  .dingflow-design .condition-node-box {
+    padding-top: 30px;
+    padding-right: 50px;
+    padding-left: 50px;
+    -webkit-box-pack: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    align-items: center;
+    flex-grow: 1;
+    position: relative;
+  }
+
+  .dingflow-design .condition-node-box::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: auto;
+    width: 1px;
+    height: 100%;
+    background-color: #ebebeb;
+  }
+
+  .dingflow-design .auto-judge::after {
+    pointer-events: none;
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 2;
+    border-radius: 4px;
+    border: 1px solid transparent;
+    transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
+    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 10%);
+  }
+
+  .dingflow-design .auto-judge.active::after,
+  .dingflow-design .auto-judge:active::after,
+  .dingflow-design .auto-judge:hover::after {
+    border: 1px solid #4880ff;
+    box-shadow: 0 0 6px 0 rgb(50 150 250 / 30%);
+  }
+
+  .dingflow-design .auto-judge.active .close,
+  .dingflow-design .auto-judge:active .close,
+  .dingflow-design .auto-judge:hover .close {
+    display: block;
+  }
+
+  .dingflow-design .auto-judge.error::after {
+    border: 1px solid #f25643;
+    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 10%);
+  }
+
+  .dingflow-design .auto-judge .title-wrapper .editable-title {
+    display: inline-block;
+    max-width: 120px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-size: 16px;
+  }
+
+  .dingflow-design .auto-judge .title-wrapper .priority-title {
+    display: inline-block;
+    float: right;
+    margin-right: 35px;
+    color: #828282;
+  }
+
+  .dingflow-design .auto-judge .title-wrapper .priority-button {
+    display: inline-block;
+    height: 28px;
+    float: right;
+    margin-right: 10px;
+    border: 1px solid rgb(0 0 0 / 15%);
+    border-radius: 4px;
+    color: rgb(0 0 0 / 65%);
+  }
+
+  .dingflow-design .auto-judge .title-wrapper .priority-button div {
+    display: inline-block;
+  }
+
+  .dingflow-design .auto-judge .title-wrapper .priority-button .priority-content {
+    padding: 0 8px;
+    font-size: 12px;
+    line-height: 28px;
+    border-left: 1px solid rgb(0 0 0 / 15%);
+    border-right: 1px solid rgb(0 0 0 / 15%);
+  }
+
+  .dingflow-design .auto-judge .placeholder {
+    color: #bfbfbf;
+  }
+
+  .dingflow-design .auto-judge .close {
+    display: none;
+    position: absolute;
+    right: 22px;
+    top: 8px;
+    width: 20px;
+    height: 20px;
+    font-size: 14px;
+    color: rgb(0 0 0 / 25%);
+    border-radius: 50%;
+    text-align: center;
+    line-height: 20px;
+    z-index: 2;
+  }
+
+  .dingflow-design .auto-judge .content {
+    height: calc(100% - 39px);
+    display: flex;
+    align-items: center;
+    max-width: calc(100% - 36px);
+    padding: 0 18px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 14px;
+  }
+
+  .dingflow-design .auto-judge .sort-left,
+  .dingflow-design .auto-judge .sort-right {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    display: none;
+    z-index: 1;
+    color: rgb(0 0 0 / 25%);
+  }
+
+  .dingflow-design .auto-judge .sort-left {
+    left: 4px;
+    top: 33px;
+    color: rgb(0 0 0 / 50%);
+  }
+
+  .dingflow-design .auto-judge .sort-right {
+    right: 26px;
+    top: 33px;
+  }
+
+  .dingflow-design .auto-judge:hover .sort-left,
+  .dingflow-design .auto-judge:hover .sort-right {
+    display: flex;
+    align-items: center;
+  }
+
+  .dingflow-design .add-node-btn {
+    user-select: none;
+    width: 240px;
+    padding: 30px 0;
+    display: flex;
+    -webkit-box-pack: center;
+    justify-content: center;
+    flex-shrink: 0;
+    -webkit-box-flex: 1;
+    flex-grow: 1;
+    // margin-left: -55px;
+  }
+
+  .dingflow-design .add-node-btn .btn {
+    outline: none;
+    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
+    width: 30px;
+    height: 30px;
+    background: #4880ff;
+    border-radius: 50%;
+    position: relative;
+    border: none;
+    line-height: 30px;
+    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+    // margin-left: 36px;
+  }
+
+  .dingflow-design .add-node-btn .btn .iconfont {
+    color: #fff;
+    font-size: 16px;
+  }
+
+  .dingflow-design .add-node-btn .btn:hover {
+    transform: scale(1.3);
+    box-shadow: 0 13px 27px 0 rgb(0 0 0 / 10%);
+  }
+
+  .dingflow-design .add-node-btn .btn:active {
+    transform: none;
+    background: #1e83e9;
+    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
+  }
+
+  .top-left-cover-line {
+    left: -1px;
+  }
+
+  .top-left-cover-line,
+  .top-right-cover-line {
+    position: absolute;
+    height: 3px;
+    width: 50%;
+    background-color: #f5f8ff;
+    top: -2px;
+  }
+
+  .top-right-cover-line {
+    right: -1px;
+  }
+
+  .bottom-left-cover-line {
+    left: -1px;
+  }
+
+  .bottom-left-cover-line,
+  .bottom-right-cover-line {
+    position: absolute;
+    height: 3px;
+    width: 50%;
+    background-color: #f5f8ff;
+    bottom: -2px;
+  }
+
+  .bottom-right-cover-line {
+    right: -1px;
+  }
+
+  .node-wrap-box.active::after,
+  .node-wrap-box:active::after,
+  .node-wrap-box:hover::after {
+    border: 1px solid #3296fa;
+    box-shadow: 0 0 6px 0 rgb(50 150 250 / 30%);
+  }
+
+  .node-wrap-box.active .close,
+  .node-wrap-box:active .close,
+  .node-wrap-box:hover .close {
+    display: block;
+  }
+
+  .node-wrap-box.error::after {
+    border: 1px solid #f25643;
+    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 10%);
+  }
+
+  .node-wrap-box .title {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding-left: 16px;
+    // padding-right: 30px;
+    // width: 100%;
+    height: 40px;
+    line-height: 40px;
+    font-size: 16px;
+    color: #fff;
+    text-align: left;
+    background: #576a95;
+    border-radius: 4px 4px 0 0;
+  }
+
+  .node-wrap-box .title .iconfont {
+    font-size: 12px;
+    margin-right: 5px;
+  }
+
+  .node-wrap-box .placeholder {
+    color: #bfbfbf;
+  }
+
+  .node-wrap-box .close {
+    display: none;
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 20px;
+    height: 20px;
+    font-size: 14px;
+    color: #fff;
+    border-radius: 50%;
+    text-align: center;
+    line-height: 20px;
+  }
+
+  .node-wrap-box .content {
+    position: relative;
+    font-size: 14px;
+    padding: 20px 18px;
+
+    /* padding-right: 30px */
+  }
+
+  .node-wrap-box .content .text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+  }
+
+  .node-wrap-box .content .arrow {
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 20px;
+    height: 14px;
+    font-size: 14px;
+    color: #979797;
+  }
+
+  .start-node.node-wrap-box .content .text {
+    display: block;
+    white-space: nowrap;
+  }
+}
+</style>
diff --git a/src/views/system/process/editProcess.vue b/src/views/system/process/editProcess.vue
index 4a92993..8ea8966 100644
--- a/src/views/system/process/editProcess.vue
+++ b/src/views/system/process/editProcess.vue
@@ -4,6 +4,7 @@
 import type { FormInstance, FormRules } from 'element-plus'
 import type { Ref } from '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({
@@ -195,7 +196,9 @@
     <h5 class="title">
       流程配置
     </h5>
-    <div class="set edit" />
+    <div class="set">
+      <work-flow />
+    </div>
   </div>
 </template>
 
@@ -223,7 +226,10 @@
     }
 
     .set {
-      height: 200px;
+      width: 100%;
+      background-color: #fff;
+      border-radius: 7px;
+      margin: 20px 0;
     }
   }
 </style>