refactor: 优化问卷列表页面功能

1. 修复用户名字段显示问题，从created_user改为creater_user
2. 优化日期显示，只显示年月日
3. 修复搜索功能，修正关键字参数为key_word
4. 优化空状态组件交互逻辑
5. 改进分页加载逻辑

src/components/SurveyItem/Index.vue

@@ -1,35 +1,35 @@
-<script setup lang="ts">
-import { FcClock, FcBusinessman } from 'vue-icons-plus/fc';
-import clock from '@/assets/img/search/clock.svg';
-import people from '@/assets/img/search/people.svg';
-
-const survey = defineModel<object>('survey', { required: true });
-</script>
-
-<template>
-  <div>
-    <h3>{{ survey.project_name }}</h3>
-    <el-space spacer="|" direction="horizontal">
-      <section class="flex items-center pt-1">
-        <img :src="people" alt="" style="margin-right: 5px" />
-        <el-text>{{ survey.created_user }}</el-text>
-      </section>
-      <section class="flex items-center pt-1">
-        <img :src="clock" alt="" style="margin-right: 5px" />
-        <el-text>创建时间{{ survey.created_at }}</el-text>
-      </section>
-    </el-space>
-  </div>
-</template>
-
-<style lang="scss" scoped module="item">
-@use '@/assets/css/theme';
-
-h3 {
-  margin: 10px 0 12px 0;
-  font-weight: 800;
-  line-height: 15px;
-  text-align: left;
-  font-style: normal;
-}
-</style>
+<script setup lang="ts">
+import { FcClock, FcBusinessman } from 'vue-icons-plus/fc';
+import clock from '@/assets/img/search/clock.svg';
+import people from '@/assets/img/search/people.svg';
+
+const survey = defineModel<object>('survey', { required: true });
+</script>
+
+<template>
+  <div>
+    <h3>{{ survey.project_name }}</h3>
+    <el-space spacer="|" direction="horizontal">
+      <section class="flex items-center pt-1">
+        <img :src="people" alt="" style="margin-right: 5px" />
+        <el-text>{{ survey.creater_user }}</el-text>
+      </section>
+      <section class="flex items-center pt-1">
+        <img :src="clock" alt="" style="margin-right: 5px" />
+        <el-text>创建时间{{ survey.created_at.split(' ')[0] }}</el-text>
+      </section>
+    </el-space>
+  </div>
+</template>
+
+<style lang="scss" scoped module="item">
+@use '@/assets/css/theme';
+
+h3 {
+  margin: 10px 0 12px 0;
+  font-weight: 800;
+  line-height: 15px;
+  text-align: left;
+  font-style: normal;
+}
+</style>

src/views/Home/components/NewSurvey/index.vue

@@ -1,38 +1,34 @@
-<template>
-  <div class="new_survey">
-    <div v-if="$route.name !== 'home'">
-      <van-popup v-model:show="show" round closeable position="bottom" teleport="#app">
-        <create-question :createdNewPage="false"></create-question>
-      </van-popup>
-    </div>
-    <navigation />
-  </div>
-</template>
-<script setup>
-import CreateQuestion from '@/views/Home/components/CreateSurvey/CreateQuestion.vue';
-import Navigation from '@/components/Navigation/Index.vue';
-import { useRoute } from 'vue-router';
-
-const route = useRoute();
-
-// console.log(route.name);
-import { ref } from 'vue';
-function create() {
-  show.value = true;
-}
-const show = ref(false);
-</script>
-
-<style scoped lang="scss">
-@use '@/assets/css/theme';
-
-.new_survey {
-  position: fixed;
-  bottom: 50px;
-  left: 0;
-  box-sizing: border-box;
-  width: 100vw;
-  border-radius: theme.$card-radius;
-  background: #fff;
-}
-</style>
+<template>
+  <div class="new_survey">
+    <div v-if="$route.name !== 'home'">
+      <van-popup v-model:show="show" round closeable position="bottom" teleport="#app">
+        <create-question :createdNewPage="false"></create-question>
+      </van-popup>
+    </div>
+    <navigation />
+  </div>
+</template>
+<script setup>
+import CreateQuestion from '@/views/Home/components/CreateSurvey/CreateQuestion.vue';
+import Navigation from '@/components/Navigation/Index.vue';
+import { ref } from 'vue';
+
+function create() {
+  show.value = true;
+}
+const show = defineModel('show', { type: Boolean, default: false });
+</script>
+
+<style scoped lang="scss">
+@use '@/assets/css/theme';
+
+.new_survey {
+  position: fixed;
+  bottom: 50px;
+  left: 0;
+  box-sizing: border-box;
+  width: 100vw;
+  border-radius: theme.$card-radius;
+  background: #fff;
+}
+</style>

src/views/Survey/Index.vue

@@ -18,15 +18,20 @@
         <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" />
         </div>
-        <empty-container v-else />
+        <empty-container
+          v-if="survey.length === 0 && !searchValue"
+          :img-src="emptyImg"
+          @handle-click="handleEmptyClick"
+          :show-button="true"
+        />
+        <NewSurvey v-model:show="showModel" />
       </van-list>
     </div>
-    <NewSurvey v-if="survey.length > 0" />
   </div>
 </template>
 
 <script setup>
-import { onBeforeMount, onUnmounted, ref, watch } from 'vue';
+import { onUnmounted, ref, watch } 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';
@@ -39,7 +44,9 @@ import {
   requestLoading,
   searchValue
 } from '@/views/Survey/hooks/useSurveyData';
+import emptyImg from '@/assets/img/emptyImg.png';
 
+const showModel = ref(false);
 // 初始化 From 内容
 const form = ref({
   page: 0,
@@ -47,9 +54,11 @@ const form = ref({
   project_name: ''
 });
 
-// 当搜索框内容发生变化的时候，重置 finished 状态
 watch(searchValue, () => {
+  // 当搜索框内容发生变化的时候，重置 finished 状态
   finished.value = false;
+  // 重置搜索form 数据
+  form.value.page = 1;
 });
 
 const blurs = () => {
@@ -60,19 +69,20 @@ const blurs = () => {
   fetchSurveys(form.value);
 };
 
-onBeforeMount(() => {
-  // 刚进入的时候
-  // handleLoadSurveys();
-});
-
 onUnmounted(() => {
   // 当组件卸载的时候，清空 survey 数据
   survey.value = [];
+  // 清空搜索的字符
+  searchValue.value = '';
 });
 
-function handleLoadSurveys() {
+async function handleLoadSurveys() {
+  await fetchSurveys(form.value);
   form.value.page = form.value.page + 1;
-  fetchSurveys(form.value);
+}
+
+function handleEmptyClick() {
+  showModel.value = true;
 }
 </script>
 

src/views/Survey/components/EmptyContainer.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, useCssModule } from 'vue';
+import { useCssModule } from 'vue';
 
 const errorMsg = defineModel<string>('errorMsg', { default: ' - 更多任务期待您的创建 - ' });
 const showButton = defineModel<boolean>('showButton', { default: false });

src/views/Survey/hooks/useSurveyData.ts

@@ -27,7 +27,7 @@ async function fetchSurveys(form: any) {
     per_page: form.pageSize,
     group_id: 0,
     // project_name: searchValue.value
-    keyword: searchValue.value
+    key_word: searchValue.value
   };
   const res = await getSurveysPage(params);
   if (res.data.code === 0) {