clientManageSystem/src/components/CustomerOperationDialog/index.vue

<!-- 我的客户 和 公海客户、 客户跟进 的客户操作记录  -->

<template>
    <!-- 操作记录 弹窗 -->
    <PreviewDialog 
        class="operation_dialog"
        title="操作记录"
        :previewVisible="operationRecordDialogVisible"
        :customFooter="true"
        @close="CloseOperationRecordDialog">
        <SearchBlock :searchList="operationRecordSearchList" 
            @searchChange="HandleOperationLogSearchChange">
            <template #rowItem-time>
                <el-date-picker
                    v-if="searchParams.time=='custom'"
                    style="flex-grow: 0;height: 28px;width: 220px;"
                    v-model="searchParams.startAndEndTime"
                    @change="(val)=>HandleOperationLogSearchChange({startAndEndTime:val},'startAndEndTime')"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    type="datetimerange"
                    range-separator="至"
                    size="default"
                    />
            </template>
        </SearchBlock>
        <FormSearchGroup style="margin:16px 0" v-if="props.interfaceSource == 'customerFollow'" 
            :searchList="operationRecordBlurSearch" @searchChange="HandleOperationLogSearchChange"/>

        <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, onMounted } from 'vue';
import { useRoute } 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 FormSearchGroup from '@/baseComponents/FormSearchGroup.vue';
import {operationRecordBlurSearch} from './formSearchGroup'

import {
    getOperationLogApi,
} from '@/api/highSeasCustomer'

import {getPrivateOperationLogApi} from '@/api/myCustomer'
import { getCustomerOperationLogApi} from '@/api/customerFollowUp';


import {
    getTodayRange,
    getYesterdayRange,
    getRecentDaysRange,
    getRecentWeeksRange,
    getRecentMonthsRange,
    formatTime
} from '@/utils/timeRangeGet'



const props = defineProps({
    interfaceSource:{
        type:String as ()=>'highSeasCustomer'|'myCustomer'|'customerFollow',
        requreid:true, 
    }, //查询操作日志 接口来源 
})

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',
    time:'all',
    group:'all',
    startAndEndTime:[],
})

// 关闭
const CloseOperationRecordDialog=()=>{
    operationRecordDialogVisible.value = false
    searchParams.value = {
        personnel:'all',
        time:'all',
        group:'all',
        startAndEndTime:[],
    }
}

// 搜索条件变化
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 rangeTime = {
        startTime:'',
        endTime:'',
    }
    if(['myCustomer','customerFollow'].includes(props.interfaceSource)){
        switch(searchParams.value.time){
            case 'today':
                rangeTime = getTodayRange()
                break
            case 'yesterday':
                rangeTime = getYesterdayRange()
                break
            case 'last3Days':
                rangeTime = getRecentDaysRange(3)
                break
            case 'last1Week':
                rangeTime = getRecentWeeksRange(1)
                break
            case 'last1Month':
                rangeTime = getRecentMonthsRange(1)
                break
            case 'custom':
                rangeTime = {
                    startTime:formatTime(searchParams.value.startAndEndTime?.[0]) ,
                    endTime: formatTime(searchParams.value.startAndEndTime?.[1]),
                }
                break
        }
    }

    let res = undefined
    if(props.interfaceSource == 'highSeasCustomer'){
        let params = {
            customerId: route.query.id,
            operUserId: searchParams.value.personnel == 'all' ? '' : searchParams.value.personnel,
            pageNum: currentPage.value,
            pageSize: pageSize.value
        }
        res = await getOperationLogApi(params)

    }else if(props.interfaceSource == 'myCustomer'){ 
        let params = {
            customerId: route.query.id,
            operUserId: searchParams.value.personnel == 'all' ? '' : searchParams.value.personnel,
            startDate: rangeTime.startTime,  
            endDate: rangeTime.endTime,
            pageNum: currentPage.value,
            pageSize: pageSize.value
        }
        res = await getPrivateOperationLogApi(params)
    }else if(props.interfaceSource == 'customerFollow'){
        let params = {
            operUserId:  searchParams.value.personnel == 'all' ? '' : searchParams.value.personnel,
            groupId: searchParams.value.group == 'all' ? '' : searchParams.value.group,
            startDate: rangeTime.startTime,
            endDate: rangeTime.endTime,
            pageNum: currentPage.value,
            pageSize: pageSize.value,
            queryStr:searchParams.value.queryStr  
        }
        res = await getCustomerOperationLogApi(params)
    }
   
    if(res?.code == 200){
       const {data:operationData, groupData, memberData} =  res?.data
       totalNum.value = operationData.total
        let memberOption = memberData?.map(item=>{
            return {
                label:item.username,
                value:item.id
            }
        }) || []

        let groupOption = groupData?.map(item=>{
            return {
                label:item.name,
                value:item.id
            }
        }) || []
        operationRecordSearchList.value = operationRecordSearchList.value.map(item=>{
            switch(item.key){
                case 'personnel':
                    item.options = [
                        { label: '全部', value: 'all' },
                        ...memberOption
                    ]
                    break
                case 'group':
                    item.options = [
                        { label: '全部', value: 'all' },
                        ...groupOption
                    ]
                    item.hidden = props.interfaceSource == 'customerFollow' ?  false : true
                    break
                case 'time':
                    item.hidden = ['customerFollow','myCustomer']?.includes(props.interfaceSource) ?  false : true
                    break
            }
            item.defaultValue = searchParams.value[item.key]
            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 if([2].includes(item.operAction)){ //转让
                    operationAim = '归属人'
                }else{
                    operationAim = ''
                }
            }

            // 具体操作信息
            // 增  改  删
            let operationDetail = ''
            let content = item.content.split(',')
            if([11,12,13].includes(item.operAction)){
                if([12,2].includes(item.operAction)){
                    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:props.interfaceSource == 'customerFollow' ? [
                    item.operDatetime,
                    item.operName,
                    item.customerName,  // 学校信息 只在 客户跟进显示
                    operationName+operationAim,
                ] : [
                    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>