K6CorePC库API

K6CorePC库API说明

@k6/core-pc命名导出如下api

import {
  getPluginPropTypes,
  formCreateDrawer,
  formDisplayDrawer,
  websitePreviewDrawer
} from '@k6/core-pc'

getPluginPropTypes

getPluginPropTypes声明了表单组件的所有props

在写自定义表单组件时，使用@k6/core-pc导出的getPluginPropTypes来声明props

import { getPluginPropTypes } from '@k6/core-pc'
export default {
  name: 'DemoFormInput',
  props: {
    ...getPluginPropTypes
  },
}

formCreateDrawer

弹出新增状态的表单，普通表单为新增表单，流程表单为发起流程等效于原型链方法this.$form.create().show({})

record参数

// flowType 类型枚举值 
export const KEY_FLOW_TYPE = {
  CREATE: -1,   // 创建流程 => 前端自己定义的状态
  TODO: 3,      // 待办
  INITIATOR: 4, // 申请
  DONE: 5,      // 已办
  DRAFT: 6,     // 草稿
  DELEGATE: 7,  // 委托代理
  MONITOR: 8,   // 流程监控
  DESTROY: 9,    // 流程删除
  SEARCH: 10,   // 流程查询
  NOTIFY: 11    // 知会
}

使用示例

import { formCreateDrawer } from '@k6/core-pc'

// 新增表单
function addHandler() {
  formCreateDrawer().show({
    record: {
      action: KEY_FORM_ACTION_TYPE.ADD,
      formId: state.formId,
      formType: state.formType,
      name: state.authRaw.name
    },
    onCloseCallback() {
      // TODO: 关闭回调
    }
  })
}

formDisplayDrawer

弹出编辑和详情状态的表单, 等效于原型链方法this.$form.display().show({})

record参数

使用示例

import { formDisplayDrawer } from '@k6/core-pc'
// 编辑某一行数据
function editHandler () {
  formDisplayDrawer().show({
    record: {
      formId: state.formId,
      action: KEY_FORM_ACTION_TYPE.EDIT,
      rowId: record.id,
      formType: state.formType,
      name: state.authRaw.name
    },
    onCloseCallback: function() {
       // TODO: 关闭回调
    }
  })
}

websitePreviewDrawer

弹出网站预览页面，使用iframe加载链接等效于原型链方法this.$websitePreviewDrawer().show({})

Props

使用示例

import { websitePreviewDrawer } from '@k6/core-pc'
// 编辑某一行数据
function previewUrl () {
  websitePreviewDrawer.show({
    url: 'http://www.baidu.com',
    title: '百度',
    onCloseCallback: function() {
       // TODO: 关闭回调
    }
  })
}

DEMO下载

下载开发demo请点击这里