AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

个人工作总结前端-三分白

2023-03-27 97
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 个人工作总结前端-三分白 
layui-v2.5.6
https://wps.bcegc.com/view/l/t8vssk3
https://wps.bcegc.com/view/l/tcgm47b
Appointment:
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="./layui-v2.5.6/layui/css/layui.css"/>
    <link rel="stylesheet" href="./layui-v2.5.6/layui/css/myStyle.css"/>
</head>
<body>
    <p> 登录人：张飞  </p>  <button>退出</button> 
    <h1>请预约</h1>
    <select id = "ks" lay-verify="required">
        <option value="">请选择</option>
        <option value="1">内科</option>
        <option value="2">外科</option>
    </select>
    <select id = "mz" lay-verify="required">
        <option value="">请选择</option>
        <option value="1">心内科</option>
        <option value="2">胸外科</option>
    </select>
    <p>请选择预约时间</p>
    <div>请选择日期
        <div class="layui-input-inline">
        <input type="text" id="date" class="layui-input" placeholder="yyyy年MM月dd日"></p>
        </div>
    </div>
    <div> 请选择上午下午
        <select id = "shxia" lay-verify="required">
        <option value="">请选择</option>
        <option value="1">上午</option>
        <option value="2">下午</option>
    </select>
    </div>
    <div>
        <label class = "layui-form-label">请选择时间</label>
        <div class="layui-input-inline">
        <input type="text" id="time" class="layui-input" placeholder="H点m分"></p>
        </div>
    </div>
    <button id="search">查询医生</button>
    <table id="table" lay-filter="test-dropdown-table"/>
    <script type="text/html" id = "test-dropdown-toolbar-barDemo">
        <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="appoint">预约</a>
    </script>
</body>
<script src="./layui-v2.5.6/layui/layui.js"></script>
<script src="./layui-v2.5.6/layui/layui.all.js"></script>
<script>

    layui.use(['laydate', 'layer','table'],function(){
        $ = layui.jquery;
        var laydate =layui.laydate;
        var table =layui.table;
        var layer =layui.layer;
        laydate.render({
            elem:'#date',
            min:0,
            max:6
        });
        laydate.render({
            elem:'#time',
            type:'time',
            min:'08:00:00',
            max:"17:00:00",
            format:'H:m'
        });
        var tempdata = [{id:'1', photo:'a.jpg', doctor:'ZHANGFI', grade:'专家',num:3}]
        $('#search').click(function(){
            table.render({
                elem:'#table',
                title:'预约',
                data:tempdata,
                cols:[[
                    {fixed:'left', type:'checkbox'},
                    {field:'doctor', title:'医生'},
                    {field:'photo', title:'照片'},
                    {field:'grade', title:'登记'},
                    {field:'num', title:'号码'},
                    {fixed:'right', title:'操作', toolbar:'#test-dropdown-toolbar-barDemo'}
                ]]
            });
        })
        
        table.on('tool(test-dropdown-table)', function(obj){
            var data = obj.data;
            if(obj.event === 'appoint'){
                layer.open({
                    type:1,
                    title:'预约',
                    content:'确定吗',
                    maxmin:true,
                    area:['400px','300px'],
                    btn:['确定','取消'],
                    success:function(){},
                    btn1:function(index, layero){
                        alert('预约成功');
                        layer.close(index);
                        window.location.href="./appointmented.html"
                    },
                    btn2:function(){
                        alert('quxiao ')
                    },
                    end:function(p1, p2){
                    },
                })
            
            }
        })
    })
</script>
</html>
Appointmented:
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="./layui-v2.5.6/layui/css/layui.css"/>
    <link rel="stylesheet" href="./layui-v2.5.6/layui/css/myStyle.css"/>
</head>
<body>
    <table class="layui-table">
        <thead>
            <tr>
                <th lay-data="">科室</th>
                <th lay-data="">医生</th>
                <th lay-data="">时间</th>
                <th lay-data="">编号</th>
                <th lay-data="">费用</th>
                <th lay-data="">状态</th>
                <th lay-data="">操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td lay-data="">内科</td>
                <td lay-data="">关羽</td>
                <td lay-data="">2019-2-2</td>
                <td lay-data="">4</td>
                <td lay-data="">200</td>
                <td lay-data="">预约成功</td>
                <td lay-data=""><button id="cancel">取消预约</button></td>
            </tr>
            <tr>
                <td lay-data="">内科</td>
                <td lay-data="">关羽</td>
                <td lay-data="">2019-2-2</td>
                <td lay-data="">4</td>
                <td lay-data="">200</td>
                <td lay-data="">预约失败</td>
                <td lay-data="">请重新预约</button></td>
            </tr>
        </tbody>
    </table>

