lunanting/jmalcloud-view
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改：网站管理界面，适配移动端

Browse Source
This commit is contained in:
jmal 2021-01-21 18:04:15 +08:00
parent 30e84b58a4
commit 0e7d958c07
10 changed files with 219 additions and 229 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/ShowFile/ShowFile.vue
View File

@ -3098,6 +3098,7 @@ export default {
} }
/deep/ .el-table td { /deep/ .el-table td {
padding: 0;
height: 50px !important; height: 50px !important;
} }

12
src/components/input/UploadImageInput.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<div> <div class="upload-input-image">
<select-file title="选择图片" @select="selectedFile" :visible.sync="dialogSelectFile"></select-file> <select-file title="选择图片" @select="selectedFile" :visible.sync="dialogSelectFile"></select-file>
<div class="upload"> <div class="upload">
<div class="url-desc url-desc-first">输入图片的url 或</div> <div class="url-desc url-desc-first">输入图片的url 或</div>
<el-button class="upload-select-btn" title="选择文件" type="primary" size="mini" icon="el-icon-folder" circle @click="dialogSelectFile = true"></el-button> <el-button class="upload-select-btn" title="选择文件" type="primary" size="small" icon="el-icon-folder" circle @click="dialogSelectFile = true"></el-button>
<el-upload <el-upload
ref="uploadRef" ref="uploadRef"
class="upload" class="upload"
@ -20,7 +20,7 @@
:on-remove="handleFileListRemove" :on-remove="handleFileListRemove"
:on-progress="handleProgress" :on-progress="handleProgress"
> >
<el-button title="上传" type="primary" size="mini" icon="el-icon-upload2" circle></el-button> <el-button title="上传" type="primary" size="small" icon="el-icon-upload2" circle></el-button>
<div class="url-desc" v-if="uploadState > 0" slot="tip"> <div class="url-desc" v-if="uploadState > 0" slot="tip">
<span v-show="uploadState === 1">图片上传中{{uploadPercentage}}%</span> <span v-show="uploadState === 1">图片上传中{{uploadPercentage}}%</span>
<span v-show="uploadState === 2">图片上传成功</span> <span v-show="uploadState === 2">图片上传成功</span>
@ -35,7 +35,7 @@
</el-upload> </el-upload>
</div> </div>
<el-tooltip class="item" effect="dark" placement="bottom"> <el-tooltip class="item" effect="dark" placement="bottom">
<el-input :autosize="{ minRows: 1, maxRows: 6}" type="textarea" width="100%" v-model="currentValue" @change="change" @input="input" @focus="isLocked = true"></el-input> <el-input :autosize="intputAutosize" type="textarea" width="100%" v-model="currentValue" @change="change" @input="input" @focus="isLocked = true"></el-input>
<div slot="content"> <div slot="content">
<el-image :style="{maxWidth: tipImageMaxWidth + 'px'}" :src="currentValue" fit="contain" @load="loadSuccess"> <el-image :style="{maxWidth: tipImageMaxWidth + 'px'}" :src="currentValue" fit="contain" @load="loadSuccess">
<div slot="error" class="image-slot"> <div slot="error" class="image-slot">
@ -63,6 +63,10 @@ export default {
tipImageMaxWidth: { tipImageMaxWidth: {
type: Number, type: Number,
default: 250 default: 250
},
intputAutosize: {
type: Object,
default: ()=>{ return { minRows: 1, maxRows: 6} }
} }
}, },
data() { data() {

51
src/components/select/MultipleTree.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<el-select <el-select
ref="treeSelect" ref="treeSelect"
size="mini" :size="size"
:value="valueTitles" v-model="valueTitles"
:clearable="clearable" :clearable="clearable"
multiple multiple
collapse-tags :collapse-tags="collapseTags"
:placeholder="placeholder" :placeholder="placeholder"
@clear="clearHandle" @clear="clearHandle"
@remove-tag="removeTag" @remove-tag="removeTag"
@ -27,7 +27,7 @@
:expand-on-click-node="false" :expand-on-click-node="false"
:check-strictly="true" :check-strictly="true"
:highlight-current="false" :highlight-current="false"
:default-expand-all="true" default-expand-all
:default-checked-keys="value" :default-checked-keys="value"
show-checkbox show-checkbox
@check="selectNode" @check="selectNode"
@ -74,7 +74,15 @@ export default {
placeholder:{ placeholder:{
type:String, type:String,
default:()=>{return "请选择"} default:()=>{return "请选择"}
} },
size: {
type: String,
default: 'small'
},
collapseTags: {
type:Boolean,
default:()=>{ return false }
},
}, },
data() { data() {
return { return {
@ -92,27 +100,19 @@ export default {
if(this.valueIds){ if(this.valueIds){
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.selectTree.setCheckedKeys(this.valueIds) this.$refs.selectTree.setCheckedKeys(this.valueIds)
if(this.valueIds.length > 0){ const that = this
this.valueTitles = this.$refs.selectTree.getCheckedNodes().map(node => node.name) setTimeout(function (){
} else { if(that.valueIds.length > 0){
this.valueTitles = [] that.valueTitles = that.$refs.selectTree.getCheckedNodes().map(node => node.name)
} } else {
that.valueTitles = []
}
}, 100)
}) })
} }
this.initScroll()
},
// 初始化滚动条
initScroll(){
this.$nextTick(()=>{
let scrollWrap = document.querySelectorAll('.el-scrollbar .el-select-dropdown__wrap')[0]
let scrollBar = document.querySelectorAll('.el-scrollbar .el-scrollbar__bar')
scrollWrap.style.cssText = 'margin: 0px; max-height: none; overflow: hidden;'
scrollBar.forEach(ele => ele.style.width = 0)
})
}, },
selectNode(props, data){ selectNode(props, data){
this.valueIds = data.checkedKeys this.valueIds = data.checkedKeys
this.valueTitles = data.checkedNodes.map(node => node.name)
this.$emit('input', this.valueIds) this.$emit('input', this.valueIds)
}, },
// 移除选中项 // 移除选中项
@ -144,13 +144,6 @@ export default {
<style scoped> <style scoped>
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item{ .el-scrollbar .el-scrollbar__view .el-select-dropdown__item{
height: auto; display: none;
max-height: 274px;
padding: 0;
overflow: hidden;
overflow-y: auto;
}
.el-select-dropdown__item.selected{
font-weight: normal;
} }
</style> </style>

22
src/components/select/tree.vue
View File

@ -9,6 +9,7 @@
:filter-method="filterMethod" :filter-method="filterMethod"
> >
<el-option :value="valueTitle" :label="valueTitle" class="options"> <el-option :value="valueTitle" :label="valueTitle" class="options">
</el-option>
<el-tree id="tree-option" <el-tree id="tree-option"
ref="selectTree" ref="selectTree"
:accordion="accordion" :accordion="accordion"
@ -23,7 +24,6 @@
:filter-node-method="filterNode" :filter-node-method="filterNode"
@node-click="handleNodeClick"> @node-click="handleNodeClick">
</el-tree> </el-tree>
</el-option>
</el-select> </el-select>
</template> </template>
@ -85,16 +85,6 @@ export default {
this.$refs.selectTree.setCurrentKey(this.valueId) // 设置默认选中 this.$refs.selectTree.setCurrentKey(this.valueId) // 设置默认选中
this.defaultExpandedKey = [this.valueId] // 设置默认展开 this.defaultExpandedKey = [this.valueId] // 设置默认展开
} }
this.initScroll()
},
// 初始化滚动条
initScroll(){
this.$nextTick(()=>{
let scrollWrap = document.querySelectorAll('.el-scrollbar .el-select-dropdown__wrap')[0]
let scrollBar = document.querySelectorAll('.el-scrollbar .el-scrollbar__bar')
scrollWrap.style.cssText = 'margin: 0px; max-height: none; overflow: hidden;'
scrollBar.forEach(ele => ele.style.width = 0)
})
}, },
// 切换选项 // 切换选项
handleNodeClick(node){ handleNodeClick(node){
@ -134,17 +124,9 @@ export default {
}; };
</script> </script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped> <style scoped>
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item{ .el-scrollbar .el-scrollbar__view .el-select-dropdown__item{
height: auto; display: none;
max-height: 274px;
padding: 0;
overflow: hidden;
overflow-y: auto;
}
.el-select-dropdown__item.selected{
font-weight: normal;
} }
ul li >>>.el-tree .el-tree-node__content{ ul li >>>.el-tree .el-tree-node__content{
height:auto; height:auto;

10
src/styles/index.scss
View File

@ -13,11 +13,11 @@ body {
font-family: Menlo,Monaco,Consolas,"Courier New",monospace;; font-family: Menlo,Monaco,Consolas,"Courier New",monospace;;
} }
///deep/::-webkit-scrollbar { /deep/::-webkit-scrollbar {
// /*滚动条整体样式*/ /*滚动条整体样式*/
// width: 10px; width: 12px;
// height: 10px; height: 12px;
//} }
/deep/::-webkit-scrollbar-thumb { /deep/::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/ /*滚动条里面小方块*/
height: 30px; height: 30px;

11
src/styles/setting.scss
View File

@ -174,18 +174,23 @@ a:hover {
margin-left: 0; margin-left: 0;
} }
} }
.text-align-right {
text-align: right;
}
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.query-item {
margin-bottom: 10px;
}
.search-form .el-form-actions { .search-form .el-form-actions {
text-align: right; text-align: right;
} }
/deep/ .el-dialog { /deep/ .el-dialog {
min-width: 100px;
width: 100%;
margin-top: 10vh!important; margin-top: 10vh!important;
} }
.dialog-avatar { .dialog-avatar {
/deep/.el-dialog { /deep/.el-dialog {
min-width: 100px;
width: 100%;
.container { .container {
display: block; display: block;
.img-container { .img-container {

90
src/views/markdown/index.vue
View File

@ -32,30 +32,25 @@
<el-date-picker <el-date-picker
v-model="file.uploadDate" v-model="file.uploadDate"
type="datetime" type="datetime"
size="small" size="medium"
value-format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd HH:mm:ss"> format="yyyy-MM-dd HH:mm:ss">
</el-date-picker> </el-date-picker>
<p class="mark-setting-label">文章封面：</p>
<upload-image-input v-model="file.cover" :intput-autosize="{ minRows: 2, maxRows: 6}"/>
<div v-if="!alonePage"> <div v-if="!alonePage">
<p class="mark-setting-label">分类：</p> <p class="mark-setting-label">分类：</p>
<el-tree <multiple-tree-select
class="category-tree" ref="selectTree"
ref="categoryTree" style="width: 100%"
node-key="id" size="medium"
:props="treeProps" placeholder="请选择分类"
:data="categories" :options="categories"
icon-class="-" v-model="file.categoryIds"
:check-on-click-node="true"
:expand-on-click-node="false"
:check-strictly="true"
:default-expand-all="true"
:default-checked-keys="file.categoryIds"
show-checkbox
@check="selectCategory"
> >
</el-tree> </multiple-tree-select>
</div> </div>
<div v-if="!alonePage"> <div v-if="!alonePage" class="setting-tags">
<p class="mark-setting-label">标签：</p> <p class="mark-setting-label">标签：</p>
<el-tag <el-tag
v-for="tag in dynamicTags" v-for="tag in dynamicTags"
@ -82,12 +77,10 @@
<div v-if="inputValueExist" class="instruction-error">该标签已存在</div> <div v-if="inputValueExist" class="instruction-error">该标签已存在</div>
<el-button v-if="!inputVisible" class="button-new-tag" size="small" @click="showInput"> + 新增标签 </el-button> <el-button v-if="!inputVisible" class="button-new-tag" size="small" @click="showInput"> + 新增标签 </el-button>
</div> </div>
<p class="mark-setting-label">文章封面：</p> <!-- <p class="mark-setting-label">-->
<upload-image-input v-model="file.cover"/> <!-- 其他：-->
<p class="mark-setting-label"> <!-- </p>-->
其他： <!-- <el-button size="small" @click="moreSet">更多设置</el-button>-->
</p>
<el-button size="small" @click="moreSet">更多设置</el-button>
</div> </div>
</div> </div>
</div> </div>
@ -116,6 +109,7 @@
import tagApi from "@/api/tag"; import tagApi from "@/api/tag";
import EditElement from "@/views/markdown/EditElement"; import EditElement from "@/views/markdown/EditElement";
import UploadImageInput from "@/components/input/UploadImageInput"; import UploadImageInput from "@/components/input/UploadImageInput";
import MultipleTreeSelect from "@/components/select/MultipleTree";
let toolbar = [ let toolbar = [
'emoji', 'emoji',
@ -159,6 +153,7 @@
export default { export default {
name: 'MarkdownEditor', name: 'MarkdownEditor',
components: { components: {
MultipleTreeSelect,
EditElement, EditElement,
DirTree, Vditor, UploadImageInput DirTree, Vditor, UploadImageInput
}, },
@ -179,7 +174,7 @@
editStatus: false, editStatus: false,
html:'', // 及时转的html html:'', // 及时转的html
filename: '', filename: '',
clientHeight: document.documentElement.clientHeight, clientHeight: document.documentElement.clientHeight - 150,
updating: false, updating: false,
storageLocation: '', storageLocation: '',
selectLocationVisible: false, selectLocationVisible: false,
@ -197,9 +192,6 @@
inputNewTagClass: 'input-new-tag', inputNewTagClass: 'input-new-tag',
inputErrorClass: 'input-error', inputErrorClass: 'input-error',
vditorLoading: false, vditorLoading: false,
treeProps: {
label: 'name',
},
releaseTime: undefined, releaseTime: undefined,
} }
}, },
@ -437,9 +429,6 @@
this.draft = false this.draft = false
this.update() this.update()
}, },
selectCategory(props, data){
this.file.categoryIds = data.checkedKeys
},
deleteDraft() { deleteDraft() {
this.$confirm('您确定要删除这份草稿吗?', '提示', { this.$confirm('您确定要删除这份草稿吗?', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
@ -583,31 +572,34 @@
width: 75%; width: 75%;
} }
.editor-right { .editor-right {
margin-top: 15px;
width: 25%; width: 25%;
.operation { .operation {
float: right; float: right;
} }
} }
} }
/deep/ .el-tag { .setting-tags {
margin-left: 8px; /deep/ .el-tag {
margin-top: 8px; margin-left: 8px;
} margin-top: 8px;
/deep/ .button-new-tag { }
margin-left: 8px; /deep/ .button-new-tag {
margin-top: 8px; margin-left: 8px;
height: 32px; margin-top: 8px;
line-height: 30px; height: 32px;
padding-top: 0; line-height: 30px;
padding-bottom: 0; padding-top: 0;
} padding-bottom: 0;
/deep/ .input-new-tag { }
margin-left: 8px; /deep/ .input-new-tag {
margin-top: 8px; margin-left: 8px;
max-width: 94px; margin-top: 8px;
vertical-align: bottom; max-width: 94px;
input { vertical-align: bottom;
padding: 0 5px; input {
padding: 0 5px;
}
} }
} }
/deep/ .input-error { /deep/ .input-error {

213
src/views/setting/articles/articleManager.vue
View File

@ -25,56 +25,54 @@
</div> </div>
<div> <div>
<div class="table-top"> <div class="table-top">
<div class="table-top-left"> <el-row>
<el-badge :hidden="draftNums === 0" :value="draftNums" class="item" type="primary"> <el-col :xs="24" :sm="5">
<el-radio-group v-model="query.radioStatus" size="mini" @change="getArticleList"> <div class="query-item">
<el-radio-button label="">可用</el-radio-button> <el-badge :hidden="draftNums === 0" :value="draftNums" type="primary">
<el-radio-button v-if="!alonePage" label="release">已发布</el-radio-button> <el-radio-group v-model="query.radioStatus" size="mini" @change="getArticleList">
<el-radio-button label="draft">草稿</el-radio-button> <el-radio-button label="">可用</el-radio-button>
</el-radio-group> <el-radio-button v-if="!alonePage" label="release">已发布</el-radio-button>
</el-badge> <el-radio-button label="draft">草稿</el-radio-button>
<span class="table-top-author">作者:</span> </el-radio-group>
<el-radio-group v-model="query.radioUser" size="mini" @change="getArticleList"> </el-badge>
<el-radio-button label="all">所有</el-radio-button> </div>
<el-radio-button label="my">我的</el-radio-button> </el-col>
</el-radio-group> <el-col :xs="24" :sm="5">
</div> <div class="query-item">
<div class="table-top-right"> <span class="table-top-author">作者:</span>
<el-button v-if="isFilter" type="text" size="mini" @click="cancelFilter">取消筛选</el-button> <el-radio-group v-model="query.radioUser" size="mini" @change="getArticleList">
<el-input v-model="query.keyword" size="mini" placeholder="请输入关键字" @keyup.enter.native="getArticleList"></el-input> <el-radio-button label="all">所有</el-radio-button>
<!-- <el-cascader--> <el-radio-button label="my">我的</el-radio-button>
<!-- v-if="!alonePage"--> </el-radio-group>
<!-- v-model="categoryIdsList"--> </div>
<!-- class="mark-setting-input"--> </el-col>
<!-- placeholder="不选择"--> <el-col :xs="24" :sm="14">
<!-- size="mini"--> <el-input
<!-- :collapse-tags="false"--> v-model="query.keyword"
<!-- :options="categories"--> class="query-item"
<!-- :show-all-levels="false"--> clearable
<!-- :props="{ multiple: true, checkStrictly: true, value: 'id', label: 'name' }"--> size="mini"
<!-- clearable--> placeholder="请输入关键字"
<!-- @change="selectCategory"--> @keyup.enter.native="getArticleList">
<!-- ></el-cascader>--> </el-input>
<!-- <tree-select--> <multiple-tree-select
<!-- ref="selectTree"--> ref="selectTree"
<!-- placeholder="请选择上级菜单"--> class="query-item"
<!-- :props="{value: 'id', label: 'name'}"--> placeholder="请选择分类"
<!-- :options="dataList"--> size="mini"
<!-- v-model="form.parentId"--> collapse-tags
<!-- clearable--> :options="categories"
<!-- />--> v-model="categoryIdsList"
<multiple-tree-select >
ref="selectTree" </multiple-tree-select>
placeholder="请选择分类" <el-button type="primary" size="mini" @click="theFilter">筛选</el-button>
:options="categories" <el-button v-if="isFilter" type="text" size="mini" @click="cancelFilter">取消筛选</el-button>
v-model="categoryIdsList" </el-col>
> </el-row>
</multiple-tree-select>
<el-button type="primary" size="mini" @click="getArticleList">筛选</el-button>
</div>
</div> </div>
<el-table <el-table
:data="articleList" :data="articleList"
:max-height="tableMaxHeight"
:class="{'el-table-alone-page': alonePage}" :class="{'el-table-alone-page': alonePage}"
row-key="id" row-key="id"
@selection-change="handleSelectionChange" @selection-change="handleSelectionChange"
@ -112,8 +110,8 @@
prop="username" prop="username"
label="作者"> label="作者">
<template slot-scope="scope"> <template slot-scope="scope">
<router-link v-if="!alonePage" :to="$route.path+'?uid='+scope.row.userId">{{scope.row.username}}</router-link> <a v-if="!alonePage" @click="theFilterUserId(scope.row.userId)">{{scope.row.username}}</a>
<span v-if="alonePage" :to="$route.path+'?uid='+scope.row.userId">{{scope.row.username}}</span> <span v-if="alonePage">{{scope.row.username}}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
@ -122,8 +120,8 @@
label="分类"> label="分类">
<template slot-scope="scope"> <template slot-scope="scope">
<span v-for="(category,i) in scope.row.categories"> <span v-for="(category,i) in scope.row.categories">
{{i>0?' ,':''}} {{i>0?',':''}}
<a :href="'?categoryIds='+category.id">{{category.name}}</a> <a @click="theFilterCategoty(category.id)">{{category.name}}</a>
</span> </span>
</template> </template>
</el-table-column> </el-table-column>
@ -148,16 +146,6 @@
@current-change="currentChange" @current-change="currentChange"
layout="total, prev, pager, next"> layout="total, prev, pager, next">
</el-pagination> </el-pagination>
<!-- <el-pagination-->
<!-- hide-on-single-page-->
<!-- background-->
<!-- layout="total, prev, pager, next"-->
<!-- :current-page.sync="pagination.pageIndex"-->
<!-- :page-size="pagination.pageSize"-->
<!-- :total="pagination.pageTotal"-->
<!-- @current-change="currentChange"-->
<!-- ></el-pagination>-->
</el-card> </el-card>
</div> </div>
</template> </template>
@ -187,6 +175,7 @@ export default {
}, },
data() { data() {
return { return {
tableMaxHeight: document.documentElement.clientHeight,
newArticleDialogVisible: false, newArticleDialogVisible: false,
title: this.pageTitle, title: this.pageTitle,
hasChange: false, hasChange: false,
@ -202,8 +191,9 @@ export default {
query: { query: {
radioStatus: '', radioStatus: '',
radioUser: 'my', radioUser: 'my',
keyword: '', userId: undefined,
categoryIds: '' keyword: undefined,
categoryIds: undefined
}, },
draftNums: 0, draftNums: 0,
multipleSelection: [], multipleSelection: [],
@ -239,6 +229,11 @@ export default {
}; };
this.rowDrop() this.rowDrop()
} }
this.setMaxHeight()
let that = this
window.onresize = function (){
that.setMaxHeight()
}
}, },
watch: { watch: {
hasChange(val){ hasChange(val){
@ -252,6 +247,9 @@ export default {
} }
}, },
methods: { methods: {
setMaxHeight(){
this.tableMaxHeight = document.documentElement.clientHeight - 285
},
//行拖拽 //行拖拽
rowDrop() { rowDrop() {
const tbody = document.querySelector('.el-table__body-wrapper tbody') const tbody = document.querySelector('.el-table__body-wrapper tbody')
@ -312,33 +310,60 @@ export default {
const operation = this.$route.query.operation const operation = this.$route.query.operation
this.newArticleDialogVisible = !!operation; this.newArticleDialogVisible = !!operation;
}, },
// 取消筛选
cancelFilter() { cancelFilter() {
this.$router.push({query: {}}) this.query.userId = ''
this.query.keyword = '' this.query.keyword = ''
this.categoryIdsList = [] this.categoryIdsList = []
this.getArticleList() this.theFilter()
}, },
getArticleList() { // 筛选
theFilter() {
this.query.categoryIds = '' this.query.categoryIds = ''
if(this.$route.query.categoryIds){
this.query.categoryIds = this.$route.query.categoryIds
}
console.log('this.categoryIdsList', this.categoryIdsList)
if(this.categoryIdsList.length > 0){ if(this.categoryIdsList.length > 0){
this.categoryIdsList.forEach(categoryId => { this.categoryIdsList.forEach(categoryId => {
this.query.categoryIds += categoryId + ',' this.query.categoryIds += categoryId + ','
}) })
this.query.categoryIds = this.query.categoryIds.substring(0, this.query.categoryIds.length - 1) this.query.categoryIds = this.query.categoryIds.substring(0, this.query.categoryIds.length - 1)
} }
console.log('this.query.categoryIds', this.query.categoryIds) this.getArticleList()
this.isFilter = this.query.keyword.length > 0 || this.query.categoryIds.length > 0; },
if(this.isFilter){ theFilterUserId(userId) {
this.$router.push({query: {keyword: this.query.keyword, categoryIds: this.query.categoryIds}}) this.query.userId = userId
this.theFilter()
},
theFilterCategoty(categoryId) {
this.categoryIdsList = [categoryId]
this.theFilter()
},
// 查询条件
filterQuery(){
this.isFilter = false
if(!this.query.keyword || this.query.keyword.length === 0){
this.query.keyword = undefined
} else {
this.isFilter = true
} }
if(!this.query.categoryIds || this.query.categoryIds.length === 0){
this.query.categoryIds = undefined
} else {
this.isFilter = true
}
if(!this.query.userId || this.query.userId.length === 0){
this.query.userId = undefined
} else {
this.isFilter = true
}
if(!this.$route.query.operation){
this.$router.push({query: {uid: this.query.userId, keyword: this.query.keyword, categoryIds: this.query.categoryIds}})
}
},
getArticleList() {
this.filterQuery()
markdownApi.getMarkdown({ markdownApi.getMarkdown({
pageIndex: this.pagination.pageIndex, pageIndex: this.pagination.pageIndex,
pageSize: this.pagination.pageSize, pageSize: this.pagination.pageSize,
userId: this.query.radioUser === 'my' ? this.$store.state.user.userId : null, userId: this.query.radioUser === 'my' ? this.$store.state.user.userId : this.query.userId ? this.query.userId : null,
isRelease: this.query.radioStatus === 'release', isRelease: this.query.radioStatus === 'release',
isDraft: this.query.radioStatus === 'draft', isDraft: this.query.radioStatus === 'draft',
isAlonePage: this.alonePage, isAlonePage: this.alonePage,
@ -360,36 +385,6 @@ export default {
this.draftNums = res.count this.draftNums = res.count
}) })
}, },
findCategoryIds(parentCategory, categories, categoryIds) {
if(!categoryIds){
return
}
categories.forEach(category => {
let ids = []
if(parentCategory && parentCategory.ids){
ids = parentCategory.ids
}
ids.push(category.id)
category['ids'] = ids
if(categoryIds.includes(category.id)){
let newIds = []
Object.assign(newIds , ids)
this.categoryIdsList.push(newIds)
}
if(category.children){
this.findCategoryIds(category, category.children, categoryIds)
}
})
},
selectCategory(val) {
console.log('selectCategory', val)
let categoryIds = ''
this.categoryIdsList.forEach(categoryIdList => {
categoryIds += categoryIdList[categoryIdList.length - 1] + ','
})
categoryIds = categoryIds.substring(0, categoryIds.length - 2)
console.log(categoryIds)
},
currentChange() { currentChange() {
this.$router.push({query: {page : this.pagination.pageIndex}}) this.$router.push({query: {page : this.pagination.pageIndex}})
this.getArticleList() this.getArticleList()
@ -410,10 +405,7 @@ export default {
this.categories = res.data this.categories = res.data
if(this.$route.query.categoryIds){ if(this.$route.query.categoryIds){
this.query.categoryIds = this.$route.query.categoryIds this.query.categoryIds = this.$route.query.categoryIds
let categoryIds = this.query.categoryIds.split(",") this.categoryIdsList = this.query.categoryIds.split(",")
if(categoryIds){
this.findCategoryIds(null, this.categories, categoryIds)
}
} }
}) })
}, },
@ -469,6 +461,9 @@ export default {
.wailian { .wailian {
margin-left: 8px; margin-left: 8px;
} }
/deep/ .el-dialog {
max-width: 100vw !important;
}
/deep/ .el-dialog__body { /deep/ .el-dialog__body {
padding: 0 15px; padding: 0 15px;
} }

5
src/views/setting/articles/categoryManager.vue
View File

@ -27,7 +27,7 @@
<div class="instruction">在这里填入图片的URL地址, 以在分类页面显示一个背景大图.</div> <div class="instruction">在这里填入图片的URL地址, 以在分类页面显示一个背景大图.</div>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button native-type="submit" type="primary" :loading="categoryUpdateLoading" <el-button native-type="submit" type="primary" size="small" :loading="categoryUpdateLoading"
@click.native.prevent="onSave('managerForm')">保 存 @click.native.prevent="onSave('managerForm')">保 存
</el-button> </el-button>
</el-form-item> </el-form-item>
@ -342,4 +342,7 @@ export default {
.article-num:active { .article-num:active {
background-color: #ecf5ff; background-color: #ecf5ff;
} }
/deep/ .el-form-item__content {
line-height: 1.5;
}
</style> </style>

33
src/views/setting/articles/tagManager.vue
View File

@ -22,15 +22,19 @@
</el-dialog> </el-dialog>
<el-card class="box-card"> <el-card class="box-card">
<div slot="header"> <div slot="header">
<div class="clearfix"> <el-row>
<div class="card-header content-title"><span>{{ title }}</span> </div> <el-col :sm="12" class="query-item">
<el-button class="card-button" size="mini" type="primary" @click="add()">新增标签</el-button> <div class="clearfix">
</div> <div class="card-header content-title"><span>{{ title }}</span> </div>
<div class="card-header-right"> <el-button class="card-button" size="mini" type="primary" @click="add()">新增标签</el-button>
<el-checkbox class="check-all" :indeterminate="isIndeterminate" v-model="checkAll" @change="selectAll">全选</el-checkbox> </div>
<el-button :disabled="this.multipleSelection.length !== 1" size="small" @click="handleEdit()">编辑</el-button> </el-col>
<el-button :disabled="this.multipleSelection.length === 0" size="small" type="danger" @click="handleDelete()">删除</el-button> <el-col :sm="12" class="text-align-right">
</div> <el-checkbox class="check-all" :indeterminate="isIndeterminate" v-model="checkAll" @change="selectAll">全选</el-checkbox>
<el-button :disabled="this.multipleSelection.length !== 1" size="small" @click="handleEdit()">编辑</el-button>
<el-button :disabled="this.multipleSelection.length === 0" size="small" type="danger" @click="handleDelete()">删除</el-button>
</el-col>
</el-row>
</div> </div>
<div> <div>
<el-checkbox-group v-model="multipleSelection" size="small" @change="handleCheckTagChange"> <el-checkbox-group v-model="multipleSelection" size="small" @change="handleCheckTagChange">
@ -243,4 +247,15 @@ export default {
.check-all { .check-all {
margin-right: 20px; margin-right: 20px;
} }
/deep/ .el-card__header {
/deep/ .el-checkbox {
margin: 0;
}
/deep/.el-button+.el-button {
margin-left: 0;
}
}
/deep/ .el-form-item__content {
line-height: 1.5;
}
</style> </style>