|
@@ -1,126 +1,124 @@
|
|
<template>
|
|
<template>
|
|
<el-dialog
|
|
<el-dialog
|
|
:title="title"
|
|
:title="title"
|
|
- :visible.sync="visible_" :close-on-click-modal="false" :before-close="close_before" append-to-body @close='closeDialog'
|
|
|
|
- width="640px" class="employee_select_dialog">
|
|
|
|
- <div class="employee_selector_box" v-loading="selectApersonModuleLoad">
|
|
|
|
|
|
+ :visible.sync="visible_"
|
|
|
|
+ :close-on-click-modal="false"
|
|
|
|
+ :before-close="close_before"
|
|
|
|
+ append-to-body
|
|
|
|
+ @open="openDialog"
|
|
|
|
+ width="640px"
|
|
|
|
+ class="employee_select_dialog"
|
|
|
|
+ >
|
|
|
|
+ <slot name="header"></slot>
|
|
|
|
+ <div class="employee_selector_box" v-if="visible_">
|
|
<el-row :gutter="10">
|
|
<el-row :gutter="10">
|
|
- <el-col :xs="11" :sm="11" :md="11" :lg="11" :xl="11" class="scroller-box">
|
|
|
|
-
|
|
|
|
|
|
+ <el-col :xs="11" :sm="11" :md="11" :lg="11" :xl="11" class="scroller-box one">
|
|
<div class="search-box">
|
|
<div class="search-box">
|
|
- <div class="search">
|
|
|
|
- <el-button slot="append" icon="el-icon-search" class="manager_button"></el-button>
|
|
|
|
- <el-input v-model="keyword" placeholder="请输入内容"></el-input>
|
|
|
|
|
|
+ <!-- <div class="search flex-box"><el-input v-model="keyword" placeholder="请输入内容" clearable></el-input></div> -->
|
|
|
|
+ <div class="search flex-box dept_icon" style="margin-top: 7px; width: 80%; position: relative;">
|
|
|
|
+ <deptData v-if="toPdept1 && toPdept1!=0" :refsName="$refs.dept1" :toPdept="toPdept1" style="width: 79%;"></deptData>
|
|
|
|
+ <el-cascader
|
|
|
|
+ v-show="can_select_employee&&deptId==0"
|
|
|
|
+ v-model="dept_id"
|
|
|
|
+ :options="dept_list"
|
|
|
|
+ :props="{ checkStrictly: true, value: 'id', label: 'name', children: 'children' }"
|
|
|
|
+ @change="dept1_null"
|
|
|
|
+ ref="dept1"
|
|
|
|
+ filterable
|
|
|
|
+ :disabled="deptId > 0"
|
|
|
|
+ change-on-select
|
|
|
|
+ placeholder="请选择部门"
|
|
|
|
+ clearable
|
|
|
|
+ >
|
|
|
|
+ <template slot-scope="{ node, data }">
|
|
|
|
+ <span>
|
|
|
|
+ <WWOpenData type="departmentName" :openid="data.name"></WWOpenData>
|
|
|
|
+ </span>
|
|
|
|
+ </template>
|
|
|
|
+ </el-cascader>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <div class="dept_path">
|
|
|
|
- <a href="javascript:void(0);" @click="back_by_index(0)">全公司</a>
|
|
|
|
- <a
|
|
|
|
- v-for="(item, index) in pid_list_arr"
|
|
|
|
- :key="index"
|
|
|
|
- href="javascript:void(0);"
|
|
|
|
- @click="back_by_index(index + 1)"
|
|
|
|
- >
|
|
|
|
- <i class="el-icon-arrow-right"></i>
|
|
|
|
- <wwOpenDAta type="departmentName" :openid="item.name"></wwOpenDAta>
|
|
|
|
- </a>
|
|
|
|
|
|
+
|
|
|
|
+ <div class="dept_path scroll-bar flex-box flex-d-wrap" v-if="can_select_dept">
|
|
|
|
+ <template v-if="pid_list_arr.length > 0">
|
|
|
|
+ <div @click="back_by_index(0)" class="blue" style="cursor: pointer;">全公司</div>
|
|
|
|
+ <div v-for="(item, index) in pid_list_arr" :key="index" @click="back_by_index(index + 1, item)" class="font-flex-word" style="max-width: 120px;">
|
|
|
|
+ <i class="el-icon-arrow-right"></i>
|
|
|
|
+ <span class="blue" style="cursor: pointer;">
|
|
|
|
+ <WWOpenData type="departmentName" :openid="item.name"></WWOpenData>
|
|
|
|
+ <!-- {{ item.name }} -->
|
|
|
|
+ </span>
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ </div>
|
|
|
|
+ <!-- 人员 -->
|
|
|
|
+ <div class="flex-box-end" v-if="can_select_employee && isChecKedAll && multi" style="padding: 10px;border-bottom: 1px solid #f1f1f1;">
|
|
|
|
+ <el-checkbox v-model="checked" @change="checkedChange">全选</el-checkbox>
|
|
</div>
|
|
</div>
|
|
- <el-checkbox v-if="isChecKedAll" v-model="checked" @change="checkedChange" >全选</el-checkbox>
|
|
|
|
<el-scrollbar
|
|
<el-scrollbar
|
|
wrap-class="column-wrapper scrollable-items-container"
|
|
wrap-class="column-wrapper scrollable-items-container"
|
|
:native="false"
|
|
:native="false"
|
|
- :class="isChecKedAll?'scrollbarHeight1':'scrollbarHeight2'"
|
|
|
|
|
|
+ :class="(can_select_dept || isChecKedAll)? 'scrollbarHeight1' : 'scrollbarHeight2'"
|
|
|
|
+ v-loading="table_loading"
|
|
>
|
|
>
|
|
<div class="choose_left">
|
|
<div class="choose_left">
|
|
- <div v-if="hidden_department">
|
|
|
|
- </div>
|
|
|
|
- <a href="javascript:void(0)" v-for="(item,index) in dept_list" :key="index" v-else>
|
|
|
|
- <div class="employee_cell" @click.stop="select_dept(item)"
|
|
|
|
- v-show="item.pid == pid && item.name.indexOf(keyword) >= 0 && dept_not_select.indexOf(item.id) < 0">
|
|
|
|
-
|
|
|
|
- <div class="employee_checkbox" style="position: relative;">
|
|
|
|
- <el-checkbox v-if="can_select_dept" v-model="item.checked"></el-checkbox>
|
|
|
|
- <div style=" position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 5;"></div>
|
|
|
|
- </div>
|
|
|
|
- <div class="employee_name">
|
|
|
|
- <wwOpenDAta type="departmentName" :openid="item.name"></wwOpenDAta>
|
|
|
|
- </div>
|
|
|
|
-
|
|
|
|
- <div v-if="can_select_dept" class="dept_child_cell">
|
|
|
|
- <span href="javascript:void(0);" class="child_btn" @click.stop="show_child(item)">
|
|
|
|
- | 下级
|
|
|
|
- </span>
|
|
|
|
|
|
+ <template v-if="can_select_dept">
|
|
|
|
+ <div class="persons_box" style="padding-top:4px;" v-if="dept_list.length > 0">
|
|
|
|
+ <div v-for="(item, index) in dept_list" :key="index">
|
|
|
|
+ <div class="flex-box flex-v-ce deptList" @click="select_dept(item, index)" v-show="item.name.indexOf(keyword) >= 0">
|
|
|
|
+ <div :class="[item.checked? 'showCheckbox':'']" class="checkbox"><span class="isCheckbox"></span></div>
|
|
|
|
+ <div class="employee_name flex-1 font-flex-word">
|
|
|
|
+ <!-- {{ item.name }} -->
|
|
|
|
+ <WWOpenData type="departmentName" :openid="item.name"></WWOpenData>
|
|
|
|
+ </div>
|
|
|
|
+ <div v-if="item.children" class="blue" @click.stop="show_child(item)">| 下级</div>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
-
|
|
|
|
- <div class="employee_cell_clear"></div>
|
|
|
|
-
|
|
|
|
</div>
|
|
</div>
|
|
- </a>
|
|
|
|
-
|
|
|
|
- <div class="persons_box" style="padding-top:4px;">
|
|
|
|
- <a class="employee_cell_a" href="javascript:void(0)" v-for="(item,index) in list" :key="index">
|
|
|
|
- <div class="employee_cell" v-if="can_select_employee" @click="select_employee(item)"
|
|
|
|
- v-show="employee_not_select.indexOf(item.id) < 0">
|
|
|
|
-
|
|
|
|
- <div class="employee_checkbox" style="position: relative;">
|
|
|
|
- <!-- <el-checkbox v-model="item.checked"></el-checkbox> -->
|
|
|
|
- <el-checkbox v-model="item.checked" v-if="selectedQuitEmployee" :style="item.status > 1 || employee_not_select.indexOf(item.id) > 0?'opacity: 0':'opacity: 1'" ></el-checkbox>
|
|
|
|
- <el-checkbox v-model="item.checked" v-if="!selectedQuitEmployee" :style="item.status > 1 || employee_not_select.indexOf(item.id) > 0?'opacity: 0':'opacity: 1'" ></el-checkbox>
|
|
|
|
- <div style=" position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 5;"></div>
|
|
|
|
- </div>
|
|
|
|
- <div class="employee_img_url">
|
|
|
|
- <img :src="item.img_url" class="employee_cell_head_img"/>
|
|
|
|
|
|
+ </template>
|
|
|
|
+ <template v-if="can_select_employee">
|
|
|
|
+ <div class="persons_box" style="padding-top:4px;" v-if="list.length > 0">
|
|
|
|
+ <div class="employee_cell_a" v-for="(item, index) in list" :key="index" v-show="item.id">
|
|
|
|
+ <div class="employee_cell" @click.prevent.stop="select_employee(item)">
|
|
|
|
+ <div class="employee_checkbox"><el-checkbox v-model="item.checked"></el-checkbox></div>
|
|
|
|
+ <div class="employee_img_url"><img :src="item.img_url" class="employee_cell_head_img" /></div>
|
|
|
|
+ <div class="employee_name">
|
|
|
|
+ <WWOpenData type="userName" :openid="item.name"></WWOpenData>
|
|
|
|
+ <!-- {{ item.name }} -->
|
|
|
|
+ </div>
|
|
|
|
+ <div class="employee_cell_clear"></div>
|
|
</div>
|
|
</div>
|
|
- <div class="employee_name">
|
|
|
|
- <!-- {{item.name}} -->
|
|
|
|
- <wwOpenDAta type="userName" :openid="item.name"></wwOpenDAta>
|
|
|
|
- {{item.direct_Supervisor?'(直属上级)':''}}
|
|
|
|
- </div>
|
|
|
|
- <div class="employee_cell_clear"></div>
|
|
|
|
-
|
|
|
|
</div>
|
|
</div>
|
|
- </a>
|
|
|
|
- </div>
|
|
|
|
-
|
|
|
|
|
|
+ </div>
|
|
|
|
+ <div v-else class="fontColorF" style="text-align: center;margin-top: 50px;">暂无可选人员</div>
|
|
|
|
+ </template>
|
|
</div>
|
|
</div>
|
|
-
|
|
|
|
-
|
|
|
|
</el-scrollbar>
|
|
</el-scrollbar>
|
|
</el-col>
|
|
</el-col>
|
|
<el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2" class="col-line"><span style="opacity: 0;">空</span></el-col>
|
|
<el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2" class="col-line"><span style="opacity: 0;">空</span></el-col>
|
|
<el-col :xs="11" :sm="11" :md="11" :lg="11" :xl="11" class="scroller-box">
|
|
<el-col :xs="11" :sm="11" :md="11" :lg="11" :xl="11" class="scroller-box">
|
|
<div class="option-box">
|
|
<div class="option-box">
|
|
|
|
+ <span style="line-height: 40px; padding-left: 10px;" class="fl" v-if="multi && can_select_employee">已选择{{ employee_selected_list.length }}个员工</span>
|
|
<el-button type="type" @click="clear_data">清空</el-button>
|
|
<el-button type="type" @click="clear_data">清空</el-button>
|
|
</div>
|
|
</div>
|
|
- <el-scrollbar
|
|
|
|
- wrap-class="column-wrapper scrollable-items-container"
|
|
|
|
- :native="false"
|
|
|
|
- style="height: 354px;"
|
|
|
|
- >
|
|
|
|
|
|
+ <el-scrollbar wrap-class="column-wrapper scrollable-items-container" :native="false" style="height: 400px;">
|
|
<div class="choose_right">
|
|
<div class="choose_right">
|
|
- <div class="employee_cell" v-for="(item,index) in dept_selected_list" :key="index">
|
|
|
|
-
|
|
|
|
|
|
+ <div class="employee_cell" v-for="(item, index) in dept_selected_list" :key="index">
|
|
<div class="employee_name">
|
|
<div class="employee_name">
|
|
- <wwOpenDAta type="departmentName" :openid="item.dept_name"></wwOpenDAta>
|
|
|
|
- </div>
|
|
|
|
- <div class="employee_delete">
|
|
|
|
- <el-button type="default" size="mini" @click="dept_cancel(item)" icon="el-icon-close" circle></el-button>
|
|
|
|
|
|
+ <WWOpenData type="departmentName" :openid="item.dept_name"></WWOpenData>
|
|
|
|
+ <!-- {{ item.dept_name }} -->
|
|
</div>
|
|
</div>
|
|
|
|
+ <div class="employee_delete"><el-button type="default" size="mini" @click="dept_delete(item, index)" icon="el-icon-close" circle></el-button></div>
|
|
<div class="employee_cell_clear"></div>
|
|
<div class="employee_cell_clear"></div>
|
|
</div>
|
|
</div>
|
|
-
|
|
|
|
- <div class="employee_cell" v-for="(item,index) in employee_selected_list" :key="index">
|
|
|
|
- <div class="employee_img_url">
|
|
|
|
- <img :src="item.img_url" class="employee_cell_head_img"/>
|
|
|
|
- </div>
|
|
|
|
|
|
+ <div class="employee_cell" v-for="(item, index) in employee_selected_list" :key="index">
|
|
|
|
+ <div class="employee_img_url" v-if="item.img_url"><img :src="item.img_url" class="employee_cell_head_img" /></div>
|
|
|
|
+ <div class="employee_img_url" v-else><img src="static/images/head_default.png" class="employee_cell_head_img" /></div>
|
|
<div class="employee_name">
|
|
<div class="employee_name">
|
|
- <!-- {{item.name}} -->
|
|
|
|
- <wwOpenDAta type="userName" :openid="item.name"></wwOpenDAta>
|
|
|
|
- <span v-if="direct_Supervisor_you">{{item.id==directSupervisor?'(直属上级)':''}}</span>
|
|
|
|
- </div>
|
|
|
|
- <div class="employee_delete">
|
|
|
|
- <el-button type="default" size="mini" @click="employee_cancel(item)" icon="el-icon-close" circle></el-button>
|
|
|
|
|
|
+ <WWOpenData type="userName" :openid="item.name"></WWOpenData>
|
|
|
|
+ <!-- {{ item.name }} -->
|
|
</div>
|
|
</div>
|
|
|
|
+ <div class="employee_delete"><el-button type="default" size="mini" @click="employee_cancel(item, true)" icon="el-icon-close" circle></el-button></div>
|
|
<div class="employee_cell_clear"></div>
|
|
<div class="employee_cell_clear"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -128,898 +126,873 @@
|
|
</el-col>
|
|
</el-col>
|
|
</el-row>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
-
|
|
|
|
<span slot="footer" class="dialog-footer">
|
|
<span slot="footer" class="dialog-footer">
|
|
- <el-button @click="close">取 消</el-button>
|
|
|
|
- <el-button type="primary" @click="confirm">确 定</el-button>
|
|
|
|
- </span>
|
|
|
|
-
|
|
|
|
-
|
|
|
|
|
|
+ <el-button @click="close">取 消</el-button>
|
|
|
|
+ <el-button type="primary" @click="confirm">确 定</el-button>
|
|
|
|
+ </span>
|
|
</el-dialog>
|
|
</el-dialog>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
-
|
|
|
|
- export default {
|
|
|
|
- props:{
|
|
|
|
- title:{
|
|
|
|
- type: String,
|
|
|
|
- default: "选择部门和员工"
|
|
|
|
- },
|
|
|
|
- isChecKedAll: {
|
|
|
|
- type: Boolean,
|
|
|
|
- default: false
|
|
|
|
- },
|
|
|
|
- whether_to_remove_right: {
|
|
|
|
- type: Boolean,
|
|
|
|
- default: false
|
|
|
|
- },
|
|
|
|
- hidden_department: {
|
|
|
|
- type: Boolean,
|
|
|
|
- default: false
|
|
|
|
- },
|
|
|
|
- append_body: {
|
|
|
|
- type: Boolean,
|
|
|
|
- default: false
|
|
|
|
- },
|
|
|
|
- visible: {
|
|
|
|
- type: Boolean,
|
|
|
|
- default: false
|
|
|
|
- },
|
|
|
|
- can_select_dept: {
|
|
|
|
- type: Boolean,
|
|
|
|
- default: true
|
|
|
|
- },
|
|
|
|
- can_select_employee: {
|
|
|
|
- type: Boolean,
|
|
|
|
- default: true
|
|
|
|
- },
|
|
|
|
- employee_not_select: {
|
|
|
|
- type: Array,
|
|
|
|
- default: () => {
|
|
|
|
- return []
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- dept_not_select: {
|
|
|
|
- type: Array,
|
|
|
|
- default: () => {
|
|
|
|
- return []
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- selected: {
|
|
|
|
- type: Object,
|
|
|
|
- default: () => {
|
|
|
|
- return {employee: [], dept: []}
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- multi: {
|
|
|
|
- type: Boolean,
|
|
|
|
- default: true
|
|
|
|
- },
|
|
|
|
- dept_multi: {
|
|
|
|
- type: Boolean,
|
|
|
|
- default: true
|
|
|
|
- },
|
|
|
|
- employee_list: {
|
|
|
|
- type: Array,
|
|
|
|
- default: () => {
|
|
|
|
- return []
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- selectedQuitEmployee:{
|
|
|
|
- type: Boolean,
|
|
|
|
- default: true
|
|
|
|
- },
|
|
|
|
- close_clear_data: {
|
|
|
|
- type: Boolean,
|
|
|
|
- default: true
|
|
|
|
- },
|
|
|
|
- max: {
|
|
|
|
- type: Number,
|
|
|
|
- default: 0
|
|
|
|
- },
|
|
|
|
- use_employee_list: {
|
|
|
|
- type: Boolean,
|
|
|
|
- default: false
|
|
|
|
|
|
+export default {
|
|
|
|
+ props: {
|
|
|
|
+ title: {
|
|
|
|
+ // 标题
|
|
|
|
+ type: String,
|
|
|
|
+ default: '选择部门和员工'
|
|
|
|
+ },
|
|
|
|
+ deptId: {
|
|
|
|
+ //指定部门ID,人员列表就是该部门的
|
|
|
|
+ type: Number,
|
|
|
|
+ default: 0
|
|
|
|
+ },
|
|
|
|
+ visible: {
|
|
|
|
+ // 是否显示组件
|
|
|
|
+ type: Boolean,
|
|
|
|
+ default: false
|
|
|
|
+ },
|
|
|
|
+ can_select_dept: {
|
|
|
|
+ // 是否能选择部门(单选择部门,不能选择人员)
|
|
|
|
+ type: Boolean,
|
|
|
|
+ default: false
|
|
|
|
+ },
|
|
|
|
+ dept_not_select: {
|
|
|
|
+ // 排除部门ID
|
|
|
|
+ type: Array,
|
|
|
|
+ default: () => {
|
|
|
|
+ return [];
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ dept_multi: {
|
|
|
|
+ // 指定部门是否能多选
|
|
|
|
+ type: Boolean,
|
|
|
|
+ default: true
|
|
|
|
+ },
|
|
|
|
+ dept_children: {
|
|
|
|
+ //选择部门时是否包含子部门
|
|
|
|
+ type: Boolean,
|
|
|
|
+ default: true
|
|
|
|
+ },
|
|
|
|
+ can_select_employee: {
|
|
|
|
+ // 指定是否能选择员工
|
|
|
|
+ type: Boolean,
|
|
|
|
+ default: true
|
|
|
|
+ },
|
|
|
|
+ employee_not_select: {
|
|
|
|
+ // 排除员工的ID,包含ID时不出现在选择列表中
|
|
|
|
+ type: Array,
|
|
|
|
+ default: () => {
|
|
|
|
+ return [];
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ selected: {
|
|
|
|
+ // 已经选择的员工和部门
|
|
|
|
+ type: Object,
|
|
|
|
+ default: () => {
|
|
|
|
+ return { employee: [], dept: [] };
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ multi: {
|
|
|
|
+ // 指定员工是否能多选
|
|
|
|
+ type: Boolean,
|
|
|
|
+ default: true
|
|
|
|
+ },
|
|
|
|
+ user_employee_list: {
|
|
|
|
+ // 为true时,employee_list才生效
|
|
|
|
+ type: Boolean,
|
|
|
|
+ default: false
|
|
|
|
+ },
|
|
|
|
+ employee_list: {
|
|
|
|
+ // 指定显示的员工列表,注意:传值后组件的员工数据将不是统一向服务器获取的,而是指定的员工列表,格式是:[{id: 1, name: “张三”, img_url: “”}]
|
|
|
|
+ type: Array,
|
|
|
|
+ default: () => {
|
|
|
|
+ return [];
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ isChecKedAll: {
|
|
|
|
+ //是否全选
|
|
|
|
+ type: Boolean,
|
|
|
|
+ default: true
|
|
|
|
+ },
|
|
|
|
+ close_clear_data: {
|
|
|
|
+ //关闭时是否清除选择的数据
|
|
|
|
+ type: Boolean,
|
|
|
|
+ default: true
|
|
|
|
+ },
|
|
|
|
+ max: {
|
|
|
|
+ //选择的人数限制
|
|
|
|
+ type: Number,
|
|
|
|
+ default: 0
|
|
|
|
+ },
|
|
|
|
+ is_filtration_creator: {
|
|
|
|
+ //是否去除创始人
|
|
|
|
+ type: Boolean,
|
|
|
|
+ default: true
|
|
|
|
+ },
|
|
|
|
+ is_manager_only: {
|
|
|
|
+ //是否只显示管理者
|
|
|
|
+ type: Boolean,
|
|
|
|
+ default: false
|
|
|
|
+ },
|
|
|
|
+ include_self: {
|
|
|
|
+ //是否显示自己
|
|
|
|
+ type: Boolean,
|
|
|
|
+ default: true
|
|
|
|
+ },
|
|
|
|
+ child:{
|
|
|
|
+ //当人员列表点击部门筛选时不显示子部门人员 ,目前只在设置主管有使用到
|
|
|
|
+ type: Boolean,
|
|
|
|
+ default: true
|
|
|
|
+ },
|
|
|
|
+ isRequired:{
|
|
|
|
+ //是否必须选择人员或者部门
|
|
|
|
+ type: Boolean,
|
|
|
|
+ default: false
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ name: 'EmployeeSelector',
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ // 基础配置
|
|
|
|
+ table_loading: false,
|
|
|
|
+ searchBox: [], //用于搜索的全部人员
|
|
|
|
+ keyword: '',
|
|
|
|
+ checked: false,
|
|
|
|
+ visible_: false,
|
|
|
|
+ // 选择人员相关
|
|
|
|
+ employee_selected_list: [],
|
|
|
|
+ employee_selected: [],
|
|
|
|
+ list: [],
|
|
|
|
+ // 选择部门相关
|
|
|
|
+ dept_selected_list: [],
|
|
|
|
+ dept_name: '',
|
|
|
|
+ dept_id: [],
|
|
|
|
+ dept_select_id: 0,
|
|
|
|
+ dept_list: [],
|
|
|
|
+ dept_list_all: [], //备用全部部门
|
|
|
|
+ pid_list_arr: [],
|
|
|
|
+ toPdept1:0,//选择部门的遮到
|
|
|
|
+ };
|
|
|
|
+ },
|
|
|
|
+ watch: {
|
|
|
|
+ // 当动态改变“employee_list”时,获取employee_list与employee_selected_list的交集,用于考勤组功能
|
|
|
|
+ employee_list(val) {
|
|
|
|
+ var eSList = this.employee_selected_list;
|
|
|
|
+ this.employee_selected_list = [...eSList].filter(x => [...val].some(y => y.id === x.id));
|
|
|
|
+ },
|
|
|
|
+ visible(val) {
|
|
|
|
+ this.visible_ = JSON.parse(JSON.stringify(val));
|
|
|
|
+ if (val) {
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ this.get_user_list();
|
|
|
|
+ this.get_dept_list();
|
|
|
|
+ }, 200);
|
|
}
|
|
}
|
|
},
|
|
},
|
|
- name: "EmployeeSelector",
|
|
|
|
- data() {
|
|
|
|
- let selected = JSON.parse(JSON.stringify(this.selected))
|
|
|
|
- return {
|
|
|
|
- selectApersonModuleLoad:false,
|
|
|
|
- searchBox:[],
|
|
|
|
- direct_Supervisor_you:false,
|
|
|
|
- directSupervisor:0,
|
|
|
|
- dialogVisible: true,
|
|
|
|
- employee_selected_list: selected.employee,
|
|
|
|
- dept_selected_list: selected.dept,
|
|
|
|
- employee_selected: [],
|
|
|
|
- dept_selected: [],
|
|
|
|
- com_height: '100%',
|
|
|
|
- company_info: {},
|
|
|
|
- actions_show: false,
|
|
|
|
- dept_name: '',
|
|
|
|
- dept_id: 0,
|
|
|
|
- list: [],
|
|
|
|
- dept_list: [],
|
|
|
|
- keyword: '',
|
|
|
|
- owner_id: 0,
|
|
|
|
- user_info: this.$store.getters.user_info,
|
|
|
|
- pid: 0,
|
|
|
|
- pid_list: [],
|
|
|
|
- selected_box_width: '0',
|
|
|
|
- pid_list_arr: [],
|
|
|
|
- visible_: false,
|
|
|
|
- checked: false//全选按钮
|
|
|
|
|
|
+ // dept_id(val) {
|
|
|
|
+ // this.dept_select_id = val[val.length - 1];
|
|
|
|
+ // this.$nextTick(() => {
|
|
|
|
+ // if (this.can_select_employee) {
|
|
|
|
+ // this.$refs.dept.dropDownVisible = false;
|
|
|
|
+ // }
|
|
|
|
+ // this.get_user_list();
|
|
|
|
+ // this.checked = false;
|
|
|
|
+ // });
|
|
|
|
+ // },
|
|
|
|
+ keyword(val) {
|
|
|
|
+ this.list = this.searchBox.filter(item => item.name.includes(this.keyword));
|
|
|
|
+ if (!val) {
|
|
|
|
+ this.checked = false;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ dept1_null(val){
|
|
|
|
+ this.toPdept1 = val[val.length-1]
|
|
|
|
+ let valItem = 0
|
|
|
|
+ for(let i in val){
|
|
|
|
+ valItem = val[i]
|
|
}
|
|
}
|
|
|
|
+ this.get_user_list(valItem);
|
|
|
|
+ this.checked = false;
|
|
|
|
+ this.$nextTick(()=>{
|
|
|
|
+ this.$refs.dept1.dropDownVisible = false;
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ //打开Dialog的回调,用刷每次打开都初始化selected
|
|
|
|
+ openDialog() {
|
|
|
|
+ if (this.deptId != 0) {
|
|
|
|
+ this.dept_id = [this.deptId];
|
|
|
|
+ this.dept_select_id = this.deptId;
|
|
|
|
+ }
|
|
|
|
+ let selected = this.selected;
|
|
|
|
+ this.employee_selected = [];
|
|
|
|
+ this.employee_selected_list = JSON.parse(JSON.stringify(selected.employee));
|
|
|
|
+ this.dept_selected_list =JSON.parse(JSON.stringify(selected.dept));
|
|
|
|
+ for (let i in selected.employee) {
|
|
|
|
+ this.employee_selected.push(selected.employee[i].id);
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ close_before(done) {
|
|
|
|
+ this.close();
|
|
|
|
+ done();
|
|
},
|
|
},
|
|
- watch: {
|
|
|
|
- max(val) {
|
|
|
|
- this.set_button_width()
|
|
|
|
- },
|
|
|
|
- selected:{
|
|
|
|
- deep:true,
|
|
|
|
- handler(val){
|
|
|
|
- let selected = JSON.parse(JSON.stringify(val))
|
|
|
|
- this.employee_selected = []
|
|
|
|
- this.dept_selected = []
|
|
|
|
- this.employee_selected_list = selected.employee
|
|
|
|
- this.dept_selected_list = selected.dept
|
|
|
|
- for (let i in selected.employee) {
|
|
|
|
- if (!selected.employee[i].img_url) {
|
|
|
|
- this.$set(this.selected.employee[i], 'img_url', 'static/images/head_default.png')
|
|
|
|
|
|
+ // 全选(只用选择人员)
|
|
|
|
+ checkedChange(val) {
|
|
|
|
+ if (val) {
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
+ let employeeSelectedList = JSON.parse(JSON.stringify(this.employee_selected_list)); //获取选择的人员
|
|
|
|
+ let employeeSelectedIds = [],
|
|
|
|
+ total = 0;
|
|
|
|
+ employeeSelectedList.forEach(element => {
|
|
|
|
+ employeeSelectedIds.push(element.id);
|
|
|
|
+ });
|
|
|
|
+ for (let i in this.list) {
|
|
|
|
+ this.$set(this.list[i], 'checked', true);
|
|
|
|
+ if (!employeeSelectedIds.includes(this.list[i].id)) {
|
|
|
|
+ //去除已经选择的人员
|
|
|
|
+ this.employee_selected_list.push(this.list[i]);
|
|
}
|
|
}
|
|
- this.employee_selected.push(selected.employee[i].id)
|
|
|
|
- }
|
|
|
|
- for(let i in selected.dept){
|
|
|
|
- this.dept_selected.push(selected.dept[i].dept_id)
|
|
|
|
}
|
|
}
|
|
- this.set_button_width()
|
|
|
|
|
|
+ });
|
|
|
|
+ } else {
|
|
|
|
+ this.employee_selected_list = [];
|
|
|
|
+ this.employee_selected = [];
|
|
|
|
+ for (let i in this.list) {
|
|
|
|
+ this.$set(this.list[i], 'checked', false);
|
|
}
|
|
}
|
|
- },
|
|
|
|
- // selected(val) {
|
|
|
|
- // let selected = JSON.parse(JSON.stringify(val))
|
|
|
|
- // this.employee_selected = []
|
|
|
|
- // this.dept_selected = []
|
|
|
|
- // this.employee_selected_list = selected.employee
|
|
|
|
- // this.dept_selected_list = selected.dept
|
|
|
|
- // for (let i in selected.employee) {
|
|
|
|
- // this.employee_selected.push(selected.employee[i].id)
|
|
|
|
- // }
|
|
|
|
- // for(let i in selected.dept){
|
|
|
|
- // this.dept_selected.push(selected.dept[i].dept_id)
|
|
|
|
- // }
|
|
|
|
- // this.set_button_width()
|
|
|
|
- // },
|
|
|
|
- visible(val){
|
|
|
|
- this.visible_ = JSON.parse(JSON.stringify(val))
|
|
|
|
- if(val){
|
|
|
|
- this.selectApersonModuleLoad = true
|
|
|
|
- setTimeout(() => {
|
|
|
|
- if (this.$route.query.pid) {
|
|
|
|
- this.pid = this.$route.query.pid
|
|
|
|
- }
|
|
|
|
- this.get_user_list(function () {
|
|
|
|
-
|
|
|
|
- })
|
|
|
|
- this.get_dept_list()
|
|
|
|
- }, 200)
|
|
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ // 点击部门导航
|
|
|
|
+ back_by_index(index, item) {
|
|
|
|
+ this.pid_list_arr.splice(index, 100);
|
|
|
|
+ if (index == 0) {
|
|
|
|
+ this.dept_list = this.dept_list_all;
|
|
|
|
+ return false;
|
|
|
|
+ }
|
|
|
|
+ if (item.children) {
|
|
|
|
+ this.dept_list = item.children;
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ //下一级
|
|
|
|
+ show_child(item) {
|
|
|
|
+ if (item.children) {
|
|
|
|
+ this.dept_list = item.children;
|
|
|
|
+ }
|
|
|
|
+ this.pid_list_arr.push(item);
|
|
|
|
+ },
|
|
|
|
+ //获取一个部门的下的所有子部门
|
|
|
|
+ getChildrens(list) {
|
|
|
|
+ var dept_list = [];
|
|
|
|
+ list.forEach(item => {
|
|
|
|
+ item.checked = true;
|
|
|
|
+ dept_list.push({ dept_id: item.id, dept_name: item.name, avatar: 'static/images/e66f.jpg' });
|
|
|
|
+ if (item.children) {
|
|
|
|
+ dept_list.push(...this.getChildrens(item.children));
|
|
}
|
|
}
|
|
- this.set_button_width()
|
|
|
|
- },
|
|
|
|
- employee_selected_list() {
|
|
|
|
- let l = this.employee_selected_list.length + this.dept_selected_list.length
|
|
|
|
- let width = 0.9 * l;
|
|
|
|
- this.selected_box_width = width + 'rem'
|
|
|
|
- this.set_button_width()
|
|
|
|
-
|
|
|
|
- this.checkAll_Optimize()//全选细节优化,选中发生变化时执行
|
|
|
|
- },
|
|
|
|
- dept_selected_list() {
|
|
|
|
- let l = this.employee_selected_list.length + this.dept_selected_list.length
|
|
|
|
- let width = 0.9 * l;
|
|
|
|
- this.selected_box_width = width + 'rem'
|
|
|
|
- this.set_button_width()
|
|
|
|
- },
|
|
|
|
- keyword(val) {
|
|
|
|
- this.list = this.searchBox.filter(item=> item.name.includes(this.keyword))
|
|
|
|
- // this.get_user_list(function () {
|
|
|
|
-
|
|
|
|
- // })
|
|
|
|
- },
|
|
|
|
-
|
|
|
|
- list(){
|
|
|
|
- this.checkAll_Optimize()//全选细节优化,人员列表发生变化时执行
|
|
|
|
- },
|
|
|
|
|
|
+ });
|
|
|
|
+ return dept_list;
|
|
},
|
|
},
|
|
- methods: {
|
|
|
|
- //全选细节优化
|
|
|
|
- checkAll_Optimize(){
|
|
|
|
- let checkedTrue = true
|
|
|
|
- for(let i in this.list){
|
|
|
|
- if(this.list[i].status!=2 && this.list[i].status!=3){//排除人员列表中的离职和拒绝加入人员
|
|
|
|
- if(this.list[i].checked == false){
|
|
|
|
- checkedTrue = false
|
|
|
|
- }
|
|
|
|
|
|
+ //选择部门
|
|
|
|
+ select_dept(item, index) {
|
|
|
|
+ if (item.checked) {
|
|
|
|
+ this.dept_cancel(item);
|
|
|
|
+ } else {
|
|
|
|
+ if (!this.dept_multi) {
|
|
|
|
+ //是否能多选
|
|
|
|
+ this.dept_selected_list = [];
|
|
|
|
+ for (let i in this.dept_list_all) {
|
|
|
|
+ this.dept_cancel(this.dept_list_all[i], true);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- if(checkedTrue){
|
|
|
|
- if(this.list.length != 0){
|
|
|
|
- this.checked = true
|
|
|
|
- }else{
|
|
|
|
- this.checked = false
|
|
|
|
- }
|
|
|
|
- }else{
|
|
|
|
- this.checked = false
|
|
|
|
|
|
+ item.checked = true;
|
|
|
|
+ if (item.children && this.dept_children) {
|
|
|
|
+ //是否存在子部门
|
|
|
|
+ this.dept_selected_list.push({ dept_id: item.id, dept_name: item.name, avatar: 'static/images/e66f.jpg' });
|
|
|
|
+ var arr = this.getChildrens(item.children);
|
|
|
|
+ this.dept_selected_list.push(...arr);
|
|
|
|
+ } else {
|
|
|
|
+ this.dept_selected_list.push({ dept_id: item.id, dept_name: item.name, avatar: 'static/images/e66f.jpg' });
|
|
}
|
|
}
|
|
- },
|
|
|
|
- //关闭弹窗清除数据
|
|
|
|
- closeDialog(){
|
|
|
|
- this.direct_Supervisor_you = false
|
|
|
|
- },
|
|
|
|
- // 全选
|
|
|
|
- checkedChange(val){
|
|
|
|
- if (val) {
|
|
|
|
- for (let i in this.list) {
|
|
|
|
- if (this.employee_not_select.indexOf(this.list[i].id) < 0) {
|
|
|
|
- this.$set(this.list[i], 'checked', true)
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- this.$nextTick(() => {
|
|
|
|
- let employeeSelectedList = JSON.parse(JSON.stringify(this.employee_selected_list))
|
|
|
|
- let employeeSelectedIds = [], total = 0
|
|
|
|
- employeeSelectedList.forEach(element => {
|
|
|
|
- employeeSelectedIds.push(element.id)
|
|
|
|
- });
|
|
|
|
- for (const i in this.list) {
|
|
|
|
- this.list[i].status !== 2 && this.list[i].status !== 3 && this.selectedQuitEmployee?this.$set(this.list[i], 'checked', true):''
|
|
|
|
- if (employeeSelectedIds.includes(this.list[i].id)) {
|
|
|
|
- total += 1
|
|
|
|
- }else{
|
|
|
|
- this.list[i].status !== 2 && this.list[i].status !== 3 && this.selectedQuitEmployee?this.employee_selected_list.push(this.list[i]):''
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- // debugger
|
|
|
|
- })
|
|
|
|
- }else{
|
|
|
|
- for(let i in this.employee_selected_list){
|
|
|
|
- for(let a in this.list){
|
|
|
|
- if(this.list[a].status!=2 && this.list[a].status!=3){//排除人员列表中的离职和拒绝加入人员
|
|
|
|
- if(this.employee_selected_list[i].id == this.list[a].id){
|
|
|
|
- this.employee_selected_list.splice(i,1)
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- // this.employee_selected_list = []
|
|
|
|
- // this.employee_selected = []
|
|
|
|
- for (let i in this.list) {
|
|
|
|
- this.$set(this.list[i], 'checked', false)
|
|
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ //清除选择的部门
|
|
|
|
+ dept_cancel(item, is) {
|
|
|
|
+ item.checked = false;
|
|
|
|
+ if (item.children) {
|
|
|
|
+ //左边
|
|
|
|
+ item.children.forEach(childrens => {
|
|
|
|
+ this.dept_cancel(childrens);
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ if (is) {
|
|
|
|
+ return false;
|
|
|
|
+ }
|
|
|
|
+ var deptSelectedList = this.dept_selected_list;
|
|
|
|
+ deptSelectedList.forEach((dept, index) => {
|
|
|
|
+ //右边
|
|
|
|
+ if (dept.dept_id == item.id) {
|
|
|
|
+ deptSelectedList.splice(index, 1);
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ //删除部门
|
|
|
|
+ dept_delete(item) {
|
|
|
|
+ var dept_list = this.dept_list;
|
|
|
|
+ var obj = this.getDeptz(item.dept_id, dept_list); //递归找到所属部门
|
|
|
|
+ this.dept_cancel(obj);
|
|
|
|
+ },
|
|
|
|
+ // 递归获取指定ID部门
|
|
|
|
+ getDeptz(id, arr) {
|
|
|
|
+ var obj = {};
|
|
|
|
+ for (let i = 0; i < arr.length; i++) {
|
|
|
|
+ if (id == arr[i].id) {
|
|
|
|
+ obj = arr[i];
|
|
|
|
+ break;
|
|
|
|
+ } else if (arr[i].children) {
|
|
|
|
+ if (this.getDeptz(id, arr[i].children).id) {
|
|
|
|
+ obj = this.getDeptz(id, arr[i].children);
|
|
}
|
|
}
|
|
- // this.clear_data()
|
|
|
|
}
|
|
}
|
|
- },
|
|
|
|
-
|
|
|
|
- close_before(done) {
|
|
|
|
- this.close()
|
|
|
|
- },
|
|
|
|
- set_button_width() {
|
|
|
|
-
|
|
|
|
- },
|
|
|
|
- back() {
|
|
|
|
- this.pid = this.pid_list[this.pid_list.length - 1]
|
|
|
|
- this.pid_list.splice(this.pid_list.length - 1)
|
|
|
|
- this.pid_list_arr.splice(this.pid_list_arr.length - 1)
|
|
|
|
- this.get_user_list(function () {
|
|
|
|
-
|
|
|
|
- })
|
|
|
|
- },
|
|
|
|
- back_by_index(index) {
|
|
|
|
|
|
+ }
|
|
|
|
+ return obj;
|
|
|
|
+ },
|
|
|
|
|
|
- if (index == this.pid_list.length) {
|
|
|
|
- return false
|
|
|
|
|
|
+ //清除选择的人员
|
|
|
|
+ employee_cancel(item) {
|
|
|
|
+ this.checked = false;
|
|
|
|
+ this.employee_selected.splice(this.employee_selected.indexOf(item.id), 1);
|
|
|
|
+ let delete_index = -1;
|
|
|
|
+ for (let i in this.employee_selected_list) {
|
|
|
|
+ if (this.employee_selected.indexOf(this.employee_selected_list[i].id) < 0) {
|
|
|
|
+ delete_index = i;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ if (delete_index >= 0) {
|
|
|
|
+ for (let i in this.list) {
|
|
|
|
+ if (this.list[i].id == item.id) {
|
|
|
|
+ this.$set(this.list[i], 'checked', false);
|
|
|
|
+ }
|
|
}
|
|
}
|
|
- this.pid = this.pid_list[index]
|
|
|
|
- this.pid_list.splice(index, 100)
|
|
|
|
- this.pid_list_arr.splice(index, 100)
|
|
|
|
- this.get_user_list(function () {
|
|
|
|
-
|
|
|
|
- })
|
|
|
|
- },
|
|
|
|
- show_child(item) {
|
|
|
|
- this.pid_list.push(this.pid)
|
|
|
|
- this.pid_list_arr.push(item)
|
|
|
|
- this.pid = item.id
|
|
|
|
- this.get_user_list(function () {
|
|
|
|
-
|
|
|
|
- })
|
|
|
|
- },
|
|
|
|
- employee_cancel(item) {
|
|
|
|
-
|
|
|
|
- this.employee_selected.splice(this.employee_selected.indexOf(item.id), 1)
|
|
|
|
- let delete_index = -1
|
|
|
|
for (let i in this.employee_selected_list) {
|
|
for (let i in this.employee_selected_list) {
|
|
- if (this.employee_selected.indexOf(this.employee_selected_list[i].id) < 0) {
|
|
|
|
- delete_index = i
|
|
|
|
|
|
+ if (this.employee_selected_list[i].id == item.id) {
|
|
|
|
+ this.employee_selected_list.splice(i, 1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- if (delete_index >= 0) {
|
|
|
|
- // this.employee_selected_list.splice(delete_index, 1)
|
|
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ //选择人员
|
|
|
|
+ select_employee(item) {
|
|
|
|
+ if (item.checked) {
|
|
|
|
+ item.checked = false;
|
|
|
|
+ this.employee_cancel(item);
|
|
|
|
+ } else {
|
|
|
|
+ if (!this.multi) {
|
|
|
|
+ this.employee_selected = [];
|
|
|
|
+ this.employee_selected_list = [];
|
|
for (let i in this.list) {
|
|
for (let i in this.list) {
|
|
- if (this.list[i].id == item.id) {
|
|
|
|
- this.$set(this.list[i], 'checked', false)
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- for(let i in this.employee_selected_list){
|
|
|
|
- if(this.employee_selected_list[i].id == item.id){
|
|
|
|
- this.employee_selected_list.splice(i, 1)
|
|
|
|
- }
|
|
|
|
|
|
+ this.$set(this.list[i], 'checked', false);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- },
|
|
|
|
- dept_cancel(item) {
|
|
|
|
- this.dept_selected.splice(this.dept_selected.indexOf(item.dept_id), 1)
|
|
|
|
- let delete_index = -1
|
|
|
|
- for (let i in this.dept_selected_list) {
|
|
|
|
- // if (this.dept_selected.indexOf(this.dept_selected_list[i].dept_id) < 0) {
|
|
|
|
- // delete_index = i
|
|
|
|
- // }
|
|
|
|
- if(this.dept_selected_list[i].dept_id == item.id){
|
|
|
|
- delete_index = i
|
|
|
|
- }
|
|
|
|
- if(this.dept_selected_list[i].dept_id == item.dept_id){
|
|
|
|
- delete_index = i
|
|
|
|
- }
|
|
|
|
|
|
+ if (this.max > 0 && this.employee_selected.length == this.max && this.multi) {
|
|
|
|
+ this.$message.error('最多只能选择' + this.max + '人');
|
|
|
|
+ return false;
|
|
}
|
|
}
|
|
- if (delete_index >= 0) {
|
|
|
|
- this.dept_selected_list.splice(delete_index, 1)
|
|
|
|
- for(let i in this.dept_list){
|
|
|
|
- if(this.dept_list[i].id == item.dept_id){
|
|
|
|
- this.$set(this.dept_list[i], 'checked', false)
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
|
|
+ this.employee_selected.push(item.id);
|
|
|
|
+ this.employee_selected_list.push({ id: item.id, name: item.name, img_url: item.img_url });
|
|
|
|
+ item.checked = true;
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ //清空
|
|
|
|
+ clear_data() {
|
|
|
|
+ this.checked = false;
|
|
|
|
+ this.employee_selected = [];
|
|
|
|
+ this.employee_selected_list = [];
|
|
|
|
+ this.dept_selected_list = [];
|
|
|
|
+ for (let i in this.list) {
|
|
|
|
+ this.$set(this.list[i], 'checked', false);
|
|
|
|
+ }
|
|
|
|
+ for (let i in this.dept_list) {
|
|
|
|
+ this.$set(this.dept_list[i], 'checked', false);
|
|
|
|
+ }
|
|
|
|
+ for (let i in this.dept_list_all) {
|
|
|
|
+ this.$set(this.dept_list_all[i], 'checked', false);
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ //关闭||清空数据
|
|
|
|
+ close() {
|
|
|
|
+ this.$emit('update:visible', false);
|
|
|
|
+ if (this.close_clear_data) {
|
|
|
|
+ this.checked = false;
|
|
|
|
+ this.keyword='';
|
|
|
|
+ this.employee_selected = [];
|
|
|
|
+ this.employee_selected_list = [];
|
|
|
|
+ this.dept_selected_list = [];
|
|
|
|
+ this.pid_list_arr=[];
|
|
|
|
+ for (let i in this.list) {
|
|
|
|
+ this.$set(this.list[i], 'checked', false);
|
|
}
|
|
}
|
|
- },
|
|
|
|
- select_employee(item){
|
|
|
|
- if (this.selectedQuitEmployee) {
|
|
|
|
- if (this.employee_not_select.indexOf(item.id) >= 0 || item.status > 1) {
|
|
|
|
- return false
|
|
|
|
- }
|
|
|
|
- }else{
|
|
|
|
- if (this.employee_not_select.indexOf(item.id) >= 0) {
|
|
|
|
- return false
|
|
|
|
- }
|
|
|
|
|
|
+ for (let i in this.dept_list) {
|
|
|
|
+ this.$set(this.dept_list[i], 'checked', false);
|
|
}
|
|
}
|
|
-
|
|
|
|
- if(item.checked){
|
|
|
|
- item.checked = false
|
|
|
|
- this.employee_cancel(item)
|
|
|
|
- } else {
|
|
|
|
- if (!this.multi) {
|
|
|
|
- this.employee_selected = []
|
|
|
|
- this.employee_selected_list = []
|
|
|
|
- for (let i in this.list) {
|
|
|
|
- this.$set(this.list[i], 'checked', false)
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- if (this.max > 0 && this.employee_selected.length == this.max && this.multi) {
|
|
|
|
- this.$toast('最多只能选择' + this.max + '人')
|
|
|
|
- return false
|
|
|
|
- }
|
|
|
|
- this.employee_selected.push(item.id)
|
|
|
|
- this.employee_selected_list.push({id: item.id, name: item.name, img_url: item.img_url,direct_Supervisor:item.direct_Supervisor})
|
|
|
|
- item.checked = true
|
|
|
|
|
|
+ for (let i in this.dept_list_all) {
|
|
|
|
+ this.$set(this.dept_list_all[i], 'checked', false);
|
|
}
|
|
}
|
|
-
|
|
|
|
- WWOpenData.bind(this.$el)
|
|
|
|
- },
|
|
|
|
- unique(arr){
|
|
|
|
- return Array.from(new Set(arr))
|
|
|
|
- },
|
|
|
|
- select_dept(item) {
|
|
|
|
- if (!this.can_select_dept) {
|
|
|
|
- this.show_child(item)
|
|
|
|
- return false
|
|
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ // 确定
|
|
|
|
+ confirm() {
|
|
|
|
+ if(this.isRequired){
|
|
|
|
+ if(this.employee_selected_list.length==0){
|
|
|
|
+ this.$message.error("请选择人员");
|
|
|
|
+ return false
|
|
}
|
|
}
|
|
- if (item.checked) {
|
|
|
|
- item.checked = false
|
|
|
|
- this.dept_cancel(item)
|
|
|
|
|
|
+ }
|
|
|
|
+ this.$emit('confirm', {
|
|
|
|
+ employee: this.employee_selected_list,
|
|
|
|
+ dept: this.dept_selected_list
|
|
|
|
+ });
|
|
|
|
+ this.close();
|
|
|
|
+ },
|
|
|
|
+ // 获取部门
|
|
|
|
+ get_dept_list() {
|
|
|
|
+ this.$http('get', '/api/department/tree', '').then(res => {
|
|
|
|
+ var list = res.data.data.list;
|
|
|
|
+ var dept_list = [];
|
|
|
|
+ // 排除部门
|
|
|
|
+ if (this.dept_not_select.length > 0) {
|
|
|
|
+ dept_list = list.filter(item => {
|
|
|
|
+ return this.dept_not_select.indexOf(item.id) == -1;
|
|
|
|
+ });
|
|
} else {
|
|
} else {
|
|
- if (!this.dept_multi) {
|
|
|
|
- this.dept_selected = []
|
|
|
|
- this.dept_selected_list = []
|
|
|
|
- for (let i in this.dept_list) {
|
|
|
|
- this.$set(this.dept_list[i], 'checked', false)
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- let dept_sele = this.dept_selected
|
|
|
|
- dept_sele.push(item.id)
|
|
|
|
- this.dept_selected =this.unique(dept_sele)
|
|
|
|
- // this.dept_selected.push(item.id)
|
|
|
|
- // let dept_sele = new Set(this.dept_selected)
|
|
|
|
- // this.dept_selected = this.unique(this.dept_selected)
|
|
|
|
- this.dept_selected_list.push({dept_id: item.id, dept_name: item.name, avatar: 'static/images/e66f.jpg'})
|
|
|
|
- let newobj = {};
|
|
|
|
- this.dept_selected_list = this.dept_selected_list .reduce((preVal, curVal) => {
|
|
|
|
- newobj[curVal.dept_id] ? '' : newobj[curVal.dept_id] = preVal.push(curVal);
|
|
|
|
- return preVal
|
|
|
|
- }, [])
|
|
|
|
- item.checked = true
|
|
|
|
|
|
+ dept_list = list;
|
|
}
|
|
}
|
|
-
|
|
|
|
- },
|
|
|
|
- clear_data(){
|
|
|
|
- this.employee_selected = []
|
|
|
|
- this.employee_selected_list = []
|
|
|
|
- this.dept_selected = []
|
|
|
|
- this.dept_selected_list = []
|
|
|
|
- for (let i in this.list) {
|
|
|
|
- this.$set(this.list[i], 'checked', false)
|
|
|
|
|
|
+ dept_list = this.getTreeData(dept_list); //过滤children
|
|
|
|
+ //默认选中部门
|
|
|
|
+ if (this.dept_selected_list.length > 0) {
|
|
|
|
+ this.dept_selected_list.forEach(item => {
|
|
|
|
+ this.setDeptChecked(item.dept_id, dept_list);
|
|
|
|
+ });
|
|
}
|
|
}
|
|
- for (let i in this.dept_list) {
|
|
|
|
- this.$set(this.dept_list[i], 'checked', false)
|
|
|
|
|
|
+ this.dept_list = dept_list;
|
|
|
|
+ this.dept_list_all = this.dept_list;
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ //设置默认部门
|
|
|
|
+ setDeptChecked(id, arr) {
|
|
|
|
+ for (let i = 0; i < arr.length; i++) {
|
|
|
|
+ if (id == arr[i].id) {
|
|
|
|
+ arr[i].checked = true;
|
|
|
|
+ break;
|
|
|
|
+ } else if (arr[i].children) {
|
|
|
|
+ this.setDeptChecked(id, arr[i].children);
|
|
}
|
|
}
|
|
- },
|
|
|
|
- close() {
|
|
|
|
- //this.visible = false
|
|
|
|
- this.$emit('update:visible', false)
|
|
|
|
- this.$emit('cancel')
|
|
|
|
- if (this.close_clear_data) {
|
|
|
|
- // this.employee_selected = []
|
|
|
|
- // this.employee_selected_list = []
|
|
|
|
- this.dept_selected = []
|
|
|
|
- this.dept_selected_list = []
|
|
|
|
- for (let i in this.list) {
|
|
|
|
- this.$set(this.list[i], 'checked', false)
|
|
|
|
- }
|
|
|
|
- for (let i in this.dept_list) {
|
|
|
|
- this.$set(this.dept_list[i], 'checked', false)
|
|
|
|
- }
|
|
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ getTreeData(data) {
|
|
|
|
+ for (var i = 0; i < data.length; i++) {
|
|
|
|
+ data[i].checked = false;
|
|
|
|
+ if (data[i].children.length < 1) {
|
|
|
|
+ // children若为空数组,则将children设为undefined
|
|
|
|
+ data[i].children = undefined;
|
|
|
|
+ } else {
|
|
|
|
+ // children若不为空数组,则继续 递归调用 本方法
|
|
|
|
+ this.getTreeData(data[i].children);
|
|
}
|
|
}
|
|
|
|
+ }
|
|
|
|
+ return data;
|
|
|
|
+ },
|
|
|
|
|
|
- },
|
|
|
|
- confirm() {
|
|
|
|
- this.$emit('confirm', {
|
|
|
|
- employee: this.employee_selected_list,
|
|
|
|
- dept: this.dept_selected_list
|
|
|
|
- })
|
|
|
|
- this.close()
|
|
|
|
- },
|
|
|
|
- get_dept_list(){
|
|
|
|
- if(this.employee_list.length > 0){
|
|
|
|
- return
|
|
|
|
- }
|
|
|
|
- this.$http('get','/api/department/index',{pid: this.pid, keyword:this.keyword}).then((res) => {
|
|
|
|
- for(let i in res.data.data.list){
|
|
|
|
- res.data.data.list[i]['checked'] = false
|
|
|
|
- if (this.dept_selected.indexOf(res.data.data.list[i].id) >= 0) {
|
|
|
|
- res.data.data.list[i]['checked'] = true
|
|
|
|
- }
|
|
|
|
|
|
+ // 默认选择中的人勾上
|
|
|
|
+ parse_list(data) {
|
|
|
|
+ let _list = [];
|
|
|
|
+ data.map(item => {
|
|
|
|
+ item['checked'] = false;
|
|
|
|
+ for (var i in this.employee_selected_list) {
|
|
|
|
+ //判断传进来的员工是否是员工集合里的,是就设为已点击状态
|
|
|
|
+ if (this.employee_selected_list[i].id == item.id) {
|
|
|
|
+ item['checked'] = true;
|
|
}
|
|
}
|
|
- this.dept_list = res.data.data.list
|
|
|
|
- this.owner_id = res.data.data.owner_id
|
|
|
|
- this.company_info = res.data.data.company_info
|
|
|
|
- if (res.data.data.dept_info == null) {
|
|
|
|
- this.dept_name = JSON.parse(JSON.stringify(res.data.data.company_info.name))
|
|
|
|
- this.dept_id = 0
|
|
|
|
|
|
+ }
|
|
|
|
+ if (item.img_url == '') {
|
|
|
|
+ item.img_url = 'static/images/head_default.png';
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ this.searchBox = data;
|
|
|
|
+ this.list = data;
|
|
|
|
+ },
|
|
|
|
+ //获取人员
|
|
|
|
+ get_user_list(valItem) {
|
|
|
|
+ this.table_loading = true;
|
|
|
|
+ let params = {
|
|
|
|
+ keywords: this.keyword,
|
|
|
|
+ page: 0,
|
|
|
|
+ page_size: 2000,
|
|
|
|
+ child:this.child? '1':'0'
|
|
|
|
+ }
|
|
|
|
+ if(valItem){
|
|
|
|
+ params.dept_id=valItem
|
|
|
|
+ }else{
|
|
|
|
+ params.dept_id=0
|
|
|
|
+ }
|
|
|
|
+ this.$http('get', '/api/employee/index', params)
|
|
|
|
+ .then(res => {
|
|
|
|
+ let list = this.filtration(res.data.data.list);
|
|
|
|
+ // 当有指定显示列表时
|
|
|
|
+ if (this.user_employee_list) {
|
|
|
|
+ var employee_list = this.employee_list;
|
|
|
|
+ var userData = [];
|
|
|
|
+ list.map(item => {
|
|
|
|
+ // 列表数据是否是自己的管理范围
|
|
|
|
+ employee_list.map(item2 => {
|
|
|
|
+ if (item.id == item2.id) {
|
|
|
|
+ userData.push(item);
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ });
|
|
|
|
+ this.parse_list(userData);
|
|
} else {
|
|
} else {
|
|
- this.dept_name = JSON.parse(JSON.stringify(res.data.data.dept_info.name))
|
|
|
|
- this.dept_id = res.data.data.dept_info.id
|
|
|
|
|
|
+ // 没有指定人员列表
|
|
|
|
+ this.parse_list(list);
|
|
}
|
|
}
|
|
-
|
|
|
|
- }).catch((e) => {
|
|
|
|
-
|
|
|
|
})
|
|
})
|
|
- },
|
|
|
|
- get_user_list (done) {
|
|
|
|
- if(this.employee_list.length > 0){
|
|
|
|
- let list = this.employee_list
|
|
|
|
- if(this.employee_selected.length == 0){
|
|
|
|
- for(let i in this.selected.employee){
|
|
|
|
- this.employee_selected.push(this.selected.employee[i].id)
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- for(let i in list){
|
|
|
|
- if(list[i].direct_Supervisor){
|
|
|
|
- this.direct_Supervisor_you = list[i].direct_Supervisor
|
|
|
|
- this.directSupervisor = list[i].id
|
|
|
|
- }
|
|
|
|
- list[i]['letter_index'] = '#'
|
|
|
|
- if(this.$store.getters.employee_map[list[i].id]){
|
|
|
|
- list[i]['letter_index'] = this.$store.getters.employee_map[list[i].id].letter_index
|
|
|
|
- if(this.$store.getters.employee_map[list[i].id].img_url == ''){
|
|
|
|
- list[i]['img_url'] = 'static/images/head_default.png'
|
|
|
|
- }else {
|
|
|
|
- list[i]['img_url'] = this.$store.getters.employee_map[list[i].id].img_url
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- list[i]['checked'] = false
|
|
|
|
- if(this.employee_selected.indexOf(list[i].id) >= 0){
|
|
|
|
- list[i]['checked'] = true
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- if (this.keyword) {
|
|
|
|
- list = []
|
|
|
|
- this.employee_list.forEach(element => {
|
|
|
|
- if(element.name.indexOf(this.keyword) != "-1"){
|
|
|
|
- list.push(element)
|
|
|
|
- }
|
|
|
|
- });
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- this.list = list.sort((a,b) => {
|
|
|
|
- return a.letter_index.charCodeAt(0) - b.letter_index.charCodeAt(0)
|
|
|
|
- })
|
|
|
|
- if(this.whether_to_remove_right){
|
|
|
|
- this.selectedLists()
|
|
|
|
- }
|
|
|
|
- this.searchBox = this.list
|
|
|
|
-
|
|
|
|
- this.selectApersonModuleLoad = false
|
|
|
|
- done()
|
|
|
|
- return false
|
|
|
|
|
|
+ .finally(() => {
|
|
|
|
+ this.table_loading = false;
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ // 过滤各种条件:如:自己,创始人,只显示管理者等。。。
|
|
|
|
+ filtration(data) {
|
|
|
|
+ var list = data;
|
|
|
|
+ // 去除已经离职的人
|
|
|
|
+ for (let i = 0; i < list.length; i++) {
|
|
|
|
+ if (list[i].status == 2) {
|
|
|
|
+ list.splice(i, 1);
|
|
|
|
+ i--
|
|
}
|
|
}
|
|
- this.list = []
|
|
|
|
- this.selectApersonModuleLoad = true
|
|
|
|
- this.$http('get','/api/employee/index',{dept_id: this.pid,keywords: this.keyword,page: 0,page_size: 2000}).then((res) => {
|
|
|
|
- let employeeSelectedData = []
|
|
|
|
- for(let i in this.employee_selected_list){
|
|
|
|
- employeeSelectedData.push(this.employee_selected_list[i].id)
|
|
|
|
- }
|
|
|
|
- for (let i in res.data.data.list) {
|
|
|
|
- res.data.data.list[i]['checked'] = false
|
|
|
|
- if (this.employee_selected.indexOf(res.data.data.list[i].id) >= 0) {
|
|
|
|
- res.data.data.list[i]['checked'] = true
|
|
|
|
- }
|
|
|
|
- if (employeeSelectedData.indexOf(res.data.data.list[i].id) >= 0) {
|
|
|
|
- res.data.data.list[i]['checked'] = true
|
|
|
|
- }
|
|
|
|
- if (res.data.data.list[i].img_url == '') {
|
|
|
|
- res.data.data.list[i].img_url = 'static/images/head_default.png'
|
|
|
|
|
|
+ }
|
|
|
|
+ var managerList = []; // 管理者列表
|
|
|
|
+ // 只显示管理者
|
|
|
|
+ if (this.is_manager_only) {
|
|
|
|
+ var isManager;
|
|
|
|
+ list.map(item => {
|
|
|
|
+ isManager = false;
|
|
|
|
+ item.employee_detail.role_list.map(item2 => {
|
|
|
|
+ if (item2.name == 'creator' || item2.name == 'point_manager' || item2.name == 'dept_manager' || item2.name == 'admin') {
|
|
|
|
+ isManager = true;
|
|
}
|
|
}
|
|
|
|
+ });
|
|
|
|
+ if (isManager) {
|
|
|
|
+ managerList.push(item);
|
|
}
|
|
}
|
|
- if (this.use_employee_list) {
|
|
|
|
- res.data.data.list.forEach(element => {
|
|
|
|
- if (element.employee_detail.role_list.findIndex((value)=>value.name=='dept_manager'||value.name=='creator'||value.name=='point_manager'||value.name=='admin') >= 0) {
|
|
|
|
- this.list.push(element)
|
|
|
|
- }
|
|
|
|
- });
|
|
|
|
- return false
|
|
|
|
- }else{
|
|
|
|
- this.list = res.data.data.list
|
|
|
|
- }
|
|
|
|
- if(this.whether_to_remove_right){
|
|
|
|
- this.selectedLists()
|
|
|
|
- }
|
|
|
|
- this.searchBox = this.list
|
|
|
|
- done()
|
|
|
|
- }).catch((e) => {
|
|
|
|
- done()
|
|
|
|
- }).finally(()=>{
|
|
|
|
- this.selectApersonModuleLoad = false
|
|
|
|
- })
|
|
|
|
- },
|
|
|
|
- selectedLists(){
|
|
|
|
- let selected_list = []
|
|
|
|
- // console.log(this.employee_selected_list.filter(a=>!this.list.some(b=>b.id==a.id)))
|
|
|
|
- selected_list = this.employee_selected_list.filter(a=>!this.list.some(b=>b.id==a.id))
|
|
|
|
- console.log(selected_list.length)
|
|
|
|
- if(selected_list.length!=0){
|
|
|
|
- console.log(selected_list.length)
|
|
|
|
- for(let i in this.employee_selected_list){
|
|
|
|
- for(let a in selected_list){
|
|
|
|
- if(this.employee_selected_list[i].id == selected_list[a].id){
|
|
|
|
- this.employee_selected_list.splice(i,1)
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
|
|
+ });
|
|
|
|
+ list = managerList;
|
|
|
|
+ }
|
|
|
|
+ // 过滤自己
|
|
|
|
+ if (!this.include_self) {
|
|
|
|
+ const currUserId = this.$store.getters.user_info.id;
|
|
|
|
+ for (let i = 0; i < list.length; i++) {
|
|
|
|
+ if (list[i].id == currUserId) {
|
|
|
|
+ list.splice(i, 1);
|
|
|
|
+ i--
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- },
|
|
|
|
- removeSelf(list){
|
|
|
|
- if (!this.include_self){
|
|
|
|
- const currUserId = this.$store.getters.user_info.id
|
|
|
|
- const index = list.findIndex(o=>o.id === currUserId)
|
|
|
|
- if(index > -1){
|
|
|
|
- list.splice(index, 1)
|
|
|
|
|
|
+ }
|
|
|
|
+ // 过滤创始人
|
|
|
|
+ if (this.is_filtration_creator) {
|
|
|
|
+ for (let i = 0; i < list.length; i++) {
|
|
|
|
+ if (list[i].is_creator == 1) {
|
|
|
|
+ list.splice(i,1);
|
|
|
|
+ i--
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- return list
|
|
|
|
}
|
|
}
|
|
- },
|
|
|
|
- created() {
|
|
|
|
- for(let i in this.selected.employee){
|
|
|
|
- if(!this.selected.employee[i].img_url){
|
|
|
|
- this.selected.employee[i].img_url = 'static/images/head_default.png'
|
|
|
|
|
|
+ //过滤指定人员[]
|
|
|
|
+ if (this.employee_not_select.length > 0) {
|
|
|
|
+ for (let i = 0; i < list.length; i++) {
|
|
|
|
+ if (this.employee_not_select.indexOf(list[i].id) >= 0) {
|
|
|
|
+ list.splice(i, 1);
|
|
|
|
+ i--
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- if (document.documentElement.style.height) {
|
|
|
|
- this.com_height = document.documentElement.style.height
|
|
|
|
- }
|
|
|
|
- setTimeout(() => {
|
|
|
|
- if (this.$route.query.pid) {
|
|
|
|
- this.pid = this.$route.query.pid
|
|
|
|
- }
|
|
|
|
- this.get_user_list(function () {
|
|
|
|
-
|
|
|
|
- })
|
|
|
|
-
|
|
|
|
- this.get_dept_list()
|
|
|
|
- }, 200)
|
|
|
|
-
|
|
|
|
|
|
+ return list;
|
|
}
|
|
}
|
|
- }
|
|
|
|
|
|
+ },
|
|
|
|
+ created() {}
|
|
|
|
+};
|
|
</script>
|
|
</script>
|
|
|
|
|
|
-<style scoped>
|
|
|
|
- .employee_selector_box {
|
|
|
|
- width: 600px;
|
|
|
|
- padding: 24px;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- /* 搜索框 */
|
|
|
|
- .employee_selector_box .search{
|
|
|
|
- position: relative;
|
|
|
|
- display: table-cell;
|
|
|
|
- left: 10%;
|
|
|
|
- padding: 0;
|
|
|
|
- border: 1px #C0C4CC solid;
|
|
|
|
- border-radius: 16.5px;
|
|
|
|
- }
|
|
|
|
- .employee_selector_box .search-box button{
|
|
|
|
- display: inline-block;
|
|
|
|
- vertical-align: middle;
|
|
|
|
- margin-left: 10px;
|
|
|
|
- width: auto;
|
|
|
|
- padding: 0;
|
|
|
|
- background: none;
|
|
|
|
- border-radius: 0px;
|
|
|
|
- border: none;
|
|
|
|
- }
|
|
|
|
- .employee_selector_box .search-box /deep/ .el-input{
|
|
|
|
- display: inline-block;
|
|
|
|
- width: 84%;
|
|
|
|
- padding: 0 24px 0 6px;
|
|
|
|
- background: none;
|
|
|
|
- border-radius: 0px;
|
|
|
|
- border: none;
|
|
|
|
- }
|
|
|
|
- .employee_selector_box .search-box /deep/ .el-input input{
|
|
|
|
- padding:0;
|
|
|
|
- line-height: 34px;
|
|
|
|
- border:none;
|
|
|
|
- }
|
|
|
|
- /* /搜索框 */
|
|
|
|
-
|
|
|
|
- /* 左边框 */
|
|
|
|
- .employee_selector_box .choose_left {
|
|
|
|
- /* padding:8px 10px 8px 10px; */
|
|
|
|
- padding: 0 10px;
|
|
|
|
- margin: 8px 0;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .employee_selector_box .choose_left .employee_cell{
|
|
|
|
- border-bottom:1px #f8f8f8 solid;
|
|
|
|
- }
|
|
|
|
- .employee_selector_box .choose_left .employee_cell_a .employee_cell{
|
|
|
|
- border-bottom:none;
|
|
|
|
- }
|
|
|
|
- .employee_selector_box .choose_left .employee_checkbox{
|
|
|
|
- padding-left: 8px;
|
|
|
|
- }
|
|
|
|
- .employee_selector_box .choose_left .employee_img_url{
|
|
|
|
- padding-left: 8px;
|
|
|
|
- }
|
|
|
|
- .employee_selector_box .choose_left .employee_name{
|
|
|
|
- padding-left: 8px;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .employee_selector_box /deep/ .el-scrollbar__thumb {
|
|
|
|
- width:2px;
|
|
|
|
- margin:15px 0 0 6px;
|
|
|
|
- background:#409EFF;
|
|
|
|
- }
|
|
|
|
- /* 左边框 */
|
|
|
|
-
|
|
|
|
- /* 右边距 */
|
|
|
|
- .employee_selector_box .option-box{
|
|
|
|
- padding:14px 0;
|
|
|
|
- }
|
|
|
|
- .employee_selector_box .option-box button{
|
|
|
|
- margin-right:16px;
|
|
|
|
- }
|
|
|
|
- .employee_selector_box .choose_right{
|
|
|
|
- padding:8px 10px;
|
|
|
|
- }
|
|
|
|
- .employee_selector_box .choose_right .employee_delete .el-button{
|
|
|
|
- transform: scale(0.5);
|
|
|
|
- background: #C0C4CC;
|
|
|
|
- }
|
|
|
|
- .employee_selector_box .choose_right .employee_delete .el-button /deep/ .el-icon-close{
|
|
|
|
- color:#fff;
|
|
|
|
- }
|
|
|
|
- .employee_selector_box .choose_right .employee_delete .el-button:active{
|
|
|
|
- background: #409EFF;
|
|
|
|
- }
|
|
|
|
- .employee_selector_box .choose_right .employee_delete .el-button:active /deep/ .el-icon-close{
|
|
|
|
- color:#FFF;
|
|
|
|
- }
|
|
|
|
- .employee_selector_box .choose_right .employee_cell .employee_name{
|
|
|
|
- padding-left:8px;
|
|
|
|
- }
|
|
|
|
- .employee_selector_box .choose_right .employee_cell .employee_img_url{
|
|
|
|
- padding-left:8px;
|
|
|
|
- }
|
|
|
|
- /* 右边距 */
|
|
|
|
-
|
|
|
|
- .employee_selector_box /deep/ .employee_cell{
|
|
|
|
- padding:8px 0;
|
|
|
|
- }
|
|
|
|
- .employee_selector_box /deep/ .employee_cell:hover{
|
|
|
|
- background:#ecf5ff;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .employee_cell {
|
|
|
|
- display: table;
|
|
|
|
- cursor: pointer;
|
|
|
|
- width: 100%;
|
|
|
|
- color:#606266;
|
|
|
|
- padding: 8px 0;
|
|
|
|
- background-color: transparent;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .employee_cell .employee_cell_clear {
|
|
|
|
- clear: both;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .employee_cell .employee_img_url {
|
|
|
|
- display: table-cell;
|
|
|
|
- vertical-align: middle;
|
|
|
|
- width: 30px;
|
|
|
|
- padding-left:0px;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .employee_cell .employee_img_url img {
|
|
|
|
- width: 24px;
|
|
|
|
- height: 24px;
|
|
|
|
- border-radius: 50%;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .employee_cell .employee_checkbox {
|
|
|
|
- display: table-cell;
|
|
|
|
- vertical-align: middle;
|
|
|
|
- width: 30px;
|
|
|
|
- text-align: center;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .employee_cell .employee_name{
|
|
|
|
- display:table-cell;
|
|
|
|
- vertical-align: middle;
|
|
|
|
- color:#606266;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .employee_delete {
|
|
|
|
- display: table-cell;
|
|
|
|
- text-align: right;
|
|
|
|
- padding-right:0px;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .employee_cell_a {
|
|
|
|
- display: block;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .employee_cell_a:hover {
|
|
|
|
- background-color: #ecf5ff;
|
|
|
|
- border-radius:4px;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .dept_child_cell {
|
|
|
|
- display: table-cell;
|
|
|
|
- vertical-align: middle;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .dept_child_cell span {
|
|
|
|
- float: right;
|
|
|
|
- padding-right:8px;
|
|
|
|
- }
|
|
|
|
- .dept_child_cell span:hover{
|
|
|
|
- color:#1c1c1c;
|
|
|
|
- }
|
|
|
|
- .dept_child_cell span:active{
|
|
|
|
- color:#1c1c1c;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .scroller-box {
|
|
|
|
- height: 400px;
|
|
|
|
- padding-right: 0px !important;
|
|
|
|
- background-color: #fdfdfd;
|
|
|
|
- border: 1px solid #eee;
|
|
|
|
- border-radius: 4px;
|
|
|
|
- overflow: hidden;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .col-line {
|
|
|
|
- position: relative;
|
|
|
|
- height: 400px;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .col-line:before {
|
|
|
|
- content: " ";
|
|
|
|
- width: 1px;
|
|
|
|
- height: 400px;
|
|
|
|
- position: absolute;
|
|
|
|
- top: 0;
|
|
|
|
- bottom: 0;
|
|
|
|
- left: 50%;
|
|
|
|
- background-color: #eee;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .search-box {
|
|
|
|
- background-color: #fff;
|
|
|
|
- padding:14px 5px;
|
|
|
|
- border-bottom: 1px solid #eee;
|
|
|
|
- margin: 0 -5px;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .option-box {
|
|
|
|
- padding: 5px;
|
|
|
|
- background-color: #fff;
|
|
|
|
- border-bottom: 1px solid #eee;
|
|
|
|
- margin: 0 -5px;
|
|
|
|
- text-align: right;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .child_btn {
|
|
|
|
- color: #409EFF;
|
|
|
|
- }
|
|
|
|
- .dept_path{
|
|
|
|
- margin: 10px 0;
|
|
|
|
- display: block;
|
|
|
|
- white-space: nowrap;
|
|
|
|
- overflow: auto;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- /*滚动条的宽度*/
|
|
|
|
-
|
|
|
|
- .dept_path::-webkit-scrollbar {
|
|
|
|
- width:5px;
|
|
|
|
- height:5px;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- /*外层轨道。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果*/
|
|
|
|
-
|
|
|
|
- .dept_path::-webkit-scrollbar-track {
|
|
|
|
- width: 6px;
|
|
|
|
- background-color:#fff0;
|
|
|
|
- -webkit-border-radius: 2em;
|
|
|
|
- -moz-border-radius: 2em;
|
|
|
|
- border-radius:2em;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- /*滚动条的设置*/
|
|
|
|
-
|
|
|
|
- .dept_path::-webkit-scrollbar-thumb {
|
|
|
|
- background-color:#fff0;
|
|
|
|
- background-clip:padding-box;
|
|
|
|
- min-height:28px;
|
|
|
|
- -webkit-border-radius: 2em;
|
|
|
|
- -moz-border-radius: 2em;
|
|
|
|
- border-radius:2em;
|
|
|
|
- }
|
|
|
|
- /*滚动条移上去的背景*/
|
|
|
|
-
|
|
|
|
- .dept_path:hover::-webkit-scrollbar-thumb{
|
|
|
|
- background-color:rgba(144,147,153,.3);
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- .scrollbarHeight1{
|
|
|
|
- height: 300px;
|
|
|
|
- }
|
|
|
|
- .scrollbarHeight2{
|
|
|
|
- height: 320px;
|
|
|
|
- }
|
|
|
|
|
|
+<style scoped lang="scss">
|
|
|
|
+.showCheckbox .isCheckbox{
|
|
|
|
+ height: 7px;
|
|
|
|
+ width: 7px;
|
|
|
|
+ background-color: #26A2FF;
|
|
|
|
+ display: inline-block;
|
|
|
|
+ border-radius: 2px;
|
|
|
|
+ line-height: 14px;
|
|
|
|
+ position: relative;
|
|
|
|
+ top: -3px;
|
|
|
|
+}
|
|
|
|
+.showCheckbox{
|
|
|
|
+ border: 1px solid #26A2FF !important;
|
|
|
|
+}
|
|
|
|
+.checkbox{
|
|
|
|
+ height: 14px;
|
|
|
|
+ width: 14px;
|
|
|
|
+ border: 1px solid #dcdfe6;
|
|
|
|
+ background: #fff;
|
|
|
|
+ border-radius: 2px;
|
|
|
|
+ position: relative;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ text-align: center;
|
|
|
|
+}
|
|
|
|
+.deptList {
|
|
|
|
+ padding: 12px 0;
|
|
|
|
+ border-bottom: 1px solid #f1f1f1;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+}
|
|
|
|
+.employee_selector_box {
|
|
|
|
+ width: 600px;
|
|
|
|
+ padding: 20px;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ margin: 0 auto;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+/* 搜索框 */
|
|
|
|
+.employee_selector_box .search {
|
|
|
|
+ margin: 0 auto;
|
|
|
|
+ width: 80%;
|
|
|
|
+ min-height: 36px;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.employee_selector_box .search-box button {
|
|
|
|
+ display: inline-block;
|
|
|
|
+ vertical-align: middle;
|
|
|
|
+ margin-left: 10px;
|
|
|
|
+ width: auto;
|
|
|
|
+ padding: 0;
|
|
|
|
+ background: none;
|
|
|
|
+ border-radius: 0px;
|
|
|
|
+ border: none;
|
|
|
|
+}
|
|
|
|
+/* /搜索框 */
|
|
|
|
+
|
|
|
|
+/* 左边框 */
|
|
|
|
+.employee_selector_box .choose_left {
|
|
|
|
+ padding: 8px 10px 8px 10px;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.employee_selector_box .choose_left .employee_cell {
|
|
|
|
+ border-bottom: 1px #f1f1f1 solid;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.employee_selector_box .choose_left .employee_cell_a .employee_cell {
|
|
|
|
+ border-bottom: none;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.employee_selector_box .choose_left .employee_checkbox {
|
|
|
|
+ padding-left: 8px;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.employee_selector_box .choose_left .employee_img_url {
|
|
|
|
+ padding-left: 8px;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.employee_selector_box .choose_left .employee_name {
|
|
|
|
+ padding-left: 8px;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.employee_selector_box ::v-deep .el-scrollbar__thumb {
|
|
|
|
+ width: 2px;
|
|
|
|
+ margin: 15px 0 0 6px;
|
|
|
|
+ background: #409eff;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+/* 左边框 */
|
|
|
|
+
|
|
|
|
+/* 右边距 */
|
|
|
|
+.employee_selector_box .option-box {
|
|
|
|
+ padding: 14px 0;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.employee_selector_box .option-box button {
|
|
|
|
+ margin-right: 16px;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.employee_selector_box .choose_right {
|
|
|
|
+ padding: 8px 10px;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.employee_selector_box .choose_right .employee_delete .el-button {
|
|
|
|
+ transform: scale(0.5);
|
|
|
|
+ background: #c0c4cc;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.employee_selector_box .choose_right .employee_delete .el-button /deep/ .el-icon-close {
|
|
|
|
+ color: #fff;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.employee_selector_box .choose_right .employee_delete .el-button:active {
|
|
|
|
+ background: #409eff;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.employee_selector_box .choose_right .employee_delete .el-button:active /deep/ .el-icon-close {
|
|
|
|
+ color: #fff;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.employee_selector_box .choose_right .employee_cell .employee_name {
|
|
|
|
+ padding-left: 8px;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.employee_selector_box .choose_right .employee_cell .employee_img_url {
|
|
|
|
+ padding-left: 8px;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+/* 右边距 */
|
|
|
|
+
|
|
|
|
+.employee_selector_box /deep/ .employee_cell {
|
|
|
|
+ padding: 8px 0;
|
|
|
|
+ border-bottom: 1px #f1f1f1 solid;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.employee_selector_box /deep/ .employee_cell:hover {
|
|
|
|
+ background: #ecf5ff;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.employee_cell {
|
|
|
|
+ display: -webkit-inline-box;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ width: 100%;
|
|
|
|
+ color: #606266;
|
|
|
|
+ padding: 8px 0;
|
|
|
|
+ background-color: transparent;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.employee_cell .employee_cell_clear {
|
|
|
|
+ clear: both;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.employee_cell .employee_img_url {
|
|
|
|
+ display: table-cell;
|
|
|
|
+ vertical-align: middle;
|
|
|
|
+ width: 30px;
|
|
|
|
+ padding-left: 0px;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.employee_cell .employee_img_url img {
|
|
|
|
+ width: 24px;
|
|
|
|
+ height: 24px;
|
|
|
|
+ border-radius: 50%;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.employee_cell .employee_checkbox {
|
|
|
|
+ display: table-cell;
|
|
|
|
+ vertical-align: middle;
|
|
|
|
+ width: 30px;
|
|
|
|
+ text-align: center;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.employee_cell .employee_name {
|
|
|
|
+ display: table-cell;
|
|
|
|
+ vertical-align: middle;
|
|
|
|
+ color: #606266;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.employee_delete {
|
|
|
|
+ display: table-cell;
|
|
|
|
+ text-align: right;
|
|
|
|
+ padding-right: 0px;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.employee_cell_a {
|
|
|
|
+ display: block;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.employee_cell_a:hover {
|
|
|
|
+ background-color: #ecf5ff;
|
|
|
|
+ border-radius: 4px;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.dept_child_cell {
|
|
|
|
+ display: table-cell;
|
|
|
|
+ vertical-align: middle;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.dept_child_cell span {
|
|
|
|
+ float: right;
|
|
|
|
+ padding-right: 8px;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.dept_child_cell span:hover {
|
|
|
|
+ color: #1c1c1c;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.dept_child_cell span:active {
|
|
|
|
+ color: #1c1c1c;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.scroller-box {
|
|
|
|
+ height: 440px;
|
|
|
|
+ padding-right: 0px !important;
|
|
|
|
+ background-color: #fdfdfd;
|
|
|
|
+ border: 1px solid #eee;
|
|
|
|
+ border-radius: 4px;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+}
|
|
|
|
+/* .scroller-box.one{
|
|
|
|
+ height: 440px;
|
|
|
|
+ } */
|
|
|
|
+
|
|
|
|
+.col-line {
|
|
|
|
+ position: relative;
|
|
|
|
+ height: 400px;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.col-line:before {
|
|
|
|
+ content: ' ';
|
|
|
|
+ width: 1px;
|
|
|
|
+ height: 400px;
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 0;
|
|
|
|
+ bottom: 0;
|
|
|
|
+ left: 50%;
|
|
|
|
+ background-color: #eee;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.search-box {
|
|
|
|
+ background-color: #fff;
|
|
|
|
+ padding: 14px 5px;
|
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
|
+ margin: 0 -5px;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.option-box {
|
|
|
|
+ padding: 5px;
|
|
|
|
+ background-color: #fff;
|
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
|
+ margin: 0 -5px;
|
|
|
|
+ text-align: right;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.child_btn {
|
|
|
|
+ color: #409eff;
|
|
|
|
+}
|
|
|
|
+.dept_path {
|
|
|
|
+ padding: 10px 0;
|
|
|
|
+ border-bottom: 1px solid #f1f1f1;
|
|
|
|
+ min-height: 37px;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.scrollbarHeight1 {
|
|
|
|
+ height: 310px;
|
|
|
|
+}
|
|
|
|
+.scrollbarHeight2 {
|
|
|
|
+ height: 350px;
|
|
|
|
+}
|
|
|
|
+/deep/ .dept_icon{
|
|
|
|
+ .el-input__validateIcon{
|
|
|
|
+ display: none;
|
|
|
|
+ }
|
|
|
|
+}
|
|
</style>
|
|
</style>
|