boying-vue/src/views/modules/boxManage/saleBoxManage.vue

<template>
  <div class="mod-config">
    <!-- 条件查询 -->
    <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">
            <i :class="searchExpanded ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
            {{ searchExpanded ? '收起' : '展开' }}
          </el-button>
        </div>
      </div>

      <el-form
        :inline="true"
        label-position="top"
        :model="searchData"
        class="search-form"
        @keyup.enter.native="getMainData">

        <!-- 查询条件 - 可展开/收起 -->
        <template v-if="searchExpanded">
          <el-row :gutter="12">
            <el-col :span="2">
              <el-form-item label="BU">
                <el-input v-model="searchData.buNo" placeholder="BU" clearable style="width: 100%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item label="销售出库单号">
                <el-input v-model="searchData.orderNo" placeholder="单号" clearable style="width: 100%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item label="客户编号">
                <el-input v-model="searchData.customerId" placeholder="客户编号" clearable style="width: 100%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item label="客户名称">
                <el-input v-model="searchData.customerName" placeholder="客户名称" clearable style="width: 100%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="单据状态">
                <el-select multiple collapse-tags v-model="searchData.orderStatusList" clearable placeholder="请选择" style="width: 120%">
                  <el-option label="待包装" value="待包装"></el-option>
                  <el-option label="待检验" value="待检验"></el-option>
                  <el-option label="待出库" value="待出库"></el-option>
                  <el-option label="已完成" value="已完成"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-form-item label="是否送检">
                <el-select v-model="searchData.inspectionFlag" clearable placeholder="选择" style="width: 100%">
                  <el-option label="是" value="Y"></el-option>
                  <el-option label="否" value="N"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="要求发货日期">
                <el-date-picker
                  v-model="searchData.startDate"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="开始日期"
                  style="width: 44%">
                </el-date-picker>
                <span style="margin: 0 6px; color: #DCDFE6;">~</span>
                <el-date-picker
                  v-model="searchData.endDate"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="结束日期"
                  style="width: 44%">
                </el-date-picker>
              </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="getMainData">
                  查询
                </el-button>
                <el-button
                  type="primary"
                  icon="el-icon-download"
                  @click="exportExcel()">
                  导出
                </el-button>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 数据列表 -->
    <div class="section-title-bar">
      <i class="el-icon-document"></i>
      <span>销售发货清单</span>
      <span class="total-count">（共 {{ totalPage }} 条）</span>
    </div>
    <el-table
      :height="tableHeight"
      :data="mainDataList"
      border
      ref="mainTable"
      highlight-current-row
      @row-click="changeData"
      v-loading="dataListLoading"
      style="margin-top: 0px; width: 100%;">
      <el-table-column
        v-for="(item,index) in columnArray1" :key="index"
        :sortable="item.columnSortable"
        :prop="item.columnProp"
        :header-align="item.headerAlign"
        :show-overflow-tooltip="item.showOverflowTooltip"
        :align="item.align"
        :fixed="item.fixed==''?false:item.fixed"
        :min-width="item.columnWidth"
        :label="item.columnLabel">
        <template slot-scope="scope">
          <span v-if="!item.columnHidden && item.columnProp !== 'inspectionFlag'"> {{scope.row[item.columnProp]}}</span>
          <span v-if="!item.columnHidden && item.columnProp === 'inspectionFlag'"> {{scope.row[item.columnProp] === 'Y' ? '是' : scope.row[item.columnProp] === 'N' ? '否' : ''}}</span>
          <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]" style="width: 100px; height: 80px"/></span>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="80"
        label="操作">
        <template slot-scope="scope">
          <el-link v-if="scope.row.orderStatus === '待包装'" style="cursor: pointer" @click="handleComplete(scope.row)">送检</el-link>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页插件 -->
    <el-pagination style="margin-top: 0px"
                   @size-change="sizeChangeHandle"
                   @current-change="currentChangeHandle"
                   :current-page="pageIndex"
                   :page-sizes="[20, 50, 100, 200, 500]"
                   :page-size="pageSize"
                   :total="totalPage"
                   layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>

    <el-tabs v-model="activeName" style="margin-top: 0px; width: 99%;" @tab-click="tabClick" class="customer-tab" type="border-card">
      <el-tab-pane label="扫描装盒" name="cases">
        <el-form v-if="currentRow.orderStatus === '待包装'" label-position="top" style="margin-left: 2px; display: flex; align-items: center;">
          <el-button type="primary" size="small" @click="openCaseDialog">新增</el-button>
          <el-button type="danger" size="small" @click="deleteCaseRecord">删除</el-button>
          <el-button type="primary" size="small" :loading="printCasesLoading" @click="printSelectedCases">打印</el-button>
          <span style="margin-left: auto; font-size: 14px; display: flex; align-items: center;">
            <span style="margin-right: 20px;">
              <span style="color: #606266;">盒标签张数：</span>
              <span style="color: rgb(38, 92, 147); font-weight: bold;">{{casesStatistics.boxCountCases}}</span>
            </span>
            <span style="margin-right: 20px;">
              <span style="color: #606266;">卷标签张数：</span>
              <span style="color: rgb(38, 92, 147); font-weight: bold;">{{casesStatistics.boxCountRolls}}</span>
            </span>
            <span>
              <span style="color: #606266;">物料总数：</span>
              <span style="color: rgb(38, 92, 147); font-weight: bold;">{{casesStatistics.totalQty}}</span>
            </span>
          </span>
        </el-form>
        <el-table
          ref="caseTable"
          :data="casesList"
          :height="height"
          border
          @selection-change="handleCaseSelectionChange"
          style="width: 100%;">
          <el-table-column
            type="selection"
            width="55"
            align="center">
          </el-table-column>
          <el-table-column
            prop="casesNo"
            header-align="center"
            align="center"
            min-width="120"
            label="盒标签">
          </el-table-column>
          <el-table-column
            prop="rollNo"
            header-align="center"
            align="center"
            min-width="120"
            label="卷标签">
          </el-table-column>
          <el-table-column
            prop="rollQty"
            header-align="center"
            align="right"
            min-width="100"
            label="卷数量">
          </el-table-column>
          <el-table-column
            prop="partNo"
            header-align="center"
            align="left"
            min-width="120"
            label="物料编码">
          </el-table-column>
          <el-table-column
            prop="partDesc"
            header-align="center"
            align="left"
            min-width="200"
            label="物料名称">
          </el-table-column>
          <el-table-column
            prop="createDate"
            header-align="center"
            align="center"
            min-width="160"
            label="创建时间">
          </el-table-column>
          <el-table-column
            prop="createBy"
            header-align="center"
            align="center"
            min-width="100"
            label="创建人">
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="扫描装箱" name="boxing">
        <boxing ref="boxing"></boxing>
      </el-tab-pane>
      <el-tab-pane label="装箱清单" name="rollDetail">
        <el-table
          :data="rollList"
          :height="height + 23"
          border
          style="width: 100%;">
          <el-table-column
            prop="orderId"
            header-align="center"
            align="center"
            min-width="60"
            label="序号">
          </el-table-column>
          <el-table-column
            prop="boxNo"
            header-align="center"
            align="center"
            min-width="100"
            label="箱号">
          </el-table-column>
          <el-table-column
            prop="finalRollNo"
            header-align="center"
            align="center"
            min-width="100"
            label="卷号">
          </el-table-column>
          <el-table-column
            prop="partNo"
            header-align="center"
            align="left"
            min-width="100"
            label="物料编码">
          </el-table-column>
          <el-table-column
            prop="rollQty"
            header-align="center"
            align="right"
            min-width="100"
            label="数量">
          </el-table-column>
          <el-table-column
            prop="receivedDate"
            header-align="center"
            align="center"
            min-width="100"
            label="装箱日期">
          </el-table-column>
          <el-table-column
            prop="receivedBy"
            header-align="center"
            align="left"
            min-width="100"
            label="装箱人">
          </el-table-column>
          <el-table-column
            prop="batchNo"
            header-align="center"
            align="left"
            min-width="100"
            label="合约号">
          </el-table-column>
          <el-table-column
            prop="wareHouseID"
            header-align="center"
            align="left"
            min-width="100"
            label="仓库">
          </el-table-column>
          <el-table-column
            prop="locationId"
            header-align="center"
            align="left"
            min-width="100"
            label="库位">
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="扫描装托" name="pallet">
        <pallet ref="pallet"></pallet>
      </el-tab-pane>
    </el-tabs>

    <!-- 盒清单新增对话框 -->
    <el-dialog title="装盒扫描" :visible.sync="caseDialogVisible" width="70%" :close-on-click-modal="false" @close="closeCaseDialog">
      <el-form :inline="true" label-position="top" style="margin-left: 7px;margin-top: -5px;" @submit.native.prevent>
        <el-form-item label="卷标签">
          <el-input ref="rollNoInput" v-model="caseForm.rollNo" @keyup.enter.native="scanCaseRoll" placeholder="请扫描卷标签" style="width: 200px"></el-input>
        </el-form-item>
        <span style="margin-left: 20px; font-size: 14px; display: inline-block; margin-top: 20px;">
          <span style="color: #606266;">需求数量：</span>
          <span style="color: rgb(38, 92, 147); font-weight: bold;">{{currentRow.requiredQty || 0}}</span>
        </span>
        <span style="margin-left: 20px; font-size: 14px; display: inline-block; margin-top: 20px;">
          <span style="color: #606266;">盒标签张数：</span>
          <span style="color: rgb(38, 92, 147); font-weight: bold;">{{caseStatistics.casesCount}}</span>
        </span>
        <span style="margin-left: 20px; font-size: 14px; display: inline-block; margin-top: 20px;">
          <span style="color: #606266;">卷标签张数：</span>
          <span style="color: rgb(38, 92, 147); font-weight: bold;">{{caseStatistics.rollCount}}</span>
        </span>
        <span style="margin-left: 20px; font-size: 14px; display: inline-block; margin-top: 20px;">
          <span style="color: #606266;">物料总数：</span>
          <span style="color: rgb(38, 92, 147); font-weight: bold;">{{caseStatistics.totalQty}}</span>
        </span>
      </el-form>
      <!-- 中部分：扫描列表 -->
      <el-table
          ref="caseRollTable"
          :data="caseRollList"
          border
          height="300"
          @selection-change="handleCaseRollSelectionChange"
          style="width: 100%; margin-top: 10px;">
        <el-table-column
            type="selection"
            width="55"
            header-align="center"
            align="center">
        </el-table-column>
        <el-table-column
            type="index"
            label="序号"
            width="50"
            header-align="center"
            align="right">
        </el-table-column>
        <el-table-column
            prop="casesNo"
            label="盒标签"
            min-width="120"
            header-align="center"
            align="left">
        </el-table-column>
        <el-table-column
            prop="rollNo"
            label="卷标签"
            min-width="120"
            header-align="center"
            align="left">
        </el-table-column>
        <el-table-column
            prop="rollQty"
            label="卷数量"
            min-width="100"
            header-align="center"
            align="right">
        </el-table-column>
        <el-table-column
            prop="partNo"
            label="物料编码"
            min-width="120"
            header-align="center"
            align="left">
        </el-table-column>
        <el-table-column
            prop="partDesc"
            label="物料名称"
            min-width="200"
            header-align="center"
            align="left">
        </el-table-column>
        <el-table-column
            prop="batchNo"
            label="合约号"
            min-width="120"
            header-align="center"
            align="left">
        </el-table-column>
        <el-table-column
            label="操作"
            width="80"
            header-align="center"
            align="center">
          <template slot-scope="scope">
            <el-link style="cursor: pointer" @click="deleteRollFromList(scope.$index)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-footer style="height:35px;margin-top: 15px;text-align:center">
        <el-button type="primary" :loading="printLoading" @click="printCaseRolls">打印</el-button>
        <el-button type="primary" @click="applyCaseScan">应用</el-button>
        <el-button type="success" @click="saveCaseScan">保存</el-button>
        <el-button @click="closeCaseDialog">关闭</el-button>
      </el-footer>
    </el-dialog>

  </div>
