• 通用常量


    在使用通用常量之前需引入相应的常量。

    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 ';
    
    /** 弹窗 */
    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',
    };