做双端审批流

2026-10-07 13:46:32 +08:00
1 parent 5b4dbb2b46
commit ffaadc26ae
@@ -83,6 +83,7 @@ declare module 'vue' {
    ElTree: typeof import('element-plus/es')['ElTree']
    ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
    ElUpload: typeof import('element-plus/es')['ElUpload']
+    FlowCanvas: typeof import('./src/components/approval/FlowCanvas.vue')['default']
    MessageDetailDialog: typeof import('./src/components/MessageDetailDialog.vue')['default']
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
@@ -12,6 +12,9 @@
        "@turbodocx/html-to-docx": "^1.22.2",
        "@types/qrcode": "^1.5.6",
        "@umoteam/editor": "^10.2.1",
+        "@vue-flow/background": "^1.3.2",
+        "@vue-flow/controls": "^1.1.3",
+        "@vue-flow/core": "^1.48.2",
        "axios": "^1.13.1",
        "chart": "^0.1.2",
        "chart.js": "^4.5.1",
@@ -3062,6 +3065,42 @@
        "vue": "^3.2.25"
      }
    },
+    "node_modules/@vue-flow/background": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmmirror.com/@vue-flow/background/-/background-1.3.2.tgz",
+      "integrity": "sha512-eJPhDcLj1wEo45bBoqTXw1uhl0yK2RaQGnEINqvvBsAFKh/camHJd5NPmOdS1w+M9lggc9igUewxaEd3iCQX2w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@vue-flow/core": "^1.23.0",
+        "vue": "^3.3.0"
+      }
+    },
+    "node_modules/@vue-flow/controls": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmmirror.com/@vue-flow/controls/-/controls-1.1.3.tgz",
+      "integrity": "sha512-XCf+G+jCvaWURdFlZmOjifZGw3XMhN5hHlfMGkWh9xot+9nH9gdTZtn+ldIJKtarg3B21iyHU8JjKDhYcB6JMw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@vue-flow/core": "^1.23.0",
+        "vue": "^3.3.0"
+      }
+    },
+    "node_modules/@vue-flow/core": {
+      "version": "1.48.2",
+      "resolved": "https://registry.npmmirror.com/@vue-flow/core/-/core-1.48.2.tgz",
+      "integrity": "sha512-raxhgKWE+G/mcEvXJjGFUDYW9rAI3GOtiHR3ZkNpwBWuIaCC1EYiBmKGwJOoNzVFgwO7COgErnK7i08i287AFA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vueuse/core": "^10.5.0",
+        "d3-drag": "^3.0.0",
+        "d3-interpolate": "^3.0.1",
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.3.0"
+      }
+    },
    "node_modules/@vue/compiler-core": {
      "version": "3.5.29",
      "resolved": "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.5.29.tgz",
@@ -13,6 +13,9 @@
    "@turbodocx/html-to-docx": "^1.22.2",
    "@types/qrcode": "^1.5.6",
    "@umoteam/editor": "^10.2.1",
+    "@vue-flow/background": "^1.3.2",
+    "@vue-flow/controls": "^1.1.3",
+    "@vue-flow/core": "^1.48.2",
    "axios": "^1.13.1",
    "chart": "^0.1.2",
    "chart.js": "^4.5.1",
@@ -0,0 +1,54 @@
+import request from '@/utils/request';
+
+// ==================== 租户端审批流配置 ====================
+
+// 编排数据源：当前租户的功能模块 + 审批人候选（用户/角色/部门/职位）
+export function getApprovalOptions() {
+  return request({
+    url: '/backend/approval/options',
+    method: 'get',
+  });
+}
+
+// 流程列表（按功能模块过滤，module 即 biz_type）
+export function getApprovalFlowList(params) {
+  return request({
+    url: '/backend/approval/flow/list',
+    method: 'get',
+    params,
+  });
+}
+
+// 流程详情（含全部节点）
+export function getApprovalFlowDetail(id) {
+  return request({
+    url: `/backend/approval/flow/detail/${id}`,
+    method: 'get',
+  });
+}
+
+// 保存流程（新建或更新，节点全量覆盖）
+export function saveApprovalFlow(data) {
+  return request({
+    url: '/backend/approval/flow/save',
+    method: 'post',
+    data,
+  });
+}
+
+// 删除流程
+export function deleteApprovalFlow(id) {
+  return request({
+    url: `/backend/approval/flow/delete/${id}`,
+    method: 'delete',
+  });
+}
+
+// 审批流编号轻量清单（按分类返回启用流程的 flow_code/flow_name，供其它功能按编号调用）
+export function getApprovalFlowPick(params) {
+  return request({
+    url: '/backend/approval/flow/pick',
+    method: 'get',
+    params,
+  });
+}
@@ -109,15 +109,6 @@ export function getCustomDomainGuide() {
  })
 }

