ith-view-workbench组件介绍

说明

ith-view-workbench 由业务实际场景产生,独立维护的一个组件,可以自定义配置工作台的布局及卡片展示内容

依赖

• element-ui
• vue-grid-layout

使用注意

• 卡片数据和布局数据中component对应的组件名,必须是已注册存在的
• 为了方便批量注册工作台卡片内组件,建议使用案例中#批量注册方法,把卡片组件归纳至一个文件夹中,务必注意每个组件需要配置name
• 卡片内组件挂载方法使用插槽,显示动态组件
• 使用内置图表组件时,获取参数使用项目全局默认**$http.get**方法调用接口,不同图表类型返回的数据也要不同,查看

安装

// 安装
npm install ith-view-workbench
yarn add ith-view-workbench

全局引入

在main.js中添加以下代码

 import 'ith-view-workbench/lib/ith-view-workbench.css'
 import IthWorkbench from 'ith-view-workbench'
 Vue.use(IthWorkbench)

组件内引入(推荐,不会污染全局)

<script>
import 'ith-view-workbench/lib/ith-view-workbench.css'
import ThWorkbench from 'ith-view-workbench/packages/workbench'

export default {
  components: {
    ThWorkbench
  }
}
</script>

使用示例 一

<template>
  <div>
    <th-workbench
        ref="refWorkbench"
        :layout-data="layoutData"
        :card-data="cardData"
        height="calc(100vh - 96px)"
        @save="saveEvent"
        @cancel="cancelEvent"
    >
      <template #component="{data}">
        <component :is="data.component" :card-data="data" />
      </template>
    </th-workbench>
  </div>
</template>

<script>
import 'ith-view-workbench/lib/ith-view-workbench.css'
import ThWorkbench from 'ith-view-workbench/packages/workbench'

// 批量导入工作台卡片内所需组件
const nativeComponents = {}
const importComponentsFn = require.context('./slotComponents', true, /\.vue$/)
importComponentsFn.keys().forEach(v => {
  const cmp = importComponentsFn(v).default
  nativeComponents[cmp.name] = cmp
})

export default {
  name: 'Workbench',
  components: {
    ThWorkbench,
    ...nativeComponents
  },
  data () {
    return {
      layoutData: [],
      cardData: []
    }
  },
  created() {
    this.getDetailFn()
    this.getAllCardFn()
  },
  methods: {
    // 保存数据
    saveEvent() {
      this.$http.post('/admin/biz/commonwork/addworksetinfo', { cardData: JSON.stringify(this.layoutData) }).then(res => {
        this.$message.success(res.msg)
      }).catch(() => {
        this.getDetailFn()
      })
    },
    cancelEvent() {
      this.getDetailFn()
    },
    // 获取当前配置的数据
    getDetailFn () {
      this.$http.get('/admin/biz/commonwork/getworksetinfo').then(({ ext = {}}) => {
        this.layoutData = ext.cardData ? JSON.parse(ext.cardData) : []
      })
    },
    // 获取所有卡片信息
    getAllCardFn () {
      this.$http.get('/admin/sys/card/querygroupworkcardlist').then(({ ext = [] }) => {
        // 组装卡片信息
        this.cardData = ext.map(v => ({
          ...v,
          x: 0,
          y: 0,
          w: Number(v.cardWidth),
          h: Number(v.cardHeight),
          i: v.cardId + '',
          catalogName: v.cardTypeValue,
          catalogType: v.cardType + '',
          secondCatalogType: v.cardScope + '',
          secondCatalogName: v.cardScopeValue,
          name: v.cardName,
          component: v.cardCode
        }))
      })
    }
  }
}
</script>

Attributes

参数	说明	类型	默认值	可选值	必填
height	工作台高度,建议使用 css函数计算calc,总高度=可视高度-各种边距,示例 calc(100vh - 96px)	string	100%	--	--
layoutData	布局数据,属性参考下面#item	array	--	--	是
cardData	所有卡片数据,属性参考下面#item	array	--	--	--
colNum	一行多少列,列越多越细腻,肉眼可视越顺滑,但性能损耗越大	number	100	--	--
rowHeight	每行默认高度单位为像素	number	1	--	--
margin	每个卡片边距,数组中第一个元素表示水平边距，第二个表示垂直边距，单位为像素	array	[10, 10]	--	--
onlyRead	只读模式, 只读模式下不可调整布局等操作	boolean	false	--	--
navTitle	顶部导航标题文字	string	我的工作台	--	--

事件

事件名	说明	参数	返回值
save	点击保存时触发	--	--
cancel	点击取消时触发	--	--

Item 卡片数据参数

参数	说明	类型
cardChart	是否为内置图表组件, 1-是 0-否	number
chartType	内置图表组件时生效, line-折线图 bar-柱状图 pie-饼图 radar-雷达图 funnel-漏斗图 progress-进度条	string
chartUri	图表请求地址,需为get类型,如有参数可以放在链接后拼接	string
i	栅格中元素的ID	string
x	标识栅格元素位于第几列，需为自然数	number
y	标识栅格元素位于第几行，需为自然数	number
w	标识栅格元素的初始宽度，值为colWidth的倍数	number
h	标识栅格元素的初始高度，值为rowHeight的倍数	number
catalogName	分类类型名称	string
catalogType	分类类型值	string
secondCatalogName	二级分类类型名称	string
secondCatalogType	二级分类类型值	string
name	卡片名称	string
component	卡片对应组件名(此名称为项目中实际可使用的组件,务必注意正确性,且已存在)	string

slots

name	说明
component	每个卡片的内容.参数为 { data, $index } data-卡片对应数据. $index-生成索引

内置图表组件类型

name	说明	数据格式
line	折线图	查看 (opens new window)
bar	柱状图	查看 (opens new window)
pie	饼图	查看 (opens new window)
radar	雷达图	查看 (opens new window)
funnel	漏斗图	查看 (opens new window)
progress	进度条	查看 (opens new window)