生产适配手机端

src/views/mes/production/material-requisition/MaterialRequisitionForm.vue

@@ -1,14 +1,14 @@
 <template>
-  <Dialog :title="dialogTitle" v-model="dialogVisible" width="80%">
+  <Dialog :title="dialogTitle" v-model="dialogVisible" :width="isMobile ? '100%' : '80%'" :fullscreen="isMobile">
     <el-form
       ref="formRef"
       :model="formData"
       :rules="formRules"
-      label-width="100px"
+      :label-width="isMobile ? '80px' : '100px'"
       v-loading="formLoading"
     >
-      <el-row :gutter="20">
+      <el-row :gutter="isMobile ? 0 : 20">
-        <el-col :span="12">
+        <el-col :span="isMobile ? 24 : 12">
           <el-form-item label="工单编号" prop="orderCode">
             <el-input
               v-model="formData.orderCode"
@@ -24,15 +24,15 @@
             </el-input>
           </el-form-item>
         </el-col>
-        <el-col :span="12">
+        <el-col :span="isMobile ? 24 : 12">
           <el-form-item label="领料单号" prop="code">
             <el-input v-model="formData.code" placeholder="请输入领料单号" />
           </el-form-item>
         </el-col>
       </el-row>
 
-      <el-row :gutter="20">
+      <el-row :gutter="isMobile ? 0 : 20">
-        <el-col :span="12">
+        <el-col :span="isMobile ? 24 : 12">
           <el-form-item label="领料时间" prop="requisitionTime">
             <el-date-picker
               v-model="formData.requisitionTime"
@@ -43,7 +43,7 @@
             />
           </el-form-item>
         </el-col>
-        <el-col :span="12">
+        <el-col :span="isMobile ? 24 : 12">
           <el-form-item label="申请人" prop="applicantName">
             <el-input
               v-model="formData.applicantName"
@@ -55,8 +55,8 @@
         </el-col>
       </el-row>
 
-      <el-row :gutter="20">
+      <el-row :gutter="isMobile ? 0 : 20">
-        <el-col :span="12">
+        <el-col :span="isMobile ? 24 : 12">
           <el-form-item label="选择BOM">
             <el-select
               v-model="selectedBomId"
@@ -75,7 +75,7 @@
             </el-select>
           </el-form-item>
         </el-col>
-        <el-col :span="12">
+        <el-col :span="isMobile ? 24 : 12">
           <el-form-item label="备注" prop="remark">
             <el-input v-model="formData.remark"  placeholder="请输入备注" />
           </el-form-item>
@@ -632,6 +632,10 @@ import { WarehouseApi } from '@/api/erp/stock/warehouse'
 import { WeighApi } from '@/api/erp/purchase/weigh'
 import { YVHgetWorkOrderPage } from '@/api/mes/production/workorder'
 import { getProductBomPage, getProductBom, ProductBomVO, ProductBomItemVO } from '@/api/mes/product/bom'
+import { useWindowSize } from '@vueuse/core'
+
+const { width } = useWindowSize()
+const isMobile = computed(() => width.value < 768)
 
 const emit = defineEmits(['success'])
 const dialogVisible = ref(false)

src/views/mes/production/material-requisition/index.vue

@@ -1,4 +1,122 @@
 <template>
+  <!-- 手机端布局 -->
+  <div v-if="isMobile" class="mobile-requisition-list">
+    <!-- 顶部操作栏 -->
+    <div class="mobile-header">
+      <div class="mobile-header__search">
+        <el-input
+          v-model="queryParams.code"
+          placeholder="搜索领料单号"
+          clearable
+          @keyup.enter="handleQuery"
+          :prefix-icon="Search"
+        />
+      </div>
+      <div class="mobile-header__actions">
+        <el-button :icon="Filter" circle @click="filterVisible = true" />
+        <el-button type="primary" :icon="Plus" circle @click="openForm('create')" v-hasPermi="['mes:material-requisition:create']" />
+      </div>
+    </div>
+
+    <!-- 快捷筛选 -->
+    <div class="mobile-header__quick-filter">
+      <div
+        class="quick-filter-item"
+        :class="{ active: quickFilterStatus === undefined }"
+        @click="handleQuickFilter(undefined)"
+      >全部</div>
+      <div
+        class="quick-filter-item"
+        :class="{ active: quickFilterStatus === 1 }"
+        @click="handleQuickFilter(1)"
+      >待审核</div>
+      <div
+        class="quick-filter-item"
+        :class="{ active: quickFilterStatus === 2 }"
+        @click="handleQuickFilter(2)"
+      >已审核</div>
+      <div
+        class="quick-filter-item"
+        :class="{ active: quickFilterStatus === 3 }"
+        @click="handleQuickFilter(3)"
+      >已领料</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="handleCardClick(row)"
+      >
+        <div class="mobile-card__header">
+          <span class="mobile-card__no">{{ row.code }}</span>
+          <el-tag :type="getStatusType(row.status)" size="small">{{ getStatusText(row.status) }}</el-tag>
+        </div>
+        <div class="mobile-card__body">
+          <div class="mobile-card__row">
+            <span class="mobile-card__label">批次信息</span>
+            <span class="mobile-card__value">{{ row.orderCode || '-' }}</span>
+          </div>
+          <div class="mobile-card__row">
+            <span class="mobile-card__label">领料时间</span>
+            <span class="mobile-card__value">{{ formatDate(row.requisitionTime) }}</span>
+          </div>
+          <div class="mobile-card__row">
+            <span class="mobile-card__label">申请人</span>
+            <span class="mobile-card__value">{{ row.applicantName || '-' }}</span>
+          </div>
+          <div class="mobile-card__row">
+            <span class="mobile-card__label">审批人</span>
+            <span class="mobile-card__value">{{ row.approverName || '-' }}</span>
+          </div>
+        </div>
+        <div class="mobile-card__footer" @click.stop>
+          <el-button size="small" @click="handleView(row.id)">详情</el-button>
+          <el-button size="small" type="primary" @click="openForm('update', row.id)" v-if="row.status === 1">编辑</el-button>
+          <el-button size="small" type="success" @click="handleApprove(row.id)" v-if="row.status === 1">审核</el-button>
+          <el-button size="small" type="success" @click="handleComplete(row.id)" v-if="row.status === 2">确认领料</el-button>
+          <el-button size="small" type="warning" @click="handleReverse(row.id)" v-if="row.status === 2">反审核</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="50%">
+      <el-form :model="queryParams" ref="queryFormRef" label-position="top">
+        <el-form-item label="工单编号" prop="orderCode">
+          <el-input v-model="queryParams.orderCode" placeholder="请输入工单编号" clearable style="width:100%" />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-select v-model="queryParams.status" placeholder="请选择状态" clearable style="width:100%">
+            <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="createTime">
+          <el-date-picker v-model="queryParams.createTime" type="daterange" value-format="YYYY-MM-DD HH:mm:ss" 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>
     <doc-alert title="【MES】生产领料管理" url="https://doc.iocoder.cn/mes/material-requisition/" />
 
     <ContentWrap>
@@ -57,15 +175,6 @@
           >
             <Icon icon="ep:plus" class="mr-5px" /> 新增
           </el-button>
-        <!-- <el-button
-          type="danger"
-          plain
-          @click="handleDelete(selectionList.map((item) => item.id))"
-          v-hasPermi="['mes:material-requisition:delete']"
-          :disabled="selectionList.length === 0"
-        >
-          <Icon icon="ep:delete" class="mr-5px" /> 删除
-        </el-button> -->
         </el-form-item>
       </el-form>
     </ContentWrap>
@@ -181,6 +290,7 @@
         @pagination="getList"
       />
     </ContentWrap>
+  </template>
 
   <!-- 表单弹窗：添加/修改 -->
   <MaterialRequisitionForm ref="formRef" @success="getList" />
