fengyuan_yang
/
boying-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

2026-01-04 

固定载具打印
master
fengyuan_yang 1 week ago
parent
4ad694e64f
commit
6c1af0fa21
1 changed files with 419 additions and 39 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 414
      src/views/modules/fixedCarrier/fixedCarrier.vue

414
src/views/modules/fixedCarrier/fixedCarrier.vue
View File

@ -1,9 +1,37 @@
<template>
<div class="mod-config">
<!-- 条件查询 -->
<el-form :inline="true" label-position="top" :model="searchData">
<el-card :class="['search-card', { 'collapsed': !searchExpanded }]" shadow="hover">
<div slot="header" class="search-header">
<div class="header-left">
<i class="el-icon-search"></i>
<span class="header-title">查询条件</span>
</div>
<div class="header-right">
<el-button
type="text"
size="small"
@click="toggleSearchExpand"
class="collapse-btn">
<span>{{ searchExpanded ? '收起' : '展开' }}</span>
<i :class="searchExpanded ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
</el-button>
</div>
</div>
<el-form
:inline="true"
label-position="top"
:model="searchData"
class="search-form"
@keyup.enter.native="getDataList">
<!-- 所有查询条件 - 可展开/收起 -->
<template v-if="searchExpanded">
<el-row :gutter="16">
<el-col :span="4">
<el-form-item label="BU">
<el-select v-model="searchData.buDesc" placeholder="请选择" clearable style="width: 100px">
<el-select v-model="searchData.buDesc" placeholder="请选择" clearable>
<el-option
v-for="i in userBuList"
:key="i.buNo"
@ -12,14 +40,20 @@
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="标签条码">
<el-input v-model="searchData.carrierNo" clearable style="width: 150px"></el-input>
<el-input v-model="searchData.carrierNo" placeholder="请输入标签条码" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="载具类型名称">
<el-input v-model="searchData.carrierTypeName" clearable style="width: 150px"></el-input>
<el-input v-model="searchData.carrierTypeName" placeholder="请输入载具类型名称" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="状态">
<el-select v-model="searchData.status" placeholder="请选择" clearable style="width: 100px">
<el-select v-model="searchData.status" placeholder="请选择" clearable>
<el-option label="空闲" :value="1"></el-option>
<el-option label="占用" :value="2"></el-option>
<el-option label="维修" :value="3"></el-option>
@ -27,12 +61,53 @@
<el-option label="外借" :value="5"></el-option>
</el-select>
</el-form-item>
<el-form-item label=" ">
<el-button type="primary" @click="getDataList()">查询</el-button>
<el-button type="primary" @click="addModal()">新增</el-button>
<el-button type="primary" @click="exportExcel()">导出</el-button>
</el-form-item>
</el-col>
</el-row>
</template>
<!-- 按钮行 - 始终显示 -->
<el-row :gutter="16">
<el-col :span="24">
<div class="search-actions">
<div class="action-left">
<el-button
type="primary"
icon="el-icon-search"
@click="getDataList()">
查询
</el-button>
<el-button
icon="el-icon-refresh-left"
@click="resetSearch">
重置
</el-button>
</div>
<div class="action-right">
<el-button
type="success"
icon="el-icon-plus"
@click="addModal()">
新增
</el-button>
<el-button
type="primary"
icon="el-icon-download"
@click="exportExcel()">
导出
</el-button>
<el-button
type="warning"
icon="el-icon-printer"
@click="printCarrierLabels()"
:disabled="selectedCarriers.length <= 0">
打印
</el-button>
</div>
</div>
</el-col>
</el-row>
</el-form>
</el-card>
<!-- 展示列表 -->
<el-table
@ -40,7 +115,14 @@
:data="dataList"
border
v-loading="dataListLoading"
@selection-change="handleSelectionChange"
style="width: 100%;">
<el-table-column
type="selection"
header-align="center"
align="center"
width="50">
</el-table-column>
<el-table-column prop="buNo" label="BU" header-align="center" align="left" min-width="80"></el-table-column>
<el-table-column prop="carrierNo" label="标签条码" header-align="center" align="left" min-width="120"></el-table-column>
<el-table-column prop="carrierTypeCode" label="载具类型编码" header-align="center" align="left" min-width="120"></el-table-column>
@ -128,21 +210,24 @@
<el-date-picker v-model="modalData.purchaseDate" type="date" value-format="yyyy-MM-dd" style="width: 150px"></el-date-picker>
</el-form-item>
<el-form-item label="当前位置">
<el-input v-model="modalData.currentLocation" style="width: 285px"></el-input>
<el-input v-model="modalData.currentLocation" style="width: 150px"></el-input>
</el-form-item>
<el-form-item label="尺寸">
<el-input v-model="modalData.dimensions" style="width: 120px"></el-input>
</el-form-item>
</el-form>
<el-form :inline="true" label-position="top" :model="modalData" :rules="rules" style="margin-left: 7px">
<el-form-item label="尺寸">
<el-input v-model="modalData.dimensions" style="width: 100px"></el-input>
<el-form-item label="可用数量">
<el-input-number v-model="modalData.availableQty" :controls="false" style="width: 102px"></el-input-number>
</el-form-item>
<el-form-item label="最大承重">
<el-input-number v-model="modalData.maxWeight" :controls="false" style="width: 100px"></el-input-number>
<el-input-number v-model="modalData.maxWeight" :controls="false" style="width: 102px"></el-input-number>
</el-form-item>
<el-form-item label="预期使用次数">
<el-input-number v-model="modalData.expectedLifeCycles" :controls="false" style="width: 100px"></el-input-number>
<el-input-number v-model="modalData.expectedLifeCycles" :controls="false" style="width: 102px"></el-input-number>
</el-form-item>
<el-form-item label="预期使用寿命">
<el-input-number v-model="modalData.expectedLifeDays" :controls="false" style="width: 100px"></el-input-number>
<el-input-number v-model="modalData.expectedLifeDays" :controls="false" style="width: 101px"></el-input-number>
</el-form-item>
</el-form>
<el-form :inline="true" label-position="top" :model="modalData" :rules="rules" style="margin-left: 7px">
@ -167,10 +252,12 @@ import {
getSiteAndBuByUserName
} from "@/api/fixedCarrier/fixedCarrier.js"
import excel from "@/utils/excel-util.js"
import getLodop from '@/utils/LodopFuncs.js'
export default {
data() {
return {
searchExpanded: true, // 查询条件展开状态
searchData: {
userName: this.$store.state.user.name,
buDesc: '',
@ -186,6 +273,7 @@ export default {
height: 200,
dataList: [],
dataListLoading: false,
selectedCarriers: [], // 选中的载具列表
modalFlag: false,
modalDisableFlag: false,
modalTitle: '新增固定载具',
@ -200,6 +288,7 @@ export default {
specification: '',
dimensions: '',
maxWeight: null,
availableQty: null, // 可用数量
expectedLifeCycles: null,
expectedLifeDays: null,
status: '',
@ -236,7 +325,7 @@ export default {
},
mounted() {
this.$nextTick(() => {
this.height = window.innerHeight - 170
this.height = window.innerHeight - 247
})
this.getSiteAndBu()
this.getDataList()
@ -313,6 +402,7 @@ export default {
specification: '',
dimensions: '',
maxWeight: null,
availableQty: null, // 可用数量默认为0
expectedLifeCycles: null,
expectedLifeDays: null,
status: 1,
@ -411,12 +501,302 @@ export default {
autoWidth: true,
bookType: 'xlsx'
})
},
// 多选变化
handleSelectionChange(val) {
this.selectedCarriers = val
},
// 切换查询条件展开/收起
toggleSearchExpand() {
this.searchExpanded = !this.searchExpanded
},
// 重置查询条件
resetSearch() {
this.searchData = {
userName: this.$store.state.user.name,
buDesc: '',
carrierNo: '',
carrierTypeName: '',
status: '',
page: 1,
limit: 20
}
this.pageIndex = 1
this.getDataList()
},
// 打印载具标签
printCarrierLabels() {
if (this.selectedCarriers.length === 0) {
this.$message.warning('请选择要打印的载具!')
return
}
const LODOP = getLodop()
if (!LODOP) {
this.$message.error('未检测到打印控件，请安装CLodop打印控件!')
return
}
try {
// 初始化打印
LODOP.PRINT_INIT('固定载具标签打印')
// 设置纸张尺寸：70mm x 20mm
LODOP.SET_PRINT_PAGESIZE(0, 700, 200, '')
// 循环打印每个选中的载具
for (let i = 0; i < this.selectedCarriers.length; i++) {
const carrier = this.selectedCarriers[i]
if (i > 0) {
LODOP.NEWPAGE() // 新页
}
// 绘制外边框
LODOP.ADD_PRINT_RECT('1mm', '1mm', '68mm', '18mm', 0, 1)
// 绘制中间竖线（左右分隔）
LODOP.ADD_PRINT_LINE('1mm', '50mm', '19mm', '50mm', 0, 1)
// 绘制左侧横线（标签条码和可用数量之间的分隔）
LODOP.ADD_PRINT_LINE('10mm', '1mm', '10mm', '50mm', 0, 1)
// 左侧文字信息 - 标签条码
const text1 = LODOP.ADD_PRINT_TEXT('4.5mm', '2mm', '46mm', '5mm', '标签条码: ' + (carrier.carrierNo || ''))
LODOP.SET_PRINT_STYLEA(text1, "FontName", "Microsoft YaHei")
LODOP.SET_PRINT_STYLEA(text1, "FontSize", 8)
LODOP.SET_PRINT_STYLEA(text1, "Bold", 1)
// 左侧文字信息 - 可用数量
const text2 = LODOP.ADD_PRINT_TEXT('13.5mm', '2mm', '46mm', '5mm', '可用数量: ' + (carrier.availableQty || 0))
LODOP.SET_PRINT_STYLEA(text2, "FontName", "Microsoft YaHei")
LODOP.SET_PRINT_STYLEA(text2, "FontSize", 8)
LODOP.SET_PRINT_STYLEA(text2, "Bold", 1)
// 右侧二维码（使用 LODOP 原生二维码）
const qrIndex = LODOP.ADD_PRINT_BARCODE('1.5mm', '51mm', '19mm', '19mm', 'QRCode', carrier.carrierNo || '')
LODOP.SET_PRINT_STYLEA(qrIndex, "QRCodeVersion", 4)
LODOP.SET_PRINT_STYLEA(qrIndex, "QRCodeErrorLevel", "M")
}
// 执行打印
LODOP.PRINT()
} catch (error) {
console.error('打印失败:', error)
this.$message.error('打印失败: ' + error.message)
}
}
}
}
</script>
<style scoped>
/* 搜索卡片样式 */
.search-card {
margin-bottom: 16px;
border-radius: 8px;
overflow: hidden;
transition: all 0.3s ease;
}
.search-card:hover {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.search-card /deep/ .el-card__header {
padding: 5px 20px;
background: linear-gradient(135deg, #9ac3d0 20%, #b6c7dd 80%);
border-bottom: none;
}
.search-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.header-left {
display: flex;
align-items: center;
color: #fff;
}
.header-left i {
font-size: 16px;
margin-right: 8px;
}
.header-title {
font-size: 14px;
font-weight: 600;
letter-spacing: 0.5px;
}
.header-right {
color: #fff;
}
.collapse-btn {
color: #fff;
font-weight: 500;
transition: all 0.3s ease;
}
.collapse-btn:hover {
color: #f0f0f0;
transform: translateY(-1px);
}
.collapse-btn i {
transition: transform 0.3s ease;
}
/* 搜索表单样式 */
.search-form {
padding: 6px 0;
min-height: 0;
}
/* 卡片主体样式 */
.search-card /deep/ .el-card__body {
padding: 10px;
transition: all 0.3s ease;
}
/* 收起时的样式 */
.search-card.collapsed /deep/ .el-card__body {
padding: 10px 20px;
}
.search-form /deep/ .el-form-item {
margin-bottom: 12px;
}
.search-form /deep/ .el-form-item__label {
font-weight: 500;
color: #606266;
padding-bottom: 4px;
}
.search-form /deep/ .el-input__inner,
.search-form /deep/ .el-textarea__inner {
border-radius: 6px;
border: 1px solid #DCDFE6;
transition: all 0.3s ease;
}
.search-form /deep/ .el-input__inner:focus,
.search-form /deep/ .el-textarea__inner:focus {
border-color: #9ac3d0;
box-shadow: 0 0 0 2px rgba(154, 195, 208, 0.1);
}
.search-form /deep/ .el-select {
width: 100%;
}
.search-form /deep/ .el-date-editor.el-input {
width: 100%;
}
/* 操作按钮区域 */
.search-actions {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0 2px 0;
}
/* 展开时显示上边框 */
.search-card:not(.collapsed) .search-actions {
border-top: 1px solid #f0f0f0;
margin-top: 6px;
}
/* 收起时不显示上边框和上边距 */
.search-card.collapsed .search-actions {
border-top: none;
margin-top: 0;
padding-top: 0;
}
.action-left,
.action-right {
display: flex;
gap: 8px;
}
.search-actions .el-button {
border-radius: 4px;
padding: 5px 10px;
font-size: 12px;
font-weight: 500;
transition: all 0.3s ease;
}
.search-actions .el-button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.search-actions .el-button--primary {
background: #60aeff;
border-color: #60aeff;
}
.search-actions .el-button--primary:hover {
background: #7dbdff;
border-color: #7dbdff;
}
.search-actions .el-button--success {
background: #67C23A;
border-color: #67C23A;
}
.search-actions .el-button--success:hover {
background: #85ce61;
border-color: #85ce61;
}
.search-actions .el-button--danger {
background: #F56C6C;
border-color: #F56C6C;
}
.search-actions .el-button--danger:hover {
background: #f78989;
border-color: #f78989;
}
.search-actions .el-button--warning {
background: #E6A23C;
border-color: #E6A23C;
}
.search-actions .el-button--warning:hover {
background: #ebb563;
border-color: #ebb563;
}
/* 响应式设计 */
@media (max-width: 1200px) {
.search-actions {
flex-direction: column;
gap: 10px;
}
.action-left,
.action-right {
width: 100%;
justify-content: center;
}
}
</style>

Write Preview
Loading…
Cancel
Save