486 lines
15 KiB
Vue
486 lines
15 KiB
Vue
<template>
|
|
<j-modal
|
|
:title="title"
|
|
:width="width"
|
|
:visible="visible"
|
|
:confirmLoading="confirmLoading"
|
|
@ok="handleOk"
|
|
@cancel="handleCancel"
|
|
cancelText="关闭">
|
|
<a-spin :spinning="confirmLoading">
|
|
<a-form :form="form">
|
|
<a-row>
|
|
<a-col :span="24">
|
|
<!--上传会议资料显示 -->
|
|
<!--<a-form-item label="会议文件" :labelCol="labelCol" :wrapperCol="wrapperCol" v-if="type === '2' ">-->
|
|
<!-- <j-upload file-type-error-message="请上传会议文件" :multiple="true"-->
|
|
<!-- :return-id="true"-->
|
|
<!-- v-decorator="['fileIds']"-->
|
|
<!-- :trigger-change="true"></j-upload>-->
|
|
<!--</a-form-item>-->
|
|
<!--上传会议纪要显示 -->
|
|
<a-form-item label="会议纪要" :labelCol="labelCol" :wrapperCol="wrapperCol" v-if="type === '1' ">
|
|
<j-upload file-type-error-message="请上传会议纪要" :multiple="true"
|
|
:return-id="true"
|
|
v-decorator="['fileIds']"
|
|
:trigger-change="true"></j-upload>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
</a-form>
|
|
<!-- 以表格的形式展示 所有的文件 -->
|
|
<template v-if="type === '2' ">
|
|
<div class="table-operator">
|
|
<a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader"
|
|
:action="importExcelUrl" :beforeUpload="beforeUpload" @change="handleChange"
|
|
>
|
|
<a-button type="primary" icon="plus">新增</a-button>
|
|
</a-upload>
|
|
<a-button type="danger" icon="delete" @click="batchDel">
|
|
批量删除
|
|
</a-button>
|
|
</div>
|
|
<a-table
|
|
ref="table"
|
|
size="middle"
|
|
rowKey="id"
|
|
:scroll="{x:auto}"
|
|
:pagination="false"
|
|
:columns="columns"
|
|
:dataSource="fileList"
|
|
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
|
|
class="j-table-force-nowrap"
|
|
>
|
|
<template slot="text" slot-scope="text">
|
|
<a-tooltip>
|
|
<template slot="title">{{ text }}</template>
|
|
<div class="table-text">{{ text }}</div>
|
|
</a-tooltip>
|
|
</template>
|
|
<span slot="action" slot-scope="record" class="action-span-cell">
|
|
<a class="color-blue" @click="myDownload(record)">下载</a>
|
|
<a class="color-blue" @click="myPreview(record)">查看</a>
|
|
<a class="color-blue" @click="deleteFile(record)">删除</a>
|
|
</span>
|
|
</a-table>
|
|
</template>
|
|
</a-spin>
|
|
<email-error-msg-modal ref="emailError"></email-error-msg-modal>
|
|
</j-modal>
|
|
</template>
|
|
|
|
<script>
|
|
import JUpload from '@comp/jero/JUpload'
|
|
import {httpAction} from '@api/manage'
|
|
import {getFileInfoByIds} from '@/api/api'
|
|
import EmailErrorMsgModal from '@views/projectManagement/modules/EmailErrorMsgModal'
|
|
import Vue from 'vue'
|
|
import { downloadFile } from '../../../../api/manage'
|
|
import { ACCESS_TOKEN } from '../../../../store/mutation-types'
|
|
import { Modal } from 'ant-design-vue'
|
|
import store from '@/store'
|
|
const FILE_TYPE_ALL = 'all'
|
|
|
|
const columns = [
|
|
{
|
|
title: '文件名',
|
|
align: 'center',
|
|
dataIndex: 'fileName',
|
|
width: 200,
|
|
scopedSlots: { customRender: 'text' }
|
|
},
|
|
{
|
|
title: '上传人',
|
|
align: 'center',
|
|
dataIndex: 'createBy',
|
|
width: 100,
|
|
scopedSlots: { customRender: 'text' }
|
|
},
|
|
{
|
|
title: '操作',
|
|
align: 'center',
|
|
dataIndex: '',
|
|
scopedSlots: {customRender: 'action'},
|
|
width: 150
|
|
}
|
|
]
|
|
|
|
export default {
|
|
name: 'UploadMeetFileModal',
|
|
components: {
|
|
EmailErrorMsgModal,
|
|
JUpload
|
|
},
|
|
data() {
|
|
return {
|
|
title: '上传文件',
|
|
width: 1000,
|
|
visible: false,
|
|
confirmLoading: false,
|
|
form: this.$form.createForm(this),
|
|
type: '', // 上传会议纪要还是上传会议资料
|
|
model: {},
|
|
labelCol: {
|
|
xs: {span: 24},
|
|
sm: {span: 6}
|
|
},
|
|
wrapperCol: {
|
|
xs: {span: 24},
|
|
sm: {span: 18}
|
|
},
|
|
// 会议id
|
|
meetingId: '',
|
|
// 已经上传的会议文件
|
|
meetingFileIds: '',
|
|
validatorRules: {},
|
|
url: {},
|
|
columns,
|
|
fileList: [],
|
|
/* table选中keys*/
|
|
selectedRowKeys: [],
|
|
fileType: FILE_TYPE_ALL
|
|
}
|
|
},
|
|
computed: {
|
|
//token header
|
|
tokenHeader() {
|
|
let head = {'X-Access-Token': Vue.ls.get(ACCESS_TOKEN)}
|
|
return head
|
|
},
|
|
importExcelUrl: function () {
|
|
return `${ window._CONFIG['domianURL'] }/sys/common/uploadByToken`
|
|
}
|
|
},
|
|
methods: {
|
|
add() {
|
|
this.edit({})
|
|
},
|
|
// type 1上传会议纪要 2上传会议资料
|
|
async edit(record, type) {
|
|
this.visible = true
|
|
this.type = type
|
|
this.form.resetFields()
|
|
this.model = Object.assign({}, record)
|
|
// 根据会议类型返回不同的url
|
|
this.url = Object.assign({}, this.createUrlByMeetingType(record.meetingType + ''))
|
|
this.meetingId = record.id
|
|
// 会议资料与会议纪要的回显
|
|
if (type === '1') {
|
|
this.meetingFileIds = this.model.meetingMinute ? this.model.meetingMinute : ''
|
|
if (this.meetingFileIds && this.meetingFileIds !== '') {
|
|
this.$nextTick(() => {
|
|
this.form.setFieldsValue({'fileIds': this.meetingFileIds})
|
|
})
|
|
}
|
|
} else if (type === '2') {
|
|
this.meetingFileIds = this.model.meetingData ? this.model.meetingData : ''
|
|
if (this.meetingFileIds && this.meetingFileIds !== '') {
|
|
this.fileList = await this.getFileInfoArr(this.meetingFileIds)
|
|
this.$nextTick(() => {
|
|
// this.form.setFieldsValue({'fileIds': this.meetingFileIds})
|
|
})
|
|
}
|
|
}
|
|
|
|
},
|
|
close() {
|
|
this.$emit('close')
|
|
this.meetingFileIds = ''
|
|
this.type = ''
|
|
this.visible = false
|
|
this.confirmLoading = false
|
|
},
|
|
// uplodFile 上传会议资料的接口 uploadCouncilFile 上传会议纪要的接口
|
|
createUrlByMeetingType(meetingType) {
|
|
switch (String(meetingType)) {
|
|
// 工作组会议
|
|
case '1':
|
|
return {
|
|
uploadFile: '/meeting/workGroupMeeting/uploadFile',
|
|
uploadCouncilFile: '/meeting/workGroupMeeting/uploadCouncilFile',
|
|
}
|
|
// 标协会议
|
|
case '2':
|
|
return {
|
|
uploadFile: '/meeting/standardsMeeting/uploadFile',
|
|
uploadCouncilFile: '/meeting/standardsMeeting/uploadCouncilFile',
|
|
}
|
|
// 国际研讨会
|
|
case '3':
|
|
return {
|
|
uploadFile: '/meeting/internalMeeting/uploadFile',
|
|
uploadCouncilFile: '/meeting/internalMeeting/uploadCouncilFile',
|
|
}
|
|
// 其他会议
|
|
case '4':
|
|
return {
|
|
uploadFile: '/meeting/otherMeeting/uploadFile',
|
|
uploadCouncilFile: '/meeting/otherMeeting/uploadCouncilFile'
|
|
}
|
|
// 分标委会议
|
|
case '5':
|
|
return {
|
|
uploadFile: '/meeting/committeeMeeting/uploadFile',
|
|
uploadCouncilFile: '/meeting/committeeMeeting/uploadCouncilFile',
|
|
}
|
|
// 理事会会议
|
|
case '6':
|
|
return {
|
|
uploadFile: '/meeting/councilMeeting/uploadFile',
|
|
uploadCouncilFile: '/meeting/councilMeeting/uploadCouncilFile',
|
|
}
|
|
}
|
|
},
|
|
handleOk() {
|
|
const that = this
|
|
if (this.confirmLoading) {
|
|
return
|
|
}
|
|
this.confirmLoading = true
|
|
// 所有的数据验证后请求的回调方法
|
|
const callbackFunc = (url, params) => {
|
|
httpAction(url, params, 'post').then(res => {
|
|
if (res.success) {
|
|
|
|
if (Array.isArray(res.result) && res.result.length > 0) {
|
|
// msgWarn(this,res.result,0)
|
|
that.$refs.emailError.open()
|
|
that.$refs.emailError.msgList = res.result
|
|
console.log(this.$refs.emailError.msgList, 'this.$refs.emailError.msgList ')
|
|
}else {
|
|
that.$message.success(res.message)
|
|
}
|
|
that.$emit('ok')
|
|
this.confirmLoading = false
|
|
that.close()
|
|
} else {
|
|
this.$message.warn(res.message)
|
|
this.confirmLoading = false
|
|
}
|
|
}).catch((err) => {
|
|
console.log(err, 'err')
|
|
}).finally(() => {
|
|
setTimeout(() => {
|
|
this.confirmLoading = false
|
|
}, 1000)
|
|
})
|
|
}
|
|
|
|
// 会议纪要-触发表单的验证
|
|
if(this.type === '1') {
|
|
// 触发表单验证
|
|
this.form.validateFields((err, values) => {
|
|
if (!err && values.fileIds !== undefined) {
|
|
const params = {
|
|
fileIds: values.fileIds,
|
|
id: that.meetingId
|
|
}
|
|
let url = this.url.uploadCouncilFile
|
|
callbackFunc(url, params)
|
|
} else {
|
|
that.close()
|
|
}
|
|
})
|
|
} else if (this.type === '2'){
|
|
// 会议文件
|
|
let ids = this.fileList.map(tt => tt.id).join(',')
|
|
const params = {
|
|
fileIds: ids,
|
|
id: that.meetingId
|
|
}
|
|
let url = this.url.uploadFile
|
|
// 会议文件 不用对比开始与最后文件的差别，后端会自己比对
|
|
callbackFunc(url, params)
|
|
}
|
|
},
|
|
handleCancel() {
|
|
this.close()
|
|
},
|
|
/**
|
|
* 通过文件的id获取文件的相关信息
|
|
* @param id
|
|
*/
|
|
getFileInfoArr(ids) {
|
|
return new Promise(resolve => {
|
|
let result = {}
|
|
getFileInfoByIds({ids: ids}).then(res => {
|
|
if (res.success) {
|
|
result = res.result
|
|
}
|
|
}).finally(() => {
|
|
resolve(result)
|
|
})
|
|
})
|
|
},
|
|
onSelectChange(selectedRowKeys, selectionRows) {
|
|
this.selectedRowKeys = selectedRowKeys
|
|
this.selectionRows = selectionRows
|
|
},
|
|
onClearSelected() {
|
|
this.selectedRowKeys = []
|
|
this.selectionRows = []
|
|
},
|
|
/**
|
|
* 单个文件的下载功能
|
|
* @param file
|
|
*/
|
|
myDownload(file) {
|
|
downloadFile(`sys/common/download/${file.id}`, file.fileName)
|
|
},
|
|
/**
|
|
* 单个文件的预览功能
|
|
* @param file
|
|
*/
|
|
myPreview(file) {
|
|
if (file && file.url) {
|
|
const fileName = (file || {}).fileName
|
|
const fileNameNotType = fileName.substring(0, fileName.lastIndexOf('.'))
|
|
const previewUrl = (file || {}).url || ''
|
|
const previewName = previewUrl.substring(previewUrl.lastIndexOf(fileNameNotType))
|
|
|
|
const fileFullUrl = `${window._CONFIG['domianWebSocketURL']}/sys/common/download/${file.id}?token=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${previewName}`
|
|
let url = `${window._CONFIG['onlinePreviewDomainURL']}?url=${encodeURIComponent(fileFullUrl)}`
|
|
window.open(url)
|
|
}
|
|
},
|
|
// 单个文件的删除
|
|
deleteFile(file) {
|
|
const that = this
|
|
this.$confirm({
|
|
title: '确认删除',
|
|
content: '确定要删除此条数据吗?',
|
|
onOk: function () {
|
|
let index = that.fileList.findIndex(tt => tt.id === file.id)
|
|
that.fileList.splice(index, 1)
|
|
that.onClearSelected()
|
|
}
|
|
})
|
|
},
|
|
batchDel() {
|
|
if (this.selectedRowKeys.length <= 0) {
|
|
this.$message.warning('请选择一条记录！')
|
|
return
|
|
}
|
|
const that = this
|
|
this.$confirm({
|
|
title: '确认删除',
|
|
content: '是否删除选中数据?',
|
|
onOk: function () {
|
|
that.fileList = that.fileList.filter(tt => !that.selectedRowKeys.includes(tt.id))
|
|
that.onClearSelected()
|
|
}
|
|
})
|
|
},
|
|
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
|
|
}
|
|
}
|
|
return true
|
|
},
|
|
handleChange(info) {
|
|
if (info.file.status !== 'uploading') {
|
|
console.log(info.file, info.fileList)
|
|
}
|
|
if (info.file.status === 'done') {
|
|
if (info.file.response.success) {
|
|
// this.$message.success(`${info.file.name} 文件上传成功`);
|
|
if (info.file.response.code === 201) {
|
|
let {message, result: {msg, fileUrl, fileName}} = info.file.response
|
|
let href = window._CONFIG['domianURL'] + fileUrl
|
|
this.$warning({
|
|
title: message,
|
|
content: (<div>
|
|
<span>{msg}</span>
|
|
<br/>
|
|
<span>具体详情请
|
|
<a href={href} target="_blank" download={fileName}>点击下载</a>
|
|
</span>
|
|
</div>
|
|
)
|
|
})
|
|
} else {
|
|
this.$message.success(info.file.response.message || `${info.file.name} 文件上传成功`)
|
|
}
|
|
|
|
this.fileList.push(info.file.response.result)
|
|
} else {
|
|
this.messageLineFeed('文件导入错误', info.file.response.message)
|
|
}
|
|
} else if (info.file.status === 'error') {
|
|
if (info.file.response.status === 500) {
|
|
let data = info.file.response
|
|
const token = Vue.ls.get(ACCESS_TOKEN)
|
|
if (token && data.message.includes('Token失效')) {
|
|
Modal.error({
|
|
title: '登录已过期',
|
|
content: '很抱歉，登录已过期，请重新登录',
|
|
okText: '重新登录',
|
|
mask: false,
|
|
onOk: () => {
|
|
store.dispatch('Logout').then(() => {
|
|
Vue.ls.remove(ACCESS_TOKEN)
|
|
window.location.reload()
|
|
})
|
|
}
|
|
})
|
|
}
|
|
} else {
|
|
this.$message.error(`文件上传失败: ${info.file.msg} `)
|
|
}
|
|
}
|
|
|
|
},
|
|
/**
|
|
* 对包含<br/>的后端错误信息进行处理
|
|
* @param title
|
|
* @param content
|
|
*/
|
|
messageLineFeed(title, content) {
|
|
const messageArr = content.split('<br/>')
|
|
let htmlDom = []
|
|
messageArr.map(tt => {
|
|
if (tt) {
|
|
htmlDom.push((<div>{tt}</div>))
|
|
}
|
|
})
|
|
this.$warning({
|
|
title: title,
|
|
content: (h) => <div>
|
|
{htmlDom}
|
|
</div>
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
@import '~@assets/less/common.less';
|
|
/*表格滚动条*/
|
|
.ant-table-body {
|
|
overflow-x: auto!important;
|
|
}
|
|
|
|
|
|
</style>
|