Update HistoryPanel.vue (#256)

1、点击“修改历史”:请求修改历史列表;点击“发布历史”:请求发布历史列表。
2、接口请求过程中增加loading进行交互优化。
This commit is contained in:
Jiang Yu 2024-06-04 16:08:42 +08:00 committed by GitHub
parent efabb958aa
commit 018e69232d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -1,6 +1,6 @@
<template>
<el-popover placement="top" trigger="click" @show="onShow" :width="320">
<el-tabs v-model="currentTab" class="custom-tab" v-if="visible">
<el-tabs v-model="currentTab" class="custom-tab" v-if="visible" v-loading="paneLoading">
<el-tab-pane label="修改历史" name="daily" class="custom-tab-pane">
<div class="line" v-for="(his, index) in dailyList" :key="index">
<span class="operator">{{ his.operator }}</span>
@ -25,6 +25,7 @@
</el-popover>
</template>
<script>
import { getSurveyHistory } from '@/management/api/survey'
import moment from 'moment'
@ -59,7 +60,8 @@ export default {
dailyHis: [],
publishHis: [],
currentTab: 'daily',
visible: false
visible: false,
paneLoading: false
}
},
watch: {
@ -67,18 +69,15 @@ export default {
immediate: true,
async handler(newVal) {
if (newVal) {
const [dailyHis, publishHis] = await Promise.all([
getSurveyHistory({
surveyId: this.surveyId,
historyType: 'dailyHis'
}),
getSurveyHistory({
surveyId: this.surveyId,
historyType: 'publishHis'
})
])
this.dailyHis = dailyHis.data || []
this.publishHis = publishHis.data || []
this.fetchHis()
}
}
},
currentTab: {
immediate: true,
async handler(newVal) {
if (newVal) {
this.fetchHis()
}
}
}
@ -86,6 +85,30 @@ export default {
methods: {
onShow() {
this.visible = true
},
fetchHis() {
this.paneLoading = true
switch (this.currentTab) {
case 'daily':
getSurveyHistory({
surveyId: this.surveyId,
historyType: 'dailyHis'
}).then((dailyHis) => {
this.dailyHis = dailyHis.data || []
})
break;
case 'publish':
getSurveyHistory({
surveyId: this.surveyId,
historyType: 'publishHis'
}).then((publishHis) => {
this.publishHis = publishHis.data || []
})
break;
}
this.paneLoading = false
}
}
}
@ -93,8 +116,10 @@ export default {
<style lang="scss" scoped>
@import url('@/management/styles/edit-btn.scss');
.custom-tab {
width: 300px;
:deep(.el-tabs__nav) {
width: 100%;