diff --git a/src/components/detail/detailColor/index.tsx b/src/components/detail/detailColor/index.tsx new file mode 100644 index 0000000000000000000000000000000000000000..d498ce13b2c80f547d5db1aea49e4ab0b6a1c27a --- /dev/null +++ b/src/components/detail/detailColor/index.tsx @@ -0,0 +1,44 @@ +import React from 'react' +import { DetailField, DetailFieldConfig, IDetailField } from '../common' + +export interface ColorDetailConfig extends DetailFieldConfig { + type: 'color' +} + +export interface IColorProps { + value: string +} + +export default class InfoDetail extends DetailField implements IDetailField { + renderComponent = (props: IColorProps) => { + return + 您当前使用的UI版本没有实现colorDetail组件。 + + } + + getValue = () => { + const { + value, + config: { + defaultValue + } + } = this.props + + if (value === undefined || value === null || value === '') { + return defaultValue !== undefined ? defaultValue : '' + } + return value + } + + render = () => { + const value = this.getValue() + + return ( + + {this.renderComponent({ + value + })} + + ) + } +} diff --git a/src/components/detail/detailInfo/index.tsx b/src/components/detail/detailInfo/index.tsx new file mode 100644 index 0000000000000000000000000000000000000000..912c6640d2c13aad5d32aa17360c354cfb765119 --- /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..d67c1e3f957a567f648672d821c6e33a995815d8 100644 --- a/src/components/detail/index.tsx +++ b/src/components/detail/index.tsx @@ -5,6 +5,8 @@ import StatementDetail, { StatementDetailConfig } from './statement' import GroupField, { GroupFieldConfig } from './group' import ImportSubformField, { ImportSubformFieldConfig } from './importSubform' +import InfoDetail, { InfoDetailConfig } from './detailInfo' +import ColorDetail, { ColorDetailConfig } from './detailColor' /** * 详情步骤内详情项配置文件格式定义 - 枚举 @@ -14,19 +16,26 @@ export type DetailFieldConfigs = EnumDetailConfig | StatementDetailConfig | GroupFieldConfig | - ImportSubformFieldConfig + ImportSubformFieldConfig | + InfoDetailConfig | + ColorDetailConfig + export type componentType = 'text' | 'group' | 'detail_enum' | 'statement' | - 'import_subform' + 'import_subform' | + 'detail_info' | + 'detail_color' export default { group: GroupField, text: TextField, import_subform: ImportSubformField, detail_enum: EnumDetail, - statement: StatementDetail + statement: StatementDetail, + detail_info: InfoDetail, + detail_color: ColorDetail } diff --git a/src/index.tsx b/src/index.tsx index b193a0536d64a8ad4a2c1726d89d8c170a8c9941..af50ce480e44d5cc74905fd794f5ab4ef252eff8 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -58,6 +58,8 @@ 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 DetailColorField } from './components/detail/detailColor' export { default as HeaderStep } from './steps/header' diff --git a/src/steps/table/index.tsx b/src/steps/table/index.tsx index 44071b1d7968cf6e30e5b03e52f95d66dc79c074..0c03cd337ecd6eab473c192d327bdc987c6fd1ff 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: 表格列表数据来源字段 @@ -32,6 +33,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 } } @@ -110,7 +118,13 @@ export interface ITable { onChange: (page: number, pageSize: number) => void } tableOperations: React.ReactNode | null - multirowOperations: React.ReactNode | null + multirowOperations: React.ReactNode | null, + description?: { + type: 'text' | 'tooltip' | 'modal' + label: string | undefined + content: React.ReactNode + showIcon: boolean + } } /** @@ -474,7 +488,7 @@ export default class TableStep extends Step { 您当前使用的UI版本没有实现Table组件的OperationGroupItem部分。 } - + renderOperationModal = (props: ITableStepOperationModal) => { const mask = document.createElement('DIV') mask.style.position = 'fixed' @@ -501,7 +515,8 @@ export default class TableStep extends Step { primary, columns, operations, - pagination + pagination, + description }, data, step, @@ -526,7 +541,6 @@ export default class TableStep extends Step { if (Object.prototype.toString.call(getDate) !== '[object Array]') { getDate = [] } - const props: ITable = { title: label, width, @@ -534,7 +548,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, @@ -609,7 +622,44 @@ export default class TableStep extends Step { : null, 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))