<!--
|
* @description: 时间线
|
-->
|
<template>
|
<el-dialog
|
title="历史操作"
|
:visible.sync="dialogVisible"
|
width="50%"
|
:modal="true"
|
:modal-append-to-body="false"
|
:appen-to-body="true"
|
class="bs-dialog-wrap bs-el-dialog"
|
>
|
<div class="layer-list-wrap">
|
<!-- el-table 三列，动作，时间，操作。操作栏中是回退 -->
|
<el-table
|
:data="chartList"
|
border
|
style="width: 100%"
|
class="bs-el-table"
|
:row-class-name="tableRowClassName"
|
>
|
<el-table-column
|
prop="timelineTitle"
|
label="动作"
|
class-name="bs-el-table-column"
|
/>
|
<el-table-column
|
prop="updateTime"
|
label="时间"
|
width="180"
|
class-name="bs-el-table-column"
|
/>
|
<el-table-column
|
prop="operation"
|
label="操作"
|
width="100"
|
class-name="bs-el-table-column"
|
>
|
<template slot-scope="scope">
|
<el-button
|
type="text"
|
size="small"
|
@click="rollback(scope.$index)"
|
>
|
回退
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<span
|
slot="footer"
|
class="dialog-footer"
|
>
|
<el-button
|
class="bs-el-button-default"
|
@click="dialogVisible = false"
|
>
|
取消
|
</el-button>
|
<el-button
|
type="primary"
|
@click="clearTimeline"
|
>
|
清除历史
|
</el-button>
|
</span>
|
</el-dialog>
|
</template>
|
<script>
|
import { mapState, mapMutations } from 'vuex'
|
export default {
|
name: 'HistoryList',
|
props: {},
|
data () {
|
return {
|
dialogVisible: false
|
}
|
},
|
computed: {
|
...mapState({
|
chartList: state => state.bigScreen.timelineStore,
|
currentTimeLine: state => state.bigScreen.currentTimeLine
|
})
|
},
|
mounted () {},
|
methods: {
|
...mapMutations({
|
clearTimeline: 'bigScreen/clearTimeline',
|
rollbackTimeline: 'bigScreen/rollbackTimeline'
|
}),
|
init () {
|
this.dialogVisible = true
|
},
|
rollback (index) {
|
this.rollbackTimeline(index)
|
this.dialogVisible = false
|
},
|
tableRowClassName ({ row, rowIndex }) {
|
if (rowIndex === this.currentTimeLine - 1) {
|
return 'choosed-row'
|
}
|
return ''
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import '../../BigScreenDesign/fonts/iconfont.css';
|
@import '../../assets/style/bsTheme.scss';
|
.layer-list-wrap {
|
::v-deep .choosed-row {
|
.bs-el-table-column {
|
border-color: var(--bs-el-border) !important;
|
background: var(--bs-background-2) !important;
|
background-color: var(--bs-background-2) !important;
|
opacity: 0.7;
|
}
|
}
|
}
|
</style>
|
