城阳pc工作端前端代码
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1082 lines
31 KiB

4 years ago
<template>
<div class="g-main">
<div :style="{ height: rowHeight }" class="div_tree">
<el-input
placeholder="输入关键字进行过滤"
v-model="filterText"
@keydown.native.enter="handleChangeSerch()"
>
</el-input>
<el-scrollbar :style="{ height: treeHeight }" class="scrollar">
<el-tree
ref="ref_tree"
v-loading="treeLoading"
class="filter_tree"
:data="treeData"
:props="defaultProps"
:highlight-current="true"
node-key="id"
:expand-on-click-node="false"
:filter-node-method="filterNode"
@node-click="handleNodeClick"
lazy
auto-expand-parent
:default-expanded-keys="autoOpenArr"
:load="lazyLoadTree"
>
<span slot-scope="{ node, data }" class="custom-tree-node">
<img
2 years ago
v-if="showIcons(data)"
src="@/assets/images/index/abnormal.png"
style="
height: 14px;
width: 14px;
margin-right: 5px;
margin-top: -3px;
"
/>
<!-- <span v-if="data.level==='building'&&!data.showIcon"
style="padding-left:20px;">{{ ' ' }}</span> -->
2 years ago
<!-- <span v-if="data.showIcon" :id="data.id"
>{{ data.label + "(" }}
<span style="color: red">{{ data.showNum }}</span>
<span>{{ ")" }}</span>
2 years ago
</span> -->
<span :id="data.id">{{ data.showName }}</span>
</span>
</el-tree>
</el-scrollbar>
</div>
<div class="div_left">
<div class="m-search" style="flex-direction: column;">
<section
:class="boxHeight ? 'm-form-box-height' : 'm-form-box-height-auto'"
>
<el-form
:inline="true"
class="communityHeight"
ref="ref_searchform"
:label-width="'100px'"
>
<el-form-item label="房主姓名" prop="ownerName">
<el-input
v-model="ownerName"
class="u-item-width-normal"
size="small"
clearable
placeholder="请输入内容"
>
</el-input>
</el-form-item>
<el-form-item label="联系电话" prop="ownerPhone">
<el-input
v-model="ownerPhone"
class="u-item-width-normal"
size="small"
clearable
2 years ago
placeholder="请输入联系电话"
>
</el-input>
</el-form-item>
<el-form-item label="房屋状态" prop="rentFlag">
<el-select
class="u-item-width-normal"
v-model="rentFlag"
placeholder="请选择"
size="small"
clearable
>
<el-option
v-for="item in rentList"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="房屋用途" prop="purpose">
<el-select
v-model="purpose"
class="u-item-width-normal"
placeholder="请选择"
size="small"
clearable
>
<el-option
v-for="item in purposeArr"
:key="item.dictValue"
:label="item.dictName"
:value="item.dictValue"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="更新时间" prop="updateStartDate">
<el-date-picker
v-model="updateStartDate"
:picker-options="startPickerOptions"
class="u-item-width-daterange"
size="small"
type="date"
value-format="yyyy-MM-dd HH:mm:ss"
value="yyyy-MM-dd"
placeholder="开始时间"
>
</el-date-picker>
<span class="u-data-tag"></span>
<el-date-picker
v-model="updateEndDate"
:picker-options="endPickerOptions"
class="u-item-width-daterange u-data-tag"
size="small"
type="date"
value-format="yyyy-MM-dd HH:mm:ss"
value="yyyy-MM-dd"
placeholder="结束时间"
>
</el-date-picker>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input
v-model="remark"
class="u-item-width-normal"
size="small"
clearable
placeholder="请输入备注"
>
</el-input>
</el-form-item>
<el-form-item label="所属房屋" prop="neighborHoodId">
<el-select
v-model.trim="neighborHoodId"
:disabled="vDisabled"
placeholder="小区"
filterable
size="small"
clearable
class="u-item-width-communitycascader"
@change="handleChangeV"
>
<!-- <div>
<el-input
placeholder="请输入"
v-model="searchAgencyTxt"
@keyup.enter.native="handleChangeSerchAgency(searchAgencyTxt)"
>
</el-input> -->
<!-- </div> -->
<el-option
v-for="item in optionsV"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<el-select
v-model.trim="buildingId"
placeholder="楼号"
:disabled="!neighborHoodId || bDisabled"
size="small"
clearable
class="u-item-width-buildcascader"
style="margin-left: 5px"
@change="handleChangeB"
>
<el-option
v-for="item in optionsB"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<el-select
v-model.trim="buildingUnitId"
placeholder="单元"
size="small"
:disabled="!buildingId"
clearable
class="u-item-width-buildcascader"
style="margin-left: 5px"
@change="handleChangeD"
>
<el-option
v-for="item in optionsD"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<el-select
v-model.trim="houseId"
placeholder="房号"
:disabled="!buildingUnitId"
size="small"
clearable
class="u-item-width-buildcascader"
style="margin-left: 5px"
>
<el-option
v-for="item in optionsH"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<!-- </div> -->
</el-form>
</section>
<el-row>
<el-col :span="24" align="right">
<el-button
style="margin-left: 10px"
size="small"
2 years ago
type="primary"
@click="handleSearch"
>查询</el-button
>
<el-button
size="small"
class="diy-button--white"
@click="resetSearch"
>重置</el-button
>
<el-button
style="margin:0 6px 0 10px"
size="small"
class="div-table-button--blue"
type="text"
@click="boxHeight = !boxHeight"
>{{ boxHeight ? "展开" : "收起"
}}<i
:class="boxHeight ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"
></i
></el-button>
</el-col>
</el-row>
</div>
<div class="">
<build-table
v-if="selTreeObj.level === 'neighborHood' && !showRoomTable"
ref="ref_neighTable"
:staffAgencyId="staffAgencyId"
:showImportBtn="showImportBtn"
:ownerName="ownerName"
:ownerPhone="ownerPhone"
:rentFlag="rentFlag"
:purpose="purpose"
:remark="remark"
:updateStartDate="updateStartDate"
:updateEndDate="updateEndDate"
:searchHeight="searchHeight"
@toNextLevel="toNextLevel"
@refreshTree="refreshTree"
></build-table>
<room-table
v-if="showRoomTable || selTreeObj.level === 'building'"
:staffAgencyId="staffAgencyId"
:showImportBtn="showImportBtn"
:ownerName="ownerName"
:ownerPhone="ownerPhone"
:rentFlag="rentFlag"
:purpose="purpose"
:neighborHoodId="neighborHoodId"
:buildingId="buildingId"
:buildingUnitId="buildingUnitId"
:houseId="houseId"
:remark="remark"
:updateStartDate="updateStartDate"
:updateEndDate="updateEndDate"
ref="ref_buildingTable"
@refreshTree="refreshTree"
></room-table>
<community-table
v-if="
selTreeObj.level !== 'building' &&
selTreeObj.level !== 'neighborHood' &&
!showRoomTable
"
@toNextLevel="toNextLevel"
:staffAgencyId="staffAgencyId"
:ownerName="ownerName"
:ownerPhone="ownerPhone"
:rentFlag="rentFlag"
:purpose="purpose"
:remark="remark"
:updateStartDate="updateStartDate"
:updateEndDate="updateEndDate"
ref="ref_communityTable"
@refreshTree="refreshTree"
></community-table>
</div>
</div>
</div>
</template>
3 years ago
<script>
import CDialog from "@c/CDialog";
import communityTable from "./communityTable";
import buildTable from "./buildTable";
import roomTable from "./roomTable";
import { requestPost, requestGet } from "@/js/dai/request";
import { mapGetters } from "vuex";
import { Loading } from "element-ui"; // 引入Loading服务
import nextTick from "dai-js/tools/nextTick";
import debounce from "lodash/debounce";
import deepClone from "@/utils/deepClone.js";
let loading; // 加载动画
export default {
data() {
let endDisabledDate = (time) => {
//这个关键属性我们一定要写在data的里面并且return的外面,这是动态改变区间的关键
let nowData = Date.now();
if (this.updateStartDate) {
let startTime = new Date(this.updateStartDate);
return (
time.getTime() > nowData ||
time.getTime() < startTime ||
time.getTime() === startTime
);
} else {
return time.getTime() > nowData;
}
};
// let endDisabledDate = (time) => {
// //这个关键属性我们一定要写在data的里面并且return的外面,这是动态改变区间的关键
// let nowData = Date.now();
// // if (this.updateStartDate) {
// // let startTime = new Date(this.updateStartDate);
// // return (
// // time.getTime() > nowData ||
// // time.getTime() < startTime ||
// // time.getTime() === startTime
// // );
// // } else {
// // return time.getTime() > nowData;
// // }
// if (this.updateStartDate) {
// let startTime = new Date(this.updateStartDate);
// return (
// time.getTime() > nowData ||
// time.getTime() < startTime ||
// time.getTime() === startTime
// );
// } else {
// return time.getTime() > nowData;
// }
// };
let startDisabledDate = (time) => {
//这个关键属性我们一定要写在data的里面并且return的外面,这是动态改变区间的关键
let nowData = Date.now();
return time.getTime() > nowData;
};
return {
autoOpenArr: [],
boxHeight: true,
searchHeight: 190,
filterText: "",
treeLoading: true,
treeData: [],
searchAgencyTxt: "",
openNodes: [],
defaultProps: {
children: "children",
label: "showName",
isLeaf: "isLeaf",
},
selTreeObj: {},
centerPoint: [],
staffAgencyId: localStorage.getItem("agencyId"),
showImportBtn: false,
rentList: [
{
value: "1",
label: "出租",
},
{
value: "2",
label: "闲置",
},
{
value: "0",
label: "自住",
},
{
value: "3",
label: "未出售",
},
],
ownerName: "",
ownerPhone: "",
rentFlag: "",
purpose: "",
remark: "",
updateStartDate: "",
updateEndDate: "",
showRoomTable: false,
selObj: {},
purposeArr: [
{ dictValue: "1", dictName: "住宅" },
{ dictValue: "2", dictName: "商业" },
{ dictValue: "3", dictName: "办公" },
{ dictValue: "4", dictName: "工业" },
{ dictValue: "5", dictName: "仓储" },
{ dictValue: "6", dictName: "商住混用" },
{ dictValue: "7", dictName: "其他" },
],
endPickerOptions: {
disabledDate: endDisabledDate,
},
startPickerOptions: {
disabledDate: startDisabledDate,
},
optionsV: [],
optionsB: [],
optionsH: [],
optionsD: [],
neighborHoodId: "",
buildingId: "",
buildingUnitId: "",
houseId: "",
selGridId: "",
selAgencyId: "",
vDisabled: false,
bDisabled: false,
};
},
components: {
CDialog,
communityTable,
buildTable,
roomTable,
},
async mounted() {
this.searchHeight = this.$refs.ref_searchform.offsetHeight;
this.treeLoading = true;
await this.loadOrgData();
await this.loadTree();
// await this.loadOpenNode()
this.getValiheList("", "");
await this.$refs["ref_communityTable"].loadTable(true, this.selTreeObj);
if (this.treeData.length > 0) {
this.$nextTick(() => {
// ref_tree 元素的ref value 绑定的node-key
this.$refs.ref_tree.setCurrentKey(this.treeData[0].id);
});
}
this.treeLoading = false;
},
computed: {
rowHeight() {
return this.$store.state.inIframe
? this.clientHeight - 140 + this.iframeHeight + "px"
: this.clientHeight - 140 + "px";
},
treeHeight() {
return this.$store.state.inIframe
? this.clientHeight - 245 + this.iframeHeight + "px"
: this.clientHeight - 245 + "px";
},
...mapGetters(["clientHeight", "iframeHeight"]),
2 years ago
showIcons(){
return function(data){
if(data.level=='building'){
let arr = data.showNum.split('/')
console.log(arr);
if(arr[0] !== arr[1]){
return true
}else{
return false
}
}
}
},
},
watch: {
// filterText (val) {
// this.$refs.ref_tree.filter(val);
// },
},
methods: {
handleChangeV(val) {
this.buildingId = "";
this.buildingUnitId = "";
this.houseId = "";
this.getBuildList();
// this.getUniList();
// this.getHouseList();
},
// handleChangeSerchAgency(val){
// console.log(val);
// // this.optionsV = this.optionsV.filter(item=>item.label == val)
// this.optionsV.forEach( function(item){
// if(item.label==val){
// console.log(1);
// }
// })
// console.log(this.optionsV );
// },
handleChangeB(val) {
this.buildingUnitId = "";
this.houseId = "";
this.getUniList();
// this.getHouseList();
},
handleChangeD() {
this.houseId = "";
this.getHouseList();
},
async lazyLoadTree(node, resolve) {
console.log(node);
const url = `/actual/base/communityBuilding/tree/nextTreeNode?id=${node.data.id}&level=${node.data.level}`;
const { data, code, msg } = await requestGet(url);
if (code === 0) {
data.forEach((element) => {
if (element.level === "building") {
element.isLeaf = true;
}
});
resolve(data);
} else {
this.$message.error(msg);
}
// }
},
async getValiheList() {
const { user } = this.$store.state;
if (!this.selGridId) {
this.selAgencyId = this.selAgencyId ? this.selAgencyId : user.agencyId;
}
const url = "/actual/base/communityQuarters/listQuartersOptions";
// const url = "http://yapi.elinkservice.cn/mock/245/epmetuser/epidemicPrevention/page"
let params = {
gridId: this.selGridId,
agencyId: this.selAgencyId,
isPage: false,
};
const { data, code, msg } = await requestPost(url, params);
if (code === 0) {
this.optionsV = data;
this.neighborHoodId = "";
this.buildingId = "";
this.buildingUnitId = "";
this.houseId = "";
} else {
this.$message.error(msg);
}
},
async getBuildList() {
const url = "/actual/base/communityBuilding/buildingoption";
let params = {
quartersId: this.neighborHoodId,
};
const { data, code, msg } = await requestPost(url, params);
if (code === 0) {
this.optionsB = data;
this.buildingId = "";
this.buildingUnitId = "";
this.houseId = "";
} else {
this.$message.error(msg);
}
},
//回车搜索组织
async handleChangeSerch() {
this.startLoading();
this.$refs.ref_tree.$data.store.lazy = !this.filterText;
if (this.filterText.length > 0 && this.filterText != "") {
const url = `/actual/base/communityBuilding/tree/search?keyword=${this.filterText}`;
const { data, code, msg } = await requestGet(url);
if (data[0].children.length > 0) {
this.treeData = data;
for (let i in this.treeData[0].children) {
this.autoOpenArr.push(
this.treeData[0].id,
this.treeData[0].children[i].id,
this.treeData[0].children[0].children[0].id
);
}
} else {
this.treeData = [];
this.$message.error("暂未找到!");
}
} else {
this.treeData = [];
this.autoOpenArr = [];
this.loadTree();
}
this.endLoading();
},
startLoading() {
loading = Loading.service({
lock: true, // 是否锁定
text: "正在加载……", // 加载中需要显示的文字
background: "rgba(0,0,0,.7)", // 背景颜色
});
},
// 结束加载动画
endLoading() {
// clearTimeout(timer);
if (loading) {
loading.close();
}
},
async getUniList() {
const url = "/actual/base/communityBuildingUnit/unitoption";
// const url = "http://yapi.elinkservice.cn/mock/245/epmetuser/epidemicPrevention/page"
let params = {
buildingId: this.buildingId,
};
const { data, code, msg } = await requestPost(url, params);
if (code === 0) {
this.optionsD = data;
this.buildingUnitId = "";
this.houseId = "";
} else {
this.$message.error(msg);
}
},
getHouseList() {
let params = {
buildingId: this.buildingId,
unitId: this.buildingUnitId,
};
this.$http
.post("/actual/base/communityHouse/houseoption", params)
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg);
} else {
this.optionsH = res.data;
this.houseId = "";
}
})
.catch(() => {
return this.$message.error("网络错误");
});
},
handleSearch() {
// if (this.ownerName || this.ownerPhone || this.rentFlag || this.purpose || this.remark) {
this.showRoomTable = true;
this.$nextTick(() => {
this.$refs["ref_buildingTable"].loadTable("search", this.selTreeObj);
});
// } else {
// this.$message.warning('请输入查询条件')
// }
},
//重置搜索条件
resetSearch() {
this.ownerName = "";
this.ownerPhone = "";
this.rentFlag = "";
this.purpose = "";
this.remark = "";
this.updateStartDate = "";
this.updateEndDate = "";
this.neighborHoodId = "";
this.buildingId = "";
this.buildingUnitId = "";
this.houseId = "";
this.pageSize = 10;
this.pageNo = 1;
// this.handleNodeClick(this.selObj)
this.$nextTick(()=>{
this.$refs.ref_buildingTable.loadTable('search',this.selObj)
})
},
async loadOpenNode() {
const url = "/gov/org/building/tree-ids";
let params = {};
const { data, code, msg } = await requestPost(url, params);
if (code === 0) {
this.openNodes = data;
} else {
this.$message.error(msg);
}
},
async loadTree(isRefresh) {
const url = "/actual/base/communityBuilding/tree/initTree";
const { data, code, msg } = await requestGet(url);
this.handleNodeClick(data);
if (code === 0) {
this.treeData = [];
this.treeData.push(data);
if (!isRefresh && data) {
this.selTreeObj = data;
if (!this.selTreeObj.latitude) {
this.selTreeObj.latitude = this.centerPoint[0];
}
if (!this.selTreeObj.longitude) {
this.selTreeObj.longitude = this.centerPoint[1];
}
}
} else {
this.$message.error(msg);
}
},
handleTreeData(treeData) {
for (let i in treeData) {
treeData[i].showIcon = false;
if (treeData[i].level === "building") {
let array = treeData[i].showNum.split("/");
if (array.length === 2) {
let a = parseInt(array[0]);
let b = parseInt(array[1]);
treeData[i].showIcon = a < b;
}
}
if (treeData[i].children) {
//存在子节点就递归
this.handleTreeData(treeData[i].children);
}
}
},
//加载组织数据
async loadOrgData() {
const url = "/gov/org/agency/maporg";
// const url = "http://yapi.elinkservice.cn/mock/245/gov/org/agency/maporg"
let params = {};
const { data, code, msg } = await requestPost(url, params);
if (code === 0) {
this.centerPoint = [];
this.centerPoint.push(data.latitude);
this.centerPoint.push(data.longitude);
} else {
this.$message.error(msg);
}
},
async handleNodeClick(obj) {
this.ownerName = "";
this.ownerPhone = "";
this.rentFlag = "";
this.purpose = "";
this.remark = "";
this.updateStartDate = "";
this.updateEndDate = "";
this.showRoomTable = false;
this.selObj = JSON.parse(JSON.stringify(obj));
this.getTreeObj(obj);
await nextTick(1000);
this.vDisabled = false;
this.bDisabled = false;
if (obj.level === "building") {
//点击楼栋
setTimeout(() => {
this.$refs["ref_buildingTable"].loadTable("tree", this.selTreeObj);
}, 100);
this.selAgencyId = "";
this.selGridId = "";
await this.getValiheList();
this.neighborHoodId = this.selTreeObj.pid;
await this.getBuildList();
this.buildingId = this.selTreeObj.id;
await this.getUniList();
this.vDisabled = true;
this.bDisabled = true;
} else if (obj.level === "neighborHood") {
//点击小区
this.$refs["ref_neighTable"].loadTable(true, this.selTreeObj);
this.selAgencyId = "";
this.selGridId = "";
await this.getValiheList();
this.neighborHoodId = this.selTreeObj.id;
await this.getBuildList();
this.vDisabled = true;
} else {
this.$refs["ref_communityTable"].loadTable(true, this.selTreeObj);
if (obj.level === "grid") {
this.selAgencyId = "";
this.selGridId = this.selTreeObj.id;
} else {
this.selAgencyId = this.selTreeObj.id;
this.selGridId = "";
}
this.getValiheList("", "");
}
},
//添加小区结束
async refreshTree() {
this.treeLoading = true;
await this.loadTree(this.selTreeObj.id);
this.$nextTick(() => {
// ref_tree 元素的ref value 绑定的node-key
this.$refs.ref_tree.setCurrentKey(this.selTreeObj.id);
});
this.treeLoading = false;
},
//进入下一级
async toNextLevel(row, level) {
console.log(row, "row");
console.log(level, "level");
this.autoOpenArr = [];
// console.log(this.$refs.ref_tree);
const { agencyId, gridId, neighborHoodId, propertyId } = row;
let arr = [agencyId, gridId, neighborHoodId, propertyId];
this.autoOpenArr = arr;
console.log(this.autoOpenArr, "默认展开数组");
// if (level === 'community') {
// setTimeout(()=>{
// nextTick(1000)
// this.selTreeObj = this.$refs.ref_tree.getNode(row.neighborHoodId).data || {}
// },50)
// this.autoOpenArr.push(this.selTreeObj.id)
// } else {
// this.selTreeObj = this.$refs.ref_tree.getNode(row.buildingId).data
// }
console.log(this.selTreeObj, "123123123");
this.handleNodeClick(this.selTreeObj);
this.$nextTick(() => {
// ref_tree 元素的ref value 绑定的node-key
this.$refs.ref_tree.setCurrentKey(this.selTreeObj.id);
});
const node = document.getElementById(this.selTreeObj.id); // 通过Id获取到对应的dom元素
setTimeout(() => {
if (node) {
this.$nextTick(() => {
node.scrollIntoView({ block: "center" }); // 通过scrollIntoView方法将对应的dom元素定位到可见区域 【block: 'center'】这个属性是在垂直方向居中显示
});
}
}, 100);
},
//解析树数据
getTreeObj(obj) {
// 树接口:
// 组织:组织id、组织名称、type、经度、纬度
// 小区:小区id、小区名称、type、所属网格id、所属网格名称、所属组织id、所属组织名称、经度、纬度
// 楼:楼id、楼名称、type、所属小区id、所属小区名称
if (obj.level === "building") {
//点击楼栋
let neighborHoodNode = this.$refs.ref_tree.getNode(obj.pid); //所属小区
let gridNode = this.$refs.ref_tree.getNode(neighborHoodNode.data.pid); //所属网格
let agencyNode = this.$refs.ref_tree.getNode(gridNode.data.pid); //所属社区
obj.agencyId = agencyNode.data.id;
obj.agencyName = agencyNode.data.label;
obj.gridId = gridNode.data.id;
obj.gridName = gridNode.data.label;
obj.neighborHoodId = neighborHoodNode.data.id;
obj.neighborHoodName = neighborHoodNode.data.label;
if (obj.agencyId === this.staffAgencyId) {
this.showImportBtn = true;
} else {
this.showImportBtn = false;
}
} else if (obj.level === "neighborHood") {
//点击小区
let gridNode = this.$refs.ref_tree.getNode(obj.pid);
let agencyNode = this.$refs.ref_tree.getNode(gridNode.data.pid);
obj.gridId = gridNode.data.id;
obj.gridName = gridNode.data.label;
obj.agencyId = agencyNode.data.id;
obj.agencyName = agencyNode.data.label;
if (obj.agencyId === this.staffAgencyId) {
this.showImportBtn = true;
} else {
this.showImportBtn = false;
}
} else {
}
if (!obj.latitude) {
obj.latitude = this.centerPoint[0];
}
if (!obj.longitude) {
obj.longitude = this.centerPoint[1];
}
this.selTreeObj = obj;
console.log("selTreeObj", this.selTreeObj);
},
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
// 开启加载动画
startLoading() {
loading = Loading.service({
lock: true, // 是否锁定
text: "正在加载……", // 加载中需要显示的文字
background: "rgba(0,0,0,.7)", // 背景颜色
});
},
// 结束加载动画
endLoading() {
// clearTimeout(timer);
if (loading) {
loading.close();
}
},
},
};
</script>
<style lang="scss" scoped>
@import "@/assets/scss/modules/visual/communityManage.scss";
@import "@/assets/scss/modules/management/list-main.scss";
4 years ago
</style>
3 years ago
<style lang="scss" scoped>
.m-search ::v-deep .el-row {
margin-right: 0;
}
.g-main {
display: flex;
}
.scrollar {
margin-top: 30px;
/deep/
.el-tree--highlight-current
.el-tree-node.is-current
> .el-tree-node__content {
background: #e6f0ff;
border-radius: 2px;
}
/deep/ .el-tree-node:focus > .el-tree-node__content {
color: #0056d6;
// background-color: #e6f0ff;
}
// /deep/ .el-tree-node__expand-icon {
// color: #0043c8;
// border: 1px solid #e1ecff;
// background-color: #e1ecff;
// padding: 0px;
// margin-right: 8px;
// font-size: 9px;
// }
/deep/.el-tree {
flex: 1;
.el-tree-node {
margin-left: 2px;
}
//原有的箭头 去掉
// .el-icon svg {
// display: none;
// height: 0;
// width: 0;
// }
//引入图标的位置
// .el-tree-node__expand-icon {
// // position: absolute;
// // left: 2px;
// // 图标是否旋转,如果是箭头类型的,可以设置旋转90度。
// .expanded {
// transform: rotate(90deg);
// }
// // 未展开的节点
// &:before {
// // content: "\008B";
// // content: "\008B";
// font-size: 12px;
// color: #0043c8;
// }
// }
// 叶子节点(不显示图标)
.is-leaf.el-tree-node__expand-icon::before {
// display: none;
// background: none !important;
// border: 0px;
// content: "";
// width: 18px;
// height: 18px;
}
}
}
.div_tree {
margin: 7px 8px 7px 7px;
width: 30%;
max-width: 304px;
min-width: 240px;
/deep/ .el-scrollbar__wrap {
overflow-x: hidden !important;
}
//搜索输入框样式
/deep/ .el-input--medium .el-input__inner {
height: 32px;
background: rgba(0, 0, 0, 0.05);
border-radius: 4px;
}
flex: 0 0 280px;
background: #ffffff;
box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.08),
0px 3px 6px -4px rgba(0, 0, 0, 0.12);
// border-radius: 5px;
padding: 24px 15px;
overflow-y: hidden;
}
3 years ago
.filter_tree {
overflow-x: auto;
// background-color: #f6f6f6;
margin-top: 5px;
}
.div_left {
// flex: 1;
width: calc(100% - 300px);
}
3 years ago
</style>