yunzerwebsite/yunzerwebsiteallinone
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

做双端审批流

Browse Source
This commit is contained in:
hero920103 committed 2026-10-07 13:46:32 +08:00
1 parent 5b4dbb2b46
commit ffaadc26ae
69 files changed
+6662 -1071
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

backend/src/views/apps/cms/domain/audit.vue
-296
View File
@@ -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>
backend/src/views/system/approval/index.vue
+357
View File
@@ -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>