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

<template>
    <div class="main_container">
        <TopBackNav>
            <template #topRight>
                <div class="header_content">
                    <span>{{ customerBaseMsg.schoolName }}</span>
                    <el-tag type="success" effect="light" size="small" :disable-transitions="true" class="status_tag">
                        {{ customerBaseMsg.customerType }}
                    </el-tag>
                </div>
                <div class="desc">
                    <span>学段：{{ customerBaseMsg.educationStage }}</span>
                    <span>省份：{{ customerBaseMsg.province }}</span>
                    <span>地区：{{ customerBaseMsg.district }}</span>
                    <span>地址：{{ customerBaseMsg.address }}</span>
                    <span>归属人：{{ customerBaseMsg.owner }}</span>
                    <span>认领时间：{{ customerBaseMsg.claimTime }}</span>
                    <span>上次跟进时间：{{ customerBaseMsg.lastFollowUpTime }}</span>
                </div>
                <div class="action">
                    <el-button class="button_background"><img :src="peopleEditIcon" alt=""> 写跟进</el-button>
                    <el-button class="button_border"><img :src="addIcon" alt=""> 新增联系人</el-button>
                    <el-button class="button_refresh"><img :src="editIcon" alt=""> 编辑</el-button>
                    <el-button class="button_refresh"><img :src="poepleMoveIcon" alt=""> 转至公海</el-button>
                    <el-button class="button_refresh" @click="OpenTransferFormDialog"><img :src="exchangeIcon" alt="" > 转让</el-button>
                    <el-button class="button_refresh" @click="OpenOperationRecordDialog"><img :src="logIcon" alt=""> 操作记录</el-button>
                </div>
            </template>
        </TopBackNav>

        <div class="page_item bottom_detail end_item">
            <TabSearch :defaultTabKey="defaultShowTab" 
                tabType="line" :tabList="tabList" 
                @tabChange="HandleTabChange"
                />
            <div class="page_solid_line" />
            <div class="page_jg_20" style="flex-shrink: 0 !important;"></div>

            <!-- 联系人详情 -->
            <ContactDetail v-if="defaultShowTab === 'contactDetails'"/>
            <CustomerStatusOverview v-if="defaultShowTab === 'messageOverview'"/>
        </div>
    </div>

    <!-- 转让 弹窗 -->
    <FormDialog title="转让" :visible="transferFormDialogVisible" 
        :submit-loading="transferFormDialogSubmitLoading" 
        :default-form-data="transferDefaultFormData" 
        :formItemList="formItemList"
        @close="CloseTransferFormDialog"
        @confirm="HandleTransferFormDialogConfirm">
    </FormDialog>

    <!-- 操作记录 弹窗 -->
    <PreviewDialog 
        class="operation_dialog"
        title="操作记录"
        :previewVisible="operationRecordDialogVisible"
        :customFooter="true"
        @close="CloseOperationRecordDialog">

        <SearchBlock :searchList="operationRecordSearchList"></SearchBlock>

        <FollowCard :card-list="finalOperationLogRenderData">
            <template #operation><i></i></template>
        </FollowCard>

        <Pagination :currentPage="currentPage" :pageSize="pageSize" :totalNum="totalNum"></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 } from 'vue';
import TopBackNav from '@/baseComponents/TopBackNav.vue';
import addIcon from '@/assets/icon/add.svg';
import peopleEditIcon from '@/assets/icon/people_edit.png'
import poepleMoveIcon from '@/assets/icon/people_move.png'
import editIcon from '@/assets/icon/edit.svg'
import exchangeIcon from '@/assets/icon/exchange.png'
import logIcon from '@/assets/icon/log.png'
import TabSearch from '@/baseComponents/TabSearch.vue';
import {tabList} from './tabSearch'
import FormDialog from '@/baseComponents/FormDialog.vue';
import {formItemList} from './formDialog'
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';

const customerBaseMsg = ref({
  schoolName: '北京市第一零九中学',
  customerType: '首单客户',
  educationStage: '九年一贯',
  province: '北京',
  district: '东城区',
  address: '北京市东城区葱店西街56号',
  owner: '张三',
  claimTime: '2024-09-20',
  lastFollowUpTime: '2025-03-12'
});

// 默认列表的tab切换
const defaultShowTab = ref('messageOverview')
const HandleTabChange = (val)=>{
    defaultShowTab.value = val
}


