160 lines
4.2 KiB
Vue
160 lines
4.2 KiB
Vue
<script setup>
|
|
|
|
import { v4 as uuidv4 } from 'uuid';
|
|
|
|
const props = defineProps({
|
|
item: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
})
|
|
|
|
const products = ref([])
|
|
const units = ref([])
|
|
|
|
const productSearchInput = {
|
|
placeholder: 'Artikel suchen...'
|
|
}
|
|
|
|
const setup = async () => {
|
|
products.value = await useEntities("products").select()
|
|
units.value = await useEntities("units").selectSpecial()
|
|
}
|
|
|
|
setup()
|
|
|
|
const addProductToMaterialComposition = () => {
|
|
|
|
if(!props.item.materialComposition) props.item.materialComposition = []
|
|
|
|
props.item.materialComposition.push({
|
|
id: uuidv4(),
|
|
unit: 1,
|
|
quantity: 1,
|
|
price: 0,
|
|
})
|
|
calculateTotalMaterialPrice()
|
|
}
|
|
|
|
const removeProductFromMaterialComposition = (id) => {
|
|
props.item.materialComposition = props.item.materialComposition.filter((item) => item.id !== id)
|
|
calculateTotalMaterialPrice()
|
|
}
|
|
|
|
const calculateTotalMaterialPrice = () => {
|
|
let total = 0
|
|
|
|
props.item.materialComposition.forEach((item) => {
|
|
let rowSum = item.quantity * item.price
|
|
total += rowSum
|
|
})
|
|
|
|
props.item.sellingPriceComposed.material = Number(total.toFixed(2))
|
|
props.item.sellingPriceComposed.total = Number((props.item.sellingPriceComposed.worker + props.item.sellingPriceComposed.material).toFixed(2))
|
|
}
|
|
|
|
const setRowData = (row) => {
|
|
let product = products.value.find(i => i.id === row.product)
|
|
|
|
row.unit = product.unit
|
|
row.price = product.selling_price
|
|
|
|
calculateTotalMaterialPrice()
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<UCard class="w-full">
|
|
<UButton
|
|
@click="addProductToMaterialComposition"
|
|
>
|
|
+ Artikel
|
|
</UButton>
|
|
|
|
<div class="mt-3 overflow-x-auto">
|
|
<table class="w-full min-w-[44rem] table-fixed">
|
|
<thead>
|
|
<tr class="border-b border-gray-200 dark:border-gray-800">
|
|
<th class="px-2 py-2 text-left font-medium">Artikel</th>
|
|
<th class="px-2 py-2 text-left font-medium">Menge</th>
|
|
<th class="px-2 py-2 text-left font-medium">Einheit</th>
|
|
<th class="px-2 py-2 text-left font-medium">Verkaufspreis</th>
|
|
<th class="w-12 px-2 py-2"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr
|
|
v-for="product in props.item.materialComposition"
|
|
:key="product.id"
|
|
class="border-b border-gray-100 align-top dark:border-gray-800"
|
|
>
|
|
<td class="px-2 py-2">
|
|
<USelectMenu
|
|
class="w-full"
|
|
:items="products"
|
|
label-key="name"
|
|
value-key="id"
|
|
:search-input="productSearchInput"
|
|
:filter-fields="['name']"
|
|
v-model="product.product"
|
|
:color="product.product ? 'primary' : 'error'"
|
|
@update:model-value="setRowData(product)"
|
|
>
|
|
<template #default>
|
|
{{ products.find(i => i.id === product.product)?.name || 'Kein Artikel ausgewählt' }}
|
|
</template>
|
|
</USelectMenu>
|
|
</td>
|
|
<td class="px-2 py-2">
|
|
<UInput
|
|
class="w-full"
|
|
type="number"
|
|
v-model="product.quantity"
|
|
:step="units.find(i => i.id === product.unit) ? units.find(i => i.id === product.unit).step : 1"
|
|
@change="calculateTotalMaterialPrice"
|
|
/>
|
|
</td>
|
|
<td class="px-2 py-2">
|
|
<USelectMenu
|
|
class="w-full"
|
|
:items="units"
|
|
label-key="name"
|
|
value-key="id"
|
|
v-model="product.unit"
|
|
>
|
|
<template #default>
|
|
{{ units.find(i => i.id === product.unit)?.name || 'Einheit wählen' }}
|
|
</template>
|
|
</USelectMenu>
|
|
</td>
|
|
<td class="px-2 py-2">
|
|
<UInput
|
|
class="w-full"
|
|
type="number"
|
|
v-model="product.price"
|
|
step="0.01"
|
|
@change="calculateTotalMaterialPrice"
|
|
/>
|
|
</td>
|
|
<td class="px-2 py-2">
|
|
<UButton
|
|
icon="i-heroicons-x-mark"
|
|
@click="removeProductFromMaterialComposition(product.id)"
|
|
variant="outline"
|
|
color="error"
|
|
/>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</UCard>
|
|
</template>
|
|
|
|
<style scoped>
|
|
td {
|
|
margin-bottom: 0.5em;
|
|
}
|
|
</style>
|