From d89670e94a4218226cbf623dc41870f18b7b4496 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A6=82=E5=88=9D?= <3236758982@qq.com>
Date: Mon, 9 Mar 2026 14:39:40 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=93=E5=BA=93=E3=80=81=E6=80=BB=E5=BA=93?=
 =?UTF-8?q?=E5=AD=98=E3=80=81=E5=BA=93=E5=AD=98=E6=98=8E=E7=BB=86=E9=80=82?=
 =?UTF-8?q?=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

---
 src/views/Home/Index.vue                      |  48 ++
 src/views/erp/stock/record/index.vue          | 595 ++++++++++++------
 src/views/erp/stock/stock/index.vue           | 339 +++++++---
 .../erp/stock/warehouse/WarehouseForm.vue     | 231 ++++---
 src/views/erp/stock/warehouse/index.vue       | 402 +++++++-----
 5 files changed, 1100 insertions(+), 515 deletions(-)

diff --git a/src/views/Home/Index.vue b/src/views/Home/Index.vue
index 57a8e89..3c85233 100644
--- a/src/views/Home/Index.vue
+++ b/src/views/Home/Index.vue
@@ -256,4 +256,52 @@ getAllApi()
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+
+/* 功能网格 */
+.mobile-home__grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px 6px;  // 网格间距变小
+  min-height: 100px;
+}
+
+.mobile-home__grid-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;       // 图标和文字间距变小
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+
+  &:active {
+    opacity: 0.7;
+  }
+}
+
+.mobile-home__grid-icon {
+  width: 65px;     // 图标变大
+  height: 65px;
+  border-radius: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 26px; // 图标字体大小变大
+  transition: transform 0.2s;
+
+  &:active {
+    transform: scale(0.92);
+  }
+}
+
+.mobile-home__grid-label {
+  font-size: 12px; // 文字略大，可根据需求微调
+  color: #303133;
+  text-align: center;
+  line-height: 1.2;
+  max-width: 64px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 </style>
diff --git a/src/views/erp/stock/record/index.vue b/src/views/erp/stock/record/index.vue
index 8825dbe..a13e729 100644
--- a/src/views/erp/stock/record/index.vue
+++ b/src/views/erp/stock/record/index.vue
@@ -1,205 +1,248 @@
-<!-- ERP 产品库存明细列表 -->
+<!-- ERP 产品库存明细列表 - 移动端适配 -->
 <template>
-  <doc-alert title="【库存】产品库存、库存明细" url="https://doc.iocoder.cn/erp/stock/" />
-
-  <ContentWrap>
-    <!-- 搜索工作栏 -->
-    <el-form
-      class="-mb-15px"
-      :model="queryParams"
-      ref="queryFormRef"
-      :inline="true"
-      label-width="68px"
-    >
-      <el-form-item label="产品" prop="productId">
-        <el-select
-          v-model="queryParams.productId"
-          clearable
-          filterable
-          placeholder="请选择产品"
-          class="!w-240px"
-        >
-          <el-option
-            v-for="item in productList"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="产品分类" prop="categoryId">
-        <el-select
-          v-model="queryParams.categoryId"
-          clearable
-          filterable
-          placeholder="请选择产品分类"
-          class="!w-240px"
-        >
-          <el-option
-            v-for="item in categoryList"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="仓库" prop="warehouseId">
-        <el-select
-          v-model="queryParams.warehouseId"
-          clearable
-          filterable
-          placeholder="请选择仓库"
-          class="!w-240px"
-        >
-          <el-option
-            v-for="item in warehouseList"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="操作类型" prop="bizType">
-        <el-select
-          v-model="queryParams.bizType"
-          placeholder="请选择操作类型"
-          clearable
-          class="!w-240px"
-        >
-          <el-option
-            v-for="dict in getIntDictOptions(DICT_TYPE.ERP_STOCK_RECORD_BIZ_TYPE)"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="业务单号" prop="bizNo">
+  <div class="mobile-record">
+    <!-- 搜索操作栏 -->
+    <div class="mobile-header">
+      <div class="mobile-header__search">
         <el-input
-          v-model="queryParams.bizNo"
-          placeholder="请输入业务单号"
+          v-model="searchKeyword"
+          placeholder="搜索产品名称"
           clearable
           @keyup.enter="handleQuery"
-          class="!w-240px"
+          :prefix-icon="Search"
         />
-      </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>
+      </div>
+      <div class="mobile-header__actions">
+        <el-button :icon="Filter" circle @click="showSearch = true" />
         <el-button
           type="primary"
-          plain
+          :icon="Plus"
+          circle
           @click="openForm('create')"
           v-hasPermi="['erp:stock-record:create']"
-        >
-          <Icon icon="ep:plus" class="mr-5px" /> 新增
-        </el-button>
-        <el-button
-          type="success"
-          plain
-          @click="handleExport"
-          :loading="exportLoading"
-          v-hasPermi="['erp:stock-record:export']"
-        >
-          <Icon icon="ep:download" class="mr-5px" /> 导出
-        </el-button>
-        <el-button
-          type="success"
-          plain
-          @click="handleExportProduct"
-          :loading="exportBatchLoading"
-          v-hasPermi="['erp:stock-record:export-product']"
-        >
-          <Icon icon="ep:download" class="mr-5px" /> 导出批次
-        </el-button>
-      </el-form-item>
-    </el-form>
-  </ContentWrap>
+        />
+      </div>
+    </div>
+
+    <!-- 快捷操作 -->
+    <div class="mobile-quick-actions">
+      <el-button
+        size="small"
+        type="success"
+        plain
+        @click="handleExport"
+        :loading="exportLoading"
+        v-hasPermi="['erp:stock-record:export']"
+      >
+        导出
+      </el-button>
+      <el-button
+        size="small"
+        type="success"
+        plain
+        @click="handleExportProduct"
+        :loading="exportBatchLoading"
+        v-hasPermi="['erp:stock-record:export-product']"
+      >
+        导出批次
+      </el-button>
+    </div>
+
+    <!-- 选中提示 -->
+    <div v-if="multipleSelection.length > 0" class="mobile-selection-tip">
+      已选择 {{ multipleSelection.length }} 条记录
+    </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="item in list" :key="item.id" class="mobile-card">
+        <!-- 选择框 -->
+        <div class="mobile-card__checkbox">
+          <el-checkbox
+            :model-value="multipleSelection.some(i => i.id === item.id)"
+            @change="(val) => handleCheckboxChange(val, item)"
+          />
+        </div>
+
+        <div class="mobile-card__content">
+          <div class="mobile-card__header">
+            <span class="mobile-card__name">{{ item.productName }}</span>
+            <dict-tag :type="DICT_TYPE.ERP_STOCK_RECORD_BIZ_TYPE" :value="item.bizType" />
+          </div>
+
+          <div class="mobile-card__body">
+            <div class="mobile-card__row">
+              <span class="mobile-card__label">产品分类</span>
+              <span class="mobile-card__value">{{ item.categoryName || '-' }}</span>
+            </div>
+            <div class="mobile-card__row">
+              <span class="mobile-card__label">产品单位</span>
+              <span class="mobile-card__value">{{ item.unitName || '-' }}</span>
+            </div>
+            <div class="mobile-card__row">
+              <span class="mobile-card__label">仓库</span>
+              <span class="mobile-card__value">{{ item.warehouseName || '-' }}</span>
+            </div>
+            <div class="mobile-card__row">
+              <span class="mobile-card__label">出入库单号</span>
+              <span class="mobile-card__value mobile-card__value--ellipsis">{{ item.bizNo || '-' }}</span>
+            </div>
+            <div class="mobile-card__row">
+              <span class="mobile-card__label">出入库日期</span>
+              <span class="mobile-card__value">{{ dateFormatter({ createTime: item.createTime }) }}</span>
+            </div>
+            <div class="mobile-card__row mobile-card__row--highlight">
+              <span class="mobile-card__label">出入库数量</span>
+              <span class="mobile-card__value">{{ erpCountTableColumnFormatter({ count: item.count }) }}</span>
+            </div>
+            <div class="mobile-card__row mobile-card__row--highlight">
+              <span class="mobile-card__label">库存量</span>
+              <span class="mobile-card__value">{{ erpCountTableColumnFormatter({ count: item.totalCount }) }}</span>
+            </div>
+            <div class="mobile-card__row" v-hasPermi="['erp:stock:goods-value']">
+              <span class="mobile-card__label">单价</span>
+              <span class="mobile-card__value">{{ item.unitPrice != null ? item.unitPrice.toFixed(4) : '-' }}</span>
+            </div>
+            <div class="mobile-card__row" v-hasPermi="['erp:stock:goods-value']">
+              <span class="mobile-card__label">货值</span>
+              <span class="mobile-card__value mobile-card__value--price">{{ item.stockValue != null ? item.stockValue.toFixed(4) : '-' }}</span>
+            </div>
+            <div class="mobile-card__row">
+              <span class="mobile-card__label">操作人</span>
+              <span class="mobile-card__value">{{ item.creatorName || '-' }}</span>
+            </div>
+          </div>
+
+          <div class="mobile-card__footer" v-if="item.bizType === 90">
+            <el-button
+              size="small"
+              type="primary"
+              @click="handleDetail(item.bizId, item)"
+              v-hasPermi="['erp:stock-record:review']"
+            >
+              查看详情
+            </el-button>
+          </div>
+        </div>
+      </div>
+    </div>
 
-  <!-- 列表 -->
-  <ContentWrap>
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="50" align="center" />
-      <el-table-column label="产品名称" align="center" prop="productName" />
-      <el-table-column label="产品分类" align="center" prop="categoryName" />
-      <el-table-column label="产品单位" align="center" prop="unitName" />
-      <el-table-column label="仓库编号" align="center" prop="warehouseName" />
-      <el-table-column label="操作类型" align="center" prop="bizType" min-width="100">
-        <template #default="scope">
-          <dict-tag :type="DICT_TYPE.ERP_STOCK_RECORD_BIZ_TYPE" :value="scope.row.bizType" />
-        </template>
-      </el-table-column>
-      <el-table-column label="出入库单号" align="center" prop="bizNo" width="200" />
-      <el-table-column
-        label="出入库日期"
-        align="center"
-        prop="createTime"
-        :formatter="dateFormatter"
-        width="180px"
-        sortable
-      />
-      <el-table-column
-        label="出入库数量"
-        align="center"
-        prop="count"
-        :formatter="erpCountTableColumnFormatter"
-      />
-      <el-table-column
-        label="库存量"
-        align="center"
-        prop="totalCount"
-        :formatter="erpCountTableColumnFormatter"
-      />
-      <el-table-column label="单价" align="center" prop="unitPrice" v-hasPermi="['erp:stock:goods-value']">
-        <template #default="scope">
-          {{ scope.row.unitPrice != null ? scope.row.unitPrice.toFixed(4) : '-' }}
-        </template>
-      </el-table-column>
-      <el-table-column label="货值" align="center" prop="stockValue" v-hasPermi="['erp:stock:goods-value']">
-        <template #default="scope">
-          {{ scope.row.stockValue != null ? scope.row.stockValue.toFixed(4) : '-' }}
-        </template>
-      </el-table-column>
-      <el-table-column label="操作人" align="center" prop="creatorName" />
-      <el-table-column label="操作" align="center" width="150">
-        <template #default="scope">
-          <el-button
-            link
-            type="primary"
-            @click="handleDetail(scope.row.bizId, scope.row)"
-            v-hasPermi="['erp:stock-record:review']"
-            :disabled="scope.row.bizType !== 90"
-          >
-            <Icon icon="ep:view" /> 查询
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
     <!-- 分页 -->
-    <Pagination
-      :total="total"
-      v-model:page="queryParams.pageNo"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList"
-    />
-  </ContentWrap>
+    <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>
 
-  <!-- 质检详情弹窗 -->
-  <QualityDetailDialog v-model:visible="dialogVisible" :quality-id="selectedQualityId" />
+    <!-- 筛选抽屉 -->
+    <el-drawer v-model="showSearch" title="筛选条件" direction="btt" size="60%">
+      <el-form :model="queryParams" ref="queryFormRef" label-position="top">
+        <el-form-item label="产品" prop="productId">
+          <el-select
+            v-model="queryParams.productId"
+            clearable
+            filterable
+            placeholder="请选择产品"
+            style="width: 100%"
+          >
+            <el-option
+              v-for="item in productList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="产品分类" prop="categoryId">
+          <el-select
+            v-model="queryParams.categoryId"
+            clearable
+            filterable
+            placeholder="请选择产品分类"
+            style="width: 100%"
+          >
+            <el-option
+              v-for="item in categoryList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="仓库" prop="warehouseId">
+          <el-select
+            v-model="queryParams.warehouseId"
+            clearable
+            filterable
+            placeholder="请选择仓库"
+            style="width: 100%"
+          >
+            <el-option
+              v-for="item in warehouseList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="操作类型" prop="bizType">
+          <el-select
+            v-model="queryParams.bizType"
+            placeholder="请选择操作类型"
+            clearable
+            style="width: 100%"
+          >
+            <el-option
+              v-for="dict in getIntDictOptions(DICT_TYPE.ERP_STOCK_RECORD_BIZ_TYPE)"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="业务单号" prop="bizNo">
+          <el-input
+            v-model="queryParams.bizNo"
+            placeholder="请输入业务单号"
+            clearable
+            @keyup.enter="handleQuery"
+            style="width: 100%"
+          />
+        </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')]"
+            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>
+
+    <!-- 质检详情弹窗 -->
+    <QualityDetailDialog v-model:visible="dialogVisible" :quality-id="selectedQualityId" />
+  </div>
 </template>
 
 <script setup lang="ts">
+import { Search, Filter, Plus } from '@element-plus/icons-vue'
 import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
@@ -237,6 +280,8 @@ const warehouseList = ref<WarehouseVO[]>([]) // 仓库列表
 const categoryList = ref<any[]>([]) // 产品分类列表
 const isFinishedProduct = ref(false) // 是否是成品分类
 const multipleSelection = ref<StockRecordVO[]>([]) // 选中的行
+const showSearch = ref(false) // 搜索抽屉显示状态
+const searchKeyword = ref('') // 搜索关键词
 
 // 质检详情弹窗
 const dialogVisible = ref(false)
@@ -247,6 +292,18 @@ const handleSelectionChange = (selection: StockRecordVO[]) => {
   multipleSelection.value = selection
 }
 
+/** 处理单个复选框变化 */
+const handleCheckboxChange = (checked: boolean, item: StockRecordVO) => {
+  if (checked) {
+    multipleSelection.value.push(item)
+  } else {
+    const index = multipleSelection.value.findIndex(i => i.id === item.id)
+    if (index > -1) {
+      multipleSelection.value.splice(index, 1)
+    }
+  }
+}
+
 /** 查看详情 */
 const handleDetail = (bizId: number, row: StockRecordVO) => {
   // 传递行的ID，而不是bizId
@@ -269,12 +326,19 @@ const getList = async () => {
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.pageNo = 1
+  showSearch.value = false
   getList()
 }
 
 /** 重置按钮操作 */
 const resetQuery = () => {
-  queryFormRef.value.resetFields()
+  queryFormRef.value?.resetFields()
+  handleQuery()
+}
+
+/** 确认筛选 */
+const handleFilterConfirm = () => {
+  showSearch.value = false
   handleQuery()
 }
 
@@ -341,3 +405,158 @@ onMounted(async () => {
   await getList()
 })
 </script>
+
+<style lang="scss" scoped>
+.mobile-record {
+  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;
+  }
+}
+
+.mobile-quick-actions {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.mobile-selection-tip {
+  padding: 8px 12px;
+  margin-bottom: 12px;
+  background: #ecf5ff;
+  color: #409eff;
+  border-radius: 8px;
+  font-size: 13px;
+  text-align: center;
+}
+
+.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);
+  display: flex;
+  gap: 10px;
+  
+  &__checkbox {
+    display: flex;
+    align-items: flex-start;
+    padding-top: 2px;
+  }
+  
+  &__content {
+    flex: 1;
+    min-width: 0;
+  }
+  
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+  }
+  
+  &__name {
+    font-weight: 600;
+    font-size: 15px;
+    color: #303133;
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin-right: 10px;
+  }
+  
+  &__body {
+    font-size: 13px;
+  }
+  
+  &__row {
+    display: flex;
+    justify-content: space-between;
+    padding: 3px 0;
+    
+    &--highlight {
+      background: #f0f9ff;
+      padding: 5px 8px;
+      margin: 2px -8px;
+      border-radius: 4px;
+      
+      .mobile-card__value {
+        color: #409eff;
+        font-weight: 600;
+      }
+    }
+  }
+  
+  &__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;
+    }
+    
+    &--price {
+      color: #f56c6c;
+      font-weight: 600;
+    }
+  }
+  
+  &__footer {
+    margin-top: 10px;
+    padding-top: 10px;
+    border-top: 1px solid #f0f0f0;
+    text-align: center;
+    
+    .el-button {
+      width: 100%;
+    }
+  }
+}
+
+.mobile-pagination {
+  margin-top: 12px;
+  display: flex;
+  justify-content: center;
+  
+  :deep(.el-pagination) {
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+}
+</style>
diff --git a/src/views/erp/stock/stock/index.vue b/src/views/erp/stock/stock/index.vue
index 7d55640..d3f0690 100644
--- a/src/views/erp/stock/stock/index.vue
+++ b/src/views/erp/stock/stock/index.vue
@@ -1,107 +1,137 @@
-<!-- ERP 产品库存列表 -->
+<!-- ERP 产品库存列表 - 移动端适配 -->
 <template>
-  <doc-alert title="【库存】产品库存、库存明细" url="https://doc.iocoder.cn/erp/stock/" />
-
-  <ContentWrap>
-    <!-- 搜索工作栏 -->
-    <el-form
-      class="-mb-15px"
-      :model="queryParams"
-      ref="queryFormRef"
-      :inline="true"
-      label-width="68px"
-    >
-      <el-form-item label="产品" prop="productId">
-        <el-select
-          v-model="queryParams.productId"
+  <div class="mobile-stock">
+    <!-- 搜索操作栏 -->
+    <div class="mobile-header">
+      <div class="mobile-header__search">
+        <el-input
+          v-model="searchKeyword"
+          placeholder="搜索产品名称"
           clearable
-          filterable
-          placeholder="请选择产品"
-          class="!w-240px"
-        >
-          <el-option
-            v-for="item in productList"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="仓库" prop="warehouseId">
-        <el-select
-          v-model="queryParams.warehouseId"
-          clearable
-          filterable
-          placeholder="请选择仓库"
-          class="!w-240px"
-        >
-          <el-option
-            v-for="item in warehouseList"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
-          />
-        </el-select>
-      </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>
+          @keyup.enter="handleQuery"
+          :prefix-icon="Search"
+        />
+      </div>
+      <div class="mobile-header__actions">
+        <el-button :icon="Filter" circle @click="showSearch = true" />
         <el-button
           type="primary"
-          plain
+          :icon="Plus"
+          circle
           @click="openForm('create')"
           v-hasPermi="['erp:stock:create']"
-        >
-          <Icon icon="ep:plus" class="mr-5px" /> 新增
-        </el-button>
-        <el-button
-          type="success"
-          plain
-          @click="handleExport"
-          :loading="exportLoading"
-          v-hasPermi="['erp:stock:export']"
-        >
-          <Icon icon="ep:download" class="mr-5px" /> 导出
-        </el-button>
-      </el-form-item>
-    </el-form>
-  </ContentWrap>
+        />
+      </div>
+    </div>
+
+    <!-- 快捷操作 -->
+    <div class="mobile-quick-actions">
+      <el-button
+        size="small"
+        type="success"
+        plain
+        @click="handleExport"
+        :loading="exportLoading"
+        v-hasPermi="['erp:stock:export']"
+      >
+        导出
+      </el-button>
+    </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="item in list" :key="item.id" class="mobile-card">
+        <div class="mobile-card__header">
+          <span class="mobile-card__name">{{ item.productName }}</span>
+          <span class="mobile-card__badge">库存: {{ erpCountTableColumnFormatter({ count: item.count }) }}</span>
+        </div>
+        <div class="mobile-card__body">
+          <div class="mobile-card__row">
+            <span class="mobile-card__label">产品分类</span>
+            <span class="mobile-card__value">{{ item.categoryName || '-' }}</span>
+          </div>
+          <div class="mobile-card__row">
+            <span class="mobile-card__label">产品单位</span>
+            <span class="mobile-card__value">{{ item.unitName || '-' }}</span>
+          </div>
+          <div class="mobile-card__row">
+            <span class="mobile-card__label">仓库</span>
+            <span class="mobile-card__value">{{ item.warehouseName || '-' }}</span>
+          </div>
+          <div class="mobile-card__row" v-hasPermi="['erp:stock:goods-value']">
+            <span class="mobile-card__label">单价</span>
+            <span class="mobile-card__value">{{ item.unitPrice != null ? item.unitPrice.toFixed(4) : '-' }}</span>
+          </div>
+          <div class="mobile-card__row" v-hasPermi="['erp:stock:goods-value']">
+            <span class="mobile-card__label">货值</span>
+            <span class="mobile-card__value mobile-card__value--price">{{ item.stockValue != null ? item.stockValue.toFixed(4) : '-' }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
 
-  <!-- 列表 -->
-  <ContentWrap>
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-      <el-table-column label="产品名称" align="center" prop="productName" />
-      <el-table-column label="产品单位" align="center" prop="unitName" />
-      <el-table-column label="产品分类" align="center" prop="categoryName" />
-      <el-table-column
-        label="库存量"
-        align="center"
-        prop="count"
-        :formatter="erpCountTableColumnFormatter"
-      />
-      <el-table-column label="仓库" align="center" prop="warehouseName" />
-      <el-table-column label="单价" align="center" prop="unitPrice" v-hasPermi="['erp:stock:goods-value']">
-        <template #default="scope">
-          {{ scope.row.unitPrice != null ? scope.row.unitPrice.toFixed(4) : '-' }}
-        </template>
-      </el-table-column>
-      <el-table-column label="货值" align="center" prop="stockValue" v-hasPermi="['erp:stock:goods-value']">
-        <template #default="scope">
-          {{ scope.row.stockValue != null ? scope.row.stockValue.toFixed(4) : '-' }}
-        </template>
-      </el-table-column>
-    </el-table>
     <!-- 分页 -->
-    <Pagination
-      :total="total"
-      v-model:page="queryParams.pageNo"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList"
-    />
-  </ContentWrap>
+    <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="showSearch" title="筛选条件" direction="btt" size="50%">
+      <el-form :model="queryParams" ref="queryFormRef" label-position="top">
+        <el-form-item label="产品" prop="productId">
+          <el-select
+            v-model="queryParams.productId"
+            clearable
+            filterable
+            placeholder="请选择产品"
+            style="width: 100%"
+          >
+            <el-option
+              v-for="item in productList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="仓库" prop="warehouseId">
+          <el-select
+            v-model="queryParams.warehouseId"
+            clearable
+            filterable
+            placeholder="请选择仓库"
+            style="width: 100%"
+          >
+            <el-option
+              v-for="item in warehouseList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            />
+          </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>
 </template>
 
 <script setup lang="ts">
+import { Search, Filter, Plus } from '@element-plus/icons-vue'
 import download from '@/utils/download'
 import { StockApi, StockVO } from '@/api/erp/stock/stock'
 import { ProductApi, ProductVO } from '@/api/erp/product/product'
@@ -127,6 +157,8 @@ const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
 const productList = ref<ProductVO[]>([]) // 产品列表
 const warehouseList = ref<WarehouseVO[]>([]) // 仓库列表
+const showSearch = ref(false) // 搜索抽屉显示状态
+const searchKeyword = ref('') // 搜索关键词
 
 /** 查询列表 */
 const getList = async () => {
@@ -143,12 +175,19 @@ const getList = async () => {
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.pageNo = 1
+  showSearch.value = false
   getList()
 }
 
 /** 重置按钮操作 */
 const resetQuery = () => {
-  queryFormRef.value.resetFields()
+  queryFormRef.value?.resetFields()
+  handleQuery()
+}
+
+/** 确认筛选 */
+const handleFilterConfirm = () => {
+  showSearch.value = false
   handleQuery()
 }
 
@@ -194,3 +233,115 @@ onMounted(async () => {
   warehouseList.value = await WarehouseApi.getWarehouseSimpleList()
 })
 </script>
+
+<style lang="scss" scoped>
+.mobile-stock {
+  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;
+  }
+}
+
+.mobile-quick-actions {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.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;
+  }
+  
+  &__name {
+    font-weight: 600;
+    font-size: 15px;
+    color: #303133;
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin-right: 10px;
+  }
+  
+  &__badge {
+    font-size: 13px;
+    font-weight: 600;
+    color: #409eff;
+    white-space: nowrap;
+    background: #ecf5ff;
+    padding: 2px 8px;
+    border-radius: 4px;
+  }
+  
+  &__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;
+    
+    &--price {
+      color: #f56c6c;
+      font-weight: 600;
+    }
+  }
+}
+
+.mobile-pagination {
+  margin-top: 12px;
+  display: flex;
+  justify-content: center;
+  
+  :deep(.el-pagination) {
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+}
+</style>
diff --git a/src/views/erp/stock/warehouse/WarehouseForm.vue b/src/views/erp/stock/warehouse/WarehouseForm.vue
index 8a3f077..b19ec96 100644
--- a/src/views/erp/stock/warehouse/WarehouseForm.vue
+++ b/src/views/erp/stock/warehouse/WarehouseForm.vue
@@ -1,84 +1,104 @@
-<!-- ERP 仓库表单 -->
 <template>
-  <Dialog :title="dialogTitle" v-model="dialogVisible">
-    <el-form
-      ref="formRef"
-      :model="formData"
-      :rules="formRules"
-      label-width="100px"
-      v-loading="formLoading"
-    >
-      <el-form-item label="仓库名称" prop="name">
-        <el-input v-model="formData.name" placeholder="请输入仓库名称" />
-      </el-form-item>
-      <el-form-item label="仓库地址" prop="address">
-        <el-input v-model="formData.address" placeholder="请输入仓库地址" />
-      </el-form-item>
-      <el-form-item label="仓库状态" prop="status">
-        <el-radio-group v-model="formData.status">
-          <el-radio
-            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
-            :key="dict.value"
-            :value="dict.value"
-          >
-            {{ dict.label }}
-          </el-radio>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="仓储费" prop="warehousePrice">
-        <el-input-number
-          v-model="formData.warehousePrice"
-          placeholder="请输入仓储费，单位：元/天/KG"
-          :min="0"
-          :precision="4"
-          class="!w-1/1"
-        />
-      </el-form-item>
-      <el-form-item label="搬运费" prop="truckagePrice">
-        <el-input-number
-          v-model="formData.truckagePrice"
-          placeholder="请输入搬运费，单位：元"
-          :min="0"
-          :precision="4"
-          class="!w-1/1"
-        />
-      </el-form-item>
-      <el-form-item label="负责人" prop="principal">
-        <el-input v-model="formData.principal" placeholder="请输入负责人" />
-      </el-form-item>
-      <el-form-item label="排序" prop="sort">
-        <el-input-number
-          v-model="formData.sort"
-          placeholder="请输入排序"
-          :precision="0"
-          class="!w-1/1"
-        />
-      </el-form-item>
-      <el-form-item label="备注" prop="remark">
-        <el-input type="textarea" v-model="formData.remark" placeholder="请输入备注" />
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
-      <el-button @click="dialogVisible = false">取 消</el-button>
-    </template>
-  </Dialog>
+  <el-drawer
+    v-model="dialogVisible"
+    :title="dialogTitle"
+    direction="rtl"
+    size="100%"
+    :close-on-press-escape="true"
+    :destroy-on-close="true"
+    :append-to-body="true"
+    class="mobile-form-drawer"
+  >
+    <div class="mobile-form" v-loading="formLoading">
+      <el-form
+        ref="formRef"
+        :model="formData"
+        :rules="formRules"
+        label-position="top"
+      >
+        <!-- 基础信息 -->
+        <div class="mobile-form-section">
+          <div class="mobile-form-section__title">基础信息</div>
+          <el-form-item label="仓库名称" prop="name">
+            <el-input v-model="formData.name" placeholder="请输入仓库名称" clearable />
+          </el-form-item>
+          <el-form-item label="仓库地址" prop="address">
+            <el-input v-model="formData.address" placeholder="请输入仓库地址" clearable />
+          </el-form-item>
+          <el-form-item label="负责人" prop="principal">
+            <el-input v-model="formData.principal" placeholder="请输入负责人" clearable />
+          </el-form-item>
+          <el-form-item label="仓储费" prop="warehousePrice">
+            <el-input-number
+              v-model="formData.warehousePrice"
+              placeholder="请输入仓储费，单位：元/天/KG"
+              :min="0"
+              :precision="4"
+              controls-position="right"
+            />
+          </el-form-item>
+          <el-form-item label="搬运费" prop="truckagePrice">
+            <el-input-number
+              v-model="formData.truckagePrice"
+              placeholder="请输入搬运费，单位：元"
+              :min="0"
+              :precision="4"
+              controls-position="right"
+            />
+          </el-form-item>
+        </div>
+
+        <!-- 状态信息 -->
+        <div class="mobile-form-section">
+          <div class="mobile-form-section__title">状态信息</div>
+          <el-form-item label="仓库状态" prop="status">
+            <el-radio-group v-model="formData.status">
+              <el-radio
+                v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+                :key="dict.value"
+                :value="dict.value"
+              >
+                {{ dict.label }}
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="排序" prop="sort">
+            <el-input-number
+              v-model="formData.sort"
+              placeholder="请输入排序"
+              :precision="0"
+              controls-position="right"
+            />
+          </el-form-item>
+          <el-form-item label="备注" prop="remark">
+            <el-input type="textarea" v-model="formData.remark" placeholder="请输入备注" :rows="3" />
+          </el-form-item>
+        </div>
+      </el-form>
+
+      <!-- 底部操作按钮 -->
+      <div class="mobile-form__footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      </div>
+    </div>
+  </el-drawer>
 </template>
+
 <script setup lang="ts">
 import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
 import { WarehouseApi, WarehouseVO } from '@/api/erp/stock/warehouse'
 import { CommonStatusEnum } from '@/utils/constants'
 
-/** ERP 仓库表单 */
-defineOptions({ name: 'WarehouseForm' })
+defineOptions({ name: 'WarehouseFormMobile' })
 
-const { t } = useI18n() // 国际化
-const message = useMessage() // 消息弹窗
+const { t } = useI18n()
+const message = useMessage()
 
-const dialogVisible = ref(false) // 弹窗的是否展示
-const dialogTitle = ref('') // 弹窗的标题
-const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const dialogVisible = ref(false)
+const dialogTitle = ref('')
+const formLoading = ref(false)
+const formType = ref('')
 const formData = ref({
   id: undefined,
   name: undefined,
@@ -88,22 +108,20 @@ const formData = ref({
   principal: undefined,
   warehousePrice: undefined,
   truckagePrice: undefined,
-  status: undefined
+  status: CommonStatusEnum.ENABLE
 })
 const formRules = reactive({
   name: [{ required: true, message: '仓库名称不能为空', trigger: 'blur' }],
   sort: [{ required: true, message: '排序不能为空', trigger: 'blur' }],
-  status: [{ required: true, message: '开启状态不能为空', trigger: 'blur' }]
+  status: [{ required: true, message: '仓库状态不能为空', trigger: 'blur' }]
 })
-const formRef = ref() // 表单 Ref
+const formRef = ref()
 
-/** 打开弹窗 */
 const open = async (type: string, id?: number) => {
   dialogVisible.value = true
   dialogTitle.value = t('action.' + type)
   formType.value = type
   resetForm()
-  // 修改时，设置数据
   if (id) {
     formLoading.value = true
     try {
@@ -113,14 +131,11 @@ const open = async (type: string, id?: number) => {
     }
   }
 }
-defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+defineExpose({ open })
 
-/** 提交表单 */
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const emit = defineEmits(['success'])
 const submitForm = async () => {
-  // 校验表单
   await formRef.value.validate()
-  // 提交请求
   formLoading.value = true
   try {
     const data = formData.value as unknown as WarehouseVO
@@ -132,14 +147,12 @@ const submitForm = async () => {
       message.success(t('common.updateSuccess'))
     }
     dialogVisible.value = false
-    // 发送操作成功的事件
     emit('success')
   } finally {
     formLoading.value = false
   }
 }
 
-/** 重置表单 */
 const resetForm = () => {
   formData.value = {
     id: undefined,
@@ -155,3 +168,53 @@ const resetForm = () => {
   formRef.value?.resetFields()
 }
 </script>
+
+<style lang="scss" scoped>
+.mobile-form {
+  padding: 12px;
+}
+.mobile-form-section {
+  background: #fff;
+  border-radius: 10px;
+  padding: 14px;
+  margin-bottom: 12px;
+  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
+}
+.mobile-form-section__title {
+  font-size: 15px;
+  font-weight: 600;
+  color: #303133;
+  margin-bottom: 12px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #f0f0f0;
+}
+.mobile-form__footer {
+  position: sticky;
+  bottom: 0;
+  background: #fff;
+  padding: 12px 16px;
+  padding-bottom: calc(12px + env(safe-area-inset-bottom));
+  border-top: 1px solid #eee;
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  z-index: 10;
+  margin: 0 -12px -12px;
+
+  .el-button {
+    flex: 1;
+    height: 40px;
+    font-size: 15px;
+  }
+}
+
+:deep(.el-form-item) {
+  margin-bottom: 16px;
+}
+:deep(.el-input),
+:deep(.el-select),
+:deep(.el-input-number),
+:deep(.el-date-editor) {
+  width: 100% !important;
+}
+</style>
diff --git a/src/views/erp/stock/warehouse/index.vue b/src/views/erp/stock/warehouse/index.vue
index 3b4e764..ba19805 100644
--- a/src/views/erp/stock/warehouse/index.vue
+++ b/src/views/erp/stock/warehouse/index.vue
@@ -1,142 +1,162 @@
-<!-- ERP 仓库列表 -->
 <template>
-  <doc-alert title="【库存】产品库存、库存明细" url="https://doc.iocoder.cn/erp/stock/" />
-
-  <ContentWrap>
-    <!-- 搜索工作栏 -->
-    <el-form
-      class="-mb-15px"
-      :model="queryParams"
-      ref="queryFormRef"
-      :inline="true"
-      label-width="68px"
-    >
-      <el-form-item label="仓库名称" prop="name">
+  <div class="mobile-warehouse">
+    <!-- 搜索操作栏 -->
+    <div class="mobile-header">
+      <div class="mobile-header__search">
         <el-input
           v-model="queryParams.name"
-          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
-            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </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>
+      </div>
+      <div class="mobile-header__actions">
+        <el-button :icon="Filter" circle @click="filterVisible = true" />
         <el-button
           type="primary"
-          plain
+          :icon="Plus"
+          circle
           @click="openForm('create')"
           v-hasPermi="['erp:warehouse:create']"
-        >
-          <Icon icon="ep:plus" class="mr-5px" /> 新增
-        </el-button>
-        <el-button
-          type="success"
-          plain
-          @click="handleExport"
-          :loading="exportLoading"
-          v-hasPermi="['erp:warehouse:export']"
-        >
-          <Icon icon="ep:download" class="mr-5px" /> 导出
-        </el-button>
-      </el-form-item>
-    </el-form>
-  </ContentWrap>
+        />
+      </div>
+    </div>
 
-  <!-- 列表 -->
-  <ContentWrap>
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" @row-click="handleRowClick">
-      <el-table-column label="仓库名称" align="center" prop="name" />
-      <el-table-column label="仓库地址" align="center" prop="address" />
-      <el-table-column
-        label="仓储费"
-        align="center"
-        prop="warehousePrice"
-        :formatter="erpPriceTableColumnFormatter"
-      />
-      <el-table-column
-        label="搬运费"
-        align="center"
-        prop="truckagePrice"
-        :formatter="erpPriceTableColumnFormatter"
-      />
-      <el-table-column label="负责人" align="center" prop="principal" />
-      <el-table-column label="备注" align="center" prop="remark" />
-      <el-table-column label="排序" align="center" prop="sort" />
-      <el-table-column label="状态" align="center" prop="status">
-        <template #default="scope">
-          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
-        </template>
-      </el-table-column>
-      <el-table-column label="是否默认" align="center" prop="defaultStatus">
-        <template #default="scope">
-          <el-switch
-            v-model="scope.row.defaultStatus"
-            :active-value="true"
-            :inactive-value="false"
-            @change="handleDefaultStatusChange(scope.row)"
-          />
-        </template>
-      </el-table-column>
-      <el-table-column
-        label="创建时间"
-        align="center"
-        prop="createTime"
-        :formatter="dateFormatter"
-        width="180px"
-        sortable
-      />
-      <el-table-column label="操作" align="center">
-        <template #default="scope">
+    <!-- 快捷操作 -->
+    <div class="mobile-quick-actions">
+      <el-button
+        size="small"
+        type="success"
+        plain
+        @click="handleExport"
+        :loading="exportLoading"
+        v-hasPermi="['erp:warehouse:export']"
+      >
+        导出
+      </el-button>
+    </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="item in list"
+        :key="item.id"
+        class="mobile-card"
+        @click="handleCardClick(item)"
+      >
+        <div class="mobile-card__header">
+          <span class="mobile-card__name">{{ item.name || '-' }}</span>
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="item.status" />
+        </div>
+        <div class="mobile-card__body">
+          <div class="mobile-card__row">
+            <span class="mobile-card__label">仓库地址</span>
+            <span class="mobile-card__value">{{ item.address || '-' }}</span>
+          </div>
+<!--          <div class="mobile-card__row">-->
+<!--            <span class="mobile-card__label">仓储费</span>-->
+<!--            <span class="mobile-card__value">{{ erpPriceTableColumnFormatter(item.warehousePrice) }}</span>-->
+<!--          </div>-->
+<!--          <div class="mobile-card__row">-->
+<!--            <span class="mobile-card__label">搬运费</span>-->
+<!--            <span class="mobile-card__value">{{ erpPriceTableColumnFormatter(item.truckagePrice) }}</span>-->
+<!--          </div>-->
+          <div class="mobile-card__row">
+            <span class="mobile-card__label">负责人</span>
+            <span class="mobile-card__value">{{ item.principal || '-' }}</span>
+          </div>
+          <div class="mobile-card__row">
+            <span class="mobile-card__label">备注</span>
+            <span class="mobile-card__value mobile-card__value--ellipsis">{{ item.remark || '无备注' }}</span>
+          </div>
+          <div class="mobile-card__row">
+            <span class="mobile-card__label">排序</span>
+            <span class="mobile-card__value" >{{ item.sort }}</span>
+          </div>
+<!--          <div class="mobile-card__row">-->
+<!--            <span class="mobile-card__label">默认</span>-->
+<!--            <el-switch-->
+<!--              v-model="item.defaultStatus"-->
+<!--              :active-value="true"-->
+<!--              :inactive-value="false"-->
+<!--              @change.stop="handleDefaultStatusChange(item)"-->
+<!--            />-->
+<!--          </div>-->
+          <div class="mobile-card__row">
+            <span class="mobile-card__label">创建时间</span>
+            <span class="mobile-card__value">{{ formatDate(item.createTime)}}</span>
+          </div>
+        </div>
+        <div class="mobile-card__footer">
           <el-button
-            link
+            size="small"
             type="primary"
-            @click="openForm('update', scope.row.id)"
+            @click.stop="openForm('update', item.id)"
             v-hasPermi="['erp:warehouse:update']"
+            :disabled="item.name === '-'"
           >
             编辑
           </el-button>
           <el-button
-            link
+            size="small"
             type="danger"
-            @click="handleDelete(scope.row.id)"
+            @click.stop="handleDelete(item.id)"
             v-hasPermi="['erp:warehouse:delete']"
+            :disabled="item.name === '-'"
           >
             删除
           </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <!-- 分页 -->
-    <Pagination
-      :total="total"
-      v-model:page="queryParams.pageNo"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList"
-    />
-  </ContentWrap>
+        </div>
+      </div>
+    </div>
 
-  <!-- 表单弹窗：添加/修改 -->
-  <WarehouseForm ref="formRef" @success="getList" />
+    <!-- 分页 -->
+    <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="name">
+          <el-input v-model="queryParams.name" 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
+              v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </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>
+
+    <!-- 表单弹窗：添加/修改 -->
+    <WarehouseForm ref="formRef" @success="getList" />
+  </div>
 </template>
 
 <script setup lang="ts">
+import { Search, Filter, Plus } from '@element-plus/icons-vue'
 import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
@@ -144,25 +164,22 @@ import { WarehouseApi, WarehouseVO } from '@/api/erp/stock/warehouse'
 import WarehouseForm from './WarehouseForm.vue'
 import { erpPriceTableColumnFormatter } from '@/utils'
 
-/** ERP 仓库列表 */
-defineOptions({ name: 'ErpWarehouse' })
+defineOptions({ name: 'ErpWarehouseMobile' })
 
-const message = useMessage() // 消息弹窗
-const { t } = useI18n() // 国际化
-
-const loading = ref(true) // 列表的加载中
-const list = ref<WarehouseVO[]>([]) // 列表的数据
-const total = ref(0) // 列表的总页数
+const loading = ref(true)
+const list = ref<WarehouseVO[]>([])
+const total = ref(0)
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
   name: undefined,
   status: undefined
 })
-const queryFormRef = ref() // 搜索的表单
-const exportLoading = ref(false) // 导出的加载中
+const queryFormRef = ref()
+const exportLoading = ref(false)
+const filterVisible = ref(false)
+const formRef = ref()
 
-/** 查询列表 */
 const getList = async () => {
   loading.value = true
   try {
@@ -174,74 +191,161 @@ const getList = async () => {
   }
 }
 
-/** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.pageNo = 1
   getList()
 }
 
-/** 重置按钮操作 */
 const resetQuery = () => {
-  queryFormRef.value.resetFields()
+  queryFormRef.value?.resetFields()
+  handleQuery()
+}
+
+const handleFilterConfirm = () => {
+  filterVisible.value = false
   handleQuery()
 }
 
-/** 添加/修改操作 */
-const formRef = ref()
 const openForm = (type: string, id?: number) => {
   formRef.value.open(type, id)
 }
 
-/** 删除按钮操作 */
+const handleCardClick = (row: WarehouseVO) => {
+  if (row.name === '-') return
+  openForm('update', row.id)
+}
+
 const handleDelete = async (id: number) => {
   try {
-    // 删除的二次确认
     await message.delConfirm()
-    // 发起删除
     await WarehouseApi.deleteWarehouse(id)
-    message.success(t('common.delSuccess'))
-    // 刷新列表
+    message.success('删除成功')
     await getList()
   } catch {}
 }
 
-/** 行点击操作 */
-const handleRowClick = (row: WarehouseVO) => {
-  openForm('update', row.id)
-}
-/** 修改默认状态 */
 const handleDefaultStatusChange = async (row: WarehouseVO) => {
   try {
-    // 修改状态的二次确认
     const text = row.defaultStatus ? '设置' : '取消'
     await message.confirm('确认要' + text + '"' + row.name + '"默认吗?')
-    // 发起修改状态
     await WarehouseApi.updateWarehouseDefaultStatus(row.id, row.defaultStatus)
-    // 刷新列表
     await getList()
-  } catch (e) {
-    // 取消后，进行恢复按钮
+  } catch {
     row.defaultStatus = !row.defaultStatus
   }
 }
 
-/** 导出按钮操作 */
 const handleExport = async () => {
   try {
-    // 导出的二次确认
     await message.exportConfirm()
-    // 发起导出
     exportLoading.value = true
     const data = await WarehouseApi.exportWarehouse(queryParams)
     download.excel(data, '仓库.xls')
-  } catch {
-  } finally {
+  } catch {} finally {
     exportLoading.value = false
   }
 }
 
-/** 初始化 **/
 onMounted(() => {
   getList()
 })
+
+const formatDate = (timestamp?: number) => {
+  if (!timestamp) return '-'
+  const d = new Date(timestamp)
+  const pad = (n: number) => n.toString().padStart(2, '0')
+  return `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())} ` +
+    `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
+}
 </script>
+
+<style lang="scss" scoped>
+.mobile-warehouse {
+  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;
+  }
+}
+.mobile-quick-actions {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+.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;
+  }
+  &__name {
+    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>