forked from kidgrow-microservices-platform

zhaoxiaohao
2020-09-18 daa697719eb0ddfd170f1ab94c5422a4f5b93951
kidgrow-web/kidgrow-web-manager/src/main/resources/static/pages/opration/sysOrganization.html
New file
@@ -0,0 +1,298 @@
<div class="layui-card">
    <div class="layui-card-header">
        <h2 class="header-title">组织结构</h2>
        <span class="layui-breadcrumb pull-right">
            <a href="#!home_console">首页</a>
            <a><cite>组织结构</cite></a>
        </span>
    </div>
    <div class="layui-card-body">
        <div class="layui-form toolbar">
            <input id="orgName-search" class="layui-input search-input" type="text" placeholder="按名称" />&emsp;
            <button id="app-btn-search" class="layui-btn icon-btn permissions" permissions="sysorganization-list"><i class="layui-icon">&#xe615;</i>搜索</button>
            <!-- <button id="organization-add" class="layui-btn icon-btn permissions" permissions="sysorganization-edit"><i class="layui-icon">&#xe654;</i>添加</button> -->
        </div>
        <!-- 数据表格 -->
        <table class="layui-table" id="organization-table" lay-filter="organization-table"></table>
    </div>
</div>
<!-- 表格操作列 -->
<script type="text/html" id="organization-table-bar">
    <!-- <a class="layui-btn layui-btn-primary layui-btn-xs permissions" permissions="sysorganization-edit" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs permissions" permissions="sysorganization-del" lay-event="del">删除</a> -->
</script>
<!-- 表格状态列 -->
<script type="text/html" id="organization-tpl-state">
    <input type="checkbox" lay-filter="organization-tpl-state" value="{{d.id}}" lay-skin="switch" lay-text="正常|锁定"
           {{d.enabled==true?'checked':''}}/>
</script>
<!-- 表单弹窗 -->
<script type="text/html" id="app-model">
    <form id="app-form" lay-filter="app-form" class="layui-form model-form">
        <input name="id" type="hidden"/>
        <div class="layui-form-item">
            <label class="layui-form-label">请选择:</label>
            <div class="layui-input-block">
                <div id="orgParentId-tree" class="demo-tree demo-tree-box"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">上级组织:</label>
            <div class="layui-input-block">
                <input name="orgParentId" id="orgParentId" type="hidden" value="-1" class="layui-input" maxlength="20"/>
            <input name="orgParentName" id="orgParentName" type="text"  class="layui-input" maxlength="20"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">组织类型:</label>
            <div class="layui-input-block">
                <select id="doctorRankId" name="orgAttr"   placeholder="选择一个职称" >
                    <option value="">-请选择-</option>
                    <option value="0">集团</option>
                    <option value="1">公司/医院</option>
                    <option value="2">部门/科室</option>
                    <option value="3">子部门/子科室</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">组织层级:</label>
            <div class="layui-input-block">
                       <select  name="orgLevel" id='orgLevel' disabled="true" placeholder="选择一个职称" >
                        <option value="">-请选择-</option>
                        <option value="0">1级</option>
                        <option value="1">2级</option>
                        <option value="2">3级</option>
                        <option value="3">4级</option>
                        <option value="4">5级</option>
                        <option value="5">6级</option>
                        <option value="6">7级</option>
                        <option value="7">8级</option>
                        <option value="8">9级</option>
                    </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">组织名称:</label>
            <div class="layui-input-block">
                <input name="orgName"  type="text" class="layui-input" maxlength="20"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">组织状态:</label>
            <div class="layui-input-block">
                <input id="orgName-shi" name="enabled" value="true" title="启用" type="radio" class="layui-input" maxlength="20"/>
                <input id="orgName-fou" name="enabled" value="false" title="禁用" type="radio" class="layui-input" maxlength="20"/>
            </div>
        </div>
        <div class="layui-form-item model-form-footer">
            <button class="layui-btn layui-btn-primary"  ew-event="closeDialog" type="button">取消</button>
            <button class="layui-btn" id="sure" lay-filter="user-form-submit" lay-submit>保存</button>
        </div>
    </form>
