<!--OA模块：审批模板-->
|
|
<template>
|
|
<div class="app-container approve-template-page">
|
|
<div class="search_form mb20">
|
|
<div class="search_fields">
|
|
<span class="search_title">模板名称：</span>
|
|
<el-input
|
|
v-model="searchForm.keyword"
|
|
style="width: 220px"
|
|
placeholder="搜索名称或说明"
|
|
clearable
|
|
:prefix-icon="Search"
|
|
@keyup.enter="handleQuery"
|
|
/>
|
|
<el-checkbox v-model="searchForm.enabledOnly" class="ml12" @change="handleQuery">
|
|
仅显示启用
|
|
</el-checkbox>
|
|
<el-button type="primary" :icon="Search" class="ml10" @click="handleQuery">搜索</el-button>
|
|
<el-button :icon="RefreshRight" @click="resetSearch">重置</el-button>
|
|
</div>
|
|
<div class="search_actions">
|
|
<el-button type="primary" :icon="Plus" @click="openFormDialog('add')">新建模板</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"
|
|
/>
|
|
</div>
|
|
|
|
<!-- 新建 / 编辑 -->
|
|
<el-dialog
|
|
v-model="formDialog.visible"
|
|
:title="formDialog.title"
|
|
width="1020px"
|
|
append-to-body
|
|
destroy-on-close
|
|
class="template-form-dialog"
|
|
@closed="onFormDialogClosed"
|
|
>
|
|
<el-form
|
|
v-if="formDialog.visible"
|
|
ref="formRef"
|
|
:model="form"
|
|
:rules="formRules"
|
|
label-width="100px"
|
|
>
|
|
<el-row :gutter="20">
|
|
<el-col :span="8">
|
|
<el-form-item label="模板名称" prop="templateName">
|
|
<el-input v-model="form.templateName" placeholder="如：项目立项审批" maxlength="50" show-word-limit />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="模板类型" prop="businessType">
|
|
<el-select v-model="form.businessType" placeholder="请选择" style="width: 100%">
|
|
<el-option
|
|
v-for="opt in templateTypeOptions"
|
|
:key="`tpl-type-${opt.value}`"
|
|
:label="opt.label"
|
|
:value="opt.value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="启用状态">
|
|
<el-switch v-model="form.enabled" active-text="启用" inactive-text="停用" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-form-item label="模板说明">
|
|
<el-input
|
|
v-model="form.description"
|
|
type="textarea"
|
|
:rows="2"
|
|
placeholder="简要说明该模板的适用场景"
|
|
maxlength="200"
|
|
show-word-limit
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="填报配置">
|
|
<FormConfigEditor v-model="form.formConfigData" :exclude-template-id="form.id" />
|
|
<p class="flow-tip">配置提交审批时需填写的表单项，保存后写入 formConfig（JSON）。</p>
|
|
</el-form-item>
|
|
<el-form-item label="审批流程" required>
|
|
<TemplateFlowEditor v-model="form.flowNodes" :user-options="flowUserOptions" />
|
|
<p class="flow-tip">
|
|
按顺序流转：可为每个节点添加多名审批人；会签需全部通过，或签任一人通过即可进入下一节点。
|
|
</p>
|
|
</el-form-item>
|
|
<el-form-item label="附件">
|
|
<div class="upload-block">
|
|
<FileUpload v-model:file-list="form.storageBlobDTOs" :limit="10" button-text="点击选择文件" />
|
|
</div>
|
|
<p class="flow-tip">可上传模板说明文档、制度文件等（选填）。</p>
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<el-button type="primary" @click="onSubmitForm">保 存</el-button>
|
|
<el-button @click="formDialog.visible = false">取 消</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
|
|
<!-- 详情 -->
|
|
<el-dialog v-model="detailDialog.visible" title="模板详情" width="880px" append-to-body destroy-on-close>
|
|
<div v-loading="detailLoading" class="detail-dialog-body">
|
|
<el-descriptions :column="2" border>
|
|
<el-descriptions-item label="模板名称">{{ detailRow.templateName }}</el-descriptions-item>
|
|
<el-descriptions-item label="模板类型">{{ templateTypeLabel(detailRow.businessType) }}</el-descriptions-item>
|
|
<el-descriptions-item label="状态">
|
|
<el-tag :type="detailRow.enabled !== false ? 'success' : 'info'" size="small">
|
|
{{ detailRow.enabled !== false ? "启用" : "停用" }}
|
|
</el-tag>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="说明" :span="2">{{ detailRow.description || "—" }}</el-descriptions-item>
|
|
<el-descriptions-item label="填报提示" :span="2">
|
|
{{ detailFormConfig.summaryPlaceholder || "—" }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="创建人">{{ detailRow.createdUserName || "—" }}</el-descriptions-item>
|
|
<el-descriptions-item label="创建时间">{{ formatDisplayTime(detailRow.createdTime) }}</el-descriptions-item>
|
|
<el-descriptions-item label="更新时间">{{ formatDisplayTime(detailRow.updatedTime) }}</el-descriptions-item>
|
|
</el-descriptions>
|
|
<el-divider content-position="left">填报项（{{ detailFormConfig.fields?.length || 0 }} 项）</el-divider>
|
|
<el-table
|
|
v-if="detailFormConfig.fields?.length"
|
|
:data="detailFormConfig.fields"
|
|
border
|
|
size="small"
|
|
class="mb16"
|
|
>
|
|
<el-table-column prop="label" label="显示名称" min-width="120" />
|
|
<el-table-column prop="key" label="字段标识" min-width="100" />
|
|
<el-table-column label="类型" width="100">
|
|
<template #default="{ row }">{{ formFieldTypeLabel(row.type) }}</template>
|
|
</el-table-column>
|
|
<el-table-column label="选项来源" width="100">
|
|
<template #default="{ row }">
|
|
{{ row.type === 'select' ? selectOptionSourceLabel(row.optionSource) : '—' }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="必填" width="70" align="center">
|
|
<template #default="{ row }">{{ row.required !== false ? "是" : "否" }}</template>
|
|
</el-table-column>
|
|
<el-table-column label="默认值" min-width="120" show-overflow-tooltip>
|
|
<template #default="{ row }">{{ formatDefaultValueDisplay(row) }}</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-empty v-else description="未配置填报项" :image-size="48" class="mb16" />
|
|
<el-divider content-position="left">审批流程（{{ detailRow.flowNodes?.length || 0 }} 个节点）</el-divider>
|
|
<div v-if="detailRow.flowNodes?.length" class="detail-flow">
|
|
<div v-for="(node, index) in detailRow.flowNodes" :key="index" class="detail-node">
|
|
<div class="detail-node-head">
|
|
<span class="detail-node-order">节点 {{ index + 1 }}</span>
|
|
<el-tag size="small" :type="node.signMode === 'or_sign' ? 'warning' : 'primary'">
|
|
{{ nodeSignModeLabel(node.signMode) }}
|
|
</el-tag>
|
|
</div>
|
|
<div class="detail-approvers">
|
|
<el-tag
|
|
v-for="a in node.approvers"
|
|
:key="String(a.approverId)"
|
|
class="detail-approver-tag"
|
|
effect="plain"
|
|
>
|
|
{{ a.approverName || "—" }}
|
|
</el-tag>
|
|
<span v-if="!node.approvers?.length" class="text-muted">未配置审批人</span>
|
|
</div>
|
|
<el-icon v-if="index < detailRow.flowNodes.length - 1" class="detail-arrow"><ArrowRight /></el-icon>
|
|
</div>
|
|
</div>
|
|
<el-empty v-else description="暂无流程节点" :image-size="60" />
|
|
<el-divider content-position="left">附件（{{ detailAttachments.length }} 个）</el-divider>
|
|
<template v-if="detailAttachments.length">
|
|
<el-tag
|
|
v-for="(f, i) in detailAttachments"
|
|
:key="i"
|
|
class="detail-attachment-tag"
|
|
type="info"
|
|
effect="plain"
|
|
>
|
|
{{ attachmentDisplayName(f) }}
|
|
</el-tag>
|
|
</template>
|
|
<el-empty v-else description="暂无附件" :image-size="48" />
|
|
</div>
|
|
<template #footer>
|
|
<el-button @click="detailDialog.visible = false">关 闭</el-button>
|
|
<el-button type="primary" @click="editFromDetail">编 辑</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ArrowRight, Plus, RefreshRight } from "@element-plus/icons-vue";
|
|
import { ElMessage } from "element-plus";
|
|
import { computed, nextTick, onMounted, ref } from "vue";
|
|
import { userListNoPageByTenantId } from "@/api/system/user.js";
|
|
import FileUpload from "@/components/AttachmentUpload/file/index.vue";
|
|
import FormConfigEditor from "./components/FormConfigEditor.vue";
|
|
import TemplateFlowEditor from "./components/TemplateFlowEditor.vue";
|
|
import { formatDisplayTime, mapAttachmentsFromApi } from "./approveTemplateConstants.js";
|
|
import { formatDefaultValueDisplay, formFieldTypeLabel, parseFormConfigToData } from "./formConfigUtils.js";
|
import { selectOptionSourceLabel } from "./selectOptionSource.js";
|
|
import { useApproveTemplate } from "./useApproveTemplate.js";
|
|
|
|
const {
|
|
Search,
|
|
templateTypeOptions,
|
|
loadTemplateTypeOptions,
|
|
templateTypeLabel,
|
|
nodeSignModeLabel,
|
|
searchForm,
|
|
tableLoading,
|
|
page,
|
|
tableData,
|
|
tableColumn,
|
|
formDialog,
|
|
form,
|
|
formRef,
|
|
formRules,
|
|
detailDialog,
|
|
detailRow,
|
|
detailLoading,
|
|
fetchTemplateList,
|
|
handleQuery,
|
|
resetSearch,
|
|
pagination,
|
|
openFormDialog,
|
|
openDetail,
|
|
submitForm,
|
|
} = useApproveTemplate();
|
|
|
|
const flowUserOptions = ref([]);
|
|
|
|
const detailFormConfig = computed(() =>
|
|
parseFormConfigToData(detailRow.value?.formConfigData ?? detailRow.value?.formConfig)
|
|
);
|
|
|
|
const detailAttachments = computed(() => mapAttachmentsFromApi(detailRow.value));
|
|
|
|
function attachmentDisplayName(file) {
|
|
if (!file) return "未命名";
|
|
return file.name || file.originalFilename || file.fileName || "未命名";
|
|
}
|
|
|
|
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 onSubmitForm() {
|
|
const ret = await submitForm();
|
|
if (ret?.message) {
|
|
ElMessage.warning(ret.message);
|
|
return;
|
|
}
|
|
if (ret?.ok) ElMessage.success("保存成功");
|
|
}
|
|
|
|
function onFormDialogClosed() {
|
|
formRef.value?.resetFields?.();
|
|
}
|
|
|
|
async function editFromDetail() {
|
|
const row = detailRow.value;
|
|
detailDialog.visible = false;
|
|
await nextTick();
|
|
openFormDialog("edit", row);
|
|
}
|
|
|
|
onMounted(() => {
|
|
loadUsers();
|
|
loadTemplateTypeOptions();
|
|
fetchTemplateList();
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.mb20 {
|
|
margin-bottom: 20px;
|
|
}
|
|
.mb16 {
|
|
margin-bottom: 16px;
|
|
}
|
|
.mb16.el-empty {
|
|
padding: 8px 0;
|
|
}
|
|
.ml10 {
|
|
margin-left: 10px;
|
|
}
|
|
.ml12 {
|
|
margin-left: 12px;
|
|
}
|
|
.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;
|
|
gap: 8px;
|
|
}
|
|
.flow-tip {
|
|
font-size: 12px;
|
|
color: var(--el-text-color-secondary);
|
|
margin: 8px 0 0;
|
|
line-height: 1.5;
|
|
}
|
|
.detail-flow {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
}
|
|
.detail-node {
|
|
position: relative;
|
|
min-width: 180px;
|
|
max-width: 240px;
|
|
padding: 12px;
|
|
border: 1px solid var(--el-border-color-lighter);
|
|
border-radius: 8px;
|
|
background: var(--el-fill-color-lighter);
|
|
}
|
|
.detail-node-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 8px;
|
|
}
|
|
.detail-node-order {
|
|
font-weight: 600;
|
|
font-size: 13px;
|
|
}
|
|
.detail-approvers {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 4px;
|
|
}
|
|
.detail-approver-tag {
|
|
margin: 0;
|
|
}
|
|
.detail-arrow {
|
|
position: absolute;
|
|
right: -20px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: var(--el-text-color-placeholder);
|
|
}
|
|
.detail-dialog-body {
|
|
min-height: 120px;
|
|
}
|
|
.upload-block {
|
|
width: 100%;
|
|
}
|
|
.detail-attachment-tag {
|
|
margin: 0 8px 8px 0;
|
|
}
|
|
.text-muted {
|
|
font-size: 12px;
|
|
color: var(--el-text-color-placeholder);
|
|
}
|
|
.template-form-dialog :deep(.el-dialog__body) {
|
|
padding-top: 8px;
|
|
}
|
|
</style>
|
