Robam_umd_v01

项目介绍

Robam

开发文档

vue.js 文档

quasar 文档

axios 文档

Vuelidate 文档

页面规范

页面整体布局推荐使用quasar集成的Flex css进行布局

一、表单：

1. 布局：
根据窗口尺寸，lg尺寸下单行3个表单元素，md尺寸下单行2个表单元素，sm及xs尺寸下单行1个表单元素
2. 规范：
（1）表单元素自身推荐使用 vertical 模式，如图：

表单 label 的 vertical 模式
（2）表单验证提示要统一，如必填提示为：该字段为必填项。同时必填验证的Label上要标注 *（更多示例，会额外给出文档）
必填项标注 *
（3）日期选择器 format格式：YYYY-MM-DD HH:mm:ss 。弹出方式始终为：popover。 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。