diff --git a/.DS_Store b/.DS_Store deleted file mode 100644 index ea4d6d3fc9cd20f1d3fa774edd8bd61f838d772a..0000000000000000000000000000000000000000 Binary files a/.DS_Store and /dev/null differ diff --git a/src/components/detail/index.tsx b/src/components/detail/index.tsx index 3df4864a4cb704dbbb96d219d0a0513f385edc23..7c5371a4fbe88bfda485ce74f5ee569c9310a469 100644 --- a/src/components/detail/index.tsx +++ b/src/components/detail/index.tsx @@ -6,6 +6,7 @@ import ImportSubformField from './importSubform' import InfoDetail from './detailInfo' import ColorDetail from './detailColor' import CustomFieldComponent from './custom' +import TableFieldComponent from './table' export default { text: TextField, @@ -15,5 +16,6 @@ export default { import_subform: ImportSubformField, detail_info: InfoDetail, detail_color: ColorDetail, - custom: CustomFieldComponent + custom: CustomFieldComponent, + table: TableFieldComponent } diff --git a/src/components/detail/table/index.less b/src/components/detail/table/index.less new file mode 100644 index 0000000000000000000000000000000000000000..6eb2abab27933a985d5de22128ba508fa5f981de --- /dev/null +++ b/src/components/detail/table/index.less @@ -0,0 +1,23 @@ +.ccms-antd-table { + &>.ccms-antd-table-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 16px; + &>.ccms-antd-table-title { + 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; + } + } + &>.ccms-antd-table-tableOperation { + margin-left: 16px; + } + } + } diff --git a/src/components/detail/table/index.tsx b/src/components/detail/table/index.tsx new file mode 100644 index 0000000000000000000000000000000000000000..568cdbff85756db8746b9b4584c58e0b7b329a51 --- /dev/null +++ b/src/components/detail/table/index.tsx @@ -0,0 +1,142 @@ +import React from 'react' +import { DetailTableField } from 'ccms' +import { + ITableField, TableFieldConfig, ITableColumn, + ITableDetailOperationConfirm, ITableDetailOperationModal, ITableDetailRowOperation, ITableDetailRowOperationButton, ITableDetailRowOperationGroup, ITableDetailRowOperationGroupItem, ITableDetailTableOperation, ITableDetailTableOperationButton, ITableDetailTableOperationGroup, ITableDetailTableOperationGroupItem +} from 'ccms/dist/src/components/detail/table' +import { Table, Dropdown, Menu, Modal, Space } from 'antd' +import getALLComponents from '../../tableColumns' +import CCMS from '../../../main' +import InterfaceHelper from '../../../util/interface' +import styles from './index.less' + +export const PropsType = (props: TableFieldConfig) => { } + +export default class TableFieldComponent extends DetailTableField { + CCMS = CCMS + getALLComponents = (type: any) => getALLComponents[type] + interfaceHelper = new InterfaceHelper() + + renderOperationConfirm = (props: ITableDetailOperationConfirm) => { + Modal.confirm({ + getContainer: () => document.getElementById('ccms-antd') || document.body, + title: props.title, + okText: props.okText, + cancelText: props.cancelText, + onOk: () => { props.onOk() }, + onCancel: () => { props.onCancel() } + }) + } + + renderComponent = (props: ITableField) => { + const { + title, + primary, + tableColumns, + data, + pagination, + description + } = props + + return ( +
+ ({ + key: index, + dataIndex: column.field, + title: column.label, + align: column.align, + render: (value: any, record: { [field: string]: any }, index: number) => column.render(value, record, index) + }))} + dataSource={data} + scroll={{ x: 1000 }} + size="middle" + pagination={pagination === undefined ? false : { + current: pagination.current, + pageSize: pagination.pageSize, + total: pagination.total, + onChange: (page, pageSize) => pagination.onChange(page, pageSize || pagination.pageSize), + showSizeChanger: true, + showTotal: (total, range) => `第 ${range[0]} - ${range[1]} 条 / 共 ${total} 条`, + locale: { + items_per_page: '条/页' + } + }} + /> + + ) + } + + renderRowOperationComponent = (props: ITableDetailRowOperation) => { + const { + children + } = props + return ( + + {children} + + ) + } + + renderRowOperationButtonComponent = (props: ITableDetailRowOperationButton) => { + const { + label, + onClick + } = props + + return onClick()}>{label} + } + + renderRowOperationDropdownComponent = (props: ITableDetailRowOperationGroup) => { + const { + label, + children + } = props + return ( + node.parentElement || document.body} + overlay={( + + {children} + + )} + > + {label} + + ) + } + + renderRowOperationDropdownItemComponent = (props: ITableDetailRowOperationGroupItem) => { + const { + label, + disabled, + onClick + } = props + return ( + onClick()}>{label} + ) + } + + renderOperationModal = (props: ITableDetailOperationModal) => { + const { + title, + visible, + children, + onClose + } = props + + return ( + + {children} + + ) + } +} diff --git a/src/components/detail/table/props-types.tsx b/src/components/detail/table/props-types.tsx new file mode 100644 index 0000000000000000000000000000000000000000..1826364adf2cd5bd7e009f96b452ac57235d0406 --- /dev/null +++ b/src/components/detail/table/props-types.tsx @@ -0,0 +1,3 @@ +import { ITable, ITableColumn, ITableStepOperationColumn, ITableStepOperationColumnButton, ITableStepOperationColumnGroup, ITableStepOperationColumnGroupItem, ITableStepOperationColumnConfirm, ITableStepOperationModal } from 'ccms/dist/src/steps/table' + +export const PropsType = (props: ITable ) => { }; diff --git a/src/components/detail/text/index.tsx b/src/components/detail/text/index.tsx index 8a6d3911f904d5ff5c807b0b63c093bfdd9331de..4d55a5d559dd7bfdac42583f16842e73776b81af 100644 --- a/src/components/detail/text/index.tsx +++ b/src/components/detail/text/index.tsx @@ -2,7 +2,7 @@ import React from 'react' import { DetailTextField } from 'ccms' import { ITextField, TextFieldConfig } from 'ccms/dist/src/components/detail/text' -export const PropsType = (props: TextFieldConfig) => {} +export const PropsType = (props: TextFieldConfig) => { } export default class TextFieldComponent extends DetailTextField { renderComponent = (props: ITextField) => { diff --git a/src/components/formFields/select/multiple/index.tsx b/src/components/formFields/select/multiple/index.tsx index 991e5bdf214b5faec93980fd0c5af53892f2c182..c8069ad4cd947a8b7108a4c969f1da557ea988c8 100644 --- a/src/components/formFields/select/multiple/index.tsx +++ b/src/components/formFields/select/multiple/index.tsx @@ -5,7 +5,7 @@ import { ISelectMultipleField, SelectMultipleFieldConfig } from 'ccms/dist/src/c import InterfaceHelper from '../../../../util/interface' export default class SelectSingleFieldComponent extends SelectMultipleField { interfaceHelper = new InterfaceHelper() - + renderDorpdownComponent = (props: ISelectMultipleField) => { const { value, @@ -16,13 +16,15 @@ export default class SelectSingleFieldComponent extends SelectMultipleField { readonly, placeholder } = props - + return ( ) diff --git a/src/index.tsx b/src/index.tsx index 99c688d96eebb91a2df556c0a8c43ef628d93e8b..375c4af431f513a3b2f45e5090f93ce85bbe33ac 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -13,4 +13,5 @@ export { default as Table } from './steps/table' export { default as Fetch } from './steps/fetch' export { default as DetailStep } from './steps/detail' export { default as DetailGroupField } from './components/detail/group' -export { default as DetailTextField } from './components/detail/text' \ No newline at end of file +export { default as DetailTextField } from './components/detail/text' +export { default as DetailTableField } from './components/detail/table'