1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<template>
<div class="app-container">
<div class="app-header">
<div class="search-logo"></div>
<el-input prefix-icon="el-icon-search" placeholder="例如:腾讯" @keyup.enter.native="searchDocument" v-model="search" class="input-with-select">
<el-button slot="append" @click="searchDocument">搜索文档</el-button>
</el-input>
</div>
<div class="content">
<div class="content-left scroll">
<div v-if="loadingLeft" class="content-right-content loading loading-left">
<div class="loading-div">
<i class="el-icon-loading loading-center"></i>
<div>加载中...</div>
</div>
</div>
<div class="content-left-center scroll">
<div v-if="!listLeft.length && !loadingLeft" class="not-data">暂无数据</div>
<div class="left-content" v-for="(item, index) in listLeft" :key="index">
<div class="left-content-title">
<div class="logo"><img src="../../../assets/image/juliang.png" alt="" class="logo-img"></div>
<span class="media text">{{item.name}}</span>
<span class="text">更新日期:{{dateFilter(item.createTime)}}</span>
</div>
<div class="content-text-header">
<a class="link" v-if="item.docUrl" :href="item.docUrl" target="_blank">{{item.title}}</a>
<span v-else>{{item.title}}</span>
</div>
<p class="content-text" v-html="item.docContent"></p>
</div>
<pagination v-show="queryParamsLeft.pageContent>0 && loadMoreLeft && listLeft.length"
:total="queryParamsLeft.pageContent"
:page.sync="queryParamsLeft.pageNo"
:limit.sync="queryParamsLeft.pageSize"
layout="total, prev, pager, next"
@pagination="seatchInitLeft" />
<!-- <div class="add-more" v-if="loadMoreLeft && listLeft.length" @click="seatchInitLeft"><span v-if="loadingLeft">加载中</span><span v-else>加载更多</span></div> -->
</div>
</div>
</div>
</div>
</template>
<script>
// 接口调用方法
import {
documentFindDocument
} from "@/api/system/product";
export default {
data() {
return {
search: '',
loadingLeft: false,
loadMoreLeft: true,
queryParamsLeft: {
pageNo: 1,
pageSize: 10,
pageContent: 0
},
listLeft: []
}
},
watch: {},
created() {
let searchDocument = localStorage.getItem("searchDocument")
let searchs = this.$route.params.search
if (searchs) {
this.search = searchs
localStorage.setItem("searchDocument", searchs)
this.searchDocument()
} else if (searchDocument) {
this.search = searchDocument
this.searchDocument()
} else {
this.clearData()
}
},
computed: {
},
methods: {
// 搜索
searchDocument() {
this.clearData()
if (!this.search.trim()) {
this.$message({
message: '请输入需要搜索的内容',
type: 'warning'
})
return
}
localStorage.setItem("searchDocument", this.search.trim())
this.seatchInitLeft()
},
dateFilter(time) {
if (!time) {
// 当时间是null或者无效格式时我们返回空
return '-'
} else {
const date = new Date(time) // 时间戳为10位需*1000,时间戳为13位的话不需乘1000
const dateNumFun = (num) => num < 10 ? `0${num}` : num // 使用箭头函数和三目运算以及es6字符串的简单操作。因为只有一个操作不需要{} ,目的就是数字小于10,例如9那么就加上一个0,变成09,否则就返回本身。 // 这是es6的解构赋值。
const [Y, M, D, h, m, s] = [
date.getFullYear(),
dateNumFun(date.getMonth() + 1),
dateNumFun(date.getDate()),
dateNumFun(date.getHours()),
dateNumFun(date.getMinutes()),
dateNumFun(date.getSeconds())
]
return `${Y}-${M}-${D} ${h}:${m}:${s}` // 一定要注意是反引号,否则无效。
}
},
// 搜索左侧
seatchInitLeft() {
this.loadingLeft = true
let name = this.search
let pageindex = this.queryParamsLeft.pageNo
let pagesize = this.queryParamsLeft.pageSize
documentFindDocument({ name, pageindex, pagesize })
.then(response => {
let data = response.content.value
if (response.code === 200 && data.length) {
let pageContent = this.queryParamsLeft.pageContent
if (response.content.totalSize !== pageContent) {
this.queryParamsLeft.pageContent = response.content.totalSize || 0
}
for (let i = 0; i < data.length; i++) {
data[i].docContent = data[i].docContent ? data[i].docContent + '...' : '-'
}
this.$set(this, 'listLeft', data)
} else {
this.$set(this, 'listLeft', [])
}
this.loadingLeft = false
})
.catch(error => {
this.loadingLeft = false;
});
setTimeout(() => {
this.loadingLeft = false
}, 1000);
},
// 数据初始化
clearData() {
this.loadMoreLeft = true
this.loadingLeft = false
this.queryParamsLeft = {
pageNo: 1,
pageSize: 10,
pageContent: 0
}
this.listLeft = []
}
}
}
</script>
<style scoped lang="scss">
@import '@/views/main.scss';
</style>