FE_IASF_client/src/pages/publication/thesis.vue

<template>
  <div class="wrap">
    <div class="forms">
      <div class="item">
        <span class="label">{{$t('column.publicationyear')}}：</span>
        <el-date-picker
          style="width: 300px"
          v-model="form.publicationYear"
          type="year"
          :placeholder="$t('column.pleaseSelectThePublicationTime')"
          format="yyyy"
          value-format="yyyy"
          clearable
          @change="initData">
        </el-date-picker>
      </div>
      <div class="search">
        <el-tooltip class="item" effect="dark" :content="$t('column.PleaseEnterThePaperName')" placement="top-start">
          <input type="text" :placeholder="$t('column.PleaseEnterThePaperName')" v-model="form.paperQueryKeyWord" clearable>
        </el-tooltip>
      </div>
    </div>

    <ul class="list">
      <li v-for="(item, i) in articles" :key="i" @click="$parent.toArtice(item)">
        <h6>{{ item.title }}</h6>
        <p class="meta">{{$t('column.author')}}: {{ item.author }}</p>
        <p class="meta">{{$t('column.journalName')}}: {{ item.periodicalName }}</p>
        <p class="meta">{{$t('column.yearOfPublication')}}: {{ item.publicationYear }} &nbsp; &nbsp; {{$t('column.rollUp')}}: {{ item.reel }}   &nbsp; &nbsp; {{$t('column.documentNumber')}}: {{ item.documentNumber }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import Util from '@/libs/util';
export default {
  props: ['id'],
  data() {
    return {
      searchTimer: null,
      form: {
        paperQueryKeyWord: '',
        publicationYear: ''
      },
      classifications: [],
      articles: [],
      page: 1,
      pageSize: 10,
      total: 0,
    }
  },
  watch: {
    id() {
      this.id && this.initData()
    },
    'form.paperQueryKeyWord': function (val) {
      clearTimeout(this.searchTimer);
      this.searchTimer = setTimeout(() => {
        this.initData();
      }, 500);
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    // 查询文章列表
    getArticle() {
      this.id && this.$post(this.api.newlyPublishedArticles, {
        siteId: this.$route.query.siteId || this.$store.state.content.site,
        columnIds: this.id,
        pageNum: this.page,
        pageSize: this.pageSize,
        ...this.form
      })
        .then(({ data }) => {
          this.articles = Util.removeTag(data.records);
          this.total = +data.total;
        })
        .catch((res) => { });
    },
    initData() {
      this.page = 1
      this.getArticle()
    },
  }
};
</script>

<style lang="scss" scoped>
@import "../../styles/page/publication.scss";
.list {
  li {
    padding: 30px;
    margin-bottom: 15px;
    background-color: #fff;
    cursor: pointer;
  }
  h6 {
    margin-bottom: 10px;
    font-size: 1.2rem;
  }
  .meta {
    font-size: 1rem;
    color: #666;
    line-height: 30px;
  }
}
</style>