From cb13784141885cc16d92f62554624b619778c55d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A6=82=E5=88=9D?= <3236758982@qq.com>
Date: Fri, 13 Mar 2026 15:05:31 +0800
Subject: [PATCH] =?UTF-8?q?=E7=94=9C=E8=8F=8A=E7=B3=96=E5=BA=93=E5=AD=98?=
 =?UTF-8?q?=E9=80=82=E9=85=8D=E6=89=8B=E6=9C=BA=E7=AB=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../erp/stock/batch/QualityDetailDialog.vue   | 280 +++++++++-
 src/views/erp/stock/batch/index.vue           | 488 ++++++++++++++----
 2 files changed, 668 insertions(+), 100 deletions(-)

diff --git a/src/views/erp/stock/batch/QualityDetailDialog.vue b/src/views/erp/stock/batch/QualityDetailDialog.vue
index f43333f..74407ff 100644
--- a/src/views/erp/stock/batch/QualityDetailDialog.vue
+++ b/src/views/erp/stock/batch/QualityDetailDialog.vue
@@ -1,5 +1,142 @@
 <template>
+  <!-- 移动端使用抽屉 -->
+  <el-drawer
+    v-if="isMobile"
+    v-model="dialogVisible"
+    title="质检详情"
+    direction="btt"
+    size="90%"
+  >
+    <div class="mobile-detail">
+      <!-- 基本信息 -->
+      <div class="mobile-section">
+        <div class="mobile-section__title">基本信息</div>
+        <div class="mobile-info-grid">
+          <div class="info-cell">
+            <span class="info-cell__label">批号</span>
+            <span class="info-cell__value">{{ formData.workOrderCode }}</span>
+          </div>
+          <div class="info-cell">
+            <span class="info-cell__label">产品名称</span>
+            <span class="info-cell__value">{{ formData.productName }}</span>
+          </div>
+          <div class="info-cell">
+            <span class="info-cell__label">产量(吨)</span>
+            <span class="info-cell__value highlight">{{ formData.weight }}</span>
+          </div>
+          <div class="info-cell">
+            <span class="info-cell__label">质检员</span>
+            <span class="info-cell__value">{{ formData.inspectorName }}</span>
+          </div>
+          <div class="info-cell">
+            <span class="info-cell__label">质检时间</span>
+            <span class="info-cell__value">{{ formatDateTime(formData.inspectionTime) }}</span>
+          </div>
+          <div class="info-cell">
+            <span class="info-cell__label">创建时间</span>
+            <span class="info-cell__value">{{ formatDateTime(formData.createTime) }}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 主要成分 -->
+      <div class="mobile-section">
+        <div class="mobile-section__title">主要成分</div>
+        <div class="mobile-indicator-grid">
+          <div class="indicator-card primary">
+            <span class="indicator-card__label">糖苷</span>
+            <span class="indicator-card__value">{{ formatPercent(formData.steviaGlycosidesPercent) }}%</span>
+          </div>
+          <div class="indicator-card">
+            <span class="indicator-card__label">水分</span>
+            <span class="indicator-card__value">{{ formatPercent(formData.steviaMoisture) }}%</span>
+          </div>
+          <div class="indicator-card">
+            <span class="indicator-card__label">灰份</span>
+            <span class="indicator-card__value">{{ formatPercent(formData.steviaAshPercent) }}%</span>
+          </div>
+          <div class="indicator-card">
+            <span class="indicator-card__label">PH值</span>
+            <span class="indicator-card__value">{{ formatDecimal(formData.steviaPhValue) }}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 糖苷组分 -->
+      <div class="mobile-section">
+        <div class="mobile-section__title">甘菊糖苷组分</div>
+        <div class="mobile-indicator-list">
+          <div class="indicator-row">
+            <span class="indicator-row__label">RD</span>
+            <span class="indicator-row__value">{{ formatDecimal(formData.steviaRd) }}</span>
+          </div>
+          <div class="indicator-row">
+            <span class="indicator-row__label">RA</span>
+            <span class="indicator-row__value">{{ formatDecimal(formData.steviaRa) }}</span>
+          </div>
+          <div class="indicator-row">
+            <span class="indicator-row__label">STV</span>
+            <span class="indicator-row__value">{{ formatDecimal(formData.steviaStv) }}</span>
+          </div>
+          <div class="indicator-row">
+            <span class="indicator-row__label">RF</span>
+            <span class="indicator-row__value">{{ formatDecimal(formData.steviaRf) }}</span>
+          </div>
+          <div class="indicator-row">
+            <span class="indicator-row__label">RC</span>
+            <span class="indicator-row__value">{{ formatDecimal(formData.steviaRc) }}</span>
+          </div>
+          <div class="indicator-row">
+            <span class="indicator-row__label">DA</span>
+            <span class="indicator-row__value">{{ formatDecimal(formData.steviaDa) }}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 其他指标 -->
+      <div class="mobile-section">
+        <div class="mobile-section__title">其他指标</div>
+        <div class="mobile-indicator-list">
+          <div class="indicator-row">
+            <span class="indicator-row__label">RV</span>
+            <span class="indicator-row__value">{{ formatDecimal(formData.steviaRv) }}</span>
+          </div>
+          <div class="indicator-row">
+            <span class="indicator-row__label">RB</span>
+            <span class="indicator-row__value">{{ formatDecimal(formData.steviaRb) }}</span>
+          </div>
+          <div class="indicator-row">
+            <span class="indicator-row__label">SB</span>
+            <span class="indicator-row__value">{{ formatDecimal(formData.steviaSb) }}</span>
+          </div>
+          <div class="indicator-row">
+            <span class="indicator-row__label">比吸光</span>
+            <span class="indicator-row__value">{{ formatDecimal(formData.steviaSpecificAbsorbance) }}</span>
+          </div>
+          <div class="indicator-row">
+            <span class="indicator-row__label">透光率</span>
+            <span class="indicator-row__value">{{ formatPercent(formData.steviaTransmittance) }}%</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 备注 -->
+      <div class="mobile-section" v-if="formData.remark">
+        <div class="mobile-section__title">备注信息</div>
+        <div class="remark-content">{{ formData.remark }}</div>
+      </div>
+    </div>
+
+    <template #footer>
+      <div class="mobile-drawer-footer">
+        <el-button @click="dialogVisible = false" style="flex:1">关闭</el-button>
+      </div>
+    </template>
+  </el-drawer>
+
+  <!-- PC端使用对话框 -->
   <el-dialog
