Browse Source
- 抽出可复用组件 src/views/points/appeal/components/AppealLedgerPanel.vue（列表/详情/审批） - 独立页 src/views/points/appeal/index.vue 改为包裹该组件 - 积分管理启用第 2 个 Tab「申诉处理」，复用同一组件 - 同步更新 PAGES_TODO / CURRENT_STATUS / DEVELOPMENT_LOGmaster
6 changed files with 396 additions and 375 deletions
@ -0,0 +1,379 @@
@@ -0,0 +1,379 @@
|
||||
<template> |
||||
<div class="appeal-ledger-panel"> |
||||
<data-list-panel modern-table> |
||||
<template #filters> |
||||
<el-form v-show="showSearch" ref="queryForm" :model="queryParams" size="small" :inline="true" class="data-list-filter-form"> |
||||
<el-form-item label="状态" prop="status"> |
||||
<el-select v-model="queryParams.status" clearable placeholder="全部状态"> |
||||
<el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" /> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="申诉类型" prop="appealType"> |
||||
<el-select v-model="queryParams.appealType" clearable placeholder="全部类型"> |
||||
<el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" /> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> |
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
</template> |
||||
|
||||
<template #actions> |
||||
<el-button icon="el-icon-refresh" size="mini" @click="getList">刷新</el-button> |
||||
</template> |
||||
|
||||
<el-table v-loading="loading" :data="list" size="mini" class="data-list-table"> |
||||
<el-table-column label="申诉编号" prop="appealNo" min-width="150" show-overflow-tooltip /> |
||||
<el-table-column label="申诉人" prop="userName" width="100" show-overflow-tooltip /> |
||||
<el-table-column label="关联隐患" prop="reportNo" width="130" show-overflow-tooltip /> |
||||
<el-table-column label="申诉类型" width="130"> |
||||
<template slot-scope="scope">{{ typeLabel(scope.row) }}</template> |
||||
</el-table-column> |
||||
<el-table-column label="申诉理由" prop="appealReason" min-width="220" show-overflow-tooltip /> |
||||
<el-table-column label="状态" width="110" align="center"> |
||||
<template slot-scope="scope"> |
||||
<el-tag :type="statusTagType(scope.row)" size="small">{{ statusLabel(scope.row) }}</el-tag> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="提交时间" width="160"> |
||||
<template slot-scope="scope">{{ formatTime(scope.row.createTime) }}</template> |
||||
</el-table-column> |
||||
<el-table-column label="操作" width="140" align="center" fixed="right" class-name="data-list-operation-column"> |
||||
<template slot-scope="scope"> |
||||
<el-button type="text" size="mini" @click="openDetail(scope.row)">详情</el-button> |
||||
<el-button v-if="canApprove(scope.row)" type="text" size="mini" @click="openApprove(scope.row)">去审批</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
|
||||
<template #footer> |
||||
<el-pagination |
||||
background |
||||
layout="total, sizes, prev, pager, next, jumper" |
||||
:total="total" |
||||
:current-page.sync="queryParams.pageNum" |
||||
:page-size.sync="queryParams.pageSize" |
||||
:page-sizes="[10, 20, 50]" |
||||
@size-change="getList" |
||||
@current-change="getList" |
||||
/> |
||||
</template> |
||||
</data-list-panel> |
||||
|
||||
<!-- 详情 --> |
||||
<el-dialog title="申诉详情" :visible.sync="detailVisible" width="640px" append-to-body> |
||||
<div v-loading="detailLoading" class="appeal-detail"> |
||||
<el-descriptions v-if="detail" :column="2" border size="small"> |
||||
<el-descriptions-item label="申诉编号">{{ detail.appealNo || '—' }}</el-descriptions-item> |
||||
<el-descriptions-item label="申诉类型">{{ typeLabel(detail) }}</el-descriptions-item> |
||||
<el-descriptions-item label="申诉人">{{ detail.userName || '—' }}</el-descriptions-item> |
||||
<el-descriptions-item label="所属厂区">{{ detail.factoryDeptName || '—' }}</el-descriptions-item> |
||||
<el-descriptions-item label="关联隐患">{{ detail.reportNo || '—' }}</el-descriptions-item> |
||||
<el-descriptions-item label="当前状态">{{ statusLabel(detail) }}</el-descriptions-item> |
||||
<el-descriptions-item label="提交时间">{{ formatTime(detail.createTime) }}</el-descriptions-item> |
||||
<el-descriptions-item label="处理时间">{{ formatTime(detail.handleTime) }}</el-descriptions-item> |
||||
<el-descriptions-item label="处理人">{{ detail.handleUserName || '—' }}</el-descriptions-item> |
||||
<el-descriptions-item label="调整积分">{{ formatAdjust(detail.adjustPoints) }}</el-descriptions-item> |
||||
<el-descriptions-item label="申诉理由" :span="2">{{ detail.appealReason || '—' }}</el-descriptions-item> |
||||
<el-descriptions-item label="处理意见" :span="2">{{ detail.handleRemark || '—' }}</el-descriptions-item> |
||||
</el-descriptions> |
||||
<div v-if="attachmentList.length" class="appeal-attachments"> |
||||
<div class="appeal-attachments__title">附件</div> |
||||
<a v-for="(url, index) in attachmentList" :key="index" class="appeal-attachments__item" :href="url" target="_blank" rel="noopener">{{ url }}</a> |
||||
</div> |
||||
<el-empty v-if="!detailLoading && !detail" description="暂无详情" /> |
||||
</div> |
||||
</el-dialog> |
||||
|
||||
<!-- 审批 --> |
||||
<el-dialog title="审批申诉" :visible.sync="approveVisible" width="560px" append-to-body> |
||||
<div class="approve-summary"> |
||||
<div><span class="label">申诉编号：</span>{{ approveForm.appealNo || '—' }}</div> |
||||
<div><span class="label">申诉人：</span>{{ approveForm.userName || '—' }}</div> |
||||
<div><span class="label">关联隐患：</span>{{ approveForm.reportNo || '—' }}</div> |
||||
<div><span class="label">申诉理由：</span>{{ approveForm.appealReason || '—' }}</div> |
||||
</div> |
||||
<el-alert v-if="approveTaskMissing" title="未获取到审批任务 ID，暂无法提交审批。" type="warning" :closable="false" show-icon style="margin-bottom:12px" /> |
||||
<el-form ref="approveForm" :model="approveForm" :rules="approveRules" label-width="90px" size="small"> |
||||
<el-form-item label="审批结果" prop="result"> |
||||
<el-radio-group v-model="approveForm.result"> |
||||
<el-radio label="1">通过</el-radio> |
||||
<el-radio label="2">驳回</el-radio> |
||||
</el-radio-group> |
||||
</el-form-item> |
||||
<el-form-item v-if="approveForm.result === '1'" label="调整积分"> |
||||
<el-input-number v-model="approveForm.adjustPoints" :controls="false" placeholder="正数补发/负数扣减，可选" /> |
||||
<span class="field-tip">正数补发、负数扣减；不填则按原积分处理</span> |
||||
</el-form-item> |
||||
<el-form-item label="审批意见" prop="comment"> |
||||
<el-input v-model="approveForm.comment" type="textarea" :rows="3" maxlength="500" show-word-limit placeholder="请填写审批意见" /> |
||||
</el-form-item> |
||||
</el-form> |
||||
<div slot="footer" class="dialog-footer"> |
||||
<el-button @click="approveVisible = false">取消</el-button> |
||||
<el-button type="primary" :loading="approveSubmitting" @click="submitApprove">提交审批</el-button> |
||||
</div> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { listAppealTodo, getAppealDetail, getAppealProcessDetail, completeAppealFlow } from '@/api/points/appeal' |
||||
|
||||
export default { |
||||
name: 'AppealLedgerPanel', |
||||
data() { |
||||
return { |
||||
loading: false, |
||||
showSearch: true, |
||||
list: [], |
||||
total: 0, |
||||
queryParams: { pageNum: 1, pageSize: 10, status: undefined, appealType: undefined }, |
||||
statusOptions: [ |
||||
{ label: '待受理', value: '0' }, |
||||
{ label: '处理中', value: '1' }, |
||||
{ label: '已通过', value: '2' }, |
||||
{ label: '已驳回', value: '3' }, |
||||
{ label: '已撤回', value: '4' } |
||||
], |
||||
typeOptions: [ |
||||
{ label: '审核驳回申诉', value: 'REJECT' }, |
||||
{ label: '积分异议', value: 'POINTS' }, |
||||
{ label: '其他', value: 'OTHER' } |
||||
], |
||||
detailVisible: false, |
||||
detailLoading: false, |
||||
detail: null, |
||||
approveVisible: false, |
||||
approveSubmitting: false, |
||||
approveTaskMissing: false, |
||||
approveRow: null, |
||||
approveForm: { appealNo: '', userName: '', reportNo: '', appealReason: '', result: '1', adjustPoints: undefined, comment: '' }, |
||||
approveRules: { |
||||
result: [{ required: true, message: '请选择审批结果', trigger: 'change' }], |
||||
comment: [{ required: true, message: '请填写审批意见', trigger: 'blur' }] |
||||
} |
||||
} |
||||
}, |
||||
computed: { |
||||
attachmentList() { |
||||
const raw = this.detail && this.detail.attachmentUrls |
||||
if (!raw) return [] |
||||
try { |
||||
const parsed = JSON.parse(raw) |
||||
return Array.isArray(parsed) ? parsed.map(item => (typeof item === 'string' ? item : item.url)).filter(Boolean) : [] |
||||
} catch (error) { |
||||
return String(raw).split(',').map(item => item.trim()).filter(Boolean) |
||||
} |
||||
} |
||||
}, |
||||
created() { |
||||
this.getList() |
||||
}, |
||||
methods: { |
||||
getList() { |
||||
this.loading = true |
||||
listAppealTodo(this.queryParams) |
||||
.then(response => { |
||||
const page = response.data || response |
||||
this.list = page.list || page.rows || page.records || [] |
||||
this.total = Number(page.total || page.totalCount || this.list.length) |
||||
}) |
||||
.catch(() => { |
||||
this.list = [] |
||||
this.total = 0 |
||||
this.$modal.msgError('申诉台账加载失败，请检查后端服务和登录状态') |
||||
}) |
||||
.finally(() => { |
||||
this.loading = false |
||||
}) |
||||
}, |
||||
handleQuery() { |
||||
this.queryParams.pageNum = 1 |
||||
this.getList() |
||||
}, |
||||
resetQuery() { |
||||
this.$refs.queryForm.resetFields() |
||||
this.queryParams.pageNum = 1 |
||||
this.getList() |
||||
}, |
||||
openDetail(row) { |
||||
this.detailVisible = true |
||||
this.detail = null |
||||
this.detailLoading = true |
||||
getAppealDetail(row.id) |
||||
.then(response => { |
||||
this.detail = response.data || response |
||||
}) |
||||
.catch(() => { |
||||
this.$modal.msgError('申诉详情加载失败') |
||||
}) |
||||
.finally(() => { |
||||
this.detailLoading = false |
||||
}) |
||||
}, |
||||
openApprove(row) { |
||||
this.approveRow = row |
||||
this.approveTaskMissing = false |
||||
this.approveForm = { |
||||
appealNo: row.appealNo, |
||||
userName: row.userName, |
||||
reportNo: row.reportNo, |
||||
appealReason: row.appealReason, |
||||
result: '1', |
||||
adjustPoints: undefined, |
||||
comment: '' |
||||
} |
||||
this.approveVisible = true |
||||
this.resolveTaskId(row) |
||||
}, |
||||
// 通过流程实例补全当前待办 taskId（与隐患审核一致） |
||||
async resolveTaskId(row) { |
||||
if (row.canApprove !== true && String(row.canApprove) !== 'true') return |
||||
if (!row.flowInstanceId) { |
||||
this.approveTaskMissing = true |
||||
return |
||||
} |
||||
try { |
||||
const response = await getAppealProcessDetail(row.flowInstanceId) |
||||
const task = this.findCurrentTask(response.data) |
||||
this.approveRow = Object.assign({}, row, { taskId: task ? String(task.taskId || '') : '' }) |
||||
this.approveTaskMissing = !this.approveRow.taskId |
||||
} catch (error) { |
||||
this.approveTaskMissing = true |
||||
} |
||||
}, |
||||
findCurrentTask(data) { |
||||
const tasks = this.normalizeTaskList(data) |
||||
if (!tasks.length) return null |
||||
return tasks.find(task => task.taskId && !task.endTime && !task.finishTime) || tasks.find(task => task.taskId) || null |
||||
}, |
||||
normalizeTaskList(data) { |
||||
const tasks = [] |
||||
const visit = value => { |
||||
if (Array.isArray(value)) { |
||||
value.forEach(visit) |
||||
return |
||||
} |
||||
if (!value || typeof value !== 'object') return |
||||
if (Object.prototype.hasOwnProperty.call(value, 'taskId')) tasks.push(value) |
||||
Object.keys(value).forEach(key => { |
||||
if (key !== 'taskId') visit(value[key]) |
||||
}) |
||||
} |
||||
visit(data) |
||||
return tasks |
||||
}, |
||||
submitApprove() { |
||||
this.$refs.approveForm.validate(valid => { |
||||
if (!valid) return |
||||
const row = this.approveRow || {} |
||||
if (!row.taskId) { |
||||
this.$modal.msgWarning('未获取到审批任务 ID，无法提交审批') |
||||
return |
||||
} |
||||
const payload = { |
||||
taskId: row.taskId, |
||||
instanceId: row.flowInstanceId, |
||||
type: 'appeal', |
||||
result: this.approveForm.result, |
||||
comment: this.approveForm.comment |
||||
} |
||||
// 改判补分：adjustPoints 随流程变量下发（联调确认后端读取方式） |
||||
if (this.approveForm.result === '1' && this.approveForm.adjustPoints !== undefined && this.approveForm.adjustPoints !== null) { |
||||
payload.variables = { adjustPoints: this.approveForm.adjustPoints } |
||||
} |
||||
this.approveSubmitting = true |
||||
completeAppealFlow(payload) |
||||
.then(() => { |
||||
this.$modal.msgSuccess(this.approveForm.result === '1' ? '申诉已通过' : '申诉已驳回') |
||||
this.approveVisible = false |
||||
this.getList() |
||||
}) |
||||
.catch(() => { |
||||
this.$modal.msgError('审批提交失败，请稍后重试') |
||||
}) |
||||
.finally(() => { |
||||
this.approveSubmitting = false |
||||
}) |
||||
}) |
||||
}, |
||||
canApprove(row) { |
||||
const can = row.canApprove === true || String(row.canApprove) === 'true' |
||||
const status = this.statusKey(row) |
||||
return can && (status === '0' || status === '1') |
||||
}, |
||||
statusKey(row) { |
||||
return String(row.status === undefined || row.status === null ? '' : row.status) |
||||
}, |
||||
statusLabel(row) { |
||||
const name = row.statusName |
||||
if (name) return name |
||||
return ({ '0': '待受理', '1': '处理中', '2': '已通过', '3': '已驳回', '4': '已撤回' }[this.statusKey(row)]) || '—' |
||||
}, |
||||
statusTagType(row) { |
||||
const key = this.statusKey(row) |
||||
if (key === '2') return 'success' |
||||
if (key === '3') return 'danger' |
||||
if (key === '1') return 'primary' |
||||
if (key === '4') return 'info' |
||||
return 'warning' |
||||
}, |
||||
typeLabel(row) { |
||||
return ({ REJECT: '审核驳回申诉', POINTS: '积分异议', OTHER: '其他' }[row.appealType]) || row.appealType || '—' |
||||
}, |
||||
formatAdjust(value) { |
||||
if (value === undefined || value === null || value === '') return '—' |
||||
const n = Number(value) |
||||
return Number.isNaN(n) ? String(value) : `${n > 0 ? '+' : ''}${n}` |
||||
}, |
||||
formatTime(value) { |
||||
if (!value) return '—' |
||||
return String(value).replace('T', ' ').slice(0, 19) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.approve-summary { |
||||
margin-bottom: 14px; |
||||
padding: 12px 14px; |
||||
border-radius: 8px; |
||||
background: var(--prototype-panel-soft, #fafbfc); |
||||
color: var(--prototype-text-secondary, #5a5a72); |
||||
font-size: 13px; |
||||
line-height: 22px; |
||||
} |
||||
|
||||
.approve-summary .label { |
||||
color: var(--prototype-text-muted, #9898ae); |
||||
} |
||||
|
||||
.field-tip { |
||||
margin-left: 10px; |
||||
color: var(--prototype-text-muted, #9898ae); |
||||
font-size: 12px; |
||||
} |
||||
|
||||
.appeal-attachments { |
||||
margin-top: 14px; |
||||
} |
||||
|
||||
.appeal-attachments__title { |
||||
margin-bottom: 6px; |
||||
color: var(--prototype-text-secondary, #5a5a72); |
||||
font-size: 13px; |
||||
font-weight: 600; |
||||
} |
||||
|
||||
.appeal-attachments__item { |
||||
display: block; |
||||
margin-bottom: 4px; |
||||
color: #1890ff; |
||||
font-size: 12px; |
||||
word-break: break-all; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue