lihai-oa/app/project/view/index/view_user.html

<div class="p-3 bg-white">
	<table class="layui-hide" id="user" lay-filter="user"></table>
</div>
<script type="text/html" id="toolbaruser">
  <div class="layui-btn-container">
  	<button class="layui-btn layui-btn-sm" lay-event="add">+ 新增项目成员</button>
  </div>
</script>
<script>
function project_user(){
	if($('#projectTab').find('li').eq(4).data('load') =='true'){
		return false;
	}
	$('#projectTab').find('li').eq(4).data('load','true');
	let tool = layui.tool, table = layui.table,employeepicker=layui.employeepicker;
	//项目成员
	layui.userTable = table.render({
		elem: '#user',
		title: '项目成员列表',
		cellMinWidth: 80,
		toolbar: '#toolbaruser',
		url: "/project/api/project_user", //数据接口
		where: { 'tid': project_id },
		page: false, //开启分页
		limit: 20,
		cols: [[ //表头
			{ field: 'name', fixed: 'left', title: '成员姓名', width: 90, align: 'center', rowspan: 2 }
			, { field: 'create_time', title: '进入项目日期', width: 110, align: 'center', rowspan: 2 }
			, { field: 'role', title: '角色', align: 'center', width: 90, rowspan: 2, templet: function (d) {
				var html='<span style="color: #4285F4;">普通成员</span>';
				if(d.role==1){
					html='<span style="color: #EE6666;">项目创建人</span>';
				}
				if(d.role==2){
					html='<span style="color: #91CC75;">项目负责人</span>';
				}
				return html;
			}}
			, { field: 'position', title: '职位', align: 'center', width: 100, rowspan: 2 }
			, { field: 'department', title: '所在部门', align: 'center', width: 120, rowspan: 2 }
			, { field: 'mobile', title: '手机号码', align: 'center', width: 110, rowspan: 2 }
			, { field: 'email', title: '电子邮箱', align: 'center', rowspan: 2 }
			, { align: 'center', title: '工作记录', colspan: 2 }
			, { align: 'center', title: '项目任务', colspan: 3 }
			, { field: 'delete_time', title: '移除日期', align: 'center', width: 110, rowspan: 2 }
			, { field: 'status',fixed: 'right', title: '状态', align: 'center', width: 60, rowspan: 2, templet: function (d) {
					var html = '<span style="color:#EE6666">✘</span>';
					if(d.delete_time == '-')
						html = '<span style="color:#91CC75">✔</span>';
					return html;
				}}				
			, {title: '操作',fixed: 'right', align: 'center', width: 60, rowspan: 2, templet: function (d) {
					var html = '<span class="layui-btn layui-btn-xs" lay-event="recover">恢复</span>';
					if(d.delete_time == '-')
						html = '<span class="layui-btn layui-btn-danger layui-btn-xs" lay-event="remove">移除</span>';
					return html;
				}
			}
		], [
			{ field: 'schedules', align: 'center', style: 'color: #91CC75;', width: 72, 'title': '记录' }
			, { field: 'labor_times', align: 'center', style: 'color: #4285F4;', width: 70, 'title': '工时' }
			, { field: 'tasks_unfinish', align: 'center', style: 'color: #91CC75;', width: 72, 'title': '进行中' }
			, { field: 'tasks_finish', align: 'center', style: 'color: #FAC858;', width: 70, 'title': '已完成' }
			, { field: 'tasks_pensent', align: 'center', style: 'color: #EE6666;', width: 72, 'title': '完成率' }
		]]
	});
	
	//触发事件
	table.on('toolbar(user)', function(obj){
		var checkStatus = table.checkStatus(obj.config.id);
		switch(obj.event){
			case 'add':
			  employeepicker.init({
				type: 0,
				department_url: "/api/index/get_department_tree",
				employee_url: "/api/index/get_employee",
				callback: function (ids, names, dids, departments) {
					let callback = function (e) {
						layer.msg(e.msg);
						if(e.code == 0){
							layui.userTable.reload();
						}						
					}
					tool.post("/project/api/add_user", {uid: ids,project_id: project_id}, callback);
				}
			})			
			break;
		};
	});

	//监听行工具事件
	table.on('tool(user)', function (obj) {
		let postData = { "id": obj.data.id };
		let callback = function (e) {
				layer.closeAll();
				layer.msg(e.msg);
				if(e.code == 0){
					layui.userTable.reload();
				}
			}
		if (obj.event === 'remove') {
			layer.confirm('确定要移除该项目成员吗?', { icon: 3, title: '提示' }, function (index) {
				tool.delete("/project/api/remove_user", postData, callback);
			});
		}
		if (obj.event === 'recover') {
			layer.confirm('确定要恢复该项目成员吗?', { icon: 3, title: '提示' }, function (index) {
				tool.post("/project/api/recover_user", postData, callback);
			});
		}
		return;
	});
}
</script>