+    v-else
     v-model="dialogVisible"
     title="质检详情"
     width="80%"
@@ -26,7 +163,7 @@
       </el-descriptions-item>
     </el-descriptions>
 
-    <el-divider content-position="left">甜菊糖检验指标</el-divider>
+    <el-divider content-position="left">甘菊糖检验指标</el-divider>
 
     <el-row :gutter="20">
       <el-col :span="8">
@@ -35,7 +172,7 @@
             <span class="card-header">主要成分</span>
           </template>
           <el-descriptions :column="1" size="small">
-            <el-descriptions-item label="甜菊糖糖苷(%)">
+            <el-descriptions-item label="甘菊糖糖苷(%)">
               {{ formatPercent(formData.steviaGlycosidesPercent) }}
             </el-descriptions-item>
             <el-descriptions-item label="水分(%)">
@@ -54,7 +191,7 @@
       <el-col :span="8">
         <el-card shadow="never" class="mb-4">
           <template #header>
-            <span class="card-header">甜菊糖苷组分</span>
+            <span class="card-header">甘菊糖苷组分</span>
           </template>
           <el-descriptions :column="1" size="small">
             <el-descriptions-item label="RD">
@@ -122,8 +259,13 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
 import { FinishedProductQuality } from '@/api/mes/quality/productquality'
 import { formatDate } from '@/utils/formatTime'
+import { useWindowSize } from '@vueuse/core'
+
+const { width } = useWindowSize()
+const isMobile = computed(() => width.value < 768)
 
 const dialogVisible = ref(false)
 const formData = ref<FinishedProductQuality>({} as FinishedProductQuality)
