<!-- 差旅/费用报销：审批列表内详情/审批弹窗内容（与报销页弹窗一致） -->
|
<template>
|
<div v-loading="loading">
|
<TravelDetailPanel v-if="isTravel" :row="reimburseRow" />
|
<CostDetailPanel v-else :row="reimburseRow" />
|
|
<el-divider content-position="left">流程进度</el-divider>
|
<ApprovalFlowProgress
|
:nodes="reimburseRow.approvalFlowNodes"
|
:current-index="reimburseRow.currentNodeIndex ?? 0"
|
/>
|
|
<template v-if="mode === 'detail'">
|
<el-divider content-position="left">审批记录（全流程留痕）</el-divider>
|
<el-timeline v-if="reimburseRow.approvalRecords?.length">
|
<el-timeline-item
|
v-for="(rec, i) in reimburseRow.approvalRecords"
|
:key="i"
|
:type="rec.result === 'approved' ? 'success' : rec.result === 'rejected' ? 'danger' : 'primary'"
|
:timestamp="rec.time"
|
>
|
{{ rec.operatorName }} — {{ actionLabel(rec.result) }}：{{ rec.opinion || "无意见" }}
|
</el-timeline-item>
|
</el-timeline>
|
<el-empty v-else description="暂无审批记录" :image-size="60" />
|
</template>
|
|
<el-form v-else label-width="100px" class="mt16">
|
<el-form-item label="审批意见">
|
<el-input
|
:model-value="approveOpinion"
|
type="textarea"
|
:rows="3"
|
maxlength="500"
|
show-word-limit
|
:placeholder="isTravel ? '通过可留空；驳回请填写原因' : '通过可留空；驳回请填写具体原因（如：发票模糊需重传）'"
|
@update:model-value="$emit('update:approveOpinion', $event)"
|
/>
|
</el-form-item>
|
</el-form>
|
</div>
|
</template>
|
|
<script setup>
|
import { computed } from "vue";
|
import { isTravelReimbursementType } from "../finReimbursementMappers.js";
|
import ApprovalFlowProgress from "../../travel-reimburse/components/ApprovalFlowProgress.vue";
|
import CostDetailPanel from "../../cost-reimburse/components/DetailPanel.vue";
|
import TravelDetailPanel from "../../travel-reimburse/components/DetailPanel.vue";
|
|
const props = defineProps({
|
mode: { type: String, default: "detail" },
|
moduleKey: { type: String, default: "" },
|
reimburseRow: { type: Object, default: () => ({}) },
|
loading: { type: Boolean, default: false },
|
approveOpinion: { type: String, default: "" },
|
});
|
|
defineEmits(["update:approveOpinion"]);
|
|
const isTravel = computed(() =>
|
isTravelReimbursementType(props.reimburseRow?.reimbursementType ?? props.moduleKey)
|
);
|
|
function actionLabel(v) {
|
if (v === "approved") return "通过";
|
if (v === "rejected") return "驳回";
|
return "提交";
|
}
|
</script>
|
