湟水峡 1.发货分开类型货车和快递,并可以上传图片 2.添加客户拜访记录页面

gaoluyang

4 天以前 7c6b21d73cbcab3367d9da6884b5d81ee68deb43

湟水峡
1.发货分开类型货车和快递,并可以上传图片
2.添加客户拜访记录页面

 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
  })
}

 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>