<template>
<div class="same-style" id="wrap_Height">
<div class="el_table">
<el-table ref="topicTable"
:data="tableData" class="special-table"
:row-key="getRowKeys" :row-class-name="tableRowClassName"
border :max-height="tableHeight"
:tree-props="{children: 'childNode'}">
<el-table-column
prop="name" align="center"
label="标题名称">
<template slot-scope="scope">
<div class="flex align-center" style="cursor: pointer;"
:class="'zhuant-name'+scope.row.level" @click="expenaChange(scope.row)">
<div class="flex align-center table-expend-box" v-if="scope.row.childNode&&scope.row.childNode.length>0" :class="{'table_open':scope.row.isOpen}">
<span class="table_close"></span>
</div>
{{scope.row.name}}
<img v-if="scope.row.videoFlag&&scope.row.isTop" style="position: absolute;top: 0;left: 0;width: 40px;" src="../../../../static/zhiding_icon.png" alt="">
</div>
</template>
</el-table-column>
<el-table-column
prop="cover" align="center"
label="封面">
<template slot-scope="scope">
<img v-if="scope.row.cover !=''&&scope.row.cover!=null" style="display: block;width: 137px;height: 107px;margin: 0 auto;border-radius: 10px;" :src="scope.row.cover" alt="">
</template>
</el-table-column>
<el-table-column
prop="vedioId" align="center"
label="视频">
<template slot-scope="scope">
<div class="video-box" v-if="scope.row.vedioId" @click="lookVideoPlay(scope.row)">
<img v-if="scope.row.vedioImg !=''&&scope.row.vedioImg!=null" style="display: block;width: 137px;height: 107px;margin: 0 auto;border-radius: 10px;" :src="scope.row.vedioImg" alt="">
<!-- 视频遮罩层 -->
<div></div>
</div>
</template>
</el-table-column>
<el-table-column
prop="merchantNames" align="center"
label="关联商户">
</el-table-column>
<el-table-column prop="status" label="状态" align="center">
<template slot-scope="scope">
<span :style="scope.row.status?'color: green;':'color: red;'">{{scope.row.status?'启用':'禁用'}}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<div class="flex align-center justify-center ctrl-box">
<div class="flex">
<img title="添加" src="../../../../static/table-add.png" alt=""
v-if="scope.row.addBtnFlag" @click.stop="editZhuanti('add', scope.row)">
<img title="编辑" v-if="scope.row.videoFlag" style="margin-right: 30px;" src="../../../../static/table-edit.png" alt=""
@click.stop="editZhuanti('edit', scope.row)">
<img v-if="scope.row.videoFlag" title="删除" style="margin-right: 30px;" src="../../../../static/table-del.png" alt=""
@click.stop="showDel(scope.row)">
<img v-if="scope.row.videoFlag" :title="scope.row.isTop?'修改置顶':'置顶'" src="../../../../static/zhiding.png" alt=""
@click.stop="showTop(scope.row)">
</div>
</div>
</template>
</el-table-column>
</el-table>
<div class="pageNation">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNum"
:page-sizes="[10, 20, 30, 40]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
></el-pagination>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
tableHeight: 300,
pageSize: 10,
pageNum: 1,
total: 0,
tableData: [],//列表
};
},
components: { comfirmdialog },
created() {
this.getList();
},
mounted() {
},
methods: {
//分页控件
handleSizeChange(size) {
this.pageSize = size;
this.getTopStatus();
},
//分页控件
handleCurrentChange(currentPage) {
this.pageNum = currentPage;
this.getTopStatus();
},
getList() {
this.$axios({
method: "get",
url: "/api",
params: {
pageNum: this.pageNum,
pageSize: this.pageSize,
},
headers: {
Authorization:
"bearer " +
JSON.parse(sessionStorage.getItem("sigInfo")).access_token,
},
}).then((res) => {
if(res.data.code != 0) {
this.$message.error(res.data.msg);
return
}
this.total = res.data.data!=null&&res.data.data.total ? res.data.data.total : 0;
this.tableData = res.data.data !=null&&res.data.data.list ? res.data.data.list : [];
if(this.tableData.length > 0) {
this.chuliData(this.tableData);
}
}).catch(error => {
this.$message.error(error);
});
},
chuliData(data) {
let _this = this;
for(let i = 0; i < data.length; i++) {
//用于展开收缩的控制，以及设置有二级之上添加border
_this.$set(data[i], 'isOpen', false);
// 重点是toggleRowExpansion方法的使用
_this.$refs.topicTable.toggleRowExpansion(data[i],false);
if(data[i].childNode&&data[i].childNode.length > 0) {
_this.chuliData(data[i].childNode)
}
}
},
getRowKeys(row) {
return row.id
},
expenaChange(row) {//专题展开行
console.log('row', row);
this.clickOpenRow = row;
this.toggelFalse(this.tableData);
this.toggleTrueParent(row.parentId, this.tableData);
this.$refs.topicTable.toggleRowExpansion(row, !row.isOpen);
row.isOpen = !row.isOpen;
},
toggelFalse(data) {//将点击行之外的状态初始为false
let _this = this;
data.forEach(item => {
if(item.id != this.clickOpenRow.id) {
item.isOpen = false;
_this.$refs.topicTable.toggleRowExpansion(item,false);
}
if(item.childNode != undefined && item.childNode != null) {
_this.toggelFalse(item.childNode);
}
})
},
toggleTrueParent(parentId, data) {//将点击行父级也设为true
let _this = this;
if(parentId != undefined && parentId != null && parentId != '') {
for(let i = 0; i < data.length; i++) {
if(data[i].id == parentId) {
data[i].isOpen = true;
this.$refs.topicTable.toggleRowExpansion(data[i],true);
this.toggleTrueParent(data[i].parentId, this.tableData);
return
} else if(data[i].childNode != undefined && data[i].childNode != null) {
this.toggleTrueParent(parentId, data[i].childNode);
}
}
}
},
},
};
</script>
<style scoped>
</style>
<style>
</style>
