搜索结果列表页面开发

src/views/Org/components/CommunityDynamics.vue

@@ -0,0 +1,175 @@
+<template>
+  <div>
+    <Panel class="selite overflow-hidden" :blank="false">
+      <template #header>
+        <div class="selite-lefthead">
+          <Icon name="gt-comment-c" size="16px" class="mr-20" />
+          <span class="selite-dspan">社区动态</span>
+        </div>
+      </template>
+      <template #headerRight>
+        <span class="cursor-pointer" @click="naviTo">
+          <GIcon name="gt-more-operate" />
+        </span>
+      </template>
+
+      <DataPanel class="org-repos-table overflow-hidden" :loading="loadingStatus.dynamicLoading" :empty="!comList?.length" :card="false"
+        skeleton>
+        <template v-for="(item, index) in comList" :key="item.id">
+          <div class="selite-content px-[20px] py-[16px]">
+            <div>
+              <span class="text-B600 text-base font-medium leading-[24px]">#{{ item.category.category_name
+              }}</span>
+              <span class="ml-[8px] text-G900 text-base font-medium leading-[24px]">
+                <GLink class="info-content__title ellipsis"
+                  :to="{ name: `orgDiscussionDetail`, params: { serialNumber: item.serial_number } }">
+                  {{ item.title }}
+                </GLink>
+              </span>
+            </div>
+            <div class="mt-[8px]">
+              <span class="text-CG600 text-sm font-normal leading-[20px]">{{ item.created_by_user_name }}</span>
+              <span class="ml-[16px] text-CG600 text-sm font-normal leading-[20px]">创建于<Time
+                  :time="item.created_date" /></span>
+              <GIcon class="ml-[16px]" name="gt-comment" />
+              <span class="ml-[4px] text-CG600 text-sm font-normal leading-[20px]">{{ item.comment_total }}</span>
+              <GIcon v-if="item.isAnswered === 1" color="#0EB07B" class="ml-[16px]" name="gt-success" />
+              <span v-if="item.isAnswered === 1"
+                class="ml-[4px] text-GN500 text-sm font-normal leading-[20px]">评论已采纳</span>
+            </div>
+          </div>
+          <div class="line"></div>
+        </template>
+      </DataPanel>
+    </Panel>
+    <d-pagination class=" px-[20px] py-[20px] flex justify-center" :page-size-options="[10, 20, 50]" auto-hide
+      :total="discussPager.total" v-model:pageSize="discussPager.pageSize" v-model:pageIndex="discussPager.pageIndex"
+      :can-view-total="true" :can-change-page-size="true" @page-index-change="getDiscussData()"
+      @page-size-change="sizeChangeFun" :max-items="5" />
+    <!-- <GLink v-if="visitableReport" @click="emit('report')" class="report">举报</GLink> -->
+  </div>
+</template>
+<script setup lang="ts">
+defineOptions({ name: 'community-dynamics' });
+import { ref, reactive, watch, computed } from 'vue';
+import { useRouter } from 'vue-router';
+import Panel from '@/components/Panel/index.vue';
+import { getOrgInfo } from '@/views/Org/hooks/orgInfo';
+
+const { namespace, discussData, discussPager, loadingStatus, getDiscussData } = getOrgInfo();
+getDiscussData();
+
+const comList = computed(() => {
+  return discussData.value;
+});
+const router = useRouter();
+// 更多跳转
+const naviTo = () => {
+  router.push({
+    name: 'orgDiscussion',
+    params: { namespace: namespace.value }
+  });
+};
+// 每页条数变化
+const sizeChangeFun = (size: number) => {
+  discussPager.pageIndex = 1;
+  getDiscussData();
+};
+
+// 监听组织路径变化
+// 监听路由后面需要优化成路由监听
+let lastNameSpace = namespace.value;
+watch(() => namespace.value, (val, oldVal) => {
+  if (val !== lastNameSpace) {
+    onUpdate();
+  }
+  lastNameSpace = val;
+}, {
+  deep: true
+});
+
+// 项目设置后更新
+const onUpdate = () => {
+  getDiscussData();
+};
+
+</script>
+<style lang="scss" scoped>
+.selite {
+  .selite-lefthead {
+    line-height: 20px;
+    display: flex;
+    align-items: center;
+
+    .selite-icon {
+      margin-right: 21px;
+    }
+
+    .selite-dspan {
+      color: var(--color-G900);
+      font-size: var(--text-sm);
+      font-weight: 500;
+    }
+  }
+
+  .selite-content {
+    .is-last {
+      :deep(.g-repo-item) {
+        border-bottom: none;
+      }
+    }
+
+    :deep(.g-repo-item) {
+      border-top: none;
+      border-left: none;
+      border-right: none;
+      border-radius: 0;
+      box-shadow: none;
+    }
+  }
+
+  .selite-flex {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .line-1 {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  .text-B600 {
+    color: #2562C4;
+  }
+
+  .text-GN500 {
+    color: #0EB07B;
+  }
+
+  .des-div {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    word-break: break-word;
+  }
+
+  .line {
+    width: 100%;
+    height: 1px;
+    background: #F0F1F2;
+  }
+
+  .info-content__title {
+    cursor: pointer;
+
+    &:hover {
+      color: var(--color-font);
+    }
+  }
+}
+</style>
+