164 lines
4 KiB
Vue
164 lines
4 KiB
Vue
<template>
|
|
<div class="approval-status">
|
|
<!-- نمایش وضعیت تأیید -->
|
|
<v-chip
|
|
:color="statusColor"
|
|
size="small"
|
|
class="me-2"
|
|
>
|
|
<v-icon size="small" class="me-1">
|
|
{{ statusIcon }}
|
|
</v-icon>
|
|
{{ statusText }}
|
|
</v-chip>
|
|
|
|
<!-- دکمه تأیید (فقط اگر کاربر مجوز داشته باشد) -->
|
|
<v-btn
|
|
v-if="showApprovalButton"
|
|
:color="approvalButtonColor"
|
|
size="small"
|
|
variant="outlined"
|
|
@click="handleApproval"
|
|
:loading="approving"
|
|
:disabled="approving"
|
|
>
|
|
<v-icon size="small" class="me-1">
|
|
{{ approvalButtonIcon }}
|
|
</v-icon>
|
|
{{ approvalButtonText }}
|
|
</v-btn>
|
|
|
|
<!-- اطلاعات تأییدکننده -->
|
|
<div v-if="document.approvedBy" class="text-caption text-medium-emphasis mt-1">
|
|
تایید شده توسط: {{ document.approvedBy.name || document.approvedBy }}
|
|
<span v-if="document.approvedAt">
|
|
در تاریخ: {{ formatDate(document.approvedAt) }}
|
|
</span>
|
|
</div>
|
|
|
|
<!-- اطلاعات ردکننده -->
|
|
<div v-if="document.rejectedBy" class="text-caption text-error mt-1">
|
|
رد شده توسط: {{ document.rejectedBy.name || document.rejectedBy }}
|
|
<span v-if="document.rejectedAt">
|
|
در تاریخ: {{ formatDate(document.rejectedAt) }}
|
|
</span>
|
|
<span v-if="document.rejectionReason" class="ms-2">
|
|
دلیل: {{ document.rejectionReason }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, ref } from 'vue'
|
|
import {
|
|
getApprovalStatusText,
|
|
getApprovalStatusColor,
|
|
shouldShowApprovalButton,
|
|
getApprovalButtonText,
|
|
getDocumentType
|
|
} from '@/utils/approvalUtils'
|
|
|
|
const props = defineProps({
|
|
document: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
businessSettings: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
currentUserEmail: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
isBusinessOwner: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits(['approve', 'reject'])
|
|
|
|
const approving = ref(false)
|
|
|
|
// محاسبه وضعیت تأیید
|
|
const statusText = computed(() => getApprovalStatusText(props.document))
|
|
const statusColor = computed(() => getApprovalStatusColor(props.document))
|
|
const statusIcon = computed(() => {
|
|
if (props.document.approved === true) return 'mdi-check-circle'
|
|
if (props.document.approved === false) return 'mdi-close-circle'
|
|
return 'mdi-clock-outline'
|
|
})
|
|
|
|
// محاسبه دکمه تأیید
|
|
const showApprovalButton = computed(() => {
|
|
return shouldShowApprovalButton(
|
|
props.businessSettings,
|
|
props.document,
|
|
props.currentUserEmail,
|
|
props.isBusinessOwner
|
|
)
|
|
})
|
|
|
|
const approvalButtonText = computed(() => getApprovalButtonText(props.document))
|
|
const approvalButtonColor = computed(() => {
|
|
if (props.document.approved === false) return 'warning'
|
|
return 'success'
|
|
})
|
|
const approvalButtonIcon = computed(() => {
|
|
if (props.document.approved === false) return 'mdi-refresh'
|
|
return 'mdi-check'
|
|
})
|
|
|
|
// مدیریت تأیید
|
|
const handleApproval = async () => {
|
|
try {
|
|
approving.value = true
|
|
|
|
// اگر سند رد شده، برای تأیید مجدد ارسال کن
|
|
if (props.document.approved === false) {
|
|
await emit('approve', props.document)
|
|
} else {
|
|
// تأیید عادی
|
|
await emit('approve', props.document)
|
|
}
|
|
} catch (error) {
|
|
console.error('خطا در تأیید سند:', error)
|
|
} finally {
|
|
approving.value = false
|
|
}
|
|
}
|
|
|
|
// فرمت تاریخ
|
|
const formatDate = (date) => {
|
|
if (!date) return ''
|
|
|
|
try {
|
|
const dateObj = new Date(date)
|
|
if (isNaN(dateObj.getTime())) return date
|
|
|
|
return dateObj.toLocaleDateString('fa-IR')
|
|
} catch (error) {
|
|
return date
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.approval-status {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.approval-status .v-chip {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.approval-status .v-btn {
|
|
text-transform: none;
|
|
}
|
|
</style>
|