feat(oa): 完成审批历史页面全链路开发，含前后端接口、菜单配置
This commit is contained in:
205
ruoyi-ui/src/views/hrm/flow/taskHistory.vue
Normal file
205
ruoyi-ui/src/views/hrm/flow/taskHistory.vue
Normal file
@@ -0,0 +1,205 @@
|
||||
<template>
|
||||
<div class="hrm-page">
|
||||
<div class="flow-task-layout">
|
||||
<!-- 左：任务列表 -->
|
||||
<el-card class="metal-panel left" shadow="hover">
|
||||
<div slot="header" class="panel-header">
|
||||
<div class="header-title">
|
||||
<span>审批历史</span>
|
||||
<span class="sub">面向办理人：只看已完成，不可操作</span>
|
||||
</div>
|
||||
<div class="actions-inline">
|
||||
<el-button size="mini" icon="el-icon-refresh" @click="fetchList">刷新</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-table :data="list" v-loading="loading" height="680" stripe highlight-current-row @row-click="openDetail">
|
||||
<el-table-column label="状态" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="statusType(scope.row.status)" size="mini">{{ statusText(scope.row.status) }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="业务" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-tag size="mini" type="info">{{ bizTypeText(scope.row.bizType) }}</el-tag>
|
||||
<span class="muted" v-if="scope.row.bizId"> #{{ scope.row.bizId }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="备注" prop="remark" show-overflow-tooltip />
|
||||
<el-table-column label="操作" width="100" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button link type="primary" @click="openDetail(scope.row)">查看详情</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
|
||||
<!-- 右：详情区 -->
|
||||
<el-card class="metal-panel right" shadow="hover">
|
||||
<div slot="header" class="panel-header">
|
||||
<span>任务详情</span>
|
||||
<div class="actions-inline">
|
||||
<el-button size="mini" icon="el-icon-document-copy" :disabled="!detailTask"
|
||||
@click="copyTaskInfo">复制关键信息</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="!detailTask" class="placeholder">
|
||||
<div class="p-title">请在左侧选择一条任务</div>
|
||||
<div class="p-sub">将展示业务信息、表单字段、流转历史</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="detail-wrap">
|
||||
<div class="detail-summary">
|
||||
<div class="ds-left">
|
||||
<div class="ds-title">{{ bizTypeText(detailTask.bizType) }} · 任务 #{{ detailTask.taskId }}</div>
|
||||
<div class="ds-sub">
|
||||
<el-tag size="mini" :type="statusType(detailTask.status)">{{ statusText(detailTask.status) }}</el-tag>
|
||||
<span class="muted">实例 {{ detailTask.instId }} · 节点 {{ detailTask.nodeId }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ds-right">
|
||||
<div class="ds-item">
|
||||
<div class="k">办理人</div>
|
||||
<div class="v">{{ formatUser(detailTask.assigneeUserId, 'userId') }}</div>
|
||||
</div>
|
||||
<div class="ds-item">
|
||||
<div class="k">到期</div>
|
||||
<div class="v">{{ formatDate(detailTask.expireTime) || '-' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-tabs value="form">
|
||||
<el-tab-pane label="表单数据" name="form">
|
||||
<LeaveDetail v-if="detailTask && detailTask.bizType === 'leave'" :biz-id="detailTask.bizId" :embedded="true" />
|
||||
<TravelDetail v-else-if="detailTask && detailTask.bizType === 'travel'" :biz-id="detailTask.bizId" :embedded="true" />
|
||||
<SealDetail v-else-if="detailTask && detailTask.bizType === 'seal'" :biz-id="detailTask.bizId" :embedded="true" />
|
||||
<ReimburseDetail v-else-if="detailTask && detailTask.bizType === 'reimburse'" :biz-id="detailTask.bizId" :embedded="true" />
|
||||
|
||||
<div v-else>
|
||||
<el-table :data="formData" v-loading="formLoading" size="mini" height="260">
|
||||
<el-table-column label="字段" prop="fieldName" min-width="140" />
|
||||
<el-table-column label="展示" prop="fieldLabel" min-width="160" show-overflow-tooltip />
|
||||
<el-table-column label="值" prop="fieldValue" min-width="220" show-overflow-tooltip />
|
||||
</el-table>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="流转历史" name="history">
|
||||
<el-timeline v-loading="actionLoading" v-if="actionList.length">
|
||||
<el-timeline-item v-for="(a, idx) in actionList" :key="idx" :timestamp="formatDate(a.createTime)" :type="actionTagType(a.action)">
|
||||
<div class="timeline-row">
|
||||
<div class="t-main">
|
||||
<span class="t-action">{{ actionText(a.action) }}</span>
|
||||
<span class="t-user">· 办理人：{{ formatUser(a.createBy, 'createBy') }}</span>
|
||||
</div>
|
||||
<div class="t-remark" v-if="a.remark">{{ a.remark }}</div>
|
||||
</div>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
<div v-else class="empty">暂无流转记录</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { getTodoTaskByBiz, listFlowAction, listFlowFormData, listHistoryFlowTask } from '@/views/hrm/js/History'
|
||||
|
||||
import { listByIds } from '@/api/system/oss'
|
||||
import { listUser } from '@/api/system/user'
|
||||
|
||||
import LeaveDetail from '@/views/hrm/requests/leaveDetail.vue'
|
||||
import ReimburseDetail from '@/views/hrm/requests/reimburseDetail.vue'
|
||||
import SealDetail from '@/views/hrm/requests/sealDetail.vue'
|
||||
import TravelDetail from '@/views/hrm/requests/travelDetail.vue'
|
||||
|
||||
export default {
|
||||
name: 'HrmFlowHistory',
|
||||
dicts: ['hrm_stamp_image'],
|
||||
components: { LeaveDetail, TravelDetail, SealDetail, ReimburseDetail },
|
||||
data() {
|
||||
return {
|
||||
query: { status: undefined, pageNum: 1, pageSize: 50 },
|
||||
list: [],
|
||||
loading: false,
|
||||
detailTask: null,
|
||||
actionList: [],
|
||||
actionLoading: false,
|
||||
formData: [],
|
||||
formLoading: false,
|
||||
allUsers: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadAllUsers()
|
||||
this.fetchList()
|
||||
},
|
||||
methods: {
|
||||
bizTypeText(val) { const map = { leave: '请假', travel: '出差', seal: '用印', payroll: '薪酬', reimburse: '报销' }; return map[val] || val || '-' },
|
||||
statusText(status) { const map = { pending: '待办', done: '已通过', approved: '已通过', rejected: '已驳回', withdrawn: '已撤回' }; return map[status] || status || '-' },
|
||||
statusType(status) { const map = { pending: 'warning', done: 'success', approved: 'success', rejected: 'danger', withdrawn: 'info' }; return map[status] || 'info' },
|
||||
formatDate(val) { if (!val) return ''; const d = new Date(val); const p = n => (n < 10 ? `0${n}` : n); return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}` },
|
||||
actionText(action) { const map = { submit: '提交', approve: '通过', reject: '驳回', withdraw: '撤回', cancel: '撤销', stamp: '盖章', transfer: '转发' }; return map[action] || action || '-' },
|
||||
actionTagType(action) { const map = { submit: 'primary', approve: 'success', reject: 'danger', withdraw: 'info', cancel: 'info', stamp: 'primary', transfer: 'warning' }; return map[action] || 'info' },
|
||||
async loadAllUsers() { try { const res = await listUser({ pageNum: 1, pageSize: 1000 }); this.allUsers = res.rows || [] } catch (e) { this.allUsers = [] } },
|
||||
formatUser(userId, fieldName) { if (!userId) return '-'; const user = this.allUsers.find(u => u[fieldName] === userId); return user ? `${user.nickName || user.userName}` : `ID:${userId}` },
|
||||
|
||||
fetchList() {
|
||||
this.loading = true
|
||||
listHistoryFlowTask().then(res => {
|
||||
this.list = res.data || res.rows || []
|
||||
if (!this.detailTask && this.list.length) this.openDetail(this.list[0])
|
||||
}).finally(() => { this.loading = false })
|
||||
},
|
||||
|
||||
async openDetail(row) {
|
||||
if (!row) return
|
||||
this.detailTask = row
|
||||
this.loadActions(row)
|
||||
this.loadFormData(row)
|
||||
},
|
||||
|
||||
loadActions(row) { if (!row || !row.instId) return; this.actionLoading = true; listFlowAction({ instId: row.instId }).then(res => { this.actionList = res.rows || [] }).finally(() => { this.actionLoading = false }) },
|
||||
loadFormData(row) { if (!row || !row.instId) return; this.formLoading = true; listFlowFormData({ instId: row.instId }).then(res => { this.formData = res.rows || [] }).finally(() => { this.formLoading = false }) },
|
||||
copyTaskInfo() { if (!this.detailTask) return; const t = this.detailTask; const text = `任务ID:${t.taskId}\n实例:${t.instId}\n业务:${t.bizType}${t.bizId ? `#${t.bizId}` : ''}\n节点:${t.nodeId}\n状态:${t.status}`; navigator.clipboard.writeText(text).then(() => this.$message.success('已复制')) }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.hrm-page {
|
||||
padding: 16px 20px 32px;
|
||||
background: #f8f9fb;
|
||||
}
|
||||
.flow-task-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 520px 1fr;
|
||||
gap: 14px;
|
||||
align-items: start;
|
||||
}
|
||||
.metal-panel { border: 1px solid #d7d9df; border-radius: 12px; background: #fff; }
|
||||
.panel-header { display: flex; justify-content: space-between; align-items: center; font-weight: 800; color: #2b2f36; }
|
||||
.header-title { display: flex; flex-direction: column; }
|
||||
.header-title .sub { font-size: 12px; color: #8a8f99; margin-top: 2px; font-weight: 500; }
|
||||
.actions-inline { display: flex; gap: 8px; align-items: center; }
|
||||
.muted { color: #8a8f99; font-size: 12px; }
|
||||
.placeholder { padding: 18px 14px; border: 1px dashed #e6e8ed; border-radius: 12px; background: #fafbfc; }
|
||||
.p-title { font-weight: 900; color: #2b2f36; }
|
||||
.p-sub { margin-top: 6px; color: #8a8f99; font-size: 13px; }
|
||||
.detail-wrap { padding-right: 4px; }
|
||||
.detail-summary { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 12px; border: 1px solid #e6e8ed; border-radius: 12px; background: #fff; }
|
||||
.ds-title { font-weight: 900; color: #2b2f36; }
|
||||
.ds-sub { margin-top: 6px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
|
||||
.ds-right { display: flex; gap: 16px; }
|
||||
.ds-item .k { font-size: 12px; color: #8a8f99; }
|
||||
.ds-item .v { margin-top: 2px; font-weight: 800; color: #2b2f36; }
|
||||
.empty { padding: 12px; color: #8a8f99; }
|
||||
.timeline-row .t-main { font-weight: 600; color: #2b2f36; }
|
||||
.timeline-row .t-remark { margin-top: 4px; color: #606266; font-size: 13px; }
|
||||
</style>
|
||||
Reference in New Issue
Block a user