搜索结果列表页面开发

2025-03-12 18:41:20 +08:00
commit 7cebe8fc00
739 changed files with 88149 additions and 0 deletions
--- a/src/views/Dashboard/Discussion/Created/index.vue
+++ b/src/views/Dashboard/Discussion/Created/index.vue
@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import DashboardDiscussionListItem from '@/components/Discussion/Dashboard/DashboardDiscussionListItem.vue';
+import type { discussionListItemType } from '@/api/discussion/types';
+import { reactive, shallowRef, watch, onMounted, ref, computed } from 'vue';
+import { myCreatedDiscuss, myJoineddDiscuss } from '@/api/discussion';
+import debounce from 'lodash/debounce';
+
+defineOptions({
+  name: 'DiscussionCreated'
+});
+
+// 获取讨论列表
+const loading = ref(false);
+let pageQuery = reactive({
+  page: 1,
+  size: 10
+});
+const titleQuery = ref('');
+const total = ref(0);
+const list = shallowRef<discussionListItemType[]>([]);
+const disscussTypeList = ref([
+  {
+    value: 'created_by_me',
+    name: '我创建的'
+  },
+  {
+    value: 'join_to_me',
+    name: '我参与的'
+  }
+]);
+const disscussType = ref('created_by_me');
+const disscussTypeChange = () => {
+  pageQuery = { page: 1, size: 10 };
+  // searchParams.value.page = pageQuery.page;
+  // searchParams.value.size = pageQuery.size;
+  switch (disscussType.value) {
+    case 'created_by_me':
+      fetchData();
+      break;
+    case 'join_to_me':
+      fetchJoinData();
+      break;
+  };
+};
+const fetchJoinData = async () => {
+  if (loading.value) return;
+  loading.value = true;
+  const res = await myJoineddDiscuss({ ...pageQuery, title: titleQuery.value });
+  if (!res.error) {
+    const resData = res?.data?.data;
+    list.value = resData.records;
+    total.value = resData.total;
+  }
+  loading.value = false;
+};
+const fetchData = async () => {
+  if (loading.value) return;
+  loading.value = true;
+  const res = await myCreatedDiscuss({ ...pageQuery, title: titleQuery.value });
+  if (!res.error) {
+    const resData = res?.data?.data;
+    list.value = resData.records;
+    total.value = resData.total;
+  }
+  loading.value = false;
+};
+const pageIndexChange = () => {
+  switch (disscussType.value) {
+    case 'created_by_me':
+      fetchData();
+      break;
+    case 'join_to_me':
+      fetchJoinData();
+      break;
+  };
+};
+// const debouncedFetchData = debounce(() => fetchData(), 300);
+
+// const searchParams = computed(() => {
+//   return {
+//     title: titleQuery.value,
+//     page: pageQuery.page,
+//     size: pageQuery.size
+//   };
+// });
+
+// watch(titleQuery, () => {
+//   pageQuery.page = 1;
+// });
+
+// watch(searchParams, debouncedFetchData);
+const titleChange = debounce(() => {
+  disscussTypeChange();
+}, 500);
+const handleTitleChange = (e: KeyboardEvent) => {
+  // 回车触发
+  if (e.key === 'Enter') {
+    disscussTypeChange();
+  }
+};
+const bodyClick = () => {
+  // document.body.click();
+  pageQuery.page = 1;
+  pageIndexChange();
+};
+const clearInput = () => {
+  titleQuery.value = '';
+  titleChange();
+};
+onMounted(async () => {
+  await fetchData();
+});
+</script>
+
+<template>
+  <div class="dashboard-discussion space-y-4 mt-24">
+    <section class="space-y-1 flex items-center">
+      <d-select class="discuss-select" v-model="disscussType" :options="disscussTypeList"
+        @value-change="disscussTypeChange"></d-select>
+      <d-input class="flex-1" v-model="titleQuery" placeholder="搜索讨论" @keydown="handleTitleChange" clearable @clear="clearInput">
+        <template #prefix>
+          <Icon name="gt-search" />
+        </template>
+      </d-input>
+    </section>
+    <DataPanelV2 skeleton :loading="loading" :empty="!list?.length">
+      <section class="list">
+        <DashboardDiscussionListItem v-for="item in list" v-bind="item" :key="item.id"></DashboardDiscussionListItem>
+      </section>
+    </DataPanelV2>
+  </div>
+  <d-pagination class="justify-center mt-20 mb-20" size="md" :page-size-options="[10, 20, 50]" :show-page-selector="false"
+    :can-change-page-size="true" :max-items="5" v-model:pageSize="pageQuery.size" v-model:pageIndex="pageQuery.page"
+    :total="total" total-item-text="总计" :can-view-total="true" @page-size-change="bodyClick" auto-hide
+    @page-index-change="pageIndexChange" />
+</template>
+
+<style scoped lang="scss">
+@import 'devui-theme/styles-var/devui-var.scss';
+:deep(.devui-input) {
+  margin-top: 0 !important;
+}
+.discuss-select {
+  @apply w-[98px] mr-[16px]
+}
+
+.list>* {
+  @apply border-t-0 rounded-t-none rounded-b-none;
+}
+
+.list>*:first-child {
+  @apply border-t rounded-t;
+}
+
+.list>*:last-child {
+  @apply border-b-0;
+}
+</style>
--- a/src/views/Dashboard/Discussion/Joined/index.vue
+++ b/src/views/Dashboard/Discussion/Joined/index.vue
@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import DashboardDiscussionListItem from '@/components/Discussion/Dashboard/DashboardDiscussionListItem.vue';
+import type { discussionListItemType } from '@/api/discussion/types';
+import { reactive, shallowRef, watch, onMounted, ref, computed } from 'vue';
+import { myJoineddDiscuss } from '@/api/discussion';
+import debounce from 'lodash/debounce';
+
+defineOptions({
+  name: 'DiscussionJoined'
+});
+
+// 获取讨论列表
+const loading = ref(false);
+const pageQuery = reactive({
+  page: 1,
+  size: 10
+});
+const titleQuery = ref('');
+const total = ref(0);
+const list = shallowRef<discussionListItemType[]>([]);
+const fetchData = async() => {
+  if (loading.value) return;
+  loading.value = true;
+  const res = await myJoineddDiscuss(searchParams.value);
+  if (!res.error) {
+    const resData = res?.data?.data;
+    list.value = resData.records;
+    total.value = resData.total;
+  }
+  loading.value = false;
+};
+
+const debouncedFetchData = debounce(() => fetchData(), 300);
+
+const searchParams = computed(() => {
+  return {
+    title: titleQuery.value,
+    page: pageQuery.page,
+    size: pageQuery.size
+  };
+});
+
+watch(titleQuery, () => {
+  pageQuery.page = 1;
+});
+
+watch(searchParams, debouncedFetchData);
+
+const bodyClick = () => {
+  document.body.click();
+};
+
+onMounted(async() => {
+  await fetchData();
+});
+</script>
+
+<template>
+  <div class="dashboard-discussion space-y-4 mt-32">
+    <section class="space-y-1">
+      <d-input v-model="titleQuery" placeholder="搜索讨论">
+        <template #prefix>
+          <Icon name="gt-search" />
+        </template>
+      </d-input>
+    </section>
+    <DataPanel skeleton :loading="loading" :empty="!list?.length">
+      <section class="list g-content-card">
+        <DashboardDiscussionListItem v-for="item in list" v-bind="item" :key="item.id"></DashboardDiscussionListItem>
+      </section>
+    </DataPanel>
+  </div>
+  <d-pagination
+    class="justify-center mt-20 mb-20"
+    size="md"
+    :page-size-options="[10, 20, 50]"
+    :show-page-selector="false"
+    :can-change-page-size="true"
+    :max-items="5"
+    v-model:pageSize="pageQuery.size"
+    v-model:pageIndex="pageQuery.page"
+    :total="total"
+    total-item-text="总计"
+    :can-view-total="true"
+    @page-size-change="bodyClick"
+    auto-hide
+  />
+</template>
+
+<style scoped lang="scss">
+@import 'devui-theme/styles-var/devui-var.scss';
+$g-commit-border-radius: 0.25rem;
+
+.dashboard-discussion {
+  // @apply max-w-5xl;
+}
+.list > * {
+  @apply border-t-0 rounded-t-none rounded-b-none;
+}
+.list > *:first-child {
+  @apply border-t rounded-t;
+}
+.list > *:last-child {
+  @apply rounded-b;
+}
+.list.g-content-card {
+  overflow: hidden;
+}
+</style>