优化问卷分析和空状态展示

- 改进EmptyContainer组件，添加自定义错误信息和图片支持
- 新增emptyImg.png资源用于空状态展示
- 优化问卷分析页面，添加无数据时的友好提示
- 修改Survey组件生命周期钩子，从onMounted改为onBeforeMount
- 重构问卷列表加载逻辑，优化用户体验
- 添加loading状态，提升交互体验
- 完善表格组件条件渲染逻辑，避免空数据渲染问题
- 优化代码结构和类型定义，提高代码可维护性

src/views/Survey/Index.vue

@@ -7,13 +7,13 @@
       @click="() => $router.push({ name: 'search' })"
     /> -->
   </div>
-  <div class="new-survey-container">
+  <div class="new-survey-container" v-loading="requestLoading">
     <div style="margin-bottom: 80px">
       <van-list
+        @load="handleLoadSurveys"
         v-model:loading="loading"
         :finished="finished"
         finished-text="没有更多了"
-        @load="onLoad"
       >
         <div v-for="item in survey" v-if="survey.length > 0" :key="item" class="new-survey_item">
           <survey-item :survey="item" :is-analysis="true" :disable-action-button="false" />
@@ -26,38 +26,44 @@
 </template>
 
 <script setup>
-import { onMounted } from 'vue';
+import { onBeforeMount, ref } from 'vue';
 import NavSearch from '@/components/Search/Index.vue';
 import NewSurvey from '@/views/Home/components/NewSurvey/index.vue';
 import EmptyContainer from '@/views/Survey/components/EmptyContainer.vue';
 import SurveyItem from '@/views/Survey/components/SurveyItem.vue';
 import {
-  form,
   fetchSurveys,
   loading,
   finished,
   survey,
+  requestLoading,
   searchValue
 } from '@/views/Survey/hooks/useSurveyData';
 
+// 初始化 From 内容
+const form = ref({
+  page: 0,
+  pageSize: 10,
+  project_name: ''
+});
+
 const blurs = () => {
   form.value.page = 1;
   form.value.project_name = searchValue.value;
   survey.value = [];
-  fetchSurveys();
+  requestLoading.value = true;
+  fetchSurveys(form.value);
 };
 
