CreateFormView
基于视图渲染的表单，表格的页面组件
说明
- 表格的操作列不用代码写死，直接在视图按钮那配置，将是否操作按钮选择 true
- 多级表格配置除了配父子关联之外，还得注意父级 col_level 为 1，col_span 为子级的个数，二级 col_level 为 2,col_span 为 1
- 多级表格如果合计行的列数与表格不一致，请检查 col_span，col_level
- 表格的合计在视图那配置是否合计,开启后默认金额列都会合计
- 豆腐块上面的按钮视图样式类型配置支持 主，次，普通 三种类型，在备注配置 btnLevel，同 create-view 组件
- 表单项的 disable 优先级 视图定义 > sectionDisable > pageDisabled ,最后前三者都不为 true 时，disabledCondition 生效
- 下拉和树形下拉多选时暂不支持配置缺省值，缺省值赋值仅支持字符串类型和是否的数字类型
基本用法
示例
vue
<template>
<div>
<CreateFormView
ref="createFormRef"
:all-ui-views="formUiViews"
:form-data="formData"
:dataSource="dataSource"
:is-anchor="true"
show-type="card"
:tabBeforeChange="tabBeforeChanges"
>
<template #cardInfo_QUOTA_LIST>
<a-alert message="提示信息" type="warning" show-icon />
</template>
</CreateFormView>
</div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
// 引用组件
import { CreateFormView } from 'ctj-ui-next'
const formUiViews = reactive({})
const formData = reactive({})
const dataSource = reactive({
BILL_LIST: [{}, {}],
})
const tabBeforeChanges = async (prev: any, next: any) => {
return new Promise((resolve, reject) => {
if (next == 'comMeetingTopicsPOS') {
resolve(false)
} else {
resolve(true)
}
})
}
</script>
<style lang="less" scoped></style><template>
<div>
<CreateFormView
ref="createFormRef"
:all-ui-views="formUiViews"
:form-data="formData"
:dataSource="dataSource"
:is-anchor="true"
show-type="card"
:tabBeforeChange="tabBeforeChanges"
>
<template #cardInfo_QUOTA_LIST>
<a-alert message="提示信息" type="warning" show-icon />
</template>
</CreateFormView>
</div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
// 引用组件
import { CreateFormView } from 'ctj-ui-next'
const formUiViews = reactive({})
const formData = reactive({})
const dataSource = reactive({
BILL_LIST: [{}, {}],
})
const tabBeforeChanges = async (prev: any, next: any) => {
return new Promise((resolve, reject) => {
if (next == 'comMeetingTopicsPOS') {
resolve(false)
} else {
resolve(true)
}
})
}
</script>
<style lang="less" scoped></style>属性 Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| allUiViews | 视图数据(必填) | UiData | - | - |
| formData | 表单数据(必填) | Record<string, any> | - | - |
| dataSource | 表格数据(必填) | Record<string, any[]> | - | - |
| showType | 展示类型 | CreateFormShowType | 'line' or 'card' | line |
| isAnchor | 是否显示锚点 | boolean | - | false |
| viewConfigData | 表单表格配置 | viewConfig | 参考viewConfig 配置 | - |
| saveRules | 保存校验规则 | SaveRule[] | 参考SaveRule 说明 | - |
| cusOptionObj | 自定义的下拉框下拉树的 options 数据 | Record<string, any[]> | - | - |
| cardContentH | showType='card'时最小高度，不传默认内容高度 | number | - | - |
| pageDisabled | 是否让整个页面 disabled | boolean | - | false |
| uploadParams | 附件上传需要的参数 | UploadParams | 参考UploadParams 配置 | - |
| billTypeId | 业务类型 id | string | - | - |
| queryExtra | 通用的接口参数 | QueryExtra | 参考queryExtra 配置 | - |
| namedType | 下拉等，拼接 id，name 的命名方式 | 'hump' / 'underline' | hump：驼峰，underline：下划线 | - |
| importConfig | 导入参数配置 | {tempType?:string,templatePath?: string} | tempType:模版 code，templatePath：下载路径 | - |
| formTotalCol | 表单总共显示列数，默认一行显示 3 列 | - | 1/2/3 | - |
| attachGetAttribute | 附件模块默认 get_attrtibute | string | - | 'pmApplyAttachList' |
| invoiceGetAttribute | 发票模块默认 get_attrtibute | string | - | 'invoiceDTOS' |
| tabBeforeChange | 页签切换限制函数 | Promise | - | tabBeforeChange(prev:当前页签 key,next:即将切换的页签 key) |
| formShowType | 表单展现形式：表单模式/打印模式 | FormShowType | - | FormShowType.form |
| rowData | 编辑进入的当前行数据 | object | - | {} |
| formLayoutType | 表单布局 | FormLayoutType | 'horizontal''vertical''inline' | 'horizontal' |
事件 Events
| 事件名 | 说明 | 回调参数 | 参数说明 |
|---|---|---|---|
| headerBtnClick | 豆腐块上的按钮点击事件 | ({type,btn,get_attribute}:HeaderBtnParams) type 当前按钮的 icon，btn 当前点击的按钮， get_attribute 当前豆腐块的 get_attribute | |
| tableFormChange | 表格内的 form 表单 change 事件 | ({value,column,index,dateStrings,option}:tableFormParams,get_attribute:string) value 当前 form 表单的 value， column 当前 form 表单的 column，index：当前行 index，dateStrings 为范围日期框的字符串日期数组，option 为下拉框，下拉树当前选择的 option | |
| formChange | 表单内的 form 表单 change 事件 | ({value,column,dateStrings,option}:tableFormParams,get_attribute:string) value 当前 form 表单的 value， column 当前 form 表单的 column，dateStrings 为范围日期框的字符串日期数组，option 为下拉框，下拉树当前选择的 option | |
| operate | 表格内的按钮点击事件 | ({record,column,index}:OperateParams) record 当前行数据， column 当前操作按钮的属性，index：当前行 index | |
| doModalCheck | 弹框选中事件 | (selectRows，currentBtn，index，closeJumpModal) selectRows 选中的数据， currentBtn 当前点击的按钮或者表单项 index 当前行的 index，表格时有用，closeJumpModal 手动关闭三级弹框方法 | |
| tableAddRow | 表格新增事件 | ({dataSource,get_attribute}) dataSource 当前表数据， get_attribute 当前豆腐块的 get_attribute | |
| formClick | 自定义下拉框的 formatter 显示的点击事件 | ({column,event,index},get_attribute:string) | - |
| importSuccess | 导入成功事件，传了 tempType 时直接调接口成功的事件 | (data, get_attrtibute) | 接口返回的数据，不一定有、当前导入按钮所在区块的 get_attrtibute |
| importFulfill | 导入文件完成事件，没传 tempType 时的导入完成事件 | formData, get_attrtibute | 文件数据、当前导入按钮所在区块的 get_attrtibute |
| downloadTemplate | 下载按钮点击事件，不传 templatePath，tempType、templateParams 时抛出的事件 | get_attrtibute | 当前导入按钮所在区块的 get_attrtibute |
| formTabChange | create-form-view showType='card'并且未传递 tabBeforeChange 时抛出事件 formTabChange,参数为当前页签的 key |
方法和数据
| 方法名 | 说明 | 参数 | 参数说明 | 备注｜ |
|---|---|---|---|---|
| formValidate | 触发表单表格的必填校验 | 回调函数中传会传出 formData，dataSource | createFormRef.value.formValidate().then(async () => {}) | - |
| clearHideData | 删除隐藏区块的对象数据 | 无 | 示例：BillFormRef.value?.clearHideData() | |
| toggleCalc | 触发计算 | (get_attribute,singleParams?: { column: any; index?: number }) | 豆腐块 get_attribute,singleParams:当需要触发单表时传，其中 index 时表格时传 示例：BillFormRef?.value?.toggleCalc('SERVICE_DETAIL') | |
| initAfterDetail | 获取到详情数据之后初始化操作（目前执行了 js 脚本，联动规则） | - | 示例：createFormRef.value.initAfterDetail() | - |
| refreshAttachData | 刷新附件数据 | - | - | - |
| formData | createFormView 的 formData 数据 | - | - | - |
| dataSource | createFormView 的 dataSource 数据 | - | - | - |
| eleDataObj | createFormView 的下拉数据数据 | - | - | - |
viewConfig 配置
viewConfig 的数据格式为{[key: string]: viewConfigItem},key 为每个豆腐块的 get_attribute,值为 viewConfigItem 类型的数据，下表是 viewConfigItem 的配置
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| showIndex | 是否显示序号列（表格时才生效） | boolean | - | false |
| rowKey | 表格的 rowKey，当需要显示复选框，单选框时，rowKey 必传 | string | - | - |
| visible | 是否显示该豆腐块 | boolean | - | true |
| isAdd | 是否显示新增按钮（表格时才生效） | boolean | - | true |
| isDelete | 是否显示删除操作（表格时才生效） | boolean | - | true |
| isCopy | 是否显示复制操作（表格时才生效） | boolean | - | true |
| cusDelete | 是否自己处理删除操作，传 true 时，内部不进行删除，由外部自己写删除逻辑 | boolean | - | false |
| cusCopy | 是否自己处理复制操作，传 true 时，内部不进行复制，由外部自己写复制逻辑 | boolean | - | false |
| cusAdd | 是否自己处理新增操作，传 true 时，内部不进行新增，自己监听 tableAddRow 事件 | boolean | - | false |
| cusSummary | 是否自己写表格总结栏，自己写了这个，合计行不生效了 | boolean | - | false |
| primaryKey | 当内部处理复制时，需要传一个 id 的名称，防止复制的时候把 id 也复制了 | stirng | - | - |
| isAttachDown | 附件列表是显示附件下载按钮 | boolean | - | true |
| cusAttachDown | 是否自己处理附件下载 | boolean | - | false |
| isAttachDelete | 附件列表是显示附件删除按钮 | boolean | - | true |
| sectionDisabled | 当前豆腐块是否 disabled | boolean | - | false |
| pagination | 分页配置，如需分页，参考 antd-vue 表格那的分页配置 | boolean/TablePaginationConfig | - | false |
| footerConfig | 合计行配置 | 参考footerConfig 配置 | - | - |
| columnConfig | 表单项配置(表格，表单) | [key: string]: UiColumnConfig，key 为 field_code,参考columnConfig 配置 | - | - |
| originColumnConfig | 表格对表格列原始 antDesign-vue 配置(表格) | [key: string]: any，key 为 field_code | - | - |
| operateConfig | 表格的操作列配置 | [key: string]: OperateConfig，key 为每个按钮的 type,参考operateConfig 配置 | - | - |
| buttonConfig | 豆腐块的按钮配置（专门配置弹出框的参数） | [key: string]: JumpButtonConfig，key 为每个按钮的 icon,参考JumpButtonConfig 配置 | - | - |
| btnConfig | 豆腐块的按钮配置 | [key: string]: {disabled:boolean,visible:boolean} | disabled 是否禁用,visible:是否显示 | - |
| requiredFn | 是否显示必填星号* | (record, column):boolean=>{} | - | - |
| isTextFn | 是否显示 text | (record, column):boolean=>{} | - | - |
| recordDisabledFn | 是否行禁用 | (record, column):boolean=>{} | - | - |
| requiredFn | 是否显示必填星号* | (record, column):boolean=>{} | - | - |
| handleRowExpand | 表格展开行处理函数 | (expanded, record)=>{} | - | - |
| isVirtualScrolling | 是否开启虚拟滚动 | boolean | - | false |
| cardTipStyle | 区块提示信息的个性化样式 | object | - | {display: inline-block;color: red; font-size: 14px; padding: 0 14px;} |
其余表格 antd 原生配置也支持(#https://www.antdv.com/components/table-cn#table)
uploadParams 说明
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| isUpload | 是否需要附件上传(必传) | boolean | - | false |
| billTypeId | 表单对应的 billTypeId(必传) | string | - | - |
| billId | 表单对应的 billId(必传) | string | - | - |
| businessType | 表单对应的 businessType(必传) | string | - | - |
| attach_remark | 上传附件需要的 attach_remark | string | - | - |
| pro_code | 上传附件需要的 pro_code | string | - | - |
| his_id | 上传附件需要的 his_id | string | - | - |
| is_additional | 上传附件需要的 is_additional | any | - | - |
| isDisable | 是否 disabled | boolean | - | false |
| isCamera | 是否显示高拍仪上传 | boolean | - | false |
| isFilterDevice | 高拍仪上传时是否需要过滤电脑白名单 | boolean | - | false |
footerConfig 配置
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| visible | 是否显示合计行 | boolean | - | false |
| titleKey | “合计”显示在哪一列 | string | - | - |
| title | ‘合计’名称 | string | - | ‘合计’ |
| computedKeys | 需要计算的列 | string[] | - | - |
columnConfig 配置
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| showBtn | 是否显示右边的按钮(只有输入框和特殊框生效) | boolean | - | false |
| dataFormateType | 日期框的 formateType | string | - | 日期框：YYYY-MM-DD，有时分秒的：YYYY-MM-DD HH:mm:ss |
| visible | 是否显示当前表单项，默认显示 | boolean | - | true |
| getDisableDate | 日期框或日期范围框 disableDate 的回调函数 | (current,record):date=>{} | - | - |
| getDisableTime | 日期框或日期范围框 disableTime 的回调函数 | (current,record):date=>{} | - | - |
| disabledCondition | 表单 disable 的回调函数 | (record):boolean=>{} | - | - |
| getClassName | 设置表单的 class | (record):string=>{} | - | - |
| chooseModal | 当 showBtn=true 时，点击右侧按钮的响应函数 | (record, index, column)=>{} | - | - |
| formatter | 控件类型为特殊框时的自定义渲染函数（可以为 html） | (record)=>{} | - | - |
| columnFormatter | 自定义渲染函数（可以为 html） | (record)=>{} | - | - |
| cusRender | 自定义渲染组件（必须为 vue 的 h 函数书写） | (record)=>{} | - | - |
| textFormate | 自定义 显示 函数,只有输入框以及文本框时有效，textFormate 与 columnFormatter 的区别在于 textFormate 只处理当前文本的显示，输入框还保留，columnFormatter 是直接显示函数返回的内容 | (record)=>{} | - | - |
| cellOption | 自定义下拉数据，可以配置表格同一列中不同行的 options | (record)=>{} | - | - |
| isRequired | 当前字段是否必填 | boolean | - | - |
| defaultMaskStatus | 需要掩码的默认是否需要掩码 | boolean | - | - |
| buttonConfig | showBtn=true 时右侧按钮配置（专门配置弹出框的参数） | JumpButtonConfig，参考JumpButtonConfig 配置 | - | - |
| isConcat | 是否允许使用拼接下拉 option | boolean | true/false | false |
| beforeClick | 点击获取验证码的按钮之前的判断，例如是否录入了手机号等 | ()=>{} | - | - |
| codeSeconds | 手机验证码倒计时秒数 | number | - | 60 |
| uploadParams | 单独文件上传组件的相关配置参数 | { limit?: number,type?: any,uploadUrl?: string,previewUrl?: string,listType?: string} | - | - |
| text | 分割线-文字 | string | - | - |
| orientationMargin | 分割线-标题和最近 left/right 边框之间的距离，去除了分割线，同时 orientation 必须为 left 或 right | number ｜ string | - | - |
| isCCAmount | 金额类组件是否显示汉字金额 | IsOrNOT | - | IsOrNOT.not |
operateConfig 配置
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| visible | 是否显示当前按钮，默认显示 | boolean | - | true |
| disabledCondition | 按钮的 disable 的回调函数 | (record):boolean=>{} | - | - |
| visibleCondition | 按钮的 是否显示 的回调函数 | (record):boolean=>{} | - | - |
JumpButtonConfig 配置
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| isCustom | 是否内部处理弹出框 | boolean | - | false |
| request | 弹出框表格接口及参数 | api，params | - | - |
| searchConfigs | 弹出框表格查询项配置 参考SearchConfig 配置 | api，params | - | - |
| options | 查询下拉数据 | {field_code:[]} | - | |
| modalWidth | 弹框宽度 | number ｜ string | - | '90%' |
| beforeShowModal | 弹框显示前的周期函数 | - | - | |
| cusHandleModal | 是否自己处理隐藏操作，设 true 时需要自己在 doCheck 以及 modalCancel 隐藏弹框 | boolean | - | false |
其它参数见 create-view tableConfigs 配置
queryExtra 配置
因为 create-view 组件内部现在有很多内部请求，有很多接口用的参数有相同的，为了避免重复传，公共的参数放在这里 | 参数 | 说明 | 类型 | 可选值 | 默认值 | | --- | --- | --- | --- | :-: | | businessType | 业务 id | string | - | - | | menuId | 菜单 id | string | - | - |
插槽
${get_attribute}是动态值,get_attribute 是每个豆腐块的get_attribute
| 插槽名称 | 数据 | 说明 |
|---|---|---|
| formHeader | - | 页面头部信息插槽 |
cardBtn_${get*attribute} | - | 豆腐块上的按钮插槽 |
cardInfo_${get*attribute} | - | 豆腐块顶部标题名称和右侧按钮中间的提示信息插槽 |
Demo
表格豆腐块显示自定义总结栏
- viewConfigs 对应 getAttribute 加上 cusSummary 为 true
js
const viewConfigs =
reactive <
viewConfig >
{
comMeetingTopicsPOS: {
cusSummary: true,
},
}const viewConfigs =
reactive <
viewConfig >
{
comMeetingTopicsPOS: {
cusSummary: true,
},
}vue
<CreateFormView
ref="createFormRef"
:all-ui-views="formUiViews"
:form-data="formData"
:dataSource="dataSource"
:is-anchor="true"
show-type="line"
:view-config-data="viewConfigs"
:cus-option-obj="cusOptionObj"
:upload-params="uploadParams"
:billTypeId="billTypeId"
:query-extra="QueryExtra"
@import-fulfill="handleImport"
@download-template="handleDownLoad"
@table-form-change="tableFormChange"
@operate="tableOperate"
@do-modal-check="handleModalCheck"
@form-click="handleFormClick"
@header-btn-click="handleHeaderBtnClick"
>
<template #summary_QUOTA_LIST="scoped">
<a-table-summary-row>
<template v-for="(column, index) in scoped.footerColumns" :key="index">
<a-table-summary-cell :fixed="column.fixed" :align="column.align" :index="index">
{{ column.dataIndex }}
</a-table-summary-cell>
</template>
</a-table-summary-row>
<a-table-summary-row>
<template v-for="(column, index) in scoped.footerColumns" :key="index">
<a-table-summary-cell :fixed="column.fixed" :align="column.align" :index="index">
{{ column.dataIndex }}
</a-table-summary-cell>
</template>
</a-table-summary-row>
</template>
</CreateFormView><CreateFormView
ref="createFormRef"
:all-ui-views="formUiViews"
:form-data="formData"
:dataSource="dataSource"
:is-anchor="true"
show-type="line"
:view-config-data="viewConfigs"
:cus-option-obj="cusOptionObj"
:upload-params="uploadParams"
:billTypeId="billTypeId"
:query-extra="QueryExtra"
@import-fulfill="handleImport"
@download-template="handleDownLoad"
@table-form-change="tableFormChange"
@operate="tableOperate"
@do-modal-check="handleModalCheck"
@form-click="handleFormClick"
@header-btn-click="handleHeaderBtnClick"
>
<template #summary_QUOTA_LIST="scoped">
<a-table-summary-row>
<template v-for="(column, index) in scoped.footerColumns" :key="index">
<a-table-summary-cell :fixed="column.fixed" :align="column.align" :index="index">
{{ column.dataIndex }}
</a-table-summary-cell>
</template>
</a-table-summary-row>
<a-table-summary-row>
<template v-for="(column, index) in scoped.footerColumns" :key="index">
<a-table-summary-cell :fixed="column.fixed" :align="column.align" :index="index">
{{ column.dataIndex }}
</a-table-summary-cell>
</template>
</a-table-summary-row>
</template>
</CreateFormView>