<template>
|
<div class="top-right-btn">
|
<el-row>
|
<el-tooltip v-if="search" class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top">
|
<el-button size="small" circle icon="el-icon-search" @click="toggleSearch"></el-button>
|
</el-tooltip>
|
<el-tooltip class="item" effect="dark" content="刷新" placement="top">
|
<el-button size="small" circle icon="el-icon-refresh" @click="refresh"></el-button>
|
</el-tooltip>
|
<el-tooltip v-if="columns" class="item" effect="dark" content="显示/隐藏列" placement="top">
|
<el-button size="small" circle icon="el-icon-menu" @click="openDrawer"></el-button>
|
</el-tooltip>
|
</el-row>
|
|
<el-drawer
|
:visible.sync="table"
|
title="信息显隐筛选"
|
size="30%"
|
append-to-body
|
:wrapperCLosable="false"
|
:with-header="true">
|
<div slot="header">
|
<span>信息显隐筛选</span>
|
</div>
|
<div slot="default" style="margin-left: 20px;margin-top: 20px">
|
<el-table :data="getPage" style="width: 95%; height: 80%;;margin-bottom: 40px;">
|
<el-table-column prop="index" label="序号" width="80"></el-table-column>
|
<el-table-column prop="label" label="数据名称"></el-table-column>
|
<el-table-column prop="visible" label="是否显示">
|
<template slot-scope="scope">
|
<el-switch
|
v-model="scope.row.visible"
|
class="ml-2"
|
active-color="#13ce66"
|
inactive-color="#ff4949"
|
@change="switchChange(scope.row)"
|
></el-switch>
|
</template>
|
</el-table-column>
|
<el-table-column prop="date" label="排序">
|
<template slot-scope="scope">
|
<el-input-number v-model="scope.row.serialNumber" :min="0" style="width: 120px" @change="sortChange(scope.row, $event)"></el-input-number>
|
</template>
|
</el-table-column>
|
</el-table>
|
<el-pagination
|
v-if="total > pageSize"
|
:page-size="pageSize"
|
:current-page="currentPage"
|
:total="total"
|
layout="total, prev, pager, next"
|
@current-change="handlePageChange"
|
></el-pagination>
|
</div>
|
<div style="position: absolute; bottom: 0; left: 0; right: 0; padding: 20px; text-align: right;">
|
<el-button type="primary" @click="save" v-if="isAdmin()">保 存</el-button>
|
<el-button @click="table = false">取 消</el-button>
|
<el-button type="primary" @click="resetSort">重 置</el-button>
|
</div>
|
</el-drawer>
|
</div>
|
</template>
|
|
<script>
|
import {saveHiddenList} from "@/api/projectEngineering/projectInfo";
|
|
import CircularJSON from 'circular-json'
|
|
export default {
|
data() {
|
return {
|
table: false,
|
currentPage: 1,
|
columnRef: null,
|
cpList: [],
|
saveList:[],
|
};
|
},
|
props: {
|
showSearch: {
|
type: Boolean,
|
default: true,
|
},
|
columns: {
|
type: Array,
|
default: () => [],
|
},
|
hiddenTotal:{
|
type: Number,
|
default: 0,
|
},
|
search: {
|
type: Boolean,
|
default: false,
|
},
|
gutter: {
|
type: Number,
|
default: 10,
|
},
|
},
|
computed: {
|
style() {
|
return {
|
marginRight: this.gutter ? `${this.gutter / 2}px` : '',
|
};
|
},
|
pageSize() {
|
return 10;
|
},
|
total() {
|
return this.hiddenTotal;
|
},
|
getPage(){
|
return this.columns;
|
}
|
},
|
|
methods: {
|
isAdmin(){
|
return this.$auth.hasRole("admin")
|
},
|
toggleSearch() {
|
this.$emit('update:showSearch', !this.showSearch);
|
},
|
refresh() {
|
this.$emit('queryTable');
|
},
|
openDrawer() {
|
this.table = true;
|
},
|
switchChange(row) {
|
row.sort = row.serialNumber;
|
if (row.visible === true){
|
row.display = "1"
|
}else {
|
row.display = "0"
|
}
|
if(this.saveList.length === 0){
|
this.saveList.push(row)
|
}else {
|
let have = true;
|
this.saveList.forEach((item ,index)=>{
|
if (item.id === row.id){
|
item[index] =item;
|
have =false;
|
}
|
})
|
if (have){
|
this.saveList.push(row)
|
}
|
}
|
console.log(this.saveList)
|
this.$emit('update:columns', row);
|
},
|
handlePageChange(page) {
|
this.$emit('update:page', page);
|
// this.currentPage = page;
|
// this.queryParams.currentPage = page;
|
// getHiddenList(this.queryParams).then(res =>{
|
// //转换
|
// res.data.forEach((item,index)=>{
|
// item.index = index + 1;
|
// item.key = index;
|
// item.serialNumber = index + 1;
|
// item.label = item.name;
|
// if(item.display === '0'){
|
// item.visible = false
|
// }else {
|
// item.visible = true;
|
// }
|
// if(item.columns ==='usedStatus' ){
|
// if(projectPhase !== '6') {
|
// item.visible = false
|
// } else {
|
// item.visible = true
|
// }
|
// }
|
// });
|
// this.columns = res.data;
|
// })
|
|
},
|
save(){
|
//保存逻辑
|
if (this.saveList.length !== 0){
|
saveHiddenList(CircularJSON.stringify(this.saveList)).then(res =>{
|
this.$modal.msgSuccess("保存成功");
|
});
|
}
|
},
|
sortChange(row, val) {
|
row.sort = row.serialNumber;
|
if (row.visible === true){
|
row.display = "1"
|
}else {
|
row.display = "0"
|
}
|
if(this.saveList.length === 0){
|
this.saveList.push(row)
|
}else {
|
let have = true;
|
this.saveList.forEach((item ,index)=>{
|
if (item.id === row.id){
|
item[index] =item;
|
have =false;
|
}
|
})
|
if (have){
|
this.saveList.push(row)
|
}
|
}
|
// // 创建一个新的columns数组，以避免直接修改原始数组
|
// this.cpList = this.columns.map(item => ({ ...item })); // 使用解构来创建对象的浅拷贝
|
//
|
// // 更新指定项的serialNumber
|
// this.cpList.forEach(item => {
|
// if (item.key === row.key) {
|
// item.serialNumber = row.serialNumber;
|
// }
|
// });
|
//
|
// // 根据serialNumber对newColumns进行排序
|
// this.cpList = this.cpList.sort((a, b) => a.serialNumber - b.serialNumber);
|
//
|
// // 触发事件通知父组件columns已更新（如果父组件需要知道这个变化）
|
// this.$emit('update:sort', this.cpList);
|
this.$emit('update:sort', row);
|
},
|
resetSort() {
|
//重置保存集合
|
this.currentPage = 1;
|
this.saveList = [];
|
this.$emit('update:resetSort');
|
},
|
},
|
mounted() {
|
|
this.columns.forEach((item, index) => {
|
if (item.visible) {
|
|
}
|
});
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
:deep(.el-transfer__button) {
|
border-radius: 50%;
|
display: block;
|
margin-left: 0px;
|
}
|
:deep(.el-transfer__button:first-child) {
|
margin-bottom: 10px;
|
}
|
|
.my-el-transfer {
|
text-align: center;
|
}
|
.tree-header {
|
width: 100%;
|
line-height: 24px;
|
text-align: center;
|
}
|
.show-btn {
|
margin-left: 12px;
|
}
|
.drawer-footer {
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
padding: 20px;
|
background: #fff;
|
border-top: 1px solid #e8e8e8;
|
text-align: right;
|
}
|
</style>
|
