Robam_umd_v01
项目介绍
Robam
开发文档
页面规范
页面整体布局推荐使用quasar集成的Flex css进行布局
一、表单：
1. 布局：
根据窗口尺寸，lg尺寸下单行3个表单元素，md尺寸下单行2个表单元素，sm及xs尺寸下单行1个表单元素
2. 规范：
（1）表单元素自身推荐使用 vertical 模式，如图：
（2）表单验证提示要统一，如必填提示为：该字段为必填项。同时必填验证的Label上要标注 *（更多示例，会额外给出文档）
（3）日期选择器 format格式：YYYY-MM-DD HH:mm:ss 。弹出方式始终为：
popover。
（4）下拉选择可选项较多时，须提供搜索功能
二、表格：
1. 布局：
(1) 查询字段较少时，布局参考下图：
(2) 查询字段较多时，布局参考下图：
2. 规范：
（1）表格列无特殊需求下，请使用左对齐
（2）表格内置按钮及数据Format参见下文。
三、按钮
1.布局：
（1）普通相邻按钮间无特殊需求下间距应为 sm
2.规范：
（1）按钮图标：除查询按钮和重置按钮外，其它按钮暂时不要指定icon
（2）按钮模式：页面最外层功能区按钮 请使用 push 模式，辅助功能按钮 请使用
flat 模式。表格内置的顶部按钮（多为批量操作）使用 outline 模式，行内操作按钮使用 flat 模式。modal 模态框底部操作按钮请使用glossy模式
（3）按钮着色：可根据功能类型来，常见：新增、编辑、查看、导入、导出等请使用 primary 颜色，取消、返回等操作请使用secondary颜色，删除等敏感操作请使用 nagative颜色
（4）浮动按钮组：页面的浮动按钮组默认为展开状态，按钮着色遵循上述原则，按钮统一为图标按钮，且鼠标hover时应有提示明确告知用户该按钮的功能，参见 浮动操作按钮文档
四、Fomat
常见场景：表格列数据的format
1.规范：
（1）表格中常见场景：例如status字段值为 -1 、 0 、1 分别对应 驳回、未审核、通过，该场景下format，统一使用 q-chip 组件，统一为方形，着色可灵活变化。
五、Loading
用户对页面操作而产生了异步时，必须使用loading，包括但不限于以下场景：初次进入某页面、点击按钮、切换Tab页等等。使用Loading目的：1.给用户操作反馈。2.防止用户重复操作
1.规范：
（1）按钮loading：当按钮执行异步操作时，按钮loading统一采用q-btn组件自带loading。PS：表格行内操作按钮不需要loading
（2）表格loading：表格加载时或对表格进行异步操作时，loading统一采用<q-spinner-gears size="50px" color="primary"></q-spinner-gears>。
（3）Tab切换loading：在tab进行切换时，建议将tab-pane整体loading。
