jialong.yu
/
FE_IASF_server
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 3 Wiki Activity

文章页分页和搜索缓存

Browse Source
master
yujialong 1 day ago
parent 4b6d931aa0
commit 154905cb51
2 changed files with 88 additions and 167 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      src/pages/article/add/index.vue
  2. 248
      src/pages/article/list/index.vue

7
src/pages/article/add/index.vue
Unescape View File

@ -1313,7 +1313,12 @@ export default {
this.$post(this.api.updateArticle, form).then(res => {
this.updateFile(fileId, form, form.id)
Util.successMsg('修改成功')
next ? next() : this.$router.push(`list?columnId=` + form.columnId + (form.columnId != this.originColumnId ? '&last=1' : '')) // 更改了所属栏目，则给列表传递一个last参数，跳转到最后一页
if (next) {
next()
} else {
// 更改了所属栏目，则给列表传递一个last参数，跳转到最后一页
form.columnId != this.originColumnId ? this.$router.push(`list?columnId=${form.columnId}&last=1`) : this.$router.back()
}
}).catch(err => {
this.submiting = false
})

248
src/pages/article/list/index.vue
Unescape View File

@ -3,189 +3,100 @@
<div style="width: 218px;border-right: 1px solid #EBEDF0">
<p class="page-name mb">全部栏目</p>
<div style="height: calc(100vh - 190px);overflow: auto">
<el-tree ref="column"
:data="columns"
highlight-current
:expand-on-click-node="false"
default-expand-all
:props="defaultProps"
node-key="id"
@node-click="initData">
<span class="custom-tree-node"
slot-scope="{ node, data }">
<span class="org-name"
:title="node.label">{{ node.label }}</span>
<el-tree ref="column" :data="columns" highlight-current :expand-on-click-node="false" default-expand-all
:props="defaultProps" node-key="id" @node-click="initData">
<span class="custom-tree-node" slot-scope="{ node, data }">
<span class="org-name" :title="node.label">{{ node.label }}</span>
</span>
</el-tree>
</div>
</div>
<div class="p-l-20"
style="width: calc(100% - 219px);">
<div class="p-l-20" style="width: calc(100% - 219px);">
<div class="tool">
<div class="search-wrap">
<el-select v-model="field"
@change="initData">
<el-option v-for="(item, i) in keywords"
:key="i"
:label="item.name"
:value="item.id">
<el-select v-model="field" @change="initData">
<el-option v-for="(item, i) in keywords" :key="i" :label="item.name" :value="item.id">
</el-option>
</el-select>
<el-input class="keyword"
:placeholder="'请输入' + keywords.find(e => e.id === field).name"
v-model.trim="keyword"
clearable></el-input>
<el-input class="keyword" :placeholder="'请输入' + keywords.find(e => e.id === field).name"
v-model.trim="keyword" clearable></el-input>
</div>
<div class="actions">
<el-dropdown class="setting"
trigger="click"
:hide-on-click="false">
<img class="icon"
src="@/assets/images/setting.png"
alt="">
<el-dropdown class="setting" trigger="click" :hide-on-click="false">
<img class="icon" src="@/assets/images/setting.png" alt="">
<el-dropdown-menu>
<el-dropdown-item>
<el-button @click="resetColumns"
type="text">列重置</el-button>
<el-button @click="resetColumns" type="text">列重置</el-button>
</el-dropdown-item>
<el-dropdown-item v-for="(column, i) in settings"
:key="i"
:divided="i === 0">
<el-dropdown-item v-for="(column, i) in settings" :key="i" :divided="i === 0">
<el-checkbox v-model="column.show">{{ column.name }}</el-checkbox>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-button v-auth="'/site/list:' + siteName + ':内容管理:文章管理:新增'"
type="primary"
@click="add">新增</el-button>
<el-button v-auth="'/site/list:' + siteName + ':内容管理:文章管理:删除'"
@click="batchDel">删除</el-button>
<el-button v-auth="'/site/list:' + siteName + ':内容管理:文章管理:新增'" type="primary" @click="add">新增</el-button>
<el-button v-auth="'/site/list:' + siteName + ':内容管理:文章管理:删除'" @click="batchDel">删除</el-button>
</div>
</div>
<el-table :data="list"
class="table"
ref="table"
header-align="center"
@selection-change="handleSelectionChange"
row-key="id"
@sort-change="sortChange">
<el-table-column v-if="settings[0].show"
type="selection"
width="55"
align="center"
:reserve-selection="true"></el-table-column>
<el-table-column type="index"
width="60"
label="序号"
align="center">
<el-table :data="list" class="table" ref="table" header-align="center" @selection-change="handleSelectionChange"
row-key="id" @sort-change="sortChange">
<el-table-column v-if="settings[0].show" type="selection" width="55" align="center"
:reserve-selection="true"></el-table-column>
<el-table-column type="index" width="60" label="序号" align="center">
<template scope="scope">
<span>{{(page - 1) * pageSize + scope.$index + 1}}</span>
<span>{{ (page - 1) * pageSize + scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column v-if="settings[1].show"
show-overflow-tooltip
prop="title"
label="标题"
align="center"
min-width="150"></el-table-column>
<el-table-column v-if="settings[2].show"
prop="columnName"
label="栏目"
align="center"
min-width="120"></el-table-column>
<el-table-column v-if="settings[3].show"
prop="classificationName"
label="所属分类"
align="center"
min-width="120"></el-table-column>
<el-table-column v-if="settings[4].show"
prop="typeId"
label="栏目类型"
align="center"
min-width="100">
<el-table-column v-if="settings[1].show" show-overflow-tooltip prop="title" label="标题" align="center"
min-width="150"></el-table-column>
<el-table-column v-if="settings[2].show" prop="columnName" label="栏目" align="center"
min-width="120"></el-table-column>
<el-table-column v-if="settings[3].show" prop="classificationName" label="所属分类" align="center"
min-width="120"></el-table-column>
<el-table-column v-if="settings[4].show" prop="typeId" label="栏目类型" align="center" min-width="100">
<template slot-scope="scope">
{{ types.find(e => e.id === scope.row.typeId).name }}
</template>
</el-table-column>
<el-table-column v-if="settings[5].show"
prop="founderName"
label="录入人"
align="center"
min-width="80"></el-table-column>
<el-table-column v-if="settings[6].show"
prop="editorName"
label="修改人"
align="center"
min-width="80"></el-table-column>
<el-table-column v-if="settings[7].show"
prop="updateTime"
label="修改日期"
align="center"
min-width="150"
sortable="custom"></el-table-column>
<el-table-column v-if="settings[8].show"
prop="releaseTime"
label="发布日期"
align="center"
min-width="100"
sortable="custom"></el-table-column>
<el-table-column v-if="settings[9].show"
prop="totalBrowsing"
label="总浏览"
align="center"
min-width="70"></el-table-column>
<el-table-column v-if="settings[10].show"
prop="workNumber"
label="状态"
align="center"
min-width="80">
<el-table-column v-if="settings[5].show" prop="founderName" label="录入人" align="center"
min-width="80"></el-table-column>
<el-table-column v-if="settings[6].show" prop="editorName" label="修改人" align="center"
min-width="80"></el-table-column>
<el-table-column v-if="settings[7].show" prop="updateTime" label="修改日期" align="center" min-width="150"
sortable="custom"></el-table-column>
<el-table-column v-if="settings[8].show" prop="releaseTime" label="发布日期" align="center" min-width="100"
sortable="custom"></el-table-column>
<el-table-column v-if="settings[9].show" prop="totalBrowsing" label="总浏览" align="center"
min-width="70"></el-table-column>
<el-table-column v-if="settings[10].show" prop="workNumber" label="状态" align="center" min-width="80">
<template slot-scope="scope">
{{ scope.row.isRelease ? '已发布' : '草稿' }}
</template>
</el-table-column>
<el-table-column v-auth="'/site/list:' + siteName + ':内容管理:文章管理:置顶'"
prop="sequence"
label="置顶"
align="center"
min-width="80"
sortable="custom">
<el-table-column v-auth="'/site/list:' + siteName + ':内容管理:文章管理:置顶'" prop="sequence" label="置顶" align="center"
min-width="80" sortable="custom">
<template slot-scope="scope">
<i v-if="scope.row.isRelease"
:class="['squ-icon', scope.row.isTop ? 'el-icon-check' : 'el-icon-close']"
@click="sticky(scope.row)"></i>
<i v-if="scope.row.isRelease" :class="['squ-icon', scope.row.isTop ? 'el-icon-check' : 'el-icon-close']"
@click="sticky(scope.row)"></i>
</template>
</el-table-column>
<el-table-column v-if="settings[11].show"
label="操作"
align="center"
width="190">
<el-table-column v-if="settings[11].show" label="操作" align="center" width="190">
<template slot-scope="scope">
<el-button v-auth="'/site/list:' + siteName + ':内容管理:文章管理:预览'"
type="text"
@click="preview(scope.row)">预览</el-button>
<el-button v-auth="'/site/list:' + siteName + ':内容管理:文章管理:编辑'"
type="text"
@click="edit(scope.row)">编辑</el-button>
<el-button v-auth="'/site/list:' + siteName + ':内容管理:文章管理:删除'"
type="text"
@click="handleDelete(scope.row)">删除</el-button>
<el-switch v-if="scope.row.isRelease"
v-auth="'/site/list:' + siteName + ':内容管理:文章管理:禁用'"
class="m-l-10"
v-model="scope.row.isDisable"
:active-value="0"
:inactive-value="1"
@change="switchOff($event, scope.row, scope.$index)">
<el-button v-auth="'/site/list:' + siteName + ':内容管理:文章管理:预览'" type="text"
@click="preview(scope.row)">预览</el-button>
<el-button v-auth="'/site/list:' + siteName + ':内容管理:文章管理:编辑'" type="text"
@click="edit(scope.row)">编辑</el-button>
<el-button v-auth="'/site/list:' + siteName + ':内容管理:文章管理:删除'" type="text"
@click="handleDelete(scope.row)">删除</el-button>
<el-switch v-if="scope.row.isRelease" v-auth="'/site/list:' + siteName + ':内容管理:文章管理:禁用'" class="m-l-10"
v-model="scope.row.isDisable" :active-value="0" :inactive-value="1"
@change="switchOff($event, scope.row, scope.$index)">
</el-switch>
</template>
</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>
<el-pagination background @current-change="currentChange" :current-page="page" layout="total, prev, pager, next"
:total="total"></el-pagination>
</div>
</div>
</div>
@ -226,9 +137,9 @@ export default {
name: '修改人'
}
],
keyword: '',
keyword: this.$route.query.keyword || '',
list: [],
page: 1,
page: +this.$route.query.page || 1,
pageSize: 10,
total: 0,
modifiedTimeSort: '',
@ -336,7 +247,7 @@ export default {
// 文章列表
getData () {
const id = this.$refs.column.getCurrentKey()
this.$router.push(`/article?columnId=${id}`).catch(e => { })
this.$router.push(`/article?columnId=${id}&page=${this.page}&keyword=${this.keyword || ''}`).catch(e => { })
const keyword = encodeURI(this.keyword)
const data = {
siteId: this.$store.state.content.site.id,
@ -494,30 +405,35 @@ export default {
<style lang="scss" scoped>
.custom-tree-node {
display: inline-flex;
align-items: center;
display: inline-flex;
align-items: center;
}
.name {
display: inline-block;
max-width: 160px;
margin-right: 20px;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
max-width: 160px;
margin-right: 20px;
overflow: hidden;
text-overflow: ellipsis;
}
.squ-icon {
font-size: 16px;
font-weight: 600;
cursor: pointer;
color: #f70000;
&.el-icon-check {
color: #05991e;
}
font-size: 16px;
font-weight: 600;
cursor: pointer;
color: #f70000;
&.el-icon-check {
color: #05991e;
}
}
/deep/.squ-input {
width: auto;
.el-input__inner {
width: 60px;
padding: 0 10px;
}
width: auto;
.el-input__inner {
width: 60px;
padding: 0 10px;
}
}
</style>
Write Preview
Loading…
Cancel
Save