chamomind/jws-frontend
chamomind/jws-frontend
7
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

fix(05): product item table

Browse source
This commit is contained in:
puriphatt 2024-10-04 09:14:46 +07:00
parent 9d745d8e52
commit e3b1693214
3 changed files with 67 additions and 59 deletions
Download patch file Download diff file Expand all files Collapse all files

52
src/components/05_quotation/ProductItem.vue
View file

@ -123,7 +123,7 @@ const columns = [
@delete="(i) => $emit('delete', i)" @delete="(i) => $emit('delete', i)"
> >
<template v-slot:body-cell-name="{ props }"> <template v-slot:body-cell-name="{ props }">
<div> <q-td>
<q-avatar class="q-mr-sm" size="md"> <q-avatar class="q-mr-sm" size="md">
<q-icon <q-icon
class="full-width full-height" class="full-width full-height"
@ -132,7 +132,7 @@ const columns = [
/> />
</q-avatar> </q-avatar>
{{ props.row.product.name }} {{ props.row.product.name }}
</div> </q-td>
</template> </template>
<template v-slot:body-cell-amount="{ props }"> <template v-slot:body-cell-amount="{ props }">
@ -155,6 +155,8 @@ const columns = [
outlined outlined
type="number" type="number"
style="width: 70px" style="width: 70px"
readonly
class="bordered rounded"
min="0" min="0"
v-model="props.row.pricePerUnit" v-model="props.row.pricePerUnit"
/> />
@ -180,18 +182,28 @@ const columns = [
<template v-slot:body-cell-tax="{ props }"> <template v-slot:body-cell-tax="{ props }">
<q-td align="center"> <q-td align="center">
<q-input <div class="row justify-around items-center">
dense <q-checkbox
min="0" :model-value="Number(props.row.vat) === 7"
outlined size="xs"
type="number" :label="$t('quotation.calTax')"
style="width: 70px" @click="props.row.vat ? (props.row.vat = 0) : (props.row.vat = 7)"
v-model="props.row.vat" />
> <q-input
<template v-slot:append> dense
<span class="text-caption no-padding">%</span> min="0"
</template> outlined
</q-input> type="number"
readonly
class="bordered rounded"
style="width: 70px"
v-model="props.row.vat"
>
<template v-slot:append>
<span class="text-caption no-padding">%</span>
</template>
</q-input>
</div>
</q-td> </q-td>
</template> </template>
@ -216,18 +228,12 @@ const columns = [
/> />
</template> </template>
</TableComponents> </TableComponents>
<q-checkbox
v-model="calTax"
class="q-pt-md"
size="xs"
:label="$t('quotation.calTax')"
/>
<div <div
class="column q-ml-auto text-caption app-text-muted" class="column q-ml-auto text-caption app-text-muted q-pt-md"
style="width: 15vw" style="width: 15vw"
> >
<div class="row"> <div class="row">
{{ $t('quotation.price') }} {{ $t('quotation.allProductPrice') }}
<span class="q-ml-auto">{{ summary.totalPrice }} ฿</span> <span class="q-ml-auto">{{ summary.totalPrice }} ฿</span>
</div> </div>
<div class="row"> <div class="row">
@ -240,7 +246,7 @@ const columns = [
</div> </div>
<q-separator spaced="md" /> <q-separator spaced="md" />
<div class="row text-bold text-body2" style="color: var(--foreground)"> <div class="row text-bold text-body2" style="color: var(--foreground)">
Total Price {{ $t('quotation.totalPrice') }}
<span class="q-ml-auto">{{ summary.finalPrice }} ฿</span> <span class="q-ml-auto">{{ summary.finalPrice }} ฿</span>
</div> </div>
</div> </div>

2
src/components/05_quotation/QuotationCard.vue
View file

@ -101,7 +101,7 @@ defineEmits<{
icon="ph:money-fill" icon="ph:money-fill"
style="font-size: 24px; color: var(--green-9)" style="font-size: 24px; color: var(--green-9)"
/> />
{{ $t('quotation.totalPrice') }} : {{ $t('quotation.totalPriceBaht') }} :
<div class="q-pl-xs" style="color: var(--orange-5)"> <div class="q-pl-xs" style="color: var(--orange-5)">
{{ formatNumberDecimal(totalPrice || 0, 2) }} {{ formatNumberDecimal(totalPrice || 0, 2) }}
</div> </div>

72
src/components/TableComponents.vue
View file

@ -86,44 +86,46 @@ defineEmits<{
</template> </template>
<template v-slot:body-cell-action="props"> <template v-slot:body-cell-action="props">
<q-td class="text-center row items-center"> <q-td>
<slot name="button" :props="props"></slot> <div class="row items-center full-width justify-end">
<DeleteButton <slot name="button" :props="props"></slot>
iconOnly <DeleteButton
v-if="buttonDelete" iconOnly
@click="$emit('delete', props.rowIndex)" v-if="buttonDelete"
/> @click="$emit('delete', props.rowIndex)"
/>
<q-btn <q-btn
v-if="!buttonDelete" v-if="!buttonDelete"
icon="mdi-eye-outline" icon="mdi-eye-outline"
size="sm" size="sm"
dense dense
round round
flat flat
@click.stop="$emit('view', props.rowIndex)" @click.stop="$emit('view', props.rowIndex)"
/> />
<q-btn <q-btn
v-if="buttomDownload && props.row.id !== undefined" v-if="buttomDownload && props.row.id !== undefined"
icon="mdi-download-outline" icon="mdi-download-outline"
size="sm" size="sm"
dense dense
round round
flat flat
@click.stop="$emit('download', props.rowIndex)" @click.stop="$emit('download', props.rowIndex)"
/> />
<KebabAction <KebabAction
v-if="!buttonDelete" v-if="!buttonDelete"
hide-toggle hide-toggle
:id-name="props.row.code" :id-name="props.row.code"
:status="props.row.status" :status="props.row.status"
@view="$emit('view', props.rowIndex)" @view="$emit('view', props.rowIndex)"
@edit="$emit('edit', props.rowIndex)" @edit="$emit('edit', props.rowIndex)"
@delete="$emit('delete', props.rowIndex)" @delete="$emit('delete', props.rowIndex)"
@change-status="$emit('toggleStatus', props.row)" @change-status="$emit('toggleStatus', props.row)"
/> />
</div>
</q-td> </q-td>
<slot name="dialog" :index="props.rowIndex" :row="props.row"></slot> <slot name="dialog" :index="props.rowIndex" :row="props.row"></slot>