|
|
@@ -2,26 +2,14 @@
|
|
|
<div class="message_overview">
|
|
|
<!-- 左侧:产品概览与最新状态 -->
|
|
|
<div class="left_panel hide_scrollbar">
|
|
|
- <div class="product_summary">
|
|
|
- <div class="summary_title">跟进产品总数 {{ followUpProductSummary.total }}</div>
|
|
|
- <div class="summary_tags">
|
|
|
- <span v-for="(item,index) in followUpProductSummary.differentStatusNum" :key="index"> {{item.name}} {{item.num}}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
<div class="product_list">
|
|
|
-
|
|
|
<template v-for="(item,index) in productsStatus" :key="item.id" >
|
|
|
<div class="list_item">
|
|
|
<div class="item_title">{{item.name}}</div>
|
|
|
- <div class="item_info">跟进状态:{{item.followupStatus}}</div>
|
|
|
- <div class="item_info">联系人:{{item.concactPeople}}</div>
|
|
|
- <div class="item_info">上次跟进时间:{{item.lastFollowupTime}}</div>
|
|
|
<div class="item_info">跟进次数:{{item.followupTimes}}</div>
|
|
|
</div>
|
|
|
<div v-if="index !== (productsStatus?.length - 1)" class="page_solid_line" />
|
|
|
</template>
|
|
|
-
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
@@ -31,10 +19,7 @@
|
|
|
<SearchBlock :searchList="ongoingFollowSearchList"></SearchBlock>
|
|
|
<FollowCard v-if="finalRenderData?.length > 0" style="margin-top: 16px;" :cardList="finalRenderData">
|
|
|
<template #operation="{row}">
|
|
|
- <div style="" class="table_row_option">
|
|
|
- <span class="button_delete">取消预约</span>
|
|
|
- <span class="option_button_editor" @click="OpenFollowlFormDialog(row)">详情</span>
|
|
|
- </div>
|
|
|
+ <i></i>
|
|
|
</template>
|
|
|
</FollowCard>
|
|
|
<div v-else class="no_data_bg">
|
|
|
@@ -47,50 +32,13 @@
|
|
|
@paginationChange="handlePaginationChange" />
|
|
|
</div>
|
|
|
|
|
|
- <!-- 右侧:待办与统计 -->
|
|
|
+ <!-- 右侧:跟进记录统计 -->
|
|
|
<div class="right_panel">
|
|
|
- <div class="pending_appointments">
|
|
|
- <div class="panel_header">预约待办 (6项)</div>
|
|
|
- <ul class="task_list hide_scrollbar">
|
|
|
- <template v-if="pendingAppointmentList?.length > 0">
|
|
|
- <li v-for="cardItm in pendingAppointmentList" :key="cardItm.id" class="todo_card">
|
|
|
- <div class="card_top">
|
|
|
- <span class="time">{{cardItm.createTime}}</span>
|
|
|
- <span class="title one_line_ellipsis">{{cardItm.productName}}</span>
|
|
|
- <div class="table_row_option">
|
|
|
- <span class="button_editor"@click="OpenFollowlFormDialog(cardItm)">详情</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="card_tags">
|
|
|
- <span class="task_type">{{cardItm.taskType}}</span>
|
|
|
- <span class="follow_status">{{cardItm.followStatus}}</span>
|
|
|
- </div>
|
|
|
- <div class="card_info">
|
|
|
- <span>跟进人:{{ cardItm.followPeople }}</span>
|
|
|
- <span>联系人:{{ cardItm.concactPeople }}</span>
|
|
|
- <span>职务:{{ cardItm.position }}</span>
|
|
|
- </div>
|
|
|
- <div :title="cardItm.followContent" class="card_content two_line_ellipsis">
|
|
|
- 跟进内容:{{cardItm.followContent}}
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <li class="no_data">
|
|
|
- <div class="no_data_bg">
|
|
|
- <span>暂无数据</span>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- </template>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
-
|
|
|
<!-- 之前归属人的跟进记录 -->
|
|
|
<!-- 历史跟进的状态是否展示 要判断是否给当前用户开放历史跟进权限——待完善 -->
|
|
|
<div class="history_statistics">
|
|
|
<div class="stat_header">
|
|
|
- <span>历史跟进</span>
|
|
|
- <el-button class="button_border" @click="OpenHistoryFollowDialog">历史跟进</el-button>
|
|
|
+ <span>跟进记录</span>
|
|
|
</div>
|
|
|
<div class="stat_numbers">
|
|
|
<div class="num_item">
|
|
|
@@ -108,114 +56,39 @@
|
|
|
<div class="num">{{historyFollowData.followTimes}}</div>
|
|
|
<div class="label">跟进次数</div>
|
|
|
</div>
|
|
|
- <div class="vertical_solid"></div>
|
|
|
-
|
|
|
- <div class="num_item">
|
|
|
- <div class="num">{{historyFollowData.winnerCaseTimes}}</div>
|
|
|
- <div class="label">赢单次数</div>
|
|
|
- </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
- <!-- 查看跟进详情 -->
|
|
|
- <FollowFormDialog
|
|
|
- title="查看详情"
|
|
|
- :formDisabled="true"
|
|
|
- v-model:visible="followVisible"
|
|
|
- :defaultFormData="followDefaultFormData">
|
|
|
- </FollowFormDialog>
|
|
|
-
|
|
|
- <!-- 查看历史跟进 -->
|
|
|
- <PreviewDialog
|
|
|
- v-if="historyFollowVisible"
|
|
|
- :title="'历史跟进'"
|
|
|
- :previewVisible="historyFollowVisible"
|
|
|
- :customFooter="true"
|
|
|
- @close="CloseHistoryFollowDialog">
|
|
|
- <SearchBlock :searchList="historyFollowSearchList"></SearchBlock>
|
|
|
- <FollowCard style="margin-top: 16px;" :cardList="finalRenderCard">
|
|
|
- <template #operation>
|
|
|
- <i></i>
|
|
|
- </template>
|
|
|
- </FollowCard>
|
|
|
- <Pagination :currentPage="historyCurrentPage"
|
|
|
- :pageSize="historyPageSize" :totalNum="historyTotalNum">
|
|
|
- </Pagination>
|
|
|
- <template #close>
|
|
|
- <el-button @click="CloseHistoryFollowDialog" class="button_background" >关闭</el-button>
|
|
|
- </template>
|
|
|
- <template #confirm><i></i></template>
|
|
|
- </PreviewDialog>
|
|
|
-
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
import { ref,computed } from 'vue';
|
|
|
import SearchBlock from '@/baseComponents/SearchBlock.vue';
|
|
|
-import { ongoingFollowSearchList,historyFollowSearchList } from './searchBlock';
|
|
|
+import { ongoingFollowSearchList } from './searchBlock';
|
|
|
import FollowCard from '@/components/FollowCard.vue';
|
|
|
-
|
|
|
import Pagination from '@/baseComponents/Pagination.vue';
|
|
|
-import FollowFormDialog from '../components/FollowFormDialog/index.vue'
|
|
|
-
|
|
|
-import PreviewDialog from '@/baseComponents/PreviewDialog.vue';
|
|
|
|
|
|
-// 跟进产品总览
|
|
|
-const followUpProductSummary = ref({
|
|
|
- total:6,
|
|
|
- differentStatusNum:[
|
|
|
- {
|
|
|
- name:'线索建立',
|
|
|
- num:2
|
|
|
- },
|
|
|
- {
|
|
|
- name:'方案演示',
|
|
|
- num:1
|
|
|
- },
|
|
|
- {
|
|
|
- name:'试用测试',
|
|
|
- num:1
|
|
|
- },
|
|
|
- {
|
|
|
- name:'赢单',
|
|
|
- num:1
|
|
|
- },
|
|
|
- ]
|
|
|
-})
|
|
|
|
|
|
interface ProductStatusItm {
|
|
|
id:string,
|
|
|
name:string,
|
|
|
- followupStatus:string,
|
|
|
- concactPeople:string,
|
|
|
- lastFollowupTime:string,
|
|
|
followupTimes:string
|
|
|
}
|
|
|
const productsStatus = ref<ProductStatusItm[]>([
|
|
|
{
|
|
|
id:'1',
|
|
|
name: '大数据精准教学',
|
|
|
- followupStatus: '试用测试',
|
|
|
- concactPeople: '张三(校长)',
|
|
|
- lastFollowupTime: '26-08-12 8:00',
|
|
|
followupTimes: '6次',
|
|
|
},
|
|
|
{
|
|
|
id:'2',
|
|
|
name: '智能判分系统',
|
|
|
- followupStatus: '试用测试',
|
|
|
- concactPeople: '张三(校长)',
|
|
|
- lastFollowupTime: '26-08-12 8:00',
|
|
|
followupTimes: '6次',
|
|
|
},
|
|
|
{
|
|
|
id:'3',
|
|
|
name: '材料采集系统',
|
|
|
- followupStatus: '试用测试',
|
|
|
- concactPeople: '张三(校长)',
|
|
|
- lastFollowupTime: '26-08-12 8:00',
|
|
|
followupTimes: '6次',
|
|
|
},
|
|
|
]);
|
|
|
@@ -299,152 +172,15 @@ const handlePaginationChange = (params)=>{
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-// 预约待办项
|
|
|
-interface pendingAppointmentItm {
|
|
|
- id:string,
|
|
|
- createTime:string,
|
|
|
- productName:string,
|
|
|
- taskType:string,
|
|
|
- followStatus:string,
|
|
|
- followPeople:string,
|
|
|
- concactPeople:string,
|
|
|
- position:string,
|
|
|
- followContent:string,
|
|
|
-}
|
|
|
-const pendingAppointmentList = ref<pendingAppointmentItm[]>([
|
|
|
- {
|
|
|
- id:'1',
|
|
|
- createTime: '26-02-19 16:00',
|
|
|
- productName: '大数据精准教学...',
|
|
|
- taskType: '预约',
|
|
|
- followStatus: '方案演示',
|
|
|
- followPeople: '张三',
|
|
|
- concactPeople: '严谨',
|
|
|
- position: '校长',
|
|
|
- followContent: '跟进文案跟进文案跟进文案跟进文案跟进文案北京市东城区葱店西街56号跟进文案跟进文案跟进xxxx...',
|
|
|
- },
|
|
|
- {
|
|
|
- id:'2',
|
|
|
- createTime: '26-02-19 16:00',
|
|
|
- productName: '大数据精准教学',
|
|
|
- taskType: '待办',
|
|
|
- followStatus: '试用测试',
|
|
|
- followPeople: '张三',
|
|
|
- concactPeople: '严谨',
|
|
|
- position: '校长',
|
|
|
- followContent: '跟进文案跟进文案跟进文案跟进文案跟进文案北京市东城区葱店西街56号跟进文案跟进文案跟进xxxxx...',
|
|
|
- },
|
|
|
- {
|
|
|
- id:'3',
|
|
|
- createTime: '26-02-19 16:00',
|
|
|
- productName: '大数据精准教学',
|
|
|
- taskType: '待办',
|
|
|
- followStatus: '试用测试',
|
|
|
- followPeople: '张三',
|
|
|
- concactPeople: '严谨',
|
|
|
- position: '校长',
|
|
|
- followContent: '跟进文案跟进文案跟进文案跟进文案跟进文案北京市东城区葱店西街56号跟进文案跟进文案跟进...',
|
|
|
- },
|
|
|
-])
|
|
|
-
|
|
|
|
|
|
// 历史跟进 数据总览
|
|
|
const historyFollowData = ref({
|
|
|
hsitoryProductNum:10,
|
|
|
historyPeopleNum:2,
|
|
|
followTimes:8,
|
|
|
- winnerCaseTimes:8,
|
|
|
})
|
|
|
|
|
|
|
|
|
-/** 跟进弹窗详情(查看)有关数据及操作 */
|
|
|
-const followVisible = ref(false)
|
|
|
-const followDefaultFormData = ref({})
|
|
|
-const OpenFollowlFormDialog = (row)=>{
|
|
|
- followVisible.value = true
|
|
|
- followDefaultFormData.value = {
|
|
|
- // school:customerBaseMsg.value.schoolName,
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-/** 查看历史跟进 弹窗有关数据 */
|
|
|
-const historyFollowVisible = ref(false)
|
|
|
-const OpenHistoryFollowDialog = (row)=>{
|
|
|
- historyFollowVisible.value = true
|
|
|
-}
|
|
|
-const CloseHistoryFollowDialog = ()=>{
|
|
|
- historyFollowVisible.value = false
|
|
|
-}
|
|
|
-// 历史跟进记录 列表信息
|
|
|
-const historyFollowRecord = ref([
|
|
|
- {
|
|
|
- id:'1',
|
|
|
- date: '26-02-19 19:00',
|
|
|
- product: '大数据精准教学',
|
|
|
- status: '试用测试',
|
|
|
- tracker: '张三',
|
|
|
- contactPerson: '严谨',
|
|
|
- position: '校长',
|
|
|
- content: '跟进文案跟进文案跟进文案跟进文案跟进文案北京市东城区葱店西街56号跟进文案跟进文案跟进文案跟进文案跟进文案北京市东城区葱店西街56号',
|
|
|
- scheduleType: '', // 预约 / 待办
|
|
|
- scheduleTime: ''
|
|
|
- },
|
|
|
- {
|
|
|
- id:'2',
|
|
|
- date: '26-02-19 16:00',
|
|
|
- product: '智能判分系统',
|
|
|
- status: '方案演示',
|
|
|
- tracker: '张三',
|
|
|
- contactPerson: '严谨',
|
|
|
- position: '校长',
|
|
|
- content: '跟进文案跟进文案跟进文案跟进文案跟进文案北京市东城区葱店西街56号跟进文案跟进文案跟进文案跟进文案跟进文案北京市东城区葱店西街56号',
|
|
|
- scheduleType: '预约',
|
|
|
- scheduleTime: '26-02-09 12:00'
|
|
|
- },
|
|
|
- {
|
|
|
- id:'3',
|
|
|
- date: '26-02-18 19:00',
|
|
|
- product: '大数据精准教学',
|
|
|
- status: '试用测试',
|
|
|
- tracker: '张三',
|
|
|
- contactPerson: '严谨',
|
|
|
- position: '校长',
|
|
|
- content: '跟进文案跟进文案跟进文案跟进文案跟进文案北京市东城区葱店西街56号跟进文案跟进文案跟进文案跟进文案跟进文案北京市东城区葱店西街56号',
|
|
|
- scheduleType: '待办',
|
|
|
- scheduleTime: '26-02-09 12:00'
|
|
|
- }
|
|
|
-]);
|
|
|
-
|
|
|
-const finalRenderCard = historyFollowRecord.value.map(item=>{
|
|
|
-
|
|
|
- let middleDesc = [
|
|
|
- `跟进人:${item.tracker}`,
|
|
|
- `联系人:${item.contactPerson}`,
|
|
|
- `职务:${item.position}`
|
|
|
- ]
|
|
|
-
|
|
|
- if(item.scheduleType =='预约'){
|
|
|
- middleDesc.push(`预约时间:${item.scheduleTime}`)
|
|
|
- }else if(item.scheduleTime == '待办'){
|
|
|
- middleDesc.push(`待办时间:${item.scheduleTime}`)
|
|
|
-
|
|
|
- }
|
|
|
- return {
|
|
|
- id:item.id,
|
|
|
- headerTitleList:[item.date,item.product],
|
|
|
- headerTags:[item.status],
|
|
|
- taskType:item.scheduleType,
|
|
|
- middleDesc,
|
|
|
- bottomDesc:`跟进内容:${item.content}`,
|
|
|
- }
|
|
|
-})
|
|
|
-
|
|
|
-// 分页参数
|
|
|
-const historyCurrentPage = ref(1)
|
|
|
-const historyPageSize = ref(10)
|
|
|
-const historyTotalNum = ref(0)
|
|
|
-
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
@@ -469,28 +205,6 @@ const historyTotalNum = ref(0)
|
|
|
flex-direction: column;
|
|
|
gap: 16px;
|
|
|
|
|
|
- .product_summary {
|
|
|
- padding:12px;
|
|
|
- background: #F8FAFE;
|
|
|
- border-radius: 10px;
|
|
|
- border: 1px solid #EBEEF5;
|
|
|
- color: #333333;
|
|
|
-
|
|
|
- .summary_title {
|
|
|
- font-weight: 600;
|
|
|
- font-size: 16px;
|
|
|
- margin-bottom: 12px;
|
|
|
- line-height: 22px;
|
|
|
- }
|
|
|
-
|
|
|
- .summary_tags {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: repeat(2,1fr);
|
|
|
- gap:16px;
|
|
|
- font-size: 14px;
|
|
|
- line-height: 20px;
|
|
|
- }
|
|
|
- }
|
|
|
|
|
|
.product_list {
|
|
|
display: flex;
|
|
|
@@ -548,16 +262,10 @@ const historyTotalNum = ref(0)
|
|
|
}
|
|
|
}
|
|
|
:deep(.follow_card){
|
|
|
- .table_row_option{
|
|
|
- display: none;
|
|
|
- }
|
|
|
.audit_card{
|
|
|
&:hover{
|
|
|
border:solid #2E64FA 1px;
|
|
|
background-color: rgba(46, 100, 250,0.04);
|
|
|
- .table_row_option{
|
|
|
- display: flex;
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -571,113 +279,6 @@ const historyTotalNum = ref(0)
|
|
|
flex-direction: column;
|
|
|
justify-content: space-between;
|
|
|
gap: 16px;
|
|
|
-
|
|
|
- .pending_appointments {
|
|
|
- flex:1 1;
|
|
|
- overflow: auto;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 16px;
|
|
|
- color: #333333;
|
|
|
-
|
|
|
- .panel_header {
|
|
|
- font-size: 16px;
|
|
|
- line-height: 22px;
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
- .task_list{
|
|
|
- flex:1 1;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 16px;
|
|
|
- overflow: auto;
|
|
|
-
|
|
|
- .todo_card {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap:8px;
|
|
|
-
|
|
|
- border-radius: 8px;
|
|
|
- border: 1px solid #EBEEF5;
|
|
|
- padding: 12px;
|
|
|
-
|
|
|
- .card_top {
|
|
|
- display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
- align-items: center;
|
|
|
- gap:8px;
|
|
|
- font-weight: 600;
|
|
|
- line-height: 20px;
|
|
|
- .title{
|
|
|
- flex: 1;
|
|
|
- }
|
|
|
- .table_row_option {
|
|
|
- display: none;
|
|
|
- width: auto;
|
|
|
- flex-shrink: 0 !important;
|
|
|
- font-weight: 400;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .card_tags {
|
|
|
- display: flex;
|
|
|
- gap:10px;
|
|
|
- font-size: 12px;
|
|
|
- line-height: 17px;
|
|
|
-
|
|
|
- >span{
|
|
|
- border-radius:4px;
|
|
|
- padding:4px 8px;
|
|
|
- }
|
|
|
-
|
|
|
- .task_type{
|
|
|
- color:white;
|
|
|
- background: #2E64FA;
|
|
|
- }
|
|
|
- .follow_status{
|
|
|
- background: rgba(46,100,250,0.1);
|
|
|
- color:#2E64FA;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .card_info{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap:11px;
|
|
|
- font-size: 12px;
|
|
|
- line-height: 17px;
|
|
|
- }
|
|
|
- .card_content{
|
|
|
- font-size: 12px;
|
|
|
- color: #999999;
|
|
|
- line-height: 17px;
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- &:hover{
|
|
|
- border:solid #2E64FA 1px;
|
|
|
- .card_top{
|
|
|
- .table_row_option {
|
|
|
- display: flex;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .no_data{
|
|
|
- overflow: hidden;
|
|
|
- .no_data_bg{
|
|
|
- background-size: 200px auto;
|
|
|
- background-position: 50% 10px;
|
|
|
- span{
|
|
|
- margin-top: 110px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
.history_statistics{
|
|
|
padding:16px 14px 12px 16px;
|
|
|
background: #F8FAFE;
|
|
|
@@ -692,9 +293,6 @@ const historyTotalNum = ref(0)
|
|
|
font-weight: 600;
|
|
|
font-size: 16px;
|
|
|
margin-bottom: 10px;
|
|
|
- .button_border{
|
|
|
- background-color: #f8fafe;
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
.stat_numbers{
|