rd_plat v1.3.24

Install

npm i rd_plat

Usage

在main.js中引入所需组建包，并注册为Vue组件

// 目前仅支持按需加载
import {RdHeader, RdNav, ...} from 'rd_plat'

Vue.component('RdHeader', AppHeader)
Vue.component('RdNav', AppNav)

为避免iview的样式冲突，本组件中不再引用view-design的样式，需要在项目中安装view-design或iview（二选一）并引用样式。如果您的项目本身包含了iview或view-design可忽略此步骤

Components

RdHeader

平台的统一头部。参数和事件均可按组划分：program组、productLine组、search组、yyzone组、message组、help组、user组。开发者可根据项目需要使用的组进行配置。

props

events

代码示例

<template>
    <rd-header
         style="z-index:999"
         :curProgram="curProgram"
         :programs="programs"
         @on-program="handlechangeProgram"
         :hasProductLine="true"
         :curProductLine="curProductLine"
         :productLines="productLines"
         @on-productline="handleChangeProductLine"
         :hasSearch="true"
         @on-search="handleSearch"
         :hasYyzone="true"
         @on-yyzone="handleYyzone"
         :hasMessage="true"
         :messages="messages"
         @on-message="handleMessage"
         :hasHelp="true"
         @on-help="handleHelp"
         :hasAvatar="true"
         :avatarList="avatarList"
         @on-avatar="handleAvatar">
    </rd-header>
</template>
<script>
		export default {
      	data() {
          return {
              curProgram: 'program01',
              programs: [{
                  id: "program01",
                  title: "产品管理系统"
              }],
              curProductLine: 'line01',
              productLines: [{
                  id: 'line01',
                  title: '产品线1'
              }]
           }
        },
      methods: {
        	handlechangeProgram(id) {
            this.curProgram = id
          },
        	handleChangeProductLine(id) {
            this.curProductLine = id
          },
        	handleSearch(val) {
            console.log('search: ',val)
        	},
        	handleYyzone() {
            console.log('clicked yyzone')
          },
        	handleMessage(id) {
            console.log('message--', id)
        	},
        	handleHelp() {
            console.log('help---')
        	},
        	handleAvatar(id) {
            console.log('avatar---', id)
        	}
      }
    }
</script>

RdNav

平台的统一左侧菜单，支持离开页面的提示弹窗（注意：无论对弹窗进行何等操作页面都会跳转，区别在于在跳转之前是否执行本页面的一些操作例如保存数据等）

props

// iconConfig 结构
[
  {
    'code': 'line',
    'icon': 'iconluxiantu',
  },{
    'code': 'theme',
    'icon': 'iconzhanlvezhuti',
  }
  ...
]

events**

代码示例

// app.vue
<template>
    <rd-nav
        :data="menuList"
        :iconConfig="iconConfig"
        :defaultClosed="true"
        @on-select="handlePageJump">
    </rd-nav>
</template>
<script>
		export default {
      data() {
          return {
             	menuList: [
                {
                  "code": "line",
                  "title": "路线图",
                  "type": "BUSINESS",
                }, {
									"code": "character",
                  "title": "需求管理",
                  "type": "BUSINESS",
                  "childMenu": [{
                    "code": "featureEntry",
                    "title": "特性录入",
                    "type": "BUSINESS",
                  }]
                }
              ]
           }
      },
      methods: {
        	handlePageJump(code) {
            this.$router.push({
                path: "/" + code
            })
        	}
      }
    }
</script>

// 离开时需要弹出提示的页面
<template>
   ...
</template>
<script>
		export default {
      data() {
          return {

          }
      },
      mounted() {
        // 监听离开页面
        this.$eventbus.$off('on-leave-page').$on('on-leave-page', (params) => {
            params.path = '/productlineGoal' // 当前离开页面的路有
            params.hasChange = this.hasChange // 是否需要弹窗，true为需要，false为不需要
            params.message = 'productlineGoal-changed' // 弹窗提示信息
        })
        // 监听弹窗确定按钮
        this.$eventbus.$off('on-leave-ok').$on('on-leave-ok', (path) => {
            if (path == '/productlineGoal') {
              	// do something
            }
        })
      }
    }
</script>

RdDropdown

Poptip风格的dropdown

props

events

RdFilter

筛选条件管理组件

usage

// 使用
<rd-filter
 ref="RdFilter"
 :fields="fields"
 :remoteMethod="remoteMethod"
 dateFormat="YYYY-MM-DD"
 dateTimeFormat="YYYY-MM-DD HH:mm:ss"
 confirmBtn="OK"
 @on-filter="handleFilter">
</rd-filter>

props

1. fields 条件数组

[
  {
    "code":"字符串，字段编码，如：product",
    "parent":"字符串，上级编码，如：product-line",
    "label":"字符串，自编标签，如：人员",
    "dataType":"枚举型，值：STRING/DATE/DATETIME/NUMBER/，数据类型",
    "inputType": "枚举型，输入控件类型，包含文本框、下拉框、日期等 ~",
    "multi": "布尔型，是否同时具有多个值",
    "defaults": ["默认值"],
    "options": ["备选项1","备选项2"],
    "refs": {
        "from":"来源实体",
        "aid":"主键字段",
        "title":"名称字段",
        "relation":"关联字段名称，如本表产品线ID"
    }
	}
]

