添加第三方接口的页面

zhaoxiaohao

2020-10-22 a52de7e49907fcec28a49b81d2489f5b73c3f4e9

添加第三方接口的页面

 kidgrow-web/kidgrow-web-manager/src/main/resources/static/pages/opration/equipmentDocking.html

New file
@@ -0,0 +1,352 @@
<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 name="hospitalName" id="hospitalName-serch" placeholder="按医院名称" type="text"
                    class="layui-input search-input" maxlength="50" autocomplete="off" />&emsp;
                    <input type="hidden" id="hospitalId-serch" />
            <select id="departmentId-serch" lay-filter="department_clients">
                <option value="">--科室--</option>
            </select>&emsp;
            <button id="app-btn-search" class="layui-btn icon-btn permissions" permissions="equipmentDocking-list"><i class="layui-icon">&#xe615;</i>搜索</button>
            <button id="docto-templete-btn-add" class="layui-btn icon-btn permissions" permissions="equipmentDocking-edit"><i class="layui-icon">&#xe654;</i>添加</button>
        </div>

        <!-- 数据表格 -->
        <table class="layui-table permissions" permissions="equipmentDocking-list" id="app-table" lay-filter="app-table"></table>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="equipment-docking-bar">
    <a class="layui-btn layui-btn-primary layui-btn-xs permissions" permissions="equipmentDocking-edit"  lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-xs permissions" permissions="equipmentDocking-del"  lay-event="del">删除</a>
</script>
<!-- 表格状态列 -->
<script type="text/html" id="equipment-docking-state">
    <input type="checkbox" lay-filter="equipment-docking-state" value="{{d.id}}" lay-skin="switch" lay-text="正常|锁定"
           {{d.enabled==true?'checked':''}} class="permissions" permissions="equipmentDocking-enable"/>
</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" style="width: 75px;">所在医院</label>
            <div class="layui-input-block" style="width: 150px;">
                <input name="hospitalName" id="hospitalName" placeholder="请输入医院名称" type="text" class="layui-input"
                    maxlength="50" lay-verify="required" required style="width: 150px;" />
                <input type="hidden" name="hospitalId" id="hospitalId" />
                <input type="hidden" name="id" id="id" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">科室</label>
            <div class="layui-input-block" style="width: 150px;">
                <input name="departName" id="departmentName" placeholder="请选择科室" type="hidden"
                    class="layui-input" maxlength="20" />
                <select id="departmentId" name="departId" lay-filter="departmentId" placeholder="请选择科室"
                    lay-verify="required" required>
                    <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" lay-verify="required" required  type="text" class="layui-input" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">设备型号</label>
            <div class="layui-input-block">
                <input name="unitType" lay-verify="required" required type="text" class="layui-input" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">设备品牌</label>
            <div class="layui-input-block">
                <input name="equipmentBrand" lay-verify="required"  required type="text" class="layui-input" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">设备电脑机器码</label>
            <div class="layui-input-block">
                <input name="machineCode" lay-verify="required" required type="text" class="layui-input" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">安装日期</label>
            <div class="layui-input-block">
                <input type="text" name="createTime" class="layui-input search-input" lay-verify="required" required id="startTime" placeholder="开始时间">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">安装联系人</label>
            <div class="layui-input-block">
                <input name="contactName" lay-verify="required" required type="text" class="layui-input" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">安装联系人电话</label>
            <div class="layui-input-block">
                <input name="contactPhone" lay-verify="required|phone" required type="text" class="layui-input" />
            </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="equipmentDocking-form-submit" permissions="	
            equipmentDocking-edit" lay-submit>保存</button>
        </div>
    </form>
</script>


