diff --git a/.env.development b/.env.development
index 54c38a4..1ef3600 100644
--- a/.env.development
+++ b/.env.development
@@ -2,6 +2,7 @@
 VITE_APP_TITLE = 标题
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
 VITE_APP_API_BASEURL = http://XXXXXXX:XXXXXXX
+
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VITE_APP_DEBUG_TOOL =
 

diff --git a/.env.development b/.env.development
index 54c38a4..1ef3600 100644
--- a/.env.development
+++ b/.env.development
@@ -2,6 +2,7 @@
 VITE_APP_TITLE = 标题
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
 VITE_APP_API_BASEURL = http://XXXXXXX:XXXXXXX
+
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VITE_APP_DEBUG_TOOL =
 
diff --git a/.env.production b/.env.production
index 427b973..ed8a601 100644
--- a/.env.production
+++ b/.env.production
@@ -1,7 +1,7 @@
 NODE_ENV = production
 
 # 页面标题
-VITE_APP_TITLE = 计量业务系统
+VITE_APP_TITLE = 标题
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
 VITE_APP_API_BASEURL = http://XXXXXXX:XXXXXXX
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空

diff --git a/.env.development b/.env.development
index 54c38a4..1ef3600 100644
--- a/.env.development
+++ b/.env.development
@@ -2,6 +2,7 @@
 VITE_APP_TITLE = 标题
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
 VITE_APP_API_BASEURL = http://XXXXXXX:XXXXXXX
+
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VITE_APP_DEBUG_TOOL =
 
diff --git a/.env.production b/.env.production
index 427b973..ed8a601 100644
--- a/.env.production
+++ b/.env.production
@@ -1,7 +1,7 @@
 NODE_ENV = production
 
 # 页面标题
-VITE_APP_TITLE = 计量业务系统
+VITE_APP_TITLE = 标题
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
 VITE_APP_API_BASEURL = http://XXXXXXX:XXXXXXX
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
diff --git a/src/api/system/process.ts b/src/api/system/process.ts
new file mode 100644
index 0000000..c2d4419
--- /dev/null
+++ b/src/api/system/process.ts
@@ -0,0 +1,123 @@
+// 流程管理接口
+import request from '../index'
+// import type { IlistQuery } from '@/views/system/process/process'
+const prefix = '/system/flow'
+
+// 列表
+export function getProcessList(data: { offset: number; limit: number }) {
+  return request({
+    url: `${prefix}/listPage?offset=${data.offset}&limit=${data.limit}`,
+    method: 'post',
+    data,
+  })
+}
+
+// 删除
+export function delProcessList(id: string) {
+  const param = {
+    deployId: id,
+  }
+  return request({
+    url: `${prefix}/delete`,
+    method: 'post',
+    data: param,
+  })
+}
+// 废止
+export function updateState(id: string, state: number) {
+  const param = {
+    deployId: id,
+    state,
+  }
+  return request({
+    url: `${prefix}/updateState`,
+    method: 'post',
+    data: param,
+  })
+}
+
+// 加载流程定义
+export function unloadProcess(params: Object) {
+  const param = {
+    _value: params,
+  }
+  return request({
+    url: `${prefix}/jsonToBpmn`,
+    method: 'post',
+    data: param,
+  })
+}
+
+// 流程定义编辑
+export function editProcess(params: Object) {
+  const param = {
+    _value: params,
+  }
+  return request({
+    url: `${prefix}/update`,
+    method: 'post',
+    data: param,
+  })
+}
+
+// 新建流程
+export function addProcess(params: Object) {
+  const param = {
+    _value: params,
+  }
+  return request({
+    url: `${prefix}/jsonToBpmn`,
+    method: 'post',
+    data: param,
+  })
+}
+
+// 获取流程定义详情
+export function getProcessDetail(formId: string) {
+  const param = {
+    formId,
+  }
+  return request({
+    url: `${prefix}/detail`,
+    method: 'post',
+    data: param,
+  })
+}
+
+// 获取关联业务列表
+export function getBusinessList() {
+  return request({
+    url: `${prefix}/flowFormList`,
+    method: 'get',
+  })
+}
+
+// 获取发起人的主管层级数
+export function getDirectorLevel(userId: number | string) {
+  return request({
+    url: `${prefix}/directorLevel`,
+    method: 'get',
+    params: { userId },
+  })
+}
+
+// 导出列表
+export function exportProcessList(data: {
+  deploymentId: string
+  suspensionState: string
+  number: string
+  name: string
+  business: string
+  person: string
+  beginTime: string
+  endTime: string
+  status: string
+  ids: string[]
+}) {
+  return request({
+    url: `${prefix}/listExport`,
+    method: 'post',
+    responseType: 'blob',
+    data,
+  })
+}

diff --git a/.env.development b/.env.development
index 54c38a4..1ef3600 100644
--- a/.env.development
+++ b/.env.development
@@ -2,6 +2,7 @@
 VITE_APP_TITLE = 标题
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
 VITE_APP_API_BASEURL = http://XXXXXXX:XXXXXXX
+
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VITE_APP_DEBUG_TOOL =
 
diff --git a/.env.production b/.env.production
index 427b973..ed8a601 100644
--- a/.env.production
+++ b/.env.production
@@ -1,7 +1,7 @@
 NODE_ENV = production
 
 # 页面标题
