xt-ems-front/src/views/systemConfig/components/functionMain.vue

<template>
    <div class="functionDiv">
        <div class="MainLeft">
            <div class="public-function-div">导航树
                <el-button
                    @click="setCheckedNodes"
                    size="small"
                    class="refresh"
                >展开</el-button>
                <el-button
                    @click="setCheckedKeys"
                    size="small"
                    class="refresh2"
                >收起</el-button>
                <el-button
                    type="primary"
                    @click="handleReset('formItem')"
                    size="small"
                    class="refresh3"
                    v-privilege="activeMenu + 'ADD'"
                >新增顶级菜单</el-button>
            </div>
            <el-input
                placeholder="输入关键字进行过滤"
                class="filterTree"
                v-model="filterText"
            >
            </el-input>
            <el-tree
                ref="menuTree"
                :data="menuTree"
                :props="defaultProps"
                node-key="id"
                :default-expanded-keys="expandedKeys"
                draggable
                v-loading='treeLoading'
                @node-expand="expandNode"
                @node-collapse="expandCollapse"
                @node-drag-start="handleDragStart"
                @node-drag-end="handleDragEnd"
                :expand-on-click-node="true"
                @node-click="nodeClick"
                :style="{height: treeHeight + 'px'}"
                :filter-node-method="filterOrgTree"
            >
                <span class="fun-st-ellipsis" style="position: relative; width: 100%; font-size: 14px;" slot-scope="{ node, data }">
                    <span :style="(data.status === '0' || node.parent.data.status === '0') ? 'color: #a09e9e;' : ''">{{ node.label }}</span>
                    <span style="position: absolute; right: 0px;">
                        <i v-if="data.menuType === '1'" class='el-icon-plus xl-icon-size addMenuPr' @click.stop="addTreeNode(node, data)"></i>
                        <i class='el-icon-delete xl-icon-size delMenuPr' @click.stop="delTreeNode(node, data)"></i>
                    </span>
                </span>
            </el-tree>
        </div>
        <div class="MainRight">
            <el-button
                type="primary"
                @click="menuExport"
                size="small"
                class="exportButton"
                v-privilege="activeMenu + 'EXPORT'"
            >导出</el-button>
            <el-tabs v-model="activeName">
                <el-tab-pane
                    label="编辑区"
                    name="editForm"
                >
                    <el-form
                        ref="formItem"
                        :model="formItem"
                        :rules="ruleValidate_formItem"
                        label-width="80px"
                        class="FormMain"
                    >
                        <el-row>
                            <el-col :span="24">
                                <el-form-item
                                    label="父菜单"
                                    prop="pName"
                                >
                                    <el-input
                                        v-model="formItem.pName"
                                        disabled
                                        size="small"
                                        style="vertical-align:top;"
                                    >
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="功能类型">
                                    <el-select
                                        v-model="formItem.menuType"
                                        prop="menuType"
                                        style="width: 100%;"
                                        @change="changeType"
                                        size="small"
                                    >
                                        <el-option
                                            v-for="item in formItem_type_data"
                                            :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="status"
                                >
                                    <el-select
                                        v-model="formItem.status"
                                        prop="menuType"
                                        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="menuName">
                            <el-input v-model="formItem.menuName"
                                        placeholder="请输入"
                                        size="small"></el-input>
                            </el-form-item>
                        </el-col> -->
                            <el-col :span="12">
                                <el-form-item
                                    label="菜单名称"
                                    prop="menuLabel"
                                >
                                    <el-input
                                        v-model="formItem.menuLabel"
                                        placeholder="请输入"
                                        size="small"
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item
                                    label="菜单图标"
                                    v-if="formItem.menuType === '1' && !formItem.pId"
                                    prop="menuIcon"
                                >
                                    <!-- <el-input v-model="formItem.menuIcon"
                                        placeholder="请输入"
                                        size="small"></el-input> -->
                                    <el-select
                                        v-model="formItem.menuIcon"
                                        placeholder="请选择"
                                        size="small"
                                    >
                                        <el-option
                                            v-for="item in icons"
                                            :key="item.icon"
                                            :label="item.value"
                                            :value="item.value"
                                        >
                                            <span style="float: left;"><i
                                                    class="xs-menu-icons"
                                                    :class="item.value"
                                                ></i></span>
                                            <span style="float: left; margin-left:20px;">{{ item.value }}</span>
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <!--
                        <el-col :span="12">
                            <el-form-item label="控件编号"
                                        prop="privilege">
                            <el-input v-model="formItem.privilege"
                                        :disabled="Number(formItem.menuType) !== 2"
                                        placeholder="请输入"
                                        size="small"></el-input>
                            </el-form-item>
                        </el-col>                         -->
                            <!-- <el-col :span="12">
                            <el-form-item label="同级排序"
                                        prop="seq">
                            <el-input v-model="formItem.seq"
                                        placeholder="请输入"
                                        size="small"></el-input>
                            </el-form-item>
                        </el-col> -->

                        </el-row>

                        <el-form-item
                            label="URL"
                            v-if="formItem.menuType === '4'"
                            prop="menuUrl"
                        >
                            <el-input
                                v-model="formItem.menuUrl"
                                type="textarea"
                                :autosize="{minRows: 3,maxRows: 5}"
                                placeholder="请输入"
                                style="width:100%"
                            ></el-input>
                        </el-form-item>

                        <!-- <el-form-item label="备注"
                                    prop="menuTip">
                        <el-input v-model="formItem.menuTip"
                                    type="textarea"
                                    :autosize="{minRows: 3,maxRows: 5}"
                                    placeholder="请输入"
                                    style="width:100%"></el-input>
                        </el-form-item> -->
                        <!-- <el-tag
                            :key="index"
                            v-for="(item, index) in functionTable"
                            closable
                            :disable-transitions="false"
                            @click.native="editFncMenu(item,index)"
                            @close="handleClose(item.id, index)">
                            {{item.menuLabel}}
                        </el-tag>
                        <el-button class="button-new-tag" size="small" @click="functionVis = true">+ 添加功能</el-button> -->
                        <el-form-item v-show="operateStatus === 'edit'">
                            <el-button
                                style="float:right;"
                                :loading="addLoading1"
                                type="primary"
                                size="small"
                                v-privilege=" activeMenu + 'EDIT'"
                                @click="handleSubmit('formItem')"
                            >保存</el-button>
                        </el-form-item>
                        <el-form-item v-show="operateStatus !== 'edit'">
                            <el-button
                                style="float:right;"
                                :loading="addLoading2"
                                type="primary"
                                size="small"
                                v-privilege="activeMenu + 'ADD'"
                                @click="handleSubmit('formItem')"
                            >添加</el-button>
                        </el-form-item>
                    </el-form>
                    <el-form>
                        <el-button
                            @click="addNewFunc"
                            v-if="formItem.menuType === '4'"
                            size="small"
                            type="primary"
                            style="margin: 0 0 10px 20px;"
                            v-privilege="activeMenu + 'FUNADD'"
                        >新增功能</el-button>
                        <!-- <el-checkbox
                            v-model="icoreFilterFlag"
                            @change="changeVal"
                            v-if="formItem.menuType === '4'"
                        >过滤</el-checkbox> -->
                        <el-table stripe
                            ref="funTable"
                            v-if="formItem.menuType === '4'"
                            style="margin: 0 0 0 20px;"
                            border
                            @icoreFilterChange="icoreFilterChange"
                            :icore-filter-flag="icoreFilterFlag"
                            :height="funHeight"
                            :highlight-current="true"
                            :data="functionTable"
                        >
                            <el-table-column
                                prop="menuLabel"
                                label="功能名称"
                                :show-overflow-tooltip="true"
                                :key="Math.random()"
                                fixed="left"
                                align="center"
                            >
                                <template slot-scope="scope">
                                    <span v-if="!scope.row.addEdit">{{scope.row.menuLabel}}</span>
                                    <el-input
                                        v-else
                                        size="mini"
                                        v-model="scope.row.menuLabel"
                                    ></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="privilege"
                                :show-overflow-tooltip="true"
                                label="控件编号"
                                fixed="left"
                                :key="Math.random()"
                                align="center"
                            >
                                <template slot-scope="scope">
                                    <span v-if="!scope.row.addEdit">{{scope.row.privilege}}</span>
                                    <el-input
                                        v-else
                                        size="mini"
                                        v-model="scope.row.privilege"
                                    ></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column
                                label="操作"
                                type="noFilter"
                                :key="Math.random()"
                                align="center"
                            >
                                <template slot-scope="scope">
                                    <el-button
                                        type="primary"
                                        size="small"
                                        v-if="!scope.row.addEdit"
                                        @click="editTableRow(scope.row)"
                                        style="margin:0 10px;"
                                        v-show="editPr"
                                    >编辑</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"
                                        style="margin:0 10px;"
                                        @click="handleClose(scope.row)"
                                        v-show="delPr"
                                    >删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane
                    label="用户列表"
                    name="userList"
                >
                    <el-table stripe
                        ref="userTable"
                        v-loading="userTable.loading"
                        @filter-change="filterChange"
                        border
                        :height="treeHeight"
                        highlight-current-row
                        :data="userTable.list"
                    >
                        <el-table-column
                            :show-overflow-tooltip="true"
                            prop="userCode"
                            label="账户"
                            :filter-method="filterColumn"
                            min-width="150"
                        ></el-table-column>
                        <el-table-column
                            :show-overflow-tooltip="true"
                            prop="userName"
                            label="用户姓名"
                            :filter-method="filterColumn"
                            min-width="150"
                        ></el-table-column>
                        <el-table-column
                            :show-overflow-tooltip="true"
                            prop="orgName"
                            label="机构"
                            :filter-method="filterColumn"
                            min-width="150"
                        >
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </div>
        <el-dialog
            title="是否重置菜单顺序"
            :visible.sync="showDelet"
            width="30%"
            center
        >
            <span
                slot="footer"
                class="dialog-footer"
            >
                <el-button @click="showDelet = false">取 消</el-button>
                <el-button
                    type="danger"
                    @click="resetSeq"
                >确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import store from '@/store/index.js';
