@geyj/components NPM

美公业务组件库

标题menu-title

<mg-menu-title title="标题名称" ></mg-menu-title>

参数

参数	说明	类型
title	标题名称	string

筛选栏tools

<mg-tools>
   <template #left></template>
   <template #right></template>
</mg-tools>

核心指标stat

 <mg-stat :defaultCompare="['同比', '环比']" :cols="statColumns" :summary="summary" @openColumnManager="openColumnManager(0)"></mg-stat>

参数

参数	说明	类型
defaultCompare	同比环比集合	string[]
cols	指标列	ComplexTableColumn[]
summary	汇总数据	TableRow
note	提示文字	string

事件

事件	说明	回调参数
openColumnManager	打开指标设置

页签tabs

<mg-tabs :tabs="tabs" @changeTab="changeTab" :active-tab="activeTab"></mg-tabs>

参数说明

参数	说明	类型
tabs	页签集合	string[]
activeTab	激活页签	string

事件

事件	说明	回调参数
changeTab	修改页签	(tab: string)

指标设置column-manager

<mg-column-manager :visible="visible" :template="template" :category="category" :fields="fields"
   :checkedFieldIds="checkedFieldIds" :defaultFieldIds="defaultFieldIds" :closeColumnManager="closeColumnManager"
   @deleteTemplate="deleteTemplate" @saveTemplate="saveTemplate" @updateTemplate="updateTemplate"
   @applyCols="applyCols"></mg-column-manager>

参数

参数	说明	类型
visible	指标设置开关状态	boolean
template	模板数据	TableRow
category	分类集合	TableRow[]
fields	字段集合	TableRow[]
closeColumnManager	关闭指标设置	() => void

事件

事件	说明	回调参数
deleteTemplate	删除模板	(id: number)
saveTemplate	保存个人模板	(name: string, field_collections: string, default_field_collections: string)
updateTemplate	更新个人模板	(id: number, name: string, field_collections: string, default_field_collections: string)
applyCols	应用指标	(field_collections: string, default_field_collections: string)

数据列表日期选择器list-date-picker

<mg-list-date-picker :default-date="date" default-date-label="7日" @change="changeDateHandler"></mg-list-date-picker>

参数

参数	说明	类型
defaultDate	默认日期集合	string[]
defaultDateLabel	默认日期显示	'昨日' \| '7日' \| '15日' \| '30日' \| '日' \| '周' \| '月' \| '年'

事件

事件	说明	回调参数
change	日期值变更	(date: string[], dateLabel: string)

趋势日期选择器chart-range-date-picker

<mg-list-date-picker :default-date="date" default-date-label="7日" @change="changeDateHandler"></mg-list-date-picker>

参数

参数	说明	类型
defaultDate	默认日期集合	string[]
defaultDateLabel	默认日期显示	'日' \| '周' \| '月'
defaultDateType	默认日期类型	'date' \| 'week' \| 'month'

事件

事件	说明	回调参数
change	日期值变更	(date: string[], dateType: 'date' \| 'week' \| 'month')

趋势年对比日期选择器chart-year-date-picker

<mg-chart-year-date-picker :years="years" @change="changeDateHandler"></mg-chart-year-date-picker>

参数

参数	说明	类型
years	年份集合	string[]

事件

事件	说明	回调参数
change	日期类型变更	(dateType: 'date' \| 'week' \| 'month')

普通表格table

<mg-table :tableColumns="tableColumns" :tableData="tableData"
  :pagination="pagination" :loading="loading" :skeletonRows="6">
  <template #custom_name="{ column, scope }">
     <el-button link type="primary">{{ scope.row.name }}</el-button>
  </template>
  <template #custom_operations="{ column, scope }">

  </template>
</mg-table>

参数说明

参数	说明	类型
tableColumns	表列结构

type TableColumn = {
    prop: string
    label: string
    fullLabel?: string
    width?: number
    fixed?: 'left' | 'right' | boolean
    align?: 'left' | 'center' | 'right'
}

| | tableData | 表格数据 |

type TableRow = {
    [key: string]: any
}

| | pagination | 分页信息，不传则屏蔽分页组件及其功能 |

