kboss/f/web-kboss/src/views/FinancialSettlementCenter/SettlementStatusBadge.vue
2026-07-28 16:13:32 +08:00

40 lines
1008 B
Vue

<template>
<span class="settlement-status" :class="`settlement-status--${status}`">
<i :class="statusIcon" />
{{ statusLabel }}
</span>
</template>
<script>
const STATUS_MAP = {
draft: { label: '草稿', icon: 'el-icon-document' },
approving: { label: '审批中', icon: 'el-icon-time' },
approved: { label: '已审批', icon: 'el-icon-circle-check' },
rejected: { label: '已拒绝', icon: 'el-icon-circle-close' },
settled: { label: '已结算', icon: 'el-icon-success' },
failed: { label: '结算失败', icon: 'el-icon-warning-outline' },
cancelled: { label: '已撤销', icon: 'el-icon-remove-outline' }
}
export default {
name: 'SettlementStatusBadge',
props: {
status: {
type: String,
default: 'draft'
}
},
computed: {
statusConfig() {
return STATUS_MAP[this.status] || STATUS_MAP.draft
},
statusLabel() {
return this.statusConfig.label
},
statusIcon() {
return this.statusConfig.icon
}
}
}
</script>