<template>
|
<div class="demography">
|
<div hidden>{{goLangType}}</div>
|
<el-form :model="demographyMenber" ref="demographyMenber" label-width="25%" style="padding: 4%">
|
<h2 class="align-center">{{$t('demography')}}</h2>
|
<el-row :key="index" v-for="(item, index) in demographyMenber.data">
|
<div v-if="item.types== 'text' && item.isRequired=='1'">
|
<el-form-item :label="item.paramName"
|
:prop="'data.'+index+'.paramValue'"
|
:rules="[{ required: true, message: $t('required'),trigger: 'change'},{max: 200, message: $t('range32'), trigger: 'change'}]">
|
<el-input v-model="item.paramValue"></el-input>
|
</el-form-item>
|
</div>
|
<div v-if="item.types== 'text' && item.isRequired !='1'">
|
<el-form-item :label="item.paramName">
|
<el-input v-model="item.paramValue"></el-input>
|
</el-form-item>
|
</div>
|
<div v-if="item.types=='radio' && item.isRequired=='1'">
|
<el-form-item :label="item.paramName"
|
:prop="'data.'+index+'.paramValue'"
|
:rules="[{ required: true, message: $t('required'),trigger: 'change'}]">
|
<el-radio-group v-model="item.paramValue">
|
<el-radio v-for="(itemIter, index) in item.dictData" :key="index" :label="itemIter.dictLabel">
|
<span class="question-prefix">{{itemIter.dictLabel}}</span>
|
</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</div>
|
<div v-if="item.types=='radio' && item.isRequired !='1'">
|
<el-form-item :label="item.paramName">
|
<el-radio-group v-model="item.paramValue">
|
<el-radio v-for="(itemIter, index) in item.dictData" :key="index" :label="itemIter.dictLabel">
|
<span class="question-prefix">{{itemIter.dictLabel}}</span>
|
</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</div>
|
<div v-if="item.types=='date' && item.isRequired =='1'">
|
<el-form-item :label="item.paramName"
|
:prop="'data.'+index+'.paramValue'"
|
:rules="[{ required: true, message: $t('required'),trigger: 'change'}]">
|
<el-col>
|
<el-date-picker type="date" :placeholder="$t('selectData')" v-model="item.paramValue"
|
style="width: 100%;"></el-date-picker>
|
</el-col>
|
</el-form-item>
|
</div>
|
<div v-if="item.types=='date' && item.isRequired !='1'">
|
<el-form-item :label="item.paramName">
|
<el-col>
|
<el-date-picker type="date" :placeholder="$t('selectData')" v-model="item.paramValue"
|
style="width: 100%;"></el-date-picker>
|
</el-col>
|
</el-form-item>
|
</div>
|
<div v-if="item.types=='select' && item.isRequired =='1'">
|
<el-form-item :label="item.paramName"
|
:rules="[{ required: true, message: $t('required'),trigger: 'change'}]">
|
<el-select v-model="item.paramValue" :placeholder= "$t('pleaseSelect')">
|
<el-option
|
v-for="itemIter in item.dictData"
|
:key="itemIter.dictValue"
|
:label="itemIter.dictLabel"
|
:value="itemIter.dictValue">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</div>
|
<div v-if="item.types=='select' && item.isRequired !='1'">
|
<el-form-item :label="item.paramName">
|
<el-select v-model="item.paramValue" :placeholder= "$t('pleaseSelect')">
|
<el-option
|
v-for="itemIter in item.dictData"
|
:key="itemIter.dictValue"
|
:label="itemIter.dictLabel"
|
:value="itemIter.dictValue">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</div>
|
<div v-else></div>
|
</el-row>
|
<el-row class="do-align-center">
|
<el-button @click="submitDemography" type="danger" :disabled="submitDisable">{{$t('submission')}}</el-button>
|
</el-row>
|
</el-form>
|
</div>
|
</template>
|
|
<script>
|
import demographyApi from '@/api/demography'
|
import { mapMutations, mapState } from 'vuex'
|
import examPaperApi from '@/api/examPaper'
|
|
// import QuestionEdit from "./childCompoment/QuestionEdit";
|
|
export default {
|
// components: { QuestionEdit },
|
data () {
|
return {
|
demographyMenber: { data: [] },
|
productId: 0,
|
paramsInfo: {},
|
parasInfos: [],
|
parasInfoIds: {},
|
formDo: {},
|
submitDisable: false,
|
isStart: this.$route.query.isStart === 'true'
|
}
|
},
|
created () {
|
},
|
methods: {
|
submitDemography: function () {
|
let _this = this
|
_this.submitDisable = true
|
this.$refs.demographyMenber.validate(vaild => {
|
if (vaild) {
|
_this.parasInfos = []
|
for (let i = 0; i < this.demographyMenber.data.length; i++) {
|
let _paramsInfo = {}
|
if (_this.parasInfoIds[_this.demographyMenber.data[i].paramId] !== undefined) {
|
_paramsInfo.infoId = _this.parasInfoIds[_this.demographyMenber.data[i].paramId].infoId
|
}
|
_paramsInfo.userId = _this.demographyMenber.data[i].userId
|
_paramsInfo.memberId = _this.demographyMenber.data[i].memberId
|
_paramsInfo.paramId = _this.demographyMenber.data[i].paramId
|
_paramsInfo.paramName = _this.demographyMenber.data[i].paramName
|
_paramsInfo.paramValue = _this.demographyMenber.data[i].paramValue
|
if (_paramsInfo.paramValue.trim() === '') {
|
continue
|
}
|
_this.parasInfos.push(_paramsInfo)
|
}
|
demographyApi.submitDemography(_this.memberToken, _this.langType, _this.parasInfos).then(function (result) {
|
if (result && result.code === 1) {
|
examPaperApi.select(_this.memberToken, _this.langType).then(re => {
|
_this.formDo = re.response
|
_this.setDoUrl(re.response.questionTemplateId)
|
if (_this.isStart) {
|
_this.$router.push({ path: '/exam/' + _this.doUrl })
|
return
|
}
|
_this.$router.push({ path: '/guide/index', query: { formDo: _this.formDo } });
|
}).catch(e => {
|
_this.$message.error(_this.$t('noquestionMsg'))
|
})
|
} else {
|
_this.$message.error(result.message + 'submitDemography')
|
}
|
}).catch(e => {
|
_this.$message.error(_this.$t('questionExceptionMsg'))
|
})
|
} else {
|
this.$message.error(_this.$t('requiredMsg'))
|
_this.submitDisable = false
|
}
|
})
|
},
|
createDemography: function () {
|
let _this = this
|
demographyApi.demography(_this.memberToken, _this.langType).then(re => {
|
for (let i = 0; i < re.response.length; i++) {
|
if (re.response[i].paramValue === null) {
|
re.response[i].paramValue = ''
|
}
|
}
|
_this.demographyMenber.data = re.response
|
demographyApi.queryDemographyParamInfo(_this.memberToken).then(
|
re => {
|
if (re.code !== 1) {
|
return
|
}
|
for (let i = 0; i < re.response.length; i++) {
|
_this.parasInfoIds[re.response[i].paramId] = re.response[i]
|
}
|
for (let i = 0; i < _this.demographyMenber.data.length; i++) {
|
if (_this.parasInfoIds[_this.demographyMenber.data[i].paramId] !== undefined) {
|
_this.demographyMenber.data[i].paramValue = _this.parasInfoIds[_this.demographyMenber.data[i].paramId].paramValue
|
}
|
}
|
}
|
).catch(e => {
|
})
|
}).catch(e => {
|
_this.$message.error(_this.$t('userinfoErro'))
|
})
|
},
|
...mapMutations('user', ['setMemberTocken']),
|
...mapMutations('exam', ['setDoUrl'])
|
},
|
computed: {
|
...mapState('user', { memberToken: state => state.memberToken }),
|
...mapState('exam', { doUrl: state => state.doUrl }),
|
...mapState('user', { langType: state => state.langType }),
|
goLangType: function () {
|
// `this` 指向 vm 实例
|
let _this = this
|
_this.createDemography()
|
return _this.langType
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.demography {
|
width: 90%;
|
margin: 0 auto;
|
margin-top: 5%;
|
}
|
|
.align-center {
|
text-align: center
|
}
|
</style>
|
