dd_pc/src/views/framework.vue

<template>
	<div class="all-box">
		<!-- 头部提示 -->
		<div class="top-msg" style="margin-bottom: 10px;">
			<div>
				当前组织架构和角色同过钉钉同步，上次同步时间
				<span v-if="info.sync_time">{{ info.sync_time }}</span>
				<span v-else>暂未同步</span>
			</div>
			<div>
				如果您的钉钉通讯录有变动，<span class="red">同步间隔时间为每两小时能同步一次</span>
				<span class="blue" style="margin-left: 10px;cursor: pointer;" @click="tb()" v-loading="tbLoading">
					<i class="el-icon-refresh"></i>
					立即同步
				</span>
			</div>
		</div>
		<div class="all">
			<div class="flex-box">
				<div class="terr-left">
					<div class="rule_class_box">
							<div class="company_name">
								<img src="../assets/image/two.png" />
								<span>组织架构</span>
								<!-- <span :class="[dept_id==0? 'blue':'']">{{ info.name }}</span> -->
							</div>
<!-- 						<div @click="handleNodeClick({ id: 0 })" class="company_name">
							<img src="../assets/image/two.png" />
							<span :class="[dept_id==0? 'blue':'']">{{ info.name }}</span>
						</div> -->
						<el-tree
							:data="bmList"
							class="cate-tree"
							:expand-on-click-node="false"
							:highlight-current="true"
							:props="{ children: '_child', label: 'name' }"
							@node-click="handleNodeClick"
							:accordion="true"
							empty-text="您暂无部门数据,请同步钉钉通讯录"
						>
							<div
								content="tree"
								v-show="treedata.length != 0"
								class="flex-box flex-v-ce"
								slot-scope="{ node, data }"
								style="font-size: 14px;color: #606266; width:100%; text-align: left;"
							>
								<img src="../assets/image/one.png" style="width: 20px;margin-right: 5px;" />
								<span class="name">{{ data.name }}</span>
							</div>
						</el-tree>
					</div>
				</div>
				<div class="terr-right border-right flex-1">
					<div class="margin-bottom">
						<el-button @click="participation()" :loading="enable_loading" size="medium" type="primary" style="margin-right: 10px;" v-show="selectIds.length > 0">参与积分管理</el-button>
						<el-input placeholder="输入同事姓名" size="medium" style="width: 230px;" v-model="keywords">
							<el-button slot="append" icon="el-icon-search" @click="getEmployee()"></el-button>
						</el-input>
					</div>
					<el-table :data="userList" @selection-change="handleSelectionChange" v-loading="tableToading">
						<el-table-column type="selection" width="50"></el-table-column>
						<el-table-column label="姓名">
							<template slot-scope="scope">
								<div class="flex-box flex-v-ce">
									<userImage :user_name="scope.row.name" :img_url="scope.row.img_url" width="44px" height="44px"></userImage>
									<div style="margin-left: 10px;">{{ scope.row.name }}</div>
								</div>
							</template>
						</el-table-column>
						<el-table-column label="部门">
							<template slot-scope="scope">
								<div class="flex-box flex-v-ce bms">
									<div v-for="(item, index) in scope.row.employee_detail.dept_list" :key="index">{{ item.dept_name }}</div>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="accedence_time" label="入职时间"></el-table-column>
						<el-table-column label="是否参与积分管理">
							<template slot-scope="scope">
								<div :class="[scope.row.is_official==1? 'switch-box':'']" @click="changeIs(scope.row.is_official, scope.row.id)">
									<div class="switch"></div>
								</div>
								<!-- <el-switch @change="changeIs($event, scope.row.id)" v-model="scope.row.is_official" :active-value="is" :inactive-value="no"></el-switch> -->
							</template>
						</el-table-column>
						<template slot="empty">
							<noData></noData>
						</template>
					</el-table>
					<div class="pagination">
						<el-pagination
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							:current-page="page"
							:page-sizes="[10, 20, 30, 40, 50, 100]"
							:page-size="perPage"
							layout="total,sizes, prev, pager, next"
							:total="total"
						></el-pagination>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import noData from '@/components/noData';
