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