src/components/SalesSlip.vue - dev - vdele/app

src/components/SalesSlip.vue
79 строк4 KB
Vasilii Polshakov
last fixes for 0.0.1-alpha
02 апр 2025, 12:32
02 апр 2025, 12:32ef3d4ef
<script setup lang="ts">
import { inject, toRef, type ComputedRef } from 'vue';
import type { OrderPosition } from '@/libs/types';
import { InfoAlert } from '@/components/ui/index';

const order = inject('orderStore') as {
    items: ComputedRef<{
        count: number;
        amount: number;
        uid: string;
        caption: string;
    }[]>;
    sum: ComputedRef<number>;
    add: (item: OrderPosition) => void;
    remove: (uid: string) => void;
    increaseByOne: (uid: string) => void;
    decreaseByOne: (uid: string) => void;
};
const result = toRef(order.sum) ;
</script>
<template>
    <div>
        <div class="d-grid d-flex justify-content-between">
            <div><span class="h3">Итог:</span></div>
            <div><span class="h3 text-primary" v-counter="result">{{ result.toLocaleString("ru-RU", {
                style: "currency",
                currency: "RUB", minimumFractionDigits: 2, maximumFractionDigits: 2
            }).replace(',', '.') }}</span>
            </div>
        </div>
        <hr />
        <div>
            <div><span class="h4">Услуги:</span></div>
            <table v-if="order.items.value.length" class="table">
                <thead>
                    <tr>
                        <th scope="col"></th>
                        <th scope="col">#</th>
                        <th scope="col">Наименование</th>
                        <th scope="col">Стоимость</th>
                        <th scope="col">Количество</th>
                        <th scope="col">Сумма</th>
                        <th scope="col"></th>
                        <th scope="col"></th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(service, key) in order.items.value" :key="`service-${service.uid}-${key}`">
                        <th><button type="button" class="btn btn-danger"
                                @click="() => { order.remove(service.uid); }">X</button></th>
                        <th scope="row">{{ key + 1 }}</th>
                        <td>{{ service.caption }}</td>
                        <td style="text-align: end;">{{ service.amount.toLocaleString("ru-RU", {
                            style: "currency",
                            currency: "RUB", minimumFractionDigits: 2, maximumFractionDigits: 2
                        }).replace(',', '.') }}
                        </td>
                        <td style="text-align: center;">X {{ service.count }} шт.</td>
                        <td v-counter="(service.amount * service.count)" style="text-align: end;">{{ (service.amount *
                            service.count).toLocaleString("ru-RU", {
                                style: "currency", currency: "RUB",
                                minimumFractionDigits: 2, maximumFractionDigits: 2
                            }).replace(',', '.') }}</td>
                        <th><button type="button" class="btn btn-success"
                                @click="() => { order.increaseByOne(service.uid); }">+</button></th>
                        <th><button type="button" class="btn btn-danger" :disabled="!(service.count > 1)"
                                @click="() => { order.decreaseByOne(service.uid); }">-</button></th>
                    </tr>
                </tbody>
            </table>
            <div v-else>
                <p style="text-align: center;"><i>Добавьте позиции для подсчета итоговой суммы...</i></p>
                <InfoAlert>Для добавления позиции в счёт, нажмите на цену позиции в списке.</InfoAlert>
                <InfoAlert>При нажатии на любую цену из уже добавленной позиции - цена в счёте <b>перезапишется</b> на
                    выбранную цену.</InfoAlert>
            </div>
        </div>
    </div>
</template>