632 lines
17 KiB
Vue
632 lines
17 KiB
Vue
<template>
|
||
<a-spin tip="Loading..." :spinning="spinningFlag">
|
||
<div class="partContent">
|
||
<div class="overview" v-if="false">
|
||
<sub-title>回收进度</sub-title>
|
||
<div class="card-wrap">
|
||
<overview-card
|
||
:count="today_answer_count"
|
||
:icon="require('@/assets/img/newly_increase_icon.png')"
|
||
color="#FFA643"
|
||
title="今日回收量"
|
||
/>
|
||
<overview-card
|
||
:count="answer_count"
|
||
:icon="require('@/assets/img/data_count_icon.png')"
|
||
color="#4E7DFE"
|
||
title="完成回收总量"
|
||
/>
|
||
<overview-card
|
||
v-if="publish_number>0"
|
||
:count="publish_number"
|
||
:icon="require('@/assets/img/countNum.png')"
|
||
color="#2CD076"
|
||
title="发布数量"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="particulars">
|
||
<sub-title>明细数据</sub-title>
|
||
<!-- <search @onSearch="onSearch" @onReset="onSearch" v-if="true">
|
||
<div v-show="isFilted" class="filter-count">
|
||
已筛选{{ tableData.length }}条数据
|
||
</div>
|
||
</search> -->
|
||
<!-- 新的筛选 -->
|
||
<newSearch
|
||
ref="newSearchRef"
|
||
@onSearch="onSearch"
|
||
@openModal="openModal"
|
||
@searchPlan="searchPlan"
|
||
@saveVisOpen="saveVisOpen"
|
||
:versions="versions"
|
||
:logics="logics"
|
||
:questions="questions"
|
||
:count="dataCount"
|
||
:publish_types="publish_types"
|
||
:filterData="filterData"
|
||
:isArt="isArt"
|
||
:nowPlanVal="nowPlanVal"
|
||
/>
|
||
<!-- 新的操作按钮 -->
|
||
<newBtnList
|
||
ref="newBtnListRef"
|
||
v-if="total>0"
|
||
@configOk="handleConfig"
|
||
@downloadOk="handleDownload"
|
||
@delOk="getData"
|
||
@delFn="showDelMod"
|
||
@cleanAllBtn="cleanAllBtn"
|
||
@dataImport="dataImport"
|
||
@dataExport="dataExport"
|
||
:answer_columns="answer_columns"
|
||
:selectedSns="selectedSns"
|
||
/>
|
||
<!-- <newDataTable /> -->
|
||
<div class="table-container" v-if="true">
|
||
<DataTable
|
||
:has-selection="false"
|
||
:params="searchParams"
|
||
:per-page="per_page"
|
||
:page="page"
|
||
:sn="sn"
|
||
:table-columns="columns"
|
||
:table-source="tableData"
|
||
:total="total"
|
||
@change="onPageChange"
|
||
@select="onSelectChange"
|
||
>
|
||
<template #operation="{record}">
|
||
<div>
|
||
<a @click="openDetailModal(record)">查看</a>
|
||
<a style="margin: 10px;" @click="openDetailModal(record)">编辑</a>
|
||
<a-dropdown :trigger="['click']">
|
||
<a class="ant-dropdown-link" @click.prevent>
|
||
更多
|
||
<DownOutlined />
|
||
</a>
|
||
<template #overlay>
|
||
<a-menu>
|
||
<!-- <a-menu-item @click="signAvail">标记为无效</a-menu-item> -->
|
||
<a-menu-item @click="exportSingleAnswer(record)">下载答卷</a-menu-item>
|
||
<a-menu-item @click="exportData(record)">导出数据</a-menu-item>
|
||
<a-menu-item @click="showDelModal(record)">
|
||
<!-- <a-popconfirm
|
||
title="确定删除此条记录?"
|
||
ok-text="确认"
|
||
cancel-text="取消"
|
||
@confirm="delSingleAnswer(record)"
|
||
> -->
|
||
<span>删除</span>
|
||
<!-- </a-popconfirm> -->
|
||
</a-menu-item
|
||
>
|
||
</a-menu>
|
||
</template>
|
||
</a-dropdown>
|
||
</div>
|
||
</template>
|
||
</DataTable>
|
||
</div>
|
||
</div>
|
||
<sign-invalid-modal
|
||
v-model:visible="invalidVisible"
|
||
@ok="handleSignInvalid"
|
||
></sign-invalid-modal>
|
||
<download-data
|
||
v-model:visible="downloadVisible"
|
||
:params="queryState"
|
||
:sn="sn"
|
||
:sns="selectedSns"
|
||
@ok="handleDownload"
|
||
></download-data>
|
||
<!-- <column-config
|
||
v-model:visible="configVisible"
|
||
:data="answer_columns"
|
||
:sn="sn"
|
||
@ok="handleConfig"
|
||
></column-config> -->
|
||
<qs-detail
|
||
v-model:visible="detailVisible"
|
||
:data="tableData"
|
||
:detailId="detailId"
|
||
:sn="sn"
|
||
:type="0"
|
||
></qs-detail>
|
||
</div>
|
||
</a-spin>
|
||
<newModal
|
||
ref="newModalRef"
|
||
:isFilterInfo="isFilterInfo"
|
||
:operType ="operType"
|
||
:filterNewData ="filterNewData"
|
||
@modalOk="modalOk"
|
||
@isUse="isUseFun"
|
||
@isSave="isSaveFun"
|
||
@resetPlan="resetPlan"
|
||
@getNewData="getData"
|
||
@resShowFlag="resShowFlag"
|
||
/>
|
||
<!-- 下载中心 -->
|
||
<DownloadCenter v-model:visible="downloadCenterVisible" v-if="downloadCenterVisible"></DownloadCenter>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed, onMounted, ref , reactive , watch} from "vue";
|
||
import { useStore } from 'vuex';
|
||
import { useRoute } from "vue-router";
|
||
import { message } from "ant-design-vue";
|
||
import SubTitle from "../components/SubTitle";
|
||
import OverviewCard from "./components/OverviewCard";
|
||
import SignInvalidModal from "./components/SignInvalidModal";
|
||
import DownloadData from "./components/DownloadData";
|
||
import QsDetail from "./components/QuestionnaireDetail";
|
||
import ColumnConfig from "./components/ColumnConfig";
|
||
import countIcon from "@/assets/img/data_count_icon.png";
|
||
import increaseIcon from "@/assets/img/newly_increase_icon.png";
|
||
import { answers_export, getParticularList, delParticularItem } from "@/api/data-analyse";
|
||
import { convertQueryToString } from "@utils/httpFormat";
|
||
import DataTable from "@views/DataAnalyse/components/DataTable";
|
||
import newDataTable from "@views/DataAnalyse/components/newDataTable";
|
||
import { downloadFile } from "@views/DataAnalyse/composables/downloadFile";
|
||
import search from '@/views/DataAnalyse/components/diagram/search'
|
||
import { DownOutlined } from '@ant-design/icons-vue';
|
||
import newSearch from '@/views/DataAnalyse/components/diagram/newSearch'
|
||
import newBtnList from '@/views/DataAnalyse/components/diagram/newBtnList'
|
||
import newModal from '@/views/DataAnalyse/components/diagram/newModal'
|
||
import { addDownloadCenter } from "@/api/download.js";
|
||
import DownloadCenter from "@/views/DownloadCenter/index.vue"
|
||
import { Modal } from 'ant-design-vue';
|
||
const store = useStore()
|
||
const route = useRoute();
|
||
// const sn = "ZY1Nodxr"
|
||
const sn = route.query.sn;
|
||
|
||
const tableData = ref([]);
|
||
const columns = ref(null);
|
||
|
||
|
||
const page = ref(1);
|
||
const per_page = ref(10);
|
||
const total = ref(0);
|
||
const queryState = ref({})
|
||
|
||
const searchParams = computed(() => {
|
||
return {
|
||
...queryState.value,
|
||
page: page.value,
|
||
per_page: per_page.value
|
||
};
|
||
});
|
||
|
||
// 弹窗操作
|
||
const newModalRef = ref(null)
|
||
const newBtnListRef = ref(null)
|
||
const fullFlag = ref(false)
|
||
const cleanAllBtn = (e)=>{
|
||
newModalRef.value.confirmDel('confirmDelAll')
|
||
fullFlag.value = e
|
||
}
|
||
|
||
const showDelMod = ()=>{
|
||
newModalRef.value.confirmDel('confirmDel')
|
||
fullFlag.value = false
|
||
}
|
||
const modalOk = (e)=>{
|
||
console.log('modalOk',e);
|
||
if(e==='confirmDel'){
|
||
newBtnListRef.value.delSurveysAnswers(fullFlag.value)
|
||
}
|
||
if(e==='confirmDelAll'){
|
||
newBtnListRef.value.delSurveysAnswers(fullFlag.value)
|
||
}
|
||
}
|
||
const dataImport = ()=>{
|
||
newModalRef.value.dataImportVis = true
|
||
}
|
||
const operType = ref(0)
|
||
const dataExport = (e)=>{
|
||
operType.value = e
|
||
newModalRef.value.dataExportVis = true
|
||
}
|
||
// 打开方案管理
|
||
const openModal = ()=>{
|
||
newModalRef.value.modalVis = true
|
||
}
|
||
// 保存为新方案
|
||
const filterNewData = ref(null)
|
||
|
||
const answer_count = ref("");
|
||
const publish_number = ref("");
|
||
const today_answer_count = ref("");
|
||
const invalidVisible = ref(false);
|
||
const downloadVisible = ref(false);
|
||
const configVisible = ref(false);
|
||
const detailVisible = ref(false);
|
||
const detailId = ref("");
|
||
|
||
const selectedRowKeys = ref([]);
|
||
|
||
const selectedSns = computed(() => {
|
||
return selectedRowKeys.value?.length
|
||
? tableData.value
|
||
.filter((item, index) => selectedRowKeys.value.includes(index))
|
||
.map((i) => i.sn) || []
|
||
: [];
|
||
});
|
||
|
||
const answer_columns = ref([]);
|
||
|
||
const isFilted = ref(false);
|
||
// function onSearch(payload) {
|
||
// isFilted.value = true
|
||
// queryState.value = payload
|
||
// getData()
|
||
// }
|
||
|
||
/**
|
||
* 获取列表数据
|
||
*/
|
||
// function getData(per_page = 10, page = 1) {
|
||
// const params = convertQueryToString(searchParams.value);
|
||
// getParticularList(sn, params).then((res) => {
|
||
// columns.value = res.columns;
|
||
|
||
// tableData.value = res.data
|
||
// answer_count.value = res.answer_count;
|
||
// today_answer_count.value = res.today_answer_count;
|
||
// total.value = res.meta.total;
|
||
// answer_columns.value = res.answer_columns;
|
||
// });
|
||
// }
|
||
|
||
// 修改方案信息
|
||
const filterData = ref({})
|
||
const isArt = ref(false)
|
||
const searchPlan = (e,isType)=>{
|
||
console.log('修改方案信息',e);
|
||
if(isType&&isType=='isSaveFun'){
|
||
if(newSearchRef.value.filterPlan.filterListVal ==e.id){
|
||
filterData.value=e
|
||
}
|
||
}else{
|
||
filterData.value=e
|
||
}
|
||
isArt.value = false
|
||
if(e){
|
||
isArt.value = true
|
||
}
|
||
}
|
||
// 控制显示筛选数目
|
||
const resShowFlag =async (flag)=>{
|
||
// newSearchRef.value.resShowFlag = flag
|
||
// await newSearchRef.value.getSurveysAnswerFilter()
|
||
// await newSearchRef.value.changePlan()
|
||
}
|
||
// 根据方案筛选信息
|
||
const nowPlanVal = ref(-1)
|
||
const newSearchRef = ref(null)
|
||
const isUseFun = async(e)=>{
|
||
onSearch(e)
|
||
searchPlan(e,'isUseFun')
|
||
console.log('当前使用条件',e);
|
||
if(e.id){
|
||
await newSearchRef.value.getSurveysAnswerFilter()
|
||
nowPlanVal.value = e.id
|
||
}
|
||
}
|
||
const isSaveFun = async(e)=>{
|
||
searchPlan(e,'isSaveFun')
|
||
if(e.id){
|
||
await newSearchRef.value.getSurveysAnswerFilter()
|
||
// nowPlanVal.value = e.id
|
||
}
|
||
}
|
||
const resetPlan = async(e)=>{
|
||
await newSearchRef.value.getSurveysAnswerFilter()
|
||
if(!e){
|
||
await newSearchRef.value.clearInfo()
|
||
nowPlanVal.value = '-1'
|
||
}
|
||
}
|
||
// 列表头部信息
|
||
const versions = ref([])
|
||
const questions = ref([])
|
||
const dataCount = ref(0)
|
||
const logics = ref([])
|
||
const publish_types = ref([])
|
||
const getSurveysHead = async()=>{
|
||
try {
|
||
questions.value = []
|
||
dataCount.value = 0
|
||
versions.value = []
|
||
const res = await store.dispatch('dataFilter/getSurveysHead',{sn})
|
||
console.log(res);
|
||
// 版本
|
||
versions.value = res.filters.versions;
|
||
// 发布方式
|
||
publish_types.value = res.filters.publish_types;
|
||
// 配额
|
||
logics.value = res.filters.logics;
|
||
// 完成
|
||
answer_count.value = res.answer_count;
|
||
// 发布数量
|
||
publish_number.value = res.publish_number;
|
||
// 今日
|
||
today_answer_count.value = res.today_answer_count;
|
||
// 配置
|
||
answer_columns.value = res.answer_columns;
|
||
console.log('answer_columns',answer_columns.value);
|
||
columns.value = res.columns;
|
||
// 筛选条件
|
||
questions.value= res?.filters?.answer_questions
|
||
console.log('传',questions.value);
|
||
} catch (error) {
|
||
console.error(error);
|
||
}
|
||
}
|
||
|
||
// 长度超出提示
|
||
watch(()=>answer_columns.value, nval=>{
|
||
if(nval.length>3){
|
||
Modal.confirm({
|
||
title: () => '注意',
|
||
content: () => '为保证您使用流畅，列表仅展示前100列问题，您可通过列表配置查看其他数据',
|
||
class: "custom-modal custom-modal-title-confirm-notice noCancel",
|
||
okText:()=>'知道了',
|
||
cancelText:()=>'',
|
||
onOk() {
|
||
console.log('onOk');
|
||
},
|
||
// onCancel() {
|
||
// console.log('onCancel');
|
||
// },
|
||
});
|
||
}
|
||
})
|
||
let subInfo = ref({})
|
||
const isFilterInfo= ref({})
|
||
function onSearch(params) {
|
||
subInfo.value =page.value
|
||
subInfo.value =per_page.value
|
||
isFilterInfo.value = {...params}
|
||
subInfo.value = {...params}
|
||
getData()
|
||
}
|
||
// 新查询
|
||
const spinningFlag = ref(true)
|
||
async function getData(pageInfo={}) {
|
||
try {
|
||
let subData = {
|
||
sn,
|
||
per_page:per_page.value,
|
||
page:page.value,
|
||
}
|
||
console.log('subInfo',subInfo.value);
|
||
subData = {...subData,...subInfo.value,...pageInfo}
|
||
if(subData.filter_type)spinningFlag.value = true
|
||
const res = await store.dispatch('dataFilter/getSurveysAnswers',subData)
|
||
if(subData.filter_type)spinningFlag.value = false
|
||
// 原配置
|
||
const newData =JSON.parse(JSON.stringify(res.data))
|
||
newData.map(el=>{
|
||
el.newSn = el.sn
|
||
el.key = el.sn
|
||
if(el.is_import===1){
|
||
delete el.sn
|
||
}
|
||
})
|
||
tableData.value = newData
|
||
total.value = res.meta.total;
|
||
page.value = res.meta.current_page;
|
||
dataCount.value= res?.meta?.total
|
||
} catch (error) {
|
||
console.error(error);
|
||
}
|
||
}
|
||
function onSelectChange(selectedList) {
|
||
selectedRowKeys.value = selectedList;
|
||
}
|
||
|
||
function signAvail() {
|
||
invalidVisible.value = true;
|
||
}
|
||
|
||
/*
|
||
* 标记无效问卷
|
||
* */
|
||
function handleSignInvalid() {
|
||
}
|
||
|
||
/**
|
||
* 导出问卷
|
||
*/
|
||
function exportAnswer() {
|
||
if (selectedSns.value.length === 0) {
|
||
message.warn("未勾选答卷，请勾选后重试");
|
||
return;
|
||
}
|
||
answers_export(sn, {
|
||
sns: selectedSns.value.join(",")
|
||
}).then((res) => {
|
||
const url = res.data.download_url;
|
||
downloadFile(url);
|
||
});
|
||
}
|
||
|
||
// 删除某条问卷
|
||
function delSingleAnswer(record) {
|
||
// delParticularItem(sn, record.sn).then(() => {
|
||
// getData()
|
||
// })
|
||
delSurveysAnswers(record.sn)
|
||
}
|
||
// 删除
|
||
const delSurveysAnswers = async (sns)=>{
|
||
try {
|
||
const subData = {
|
||
sn,
|
||
sns
|
||
}
|
||
const res =await store.dispatch('dataFilter/delSurveysAnswers',subData)
|
||
getData()
|
||
} catch (error) {
|
||
console.error(error);
|
||
}
|
||
}
|
||
|
||
function exportSingleAnswer(data) {
|
||
answers_export(sn, {
|
||
sns: data.newSn
|
||
}).then((res) => {
|
||
// const url = res.data.download_url;
|
||
// downloadFile(url);
|
||
const {title,url} = res.data.download_url;
|
||
const subdata = {
|
||
fileURL:url,
|
||
fileName:title
|
||
}
|
||
store.dispatch('common/fileDown',subdata)
|
||
});
|
||
}
|
||
function openDownloadModal() {
|
||
// if (!selectedRowKeys.value.length) {
|
||
// message.warning("未勾选答卷, 请勾选后重试");
|
||
// return;
|
||
// }
|
||
downloadVisible.value = true;
|
||
}
|
||
// 导出数据
|
||
const exportData = async ({newSn})=>{
|
||
operType.value = 1
|
||
newModalRef.value.dataExportVis = true
|
||
await store.dispatch('dataFilter/exportInfo',{flag:true,newSn})
|
||
}
|
||
const downloadCenterVisible = ref(false)
|
||
// 下载
|
||
function handleDownload() {
|
||
let data ={ download_type: '2' }
|
||
addDownloadCenter(sn,data).then(res=>{
|
||
// 下载中心
|
||
store.dispatch('downloadCenter/changeCenterUrl',route.path)
|
||
// downloadCenterVisible.value = true
|
||
store.dispatch('downloadCenter/changeCenterShow',true)
|
||
// router.push({
|
||
// path: "/downloadCenter",
|
||
// query: { path:route.path,sn },
|
||
// });
|
||
})
|
||
}
|
||
// 删除数据
|
||
const showDelModal = (record)=>{
|
||
Modal.confirm({
|
||
title: () => '确定删除？',
|
||
content: () => '您可在【回收站】查看或恢复删除的数据。',
|
||
class: "custom-modal custom-modal-title-confirm-notice",
|
||
okText:()=>'确 定',
|
||
onOk() {
|
||
delSingleAnswer(record)
|
||
},
|
||
onCancel() {
|
||
console.log('onCancel');
|
||
},
|
||
});
|
||
}
|
||
// 打开配置列modal
|
||
function openConfigModal() {
|
||
configVisible.value = true;
|
||
}
|
||
|
||
function handleConfig() {
|
||
getData();
|
||
getSurveysHead()
|
||
}
|
||
|
||
// 打开详情Modal
|
||
function openDetailModal(item) {
|
||
detailId.value = item.newSn;
|
||
detailVisible.value = true;
|
||
}
|
||
|
||
function onPageChange(data) {
|
||
console.log(data);
|
||
page.value = data.current;
|
||
per_page.value = data.pageSize;
|
||
getData({page:page.value , per_page:per_page.value});
|
||
}
|
||
|
||
// loading
|
||
onMounted(async () => {
|
||
getData();
|
||
await getSurveysHead();
|
||
// 关闭loading
|
||
spinningFlag.value = false
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.overview {
|
||
padding: 24px 32px 32px 32px;
|
||
background: #fff;
|
||
border-radius: 6px;
|
||
|
||
.card-wrap {
|
||
margin-top: 24px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
|
||
.particulars {
|
||
// margin-top: 24px;
|
||
padding: 24px 32px 32px 32px;
|
||
background: #fff;
|
||
border-radius: 6px;
|
||
.filter-count {
|
||
margin-top: 32px;
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
color: #2f2f2f;
|
||
}
|
||
}
|
||
|
||
.setting {
|
||
height: 80px;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.selected-data {
|
||
width: 70%;
|
||
color: #1c6fff;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.advance-operation {
|
||
width: 30%;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.multiple-btn {
|
||
width: 190px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
img {
|
||
width: 12px;
|
||
height: 12px;
|
||
}
|
||
}
|
||
|
||
.export-btn {
|
||
margin-left: 12px;
|
||
}
|
||
}
|
||
.partContent{
|
||
min-width: 700px;
|
||
overflow-x: auto;
|
||
box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.1);
|
||
}
|
||
</style>
|
||
|