Update HistoryPanel.vue (#256)
1、点击“修改历史”:请求修改历史列表;点击“发布历史”:请求发布历史列表。 2、接口请求过程中增加loading进行交互优化。
This commit is contained in:
parent
efabb958aa
commit
018e69232d
@ -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%;
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user