<template>
|
<div class="spaceBox">
|
<el-select v-model="menuTopFrom.queryLayer" placeholder="请选择...">
|
<el-option :value="menuTopFrom.queryLayer" style="height: 100%">
|
<div style="height: 200px; overflow: auto">
|
<el-tree
|
:data="layerData"
|
:props="defaultProps"
|
:show-checkbox="true"
|
:check-on-click-node="true"
|
:check-strictly="true"
|
node-key="id"
|
@check="menuTreeCheck"
|
ref="treeForm"
|
:default-expanded-keys="[1]"
|
accordion
|
>
|
</el-tree>
|
</div>
|
<div style="margin-top: 5px">
|
<el-button size="mini" plain @click="getCheckedNodes">确认</el-button>
|
<el-button size="mini" type="info" plain @click="resetCheckedNodes"
|
>重置</el-button
|
>
|
</div>
|
</el-option>
|
</el-select>
|
</div>
|
</template>
|
|
<script>
|
import { inquiry_SelectTabs } from '../../api/api.js';
|
export default {
|
data() {
|
return {
|
menuTopFrom: {
|
queryLayer: '',
|
},
|
layerData: [
|
{
|
id: 1,
|
label: '基础数据',
|
tabDesc: '基础数据',
|
value: 'BD',
|
children: [],
|
},
|
{
|
id: 2,
|
label: '基础数据',
|
tabDesc: '业务数据',
|
value: 'BS',
|
children: [],
|
},
|
],
|
defaultProps: {
|
children: 'children',
|
label: 'label',
|
},
|
mapSpaceQueryLayer: null,
|
};
|
},
|
mounted() {
|
this.getAllTable();
|
},
|
methods: {
|
async getAllTable() {
|
const data = await inquiry_SelectTabs();
|
if (data.code != 200) {
|
this.$message.error('列表调用失败');
|
}
|
var option = data.result;
|
|
for (var i in option) {
|
var val_Data = option[i];
|
val_Data.id = '1' + i;
|
val_Data.label = val_Data.tabDesc + '(' + val_Data.tab + ')';
|
if (option[i].ns == 'bd') {
|
this.layerData[0].children.push(val_Data);
|
} else {
|
this.layerData[1].children.push(val_Data);
|
}
|
}
|
},
|
getCheckedNodes() {
|
this.$store.state.mapSpaceQueryLayer = this.mapSpaceQueryLayer;
|
this.$store.state.mapPopBoolean = true;
|
this.$store.state.mapPopBoxFlag = '2';
|
},
|
resetCheckedNodes() {
|
this.menuTopFrom.queryLayer = null;
|
this.$refs.treeForm.setCheckedKeys([]);
|
},
|
menuTreeCheck(node, list) {
|
if (list.checkedNodes.length > 0) {
|
this.menuTopFrom.queryLayer = node.tabDesc;
|
this.mapSpaceQueryLayer = node.entity;
|
if (list.checkedKeys.length == 2) {
|
//单选实现
|
this.$refs.treeForm.setCheckedKeys([node.id]);
|
}
|
} else {
|
this.menuid = null;
|
}
|
},
|
},
|
};
|
</script>
|
|
<style scoped lang="less">
|
.spaceBox {
|
width: 98%;
|
height: 100%;
|
margin: 0;
|
padding: 0;
|
overflow: hidden;
|
}
|
</style>
|
<style lang="less" scoped>
|
.el-tree .el-tree-node .is-leaf + .el-checkbox .el-checkbox__inner {
|
display: inline-block;
|
}
|
.el-tree .el-tree-node .el-checkbox .el-checkbox__inner {
|
display: none;
|
}
|
|
/deep/.el-form-item__label {
|
color: white;
|
}
|
/deep/.el-input__inner {
|
background-color: transparent !important ;
|
color: #fff !important;
|
border: 1px solid;
|
}
|
|
/deep/ .el-input__inner {
|
border-color: #fff !important;
|
}
|
/deep/.el-select-dropdown {
|
border-color: white;
|
opacity: 0.85;
|
}
|
</style>
|