-VITE_APP_TITLE = 计量业务系统
+VITE_APP_TITLE = 标题
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
 VITE_APP_API_BASEURL = http://XXXXXXX:XXXXXXX
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
diff --git a/src/api/system/process.ts b/src/api/system/process.ts
new file mode 100644
index 0000000..c2d4419
--- /dev/null
+++ b/src/api/system/process.ts
@@ -0,0 +1,123 @@
+// 流程管理接口
+import request from '../index'
+// import type { IlistQuery } from '@/views/system/process/process'
+const prefix = '/system/flow'
+
+// 列表
+export function getProcessList(data: { offset: number; limit: number }) {
+  return request({
+    url: `${prefix}/listPage?offset=${data.offset}&limit=${data.limit}`,
+    method: 'post',
+    data,
+  })
+}
+
+// 删除
+export function delProcessList(id: string) {
+  const param = {
+    deployId: id,
+  }
+  return request({
+    url: `${prefix}/delete`,
+    method: 'post',
+    data: param,
+  })
+}
+// 废止
+export function updateState(id: string, state: number) {
+  const param = {
+    deployId: id,
+    state,
+  }
+  return request({
+    url: `${prefix}/updateState`,
+    method: 'post',
+    data: param,
+  })
+}
+
+// 加载流程定义
+export function unloadProcess(params: Object) {
+  const param = {
+    _value: params,
+  }
+  return request({
+    url: `${prefix}/jsonToBpmn`,
+    method: 'post',
+    data: param,
+  })
+}
+
+// 流程定义编辑
+export function editProcess(params: Object) {
+  const param = {
+    _value: params,
+  }
+  return request({
+    url: `${prefix}/update`,
+    method: 'post',
+    data: param,
+  })
+}
+
+// 新建流程
+export function addProcess(params: Object) {
+  const param = {
+    _value: params,
+  }
+  return request({
+    url: `${prefix}/jsonToBpmn`,
+    method: 'post',
+    data: param,
+  })
+}
+
+// 获取流程定义详情
+export function getProcessDetail(formId: string) {
+  const param = {
+    formId,
+  }
+  return request({
+    url: `${prefix}/detail`,
+    method: 'post',
+    data: param,
+  })
+}
+
+// 获取关联业务列表
+export function getBusinessList() {
+  return request({
+    url: `${prefix}/flowFormList`,
+    method: 'get',
+  })
+}
+
+// 获取发起人的主管层级数
+export function getDirectorLevel(userId: number | string) {
+  return request({
+    url: `${prefix}/directorLevel`,
+    method: 'get',
+    params: { userId },
+  })
+}
+
+// 导出列表
+export function exportProcessList(data: {
+  deploymentId: string
+  suspensionState: string
+  number: string
+  name: string
+  business: string
+  person: string
+  beginTime: string
+  endTime: string
+  status: string
+  ids: string[]
+}) {
+  return request({
+    url: `${prefix}/listExport`,
+    method: 'post',
+    responseType: 'blob',
+    data,
+  })
+}
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index c129719..d6d1b71 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -154,6 +154,69 @@
     ],
   },
   {
+    path: '/process',
+    component: Layout,
+    redirect: '/process/list',
+    name: 'Process',
+    meta: {
+      title: '流程管理',
+      icon: 'ep:key',
+      auth: '/sys/process',
+    },
+    children: [
+      {
+        path: 'list',
+        name: 'ProcessList',
+        component: () => import('@/views/system/process/process.vue'),
+        meta: {
+          title: '流程管理',
+          icon: 'ep:key',
+          auth: '/sys/process',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/process',
+        },
+      },
+      {
+        path: 'edit',
+        name: 'ProcessListEdit',
+        component: () => import('@/views/system/process/editProcess.vue'),
+        meta: {
+          title: '流程管理',
+          icon: 'ep:key',
+          auth: '/sys/process',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/process/list',
+        },
+      },
+      {
+        path: 'detail',
+        name: 'ProcessListDetail',
+        component: () => import('@/views/system/process/detailProcess.vue'),
+        meta: {
+          title: '流程管理',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/process/list',
+        },
+      },
+      {
+        path: 'add',
+        name: 'ProcessListAdd',
+        component: () => import('@/views/system/process/addProcess.vue'),
+        meta: {
+          title: '流程管理',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/process/list',
+        },
+      },
+    ],
+  },
+  {
     path: '/tenant',
     component: Layout,
     redirect: '/tenant/list',

diff --git a/.env.development b/.env.development
index 54c38a4..1ef3600 100644
--- a/.env.development
+++ b/.env.development
@@ -2,6 +2,7 @@
 VITE_APP_TITLE = 标题
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
 VITE_APP_API_BASEURL = http://XXXXXXX:XXXXXXX
+
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VITE_APP_DEBUG_TOOL =
 
diff --git a/.env.production b/.env.production
index 427b973..ed8a601 100644
--- a/.env.production
+++ b/.env.production
@@ -1,7 +1,7 @@
 NODE_ENV = production
 
 # 页面标题
-VITE_APP_TITLE = 计量业务系统
+VITE_APP_TITLE = 标题
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
 VITE_APP_API_BASEURL = http://XXXXXXX:XXXXXXX
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
diff --git a/src/api/system/process.ts b/src/api/system/process.ts
new file mode 100644
index 0000000..c2d4419
--- /dev/null
+++ b/src/api/system/process.ts
@@ -0,0 +1,123 @@
+// 流程管理接口
+import request from '../index'
+// import type { IlistQuery } from '@/views/system/process/process'
+const prefix = '/system/flow'
+
+// 列表
+export function getProcessList(data: { offset: number; limit: number }) {
+  return request({
+    url: `${prefix}/listPage?offset=${data.offset}&limit=${data.limit}`,
+    method: 'post',
+    data,
+  })
+}
+
+// 删除
+export function delProcessList(id: string) {
+  const param = {
+    deployId: id,
+  }
+  return request({
+    url: `${prefix}/delete`,
+    method: 'post',
+    data: param,
+  })
+}
+// 废止
+export function updateState(id: string, state: number) {
+  const param = {
+    deployId: id,
+    state,
+  }
+  return request({
+    url: `${prefix}/updateState`,
+    method: 'post',
+    data: param,
+  })
+}
+
+// 加载流程定义
+export function unloadProcess(params: Object) {
+  const param = {
+    _value: params,
+  }
+  return request({
+    url: `${prefix}/jsonToBpmn`,
+    method: 'post',
+    data: param,
+  })
+}
+
+// 流程定义编辑
+export function editProcess(params: Object) {
+  const param = {
+    _value: params,
+  }
+  return request({
+    url: `${prefix}/update`,
+    method: 'post',
+    data: param,
+  })
+}
+
+// 新建流程
+export function addProcess(params: Object) {
+  const param = {
+    _value: params,
+  }
+  return request({
+    url: `${prefix}/jsonToBpmn`,
+    method: 'post',
+    data: param,
+  })
+}
+
+// 获取流程定义详情
+export function getProcessDetail(formId: string) {
+  const param = {
+    formId,
+  }
+  return request({
+    url: `${prefix}/detail`,
+    method: 'post',
+    data: param,
+  })
+}
+
+// 获取关联业务列表
+export function getBusinessList() {
+  return request({
+    url: `${prefix}/flowFormList`,
+    method: 'get',
+  })
+}
+
+// 获取发起人的主管层级数
+export function getDirectorLevel(userId: number | string) {
+  return request({
+    url: `${prefix}/directorLevel`,
+    method: 'get',
+    params: { userId },
+  })
+}
+
+// 导出列表
+export function exportProcessList(data: {
+  deploymentId: string
+  suspensionState: string
+  number: string
+  name: string
+  business: string
+  person: string
+  beginTime: string
+  endTime: string
+  status: string
+  ids: string[]
+}) {
+  return request({
+    url: `${prefix}/listExport`,
+    method: 'post',
+    responseType: 'blob',
+    data,
+  })
+}
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index c129719..d6d1b71 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -154,6 +154,69 @@
     ],
   },
   {
+    path: '/process',
+    component: Layout,
+    redirect: '/process/list',
+    name: 'Process',
+    meta: {
+      title: '流程管理',
+      icon: 'ep:key',
+      auth: '/sys/process',
+    },
+    children: [
+      {
+        path: 'list',
+        name: 'ProcessList',
+        component: () => import('@/views/system/process/process.vue'),
+        meta: {
+          title: '流程管理',
+          icon: 'ep:key',
+          auth: '/sys/process',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/process',
+        },
+      },
+      {
+        path: 'edit',
+        name: 'ProcessListEdit',
+        component: () => import('@/views/system/process/editProcess.vue'),
+        meta: {
+          title: '流程管理',
+          icon: 'ep:key',
+          auth: '/sys/process',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/process/list',
+        },
+      },
+      {
+        path: 'detail',
+        name: 'ProcessListDetail',
+        component: () => import('@/views/system/process/detailProcess.vue'),
+        meta: {
+          title: '流程管理',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/process/list',
+        },
+      },
+      {
+        path: 'add',
+        name: 'ProcessListAdd',
+        component: () => import('@/views/system/process/addProcess.vue'),
+        meta: {
+          title: '流程管理',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/process/list',
+        },
+      },
+    ],
+  },
+  {
     path: '/tenant',
     component: Layout,
     redirect: '/tenant/list',
diff --git a/src/views/setting.vue b/src/views/setting.vue
new file mode 100644
index 0000000..2a00bf3
--- /dev/null
+++ b/src/views/setting.vue
@@ -0,0 +1,321 @@
+<script setup lang="ts" name="Setting">
+import { ElLoading, ElMessage } from 'element-plus'
+import { defineExpose, nextTick, onMounted, ref } from 'vue'
+import useWorkFlowStore from '@/store/modules/workFlow'
+import errorDialog from '@/components/dialog/errorDialog.vue'
+import approverDrawer from '@/components/drawer/approverDrawer.vue'
+import copyerDrawer from '@/components/drawer/copyerDrawer.vue'
+import conditionDrawer from '@/components/drawer/conditionDrawer.vue'
+import { addProcess, editProcess, getDirectorLevel, getProcessDetail } from '@/api/system/process'
+import userStore from '@/store/modules/user'
+import type { ITipList, IworkFlowDef } from '@/views/system/process/process'
+const props = defineProps({
+  allowEditNode: {
+    type: Boolean,
+    default: true,
+  },
+  getRowData: {
+    type: Object,
+    default: () => {},
+  },
+  selectFormId: String,
+  isAddProcess: {
+    type: Boolean,
+    default: false,
+  },
+})
+const emits = defineEmits(['createProcessSuccess', 'notice'])
+const processConfig = ref({}) as any
+
+const user = userStore()
+const workFlowStore = useWorkFlowStore()
+const tipList = ref<ITipList[]>([]) // 统计空节点的数组
+const tipVisible = ref(false) // 控制提示空节点对话框显隐
+const nowVal = ref(100)
+const nodeConfig = ref({})
+const workFlowDef = ref<IworkFlowDef>({
+  name: '审批流程',
+})
+const flowPermission = ref([])
+const directorMaxLevel = ref(0)
+
+// 初始化--请求流程图详细信息
+const initDetail = async (formid: string) => {
+  const res = await getProcessDetail(formid)
+  return res.data
+}
+onMounted(async () => {
+  let max = 0 // 审批主管最大层级
+
+  // 获取此用户的审批主管的最大层级
+  getDirectorLevel(user.id).then((res) => {
+    max = res.data.level
+  })
+  window.sessionStorage.setItem('maxLevel', `${max}`)
+  nextTick(async () => {
+    let data
+    console.log('=====', props.selectFormId)
+    if (!props.isAddProcess && props.selectFormId) { // 非新建流程--调流程详情接口
+      console.log('获取流程详情')
+      data = await initDetail(props.selectFormId)
+    }
+    else { // 新建流程
+      data = {
+        tableId: 1,
+        workFlowDef: {
+          name: '审批流程',
+        },
+        directorMaxLevel: max,
+        flowPermission: [],
+        nodeConfig: {
+          nodeName: '发起人',
+          type: 0,
+          priorityLevel: '',
+          settype: '',
+          selectMode: '',
+          selectRange: '',
+          directorLevel: '',
+          examineMode: '',
+          noHanderAction: '',
+          examineEndDirectorLevel: '',
+          ccSelfSelectFlag: '',
+          conditionList: [],
+          nodeUserList: [],
+          conditionNodes: [],
+        },
+      }
+    }
+    processConfig.value = data // 流程设置
+    const {
+      nodeConfig: nodes, // 节点设置
+      flowPermission: flows, // 发起人
+      workFlowDef: works, // 流程基本信息
+      tableId,
+    } = data
+    nodeConfig.value = nodes // 节点配置
+    flowPermission.value = flows // 发起人
+    directorMaxLevel.value = max // 用户主管最大层级数
+    workFlowDef.value = works // 流程基本信息
+    console.log('9090909090909090', workFlowDef.value.decisionItem)
+
+    window.sessionStorage.setItem('decisionItem', `${workFlowDef.value.decisionItem}`)
+    window.sessionStorage.setItem('noticeStarter', `${workFlowDef.value.noticeStarter}`)
+    console.log('在这里获得了这条数据的可选决策项和是否通知发起人')
+    emits('notice') // 通知可选决策项和是否通知发起人已获得数据
+    workFlowStore.setTableId(tableId)
+  })
+})
+
+// 统计空节点（红色感叹号）
+const reErr = ({ childNode }: any) => {
+  if (childNode) {
+    const { type, error, nodeName, conditionNodes } = childNode
+    if (type == 1 || type == 2) {
+      if (error) {
+        tipList.value.push({
+          name: nodeName,
+          type: ['', '审核人', '抄送人'][type],
+        })
+      }
+      reErr(childNode)
+    }
+    else if (type == 3) {
+      reErr(childNode)
+    }
+    else if (type == 4) {
+      reErr(childNode)
+      for (let i = 0; i < conditionNodes.length; i++) {
+        if (conditionNodes[i].error) {
+          tipList.value.push({ name: conditionNodes[i].nodeName, type: '条件' })
+        }
+        reErr(conditionNodes[i])
+      }
+    }
+  }
+  else {
+    childNode = null
+  }
+}
+
+// 保存流程图
+const saveSet = async (type: string, getRowData: any) => {
+  if (type === 'edit') { // 编辑
+    console.log('000000000', getRowData)
+
+    processConfig.value.formId = props.getRowData.formId // 已有formid
+    processConfig.value.formName = getRowData.business // 表单名称、关联业务
+    processConfig.value.formDesc = getRowData.formDesc // 描述
+    processConfig.value.formContent = getRowData.formDesc // 描述
+    processConfig.value.workFlowDef.name = getRowData.name // 流程名称
+    processConfig.value.workFlowDef.flowKey = props.getRowData.flowKey
+    processConfig.value.workFlowDef.directorId = props.getRowData.directorId
+  }
+  else { // 新建
+    processConfig.value.formId = props.getRowData.formID
+    processConfig.value.formName = props.getRowData.business
+    processConfig.value.formDesc = props.getRowData.desc
+    processConfig.value.formContent = props.getRowData.desc
+    processConfig.value.workFlowDef.directorId = user.id
+    processConfig.value.workFlowDef.name = props.getRowData.name // 流程名称
+  }
+  const decisionItem = window.sessionStorage.getItem('decisionItem')
+  const noticeStarter = window.sessionStorage.getItem('noticeStarter')
+  if (decisionItem) {
+    processConfig.value.workFlowDef.decisionItem = parseInt(decisionItem) // 可选决策项
+  }
+  if (noticeStarter) {
+    processConfig.value.workFlowDef.noticeStarter = parseInt(noticeStarter) // 审批结果通知发起人
+  }
+
+  // workFlowStore.setIsTried(true)
+  tipList.value = []
+  reErr(processConfig.value.nodeConfig) // 统计空节点
+  if (tipList.value.length != 0) { // 存在空节点
+    let approverCount = 0
+    let conditonCount = 0
+    tipList.value.forEach((item: { type: string }) => {
+      if (item.type === '审核人') {
+        approverCount += 1
+      }
+      else if (item.type === '条件') {
+        conditonCount += 1
+      }
+    })
+    workFlowStore.conditonErrorCount = conditonCount // 存入store
+    workFlowStore.approverErrorCount = approverCount // 存入store
+    tipVisible.value = true // 显示空节点提示框
+    return
+  }
+
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+
+  if (!props.isAddProcess) {
+    processConfig.value.flowPermission = flowPermission.value // 编辑时不允许改发起人
+    const res = await editProcess(processConfig.value)
+    if (res.code == 200) {
+      ElMessage.success('编辑流程成功')
+    }
+  }
+  else {
+    processConfig.value.flowPermission = { // 新建时发起人是此时的用户
+      name: user.name, // 用户名
+      targetId: user.id, // 用户id
+      type: 1, // 成员
+    }
+
+    addProcess(processConfig.value).then((res) => {
+      if (res.code === 200) {
+        ElMessage.success('创建流程成功')
+        emits('createProcessSuccess') // 返回列表页
+      }
+    }).catch(() => { // 流程异常情况: 所填写的formID已经存在
+      // emits('createProcessSuccess') // 返回列表页
+    })
+  }
+  loading.close()
+}
+defineExpose({
+  saveSet, initDetail,
+})
+
+const zoomSize = (type: number) => {
+  if (type == 1) {
+    if (nowVal.value == 50) {
+      return
+    }
+    nowVal.value -= 10
+  }
+  else {
+    if (nowVal.value == 300) {
+      return
+    }
+    nowVal.value += 10
+  }
+}
+
+// 改变空节点错误对话框显隐
+const changeTipVisible = (val: boolean) => {
+  tipVisible.value = false
+}
+</script>
+
+<template>
+  <div class="workFlow-setting">
+    <div class="fd-nav-content">
+      <section class="dingflow-design">
+        <!-- <div class="zoom">
+          <div class="zoom-out" :class="nowVal === 50 && 'disabled'" @click="zoomSize(1)" />
+          <span>{{ nowVal }}%</span>
+          <div class="zoom-in" :class="nowVal === 300 && 'disabled'" @click="zoomSize(2)" />
+        </div> -->
+        <!-- 可编辑 -->
+        <div v-if="allowEditNode" class="box-scale" :style="`transform: scale(${nowVal / 100});`">
+          <node-wrap v-if="props.allowEditNode" v-model:nodeConfig="nodeConfig" v-model:flowPermission="flowPermission" />
+          <div class="end-node">
+            <p>结束</p>
+          </div>
+        </div>
+        <!-- 不可编辑 -->
+        <div v-if="!allowEditNode" class="box-scale" :style="`transform: scale(${nowVal / 100});`">
+          <node-wrap-ban :node-config="nodeConfig" :flow-permission="flowPermission" />
+          <div class="end-node">
+            <p>结束</p>
+          </div>
+        </div>
+      </section>
+    </div>
+    <error-dialog v-model:visible="tipVisible" :list="tipList" @changeTipVisible="changeTipVisible" />
+    <approver-drawer :director-max-level="directorMaxLevel" />
+    <copyer-drawer />
+    <condition-drawer />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.workFlow-setting {
+  margin-top: 10px;
+
+  .close-button {
+    display: flex;
+    justify-content: flex-end;
+    margin: 20px;
+  }
+
+  .box-scale {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  // .end-node-circle {
+  .end-node {
+    justify-content: center;
+    flex-direction: column;
+    align-content: center;
+
+    p {
+      width: 280px;
+      height: 40px;
+      line-height: 40px;
+      color: #fff;
+      text-align: center;
+      background-color: #8cafff;
+      border-radius: 4px;
+      font-size: 14px;
+      margin: 0;
+    }
+  }
+}
+
+// }
+</style>
+
+<style>
+@import "../css/workflow.css";
+
+.error-modal-list {
+  width: 455px;
+}
+</style>

diff --git a/.env.development b/.env.development
index 54c38a4..1ef3600 100644
--- a/.env.development
+++ b/.env.development
@@ -2,6 +2,7 @@
 VITE_APP_TITLE = 标题
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
 VITE_APP_API_BASEURL = http://XXXXXXX:XXXXXXX
+
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VITE_APP_DEBUG_TOOL =
 
diff --git a/.env.production b/.env.production
index 427b973..ed8a601 100644
--- a/.env.production
+++ b/.env.production
@@ -1,7 +1,7 @@
 NODE_ENV = production
 
 # 页面标题
-VITE_APP_TITLE = 计量业务系统
+VITE_APP_TITLE = 标题
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
 VITE_APP_API_BASEURL = http://XXXXXXX:XXXXXXX
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
diff --git a/src/api/system/process.ts b/src/api/system/process.ts
new file mode 100644
index 0000000..c2d4419
--- /dev/null
+++ b/src/api/system/process.ts
@@ -0,0 +1,123 @@
+// 流程管理接口
+import request from '../index'
+// import type { IlistQuery } from '@/views/system/process/process'
+const prefix = '/system/flow'
+
+// 列表
+export function getProcessList(data: { offset: number; limit: number }) {
+  return request({
+    url: `${prefix}/listPage?offset=${data.offset}&limit=${data.limit}`,
+    method: 'post',
+    data,
+  })
+}
+
+// 删除
+export function delProcessList(id: string) {
+  const param = {
+    deployId: id,
+  }
+  return request({
+    url: `${prefix}/delete`,
+    method: 'post',
+    data: param,
+  })
+}
+// 废止
+export function updateState(id: string, state: number) {
+  const param = {
+    deployId: id,
+    state,
+  }
+  return request({
+    url: `${prefix}/updateState`,
+    method: 'post',
+    data: param,
+  })
+}
+
+// 加载流程定义
+export function unloadProcess(params: Object) {
+  const param = {
+    _value: params,
+  }
+  return request({
+    url: `${prefix}/jsonToBpmn`,
+    method: 'post',
+    data: param,
+  })
+}
+
+// 流程定义编辑
+export function editProcess(params: Object) {
+  const param = {
+    _value: params,
+  }
+  return request({
+    url: `${prefix}/update`,
+    method: 'post',
+    data: param,
+  })
+}
+
+// 新建流程
+export function addProcess(params: Object) {
+  const param = {
+    _value: params,
+  }
+  return request({
+    url: `${prefix}/jsonToBpmn`,
+    method: 'post',
+    data: param,
+  })
+}
+
+// 获取流程定义详情
+export function getProcessDetail(formId: string) {
+  const param = {
+    formId,
+  }
+  return request({
+    url: `${prefix}/detail`,
+    method: 'post',
+    data: param,
+  })
+}
+
+// 获取关联业务列表
+export function getBusinessList() {
+  return request({
+    url: `${prefix}/flowFormList`,
+    method: 'get',
+  })
+}
+
+// 获取发起人的主管层级数
+export function getDirectorLevel(userId: number | string) {
+  return request({
+    url: `${prefix}/directorLevel`,
+    method: 'get',
+    params: { userId },
+  })
+}
+
+// 导出列表
+export function exportProcessList(data: {
+  deploymentId: string
+  suspensionState: string
+  number: string
+  name: string
+  business: string
+  person: string
+  beginTime: string
+  endTime: string
+  status: string
+  ids: string[]
+}) {
+  return request({
+    url: `${prefix}/listExport`,
+    method: 'post',
+    responseType: 'blob',
+    data,
+  })
+}
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index c129719..d6d1b71 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -154,6 +154,69 @@
     ],
   },
   {
+    path: '/process',
+    component: Layout,
+    redirect: '/process/list',
+    name: 'Process',
+    meta: {
+      title: '流程管理',
+      icon: 'ep:key',
+      auth: '/sys/process',
+    },
+    children: [
+      {
+        path: 'list',
+        name: 'ProcessList',
+        component: () => import('@/views/system/process/process.vue'),
+        meta: {
+          title: '流程管理',
+          icon: 'ep:key',
+          auth: '/sys/process',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/process',
+        },
+      },
+      {
+        path: 'edit',
+        name: 'ProcessListEdit',
+        component: () => import('@/views/system/process/editProcess.vue'),
+        meta: {
+          title: '流程管理',
+          icon: 'ep:key',
+          auth: '/sys/process',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/process/list',
+        },
+      },
+      {
+        path: 'detail',
+        name: 'ProcessListDetail',
+        component: () => import('@/views/system/process/detailProcess.vue'),
+        meta: {
+          title: '流程管理',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/process/list',
+        },
+      },
+      {
+        path: 'add',
+        name: 'ProcessListAdd',
+        component: () => import('@/views/system/process/addProcess.vue'),
+        meta: {
+          title: '流程管理',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/process/list',
+        },
+      },
+    ],
+  },
+  {
     path: '/tenant',
     component: Layout,
     redirect: '/tenant/list',
diff --git a/src/views/setting.vue b/src/views/setting.vue
new file mode 100644
index 0000000..2a00bf3
--- /dev/null
+++ b/src/views/setting.vue
@@ -0,0 +1,321 @@
+<script setup lang="ts" name="Setting">
+import { ElLoading, ElMessage } from 'element-plus'
+import { defineExpose, nextTick, onMounted, ref } from 'vue'
+import useWorkFlowStore from '@/store/modules/workFlow'
+import errorDialog from '@/components/dialog/errorDialog.vue'
+import approverDrawer from '@/components/drawer/approverDrawer.vue'
+import copyerDrawer from '@/components/drawer/copyerDrawer.vue'
+import conditionDrawer from '@/components/drawer/conditionDrawer.vue'
+import { addProcess, editProcess, getDirectorLevel, getProcessDetail } from '@/api/system/process'
+import userStore from '@/store/modules/user'
+import type { ITipList, IworkFlowDef } from '@/views/system/process/process'
+const props = defineProps({
+  allowEditNode: {
+    type: Boolean,
+    default: true,
+  },
+  getRowData: {
+    type: Object,
+    default: () => {},
+  },
+  selectFormId: String,
+  isAddProcess: {
+    type: Boolean,
+    default: false,
+  },
+})
+const emits = defineEmits(['createProcessSuccess', 'notice'])
+const processConfig = ref({}) as any
+
+const user = userStore()
+const workFlowStore = useWorkFlowStore()
+const tipList = ref<ITipList[]>([]) // 统计空节点的数组
+const tipVisible = ref(false) // 控制提示空节点对话框显隐
+const nowVal = ref(100)
+const nodeConfig = ref({})
+const workFlowDef = ref<IworkFlowDef>({
+  name: '审批流程',
+})
+const flowPermission = ref([])
+const directorMaxLevel = ref(0)
+
+// 初始化--请求流程图详细信息
+const initDetail = async (formid: string) => {
+  const res = await getProcessDetail(formid)
+  return res.data
+}
+onMounted(async () => {
+  let max = 0 // 审批主管最大层级
+
+  // 获取此用户的审批主管的最大层级
+  getDirectorLevel(user.id).then((res) => {
+    max = res.data.level
+  })
+  window.sessionStorage.setItem('maxLevel', `${max}`)
+  nextTick(async () => {
+    let data
+    console.log('=====', props.selectFormId)
+    if (!props.isAddProcess && props.selectFormId) { // 非新建流程--调流程详情接口
+      console.log('获取流程详情')
+      data = await initDetail(props.selectFormId)
+    }
+    else { // 新建流程
+      data = {
+        tableId: 1,
+        workFlowDef: {
+          name: '审批流程',
+        },
+        directorMaxLevel: max,
+        flowPermission: [],
+        nodeConfig: {
+          nodeName: '发起人',
+          type: 0,
+          priorityLevel: '',
+          settype: '',
+          selectMode: '',
+          selectRange: '',
+          directorLevel: '',
+          examineMode: '',
+          noHanderAction: '',
+          examineEndDirectorLevel: '',
+          ccSelfSelectFlag: '',
+          conditionList: [],
+          nodeUserList: [],
+          conditionNodes: [],
+        },
+      }
+    }
+    processConfig.value = data // 流程设置
+    const {
+      nodeConfig: nodes, // 节点设置
+      flowPermission: flows, // 发起人
+      workFlowDef: works, // 流程基本信息
+      tableId,
+    } = data
+    nodeConfig.value = nodes // 节点配置
+    flowPermission.value = flows // 发起人
+    directorMaxLevel.value = max // 用户主管最大层级数
+    workFlowDef.value = works // 流程基本信息
+    console.log('9090909090909090', workFlowDef.value.decisionItem)
+
+    window.sessionStorage.setItem('decisionItem', `${workFlowDef.value.decisionItem}`)
+    window.sessionStorage.setItem('noticeStarter', `${workFlowDef.value.noticeStarter}`)
+    console.log('在这里获得了这条数据的可选决策项和是否通知发起人')
+    emits('notice') // 通知可选决策项和是否通知发起人已获得数据
+    workFlowStore.setTableId(tableId)
+  })
+})
+
+// 统计空节点（红色感叹号）
+const reErr = ({ childNode }: any) => {
+  if (childNode) {
+    const { type, error, nodeName, conditionNodes } = childNode
+    if (type == 1 || type == 2) {
+      if (error) {
+        tipList.value.push({
+          name: nodeName,
+          type: ['', '审核人', '抄送人'][type],
+        })
+      }
+      reErr(childNode)
+    }
+    else if (type == 3) {
+      reErr(childNode)
+    }
+    else if (type == 4) {
+      reErr(childNode)
+      for (let i = 0; i < conditionNodes.length; i++) {
+        if (conditionNodes[i].error) {
+          tipList.value.push({ name: conditionNodes[i].nodeName, type: '条件' })
+        }
+        reErr(conditionNodes[i])
+      }
+    }
+  }
+  else {
+    childNode = null
+  }
+}
+
+// 保存流程图
+const saveSet = async (type: string, getRowData: any) => {
+  if (type === 'edit') { // 编辑
+    console.log('000000000', getRowData)
+
+    processConfig.value.formId = props.getRowData.formId // 已有formid
+    processConfig.value.formName = getRowData.business // 表单名称、关联业务
+    processConfig.value.formDesc = getRowData.formDesc // 描述
+    processConfig.value.formContent = getRowData.formDesc // 描述
+    processConfig.value.workFlowDef.name = getRowData.name // 流程名称
+    processConfig.value.workFlowDef.flowKey = props.getRowData.flowKey
+    processConfig.value.workFlowDef.directorId = props.getRowData.directorId
+  }
+  else { // 新建
+    processConfig.value.formId = props.getRowData.formID
+    processConfig.value.formName = props.getRowData.business
+    processConfig.value.formDesc = props.getRowData.desc
+    processConfig.value.formContent = props.getRowData.desc
+    processConfig.value.workFlowDef.directorId = user.id
+    processConfig.value.workFlowDef.name = props.getRowData.name // 流程名称
+  }
+  const decisionItem = window.sessionStorage.getItem('decisionItem')
+  const noticeStarter = window.sessionStorage.getItem('noticeStarter')
+  if (decisionItem) {
+    processConfig.value.workFlowDef.decisionItem = parseInt(decisionItem) // 可选决策项
+  }
+  if (noticeStarter) {
+    processConfig.value.workFlowDef.noticeStarter = parseInt(noticeStarter) // 审批结果通知发起人
+  }
+
+  // workFlowStore.setIsTried(true)
+  tipList.value = []
+  reErr(processConfig.value.nodeConfig) // 统计空节点
+  if (tipList.value.length != 0) { // 存在空节点
+    let approverCount = 0
+    let conditonCount = 0
+    tipList.value.forEach((item: { type: string }) => {
+      if (item.type === '审核人') {
+        approverCount += 1
+      }
+      else if (item.type === '条件') {
+        conditonCount += 1
+      }
+    })
+    workFlowStore.conditonErrorCount = conditonCount // 存入store
+    workFlowStore.approverErrorCount = approverCount // 存入store
+    tipVisible.value = true // 显示空节点提示框
+    return
+  }
+
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+
+  if (!props.isAddProcess) {
+    processConfig.value.flowPermission = flowPermission.value // 编辑时不允许改发起人
+    const res = await editProcess(processConfig.value)
+    if (res.code == 200) {
+      ElMessage.success('编辑流程成功')
+    }
+  }
+  else {
+    processConfig.value.flowPermission = { // 新建时发起人是此时的用户
+      name: user.name, // 用户名
+      targetId: user.id, // 用户id
+      type: 1, // 成员
+    }
+
+    addProcess(processConfig.value).then((res) => {
+      if (res.code === 200) {
+        ElMessage.success('创建流程成功')
+        emits('createProcessSuccess') // 返回列表页
+      }
+    }).catch(() => { // 流程异常情况: 所填写的formID已经存在
+      // emits('createProcessSuccess') // 返回列表页
+    })
+  }
+  loading.close()
+}
+defineExpose({
+  saveSet, initDetail,
+})
+
+const zoomSize = (type: number) => {
+  if (type == 1) {
+    if (nowVal.value == 50) {
+      return
+    }
+    nowVal.value -= 10
+  }
+  else {
+    if (nowVal.value == 300) {
+      return
+    }
+    nowVal.value += 10
+  }
+}
+
+// 改变空节点错误对话框显隐
+const changeTipVisible = (val: boolean) => {
+  tipVisible.value = false
+}
+</script>
+
+<template>
+  <div class="workFlow-setting">
+    <div class="fd-nav-content">
+      <section class="dingflow-design">
+        <!-- <div class="zoom">
+          <div class="zoom-out" :class="nowVal === 50 && 'disabled'" @click="zoomSize(1)" />
+          <span>{{ nowVal }}%</span>
+          <div class="zoom-in" :class="nowVal === 300 && 'disabled'" @click="zoomSize(2)" />
+        </div> -->
+        <!-- 可编辑 -->
+        <div v-if="allowEditNode" class="box-scale" :style="`transform: scale(${nowVal / 100});`">
+          <node-wrap v-if="props.allowEditNode" v-model:nodeConfig="nodeConfig" v-model:flowPermission="flowPermission" />
+          <div class="end-node">
+            <p>结束</p>
+          </div>
+        </div>
+        <!-- 不可编辑 -->
+        <div v-if="!allowEditNode" class="box-scale" :style="`transform: scale(${nowVal / 100});`">
+          <node-wrap-ban :node-config="nodeConfig" :flow-permission="flowPermission" />
+          <div class="end-node">
+            <p>结束</p>
+          </div>
+        </div>
+      </section>
+    </div>
+    <error-dialog v-model:visible="tipVisible" :list="tipList" @changeTipVisible="changeTipVisible" />
+    <approver-drawer :director-max-level="directorMaxLevel" />
+    <copyer-drawer />
+    <condition-drawer />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.workFlow-setting {
+  margin-top: 10px;
+
+  .close-button {
+    display: flex;
+    justify-content: flex-end;
+    margin: 20px;
+  }
+
+  .box-scale {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  // .end-node-circle {
+  .end-node {
+    justify-content: center;
+    flex-direction: column;
+    align-content: center;
+
+    p {
+      width: 280px;
+      height: 40px;
+      line-height: 40px;
+      color: #fff;
+      text-align: center;
+      background-color: #8cafff;
+      border-radius: 4px;
+      font-size: 14px;
+      margin: 0;
+    }
+  }
+}
+
+// }
+</style>
+
+<style>
+@import "../css/workflow.css";
+
+.error-modal-list {
+  width: 455px;
+}
+</style>
diff --git a/src/views/system/process/addProcess.vue b/src/views/system/process/addProcess.vue
new file mode 100644
index 0000000..ad5d290
--- /dev/null
+++ b/src/views/system/process/addProcess.vue
@@ -0,0 +1,234 @@
+<!-- 新建流程页面 -->
+<script lang="ts" setup name="EditProcess">
+import { reactive, ref } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
+import { useRoute, useRouter } from 'vue-router'
+import type { Ref } from 'vue'
+import Setting from '../../setting.vue'
+import type { Iform, dictType } from './process'
+import { getDictByCode } from '@/api/system/dict'
+
+const emits = defineEmits(['close'])
+const processSetting = ref()
+const selectFormId = ref('') // formid
+const ruleFormRef = ref<FormInstance>()
+const form: Ref<Iform> = ref({
+  number: '', // 编号
+  name: '', // 名称
+  business: '', // 关联业务
+  formID: '', // formID
+  desc: '', // 流程描述
+  decisionItem: '', // 可选决策项 1同意驳回拒绝2同意驳回3同意拒绝
+  noticeStarter: '', // 审批结果是否通知发起人
+})
+const decisionItemList = ref<dictType[]>([]) // 可选决策项
+const noticeStarterList = ref<dictType[]>([]) // 可选决策项
+
+// 表单校验
+const rules = reactive<FormRules>({
+  name: [
+    {
+      required: true,
+      message: '流程名称必填',
+      trigger: 'blur',
+    },
+  ],
+  business: [
+    {
+      required: true,
+      message: '关联业务必填',
+      trigger: 'blur',
+    },
+  ],
+  formID: [
+    {
+      required: true,
+      message: 'formID必填',
+      trigger: 'blur',
+    },
+  ],
+  desc: [
+    {
+      required: true,
+      message: '流程描述必填',
+      trigger: 'blur',
+    },
+  ],
+  decisionItem: [
+    {
+      required: true,
+      message: '可选决策项必填',
+      trigger: 'change',
+    },
+  ],
+  noticeStarter: [
+    {
+      required: true,
+      message: '审批结果是否通知发起人必填',
+      trigger: 'change',
+    },
+  ],
+})
+
+// 获取字典值
+async function getDict() {
+  // 可选决策项
+  const response = await getDictByCode('decisionItem')
+  decisionItemList.value = response.data
+
+  // 审批结果是否通知发起人
+  const res = await getDictByCode('noticeStarter')
+  noticeStarterList.value = res.data
+}
+
+const $router = useRouter()
+// 关闭
+const close = () => {
+  $router.back()
+}
+
+// 保存
+const save = async (formEl: FormInstance | undefined) => {
+  if (!formEl) { return }
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      window.sessionStorage.setItem('decisionItem', `${form.value.decisionItem}`)
+      window.sessionStorage.setItem('noticeStarter', `${form.value.noticeStarter}`)
+      // 调setting组件的保存
+      processSetting.value.saveSet()
+    }
+  })
+}
+
+// 监听流程组件--新建流程成功
+const createProcessSuccess = () => {
+  close()
+}
+onMounted(async () => {
+  await getDict()
+})
+</script>
+
+<template>
+  <div class="edit-process">
+    <app-container>
+      <detail-page title="流程管理-新建">
+        <template #btns>
+          <el-button type="primary" @click="save(ruleFormRef)">
+            保存
+          </el-button>
+          <el-button type="info" @click="close">
+            关闭
+          </el-button>
+        </template>
+        <el-form ref="ruleFormRef" :model="form" label-width="180px" :rules="rules">
+          <el-row :gutter="24">
+            <el-col :span="8">
+              <el-form-item label="流程编号:">
+                <el-input v-model="form.number" disabled placeholder="系统自动生成" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="流程名称:" prop="name">
+                <el-input v-model="form.name" placeholder="请输入流程名称" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="formID:" prop="formID">
+                <el-input v-model="form.formID" placeholder="请输入formID" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="关联业务:" prop="business">
+                <el-input v-model="form.business" placeholder="请输入关联业务" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="可选决策项:" prop="decisionItem">
+                <el-select
+                  v-model="form.decisionItem"
+                  clearable
+                  placeholder="请选择可选决策项"
+                  size="default"
+                  style="width: 100%;"
+                >
+                  <el-option
+                    v-for="item in decisionItemList"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="审批结果是否通知发起人:" prop="noticeStarter">
+                <el-select
+                  v-model="form.noticeStarter"
+                  clearable
+                  placeholder="请选择是否通知发起人"
+                  size="default"
+                  style="width: 100%;"
+                >
+                  <el-option
+                    v-for="item in noticeStarterList"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="16">
+              <el-form-item label="流程描述" prop="desc">
+                <el-input v-model="form.desc" type="textarea" autosize placeholder="请输入流程描述" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </detail-page>
+
+      <detail-block title="流程配置" />
+      <setting
+        ref="processSetting"
+        :is-add-process="true"
+        :get-row-data="form"
+        :select-form-id="selectFormId"
+        @createProcessSuccess="createProcessSuccess"
+      />
+    </app-container>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .edit-process {
+    width: 100%;
+
+    .title {
+      margin: 0 0 20px;
+      font-weight: 600;
+    }
+
+    .edit {
+      width: 100%;
+      padding: 12px;
+      background-color: #fff;
+      border-radius: 7px;
+      margin: 0 0 20px;
+
+      .button-area {
+        width: 100%;
+        display: flex;
+        justify-content: flex-end;
+        margin-bottom: 20px;
+      }
+    }
+
+    .set {
+      width: 100%;
+      background-color: #fff;
+      border-radius: 7px;
+      margin: 20px 0;
+    }
+  }
+</style>