@@ -191,6 +301,7 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted, computed } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
+import { Search, Filter, Plus } from '@element-plus/icons-vue'
 import { formatDate } from '@/utils/formatTime'
 import {
   getMaterialRequisitionPage,
@@ -201,6 +312,14 @@ import { Icon } from '@/components/Icon'
 import MaterialRequisitionForm from './MaterialRequisitionForm.vue'
 import MaterialRequisitionView from './MaterialRequisitionView.vue'
 import { useUserStore } from '@/store/modules/user'
+import { useWindowSize } from '@vueuse/core'
+
+const { width } = useWindowSize()
+const isMobile = computed(() => width.value < 768)
+
+// 手机端筛选相关
+const filterVisible = ref(false)
+const quickFilterStatus = ref<number | undefined>(undefined)
 
 const userStore = useUserStore()
 const currentUser = computed(() => userStore.user)
@@ -263,9 +382,33 @@ const resetQuery = () => {
   queryParams.orderCode = undefined
   queryParams.status = undefined
   queryParams.createTime = undefined
+  quickFilterStatus.value = undefined
   handleQuery()
 }
 
+/** 快捷筛选 */
+const handleQuickFilter = (status: number | undefined) => {
+  quickFilterStatus.value = status
+  queryParams.status = status
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 筛选确认 */
+const handleFilterConfirm = () => {
+  filterVisible.value = false
+  handleQuery()
+}
+
+/** 卡片点击 */
+const handleCardClick = (row: any) => {
+  if (row.status === 1) {
+    openForm('update', row.id)
+  } else {
+    handleView(row.id)
+  }
+}
+
 const openForm = (type: 'create' | 'update', id?: number) => {
   console.log('打开表单:', type, id)
   formRef.value.open(type, id)
@@ -355,3 +498,80 @@ onMounted(() => {
   getList()
 })
 </script>
+
+<style lang="scss" scoped>
+.mobile-requisition-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-header__quick-filter {
+  display: flex;
+  gap: 12px;
+  margin: 8px 0;
+  justify-content: flex-start;
+
+  .quick-filter-item {
+    padding: 4px 12px;
+    font-size: 14px;
+    border-radius: 20px;
+    cursor: pointer;
+    color: #909399;
+    background: transparent;
+    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;
+  }
+  &__no { font-weight: 600; font-size: 15px; color: #303133; }
+  &__body { font-size: 13px; }
+  &__row { display: flex; justify-content: space-between; padding: 3px 0; }
+  &__label { color: #909399; flex-shrink: 0; margin-right: 12px; }
+  &__value {
+    color: #606266;
+    text-align: right;
+    &--ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
+  }
+  &__footer { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #f0f0f0; }
+}
+
+.mobile-pagination {
+  margin-top: 12px;
+  display: flex;
+  justify-content: center;
+  :deep(.el-pagination) { flex-wrap: wrap; justify-content: center; }
+}
+</style>

src/views/mes/production/plan/detail/index.vue

@@ -3,7 +3,7 @@
 
   <ContentWrap v-loading="loading">
     <!-- 计划基本信息 -->
-    <el-descriptions title="计划基本信息" :column="3" border>
+    <el-descriptions title="计划基本信息" :column="isMobile ? 1 : 3" border>
       <el-descriptions-item label="计划编号">{{ planInfo.planCode }}</el-descriptions-item>
       <el-descriptions-item label="计划名称">{{ planInfo.planName }}</el-descriptions-item>
       <el-descriptions-item label="计划类型">
@@ -20,7 +20,7 @@
         </el-tag>
       </el-descriptions-item>
       <el-descriptions-item label="创建时间">{{ planInfo.createTime }}</el-descriptions-item>
-      <el-descriptions-item label="备注" :span="3">{{ planInfo.remark || '-' }}</el-descriptions-item>
+      <el-descriptions-item label="备注" :span="isMobile ? 1 : 3">{{ planInfo.remark || '-' }}</el-descriptions-item>
     </el-descriptions>
 
     <!-- 完成情况统计 -->
@@ -37,26 +37,26 @@
           </el-button>
         </div>
       </template>
-      <el-row :gutter="20">
+      <el-row :gutter="isMobile ? 10 : 20">
-        <el-col :span="6">
+        <el-col :span="isMobile ? 12 : 6">
           <div class="stat-card">
             <div class="stat-label">总计划数量</div>
             <div class="stat-value text-blue-600">{{ planInfo.totalPlanQuantity || 0 }}</div>
           </div>
         </el-col>
-        <el-col :span="6">
+        <el-col :span="isMobile ? 12 : 6">
           <div class="stat-card">
             <div class="stat-label">已完成数量</div>
             <div class="stat-value text-green-600">{{ planInfo.totalCompletedQuantity || 0 }}</div>
           </div>
         </el-col>
-        <el-col :span="6">
+        <el-col :span="isMobile ? 12 : 6" :class="isMobile ? 'mt-10px' : ''">
           <div class="stat-card">
             <div class="stat-label">进行中数量</div>
             <div class="stat-value text-orange-600">{{ planInfo.totalInProgressQuantity || 0 }}</div>
           </div>
         </el-col>
-        <el-col :span="6">
+        <el-col :span="isMobile ? 12 : 6" :class="isMobile ? 'mt-10px' : ''">
           <div class="stat-card">
             <div class="stat-label">整体完成率</div>
             <div class="stat-value" :style="{ color: getProgressColor(planInfo.overallCompletionRate) }">
@@ -221,7 +221,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Icon } from '@/components/Icon'
@@ -232,6 +232,10 @@ import {
   updatePlanProgress
 } from '@/api/mes/production/plan'
 import { YVHgetWorkOrderPage } from '@/api/mes/production/workorder'
+import { useWindowSize } from '@vueuse/core'
+
+const { width } = useWindowSize()
+const isMobile = computed(() => width.value < 768)
 
 defineOptions({ name: 'MesProductionPlanDetail' })
 
@@ -414,4 +418,19 @@ onMounted(() => {
     font-weight: bold;
   }
 }
+
+@media screen and (max-width: 768px) {
+  .stat-card {
+    padding: 12px;
+
+    .stat-label {
+      font-size: 12px;
+      margin-bottom: 6px;
+    }
+
+    .stat-value {
+      font-size: 20px;
+    }
+  }
+}
 </style>

src/views/mes/production/plan/list/GenerateMonthlyPlanDialog.vue

@@ -1,5 +1,91 @@
 <template>
-  <Dialog v-model="dialogVisible" title="生成月度计划" width="600px">
+  <!-- 移动端使用抽屉 -->
+  <el-drawer
+    v-if="isMobile"
+    v-model="dialogVisible"
+    title="生成月度计划"
+    direction="btt"
+    size="85%"
+    :close-on-click-modal="false"
+  >
+    <el-form ref="formRef" :model="formData" :rules="rules" label-position="top">
+      <el-alert
+        title="提示"
+        type="info"
+        :closable="false"
+        class="mb-15px"
+      >
+        <template #default>
+          <div class="mobile-alert-text">从年度计划生成月度计划，系统将根据所选月份和分配策略自动生成对应的月度计划。</div>
+        </template>
+      </el-alert>
+
+      <div class="mobile-form-section">
+        <div class="mobile-form-section__title">计划信息</div>
+        <el-form-item label="年度计划" prop="annualPlanId">
+          <div class="plan-info">
+            <div class="plan-info__code">{{ annualPlan?.planCode }}</div>
+            <div class="plan-info__name">{{ annualPlan?.planName }}</div>
+          </div>
+        </el-form-item>
+
+        <el-form-item label="计划周期" prop="planPeriod">
+          <el-tag type="danger">{{ annualPlan?.planPeriod }}</el-tag>
+        </el-form-item>
+      </div>
+
+      <div class="mobile-form-section">
+        <div class="mobile-form-section__title">选择月份</div>
+        <el-form-item prop="months" required>
+          <div class="month-grid">
+            <div
+              v-for="month in availableMonths"
+              :key="month"
+              class="month-item"
+              :class="{
+                'month-item--selected': formData.months.includes(month),
+                'month-item--disabled': existingMonths.includes(month)
+              }"
+              @click="toggleMonth(month)"
+            >
+              <div class="month-item__label">{{ month }}月</div>
+              <div v-if="existingMonths.includes(month)" class="month-item__tag">已存在</div>
+            </div>
+          </div>
+        </el-form-item>
+      </div>
+
+      <div class="mobile-form-section">
+        <div class="mobile-form-section__title">分配策略</div>
+        <el-form-item prop="splitStrategy">
+          <el-radio-group v-model="formData.splitStrategy">
+            <el-radio label="average">平均分配</el-radio>
+            <el-radio label="proportional">按比例分配</el-radio>
+          </el-radio-group>
+          <div class="strategy-desc">
+            <div v-if="formData.splitStrategy === 'average'">
+              将年度计划数量平均分配到各月度计划
+            </div>
+            <div v-else>
+              根据各月工作日比例分配计划数量
+            </div>
+          </div>
+        </el-form-item>
+      </div>
+    </el-form>
+
+    <template #footer>
+      <div class="mobile-drawer-footer">
+        <el-button @click="dialogVisible = false" style="flex:1">取消</el-button>
+        <el-button type="primary" @click="handleSubmit" :loading="submitLoading" style="flex:1">
+          确定生成
+        </el-button>
+      </div>
+    </template>
+  </el-drawer>
+
+  <!-- PC端使用对话框 -->
+  <Dialog v-else v-model="dialogVisible" title="生成月度计划" width="600px">
     <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
       <el-alert
         title="提示"
@@ -68,11 +154,15 @@
 import { ref, reactive, computed } from 'vue'
 import { ElMessage } from 'element-plus'
 import { generateMonthlyPlans, type GenerateMonthlyPlanReqVO } from '@/api/mes/production/plan'
+import { useWindowSize } from '@vueuse/core'
 
 defineOptions({ name: 'GenerateMonthlyPlanDialog' })
 
 const emit = defineEmits(['success'])
 
+const { width } = useWindowSize()
+const isMobile = computed(() => width.value < 768)
+
 const dialogVisible = ref(false)
 const submitLoading = ref(false)
 const formRef = ref()
@@ -94,6 +184,17 @@ const rules = {
   splitStrategy: [{ required: true, message: '请选择分配策略', trigger: 'change' }]
 }
 
+const toggleMonth = (month: number) => {
+  if (existingMonths.value.includes(month)) return
+  
+  const index = formData.months.indexOf(month)
+  if (index > -1) {
+    formData.months.splice(index, 1)
+  } else {
+    formData.months.push(month)
+  }
+}
+
 const open = (plan: any) => {
   annualPlan.value = plan
   formData.annualPlanId = plan.id
@@ -138,3 +239,102 @@ const handleSubmit = async () => {
 
 defineExpose({ open })
 </script>
+
+<style lang="scss" scoped>
+.mobile-alert-text {
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.mobile-form-section {
+  margin-bottom: 20px;
+  
+  &__title {
+    font-size: 15px;
+    font-weight: 600;
+    color: #303133;
+    margin-bottom: 12px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid #f0f0f0;
+  }
+}
+
+.plan-info {
+  &__code {
+    font-size: 15px;
+    font-weight: 600;
+    color: #303133;
+    margin-bottom: 4px;
+  }
+  
+  &__name {
+    font-size: 13px;
+    color: #909399;
+  }
+}
+
+.month-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 10px;
+}
+
+.month-item {
+  padding: 12px;
+  border: 2px solid #dcdfe6;
+  border-radius: 8px;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.3s;
+  
+  &__label {
+    font-size: 14px;
+    font-weight: 500;
+    color: #606266;
+  }
+  
+  &__tag {
+    font-size: 11px;
+    color: #909399;
+    margin-top: 4px;
+  }
+  
+  &--selected {
+    border-color: #409eff;
+    background: #ecf5ff;
+    
+    .month-item__label {
+      color: #409eff;
+      font-weight: 600;
+    }
+  }
+  
+  &--disabled {
+    background: #f5f7fa;
+    border-color: #e4e7ed;
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+  
+  &:active:not(&--disabled) {
+    transform: scale(0.95);
+  }
+}
+
+.strategy-desc {
+  margin-top: 8px;
+  padding: 8px 12px;
+  background: #f5f7fa;
+  border-radius: 6px;
+  font-size: 12px;
+  color: #606266;
+  line-height: 1.5;
+}
+
+.mobile-drawer-footer {
+  display: flex;
+  gap: 12px;
+  padding: 12px 16px;
+  border-top: 1px solid #f0f0f0;
+}
+</style>

src/views/mes/production/plan/list/GenerateOrderDialog.vue

@@ -1,5 +1,105 @@
 <template>
+  <!-- 移动端使用抽屉 -->
+  <el-drawer
+    v-if="isMobile"
+    v-model="visible"
+    title="从计划生成工单"
+    direction="btt"
+    size="90%"
+    @close="handleClose"
+    :close-on-click-modal="false"
+  >
+    <div v-loading="formLoading">
+      <el-alert
+        title="提示"
+        type="info"
+        :closable="false"
+        class="mb-15px"
+      >
+        <template #default>
+          <div class="mobile-alert-text">
+            <div>计划名称：{{ planInfo.planName }}</div>
+            <div>计划周期：{{ planInfo.planPeriod }}</div>
+            <div>总计划数量：{{ planInfo.totalPlanQuantity }}</div>
+          </div>
+        </template>
+      </el-alert>
+
+      <div class="mobile-form-section">
+        <div class="mobile-form-section__title">选择产品</div>
+        <div class="product-list">
+          <div
+            v-for="item in planItems"
+            :key="item.id"
+            class="product-card"
+            :class="{ 'product-card--selected': form.itemIds.includes(item.id) }"
+            @click="toggleProduct(item)"
+          >
+            <div class="product-card__header">
+              <el-checkbox :model-value="form.itemIds.includes(item.id)" @click.stop="toggleProduct(item)" />
+              <span class="product-card__name">{{ item.productName }}</span>
+            </div>
+            <div class="product-card__stats">
+              <div class="stat-item">
+                <span class="stat-label">计划</span>
+                <span class="stat-value">{{ item.planQuantity }}</span>
+              </div>
+              <div class="stat-item">
+                <span class="stat-label">已完成</span>
+                <span class="stat-value success">{{ item.completedQuantity || 0 }}</span>
+              </div>
+              <div class="stat-item">
+                <span class="stat-label">进行中</span>
+                <span class="stat-value warning">{{ item.inProgressQuantity || 0 }}</span>
+              </div>
+            </div>
+            <div class="product-card__progress">
+              <el-progress
+                :percentage="item.completionRate || 0"
+                :format="() => `${item.completionRate || 0}%`"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="mobile-form-section">
+        <div class="mobile-form-section__title">拆分策略</div>
+        <el-radio-group v-model="form.splitStrategy">
+          <el-radio label="single">单个工单（不拆分）</el-radio>
+          <el-radio label="weekly">按周拆分</el-radio>
+          <el-radio label="daily">按天拆分</el-radio>
+        </el-radio-group>
+        <div class="strategy-desc">
+          <div v-if="form.splitStrategy === 'single'">将整个计划明细生成为一个工单</div>
+          <div v-if="form.splitStrategy === 'weekly'">按周拆分，每周生成一个工单</div>
+          <div v-if="form.splitStrategy === 'daily'">按天拆分，每天生成一个工单</div>
+        </div>
+      </div>
+
+      <div class="mobile-form-section">
+        <div class="mobile-form-section__title">其他设置</div>
+        <div class="switch-item">
+          <span class="switch-item__label">自动审核</span>
+          <el-switch v-model="form.autoApprove" />
+        </div>
+        <div class="switch-item__desc">开启后，生成的工单将自动审核通过</div>
+      </div>
+    </div>
+
+    <template #footer>
+      <div class="mobile-drawer-footer">
+        <el-button @click="visible = false" style="flex:1">取消</el-button>
+        <el-button type="primary" :loading="loading" @click="submitForm" style="flex:1">
+          生成工单
+        </el-button>
+      </div>
+    </template>
+  </el-drawer>
+
+  <!-- PC端使用对话框 -->
   <el-dialog
+    v-else
     title="从计划生成工单"
     v-model="visible"
     width="800px"
@@ -82,9 +182,13 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
+import { ref, reactive, computed } from 'vue'
 import { ElMessage } from 'element-plus'
 import { generateWorkOrders, getProductionPlan } from '@/api/mes/production/plan'
+import { useWindowSize } from '@vueuse/core'
+
+const { width } = useWindowSize()
+const isMobile = computed(() => width.value < 768)
 
 const emits = defineEmits(['success'])
 
@@ -142,6 +246,20 @@ const handleSelectionChange = (selection: any[]) => {
   form.itemIds = selection.map((item) => item.id)
 }
 
+const toggleProduct = (item: any) => {
+  const index = form.itemIds.indexOf(item.id)
+  if (index > -1) {
+    form.itemIds.splice(index, 1)
+    const selectedIndex = selectedItems.value.findIndex(i => i.id === item.id)
+    if (selectedIndex > -1) {
+      selectedItems.value.splice(selectedIndex, 1)
+    }
+  } else {
+    form.itemIds.push(item.id)
+    selectedItems.value.push(item)
+  }
+}
+
 const submitForm = () => {
   if (!form.itemIds || form.itemIds.length === 0) {
     ElMessage.warning('请至少选择一个产品')
@@ -171,3 +289,140 @@ const handleClose = () => {
 
 defineExpose({ open })
 </script>
+
+<style lang="scss" scoped>
+.mobile-alert-text {
+  font-size: 13px;
+  line-height: 1.6;
+  
+  div {
+    margin-bottom: 4px;
+  }
+}
+
+.mobile-form-section {
+  margin-bottom: 20px;
+  
+  &__title {
+    font-size: 15px;
+    font-weight: 600;
+    color: #303133;
+    margin-bottom: 12px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid #f0f0f0;
+  }
+}
+
+.product-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.product-card {
+  padding: 12px;
+  border: 2px solid #dcdfe6;
+  border-radius: 8px;
+  background: #fff;
+  transition: all 0.3s;
+  cursor: pointer;
+  
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 10px;
+  }
+  
+  &__name {
+    font-size: 14px;
+    font-weight: 500;
+    color: #303133;
+    flex: 1;
+  }
+  
+  &__stats {
+    display: flex;
+    justify-content: space-around;
+    margin-bottom: 10px;
+    padding: 8px 0;
+    border-top: 1px solid #f0f0f0;
+    border-bottom: 1px solid #f0f0f0;
+  }
+  
+  &__progress {
+    margin-top: 8px;
+  }
+  
+  &--selected {
+    border-color: #409eff;
+    background: #ecf5ff;
+  }
+  
+  &:active {
+    transform: scale(0.98);
+  }
+}
+
+.stat-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  
+  .stat-label {
+    font-size: 11px;
+    color: #909399;
+  }
+  
+  .stat-value {
+    font-size: 16px;
+    font-weight: 600;
+    color: #303133;
+    
+    &.success {
+      color: #67c23a;
+    }
+    
+    &.warning {
+      color: #e6a23c;
+    }
+  }
+}
+
+.strategy-desc {
+  margin-top: 8px;
+  padding: 8px 12px;
+  background: #f5f7fa;
+  border-radius: 6px;
+  font-size: 12px;
+  color: #606266;
+  line-height: 1.5;
+}
+
+.switch-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 0;
+  
+  &__label {
+    font-size: 14px;
+    color: #303133;
+  }
+  
+  &__desc {
+    font-size: 12px;
+    color: #909399;
+    margin-top: 4px;
+    line-height: 1.5;
+  }
+}
+
+.mobile-drawer-footer {
+  display: flex;
+  gap: 12px;
+  padding: 12px 16px;
+  border-top: 1px solid #f0f0f0;
+}
+</style>

src/views/mes/production/plan/list/ProductionPlanForm.vue

@@ -1,5 +1,189 @@
 <template>
+  <!-- 移动端使用抽屉 -->
+  <el-drawer
+    v-if="isMobile"
+    v-model="visible"
+    :title="formType === 'create' ? '新增生产计划' : '编辑生产计划'"
+    direction="rtl"
+    size="100%"
+    @close="handleClose"
+    :close-on-click-modal="false"
+  >
+    <el-form :model="form" :rules="rules" ref="formRef" label-position="top" v-loading="formLoading">
+      <div class="mobile-form-section">
+        <div class="mobile-form-section__title">基本信息</div>
+        <el-form-item label="计划编号" prop="planCode">
+          <el-input v-model="form.planCode" placeholder="请输入计划编号" />
+        </el-form-item>
+        <el-form-item label="计划名称" prop="planName">
+          <el-input v-model="form.planName" placeholder="请输入计划名称" />
+        </el-form-item>
+        <el-form-item label="计划类型" prop="planType">
+          <el-select v-model="form.planType" placeholder="请选择计划类型" style="width:100%">
+            <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="planPeriod">
+          <el-input v-model="form.planPeriod" placeholder="如:2024-01" />
+        </el-form-item>
+        <el-form-item label="父计划" prop="parentPlanId" v-if="filteredParentPlans.length > 0">
+          <el-select 
+            v-model="form.parentPlanId" 
+            placeholder="请选择父计划" 
+            clearable
+            filterable
+            style="width:100%"
+          >
+            <el-option
+              v-for="item in filteredParentPlans"
+              :key="item.id"
+              :label="`${item.planName} (${item.planCode})`"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+      </div>
+
+      <div class="mobile-form-section">
+        <div class="mobile-form-section__title">计划时间</div>
+        <el-form-item label="开始日期" prop="startDate">
+          <el-date-picker
+            v-model="form.startDate"
+            type="date"
+            placeholder="选择开始日期"
+            value-format="YYYY-MM-DD"
+            style="width:100%"
+          />
+        </el-form-item>
+        <el-form-item label="结束日期" prop="endDate">
+          <el-date-picker
+            v-model="form.endDate"
+            type="date"
+            placeholder="选择结束日期"
+            value-format="YYYY-MM-DD"
+            style="width:100%"
+          />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入备注" />
+        </el-form-item>
+      </div>
+
+      <div class="mobile-form-section">
+        <div class="mobile-form-section__title">
+          计划明细
+          <el-button type="primary" size="small" @click="handleAddItem" style="float:right">
+            <Icon icon="ep:plus" class="mr-5px" /> 添加产品
+          </el-button>
+        </div>
+        
+        <div class="product-items">
+          <div v-for="(item, index) in form.items" :key="index" class="product-item-card">
+            <div class="product-item-card__header">
+              <span class="product-item-card__index">{{ index + 1 }}</span>
+              <el-button link type="danger" @click="handleDeleteItem(index)">
+                <Icon icon="ep:delete" />
+              </el-button>
+            </div>
+            <el-form-item label="产品">
+              <el-select
+                v-model="item.productId"
+                placeholder="请选择产品"
+                filterable
+                @change="handleProductChange(item, index)"
+                style="width:100%"
+              >
+                <el-option
+                  v-for="product in productOptions"
+                  :key="product.id"
+                  :label="product.name"
+                  :value="product.id"
+                >
+                  <span>{{ product.name }}</span>
+                  <span class="text-gray-400 ml-10px">({{ product.barCode }})</span>
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="计划数量">
+              <el-input-number
+                v-model="item.planQuantity"
+                :min="1"
+                :precision="0"
+                controls-position="right"
+                style="width:100%"
+              />
+            </el-form-item>
+            <el-form-item label="工序路线">
+              <el-select
+                v-model="item.routeId"
+                placeholder="请选择工序路线"
+                filterable
+                @change="handleRouteChange(item)"
+                style="width:100%"
+              >
+                <el-option
+                  v-for="route in routeOptions"
+                  :key="route.id"
+                  :label="route.name"
+                  :value="route.id"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="优先级">
+              <el-input-number
+                v-model="item.priority"
+                :min="1"
+                :max="10"
+                controls-position="right"
+                style="width:100%"
+              />
+            </el-form-item>
+            <el-row :gutter="10">
+              <el-col :span="12">
+                <el-form-item label="计划开始">
+                  <el-date-picker
+                    v-model="item.plannedStartDate"
+                    type="date"
+                    placeholder="开始日期"
+                    value-format="YYYY-MM-DD"
+                    style="width:100%"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="计划结束">
+                  <el-date-picker
+                    v-model="item.plannedEndDate"
+                    type="date"
+                    placeholder="结束日期"
+                    value-format="YYYY-MM-DD"
+                    style="width:100%"
+                  />
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </div>
+          <div v-if="form.items.length === 0" class="empty-items">
+            <el-empty description="暂无产品，请添加" :image-size="80" />
+          </div>
+        </div>
+      </div>
+    </el-form>
+    
+    <template #footer>
+      <div class="mobile-drawer-footer">
+        <el-button @click="visible = false" style="flex:1">取消</el-button>
+        <el-button type="primary" :loading="loading" @click="submitForm" style="flex:1">确定</el-button>
+      </div>
+    </template>
+  </el-drawer>
+
+  <!-- PC端使用对话框 -->
   <el-dialog
+    v-else
     :title="formType === 'create' ? '新增生产计划' : '编辑生产计划'"
     v-model="visible"
     width="1200px"
@@ -7,20 +191,20 @@
     :close-on-click-modal="false"
   >
     <el-form :model="form" :rules="rules" ref="formRef" label-width="120px" v-loading="formLoading">
-      <el-row :gutter="20">
+      <el-row :gutter="isMobile ? 0 : 20">
-        <el-col :span="12">
+        <el-col :span="isMobile ? 24 : 12">
           <el-form-item label="计划编号" prop="planCode">
             <el-input v-model="form.planCode" placeholder="请输入计划编号" />
           </el-form-item>
         </el-col>
-        <el-col :span="12">
+        <el-col :span="isMobile ? 24 : 12">
           <el-form-item label="计划名称" prop="planName">
             <el-input v-model="form.planName" placeholder="请输入计划名称" />
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row :gutter="20">
+      <el-row :gutter="isMobile ? 0 : 20">
-        <el-col :span="8">
+        <el-col :span="isMobile ? 24 : 8">
           <el-form-item label="计划类型" prop="planType">
             <el-select v-model="form.planType" placeholder="请选择计划类型" class="!w-full">
               <el-option label="年度计划" :value="1" />
@@ -30,12 +214,12 @@
             </el-select>
           </el-form-item>
         </el-col>
-        <el-col :span="8">
+        <el-col :span="isMobile ? 24 : 8">
           <el-form-item label="计划周期" prop="planPeriod">
             <el-input v-model="form.planPeriod" placeholder="如:2024-01" />
           </el-form-item>
         </el-col>
-        <el-col :span="8">
+        <el-col :span="isMobile ? 24 : 8">
           <el-form-item label="父计划" prop="parentPlanId">
             <el-select 
               v-model="form.parentPlanId" 
@@ -54,8 +238,8 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row :gutter="20">
+      <el-row :gutter="isMobile ? 0 : 20">
-        <el-col :span="12">
+        <el-col :span="isMobile ? 24 : 12">
           <el-form-item label="开始日期" prop="startDate">
             <el-date-picker
               v-model="form.startDate"
@@ -66,7 +250,7 @@
             />
           </el-form-item>
         </el-col>
-        <el-col :span="12">
+        <el-col :span="isMobile ? 24 : 12">
           <el-form-item label="结束日期" prop="endDate">
             <el-date-picker
               v-model="form.endDate"
@@ -200,6 +384,10 @@ import {
 } from '@/api/mes/production/plan'
 import { ProductApi } from '@/api/erp/product/product'
 import { YVHgetProcessRouteList } from '@/api/mes/production/process-route'
+import { useWindowSize } from '@vueuse/core'
+
+const { width } = useWindowSize()
+const isMobile = computed(() => width.value < 768)
 
 const emits = defineEmits(['success'])
 
@@ -405,3 +593,72 @@ const getCurrentPeriod = () => {
 
 defineExpose({ open })
 </script>
+
+<style lang="scss" scoped>
+.mobile-form-section {
+  margin-bottom: 24px;
+  
+  &__title {
+    font-size: 15px;
+    font-weight: 600;
+    color: #303133;
+    margin-bottom: 16px;
+    padding-bottom: 10px;
+    border-bottom: 2px solid #409eff;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+}
+
+.product-items {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.product-item-card {
+  padding: 16px;
+  background: #f5f7fa;
+  border-radius: 8px;
+  border: 1px solid #e4e7ed;
+  
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid #dcdfe6;
+  }
+  
+  &__index {
+    font-size: 14px;
+    font-weight: 600;
+    color: #409eff;
+    background: #ecf5ff;
+    padding: 4px 12px;
+    border-radius: 12px;
+  }
+}
+
+.empty-items {
+  padding: 40px 20px;
+  text-align: center;
+}
+
+.mobile-drawer-footer {
+  display: flex;
+  gap: 12px;
+  padding: 12px 16px;
+  border-top: 1px solid #f0f0f0;
+  position: sticky;
+  bottom: 0;
+  background: #fff;
+  z-index: 10;
+}
+
+:deep(.el-drawer__body) {
+  padding-bottom: 70px;
+}
+</style>

src/views/mes/production/plan/list/index.vue

@@ -1,4 +1,151 @@
 <template>
+  <!-- 手机端布局 -->
+  <div v-if="isMobile" class="mobile-plan-list">
+    <!-- 顶部操作栏 -->
+    <div class="mobile-header">
+      <div class="mobile-header__search">
+        <el-input
+          v-model="queryParams.planCode"
+          placeholder="搜索计划编号"
+          clearable
+          @keyup.enter="handleQuery"
+          :prefix-icon="Search"
+        />
+      </div>
+      <div class="mobile-header__actions">
+        <el-button :icon="Filter" circle @click="filterVisible = true" />
+        <el-button type="primary" :icon="Plus" circle @click="openForm('create')" v-hasPermi="['mes:production-plan:create']" />
+      </div>
+    </div>
+
+    <!-- 快捷筛选 -->
+    <div class="mobile-header__quick-filter">
+      <div
+        class="quick-filter-item"
+        :class="{ active: quickFilterStatus === undefined }"
+        @click="handleQuickFilter(undefined)"
+      >全部</div>
+      <div
+        class="quick-filter-item"
+        :class="{ active: quickFilterStatus === 0 }"
+        @click="handleQuickFilter(0)"
+      >草稿</div>
+      <div
+        class="quick-filter-item"
+        :class="{ active: quickFilterStatus === 1 }"
+        @click="handleQuickFilter(1)"
+      >已发布</div>
+      <div
+        class="quick-filter-item"
+        :class="{ active: quickFilterStatus === 2 }"
+        @click="handleQuickFilter(2)"
+      >执行中</div>
+    </div>
+
+    <!-- 卡片列表 -->
+    <div class="mobile-list" v-loading="loading">
+      <div v-if="treeList.length === 0 && !loading" class="mobile-empty">
+        <el-empty description="暂无计划数据" />
+      </div>
+      <div
+        v-for="row in treeList"
+        :key="row.id"
+        class="mobile-card"
+        @click="openDetail(row.id)"
+      >
+        <div class="mobile-card__header">
+          <span class="mobile-card__no">{{ row.planCode }}</span>
+          <el-tag :type="getStatusType(row.status)" size="small">{{ getStatusText(row.status) }}</el-tag>
+        </div>
+        <div class="mobile-card__body">
+          <div class="mobile-card__row">
+            <span class="mobile-card__label">计划名称</span>
+            <span class="mobile-card__value">{{ row.planName }}</span>
+          </div>
+          <div class="mobile-card__row">
+            <span class="mobile-card__label">计划类型</span>
+            <span class="mobile-card__value">
+              <el-tag :type="getPlanTypeTagType(row.planType)" size="small">{{ getPlanTypeText(row.planType) }}</el-tag>
+            </span>
+          </div>
+          <div class="mobile-card__row">
+            <span class="mobile-card__label">计划周期</span>
+            <span class="mobile-card__value">{{ row.planPeriod }}</span>
+          </div>
+          <div class="mobile-card__row">
+            <span class="mobile-card__label">计划时间</span>
+            <span class="mobile-card__value">{{ row.startDate }} ~ {{ row.endDate }}</span>
+          </div>
+          <div class="mobile-card__nums">
+            <div class="mobile-card__num-item">
+              <div class="mobile-card__num-val" style="color:#409eff">{{ row.totalPlanQuantity || 0 }}</div>
+              <div class="mobile-card__num-label">计划数量</div>
+            </div>
+            <div class="mobile-card__num-item">
+              <div class="mobile-card__num-val" style="color:#67c23a">{{ row.totalCompletedQuantity || 0 }}</div>
+              <div class="mobile-card__num-label">已完成</div>
+            </div>
+            <div class="mobile-card__num-item">
+              <div class="mobile-card__num-val" style="color:#e6a23c">{{ row.totalInProgressQuantity || 0 }}</div>
+              <div class="mobile-card__num-label">进行中</div>
+            </div>
+            <div class="mobile-card__num-item">
+              <div class="mobile-card__num-val" :style="{ color: getProgressColor(row.overallCompletionRate) }">{{ row.overallCompletionRate || 0 }}%</div>
+              <div class="mobile-card__num-label">完成率</div>
+            </div>
+          </div>
+        </div>
+        <div class="mobile-card__footer" @click.stop>
+          <el-button size="small" @click="openDetail(row.id)">详情</el-button>
+          <el-button size="small" @click="handleAnalyze(row.id)">分析</el-button>
+          <el-button size="small" type="primary" @click="openForm('update', row.id)" v-if="row.status === 0" v-hasPermi="['mes:production-plan:update']">编辑</el-button>
+          <el-button size="small" type="success" @click="handlePublish(row.id)" v-if="row.status === 0" v-hasPermi="['mes:production-plan:publish']">发布</el-button>
+          <el-button size="small" type="warning" @click="handleGenerateOrders(row)" v-if="row.status >= 1 && row.status <= 2 && !row.hasChildPlans && !row.hasGeneratedOrders" v-hasPermi="['mes:production-plan:generate-orders']">生成工单</el-button>
+          <el-button size="small" type="danger" @click="handleDelete(row.id)" v-if="row.status === 0" v-hasPermi="['mes:production-plan:delete']">删除</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="60%">
+      <el-form :model="queryParams" ref="queryFormRef" label-position="top">
+        <el-form-item label="计划名称" prop="planName">
+          <el-input v-model="queryParams.planName" placeholder="请输入计划名称" clearable style="width:100%" />
+        </el-form-item>
+        <el-form-item label="计划类型" prop="planType">
+          <el-select v-model="queryParams.planType" placeholder="请选择计划类型" clearable style="width:100%">
+            <el-option label="年度计划" :value="1" />
+            <el-option label="月度计划" :value="2" />
+            <el-option label="周度计划" :value="3" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="计划周期" prop="planPeriod">
+          <el-input v-model="queryParams.planPeriod" placeholder="如:2024-01" clearable style="width:100%" />
+        </el-form-item>
+        <el-form-item label="计划状态" prop="status">
+          <el-select v-model="queryParams.status" placeholder="请选择状态" clearable multiple style="width:100%">
+            <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>
+      <template #footer>
+        <el-button @click="resetQuery">重置</el-button>
+        <el-button type="primary" @click="handleFilterConfirm">确认筛选</el-button>
+      </template>
+    </el-drawer>
+  </div>
+
+  <!-- PC端布局 -->
+  <template v-else>
     <doc-alert title="【MES】生产计划管理" url="https://doc.iocoder.cn/mes/production-plan/" />
 
     <ContentWrap>
@@ -262,6 +409,7 @@
         @pagination="getList"
       />
     </ContentWrap>
+  </template>
 
   <!-- 表单弹窗：添加/修改 -->
   <ProductionPlanForm ref="formRef" @success="getList" />
@@ -286,9 +434,10 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
+import { ref, reactive, computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
+import { Search, Filter, Plus } from '@element-plus/icons-vue'
 import { Icon } from '@/components/Icon'
 import ProductionPlanForm from './ProductionPlanForm.vue'
 import GenerateOrderDialog from './GenerateOrderDialog.vue'
@@ -303,7 +452,14 @@ import {
 } from '@/api/mes/production/plan'
 import { SubmitApprovalDialog, ApprovalRecordsDialog, ProcessApprovalDialog } from '@/components/Approval'
 import { ApprovalRecordApi, ApprovalRecordVO } from '@/api/erp/approval/index'
+import { useWindowSize } from '@vueuse/core'
 
+const { width } = useWindowSize()
+const isMobile = computed(() => width.value < 768)
+
+// 手机端筛选相关
+const filterVisible = ref(false)
+const quickFilterStatus = ref<number | undefined>(undefined)
 
 defineOptions({ name: 'MesProductionPlanList' })
 
@@ -395,6 +551,21 @@ const resetQuery = () => {
   queryParams.planType = undefined
   queryParams.planPeriod = undefined
   queryParams.status = []
+  quickFilterStatus.value = undefined
+  handleQuery()
+}
+
+/** 快捷筛选 */
+const handleQuickFilter = (status: number | undefined) => {
+  quickFilterStatus.value = status
+  queryParams.status = status !== undefined ? [status] : []
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 筛选确认 */
+const handleFilterConfirm = () => {
+  filterVisible.value = false
   handleQuery()
 }
 
@@ -529,3 +700,91 @@ const getProgressColor = (percentage: number) => {
 
 getList()
 </script>
+
+<style lang="scss" scoped>
+.mobile-plan-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-header__quick-filter {
+  display: flex;
+  gap: 12px;
+  margin: 8px 0;
+  justify-content: flex-start;
+
+  .quick-filter-item {
+    padding: 4px 12px;
+    font-size: 14px;
+    border-radius: 20px;
+    cursor: pointer;
+    color: #909399;
+    background: transparent;
+    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;
+  }
+  &__no { font-weight: 600; font-size: 15px; color: #303133; }
+  &__body { font-size: 13px; }
+  &__row { display: flex; justify-content: space-between; padding: 3px 0; }
+  &__label { color: #909399; flex-shrink: 0; margin-right: 12px; }
+  &__value {
+    color: #606266;
+    text-align: right;
+    &--ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
+  }
+  &__nums {
+    display: flex;
+    justify-content: space-around;
+    margin-top: 10px;
+    padding: 10px 0;
+    border-top: 1px solid #f0f0f0;
+    border-bottom: 1px solid #f0f0f0;
+  }
+  &__num-item { text-align: center; }
+  &__num-val { font-size: 15px; font-weight: 600; color: #303133; }
+  &__num-label { font-size: 11px; color: #909399; margin-top: 2px; }
+  &__footer { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
+}
+
+.mobile-pagination {
+  margin-top: 12px;
+  display: flex;
+  justify-content: center;
+  :deep(.el-pagination) { flex-wrap: wrap; justify-content: center; }
+}
+</style>

src/views/mes/production/workorder/WorkOrderForm.vue

@@ -2,11 +2,12 @@
   <el-dialog
     :title="formType === 'create' ? '新增工单' : '编辑工单'"
     v-model="visible"
-    width="900px"
+    :width="isMobile ? '100%' : '900px'"
+    :fullscreen="isMobile"
     @close="handleClose"
     :close-on-click-modal="false"
   >
-    <el-form :model="form" :rules="rules" ref="formRef" label-width="120px" v-loading="formLoading">
+    <el-form :model="form" :rules="rules" ref="formRef" :label-width="isMobile ? '80px' : '120px'" v-loading="formLoading">
       <el-tabs v-model="activeTab">
         <!-- 基本信息 -->
         <el-tab-pane label="基本信息" name="basic">
@@ -14,7 +15,7 @@
             <el-select
               v-model="form.productId"
               placeholder="请选择产品"
-              class="!w-240px"
+              :class="isMobile ? '!w-full' : '!w-240px'"
               @change="handleProductChange"
             >
               <el-option
@@ -41,7 +42,7 @@
             <el-select
               v-model="form.routeId"
               placeholder="请选择工序路线"
-              class="!w-240px"
+              :class="isMobile ? '!w-full' : '!w-240px'"
               @change="handleRouteChange"
             >
               <el-option
@@ -62,6 +63,7 @@
               :precision="2"
               :step="0.1"
               placeholder="请输入计划数量"
+              :class="isMobile ? '!w-full' : ''"
             />
           </el-form-item>
 <!--          <el-form-item label="优先级" prop="priority">-->
@@ -76,7 +78,7 @@
           <el-form-item label="计划时间" prop="planTime">
             <el-date-picker
               v-model="form.planTime"
-              type="datetimerange"
+              :type="isMobile ? 'datetimerange' : 'datetimerange'"
               start-placeholder="开始时间"
               end-placeholder="结束时间"
               :default-time="[
@@ -95,7 +97,7 @@
                   )
                 )
               ]"
-              class="!w-380px"
+              :class="isMobile ? '!w-full' : '!w-380px'"
             />
           </el-form-item>
           <el-form-item label="备注" prop="remark">
@@ -137,6 +139,10 @@ import {
 } from '@/api/mes/production/workorder'
 import { YVHgetProcessRoute, YVHgetProcessRouteList } from '@/api/mes/production/process-route'
 import { ProductApi } from '@/api/erp/product/product'
+import { useWindowSize } from '@vueuse/core'
+
+const { width } = useWindowSize()
+const isMobile = computed(() => width.value < 768)
 
 const emits = defineEmits(['success'])
 

src/views/mes/production/workorder/components/OperationDetailDialog.vue

@@ -1,5 +1,87 @@
 <template>
-  <el-dialog v-model="visibleProxy" title="报工单" width="800px" append-to-body>
+  <!-- 移动端使用抽屉 -->
+  <el-drawer
+    v-if="isMobile"
+    v-model="visibleProxy"
+    title="报工单"
+    direction="btt"
+    size="75%"
+  >
+    <el-form label-position="top">
+      <template v-if="Object.keys(detailProcessData).length > 0">
+        <div class="mobile-form-section">
+          <div class="mobile-form-section__title">工序参数</div>
+          <template v-for="(field, key) in detailProcessData" :key="key">
+            <el-form-item :label="field.label">
+              <div class="detail-value">{{ formatDetailFieldValue(field) }}</div>
+            </el-form-item>
+          </template>
+        </div>
+      </template>
+      
+      <div class="mobile-form-section">
+        <div class="mobile-form-section__title">执行信息</div>
+        <el-form-item label="操作人">
+          <div class="detail-value">{{
+            currentDetailOperation?.currentExecution?.workerName || '-'
+          }}</div>
+        </el-form-item>
+        <el-form-item label="设备">
+          <div class="detail-value">{{
+            currentDetailOperation?.currentExecution?.equipmentName || '-'
+          }}</div>
+        </el-form-item>
+        <el-form-item label="开始时间">
+          <div class="detail-value">{{
+            currentDetailOperation?.currentExecution?.startTime || '-'
+          }}</div>
+        </el-form-item>
+        <el-form-item label="结束时间">
+          <div class="detail-value">{{
+            currentDetailOperation?.currentExecution?.endTime || '-'
+          }}</div>
+        </el-form-item>
+      </div>
+      
+      <div class="mobile-form-section">
+        <div class="mobile-form-section__title">数量统计</div>
+        <div class="quantity-grid">
+          <div class="quantity-item">
+            <div class="quantity-item__label">投入数量</div>
+            <div class="quantity-item__value">{{
+              currentDetailOperation?.currentExecution?.inputQuantity || '-'
+            }}</div>
+          </div>
+          <div class="quantity-item">
+            <div class="quantity-item__label">产出数量</div>
+            <div class="quantity-item__value">{{
+              currentDetailOperation?.currentExecution?.outputQuantity || '-'
+            }}</div>
+          </div>
+          <div class="quantity-item">
+            <div class="quantity-item__label">合格数量</div>
+            <div class="quantity-item__value success">{{
+              currentDetailOperation?.currentExecution?.qualifiedQuantity || '-'
+            }}</div>
+          </div>
+          <div class="quantity-item">
+            <div class="quantity-item__label">不合格数量</div>
+            <div class="quantity-item__value danger">{{
+              currentDetailOperation?.currentExecution?.unqualifiedQuantity || '-'
+            }}</div>
+          </div>
+        </div>
+      </div>
+    </el-form>
+    <template #footer>
+      <div class="mobile-drawer-footer">
+        <el-button @click="visibleProxy = false" style="flex:1">关闭</el-button>
+      </div>
+    </template>
+  </el-drawer>
+
+  <!-- PC端使用对话框 -->
+  <el-dialog v-else v-model="visibleProxy" title="报工单" width="800px" append-to-body>
     <el-form label-width="120px">
       <template v-if="Object.keys(detailProcessData).length > 0">
         <div class="mb-4">
@@ -60,6 +142,10 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import { useWindowSize } from '@vueuse/core'
+
+const { width } = useWindowSize()
+const isMobile = computed(() => width.value < 768)
 
 const props = defineProps<{
   visible: boolean
@@ -93,7 +179,7 @@ const formatDetailFieldValue = (field: any) => {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .text-lg {
   font-size: 16px;
 }
@@ -109,4 +195,63 @@ const formatDetailFieldValue = (field: any) => {
 .text-gray-600 {
   color: #606266;
 }
+
+.mobile-form-section {
+  margin-bottom: 20px;
+  
+  &__title {
+    font-size: 15px;
+    font-weight: 600;
+    color: #303133;
+    margin-bottom: 12px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid #f0f0f0;
+  }
+}
+
+.detail-value {
+  font-size: 14px;
+  color: #606266;
+  font-weight: 500;
+}
+
+.quantity-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+}
+
+.quantity-item {
+  padding: 12px;
+  background: #f5f7fa;
+  border-radius: 8px;
+  text-align: center;
+  
+  &__label {
+    font-size: 12px;
+    color: #909399;
+    margin-bottom: 6px;
+  }
+  
+  &__value {
+    font-size: 18px;
+    font-weight: 600;
+    color: #303133;
+    
+    &.success {
+      color: #67c23a;
+    }
+    
+    &.danger {
+      color: #f56c6c;
+    }
+  }
+}
+
+.mobile-drawer-footer {
+  display: flex;
+  gap: 12px;
+  padding: 12px 16px;
+  border-top: 1px solid #f0f0f0;
+}
 </style>

src/views/mes/production/workorder/components/OperationStartDialog.vue

@@ -1,5 +1,53 @@
 <template>
-  <el-dialog v-model="visibleProxy" title="开始工序" width="500px" append-to-body>
+  <!-- 移动端使用抽屉 -->
+  <el-drawer
+    v-if="isMobile"
+    v-model="visibleProxy"
+    title="开始工序"
+    direction="btt"
+    size="70%"
+  >
+    <el-form ref="startFormRef" :model="startForm" :rules="startRules" label-position="top">
+      <el-form-item label="操作工人" prop="workerName">
+        <el-input
+          v-model="startForm.workerName"
+          placeholder="请输入操作工人姓名"
+        />
+      </el-form-item>
+      <el-form-item label="设备" prop="equipmentId">
+        <el-select v-model="startForm.equipmentId" placeholder="请选择设备" style="width:100%">
+          <el-option
+            v-for="item in equipmentOptions"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="生产数量" prop="inputQuantity">
+        <el-input-number
+          v-model="startForm.inputQuantity"
+          :min="0.01"
+          :precision="2"
+          :step="0.1"
+          style="width:100%"
+          controls-position="right"
+        />
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="startForm.remark" type="textarea" :rows="3" placeholder="请输入备注" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="mobile-drawer-footer">
+        <el-button @click="visibleProxy = false" style="flex:1">取消</el-button>
+        <el-button type="primary" @click="handleSubmit" :loading="submitting" style="flex:1">确定</el-button>
+      </div>
+    </template>
+  </el-drawer>
+
+  <!-- PC端使用对话框 -->
+  <el-dialog v-else v-model="visibleProxy" title="开始工序" width="500px" append-to-body>
     <el-form ref="startFormRef" :model="startForm" :rules="startRules" label-width="100px">
       <el-form-item label="操作工人" prop="workerName">
         <el-input
@@ -41,6 +89,10 @@
 <script setup lang="ts">
 import { computed, reactive, ref, watch } from 'vue'
 import { useUserStore } from '@/store/modules/user'
+import { useWindowSize } from '@vueuse/core'
+
+const { width } = useWindowSize()
+const isMobile = computed(() => width.value < 768)
 
 interface EquipmentOption {
   id: number
@@ -124,3 +176,12 @@ const handleSubmit = () => {
   })
 }
 </script>
+
+<style lang="scss" scoped>
+.mobile-drawer-footer {
+  display: flex;
+  gap: 12px;
+  padding: 12px 16px;
+  border-top: 1px solid #f0f0f0;
+}
+</style>

src/views/mes/production/workorder/index.vue

@@ -1,4 +1,139 @@
 <template>
+  <!-- 手机端布局 -->
+  <div v-if="isMobile" class="mobile-workorder-list">
+    <!-- 顶部操作栏 -->
+    <div class="mobile-header">
+      <div class="mobile-header__search">
+        <el-input
+          v-model="queryParams.code"
+          placeholder="搜索工单编号"
+          clearable
+          @keyup.enter="handleQuery"
+          :prefix-icon="Search"
+        />
+      </div>
+      <div class="mobile-header__actions">
+        <el-button :icon="Filter" circle @click="filterVisible = true" />
+        <el-button type="primary" :icon="Plus" circle @click="openForm('create')" v-hasPermi="['mes:production-order:create']" />
+      </div>
+    </div>
+
+    <!-- 快捷筛选 -->
+    <div class="mobile-header__quick-filter">
+      <div
+        class="quick-filter-item"
+        :class="{ active: quickFilterStatus === undefined }"
+        @click="handleQuickFilter(undefined)"
+      >全部</div>
+      <div
+        class="quick-filter-item"
+        :class="{ active: quickFilterStatus === 2 }"
+        @click="handleQuickFilter(2)"
+      >已审核</div>
+      <div
+        class="quick-filter-item"
+        :class="{ active: quickFilterStatus === 3 }"
+        @click="handleQuickFilter(3)"
+      >生产中</div>
+      <div
+        class="quick-filter-item"
+        :class="{ active: quickFilterStatus === 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="handleCardClick(row)"
+      >
+        <div class="mobile-card__header">
+          <span class="mobile-card__no">{{ row.code }}</span>
+          <el-tag :type="getStatusType(row.status)" size="small">{{ getStatusText(row.status) }}</el-tag>
+        </div>
+        <div class="mobile-card__body">
+          <div class="mobile-card__row">
+            <span class="mobile-card__label">产品</span>
+            <span class="mobile-card__value mobile-card__value--ellipsis">{{ row.productName }}</span>
+          </div>
+          <div class="mobile-card__row">
+            <span class="mobile-card__label">产品编码</span>
+            <span class="mobile-card__value">{{ row.productCode }}</span>
+          </div>
+          <div class="mobile-card__row">
+            <span class="mobile-card__label">计划时间</span>
+            <span class="mobile-card__value">{{ formatDateTime(row.planStartTime) }} ~ {{ formatDateTime(row.planEndTime) }}</span>
+          </div>
+          <div class="mobile-card__nums">
+            <div class="mobile-card__num-item">
+              <div class="mobile-card__num-val" style="color:#409eff">{{ row.planQuantity || 0 }}</div>
+              <div class="mobile-card__num-label">计划数量</div>
+            </div>
+            <div class="mobile-card__num-item">
+              <div class="mobile-card__num-val" style="color:#67c23a">{{ row.producedQuantity || 0 }}</div>
+              <div class="mobile-card__num-label">已完成</div>
+            </div>
+            <div class="mobile-card__num-item">
+              <div class="mobile-card__num-val" :style="{ color: row.producedQuantity >= row.planQuantity ? '#67c23a' : '#e6a23c' }">
+                {{ row.planQuantity > 0 ? Math.round((row.producedQuantity || 0) / row.planQuantity * 100) : 0 }}%
+              </div>
+              <div class="mobile-card__num-label">完成率</div>
+            </div>
+          </div>
+        </div>
+        <div class="mobile-card__footer" @click.stop>
+          <el-button size="small" @click="handleShowOperations(row.id, row.status)">详情</el-button>
+          <el-button size="small" type="primary" @click="openForm('update', row.id)" v-if="row.status === 0">编辑</el-button>
+          <el-button size="small" type="primary" @click="handleSubmit(row.id)" v-if="row.status === 0">提交</el-button>
+          <el-button size="small" type="success" @click="handleStart(row.id)" v-if="row.status === 2">开始生产</el-button>
+          <el-button size="small" type="success" @click="handleComplete(row)" v-if="row.status === 3">完成</el-button>
+          <el-button size="small" type="danger" @click="handleDelete([row.id])" v-if="[0, 6].includes(row.status)">删除</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="60%">
+      <el-form :model="queryParams" ref="queryFormRef" label-position="top">
+        <el-form-item label="产品名称" prop="productName">
+          <el-input v-model="queryParams.productName" placeholder="请输入产品名称" clearable style="width:100%" />
+        </el-form-item>
+        <el-form-item label="工单状态" prop="status">
+          <el-select v-model="queryParams.status" placeholder="请选择状态" clearable multiple style="width:100%">
+            <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-option label="已关闭" :value="5" />
+            <el-option label="已取消" :value="6" />
+            <el-option label="已入库" :value="7" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="计划日期" prop="planTime">
+          <el-date-picker v-model="queryParams.planTime" type="daterange" value-format="YYYY-MM-DD" 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>
     <doc-alert title="【MES】生产工单管理" url="https://doc.iocoder.cn/mes/workorder/" />
 
     <ContentWrap>
@@ -311,6 +446,7 @@
         @pagination="getList"
       />
     </ContentWrap>
+  </template>
 
   <!-- 表单弹窗：添加/修改 -->
   <WorkOrderForm ref="formRef" @success="getList" />
@@ -368,8 +504,9 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
+import { ref, reactive, computed } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
+import { Search, Filter, Plus } from '@element-plus/icons-vue'
 import { Icon } from '@/components/Icon'
 import WorkOrderForm from './WorkOrderForm.vue'
 import OperationExecutionDialog from './components/OperationExecutionDialog.vue'
@@ -387,6 +524,14 @@ import {
 } from '@/api/mes/production/workorder'
 import { YVHgetWorkOrderOperationList } from '@/api/mes/production/order-operation'
 import request from '@/config/axios'
+import { useWindowSize } from '@vueuse/core'
+
+const { width } = useWindowSize()
+const isMobile = computed(() => width.value < 768)
+
+// 手机端筛选相关
+const filterVisible = ref(false)
+const quickFilterStatus = ref<number | undefined>(undefined)
 
 // 隐藏旧的 ERP 入库逻辑，改为调用 MES 入库（按产品条码）接口
 
@@ -491,9 +636,29 @@ const resetQuery = () => {
   queryParams.productName = undefined
   queryParams.status = []
   queryParams.planTime = []
+  quickFilterStatus.value = undefined
   handleQuery()
 }
 
+/** 快捷筛选 */
+const handleQuickFilter = (status: number | undefined) => {
+  quickFilterStatus.value = status
+  queryParams.status = status !== undefined ? [status] : []
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 筛选确认 */
+const handleFilterConfirm = () => {
+  filterVisible.value = false
+  handleQuery()
+}
+
+/** 卡片点击 */
+const handleCardClick = (row: any) => {
+  handleShowOperations(row.id, row.status)
+}
+
 const openForm = (type: 'create' | 'update', id?: number) => {
   formRef.value.open(type, id)
 }
@@ -698,3 +863,91 @@ const formatFullDateTime = (time: string) => {
 
 getList()
 </script>
+
+<style lang="scss" scoped>
+.mobile-workorder-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-header__quick-filter {
+  display: flex;
+  gap: 12px;
+  margin: 8px 0;
+  justify-content: flex-start;
+
+  .quick-filter-item {
+    padding: 4px 12px;
+    font-size: 14px;
+    border-radius: 20px;
+    cursor: pointer;
+    color: #909399;
+    background: transparent;
+    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;
+  }
+  &__no { font-weight: 600; font-size: 15px; color: #303133; }
+  &__body { font-size: 13px; }
+  &__row { display: flex; justify-content: space-between; padding: 3px 0; }
+  &__label { color: #909399; flex-shrink: 0; margin-right: 12px; }
+  &__value {
+    color: #606266;
+    text-align: right;
+    &--ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
+  }
+  &__nums {
+    display: flex;
+    justify-content: space-around;
+    margin-top: 10px;
+    padding: 10px 0;
+    border-top: 1px solid #f0f0f0;
+    border-bottom: 1px solid #f0f0f0;
+  }
+  &__num-item { text-align: center; }
+  &__num-val { font-size: 15px; font-weight: 600; color: #303133; }
+  &__num-label { font-size: 11px; color: #909399; margin-top: 2px; }
+  &__footer { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
+}
+
+.mobile-pagination {
+  margin-top: 12px;
+  display: flex;
+  justify-content: center;
+  :deep(.el-pagination) { flex-wrap: wrap; justify-content: center; }
+}
+</style>