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