<body>
<script src="./layui-v2.5.6/layui/layui.js"></script>
<script src="./layui-v2.5.6/layui/layui.all.js"></script>
<script>
    layui.use(['table'], function(){
        $ = layui.jquery;
        var table = layui.table;
        $("#cancel").click(function(){
            var id =${this}.attr("id");
            layer.open({
                    type:1,
                    title:'取消预约',
                    content:'确定取消吗',
                    maxmin:true,
                    area:['400px','300px'],
                    btn:['确定','取消'],
                    success:function(){},
                    btn1:function(index, layero){
                        alert('取消成功');
                        layer.close(index);
                    },
                    btn2:function(){
                        alert('quxiao ')
                    },
                    end:function(p1, p2){
                    },
                })
            
        })
    })
</script>
</html>
backhome:
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="./layui-v2.5.6/layui/css/layui.css"/>
    <link rel="stylesheet" href="./layui-v2.5.6/layui/css/mystyle.css"/>
</head>
<body>
    <h1 class="head">医院管理系统</h1>
    <section class="content">
        <section class="left">
            <ul class="layui-nav layui-nav-tree layui-bg-cyan layui-inline" lay-filter="demo">
      <li class="layui-nav-item layui-nav-itemed">
        <a href="javascript:;">科室与医生</a>
                    <dl class = "layui-nav-child">
                        <dd><a href="./page/card.html" target="myFrame" class="layui-this">科室与门诊</a></dd>
                        <dd><a href="./page/doctor.html" target="myFrame">医生查看</a></dd>
                        <dd><a href="./page/scheduling.html" target="myFrame">排班查看</a></dd>
                    </dl>
                </li>
                <li class = "layui-nav-item">
                    <a href="javascript:;">就诊人信息管理</a>
                    <dl class = "layui-nav-child">
                        <dd><a href="./page/patient.html" target="myFrame">就诊人查看</a></dd>
                    </dl>
                </li>
            </ul>
        </section>
        <section class="right">
            frameLabelStart--frameLabelEnd 
        </section>
    </section>
</body>
<script src="./layui-v2.5.6/layui/layui.js"></script>
<script src="./layui-v2.5.6/layui/layui.all.js"></script>
</html>
Card
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="../layui-v2.5.6/layui/css/layui.css"/>
    <link rel="stylesheet" href="../layui-v2.5.6/layui/css/myStyle.css"/>
</head>
<body>
    <div class="layui-bg-gray" style="padding:30px">
        <div class = "layui-row layui-col-space15">
            <div class = "layui-col-md2">
                <div class = "layui-card">
                    <div class = "layui-card-body">
                        <ul class="active">
                            <li>门诊名称：内科</li>
                            <li>门诊编号：1</li>
                            <li>门诊费用：5</li>
                        </ul>
                        <p><a href="./card1.html">详细</a></p>
                    </div>
                </div>
            </div>
            <div class = "layui-col-md2">
                <div class = "layui-card">
                    <div class = "layui-card-body">
                        <ul class="active">
                            <li>门诊名称：外科</li>
                            <li>门诊编号：1</li>
                            <li>门诊费用：5</li>
                        </ul>
                        <p><a href="./card1.html">详细</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
Card1:
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="../layui-v2.5.6/layui/css/layui.css"/>
    <link rel="stylesheet" href="../layui-v2.5.6/layui/css/myStyle.css"/>
</head>
<body>
    <div class="layui-bg-gray" style="padding:30px">
        <div class = "layui-row layui-col-space15">
            <div class = "layui-col-md2">
                <div class = "layui-card">
                    <div class = "layui-card-body">
                        <ul class="active">
                            <li>门诊名称：内科</li>
                            <li>门诊编号：1</li>
                            <li>门诊费用：5</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
Doctor:
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="../layui-v2.5.6/layui/css/layui.css"/>
    <link rel="stylesheet" href="../layui-v2.5.6/layui/css/myStyle.css"/>
