<template>
|
<div class="app-container">
|
<div class="search_form">
|
<el-form :model="searchForm" :inline="true">
|
<el-form-item label="客户名称：">
|
<el-input
|
v-model="searchForm.customerName"
|
placeholder="请输入客户名称"
|
clearable
|
prefix-icon="Search"
|
style="width: 200px"
|
@change="handleQuery"
|
/>
|
</el-form-item>
|
<el-form-item label="拜访人：">
|
<el-input
|
v-model="searchForm.visitingPeople"
|
placeholder="请输入拜访人"
|
clearable
|
prefix-icon="Search"
|
style="width: 200px"
|
@change="handleQuery"
|
/>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="handleQuery">搜索</el-button>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="openAddDialog">新增</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div class="table_list">
|
<el-table
|
:data="tableData"
|
border
|
v-loading="tableLoading"
|
style="width: 100%"
|
height="calc(100vh - 18.5em)"
|
>
|
<el-table-column align="center" label="序号" type="index" width="60" />
|
<el-table-column label="客户名称" prop="customerName" width="150" show-overflow-tooltip />
|
<el-table-column label="联系人" prop="contact" width="120" show-overflow-tooltip />
|
<el-table-column label="联系电话" prop="contactPhone" width="140" show-overflow-tooltip />
|
<el-table-column label="拜访目的" prop="purposeVisit" width="150" show-overflow-tooltip />
|
<el-table-column label="拜访时间" prop="purposeDate" width="180" show-overflow-tooltip />
|
<el-table-column label="拜访地点" prop="visitAddress" min-width="200" show-overflow-tooltip />
|
<el-table-column label="拜访人" prop="visitingPeople" width="120" show-overflow-tooltip />
|
<el-table-column fixed="right" label="操作" width="100" align="center">
|
<template #default="scope">
|
<el-button link type="primary" size="small" @click="viewDetail(scope.row)" style="color: #67C23A">查看</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<pagination
|
v-show="total > 0"
|
:total="total"
|
layout="total, sizes, prev, pager, next, jumper"
|
:page="page.current"
|
:limit="page.size"
|
@pagination="paginationChange"
|
/>
|
</div>
|
|
<!-- 详情弹窗 -->
|
<el-dialog
|
v-model="detailVisible"
|
title="客户拜访记录详情"
|
width="600px"
|
@close="closeDetail"
|
>
|
<div class="content-container">
|
<!-- 客户信息 -->
|
<div class="section">
|
<div class="section-title">客户信息</div>
|
<div class="info-item">
|
<span class="info-label">客户名称</span>
|
<span class="info-value">{{ detailForm.customerName || '-' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="info-label">联系人</span>
|
<span class="info-value">{{ detailForm.contact || '-' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="info-label">联系电话</span>
|
<span class="info-value">{{ detailForm.contactPhone || '-' }}</span>
|
</div>
|
</div>
|
|
<!-- 拜访信息 -->
|
<div class="section">
|
<div class="section-title">拜访信息</div>
|
<div class="info-item">
|
<span class="info-label">拜访目的</span>
|
<span class="info-value">{{ detailForm.purposeVisit || '-' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="info-label">拜访时间</span>
|
<span class="info-value">{{ detailForm.purposeDate || '-' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="info-label">拜访地点</span>
|
<span class="info-value multi-line">{{ detailForm.visitAddress || '-' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="info-label">拜访人</span>
|
<span class="info-value">{{ detailForm.visitingPeople || '-' }}</span>
|
</div>
|
<div class="info-item" v-if="detailForm.latitude && detailForm.longitude">
|
<span class="info-label">经纬度</span>
|
<span class="info-value">{{ detailForm.latitude }}, {{ detailForm.longitude }}</span>
|
</div>
|
</div>
|
|
<!-- 备注信息 -->
|
<div class="section">
|
<div class="section-title">备注信息</div>
|
<div class="info-item remark-item">
|
<span class="info-label">备注</span>
|
<span class="info-value multi-line">{{ detailForm.remark || '-' }}</span>
|
</div>
|
</div>
|
</div>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button @click="closeDetail">关闭</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
<!-- 新增弹窗 -->
|
<el-dialog
|
v-model="addVisible"
|
title="新增客户拜访记录"
|
width="600px"
|
@close="closeAddDialog"
|
>
|
<el-form ref="addFormRef" :model="addForm" :rules="addRules" label-width="100px">
|
<el-form-item label="客户名称" prop="customerId">
|
<el-select
|
v-model="addForm.customerId"
|
filterable
|
placeholder="请选择客户"
|
style="width: 100%"
|
@change="handleCustomerChange"
|
>
|
<el-option
|
v-for="item in customerOptions"
|
:key="item.id"
|
:label="item.customerName"
|
:value="item.id"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="联系人" prop="contact">
|
<el-input v-model="addForm.contact" placeholder="请输入联系人" />
|
</el-form-item>
|
<el-form-item label="联系电话" prop="contactPhone">
|
<el-input v-model="addForm.contactPhone" placeholder="请输入联系电话" />
|
</el-form-item>
|
<el-form-item label="拜访目的" prop="purposeVisit">
|
<el-input v-model="addForm.purposeVisit" placeholder="请输入拜访目的" />
|
</el-form-item>
|
<el-form-item label="拜访时间" prop="purposeDate">
|
<el-date-picker
|
v-model="addForm.purposeDate"
|
type="date"
|
value-format="YYYY-MM-DD"
|
placeholder="请选择拜访时间"
|
style="width: 100%"
|
/>
|
</el-form-item>
|
<el-form-item label="拜访地点" prop="visitAddress">
|
<el-input v-model="addForm.visitAddress" placeholder="请输入拜访地点" />
|
</el-form-item>
|
<el-form-item label="拜访人" prop="visitingPeople">
|
<el-input v-model="addForm.visitingPeople" placeholder="请输入拜访人" />
|
</el-form-item>
|
<el-form-item label="备注" prop="remark">
|
<el-input v-model="addForm.remark" type="textarea" :rows="3" placeholder="请输入备注" />
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button type="primary" :loading="addSubmitting" @click="submitAdd">确认</el-button>
|
<el-button @click="closeAddDialog">取消</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
|
import pagination from '@/components/PIMTable/Pagination.vue'
|
import { getVisitRecords, addVisitRecord } from '@/api/collaborativeApproval/customerVisit.js'
|
import { getAllCustomerList } from '@/api/customerService/index.js'
|
|
const { proxy } = getCurrentInstance()
|
const tableData = ref([])
|
const tableLoading = ref(false)
|
const page = reactive({
|
current: 1,
|
size: 10,
|
})
|
const total = ref(0)
|
|
// 搜索表单
|
const searchForm = reactive({
|
customerName: '',
|
visitingPeople: '',
|
})
|
|
// 详情相关
|
const detailVisible = ref(false)
|
const detailForm = ref({})
|
|
// 查询列表
|
const handleQuery = () => {
|
page.current = 1
|
getList()
|
}
|
|
// 分页变化
|
const paginationChange = (obj) => {
|
page.current = obj.page
|
page.size = obj.limit
|
getList()
|
}
|
|
// 获取列表数据
|
const getList = () => {
|
tableLoading.value = true
|
getVisitRecords({ ...searchForm, ...page })
|
.then((res) => {
|
tableLoading.value = false
|
if (res.code === 200) {
|
tableData.value = res.data?.records || res.records || []
|
total.value = res.data?.total || res.total || 0
|
} else {
|
proxy.$modal.msgError(res.msg || '获取数据失败')
|
}
|
})
|
.catch(() => {
|
tableLoading.value = false
|
})
|
}
|
|
// 查看详情
|
const viewDetail = (row) => {
|
detailForm.value = { ...row }
|
detailVisible.value = true
|
}
|
|
// 关闭详情
|
const closeDetail = () => {
|
detailVisible.value = false
|
detailForm.value = {}
|
}
|
|
// 新增相关
|
const addVisible = ref(false)
|
const addSubmitting = ref(false)
|
const addFormRef = ref(null)
|
const customerOptions = ref([])
|
const addForm = reactive({
|
customerId: '',
|
customerName: '',
|
contact: '',
|
contactPhone: '',
|
purposeVisit: '',
|
purposeDate: '',
|
visitAddress: '',
|
visitingPeople: '',
|
remark: '',
|
})
|
const addRules = {
|
customerId: [{ required: true, message: '请选择客户', trigger: 'change' }],
|
purposeVisit: [{ required: true, message: '请输入拜访目的', trigger: 'blur' }],
|
purposeDate: [{ required: true, message: '请选择拜访时间', trigger: 'change' }],
|
visitingPeople: [{ required: true, message: '请输入拜访人', trigger: 'blur' }],
|
}
|
|
// 打开新增弹窗
|
const openAddDialog = () => {
|
resetAddForm()
|
addVisible.value = true
|
// 懒加载客户下拉数据
|
if (!customerOptions.value.length) {
|
getCustomerOptions()
|
}
|
}
|
|
// 获取客户下拉数据
|
const getCustomerOptions = () => {
|
getAllCustomerList({ current: 1, size: 1000, total: 0 }).then((res) => {
|
customerOptions.value = (res.data?.records || []).map((item) => ({
|
id: item.id,
|
customerName: item.customerName,
|
contact: item.contactPerson,
|
contactPhone: item.contactPhone,
|
companyAddress: item.companyAddress,
|
}))
|
})
|
}
|
|
// 选择客户后带出联系人和联系电话
|
const handleCustomerChange = (customerId) => {
|
const customer = customerOptions.value.find((item) => item.id === customerId)
|
addForm.customerName = customer?.customerName || ''
|
addForm.contact = customer?.contact || ''
|
addForm.contactPhone = customer?.contactPhone || ''
|
addForm.visitAddress = customer?.companyAddress || ''
|
}
|
|
// 重置新增表单
|
const resetAddForm = () => {
|
Object.assign(addForm, {
|
customerId: '',
|
customerName: '',
|
contact: '',
|
contactPhone: '',
|
purposeVisit: '',
|
purposeDate: '',
|
visitAddress: '',
|
visitingPeople: '',
|
remark: '',
|
})
|
addFormRef.value?.resetFields()
|
}
|
|
// 关闭新增弹窗
|
const closeAddDialog = () => {
|
addVisible.value = false
|
resetAddForm()
|
}
|
|
// 提交新增
|
const submitAdd = () => {
|
addFormRef.value.validate((valid) => {
|
if (!valid) return
|
const { customerId, ...data } = addForm
|
addSubmitting.value = true
|
addVisitRecord(data)
|
.then((res) => {
|
addSubmitting.value = false
|
if (res.code === 200) {
|
proxy.$modal.msgSuccess('新增成功')
|
closeAddDialog()
|
handleQuery()
|
} else {
|
proxy.$modal.msgError(res.msg || '新增失败')
|
}
|
})
|
.catch(() => {
|
addSubmitting.value = false
|
})
|
})
|
}
|
|
onMounted(() => {
|
getList()
|
})
|
</script>
|
|
<style scoped lang="scss">
|
.table_list {
|
margin-top: unset;
|
}
|
|
.content-container {
|
padding: 10px;
|
}
|
|
.section {
|
margin-bottom: 24px;
|
|
&:last-child {
|
margin-bottom: 0;
|
}
|
}
|
|
.section-title {
|
font-size: 16px;
|
font-weight: bold;
|
color: #303133;
|
margin-bottom: 16px;
|
padding-bottom: 8px;
|
border-bottom: 1px solid #e4e7ed;
|
}
|
|
.info-item {
|
display: flex;
|
margin-bottom: 12px;
|
line-height: 1.6;
|
|
&:last-child {
|
margin-bottom: 0;
|
}
|
|
&.remark-item {
|
flex-direction: column;
|
align-items: flex-start;
|
|
.info-label {
|
margin-bottom: 8px;
|
}
|
|
.info-value {
|
width: 100%;
|
}
|
}
|
}
|
|
.info-label {
|
font-weight: 500;
|
color: #606266;
|
min-width: 100px;
|
margin-right: 12px;
|
flex-shrink: 0;
|
}
|
|
.info-value {
|
color: #303133;
|
flex: 1;
|
word-break: break-all;
|
|
&.multi-line {
|
white-space: pre-wrap;
|
word-break: break-word;
|
}
|
}
|
</style>
|
