forked from kidgrow-microservices-platform

zhaoxiaohao
2020-04-10 7cff4ee2f9c812721e64c93d7094204eacdb4ed9
添加公司管理的功能页面
1 files added
419 ■■■■■ changed files
kidgrow-web/kidgrow-web-manager/src/main/resources/static/pages/opration/company.html 419 ●●●●● patch | view | raw | blame | history
kidgrow-web/kidgrow-web-manager/src/main/resources/static/pages/opration/company.html
New file
@@ -0,0 +1,419 @@
<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="app-edit-search" class="layui-input search-input" type="text" placeholder="请输入公司名称" />&emsp;
            <button id="app-btn-search" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索</button>
            <button id="user-btn-add" class="layui-btn icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>
        </div>
        <!-- 数据表格 -->
        <table class="layui-table" id="app-table" lay-filter="app-table"></table>
    </div>
</div>
<!-- 表格操作列 -->
<script type="text/html" id="company-table-bar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看详情</a>
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="del">删除</a>
</script>
<!-- 表格状态列 -->
<script type="text/html" id="company-tpl-state">
    <input type="checkbox" lay-filter="company-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">
                <select  id="tenantId" name="tenantId"   placeholder="选择一个应用" >
                    <option value="">-请选择-</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选择组织</label>
            <div class="layui-input-block">
                <select  id="orgId" name="orgId"   placeholder="选择一个应用" >
                    <option value="">-请选择-</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">公司名称</label>
            <div class="layui-input-block">
                <input name="companyName"  type="text" class="layui-input" maxlength="20"
                       lay-verify="required" required />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所在地区</label>
            <div class="layui-input-block">
                <select  id="sheng" name="companyArea"   placeholder="省份" lay-filter="sheng">
                    <option value="">-请选择-</option>
                </select>
                <select  id="shi" name="companyArea"   placeholder="城市" lay-filter="shi">
                    <option value="">-请选择-</option>
                </select>
                <select  id="xian" name="companyArea"   placeholder="区县" >
                    <option value="">-请选择-</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">联系电话</label>
            <div class="layui-input-block">
                <input name="companyTel"  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 name="companyAdress"  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">
                <button type="button" class="layui-btn" id="phonto">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                  </button>
                <input name="companyLogo" id="doctorLogo-add"  type="hidden" class="layui-input" maxlength="20"/>
                <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                    预览图:
                    <div class="layui-upload-list" id="demo2"></div>
                </blockquote>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">公司简介</label>
            <div class="layui-input-block">
                <input name="companyAbout"  type="text" 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', 'upload', 'util', 'config', 'admin'], 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;
        //上传
        var upload = layui.upload;
        // 获取应用列表
        // layer.load(2);
        admin.req('api-user/users/findAll', {}, function (data) {
            layer.closeAll('loading');
            if (0 === data.code) {
                let selected = false;
                clientsAll = data.data;
                $.each(data.data, function (index, item) {
                    if (config.clientId === item.clientId) {
                        selected = true;
                    } else {
                        selected = false;
                    }
                    //往下拉菜单里添加元素
                    $('#role_clients').append(new Option(item.username, item.id, false, selected));
                })
                form.render();
            } else {
                layer.msg(data.msg, { icon: 2, time: 500 });
            }
        }, 'Post');
        //时间格式
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem: '#test1' //指定元素
        });
        laydate.render({
            elem: '#test2' //指定元素
        });
        // 渲染表格
        table.render({
            elem: '#app-table',
            url: config.base_server + 'api-user/syscompany',
            method: 'GET',
            headers: { 'Authorization': 'Bearer ' + config.getToken().access_token },
            page: true,
            cols: [[
                { type: 'numbers' },
                { field: 'companyName', width: 180, sort: true, title: '公司名称' },
                { field: 'sheng', width: 200, sort: true, title: '省' },
                { field: 'shi', width: 180, sort: true, title: '市' },
                { field: 'xian', width: 300, sort: true, title: '区县' },
                { field: 'companyTel', width: 250, align: 'center', sort: true, title: '联系方式' },
                { field: 'tenantId', width: 250, align: 'center', sort: true, title: '应用' },
                { field: 'enabled', width: 250, align: 'center', templet: '#company-tpl-state', sort: true, title: '状态' },
                { field: 'createTime', width: 250, sort: true, title: '时间', templet: "<div>{{layui.util.toDateString(d.createTime, 'yyyy年MM月dd日 HH:mm:ss')}}</div>" },
                { field: 'id', width: 250, align: 'center', toolbar: '#company-table-bar', sort: true, title: '操作' },
            ]]
        });
        // 修改company状态
        form.on('switch(company-tpl-state)', function (obj) {
            layer.load(2);
            admin.req('api-user/syscompany/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: 500 });
                    //table.reload('table-user', {});
                } else {
                    layer.msg(data.msg, { icon: 2, time: 500 });
                    $(obj.elem).prop('checked', !obj.elem.checked);
                    form.render('checkbox');
                }
            }, 'GET');
        });
        /**
         *
         *
         */
        //获取省份
        var getSheng = function (obj, id) {
            admin.req('api-user/sysarea/getListByMap', { area_leveltype: obj }, function (data) {
                layer.closeAll('loading');
                if (0 === data.code) {
                    let selected = false;
                    clientsAll = data.data;
                    $.each(data.data, function (index, item) {
                        if (config.clientId === item.clientId) {
                            selected = true;
                        } else {
                            selected = false;
                        }
                        //往下拉菜单里添加元素
                        $('#' + id).append(new Option(item.areaName, item.id, false, selected));
                    })
                    form.render();
                } else {
                    layer.msg(data.msg, { icon: 2, time: 500 });
                }
            }, 'GET');
        }
        form.on('select(sheng)', function (data) {
            getShi_and_xian(data.value, "shi");
        });
        form.on('select(shi)', function (data) {
            getShi_and_xian(data.value, "xian");
        });
        var getShi_and_xian = function (obj, id) {
            admin.req('api-user/sysarea/getListByMap', { area_parent_id: obj }, function (data) {
                layer.closeAll('loading');
                if (0 === data.code) {
                    let selected = false;
                    $('#' + id).empty();
                    $.each(data.data, function (index, item) {
                        if (config.clientId === item.clientId) {
                            selected = true;
                        } else {
                            selected = false;
                        }
                        //往下拉菜单里添加元素
                        $('#' + id).append(new Option(item.areaName, item.id, false, selected));
                    })
                    form.render();
                } else {
                    layer.msg(data.msg, { icon: 2, time: 500 });
                }
            }, 'GET');
        }
        /**
         *
         *
         */
        //获取租户
        var gettenantId = function () {
            admin.req('api-uaa/clients/all', {}, function (data) {
                layer.closeAll('loading');
                if (0 === data.code) {
                    let selected = false;
                    clientsAll = data.data;
                    $.each(data.data, function (index, item) {
                        if (config.clientId === item.clientId) {
                            selected = true;
                        } else {
                            selected = false;
                        }
                        //往下拉菜单里添加元素
                        $('#tenantId').append(new Option(item.clientName, item.clientId, false, selected));
                    })
                    form.render();
                } else {
                    layer.msg(data.msg, { icon: 2, time: 500 });
                }
            }, 'GET');
        }
        //获取组织
        var getorganization = function () {
            admin.req('api-user/sysorganization/getListByMap', { org_attr: 0 }, function (data) {
                layer.closeAll('loading');
                if (0 === data.code) {
                    let selected = false;
                    clientsAll = data.data;
                    $.each(data.data, function (index, item) {
                        if (config.clientId === item.clientId) {
                            selected = true;
                        } else {
                            selected = false;
                        }
                        //往下拉菜单里添加元素
                        $('#orgId').append(new Option(item.orgName, item.id, false, selected));
                    })
                    form.render();
                } else {
                    layer.msg(data.msg, { icon: 2, time: 500 });
                }
            }, 'GET');
        }
        // 工具条点击事件
        table.on('tool(app-table)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            if (layEvent === 'detail') { // 查看详情
                showEditModel(data, 2);
            } else if (layEvent === 'edit') {
                showEditModel(data, 3);
            } else if (layEvent === 'del') {
                layer.confirm('确定删除此用户吗?', function (i) {
                    layer.close(i);
                    layer.load(2);
                    admin.req('api-user/syscompany/' + obj.data.id, {}, function (data) {
                        layer.closeAll('loading');
                        if (data.code == 0) {
                            layer.msg(data.msg, { icon: 1, time: 500 });
                            table.reload('app-table', {});
                        } else {
                            layer.msg(data.msg, { icon: 2, time: 500 });
                        }
                    }, 'delete');
                });
            }
        });
        // 添加按钮点击事件
        $('#user-btn-add').click(function () {
            showEditModel(undefined, 1);
        });
        // 搜索按钮点击事件
        $('#app-btn-search').click(function () {
            var companyName = $('#app-edit-search').val();
            table.reload('app-table', { where: { companyName: companyName } });
        });
        // // 显示编辑弹窗
        var showEditModel = function (data, index) {
            var title = ""
            if (index == 1) {
                title = "新增"
            } else if (index == 2) {
                title = "查看详情"
            }
            else if (index == 3) {
                title = "修改"
            }
            layer.open({
                type: 1,
                title: title,
                area: '450px',
                offset: '120px',
                content: $('#app-model').html(),
                success: function () {
                    $('#app-form')[0].reset();
                    $('#app-form').attr('method', 'POST');
                    //将租户的填充
                    gettenantId();
                    //将组织填充
                    getorganization();
                    //将省份填充
                    getSheng(1, "sheng");
                    // getSheng(2, "shi");
                    // getSheng(3, "xian");
                    //图片
                    upload.render({
                        elem: '#phonto',
                        url: config.base_server + 'api-file/files-anon',
                        accept: 'file',
                        auto: true,
                        headers: { "Authorization": "Bearer " + config.getToken().access_token },
                        before: function (obj) {
                            layer.load(); //上传loading
                            //预读本地文件示例,不支持ie8
                            obj.preview(function (index, file, result) {
                                $(".layui-upload-img").remove();
                                $('#demo2').append('<img src="' + result + '" width="50px" height="50px" alt="' + file.name + '" class="layui-upload-img">')
                            });
                        },
                        done: function (data) {
                            layer.closeAll('loading');
                            $("#doctorLogo-add").val(data.url);
                        },
                        error: function (data) {
                            layer.closeAll('loading');
                        }
                    });
                    if (data) {
                        if (index == 2) {
                            $('#app-form').find('input').attr('readonly', true);
                            $('#app-form').find('select,input[type="radio"]').attr('disabled', true);
                            $('#sure').hide();
                        }
                        form.val('app-form', data);
                        $('#sheng').val(data.shengId);
                        getShi_and_xian(data.shengId,"shi")
                        $('#shi').val(data.shiId);
                        getShi_and_xian(data.shiId,"xian")
                        $('#xian').val(data.xianId);
                        $('#app-form').attr('method', 'POST');
                    } else {
                    }
                }
            });
        };
        form.on('submit(user-form-submit)', function (data) {
            layer.load(2);
            data.field.hospitalId = parseInt(data.field.hospitalId);
            admin.req('api-user/syscompany', JSON.stringify(data.field), function (data) {
                layer.closeAll('loading');
                if (data.code == 0) {
                    layer.closeAll();
                    table.reload('app-table', {});
                } else {
                    layer.msg(data.msg, { icon: 2, time: 500 });
                }
            }, "POST");
            return false;
        });
    });
</script>