import { dgTree, objAssign } from '@/utils/util.js';
import { checkCharLength, checkCharLength2, checkCharNoChinese, checkCharNoChinese2, checkChar, checkChinese, checkChar2 } from '@/utils/validator.js';
import FileSaver from 'file-saver';
export default {
    data () {
        return {
            icoreFilterFlag: false,
            filterText: '',
            store,
            activeMenu: '',
            //  操作状态
            operateStatus: 'add',
            funHeight: 300,
            treeHeight: 600,
            addLoading1: false,
            addLoading2: false,
            showDelet: false,
            menuTableData: [],
            menuTableKeys: [
                {
                    key: 'menuLabel',
                    label: '菜单名称',
                    width: 'auto'
                },
                {
                    key: 'menuType',
                    label: '功能类型',
                    width: 'auto'
                },
                {
                    key: 'pMenuLabel',
                    label: '父菜单',
                    width: 'auto'
                },
                {
                    key: 'status',
                    label: '状态',
                    width: 'auto'
                },
                {
                    key: 'menuUrl',
                    label: 'URL',
                    width: 'auto'
                },
                {
                    key: 'funMenu',
                    label: '功能控件',
                    width: 'auto'
                }
            ],
            formItem: {
                'id': '',
                'pId': '',
                'pName': '',
                'menuType': '1',
                'menuCode': '',
                'menuUrl': '',
                'menuName': '',
                'menuLabel': '',
                'status': '1',
                'seq': '',
                'menuTip': '',
                'menuIcon': '',
                'privilege': ''
            },
            menuStatus: [
                {
                    label: '停用',
                    value: '0'
                }, {
                    label: '启用',
                    value: '1'
                }
            ],
            icons: [
                {
                    icon: '',
                    value: '无'
                },
                {
                    icon: 'xs-icons-menu1',
                    value: 'xs-icons-menu1'
                },
                {
                    icon: 'xs-icons-menu2',
                    value: 'xs-icons-menu2'
                },
                {
                    icon: 'xs-icons-menu3',
                    value: 'xs-icons-menu3'
                },
                {
                    icon: 'xs-icons-menu4',
                    value: 'xs-icons-menu4'
                },
                {
                    icon: 'xs-icons-menu5',
                    value: 'xs-icons-menu5'
                },
                {
                    icon: 'xs-icons-menu6',
                    value: 'xs-icons-menu6'
                },
                {
                    icon: 'xs-icons-menu7',
                    value: 'xs-icons-menu7'
                },
                {
                    icon: 'xs-icons-menu8',
                    value: 'xs-icons-menu8'
                },
                {
                    icon: 'xs-icons-menu9',
                    value: 'xs-icons-menu9'
                },
                {
                    icon: 'xs-icons-menu10',
                    value: 'xs-icons-menu10'
                },
                {
                    icon: 'xs-icons-menu11',
                    value: 'xs-icons-menu11'
                },
                {
                    icon: 'xs-icons-menu12',
                    value: 'xs-icons-menu12'
                },
                {
                    icon: 'xs-icons-menu13',
                    value: 'xs-icons-menu13'
                },
                {
                    icon: 'xs-icons-menu14',
                    value: 'xs-icons-menu14'
                },
                {
                    icon: 'xs-icons-menu15',
                    value: 'xs-icons-menu15'
                },
                {
                    icon: 'xs-icons-menu16',
                    value: 'xs-icons-menu16'
                },
                {
                    icon: 'xs-icons-menu17',
                    value: 'xs-icons-menu17'
                },
                {
                    icon: 'xs-icons-menu18',
                    value: 'xs-icons-menu18'
                },
                {
                    icon: 'xs-icons-menu19',
                    value: 'xs-icons-menu19'
                }
            ],
            ruleValidate_formItem: {
                menuCode: [
                    { required: true, message: '菜单编码不能为空', trigger: 'change' },
                    { validator: checkCharNoChinese, trigger: 'change' },
                    { validator: checkCharLength2, max: 36, trigger: 'change' }
                ],
                menuType: [
                    { required: true, message: '功能类型不能为空', trigger: 'change' }
                ],
                menuName: [
                    { required: true, message: '名称不能为空', trigger: 'change' },
                    { validator: checkCharLength, max: 100, trigger: 'change' }
                ],
                menuLabel: [
                    { required: true, message: '菜单名称不能为空', trigger: 'change' },
                    { validator: checkCharLength, max: 100, trigger: 'change' },
                    { validator: checkChar2, trigger: 'change' }
                ],
                menuTip: [
                    { validator: checkCharLength, max: 100, trigger: 'change' }
                ],
                menuUrl: [
                    { required: true, message: 'URL不能为空', trigger: 'change' },
                    { validator: checkCharLength, max: 1500, trigger: 'change' }
                ],
                menuIcon: [
                    { validator: checkCharLength, max: 100, trigger: 'change' }
                ],
                status: [
                    { required: true, message: '请选择菜单状态', trigger: 'change' }
                ],
                privilege: [
                    { validator: checkCharNoChinese, trigger: 'change' }
                ]
            },
            fncRule: {
                privilege: [
                    { validator: checkCharNoChinese, trigger: 'change' }
                ],
                menuLabel: [
                    { required: true, message: '功能名称不能为空', trigger: 'change' },
                    { validator: checkCharLength, max: 40, trigger: 'change' }
                ]
            },
            formLenMessage: {

            },
            formItem_type_data: [
                {
                    value: '1',
                    label: '菜单'
                }
            ],
            formItem_type_data_nopage: [
                {
                    value: '1',
                    label: '菜单'
                }
            ],
            formItem_type_data_havePage: [
                {
                    value: '1',
                    label: '菜单'
                },
                {
                    value: '4',
                    label: '页面'
                }
            ],
            formItem_type_data_noMenu: [
                {
                    value: '4',
                    label: '页面'
                }
            ],
            // el tabs
            activeName: 'editForm',
            //  机构树
            orgTree: {
                tree: [],
                items: [],
                item: {},
                //  默认配置数据对应项
                defaultProps: {
                    children: 'children',
                    label: 'orgName'
                },
                //  默认展开的ID数组
                expandedKeys: []
            },
            // 用户列表
            userTable: {
                height: 600,
                loading: false,
                list: [],
                listBack: [],
                //  选中项
                items: [],
                item: {},
                tableParams: JSON.parse(JSON.stringify(store.state.tableParams)),
                menuTreeBack: []
            },
            functionTable: [],
            functionTableFObj: null,
            defaultFuncTable: [{
                pId: '',
                menuType: '2',
                menuLabel: '新增',
                privilege: 'ADD',
                status: '1',
                addEdit: false
            }, {
                pId: '',
                menuType: '2',
                menuLabel: '查询',
                privilege: 'QUERY',
                status: '1',
                addEdit: false
            }, {
                pId: '',
                menuType: '2',
                menuLabel: '修改',
                privilege: 'PUT',
                status: '1',
                addEdit: false
            }, {
                pId: '',
                menuType: '2',
                menuLabel: '删除',
                privilege: 'DELETE',
                status: '1',
                addEdit: false
            }],
            fncFrom: {
                id: '',
                pId: '',
                menuType: '2',
                menuLabel: '',
                privilege: '',
                status: '1'
            },
            activeTree: [],
            buttonLoading: false,
            editPr: true,
            delPr: false,
            expandList: [],
            treeLoading: 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);
        }
    },
    computed: {
        //  菜单树数据
        menuTree () {
            let menuTree = this.store.state.system.functionMain.menuTree;
            return menuTree;
        },
        //  树配置
        defaultProps () {
            return this.store.state.system.functionMain.defaultProps;
        },
        //  展开数组
        expandedKeys: {
            get: function () {
                return this.store.state.system.functionMain.expandedKeys;
            },
            set: function (data) {
                this.store.commit('system/functionMain/expandedKeys', data);
            }
        },
        //  选中节点数据
        menuItem () {
            return this.store.state.system.functionMain.item;
        }
    },
    methods: {
        expandNode (data, node, item) {
            if (this.expandList.indexOf(data.id) === -1) {
                this.expandList.push(data.id)
            }
            this.$nextTick(() => {
                $('.delMenuPr').css('display', this.checkPrivilege(this.activeMenu + 'MENUDELET') ? 'inline-block' : 'none')
                $('.addMenuPr').css('display', this.checkPrivilege(this.activeMenu + 'MENUADD') ? 'inline-block' : 'none')
            })
        },
        expandCollapse (data, node, item) {
            let index = this.expandList.indexOf(data.id)
            if (index !== -1) {
                this.expandList.splice(index, 1)
            }
        },
        handleDragEnd (draggingNode, dropNode, dropType, ev) {
            let that = this;
            // console.log('tree drag end: ', dropNode && dropNode.label, dropType);
            // console.log('tree draggingNode: ', draggingNode);
            // console.log('tree dropNode: ', dropNode);
            // console.log('tree dropType: ', dropType);
            // console.log('tree ev: ', ev);
            let a = dropNode.data && dropNode.data.menuType !== '1';
            // if (draggingNode.data.children) {
            //     that.$message.error('含有子菜单的节点不允许直接拖动')
            //     that.initData();
            // } else 
            if (draggingNode.data.menuType === '2') {
                that.$message.error('功能菜单不允许拖拽')
                that.initData();
            } else if (dropType === 'inner' && a) {
                that.$message.error('菜单不能移动到页面下')
                that.initData();
            } else {
                var changeList = [draggingNode.data, dropNode.data];
                this.store.dispatch('system/functionMain/dragMenu', { 'dropType': dropType, 'changeList': changeList }).then(res => {
                    if (res.code === '0') {
                        this.$message.success('修改成功');
                    } else {
                        this.$message({ message: res.message, type: 'error' });
                    }
                });
            }
        },
        handleDragStart (draggingNode, dropNode, dropType, ev) {
            this.menuTreeBack = this.menuTree;
        },
        initData () {
            //  查询列表
            this.treeLoading = true;
            this.store.dispatch('system/functionMain/menuTree').then(res => {
                if (res.code === '0') {
                    this.store.commit('system/functionMain/menuTree', res.data);
                    this.store.commit('system/functionMain/expandedKeys', this.expandList);
                    this.menuTableData = this.upToTableData(res.data, '', []);
                    this.$nextTick(() => {
                        $('.delMenuPr').css('display', this.checkPrivilege(this.activeMenu + 'MENUDELET') ? 'inline-block' : 'none')
                        $('.addMenuPr').css('display', this.checkPrivilege(this.activeMenu + 'MENUADD') ? 'inline-block' : 'none')
                    })
                    this.treeLoading = false;
                } else {
                    this.$message({ message: res.message, type: 'error' });
                }
            });
            this.getOrg();
        },
        // 将树形数据转为列表
        upToTableData (tree, pName, arr) {
            if (!!tree && tree.length !== 0) {
                tree.forEach(item => {
                    let obj = {}
                    obj['菜单名称'] = item.menuLabel;
                    if (item.menuType === '1') { 
                        obj['功能类型'] = '菜单';
                    } else {
                        obj['功能类型'] = '页面';
                    }
                    obj['父菜单'] = pName ? pName : '';
                    if (item.status === '1') { 
                        obj['状态'] = '启用';
                    } else {
                        obj['状态'] = '停用';
                    }
                    obj['菜单图标'] = item.menuIcon ? item.menuIcon : '';
                    obj['URL'] = item.menuUrl === null ? '' : item.menuUrl;
                    if (item.funChildren && item.funChildren.length > 0) {
                        let str = '';
                        for (let funObj of item.funChildren) {
                            if (str === '') {
                                str += funObj.menuLabel + '-' + funObj.privilege;
                            } else {
                                str += '、' + funObj.menuLabel + '-' + funObj.privilege;
                            }
                        }
                        obj['功能控件'] = str;
                    } else {
                        obj['功能控件'] = '';
                    }
                    arr.push(obj)
                    if (item.children && item.children.length > 0) {
                        this.upToTableData(item.children, item.menuLabel, arr);
                    }
                })
            }
            return arr
        },
        //  点击树事件
        nodeClick (item, el) {
            let that = this;
            this.icoreFilterFlag = false;
            //  放入
            this.store.commit('system/functionMain/item', item);
            //  加入
            this.formItem = objAssign(this.formItem, item);
            this.formItem.pName = el.parent.label;

            //  点击时为编辑状态
            this.operateStatus = 'edit';
            if (this.activeName === 'userList') {
                this.getMenuUser(item)
            }
            if (item.menuType === '4') {
                this.$nextTick(() => {
                    this.funHeight = this.getTreeHeight(this.$refs['funTable'].$el) - 70;
                    this.icoreFilterFlag = false;
                })
            }
            // 判断菜单下是否有页面
            let havPage = this.checkHavePage(item);
            if (item.funChildren) {
                let arr = [];
                for (let i = 0; i < item.funChildren.length; i++) {
                    item.funChildren[i].addEdit = false;
                    arr.push(item.funChildren[i])
                }
                this.functionTable = arr;
                this.functionTableFObj = item.funChildren;
                this.$nextTick(() => {
                    this.editPr = this.checkPrivilege(this.activeMenu + 'FUNEDIT');
                    this.delPr = this.checkPrivilege(this.activeMenu + 'FUNDELETE');
                })
            } else {
                this.functionTable = [];
            }
            if (item.menuType === '1' && havPage) {
                this.formItem_type_data = this.formItem_type_data_nopage;
            } else if (item.menuType === '4') {
                this.formItem_type_data = this.formItem_type_data_noMenu;
            } else {
                this.formItem_type_data = this.formItem_type_data_havePage
            }
        },
        //  清空 清空为添加，添加直接添加顶级目录
        handleReset (name) {
            this.$refs[name].resetFields();
            this.operateStatus = 'add';
            // 默认为菜单
            this.formItem.menuType = '1';
            this.formItem_type_data = this.formItem_type_data_nopage;
        },
        //  添加点击
        addTreeNode (node, item) {
            this.formItem_type_data = this.formItem_type_data_havePage;
            this.operateStatus = 'add';
            this.$refs['formItem'].resetFields();

            //  设置pId为当前ID
            this.formItem.pId = item.menuId;
            this.formItem.pName = item.menuLabel;
            //  清空ID
            this.formItem.id = '';
            this.formItem.menuUrl = '';
            this.formItem.menuLabel = '';
            // 添加默认功能菜单
            let arr = [];
            for (let i = 0; i < this.defaultFuncTable.length; i++) {
                arr.push(this.defaultFuncTable[i]);
            }
            this.functionTable = arr;
        },
        //  计算树区域高度
        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;
        //     //   }
        //     if (data.menuType === '1') {
        //         render = [
        //             h('span', {
        //                 class: 'el-icon-delete xl-icon-size delMenuPr',
        //                 attrs: {
        //                     title: '删除'
        //                 },
        //                 on: {
        //                     click: (event) => {
        //                         this.delTreeNode(node, data);
        //                         event.stopPropagation();
        //                     }
        //                 }
        //             })
        //         ];
        //         //  如果是菜单增加 添加按钮
        //         render = [h('span', {
        //             class: 'el-icon-plus xl-icon-size addMenuPr',
        //             attrs: {
        //                 title: '添加'
        //             },
        //             on: {
        //                 click: (event) => {
        //                     this.addTreeNode(node, data, event);
        //                     event.stopPropagation();
        //                     this.formItem_type_data = this.formItem_type_data_havePage;
        //                 }
        //             }
        //         })].concat(render);
        //     } else {
        //         render = [
        //             h('span', {
        //                 class: 'el-icon-delete xl-icon-size delMenuPr',
        //                 attrs: {
        //                     title: '删除'
        //                 },
        //                 on: {
        //                     click: (event) => {
        //                         this.delTreeNode(node, data);
        //                         event.stopPropagation();
        //                     }
        //                 }
        //             })
        //         ].concat(render);
        //     }
        //     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) {
            if ((data.children && data.children.length > 0) || (node.childNodes && node.childNodes.length > 0) || (data.funChildren && data.funChildren.length > 0) || (node.funChildren && node.funChildren.length > 0)) {
                this.$message.error('此节点有子节点或者功能，不允许直接删除');
                return false;
            }
            //
            this.$confirm('确定要删除已选择的记录吗？', '提示', {
                customClass: 'org-Manage-changeprimaryforbutton',
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.store.dispatch('system/functionMain/delMenu', 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.store.dispatch('system/functionMain/editMenu', { id: this.menuItem.id, form: this.formItem }).then(res => {
                                //
                                this.addLoading1 = false;
                                //
                                if (res.code === '0') {
                                    this.$message.success('保存成功');
                                    //
                                    this.formItem = objAssign(this.formItem, res.data);
                                    //  更新菜单项
                                    dgTree(this.menuTree, 'children', item => {
                                        if (item.id === this.formItem.id) {
                                            item.id = this.formItem.id;
                                            item.pId = this.formItem.pId;
                                            item.menuType = this.formItem.menuType;
                                            item.menuCode = this.formItem.menuCode;
                                            item.menuUrl = this.formItem.menuUrl;
                                            item.menuName = this.formItem.menuName;
                                            item.menuLabel = this.formItem.menuLabel;
                                            item.status = this.formItem.status;
                                            item.menuTip = this.formItem.menuTip;
                                            item.menuIcon = this.formItem.menuIcon;
                                        }
                                    });
                                    // this.store.commit('system/functionMain/menuTree', this.menuTree);
                                    this.initData();
                                    this.$refs['menuTree'].setCurrentKey(res.data.id);
                                } else {
                                    this.$message({ message: res.message, type: 'error' });
                                }
                            });
                        }).catch(() => {
                            this.$message({
                                type: 'info',
                                message: '已取消操作'
                            });
                        });
                    } else if (this.operateStatus === 'add') {
                        //   添加
                        this.addLoading2 = true;
                        //
                        this.store.dispatch('system/functionMain/addMenu', this.formItem).then(res => {
                            //
                            this.addLoading2 = false;
                            //
                            if (res.code === '0') {
                                this.$message.success('添加成功');
                                //  更新树
                                this.$refs['menuTree'].append(res.data, this.formItem.pId);
                                this.$refs['menuTree'].setCurrentKey(res.data.id);
                                this.$nextTick(() => {
                                    $('.delMenuPr').css('display', this.checkPrivilege('480431426513276928DELET') ? 'inline-block' : 'none')
                                    $('.addMenuPr').css('display', this.checkPrivilege('480431426513276928ADD') ? 'inline-block' : 'none')
                                })
                                this.initData();
                                if (res.data.menuType === '4') {
                                    this.addNewFunctionMain(res.data.id);
                                }
                                res.data.funChildren = [];
                                this.functionTableFObj = res.data.funChildren;
                            } else {
                                this.$message({ message: res.message, type: 'error' });
                            }
                        });
                    }
                }
            })
        },
        // 树形控件过滤数据
        filterOrgTree (value, data) {
            if (!value) return true;
            return data.menuLabel.indexOf(value) !== -1;
        },
        // 重置菜单顺序
        resetSeq () {
            let that = this;
            that.axios.get('/pass/v1/sysmenus/resetSeq').then(function (res) {
                if (res.code === '0') {
                    that.$message.success('重置菜单排序成功')
                    that.initData();
                    that.showDelet = false;
                } else {
                    that.$message.error(res.message);
                    that.showDelet = false;
                }
            }).catch(function () {
                // do some thing
            })
        },
        // 用户过滤
        filterChange (filters) {
            var _this = this;
            _this.setFilterDatas(_this.$refs.userTable.columns, _this.$refs.userTable.tableData, ['userCode', 'userName', 'orgName']);
            //   _this.tableParams.page.total = _this.$refs.userTable.tableData.length;
        },
        // 查询机构名称
        getOrgName (list, code) {
            var name = '';
            for (let i = 0; i < list.length; i++) {
                try {
                    if (list[i].orgCode === code) {
                        name = list[i].orgName
                        return name
                    } else if (list[i].children && list[i].children.length >= 1) {
                        name = this.getOrgName(list[i].children, code);
                        if (name) {
                            return name
                        }
                    }
                } catch (error) {
                    console.log(error)
                }
            }
            return name;
        },
        getOrg () {
            //  查询机构树
            this.store.dispatch('system/organizManage/tree').then(res => {
                if (res.code === '0') {
                    dgTree(res.data, 'children', item => {
                        if ('children' in item && item.children.length < 1) {
                            delete item.children;
                        }
                    });
                    this.orgTree.tree = res.data;
                    this.getUser(this.userTable.tableParams.form);
                } else {
                    this.$message.error(res.message);
                }
            });
        },
        // 获取用户列表
        getUser (form) {
            let _this = this;
            form.pageSize = '1000000';
            this.store.dispatch('system/usersManage/list', form).then(res => {
                if (res.code === '0') {
                    this.userTable.list = res.data.list;
                    this.userTable.listBack = res.data.list;
                    this.userTable.tableParams.form.pageNum = res.data.pageNum;
                    this.userTable.tableParams.form.pageSize = res.data.pageSize;
                    this.userTable.tableParams.page.total = res.data.total;
                    for (let a = 0; a < this.userTable.list.length; a++) {
                        this.userTable.list[a].orgName = this.getOrgName(this.orgTree.tree, this.userTable.list[a].orgCode)
                        this.userTable.listBack[a].orgName = this.getOrgName(this.orgTree.tree, this.userTable.list[a].orgCode)
                    }
                    // 设置过滤数据 setFilterDatas(列数组对象, 数据, 需要过滤的字段, 列名转义对象)
                    _this.setFilterDatas(_this.$refs.userTable.columns, _this.userTable.list, ['userCode', 'userName', 'orgName']);
                } else {
                    this.$message.error(res.message);
                    this.userTable.tableParams.form.pageNum = 1;
                    this.userTable.tableParams.page.total = 0;
                }
            });
        },
        // 获取指定菜单下用户列表
        getMenuUser (item) {
            let that = this;
            that.axios.get('pass/v1/sysuserroles/selectByMenuId/' + item.id).then((res) => {
                if (res.code === '0') {
                    that.userTable.list = res.data;
                    for (let i = 0; i < that.userTable.listBack.length; i++) {
                        for (let j = 0; j < that.userTable.list.length; j++) {
                            if (that.userTable.listBack[i].userCode === that.userTable.list[j].userCode) {
                                that.userTable.list[j].userName = that.userTable.listBack[i].userName
                                that.userTable.list[j].orgName = that.userTable.listBack[i].orgName
                            }
                        }
                    }
                    if (res.data.length === 0) {
                        that.$refs.userTable.columns[0].filters = [];
                        that.$refs.userTable.columns[1].filters = [];
                        that.$refs.userTable.columns[2].filters = [];
                    }
                    that.setFilterDatas(that.$refs.userTable.columns, res.data, ['userCode', 'userName', 'orgName']);
                } else {
                    this.$message.error(res.message)
                }
            }).catch(() => {
                that.$message.error('请求失败')
            })
        },
        changeType (val) {
            if (val !== 2) {
                this.formItem.privilege = ''
            }
            if (val === '4') {
                this.$nextTick(() => {
                    this.funHeight = this.getTreeHeight(this.$refs['funTable'].$el) - 70
                })
            }
        },
        // 新增多个功能菜单
        addNewFunctionMain (id) {
            let that = this;
            if (this.functionTable.length > 0) {
                for (let i = 0; i < this.functionTable.length; i++) {
                    this.functionTable[i].pId = id;
                }
                that.axios.put('pass/v1/sysmenus/bathInsert', JSON.stringify(that.functionTable)).then((res) => {
                    if (res.code === '0') {
                        // do some thing
                        that.initData();
                        // that.functionTableFObj.splice(0,arr.length);
                        that.axios.get('pass/v1/sysmenus/?pId=' + id)
                        .then((res1) => {
                            if (res1.code === '0') {
                                for (let item of res1.data.list) {
                                    that.functionTableFObj.push(item);
                                }
                            }
                            else {
                                this.$message.error(res1.message)
                            }
                        })
                    } else {
                        this.$message.error(res.message)
                    }
                }).catch((error) => {
                    that.$message.error(error);
                })
            }
        },
        // 删除菜单
        handleClose (row) {
            let that = this;
            let index = that.getRowIndex(row.privilege, 2);
            if (row.id) {
                this.$confirm('确定要删除已选择的记录吗？', '提示', {
                    customClass: 'org-Manage-changeprimaryforbutton',
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.store.dispatch('system/functionMain/delMenu', row.id).then(res => {
                        if (res.code === '0') {
                            this.$message.success('删除成功');
                            this.initData();
                            that.functionTable.splice(index, 1);
                            for (let indexf = 0; indexf < that.functionTableFObj.length; indexf++) {
                                if (that.functionTableFObj[indexf].id === row.id) {
                                    // 删除树节点中绑定的对应数据
                                    that.functionTableFObj.splice(indexf, 1);
                                    break;
                                }
                            }
                        } 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: 40,
                    required: true,
                    errName: '功能名称'
                };
                let rule2 = {
                    max: 36,
                    required: true,
                    errName: '控件编号'
                }
                this.checkCharLength(rule, row.menuLabel, '功能名称不能为空');
                this.checkCharLength(rule2, row.privilege, '控件编号不能为空')
                this.checkCharNoChinese(row.privilege);
                if (this.formItem.id) {
                    if (!row.id) {
                        this.store.dispatch('system/functionMain/addMenu', row).then(res => {
                            this.addLoading2 = false;
                            if (res.code === '0') {
                                this.$message.success('添加成功');
                                res.data.addEdit = false;
                                this.functionTable[this.getRowIndex(res.data.privilege, 2)] = res.data;
                                row.addEdit = false;
                                this.functionTableFObj.push(res.data);
                                this.initData();
                            } else {
                                this.$message({ message: res.message, type: 'error' });
                            }
                        });
                    } else {
                        this.store.dispatch('system/functionMain/editMenu', { id: row.id, form: row }).then(res => {
                            this.addLoading1 = false;
                            if (res.code === '0') {
                                this.$message.success('保存成功');
                                this.getRowIndex(res.data);
                                row.addEdit = false;
                                for (let i = 0; i < this.functionTableFObj.length; i++) {
                                    if (row.id === this.functionTableFObj[i].id) {
                                        for (let key in this.functionTableFObj[i]) {
                                            this.functionTableFObj[i][key] = row[key];
                                        }
                                        break;
                                    }
                                }
                                this.initData();
                            } else {
                                this.$message({ message: res.message, type: 'error' });
                            }
                        });
                    }
                } else {
                    let arr = row;
                    let idx = this.getRowIndex(row.privilege, 1);
                    arr.menuType = '2';
                    arr.status = '1';
                    arr.addEdit = false;
                    this.functionTable[idx] = arr;
                }
            } catch (err) {
                this.$message.error(err.message)
            }
            this.buttonLoading = false;
        },
        editTableRow (row) {
            let that = this;
            if (row.menuId) {
                for (let i = 0; i < that.functionTable.length; i++) {
                    if (that.functionTable[i].menuId === row.menuId) {
                        that.functionTable[i].addEdit = true;
                    }
                }
            } else {
                for (let i = 0; i < that.functionTable.length; i++) {
                    if (that.functionTable[i].menuLabel === row.menuLabel) {
                        that.functionTable[i].addEdit = true;
                    }
                }
            }
        },
        // 新增一条空数据
        addNewFunc () {
            let obj = {
                id: '',
                pId: this.formItem.id || '',
                menuType: '2',
                menuLabel: '',
                privilege: '',
                status: '1',
                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].privilege === 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
        },
        checkHavePage (item) {
            let status = false
            if (item.children) {
                try {
                    for (let i = 0; i < item.children.length; i++) {
                        if (item.children[i].children && !item.children[i].funChildren) {
                            for (let b = 0; b < item.children[i].children.length; b++) {
                                status = this.checkHavePage(item.children[i].children)
                            }
                        } else if (item.children[i].funChildren) {
                            status = true
                            break
                        }
                    }
                } catch (err) {
                    console.log(err)
                }
            } else {
                status = false
            }
            return status
        },
        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;
            }
            this.$nextTick(() => {
                $('.delMenuPr').css('display', this.checkPrivilege(this.activeMenu + 'MENUDELET') ? 'inline-block' : 'none')
                $('.addMenuPr').css('display', this.checkPrivilege(this.activeMenu + 'MENUADD') ? 'inline-block' : 'none')
            })
        },
        setCheckedNodes () {
            this.defaultExpand = true; // 展开所有节点
            for (var i = 0; i < this.$refs.menuTree.store._getAllNodes().length; i++) {
                if (this.$refs.menuTree.store._getAllNodes()[i].data.status === '1') {
                    this.$refs.menuTree.store._getAllNodes()[i].expanded = this.defaultExpand;
                }
            }
            this.$nextTick(() => {
                $('.delMenuPr').css('display', this.checkPrivilege(this.activeMenu + 'MENUDELET') ? 'inline-block' : 'none')
                $('.addMenuPr').css('display', this.checkPrivilege(this.activeMenu + 'MENUADD') ? 'inline-block' : 'none')
            })
        },
        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;
                }
            })
        },
        // 菜单导出
        menuExport () {
            // if (this.menuTableData.length > 0) {
            //     let et = XLSX.utils.table_to_book(document.getElementById('menuExcel')); 
            //     let etout = XLSX.write(et, { 
            //         bookType: 'xlsx', 
            //         bookSST: true, 
            //         type: 'array',
            //         cellStyles: true
            //     });
            //     try {
            //         FileSaver.saveAs(new Blob([etout], { 
            //         type: 'application/octet-stream' 
            //         }), '新泰能源管控系统菜单详情.xlsx');   //导出的文件名
            //         this.$message({
            //             type: 'success',
            //             message: '正在为您导出...'
            //         });
            //     } catch (e) {
            //         console.log(e, etout) ;
            //     }
            //     return etout; 
            // } else {
            //     this.$message.error('当前无数据可供导出!');
            // }
            let data = this.menuTableData;
            if (data.length < 1) {
                this.$message.error('当前无数据可供导出!');
                return false;
            }
            // 表格标题
            var dataTitle = '新泰能源管控系统菜单详情';
            // 配置文件类型
            const wopts = { bookType: 'xlsx', bookSST: true, type: 'binary', cellStyles: true };
            this.downloadExl(data, wopts, dataTitle)
        },
        downloadExl(json, type, dataTitle) {
             // 设置表格中cell默认的字体，居中，颜色等
            var defaultCellStyle = {
                // font: {
                //     name: "宋体", sz: 11, color: { auto: 1 } ,
                // },
                // border: {
                //     color: { auto: 1 },
                //     top: { style: 'thin' },
                //     bottom: { style: 'thin'},
                //     left: { style: 'thin' },
                //     right: { style: 'thin' }
                // },
                alignment: {
                    /// 自动换行
                    wrapText: 1,
                        // 居中
                    // horizontal: "center",
                    // vertical: "center",
                    // indent: 0
                }
            };
            var tmpdata = json[0];
            json.unshift({});
            var keyMap = []; // 获取keys
            for (var k in tmpdata) {
                keyMap.push(k);
                json[0][k] = k;
            }
            var tmpdata = [];// 用来保存转换好的json 
            json.map((v, i) => {
                let data = keyMap.map((k, j) => {
                    // console.log(k,this.getCharCol(j));
                    return Object.assign({}, {
                        v: v[k],
                        position: (j > 25 ? this.getCharCol(j) : String.fromCharCode(65 + j)) + (i + 2)
                    });
                });
                return data;
            }).reduce((prev, next) => prev.concat(next)).forEach((v, i) => tmpdata[v.position] = {
                v: v.v,
                s: defaultCellStyle
            });
            var outputPos = Object.keys(tmpdata); // 设置区域,比如表格从A1到D10
            tmpdata["A1"] = {v:dataTitle};
            outputPos = ["A1"].concat(outputPos);
            tmpdata["A1"].s = { font: { sz: 14, bold: true, vertAlign:true }, alignment:{ vertical:"center", horizontal:"center" }};// <====设置xlsx单元格样式  fill: { bgColor: { rgb: "E8E8E8"}, fgColor: { rgb: "E8E8E8" } }
            tmpdata["!merges"] = [{
                s: { c: 0, r: 0 },
                e: { c: 6, r: 0 }
            }];// <====合并单元格 
            tmpdata["!cols"] = [
                {wpx: 150},
                {wpx: 100},
                {wpx: 150},
                {wpx: 100},
                {wpx: 150},
                {wpx: 400},
                {wpx: 400},
            ];// <====设置一列宽度 

            var tmpWB = {
                SheetNames: ['mySheet'], // 保存的表标题
                Sheets: {
                    'mySheet': Object.assign({},
                        tmpdata, // 内容
                        {
                            '!ref': outputPos[0] + ':' + outputPos[outputPos.length - 1] // 设置填充区域
                        }
                    )
                }
            };
            var tmpDown = new Blob([this.s2ab(XLSX.write(tmpWB,
                // 这里的数据是用来定义导出的格式类型
                { bookType: (type == undefined ? 'xlsx' : type.bookType), bookSST: false, type: 'binary' },  { defaultCellStyle: this.defaultCellStyle }
            ))], {
                type: ""
            });
            this.saveAs(tmpDown, "新泰能源管控系统菜单详情" + '.' + (type.bookType == "biff2" ? "xls" : type.bookType));
        },
        // 下载功能
        saveAs(obj, fileName) {
            var tmpa = document.createElement("a");
            tmpa.download = fileName || "未命名";
            // 兼容ie 
            if ("msSaveOrOpenBlob" in navigator) {
                window.navigator.msSaveOrOpenBlob(obj, "新泰能源管控系统菜单详情"+ ".xlsx");
            } else {
                tmpa.href = URL.createObjectURL(obj);
            }
            tmpa.click();
            setTimeout(function() {
                URL.revokeObjectURL(obj);
            }, 100);
        },
        // 获取26个英文字母用来表示excel的列
        getCharCol(n) {
            let temCol = '',
            s = '',
            m = 0
            while (n > 0) {
                m = n % 26 + 1
                s = String.fromCharCode(m + 64) + s
                n = (n - m) / 26
            }
            return s
        },
        s2ab(s) {
            if (typeof ArrayBuffer !== 'undefined') {
                var buf = new ArrayBuffer(s.length);
                var view = new Uint8Array(buf);
                for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
                return buf;
            } else {
                var buf = new Array(s.length);
                for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
                return buf;
            }
        }
    }

}
</script>
<style scope>
.functionDiv {
   position: relative;
   min-width: 1100px;
 }

.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;
}
.exportButton {
    position: absolute;
    right: 20px;
    top: 10px;
    z-index: 1999;
}
.FormMain {
    margin: 20px 20px;
}

.searchContent {
    margin: 20px 0px 0px 20px;
    text-align: left;
    width: 100%;
}
.public-function-div {
    height: 45px;
    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;
}
.public-function-div .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;
}
.delMenuPr,
.addMenuPr {
    display: none;
}
.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;
}
.is-current .el-tree-node__children .el-tree-node .el-tree-node__content {
    background-color: #fff;
}
</style>