|
|
@@ -0,0 +1,311 @@
|
|
|
+<template>
|
|
|
+ <div class="upload-file">
|
|
|
+ <el-dialog title="文件上传" :visible.sync="showEventLogUpload" v-if="showEventLogUpload" width="525px"
|
|
|
+ style="height: 700px; margin-top: 401px; margin-left: 0px">
|
|
|
+ <el-upload
|
|
|
+ multiple
|
|
|
+ :action="uploadFileUrl"
|
|
|
+ :before-upload="handleBeforeUpload"
|
|
|
+ :file-list="fileList"
|
|
|
+ :limit="limit"
|
|
|
+ :on-error="handleUploadError"
|
|
|
+ :on-exceed="handleExceed"
|
|
|
+ :on-success="handleUploadSuccess"
|
|
|
+ :on-change="handleChange"
|
|
|
+ :show-file-list="false"
|
|
|
+ :headers="headers"
|
|
|
+ class="upload-file-uploader"
|
|
|
+ ref="upload"
|
|
|
+ >
|
|
|
+ <!-- 上传按钮 -->
|
|
|
+ <el-button size="mini" type="primary" style="padding-right: 62px">选取文件</el-button>
|
|
|
+ <!-- 上传提示 -->
|
|
|
+ <div class="el-upload__tip" slot="tip" v-if="showTip">
|
|
|
+ 请上传
|
|
|
+ <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b></template>
|
|
|
+ <!-- <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join('/') }}</b></template>-->
|
|
|
+ 的文件
|
|
|
+ </div>
|
|
|
+ </el-upload>
|
|
|
+
|
|
|
+ <!-- 文件列表 -->
|
|
|
+ <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
|
|
|
+ <li :key="file.url" class="el-upload-list__item ele-upload-list__item-content"
|
|
|
+ v-for="(file, index) in fileList">
|
|
|
+ <el-link :href="file.webUrl" :underline="false" target="_blank">
|
|
|
+ <span class="el-icon-document"> {{ file.webName }} </span>
|
|
|
+ </el-link>
|
|
|
+ <div class="ele-upload-list__item-content-action">
|
|
|
+ <el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </transition-group>
|
|
|
+ <!-- 确认上传 -->
|
|
|
+ <el-button size="mini" type="primary" @click="submitUpload()" style="padding-right: 62px">确认上传</el-button>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { getToken } from '@/utils/auth'
|
|
|
+import {
|
|
|
+ eventLogUpload
|
|
|
+} from '@/api/forest'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'FileUpload',
|
|
|
+ props: {
|
|
|
+ // 值
|
|
|
+ value: [String, Object, Array],
|
|
|
+ // 数量限制
|
|
|
+ limit: {
|
|
|
+ type: Number,
|
|
|
+ default: 15
|
|
|
+ },
|
|
|
+ // 大小限制(MB)
|
|
|
+ fileSize: {
|
|
|
+ type: Number,
|
|
|
+ default: 15
|
|
|
+ },
|
|
|
+ // // 文件类型, 例如['png', 'jpg', 'jpeg']
|
|
|
+ // fileType: {
|
|
|
+ // type: Array,
|
|
|
+ // default: () => []
|
|
|
+ // },
|
|
|
+ // 是否显示提示
|
|
|
+ isShowTip: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ eventId: null,
|
|
|
+ eventDetails: null,
|
|
|
+ // eventCode:null,
|
|
|
+ showEventLogUpload: false,
|
|
|
+ number: 0,
|
|
|
+ uploadList: [],
|
|
|
+ uploadFileUrl: process.env.VUE_APP_BASE_API + '/file/upload', // 上传的图片服务器地址
|
|
|
+ headers: {
|
|
|
+ Authorization: 'Bearer ' + getToken()
|
|
|
+ },
|
|
|
+ fileList: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ value: {
|
|
|
+ handler(val) {
|
|
|
+ if (val) {
|
|
|
+ let temp = 1
|
|
|
+ // 首先将值转为数组
|
|
|
+ const list = Array.isArray(val) ? val : this.value.split(',')
|
|
|
+ // 然后将数组转为对象数组
|
|
|
+ this.fileList = list.map(item => {
|
|
|
+ if (typeof item === 'string') {
|
|
|
+ item = { name: item, url: item }
|
|
|
+ }
|
|
|
+ item.uid = item.uid || new Date().getTime() + temp++
|
|
|
+ return item
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.fileList = []
|
|
|
+ return []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deep: true,
|
|
|
+ immediate: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ // 是否显示提示
|
|
|
+ showTip() {
|
|
|
+ return this.isShowTip
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ submitUpload() {
|
|
|
+ let fileUrl=[]
|
|
|
+ if (this.fileList!=null&&this.fileList.length>0)
|
|
|
+ {
|
|
|
+ if(this.fileList!=null&&this.fileList.length>0){
|
|
|
+ for (let i = 0; i < this.fileList.length; i++) {
|
|
|
+ let file={attachPath:this.fileList[i].url,fileName:this.fileList[i].webName,busIndx: "bus_indx_forest",busSource: "PC"}
|
|
|
+ fileUrl.push(file)
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ this.$message.error(`请选择上传文件!`)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ // let param={ eventId:this.eventId,operation:"bus_oper_type_2",operationType:"log_oper_type_1",fileList: fileUrl }
|
|
|
+ // let param = {
|
|
|
+ // eventCode:this.eventCode,
|
|
|
+ // operation:"bus_oper_type_2",
|
|
|
+ // operationType:"log_oper_type_1",
|
|
|
+ // fileList: fileUrl
|
|
|
+ // }
|
|
|
+ // console.log("param = ", param);
|
|
|
+ let attachList = [];
|
|
|
+ for (let i = 0; i < fileUrl.length; i++) {
|
|
|
+ attachList.push({
|
|
|
+ "attachPath": fileUrl[i].attachPath, //附件路径 带文件名 group1/M00/00/26/wKgKC2jVBT2AM4EbAABDTnXaaDk333.png
|
|
|
+ "fileName": fileUrl[i].fileName, //附件名称 原文件名称 敬请期待.png
|
|
|
+ "dictType": "bus_oper_type_2", //附件类型
|
|
|
+ "dictValue": "log_oper_type_1" //附件类型实际值
|
|
|
+ })
|
|
|
+ }
|
|
|
+ let param = {
|
|
|
+ "attachList": attachList, //上传附件集合
|
|
|
+ "eventId": this.eventId //事件id
|
|
|
+ }
|
|
|
+ // let param = {
|
|
|
+ // "attachList": [
|
|
|
+ // {
|
|
|
+ // "attachPath": "group/xxxx/xxxx.jpg", //附件路径
|
|
|
+ // "fileName": "xxxx.jpg", //附件名称
|
|
|
+ // "dictType": "xxxxx", //附件类型
|
|
|
+ // "dictValue": "xxxxx" //附件类型实际值
|
|
|
+ // }
|
|
|
+ // ], //上传附件集合
|
|
|
+ // "eventId": "xxxxxxx" //事件id
|
|
|
+ // }
|
|
|
+ //日志文件上传
|
|
|
+ eventLogUpload(param).then(res => {
|
|
|
+ if(res.code==200){
|
|
|
+ this.$message.success(`上传成功!`);
|
|
|
+ this.showEventLogUpload = false
|
|
|
+ this.cancelEventLogUploadShow();
|
|
|
+ // this.$parent.refreshEventDialog(this.eventCode)
|
|
|
+ // this.$parent.refreshEventDialog(this.eventId)
|
|
|
+ this.$parent.$parent.openEventDetails(this.eventDetails)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }else {
|
|
|
+ this.$message.warning(`请先上传文件!`);
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ handleChange(file, fileList) {
|
|
|
+ var _this = this;
|
|
|
+ if (file.raw) {
|
|
|
+ let reader = new FileReader()
|
|
|
+ reader.onload = function (e) {
|
|
|
+ _this.contentHtml = e.target.result;
|
|
|
+ };
|
|
|
+ reader.readAsText(file.raw,'gb2312');
|
|
|
+
|
|
|
+ }
|
|
|
+ console.log(file, fileList);
|
|
|
+ },
|
|
|
+ eventLogUpload(eventDetails) { // eventCode
|
|
|
+ // this.eventCode=eventCode
|
|
|
+ this.eventDetails = eventDetails;
|
|
|
+ this.eventId = eventDetails.eventId;
|
|
|
+ //上传页面弹出
|
|
|
+ this.showEventLogUpload = true
|
|
|
+ },
|
|
|
+ cancelEventLogUploadShow() {
|
|
|
+ //关闭页面
|
|
|
+ this.fileList = []
|
|
|
+ this.uploadList = []
|
|
|
+ },
|
|
|
+ // 上传前校检格式和大小
|
|
|
+ handleBeforeUpload(file) {
|
|
|
+ // 校检文件类型
|
|
|
+ if (false) {
|
|
|
+ let fileExtension = ''
|
|
|
+ if (file.name.lastIndexOf('.') > -1) {
|
|
|
+ fileExtension = file.name.slice(file.name.lastIndexOf('.') + 1)
|
|
|
+ }
|
|
|
+ const isTypeOk = this.fileType.some((type) => {
|
|
|
+ if (file.type.indexOf(type) > -1) return true
|
|
|
+ if (fileExtension && fileExtension.indexOf(type) > -1) return true
|
|
|
+ return false
|
|
|
+ })
|
|
|
+ if (!isTypeOk) {
|
|
|
+ this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join('/')}格式文件!`)
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 校检文件大小
|
|
|
+ if (this.fileSize) {
|
|
|
+ const isLt = file.size / 1024 / 1024 < this.fileSize
|
|
|
+ if (!isLt) {
|
|
|
+ this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`)
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.$modal.loading('正在上传文件，请稍候...')
|
|
|
+ this.number++
|
|
|
+ return true
|
|
|
+ },
|
|
|
+ // 文件个数超出
|
|
|
+ handleExceed() {
|
|
|
+ this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`)
|
|
|
+ },
|
|
|
+ // 上传失败
|
|
|
+ handleUploadError(err) {
|
|
|
+ this.$modal.msgError('上传图片失败，请重试')
|
|
|
+ this.$modal.closeLoading()
|
|
|
+ },
|
|
|
+ // 上传成功回调
|
|
|
+ handleUploadSuccess(res) {
|
|
|
+ this.uploadList.push({ name: res.data.url, url: res.data.url, webName: res.data.webName })
|
|
|
+ if (this.uploadList.length === this.number) {
|
|
|
+ this.fileList = this.fileList.concat(this.uploadList)
|
|
|
+ this.uploadList = []
|
|
|
+ this.number = 0
|
|
|
+ this.$emit('input', this.listToString(this.fileList))
|
|
|
+ this.$modal.closeLoading()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 删除文件
|
|
|
+ handleDelete(index) {
|
|
|
+ this.fileList.splice(index, 1)
|
|
|
+ this.$emit('input', this.listToString(this.fileList))
|
|
|
+ },
|
|
|
+ // 获取文件名称
|
|
|
+ getFileName(name) {
|
|
|
+ if (name.lastIndexOf('/') > -1) {
|
|
|
+ return name.slice(name.lastIndexOf('/') + 1)
|
|
|
+ } else {
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 对象转成指定字符串分隔
|
|
|
+ listToString(list, separator) {
|
|
|
+ let strs = ''
|
|
|
+ separator = separator || ','
|
|
|
+ for (let i in list) {
|
|
|
+ strs += list[i].url + separator
|
|
|
+ }
|
|
|
+ return strs != '' ? strs.substr(0, strs.length - 1) : ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.upload-file-uploader {
|
|
|
+ margin-bottom: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.upload-file-list .el-upload-list__item {
|
|
|
+ border: 1px solid #e4e7ed;
|
|
|
+ line-height: 2;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.upload-file-list .ele-upload-list__item-content {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ color: inherit;
|
|
|
+}
|
|
|
+
|
|
|
+.ele-upload-list__item-content-action .el-link {
|
|
|
+ margin-right: 10px;
|
|
|
+}
|
|
|
+</style>
|
王哲