360 lines
11 KiB
Vue
360 lines
11 KiB
Vue
<template>
|
|
<div>
|
|
<!-- <div
|
|
v-if="!!question.GroupName && (questionForm[question.ParentId] === question.ParentTriggerValue) || question.ParentId===''||question.ParentId===null"
|
|
style="font-weight: bold;font-size: 16px;margin: 5px 0px;"
|
|
>
|
|
{{ question.GroupName }}
|
|
</div> -->
|
|
<div
|
|
v-if="!!question.GroupName && question.Type==='group'"
|
|
>
|
|
<h4 style="color: #ddd;padding: 5px 0px;margin: 0;">
|
|
{{ question.GroupName }}
|
|
</h4>
|
|
</div>
|
|
<template v-else>
|
|
<el-form-item
|
|
v-if="(question.ShowQuestion===1 && questionForm[question.ParentId] === question.ParentTriggerValue) || question.ShowQuestion===0"
|
|
:label="`${question.QuestionName}`"
|
|
:prop="question.Id"
|
|
:rules="[
|
|
{ required: (question.IsRequired === 0 || (question.IsRequired ===1 && question.RelevanceId && (questionForm[question.RelevanceId] === question.RelevanceValue))) && question.Type!=='group' && question.Type!=='summary',
|
|
message: '请注明', trigger: ['blur', 'change']},
|
|
]"
|
|
:class="[question.Type==='group'?'mb':question.Type==='upload'?'uploadWrapper':'']"
|
|
>
|
|
|
|
<!-- 输入框 -->
|
|
<el-input
|
|
v-if="question.Type==='input'"
|
|
v-model="questionForm[question.Id]"
|
|
:disabled="readingTaskState >= 2"
|
|
/>
|
|
<!-- 多行文本输入框 -->
|
|
<el-input
|
|
v-if="question.Type==='textarea'"
|
|
v-model="questionForm[question.Id]"
|
|
type="textarea"
|
|
:autosize="{ minRows: 2, maxRows: 4}"
|
|
:disabled="readingTaskState >= 2"
|
|
/>
|
|
<!-- 下拉框 -->
|
|
<el-select
|
|
v-if="question.Type==='select'"
|
|
v-model="questionForm[question.Id]"
|
|
:disabled="readingTaskState >= 2 || ((question.TableQuestionType === 2 || question.QuestionGenre === 2) && !!question.DictionaryCode)"
|
|
clearable
|
|
@change="((val)=>{formItemChange(val, question)})"
|
|
>
|
|
<!-- <el-option
|
|
v-for="val in question.TypeValue.split('|')"
|
|
:key="val"
|
|
:label="val"
|
|
:value="val"
|
|
/> -->
|
|
<template v-if="question.TableQuestionType === 1">
|
|
<el-option
|
|
v-for="item in organList"
|
|
:key="item.Id"
|
|
:label="item[question.DataTableColumn]"
|
|
:value="item[question.DataTableColumn]"
|
|
/>
|
|
</template>
|
|
<template v-else-if="question.TableQuestionType === 3 || question.QuestionGenre === 3">
|
|
<el-option
|
|
v-for="item of $d[question.DictionaryCode]"
|
|
:key="item.id"
|
|
:value="item.value"
|
|
:label="item.label"
|
|
/>
|
|
</template>
|
|
<template v-else-if="(question.TableQuestionType === 2 || question.QuestionGenre === 2) && question.DictionaryCode">
|
|
<el-option
|
|
v-for="item of $d[question.DictionaryCode]"
|
|
:key="item.id"
|
|
:value="item.value"
|
|
:label="item.label"
|
|
/>
|
|
</template>
|
|
<template v-else>
|
|
<el-option
|
|
v-for="val in question.TypeValue.split('|')"
|
|
:key="val"
|
|
:label="val"
|
|
:value="val"
|
|
/>
|
|
</template>
|
|
</el-select>
|
|
<!-- 单选 -->
|
|
<el-radio-group
|
|
v-if="question.Type==='radio'"
|
|
v-model="questionForm[question.Id]"
|
|
:disabled="readingTaskState >= 2"
|
|
@change="((val)=>{formItemChange(val, question)})"
|
|
>
|
|
<el-radio
|
|
v-for="val in question.TypeValue.split('|')"
|
|
:key="val"
|
|
:label="val"
|
|
>
|
|
{{ val }}
|
|
</el-radio>
|
|
</el-radio-group>
|
|
<!-- 复选框 -->
|
|
<el-checkbox-group
|
|
v-if="question.Type==='checkbox'"
|
|
v-model="questionForm[question.Id]"
|
|
:disabled="readingTaskState >= 2"
|
|
>
|
|
<el-checkbox
|
|
v-for="val in question.TypeValue.split('|')"
|
|
:key="val"
|
|
:label="val"
|
|
>
|
|
{{ val }}
|
|
</el-checkbox>
|
|
</el-checkbox-group>
|
|
<!-- 数值 -->
|
|
<!-- :precision="2" :step="0.1" :max="10" -->
|
|
<el-input-number
|
|
v-if="question.Type==='number'"
|
|
v-model="questionForm[question.Id]"
|
|
:disabled="readingTaskState >= 2"
|
|
/>
|
|
<!-- 上传图像 -->
|
|
<el-upload
|
|
v-if="question.Type==='upload'"
|
|
action
|
|
:accept="accept"
|
|
:limit="question.ImageCount"
|
|
:on-preview="handlePictureCardPreview"
|
|
:before-upload="handleBeforeUpload"
|
|
:http-request="uploadScreenshot"
|
|
list-type="picture-card"
|
|
:on-remove="handleRemove"
|
|
:file-list="fileList"
|
|
:class="{disabled:fileList.length >= question.ImageCount}"
|
|
:disabled="readingTaskState >= 2"
|
|
>
|
|
<i slot="default" class="el-icon-plus" />
|
|
<div slot="file" slot-scope="{file}">
|
|
<viewer
|
|
:ref="file.url"
|
|
:images="[imageUrl]"
|
|
style="
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
"
|
|
>
|
|
<img
|
|
class="el-upload-list__item-thumbnail"
|
|
:src="OSSclientConfig.basePath + file.url"
|
|
crossOrigin="anonymous"
|
|
alt=""
|
|
style="max-width: 100%; max-height: 100%"
|
|
/>
|
|
<span class="el-upload-list__item-actions">
|
|
<span
|
|
class="el-upload-list__item-preview"
|
|
@click="handlePictureCardPreview(file)"
|
|
>
|
|
<i class="el-icon-zoom-in" />
|
|
</span>
|
|
|
|
<span
|
|
v-if="readingTaskState < 2"
|
|
class="el-upload-list__item-delete"
|
|
@click="handleRemove(file)"
|
|
>
|
|
<i class="el-icon-delete" />
|
|
</span>
|
|
</span>
|
|
</viewer>
|
|
</div>
|
|
</el-upload>
|
|
<el-dialog
|
|
v-if="question.Type==='upload'"
|
|
append-to-body
|
|
:visible.sync="imgVisible"
|
|
width="600px"
|
|
>
|
|
<el-image :src="imageUrl" width="100%">
|
|
<div slot="placeholder" class="image-slot">
|
|
加载中<span class="dot">...</span>
|
|
</div>
|
|
</el-image>
|
|
</el-dialog>
|
|
</el-form-item>
|
|
</template>
|
|
|
|
<QuestionItem
|
|
v-for="(item) in question.Childrens"
|
|
:key="item.Id"
|
|
:question="item"
|
|
:reading-task-state="readingTaskState"
|
|
:question-form="questionForm"
|
|
:visit-task-id="visitTaskId"
|
|
@setFormItemData="setFormItemData"
|
|
@resetFormItemData="resetFormItemData"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { uploadReadingAnswerImage } from '@/api/trials'
|
|
export default {
|
|
name: 'QuestionItem',
|
|
props: {
|
|
questionForm: {
|
|
type: Object,
|
|
default() {
|
|
return {}
|
|
}
|
|
},
|
|
question: {
|
|
type: Object,
|
|
default() {
|
|
return []
|
|
}
|
|
},
|
|
readingTaskState: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
visitTaskId: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
fileList: [],
|
|
accept: '.png,.jpg,.jpeg',
|
|
imgVisible: false,
|
|
imageUrl: '',
|
|
urls: []
|
|
}
|
|
},
|
|
watch: {
|
|
questionForm: {
|
|
deep: true,
|
|
immediate: true,
|
|
handler(v) {
|
|
// console.log(v)
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
if (this.question.Type === 'upload') {
|
|
if (this.questionForm[this.question.Id]) {
|
|
this.accept = this.question.Accept
|
|
this.urls = this.questionForm[this.question.Id].split('|')
|
|
this.fileList = []
|
|
this.urls.map(url => {
|
|
this.fileList.push({ name: '', url: `/api/${url}` })
|
|
})
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
formItemChange(v, question) {
|
|
if (question.Childrens.length > 0) {
|
|
this.resetChild(question.Childrens)
|
|
}
|
|
},
|
|
resetChild(obj) {
|
|
obj.forEach(i => {
|
|
this.$emit('resetFormItemData', i.Id)
|
|
if (i.Childrens && i.Childrens.length > 0) {
|
|
this.resetChild(i.Childrens)
|
|
}
|
|
})
|
|
},
|
|
resetFormItemData(v) {
|
|
this.$emit('resetFormItemData', v)
|
|
},
|
|
setFormItemData(obj) {
|
|
this.$emit('setFormItemData', obj)
|
|
},
|
|
async uploadScreenshot(param) {
|
|
if (!this.visitTaskId) return
|
|
const loading = this.$loading({
|
|
target: document.querySelector('.el-button'),
|
|
fullscreen: false,
|
|
lock: true,
|
|
spinner: 'el-icon-loading'
|
|
})
|
|
var file = await this.fileToBlob(param.file)
|
|
const res = await this.OSSclient.put(`/${this.trialId}/ReadAttachment/${this.subjectId}/${this.visitTaskId}/${param.file.name}`, file)
|
|
this.fileList.push({ name: param.file.name, url: this.$getObjectName(res.url) })
|
|
this.urls.push(this.$getObjectName(res.url))
|
|
this.$emit('setFormItemData', { key: this.question.Id, val: this.urls.length > 0 ? this.urls.join('|') : '', question: this.question })
|
|
loading.close()
|
|
},
|
|
handleBeforeUpload(file) {
|
|
// 检测文件类型是否符合要求
|
|
if (this.checkFileSuffix(file.name)) {
|
|
// this.fileList = []
|
|
return true
|
|
} else {
|
|
const msg = this.$t('trials:adReview:title:msg4').replace('xxx', this.accept)
|
|
this.$alert(msg)
|
|
return false
|
|
}
|
|
},
|
|
checkFileSuffix(fileName) {
|
|
console.log(this.accept)
|
|
var index = fileName.lastIndexOf('.')
|
|
var suffix = fileName.substring(index + 1, fileName.length)
|
|
if (this.accept.toLocaleLowerCase().search(suffix.toLocaleLowerCase()) === -1) {
|
|
return false
|
|
} else {
|
|
return true
|
|
}
|
|
},
|
|
// 预览图片
|
|
handlePictureCardPreview(file) {
|
|
var suffix = file.url.substring(file.url.lastIndexOf(".")+1)
|
|
suffix = suffix ? suffix.toLowerCase() : ''
|
|
if (suffix === 'doc' || suffix === 'docx' || suffix === 'pdf'){
|
|
window.open(this.OSSclientConfig.basePath + file.url,'_blank')
|
|
}else{
|
|
this.imageUrl = this.OSSclientConfig.basePath + file.url
|
|
this.$refs[file.url].$viewer.show();
|
|
}
|
|
},
|
|
// 删除图片
|
|
handleRemove(file, fileList) {
|
|
this.imageUrl = ''
|
|
this.fileList.splice(this.fileList.findIndex(f => f.url === file.url), 1)
|
|
this.urls.splice(this.fileList.findIndex(f => f === file.url), 1)
|
|
this.$emit('setFormItemData', { key: this.question.Id, val: this.urls.length > 0 ? this.urls.join('|') : '', question: this.question })
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.mb{
|
|
margin-bottom: 0px;
|
|
}
|
|
.disabled{
|
|
/deep/ .el-upload--picture-card {
|
|
display: none;
|
|
}
|
|
}
|
|
.uploadWrapper{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
/deep/ .el-input.is-disabled .el-input__inner{
|
|
background-color: #646464a1;
|
|
}
|
|
/deep/ .el-select.is-disabled .el-input__inner{
|
|
background-color: #646464a1;
|
|
}
|
|
</style>
|