/**  转让弹窗相关内容及操作  */
const transferFormDialogVisible = ref(false)
const transferFormDialogSubmitLoading = ref(false)
const transferDefaultFormData = ref({
    schoolName: '北京市第一零九中学',
    currentOwner: '张三',
    newOwner:'',
})
const OpenTransferFormDialog=()=>{
    console.log('打开转让弹窗')
    transferFormDialogVisible.value = true
    GetOwnerList()
}
const CloseTransferFormDialog=()=>{
    transferFormDialogVisible.value = false
}
const HandleTransferFormDialogConfirm = ()=>{
    CloseTransferFormDialog()
}
// 获取归属人列表
const GetOwnerList = ()=>{
    formItemList.value = formItemList.value.map(item=>{
        if(item.key == 'newOwner'){
            let list = [
                {
                    label:'李四',
                    value:'1'
                },
                {
                    label:'王五',
                    value:'2'
                },
                {
                    label:'赵六',
                    value:'3'
                },
            ]
            item.selectList = [...list]
        }
        return item
    })
}


/**  操作记录相关内容及操作 */
const operationRecordDialogVisible = ref(false)
const OpenOperationRecordDialog=()=>{
    console.log('打开操作记录弹窗')
    operationRecordDialogVisible.value = true
}
const CloseOperationRecordDialog=()=>{
    operationRecordDialogVisible.value = false
}



/**  操作日志有关数据  */
const operationLogList = ref([
    {
        id:1,
        operationTime: '26-02-19 19:00',
        operatorName: '张安顺',
        schoolName: '北京师达学校',
        operationType: '编辑学校信息',
        operationContent: '学校名称【北京109中学】学段【初中】调整为学校名称【北京一零九中学】学段【九年一贯】。'
    },
    {
        id:2,
        operationTime: '26-02-19 19:00',
        operatorName: '张安顺',
        schoolName: '北京师达学校',
        operationType: '删除联系人',
        operationContent: '删除 姓名【张三】职务【校长】手机电话【17820681226】办公电话【17820681226】备注【文案文案】。'
    },
    {
        id:3,
        operationTime: '26-02-19 19:00',
        operatorName: '张安顺',
        schoolName: '北京师达学校',
        operationType: '新增联系人',
        operationContent: '新增 姓名【张三】职务【校长】手机电话【17820681226】办公电话【17820681226】备注【文案文案】。'
    },
    {
        id:4,
        operationTime: '26-02-19 19:00',
        operatorName: '张安顺',
        schoolName: '北京师达学校',
        operationType: '编辑联系人',
        operationContent: '联系人姓名【张三】职务【校长】手机电话【17820681226】备注【文案文案】调整为 联系人姓名【李四】职务【校长】手机电话【17820681226】备注【文案文案】。'
    },
    {
        id:5,
        operationTime: '26-02-19 19:00',
        operatorName: '张安顺',
        schoolName: '北京师达学校',
        operationType: '转至公海',
        operationContent: '将客户转至公海。'
    }
]);

const finalOperationLogRenderData = computed(()=>{
    return operationLogList.value.map(item=>{
        return {
            headerTitleList:[
                item.operationTime,
                item.operatorName,
                item.schoolName,
                item.operationType
            ],
            headerTags:[],
            middleDesc:[],
            bottomDesc:`操作内容：${item.operationContent}`
        }
    })
})

/** 分页参数 有关数据 */
const currentPage = ref(1)
const pageSize = ref(20)
const totalNum = ref(0)


</script>



<style lang="scss" scoped>
.main_container{
    // 公共样式不生效了
    gap:16px;
    padding: 20px;
    flex: 1 1;
    overflow: auto;

    :deep(.top_right){
        flex: 1 1;
        .header_content{
            display: flex;
            align-items: center;
            gap:10px;
            font-weight: 600;
            font-size: 20px;
            color: #333333;
            line-height: 28px;
            .status_tag{
                height: 25px;
                border-radius: 4px ;
                padding:0 8px;
                font-weight: 400;
                font-size: 12px;
                color: #2E64FA;
                background: rgba(46,100,250,0.1);
            }
        }
        .desc{
            display: flex;
            gap:5px 16px;
            flex-wrap: wrap;
            font-size: 12px;
            color: #999999;
            margin-top: 8px;
            margin-bottom: 16px;
        }

        .action{
            display: flex;
            gap:16px;
            .el-button{
                margin:0;
                img{
                    width: 16px;
                    height: 16px;
                    margin-right: 4px;
                }
            }
        }
    }
    .bottom_detail{
        overflow: auto;
    }
}

.operation_dialog{
    .follow_card{
        margin-top: 16px;
    }
}
</style>