注：如果设置父级条件，dataType请设置为合理的类型，不使用介于操作符可以避免组件出现不必要的报错。

下面列出四种dataType对应的操作符类型：

STRING: 包含 / 不包含 / 等于 / 不等于 / 模糊匹配

DATE/DATETIME: 等于 / 大于 / 大于等于 / 小于 / 小于等于 / 介于

NUMBER: 等于 / 大于 / 大于等于 / 小于 / 小于等于

2. remoteMethod 远程获取select型输入框的option

remoteMethod方法有两个参数，第一个参数接受field对象的refs，用于发送远程获取options的请求，第二个参数为回调，需要将请求结果，传入回调，组件会根据回调函数接受的option渲染

remoteMethod(refs,callback) {
  // console.log('ajax_req_params(refs):', refs)
  setTimeout(()=>{
    let data = [
      {
        aid: 'id-01',
        title: '备选值111'+refs.relValue
      }, {
        aid: 'id-02',
        title: '备选值2'+refs.relValue
      }, {
        aid: 'id-03',
        title: '备选值3'+refs.relValue
      }
    ]
    callback(data)
  }, 500)
},

3. dateFormat 日期格式

用于规定datePicker输出日期的格式(YYYY-MM-DD)，如果不传默认输出时间戳

4. dateTimeFormat 日期时间格式

用于规定dateTimePicker输出日期的格式(YYYY-MM-DD HH:mm:ss)，如果不传默认输出时间戳

5. confirmBtn 是否显示提交按钮以及提交按钮的文字

如果需要组件提提交按钮需要设置此项，并将值设置为提交按钮的文字。触发提交的回调为on-filter事件。

如果不需要提交按钮则不设置此项或设置此项的值为false，通过组件提供的handleSubmit方法获取值。

event

1. on-filter 点击确定回调（设置了confirmBtn时有效）

返回值不为空的有效的条件

// 返回体
[
    {
        "code":"字符串，字段编码，如：product",
        "dataType":"枚举型，值：STRING/DATE/DATETIME/NUMBER，数据类型",
        "compareType":"枚举型, 值见CompareType对象，对比方式、默认是等于",
        "values":[]
    }
]

2. handleSubmit 手动获取已添加的条件

返回体同on-filter方法

// 调用方法
this.$refs.RdFilter.handleSubmit((data) => {
  console.log('fromEvent', data)
})

RdDashBoard

仪表盘

props

1. draggable: 是否可以拖拽调整布局（默认值false）
2. resizable: 是否允许拖拽调整单个卡片的大小（默认值false）
3. editable: 是否允许编辑（目前只开放删除卡片）（默认值false）
4. host: 卡片内请求的host，（接口是固定的）（必传）
5. analyseId: 仪表盘（分析模型）的id（必传）

event

1. on-update：仪表盘根据id获取分析模型后向外传出分析模型

methods

1. addItem(item, itemId)

  该方法为 向 grid-layout 组件动态添加卡片的方法
  1. 完整的 item 对象，参照sizeOption
  2. itemId 在外部生成唯一的Id

2. handleSaveLayout：保存布局，可传入resolve方法

usage

<rd-dash-board
    ref="DashBoard"
    :draggable="true"
    :resizable="true"
    :editable="true"
    :host="host"
    :analyseId="analyseId"
    @on-update="dashBoardUpdata">
</rd-dash-board>

// 添加方法需要引用组件的卡片配置
import sizeOption from 'rd_plat/src/components/DashBoard/sizeOption.js'
export default {
  methods: {
    // 新增卡片
    handleAddReport(card) {
      let itemId = 'CardId-' + new Date().getTime()
      let item = sizeOption[card.cardType]
      item.aid = card.aid
      this.$refs.DashBoard.addItem(item, itemId)
    },
    // 保存布局
    handleSaveLayout() {
      this.$refs.DashBoard.handleSaveLayout()
    },
    // 获取更新后的看版信息（标题）
    dashBoardUpdata(dashBoard) {
      this.title = dashBoard.title
    },
  }
}

RdCardBoard

（单个）报表展示看板

props

1. host: 同仪表盘的host
2. cardId: 卡片模型（报表）id

event

on-update：同仪表盘的on-update

usage

<rd-card-board
    :host="host"
    :cardId="sourceId"
    @on-update="cardBoardUpdata">
</rd-card-board>

Utils

工具类

// 与模块一同引入
import {..., RdTools} from 'rd_plat'

// 定义到Vue原型或者直接使用RdTools
Vue.prototype.$rdTools = RdTools

// 使用
this.$rdTools.loading(false)

functions

1. loading 全屏加载遮罩层

参数:

(1) status: Boolean // 遮罩层的显示/隐藏

(2) contents: String // 自定义文字

// 开启
this.$rdTools.loading(true, 'loading。。。')
// 隐藏
this.$rdTools.loading(false)

Versions