提取操作记录弹窗公共组件

src/components/CustomerOperationDialog/index.vue

@@ -0,0 +1,210 @@
+<!-- 我的客户 和 公海客户 的客户操作记录  -->
+
+<template>
+    <!-- 操作记录 弹窗 -->
+    <PreviewDialog 
+        class="operation_dialog"
+        title="操作记录"
+        :previewVisible="operationRecordDialogVisible"
+        :customFooter="true"
+        @close="CloseOperationRecordDialog">
+        <SearchBlock :searchList="operationRecordSearchList" 
+            @searchChange="HandleOperationLogSearchChange">
+        </SearchBlock>
+        <FollowCard :cardList="finalOperationLogRenderData">
+            <template #operation><i></i></template>
+        </FollowCard>
+        <Pagination :currentPage="currentPage" 
+            :pageSize="pageSize" :totalNum="totalNum"
+            :showPageSize="true"
+            @paginationChange="HandleLogPaginationChange">
+            <template #paginationDesc>
+                <span>共 {{totalNum}} 条数据</span>
+            </template>
+        </Pagination>
+        <template #close>
+            <el-button @click="CloseOperationRecordDialog" class="button_background" >关闭</el-button>
+        </template>
+        <template #confirm><i></i></template>
+    </PreviewDialog>
+
+</template>
+
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+
+import PreviewDialog from '@/baseComponents/PreviewDialog.vue';
+import SearchBlock from '@/baseComponents/SearchBlock.vue';
+import FollowCard from '@/components/FollowCard.vue';
+import Pagination from '@/baseComponents/Pagination.vue';
+import {operationRecordSearchList} from './searchBlock'
+
+import {
+    getOperationLogApi,
+} from '@/api/highSeasCustomer'
+
+
+const operationRecordDialogVisible = defineModel('dialogVisible')
+
+
+const route = useRoute()
+
+
+// /**  操作记录列表有关数据  */
+const finalOperationLogRenderData = ref([])
+//  分页参数 有关数据 *
+const currentPage = ref(1)
+const pageSize = ref(20)
+const totalNum = ref(0)
+const searchParams = ref({
+    personnel:'all'
+})
+
+// 关闭
+const CloseOperationRecordDialog=()=>{
+    operationRecordDialogVisible.value = false
+    searchParams.value = {
+        personnel:'all'
+    }
+}
+
+// 搜索条件变化
+const HandleOperationLogSearchChange = async (params,key)=>{
+    searchParams.value = {
+        ...searchParams.value,
+        ...params,
+    }
+    await GetOperationList()
+}
+// 分页变化
+const HandleLogPaginationChange = async (params)=>{
+    const {type,val} = params
+    if(type == 'currentPage'){
+        currentPage.value = val
+    }else if(type == 'pageSize'){
+        pageSize.value = val
+    }
+    await GetOperationList()
+}
+
+
+
+//获取日志列表
+const GetOperationList = async ()=>{
+    let params = {
+        customerId: route.query.id,
+        operUserId: searchParams.value.personnel == 'all' ? '' : searchParams.value.personnel,
+        pageNum: currentPage.value,
+        pageSize: pageSize.value
+    }
+    let res = await getOperationLogApi(params)
+    if(res?.code == 200){
+       const {data:operationData, dateData, groupData, memberData} =  res?.data
+       totalNum.value = operationData.total
+
+        let memberOption = memberData?.map(item=>{
+            return {
+                label:item.username,
+                value:item.id
+            }
+        }) || []
+        operationRecordSearchList.value = operationRecordSearchList.value.map(item=>{
+            if(item.key=='personnel'){
+                item.options = [
+                    { label: '全部', value: 'all' },
+                    ...memberOption
+                ]
+                item.defaultValue = searchParams.value.personnel
+            }
+            return item
+        })
+
+
+
+        finalOperationLogRenderData.value = operationData.records.map(item=>{
+            let operationName = OperationNumToName(item.operAction)
+            //操作概览
+            let operationAim = ''
+            if(item.operDataType === 1){  //联系人
+                // 增  改  删
+                if([11,12,13].includes(item.operAction)){
+                    operationAim = '联系人'
+                }else{
+                    operationAim = ''
+                }
+            }else if(item.operDataType === 0){ //客户
+                if([12].includes(item.operAction)){
+                    operationAim = '学校信息'
+                }else{
+                    operationAim = ''
+                }
+                // 这两个 记录的结果待完善
+                // case 1:
+                //     return '跟进'
+                // case 2:
+                //     return '转让'
+            }
+
+            // 具体操作信息
+            // 增  改  删
+            let operationDetail = ''
+            let content = item.content.split(',')
+            if([11,12,13].includes(item.operAction)){
+                if(item.operAction === 12){
+                    operationDetail = content[0] + ` <span style="color:#2E64FA">调整为</span> ` + content[1]
+                }else if(item.operAction === 11){
+                    operationDetail =  `<span style="color:#2E64FA">新增</span> ` + content[0]  
+                }else if(item.operAction === 13){
+                    operationDetail =  `<span style="color:#F56C6C">删除</span> ` + content[0]  
+                }
+            }else{
+                operationDetail = content[0]
+            }
+            return {
+                headerTitleList:[
+                    item.operDatetime,
+                    item.operName,
+                    operationName+operationAim,
+                ],
+                headerTags:[],
+                middleDesc:[],
+                bottomDesc:`操作内容：${operationDetail}`
+            }
+        })
+    }
+}
+
+
+// 0-认领，1-跟进，2-转让，3-转到公海,11-新增，12-修改，13-删除
+const OperationNumToName = (num)=>{
+    switch(num){
+        case 0:
+            return '认领'
+        case 1:
+            return '跟进'
+        case 2:
+            return '转让'
+        case 3:
+            return '转至公海'
+        case 11:
+            return '新增'
+        case 12:
+            return '编辑'
+        case 13:
+            return '删除'
+    }
+}
+
+onMounted(async ()=>{
+    await GetOperationList()
+})
+</script>
+
+
+<style lang="scss" scoped>
+
+
+</style>

