ioc-admin-ui/src/views/userManagement/groupManagement/index.vue

<template>
    <div class="container">
        <div class="left-pane">
            <el-input class="left-pane-input" placeholder="请输入关键字" suffix-icon="el-icon-search" v-model="filterText"></el-input>
            <el-tree ref="tree" :data="data" :props="defaultProps" node-key="id" :highlight-current="true"
                :filter-node-method="filterNode" @node-click="handleNodeClick">
                <span slot-scope="{node,data}">
                    <el-image :src="data.url"></el-image>
                    <span style="padding-left: 10px; vertical-align: text-bottom;">{{ node.label }}</span>
                    <!--<span class="operate_btns">-->
                    <!--    <dropdown :events="data.id == 1 ? menuEvents : subMenuEvents" :data="{ node, data }"-->
                    <!--        @itemClick="dropDownClick"></dropdown>-->
                    <!--</span>-->
                </span>
            </el-tree>
            <el-button class="addDepartment" @click="addDepartment" style="color: #fff; background: #3da0d6">
                <i class="el-icon-s-order" style="padding-right: 4px"></i>
                新建企业/部门
            </el-button>
        </div>
        <div class="right-pane">
            <overView v-if="viewShow" @nodeClick="handleNodeClick"></overView>
            <corporation :item="currentNode" v-if="corporShow" @close="handleNodeClick"></corporation>
            <department :item="currentNode" v-if="departShow" @close="handleNodeClick"></department>
        </div>

        <CorporationAdd ref="corporationAdd" />

    </div>
</template>
<script>
import overView from './tables/corporationOverview';
import corporation from './forms/corporationdetailEdit';
import department from './forms/departmentdetailEdit';
import CorporationAdd from "@/views/userManagement/groupManagement/messageDialog/corporationAdd.vue";
import dropdown from '@/components/Dropdown/index';
import {getCompanyList} from '@/api/company/company'
export default {
    components: { overView, dropdown, corporation, department, CorporationAdd },
    data() {
        return {
            filterText: '',
            viewShow: true,
            corporShow: false,
            departShow: false,
            data: [{
                id:2,
                label: '北京电信规划设计院',
                url: require('@/assets/tree/group/company@3x.png'),
                type: 'company',
                children: [{
                    id:3,
                    url: require('@/assets/tree/group/affiliate@3x.png'),
                    label: '天津办事处',
                    type: 'dept',
                }]
            }],
            menuEvents: [
                { label: '新建', funcName: 'addNode' }
            ],
            subMenuEvents: [
                { label: '新建', funcName: 'addNode' },
                { label: '上移', funcName: 'moveUp' },
                { label: '下移', funcName: 'moveDown' },
                { label: '编辑', funcName: 'editNode' },
                { label: '删除', funcName: 'removeNode' }
            ],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            currentNode: {}
        }
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        }
    },
    mounted() {
        this.getCompanyData();
    },
    methods: {
        getCompanyData() {
            getCompanyList('', 1, 999).then(res=>{
                let data = res.data;
                if (data.code == 0) {
                    this.data = data.data;
                    this.data.forEach(item => {
                        item.url = require('@/assets/tree/group/company@3x.png');
                        item.label = item.company_name;
                        item.type = 'company'
                    })
                } else {
                    this.$message.error(data.message)
                }
            })
        },
        handleNodeClick(data) {
            this.currentNode = data
            if (data.type=='company') {
                this.viewShow = false;
                this.corporShow = true;
                this.departShow = false;
            } else if (data.type=='dept') {
                this.viewShow = false;
                this.corporShow = false;
                this.departShow = true;
            } else {
                this.corporShow = false;
                this.departShow = false;
                this.viewShow = true;
            }
        },
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        addDepartment() {
          this.$refs.corporationAdd.dialogVisible = true;
        },
        handleClick() {

        },
        addCompany() {

        },
        dropDownClick(funcName, data) {
            this.currentNode = data;
            if (funcName === 'addNode') {
                //
            }
        },
    }
}
</script>

<style lang="less" scoped>
.container {
    position: relative;
    height: 100%;
    line-height: 20px;
    background-color: rgba(255, 255, 255, 1);
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
    text-align: center;
    display: flex;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);

    .addDepartment {
        position: absolute;
        left: 68px;
        bottom: 15px;
        width: 250px;
        height: 30px;
        text-align: center;
        font-size: 14px;
        padding: 0;
    }

    .left-pane {
        width: 300px;
        padding: 15px;
        height: calc(100% - 30px);

        .left-pane-input {
            /deep/ .el-input__inner {
                height: 30px !important;
                line-height: 30px;
                //border-right: none;
            }
            /deep/ .el-input__suffix {
                border: none;
                background-color: transparent;
                padding: 0;
            }
            /deep/ .el-input__icon {
                line-height: 30px !important;
            }
        }

        .el-tree {
            margin-top: 10px;
            height: calc(98% - 30px);
            background-color: #FAFAFA;

            .el-image {
                vertical-align: middle;
            }

            /deep/.el-tree-node__content {
                align-items: center;
                height: 30px;
                cursor: pointer;
                font-size: 14px;
                position: relative;
                color: #999999;
                padding-top: 10px;
                .operate_btns {
                    position: absolute;
                    right: 20px;
                    display: none;
                }

                &:hover,
                :focus-within {
                    background-color: #f7fbff;

                    .operate_btns {
                        display: inline;
                    }
                }
            }
        }
    }

    .right-pane {
    width: calc(100% - 330px);
    }
}


</style>