|
@@ -0,0 +1,349 @@
|
|
|
+<template>
|
|
|
+ <div class="organ-tree">
|
|
|
+ <div v-show="showHouseTree">
|
|
|
+ <div>
|
|
|
+ <el-input v-model="filterText" v-if="!showCheckboxTree" placeholder="请输入关键字" suffix-icon="el-icon-search"></el-input>
|
|
|
+ <el-input
|
|
|
+ v-model="selectHouse"
|
|
|
+ disabled
|
|
|
+ placeholder="选择的房间"
|
|
|
+ maxlength="10"
|
|
|
+ suffix-icon="el-icon-search"
|
|
|
+ v-else
|
|
|
+ ></el-input>
|
|
|
+ </div>
|
|
|
+ <div class="tree-style-box no-scrollbar">
|
|
|
+ <el-tree
|
|
|
+ class="tree-style"
|
|
|
+ :data="organList"
|
|
|
+ ref="tree"
|
|
|
+ node-key="id"
|
|
|
+ :highlight-current="true"
|
|
|
+ :props="defaultProps"
|
|
|
+ :expand-on-click-node="false"
|
|
|
+ @node-click="treeClick"
|
|
|
+ @check="clickCheckTree"
|
|
|
+ :default-expand-all="defaultExpandAllTree"
|
|
|
+ :filter-node-method="filterNode"
|
|
|
+ :show-checkbox="showCheckboxTree"
|
|
|
+ :accordion="accordion"
|
|
|
+ :prevDetailData="prevDetailData"
|
|
|
+ :default-expanded-keys="defaultSelectAll"
|
|
|
+ >
|
|
|
+ </el-tree>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-show="!showHouseTree">
|
|
|
+ <el-input v-model="selectPeople" disabled placeholder="选择的人员" maxlength="10" suffix-icon="el-icon-search"></el-input>
|
|
|
+ <div class="tree-style-box no-scrollbar">
|
|
|
+ <el-tree
|
|
|
+ class="tree-style"
|
|
|
+ :data="dataPeopleList"
|
|
|
+ ref="treePeople"
|
|
|
+ node-key="id"
|
|
|
+ :highlight-current="true"
|
|
|
+ :props="defaultPropsPeople"
|
|
|
+ :expand-on-click-node="false"
|
|
|
+ @node-click="treeClick"
|
|
|
+ @check="clickCheckTreePeople"
|
|
|
+ :default-expand-all="defaultExpandAllTree"
|
|
|
+ :filter-node-method="filterNodePeople"
|
|
|
+ :show-checkbox="showCheckboxTree"
|
|
|
+ :accordion="accordionPeople"
|
|
|
+ :selectAll="selectAll"
|
|
|
+ :prevDetailData="prevDetailData"
|
|
|
+ >
|
|
|
+ </el-tree>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: 'treeHouse',
|
|
|
+ props: {
|
|
|
+ buildingType: { type: String, default: 'buildingType' },
|
|
|
+ showCheckboxTree: {
|
|
|
+ //显示多选框
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ defaultExpandAllTree: {
|
|
|
+ //是否默认展开所有节点
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ },
|
|
|
+ showHouseTree: {
|
|
|
+ //显示房间树
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ },
|
|
|
+
|
|
|
+ accordion: {
|
|
|
+ //房间展开手风琴
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ accordionPeople: {
|
|
|
+ //人员展开手风琴
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ prevDetailData: {
|
|
|
+ type: Array,
|
|
|
+ default() {
|
|
|
+ return [];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ filterText: '',
|
|
|
+ selectHouse: '',
|
|
|
+ selectPeople: '',
|
|
|
+ organList: [],
|
|
|
+ dataPeopleList: [],
|
|
|
+ defaultSelectAll: [],
|
|
|
+ defaultProps: {
|
|
|
+ children: 'children',
|
|
|
+ label: 'name'
|
|
|
+ },
|
|
|
+ defaultPropsPeople: {
|
|
|
+ children: 'children',
|
|
|
+ label: 'label'
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ filterText(val) {
|
|
|
+ this.$refs.tree.filter(val);
|
|
|
+ },
|
|
|
+ dataPeopleList(val) {
|
|
|
+ console.log('====================================');
|
|
|
+ console.log('dataPeopleList', val);
|
|
|
+ console.log('====================================');
|
|
|
+ this.$refs.tree.filter(val);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ methods: {
|
|
|
+ // 过滤选中的社区下的房间
|
|
|
+ filterhouse(val, datas) {
|
|
|
+ let array = datas;
|
|
|
+ let data;
|
|
|
+ for (let index = 0; index < array.length; index++) {
|
|
|
+ const element = array[index];
|
|
|
+ if (element.id == val && element.children) {
|
|
|
+ data = element.children;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.organList = data;
|
|
|
+ this.defaultSelectAll = data;
|
|
|
+ this.selectAllHouse();
|
|
|
+ this.clickCheckTree();
|
|
|
+ // this.$refs.tree.setCheckedNodes('C1栋');
|
|
|
+ });
|
|
|
+ console.log(' this.$refs.tree.setCheckedNodes(this.organList);', this.organList);
|
|
|
+ },
|
|
|
+ // 过滤选中的人员
|
|
|
+ filterPeople(val) {
|
|
|
+ return val
|
|
|
+ ? this.val.filter((item) => {
|
|
|
+ item.id == val;
|
|
|
+ })
|
|
|
+ : '暂无人员';
|
|
|
+ },
|
|
|
+ // 选中所有房间
|
|
|
+ selectAllHouse() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.tree.setCheckedNodes(this.organList);
|
|
|
+ this.clickCheckTree();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 选中指定房间
|
|
|
+ selectHouseOr() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.tree.setCheckedKeys([]);
|
|
|
+ this.clickCheckTree();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 选中所有人员
|
|
|
+ selectAllPeople() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.treePeople.setCheckedNodes(this.dataPeopleList);
|
|
|
+ this.clickCheckTreePeople();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 选中指定人员
|
|
|
+ selectPeopleOr() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.treePeople.setCheckedKeys([]);
|
|
|
+ this.clickCheckTreePeople();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 获取人员
|
|
|
+ getPeopleList() {
|
|
|
+ this.$http.get('/sc-user-center/user/findUserList').then(({ status, data, msg }) => {
|
|
|
+ if (status === 0) {
|
|
|
+ this.dataPeopleList = data;
|
|
|
+ this.$emit('dataPeople', data);
|
|
|
+ } else {
|
|
|
+ this.$message(warning, '获取人员失败,请稍后重试');
|
|
|
+ }
|
|
|
+ console.log('获取人员', data);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getSelect(data) {
|
|
|
+ var str = [];
|
|
|
+ const getStr = function (list) {
|
|
|
+ list.forEach(function (row) {
|
|
|
+ if (row.children) {
|
|
|
+ getStr(row.children);
|
|
|
+ } else {
|
|
|
+ str.push(row.value);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ };
|
|
|
+ getStr(data);
|
|
|
+ return str;
|
|
|
+ console.log('getStr', str);
|
|
|
+ },
|
|
|
+ // 多选框返回选中房间的数据
|
|
|
+ clickCheckTree(val) {
|
|
|
+ let tree = this.$refs.tree;
|
|
|
+ let nameArr = [];
|
|
|
+ let array = tree.getCheckedNodes();
|
|
|
+ let arrays = tree.getCheckedKeys();
|
|
|
+ for (let index = 0; index < array.length; index++) {
|
|
|
+ const element = array[index];
|
|
|
+ nameArr.push(element.name);
|
|
|
+ if (Array.isArray(element) && element.length > 0) {
|
|
|
+ nameArr.push(element.name);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 输入框显示的房间
|
|
|
+ this.selectHouse = nameArr;
|
|
|
+ var arr = [];
|
|
|
+ array.forEach(function (item) {
|
|
|
+ if (item.type === 'room' && Number(item.value) !== String) {
|
|
|
+ arr.push(Number(item.value));
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // 选中的房间id
|
|
|
+ this.$emit('selectData', arr);
|
|
|
+ console.log('arrays', arrays);
|
|
|
+ console.log('array', array);
|
|
|
+ },
|
|
|
+ // 多选框返回选中人员的数据
|
|
|
+ clickCheckTreePeople(val) {
|
|
|
+ let nameArr = [];
|
|
|
+ let tree = this.$refs.treePeople;
|
|
|
+ let array = tree.getCheckedNodes();
|
|
|
+ let arrays = tree.getCheckedKeys();
|
|
|
+ for (let index = 0; index < array.length; index++) {
|
|
|
+ const element = array[index];
|
|
|
+ nameArr.push(element.label);
|
|
|
+ if (Array.isArray(element) && element.length > 0) {
|
|
|
+ nameArr.push(element.label);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 输入框显示的人员
|
|
|
+ this.selectPeople = nameArr.toString();
|
|
|
+ // 选中的人员id
|
|
|
+ this.$emit('selectPeople', arrays);
|
|
|
+ },
|
|
|
+ dimension(arr) {
|
|
|
+ arr.map((item, index) => {
|
|
|
+ if (!!item.children & (item.type !== 'unit')) {
|
|
|
+ this.dimension(item.children);
|
|
|
+ } else {
|
|
|
+ if (item.name.indexOf('单元') === -1 && item.type === 'unit') {
|
|
|
+ item.name = item.name + '单元';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getOrgTreeList() {
|
|
|
+ this.$http
|
|
|
+ .get('/sc-community/assets/tree/community/find', { buildingType: this.buildingType })
|
|
|
+ .then(({ status, data, msg }) => {
|
|
|
+ if (status === 0 && data) {
|
|
|
+ this.organList = data;
|
|
|
+ this.dimension(data);
|
|
|
+ this.$nextTick().then(() => {
|
|
|
+ const firstNode = document.querySelector('.el-tree-node');
|
|
|
+ firstNode.click();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ filterNode(value, data) {
|
|
|
+ if (!value) return true;
|
|
|
+ return data.name.indexOf(value) !== -1;
|
|
|
+ },
|
|
|
+ filterNodePeople(value, data) {
|
|
|
+ if (!value) return true;
|
|
|
+ return data.label.indexOf(value) !== -1;
|
|
|
+ },
|
|
|
+ treeClick(e) {
|
|
|
+ if (e.value == 0) return;
|
|
|
+ let onData = '';
|
|
|
+ let newValueIds = e.id.split('-');
|
|
|
+ let thisE = this.$refs.tree.getNode(e);
|
|
|
+ if (e.type == 'building') {
|
|
|
+ onData = {
|
|
|
+ communityId: thisE.parent.data.value,
|
|
|
+ buildingId: e.value,
|
|
|
+ unitId: '',
|
|
|
+ roomId: ''
|
|
|
+ };
|
|
|
+ this.$emit('buildingInformation', onData);
|
|
|
+ } else if (e.type == 'unit') {
|
|
|
+ onData = {
|
|
|
+ communityId: thisE.parent.parent.data.value,
|
|
|
+ buildingId: thisE.parent.data.value,
|
|
|
+ unitId: e.value,
|
|
|
+ roomId: ''
|
|
|
+ };
|
|
|
+ this.$emit('buildingInformation', onData);
|
|
|
+ } else if (e.type == 'room') {
|
|
|
+ onData = {
|
|
|
+ communityId: newValueIds.length == 4 ? thisE.parent.parent.parent.data.value : thisE.parent.parent.data.value,
|
|
|
+ buildingId: newValueIds.length == 4 ? thisE.parent.parent.data.value : thisE.parent.data.value,
|
|
|
+ unitId: newValueIds.length == 4 ? thisE.parent.data.value : '',
|
|
|
+ roomId: e.value
|
|
|
+ };
|
|
|
+ this.$emit('buildingInformation', onData);
|
|
|
+ } else {
|
|
|
+ this.$emit('buildingInformation', e);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // this.getOrgTreeList();
|
|
|
+ this.getPeopleList();
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.organ-tree {
|
|
|
+ width: 260px;
|
|
|
+ background: #ffffff;
|
|
|
+ padding: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ float: left;
|
|
|
+ height: 100%;
|
|
|
+ overflow: auto;
|
|
|
+ &::before {
|
|
|
+ clear: both;
|
|
|
+ }
|
|
|
+ .tree-style-box {
|
|
|
+ margin-top: 20px;
|
|
|
+ max-height: calc(100vh - 200px);
|
|
|
+ overflow: scroll;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|