src/views/highSeasCustomer/highSeasCustomerDetail/index.vue

@@ -36,32 +36,10 @@
 
 
         <!-- 操作记录 弹窗 -->
-        <PreviewDialog 
+        <CustomerOperationDialog 
             v-if="operationRecordDialogVisible"
-            class="operation_dialog"
-            title="操作记录"
-            :previewVisible="operationRecordDialogVisible"
-            :customFooter="true"
-            @close="CloseOperationRecordDialog">
-            <SearchBlock :searchList="operationRecordSearchList" 
-                @searchChange="HandleOperationLogSearchChange">
-            </SearchBlock>
-            <FollowCard :card-list="finalOperationLogRenderData">
-                <template #operation><i></i></template>
-            </FollowCard>
-            <Pagination :currentPage="currentPage" 
-                :pageSize="pageSize" :totalNum="totalNum"
-                :showPageSize="true"
-                @paginationChange="HandleLogPaginationChange">
-                <template #paginationDesc>
-                    <span>共 {{totalNum}} 条数据</span>
-                </template>
-            </Pagination>
-            <template #close>
-                <el-button @click="CloseOperationRecordDialog" class="button_background" >关闭</el-button>
-            </template>
-            <template #confirm><i></i></template>
-        </PreviewDialog>
+            v-model:dialogVisible="operationRecordDialogVisible">
+        </CustomerOperationDialog>
 
         <!-- 编辑学校弹窗 -->
         <SchoolFormDialog 
@@ -104,15 +82,11 @@ import TabSearch from '@/baseComponents/TabSearch.vue';
 import {tabList} from './tabSearch'
 import ContactDetail from './contactDetail/index.vue'
 import CustomerStatusOverview from './customerStatusOverview/index.vue'
-import PreviewDialog from '@/baseComponents/PreviewDialog.vue';
-import SearchBlock from '@/baseComponents/SearchBlock.vue';
 
-import {operationRecordSearchList} from './searchBlock'
-import FollowCard from '@/components/FollowCard.vue';
-import Pagination from '@/baseComponents/Pagination.vue';
 import SchoolFormDialog from '@/components/SchoolFormDialog/index.vue'
 import ConcactPeopleFormDialog from '@/components/ConcactPeopleFormDialog/index.vue'
 import { ElMessage } from 'element-plus';
+import CustomerOperationDialog from '@/components/CustomerOperationDialog/index.vue'
 
 import DeleteCustomerDialog from '../components/DeleteCustomerDialog.vue';
 
