|
@@ -1,490 +1,354 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
- <div class="employee_selector_box">
|
|
|
- <el-row :gutter="10">
|
|
|
- <el-col :xs="11" :sm="11" :md="11" :lg="11" :xl="11" class="scroller-box one">
|
|
|
- <div class="search-box">
|
|
|
- <div class="search flex-box flex-v-ce">
|
|
|
- <el-button slot="append" icon="el-icon-search" class="manager_button"></el-button>
|
|
|
- <el-input v-model="keyword" placeholder="请输入内容"></el-input>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="flex-box flex-v-ce" style="padding: 0 10px;border-bottom: 1px solid #f1f1f1;">
|
|
|
- <div class="dept_path flex-1">
|
|
|
- <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>
|
|
|
- {{item.name}}
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- <el-checkbox v-if="isChecKedAll" v-model="checked" @change="checkedChange" :indeterminate="indeterminate" >全选</el-checkbox>
|
|
|
- </div>
|
|
|
- <el-scrollbar wrap-class="column-wrapper scrollable-items-container" :native="false" style="height: 354px;" v-loading="table_loading">
|
|
|
- <div class="choose_left">
|
|
|
- <a href="javascript:void(0)" v-for="(item,index) in dept_list" :key="index">
|
|
|
- <div class="employee_cell" @click="select_dept(item)" v-show="item.pid == pid && item.name.indexOf(keyword) >= 0 && dept_not_select.indexOf(item.id) < 0">
|
|
|
- <i class="el-icon-caret-right" style=" display: inline-block;"></i>
|
|
|
- <div class="employee_checkbox" v-if="can_select_dept">
|
|
|
- <el-checkbox v-model="item.checked"></el-checkbox>
|
|
|
- </div>
|
|
|
- <div class="employee_name">
|
|
|
- {{item.name}}
|
|
|
- </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>
|
|
|
- </div>
|
|
|
- <div class="employee_cell_clear"></div>
|
|
|
- </div>
|
|
|
- </a>
|
|
|
- <div class="persons_box" style="padding-top:4px;" v-if="list.length>0">
|
|
|
- <a class="employee_cell_a" href="javascript:void(0)" v-for="(item,index) in list" :key="index">
|
|
|
- <div class="employee_cell flex-box flex-v-ce" v-if="can_select_employee" @click.prevent.stop="select_employee(item)">
|
|
|
- <div class="employee_checkbox">
|
|
|
- <el-checkbox v-model="item.checked"></el-checkbox>
|
|
|
- </div>
|
|
|
- <userImage :user_name="item.name" :img_url="item.img_url" width="30px" height="30px"></userImage>
|
|
|
- <div class="employee_name">
|
|
|
- {{item.name}}
|
|
|
- </div>
|
|
|
- <div class="employee_cell_clear"></div>
|
|
|
- </div>
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- <div v-else class="fontColorF" style="text-align: center;margin-top: 50px;">暂无可选人员,请确保在'组织架构'中的人员开启了参与积分管理</div>
|
|
|
- </div>
|
|
|
- </el-scrollbar>
|
|
|
- </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">
|
|
|
- <div class="option-box flex-box flex-v-ce">
|
|
|
- <div class="fontColorF flex-1" v-show="multi">已选择{{employee_selected_list.length}}个员工</div>
|
|
|
- <el-button type="type" @click="clear_data">清空</el-button>
|
|
|
- </div>
|
|
|
- <el-scrollbar wrap-class="column-wrapper scrollable-items-container" :native="false" style="height: 400px;">
|
|
|
- <div class="choose_right">
|
|
|
- <div class="employee_cell flex-box flex-v-ce" v-for="(item,index) in dept_selected_list" :key="index">
|
|
|
- <div class="employee_name">
|
|
|
- {{item.dept_name}}
|
|
|
- </div>
|
|
|
- <div class="employee_delete">
|
|
|
- <el-button type="default" size="mini" @click="dept_cancel(item)" icon="el-icon-close" circle></el-button>
|
|
|
- </div>
|
|
|
- <div class="employee_cell_clear"></div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="employee_cell" v-for="(item,index) in employee_selected_list" :key="index">
|
|
|
- <userImage :user_name="item.name" :img_url="item.img_url" width="30px" height="30px"></userImage>
|
|
|
- <div class="employee_name">
|
|
|
- {{item.name}}
|
|
|
- </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>
|
|
|
- </div>
|
|
|
- </el-scrollbar>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div>
|
|
|
+ <div class="employee_selector_box">
|
|
|
+ <el-row :gutter="10">
|
|
|
+ <el-col :xs="11" :sm="11" :md="11" :lg="11" :xl="11" class="scroller-box one">
|
|
|
+ <div class="search-box">
|
|
|
+ <div class="search flex-box" style="margin-bottom: 7px;">
|
|
|
+ <el-input v-model="keyword" placeholder="请输入姓名" clearable></el-input>
|
|
|
+ </div>
|
|
|
+ <div class="search flex-box" v-if="can_select_dept">
|
|
|
+ <el-cascader class="date-picker-width" v-model="dept_id" :options="dept_list" :props="{ checkStrictly: true,value:'id',label:'name',children:'_child'}" ref="dept" clearable filterable placeholder="全公司"></el-cascader>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flex-box" style="padding: 10px;border-bottom: 1px solid #f1f1f1;">
|
|
|
+ <div class="flex-1"></div>
|
|
|
+ <el-checkbox v-if="isChecKedAll" v-model="checked" @change="checkedChange" :indeterminate="indeterminate">全选</el-checkbox>
|
|
|
+ </div>
|
|
|
+ <el-scrollbar wrap-class="column-wrapper scrollable-items-container" :native="false" style="height: 354px;" v-loading="table_loading">
|
|
|
+ <div class="choose_left">
|
|
|
+ <div class="persons_box" style="padding-top:4px;" v-if="list.length > 0">
|
|
|
+ <a class="employee_cell_a" href="javascript:void(0)" v-for="(item, index) in list" :key="index">
|
|
|
+ <div class="employee_cell flex-box flex-v-ce" v-if="can_select_employee" @click.prevent.stop="select_employee(item)">
|
|
|
+ <div class="employee_checkbox"><el-checkbox v-model="item.checked"></el-checkbox></div>
|
|
|
+ <userImage :user_name="item.name" :img_url="item.img_url" width="30px" height="30px"></userImage>
|
|
|
+ <div class="employee_name">{{ item.name }}</div>
|
|
|
+ <div class="employee_cell_clear"></div>
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ <div v-else class="fontColorF" style="text-align: center;margin-top: 50px;">暂无可选人员,请确保在'组织架构'中的人员开启了参与积分管理</div>
|
|
|
+ </div>
|
|
|
+ </el-scrollbar>
|
|
|
+ </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">
|
|
|
+ <div class="option-box flex-box flex-v-ce">
|
|
|
+ <div class="fontColorF flex-1" v-show="multi">已选择{{ employee_selected_list.length }}个员工</div>
|
|
|
+ <el-button type="type" @click="clear_data()">清空</el-button>
|
|
|
+ </div>
|
|
|
+ <el-scrollbar wrap-class="column-wrapper scrollable-items-container" :native="false" style="height: 400px;">
|
|
|
+ <div class="choose_right">
|
|
|
+ <div class="employee_cell flex-box flex-v-ce" v-for="(item, index) in dept_selected_list" :key="index">
|
|
|
+ <div class="employee_name">{{ item.dept_name }}</div>
|
|
|
+ <div class="employee_delete"><el-button type="default" size="mini" @click="dept_cancel(item)" icon="el-icon-close" circle></el-button></div>
|
|
|
+ <div class="employee_cell_clear"></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="employee_cell" v-for="(item, index) in employee_selected_list" :key="index">
|
|
|
+ <userImage :user_name="item.name" :img_url="item.img_url" width="30px" height="30px"></userImage>
|
|
|
+ <div class="employee_name">{{ item.name }}</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>
|
|
|
+ </div>
|
|
|
+ </el-scrollbar>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-
|
|
|
- export default {
|
|
|
- props: {
|
|
|
- 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
|
|
|
- },
|
|
|
- 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 []
|
|
|
- }
|
|
|
- },
|
|
|
- close_clear_data: {
|
|
|
- type: Boolean,
|
|
|
- default: true
|
|
|
- },
|
|
|
- max: {
|
|
|
- type: Number,
|
|
|
- default: 0
|
|
|
- },
|
|
|
- user_no_select:{//是否能选择创始人
|
|
|
- type: Boolean,
|
|
|
- default: true
|
|
|
- },
|
|
|
- isChecKedAll:{
|
|
|
- type: Boolean,
|
|
|
- default: true
|
|
|
- },
|
|
|
- my_no_select:{//当前设置人的id
|
|
|
- type: Number,
|
|
|
- default: 0
|
|
|
- },
|
|
|
- "grouping_Json":Array
|
|
|
+
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ can_select_dept: {//是否能选择公司
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ },
|
|
|
+ can_select_employee: {//是否能选择员工
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
},
|
|
|
- name: "EmployeeSelector",
|
|
|
- data() {
|
|
|
- let selected = JSON.parse(JSON.stringify(this.selected))
|
|
|
- let user_no_select = JSON.parse(JSON.stringify(this.user_no_select))
|
|
|
- return {
|
|
|
- table_loading:false,
|
|
|
- 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: [],
|
|
|
- checked: false,
|
|
|
- indeterminate: false,
|
|
|
- not_user: user_no_select
|
|
|
+ dept_not_select: {//排除部门的ID,包含ID时不出现在选择列表中
|
|
|
+ type: Array,
|
|
|
+ default: () => {
|
|
|
+ return []
|
|
|
}
|
|
|
},
|
|
|
- watch: {
|
|
|
- max(val) {
|
|
|
- this.set_button_width()
|
|
|
- },
|
|
|
- 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)
|
|
|
+ selected: {//已经选择的员工和部门
|
|
|
+ type: Object,
|
|
|
+ default: () => {
|
|
|
+ return {
|
|
|
+ employee: [],
|
|
|
+ dept: []
|
|
|
}
|
|
|
- for (let i in selected.dept) {
|
|
|
- this.dept_selected.push(selected.dept[i].dept_id)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ multi: {//指定员工是否能多选
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ },
|
|
|
+ dept_multi: {//指定部门是否能多选
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ },
|
|
|
+ employee_list: {//指定显示的员工列表,注意:传值后组件的员工数据将不是统一向服务器获取的,而是指定的员工列表,格式是:[{id: 1, name: “张三”, img_url: “”}]
|
|
|
+ type: Array,
|
|
|
+ default: () => {
|
|
|
+ return []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ close_clear_data: {//关闭时是否清空选择的数据
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ },
|
|
|
+ max: {//当multi为true时,用来限制选择人数,0不生效
|
|
|
+ type: Number,
|
|
|
+ default: 0
|
|
|
+ },
|
|
|
+ user_no_select:{//是否能选择创始人
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ },
|
|
|
+ isChecKedAll:{//是否能全人员
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ },
|
|
|
+ my_no_select:{//当前设置人的id
|
|
|
+ type: Number,
|
|
|
+ default: 0
|
|
|
+ },
|
|
|
+ },
|
|
|
+ name: "EmployeeSelector",
|
|
|
+ data() {
|
|
|
+ let selected = JSON.parse(JSON.stringify(this.selected));
|
|
|
+ console.log(selected);
|
|
|
+ let user_no_select = JSON.parse(JSON.stringify(this.user_no_select));
|
|
|
+ return {
|
|
|
+ table_loading:false,
|
|
|
+ employee_selected_list: selected.employee,
|
|
|
+ dept_selected_list: selected.dept,
|
|
|
+ employee_selected: [],
|
|
|
+ dept_selected: [],
|
|
|
+ com_height: '100%',
|
|
|
+
|
|
|
+ list: [],//人员列表
|
|
|
+ dept_name: '',//部门名称
|
|
|
+ dept_id: 0,//部门ID
|
|
|
+ pid:0,//部门ID实传
|
|
|
+ dept_list: [],//部门列表
|
|
|
+ dept_list_arr: [],//收集的部门
|
|
|
+ keyword: '',//搜索值
|
|
|
+ checked: false,//是否全选
|
|
|
+ indeterminate: false,
|
|
|
+ not_user: user_no_select
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ dept_id(val){
|
|
|
+ if(val.length>1){
|
|
|
+ this.pid=val[val.length-1];
|
|
|
+ }else{
|
|
|
+ this.pid=val[0];
|
|
|
+ }
|
|
|
+ this.get_user_list();
|
|
|
+ this.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)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //搜索
|
|
|
+ keyword(val) {
|
|
|
+ this.get_user_list();
|
|
|
+ this.checked=false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //全选择
|
|
|
+ checkedChange(val){
|
|
|
+ if (val) {
|
|
|
+ for (let i in this.list) {
|
|
|
+ this.$set(this.list[i], 'checked', true)
|
|
|
}
|
|
|
- this.set_button_width()
|
|
|
- },
|
|
|
- visible(val) {
|
|
|
- setTimeout(() => {
|
|
|
- if (this.$route.query.pid) {
|
|
|
- this.pid = this.$route.query.pid
|
|
|
+ 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) {
|
|
|
+ if (employeeSelectedIds.includes(this.list[i].id)) {
|
|
|
+ total += 1
|
|
|
+ }else{
|
|
|
+ this.employee_selected_list.push(this.list[i])
|
|
|
+ }
|
|
|
}
|
|
|
- this.get_user_list();
|
|
|
- this.get_dept_list()
|
|
|
- }, 200)
|
|
|
- // }
|
|
|
- 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()
|
|
|
- },
|
|
|
- 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() {
|
|
|
- this.get_user_list(function() {
|
|
|
-
|
|
|
+ this.list.length == total?this.indeterminate = true:this.indeterminate = false
|
|
|
})
|
|
|
+ }else{
|
|
|
+ this.clear_data()
|
|
|
}
|
|
|
},
|
|
|
- methods: {
|
|
|
- //全选择
|
|
|
- checkedChange(val){
|
|
|
- if (val) {
|
|
|
- for (let i in this.list) {
|
|
|
- this.$set(this.list[i], 'checked', true)
|
|
|
+ //添加或移除已添加的员工
|
|
|
+ employee_cancel(item) {
|
|
|
+ this.employee_selected_list.map((arr,index)=>{
|
|
|
+ if(arr.id==item.id){
|
|
|
+ this.employee_selected_list.splice(index,1);
|
|
|
}
|
|
|
- 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) {
|
|
|
- if (employeeSelectedIds.includes(this.list[i].id)) {
|
|
|
- total += 1
|
|
|
- }else{
|
|
|
- this.employee_selected_list.push(this.list[i])
|
|
|
- }
|
|
|
- }
|
|
|
- this.list.length == total?this.indeterminate = true:this.indeterminate = false
|
|
|
- })
|
|
|
- }else{
|
|
|
- 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();
|
|
|
- },
|
|
|
- back_by_index(index) {
|
|
|
- if (index == this.pid_list.length) {
|
|
|
- return 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_list.map((arr,index)=>{
|
|
|
- if(arr.id==item.id){
|
|
|
- this.employee_selected_list.splice(index,1);
|
|
|
- }
|
|
|
- })
|
|
|
- this.list.map((arr,index)=>{
|
|
|
- if(arr.id==item.id){
|
|
|
- this.$set(arr, 'checked', false)
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- dept_cancel(item) {
|
|
|
- this.dept_selected.splice(this.dept_selected.indexOf(item.id), 1)
|
|
|
- let delete_index = -1
|
|
|
- for (let i in this.dept_selected_list) {
|
|
|
- if (this.dept_selected.indexOf(this.dept_selected_list[i].id) < 0) {
|
|
|
- delete_index = i
|
|
|
+ })
|
|
|
+ this.list.map((arr,index)=>{
|
|
|
+ if(arr.id==item.id){
|
|
|
+ this.$set(arr, 'checked', false)
|
|
|
}
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //获取部门
|
|
|
+ get_dept_list() {
|
|
|
+ this.$axios('get','/api/department/tree').then(res => {
|
|
|
+ this.dept_list =this.getTreeData(res.data.data.list);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 递归判断列表,把最后的children设为undefined
|
|
|
+ getTreeData(data) {
|
|
|
+ for (var i = 0; i < data.length; i++) {
|
|
|
+ if (data[i]._child.length < 1) {
|
|
|
+ // children若为空数组,则将children设为undefined
|
|
|
+ data[i]._child = undefined;
|
|
|
+ } else {
|
|
|
+ // children若不为空数组,则继续 递归调用 本方法
|
|
|
+ this.getTreeData(data[i]._child);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return data;
|
|
|
+ },
|
|
|
+ //选择部门
|
|
|
+ dept_cancel(item) {
|
|
|
+ this.dept_selected.splice(this.dept_selected.indexOf(item.id), 1)
|
|
|
+ let delete_index = -1
|
|
|
+ for (let i in this.dept_selected_list) {
|
|
|
+ if (this.dept_selected.indexOf(this.dept_selected_list[i].id) < 0) {
|
|
|
+ delete_index = i
|
|
|
}
|
|
|
- if (delete_index >= 0) {
|
|
|
- this.dept_selected_list.splice(delete_index, 1)
|
|
|
- for (let i in this.dept_list) {
|
|
|
- if (this.dept_list[i].dept_id == item.id) {
|
|
|
- this.$set(this.dept_list[i], 'checked', 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].dept_id == item.id) {
|
|
|
+ this.$set(this.dept_list[i], 'checked', false)
|
|
|
}
|
|
|
}
|
|
|
- },
|
|
|
- //选择员工
|
|
|
- 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) {
|
|
|
- this.$set(this.list[i], 'checked', false)
|
|
|
- }
|
|
|
- }
|
|
|
- if (this.max > 0 && this.employee_selected_list.length == this.max && this.multi) {
|
|
|
- this.$message.error('最多只能选择' + this.max + '人')
|
|
|
- return false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //选择员工
|
|
|
+ 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) {
|
|
|
+ this.$set(this.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
|
|
|
}
|
|
|
- },
|
|
|
-
|
|
|
- select_dept(item) {
|
|
|
- if (!this.can_select_dept) {
|
|
|
- this.show_child(item)
|
|
|
+ if (this.max > 0 && this.employee_selected_list.length == this.max && this.multi) {
|
|
|
+ this.$message.error('最多只能选择' + this.max + '人')
|
|
|
return false
|
|
|
}
|
|
|
- if (item.checked) {
|
|
|
- item.checked = false
|
|
|
- this.dept_cancel(item)
|
|
|
- } 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)
|
|
|
- }
|
|
|
- }
|
|
|
- this.dept_selected.push(item.id)
|
|
|
- this.dept_selected_list.push({
|
|
|
- dept_id: item.id,
|
|
|
- dept_name: item.name,
|
|
|
- avatar: '@/assets/image/e66f.jpg'
|
|
|
- })
|
|
|
- item.checked = true
|
|
|
- }
|
|
|
+ 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.employee_selected = []
|
|
|
+ this.employee_selected_list = []
|
|
|
+ this.dept_selected = []
|
|
|
+ this.dept_selected_list = []
|
|
|
+ this.checked = false
|
|
|
+ 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)
|
|
|
+ }
|
|
|
+ },
|
|
|
|
|
|
- },
|
|
|
- clear_data() {
|
|
|
+ close() {
|
|
|
+ if (this.close_clear_data) {
|
|
|
this.employee_selected = []
|
|
|
this.employee_selected_list = []
|
|
|
this.dept_selected = []
|
|
|
this.dept_selected_list = []
|
|
|
- this.checked = false
|
|
|
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)
|
|
|
}
|
|
|
- },
|
|
|
-
|
|
|
- close() {
|
|
|
- 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)
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- },
|
|
|
- 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.$axios('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
|
|
|
+ }
|
|
|
+ },
|
|
|
+ confirm() {
|
|
|
+ this.$emit('confirm', {
|
|
|
+ employee: this.employee_selected_list,
|
|
|
+ dept: this.dept_selected_list
|
|
|
+ })
|
|
|
+ this.close()
|
|
|
+ },
|
|
|
+ //获取员工详情
|
|
|
+ get_user_list() {
|
|
|
+ this.table_loading = true;
|
|
|
+ var that=this;
|
|
|
+ var employee_selected_list=this.employee_selected_list;
|
|
|
+ if (this.employee_list.length > 0) {
|
|
|
+ let list = this.employee_list
|
|
|
+ for (let i in list) {
|
|
|
+ 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;
|
|
|
}
|
|
|
}
|
|
|
- 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
|
|
|
- } else {
|
|
|
- this.dept_name = JSON.parse(JSON.stringify(res.data.data.dept_info.name))
|
|
|
- this.dept_id = res.data.data.dept_info.id
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- //获取员工详情
|
|
|
- get_user_list() {
|
|
|
- this.table_loading = true;
|
|
|
- var _this=this;
|
|
|
- var employee_selected_list=this.employee_selected_list;
|
|
|
- // var my_id=this.$getUserData().id;
|
|
|
- if (this.employee_list.length > 0) {
|
|
|
- let list = this.employee_list
|
|
|
- for (let i in list) {
|
|
|
- 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
|
|
|
- }
|
|
|
+ list[i]['checked'] = false
|
|
|
+ if (this.employee_selected.indexOf(list[i].id) >= 0) {
|
|
|
+ list[i]['checked'] = true
|
|
|
}
|
|
|
-
|
|
|
- this.list = list.sort((a, b) => {
|
|
|
- return a.letter_index.charCodeAt(0) - b.letter_index.charCodeAt(0)
|
|
|
- })
|
|
|
- return false
|
|
|
}
|
|
|
- this.list = []
|
|
|
- this.$axios('get','/api/employee/index', {
|
|
|
- dept_id: this.pid,//员工ID
|
|
|
- keywords: this.keyword,//搜索关键字
|
|
|
- page: 0,
|
|
|
- page_size: 2000
|
|
|
- }).then((res) => {
|
|
|
-
|
|
|
- var employee=res.data.data.list||[];
|
|
|
- var userAll=[];
|
|
|
- employee.forEach((item,i)=>{
|
|
|
+ this.list = list.sort((a, b) => {
|
|
|
+ return a.letter_index.charCodeAt(0) - b.letter_index.charCodeAt(0)
|
|
|
+ })
|
|
|
+ return false
|
|
|
+ }
|
|
|
+
|
|
|
+ this.list = []
|
|
|
+ this.$axios('get','/api/employee/index',{ dept_id: this.pid,keywords: this.keyword, page: 0,page_size: 2000}).then((res) => {
|
|
|
+ var employee=res.data.data.list||[];
|
|
|
+ var userAll=[];
|
|
|
+ employee.forEach((item,i)=>{
|
|
|
if(!this.not_user && item.is_creator == 1){//过滤创始人
|
|
|
return null;
|
|
|
}else if(this.my_no_select==item.id){//过滤掉当前设置人
|
|
@@ -492,319 +356,288 @@
|
|
|
}else if(item.is_official==1){
|
|
|
userAll.push(item);
|
|
|
}
|
|
|
- })
|
|
|
- userAll.map((item)=>{
|
|
|
+ })
|
|
|
+ userAll.map((item)=>{
|
|
|
item['checked'] = false;
|
|
|
for(var i in employee_selected_list){//判断传进来的员工是否是员工集合里的,是就设为已点击状态
|
|
|
if(employee_selected_list[i].id==item.id){
|
|
|
- item['checked'] = true;
|
|
|
+ item['checked'] = true;
|
|
|
}
|
|
|
- }
|
|
|
- })
|
|
|
- if (userAll.length == employee_selected_list.length) {
|
|
|
- this.checked = true
|
|
|
- }
|
|
|
- _this.list = userAll
|
|
|
- }).finally(() => {
|
|
|
- this.table_loading = false;
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- 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();
|
|
|
- // this.get_dept_list()
|
|
|
- }, 200)
|
|
|
-
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // if (userAll.length == employee_selected_list.length) { this.checked = true};
|
|
|
+ that.list = userAll
|
|
|
+ }).finally(() => {
|
|
|
+ that.table_loading = false;
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ var that=this;
|
|
|
+ that.checked=false;
|
|
|
+ if (document.documentElement.style.height) {
|
|
|
+ this.com_height = document.documentElement.style.height
|
|
|
}
|
|
|
- }
|
|
|
+ setTimeout(() => {
|
|
|
+ that.get_user_list();
|
|
|
+ if(that.can_select_dept){
|
|
|
+ that.get_dept_list();
|
|
|
+ }
|
|
|
+ }, 200)
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
- a{
|
|
|
- cursor: pointer;
|
|
|
- color: inherit;
|
|
|
- text-decoration: none;
|
|
|
- }
|
|
|
- .employee_selector_box {
|
|
|
- width: 600px;
|
|
|
- padding: 24px;
|
|
|
- }
|
|
|
-
|
|
|
- /* 搜索框 */
|
|
|
- .employee_selector_box .search {
|
|
|
- border: 1px #C0C4CC solid;
|
|
|
- width: 80%;
|
|
|
- border-radius: 25px;
|
|
|
+a {
|
|
|
+ cursor: pointer;
|
|
|
+ color: inherit;
|
|
|
+ text-decoration: none;
|
|
|
+}
|
|
|
+.employee_selector_box {
|
|
|
+ width: 600px;
|
|
|
+ padding: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
margin: 0 auto;
|
|
|
- }
|
|
|
-
|
|
|
- .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;
|
|
|
- }
|
|
|
-
|
|
|
- .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;
|
|
|
- }
|
|
|
-
|
|
|
- .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: -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{
|
|
|
+/* 搜索框 */
|
|
|
+.employee_selector_box .search {
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 80%;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/* 左边框 */
|
|
|
+.employee_selector_box .choose_left {
|
|
|
+ padding: 8px 10px 8px 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.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;
|
|
|
+}
|
|
|
+
|
|
|
+.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: -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: 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;
|
|
|
- }
|
|
|
-
|
|
|
- .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);
|
|
|
- }
|
|
|
-
|
|
|
+.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: 10px 5px;
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
+}
|
|
|
+
|
|
|
+.option-box {
|
|
|
+ padding: 5px;
|
|
|
+ background-color: #fff;
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
+ margin: 0 -5px;
|
|
|
+}
|
|
|
+
|
|
|
+.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, 0.3);
|
|
|
+}
|
|
|
</style>
|