1.回显页面的时候,数据渲染不出来,页面代码如下
<style>
</style>
<template>
<transition name="right-div">
<div class="right-div" v-if="divShow" :style="{height:divH+'px',width:'60%'}">
<p class="title">{{id?'编辑':'新增'}}调查问卷
<Button type="text" class="pull-right" @click="$parent.closeDiv()" icon="close"></Button>
</p>
<p class="content">
<Form ref="form" :model="form" :rules="rules" :label-width="80">
<Row>
<Col :span="12">
<FormItem label="问卷名称" prop="name">
<Input type="text" v-model="form.name"></Input>
</FormItem>
</Col>
<Col :span="12">
<FormItem label="状态">
<RadioGroup v-model="form.status">
<Radio label="1" true-value="1">激活</Radio>
<Radio label="0" true-value="0">禁用</Radio>
</RadioGroup>
</FormItem>
</Col>
</Row>
<Row>
<FormItem label="问卷描述" >
<Input type="textarea" :rows="2" v-model="form.remark"></Input>
</FormItem>
</Row>
<h2>配置问卷
<Button type="primary" size="small" icon="plus" class="pull-right"
@click="form.flupVoteTempTitleList.push({title:'',flupVoteTempQuestionList:[],show:true})">添加标题
</Button>
</h2>
<Card v-for="(voteTitle,index) in form.flupVoteTempTitleList">
<Row>
<Col :span="3">
<span>问卷标题{{index + 1}}:</span>
</Col>
<Col :span="10">
<Input type="text" v-model="voteTitle.title" size="small" :aria-required="true" error="请输入"></Input>
<div v-model="voteTitle.sortNum" size="small" :value="{index}">
</div>
</Col>
<Col :span="3">
<Button type="text" @click="voteTitle.flupVoteTempQuestionList.push({subject:'',flupVoteTempItemList:[],show:true})" class="red">
<Icon type="plus"></Icon>
添加题目
</Button>
</Col>
<Col :span="2">
<Button type="text" @click="form.flupVoteTempTitleList.splice(index,1)" class="red">
<Icon type="ios-trash-outline"></Icon>
删除
</Button>
</Col>
<Col :span="3">
<Button type="text" @click="voteTitle.show=(voteTitle.show==true)?false:true" class="red">
<span v-if="voteTitle.show==true">
<Icon type="chevron-up"></Icon>
收起
</span>
<span v-if="voteTitle.show==false">
<Icon type="chevron-down"></Icon>
显示
</span>
</Button>
</Col>
</Row>
<Card v-for="(voteQuestion,index) in voteTitle.flupVoteTempQuestionList" v-show="voteTitle.show">
<Row>
<Col :span="3">
<span v-model="voteQuestion.sortNum">问卷题目{{index + 1}}:</span>
</Col>
<Col :span="12">
<Input type="text" v-model="voteQuestion.subject" size="small"></Input>
<!--<div v-model="voteQuestion.val" size="small" :value="{index}"></div>-->
</Col>
<!--<Col span="2" style="text-align: center">-</Col>-->
<!--<Col :span="3">-->
<!--<Input type="text" v-model="voteQuestion.subject" size="small"></Input>-->
<!--</Col>-->
<Col :span="3">
<Button type="text" @click="voteTitle.flupVoteTempQuestionList.splice(index,1)" class="red">
<Icon type="ios-trash-outline"></Icon>
删除
</Button>
</Col>
</Row>
</Card>
</Card>
</Form>
</p>
<p class="bottom">
<Button type="primary" icon="archive" @click="handleSubmit" :disabled="disabled">保存</Button>
<Button type="ghost" style="margin-left: 8px" @click="handleReset">重置</Button>
<Button type="ghost" icon="close" @click="$parent.closeDiv()">关闭</Button>
</p>
</div>
</transition>
</template>
<script>
import http from '../../../api/http'
import Input from "iview/src/components/input/input";
var model = {
name:'',
status:'1',
remark:'',
flupVoteTempTitleList:[]};
export default {
components: {Input},
data() {
return {
disabled: false,
rules: {
name: [
{required: true, message: '请填写问卷模板名称'},
],
},
form: Object.assign({}, model),
divH:window.innerHeight-60
}
},
props: {
id: {type: String},
divShow: {type: Boolean, default: false}
},
methods: {
handleSubmit() {
this.$refs['form'].validate((valid) => {
if (valid) {
var vm = this;
vm.disabled = true;
http.postData(vm, "/flup/votetemp/save", {json: JSON.stringify(vm.form)}, function (resp) {
var ret = resp.body;
if (ret.code === '111') {
vm.$parent.onSubmit();
vm.$parent.closeDiv();
vm.form = Object.assign({}, model);
vm.$Message.info(ret.msg?ret.msg:'保存成功!')
}else{
vm.$Message.error(ret.msg?ret.msg:'保存失败!')
}
vm.disabled = false;
},function(e){
vm.disabled=false;
}
);
}
})
},
handleReset() {
this.$refs['form'].resetFields();
},
loadDetail() {
if (this.id != undefined && this.id != '') {
var vm = this;
http.postData(vm, "/flup/votetemp/detail/" + this.id, {}, function (resp) {
var ret = resp.body;
if (ret.code === '111') {
vm.form = ret.value;
var titleList = ret.value.flupVoteTempTitleList;
debugger;
for(var i=0;i < titleList.length;i++){
var questions = titleList[i].flupVoteTempQuestionList;
// ret.value.flupVoteTempTitleList[i].push({subject:'112',flupVoteTempItemList:[],show:true});
for (var j=0;j < questions.length;j++){
console.log(ret.value.flupVoteTempTitleList[i].flupVoteTempQuestionList[j]);
}
}
}
}
);
}
}
},
watch: {//检测数据
id(val) {
if (val&&this.divShow) {
this.loadDetail();
} else {
this.form = Object.assign({}, model);
}
},
},
created() {
}
}
</script>