diff --git a/.env.development b/.env.development
index 54c38a4..1ef3600 100644
--- a/.env.development
+++ b/.env.development
@@ -2,6 +2,7 @@
 VITE_APP_TITLE = 标题
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
 VITE_APP_API_BASEURL = http://XXXXXXX:XXXXXXX
+
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VITE_APP_DEBUG_TOOL =
 
diff --git a/.env.production b/.env.production
index 427b973..ed8a601 100644
--- a/.env.production
+++ b/.env.production
@@ -1,7 +1,7 @@
 NODE_ENV = production
 
 # 页面标题
-VITE_APP_TITLE = 计量业务系统
+VITE_APP_TITLE = 标题
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
 VITE_APP_API_BASEURL = http://XXXXXXX:XXXXXXX
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
diff --git a/src/api/system/process.ts b/src/api/system/process.ts
new file mode 100644
index 0000000..c2d4419
--- /dev/null
+++ b/src/api/system/process.ts
@@ -0,0 +1,123 @@
+// 流程管理接口
+import request from '../index'
+// import type { IlistQuery } from '@/views/system/process/process'
+const prefix = '/system/flow'
+
+// 列表
+export function getProcessList(data: { offset: number; limit: number }) {
+  return request({
+    url: `${prefix}/listPage?offset=${data.offset}&limit=${data.limit}`,
+    method: 'post',
+    data,
+  })
+}
+
+// 删除
+export function delProcessList(id: string) {
+  const param = {
+    deployId: id,
+  }
+  return request({
+    url: `${prefix}/delete`,
+    method: 'post',
+    data: param,
+  })
+}
+// 废止
+export function updateState(id: string, state: number) {
+  const param = {
+    deployId: id,
+    state,
+  }
+  return request({
+    url: `${prefix}/updateState`,
+    method: 'post',
+    data: param,
+  })
+}
+
+// 加载流程定义
+export function unloadProcess(params: Object) {
+  const param = {
+    _value: params,
+  }
+  return request({
+    url: `${prefix}/jsonToBpmn`,
+    method: 'post',
+    data: param,
+  })
+}
+
+// 流程定义编辑
+export function editProcess(params: Object) {
+  const param = {
+    _value: params,
+  }
+  return request({
+    url: `${prefix}/update`,
+    method: 'post',
+    data: param,
+  })
+}
+
+// 新建流程
+export function addProcess(params: Object) {
+  const param = {
+    _value: params,
+  }
+  return request({
+    url: `${prefix}/jsonToBpmn`,
+    method: 'post',
+    data: param,
+  })
+}
+
+// 获取流程定义详情
+export function getProcessDetail(formId: string) {
+  const param = {
+    formId,
+  }
+  return request({
+    url: `${prefix}/detail`,
+    method: 'post',
+    data: param,
+  })
+}
+
+// 获取关联业务列表
+export function getBusinessList() {
+  return request({
+    url: `${prefix}/flowFormList`,
+    method: 'get',
+  })
+}
+
+// 获取发起人的主管层级数
+export function getDirectorLevel(userId: number | string) {
+  return request({
+    url: `${prefix}/directorLevel`,
+    method: 'get',
+    params: { userId },
+  })
+}
+
+// 导出列表
+export function exportProcessList(data: {
+  deploymentId: string
+  suspensionState: string
+  number: string
+  name: string
+  business: string
+  person: string
+  beginTime: string
+  endTime: string
+  status: string
+  ids: string[]
+}) {
+  return request({
+    url: `${prefix}/listExport`,
+    method: 'post',
+    responseType: 'blob',
+    data,
+  })
+}
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index c129719..d6d1b71 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -154,6 +154,69 @@
     ],
   },
   {
+    path: '/process',
+    component: Layout,
+    redirect: '/process/list',
+    name: 'Process',
+    meta: {
+      title: '流程管理',
+      icon: 'ep:key',
+      auth: '/sys/process',
+    },
+    children: [
+      {
+        path: 'list',
+        name: 'ProcessList',
+        component: () => import('@/views/system/process/process.vue'),
+        meta: {
+          title: '流程管理',
+          icon: 'ep:key',
+          auth: '/sys/process',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/process',
+        },
+      },
+      {
+        path: 'edit',
+        name: 'ProcessListEdit',
+        component: () => import('@/views/system/process/editProcess.vue'),
+        meta: {
+          title: '流程管理',
+          icon: 'ep:key',
+          auth: '/sys/process',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/process/list',
+        },
+      },
+      {
+        path: 'detail',
+        name: 'ProcessListDetail',
+        component: () => import('@/views/system/process/detailProcess.vue'),
+        meta: {
+          title: '流程管理',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/process/list',
+        },
+      },
+      {
+        path: 'add',
+        name: 'ProcessListAdd',
+        component: () => import('@/views/system/process/addProcess.vue'),
+        meta: {
+          title: '流程管理',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/process/list',
+        },
+      },
+    ],
+  },
+  {
     path: '/tenant',
     component: Layout,
     redirect: '/tenant/list',
diff --git a/src/views/setting.vue b/src/views/setting.vue
new file mode 100644
index 0000000..2a00bf3
--- /dev/null
+++ b/src/views/setting.vue
@@ -0,0 +1,321 @@
+<script setup lang="ts" name="Setting">
+import { ElLoading, ElMessage } from 'element-plus'
+import { defineExpose, nextTick, onMounted, ref } from 'vue'
+import useWorkFlowStore from '@/store/modules/workFlow'
+import errorDialog from '@/components/dialog/errorDialog.vue'
+import approverDrawer from '@/components/drawer/approverDrawer.vue'
+import copyerDrawer from '@/components/drawer/copyerDrawer.vue'
+import conditionDrawer from '@/components/drawer/conditionDrawer.vue'
+import { addProcess, editProcess, getDirectorLevel, getProcessDetail } from '@/api/system/process'
+import userStore from '@/store/modules/user'
+import type { ITipList, IworkFlowDef } from '@/views/system/process/process'
+const props = defineProps({
+  allowEditNode: {
+    type: Boolean,
+    default: true,
+  },
+  getRowData: {
+    type: Object,
+    default: () => {},
+  },
+  selectFormId: String,
+  isAddProcess: {
+    type: Boolean,
+    default: false,
+  },
+})
+const emits = defineEmits(['createProcessSuccess', 'notice'])
+const processConfig = ref({}) as any
+
+const user = userStore()
+const workFlowStore = useWorkFlowStore()
+const tipList = ref<ITipList[]>([]) // 统计空节点的数组
+const tipVisible = ref(false) // 控制提示空节点对话框显隐
+const nowVal = ref(100)
+const nodeConfig = ref({})
+const workFlowDef = ref<IworkFlowDef>({
+  name: '审批流程',
+})
+const flowPermission = ref([])
+const directorMaxLevel = ref(0)
+
+// 初始化--请求流程图详细信息
+const initDetail = async (formid: string) => {
+  const res = await getProcessDetail(formid)
+  return res.data
+}
+onMounted(async () => {
+  let max = 0 // 审批主管最大层级
+
+  // 获取此用户的审批主管的最大层级
+  getDirectorLevel(user.id).then((res) => {
+    max = res.data.level
+  })
+  window.sessionStorage.setItem('maxLevel', `${max}`)
+  nextTick(async () => {
+    let data
+    console.log('=====', props.selectFormId)
+    if (!props.isAddProcess && props.selectFormId) { // 非新建流程--调流程详情接口
+      console.log('获取流程详情')
+      data = await initDetail(props.selectFormId)
+    }
+    else { // 新建流程
+      data = {
+        tableId: 1,
+        workFlowDef: {
+          name: '审批流程',
+        },
+        directorMaxLevel: max,
+        flowPermission: [],
+        nodeConfig: {
+          nodeName: '发起人',
+          type: 0,
+          priorityLevel: '',
+          settype: '',
+          selectMode: '',
+          selectRange: '',
+          directorLevel: '',
+          examineMode: '',
+          noHanderAction: '',
+          examineEndDirectorLevel: '',
+          ccSelfSelectFlag: '',
+          conditionList: [],
+          nodeUserList: [],
+          conditionNodes: [],
+        },
+      }
+    }
+    processConfig.value = data // 流程设置
+    const {
+      nodeConfig: nodes, // 节点设置
+      flowPermission: flows, // 发起人
+      workFlowDef: works, // 流程基本信息
+      tableId,
+    } = data
+    nodeConfig.value = nodes // 节点配置
+    flowPermission.value = flows // 发起人
+    directorMaxLevel.value = max // 用户主管最大层级数
+    workFlowDef.value = works // 流程基本信息
+    console.log('9090909090909090', workFlowDef.value.decisionItem)
+
+    window.sessionStorage.setItem('decisionItem', `${workFlowDef.value.decisionItem}`)
+    window.sessionStorage.setItem('noticeStarter', `${workFlowDef.value.noticeStarter}`)
+    console.log('在这里获得了这条数据的可选决策项和是否通知发起人')
+    emits('notice') // 通知可选决策项和是否通知发起人已获得数据
+    workFlowStore.setTableId(tableId)
+  })
+})
+
+// 统计空节点（红色感叹号）
+const reErr = ({ childNode }: any) => {
+  if (childNode) {
+    const { type, error, nodeName, conditionNodes } = childNode
+    if (type == 1 || type == 2) {
+      if (error) {
+        tipList.value.push({
+          name: nodeName,
+          type: ['', '审核人', '抄送人'][type],
+        })
+      }
+      reErr(childNode)
+    }
+    else if (type == 3) {
+      reErr(childNode)
+    }
+    else if (type == 4) {
+      reErr(childNode)
+      for (let i = 0; i < conditionNodes.length; i++) {
+        if (conditionNodes[i].error) {
+          tipList.value.push({ name: conditionNodes[i].nodeName, type: '条件' })
+        }
+        reErr(conditionNodes[i])
+      }
+    }
+  }
+  else {
+    childNode = null
+  }
+}
+
+// 保存流程图
+const saveSet = async (type: string, getRowData: any) => {
+  if (type === 'edit') { // 编辑
+    console.log('000000000', getRowData)
+
+    processConfig.value.formId = props.getRowData.formId // 已有formid
+    processConfig.value.formName = getRowData.business // 表单名称、关联业务
+    processConfig.value.formDesc = getRowData.formDesc // 描述
+    processConfig.value.formContent = getRowData.formDesc // 描述
+    processConfig.value.workFlowDef.name = getRowData.name // 流程名称
+    processConfig.value.workFlowDef.flowKey = props.getRowData.flowKey
+    processConfig.value.workFlowDef.directorId = props.getRowData.directorId
+  }
+  else { // 新建
+    processConfig.value.formId = props.getRowData.formID
+    processConfig.value.formName = props.getRowData.business
+    processConfig.value.formDesc = props.getRowData.desc
+    processConfig.value.formContent = props.getRowData.desc
+    processConfig.value.workFlowDef.directorId = user.id
+    processConfig.value.workFlowDef.name = props.getRowData.name // 流程名称
+  }
+  const decisionItem = window.sessionStorage.getItem('decisionItem')
+  const noticeStarter = window.sessionStorage.getItem('noticeStarter')
+  if (decisionItem) {
+    processConfig.value.workFlowDef.decisionItem = parseInt(decisionItem) // 可选决策项
+  }
+  if (noticeStarter) {
+    processConfig.value.workFlowDef.noticeStarter = parseInt(noticeStarter) // 审批结果通知发起人
+  }
+
+  // workFlowStore.setIsTried(true)
+  tipList.value = []
+  reErr(processConfig.value.nodeConfig) // 统计空节点
+  if (tipList.value.length != 0) { // 存在空节点
+    let approverCount = 0
+    let conditonCount = 0
+    tipList.value.forEach((item: { type: string }) => {
+      if (item.type === '审核人') {
+        approverCount += 1
+      }
+      else if (item.type === '条件') {
+        conditonCount += 1
+      }
+    })
+    workFlowStore.conditonErrorCount = conditonCount // 存入store
+    workFlowStore.approverErrorCount = approverCount // 存入store
+    tipVisible.value = true // 显示空节点提示框
+    return
+  }
+
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+
+  if (!props.isAddProcess) {
+    processConfig.value.flowPermission = flowPermission.value // 编辑时不允许改发起人
+    const res = await editProcess(processConfig.value)
+    if (res.code == 200) {
+      ElMessage.success('编辑流程成功')
+    }
+  }
+  else {
+    processConfig.value.flowPermission = { // 新建时发起人是此时的用户
+      name: user.name, // 用户名
+      targetId: user.id, // 用户id
+      type: 1, // 成员
+    }
+
+    addProcess(processConfig.value).then((res) => {
+      if (res.code === 200) {
+        ElMessage.success('创建流程成功')
+        emits('createProcessSuccess') // 返回列表页
+      }
+    }).catch(() => { // 流程异常情况: 所填写的formID已经存在
+      // emits('createProcessSuccess') // 返回列表页
+    })
+  }
+  loading.close()
+}
+defineExpose({
+  saveSet, initDetail,
+})
+
+const zoomSize = (type: number) => {
+  if (type == 1) {
+    if (nowVal.value == 50) {
+      return
+    }
+    nowVal.value -= 10
+  }
+  else {
+    if (nowVal.value == 300) {
+      return
+    }
+    nowVal.value += 10
+  }
+}
+
+// 改变空节点错误对话框显隐
+const changeTipVisible = (val: boolean) => {
+  tipVisible.value = false
+}
+</script>
+
+<template>
+  <div class="workFlow-setting">
+    <div class="fd-nav-content">
+      <section class="dingflow-design">
+        <!-- <div class="zoom">
+          <div class="zoom-out" :class="nowVal === 50 && 'disabled'" @click="zoomSize(1)" />
+          <span>{{ nowVal }}%</span>
+          <div class="zoom-in" :class="nowVal === 300 && 'disabled'" @click="zoomSize(2)" />
+        </div> -->
+        <!-- 可编辑 -->
+        <div v-if="allowEditNode" class="box-scale" :style="`transform: scale(${nowVal / 100});`">
+          <node-wrap v-if="props.allowEditNode" v-model:nodeConfig="nodeConfig" v-model:flowPermission="flowPermission" />
+          <div class="end-node">
+            <p>结束</p>
+          </div>
+        </div>
+        <!-- 不可编辑 -->
+        <div v-if="!allowEditNode" class="box-scale" :style="`transform: scale(${nowVal / 100});`">
+          <node-wrap-ban :node-config="nodeConfig" :flow-permission="flowPermission" />
+          <div class="end-node">
+            <p>结束</p>
+          </div>
+        </div>
+      </section>
+    </div>
+    <error-dialog v-model:visible="tipVisible" :list="tipList" @changeTipVisible="changeTipVisible" />
+    <approver-drawer :director-max-level="directorMaxLevel" />
+    <copyer-drawer />
+    <condition-drawer />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.workFlow-setting {
+  margin-top: 10px;
+
+  .close-button {
+    display: flex;
+    justify-content: flex-end;
+    margin: 20px;
+  }
+
+  .box-scale {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  // .end-node-circle {
+  .end-node {
+    justify-content: center;
+    flex-direction: column;
+    align-content: center;
+
+    p {
+      width: 280px;
+      height: 40px;
+      line-height: 40px;
+      color: #fff;
+      text-align: center;
+      background-color: #8cafff;
+      border-radius: 4px;
+      font-size: 14px;
+      margin: 0;
+    }
+  }
+}
+
+// }
+</style>
+
+<style>
+@import "../css/workflow.css";
+
+.error-modal-list {
+  width: 455px;
+}
+</style>
diff --git a/src/views/system/process/addProcess.vue b/src/views/system/process/addProcess.vue
new file mode 100644
index 0000000..ad5d290
--- /dev/null
+++ b/src/views/system/process/addProcess.vue
@@ -0,0 +1,234 @@
+<!-- 新建流程页面 -->
+<script lang="ts" setup name="EditProcess">
+import { reactive, ref } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
+import { useRoute, useRouter } from 'vue-router'
+import type { Ref } from 'vue'
+import Setting from '../../setting.vue'
+import type { Iform, dictType } from './process'
+import { getDictByCode } from '@/api/system/dict'
+
+const emits = defineEmits(['close'])
+const processSetting = ref()
+const selectFormId = ref('') // formid
+const ruleFormRef = ref<FormInstance>()
+const form: Ref<Iform> = ref({
+  number: '', // 编号
+  name: '', // 名称
+  business: '', // 关联业务
+  formID: '', // formID
+  desc: '', // 流程描述
+  decisionItem: '', // 可选决策项 1同意驳回拒绝2同意驳回3同意拒绝
+  noticeStarter: '', // 审批结果是否通知发起人
+})
+const decisionItemList = ref<dictType[]>([]) // 可选决策项
+const noticeStarterList = ref<dictType[]>([]) // 可选决策项
+
+// 表单校验
+const rules = reactive<FormRules>({
+  name: [
+    {
+      required: true,
+      message: '流程名称必填',
+      trigger: 'blur',
+    },
+  ],
+  business: [
+    {
+      required: true,
+      message: '关联业务必填',
+      trigger: 'blur',
+    },
+  ],
+  formID: [
+    {
+      required: true,
+      message: 'formID必填',
+      trigger: 'blur',
+    },
+  ],
+  desc: [
+    {
+      required: true,
+      message: '流程描述必填',
+      trigger: 'blur',
+    },
+  ],
+  decisionItem: [
+    {
+      required: true,
+      message: '可选决策项必填',
+      trigger: 'change',
+    },
+  ],
+  noticeStarter: [
+    {
+      required: true,
+      message: '审批结果是否通知发起人必填',
+      trigger: 'change',
+    },
+  ],
+})
+
+// 获取字典值
+async function getDict() {
+  // 可选决策项
+  const response = await getDictByCode('decisionItem')
+  decisionItemList.value = response.data
+
+  // 审批结果是否通知发起人
+  const res = await getDictByCode('noticeStarter')
+  noticeStarterList.value = res.data
+}
+
+const $router = useRouter()
+// 关闭
+const close = () => {
+  $router.back()
+}
+
+// 保存
+const save = async (formEl: FormInstance | undefined) => {
+  if (!formEl) { return }
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      window.sessionStorage.setItem('decisionItem', `${form.value.decisionItem}`)
+      window.sessionStorage.setItem('noticeStarter', `${form.value.noticeStarter}`)
+      // 调setting组件的保存
+      processSetting.value.saveSet()
+    }
+  })
+}
+
+// 监听流程组件--新建流程成功
+const createProcessSuccess = () => {
+  close()
+}
+onMounted(async () => {
+  await getDict()
+})
+</script>
+
+<template>
+  <div class="edit-process">
+    <app-container>
+      <detail-page title="流程管理-新建">
+        <template #btns>
+          <el-button type="primary" @click="save(ruleFormRef)">
+            保存
+          </el-button>
+          <el-button type="info" @click="close">
+            关闭
+          </el-button>
+        </template>
+        <el-form ref="ruleFormRef" :model="form" label-width="180px" :rules="rules">
+          <el-row :gutter="24">
+            <el-col :span="8">
+              <el-form-item label="流程编号:">
+                <el-input v-model="form.number" disabled placeholder="系统自动生成" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="流程名称:" prop="name">
+                <el-input v-model="form.name" placeholder="请输入流程名称" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="formID:" prop="formID">
+                <el-input v-model="form.formID" placeholder="请输入formID" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="关联业务:" prop="business">
+                <el-input v-model="form.business" placeholder="请输入关联业务" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="可选决策项:" prop="decisionItem">
+                <el-select
+                  v-model="form.decisionItem"
+                  clearable
+                  placeholder="请选择可选决策项"
+                  size="default"
+                  style="width: 100%;"
+                >
+                  <el-option
+                    v-for="item in decisionItemList"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="审批结果是否通知发起人:" prop="noticeStarter">
+                <el-select
+                  v-model="form.noticeStarter"
+                  clearable
+                  placeholder="请选择是否通知发起人"
+                  size="default"
+                  style="width: 100%;"
+                >
+                  <el-option
+                    v-for="item in noticeStarterList"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="16">
+              <el-form-item label="流程描述" prop="desc">
+                <el-input v-model="form.desc" type="textarea" autosize placeholder="请输入流程描述" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </detail-page>
+
+      <detail-block title="流程配置" />
+      <setting
+        ref="processSetting"
+        :is-add-process="true"
+        :get-row-data="form"
+        :select-form-id="selectFormId"
+        @createProcessSuccess="createProcessSuccess"
+      />
+    </app-container>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .edit-process {
+    width: 100%;
+
+    .title {
+      margin: 0 0 20px;
+      font-weight: 600;
+    }
+
+    .edit {
+      width: 100%;
+      padding: 12px;
+      background-color: #fff;
+      border-radius: 7px;
+      margin: 0 0 20px;
+
+      .button-area {
+        width: 100%;
+        display: flex;
+        justify-content: flex-end;
+        margin-bottom: 20px;
+      }
+    }
+
+    .set {
+      width: 100%;
+      background-color: #fff;
+      border-radius: 7px;
+      margin: 20px 0;
+    }
+  }
+</style>
diff --git a/src/views/system/process/detailProcess.vue b/src/views/system/process/detailProcess.vue
new file mode 100644
index 0000000..1165f46
--- /dev/null
+++ b/src/views/system/process/detailProcess.vue
@@ -0,0 +1,157 @@
+<!-- 详情 -->
+<script lang="ts" setup name="DetailProcess">
+import { reactive, ref } from 'vue'
+import type { FormInstance } from 'element-plus'
+import { useRoute, useRouter } from 'vue-router'
+import type { Ref } from 'vue'
+import Setting from '../../setting.vue'
+import type { Iform, dictType } from './process'
+import { getDictByCode } from '@/api/system/dict'
+const emits = defineEmits(['close'])
+
+// import WorkFlow from '@/components/workFlow/workFlow.vue'
+const $route = useRoute()
+const selectFormId = ref('')
+const ruleFormRef = ref<FormInstance>()
+const getRowData = ref({}) as any
+const form: Ref<Iform> = ref({
+  number: '', // 编号
+  name: '', // 名称
+  business: '', // 关联业务
+  formID: '', // formID
+  desc: '', // 流程描述
+  decisionItem: '', // 可选决策项 1同意驳回拒绝2同意驳回3同意拒绝
+  noticeStarter: '', // 审批结果是否通知发起人
+})
+const decisionItemList = ref<dictType[]>([]) // 可选决策项
+const noticeStarterList = ref<dictType[]>([]) // 可选决策项
+const $router = useRouter()
+// 关闭
+const close = () => {
+  $router.push('/process/list')
+}
+// 获取字典值
+async function getDict() {
+  // 可选决策项
+  const response = await getDictByCode('decisionItem')
+  decisionItemList.value = response.data
+
+  // 审批结果是否通知发起人
+  const res = await getDictByCode('noticeStarter')
+  noticeStarterList.value = res.data
+}
+getDict()
+
+const getNotice = () => {
+  if (window.sessionStorage.getItem('decisionItem')) { // 可选决策项
+    form.value.decisionItem = window.sessionStorage.getItem('decisionItem')!
+  }
+  if (window.sessionStorage.getItem('noticeStarter')) { // 是否通知发起人
+    form.value.noticeStarter = window.sessionStorage.getItem('noticeStarter')!
+  }
+}
+
+onMounted(() => {
+  const rowData: any = $route.query.rowData
+  getRowData.value = JSON.parse(rowData)
+  selectFormId.value = getRowData.value.formId
+  form.value.formID = getRowData.value.formId
+  form.value.number = getRowData.value.number
+  form.value.name = getRowData.value.name
+  form.value.business = getRowData.value.business
+  form.value.desc = getRowData.value.describe
+})
+</script>
+
+<template>
+  <div class="edit-process">
+    <detail-page title="流程管理-详情">
+      <template #btns>
+        <el-button type="info" @click="close">
+          关闭
+        </el-button>
+      </template>
+      <el-form ref="ruleFormRef" :model="form" label-width="150px">
+        <el-row :gutter="24">
+          <el-col :span="8">
+            <el-form-item label="流程编号:">
+              <el-input v-model="form.number" disabled placeholder="系统自动生成" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="流程名称:">
+              <el-input v-model="form.name" disabled placeholder="请输入流程名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="formID:">
+              <el-input v-model="form.formID" disabled placeholder="请输入formID" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="关联业务:">
+              <el-input v-model="form.business" disabled placeholder="请输入关联业务" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="可选决策项:">
+              <el-select
+                v-model="form.decisionItem"
+                clearable
+                placeholder="请选择可选决策项"
+                size="default"
+                style="width: 100%;"
+                disabled
+              >
+                <el-option
+                  v-for="item in decisionItemList"
+                  :key="item.value"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="审批结果是否通知发起人:">
+              <el-select
+                v-model="form.noticeStarter"
+                clearable
+                placeholder="请选择是否通知发起人"
+                size="default"
+                style="width: 100%;"
+                disabled
+              >
+                <el-option
+                  v-for="item in noticeStarterList"
+                  :key="item.value"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="16">
+            <el-form-item label="流程描述">
+              <el-input v-model="form.desc" disabled type="textarea" autosize placeholder="请输入流程描述" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </detail-page>
+    <detail-block title="流程配置" />
+    <setting :allow-edit-node="false" :select-form-id="selectFormId" @notice="getNotice" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .edit-process {
+    width: 100%;
+    padding: 10px;
+
+    .title {
+      margin: 0 0 20px;
+      font-weight: 600;
+    }
+  }
+</style>

