车辆管理、站内信消息适配手机端

src/views/erp/purchase/supplier/car/index.vue

@@ -1,112 +1,196 @@
 <template>
-  <ContentWrap>
-    <!-- 搜索工作栏 -->
-    <el-form
-      class="-mb-15px"
-      :model="queryParams"
-      ref="queryFormRef"
-      :inline="true"
-      label-width="68px"
-    >
-      <el-form-item label="司机姓名" prop="driverName">
-        <el-input
-          v-model="queryParams.driverName"
-          placeholder="请输入司机姓名"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="车牌号" prop="licensePlate">
+  <!-- 移动端布局 -->
+  <div v-if="isMobile" class="mobile-car-list">
+    <!-- 顶部操作栏 -->
+    <div class="mobile-header">
+      <div class="mobile-header__search">
         <el-input
           v-model="queryParams.licensePlate"
-          placeholder="请输入车牌号"
+          placeholder="搜索车牌号/司机"
           clearable
           @keyup.enter="handleQuery"
-          class="!w-240px"
+          :prefix-icon="Search"
         />
-      </el-form-item>
-      <el-form-item>
-        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
-        <el-button
-          type="primary"
-          plain
-          @click="openForm('create')"
-          v-hasPermi="['erp:car:create']"
-        >
-          <Icon icon="ep:plus" class="mr-5px" /> 新增
-        </el-button>
-        <el-button
-          type="success"
-          plain
-          @click="openImportForm()"
-          v-hasPermi="['erp:car:import']"
-        >
-          <Icon icon="ep:upload" class="mr-5px" /> 导入
-        </el-button>
-        <el-button
-          type="success"
-          plain
-          @click="handleExport"
-          :loading="exportLoading"
-          v-hasPermi="['erp:car:export']"
-        >
-          <Icon icon="ep:download" class="mr-5px" /> 导出
-        </el-button>
-      </el-form-item>
-    </el-form>
-  </ContentWrap>
+      </div>
+      <div class="mobile-header__actions">
+        <el-button :icon="Filter" circle @click="filterVisible = true" />
+        <el-button type="primary" :icon="Plus" circle @click="openForm('create')" v-hasPermi="['erp:car:create']" />
+      </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="openForm('update', row.id)"
+      >
+        <div class="mobile-card__header">
+          <span class="mobile-card__plate">{{ row.licensePlate }}</span>
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="row.status" />
+        </div>
+        <div class="mobile-card__body">
+          <div class="mobile-card__row">
+            <span class="mobile-card__label">司机</span>
+            <span class="mobile-card__value">{{ row.driverName }}</span>
+          </div>
+          <div class="mobile-card__row">
+            <span class="mobile-card__label">电话</span>
+            <span class="mobile-card__value">{{ row.contactPhone || '-' }}</span>
+          </div>
+          <div class="mobile-card__row">
+            <span class="mobile-card__label">核定吨位</span>
+            <span class="mobile-card__value">{{ row.ratedTonnage ? row.ratedTonnage + ' 吨' : '-' }}</span>
+          </div>
+          <div class="mobile-card__row">
+            <span class="mobile-card__label">车辆尺寸</span>
+            <span class="mobile-card__value">{{ row.carLength && row.carWidth ? `${row.carLength}m × ${row.carWidth}m` : '-' }}</span>
+          </div>
+        </div>
+        <div class="mobile-card__footer" @click.stop>
+          <el-button size="small" type="primary" @click="openForm('update', row.id)" v-hasPermi="['erp:car:update']">编辑</el-button>
+          <el-button size="small" type="danger" @click="handleDelete(row.id)" v-hasPermi="['erp:car:delete']">删除</el-button>
+        </div>
+      </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="driverName" />
-      <el-table-column label="车牌号" align="center" prop="licensePlate" />
-      <el-table-column label="联系电话" align="center" prop="contactPhone" />
-      <el-table-column label="长（米）" align="center" prop="carLength" />
-      <el-table-column label="宽（米）" align="center" prop="carWidth" />
-      <el-table-column label="核定吨位（吨）" align="center" prop="ratedTonnage" />
-      <el-table-column label="创建时间" align="center" prop="createTime" sortable>
-        <template #default="scope">
-          <span>{{ formatDate(new Date(scope.row.createTime)) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="备注" align="center" prop="remark" />
-      <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">
-        <template #default="scope">
-          <el-button
-            link
-            type="primary"
-            @click="openForm('update', scope.row.id)"
-            v-hasPermi="['erp:car:update']"
-          >
-            编辑
-          </el-button>
-          <el-button
-            link
-            type="danger"
-            @click="handleDelete(scope.row.id)"
-            v-hasPermi="['erp:car:delete']"
-          >
-            删除
-          </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>
+
+    <!-- 筛选抽屉 -->
+    <el-drawer v-model="filterVisible" title="筛选条件" direction="btt" size="50%">
+      <el-form :model="queryParams" ref="queryFormRef" label-position="top">
+        <el-form-item label="司机姓名" prop="driverName">
+          <el-input v-model="queryParams.driverName" placeholder="请输入司机姓名" clearable style="width:100%" />
+        </el-form-item>
+        <el-form-item label="车牌号" prop="licensePlate">
+          <el-input v-model="queryParams.licensePlate" placeholder="请输入车牌号" clearable style="width:100%" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="resetQuery">重置</el-button>
+        <el-button type="primary" @click="handleFilterConfirm">确认筛选</el-button>
+      </template>
+    </el-drawer>
+  </div>
+
+  <!-- PC端布局 -->
+  <template v-else>
+    <ContentWrap>
+      <!-- 搜索工作栏 -->
+      <el-form
+        class="-mb-15px"
+        :model="queryParams"
+        ref="queryFormRef"
+        :inline="true"
+        label-width="68px"
+      >
+        <el-form-item label="司机姓名" prop="driverName">
+          <el-input
+            v-model="queryParams.driverName"
+            placeholder="请输入司机姓名"
+            clearable
+            @keyup.enter="handleQuery"
+            class="!w-240px"
+          />
+        </el-form-item>
+        <el-form-item label="车牌号" prop="licensePlate">
+          <el-input
+            v-model="queryParams.licensePlate"
+            placeholder="请输入车牌号"
+            clearable
+            @keyup.enter="handleQuery"
+            class="!w-240px"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+          <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+          <el-button
+            type="primary"
+            plain
+            @click="openForm('create')"
+            v-hasPermi="['erp:car:create']"
+          >
+            <Icon icon="ep:plus" class="mr-5px" /> 新增
+          </el-button>
+          <el-button
+            type="success"
+            plain
+            @click="openImportForm()"
+            v-hasPermi="['erp:car:import']"
+          >
+            <Icon icon="ep:upload" class="mr-5px" /> 导入
+          </el-button>
+          <el-button
+            type="success"
+            plain
+            @click="handleExport"
+            :loading="exportLoading"
+            v-hasPermi="['erp:car:export']"
+          >
+            <Icon icon="ep:download" class="mr-5px" /> 导出
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </ContentWrap>
+
+    <!-- 列表 -->
+    <ContentWrap>
+      <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" @row-click="handleRowClick">
+        <el-table-column label="司机姓名" align="center" prop="driverName" />
+        <el-table-column label="车牌号" align="center" prop="licensePlate" />
+        <el-table-column label="联系电话" align="center" prop="contactPhone" />
+        <el-table-column label="长（米）" align="center" prop="carLength" />
+        <el-table-column label="宽（米）" align="center" prop="carWidth" />
+        <el-table-column label="核定吨位（吨）" align="center" prop="ratedTonnage" />
+        <el-table-column label="创建时间" align="center" prop="createTime" sortable>
+          <template #default="scope">
+            <span>{{ formatDate(new Date(scope.row.createTime)) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="备注" align="center" prop="remark" />
+        <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">
+          <template #default="scope">
+            <el-button
+              link
+              type="primary"
+              @click="openForm('update', scope.row.id)"
+              v-hasPermi="['erp:car:update']"
+            >
+              编辑
+            </el-button>
+            <el-button
+              link
+              type="danger"
+              @click="handleDelete(scope.row.id)"
+              v-hasPermi="['erp:car:delete']"
+            >
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- 分页 -->
+      <Pagination
+        :total="total"
+        v-model:page="queryParams.pageNo"
+        v-model:limit="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </ContentWrap>
+  </template>
 
   <!-- 表单弹窗：添加/修改 -->
   <CarForm ref="formRef" @success="getList" />
@@ -116,6 +200,7 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
 import { DICT_TYPE } from '@/utils/dict'
 import { formatDate } from '@/utils/formatTime'
 import download from '@/utils/download'
@@ -123,16 +208,22 @@ import * as CarApi from '@/api/erp/purchase/car/index'
 import * as CarVO from '@/api/erp/purchase/car/index'
 import CarForm from './CarForm.vue'
 import CarImportForm from './CarImportForm.vue'
+import { useWindowSize } from '@vueuse/core'
+import { Search, Filter, Plus } from '@element-plus/icons-vue'
 
 /** 车辆管理列表 */
 defineOptions({ name: 'ErpCar' })
 
+const { width } = useWindowSize()
+const isMobile = computed(() => width.value < 768)
+
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 
 const loading = ref(true) // 列表的加载中
 const list = ref<any[]>([]) // 列表的数据
 const total = ref(0) // 列表的总页数
+const filterVisible = ref(false) // 筛选抽屉
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
@@ -165,7 +256,13 @@ const handleQuery = () => {
 
 /** 重置按钮操作 */
 const resetQuery = () => {
-  queryFormRef.value.resetFields()
+  queryFormRef.value?.resetFields()
+  handleQuery()
+}
+
+/** 筛选确认 */
+const handleFilterConfirm = () => {
+  filterVisible.value = false
   handleQuery()
 }
 
@@ -210,7 +307,87 @@ const handleExport = async () => {
 }
 
 /** 初始化 **/
- onMounted(() => {
+onMounted(() => {
   getList()
 })
 </script>
+
+<style lang="scss" scoped>
+.mobile-car-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-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;
+  }
+  
+  &__plate {
+    font-weight: 600;
+    font-size: 16px;
+    color: #303133;
+  }
+  
+  &__body { font-size: 13px; }
+  
+  &__row {
+    display: flex;
+    justify-content: space-between;
+    padding: 4px 0;
+  }
+  
+  &__label {
+    color: #909399;
+    flex-shrink: 0;
+    margin-right: 12px;
+  }
+  
+  &__value {
+    color: #606266;
+    text-align: right;
+  }
+  
+  &__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>