caiping/app/admin/view/project/cost_proprietor/project_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>-->
<!--        <button class="layui-btn layui-btn-sm" lay-event="adda">+ 新增施工单位成员</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;
        //项目成员
        parent.layui.userTable = table.render({
            elem: '#user',
            title: '项目成员列表',
            cellMinWidth: 80,
            toolbar: '#toolbaruser',
            url: "/admin/project.cost/project_user", //数据接口
            where: {'project_id': project_id},
            page: false, //开启分页
            limit: 20,
            cols: [[ //表头
                {field: 'nickname', fixed: 'left', title: '成员姓名', width: 200, align: 'center', rowspan: 2},
                {field: 'unit_name', title: '所在单位', align: 'center', width: 450, rowspan: 2},
                {field: 'unit_type', title: '单位类型', align: 'center', width: 200, rowspan: 2},
                {field: 'mobile', title: '手机号码', align: 'center', rowspan: 2},
                {field: 'email', title: '单位邮箱', align: 'center', rowspan: 2},
            ]]
        });

        //触发事件
        table.on('toolbar(user)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'add':
                    employeepicker.init({
                        type: 0,
                        department_url: "/admin/project.cost_company/get_yezhu_tree",
                        employee_url: "/admin/project.cost_company/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("/admin/project.cost_company/add_user", {
                                id: ids,
                                project_id: project_id,
                                type: 2
                            }, callback);
                        }
                    })
                    break;
                case "adda":
                    parent.layui.tool.side('/admin/project.cost/addconstructionpeople?project_id=' + project_id);
                    break;
            }

        });

        //监听行工具事件
        table.on('tool(user)', function (obj) {
            let postData = {"id": obj.data.id, "project_id": project_id, "type": obj.data.type};
            let callback = function (e) {
                layer.closeAll();
                layer.msg(e.msg);
                if (e.code == 0) {
                    layui.userTable.reload();
                }
            }
            if (obj.event === 'remove') {

                if (obj.data.type == 3 || obj.data.type == 4) {
                    console.log(postData);
                    layer.confirm('确定要移除该项目成员吗?', {icon: 3, title: '提示'}, function (index) {
                        tool.delete("/admin/project.cost_company/remove_user", postData, callback);
                    });
                } else {
                    layer.msg("该成员不可移除");
                }

            }
            if (obj.event === 'recover') {
                layer.confirm('确定要恢复该项目成员吗?', {icon: 3, title: '提示'}, function (index) {
                    tool.post("/project/api/recover_user", postData, callback);
                });
            }
            return;
        });
    }
</script>