diff --git a/.env.development b/.env.development
index 54c38a4..1ef3600 100644
--- a/.env.development
+++ b/.env.development
@@ -2,6 +2,7 @@
 VITE_APP_TITLE = 标题
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
 VITE_APP_API_BASEURL = http://XXXXXXX:XXXXXXX
+
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VITE_APP_DEBUG_TOOL =
 
diff --git a/.env.production b/.env.production
index 427b973..ed8a601 100644
--- a/.env.production
+++ b/.env.production
@@ -1,7 +1,7 @@
 NODE_ENV = production
 
 # 页面标题
-VITE_APP_TITLE = 计量业务系统
+VITE_APP_TITLE = 标题
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
 VITE_APP_API_BASEURL = http://XXXXXXX:XXXXXXX
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
diff --git a/src/api/system/process.ts b/src/api/system/process.ts
new file mode 100644
index 0000000..c2d4419
--- /dev/null
+++ b/src/api/system/process.ts
@@ -0,0 +1,123 @@
+// 流程管理接口
+import request from '../index'
+// import type { IlistQuery } from '@/views/system/process/process'
+const prefix = '/system/flow'
+
+// 列表
+export function getProcessList(data: { offset: number; limit: number }) {
+  return request({
+    url: `${prefix}/listPage?offset=${data.offset}&limit=${data.limit}`,
+    method: 'post',
+    data,
+  })
+}
+
+// 删除
+export function delProcessList(id: string) {
+  const param = {
+    deployId: id,
+  }
+  return request({
+    url: `${prefix}/delete`,
+    method: 'post',
+    data: param,
+  })
+}
+// 废止
+export function updateState(id: string, state: number) {
+  const param = {
+    deployId: id,
+    state,
+  }
+  return request({
+    url: `${prefix}/updateState`,
+    method: 'post',
+    data: param,
+  })
+}
+
+// 加载流程定义
+export function unloadProcess(params: Object) {
+  const param = {
+    _value: params,
+  }
+  return request({
+    url: `${prefix}/jsonToBpmn`,
+    method: 'post',
+    data: param,
+  })
+}
+
+// 流程定义编辑
+export function editProcess(params: Object) {
+  const param = {
+    _value: params,
+  }
+  return request({
+    url: `${prefix}/update`,
+    method: 'post',
+    data: param,
+  })
+}
+
+// 新建流程
+export function addProcess(params: Object) {
+  const param = {
+    _value: params,
+  }
+  return request({
+    url: `${prefix}/jsonToBpmn`,
+    method: 'post',
+    data: param,
+  })
+}
+
+// 获取流程定义详情
+export function getProcessDetail(formId: string) {
+  const param = {
+    formId,
+  }
+  return request({
+    url: `${prefix}/detail`,
+    method: 'post',
+    data: param,
+  })
+}
+
+// 获取关联业务列表
+export function getBusinessList() {
+  return request({
+    url: `${prefix}/flowFormList`,
+    method: 'get',
+  })
+}
+
+// 获取发起人的主管层级数
+export function getDirectorLevel(userId: number | string) {
+  return request({
+    url: `${prefix}/directorLevel`,
+    method: 'get',
+    params: { userId },
+  })
+}
+
+// 导出列表
+export function exportProcessList(data: {
+  deploymentId: string
+  suspensionState: string
+  number: string
+  name: string
+  business: string
+  person: string
+  beginTime: string
+  endTime: string
+  status: string
+  ids: string[]
+}) {
+  return request({
+    url: `${prefix}/listExport`,
+    method: 'post',
+    responseType: 'blob',
+    data,
+  })
+}
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index c129719..d6d1b71 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -154,6 +154,69 @@
     ],
   },
   {
+    path: '/process',
+    component: Layout,
+    redirect: '/process/list',
+    name: 'Process',
+    meta: {
+      title: '流程管理',
+      icon: 'ep:key',
+      auth: '/sys/process',
+    },
+    children: [
+      {
+        path: 'list',
+        name: 'ProcessList',
+        component: () => import('@/views/system/process/process.vue'),
+        meta: {
+          title: '流程管理',
+          icon: 'ep:key',
+          auth: '/sys/process',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/process',
+        },
+      },
+      {
+        path: 'edit',
+        name: 'ProcessListEdit',
+        component: () => import('@/views/system/process/editProcess.vue'),
+        meta: {
+          title: '流程管理',
+          icon: 'ep:key',
+          auth: '/sys/process',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/process/list',
+        },
+      },
+      {
+        path: 'detail',
+        name: 'ProcessListDetail',
+        component: () => import('@/views/system/process/detailProcess.vue'),
+        meta: {
+          title: '流程管理',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/process/list',
+        },
+      },
+      {
+        path: 'add',
+        name: 'ProcessListAdd',
+        component: () => import('@/views/system/process/addProcess.vue'),
+        meta: {
+          title: '流程管理',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/process/list',
+        },
+      },
+    ],
+  },
+  {
     path: '/tenant',
     component: Layout,
     redirect: '/tenant/list',
diff --git a/src/views/setting.vue b/src/views/setting.vue
new file mode 100644
index 0000000..2a00bf3
--- /dev/null
+++ b/src/views/setting.vue
@@ -0,0 +1,321 @@
+<script setup lang="ts" name="Setting">
+import { ElLoading, ElMessage } from 'element-plus'
+import { defineExpose, nextTick, onMounted, ref } from 'vue'
+import useWorkFlowStore from '@/store/modules/workFlow'
+import errorDialog from '@/components/dialog/errorDialog.vue'
+import approverDrawer from '@/components/drawer/approverDrawer.vue'
+import copyerDrawer from '@/components/drawer/copyerDrawer.vue'
+import conditionDrawer from '@/components/drawer/conditionDrawer.vue'
+import { addProcess, editProcess, getDirectorLevel, getProcessDetail } from '@/api/system/process'
+import userStore from '@/store/modules/user'
+import type { ITipList, IworkFlowDef } from '@/views/system/process/process'
+const props = defineProps({
+  allowEditNode: {
+    type: Boolean,
+    default: true,
+  },
+  getRowData: {
+    type: Object,
+    default: () => {},
+  },
+  selectFormId: String,
+  isAddProcess: {
+    type: Boolean,
+    default: false,
+  },
+})
+const emits = defineEmits(['createProcessSuccess', 'notice'])
+const processConfig = ref({}) as any
+
+const user = userStore()
+const workFlowStore = useWorkFlowStore()
+const tipList = ref<ITipList[]>([]) // 统计空节点的数组
+const tipVisible = ref(false) // 控制提示空节点对话框显隐
+const nowVal = ref(100)
+const nodeConfig = ref({})
+const workFlowDef = ref<IworkFlowDef>({
+  name: '审批流程',
+})
+const flowPermission = ref([])
+const directorMaxLevel = ref(0)
+
+// 初始化--请求流程图详细信息
+const initDetail = async (formid: string) => {
+  const res = await getProcessDetail(formid)
+  return res.data
+}
+onMounted(async () => {
+  let max = 0 // 审批主管最大层级
+
+  // 获取此用户的审批主管的最大层级
+  getDirectorLevel(user.id).then((res) => {
+    max = res.data.level
+  })
+  window.sessionStorage.setItem('maxLevel', `${max}`)
+  nextTick(async () => {
+    let data
+    console.log('=====', props.selectFormId)
+    if (!props.isAddProcess && props.selectFormId) { // 非新建流程--调流程详情接口
+      console.log('获取流程详情')
+      data = await initDetail(props.selectFormId)
+    }
+    else { // 新建流程
+      data = {
+        tableId: 1,
+        workFlowDef: {
+          name: '审批流程',
+        },
+        directorMaxLevel: max,
+        flowPermission: [],
+        nodeConfig: {
+          nodeName: '发起人',
+          type: 0,
+          priorityLevel: '',
+          settype: '',
+          selectMode: '',
+          selectRange: '',
+          directorLevel: '',
+          examineMode: '',
+          noHanderAction: '',
+          examineEndDirectorLevel: '',
+          ccSelfSelectFlag: '',
+          conditionList: [],
+          nodeUserList: [],
+          conditionNodes: [],
+        },
+      }
+    }
+    processConfig.value = data // 流程设置
+    const {
+      nodeConfig: nodes, // 节点设置
+      flowPermission: flows, // 发起人
+      workFlowDef: works, // 流程基本信息
+      tableId,
+    } = data
+    nodeConfig.value = nodes // 节点配置
+    flowPermission.value = flows // 发起人
+    directorMaxLevel.value = max // 用户主管最大层级数
+    workFlowDef.value = works // 流程基本信息
+    console.log('9090909090909090', workFlowDef.value.decisionItem)
+
+    window.sessionStorage.setItem('decisionItem', `${workFlowDef.value.decisionItem}`)
+    window.sessionStorage.setItem('noticeStarter', `${workFlowDef.value.noticeStarter}`)
+    console.log('在这里获得了这条数据的可选决策项和是否通知发起人')
+    emits('notice') // 通知可选决策项和是否通知发起人已获得数据
+    workFlowStore.setTableId(tableId)
+  })
+})
+
+// 统计空节点（红色感叹号）
+const reErr = ({ childNode }: any) => {
+  if (childNode) {
+    const { type, error, nodeName, conditionNodes } = childNode
+    if (type == 1 || type == 2) {
+      if (error) {
+        tipList.value.push({
+          name: nodeName,
+          type: ['', '审核人', '抄送人'][type],
+        })
+      }
+      reErr(childNode)
+    }
+    else if (type == 3) {
+      reErr(childNode)
+    }
+    else if (type == 4) {
+      reErr(childNode)
+      for (let i = 0; i < conditionNodes.length; i++) {
+        if (conditionNodes[i].error) {
+          tipList.value.push({ name: conditionNodes[i].nodeName, type: '条件' })
+        }
+        reErr(conditionNodes[i])
+      }
+    }
+  }
+  else {
+    childNode = null
+  }
+}
+
+// 保存流程图
+const saveSet = async (type: string, getRowData: any) => {
+  if (type === 'edit') { // 编辑
+    console.log('000000000', getRowData)
+
+    processConfig.value.formId = props.getRowData.formId // 已有formid
+    processConfig.value.formName = getRowData.business // 表单名称、关联业务
+    processConfig.value.formDesc = getRowData.formDesc // 描述
+    processConfig.value.formContent = getRowData.formDesc // 描述
+    processConfig.value.workFlowDef.name = getRowData.name // 流程名称
+    processConfig.value.workFlowDef.flowKey = props.getRowData.flowKey
+    processConfig.value.workFlowDef.directorId = props.getRowData.directorId
+  }
+  else { // 新建
+    processConfig.value.formId = props.getRowData.formID
+    processConfig.value.formName = props.getRowData.business
+    processConfig.value.formDesc = props.getRowData.desc
+    processConfig.value.formContent = props.getRowData.desc
+    processConfig.value.workFlowDef.directorId = user.id
+    processConfig.value.workFlowDef.name = props.getRowData.name // 流程名称
+  }
+  const decisionItem = window.sessionStorage.getItem('decisionItem')
+  const noticeStarter = window.sessionStorage.getItem('noticeStarter')
+  if (decisionItem) {
+    processConfig.value.workFlowDef.decisionItem = parseInt(decisionItem) // 可选决策项
+  }
+  if (noticeStarter) {
+    processConfig.value.workFlowDef.noticeStarter = parseInt(noticeStarter) // 审批结果通知发起人
+  }
+
+  // workFlowStore.setIsTried(true)
+  tipList.value = []
+  reErr(processConfig.value.nodeConfig) // 统计空节点
+  if (tipList.value.length != 0) { // 存在空节点
+    let approverCount = 0
+    let conditonCount = 0
+    tipList.value.forEach((item: { type: string }) => {
+      if (item.type === '审核人') {
+        approverCount += 1
+      }
+      else if (item.type === '条件') {
+        conditonCount += 1
+      }
+    })
+    workFlowStore.conditonErrorCount = conditonCount // 存入store
+    workFlowStore.approverErrorCount = approverCount // 存入store
+    tipVisible.value = true // 显示空节点提示框
+    return
+  }
+
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+
+  if (!props.isAddProcess) {
+    processConfig.value.flowPermission = flowPermission.value // 编辑时不允许改发起人
+    const res = await editProcess(processConfig.value)
+    if (res.code == 200) {
+      ElMessage.success('编辑流程成功')
+    }
+  }
+  else {
+    processConfig.value.flowPermission = { // 新建时发起人是此时的用户
+      name: user.name, // 用户名
+      targetId: user.id, // 用户id
+      type: 1, // 成员
+    }
+
+    addProcess(processConfig.value).then((res) => {
+      if (res.code === 200) {
+        ElMessage.success('创建流程成功')
+        emits('createProcessSuccess') // 返回列表页
+      }
+    }).catch(() => { // 流程异常情况: 所填写的formID已经存在
+      // emits('createProcessSuccess') // 返回列表页
+    })
+  }
+  loading.close()
+}
+defineExpose({
+  saveSet, initDetail,
+})
+
+const zoomSize = (type: number) => {
+  if (type == 1) {
+    if (nowVal.value == 50) {
+      return
+    }
+    nowVal.value -= 10
+  }
+  else {
+    if (nowVal.value == 300) {
+      return
+    }
+    nowVal.value += 10
+  }
+}
+
+// 改变空节点错误对话框显隐
+const changeTipVisible = (val: boolean) => {
+  tipVisible.value = false
+}
+</script>
+
+<template>
+  <div class="workFlow-setting">
+    <div class="fd-nav-content">
+      <section class="dingflow-design">
+        <!-- <div class="zoom">
+          <div class="zoom-out" :class="nowVal === 50 && 'disabled'" @click="zoomSize(1)" />
+          <span>{{ nowVal }}%</span>
+          <div class="zoom-in" :class="nowVal === 300 && 'disabled'" @click="zoomSize(2)" />
+        </div> -->
+        <!-- 可编辑 -->
+        <div v-if="allowEditNode" class="box-scale" :style="`transform: scale(${nowVal / 100});`">
+          <node-wrap v-if="props.allowEditNode" v-model:nodeConfig="nodeConfig" v-model:flowPermission="flowPermission" />
+          <div class="end-node">
+            <p>结束</p>
+          </div>
+        </div>
+        <!-- 不可编辑 -->
+        <div v-if="!allowEditNode" class="box-scale" :style="`transform: scale(${nowVal / 100});`">
+          <node-wrap-ban :node-config="nodeConfig" :flow-permission="flowPermission" />
+          <div class="end-node">
+            <p>结束</p>
+          </div>
+        </div>
+      </section>
+    </div>
+    <error-dialog v-model:visible="tipVisible" :list="tipList" @changeTipVisible="changeTipVisible" />
+    <approver-drawer :director-max-level="directorMaxLevel" />
+    <copyer-drawer />
+    <condition-drawer />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.workFlow-setting {
+  margin-top: 10px;
+
+  .close-button {
+    display: flex;
+    justify-content: flex-end;
+    margin: 20px;
+  }
+
+  .box-scale {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  // .end-node-circle {
+  .end-node {
+    justify-content: center;
+    flex-direction: column;
+    align-content: center;
+
+    p {
+      width: 280px;
+      height: 40px;
+      line-height: 40px;
+      color: #fff;
+      text-align: center;
+      background-color: #8cafff;
+      border-radius: 4px;
+      font-size: 14px;
+      margin: 0;
+    }
+  }
+}
+
+// }
+</style>
+
+<style>
+@import "../css/workflow.css";
+
+.error-modal-list {
+  width: 455px;
+}
+</style>
diff --git a/src/views/system/process/addProcess.vue b/src/views/system/process/addProcess.vue
new file mode 100644
index 0000000..ad5d290
--- /dev/null
+++ b/src/views/system/process/addProcess.vue
@@ -0,0 +1,234 @@
+<!-- 新建流程页面 -->
+<script lang="ts" setup name="EditProcess">
+import { reactive, ref } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
+import { useRoute, useRouter } from 'vue-router'
+import type { Ref } from 'vue'
+import Setting from '../../setting.vue'
+import type { Iform, dictType } from './process'
+import { getDictByCode } from '@/api/system/dict'
+
+const emits = defineEmits(['close'])
+const processSetting = ref()
+const selectFormId = ref('') // formid
+const ruleFormRef = ref<FormInstance>()
+const form: Ref<Iform> = ref({
+  number: '', // 编号
+  name: '', // 名称
+  business: '', // 关联业务
+  formID: '', // formID
+  desc: '', // 流程描述
+  decisionItem: '', // 可选决策项 1同意驳回拒绝2同意驳回3同意拒绝
+  noticeStarter: '', // 审批结果是否通知发起人
+})
+const decisionItemList = ref<dictType[]>([]) // 可选决策项
+const noticeStarterList = ref<dictType[]>([]) // 可选决策项
+
+// 表单校验
+const rules = reactive<FormRules>({
+  name: [
+    {
+      required: true,
+      message: '流程名称必填',
+      trigger: 'blur',
+    },
+  ],
+  business: [
+    {
+      required: true,
+      message: '关联业务必填',
+      trigger: 'blur',
+    },
+  ],
+  formID: [
+    {
+      required: true,
+      message: 'formID必填',
+      trigger: 'blur',
+    },
+  ],
+  desc: [
+    {
+      required: true,
+      message: '流程描述必填',
+      trigger: 'blur',
+    },
+  ],
+  decisionItem: [
+    {
+      required: true,
+      message: '可选决策项必填',
+      trigger: 'change',
+    },
+  ],
+  noticeStarter: [
+    {
+      required: true,
+      message: '审批结果是否通知发起人必填',
+      trigger: 'change',
+    },
+  ],
+})
+
+// 获取字典值
+async function getDict() {
+  // 可选决策项
+  const response = await getDictByCode('decisionItem')
+  decisionItemList.value = response.data
+
+  // 审批结果是否通知发起人
+  const res = await getDictByCode('noticeStarter')
+  noticeStarterList.value = res.data
+}
+
+const $router = useRouter()
+// 关闭
+const close = () => {
+  $router.back()
+}
+
+// 保存
+const save = async (formEl: FormInstance | undefined) => {
+  if (!formEl) { return }
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      window.sessionStorage.setItem('decisionItem', `${form.value.decisionItem}`)
+      window.sessionStorage.setItem('noticeStarter', `${form.value.noticeStarter}`)
+      // 调setting组件的保存
+      processSetting.value.saveSet()
+    }
+  })
+}
+
+// 监听流程组件--新建流程成功
+const createProcessSuccess = () => {
+  close()
+}
+onMounted(async () => {
+  await getDict()
+})
+</script>
+
+<template>
+  <div class="edit-process">
+    <app-container>
+      <detail-page title="流程管理-新建">
+        <template #btns>
+          <el-button type="primary" @click="save(ruleFormRef)">
+            保存
+          </el-button>
+          <el-button type="info" @click="close">
+            关闭
+          </el-button>
+        </template>
+        <el-form ref="ruleFormRef" :model="form" label-width="180px" :rules="rules">
+          <el-row :gutter="24">
+            <el-col :span="8">
+              <el-form-item label="流程编号:">
+                <el-input v-model="form.number" disabled placeholder="系统自动生成" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="流程名称:" prop="name">
+                <el-input v-model="form.name" placeholder="请输入流程名称" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="formID:" prop="formID">
+                <el-input v-model="form.formID" placeholder="请输入formID" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="关联业务:" prop="business">
+                <el-input v-model="form.business" placeholder="请输入关联业务" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="可选决策项:" prop="decisionItem">
+                <el-select
+                  v-model="form.decisionItem"
+                  clearable
+                  placeholder="请选择可选决策项"
+                  size="default"
+                  style="width: 100%;"
+                >
+                  <el-option
+                    v-for="item in decisionItemList"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="审批结果是否通知发起人:" prop="noticeStarter">
+                <el-select
+                  v-model="form.noticeStarter"
+                  clearable
+                  placeholder="请选择是否通知发起人"
+                  size="default"
+                  style="width: 100%;"
+                >
+                  <el-option
+                    v-for="item in noticeStarterList"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="16">
+              <el-form-item label="流程描述" prop="desc">
+                <el-input v-model="form.desc" type="textarea" autosize placeholder="请输入流程描述" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </detail-page>
+
+      <detail-block title="流程配置" />
+      <setting
+        ref="processSetting"
+        :is-add-process="true"
+        :get-row-data="form"
+        :select-form-id="selectFormId"
+        @createProcessSuccess="createProcessSuccess"
+      />
+    </app-container>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .edit-process {
+    width: 100%;
+
+    .title {
+      margin: 0 0 20px;
+      font-weight: 600;
+    }
+
+    .edit {
+      width: 100%;
+      padding: 12px;
+      background-color: #fff;
+      border-radius: 7px;
+      margin: 0 0 20px;
+
+      .button-area {
+        width: 100%;
+        display: flex;
+        justify-content: flex-end;
+        margin-bottom: 20px;
+      }
+    }
+
+    .set {
+      width: 100%;
+      background-color: #fff;
+      border-radius: 7px;
+      margin: 20px 0;
+    }
+  }
+</style>
diff --git a/src/views/system/process/detailProcess.vue b/src/views/system/process/detailProcess.vue
new file mode 100644
index 0000000..1165f46
--- /dev/null
+++ b/src/views/system/process/detailProcess.vue
@@ -0,0 +1,157 @@
+<!-- 详情 -->
+<script lang="ts" setup name="DetailProcess">
+import { reactive, ref } from 'vue'
+import type { FormInstance } from 'element-plus'
+import { useRoute, useRouter } from 'vue-router'
+import type { Ref } from 'vue'
+import Setting from '../../setting.vue'
+import type { Iform, dictType } from './process'
+import { getDictByCode } from '@/api/system/dict'
+const emits = defineEmits(['close'])
+
+// import WorkFlow from '@/components/workFlow/workFlow.vue'
+const $route = useRoute()
+const selectFormId = ref('')
+const ruleFormRef = ref<FormInstance>()
+const getRowData = ref({}) as any
+const form: Ref<Iform> = ref({
+  number: '', // 编号
+  name: '', // 名称
+  business: '', // 关联业务
+  formID: '', // formID
+  desc: '', // 流程描述
+  decisionItem: '', // 可选决策项 1同意驳回拒绝2同意驳回3同意拒绝
+  noticeStarter: '', // 审批结果是否通知发起人
+})
+const decisionItemList = ref<dictType[]>([]) // 可选决策项
+const noticeStarterList = ref<dictType[]>([]) // 可选决策项
+const $router = useRouter()
+// 关闭
+const close = () => {
+  $router.push('/process/list')
+}
+// 获取字典值
+async function getDict() {
+  // 可选决策项
+  const response = await getDictByCode('decisionItem')
+  decisionItemList.value = response.data
+
+  // 审批结果是否通知发起人
+  const res = await getDictByCode('noticeStarter')
+  noticeStarterList.value = res.data
+}
+getDict()
+
+const getNotice = () => {
+  if (window.sessionStorage.getItem('decisionItem')) { // 可选决策项
+    form.value.decisionItem = window.sessionStorage.getItem('decisionItem')!
+  }
+  if (window.sessionStorage.getItem('noticeStarter')) { // 是否通知发起人
+    form.value.noticeStarter = window.sessionStorage.getItem('noticeStarter')!
+  }
+}
+
+onMounted(() => {
+  const rowData: any = $route.query.rowData
+  getRowData.value = JSON.parse(rowData)
+  selectFormId.value = getRowData.value.formId
+  form.value.formID = getRowData.value.formId
+  form.value.number = getRowData.value.number
+  form.value.name = getRowData.value.name
+  form.value.business = getRowData.value.business
+  form.value.desc = getRowData.value.describe
+})
+</script>
+
+<template>
+  <div class="edit-process">
+    <detail-page title="流程管理-详情">
+      <template #btns>
+        <el-button type="info" @click="close">
+          关闭
+        </el-button>
+      </template>
+      <el-form ref="ruleFormRef" :model="form" label-width="150px">
+        <el-row :gutter="24">
+          <el-col :span="8">
+            <el-form-item label="流程编号:">
+              <el-input v-model="form.number" disabled placeholder="系统自动生成" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="流程名称:">
+              <el-input v-model="form.name" disabled placeholder="请输入流程名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="formID:">
+              <el-input v-model="form.formID" disabled placeholder="请输入formID" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="关联业务:">
+              <el-input v-model="form.business" disabled placeholder="请输入关联业务" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="可选决策项:">
+              <el-select
+                v-model="form.decisionItem"
+                clearable
+                placeholder="请选择可选决策项"
+                size="default"
+                style="width: 100%;"
+                disabled
+              >
+                <el-option
+                  v-for="item in decisionItemList"
+                  :key="item.value"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="审批结果是否通知发起人:">
+              <el-select
+                v-model="form.noticeStarter"
+                clearable
+                placeholder="请选择是否通知发起人"
+                size="default"
+                style="width: 100%;"
+                disabled
+              >
+                <el-option
+                  v-for="item in noticeStarterList"
+                  :key="item.value"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="16">
+            <el-form-item label="流程描述">
+              <el-input v-model="form.desc" disabled type="textarea" autosize placeholder="请输入流程描述" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </detail-page>
+    <detail-block title="流程配置" />
+    <setting :allow-edit-node="false" :select-form-id="selectFormId" @notice="getNotice" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .edit-process {
+    width: 100%;
+    padding: 10px;
+
+    .title {
+      margin: 0 0 20px;
+      font-weight: 600;
+    }
+  }
+</style>
diff --git a/src/views/system/process/editProcess.vue b/src/views/system/process/editProcess.vue
new file mode 100644
index 0000000..4ef4764
--- /dev/null
+++ b/src/views/system/process/editProcess.vue
@@ -0,0 +1,248 @@
+<!-- 编辑 -->
+<script lang="ts" setup name="EditProcess">
+import { onMounted, reactive, ref } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
+import { useRoute, useRouter } from 'vue-router'
+import type { Ref } from 'vue'
+import setting from '../../setting.vue'
+import type { Iform, dictType } from './process'
+import { getDictByCode } from '@/api/system/dict'
+
+const emits = defineEmits(['close'])
+const processSetting = ref()
+const selectFormId = ref('') // formid
+const $route = useRoute()
+const getRowData = ref({}) as any
+const ruleFormRef = ref<FormInstance>()
+const form: Ref<Iform> = ref({
+  number: '', // 编号
+  name: '', // 名称
+  business: '', // 关联业务
+  formID: '', // formID
+  desc: '', // 流程描述
+  decisionItem: '', // 可选决策项 1同意驳回拒绝2同意驳回3同意拒绝
+  noticeStarter: '', // 审批结果是否通知发起人
+})
+const rules = reactive<FormRules>({
+  name: [
+    {
+      required: true,
+      message: '流程名称必填',
+      trigger: 'blur',
+    },
+  ],
+  business: [
+    {
+      required: true,
+      message: '关联业务必填',
+      trigger: 'blur',
+    },
+  ],
+  formID: [
+    {
+      required: true,
+      message: 'formID必填',
+      trigger: 'blur',
+    },
+  ],
+  desc: [
+    {
+      required: true,
+      message: '流程描述必填',
+      trigger: 'blur',
+    },
+  ],
+  decisionItem: [
+    {
+      required: true,
+      message: '可选决策项必填',
+      trigger: 'change',
+    },
+  ],
+  noticeStarter: [
+    {
+      required: true,
+      message: '审批结果是否通知发起人必填',
+      trigger: 'change',
+    },
+  ],
+})
+const decisionItemList = ref<dictType[]>([]) // 可选决策项
+const noticeStarterList = ref<dictType[]>([]) // 可选决策项
+const $router = useRouter()
+// 关闭
+const close = () => {
+  $router.back()
+}
+// 获取字典值
+async function getDict() {
+  // 可选决策项
+  const response = await getDictByCode('decisionItem')
+  decisionItemList.value = response.data
+
+  // 审批结果是否通知发起人
+  const res = await getDictByCode('noticeStarter')
+  noticeStarterList.value = res.data
+}
+getDict()
+
+// 保存
+const save = async (formEl: FormInstance | undefined) => {
+  if (!formEl) { return }
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      window.sessionStorage.setItem('decisionItem', `${form.value.decisionItem}`)
+      window.sessionStorage.setItem('noticeStarter', `${form.value.noticeStarter}`)
+      // 调保存接口
+      getRowData.value.name = form.value.name // 流程名称
+      getRowData.value.business = form.value.business // 关联业务
+      getRowData.value.desc = form.value.desc // 流程名称
+      getRowData.value.formDesc = form.value.desc // 流程名称
+      console.log('999999999999999', getRowData.value)
+      processSetting.value.saveSet('edit', getRowData.value)
+    }
+    else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+
+// 监听可选决策项、是否通知发起人获取到数据了
+const getNotice = () => {
+  if (window.sessionStorage.getItem('decisionItem')) { // 可选决策项
+    form.value.decisionItem = window.sessionStorage.getItem('decisionItem')!
+  }
+  if (window.sessionStorage.getItem('noticeStarter')) { // 是否通知发起人
+    form.value.noticeStarter = window.sessionStorage.getItem('noticeStarter')!
+  }
+}
+
+onMounted(() => {
+  const rowData: any = $route.query.rowData
+  getRowData.value = JSON.parse(rowData)
+  selectFormId.value = getRowData.value.formId
+  form.value.formID = getRowData.value.formId
+  form.value.number = getRowData.value.number
+  form.value.name = getRowData.value.name
+  form.value.business = getRowData.value.business
+  form.value.desc = getRowData.value.describe
+})
+</script>
+
+<template>
+  <div class="edit-process">
+    <app-container>
+      <detail-page title="流程管理-编辑">
+        <template #btns>
+          <el-button type="primary" @click="save(ruleFormRef)">
+            保存
+          </el-button>
+          <el-button type="info" @click="close">
+            关闭
+          </el-button>
+        </template>
+        <el-form ref="ruleFormRef" :model="form" label-width="180px" :rules="rules">
+          <el-row :gutter="24">
+            <el-col :span="8">
+              <el-form-item label="流程编号:">
+                <el-input v-model="form.number" disabled placeholder="系统自动生成" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="流程名称:" prop="name">
+                <el-input v-model="form.name" placeholder="请输入流程名称" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="formID:" prop="formID">
+                <el-input v-model="form.formID" placeholder="请输入formID" disabled />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="关联业务:" prop="business">
+                <el-input v-model="form.business" placeholder="请输入关联业务" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="可选决策项:" prop="decisionItem">
+                <el-select
+                  v-model="form.decisionItem"
+                  clearable
+                  placeholder="请选择可选决策项"
+                  size="default"
+                  style="width: 100%;"
+                >
+                  <el-option
+                    v-for="item in decisionItemList"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="审批结果是否通知发起人:" prop="noticeStarter">
+                <el-select
+                  v-model="form.noticeStarter"
+                  clearable
+                  placeholder="请选择是否通知发起人"
+                  size="default"
+                  style="width: 100%;"
+                >
+                  <el-option
+                    v-for="item in noticeStarterList"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="16">
+              <el-form-item label="流程描述" prop="desc">
+                <el-input v-model="form.desc" type="textarea" autosize placeholder="请输入流程描述" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </detail-page>
+
+      <detail-block title="流程配置" />
+      <setting ref="processSetting" :get-row-data="getRowData" :select-form-id="selectFormId" @notice="getNotice" />
+    </app-container>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .edit-process {
+    width: 100%;
+
+    .title {
+      margin: 0 0 20px;
+      font-weight: 600;
+    }
+
+    .edit {
+      width: 100%;
+      padding: 12px;
+      background-color: #fff;
+      border-radius: 7px;
+      margin: 0 0 20px;
+
+      .button-area {
+        width: 100%;
+        display: flex;
+        justify-content: flex-end;
+        margin-bottom: 20px;
+      }
+    }
+
+    .set {
+      width: 100%;
+      background-color: #fff;
+      border-radius: 7px;
+      margin: 20px 0;
+    }
+  }
+</style>

