<template>
|
<div class="quest_edit">
|
<v-header title="问卷调查"></v-header>
|
<div class="main">
|
<v-tool-scroll ids="quest-add-scroll">
|
<div class="list">
|
<p
|
class="label"
|
data-require
|
>问卷标题：</p>
|
<div class="box">
|
<input
|
type="text"
|
maxlength="35"
|
class="m_inp"
|
placeholder="填写问卷标题"
|
v-model="title"
|
>
|
</div>
|
</div>
|
<div class="list">
|
<p
|
class="label"
|
data-require
|
>问卷描述：</p>
|
<div class="box">
|
<textarea
|
maxlength="120"
|
cols="30"
|
rows="10"
|
class="m_inp"
|
placeholder="请填写问卷描述"
|
v-model="desc"
|
></textarea>
|
</div>
|
</div>
|
<div class="list">
|
<p
|
class="label"
|
data-require
|
>仅调研特殊对象：</p>
|
<div class="box pad">
|
<el-checkbox-group v-model="checkList">
|
<el-checkbox
|
:label="i.t"
|
v-for="(i,j) in change"
|
:key="j+'-check'"
|
disabled
|
></el-checkbox>
|
</el-checkbox-group>
|
</div>
|
</div>
|
<p class="err">提示：默认社区所有居民可参与调研，勾选后只针对所选群体开放问卷</p>
|
<ul>
|
<li
|
class="list"
|
v-for="(i,j) in item"
|
:key="j+'-li'"
|
>
|
<p class="label">{{j+1}}.题目：</p>
|
<div class="box">
|
<input
|
type="text"
|
class="m_inp small"
|
:placeholder="'填写题目['+upType(i.questSubVO.type)+']'"
|
v-model="i.questSubVO.content"
|
maxlength="100"
|
>
|
<div
|
class="l"
|
v-for="(x,y) in i.questSelectionList"
|
:key="y+'-li-c'"
|
>
|
<input
|
type="text"
|
class="m_inp"
|
:placeholder="x.type?'其他___':'选项'"
|
v-model="x.content"
|
maxlength="100"
|
>
|
</div>
|
</div>
|
</li>
|
</ul>
|
</v-tool-scroll>
|
</div>
|
<div class="foot">
|
<button
|
class="m_btn"
|
@click="$router.back()"
|
>取消</button>
|
<button
|
class="m_btn bgc_primary"
|
@click="onSubmit"
|
>编辑</button>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
props: {},
|
components: {},
|
data() {
|
return {
|
title: "",
|
desc: "",
|
item: [],
|
change: [
|
{ t: "社区党员", v: 1 },
|
{ t: "社区志愿者", v: 2 },
|
],
|
checkList: [],
|
head: {},
|
};
|
},
|
computed: {},
|
watch: {},
|
methods: {
|
upType(v) {
|
return ["单选", "多选", "填空"][v];
|
},
|
// 编辑 整合数据
|
onSubmit() {
|
let t = this;
|
if (!t.title) return demo.toast("请输入问卷标题");
|
if (!t.desc) return demo.toast("请输入问卷描述");
|
if (!t.item.length) return demo.toast("请添加题目");
|
let os = {
|
queTitle: t.title,
|
queDescribe: t.desc,
|
check: t.change.filter((r) => {
|
return t.checkList.indexOf(r.t) >= 0;
|
}),
|
questnaiteSubVOS: t.item.map((r) => {
|
let os = {
|
content: r.questSubVO.content,
|
queSubId: r.questSubVO.id,
|
questnaiteSubSelectionVOS: r.questSelectionList.map((v) => {
|
v.queSubSelectionId = v.id;
|
return v;
|
}),
|
sort: r.questSubVO.sort,
|
type: r.questSubVO.type,
|
};
|
return os;
|
}),
|
};
|
os.forVolunteer = os.check.indexOf(2) >= 0;
|
os.forParty = os.check.indexOf(1) >= 0;
|
os.forMasses = !os.forVolunteer && !os.forParty;
|
os.questId = this.$route.params.id;
|
delete os.check;
|
this.$api.post("questnaire/edit", os, (e) => {
|
demo.toast("编辑成功");
|
let tt = this;
|
setTimeout(() => {
|
tt.$router.back();
|
}, 1e3);
|
});
|
},
|
},
|
mounted() {
|
let user = demo.$session.get("user") || {};
|
this.$api.get(
|
"questnaire/answer/detail",
|
{ questId: this.$route.params.id, userId: user.id },
|
(e) => {
|
this.head = e.questnaire;
|
this.item = (e.usersSubAnswer || []).map((r) => {
|
r.questSubVO.value = "";
|
if (r.questSubVO.type === 1) {
|
r.questSubVO.value = [];
|
}
|
return r;
|
});
|
this.checkList = [];
|
if (!this.head.forMasses) {
|
if (this.head.forParty) {
|
this.checkList.push("社区党员");
|
}
|
if (this.head.forVolunteer) {
|
this.checkList.push("社区志愿者");
|
}
|
}
|
this.title = this.head.title;
|
this.desc = this.head.queDescribe;
|
/**
|
*
|
<!-- forMasses 居民 -->
|
<!-- forParty 党员 -->
|
<!-- forVolunteer 志愿者 -->
|
*/
|
}
|
);
|
},
|
};
|
</script>
|
<style lang="less">
|
.quest_edit {
|
position: relative;
|
.foot {
|
height: 50px;
|
box-sizing: border-box;
|
display: flex;
|
margin-top: 10px;
|
.m_btn {
|
margin-right: 10px;
|
min-width: 100px;
|
}
|
}
|
.main {
|
height: calc(100% - 110px);
|
}
|
.err {
|
font-size: 12px;
|
color: #ccc;
|
margin-bottom: 10px;
|
transform: translateY(-10px);
|
}
|
textarea.m_inp {
|
display: block;
|
width: 100% !important;
|
resize: none;
|
max-width: 100%;
|
}
|
.list {
|
position: relative;
|
display: flex;
|
margin-bottom: 12px;
|
.label {
|
width: 120px;
|
font-size: 15px;
|
line-height: 32px;
|
text-align: right;
|
}
|
.box {
|
max-width: 600px;
|
width: calc(100% - 120px);
|
&.pad {
|
padding-top: 6px;
|
}
|
.m_inp {
|
width: 100%;
|
}
|
.l {
|
border-bottom: 1px solid #eee;
|
position: relative;
|
.m_inp {
|
border: 0;
|
padding-right: 40px;
|
}
|
.del {
|
position: absolute;
|
right: 10px;
|
top: 0;
|
bottom: 0;
|
margin: auto;
|
width: 30px;
|
height: 30px;
|
text-align: center;
|
font-size: 20px;
|
line-height: 30px;
|
cursor: pointer;
|
color: #999;
|
&.dis {
|
color: #eee;
|
}
|
}
|
}
|
.a {
|
display: flex;
|
.r {
|
flex: 1;
|
text-align: right;
|
}
|
.m_btn + .m_btn {
|
margin-left: 8px;
|
}
|
}
|
.info {
|
color: #5bc0de;
|
}
|
.grey {
|
color: #999;
|
}
|
}
|
}
|
}
|
</style>
|
