You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
cloudnote_web/pages/index/document.vue

176 lines
5.8 KiB

<template>
<div>
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-form-item :label="$t('document.form.title')" prop="title">
<el-col :span="4">
<el-input v-model="form.title" :placeholder="$t('input_please',{keyword:$t('document.form.title')})"/>
</el-col>
</el-form-item>
<el-form-item :label="$t('document.form.author')" prop="author">
<el-col :span="4">
<el-input v-model="form.author" :placeholder="$t('input_please',{keyword:$t('document.form.author')})"/>
</el-col>
</el-form-item>
<el-form-item :label="$t('document.form.tag')" prop="tag">
<el-col :span="4">
<el-input v-model="form.tag" :placeholder="$t('input_please',{keyword:$t('document.form.tag')})"/>
</el-col>
</el-form-item>
<el-form-item :label="$t('document.form.profession')" prop="profession">
<el-col :span="4">
<el-input v-model="form.profession"
:placeholder="$t('input_please',{keyword:$t('document.form.profession')})"/>
</el-col>
</el-form-item>
<el-collapse v-model="activeNames">
<el-collapse-item :title="activeNames[0]==='1'?$t('hide_more_query'):$t('more_query')" name="1">
<el-form-item :label="$t('document.form.start_year')" prop="start_year">
<el-col :span="4">
<el-input v-model="form.start_year"
:placeholder="$t('input_please',{keyword:$t('document.form.start_year')})"/>
</el-col>
</el-form-item>
<el-form-item :label="$t('document.form.end_year')" prop="end_year">
<el-col :span="4">
<el-input v-model="form.end_year"
:placeholder="$t('input_please',{keyword:$t('document.form.end_year')})"/>
</el-col>
</el-form-item>
</el-collapse-item>
<el-form-item class="mt1">
<el-button type="success" @click="query">{{$t('button.query')}}</el-button>
<el-button type="info" @click="$refs.form.resetFields()">{{$t('reset')}}</el-button>
</el-form-item>
</el-collapse>
</el-form>
<el-row class="mt3">
<el-col :span="18">
<template v-if="docList.length===0">
<el-alert
:title="tip"
type="success"
:closable="false"
center>
</el-alert>
</template>
<template v-else>
<el-row v-for="(item,index) in docList" class="mt2" :key="index">
<el-row type="flex" align="middle">
<el-col :span="1"><span>{{index+1}}.</span></el-col>
<el-col :span="16" class="doc-title"><span>{{item.title}}</span></el-col>
</el-row>
<el-row type="flex" align="middle" class="center mt1">
<el-col :span="2"><span>[{{item.type}}]</span></el-col>
<el-col :span="1"><span>{{item.author}}</span></el-col>
<el-col :span="3"><span>{{item.profession}}</span></el-col>
<el-col :span="3"><span>{{item.school}}&nbsp{{item.year}}</span></el-col>
<el-col :span="4"><span>{{$t('document.doc_list.year')}}</span></el-col>
</el-row>
<el-row class="mt1">
<p class="doc-summary">{{item.summary}}</p>
</el-row>
<el-row class="mt1">
<el-col :span="10" class="doc-title">
<el-tag v-for="tag in item.tag.split(',')" :key="tag" class="ml1">{{tag}}</el-tag>
</el-col>
<el-col :span="2">
<el-button @click="read(item)">{{$t('reading_online')}}</el-button>
</el-col>
</el-row>
</el-row>
</template>
</el-col>
<el-col :span="5" class="ml3">
<el-row>
<h1 class="center">{{$t('today_recommend')}}</h1>
</el-row>
<div class="recommend-list">
<el-row v-for="(item,index) in recommend_list" :key="index">
<h3 class="center doc-title">{{item.title}}</h3>
<p class="doc-summary">{{item.summary}}</p>
</el-row>
</div>
</el-col>
</el-row>
<el-pagination
layout="prev, pager, next"
:total="total" class="center mt1">
</el-pagination>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
name: 'document',
data() {
return {
form: {
title: '',
author: '',
tag: '',
profession: '',
school: '',
tutor: '',
start_year: '',
end_year: '',
content: ''
},
rules: {},
activeNames: [],
docList: [],
recommend_list: [],
tip: this.$t('document.tip.empty'),
total:1
}
},
methods: {
read(item: any) {
this.$store.commit('menus/read')
this.$store.commit('read/open', item)
this.$router.push(this.localePath('/read'))
},
query(){
let that=this
this.GLOBAL.fetchGet('/v1/api/paper/list', {
title: this.form.title,
author: this.form.author,
tag: this.form.tag,
profession: this.form.profession,
startYear: this.form.start_year,
endYear: this.form.end_year
}, function(res) {
if(res.code==='200'){
that.docList=res.data.data
that.total=res.data.total
}else{
that.$message.error(that.$t('error_500').toString())
}
})
}
},
mounted() {
this.query()
}
})
</script>
<style>
.doc-title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.doc-summary {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.recommend-list {
overflow-y: scroll;
}
</style>