121 lines
3.4 KiB
Vue
121 lines
3.4 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
data: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
modeShow: {
|
|
type: Boolean,
|
|
required: true,
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits(["accept", "deny", "fix", "reopen"])
|
|
</script>
|
|
|
|
<template>
|
|
<span id="invoice_details_header">
|
|
<table>
|
|
<tr>
|
|
<td>Name:</td>
|
|
<td v-if="modeShow">{{props.data.contactName}}</td>
|
|
<td v-else style="width: 300px;">{{props.data.contactName}}</td>
|
|
|
|
<td v-if="modeShow" style="width: 250px;">Kostenstelle</td>
|
|
<td v-else style="width: 300px;">Kostensatelle (ursprünglich)</td>
|
|
|
|
<td>{{props.data.costUnitName}}</td>
|
|
<td rowspan="4" style="width: 250px; padding-right: 25px; text-align: right; vertical-align: top;">
|
|
<input type="button"
|
|
v-if="props.data.status === 'new' && modeShow"
|
|
@click="emit('accept')"
|
|
class="accept-button"
|
|
style="width: 100%; margin-bottom: 10px;"
|
|
value="Abrechnung annehmen"
|
|
/>
|
|
|
|
<input type="button" v-if="props.data.status === 'denied' && modeShow"
|
|
@click="emit('reopen')"
|
|
class="accept-button"
|
|
style="width: 100%; margin-bottom: 10px;"
|
|
value="Abrechnung zur Wiedervorlage öffnen"
|
|
/>
|
|
|
|
<br />
|
|
|
|
<input type="button"
|
|
v-if="props.data.status === 'new' && modeShow"
|
|
@click="emit('fix')"
|
|
class="fix-button"
|
|
style="width: 100%; margin-bottom: 10px;"
|
|
value="Abrechnung ablehnen und korrigieren"
|
|
/>
|
|
<br />
|
|
|
|
<input type="button"
|
|
v-if="props.data.status === 'new' && modeShow"
|
|
@click="emit('deny')"
|
|
class="deny-button"
|
|
style="width: 100%"
|
|
value="Abrechnung ablehnen"
|
|
/>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Rest der Tabelle bleibt unverändert -->
|
|
<tr>
|
|
<td>E-Mail:</td>
|
|
<td>{{props.data.contactEmail}}</td>
|
|
<td>
|
|
Abrechnungsnummer
|
|
<label v-if="!modeShow"> (ursprünglich)</label>:
|
|
</td>
|
|
|
|
<td>{{props.data.invoiceNumber}}</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>Telefon:</td>
|
|
<td>{{props.data.contactPhone}}</td>
|
|
<td>
|
|
Abrechnungstyp
|
|
<label v-if="!modeShow"> (Ursprünglich)</label>:
|
|
</td>
|
|
<td>{{props.data.invoiceType}}</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>Kontoinhaber*in:</td>
|
|
<td>{{props.data.accountOwner}}</td>
|
|
<td>Gesamtbetrag
|
|
<label v-if="!modeShow"> (Ursprünglich)</label>:
|
|
</td>
|
|
<td><strong>{{props.data.amount}}</strong></td>
|
|
</tr>
|
|
<tr>
|
|
<td>IBAN:</td>
|
|
<td>{{props.data.accountIban}}</td>
|
|
<td>Buchungsinformationen:</td>
|
|
<td v-if="props.data.donation">Als Spende gebucht</td>
|
|
<td v-else-if="props.data.alreadyPaid">Beleg ohne Auszahlung</td>
|
|
<td v-else>Klassische Auszahlung</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Status:</td>
|
|
<td>{{props.data.readableStatus}}</td>
|
|
<td>Anmerkungen:</td>
|
|
<td>
|
|
<span v-if="props.data.status === 'denied'">
|
|
{{props.data.deniedReason}}
|
|
</span>
|
|
<span v-else>{{props.data.comment}}</span>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</span>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|