<template>
|
<div>
|
<div class="departmentChoose" style="display: flex;">
|
<!-- <Input-->
|
<!-- v-model="departmentTitle"-->
|
<!-- readonly-->
|
<!-- :size="size"-->
|
<!-- :disabled="disabled"-->
|
<!-- :prefix="prefix"-->
|
<!-- :suffix="suffix"-->
|
<!-- style="margin-right: 10px"-->
|
<!-- :placeholder="placeholder"-->
|
<!-- :clearable="clearable"-->
|
<!-- @on-clear="clearSelect"-->
|
<!-- />-->
|
<treeselect v-model="searchKey"
|
:multiple="multiple"
|
:options="menuOptions"
|
:normalizer="normalizer"
|
:show-count="true"
|
placeholder="选择上级菜单"
|
/>
|
<!-- <Poptip-->
|
<!-- transfer-->
|
<!-- trigger="click"-->
|
<!-- placement="right"-->
|
<!-- title="选择部门"-->
|
<!-- width="250"-->
|
<!-- >-->
|
<!-- <Button-->
|
<!-- :size="size"-->
|
<!-- :disabled="disabled"-->
|
<!-- :icon="icon"-->
|
<!-- :type="type"-->
|
<!-- :shape="shape"-->
|
<!-- :ghost="ghost"-->
|
<!-- >{{ text }}</Button-->
|
<!-- >-->
|
<!-- <div slot="content">-->
|
<!-- <Input-->
|
<!-- v-model="searchKey"-->
|
<!-- suffix="ios-search"-->
|
<!-- @on-change="searchDep"-->
|
<!-- placeholder="输入部门名搜索"-->
|
<!-- clearable-->
|
<!-- />-->
|
<!-- <div class="dep-tree-bar">-->
|
<!-- <VTree-->
|
<!-- :data="dataDep"-->
|
<!-- :load-data="loadData"-->
|
<!-- @on-select-change="selectTree"-->
|
<!-- :multiple="multiple"-->
|
<!-- ></VTree>-->
|
<!-- <Spin size="large" fix v-if="depLoading"></Spin>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- </Poptip>-->
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { Tree } from 'view-design'
|
import { initDepartment, loadDepartment, searchDepartment } from "@/api/admin/dept";
|
import {fetchTree} from '@/api/admin/dept'
|
import Treeselect from "@riophae/vue-treeselect"
|
import "@riophae/vue-treeselect/dist/vue-treeselect.css"
|
export default {
|
name: "departmentTreeChoose",
|
props: {
|
multiple:{
|
type:Boolean,
|
default:false,
|
},
|
text: {
|
type: String,
|
default: "选择部门",
|
},
|
icon: {
|
type: String,
|
default: "md-list",
|
},
|
disabled: {
|
type: Boolean,
|
default: false,
|
},
|
size: String,
|
type: String,
|
shape: String,
|
ghost: {
|
type: Boolean,
|
default: false,
|
},
|
prefix: String,
|
suffix: String,
|
multiple: {
|
type: Boolean,
|
default: false,
|
},
|
clearable: {
|
type: Boolean,
|
default: true,
|
},
|
placeholder: {
|
type: String,
|
default: "点击选择部门",
|
},
|
},
|
components:{Tree,Treeselect},
|
data() {
|
return {
|
menuOptions:[],
|
depLoading: false,
|
departmentTitle: "",
|
searchKey: [],
|
dataDep: [],
|
selectDep: [],
|
departmentId: [],
|
};
|
},
|
methods: {
|
getTreeselect() {
|
fetchTree().then(res => {
|
this.menuOptions = res.data.data
|
})
|
},
|
/** 转换菜单数据结构 */
|
normalizer(node) {
|
if (node.children && !node.children.length) {
|
delete node.children;
|
}
|
return {
|
id: node.id,
|
label: node.name,
|
children: node.children
|
};
|
},
|
initDepartmentData() {
|
initDepartment().then((res) => {
|
if (res.data.code==0) {
|
res.data.data.forEach(function (e) {
|
if (e.isParent) {
|
e.loading = false;
|
e.children = [];
|
}
|
if (e.status == -1) {
|
e.title = "[已禁用] " + e.title;
|
e.disabled = true;
|
}
|
e.isParent = true;
|
// e.loading = true;
|
e.title = e.name;
|
e.id = e.deptId;
|
});
|
this.dataDep = res.data.data;
|
console.log(this.dataDep)
|
}
|
});
|
},
|
loadData(item, callback) {
|
loadDepartment(item.id).then((res) => {
|
if (res.data.code==0) {
|
res.data.data.forEach(function (e) {
|
if (e.isParent) {
|
e.loading = false;
|
e.children = [];
|
}
|
if (e.status == -1) {
|
e.title = "[已禁用] " + e.title;
|
e.disabled = true;
|
}
|
});
|
callback(res.data.data);
|
}
|
});
|
},
|
searchDep() {
|
// 搜索部门
|
if (this.searchKey) {
|
this.depLoading = true;
|
searchDepartment({ title: this.searchKey }).then((res) => {
|
this.depLoading = false;
|
if (res.data.code==0) {
|
res.data.data.forEach(function (e) {
|
if (e.status == -1) {
|
e.title = "[已禁用] " + e.title;
|
e.disabled = true;
|
}
|
});
|
this.dataDep = res.data;
|
}
|
});
|
} else {
|
this.initDepartmentData();
|
}
|
},
|
selectTree(v) {
|
let ids = [],
|
title = "";
|
v.forEach((e) => {
|
ids.push(e.id);
|
if (title == "") {
|
title = e.title;
|
} else {
|
title = title + "、" + e.title;
|
}
|
});
|
this.departmentId = ids;
|
this.departmentTitle = title;
|
if (this.multiple) {
|
this.$emit("on-change", this.departmentId);
|
} else {
|
this.$emit("on-change", this.departmentId[0]);
|
}
|
},
|
clearSelect() {
|
this.departmentId = [];
|
this.departmentTitle = "";
|
this.initDepartmentData();
|
if (this.multiple) {
|
this.$emit("on-change", []);
|
} else {
|
this.$emit("on-change", "");
|
}
|
this.$emit("on-clear");
|
},
|
setData(ids, title) {
|
this.departmentTitle = title;
|
if (this.multiple) {
|
this.departmentId = ids;
|
} else {
|
this.departmentId = [];
|
this.departmentId.push(ids);
|
}
|
this.$emit("on-change", this.departmentId);
|
},
|
},
|
mounted() {
|
this.getTreeselect()
|
this.initDepartmentData();
|
},
|
};
|
</script>
|
|
<style lang="less">
|
.dep-tree-bar {
|
position: relative;
|
min-height: 80px;
|
max-height: 500px;
|
overflow: auto;
|
margin-top: 5px;
|
}
|
|
.dep-tree-bar::-webkit-scrollbar {
|
width: 6px;
|
height: 6px;
|
}
|
|
.dep-tree-bar::-webkit-scrollbar-thumb {
|
border-radius: 4px;
|
-webkit-box-shadow: inset 0 0 2px #d1d1d1;
|
background: #e4e4e4;
|
}
|
|
</style>
|