</head>
<body>
    <table class="layui-hide doctors" id="test-dropdown-table" lay-filter="test-dropdown-table"/>
    <div class="paiban" style="display:none">
        <p><span>排班日期：</span>
        <input type="text" id="date" class="layui-input" placeholder="yyyy年MM月dd日"></p>
        <p><span>排班号码：</span>
        <input type="number" class="layui-input"></p>
    </div>
    <script type="text/html" id = "test-dropdown-toolbar-barDemo">
        <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="paiban">排班</a>
    </script>
</body>
<script src="../layui-v2.5.6/layui/layui.js"></script>
<script src="../layui-v2.5.6/layui/layui.all.js"></script>
<script>

    layui.use(['laydate', 'layer','table'],function(){
        $ = layui.jquery;
        var laydate =layui.laydate;
        var table =layui.table;
        var layer =layui.layer;
        laydate.render({
            elem:'#date',
            min:0,
            max:6
        });
        table.render({
            elem:'#test-dropdown-table',
            title:'医生',
            data:[{id:'1', department:'内科', doctor:'ZHANGFI', level:'专家'}],
            cols:[[
                {fixed:'left', type:'checkbox'},
                {field:'department', title:'门诊'},
                {field:'doctor', title:'医生'},
                {field:'level', title:'登记'},
                {fixed:'right', title:'操作', toolbar:'#test-dropdown-toolbar-barDemo'}
            ]],
            limits:[3],
            page:true
        });
        table.on('tool(test-dropdown-table)', function(obj){
            var data = obj.data;
            if(obj.event === 'paiban'){
                layer.open({
                    type:1,
                    title:'PAIBAN',
                    content:$('.paiban'),
                    maxmin:true,
                    area:['400px','300px'],
                    btn:['排班','取消'],
                    success:function(){},
                    btn1:function(index, layero){
                        alert('排班成功');
                        layer.close(index)
                    },
                    btn2:function(){
                        alert('quxiao ')
                    },
                    end:function(p1, p2){
                    },
                })
            
            }
        })
    })
</script>
</html>
Patient:
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="../layui-v2.5.6/layui/css/layui.css"/>
    <link rel="stylesheet" href="../layui-v2.5.6/layui/css/myStyle.css"/>
</head>
<body>
    <section>
    <button id="addpatient" class="layui-btn layui-btn-warm">添加就诊人</button>
    <table class="layui-hide doctors" id="test-dropdown-table" lay-filter="test-dropdown-table"/>
    </section>
    <div class="patientinfo" style="display:none">
        <p><span>就诊人：</span>
        <input type="text" id="patient" class="layui-input"></p>
        <p><span>电话号码：</span>
        <input type="number" id="phone" class="layui-input"></p>
        <p><span>身份证：</span>
        <input type="number" id="sfz" class="layui-input"></p>
    </div>
    <script type="text/html" id = "test-dropdown-toolbar-barDemo">
        <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="delete">删除</a>
    </script>
</body>
<script src="../layui-v2.5.6/layui/layui.js"></script>
<script src="../layui-v2.5.6/layui/layui.all.js"></script>
<script>

    layui.use(['laydate', 'layer','table'],function(){
        $ = layui.jquery;
        var table =layui.table;
        var layer =layui.layer;
        table.render({
            elem:'#test-dropdown-table',
            title:'就诊人',
            data:[{id:'1', patient:'关羽', phone:188828, sfz:12212212}],
            cols:[[
                {fixed:'left', type:'checkbox'},
                {field:'patient', title:'就诊人'},
                {field:'phone', title:'电话'},
                {field:'sfz', title:'身份证'},
                {fixed:'right', title:'操作', toolbar:'#test-dropdown-toolbar-barDemo'}
            ]],
            limits:[3],
            page:true
        });
        table.on('tool(test-dropdown-table)', function(obj){
            var data = obj.data;
            $('#patient').val(data.patient);
            $('#phone').val(data.phone);
            $('#sfz').val(data.sfz);
            if(obj.event === 'edit'){
                layer.open({
                    type:1,
                    title:'编辑',
                    content:$('.patientinfo'),
                    maxmin:true,
                    area:['400px','300px'],
                    btn:['确定','取消'],
                    success:function(){},
                    btn1:function(index, layero){
                        alert('编辑成功');
                        layer.close(index)
                    },
                    btn2:function(){
                        alert('quxiao ')
                    },
                    end:function(p1, p2){
                    },
                })
            
            }else if(obj.event === 'delete'){
                layer.open({
                    type:0,
                    title:'删除',
                    content:'确定删除吗',
                    maxmin:true,
                    area:['400px','300px'],
                    btn:['确定','取消'],
                    success:function(){},
                    btn1:function(index, layero){
                        alert('删除成功');
                        layer.close(index)
                    },
                    btn2:function(){
                        alert('quxiao ')
                    },
                    end:function(p1, p2){
                    },
                })
            
            }
        })
        $('#addpatient').click(function(){
            $('#patient').val('');
            $('#phone').val('');
            $('#sfz').val('');
            layer.open({
                    type:1,
                    title:'添加',
                    content:$('.patientinfo'),
                    maxmin:true,
                    area:['400px','300px'],
                    btn:['确定','取消'],
                    success:function(){},
                    btn1:function(index, layero){
                        alert('添加成功');
                        layer.close(index)
                    },
                    btn2:function(){
                        alert('quxiao ')
                    },
                    end:function(p1, p2){
                    },
                })
        })
    })
