销售管理适配手机端

src/views/erp/sale/customer/index.vue

@@ -1,118 +1,101 @@
 <template>
-  <doc-alert title="【销售】销售订单、出库、退货" url="https://doc.iocoder.cn/erp/sale/" />
-
-  <ContentWrap>
-    <!-- 搜索工作栏 -->
-    <el-form
-      class="-mb-15px"
-      :model="queryParams"
-      ref="queryFormRef"
-      :inline="true"
-      label-width="68px"
-    >
-      <el-form-item label="名称" prop="name">
+  <div class="mobile-customer">
+    <!-- 顶部操作栏 -->
+    <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="mobile">
-        <el-input
-          v-model="queryParams.mobile"
-          placeholder="请输入手机号码"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="联系电话" prop="telephone">
-        <el-input
-          v-model="queryParams.telephone"
-          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>
+      </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:customer:create']"
-        >
-          <Icon icon="ep:plus" class="mr-5px" /> 新增
-        </el-button>
-        <el-button
-          type="success"
-          plain
-          @click="handleExport"
-          :loading="exportLoading"
-          v-hasPermi="['erp:customer:export']"
-        >
-          <Icon icon="ep:download" class="mr-5px" /> 导出
-        </el-button>
-      </el-form-item>
-    </el-form>
-  </ContentWrap>
+        />
+      </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="item in list"
+        :key="item.id"
+        class="mobile-card"
+        @click="openForm('update', item.id)"
+      >
+        <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" v-if="item.contact">
+            <span class="mobile-card__label">联系人</span>
+            <span class="mobile-card__value">{{ item.contact }}</span>
+          </div>
+          <div class="mobile-card__row" v-if="item.mobile">
+            <span class="mobile-card__label">手机号码</span>
+            <span class="mobile-card__value">{{ item.mobile }}</span>
+          </div>
+          <div class="mobile-card__row" v-if="item.remark">
+            <span class="mobile-card__label">备注</span>
+            <span class="mobile-card__value mobile-card__value--ellipsis">{{ item.remark }}</span>
+          </div>
+        </div>
+        <div class="mobile-card__footer">
+          <el-button size="small" type="primary" @click.stop="openForm('update', item.id)" v-hasPermi="['erp:customer:update']">编辑</el-button>
+          <el-button size="small" type="danger" @click.stop="handleDelete(item.id)" v-hasPermi="['erp:customer: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="name" />
-      <el-table-column label="联系人" align="center" prop="contact" />
-      <el-table-column label="手机号码" align="center" prop="mobile" />
-<!--      <el-table-column label="联系电话" align="center" prop="telephone" />-->
-<!--      <el-table-column label="电子邮箱" align="center" prop="email" />-->
-      <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">
-        <template #default="scope">
-          <el-button
-            link
-            type="primary"
-            @click="openForm('update', scope.row.id)"
-            v-hasPermi="['erp:customer:update']"
-          >
-            编辑
-          </el-button>
-          <el-button
-            link
-            type="danger"
-            @click="handleDelete(scope.row.id)"
-            v-hasPermi="['erp:customer: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>
 
-  <!-- 表单弹窗：添加/修改 -->
-  <CustomerForm ref="formRef" @success="getList" />
+    <!-- 筛选抽屉 -->
+    <el-drawer v-model="filterVisible" title="筛选条件" direction="btt" size="50%">
+      <el-form :model="queryParams" ref="queryFormRef" label-position="top">
+        <el-form-item label="手机号码" prop="mobile">
+          <el-input v-model="queryParams.mobile" placeholder="请输入手机号码" clearable />
+        </el-form-item>
+        <el-form-item label="联系电话" prop="telephone">
+          <el-input v-model="queryParams.telephone" placeholder="请输入联系电话" clearable />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="resetQuery">重置</el-button>
+        <el-button type="primary" @click="handleFilterConfirm">确认筛选</el-button>
+      </template>
+    </el-drawer>
+
+    <!-- 表单弹窗：添加/修改 -->
+    <CustomerForm ref="formRef" @success="getList" />
+  </div>
 </template>
 
 <script setup lang="ts">
+import { Search, Filter, Plus } from '@element-plus/icons-vue'
 import { DICT_TYPE } from '@/utils/dict'
-import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
 import { CustomerApi, CustomerVO } from '@/api/erp/sale/customer'
 import CustomerForm from './CustomerForm.vue'
@@ -126,6 +109,7 @@ const { t } = useI18n() // 国际化
 const loading = ref(true) // 列表的加载中
 const list = ref<CustomerVO[]>([]) // 列表的数据
 const total = ref(0) // 列表的总页数
+const filterVisible = ref(false) // 筛选抽屉
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
@@ -148,25 +132,6 @@ const getList = async () => {
   }
 }
 
-
-/** 行点击操作 */
-const handleRowClick = (row: CustomerVO, column: any, event: MouseEvent) => {
-  // 检查是否点击了按钮、链接或其他交互元素
-  const target = event.target as HTMLElement
-  if (
-    target.tagName === 'BUTTON' ||
-    target.tagName === 'A' ||
-    target.tagName === 'I' ||
-    target.tagName === 'svg' ||
-    target.closest('button') ||
-    target.closest('a') ||
-    target.closest('.el-button') ||
-    target.closest('.el-checkbox')
-  ) {
-    return
-  }
-    openForm('update', row.id)
-}
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.pageNo = 1
@@ -175,7 +140,13 @@ const handleQuery = () => {
 
 /** 重置按钮操作 */
 const resetQuery = () => {
-  queryFormRef.value.resetFields()
+  queryFormRef.value?.resetFields()
+  handleQuery()
+}
+
+/** 筛选确认 */
+const handleFilterConfirm = () => {
+  filterVisible.value = false
   handleQuery()
 }
 
@@ -218,3 +189,106 @@ onMounted(() => {
   getList()
 })
 </script>
+
+<style lang="scss" scoped>
+.mobile-customer {
+  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;
+  }
+
+  &__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>