You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
235 lines
9.3 KiB
235 lines
9.3 KiB
1 year ago
|
<template>
|
||
|
|
<el-drawer
|
||
|
|
v-model="show"
|
||
|
|
direction="rtl"
|
||
|
|
size="60%"
|
||
|
|
style="min-width: 700px"
|
||
|
|
:with-header="false"
|
||
|
|
:destroy-on-close="true"
|
||
|
|
:show-close="true"
|
||
|
|
:wrapperClosable="true"
|
||
|
|
>
|
||
|
|
<!-- header -->
|
||
|
|
<el-skeleton :loading="loading" animated>
|
||
|
|
<div class="flex justify-between" style="height: 32px">
|
||
|
|
<div class="flex" style="align-items: center">
|
||
|
|
<b class="mr-5px text-24px">{{ info.name }}</b>
|
||
|
|
<div class="mr-5px text-16px">1888888888</div>
|
||
|
|
<el-tag type="success">A高意向</el-tag>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<el-button type="primary" plain>修改</el-button>
|
||
|
|
<el-button type="danger" plain>删除</el-button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-skeleton>
|
||
|
|
<!-- 基础信息 -->
|
||
|
|
<el-skeleton :loading="loading" animated>
|
||
|
|
<el-table :data="followList" size="small" border class="mt-10px">
|
||
|
|
<el-table-column prop="name" label="跟进人" />
|
||
|
|
<el-table-column prop="latestFollowTime" label="最新跟进时间" />
|
||
|
|
<el-table-column prop="nextFollowTime" label="下次跟进时间" />
|
||
|
|
<el-table-column prop="saleStatus" label="成交状态" />
|
||
|
|
</el-table>
|
||
|
|
</el-skeleton>
|
||
|
|
<el-divider direction="horizontal" />
|
||
|
|
<!-- 详细信息 -->
|
||
|
|
<el-tabs v-model="infoIndex" type="border-card">
|
||
|
|
<el-tab-pane label="跟进记录" name="followRecord">
|
||
|
|
<el-button class="mb-10px" type="primary" @click="addFollow">添加跟进记录</el-button>
|
||
|
|
<el-timeline>
|
||
|
|
<el-timeline-item timestamp="2024-04-01" placement="top">
|
||
|
|
<el-card shadow="always" :body-style="{ padding: '10px' }">
|
||
|
|
<div>
|
||
|
|
<div class="flex justify-between" style="align-items: center">
|
||
|
|
<div class="flex align-baseline">
|
||
|
|
<b class="text-18px">张三</b>
|
||
|
|
<span class="text-14 ml-10px">2024-04-01 09:00:00</span>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<el-button type="primary" plain @click="updateFollow()">修改</el-button>
|
||
|
|
<el-button type="danger" plain>删除</el-button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div v-dompurify-html="followContent"></div>
|
||
|
|
<div class="flex mt-10px" style="align-items: center">
|
||
|
|
<div class="flex" style="color: #666; align-items: center">
|
||
|
|
<Icon icon="ep:clock" class="mr-5px" />
|
||
|
|
<span>本次跟进时间：2024-04-05 10:57</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex ml-50px" style="color: #666; align-items: center">
|
||
|
|
<Icon icon="ep:clock" class="mr-5px" />
|
||
|
|
<span>下次跟进时间：2024-04-10 10:00</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-card>
|
||
|
|
</el-timeline-item>
|
||
|
|
<el-timeline-item timestamp="2024-02-01" placement="top">
|
||
|
|
<el-card shadow="always" :body-style="{ padding: '10px' }">
|
||
|
|
<div>
|
||
|
|
<div class="flex justify-between" style="align-items: center">
|
||
|
|
<div class="flex align-baseline">
|
||
|
|
<b class="text-18px">李四</b>
|
||
|
|
<span class="text-14 ml-10px">2024-02-01 09:00:00</span>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<el-button type="primary" plain>修改</el-button>
|
||
|
|
<el-button type="danger" plain>删除</el-button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div key="followContent" v-dompurify-html="followContent2"></div>
|
||
|
|
<div class="flex mt-10px" style="align-items: center">
|
||
|
|
<div class="flex" style="color: #666; align-items: center">
|
||
|
|
<Icon icon="ep:clock" class="mr-5px" />
|
||
|
|
<span>本次跟进时间：2024-02-05 10:57</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex ml-50px" style="color: #666; align-items: center">
|
||
|
|
<Icon icon="ep:clock" class="mr-5px" />
|
||
|
|
<span>下次跟进时间：2024-02-10 10:00</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-card>
|
||
|
|
</el-timeline-item>
|
||
|
|
</el-timeline>
|
||
|
|
</el-tab-pane>
|
||
|
|
<el-tab-pane label="详细信息" name="infoDetail">
|
||
|
|
<el-descriptions :column="2" border>
|
||
|
|
<el-descriptions-item min-width="150px" label="线索名称">{{
|
||
|
|
info.name
|
||
|
|
}}</el-descriptions-item>
|
||
|
|
<el-descriptions-item min-width="150px" label="联系方式"
|
||
|
|
>18888888888</el-descriptions-item
|
||
|
|
>
|
||
|
|
<el-descriptions-item min-width="150px" label="线索来源">驾考宝典</el-descriptions-item>
|
||
|
|
<el-descriptions-item min-width="150px" label="意向状态">高意向</el-descriptions-item>
|
||
|
|
<el-descriptions-item min-width="150px" :span="2" label="诉求"
|
||
|
|
>这是诉求内容这是诉求内容这是诉求内容这是诉求内容这是诉求内容这是诉求内容这是诉求内容</el-descriptions-item
|
||
|
|
>
|
||
|
|
<el-descriptions-item min-width="150px" :span="2" label="备注"
|
||
|
|
>这是备注内容</el-descriptions-item
|
||
|
|
>
|
||
|
|
</el-descriptions>
|
||
|
|
</el-tab-pane>
|
||
|
|
<el-tab-pane label="操作记录" name="operateRecord">
|
||
|
|
<el-timeline>
|
||
|
|
<el-timeline-item timestamp="2024-04-01" placement="top">
|
||
|
|
<el-card shadow="always" :body-style="{ padding: '10px' }">
|
||
|
|
<div style="color: #666">
|
||
|
|
<div class="pt-5px">
|
||
|
|
<span>操作人：机器人1号</span>
|
||
|
|
</div>
|
||
|
|
<div class="pt-5px pb-5px">
|
||
|
|
<span>成交线索</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex" style="align-items: center">
|
||
|
|
<Icon icon="ep:clock" class="mr-5px" />
|
||
|
|
<span>操作时间：2024-04-05 10:57</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-card>
|
||
|
|
</el-timeline-item>
|
||
|
|
<el-timeline-item timestamp="2024-02-01" placement="top">
|
||
|
|
<el-card shadow="always" :body-style="{ padding: '10px' }">
|
||
|
|
<div style="color: #666">
|
||
|
|
<div class="pt-5px">
|
||
|
|
<span>操作人：机器人2号</span>
|
||
|
|
</div>
|
||
|
|
<div class="pt-5px pb-5px">
|
||
|
|
<span>修改意向状态为：高意向</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex" style="align-items: center">
|
||
|
|
<Icon icon="ep:clock" class="mr-5px" />
|
||
|
|
<span>操作时间：2024-04-1 10:57</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-card>
|
||
|
|
</el-timeline-item>
|
||
|
|
<el-timeline-item timestamp="2024-02-01" placement="top">
|
||
|
|
<el-card shadow="always" :body-style="{ padding: '10px' }">
|
||
|
|
<div style="color: #666">
|
||
|
|
<div class="pt-5px">
|
||
|
|
<span>操作人：机器人1号</span>
|
||
|
|
</div>
|
||
|
|
<div class="pt-5px pb-5px">
|
||
|
|
<span>跟进线索</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex" style="align-items: center">
|
||
|
|
<Icon icon="ep:clock" class="mr-5px" />
|
||
|
|
<span>操作时间：2024-04-1 10:57</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-card>
|
||
|
|
</el-timeline-item>
|
||
|
|
<el-timeline-item timestamp="2024-02-01" placement="top">
|
||
|
|
<el-card shadow="always" :body-style="{ padding: '10px' }">
|
||
|
|
<div style="color: #666">
|
||
|
|
<div class="pt-5px">
|
||
|
|
<span>操作人：机器人2号</span>
|
||
|
|
</div>
|
||
|
|
<div class="pt-5px pb-5px">
|
||
|
|
<span>创建线索</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex" style="align-items: center">
|
||
|
|
<Icon icon="ep:clock" class="mr-5px" />
|
||
|
|
<span>操作时间：2024-04-1 10:57</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-card>
|
||
|
|
</el-timeline-item>
|
||
|
|
</el-timeline>
|
||
|
|
</el-tab-pane>
|
||
|
|
</el-tabs>
|
||
|
|
<!-- 新建编辑跟进信息 -->
|
||
|
|
<DialogFollow ref="followRef" />
|
||
|
|
</el-drawer>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import DialogFollow from './DialogFollow.vue'
|
||
|
|
const show = ref(false)
|
||
|
|
const info = ref(null)
|
||
|
|
const loading = ref(false)
|
||
|
|
|
||
|
|
const followContent = `<p style="color: red;">这是本次跟进的内容。</p><br/><p>我还能放图片，但需要你自己排版：</p><br/><img style="width: 200px;" src="https://q6.itc.cn/images01/20240407/0e6be21aebc847648109304f20370790.jpeg">`
|
||
|
|
|
||
|
|
const followContent2 = `<p style="color: red;">这是本次跟进的内容。</p>`
|
||
|
|
|
||
|
|
const followList = ref([
|
||
|
|
{
|
||
|
|
name: '李四',
|
||
|
|
latestFollowTime: '2024-02-01',
|
||
|
|
nextFollowTime: '2024-04-01',
|
||
|
|
saleStatus: '未成交'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '王二',
|
||
|
|
latestFollowTime: '2024-03-01',
|
||
|
|
nextFollowTime: '2024-04-11',
|
||
|
|
saleStatus: '已成交'
|
||
|
|
}
|
||
|
|
])
|
||
|
|
|
||
|
|
function open(row) {
|
||
|
|
info.value = row
|
||
|
|
show.value = true
|
||
|
|
}
|
||
|
|
|
||
|
|
const infoIndex = ref('followRecord')
|
||
|
|
|
||
|
|
defineExpose({
|
||
|
|
open
|
||
|
|
})
|
||
|
|
|
||
|
|
const followRef = ref()
|
||
|
|
function addFollow() {
|
||
|
|
followRef.value.open('create', null)
|
||
|
|
}
|
||
|
|
function updateFollow() {
|
||
|
|
followRef.value.open('update', { nextFollowTime: '2024-04-01 12:12' })
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped></style>
|