155 lines
3.8 KiB
Vue
155 lines
3.8 KiB
Vue
<script setup lang="ts">
|
|
import { Icon } from '@iconify/vue/dist/iconify.js';
|
|
import { formatNumberDecimal } from 'src/stores/utils';
|
|
import KebabAction from '../shared/KebabAction.vue';
|
|
|
|
defineProps<{
|
|
type?:
|
|
| 'fullAmountCash'
|
|
| 'installmentsCash'
|
|
| 'fullAmountBill'
|
|
| 'installmentsBill'
|
|
| string;
|
|
title?: string;
|
|
code?: string;
|
|
amount?: number;
|
|
date?: string;
|
|
customerName?: string;
|
|
reporter?: string;
|
|
totalPrice?: number;
|
|
}>();
|
|
|
|
defineEmits<{
|
|
(e: 'view'): void;
|
|
(e: 'edit'): void;
|
|
(e: 'link'): void;
|
|
(e: 'upload'): void;
|
|
(e: 'delete'): void;
|
|
(e: 'changeStatus'): void;
|
|
(e: 'example'): void;
|
|
}>();
|
|
</script>
|
|
<template>
|
|
<div class="surface-1 rounded bordered q-pa-sm quo-card">
|
|
<!-- SEC: header -->
|
|
<header class="row items-center no-wrap">
|
|
<div
|
|
class="badge-card rounded q-pa-xs"
|
|
:class="{ [`badge-card__${type}`]: true }"
|
|
>
|
|
{{ $t(`quotation.type.${type}`) }}
|
|
</div>
|
|
|
|
<div class="column q-ml-md relative-position" style="font-size: 12px">
|
|
<span>
|
|
{{ $t('general.itemNo', { msg: $t('quotation.title') }) }}
|
|
</span>
|
|
<span class="text-caption app-text-muted" style="top: 10px">
|
|
{{ code }}
|
|
</span>
|
|
</div>
|
|
|
|
<nav class="col text-right">
|
|
<q-btn
|
|
flat
|
|
dense
|
|
rounded
|
|
icon="mdi-eye-outline"
|
|
size="12px"
|
|
@click.stop="$emit('view')"
|
|
/>
|
|
<KebabAction
|
|
:idName="code"
|
|
status="ACTIVE"
|
|
use-link
|
|
use-upload
|
|
@view="$emit('view')"
|
|
@edit="$emit('edit')"
|
|
@link="$emit('link')"
|
|
@upload="$emit('upload')"
|
|
@delete="$emit('delete')"
|
|
@change-status="$emit('changeStatus')"
|
|
/>
|
|
</nav>
|
|
</header>
|
|
|
|
<!-- SEC: body -->
|
|
<section class="row no-wrap q-py-md">
|
|
<q-img src="/images/quotation-avatar.png" width="4rem" class="q-mr-lg" />
|
|
<div class="column">
|
|
<span class="col q-pt-sm">{{ title || '-' }}</span>
|
|
<span class="app-text-muted">x {{ amount || '0' }}</span>
|
|
</div>
|
|
<div
|
|
class="col text-right app-text-muted q-mr-md self-end"
|
|
style="font-size: 12px"
|
|
>
|
|
{{ date || '-' }}
|
|
</div>
|
|
</section>
|
|
<q-separator />
|
|
<section class="row q-py-sm">
|
|
<div class="col-3 app-text-muted">{{ $t('quotation.customerName') }}</div>
|
|
<div class="col-9">{{ customerName || '-' }}</div>
|
|
<div class="col-3 app-text-muted">{{ $t('quotation.actor') }}</div>
|
|
<div class="col-9">{{ reporter || '-' }}</div>
|
|
</section>
|
|
<q-separator />
|
|
<footer class="row no-wrap items-center q-mt-sm">
|
|
<Icon
|
|
class="q-mr-md"
|
|
icon="ph:money-fill"
|
|
style="font-size: 24px; color: var(--green-9)"
|
|
/>
|
|
{{ $t('quotation.totalPriceBaht') }} :
|
|
<div class="q-pl-xs" style="color: var(--orange-5)">
|
|
{{ formatNumberDecimal(totalPrice || 0, 2) }}
|
|
</div>
|
|
<q-btn
|
|
dense
|
|
outline
|
|
color="primary"
|
|
class="rounded q-ml-auto"
|
|
padding="2px 8px"
|
|
>
|
|
<q-icon name="mdi-play-box-outline" size="xs" class="q-mr-xs" />
|
|
{{ $t('general.view', { msg: $t('general.example') }) }}
|
|
</q-btn>
|
|
</footer>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.badge-card {
|
|
font-size: 12px;
|
|
color: hsla(var(--gray-0-hsl) / 1);
|
|
background: hsla(var(--_color) / 1);
|
|
}
|
|
|
|
.badge-card__fullAmountCash {
|
|
--_color: var(--red-6-hsl);
|
|
}
|
|
|
|
.badge-card__installmentsCash {
|
|
--_color: var(--blue-6-hsl);
|
|
}
|
|
|
|
.badge-card__fullAmountBill {
|
|
--_color: var(--jungle-8-hsl);
|
|
}
|
|
|
|
.badge-card__installmentsBill {
|
|
--_color: var(--purple-7-hsl);
|
|
}
|
|
|
|
.dark .badge-card__installmentsCash {
|
|
--_color: var(--blue-10-hsl);
|
|
}
|
|
|
|
span {
|
|
display: inline-block;
|
|
/*new:*/
|
|
line-height: 12px;
|
|
height: 12px;
|
|
}
|
|
</style>
|