irc_web/.svn/pristine/bd/bda012f4219fc1d001347cebb54...

292 lines
8.8 KiB
Plaintext

<template>
<el-form
ref="trialAttachmentFrom"
v-loading="loading"
:model="form"
label-width="170px"
size="small"
:rules="rules"
class="upload-temporary-file"
>
<div class="base-dialog-body">
<!-- 文件类型 -->
<el-form-item :label="$t('trials:attachment:table:fileType')" prop="FileTypeId">
<el-select
v-model="form.FileTypeId"
style="width:100%;"
size="small"
>
<el-option
v-for="item of dictionaryList.Trial_Document"
:key="item.Id"
:label="item.Value"
:value="item.Id"
/>
</el-select>
</el-form-item>
<!-- 文件 -->
<el-form-item :label="$t('trials:attachment:form:file')">
<div class="upload-container">
<el-upload
class="upload-demo"
action
accept=".pdf"
:before-upload="beforeUpload"
:http-request="handleUploadFile"
:on-remove="handleRemoveFile"
:show-file-list="true"
:file-list="fileList"
:limit="1"
:on-exceed="handleExceed"
:disabled="form.FileTypeId === ''"
>
<el-button size="small" type="primary" :disabled="form.FileTypeId === '' || saveBtnLoading" :loading="btnLoading">
{{ $t('trials:attachment:button:select') }}
</el-button>
<span
slot="tip"
style="margin-left:10px;"
class="el-upload__tip"
>
({{ $t('trials:attachment:message:pdf') }})
</span>
</el-upload>
</div>
</el-form-item>
<!-- 需要签署的用户类型 -->
<el-form-item :label="$t('trials:attachment:table:userType')" prop="NeedConfirmedUserTypeIdList">
<el-select
v-model="form.NeedConfirmedUserTypeIdList"
style="width:100%;"
multiple
>
<el-option
v-for="item of userTypeOptions"
v-if="item.UserTypeEnum !== 1 && item.UserTypeEnum !== 20"
:key="item.Id"
:label="item.UserTypeShortName"
:value="item.Id"
>
<span>{{ item.UserType }}</span>
</el-option>
</el-select>
</el-form-item>
<!-- 查看最短时间(分钟) -->
<el-form-item :label="$t('trials:attachment:table:min')" prop="SignViewMinimumMinutes">
<el-input-number
v-model="form.SignViewMinimumMinutes"
controls-position="right"
:min="1"
:max="50"
/>
</el-form-item>
<!-- 描述 -->
<el-form-item :label="$t('trials:attachment:table:description')" prop="Description">
<el-input
v-model="form.Description"
type="textarea"
:autosize="{ minRows: 5, maxRows: 6}"
maxlength="500"
show-word-limit
/>
</el-form-item>
</div>
<div class="base-dialog-footer" style="text-align:right;margin-top:10px;">
<el-form-item style="text-align:right;">
<!-- Save -->
<el-button size="small" type="primary" :disabled="form.FileTypeId === '' || form.Name === ''" :loading="saveBtnLoading" @click="handleSave">
{{ $t('common:button:save') }}
</el-button>
</el-form-item>
</div>
</el-form>
</template>
<script>
import { addOrUpdateTrialDocument, uploadTrialDoc, getTrialUserTypeList } from '@/api/trials'
import { getBasicDataSelects } from '@/api/dictionary/dictionary'
export default {
name: 'TrialAttachmentFrom',
props: {
data: {
type: Object,
default() { return {} }
}
},
data() {
return {
form: {
Id: '',
TrialId: '',
FileTypeId: '',
Name: '',
Path: '',
IsDeleted: false,
SignViewMinimumMinutes: null,
Description: '',
NeedConfirmedUserTypeIdList: []
},
rules: {
FileTypeId: [{ required: true, message: this.$t('common:ruleMessage:select'), trigger: ['blur', 'change'] }],
SignViewMinimumMinutes: [{ required: true, message: this.$t('common:ruleMessage:specify'), trigger: ['change'] }],
NeedConfirmedUserTypeIdList: [{ required: true, message: this.$t('common:ruleMessage:select'), trigger: ['blur', 'change'] }],
Description: [{ max: 500, message: `${this.$t('common:ruleMessage:maxLength')} 500`, trigger: ['blur', 'change'] }]
},
fileList: [],
userTypeOptions: [],
btnLoading: false,
saveBtnLoading: false,
loading: false,
dictionaryList: {}
}
},
mounted() {
this.initForm()
},
methods: {
// 保存
handleSave() {
this.$refs.trialAttachmentFrom.validate(valid => {
if (!valid) return
if (!this.form.Name) {
this.$alert(this.$t('trials:attachment:message:selectFile'))
return
}
if (this.form.TrialId === '') {
this.form.TrialId = this.$route.query.trialId
}
this.saveBtnLoading = true
addOrUpdateTrialDocument(this.form).then(res => {
this.saveBtnLoading = false
this.$emit('closeDialog')
this.$emit('getList')
if (this.form.Id) {
this.$message.success(this.$t('common:message:savedSuccessfully'))
} else {
this.$message.success(this.$t('common:message:addedSuccessfully'))
}
// this.$message.success(this.$t('common:message:savedSuccessfully'))
}).catch(() => {
this.saveBtnLoading = false
})
})
},
async initForm() {
this.loading = true
await this.getDicData()
await this.getUserType()
if (Object.keys(this.data).length > 0) {
if (this.data.Path) {
this.fileList = [
{
name: this.data.Name,
path: this.data.Path
}
]
}
this.form.Id = this.data.Id
this.form.FileTypeId = this.data.FileTypeId
this.form.Name = this.data.Name
this.form.Path = this.data.Path
this.form.IsDeleted = this.data.IsDeleted
this.form.Description = this.data.Description
this.form.SignViewMinimumMinutes = this.data.SignViewMinimumMinutes
}
this.loading = false
},
// 获取文件类型下拉框数据
getDicData() {
getBasicDataSelects(['Trial_Document']).then(res => {
this.dictionaryList = { ...res.Result }
})
},
// 获取用户类型下拉数据
getUserType() {
getTrialUserTypeList().then(res => {
this.userTypeOptions = res.Result
if (this.form.Id) {
this.form.NeedConfirmedUserTypeIdList = this.data.NeedConfirmedUserTypeeIds
}
}).catch(() => { this.loading = false })
},
handleViewableUserTypeChange(valArr) {
this.form.NeedConfirmedUserTypeIdList = []
this.needConfirmedUserTypeOptions = []
valArr.forEach((val) => {
const i = this.userTypeOptions.findIndex(userType => { return userType.Id === val })
this.needConfirmedUserTypeOptions.push(this.userTypeOptions[i])
})
},
// 检测文件类型是否符合要求
beforeUpload(file) {
if (this.checkFileSuffix(file.name)) {
this.fileList = []
return true
} else {
this.$alert(this.$t('trials:attachment:message:pdf'))
return false
}
},
// 上传文件
handleUploadFile(param) {
this.btnLoading = true
const trialId = this.$route.query.trialId
uploadTrialDoc(trialId, param.file).then(res => {
this.btnLoading = false
if (res.IsSuccess) {
this.form.Path = res.Result.FilePath
this.form.Name = param.file.name
const file = { name: this.form.Name, path: this.form.Path }
this.fileList.push(file)
}
}).catch(() => {
this.btnLoading = false
})
},
// 移除
handleRemoveFile() {
this.fileList = []
this.form.Path = ''
this.form.Name = ''
},
handleExceed(files, fileList) {
this.$message.warning(this.$t('trials:attachment:message:uploadFile'))
},
// 文件类型是否是pdf
checkFileSuffix(fileName) {
var typeArr = ['pdf']
var extendName = fileName.substring(fileName.lastIndexOf('.') + 1).toLocaleLowerCase()
if (typeArr.indexOf(extendName) !== -1) {
return true
} else {
return false
}
}
}
}
</script>
<style lang="scss">
.upload-temporary-file{
.upload-container .el-upload--text {
border: none;
width: 80px;
height: 40px;
}
.upload-container .el-input--small {
margin-bottom: 5px;
}
.upload-container .el-icon-circle-check {
color: #428bca;
font-size: 13px;
}
.account_item_clear{
.el-tag__close{
display: none !important;
}
}
}
</style>