refactor: request list => display invoice code & payment code

This commit is contained in:
puriphatt 2024-11-29 11:17:35 +07:00
parent 3d48cd1140
commit 7147ed1819
2 changed files with 20 additions and 8 deletions

View file

@ -7,6 +7,7 @@ withDefaults(
value: string; value: string;
icon?: string; icon?: string;
iconSize?: string; iconSize?: string;
tooltip?: boolean;
}>(), }>(),
{ {
label: '-', label: '-',
@ -16,19 +17,20 @@ withDefaults(
</script> </script>
<template> <template>
<article class="row items-center"> <article class="row items-center full-width">
<Icon <Icon
v-if="icon" v-if="icon"
:icon :icon
class="app-text-muted q-pr-sm" class="app-text-muted q-pr-sm"
:width="iconSize || '2rem'" :width="iconSize || '2rem'"
/> />
<span class="column"> <span class="row col">
<span class="app-text-muted-2 text-caption"> <span class="col-12 app-text-muted-2 text-caption">
{{ label }} {{ label }}
</span> </span>
<span class="text-weight-medium"> <span class="col-12 text-weight-medium ellipsis">
{{ value }} {{ value }}
<q-tooltip v-if="tooltip" :delay="500">{{ value }}</q-tooltip>
</span> </span>
</span> </span>
</article> </article>

View file

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
// NOTE: Library // NOTE: Library
import { onMounted, reactive, ref, watch } from 'vue'; import { onMounted, reactive, ref, watch, computed, nextTick } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
// NOTE: Components // NOTE: Components
@ -36,7 +36,7 @@ import {
PropOptions, PropOptions,
PropString, PropString,
} from 'src/stores/product-service/types'; } from 'src/stores/product-service/types';
import { computed, nextTick } from 'vue'; import { Invoice } from 'src/stores/payment/types';
const { locale } = useI18n(); const { locale } = useI18n();
@ -443,8 +443,13 @@ const successAll = computed(() => {
<DataDisplay <DataDisplay
class="col" class="col"
icon="mdi-file-document-outline" icon="mdi-file-document-outline"
tooltip
:label="$t('requestList.invoiceCode')" :label="$t('requestList.invoiceCode')"
:value="'-'" :value="
data.quotation?.invoice
?.map((i: Invoice) => i.code)
.join(', ') || '-'
"
/> />
<span class="col"></span> <span class="col"></span>
</div> </div>
@ -455,8 +460,13 @@ const successAll = computed(() => {
<DataDisplay <DataDisplay
class="col" class="col"
icon="mdi-file-document-outline" icon="mdi-file-document-outline"
tooltip
:label="$t('requestList.receiptCode')" :label="$t('requestList.receiptCode')"
:value="'-'" :value="
data.quotation?.invoice
?.flatMap((i: Invoice) => i.payment?.code || [])
.join(', ') || '-'
"
/> />
<DataDisplay <DataDisplay
class="col" class="col"