cssd-doc/cssd-front
1
0
Fork 0
mirror of https://git.meshkee.com/cssd/cssd-front.git synced 2026-10-13 01:43:18 +03:30
Code Issues Packages Projects Releases Wiki Activity

fix: refactor and optimize the label component and better name existing elements

Browse Source
This commit is contained in:
Al-Khalsi
2025-12-01 12:13:01 +03:30
parent 4ecc7c7352
commit ae70cddcbf
2 changed files with 4090 additions and 6996 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+3605 -6713
View File
File diff suppressed because it is too large Load Diff
src/components/modal/label/Show.vue
+485 -283
View File
@@ -1,306 +1,508 @@
<template> <template>
<v-container grid-list-xs> <v-container grid-list-xs>
<material-card color="black" title="Show Label"> <material-card color="black" title="Show Label">
<v-layout align-left justify-left wrap class="px-3 my-3"> <v-layout align-left justify-left wrap class="px-3 my-3">
<h3 class="mt-0">Label</h3> <h3 class="mt-0">Label</h3>
<v-flex xs12> <v-flex xs12>
<hr class="v-divider theme--light"> <hr class="v-divider theme--light" />
</v-flex> </v-flex>
<v-layout id="printMe"> <v-layout id="printMe">
<v-flex xs12 md12 sm12> <v-flex xs12 md12 sm12>
<!-- ________ row1::Begin ________ --> <!-- ________ row1::Begin ________ -->
<v-layout row wrap> <v-layout row wrap class="rowP">
<!-- ________ Column1::Begin ________ --> <!-- ________ Column1::Begin ________ -->
<v-flex xs6 md6 sm6> <v-flex xs6 md6 sm6>
<v-layout row wrap class=""> <v-layout row wrap class="all-content">
<v-flex xs12 md12 sm12> <v-flex xs12 md12 sm12>
<div class="WM-d-flex"> <div class="WM-d-flex">
<span class="headline ml-1 mb-1" style="letter-spacing:0 !important"> <span
{{ (data.user && data.user.medical_center) ? data.user.medical_center.name : "" }} class="headline ml-1 mb-1 bold-text"
</span> style="letter-spacing: 0 !important"
</div> >
</v-flex> {{
<v-flex xs12 md12 sm12 class=""> data.user && data.user.medical_center
<div class="WM-d-flex"> ? data.user.medical_center.name
<v-icon class="WMi-location"/> : ""
<span class="headline ml-1 mb-1" }}
style="letter-spacing:0 !important">{{ data.package.name }}</span> </span>
</div> </div>
</v-flex> </v-flex>
<v-flex xs12 md12 sm12> <v-flex xs12 md12 sm12 class="">
<div class="WM-d-flex"> <div class="WM-d-flex">
<v-icon class="WMi-Industry"/> <v-icon class="WMi-location" />
<span class="headline ml-2 mb-1" <span
style="letter-spacing:0 !important">{{ data.sterile_date }}</span> class="headline ml-1 mb-1 bold-text"
</div> style="letter-spacing: 0 !important"
</v-flex> >{{ data.package.name }}</span
<v-flex xs12 md12 sm12> >
<div class="WM-d-flex"> </div>
<v-icon class="WMi-hourglass"/> </v-flex>
<span class="headline ml-2 mb-1" <v-flex xs12 md12 sm12>
style="letter-spacing:0 !important">{{ data.expire_date }}</span> <div class="WM-d-flex">
</div> <v-icon class="WMi-Industry" />
</v-flex> <span
<v-flex xs12 md12 sm12> class="headline ml-2 mb-1 bold-text"
<div class="WM-d-flex"> style="letter-spacing: 0 !important"
<v-icon class="WMi-user"/> >{{ data.sterile_date }}</span
<span class="headline ml-2 mb-1" style="letter-spacing:0 !important"> >
{{ data.user ? data.user.name : '' }} </div>
</span> </v-flex>
</div> <v-flex xs12 md12 sm12>
</v-flex> <div class="WM-d-flex">
</v-layout> <v-icon class="WMi-hourglass" />
</v-flex> <span
<!-- ________ Column1::End ________ --> class="headline ml-2 mb-1 bold-text"
<!-- ________ Column2::Begin ________ --> style="letter-spacing: 0 !important"
<v-flex xs6 md6 sm6> >{{ data.expire_date }}</span
<v-layout row wrap class="WM-Align-R mt-2"> >
<v-flex xs12 v-if="QRCodeimg"> </div>
<a :href="'https://www.cssd-doc.com/Show/Label/'+data.id+''" </v-flex>
target="_blank"> <v-flex xs12 md12 sm12>
<img :src="QRCodeimg" class="WM-Width-120"> <div class="WM-d-flex">
</a> <v-icon class="WMi-user" />
</v-flex> <span
<v-flex xs12 md12 sm12> class="headline ml-2 mb-1 bold-text"
<div class> style="letter-spacing: 0 !important"
<span class="title">Sterilizer ID :</span> >
<span class="headline ml-1 mb-1" {{ data.user ? data.user.name : "" }}
style="letter-spacing:0 !important">{{ data.sterilizer_id }}</span> </span>
</div> </div>
</v-flex> </v-flex>
<v-flex xs12 md12 sm12> <!-- Add Sterilizer ID and Cycle No to left column -->
<div class> <v-flex xs12 md12 sm12>
<span class="title">Cycle No :</span> <div class="content-th">
<span class="headline ml-2 mb-1" <span class="title">Sterilizer ID:</span>
style="letter-spacing:0 !important">{{ data.cycle_number }}</span> <span
</div> class="headline ml-1 mb-1 bold-text"
</v-flex> style="letter-spacing: 0 !important"
</v-layout> >{{ data.sterilizer_id }}</span
</v-flex> >
<!-- ________ Column2::End ________ --> </div>
</v-layout> </v-flex>
<!-- ________ row1::Begin ________ --> <v-flex xs12 md12 sm12>
<div class="content-th">
<span class="title">Cycle No:</span>
<span
class="headline ml-2 mb-1 bold-text"
style="letter-spacing: 0 !important"
>{{ data.cycle_number }}</span
>
</div>
</v-flex>
</v-layout>
</v-flex>
<!-- ________ Column1::End ________ -->
<!-- ________ Column2::Begin ________ -->
<v-flex xs6 md6 sm6>
<v-layout row wrap class="WM-Align-R mt-2">
<!-- QR Code only in right column -->
<v-flex xs12 v-if="QRCodeimg">
<a
:href="
'https://www.cssd-doc.com/Show/Label/' + data.id + ''
"
target="_blank"
>
<img :src="QRCodeimg" class="QRCodeClass" />
</a>
</v-flex>
</v-layout>
</v-flex>
<!-- ________ Column2::End ________ -->
</v-layout>
<!-- ________ row1::Begin ________ -->
<!-- ________ row2::Begin ________ -->
<!-- ________ row2::Begin ________ --> <v-layout row wrap>
<v-layout row wrap> <v-flex xs12 md12 sm12>
<v-flex xs12 md12 sm12> <div class="BotSection" style="text-align: center">
<div class="mt-4" style="text-align:center"> <v-layout row wrap>
<v-layout row wrap> <v-flex xs6 md12 sm12 v-if="barcodeimg">
<v-flex xs6 md12 sm12 v-if="barcodeimg"> <img :src="barcodeimg" class="BarcodeClass" />
<img :src="barcodeimg" class="WM-Width-350"><br/> <!-- <span class="dataId">{{ data.id }}</span> -->
<span>{{ data.id }}</span>
</v-flex>
</v-layout>
</div>
</v-flex>
</v-layout>
<!-- ________ row2::End ________ -->
</v-flex> </v-flex>
</v-layout> </v-layout>
</div>
</v-flex>
</v-layout> </v-layout>
<v-layout align-left justify-left wrap class="px-3 my-3"> <!-- ________ row2::End ________ -->
<h3 class="ml-3">Package</h3> </v-flex>
<v-flex xs12> </v-layout>
<hr class="v-divider theme--light"> </v-layout>
</v-flex> <v-layout align-left justify-left wrap class="px-3 my-3">
<v-layout row wrap class="mx-3"> <h3 class="ml-3">Package</h3>
<template> <v-flex xs12>
<v-expansion-panel class="WM-Panel"> <hr class="v-divider theme--light" />
<v-expansion-panel-content> </v-flex>
<template v-slot:header> <v-layout row wrap class="mx-3">
<v-layout row class="CSSD-font"> <template>
<v-layout row class="pl-2"> <v-expansion-panel class="WM-Panel">
<v-flex xs12 sm6 md4> <v-expansion-panel-content>
<span class="sub-text">Package ID:</span> {{ data.package.id }} <template v-slot:header>
</v-flex> <v-layout row class="CSSD-font">
<v-flex xs12 sm6 md8 class="d-flex"> <v-layout row class="pl-2">
<div> <v-flex xs12 sm6 md4>
<span class="sub-text">Package Name:</span> {{ data.package.name }} <span class="sub-text">Package ID:</span>
</div> {{ data.package.id }}
<v-spacer/> </v-flex>
<a :href="'https://www.cssd-doc.com/Show/Package/' + data.package.id + ''" <v-flex xs12 sm6 md8 class="d-flex">
target="_blank" style="max-width: fit-content;"> <div>
<v-tooltip bottom open-on-hover> <span class="sub-text">Package Name:</span>
<template v-slot:activator="{ on, attrs }"> {{ data.package.name }}
<v-btn v-bind="attrs" v-on="on" @click.stop.native="" </div>
color="WM-Tooltip-Btn WM-Outline-Btn WM-Border WM-Margin-BT-0 WM-Border-Black mr-2"> <v-spacer />
<v-icon class="black--text caption">fas fa-search <a
</v-icon> :href="
</v-btn> 'https://www.cssd-doc.com/Show/Package/' +
</template> data.package.id +
<span>Filter</span> ''
</v-tooltip> "
</a> target="_blank"
</v-flex> style="max-width: fit-content"
</v-layout> >
</v-layout> <v-tooltip bottom open-on-hover>
</template> <template v-slot:activator="{ on, attrs }">
<v-card> <v-btn
<v-card-text>note : {{ data.package.note }}</v-card-text> v-bind="attrs"
<v-card-text v-if="data.package.items && data.package.items.length"> v-on="on"
Items : @click.stop.native=""
<v-expansion-panel class="WM-Panel" v-for="(item, key) in data.package.items" color="WM-Tooltip-Btn WM-Outline-Btn WM-Border WM-Margin-BT-0 WM-Border-Black mr-2"
:key="key"> >
<v-expansion-panel-content> <v-icon class="black--text caption"
<template v-slot:header> >fas fa-search
<v-layout row class="CSSD-font"> </v-icon>
<span class="item-counter">{{ key + 1 }}</span> </v-btn>
<v-layout row class="pl-2"> </template>
<v-flex xs12 sm6 md3> <span>Filter</span>
<span class="sub-text">Item ID:</span> {{ item.id }} </v-tooltip>
</v-flex> </a>
<v-flex xs12 sm6 md5> </v-flex>
<span class="sub-text">Item Name:</span> {{ item.name }} </v-layout>
</v-flex> </v-layout>
<v-flex xs12 sm6 md4 v-if="item.pivot"> </template>
<span class="sub-text">Item Pivot counter:</span> <v-card>
{{ item.pivot.count }} <v-card-text>note : {{ data.package.note }}</v-card-text>
</v-flex> <v-card-text
</v-layout> v-if="data.package.items && data.package.items.length"
</v-layout> >
<!-- <div>{{ item.name }} ({{ item.pivot.count }})</div>--> Items :
</template> <v-expansion-panel
<v-card> class="WM-Panel"
<v-card-text>note : {{ item.note }}</v-card-text> v-for="(item, key) in data.package.items"
</v-card> :key="key"
</v-expansion-panel-content> >
</v-expansion-panel> <v-expansion-panel-content>
</v-card-text> <template v-slot:header>
</v-card> <v-layout row class="CSSD-font">
</v-expansion-panel-content> <span class="item-counter">{{ key + 1 }}</span>
</v-expansion-panel> <v-layout row class="pl-2">
</template> <v-flex xs12 sm6 md3>
</v-layout> <span class="sub-text">Item ID:</span>
</v-layout> {{ item.id }}
<v-layout row wrap align-center justify-center class="px-3"> </v-flex>
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black" style="padding:10px 60px" <v-flex xs12 sm6 md5>
@click="closeModal"> <span class="sub-text">Item Name:</span>
<v-icon class="black--text mr-2 caption">fas fa-times</v-icon> {{ item.name }}
<span class="black--text">Close</span> </v-flex>
</v-btn> <v-flex xs12 sm6 md4 v-if="item.pivot">
<v-spacer/> <span class="sub-text"
<v-btn class="WM-CyanBlueGradient-BG" @click="print" style="padding:10px 60px"> >Item Pivot counter:</span
<v-icon class="white--text mr-2 caption">fas fa-print</v-icon> >
<span class="white--text">Print</span> {{ item.pivot.count }}
</v-btn> </v-flex>
</v-layout> </v-layout>
</material-card> </v-layout>
</v-container> </template>
<v-card>
<v-card-text>note : {{ item.note }}</v-card-text>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
</v-card-text>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
</template>
</v-layout>
</v-layout>
<v-layout row wrap align-center justify-center class="px-3">
<v-btn
class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black"
style="padding: 10px 60px"
@click="closeModal"
>
<v-icon class="black--text mr-2 caption">fas fa-times</v-icon>
<span class="black--text">Close</span>
</v-btn>
<v-spacer />
<v-btn
class="WM-CyanBlueGradient-BG"
@click="print"
style="padding: 10px 60px"
>
<v-icon class="white--text mr-2 caption">fas fa-print</v-icon>
<span class="white--text">Print</span>
</v-btn>
</v-layout>
</material-card>
</v-container>
</template> </template>
<style media="screen"> <style media="screen">
.WM-d-flex { .WM-d-flex {
display: flex; display: flex;
} }
</style> </style>
<script> <script>
import {mapGetters, mapMutations} from "vuex"; import { mapGetters, mapMutations } from "vuex";
import {ApiService} from "@/services"; import { ApiService } from "@/services";
import {urls} from "@/config/urls"; import { urls } from "@/config/urls";
export default { export default {
data: () => ({ data: () => ({
data: {}, data: {},
QRCodeimg: '', QRCodeimg: "",
barcodeimg: '' barcodeimg: "",
}),
}), methods: {
methods: { ...mapMutations("modal", ["closeModal", "setResultModal"]),
...mapMutations("modal", ["closeModal", "setResultModal"]), // async verify(id) {
// async verify(id) { // const result = await ApiService.post(urls.verifyPackage(id));
// const result = await ApiService.post(urls.verifyPackage(id)); // if (result && result.status == 200) {
// if (result && result.status == 200) { // this.setResultModal(result.data.data);
// this.setResultModal(result.data.data); // this.closeModal();
// this.closeModal(); // }
// } // },
// }, async generateQRcodePackage(packageId) {
async generateQRcodePackage(packageId) { const result = await ApiService.post(urls.packageQRCode(packageId));
const result = await ApiService.post(urls.packageQRCode(packageId)); if (result && result.status == 200) {
if (result && result.status == 200) { this.QRCodeimg = result.data.data.QRCode
this.QRCodeimg = result.data.data.QRCode ? result.data.data.QRCode : null; ? result.data.data.QRCode
} : null;
}, }
async generateBarcode(labelId) {
const result = await ApiService.post(urls.Barcode(labelId, 'Label'));
if (result && result.status == 200) {
this.barcodeimg = result.data.data.Barcode ? result.data.data.Barcode : null;
}
},
print() {
const prtHtml = document.getElementById("printMe").innerHTML;
// Get all stylesheets HTML
let stylesHtml = "";
for (const node of [
...document.querySelectorAll('link[rel="stylesheet"], style')
]) {
stylesHtml += node.outerHTML;
}
// Add custom styles for label printing
const labelStyles = `<style>
@page {
size: auto;
margin: 0;
}
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#printMe {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
</style>`;
// Open the print window
const WinPrint = window.open(
"",
"",
"left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0"
);
WinPrint.document.write(`<!DOCTYPE html><html><head> ${stylesHtml} ${labelStyles} <title>Print Label</title> </head><body>${prtHtml}</body> </html> `);
WinPrint.document.close();
WinPrint.focus();
// Delay print to ensure content is loaded
setTimeout(() => {
WinPrint.print();
WinPrint.close();
}, 500);
}
}, },
created() { async generateBarcode(labelId) {
this.data = this.getModalProperties.result.data.data; const result = await ApiService.post(urls.Barcode(labelId, "Label"));
this.generateQRcodePackage(this.data.package.id); if (result && result.status == 200) {
this.generateBarcode(this.data.id); this.barcodeimg = result.data.data.Barcode
? result.data.data.Barcode
: null;
}
}, },
computed: { print() {
...mapGetters("modal", ["getModalProperties"]) const prtHtml = document.getElementById("printMe").innerHTML;
}
// Get all stylesheets HTML
let stylesHtml = "";
for (const node of [
...document.querySelectorAll('link[rel="stylesheet"], style'),
]) {
stylesHtml += node.outerHTML;
}
const labelStyles = `<style media="print">
@page {
size: aotu !important;
margin: 100px 0 0 !important;
padding: 0 !important;
}
* {
box-sizing: border-box !important;
page-break-inside: avoid !important;
}
body {
margin: 0 !important;
padding: 0.5mm !important;
font-family: Arial, sans-serif !important;
width: 65mm !important;
height: 80mm !important;
overflow: hidden !important;
text-align: center !important;
}
#printMe {
width: 100% !important;
height: 100% !important;
max-height: 80mm !important;
overflow: hidden !important;
margin: 0 auto !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
align-items: center !important;
transform: scale(1) !important;
transform-origin: center !important;
page-break-after: avoid !important;
}
#printMe > .v-flex {
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
height: 100% !important;
width: 100% !important;
}
#printMe > .v-flex > .v-layout:last-of-type {
margin-top: auto !important;
flex-shrink: 0 !important;
}
.v-layout {
display: flex !important;
flex-wrap: wrap !important;
width: 100% !important;
justify-content: center !important;
align-items: flex-start !important;
page-break-inside: avoid !important;
}
.v-flex {
flex: 1 1 45% !important;
padding: 0.2mm !important;
margin: 0.1mm !important;
text-align: left !important;
min-height: 0 !important;
page-break-inside: avoid !important;
}
.BotSection .v-flex {
flex: 0 0 100% !important;
width: 100% !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
.content-th {
display: flex !important;
align-items: baseline !important;
margin: 1px 0 !important;
}
.headline {
font-size: 12px !important;
line-height: 1 !important;
margin: 0px 0 0 !important;
padding: 3px 0 0 !important;
color: black !important;
white-space: nowrap !important;
}
.bold-text {
font-weight: bold !important;
}
.title {
font-size: 10px !important;
color: black !important;
margin: 0 0 4px !important;
padding: 0 !important;
font-weight: bold !important;
}
/* Right column alignment for QR code */
.WM-Align-R {
position: relative !important;
align-items: flex-start !important;
justify-content: flex-end !important;
height: 100% !important;
}
.QRCodeClass {
max-width: 20mm !important;
max-height: 20mm !important;
object-fit: scale-down !important;
margin: 0 auto !important;
}
.BarcodeClass {
max-width: 30mm !important;
max-height: 12mm !important;
object-fit: scale-down !important;
margin: 0 auto 0.5mm auto !important;
display: block !important;
}
.dataId {
font-size: 8px;
margin-top: 0 !important;
margin-bottom: 0 !important;
display: block !important;
}
.BotSection {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
margin-top: 0 !important;
text-align: center !important;
width: 100% !important;
}
hr {
display: none !important;
}
img {
max-width: 100% !important;
height: auto !important;
image-rendering: crisp-edges !important;
}
.rowP {
margin: 0 4mm;
}
/* Adjust spacing for better layout */
.WMi-location, .WMi-Industry, .WMi-hourglass, .WMi-user {
font-size: 8px !important;
width: 8px !important;
height: 8px !important;
margin-right: 2mm !important;
margin-top: 0.3mm !important;
}
/* Column specific adjustments */
#printMe > .v-flex > .v-layout > .v-flex:first-child {
flex: 1 1 60% !important;
}
#printMe > .v-flex > .v-layout > .v-flex:last-child {
flex: 1 1 40% !important;
text-align: center !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
</style>`;
// Open the print window
const WinPrint = window.open(
"",
"",
"left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0"
);
WinPrint.document.write(
`<!DOCTYPE html><html><head> ${stylesHtml} ${labelStyles} <title>Print Label</title> </head><body>${prtHtml}</body> </html> `
);
WinPrint.document.close();
WinPrint.focus();
// Delay print to ensure content is loaded
setTimeout(() => {
WinPrint.print();
WinPrint.close();
}, 500);
},
},
created() {
this.data = this.getModalProperties.result.data.data;
this.generateQRcodePackage(this.data.package.id);
this.generateBarcode(this.data.id);
},
computed: {
...mapGetters("modal", ["getModalProperties"]),
},
}; };
</script> </script>
<style scoped> <style scoped>
.item-counter { .item-counter {
font-size: 44px; font-size: 44px;
opacity: .3; opacity: 0.3;
font-family: 'Montserrat-Bold'; font-family: "Montserrat-Bold";
line-height: 44px; line-height: 44px;
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
color: #b7b7b7; color: #b7b7b7;
} }
.sub-text { .sub-text {
font-size: 12px; font-size: 12px;
} }
</style> </style>