fix:心中部分功能

This commit is contained in:
xcool
2022-10-17 22:53:49 +08:00
parent d0db1482d1
commit f023d8cc02
7 changed files with 671 additions and 8 deletions

View File

@@ -159,6 +159,13 @@ const constantRoutes = [
meta: { showPublish: false, showPreview: false, showShare: true, showDownload: true },
component: () => import(/* webpackChunkName: "analyse" */ "@/views/DataAnalyse/particulars/list")
},
{
path: "test-particulars",
name: "TestParticulars",
meta: { keepAlive: true },
meta: { showPublish: false, showPreview: false, showShare: true, showDownload: true },
component: () => import(/* webpackChunkName: "analyse" */ "@/views/DataAnalyse/particulars/test")
},
{
path: "diagram",
name: "Diagram",

View File

@@ -50,6 +50,7 @@
<img class="suffix-icon" :src="require('@/assets/img/select-arrow-down.png')" alt="">
</template>
</a-select> -->
<a-button type="primary" class="operChd custom-button" @click="configVisible=true">无效样本处理</a-button>
<a-button type="primary" class="operChd custom-button" @click="configVisible=true">列表配置</a-button>
</div>
<!-- 配置 -->
@@ -101,6 +102,8 @@
test2:null
})
const opList = ref([
{value:'3',label:'标记'},
{value:'4',label:'取消标记'},
{value:'0',label:'下载答卷'},
{value:'1',label:'导出数据'},
{value:'2',label:'删除'}
@@ -127,8 +130,8 @@
}
const dataList = ref([
// {value:'0',label:'添加数据'},
// {value:'1',label:'导入数据'},
{value:'2',label:'导出数据'},
{value:'1',label:'导入数据'},
//{value:'2',label:'导出数据'},
])
// 添加数据 导入数据 导出数据
const dataChange = (e)=>{

View File

@@ -342,12 +342,12 @@
</a-select>
</div>
</div>
<!-- <div class="filterBox">
<div class="filterBox">
<div class="filterBoxL">是否被标记</div>
<div class="filterBoxR flexBox">
<a-switch v-model:checked="searchData.isMark" />
</div>
</div> -->
</div>
</div>
<div class="isAllOpen">
<div
@@ -1396,7 +1396,7 @@ defineExpose({
}
.filterBoxL {
// width: 80px;
width: 60px;
width: 70px;
margin-right: 20px;
flex-shrink: 0;
}

View File

@@ -4,6 +4,7 @@ const defaultOptions = {
left_fixed_key: 'id',// 左侧固定列
right_fixed_key: 'operation', //右侧固定列
show_operator: true, // 是否显示操作列
show_check:true
}
/**
@@ -18,6 +19,17 @@ export default function useGeneratorTableColumns(columns, options = {}) {
options = {...defaultOptions, ...options}
const tableHeaders = ref([])
function flatData(columns) {
let columnsCheck =[];
if(options.show_check){
columnsCheck={
title: '',
key: 'check',
dataIndex: 'check',
width: 130,
slots: {customRender: "check" },
fixed: 'left',
}
}
let result = columns.reduce((previousValue, currentValue) => {
const arr = Object.entries(currentValue).map(([key, value]) => ({
...value,
@@ -33,17 +45,20 @@ export default function useGeneratorTableColumns(columns, options = {}) {
// 手动修改作答ID数组位置
const snData = result.find(el=>el.key =='id')
result = result.filter(el=>el.key!='id')
if(snData)result.unshift(snData)
result.unshift(columnsCheck);
if(options.show_operator) {
result.push({
title: '操作',
key: 'operation',
dataIndex: 'operation',
width: 130,
width: 250,
slots: {customRender: "operation" },
fixed: 'right',
})
}
return result
}
watch(columns, (data) => {

View File

@@ -72,8 +72,13 @@ export default defineComponent({
name: '明细数据',
icon: '&#xe687;',
children: [
// {
// name: '测试数据',
// icon: '&#xe7af;',
// path: '/survey/analyse/test-particulars'
// },
{
name: '原始数据',
name: '作答数据',
icon: '&#xe7af;',
path: '/survey/analyse/data-particulars'
},

View File

@@ -78,6 +78,7 @@
>
<template #operation="{record}">
<a @click="openDetailModal(record)">查看</a>
<a style="margin: 10px;" @click="openDetailModal(record)">编辑</a>
<a-dropdown :trigger="['click']">
<a class="ant-dropdown-link" @click.prevent>
更多

View File

@@ -0,0 +1,632 @@
<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>