<template>
|
<div class="top-right-btn" :style="style">
|
<el-row>
|
<el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top" v-if="search">
|
<el-button size="mini" circle icon="el-icon-search" @click="toggleSearch()" />
|
</el-tooltip>
|
<el-tooltip class="item" effect="dark" content="刷新" placement="top">
|
<el-button size="mini" circle icon="el-icon-refresh" @click="refresh()" />
|
</el-tooltip>
|
<el-tooltip v-show="$route.path.includes('point')" class="item" effect="dark" content="自定义列" placement="top">
|
<el-button size="mini" circle icon="el-icon-collection-tag" @click="addDynamicColumn()" />
|
</el-tooltip>
|
<el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns">
|
<el-button size="mini" circle icon="el-icon-menu" @click="showColumn()" v-if="showColumnsType == 'transfer'"/>
|
<el-dropdown trigger="click" :hide-on-click="false" style="padding-left: 12px" v-if="showColumnsType == 'checkbox'">
|
<el-button size="mini" circle icon="el-icon-menu" />
|
<el-dropdown-menu slot="dropdown" style="max-height: 650px;overflow-y: auto">
|
<template v-for="item in columns">
|
<el-dropdown-item :key="item.key">
|
<el-checkbox :checked="item.visible" @change="checkboxChange($event, item.label)" :label="item.label" />
|
</el-dropdown-item>
|
</template>
|
</el-dropdown-menu>
|
</el-dropdown>
|
</el-tooltip>
|
</el-row>
|
<el-dialog :title="title" :visible.sync="open" append-to-body>
|
<el-transfer
|
:titles="['显示', '隐藏']"
|
v-model="value"
|
:data="columns"
|
@change="dataChange"
|
></el-transfer>
|
</el-dialog>
|
|
|
<el-dialog
|
title="添加动态列"
|
:visible.sync="showDynamicColumn"
|
width="500px"
|
:before-close="dynamicColumnClose">
|
<div>
|
<div style="margin-bottom: 8px">
|
<el-button style="float: right" type="primary" @click="addColumn" size="small">新增一条</el-button>
|
</div>
|
<div v-for="(dynamicColumn, index) in dynamicColumnList" :key="index">
|
<el-form :inline="true" size="small">
|
<el-form-item label="列名" prop="labelValue">
|
<div style="display: flex; flex-direction: row">
|
<el-input v-model="dynamicColumn.labelValue"></el-input>
|
<el-button style="margin-left: 8px" type="danger" @click="delColumn(dynamicColumn.id, index)">删除</el-button>
|
</div>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
|
<span slot="footer" class="dialog-footer">
|
<el-button size="small" @click="dynamicColumnClose">取 消</el-button>
|
<el-button type="primary" size="small" :disabled="!dynamicColumnList || dynamicColumnList.length < 1" @click="saveColumns">保 存</el-button>
|
</span>
|
</el-dialog>
|
|
</div>
|
</template>
|
<script>
|
import { addDynamicColumn, deleteDynamicColumnById, editDynamicColumn, getDynamicColumnList } from '@/api/platform/dynamicColumn'
|
export default {
|
name: "RightToolbar",
|
data() {
|
return {
|
dynamicColumnList: [],
|
showDynamicColumn: false,
|
// 显隐数据
|
value: [],
|
// 弹出层标题
|
title: "显示/隐藏",
|
// 是否显示弹出层
|
open: false,
|
tableKey: 0,
|
};
|
},
|
props: {
|
/* 是否显示检索条件 */
|
showSearch: {
|
type: Boolean,
|
default: true,
|
},
|
/* 显隐列信息 */
|
columns: {
|
type: Array,
|
},
|
/* 是否显示检索图标 */
|
search: {
|
type: Boolean,
|
default: true,
|
},
|
/* 显隐列类型（transfer穿梭框、checkbox复选框） */
|
showColumnsType: {
|
type: String,
|
default: "checkbox",
|
},
|
/* 右外边距 */
|
gutter: {
|
type: Number,
|
default: 10,
|
},
|
},
|
computed: {
|
style() {
|
const ret = {};
|
if (this.gutter) {
|
ret.marginRight = `${this.gutter / 2}px`;
|
}
|
return ret;
|
}
|
},
|
created() {
|
if (this.$route.path.includes("point")) {
|
this.getDyColumn()
|
}
|
if (this.showColumnsType == 'transfer') {
|
// 显隐列初始默认隐藏列
|
for (let item in this.columns) {
|
if (this.columns[item].visible === false) {
|
this.value.push(parseInt(item));
|
}
|
}
|
}
|
},
|
methods: {
|
getDyColumn() {
|
// 查询动态列
|
let params = {
|
tableName: 't_yw_point'
|
}
|
getDynamicColumnList(params).then(res => {
|
this.dynamicColumnList = res.data
|
})
|
},
|
addDynamicColumn() {
|
this.getDyColumn()
|
this.showDynamicColumn = true
|
},
|
saveColumns() {
|
editDynamicColumn(this.dynamicColumnList).then(res => {
|
this.$message.success("保存成功")
|
this.$emit('refreshHeader');
|
this.showDynamicColumn = false
|
})
|
},
|
addColumn() {
|
this.dynamicColumnList.push({
|
id: null,
|
labelValue: ''
|
})
|
},
|
delColumn(id, index) {
|
if(id) {
|
deleteDynamicColumnById(id).then(res => {
|
this.$message.success("删除成功")
|
this.getDyColumn();
|
this.$emit('refreshHeader');
|
})
|
}else {
|
this.dynamicColumnList.splice(index,1)
|
}
|
},
|
dynamicColumnClose() {
|
this.showDynamicColumn = false
|
},
|
// 搜索
|
toggleSearch() {
|
this.$emit("update:showSearch", !this.showSearch);
|
},
|
// 刷新
|
refresh() {
|
this.$emit("queryTable");
|
},
|
// 右侧列表元素变化
|
dataChange(data) {
|
for (let item in this.columns) {
|
const key = this.columns[item].key;
|
this.columns[item].visible = !data.includes(key);
|
}
|
},
|
// 打开显隐列dialog
|
showColumn() {
|
this.open = true;
|
},
|
// 勾选
|
checkboxChange(event, label) {
|
this.columns.filter(item => item.label == label)[0].visible = event;
|
}
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
::v-deep .el-transfer__button {
|
border-radius: 50%;
|
padding: 12px;
|
display: block;
|
margin-left: 0px;
|
}
|
::v-deep .el-transfer__button:first-child {
|
margin-bottom: 10px;
|
}
|
</style>
|