@@ -163,7 +305,7 @@ defineExpose({
 })
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .card-header {
   font-weight: bold;
   color: #409eff;
@@ -181,4 +323,134 @@ defineExpose({
   padding: 12px 20px;
   background-color: #f5f7fa;
 }
+
+// 移动端样式
+.mobile-detail {
+  padding-bottom: 20px;
+}
+
+.mobile-section {
+  margin-bottom: 20px;
+  
+  &__title {
+    font-size: 15px;
+    font-weight: 600;
+    color: #303133;
+    margin-bottom: 12px;
+    padding-bottom: 8px;
+    border-bottom: 2px solid #409eff;
+  }
+}
+
+.mobile-info-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+}
+
+.info-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 10px;
+  background: #f5f7fa;
+  border-radius: 6px;
+  
+  &__label {
+    font-size: 12px;
+    color: #909399;
+  }
+  
+  &__value {
+    font-size: 14px;
+    color: #303133;
+    font-weight: 500;
+    
+    &.highlight {
+      color: #409eff;
+      font-size: 16px;
+    }
+  }
+}
+
+.mobile-indicator-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px;
+}
+
+.indicator-card {
+  padding: 12px;
+  background: #f5f7fa;
+  border-radius: 8px;
+  text-align: center;
+  
+  &.primary {
+    background: #ecf5ff;
+    border: 1px solid #b3d8ff;
+  }
+  
+  &__label {
+    display: block;
+    font-size: 12px;
+    color: #909399;
+    margin-bottom: 4px;
+  }
+  
+  &__value {
+    display: block;
+    font-size: 18px;
+    font-weight: 600;
+    color: #303133;
+  }
+  
+  &.primary &__value {
+    color: #409eff;
+  }
+}
+
+.mobile-indicator-list {
+  background: #f5f7fa;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.indicator-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 14px;
+  border-bottom: 1px solid #e4e7ed;
+  
+  &:last-child {
+    border-bottom: none;
+  }
+  
+  &__label {
+    font-size: 13px;
+    color: #606266;
+  }
+  
+  &__value {
+    font-size: 14px;
+    font-weight: 500;
+    color: #303133;
+  }
+}
+
+.remark-content {
+  padding: 12px;
+  background: #fafafa;
+  border-radius: 6px;
+  font-size: 14px;
+  color: #606266;
+  line-height: 1.6;
+}
+
+.mobile-drawer-footer {
+  display: flex;
+  gap: 12px;
+  padding: 12px 16px;
+  border-top: 1px solid #f0f0f0;
+}
 </style>
diff --git a/src/views/erp/stock/batch/index.vue b/src/views/erp/stock/batch/index.vue
index 6ee70f7..3759804 100644
--- a/src/views/erp/stock/batch/index.vue
+++ b/src/views/erp/stock/batch/index.vue
@@ -1,105 +1,238 @@
 <template>
-  <ContentWrap>
-    <!-- 搜索工作栏 -->
-    <el-form
-      class="-mb-15px"
-      :model="queryParams"
-      ref="queryFormRef"
-      :inline="true"
-      label-width="120px"
-    >
-      <el-form-item label="批号" prop="workOrderCode">
+  <!-- 移动端布局 -->
+  <div v-if="isMobile" class="mobile-batch-list">
+    <!-- 顶部操作栏 -->
+    <div class="mobile-header">
+      <div class="mobile-header__search">
         <el-input
           v-model="queryParams.workOrderCode"
-          placeholder="请输入批号"
+          placeholder="搜索批号"
           clearable
           @keyup.enter="handleQuery"
-          class="!w-240px"
+          :prefix-icon="Search"
         />
