hi-ucs/front/src/views/home/components/KnowledgeBase.vue

<template>
  <div class="knowledge-base">
    <div class="zskTag">
      <span class="type">文件类型</span>
      <a-checkable-tag
        :checked="zskState.szkSelectedTags.indexOf(tag) > -1"
        v-for="tag in zskState.zskTags"
        :key="tag"
        @change="(checked) => zskHandleChange(tag, checked)"
      >
        {{ tag }}
      </a-checkable-tag>
    </div>
    <div class="top">
      <!-- <div class="left">昨日新增 {{ yNo }}条，本月新增 {{ mNo }}条</div> -->
      <div class="left">
        检索结果
        <span>{{ props.resourceTotal }}</span>
        条
      </div>
      <div class="right">发布时间</div>
    </div>
    <div class="bottom">
      <a-list size="large" :data-source="props.resourceList.data">
        <template #renderItem="{ item }">
          <a-list-item>
            <div class="left">
              <div class="text" @click="openHref(item)">
                {{ item.name }}
              </div>
            </div>
            <div class="right">
              <div class="time">{{ item.createDate }}</div>
            </div>
          </a-list-item>
        </template>
        <template #footer>
          <a-pagination
            v-model:current="current"
            :pageSize="5"
            :total="props.resourceTotal"
            show-less-items
            show-size-changer
            show-quick-jumper
            :page-size-options="pageSizeOptions"
            :showTotal="total => `共 ${total} 项`"
            @change="handleCurrentChange"
            :showSizeChanger="false"
          />
        </template>
      </a-list>
    </div>
  </div>
</template>
<script setup>
  import { ref, reactive, defineProps } from 'vue'
  import mybus from '@/myplugins/mybus'
  import { updateVisits, browsingInsert } from '@/api/home'
  const props = defineProps({
    resourceList: { type: Array, default: null },
    resourceTotal: { type: String, default: '' },
  })
  const pageSizeOptions = ref(['5', '10', '20', '50'])
  console.log('props==========>', props)
  // 知识库
  const zskState = reactive({
    zskTags: ['全部', '政策文件', '政策解读', '新闻发布会', '政府公报'],
    szkSelectedTags: ['全部'],
  })
  const current = ref(1)
  const openHref = (item) => {
    console.log(item.id, 'wowowo')
    console.log(item.visits, 'wowowo')
    browsingInsert({ resourceId: item.id }).then((res) => {
      // console.log(res)
    })
    const arrList = ref([])
    arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
    if (arrList.value.indexOf(item.id) === -1) {
      arrList.value.push(item.id)
      updateVisits({
        id: item.id,
        visits: item.visits || '0',
      }).then(() => {
        window.sessionStorage.setItem('visits', JSON.stringify(arrList.value))
      })
    }
    window.open(item.link)
    // window.open(
    //   window.SITE_CONFIG.previewUrl +
    //     'hisense_office/onlinePreview?url=' +
    //     btoa(encodeURI(item.fileHref))
    // )
  }
  const zskHandleChange = (tag, checked) => {
    console.log(tag, checked)
    current.value = 1
    if (tag !== '全部') {
      mybus.emit('changeInfo', { attrType: '文件类型', attrValue: tag })
    } else {
      mybus.emit('changeInfo')
    }
    zskState.szkSelectedTags = [tag]
  }

  const handleCurrentChange = (val) => {
    current.value = val
    mybus.emit('changePage', val)
  }
</script>
<style lang="less" scoped>
  .knowledge-base {
    .resultListSearchInput {
      :deep(.ant-input) {
        width: 400px;
        height: 36px;
        background: #f5f5f5;
        border-radius: 4px;
      }
      :deep(.ant-input-search-button) {
        width: 80px;
        height: 36px;
        background: #0087ff;
        border-radius: 4px !important;
        font-size: 14px;
        font-weight: 400;
        color: #fff;
        line-height: 34px;
        margin-left: 10px;
      }
      :deep(.ant-input-group-addon) {
        left: 0 !important;
      }
    }
    .button-reset {
      border: 0;
      outline: none;
      width: 80px;
      height: 36px;
      background: #e1edfa;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 400;
      color: #0087ff;
      line-height: 34px;
      margin-left: 250px;
      cursor: pointer;
    }
    .zskTag {
      margin: 20px 10px;
      // display: flex;
      // justify-content: center;
      border-top: 1px solid #eee;
      padding-top: 20px;
      .type {
        padding: 0 10px 0 0;
        font-size: 18px;
        font-weight: 600;
        border-right: 1px solid #eee;
      }
      .ant-tag {
        font-size: 18px;
        padding: 5px;
        margin-left: 10px;
      }
      .ant-tag-checkable-checked {
        background: #e5eefc;
        color: #3971e5;
      }
    }
    .top {
      display: flex;
      justify-content: space-between;
      border-top: 1px solid #eee;
      margin: 10px 0;
      padding: 30px 10px 0;
      span {
        color: #0058e1;
        font-weight: 600;
      }
    }
    :deep(.ant-list-bordered) {
      border: none;
      .ant-list-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #eee;
        border: 1px solid #ddd;
        border-bottom: none;
        .left {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          svg {
            margin-right: 5px;
          }
          .text {
            font-size: 16px;
            cursor: pointer;
            &:hover {
              color: #0087ff;
            }
          }
        }
      }
      .ant-list-footer {
        border-top: 1px solid #ddd;
      }
    }
  }
  :deep(.ant-list-item:nth-child(odd)) {
    background: #f7f7f7 !important;
  }
  :deep(.ant-list-item:nth-child(even)) {
    background: #fff !important;
  }
</style>