export default {
	data() {
		return {
			is: 1,
			no: 0,
			page: 1,
			perPage: 10,
			total: 0,
			info: {}, //公司信息
			tips_show: true,
			bmList: [],
			userList: [],
			class_type: '',
			treedata: [1],
			tableData: [],
			keywords: '',
			dept_id: 0,

			tableToading: false,
			tbLoading: false,
			selectIds: [],
			enable_loading:false
			
		};
	},
	components: {
		noData
	},
	watch: {
		dept_id(val) {
			this.getEmployee();
		}
	},
	created() {
		this.getInfo();
		// this.getDepartment();
		this.getEmployee();
	},
	mounted() {
		this.$nextTick(function() {
			if (localStorage.getItem('rule')) {
				this.tips_show = false;
			} else {
				this.tips_show = true;
			}
		});
	},
	methods: {
		//同步信息
		tb() {
			this.$confirm('下次同步时间需在两小时之后，是否同步?', '提示', {
			  confirmButtonText: '确定',
			  cancelButtonText: '取消',
			  type: 'warning'
			}).then(() => {
				this.tbLoading = true;
				var http1 = this.$axios.post('api/ding/department_sync');
				var http2 = this.$axios.post('api/ding/employee_sync');
				Promise.all([http1, http2]).then(res => {
					if (res[0]) {
						this.$message.success({ message: res[0].data.msg });
						this.getInfo();
					}
				}).finally(()=>{
					this.tbLoading = false;
				});
			});
		},
		//是否开通
		changeIs(e, id) {
			var url = e == 1 ? 'api/employee/disable' : 'api/employee/enable';
			this.$axios.post(url, { employee_id: [id] }).then(res => {
				if (res) {
					if(e==0){
						this.$message.success({ message: '开启成功,可在"角色权限设置对应管理范围"' });
					}else{
						this.$message.success({ message: res.data.msg });
					}
					this.getEmployee();
				}
			});
		},
		//批量开通权限
		participation() {
			this.enable_loading=true;
			this.$axios.post('api/employee/enable', { employee_id: this.selectIds }).then(res => {
				if (res) {
					this.getEmployee();
				}
			}).finally(err=>{
				this.enable_loading=false;
			});
		},
		//获取公司信息
		getInfo() {
			this.$axios.get('api/site/info').then(res => {
				this.info = res.data.data;
				this.getDepartment();
			});
		},
		//选择员工
		handleSelectionChange(e) {
			var arr = [];
			for (var item in e) {
				arr.push(e[item].id);
			}
			this.selectIds = arr;
		},
		//点击部门
		handleNodeClick(e) {
			this.page = 1;
			this.dept_id = e.id;
		},
		//获取部门
		getDepartment() {
			this.$axios.get('api/department/tree').then(res => {
				var list=[{
					id:0,
					name:this.info.name,
					_child:res.data.data.list
				}]
				this.bmList = list;
				
			});
		},
		//获取员工
		getEmployee() {
			this.tableToading = true;
			this.$axios.get('api/employee/index', { params: { dept_id: this.dept_id, keywords: this.keywords, page: this.page, page_size: this.perPage } }).then(res => {
				this.total = res.data.data.pageInfo.count;
				this.userList = res.data.data.list;
			}).finally(err=>{
				this.tableToading=false;
			});
		},
		//关闭提示
		tips_close() {
			localStorage.setItem('rule', 'true');
			this.tips_show = false;
		},
		handleSizeChange: function(val) {
			this.perPage = val;
			this.page = 1;
			this.getEmployee();
		},
		//页码变更
		handleCurrentChange: function(val) {
			this.page = val;
			this.getEmployee();
		}
	}
};
</script>

<style lang="scss" scoped="scoped">
.switch{
    margin: 0;
    display: inline-block;
    position: relative;
    width: 40px;
    height: 20px;
    border: 1px solid #dcdfe6;
    outline: none;
    border-radius: 10px;
    box-sizing: border-box;
    background: #dcdfe6;
    cursor: pointer;
    transition: border-color .3s,background-color .3s;
    vertical-align: middle;
}
.switch:after {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    border-radius: 100%;
    transition: all .3s;
    width: 16px;
    height: 16px;
    background-color: #fff;
}
.switch-box .switch {
    border-color: #409eff;
    background-color: #409eff;
}
.switch-box .switch:after {
    left: 100%;
    margin-left: -17px;
}
.name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 80%;
}
.bms div {
	margin-right: 10px;
}
.top-msg div:nth-child(1) {
	margin-bottom: 10px;
}
.company_name {
	position: relative;
	display: block;
	font-family: 'Microsoft YaHei';
	text-align: left;
	padding: 15px 25px;
	cursor: pointer;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	border-bottom: 1px #f8f8f8 solid;
}
.company_name img {
	position: relative;
	display: inline-block;
	top: 2px;
	width: 18px;
	height: 18px;
	margin-right: 4px;
}
.terr-right {
	.custom-tree-node {
		margin-left: -4px;
	}
	.custom-tree-node * {
		vertical-align: middle;
	}
	.custom-tree-node:hover {
		.treeIcon {
			display: inline-block;
			width: 55%;
		}
	}
}

.rule_class_box {
	::v-deep .el-tree-node {
		border-bottom: 1px #f8f8f8 solid;
	}
	::v-deep .el-tree-node__content {
		padding: 10px 0;
		border-bottom: 1px #f8f8f8 solid;
	}
	::v-deep .el-tree-node__content:hover {
		background: #ecf5ff;
		border-radius: 4px;
	}
	::v-deep .is-current .el-tree-node__content .el-icon-caret-right {
		color: #409eff !important;
	}
	::v-deep .is-current .el-tree-node__content .el-tree-node__label {
		color: #409eff !important;
	}
	::v-deep .is-current .el-tree-node__children .el-icon-caret-right {
		color: #c0c4cc !important;
	}
	::v-deep .is-current .el-tree-node__children .el-tree-node__label {
		color: #606266 !important;
	}
	::v-deep .is-current .name {
		color: #409eff !important;
		font-weight: normal;
		transition: 0.35s ease-in-out;
	}
}
</style>