101 lines
2.3 KiB
Vue
101 lines
2.3 KiB
Vue
<template>
|
|
<basic-container v-loading="loading">
|
|
<el-input
|
|
ref="search"
|
|
size="small"
|
|
prefix-icon="el-icon-search"
|
|
placeholder="搜索公司"
|
|
v-model="query.companyName"
|
|
clearable
|
|
></el-input>
|
|
<div class="company-tree" ref="tree" :style="{height:height+'px','margin-top':'5px'}">
|
|
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
|
|
</div>
|
|
<el-pagination
|
|
ref="pagination"
|
|
layout="prev, pager, next"
|
|
:total="page.total"
|
|
:page-size="page.pageSize"
|
|
@current-change="currentChange"
|
|
></el-pagination>
|
|
</basic-container>
|
|
</template>
|
|
|
|
<script>
|
|
import { getMenuList } from "@/api/manage/company";
|
|
import _ from "lodash";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
loading: true,
|
|
height: 100,
|
|
data: [],
|
|
page: {
|
|
pageSize: 30,
|
|
currentPage: 1,
|
|
total: 0,
|
|
},
|
|
defaultProps: {
|
|
children: "children",
|
|
label: "companyName",
|
|
},
|
|
query: {
|
|
companyName: null,
|
|
},
|
|
};
|
|
},
|
|
mounted() {
|
|
this.onLoad(this.page, this.query);
|
|
this.getTreeHeight();
|
|
},
|
|
methods: {
|
|
handleNodeClick(data, vNode, node) {
|
|
this.$emit("node-click", { data, vNode, node });
|
|
},
|
|
onLoad(page, param) {
|
|
getMenuList(page.currentPage, page.pageSize, param)
|
|
.then((resp) => {
|
|
const data = resp.data.data;
|
|
this.page.total = data.total;
|
|
this.data = data.records;
|
|
this.loading = false;
|
|
})
|
|
.catch(() => {
|
|
this.lloading = false;
|
|
});
|
|
},
|
|
queryChange: _.debounce(function () {
|
|
this.onLoad(this.page, this.query);
|
|
}, 1000),
|
|
currentChange(current) {
|
|
this.page.currentPage = current;
|
|
this.onLoad(this.page, this.query);
|
|
},
|
|
getTreeHeight() {
|
|
const pageStyle = this.$refs.pagination.$el;
|
|
const searchStyle = this.$refs.search.$el;
|
|
const treeStyle = this.$refs.tree;
|
|
this.height =
|
|
document.documentElement.clientHeight -
|
|
pageStyle.offsetTop -
|
|
searchStyle.offsetTop -
|
|
treeStyle.offsetTop -
|
|
10;
|
|
},
|
|
},
|
|
watch: {
|
|
"query.companyName": function () {
|
|
this.page.currentPage = 1;
|
|
this.queryChange();
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.company-tree {
|
|
overflow: auto;
|
|
}
|
|
</style>
|