irc_web/.svn/pristine/d6/d6958dc785dc098fe2c0d958ed9...

811 lines
27 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<div v-loading="loading" class="non-dicom-wrapper">
<!-- <h4 class="box-title">既往放疗史</h4> -->
<div style="text-align:right">
<el-button v-if="(allowAddOrEdit)" icon="el-icon-plus" type="primary" size="small" @click.native.prevent="handleAdd">
{{ $t('common:button:new') }}
</el-button>
<el-button
icon="el-icon-view"
type="primary"
size="small"
:disabled="nonDicomStudyList.length === 0"
@click="handlePreviewAllVisitFiles"
>
{{ $t('trials:uploadNonDicoms:button:preview') }}
</el-button>
</div>
<el-table
:data="nonDicomStudyList"
style="width: 100%"
>
<!-- 检查编号 -->
<el-table-column
prop="CodeView"
:label="$t('trials:uploadNonDicoms:table:studyId')"
/>
<!-- 检查类型 -->
<el-table-column
prop="Modality"
:label="$t('trials:uploadNonDicoms:table:modality')"
/>
<!-- 检查部位 -->
<el-table-column
prop="BodyPart"
:label="$t('trials:uploadNonDicoms:table:bodyPart')"
>
<template slot-scope="scope">
{{ getBodyPart(scope.row.BodyPart)}}
</template>
</el-table-column>
<!-- 文件 -->
<el-table-column
prop="FileCount"
:label="$t('trials:uploadNonDicoms:table:files')"
>
<template slot-scope="scope">
<el-popover v-if="scope.row.FileCount" trigger="click" placement="bottom">
<el-table v-loading="filesLoading" :data="nonDicomfilesList" height="300" size="small">
<!-- 文件名称 -->
<el-table-column
prop="FileName"
:label="$t('trials:uploadNonDicoms:table:fileName')"
width="200"
/>
<el-table-column :label="$t('common:action:action')" width="120">
<template slot-scope="files">
<!-- 预览 -->
<el-button
icon="el-icon-view"
circle
:title="$t('trials:uploadNonDicoms:action:preview')"
size="small"
@click.native.prevent="files.row.type === 'MP4' ? handleLookVideo(scope.row) : handlePreviewImg(files.row)"
/>
<!-- 删除 -->
<el-button
v-if="(data.SubmitState*1 < 2 || (data.SubmitState === 2 && data.IsQCConfirmedReupload))"
v-hasPermi="['trials:trials-panel:visit:crc-upload:upload']"
icon="el-icon-delete"
circle
:title="$t('trials:uploadNonDicoms:action:delete')"
size="small"
@click.native.prevent="files.row.type === 'MP4' ? hadnleDeleteVideo(scope.row) : handleDeleteFile(files.row.Id)"
/>
</template>
</el-table-column>
</el-table>
<div slot="reference" class="name-wrapper">
<el-button
type="text"
@click.native.prevent="handleGetFilesList(scope.row)"
>
{{ scope.row.FileCount }}
</el-button>
</div>
</el-popover>
<span v-else>{{ scope.row.FileCount }}</span>
</template>
</el-table-column>
<!-- 检查日期 -->
<el-table-column
prop="ImageDate"
:label="$t('trials:uploadNonDicoms:table:studyDate')"
>
<template slot-scope="scope">
{{ moment(scope.row.ImageDate).format('YYYY-MM-DD') }}
</template>
</el-table-column>
<!-- 更新时间 -->
<el-table-column
prop="UpdateTime"
:label="$t('trials:uploadNonDicoms:table:updateTime')"
/>
<el-table-column
:label="$t('common:action:action')"
min-width="200"
>
<template slot-scope="scope">
<!-- 预览 -->
<el-button
icon="el-icon-view"
circle
:title="$t('trials:uploadNonDicoms:action:preview')"
:disabled="scope.row.FileCount===0"
@click.native.prevent="handlePreviewAllFiles(scope.row)"
/>
<!-- 上传 -->
<el-button
v-if="( allowAddOrEdit)"
icon="el-icon-upload2"
circle
:title="$t('trials:uploadNonDicoms:action:upload')"
@click.native.prevent="handleUpload(scope.row)"
/>
<!-- 上传视频 -->
<!-- <el-button
v-if="( allowAddOrEdit)"
icon="el-icon-video-camera-solid"
circle
:title="$t('trials:uploadNonDicoms:action:xfuploadvideo')"
@click.native.prevent="handleUploadVideo(scope.row)"
/> -->
<!-- 编辑 -->
<el-button
v-if="(allowAddOrEdit)"
icon="el-icon-edit-outline"
circle
:title="$t('trials:uploadNonDicoms:action:edit')"
@click.native.prevent="handleEdit(scope.row)"
/>
<!-- 删除 -->
<el-button
v-if="(data.SubmitState*1 < 2 || (data.SubmitState === 2 && data.IsQCConfirmedReupload))"
v-hasPermi="['trials:trials-panel:visit:crc-upload:upload']"
icon="el-icon-delete"
circle
:title="$t('trials:uploadNonDicoms:action:delete')"
@click.native.prevent="handleDelete(scope.row)"
/>
</template>
</el-table-column>
</el-table>
<!-- 编辑 -->
<el-dialog
v-if="dialogVisible"
:visible.sync="dialogVisible"
:close-on-click-modal="false"
:title="title"
width="600px"
append-to-body
custom-class="base-dialog-wrapper"
>
<el-form
ref="editForm"
:model="form"
label-width="100px"
>
<div class="base-dialog-body">
<!-- 检查编号 -->
<el-form-item v-if="!!form.CodeView" :label="$t('trials:uploadNonDicoms:table:studyId')">
<el-input v-model="form.CodeView" disabled />
</el-form-item>
<!-- 检查类型 -->
<el-form-item
:label="$t('trials:uploadNonDicoms:table:modality')"
prop="Modality"
:rules="[
{ required: true, message: $t('common:ruleMessage:specify'), trigger: 'blur' }
]"
>
<el-radio-group v-model="form.Modality">
<el-radio v-for="m in trialModalitys" v-if="m !== ''" :key="m" :label="m" style="line-height: 40px" />
</el-radio-group>
</el-form-item>
<!-- 检查部位 -->
<el-form-item
:label="$t('trials:uploadNonDicoms:table:bodyPart')"
prop="BodyParts"
:rules="[
{ required: true, message: $t('common:ruleMessage:specify'), trigger: 'blur' }
]"
>
<el-checkbox-group v-model="form.BodyParts">
<el-checkbox v-for="bodyPart in trialBodyPartTypes" :key="bodyPart" :label="bodyPart">{{$fd('Bodypart',bodyPart)}}</el-checkbox>
</el-checkbox-group>
</el-form-item>
<!-- 检查日期 -->
<el-form-item
:label="$t('trials:uploadNonDicoms:table:studyDate')"
prop="ImageDate"
:rules="[
{ required: true, message: $t('common:ruleMessage:specify'), trigger: 'blur' }
]"
>
<el-date-picker
v-model="form.ImageDate"
type="date"
:picker-options="pickerOption"
value-format="yyyy-MM-dd"
format="yyyy-MM-dd"
style="width:100%;"
/>
</el-form-item>
</div>
<div class="base-dialog-footer" style="text-align:right;margin-top:10px;">
<el-form-item>
<el-button size="small" type="primary" :disabled="btnLoading" @click="dialogVisible = false">
{{ $t('common:button:cancel') }}
</el-button>
<el-button size="small" type="primary" :loading="btnLoading" @click="handleSave">
{{ $t('common:button:save') }}
</el-button>
</el-form-item>
</div>
</el-form>
</el-dialog>
<!-- 上传非dicom文件 -->
<el-dialog
v-if="uploadVisible"
:visible.sync="uploadVisible"
:close-on-click-modal="false"
:title="$t('trials:uploadNonDicoms:dialogTitle:upload')"
width="600px"
append-to-body
custom-class="base-dialog-wrapper"
>
<!-- 多文件上传 -->
<form id="inputForm" ref="uploadForm">
<el-divider content-position="left">{{ $t('trials:uploadNonDicoms:label:fileType') }}</el-divider>
<div class="form-group">
<div class="upload">
<input multiple="multiple" webkitdirectory="" directory accept="*/*" type="file" name="uploadFolder" class="select-file" title="" @change="beginScanFiles($event)">
<div class="btn-select">
{{ $t('trials:uploadNonDicoms:button:selectFolder') }}
</div>
</div>
<div class="upload">
<input class="select-file" multiple="" :accept="faccept.join(',')" type="file" name="uploadFile" title="" @change="beginScanFiles($event)">
<div class="btn-select">
{{ $t('trials:uploadNonDicoms:button:select') }}
</div>
</div>
</div>
</form>
<!-- 文件列表 -->
<el-table
ref="filesTable"
:data="fileList"
class="dicomFiles-table"
height="300"
@selection-change="handleSelectionChange"
>
<el-table-column
type="selection"
width="55"
/>
<el-table-column
type="index"
width="50"
/>
<!-- 文件名称 -->
<el-table-column
prop="name"
:label="$t('trials:uploadNonDicoms:table:fileName')"
min-width="180"
/>
<el-table-column :label="$t('common:action:action')">
<template slot-scope="scope">
<!-- <el-button
size="mini"
icon="el-icon-view"
circle
:title="$t('trials:uploadNonDicoms:button:preview')"
@click="handlePreviewImg(scope.row)"
/> -->
<el-button
size="mini"
icon="el-icon-delete"
circle
:title="$t('trials:crcUpload:action:delete')"
@click="handleRemoveFile(scope.row)"
/>
</template>
</el-table-column>
</el-table>
<div style="text-align:right;padding: 10px 0px">
<el-button
size="small"
type="primary"
:disabled="selectArr.length == 0"
:loading="btnLoading"
@click="beginUpload"
>
{{ $t('trials:uploadNonDicoms:action:upload') }}
</el-button>
</div>
</el-dialog>
<!-- 上传非dicom视频文件 -->
<el-dialog
v-if="uploadVideoVisible"
:visible.sync="uploadVideoVisible"
upload-video-visible
:close-on-click-modal="false"
:title="$t('trials:uploadNonDicoms:title:xfuploadvideo')"
width="480px"
append-to-body
custom-class="base-dialog-wrapper"
>
<upload-videos @uploadOver="uploadOver" />
</el-dialog>
<!-- 预览非DICOM视频文件 -->
<el-dialog
v-if="lookVideoVisible"
:visible.sync="lookVideoVisible"
upload-video-visible
:close-on-click-modal="false"
:title="$t('trials:uploadNonDicoms:title:xflookvideo')"
width="480px"
append-to-body
custom-class="base-dialog-wrapper"
>
<div style="display: flex;justify-content: center">
<video v-if="lookVideoVisible" id="video" controls crossorigin="anonymous" width="400" height="270">
<source :src="currentRow.VideoUrl" type="video/mp4">
</video>
</div>
<div style="text-align:right;padding: 10px 0px">
<el-button
size="small"
@click="lookVideoVisible = false"
>
关闭
</el-button>
</div>
</el-dialog>
<el-dialog
v-if="previewImgVisible"
:visible.sync="previewImgVisible"
:title="$t('trials:uploadNonDicoms:dialogTitle:preview')"
append-to-body
width="565px"
>
<div v-loading="imageLoading" class="base-modal-body" style="border:2px solid #ccc;padding: 10px;">
<el-image
:src="`/api${imgUrl}`"
fit="fit"
style="height:500px;width:500px"
@error="imageLoading = false"
@load="imageLoading = false"
/>
</div>
</el-dialog>
</div>
</template>
<script>
import { preArchiveStudy, getNoneDicomStudyList, getNoneDicomStudyFileList, uploadNoneDicomFile, addOrUpdateNoneDicomStudy, deleteNoneDicomStudy, deleteNoneDicomStudyFile } from '@/api/trials'
import { getToken } from '@/utils/auth'
// import PreviewFiles from './previewFiles'
import uploadVideos from '@/components/videos'
import moment from 'moment'
export default {
name: 'UploadNonDicomFiles',
components: { uploadVideos },
props: {
bodyParts: {
type: String,
default: ''
},
modalities: {
type: String,
default: ''
},
data: {
type: Object,
default() { return {} }
},
subjectVisitId: {
type: String,
required: true
},
allowAddOrEdit: {
type: Boolean,
default: false
}
},
data() {
return {
lookVideoVisible: false,
nonDicomStudyList: [],
dialogVisible: false,
loading: false,
trialBodyPartTypes: [],
trialModalitys: [],
btnLoading: false,
title: '',
form: { CodeView: '', Id: '', BodyPart: '', BodyParts: [], Modality: '', ImageDate: '' },
pickerOption: {
disabledDate: time => {
return time.getTime() > Date.now()
}
},
uploadVisible: false,
fileList: [],
selectArr: [],
faccept: ['.jpg', '.jpeg', '.png', '.bmp'],
fCount: 0,
currentRow: {},
filesLoading: false,
nonDicomfilesList: [],
previewImgVisible: false,
imageLoading: false,
fileUrl: '',
type: '',
uploadVideoVisible: false,
trialId: this.$route.query.trialId,
moment
}
},
mounted() {
this.getNoneDicomList()
this.trialBodyPartTypes = this.bodyParts ? this.bodyParts.split('|') : []
this.trialModalitys = this.modalities ? this.modalities.split('|') : []
},
methods: {
// 初始化非Dicom列表数据
getNoneDicomList() {
this.loading = true
getNoneDicomStudyList(this.subjectVisitId).then(res => {
this.nonDicomStudyList = res.Result.map(v => {
if (v.VideoObjectName) {
v.FileCount += 1
}
return v
})
this.loading = false
}).catch(() => { this.loading = false })
},
// 打开新增弹框,并初始化数据
handleAdd() {
this.title = this.$t('trials:uploadNonDicoms:dialogTitle:add')
this.form.Id = ''
this.form.CodeView = ''
this.form.BodyPart = ''
this.form.Modality = ''
this.form.ImageDate = ''
this.form.BodyParts = []
this.dialogVisible = true
},
// 打开比编辑弹框,并初始化数据
handleEdit(row) {
this.title = this.$t('trials:uploadNonDicoms:dialogTitle:edit')
const { CodeView, Id, BodyPart, Modality, ImageDate } = { ...row }
this.form.CodeView = CodeView
this.form.Id = Id
this.form.BodyPart = BodyPart
this.form.Modality = Modality
this.form.ImageDate = ImageDate
this.form.BodyParts = this.form.BodyPart.split(', ')
this.dialogVisible = true
},
// 保存非Dicom检查信息
handleSave() {
this.$refs.editForm.validate(valid => {
if (!valid) return
this.btnLoading = true
this.form.BodyPart = this.form.BodyParts.join(', ')
this.form.TrialId = this.trialId
this.form.SiteId = this.data.SiteId
this.form.SubjectId = this.data.SubjectId
this.form.SubjectVisitId = this.subjectVisitId
addOrUpdateNoneDicomStudy(this.form).then(res => {
this.btnLoading = false
this.$refs.editForm.resetFields()
this.getNoneDicomList()
// 刷新父组件列表
this.$emit('getList')
this.$message.success(this.$t('common:message:savedSuccessfully'))
this.dialogVisible = false
}).catch(() => {
this.btnLoading = false
})
})
},
// 根据id删除某个非Dicom检查信息
handleDelete(row) {
var message = ''
if (row.FileCount > 0) {
message = this.$t('trials:uploadNonDicoms:message:deleteStudyAndFiles')
} else {
message = this.$t('trials:uploadNonDicoms:message:delete')
}
this.$confirm(message, {
type: 'warning',
distinguishCancelAndClose: true
})
.then(() => {
this.loading = true
deleteNoneDicomStudy(this.trialId, this.subjectVisitId, row.Id)
.then(res => {
this.loading = false
if (res.IsSuccess) {
// 刷新父组件列表
this.$emit('getList')
this.nonDicomStudyList.splice(this.nonDicomStudyList.findIndex(item => item.Id === row.Id), 1)
this.$message.success(this.$t('trials:uploadNonDicoms:message:deletedSuccessfully'))
}
}).catch(() => { this.loading = false })
}).catch(() => {})
},
// 打开上传文件弹窗
handleUpload(row) {
this.fileList = []
this.uploadVisible = true
this.fCount = 0
this.currentRow = { ...row }
},
handleLookVideo(row) {
this.currentRow = { ...row }
this.lookVideoVisible = true
},
handleUploadVideo(row) {
this.uploadVideoVisible = true
this.currentRow = { ...row }
},
hadnleDeleteVideo(row) {
this.$confirm(this.$t('trials:uploadNonDicoms:message:delete'), {
type: 'warning',
distinguishCancelAndClose: true
})
.then(() => {
this.filesLoading = true
this.loading = true
var params = Object.assign({}, row)
params.VideoName = ''
params.VideoObjectName = ''
params.VideoUrl = ''
params.UploadVideoTime = ''
addOrUpdateNoneDicomStudy(params).then(res => {
this.filesLoading = false
this.loading = false
this.nonDicomfilesList.pop()
this.$emit('getList')
this.$message.success(this.$t('trials:uploadNonDicoms:message:deletedSuccessfully'))
this.getNoneDicomList()
}).catch(() => {
this.filesLoading = false
this.loading = false
})
})
},
uploadOver(isSuccess, res, fileName) {
if (isSuccess) {
var params = Object.assign({}, this.currentRow)
params.VideoName = fileName
params.VideoObjectName = res.name
params.VideoUrl = res.url
params.UploadVideoTime = this.parseTime(new Date())
addOrUpdateNoneDicomStudy(params).then(res => {
this.getNoneDicomList()
// 刷新父组件列表
this.uploadVideoVisible = false
this.$emit('getList')
this.$message.success(this.$t('components:uploadvideo:message:xf1'))
}).catch(() => {
this.uploadVideoVisible = false
})
}
},
// 扫描待上传文件
beginScanFiles(e) {
var files = e.target.files
var sameFiles = []
files.forEach(file => {
var extendName = file.name.substring(file.name.lastIndexOf('.')).toLocaleLowerCase()
if (this.faccept.indexOf(extendName) !== -1 && this.fileList.findIndex(v => v.name === file.name) > -1) {
sameFiles.push(file.name)
}
})
var scope = this
if (sameFiles.length > 0) {
const h = this.$createElement
var msg = this.$t('trials:uploadNonDicoms:message:exsitSameFile').replace('xxx', sameFiles.join(', '))
this.$msgbox({
message: h('div', { style: 'maxHeight:300px;overflow: auto;' }, [
h('p', null, msg),
h('p', null, this.$t('trials:uploadNonDicoms:message:isContinueUpload'))
]),
type: 'warning',
showCancelButton: true
}).then(() => {
scope.pendingUploadQuene(files)
}).catch(() => { scope.resetUploadForm() })
} else {
scope.pendingUploadQuene(files)
}
},
pendingUploadQuene(files) {
for (var i = 0; i < files.length; ++i) {
const fileName = files[i].name
var extendName = fileName.substring(fileName.lastIndexOf('.')).toLocaleLowerCase()
if (this.faccept.indexOf(extendName) !== -1) {
files[i].id = `${files[i].lastModified}${files[i].name}`
this.fileList.push(files[i])
}
}
this.resetUploadForm()
},
resetUploadForm() {
this.$nextTick(() => {
this.$refs.uploadForm.reset()
})
},
handlePreviewImg(row) {
this.imgUrl = row.FullFilePath
this.previewImgVisible = true
this.imageLoading = true
},
beginScanFolder(e) {
var files = e.target.files
this.fCount += files.Count
for (var i = 0; i < files.length; ++i) {
const fileName = files[i].name
var extendName = fileName.substring(fileName.lastIndexOf('.')).toLocaleLowerCase()
if (this.faccept.indexOf(extendName) !== -1) {
files[i].id = `${files[i].lastModified}${files[i].name}`
this.fileList.push(files[i])
}
}
},
handleRemoveFile(row) {
this.$confirm(this.$t('trials:uploadNonDicoms:message:delete'), {
type: 'warning',
distinguishCancelAndClose: true
})
.then(() => {
this.fileList.splice(this.fileList.findIndex(item => item.id === row.id), 1)
}).catch(() => {})
},
// 获取待上传文件信息
handleSelectionChange(selection) {
this.selectArr = selection
},
// 开始上传文件
beginUpload() {
console.log(this.selectArr)
const fileMaxSize = 1024 * 1024 * 1024 * 1 // 1G
var currentFilesSize = 0
this.selectArr.forEach(item => {
currentFilesSize += item.size
})
if (currentFilesSize / fileMaxSize > 1) {
// 'Upload file size cannot exceed 1G'
this.$alert(this.$t('trials:uploadNonDicoms:message:uploadSize'))
} else {
var fileData = new FormData()
for (var i = 0; i < this.selectArr.length; ++i) {
fileData.append('file', this.selectArr[i])
}
preArchiveStudy({
subjectVisitId: this.subjectVisitId,
isDicom: false
}).then(res => {
this.btnLoading = true
uploadNoneDicomFile(this.trialId, this.subjectVisitId, this.currentRow.Id, fileData, res.Result).then(res => {
this.btnLoading = false
this.uploadVisible = false
this.getNoneDicomList()
// 刷新父组件列表
this.$emit('getList')
this.$message.success(this.$t('trials:uploadNonDicoms:message:uploadedSuccessfully'))
}).catch(() => { this.btnLoading = false })
})
}
},
handleGetFilesList(row) {
this.filesLoading = true
getNoneDicomStudyFileList(row.Id).then(res => {
this.nonDicomfilesList = res.Result
if (row.VideoName) {
this.nonDicomfilesList.push({ FileName: row.VideoName, type: 'MP4' })
}
this.filesLoading = false
}).catch(() => { this.filesLoading = false })
},
// 根据id删除某个文件
handleDeleteFile(id) {
this.$confirm(this.$t('trials:uploadNonDicoms:message:delete'), {
type: 'warning',
distinguishCancelAndClose: true
})
.then(() => {
this.filesLoading = true
this.loading = true
deleteNoneDicomStudyFile(this.trialId, this.subjectVisitId, id)
.then(res => {
this.filesLoading = false
this.loading = false
if (res.IsSuccess) {
// 刷新父组件列表
this.$emit('getList')
this.nonDicomfilesList.splice(this.nonDicomfilesList.findIndex(item => item.Id === id), 1)
this.$message.success(this.$t('trials:uploadNonDicoms:message:deletedSuccessfully'))
this.getNoneDicomList()
}
}).catch(() => {
this.filesLoading = false
this.loading = false
})
}).catch(() => {})
},
// 预览
handlePreview(row) {
window.open(row.FullFilePath, '_blank')
},
// 预览访视下所有的非DICOM文件
handlePreviewAllVisitFiles() {
// 预览所有检查下非Dicom文件
var token = getToken()
const routeData = this.$router.resolve({
path: `/showNoneDicoms?subjectVisitId=${this.subjectVisitId}&TokenKey=${token}`
})
window.open(routeData.href, '_blank')
},
handlePreviewAllFiles(row) {
this.currentRow = { ...row }
var token = getToken()
const routeData = this.$router.resolve({
path: `/showNoneDicoms?subjectVisitId=${this.subjectVisitId}&studyId=${row.Id}&TokenKey=${token}`
})
window.open(routeData.href, '_blank')
},
getBodyPart(bodyPart) {
if (!bodyPart) return ''
var separator = ','
if (bodyPart.indexOf('|') > -1) {
separator = '|'
} else if (bodyPart.indexOf(',') > -1) {
separator = ','
} else if (bodyPart.indexOf('') > -1) {
separator = ''
}
var arr = bodyPart.split(separator)
var newArr = arr.map(i => {
return this.$fd('Bodypart', i.trim())
})
return newArr.join(' | ')
}
}
}
</script>
<style lang="scss" scoped>
.upload{
display: inline-block;
height: 30px;
width: 90px;
padding: 2px 10px;
line-height: 23px;
position: relative;
text-decoration: none;
border-radius: 3px;
overflow: hidden;
text-align: center;
background: #428bca;
border-color: #428bca;
color: #FFF;
.select-file{
height: 30px;
width: 90px;
position: absolute;
overflow: hidden;
left: 0;
top: 0;
opacity: 0;
font-size: 0;
}
.btn-select { //给显示在页面上的按钮写样式
width: 90px;
height: 30px;
line-height: 30px;
text-align: center;
cursor: pointer;
border-radius: 24px;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
pointer-events: none; //pointer-events:none用来控制该标签的点击穿透事件
}
}
</style>