InfoPanel

信息面板组件

示例

<template>
  <div>
    <InfoPanel :schema="Schema" :data="data" />
  </div>
</template>

<script>
import InfoPanel from 'enn-info-panel';
import Schema from './info.schema.json';

export default {
  components: {
    InfoPanel,
  },
  data() {
    return {
      Schema,
      data: {},
    };
  },
}
</script>

API

InfoPanel Attributes

| 参数 | 类型 | 必填 | 默认值 | 说明 | | --------- | ------- | ---- | --------- | ---------------------------- | | schema | Object | 是 | - | 数据信息的 schema | | data | Object | 是 | - | 展示的数据 | | scenario | String | 否 | infoPanel | 环境变量 | | config | Object | 否 | - | 配置项，包括联动内使用的数据 | | hasBorder | Boolean | 否 | true | 控制是否显示边框 |

Tips

• schema 可使用 schema-form-editor 生成，格式参照 schema-form-render 所需 schema 的格式
• schema 中只有 activated、visible 可以控制当前项是否展示

config

| 参数 | 类型 | 必填 | 默认值 | 说明 | | -------------- | ------- | ---- | ------ | ---------------------------------------- | | emptySymbol | String | | - | 空值字段填充的符号 | | closeAutoLabel | Boolean | | - | 取消无边框 label 默认值 auto，改为 80px; |

示例

插槽 Slots

<template>
  <div>
    <InfoPanel :schema="Schema" :data="data" >
      <template #itemName="{name, value}">
        {{name}}: {{value}}
      </template>
    </InfoPanel>
  </div>
</template>

<script>
import InfoPanel from 'enn-info-panel';
import Schema from './info.schema.json';

export default {
  components: {
    InfoPanel,
  },
  data() {
    return {
      Schema,
      data: {},
    };
  },
}
</script>

联动 scenario

{
  "type": "input",
  "label": "名称1",
  "name": "key1",
  "effect": "set('activated', scenario !== 'infoPanel');"
}

info.less

可以用来把 schema-form-render 生成的表单转为信息面板样式 注意：需要自行设置表单的只读或禁用

<SchemaFormRender class="enn-form-info-panel" />

BooleanResult

状态显示组件

• 支持多状态展示其中一种

示例

<template>
  <div>
    <BooleanResult :value="value"/>
  </div>
</template>

<script>
import { BooleanResult } from 'enn-info-panel';

export default {
  components: {
    BooleanResult,
  },
  data() {
    return {
      value: true,
    };
  },
}
</script>

API

BooleanResult Attributes

| 参数 | 类型 | 必填 | 默认值 | 说明 | | ------- | ------- | ---- | ------ | ---------------- | | value | Boolean | 是 | - | 渲染的值 | | config | Object | | | 渲染的配置项 | | minIcon | Boolean | | | 是否使用点的图标 | | status | Array | | | 多种状态展示 |

config Attributes

| 参数 | 类型 | 必填 | 默认值 | 说明 | | ------------ | ------ | ---- | -------------- | ---------------------- | | activeText | String | | 是 | true 状态的文案 | | inactiveText | String | | 否 | false 状态的文案 | | activeIcon | String | | el-icon-succes | true 状态的图标 class | | inactiveIcon | String | | el-icon-error | false 状态的图标 class | | emptySymbol | String | | "-" | 空值字段填充的符号 |

示例

<template>
  <div>
    <BooleanResult :value="value" :config="config" />
  </div>
</template>

<script>
import { BooleanResult } from 'enn-info-panel';

export default {
  components: {
    BooleanResult,
  },
  data() {
    return {
      value: true,
      config: {
        activeText: '启用',
        inactiveText: '停用',
        activeIcon: 'el-icon-video-play',
        inactiveIcon: 'el-icon-video-pause',
      },
    };
  },
}
</script>

status Attributes

| 参数 | 类型 | 必填 | 默认值 | 说明 | | -------- | --------------------- | ---- | ------ | ---------------- | | value | String/Boolean/Number | | | 状态对应的值 | | label | String | | | 状态的文案 | | icon | String | | | 状态的图标 class | | color | String | | | icon 的颜色 | | minColor | String | | | minIcon 的颜色 |

Tips

• icon 只有 minIcon 为 false 的时候才会使用
• color 和 minColor 会互补，如果 color 没设置，会使用 minColor。反之一样。

示例

<template>
  <div>
    <BooleanResult :value="value" :status="status" />
  </div>
</template>

<script>
import { BooleanResult } from 'enn-info-panel';

export default {
  components: {
    BooleanResult,
  },
  data() {
    return {
      value: 1,
      status: [
        {
          value: 1,
          label: '1',
          icon: 'el-icon-user-solid',
          color: 'red',
          minColor: 'pink',
        },
        {
          value: 2,
          label: '2',
          icon: 'el-icon-star-on',
          color: 'green',
          minColor: 'lightgreen',
        },
        {
          value: 3,
          label: '3',
          icon: 'el-icon-s-goods',
          color: 'blue',
          minColor: 'lightblue',
        },
      ],
    };
  },
}
</script>