cysci-website/src/components/list/list-page.vue

<template>
  <div id="list-page">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="top">
          <el-col :span="3" class="left">
            <span>|</span> <span>{{ title }}</span>
          </el-col>
          <el-col :span="21" class="right">
            <el-row type="flex" justify="end">
              <el-col :span="12" class="tabs" v-if="useTab">
                <tabs :displayList="displayList" :dropList="dropList" @toSearch="change"></tabs>
              </el-col>
              <el-col :span="12" class="search" v-if="useSearch">
                <search @toSearch="toSearch"></search>
              </el-col>
            </el-row>
          </el-col>
        </el-col>
        <el-col :span="24" class="down">
          <slot></slot>
          <!-- <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
            <el-col :span="21" class="name" @click.native="clickDetail(item.id)">
              {{ item.p1 }}
            </el-col>
            <el-col :span="3" class="date">
              {{ getDate(item.p2) }}
            </el-col>
            <el-col :span="24" class="brief"> 成果简介：{{ item.p3 || '暂无' }} </el-col>
          </el-col> -->
        </el-col>
        <el-col :span="24" class="page" v-if="usePage">
          <el-pagination @current-change="search" :current-page="currentPage" layout="total, prev, pager, next, jumper" :total="total" :page-size="pageSize">
          </el-pagination>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import tabs from './tabs.vue';
import search from './search.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'list-page',
  props: {
    useTab: { type: Boolean, default: false },
    useSearch: { type: Boolean, default: true },
    displayList: { type: Array, default: () => [] },
    dropList: { type: Array, default: () => [] },
    list: { type: Array, default: () => [] },
    searchModel: { type: String, default: 'name' },
    title: { type: String },
    total: { type: Number, default: 0 },
    pageSize: { type: Number, default: 5 },
    usePage: { type: Boolean, default: true },
  },
  components: { tabs, search },
  data: function () {
    return {
      searchInfo: undefined,
      currentPage: 1,
      condition: {},
    };
  },
  created() {},
  methods: {
    search(page = 1) {
      this.currentPage = page;
      const skip = (this.currentPage - 1) * this.pageSize;
      let condition = { skip, limit: this.pageSize, ...this.condition };
      if (this.searchInfo && this.searchInfo !== '') condition[this.searchModel] = this.searchInfo;
      console.log(condition);
      this.$emit('toSearch', condition);
    },
    toSearch(condition) {
      if (condition) {
        this.$set(this, `searchInfo`, condition);
      } else {
        this.$set(this, `searchInfo`, undefined);
      }
      this.currentPage = 1;
      this.search();
    },
    change(condition) {
      this.$set(this, `condition`, condition);
      this.currentPage = 1;
      this.search();
      // this.$emit('toChangeTab', condition);
    },
  },
  computed: {
    ...mapState(['user', 'menuParams']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.main {
  .top {
    height: 49px;
    border-bottom: 1px solid #ccc;
    padding: 5px 0 0 0;
    .left {
      text-align: left;
      span:first-child {
        color: #22529a;
        font-weight: bold;
        font-size: 25px;
      }
      span:last-child {
        color: #22529a;
        font-size: 20px;
        font-weight: bold;
      }
    }
    .right {
      .tabs {
        span {
          font-size: 16px;
          padding: 8px 10px;
          display: inline-block;
          font-weight: bold;
        }
        span:hover {
          cursor: pointer;
          color: #409eff;
        }
        .btn {
          padding: 0px 0 0 0;
          position: relative;
          top: 1px;
          i {
            font-size: 20px;
            font-weight: bold;
          }
        }
      }
      .search {
        /deep/.el-input__inner {
          height: 35px;
          line-height: 35px;
        }
      }
    }
  }
  .down {
    height: 500px;
    overflow: hidden;
    .list {
      padding: 10px 0;
      .name {
        font-size: 18px;
        font-weight: bold;
      }
      .date {
        font-size: 16px;
        text-align: center;
      }
      .brief {
        font-size: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        word-break: break-all;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        margin: 10px 0 0 0;
        max-height: 42px;
      }
    }
    .list:hover {
      cursor: pointer;
      .name {
        -webkit-transform: translateY(-3px);
        -ms-transform: translateY(-3px);
        transform: translateY(-3px);
        -webkit-box-shadow: 0 0 6px #999;
        box-shadow: 0 0 6px #999;
        -webkit-transition: all 0.5s ease-out;
        transition: all 0.5s ease-out;
        color: #0085d2;
      }
    }
  }
  .page {
    text-align: center;
    height: 30px;
    overflow: hidden;
  }
}
</style>