-const onLoad = () => {
+onBeforeMount(() => {
-  // 异步更新数据
+  // 刚进入的时候
-  setTimeout(() => {
+  handleLoadSurveys();
-    form.value.page = form.value.page + 1;
-    fetchSurveys();
-  }, 500);
-};
-
-onMounted(() => {
-  // fetchSurveys();
 });
+
+function handleLoadSurveys() {
+  form.value.page = form.value.page + 1;
+  fetchSurveys(form.value);
+}
 </script>
 
 <style scoped lang="scss">

src/views/Survey/components/EmptyContainer.vue

@@ -1,21 +1,38 @@
 <script setup lang="ts">
+import { ref, useCssModule } from 'vue';
 
+const errorMsg = defineModel<string>('errorMsg', { default: ' - 更多任务期待您的创建 - ' });
+const showButton = defineModel<boolean>('showButton', { default: false });
+const imgSrc = defineModel<string>('imgSrc');
+
+const emit = defineEmits(['handle-click']);
+const style = useCssModule();
 </script>
 
 <template>
   <el-empty>
-    <template #image>
+    <template #image v-if="imgSrc">
-
+      <slot>
+        <!-- 如果放了图片，默认展示图片位置 -->
+        <img :src="imgSrc" alt="" :class="style.img" />
+      </slot>
     </template>
     <template #description>
-      <el-text> - 更多任务期待您的创建 - </el-text>
+      <el-text>{{ errorMsg }}</el-text>
     </template>
-    <el-button type="primary" class="btn" >+ 新建问卷</el-button>
+    <el-button v-if="showButton" @click="emit('handle-click')" type="primary" class="btn">
+      + 新建问卷
+    </el-button>
   </el-empty>
 </template>
 
-<style scoped lang="scss">
+<style scoped lang="scss" module>
-.btn{
+.img {
+  width: 35vw;
+  height: auto;
+}
+
+.btn {
   color: #fff;
   background-color: var(--primary-color);
   border: solid 1px var(--primary-color);

src/views/Survey/components/SurveyItem.vue

@@ -12,13 +12,19 @@ import { finish } from '@/api/survey';
 import { copySurveys } from '@/api/home';
 import { useRouter } from 'vue-router';
 import {
-  form,
   fetchSurveys,
   deleteItem,
   saveTemplate,
   currentSurvey
 } from '@/views/Survey/hooks/useSurveyData';
 import ai from '@/assets/img/analysis/ai.svg';
+import { ref } from 'vue';
+
+const form = ref({
+  page: 0,
+  pageSize: 10,
+  project_name: ''
+});
 
 // router
 const router = useRouter();
@@ -120,7 +126,7 @@ function copyItem(item: SurveyItem) {
         showSuccessToast('复制成功');
         form.value.page = 1;
         survey.value = [];
-        await fetchSurveys();
+        await fetchSurveys(form.value);
       } else {
         showFailToast(res.data);
       }
@@ -229,7 +235,7 @@ function copyItem(item: SurveyItem) {
           >
             <el-dropdown-item @click="toPreview(survey)"> 预览 </el-dropdown-item>
             <el-dropdown-item @click="copyItem(survey)"> 复制 </el-dropdown-item>
-            <el-dropdown-item @click="deleteItem(survey)"> 删除 </el-dropdown-item>
+            <el-dropdown-item @click="deleteItem(survey, form)"> 删除 </el-dropdown-item>
             <el-dropdown-item @click="saveTemplate(survey)"> 存为模板 </el-dropdown-item>
           </el-dropdown-menu>
         </template>

src/views/Survey/hooks/useSurveyData.ts

@@ -1,18 +1,13 @@
 import { getSurveysPage, deleteSurveys, saveTemplates } from '@/api/home';
 import { ref } from 'vue';
 import { showDialog, showConfirmDialog, showFailToast, showToast } from 'vant';
-import {  getSurveysDetail } from '@/api/design';
+import { getSurveysDetail } from '@/api/design';
-
-const form = ref({
-  page: 0,
-  pageSize: 10,
-  project_name: ''
-});
 
 const searchValue = ref('');
 const survey = ref<SurveyItem[]>([]);
 const total = ref(0);
 const loading = ref(false);
+const requestLoading = ref(false);
 const finished = ref(false);
 const currentSurvey = ref<SurveyItem>();
 
@@ -25,10 +20,11 @@ async function fetchSingleSurvey(sn: string) {
   }
 }
 
-async function fetchSurveys() {
+async function fetchSurveys(form: any) {
+  requestLoading.value = true;
   const params = {
-    page: form.value.page,
+    page: form.page,
-    per_page: form.value.pageSize,
+    per_page: form.pageSize,
     group_id: 0,
     project_name: searchValue.value
   };
@@ -57,9 +53,10 @@ async function fetchSurveys() {
   } else {
     // Toast()
   }
+  requestLoading.value = false;
 }
 
-function deleteItem(item: SurveyItem) {
+function deleteItem(item: SurveyItem, form: any) {
   showDialog({
     title: `确认删除问卷 "${item.project_name}" ?`,
     showCancelButton: true,
@@ -72,9 +69,9 @@ function deleteItem(item: SurveyItem) {
       } else {
         showToast('删除成功！');
       }
-      form.value.page = 1;
+      form.page = 1;
       survey.value = [];
-      await fetchSurveys();
+      await fetchSurveys(form);
     })
     .catch(() => {
       // on cancel
@@ -96,7 +93,6 @@ async function saveTemplate(item: SurveyItem) {
 }
 
 export {
-  form,
   fetchSurveys,
   loading,
   finished,
@@ -106,5 +102,6 @@ export {
   deleteItem,
   saveTemplate,
   currentSurvey,
+  requestLoading,
   fetchSingleSurvey
 };

src/views/Survey/views/Analysis/components/AnalysisInfo/Index.vue

@@ -18,11 +18,14 @@
 
       <!-- 问题表格部分 -->
       <yl-table
+        v-if="getTableData(analysis).length > 0"
         class="mt10"
         :props="getTableHeadProps(analysis.head, analysis.option)"
         :data="getTableData(analysis)"
-        v-if="analysis.head"
       />
+      <section v-else>
+        <empty-container :error-msg="'本题暂无有效答题数据'" :img-src="emptyImg" />
+      </section>
     </section>
     <!-- <section v-else>             
       <empty-container />
@@ -39,6 +42,7 @@ import { getTableData } from './hooks/pieSeries';
 import YlTable from '@/components/YlTable/Index.vue';
 import { ref } from 'vue';
 import { screenLayout } from '@/hooks/browser/useScreen';
+import emptyImg from '@/assets/img/emptyImg.png';
 // questionTypeMap  自己去对应
 const showChart = ref([1, 2, 5, 106, 9, 10]);