gdy_pc_8/src/point/views/setting/set_role.vue

<template>
  <div class="set_role_box br-5 boxMinHeight">
    <el-alert class="diy-tip" title="温馨提示：" type="warning" description show-icon>
      <p>
      功道云积分系统共有5种角色，不同角色拥有不同的权限
        <el-popover
          placement="bottom"
          trigger="hover"
          >
          <div style="width: 700px;">
            <img  src="static/images/jsqx.png" style="width: 100%;"/>
          </div>
          <span slot="reference" class="blue cursor" style="padding-left: 20px;">查看权限视图</span>
        </el-popover>
      </p>
    </el-alert>
    <el-row :gutter="0" class="set_role_div boxMinHeight" style="position: relative;">
      <span class="blue cursor" style="position: absolute;top: 30px;right: 20px;z-index: 2000;" @click="$openUrl(7)"><i class="el-icon-question" style="padding-right: 5px;font-size: 16px;position: relative;top: 1px;"></i>角色权限操作说明</span>
      <el-tabs v-model="activeName"  @tab-click="open_pane">
        <el-tab-pane :label="item.name" :name="item.code" v-for="(item,index) in role_list" :key="index">
            <div class="role_list">
              <div v-loading="table_loading">
                <el-row style="margin:20px auto 10px;">
                  <el-col :span="18" style="display: flex;align-items: center;">
                    <span class="roleNameClass" >{{item_info.name}}</span>
                    <span class="blue cursor" style="margin-left: 5px;" v-if="item_info.code == 'dept_manager'" @click="isShowImg=true"><i class='el-icon-question'></i>如何添加部门管理员</span>
                  </el-col>
                  <el-col :span="6" style="text-align: right;">
                    <el-button type="text" style=" padding: 0; line-height: initial;" v-show="item_info.code !== 'creator'" @click="dataAccessPopup">数据查看权限></el-button>
                  </el-col>
                </el-row>
                <el-row :gutter="60" style="margin-bottom: 20px;">
                  <el-col v-if="item_info.code == 'creator'" :span="24"><span class="roleTipClass" >积分主管理员为默认角色，拥有所有功能权限 <span class="red">(积分主管理员至少有一位，积分主管理员不能删除自己)</span></span></el-col>
                  <el-col v-if="item_info.code == 'admin'" :span="24"><span class="roleTipClass" >公司管理员一般为合伙人、股东等高级管理人员，可管理多个部门和人员</span></el-col>
                  <el-col v-if="item_info.code == 'point_manager'" :span="24"><span class="roleTipClass" >积分专员一般为人事、行政等管理督办人员，可管理多个部门和人员</span></el-col>
                  <el-col v-if="item_info.code == 'dept_manager'" :span="24"><span class="roleTipClass" >部门管理员一般为部门/团队经理、主管、组长，可管理一部分人员</span></el-col>
                  <el-col v-if="item_info.code == 'employee'" :span="24"><span class="roleTipClass" >员工为默认角色，每个人都拥有员工角色的功能权限，该角色不可修改</span></el-col>
                </el-row>
                <el-row :gutter="60" style="margin-bottom: 20px;" v-show="item_info.code !== 'employee'">
                  <el-col :span="24">
                      <template v-if="isStart && item_info.code == 'creator'">
                        <el-button type="danger" @click="del_creator" v-show="table_list.length >0">删除</el-button>
                        <el-button type="primary" @click="dialogFormVisible = true" :disabled="table_list.length>=10">添加</el-button>
                      </template>
                      <template v-if="item_info.code != 'creator'&&item_info.code != 'dept_manager'">
                        <el-button type="danger" @click="del_btn" v-show="table_list.length != 0">删除</el-button>
                        <el-button type="primary" @click="add_employee_show = true">添加</el-button>
                        <div style="display: inline-block;" class="orange">有管理范围人员才能进行积分管理和奖扣，别忘了设置哦！</div>
                      </template>
                      <!-- <el-button type="primary" v-if="item_info.code == 'dept_manager'" @click="isShowImg=true">添加管理员</el-button> -->
                      <el-button type="primary" plain v-if="item_info.code == 'dept_manager'" @click="syncScope"><i class="el-icon-refresh"></i>同步管理范围</el-button>
                      <el-button type="success" plain v-if="item_info.code == 'dept_manager'" @click="isShowMessage=true"><i class="el-icon-refresh"></i>同步全部人员及管理范围</el-button>
                      <div class="gap-right-8 fr" style="display:inline-block;" v-if="item_info.code == 'dept_manager'">
                        <el-button v-if="item_info.code == 'dept_manager'" @click="exportEmploye = true">导出/修改管理列表</el-button>
                        <el-input style="width:250px;" placeholder="搜索员工姓名"  maxlength="10" clearable v-model="keyword"></el-input>
                      </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <!-- 积分主管理员 -->
                    <el-table :data="table_list" v-show="item_info.code == 'creator'">
                      <el-table-column width="40" fixed v-if="table_list.length > 0 && isStart">
                      	<template slot-scope="scope">
                      		<el-radio class="el-radios" v-model="radio" :label="scope.row.id"></el-radio>
                      	</template>
                      </el-table-column>
                      <el-table-column prop="name" label="姓名" fixed>
                        <template slot-scope="scope">
                          <userImage class="fl" width="50px" height="50px" :id="scope.row.id" :user_name="scope.row.name"></userImage>
                          <span style="margin-left: 10px; line-height: 50px;">{{ scope.row.name }}</span>
                        </template>
                      </el-table-column>
                    </el-table>

                    <el-table :data="table_list" class="tableListClass" v-show="(item_info.code == 'admin' || item_info.code == 'point_manager') && table_list !== null && table_list.length !== 0">
                      <el-table-column width="55" fixed>
                          <template slot-scope="scope">
                            <el-radio v-model="radio" :label="scope.row.id"></el-radio>
                          </template>
                      </el-table-column>
                      <el-table-column prop="name" label="姓名" width="150" fixed>
                        <template slot-scope="scope">
                          <userImage class="fl" width="50px" height="50px" :id="scope.row.id" :user_name="scope.row.name"></userImage>
                          <span style="margin-left: 10px; line-height: 50px;">{{ scope.row.name }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column width="130px" v-if="item_info.code == 'dept_manager'" prop="dept" label="所属部门">
                        <template slot-scope="scope">
                          <el-popover placement="top-start"  trigger="hover" :content="scope.row.dept">
                            <div slot="reference" style="max-width: 130;" class="font-flex-word">{{scope.row.dept}}</div>
                          </el-popover>
                        </template>
                      </el-table-column>
                      <el-table-column width="130px" v-if="item_info.code == 'dept_manager'" prop="jurisdiction_dept" label="管辖部门">
                        <template slot-scope="scope">
                          <el-popover placement="top-start"  trigger="hover" :content="scope.row.jurisdiction_dept">
                            <div slot="reference" style="max-width: 130;" class="font-flex-word">{{scope.row.jurisdiction_dept}}</div>
                          </el-popover>
                        </template>
                      </el-table-column>
                      <el-table-column v-else width="130px" prop="dept" label="所属部门">
                        <template slot-scope="scope">
                          <el-popover placement="top-start"  trigger="hover" :content="scope.row.dept">
                            <div slot="reference" style="max-width: 130;" class="font-flex-word">{{scope.row.dept}}</div>
                          </el-popover>
                        </template>
                      </el-table-column>
                      <el-table-column width="100px">
                        <template slot="header" slot-scope="scope">
                          <span>管理范围</span>
                          <el-tooltip placement="top">
                            <div slot="content">可自由分配每个管理者的管辖范围，设置后对管辖范围内的人员有分配任务，奖扣积分、查看积分排名和统计、审核其提交上来的申请等权限</div>
                            <span class="tips">?</span>
                          </el-tooltip>
                        </template>
                        <template slot-scope="scope">
                          <div @click="add_management_scope(scope.row)" v-show="scope.row.manage_scope_count == 0" class="cursor_pointer" style="text-decoration:underline">去设置</div>
                          <div @click="add_management_scope(scope.row)" v-show="scope.row.manage_scope_count != 0" class="cursor_pointer">{{scope.row.manage_scope_count}}人</div>
                        </template>
                      </el-table-column>
                      <el-table-column>
                        <template slot="header" slot-scope="scope">
                          <span class="hoverBlue" @click="$openUrl(8)">积分权限 <i class="el-icon-question" style="font-size: 16px;position: relative;top: 1px;"></i></span>

                        </template>
                        <el-table-column >
                          <template slot="header" slot-scope="scope">
                            <span>A分权限</span>
                            <i class="el-icon-edit" @click="setPower('aAll')"></i>
                          </template>
                          <template slot-scope="scope">
                            <div @click="open_integral_limit(scope.row)" v-show="scope.row.point_limit_obj.AF == 0" class="cursor_pointer">0</div>
                            <div @click="open_integral_limit(scope.row)" v-show="scope.row.point_limit_obj.AF != 0" class="cursor_pointer">{{scope.row.point_limit_obj.AF}}</div>
                          </template>
                        </el-table-column>
                        <el-table-column >
                          <template slot="header" slot-scope="scope">
                            <span>B分权限</span>
                            <i class="el-icon-edit" @click="setPower('bAll')"></i>
                          </template>
                          <template slot-scope="scope">
                          <div @click="open_integral_limit(scope.row)" v-show="scope.row.point_limit_obj.BF == 0" class="cursor_pointer">0</div>
                            <div @click="open_integral_limit(scope.row)" v-show="scope.row.point_limit_obj.BF != 0" class="cursor_pointer">{{scope.row.point_limit_obj.BF}}</div>
                          </template>
                        </el-table-column>
                        <el-table-column >
                          <template slot="header" slot-scope="scope">
                            <span>月奖分上限</span>
                            <i class="el-icon-edit" @click="setPower('bonuAll')"></i>
                          </template>
                          <template slot-scope="scope">
                            <div @click="open_integral_limit(scope.row)" v-show="scope.row.entry_limit > 0" class="cursor_pointer">{{scope.row.entry_limit}}</div>
                            <div @click="open_integral_limit(scope.row)" v-show="scope.row.entry_limit === '' || scope.row.entry_limit === 0">不限制</div>
                          </template>
                        </el-table-column>
                      </el-table-column>
                      <el-table-column>
                        <template slot="header" slot-scope="scope">
                          <span class="hoverBlue" @click="$openUrl(9)">每月奖扣目标（B分）<i class="el-icon-question" style="font-size: 16px;position: relative;top: 1px;"></i></span>
                        </template>
                        <el-table-column >
                          <template slot="header" slot-scope="scope">
                            <span>月奖分目标</span>
                            <i class="el-icon-edit" @click="setPower('reward_task_monthly')"></i>
                          </template>
                          <template slot-scope="scope">
                            <span @click="open_bonus_deducted(scope.row)">
                              <div v-for="(item,index) in scope.row.reward_task_monthly" :key="index" v-show="item.name == 'B分' && item.point != 0" class="cursor_pointer">{{item.point}}</div>
                              <div v-for="(item,index) in scope.row.reward_task_monthly" :key="index+':'" v-show="item.name == 'B分' && item.point == 0" class="cursor_pointer" style="text-decoration:underline">未设置</div>
                            </span>
                          </template>
                        </el-table-column>
                        <el-table-column >
                          <template slot="header" slot-scope="scope">
                            <span>月扣分目标</span>
                            <i class="el-icon-edit" @click="setPower('deduct_task_monthly')"></i>
                          </template>
                          <template slot-scope="scope">
                            <span @click="open_bonus_deducted(scope.row)">
                              <div v-for="(item,index) in scope.row.deduct_task_monthly" :key="index" v-show="item.name == 'B分' && item.point != 0" class="cursor_pointer">{{item.point}}</div>
                              <div v-for="(item,index) in scope.row.deduct_task_monthly" :key="index+'::'" v-show="item.name == 'B分' && item.point == 0" class="cursor_pointer" style="text-decoration:underline">未设置</div>
                            </span>
                          </template>
                        </el-table-column>
                        <el-table-column >
                          <template slot="header" slot-scope="scope">
                            <span>月奖扣次数</span>
                            <i class="el-icon-edit" @click="setPower('exec_count')"></i>
                          </template>
                          <template slot-scope="scope">
                            <div @click="open_bonus_deducted(scope.row)" v-show="scope.row.exec_count == 0" class="cursor_pointer" style="text-decoration:underline">未设置</div>
                            <div @click="open_bonus_deducted(scope.row)" v-show="scope.row.exec_count != 0" class="cursor_pointer">{{scope.row.exec_count}}</div>
                          </template>
                        </el-table-column>
                        <el-table-column >
                          <template slot="header" slot-scope="scope">
                            <span>每少一次扣</span>
                            <i class="el-icon-edit" @click="setPower('exec_count_point')"></i>
                          </template>
                          <template slot-scope="scope">
                            <div @click="open_bonus_deducted(scope.row)" v-show="scope.row.exec_count_point == 0" class="cursor_pointer" style="text-decoration:underline">未设置</div>
                            <div @click="open_bonus_deducted(scope.row)" v-show="scope.row.exec_count_point != 0">{{scope.row.exec_count_point}}</div>
                          </template>
                        </el-table-column>
                        <el-table-column >
                          <template slot="header" slot-scope="scope">
                            <span>奖扣比例</span>
                            <i class="el-icon-edit" @click="setPower('reward_ratio')"></i>
                          </template>
                          <template slot-scope="scope">
                            <div @click="open_bonus_deducted(scope.row)" v-show="scope.row.reward_ratio == 0" class="cursor_pointer" style="text-decoration:underline">未设置</div>
                            <div @click="open_bonus_deducted(scope.row)" v-show="scope.row.reward_ratio != 0" class="cursor_pointer">{{scope.row.reward_ratio}}</div>
                          </template>
                        </el-table-column>
                        <el-table-column >
                          <template slot="header" slot-scope="scope">
                            <span>比例不达标扣</span>
                            <i class="el-icon-edit" @click="setPower('reward_ratio_point')"></i>
                          </template>
                          <template slot-scope="scope">
                            <div @click="open_bonus_deducted(scope.row)" v-show="scope.row.reward_ratio_point == 0" class="cursor_pointer" style="text-decoration:underline">未设置</div>
                            <div @click="open_bonus_deducted(scope.row)" v-show="scope.row.reward_ratio_point != 0" class="cursor_pointer">{{scope.row.reward_ratio_point}}</div>
                          </template>
                        </el-table-column>
                      </el-table-column>
                    </el-table>

                    <!-- 部门管理者专属 -->
                    <el-table :data="table_list" class="tableListClass" v-show="item_info.code == 'dept_manager' && table_list !== null && table_list.length !== 0"
                       @selection-change="handleSelectionChange">
                      <el-table-column width="55" fixed type="selection"></el-table-column>
                      <el-table-column prop="name" label="姓名" width="150" fixed>
                        <template slot-scope="scope">
                          <userImage class="fl" width="50px" height="50px" :id="scope.row.id" :user_name="scope.row.name"></userImage>
                          <span style="margin-left: 10px; line-height: 50px;">{{ scope.row.name }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column width="130px" prop="dept" label="所属部门">
                        <template slot-scope="scope">
                          <el-popover placement="top-start"  trigger="hover" :content="scope.row.dept">
                            <div slot="reference" style="max-width: 130;" class="font-flex-word">{{scope.row.dept}}</div>
                          </el-popover>
                        </template>
                      </el-table-column>
                      <el-table-column width="130px" v-if="item_info.code == 'dept_manager'" prop="jurisdiction_dept" label="管辖部门">
                        <template slot-scope="scope">
                          <el-popover placement="top-start"  trigger="hover" :content="scope.row.jurisdiction_dept">
                            <div slot="reference" style="max-width: 130;" class="font-flex-word">{{scope.row.jurisdiction_dept}}</div>
                          </el-popover>
                        </template>
                      </el-table-column>
                      <el-table-column v-else width="130px" prop="dept" label="所属部门">
                        <template slot-scope="scope">
                          <el-popover placement="top-start"  trigger="hover" :content="scope.row.dept">
                            <div slot="reference" style="max-width: 130;" class="font-flex-word">{{scope.row.dept}}</div>
                          </el-popover>
                        </template>
                      </el-table-column>
                      <el-table-column width="100px">
                        <template slot="header" slot-scope="scope">
                          <span>管理范围</span>
                          <el-tooltip placement="top">
                            <div slot="content">可自由分配每个管理者的管辖范围，设置后对管辖范围内的人员有分配任务，奖扣积分、查看积分排名和统计、审核其提交上来的申请等权限</div>
                            <span class="tips">?</span>
                          </el-tooltip>
                        </template>
                        <template slot-scope="scope">
                          <div @click="add_management_scope(scope.row)" v-show="scope.row.manage_scope_count == 0" class="cursor_pointer" style="text-decoration:underline">去设置</div>
                          <div @click="add_management_scope(scope.row)" v-show="scope.row.manage_scope_count != 0" class="cursor_pointer">{{scope.row.manage_scope_count}}人</div>
                        </template>
                      </el-table-column>
                      <el-table-column>
                        <template slot="header" slot-scope="scope">
                          <span class="hoverBlue" @click="$openUrl(8)">积分权限 <i class="el-icon-question" style="font-size: 16px;position: relative;top: 1px;"></i></span>
                        </template>
                        <el-table-column >
                          <template slot="header" slot-scope="scope">
                            <span>A分权限</span>
                            <i class="el-icon-edit" @click="setPower('aAll')"></i>
                          </template>
                          <template slot-scope="scope">
                            <div @click="open_integral_limit(scope.row)" v-show="scope.row.point_limit_obj.AF == 0" class="cursor_pointer">0</div>
                            <div @click="open_integral_limit(scope.row)" v-show="scope.row.point_limit_obj.AF != 0" class="cursor_pointer">{{scope.row.point_limit_obj.AF}}</div>
                          </template>
                        </el-table-column>
                        <el-table-column >
                          <template slot="header" slot-scope="scope">
                            <span>B分权限</span>
                            <i class="el-icon-edit" @click="setPower('bAll')"></i>
                          </template>
                          <template slot-scope="scope">
                          <div @click="open_integral_limit(scope.row)" v-show="scope.row.point_limit_obj.BF == 0" class="cursor_pointer">0</div>
                            <div @click="open_integral_limit(scope.row)" v-show="scope.row.point_limit_obj.BF != 0" class="cursor_pointer">{{scope.row.point_limit_obj.BF}}</div>
                          </template>
                        </el-table-column>
                        <el-table-column >
                          <template slot="header" slot-scope="scope">
                            <span>奖分上限</span>
                            <i class="el-icon-edit" @click="setPower('bonuAll')"></i>
                          </template>
                          <template slot-scope="scope">
                            <div @click="open_integral_limit(scope.row)" v-show="scope.row.entry_limit > 0" class="cursor_pointer">{{scope.row.entry_limit}}</div>
                            <div @click="open_integral_limit(scope.row)" v-show="scope.row.entry_limit === '' || scope.row.entry_limit === 0">不限制</div>
                          </template>
                        </el-table-column>
                      </el-table-column>
                      <el-table-column>
                        <template slot="header" slot-scope="scope">
                          <span class="hoverBlue" @click="$openUrl(9)">每月奖扣目标（B分）<i class="el-icon-question" style="font-size: 16px;position: relative;top: 1px;"></i></span>
                        </template>
                        <el-table-column >
                          <template slot="header" slot-scope="scope">
                            <span>奖分目标</span>
                            <i class="el-icon-edit" @click="setPower('reward_task_monthly')"></i>
                          </template>
                          <template slot-scope="scope">
                            <span @click="open_bonus_deducted(scope.row)">
                              <div v-for="(item,index) in scope.row.reward_task_monthly" :key="index" v-show="item.name == 'B分' && item.point != 0" class="cursor_pointer">{{item.point}}</div>
                              <div v-for="(item,index) in scope.row.reward_task_monthly" :key="index+':'" v-show="item.name == 'B分' && item.point == 0" class="cursor_pointer" style="text-decoration:underline">未设置</div>
                            </span>
                          </template>
                        </el-table-column>
                        <el-table-column >
                          <template slot="header" slot-scope="scope">
                            <span>扣分目标</span>
                            <i class="el-icon-edit" @click="setPower('deduct_task_monthly')"></i>
                          </template>
                          <template slot-scope="scope">
                            <span @click="open_bonus_deducted(scope.row)">
                              <div v-for="(item,index) in scope.row.deduct_task_monthly" :key="index" v-show="item.name == 'B分' && item.point != 0" class="cursor_pointer">{{item.point}}</div>
                              <div v-for="(item,index) in scope.row.deduct_task_monthly" :key="index+'::'" v-show="item.name == 'B分' && item.point == 0" class="cursor_pointer" style="text-decoration:underline">未设置</div>
                            </span>
                          </template>
                        </el-table-column>
                        <el-table-column >
                          <template slot="header" slot-scope="scope">
                            <span>奖扣次数</span>
                            <i class="el-icon-edit" @click="setPower('exec_count')"></i>
                          </template>
                          <template slot-scope="scope">
                            <div @click="open_bonus_deducted(scope.row)" v-show="scope.row.exec_count == 0" class="cursor_pointer" style="text-decoration:underline">未设置</div>
                            <div @click="open_bonus_deducted(scope.row)" v-show="scope.row.exec_count != 0" class="cursor_pointer">{{scope.row.exec_count}}</div>
                          </template>
                        </el-table-column>
                        <el-table-column >
                          <template slot="header" slot-scope="scope">
                            <span>每少一次扣</span>
                            <i class="el-icon-edit" @click="setPower('exec_count_point')"></i>
                          </template>
                          <template slot-scope="scope">
                            <div @click="open_bonus_deducted(scope.row)" v-show="scope.row.exec_count_point == 0" class="cursor_pointer" style="text-decoration:underline">未设置</div>
                            <div @click="open_bonus_deducted(scope.row)" v-show="scope.row.exec_count_point != 0">{{scope.row.exec_count_point}}</div>
                          </template>
                        </el-table-column>
                        <el-table-column >
                          <template slot="header" slot-scope="scope">
                            <span>奖扣比例</span>
                            <i class="el-icon-edit" @click="setPower('reward_ratio')"></i>
                          </template>
                          <template slot-scope="scope">
                            <div @click="open_bonus_deducted(scope.row)" v-show="scope.row.reward_ratio == 0" class="cursor_pointer" style="text-decoration:underline">未设置</div>
                            <div @click="open_bonus_deducted(scope.row)" v-show="scope.row.reward_ratio != 0" class="cursor_pointer">{{scope.row.reward_ratio}}</div>
                          </template>
                        </el-table-column>
                        <el-table-column >
                          <template slot="header" slot-scope="scope">
                            <span>不达标扣</span>
                            <i class="el-icon-edit" @click="setPower('reward_ratio_point')"></i>
                          </template>
                          <template slot-scope="scope">
                            <div @click="open_bonus_deducted(scope.row)" v-show="scope.row.reward_ratio_point == 0" class="cursor_pointer" style="text-decoration:underline">未设置</div>
                            <div @click="open_bonus_deducted(scope.row)" v-show="scope.row.reward_ratio_point != 0" class="cursor_pointer">{{scope.row.reward_ratio_point}}</div>
                          </template>
                        </el-table-column>
                      </el-table-column>
                    </el-table>

                    <el-row :gutter="30" justify="center" v-show="table_list !== null && table_list.length == 0 && item_info.code !== 'creator' && item_info.code !== 'employee'">
                      <el-col :span="24" class="fontColorB" style="text-align: center;">
                        <p><img src="static/images/nodata_default.png" width="200px" alt=""></p>
                        还没有{{item_info.name}},
                        <span style="color:#409EFF;" @click="isShowImg = true" v-if="item_info.code == 'dept_manager'">去添加 >></span>
                        <span style="color:#409EFF;" @click="add_employee_show = true" v-else>去添加 >></span>
                      </el-col>
                    </el-row>

                    <center v-show="item_info.code == 'employee'" style="padding: 100px 0px;">未设置管理角色的人员，都是普通员工</center>
                    <center style="margin: 15px 0;" v-if="item_info.code != 'employee'">
                      <el-pagination
                        background
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="page"
                        :page-sizes="[10, 20, 50, 100]"
                        layout="total, sizes, prev, pager, next"
                        :total="total"
                      ></el-pagination>
                    </center>
                  </el-col>
                </el-row>
              </div>
            </div>
        </el-tab-pane>
      </el-tabs>
    </el-row>

    <!-- 添加老板 -->
    <EmployeeSelector
      title="添加积分主管理员"
      :isChecKedAll="false"
      :multi="false"
      :include_self="false"
      :visible.sync="dialogFormVisible"
      @confirm="add_creator"
      />

     <!-- 添加人员 -->
    <EmployeeSelector
      title="添加管理人员"
      :isChecKedAll="true"
      :visible.sync="add_employee_show"
      @confirm="add_employee_confirm"
      />

    <!-- 设置管理范围 -->
    <EmployeeSelector
      title="设置管理范围"
      :isChecKedAll="true"
      :max='add_employee_max'
      :selected="management_scope_arr"
      :visible.sync="management_scope_show"
      :employee_not_select ="control_limit"
      @confirm="management_scope_confirm"
      />

    <el-dialog
      title="数据查看权限"
      :visible.sync="dataAccessShow"
      :close-on-click-modal="false"
      width="700px">
      <div v-loading="dataAccessLoading">
        <el-form label-width="120px">
          <el-form-item v-for="(item,index) in returnQx" :key="index" :label="item.title">
            <el-radio-group v-model="item.code">
              <el-col :span="24" v-for="(d,index) in item.list" :key="index" style="padding: 10px 0" >
                <el-radio :label="d.id" style="display: block;">{{d.name}}</el-radio>
              </el-col>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer">
        <el-button :disabled="setDataAccessBtn" @click="dataAccessShow = false">取消</el-button>
        <el-button :disabled="setDataAccessBtn" type="primary" @click="setDataAccess">确定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="设置积分权限"
      :visible.sync="integral_limit_show"
      :close-on-click-modal="false"
      width="700px">
      <el-form label-width="150px" :model="integral_limit_form" ref="integral_limit_form" v-loading="integral_limit_loading">
        <span v-for="(item,index) in integral_limit_form.point_limit" :key="index" v-show="item.pt_id !== 1">
          <el-form-item :label="item.name+'权限(单次奖扣)'" :rules="[{required: true, message: '请输入'}]">
            <el-input v-model="item.point" oninput="value=value.replace(/[^\d]/g,'')"></el-input>
          </el-form-item>
        </span>
        <el-form-item label="每月B分奖分上限">
          <el-input v-model="integral_limit_form.entry_limit" oninput="value=value.replace(/[^\d]/g,'')" placeholder="奖分上限不限制"></el-input>
        </el-form-item>
        <el-form-item style="text-align: right; margin-bottom: 0">
          <el-button @click="integral_limit_show = false">取消</el-button>
          <el-button type="primary" @click="sub_employee_limit">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog
      :title="setPowerTitle"
      :visible.sync="setPowerShow"
      :close-on-click-modal="false"
      :before-close="powerClose"
      width="700px">
      <el-form label-width="150px" >
        <el-row class="red_tips">
          <el-col :span="24" v-show="setPowerType == 'aAll'">将统一修改全部{{item_info.remark}}的A分权限</el-col>
          <el-col :span="24" v-show="setPowerType == 'bAll'">将统一修改全部{{item_info.remark}}的B分权限</el-col>
          <el-col :span="24" v-show="setPowerType == 'bonuAll'">将统一修改全部{{item_info.remark}}的奖分上限(不填写为不限制)</el-col>
        </el-row>
        <el-form-item v-if="setPowerType == 'aAll'" label="A分权限(单次奖扣)" >
          <el-input v-model.number="batchSet.a_all" oninput="value=value.replace(/[^\d]/g,'')" :rules="[{required: true, message: '请输入A分权限'}]" type="Number" placeholder="请输入数值"></el-input>
        </el-form-item>
        <el-form-item v-if="setPowerType == 'bAll'" label="B分权限(单次奖扣)" >
          <el-input v-model.number="batchSet.b_all" oninput="value=value.replace(/[^\d]/g,'')" :rules="[{required: true, message: '请输入B分权限'}]" type="Number" placeholder="请输入数值"></el-input>
        </el-form-item>
        <el-form-item v-if="setPowerType == 'bonuAll'" label="每月B分奖分上限" >
          <el-input v-model="batchSet.bonu_all" oninput="value=value.replace(/[^\d]/g,'')" placeholder="奖分上限不限制"></el-input>
        </el-form-item>

        <el-form-item v-if="setPowerType == 'deduct_task_monthly'">
          <template slot="label">
            <span>月扣分任务</span>
            <el-tooltip placement="top">
              <div slot="content" style="width: 300px;">对扣分分值作任务要求。未达分值任务的按差额扣分<br />举例说明：扣分任务100，实际扣分80（差额20分），则该执行人员将被扣20分。反之，如实际扣分达到或超出100分，不对执行人员实行扣分</div>
              <span class="tips">?</span>
            </el-tooltip>
          </template>
          <el-input v-model="batchSet.deduct_task_monthly.point" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入扣分目标"></el-input>
        </el-form-item>
        <el-form-item v-if="setPowerType == 'reward_task_monthly'" >
          <template slot="label">
            <span>月奖分任务</span>
            <el-tooltip placement="top">
              <div slot="content" style="width: 300px;">对奖分分值作任务要求。未达分值任务的按差额扣分<br />举例说明：奖分任务1000，实际奖分980（差额20分），则该执行人员将被扣20分。反之，如实际奖分达到或超出1000分，不对执行人员实行扣分</div>
              <span class="tips">?</span>
            </el-tooltip>
          </template>
          <el-input v-model="batchSet.reward_task_monthly.point" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入奖分目标"></el-input>
        </el-form-item>

        <el-form-item v-if="setPowerType == 'reward_ratio_point'">
          <template slot="label">
            <span>比例不达标扣</span>
            <el-tooltip placement="top">
              <div slot="content" style="width: 300px;">未完成奖扣比例任务的，按对应分值扣分</div>
              <span class="tips">?</span>
            </el-tooltip>
          </template>
          <el-input v-model="batchSet.reward_ratio_point" type="Number" placeholder="请输入数值"></el-input>
        </el-form-item>

        <el-form-item v-if="setPowerType == 'exec_count_point'">
          <template slot="label">
            <span>每少一次扣</span>
            <el-tooltip placement="top">
              <div slot="content" style="width: 300px;">奖扣次数未达任务要求的，每少一次扣对应分值</div>
              <span class="tips">?</span>
            </el-tooltip>
          </template>
          <el-input v-model="batchSet.exec_count_point"  oninput="value=value.replace(/[^\d]/g,'')" type="Number" placeholder="请输入数值"></el-input>
        </el-form-item>

        <el-form-item v-if="setPowerType == 'exec_count'">
          <template slot="label">
            <span>月奖扣次数</span>
            <el-tooltip placement="top">
              <div slot="content" style="width: 300px;">对奖分和扣分的执行次数作任务要求<br />举例说明：奖扣次数任务100，实际执行次数95（差5次），假如每少一次扣5分，则该执行人员将被扣5*5=25分。反之，如果任务达标，不对执行人员实行扣分</div>
              <span class="tips">?</span>
            </el-tooltip>
          </template>
          <el-input v-model="batchSet.exec_count" oninput="value=value.replace(/[^\d]/g,'')" placeholder="奖分上限不限制"></el-input>
        </el-form-item>

        <el-form-item v-if="setPowerType == 'reward_ratio'">
          <template slot="label">
            <span>月奖扣比例</span>
            <el-tooltip placement="top">
              <div slot="content" style="width: 300px;">对奖分和扣分的比例作任务要求<br />举例说明：奖扣比例任务10:1，实际执行奖扣比例11:1（管理者当老好人，不敢执行扣分，导致扣分占比过低），则视为未完成，该执行人员将被扣对应分值。反之比例小于等于10:1，任务为达标，不对执行人员实行扣分</div>
              <span class="tips">?</span>
            </el-tooltip>
          </template>
          <el-input style="width: 100px;" type="Number" oninput="value=value.replace(/[^\d]/g,'')" disabled placeholder="1" ></el-input>:<el-input v-model="batchSet.reward_ratio" style="width: 100px;" type="Number" placeholder="请输入数值" ></el-input>
        </el-form-item>

        <el-form-item style="text-align: right; margin-bottom: 0">
          <el-button @click="setPowerShow = false">取消</el-button>
          <el-button type="primary" @click="setPowerBtn" v-loading="setPowerBtnLoad">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog
      title="每月奖扣目标（B分）"
      :visible.sync="bonus_deducted_show"
      :close-on-click-modal="false"
      width="600px">
      <div style="position: relative;top: -20px;">积分是否能落地，奖扣分的执行最关键！对管理人员执行奖扣分作要求，更利于整个积分制管理的落地与实施</div>
      <el-form :model="integral_limit_form" ref="integral_limit_form"  label-width="130px" v-loading="bonus_deducted_loading">
        <span v-for="(item,index) in integral_limit_form.reward_task_monthly" :key="index" v-show="item.name == 'B分'">
          <el-form-item>
            <template slot="label">
              <span>月奖分目标</span>
              <el-tooltip placement="top">
                <div slot="content" style="width: 300px;">对奖分分值作任务要求。未达分值任务的按差额扣分<br />举例说明：奖分任务1000，实际奖分980（差额20分），则该执行人员将被扣20分。反之，如实际奖分达到或超出1000分，不对执行人员实行扣分</div>
                <span class="tips">?</span>
              </el-tooltip>
            </template>
            <el-input v-model.number="item.point"  placeholder="请输入数值" oninput="value=value.replace(/[^\d]/g,'')"></el-input>
          </el-form-item>
        </span>
        <span v-for="(item,index) in integral_limit_form.deduct_task_monthly" :key="item.name" v-show="item.name == 'B分'">
          <el-form-item style="margin-bottom: 0;">
            <template slot="label">
              <span>月扣分目标</span>
              <el-tooltip placement="top">
                <div slot="content" style="width: 300px;">对扣分分值作任务要求。未达分值任务的按差额扣分<br />举例说明：扣分任务100，实际扣分80（差额20分），则该执行人员将被扣20分。反之，如实际扣分达到或超出100分，不对执行人员实行扣分</div>
                <span class="tips">?</span>
              </el-tooltip>
            </template>
            <el-input v-model.number="item.point"  placeholder="请输入数值" oninput="value=value.replace(/[^\d]/g,'')"></el-input>
            <el-checkbox v-model="checked">
                如未完成目标，自动按差额扣分
                <el-tooltip placement="top">
                  <div slot="content" style="width: 300px;"> 设置后，奖分与扣分目标其中有一项未达标，系统将自动扣除差额分值；<br />例如，A设置了月奖分目标100和月扣分目标100，到了月底，奖了80和扣了30，那该管理者将被扣90B分。</div>
                <span class="tips">?</span>
              </el-tooltip>
            </el-checkbox>
          </el-form-item>
        </span>

        <el-form-item prop="exec_count">
          <template slot="label">
            <span>月奖扣次数</span>
            <el-tooltip placement="top">
              <div slot="content" style="width: 300px;">对奖分和扣分的执行次数作任务要求<br />举例说明：奖扣次数任务100，实际执行次数95（差5次），假如每少一次扣5分，则该执行人员将被扣5*5=25分。反之，如果任务达标，不对执行人员实行扣分</div>
              <span class="tips">?</span>
            </el-tooltip>
          </template>
          <el-input v-model.number="integral_limit_form.exec_count" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入数值"></el-input>
        </el-form-item>
        <el-form-item prop="exec_count_point">
          <template slot="label">
            <span>每少一次扣</span>
            <el-tooltip placement="top">
              <div slot="content" style="width: 300px;">奖扣次数未达任务要求的，每少一次扣对应分值</div>
              <span class="tips">?</span>
            </el-tooltip>
          </template>
          <el-input v-model.number="integral_limit_form.exec_count_point" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入数值"></el-input>
        </el-form-item>
        <el-form-item prop="reward_ratio">
          <template slot="label">
            <span>奖扣比例</span>
            <el-tooltip placement="top">
              <div slot="content" style="width: 300px;">对奖分和扣分的比例作任务要求<br />举例说明：奖扣比例任务10:1，实际执行奖扣比例11:1（管理者当老好人，不敢执行扣分，导致扣分占比过低），则视为未完成，该执行人员将被扣对应分值。反之比例小于等于10:1，任务为达标，不对执行人员实行扣分</div>
              <span class="tips">?</span>
            </el-tooltip>
          </template>
          <el-input v-model.number="integral_limit_form.reward_ratio" style="width: 100px;"  placeholder="请输入数值" oninput="value=value.replace(/[^\d]/g,'')"></el-input>:<el-input style="width: 100px;" type="Number" disabled placeholder="1" ></el-input>
        </el-form-item>
        <el-form-item prop="reward_ratio_point">
          <template slot="label">
            <span>比例不达标扣</span>
            <el-tooltip placement="top">
              <div slot="content" style="width: 300px;">未完成奖扣比例任务的，按对应分值扣分</div>
              <span class="tips">?</span>
            </el-tooltip>
          </template>
          <el-input v-model.number="integral_limit_form.reward_ratio_point"  oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入数值"></el-input>
        </el-form-item>
        <el-form-item style=" text-align: right; margin-bottom: 0;">
          <el-button @click="bonus_deducted_colse('integral_limit_form')">取消</el-button>
          <el-button type="primary" @click="sub_bonus_deducted('integral_limit_form')">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="添加部门管理员" :visible.sync="isShowImg">
      <div>
         <img src="static/images/tjbmgly.png" style="width: 100%;"/>
      </div>
    </el-dialog>


    <!-- 导出员工 -->
    <el-dialog
      title="导出/修改部门管理者信息"
      width="600px"
      :visible.sync="exportEmploye"
      :close-on-click-modal="false"
      :before-close="close_export">
      <div style="float: left;width:49%">
        <div style="margin-left: 20%;">
        <p>1.导出部门管理者信息</p>
            <el-button type="primary" plain @click="downloadSheet">导出</el-button>
        </div>
      </div>
      <div style="border-left: 1px solid #D8D8D8;width: 1px;height: 255px;float: left;"></div>
      <div style="float: left;width:49%;">
        <div style="margin-left: 20%;">
        <p>2.修改部门管理者信息</p>
        <p>导出部门管理者信息表进行修改</p>
        <p>上传修改好的部门管理者信息表</p>
          <el-upload
            :limit = '1'
            :headers="ATOKEN"
            ref="upload2"
            :data='datas'
            :action="integralUpload"
            :on-success="handlePictureCardPreview"
            :before-upload="beforeFilesUpload"
            >
            <p>
                <el-button type="primary" plain>选择文件</el-button>
            </p>
          </el-upload>
        <p>先选择文件后再完成上传</p>
        <el-button type="primary" @click="uploadFile('prize_buckle')" :loading="update_btn" plain>上传</el-button>
        </div>
      </div>
        <div class="align-center" style="margin-bottom:20px; float:left; margin-left:10px;"></div>
        <div class="align-center" style="margin-bottom:20px; float:left; margin-left:10px;"></div>
        <div style="clear:both;"></div>
    </el-dialog>
   <el-dialog title="提交结果" :visible.sync="isResult"  width="600px" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
    	<div >
    		<el-progress :text-inside="true" :stroke-width="24" :percentage="percentage"></el-progress>
        <div style="text-align: center;margin: 20px 0;" v-if="!isError">
          <span class="blue" v-if="percentage!=100"><i class="el-icon-loading"></i>正在同步中...</span>
          <span v-else class="green">同步已完成</span>
        </div>
        <div class="red" style="text-align: center;margin:20px 0;" v-else>同步失败，请联系客服</div>
    	</div>
      <span slot="footer">
      	<div class="flex-box-end" style="margin-top: 20px;" v-if="percentage>=100||isError"><el-button type="primary" @click="isResult = false" size="small">确 定</el-button></div>
      </span>
    </el-dialog>

    <el-dialog title="同步" :visible.sync="isShowMessage" width="600px">
     	<div>
        <div class="black" style="font-size: 16px;margin-bottom: 5px;">同步前</div>
        <div class="fontColorB">请检查【组织】内是否已将相关人员设为对应部门的管理员</div>
        <div class="black" style="font-size: 16px;margin-bottom: 5px;margin-top: 30px;">同步后</div>
        <div class="fontColorB">将按组织架构将每个部门的管理员同步添加到此列表中，并且对应部门下的成员都将自动添加到其管理范围下</div>
     	</div>
       <span slot="footer">
       	<div class="flex-box-end">
            <el-button plain @click="isShowMessage = false">取 消</el-button>
            <el-button type="primary" @click="opneWebSocket">确 定</el-button>
        </div>
       </span>
     </el-dialog>

  </div>
</template>
<script>
  import {_debounce} from '@/utils/auth';
  import EmployeeSelector from '@/components/EmployeeSelector'
  var bool = true;
  const minimum = (rule, value,callback)=>{
    if (value < 0){
      callback(new Error('请输入正确的数值'))
    }else {
      callback()
    }
  }
  export default {
    data() {
      return {
        page: 1,
        pageSize:10,
        total: 0,
        // 积分主管理员相关操作
        isStart: false, //是否是积分主管理员
        dialogFormVisible:false,
        bossObj: '',

        checked:true,
        integralUpload:this.$serverdomain + '/api/pro/upload/excel',
        datas:{type:'prize_buckle'},
        update_btn: false,
        ATOKEN: { 'A-TOKEN': this.$getToken()},
        exportEmploye: false, // 导出员工信息

        isShowImg:false,
        syncScopeId:[],

        activeName: 'creator',//选项卡，默认选中

        control_limit:[],
        table_loading:false,
        permissions_loading:false,
        role_list: [],
        item_info: {},
        keyword:'',//搜索的关键词
        table_list: [],

        del_arr: [],
        employee_show: false,
        add_employee_max: 0,
        add_employee_show: false,
        employee_map: this.$store.getters.employee_map,
        add_employee_form:{
          employee_ids:[]
        },
        employee_arr: [],
        management_arr: [],
        management_scope_show: false,
        list_info: null,
        management_scope_arr: {employee: [], dept: []},
        rules_employee_arr: {employee: [], dept: []},
        integral_limit_show: false,
        integral_limit_loading: false,
        integral_limit_form:{},
        set_mployee_limit_id: '',
        bonus_deducted_show:false,
        bonus_deducted_loading: false,
        radio: '',
        tips_show: false,
        employee_not_select: [],
        setPowerShow: false,
        setPowerBtnLoad: false,
        setPowerType: 'aAll',
        setPowerTitle: '设置A分上限',
        batchSet:{
          a_all:'',
          b_all:'',
          bonu_all:'',
          service_point: '',
          reward_ratio_point: '',
          exec_count_point: '',
          exec_count: '',
          reward_ratio: '',
          deduct_task_monthly:{
            pt_id: '3',
            point: '',
          },
          reward_task_monthly:{
            pt_id: '3',
            point: '',
          },
        },
        dataAccessShow: false,
        setDataAccessBtn: false,
        dataAccessLoading: false,
        jurisdiction:[],
        // 除员工外权限范围数据
        dataAccessList: [
          {
            title: '查看积分事件',
            name: 'event_range',
            code: 0,
            list: [
              {name: '仅查看自己的数据', id: 1},
              {name: '查看所属部门的数据(含子部门)', id: 4},
              {name: '查看自己以及管理范围内用户的数据', id: 2},
              {name: '查看全员数据', id: 3}
            ]
          },
          {
            title: '管理者奖扣',
            name: 'prize_range',
            code: 0,
            list: [
              {name: '查看自己以及管理范围内管理者的数据', id: 1},
              {name: '查看全部管理者的数据', id: 2},
            ]
          },
          {
            title: '团队绩效',
            name: 'performance_range',
            code: 0,
            list: [
              {name: '查看自己以及管理范围内用户的数据', id: 1},
              {name: '查看全员数据', id: 2},
            ]
          },
          {
            title: '积分统计',
            name: 'statistics_range',
            code: 0,
            list: [
              {name: '查看自己以及管理范围内用户的数据', id: 1},
              {name: '查看全员数据', id: 2},
            ]
          },
        ],
        // 员工权限范围数据
        dataAccessListEmployee: [
          {
            title: '积分事件',
            name: 'event_range',
            code: 0,
            list: [
              {name: '仅查看自己的数据', id: 1},
              {name: '查看所属部门的数据(含子部门)', id: 4},
              {name: '查看全员数据', id: 3}
            ]
          },
          {
            title: '团队绩效',
            name: 'performance_range',
            code: 0,
            list: [
              {name: '仅查看自己的数据', id: 1},
              {name: '查看全员数据', id: 2},
            ]
          }
        ],

        isResult: false,
        percentage: 0,
        isError:false,

        isShowMessage:false,

      };
    },
    components: {EmployeeSelector},
    computed:{
      returnQx(){
        let jurisdiction=[];
        this.jurisdiction.map(item=>{
          if(item.title!='团队绩效'){
              jurisdiction.push(item)
          }
        })
        return jurisdiction
      }
    },
    watch:{
      keyword:_debounce(function(val){
        this.page = 1;
        this.get_table_list()
      }),
      setPowerType(val){
        switch(val) {
          case 'aAll':
              this.setPowerTitle = '设置A分上限'
              break;
          case 'bAll':
              this.setPowerTitle = '设置B分上限'
              break;
          case 'bonuAll':
              this.setPowerTitle = '设置奖分上限'
              break;
          case 'deduct_task_monthly':
              this.setPowerTitle = '设置月扣分任务'
              break;
          case 'reward_task_monthly':
              this.setPowerTitle = '设置月奖分任务'
              break;
          case 'reward_ratio_point':
              this.setPowerTitle = '设置比例未达标'
              break;
          case 'exec_count_point':
              this.setPowerTitle = '设置每少一次奖扣'
              break;
          case 'exec_count':
              this.setPowerTitle = '设置月奖扣次数'
              break;
          case 'reward_ratio':
              this.setPowerTitle = '设置月奖扣比例'
              break;
          default:
              this.setPowerTitle = ''
        }
      }
    },
    methods: {
      handleCurrentChange(val) {
        this.page = val;
        this.get_table_list();
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.page = 1;
        this.get_table_list();
      },
      //删除积分主管理员
      del_creator() {
      	var userData = this.$store.getters.user_info;
      	if (!this.radio) {
      		this.$message.error('请选择要删除的积分主管理员');
      		return false;
      	}
      	if (this.radio == userData.id) {
      		this.$message.error('不能删除自己');
      		return false;
      	}
      	this.$confirm('确定要删除该积分主管理员?', '提示', {
      		confirmButtonText: '确定',
      		cancelButtonText: '取消',
      		type: 'warning'
      	}).then(() => {
      		this.$axiosUser('post', '/api/pro/role/creator/delete', { employee_id: this.radio })
      			.then(res => {
      				if (res.data.code == 1) {
      					this.$message.success(res.data.msg);
                this.page=1;
      					this.get_table_list();
      				}
      			}).finally(() => {
      				this.radio = '';
      			});
      	});
      },
      //添加老板
      add_creator(val) {
        if (val.employee.length > 0) {
        	this.bossObj = val.employee[0].id;
        }
      	if (this.bossObj) {
      		this.$axiosUser('post', '/api/pro/role/creator/add', { employee_id: this.bossObj }).then(res => {
      				this.$message.success('添加成功');
      				this.open_right(this.role_list[0]);
      			}).finally(() => {
              this.bossObj="";
      				this.dialogFormVisible = false;
      			});
      	} else {
      		this.$message.error('请选择人员');
      	}
      },
      del_btn(){
        let self = this
        if (!self.radio) {
          if (bool) {
            this.$message({ message: '请选择要删除的人员', type: 'warning' });
            bool = false
            setTimeout(() => { bool = true}, 5000)
          }
          return false
        }
        self.$confirm('确定要删除该人员?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          self.$axiosUser('DELETE','/api/pro/role/user',{role_id: self.item_info.id,employee_id: self.radio}).then((res) => {
            if (res.data.code == 1) {
              self.radio = ''
              self.$message.success(res.data.msg)
            }else{
              self.$message.error(res.data.msg)
            }
          }).finally(()=>{
            this.page=1;
            this.get_table_list()
          })
        })
      },
      // 关闭导出
      close_export(){
        this.exportEmploye = false
        this.$refs.upload2.clearFiles()
      },
      //  导入 新增
      uploadFile: function(type) {
        let params = {};
        params.file = this.file;
        this.update_btn = true
        this.$axiosUser('post','/api/pro/employee/prize_import', params).then(res => {
          if(res.data.code == 1) {
            this.close_export()
            this.$message.success({
              type:'上传成功',
              message:res.data.msg
            })
            this.page=1
            this.get_table_list()
          }
        }).finally(()=>{
          setTimeout(() => {
            this.update_btn = false
          }, 3000);
        })
      },
      // 导出员工信息
      downloadSheet: function() {
        let role_id
        for(let i in this.role_list){
          if(this.role_list[i].code == "dept_manager"){
            role_id = this.role_list[i].id
          }
        }
        let params = {
          role_id : role_id
        }
        this.$axiosUser('get','/api/pro/employee/prize_export',params)
        .then(res => {
            if(res.data.code == 1) {
              let path = res.data.data.path;
              window.open(this.$serverdomain+'/api/pro/employee/download?path='+path+'&type='+2)
            }
        })
      },

      handlePictureCardPreview(response) {
        if(response.code == 1) {
          this.file = response.data;
        }
      },
      beforeFilesUpload(file) {
        const $ext_list = ['xlsx', 'xls','XLSX','XLS'];
          let len =  file.name.split('.').length - 1;
          const $ext_name = file.name.split('.')[len]
          if ($ext_list.indexOf($ext_name) != -1) {

          }else {
            this.$message.warning('文件格式上传错误,仅支持上传xlsx,xls）')
            return false
          }
      },
      opneWebSocket() {
        this.percentage=0;
        this.isShowMessage=false;
        this.isResult = true;
        this.isError=false;
        this.$socketApiTow.sendData({type:"dm_to_integral"},this.onmessageWS)
      },
      onmessageWS(e){
        if(e.type=='dm_to_integral'){
          let result=e.result;
          if(e.code==1){
            this.$message.success('已同步');
            this.get_table_list();
            this.percentage=100;
            this.$socketApiTow.closewebsocket();
          }else if(e.code==5){
            this.isError=true;
            this.percentage += Math.floor(100 / (result.total));
          }else if(e.code==2){
            this.percentage += Math.floor(100 / (result.total));
          }
        }
        // 中途断开
        if(e.type=='break'){
            this.isError=true;
        }
        // 连接不上
        if(e.type=='error'){
            this.isError=true;
        }
      },
      //同步管理范围
      syncScope(){
        if(this.del_arr.length==0){
          this.$message({
            message: "请选择需要“同步管理范围”的管理者",
            type: 'error'
          });
        }else{
            this.$confirm('确认同步所选择的管理员？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
                let data = {
                  superior_id:this.del_arr
                }
                this.$axiosUser('post','/api/pro/employee/syn_scope',data).then((res)=>{
                  if(res.data.code == 1){
                    this.$message({
                      message: res.data.msg,
                      type: 'success'
                    });
                    this.get_table_list()
                  }
                })
            }).catch(() => {

            });
        }
      },
      // 数据查看权限弹窗
      dataAccessPopup(){
        this.dataAccessShow = true
        this.getDataAccess()
      },
      // 获取数据范围权限
      getDataAccess(){
        let self = this
        self.dataAccessLoading = true
        self.$axiosUser('get','/api/pro/role/range',{role_id: self.item_info.id}).then((res) => {
          if (res.data.code == 1) {
            const resData = res.data.data
            if(this.item_info.code != 'employee'){
              self.dataAccessList.forEach(element => {
                element.name == 'event_range'?element.code = resData.event_range:''
                element.name == 'prize_range'?element.code = resData.prize_range:''
                element.name == 'performance_range'?element.code = resData.performance_range:''
                element.name == 'statistics_range'?element.code = resData.statistics_range:''
              });
            }else{
              self.dataAccessListEmployee.forEach(element => {
                element.name == 'event_range'?element.code = resData.event_range:''
                element.name == 'performance_range'?element.code = resData.performance_range:''
              });
            }
          } else {
            self.$message.error(res.data.msg)
          }
        }).finally(()=>{
          self.dataAccessLoading = false
        })
      },
      // 设置数据范围权限
      setDataAccess(){
        let self = this
        let data = {
          role_id: self.item_info.id
        }
        self.setDataAccessBtn = true
        self.jurisdiction.forEach(element => {
          data[element.name] = element.code
        });
        if(self.item_info.code == 'employee'){
          data.prize_range = '1',
          data.statistics_range = '1'
        }
        self.$axiosUser('post','/api/pro/role/range',data).then((res) => {
          if (res.data.code == 1) {
            self.dataAccessShow = false
            self.$message.success(res.data.msg)
          }else{
            self.$message.error(res.data.msg)
          }
        }).finally(()=>{
          self.setDataAccessBtn = false
        })
      },
      setPower(type){
        this.setPowerShow = true
        this.setPowerType = type
      },
      powerClose(){
        this.setPowerShow = false
        this.batchSet.a_all = ''
        this.batchSet.b_all = ''
        this.batchSet.bonu_all = ''
      },
      setPowerBtn(){
        let self = this
        let data = {employees: []}
        switch(self.setPowerType) {
          case 'aAll':
              data.a = self.batchSet.a_all
              break;
          case 'bAll':
              data.b = self.batchSet.b_all
              break;
          case 'bonuAll':
              data.entry_limit = self.batchSet.bonu_all || '-1'
              break;
          case 'deduct_task_monthly':
              data.deduct_task_monthly = [{...self.batchSet.deduct_task_monthly}]
              break;
          case 'reward_task_monthly':
              data.reward_task_monthly = [{...self.batchSet.reward_task_monthly}]
              break;
          case 'reward_ratio_point':
              data.reward_ratio_point = self.batchSet.reward_ratio_point
              break;
          case 'exec_count_point':
              data.exec_count_point = self.batchSet.exec_count_point
              break;
          case 'exec_count':
              data.exec_count = self.batchSet.exec_count
              break;
          case 'reward_ratio':
              data.reward_ratio = self.batchSet.reward_ratio
              break;
          default:
              data = {}
        }
        self.table_list.forEach(element => {
          data.employees.push(element.id)
        });
        self.setPowerBtnLoad = true
        self.$axiosUser('post','/api/pro/integral/employee/limit/batch',data).then((res) => {
          if (res.data.code == 1) {
            self.$message.success(res.data.msg)
            self.table_list.forEach(element => {
              switch(self.setPowerType) {
                case 'aAll':
                    element.point_limit_obj.AF = data.a
                    break;
                case 'bAll':
                    element.point_limit_obj.BF = data.b
                    break;
                case 'bonuAll':
                    if (data.entry_limit == '-1') {
                      element.entry_limit = ''
                    }else{
                      element.entry_limit = data.entry_limit
                    }
                    break;
                case 'deduct_task_monthly':
                    element.deduct_task_monthly[0].point = data.deduct_task_monthly[0].point
                    break;
                case 'reward_task_monthly':
                    element.reward_task_monthly[0].point = data.reward_task_monthly[0].point
                    break;
                case 'reward_ratio_point':
                    element.reward_ratio_point = data.reward_ratio_point
                    break;
                case 'exec_count_point':
                    element.exec_count_point = data.exec_count_point
                    break;
                case 'exec_count':
                    element.exec_count = data.exec_count
                    break;
                case 'reward_ratio':
                    element.reward_ratio = data.reward_ratio
                    break;
                default:
                    element.reward_ratio = '0'
              }
            });
            self.powerClose()
          }else{
            self.$message.error(res.data.msg)
          }
        }).finally(()=>{
          self.setPowerBtnLoad = false
          self.get_table_list()
        })

      },
      // 关闭提示语
      tips_close() {
        this.$setCache('role_tips','true')
        this.tips_show = false
      },
      open_integral_limit(item){
        this.integral_limit_show = true
        this.set_mployee_limit_id = item.id
        this.get_employee_limit(item.id)
      },
      // 补全A、B分
      completionABArr(arr){
        let resultArr = [{name: "A分", point: 0, pt_id: 2},{name: "B分", point: 0, pt_id: 3}]
        if(arr !== null && arr.length == 0){
          arr = resultArr
        }else if(arr.length == 1 && arr[0].pt_id == 3){
          arr.push({name: "A分", point: 0, pt_id: 2})
        }
        if(arr.length == 1 && arr.pt_id == 2){
          arr.push({name: "B分", point: 0, pt_id: 3})
        }
        return arr
      },
      get_employee_limit(id){
        let self = this
        self.integral_limit_loading = true
        self.bonus_deducted_loading = true
        self.$axiosUser('get','/api/pro/integral/employee/limit',{employee_id: id}).then((res) => {
          if (res.data.code == 1) {
            const resultData = res.data.data
            self.integral_limit_form = resultData
            self.integral_limit_form.point_limit = this.completionABArr(resultData.point_limit)
            self.integral_limit_form.deduct_task_monthly = this.completionABArr(resultData.deduct_task_monthly)
            this.checked = resultData.task_enable == 0 ?false:true
            self.integral_limit_form.reward_task_monthly = this.completionABArr(resultData.reward_task_monthly)

            if(self.integral_limit_form.entry_limit === -1){
              self.integral_limit_form.entry_limit = ''
            }
          } else {
            self.$message.error(res.data.msg)
          }
        }).finally(() => {
          self.integral_limit_loading = false
          self.bonus_deducted_loading = false
        })
      },
      sub_employee_limit(){
        let self = this
        self.integral_limit_form.employee_id = self.set_mployee_limit_id
        let data = JSON.parse(JSON.stringify(self.integral_limit_form))
        if (data.entry_limit == "") {
          data.entry_limit = '-1'
        }
        self.$axiosUser('post','/api/pro/integral/employee/limit',data).then((res) => {
          if (res.data.code == 1) {
            self.$message.success(res.data.msg)
            self.get_table_list()
            self.integral_limit_show = false
          }else{
            self.$message.error(res.data.msg)
          }
        })
      },
      open_bonus_deducted(item){
        this.bonus_deducted_show = true
        this.set_mployee_limit_id = item.id
        this.get_employee_limit(item.id)
      },
      sub_bonus_deducted(fromName){
        let self = this
        self.integral_limit_form.employee_id = self.set_mployee_limit_id
        self.integral_limit_form.task_enable = self.checked?'1':'0'
        var data=self.integral_limit_form;
        if(data.exec_count_point>0&&data.exec_count==0){
          self.$message.error("月奖扣次数不能为0")
          return
        }
        if(data.reward_ratio_point>0&&data.reward_ratio==0){
          self.$message.error("月奖扣比例不能为1:0")
          return
        }
        self.$refs[fromName].validate((valid) => {
          if (valid) {
            self.$axiosUser('post','/api/pro/integral/employee/limit',self.integral_limit_form).then((res) => {
              if (res.data.code == 1) {
                self.$message.success(res.data.msg)
                setTimeout(() => {
                  self.get_table_list()
                }, 1000);
                self.bonus_deducted_show = false
              }else{
                self.$message.error(res.data.msg)
              }
            })
          }
        });
      },
      bonus_deducted_colse(fromName){
        this.bonus_deducted_show = false
        this.$refs[fromName].resetFields()
      },
      add_management_scope(item){
        let self = this
        self.list_info = item;
        this.control_limit = [item.id],//设置选人员时排除设置的人

        self.employee_not_select = [item.id]
        let employeeList=this.$getEmployeeMap();//获取员工信息
        self.management_scope_arr.employee=[];
        self.$axiosUser('get','/api/pro/employee/info',{id: self.list_info.id}).then((res) => {
          if (res.data.code == 1) {
            let employee_detail=res.data.data.employee_detail.manage_scope||[];//获取当前数据的管理范围
            employee_detail.map((item)=>{//依次将缓存的头像添加到数据中
              if(employeeList[item.id]){
                item.img_url=employeeList[item.id].img_url
              }
            })
            self.management_scope_arr.employee = employee_detail;
            self.management_scope_show = true
          } else {
            self.$message.error(res.data.msg)
          }
        })
      },
      //设置管理范围
      sub_management_scope(){
        let self = this;
        this.$refs.Employee.confirm();//调用组件的confirm（）；
        self.$axiosUser('POST','/api/pro/employee/scope',{employee_id: self.list_info.id,id: self.management_arr},).then((res) => {
          if (res.data.code == 1) {
            self.$message.success("设置成功！")
            self.table_list.forEach(element => {
              if (element.id == self.list_info.id) {
                element.manage_scope_count = self.management_arr.length
              }
            });
            self.management_scope_show = false
            this.$nextTick(() => {
              this.$store.dispatch('get_employee_map').then((res) => {})
            })
          } else{
            self.$message.error(res.data.msg)
          }
        })
      },
      edit_permissions(){
        let self = this
        let data = {role_id: self.item_info.id,permissions: []}
        this.permissions_list.forEach(element => {
          if(element.selected == true){
            data.permissions.push(element.id)
          }
        });
        self.$axiosUser('post','/api/pro/role/permissions',data).then((res) => {
          if (res.data.code == 1) {
          }else{
            self.$message.error(res.data.msg)
          }
        })
      },
      get_role_list() {
        let self = this
        self.$axiosUser('get','/api/pro/role/list').then((res) => {
          if (res.data.code == 1) {
            this.role_list = res.data.data.list
            this.open_right(this.role_list[0])
          } else {
            self.$message.error(res.data.msg)
          }
        })
      },
      open_pane(data){
        var obj={};
        this.role_list.forEach(item=>{
            if(data.name==item.code){
              obj=item;
            }
        })
        this.keyword='';
        this.open_right(obj);
      },
      open_right(data){
        this.page=1;

        // 根据选择人员权限来显示不同的权限数据范围
        this.jurisdiction=data.code=='employee'? this.dataAccessListEmployee:this.dataAccessList;
        this.item_info = data
        if(data.code!='employee'){
          this.get_table_list()
        }
      },
      get_table_list(){
        let self = this
        self.table_loading = true
        self.$axiosUser('get','/api/pro/role/user',{role_id: self.item_info.id,keyword:self.keyword,page_size:this.pageSize,page:this.page}).then((res) => {
          if (res.data.code == 1) {
            if(this.item_info.code == 'dept_manager'){//获取到部门管理列表中人的id
              let syncScopeIds = []
              for(let i in res.data.data.list){
                syncScopeIds.push(res.data.data.list[i].id)
              }
              this.syncScopeId = syncScopeIds
            }
            let point_types = self.$store.getters.point_types
            let point_type_map = {}
            for(let i in point_types){
              point_type_map[point_types[i].id] = point_types[i]
            }
            let data = res.data.data.list
            // 处理添加人员的组件选中问题
            this.rules_employee_arr.employee = []
            for(let i in data){
              this.rules_employee_arr.employee.push({id: data[i].id, img_url: data[i].img_url, name: data[i].name})
              if (data[i].entry_limit == '-1') {
                data[i].entry_limit = ''
              }
              if(data[i].point_limit !== null && data[i].point_limit.length == 0){
                data[i].point_limit = [{name: "A分", point: 0, pt_id: 2},{name: "B分", point: 0, pt_id: 3}]
              }
              if(data[i].deduct_task_monthly !== null && data[i].deduct_task_monthly.length == 0){
                data[i].deduct_task_monthly = [{name: "A分", point: 0, pt_id: 2},{name: "B分", point: 0, pt_id: 3}]
              }
              if(data[i].reward_task_monthly !== null && data[i].reward_task_monthly.length == 0){
                data[i].reward_task_monthly = [{name: "A分", point: 0, pt_id: 2},{name: "B分", point: 0, pt_id: 3}]
              }
              if(!data[i]['point_limit_obj']){
                data[i]['point_limit_obj'] = {}
              }
              for(let k in data[i].point_limit){
                data[i]['point_limit_obj'][point_type_map[data[i].point_limit[k].pt_id].code] = data[i].point_limit[k].point
              }
            }
            this.table_list = data
            this.total=res.data.data.total;
          } else {
            self.$message.error(res.data.msg)
          }
        }).finally(() => {
          self.table_loading = false
        })
      },

      handleSelectionChange(val){
        this.del_arr = []
        val.forEach(element => {
          this.del_arr.push(element.id)
        });
      },
      add_employee_confirm(val){
        let self = this
        self.employee_arr = []
        val.employee.forEach(element => {
          self.employee_arr.push(element.id)
        });
        this.postData()
      },
      //添加编辑管理范围
      management_scope_confirm(val){
        this.management_arr = []
        val.employee.forEach(element => {
          this.management_arr.push(element.id)
        });
        this.$axiosUser('POST','/api/pro/employee/scope',{employee_id: this.list_info.id,id: this.management_arr},).then((res) => {
            this.$message.success("设置成功！")
            this.table_list.forEach(element => {
              if (element.id == this.list_info.id) {
                element.manage_scope_count = this.management_arr.length
              }
            });
            this.management_scope_show = false
            this.$nextTick(() => {
              this.$store.dispatch('get_employee_map').then((res) => {})
            })
        })
      },
       //公共弹窗关闭
      publicClose(){
        this.add_employee_show=false;
        this.management_scope_show=false;
      },
      sub_add_employee(form){
        let self = this
        this.$nextTick(()=>{
          this.$refs.Employee.confirm()
        })
      },
      // 批量添加管理者
      postData(){
        let data = {target:[]}
        this.employee_arr.forEach(element => {
          data.target.push({role_id: this.item_info.id,employee_id: element})
        });
        if(data.target.length != 0){
          this.add_employee_show= false
          this.$nextTick(()=>{
            this.$axiosUser('POST','/api/pro/role/user/many',data,).then((res) => {
                this.$message.success('已经添加成功，请稍后刷新查看')
                this.page=1;
                this.get_table_list()
            })
          })
        }else{
          if (bool) {
            this.$message({
              message: '请选择人员',
              type: 'warning'
            });
            bool = false
            setTimeout(() => {
              bool = true
            }, 5000)
          } else {
          }
        }
      },
    },
    mounted() {
      this.isStart=this.$supremeAuthority('creator');
      this.get_role_list()
      if (this.$getCache('role_tips')) {
        this.tips_show = false
      }else{
        this.tips_show = true
      }
    },
    beforeDestroy(){
      this.$store.dispatch('getUserInfo')
    }
  };
