<template> <div class="question-form"> <span ref="top"></span> <van-form label-width="100%" ref="form"> <template v-for="(item, index) in formData" :key="index"> <div class="px-4 py-2 title">{{item.title}}</div> <van-field :name="q.key" v-for="(q, i) in item.issue" :key="i" :label="q.title" :rules="[{ required: true, message: '请选择' }]"> <template #input> <van-radio-group v-model="q.value" @change="onChange($event, item)" class="pl-2"> <van-radio v-for="a in q.answer.cont" shape="dot" class="mt-2" :name="a.value" :key="a.value">{{a.name}}</van-radio> </van-radio-group> </template> </van-field> <van-field name="highRisk" label="筛查结论" label-width="4.5em"> <template #input> <van-radio-group v-model="item.highRisk" direction="horizontal"> <van-radio v-for="r in store.getDict('DC00071')" shape="dot" :name="r.value" :key="r.value">{{r.name}}</van-radio> </van-radio-group> </template> </van-field> <div class="remark" v-if="item.remark && item.highRisk === 1"> {{ item.remark }} </div> </template> </van-form> </div> </template> <script> import { getQuestion } from '../config.js' import { useStore } from '@/tumour/store/index.js' export default { props: { // 筛查癌种 获取对应的问卷 species: Array }, data() { return { formData: [], } }, setup() { const store = useStore() return { store } }, created() { this.init() }, mounted() { const dom = this.$refs['top'] if (!dom) return dom.scrollIntoView() }, methods: { init() { if (!this.species) return this.species.forEach(e => { this.formData.push(getQuestion(e)) }) console.log(this.formData) }, onChange(val, item) { // console.log(val, item) // console.log('高危判断', item.check()) item.highRisk = item.check() ? 1 : 2 }, submit() { return new Promise((resolve) => { this.$refs.form.validate().then(res => { console.log(res, this.formData) const result = {} this.formData.forEach(e => { const issue = {} e.issue.forEach(i => { issue[i.key] = i.value }) result[e.key] = { highRisk: e.highRisk, ...issue } }) resolve(result) }).catch(err => { console.warn(err) }) }) } } } </script> <style lang="less" scoped> @import '@/tumour/utils/common.less'; .remark { border: 1px solid #F0F0F0; padding: 10px; color: #595959; background-color: #FAFAFA; margin: 10px 16px; line-height: 1.5; } </style>