diff --git a/.env.development b/.env.development
index 54c38a4..1ef3600 100644
--- a/.env.development
+++ b/.env.development
@@ -2,6 +2,7 @@
 VITE_APP_TITLE = 标题
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
 VITE_APP_API_BASEURL = http://XXXXXXX:XXXXXXX
+
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VITE_APP_DEBUG_TOOL =
 
diff --git a/.env.production b/.env.production
index 427b973..ed8a601 100644
--- a/.env.production
+++ b/.env.production
@@ -1,7 +1,7 @@
 NODE_ENV = production
 
 # 页面标题
-VITE_APP_TITLE = 计量业务系统
+VITE_APP_TITLE = 标题
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
 VITE_APP_API_BASEURL = http://XXXXXXX:XXXXXXX
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
diff --git a/src/api/system/process.ts b/src/api/system/process.ts
new file mode 100644
index 0000000..c2d4419
--- /dev/null
+++ b/src/api/system/process.ts
@@ -0,0 +1,123 @@
+// 流程管理接口
+import request from '../index'
+// import type { IlistQuery } from '@/views/system/process/process'
+const prefix = '/system/flow'
+
+// 列表
+export function getProcessList(data: { offset: number; limit: number }) {
+  return request({
+    url: `${prefix}/listPage?offset=${data.offset}&limit=${data.limit}`,
+    method: 'post',
+    data,
+  })
+}
+
+// 删除
+export function delProcessList(id: string) {
+  const param = {
+    deployId: id,
+  }
+  return request({
+    url: `${prefix}/delete`,
+    method: 'post',
+    data: param,
+  })
+}
+// 废止
+export function updateState(id: string, state: number) {
+  const param = {
+    deployId: id,
+    state,
+  }
+  return request({
+    url: `${prefix}/updateState`,
+    method: 'post',
+    data: param,
+  })
+}
+
+// 加载流程定义
+export function unloadProcess(params: Object) {
+  const param = {
+    _value: params,
+  }
+  return request({
+    url: `${prefix}/jsonToBpmn`,
+    method: 'post',
+    data: param,
+  })
+}
+
+// 流程定义编辑
+export function editProcess(params: Object) {
+  const param = {
+    _value: params,
+  }
+  return request({
+    url: `${prefix}/update`,
+    method: 'post',
+    data: param,
+  })
+}
+
+// 新建流程
+export function addProcess(params: Object) {
+  const param = {
+    _value: params,
+  }
+  return request({
+    url: `${prefix}/jsonToBpmn`,
+    method: 'post',
+    data: param,
+  })
+}
+
+// 获取流程定义详情
+export function getProcessDetail(formId: string) {
+  const param = {
+    formId,
+  }
+  return request({
+    url: `${prefix}/detail`,
+    method: 'post',
+    data: param,
+  })
+}
+
+// 获取关联业务列表
+export function getBusinessList() {
+  return request({
+    url: `${prefix}/flowFormList`,
+    method: 'get',
+  })
+}
+
+// 获取发起人的主管层级数
+export function getDirectorLevel(userId: number | string) {
+  return request({
+    url: `${prefix}/directorLevel`,
+    method: 'get',
+    params: { userId },
+  })
+}
+
+// 导出列表
+export function exportProcessList(data: {
+  deploymentId: string
+  suspensionState: string
+  number: string
+  name: string
+  business: string
+  person: string
+  beginTime: string
+  endTime: string
+  status: string
+  ids: string[]
+}) {
+  return request({
+    url: `${prefix}/listExport`,
+    method: 'post',
+    responseType: 'blob',
+    data,
+  })
+}
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index c129719..d6d1b71 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -154,6 +154,69 @@
     ],
   },
   {
+    path: '/process',
+    component: Layout,
+    redirect: '/process/list',
+    name: 'Process',
+    meta: {
+      title: '流程管理',
+      icon: 'ep:key',
+      auth: '/sys/process',
+    },
+    children: [
+      {
+        path: 'list',
+        name: 'ProcessList',
+        component: () => import('@/views/system/process/process.vue'),
+        meta: {
+          title: '流程管理',
+          icon: 'ep:key',
+          auth: '/sys/process',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/process',
+        },
+      },
+      {
+        path: 'edit',
+        name: 'ProcessListEdit',
+        component: () => import('@/views/system/process/editProcess.vue'),
+        meta: {
+          title: '流程管理',
+          icon: 'ep:key',
+          auth: '/sys/process',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/process/list',
+        },
+      },
+      {
+        path: 'detail',
+        name: 'ProcessListDetail',
+        component: () => import('@/views/system/process/detailProcess.vue'),
+        meta: {
+          title: '流程管理',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/process/list',
+        },
+      },
+      {
+        path: 'add',
+        name: 'ProcessListAdd',
+        component: () => import('@/views/system/process/addProcess.vue'),
+        meta: {
+          title: '流程管理',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/process/list',
+        },
+      },
+    ],
+  },
+  {
     path: '/tenant',
     component: Layout,
     redirect: '/tenant/list',
diff --git a/src/views/setting.vue b/src/views/setting.vue
new file mode 100644
index 0000000..2a00bf3
--- /dev/null
+++ b/src/views/setting.vue
@@ -0,0 +1,321 @@
+<script setup lang="ts" name="Setting">
+import { ElLoading, ElMessage } from 'element-plus'
+import { defineExpose, nextTick, onMounted, ref } from 'vue'
+import useWorkFlowStore from '@/store/modules/workFlow'
+import errorDialog from '@/components/dialog/errorDialog.vue'
+import approverDrawer from '@/components/drawer/approverDrawer.vue'
+import copyerDrawer from '@/components/drawer/copyerDrawer.vue'
+import conditionDrawer from '@/components/drawer/conditionDrawer.vue'
+import { addProcess, editProcess, getDirectorLevel, getProcessDetail } from '@/api/system/process'
+import userStore from '@/store/modules/user'
+import type { ITipList, IworkFlowDef } from '@/views/system/process/process'
+const props = defineProps({
+  allowEditNode: {
+    type: Boolean,
+    default: true,
+  },
+  getRowData: {
+    type: Object,
+    default: () => {},
+  },
+  selectFormId: String,
+  isAddProcess: {
+    type: Boolean,
+    default: false,
+  },
+})
+const emits = defineEmits(['createProcessSuccess', 'notice'])
+const processConfig = ref({}) as any
+
+const user = userStore()
+const workFlowStore = useWorkFlowStore()
+const tipList = ref<ITipList[]>([]) // 统计空节点的数组
+const tipVisible = ref(false) // 控制提示空节点对话框显隐
+const nowVal = ref(100)
+const nodeConfig = ref({})
+const workFlowDef = ref<IworkFlowDef>({
+  name: '审批流程',
+})
+const flowPermission = ref([])
+const directorMaxLevel = ref(0)
+
+// 初始化--请求流程图详细信息
+const initDetail = async (formid: string) => {
+  const res = await getProcessDetail(formid)
+  return res.data
+}
+onMounted(async () => {
+  let max = 0 // 审批主管最大层级
+
+  // 获取此用户的审批主管的最大层级
+  getDirectorLevel(user.id).then((res) => {
+    max = res.data.level
+  })
+  window.sessionStorage.setItem('maxLevel', `${max}`)
+  nextTick(async () => {
+    let data
+    console.log('=====', props.selectFormId)
+    if (!props.isAddProcess && props.selectFormId) { // 非新建流程--调流程详情接口
+      console.log('获取流程详情')
+      data = await initDetail(props.selectFormId)
+    }
+    else { // 新建流程
+      data = {
+        tableId: 1,
+        workFlowDef: {
+          name: '审批流程',
+        },
+        directorMaxLevel: max,
+        flowPermission: [],
+        nodeConfig: {
+          nodeName: '发起人',
+          type: 0,
+          priorityLevel: '',
+          settype: '',
+          selectMode: '',
+          selectRange: '',
+          directorLevel: '',
+          examineMode: '',
+          noHanderAction: '',
+          examineEndDirectorLevel: '',
+          ccSelfSelectFlag: '',
+          conditionList: [],
+          nodeUserList: [],
+          conditionNodes: [],
+        },
+      }
+    }
+    processConfig.value = data // 流程设置
+    const {
+      nodeConfig: nodes, // 节点设置
+      flowPermission: flows, // 发起人
+      workFlowDef: works, // 流程基本信息
+      tableId,
+    } = data
+    nodeConfig.value = nodes // 节点配置
+    flowPermission.value = flows // 发起人
+    directorMaxLevel.value = max // 用户主管最大层级数
+    workFlowDef.value = works // 流程基本信息
+    console.log('9090909090909090', workFlowDef.value.decisionItem)
+
+    window.sessionStorage.setItem('decisionItem', `${workFlowDef.value.decisionItem}`)
+    window.sessionStorage.setItem('noticeStarter', `${workFlowDef.value.noticeStarter}`)
+    console.log('在这里获得了这条数据的可选决策项和是否通知发起人')
+    emits('notice') // 通知可选决策项和是否通知发起人已获得数据
+    workFlowStore.setTableId(tableId)
+  })
+})
+
+// 统计空节点（红色感叹号）
+const reErr = ({ childNode }: any) => {
+  if (childNode) {
+    const { type, error, nodeName, conditionNodes } = childNode
+    if (type == 1 || type == 2) {
+      if (error) {
+        tipList.value.push({
+          name: nodeName,
+          type: ['', '审核人', '抄送人'][type],
+        })
+      }
+      reErr(childNode)
+    }
+    else if (type == 3) {
+      reErr(childNode)
+    }
+    else if (type == 4) {
+      reErr(childNode)
+      for (let i = 0; i < conditionNodes.length; i++) {
+        if (conditionNodes[i].error) {
+          tipList.value.push({ name: conditionNodes[i].nodeName, type: '条件' })
+        }
+        reErr(conditionNodes[i])
+      }
+    }
+  }
+  else {
+    childNode = null
+  }
+}
+
+// 保存流程图
+const saveSet = async (type: string, getRowData: any) => {
+  if (type === 'edit') { // 编辑
+    console.log('000000000', getRowData)
+
+    processConfig.value.formId = props.getRowData.formId // 已有formid
+    processConfig.value.formName = getRowData.business // 表单名称、关联业务
+    processConfig.value.formDesc = getRowData.formDesc // 描述
+    processConfig.value.formContent = getRowData.formDesc // 描述
+    processConfig.value.workFlowDef.name = getRowData.name // 流程名称
+    processConfig.value.workFlowDef.flowKey = props.getRowData.flowKey
+    processConfig.value.workFlowDef.directorId = props.getRowData.directorId
+  }
+  else { // 新建
+    processConfig.value.formId = props.getRowData.formID
+    processConfig.value.formName = props.getRowData.business
+    processConfig.value.formDesc = props.getRowData.desc
+    processConfig.value.formContent = props.getRowData.desc
+    processConfig.value.workFlowDef.directorId = user.id
+    processConfig.value.workFlowDef.name = props.getRowData.name // 流程名称
+  }
+  const decisionItem = window.sessionStorage.getItem('decisionItem')
+  const noticeStarter = window.sessionStorage.getItem('noticeStarter')
+  if (decisionItem) {
+    processConfig.value.workFlowDef.decisionItem = parseInt(decisionItem) // 可选决策项
+  }
+  if (noticeStarter) {
+    processConfig.value.workFlowDef.noticeStarter = parseInt(noticeStarter) // 审批结果通知发起人
+  }
+
+  // workFlowStore.setIsTried(true)
+  tipList.value = []
+  reErr(processConfig.value.nodeConfig) // 统计空节点
+  if (tipList.value.length != 0) { // 存在空节点
+    let approverCount = 0
+    let conditonCount = 0
+    tipList.value.forEach((item: { type: string }) => {
+      if (item.type === '审核人') {
+        approverCount += 1
+      }
+      else if (item.type === '条件') {
+        conditonCount += 1
+      }
+    })
+    workFlowStore.conditonErrorCount = conditonCount // 存入store
+    workFlowStore.approverErrorCount = approverCount // 存入store
+    tipVisible.value = true // 显示空节点提示框
+    return
+  }
+
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+
+  if (!props.isAddProcess) {
+    processConfig.value.flowPermission = flowPermission.value // 编辑时不允许改发起人
+    const res = await editProcess(processConfig.value)
+    if (res.code == 200) {
+      ElMessage.success('编辑流程成功')
+    }
+  }
+  else {
+    processConfig.value.flowPermission = { // 新建时发起人是此时的用户
+      name: user.name, // 用户名
+      targetId: user.id, // 用户id
+      type: 1, // 成员
+    }
+
+    addProcess(processConfig.value).then((res) => {
+      if (res.code === 200) {
+        ElMessage.success('创建流程成功')
+        emits('createProcessSuccess') // 返回列表页
+      }
+    }).catch(() => { // 流程异常情况: 所填写的formID已经存在
+      // emits('createProcessSuccess') // 返回列表页
+    })
+  }
+  loading.close()
+}
+defineExpose({
+  saveSet, initDetail,
+})
+
+const zoomSize = (type: number) => {
+  if (type == 1) {
+    if (nowVal.value == 50) {
+      return
+    }
+    nowVal.value -= 10
+  }
+  else {
+    if (nowVal.value == 300) {
+      return
+    }
+    nowVal.value += 10
+  }
+}
+
+// 改变空节点错误对话框显隐
+const changeTipVisible = (val: boolean) => {
+  tipVisible.value = false
+}
+</script>
+
+<template>
+  <div class="workFlow-setting">
+    <div class="fd-nav-content">
+      <section class="dingflow-design">
+        <!-- <div class="zoom">
+          <div class="zoom-out" :class="nowVal === 50 && 'disabled'" @click="zoomSize(1)" />
+          <span>{{ nowVal }}%</span>
+          <div class="zoom-in" :class="nowVal === 300 && 'disabled'" @click="zoomSize(2)" />
+        </div> -->
+        <!-- 可编辑 -->
+        <div v-if="allowEditNode" class="box-scale" :style="`transform: scale(${nowVal / 100});`">
+          <node-wrap v-if="props.allowEditNode" v-model:nodeConfig="nodeConfig" v-model:flowPermission="flowPermission" />
+          <div class="end-node">
+            <p>结束</p>
+          </div>
+        </div>
+        <!-- 不可编辑 -->
+        <div v-if="!allowEditNode" class="box-scale" :style="`transform: scale(${nowVal / 100});`">
+          <node-wrap-ban :node-config="nodeConfig" :flow-permission="flowPermission" />
+          <div class="end-node">
+            <p>结束</p>
+          </div>
+        </div>
+      </section>
+    </div>
+    <error-dialog v-model:visible="tipVisible" :list="tipList" @changeTipVisible="changeTipVisible" />
+    <approver-drawer :director-max-level="directorMaxLevel" />
+    <copyer-drawer />
+    <condition-drawer />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.workFlow-setting {
+  margin-top: 10px;
+
+  .close-button {
+    display: flex;
+    justify-content: flex-end;
+    margin: 20px;
+  }
+
+  .box-scale {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  // .end-node-circle {
+  .end-node {
+    justify-content: center;
+    flex-direction: column;
+    align-content: center;
+
+    p {
+      width: 280px;
+      height: 40px;
+      line-height: 40px;
+      color: #fff;
+      text-align: center;
+      background-color: #8cafff;
+      border-radius: 4px;
+      font-size: 14px;
+      margin: 0;
+    }
+  }
+}
+
+// }
+</style>
+
+<style>
+@import "../css/workflow.css";
+
+.error-modal-list {
+  width: 455px;
+}
+</style>
diff --git a/src/views/system/process/addProcess.vue b/src/views/system/process/addProcess.vue
new file mode 100644
index 0000000..ad5d290
--- /dev/null
+++ b/src/views/system/process/addProcess.vue
@@ -0,0 +1,234 @@
+<!-- 新建流程页面 -->
+<script lang="ts" setup name="EditProcess">
+import { reactive, ref } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
+import { useRoute, useRouter } from 'vue-router'
+import type { Ref } from 'vue'
+import Setting from '../../setting.vue'
+import type { Iform, dictType } from './process'
+import { getDictByCode } from '@/api/system/dict'
+
+const emits = defineEmits(['close'])
+const processSetting = ref()
+const selectFormId = ref('') // formid
+const ruleFormRef = ref<FormInstance>()
+const form: Ref<Iform> = ref({
+  number: '', // 编号
+  name: '', // 名称
+  business: '', // 关联业务
+  formID: '', // formID
+  desc: '', // 流程描述
+  decisionItem: '', // 可选决策项 1同意驳回拒绝2同意驳回3同意拒绝
+  noticeStarter: '', // 审批结果是否通知发起人
+})
+const decisionItemList = ref<dictType[]>([]) // 可选决策项
+const noticeStarterList = ref<dictType[]>([]) // 可选决策项
+
+// 表单校验
+const rules = reactive<FormRules>({
+  name: [
+    {
+      required: true,
+      message: '流程名称必填',
+      trigger: 'blur',
+    },
+  ],
+  business: [
+    {
+      required: true,
+      message: '关联业务必填',
+      trigger: 'blur',
+    },
+  ],
+  formID: [
+    {
+      required: true,
+      message: 'formID必填',
+      trigger: 'blur',
+    },
+  ],
+  desc: [
+    {
+      required: true,
+      message: '流程描述必填',
+      trigger: 'blur',
+    },
+  ],
+  decisionItem: [
+    {
+      required: true,
+      message: '可选决策项必填',
+      trigger: 'change',
+    },
+  ],
+  noticeStarter: [
+    {
+      required: true,
+      message: '审批结果是否通知发起人必填',
+      trigger: 'change',
+    },
+  ],
+})
+
+// 获取字典值
+async function getDict() {
+  // 可选决策项
+  const response = await getDictByCode('decisionItem')
+  decisionItemList.value = response.data
+
+  // 审批结果是否通知发起人
+  const res = await getDictByCode('noticeStarter')
+  noticeStarterList.value = res.data
+}
+
+const $router = useRouter()
+// 关闭
+const close = () => {
+  $router.back()
+}
+
+// 保存
+const save = async (formEl: FormInstance | undefined) => {
+  if (!formEl) { return }
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      window.sessionStorage.setItem('decisionItem', `${form.value.decisionItem}`)
+      window.sessionStorage.setItem('noticeStarter', `${form.value.noticeStarter}`)
+      // 调setting组件的保存
+      processSetting.value.saveSet()
+    }
+  })
+}
+
+// 监听流程组件--新建流程成功
+const createProcessSuccess = () => {
+  close()
+}
+onMounted(async () => {
+  await getDict()
+})
+</script>
+
+<template>
+  <div class="edit-process">
+    <app-container>
+      <detail-page title="流程管理-新建">
+        <template #btns>
+          <el-button type="primary" @click="save(ruleFormRef)">
+            保存
+          </el-button>
+          <el-button type="info" @click="close">
+            关闭
+          </el-button>
+        </template>
+        <el-form ref="ruleFormRef" :model="form" label-width="180px" :rules="rules">
+          <el-row :gutter="24">
+            <el-col :span="8">
+              <el-form-item label="流程编号:">
+                <el-input v-model="form.number" disabled placeholder="系统自动生成" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="流程名称:" prop="name">
+                <el-input v-model="form.name" placeholder="请输入流程名称" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="formID:" prop="formID">
+                <el-input v-model="form.formID" placeholder="请输入formID" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="关联业务:" prop="business">
+                <el-input v-model="form.business" placeholder="请输入关联业务" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="可选决策项:" prop="decisionItem">
+                <el-select
+                  v-model="form.decisionItem"
+                  clearable
+                  placeholder="请选择可选决策项"
+                  size="default"
+                  style="width: 100%;"
+                >
+                  <el-option
+                    v-for="item in decisionItemList"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="审批结果是否通知发起人:" prop="noticeStarter">
+                <el-select
+                  v-model="form.noticeStarter"
+                  clearable
+                  placeholder="请选择是否通知发起人"
+                  size="default"
+                  style="width: 100%;"
+                >
+                  <el-option
+                    v-for="item in noticeStarterList"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="16">
+              <el-form-item label="流程描述" prop="desc">
+                <el-input v-model="form.desc" type="textarea" autosize placeholder="请输入流程描述" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </detail-page>
+
+      <detail-block title="流程配置" />
+      <setting
+        ref="processSetting"
+        :is-add-process="true"
+        :get-row-data="form"
+        :select-form-id="selectFormId"
+        @createProcessSuccess="createProcessSuccess"
+      />
+    </app-container>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .edit-process {
+    width: 100%;
+
+    .title {
+      margin: 0 0 20px;
+      font-weight: 600;
+    }
+
+    .edit {
+      width: 100%;
+      padding: 12px;
+      background-color: #fff;
+      border-radius: 7px;
+      margin: 0 0 20px;
+
+      .button-area {
+        width: 100%;
+        display: flex;
+        justify-content: flex-end;
+        margin-bottom: 20px;
+      }
+    }
+
+    .set {
+      width: 100%;
+      background-color: #fff;
+      border-radius: 7px;
+      margin: 20px 0;
+    }
+  }
+</style>
diff --git a/src/views/system/process/detailProcess.vue b/src/views/system/process/detailProcess.vue
new file mode 100644
index 0000000..1165f46
--- /dev/null
+++ b/src/views/system/process/detailProcess.vue
@@ -0,0 +1,157 @@
+<!-- 详情 -->
+<script lang="ts" setup name="DetailProcess">
+import { reactive, ref } from 'vue'
+import type { FormInstance } from 'element-plus'
+import { useRoute, useRouter } from 'vue-router'
+import type { Ref } from 'vue'
+import Setting from '../../setting.vue'
+import type { Iform, dictType } from './process'
+import { getDictByCode } from '@/api/system/dict'
+const emits = defineEmits(['close'])
+
+// import WorkFlow from '@/components/workFlow/workFlow.vue'
+const $route = useRoute()
+const selectFormId = ref('')
+const ruleFormRef = ref<FormInstance>()
+const getRowData = ref({}) as any
+const form: Ref<Iform> = ref({
+  number: '', // 编号
+  name: '', // 名称
+  business: '', // 关联业务
+  formID: '', // formID
+  desc: '', // 流程描述
+  decisionItem: '', // 可选决策项 1同意驳回拒绝2同意驳回3同意拒绝
+  noticeStarter: '', // 审批结果是否通知发起人
+})
+const decisionItemList = ref<dictType[]>([]) // 可选决策项
+const noticeStarterList = ref<dictType[]>([]) // 可选决策项
+const $router = useRouter()
+// 关闭
+const close = () => {
+  $router.push('/process/list')
+}
+// 获取字典值
+async function getDict() {
+  // 可选决策项
+  const response = await getDictByCode('decisionItem')
+  decisionItemList.value = response.data
+
+  // 审批结果是否通知发起人
+  const res = await getDictByCode('noticeStarter')
+  noticeStarterList.value = res.data
+}
+getDict()
+
+const getNotice = () => {
+  if (window.sessionStorage.getItem('decisionItem')) { // 可选决策项
+    form.value.decisionItem = window.sessionStorage.getItem('decisionItem')!
+  }
+  if (window.sessionStorage.getItem('noticeStarter')) { // 是否通知发起人
+    form.value.noticeStarter = window.sessionStorage.getItem('noticeStarter')!
+  }
+}
+
+onMounted(() => {
+  const rowData: any = $route.query.rowData
+  getRowData.value = JSON.parse(rowData)
+  selectFormId.value = getRowData.value.formId
+  form.value.formID = getRowData.value.formId
+  form.value.number = getRowData.value.number
+  form.value.name = getRowData.value.name
+  form.value.business = getRowData.value.business
+  form.value.desc = getRowData.value.describe
+})
+</script>
+
+<template>
+  <div class="edit-process">
+    <detail-page title="流程管理-详情">
+      <template #btns>
+        <el-button type="info" @click="close">
+          关闭
+        </el-button>
+      </template>
+      <el-form ref="ruleFormRef" :model="form" label-width="150px">
+        <el-row :gutter="24">
+          <el-col :span="8">
+            <el-form-item label="流程编号:">
+              <el-input v-model="form.number" disabled placeholder="系统自动生成" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="流程名称:">
+              <el-input v-model="form.name" disabled placeholder="请输入流程名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="formID:">
+              <el-input v-model="form.formID" disabled placeholder="请输入formID" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="关联业务:">
+              <el-input v-model="form.business" disabled placeholder="请输入关联业务" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="可选决策项:">
+              <el-select
+                v-model="form.decisionItem"
+                clearable
+                placeholder="请选择可选决策项"
+                size="default"
+                style="width: 100%;"
+                disabled
+              >
+                <el-option
+                  v-for="item in decisionItemList"
+                  :key="item.value"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="审批结果是否通知发起人:">
+              <el-select
+                v-model="form.noticeStarter"
+                clearable
+                placeholder="请选择是否通知发起人"
+                size="default"
+                style="width: 100%;"
+                disabled
+              >
+                <el-option
+                  v-for="item in noticeStarterList"
+                  :key="item.value"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="16">
+            <el-form-item label="流程描述">
+              <el-input v-model="form.desc" disabled type="textarea" autosize placeholder="请输入流程描述" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </detail-page>
+    <detail-block title="流程配置" />
+    <setting :allow-edit-node="false" :select-form-id="selectFormId" @notice="getNotice" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .edit-process {
+    width: 100%;
+    padding: 10px;
+
+    .title {
+      margin: 0 0 20px;
+      font-weight: 600;
+    }
+  }
+</style>
diff --git a/src/views/system/process/editProcess.vue b/src/views/system/process/editProcess.vue
new file mode 100644
index 0000000..4ef4764
--- /dev/null
+++ b/src/views/system/process/editProcess.vue
@@ -0,0 +1,248 @@
+<!-- 编辑 -->
+<script lang="ts" setup name="EditProcess">
+import { onMounted, reactive, ref } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
+import { useRoute, useRouter } from 'vue-router'
+import type { Ref } from 'vue'
+import setting from '../../setting.vue'
+import type { Iform, dictType } from './process'
+import { getDictByCode } from '@/api/system/dict'
+
+const emits = defineEmits(['close'])
+const processSetting = ref()
+const selectFormId = ref('') // formid
+const $route = useRoute()
+const getRowData = ref({}) as any
+const ruleFormRef = ref<FormInstance>()
+const form: Ref<Iform> = ref({
+  number: '', // 编号
+  name: '', // 名称
+  business: '', // 关联业务
+  formID: '', // formID
+  desc: '', // 流程描述
+  decisionItem: '', // 可选决策项 1同意驳回拒绝2同意驳回3同意拒绝
+  noticeStarter: '', // 审批结果是否通知发起人
+})
+const rules = reactive<FormRules>({
+  name: [
+    {
+      required: true,
+      message: '流程名称必填',
+      trigger: 'blur',
+    },
+  ],
+  business: [
+    {
+      required: true,
+      message: '关联业务必填',
+      trigger: 'blur',
+    },
+  ],
+  formID: [
+    {
+      required: true,
+      message: 'formID必填',
+      trigger: 'blur',
+    },
+  ],
+  desc: [
+    {
+      required: true,
+      message: '流程描述必填',
+      trigger: 'blur',
+    },
+  ],
+  decisionItem: [
+    {
+      required: true,
+      message: '可选决策项必填',
+      trigger: 'change',
+    },
+  ],
+  noticeStarter: [
+    {
+      required: true,
+      message: '审批结果是否通知发起人必填',
+      trigger: 'change',
+    },
+  ],
+})
+const decisionItemList = ref<dictType[]>([]) // 可选决策项
+const noticeStarterList = ref<dictType[]>([]) // 可选决策项
+const $router = useRouter()
+// 关闭
+const close = () => {
+  $router.back()
+}
+// 获取字典值
+async function getDict() {
+  // 可选决策项
+  const response = await getDictByCode('decisionItem')
+  decisionItemList.value = response.data
+
+  // 审批结果是否通知发起人
+  const res = await getDictByCode('noticeStarter')
+  noticeStarterList.value = res.data
+}
+getDict()
+
+// 保存
+const save = async (formEl: FormInstance | undefined) => {
+  if (!formEl) { return }
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      window.sessionStorage.setItem('decisionItem', `${form.value.decisionItem}`)
+      window.sessionStorage.setItem('noticeStarter', `${form.value.noticeStarter}`)
+      // 调保存接口
+      getRowData.value.name = form.value.name // 流程名称
+      getRowData.value.business = form.value.business // 关联业务
+      getRowData.value.desc = form.value.desc // 流程名称
+      getRowData.value.formDesc = form.value.desc // 流程名称
+      console.log('999999999999999', getRowData.value)
+      processSetting.value.saveSet('edit', getRowData.value)
+    }
+    else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+
+// 监听可选决策项、是否通知发起人获取到数据了
+const getNotice = () => {
+  if (window.sessionStorage.getItem('decisionItem')) { // 可选决策项
+    form.value.decisionItem = window.sessionStorage.getItem('decisionItem')!
+  }
+  if (window.sessionStorage.getItem('noticeStarter')) { // 是否通知发起人
+    form.value.noticeStarter = window.sessionStorage.getItem('noticeStarter')!
+  }
+}
+
+onMounted(() => {
+  const rowData: any = $route.query.rowData
+  getRowData.value = JSON.parse(rowData)
+  selectFormId.value = getRowData.value.formId
+  form.value.formID = getRowData.value.formId
+  form.value.number = getRowData.value.number
+  form.value.name = getRowData.value.name
+  form.value.business = getRowData.value.business
+  form.value.desc = getRowData.value.describe
+})
+</script>
+
+<template>
+  <div class="edit-process">
+    <app-container>
+      <detail-page title="流程管理-编辑">
+        <template #btns>
+          <el-button type="primary" @click="save(ruleFormRef)">
+            保存
+          </el-button>
+          <el-button type="info" @click="close">
+            关闭
+          </el-button>
+        </template>
+        <el-form ref="ruleFormRef" :model="form" label-width="180px" :rules="rules">
+          <el-row :gutter="24">
+            <el-col :span="8">
+              <el-form-item label="流程编号:">
+                <el-input v-model="form.number" disabled placeholder="系统自动生成" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="流程名称:" prop="name">
+                <el-input v-model="form.name" placeholder="请输入流程名称" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="formID:" prop="formID">
+                <el-input v-model="form.formID" placeholder="请输入formID" disabled />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="关联业务:" prop="business">
+                <el-input v-model="form.business" placeholder="请输入关联业务" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="可选决策项:" prop="decisionItem">
+                <el-select
+                  v-model="form.decisionItem"
+                  clearable
+                  placeholder="请选择可选决策项"
+                  size="default"
+                  style="width: 100%;"
+                >
+                  <el-option
+                    v-for="item in decisionItemList"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="审批结果是否通知发起人:" prop="noticeStarter">
+                <el-select
+                  v-model="form.noticeStarter"
+                  clearable
+                  placeholder="请选择是否通知发起人"
+                  size="default"
+                  style="width: 100%;"
+                >
+                  <el-option
+                    v-for="item in noticeStarterList"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="16">
+              <el-form-item label="流程描述" prop="desc">
+                <el-input v-model="form.desc" type="textarea" autosize placeholder="请输入流程描述" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </detail-page>
+
+      <detail-block title="流程配置" />
+      <setting ref="processSetting" :get-row-data="getRowData" :select-form-id="selectFormId" @notice="getNotice" />
+    </app-container>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .edit-process {
+    width: 100%;
+
+    .title {
+      margin: 0 0 20px;
+      font-weight: 600;
+    }
+
+    .edit {
+      width: 100%;
+      padding: 12px;
+      background-color: #fff;
+      border-radius: 7px;
+      margin: 0 0 20px;
+
+      .button-area {
+        width: 100%;
+        display: flex;
+        justify-content: flex-end;
+        margin-bottom: 20px;
+      }
+    }
+
+    .set {
+      width: 100%;
+      background-color: #fff;
+      border-radius: 7px;
+      margin: 20px 0;
+    }
+  }
+</style>
diff --git a/src/views/system/process/process.ts b/src/views/system/process/process.ts
new file mode 100644
index 0000000..2e183f8
--- /dev/null
+++ b/src/views/system/process/process.ts
@@ -0,0 +1,47 @@
+export interface IlistQuery {
+  deploymentId: string // 流程部署id
+  suspensionState: number | string // 流程状态：1激活 2废止
+  number: string // 编号
+  name: string // 名称
+  business: string // 关联业务
+  person: string // 负责人
+  beginTime: string // 开始时间
+  endTime: string // 结束时间
+  status: string // 当前流程状态
+  describe?: string // 流程描述
+  offset: number
+  limit: number
+}
+// 字典
+export interface dictType {
+  id: string
+  name: string
+  value: string
+}
+export interface Iform {
+  number: string // 编号
+  name: string // 名称
+  business: string // 关联业务
+  desc?: string // 流程描述
+  formID?: string
+  decisionItem: string // 可选决策项
+  noticeStarter: string // 审批结果是否通知发起人
+}
+
+// 关联业务列表
+export interface IBusinessList {
+  formId: string
+  formName: string
+}
+
+export interface ITipList {
+  type: string
+  name?: string
+}
+// 流程基本信息
+export interface IworkFlowDef {
+  name: string // 名称
+  decisionItem?: number | string // 可选决策项
+  noticeStarter?: number | string // 审批结果是否通知发起人
+}
+

