The default selected background color of el-tree is white. Sometimes we need to send a request as soon as we enter the page, and set the default selected background color to blue, the font color to white, and then the selected item is also changed to the background color It is blue, and the font color is white. At this time, we can add the property highlight-current to the el-tree as a highlight, and then change the selected style through the following style:
.el-tree--highlight-current
.el-tree-node.is-current
> .el-tree-node__content {
// 设置颜色
color: #fff;
background: #2d8cf0 !important;
}
Change the background color of the mouse over the item by the following code:
.el-tree-node > .el-tree-node__content:hover {
background-color: #c1ddf0;
}
Set this.$refs.tree.setCurrentKey(res.data.oneself_code) to the default selection. getTree is a method in methods. Call this method directly in created and send a request to obtain the data corresponding to the tree:
getTree() {
businessTree()
.then(res => {
// console.log("左侧树", res);
// this.treeData = res.data.childrenlist;
this.treeData = [res.data];
this.ruleForm.oneself_code = res.data.oneself_code;
this.$nextTick(() => {
// treeBox 元素的ref value 绑定的node-key
this.$refs.tree.setCurrentKey(res.data.oneself_code);
});
this.setDisabled(this.treeData);
this.fetchData();
this.getTopData();
})
.catch(err => {
});
},
The complete code of the page is as follows:
<template>
<div class="bussinessBox">
<!-- 业务管理 -->
<div class="leftArea resizable" id="leftArea">
<div class="myleftBox">
<div class="headerTitle">机构列表</div>
<div class="treeBox">
<el-tree
:data="treeData"
:check-strictly="true"
default-expand-all
:expand-on-click-node="false"
node-key="oneself_code"
ref="tree"
highlight-current
:props="defaultProps"
:default-checked-keys="['all']"
@check="changetree"
@check-change="handleNodeClick"
@node-click="nodeClick"
>
<span slot-scope="{ node, data }" class="myItem">
<span>{
{
node.label }}</span>
<span>({
{
data.business_count }})</span>
</span>
</el-tree>
<!-- @check-change="checkChange" -->
</div>
</div>
</div>
<div class="rightArea" id="rightArea">
<div class="topBox">
<div class="item1">
<div class="imgBox">
<img src="@/assets/images/asset/headerBar.png" alt="" />
</div>
<div class="partBox">
<div class="part">
<span class="num">{
{
topData.business_count }}</span>
<span class="tips">业务总数(条)</span>
</div>
<div class="part">
<span class="num">{
{
topData.open_count }}</span>
<span class="tips">运行中业务数</span>
</div>
<div class="part">
<span class="num">{
{
topData.close_count }}</span>
<span class="tips">已关闭业务数</span>
</div>
</div>
<div class="rightSanBox">
<img src="@/assets/images/asset/triangle.png" alt="" />
</div>
</div>
<div class="item2">
<div class="myBusinessDetail">
<div class="childrenBox">
<span class="myNum">{
{
topData.file_business_count }}</span>
<span class="myTips">文件业务数</span>
</div>
<div class="childrenBox">
<span class="myNum">{
{
topData.database_business_count }}</span>
<span class="myTips">数据库业务</span>
</div>
<div class="childrenBox">
<span class="myNum">{
{
topData.video_exchange_business_count
}}</span>
<span class="myTips">视频交换业务</span>
</div>
<div class="childrenBox">
<span class="myNum">{
{
topData.service_exchange_business_count
}}</span>
<span class="myTips">服务请求交换业务</span>
</div>
</div>
<div class="rightSanBox">
<img src="@/assets/images/asset/triangleRight.png" alt="" />
</div>
</div>
</div>
<div class="bottomBox">
<div class="searchBox">
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
class="ruleForm"
>
<el-row :gutter="20" class="firstElRow">
<el-col :span="4">
<el-form-item prop="business_company">
<el-input
v-model="ruleForm.business_company"
placeholder="请输入业务需求机构"
clearable
style="width:100%"
></el-input>
</el-form-item>
</el-col>
<!-- <el-col :span="4">
<el-form-item prop="business_name">
<el-input
v-model="ruleForm.business_name"
placeholder="请输入业务名称"
clearable
style="width:100%"
></el-input>
</el-form-item>
</el-col> -->
<el-col :span="4">
<el-form-item prop="business_link">
<el-input
v-model="ruleForm.business_link"
placeholder="请输入链路名称"
clearable
style="width:100%"
></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item prop="business_type">
<el-select
v-model="ruleForm.business_type"
placeholder="请选择传输类型"
style="width:100%"
clearable
>
<el-option
v-for="item in linkList"
:key="item.code"
:label="item.str"
:value="item.code"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-button
class="filter-item"
style="margin-right:1rem"
type="primary"
@click="fetchData"
>
查询
</el-button>
<el-button class="filter-item" @click="reset">
重置
</el-button>
</el-col>
</el-row>
</el-form>
</div>
<div class="resultBox">
<div class="cardWhite">
<commonTable
:tableHead="tableHead"
:tableData="tableData"
:dataFiter="true"
:selectTotal="true"
:isShowBg="false"
:selectionFlag="true"
:dropdownList="dropdownList"
:resizable="true"
:tableLoading="tableLoading"
:showListD="showListD"
:toolBoxFlag="true"
:addBtn="false"
:total="ruleForm.total"
@sortChange="() => {}"
@selection-change="() => {}"
@selectAction="batchExport"
@addData="() => {}"
@inputData="batchExport"
:actionFlag="false"
:actionList="['详情']"
:freeElfFlag="false"
:xuhaoFlag="true"
ref="commonTable"
>
<template slot-scope="scope" slot="business_task_tagging">
<el-switch
:value="scope.rows.business_task_tagging"
:active-value="1"
:inactive-value="0"
:disabled="scope.rows.control_flag ? false : true"
@change="
val => {
statusChange(val, scope.rows);
}
"
>
</el-switch>
</template>
<template slot-scope="scope" slot="log_text">
<!-- <el-button type="primary" @click="showLogText(scope.rows)"
>查看</el-button
> -->
<span
type="primary"
style="cursor:pointer;color:#1182FB"
@click="showLogText(scope.rows)"
>详情</span
>
</template>
</commonTable>
</div>
<pagination
v-show="ruleForm.total > 0"
:total="ruleForm.total"
:page.sync="ruleForm.page"
:limit.sync="ruleForm.page_size"
@pagination="fetchData"
/>
</div>
</div>
</div>
</div>
</template>
<script>
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import commonTable from "@/components/GlobalCommonTable/common-table";
import {
businessList,
businessDetail,
businessTopData,
businessBatchExport,
businessTree,
businessTypeSelect,
businessChangeStatus,
businessjudgeSuccess
} from "@/api/asset/business.js";
import axios from "axios";
import {
getToken } from "@/libs/auth";
import localDownloadUtil from "@/utils/localDownloadUtil.js";
var elementResizeDetectorMaker = require("element-resize-detector");
export default {
components: {
Pagination, commonTable },
data() {
return {
treeData: [],
defaultProps: {
children: "childrenlist",
label: "title"
},
showAll: false,
topData: {
business_count: 0,
open_count: 0,
close_count: 0,
file_business_count: 0,
database_business_count: 0,
video_exchange_business_count: 0,
service_exchange_business_count: 0
},
ruleForm: {
oneself_code: "",
business_name: "",
business_link: "",
business_company: "",
business_type: "",
page: 1,
page_size: 10,
total: 0
},
rules: {
business_name: [
{
required: false, message: "请输入业务名称", trigger: "blur" }
],
business_link: [
{
required: false, message: "请输入链路名称", trigger: "blur" }
],
business_company: [
{
required: false, message: "请输入业务需求机构", trigger: "blur" }
],
business_type: [
{
required: false, message: "请选择传输类型", trigger: "change" }
]
},
linkTypeList: [],
linkList: [],
statusList: [],
tableHead: [
{
label: "ID",
prop: "business_id",
type: "normal",
sortable: false,
width: 150
},
{
label: "链路机构",
prop: "link_company",
type: "normal",
sortable: false,
width: 150
},
{
label: "所属链路",
prop: "business_link",
type: "normal",
sortable: false,
width: 150
},
{
label: "业务需求机构",
prop: "business_company",
type: "normal",
sortable: false,
width: 190
},
{
label: "业务意图描述",
prop: "business_description",
type: "normal",
sortable: false,
width: 150
},
{
label: "需求联系人",
prop: "business_linkman",
type: "normal",
sortable: false,
width: 150
},
{
label: "联系人电话",
prop: "business_contact_number",
type: "normal",
sortable: false,
width: 150
},
{
label: "业务名称",
prop: "business_name",
type: "normal",
sortable: false,
width: 150
},
{
label: "传输类型",
prop: "business_type",
type: "normal",
sortable: false,
width: 150
},
{
label: "业务协议",
prop: "business_protocol",
type: "normal",
sortable: false,
width: 150
},
{
label: "业务方向",
prop: "business_direction",
type: "normal",
sortable: false,
width: 150
},
// {
// label: "所属平台",
// prop: "business_platform",
// type: "normal",
// sortable: false,
// width: 130
// },
{
label: "业务责任人",
prop: "business_responsible",
type: "normal",
sortable: false,
width: 150
},
{
label: "责任人电话",
prop: "business_responsible_number",
type: "normal",
sortable: false,
width: 150
},
{
label: "内网开放IP",
prop: "business_inter_open_ip",
type: "normal",
sortable: false,
width: 150
},
{
label: "内网开放端口",
prop: "business_inter_open_port",
type: "normal",
sortable: false,
width: 150
},
{
label: "内网业务IP",
prop: "business_inter_ip",
type: "normal",
sortable: false,
width: 150
},
{
label: "内网业务端口",
prop: "business_inter_port",
type: "normal",
sortable: false,
width: 150
},
{
label: "外网业务IP",
prop: "business_out_ip",
type: "normal",
sortable: false,
width: 150
},
{
label: "外网业务端口",
prop: "business_out_port",
type: "normal",
sortable: false,
width: 150
},
{
label: "外网开放IP",
prop: "business_out_open_ip",
type: "normal",
sortable: false,
width: 150
},
{
label: "外网开放端口",
prop: "business_out_open_port",
type: "normal",
sortable: false,
width: 150
},
{
label: "创建时间",
prop: "business_create_time",
type: "normal",
sortable: false,
width: 190
},
// {
// label: "合规性",
// prop: "business_compliance_tagging",
// type: "normal",
// sortable: false
// },
{
label: "任务状态",
prop: "business_task_tagging",
type: "slot",
fixed: "right",
sortable: false,
slotName: "business_task_tagging",
width: 90
},
{
label: "操作",
prop: "log_text",
type: "slot",
fixed: "right",
sortable: false,
slotName: "log_text",
width: 100
}
],
showListD: [
// "business_id",
"business_name",
"link_company",
"business_link",
"business_company",
"type",
// "business_linkman",
// "business_contact_number",
"business_description",
"business_direction",
"business_type",
"business_protocol",
"business_responsible",
// "business_compliance_tagging",
"business_responsible_number",
// "business_inter_open_ip",
// "business_inter_open_port",
// "business_inter_ip",
// "business_inter_port",
// "business_out_ip",
// "business_out_port",
// "business_out_open_ip",
// "business_out_open_port",
"business_create_time",
"business_task_tagging",
"log_text"
],
dropdownList: [
{
selectionFlag: true,
label: "批量导出",
imgSrc: require("@/assets/images/asset/export.png"), //自定义前图标
isBtnStyle: true,
size: "medium",
actionName: "inputData",
type: "primary",
actionConfirm: "",
flagEx: true
}
],
tableData: [],
tableLoading: false
};
},
created() {
this.getTree();
this.getbusinessTypeSelect();
const query = this.$route.query;
if (query.id) {
this.ruleForm.id = query.id;
}
},
watch: {
showAll: {
handler(newVal, oldVal) {
let labelArr = document.getElementsByClassName("myItem");
if (newVal) {
for (var i = 0; i < labelArr.length; i++) {
labelArr[i].style.width = "100%";
}
} else {
for (var i = 0; i < labelArr.length; i++) {
labelArr[i].style.width = "7rem";
}
}
},
immediate: true
}
},
mounted() {
// //监听元素变化
var erd = elementResizeDetectorMaker();
var that = this;
var leftArea = document.getElementById("leftArea");
var rightArea = document.getElementById("rightArea");
erd.listenTo(leftArea, function(element) {
that.$nextTick(function() {
//使echarts尺寸重置
rightArea.style.width =
"calc(100% - " + leftArea.style.width + " - 17px)";
rightArea.style.height = "100%";
if (
leftArea.style.width.substr(0, leftArea.style.width.length - 2) >= 254
) {
that.showAll = true;
} else {
that.showAll = false;
}
});
});
},
methods: {
// 向有children的节点上增加disabled属性
setDisabled(treeData) {
treeData.forEach(item => {
if (item.childrenlist && item.childrenlist.length) {
item.disabled = true;
this.setDisabled(item.childrenlist);
}
});
},
changetree: function(data, lst) {
// console.log("changetree", data, lst);
// console.log("lst: " + JSON.stringify(lst));
// console.log(lst.checkedKeys.length);
if (lst.checkedKeys.length == 0) {
//这里的treeForm是你el-tree命名的ref的值
this.$refs.tree.setCheckedKeys([data.oneself_code]);
}
},
handleNodeClick(data, checked, node) {
// console.log("handleNodeClick", data, checked, node);
if (checked) {
this.$refs.tree.setCheckedKeys([data.oneself_code]);
}
//重新发请求拿到所有数据
this.resRequest(data.oneself_code);
},
nodeClick(data, self, node) {
// console.log("nodeClick", data, self, node);
//重新发请求拿到所有数据
this.resRequest(data.oneself_code);
},
resRequest(oneself_code) {
// console.log("resRequest", oneself_code);
this.ruleForm.oneself_code = oneself_code;
this.ruleForm.page = 1;
this.getTopData();
this.fetchData();
this.$forceUpdate();
},
getbusinessTypeSelect() {
businessTypeSelect()
.then(res => {
// console.log("传输类型下拉", res);
this.linkList = res.data.transmission_type;
})
.catch(err => {
// console.log("传输类型下拉错误", err);
});
},
getTree() {
businessTree()
.then(res => {
// console.log("左侧树", res);
// this.treeData = res.data.childrenlist;
this.treeData = [res.data];
this.ruleForm.oneself_code = res.data.oneself_code;
this.$nextTick(() => {
// treeBox 元素的ref value 绑定的node-key
this.$refs.tree.setCurrentKey(res.data.oneself_code);
});
this.setDisabled(this.treeData);
this.fetchData();
this.getTopData();
})
.catch(err => {
});
},
getTopData() {
businessTopData({
oneself_code: this.ruleForm.oneself_code
})
.then(res => {
// console.log("顶部栏", res);
this.topData = res.data;
})
.catch(err => {
});
},
reset() {
let obj = {
business_name: "",
business_link: "",
business_company: "",
business_type: "",
page: 1,
page_size: 10,
total: 0
};
this.ruleForm = Object.assign(this.ruleForm, obj);
this.fetchData();
},
fetchData() {
businessList(this.ruleForm)
.then(res => {
// console.log("列表", res);
this.tableData = res.data.list;
this.ruleForm.total = res.data.total;
})
.catch(err => {
});
},
showLogText(row) {
this.$router.push({
path: "businessDetail",
query: {
businessId: row.business_id,
systemNationCode: row.system_nation_code,
systemUidCode: row.system_uid_code
}
});
},
batchExport(data) {
//批量导出
// console.log("批量导出", data);
if (data.data.length <= 0) {
this.$message({
message: "请选择数据后再执行操作",
type: "info"
});
return false;
} else {
let idList = [];
let idString = "";
for (let index = 0; index < data.data.length; index++) {
const element = data.data[index];
idList.push(element.id);
idString = idString + element.id;
if (index + 1 !== data.data.length) {
idString = idString + ",";
}
}
let dataT = {
ids: idList };
let that = this;
dataT.filename = "业务管理";
dataT.search = JSON.stringify(this.ruleForm);
if (this.$refs.commonTable.selectAllFlag) {
//勾选了全部 导出全部
dataT.ids = "all";
} else {
//勾选了部分
dataT.ids = idString;
}
let formData = new FormData();
formData.append("filename", "业务管理");
formData.append("search", JSON.stringify(this.ruleForm));
formData.append("ids", dataT.ids);
axios({
url: `${
window.g.API_URL}/iscdjango/business/export/`,
method: "post",
// data: dataT,
data: formData,
headers: {
"Content-Type": "multipart/form-data",
Authorization: getToken()
}
})
.then(res => {
if (res.data.code == 200) {
let filename = res.data.data;
// let all = `${window.g.API_URL}/upload/${filename}`;
window.open(`${
window.g.API_URL}/iscdjango/media/${
filename}`);
this.$message.success("批量导出成功", 4000);
// localDownloadUtil.blobDownloads(all, filename);
// this.previewData = res.data;
}
})
.catch(err => {
});
}
},
statusChange(val, row) {
// console.log("sad", val, row);
this.$confirm("确定更改状态吗?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
const query = {
change_status: row.business_task_tagging == 1 ? 0 : 1,
id: row.id,
system_uid_code: row.system_uid_code,
business_id: row.business_id,
system_nation_code: row.system_nation_code
};
this.tableLoading = true;
businessChangeStatus(query)
.then(res => {
if (res.code == 200) {
setTimeout(() => {
businessjudgeSuccess(query)
.then(ok => {
// console.log("businessjudgeSuccess", ok);
if (ok.data.status) {
this.$notify({
title: "成功",
message: "执行成功",
type: "success",
duration: 2000
});
this.fetchData();
} else {
this.$notify({
title: "失败",
message: "执行失败",
type: "error",
duration: 2000
});
}
this.tableLoading = false;
})
.catch(err => {
this.tableLoading = false;
});
}, 5000);
} else {
this.$notify({
title: "失败",
message: `${
res.msg}`,
type: "error",
duration: 2000
});
this.tableLoading = false;
}
})
.catch(err => {
this.$notify({
title: "失败",
message: "修改失败，请稍后重试",
type: "error",
duration: 2000
});
this.tableLoading = false;
});
})
.catch(err => {
});
}
}
};
</script>
<style lang="less" scoped>
@fontSize: 1.75rem;
@font-color: #42588c;
.leftArea {
width: 15rem;
overflow-x: hidden !important;
overflow: auto;
background: #ffffff;
border: 1px solid #fafbfc;
box-shadow: 0px 0px 13px 3px rgba(60, 67, 83, 0.1);
.myleftBox {
position: relative;
.headerTitle {
font-size: 1rem;
font-family: PingFang SC;
font-weight: 500;
color: #1182fb;
position: absolute;
top: 1.0625rem;
left: 0.875rem;
}
::v-deep .treeBox {
position: absolute;
top: 3rem;
left: 0.875rem;
.el-tree__empty-block {
min-width: 9rem !important;
}
.el-tree-node {
width: 100vw;
.el-tree-node__label {
width: 8rem;
white-space: nowrap;
overflow: hidden; //文本超出隐藏
text-overflow: ellipsis; //文本超出省略号替代
}
.el-tree-node__content {
height: 100%;
align-items: start;
.myItem {
width: 7rem;
margin-top: 3px;
white-space: nowrap;
overflow: hidden; //文本超出隐藏
text-overflow: ellipsis; //文本超出省略号替代
}
}
}
.el-tree--highlight-current
.el-tree-node.is-current
> .el-tree-node__content {
// 设置颜色
color: #fff;
background: #2d8cf0 !important;
}
.el-tree-node > .el-tree-node__content:hover {
background-color: #c1ddf0;
}
}
}
}
.bussinessBox {
display: flex;
position: relative;
height: 100%;
.resizable {
overflow: auto;
resize: horizontal;
}
.rightArea {
position: absolute;
top: 0;
right: 0rem;
margin-left: 1.0625rem;
padding-right: 1.0625rem;
width: calc(100% - 16.2rem);
overflow-x: hidden;
display: flex;
flex-direction: column;
.topBox {
display: flex;
.item1 {
width: 38.125rem;
height: 8.75rem;
background: #ffffff;
border: 1px solid #adc6d6;
border-radius: 4px;
margin-right: 1.0625rem;
display: flex;
position: relative;
.imgBox {
width: 5.625rem;
height: 4.75rem;
position: absolute;
top: 2rem;
left: 1.5rem;
img {
width: 5.625rem;
height: 4.75rem;
}
}
.partBox {
position: absolute;
top: 2.2rem;
left: 9rem;
display: flex;
width: 28.5rem;
// border: 1px solid sandybrown;
.part {
display: flex;
flex-direction: column;
flex: 1;
.num {
font-family: DIN;
font-weight: 400;
color: @font-color;
}
&:nth-child(1) {
font-size: 2.375rem;
}
&:nth-child(2) {
font-size: @fontSize;
.num {
margin-top: 6px;
margin-bottom: 8px;
}
}
&:nth-child(3) {
font-size: @fontSize;
.num {
margin-top: 6px;
margin-bottom: 8px;
}
}
.tips {
font-size: 0.875rem;
font-family: PingFang SC;
font-weight: 400;
color: @font-color;
}
}
}
.rightSanBox {
position: absolute;
bottom: 4px;
right: 4px;
width: 0.875rem;
height: 0.875rem;
img {
width: 0.875rem;
height: 0.875rem;
}
}
}
.item2 {
flex: 1;
height: 8.75rem;
background: #ffffff;
border: 1px solid #adc6d6;
position: relative;
border-radius: 4px;
.myBusinessDetail {
display: flex;
// border: 1px solid red;
margin-top: 2.25rem;
.childrenBox {
flex: 1;
display: flex;
flex-direction: column;
padding-left: 2.25rem;
.myNum {
font-family: DIN;
font-weight: 400;
color: @font-color;
font-size: @fontSize;
margin-top: 6px;
margin-bottom: 8px;
}
.myTips {
font-size: 0.875rem;
font-family: PingFang SC;
font-weight: 400;
color: @font-color;
}
}
}
.rightSanBox {
position: absolute;
bottom: 4px;
right: 4px;
width: 0.875rem;
height: 0.875rem;
img {
width: 0.875rem;
height: 0.875rem;
}
}
}
}
.bottomBox {
display: flex;
flex-direction: column;
.searchBox {
height: 6rem;
margin: 1.0625rem 0;
background: #ffffff;
// border: 1px solid red;
padding-top: 1.5rem;
padding-left: 1.5rem;
}
.resultBox {
height: 44rem;
background: #ffffff;
// border: 1px solid red;
.cardWhite {
background-color: #fff;
padding: 20px;
// width: 93.75rem;
max-width: 89rem;
}
}
}
}
}
//隐藏右侧纵向滚动条
// div::-webkit-scrollbar {
// width: 0;
// }
::v-deep .ruleForm .firstElRow {
height: 3.125rem !important;
}
/* 隐藏掉el-tree中有disabled属性的框框 */
::v-deep .el-checkbox__input.is-disabled {
display: none;
}
</style>