</script>
<style scoped lang="scss">
  .el-radios /deep/ .el-radio__label {
  	display: none;
  }
  /deep/ .radioBox .el-radio__label {
  	display: inline-block;
  }
  /deep/ .el-menu-item{
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
  }
  .tips_alert {
    margin-bottom: 20px;
    background: #fdf6ec;
    padding: 2px 10px;
    font-size: 13px;
    position: relative;
    color: #606266;
  }

  .tips_alert i {
    font-size: 12px;
    opacity: 1;
    position: absolute;
    top: 12px;
    right: 15px;
    cursor: pointer;
    color: #C0C4CC;
  }

  .tips_alert span {
    color: #E6A23C;
  }
  .text-center{
    text-align: center;
  }
  .set_role_box {
    .person_role_box {
      display: block;
      padding: 14px 0;
    }
    .person_role_box:hover {
      background: #EBF5FF;
    }

    .person_role_box:hover .pic {
      background: #409EFF;
    }

    .pic {
      display: inline-block;
      vertical-align: middle;
      width: 24px;
      height: 24px;
      background: #D8D8D8;
      margin-right: 6px;
    }

    .name {
      display: inline-block;
      vertical-align: middle;
      font-size: 14px;
      color: #303133;
    }

    .role_list {
      width: 100%;
    }
  }
  .tips{
    background: #DCDFE6;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    color: #fff;
    display: inline-block;
    font-size: 12px;
    line-height: 14px;
    text-align: center;
  }

  .tableListClass{
    .el-radio{
      /deep/ .el-radio__label{
        display: none;
      }
    }
  }

  .set_role_div{
    background:#fff;
    padding: 20px;
  }
  .diy-tip{
    margin-bottom:15px;background:#f0f9eb!important;color:#67c23a!important;border:1px solid #67c23a;padding:20px 16px;
    p{
      color:#67c23a!important;font-size:14px;margin:0 !important;padding:4px 0;
    }
  }
  .cursor_pointer{
    cursor: pointer;
  }
  .cursor_pointer:hover{
    color: #409EFF;
  }
  .red_tips{
    margin-bottom: 15px;
    color: #f56c6c;
  }
  .roleTipClass{
    font-size:12px;
    color:#909399;
    margin-bottom:20px;
  }
  .roleNameClass{
    // display:block;
    font-size:20px;
    color:#303133;
  }
</style>