Honeycomb Design

# 信息简档 InfoProfile

以档案信息的形式详细展示业务信息，可根据需要配置带有自己业务特色的场景页面。

# 基础使用

基础使用

基础场景，信息简档主要包含标题（可配置超链接）、副标题和主题图标。 

<title>基础使用</title>
<describe>
  基础场景，信息简档主要包含标题（可配置超链接）、副标题和主题图标。
</describe>
<template>
    <hc-info-profile
      :title-field="propData.titleField"
      :sub-title-field="propData.subTitleField"
      :title-has-link="propData.titleHasLink"
      :icon="propData.icon"
      :data="data"
      @titleclick="onTitleClick"
      >
    </hc-info-profile>
</template>
<script>
export default{
  data: function () {
    return {
      propData: {
        "titleHasLink": true,  // 开启后onTitleClick事件才会生效
        "titleField": "title",  // 标题字段
        "subTitleField": "subTitle", // 次级标题标题字段
        "icon": "https://upload.jianshu.io/users/upload_avatars/3136195/484e32c3504a.jpg", // 图片地址
        //"icon": "icon-partition", // 字体图标
      },
      data: {
        title: '超链接标题',
        subTitle: '次级标题'
      }
    }
  },
  methods: {
    onTitleClick: function(e) {
        console.log('onTitleClick', e)
    }
  }
}
</script>

# 标签场景

标签字段的使用

信息简档可配置各种类型样式的标签。 

<title>标签字段的使用</title>
<describe>
  信息简档可配置各种类型样式的标签。
</describe>
<template>
    <hc-info-profile
      :title-field="propData.titleField"
      :sub-title-field="propData.subTitleField"
      :status-fields="propData.statusFields"
      :icon="propData.icon"
      :data="data"
      >
    </hc-info-profile>
</template>
<script>
export default{
  data: function () {
    return {
      propData: {
        "titleField": "title",  // 标题字段
        "subTitleField": "subTitle", // 次级标题标题字段
        "icon": "https://upload.jianshu.io/users/upload_avatars/3136195/484e32c3504a.jpg", // 图片地址
        //"icon": "icon-partition", // 字体图标
        // 状态标签内容配置
        "statusFields": [
            {
                "fieldName": "tag1",
                "options": [
                    {
                        "value": "1",
                        "text": "我是标签1内容",
                        "style": "normal"
                    },
                    {
                        "value": "2",
                        "text": "我是标签2内容",
                        "style": "primary"
                    },
                    {
                        "value": "3",
                        "text": "我是标签3内容",
                        "style": "success"
                    }
                ]
            },
            {
                "fieldName": "tag2",
                "options": [
                    {
                        "value": "1",
                        "text": "我是标签1内容",
                        "style": "normal"
                    },
                    {
                        "value": "2",
                        "text": "我是标签2内容我是标签2内容",
                        "style": "primary"
                    },
                    {
                        "value": "3",
                        "text": "我是标签3内容",
                        "style": "success"
                    }
                ]
            }
        ]
      },
      data: {
        title: '标题',
        subTitle: '次级标题',
        tag1: '1',
        tag2: '2'
      }
    }
  }
}
</script>

# 关键指标场景

关键指标配置

配置备选项需要配置fieldConfig中indicatorType为options类型，然后在数据中添加“字段名 + __text”作为备选项文本值，支持逗号分割配置多个选项。

<title>关键指标配置</title>
<describe>
  配置备选项需要配置fieldConfig中indicatorType为options类型，然后在数据中添加“字段名 + __text”作为备选项文本值，支持逗号分割配置多个选项。</br>
</describe>
<template>
    <hc-info-profile
      :title-field="propData.titleField"
      :sub-title-field="propData.subTitleField"
      :indicator-fields="propData.indicatorFields"
      :icon="propData.icon"
      :data="data"
      @indicator-link-click="onIndicatorLinkClick"
      >
    </hc-info-profile>
