From 7c6b21d73cbcab3367d9da6884b5d81ee68deb43 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期四, 22 一月 2026 15:49:48 +0800
Subject: [PATCH] 湟水峡 1.发货分开类型货车和快递,并可以上传图片 2.添加客户拜访记录页面
---
src/api/collaborativeApproval/customerVisit.js | 10 ++
src/views/collaborativeApproval/customerVisit/index.vue | 269 +++++++++++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 279 insertions(+), 0 deletions(-)
diff --git a/src/api/collaborativeApproval/customerVisit.js b/src/api/collaborativeApproval/customerVisit.js
new file mode 100644
index 0000000..dce1fdf
--- /dev/null
+++ b/src/api/collaborativeApproval/customerVisit.js
@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+// 鑾峰彇鎷滆璁板綍鍒楄〃
+export function getVisitRecords(query) {
+ return request({
+ url: '/customerVisits/listPage',
+ method: 'get',
+ params: query
+ })
+}
diff --git a/src/views/collaborativeApproval/customerVisit/index.vue b/src/views/collaborativeApproval/customerVisit/index.vue
new file mode 100644
index 0000000..3122f3f
--- /dev/null
+++ b/src/views/collaborativeApproval/customerVisit/index.vue
@@ -0,0 +1,269 @@
+<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>
+ </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)">鏌ョ湅</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>
+ </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
+import pagination from '@/components/PIMTable/Pagination.vue'
+import { getVisitRecords } from '@/api/collaborativeApproval/customerVisit.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 = {}
+}
+
+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>
--
Gitblit v1.9.3