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 {
padding: 0;
height: 50px !important;
}

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

@ -1,9 +1,9 @@
<template>
<div>
<div class="upload-input-image">
<select-file title="选择图片" @select="selectedFile" :visible.sync="dialogSelectFile"></select-file>
<div class="upload">
<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
ref="uploadRef"
class="upload"
@ -20,7 +20,7 @@
:on-remove="handleFileListRemove"
: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">
<span v-show="uploadState === 1">图片上传中{{uploadPercentage}}%</span>
<span v-show="uploadState === 2">图片上传成功</span>
@ -35,7 +35,7 @@
</el-upload>
</div>
<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">
<el-image :style="{maxWidth: tipImageMaxWidth + 'px'}" :src="currentValue" fit="contain" @load="loadSuccess">
<div slot="error" class="image-slot">
@ -63,6 +63,10 @@ export default {
tipImageMaxWidth: {
type: Number,
default: 250
},
intputAutosize: {
type: Object,
default: ()=>{ return { minRows: 1, maxRows: 6} }
}
},
data() {

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

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

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

@ -9,6 +9,7 @@
:filter-method="filterMethod"
>
<el-option :value="valueTitle" :label="valueTitle" class="options">
</el-option>
<el-tree id="tree-option"
ref="selectTree"
:accordion="accordion"
@ -23,7 +24,6 @@
:filter-node-method="filterNode"
@node-click="handleNodeClick">
</el-tree>
</el-option>
</el-select>
</template>
@ -85,16 +85,6 @@ export default {
this.$refs.selectTree.setCurrentKey(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){
@ -134,17 +124,9 @@ export default {
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item{
height: auto;
max-height: 274px;
padding: 0;
overflow: hidden;
overflow-y: auto;
}
.el-select-dropdown__item.selected{
font-weight: normal;
display: none;
}
ul li >>>.el-tree .el-tree-node__content{
height:auto;

10
src/styles/index.scss
View File

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

11
src/styles/setting.scss
View File

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

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

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

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

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

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

@ -27,7 +27,7 @@
<div class="instruction">在这里填入图片的URL地址, 以在分类页面显示一个背景大图.</div>
</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')">保 存
</el-button>
</el-form-item>
@ -342,4 +342,7 @@ export default {
.article-num:active {
background-color: #ecf5ff;
}
/deep/ .el-form-item__content {
line-height: 1.5;
}
</style>

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

@ -22,15 +22,19 @@
</el-dialog>
<el-card class="box-card">
<div slot="header">
<div class="clearfix">
<div class="card-header content-title"><span>{{ title }}</span> </div>
<el-button class="card-button" size="mini" type="primary" @click="add()">新增标签</el-button>
</div>
<div class="card-header-right">
<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>
</div>
<el-row>
<el-col :sm="12" class="query-item">
<div class="clearfix">
<div class="card-header content-title"><span>{{ title }}</span> </div>
<el-button class="card-button" size="mini" type="primary" @click="add()">新增标签</el-button>
</div>
</el-col>
<el-col :sm="12" class="text-align-right">
<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>
<el-checkbox-group v-model="multipleSelection" size="small" @change="handleCheckTagChange">
@ -243,4 +247,15 @@ export default {
.check-all {
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>