yavii/mom-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

PC端和手机端端双端适配

Browse Source
This commit is contained in:
如初
2026-03-14 10:22:48 +08:00
parent cb13784141
commit 5a1923d9ca
92 changed files with 9011 additions and 3149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/views/erp/sale/customer/index.vue
View File

@@ -1,5 +1,6 @@
<template>
<div class="mobile-customer">
<!-- 移动端布局 -->
<div v-if="isMobile" class="mobile-customer">
<!-- 顶部操作栏 -->
<div class="mobile-header">
<div class="mobile-header__search">
@@ -91,18 +92,64 @@
<!-- 表单弹窗：添加/修改 -->
<CustomerForm ref="formRef" @success="getList" />
</div>
<!-- PC端布局 -->
<div v-else>
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
<el-form-item label="客户名称" prop="name"><el-input v-model="queryParams.name" placeholder="请输入客户名称" clearable @keyup.enter="handleQuery" class="!w-200px" /></el-form-item>
<el-form-item label="手机号码" prop="mobile"><el-input v-model="queryParams.mobile" placeholder="请输入手机号码" clearable @keyup.enter="handleQuery" class="!w-160px" /></el-form-item>
<el-form-item label="联系电话" prop="telephone"><el-input v-model="queryParams.telephone" placeholder="请输入联系电话" clearable @keyup.enter="handleQuery" class="!w-160px" /></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: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>
<!-- 列表 -->
<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="status" width="80"><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="remark" min-width="150" />
<el-table-column label="操作" align="center" fixed="right" width="150">
<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>
<!-- 表单弹窗：添加/修改 -->
<CustomerForm ref="formRef" @success="getList" />
</div>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { Search, Filter, Plus } from '@element-plus/icons-vue'
import { DICT_TYPE } from '@/utils/dict'
import download from '@/utils/download'
import { CustomerApi, CustomerVO } from '@/api/erp/sale/customer'
import CustomerForm from './CustomerForm.vue'
import { useWindowSize } from '@vueuse/core'
/** ERP 客户 列表 */
defineOptions({ name: 'ErpCustomer' })
const { width } = useWindowSize()
const isMobile = computed(() => width.value < 768)
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
@@ -188,6 +235,13 @@ const handleExport = async () => {
onMounted(() => {
getList()
})
/** 行点击操作 */
const handleRowClick = (row: CustomerVO, column: any, event: MouseEvent) => {
const target = event.target as HTMLElement
if (target.tagName === 'BUTTON' || target.tagName === 'A' || target.closest('button') || target.closest('a') || target.closest('.el-button')) return
openForm('update', row.id)
}
</script>
<style lang="scss" scoped>