</script>
</html>
Scheduling:
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="../layui-v2.5.6/layui/css/layui.css"/>
    <link rel="stylesheet" href="../layui-v2.5.6/layui/css/myStyle.css"/>
</head>
<body>
    <table class="layui-hide" id="test-dropdown-table" lay-filter="test-dropdown-table"/>
</body>
<script src="../layui-v2.5.6/layui/layui.js"></script>
<script src="../layui-v2.5.6/layui/layui.all.js"></script>
<script>

    layui.use(['layer','table'],function(){
        $ = layui.jquery;
        var table =layui.table;
        var layer =layui.layer;
        table.render({
            elem:'#test-dropdown-table',
            title:'排班',
            data:[{id:'1', department:'内科', doctor:'ZHANGFI', date:'专家', num:3}],
            cols:[[
                {fixed:'left', type:'checkbox'},
                {field:'department', title:'门诊'},
                {field:'doctor', title:'医生'},
                {field:'date', title:'日期'},
                {field:'num', title:'数量'}
            ]],
            page:true
        })
    })
</script>
</html>
Mystyle
html,body{
    height: 100%;
}
h1.head{
    background: #2f4056;
    border-bottom: 1px solid gray;
    color: white;
    line-height: 58px;
    padding-left: 15px;
}
section.content{
    height: calc(100% - 60px);
    overflow: hidden;
}
section.left{
    float:left;
    width: 200px;
    height: 100%;
}
.layui-nav-tree{
    height: 100%;
}
section.right{
 float: right;
 width: calc(100% - 200px);
 height: 100%;
}







补充：
1.ajax:
$.ajax({
url:"http://:80/patient/findAll",
method:"post",
data:{
},
success:function(res){
if(res.code == 200){
$.cookie('TOKEN', res.data.token,{
expires: 7
});
}
else{
alert{res.msg};
}
}
})

