2026-01-04

固定载具打印

src/views/modules/fixedCarrier/fixedCarrier.vue

@@ -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>