167 lines
4.7 KiB
Vue
167 lines
4.7 KiB
Vue
<template>
|
|
<v-dialog v-model="menuBarcode" width="900">
|
|
<v-card>
|
|
<v-card-item class="bg-primary py-3 elevation-6">
|
|
<v-card-title>
|
|
{{ $t("message.barcode.title") }}
|
|
</v-card-title>
|
|
</v-card-item>
|
|
<v-card-text class="pt-5">
|
|
<v-data-table
|
|
:headers="headers"
|
|
:items="printItem"
|
|
hide-default-footer
|
|
height="200"
|
|
>
|
|
<template v-slot:headers="{ columns }">
|
|
<tr>
|
|
<template v-for="column in columns" :key="column.key">
|
|
<td
|
|
:class="[
|
|
'bg-primary-lighten',
|
|
column.class,
|
|
{ 'd-flex justify-center': column.key === 'checkbox' },
|
|
]"
|
|
:style="{ minWidth: column.width, textAlign: column.align }"
|
|
>
|
|
<template v-if="column.key === 'checkbox'">
|
|
<v-checkbox
|
|
v-model="allSelected"
|
|
color="primary"
|
|
:indeterminate="someSelected"
|
|
@update:modelValue="selectAll(!allSelected)"
|
|
></v-checkbox>
|
|
</template>
|
|
<template v-else>
|
|
<span>{{ column.title }}</span>
|
|
</template>
|
|
</td>
|
|
</template>
|
|
</tr>
|
|
</template>
|
|
<template v-slot:item="{ item }">
|
|
<tr>
|
|
<td class="d-flex justify-center">
|
|
<v-checkbox
|
|
v-model="selected"
|
|
color="primary"
|
|
:value="item"
|
|
@update:modelValue="onSomeSelected()"
|
|
></v-checkbox>
|
|
</td>
|
|
<td>
|
|
<p class="font-weight-medium">{{ item.specimen }}</p>
|
|
</td>
|
|
<td>
|
|
<p class="font-weight-medium">{{ item.barcode }}</p>
|
|
</td>
|
|
<td>
|
|
<p class="w-100 d-flex justify-center cursor-pointer">
|
|
<iconify-icon
|
|
style="font-size: 1.5rem; color: #00bcd4"
|
|
icon="fluent:print-48-regular"
|
|
></iconify-icon>
|
|
</p>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</v-data-table>
|
|
</v-card-text>
|
|
|
|
<v-card-actions class="d-flex justify-space-between px-7">
|
|
<v-btn
|
|
:text="$t('message.barcode.close')"
|
|
variant="text"
|
|
class="text-error"
|
|
@click="onCloseMenuBarcode()"
|
|
></v-btn>
|
|
<div>
|
|
<v-btn
|
|
:text="$t('message.barcode.printRobo')"
|
|
variant="flat"
|
|
class="bg-info text-white"
|
|
@click="onCloseMenuBarcode()"
|
|
></v-btn>
|
|
<v-btn
|
|
:text="$t('message.barcode.printSelected')"
|
|
variant="flat"
|
|
class="bg-secondary-darken text-white"
|
|
@click="onCloseMenuBarcode()"
|
|
></v-btn>
|
|
</div>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "BarcodeDialog",
|
|
data() {
|
|
return {
|
|
selected: [],
|
|
allSelected: false,
|
|
someSelected: false,
|
|
headers: [
|
|
{
|
|
title: "",
|
|
key: "checkbox",
|
|
align: "center",
|
|
sortable: false,
|
|
width: "10%",
|
|
class: "",
|
|
},
|
|
{
|
|
title: this.$t("message.barcode.specimen"),
|
|
key: "specimen",
|
|
align: "start",
|
|
sortable: false,
|
|
width: "30%",
|
|
class: "font-weight-bold",
|
|
},
|
|
{
|
|
title: this.$t("message.barcode.barcode"),
|
|
key: "barcode",
|
|
align: "start",
|
|
sortable: false,
|
|
width: "30%",
|
|
class: "font-weight-bold",
|
|
},
|
|
{
|
|
title: this.$t("message.barcode.action"),
|
|
key: "action",
|
|
align: "center",
|
|
sortable: false,
|
|
width: "30%",
|
|
class: "font-weight-bold",
|
|
},
|
|
],
|
|
};
|
|
},
|
|
computed: {
|
|
menuBarcode() {
|
|
return this.$store.state.collection.menuBarcode;
|
|
},
|
|
printItem() {
|
|
return this.$store.state.collection.printItem;
|
|
},
|
|
},
|
|
methods: {
|
|
onCloseMenuBarcode() {
|
|
this.$store.commit("setMenuBarcode", false);
|
|
},
|
|
selectAll(boolean) {
|
|
if (!boolean) this.selected = this.printItem;
|
|
else this.selected = [];
|
|
},
|
|
onSomeSelected() {
|
|
this.someSelected =
|
|
this.selected.length !== 0 &&
|
|
this.selected.length !== this.printItem.length;
|
|
if (this.selected.length === this.printItem.length)
|
|
this.allSelected = true;
|
|
},
|
|
},
|
|
};
|
|
</script>
|