2.跨域必须http://全路径
文章标签：
前端开发
72e7v2qy2jlxc
目录
相关文章
极客小俊
|
前端开发 安全 NoSQL
互联网项目开发黑话与吹逼经验总结 让你在酒桌子上也能杀敌无数!
互联网项目开发经验
极客小俊
160 0
互联网项目开发黑话与吹逼经验总结 让你在酒桌子上也能杀敌无数!
这我可不懂
|
移动开发 前端开发 数据可视化
前端叹了口气，并表示谣言止于智者
前端叹了口气，并表示谣言止于智者
这我可不懂
97 0
1169542316312847
|
前端开发 JavaScript 算法
六年前端的年终总结
当然，也不仅仅是为了那个马克杯。总结的目的主要在于回顾自己的一年，借此弄明白我的下一年想如何过，有哪些想要完成的目标。之前自己也写过两篇年终总结，在2019及2021春节前，今年算是赶了个早。
1169542316312847
217 0
72e7v2qy2jlxc
|
弹性计算 关系型数据库 Java
个人工作总结无代码-三分白
个人工作总结无代码-三分白
72e7v2qy2jlxc
443 0
72e7v2qy2jlxc
|
弹性计算 Java 关系型数据库
个人工作总结后端-三分白
个人工作总结后端-三分白
72e7v2qy2jlxc
124 0
前端歌谣
|
前端开发
前端工作总结196-一直报400
前端工作总结196-一直报400
前端歌谣
61 0
前端工作总结196-一直报400
前端歌谣
|
前端开发
前端工作总结220-loaction注意
前端工作总结220-loaction注意
前端歌谣
79 0
前端工作总结220-loaction注意
前端歌谣
|
前端开发
前端工作总结195-一直报404
前端工作总结195-一直报404
前端歌谣
65 0
前端工作总结195-一直报404
狂奔滴小马
|
前端开发 JavaScript 数据可视化
9 年小厂老前端的年终总结
时光飞逝，岁月如梭，转眼来到 2021 年底，这一年少了些理性，多了点感性，少了些自由，多了一份责任，这一年视乎没做什么事情，但又过得非常充实，最欣慰的是回家有个人等待着我的拥抱，最快乐的是...
狂奔滴小马
1333 0
Java极客技术
|
Java 数据库连接
刚入职没多久，连夜手写了一个代码生成器，项目开发速度瞬间屌炸了！(二)
各位网友，大家好，我是阿粉！ 最近刚入职一个新团队，还没来得及熟悉业务，甲方爸爸就要求项目要在2个月内完成开发并上线！ 本想着往后推迟1个月在交付，但是甲方爸爸不同意，只能赶鸭子上架了！ 然后根据业务需求，设计出了大概30多张表，如果这30多张表，全靠开发人员手写 crud，开发所需的时间肯定会大大的延长，甚至可能直接会影响交付时间！ 于是就想着，能不能通过代码生成器一键搞定全部的 crud，开发团队只需要根据业务需求编写逻辑代码就可以？
Java极客技术
290 0
刚入职没多久，连夜手写了一个代码生成器，项目开发速度瞬间屌炸了！(二)

热门文章

最新文章

  • 1
    四大触点，教你从“用户视角”构建数据分析体系
  • 2
    《Stata统计分析与应用（第2版）》一3.4 图形的保存、合并及修改
  • 3
    Spring-boot+Dubbo应用启停源码分析
  • 4
    分享一些OpenStack的qcow2格式实例镜像
  • 5
    基于区块链的机器学习模型创建方案
  • 6
    微信web开发者工具无法打开的六种解决方法
  • 7
    RocketMq-Request-Reply消息
  • 8
    [译] 构建世界上最快的会议网站
  • 9
    " "(双引号)与 ' '(单引号)的区别
  • 10
    自定义高效支持点击监听的RecyclerView
  • 1
    AI在电子商务中的个性化推荐系统：驱动用户体验升级
    31
  • 2
    基于AI的网络流量分析：构建智能化运维体系
    29
  • 3
    鸿蒙登录页面好看的样式设计-HarmonyOS应用开发实战与ArkTS代码解析【HarmonyOS 5.0（Next）】
    25
  • 4
    HarmonyOS 5.0 （Next）应用开发实战：使用ArkTS构建开箱即用的登录页面【HarmonyOS 5.0（Next）】
    30
  • 5
    开箱即用的个人主页页面开发实战—基于HarmonyOS 5.0 （Next）和ArkTS的实现【HarmonyOS 5.0（Next）】
    34
  • 6
    《Java 在 3D 视觉与重建领域：开启无限可能之旅》
    22
  • 7
    《Java 情感分析：前沿技术与方法全解析》
    27
  • 8
    《GraalVM：Java AI 应用性能与启动速度的优化利器》
    22
  • 9
    《探索 Apache Spark MLlib 与 Java 结合的卓越之道》
    19
  • 10
    云产品评测
    22

    • 相关课程

    更多
  • 技术人成长路线
  • 场景实践 -新手玩转云计算制作一个浪漫的表白网页
  • 智能创作赛（复赛）：相册应用中的视频故事生成算法介绍
  • 重庆烟草2024年度全市系统网信素养能力提升轮训（第二期）暨数字创新培训班
  • 智能创作赛（初赛）：相册应用中的故事生成算法介绍
  • 全栈数据工程师养成攻略

    • 相关电子书

    更多
  • 女性移动App安全攻防战
  • 长安十二时辰背后的技术秘籍
  • 当“喜马拉雅”遇上“淘富成真”

    • 相关实验场景

    更多
  • 在PAI ArtLab一键实现欧洲杯粉丝专属贴纸制作
  • 基于阿里云DeepGPU实例，用AI画唯美国风少女
  • 代码质量提升小妙招
  • 电商系统中混沌工程实践
    • 下一篇
    【案例实战】SpringBoot整合阿里云文件上传OSS