cbim-table

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

组件基于 vue3 + Antd Vue

安装 Install

npm
i
cbim - table
// or
yarn
add
cbim - 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 cbim

-table
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(cbim - table)

使用 Usage

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

<template>
    <cbim-table
        className="custom-name"
        ref="refCbimTable"
        :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
    // 权限数据
  }
}

提供的可通过 ref 调用的方法

| 参数 | 说明 | 类型 | 默认值 | 版本 | | ----- |:----| :----:| :----:| ----:| | GetFormData | 获取表单数据 | | | | | CheckFormData | 对用户填写的表单数据进行校验，原则基于是否满足配置时所选的填写需求 | | | |

许可 License

尚未提供予第三方使用配置功能；

支持 Support

如有 bug 可在企业微信联系我。