</template>
<script>
export default{
  data: function () {
    return {
      propData: {
        "titleField": "title",  // 标题字段
        "subTitleField": "subTitle", // 次级标题标题字段
        "icon": "https://upload.jianshu.io/users/upload_avatars/3136195/484e32c3504a.jpg", // 图片地址
        //"icon": "icon-partition", // 字体图标
        // 指标字段内容配置
        "indicatorFields": [
            {
                "fieldName": "Status",
                "fieldDisplayName": "动态显示",
                "isLink": false,
                "fieldConfig": {
                    "indicatorType": "text"
                },
                "visible": function(data) {
                    // 是否显示字段支持传入方法
                    return data.Status === '显示'
                }
            },
            {
                "fieldName": "Link",
                "fieldDisplayName": "文本链接",
                "fieldConfig": {
                    "indicatorType": "options" // 选项类型，配合Link__text可作为备选项进行显示。
                },
                "isLink": true, // 开启后onIndicatorLinkClick事件才会生效
                "visible": true
            },
            {
                "fieldName": "number",
                "fieldDisplayName": "金额",
                "fieldConfig": {
                    "showThousand": true,
                    "showPercent": false,
                    "enablePlaces": true,
                    "decimalPlaces": 5,
                    "unitText": "万元",
                    "indicatorType": "text"
                },
                "isLink": false,
                "visible": true
            },
            {
                "fieldName": "Date",
                "fieldDisplayName": "日期",
                "fieldConfig": {
                    "format": "yyyy-MM-dd"
                },
                "isLink": false,
                "visible": true
            },
            {
                "fieldName": "PayingLate",
                "fieldDisplayName": "比例",
                "fieldConfig": {
                    "showThousand": true,
                    "showPercent": true,
                    "enablePlaces": false,
                    "decimalPlaces": 0,
                    "unitText": null,
                    "indicatorType": "text"
                },
                "isLink": false,
                "visible": true
            },
            {
                "fieldName": "MarketRate",
                "fieldDisplayName": "市场汇率",
                "fieldConfig": {
                    "showThousand": true,
                    "showPercent": false,
                    "enablePlaces": true,
                    "decimalPlaces": 6,
                    "unitText": "",
                    "indicatorType": "text"
                },
                "isLink": false,
                "visible": true
            }
        ],
       },
        data: {
            Status: '显示',
            Link: '1,2,3',
            Link__text: "链接1,链接2,链接3",
            number: 10000,
            Date: '2020/2/1',
            title: '标题',
            subTitle: '次级标题',
            PayingLate: '200',
            MarketRate: '20'
      }
    }
  },
  methods: {
    onIndicatorLinkClick: function(e) {
        console.log('onIndicatorLinkClick', e)
    }
  }
}
</script>

# 工具栏按钮场景

工具栏按钮配置

按钮对象ToolbarOption内可自由扩展参数（例如customProps，这里只是示例，参数名称自定义）。 

<title>工具栏按钮配置</title>
<describe>
  按钮对象<a href="#toolbaroption配置项">ToolbarOption</a>内可自由扩展参数（例如customProps，这里只是示例，参数名称自定义）。
</describe>
<template>
    <hc-info-profile
      :title-field="propData.titleField"
      :sub-title-field="propData.subTitleField"
      :toolbar-items="propData.toolbarItems"
      :icon="propData.icon"
      :data="data"
      @toolbar-item-click="onToolbarItemClick"
      >
    </hc-info-profile>
