refactor: separate product expansion in credit note
This commit is contained in:
Methapon2001
parent
c1afeee1da
commit
0be0ce4c49
3 changed files with 317 additions and 1 deletions
|
|
@ -19,7 +19,7 @@ import AdditionalFileExpansion from '../09_task-order/expansion/AdditionalFileEx
|
|||
import PaymentExpansion from './expansion/PaymentExpansion.vue';
|
||||
import CreditNoteExpansion from './expansion/CreditNoteExpansion.vue';
|
||||
import StateButton from 'src/components/button/StateButton.vue';
|
||||
import ProductExpansion from '../09_task-order/expansion/ProductExpansion.vue';
|
||||
import ProductExpansion from './expansion/ProductExpansion.vue';
|
||||
import SelectReadyRequestWork from '../09_task-order/SelectReadyRequestWork.vue';
|
||||
import RefundInformation from './RefundInformation.vue';
|
||||
import QuotationFormReceipt from '../05_quotation/QuotationFormReceipt.vue';
|
||||
|
|
|
|||
|
|
@ -76,3 +76,60 @@ export const hslaColors: Record<string, string> = {
|
|||
Pending: '--orange-5-hsl',
|
||||
Success: '--blue-6-hsl',
|
||||
};
|
||||
|
||||
export const productColumn = [
|
||||
{
|
||||
name: 'order',
|
||||
align: 'center',
|
||||
label: 'general.order',
|
||||
field: 'no',
|
||||
},
|
||||
{
|
||||
name: 'code',
|
||||
align: 'center',
|
||||
label: 'productService.product.code',
|
||||
field: 'code',
|
||||
},
|
||||
{
|
||||
name: 'productList',
|
||||
align: 'center',
|
||||
label: 'taskOrder.productList',
|
||||
field: 'productList',
|
||||
},
|
||||
{
|
||||
name: 'amountOfEmployee',
|
||||
align: 'center',
|
||||
label: 'taskOrder.amountOfEmployee',
|
||||
field: 'amountOfEmployee',
|
||||
},
|
||||
{
|
||||
name: 'pricePerUnit',
|
||||
align: 'center',
|
||||
label: 'quotation.pricePerUnit',
|
||||
field: 'pricePerUnit',
|
||||
},
|
||||
{
|
||||
name: 'discount',
|
||||
align: 'center',
|
||||
label: 'general.discount',
|
||||
field: 'discount',
|
||||
},
|
||||
{
|
||||
name: 'priceBeforeVat',
|
||||
align: 'center',
|
||||
label: 'quotation.priceBeforeVat',
|
||||
field: 'priceBeforeVat',
|
||||
},
|
||||
{
|
||||
name: 'vat',
|
||||
align: 'center',
|
||||
label: 'general.vat',
|
||||
field: 'vat',
|
||||
},
|
||||
{
|
||||
name: 'totalPriceBaht',
|
||||
align: 'center',
|
||||
label: 'quotation.totalPriceBaht',
|
||||
field: 'totalPriceBaht',
|
||||
},
|
||||
] as const satisfies QTableProps['columns'];
|
||||
|
|
|
|||
259
src/pages/11_credit-note/expansion/ProductExpansion.vue
Normal file
259
src/pages/11_credit-note/expansion/ProductExpansion.vue
Normal file
|
|
@ -0,0 +1,259 @@
|
|||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { QTableSlots } from 'quasar';
|
||||
|
||||
import { AddButton } from 'src/components/button';
|
||||
import TableEmployee from '../../09_task-order/TableEmployee.vue';
|
||||
|
||||
import { RequestWork } from 'src/stores/request-list';
|
||||
import { productColumn } from '../constants';
|
||||
import { baseUrl, formatNumberDecimal } from 'src/stores/utils';
|
||||
import { precisionRound } from 'src/utils/arithmetic';
|
||||
import { useConfigStore } from 'stores/config';
|
||||
import { storeToRefs } from 'pinia';
|
||||
|
||||
const currentExpanded = ref<boolean[]>([]);
|
||||
const configStore = useConfigStore();
|
||||
const { data: config } = storeToRefs(configStore);
|
||||
|
||||
const taskProduct = defineModel<{ productId: string; discount?: number }[]>(
|
||||
'taskProduct',
|
||||
{
|
||||
default: [],
|
||||
},
|
||||
);
|
||||
|
||||
const props = defineProps<{
|
||||
readonly?: boolean;
|
||||
agentPrice?: boolean;
|
||||
taskList: {
|
||||
product: RequestWork['productService']['product'];
|
||||
list: RequestWork[];
|
||||
}[];
|
||||
}>();
|
||||
|
||||
defineEmits<{
|
||||
(e: 'addProduct'): void;
|
||||
}>();
|
||||
|
||||
defineExpose({
|
||||
calcPricePerUnit,
|
||||
});
|
||||
|
||||
function openList(index: number) {
|
||||
if (!currentExpanded.value[index]) {
|
||||
currentExpanded.value.map((_, i) => {
|
||||
if (i !== index) currentExpanded.value[i] = false;
|
||||
});
|
||||
}
|
||||
currentExpanded.value[index] = !currentExpanded.value[index];
|
||||
}
|
||||
|
||||
function calcPricePerUnit(product: RequestWork['productService']['product']) {
|
||||
const val = props.agentPrice ? product.agentPrice : product.price;
|
||||
|
||||
if (product[props.agentPrice ? 'agentPriceCalcVat' : 'calcVat']) {
|
||||
return val / (1 + (config.value?.vat || 0.07));
|
||||
} else {
|
||||
return val;
|
||||
}
|
||||
}
|
||||
|
||||
function calcPrice(
|
||||
product: RequestWork['productService']['product'],
|
||||
amount: number,
|
||||
) {
|
||||
const pricePerUnit = props.agentPrice ? product.agentPrice : product.price;
|
||||
const discount =
|
||||
taskProduct.value.find((v) => v.productId === product.id)?.discount || 0;
|
||||
const priceNoVat = product[
|
||||
props.agentPrice ? 'agentPriceVatIncluded' : 'vatIncluded'
|
||||
]
|
||||
? pricePerUnit / (1 + (config.value?.vat || 0.07))
|
||||
: pricePerUnit;
|
||||
const priceDiscountNoVat = priceNoVat * amount - discount;
|
||||
|
||||
const rawVatTotal = product[
|
||||
props.agentPrice ? 'agentPriceCalcVat' : 'calcVat'
|
||||
]
|
||||
? priceDiscountNoVat * (config.value?.vat || 0.07)
|
||||
: 0;
|
||||
|
||||
return precisionRound(priceNoVat * amount + rawVatTotal);
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<q-expansion-item
|
||||
dense
|
||||
class="overflow-hidden bordered full-width"
|
||||
switch-toggle-side
|
||||
style="border-radius: var(--radius-2)"
|
||||
expand-icon="mdi-chevron-down-circle"
|
||||
header-class="surface-1 q-py-sm text-medium text-body1"
|
||||
default-opened
|
||||
>
|
||||
<template #header>
|
||||
<span
|
||||
class="row items-center justify-between full-width"
|
||||
style="min-height: 31.01px"
|
||||
>
|
||||
{{ $t('general.information', { msg: $t('taskOrder.productList') }) }}
|
||||
<AddButton
|
||||
icon-only
|
||||
@click.stop="$emit('addProduct')"
|
||||
v-if="!readonly"
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<main class="q-px-md q-py-sm surface-1">
|
||||
<q-table
|
||||
:columns="
|
||||
productColumn.filter(
|
||||
(v) =>
|
||||
v.name !== 'discount' &&
|
||||
v.name !== 'priceBeforeVat' &&
|
||||
v.name !== 'vat',
|
||||
)
|
||||
"
|
||||
:rows="taskList"
|
||||
bordered
|
||||
flat
|
||||
hide-pagination
|
||||
card-container-class="q-col-gutter-sm"
|
||||
class="full-width"
|
||||
:rows-per-page-options="[0]"
|
||||
:no-data-label="$t('general.noDataTable')"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr
|
||||
style="background-color: hsla(var(--info-bg) / 0.07)"
|
||||
:props="props"
|
||||
>
|
||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||
{{ col.label && $t(col.label) }}
|
||||
{{ col.label === 'quotation.vat' ? '%' : '' }}
|
||||
</q-th>
|
||||
<q-th></q-th>
|
||||
</q-tr>
|
||||
</template>
|
||||
|
||||
<template
|
||||
v-slot:body="props: {
|
||||
row: {
|
||||
product: RequestWork['productService']['product'];
|
||||
list: RequestWork[];
|
||||
};
|
||||
} & Omit<Parameters<QTableSlots['body']>[0], 'row'>"
|
||||
>
|
||||
<q-tr class="text-center">
|
||||
<q-td>
|
||||
{{ props.rowIndex + 1 }}
|
||||
</q-td>
|
||||
<q-td>
|
||||
{{ props.row.product.code }}
|
||||
</q-td>
|
||||
<q-td style="width: 100%" class="text-left">
|
||||
<q-avatar class="q-mr-sm" size="md">
|
||||
<q-img
|
||||
class="text-center"
|
||||
:ratio="1"
|
||||
:src="`${baseUrl}/product/${props.row.product.id}/image/${props.row.product.selectedImage}`"
|
||||
>
|
||||
<template #error>
|
||||
<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)`"
|
||||
/>
|
||||
</template>
|
||||
</q-img>
|
||||
</q-avatar>
|
||||
{{ props.row.product.name }}
|
||||
</q-td>
|
||||
<q-td>
|
||||
{{ props.row.list.length }}
|
||||
</q-td>
|
||||
<q-td class="text-right">
|
||||
{{
|
||||
formatNumberDecimal(
|
||||
calcPricePerUnit(props.row.product) +
|
||||
(props.row.product.calcVat
|
||||
? calcPricePerUnit(props.row.product) *
|
||||
(config?.vat || 0.07)
|
||||
: 0),
|
||||
2,
|
||||
)
|
||||
}}
|
||||
</q-td>
|
||||
|
||||
<!-- total -->
|
||||
<q-td class="text-right">
|
||||
{{
|
||||
formatNumberDecimal(
|
||||
calcPrice(props.row.product, props.row.list.length),
|
||||
2,
|
||||
)
|
||||
}}
|
||||
</q-td>
|
||||
<q-td>
|
||||
<q-btn
|
||||
dense
|
||||
flat
|
||||
class="rounded"
|
||||
@click.stop="openList(props.rowIndex)"
|
||||
>
|
||||
<div class="row items-center no-wrap">
|
||||
<q-icon name="mdi-account-group-outline" />
|
||||
<q-icon
|
||||
class="btn-arrow-right"
|
||||
:class="{
|
||||
active: currentExpanded[props.rowIndex],
|
||||
}"
|
||||
size="xs"
|
||||
:name="`mdi-chevron-${currentExpanded[props.rowIndex] ? 'down' : 'up'}`"
|
||||
/>
|
||||
</div>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
|
||||
<q-tr v-show="currentExpanded[props.rowIndex]" :props="props">
|
||||
<q-td colspan="100%" style="padding: 16px">
|
||||
<TableEmployee :rows="props.row.list" />
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</q-table>
|
||||
|
||||
<div class="q-pt-md row items-center">
|
||||
<span class="q-ml-auto q-mr-sm">
|
||||
{{
|
||||
$t('general.numberOf', {
|
||||
msg: $t('productService.product.product'),
|
||||
})
|
||||
}}
|
||||
</span>
|
||||
<div class="surface-3 q-px-sm rounded">{{ taskList.length }}</div>
|
||||
</div>
|
||||
</main>
|
||||
</q-expansion-item>
|
||||
</template>
|
||||
<style scoped>
|
||||
.product-status {
|
||||
padding-left: 8px;
|
||||
border-radius: 20px;
|
||||
color: hsl(var(--_color));
|
||||
background: hsla(var(--_color) / 0.15);
|
||||
|
||||
&.warning {
|
||||
--_color: var(--warning-bg);
|
||||
}
|
||||
&.positive {
|
||||
--_color: var(--positive-bg);
|
||||
}
|
||||
&.negative {
|
||||
--_color: var(--negative-bg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue