fix：心中部分功能

2022-10-17 22:53:49 +08:00
parent d0db1482d1
commit f023d8cc02
7 changed files with 671 additions and 8 deletions
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -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",
--- a/src/views/DataAnalyse/components/diagram/newBtnList.vue
+++ b/src/views/DataAnalyse/components/diagram/newBtnList.vue
@@ -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)=>{
--- a/src/views/DataAnalyse/components/diagram/newSearch.vue
+++ b/src/views/DataAnalyse/components/diagram/newSearch.vue
@@ -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;
      }
--- a/src/views/DataAnalyse/composables/use-generator-table-columns.js
+++ b/src/views/DataAnalyse/composables/use-generator-table-columns.js
@@ -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) => {
--- a/src/views/DataAnalyse/index.vue
+++ b/src/views/DataAnalyse/index.vue
@@ -72,8 +72,13 @@ export default defineComponent({
        name: '明细数据',
        icon: '&#xe687;',
        children: [
-          {
-            name: '原始数据',
+          // {
+          //   name: '测试数据',
+          //   icon: '&#xe7af;',
+          //   path: '/survey/analyse/test-particulars'
+          // },
+           {
+            name: '作答数据',
            icon: '&#xe7af;',
            path: '/survey/analyse/data-particulars'
          },
--- a/src/views/DataAnalyse/particulars/list.vue
+++ b/src/views/DataAnalyse/particulars/list.vue
@@ -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>
                  更多
--- a/src/views/DataAnalyse/particulars/test.vue
+++ b/src/views/DataAnalyse/particulars/test.vue
@@ -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>
+