<template> <view class="questionnaire"> <form @submit="formSubmit"> <template v-for="(item,index) in list"> <template v-if="item.type == 'radio'"> <view class="margin-top padding sict-label" :key="item.value" v-show="!item.hidden"> <view v-show="!item.hidden"> <span style="color:red;display: inline-block; vertical-align:inherit;margin-right:4upx" :style="{opacity: item.required ? 1 : 0}">*</span> {{item.label}} </view> <view class="text-right sict-value" v-show="!item.hidden"> <radio-group @change="showChange($event,item)"> <view> <view class="label" v-for="(opt, optIndex) in item.opts" :key="opt.label"> <radio :class="form[item.value]== opt.value ?'checked':''" :checked="form[item.value]== opt.value?true:false" :value="opt.value"></radio> <view style="display: inline-block;" class="right">{{opt.label}}</view> </view> </view> </radio-group> </view> </view> </template> <template v-else-if="item.type == 'picker'"> <view class="cu-form-group margin-top padding-rl" v-show="!item.hidden" :key="item.value"> <view :class="item.titleClass"><span style="color:red;display: inline-block; vertical-align:inherit;margin-right:4upx" :style="{opacity: item.required ? 1 : 0}">*</span>{{item.label}}</view> <picker @change="updatePickerVal($event,item)" range-key="label" mode="selector" :value="form[item.value]" :range="item.opts"> <view class="picker"> {{form[item.value] && formMat[item.value] ? formMat[item.value]:'请选择'}} </view> </picker> </view> </template> <template v-else-if="item.type == 'pickerMore'"> <view class="margin-top" :key="index"> <uni-collapse> <uni-collapse-item :title="item.label" :open="true" :required="item.required"> <view class="padding-lr"> <view class="uni-list"> <checkbox-group @change="showChange($event,item)"> <label class="uni-list-cell uni-list-cell-pd" v-for="(itemCheck,indexCheck) in item.opts" :key="itemCheck.value" @click="checkboxChange(indexCheck,itemCheck,item)"> <view class="list-item"> <view class="fl"> <checkbox :value="itemCheck.value" :checked="itemCheck.checked" /> </view> <view style="padding-left:60upx">{{itemCheck.label}}</view> </view> </label> </checkbox-group> </view> </view> </uni-collapse-item> </uni-collapse> </view> </template> <template v-else-if="item.type == 'date'"> <view class="cu-form-group margin-top padding-rl" v-show="!item.hidden" :key="item.value"> <view :class="item.titleClass"><span style="color:red;display: inline-block; vertical-align:inherit;margin-right:4upx" :style="{opacity: item.required ? 1 : 0}">*</span>{{item.label}}</view> <picker mode="date" :value="date" start="2015-09-01" end="2020-09-01" @change="updatePickerVal($event,item)"> <view class="picker"> {{form[item.value]?form[item.value]:'请选择'}} </view> </picker> </view> </template> <template v-else-if="item.type == 'input'"> <view class="cu-form-group margin-top padding-rl" :key="item.value" v-show="!item.hidden"> <view :class="item.titleClass"> <span style="color:red;display: inline-block; vertical-align:inherit;margin-right:4upx" :style="{opacity: item.required ? 1 : 0}">*</span> {{item.label}}</view> <input class="text-right" :placeholder="item.placeholder" :type="item.controType" :value="form[item.value]" name="input" @input="updateInputVal($event,item.value)"></input> </view> </template> <view class="margin-top-xs" v-show="item.child && childItem.show" v-for="(childItem,childIndex) in item.child" :key="childItem.value"> <view class="margin-top-sm padding-rl sict-label cu-form-group"> <view> <span style="color:red;display: inline-block; vertical-align:inherit;margin-right:4upx" v-if="childItem.required">*</span> {{childItem.title}} </view> <checkbox v-if="childItem.type == 'radio'" :class="form[childItem.value]?'checked':''" :checked="form[childItem.value]?true:false" :value="childItem.value"></checkbox> <picker v-else-if="childItem.type == 'picker'" range-key="label" @change="updatePickerVal($event,childItem)" :value="form[childItem.value]" :range="childItem.opts"> <view class="picker"> {{form[childItem.value]>-1?childItem.opts[form[childItem.value]].label:'请选择'}} </view> </picker> <input class="text-right" v-else-if="childItem.type == 'input'" :type="childItem.controType" :placeholder="childItem.placeholder" :value="form[childItem.value]" name="input" @input="updateInputVal($event,childItem.value)"></input> </view> </view> </template> <view class="padding" v-show="!isRead"> <button form-type="submit" class="cu-btn block bg-blue margin-tb-sm lg">提 交</button> </view> </form> </view> </template> <script> import uniCollapse from '@/components/uni-collapse/uni-collapse.vue' import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue' import validate from '@/utils/validate.js' export default { components: { uniCollapse, uniCollapseItem }, data() { return { isRead: false, list: [ { label: '当前状况', required: true, value: 'currentStatus', titleClass: 'title', type: 'pickerMore', opts: [{ value: 'a', label: '已经确诊' }, { value: 'b', label: '疑似诊断' }, { value: 'c', label: '亲密接触者' }, { value: 'd', label: '居家观察' }, { value: 'e', label: '正在接受集中医学观察' }, { value: 'f', label: '已解除集中医学观察' }, { value: 'g', label: '无上述情况' } ], showList: [{ value: 'c', show: [32, 35, 38, 40, 43, 45, 47] }, { value: 'd,e', show: [49, 50] }, ] }, { label: '停留湖北', required: true, value: 'hubeiStopped', titleClass: 'title', type: 'radio', num: 32, hidden: true, opts: [{ value: '0', label: '否' }, { value: '1', label: '是' }], show: [33, 34], showValue: ['1'] }, { label: '到达湖北日期', required: true, value: 'hubeiStopStartDate', titleClass: 'title', type: 'date', num: 33, hidden: true }, { label: '离开湖北日期', required: true, value: 'hubeiStopEndDate', titleClass: 'title', type: 'date', num: 34, hidden: true }, { label: '途径湖北', required: true, value: 'hubeiPassed', titleClass: 'title', type: 'radio', opts: [{ value: '0', label: '否' }, { value: '1', label: '是' }], show: [36, 37], num: 35, hidden: true, showValue: ['1'] }, { label: '途径湖北到达日期', required: true, value: 'hubeiPassStartDate', titleClass: 'title', type: 'date', num: 36, hidden: true }, { label: '途径湖北离开日期', required: true, value: 'hubeiPassEndDate', titleClass: 'title', type: 'date', num: 37, hidden: true }, { label: '接触湖北人员', required: true, value: 'hubeiContacted', titleClass: 'title', type: 'radio', opts: [{ value: '0', label: '否' }, { value: '1', label: '是' }], show: [39], num: 38, hidden: true, showValue: ['1'] }, { label: '接触湖北人员接触时间', required: true, value: 'hubeiContactDate', titleClass: 'title', type: 'date', num: 39, hidden: true }, { label: '家属停留或途径湖北', required: true, value: 'hubeiFamilyStopped', titleClass: 'title', type: 'radio', opts: [{ value: '0', label: '否' }, { value: '1', label: '是' }], show: [41, 42], num: 40, hidden: true, showValue: ['1'] }, { label: '家属停留或途径湖北到达日期', required: true, value: 'hubeiFamilyStopStartDate', titleClass: 'title', type: 'date', num: 41, hidden: true }, { label: '家属停留或途径湖北离开日期', required: true, value: 'hubeiFamilyStoppEndDate', titleClass: 'title', type: 'date', num: 42, hidden: true }, { label: '家属接触湖北人员', required: true, value: 'hubeiFamilyContacted', titleClass: 'title', type: 'radio', opts: [{ value: '0', label: '否' }, { value: '1', label: '是' }], show: [44], num: 43, hidden: true, showValue: ['1'] }, { label: '家属接触湖北人员接触时间', required: true, value: 'hubeiFamilyContactDate', titleClass: 'title', type: 'date', num: 44, hidden: true }, { label: '接触过已确诊或疑似患者', required: true, value: 'patientContact', titleClass: 'title', type: 'radio', opts: [{ value: '0', label: '否' }, { value: '1', label: '是' }], show: [46], num: 45, hidden: true, showValue: ['1'] }, { label: '接触患者时间', required: true, value: 'patientContactDate', titleClass: 'title', type: 'date', num: 46, hidden: true }, { label: '家属接触过已确诊或疑似患者', required: true, value: 'familyPatientContact', titleClass: 'title', type: 'radio', opts: [{ value: '0', label: '否' }, { value: '1', label: '是' }], show: [48], num: 47, hidden: true, showValue: ['1'] }, { label: '家属接触患者时间', required: true, value: 'familyPatientContactDate', titleClass: 'title', type: 'date', num: 48, hidden: true }, { label: '隔离地址', required: true, value: 'quarantineAdress', titleClass: 'title', placeholder: '请输入', type: 'input', num: 49, hidden: true }, { label: '隔离开始日期', required: true, value: 'quarantineDate', titleClass: 'title', type: 'date', num: 50, hidden: true }, { label: '当日症状', required: true, value: 'symptom', titleClass: 'title', type: 'pickerMore', opts: [{ value: 'a', label: '发热' }, { value: 'b', label: '咳嗽' }, { value: 'c', label: '流涕' }, { value: 'd', label: '咽痛' }, { value: 'e', label: '咳痰' }, { value: 'f', label: '胸痛' }, { value: 'g', label: '肌肉酸痛/关节痛' }, { value: 'h', label: '气促' }, { value: 'i', label: '腹泻' }, { value: 'j', label: '以上均无' }] }, { label: '是否离沪', required: true, value: 'left', titleClass: 'title', type: 'radio', opts: [{ value: '0', label: '否' }, { value: '1', label: '是' } ], show: [13, 14, 15, 16, 17, 18, 19, 20, 21], showValue: ['1'] }, { label: '离沪原因', required: true, value: 'leftReason', titleClass: 'title', type: 'picker', opts: [{ value: 'a', label: '探亲' }, { value: 'c', label: '出差' }, { value: 'd', label: '旅游' }, { value: 'e', label: '其他' }], num: 13, hidden: true, }, { label: '离沪出发日期', required: true, value: 'leftDate', titleClass: 'title', type: 'date', num: 14, hidden: true, }, { label: '离沪方式', required: true, value: 'leftVehicle', titleClass: 'title', type: 'radio', opts: [{ value: '火车', label: '火车 ' }, { value: '飞机', label: '飞机' }, { value: '客车', label: '客车' }, { value: '自驾', label: '自驾' }], num: 15, show: ['16'], showValue: ['火车', '飞机'], hidden: true, }, { label: '离沪车次/航班', required: true, value: 'leftVehicleNum', titleClass: 'title', placeholder: '请输入', type: 'input', num: 16, hidden: true, }, { label: '离沪到达日期', required: true, value: 'leftReachDate', titleClass: 'title', type: 'date', num: 17, hidden: true, }, { label: '离沪目的地', required: true, value: 'leftTarget', titleClass: 'title', placeholder: '请输入到达站点', type: 'input', num: 18, hidden: true, }, // { // label: '离沪具体地址', // required: true, // value: 'leftAddress', // titleClass: 'title', // placeholder: '请输入', // type: 'input', // num: 19, // hidden: true, // }, { label: '离沪同行者姓名(没有填无)', required: true, value: 'leftDependentNames', titleClass: 'title', placeholder: '请输入', type: 'input', num: 20, hidden: true, }, { label: '离沪同行者联系方式(没有填无)', required: true, value: 'leftDependentPhones', titleClass: 'title', placeholder: '请输入', type: 'input', num: 21, hidden: true, }, { label: '是否返沪', required: true, value: 'backed', titleClass: 'title', type: 'radio', show: [23, 24, 25, 26, 27, 28, 29], showValue: ['1'], opts: [{ value: '0', label: '否' }, { value: '1', label: '是' }] }, { label: '返沪出发地', required: true, value: 'backFrom', titleClass: 'title', placeholder: '请输入出发站点', type: 'input', num: 23, hidden: true, }, { label: '返沪出发日期', required: true, value: 'backDate', titleClass: 'title', type: 'date', num: 24, hidden: true, }, { label: '返沪方式', required: true, value: 'backVehicle', titleClass: 'title', type: 'radio', opts: [{ value: '火车', label: '火车 ' }, { value: '飞机', label: '飞机' }, { value: '客车', label: '客车' }, { value: '自驾', label: '自驾' }], show: ['26'], showValue: ['火车', '飞机'], num: 25, hidden: true, }, { label: '返沪车次/航班', required: true, value: 'backVehicleNum', titleClass: 'title', placeholder: '请输入', type: 'input', num: 26, hidden: true, }, { label: '返沪到达日期', required: true, value: 'backReachedDate', titleClass: 'title', type: 'date', num: 27, hidden: true, }, { label: '返沪同行者姓名(没有填无)', required: true, value: 'backDependentNames', titleClass: 'title', placeholder: '请输入', type: 'input', num: 28, hidden: true, }, { label: '返沪同行者联系方式(没有填无)', required: true, value: 'backDependentPhones', titleClass: 'title', placeholder: '请输入', type: 'input', num: 29, hidden: true, }, ], form: {}, formMat: {} } }, onLoad(option) { // 获取信息 this.$http.get(`/sict-ncov/report/daily`).then(res => { const d = res.data if (d.code == 1) { this.isRead = true const data = d.object || {} this.form = data // 赋值 for (let k in data) { const val = data[k] if (val) { const item = this.list.find(child => child.value == k) if (item) { this.showChange({ value: val }, item) if (item.type == "pickerMore") { item.opts.forEach(opt => { val.split(',').forEach(v => { if (v === opt.value) { this.$set(opt, 'checked', true) } }) }) } if (item.type == "picker") { item.opts.forEach(opt => { if (opt.value == val) { this.formMat[k] = opt.label } }) } } } } } }) }, methods: { // 更新复选框绑定的表单内容 checkboxChange(index, obj, item) { const checkList = item.opts const prop = item.value for (let i = 0, lenI = checkList.length; i < lenI; ++i) { if (index == i) { this.$set(checkList[i], 'checked', !checkList[i].checked) } } // 处理以上均无情况 const nullList = ['无上述情况', '以上均无'] if (nullList.includes(obj.label)) { for (var i = 0, lenI = checkList.length; i < lenI; ++i) { this.$set(checkList[i], 'checked', false) } this.$set(checkList[checkList.length - 1], 'checked', true) this.form[prop] = obj.value } else { this.$set(checkList[checkList.length - 1], 'checked', false) const values = [] for (var i = 0, lenI = checkList.length; i < lenI; ++i) { if (checkList[i].checked) { values.push(checkList[i].value) } } this.form[prop] = values.join(',') } }, radioChange(val, prop) { this.$set(this.form, prop, val) this.isShowChild() }, // 隐藏/显示 showChange(evt, item) { const prop = item.value const type = item.type if (type === 'radio') { const val = evt.value || evt.target.value this.$set(this.form, prop, val) for (let i = 0; i < this.list.length; i++) { const current = this.list[i] if (current.value == prop && current.show) { current.show.forEach(child => { this.list.forEach(row => { if (child == row.num) { this.$set(row, 'hidden', !current.showValue.includes(String(val))) } }) }) break } } } // 复选框展示和隐藏 if (type === 'pickerMore') { let val = evt.value || evt.detail.value; const showList = item.showList if (showList && showList.length > 0) { showList.forEach(item => { item.show.forEach(child => { this.list.forEach(row => { if (child == row.num) { item.value.split(',').some( v =>{ if(val.includes(v)) { this.$set(row, 'hidden', false) return true console.log(child) }else { this.$set(row, 'hidden', true) return false } }) } }) }) }) } } if (type === 'picker') { let val = evt.value || item.opts[evt.detail.value].value; for (let i = 0; i < this.list.length; i++) { const current = this.list[i] if (current.value == prop && current.show) { current.show.forEach(child => { this.list.forEach(row => { if (child == row.num) { this.$set(row, 'hidden', !current.showValue.includes(val)) } }) }) break } } } }, isShowChild() { this.list[10].hidden = this.form['returnToWork'] == 'a' }, Switch(e, prop) { this.form[prop] = e.detail.value }, // 更新输入框绑定的表单内容 updateInputVal(event, props) { this.form[props] = event.target.value }, // 更新下拉框绑定的表单内容 updatePickerVal(event, item) { const opts = item.opts const prop = item.value const val = event.detail.value if (!opts) { this.$set(this.form, prop, val) return } this.$set(this.form, prop, opts[val].value) this.$set(this.formMat, prop, opts[val].label) if (item.show) { this.showChange(event, item) } }, // 提交信息 formSubmit() { let flag = true let msg = '' for (let i = 0; i < this.list.length; i++) { if (this.list[i].required) { const val = this.form[this.list[i].value] if (val !== 0 && !val && !this.list[i].hidden && this.list[i].required) { flag = false uni.showToast({ icon: 'none', title: `${this.list[i].label }未填写` }) break } if (!flag) { break } } } if (!flag) { return false } else { const data = {} for (let k in this.form) { if (this.form[k] || this.form[k] === 0) { data[k] = this.form[k] } } this.$http.post(`/sict-ncov/report/daily`, data).then(res => { const d = res.data if (d.code == 1) { uni.reLaunch({ url: '/pages/index/index', }); uni.showToast({ icon: 'success', title: '提交成功' }) } else { uni.showToast({ icon: 'none', title: d.message }) } }).catch(err => { console.log(err) }) } } } } </script> <style lang="scss" scoped> .sict-title { padding: 20upx 0; padding-right: 20upx; word-break: break-all; text-align: justify } .sict-label { background-color: white; font-size: 30upx; text-align: justify; } .sict-value { margin-top: 15upx; .right { margin-left: 10upx; vertical-align: bottom; } .label { // display: inline-block; text-align: left; padding: 20upx 0; padding-left: 30upx; border-bottom: 2upx solid #d3d3d3; &:last-child { border-bottom: 0; } } } uni-radio-group { border: 2upx solid #d3d3d3; border-radius: 8upx; margin-left: 20upx; display: block; } radio-group { border: 2upx solid #d3d3d3; border-radius: 8upx; margin-left: 20upx; display: block; } .icon-right { font-family: cuIcon; font-size: 34upx; color: #8799a3; line-height: 100upx; width: 60upx; text-align: right; margin: auto; } .uni-list-cell { .list-item { border-bottom: 2upx solid #d3d3d3; padding: 20upx 0; padding-left: 30upx; } &:last-child { .list-item { border-bottom: 0; } } } .uni-list { margin-left: 20upx; border: 2upx solid #d3d3d3; border-radius: 8upx; } </style> <style> .questionnaire .uni-collapse-cell__title:after { border-bottom: 0 !important; } </style>