Skip to content

C
company_app
提交 b6ea9b5b 作者: 毛细亚
操作

优化summaryList.vue代码格式及性能

上级 75b4e03e
正在显示 包含 140 行增加 和 144 行删除
src/views/components/aiChat/summaryList.vue
<template> <template>
<div class="summaryListContainer "> <div class="summaryListContainer ">
<div <div v-scroll:50="requestDataList" v-loading="loading" class="messageDetailsScroll">
v-scroll:50="requestDataList" <div v-if="messageList.length > 0">
v-loading="loading" <div v-for="(item, index) in messageList" :key="index" class="messageListItem">
class="messageDetailsScroll" <div class="itemTop">
> {{ item.date }}
<div v-if="messageList.length > 0">
<div
v-for="(item, index) in messageList"
:key="index"
class="messageListItem"
>
<div class="itemTop">
{{ item.date }}
</div>
<div class="itemCenter">
{{ item.summary }}
</div>
</div>
</div> </div>
<div class="no-content-main" v-if="!loading && messageList.length == 0"> <div class="itemCenter">
<noContent /> {{ item.summary }}
</div> </div>
</div> </div>
</div>
<div class="no-content-main" v-if="!loading && messageList.length == 0">
<noContent />
</div>
</div> </div>
</template> </div>
<script> </template>
import { mapMutations, mapState } from 'vuex' <script>
import { corp_follow_up_summary_index } from '@/api/works' import { mapMutations, mapState } from 'vuex'
import { throttle } from '@/utils' import { corp_follow_up_summary_index } from '@/api/works'
import { throttle } from '@/utils'
import noContent from '@/components/noContent.vue' import noContent from '@/components/noContent.vue'
export default { export default {
components: { components: {
noContent noContent
}, },
props: { props: {
chatUserDetails: { chatUserDetails: {
typeof: Object, typeof: Object,
default: () => { } default: () => { }
} }
}, },
data() { data() {
return { return {
loading: false, loading: false,
isloadMore: true, isloadMore: true,
messageList: [], messageList: [],
pageInfo: { pageInfo: {
page: 0,
page_size: 20,
total: 0
}
}
},
computed: {
...mapState('game', ['accountSelect']),
...mapState('user', ['external_userid']),
},
mounted() {
this.pageInfo = {
page: 0, page: 0,
page_size: 20, page_size: 20,
total: 0 total: 0
} }
this.isloadMore = true
this.messageList = []
this.loading = true
this.requestDataList()
},
methods: {
requestDataList: throttle(function () {
if (this.accountSelect) {
if (!this.isloadMore) {
console.log('没有更多数据了')
return false
}
this.loading = true
this.pageInfo.page += 1
const data = {
external_userid: this.external_userid,
...this.pageInfo
}
corp_follow_up_summary_index(data).then(
(res) => {
this.loading = false
if (res.data.data && res.data.data.length < 20) {
this.isloadMore = false
}
this.messageList = this.messageList.concat(res.data.data)
if (res.data.page_info) {
this.pageInfo = res.data.page_info
}
},
(err) => {
this.loading = false
}
)
} else {
this.isloadMore = false
this.loading = false
}
}, 500)
} }
} },
</script> computed: {
<style lang="scss" scoped> ...mapState('game', ['accountSelect']),
.summaryListContainer { ...mapState('user', ['external_userid']),
width: 100%; },
height: 100%; mounted() {
background: #fff; this.pageInfo = {
position: relative; page: 0,
overflow: hidden; page_size: 20,
.messageDetailsScroll{ total: 0
width: 100%; }
height: 100%; this.isloadMore = true
overflow: auto; this.messageList = []
overflow-x: hidden; this.loading = true
padding-bottom: 50px; this.requestDataList()
} },
.messageListItem { methods: {
width: 100%; requestDataList: throttle(function () {
height: auto; if (this.accountSelect) {
margin-bottom: 10px; if (!this.isloadMore) {
.itemTop { console.log('没有更多数据了')
font-family: PingFang SC, PingFang SC; return false
font-weight: 400; }
font-size: 14px; this.loading = true
color: #86909C; this.pageInfo.page += 1
line-height: 20px; const data = {
text-align: left; external_userid: this.external_userid,
font-style: normal; ...this.pageInfo
text-transform: none; }
margin-bottom: 5px; corp_follow_up_summary_index(data).then(
(res) => {
this.loading = false
if (res.data.data && res.data.data.length < 20) {
this.isloadMore = false
} }
.itemCenter { this.messageList = this.messageList.concat(res.data.data)
width: 100%; if (res.data.page_info) {
background: #F9FAFF; this.pageInfo = res.data.page_info
border-radius: 4px 4px 4px 4px;
padding: 10px;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 16px;
color: #4E5969;
text-align: left;
font-style: normal;
text-transform: none;
// 换行
white-space: pre-wrap;
word-break: break-all
} }
},
(err) => {
this.loading = false
} }
.no-content-main{ )
width: 320px; } else {
margin: 0 auto; this.isloadMore = false
} this.loading = false
}
}, 500)
}
}
</script>
<style lang="scss" scoped>
.summaryListContainer {
width: 100%;
height: 100%;
background: #fff;
position: relative;
overflow: hidden;
.messageDetailsScroll {
width: 100%;
height: 100%;
overflow: auto;
overflow-x: hidden;
padding-bottom: 50px;
}
.messageListItem {
width: 100%;
height: auto;
margin-bottom: 10px;
.itemTop {
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 14px;
color: #86909C;
line-height: 20px;
text-align: left;
font-style: normal;
text-transform: none;
margin-bottom: 5px;
}
.itemCenter {
width: 100%;
background: #F9FAFF;
border-radius: 4px 4px 4px 4px;
padding: 10px;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 16px;
color: #4E5969;
text-align: left;
font-style: normal;
text-transform: none;
// 换行
white-space: pre-wrap;
word-break: break-all
} }
</style> }
\ No newline at end of file .no-content-main {
width: 320px;
margin: 0 auto;
}
}
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论