From 3620d67cfd2f2af19ef4d656734badd4445c90b8 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期二, 14 二月 2023 18:35:16 +0800 Subject: [PATCH] 2023-02-14 --- src/tabviews/custom/components/module/voucher/resetAttach/documents/index.jsx | 91 ++++++++++++++++++++++++++++++++------------- 1 files changed, 64 insertions(+), 27 deletions(-) diff --git a/src/tabviews/custom/components/module/voucher/resetAttach/documents/index.jsx b/src/tabviews/custom/components/module/voucher/resetAttach/documents/index.jsx index 87f336d..ea36b1c 100644 --- a/src/tabviews/custom/components/module/voucher/resetAttach/documents/index.jsx +++ b/src/tabviews/custom/components/module/voucher/resetAttach/documents/index.jsx @@ -2,54 +2,91 @@ class Documents extends Component { state = { - folders: [], - docs: [], selectKey: [], - actFolder: '' + actFolder: null } UNSAFE_componentWillMount() { const { documents } = this.props - let folders = [] - let actFolder = documents[0].folder - let docs = [] - documents.forEach(item => { - folders.push(item.folder) - if (item.folder === actFolder) { - docs.push(item) - } - }) + let actFolder = documents[0] || null - this.setState({selectKey: [], folders: Array.from(new Set(folders)), actFolder: actFolder, docs}) + this.setState({selectKey: [], actFolder: actFolder}) } submit = () => { - this.props.onChange() + const { selectKey, actFolder } = this.state + + let items = [] + + if (actFolder && selectKey.length > 0) { + actFolder.attachments.forEach(doc => { + if (selectKey.includes(doc.id)) { + items.push(doc) + } + }) + } + + this.props.onChange(items) } - checkfolder = (val) => { + checkfolder = (id) => { const { documents } = this.props const { actFolder } = this.state - if (actFolder === val) return + if (!actFolder || actFolder.id === id) return - let docs = [] + let _actFolder = null documents.forEach(item => { - if (item.folder === val) { - docs.push(item) + if (item.id === id) { + _actFolder = item } }) - this.setState({actFolder: val, selectKey: [], docs}) + this.setState({actFolder: _actFolder, selectKey: []}, () => { + this.submit() + }) + } + + checkItem = (id) => { + const { selectKey } = this.state + + if (selectKey.includes(id)) { + this.setState({selectKey: selectKey.filter(key => key !== id)}, () => { + this.submit() + }) + } else { + this.setState({selectKey: [...selectKey, id]}, () => { + this.submit() + }) + } + } + + checkAllItem = () => { + const { selectKey, actFolder } = this.state + + if (!actFolder || actFolder.attachments.length === 0) return + + if (selectKey.length === actFolder.attachments.length) { + this.setState({selectKey: []}, () => { + this.submit() + }) + } else { + this.setState({selectKey: actFolder.attachments.map(item => item.id)}, () => { + this.submit() + }) + } } render() { - const { folders, docs, selectKey, actFolder } = this.state + const { documents } = this.props + const { selectKey, actFolder } = this.state let checkAll = '' - if (selectKey.length > 0) { - checkAll = selectKey.length < docs.length ? ' half' : ' active' + if (actFolder && selectKey.length > 0) { + checkAll = selectKey.length < actFolder.attachments.length ? ' half' : ' active' + } else if (!actFolder || actFolder.attachments.length === 0) { + checkAll = ' disabled' } return ( @@ -57,18 +94,18 @@ <div className="document-title"> <div className="folder-box">鏂囦欢澶�</div> <div className="folder"> - <span className={'square-select' + checkAll}></span> + <span onClick={this.checkAllItem} className={'square-select' + checkAll}></span> <span>鏂囦欢</span> </div> </div> <div className="document-body"> <div className="doc-name"> - {folders.map(folder => (<div className={actFolder === folder ? 'active' : ''} onClick={() => this.checkfolder(folder)} key={folder}>{folder}</div>))} + {documents.map(folder => (<div className={actFolder.id === folder.id ? 'active' : ''} onClick={() => this.checkfolder(folder.id)} key={folder.id}>{folder.data_name}</div>))} </div> <div className="file-wrap"> - {docs.map(doc => { + {actFolder && actFolder.attachments.map(doc => { return <div className="file-item" key={doc.id}> - <span className={'square-select' + (selectKey.indexOf(doc.id) > -1 ? ' active' : '')}></span> + <span onClick={() => this.checkItem(doc.id)} className={'square-select' + (selectKey.indexOf(doc.id) > -1 ? ' active' : '')}></span> <img src={doc.icon} alt=""/> <span className="file-name">{doc.attachments_title}</span> </div> -- Gitblit v1.8.0