From 2b7ae94a8c4f4c345f73f97de72de84c73caf267 Mon Sep 17 00:00:00 2001 From: wangailin Date: Fri, 15 Apr 2022 20:14:46 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E8=AF=A6=E6=83=85=E5=9B=BE=E7=89=87?= =?UTF-8?q?=E4=B8=8E=E8=A1=A8=E6=A0=BC=E6=8C=89=E9=92=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/detail/image/index.tsx | 20 ++++ src/components/detail/index.tsx | 6 +- src/steps/table/index.less | 40 +++++--- src/steps/table/index.tsx | 137 +++++++++++++++++++------- 4 files changed, 149 insertions(+), 54 deletions(-) create mode 100644 src/components/detail/image/index.tsx diff --git a/src/components/detail/image/index.tsx b/src/components/detail/image/index.tsx new file mode 100644 index 0000000..2719b32 --- /dev/null +++ b/src/components/detail/image/index.tsx @@ -0,0 +1,20 @@ + +import React from 'react' +import { DetailImageField } from 'ccms' +import { IImageDetail, ImageDetailConfig } from 'ccms/dist/src/components/detail/image' +import { Image } from 'antd' +export const PropsType = (props: ImageDetailConfig) => { } + +export default class ImageDetailComponent extends DetailImageField { + renderComponent = (props: IImageDetail) => { + const { value, width, height } = props + return ( + value ? + : <> + ) + } +} diff --git a/src/components/detail/index.tsx b/src/components/detail/index.tsx index 7c5371a..ab04a76 100644 --- a/src/components/detail/index.tsx +++ b/src/components/detail/index.tsx @@ -4,6 +4,7 @@ import StatementDetail from './statement' import EnumDetailComponent from './enum' import ImportSubformField from './importSubform' import InfoDetail from './detailInfo' +import ImageDetail from './image' import ColorDetail from './detailColor' import CustomFieldComponent from './custom' import TableFieldComponent from './table' @@ -14,8 +15,9 @@ export default { statement: StatementDetail, detail_enum: EnumDetailComponent, import_subform: ImportSubformField, + custom: CustomFieldComponent, + table: TableFieldComponent, detail_info: InfoDetail, detail_color: ColorDetail, - custom: CustomFieldComponent, - table: TableFieldComponent + image: ImageDetail } diff --git a/src/steps/table/index.less b/src/steps/table/index.less index 6eb2aba..1858980 100644 --- a/src/steps/table/index.less +++ b/src/steps/table/index.less @@ -1,23 +1,35 @@ .ccms-antd-table { - &>.ccms-antd-table-header { - display: flex; - justify-content: space-between; + &>.ccms-antd-table-button { + margin-right: 10px; + } + + &>.ccms-antd-table-header { + display : flex; + justify-content: space-between; + align-items : center; + margin-bottom : 16px; + + &>.ccms-antd-table-left { + display : flex; align-items: center; - margin-bottom: 16px; + &>.ccms-antd-table-title { - color: #000000d9; + color : #000000d9; font-weight: 500; - font-size: 16px; - display: flex; - &>.ccms-antd-table-title-explain { - margin-left: 16px; - font-size: 14px; - color: #abb7c4; - margin-top: 2px; - } + font-size : 16px; + display : flex; } - &>.ccms-antd-table-tableOperation { + + &>.ccms-antd-table-title-explain { margin-left: 16px; + font-size : 14px; + color : #abb7c4; + margin-top : 2px; } } + + &>.ccms-antd-table-tableOperation { + margin-left: 16px; + } } +} \ No newline at end of file diff --git a/src/steps/table/index.tsx b/src/steps/table/index.tsx index b85be60..3a03629 100644 --- a/src/steps/table/index.tsx +++ b/src/steps/table/index.tsx @@ -1,6 +1,6 @@ import React from 'react' import { TableStep } from 'ccms' -import { ITable, ITableColumn, ITableStepOperationConfirm, ITableStepOperationModal, ITableStepRowOperation, ITableStepRowOperationButton, ITableStepRowOperationGroup, ITableStepRowOperationGroupItem, ITableStepTableOperation, ITableStepTableOperationButton, ITableStepTableOperationGroup, ITableStepTableOperationGroupItem } from 'ccms/dist/src/steps/table' +import { ITable, ITableColumn, ITableStepOperationConfirm, ITableStepOperationModal, ITableStepRowOperation, ITableStepRowOperationButton, ITableStepRowOperationGroup, ITableStepRowOperationGroupItem, ITableStepTableOperation, ITableStepTableOperationButton, ITableStepTableOperationGroup, ITableStepTableOperationGroupItem, DescriptionConfig } from 'ccms/dist/src/steps/table' import { Table, Button, Dropdown, Menu, Modal, Space, Tooltip } from 'antd' import { DownOutlined, InfoCircleOutlined } from '@ant-design/icons' import getALLComponents from '../../components/tableColumns' @@ -25,10 +25,13 @@ export default class TableStepComponent extends TableStep { }) } + renderComponent = (props: ITable) => { const { title, + width, tableOperations, + leftTableOperations, primary, columns, data, @@ -38,37 +41,14 @@ export default class TableStepComponent extends TableStep { return (
- {(title || (description && ((description.label !== undefined && description.label !== '') || description.showIcon)) || tableOperations) && ( + {(title || (description && ((description.label !== undefined && description.label !== '') || description.showIcon)) || tableOperations || leftTableOperations) && (
-
{title} +
+
{title}
- {(description && description.type === 'text' && ((description.label !== undefined && description.label !== "") || description.showIcon)) && - {(description.showIcon) && ()} - {description.label} - } - {(description && description.type === 'tooltip' && ((description.label !== undefined && description.label !== "") || description.showIcon)) && - ele.parentElement || document.body}> - {(description.showIcon) && ()} - {description.label} - - } - {(description && description.type === 'modal' && ((description.label !== undefined && description.label !== "") || description.showIcon)) && - { - Modal.info({ - getContainer: () => document.getElementById('ccms-antd') || document.body, - content: (
{description.content}
), - okText: '知道了' - }); - }}> - {(description.showIcon) && ()} - {description.label} - - } + {description && this.renderExplainComponent(description)}
+
{leftTableOperations}
{tableOperations}
@@ -83,9 +63,9 @@ export default class TableStepComponent extends TableStep { render: (value: any, record: { [field: string]: any }, index: number) => column.render(value, record, index) }))} dataSource={data} - scroll={{ x: 1000 }} + scroll={{ x: width || 1000 }} size="middle" - pagination={ pagination === undefined ? false : { + pagination={pagination === undefined ? false : { current: pagination.current, pageSize: pagination.pageSize, total: pagination.total, @@ -101,6 +81,37 @@ export default class TableStepComponent extends TableStep { ) } + renderExplainComponent = (description: DescriptionConfig) => { + return <> + {(description && description.type === 'text' && ((description.label !== undefined && description.label !== "") || description.showIcon)) && + {(description.showIcon) && ()} + {description.label} + } + {(description && description.type === 'tooltip' && ((description.label !== undefined && description.label !== "") || description.showIcon)) && + ele.parentElement || document.body}> + {(description.showIcon) && ()} + {description.label} + + } + {(description && description.type === 'modal' && ((description.label !== undefined && description.label !== "") || description.showIcon)) && + { + Modal.info({ + getContainer: () => document.getElementById('ccms-antd') || document.body, + content: (
{description.content}
), + okText: '知道了' + }); + }}> + {(description.showIcon) && ()} + {description.label} + + } + + } + renderRowOperationComponent = (props: ITableStepRowOperation) => { const { children @@ -121,7 +132,7 @@ export default class TableStepComponent extends TableStep { return onClick()}>{label} } - renderRowOperationGroupComponent = (props: ITableStepRowOperationGroup) => { + renderRowOperationDropdownComponent = (props: ITableStepRowOperationGroup) => { const { label, children @@ -134,14 +145,13 @@ export default class TableStepComponent extends TableStep { {children} )} - > {label} ) } - renderRowOperationGroupItemComponent = (props: ITableStepRowOperationGroupItem) => { + renderRowOperationDropdownItemComponent = (props: ITableStepRowOperationGroupItem) => { const { label, disabled, @@ -152,6 +162,27 @@ export default class TableStepComponent extends TableStep { ) } + renderRowOperationGroupComponent = (props: ITableStepTableOperation) => { + const { + children + } = props + return ( + + {children} + + ) + } + + renderRowOperationGroupItemComponent = (props: ITableStepRowOperationGroupItem) => { + const { + label, + disabled, + onClick + } = props + return ( + onClick()}>{label} + ) + } renderTableOperationComponent = (props: ITableStepTableOperation) => { @@ -159,12 +190,13 @@ export default class TableStepComponent extends TableStep { children } = props return ( - +
{children} - +
) } + renderTableOperationButtonComponent = (props: ITableStepTableOperationButton) => { const { label, @@ -182,7 +214,7 @@ export default class TableStepComponent extends TableStep { return } - renderTableOperationGroupComponent = (props: ITableStepTableOperationGroup) => { + renderTableOperationDropdownComponent = (props: ITableStepTableOperationGroup) => { const { label, children @@ -206,7 +238,7 @@ export default class TableStepComponent extends TableStep { ) } - renderTableOperationGroupItemComponent = (props: ITableStepTableOperationGroupItem) => { + renderTableOperationDropdownItemComponent = (props: ITableStepTableOperationGroupItem) => { const { label, disabled, @@ -217,6 +249,35 @@ export default class TableStepComponent extends TableStep { ) } + renderTableOperationGroupComponent = (props: ITableStepTableOperationGroup) => { + const { + children + } = props + + return ( + + {children} + + ) + } + + renderTableOperationGroupItemComponent = (props: ITableStepTableOperationGroupItem) => { + const { + label, + level, + disabled, + onClick + } = props + + const button_props: ButtonProps = { disabled } + if (level === 'primary') { + button_props.type = 'primary' + } else if (level === 'danger') { + button_props.danger = true + } + return + } + renderOperationModal = (props: ITableStepOperationModal) => { const { title, -- Gitee