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