FE_IASF_client/src/pages/publication/monograph.vue

<template>
  <div class="wrap">
    <div class="forms">
      <div class="item">
        <span class="label">出版时间：</span>
        <el-date-picker
          style="width: 300px"
          v-model="form.publicationYear"
          type="year"
          placeholder="请选择出版时间"
          format="yyyy"
          value-format="yyyy"
          @change="initData">
        </el-date-picker>
      </div>
      <div class="search">
        <input type="text" placeholder="请输入著作名称/出版社名称/编写人员" v-model="form.title">
        <i class="icon">
          <img src="@/assets/images/search-white.png" alt="">
        </i>
      </div>
    </div>

    <el-table :data="list" class="patent-table" ref="table" stripe header-align="center">
      <el-table-column prop="title" label="著作名称" align="center" min-width="150"></el-table-column>
      <el-table-column prop="publishingHouse" label="出版社" align="center" min-width="150"></el-table-column>
      <el-table-column prop="writersAndEditors" label="编写人员" align="center" min-width="150"></el-table-column>
      <el-table-column prop="publicationYear" label="出版时间" 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: {
        patentClassId: '',
        applicationDate: ''
      },
      classifications: [],
      list: [],
      page: 1,
      pageSize: 10,
      total: 0,
    }
  },
  watch: {
    id() {
      this.id && this.initData()
    },
    'form.title': 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>
.forms {
  display: flex;
  align-items: center;
  padding: 30px;
  margin-bottom: 20px;
  background-color: #fff;
  .item {
    display: inline-flex;
    align-items: center;
    margin-right: 30px;
  }
  .label {
    font-size: 16px;
    color: #333;
    white-space: nowrap;
  }
  /deep/.el-input__inner {
    width: 100%;
    height: 48px;
    line-height: 48px;
    border: 0;
    background: #F7F7F7;
  }
  .search {
    display: inline-flex;
    width: 34%;
    input {
      width: 100%;
      height: 48px;
      padding: 0 15px;
      font-size: 14px;
      color: #333;
      background: #F7F7F7;
      border: 0;
      border-top-left-radius: 6px;
      border-bottom-left-radius: 6px;
      &:focus {
        outline: none;
      }
    }
  }
  .icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 62px;
    height: 48px;
    background: #1583FF;
    border-radius: 0px 6px 6px 0px;
    cursor: pointer;
  }
}
/deep/.patent-table {
  thead tr, thead th {
    color: #fff;
    background-color: #1583FF;
  }
}
</style>