diff --git a/package.json b/package.json index edc6e18e..927b96d5 100644 --- a/package.json +++ b/package.json @@ -87,6 +87,7 @@ "react-infinite-scroller": "^1.2.4", "react-loadable": "^5.3.1", "react-monaco-editor": "0.37", + "react-pdf": "^4.2.0", "react-player": "^1.15.3", "react-redux": "5.0.7", "react-resizable": "^1.10.1", diff --git a/src/App.js b/src/App.js index 789c0af2..659ee589 100644 --- a/src/App.js +++ b/src/App.js @@ -75,6 +75,12 @@ const EducoderLogin = Loadable({ loading: Loading, }) +// 成果库 +const Achieve=Loadable({ + loader: () => import('./achieveRequirement/index'), + loading: Loading, +}) + class App extends Component { constructor(props) { super(props); @@ -267,7 +273,20 @@ class App extends Component { ) } /> + + {/*成果库*/} + { + return () + } + }> + + + + diff --git a/src/achieveRequirement/achieve/achieveDetail/index.jsx b/src/achieveRequirement/achieve/achieveDetail/index.jsx new file mode 100644 index 00000000..e7a95f03 --- /dev/null +++ b/src/achieveRequirement/achieve/achieveDetail/index.jsx @@ -0,0 +1,142 @@ +import React, { useEffect, useState } from 'react'; +import { Descriptions, Modal } from 'antd'; +import { Document, Page, pdfjs } from 'react-pdf'; +import DelModal from '../../components/DelModal'; +import { httpUrl } from '../../../fetch'; +import { deleteAchieve, getAchieveDetail } from '../api'; +import './index.scss'; + +pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`; + +export default (props) => { + const { match, history, current_user } = props; + const id = match.params.achieveId; + const [achiveForm, setAchiveForm] = useState({}); + const [createUserId, setCreateUserId] = useState(""); + const [visible, setVisible] = useState(false); + const [fileType, setFileType] = useState(4); + const [fileUrl, setFileUrl] = useState(4); + const [numPages, setNumPages] = useState(null); + + useEffect(() => { + getAchieveDetail(id).then(data => { + setAchiveForm(data); + setCreateUserId(data.user.id); + }) + }, [id]); + + function editItem() { + props.history.push(`/achieve/achieveEdit/${id}`); + } + + function deletItem() { + DelModal(() => { + deleteAchieve(id).then(res => { + if (res.code === '1') { + props.showNotification("删除成功"); + history.go(-1); + } else { + props.showNotification("删除失败"); + } + }) + }); + } + + function downFile(item) { + let url = httpUrl + '/busiAttachments/download/' + item.id; + window.open(url); + } + + function pdfShow(e) { + setFileType(e.fileType); + if (e.fileType === 1 || e.fileType === 2 || e.fileType === 3) { + // pdf||video||img + setVisible(true); + setFileUrl(httpUrl + '/busiAttachments/view/' + e.id); + } + } + + function onDocumentLoadSuccess({ numPages }) { + setNumPages(numPages); + } + + return ( +
+
+
+
{achiveForm.achievementName}
+ { + createUserId === current_user.user_id && +
编辑 删除
+ } +
+ + + {achiveForm.achievementType && achiveForm.achievementType.dicItemName} + + { + achiveForm.achievementLabel && achiveForm.achievementLabel.map(itemx => { + return {itemx} + }) + } + + {achiveForm.achievementBelong} + {achiveForm.updatedAt} + {achiveForm.achievementRemark} + + { + achiveForm.achievementAttachments && achiveForm.achievementAttachments.map(item => { + return
+

{ pdfShow(item) }}>{item.fileName}

+ { downFile(item) }}>下载 +
+ }) + } + + +
+ + { setVisible(false) }} + className="file-modal" + > + { + fileType === 3 &&
+ +
+ } + { + fileType === 2 &&
+ +
+ } + { + fileType === 1 &&
+ { + + {new Array(numPages).fill("").map((item, index) => { + return ( + + ); + })} + + } +
+ } + +
+ ) +} diff --git a/src/achieveRequirement/achieve/achieveDetail/index.scss b/src/achieveRequirement/achieve/achieveDetail/index.scss new file mode 100644 index 00000000..82956b03 --- /dev/null +++ b/src/achieveRequirement/achieve/achieveDetail/index.scss @@ -0,0 +1,52 @@ +// 内容详情 +.item-content { + padding: 10px 10px 0 30px; +} +.ant-descriptions-item-label { + width: 5em; + margin-right: 5px; + color: rgba(0, 0, 0, 0.65); + text-align: right; +} +.ant-descriptions-item-content { + color: rgba(0, 0, 0, 1); +} +.file-list-item > span { + vertical-align: top; +} +.file-list-box { + width: 600px; + height: 60px; + display: flex; + justify-content: space-between; + p:hover { + cursor: pointer; + color: #0089ff; + } + .downP { + color: #0089ff; + cursor: pointer; + text-decoration: none; + } +} + +// 文件预览modal样式 +.file-modal { + width: 800px !important; + .ant-modal-body { + padding-top: 40px; + .pdf-box { + height: 70vh; + overflow-y: scroll; + } + } + .ant-modal-close { + top: 0 !important; + } + .show-img { + width: 100%; + } + .react-pdf__Page__canvas { + margin: 0 auto; + } +} diff --git a/src/achieveRequirement/achieve/achieveEdit/index.jsx b/src/achieveRequirement/achieve/achieveEdit/index.jsx new file mode 100644 index 00000000..d1c39645 --- /dev/null +++ b/src/achieveRequirement/achieve/achieveEdit/index.jsx @@ -0,0 +1,219 @@ +import React, { forwardRef, useCallback, useEffect, useState } from 'react'; +import { Form, Input, Select, Button, } from 'antd'; +import Upload from '../../components/Upload'; +import { httpUrl } from '../../../fetch'; +import { getDictionary, getAchieveDetail, addAchieve, editAchieve } from '../api'; +import './index.scss'; + +const Option = Select.Option; +const { TextArea } = Input; + +export default Form.create()( + forwardRef(({ form, showNotification, match, history }, ref) => { + + const [shareType, setShareType] = useState([]); + const [tagType, setTagType] = useState([]); + const [fileList, setFileList] = useState(null); + const [achievementFiles, setAchievementFiles] = useState(undefined); + const [achievementFileTypes, setAchievementFileTypes] = useState(undefined); + + const id = match.params.achieveId; + const { getFieldDecorator, validateFields, setFieldsValue } = form; + + useEffect(() => { + id && getAchieveDetail(id).then(data => { + const formValue = { + achievementName: data.achievementName, + achievementTypeId: data.achievementTypeId, + achievementBelong: data.achievementBelong, + achievementLabel: data.achievementLabel, + achievementRemark: data.achievementRemark + }; + setFieldsValue(formValue); + if (data.achievementAttachments.length) { + for (const item of data.achievementAttachments) { + item.name = item.fileName; + item.size = item.fileSize; + item.uid = "rc-upload" + item.id + } + setFileList(data.achievementAttachments); + } + }) + }, [id]); + + // 加载选项数据 + useEffect(() => { + getDictionary('share_type').then((res) => { + setShareType(res.data); + }); + getDictionary("tag_type").then((res) => { + setTagType(res.data); + }); + }, []); + + + // 上传附件后得到的文件id数组 + function UploadFunc(ids, types) { + setAchievementFiles(ids); + setAchievementFileTypes(types); + } + + const helper = useCallback( + (label, name, rules, widget) => ( + + {getFieldDecorator(name, { rules, validateFirst: true })(widget)} + + ), + [] + ); + + const formItemLayout = { + labelCol: { + xs: { span: 12 }, + sm: { span: 4 }, + }, + wrapperCol: { + xs: { span: 12 }, + sm: { span: 20 }, + }, + }; + + const tailFormItemLayout = { + wrapperCol: { + xs: { + span: 20, + offset: 4, + }, + sm: { + span: 20, + offset: 4, + }, + }, + }; + + // 修改 + function editItem() { + if (!achievementFiles.length) { + showNotification("请上传成果文件！"); + return; + } + validateFields((error, values) => { + if (!error) { + let params = { ...values, achievementFiles, achievementFileTypes, uploadUserId: 1, }; + params.achievementLabel = params.achievementLabel.join(); + + if (id) { + // 编辑 + editAchieve(params).then(res => { + if (res.code === '1') { + showNotification("成果更新成功！"); + history.go(-1); + } else { + showNotification(res.message); + } + }); + } else { + // 新增 + addAchieve(params).then(res => { + if (res.code === '1') { + showNotification("成果更新成功！"); + history.go(-1); + } else { + showNotification(res.message); + } + }); + } + } + }) + } + + return ( +
+
+ +
+
修改成果
+
+ +
+ {helper( + "成果名称：", + "achievementName", + [{ required: true, message: "请输入成果名称" }], + + )} + + {helper( + "成果类别：", + "achievementTypeId", + [{ required: true, message: "请选择成果类别" }], + + )} + + {helper( + "单位名称：", + "achievementBelong", + [{ required: true, message: "请输入单位名称" }], + + )} + + + + + + {helper( + "标签：", + "achievementLabel", + [{ required: true, message: "请选择成果标签" }], + + )} + + {helper( + "成果描述：", + "achievementRemark", + [{ required: true, message: "请输入成果描述" }], +