<template>
    <div style="height:100%; position: relative;min-width: 800px;">
        <div class="MainLeft">
            <div class="public-function-div">导航树
                <el-button
                    @click="handleReset('formItem')"
                    type="primary"
                    size="small"
                    class="refresh"
                    v-privilege="activeMenu + 'ADD'"
                >新增顶级菜单</el-button>
            </div>
            <el-input
                placeholder="输入关键字进行过滤"
                class="filterTree"
                v-model="filterText"
            >
            </el-input>
            <el-tree
                ref="menuTree"
                v-if="dictTree"
                :data="dictTree"
                :props="defaultProps"
                node-key="id"
                :expand-on-click-node="true"
                @node-click="nodeClick"
                :style="{height: treeHeight + 'px'}"
                :render-content="renderContent"
                :filter-node-method="filterOrgTree"
            >
            </el-tree>
        </div>

        <div class="MainRight">
            <el-tabs v-model="activeName">
                <el-tab-pane
                    label="编辑区"
                    name="editForm"
                >
                    <el-form
                        ref="formItem"
                        :model="formItem"
                        :rules="ruleValidate_formItem"
                        label-width="70px"
                        class="FormMain"
                    >
                        <el-row>
                            <el-col :span="12">
                                <el-form-item
                                    label="字典编码"
                                    prop="dictCode"
                                >
                                    <el-input
                                        v-model="formItem.dictCode"
                                        placeholder="请输入"
                                        :disabled="operateStatus === 'edit' ? true : false "
                                        size="small"
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item
                                    label="字典类型"
                                    prop="dictType"
                                >
                                    <el-input
                                        v-model="formItem.dictType"
                                        placeholder="请输入"
                                        :disabled="operateStatus === 'edit' ? true : false "
                                        size="small"
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item
                                    label="字典名称"
                                    prop="dictName"
                                >
                                    <el-input
                                        v-model="formItem.dictName"
                                        placeholder="请输入"
                                        size="small"
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item
                                    label="状态"
                                    prop="status"
                                >
                                    <el-select
                                        v-model="formItem.status"
                                        style="width: 100%;"
                                        size="small"
                                    >
                                        <el-option
                                            v-for="item in menuStatus"
                                            :value="item.value"
                                            :key="item.value"
                                            :label="item.label"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item
                                    label="创建时间"
                                    prop="crtDate"
                                >
                                    <el-input
                                        v-model="formItem.crtDate"
                                        :disabled="true"
                                        size="small"
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-form-item
                            label="字典描述"
                            prop="dictDesc"
                        >
                            <el-input
                                v-model="formItem.dictDesc"
                                type="textarea"
                                :autosize="{minRows: 3,maxRows: 5}"
                                placeholder="请输入"
                                style="width:100%"
                            ></el-input>
                        </el-form-item>
                    </el-form>
                    <el-form>
                        <div style="padding: 0 20px;">
                            <div style="margin-bottom: 7px;overflow: hidden;">
                                <!-- <el-checkbox
                                    v-show="operateStatus === 'edit'"
                                    v-model="icoreFilterFlag"
                                    @change="changeVal"
                                >过滤</el-checkbox> -->
                                <div style="float: right;">
                                    <el-button
                                        @click="addNewFunc"
                                        v-show="operateStatus === 'edit'"
                                        size="small"
                                        type="primary"
                                        v-privilege="activeMenu + 'CHILDRENADD'"
                                    >新增字典</el-button>
                                    <el-button
                                        v-show="operateStatus !== 'edit'"
                                        :loading="addLoading2"
                                        v-privilege="activeMenu + 'ADD'"
                                        type="primary"
                                        size="small"
                                        @click="handleSubmit('formItem')"
                                    >添加</el-button>
                                    <el-button
                                        v-show="operateStatus === 'edit'"
                                        :loading="addLoading1"
                                        type="primary"
                                        size="small"
                                        v-privilege="activeMenu + 'EDIT'"
                                        @click="handleSubmit('formItem')"
                                    >保存</el-button>
                                </div>
                            </div>
                            <el-table stripe
                                ref="funTable"
                                border
                                @icoreFilterChange="icoreFilterChange"
                                :icore-filter-flag="icoreFilterFlag"
                                :height="funHeight"
                                highlight-current-row
                                :data="functionTable"
                            >
                                <el-table-column
                                    prop="dictCode"
                                    label="字典编码"
                                    :show-overflow-tooltip="true"
                                    :key="Math.random()"
                                    fixed="left"
                                    align="center"
                                >
                                    <template slot-scope="scope">
                                        <span v-if="!scope.row.addEdit">{{scope.row.dictCode}}</span>
                                        <el-input
                                            v-else
                                            size="mini"
                                            v-model="scope.row.dictCode"
                                        ></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    prop="dictName"
                                    :show-overflow-tooltip="true"
                                    label="字典名称"
                                    fixed="left"
                                    :key="Math.random()"
                                    align="center"
                                >
                                    <template slot-scope="scope">
                                        <span v-if="!scope.row.addEdit">{{scope.row.dictName}}</span>
                                        <el-input
                                            v-else
                                            size="mini"
                                            v-model="scope.row.dictName"
                                        ></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    label="操作"
                                    type="noFilter"
                                    :key="Math.random()"
                                    align="center"
                                    width="170"
                                >
                                    <template slot-scope="scope">
                                        <el-button
                                            type="primary"
                                            size="small"
                                            v-if="!scope.row.addEdit"
                                            style="margin:0 10px;"
                                            v-show="editPr"
                                            @click="editTableRow(scope.row)"
                                        >编辑</el-button>
                                        <el-button
                                            type="primary"
                                            size="small"
                                            style="margin:0 10px;"
                                            :loading="buttonLoading"
                                            v-else
                                            @click="addFncMenu(scope.row)"
                                        >保存</el-button>
                                        <el-button
                                            type="warning"
                                            size="small"
                                            v-show="delPr"
                                            style="margin:0 10px;"
                                            @click="handleClose(scope.row)"
                                        >删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>