-      </el-form-item>
-      <el-form-item label="状态" prop="status">
-        <el-select
-          v-model="queryParams.status"
-          placeholder="请选择状态"
-          clearable
-          class="!w-240px"
-        >
-<!--          <el-option label="待检" :value="0" />-->
-<!--          <el-option label="检验中" :value="1" />-->
-<!--          <el-option label="已完成" :value="2" />-->
-          <el-option label="已入库" :value="3" />
-          <el-option label="已出库" :value="4" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="产量范围(吨)" prop="weightRange">
-        <el-input
-          v-model="queryParams.weightMin"
-          placeholder="最小值"
-          clearable
-          class="!w-100px"
-          style="margin-right: 10px"
-        />
-        <el-input
-          v-model="queryParams.weightMax"
-          placeholder="最大值"
-          clearable
-          class="!w-100px"
-        />
-      </el-form-item>
-      <el-form-item label="甜菊糖糖苷(%)" prop="steviaGlycosidesPercentRange">
-        <el-input
-          v-model="queryParams.steviaGlycosidesPercentMin"
-          placeholder="最小值"
-          clearable
-          class="!w-100px"
-          style="margin-right: 10px"
-        />
-        <el-input
-          v-model="queryParams.steviaGlycosidesPercentMax"
-          placeholder="最大值"
-          clearable
-          class="!w-100px"
-        />
-      </el-form-item>
-      <el-form-item label="质检时间" prop="inspectionTime">
-        <el-date-picker
-          v-model="queryParams.inspectionTime"
-          value-format="YYYY-MM-DD HH:mm:ss"
-          type="daterange"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="创建时间" prop="createTime">
-        <el-date-picker
-          v-model="queryParams.createTime"
-          value-format="YYYY-MM-DD HH:mm:ss"
-          type="daterange"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
-        <el-button
-          type="success"
-          plain
-          @click="handleExport"
-          :loading="exportLoading"
-        >
-          <Icon icon="ep:download" class="mr-5px" /> 导出
-        </el-button>
-      </el-form-item>
-    </el-form>
-  </ContentWrap>
+      </div>
+      <div class="mobile-header__actions">
+        <el-button :icon="Filter" circle @click="filterVisible = true" />
+      </div>
+    </div>
 
