添加历史跟进弹窗

src/views/myCustomer/myCustomerDetail/components/FollowFormDialog/index.vue

@@ -4,6 +4,7 @@
         :submitLoading="editFormDialogSubmitLoading"
         :defaultFormData="{...defaultFormData}"
         :formItemList="formItemList"
+        :formDisabled="formDisabled"
         @close="CloseFormDialog"
         @confirm="HandleConfirmFormDialog">
     </FormDialog>
@@ -25,6 +26,10 @@ const props = defineProps({
     title:{
         type:String,
         default:'写跟进'
+    },
+    formDisabled:{
+        type:Boolean,
+        default:false
     }
 })
 const editFormDialogVisible = defineModel('visible')

src/views/myCustomer/myCustomerDetail/customerStatusOverview/index.vue

@@ -25,15 +25,15 @@
             </div>
         </div>
 
-        <!-- 中间：搜索与历史流程 -->
+        <!-- 中间：搜索与 进行中的跟进 -->
         <div class="center_panel">
             <div class="page_content hide_scrollbar"> 
-                <SearchBlock :searchList="searchList"></SearchBlock>
+                <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">详情</span>
+                            <span class="option_button_editor" @click="OpenFollowlFormDialog(row)">详情</span>
                         </div>
                     </template>
                 </FollowCard>
@@ -58,7 +58,7 @@
                                 <span class="time">{{cardItm.createTime}}</span>
                                 <span class="title one_line_ellipsis">{{cardItm.productName}}</span>
                                 <div class="table_row_option">
-                                    <span class="button_editor">详情</span>
+                                    <span class="button_editor"@click="OpenFollowlFormDialog(cardItm)">详情</span>
                                 </div>
                             </div>
                             <div class="card_tags">
@@ -88,7 +88,7 @@
             <div class="history_statistics">
                 <div class="stat_header">
                     <span>历史跟进</span>
-                    <el-button class="button_border">历史跟进</el-button>
+                    <el-button class="button_border" @click="OpenHistoryFollowDialog">历史跟进</el-button>
                 </div>
                 <div class="stat_numbers">
                     <div class="num_item">
@@ -116,16 +116,49 @@
             </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 { searchList } from './searchBlock';
+import { ongoingFollowSearchList,historyFollowSearchList } 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({
@@ -186,8 +219,8 @@ const productsStatus = ref<ProductStatusItm[]>([
 ]);
 
 
-// 历史跟进记录
-const historyFollowRecord = ref([
+// 进行中的跟进记录 
+const ongoingFollowRecord = ref([
     {
         id:'1',
         followUpTime: '26-02-19 19:00',
@@ -226,7 +259,7 @@ const historyFollowRecord = ref([
     }
 ])
 const finalRenderData = computed(()=>{
-    return   historyFollowRecord.value.map(item=>{
+    return   ongoingFollowRecord.value.map(item=>{
 
         let headerTags = []
         if(item.followUpStatus){
@@ -313,7 +346,7 @@ const pendingAppointmentList = ref<pendingAppointmentItm[]>([
 ])
 
 
-// 历史跟进
+// 历史跟进 数据总览
 const historyFollowData = ref({
     hsitoryProductNum:10,
     historyPeopleNum:2,
@@ -321,6 +354,95 @@ const historyFollowData = ref({
     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>

src/views/myCustomer/myCustomerDetail/customerStatusOverview/searchBlock.ts

@@ -1,6 +1,7 @@
 import { ref } from "vue"
 
-export const searchList = ref([
+// 进行中的跟进 有关筛选条件
+export const ongoingFollowSearchList = ref([
   {
     label: '时间',
     key: 'time',
@@ -59,4 +60,54 @@ export const searchList = ref([
       { label: '信息主任', value: 'it_director' }
     ]
   }
-])
+])
+
+
+// 历史跟进 有关筛选条件
+export const historyFollowSearchList = ref([
+  {
+    label: '产品',
+    key: 'product',
+    type: 'single',
+    options: [
+      { label: '全部', value: 'all' },
+      { label: '大数据教学诊断', value: 'bigDataTeachingDiagnosis' },
+      { label: '智能判分', value: 'intelligentGrading' },
+      { label: '材料采集', value: 'materialCollection' },
+      { label: '校内通知', value: 'inSchoolNotification' },
+      { label: '校本研修', value: 'schoolBasedResearch' },
+      { label: '协同备课', value: 'collaborativeLessonPreparation' }
+    ],
+    defaultValue: 'all'
+  },
+  {
+    label: '人员',
+    key: 'personnel',
+    type: 'single',
+    options: [
+      { label: '全部', value: 'all' },
+      { label: '员工1', value: 'employee1' },
+      { label: '员工2', value: 'employee2' },
+      { label: '员工3', value: 'employee3' },
+      { label: '员工4', value: 'employee4' },
+      { label: '员工5', value: 'employee5' }
+    ],
+    defaultValue: 'all'
+  },
+  {
+    label: '状态',
+    key: 'status',
+    type: 'single',
+    options: [
+      { label: '全部', value: 'all' },
+      { label: '线索建立', value: 'leadEstablishment' },
+      { label: '需求调研', value: 'requirementResearch' },
+      { label: '方案演示', value: 'proposalDemo' },
+      { label: '试用测试', value: 'trialTest' },
+      { label: '项目搁置', value: 'projectOnHold' },
+      { label: '输单', value: 'loss' },
+      { label: '赢单', value: 'win' }
+    ],
+    defaultValue: 'all'
+  }
+])