</template>
<script>
import store from '@/store/index.js';
import { dgTree, objAssign } from '@/utils/util.js';
import { checkCharLength, checkCharLength2, checkCharNoChinese, checkChar, checkChinese } from '@/utils/validator.js';
export default {
    data () {
        return {
            icoreFilterFlag: false,
            filterText: '',
            store,
            //  操作状态
            operateStatus: 'add',
            funHeight: 300,
            treeHeight: 600,
            addLoading1: false,
            addLoading2: false,
            showDelet: false,
            //  默认配置数据对应项
            defaultProps: {
                children: 'children',
                label: 'dictName'
            },
            formItem: {
                'id': '',
                'pDictId': '',
                'dictCode': '',
                'dictType': '',
                'dictName': '',
                'dictDesc': '',
                'status': '1',
                'crtDate': ''
            },
            menuStatus: [
                {
                    label: '停用',
                    value: '0'
                }, {
                    label: '启用',
                    value: '1'
                }
            ],
            ruleValidate_formItem: {
                dictCode: [
                    { required: true, message: '字典编码不能为空', trigger: 'change' },
                    { validator: checkCharNoChinese, trigger: 'change' },
                    { validator: checkCharLength2, max: 100, trigger: 'change' }
                ],
                dictType: [
                    { required: true, message: '字典类型不能为空', trigger: 'change' },
                    { validator: checkCharNoChinese, trigger: 'change' },
                    { validator: checkCharLength, max: 100, trigger: 'change' }
                ],
                dictName: [
                    { required: true, message: '字典名称不能为空', trigger: 'change' },
                    { validator: checkCharLength, max: 100, trigger: 'change' }
                ],
                dictDesc: [
                    { validator: checkCharLength, max: 255, trigger: 'change' }
                ]
            },
            // el tabs
            activeName: 'editForm',
            //  字典树
            dictTree: [],
            // 用户列表
            userTable: {
                height: 600,
                loading: false,
                list: [],
                listBack: [],
                //  选中项
                items: [],
                item: {},
                tableParams: JSON.parse(JSON.stringify(store.state.tableParams)),
                menuTreeBack: []
            },
            functionTable: [],
            fncFrom: {
                id: '',
                pDictId: '',
                dictCode: '',
                dictName: ''
            },
            activeMenu: '',
            activeTree: [],
            buttonLoading: false,
            editPr: false,
            delPr: false
        }
    },
    created () {
        this.activeMenu = window.localStorage.getItem('activeMenu');
    },
    mounted () {
        this.initData();
        //  设置树区域高度
        this.$nextTick(() => {
            this.treeHeight = this.getTreeHeight(this.$refs['menuTree'].$el);
        });
    },
    watch: {
        filterText (val) {
            this.$refs.menuTree.filter(val);
        }
    },
    methods: {
        initData () {
            //  查询列表
            this.getdictTree();
        },
        //获取顶级字典数据
        getdictTree () {
            this.axios.get('pass/v1/sysdicts/?pDictId=0&pageSize=10000&pageNum=1').then((res) => {
                if (res.code === '0') {
                    this.dictTree = res.data.list;
                    this.$nextTick(() => {
                        $('.delMenuPr').css('display', this.checkPrivilege(this.activeMenu + 'MENUDELETE') ? 'inline-block' : 'none')
                    })
                } else {
                    this.$message.error(res.message)
                }
            }).catch(() => {
                this.$message.error('请求失败')
            })
        },
        getDictChildren (id) {
            this.axios.get('pass/v1/sysdicts/?pDictId=' + id).then((res) => {
                if (res.code === '0') {
                    this.functionTable = res.data.list;
                    this.$nextTick(() => {
                        this.editPr = this.checkPrivilege(this.activeMenu + 'CHILDRENEDIT');
                        this.delPr = this.checkPrivilege(this.activeMenu + 'CHILDRENDELETE');
                    })
                } else {
                    this.$message.error(res.message)
                }
            }).catch(() => {
                this.$message.error('请求失败')
            })
        },
        //  点击树事件
        nodeClick (item, el) {
            //  加入
            this.formItem = objAssign(this.formItem, item);
            //  点击时为编辑状态
            this.operateStatus = 'edit';
            // 判断菜单下是否有页面
            this.getDictChildren(item.id)
            this.icoreFilterFlag = false;
            this.$nextTick(() => {
                this.icoreFilterFlag = true;
            })
        },
        //  清空 清空为添加，添加直接添加顶级目录
        handleReset (name) {
            this.$refs[name].resetFields();
            this.operateStatus = 'add';
            this.functionTable = [];
            // 默认为菜单
        },
        //  计算树区域高度
        getTreeHeight (dom) {
            return window.innerHeight - dom.offsetTop;
        },
        renderContent (h, { node, data, store }) {
            let render = [];
            //   let prl = this.$store.state.ownPrivilege;
            //   while (prl.length === 0) {
            //     continue;
            //   }
            render = [
                h('span', {
                    class: 'el-icon-delete xl-icon-size delMenuPr',
                    attrs: {
                        title: '删除'
                    },
                    on: {
                        click: (event) => {
                            this.delTreeNode(node, data);
                            event.stopPropagation();
                        }
                    }
                })
            ];
            return h('span',
                {
                    style: {
                        position: 'relative',
                        width: '100%',
                        fontSize: '14px'
                    },
                    class: 'fun-st-ellipsis'
                },
                [
                    h('span', node.label),
                    h('span', {
                        style: {
                            position: 'absolute',
                            right: '0px'
                        }
                    }, render)
                ]);
        },
        /**
         * 删除树节点元素
         */
        delTreeNode (node, data) {
            this.$confirm('确定要删除已选择的记录吗？', '提示', {
                customClass: 'org-Manage-changeprimaryforbutton',
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.axios.delete('pass/v1/sysdicts/' + data.id).then(res => {
                    if (res.code === '0') {
                        this.$message.success('删除成功');
                        //  更新树
                        this.handleReset('formItem')
                        this.$refs['menuTree'].remove(data.id);
                    } else {
                        this.$message.error(res.message);
                    }
                });
            }).catch(() => {
                this.$message.info('已取消操作');
            });
            this.$nextTick(() => {
                document.getElementsByClassName('org-Manage-changeprimaryforbutton')[0].getElementsByClassName('el-message-box__btns')[0].getElementsByTagName('button')[0].classList.add('el-button--primary')
                document.getElementsByClassName('org-Manage-changeprimaryforbutton')[0].getElementsByClassName('el-message-box__btns')[0].getElementsByTagName('button')[1].classList.remove('el-button--primary')
            });
        },
        /**
         * 保存数据
         * */
        handleSubmit (name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    if (this.operateStatus === 'edit') {
                        if (!this.formItem.id) {
                            this.$message.error('请选择数据再来操作');
                            return;
                        }
                        this.$confirm('确定要修改已选择的记录吗？', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            //  修改数据
                            this.addLoading1 = true;
                            //
                            this.formItem.pDictId = '0'
                            this.axios.put('pass/v1/sysdicts/' + this.formItem.id, this.formItem).then((res) => {
                                if (res.code === '0') {
                                    this.$message.success('保存成功')
                                    this.initData()
                                } else {
                                    this.$message.error(res.message)
                                }
                            }).catch(() => {
                                this.$message.error('操作失败')
                            })
                            this.addLoading1 = false;
                        });
                    } else if (this.operateStatus === 'add') {
                        //   添加
                        this.formItem.pDictId = '0'
                        this.addLoading2 = true;
                        //
                        this.axios.post('pass/v1/sysdicts/', this.formItem).then((res) => {
                            if (res.code === '0') {
                                this.$message.success('新增成功')
                                this.$refs['menuTree'].append(res.data, this.formItem.pId);
                                this.$refs['menuTree'].setCurrentKey(res.data.id);
                                for (let key in res.data) {
                                    this.formItem[key] = res.data[key]
                                }
                                this.operateStatus = 'edit'
                                this.addLoading2 = false;
                            } else {
                                this.$message.error(res.message)
                                this.addLoading2 = false;
                            }
                        }).catch(() => {
                            this.$message.error('操作失败')
                            this.addLoading2 = false;
                        })
                    }
                }
            })
        },
        // 树形控件过滤数据
        filterOrgTree (value, data) {
            if (!value) return true;
            return data.dictName.indexOf(value) !== -1;
        },
        // 删除菜单
        handleClose (row) {
            let that = this;
            let index = that.getRowIndex(row.dictCode, 2);
            if (row.id) {
                this.$confirm('确定要删除已选择的记录吗？', '提示', {
                    customClass: 'org-Manage-changeprimaryforbutton',
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.axios.delete('pass/v1/sysdicts/' + row.id).then(res => {
                        if (res.code === '0') {
                            this.$message.success('删除成功');
                            //  更新树
                            that.functionTable.splice(index, 1);
                            this.$refs['funTable'];
                        } else {
                            this.$message.error(res.message);
                        }
                    });
                }).catch(() => {
                    this.$message.info('已取消操作');
                });
                this.$nextTick(() => {
                    document.getElementsByClassName('org-Manage-changeprimaryforbutton')[0].getElementsByClassName('el-message-box__btns')[0].getElementsByTagName('button')[0].classList.add('el-button--primary')
                    document.getElementsByClassName('org-Manage-changeprimaryforbutton')[0].getElementsByClassName('el-message-box__btns')[0].getElementsByTagName('button')[1].classList.remove('el-button--primary')
                });
            } else {
                that.functionTable.splice(index, 1);
            }
        },
        addFncMenu (row) {
            this.buttonLoading = true;
            try {
                let rule = {
                    max: 100,
                    required: true,
                    errName: '字典名称'
                };
                let rule2 = {
                    max: 100,
                    required: true,
                    errName: '字典编码'
                }
                this.checkCharLength(rule, row.dictName, '字典名称不能为空');
                this.checkCharLength(rule2, row.dictCode, '字典编码不能为空')
                this.checkCharNoChinese(row.dictCode);
                if (this.formItem.id) {
                    if (!row.id) {
                        let item = {
                            dictCode: row.dictCode,
                            dictName: row.dictName,
                            pDictId: this.formItem.id,
                            dictType: this.formItem.dictType
                        }
                        //
                        this.axios.post('pass/v1/sysdicts/', item).then((res) => {
                            if (res.code === '0') {
                                this.$message.success('新增成功')
                                res.data.addEdit = false;
                                this.functionTable[this.getRowIndex(res.data.dictCode, 2)] = res.data;
                                this.initData()
                            } else {
                                this.$message.error(res.message)
                            }
                        }).catch(() => {
                            this.$message.error('操作失败')
                        })
                    } else {
                        this.axios.put('pass/v1/sysdicts/' + row.id, row).then((res) => {
                            if (res.code === '0') {
                                this.$message.success('保存成功')
                                this.getRowIndex(res.data)
                                this.initData()
                            } else {
                                this.$message.error(res.message)
                            }
                        }).catch(() => {
                            this.$message.error('操作失败')
                        })
                    }
                }
            } catch (err) {
                this.$message.error(err.message)
            }
            this.buttonLoading = false;
        },
        editTableRow (row) {
            let that = this;
            if (row.id) {
                for (let i = 0; i < that.functionTable.length; i++) {
                    if (that.functionTable[i].id === row.id) {
                        that.functionTable[i].addEdit = true;
                    }
                }
            } else {
                for (let i = 0; i < that.functionTable.length; i++) {
                    if (that.functionTable[i].dictCode === row.dictCode) {
                        that.functionTable[i].addEdit = true;
                    }
                }
            }
        },
        // 新增一条空数据
        addNewFunc () {
            let obj = {
                id: '',
                pDictId: this.formItem.id,
                dictName: '',
                dictCode: '',
                addEdit: true
            }
            this.functionTable.push(obj)
        },
        // 获取当前编辑行的index
        getRowIndex (data, type) {
            let that = this;
            let index = 0;
            if (!type) {
                for (let i = 0; i < that.functionTable.length; i++) {
                    if (that.functionTable[i].id === data.id) {
                        data.addEdit = false;
                        that.functionTable[i] = data;
                        break;
                    }
                }
            } else {
                for (let i = 0; i < that.functionTable.length; i++) {
                    if (that.functionTable[i].dictCode === data) {
                        index = i;
                        break;
                    }
                }
            }
            return index
        },
        // 校验方法
        checkCharLength (rule, value, msg) {
            if (value) {
                let chineseLen = 3;
                let iLen = chineseLen > 1 ? this._charLength(value, chineseLen) : value.length;
                if (rule.min && rule.min > 0 && iLen < rule.min) {
                    throw new Error(rule.errName + '最少输入' + rule.min + '个字符（一个中文占' + chineseLen + '个字符）')
                }
                if (rule.max && rule.max > 0 && iLen > rule.max) {
                    throw new Error(rule.errName + '最多输入' + rule.max + '个字符（一个中文占' + chineseLen + '个字符）')
                }
            } else {
                if (rule.required) {
                    throw new Error(rule.errName + '不能为空')
                }
            }
        },
        checkCharNoChinese (value) {
            let reg = /^[-_a-zA-Z0-9]+$/;
            if (value && !reg.test(value)) {
                throw new Error('请输入英文字母、数字、下划线（_）或横线（-）的组合')
            }
        },
        _charLength (str, chineseLen) {
            if (!str || str.length <= 0) { return 0; };
            // str = mytrim(str);
            let chineseLength = 3; // utf-8编码，中文长度
            if (chineseLen && chineseLen > 0) {
                chineseLength = chineseLen
            }
            let objValue = str;
            let objLength = 0;
            let compareChar = '';
            let regExp = new RegExp("^[A-Za-z0-9 -_`~!@#$%^&*()-+=|,<.>/?;:'\\\"]$");
            for (let count = 0; count < objValue.length; count++) {
                compareChar = objValue.substring(count, count + 1);
                if (regExp.test(compareChar)) {
                    objLength += 1;
                } else if (compareChar === '\\') {
                    objLength += 1;
                } else {
                    objLength += chineseLength;
                }
            }
            return objLength;
        },
        icoreFilterChange (item) {
            // do something
        },
        setCheckedKeys () {
            this.defaultExpand = false;
            for (var i = 0; i < this.$refs.menuTree.store._getAllNodes().length; i++) {
                this.$refs.menuTree.store._getAllNodes()[i].expanded = this.defaultExpand;
            }
        },
        setCheckedNodes () {
            this.defaultExpand = true; // 展开所有节点
            for (var i = 0; i < this.$refs.menuTree.store._getAllNodes().length; i++) {
                this.$refs.menuTree.store._getAllNodes()[i].expanded = this.defaultExpand;
            }
        },
        changeVal (val) {
            this.$nextTick(() => {
                if (!val) {
                    let temp = [];
                    for (let i = 0; i < this.functionTable.length; i++) {
                        temp.push(this.functionTable[i])
                    }
                    this.functionTable = temp;
                }
            })
        }
    }

}
</script>
<style scope>
.mainFunction {
    height: 85%;
    overflow: hidden;
}