</template>
<script>
export default{
  data: function () {
    return {
      propData: {
        "titleField": "title",  // 标题字段
        "subTitleField": "subTitle", // 次级标题标题字段
        "icon": "https://upload.jianshu.io/users/upload_avatars/3136195/484e32c3504a.jpg", // 图片地址
        // 工具栏按钮配置
        "toolbarItems": [
            {
                "title": "弹窗",
                "id": "button_3hJu",
                "visible": true,
                "customProps": [] // 用户自定义参数，点击按钮会触发点击事件，带出当前按钮对象
            },
            {
                "title": "跳转",
                "id": "button_0VJL",
                "visible": function(data) {
                  return !!data.showSkip
                },
                "customProps": []
            },
            {
                "title": "自定义",
                "id": "button_qkuO",
                "visible": true,
                "customProps": []
            },
            {
                "title": "自定义2",
                "id": "button_qkuO2",
                "visible": true,
                "customProps": []
            },
            {
                "title": "订阅事件",
                "id": "button_elS1",
                "visible": true,
                "customProps": []
            }
        ],
      },
      data: {
          title: '标题',
          subTitle: '次级标题',
          showSkip: true
      }
    }
  },
  methods: {
    onToolbarItemClick: function(e) {
        if(e.item && e.item.id === 'button_0VJL') {
           this.data.showSkip = false
        }
        // 点击工具栏按钮会触发当前事件
        console.log('onToolbarItemClick', e)
    }
  }
}
</script>

# 属性

属性 说明 值类型 可选值 默认值
data 信息简档的数据 Object -- --
title-field 标题值字段,渲染时会取data中对应的字段值 string -- --
subTitle-field 次级标题值字段,渲染时会取data中对应的字段值 string -- --
title-has-link 配置标题是否是超链接，配置为true，则点击标题的时候会触发"titleclick"事件 boolean -- false
date-time-format 标题次级标题如果是日期时的格式化字段 string -- yyyy-MM-dd HH:mm:ss
layout-type 布局样式,精简模式不显示标题部分 number 0完整 1精简 false
icon mp-icon-、icon-开头的字体图标或者是完整的图片地址 string -- --
status-fields 可以通过status-fields来配置标签内容，改数据为数组类型，可以传多个标签数据。 StatusOption[] 参考StatusOption配置项 --
indicator-fields 关键指标指的是内容区域的显示条目，可以使用备选项、超链接、日期、数字（小数和百分比都支持）、文本等内容。 IndicatorOption[] 参考IndicatorOption配置项 --
toolbar-items 工具栏配置 ToolbarOption[] 参考ToolbarOption配置项 --

# StatusOption配置项

属性 说明 值类型 可选值 默认值
fieldName 指标签内容，渲染时会取data中对应的字段值 string -- --
options 标签内容备选项 optionItem[] 参考ToolbarOption配置项 --

# optionItem配置项

属性 说明 值类型 可选值 默认值
value 标签值 string -- --
text 标签文本 string -- --
style 标签类型 string normal，primary，success， warning，danger，dignify primary

# IndicatorOption配置项

属性 说明 值类型 可选值 默认值
fieldName 指标值字段 string -- --
fieldDisplayName 指标显示名称 string -- --
isLink 是否开启超链接，开启后点击会触发indicator-link-click事件 boolean -- false
fieldConfig 不同内容的展示配置 Configs 参考Configs配置项 false
visible 是否显示 boolean/function 支持函数动态判断，函数默认返回当前data对象 false

# Configs配置项

属性 说明 值类型 可选值 默认值
indicatorType 选项类型 string text文本类型、option备选项类型 --
showThousand 数字类型以千进行分位（10,000.0的形式） boolean -- --
showPercent 数字类型是否展示百分号 boolean -- --
decimalPlaces 数字类型保留几位小数 number -- --
unitText 数字类型显示单位 string -- --
format 日期类型格式化字段 string -- yyyy-MM-dd HH:mm:ss

# ToolbarOption配置项

属性 说明 值类型 可选值 默认值
title 按钮名称 string -- --
id 按钮唯一标识 string -- --
visible 是否显示 boolean/function 支持函数动态判断，函数默认返回当前data对象 false

# 事件

事件 说明 回调参数
titleclick title-has-link配置为true后，击标题的时候会触发标题超链接点击事件 {data: 当前组件data值, target: 触发的dom对象}
toolbar-item-click 工具栏按钮点击事件 {item: 当前按钮item值, target: 触发的dom对象}
indicator-link-click IndicatorOption中的isLink配置为true时，点击关键指标超链接会触发该点击事件 {data: 当前组件data值, field: 关键指标值字段，optionData: 当前点击的备选项对象，e: 事件对象 }

← 气泡卡片 Popover →