feat: add linkTo field component
This commit is contained in:
		
							parent
							
								
									a494185dd7
								
							
						
					
					
						commit
						6f0cd54fd8
					
				@ -1,11 +1,13 @@
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
import React, { useEffect, useState } from 'react';
 | 
					import React, { useEffect, useState } from 'react';
 | 
				
			||||||
import moment from 'moment';
 | 
					import moment from 'moment';
 | 
				
			||||||
import { Tag, Popover, Table } from 'antd';
 | 
					import { Tag, Popover, Table, Drawer } from 'antd';
 | 
				
			||||||
import Icon from '@/components/icons';
 | 
					import Icon from '@/components/icons';
 | 
				
			||||||
import get from 'lodash/get';
 | 
					import get from 'lodash/get';
 | 
				
			||||||
import isEmpty from 'lodash/isEmpty';
 | 
					import isEmpty from 'lodash/isEmpty';
 | 
				
			||||||
import { fields2columns } from '../SortableTable';
 | 
					import { fields2columns } from '../SortableTable';
 | 
				
			||||||
 | 
					import ViewFactory from '..';
 | 
				
			||||||
 | 
					import './style.less';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
const InterfaceTypes = new Map<string, any>();
 | 
					const InterfaceTypes = new Map<string, any>();
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@ -177,6 +179,50 @@ export function SubTableField(props: any) {
 | 
				
			|||||||
  );
 | 
					  );
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					export function LinkToField(props: any) {
 | 
				
			||||||
 | 
					  const { schema, value } = props;
 | 
				
			||||||
 | 
					  if (!value) {
 | 
				
			||||||
 | 
					    return null;
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					  const values = Array.isArray(value) ? value : [value];
 | 
				
			||||||
 | 
					  return (
 | 
				
			||||||
 | 
					    <div className={'link-to-field'}>
 | 
				
			||||||
 | 
					      {values.map(item => <LinkToFieldLink data={item} schema={schema}/>)}
 | 
				
			||||||
 | 
					    </div>
 | 
				
			||||||
 | 
					  );
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					export function LinkToFieldLink(props) {
 | 
				
			||||||
 | 
					  const { data, schema, schema: { title, labelField } } = props;
 | 
				
			||||||
 | 
					  const [visible, setVisible] = useState(false);
 | 
				
			||||||
 | 
					  // console.log(schema);
 | 
				
			||||||
 | 
					  return (
 | 
				
			||||||
 | 
					    <span className={'link-to-field-tag'}>
 | 
				
			||||||
 | 
					      <a onClick={(e) => {
 | 
				
			||||||
 | 
					        e.stopPropagation();
 | 
				
			||||||
 | 
					        setVisible(true);
 | 
				
			||||||
 | 
					      }}>{data[labelField]}</a>
 | 
				
			||||||
 | 
					      <Drawer 
 | 
				
			||||||
 | 
					        // @ts-ignore
 | 
				
			||||||
 | 
					        onClick={(e) => {
 | 
				
			||||||
 | 
					          e.stopPropagation();
 | 
				
			||||||
 | 
					        }}
 | 
				
			||||||
 | 
					        bodyStyle={{padding: 0}} 
 | 
				
			||||||
 | 
					        width={'40%'}
 | 
				
			||||||
 | 
					        title={`查看${title}详情`}
 | 
				
			||||||
 | 
					        visible={visible}
 | 
				
			||||||
 | 
					        onClose={() => setVisible(false)}
 | 
				
			||||||
 | 
					      >
 | 
				
			||||||
 | 
					        <ViewFactory
 | 
				
			||||||
 | 
					          resourceName={schema.target}
 | 
				
			||||||
 | 
					          viewName={'details'}
 | 
				
			||||||
 | 
					          resourceKey={data.id}
 | 
				
			||||||
 | 
					        />
 | 
				
			||||||
 | 
					      </Drawer>
 | 
				
			||||||
 | 
					    </span>
 | 
				
			||||||
 | 
					  );
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
registerFieldComponents({
 | 
					registerFieldComponents({
 | 
				
			||||||
  string: StringField,
 | 
					  string: StringField,
 | 
				
			||||||
  textarea: TextareaField,
 | 
					  textarea: TextareaField,
 | 
				
			||||||
@ -194,6 +240,7 @@ registerFieldComponents({
 | 
				
			|||||||
  createdBy: RealtionField,
 | 
					  createdBy: RealtionField,
 | 
				
			||||||
  updatedBy: RealtionField,
 | 
					  updatedBy: RealtionField,
 | 
				
			||||||
  subTable: SubTableField,
 | 
					  subTable: SubTableField,
 | 
				
			||||||
 | 
					  linkTo: LinkToField,
 | 
				
			||||||
});
 | 
					});
 | 
				
			||||||
 | 
					
 | 
				
			||||||
export default function Field(props: any) {
 | 
					export default function Field(props: any) {
 | 
				
			||||||
 | 
				
			|||||||
							
								
								
									
										8
									
								
								packages/app/src/components/views/Field/style.less
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										8
									
								
								packages/app/src/components/views/Field/style.less
									
									
									
									
									
										Normal file
									
								
							@ -0,0 +1,8 @@
 | 
				
			|||||||
 | 
					.link-to-field-tag {
 | 
				
			||||||
 | 
					  &::after {
 | 
				
			||||||
 | 
					    content: ',';
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					  &:last-child::after {
 | 
				
			||||||
 | 
					    content: '';
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
		Loading…
	
		Reference in New Issue
	
	Block a user