diff --git a/src/components/detail/detailInfo/index.tsx b/src/components/detail/detailInfo/index.tsx new file mode 100644 index 0000000000000000000000000000000000000000..939662f34de8327d79c013c15cc27c3afbaec907 --- /dev/null +++ b/src/components/detail/detailInfo/index.tsx @@ -0,0 +1,85 @@ +import React from 'react' +import { DetailField, DetailFieldConfig, DetailFieldError, IDetailField } from '../common' +import StatementHelper, { StatementConfig } from '../../../util/statement' +import marked from 'marked' + +export interface InfoDetailConfig extends DetailFieldConfig { + type: 'detail_info' + description?: { + descType: 'text' | 'tooltip' | 'modal' + label?: StatementConfig + mode: 'plain' | 'markdown' | 'html' + content?: StatementConfig + showIcon: boolean + }, +} + +export interface IInfoProps { + description?: { + descType: 'text' | 'tooltip' | 'modal' + label: string | undefined + content: React.ReactNode + showIcon: boolean + } +} + +export default class InfoDetail extends DetailField implements IDetailField { + renderComponent = (props: IInfoProps) => { + return + 您当前使用的UI版本没有实现InfoDetail组件。 + + } + + render = () => { + const props: IInfoProps = {} + const { + config: { + description + } + } = this.props + if(description) { + if(description.descType === 'text') { + props.description = { + descType: 'text', + label: StatementHelper(description.label, { data: this.props.data, step: this.props.step }), + content: description.content, + showIcon: description.showIcon + } + } else if (description.descType === 'tooltip') { + props.description = { + descType: 'tooltip', + label: StatementHelper(description.label, { data: this.props.data, step: this.props.step }), + content: description.content, + showIcon: description.showIcon + } + } else { + props.description = { + descType: 'modal', + label: StatementHelper(description.label, { data: this.props.data, step: this.props.step }), + content: description.content, + showIcon: description.showIcon + } + } + if(description.content !== undefined) { + const descriptionType = description.mode + switch (descriptionType) { + case 'plain': + props.description && (props.description.content = StatementHelper(description.content, { data: this.props.data, step: this.props.step })) + break + case 'markdown': + props.description && (props.description.content =
) + break + case 'html': + props.description && (props.description.content =
) + break + } + } + } + + return ( + + {this.renderComponent(props)} + + ) + } +} diff --git a/src/components/detail/index.tsx b/src/components/detail/index.tsx index 24ae0574587bd9fa0fb4b21556f333435775814c..a6b7057f1720785af5259b9e99ad741bc5829f44 100644 --- a/src/components/detail/index.tsx +++ b/src/components/detail/index.tsx @@ -5,6 +5,7 @@ import StatementDetail, { StatementDetailConfig } from './statement' import GroupField, { GroupFieldConfig } from './group' import ImportSubformField, { ImportSubformFieldConfig } from './importSubform' +import InfoDetail, { InfoDetailConfig } from './detailInfo' /** * 详情步骤内详情项配置文件格式定义 - 枚举 @@ -14,19 +15,23 @@ export type DetailFieldConfigs = EnumDetailConfig | StatementDetailConfig | GroupFieldConfig | - ImportSubformFieldConfig + ImportSubformFieldConfig | + InfoDetailConfig + export type componentType = 'text' | 'group' | 'detail_enum' | 'statement' | - 'import_subform' + 'import_subform' | + 'detail_info' export default { group: GroupField, text: TextField, import_subform: ImportSubformField, detail_enum: EnumDetail, - statement: StatementDetail + statement: StatementDetail, + detail_info: InfoDetail } diff --git a/src/index.tsx b/src/index.tsx index b193a0536d64a8ad4a2c1726d89d8c170a8c9941..297d872d096f12aa05bd4edbc411e97f9d2df2d8 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -58,6 +58,7 @@ export { default as DetailEunmField } from './components/detail/enum' export { default as DetailStatementField } from './components/detail/statement' export { default as DetailTextField } from './components/detail/text' export { default as DetailImportSubformField } from './components/detail/importSubform' +export { default as DetailInfoField } from './components/detail/detailInfo' export { default as HeaderStep } from './steps/header' diff --git a/src/steps/table/index.tsx b/src/steps/table/index.tsx index b77f143bfe75459b58506be8b69d6f7afa2cdb32..8a751a05c24cf4a1c227a38e3438809d878d9fe5 100644 --- a/src/steps/table/index.tsx +++ b/src/steps/table/index.tsx @@ -9,7 +9,8 @@ import CCMS, { CCMSConfig } from '../../main' import { cloneDeep, get, set } from 'lodash' import InterfaceHelper, { InterfaceConfig } from '../../util/interface' import ConditionHelper, { ConditionConfig } from '../../util/condition' - +import StatementHelper, { StatementConfig } from '../../util/statement' +import marked from 'marked' /** * 表格步骤配置文件格式定义 * - field: 表格列表数据来源字段 @@ -34,6 +35,13 @@ export interface TableConfig extends StepConfig { current?: string pageSize?: string total?: string + }, + description?: { + type: 'text' | 'tooltip' | 'modal' + label?: StatementConfig + mode: 'plain' | 'markdown' | 'html' + content?: StatementConfig + showIcon: boolean } } @@ -128,8 +136,14 @@ export interface ITable { onChange: (page: number, pageSize: number) => void } tableOperations: React.ReactNode | null + multirowOperations: React.ReactNode | null, + description?: { + type: 'text' | 'tooltip' | 'modal' + label: string | undefined + content: React.ReactNode + showIcon: boolean + }, leftTableOperations: React.ReactNode | null - multirowOperations: React.ReactNode | null } /** @@ -521,7 +535,6 @@ export default class TableStep extends Step { 您当前使用的UI版本没有实现Table组件的OperationDropdownItem部分。 } - renderOperationModal = (props: ITableStepOperationModal) => { const mask = document.createElement('DIV') mask.style.position = 'fixed' @@ -624,7 +637,8 @@ export default class TableStep extends Step { primary, columns, operations, - pagination + pagination, + description }, data, step, @@ -650,7 +664,6 @@ export default class TableStep extends Step { if (Object.prototype.toString.call(getDate) !== '[object Array]') { getDate = [] } - const props: ITable = { title: label, width, @@ -658,7 +671,6 @@ export default class TableStep extends Step { data: getDate, columns: (columns || []).filter((column) => column.field !== undefined && column.field !== '').map((column, index) => { const field = column.field.split('.')[0] - return { field, label: column.label, @@ -688,7 +700,44 @@ export default class TableStep extends Step { leftTableOperations: this.tableOperations(operations?.leftTableOperations || [], getDate), multirowOperations: null } - + if(description) { + if(description.type === 'text') { + props.description = { + type: 'text', + label: StatementHelper(description.label, { data: this.props.data, step: this.props.step }), + content: description.content, + showIcon: description.showIcon + } + } else if (description.type === 'tooltip') { + props.description = { + type: 'tooltip', + label: StatementHelper(description.label, { data: this.props.data, step: this.props.step }), + content: description.content, + showIcon: description.showIcon + } + } else { + props.description = { + type: 'modal', + label: StatementHelper(description.label, { data: this.props.data, step: this.props.step }), + content: description.content, + showIcon: description.showIcon + } + } + if(description.content !== undefined) { + const descriptionType = description.mode + switch (descriptionType) { + case 'plain': + props.description && (props.description.content = StatementHelper(description.content, { data: this.props.data, step: this.props.step })) + break + case 'markdown': + props.description && (props.description.content =
) + break + case 'html': + props.description && (props.description.content =
) + break + } + } + } if (pagination && pagination.mode === 'server') { const paginationCurrent = Number((pagination.current === undefined || pagination.current === '') ? data[step] : get(data[step], pagination.current, 1)) const paginationPageSize = Number((pagination.pageSize === undefined || pagination.pageSize === '') ? data[step] : get(data[step], pagination.pageSize, 10))