<script>
    layui.use(['form', 'table', 'laydate', 'util','autocomplete','laydate', '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 autocomplete = layui.autocomplete;
        var laydate = layui.laydate;
        //自动完成-医院名称
        autocomplete.render({
            elem: $('#hospitalName-serch')[0],
            keywordsName: 'hospitalName', //查询关键字名称
            url: config.base_server + 'api-user/syshospital/findByName',
            template_val: '{{d.hospitalName}}', //选择后文本框显示的数据字段
            template_txt: "<div class='layui-table-cell'>{{d.hospitalName}}</div>", //下拉列表模板
            onselect: function (resp) {

                $("#hospitalId-serch").val(resp.id);
                //重新装载科室
                getdepartmentSerch(resp.id);
            }
        });
        //获取科室
        var getdepartmentSerch = function (data) {
            admin.req('api-user/sysdepartment/findListByHospitalId', {
                id: data
            }, function (data) {
                layer.closeAll('loading');
                if (0 === data.code) {
                    department = data.data;
                    $('#departmentId-serch').empty();
                    if (data.data.length > 0) {
                        $('#departmentName-serch').val(data.data[0].departmentName);
                        $('#departmentId-serch').append(new Option("请选择", "",
                            false, false));
                    }
                    $.each(data.data, function (index, item) {
                        //往下拉菜单里添加元素
                        $('#departmentId-serch').append(new Option(item.departmentName, item.id,
                            false, false));
                        form.render('select', 'app-form');
                    })
                    form.render();
                } else {
                    layer.msg(data.msg, {
                        icon: 2,
                        time: 2000
                    });
                }
            }, 'get');
        }
         
        // 添加按钮点击事件
        $('#docto-templete-btn-add').click(function () {
            showEditModel(undefined, 1);
        });
        //// 刷新
        $('#docto-templete-btn-update').click(function () {
            table.reload('app-table', { where: {} });
        });
       

        // 渲染表格
        table.render({
            elem: '#app-table',
            url: config.base_server + 'api-opration/equipmentdocking',
            method: 'GET',
            headers: { 'Authorization': 'Bearer ' + config.getToken().access_token },
            page: true,
            cols: [[
                { field: 'hospitalName',align:'center', width: '10%', title: '医院名称' },
                // { field: 'hospitalId',align:'center', width: '10%', title: '医院唯一标识' },
                { field: 'departName',align:'center', width: '10%', title: '科室名称' },
                // { field: 'departId',align:'center', width: '10%', title: '科室唯一标识' },
                { field: 'companyName',align:'center', width: '5%', title: '设备厂家名称' },
                { field: 'unitType',align:'center', width: '10%', title: '设备型号' },
                { field: 'equipmentBrand',align:'center', width: '5%', title: '设备品牌' },
                { field: 'machineCode',align:'center', width: '10%', title: '设备电脑机器码' },
                { field: 'createTime',align:'center', width: '10%', title: '安装日期',templet: "<div>{{layui.util.toDateString(d.createTime, 'yyyy/MM/dd')}}</div>" },
                { field: 'contactName',align:'center', width: '5%', title: '安装联系人' },
                { field: 'contactPhone',align:'center', width: '5%', title: '安装联系人电话' },
                { field: 'enabled',align:'center', width: '5%', templet: '#equipment-docking-state', title: '状态'},
                { field: 'outAccesskey',align:'center', width: '10%', title: 'AccessKey' },
                { field: 'id',align:'center', width: '10%', toolbar: '#equipment-docking-bar', title: '操作',fixed: 'right' },
            ]],
            done: function(res){
                permissionsInput(res,config);
            }
        });
         
        //获取科室
        var getdepartment = function (data) {
            admin.req('api-user/sysdepartment/findListByHospitalId', {
                id: data
            }, function (data) {
                layer.closeAll('loading');
                if (0 === data.code) {
                    department = data.data;
                    $('#departmentId').empty();
                    if (data.data.length > 0) {
                        $('#departmentName').val(data.data[0].departmentName);
                    }
                    $.each(data.data, function (index, item) {
                        //往下拉菜单里添加元素
                        $('#departmentId').append(new Option(item.departmentName, item.id,
                            false, false));
                        form.render('select', 'app-form');
                    })
                    form.render();
                } else {
                    layer.msg(data.msg, {
                        icon: 2,
                        time: 2000
                    });
                }
            }, 'get');
        }
        // 工具条点击事件
        table.on('tool(app-table)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            if (layEvent === 'edit') { // 查看详情
                showEditModel(data, 2);
            }else if(layEvent === 'del'){
                layer.confirm('确定删除此用户吗？', function (i) {
                    layer.close(i);
                    layer.load(2);
                    admin.req('api-opration/equipmentdocking/' + obj.data.id, {}, function (data) {
                        layer.closeAll('loading');
                        if (data.code == 0) {
                            layer.msg(data.msg, { icon: 1, time: 2000 });
                            table.reload('app-table', {});
                        } else {
                            layer.msg(data.msg, { icon: 2, time: 2000 });
                        }
                    }, 'delete');
                });
            }
        });

        // 搜索按钮点击事件
        $('#app-btn-search').click(function () {
            var departId = $('#departmentId-serch').val();
            var hospitalId = $('#hospitalId-serch').val();
            var templeteTitle = $('#templeteTitle').val();
            table.reload('app-table', { where: { hospitalId: hospitalId, departId: departId } });
        });

        // 修改user状态
        form.on('switch(equipment-docking-state)', function (obj) {
            layer.load(2);
            admin.req('api-opration/equipmentdocking/update', JSON.stringify({
                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 });
                    table.reload('app-table', {});
                } else {
                    layer.msg(data.msg, { icon: 2, time: 2000 });
                    $(obj.elem).prop('checked', !obj.elem.checked);
                    form.render('checkbox');
                }
            }, 'POST');
        });

        // 表单提交事件
        form.on('submit(equipmentDocking-form-submit)', function (data) {
            layer.load(2);
            admin.req('api-opration/equipmentdocking', JSON.stringify(data.field), function (data) {
                layer.closeAll('loading');
                if (data.code == 0) {
                    // layer.msg(data.msg, { icon: 1, time: 2000 });
                    layer.closeAll();
                    table.reload('app-table', {});
                } else {
                    layer.msg(data.msg, { icon: 2, time: 2000 });
                }
            }, "POST");
            return false;
        });
        // // 显示编辑弹窗
        var showEditModel = function (data, index) {
            var title = "";
            if (index == 1) {
                title = "新增";
            } else if (index == 2) {
                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');
                    if (data) {
                        if(index==1){
                            $('#sure').hide();
                        }
                        form.val('app-form', data);
                        console.log(data,"1111111111111")
                         //重新装载科室
                        getdepartment(data.hospitalId);
                        form.render();
                    }
                    //自动完成-医院名称
                    autocomplete.render({
                        elem: $('#hospitalName')[0],
                        keywordsName: 'hospitalName', //查询关键字名称
                        url: config.base_server + 'api-user/syshospital/findByName',
                        template_val: '{{d.hospitalName}}', //选择后文本框显示的数据字段
                        template_txt: "<div class='layui-table-cell'>{{d.hospitalName}}</div>", //下拉列表模板
                        onselect: function (resp) {

                            $("#hospitalId").val(resp.id);
                            //重新装载科室
                            getdepartment(resp.id);
                        }
                    });
                    //执行一个laydate实例
                    laydate.render({
                        elem: '#startTime' //指定元素
                        ,type: 'datetime'
                    });
                    //新增 和  更新   科室触发的事件
                    form.on('select(departmentId)', function () {
                        //将部门名称赋值
                        $('#departmentName').val($(this)[0].innerHTML);
                    });
                   
                }
            });
        };
    });
</script>