[update]-会议-嘉宾可以上传 会议资料文件,并且可以更新列表页的数据

This commit is contained in:
fengchenchen
2023-07-14 19:11:57 +08:00
parent b8daa6f46c
commit 522c439804
6 changed files with 730 additions and 9 deletions
+12 -2
View File
@@ -65,7 +65,7 @@
</a-table>
<!-- 会议详情 -->
<meeting-detail-modal ref="meetingDetail" is-meeting-bool></meeting-detail-modal>
<meeting-detail-modal ref="meetingDetail" is-meeting-bool @refresh-data="fileRefreshData"></meeting-detail-modal>
<!--上传凭证-->
<upload-meeting-certificate-modal ref="upload" @ok="loadData"></upload-meeting-certificate-modal>
@@ -214,7 +214,7 @@ export default {
},
methods: {
compareCurrentTime,
loadData(arg) {
loadData(arg, callback) {
if (!this.url.list) {
this.$message.error('请设置url.list属性!')
return
@@ -238,6 +238,7 @@ export default {
} else {
this.ipagination.total = 0
}
callback && callback()
//update-end---author:zhangyafei Date:20201118 for:适配不分页的数据列表------------
}
if (res.code === 510) {
@@ -281,6 +282,15 @@ export default {
openMeetingDetail(item) {
// 打开会议详情
this.$refs.meetingDetail.open(item)
},
// 嘉宾上传会议资料后的回调函数
fileRefreshData(situationId) {
const callback = (situationId) => {
let item = this.dataSource.find(item => item.situationId === situationId)
item && this.openMeetingDetail(item)
}
// 重新请求数据,并执行打开弹窗的回调函数
this.loadData(null, callback(situationId))
}
},
created() {
+544
View File
@@ -0,0 +1,544 @@
<template>
<div :id="containerId" style="position: relative">
<a-upload
name="file"
:action="uploadAction"
:headers="headers"
:data="{'biz':bizPath}"
:fileList="fileList"
:beforeUpload="beforeUpload"
@change="handleChange"
:disabled="disabled"
:returnUrl="returnUrl"
:listType="complistType"
@preview="handlePreview"
v-bind="$attrs"
v-on="childListeners"
:class="{'uploadty-disabled':disabled}">
<template>
<div v-if="isImageComp">
<a-icon type="plus"/>
<div class="ant-upload-text">{{ text }}</div>
</div>
<a-button v-else-if="buttonVisible">
<a-icon type="upload"/>
{{ text }}
</a-button>
</template>
</a-upload>
<!-- :show-upload-list="showUploadList"-->
<!-- 增加上传文件的下载和查看的按钮主要思想是生成相应的元素用定位的思想定位到原来的文件列表中 -->
<template v-if="showOtherIcon">
<div class="file-list-html">
<template v-for="(item,index) in fileList">
<div :key="index" class="file-item" :class="{'show': item.status === 'done'}">
<span class="file-item-btn" @click.prevent.stop="myDownload(item)">
<a-icon type="download" />
下载
</span>
<span class="file-item-btn" @click.prevent.stop="myPreview(item)">
<a-icon type="eye" />
查看
</span>
</div>
</template>
</div>
</template>
</div>
</template>
<script>
import Vue from 'vue'
import {ACCESS_TOKEN} from '@/store/mutation-types'
import {getFileAccessHttpUrl, downloadFile} from '@/api/manage'
import {getFileInfo} from '@/api/api'
// 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 uidGenerator = () => {
return '-' + parseInt(Math.random() * 10000 + 1, 10)
}
export default {
name: 'JUpload',
data() {
return {
uploadAction: window._CONFIG['domianURL'] + '/sys/common/uploadByToken',
headers: {},
fileList: [],
newFileList: [],
uploadGoOn: true,
fileTypes: this.fileType
}
},
props: {
text: {
type: String,
required: false,
default: '点击上传'
},
fileType: {
type: String,
required: false,
default: FILE_TYPE_ALL
},
/*这个属性用于控制文件上传的业务路径*/
bizPath: {
type: String,
required: false,
default: 'temp'
},
value: {
type: [String, Array],
required: false
},
// update-begin- --- author:wangshuai ------ date:20190929 ---- for:Jupload组件增加是否能够点击
disabled: {
type: Boolean,
required: false,
default: false
},
// update-end- --- author:wangshuai ------ date:20190929 ---- for:Jupload组件增加是否能够点击
//此属性被废弃了
triggerChange: {
type: Boolean,
required: false,
default: false
},
/**
* update -- author:lvdandan -- date:20190219 -- for:Jupload组件增加是否返回url
* true:仅返回url
* false:返回fileName filePath fileSize
*/
returnUrl: {
type: Boolean,
required: false,
default: true
},
/**
* 仅返回文件id
* true 仅返回文件id
* false 返回reurl
* */
returnId: {
type: Boolean,
required: false,
default: false
},
number: {
type: Number,
required: false,
default: 0
},
buttonVisible: {
type: Boolean,
required: false,
default: true
},
/**
* 是否显示下载和查看按钮
**/
showOtherIcon: {
type: Boolean,
required: false,
default: true
}
},
watch: {
value: {
immediate: true,
handler() {
let val = this.value
if (val instanceof Array) {
if (this.returnUrl) {
this.initFileList(val.join(','))
} else {
this.initFileListArr(val)
}
} else {
this.initFileList(val)
}
}
}
},
computed: {
//透传给下级组件的事件,需要排除本组件使用的change事件
childListeners() {
// const vm = this
let result = Object.assign({},
this.$listeners,
)
delete result.change
return result
},
isImageComp() {
return this.fileType === FILE_TYPE_IMG
},
complistType() {
return this.fileType === FILE_TYPE_IMG ? 'picture-card' : 'text'
},
},
created() {
const token = Vue.ls.get(ACCESS_TOKEN)
//---------------------------- begin 图片左右换位置 -------------------------------------
this.headers = {'X-Access-Token': token}
this.containerId = 'container-ty-' + new Date().getTime()
//---------------------------- end 图片左右换位置 -------------------------------------
},
methods: {
initFileListArr(val) {
if (!val || val.length === 0) {
this.fileList = []
return
}
for (let a = 0; a < val.length; a++) {
this.fileList.forEach((item) => {
if (item.url === val[a]) {
item.uid = uidGenerator()
item.response.status = 'done'
}
})
}
},
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 => {
let itemArr = item.split('/')
newArr.push(itemArr[itemArr.length - 1])
})
arr = newArr
}
const fileList = []
for (let a = 0; a < arr.length; a++) {
// 获取每一个文件的信息,组成fileList
// 突然想判断现在的fileList 中是否是历史的信息,如果是的话则先进行匹配
let 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: uidGenerator(),
name: (fileObj || {}).fileName,
status: 'done',
url: url,
previewName,
response: {
status: 'history',
message: arr[a],
result: fileObj
}
})
}
}
this.fileList = [...fileList]
this.showOtherIcon && this.actionsClass()
},
handlePathChange() {
let uploadFiles = this.fileList
let path = ''
// 文件id
let fileIds = ''
if (!uploadFiles || uploadFiles.length === 0) {
path = ''
}
let 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') {
arr.push(uploadFiles[a].url)
} else {
return
}
}
if (arr.length > 0) {
path = arr.join(',')
}
this.$emit('change', path)
},
beforeUpload(file) {
this.uploadGoOn = true
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
}
}
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) {
if (!info.file.status && this.uploadGoOn === false) {
info.fileList.pop()
}
let fileList = info.fileList
if (info.file.status === 'done') {
if (this.number > 0) {
fileList = fileList.slice(-this.number)
}
if (info.file.response.success) {
fileList = fileList.map((file) => {
if (file.response) {
// 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{
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') {
this.$message.error(`${info.file.name} 上传失败.`)
} else if (info.file.status === 'removed') {
this.handleDelete(info.file)
}
this.fileList = fileList
if (info.file.status === 'done' || info.file.status === 'removed') {
//returnUrl为true时仅返回文件路径
if (this.returnUrl) {
this.handlePathChange()
} else {
//returnUrl为false时返回文件名称、文件路径及文件大小
this.newFileList = []
for (let a = 0; a < fileList.length; a++) {
// update-begin-author:lvdandan date:20200603 for:【TESTA-514】【开源issue】多个文件同时上传时,控制台报错
if (fileList[a].status === 'done') {
let fileJson = {
fileName: fileList[a].name,
filePath: fileList[a].url,
fileSize: fileList[a].size
}
this.newFileList.push(fileJson)
} else {
return
}
// update-end-author:lvdandan date:20200603 for:【TESTA-514】【开源issue】多个文件同时上传时,控制台报错
}
this.$emit('change', this.newFileList)
}
}
},
handleDelete(file) {
//如有需要新增 删除逻辑
console.log(file)
},
handlePreview(file) {
if (this.showOtherIcon) {
return
}
// eslint-disable-next-line no-unreachable
if (file && file.url) {
const fileFullUrl = `${window._CONFIG['domianWebSocketURL']}/sys/common/download/${file.response.result.id}?token=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${file.previewName}`
let url = `${window._CONFIG['onlinePreviewDomainURL']}?url=${encodeURIComponent(fileFullUrl)}`
// let url = `${window._CONFIG['onlinePreviewDomainURL']}?url=${encodeURIComponent(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)
})
})
},
// 修改删除按钮的样式,增加文字说明
actionsClass(){
this.$nextTick(()=>{
let content = document.getElementsByClassName('ant-upload-list-item-card-actions')
for (let i = 0; i < content.length; i++) {
if ( content[i].childNodes.length > 0){
// content[i].innerHTML = '<a-icon type="delete" />'
content[i].childNodes[0].childNodes[0].innerHTML = ' <svg class="delete-icon" viewBox=\'64 64 896 896\' data-icon=\'delete\' width=\'1em\' height=\'1em\' fill=\'currentColor\'\n' +
' aria-hidden=\'true\' focusable=\'false\' className=\'\'>\n' +
' <path\n' +
' d=\'M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z\'></path>\n' +
' </svg><span class="delete-span">删除</span>'
}
}
})
},
/**
* 单个文件的下载功能
* @param file
*/
myDownload(file) {
downloadFile(`sys/common/download/${file.response.result.id}`, file.name)
},
/**
* 单个文件的预览功能
* @param file
*/
myPreview(file) {
if (file && file.url) {
const fileFullUrl = `${window._CONFIG['domianWebSocketURL']}/sys/common/download/${file.response.result.id}?token=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${file.previewName}`
let url = `${window._CONFIG['onlinePreviewDomainURL']}?url=${encodeURIComponent(fileFullUrl)}`
// let url = `${window._CONFIG['onlinePreviewDomainURL']}?url=${encodeURIComponent(fileFullUrl)}`
window.open(url)
}
}
},
mounted() {
},
model: {
prop: 'value',
event: 'change'
}
}
</script>
<style lang="less" scoped>
.uploadty-disabled {
/deep/.ant-upload-list-item {
.anticon-close {
display: none;
}
.anticon-delete {
display: none;
}
}
}
// 新增的文件操作按钮的样式
/deep/.file-list-html{
position: absolute!important;
top: 45px!important;
right: 60px!important;
height: auto!important;
z-index:2!important;
}
/deep/.file-item {
height: 30px;
position: relative;
display: flex;
align-items: center;
transition: opacity 1s;
opacity: 0;
&.show{
opacity: 1;
transition: opacity 2s;
}
& > span {
vertical-align: middle;
}
.file-item-btn {
display: inline-block;
margin-left: 10px;
color: #808080;
cursor: pointer;
}
}
// 左侧文件名称的样式
/deep/.ant-upload-list-item-name{
width: calc(100% - 150px) !important;
height: 23px !important;
text-align: left;
line-height: 23px;
padding-right: 10px !important;
text-overflow: ellipsis !important;
overflow: hidden !important;
white-space: nowrap !important;
}
// 删除按钮的样式
/deep/.ant-upload-list-item-card-actions{
opacity: 1!important;
color: #808080;
cursor: pointer!important;
}
// 删除按钮 样式的修改
/deep/.delete-icon,
/deep/.delete-span{
display: inline-block;
vertical-align: middle;
margin-top: -4px;
cursor: pointer!important;
color: #808080;
}
// 单显hover隐掉
/deep/.ant-upload-list-item-info:hover {
background: none !important;
;
}
/deep/.ant-upload-list-item-name:hover {
cursor: pointer;
}
</style>
+18 -3
View File
@@ -588,8 +588,8 @@
<section class="base-info">
<h3 class="title">会议资料</h3>
<!-- 报名成功才显示查看按钮-->
<div class="table-operator" style="margin-bottom: 15px">
<a-button type="primary" icon="plus" >资料上传</a-button>
<div class="table-operator upload-div" v-if="situationInfo.guestsUploadFileFlag">
<a-button type="primary" icon="plus" @click="uploadFileFunc">资料上传</a-button>
</div>
<file-table :file-id="model.meetingData" :has-limit-bool="true" :meeting-id="model.id"
:show-detail-bool="showDetailBool"></file-table>
@@ -633,6 +633,8 @@
</template>
<edit-sign-up-info ref="editSignUpInfoForm"></edit-sign-up-info>
<file-upload-modal ref="fileUploadModal" :meeting-id="model.id" @ok="refreshData"></file-upload-modal>
</j-modal>
</template>
@@ -650,6 +652,7 @@ import {compareCurrentTime} from '../../utils/meetingJudgeUtil'
import EditSignUpInfo from '@views/meetingActivity/modules/EditSignUpInfo'
// 问题征集的表格
import ProblemCollectionTable from './modules/ProblemCollectionTable'
import FileUploadModal from './modules/FileUploadModal'
const columns = [
{
@@ -708,7 +711,8 @@ export default {
FileTable,
SignStep,
EditSignUpInfo,
ProblemCollectionTable
ProblemCollectionTable,
FileUploadModal
},
props: {
// 是否是从会议点进来的 默认走消息
@@ -978,6 +982,14 @@ export default {
goSignUpPage() {
let url = `${window._CONFIG['singInQRCodHref']}?id=${this.model.id}`
window.open(url, '_blank')
},
uploadFileFunc() {
this.$refs.fileUploadModal.add()
},
// 更新显示页面的数据
refreshData() {
console.log('---------refreshData--------')
this.$emit('refresh-data', this.model.situationId)
}
}
@@ -1175,4 +1187,7 @@ h3.title::before {
.m-l-10 {
margin-left: 10px;
}
.upload-div{
margin-bottom: 10px;
}
</style>
@@ -0,0 +1,132 @@
<!--嘉宾文件上传的模态框-->
<template>
<j-modal
:title="title"
:width="width"
:visible="visible"
:confirmLoading="confirmLoading"
switchFullscreen
@ok="handleOk"
@cancel="handleCancel"
cancelText="关闭">
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<a-row>
<a-col>
<a-form-item label="文件" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-upload file-type="all"
file-type-error-message="请上传文件"
:multiple="true"
:number="10"
:return-id="true"
v-decorator="['fileIds', validatorRules.fileIds]"
:trigger-change="true"></j-upload>
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-spin>
</j-modal>
</template>
<script>
import pick from 'lodash.pick'
import { postAction } from '../../../api/manage'
import JUpload from '@comp/jero/JUpload'
export default {
name: 'FileUploadModal',
components: { JUpload },
props: {
// 会议id
meetingId: {
type: String,
required: false,
default: ''
}
},
data() {
return {
title: '编辑',
width: 800,
visible: false,
confirmLoading: false,
form: this.$form.createForm(this),
model: {},
fileList: [],
labelCol: {
xs: { span: 24 },
sm: { span: 5 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 17 }
},
validatorRules: {
fileIds: {
rules: [{ required: true, message: '请上传文件' }],
validateTrigger: 'change'
}
},
url: {
add: '/meeting/payMeetingSituation/guestsUploadFile' // 资料上传
}
}
},
methods: {
add(data) {
this.edit({}, data)
},
edit(record, data) {
this.dataType = data // 接收数据类型
this.form.resetFields()
this.model = Object.assign({}, record)
this.visible = true
this.$nextTick(() => {
this.form.setFieldsValue(pick(this.model, 'dataId'))
})
},
close() {
this.$emit('close')
this.visible = false
},
handleOk() {
if (this.confirmLoading) {
return
}
this.confirmLoading = true
// 触发表单验证
this.form.validateFields((err, values) => {
if (!err) {
console.log(values)
let params = values
params.meetingId = this.meetingId
postAction(this.url.add, params).then((res) => {
if (res.success) {
this.$message.success(res.message)
this.$emit('ok')
this.close()
} else {
this.$message.warning(res.message)
}
}).finally(() => {
setTimeout(() => {
this.confirmLoading = false
}, 1000)
})
} else {
this.confirmLoading = false
}
})
},
handleCancel() {
this.close()
this.$emit('ok')
}
}
}
</script>
<style scoped>
</style>
+12 -2
View File
@@ -222,7 +222,7 @@
<!--上传凭证-->
<upload-meeting-certificate-modal ref="upload" @ok="initData"></upload-meeting-certificate-modal>
<!-- 会议详情-->
<meeting-detail-modal ref="meetingDetail" :is-meeting-bool="true"></meeting-detail-modal>
<meeting-detail-modal ref="meetingDetail" :is-meeting-bool="true" @refresh-data="fileRefreshData"></meeting-detail-modal>
</div>
</template>
<script>
@@ -365,7 +365,7 @@ export default {
/*
* 初始化加载数据
* */
initData(arg) {
initData(arg, callback) {
if (!this.url.list) {
this.$message.error('请设置url.list属性!')
return
@@ -397,6 +397,7 @@ export default {
} else {
this.total = 0
}
callback && callback()
}
if (res.code === 510) {
this.$message.warning(res.message)
@@ -477,6 +478,15 @@ export default {
this.queryParam.meetingType = val
this.queryParam.tbMeetingType = undefined
}
},
// 嘉宾上传会议资料后的回调函数
fileRefreshData(situationId) {
const callback = (situationId) => {
let item = this.tableData.find(item => item.situationId === situationId)
item && this.openMeetingDetail(item)
}
// 重新请求数据,并执行打开弹窗的回调函数
this.initData(null, callback(situationId))
}
}
}
@@ -180,7 +180,7 @@
</div>
</div>
<!-- 会议详情 -->
<meeting-detail-modal ref="meetingDetail" is-meeting-bool></meeting-detail-modal>
<meeting-detail-modal ref="meetingDetail" is-meeting-bool @refresh-data="fileRefreshData"></meeting-detail-modal>
<!--上传凭证-->
<upload-meeting-certificate-modal ref="upload" @ok="initData"></upload-meeting-certificate-modal>
</div>
@@ -341,7 +341,7 @@ export default {
/*
* 初始化加载数据
* */
initData(arg) {
initData(arg, callback) {
if (!this.url.list) {
this.$message.error('请设置url.list属性!')
return
@@ -373,6 +373,7 @@ export default {
} else {
this.total = 0
}
callback && callback()
}
if (res.code === 510) {
this.$message.warning(res.message)
@@ -421,6 +422,15 @@ export default {
openMeetingDetail(item) {
// 打开会议详情
this.$refs.meetingDetail.open(item)
},
// 嘉宾上传会议资料后的回调函数
fileRefreshData(situationId) {
const callback = (situationId) => {
let item = this.tableData.find(item => item.situationId === situationId)
item && this.openMeetingDetail(item)
}
// 重新请求数据,并执行打开弹窗的回调函数
this.initData(null, callback(situationId))
}
}
}