|
|
|
@ -5,20 +5,7 @@
|
|
|
|
|
<div class="seeMore" @click="seeMore">查看更多</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item-conent frame-style">
|
|
|
|
|
<div class="center">
|
|
|
|
|
<!-- <a-list item-layout="horizontal" :data-source="data">
|
|
|
|
|
<template #renderItem="{ item }">
|
|
|
|
|
<a-list-item>
|
|
|
|
|
<a-list-item-meta description="有新线索,请注意跟单">
|
|
|
|
|
<template #avatar> id:123455666</template>
|
|
|
|
|
</a-list-item-meta>
|
|
|
|
|
<template #actions>
|
|
|
|
|
<a key="list-loadmore-edit" style="margin-right: 8px">确认</a>
|
|
|
|
|
<a key="list-loadmore-more">定位</a>
|
|
|
|
|
</template>
|
|
|
|
|
</a-list-item>
|
|
|
|
|
</template>
|
|
|
|
|
</a-list> -->
|
|
|
|
|
<div v-if="newclueList.length > 0" class="center">
|
|
|
|
|
<div v-for="(item, index) in newclueList" :key="index" class="listItem">
|
|
|
|
|
<div class="listItemTop">
|
|
|
|
|
<div class="type">
|
|
|
|
@ -27,7 +14,9 @@
|
|
|
|
|
<div class="time">{{ item.createTime }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="listItemCenter">
|
|
|
|
|
<span class="content" :class="{ expanded: item.show }">{{ item.content }}</span>
|
|
|
|
|
<span ref="contentRef" class="content" :class="{ expanded: item.show }">{{
|
|
|
|
|
item.content
|
|
|
|
|
}}</span>
|
|
|
|
|
<div class="iconContainer" @click="toggleShowAll(item)">
|
|
|
|
|
<div v-if="item.show" class="openOrClose">
|
|
|
|
|
<span><down-outlined /></span>
|
|
|
|
@ -40,7 +29,7 @@
|
|
|
|
|
|
|
|
|
|
<div class="listItemBottom">
|
|
|
|
|
<a key="list-loadmore-edit" style="margin-right: 8px">{{
|
|
|
|
|
item.status === 1 ? '已读' : '确认'
|
|
|
|
|
item.state === 1 ? '已读' : '确认'
|
|
|
|
|
}}</a>
|
|
|
|
|
<a
|
|
|
|
|
key="list-loadmore-more"
|
|
|
|
@ -51,11 +40,11 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <div class="empty">
|
|
|
|
|
<div v-else class="empty">
|
|
|
|
|
<a-empty description="暂无数据" :image="zanwu" />
|
|
|
|
|
</div> -->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 列表弹出框 -->
|
|
|
|
|
<!-- 新消息列表弹出框 -->
|
|
|
|
|
<div>
|
|
|
|
|
<a-modal
|
|
|
|
|
v-model:visible="listVisible"
|
|
|
|
@ -109,7 +98,7 @@
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
import { defineComponent, ref, watch, onMounted } from 'vue'
|
|
|
|
|
import { ref, watch, onMounted } from 'vue'
|
|
|
|
|
import zanwu from '@/assets/images/zanwu.png'
|
|
|
|
|
//底部表格
|
|
|
|
|
import ProTable from '#/table'
|
|
|
|
@ -119,16 +108,43 @@ import { messageAccessLogs } from '@/api/customermanagement/customerList'
|
|
|
|
|
import type { CustomerListQO } from '@/api/customermanagement/customerList/types'
|
|
|
|
|
import MessageSearch from '@/components/Message/messageSearch.vue'
|
|
|
|
|
import type { DistributeTaskManagementPageParam } from '@/api/controlcenterstation/distributionTaskManagement/types'
|
|
|
|
|
import { doRequest } from '@/utils/axios/request'
|
|
|
|
|
import { pageAccessLogs } from '@/api/customermanagement/customerList'
|
|
|
|
|
import router from '@/router'
|
|
|
|
|
|
|
|
|
|
//展开、收起
|
|
|
|
|
// const show = ref(false)
|
|
|
|
|
//展开收起
|
|
|
|
|
const toggleShowAll = (itemShow: DataItem) => {
|
|
|
|
|
itemShow.show = !itemShow.show
|
|
|
|
|
defineOptions({ name: 'MessagePage' })
|
|
|
|
|
|
|
|
|
|
interface DataItem {
|
|
|
|
|
id: number | undefined
|
|
|
|
|
type: number
|
|
|
|
|
createTime: string
|
|
|
|
|
content: string
|
|
|
|
|
messageKey: string
|
|
|
|
|
state: number | undefined
|
|
|
|
|
title: string
|
|
|
|
|
show: boolean
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const props = defineProps({
|
|
|
|
|
newclueList: {
|
|
|
|
|
type: Array as () => DataItem[],
|
|
|
|
|
required: true,
|
|
|
|
|
default: () => []
|
|
|
|
|
}
|
|
|
|
|
// 其他 props...
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// // 监听 props.listVisible 的变化,将其赋值给 visible
|
|
|
|
|
// watch(
|
|
|
|
|
// () => props.listVisible,
|
|
|
|
|
// newValue => {
|
|
|
|
|
// listVisible.value = newValue
|
|
|
|
|
// console.log(newValue, 'newValue')
|
|
|
|
|
// }
|
|
|
|
|
// )
|
|
|
|
|
const emits = defineEmits<{
|
|
|
|
|
(e: 'submit-success'): void
|
|
|
|
|
(e: 'click-success', isSuccessful: boolean): void
|
|
|
|
|
}>()
|
|
|
|
|
|
|
|
|
|
//底部表格
|
|
|
|
|
// 表格组件引用
|
|
|
|
|
const tableRef = ref<ProTableInstanceExpose>()
|
|
|
|
@ -197,37 +213,12 @@ const columns: ProColumns[] = [
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// {
|
|
|
|
|
// title: '描述',
|
|
|
|
|
// dataIndex: 'clueLabelList',
|
|
|
|
|
// width: 200,
|
|
|
|
|
// ellipsis: true,
|
|
|
|
|
// align: 'center',
|
|
|
|
|
// onCell: () => {
|
|
|
|
|
// return {
|
|
|
|
|
// style: {
|
|
|
|
|
// maxWidth: 200,
|
|
|
|
|
// overflow: 'hidden',
|
|
|
|
|
// whiteSpace: 'nowrap',
|
|
|
|
|
// textOverflow: 'ellipsis',
|
|
|
|
|
// cursor: 'pointer'
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// },
|
|
|
|
|
{
|
|
|
|
|
title: '描述',
|
|
|
|
|
dataIndex: 'content',
|
|
|
|
|
ellipsis: true,
|
|
|
|
|
align: 'center'
|
|
|
|
|
},
|
|
|
|
|
// {
|
|
|
|
|
// title: '线索日期',
|
|
|
|
|
// dataIndex: 'clueTime',
|
|
|
|
|
// width: 150,
|
|
|
|
|
// align: 'center',
|
|
|
|
|
// ellipsis: true
|
|
|
|
|
// },
|
|
|
|
|
{
|
|
|
|
|
title: '创建日期',
|
|
|
|
|
dataIndex: 'createTime',
|
|
|
|
@ -235,57 +226,7 @@ const columns: ProColumns[] = [
|
|
|
|
|
align: 'center',
|
|
|
|
|
ellipsis: true
|
|
|
|
|
}
|
|
|
|
|
// {
|
|
|
|
|
// key: 'operate',
|
|
|
|
|
// title: '操作',
|
|
|
|
|
// width: 100,
|
|
|
|
|
// align: 'center',
|
|
|
|
|
// fixed: 'right'
|
|
|
|
|
// }
|
|
|
|
|
// {
|
|
|
|
|
// title: '客户名称',
|
|
|
|
|
// dataIndex: 'username'
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// title: '跟进人',
|
|
|
|
|
// dataIndex: 'method'
|
|
|
|
|
// },
|
|
|
|
|
]
|
|
|
|
|
|
|
|
|
|
defineOptions({ name: 'MessagePage' })
|
|
|
|
|
|
|
|
|
|
interface DataItem {
|
|
|
|
|
id: number | undefined
|
|
|
|
|
type: number
|
|
|
|
|
createTime: string
|
|
|
|
|
content: string
|
|
|
|
|
messageKey: string
|
|
|
|
|
status: number | undefined
|
|
|
|
|
title: string
|
|
|
|
|
show: boolean
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const props = defineProps({
|
|
|
|
|
newclueList: {
|
|
|
|
|
type: Array as () => DataItem[],
|
|
|
|
|
required: true,
|
|
|
|
|
default: () => []
|
|
|
|
|
}
|
|
|
|
|
// 其他 props...
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// // 监听 props.listVisible 的变化,将其赋值给 visible
|
|
|
|
|
// watch(
|
|
|
|
|
// () => props.listVisible,
|
|
|
|
|
// newValue => {
|
|
|
|
|
// listVisible.value = newValue
|
|
|
|
|
// console.log(newValue, 'newValue')
|
|
|
|
|
// }
|
|
|
|
|
// )
|
|
|
|
|
const emits = defineEmits<{
|
|
|
|
|
(e: 'submit-success'): void
|
|
|
|
|
(e: 'click-success', isSuccessful: boolean): void
|
|
|
|
|
}>()
|
|
|
|
|
const listVisible = ref<boolean>(false)
|
|
|
|
|
|
|
|
|
|
const seeMore = () => {
|
|
|
|
@ -295,6 +236,7 @@ const seeMore = () => {
|
|
|
|
|
}, 500) // 在 0.5 秒后执行 listVisible.value 的赋值操作
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//新消息列表弹出框确定点击事件
|
|
|
|
|
const handleOk = (e: MouseEvent) => {
|
|
|
|
|
console.log(e)
|
|
|
|
|
listVisible.value = false
|
|
|
|
@ -305,6 +247,11 @@ const positioning = (messageKey: string) => {
|
|
|
|
|
emits('click-success', false)
|
|
|
|
|
router.push({ path: '/task/customerlist', query: { clueId: messageKey } }) // 跳转到 /task/customerlist 页面
|
|
|
|
|
}
|
|
|
|
|
//展开收起
|
|
|
|
|
const toggleShowAll = (itemShow: DataItem) => {
|
|
|
|
|
itemShow.show = !itemShow.show
|
|
|
|
|
}
|
|
|
|
|
const contentRef = ref<HTMLElement | null>(null)
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
.ms-container {
|
|
|
|
@ -365,18 +312,7 @@ const positioning = (messageKey: string) => {
|
|
|
|
|
.frame-style {
|
|
|
|
|
height: 480px;
|
|
|
|
|
}
|
|
|
|
|
// ::v-deep .ant-list-item-meta-description {
|
|
|
|
|
// text-align: right;
|
|
|
|
|
// }
|
|
|
|
|
// .positioning {
|
|
|
|
|
// padding: 0 0 0 8px !important;
|
|
|
|
|
// ::v-deep .ant-list-item-action > li {
|
|
|
|
|
// padding: 0 0 0 8px;
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
.listItem {
|
|
|
|
|
// display: flex;
|
|
|
|
|
// justify-content: space-between;
|
|
|
|
|
border-bottom: 1px solid #f0f0f0;
|
|
|
|
|
padding: 12px 0;
|
|
|
|
|
}
|
|
|
|
@ -384,7 +320,6 @@ const positioning = (messageKey: string) => {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
// width: 300px;
|
|
|
|
|
.type {
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
width: 130px;
|
|
|
|
@ -398,6 +333,8 @@ const positioning = (messageKey: string) => {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.listItemCenter {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: end;
|
|
|
|
|
color: #767575;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: auto;
|
|
|
|
@ -433,23 +370,7 @@ const positioning = (messageKey: string) => {
|
|
|
|
|
float: right;
|
|
|
|
|
}
|
|
|
|
|
.listItemBottom {
|
|
|
|
|
// margin-top: 5px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
}
|
|
|
|
|
// .listItemLeft {
|
|
|
|
|
// display: flex;
|
|
|
|
|
// justify-content: space-between;
|
|
|
|
|
// width: 210px;
|
|
|
|
|
// .listItemLeftId {
|
|
|
|
|
// // width: 50%;
|
|
|
|
|
// // margin-right: 10px;
|
|
|
|
|
// }
|
|
|
|
|
// .listItemLeftMessage {
|
|
|
|
|
// // width: 50%;
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// .listItemRight {
|
|
|
|
|
// width: 150px;
|
|
|
|
|
// }
|
|
|
|
|
</style>
|
|
|
|
|