</template>

<script>
/*组件*/


import excel from "@/utils/excel-util.js";
import boxing from "./com_saleBoxManage_boxing.vue"
import pallet from "./com_saleBoxManage_pallet.vue"
import {
  searchRollForOrderNo,
  searchSoReceiveCasesData,
  deleteSoReceiveCasesData,
  validateAndScanCaseRoll,
  saveCaseRollList,
  searchOutboundNotificationWithDetail,
  searchOutboundNotificationWithDetailByPage,
  updateOrderStatus
} from '../../../api/boxManage/boxManage'
import { callUspPartLabelTemplate } from '@/api/wms/wms'
import getLodop from '@/utils/LodopFuncs.js'
import labelPrintTemplates from '@/mixins/labelPrintTemplates.js'


export default {
  mixins: [labelPrintTemplates],
  data() {
    return {
      functionId: this.$route.meta.menuId,
      height: 200,
      tableHeight: 200,
      searchExpanded: true,
      currentRow: {},
      selectedCaseRolls: [], // 装盒对话框中选中的卷标签
      printLoading: false,   // 打印loading
      printCasesLoading: false, // 扫描装盒页签打印loading
      searchData:{
        orderNo:'',
        customerId:'',
        orderType:'销售出库',
        orderStatus: '',
        orderStatusList: ['待包装'],
        inspectionFlag: '',
        buNo:'',
        customerName:'',
        startDate: new Date().toISOString().split('T')[0],
        endDate: new Date().toISOString().split('T')[0],
        site:this.$store.state.user.site,
        userName:this.$store.state.user.name,
        page: 1,
        limit: 10,
      },
      pageIndex: 1,
      pageSize: 50,
      totalPage: 0,
      tagNo:'',
      rollList:[],
      mainDataList:[],
      dataListLoading: false,
      activeName: 'cases',
      // 盒清单相关数据
      casesList: [],
      casesStatistics: {
        boxCountCases: 0,  // 盒标签张数
        boxCountRolls: 0,  // 卷标签张数
        totalQty: 0        // 物料总数
      },
      caseDialogVisible: false,
      caseForm: {
        casesNo: '',
        rollNo: '',
        site: this.$store.state.user.site,
        buNo: '',
        notifyNo: '',
        partNo: ''
      },
      caseRollList: [],
      caseStatistics: {
        casesCount: 0,
        rollCount: 0,
        totalQty: 0
      },
      selectedCaseRecords: [],
      columnArray1: [
        {
          userId: this.$store.state.user.name,
          functionId: this.functionId,
          serialNumber: '750001Table1BU',
          tableId: "750001Table1",
          tableName: "销售发货清单",
          columnProp: "buNo",
          headerAlign: "center",
          align: "left",
          columnLabel: "BU",
          columnWidth: '60',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
        {
          userId: this.$store.state.user.name,
          functionId: this.functionId,
          serialNumber: '750001Table1OrderNo',
          tableId: "750001Table1",
          tableName: "销售发货清单",
          columnProp: "orderNo",
          headerAlign: "center",
          align: "left",
          columnLabel: "销售出库单号",
          columnWidth: '100',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
        {
          userId: this.$store.state.user.name,
          functionId: this.functionId,
          serialNumber: '750001Table1OrderStatus',
          tableId: "750001Table1",
          tableName: "销售发货清单",
          columnProp: "orderStatus",
          headerAlign: "center",
          align: "left",
          columnLabel: "通知单状态",
          columnWidth: '80',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
        {
          userId: this.$store.state.user.name,
          functionId: this.functionId,
          serialNumber: '750001Table1InspectionFlag',
          tableId: "750001Table1",
          tableName: "销售发货清单",
          columnProp: "inspectionFlag",
          headerAlign: "center",
          align: "center",
          columnLabel: "是否送检",
          columnWidth: '80',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
        {
          userId: this.$store.state.user.name,
          functionId: this.functionId,
          serialNumber: '750001Table1CustomerId',
          tableId: "750001Table1",
          tableName: "销售发货清单",
          columnProp: "customerId",
          headerAlign: "center",
          align: "left",
          columnLabel: "客户编号",
          columnWidth: '100',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
        {
          userId: this.$store.state.user.name,
          functionId: this.functionId,
          serialNumber: '750001Table1CustomerName',
          tableId: "750001Table1",
          tableName: "销售发货清单",
          columnProp: "customerName",
          headerAlign: "center",
          align: "left",
          columnLabel: "客户名称",
          columnWidth: '240',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
        {
          userId: this.$store.state.user.name,
          functionId: this.functionId,
          serialNumber: '750001Table1CustomerAbb',
          tableId: "750001Table1",
          tableName: "销售发货清单",
          columnProp: "customerAbb",
          headerAlign: "center",
          align: "left",
          columnLabel: "客户简称",
          columnWidth: '120',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
        {
          userId: this.$store.state.user.name,
          functionId: this.functionId,
          serialNumber: '750001Table1RequiredOutboundDate',
          tableId: "750001Table1",
          tableName: "销售发货清单",
          columnProp: "requiredOutboundDate",
          headerAlign: "center",
          align: "left",
          columnLabel: "要求发货日期",
          columnWidth: '120',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
        {
          userId: this.$store.state.user.name,
          functionId: this.functionId,
          serialNumber: '750001Table1RelatedOrderNo',
          tableId: "750001Table1",
          tableName: "销售发货清单",
          columnProp: "relatedOrderNo",
          headerAlign: "center",
          align: "left",
          columnLabel: "销售订单号",
          columnWidth: '100',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
        {
          userId: this.$store.state.user.name,
          functionId: this.functionId,
          serialNumber: '750001Table1RelatedOrderLineNo',
          tableId: "750001Table1",
          tableName: "销售发货清单",
          columnProp: "relatedOrderLineNo",
          headerAlign: "center",
          align: "right",
          columnLabel: "销售订单行号",
          columnWidth: '100',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
        {
          userId: this.$store.state.user.name,
          functionId: this.functionId,
          serialNumber: '750001Table1PartNo',
          tableId: "750001Table1",
          tableName: "销售发货清单",
          columnProp: "partNo",
          headerAlign: "center",
          align: "left",
          columnLabel: "物料编码",
          columnWidth: '120',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
        {
          userId: this.$store.state.user.name,
          functionId: this.functionId,
          serialNumber: '750001Table1PartDesc',
          tableId: "750001Table1",
          tableName: "销售发货清单",
          columnProp: "partDesc",
          headerAlign: "center",
          align: "left",
          columnLabel: "物料名称",
          columnWidth: '200',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
        {
          userId: this.$store.state.user.name,
          functionId: this.functionId,
          serialNumber: '750001Table1OutBatchNo',
          tableId: "750001Table1",
          tableName: "销售发货清单",
          columnProp: "outBatchNo",
          headerAlign: "center",
          align: "left",
          columnLabel: "合约号",
          columnWidth: '100',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
        {
          userId: this.$store.state.user.name,
          functionId: this.functionId,
          serialNumber: '750001Table1OrderQty',
          tableId: "750001Table1",
          tableName: "销售发货清单",
          columnProp: "orderQty",
          headerAlign: "center",
          align: "right",
          columnLabel: "销售订单数量",
          columnWidth: '100',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
        {
          userId: this.$store.state.user.name,
          functionId: this.functionId,
          serialNumber: '750001Table1RequiredQty',
          tableId: "750001Table1",
          tableName: "销售发货清单",
          columnProp: "requiredQty",
          headerAlign: "center",
          align: "right",
          columnLabel: "要求发货数量",
          columnWidth: '100',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
        {
          userId: this.$store.state.user.name,
          functionId: this.functionId,
          serialNumber: '750001Table1AvailableStock',
          tableId: "750001Table1",
          tableName: "销售发货清单",
          columnProp: "availableStock",
          headerAlign: "center",
          align: "right",
          columnLabel: "可用库存",
          columnWidth: '100',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
        {
          userId: this.$store.state.user.name,
          functionId: this.functionId,
          serialNumber: '750001Table1RollQty',
          tableId: "750001Table1",
          tableName: "销售发货清单",
          columnProp: "rollQty",
          headerAlign: "center",
          align: "right",
          columnLabel: "已扫描数量",
          columnWidth: '100',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
        {
          userId: this.$store.state.user.name,
          functionId: this.functionId,
          serialNumber: '750001Table1UnScanQty',
          tableId: "750001Table1",
          tableName: "销售发货清单",
          columnProp: "unScanQty",
          headerAlign: "center",
          align: "right",
          columnLabel: "未扫描数量",
          columnWidth: '100',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
        {
          userId: this.$store.state.user.name,
          functionId: this.functionId,
          serialNumber: '750001Table1Unit',
          tableId: "750001Table1",
          tableName: "销售发货清单",
          columnProp: "unit",
          headerAlign: "center",
          align: "left",
          columnLabel: "单位",
          columnWidth: '80',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
      ],
      exportName: '销售出库单'+this.dayjs().format('YYYYMMDDHHmmss'),
    }
  },
  /*组件*/
  components: {
    boxing,
    pallet
  },

  mounted() {
    this.$nextTick(() => {
      this.calculateTableHeight();
      window.addEventListener('resize', this.calculateTableHeight);
    })
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.calculateTableHeight);
  },
  methods: {
    // 计算表格高度
    calculateTableHeight() {
      this.$nextTick(() => {
        const windowHeight = window.innerHeight;
        // 根据搜索条件展开状态动态计算
        const headerHeight = this.searchExpanded ? 220 : 152;
        this.tableHeight = (windowHeight - headerHeight - 162) / 2;
        this.height = this.tableHeight - 51;
      });
    },
    // 切换搜索展开/收起
    toggleSearchExpand() {
      this.searchExpanded = !this.searchExpanded;
      this.calculateTableHeight();
    },

    getMainData(){
      this.dataListLoading = true
      this.searchData.limit = this.pageSize
      this.searchData.page = this.pageIndex
      this.searchData.orderStatus = this.searchData.orderStatusList.join(',')
      searchOutboundNotificationWithDetailByPage(this.searchData).then(({data}) => {
        if (data.code === 0) {
          this.mainDataList = data.page.list
          this.totalPage = data.page.totalCount
          //判断是否全部存在数据
          if (this.mainDataList && this.mainDataList.length > 0) {
            //设置选中行
            this.$refs.mainTable.setCurrentRow(this.mainDataList[0])
            this.changeData(this.mainDataList[0])
          } else {
            this.changeData(null)
          }
        }
        this.dataListLoading = false
      }).catch(() => {
        this.dataListLoading = false
      })
    },
    tabClick(tab, event){
      this.refreshCurrentTabTable()
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getMainData()
    },

    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getMainData()
    },
    changeData(row){
      this.currentRow=JSON.parse(JSON.stringify(row))
      this.refreshCurrentTabTable ();
    },
    refreshCurrentTabTable(){
      if (this.currentRow === '' || this.currentRow === null) {
        this.currentRow = {
          site: '',
          buNo: '',
          supplierNo: ''
        }
      }
      if(this.activeName==='boxing'){
        this.refreshBoxingTable();
      }
      if(this.activeName==='pallet'){
        this.refreshPalletTable();
      }
      if(this.activeName==='rollDetail'){
        this.refreshRollsTable();
      }
      if(this.activeName==='cases'){
        this.refreshCasesTable();
      }
    },
    async exportExcel() {
      this.searchData.limit = -1
      this.searchData.page = 1
      excel.exportTable({
        url: "/boxForNotification/searchOutboundNotificationWithDetail",
        columnMapping:  this.columnArray1,//可以直接用table，不需要的列就剔除
        mergeSetting: [],//需要合并的列
        params: this.searchData,
        fileName: this.exportName+".xlsx",
        rowFetcher: res => res.data.rows,
        columnFormatter: [],
        dropColumns: [],//需要剔除的列，例如dropColumns: ["netWeight"]，即剔除净重列
      });
    },
    refreshBoxingTable(){
      // 检查是否有有效的当前行数据
      if (!this.currentRow || !this.currentRow.orderNo) {
        return;
      }
      this.$nextTick(() => {
        if (!this.$refs.boxing) {
          return;
        }
        let inData={
          site: this.currentRow.site,
          buNo: this.currentRow.buNo,
          orderNo: this.currentRow.orderNo,
          saleOrderNo: this.currentRow.relatedOrderNo || '', // 销售订单号，用于生成箱号
          boxType: this.currentRow.orderType,
          height: this.height,
          orderStatus: this.currentRow.orderStatus
        }
        this.$refs.boxing.init(inData)
      })
    },
    refreshPalletTable(){
      this.$nextTick(() => {
        // 检查组件引用是否存在
        if (!this.$refs.pallet) {
          return;
        }
        // 检查 init 方法是否存在且是函数
        if (typeof this.$refs.pallet.init !== 'function') {
          return;
        }

        // 准备初始化数据，即使没有选中行也要初始化组件
        let inData={
          site: this.currentRow ? this.currentRow.site : '',
          buNo: this.currentRow ? this.currentRow.buNo : '',
          orderNo: this.currentRow ? this.currentRow.orderNo : '',
          palletType: this.currentRow ? this.currentRow.orderType : '',
          height: this.height,
          orderStatus: this.currentRow ? this.currentRow.orderStatus : ''
        }
        this.$refs.pallet.init(inData)
      })
    },
    refreshRollsTable(){
      let templateData = {
        site: this.currentRow.site,
        buNo: this.currentRow.buNo,
        orderNo: this.currentRow.orderNo,
      }
      searchRollForOrderNo(templateData).then(({data}) => {
        this.rollList = data.rows
      })
    },

    // ===== 盒清单相关方法 =====
    refreshCasesTable(){
      let templateData = {
        site: this.currentRow.site,
        buNo: this.currentRow.buNo,
        notifyNo: this.currentRow.orderNo,
      }
      searchSoReceiveCasesData(templateData).then(({data}) => {
        this.casesList = data.rows || []
        // 更新统计数据 - 从列表第一条记录中获取
        if (data.rows && data.rows.length > 0) {
          const firstRecord = data.rows[0]
          this.casesStatistics.boxCountCases = firstRecord.boxCountCases || 0
          this.casesStatistics.boxCountRolls = firstRecord.boxCountRolls || 0
          this.casesStatistics.totalQty = firstRecord.totalQty || 0
        } else {
          this.casesStatistics.boxCountCases = 0
          this.casesStatistics.boxCountRolls = 0
          this.casesStatistics.totalQty = 0
        }
      })
    },

    openCaseDialog(){
      if(!this.currentRow || !this.currentRow.orderNo){
        this.$message.warning('请先选择一条出库单记录')
        return
      }
      this.caseDialogVisible = true
      this.resetCaseForm()
      // 对话框打开后自动聚焦到卷标签输入框
      this.$nextTick(() => {
        this.$refs.rollNoInput.focus()
      })
    },

    resetCaseForm(){
      this.caseForm = {
        casesNo: '',
        rollNo: '',
        site: this.currentRow.site,
        buNo: this.currentRow.buNo,
        notifyNo: this.currentRow.orderNo,
        partNo: ''
      }
      this.caseRollList = []
      this.selectedCaseRolls = []
      this.updateCaseStatistics()
    },

    async scanCaseRoll(){
      // 校验必填项
      if(!this.caseForm.rollNo){
        this.$message.warning('请扫描卷标签')
        return
      }

      // 将卷标签值赋给盒标签（casesNo = rollNo）
      this.caseForm.casesNo = this.caseForm.rollNo

      // 从当前行获取物料编码
      let partNo = this.currentRow.partNo || ''
      this.caseForm.partNo = partNo

      try {
        const {data} = await validateAndScanCaseRoll(this.caseForm)
        if(data && data.code === 0){
          // 后端现在返回的是集合，需要遍历所有记录
          const rollList = data.rollInfo || []

          if(rollList.length === 0){
            this.$message.warning('未查询到卷数据')
            this.caseForm.rollNo = ''
            this.$refs.rollNoInput.focus()
            return
          }

          // 检查卷标签是否重复（根据 site 和 rollNo）
          const duplicateRolls = []
          const newRolls = []

          rollList.forEach(rollInfo => {
            // 检查当前列表中是否已存在相同 site 和 rollNo 的记录
            const isDuplicate = this.caseRollList.some(item =>
              item.site === this.caseForm.site && item.rollNo === rollInfo.rollNo
            )

            if (isDuplicate) {
              duplicateRolls.push(rollInfo.rollNo)
            } else {
              newRolls.push(rollInfo)
            }
          })

          // 如果有重复的卷标签，提示用户
          if (duplicateRolls.length > 0) {
            this.$message.warning(`以下卷标签已存在，不能重复添加：${duplicateRolls.join(', ')}`)
          }

          // 只添加不重复的卷到列表最前面（后扫描的在上面）
          newRolls.forEach(rollInfo => {
            this.caseRollList.unshift({
              casesNo: this.caseForm.casesNo,
              rollNo: rollInfo.rollNo,
              rollQty: rollInfo.rollQty,
              partNo: rollInfo.partNo,
              partDesc: rollInfo.partDesc,
              batchNo: rollInfo.batchNo,
              notifyNo: this.caseForm.notifyNo,
              site: this.caseForm.site,
              buNo: this.caseForm.buNo
            })
          })

          // 更新统计信息
          this.updateCaseStatistics()

          // 重置输入框，准备下一次扫描
          this.caseForm.casesNo = ''
          this.caseForm.rollNo = ''

          // 光标回到卷标签输入框，继续扫描
          this.$nextTick(() => {
            this.$refs.rollNoInput.focus()
          })

          // 提示添加成功（仅显示实际添加的记录数）
          if (newRolls.length > 0) {
            this.$message.success(`扫描成功，添加了 ${newRolls.length} 条记录`)
          }
        } else {
          this.$message.error(data.msg || '扫描失败')
        }
      } catch (error) {
        this.$message.error(error.msg || '扫描失败，请检查')
        // 清空卷标签输入框
        this.caseForm.rollNo = ''
        this.$refs.rollNoInput.focus()
      }
    },

    updateCaseStatistics(){
      // 盒数量 = 去重的盒标签数量
      const uniqueCases = new Set(this.caseRollList.map(item => item.casesNo))
      this.caseStatistics.casesCount = uniqueCases.size

      // 卷数量 = 列表行数
      this.caseStatistics.rollCount = this.caseRollList.length

      // 物料总数 = 所有行的卷数量求和
      this.caseStatistics.totalQty = this.caseRollList.reduce((sum, item) => {
        return sum + (parseFloat(item.rollQty) || 0)
      }, 0)
    },

    // 从扫描列表中删除某一行
    deleteRollFromList(index){
      this.$confirm('确定删除这条扫描记录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.caseRollList.splice(index, 1)
        this.updateCaseStatistics()
        this.$message.success('删除成功')
      }).catch(() => {})
    },

    async applyCaseScan(){
      if(this.caseRollList.length === 0){
        this.$message.warning('请先扫描卷标签')
        return
      }

      // 校验数量
      if(!await this.validateCaseQty()){
        return
      }

      // 应用：保存但不关闭对话框，重置输入框、计数和列表
      this.saveCaseData(false)
    },

    async saveCaseScan(){
      if(this.caseRollList.length === 0){
        this.$message.warning('请先扫描卷标签')
        return
      }

      // 校验数量
      if(!await this.validateCaseQty()){
        return
      }

      // 保存：保存后关闭对话框
      this.saveCaseData(true)
    },

    // 校验盒清单数量不能超过要求发货数量
    async validateCaseQty(){
      // 获取当前主信息行的要求发货数量
      const requiredQty = parseFloat(this.currentRow.requiredQty) || 0
      if(requiredQty === 0){
        this.$message.warning('要求发货数量为0，无需装箱')
        return false
      }

      // 计算新扫描的数据总量
      const newScanQty = this.caseRollList.reduce((sum, item) => {
        return sum + (parseFloat(item.rollQty) || 0)
      }, 0)

      // 查询已保存的盒清单数据，计算已装箱的总数量
      try {
        let templateData = {
          site: this.currentRow.site,
          buNo: this.currentRow.buNo,
          notifyNo: this.currentRow.orderNo,
        }
        const {data} = await searchSoReceiveCasesData(templateData)
        const existingQty = (data.rows || []).reduce((sum, item) => {
          // 只统计相同物料的数量
          if(item.partNo === this.currentRow.partNo){
            return sum + (parseFloat(item.rollQty) || 0)
          }
          return sum
        }, 0)

        // 总数量 = 已装箱数量 + 新扫描数量
        const totalQty = existingQty + newScanQty

        if(totalQty > requiredQty){
          this.$message.error(`装箱数量超出限制！要求发货数量：${requiredQty}，本次扫描：${newScanQty}，总计：${totalQty}`)
          return false
        }

        return true
      } catch (error) {
        this.$message.error('校验数量失败，请重试')
        return false
      }
    },

    async saveCaseData(closeDialog){
      try {
        const {data} = await saveCaseRollList(this.caseRollList)
        if(data && data.code === 0){
          this.$message.success('保存成功')

          if(closeDialog){
            // 关闭对话框
            this.closeCaseDialog()
          } else {
            // 应用：重置表单继续扫描
            this.resetCaseForm()
            this.$nextTick(() => {
              this.$refs.caseNoInput.focus()
            })
          }

          // 刷新盒清单列表
          this.refreshCasesTable()
        } else {
          this.$message.error(data.msg || '保存失败')
        }
      } catch (error) {
        this.$message.error(error.msg || '保存失败')
      }
    },

    closeCaseDialog(){
      this.caseDialogVisible = false
      this.resetCaseForm()
    },

    handleCaseSelectionChange(selection){
      this.selectedCaseRecords = selection
    },

    // 装盒对话框中卷标签选择变化
    handleCaseRollSelectionChange(selection){
      this.selectedCaseRolls = selection
    },

    // 打印选中的卷标签
    async printCaseRolls(){
      if(this.selectedCaseRolls.length === 0){
        this.$message.warning('请先选择要打印的卷标签')
        return
      }

      this.printLoading = true
      try {
        // 1. 获取 LODOP 打印控件
        const LODOP = getLodop()
        if (!LODOP) {
          this.$message.error('无法连接到打印控件，请确保已安装并启动 CLodop！')
          this.printLoading = false
          return
        }

        // 2. 获取默认打印机
        const printerCount = LODOP.GET_PRINTER_COUNT()
        if (printerCount <= 0) {
          this.$message.error('未检测到打印机，请确保已安装并连接打印机！')
          this.printLoading = false
          return
        }

        // 3. 循环调用存储过程获取打印参数并打印
        for (const rollItem of this.selectedCaseRolls) {
          const params = {
            site: this.currentRow.site,
            buNo: this.currentRow.buNo,
            menuID: this.$route.meta.menuId,
            relatedOrderNo: this.currentRow.orderNo,
            relatedOrderLineNo: this.currentRow.relatedOrderLineNo || '',
            documentNo: this.currentRow.orderNo,
            partNo: rollItem.partNo,
            labelNo: '',
            rollNo: rollItem.rollNo
          }

          const {data: printData} = await callUspPartLabelTemplate(params)
          if (printData && printData.code === 0 && printData.row) {
            const labelData = printData.row

            // 初始化打印任务
            LODOP.PRINT_INIT('卷标签打印_' + rollItem.rollNo)
            LODOP.SET_PRINT_MODE("PRINT_NOCOLLATE", true)

            // 根据 labelNo 调用不同的打印方法
            if (labelData.labelNo === 'A001') {
              await this.printLabelA001(LODOP, labelData, false)
            } else if (labelData.labelNo === 'A002') {
              this.printLabelA002(LODOP, labelData, false)
            } else if (labelData.labelNo === 'A003') {
              this.printLabelA003(LODOP, labelData, false)
            } else if (labelData.labelNo === 'A004') {
              this.printLabelA004(LODOP, labelData, false)
            } else {
              console.warn(`未知的标签模板：${labelData.labelNo}，跳过该标签`)
              continue
            }

            // 执行打印
            LODOP.PRINT()
            console.log(`标签已发送打印, 卷号: ${rollItem.rollNo}`)
          } else {
            console.warn(`获取卷号 ${rollItem.rollNo} 的打印参数失败`)
          }
        }

        this.$message.success('打印任务已发送！')
      } catch (error) {
        console.error('打印标签失败:', error)
        this.$message.error('打印标签失败: ' + (error.message || '请重试'))
      } finally {
        this.printLoading = false
      }
    },

    // 打印选中的盒清单卷标签
    async printSelectedCases(){
      if(this.selectedCaseRecords.length === 0){
        this.$message.warning('请先选择要打印的记录')
        return
      }

      this.printCasesLoading = true
      try {
        // 1. 获取 LODOP 打印控件
        const LODOP = getLodop()
        if (!LODOP) {
          this.$message.error('无法连接到打印控件，请确保已安装并启动 CLodop！')
          this.printCasesLoading = false
          return
        }

        // 2. 获取默认打印机
        const printerCount = LODOP.GET_PRINTER_COUNT()
        if (printerCount <= 0) {
          this.$message.error('未检测到打印机，请确保已安装并连接打印机！')
          this.printCasesLoading = false
          return
        }

        // 3. 循环调用存储过程获取打印参数并打印
        for (const caseRecord of this.selectedCaseRecords) {
          const params = {
            site: this.currentRow.site,
            buNo: this.currentRow.buNo,
            menuID: this.$route.meta.menuId,
            relatedOrderNo: this.currentRow.orderNo,
            relatedOrderLineNo: this.currentRow.relatedOrderLineNo || '',
            documentNo: this.currentRow.orderNo,
            partNo: caseRecord.partNo,
            labelNo: '',
            rollNo: caseRecord.rollNo
          }

          const {data: printData} = await callUspPartLabelTemplate(params)
          if (printData && printData.code === 0 && printData.row) {
            const labelData = printData.row

            // 初始化打印任务
            LODOP.PRINT_INIT('卷标签打印_' + caseRecord.rollNo)
            LODOP.SET_PRINT_MODE("PRINT_NOCOLLATE", true)

            // 根据 labelNo 调用不同的打印方法
            if (labelData.labelNo === 'A001') {
              await this.printLabelA001(LODOP, labelData, false)
            } else if (labelData.labelNo === 'A002') {
              this.printLabelA002(LODOP, labelData, false)
            } else if (labelData.labelNo === 'A003') {
              this.printLabelA003(LODOP, labelData, false)
            } else if (labelData.labelNo === 'A004') {
              this.printLabelA004(LODOP, labelData, false)
            } else {
              console.warn(`未知的标签模板：${labelData.labelNo}，跳过该标签`)
              continue
            }

            // 执行打印
            LODOP.PRINT()
            console.log(`标签已发送打印, 卷号: ${caseRecord.rollNo}`)
          } else {
            console.warn(`获取卷号 ${caseRecord.rollNo} 的打印参数失败`)
          }
        }

        this.$message.success('打印任务已发送！')
      } catch (error) {
        console.error('打印标签失败:', error)
        this.$message.error('打印标签失败: ' + (error.message || '请重试'))
      } finally {
        this.printCasesLoading = false
      }
    },

    async deleteCaseRecord(){
      if(this.selectedCaseRecords.length === 0){
        this.$message.warning('请先选择要删除的记录')
        return
      }

      this.$confirm('确定删除选中的记录吗？删除后将恢复库存卷的装盒状态', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          for(let record of this.selectedCaseRecords){
            await deleteSoReceiveCasesData({
              id: record.id,
              site: record.site,
              buNo: record.buNo
            })
          }
          this.$message.success('删除成功')
          this.refreshCasesTable()
        } catch (error) {
          this.$message.error(error.msg || '删除失败')
        }
      }).catch(() => {})
    },

    // 处理完成操作
    async handleComplete(row){
      this.$confirm('是否包装完成？完成后将创建检验任务', '提示', {
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'warning'
      }).then(async () => {
        try {
          const {data} = await this.$http({
            url: this.$http.adornUrl('/boxForNotification/completePacking'),
            method: 'post',
            data: this.$http.adornData({
              site: row.site,
              buNo: row.buNo,
              orderNo: row.orderNo,
              partNo: row.partNo,
              customerId: row.customerId,
              relatedOrderNo: row.relatedOrderNo,
              relatedOrderLineNo: row.relatedOrderLineNo,
              requiredQty: row.requiredQty,
              orderQty: row.orderQty
            })
          })
          if(data && data.code === 0){
            this.$message.success('包装完成，检验任务已创建')
            // 刷新列表
            this.getMainData()
          } else {
            this.$message.error(data.msg || '操作失败')
          }
        } catch (error) {
          this.$message.error(error.msg || '操作失败，请重试')
        }
      }).catch(() => {
        // 用户点击了"否"，不做任何操作
      })
    },
  },
  created() {
    //查询报表的类型
    this.getMainData();
  },


}
</script>

<!--当前页面的标签样式-->
<style scoped lang="scss">

/deep/ .customer-tab .el-tabs__content {
  padding: 5px !important;
}

/* 主容器 */
.mod-config {
  padding: 8px;
  background: #f5f7fa;
  min-height: 100%;
}

/* 搜索卡片样式 */
.search-card {
  margin-bottom: 8px;
  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-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 {
  display: flex;
  gap: 8px;
  align-items: center;
}

.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;
}

/* 区域标题栏样式 */
.section-title-bar {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e7eb 100%);
  border-radius: 4px;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #303133;
}

.section-title-bar i {
  font-size: 16px;
  margin-right: 8px;
  color: #409eff;
}

.section-title-bar .total-count {
  margin-left: 10px;
  font-size: 12px;
  font-weight: normal;
  color: #909399;
}

/* 表格样式 */
/deep/ .el-table th {
  background-color: #f5f7fa;
  color: #303133;
  font-weight: 600;
}

/deep/ .el-table tr:hover > td {
  background-color: #f5f7fa !important;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .search-actions {
    flex-direction: column;
    gap: 10px;
  }

  .action-left {
    width: 100%;
    justify-content: center;
  }
}

</style>