|
|
|
@ -1,75 +1,157 @@
|
|
|
|
|
import { Dialog, Icon } from '@blueprintjs/core';
|
|
|
|
|
import React, { FC, useState } from 'react';
|
|
|
|
|
import React, { FC, forwardRef, useImperativeHandle, useState } from 'react';
|
|
|
|
|
import { Board } from '../../../DatabaseServices/Entity/Board';
|
|
|
|
|
import { ShareViewStore } from '../ShareViewStore';
|
|
|
|
|
|
|
|
|
|
interface IProps
|
|
|
|
|
type IBoardMoreMsgWidgetProps = {
|
|
|
|
|
onClick?: () => void;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/** 更多信息按钮 */
|
|
|
|
|
export const BoardMoreMsgWidget: FC<IBoardMoreMsgWidgetProps> = (props) =>
|
|
|
|
|
{
|
|
|
|
|
return (
|
|
|
|
|
<span style={{
|
|
|
|
|
wordBreak: "break-all",
|
|
|
|
|
display: 'inline-flex',
|
|
|
|
|
width: 24, height: 24,
|
|
|
|
|
justifyContent: 'center',
|
|
|
|
|
alignItems: 'center',
|
|
|
|
|
cursor: 'pointer'
|
|
|
|
|
}}
|
|
|
|
|
onClick={(e) =>
|
|
|
|
|
{
|
|
|
|
|
e.stopPropagation();
|
|
|
|
|
props.onClick && props.onClick();
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<Icon icon='comment' color='#1890ff' />
|
|
|
|
|
</span>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
interface IBoardMsgDialogProps
|
|
|
|
|
{
|
|
|
|
|
remarks?: any[];
|
|
|
|
|
name?: string;
|
|
|
|
|
isPhone?: boolean;
|
|
|
|
|
ref: React.Ref<any>;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const BoardRemarksWidget: FC<IProps> = (props) =>
|
|
|
|
|
export type IBoardMsgDialogShow = {
|
|
|
|
|
show: (board: Board) => void;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/** 板材 更多信息 备注等 */
|
|
|
|
|
export const BoardMsgDialog: FC<IBoardMsgDialogProps> = forwardRef((_props, ref) =>
|
|
|
|
|
{
|
|
|
|
|
const [open, setOpen] = useState(false);
|
|
|
|
|
const [boardName, setBoardName] = useState<string>('');
|
|
|
|
|
const [boardMsgList, setBoardMsgList] = useState<{
|
|
|
|
|
label: string,
|
|
|
|
|
value: string,
|
|
|
|
|
}[]>([]);
|
|
|
|
|
const [remarks, setRemarks] = useState<[string, string][]>([]);
|
|
|
|
|
const shareViewStore: ShareViewStore = ShareViewStore.GetInstance();
|
|
|
|
|
|
|
|
|
|
useImperativeHandle(ref, () => ({
|
|
|
|
|
show: (board: Board) =>
|
|
|
|
|
{
|
|
|
|
|
const { BoardProcessOption, Name } = board;
|
|
|
|
|
const { remarks, material, boardName } = BoardProcessOption;
|
|
|
|
|
setBoardName(Name);
|
|
|
|
|
setBoardMsgList([
|
|
|
|
|
{
|
|
|
|
|
label: '材质',
|
|
|
|
|
value: material,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '材料名称',
|
|
|
|
|
value: boardName,
|
|
|
|
|
}
|
|
|
|
|
]);
|
|
|
|
|
setRemarks(Array.isArray(remarks) ? remarks : []);
|
|
|
|
|
setOpen(true);
|
|
|
|
|
},
|
|
|
|
|
}));
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
{Array.isArray(props.remarks) && props.remarks.length ? (
|
|
|
|
|
<span
|
|
|
|
|
style={{ cursor: 'pointer' }}
|
|
|
|
|
onClick={(e) =>
|
|
|
|
|
{
|
|
|
|
|
e.stopPropagation();
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<span style={{
|
|
|
|
|
wordBreak: "break-all", display: 'inline-flex', width: 24, height: 24,
|
|
|
|
|
justifyContent: 'center',
|
|
|
|
|
alignItems: 'center'
|
|
|
|
|
}}
|
|
|
|
|
onClick={(e) =>
|
|
|
|
|
{
|
|
|
|
|
setOpen(true);
|
|
|
|
|
e.stopPropagation();
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<Icon icon='comment' color='#1890ff' />
|
|
|
|
|
</span>
|
|
|
|
|
<Dialog
|
|
|
|
|
isOpen={open} onClose={() =>
|
|
|
|
|
{
|
|
|
|
|
setOpen(false);
|
|
|
|
|
}}
|
|
|
|
|
title={`${props.name || "板件"} 备注`}
|
|
|
|
|
style={{ width: window.innerWidth <= 768 ? '90vw' : '600px', background: '#fff', paddingBottom: 16 }}
|
|
|
|
|
>
|
|
|
|
|
<div style={{
|
|
|
|
|
padding: 16, paddingBottom: 2, background: '#fff', fontSize: 14,
|
|
|
|
|
maxHeight: '80vh', overflow: 'auto'
|
|
|
|
|
}}>
|
|
|
|
|
<table className='sp-table'>
|
|
|
|
|
<thead>
|
|
|
|
|
<Dialog
|
|
|
|
|
isOpen={open}
|
|
|
|
|
onClose={() =>
|
|
|
|
|
{
|
|
|
|
|
setOpen(false);
|
|
|
|
|
}}
|
|
|
|
|
title={`${boardName || "板件"} 更多信息`}
|
|
|
|
|
style={{
|
|
|
|
|
width: window.innerWidth <= 768 ? '90vw' : '600px',
|
|
|
|
|
background: '#fff',
|
|
|
|
|
paddingBottom: 16
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<div style={{
|
|
|
|
|
padding: 16,
|
|
|
|
|
paddingBottom: 2,
|
|
|
|
|
background: '#fff',
|
|
|
|
|
fontSize: 14,
|
|
|
|
|
maxHeight: '80vh',
|
|
|
|
|
overflow: 'auto'
|
|
|
|
|
}}>
|
|
|
|
|
{
|
|
|
|
|
shareViewStore.Props.showBom == false ? null : (
|
|
|
|
|
<table className='sp-table' style={{ marginBottom: 12, }}>
|
|
|
|
|
<colgroup>
|
|
|
|
|
<col style={{ width: 76 }} />
|
|
|
|
|
<col />
|
|
|
|
|
</colgroup>
|
|
|
|
|
<thead>
|
|
|
|
|
<tr>
|
|
|
|
|
<th colSpan={2} style={{ textAlign: 'center' }}>板材信息</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody>
|
|
|
|
|
{boardMsgList.map((item) => (
|
|
|
|
|
<tr key={item.label}>
|
|
|
|
|
<td
|
|
|
|
|
style={{
|
|
|
|
|
textAlign: 'right',
|
|
|
|
|
borderRight: 'none',
|
|
|
|
|
paddingRight: 0,
|
|
|
|
|
paddingLeft: 0,
|
|
|
|
|
}}>
|
|
|
|
|
{item.label}:
|
|
|
|
|
</td>
|
|
|
|
|
<td style={{ paddingLeft: 0, }}>{item.value}</td>
|
|
|
|
|
</tr>
|
|
|
|
|
))}
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
<table className='sp-table'>
|
|
|
|
|
<thead>
|
|
|
|
|
<tr>
|
|
|
|
|
<th style={{ width: '30%' }}>备注名</th>
|
|
|
|
|
<th>备注信息</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody>
|
|
|
|
|
{remarks.length ? (
|
|
|
|
|
<>
|
|
|
|
|
{remarks.map((remark) => (
|
|
|
|
|
<tr>
|
|
|
|
|
<th style={{ width: '30%' }}>备注名</th>
|
|
|
|
|
<th>备注信息</th>
|
|
|
|
|
<td>{remark[0]}</td>
|
|
|
|
|
<td>{remark[1]}</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody>
|
|
|
|
|
{props.remarks.map((remark) => (
|
|
|
|
|
<tr>
|
|
|
|
|
<td>{remark[0]}</td>
|
|
|
|
|
<td>{remark[1]}</td>
|
|
|
|
|
</tr>
|
|
|
|
|
))}
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
</Dialog>
|
|
|
|
|
</span>
|
|
|
|
|
) : null}
|
|
|
|
|
</>
|
|
|
|
|
))
|
|
|
|
|
}
|
|
|
|
|
</>
|
|
|
|
|
) : (
|
|
|
|
|
<tr>
|
|
|
|
|
<td colSpan={2} style={{ textAlign: 'center' }}>无备注</td>
|
|
|
|
|
</tr>
|
|
|
|
|
)}
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
</Dialog>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export default BoardRemarksWidget;
|
|
|
|
|
});
|
|
|
|
|