<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">
|
<v-tool-table
|
:trs="trs"
|
:tds="tds"
|
>
|
<template v-slot:btn="item">
|
<div class="table_flex">
|
<!-- {{item.scope.id}} -->
|
<span
|
class="col_info"
|
v-if="!!item.scope.state"
|
@click="onToggle(item.scope.id,0,item.scope)"
|
>继续调研</span>
|
<span
|
class="col_info"
|
v-else
|
@click="onToggle(item.scope.id,1,item.scope)"
|
>停止调研</span>
|
<span
|
class="col_info"
|
@click="onPath('act_quest_edit/'+item.scope.id)"
|
>编辑</span>
|
<span
|
class="col_info"
|
@click="onPath('act_quest_detail/'+item.scope.id)"
|
>查看详情</span>
|
<span
|
class="col_info"
|
@click="onOut(item.scope.id)"
|
>导出数据</span>
|
<span
|
class="col_info"
|
@click="onDel(item.scope.id)"
|
>删除</span>
|
</div>
|
</template>
|
<template v-slot:num="item">
|
<div
|
class="col_info"
|
@click="onPath('act_quest_count/'+item.scope.id)"
|
>{{item.scope.joinCount}}</div>
|
</template>
|
<template v-slot:state="item">
|
<span>{{isStatus(item.scope.state)}}</span>
|
</template>
|
<template v-slot:time="item">
|
<span>{{item.scope.createAt}}</span>
|
</template>
|
</v-tool-table>
|
</div>
|
<v-tool-page
|
:item="paged"
|
@on-page="onPage"
|
></v-tool-page>
|
</div>
|
</template>
|
|
<script>
|
import { mapState } from "vuex";
|
export default {
|
props: {},
|
components: {},
|
data() {
|
return {
|
bar: [
|
{ title: "问卷标题", name: "title" },
|
{
|
title: "状态",
|
name: "state",
|
type: "select",
|
list: [
|
{ value: 0, label: "调研中" },
|
{ value: 1, label: "已停止" },
|
],
|
},
|
{ title: "发布时间", name: "time", type: "times" },
|
],
|
trs: [
|
{ text: "问卷标题", val: "title" },
|
{ text: "状态", val: "btn", slot: "state" },
|
{ text: "答卷数量", val: "btn", slot: "num" },
|
{ text: "发布人", val: "createUser" },
|
{ text: "发布时间", val: "btn", slot: "time" },
|
{ text: "操作", val: "btn" },
|
],
|
tds: [],
|
paged: { page: 0, total: 0, r: 0, limit: 10 },
|
os: {},
|
search: {},
|
};
|
},
|
computed: {
|
...mapState({ vuex_page: "pageReset" }),
|
},
|
watch: {
|
vuex_page: {
|
handler(n) {
|
if (n.page === this.$route.path) {
|
this.paged.page = 1;
|
this.init();
|
}
|
},
|
deep: true,
|
},
|
},
|
inject: ["appPath", "appTimeout"],
|
methods: {
|
timeout(v) {
|
return this.appTimeout(v);
|
},
|
onPath(url) {
|
this.appPath(url);
|
},
|
// 删除
|
onDel(id) {
|
this.$js.model("", "是否删除该问卷？", (res) => {
|
if (res) {
|
this.$api.get("questnaire/delete", { questId: id }, (e) => {
|
demo.toast("删除成功");
|
this.init();
|
});
|
}
|
});
|
},
|
// 调研状态改变
|
onToggle(questId, state, item) {
|
this.$js.model(
|
"提示",
|
!state
|
? "问卷将对调研人群开放，确定继续调研吗？"
|
: "停止期间，问卷将不可填写。确认停止吗？",
|
(res) => {
|
if (res) {
|
this.$api.post("questnaire/toggle", { questId, state }, (e) => {
|
item.state = !item.state * 1;
|
});
|
}
|
}
|
);
|
},
|
// 导出
|
onOut(questId) {
|
this.$api.get("questnaire/export", { questId }, (e) => {
|
// console.log(e);
|
if (e) {
|
window.open(e);
|
}
|
});
|
},
|
// 状态
|
isStatus(v) {
|
return ["调研中", "已停止"][v] || "";
|
},
|
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 = demo.copy(v);
|
delete this.search.time;
|
this.paged.page = 1;
|
this.init();
|
},
|
// 分页点击
|
onPage(v) {
|
if (v.page === this.paged.page && v.page && !v.reset) {
|
return 0;
|
}
|
this.paged.page = v.page;
|
this.paged.limit = v.limit;
|
this.init();
|
},
|
// 获取数据
|
init() {
|
let v = demo.copy(
|
Object.assign(this.os, this.search, {
|
pageNum: this.paged.page,
|
pageSize: this.paged.limit,
|
})
|
);
|
this.$api.post("questnaire/page", v, (e) => {
|
this.paged.total = e.total;
|
this.paged.r++;
|
this.tds = e.records || [];
|
});
|
},
|
},
|
mounted() {
|
// this.bar[1].list = this.$api.static.party_status();
|
},
|
};
|
</script>
|
<style lang="less">
|
.quest {
|
overflow-y: auto;
|
.tab,
|
.add {
|
margin-bottom: 10px;
|
}
|
}
|
</style>
|
