FE_IASF_client/src/pages/publication/monograph.vue

<template>
  <div class="wrap">
    <div class="forms">
      <div class="item">
        <span class="label">{{$t('column.Publicationtime')}}：</span>
        <el-date-picker
          style="width: 300px"
          v-model="form.publicationTime"
          type="year"
          :placeholder="$t('column.pleaseSelectThePublicationTime')"
          format="yyyy"
          value-format="yyyy"
          clearable
          @change="initData">
        </el-date-picker>
      </div>
      <div class="search">
        <input type="text" :placeholder="$t('column.PleasenameoftheAuthor')" v-model="form.monographQueryKeyWord" clearable>
      </div>
    </div>

    <el-table :data="list" class="patent-table" ref="table" stripe header-align="center">
      <el-table-column prop="title" :label="$t('column.titleOfWork')" align="center" min-width="150"></el-table-column>
      <el-table-column prop="publishingHouse" :label="$t('column.press')" align="center" min-width="150"></el-table-column>
      <el-table-column prop="writersAndEditors" :label="$t('column.authorPersion')" align="center" min-width="150"></el-table-column>
      <el-table-column prop="publicationYear" :label="$t('column.Publicationtime')" align="center" min-width="150"></el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination background @current-change="currentChange" :current-page="page" layout="total, prev, pager, next" :total="total"></el-pagination>
    </div>
  </div>
</template>

<script>
import Util from '@/libs/util';
import ColumnConst from '@/const/column'
export default {
  props: ['id'],
  data() {
    return {
      patentClasses: ColumnConst.patentClasses,
      searchTimer: null,
      form: {
        monographQueryKeyWord: '',
        publicationTime: ''
      },
      classifications: [],
      list: [],
      page: 1,
      pageSize: 10,
      total: 0,
    }
  },
  watch: {
    id() {
      this.id && this.initData()
    },
    'form.monographQueryKeyWord': 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.list = Util.removeTag(data.records);
          this.total = +data.total;
        })
        .catch((res) => { });
    },
    initData() {
      this.page = 1
      this.getArticle()
    },
    currentChange(val) {
      this.page = val
      this.getData()
    },
  }
};
</script>

<style lang="scss" scoped>
@import "../../styles/page/publication.scss";
/deep/.patent-table {
  thead tr, thead th {
    color: #fff;
    background-color: #1583FF;
  }
}
</style>