@@ -120,7 +94,6 @@ import {
     addContactPeopleApi,
     claimHighSeasCustomerApi,
     updateHighSeasCustomerApi,
-    getOperationLogApi,
 } from '@/api/highSeasCustomer'
 
 interface CustomerBaseMsg {
@@ -260,155 +233,15 @@ const HandleSchoolDialogConfirm = async (params)=>{
 }
 
 
-
 /** 4. 操作记录相关内容及操作 */
 // 操作记录弹窗
 const operationRecordDialogVisible = ref(false)
 // 打开
 const OpenOperationRecordDialog = async ()=>{
     operationRecordDialogVisible.value = true
-    await GetOperationList()
-}
-// 关闭
-const CloseOperationRecordDialog=()=>{
-    operationRecordDialogVisible.value = false
-    searchParams.value = {
-        personnel:'all'
-    }
-}
-
-// /**  操作记录列表有关数据  */
-const finalOperationLogRenderData = ref([])
-//  分页参数 有关数据 *
-const currentPage = ref(1)
-const pageSize = ref(20)
-const totalNum = ref(0)
-const searchParams = ref({
-    personnel:'all'
-})
-// 搜索条件变化
-const HandleOperationLogSearchChange = async (params,key)=>{
-    searchParams.value = {
-        ...searchParams.value,
-        ...params,
-    }
-    await GetOperationList()
 }
-// 分页变化
-const HandleLogPaginationChange = async (params)=>{
-    const {type,val} = params
-    if(type == 'currentPage'){
-        currentPage.value = val
-    }else if(type == 'pageSize'){
-        pageSize.value = val
-    }
-    await GetOperationList()
-}
-//获取日志列表
-const GetOperationList = async ()=>{
-    let params = {
-        customerId: route.query.id,
-        operUserId: searchParams.value.personnel == 'all' ? '' : searchParams.value.personnel,
-        pageNum: currentPage.value,
-        pageSize: pageSize.value
-    }
-    let res = await getOperationLogApi(params)
-    if(res?.code == 200){
-       const {data:operationData, dateData, groupData, memberData} =  res?.data
-       totalNum.value = operationData.total
-
-        let memberOption = memberData?.map(item=>{
-            return {
-                label:item.username,
-                value:item.id
-            }
-        }) || []
-        operationRecordSearchList.value = operationRecordSearchList.value.map(item=>{
-            if(item.key=='personnel'){
-                item.options = [
-                    { label: '全部', value: 'all' },
-                    ...memberOption
-                ]
-                item.defaultValue = searchParams.value.personnel
-            }
-            return item
-        })
 
 
-
-        finalOperationLogRenderData.value = operationData.records.map(item=>{
-            let operationName = OperationNumToName(item.operAction)
-            //操作概览
-            let operationAim = ''
-            if(item.operDataType === 1){  //联系人
-                // 增  改  删
-                if([11,12,13].includes(item.operAction)){
-                    operationAim = '联系人'
-                }else{
-                    operationAim = ''
-                }
-            }else if(item.operDataType === 0){ //客户
-                if([12].includes(item.operAction)){
-                    operationAim = '学校信息'
-                }else{
-                    operationAim = ''
-                }
-                // 这两个 记录的结果待完善
-                // case 1:
-                //     return '跟进'
-                // case 2:
-                //     return '转让'
-            }
-
-            // 具体操作信息
-            // 增  改  删
-            let operationDetail = ''
-            let content = item.content.split(',')
-            if([11,12,13].includes(item.operAction)){
-                if(item.operAction === 12){
-                    operationDetail = content[0] + ` <span style="color:#2E64FA">调整为</span> ` + content[1]
-                }else if(item.operAction === 11){
-                    operationDetail =  `<span style="color:#2E64FA">新增</span> ` + content[0]  
-                }else if(item.operAction === 13){
-                    operationDetail =  `<span style="color:#F56C6C">删除</span> ` + content[0]  
-                }
-            }else{
-                operationDetail = content[0]
-            }
-            return {
-                headerTitleList:[
-                    item.operDatetime,
-                    item.operName,
-                    operationName+operationAim,
-                ],
-                headerTags:[],
-                middleDesc:[],
-                bottomDesc:`操作内容：${operationDetail}`
-            }
-        })
-    }
-}
-
-// 0-认领，1-跟进，2-转让，3-转到公海,11-新增，12-修改，13-删除
-const OperationNumToName = (num)=>{
-    switch(num){
-        case 0:
-            return '认领'
-        case 1:
-            return '跟进'
-        case 2:
-            return '转让'
-        case 3:
-            return '转至公海'
-        case 11:
-            return '新增'
-        case 12:
-            return '编辑'
-        case 13:
-            return '删除'
-    }
-}
-
 /**
  * 5. 认领 有关操作
  */