type Pagination = {
    page: number
    size: number
    total: number
    changePageSize: Function
    changeCurrentPage: Function
}

事件

事件	说明	回调参数
select	选择某一行	（selection: TableRow[], row: TableRow）
select-all	全选	（selection: TableRow[]）
selection-change	选项变更	（selection: TableRow[]）

复杂后端分页表格complex-table

<mg-complex-table :tableColumns="tableColumns" :tableData="tableData" :loading="loading" :pagination="pagination"
   @changeSort="changeSort" @changeProgress="changeProgress" @changeChart="changeChart" @openFilter="openFilter"
   @resetFilter="resetFilter" @confirmFilter="confirmFilter" @keyupFilter="confirmFilter" @closeFilter="closeFilter"
   @openColumnManager="openColumnManager(2)">
</mg-complex-table>

参数说明

参数	说明	类型
tableColumns	表列结构

type ComplexTableColumn = {
   prop: string
   label: string
   fullLabel?: string
   width?: number
   fixed?: 'left' | 'right' | boolean
   align?: 'left' | 'center' | 'right'
   icons?: ('sort' | 'filter' | 'progress' | 'chart')[]
   sort: 'ASC' | 'DESC' | ''
   isProgress?: boolean
   isChart?: boolean
   filterPopoverVisible?: boolean
   filterType: 'text' | 'number' | 'percent'
   inputValues: string[]
   inputRenderValues: string[]
   dataType: 'text' | 'number' | 'percent'
   float: number
   max: number
}

| | tableData | 表格数据 |

type TableRow = {
    [key: string]: any
}

| | pagination | 分页信息，不传则屏蔽分页组件及其功能 |

type Pagination = {
    page: number
    size: number
    total: number
    changePageSize: Function
    changeCurrentPage: Function
}

事件

事件	说明	回调参数
changeSort	排序	（prop: string）
changeProgress	进度	（prop: string）
changeChart	图表	（prop: string）
openFilter	打开筛选	（prop: string）
resetFilter	重置筛选	（prop: string）
confirmFilter	确认筛选	（prop: string）
keyupFilter	回车确认筛选	（prop: string）
closeFilter	关闭筛选	（prop: string）
openColumnManager	打开指标设置

复杂前端分页表格all-data-table

<mg-all-data-table :tableColumns="tableColumns" :tableData="tableData" :loading="loading" :pagination="pagination"
   @changeSort="changeSort" @changeProgress="changeProgress" @changeChart="changeChart" @openFilter="openFilter"
   @resetFilter="resetFilter" @confirmFilter="confirmFilter" @keyupFilter="confirmFilter" @closeFilter="closeFilter"
   @openColumnManager="openColumnManager(2)"></mg-all-data-table>

参数说明

参数	说明	类型
tableColumns	表列结构

type ComplexTableColumn = {
    prop: string
    label: string
    fullLabel?: string
    width?: number
    fixed?: 'left' | 'right' | boolean
    align?: 'left' | 'center' | 'right'
    icons?: ('sort' | 'filter' | 'progress' | 'chart')[]
    sort: 'ASC' | 'DESC' | ''
    isProgress?: boolean
    isChart?: boolean
    filterPopoverVisible?: boolean
    filterType: 'text' | 'number' | 'percent'
    inputValues: string[]
    inputRenderValues: string[]
    dataType: 'text' | 'number' | 'percent'
    float: number
    max: number
}

| | tableData | 表格数据 |

type TableRow = {
    [key: string]: any
}

| | pagination | 分页信息，不传则屏蔽分页组件及其功能 |

type Pagination = {
    page: number
    size: number
    total: number
    changePageSize: Function
    changeCurrentPage: Function
}

事件

事件	说明	回调参数
changeSort	排序	（prop: string）
changeProgress	进度	（prop: string）
changeChart	图表	（prop: string）
openFilter	打开筛选	（prop: string）
resetFilter	重置筛选	（prop: string）
confirmFilter	确认筛选	（prop: string）
keyupFilter	回车确认筛选	（prop: string）
closeFilter	关闭筛选	（prop: string）
openColumnManager	打开指标设置