<template>
|
<div class="quest_add">
|
<!-- <v-header title="问卷调查"></v-header> -->
|
<div class="nav-title">
|
<div class="left-tab">
|
<span :class="tabIndex==index ? 'active' : ''" v-for="(item , index) in tabList" :key="index" @click="tabClick(index)">{{item.text}}</span>
|
</div>
|
<div class="right-tab">
|
<el-button @click="cancel">关闭</el-button>
|
<el-button type="primary" plain @click="releaseMsg()">发布</el-button>
|
<el-button type="primary" @click="save">保存</el-button>
|
</div>
|
</div>
|
<!-- 基础信息 -->
|
<el-form v-if="isShowadd" ref="msgform" :model="msgform" label-width="110px">
|
<el-form-item label="问卷调查主题" class="title">
|
<el-input class="custom-input" v-model="msgform.title" placeholder="请输入主题，不超过25字" maxlength="25" show-word-limit></el-input>
|
</el-form-item>
|
<el-form-item label="调研时间" class="time">
|
<el-date-picker
|
v-model="msgform.time"
|
type="daterange"
|
range-separator="至"
|
format="yyyy-MM-dd"
|
:default-time="['00:00:00', '23:59:59']"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item label="调研对象">
|
<el-radio-group v-model="msgform.identity">
|
<el-radio
|
v-for="item in residentCheck"
|
:key="item.value"
|
:label="item.value"
|
:disabled="item.value !== 1 && isCheckdisabled"
|
>{{item.label}}</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<!-- <el-form-item label="广告设置" class="guangg">
|
<el-checkbox-group v-model="msgform.type" @change="advertisementChange">
|
<span class="banner-list">
|
<el-checkbox :label="1" name="type">首页弹窗</el-checkbox>
|
<p>
|
<viewer>
|
<img src="../../../assets/image/tanc.png">
|
</viewer>
|
</p>
|
</span>
|
<span class="banner-list">
|
<el-checkbox :label="2" name="type">首页顶部</el-checkbox>
|
<p><viewer><img src="../../../assets/image/banner.png"></viewer></p>
|
</span>
|
<span class="banner-list">
|
<el-checkbox :label="3" name="type">首页应用</el-checkbox>
|
<p><viewer><img src="../../../assets/image/db.png"></viewer></p>
|
</span>
|
<span class="banner-list">
|
<el-checkbox :label="4" name="type">设置封面</el-checkbox>
|
<p><viewer><img src="../../../assets/image/fengm.png"></viewer></p>
|
</span>
|
</el-checkbox-group>
|
</el-form-item> -->
|
|
<el-form-item label="强制调研" v-if="isForceShow">
|
<el-radio-group v-model="msgform.isForce">
|
<el-radio :label="1">是</el-radio>
|
<el-radio :label="2">否</el-radio>
|
</el-radio-group>
|
<p class="alert-text">解释说明：如果确定强制调研，那么用户每次进入小程序时都会提醒去填写问卷调查，如果不强制调研，那么用户可以选择不再接受该弹窗提醒。</p>
|
</el-form-item>
|
|
<!-- <el-form-item label="应用名称" :class="isremark ? 'guangg' :''">
|
<el-input class="custom-input" v-model="msgform.remark" placeholder="不超过4个字" maxlength="4" show-word-limit></el-input>
|
</el-form-item> -->
|
</el-form>
|
|
<!-- 问卷内容 -->
|
<div class="form-box" v-show="isShowFrom">
|
<home ref="forms" @run="run" :list="list"></home>
|
<!-- <fc-designer ref="designer"/>-->
|
</div>
|
</div>
|
</template>
|
|
<script>
|
|
import home from "../../form/Home";
|
|
export default {
|
components:{ home },
|
|
data() {
|
return{
|
btnLoading:false,
|
msgform:{
|
time: [],
|
title:"",
|
identity:1,
|
type:[],
|
remark:'',
|
isForce:2,
|
},
|
residentCheck:[
|
{
|
value: 1,
|
label:"全部居民"
|
},
|
{
|
value: 2,
|
label:"党员"
|
},
|
{
|
value: 3,
|
label:"志愿者"
|
},
|
],
|
isCheckdisabled:false,
|
tabList:[
|
{
|
id:1,
|
text:"基础信息"
|
},
|
{
|
id:1,
|
text:"问卷内容"
|
}
|
],
|
tabIndex:"0",
|
isShowFrom: false,
|
isShowadd: true,
|
fromData:[],
|
list:[],
|
isForceShow:false,
|
isremark:false,
|
isFabu:false,
|
}
|
},
|
|
created() {
|
this.list = [
|
{
|
type:0,
|
label:'单选框组',
|
required:false,
|
options:[{label:'选项一1',value:''},{label:'选项二1',value:''}]
|
},
|
]
|
},
|
|
mounted() {
|
if(this.$route.params.id && !this.$route.params.info) {
|
console.log("我是编辑")
|
let val = this.$route.params.id;
|
this.getDetails(val)
|
}
|
|
if(this.$route.params.info) {
|
let val = this.$route.params.id;
|
this.isFabu = true;
|
this.getDetails(val)
|
console.log("我是复制")
|
}
|
},
|
|
methods: {
|
getDetails(id) {
|
this.$api.get("questnaire/view", {questId:id}, e => {
|
if (e) {
|
const arr = [];
|
this.msgform.title = e.title;
|
this.msgform.remark = e.remark;
|
this.msgform.isForce = +e.isForce;
|
this.msgform.time = [e.startTime, e.endTime];
|
this.list = JSON.parse(e.jsonObject);
|
|
if (+e.adverPositionApplication === 1) {
|
arr.push(3);
|
}
|
if (+e.adverPositionPopup === 1) {
|
arr.push(1);
|
}
|
if (+e.adverPositionTop === 1) {
|
arr.push(2);
|
}
|
if (+e.isCover === 1) {
|
arr.push(4);
|
}
|
this.msgform.type = arr;
|
}
|
});
|
},
|
|
onSubmit() {
|
|
const type = this.msgform.type;
|
let parmas = {
|
isForce: this.msgform.isForce,
|
adverPositionApplication: type.includes(3) ? 1 : 2,
|
adverPositionPopup: type.includes(1) ? 1 : 2,
|
adverPositionTop: type.includes(2) ? 1 : 2,
|
isCover: type.includes(4) ? 1 : 2,
|
remark: this.msgform.remark,
|
startTime: this.$$moment(this.msgform.time[0]).format('YYYY-MM-DD HH:mm:ss'),
|
endTime: this.$$moment(this.msgform.time[1]).format('YYYY-MM-DD HH:mm:ss'),
|
title: this.msgform.title,
|
identity: this.msgform.identity,
|
jsonObject: JSON.stringify(this.fromData),
|
isRelease:'2'
|
}
|
|
//编辑
|
if (this.$route.params.id && !this.$route.params.info) {
|
this.$api.post("questnaire/edit", {...parmas, id: this.$route.params.id}, (e) => {
|
demo.toast("修改成功");
|
setTimeout(() => {
|
this.$router.back();
|
}, 1e3);
|
});
|
};
|
|
/**新增 */
|
if(!this.$route.params.id && !this.$route.params.info) {
|
this.$api.post("questnaire/add", parmas, (e) => {
|
demo.toast("保存成功");
|
setTimeout(() => {
|
this.$router.back();
|
}, 1e3);
|
});
|
};
|
|
//复制
|
if(this.$route.params.id && this.$route.params.info) {
|
this.$api.post("questnaire/add", parmas, (e) => {
|
demo.toast("复制成功");
|
setTimeout(() => {
|
this.$router.back();
|
}, 1e3);
|
});
|
};
|
},
|
|
save() {
|
|
if(!this.msgform.title) {
|
return demo.toast("问卷调查主题必填！")
|
}
|
if(!this.msgform.time.length) {
|
return demo.toast("调研时间必选！")
|
}
|
// if(!this.msgform.type.length) {
|
// return demo.toast("广告设置必选！")
|
// }
|
// if(this.isremark && !this.msgform.remark) {
|
// return demo.toast("应用名称必填！")
|
// }
|
|
this.$refs.forms.run();
|
this.onSubmit()
|
},
|
|
run(e){
|
this.fromData = e;
|
},
|
|
/**
|
* 广告设置
|
* 1.选了应用就会让必须设置应用名称
|
*/
|
advertisementChange(val) {
|
// 包含首页弹窗
|
if (val.includes(1)) {
|
// this.msgform.isForce = 1;
|
this.isForceShow = true;
|
} else {
|
this.isForceShow = false;
|
}
|
//包含应用
|
this.isremark = val.includes(3);
|
},
|
|
|
tabClick(index) {
|
this.tabIndex = index;
|
if(index == '0') {
|
this.isShowFrom = false;
|
this.isShowadd = true;
|
}else {
|
this.isShowFrom = true;
|
this.isShowadd = false;
|
}
|
},
|
|
releaseMsg() {
|
|
if(!this.msgform.title) {
|
return demo.toast("问卷调查主题必填！")
|
}
|
if(!this.msgform.time.length) {
|
return demo.toast("调研时间必选！")
|
}
|
// if(!this.msgform.type.length) {
|
// return demo.toast("广告设置必选！")
|
// }
|
// if(this.isremark && !this.msgform.remark) {
|
// return demo.toast("应用名称必填！")
|
// }
|
|
this.$refs.forms.run();
|
this.$confirm('确认要发布吗？发布后将无法进行修改?', '温馨提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
|
const type = this.msgform.type;
|
let parmas = {
|
isRelease:'1',
|
isForce: this.msgform.isForce,
|
adverPositionApplication: type.includes(3) ? 1 : 2,
|
adverPositionPopup: type.includes(1) ? 1 : 2,
|
adverPositionTop: type.includes(2) ? 1 : 2,
|
isCover: type.includes(4) ? 1 : 2,
|
remark: this.msgform.remark,
|
startTime: this.$$moment(this.msgform.time[0]).format('YYYY-MM-DD HH:mm:ss'),
|
endTime: this.$$moment(this.msgform.time[1]).format('YYYY-MM-DD HH:mm:ss'),
|
title: this.msgform.title,
|
identity: this.msgform.identity,
|
jsonObject: JSON.stringify(this.fromData)
|
}
|
|
//编辑
|
if (this.$route.params.id && !this.$route.params.info) {
|
this.$api.post("questnaire/edit", {...parmas, id: this.$route.params.id}, (e) => {
|
demo.toast("修改成功");
|
setTimeout(() => {
|
this.$router.back();
|
}, 1e3);
|
});
|
return
|
};
|
|
this.$api.post("questnaire/add", parmas, (e) => {
|
demo.toast("处理成功");
|
setTimeout(() => {
|
this.$router.back();
|
}, 1e3);
|
});
|
|
}).catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消发布'
|
});
|
});
|
|
},
|
|
/**取消 */
|
cancel() {
|
this.$router.back();
|
},
|
|
},
|
|
};
|
</script>
|
<style lang="less" scoped>
|
.quest_add {
|
overflow-y: auto;
|
}
|
.form-box {
|
min-width: 1000px;
|
}
|
/deep/.el-form-item__label {
|
position: relative;
|
}
|
.title /deep/.el-form-item__label::after {
|
content: ' *';
|
color: #F56C6C;
|
font-size: 150%;
|
position: absolute;
|
left: 2px;
|
top: -3px;
|
}
|
.time /deep/.el-form-item__label::after {
|
content: ' *';
|
color: #F56C6C;
|
font-size: 150%;
|
position: absolute;
|
left: 29px;
|
top: -3px;
|
}
|
.guangg /deep/.el-form-item__label::after {
|
content: ' *';
|
color: #F56C6C;
|
font-size: 150%;
|
position: absolute;
|
left: 30px;
|
top: -3px;
|
}
|
.custom-input,.custom-input /deep/.el-input__inner {
|
width: 350px;
|
}
|
.alert-text {
|
font-size: 12px;
|
color: #888;
|
}
|
.nav-title {
|
width: 100%;
|
height: 50px;
|
line-height: 65px;
|
padding-bottom: 15px;
|
border-bottom: 1px #e6e6e6 solid;
|
margin-bottom: 30px;
|
.left-tab {
|
float: left;
|
span {
|
margin-right: 35px;
|
cursor: pointer;
|
color: #606266;
|
}
|
.active {
|
color: #409EFF;
|
font-size: 16px;
|
font-weight: 700;
|
}
|
}
|
.right-tab {
|
float:right;
|
}
|
}
|
.banner-list {
|
float: left;
|
display: inline-block;
|
margin-right: 15px;
|
img {
|
width: 100px;
|
height: 170px;
|
}
|
}
|
</style>
|
