Pbk-table NPM | npm.io

pbk-table

图例-后台统配页面.png 图例-前台编辑页面预览.png

cbim应用，统一配置表单：为满足cbim各个应用的表单页面进行统一配置、适当简化前端开发过程；实现表单的统一性，让开发者只关注数据层的表单组件；

组件基于 vue3 + Antd Vue

安装 Install

npm i pbk-table
// or
yarn add pbk-table

样式 Style

基于cbim的统一UI，需要自己另行安装引用，默认基于 antd 的初始化 UI

亲测提示：尽量不要使用 vite + vue3 来构建项目，然后调用此组件的依赖样式，会报一些 Less 的 bug

npm i @cbim/design-system-antd-adapter
npm i @cbim/design-system-variable
// or
yarn add @cbim/design-system-antd-adapter
yarn add @cbim/design-system-variable

// main.ts
import { createApp } from 'vue'
import Antd from 'ant-design-vue'
import pbkTable from '@/components/CTable/index'
// 基于 cbim 统一 ui 的 style 用法
import '@cbim/design-system-antd-adapter/vue.less'
import '@cbim/design-system-variable/index.css'

......

createApp(App).use(pbkTable)

使用 Usage

本组件提供了一些回调方法和

<template>
    <pbkTable
        className="custom-name"
        ref="refPbkTable"
        :viewData="testData"
        :get-data-error="true"
        @provideOptionData="..."
        @handleChange="..."
        @popupHandle="..."
        @handleUploadFile="..."
        @handleRemoveFile="..."
    />
</template>

提供的回调方法

参数	说明	类型	默认值
viewData	表单数据（参数在下边说明-A）	Object	空
className	自定义类名	string	空
table-type	表单应用模式设置，可选值 'view'、'edit'	string	edit
is-allow-select-block	是否使用表单组件可选中功能，开启后点选组件会展示被选中样式，同时配合 handleBlockSelect 事件，可接收到点选组件数据，目前数据返回仅为模板数据	boolean	false
handleBlockSelect	is-allow-select-block 开启后才会触发此事件，默认不会触发	(selectTemplateData) => {}
get-data-error	是否使用表单内置的，全局验证的错误提示，如 true：调用 GetFormData 方式时，表单会自动校验并进行全局提示；false：调用 GetFormData 方式时，表单不会对表单填写数据进行校验，如想对用户填写数据进行校验，可调用 CheckFormData 方法；	Boolean	true
provideOptionData	表单内，如含有选择性的组件（radio，checkbox，select，cascader），表单会根据拥有此类组件的个数，对应触发该方法，参数有 2 个，(selectKey, callBack)=>{}，需要开发者通过 selectKey 去独立获取值集数据，通过回调方法传入值集数据，callBack 回传的参数格式：callBack(options:Array\<Option>)，数据格式 Option:{value: string, label: string, children?: Arry\<Option>}	(selectKey, callBack) => { }
handleChange	表单内发生数据变化的触发事件；给开发者提供数据改变的组件模板、数据、权限的数据对象，方便做对应的前置业务处理（提示：这里如果不是业务需求，请尽量不要修改 authority ，权限分三种，w：可编辑，r：只读，n：隐藏组件）	(mould, data, authority) => { }
handleUploadFile	上传组件，选择并添加文件后的触发事件，表单的上传功能需要各个应用自行进行上传文件至不同服务器，上传成功后,通过 callBack 回调方法通知表单，通过 callBack 传入上传成功的文件数据,回传的参数格式：callBack(Array\<FileItem>)，数据格式 FileItem:{id: string, name: string, url: string}	(files, callBack) => { }
handleRemoveFile	删除已上传文件的触发事件，开发者通过触发事件的参数，请求应用的服务器进行删除，删除成功后通过 callBack 回调方法，通知表单 callBack(status: boolean)	(file, callBack) => {}
popupHandle	弹窗的触发事件，当用户点击弹窗组件选择时，表单此事件触发，开发者需要根据事件返回参数（参数在下边说明-B）调用弹窗，进行弹窗内独立的业务逻辑操作，选择完成后调用 callBack(data:Arry\<Item>) 方法，把数据传入表单	(result, callBack) => {}

参数及API

// A 表单数据案例
// 此数据是根据表单 ID，从具体应用平台请求返回的，viewData 需要此数据结构
{
  "TemplateList": [], // 模板数据列表
  "FormValues": {}, // 表单数据
  "AuthorityList": {}, //  表单权限数据
  "IndexKeyList": {}, // 表单组件索引（备用数据）
  "TableInfo": {} // 表单信息
}

// B 选择器事件触发返回参数
{
  target: {
    // 选择器的 key，不同选择器调用不同的 key。
    // 目前规定的三个选择器 key 分别为：
    // 1：ProjectModal 项目选择器   2：PersonnelModal 人员选择器    3： DepartmentModal 部门选择器
    key: 'PersonnelModal',
    name: '人员选择器'
  },
  data: {
    mould,
    // 模板数据
    data,
    // 数据结构
    authority
    // 权限数据
  }
}