.MainLeft {
    width: 30%;
    border-right: 1px solid #e0e0e0;
    float: left;
    overflow: hidden;
    height: inherit;
}

.el-tree {
    overflow-x: hidden !important;
}
.MainRight {
    width: 70%;
    float: left;
}

.FormMain {
    margin: 20px 20px 0 10px;
}

.searchContent {
    margin: 20px 0px 0px 20px;
    text-align: left;
    width: 100%;
}
.public-function-div {
    font-size: 16px;
    padding: 10px 20px;
    border-bottom: 1px solid #d5d5d5;
    position: relative;
}
.public-function-div .refresh {
    position: absolute;
    right: 15px;
    top: 10px;
}
.public-function-div .refresh2 {
    position: absolute;
    right: 80px;
    top: 10px;
}
.refresh3 {
    position: absolute;
    right: 145px;
    top: 10px;
}
.fun-st-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: keep-all;
    padding-right: 60px;
}
.filterTree {
    width: 95%;
    margin: 10px 2.5%;
}
/** el-tabs **/
.el-tabs__item {
    font-size: 16px;
    height: 46px;
    line-height: 46px;
}
.el-tabs__nav-scroll {
    padding-left: 20px;
}
#pane-userList {
    padding: 10px;
}
.el-select {
    width: 100%;
}
.xs-menu-icons {
    display: inline-block;
    width: 26px;
    height: 26px;
    cursor: pointer;
    transform: scale(0.8);
    background: url(../../../assets/img/menu/menu_b.png) 0 0 no-repeat;
    -webkit-transition: background-position 0.3s;
    transition: background-position 0.3s;
}

