feat: improve code

This commit is contained in:
chenos 2022-03-11 21:31:34 +08:00
parent 08fcee6d90
commit 982c7a3038
5 changed files with 81 additions and 42 deletions

View File

@ -4,10 +4,23 @@ import { useMenuItems } from '.';
import { useAPIClient, useRequest } from '../../api-client'; import { useAPIClient, useRequest } from '../../api-client';
import { useRecord } from '../../record-provider'; import { useRecord } from '../../record-provider';
const findUids = (items) => {
if (!Array.isArray(items)) {
return [];
}
const uids = [];
for (const item of items) {
uids.push(item.uid);
uids.push(...findUids(item.children));
}
return uids;
};
export const MenuConfigure = () => { export const MenuConfigure = () => {
const record = useRecord(); const record = useRecord();
const api = useAPIClient(); const api = useAPIClient();
const items = useMenuItems(); const items = useMenuItems();
const allUids = findUids(items);
const [uids, setUids] = useState([]); const [uids, setUids] = useState([]);
const { loading, refresh } = useRequest( const { loading, refresh } = useRequest(
{ {
@ -25,7 +38,7 @@ export const MenuConfigure = () => {
}, },
); );
const resource = api.resource('roles.menuUiSchemas', record.name); const resource = api.resource('roles.menuUiSchemas', record.name);
const allChecked = items.length === uids.length; const allChecked = allUids.length === uids.length;
return ( return (
<Table <Table
loading={loading} loading={loading}
@ -52,7 +65,7 @@ export const MenuConfigure = () => {
}); });
} else { } else {
await resource.set({ await resource.set({
values: items.map((item) => item.uid), values: allUids,
}); });
} }
refresh(); refresh();
@ -62,7 +75,8 @@ export const MenuConfigure = () => {
访 访
</> </>
), ),
render: (checked, schema) => { render: (_, schema) => {
const checked = uids.includes(schema.uid);
return ( return (
<Checkbox <Checkbox
checked={checked} checked={checked}
@ -86,10 +100,7 @@ export const MenuConfigure = () => {
}, },
}, },
]} ]}
dataSource={items.map((item) => { dataSource={items}
const accessible = uids.includes(item.uid);
return { ...item, accessible };
})}
/> />
); );
}; };

View File

@ -1,6 +1,7 @@
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import { observer, RecursionField, useField, useFieldSchema } from '@formily/react'; import { observer, RecursionField, useField, useFieldSchema } from '@formily/react';
import { Modal } from 'antd'; import { Modal } from 'antd';
import classNames from 'classnames';
import React from 'react'; import React from 'react';
import { createPortal } from 'react-dom'; import { createPortal } from 'react-dom';
import { useActionContext } from '.'; import { useActionContext } from '.';
@ -27,8 +28,18 @@ export const ActionModal: ComposedActionDrawer = observer((props) => {
destroyOnClose destroyOnClose
visible={visible} visible={visible}
onCancel={() => setVisible(false)} onCancel={() => setVisible(false)}
className={classNames(
others.className,
css`
&.nb-action-popup {
.ant-modal-body {
background: #f0f2f5;
}
}
`,
)}
footer={ footer={
footerSchema && ( footerSchema ? (
<div <div
className={css` className={css`
display: flex; display: flex;
@ -48,6 +59,8 @@ export const ActionModal: ComposedActionDrawer = observer((props) => {
}} }}
/> />
</div> </div>
) : (
false
) )
} }
> >

View File

@ -1,3 +1,4 @@
import { css } from '@emotion/css';
import { FormLayout } from '@formily/antd'; import { FormLayout } from '@formily/antd';
import { observer, RecursionField, useFieldSchema } from '@formily/react'; import { observer, RecursionField, useFieldSchema } from '@formily/react';
import { Card } from 'antd'; import { Card } from 'antd';
@ -27,6 +28,18 @@ export const KanbanCard: any = observer((props: any) => {
hoverable hoverable
style={{ cursor: 'pointer', overflow: 'hidden' }} style={{ cursor: 'pointer', overflow: 'hidden' }}
bodyStyle={{ paddingBottom: 0 }} bodyStyle={{ paddingBottom: 0 }}
className={css`
.ant-description-input {
text-overflow: ellipsis;
width: 100%;
overflow: hidden;
}
.ant-description-textarea {
text-overflow: ellipsis;
width: 100%;
overflow: hidden;
}
`}
> >
<SchemaComponentOptions components={{}}> <SchemaComponentOptions components={{}}>
<DndContext <DndContext

View File

@ -123,40 +123,42 @@ Upload.Attachment = connect((props: UploadProps) => {
</div> </div>
); );
})} })}
<div className={'ant-upload-list-picture-card-container'}> {!disabled && (multiple || toArr(value).length < 1) && (
<AntdUpload <div className={'ant-upload-list-picture-card-container'}>
{...useUploadProps({ ...props })} <AntdUpload
disabled={disabled} {...useUploadProps({ ...props })}
multiple={multiple} disabled={disabled}
listType={'picture-card'} multiple={multiple}
fileList={fileList} listType={'picture-card'}
onChange={(info) => { fileList={fileList}
setSync(false); onChange={(info) => {
if (multiple) { setSync(false);
if (info.file.status === 'done') { if (multiple) {
onChange(toValue(info.fileList)); if (info.file.status === 'done') {
onChange(toValue(info.fileList));
}
setFileList(info.fileList.map(toItem));
} else {
if (info.file.status === 'done') {
console.log('field.value', info.file?.response?.data);
// TODO(BUG): object 的联动有问题,不响应,折中的办法先置空再赋值
onChange(null);
onChange(info.file?.response?.data);
}
setFileList([toItem(info.file)]);
} }
setFileList(info.fileList.map(toItem)); }}
} else { showUploadList={false}
if (info.file.status === 'done') { >
console.log('field.value', info.file?.response?.data); {!disabled && (multiple || toArr(value).length < 1) && (
// TODO(BUG): object 的联动有问题,不响应,折中的办法先置空再赋值 <span>
onChange(null); <PlusOutlined />
onChange(info.file?.response?.data); <br /> {t('Upload')}
} </span>
setFileList([toItem(info.file)]); )}
} </AntdUpload>
}} </div>
showUploadList={false} )}
>
{!disabled && (multiple || toArr(value).length < 1) && (
<span>
<PlusOutlined />
<br /> {t('Upload')}
</span>
)}
</AntdUpload>
</div>
</div> </div>
</div> </div>
{visible && ( {visible && (

View File

@ -80,7 +80,7 @@ export const DragHandler = (props) => {
{...listeners} {...listeners}
{...attributes} {...attributes}
> >
<span style={{ cursor: 'move', fontSize: 12 }}>{props.children}</span> <span style={{ cursor: 'move', fontSize: 14 }}>{props.children}</span>
</div> </div>
</div> </div>
); );