bartosz/mleczarnia-kuzma-zamowienia-ui
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Created ConfirmedForm.vue

Browse Source
This commit is contained in:
Patryk Binkowski
2024-06-14 17:37:47 +02:00
parent a289c8dd0f
commit 2fecc061e2
5 changed files with 221 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
src/components/ConfirmedForm.vue Normal file
View File

@@ -0,0 +1,129 @@
<script setup lang="ts">
import type { Category, Contractor, Order } from '@/main'
import VueDatePicker from '@vuepic/vue-datepicker'
const order = defineModel<Order>('order');
const categories = defineModel<Array<Category>>('categories');
const contractor = defineModel<Contractor>('contractor');
const props = defineProps({
orderDate: Date,
uuid: String,
deliveryDate: Date
})
</script>
<template>
<form class="box" @submit="createJSON" style="min-height: 93.5vh">
<div class="mb-3">
<div class="box">
<h1 class="is-large mb-3"><b>ZAMÓWIENIE</b></h1>
<h1 class="is-large mb-3" v-if="uuid != null" ><b>{{ uuid }}</b></h1>
<div class="field mb-3" v-if="contractor != undefined">
<label class="label is-small">Klient</label>
<div class="field is-small mb-3">
<input class="input is-small is-static"
type="text"
:value="contractor.Knt_Nazwa1 + contractor.Knt_Nazwa2 + contractor.Knt_Nazwa3"
readonly/>
</div>
</div>
<div class="field mb-3" v-if="order != undefined">
<label class="label is-small">Data dostawy</label>
<div class="field is-small">
<VueDatePicker
v-model="order.MZN_DataDos"
:enable-time-picker="false"
:clearable="true"
input-class-name="input is-small calendar-background is-static"
menu-class-name="calendar-background"
readonly
hide-input-icon/>
</div>
</div>
<div class="field mb-3" v-if="order != undefined">
<label class="label is-small">Data zamówienia</label>
<div class="field is-small">
<VueDatePicker
v-model="order.MZN_DataZam"
:enable-time-picker="false"
:clearable="true"
input-class-name="input is-small calendar-background is-static"
menu-class-name="calendar-background"
readonly
hide-input-icon/>
</div>
</div>
</div>
</div>
<div v-for="category in categories" :key="category.Kod">
<div class="box mb-3" v-if="category.isVisible">
<h1 class="is-large mb-3"><b>{{ category.Kod }}</b></h1>
<div class="field" v-for="(product) in category.Towary" :key="product.Twr_Nazwa">
<div v-if="product.Quantity > 0" class="mb-3">
<label class="label is-small">{{ product.Twr_Nazwa }}</label>
<div class="columns is-mobile">
<div class="column">
<div class="field">
<p class="control is-expanded">
<input class="input is-small is-static" type="text" placeholder="Ilość" :value="product.Quantity + ' ' + product.ChosenOption" readonly>
</p>
</div>
</div>
<div class="column" v-if="product.ChosenOption == product.Twr_JM">
<div class="field">
<input
class="input is-small is-static"
type="text"
placeholder="Kwota"
:value="product.Twr_Cena + ' PLN'"
readonly
/>
</div>
</div>
<div class="column" v-else-if="product.ChosenOption == product.Twr_JMZ">
<div class="field">
<input
class="input is-small is-static"
type="text"
placeholder="Kwota"
:value="product.Twr_CenaZ + ' PLN'"
readonly
/>
</div>
</div>
<div class="column" v-if="product.ChosenOption == product.Twr_JM">
<div class="field">
<input
class="input is-small is-static"
type="text"
placeholder="Kwota"
:value="(Number(product.Twr_Cena) * product.Quantity).toFixed(2) + ' PLN'"
readonly
/>
</div>
</div>
<div class="column" v-else-if="product.ChosenOption == product.Twr_JMZ">
<div class="field">
<input
class="input is-small is-static"
type="text"
placeholder="Kwota"
:value="(Number(product.Twr_CenaZ) * product.Quantity).toFixed(2) + ' PLN'"
readonly
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</template>
<style scoped>
</style>