.xs-icons-menu1 {
    background-position: -25px -24px;
}
.xs-icons-menu2 {
    background-position: -73px -24px;
}

.xs-icons-menu3 {
    background-position: -120px -24px;
}

.xs-icons-menu4 {
    background-position: -168px -24px;
}

.xs-icons-menu5 {
    background-position: -25px -70px;
}

.xs-icons-menu6 {
    background-position: -73px -70px;
}

.xs-icons-menu7 {
    background-position: -120px -70px;
}

.xs-icons-menu8 {
    background-position: -168px -70px;
}

.xs-icons-menu9 {
    background-position: -25px -119px;
}

.xs-icons-menu10 {
    background-position: -73px -119px;
}

.xs-icons-menu11 {
    background-position: -120px -119px;
}

.xs-icons-menu12 {
    background-position: -168px -119px;
}

.xs-icons-menu13 {
    background-position: -25px -168px;
}

.xs-icons-menu14 {
    background-position: -73px -168px;
}

.xs-icons-menu15 {
    background-position: -120px -168px;
}

.xs-icons-menu16 {
    background-position: -168px -168px;
}

.xs-icons-menu17 {
    background-position: -25px -217px;
}

.xs-icons-menu18 {
    background-position: -73px -217px;
}

.xs-icons-menu19 {
    background-position: -120px -217px;
}
.el-tree-node__content .el-icon-plus {
    margin-right: 20px;
}
.el-tag {
    margin: 0 0 10px 10px;
    cursor: pointer;
}
.danger {
    color: #f00;
}
.roleForm .el-form-item__content {
    margin-top: 13px;
}
.el-tree-node__content:hover {
    background-color: #bbdffb;
}
.el-tree-node:focus .el-tree-node__content {
    background-color: #bbdffb;
}
.el-tree .is-current .el-tree-node__content {
    background-color: #bbdffb;
}
</style>
