From 4ee4bed527ce6c124dd535ecb8a72a01306f8a2a Mon Sep 17 00:00:00 2001 From: chenos Date: Tue, 26 Jan 2021 16:47:57 +0800 Subject: [PATCH] feat: add description field --- .../form.fields/form-description/index.tsx | 32 ++++++++++++++++ .../app/src/components/form.fields/index.tsx | 1 + packages/app/src/components/views/Details.tsx | 38 ++++++++++++++++--- packages/app/src/components/views/style.less | 7 ++++ .../src/collections/fields.ts | 2 +- .../src/interfaces/index.ts | 7 ++++ .../src/interfaces/types.ts | 12 ++++++ packages/plugin-pages/src/actions/getView.ts | 4 ++ 8 files changed, 97 insertions(+), 6 deletions(-) create mode 100644 packages/app/src/components/form.fields/form-description/index.tsx diff --git a/packages/app/src/components/form.fields/form-description/index.tsx b/packages/app/src/components/form.fields/form-description/index.tsx new file mode 100644 index 000000000..ab17adae6 --- /dev/null +++ b/packages/app/src/components/form.fields/form-description/index.tsx @@ -0,0 +1,32 @@ +import React from 'react' +import { createVirtualBox } from '@formily/react-schema-renderer' +import { Card } from 'antd' +import styled from 'styled-components' +import { markdown } from '@/components/views/Field' + +export const FormDescription = createVirtualBox( + 'description', + styled(({ children, className, ...props }) => { + return ( + +
+ + ) + })` + margin-bottom: 24px !important; + &.ant-card { + border: none; + box-shadow: none; + p:first-child { + margin-top: 14px; + } + p:last-child { + margin-bottom: 0; + } + } + ` +) + +export default FormDescription diff --git a/packages/app/src/components/form.fields/index.tsx b/packages/app/src/components/form.fields/index.tsx index 9de234e12..07309e7fd 100644 --- a/packages/app/src/components/form.fields/index.tsx +++ b/packages/app/src/components/form.fields/index.tsx @@ -15,6 +15,7 @@ export * from './form-grid-row' export * from './form-item-grid' export * from './form-layout' export * from './form-mega-layout' +export * from './form-description' export * from './form-step' export * from './form-text-box' export * from './form-slot' diff --git a/packages/app/src/components/views/Details.tsx b/packages/app/src/components/views/Details.tsx index 7d037d00e..03eaac2e3 100644 --- a/packages/app/src/components/views/Details.tsx +++ b/packages/app/src/components/views/Details.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Card, Descriptions, Button } from 'antd'; +import { Card, Descriptions, Button, Tooltip } from 'antd'; import { Actions } from '@/components/actions'; import api from '@/api-client'; import { useRequest } from 'umi'; @@ -8,11 +8,37 @@ import Field from './Field'; import get from 'lodash/get'; import { useSize } from 'ahooks'; import { configResponsive, useResponsive } from 'ahooks'; +import { InfoCircleOutlined } from '@ant-design/icons'; + configResponsive({ small: 0, middle: 800, large: 1200, }); +function toGroups(fields: any[]) { + const groups = []; + let group = { + title: undefined, + tooltip: undefined, + children: [], + }; + fields.forEach(field => { + if (field.interface === 'description' && group.children.length) { + groups.push(group); + group = { + title: field.title, + tooltip: get(field, 'component.tooltip'), + children: [], + }; + } else { + group.children.push(field); + } + }); + if (group.children.length) { + groups.push(group); + } + return groups; +} export function Details(props: any) { const dom = document.querySelector('body'); const responsive = useResponsive(); @@ -45,8 +71,9 @@ export function Details(props: any) { layout: 'vertical' } } - console.log(props); const { displayFields = [] } = activeTab; + const groups = toGroups(fields); + console.log({groups}); return ( - {loading ? : ( + {loading ? : groups.map(group => ( {group.title} {group.tooltip && }} column={1}> - {fields.map((field: any) => { + {group.children.map((field: any) => { if (Array.isArray(displayFields) && displayFields.length && displayFields.indexOf(field.id) === -1) { return null; } @@ -75,7 +103,7 @@ export function Details(props: any) { ) })} - )} + ))} ); } diff --git a/packages/app/src/components/views/style.less b/packages/app/src/components/views/style.less index 268f30626..e368963eb 100644 --- a/packages/app/src/components/views/style.less +++ b/packages/app/src/components/views/style.less @@ -31,4 +31,11 @@ .ant-table-tbody > tr.row-clickable:hover > td { background: #e6f7ff; border-color: rgba(0, 0, 0, 0.03); +} + +.ant-descriptions-header { + margin-top: 20px; + .ant-descriptions-title { + font-weight: 500; + } } \ No newline at end of file diff --git a/packages/plugin-collections/src/collections/fields.ts b/packages/plugin-collections/src/collections/fields.ts index 597716938..e5910289f 100644 --- a/packages/plugin-collections/src/collections/fields.ts +++ b/packages/plugin-collections/src/collections/fields.ts @@ -118,7 +118,7 @@ export default { { "type": "value:visible", "target": "component.showInTable", - "condition": "{{ ['subTable'].indexOf($self.value) === -1 }}" + "condition": "{{ ['subTable', 'description'].indexOf($self.value) === -1 }}" }, { "type": "value:visible", diff --git a/packages/plugin-collections/src/interfaces/index.ts b/packages/plugin-collections/src/interfaces/index.ts index 27d886bac..e5d02ce3b 100644 --- a/packages/plugin-collections/src/interfaces/index.ts +++ b/packages/plugin-collections/src/interfaces/index.ts @@ -72,6 +72,13 @@ export const options = [ types.json, types.icon, ], + }, + { + key: 'others', + title: '其他', + children: [ + types.description, + ], } ].map(({key, title, children}: any) => ({ key, diff --git a/packages/plugin-collections/src/interfaces/types.ts b/packages/plugin-collections/src/interfaces/types.ts index 60d08ea55..138a2019f 100644 --- a/packages/plugin-collections/src/interfaces/types.ts +++ b/packages/plugin-collections/src/interfaces/types.ts @@ -436,6 +436,18 @@ export const group = { }, }; +export const description = { + title: '说明文字', + options: { + interface: 'description', + // name: 'id', + type: 'virtual', + component: { + type: 'description', + }, + }, +} + /** * 主键（暂缓） */ diff --git a/packages/plugin-pages/src/actions/getView.ts b/packages/plugin-pages/src/actions/getView.ts index 7a70fb8d2..6232326b0 100644 --- a/packages/plugin-pages/src/actions/getView.ts +++ b/packages/plugin-pages/src/actions/getView.ts @@ -37,6 +37,10 @@ const transforms = { title: field.title||field.name, ...(field.component||{}), } + if (field.interface === 'description') { + field.title && set(prop, 'x-component-props.title', field.title); + field.get('component.tooltip') && set(prop, 'x-component-props.children', field.get('component.tooltip')); + } if (ctx.formMode === 'update') { if (!ctx.updateFields.includes(field.id)) { set(prop, 'x-component-props.disabled', true);