funjia/print-tag-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 新增硬盘信息标签

Browse Source
This commit is contained in:
funjia
2025-08-17 13:42:13 +08:00
parent b908ed3aed
commit 555b98b13e
3 changed files with 257 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Error.vue
+40 -2
View File
@@ -1,10 +1,15 @@
<template>
<div class="print-area border">
<div class="item" style="display: block;">
<div :class="'print-area ' + (isShow ? 'border' : '')" @dblclick="onDblClick">
<div :class="'item ' + (isShow ? 'show' : 'hide')">
<div class="tag">{{ config.title }}</div>
<div class="reason" style="font-size: 4mm;margin-top: 2mm;">{{ config.reason }}</div>
<div class="time">{{ config.time }}</div>
</div>
<div class="id">
<span>
{{ id }}
</span>
</div>
</div>
</template>
<script setup>
@@ -115,4 +120,37 @@ export const initialValues = {
height: calc(100% - 6mm);
margin: 0;
}
.id {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 2cm;
pointer-events: none;
color: #87CEFA60;
}
.id span {
/* display: block;
margin: 0 auto; */
}
@media print {
.id * {
visibility: hidden !important;
}
.hide * {
visibility: hidden !important;
}
.show {
visibility: visible;
}
}
</style>
src/components/HardDisk.vue
+208
View File
@@ -0,0 +1,208 @@
<template>
<div :class="'print-area ' + (isShow ? 'border' : '')" @dblclick="onDblClick">
<div :class="'item ' + (isShow ? 'show' : 'hide')">
<div class='left-content'>
<img class='qrcode' src='\qrcode.png'>
<div>长沙加零</div>
<div>17373135368</div>
</div>
<div class="right-content">
<div>{{ config.system }}</div>
<div>{{ config.partition }}</div>
<div>{{ config.hardDisk }}</div>
<div>{{ config.brand }}</div>
</div>
</div>
<div class="id">
<span>
{{ id }}
</span>
</div>
</div>
</template>
<script setup>
import { reactive, ref } from 'vue';
const isShow = ref(true);
const props = defineProps(['id', 'config']);
const onDblClick = () => {
isShow.value = !isShow.value;
}
</script>
<script>
export const formSchema = {
formItems: [
{
type: 'select',
label: '系统',
key: 'system',
options: [
{ label: 'win10', value: 'win10' },
{ label: 'win7', value: 'win7' },
{ label: 'win11', value: 'win11' }
]
},
{
type: 'select',
label: '分区',
key: 'partition',
options: [
{ label: 'MBR', value: 'MBR' },
{ label: 'GPT', value: 'GPT' }
]
},
{
type: 'select',
label: '硬盘',
key: 'hardDisk',
options: [
{ label: '120G', value: '120G' },
{ label: '128G', value: '128G' },
{ label: '256G', value: '256G' },
{ label: '240G', value: '240G' },
{ label: '512G', value: '512G' },
{ label: '480G', value: '480G' },
{ label: '1TB', value: '1TB' },
{ label: '960G', value: '960G' }
]
},
{
type: 'select',
label: '品牌',
key: 'brand',
options: [
{ label: '泽域', value: '泽域' },
{ label: '华鑫云', value: '华鑫云' },
{ label: '昂达', value: '昂达' },
{ label: '金士顿', value: '金士顿' },
{ label: '其它', value: '其它' }
]
}
]
};
export const initialValues = {
system: "win10",
partition:"MBR",
hardDisk: "256G",
brand: "泽域"
}
</script>
<style>
.print-area {
/* border: 0.1mm dashed #87CEFA; */
display: flex;
justify-content: center;
align-content: flex-start;
margin: 0.25mm;
cursor: pointer;
user-select: none;
position: relative;
}
.hide {
visibility: hidden;
}
.show {
visibility: visible;
}
.border {
border: 0.1mm dashed #87CEFA;
}
.print-area:nth-child(41),
.print-area:nth-child(42),
.print-area:nth-child(43),
.print-area:nth-child(44) {
padding-bottom: 4mm;
}
.print-area:nth-child(41) .qrcode,
.print-area:nth-child(42) .qrcode,
.print-area:nth-child(43) .qrcode,
.print-area:nth-child(44) .qrcode {
height: calc(100% - 5mm);
}
.item {
height: 100%;
width: 100%;
display: flex;
flex-wrap: wrap;
}
.tag {
color: red;
font-size: 0.8cm;
}
.reason,
.time {
font-size: 4mm;
}
/*Styling below is used just for positioning the items inside the label. */
.left-content {
width: 24mm;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
height: inherit;
font-size: 3mm;
line-height: 3mm;
color: #87CEFA;
}
.right-content {
display: grid;
font-size: 4mm;
align-items: center;
justify-content: center;
height: 100%;
width: auto;
}
.qrcode {
height: calc(100% - 6mm);
margin: 0;
}
.id {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 2cm;
pointer-events: none;
color: #87CEFA60;
}
.id span {
/* display: block;
margin: 0 auto; */
}
@media print {
.id * {
visibility: hidden !important;
}
.hide * {
visibility: hidden !important;
}
.show {
visibility: visible;
}
}
</style>
src/components/Main.vue
+9 -2
View File
@@ -37,6 +37,7 @@ import G3260_8G_120G, {
} from './G3260_8G_120G.vue';
import All_in_one_22_4G_120G, { formSchema as formSchema_22AllInOne, initialValues as initialValues_22AllInOne } from "./22寸一体机_4G_120G.vue";
import All_in_one_24_8G_256G, { formSchema as formSchema_24AllInOne, initialValues as initialValues_24AllInOne } from "./24寸一体机_I5_3代_8G_256G.vue";
import HardDisk, { formSchema as formSchema_HardDisk, initialValues as initialValues_HardDisk } from "./HardDisk.vue";
import DynamicForm from './DynamicForm.vue';
import Input from './Input/Index.vue';
@@ -60,12 +61,12 @@ const people = reactive([
formData: initialValues_I59400F
},
{
label: 'I54590_8G_120G',
label: 'I5_4590_8G_120G',
formSchema: formSchema_I54590,
formData: initialValues_I54590
},
{
label: 'I34130_8G_120G',
label: 'I3_4130_8G_120G',
formSchema: formSchema_I34130,
formData: initialValues_I34130
},
@@ -84,6 +85,11 @@ const people = reactive([
formSchema: formSchema_22AllInOne,
formData: initialValues_22AllInOne
},
{
label: 'HardDisk',
formSchema: formSchema_HardDisk,
formData: initialValues_HardDisk
},
{
label: 'Error',
formSchema: formSchema_Error,
@@ -128,6 +134,7 @@ const getComponent = (item) => {
case '24寸一体机_I5_3代_8G_256G': return All_in_one_24_8G_256G;
case '22寸一体机_4G_120G': return All_in_one_22_4G_120G;
case 'Error': return Error;
case 'HardDisk': return HardDisk;
default: return Error;
}
}