diff --git a/.env.development b/.env.development
index 54c38a4..1ef3600 100644
--- a/.env.development
+++ b/.env.development
@@ -2,6 +2,7 @@
 VITE_APP_TITLE = 标题
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
 VITE_APP_API_BASEURL = http://XXXXXXX:XXXXXXX
+
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VITE_APP_DEBUG_TOOL =
 
diff --git a/.env.production b/.env.production
index 427b973..ed8a601 100644
--- a/.env.production
+++ b/.env.production
@@ -1,7 +1,7 @@
 NODE_ENV = production
 
 # 页面标题
-VITE_APP_TITLE = 计量业务系统
+VITE_APP_TITLE = 标题
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
 VITE_APP_API_BASEURL = http://XXXXXXX:XXXXXXX
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
diff --git a/src/api/system/process.ts b/src/api/system/process.ts
new file mode 100644
index 0000000..c2d4419
--- /dev/null
+++ b/src/api/system/process.ts
@@ -0,0 +1,123 @@
+// 流程管理接口
+import request from '../index'
+// import type { IlistQuery } from '@/views/system/process/process'
+const prefix = '/system/flow'
+
+// 列表
+export function getProcessList(data: { offset: number; limit: number }) {
+  return request({
+    url: `${prefix}/listPage?offset=${data.offset}&limit=${data.limit}`,
+    method: 'post',
+    data,
+  })
+}
+
+// 删除
+export function delProcessList(id: string) {
+  const param = {
+    deployId: id,
+  }
+  return request({
+    url: `${prefix}/delete`,
+    method: 'post',
+    data: param,
+  })
+}
+// 废止
+export function updateState(id: string, state: number) {
+  const param = {
+    deployId: id,
+    state,
+  }
+  return request({
+    url: `${prefix}/updateState`,
+    method: 'post',
+    data: param,
+  })
+}
+
+// 加载流程定义
+export function unloadProcess(params: Object) {
+  const param = {
+    _value: params,
+  }
+  return request({
+    url: `${prefix}/jsonToBpmn`,
+    method: 'post',
+    data: param,
+  })
+}
+
+// 流程定义编辑
+export function editProcess(params: Object) {
+  const param = {
+    _value: params,
+  }
+  return request({
+    url: `${prefix}/update`,
+    method: 'post',
+    data: param,
+  })
+}
+
+// 新建流程
+export function addProcess(params: Object) {
+  const param = {
+    _value: params,
+  }
+  return request({
+    url: `${prefix}/jsonToBpmn`,
+    method: 'post',
+    data: param,
+  })
+}
+
+// 获取流程定义详情
+export function getProcessDetail(formId: string) {
+  const param = {
+    formId,
+  }
+  return request({
+    url: `${prefix}/detail`,
+    method: 'post',
+    data: param,
+  })
+}
+
+// 获取关联业务列表
+export function getBusinessList() {
+  return request({
+    url: `${prefix}/flowFormList`,
+    method: 'get',
+  })
+}
+
+// 获取发起人的主管层级数
+export function getDirectorLevel(userId: number | string) {
+  return request({
+    url: `${prefix}/directorLevel`,
+    method: 'get',
+    params: { userId },
+  })
+}
+
+// 导出列表
+export function exportProcessList(data: {
+  deploymentId: string
+  suspensionState: string
+  number: string
+  name: string
+  business: string
+  person: string
+  beginTime: string
+  endTime: string
+  status: string
+  ids: string[]
+}) {
+  return request({
+    url: `${prefix}/listExport`,
+    method: 'post',
+    responseType: 'blob',
+    data,
+  })
+}
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index c129719..d6d1b71 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -154,6 +154,69 @@
     ],
   },
   {
+    path: '/process',
+    component: Layout,
+    redirect: '/process/list',
+    name: 'Process',
+    meta: {
+      title: '流程管理',
+      icon: 'ep:key',
+      auth: '/sys/process',
+    },
+    children: [
+      {
+        path: 'list',
+        name: 'ProcessList',
+        component: () => import('@/views/system/process/process.vue'),
+        meta: {
+          title: '流程管理',
+          icon: 'ep:key',
+          auth: '/sys/process',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/process',
+        },
+      },
+      {
+        path: 'edit',
+        name: 'ProcessListEdit',
+        component: () => import('@/views/system/process/editProcess.vue'),
+        meta: {
+          title: '流程管理',
+          icon: 'ep:key',
+          auth: '/sys/process',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/process/list',
+        },
+      },
+      {
+        path: 'detail',
+        name: 'ProcessListDetail',
+        component: () => import('@/views/system/process/detailProcess.vue'),
+        meta: {
+          title: '流程管理',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/process/list',
+        },
+      },
+      {
+        path: 'add',
+        name: 'ProcessListAdd',
+        component: () => import('@/views/system/process/addProcess.vue'),
+        meta: {
+          title: '流程管理',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/process/list',
+        },
+      },
+    ],
+  },
+  {
     path: '/tenant',
     component: Layout,
     redirect: '/tenant/list',
diff --git a/src/views/setting.vue b/src/views/setting.vue
new file mode 100644
index 0000000..2a00bf3
--- /dev/null
+++ b/src/views/setting.vue
@@ -0,0 +1,321 @@
+<script setup lang="ts" name="Setting">
+import { ElLoading, ElMessage } from 'element-plus'
+import { defineExpose, nextTick, onMounted, ref } from 'vue'
+import useWorkFlowStore from '@/store/modules/workFlow'
+import errorDialog from '@/components/dialog/errorDialog.vue'
+import approverDrawer from '@/components/drawer/approverDrawer.vue'
+import copyerDrawer from '@/components/drawer/copyerDrawer.vue'
+import conditionDrawer from '@/components/drawer/conditionDrawer.vue'
+import { addProcess, editProcess, getDirectorLevel, getProcessDetail } from '@/api/system/process'
+import userStore from '@/store/modules/user'
+import type { ITipList, IworkFlowDef } from '@/views/system/process/process'
+const props = defineProps({
+  allowEditNode: {
+    type: Boolean,
+    default: true,
+  },
+  getRowData: {
+    type: Object,
+    default: () => {},
+  },
+  selectFormId: String,
+  isAddProcess: {
+    type: Boolean,
+    default: false,
+  },
+})
+const emits = defineEmits(['createProcessSuccess', 'notice'])
+const processConfig = ref({}) as any
+
+const user = userStore()
+const workFlowStore = useWorkFlowStore()
+const tipList = ref<ITipList[]>([]) // 统计空节点的数组
+const tipVisible = ref(false) // 控制提示空节点对话框显隐
+const nowVal = ref(100)
+const nodeConfig = ref({})
+const workFlowDef = ref<IworkFlowDef>({
+  name: '审批流程',
+})
+const flowPermission = ref([])
+const directorMaxLevel = ref(0)
+
+// 初始化--请求流程图详细信息
+const initDetail = async (formid: string) => {
+  const res = await getProcessDetail(formid)
+  return res.data
+}
+onMounted(async () => {
+  let max = 0 // 审批主管最大层级
+
+  // 获取此用户的审批主管的最大层级
+  getDirectorLevel(user.id).then((res) => {
+    max = res.data.level
+  })
+  window.sessionStorage.setItem('maxLevel', `${max}`)
+  nextTick(async () => {
+    let data
+    console.log('=====', props.selectFormId)
+    if (!props.isAddProcess && props.selectFormId) { // 非新建流程--调流程详情接口
+      console.log('获取流程详情')
+      data = await initDetail(props.selectFormId)
+    }
+    else { // 新建流程
+      data = {
+        tableId: 1,
+        workFlowDef: {
+          name: '审批流程',
+        },
+        directorMaxLevel: max,
+        flowPermission: [],
+        nodeConfig: {
+          nodeName: '发起人',
+          type: 0,
+          priorityLevel: '',
+          settype: '',
+          selectMode: '',
+          selectRange: '',
+          directorLevel: '',
+          examineMode: '',
+          noHanderAction: '',
+          examineEndDirectorLevel: '',
+          ccSelfSelectFlag: '',
+          conditionList: [],
+          nodeUserList: [],
+          conditionNodes: [],
+        },
+      }
+    }
+    processConfig.value = data // 流程设置
+    const {
+      nodeConfig: nodes, // 节点设置
+      flowPermission: flows, // 发起人
+      workFlowDef: works, // 流程基本信息
+      tableId,
+    } = data
+    nodeConfig.value = nodes // 节点配置
+    flowPermission.value = flows // 发起人
+    directorMaxLevel.value = max // 用户主管最大层级数
+    workFlowDef.value = works // 流程基本信息
+    console.log('9090909090909090', workFlowDef.value.decisionItem)
+
+    window.sessionStorage.setItem('decisionItem', `${workFlowDef.value.decisionItem}`)
+    window.sessionStorage.setItem('noticeStarter', `${workFlowDef.value.noticeStarter}`)
+    console.log('在这里获得了这条数据的可选决策项和是否通知发起人')
+    emits('notice') // 通知可选决策项和是否通知发起人已获得数据
+    workFlowStore.setTableId(tableId)
+  })
+})
+
+// 统计空节点（红色感叹号）
+const reErr = ({ childNode }: any) => {
+  if (childNode) {
+    const { type, error, nodeName, conditionNodes } = childNode
+    if (type == 1 || type == 2) {
+      if (error) {
+        tipList.value.push({
+          name: nodeName,
+          type: ['', '审核人', '抄送人'][type],
+        })
+      }
+      reErr(childNode)
+    }
+    else if (type == 3) {
+      reErr(childNode)
+    }
+    else if (type == 4) {
+      reErr(childNode)
+      for (let i = 0; i < conditionNodes.length; i++) {
+        if (conditionNodes[i].error) {
+          tipList.value.push({ name: conditionNodes[i].nodeName, type: '条件' })
+        }
+        reErr(conditionNodes[i])
+      }
+    }
+  }
+  else {
+    childNode = null
+  }
+}
+
+// 保存流程图
+const saveSet = async (type: string, getRowData: any) => {
+  if (type === 'edit') { // 编辑
+    console.log('000000000', getRowData)
+
+    processConfig.value.formId = props.getRowData.formId // 已有formid
+    processConfig.value.formName = getRowData.business // 表单名称、关联业务
+    processConfig.value.formDesc = getRowData.formDesc // 描述
+    processConfig.value.formContent = getRowData.formDesc // 描述
+    processConfig.value.workFlowDef.name = getRowData.name // 流程名称
+    processConfig.value.workFlowDef.flowKey = props.getRowData.flowKey
+    processConfig.value.workFlowDef.directorId = props.getRowData.directorId
+  }
+  else { // 新建
+    processConfig.value.formId = props.getRowData.formID
+    processConfig.value.formName = props.getRowData.business
+    processConfig.value.formDesc = props.getRowData.desc
+    processConfig.value.formContent = props.getRowData.desc
+    processConfig.value.workFlowDef.directorId = user.id
+    processConfig.value.workFlowDef.name = props.getRowData.name // 流程名称
+  }
+  const decisionItem = window.sessionStorage.getItem('decisionItem')
+  const noticeStarter = window.sessionStorage.getItem('noticeStarter')
+  if (decisionItem) {
+    processConfig.value.workFlowDef.decisionItem = parseInt(decisionItem) // 可选决策项
+  }
+  if (noticeStarter) {
+    processConfig.value.workFlowDef.noticeStarter = parseInt(noticeStarter) // 审批结果通知发起人
+  }
+
+  // workFlowStore.setIsTried(true)
+  tipList.value = []
+  reErr(processConfig.value.nodeConfig) // 统计空节点
+  if (tipList.value.length != 0) { // 存在空节点
+    let approverCount = 0
+    let conditonCount = 0
+    tipList.value.forEach((item: { type: string }) => {
+      if (item.type === '审核人') {
+        approverCount += 1
+      }
+      else if (item.type === '条件') {
+        conditonCount += 1
+      }
+    })
+    workFlowStore.conditonErrorCount = conditonCount // 存入store
+    workFlowStore.approverErrorCount = approverCount // 存入store
+    tipVisible.value = true // 显示空节点提示框
+    return
+  }
+
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+
+  if (!props.isAddProcess) {
+    processConfig.value.flowPermission = flowPermission.value // 编辑时不允许改发起人
+    const res = await editProcess(processConfig.value)
+    if (res.code == 200) {
+      ElMessage.success('编辑流程成功')
+    }
+  }
+  else {
+    processConfig.value.flowPermission = { // 新建时发起人是此时的用户
+      name: user.name, // 用户名
+      targetId: user.id, // 用户id
+      type: 1, // 成员
+    }
+
+    addProcess(processConfig.value).then((res) => {
+      if (res.code === 200) {
+        ElMessage.success('创建流程成功')
+        emits('createProcessSuccess') // 返回列表页
+      }
+    }).catch(() => { // 流程异常情况: 所填写的formID已经存在
+      // emits('createProcessSuccess') // 返回列表页
+    })
+  }
+  loading.close()
+}
+defineExpose({
+  saveSet, initDetail,
+})
+
+const zoomSize = (type: number) => {
+  if (type == 1) {
+    if (nowVal.value == 50) {
+      return
+    }
+    nowVal.value -= 10
+  }
+  else {
+    if (nowVal.value == 300) {
+      return
+    }
+    nowVal.value += 10
+  }
+}
+
+// 改变空节点错误对话框显隐
+const changeTipVisible = (val: boolean) => {
+  tipVisible.value = false
+}
+</script>
+
+<template>
+  <div class="workFlow-setting">
+    <div class="fd-nav-content">
+      <section class="dingflow-design">
+        <!-- <div class="zoom">
+          <div class="zoom-out" :class="nowVal === 50 && 'disabled'" @click="zoomSize(1)" />
+          <span>{{ nowVal }}%</span>
+          <div class="zoom-in" :class="nowVal === 300 && 'disabled'" @click="zoomSize(2)" />
+        </div> -->
+        <!-- 可编辑 -->
+        <div v-if="allowEditNode" class="box-scale" :style="`transform: scale(${nowVal / 100});`">
+          <node-wrap v-if="props.allowEditNode" v-model:nodeConfig="nodeConfig" v-model:flowPermission="flowPermission" />
+          <div class="end-node">
+            <p>结束</p>
+          </div>
+        </div>
+        <!-- 不可编辑 -->
+        <div v-if="!allowEditNode" class="box-scale" :style="`transform: scale(${nowVal / 100});`">
+          <node-wrap-ban :node-config="nodeConfig" :flow-permission="flowPermission" />
+          <div class="end-node">
+            <p>结束</p>
+          </div>
+        </div>
+      </section>
+    </div>
+    <error-dialog v-model:visible="tipVisible" :list="tipList" @changeTipVisible="changeTipVisible" />
+    <approver-drawer :director-max-level="directorMaxLevel" />
+    <copyer-drawer />
+    <condition-drawer />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.workFlow-setting {
+  margin-top: 10px;
+
+  .close-button {
+    display: flex;
+    justify-content: flex-end;
+    margin: 20px;
+  }
+
+  .box-scale {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  // .end-node-circle {
+  .end-node {
+    justify-content: center;
+    flex-direction: column;
+    align-content: center;
+
+    p {
+      width: 280px;
+      height: 40px;
+      line-height: 40px;
+      color: #fff;
+      text-align: center;
+      background-color: #8cafff;
+      border-radius: 4px;
+      font-size: 14px;
+      margin: 0;
+    }
+  }
+}
+
+// }
+</style>
+
+<style>
+@import "../css/workflow.css";
+
+.error-modal-list {
+  width: 455px;
+}
+</style>
diff --git a/src/views/system/process/addProcess.vue b/src/views/system/process/addProcess.vue
new file mode 100644
index 0000000..ad5d290
--- /dev/null
+++ b/src/views/system/process/addProcess.vue
@@ -0,0 +1,234 @@
+<!-- 新建流程页面 -->
+<script lang="ts" setup name="EditProcess">
+import { reactive, ref } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
+import { useRoute, useRouter } from 'vue-router'
+import type { Ref } from 'vue'
+import Setting from '../../setting.vue'
+import type { Iform, dictType } from './process'
+import { getDictByCode } from '@/api/system/dict'
+
+const emits = defineEmits(['close'])
+const processSetting = ref()
+const selectFormId = ref('') // formid
+const ruleFormRef = ref<FormInstance>()
+const form: Ref<Iform> = ref({
+  number: '', // 编号
+  name: '', // 名称
+  business: '', // 关联业务
+  formID: '', // formID
+  desc: '', // 流程描述
+  decisionItem: '', // 可选决策项 1同意驳回拒绝2同意驳回3同意拒绝
+  noticeStarter: '', // 审批结果是否通知发起人
+})
+const decisionItemList = ref<dictType[]>([]) // 可选决策项
+const noticeStarterList = ref<dictType[]>([]) // 可选决策项
+
+// 表单校验
+const rules = reactive<FormRules>({
+  name: [
+    {
+      required: true,
+      message: '流程名称必填',
+      trigger: 'blur',
+    },
+  ],
+  business: [
+    {
+      required: true,
+      message: '关联业务必填',
+      trigger: 'blur',
+    },
+  ],
+  formID: [
+    {
+      required: true,
+      message: 'formID必填',
+      trigger: 'blur',
+    },
+  ],
+  desc: [
+    {
+      required: true,
+      message: '流程描述必填',
+      trigger: 'blur',
+    },
+  ],
+  decisionItem: [
+    {
+      required: true,
+      message: '可选决策项必填',
+      trigger: 'change',
+    },
+  ],
+  noticeStarter: [
+    {
+      required: true,
+      message: '审批结果是否通知发起人必填',
+      trigger: 'change',
+    },
+  ],
+})
+
+// 获取字典值
+async function getDict() {
+  // 可选决策项
+  const response = await getDictByCode('decisionItem')
+  decisionItemList.value = response.data
+
+  // 审批结果是否通知发起人
+  const res = await getDictByCode('noticeStarter')
+  noticeStarterList.value = res.data
+}
+
+const $router = useRouter()
+// 关闭
+const close = () => {
+  $router.back()
+}
+
+// 保存
+const save = async (formEl: FormInstance | undefined) => {
+  if (!formEl) { return }
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      window.sessionStorage.setItem('decisionItem', `${form.value.decisionItem}`)
+      window.sessionStorage.setItem('noticeStarter', `${form.value.noticeStarter}`)
+      // 调setting组件的保存
+      processSetting.value.saveSet()
+    }
+  })
+}
+
+// 监听流程组件--新建流程成功
+const createProcessSuccess = () => {
+  close()
+}
+onMounted(async () => {
+  await getDict()
+})
+</script>
+
+<template>
+  <div class="edit-process">
+    <app-container>
+      <detail-page title="流程管理-新建">
+        <template #btns>
+          <el-button type="primary" @click="save(ruleFormRef)">
+            保存
+          </el-button>
+          <el-button type="info" @click="close">
+            关闭
+          </el-button>
+        </template>
+        <el-form ref="ruleFormRef" :model="form" label-width="180px" :rules="rules">
+          <el-row :gutter="24">
+            <el-col :span="8">
+              <el-form-item label="流程编号:">
+                <el-input v-model="form.number" disabled placeholder="系统自动生成" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="流程名称:" prop="name">
+                <el-input v-model="form.name" placeholder="请输入流程名称" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="formID:" prop="formID">
+                <el-input v-model="form.formID" placeholder="请输入formID" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="关联业务:" prop="business">
+                <el-input v-model="form.business" placeholder="请输入关联业务" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="可选决策项:" prop="decisionItem">
+                <el-select
+                  v-model="form.decisionItem"
+                  clearable
+                  placeholder="请选择可选决策项"
+                  size="default"
+                  style="width: 100%;"
+                >
+                  <el-option
+                    v-for="item in decisionItemList"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="审批结果是否通知发起人:" prop="noticeStarter">
+                <el-select
+                  v-model="form.noticeStarter"
+                  clearable
+                  placeholder="请选择是否通知发起人"
+                  size="default"
+                  style="width: 100%;"
+                >
+                  <el-option
+                    v-for="item in noticeStarterList"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="16">
+              <el-form-item label="流程描述" prop="desc">
+                <el-input v-model="form.desc" type="textarea" autosize placeholder="请输入流程描述" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </detail-page>
+
+      <detail-block title="流程配置" />
+      <setting
+        ref="processSetting"
+        :is-add-process="true"
+        :get-row-data="form"
+        :select-form-id="selectFormId"
+        @createProcessSuccess="createProcessSuccess"
+      />
+    </app-container>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .edit-process {
+    width: 100%;
+
+    .title {
+      margin: 0 0 20px;
+      font-weight: 600;
+    }
+
+    .edit {
+      width: 100%;
+      padding: 12px;
+      background-color: #fff;
+      border-radius: 7px;
+      margin: 0 0 20px;
+
+      .button-area {
+        width: 100%;
+        display: flex;
+        justify-content: flex-end;
+        margin-bottom: 20px;
+      }
+    }
+
+    .set {
+      width: 100%;
+      background-color: #fff;
+      border-radius: 7px;
+      margin: 20px 0;
+    }
+  }
+</style>
diff --git a/src/views/system/process/detailProcess.vue b/src/views/system/process/detailProcess.vue
new file mode 100644
index 0000000..1165f46
--- /dev/null
+++ b/src/views/system/process/detailProcess.vue
@@ -0,0 +1,157 @@
+<!-- 详情 -->
+<script lang="ts" setup name="DetailProcess">
+import { reactive, ref } from 'vue'
+import type { FormInstance } from 'element-plus'
+import { useRoute, useRouter } from 'vue-router'
+import type { Ref } from 'vue'
+import Setting from '../../setting.vue'
+import type { Iform, dictType } from './process'
+import { getDictByCode } from '@/api/system/dict'
+const emits = defineEmits(['close'])
+
+// import WorkFlow from '@/components/workFlow/workFlow.vue'
+const $route = useRoute()
+const selectFormId = ref('')
+const ruleFormRef = ref<FormInstance>()
+const getRowData = ref({}) as any
+const form: Ref<Iform> = ref({
+  number: '', // 编号
+  name: '', // 名称
+  business: '', // 关联业务
+  formID: '', // formID
+  desc: '', // 流程描述
+  decisionItem: '', // 可选决策项 1同意驳回拒绝2同意驳回3同意拒绝
+  noticeStarter: '', // 审批结果是否通知发起人
+})
+const decisionItemList = ref<dictType[]>([]) // 可选决策项
+const noticeStarterList = ref<dictType[]>([]) // 可选决策项
+const $router = useRouter()
+// 关闭
+const close = () => {
+  $router.push('/process/list')
+}
+// 获取字典值
+async function getDict() {
+  // 可选决策项
+  const response = await getDictByCode('decisionItem')
+  decisionItemList.value = response.data
+
+  // 审批结果是否通知发起人
+  const res = await getDictByCode('noticeStarter')
+  noticeStarterList.value = res.data
+}
+getDict()
+
+const getNotice = () => {
+  if (window.sessionStorage.getItem('decisionItem')) { // 可选决策项
+    form.value.decisionItem = window.sessionStorage.getItem('decisionItem')!
+  }
+  if (window.sessionStorage.getItem('noticeStarter')) { // 是否通知发起人
+    form.value.noticeStarter = window.sessionStorage.getItem('noticeStarter')!
+  }
+}
+
+onMounted(() => {
+  const rowData: any = $route.query.rowData
+  getRowData.value = JSON.parse(rowData)
+  selectFormId.value = getRowData.value.formId
+  form.value.formID = getRowData.value.formId
+  form.value.number = getRowData.value.number
+  form.value.name = getRowData.value.name
+  form.value.business = getRowData.value.business
+  form.value.desc = getRowData.value.describe
+})
+</script>
+
+<template>
+  <div class="edit-process">
+    <detail-page title="流程管理-详情">
+      <template #btns>
+        <el-button type="info" @click="close">
+          关闭
+        </el-button>
+      </template>
+      <el-form ref="ruleFormRef" :model="form" label-width="150px">
+        <el-row :gutter="24">
+          <el-col :span="8">
+            <el-form-item label="流程编号:">
+              <el-input v-model="form.number" disabled placeholder="系统自动生成" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="流程名称:">
+              <el-input v-model="form.name" disabled placeholder="请输入流程名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="formID:">
+              <el-input v-model="form.formID" disabled placeholder="请输入formID" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="关联业务:">
+              <el-input v-model="form.business" disabled placeholder="请输入关联业务" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="可选决策项:">
+              <el-select
+                v-model="form.decisionItem"
+                clearable
+                placeholder="请选择可选决策项"
+                size="default"
+                style="width: 100%;"
+                disabled
+              >
+                <el-option
+                  v-for="item in decisionItemList"
+                  :key="item.value"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="审批结果是否通知发起人:">
+              <el-select
+                v-model="form.noticeStarter"
+                clearable
+                placeholder="请选择是否通知发起人"
+                size="default"
+                style="width: 100%;"
+                disabled
+              >
+                <el-option
+                  v-for="item in noticeStarterList"
+                  :key="item.value"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="16">
+            <el-form-item label="流程描述">
+              <el-input v-model="form.desc" disabled type="textarea" autosize placeholder="请输入流程描述" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </detail-page>
+    <detail-block title="流程配置" />
+    <setting :allow-edit-node="false" :select-form-id="selectFormId" @notice="getNotice" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .edit-process {
+    width: 100%;
+    padding: 10px;
+
+    .title {
+      margin: 0 0 20px;
+      font-weight: 600;
+    }
+  }
+</style>
diff --git a/src/views/system/process/editProcess.vue b/src/views/system/process/editProcess.vue
new file mode 100644
index 0000000..4ef4764
--- /dev/null
+++ b/src/views/system/process/editProcess.vue
@@ -0,0 +1,248 @@
+<!-- 编辑 -->
+<script lang="ts" setup name="EditProcess">
+import { onMounted, reactive, ref } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
+import { useRoute, useRouter } from 'vue-router'
+import type { Ref } from 'vue'
+import setting from '../../setting.vue'
+import type { Iform, dictType } from './process'
+import { getDictByCode } from '@/api/system/dict'
+
+const emits = defineEmits(['close'])
+const processSetting = ref()
+const selectFormId = ref('') // formid
+const $route = useRoute()
+const getRowData = ref({}) as any
+const ruleFormRef = ref<FormInstance>()
+const form: Ref<Iform> = ref({
+  number: '', // 编号
+  name: '', // 名称
+  business: '', // 关联业务
+  formID: '', // formID
+  desc: '', // 流程描述
+  decisionItem: '', // 可选决策项 1同意驳回拒绝2同意驳回3同意拒绝
+  noticeStarter: '', // 审批结果是否通知发起人
+})
+const rules = reactive<FormRules>({
+  name: [
+    {
+      required: true,
+      message: '流程名称必填',
+      trigger: 'blur',
+    },
+  ],
+  business: [
+    {
+      required: true,
+      message: '关联业务必填',
+      trigger: 'blur',
+    },
+  ],
+  formID: [
+    {
+      required: true,
+      message: 'formID必填',
+      trigger: 'blur',
+    },
+  ],
+  desc: [
+    {
+      required: true,
+      message: '流程描述必填',
+      trigger: 'blur',
+    },
+  ],
+  decisionItem: [
+    {
+      required: true,
+      message: '可选决策项必填',
+      trigger: 'change',
+    },
+  ],
+  noticeStarter: [
+    {
+      required: true,
+      message: '审批结果是否通知发起人必填',
+      trigger: 'change',
+    },
+  ],
+})
+const decisionItemList = ref<dictType[]>([]) // 可选决策项
+const noticeStarterList = ref<dictType[]>([]) // 可选决策项
+const $router = useRouter()
+// 关闭
+const close = () => {
+  $router.back()
+}
+// 获取字典值
+async function getDict() {
+  // 可选决策项
+  const response = await getDictByCode('decisionItem')
+  decisionItemList.value = response.data
+
+  // 审批结果是否通知发起人
+  const res = await getDictByCode('noticeStarter')
+  noticeStarterList.value = res.data
+}
+getDict()
+
+// 保存
+const save = async (formEl: FormInstance | undefined) => {
+  if (!formEl) { return }
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      window.sessionStorage.setItem('decisionItem', `${form.value.decisionItem}`)
+      window.sessionStorage.setItem('noticeStarter', `${form.value.noticeStarter}`)
+      // 调保存接口
+      getRowData.value.name = form.value.name // 流程名称
+      getRowData.value.business = form.value.business // 关联业务
+      getRowData.value.desc = form.value.desc // 流程名称
+      getRowData.value.formDesc = form.value.desc // 流程名称
+      console.log('999999999999999', getRowData.value)
+      processSetting.value.saveSet('edit', getRowData.value)
+    }
+    else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+
+// 监听可选决策项、是否通知发起人获取到数据了
+const getNotice = () => {
+  if (window.sessionStorage.getItem('decisionItem')) { // 可选决策项
+    form.value.decisionItem = window.sessionStorage.getItem('decisionItem')!
+  }
+  if (window.sessionStorage.getItem('noticeStarter')) { // 是否通知发起人
+    form.value.noticeStarter = window.sessionStorage.getItem('noticeStarter')!
+  }
+}
+
+onMounted(() => {
+  const rowData: any = $route.query.rowData
+  getRowData.value = JSON.parse(rowData)
+  selectFormId.value = getRowData.value.formId
+  form.value.formID = getRowData.value.formId
+  form.value.number = getRowData.value.number
+  form.value.name = getRowData.value.name
+  form.value.business = getRowData.value.business
+  form.value.desc = getRowData.value.describe
+})
+</script>
+
+<template>
+  <div class="edit-process">
+    <app-container>
+      <detail-page title="流程管理-编辑">
+        <template #btns>
+          <el-button type="primary" @click="save(ruleFormRef)">
+            保存
+          </el-button>
+          <el-button type="info" @click="close">
+            关闭
+          </el-button>
+        </template>
+        <el-form ref="ruleFormRef" :model="form" label-width="180px" :rules="rules">
+          <el-row :gutter="24">
+            <el-col :span="8">
+              <el-form-item label="流程编号:">
+                <el-input v-model="form.number" disabled placeholder="系统自动生成" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="流程名称:" prop="name">
+                <el-input v-model="form.name" placeholder="请输入流程名称" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="formID:" prop="formID">
+                <el-input v-model="form.formID" placeholder="请输入formID" disabled />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="关联业务:" prop="business">
+                <el-input v-model="form.business" placeholder="请输入关联业务" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="可选决策项:" prop="decisionItem">
+                <el-select
+                  v-model="form.decisionItem"
+                  clearable
+                  placeholder="请选择可选决策项"
+                  size="default"
+                  style="width: 100%;"
+                >
+                  <el-option
+                    v-for="item in decisionItemList"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="审批结果是否通知发起人:" prop="noticeStarter">
+                <el-select
+                  v-model="form.noticeStarter"
+                  clearable
+                  placeholder="请选择是否通知发起人"
+                  size="default"
+                  style="width: 100%;"
+                >
+                  <el-option
+                    v-for="item in noticeStarterList"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="16">
+              <el-form-item label="流程描述" prop="desc">
+                <el-input v-model="form.desc" type="textarea" autosize placeholder="请输入流程描述" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </detail-page>
+
+      <detail-block title="流程配置" />
+      <setting ref="processSetting" :get-row-data="getRowData" :select-form-id="selectFormId" @notice="getNotice" />
+    </app-container>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .edit-process {
+    width: 100%;
+
+    .title {
+      margin: 0 0 20px;
+      font-weight: 600;
+    }
+
+    .edit {
+      width: 100%;
+      padding: 12px;
+      background-color: #fff;
+      border-radius: 7px;
+      margin: 0 0 20px;
+
+      .button-area {
+        width: 100%;
+        display: flex;
+        justify-content: flex-end;
+        margin-bottom: 20px;
+      }
+    }
+
+    .set {
+      width: 100%;
+      background-color: #fff;
+      border-radius: 7px;
+      margin: 20px 0;
+    }
+  }
+</style>
diff --git a/src/views/system/process/process.ts b/src/views/system/process/process.ts
new file mode 100644
index 0000000..2e183f8
--- /dev/null
+++ b/src/views/system/process/process.ts
@@ -0,0 +1,47 @@
+export interface IlistQuery {
+  deploymentId: string // 流程部署id
+  suspensionState: number | string // 流程状态：1激活 2废止
+  number: string // 编号
+  name: string // 名称
+  business: string // 关联业务
+  person: string // 负责人
+  beginTime: string // 开始时间
+  endTime: string // 结束时间
+  status: string // 当前流程状态
+  describe?: string // 流程描述
+  offset: number
+  limit: number
+}
+// 字典
+export interface dictType {
+  id: string
+  name: string
+  value: string
+}
+export interface Iform {
+  number: string // 编号
+  name: string // 名称
+  business: string // 关联业务
+  desc?: string // 流程描述
+  formID?: string
+  decisionItem: string // 可选决策项
+  noticeStarter: string // 审批结果是否通知发起人
+}
+
+// 关联业务列表
+export interface IBusinessList {
+  formId: string
+  formName: string
+}
+
+export interface ITipList {
+  type: string
+  name?: string
+}
+// 流程基本信息
+export interface IworkFlowDef {
+  name: string // 名称
+  decisionItem?: number | string // 可选决策项
+  noticeStarter?: number | string // 审批结果是否通知发起人
+}
+
diff --git a/src/views/system/process/process.vue b/src/views/system/process/process.vue
new file mode 100644
index 0000000..eab9f8a
--- /dev/null
+++ b/src/views/system/process/process.vue
@@ -0,0 +1,378 @@
+<!-- 流程列表 -->
+<script lang="ts" setup name="Process">
+import { onMounted, reactive, ref } from 'vue'
+import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
+import { useRouter } from 'vue-router'
+import type { IBusinessList, IlistQuery } from './process'
+import { delProcessList, exportProcessList, getBusinessList, getProcessList, updateState } from '@/api/system/process'
+import { exportFile } from '@/utils/exportUtils'
+import { printJSON } from '@/utils/printUtils'
+import { getDictByCode } from '@/api/system/dict'
+
+const { proxy } = getCurrentInstance() as any
+const businessList = ref<IBusinessList[]>([]) // 关联业务列表
+const listQuery = reactive({
+  deploymentId: '', // 流程部署id
+  suspensionState: '', // 状态流程 1激活 2废止
+  number: '', // 编号
+  name: '', // 名称
+  business: '', // 关联业务
+  person: '', // 负责人
+  beginTime: '', // 开始时间
+  endTime: '', // 结束时间
+  status: '', // 当前流程状态,
+  offset: 1,
+  limit: 20,
+})
+
+// 流程状态筛选参数
+const searchStatus = [
+  {
+    value: 1,
+    label: '激活',
+  },
+  {
+    value: 2,
+    label: '废止',
+  },
+]
+// 表头
+const columns = ref([
+  { text: '流程编号', value: 'number' },
+  { text: '流程名称', value: 'name' },
+  { text: '关联业务', value: 'business' },
+  { text: '当前流程状态', value: 'status' },
+  { text: '流程负责人', value: 'person' },
+  { text: '创建时间', value: 'time' },
+  { text: '流程描述', value: 'describe' },
+])
+const list = ref([])
+const total = ref(20)
+const listLoading = ref(false)
+const checkoutList = ref<string[]>([]) // 多选选中结果
+
+// 获取流程列表
+const fetchData = async (isNowPage: boolean) => {
+  listLoading.value = true
+  if (!isNowPage) {
+    // 是否显示当前页，否则跳转第一页
+    listQuery.offset = 1
+  }
+  const param = {
+    category: '', // 流程分类
+    deploymentStartTime: listQuery.beginTime, // 开始时间
+    deploymentEndTime: listQuery.endTime, // 结束时间
+    directorId: '', // 流程负责人id
+    directorName: listQuery.person, // 流程负责人筛选字段
+    flowKey: '', // 流程key
+    formId: listQuery.business, // 配置表单id
+    formName: '', // 配置表单名称
+    id: listQuery.number, // 流程id
+    name: listQuery.name, // 流程名称
+    suspensionState: listQuery.suspensionState, // 流程状态
+    offset: listQuery.offset,
+    limit: listQuery.limit,
+  }
+  const response = await getProcessList(param)
+  total.value = parseInt(response.data.total)
+  list.value = response.data.rows.map((item: any) => {
+    return {
+      ...item,
+      number: item.id,
+      business: item.formName,
+      person: item.directorName,
+      time: item.deploymentTime,
+      status: item.suspensionState === 1 ? '激活' : '废止',
+      describe: item.formDesc,
+    }
+  })
+  listLoading.value = false
+}
+
+fetchData(true)
+
+// 查询数据
+const search = () => {
+  fetchData(false)
+}
+
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: { size: number; page: number }) => {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData(true)
+}
+
+// 重置
+const reset = () => {
+  listQuery.number = '' // 编号
+  listQuery.name = '' // 名称
+  listQuery.business = '' // 关联业务
+  listQuery.person = '' // 负责人
+  listQuery.beginTime = '' // 开始时间
+  listQuery.endTime = '' // 结束时间
+  listQuery.status = '' // 当前流程状态,
+  listQuery.suspensionState = ''
+  fetchData(true)
+}
+
+const $router = useRouter()
+// 点击编辑/详情
+const handleEdit = (row: IlistQuery, pageType: 'edit' | 'detail') => {
+  $router.push({ path: `/process/${pageType}`, query: { rowData: JSON.stringify(row) } })
+}
+// 点击新建
+const add = () => {
+  $router.push({ path: '/process/add' })
+}
+
+// 废止
+const abolish = (row: IlistQuery) => {
+  const state = row.status === '激活' ? 2 : 1
+  updateState(row.deploymentId, state).then((res) => {
+    if (res.code === 200) {
+      ElMessage.success('操作成功')
+      fetchData(true)
+    }
+  })
+}
+
+// 删除
+const del = (row: IlistQuery) => {
+  ElMessageBox.confirm(
+    `确认删除${row.name}吗？`,
+    '提示',
+    {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  )
+    .then(() => {
+      delProcessList(row.deploymentId).then((res) => {
+        if (res.code === 200) {
+          ElMessage.success('删除成功')
+          fetchData(true)
+        }
+      })
+    })
+}
+
+// 导出
+const exportAll = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    text: '下载中请稍后',
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  if (list.value.length > 0) {
+    const params = {
+      deploymentId: '', // 流程部署id
+      suspensionState: '', // 状态流程 1激活 2废止
+      number: '', // 编号
+      name: '', // 名称
+      business: '', // 关联业务
+      person: '', // 负责人
+      beginTime: '', // 开始时间
+      endTime: '', // 结束时间
+      status: '', // 当前流程状态,
+      ids: checkoutList.value,
+    }
+    exportProcessList(params).then((res) => {
+      const blob = new Blob([res.data])
+      exportFile(blob, '流程管理列表.xlsx')
+    })
+  }
+  else {
+    ElMessage.warning('无数据可导出数据')
+  }
+  loading.close()
+}
+// 打印列表
+function printList() {
+  // 打印列
+  const properties = columns.value.map((item) => {
+    return {
+      field: item.value,
+      displayName: item.text,
+    }
+  })
+  if (checkoutList.value.length <= 0 && list.value.length > 0) {
+    printJSON(list.value, properties, '流程管理列表')
+  }
+  else if (checkoutList.value.length > 0) {
+    // const printList = list.value.filter((item: any) => checkoutList.value.includes(item.id))
+    const printList = checkoutList.value
+    printJSON(printList, properties, '流程管理列表')
+  }
+  else {
+    ElMessage.warning('无可打印内容')
+  }
+}
+
+// 多选选中
+const selectionChange = (val: any) => {
+  checkoutList.value = val
+}
+
+// 获取关联业务列表
+const fetchBusinessList = () => {
+  getBusinessList().then((res) => {
+    businessList.value = res.data
+  })
+}
+
+onMounted(() => {
+  fetchBusinessList()
+})
+</script>
+
+<template>
+  <div class="process">
+    <app-container>
+      <!-- 筛选条件 -->
+      <search-area :need-clear="true" @search="search" @clear="reset">
+        <search-item>
+          <el-input
+            v-model.trim="listQuery.number"
+            placeholder="流程编号"
+            clearable
+          />
+        </search-item>
+        <search-item>
+          <el-input
+            v-model.trim="listQuery.name"
+            placeholder="流程名称"
+            clearable
+          />
+        </search-item>
+        <search-item>
+          <el-select v-model="listQuery.business" placeholder="请选择关联业务" clearable>
+            <el-option
+              v-for="item in businessList"
+              :key="item.formId"
+              :label="item.formName"
+              :value="item.formId"
+            />
+          </el-select>
+        </search-item>
+
+        <search-item>
+          <el-select v-model="listQuery.suspensionState" placeholder="当前流程状态" clearable>
+            <el-option
+              v-for="item in searchStatus"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </search-item>
+        <search-item>
+          <el-input
+            v-model.trim="listQuery.person"
+            placeholder="流程负责人"
+            clearable
+          />
+        </search-item>
+        <search-item>
+          <el-date-picker
+            v-model="listQuery.beginTime"
+            type="datetime"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            placeholder="选择开始时间"
+          />
+        </search-item>
+        <search-item>
+          <el-date-picker
+            v-model="listQuery.endTime"
+            type="datetime"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            placeholder="选择结束时间"
+          />
+        </search-item>
+      </search-area>
+      <!-- 查询结果Table显示 -->
+      <table-container>
+        <template #btns-right>
+          <icon-button v-if="proxy.hasPerm('/sys/process/add')" icon="icon-add" title="新建" type="primary" @click="add" />
+          <!-- <icon-button v-if="proxy.hasPerm('/sys/process/export')" icon="icon-export" title="导出" type="primary" @click="exportAll" /> -->
+          <icon-button v-if="proxy.hasPerm('/sys/process/print')" icon="icon-print" title="打印" type="primary" @click="printList" />
+        </template>
+
+        <div class="table-area">
+          <normal-table
+            :data="list"
+            :total="total"
+            :columns="columns"
+            :query="listQuery"
+            is-showmulti-select
+            :list-loading="listLoading"
+            @change="changePage"
+            @multiSelect="selectionChange"
+          >
+            <template #preColumns>
+              <el-table-column label="序号" width="55" align="center">
+                <template #default="scope">
+                  {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
+                </template>
+              </el-table-column>
+            </template>
+            <template #columns>
+              <el-table-column label="操作" width="160" align="center" fixed="right">
+                <template #default="scope">
+                  <el-button
+                    v-if="proxy.hasPerm('/sys/process/edit')"
+                    type="primary"
+                    link
+                    size="small"
+                    class="table-text-button"
+                    @click="handleEdit(scope.row, 'edit')"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button type="primary" link size="small" class="table-text-button" @click="handleEdit(scope.row, 'detail')">
+                    详情
+                  </el-button>
+                  <el-button type="primary" link size="small" class="table-text-button" @click="abolish(scope.row)">
+                    {{ scope.row.suspensionState === 1 ? '废止' : '激活' }}
+                  </el-button>
+                  <el-button type="danger" link size="small" class="table-text-button" @click="del(scope.row)">
+                    删除
+                  </el-button>
+                </template>
+              </el-table-column>
+            </template>
+          </normal-table>
+        </div>
+      </table-container>
+    </app-container>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.process {
+  .table-area {
+    background-color: #fff;
+    padding: 10px;
+    margin-top: 10px;
+    border-radius: 7px;
+  }
+}
+</style>
+
+<style lang="scss">
+  .list-login-log {
+    .el-button + .el-button {
+      margin-top: -10px;
+    }
+  }
+
+  .el-message-box {
+    overflow: auto;
+  }
+</style>
+