<template>
|
<div class="quest">
|
<v-header
|
title="问卷调查"
|
search
|
:bar="bar"
|
@on-search="onSearch"
|
></v-header>
|
<div class="add">
|
<el-button
|
type="primary"
|
size="small"
|
@click.stop="$router.push('/act_quest_add')"
|
>新增</el-button
|
>
|
</div>
|
|
<div class="tab">
|
<el-tabs v-model="activeName" @tab-click="tablehandleClick">
|
<!-- 列表 -->
|
<el-tab-pane label="列表" class="custom-h" name="first">
|
<v-tool-table :trs="trs" :tds="tds">
|
<template v-slot:btn="{ scope }">
|
<div class="table_flex">
|
<p v-if="scope.state == 1">
|
<span @click="research(scope, 3)">发布</span>
|
<span @click.stop="$router.push('act_quest_add/' + scope.id)"
|
>编辑</span
|
><br />
|
<span @click="deletes(scope.id)">删除</span>
|
<span
|
@click="$router.push('act_quest_add/' + scope.id + '/c')"
|
>复制</span
|
>
|
</p>
|
<p v-if="scope.state == 2">
|
<span
|
@click="$router.push('act_quest_add/' + scope.id + '/c')"
|
>复制</span
|
>
|
<span @click="research(scope, 1)" class="stop">停止调研</span>
|
<span @click="Summary(scope.id)">查看统计</span><br />
|
<span @click="exportT(scope.id)">导出统计表</span>
|
<span @click="exportdetailed(scope.id)">导出填报明细</span>
|
<span @click="deletes(scope.id)">删除</span>
|
</p>
|
<p v-if="scope.state == 3">
|
<span
|
@click="$router.push('act_quest_add/' + scope.id + '/c')"
|
>复制</span
|
>
|
<span @click="research(scope, 2)" class="agin">继续调研</span>
|
<span @click="Summary(scope.id)">查看统计</span><br />
|
<span @click="exportT(scope.id)">导出统计表</span>
|
<span @click="exportdetailed(scope.id)">导出填报明细</span>
|
<span @click="deletes(scope.id)">删除</span>
|
</p>
|
</div>
|
</template>
|
<template v-slot:status="{ scope }">
|
<span v-if="scope.state == '1'">待发布</span>
|
<span v-if="scope.state == '2'">调研中</span>
|
<span v-if="scope.state == '3'">已结束</span>
|
</template>
|
</v-tool-table>
|
</el-tab-pane>
|
<!-- 卡片 -->
|
<el-tab-pane label="卡片" class="custom-h" name="second">
|
<div class="card-content" v-for="(item, index) in tds" :key="index">
|
<div class="title">{{ item.title }}</div>
|
<div class="icon" v-if="item.isCover == '1'">
|
<img src="../../../assets/image/card.png" />
|
</div>
|
<div class="icon" v-if="item.isCover == '2'">
|
<img src="../../../assets/image/empty.png" />
|
</div>
|
<div class="text-details">
|
<span class="left">
|
<span><i class="el-icon-edit"></i>{{ item.count }}项</span>
|
<span><i class="el-icon-view"></i>{{ item.viewNum }}万次</span>
|
<span
|
><i class="el-icon-shopping-bag-2"></i>{{ item.joinCount }}份
|
</span>
|
</span>
|
<span class="right">
|
<el-button v-if="item.state == '1'" type="success" size="mini"
|
>待发布</el-button
|
>
|
<el-button v-if="item.state == '2'" type="primary" size="mini"
|
>调研中</el-button
|
>
|
<el-button v-if="item.state == '3'" type="danger" size="mini"
|
>已结束</el-button
|
>
|
</span>
|
</div>
|
<div class="hover-box">
|
<div>
|
<p v-if="item.state == 1">
|
<span @click="research(item, 3)">发布</span>
|
<span @click.stop="$router.push('act_quest_add/' + item.id)"
|
>编辑</span
|
><br />
|
<span @click="deletes(item.id)">删除</span>
|
<span @click="$router.push('act_quest_add/' + item.id + '/c')"
|
>复制</span
|
>
|
</p>
|
<p v-if="item.state == 2">
|
<span @click="$router.push('act_quest_add/' + item.id + '/c')"
|
>复制</span
|
>
|
<span @click="research(item, 1)" class="stop">停止调研</span>
|
<span @click="Summary(item.id)">查看统计</span><br />
|
<span @click="exportT(item.id)">导出统计表</span>
|
<span @click="exportdetailed(item.id)">导出填报明细</span>
|
<span @click="deletes(scope.id)">删除</span>
|
</p>
|
<p v-if="item.state == 3">
|
<span @click="$router.push('act_quest_add/' + item.id + '/c')"
|
>复制</span
|
>
|
<span @click="research(item, 2)" class="agin">继续调研</span>
|
<span @click="Summary(item.id)">查看统计</span><br />
|
<span @click="exportT(item.id)">导出统计表</span>
|
<span @click="exportdetailed(item.id)">导出填报明细</span>
|
<span @click="deletes(scope.id)">删除</span>
|
</p>
|
</div>
|
</div>
|
</div>
|
<div class="card-content kong"></div>
|
<div class="card-content kong"></div>
|
<div class="card-content kong"></div>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
<div class="model-data" v-if="dialogVisible">
|
<div class="choosetime">
|
<span>选择时间：</span>
|
<el-date-picker
|
v-model="endTime"
|
type="datetime"
|
:picker-options="pickerOptions0"
|
value-format="yyyy-MM-dd HH:MM:SS"
|
placeholder="选择日期时间"
|
>
|
</el-date-picker>
|
</div>
|
<div class="footer">
|
<el-button
|
type="primary"
|
plain
|
size="mini"
|
@click="dialogVisible = false"
|
>取消</el-button
|
>
|
<el-button type="primary" size="mini" @click="shure">确认</el-button>
|
</div>
|
</div>
|
|
<!-- 分页 -->
|
<div class="page">
|
<el-pagination
|
:current-page="paginationParams.currentPage"
|
:page-size="paginationParams.pageSize"
|
:page-sizes="[5, 10, 20, 50, 100]"
|
background
|
layout="total,prev,pager,next,sizes,jumper"
|
:total="paginationParams.total"
|
@size-change="onPageSizeChange"
|
@current-change="onPaginationChange"
|
>
|
</el-pagination>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { mapState } from "vuex";
|
export default {
|
props: {},
|
components: {},
|
data() {
|
return {
|
activeName: "first",
|
bar: [
|
{ title: "关键词", name: "title" },
|
{
|
title: "状态",
|
name: "state",
|
type: "checkout",
|
sub_key: "checkout",
|
list: [
|
{ value: 2, label: "调研中" },
|
{ value: 3, label: "已结束" },
|
{ value: 1, label: "待发布" }
|
]
|
},
|
// {
|
// title: "广告",
|
// name: "advertPosition",
|
// type: "select",
|
// list: [
|
// { value: '', label: "全部" },
|
// { value: 2, label: "首页顶部" },
|
// { value: 1, label: "首页弹窗" },
|
// { value: 3, label: "首页应用" },
|
// ],
|
// },
|
{
|
title: "调研对象",
|
name: "identity",
|
type: "select",
|
list: [
|
{ value: 1, label: "全部居民" },
|
{ value: 3, label: "志愿者" },
|
{ value: 2, label: "党员" }
|
]
|
},
|
{ title: "发布时间", name: "time", type: "times" }
|
],
|
trs: [
|
{ text: "序号", val: "index" },
|
{ text: "ID", val: "id" },
|
{ text: "问卷调查主题", val: "title" },
|
{ text: "浏览量", val: "viewNum" },
|
{ text: "填报量", val: "joinCount" },
|
{ text: "调研对象", val: "identity" },
|
// { text: "广告", val: "advertPosition"},
|
{ text: "创建时间", val: "createAt" },
|
{ text: "开始时间", val: "startTime" },
|
{ text: "结束时间", val: "endTime" },
|
{ text: "状态", val: "btn", slot: "status" },
|
{ text: "操作", val: "btn", slot: "btn", width: "250px" }
|
],
|
tds: [],
|
|
/** 分页参数 */
|
paginationParams: {
|
currentPage: 1,
|
pageSize: 10,
|
total: 0
|
},
|
|
os: {},
|
search: {},
|
newSearch: {},
|
checkList: [],
|
params: {},
|
message: "",
|
dialogVisible: false,
|
endTime: "",
|
goid: "",
|
pickerOptions0: {
|
disabledDate(time) {
|
return time.getTime() < Date.now() - 8.64e7;
|
}
|
}
|
};
|
},
|
|
mounted() {
|
this.init();
|
},
|
|
methods: {
|
/** pageSize 改变时会触发 */
|
onPageSizeChange(pageSize) {
|
this.paginationParams.pageSize = pageSize;
|
this.init();
|
},
|
/** 分页 */
|
onPaginationChange(page) {
|
this.paginationParams.currentPage = page;
|
this.init();
|
},
|
|
// 搜索
|
onSearch(v) {
|
if (v.time && v.time.length && v.time[1]) {
|
v.startTime = v.time[0];
|
v.endTime = v.time[1];
|
} else {
|
v.startTime = "";
|
v.endTime = "";
|
}
|
this.search = {
|
advertPosition: v.advertPosition,
|
communityId: 0,
|
endTime: v.endTime,
|
forMasses: true,
|
forParty: true,
|
forVolunteer: true,
|
identity: v.identity,
|
startTime: v.startTime,
|
states: v.checkout,
|
title: v.title,
|
userId: 0
|
};
|
|
this.paginationParams.currentPage = 1;
|
this.init();
|
},
|
|
//表单内容切换
|
tablehandleClick(tab, event) {
|
this.dialogVisible = false;
|
this.paginationParams.currentPage = 1;
|
this.init();
|
},
|
|
// 获取数据
|
init() {
|
let v = demo.copy(
|
Object.assign(this.search, {
|
pageNum: this.paginationParams.currentPage,
|
pageSize: this.paginationParams.pageSize
|
})
|
);
|
|
this.$api.post("questnaire/page", v, e => {
|
this.paginationParams.total = e.total;
|
this.tds = e.records || [];
|
this.tds.map((item, index) => {
|
item.index =
|
(this.paginationParams.currentPage - 1) *
|
this.paginationParams.pageSize +
|
index +
|
1;
|
});
|
});
|
},
|
|
research(data, type) {
|
// 停止调研
|
if (type == 1) {
|
this.params = {
|
endTime: "",
|
questId: data.id,
|
type: 2
|
};
|
this.$api.post("questnaire/toggle", this.params, e => {
|
demo.toast("停止调研成功");
|
this.init();
|
});
|
}
|
//继续调研
|
if (type == 2) {
|
this.dialogVisible = true;
|
this.goid = data.id;
|
}
|
//发布
|
if (type == 3) {
|
this.params = {
|
endTime: "",
|
questId: data.id,
|
type: 3
|
};
|
this.$confirm("确定要发布该问卷调查吗？发布后将无法进行修改?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
}).then(() => {
|
this.$api.post("questnaire/toggle", this.params, e => {
|
demo.toast("发布成功");
|
this.init();
|
});
|
});
|
}
|
},
|
|
shure() {
|
if (!this.endTime) {
|
return demo.toast("请选择继续调研时间");
|
}
|
this.params = {
|
endTime: this.endTime,
|
questId: this.goid,
|
type: 1
|
};
|
|
this.$api.post("questnaire/toggle", this.params, e => {
|
demo.toast("继续调研成功");
|
this.dialogVisible = false;
|
this.init();
|
});
|
},
|
|
//删除
|
deletes(id) {
|
this.$confirm("确定要删除该问卷调查吗？删除后将无法恢复?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
}).then(() => {
|
this.$api.get("questnaire/delete", { questId: id }, e => {
|
demo.toast("删除成功");
|
this.init();
|
});
|
});
|
},
|
|
//统计汇总
|
Summary(id) {
|
this.$router.push({
|
path: "/act_quest_statistics",
|
query: { id: id }
|
});
|
},
|
|
exportT(id) {
|
this.$api.get(
|
"questnaire/statistics/summary/export",
|
{ questId: id },
|
e => {
|
window.location.href = e;
|
}
|
);
|
},
|
|
exportdetailed(id) {
|
this.$api.get("questnaire/export", { questId: id }, e => {
|
window.location.href = e;
|
});
|
}
|
}
|
};
|
</script>
|
<style lang="less" scoped>
|
.model-data {
|
position: absolute;
|
z-index: 2000;
|
left: 50%;
|
top: 50%;
|
width: 322px;
|
height: 80px;
|
padding: 15px;
|
margin-left: -150px;
|
margin-top: -40px;
|
background-color: #fff;
|
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
|
border-radius: 4px;
|
border: 1px solid #ebeef5;
|
span {
|
font-size: 13px;
|
}
|
.footer {
|
width: 100%;
|
text-align: right;
|
padding-top: 15px;
|
}
|
}
|
.choosetime {
|
text-align: center;
|
}
|
.quest {
|
overflow-y: auto;
|
.tab,
|
.add {
|
margin-bottom: 10px;
|
}
|
.custom-h {
|
min-height: 500px;
|
display: flex;
|
justify-content: space-evenly;
|
flex-flow: wrap;
|
padding-bottom: 20px;
|
padding: 0px 14px 20px 14px;
|
// .stop {
|
// color:#F56C6C !important;
|
// }
|
// .agin {
|
// color:#E6A23C !important;
|
// }
|
}
|
.kong {
|
opacity: 0;
|
height: 2px !important;
|
}
|
.card-content {
|
width: 350px;
|
height: 190px;
|
padding: 10px 15px;
|
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
position: relative;
|
margin-top: 15px;
|
cursor: pointer;
|
.title {
|
width: 100%;
|
color: #333;
|
font-size: 14px;
|
line-height: 25px;
|
height: 50px;
|
text-overflow: -o-ellipsis-lastline;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
display: -webkit-box;
|
-webkit-line-clamp: 2;
|
line-clamp: 2;
|
-webkit-box-orient: vertical;
|
}
|
.icon {
|
width: 100%;
|
height: 100px;
|
}
|
.text-details {
|
color: #888;
|
font-size: 13px;
|
padding-top: 10px;
|
line-height: 28px;
|
height: 28px;
|
.left {
|
float: left;
|
span {
|
margin-right: 10px;
|
i {
|
margin-right: 5px;
|
}
|
}
|
}
|
.right {
|
float: right;
|
}
|
}
|
.hover-box {
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
z-index: 2;
|
background-color: rgba(0, 0, 0, 0.6);
|
left: 0;
|
top: 0;
|
color: #fff;
|
text-align: center;
|
transition: visibility 0.5s, opacity 0.5s;
|
visibility: hidden;
|
opacity: 0;
|
div {
|
padding-top: 50px;
|
p {
|
padding-bottom: 10px;
|
width: 270px;
|
margin: auto;
|
span {
|
margin-right: 10px;
|
margin-bottom: 10px;
|
display: inline-block;
|
}
|
span:hover {
|
color: #409eff;
|
text-decoration: underline;
|
}
|
}
|
}
|
}
|
}
|
.card-content:hover .hover-box {
|
visibility: visible;
|
opacity: 1;
|
}
|
}
|
.page {
|
padding: 20px 0;
|
text-align: center;
|
}
|
</style>
|
