124 lines
2.8 KiB
Vue
124 lines
2.8 KiB
Vue
<!--
|
||
* @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>
|