</script>
<script>
    layui.use(['form', 'table', 'laydate', 'util', 'tree', 'config', 'admin', 'treetable'], function () {
        var form = layui.form;
        var table = layui.table;
        var config = layui.config;
        var layer = layui.layer;
        var util = layui.util;
        var admin = layui.admin;
        let treetable = layui.treetable;
        //树形插件
        var tree = layui.tree;
        var layer = layui.layer
            , $ = layui.jquery;
        // 渲染表格
        // 渲染表格
        var renderTable = function (param) {
            if (param) {
                param.access_token = config.getToken().access_token;
            } else {
                param = {
                    access_token: config.getToken().access_token
                };
            }
            treetable.render({
                treeColIndex: 1,
                treeSpid: -1,
                treeIdName: 'id',
                treePidName: 'orgParentId',
                elem: '#organization-table',
                url: config.base_server + 'api-user/sysorganization/getListByMap',
                where: param,
                page: false,
                cols: [[
                    { type: 'numbers' },
                    { field: 'orgName', minWidth: 200, title: '组织名称' },
                    {
                        field: 'orgAttr', align: 'right', title: '所属类型', templet: function (d) {
                            //节点属性(集团/公司/部门等,取值0,1,2,3,4)
                            if (d.orgAttr == 0) {
                                return "集团";
                            } else if (d.orgAttr == 1) {
                                return "公司/医院";
                            } else if (d.orgAttr == 2) {
                                return "部门/科室";
                            } else {
                                return "子部门/子科室";
                            }
                        }
                    },
                    // { field: 'enabled', align: 'right', sort: true, templet: '#organization-tpl-state', title: '状态' },
                    // { toolbar: '#organization-table-bar', align: 'right', align: 'center', title: '操作' }
                ]],
                done: function (res) {
                    permissionsInput(res,config);
                }
            });
        };
        renderTable({ access_token: config.clientId, is_del: 0 });
        // 工具条点击事件
        table.on('tool(organization-table)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            if (layEvent === 'edit') { // 查看详情
                showEditModel(data);
            } else if (layEvent === 'del') {
                layer.confirm('确定删除此组织吗?', function () {
                    layer.load(2);
                    let tenantId = $('#menu_clients').val();
                    admin.req('api-user/sysorganization/' + obj.data.id + '?tenantId=' + tenantId, {}, function (data) {
                        layer.closeAll('loading');
                        if (0 === data.code) {
                            layer.msg(data.msg, { icon: 1, time: 2000 });
                            renderTable({ tenantId: tenantId });
                        } else {
                            layer.msg(data.msg, { icon: 2, time: 2000 });
                        }
                    }, 'DELETE');
                });
            }
        });
        // 修改menu状态
        form.on('switch(organization-tpl-state)', function (obj) {
            layer.load(2);
            admin.req('api-user/sysorganization/updateEnabled', {
                id: obj.elem.value,
                enabled: obj.elem.checked ? true : false
            }, function (data) {
                layer.closeAll('loading');
                if (data.code == 0) {
                    layer.msg(data.msg, { icon: 1, time: 2000 });
                    renderTable({ access_token: config.clientId, is_del: 0 });
                } else {
                    layer.msg(data.msg, { icon: 2, time: 2000 });
                    $(obj.elem).prop('checked', !obj.elem.checked);
                    form.render('checkbox');
                }
            }, 'GET');
        });
        // 添加按钮点击事件
        $('#organization-add').click(function () {
            showEditModel();
        });
        // 表单提交事件
        form.on('submit(user-form-submit)', function (data) {
            layer.load(2);
            admin.req('api-user/sysorganization', JSON.stringify(data.field), function (data) {
                layer.closeAll('loading');
                if (data.code == 0) {
                    // layer.msg(data.msg, { icon: 1, time: 2000 });
                    layer.closeAll();
                    // treetable.reload('organization-table', {});
                    renderTable({ access_token: config.clientId, is_del: 0 });
                } else {
                    layer.msg(data.msg, { icon: 2, time: 2000 });
                }
            }, "POST");
            return false;
        });
        // 搜索按钮点击事件
        $('#app-btn-search').click(function () {
            var keyword = $('#orgName-search').val();
            var searchCount = 0;
            $('#organization-table').next('.treeTable').find('.layui-table-body tbody tr td').each(function () {
                $(this).css('background-color', 'transparent');
                var text = $(this).text();
                if (keyword !== '' && text.indexOf(keyword) >= 0) {
                    $(this).css('background-color', 'rgba(250,230,160,0.5)');
                    if (searchCount === 0) {
                        $('.layui-tab-item.layui-show').stop(true);
                        $('.layui-tab-item.layui-show').animate({ scrollTop: $(this).offset().top - 150 }, 500);
                    }
                    searchCount++;
                }
            });
            if (keyword !== '' && searchCount === 0) {
                layer.msg("没有匹配结果", { icon: 5, time: 2000 });
            } else {
                treetable.expandAll('#organization-table');
            }
        });
        var getData = function () {
            admin.req('api-user/sysorganization/getTree', { is_del: 0 }, function (data) {
                layer.closeAll('loading');
                var data1 = [{
                    name: '常用文件夹',
                    id: 1,
                    children: [
                        { name: '所有未读', id: 11 },
                        { name: '置顶邮件', id: 12 },
                        { name: '标签邮件', id: 13 }]
                }];
                if (0 === data.code) {
                    tree({
                        elem: "#orgParentId-tree",
                        nodes: data.data,
                        click: function (node) {
                            //将数据赋值
                            $("#orgParentId").val(node.id)
                            $("#orgParentName").val(node.name)
                            $("#orgLevel").val(node.level + 1)
                            form.render('select');
                        }
                    });
                } else {
                    layer.msg(data.msg, { icon: 2, time: 2000 });
                }
            }, 'get');
        }
        // // 显示编辑弹窗
        var showEditModel = function (data) {
            layer.open({
                type: 1,
                title: '查看详情',
                area: '450px',
                offset: '120px',
                content: $('#app-model').html(),
                success: function () {
                    $('#app-form')[0].reset();
                    $('#app-form').attr('method', 'POST');
                    getData();
                    if (data) {
                        //
                        form.val('app-form', data);
                        $("#orgParentId").val(data.orgParentId);
                        if (data.enabled) {
                            $("#orgName-shi").prop("checked", true);
                        } else {
                            $("#orgName-fou").prop("checked", true);
                        }
                    }
                }
            });
        };
    });
</script>