-  <!-- 列表 -->
-  <ContentWrap>
+    <!-- 快捷筛选 -->
+    <div class="mobile-quick-filter">
+      <div
+        class="quick-filter-item"
+        :class="{ active: queryParams.status === undefined }"
+        @click="handleQuickFilter(undefined)"
+      >全部</div>
+      <div
+        class="quick-filter-item"
+        :class="{ active: queryParams.status === 3 }"
+        @click="handleQuickFilter(3)"
+      >已入库</div>
+      <div
+        class="quick-filter-item"
+        :class="{ active: queryParams.status === 4 }"
+        @click="handleQuickFilter(4)"
+      >已出库</div>
+    </div>
+
+    <!-- 卡片列表 -->
+    <div class="mobile-list" v-loading="loading">
+      <div v-if="list.length === 0 && !loading" class="mobile-empty">
+        <el-empty description="暂无数据" />
+      </div>
+      <div
+        v-for="row in list"
+        :key="row.id"
+        class="mobile-card"
+        @click="viewDetails(row)"
+      >
+        <div class="mobile-card__header">
+          <span class="mobile-card__code">{{ row.workOrderCode }}</span>
+          <el-tag :type="getStatusTagType(row.status)" size="small">
+            {{ getStatusLabel(row.status) }}
+          </el-tag>
+        </div>
+        <div class="mobile-card__body">
+          <div class="mobile-card__main-info">
+            <div class="info-item">
+              <span class="info-label">产量</span>
+              <span class="info-value">{{ row.weight }} 吨</span>
+            </div>
+            <div class="info-item">
+              <span class="info-label">糖苷</span>
+              <span class="info-value highlight">{{ formatPercent(row.steviaGlycosidesPercent) }}%</span>
+            </div>
+          </div>
+          <div class="mobile-card__indicators">
+            <span class="indicator">RD: {{ formatDecimal(row.steviaRd) }}</span>
+            <span class="indicator">RA: {{ formatDecimal(row.steviaRa) }}</span>
+            <span class="indicator">STV: {{ formatDecimal(row.steviaStv) }}</span>
+            <span class="indicator">水分: {{ formatPercent(row.steviaMoisture) }}%</span>
+          </div>
+        </div>
+        <div class="mobile-card__footer">
+          <span class="mobile-card__time">{{ formatTime(row.inspectionTime) }}</span>
+          <el-button size="small" type="primary" link>查看详情 &gt;</el-button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 分页 -->
+    <div class="mobile-pagination" v-if="total > 0">
+      <Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize" :page-sizes="[10, 20]" layout="total, prev, pager, next" :pager-count="5" @pagination="getList" />
+    </div>
+
+    <!-- 筛选抽屉 -->
+    <el-drawer v-model="filterVisible" title="筛选条件" direction="btt" size="70%">
+      <el-form :model="queryParams" ref="queryFormRef" label-position="top">
+        <el-form-item label="批号" prop="workOrderCode">
+          <el-input v-model="queryParams.workOrderCode" placeholder="请输入批号" clearable />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-select v-model="queryParams.status" placeholder="请选择状态" clearable style="width:100%">
+            <el-option label="已入库" :value="3" />
+            <el-option label="已出库" :value="4" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="产量范围(吨)">
+          <el-row :gutter="10">
+            <el-col :span="12">
+              <el-input v-model="queryParams.weightMin" placeholder="最小值" clearable />
+            </el-col>
+            <el-col :span="12">
+              <el-input v-model="queryParams.weightMax" placeholder="最大值" clearable />
+            </el-col>
+          </el-row>
+        </el-form-item>
+        <el-form-item label="甘菊糖糖苷(%)">
+          <el-row :gutter="10">
+            <el-col :span="12">
+              <el-input v-model="queryParams.steviaGlycosidesPercentMin" placeholder="最小值" clearable />
+            </el-col>
+            <el-col :span="12">
+              <el-input v-model="queryParams.steviaGlycosidesPercentMax" placeholder="最大值" clearable />
+            </el-col>
+          </el-row>
+        </el-form-item>
+        <el-form-item label="质检时间" prop="inspectionTime">
+          <el-date-picker
+            v-model="queryParams.inspectionTime"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            type="daterange"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            style="width:100%"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="resetQuery">重置</el-button>
+        <el-button type="primary" @click="handleFilterConfirm">确认筛选</el-button>
+      </template>
+    </el-drawer>
+  </div>
+
+  <!-- PC端布局 -->
+  <template v-else>
+    <ContentWrap>
+      <!-- 搜索工作栏 -->
+      <el-form
+        class="-mb-15px"
+        :model="queryParams"
+        ref="queryFormRef"
+        :inline="true"
+        label-width="120px"
+      >
+        <el-form-item label="批号" prop="workOrderCode">
+          <el-input
+            v-model="queryParams.workOrderCode"
+            placeholder="请输入批号"
+            clearable
+            @keyup.enter="handleQuery"
+            class="!w-240px"
+          />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-select
+            v-model="queryParams.status"
+            placeholder="请选择状态"
+            clearable
+            class="!w-240px"
+          >
+            <el-option label="已入库" :value="3" />
+            <el-option label="已出库" :value="4" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="产量范围(吨)" prop="weightRange">
+          <el-input
+            v-model="queryParams.weightMin"
+            placeholder="最小值"
+            clearable
+            class="!w-100px"
+            style="margin-right: 10px"
+          />
+          <el-input
+            v-model="queryParams.weightMax"
+            placeholder="最大值"
+            clearable
+            class="!w-100px"
+          />
+        </el-form-item>
+        <el-form-item label="甘菊糖糖苷(%)" prop="steviaGlycosidesPercentRange">
+          <el-input
+            v-model="queryParams.steviaGlycosidesPercentMin"
+            placeholder="最小值"
+            clearable
+            class="!w-100px"
+            style="margin-right: 10px"
+          />
+          <el-input
+            v-model="queryParams.steviaGlycosidesPercentMax"
+            placeholder="最大值"
+            clearable
+            class="!w-100px"
+          />
+        </el-form-item>
+        <el-form-item label="质检时间" prop="inspectionTime">
+          <el-date-picker
+            v-model="queryParams.inspectionTime"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            type="daterange"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+            class="!w-240px"
+          />
+        </el-form-item>
+        <el-form-item label="创建时间" prop="createTime">
+          <el-date-picker
+            v-model="queryParams.createTime"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            type="daterange"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+            class="!w-240px"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+          <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+          <el-button
+            type="success"
+            plain
+            @click="handleExport"
+            :loading="exportLoading"
+          >
+            <Icon icon="ep:download" class="mr-5px" /> 导出
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </ContentWrap>
+
+    <!-- 列表 -->
+    <ContentWrap>
     <el-table
       v-loading="loading"
       :data="list"
