From a49b7a0b1d7289da46d06eb30bac30bba18d3d75 Mon Sep 17 00:00:00 2001 From: dengyinhuan Date: Fri, 4 Aug 2023 17:31:57 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=B7=AF=E6=94=BF=E5=9B=BE?= =?UTF-8?q?=E7=89=87=E9=A2=84=E8=A7=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../fillion/components/luzhengmodel.js | 14 +- .../sections/fillion/components/uploads.js | 328 ++++++++++++++++++ .../sections/fillion/containers/luzheng.js | 21 +- 3 files changed, 349 insertions(+), 14 deletions(-) create mode 100644 web/client/src/sections/fillion/components/uploads.js diff --git a/web/client/src/sections/fillion/components/luzhengmodel.js b/web/client/src/sections/fillion/components/luzhengmodel.js index 57d96842..eaf98008 100644 --- a/web/client/src/sections/fillion/components/luzhengmodel.js +++ b/web/client/src/sections/fillion/components/luzhengmodel.js @@ -6,13 +6,13 @@ import { getAssess, delAssess, editAssess } from '../actions/assess'; import moment from 'moment'; import { getRoadadministration,addRoadadministration,delRoadadministration,modifyRoadadministration } from '../actions/luzheng'; // import Uploads from "../../../../components/Upload/index" -import Uploads from '../../../components/Upload/index' - +// import Uploads from '../../../components/Upload/index' +import Uploads from './uploads' const { Option } = Select; const LuzhengModel = ({ editData, check, visible, onCancel, dispatch }) => { const [form] = Form.useForm(); - + console.log(editData,'editData') return ( { - + - + diff --git a/web/client/src/sections/fillion/components/uploads.js b/web/client/src/sections/fillion/components/uploads.js new file mode 100644 index 00000000..09226232 --- /dev/null +++ b/web/client/src/sections/fillion/components/uploads.js @@ -0,0 +1,328 @@ +'use strict'; + +import React, { Component } from 'react'; +import { connect } from 'react-redux'; +import { Spin, Upload, message, Modal, Card, Button } from 'antd'; +import moment from 'moment'; +import { PlusOutlined, UploadOutlined, CloseOutlined } from '@ant-design/icons'; + +class Uploads extends Component { + constructor(props) { + super(props); + this.ApiRoot = localStorage.getItem('tyApiRoot') + this.state = { + fileUploading: false, + fileList: [], + curPreviewPic: '', + delPicIng: false, + removeFilesList: [] + }; + } + + dealName = (uploaded) => { + console.log(uploaded) + let realName = uploaded.split('/')[2] + let x1 = realName.split('.') + let x2 = x1[0].split('_') + let showName = `${x2[0]}.${x1[1]}` + return showName + } + + setFileList = (value) => { + console.log(value,'value') + let defaultFileList = []; + defaultFileList = value.map((u, index) => { + let fileUrl = `${u.url}`; + return { + uid: -index - 1, + name: this.dealName(u.url), + status: 'done', + storageUrl: u.url, + url: fileUrl + }; + }); + // onChange(defaultFileList) + this.setState({ + fileList: defaultFileList + }); + }; + + componentDidMount () { + const { value } = this.props; + if (value) { + this.setFileList(value); + } + } + + componentWillReceiveProps (np) { + const { dispatch, value: thisEditData, onChange } = this.props; + const { value: nextEditData, clearFileList } = np; + console.log(np,'npp') + const setFileList = () => { + let defaultFileList = []; + defaultFileList = nextEditData.map((u, index) => { + let fileUrl = `${u.storageUrl}`; + return { + uid: -index - 1, + name: this.dealName(u.storageUrl), + status: 'done', + storageUrl: u.storageUrl, + url: fileUrl, + size: u.size || -1 + }; + }); + this.setState({ + fileList: defaultFileList + }); + }; + + if (nextEditData && nextEditData.length) { + if (!thisEditData || !this.state.fileList.length) { + setFileList(); + } else if (nextEditData.length != thisEditData.length) { + setFileList(); + } else { + let repeat = true; + for (let i = 0; i < thisEditData.length; i++) { + if (thisEditData[i] != nextEditData[i]) { + repeat = false; + break; + } + } + if (!repeat) { + setFileList(); + } + } + } + + + if (clearFileList) { + this.setState({ + fileList: [] + }); + } + + + // else{ + // this.setState({ + // fileList:[], + // }) + // } + } + + render () { + const UploadPath = { + project: ['txt', 'dwg', 'doc', 'docx', 'xls', 'xlsx', 'pdf', 'png', 'jpg', 'rar', 'zip'], + report: ['doc', 'docx', 'xls', 'xlsx', 'pdf'], + data: ['txt', 'xls', 'xlsx'], + image: ['png', 'jpg', 'svg', 'jpeg'], + three: ['js'], + video: ['mp4'] + }; + /** + * uploadType 【string】 主要区别文件上传路径 以及类型 以 web/routes/attachment/index.js 中 UploadPath 的 key 值为准；默认 project； + * disabled 【boolean】 上传是否可用 + * maxFilesNum 【number】 最大上传数量 + * fileTypes 【array[string]】 可允许上传的文件类型； + * maxFileSize 【number】 单个文件最大大小 M + * listType 【antd】 upload 组件的属性 + * onChange 【function】 文件数量变化时候回调 返回文件 + * value 【array[obj]】 编辑数据 [{url:'xxx', [size:999]}] + * onStateChange 【function】 文件状态改变回调函数 上传中 return { uploading:true/false } + */ + const { + uploadType, + disabled, + maxFilesNum, + fileTypes, + maxFileSize, + listType, + onChange, + value, + showUploadList, + onStateChange + } = this.props; + const { fileList, curPreviewPic, delPicIng, removeFilesList } = this.state; + const that = this; + let uploadType_ = uploadType || 'project'; + let maxFilesNum_ = maxFilesNum || 1; + let defaultFileTypes = fileTypes || UploadPath[uploadType_]; + const uploadProps = { + name: 'checkFile_', + multiple: false, + showUploadList: showUploadList || true, + action: `attachments/${uploadType_}`, + listType: listType || 'text', + disabled: disabled, + beforeUpload: (file) => { + if (fileList.length >= maxFilesNum_) { + message.warning(`最多选择${maxFilesNum_}个文件上传`); + return false; + } + if (file.name.length > 60) { + message.warning(`文件名过长(大于60字符)，请修改后上传`); + return false; + } + const extNames = file.name.split('.'); + var reg = /^[\.\s\u4e00-\u9fa5a-zA-Z0-9_-]{0,}$/; + if (!reg.exec(file.name)) { + message.warning(`文件名包含除字母、汉字、数字、中划线、下划线之外的字符，请修改后上传`); + return false; + } + let isDAE = false; + if (extNames.length > 0) { + let fileType = extNames[extNames.length - 1].toLowerCase(); + isDAE = defaultFileTypes.some((f) => f == fileType); + } + if (!isDAE) { + message.error(`只能上传 ${defaultFileTypes.join()} 格式的文件!`); + return false; + } + const isLt = file.size / 1024 / 1024 < (maxFileSize || 3); + if (!isLt) { + message.error(`文件必须小于${maxFileSize || 3}MB!`); + return false; + } + this.setState({ + fileUploading: true + }); + if (onStateChange) { + onStateChange({ uploading: true }); + } + }, + onChange (info) { + const status = info.file.status; + if (status === 'uploading') { + that.setState({ + fileList: info.fileList + }); + } + if (status === 'done') { + let { uploaded, url } = info.file.response; + let size = info.file.size; + let nextFileList = fileList; + nextFileList[nextFileList.length - 1] = { + uid: -moment().unix(), + name: that.dealName(uploaded), + status: 'done', + storageUrl: uploaded, + url: url, + size: size + }; + onChange(nextFileList); + that.setState({ + fileUploading: false, + fileList: nextFileList + }); + if (onStateChange) { + onStateChange({ uploading: false }); + } + } else if (status === 'error') { + that.setState({ + fileUploading: false + }); + message.error(`${info.file.name} 上传失败，请重试`); + if (onStateChange) { + onStateChange({ uploading: false }); + } + } + }, + onRemove (file) { + let nextFileList = []; + fileList.map((f, i) => { + if (f.uid != file.uid) { + nextFileList.push(f); + } + }); + let nextRemoveFiles = removeFilesList.concat([file.storageUrl]); + if (curPreviewPic == file.url) { + that.setState({ + curPreviewPic: '' + }); + } + onChange(nextFileList); + that.setState({ + fileList: nextFileList, + removeFilesList: nextRemoveFiles + }); + }, + onPreview (file) { + console.log(file,'file') + let filePostfix = file.url.split('.').pop(); + filePostfix = filePostfix.toLowerCase(); + if (UploadPath.image.some((img) => img == filePostfix)) { + that.setState({ + curPreviewPic: file.url + }); + } else { + message.warn('仅支持图片预览'); + } + } + }; + + let fileList_ = fileList + // .map(f => { + // if (f.storageUrl) { + // let realName = f.storageUrl.split('/').pop() + // if (f.name != realName) { + // f.name = realName + // } + // } + // return f + // }) + console.log('fileList_：', fileList_); + return ( +
+ + + { + disabled ? ( + '' + ) : + listType == 'picture-card' ? + ( + fileList.length >= maxFilesNum_ ? null : ( +
+ +
上传图片
+
+ ) + ) : ( + + ) + } + + { + curPreviewPic ? ( + +
+ 文件预览 + { this.setState({ curPreviewPic: '' }); }} + > + + +
+ + + ) : '' + } + +
+ ); + } +} + +function mapStateToProps (state) { + const { auth } = state + return { + user: auth.user + }; +} + +export default connect(mapStateToProps)(Uploads); diff --git a/web/client/src/sections/fillion/containers/luzheng.js b/web/client/src/sections/fillion/containers/luzheng.js index 584d558a..f158e243 100644 --- a/web/client/src/sections/fillion/containers/luzheng.js +++ b/web/client/src/sections/fillion/containers/luzheng.js @@ -106,12 +106,17 @@ function Assess(props) { dataIndex: 'picfile', key: 'picfile', render:(t,r)=>{ - return r?.picfile?.map(i=>{ - return + + + return r?.picfile?.map(i=>{ + return + + }) + + + + } }, @@ -128,8 +133,8 @@ function Assess(props) { + + }} disabled = { editAble }>编辑 { @@ -166,7 +171,7 @@ function Assess(props) { search={false} /> { - assessModalVisible ? { + assessModalVisible && editData ? { getData() setIsCheck(false) setEditData(null)