|
@@ -0,0 +1,198 @@
|
|
|
+<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;
|
|
|
+ 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>
|