feat: add description field
This commit is contained in:
		
							parent
							
								
									4fb1ff6c33
								
							
						
					
					
						commit
						4ee4bed527
					
				| @ -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 ( | ||||||
|  |       <Card size={'small'} headStyle={{padding: 0}} bodyStyle={{ | ||||||
|  |         padding: 0, | ||||||
|  |       }} className={className} {...props}> | ||||||
|  |         <div dangerouslySetInnerHTML={{__html: children && markdown(children)}}></div> | ||||||
|  |       </Card> | ||||||
|  |     ) | ||||||
|  |   })` | ||||||
|  |     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 | ||||||
| @ -15,6 +15,7 @@ export * from './form-grid-row' | |||||||
| export * from './form-item-grid' | export * from './form-item-grid' | ||||||
| export * from './form-layout' | export * from './form-layout' | ||||||
| export * from './form-mega-layout' | export * from './form-mega-layout' | ||||||
|  | export * from './form-description' | ||||||
| export * from './form-step' | export * from './form-step' | ||||||
| export * from './form-text-box' | export * from './form-text-box' | ||||||
| export * from './form-slot' | export * from './form-slot' | ||||||
|  | |||||||
| @ -1,5 +1,5 @@ | |||||||
| import React from 'react'; | import React from 'react'; | ||||||
| import { Card, Descriptions, Button } from 'antd'; | import { Card, Descriptions, Button, Tooltip } from 'antd'; | ||||||
| import { Actions } from '@/components/actions'; | import { Actions } from '@/components/actions'; | ||||||
| import api from '@/api-client'; | import api from '@/api-client'; | ||||||
| import { useRequest } from 'umi'; | import { useRequest } from 'umi'; | ||||||
| @ -8,11 +8,37 @@ import Field from './Field'; | |||||||
| import get from 'lodash/get'; | import get from 'lodash/get'; | ||||||
| import { useSize } from 'ahooks'; | import { useSize } from 'ahooks'; | ||||||
| import { configResponsive, useResponsive } from 'ahooks'; | import { configResponsive, useResponsive } from 'ahooks'; | ||||||
|  | import { InfoCircleOutlined } from '@ant-design/icons'; | ||||||
|  | 
 | ||||||
| configResponsive({ | configResponsive({ | ||||||
|   small: 0, |   small: 0, | ||||||
|   middle: 800, |   middle: 800, | ||||||
|   large: 1200, |   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) { | export function Details(props: any) { | ||||||
|   const dom = document.querySelector('body'); |   const dom = document.querySelector('body'); | ||||||
|   const responsive = useResponsive(); |   const responsive = useResponsive(); | ||||||
| @ -45,8 +71,9 @@ export function Details(props: any) { | |||||||
|       layout: 'vertical' |       layout: 'vertical' | ||||||
|     } |     } | ||||||
|   } |   } | ||||||
|   console.log(props); |  | ||||||
|   const { displayFields = [] } = activeTab; |   const { displayFields = [] } = activeTab; | ||||||
|  |   const groups = toGroups(fields); | ||||||
|  |   console.log({groups}); | ||||||
|   return ( |   return ( | ||||||
|     <Card bordered={false}> |     <Card bordered={false}> | ||||||
|       <Actions |       <Actions | ||||||
| @ -57,14 +84,15 @@ export function Details(props: any) { | |||||||
|         style={{ marginBottom: 14 }} |         style={{ marginBottom: 14 }} | ||||||
|         actions={actions} |         actions={actions} | ||||||
|       /> |       /> | ||||||
|       {loading ? <Spin/> : ( |       {loading ? <Spin/> : groups.map(group => ( | ||||||
|         <Descriptions  |         <Descriptions  | ||||||
|           // layout={'vertical'}
 |           // layout={'vertical'}
 | ||||||
|           // size={'middle'}
 |           // size={'middle'}
 | ||||||
|           // bordered 
 |           // bordered 
 | ||||||
|           {...descriptionsProps} |           {...descriptionsProps} | ||||||
|  |           title={group.title && <span>{group.title} {group.tooltip && <Tooltip title={group.tooltip}><InfoCircleOutlined /></Tooltip>}</span>} | ||||||
|           column={1}> |           column={1}> | ||||||
|           {fields.map((field: any) => { |           {group.children.map((field: any) => { | ||||||
|             if (Array.isArray(displayFields) && displayFields.length && displayFields.indexOf(field.id) === -1) { |             if (Array.isArray(displayFields) && displayFields.length && displayFields.indexOf(field.id) === -1) { | ||||||
|               return null; |               return null; | ||||||
|             } |             } | ||||||
| @ -75,7 +103,7 @@ export function Details(props: any) { | |||||||
|             ) |             ) | ||||||
|           })} |           })} | ||||||
|         </Descriptions> |         </Descriptions> | ||||||
|       )} |       ))} | ||||||
|     </Card> |     </Card> | ||||||
|   ); |   ); | ||||||
| } | } | ||||||
|  | |||||||
| @ -32,3 +32,10 @@ | |||||||
|   background: #e6f7ff; |   background: #e6f7ff; | ||||||
|   border-color: rgba(0, 0, 0, 0.03); |   border-color: rgba(0, 0, 0, 0.03); | ||||||
| } | } | ||||||
|  | 
 | ||||||
|  | .ant-descriptions-header { | ||||||
|  |   margin-top: 20px; | ||||||
|  |   .ant-descriptions-title { | ||||||
|  |     font-weight: 500; | ||||||
|  |   } | ||||||
|  | } | ||||||
| @ -118,7 +118,7 @@ export default { | |||||||
|           { |           { | ||||||
|             "type": "value:visible", |             "type": "value:visible", | ||||||
|             "target": "component.showInTable", |             "target": "component.showInTable", | ||||||
|             "condition": "{{ ['subTable'].indexOf($self.value) === -1 }}" |             "condition": "{{ ['subTable', 'description'].indexOf($self.value) === -1 }}" | ||||||
|           }, |           }, | ||||||
|           { |           { | ||||||
|             "type": "value:visible", |             "type": "value:visible", | ||||||
|  | |||||||
| @ -72,6 +72,13 @@ export const options = [ | |||||||
|       types.json, |       types.json, | ||||||
|       types.icon, |       types.icon, | ||||||
|     ], |     ], | ||||||
|  |   }, | ||||||
|  |   { | ||||||
|  |     key: 'others', | ||||||
|  |     title: '其他', | ||||||
|  |     children: [ | ||||||
|  |       types.description, | ||||||
|  |     ], | ||||||
|   } |   } | ||||||
| ].map(({key, title, children}: any) => ({ | ].map(({key, title, children}: any) => ({ | ||||||
|   key, |   key, | ||||||
|  | |||||||
| @ -436,6 +436,18 @@ export const group = { | |||||||
|   }, |   }, | ||||||
| }; | }; | ||||||
| 
 | 
 | ||||||
|  | export const description = { | ||||||
|  |   title: '说明文字', | ||||||
|  |   options: { | ||||||
|  |     interface: 'description', | ||||||
|  |     // name: 'id',
 | ||||||
|  |     type: 'virtual', | ||||||
|  |     component: { | ||||||
|  |       type: 'description', | ||||||
|  |     }, | ||||||
|  |   }, | ||||||
|  | } | ||||||
|  | 
 | ||||||
| /** | /** | ||||||
|  * 主键(暂缓) |  * 主键(暂缓) | ||||||
|  */ |  */ | ||||||
|  | |||||||
| @ -37,6 +37,10 @@ const transforms = { | |||||||
|         title: field.title||field.name, |         title: field.title||field.name, | ||||||
|         ...(field.component||{}), |         ...(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.formMode === 'update') { | ||||||
|         if (!ctx.updateFields.includes(field.id)) { |         if (!ctx.updateFields.includes(field.id)) { | ||||||
|           set(prop, 'x-component-props.disabled', true); |           set(prop, 'x-component-props.disabled', true); | ||||||
|  | |||||||
		Loading…
	
		Reference in New Issue
	
	Block a user