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