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

fix: product item table layout

Browse source
This commit is contained in:
puriphatt 2024-10-07 10:51:09 +07:00
parent a9650ad1b6
commit b11c57d9cb
1 changed files with 107 additions and 104 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -131,115 +131,118 @@ watch(
</script>
<template>
<div class="column">
<TableComponents
flat
bordered
hidePagination
button-delete
:columns="columns"
:rows="rows"
:customColumn="[
'name',
'amount',
'pricePerUnit',
'discount',
'tax',
'sumPrice',
]"
@delete="(i) => $emit('delete', i)"
>
<template v-slot:body-cell-name="{ props }">
<q-td>
<q-avatar class="q-mr-sm" size="md">
<q-icon
class="full-width full-height"
name="mdi-shopping-outline"
:style="`color: var(--teal-10); background: hsla(var(--teal-${$q.dark.isActive ? '8' : '10'}-hsl)/0.15)`"
<div class="full-width">
<TableComponents
flat
bordered
hidePagination
button-delete
:columns="columns"
:rows="rows"
:customColumn="[
'name',
'amount',
'pricePerUnit',
'discount',
'tax',
'sumPrice',
]"
@delete="(i) => $emit('delete', i)"
>
<template v-slot:body-cell-name="{ props }">
<q-td>
<q-avatar class="q-mr-sm" size="md">
<q-icon
class="full-width full-height"
name="mdi-shopping-outline"
:style="`color: var(--teal-10); background: hsla(var(--teal-${$q.dark.isActive ? '8' : '10'}-hsl)/0.15)`"
/>
</q-avatar>
{{ props.row.product.name }}
</q-td>
</template>
<template v-slot:body-cell-amount="{ props }">
<q-td align="center">
<q-input
dense
outlined
type="number"
style="width: 70px"
min="0"
v-model="props.row.amount"
/>
</q-avatar>
{{ props.row.product.name }}
</q-td>
</template>
</q-td>
</template>
<template v-slot:body-cell-amount="{ props }">
<q-td align="center">
<q-input
<template v-slot:body-cell-pricePerUnit="{ props }">
<q-td align="right">
{{
formatNumberDecimal(
(props.row.pricePerUnit = agentPrice
? props.row.product.agentPrice
: props.row.product.price),
2,
)
}}
</q-td>
</template>
<template v-slot:body-cell-discount="{ props }">
<q-td align="center">
<q-input
dense
min="0"
outlined
type="number"
style="width: 70px"
v-model="props.row.discount"
/>
</q-td>
</template>
<template v-slot:body-cell-tax="{ props }">
<q-td align="center">
<q-input
dense
min="0"
outlined
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>
</q-td>
</template>
<template v-slot:body-cell-sumPrice="{ props }">
<q-td align="right">
{{ formatNumberDecimal(calcPrice(props.row), 2) }}
</q-td>
</template>
<template #button>
<q-btn
icon="mdi-monitor"
size="sm"
class="rounded q-mr-xs"
padding="4px 8px"
dense
outlined
type="number"
style="width: 70px"
min="0"
v-model="props.row.amount"
flat
style="
background-color: hsla(var(--positive-bg) / 0.1);
color: hsl(var(--positive-bg));
"
/>
</q-td>
</template>
</template>
</TableComponents>
</div>
<template v-slot:body-cell-pricePerUnit="{ props }">
<q-td align="right">
{{
formatNumberDecimal(
(props.row.pricePerUnit = agentPrice
? props.row.product.agentPrice
: props.row.product.price),
2,
)
}}
</q-td>
</template>
<template v-slot:body-cell-discount="{ props }">
<q-td align="center">
<q-input
dense
min="0"
outlined
type="number"
style="width: 70px"
v-model="props.row.discount"
/>
</q-td>
</template>
<template v-slot:body-cell-tax="{ props }">
<q-td align="center">
<q-input
dense
min="0"
outlined
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>
</q-td>
</template>
<template v-slot:body-cell-sumPrice="{ props }">
<q-td align="right">
{{ formatNumberDecimal(calcPrice(props.row), 2) }}
</q-td>
</template>
<template #button>
<q-btn
icon="mdi-monitor"
size="sm"
class="rounded q-mr-xs"
padding="4px 8px"
dense
flat
style="
background-color: hsla(var(--positive-bg) / 0.1);
color: hsl(var(--positive-bg));
"
/>
</template>
</TableComponents>
<div
class="column q-ml-auto text-caption app-text-muted q-pt-md"
style="width: 15vw"