@@ -221,26 +354,34 @@
       @pagination="getList"
     />
   </ContentWrap>
+  </template>
 
   <!-- 详情弹窗 -->
   <QualityDetailDialog ref="detailDialogRef" />
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
 import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
 import { getWarehousedFinishedProductQualityPage, exportWarehousedFinishedProductQuality, FinishedProductQuality } from '@/api/mes/quality/productquality'
 import QualityDetailDialog from './QualityDetailDialog.vue'
+import { useWindowSize } from '@vueuse/core'
+import { Search, Filter } from '@element-plus/icons-vue'
 
 /** 质检批次数据 列表 */
 defineOptions({ name: 'QualityBatch' })
 
+const { width } = useWindowSize()
+const isMobile = computed(() => width.value < 768)
+
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 
 const loading = ref(true) // 列表的加载中
 const list = ref<FinishedProductQuality[]>([]) // 列表的数据
 const total = ref(0) // 列表的总页数
+const filterVisible = ref(false) // 筛选抽屉
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
@@ -276,10 +417,31 @@ const handleQuery = () => {
 
 /** 重置按钮操作 */
 const resetQuery = () => {
-  queryFormRef.value.resetFields()
+  queryFormRef.value?.resetFields()
   handleQuery()
 }
 
+/** 快捷筛选 */
+const handleQuickFilter = (status: number | undefined) => {
+  queryParams.status = status
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 筛选确认 */
+const handleFilterConfirm = () => {
+  filterVisible.value = false
+  handleQuery()
+}
+
+/** 格式化时间 */
+const formatTime = (time: string) => {
+  if (!time) return '-'
+  const date = new Date(time)
+  return date.toLocaleDateString('zh-CN', { month: '2-digit', day: '2-digit' }) + ' ' + 
+         date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
+}
+
 /** 导出按钮操作 */
 const handleExport = async () => {
   try {
@@ -735,4 +897,138 @@ onMounted(() => {
     }
   }
 }
+
+.mobile-batch-list {
+  padding: 12px;
+  background: #f5f5f5;
+  min-height: 100vh;
+}
+
+.mobile-header {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin-bottom: 12px;
+  &__search { flex: 1; }
+  &__actions { display: flex; gap: 4px; flex-shrink: 0; }
+}
+
+.mobile-quick-filter {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 12px;
+  overflow-x: auto;
+  
+  .quick-filter-item {
+    padding: 6px 14px;
+    font-size: 13px;
+    border-radius: 16px;
+    cursor: pointer;
+    color: #909399;
+    background: #fff;
+    white-space: nowrap;
+    transition: all 0.2s;
+    
+    &.active {
+      color: #fff;
+      background: #409eff;
+    }
+  }
+}
+
+.mobile-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.mobile-empty { padding: 40px 0; }
+
+.mobile-card {
+  background: #fff;
+  border-radius: 10px;
+  padding: 14px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
+  
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+  }
+  
+  &__code {
+    font-weight: 600;
+    font-size: 15px;
+    color: #303133;
+  }
+  
+  &__body {
+    font-size: 13px;
+  }
+  
+  &__main-info {
+    display: flex;
+    gap: 20px;
+    margin-bottom: 10px;
+    
+    .info-item {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+    
+    .info-label {
+      font-size: 11px;
+      color: #909399;
+    }
+    
+    .info-value {
+      font-size: 16px;
+      font-weight: 600;
+      color: #303133;
+      
+      &.highlight {
+        color: #409eff;
+      }
+    }
+  }
+  
+  &__indicators {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    padding: 8px 0;
+    border-top: 1px solid #f0f0f0;
+    
+    .indicator {
+      font-size: 12px;
+      color: #606266;
+      background: #f5f7fa;
+      padding: 2px 8px;
+      border-radius: 4px;
+    }
+  }
+  
+  &__footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 10px;
+    padding-top: 10px;
+    border-top: 1px solid #f0f0f0;
+  }
+  
+  &__time {
+    font-size: 12px;
+    color: #909399;
+  }
+}
+
+.mobile-pagination {
+  margin-top: 12px;
+  display: flex;
+  justify-content: center;
+  :deep(.el-pagination) { flex-wrap: wrap; justify-content: center; }
+}
 </style>