yinq
/
hwbm-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1.0.46 审批记录页面取消选项卡显示

Browse Source
dev
yinq 3 days ago
parent 7028e63d79
commit e9288bbeb9
1 changed files with 144 additions and 55 deletions
Show Stats Download Patch File Download Diff File

199
src/components/Process/approvalRecord.vue
Unescape Escape View File

@ -1,60 +1,64 @@
<template>
<div class="container">
<el-dialog v-model="visible" draggable title="审批记录" :width="props.width" :height="props.height" :close-on-click-modal="false">
<el-tabs v-model="tabActiveName" class="demo-tabs">
<el-tab-pane v-loading="loading" label="流程图" name="image" style="height: 68vh">
<flowChart :ins-id="insId" v-if="insId" />
</el-tab-pane>
<el-tab-pane v-loading="loading" label="审批信息" name="info">
<div>
<el-table :data="historyList" style="width: 100%" border fit>
<el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
<el-table-column prop="nodeName" label="任务名称" sortable align="center"></el-table-column>
<el-table-column prop="approveName" :show-overflow-tooltip="true" label="办理人" sortable align="center">
<template #default="scope">
<template v-if="scope.row.approveName">
<el-tag v-for="(item, index) in scope.row.approveName.split(',')" :key="index" type="success">{{ item }}</el-tag>
</template>
<template v-else> <el-tag type="success">无</el-tag></template>
</template>
</el-table-column>
<el-table-column prop="flowStatus" label="状态" width="80" sortable align="center">
<template #default="scope">
<dict-tag :options="wf_task_status" :value="scope.row.flowStatus"></dict-tag>
</template>
</el-table-column>
<el-table-column prop="message" label="审批意见" :show-overflow-tooltip="true" sortable align="center"></el-table-column>
<el-table-column prop="createTime" label="开始时间" width="160" :show-overflow-tooltip="true" sortable align="center"></el-table-column>
<el-table-column prop="updateTime" label="结束时间" width="160" :show-overflow-tooltip="true" sortable align="center"></el-table-column>
<el-table-column
prop="runDuration"
label="运行时长"
width="140"
:show-overflow-tooltip="true"
sortable
align="center"
></el-table-column>
<el-table-column prop="attachmentList" width="120" label="附件" align="center">
<template #default="scope">
<el-popover v-if="scope.row.attachmentList && scope.row.attachmentList.length > 0" placement="right" :width="310" trigger="click">
<template #reference>
<el-button type="primary" style="margin-right: 16px">附件</el-button>
</template>
<el-table border :data="scope.row.attachmentList">
<el-table-column prop="originalName" width="202" :show-overflow-tooltip="true" label="附件名称"></el-table-column>
<el-table-column prop="name" width="80" align="center" :show-overflow-tooltip="true" label="操作">
<template #default="tool">
<el-button type="text" @click="handleDownload(tool.row.ossId)">下载</el-button>
</template>
</el-table-column>
</el-table>
</el-popover>
</template>
</el-table-column>
</el-table>
<div class="content-wrapper">
<div class="flow-chart-section" v-loading="loading">
<div class="section-title">
<span class="title-text">流程图</span>
</div>
</el-tab-pane>
</el-tabs>
<flowChart :ins-id="insId" v-if="insId" />
</div>
<div class="approval-info-section" v-loading="loading">
<div class="section-title">
<span class="title-text">审批信息</span>
</div>
<el-table :data="historyList" style="width: 100%" border fit>
<el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
<el-table-column prop="nodeName" label="任务名称" sortable align="center"></el-table-column>
<el-table-column prop="approveName" :show-overflow-tooltip="true" label="办理人" sortable align="center">
<template #default="scope">
<template v-if="scope.row.approveName">
<el-tag v-for="(item, index) in scope.row.approveName.split(',')" :key="index" type="success">{{ item }}</el-tag>
</template>
<template v-else> <el-tag type="success">无</el-tag></template>
</template>
</el-table-column>
<el-table-column prop="flowStatus" label="状态" width="80" sortable align="center">
<template #default="scope">
<dict-tag :options="wf_task_status" :value="scope.row.flowStatus"></dict-tag>
</template>
</el-table-column>
<el-table-column prop="message" label="审批意见" :show-overflow-tooltip="true" sortable align="center"></el-table-column>
<el-table-column prop="createTime" label="开始时间" width="160" :show-overflow-tooltip="true" sortable align="center"></el-table-column>
<el-table-column prop="updateTime" label="结束时间" width="160" :show-overflow-tooltip="true" sortable align="center"></el-table-column>
<el-table-column
prop="runDuration"
label="运行时长"
width="140"
:show-overflow-tooltip="true"
sortable
align="center"
></el-table-column>
<el-table-column prop="attachmentList" width="120" label="附件" align="center">
<template #default="scope">
<el-popover v-if="scope.row.attachmentList && scope.row.attachmentList.length > 0" placement="right" :width="310" trigger="click">
<template #reference>
<el-button type="primary" style="margin-right: 16px">附件</el-button>
</template>
<el-table border :data="scope.row.attachmentList">
<el-table-column prop="originalName" width="202" :show-overflow-tooltip="true" label="附件名称"></el-table-column>
<el-table-column prop="name" width="80" align="center" :show-overflow-tooltip="true" label="操作">
<template #default="tool">
<el-button type="text" @click="handleDownload(tool.row.ossId)">下载</el-button>
</template>
</el-table-column>
</el-table>
</el-popover>
</template>
</el-table-column>
</el-table>
</div>
</div>
</el-dialog>
</div>
</template>
@ -72,14 +76,12 @@ const props = defineProps({
const loading = ref(false);
const visible = ref(false);
const historyList = ref<Array<any>>([]);
const tabActiveName = ref('image');
const insId = ref(null);
//初始化查询审批记录
const init = async (businessId: string | number) => {
visible.value = true;
loading.value = true;
tabActiveName.value = 'image';
historyList.value = [];
flowHisTaskList(businessId).then((resp) => {
if (resp.data) {
@ -122,6 +124,93 @@ defineExpose({
:deep(.el-dialog .el-dialog__body) {
max-height: calc(100vh - 170px) !important;
min-height: calc(100vh - 170px) !important;
overflow-y: auto;
}
}
.content-wrapper {
display: flex;
flex-direction: column;
gap: 20px;
}
.flow-chart-section {
min-height: 300px;
.section-title {
display: flex;
align-items: center;
font-size: 16px;
font-weight: 600;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 2px solid #e4e7ed;
color: #303133;
position: relative;
.title-icon {
font-size: 18px;
margin-right: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.title-text {
position: relative;
padding-left: 12px;
&::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 18px;
background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
border-radius: 2px;
}
}
}
}
.approval-info-section {
.section-title {
display: flex;
align-items: center;
font-size: 16px;
font-weight: 600;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 2px solid #e4e7ed;
color: #303133;
position: relative;
.title-icon {
font-size: 18px;
margin-right: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.title-text {
position: relative;
padding-left: 12px;
&::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 18px;
background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
border-radius: 2px;
}
}
}
}
</style>

Write Preview
Loading…
Cancel
Save