Situation-Awareness-Platform-Frontend/src/views/Org/components/CommunityDynamics.vue

<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>