-// 审核租户域名
-export function auditTenantDomain(data) {
-  return request({
-    url: '/backend/domain/tenant/audit',
-    method: 'post',
-    data
-  })
-}
-
 // 禁用/启用租户域名
 export function toggleTenantDomainStatus(id) {
  return request({
@@ -51,13 +51,13 @@ export function deleteOnePage(id) {
 }

 /**
- * 根据路径获取单页（前端使用）
+ * 根据路径获取单页（后端租户端独立接口）
 * @param {string} path 路由路径
 * @returns {Promise}
 */
 export function getOnePageByPath(path) {
  return request({
-    url: `/index/onepage/${encodeURIComponent(path)}`,
+    url: `/backend/onepage/path/${encodeURIComponent(path)}`,
    method: "get",
  });
 }
@@ -1,39 +0,0 @@
-import request from '@/utils/request'
-
-// 平台端角色管理（yz_system_admin_role，可同时管理平台角色 cid=1 与租户角色 cid=2）
-export function getAllPlatformRoles() {
-  return request({
-    url: '/platform/allRoles',
-    method: 'get'
-  })
-}
-
-export function getPlatformRoleById(id) {
-  return request({
-    url: `/platform/roles/${id}`,
-    method: 'get'
-  })
-}
-
-export function createPlatformRole(data) {
-  return request({
-    url: '/platform/roles',
-    method: 'post',
-    data
-  })
-}
-
-export function updatePlatformRole(id, data) {
-  return request({
-    url: `/platform/roles/${id}`,
-    method: 'put',
-    data
-  })
-}
-
-export function deletePlatformRole(id) {
-  return request({
-    url: `/platform/roles/${id}`,
-    method: 'delete'
-  })
-}
@@ -1,9 +1,10 @@
 import request from '@/utils/request'

-// 平台端租户用户（yz_system_tenant_user）相关接口
+// 租户后台用户管理（yz_system_tenant_user），走后端租户端 /backend/* 独立接口
+// （BackendAdminUserController 直接操作 SystemTenantUser，租户隔离由 JWT 完成）
 export function getTenantUserList(params) {
  return request({
-    url: '/platform/tenantUser/list',
+    url: '/backend/getAllUsers',
    method: 'get',
    params,
  })
@@ -11,14 +12,14 @@ export function getTenantUserList(params) {

 export function getTenantUsersByTid(tid) {
  return request({
-    url: `/platform/getTenantUsers/${tid}`,
+    url: `/backend/getTenantUsers/${tid}`,
    method: 'get',
  })
 }

 export function createTenantUser(data) {
  return request({
-    url: '/platform/tenantUser/create',
+    url: '/backend/addUser',
    method: 'post',
    data,
  })
@@ -26,7 +27,7 @@ export function createTenantUser(data) {

 export function editTenantUser(id, data) {
  return request({
-    url: `/platform/tenantUser/edit/${id}`,
+    url: `/backend/editUser/${id}`,
    method: 'post',
    data,
  })
@@ -34,7 +35,7 @@ export function editTenantUser(id, data) {

 export function deleteTenantUser(id) {
  return request({
-    url: `/platform/tenantUser/delete/${id}`,
+    url: `/backend/deleteUser/${id}`,
    method: 'delete',
  })
 }
@@ -0,0 +1,562 @@
+<template>
+  <div class="flow-canvas">
+    <!-- 左侧节点面板 -->
+    <div class="palette">
+      <div class="palette-title">节点面板</div>
+      <div
+        v-for="p in palette"
+        :key="p.type"
+        class="palette-item"
+        :class="'pal-' + p.cls"
+        draggable="true"
+        @dragstart="onDragStart($event, p)"
+      >
+        <el-icon class="pal-icon"><component :is="p.icon" /></el-icon>
+        <span>{{ p.label }}</span>
+      </div>
+      <div class="palette-tip">
+        拖入画布添加节点；从节点右侧圆点拖到目标节点连线；双击节点配置；点击连线设置分支条件。
+      </div>
+    </div>
+
+    <!-- 画布 -->
+    <div ref="canvasWrap" class="canvas-wrap" @drop="onDrop" @dragover.prevent @dragenter.prevent>
+      <VueFlow
+        v-model:nodes="nodes"
+        v-model:edges="edges"
+        :default-viewport="{ zoom: 1 }"
+        :min-zoom="0.4"
+        :max-zoom="2"
+        @node-double-click="onNodeDblClick"
+        @edge-click="onEdgeClick"
+      >
+        <template #node-flow="nodeProps">
+          <div class="fn" :class="'fn-' + nodeProps.data.cls">
+            <Handle type="target" :position="Position.Left" />
+            <div class="fn-badge">{{ typeShort(nodeProps.data.nodeType) }}</div>
+            <div class="fn-title">{{ nodeProps.data.name || '未命名' }}</div>
+            <div class="fn-sub">{{ nodeProps.data.summary }}</div>
+            <Handle type="source" :position="Position.Right" />
+          </div>
+        </template>
+        <Background />
+        <Controls />
+      </VueFlow>
+    </div>
+
+    <!-- 节点配置对话框 -->
+    <el-dialog v-model="nodeDialog" :title="nodeDialogTitle" width="560px" append-to-body>
+      <el-form :model="nodeForm" label-width="96px">
+        <el-form-item label="节点名称" required>
+          <el-input v-model="nodeForm.name" placeholder="如：部门主管审批" />
+        </el-form-item>
+        <template v-if="nodeForm.nodeType === 2">
+          <el-form-item label="审批人类型">
+            <el-radio-group v-model="nodeForm.approverType" @change="onApproverTypeChange">
+              <el-radio v-for="t in approverTypes" :key="t.value" :value="t.value">{{ t.label }}</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item v-if="currentApproverMeta && currentApproverMeta.needsSelection" :label="currentApproverMeta.selectLabel" required>
+            <el-select v-model="nodeForm.approverIds" multiple filterable style="width: 100%" :placeholder="'选择' + currentApproverMeta.selectLabel + '（可多选）'">
+              <el-option v-for="opt in currentPool" :key="opt.id" :label="opt.name" :value="opt.id" />
+            </el-select>
+          </el-form-item>
+          <el-form-item v-else label=" ">
+            <span class="hint">该类型运行期自动定位审批人，无需指定对象</span>
+          </el-form-item>
+          <el-form-item
+            v-if="currentApproverMeta && currentApproverMeta.needsSelection && nodeForm.approverIds && nodeForm.approverIds.length > 1"
+            label="多人方式"
+          >
+            <el-radio-group v-model="nodeForm.multiMode">
+              <el-radio :value="1">
+                或签
+                <el-tooltip placement="top" effect="dark">
+                  <template #content>
+                    <div class="mode-tip">
+                      <div class="mode-tip-title">或签 (OR)</div>
+                      <div>所选审批人任一人通过/驳回，即视为本节点完成；</div>
+                      <div>其余待办任务将自动作废并推进至下一节点。</div>
+                    </div>
+                  </template>
+                  <el-icon class="mode-tip-icon"><QuestionFilled /></el-icon>
+                </el-tooltip>
+              </el-radio>
+              <el-radio :value="2">
+                会签
+                <el-tooltip placement="top" effect="dark">
+                  <template #content>
+                    <div class="mode-tip">
+                      <div class="mode-tip-title">会签 (AND)</div>
+                      <div>所选审批人须全部通过，本节点才算完成；</div>
+                      <div>任一人驳回则本节点立即驳回，流程回退。</div>
+                    </div>
+                  </template>
+                  <el-icon class="mode-tip-icon"><QuestionFilled /></el-icon>
+                </el-tooltip>
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="允许退回">
+            <el-switch v-model="nodeForm.allowReturn" :active-value="1" :inactive-value="0" />
+          </el-form-item>
+          <el-form-item label="超时(小时)">
+            <el-input-number v-model="nodeForm.timeoutHours" :min="1" :max="720" />
+          </el-form-item>
+        </template>
+        <el-form-item v-else-if="nodeForm.nodeType === 4" label=" ">
+          <span class="hint">条件网关：拖出多条连线，点击连线分别填写分支条件（留空为默认分支）。</span>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button type="danger" plain :disabled="!editingNodeId" @click="removeCurrentNode">删除节点</el-button>
+        <span style="flex: 1"></span>
+        <el-button @click="nodeDialog = false">取消</el-button>
+        <el-button type="primary" @click="confirmNode">确定</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- 连线条件对话框 -->
+    <el-dialog v-model="edgeDialog" title="设置分支条件" width="460px" append-to-body>
+      <el-form label-width="88px">
+        <el-form-item label="条件表达式">
+          <el-input v-model="edgeForm.condition" placeholder="如 amount>5000 且 dept=='研发' ；留空为默认分支" />
+        </el-form-item>
+        <el-form-item label=" ">
+          <span class="hint">支持 &gt; &gt;= &lt; &lt;= == != 与 &amp;&amp; / ||。条件仅在“条件网关”的出边上生效。</span>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button type="danger" plain @click="removeCurrentEdge">删除连线</el-button>
+        <span style="flex: 1"></span>
+        <el-button @click="edgeDialog = false">取消</el-button>
+        <el-button type="primary" @click="confirmEdge">确定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed, watch, nextTick } from 'vue'
+import { ElMessage } from 'element-plus'
+import { VideoPlay, User, Share, SwitchButton, QuestionFilled } from '@element-plus/icons-vue'
+import { VueFlow, Handle, Position, MarkerType, useVueFlow } from '@vue-flow/core'
+import { Background } from '@vue-flow/background'
+import { Controls } from '@vue-flow/controls'
+import '@vue-flow/core/dist/style.css'
+import '@vue-flow/core/dist/theme-default.css'
+import '@vue-flow/controls/dist/style.css'
+
+const props = defineProps({
+  // { nodes: [payloadNode], edges: [payloadEdge] }
+  modelValue: { type: Object, default: () => ({ nodes: [], edges: [] }) },
+  // 审批人类型：[{ value, label, needsSelection, selectLabel, poolKey }]
+  approverTypes: { type: Array, default: () => [] },
+  // 候选池：{ [poolKey]: [{ id, name }] }
+  pools: { type: Object, default: () => ({}) },
+})
+
+const nodes = ref<any[]>([])
+const edges = ref<any[]>([])
+const canvasWrap = ref<HTMLElement | null>(null)
+const { screenToFlowCoordinate, onConnect } = useVueFlow()
+
+let keySeq = 1
+const nextKey = () => `n${Date.now().toString(36)}${(keySeq++).toString(36)}`
+
+const NODE_TYPE = { START: 1, APPROVAL: 2, END: 3, CONDITION: 4 }
+
+const palette = [
+  { type: NODE_TYPE.START, cls: 'start', label: '开始', icon: VideoPlay },
+  { type: NODE_TYPE.APPROVAL, cls: 'approval', label: '审批节点', icon: User },
+  { type: NODE_TYPE.CONDITION, cls: 'condition', label: '条件网关', icon: Share },
+  { type: NODE_TYPE.END, cls: 'end', label: '结束', icon: SwitchButton },
+]
+
+const clsOf = (t: number) =>
+  t === NODE_TYPE.START ? 'start' : t === NODE_TYPE.END ? 'end' : t === NODE_TYPE.CONDITION ? 'condition' : 'approval'
+
+const typeShort = (t: number) =>
+  t === NODE_TYPE.START ? '开始' : t === NODE_TYPE.END ? '结束' : t === NODE_TYPE.CONDITION ? '条件' : '审批'
+
+const approverTypeLabel = (t: number) => {
+  const m = (props.approverTypes as any[]).find((x) => x.value === t)
+  return m ? m.label : '未知'
+}
+
+function approverSummary(node: any) {
+  if (node.nodeType === NODE_TYPE.APPROVAL) {
+    const meta = (props.approverTypes as any[]).find((x) => x.value === node.approverType)
+    if (!meta || !meta.needsSelection) return approverTypeLabel(node.approverType)
+    const pool = (props.pools as any)[meta.poolKey] || []
+    const names = (node.approverIds || []).map((id: number) => pool.find((p: any) => p.id === id)?.name).filter(Boolean)
+    const mode = node.multiMode === 2 ? '会签' : '或签'
+    return `${approverTypeLabel(node.approverType)}：${names.length ? names.join('、') : '未选'}（${mode}）`
+  }
+  if (node.nodeType === NODE_TYPE.CONDITION) return '按分支条件路由'
+  return ''
+}
+
+// 由 payload 节点/边构建画布内部结构
+function buildGraph(payload: any) {
+  const pNodes = payload?.nodes || []
+  const pEdges = payload?.edges || []
+  const ns = pNodes.map((n: any) => ({
+    id: n.node_key || nextKey(),
+    type: 'flow',
+    position: { x: n.pos_x || 0, y: n.pos_y || 0 },
+    data: makeNodeData(n),
+  }))
+  const es = pEdges
+    .filter((e: any) => e.from && e.to)
+    .map((e: any) => ({
+      id: `e_${e.from}_${e.to}`,
+      source: e.from,
+      target: e.to,
+      label: e.condition || '',
+      data: { condition: e.condition || '' },
+      markerEnd: { type: MarkerType.ArrowClosed },
+      animated: !!e.condition,
+    }))
+  return { ns, es }
+}
+
+function makeNodeData(n: any) {
+  const nodeType = n.node_type || n.nodeType || NODE_TYPE.APPROVAL
+  const data = {
+    nodeType,
+    cls: clsOf(nodeType),
+    name: n.node_name || n.name || '',
+    approverType: n.approver_type ?? n.approverType ?? 1,
+    approverIds: n.approver_ids ?? n.approverIds ?? [],
+    multiMode: n.multi_mode ?? n.multiMode ?? 1,
+    allowReturn: n.allow_return ?? n.allowReturn ?? 0,
+    timeoutHours: n.timeout_hours ?? n.timeoutHours ?? 48,
+  }
+  data.summary = approverSummary(data)
+  return data
+}
+
+// 初始化 / 外部切换流程时重建
+function reload() {
+  const { ns, es } = buildGraph(props.modelValue || {})
+  // 避免坐标全 0 重叠：无坐标时自动铺开
+  let autoX = 60
+  let autoY = 60
+  ns.forEach((n: any) => {
+    if (!n.position.x && !n.position.y) {
+      n.position = { x: autoX, y: autoY }
+      autoY += 140
+    }
+  })
+  nodes.value = ns
+  edges.value = es
+  void autoX
+}
+
+watch(() => props.modelValue, reload, { deep: false, immediate: true })
+
+// ==================== 拖拽添加 ====================
+let dragType = 0
+function onDragStart(_evt: DragEvent, p: any) {
+  dragType = p.type
+}
+
+function onDrop(evt: DragEvent) {
+  if (!dragType) return
+  const position = screenToFlowCoordinate({ x: evt.clientX, y: evt.clientY })
+  const data = makeNodeData({ node_type: dragType, node_name: defaultName(dragType) })
+  nodes.value.push({ id: nextKey(), type: 'flow', position, data })
+  dragType = 0
+}
+
+function defaultName(t: number) {
+  return t === NODE_TYPE.START ? '开始' : t === NODE_TYPE.END ? '结束' : t === NODE_TYPE.CONDITION ? '条件网关' : '审批节点'
+}
+
+// ==================== 连线 ====================
+onConnect((params: any) => {
+  const exists = edges.value.some((e) => e.source === params.source && e.target === params.target)
+  if (exists) return
+  edges.value.push({
+    id: `e_${params.source}_${params.target}`,
+    source: params.source,
+    target: params.target,
+    label: '',
+    data: { condition: '' },
+    markerEnd: { type: MarkerType.ArrowClosed },
+    animated: false,
+  })
+})
+
+// ==================== 节点配置 ====================
+const nodeDialog = ref(false)
+const editingNodeId = ref('')
+const nodeForm = reactive<any>({
+  name: '',
+  nodeType: NODE_TYPE.APPROVAL,
+  approverType: 1,
+  approverIds: [],
+  multiMode: 1,
+  allowReturn: 0,
+  timeoutHours: 48,
+})
+
+const nodeDialogTitle = computed(() => {
+  if (nodeForm.nodeType === NODE_TYPE.CONDITION) return '配置条件网关'
+  if (nodeForm.nodeType === NODE_TYPE.APPROVAL) return '配置审批节点'
+  return '配置节点'
+})
+
+const currentApproverMeta = computed(() =>
+  (props.approverTypes as any[]).find((x) => x.value === nodeForm.approverType) || null
+)
+const currentPool = computed(() => {
+  const meta = currentApproverMeta.value
+  return meta ? (props.pools as any)[meta.poolKey] || [] : []
+})
+
+function onNodeDblClick(evt: any) {
+  const node = evt.node
+  if (!node) return
+  editingNodeId.value = node.id
+  const d = node.data
+  Object.assign(nodeForm, {
+    name: d.name,
+    nodeType: d.nodeType,
+    approverType: d.approverType,
+    approverIds: [...(d.approverIds || [])],
+    multiMode: d.multiMode,
+    allowReturn: d.allowReturn,
+    timeoutHours: d.timeoutHours,
+  })
+  nodeDialog.value = true
+}
+
+function onApproverTypeChange() {
+  nodeForm.approverIds = []
+}
+
+function confirmNode() {
+  const node = nodes.value.find((n) => n.id === editingNodeId.value)
+  if (!node) {
+    nodeDialog.value = false
+    return
+  }
+  if (!String(nodeForm.name).trim()) {
+    ElMessage.warning('请填写节点名称')
+    return
+  }
+  const meta = currentApproverMeta.value
+  if (nodeForm.nodeType === NODE_TYPE.APPROVAL && meta && meta.needsSelection && !(nodeForm.approverIds || []).length) {
+    ElMessage.warning('请选择审批人')
+    return
+  }
+  node.data = makeNodeData({
+    node_type: nodeForm.nodeType,
+    node_name: nodeForm.name,
+    approver_type: nodeForm.approverType,
+    approver_ids: nodeForm.approverIds,
+    multi_mode: nodeForm.multiMode,
+    allow_return: nodeForm.allowReturn,
+    timeout_hours: nodeForm.timeoutHours,
+  })
+  nodeDialog.value = false
+}
+
+function removeCurrentNode() {
+  const id = editingNodeId.value
+  if (!id) return
+  nodes.value = nodes.value.filter((n) => n.id !== id)
+  edges.value = edges.value.filter((e) => e.source !== id && e.target !== id)
+  nodeDialog.value = false
+}
+
+// ==================== 连线条件 ====================
+const edgeDialog = ref(false)
+const editingEdgeId = ref('')
+const edgeForm = reactive<any>({ condition: '' })
+
+function onEdgeClick(evt: any) {
+  const edge = evt.edge
+  if (!edge) return
+  editingEdgeId.value = edge.id
+  edgeForm.condition = edge.data?.condition || ''
+  edgeDialog.value = true
+}
+
+function confirmEdge() {
+  const edge = edges.value.find((e) => e.id === editingEdgeId.value)
+  if (edge) {
+    edge.data = { condition: edgeForm.condition }
+    edge.label = edgeForm.condition || ''
+    edge.animated = !!edgeForm.condition
+  }
+  edgeDialog.value = false
+}
+
+function removeCurrentEdge() {
+  edges.value = edges.value.filter((e) => e.id !== editingEdgeId.value)
+  edgeDialog.value = false
+}
+
+// ==================== 对外序列化 ====================
+function serialize() {
+  const outNodes = nodes.value.map((n: any, i: number) => ({
+    node_key: n.id,
+    node_name: n.data.name,
+    node_type: n.data.nodeType,
+    approver_type: n.data.approverType,
+    approver_ids: n.data.approverIds,
+    multi_mode: n.data.multiMode,
+    allow_return: n.data.allowReturn,
+    timeout_hours: n.data.timeoutHours,
+    sort: i + 1,
+    pos_x: Math.round(n.position.x),
+    pos_y: Math.round(n.position.y),
+  }))
+  const outEdges = edges.value.map((e: any) => ({
+    from: e.source,
+    to: e.target,
+    condition: e.data?.condition || '',
+  }))
+  return { nodes: outNodes, edges: outEdges }
+}
+
+async function fitView() {
+  await nextTick()
+}
+
+defineExpose({ serialize, fitView })
+</script>
+
+<style lang="less" scoped>
+.flow-canvas {
+  display: flex;
+  height: 560px;
+  border: 1px solid #e4e7ed;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.palette {
+  width: 160px;
+  flex: 0 0 160px;
+  padding: 12px;
+  background: #fafafa;
+  border-right: 1px solid #e4e7ed;
+
+  .palette-title {
+    font-weight: 600;
+    margin-bottom: 10px;
+    font-size: 14px;
+  }
+
+  .palette-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 10px;
+    margin-bottom: 8px;
+    border-radius: 6px;
+    border: 1px solid #dcdfe6;
+    background: #fff;
+    cursor: grab;
+    font-size: 13px;
+
+    &:hover {
+      border-color: #409eff;
+    }
+
+    .pal-icon {
+      font-size: 15px;
+    }
+  }
+
+  .pal-start { border-left: 3px solid #67c23a; }
+  .pal-approval { border-left: 3px solid #409eff; }
+  .pal-condition { border-left: 3px solid #e6a23c; }
+  .pal-end { border-left: 3px solid #909399; }
+
+  .palette-tip {
+    margin-top: 10px;
+    font-size: 12px;
+    color: #909399;
+    line-height: 1.5;
+  }
+}
+
+.canvas-wrap {
+  flex: 1;
+  position: relative;
+  background: #f7f8fb;
+}
+
+.fn {
+  min-width: 150px;
+  padding: 8px 12px;
+  border-radius: 8px;
+  background: #fff;
+  border: 1px solid #dcdfe6;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+  font-size: 13px;
+
+  .fn-badge {
+    display: inline-block;
+    font-size: 11px;
+    padding: 0 6px;
+    border-radius: 8px;
+    color: #fff;
+    margin-bottom: 4px;
+  }
+
+  .fn-title {
+    font-weight: 600;
+    color: #303133;
+  }
+
+  .fn-sub {
+    margin-top: 2px;
+    color: #909399;
+    font-size: 12px;
+    max-width: 180px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.fn-start { border-top: 3px solid #67c23a; .fn-badge { background: #67c23a; } }
+.fn-approval { border-top: 3px solid #409eff; .fn-badge { background: #409eff; } }
+.fn-condition { border-top: 3px solid #e6a23c; .fn-badge { background: #e6a23c; } }
+.fn-end { border-top: 3px solid #909399; .fn-badge { background: #909399; } }
+
+.hint {
+  font-size: 12px;
+  color: #909399;
+}
+</style>
+
+<style lang="less">
+/* 多人方式问号图标 + 气泡内容：因 el-dialog / el-tooltip 均 append-to-body，需非 scoped 样式 */
+.el-radio .mode-tip-icon {
+  margin-left: 4px;
+  color: #909399;
+  cursor: help;
+  vertical-align: -2px;
+  transition: color 0.2s;
+}
+.el-radio .mode-tip-icon:hover {
+  color: #409eff;
+}
+.el-popper.is-dark .mode-tip {
+  font-size: 12px;
+  line-height: 1.7;
+  max-width: 260px;
+}
+.el-popper.is-dark .mode-tip .mode-tip-title {
+  font-weight: 600;
+  margin-bottom: 4px;
+  color: #ffd04b;
+}
+</style>
@@ -15,6 +15,13 @@ const staticMainChildren = [
    component: () => import("@/views/dashboard/index.vue"),
    meta: { requiresAuth: true, title: "工作台" }
  },
+  // 审批流配置（租户侧）：静态注册保证 URL 直达，菜单入口由数据库驱动
+  {
+    path: "/system/approval",
+    name: "BackendApprovalFlow",
+    component: () => import("@/views/system/approval/index.vue"),
+    meta: { requiresAuth: true, title: "审批流", modulePath: "/systemManager" }
+  },
  // CMS 文章/产品/解决方案是系统内置功能，不依赖数据库菜单配置。
  // 统一结构：index 为列表页，type 为分类页。
  {
@@ -1,296 +0,0 @@
-<template>
-  <div class="container-box">
-    <div class="header-bar">
-      <h2>租户域名审核</h2>
-      <el-button @click="fetchData" :loading="loading">
-        <el-icon><Refresh /></el-icon>
-        刷新
-      </el-button>
-    </div>
-
-    <el-divider></el-divider>
-
-    <!-- 搜索区域 -->
-    <div class="search-box">
-      <el-input
-        v-model="searchForm.sub_domain"
-        placeholder="搜索二级前缀或完整域名"
-        clearable
-        style="width: 220px; margin-right: 10px;"
-        @keyup.enter="handleSearch"
-      />
-      <el-select v-model="searchForm.domain_type" placeholder="类型" clearable style="width: 150px; margin-right: 10px;">
-        <el-option label="平台二级域名" :value="1" />
-        <el-option label="自有域名" :value="2" />
-      </el-select>
-      <el-select v-model="searchForm.status" placeholder="状态" clearable style="width: 120px; margin-right: 10px;">
-        <el-option label="待生效/审核中" :value="0" />
-        <el-option label="已生效" :value="1" />
-        <el-option label="已禁用" :value="2" />
-      </el-select>
-      <el-button type="primary" @click="handleSearch">搜索</el-button>
-    </div>
-
-    <!-- 表格 -->
-    <el-table
-      :data="tableData"
-      style="width: 100%"
-      border
-      v-loading="loading"
-      element-loading-text="正在加载..."
-    >
-      <el-table-column type="index" label="序号" width="60" align="center" />
-      <el-table-column prop="tenant_name" label="租户名称" min-width="150" />
-      <el-table-column label="类型" width="130" align="center">
-        <template #default="scope">
-          <el-tag v-if="isCustom(scope.row)" type="warning">自有域名</el-tag>
-          <el-tag v-else type="info">平台二级域名</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column prop="full_domain" label="完整域名" min-width="200" />
-      <el-table-column prop="status" label="状态" width="120" align="center">
-        <template #default="scope">
-          <el-tag v-if="scope.row.status === 1" type="success">已生效</el-tag>
-          <el-tag v-else-if="scope.row.status === 2" type="danger">已禁用</el-tag>
-          <el-tag v-else type="warning">{{ isCustom(scope.row) ? '待生效' : '审核中' }}</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="解析检测" width="120" align="center">
-        <template #default="scope">
-          <span v-if="!isCustom(scope.row)" class="text-muted">—</span>
-          <el-tooltip v-else-if="scope.row.verify_msg" :content="scope.row.verify_msg" placement="top">
-            <el-tag :type="verifyTagType(scope.row.verify_status)">{{ verifyText(scope.row.verify_status) }}</el-tag>
-          </el-tooltip>
-          <el-tag v-else :type="verifyTagType(scope.row.verify_status)">{{ verifyText(scope.row.verify_status) }}</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="HTTPS 证书" width="130" align="center">
-        <template #default="scope">
-          <span v-if="!isCustom(scope.row)" class="text-muted">平台证书</span>
-          <el-tooltip v-else-if="scope.row.ssl_status === 3 && scope.row.ssl_error" :content="scope.row.ssl_error" placement="top">
-            <el-tag type="danger">签发失败</el-tag>
-          </el-tooltip>
-          <el-tooltip v-else-if="scope.row.ssl_status === 2 && scope.row.ssl_expire_at" :content="'到期时间：' + scope.row.ssl_expire_at" placement="top">
-            <el-tag type="success">已签发</el-tag>
-          </el-tooltip>
-          <el-tag v-else :type="sslTagType(scope.row.ssl_status)">{{ sslText(scope.row.ssl_status) }}</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column prop="create_time" label="申请时间" width="170">
-        <template #default="{ row }">{{ formatDateTime(row.create_time) }}</template>
-      </el-table-column>
-      <el-table-column label="操作" width="230" fixed="right" align="center">
-        <template #default="scope">
-          <!-- 自有域名无人工审核：解析与证书就绪后自动生效，这里只提供重新检测与禁用 -->
-          <template v-if="isCustom(scope.row)">
-            <el-button
-              size="small"
-              text
-              type="primary"
-              :loading="checkingId === scope.row.id"
-              @click="handleCheckDns(scope.row)"
-            >
-              检测解析
-            </el-button>
-            <el-button v-if="scope.row.status === 1" size="small" text type="danger" @click="handleDisable(scope.row)">
-              禁用
-            </el-button>
-            <el-button v-else-if="scope.row.status === 2" size="small" text type="success" @click="handleEnable(scope.row)">
-              启用
-            </el-button>
-          </template>
-          <template v-else-if="scope.row.status === 0">
-            <el-button size="small" type="success" @click="handleAudit(scope.row, 'approve')">
-              通过
-            </el-button>
-            <el-button size="small" type="danger" @click="handleAudit(scope.row, 'reject')">
-              拒绝
-            </el-button>
-          </template>
-          <template v-else-if="scope.row.status === 1">
-            <el-button size="small" text type="danger" @click="handleDisable(scope.row)">
-              禁用
-            </el-button>
-          </template>
-          <span v-else style="color: #999;">-</span>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <!-- 分页 -->
-    <div class="pagination-wrap">
-      <el-pagination
-        v-model:current-page="pagination.page"
-        v-model:page-size="pagination.pageSize"
-        :total="pagination.total"
-        :page-sizes="[10, 20, 50]"
-        layout="total, sizes, prev, pager, next, jumper"
-        @size-change="fetchData"
-        @current-change="fetchData"
-      />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref, reactive, onMounted } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { Refresh } from '@element-plus/icons-vue'
-import { formatDateTime } from '@/utils/datetime'
-import {
-  getTenantDomainList,
-  auditTenantDomain,
-  toggleTenantDomainStatus,
-  checkCustomDomainDns
-} from '@/api/domain'
-
-// 域名类型：与后端 models.DomainTypeCustom 对应
-const DOMAIN_TYPE_CUSTOM = 2
-
-const loading = ref(false)
-const checkingId = ref<number | null>(null)
-
-const searchForm = reactive({
-  sub_domain: '',
-  status: '',
-  domain_type: ''
-})
-
-const pagination = reactive({
-  page: 1,
-  pageSize: 10,
-  total: 0
-})
-
-const tableData = ref<any[]>([])
-
-const isCustom = (row: any) => row.domain_type === DOMAIN_TYPE_CUSTOM
-
-const verifyText = (status: number) =>
-  status === 1 ? '已通过' : status === 2 ? '未通过' : '未检测'
-
-const verifyTagType = (status: number) =>
-  status === 1 ? 'success' : status === 2 ? 'danger' : 'info'
-
-const sslText = (status: number) =>
-  status === 2 ? '已签发' : status === 1 ? '签发中' : status === 3 ? '签发失败' : '待处理'
-
-const sslTagType = (status: number) =>
-  status === 2 ? 'success' : status === 1 ? 'warning' : status === 3 ? 'danger' : 'info'
-
-const fetchData = async () => {
-  loading.value = true
-  try {
-    const res = await getTenantDomainList({
-      page: pagination.page,
-      pageSize: pagination.pageSize,
-      ...searchForm
-    })
-    if (res.code === 200) {
-      tableData.value = res.data.list || []
-      pagination.total = res.data.total || 0
-    }
-  } finally {
-    loading.value = false
-  }
-}
-
-const handleSearch = () => {
-  pagination.page = 1
-  fetchData()
-}
-
-const handleAudit = async (row: any, action: string) => {
-  const msg = action === 'approve' ? '确定要通过该域名申请吗？' : '确定要拒绝该域名申请吗？'
-  await ElMessageBox.confirm(msg, '提示', { type: 'warning' })
-
-  const res = await auditTenantDomain({ id: row.id, action })
-  if (res.code === 200) {
-    ElMessage.success(res.msg)
-    fetchData()
-  } else {
-    ElMessage.error(res.msg || '操作失败')
-  }
-}
-
-const handleDisable = async (row: any) => {
-  await ElMessageBox.confirm('确定要禁用该域名吗？禁用后该域名将无法访问官网。', '提示', { type: 'warning' })
-
-  const res = await toggleTenantDomainStatus(row.id)
-  if (res.code === 200) {
-    ElMessage.success(res.msg)
-    fetchData()
-  } else {
-    ElMessage.error(res.msg || '操作失败')
-  }
-}
-
-const handleEnable = async (row: any) => {
-  await ElMessageBox.confirm('确定要重新启用该域名吗？', '提示', { type: 'warning' })
-
-  const res = await toggleTenantDomainStatus(row.id)
-  if (res.code === 200) {
-    ElMessage.success(res.msg)
-    fetchData()
-  } else {
-    ElMessage.error(res.msg || '操作失败')
-  }
-}
-
-// 自有域名：重新检测解析，通过后后端自动申请证书
-const handleCheckDns = async (row: any) => {
-  checkingId.value = row.id
-  try {
-    const res = await checkCustomDomainDns(row.id)
-    if (res.code === 200) {
-      const data = res.data || {}
-      if (data.verify_status === 1) {
-        ElMessage.success(data.ssl_message || data.verify_msg || '解析检测通过')
-      } else {
-        ElMessage.warning(data.verify_msg || '解析尚未生效')
-      }
-      fetchData()
-    } else {
-      ElMessage.error(res.msg || '检测失败')
-    }
-  } finally {
-    checkingId.value = null
-  }
-}
-
-onMounted(() => {
-  fetchData()
-})
-</script>
-
-<style lang="less" scoped>
-.container-box {
-  padding: 20px;
-}
-
-.header-bar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  h2 {
-    margin: 0;
-    font-size: 18px;
-    font-weight: 600;
-  }
-}
-
-.search-box {
-  margin-bottom: 20px;
-}
-
-.text-muted {
-  color: #999;
-}
-
-.pagination-wrap {
-  margin-top: 20px;
-  display: flex;
-  justify-content: flex-end;
-}
-</style>
@@ -0,0 +1,357 @@
+<template>
+  <div class="approval-config">
+    <div class="header-bar">
+      <h2>审批流配置</h2>
+      <div>
+        <el-button type="primary" :disabled="!activeModule" @click="openNewFlow">
+          <el-icon><Plus /></el-icon>
+          新建流程
+        </el-button>
+      </div>
+    </div>
+    <el-divider />
+
+    <el-row :gutter="16">
+      <!-- 左侧：分类 + 流程列表 -->
+      <el-col :span="6">
+        <el-card shadow="never" class="side-card">
+          <template #header>
+            <span class="card-title">选择分类</span>
+          </template>
+          <el-select v-model="activeModule" placeholder="选择分类（功能模块）" style="width: 100%" @change="onModuleChange">
+            <el-option v-for="m in modules" :key="m.code" :label="m.name" :value="m.code" :disabled="!m.enabled">
+              <span>{{ m.name }}</span>
+              <el-tag v-if="!m.enabled" size="small" type="info" style="float: right">未开通</el-tag>
+            </el-option>
+          </el-select>
+          <div class="flow-list">
+            <div
+              v-for="f in flows"
+              :key="f.id"
+              :class="['flow-item', { active: current && current.id === f.id }]"
+              @click="selectFlow(f.id)"
+            >
+              <div class="flow-name">
+                {{ f.flow_name }}
+                <el-tag v-if="f.is_default === 1" size="small" type="success">默认</el-tag>
+              </div>
+              <div class="flow-code">{{ f.flow_code || '（保存后生成编号）' }}</div>
+              <div class="flow-sub">
+                <span>{{ f.node_count }} 个节点</span>
+                <el-tag size="small" :type="f.status === 1 ? 'info' : 'danger'">
+                  {{ f.status === 1 ? '启用' : '停用' }}
+                </el-tag>
+              </div>
+            </div>
+            <el-empty v-if="activeModule && !flows.length" description="该分类暂无审批流" :image-size="60" />
+            <el-empty v-if="!activeModule" description="请先选择分类" :image-size="60" />
+          </div>
+        </el-card>
+      </el-col>
+
+      <!-- 右侧：流程编辑 + 画布 -->
+      <el-col :span="18">
+        <el-card v-if="current" shadow="never">
+          <!-- 流程基本信息 -->
+          <el-form :model="current" label-width="96px" class="flow-meta">
+            <el-row :gutter="12">
+              <el-col :span="8">
+                <el-form-item label="流程名称">
+                  <el-input v-model="current.flow_name" placeholder="如：报销审批流程" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="所属分类">
+                  <el-input :model-value="moduleName(current.module_code)" disabled />
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="审批流编号">
+                  <el-input :model-value="current.flow_code || '保存后自动生成'" disabled />
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-form-item label="说明">
+              <el-input v-model="current.description" type="textarea" :rows="2" placeholder="流程用途说明" />
+            </el-form-item>
+            <el-row :gutter="12">
+              <el-col :span="12">
+                <el-form-item label="设为默认">
+                  <el-switch v-model="current.is_default" :active-value="1" :inactive-value="0" />
+                  <span class="hint">同分类仅一条默认，新申请走默认流程</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="启用状态">
+                  <el-switch v-model="current.status" :active-value="1" :inactive-value="0" />
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+
+          <el-divider content-position="left">流程编排（拖拽节点 · 手动连线 · 条件分支）</el-divider>
+
+          <FlowCanvas ref="canvasRef" v-model="graphModel" :approver-types="approverTypes" :pools="pools" />
+
+          <div class="save-bar">
+            <el-button @click="deleteCurrentFlow" type="danger" plain>删除流程</el-button>
+            <el-button type="primary" :loading="saving" @click="saveFlow">保存流程</el-button>
+          </div>
+        </el-card>
+
+        <el-card v-else shadow="never">
+          <el-empty description="请选择左侧分类并新建/选择流程" />
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus } from '@element-plus/icons-vue'
+import FlowCanvas from '@/components/approval/FlowCanvas.vue'
+import {
+  getApprovalOptions,
+  getApprovalFlowList,
+  getApprovalFlowDetail,
+  saveApprovalFlow,
+  deleteApprovalFlow
+} from '@/api/approval'
+
+const modules = ref<any[]>([])
+const activeModule = ref<string>('')
+const flows = ref<any[]>([])
+const current = ref<any>(null)
+const saving = ref(false)
+
+const canvasRef = ref<any>(null)
+// 传给画布的模型：{ nodes, edges }
+const graphModel = ref<any>({ nodes: [], edges: [] })
+
+const pools = reactive<{ users: any[]; roles: any[]; orgs: any[]; positions: any[] }>({
+  users: [],
+  roles: [],
+  orgs: [],
+  positions: []
+})
+
+// 租户侧 6 种审批人类型
+const approverTypes = [
+  { value: 1, label: '指定用户', needsSelection: true, selectLabel: '审批人', poolKey: 'users' },
+  { value: 2, label: '按角色', needsSelection: true, selectLabel: '角色', poolKey: 'roles' },
+  { value: 3, label: '指定部门主管', needsSelection: true, selectLabel: '部门', poolKey: 'orgs' },
+  { value: 4, label: '按职位', needsSelection: true, selectLabel: '职位', poolKey: 'positions' },
+  { value: 5, label: '发起人本人', needsSelection: false, selectLabel: '', poolKey: '' },
+  { value: 6, label: '发起人部门主管', needsSelection: false, selectLabel: '', poolKey: '' }
+]
+
+function moduleName(code: string) {
+  return modules.value.find((m) => m.code === code)?.name || code || '-'
+}
+
+async function loadOptions() {
+  const res: any = await getApprovalOptions()
+  if (res.code === 200) {
+    modules.value = res.data.modules || []
+    pools.users = res.data.users || []
+    pools.roles = res.data.roles || []
+    pools.orgs = res.data.orgs || []
+    pools.positions = res.data.positions || []
+    if (!activeModule.value) {
+      const first = modules.value.find((m: any) => m.enabled) || modules.value[0]
+      if (first) {
+        activeModule.value = first.code
+        loadFlows()
+      }
+    }
+  }
+}
+
+function onModuleChange() {
+  current.value = null
+  graphModel.value = { nodes: [], edges: [] }
+  loadFlows()
+}
+
+async function loadFlows() {
+  if (!activeModule.value) return
+  const res: any = await getApprovalFlowList({ module: activeModule.value })
+  if (res.code === 200) flows.value = res.data || []
+}
+
+async function selectFlow(id: number) {
+  const res: any = await getApprovalFlowDetail(id)
+  if (res.code === 200) {
+    const d = res.data || {}
+    current.value = d
+    graphModel.value = { nodes: d.nodes || [], edges: d.edges || [] }
+  }
+}
+
+function openNewFlow() {
+  current.value = {
+    id: 0,
+    flow_name: '',
+    module_code: activeModule.value,
+    biz_type: activeModule.value,
+    flow_code: '',
+    description: '',
+    is_default: 0,
+    status: 1
+  }
+  // 预置开始/结束，方便用户直接拖审批节点连线
+  graphModel.value = {
+    nodes: [
+      { node_key: 'start', node_name: '开始', node_type: 1, pos_x: 60, pos_y: 200 },
+      { node_key: 'end', node_name: '结束', node_type: 3, pos_x: 520, pos_y: 200 }
+    ],
+    edges: []
+  }
+}
+
+async function saveFlow() {
+  if (!current.value.flow_name?.trim()) {
+    ElMessage.warning('请填写流程名称')
+    return
+  }
+  if (!current.value.module_code) {
+    ElMessage.warning('请选择分类')
+    return
+  }
+  const graph = canvasRef.value?.serialize?.() || { nodes: [], edges: [] }
+  saving.value = true
+  try {
+    const payload = {
+      id: current.value.id || 0,
+      module_code: current.value.module_code,
+      biz_type: current.value.biz_type || current.value.module_code,
+      flow_name: current.value.flow_name,
+      description: current.value.description,
+      is_default: current.value.is_default,
+      status: current.value.status,
+      nodes: graph.nodes,
+      edges: graph.edges
+    }
+    const res: any = await saveApprovalFlow(payload)
+    if (res.code === 200) {
+      ElMessage.success('保存成功')
+      activeModule.value = current.value.module_code
+      await loadFlows()
+      if (res.data?.id) await selectFlow(res.data.id)
+    } else {
+      ElMessage.error(res.msg || '保存失败')
+    }
+  } finally {
+    saving.value = false
+  }
+}
+
+async function deleteCurrentFlow() {
+  if (!current.value?.id) {
+    current.value = null
+    graphModel.value = { nodes: [], edges: [] }
+    return
+  }
+  await ElMessageBox.confirm('确定删除该审批流？在途审批存在时无法删除。', '提示', { type: 'warning' })
+  const res: any = await deleteApprovalFlow(current.value.id)
+  if (res.code === 200) {
+    ElMessage.success('已删除')
+    current.value = null
+    graphModel.value = { nodes: [], edges: [] }
+    loadFlows()
+  } else {
+    ElMessage.error(res.msg || '删除失败')
+  }
+}
+
+onMounted(() => {
+  loadOptions()
+})
+</script>
+
+<style lang="less" scoped>
+.approval-config {
+  padding: 20px;
+}
+
+.header-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  h2 {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 600;
+  }
+}
+
+.side-card {
+  min-height: 400px;
+
+  .card-title {
+    font-weight: 600;
+  }
+}
+
+.flow-list {
+  margin-top: 12px;
+
+  .flow-item {
+    padding: 10px 12px;
+    border-radius: 6px;
+    cursor: pointer;
+    border: 1px solid transparent;
+
+    &:hover {
+      background: #f5f7fa;
+    }
+
+    &.active {
+      background: #ecf5ff;
+      border-color: #b3d8ff;
+    }
+
+    .flow-name {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 14px;
+      color: #303133;
+    }
+
+    .flow-code {
+      margin-top: 2px;
+      font-size: 12px;
+      color: #409eff;
+      font-family: Menlo, Consolas, monospace;
+    }
+
+    .flow-sub {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 4px;
+      font-size: 12px;
+      color: #909399;
+    }
+  }
+}
+
+.flow-meta {
+  .hint {
+    margin-left: 10px;
+    font-size: 12px;
+    color: #909399;
+  }
+}
+
+.save-bar {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+</style>