仓库、总库存、库存明细适配手机端

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>