Document Restructure
Introduced ExternalDevices Settingspage Added DocumentDisplay.vue Component Some Changes to Spaces
This commit is contained in:
@@ -3,18 +3,18 @@ definePageMeta({
|
||||
middleware: "auth"
|
||||
})
|
||||
|
||||
import {StreamBarcodeReader} from "vue-barcode-reader"
|
||||
|
||||
const supabase = useSupabaseClient()
|
||||
|
||||
const spaces = (await supabase.from("spaces").select()).data
|
||||
const movements = (await supabase.from("movements").select()).data
|
||||
const products = (await supabase.from("products").select()).data
|
||||
|
||||
const {spaces, movements, products} = storeToRefs(useDataStore())
|
||||
|
||||
|
||||
const searchinput = ref("")
|
||||
const mode = ref("")
|
||||
|
||||
const toast = useToast()
|
||||
const showReader = ref(false)
|
||||
|
||||
const inventoryChangeData = ref({
|
||||
productId: "",
|
||||
@@ -47,25 +47,41 @@ const createMovement = async () => {
|
||||
} else if (mode.value === 'change'){}
|
||||
|
||||
inventoryChangeData.value = {
|
||||
productId: "",
|
||||
spaceId: "",
|
||||
productId: 0,
|
||||
spaceId: 0,
|
||||
quantity: 0
|
||||
}
|
||||
}
|
||||
|
||||
function checkArticle(productId) {
|
||||
return products.filter(product => product.id === Number(productId)).length > 0;
|
||||
return products.value.filter(product =>product.ean === productId).length > 0;
|
||||
}
|
||||
function checkSpaceId(spaceId) {
|
||||
return spaces.filter(space => space.id === spaceId).length > 0;
|
||||
return spaces.value.filter(space => Number(space.spaceNumber) === Number(spaceId)).length > 0;
|
||||
}
|
||||
|
||||
function changeFocusToSpaceId() {
|
||||
document.getElementById('spaceIdInput').focus()
|
||||
}
|
||||
|
||||
function changeFocusToQuantity() {
|
||||
document.getElementById('quantityInput').focus()
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="main">
|
||||
<router-link to="/inventory/spaces"><UButton>Lagerplätze</UButton></router-link>
|
||||
|
||||
<UModal
|
||||
v-model="showReader"
|
||||
>
|
||||
<StreamBarcodeReader
|
||||
@decode="console.log"
|
||||
@loaded="console.log"
|
||||
/>
|
||||
</UModal>
|
||||
{{inventoryChangeData}}
|
||||
{{spaces}}
|
||||
|
||||
<div class="my-3">
|
||||
<UButton @click="mode = 'incoming'" class="ml-3" >Wareneingang</UButton>
|
||||
@@ -81,8 +97,8 @@ function checkSpaceId(spaceId) {
|
||||
<UInput
|
||||
variant="outline"
|
||||
:color="checkArticle(inventoryChangeData.productId) ? 'primary' : 'rose'"
|
||||
placeholder="Barcode / Suche"
|
||||
v-model="inventoryChangeData.productId"
|
||||
v-on:keyup.enter="changeFocusToSpaceId"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
@@ -90,13 +106,19 @@ function checkSpaceId(spaceId) {
|
||||
label="Lagerplatz:"
|
||||
class="mt-3 w-80"
|
||||
><!--.map(space => {return {id: space.id, name: space.spaceNumber}}-->
|
||||
<USelectMenu
|
||||
<!-- <USelectMenu
|
||||
:options="spaces"
|
||||
searchable
|
||||
option-attribute="spaceNumber"
|
||||
:color="checkSpaceId(inventoryChangeData.spaceId) ? 'primary' : 'rose'"
|
||||
v-model="inventoryChangeData.spaceId"
|
||||
value-attribute="id"
|
||||
/>-->
|
||||
<UInput
|
||||
v-model="inventoryChangeData.spaceId"
|
||||
:color="checkSpaceId(inventoryChangeData.spaceId) ? 'primary' : 'rose'"
|
||||
id="spaceIdInput"
|
||||
v-on:keyup.enter="changeFocusToQuantity"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
@@ -110,6 +132,7 @@ function checkSpaceId(spaceId) {
|
||||
placeholder="Anzahl"
|
||||
v-model="inventoryChangeData.quantity"
|
||||
type="number"
|
||||
id="quantityInput"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UButton
|
||||
@@ -119,6 +142,9 @@ function checkSpaceId(spaceId) {
|
||||
>
|
||||
Bestätigen
|
||||
</UButton>
|
||||
<UButton
|
||||
@click="showReader = true"
|
||||
>show</UButton>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,153 +0,0 @@
|
||||
<script setup>
|
||||
|
||||
definePageMeta({
|
||||
middleware: "auth"
|
||||
})
|
||||
|
||||
const supabase = useSupabaseClient()
|
||||
|
||||
const {spaces,movements,products,units} = storeToRefs(useDataStore())
|
||||
const {movementsBySpace, getProductById} = useDataStore()
|
||||
|
||||
console.log(movements)
|
||||
let selectedItem = ref({})
|
||||
const showCreateSpace = ref(false)
|
||||
|
||||
const selectItem = (item) => {
|
||||
selectedItem.value = item
|
||||
spaceMovements.value = movementsBySpace(item.id)//movements.filter(movement => movement.spaceId === selectedItem.value.id)
|
||||
spaceProducts.value = []
|
||||
spaceMovements.value.forEach(movement => {
|
||||
if(spaceProducts.value.filter(product => product.id === movement.productId).length === 0) spaceProducts.value.push(getProductById(movement.productId))
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
const spaceTypes = ["Regalplatz", "Kiste", "Palettenplatz","KFZ"]
|
||||
|
||||
const createSpaceData = ref({})
|
||||
const createSpace = async () => {
|
||||
let lastSpaceNumber = 0
|
||||
spaces.forEach(space => {
|
||||
if(space.spaceNumber > lastSpaceNumber) lastSpaceNumber = space.spaceNumber
|
||||
})
|
||||
|
||||
const {data,error} = await supabase
|
||||
.from("spaces")
|
||||
.insert([ {...createSpaceData.value, spaceNumber: String(Number(lastSpaceNumber)+1)}])
|
||||
.select()
|
||||
|
||||
console.log(error)
|
||||
|
||||
showCreateSpace.value = false
|
||||
createSpaceData.value = {}
|
||||
|
||||
}
|
||||
|
||||
const spaceProducts = ref([])
|
||||
const spaceMovements = ref([])
|
||||
|
||||
function getSpaceProductCount(productId) {
|
||||
let productMovements = spaceMovements.value.filter(movement => movement.productId === productId)
|
||||
let count = 0;
|
||||
productMovements.forEach(movement => count += movement.quantity)
|
||||
|
||||
return count
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="main">
|
||||
<div id="left">
|
||||
<UButton @click="showCreateSpace = true">
|
||||
Erstellen
|
||||
</UButton>
|
||||
<UModal v-model="showCreateSpace">
|
||||
<UCard>
|
||||
<template #header>
|
||||
Lagerplatz erstellen
|
||||
</template>
|
||||
<UFormGroup
|
||||
label="Beschreibung:"
|
||||
>
|
||||
<UTextarea
|
||||
v-model="createSpaceData.description"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Typ:"
|
||||
>
|
||||
<USelectMenu
|
||||
v-model="createSpaceData.type"
|
||||
:options="spaceTypes"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
<template #footer>
|
||||
<UButton @click="createSpace">Erstellen</UButton>
|
||||
</template>
|
||||
</UCard>
|
||||
</UModal>
|
||||
<a v-for="item in spaces" @click="selectItem(item)">
|
||||
<UCard class="listItem">
|
||||
{{item.spaceNumber}} - {{item.type}}
|
||||
</UCard>
|
||||
</a>
|
||||
</div>
|
||||
<div id="right">
|
||||
<div v-if="selectedItem.id">
|
||||
<UCard>
|
||||
<template #header>
|
||||
<UBadge class="mr-1">{{selectedItem.spaceNumber}}</UBadge>{{selectedItem.type}}
|
||||
</template>
|
||||
{{selectedItem.description}}
|
||||
|
||||
</UCard>
|
||||
<div v-if="spaceProducts.length > 0">
|
||||
<p class="mt-5">Artikel in diesem Lagerplatz</p>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<th>Artikel</th>
|
||||
<th>Anzahl</th>
|
||||
<th>Einheit</th>
|
||||
</tr>
|
||||
<tr v-for="product in spaceProducts">
|
||||
<td>{{product.name}}</td>
|
||||
<td>{{getSpaceProductCount(product.id)}}</td>
|
||||
<td>{{units.find(unit => unit.id === product.unit).name}}</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
#main {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#left {
|
||||
width: 25vw;
|
||||
}
|
||||
|
||||
#right {
|
||||
width: 60vw;
|
||||
padding-left: 3vw;
|
||||
}
|
||||
|
||||
td, th {
|
||||
padding: 1em;
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
241
spaces/pages/inventory/spaces/[mode]/[[id]].vue
Normal file
241
spaces/pages/inventory/spaces/[mode]/[[id]].vue
Normal file
@@ -0,0 +1,241 @@
|
||||
<script setup>
|
||||
import axios from "axios";
|
||||
|
||||
definePageMeta({
|
||||
middleware: "auth"
|
||||
})
|
||||
|
||||
//
|
||||
const supabase = useSupabaseClient()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const toast = useToast()
|
||||
const id = ref(route.params.id ? route.params.id : null )
|
||||
|
||||
|
||||
//Store
|
||||
const {spaces,movements,products,units,ownTenant} = storeToRefs(useDataStore())
|
||||
const {fetchSpaces, getSpaceById, movementsBySpace, getProductById} = useDataStore()
|
||||
|
||||
let currentItem = null
|
||||
|
||||
|
||||
|
||||
//Working
|
||||
const mode = ref(route.params.mode || "show")
|
||||
const itemInfo = ref({
|
||||
spaceNumber: 0
|
||||
})
|
||||
const spaceTypes = ["Regalplatz", "Kiste", "Palettenplatz"]
|
||||
const spaceProducts = ref([])
|
||||
const spaceMovements = ref([])
|
||||
|
||||
//Functions
|
||||
const setupPage = async () => {
|
||||
if(mode.value === "show" || mode.value === "edit"){
|
||||
currentItem = await getSpaceById(Number(useRoute().params.id))
|
||||
console.log(currentItem)
|
||||
|
||||
spaceMovements.value = movementsBySpace(currentItem.id)
|
||||
spaceProducts.value = []
|
||||
spaceMovements.value.forEach(movement => {
|
||||
if(spaceProducts.value.filter(product => product.id === movement.productId).length === 0) spaceProducts.value.push(getProductById(movement.productId))
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
if(mode.value === "edit") itemInfo.value = currentItem
|
||||
|
||||
if(mode.value === "create") {
|
||||
let lastSpaceNumber = 0
|
||||
spaces.value.forEach(space => {
|
||||
if(space.spaceNumber > lastSpaceNumber) lastSpaceNumber = space.spaceNumber
|
||||
})
|
||||
itemInfo.value.spaceNumber = lastSpaceNumber + 1
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
const createItem = async () => {
|
||||
|
||||
|
||||
|
||||
const {data,error} = await supabase
|
||||
.from("spaces")
|
||||
.insert([itemInfo.value])
|
||||
.select()
|
||||
|
||||
if(error) {
|
||||
console.log(error)
|
||||
} else {
|
||||
mode.value = "show"
|
||||
itemInfo.value = {}
|
||||
toast.add({title: "Lagerplatz erfolgreich erstellt"})
|
||||
await fetchSpaces()
|
||||
router.push(`/inventory/spaces/show/${data[0].id}`)
|
||||
setupPage()
|
||||
}
|
||||
}
|
||||
|
||||
const editItem = async () => {
|
||||
router.push(`/inventory/spaces/edit/${currentItem.id}`)
|
||||
setupPage()
|
||||
}
|
||||
|
||||
const cancelEditorCreate = () => {
|
||||
router.push(`/inventory/spaces/`)
|
||||
}
|
||||
|
||||
const updateItem = async () => {
|
||||
const {error} = await supabase
|
||||
.from("spaces")
|
||||
.update(itemInfo.value)
|
||||
.eq('id',itemInfo.value.id)
|
||||
|
||||
if(error) {
|
||||
console.log(error)
|
||||
} else {
|
||||
mode.value = "show"
|
||||
itemInfo.value = {}
|
||||
toast.add({title: "Lagerplatz erfolgreich gespeichert"})
|
||||
fetchSpaces()
|
||||
}
|
||||
}
|
||||
|
||||
function getSpaceProductCount(productId) {
|
||||
let productMovements = spaceMovements.value.filter(movement => movement.productId === productId)
|
||||
let count = 0;
|
||||
productMovements.forEach(movement => count += movement.quantity)
|
||||
|
||||
return count
|
||||
|
||||
}
|
||||
|
||||
const printSpaceLabel = async () => {
|
||||
|
||||
|
||||
|
||||
axios
|
||||
.post(`http://${ownTenant.value.labelPrinterIp}/pstprnt`, `^XA^FO10,20^BCN,100^FD${currentItem.spaceNumber}^XZ` )
|
||||
.then(console.log)
|
||||
.catch(console.log)
|
||||
}
|
||||
|
||||
|
||||
setupPage()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<UCard v-if="currentItem && mode == 'show'" >
|
||||
<template #header>
|
||||
<UBadge>{{currentItem.spaceNumber}}</UBadge> {{currentItem.type}}
|
||||
</template>
|
||||
|
||||
{{currentItem.description}}
|
||||
|
||||
<UDivider
|
||||
class="my-2"
|
||||
/>
|
||||
|
||||
<div v-if="spaceProducts.length > 0">
|
||||
<p class="mt-5">Artikel in diesem Lagerplatz</p>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<th>Artikel</th>
|
||||
<th>Anzahl</th>
|
||||
<th>Einheit</th>
|
||||
</tr>
|
||||
<tr v-for="product in spaceProducts">
|
||||
<td>{{product.name}}</td>
|
||||
<td>{{getSpaceProductCount(product.id)}}</td>
|
||||
<td>{{units.find(unit => unit.id === product.unit).name}}</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
<p v-else>Es befinden sich keine Artikel in diesem Lagerplatz</p>
|
||||
|
||||
|
||||
|
||||
<template #footer>
|
||||
<UButton
|
||||
v-if="mode == 'show' && currentItem.id"
|
||||
@click="editItem"
|
||||
>
|
||||
Bearbeiten
|
||||
</UButton>
|
||||
<UButton
|
||||
v-if="mode == 'show' && currentItem.id"
|
||||
@click="printSpaceLabel"
|
||||
>
|
||||
Label Drucken
|
||||
</UButton>
|
||||
<UButton
|
||||
color="red"
|
||||
class="ml-2"
|
||||
disabled
|
||||
>
|
||||
Archivieren
|
||||
</UButton>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
</UCard>
|
||||
<UCard v-else-if="mode == 'edit' || mode == 'create'" >
|
||||
<template #header>
|
||||
<UBadge>{{itemInfo.spaceNumber}}</UBadge>{{itemInfo.type}}
|
||||
</template>
|
||||
|
||||
<UFormGroup
|
||||
label="Typ:"
|
||||
>
|
||||
<USelectMenu
|
||||
:options="spaceTypes"
|
||||
v-model="itemInfo.type"
|
||||
>
|
||||
|
||||
</USelectMenu>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Beschreibung.:"
|
||||
>
|
||||
<UTextarea
|
||||
v-model="itemInfo.description"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
|
||||
<template #footer>
|
||||
<UButton
|
||||
v-if="mode == 'edit'"
|
||||
@click="updateItem"
|
||||
>
|
||||
Speichern
|
||||
</UButton>
|
||||
<UButton
|
||||
v-else-if="mode == 'create'"
|
||||
@click="createItem"
|
||||
>
|
||||
Erstellen
|
||||
</UButton>
|
||||
<UButton
|
||||
@click="cancelEditorCreate"
|
||||
color="red"
|
||||
class="ml-2"
|
||||
>
|
||||
Abbrechen
|
||||
</UButton>
|
||||
</template>
|
||||
|
||||
</UCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
80
spaces/pages/inventory/spaces/index.vue
Normal file
80
spaces/pages/inventory/spaces/index.vue
Normal file
@@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<div id="main">
|
||||
|
||||
<div class="flex items-center gap-1">
|
||||
<UButton @click="router.push(`/inventory/spaces/create/`)">+ Lagerplatz</UButton>
|
||||
|
||||
<UInput
|
||||
v-model="searchString"
|
||||
placeholder="Suche..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<UTable
|
||||
:rows="filteredRows"
|
||||
:columns="itemColumns"
|
||||
@select="selectItem"
|
||||
|
||||
/>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
definePageMeta({
|
||||
middleware: "auth"
|
||||
})
|
||||
|
||||
|
||||
const router = useRouter()
|
||||
const {spaces } = storeToRefs(useDataStore())
|
||||
const mode = ref("show")
|
||||
|
||||
const itemColumns = [
|
||||
{
|
||||
key: 'spaceNumber',
|
||||
label: "Lagerplatznr.",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: "description",
|
||||
label: "Beschreibung",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: "type",
|
||||
label: "Typ",
|
||||
sortable: true
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
const selectItem = (item) => {
|
||||
console.log(item)
|
||||
router.push(`/inventory/spaces/show/${item.id} `)
|
||||
}
|
||||
|
||||
|
||||
const searchString = ref('')
|
||||
|
||||
const filteredRows = computed(() => {
|
||||
if(!searchString.value) {
|
||||
return spaces.value
|
||||
}
|
||||
|
||||
return spaces.value.filter(item => {
|
||||
return Object.values(item).some((value) => {
|
||||
return String(value).toLowerCase().includes(searchString.value.toLowerCase())
|
||||
})
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user