diff --git a/src/common/lang/en-us.js b/src/common/lang/en-us.js index 6b765100..9a504a6a 100644 --- a/src/common/lang/en-us.js +++ b/src/common/lang/en-us.js @@ -509,6 +509,11 @@ module.exports = { pleaseUpload: 'Please Upload', file: 'File' }, + importWithTemplate: { + chooseFile: 'Select file', + downTemplate: 'Click to download template', + noFileMsg: 'Please select a file' + }, // 系统管理 system, // 个人中心 diff --git a/src/common/lang/zh-cn.js b/src/common/lang/zh-cn.js index eb0c1521..f4769af6 100644 --- a/src/common/lang/zh-cn.js +++ b/src/common/lang/zh-cn.js @@ -509,6 +509,11 @@ module.exports = { pleaseUpload: '请上传', file: '文件' }, + importWithTemplate: { + chooseFile: '选择文件', + downTemplate: '点击下载模板', + noFileMsg: '请选择一个文件' + }, // 系统管理 system, // 个人中心 diff --git a/src/components/ImportWithTemplate.vue b/src/components/ImportWithTemplate.vue new file mode 100644 index 00000000..d93aecdd --- /dev/null +++ b/src/components/ImportWithTemplate.vue @@ -0,0 +1,121 @@ + + + + + diff --git a/src/components/PersonnelInfo.vue b/src/components/PersonnelInfo.vue new file mode 100644 index 00000000..ba08ac61 --- /dev/null +++ b/src/components/PersonnelInfo.vue @@ -0,0 +1,210 @@ + + + + + diff --git a/src/components/jero/JUpload.vue b/src/components/jero/JUpload.vue index a436bcce..81a465b5 100644 --- a/src/components/jero/JUpload.vue +++ b/src/components/jero/JUpload.vue @@ -2,44 +2,36 @@
- -
-
- -
-
- - -
@@ -48,11 +40,15 @@ import Vue from 'vue' import { ACCESS_TOKEN } from '@/store/mutation-types' import { getFileAccessHttpUrl, downloadFile } from '@/api/manage' -import { previewPdf } from '@/utils/previewPdf' -import JImagePreviewModal from '@comp/jero/modal/JImagePreviewModal.vue' +import { getFileInfo } from '@/api/api' +import { previewPdf } from '../../utils/previewPdf' + +// eslint-disable-next-line no-undef +// const Base64 = require('js-base64').Base64 const FILE_TYPE_ALL = 'all' const FILE_TYPE_IMG = 'image' +// const FILE_TYPE_TXT = 'file' const FILE_TYPE_IMGS = ['jpg', 'jpeg', 'png', 'raw'] const FILE_TYPE_PDF = 'pdf' @@ -66,20 +62,19 @@ const Base64 = require('js-base64').Base64 const CAN_PREVIEW_FILE_TYPE = ['pdf', 'image'] // 不支持预览的文件后缀 const CAN_PREVIEW_FILE_SUFFIX = ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'mp3', 'mp4', 'flv'] - +const uidGenerator = () => { + return '-' + parseInt(Math.random() * 10000 + 1, 10) +} export default { name: 'JUpload', - components: { JImagePreviewModal }, data () { return { uploadAction: window._CONFIG.domianURL + '/sys/common/upload', headers: {}, fileList: [], newFileList: [], - image: false, uploadGoOn: true, - containerId: null, - imageUrl: null + fileTypes: this.fileType } }, props: { @@ -126,6 +121,16 @@ export default { required: false, default: true }, + /** + * 仅返回文件id + * true 仅返回文件id + * false 返回reurl + * */ + returnId: { + type: Boolean, + required: false, + default: false + }, number: { type: Number, required: false, @@ -136,15 +141,9 @@ export default { required: false, default: true }, - multiple: { - type: Boolean, - default: true - }, - beforeUpload: { - type: Function - }, - isDownload: { + showUploadList: { type: Boolean, + required: false, default: true } }, @@ -153,16 +152,15 @@ export default { immediate: true, handler () { const val = this.value - this.initFileList(val) - // if (val instanceof Array) { - // if (this.returnUrl) { - // this.initFileList(val.join(',')) - // } else { - // this.initFileListArr(val) - // } - // } else { - // this.initFileList(val) - // } + if (val instanceof Array) { + if (this.returnUrl) { + this.initFileList(val.join(',')) + } else { + this.initFileListArr(val) + } + } else { + this.initFileList(val) + } } } }, @@ -190,67 +188,90 @@ export default { // ---------------------------- end 图片左右换位置 ------------------------------------- }, methods: { - // 将url的参数拆分成对象 - urlToParams (url) { - const commonUrl = window._CONFIG.staticDomainURL - // url截取参数的部分 - const paramsStr = url.slice(url.indexOf('?') + 1) - const paramsObj = { - url, - id: url.slice(url.indexOf(commonUrl) + commonUrl.length + 1, url.indexOf('?')) - } - paramsStr.split('&').forEach(item => { - const arr = item.split('=') - paramsObj[arr[0]] = arr[1] - }) - return paramsObj - }, - initFileList (val) { + initFileListArr (val) { if (!val || val.length === 0) { this.fileList = [] return } - // 所有文件url的数组 - let arr = [] - // 用于临时存储文件的数组,最终会被赋值到this.fileList - const fileList = [] - if (val instanceof Array) { - // url数组直接返回，如果是对象数组，就将每个对象的url取出 - arr = this.returnUrl ? val : val.map(item => item.filePath) - } else { - // 将字符串拆分数组(props声明value只能是Array或String) - arr = val.split(',') + for (let a = 0; a < val.length; a++) { + this.fileList.forEach((item) => { + if (item.url === val[a]) { + item.uid = uidGenerator() + item.response.status = 'done' + } + }) } - arr.forEach(url => { - if (url) { - const params = this.urlToParams(url) + }, + async initFileList (paths) { + if (!paths || paths.length === 0) { + this.fileList = [] + return + } + let arr = paths.split(',') + // 返回路径的时候,对路径进行操作,取出所属id + if (!this.returnId && arr.length > 0) { + const newArr = [] + arr.map(item => { + const itemArr = item.split('/') + newArr.push(itemArr[itemArr.length - 1]) + }) + arr = newArr + } + const fileList = [] + for (let a = 0; a < arr.length; a++) { + // 获取每一个文件的信息，组成fileList + // 突然想判断现在的fileList 中是否是历史的信息，如果是的话则先进行匹配 + const isHistory = this.fileList.find(file => file.response.status === 'history' && (file.response.result || {}).id === arr[a]) + console.log('isHistory===', isHistory) + if (isHistory) { + fileList.push(isHistory) + } else { + const fileObj = await this.getFileInfo(arr[a]) + const url = getFileAccessHttpUrl(arr[a]) + const fileName = (fileObj || {}).fileName + const fileNameNotType = fileName.substring(0, fileName.lastIndexOf('.')) + const previewUrl = (fileObj || {}).url || '' + const previewName = previewUrl.substring(previewUrl.lastIndexOf(fileNameNotType)) fileList.push({ - uid: params.id, - name: params.fullfilename, + uid: uidGenerator(), + name: (fileObj || {}).fileName, status: 'done', - url, - // response用于下载和预览 + url: url, + previewName, response: { - success: true, - result: { - id: params.id, - fileName: params.fullfilename - }, - status: 'history' + status: 'history', + message: arr[a], + result: fileObj } }) } - }) - // 将处理好的数据回显 - this.fileList = fileList + } + this.fileList = [...fileList] }, handlePathChange () { const uploadFiles = this.fileList let path = '' + // 文件id + let fileIds = '' if (!uploadFiles || uploadFiles.length === 0) { path = '' } const arr = [] + // 如果returnid为true 只返回id + if (this.returnId) { + for (let a = 0; a < uploadFiles.length; a++) { + if (uploadFiles[a].status === 'done') { + arr.push(uploadFiles[a].response.result.id) + } else { + return + } + } + if (arr.length > 0) { + fileIds = arr.join(',') + } + this.$emit('change', fileIds) + return + } for (let a = 0; a < uploadFiles.length; a++) { if (uploadFiles[a].status === 'done') { @@ -264,20 +285,39 @@ export default { } this.$emit('change', path) }, - doBeforeUpload (file) { + beforeUpload (file) { this.uploadGoOn = true - const fileType = file.type - if (this.fileType === FILE_TYPE_IMG) { - if (fileType.indexOf('image') < 0) { - this.$message.warning('请上传图片') + file.uploadGoOn = true + const fileSize = file.size // 上传的文件大小 + const fileType = file.type // 上传的文件类型 + if (fileSize > 1024 * 1024 * 100) { + this.$message.warning('文件大小限制为100M') + this.uploadGoOn = false + file.uploadGoOn = false + return false + } + // 不等于全部类型可以上传的时候，对上传的文件进行判断 + if (this.fileType !== FILE_TYPE_ALL) { + // filter(tt => fileType.indexOf(tt) > -1) 判断用户传的文件类型，和要求传的文件类型是否一致 + // 当上传的图片格式为jpg时，在此组件中，会返回类型为 image/jpeg ElememntUI设计如此 所以需要把用户传下来的jpg强制改成jpeg + this.fileTypes = this.fileTypes.replace('jpg', 'jpeg') + const arr = this.fileTypes.split(',').filter(tt => fileType.indexOf(tt) > -1) + if (arr.length === 0) { + this.$message.warning(this.fileTypeErrorMessage || `请上传${this.fileTypes}文件`) this.uploadGoOn = false + file.uploadGoOn = false return false } } - // 扩展 beforeUpload 验证 - if (typeof this.beforeUpload === 'function') { - return this.beforeUpload(file) + if (this.fileTypes === FILE_TYPE_IMG) { + if (fileType.indexOf('image') < 0) { + this.$message.warning('请上传图片') + this.uploadGoOn = false + file.uploadGoOn = false + return false + } } + // TODO 扩展功能验证文件大小 return true }, handleChange (info) { @@ -292,14 +332,15 @@ export default { if (info.file.response.success) { fileList = fileList.map((file) => { if (file.response) { - // const reUrl = `${file.response.result.id}?token=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${file.response.result.fileName}` - // TODO getFileAccessHttpUrl方法会追加token，在之后拼参数 - file.url = getFileAccessHttpUrl(file.response.result.id) + '&fullfilename=' + file.response.result.fileName + // let reUrl = `${file.response.result.id}?token=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${file.response.result.fileName}`; + file.url = getFileAccessHttpUrl(file.response.result.id) } return file }) } else { - this.$message.error(info.file.response.message) + info.fileList.pop() + this.uploadGoOn = false + this.$message.warn(info.file.response.message) } // this.$message.success(`${info.file.name} 上传成功!`); } else if (info.file.status === 'error') { @@ -373,6 +414,29 @@ export default { const url = `${window._CONFIG.onlinePreviewDomainURL}?url=${encodeURIComponent(Base64.encode(fileFullUrl))}` window.open(url) }, + getFileUrl (fileId) { + return `${window._CONFIG.domianURL}/sys/common/download/${fileId}` + }, + /** + * 通过文件的id获取文件的相关信息 + * @param id + */ + getFileInfo (id) { + return new Promise(resolve => { + let result = {} + getFileInfo({ id: id }).then(res => { + if (res.success) { + result = res.result + } + }).finally(() => { + resolve(result) + }) + }) + }, + /** + * 单个文件的下载功能 + * @param file + */ handleDownload (file) { // 下载文件 downloadFile(`/sys/common/download/${file.response.result.id}`, file.name) @@ -387,7 +451,7 @@ export default { } -