兼容性
1、自适应1280*768px及以上的分辨率
默认窗口设置下，不应出现水平滚动条，尽量避免出现垂直滚动条（当内容过多时允许滚动条）
2、兼容Chrome、Firefox、IE8及以上主流浏览器。
导航菜单
一、菜单栏
1、产品图标：点击图标，返回首页。
2、菜单栏显示不下，自动出现更多按钮，点击展开所有菜单项。
3、切换病房，点击病房名称，切换其他病房。
4、点击当前登录人姓名，进行角色切换和我的设置。
5、点击消息面板图标，打开消息面板。
6、点击全屏按钮，整个系统全屏显示。
PS：菜单栏默认锁死，在整个菜单栏任一位置单击鼠标，解锁，解锁后鼠标悬浮在菜单名称上可自动展开显示子级菜单。在除菜单栏区域外任一位置单击，即锁死菜单栏，此时鼠标悬浮不会有子级菜单展开。
二、当前页面名称
1、原则上每个页面都需要左上角有当前页面名称。特殊情况自行调整。
三、Tab切换
1、tab页切换时，判断当前页面修改数据是否已保存，如果未保存，提示“数据未保存，是否保存？”，点击【保存】，弹框关闭，数据保存，父页面刷新，页面顶部提示“保存成功！”一秒闪退，。点击【不保存】，弹框关闭，数据不保存，父页面不刷新。点击右上角X，关闭保存提示，继续原页面操作。
列表
一、新增
1、新增时弹框：新增按钮位置在右上角，点击【新增】按钮，弹出新增录入框。
2、树形列表指定插入位置行编辑新增：新增按钮位置在右上角。选择一条一级数据，点击新增按钮，在该一级下新增一条空白行，行编辑直接修改，操作列保存或取消。未选择一级数据，点击新增按钮，在列表底部新增一条一级数据。
3、行编辑新增，新增按钮位置在列表底部，点击【新增】，列表本页底部新增按钮位置新增一条空白数据，同时新增按钮隐藏。
二、编辑
1、弹框编辑：编辑按钮放在列表【操作列】，采用编辑图标按钮。点击图标，弹出编辑框。
2、行编辑：编辑按钮放在列表【操作列】，采用编辑图标按钮。点击图标，启用本行数据编辑态，操作列按钮变更为保存和取消。
三、删除
1、批量删除：删除按钮放右上角，列表第一列要是复选框，支持全选。其他批量操作按钮同理（例如模板审核中的批量审核按钮）。点击【删除】按钮后，弹出提示“确认删除吗？”，点击确认，页面顶部提示删除成功，一秒闪退，并且显示时不能影响页面操作。
2、单条删除：删除按钮放操作列，采用删除图标按钮。点击【删除】图标后，弹出提示“确认删除吗？”，点击确认，页面顶部提示删除成功，一秒闪退，并且显示时不能影响页面操作。
PS：删除成功后刷新不显示删除的记录。
删除成功后返回到原记录所在页面，而当原记录所在页不存在时，则返回上一页。
当被删除的记录与其他记录存在关联时，请示需求界面给予不允许删除、更明细提示等信息。根据需要自行调整。
四、查询
1、查询条件位置统一放列表上方。查询条件最后尽量放上【查询】按钮，点击生效，若查询条件过多，查询按钮可不显示。除点击【查询】按钮生效外，多种查询有各自的直接生效条件，如下：
多种查询直接生效条件：
1）下拉查询：选中下拉值直接生效;
2）单选/复选按钮：选中直接生效；
3）日期查询：选中直接生效；
4）日期范围查询：选中直接生效；
5）文本框查询：默认模糊搜索，回车生效；
6）下拉+文本框组合查询：回车生效；
2、查询条件三个以上，【查询】按钮后给【重置】按钮，点击【重置】，回到默认查询条件状态。【重置】后自动生效，不需要再次点击【查询】按钮。
3、未查询到数据，列表居中显示“没有数据”。
五、单击事件
1、列表单击时，选中当前行。如果当前行为行编辑启用状态，单击只读单元格为选中当前行，单击可编辑单元格为选中当前行并直接定位编辑本单元格。
六、双击事件
1、有行编辑功能的列表。默认不给双击事件，如有特殊需要，双击事件根据需要添加，如双击可直接打开编辑器或设计器。
2、没有行编辑功能的列表。默认双击时打开本条数据的编辑弹框。有特殊需要，双击事件也可根据需要调整。如患者列表双击可直接进入患者首页。PS：列表只读或双击功能只读时，双击事件自动失效。
七、鼠标划过
1、鼠标划过默认给样式变化。如有特殊需要自行调整。
八、单元格内容展示不全（两种可选方案）
1、单元格中内容展示不下，不给鼠标悬浮显示全部，单击本行时高度自动撑开，移除本行选中时，高度自动收起为一行。另外，本行行编辑启用时，也自动撑开。如有特殊需要自行调整，如病情护理记录单，需要默认全部撑开，最高五行。
2、单元格内容展示不下，用...显示，并鼠标悬浮气泡显示全部内容。能显示完整的单元格，鼠标悬浮无气泡显示。如有特殊需要自行调整，如病情护理记录单，需要默认全部撑开，最高五行。但启用行编辑时，本行高度自动撑开。
九、操作列按钮
1、操作列按钮三个以上时，外层显示2-3个常用按钮（尽量用图标，节省列表宽度）+更多按钮，点击【更多】，展开显示其他隐藏按钮。如有特殊展示需要，可自行调整。
十、列表状态
1、列表有状态列时，位置尽量放在列表首列或操作列前一列。点击状态切换按钮，直接触发，启用自动生效，无需提示；停用时提示“确认停用吗？”点击【确认】，页面顶部显示“停用成功！”，一秒闪退，并且显示时不能影响页面操作。
十一、翻页
1、正常列表默认给翻页功能，位置在列表下方，居中显示。默认每页显示20条，显示条数下拉值（20/50/100/500/1000）。
十二、行编辑-格式校验
1、必填项：标题行*标注，失去焦点检验，红框标注，气泡显示提示内容。此时点击操作列【保存】，光标定位到本行第一个红框单元格。
2、格式错误：失去焦点校验，红框标注，气泡显示提示内容。此时点击操作列【保存】，光标定位到本行第一个红框单元格。
十三、全选
1、多选列表，表头都有全选按钮，勾选全选，本页所有数据全部选中。
2、去掉本页一条数据的选中效果，则表头全选取消勾选。
3、翻页后，自动去掉已勾选的记录及全选的勾选。
4、刷新页面后，自动去掉已勾选的记录及全选的勾选。
5、勾选一条数据，按住Shift键，勾选另一条数据，中间部分全部选中。
十四、显示数据（表格内）
1、表头：左对齐，字体加粗，字号14px。
2、单元格：文字内容左对齐，，数字、金额内容右对齐。
3、操作列原则上均用图标表达，特殊情况特殊处理。
十五、表头固定
1、表头固定，不跟随垂直滚动条滚动。
2、列表操作列固定，不跟随横向滚动条滚动。
十六、列排序
1、所有列点击表头名称，给排序切换功能。如果不能实现所有列手动排序，则全部时间列一定要有手动排序功能，其他列根据需要自行调整。
十七、列表疏密设置
1、点击操作列表头右侧的调整列表密度按钮，调整列表行高。
弹出框
一、录入规范
1、必填项：*标注，失去焦点检验，红框标注，并显示提示内容。同时，点击【保存】按钮也触发校验，光标自动定位到第一个红框内。
2、数据格式错误：失去焦点检验，红框标注，并显示提示内容。同时，点击【保存】按钮也触发校验，光标自动定位到第一个红框内。
3、数据范围超限，点击【保存】按钮校验，弹框提醒。
二、弹框可移动
1、弹框原则上居中显示，所有弹框尽量实现可拖动效果。
三、保存数据
1、有保存按钮的弹框。默认点击【保存】按钮，关闭弹框，并刷新外层数据。特殊需要自动调整，如健康教育评价单需要【保存并继续】按钮，点击后，数据保存，但弹框不关闭。
四、关闭弹框
1、弹框右上角默认给关闭按钮，使用图标X。
2、带【取消】按钮的弹框，点击【取消】，关闭当前弹框，数据不保存。
表单控件
一、日期范围控件
1、位置在查询条件栏：日期范围选择是一个整体控件，先选开始日期后选结束日期，结束日期选完后自动收起日期选择框，并生效开始查询列表数据。日期范围查询后可以给【全部】【一周】【今日】快捷按钮，点击即生效。【全部】指的是入院至今，【一周】指的是今日往前七天，前后包含。
二、日期控件/时间控件/日期时间控件
1、支持手动输入和选择。手动输入要符合日期时间逻辑，如不能输入02月30日，不能输入小时数超过0-23，不能输入分钟数超过0-59等。
三、文本框控件
1、文本框控件为空时，可以给提示信息（但控件前有标签名时，框内的“请输入***”这种提示文字不要，如果有特殊提示可以显示），放置在输入框内，浅灰色字体显示。光标进入输入框获得焦点时提示自动消失，若输入框失去焦点且未输入任何文字时恢复提示信息。
2、原则上要给出文本框字符长度。
3、单行输入框：在未限制字数情况下，当输入文字比前输入框长时，最先输入的文字隐藏，光标和最后一个输入的文字显示在输入框尾部。
4、多行输入框：需要有“当前已输入字数/最多可输入字数”（如：50/100）。
ps：回车进入下一个可编辑控件，遇到下拉控件，自动展开，上下键切换下拉选项，回车选中并跳转到下一个控件。默认从左到右，从上到下。
四、图片
1、图片均带1px描边；内容图片未加载出来时显示系统默认图片。
2、图片未上传时，移入图片区域，显示“点击上传”文字，不显示右上角删除按钮。图片已上传时，移入图片区域，不显示“点击上传”文字，显示右上角删除按钮。
加载
一、加载使用场景
1、当刷新时间较长时，需要给出加载中的效果，进度条或转圈。
链接
一、链接
1、链接文字或图片当鼠标划过时会变成点击手形。
按钮
一、按钮样式
1、按钮种类：优先操作按钮，次要按钮，不可用按钮。
2、按钮状态：默认显示状态，鼠标经过状态，点击状态。
3、按钮位置：按windows交互习惯先优先后次要（左确定，右取消）。
4、按钮样式：可直接写文字，或图标+文字，按钮文字尽量控制为2-4个汉字。
二、导出按钮
1、点击【导出】按钮，导出的是符合当前查询条件的所有列表数据，不仅仅是导出本页列表数据。如果当前列表有复选框，勾选多条，即默认导出这几条数据。
三、按钮名称
1、提示信息类：按钮名称为”确认“和”取消“。
2、录入信息类：按钮名称为”保存“和”取消“。
3、数据未保存类：按钮名称为”保存“和”不保存“。
ps：wed端，主按钮在左，次按钮在右（主次按钮根据使用频率来定，默认确定类为主，取消类为次）。移动端主按钮在右，次按钮在左。
提示
一、保存提示
1、点击确认，页面顶部提示“保存成功！”，一秒闪退，并且显示时不能影响页面操作。保存成功后，原页面自动刷新。
二、删除提示
1、点击【删除】按钮后，弹出提示“确认删除吗？”，点击确认，页面顶部提示删除成功，一秒闪退，并且显示时不能影响页面操作。删除成功后，原页面自动刷新。
三、停用提示
1、点击【停用】按钮后，弹出提示“确认停用吗？”点击【确认】，页面顶部显示“停用成功！”，一秒闪退，并且显示时不能影响页面操作。删除成功后，原页面自动刷新。
四、数据未保存
1、当前页面数据修改但未保存，提示“数据未保存，是否保存？”，点击【保存】，弹框关闭，数据保存，父页面刷新，页面顶部提示“保存成功！”一秒闪退，。点击【不保存】，弹框关闭，数据不保存，父页面不刷新。点击右上角X，关闭保存提示，继续原页面操作。
五、导出提示
1、点击【导出】按钮后，页面顶部显示“导出成功！”，一秒闪退，并且显示时不能影响页面操作。导出成功后，原页面不自动刷新。
六、导入提示
1、点击【导入】按钮后，弹框居中显示导入提示，如果有导入失败数据，自动下载失败明细（保存到浏览器下载默认路径），同时导入失败条数后给查看失败明细按钮，点击【查看失败明细】，打开txt文件，只显示“第1，2.。。。。。。条失败”。
七、请先选择患者提示
1、文书书写、诊断录入等需要先选择患者后才能操作的页面，未选患者刷新时要给“请先选择患者”提醒。页面顶部显示，一秒闪退，并且显示时不能影响页面操作。
网友评论