el-tree默认选中的背景色是白色,有时候我们需求是一进入到页面就要发请求,并且设置默认选中的背景色改为蓝色,字体色为白色,然后选中的项也是背景色改为蓝色,字体色为白色,那这个时候我们可以给el-tree通过添加属性 highlight-current设为高亮,然后通过以下样式改变选中的样式:
.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;
}
通过this.$refs.tree.setCurrentKey(res.data.oneself_code)设置为默认选中,getTree是methods里的方法,在created里直接调用此方法然后发请求获取树对应的数据:
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 => {
});
},
页面完整代码如下:
<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>