6 changed files with 1126 additions and 18397 deletions
File diff suppressed because it is too large
File diff suppressed because it is too large
@ -0,0 +1,453 @@ |
|||
<template> |
|||
<div> |
|||
<a-form-item |
|||
:label="a.question" |
|||
:label-col="widthNum > 575 ? formItemLayout.labelCol : {}" |
|||
:wrapper-col="widthNum > 575 ? formItemLayout1.wrapperCol : {}" |
|||
> |
|||
<a-input :max-length="500" @change="onChange($event, a.type, a.id)" v-if="a.type === 1" v-model="a.answer" /> |
|||
<a-textarea |
|||
:max-length="500" |
|||
@change="onChange($event, a.type, a.id)" |
|||
style="height: 150px; width: 100%" |
|||
v-else-if="a.type === 2" |
|||
v-model="a.answer" |
|||
/> |
|||
<a-select @change="onChange($event, a.type, a.id)" style="width: 100%" v-else-if="a.type === 5" v-model="a.answer"> |
|||
<a-select-option :key="c" :value="b.showValue" v-for="(b, c) in a.optionVos">{{ b.showValue }}</a-select-option> |
|||
</a-select> |
|||
<a-date-picker |
|||
:default-value="a.answer ? $moment(a.answer, dateFormat) : ''" |
|||
@change="onChange($event, a.type, a.id)" |
|||
format="YYYY-MM-DD" |
|||
placeholder="日期选择" |
|||
style="width: 100%" |
|||
:input-read-only="true" |
|||
v-else-if="a.type === 6" |
|||
/> |
|||
<div v-else-if="a.type === 7"> |
|||
<a-upload |
|||
:action="action" |
|||
:headers="headers" |
|||
@change="fChange($event, a.id)" |
|||
:before-upload="beforeUpload1" |
|||
list-type="picture" |
|||
name="files" |
|||
v-if="code || showrzlb" |
|||
> |
|||
<a-button> <a-icon type="upload" />点击上传 </a-button> |
|||
</a-upload> |
|||
<img class="img-box" @click="lookImg(a.answer)" :src="a.answer" v-if="a.answer && !code" /> |
|||
<template v-if="a.domList && a.domList.length && !code"> |
|||
<img class="img-box" @click="lookImg(imgSrc)" v-for="imgSrc in a.domList" :key="imgSrc" :src="imgSrc" /> |
|||
</template> |
|||
</div> |
|||
<div v-else-if="a.type === 10"> |
|||
<a-select :default-value="getAnswer(a.answer)" @change="onChange($event, a.type, a.id)" style="width: 100%"> |
|||
<a-select-option :key="c" :value="b.showValue" v-for="(b, c) in a.optionVos">{{ b.showValue }}</a-select-option> |
|||
</a-select> |
|||
<div :key="c" v-for="(b, c) in a.optionVos"> |
|||
<div |
|||
v-if=" |
|||
(contentList.find(item => { |
|||
return item.testQuestionsId === a.id && item.contents === `${b.showValue}`; |
|||
}) && |
|||
b.afterOperation === 1) || |
|||
(b.afterOperation === 1 && |
|||
!contentList.find(item => { |
|||
return item.testQuestionsId === a.id; |
|||
})) |
|||
" |
|||
> |
|||
<a-form-item class="d-flex align-center mb-3"> |
|||
<a-input |
|||
:max-length="500" |
|||
@change="inputChange(a.id, $event, b.showValue)" |
|||
style="width: 100%" |
|||
v-model="b.otherInformation" |
|||
></a-input> |
|||
</a-form-item> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div v-else-if="a.type === 4"> |
|||
<a-checkbox-group |
|||
:default-value="getList(a.optionVos)" |
|||
@change="onChange($event, a.type, a.id)" |
|||
class="d-flex flex-row flex-wrap" |
|||
style="width: 100%" |
|||
> |
|||
<a-row class="flex-1 flex-wrap"> |
|||
<div class="fill-width" :key="indexNum" :span="24" v-for="(ques, indexNum) in a.optionVos"> |
|||
<a-col> |
|||
<a-checkbox :value="ques.submitValue">{{ ques.showValue }}</a-checkbox> |
|||
</a-col> |
|||
<a-col> |
|||
<div |
|||
v-if=" |
|||
(contentList.find(item => { |
|||
return item.testQuestionsId === a.id && item.contents === `${ques.showValue}`; |
|||
}) && |
|||
ques.afterOperation > 0) || |
|||
(ques.afterOperation > 0 && |
|||
ques.choose === 1 && |
|||
!contentList.find(item => { |
|||
return item.testQuestionsId === a.id; |
|||
})) |
|||
" |
|||
> |
|||
<!-- <div v-if="ques.afterOperation > 0"> --> |
|||
<a-input |
|||
:max-length="500" |
|||
@change="inputChange1(a.id, $event, ques.showValue, a.optionVos, ques.id)" |
|||
style="width: 100%" |
|||
v-model="ques.otherInformation" |
|||
v-if="ques.afterOperation === 1" |
|||
/> |
|||
<a-textarea |
|||
@change="inputChange1(a.id, $event, ques.showValue, a.optionVos, ques.id)" |
|||
style="width: 100%; height: 150px" |
|||
:max-length="500" |
|||
v-else-if="ques.afterOperation === 2" |
|||
/> |
|||
<div v-else-if="ques.afterOperation === 3" :key="i" v-for="(h, i) in ques.questionVos" style="position: relative"> |
|||
<QuestionsA |
|||
:form-item-layout="formItemLayout" |
|||
:form-item-layout1="formItemLayout1" |
|||
:a="h" |
|||
:index="i" |
|||
@chan="onChange" |
|||
@fChange="fChange" |
|||
:code="code" |
|||
:showrzlb="showrzlb" |
|||
:content-list="contentList" |
|||
@iChange="inputChange" |
|||
@iChange1="inputChange1" |
|||
:width-num="widthNum" |
|||
@gDefultList="getDefultList" |
|||
@eChange="explainChange" |
|||
@aDom="addDom" |
|||
/> |
|||
<a-button |
|||
v-if="h.remark && JSON.parse(h.remark).type === 'add'" |
|||
class="add-btn" |
|||
@click="addDom('AB', a.id, index, indexNum, h.id)" |
|||
> |
|||
+ |
|||
</a-button> |
|||
</div> |
|||
</div> |
|||
</a-col> |
|||
</div> |
|||
</a-row> |
|||
</a-checkbox-group> |
|||
</div> |
|||
<!-- 当类型为3时，为单选++++++其他 --> |
|||
<div v-else-if="a.type === 3"> |
|||
<a-radio-group |
|||
:default-value="getRadioAnswer(a.optionVos)" |
|||
@change="onChange($event, a.type, a.id)" |
|||
class="d-flex flex-row flex-wrap" |
|||
> |
|||
<a-radio :key="g" :style="radioStyle" :value="f.showValue" v-for="(f, g) in a.optionVos"> |
|||
{{ f.showValue }} |
|||
</a-radio> |
|||
</a-radio-group> |
|||
<div :key="k" v-for="(j, k) in a.optionVos"> |
|||
<div |
|||
v-if=" |
|||
(contentList.find(item => { |
|||
return item.testQuestionsId === a.id && item.contents === `${j.showValue}`; |
|||
}) && |
|||
j.afterOperation > 0) || |
|||
(j.afterOperation > 0 && |
|||
(j.showValue === a.answer || getRadioAnswer(a.optionVos) === j.showValue) && |
|||
!contentList.find(item => { |
|||
return item.testQuestionsId === a.id; |
|||
})) |
|||
" |
|||
> |
|||
<a-input |
|||
:max-length="500" |
|||
v-model="j.otherInformation" |
|||
@change="inputChange(a.id, $event, j.showValue)" |
|||
style="width: 200px" |
|||
v-if="j.afterOperation === 1" |
|||
></a-input> |
|||
<a-textarea |
|||
style="height: 150px; width: 100%" |
|||
v-else-if="j.afterOperation === 2" |
|||
@change="inputChange(a.id, $event, j.showValue)" |
|||
></a-textarea> |
|||
<div v-else-if="j.afterOperation === 3" :key="i" v-for="(h, i) in j.questionVos" style="position: relative"> |
|||
<QuestionsA |
|||
:form-item-layout="formItemLayout" |
|||
:form-item-layout1="formItemLayout1" |
|||
:a="h" |
|||
:index="i" |
|||
@chan="onChange" |
|||
@fChange="fChange" |
|||
:code="code" |
|||
:showrzlb="showrzlb" |
|||
:content-list="contentList" |
|||
@iChange="inputChange" |
|||
@iChange1="inputChange1" |
|||
:width-num="widthNum" |
|||
@gDefultList="getDefultList" |
|||
@eChange="explainChange" |
|||
@aDom="addDom" |
|||
/> |
|||
<a-button v-if="h.remark && JSON.parse(h.remark).type === 'add'" class="add-btn" @click="addDom('AB', a.id, index, k, h.id)"> |
|||
+ |
|||
</a-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div v-else-if="a.type === 13"> |
|||
<a-input-number @change="onChange($event, a.type, a.id)" style="width: 200px" v-model="a.answer" /> |
|||
</div> |
|||
<div v-else-if="a.type === 15"> |
|||
<a-time-picker placeholder="时间选择" :input-read-only="true" @change="onChange($event, a.type, a.id)" /> |
|||
</div> |
|||
<div v-else-if="a.type === 16"> |
|||
<a-date-picker |
|||
:default-value="a.answer ? $moment(a.answer, dateFormat) : ''" |
|||
format="YYYY-MM-DD HH:mm" |
|||
placeholder="日期时间选择" |
|||
:input-read-only="true" |
|||
@change="onChange($event, a.type, a.id)" |
|||
:show-time="{ format: 'HH:mm' }" |
|||
/> |
|||
</div> |
|||
<div v-for="(dom, domIndex) in a.domList" :key="domIndex"> |
|||
<a-input v-if="a.type === 1" v-model="a.domList[domIndex]"></a-input> |
|||
<a-textarea style="height: 150px; width: 100%" v-else-if="a.type === 2" v-model="a.domList[domIndex]"></a-textarea> |
|||
</div> |
|||
<div v-if="a.remark && JSON.parse(a.remark).type === 'desc'"> |
|||
说明： |
|||
<a-textarea @change="explainChange(a.id, $event)" v-model="a.explains" /> |
|||
</div> |
|||
<p class="units-position" style="margin-left: 10px"> |
|||
<span v-if="a.units">{{ a.units }}</span> |
|||
<span v-if="typeof a.referenceLower === 'number'">({{ a.referenceLower + '-' }}{{ a.referenceUpper }})</span> |
|||
</p> |
|||
</a-form-item> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { upload } from 'config/api'; |
|||
|
|||
import QuestionsA from './QuestionsA.vue'; |
|||
export default { |
|||
name: 'QuestionsA', |
|||
components: { QuestionsA }, |
|||
props: { |
|||
a: { |
|||
type: Object, |
|||
default: () => {}, |
|||
}, |
|||
index: { |
|||
type: Number, |
|||
default: 0, |
|||
}, |
|||
formItemLayout: { |
|||
type: Object, |
|||
default: () => { |
|||
return { |
|||
labelCol: { span: 6 }, |
|||
wrapperCol: { span: 12 }, |
|||
}; |
|||
}, |
|||
}, |
|||
formItemLayout1: { |
|||
type: Object, |
|||
default: () => { |
|||
return { |
|||
labelCol: { span: 0 }, |
|||
wrapperCol: { span: 18 }, |
|||
}; |
|||
}, |
|||
}, |
|||
code: { |
|||
type: String, |
|||
default: '', |
|||
}, |
|||
showrzlb: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
contentList: { |
|||
type: Array, |
|||
default: () => [], |
|||
}, |
|||
widthNum: { |
|||
type: Number, |
|||
default: 0, |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
dateFormat: 'YYYY-MM-DD HH:mm', |
|||
action: upload, // 上传附件地址 |
|||
beforeUpload1: file => { |
|||
if (file.size > 10 * 1024 * 1024) { |
|||
this.$message.error('图片最大不得大于10M'); |
|||
return false; |
|||
} |
|||
}, |
|||
radioStyle: { |
|||
display: 'block', |
|||
lineHeight: '30px', |
|||
textOverflow: 'ellipsis', |
|||
whiteSpace: 'normal', |
|||
}, |
|||
}; |
|||
}, |
|||
computed: { |
|||
// 上传附加请求头 |
|||
headers() { |
|||
const token = sessionStorage.getItem('anyringToken'); |
|||
return { Authorization: `Bearer ${token}` }; |
|||
}, |
|||
}, |
|||
methods: { |
|||
onChange(e, type, id) { |
|||
this.$emit('chan', e, type, id); |
|||
}, |
|||
fChange(e, id) { |
|||
this.$emit('fChange', e, id); |
|||
}, |
|||
lookImg(src) { |
|||
window.open(src); |
|||
}, |
|||
getAnswer(str) { |
|||
if (str) { |
|||
let strArr = str.split(':'); |
|||
return strArr[0]; |
|||
} else { |
|||
return ''; |
|||
} |
|||
}, |
|||
inputChange(id, e, showValue) { |
|||
this.$emit('iChange', id, e, showValue); |
|||
}, |
|||
getList(obj) { |
|||
let arr = []; |
|||
for (let i = 0; i < obj.length; i++) { |
|||
if (obj[i].choose - 0 === 1) { |
|||
arr.push(obj[i].showValue); |
|||
} |
|||
} |
|||
return arr; |
|||
}, |
|||
inputChange1(id, e, showValue, optionVos, quesId) { |
|||
this.$emit('iChange1', id, e, showValue, optionVos, quesId); |
|||
}, |
|||
/** |
|||
* 获取默认图片的数组 |
|||
*/ |
|||
getDefultList(answer, list) { |
|||
let arr = []; |
|||
if (list.length) { |
|||
for (let i = 0; i < list.length; i++) { |
|||
let obj = { |
|||
uid: i, |
|||
url: list[i], |
|||
status: 'done', |
|||
name: `${i}`, |
|||
}; |
|||
arr.push(obj); |
|||
} |
|||
} |
|||
if (answer) { |
|||
let obj = { |
|||
uid: 0, |
|||
url: answer, |
|||
status: 'done', |
|||
name: `${0}`, |
|||
}; |
|||
// console.log([{ ...obj }, ...arr]); |
|||
return [{ ...obj }, ...arr]; |
|||
} else { |
|||
return [...arr]; |
|||
} |
|||
}, |
|||
explainChange(id, e) { |
|||
this.$emit('eChange', id, e); |
|||
}, |
|||
addDom(type, id, index, quesIndex, quesId) { |
|||
this.$emit('aDom', type, id, index, quesIndex, quesId); |
|||
}, |
|||
getRadioAnswer(options) { |
|||
for (let i = 0; i < options.length; i++) { |
|||
if (options[i].choose - 0 === 1) { |
|||
// console.log(options[i].submitValue); |
|||
return options[i].submitValue; |
|||
} |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="stylus" scoped> |
|||
.hhh2 { |
|||
font-size: 20px; |
|||
font-weight: bold; |
|||
margin-left: 24px; |
|||
color: rgba(0, 0, 0, 0.75); |
|||
} |
|||
|
|||
.add-btn { |
|||
position: absolute; |
|||
right: 0%; |
|||
top: -32px; |
|||
} |
|||
|
|||
.units-position { |
|||
position: absolute; |
|||
right: -10px; |
|||
transform: translate3d(100%, -100%, 0); |
|||
} |
|||
|
|||
/deep/ .ant-tabs-bar { |
|||
margin-bottom: 0 !important; |
|||
} |
|||
|
|||
.choose-btn { |
|||
position: fixed; |
|||
top: 10px; |
|||
right: 6px; |
|||
} |
|||
|
|||
@media (max-width: 575px) { |
|||
/deep/.ant-form-item-label .ant-form-item-control-wrapper { |
|||
display: block; |
|||
width: 50%; |
|||
} |
|||
|
|||
.add-btn { |
|||
position: absolute; |
|||
right: 0; |
|||
top: -3px; |
|||
} |
|||
|
|||
/deep/span.ant-radio + * { |
|||
padding-right: 12px; |
|||
padding-left: 4px; |
|||
} |
|||
|
|||
.choose-btn { |
|||
position: fixed; |
|||
top: 58px; |
|||
right: 6px; |
|||
} |
|||
} |
|||
|
|||
.img-box { |
|||
height: 100px; |
|||
width: 100px; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue