通用常量
在使用通用常量之前需引入相应的常量。
import { ... } from 'utils/constants';
DEFAULT_DATE_FORMAT
/* 默认前后端交互格式-日期 */
export const DEFAULT_DATE_FORMAT = 'YYYY-MM-DD';
DEFAULT_DATETIME_FORMAT
/* 默认前后端交互格式-日期时间 */
export const DEFAULT_DATETIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
DEFAULT_TIME_FORMAT
/* 默认前后端交互格式-时间 */
export const DEFAULT_TIME_FORMAT = 'HH:mm:ss';
DATETIME_MIN
/* 特定格式的日期处理格式,时分秒指定为00:00:00 */
export const DATETIME_MIN = 'YYYY-MM-DD 00:00:00';
DATETIME_MAX
/* 特定格式的日期处理格式,时分秒指定为23:59:59 */
export const DATETIME_MAX = 'YYYY-MM-DD 23:59:59';
DEBOUNCE_TIME
/* 方法调用时,防反跳时间 */
export const DEBOUNCE_TIME = 200;
GLOBAL_PAGE_SIZE
/* 设置每页请求条数 */
export const GLOBAL_PAGE_SIZE = 10;
PAGE_SIZE_OPTIONS
/* 指定每页可以显示多少条,第一个值需保持与 GLOBAL_PAGE_SIZE 一致 */
export const PAGE_SIZE_OPTIONS = ['10', '20', '50', '100'];
界面样式变量
SEARCH_FORM_ROW_LAYOUT
// 查询表单Row的水槽
export const SEARCH_FORM_ROW_LAYOUT = {
gutter: 12,
};
EDIT_FORM_ROW_LAYOUT
// 编辑表单Row的水槽
export const EDIT_FORM_ROW_LAYOUT = {
gutter: 48,
};
FORM_COL_3_4_LAYOUT
// 占据每行的3/4
export const FORM_COL_3_4_LAYOUT = {
span: 18,
};
FORM_COL_2_3_LAYOUT
// 占据每行的2/3
export const FORM_COL_2_3_LAYOUT = {
span: 16,
};
FORM_COL_2_LAYOUT
// 占据每行的1/2
export const FORM_COL_2_LAYOUT = {
span: 12,
};
FORM_COL_3_LAYOUT
// 占据每行的1/3
export const FORM_COL_3_LAYOUT = {
span: 8,
};
FORM_COL_4_LAYOUT
// 占据每行的1/4
export const FORM_COL_4_LAYOUT = {
span: 6,
};
SEARCH_FORM_ITEM_LAYOUT
// 查询表单 拥有 超过两个字段时 表单字段的布局
export const SEARCH_FORM_ITEM_LAYOUT = {
labelCol: {
span: 10,
},
wrapperCol: {
span: 14,
},
};
EDIT_FORM_ITEM_LAYOUT
// 编辑表单 表单字段的布局
export const EDIT_FORM_ITEM_LAYOUT = {
labelCol: {
span: 9,
},
wrapperCol: {
span: 15,
},
};
EDIT_FORM_ITEM_LAYOUT_COL_2
// 编辑表单 表单字段的布局 占据 一半的宽度
export const EDIT_FORM_ITEM_LAYOUT_COL_2 = {
labelCol: {
span: 6,
},
wrapperCol: {
span: 18,
},
};
EDIT_FORM_ITEM_LAYOUT_COL_3
// 编辑表单 表单字段的布局 占据整行
export const EDIT_FORM_ITEM_LAYOUT_COL_3 = {
labelCol: {
span: 3,
},
wrapperCol: {
span: 21,
},
};
FORM_FIELD_CLASSNAME
// 表单字段的通用 className
export const FORM_FIELD_CLASSNAME = ' ued-form-field ';
SEARCH_FORM_CLASSNAME
// 表单字段的通用 className
export const SEARCH_FORM_CLASSNAME = ' more-fields-search-form ';
EDIT_FORM_CLASSNAME
// 表单字段的通用 className
export const EDIT_FORM_CLASSNAME = ' more-fields-form ';
SEARCH_COL_CLASSNAME
// 查询表单 按钮 Col 的样式
export const SEARCH_COL_CLASSNAME = ' search-btn-more ';
DETAIL_DEFAULT_CLASSNAME
// 详情/编辑 包裹类(折叠面板)
export const DETAIL_DEFAULT_CLASSNAME = ' ued-detail-wrapper ';
DETAIL_CARD_CLASSNAME
// 详情/编辑 包裹类(卡片)
export const DETAIL_CARD_CLASSNAME = ' ued-detail-card ';
export const DETAIL_CARD_TABLE_CLASSNAME = ' ued-detail-card-table ';
DETAIL_CARD_TABLE_CLASSNAME
// 详情/编辑 包裹类(卡片)
export const DETAIL_CARD_TABLE_CLASSNAME = ' ued-detail-card-table ';
DETAIL_CARD_THIRD_CLASSNAME
// 三级标题 包裹类(卡片)
export const DETAIL_CARD_THIRD_CLASSNAME = ' ued-detail-card-third ';
DETAIL_CARD_TABLE_THIRD_CLASSNAME
// 三级标题 包裹类(卡片)
export const DETAIL_CARD_TABLE_THIRD_CLASSNAME = ' ued-detail-card-table-third ';
DETAIL_EDIT_FORM_CLASSNAME
// 详情/编辑 包裹类(表单)
export const DETAIL_EDIT_FORM_CLASSNAME = ' ued-edit-form ';
ROW_READ_ONLY_CLASSNAME
// 详情/编辑 Row 包裹类
export const ROW_READ_ONLY_CLASSNAME = ' read-row ';
export const ROW_WRITE_ONLY_CLASSNAME = ' writable-row ';
export const ROW_READ_WRITE_CLASSNAME = ' inclusion-row ';
export const ROW_HALF_READ_ONLY_CLASSNAME = ' read-half-row ';
export const ROW_HALF_WRITE_ONLY_CLASSNAME = ' half-row ';
export const ROW_HALF_READ_WRITE_CLASSNAME = ' inclusion-half-row ';
export const ROW_LAST_CLASSNAME = ' last-row ';
ROW_WRITE_ONLY_CLASSNAME
// 详情/编辑 Row 包裹类
export const ROW_WRITE_ONLY_CLASSNAME = ' writable-row ';
ROW_READ_WRITE_CLASSNAME
// 详情/编辑 Row 包裹类
export const ROW_READ_WRITE_CLASSNAME = ' inclusion-row ';
ROW_HALF_READ_ONLY_CLASSNAME
// 详情/编辑 Row 包裹类
export const ROW_HALF_READ_ONLY_CLASSNAME = ' read-half-row ';
ROW_HALF_WRITE_ONLY_CLASSNAME
// 详情/编辑 Row 包裹类
export const ROW_HALF_WRITE_ONLY_CLASSNAME = ' half-row ';
ROW_HALF_READ_WRITE_CLASSNAME
// 详情/编辑 Row 包裹类
export const ROW_HALF_READ_WRITE_CLASSNAME = ' inclusion-half-row ';
ROW_LAST_CLASSNAME
// 详情/编辑 Row 包裹类
export const ROW_LAST_CLASSNAME = ' last-row ';
TABLE_OPERATOR_CLASSNAME
// 表格的操作按钮 的 父元素的class
export const TABLE_OPERATOR_CLASSNAME = ' table-operator ';
MODAL_FORM_ITEM_LAYOUT
/** 弹窗 */
export const MODAL_FORM_ITEM_LAYOUT = {
labelCol: {
span: 6,
},
wrapperCol: {
span: 16,
},
};
PERMISSION_TYPE
// 权限校验类型,对应权限组件permissionList元素中的type属性
export const PERMISSION_TYPE = {
button: 'button',
formItem: 'formItem',
fields: 'fields',
table: 'table',
};