<!--OA模块：审批列表-->
|
<template>
|
<div class="app-container">
|
<div class="search_form mb20">
|
<div class="search_fields">
|
<span class="search_title">审批类型：</span>
|
<el-select
|
v-model="searchForm.approvalType"
|
placeholder="请选择审批类型"
|
clearable
|
filterable
|
style="width: 200px"
|
>
|
<el-option
|
v-for="opt in APPROVAL_TYPE_OPTIONS"
|
:key="opt.value"
|
:label="opt.label"
|
:value="opt.value"
|
/>
|
</el-select>
|
<span class="search_title" style="margin-left: 12px">申请人名称：</span>
|
<el-input
|
v-model="searchForm.applicantKeyword"
|
style="width: 200px"
|
placeholder="请输入申请人名称"
|
clearable
|
:prefix-icon="Search"
|
@keyup.enter="handleQuery"
|
/>
|
<span class="search_title" style="margin-left: 12px">创建时间：</span>
|
<el-date-picker
|
v-model="searchForm.createTimeRange"
|
type="daterange"
|
range-separator="-"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
format="YYYY-MM-DD"
|
value-format="YYYY-MM-DD"
|
style="width: 260px"
|
clearable
|
/>
|
<el-button type="primary" :icon="Search" style="margin-left: 10px" @click="handleQuery">搜索</el-button>
|
<el-button :icon="RefreshRight" @click="resetSearch">重置</el-button>
|
</div>
|
<div class="search_actions">
|
<el-button type="primary" :icon="Plus" @click="openSubmitDialog">提交审批</el-button>
|
</div>
|
</div>
|
|
<div class="table_list">
|
<PIMTable
|
rowKey="id"
|
:column="tableColumn"
|
:tableData="tableData"
|
:page="page"
|
:isSelection="false"
|
:tableLoading="tableLoading"
|
:total="page.total"
|
@pagination="pagination"
|
>
|
<template #approveType="{ row }">
|
<span class="approve-type-cell" :style="approvalTypeStyle(row.approvalType)">
|
{{ approvalTypeLabel(row.approvalType) }}
|
</span>
|
</template>
|
</PIMTable>
|
</div>
|
|
<!-- 提交审批（按模板） -->
|
<el-dialog
|
v-model="submitDialog.visible"
|
:title="submitDialogTitle"
|
width="720px"
|
append-to-body
|
destroy-on-close
|
class="approve-submit-dialog"
|
@closed="resetSubmitDialogState"
|
>
|
<template v-if="submitDialog.step === 1 && !isSubmitEdit">
|
<p class="template-hint">请选择已启用的审批模板，系统将按模板配置引导填报。</p>
|
<div v-loading="submitTemplatesLoading" class="template-grid">
|
<div
|
v-for="card in submitTemplateCards"
|
:key="card.key"
|
class="template-card"
|
@click="onTemplatePick(card)"
|
>
|
<span class="template-card-type" :style="approvalTypeStyle(card.approvalType)">
|
{{ card.label }}
|
</span>
|
<span class="template-card-desc">{{ card.summaryPlaceholder }}</span>
|
</div>
|
<el-empty
|
v-if="!submitTemplatesLoading && !submitTemplateCards.length"
|
description="暂无可用审批模板"
|
:image-size="80"
|
class="template-empty"
|
/>
|
</div>
|
</template>
|
|
<template v-else>
|
<div v-loading="submitTemplatesLoading && !isSubmitEdit">
|
<el-form ref="submitFormRef" :model="submitForm" :rules="submitFormRules" label-width="120px">
|
<el-form-item label="审批类型">
|
<span class="approve-type-cell" :style="approvalTypeStyle(activeTemplate.approvalType)">
|
{{ activeTemplate.label }}
|
</span>
|
<el-button
|
v-if="!isSubmitEdit"
|
type="primary"
|
link
|
class="ml12"
|
@click="backToTemplatePick"
|
>
|
更换模板
|
</el-button>
|
</el-form-item>
|
<FormPayloadFields
|
:fields="submitFormFields"
|
:form-payload="submitForm.formPayload"
|
/>
|
<el-form-item label="审批流程" required>
|
<TemplateFlowEditor v-model="submitForm.flowNodes" :user-options="flowUserOptions" />
|
<p class="flow-tip">
|
按顺序流转：可为每个节点添加多名审批人；会签需全部通过，或签任一人通过即可进入下一节点。
|
</p>
|
</el-form-item>
|
</el-form>
|
</div>
|
</template>
|
|
<template #footer>
|
<el-button
|
v-if="submitDialog.step === 2 || isSubmitEdit"
|
type="primary"
|
:loading="submitSaving"
|
@click="onSubmitInstance"
|
>
|
{{ isSubmitEdit ? "保 存" : "提 交" }}
|
</el-button>
|
<el-button @click="submitDialog.visible = false">
|
{{ submitDialog.step === 1 && !isSubmitEdit ? "取 消" : "关 闭" }}
|
</el-button>
|
</template>
|
</el-dialog>
|
|
<!-- 详情 -->
|
<el-dialog
|
v-model="detailDialog.visible"
|
title="审批详情"
|
width="920px"
|
append-to-body
|
destroy-on-close
|
class="approve-detail-dialog"
|
>
|
<div class="approve-detail-body">
|
<ApproveDetailPanel :row="detailRow" />
|
<div class="detail-block">
|
<div class="detail-block-title">
|
审批流程（{{ detailRow.tasks?.length || detailRow.flowNodes?.length || 0 }} 项）
|
</div>
|
<InstanceFlowDisplay :tasks="detailRow.tasks" :nodes="detailRow.flowNodes" />
|
</div>
|
<div class="detail-block">
|
<div class="detail-block-title">审批记录</div>
|
<el-timeline v-if="detailRow.approvalRecords?.length" class="approve-record-timeline">
|
<el-timeline-item
|
v-for="(rec, i) in detailRow.approvalRecords"
|
:key="rec.id ?? i"
|
:type="rec.result === 'approved' ? 'success' : rec.result === 'rejected' ? 'danger' : 'primary'"
|
:timestamp="formatRecordTime(rec.time)"
|
placement="top"
|
>
|
<div class="record-item">
|
<span class="record-operator">{{ rec.operatorName || "—" }}</span>
|
<el-tag
|
size="small"
|
:type="rec.result === 'approved' ? 'success' : rec.result === 'rejected' ? 'danger' : 'info'"
|
effect="plain"
|
>
|
{{ approvalActionLabel(rec.result) }}
|
</el-tag>
|
<p class="record-opinion">{{ rec.opinion || "无意见" }}</p>
|
</div>
|
</el-timeline-item>
|
</el-timeline>
|
<el-empty v-else description="暂无审批记录" :image-size="48" />
|
</div>
|
</div>
|
<template #footer>
|
<el-button
|
v-if="detailRow.approvalStatus === 'pending'"
|
@click="openEditFromDetail"
|
>
|
修 改
|
</el-button>
|
<el-button
|
v-if="detailRow.approvalStatus === 'pending' && detailRow.isApprove"
|
type="primary"
|
@click="openApproveFromDetail"
|
>
|
去审批
|
</el-button>
|
<el-button @click="detailDialog.visible = false">关 闭</el-button>
|
</template>
|
</el-dialog>
|
|
<!-- 审批操作 -->
|
<el-dialog
|
v-model="approveDialog.visible"
|
title="审批处理"
|
width="960px"
|
append-to-body
|
destroy-on-close
|
@closed="approveOpinion = ''"
|
>
|
<ApproveDetailPanel :row="approveDialog.row" />
|
<div class="detail-block mt16">
|
<div class="detail-block-title">
|
审批流程（{{ approveDialog.row?.tasks?.length || approveDialog.row?.flowNodes?.length || 0 }} 项）
|
</div>
|
<InstanceFlowDisplay :tasks="approveDialog.row?.tasks" :nodes="approveDialog.row?.flowNodes" />
|
</div>
|
<el-form label-width="100px" class="mt16">
|
<el-form-item label="审批意见" required>
|
<el-input
|
v-model="approveOpinion"
|
type="textarea"
|
:rows="3"
|
maxlength="500"
|
show-word-limit
|
placeholder="通过可留空；驳回请填写具体原因"
|
/>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<el-button
|
type="success"
|
:loading="approveSubmitting"
|
@click="onApprove('approved')"
|
>
|
通 过
|
</el-button>
|
<el-button
|
type="danger"
|
:loading="approveSubmitting"
|
@click="onApprove('rejected')"
|
>
|
驳 回
|
</el-button>
|
<el-button :disabled="approveSubmitting" @click="approveDialog.visible = false">
|
取 消
|
</el-button>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import { Plus, RefreshRight } from "@element-plus/icons-vue";
|
import { ElMessage } from "element-plus";
|
import { onMounted, ref } from "vue";
|
import { userListNoPageByTenantId } from "@/api/system/user.js";
|
import TemplateFlowEditor from "../approve-template/components/TemplateFlowEditor.vue";
|
import FormPayloadFields from "./components/FormPayloadFields.vue";
|
import { formatDisplayTime } from "../approve-template/approveTemplateConstants.js";
|
import { approvalTypeStyle } from "./approveListConstants.js";
|
import ApproveDetailPanel from "./components/ApproveDetailPanel.vue";
|
import InstanceFlowDisplay from "./components/InstanceFlowDisplay.vue";
|
import { useApproveList } from "./useApproveList.js";
|
|
const al = useApproveList();
|
const {
|
Search,
|
APPROVAL_TYPE_OPTIONS,
|
submitTemplateCards,
|
submitTemplatesLoading,
|
approvalTypeLabel,
|
approvalActionLabel,
|
searchForm,
|
tableLoading,
|
page,
|
tableData,
|
tableColumn,
|
detailDialog,
|
detailRow,
|
approveDialog,
|
approveOpinion,
|
approveSubmitting,
|
submitDialog,
|
isSubmitEdit,
|
submitDialogTitle,
|
submitForm,
|
submitFormRef,
|
submitSaving,
|
activeTemplate,
|
submitFormFields,
|
submitFormRules,
|
handleQuery,
|
resetSearch,
|
pagination,
|
resetSubmitDialogState,
|
openSubmitDialog,
|
openEditDialog,
|
onTemplatePick,
|
backToTemplatePick,
|
submitInstanceForm,
|
submitApprove,
|
openDetail,
|
openApprove,
|
} = al;
|
|
const flowUserOptions = ref([]);
|
|
function unwrapArray(payload) {
|
if (Array.isArray(payload)) return payload;
|
if (payload?.data && Array.isArray(payload.data)) return payload.data;
|
if (payload?.rows && Array.isArray(payload.rows)) return payload.rows;
|
return [];
|
}
|
|
function isActiveUser(u) {
|
if (u.delFlag === "2" || u.delFlag === 2) return false;
|
if (u.status == null) return true;
|
return String(u.status) === "0";
|
}
|
|
async function loadUsers() {
|
try {
|
const res = await userListNoPageByTenantId();
|
flowUserOptions.value = unwrapArray(res).filter(isActiveUser);
|
} catch {
|
flowUserOptions.value = [];
|
}
|
}
|
|
async function onSubmitInstance() {
|
const ok = await submitInstanceForm();
|
if (ok) ElMessage.success(isSubmitEdit.value ? "修改成功" : "审批已提交");
|
}
|
|
async function onApprove(result) {
|
const ret = await submitApprove(result);
|
if (ret?.needOpinion) {
|
ElMessage.warning("驳回时请填写审批意见");
|
return;
|
}
|
if (ret?.ok) {
|
ElMessage.success(result === "approved" ? "已通过" : "已驳回");
|
}
|
}
|
|
function formatRecordTime(time) {
|
return formatDisplayTime(time) || "—";
|
}
|
|
function openApproveFromDetail() {
|
const row = detailRow.value;
|
detailDialog.visible = false;
|
openApprove(row);
|
}
|
|
function openEditFromDetail() {
|
const row = detailRow.value;
|
detailDialog.visible = false;
|
openEditDialog(row);
|
}
|
|
onMounted(() => {
|
loadUsers();
|
handleQuery();
|
});
|
</script>
|
|
<style scoped>
|
.mb20 {
|
margin-bottom: 20px;
|
}
|
.ml12 {
|
margin-left: 12px;
|
}
|
.mt16 {
|
margin-top: 16px;
|
}
|
.search_form {
|
display: flex;
|
flex-wrap: wrap;
|
align-items: center;
|
justify-content: space-between;
|
gap: 12px;
|
}
|
.search_fields {
|
display: flex;
|
flex-wrap: wrap;
|
align-items: center;
|
gap: 4px;
|
}
|
.search_actions {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 8px;
|
}
|
.approve-type-cell {
|
display: inline-block;
|
padding: 2px 10px;
|
border-radius: 4px;
|
font-size: 13px;
|
line-height: 1.5;
|
}
|
.template-hint {
|
font-size: 13px;
|
color: var(--el-text-color-secondary);
|
margin: 0 0 16px;
|
}
|
.template-grid {
|
display: grid;
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
gap: 12px;
|
min-height: 120px;
|
}
|
.template-empty {
|
grid-column: 1 / -1;
|
}
|
.template-card {
|
padding: 14px 16px;
|
border: 1px solid var(--el-border-color-lighter);
|
border-radius: var(--radius-md, 8px);
|
cursor: pointer;
|
transition: border-color 0.2s, box-shadow 0.2s;
|
background: var(--el-fill-color-blank);
|
}
|
.template-card:hover {
|
border-color: var(--el-color-primary);
|
box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.06));
|
}
|
.template-card-type {
|
display: inline-block;
|
padding: 2px 8px;
|
border-radius: 4px;
|
font-size: 13px;
|
font-weight: 600;
|
margin-bottom: 8px;
|
}
|
.template-card-desc {
|
display: block;
|
font-size: 12px;
|
color: var(--el-text-color-secondary);
|
line-height: 1.5;
|
}
|
.flow-tip {
|
font-size: 12px;
|
color: var(--el-text-color-secondary);
|
margin-top: 8px;
|
}
|
.approve-submit-dialog :deep(.el-dialog__body) {
|
padding-top: 12px;
|
}
|
.approve-detail-dialog :deep(.el-dialog__body) {
|
padding-top: 16px;
|
max-height: 70vh;
|
overflow-y: auto;
|
}
|
.approve-detail-body .detail-block {
|
margin-top: 20px;
|
}
|
.approve-detail-body .detail-block-title {
|
font-size: 14px;
|
font-weight: 600;
|
color: var(--el-text-color-primary);
|
margin: 0 0 12px;
|
padding-left: 10px;
|
border-left: 3px solid var(--el-color-primary);
|
line-height: 1.4;
|
}
|
.approve-record-timeline {
|
padding-left: 4px;
|
}
|
.record-item {
|
padding: 4px 0 2px;
|
}
|
.record-operator {
|
font-weight: 600;
|
margin-right: 8px;
|
color: var(--el-text-color-primary);
|
}
|
.record-opinion {
|
margin: 8px 0 0;
|
font-size: 13px;
|
color: var(--el-text-color-regular);
|
line-height: 1.5;
|
}
|
.detail-block-title {
|
font-size: 14px;
|
font-weight: 600;
|
color: var(--el-text-color-primary);
|
margin: 0 0 12px;
|
padding-left: 10px;
|
border-left: 3px solid var(--el-color-primary);
|
line-height: 1.4;
|
}
|
</style>
|
