|
@@ -0,0 +1,202 @@
|
|
|
+<template>
|
|
|
+ <div class="statistic-analysis-wrap">
|
|
|
+ <div class="top-box">
|
|
|
+ <div class="right">
|
|
|
+ 版本记录
|
|
|
+ </div>
|
|
|
+ <div class="left">
|
|
|
+ <div class="search-box">
|
|
|
+ <el-switch
|
|
|
+ v-model="OnlyMine"
|
|
|
+ @change="handleChangeIsOnlyMine"
|
|
|
+ active-text="仅显示我保存的版本">
|
|
|
+ </el-switch>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="main-box">
|
|
|
+ <div class="list-wrap" v-infinite-scroll="handleLoadMore" :infinite-scroll-immediate="true">
|
|
|
+ <div class="chart-item" v-for="item in list" :key="item.Id" @mouseenter="showOperation(item.Id)"
|
|
|
+ @mouseleave="hideOperation">
|
|
|
+ <div class="top">
|
|
|
+ <div class="title">{{ item.Title }}</div>
|
|
|
+ <div class="time">{{ item.CreateTime }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="bottom">
|
|
|
+ <div class="name">{{item.AdminRealName}}</div>
|
|
|
+ <div class="operation" v-show="item.showOperations">
|
|
|
+ <span @click="preview(item.Id)">预览</span>
|
|
|
+ <span @click="$emit('handleRestore', item.Id)">恢复</span>
|
|
|
+ <span class="delete" @click="deleteVersionRecord(item.Id)">删除</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <tableNoData :text="$t('Table.prompt_slogan')" style="width: 100%;" size="mini" v-if="list.length===0&&finished"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {pptInterface} from '@/api/api.js';
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ list:[],
|
|
|
+ page:1,
|
|
|
+ pageSize:10,
|
|
|
+ finished:false,
|
|
|
+ loading:false,
|
|
|
+ OnlyMine:false,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created(){
|
|
|
+ this.getSandBoxList()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /* 搜索版本记录分页 */
|
|
|
+ async getSandBoxList() {
|
|
|
+ const {id} = this.$route.query
|
|
|
+ let params = {
|
|
|
+ CurrentIndex: this.page,
|
|
|
+ PageSize: this.pageSize,
|
|
|
+ PptId:id,
|
|
|
+ IsShowMe: this.OnlyMine,
|
|
|
+ };
|
|
|
+ this.loading=true
|
|
|
+ let res = await pptInterface.getPptHistoryList(params);
|
|
|
+ this.loading=false
|
|
|
+ if (res.Ret !== 200) return;
|
|
|
+ const arr = (res.Data.List || []).map(item => ({
|
|
|
+ ...item,
|
|
|
+ showOperations: false, // 初始时隐藏操作栏
|
|
|
+ }));
|
|
|
+ this.list =
|
|
|
+ this.page === 1
|
|
|
+ ? arr
|
|
|
+ : [...this.list, ...arr];
|
|
|
+ this.finished = res.Data.Paging.IsEnd;
|
|
|
+ },
|
|
|
+ // 是否仅显示我保存的版本
|
|
|
+ handleChangeIsOnlyMine(val) {
|
|
|
+ this.page = 1;
|
|
|
+ this.list = [];
|
|
|
+ this.getSandBoxList();
|
|
|
+ },
|
|
|
+ handleLoadMore(){
|
|
|
+ if(this.finished||this.loading) return
|
|
|
+ this.page++
|
|
|
+ this.getSandBoxList()
|
|
|
+ },
|
|
|
+ // 预览
|
|
|
+ preview(id){
|
|
|
+ this.$router.push({path:'/pptpublish', query:{id, isVersionRecord:'true'}})
|
|
|
+ },
|
|
|
+ // 删除弹窗
|
|
|
+ deleteVersionRecord(Id){
|
|
|
+ this.$confirm('删除后不可恢复,是否确认删除该版本?', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ this.deleteItem(Id)
|
|
|
+ }).catch(() => {
|
|
|
+ });
|
|
|
+ },
|
|
|
+ deleteItem(Id) {
|
|
|
+ pptInterface.getPptHistoryDel({
|
|
|
+ Id
|
|
|
+ }).then((res) => {
|
|
|
+ if(res.Ret !== 200) return
|
|
|
+ this.$message.success('删除成功!');
|
|
|
+ this.getSandBoxList();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ showOperation(itemId) {
|
|
|
+ const item = this.list.find(i => i.Id === itemId);
|
|
|
+ if (item) {
|
|
|
+ this.$set(item, 'showOperations', true); // 使用 $set 以确保响应性
|
|
|
+ }
|
|
|
+ },
|
|
|
+ hideOperation() {
|
|
|
+ this.list.forEach(item => {
|
|
|
+ this.$set(item, 'showOperations', false); // 隐藏所有操作栏
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+div{
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+.statistic-analysis-wrap{
|
|
|
+ margin-top: 10px;
|
|
|
+ border: 1px solid var(--gary-gy-5-line, #C8CDD9);
|
|
|
+ background: #FFF;
|
|
|
+ .top-box{
|
|
|
+ padding: 20px 20px 0 20px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .main-box{
|
|
|
+ padding: 20px;
|
|
|
+ height: calc(100vh - 180px);
|
|
|
+ border-radius: 4px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .list-wrap{
|
|
|
+ flex: 1;
|
|
|
+ overflow-y: auto;
|
|
|
+ // display: flex;
|
|
|
+ // flex-wrap: wrap;
|
|
|
+ gap: 0 20px;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.chart-item {
|
|
|
+ width: 100%;
|
|
|
+ max-height: 100px;
|
|
|
+ margin: 10px 0;
|
|
|
+ padding: 10px;
|
|
|
+ border: 1px solid #eaeaea;
|
|
|
+ border-radius: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: center;
|
|
|
+ .top {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .title {
|
|
|
+ max-width: 100px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ line-height: 20px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ .time {
|
|
|
+ line-height: 20px;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bottom {
|
|
|
+ margin-top: 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .name {
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ .operation {
|
|
|
+ cursor: pointer;
|
|
|
+ color: #0052D9;
|
|
|
+ .delete {
|
|
|
+ color: #D54941;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|