commit

2021-07-21 16:26:58 +08:00
parent 5f91f150a2
commit bbb2102fb1
5 changed files with 283 additions and 390 deletions
@@ -0,0 +1,175 @@
+<template>
+    <div class="roleTree">
+        <el-drawer
+                :title="isTitle"
+                :visible.sync="isVisible2"
+                :wrapperClosable="false"
+                @close="handleTreeDrawerCancel"
+                size="800px">
+            <el-form
+                    ref="attributeEO"
+                    class="label-input-form"
+                    :inline="true"
+            >
+                <el-form-item class="form-item-disabled" style="margin: 10px;">
+                    <el-input
+                            v-model="filterText"
+                            placeholder="请输入姓名"
+                    ></el-input>
+                </el-form-item>
+            </el-form>
+            <el-tree
+                    v-if="open1 && isVisible2"
+                    node-key="id"
+                    style="height: 100%; overflow: auto;"
+                    class="filter-tree"
+                    :data="treeData"
+                    :props="defaultProps"
+                    :default-checked-keys="nodeList"
+                    highlight-current
+                    check-strictly
+                    @check="drawerCheck"
+                    :expand-on-click-node="false"
+                    show-checkbox
+                    ref="tree"
+                    :load="loadNode"
+                    lazy>
+            </el-tree>
+            <el-tree
+                    v-if="!open1 && isVisible2"
+                    node-key="id"
+                    style="height: 100%; overflow: auto;"
+                    class="filter-tree"
+                    :data="treeData1"
+                    :props="defaultProps"
+                    :default-checked-keys="nodeList"
+                    highlight-current
+                    check-strictly
+                    @check="drawerCheck"
+                    :expand-on-click-node="false"
+                    default-expand-all
+                    show-checkbox
+                    ref="tree">
+            </el-tree>
+            <div id="roleFormButton" class="demo-drawer-footer">
+                <el-button class="common-button-primary" size="mini" icon="el-icon-check" type="primary" @click="saveUserInfo">确定</el-button>
+                <el-button class="common-button-default" size="mini" icon="el-icon-close" @click="handleTreeDrawerCancel">取消</el-button>
+            </div>
+            <loading style="z-index: 2099;" :loading="treeLoading">导入中...</loading>
+        </el-drawer>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "roleTree",
+        props: {
+            checkBox: { // 单选/多选
+                type: Boolean,
+                default: false,
+            },
+            isTitle: { // 标题
+                type: String
+            },
+            isVisible: { // drawer开关
+                type: Boolean,
+                default: false,
+            },
+            nodeList: { // 回显
+                type: Array,
+                default: () => {
+                    return []
+                }
+            }
+        },
+        data () {
+            return {
+                roleList: [],
+                isVisible2: false,
+                filterText: '',
+                defaultProps: {
+                    children: 'children',
+                    label: 'name'
+                },
+                treeData1: [],
+                treeData: [],
+                open1: true,
+                treeLoading: false,
+                roleRow: {}
+            }
+        },
+        methods: {
+            handleTreeDrawerCancel () {
+                this.filterText = ''
+                this.isVisible2 = false
+            },
+            saveUserInfo () {
+                this.isVisible2 = false
+                this.$emit('checkedRole', this.roleList)
+            },
+            drawerCheck (data) {
+                if (this.checkBox) {
+                    // 单选判断
+                    var getlist = this.$refs.tree.getCheckedNodes().concat(this.$refs.tree.getHalfCheckedNodes());
+                    if(getlist.length == 1) {
+                        this.roleRow = getlist[0]
+                    }else {
+                        this.$refs.tree.setCheckedKeys([data.id]);
+                        this.roleRow = this.$refs.tree.getCheckedNodes()[0]
+                    }
+                    this.roleList = [this.roleRow]
+                } else {
+                    this.roleList = this.$refs.tree.getCheckedNodes().concat(this.$refs.tree.getHalfCheckedNodes())
+                }
+            },
+            loadNode(node, resolve) {
+                if (node.level === 0) {
+                    return resolve(this.treeData);
+                }
+                this.getChildren(node, resolve)
+            },
+            getChildren (node, resolve) {
+                this.$http.get('SarInstitution/institution/getNext', {
+                    institutionId: node.key
+                }, {}, res => {
+                    resolve(res)
+                })
+            },
+            getTree () {
+                this.treeLoading = true
+                this.$http.get('SarInstitution/institution/getFirstInstitution', {}, {}, res=> {
+                    this.treeData = res
+                    this.treeLoading = false
+                })
+            }
+        },
+        watch: {
+            isVisible (val) {
+                this.isVisible2 = val
+            },
+            isVisible2 (val) {
+                this.$emit('update:isVisible', val)
+            },
+            filterText (val) {
+                if (val.length) {
+                    this.open1 = false
+                    this.treeLoading = true
+                    this.$http.get('SarInstitution/institution/institutionAndUser', {
+                        userName: val
+                    }, {}, res => {
+                        this.treeData1 = res.data
+                        this.treeLoading = false
+                    })
+                } else {
+                    this.open1 = true
+                }
+            },
+        },
+        mounted () {
+            this.getTree()
+        }
+    }
+</script>
+
+<style scoped>
+</style>