<!-- 用户管理页面 -->
<template>
    <div class="user-page">
        <div class="left-pack">
            <div class="title-pack">组织机构列表</div>
            <div class="search-pack">
                <el-input
                    placeholder="输入名称进行过滤"
                    prefix-icon="el-icon-search"
                    v-model="filterText">
                </el-input>
            </div>
            <div class="org-pack">
                <el-tree
                    empty-text="暂无组织机构"
                    node-key="id"
                    ref="departmentTree"
                    default-expand-all
                    :data="allDepartmentList"
                    :highlight-current="true"
                    :expand-on-click-node="false"
                    :filter-node-method="filterNode"
                    @node-click="departmentTreeClick">
                    <span class="custom-tree-node" slot-scope="{ node, data }">
                        <span>{{ node.data.name }}</span>
                    </span>
                </el-tree>
            </div>
        </div>
        <div class="right-pack">
            <div class="department-pack">
                <div class="tip-pack">
                    <svg-icon icon-class="department"></svg-icon><span>{{currentDepartment.name}} 的下级部门</span>
                </div>
                <div class="operation-pack">
                    <el-button v-if="Authority.checkedAuthority('/system/user/addDepartment')" size="mini" @click="addSubDepartmentClick">添加下级部门</el-button>
                    <el-button v-if="Authority.checkedAuthority('/system/user/departmentRoleAdjustment')" @click="departmentRoleAdjustClick" size="mini">角色调整</el-button>
                </div>
                <div class="table-pack">
                    <el-table
                        ref="multipleTable"
                        :height="departmentTableHeight"
                        :data="subDepartmentList"
                        tooltip-effect="dark"
                        empty-text="暂无下级部门"
                        border
                        stripe
                        style="width: 100%"
                        @selection-change="departmentSelectionChange">
                        <el-table-column
                            type="selection"
                            width="35">
                        </el-table-column>
                        <el-table-column
                            show-overflow-tooltip
                            prop="code"
                            width="220"
                            label="部门编码">
                        </el-table-column>
                        <el-table-column
                            show-overflow-tooltip
                            prop="name"
                            width="340"
                            label="部门名称">
                            <template slot-scope="scope">
                                <span @click="subDepartmentClick(scope.row)" class="department-name">
                                    {{scope.row.name}}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            show-overflow-tooltip
                            prop="userCount"
                            label="人数">
                            <template slot-scope="scope">
                                <span v-if="scope.row.userCount === null || scope.row.userCount === undefined">
                                    0
                                </span>
                                <span v-else>{{scope.row.userCount}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            fixed="right"
                            width="95"
                            label="操作">
                            <template slot-scope="scope">
                                <el-button v-if="Authority.checkedAuthority('/system/user/editDepartment')" @click="editDepartmentClick(scope.row)" type="text">编辑</el-button>
                                <el-button v-if="Authority.checkedAuthority('/system/user/deleteDepartment')" @click="deleteDepartmentClick(scope.row)" type="text">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <div class="user-pack">
                <div class="tip-pack">
                    <svg-icon icon-class="user"></svg-icon><span>{{currentDepartment.name}} 的成员</span>
                </div>
                <div class="operation-pack">
                    <el-button v-if="Authority.checkedAuthority('/system/user/addMember')" @click="addMemberClick" size="mini" type="primary">添加成员</el-button>
                    <el-upload
                        style="line-height: 1;margin-left:10px;margin-right:10px;"
                        :disabled="true"
                        class="upload-demo"
                        :action="bulkImportUrl"
                        :headers="{'Authorization': token}"
                        :limit="1"
                        :before-upload="bulkImportVerify"
                        :on-success="bulkImportSuccess"
                        :on-error="bulkImportError">
                        <el-button disabled size="mini">批量导入</el-button>
                    </el-upload>
                    <el-button disabled @click="downloadExcelTemplateClick" size="mini">下载Excel模板</el-button>
                    <el-button v-if="Authority.checkedAuthority('/system/user/memberDepartmentAdjustment')" @click="adjustDepartmentClick" size="mini">调整部门</el-button>
                    <el-button v-if="Authority.checkedAuthority('/system/user/memberRoleAdjustment')" @click="memberRoleAdjustClick" size="mini">角色调整</el-button>
                </div>
                <div class="table-pack">
                    <el-table
                        ref="multipleTable"
                        :height="memberTableHeight"
                        :data="subMemberList"
                        tooltip-effect="dark"
                        border
                        stripe
                        empty-text="暂无成员"
                        style="width: 100%"
                        @selection-change="memberSelectionChange">
                        <el-table-column
                            type="selection"
                            width="35">
                        </el-table-column>
                        <el-table-column
                            show-overflow-tooltip
                            prop="name"
                            width="160"
                            label="姓名">
                            <template slot-scope="scope">
                                <span>
                                    {{scope.row.name}}（<span style="color: #49cc90;" v-if="scope.row.status || scope.row.status === undefined || scope.row.status === null">在职</span><span style="color: #f93e3e;" v-else>离职</span>）
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            show-overflow-tooltip
                            prop="no"
                            width="120"
                            label="工号">
                        </el-table-column>
                        <el-table-column
                            show-overflow-tooltip
                            prop="username"
                            width="120"
                            label="用户名">
                            <template slot-scope="scope">
                                <span @click="userNameClick(scope.row)" class="department-name">
                                    {{scope.row.username}}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            show-overflow-tooltip
                            prop="contact"
                            width="120"
                            label="手机">
                        </el-table-column>
                        <el-table-column
                            show-overflow-tooltip
                            prop="post"
                            width="120"
                            label="职位">
                        </el-table-column>
                        <el-table-column
                            show-overflow-tooltip
                            prop="email"
                            width="120"
                            label="邮箱">
                        </el-table-column>
                        <!--<el-table-column
                            show-overflow-tooltip
                            prop="leader"
                            width="120"
                            label="部门角色">
                            <template slot-scope="scope">
                                <div>
                                    <span v-if="scope.row.leader">负责人</span>
                                    <span v-else>员工</span>
                                </div>
                            </template>
                        </el-table-column>-->
                        <el-table-column
                            fixed="right"
                            align="left"
                            width="100"
                            label="状态">
                            <template slot-scope="scope">
                                <el-switch
                                    v-if="Authority.checkedAuthority('/system/user/usingMember')"
                                    :disabled="scope.row.username === 'root'"
                                    v-model="scope.row.enabled"
                                    @change="changeUserStatus(scope.row)"
                                    active-text=""
                                    inactive-text="">
                                </el-switch>
                                <span :style="{'color': scope.row.enabled? '#409eff' : '#ccc'}" style="margin-left: 5px">{{ scope.row.enabled? '启用' : '禁用' }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            fixed="right"
                            width="170"
                            label="操作">
                            <template slot-scope="scope">
                                <el-button v-if="Authority.checkedAuthority('/system/user/editMember')" @click="editMemberClick(scope.row)" type="text">编辑</el-button>
                                <el-button v-if="Authority.checkedAuthority('/system/user/deleteMember')" :disabled="scope.row.username === 'root'" @click="deleteMemberClick(scope.row.username)" type="text">删除</el-button>
                                <el-button v-if="Authority.checkedAuthority('/system/user/memberResetPassword')" @click="resetPasswordClick(scope.row)" type="text">密码重置</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <!-- 分页区域 -->
                <div class="pagination-pack">
                    <el-pagination
                        background
                        style="text-align: center;"
                        @size-change="subMemberPageSizeChange"
                        @current-change="subMemberPageIndexChange"
                        :current-page="subMemberPageIndex"
                        :page-sizes="[20, 50, 100, 200]"
                        :page-size="subMemberPageSize"
                        layout="prev, pager, next, sizes, jumper"
                        :total="subMemberTotal">
                    </el-pagination>
                </div>
            </div>
        </div>


        <!-- 添加部门弹框 -->
        <el-dialog
            title="添加子部门"
            v-drag-dialog
            :visible.sync="addDepartmentDialog"
            :show-close="false"
            :close-on-press-escape="false"
            :close-on-click-modal="false"
            width="550px">
            <div class="new-department-pack">
                <el-form
                    :model="addDepartmentFormData"
                    :rules="departmentFormRules"
                    ref="addDepartmentFormDom"
                    status-icon
                    label-position="right"
                    label-width="150px">
                    <el-form-item label="部门编码" prop="code" :required="true">
                        <el-input
                            type="text"
                            style="width: 350px;"
                            :maxlength="50"
                            v-model="addDepartmentFormData.code"
                            autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="部门名称" prop="name" :required="true">
                        <el-input
                            type="text"
                            style="width: 350px;"
                            :maxlength="100"
                            v-model="addDepartmentFormData.name"
                            autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="上级部门" prop="parentId" :required="true">
                        <el-input
                            type="text"
                            style="width: 350px;"
                            :disabled="true"
                            ref="parentDepartmentInput"
                            @focus="parentNameFocus"
                            v-model="currentDepartment.name"
                            autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="责任人" prop="responsibleName" :required="true">
                        <el-input
                            size="small"
                            :maxlength="18"
                            placeholder="请选择责任人"
                            @focus="openResponsibleClick"
                            v-model.trim="addDepartmentFormData.responsibleName">
                        </el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="saveAddDepartmentClick">确 定</el-button>
                <el-button @click="cancelAddDepartmentClick">取 消</el-button>
            </span>
        </el-dialog>

        <!-- 编辑部门弹框 -->
        <el-dialog
            title="编辑部门"
            v-drag-dialog
            :visible.sync="editDepartmentDialog"
            :show-close="false"
            :close-on-press-escape="false"
            :close-on-click-modal="false"
            width="550px">
            <div class="edit-department-pack">
                <el-form
                    :model="editDepartmentFormData"
                    :rules="departmentFormRules"
                    ref="editDepartmentFormDom"
                    status-icon
                    label-position="right"
                    label-width="150px">
                    <el-form-item label="部门编码" prop="code" :required="true">
                        <el-input
                            type="text"
                            style="width: 350px;"
                            maxLength="20"
                            v-model="editDepartmentFormData.code"
                            autocomplete="off"
                            disabled></el-input>
                    </el-form-item>
                    <el-form-item label="部门名称" prop="name" :required="true">
                        <el-input
                            type="text"
                            style="width: 350px;"
                            maxLength="20"
                            v-model="editDepartmentFormData.name"
                            autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="上级部门" prop="parentId" :required="true">
                        <el-input
                            type="text"
                            style="width: 350px;"
                            :disabled="true"
                            ref="parentDepartmentInput"
                            @focus="parentNameFocus"
                            v-model="currentDepartment.name"
                            autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="责任人" prop="responsibleName" :required="true">
                        <el-input
                            size="small"
                            :maxlength="18"
                            placeholder="请选择责任人"
                            @focus="openResponsibleClick"
                            v-model.trim="editDepartmentFormData.responsibleName">
                        </el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="saveEditDepartmentClick">确 定</el-button>
                <el-button @click="cancelEditDepartmentClick">取 消</el-button>
            </span>
        </el-dialog>

        <!-- 选择责任人弹框 -->
        <!-- <el-dialog
            title="责任人"
            :visible.sync="responsibleDialog"
            :show-close="false"
            :close-on-press-escape="false"
            :close-on-click-modal="false"
            width="760px">
            <div style="font-size: 12px;margin-bottom: 10px;">备注：请用鼠标点击选中某一个责任人</div>
            <div class="responsible-table-pack">
                <el-table
                    :data="responsibleList"
                    tooltip-effect="dark"
                    stripe
                    border
                    :highlight-current-row="true"
                    :height="430"
                    @row-click="responsibleSelectChange"
                    style="width: 100%">
                    <el-table-column
                        show-overflow-tooltip
                        prop="name"
                        label="姓名">
                        <template slot-scope="scope">
                        <span>
                            {{scope.row.name}}（<span style="color: #49cc90;" v-if="scope.row.status || scope.row.status === undefined || scope.row.status === null">在职</span><span style="color: #f93e3e;" v-else>离职</span>）
                        </span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        show-overflow-tooltip
                        prop="no"
                        label="工号">
                    </el-table-column>
                    <el-table-column
                        show-overflow-tooltip
                        prop="username"
                        label="用户名">
                        <template slot-scope="scope">
                        <span @click="userNameClick(scope.row)" class="department-name">
                            {{scope.row.username}}
                        </span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        show-overflow-tooltip
                        prop="post"
                        label="职位">
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination-pack">
                <el-pagination
                    background
                    :total="responsibleTotal"
                    style="text-align: center; margin-top: 12px;"
                    :page-sizes="[20, 50, 100, 200]"
                    layout="prev, pager, next, sizes, jumper"
                    :current-page.sync="responsibleCurrentPage"
                    :page-size.sync="responsiblePageSize"
                    @size-change="responsibleSizeChange"
                    @current-change="responsibleCurrentChange"
                ></el-pagination>
            </div>
            <span slot="footer" class="dialog-footer text-center">
                <el-button size="small" type="primary" icon="el-icon-check" @click="responsibleConfirmClick">确认</el-button>
                <el-button size="small" icon="el-icon-close" @click="responsibleCancelClick">取消</el-button>
            </span>
        </el-dialog> -->
        <MemberSelect
            ref="memberSelect"
            @doMemberSelectConfirmClick="doMemberSelectConfirmClick"
            @doMemberSelectCancelClick="doMemberSelectCancelClick">
        </MemberSelect>


        <!-- 调整部门角色弹框 -->
        <el-dialog
            title="调整部门角色"
            v-drag-dialog
            :visible.sync="adjustDepartmentRoleDialog"
            :show-close="false"
            :close-on-press-escape="false"
            :close-on-click-modal="false"
            width="750px">
            <div class="adjust-department-pack">
                <div class="selected-member-pack">
                    <div class="list">选中部门列表：
                        <span v-for="(item, index) in selectedDepartmentList">
                            {{item.name}}<span v-if="(index + 1) < selectedDepartmentList.length">、</span>
                        </span>
                    </div>
                </div>
                <div class="operation-pack">
                    <div class="left-pack">
                        <div class="tip-pack">角色备选列表：</div>
                        <div class="content-pack">
                            <el-tree
                                :data="roleList"
                                :highlight-current="true"
                                node-key="id"
                                default-expand-all
                                @node-click="choiceRoleClick"
                                :expand-on-click-node="false">
                                <span class="custom-tree-node" slot-scope="{ node, data }">
                                    <svg-icon icon-class="department"></svg-icon>
                                    <span>{{ node.data.name }}</span>
                                </span>
                            </el-tree>
                        </div>
                    </div>
                    <div class="interval-pack"></div>
                    <div class="right-pack">
                        <div class="tip-pack">已选角色：</div>
                        <div class="content-pack">
                            <div v-if="departmentSelectedRoleList.length === 0" style="height: 100%;display: -webkit-flex;display: flex;justify-content:center;align-items:center;font-size: 14px;">
                                请从角色列表中选择需要覆盖或追加的角色！
                            </div>
                            <div v-else v-for="(item, index) in departmentSelectedRoleList" class="item">
                                <svg-icon icon-class="department"></svg-icon>
                                <span>{{item.name}}</span>
                                <el-button @click="deleteDepartmentChoiceRoleClick(index)" size="mini" type="text">移除</el-button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="saveDepartmentAdjustRoleClick(1)" type="primary">覆盖已有角色</el-button>
                <el-button @click="saveDepartmentAdjustRoleClick(2)">追加角色</el-button>
                <el-button @click="cancelDepartmentAdjustRoleClick">取 消</el-button>
            </span>
        </el-dialog>

        <!-- 添加成员弹框 -->
        <el-dialog
            title="添加成员"
            v-drag-dialog
            :visible.sync="addMemberDialog"
            :show-close="false"
            :close-on-press-escape="false"
            :close-on-click-modal="false"
            width="850px">
            <div class="add-member-pack">
                <el-form
                    :model="addMemberFormData"
                    :rules="memberFormRules"
                    ref="addMemberFormDom"
                    status-icon
                    label-width="100px"
                    label-position="top">
                    <el-row :gutter="60">
                        <el-col :span="12">
                            <el-form-item label="姓名" prop="name" :required="true">
                                <el-input
                                    type="text"
                                    style="width: 350px;"
                                    maxLength="20"
                                    v-model="addMemberFormData.name"
                                    autocomplete="off"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="用户名" prop="username" :required="true">
                                <el-input
                                    type="text"
                                    style="width: 350px;"
                                    maxLength="20"
                                    v-model="addMemberFormData.username"
                                    autocomplete="off"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="60">
                        <el-col :span="12">
                            <el-form-item label="职位" prop="post" :required="true">
                                <el-input
                                    type="text"
                                    style="width: 350px;"
                                    maxLength="20"
                                    v-model="addMemberFormData.post"
                                    autocomplete="off"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="工号" prop="no" :required="true">
                                <el-input
                                    type="text"
                                    style="width: 350px;"
                                    maxLength="20"
                                    v-model="addMemberFormData.no"
                                    autocomplete="off"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="60">
                        <el-col :span="12">
                            <el-form-item label="手机" prop="contact" :required="true">
                                <el-input
                                    type="text"
                                    style="width: 350px;"
                                    maxLength="20"
                                    v-model="addMemberFormData.contact"
                                    autocomplete="off"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="邮箱" prop="email" :required="true">
                                <el-input
                                    type="text"
                                    style="width: 350px;"
                                    maxLength="50"
                                    v-model="addMemberFormData.email"
                                    autocomplete="off"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="60">
                        <el-col :span="12">
                            <el-form-item label="密码" prop="password" :required="true">
                                <el-input
                                    type="password"
                                    :minlength="6"
                                    :maxlength="16"
                                    placeholder="请输入包括字母、数字的6~16位字符"
                                    v-model="addMemberFormData.password"
                                    autocomplete="off">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="确认密码" prop="confirmPassword" :required="true">
                                <el-input
                                    type="password"
                                    :minlength="6"
                                    :maxlength="16"
                                    placeholder="请再次输入新设置的密码"
                                    v-model="addMemberFormData.confirmPassword"
                                    autocomplete="off"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <!--<el-row :gutter="60">
                        <el-col :span="12">
                            <el-form-item label="部门角色" :required="true" prop="leader">
                                <el-select style="width: 350px" size="small" placeholder="请选择部门角色" v-mosaveAddMemberClickdel.trim="addMemberFormData.leader">
                                    <el-option label="员工" :value="false"></el-option>
                                    <el-option label="负责人" :value="true"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                        </el-col>
                    </el-row>-->
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="saveAddMemberClick">确 定</el-button>
                <el-button @click="cancelAddMemberClick">取 消</el-button>
            </span>
        </el-dialog>

        <!-- 编辑成员弹框 -->
        <el-dialog
            title="编辑成员"
            v-drag-dialog
            :visible.sync="editMemberDialog"
            :show-close="false"
            :close-on-press-escape="false"
            :close-on-click-modal="false"
            width="850px">
            <div class="edit-member-pack">
                <el-form
                    :model="editMemberFormData"
                    :rules="memberFormRules"
                    ref="editMemberFormDom"
                    status-icon
                    label-width="100px"
                    label-position="top">
                    <el-row :gutter="60">
                        <el-col :span="12">
                            <el-form-item label="姓名" prop="name" :required="true">
                                <el-input
                                    type="text"
                                    style="width: 350px;"
                                    maxLength="20"
                                    v-model="editMemberFormData.name"
                                    autocomplete="off"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="用户名" prop="username" :required="true">
                                <el-input
                                    disabled
                                    type="text"
                                    style="width: 350px;"
                                    maxLength="20"
                                    v-model="editMemberFormData.username"
                                    autocomplete="off"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="60">
                        <el-col :span="12">
                            <el-form-item label="职位" prop="post" :required="true">
                                <el-input
                                    type="text"
                                    style="width: 350px;"
                                    maxLength="20"
                                    v-model="editMemberFormData.post"
                                    autocomplete="off"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="工号" prop="no" :required="true">
                                <el-input
                                    disabled
                                    type="text"
                                    style="width: 350px;"
                                    maxLength="20"
                                    v-model="editMemberFormData.no"
                                    autocomplete="off"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="60">
                        <el-col :span="12">
                            <el-form-item label="手机" prop="contact" :required="true">
                                <el-input
                                    type="text"
                                    style="width: 350px;"
                                    maxLength="20"
                                    v-model="editMemberFormData.contact"
                                    autocomplete="off"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="邮箱" prop="email" :required="true">
                                <el-input
                                    type="text"
                                    style="width: 350px;"
                                    maxLength="50"
                                    v-model="editMemberFormData.email"
                                    autocomplete="off"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <!--<el-row :gutter="60">
                        <el-col :span="12">
                            <el-form-item label="部门角色" :required="true" prop="leader">
                                <el-select style="width: 350px" size="small" placeholder="请选择部门角色" v-model.trim="editMemberFormData.leader">
                                    <el-option label="员工" :value="false"></el-option>
                                    <el-option label="负责人" :value="true"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                        </el-col>
                    </el-row>-->
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="saveEditMemberClick">确 定</el-button>
                <el-button @click="cancelEditMemberClick">取 消</el-button>
            </span>
        </el-dialog>

        <!-- 选择部门弹框 -->
        <el-dialog
            title="选择部门"
            v-drag-dialog
            :visible.sync="choiceDepartmentDialog"
            :show-close="false"
            :close-on-press-escape="false"
            :close-on-click-modal="false"
            width="750px">
            <div class="choice-department-pack">
                <div class="left-pack">
                    <div class="tip-pack">备选列表：</div>
                    <div class="content-pack">
                        <el-tree
                            :data="choiceTreeData"
                            :highlight-current="true"
                            node-key="id"
                            default-expand-all
                            @node-click="choiceDepartmentClick"
                            :expand-on-click-node="false">
                            <span class="custom-tree-node" slot-scope="{ node, data }">
                                <svg-icon icon-class="department"></svg-icon>
                                <span>{{ node.data.name }}</span>
                            </span>
                        </el-tree>
                    </div>
                </div>
                <div class="interval-pack"></div>
                <div class="right-pack">
                    <div class="tip-pack">已选：</div>
                    <div class="content-pack">
                        <div v-for="(item, index) in checkedDepartment" class="item">
                            <svg-icon icon-class="department"></svg-icon>
                            <span>{{item.name}}</span>
                            <el-button @click="deleteChoiceDepartmentClick(index)" size="mini" type="text">移除</el-button>
                        </div>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="confirmChoiceDepartmentClick" type="primary">确 定</el-button>
                <el-button @click="cancelChoiceDepartmentClick">取 消</el-button>
            </span>
        </el-dialog>

        <!-- 重置密码弹框 -->
        <el-dialog
            title="重置密码"
            v-drag-dialog
            :visible="resetPasswordDialog"
            :show-close="false"
            :close-on-press-escape="false"
            :close-on-click-modal="false"
            width="400px">
            <div class="new-member-pack">
                <el-form
                    :model="resetPasswordFormData"
                    :rules="resetPasswordFormRules"
                    ref="resetPasswordFormDom"
                    status-icon
                    label-position="right"
                    label-width="80px">
                    <el-form-item label="新密码" prop="password" :required="true">
                        <el-input
                            type="password"
                            :minlength="6"
                            :maxlength="16"
                            placeholder="请输入包括字母、数字的6~16位字符"
                            v-model="resetPasswordFormData.password">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="confirmPassword" :required="true">
                        <el-input
                            type="password"
                            :minlength="6"
                            :maxlength="16"
                            placeholder="请再次输入新设置的密码"
                            v-model="resetPasswordFormData.confirmPassword"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="saveResetPasswordClick">确 定</el-button>
                <el-button @click="cancelResetPasswordClick">取 消</el-button>
            </span>
        </el-dialog>

        <!-- 调整部门弹框 -->
        <el-dialog
            title="调整部门"
            v-drag-dialog
            :visible="adjustMemberDepartmentDialog"
            :show-close="false"
            :close-on-press-escape="false"
            :close-on-click-modal="false"
            width="750px">
            <div class="adjust-department-pack">
                <div class="selected-member-pack">
                    <div class="list">选中成员列表：
                        <span v-for="(item, index) in selectedMemberList">
                            {{item.name}}<span v-if="(index + 1) < selectedMemberList.length">、</span>
                        </span>
                    </div>
                </div>
                <div class="operation-pack">
                    <div class="left-pack">
                        <div class="tip-pack">部门备选列表：</div>
                        <div class="content-pack">
                            <el-tree
                                :data="choiceTreeData"
                                :highlight-current="true"
                                node-key="id"
                                default-expand-all
                                @node-click="choiceDepartmentClick"
                                :expand-on-click-node="false">
                            <span class="custom-tree-node" slot-scope="{ node, data }">
                                <svg-icon icon-class="department"></svg-icon>
                                <span>{{ node.data.name }}</span>
                            </span>
                            </el-tree>
                        </div>
                    </div>
                    <div class="interval-pack"></div>
                    <div class="right-pack">
                        <div class="tip-pack">已选部门：</div>
                        <div class="content-pack">
                            <div v-if="checkedDepartment.length === 0" style="height: 100%;display: -webkit-flex;display: flex;justify-content:center;align-items:center;font-size: 14px;">
                                请从部门列表中选择需要覆盖或追加的部门！
                            </div>
                            <div v-else v-for="(item, index) in checkedDepartment" class="item">
                                <svg-icon icon-class="department"></svg-icon>
                                <span>{{item.name}}</span>
                                <el-button @click="deleteChoiceDepartmentClick(index)" size="mini" type="text">移除</el-button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="saveMemberAdjustDepartmentClick(1)" type="primary">覆盖已有部门</el-button>
                <el-button @click="saveMemberAdjustDepartmentClick(2)">追加部门</el-button>
                <el-button @click="cancelMemberAdjustDepartmentClick">取 消</el-button>
            </span>
        </el-dialog>

        <!-- 调整成员角色弹框 -->
        <el-dialog
            title="调整成员角色"
            v-drag-dialog
            :visible.sync="adjustMemberRoleDialog"
            :show-close="false"
            :close-on-press-escape="false"
            :close-on-click-modal="false"
            width="750px">
            <div class="adjust-department-pack">
                <div class="selected-member-pack">
                    <div class="list">选中成员列表：
                        <span v-for="(item, index) in selectedMemberList">
                            {{item.name}}<span v-if="(index + 1) < selectedMemberList.length">、</span>
                        </span>
                    </div>
                </div>
                <div class="operation-pack">
                    <div class="left-pack">
                        <div class="tip-pack">角色备选列表：</div>
                        <div class="content-pack">
                            <el-tree
                                :data="roleList"
                                :highlight-current="true"
                                node-key="id"
                                default-expand-all
                                @node-click="choiceRoleClick"
                                :expand-on-click-node="false">
                                <span class="custom-tree-node" slot-scope="{ node, data }">
                                    <svg-icon icon-class="department"></svg-icon>
                                    <span>{{ node.data.name }}</span>
                                </span>
                            </el-tree>
                        </div>
                    </div>
                    <div class="interval-pack"></div>
                    <div class="right-pack">
                        <div class="tip-pack">已选角色：</div>
                        <div class="content-pack">
                            <div v-if="memberSelectedRoleList.length === 0" style="height: 100%;display: -webkit-flex;display: flex;justify-content:center;align-items:center;font-size: 14px;">
                                请从角色列表中选择需要覆盖或追加的角色！
                            </div>
                            <div v-else v-for="(item, index) in memberSelectedRoleList" class="item">
                                <svg-icon icon-class="department"></svg-icon>
                                <span>{{item.name}}</span>
                                <el-button @click="deleteMemberChoiceRoleClick(index)" size="mini" type="text">移除</el-button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="saveMemberAdjustRoleClick(1)" type="primary">覆盖已有角色</el-button>
                <el-button @click="saveMemberAdjustRoleClick(2)">追加角色</el-button>
                <el-button @click="cancelMemberAdjustRoleClick">取 消</el-button>
            </span>
        </el-dialog>



    </div>
</template>

<script type="text/ecmascript-6">
    import { MessageBox, Loading } from 'element-ui'
    import dragDialog from '@/directive/dragDialog'
    import RandomPlugin from '@/utils/random.js'
    import ArrayPlugin from '@/utils/array.js'
    import validator from '@/utils/validator'
    import MemberSelect from '@/components/MemberSelect'

    export default {
        name: 'User',
        components: {
            MemberSelect
        },
        directives: {
            dragDialog
        },
        data () {
            return {
                uploadLoading: '',  // 上传等待蒙板
                filterText: '',  // 搜索关键字
                departmentTableHeight: 0,  // 部门table高度
                memberTableHeight: 0,  // 成员table高度
                allDepartmentList: [],  // 全部部门列表
                flattenAllDepartmentList: [],  // 全部部门列表（一维数组）
                currentDepartment: {},  // 当前选中的部门
                subDepartmentList: [],  // 子部门列表
                selectedDepartmentList: [],  // 选中的部门列表
                subMemberList: [],  // 成员列表
                selectedMemberList: [],  // 选中的成员列表
                subMemberTotal: 0,  // 成员总个数
                subMemberPageIndex: 1,  // 成员当前页数
                subMemberPageSize: 20,  // 成员每页个数
                roleList: [],  // 角色列表
                // 选择部门弹框相关数据
                choiceDepartmentDialog: false,
                choiceTreeData: [],  // 部门列表
                checkedDepartment: [],  // 选中的部门列表
                // 新增部门弹框相关数据
                addDepartmentDialog: false,
                addDepartmentFormData: {
                    code: '',
                    name: '',
                    parentId: '',
                    level: 0,
                    responsible: '',
                    responsibleName: ''
                },
                // 编辑部门弹框相关数据
                editDepartmentDialog: false,
                editDepartmentFormData: {
                    id: '',
                    code: '',
                    name: '',
                    parentId: '',
                    level: 0,
                    responsible: '',
                    responsibleName: ''
                },
                departmentFormRules: {
                    code: [
                        {
                            validator: (rule, value, callback) => {
                                if (_.trim(value) === '') {
                                    callback(new Error('请填写部门编码'));
                                }
                                callback();
                            },
                            trigger: ['change', 'blur']
                        }
                    ],
                    name: [
                        {
                            validator: (rule, value, callback) => {
                                if (_.trim(value) === '') {
                                    callback(new Error('请填写部门名称'));
                                }
                                callback();
                            },
                            trigger: ['change', 'blur']
                        }
                    ],
                    parentId: [
                        {
                            validator: (rule, value, callback) => {
                                if (_.trim(value) === '') {
                                    callback(new Error('请选择上级部门'));
                                }
                                callback();
                            },
                            trigger: ['change', 'blur']
                        }
                    ],
                    responsibleName: [
                        {
                            validator: (rule, value, callback) => {
                                if (_.trim(value) === '') {
                                    callback(new Error('请选择一个责任人'));
                                }
                                callback();
                            },
                            trigger: ['change', 'blur']
                        }
                    ]
                },
                // 选择责任人逻辑
                responsibleDialog: false,
                responsibleList: [],
                selectedResponsible: '',  // 选中的责任人
                responsibleTotal: 0,  // 责任人总个数
                responsibleCurrentPage: 1,  // 责任人当前页数
                responsiblePageSize: 20,  // 责任人每页个数
                // 调整部门角色弹框相关数据
                adjustDepartmentRoleDialog: false,
                departmentSelectedRoleList: [],  // 调整部门时选中的角色列表
                // 新增成员弹框相关数据
                bulkImportUrl: '',  // 批量导入url
                addMemberDialog: false,
                addMemberFormData: {
                    username: '',
                    name: '',
                    groupId: 0,
                    post: '',
                    no: '',
                    contact: '',
                    email: '',
                    password: '',
                    confirmPassword: '',
                    // leader: false,
                    authorities: [],
                    photoUrl: ''
                },
                // 添加成员表单验证规则
                memberFormRules: {
                    username: [
                        {
                            validator: (rule, value, callback) => {
                                if (_.trim(value) === '') {
                                    callback(new Error('请填写用户名'));
                                }
                                callback();
                            },
                            trigger: ['change', 'blur']
                        }
                    ],
                    name: [
                        {
                            validator: (rule, value, callback) => {
                                if (_.trim(value) === '') {
                                    callback(new Error('请填写成员姓名'));
                                }
                                callback();
                            },
                            trigger: ['change', 'blur']
                        }
                    ],
                    groupId: [
                        {
                            validator: (rule, value, callback) => {
                                if (_.trim(value) === '') {
                                    callback(new Error('请至少选择一个上级部门'));
                                }
                                callback();
                            },
                            trigger: ['change', 'blur']
                        }
                    ],
                    post: [
                        {
                            validator: (rule, value, callback) => {
                                if (_.trim(value) === '') {
                                    callback(new Error('请填写成员职位'));
                                }
                                callback();
                            },
                            trigger: ['change', 'blur']
                        }
                    ],
                    no: [
                        {
                            validator: (rule, value, callback) => {
                                if (_.trim(value) === '') {
                                    callback(new Error('请填写成员工号'));
                                }
                                callback();
                            },
                            trigger: ['change', 'blur']
                        }
                    ],
                    contact: [
                        {
                            validator: (rule, value, callback) => {
                                if (_.trim(value) === '') {
                                    callback(new Error('请填写成员手机号'));
                                } else if (_.trim(value) !== '') {
                                    if (validator.isPhone(_.trim(value)) === false) {
                                        callback(new Error('成员手机号格式不正确'))
                                    }
                                }
                                callback();
                            },
                            trigger: ['change', 'blur']
                        }
                    ],
                    email: [
                        {
                            validator: (rule, value, callback) => {
                                if (_.trim(value) === '') {
                                    callback(new Error('请填写成员邮箱'));
                                } else if (_.trim(value) !== '') {
                                    if (validator.isEmail(_.trim(value)) === false) {
                                        callback(new Error('成员邮箱格式不正确'))
                                    }
                                }
                                callback();
                            },
                            trigger: ['change', 'blur']
                        }
                    ],
                    password: [
                        {
                            validator: (rule, value, callback) => {
                                if (_.trim(value) === '') {
                                    callback(new Error('请输入新密码'));
                                } else if (_.trim(value).length < 6) {
                                    callback(new Error('密码不能少于6位数且不能大于16位数'));
                                } else if (_.trim(value) !== '' && _.trim(value).length >= 6) {
                                    if (validator.checkPassword(_.trim(value)) === false) {
                                        callback(new Error('请输入包含字母、数字的6-16位字符'))
                                    }
                                }
                                callback();
                            },
                            trigger: ['change', 'blur']
                        }
                    ],
                    confirmPassword: [
                        {
                            validator: (rule, value, callback) => {
                                if (_.trim(value) === '') {
                                    callback(new Error('请输入确认密码'));
                                } else if (_.trim(value).length < 6) {
                                    callback(new Error('密码不能少于6位数且不能大于16位数'));
                                } else if (_.trim(value) !== '' && _.trim(value).length >= 6) {
                                    if (validator.checkPassword(_.trim(value)) === false) {
                                        callback(new Error('请输入包含字母、数字的6-16位字符'))
                                    }
                                }
                                if (this.addMemberDialog) {
                                    if (_.trim(value) !== _.trim(this.addMemberFormData.password)) {
                                        callback(new Error('密码不一致'));
                                    }
                                } else {
                                    if (_.trim(value) !== _.trim(this.editMemberFormData.password)) {
                                        callback(new Error('密码不一致'));
                                    }
                                }
                                callback();
                            },
                            trigger: ['change', 'blur']
                        }
                    ]
                },
                // 编辑成员相关数据
                editMemberDialog: false,
                editMemberFormData: {
                    id: '',
                    username: '',
                    name: '',
                    groupId: 0,
                    post: '',
                    no: '',
                    contact: '',
                    email: '',
                    password: '',
                    confirmPassword: '',
                    // leader: false,
                    authorities: [],
                    photoUrl: ''
                },
                resetPasswordDialog: false,
                // 修改密码数据
                resetPasswordFormData: {},
                // 修改验证规则
                resetPasswordFormRules: {
                    password: [
                        {
                            validator: (rule, value, callback) => {
                                if (_.trim(value) === '') {
                                    callback(new Error('请输入新密码'));
                                } else if (_.trim(value).length < 6) {
                                    callback(new Error('密码不能少于6位数且不能大于16位数'));
                                } else if (_.trim(value) !== '' && _.trim(value).length >= 6) {
                                    if (validator.checkPassword(_.trim(value)) === false) {
                                        callback(new Error('请输入包含字母、数字的6-16位字符'))
                                    }
                                }
                                callback();
                            },
                            trigger: ['change', 'blur']
                        }
                    ],
                    confirmPassword: [
                        {
                            validator: (rule, value, callback) => {
                                if (_.trim(value) === '') {
                                    callback(new Error('请输入确认密码'));
                                } else if (_.trim(value).length < 6) {
                                    callback(new Error('密码不能少于6位数且不能大于16位数'));
                                } else if (_.trim(value) !== '' && _.trim(value).length >= 6) {
                                    if (validator.checkPassword(_.trim(value)) === false) {
                                        callback(new Error('请输入包含字母、数字的6-16位字符'))
                                    }
                                }
                                if (_.trim(value) !== _.trim(this.resetPasswordFormData.password)) {
                                    callback(new Error('密码不一致'));
                                }
                                callback();
                            },
                            trigger: ['change', 'blur']
                        }
                    ]
                },
                // 调整成员部门相关数据
                adjustMemberDepartmentDialog: false,
                // 调整成员角色弹框相关数据
                adjustMemberRoleDialog: false,
                memberSelectedRoleList: []  // 调整成员时选中的角色列表
            }
        },
        watch: {
            filterText (val) {
                this.$refs.departmentTree.filter(val);
            }
        },
        methods: {
            // 页面相关事件------------------------------
            filterNode (value, data) {
                if (!value) return true;
                return data.name.indexOf(value) !== -1;
            },
            // 部门tree点击事件
            departmentTreeClick (data, node, e) {
                // 1. 设置当前选中的对象
                this.currentDepartment = _.cloneDeep(data);
                // 2. 获取子部门列表
                this.getSubDepartmentList();
                // 3. 获取人员列表
                this.getSubMemberList();
                // 4. 设置批量导入url
                this.bulkImportUrl = `${process.env.API_HOST}/api/v1/user/import/${this.currentDepartment.id}`;
            },
            // 用户名称点击事件
            userNameClick (row) {
                this.$router.push({
                    path: `/system/userView/${row.id}`,
                    query: { from: '/system/user', id: row.id, name: row.name, no: row.no, contact: row.contact, email: row.email, status: row.status }
                })
            },
            // 下级部门点击事件
            subDepartmentClick (data) {
                // 1. 设置当前选中的对象
                this.currentDepartment = _.cloneDeep(data);
                // 2. 设置批量导入url
                this.bulkImportUrl = `${process.env.API_HOST}/api/v1/user/import/${this.currentDepartment.id}`;
                // 3. 设置tree当前选中部门
                setTimeout(() => {
                    this.$refs.departmentTree.setCurrentKey(this.currentDepartment.id);
                }, 0);
                // 4. 获取子部门列表
                this.getSubDepartmentList();
                // 5. 获取人员列表
                this.getSubMemberList();
            },
            // 选中部门事件
            departmentSelectionChange (val) {
                this.selectedDepartmentList = _.cloneDeep(val)
            },
            // 编辑部门点击事件
            editDepartmentClick (data) {
                // 1. 赋值当前部门
                this.editDepartmentFormData = _.cloneDeep(data);
                // 2. 显示弹框
                this.editDepartmentDialog = true;
            },
            // 删除部门点击事件
            deleteDepartmentClick (data) {
                this.$confirm(`确定要删除 ${data.name} 部门吗？`, '提示', {
                    cancelButtonText: '取消',
                    confirmButtonText: '确定',
                    type: 'warning',
                    closeOnClickModal: false,
                    closeOnPressEscape: false
                }).then(() => {
                    this.$store.dispatch('Department/deleteDepartment', {groupId: data.id}).then(() => {
                        this.$message.success('删除部门成功');
                        // 刷新部门列表
                        this.getAllDepartmentList();
                        this.getSubDepartmentList();
                        this.getSubMemberList();
                    }).catch((response) => {
                        this.$message.error(response.message);
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            // 上级部门文本框点击事件
            parentNameFocus () {
                if (this.editDepartmentDialog) {
                    // 1. 先让文本框失去焦点
                    this.$refs['parentDepartmentInput'].blur();
                    // 2. 请求除了本部门之外的部门数据
                    // this.$store.dispatch('BaseFramework/BasicUser/getRejectDepartment').then((list) => {
                    //     this.choiceTreeData = _.cloneDeep(list);
                    //     // 3. 把当前部门的父级放到已选数据列表中
                    //     this.checkedDepartment = [{
                    //         id: this.currentDepartment.parentId,
                    //         name: this.currentDepartment.parentName
                    //     }];
                    //     // 4. 显示弹框
                    //     this.choiceDepartmentDialog = true;
                    // })
                    // 2. 赋值所有的部门数据
                    this.choiceTreeData = _.cloneDeep(this.allDepartmentList);
                    // 3. 把当前部门的父级放到已选数据列表中
                    this.checkedDepartment = [_.cloneDeep(this.currentDepartment.parent)];
                    // 4. 显示弹框
                    this.choiceDepartmentDialog = true;
                } else if (this.addDepartmentDialog) {
                    // 1. 先让文本框失去焦点
                    this.$refs['parentDepartmentInput'].blur();
                    // 2. 赋值所有的部门数据
                    this.choiceTreeData = _.cloneDeep(this.allDepartmentList);
                    // 3. 把当前部门放到已选数据列表中
                    this.checkedDepartment = [_.cloneDeep(this.currentDepartment)];
                    // 4. 显示弹框
                    this.choiceDepartmentDialog = true;
                } else if (this.addMemberDialog) {
                    // 1. 赋值所有的部门数据
                    this.choiceTreeData = _.cloneDeep(this.allDepartmentList);
                    // 2. 把当前部门放到已选数据列表中
                    this.checkedDepartment = [_.cloneDeep(this.currentDepartment)];
                    // 3. 显示弹框
                    this.choiceDepartmentDialog = true;
                } else if (this.editMemberDialog) {
                    // 1. 赋值所有的部门数据
                    this.choiceTreeData = _.cloneDeep(this.allDepartmentList);
                    // 2. 把当前用户数据的值赋给已选部门数据列表中
                    this.checkedDepartment = _.cloneDeep(this.editMemberFormData.groups);
                    // 3. 显示弹框
                    this.choiceDepartmentDialog = true;
                }
            },
            // 保存修改部门弹框事件
            saveEditDepartmentClick () {
                this.$refs['editDepartmentFormDom'].validate((valid) => {
                    if (valid) {
                        this.$store.dispatch('Department/updateDepartment', this.editDepartmentFormData).then((cbData) => {
                            this.$message.success('修改部门成功');
                            this.editDepartmentDialog = false;
                            // 刷新部门列表
                            this.getAllDepartmentList();
                            this.getSubDepartmentList();
                            this.getSubMemberList();
                        }).catch((response) => {
                            this.$message.error(response.message);
                        });
                    } else {
                        return false;
                    }
                });
            },
            // 关闭编辑部门弹框事件
            cancelEditDepartmentClick () {
                this.$refs['editDepartmentFormDom'].resetFields();
                this.editDepartmentDialog = false;
            },
            // 添加部门逻辑代码-------------------------------
            // 显示添加部门点击事件
            addSubDepartmentClick () {
                this.addDepartmentDialog = true;
                this.addDepartmentFormData.parentId = _.cloneDeep(this.currentDepartment.id)
            },
            // 保存添加部门弹框事件
            saveAddDepartmentClick () {
                this.$refs['addDepartmentFormDom'].validate((valid) => {
                    if (valid) {
                        this.addDepartmentFormData.level = this.currentDepartment.level + 1;
                        this.$store.dispatch('Department/addDepartment', this.addDepartmentFormData).then((cbData) => {
                            this.$message.success('新增下级部门成功');
                            this.addDepartmentDialog = false;
                            this.$refs['addDepartmentFormDom'].resetFields();
                            // 刷新部门列表
                            this.getAllDepartmentList();
                            this.getSubDepartmentList();
                        }).catch((response) => {
                            this.$message.error(response.message);
                        });
                    } else {
                        return false;
                    }
                });
            },
            // 关闭添加部门弹框事件
            cancelAddDepartmentClick () {
                this.addDepartmentDialog = false;
                this.$refs['addDepartmentFormDom'].resetFields();
            },
            // 调整部门角色点击事件
            departmentRoleAdjustClick () {
                if (this.selectedDepartmentList.length === 0) {
                    this.$message.warning('请先选中要调整的部门');
                } else {
                    this.adjustDepartmentRoleDialog = true;
                }
            },
            // 角色列表树点击事件
            choiceRoleClick (data, node, e) {
                // 如果当前打开的是调整部门角色弹框
                if (this.adjustDepartmentRoleDialog) {
                    let isExist = false;
                    for (let i = 0, len = this.departmentSelectedRoleList.length; i < len; i++) {
                        if (this.departmentSelectedRoleList[i].id === data.id) {
                            isExist = true;
                            break;
                        }
                    }
                    if (!isExist) {
                        this.departmentSelectedRoleList.push(data);
                    }
                } else {
                    let isExist = false;
                    for (let i = 0, len = this.memberSelectedRoleList.length; i < len; i++) {
                        if (this.memberSelectedRoleList[i].id === data.id) {
                            isExist = true;
                            break;
                        }
                    }
                    if (!isExist) {
                        this.memberSelectedRoleList.push(data);
                    }
                }
            },
            // 移除选中的角色
            deleteDepartmentChoiceRoleClick (index) {
                this.departmentSelectedRoleList.splice(index, 1);
            },
            // 覆盖/追加调整角色点击事件
            saveDepartmentAdjustRoleClick (type) {
                if (this.departmentSelectedRoleList.length === 0) {
                    this.$message.warning('未选中任何角色');
                    return false;
                }
                let override = false;
                let departmentList = [];
                let roleList = [];
                if (type === 1) {
                    override = true;
                } else {
                    override = false;
                }
                for (let i = 0, len = this.selectedDepartmentList.length; i < len; i++) {
                    departmentList.push(this.selectedDepartmentList[i].id)
                }
                for (let i = 0, len = this.departmentSelectedRoleList.length; i < len; i++) {
                    roleList.push(this.departmentSelectedRoleList[i].id)
                }
                this.$store.dispatch('Department/adjustDepartmentRole', {
                    override: override,
                    groupIdList: departmentList,
                    roleIdList: roleList
                }).then((cbData) => {
                    this.departmentSelectedRoleList = [];
                    if (type === 1) {
                        this.$message.success('角色覆盖成功');
                    } else {
                        this.$message.success('角色追加成功');
                    }
                    this.adjustDepartmentRoleDialog = false;
                }).catch((response) => {
                    this.$message.error(response.message);
                });
            },
            // 取消调整部门点击事件
            cancelDepartmentAdjustRoleClick () {
                this.adjustDepartmentRoleDialog = false;
                this.departmentSelectedRoleList = [];
            },
            // 添加成员逻辑代码-------------------------------
            // 显示添加成员点击事件
            addMemberClick () {
                this.addMemberDialog = true;
                this.addMemberFormData.groupId = this.currentDepartment.id;
            },
            // 删除成员点击事件
            deleteMemberClick (username) {
                this.$confirm('确定要删除成员吗？', '提示', {
                    cancelButtonText: '取消',
                    confirmButtonText: '确定',
                    type: 'warning',
                    closeOnClickModal: false,
                    closeOnPressEscape: false
                }).then(() => {
                    this.$store.dispatch('Department/deleteMember', username).then((cbData) => {
                        this.$message.success('删除成员成功');
                        // 刷新成员列表
                        this.getSubMemberList();
                    }).catch((response) => {
                        this.$message.error(response.message);
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            // 保存添加成员弹框事件
            saveAddMemberClick () {
                this.$refs['addMemberFormDom'].validate((valid) => {
                    if (valid) {
                        this.$store.dispatch('Department/addMember', this.addMemberFormData).then((cbData) => {
                            this.$message.success('新增成员成功');
                            this.addMemberDialog = false;
                            this.$refs['addMemberFormDom'].resetFields();
                            // 刷新成员列表
                            this.getSubMemberList();
                        }).catch((response) => {
                            this.$message.error(response.message);
                        });
                    } else {
                        return false;
                    }
                });
            },
            // 关闭添加成员弹框事件
            cancelAddMemberClick () {
                this.$refs['addMemberFormDom'].resetFields();
                this.addMemberFormData.photoUrl = ''
                this.addMemberDialog = false;
            },
            // 编辑成员逻辑代码-------------------------------
            // 用户当前页数变化事件
            subMemberPageIndexChange (e) {
                this.subMemberPageIndex = e;
                this.getSubMemberList();
            },
            // 用户列表个数变化事件
            subMemberPageSizeChange (e) {
                this.subMemberPageSize = e;
                this.subMemberPageIndex = 1;
                this.getSubMemberList();
            },
            // 禁用启用用户
            changeUserStatus (user) {
                this.$store.dispatch('Department/updateMember', user).then(() => {
                    this.$message.success('修改状态成功');
                }).catch((response) => {
                    this.$message.error(response.message);
                });
            },
            // 显示编辑成员点击事件
            editMemberClick (rowData) {
                // 1. 将本条数据的上级部门信息提取出来
                this.editMemberFormData = _.cloneDeep(rowData);
                // 2. 显示弹框
                this.editMemberDialog = true;
            },
            // 保存编辑成员弹框事件
            saveEditMemberClick () {
                this.$refs['editMemberFormDom'].validate((valid) => {
                    if (valid) {
                        this.$store.dispatch('Department/updateMember', this.editMemberFormData).then((cbData) => {
                            this.$message.success('修改成员成功');
                            this.editMemberDialog = false;
                            // 刷新成员列表
                            this.getSubMemberList();
                        }).catch((response) => {
                            this.$message.error(response.message);
                        });
                    } else {
                        return false;
                    }
                });
            },
            // 关闭编辑成员弹框事件
            cancelEditMemberClick () {
                this.$refs['editMemberFormDom'].resetFields();
                this.editMemberDialog = false;
            },
            // 批量导入格式验证
            bulkImportVerify (file) {
                this.uploadLoading = this.$loading({
                    lock: true,
                    text: '正在批量导入成员信息中，请耐心等待',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                return true;
                // let list = file.name.split('.');
                // let type = list[list.length - 1];
                // if (type !== 'csv') {
                //     this.$message.warning('只能上传csv格式文件，请重新上传！');
                //     return false;
                // } else if (file.size >= (1014 * 1024 * 400)) {
                //     this.$message.warning('上传文件大小不能超过400M,请重新上传！');
                //     return false;
                // } else {
                //     this.uploadLoading = this.$loading({
                //         lock: true,
                //         text: '正在批量导入成员信息中，请耐心等待',
                //         spinner: 'el-icon-loading',
                //         background: 'rgba(0, 0, 0, 0.7)'
                //     });
                //     return true;
                // }
            },
            // 批量导入成功事件
            bulkImportSuccess (response, file, fileList) {
                this.uploadLoading.close();
                if (response.code === 600) {
                    this.$message.success('批量导入成功！');
                    this.subMemberPageSize = 20;
                    this.subMemberPageIndex = 1;
                    this.getSubMemberList();
                } else {
                    this.$message.error(response.message);
                }
            },
            // 批量导入失败事件
            bulkImportError (response, file, fileList) {
                this.uploadLoading.close()
                this.$message.error('批量导入失败！');
            },
            // 下载Excel模板点击事件
            downloadExcelTemplateClick () {
                var _this = this;
                var xhr = new XMLHttpRequest();
                xhr.open('get', `${process.env.API_HOST}/api/v1/user/import/download/template`, true);
                xhr.setRequestHeader('Authorization', window.sessionStorage.getItem('Admin-Token'));
                xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8');
                xhr.responseType = 'blob';
                xhr.onload = function (e) {
                    if (xhr.status === 200 && xhr.readyState === 4) {
                        var blob = this.response;
                        var filename = decodeURI(xhr.getResponseHeader('filename'));
                        var a = document.createElement('a');
                        var url = window.URL.createObjectURL(blob);
                        a.href = url;
                        a.download = filename;
                        a.click();
                        window.URL.revokeObjectURL(url);
                    } else {
                        _this.$message({
                            type: 'error',
                            message: '下载Excel模板失败！'
                        });
                    }
                };
                xhr.send(JSON.stringify({}));
            },
            // 调整部门点击事件
            adjustDepartmentClick () {
                if (this.selectedMemberList.length === 0) {
                    this.$message.warning('请先选中要调整的成员');
                } else {
                    this.adjustMemberDepartmentDialog = true;
                    // 赋值所有的部门数据
                    this.choiceTreeData = _.cloneDeep(this.allDepartmentList);
                }
            },
            // 覆盖/追加调整部门点击事件
            saveMemberAdjustDepartmentClick (type) {
                if (this.checkedDepartment.length === 0) {
                    this.$message.warning('未选中任何部门');
                    return false;
                }
                let override = false;
                let departmentList = [];
                let memberList = [];
                if (type === 1) {
                    override = true;
                } else {
                    override = false;
                }
                for (let i = 0, len = this.checkedDepartment.length; i < len; i++) {
                    departmentList.push(this.checkedDepartment[i].id)
                }
                for (let i = 0, len = this.selectedMemberList.length; i < len; i++) {
                    memberList.push(this.selectedMemberList[i].id)
                }
                this.$store.dispatch('Department/adjustMemberDepartment', {
                    override: override,
                    groupIdList: departmentList,
                    userIdList: memberList
                }).then((cbData) => {
                    this.checkedDepartment = [];
                    if (type === 1) {
                        this.$message.success('部门覆盖成功');
                    } else {
                        this.$message.success('部门追加成功');
                    }
                    this.adjustMemberDepartmentDialog = false;
                    // 刷新成员列表
                    this.getSubMemberList();
                }).catch((response) => {
                    this.$message.error(response.message);
                });
            },
            // 取消调整部门点击事件
            cancelMemberAdjustDepartmentClick () {
                this.adjustMemberDepartmentDialog = false;
                this.checkedDepartment = [];
            },
            memberRoleAdjustClick () {
                if (this.selectedMemberList.length === 0) {
                    this.$message.warning('请先选中要调整的成员');
                } else {
                    this.adjustMemberRoleDialog = true;
                }
            },
            // 移除选中的角色
            deleteMemberChoiceRoleClick (index) {
                this.memberSelectedRoleList.splice(index, 1);
            },
            // 覆盖/追加调整角色点击事件
            saveMemberAdjustRoleClick (type) {
                console.info(this.memberSelectedRoleList)
                if (this.memberSelectedRoleList.length === 0) {
                    this.$message.warning('未选中任何角色');
                    return false;
                }
                let override = false;
                let memberList = [];
                let roleList = [];
                if (type === 1) {
                    override = true;
                } else {
                    override = false;
                }
                for (let i = 0, len = this.selectedMemberList.length; i < len; i++) {
                    memberList.push(this.selectedMemberList[i].id)
                }
                for (let i = 0, len = this.memberSelectedRoleList.length; i < len; i++) {
                    roleList.push(this.memberSelectedRoleList[i].id)
                }
                this.$store.dispatch('Department/adjustMemberRole', {
                    override: override,
                    userIdList: memberList,
                    roleIdList: roleList
                }).then((cbData) => {
                    this.memberSelectedRoleList = [];
                    if (type === 1) {
                        this.$message.success('角色覆盖成功');
                    } else {
                        this.$message.success('角色追加成功');
                    }
                    this.adjustMemberRoleDialog = false;
                }).catch((response) => {
                    this.$message.error(response.message);
                });
            },
            // 取消调整角色点击事件
            cancelMemberAdjustRoleClick () {
                this.adjustMemberRoleDialog = false;
                this.memberSelectedRoleList = [];
            },

            // 责任人弹框相关事件------------------------------
            // 打开责任人弹框点击事件
            openResponsibleClick () {
                // this.responsibleDialog = true;
                // this.getResponsibleList();
                this.$refs.memberSelect.memberSelectDialogToggle = true
            },
            // 责任人 选中事件
            // responsibleSelectChange (val) {
            //     this.selectedResponsible = _.cloneDeep(val)
            // },
            // 责任人 确认事件
            doMemberSelectConfirmClick (memberNodeValue) {
                // if (this.selectedResponsible === '') {
                //     this.$message.warning('未选中任何责任人');
                //     return false;
                // }
                this.selectedResponsible = _.cloneDeep(memberNodeValue)
                if (this.addDepartmentDialog) {
                    this.addDepartmentFormData.responsible = this.selectedResponsible.id
                    this.addDepartmentFormData.responsibleName = this.selectedResponsible.name
                } else {
                    this.editDepartmentFormData.responsible = this.selectedResponsible.id
                    this.editDepartmentFormData.responsibleName = this.selectedResponsible.name
                }
                // this.responsibleDialog = false;
            },
            // 责任人 取消事件
            doMemberSelectCancelClick () {
                this.selectedResponsible = ''
                // this.responsibleDialog = false;
            },
            // 责任人弹窗分页页数发生了变化
            // responsibleCurrentChange (val) {
            //     this.responsibleCurrentPage = val;
            //     this.getResponsibleList();
            // },
            // 责任人弹窗分页数量发生了变化
            // responsibleSizeChange (val) {
            //     this.responsibleCurrentPage = 1;
            //     this.responsibleSizeChange = val;
            //     this.getResponsibleList();
            // },


            // 选择部门弹框相关事件------------------------------
            // 部门tree点击事件
            choiceDepartmentClick (data, node, e) {
                if (this.addDepartmentDialog || this.editDepartmentDialog) {
                    // 部门弹框打开的选择部门只能选择一个
                    this.checkedDepartment = [{
                        id: data.id,
                        name: data.name
                    }];
                } else {
                    // 用户弹框打开的选择部门可以选择多个
                    let isExist = false;
                    for (let i = 0, len = this.checkedDepartment.length; i < len; i++) {
                        if (this.checkedDepartment[i].id === data.id) {
                            isExist = true;
                            break;
                        }
                    }
                    if (!isExist) {
                        this.checkedDepartment.push(data);
                    }
                }
            },
            // 删除选中部门点击事件
            deleteChoiceDepartmentClick (index) {
                this.checkedDepartment.splice(index, 1);
            },
            // 确定选择部门点击事件
            confirmChoiceDepartmentClick () {
                // 1. 判断规则
                if (this.checkedDepartment.length === 0) {
                    MessageBox.confirm('至少选中一个部门', '错误提示', {
                        showCancelButton: false,
                        type: 'error'
                    });
                    return false;
                }
                // 2. 把选中的部门赋值给form数据
                if (this.editDepartmentDialog) {
                    this.editDepartmentFormData.parent = _.cloneDeep(this.checkedDepartment[0])
                } else if (this.addDepartmentDialog) {
                    this.addDepartmentFormData.parent = _.cloneDeep(this.checkedDepartment[0])
                } else {
                    if (this.addMemberDialog) {
                        this.addMemberFormData.groups = _.cloneDeep(this.checkedDepartment);
                    } else {
                        this.editMemberFormData.groups = _.cloneDeep(this.checkedDepartment);
                    }
                }
                // 3. 关闭弹框
                this.choiceDepartmentDialog = false;
            },
            // 取消选择部门点击事件
            cancelChoiceDepartmentClick () {
                this.choiceDepartmentDialog = false;
            },

            // 人员选中事件
            memberSelectionChange (val) {
                // let list = [];
                // for (let item of val) {
                //     list.push(item.username);
                // }
                // this.selectedMemberList = _.cloneDeep(list);
                this.selectedMemberList = _.cloneDeep(val);
            },
            // 重置密码
            resetPasswordClick (user) {
                this.resetPasswordFormData = _.cloneDeep(user);
                this.resetPasswordDialog = true;
            },
            // 重置密码弹框保存点击事件
            saveResetPasswordClick () {
                this.$refs['resetPasswordFormDom'].validate((valid) => {
                    if (valid) {
                        if (this.resetPasswordFormData.password !== this.resetPasswordFormData.confirmPassword) {
                            this.$message.error('确认密码与新密码不一致');
                        } else {
                            this.$store.dispatch('Department/resetMemberPassword', this.resetPasswordFormData).then((list) => {
                                this.$message.success('重置密码成功');
                                this.resetPasswordDialog = false;
                            }).catch((error) => {
                                this.$message.error(error.message);
                            });
                        }
                    } else {
                        return false;
                    }
                });
            },
            // 重置密码弹框取消点击事件
            cancelResetPasswordClick () {
                this.$refs['resetPasswordFormDom'].resetFields();
                this.$message('取消修改密码');
                this.resetPasswordFormData = {};
                this.resetPasswordDialog = false;
            },
            // 功能方法----------------------------------------------------------
            getAllDepartmentList () {
                this.$store.dispatch('Department/getAllDepartment').then((list) => {
                    this.allDepartmentList = _.cloneDeep(list);
                    // 拍扁树状数据结构
                    this.flattenAllDepartmentList = ArrayPlugin.flatten(_.cloneDeep(list));
                    setTimeout(() => {
                        this.$refs.departmentTree.setCurrentKey(this.currentDepartment.id);
                    }, 0);
                }).catch((response) => {
                    this.$message.error(response.message);
                });
            },
            // 获取当前部门下的子部门列表
            getSubDepartmentList () {
                this.$store.dispatch('Department/getSubDepartment', {groupId: this.currentDepartment.id}).then((subDepartmentList) => {
                    if (subDepartmentList !== undefined) {
                        this.subDepartmentList = _.cloneDeep(subDepartmentList);
                    } else {
                        this.subDepartmentList = [];
                    }
                }).catch((response) => {
                    this.$message.error(response.message);
                });
            },
            // 获取当前部门下的人员列表
            getSubMemberList () {
                this.$store.dispatch('Department/getSubMember', {groupId: this.currentDepartment.id, num: this.subMemberPageIndex, size: this.subMemberPageSize}).then((subMemberList) => {
                    if (subMemberList.list !== undefined) {
                        this.subMemberList = _.cloneDeep(subMemberList.list);
                        this.subMemberTotal = subMemberList.total;
                    } else {
                        this.subMemberList = [];
                    }
                }).catch((response) => {
                    this.$message.error(response.message);
                });
            },
            // 获取责任人列表
            getResponsibleList () {
                this.$store.dispatch('Department/getSubMember', {num: this.responsibleCurrentPage, size: this.responsiblePageSize}).then((resData) => {
                    if (resData.list !== undefined) {
                        this.responsibleList = _.cloneDeep(resData.list);
                        this.responsibleTotal = resData.total;
                    } else {
                        this.responsibleList = [];
                    }
                }).catch((response) => {
                    this.$message.error(response.message);
                });
            },
            // 获取角色列表
            getRoleList () {
                this.$store.dispatch('Role/getRoleList').then(data => {
                    this.roleList = _.cloneDeep(data)
                }).catch((response) => {
                    this.$message.error(response.message);
                });
            },
            getRoleNameList (codeList) {
                let nameList = [];
                for (let i = 0, iLen = codeList.length; i < iLen; i++) {
                    for (let j = 0, jLen = this.roleList.length; j < jLen; j++) {
                        if (this.roleList[j].code === codeList[i]) {
                            nameList.push(this.roleList[j].name)
                            break
                        }
                    }
                }
                return nameList;
            },




            // 根据部门id获取部门name
            getNameByGroupId (id) {
                let name = '暂无'
                for (let i = 0, len = this.flattenAllDepartmentList.length; i < len; i++) {
                    if (this.flattenAllDepartmentList[i].id === id) {
                        name = this.flattenAllDepartmentList[i].name
                        break
                    }
                }
                return name
            }
        },
        // 实例创建完成
        created () {
            // 1. 设置token
            this.token = window.sessionStorage.getItem('Admin-Token');
            // 2. 设置table高度
            setTimeout(() => {
                this.departmentTableHeight = document.querySelector('.department-pack').offsetHeight - 110
                this.memberTableHeight = document.querySelector('.user-pack').offsetHeight - 137
            }, 0);
            // 3. 获取左侧部门架构数据
            this.$store.dispatch('Department/getAllDepartment').then((list) => {
                this.allDepartmentList = _.cloneDeep(list);
                // 拍扁树状数据结构
                this.flattenAllDepartmentList = ArrayPlugin.flatten(_.cloneDeep(list));
                // 默认选中第一个作为当前选中部门
                if (this.allDepartmentList.length > 0) {
                    this.currentDepartment = _.cloneDeep(this.allDepartmentList[0]);
                    // 设置批量导入url
                    this.bulkImportUrl = `${process.env.API_HOST}/api/v1/user/import/${this.currentDepartment.id}`;
                    setTimeout(() => {
                        this.$refs.departmentTree.setCurrentKey(this.currentDepartment.id);
                    }, 0);
                }
                // 4. 获取子部门列表
                this.getSubDepartmentList();
                // 5. 获取人员列表
                this.getSubMemberList();
                // 6. 获取角色列表
                this.getRoleList();
            }).catch((response) => {
                this.$message.error(response.message);
            });
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    @import "@/styles/System/user.scss";
</style>
