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 2020-12-11 18:06:16 +08:00
parent 2cb2a57012
commit a9d62b3931
8 changed files with 199 additions and 370 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1132,7 +1132,7 @@ export default {
},
// 行拖拽
rowDrop() {
if (this.fileListScrollTop > 0) {
if (this.fileListScrollTop > 0 && this.$route.path !== '/') {
return
}
// 目标元素的背景颜色
@ -1365,6 +1365,9 @@ export default {
}
}
let clearClass = function (node) {
if(!dragged) {
return
}
if (node) {
if (_this.grid) {
node = node.children[0].children[0]

16
src/components/SimpleUploader/globalUploader.vue
View File

@ -16,7 +16,7 @@
>
<uploader-unsupport></uploader-unsupport>
<uploader-drop v-if="dragover" class="uploader-drop">
<uploader-drop v-if="dragover && enableDragUplaod" class="uploader-drop">
<span>上传文件到当前目录下</span>
</uploader-drop>
@ -157,6 +157,7 @@
fileListScrollTop: 0,
dragoverLoop: null,
successMsg: null,
enableDragUplaod: false,// 是否启用拖拽上传
}
},
computed: {
@ -165,13 +166,22 @@
return this.$refs.uploader.uploader
}
},
watch: {},
watch: {
$route(route) {
// 只有首页才启用拖拽上传
this.enableDragUplaod = route.path === '/'
}
},
mounted() {
this.enableDragUplaod = this.$route.path === '/'
let that = this
let dropbox = document.body
document.body.ondragstart = function(e){
return e.target.slot === 'jmal' && that.fileListScrollTop === 0;
if(that.enableDragUplaod) {
return e.target.slot === 'jmal' && that.fileListScrollTop === 0
}
return true
}
dropbox.addEventListener("dragenter", function(e){

302
src/components/table/table.vue
View File

@ -1,302 +0,0 @@
<template>
<!-- 列表 -->
<div class="commonTable">
<el-table
ref="refTable"
v-loading="options.loading"
stripe
:border="options.border"
:data="dataSource"
:height="options.height"
:max-height="tableHeight"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.5)"
:row-style="rowClass"
:cell-style="options.cellstyle"
:cell-class-name="options.cellClassName"
:header-cell-style="options.headerCellStyle"
@selection-change="handleSelectionChange"
@row-click="handleRowClick"
>
<!--selection选择框-->
<el-table-column v-if="options.mutiSelect" type="selection" style="width:50px" align="center"></el-table-column>
<!--数据源-->
<template v-for="(column, index) in columnsList">
<!-- sortable 对应列是否可以排序 -->
<el-table-column
v-if="!column.button&&!column.type"
:key="index"
:sortable="column.hasSort"
:prop="column.prop"
:label="column.label"
:align="column.align"
:width="column.width"
>
<template slot-scope="scope">
<span v-if="column.render">
{{ column.render(scope.row) }}
</span>
<span v-else>{{ scope.row[column.prop] }}</span>
</template>
</el-table-column>
<el-table-column
v-if="column.button"
:key="index"
header-align="center"
:sortable="column.hasSort"
:prop="column.prop"
:label="column.label"
:align="column.align"
:width="column.width"
>
<template slot-scope="scope">
<!-- render button -->
<template v-for="(btn, i) in column.group">
<el-button
:key="i"
class="theme-btn"
:type="btn.type"
:size="btn.size || 'mini'"
:icon="btn.icon"
:disabled="btn.disabled"
:plain="btn.plain"
:class=" btn.class"
@click.stop="btn.onClick(scope.row, scope.$index)"
>{{ btn.name }}</el-button>
</template>
</template>
</el-table-column>
<!-- 多级表头 -->
<el-table-column
v-if="column.type === 'column'"
:key="index"
:label="column.label"
:align="column.align"
:width="column.width"
>
<div v-for="(item, i) in column.multistage" :key="i">
<el-table-column
:prop="item.prop"
:label="item.label"
:align="item.align"
:width="item.width"
>
</el-table-column>
</div>
</el-table-column>
</template>
</el-table>
<!-- 分页 -->
<el-pagination
v-if="pagination"
ref="commonPage"
background
:total="pagination.total"
:current-page.sync="pagination.pageIndex"
:page-sizes="pagination.pageSizes||[5, 10, 20, 50, 100, 500]"
layout="total, sizes, prev, pager, next, jumper"
class="commonPagination"
@size-change="handleSizeChange"
@current-change="handleIndexChange"
></el-pagination>
</div>
<!-- style="margin-top: 20px;text-align: center" -->
</template>
<script>
export default {
name: 'Tables',
components: {
//
},
props: {
dataSource: {// 表格数据源 默认为空数组
type: Array,
default: () => []
},
options: {
mutiSelect: false, // 是否显示复选框
index: true,
indexWidth: 70,
initTable: true, // 是否一挂载就加载数据
border: false
}, // // 表格参数控制 maxHeight、stripe 等等...
columns: {// 表格的字段展示 默认为空数组
type: Array,
default: () => []
},
fetch: Function, // 获取数据的函数
pagination: Object // 分页，不传则不显示
},
data() {
return {
selectRow: [],
selectData: [],
tableHeight: null
}
},
computed: {
columnsList() {
const columns = this.columns
const columnsList = []
columns.forEach((item, index) => {
if (item.isShow) {
columnsList.push(item)
}
})
return columnsList
}
},
watch: {
//
selectData(data) { // 存储选中的row
this.selectRow = []
if (data.length > 0) {
data.forEach((item, index) => {
this.selectRow.push(this.dataSource.indexOf(item))
})
}
},
tableHeight(oldData, newData) {
// console.log(oldData);
// console.log(newData);
}
},
created() {
// 传入的options覆盖默认设置
this.$parent.options = Object.assign({
maxHeight: 500,
stripe: true, // 是否为斑马纹
border: true
}, this.options)
this.options.initTable && this.fetch()
},
mounted() {
this.$nextTick(function() {
if (this.$refs.commonPage) {
this.tableHeight = window.innerHeight - this.$refs.refTable.$el.getBoundingClientRect().top - this.$refs.commonPage.$el.offsetHeight - 10
} else {
this.tableHeight = window.innerHeight - this.$refs.refTable.$el.getBoundingClientRect().top - 10
}
// 监听窗口大小变化
const self = this
window.onresize = function() {
if (self.$refs.commonPage) {
self.tableHeight = window.innerHeight - self.$refs.refTable.$el.getBoundingClientRect().top - self.$refs.commonPage.$el.offsetHeight - 10
} else {
self.tableHeight = window.innerHeight - self.$refs.refTable.$el.getBoundingClientRect().top - 10
// console.log(self.$refs.refTable)
}
}
})
},
methods: {
onClick(row, index) {
this.$emit('click', row, index)
},
table_index(index) {
return (this.pagination.noIndex - 1) * this.pagination.pageSize + index + 1
},
handleSizeChange(size) { // 切换每页显示的数量
this.pagination.pageSize = size
this.fetch()
},
handleIndexChange(current) { // 切换页码
this.pagination.pageIndex = current
this.fetch()
},
handleSelectionChange(selection) {
this.$emit('selection-change', selection)
this.selectData = selection
},
handleRowClick(row, event, column) {
this.$emit('row-click', row, event, column)
if (this.options.mutiSelect) {
this.$refs.refTable.toggleRowSelection(row)
}
},
btn_click() {
},
rowClass({ row, rowIndex }) {
if (this.selectRow.includes(rowIndex)) {
return { 'color': '#F5F5F5' }
}
}
}
}
</script>
<style lang="scss" scoped>
.dashboard {
&-container {
margin: 30px;
}
&-text {
font-size: 30px;
line-height: 46px;
}
}
.redirect {
color: #97a8be;
}
.no-redirect {
color: #000000;
cursor: text;
}
.el-breadcrumb {
font-size: 20px;
line-height: 46px;
}
.newFileMenu ul {
list-style: none;
padding-inline-start: 0px;
margin-top: 0;
margin-bottom: 0;
}
.button-class {
cursor: pointer;
}
.button-class:hover {
border-radius: 5px;
background-color: #409eff14;
}
.newFileMenu li {
margin: 0;
padding: 0;
font-size: 16px;
}
.newFileMenu li:hover {
border-radius: 5px;
background-color: #409eff14;
}
.newFileMenu li > .menuitem {
cursor: pointer;
line-height: 44px;
margin-left: 10%;
}
.newFileMenu li > .menuitem > .text {
margin-left: 5%;font-weight: normal;
}
.el-button.is-circle {
border-radius: 50%;
padding: 9px;
}
/deep/.svg-icon {
font-size: 28px;
}
/deep/.el-table th>.cell {
padding-left: 15px;
}
</style>

8
src/router/index.js
View File

@ -235,9 +235,15 @@ export const constantRoutes = [
{
path: 'manager-articles',
name: 'manager-articles',
component: () => import('@/views/setting/articles/articleManager'),
component: () => import('@/views/setting/articles/articlePageManager'),
meta: { title: '文章' , icon: 'guanlizhuanjiawenzhang'}
},
{
path: 'manager-alone-page',
name: 'manager-alone-page',
component: () => import('@/views/setting/articles/alonePageManager'),
meta: { title: '独立页面' , icon: 'guanlizhuanjiawenzhang'}
},
{
path: 'manager-blog',
name: 'manager-blog',

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

@ -36,48 +36,52 @@
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd HH:mm:ss">
</el-date-picker>
<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"
>
</el-tree>
<p class="mark-setting-label">标签：</p>
<el-tag
v-for="tag in dynamicTags"
:key="tag.id"
closable
:disable-transitions="false"
@close="handleClose(tag)">
{{tag}}
</el-tag>
<el-autocomplete
:class="[inputNewTagClass, inputValueExist?inputErrorClass:'']"
v-if="inputVisible"
v-model="inputValue"
ref="saveTagInput"
size="small"
:fetch-suggestions="querySearch"
:popper-append-to-body="false"
@select="handleSelect"
placeholder="请输入标签名"
@keyup.enter.native="handleInputConfirm"
@blur="handleInputConfirm"
>
</el-autocomplete>
<div v-if="inputValueExist" class="instruction-error">该标签已存在</div>
<el-button v-if="!inputVisible" class="button-new-tag" size="small" @click="showInput"> + 新增标签 </el-button>
<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"
>
</el-tree>
</div>
<div v-if="!alonePage">
<p class="mark-setting-label">标签：</p>
<el-tag
v-for="tag in dynamicTags"
:key="tag.id"
closable
:disable-transitions="false"
@close="handleClose(tag)">
{{tag}}
</el-tag>
<el-autocomplete
:class="[inputNewTagClass, inputValueExist?inputErrorClass:'']"
v-if="inputVisible"
v-model="inputValue"
ref="saveTagInput"
size="small"
:fetch-suggestions="querySearch"
:popper-append-to-body="false"
@select="handleSelect"
placeholder="请输入标签名"
@keyup.enter.native="handleInputConfirm"
@blur="handleInputConfirm"
>
</el-autocomplete>
<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>
@ -157,7 +161,6 @@
}]
export default {
inject: ['appReload'],
name: 'MarkdownEditor',
components: {
EditElement,
@ -167,6 +170,10 @@
hasChange: {
type: Boolean,
defalut: false
},
alonePage: {
type: Boolean,
default: false
}
},
data() {
@ -461,6 +468,7 @@
cover: this.file.cover,
isDraft: this.draft,
isRelease: this.file.release,
isAlonePage: this.alonePage,
slug: this.file.slug ? this.file.slug : this.filename,
categoryIds: this.file.categoryIds,
tagNames: this.dynamicTags,

31
src/views/setting/articles/alonePageManager.vue Normal file
View File

@ -0,0 +1,31 @@
<template>
<div class="container">
<article-manager :page-title="pageTitle" alone-page></article-manager>
</div>
</template>
<script>
import ArticleManager from "@/views/setting/articles/articleManager";
export default {
name: 'alonePageManager',
components: {
ArticleManager
},
data() {
return {
pageTitle: '管理独立页面',
}
},
computed: {},
created(){
},
mounted() {
},
watch: {
},
methods: {
}
}
</script>
<style lang="scss" scoped>
</style>

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

@ -1,7 +1,7 @@
<template>
<div class="container" v-wechat-title="pageTitle">
<div>
<el-dialog
:title="pageTitle"
:title="title"
:fullscreen="true"
:visible.sync="newArticleDialogVisible"
:before-close="handleClose"
@ -9,14 +9,14 @@
@open="openDialog"
@close="closeDialog"
>
<markdown-editor ref="editor" :has-change.sync="hasChange" @onTitle="onTitle" @onRelease="onRelease"></markdown-editor>
<markdown-editor ref="editor" :has-change.sync="hasChange" :alone-page="alonePage" @onTitle="onTitle" @onRelease="onRelease"></markdown-editor>
</el-dialog>
<el-card class="box-card">
<div slot="header">
<div class="box-card-header">
<div class="clearfix card-header-back">
<span>文章管理</span>
<el-button class="card-button" size="mini" type="primary" @click="newArticle">新建文章</el-button>
<span>{{ alonePage ? '管理独立页面':'管理文章' }}</span>
<el-button class="card-button" size="mini" type="primary" @click="newArticle">新建</el-button>
</div>
<div class="card-header-right" v-show="this.multipleSelection.length > 0">
<el-button size="small" type="danger" @click="handleDelete()">删除</el-button>
@ -29,7 +29,7 @@
<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 label="release">已发布</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>
@ -43,6 +43,7 @@
<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="不选择"
@ -59,7 +60,8 @@
</div>
<el-table
:data="articleList"
stripe
:class="{'el-table-alone-page': alonePage}"
row-key="id"
@selection-change="handleSelectionChange"
>
<el-table-column
@ -69,7 +71,6 @@
<el-table-column
prop="name"
:show-overflow-tooltip="true"
min-width="200"
label="标题">
<template slot-scope="scope">
<a :title="'编辑 '+scope.row.name" @click="editArticle(scope.row.id)">{{scope.row.name}}<svg-icon icon-class="bianji-"></svg-icon></a>
@ -77,6 +78,7 @@
</template>
</el-table-column>
<el-table-column
v-if="!alonePage"
width="150"
label="状态">
<template slot-scope="scope">
@ -85,6 +87,11 @@
<el-tag v-if="!scope.row.release" size="medium" type="info">未发布</el-tag>
</template>
</el-table-column>
<el-table-column
v-if="alonePage"
prop="slug"
label="缩略名">
</el-table-column>
<el-table-column
prop="username"
width="100"
@ -94,6 +101,7 @@
</template>
</el-table-column>
<el-table-column
v-if="!alonePage"
prop="categories"
label="分类">
<template slot-scope="scope">
@ -127,7 +135,7 @@
</template>
<script>
import Sortable from 'sortablejs'
import MarkdownEditor from '@/views/markdown/index'
import markdownApi from "@/api/markdown-api";
import categoryApi from "@/api/category";
@ -137,10 +145,20 @@ export default {
components: {
MarkdownEditor
},
props: {
pageTitle: {
type: String,
default: ''
},
alonePage: {
type: Boolean,
default: false
}
},
data() {
return {
newArticleDialogVisible: false,
pageTitle: '文章管理',
title: this.pageTitle,
hasChange: false,
articleList: [],
pagination: {
@ -182,6 +200,13 @@ export default {
window.addEventListener('popstate', this.goBack, false)
}
window.addEventListener('beforeunload', e => this.beforeunloadFn(e))
// 阻止默认行为
document.body.ondrop = function (event) {
event.preventDefault();
event.stopPropagation();
};
this.rowDrop()
},
watch: {
hasChange(val){
@ -195,6 +220,17 @@ export default {
}
},
methods: {
//行拖拽
rowDrop() {
const tbody = document.querySelector('.el-table__body-wrapper tbody')
const _this = this
Sortable.create(tbody, {
onEnd({ newIndex, oldIndex }) {
const currRow = _this.articleList.splice(oldIndex, 1)[0]
_this.articleList.splice(newIndex, 0, currRow)
}
})
},
handleSelectionChange(val) {
this.multipleSelection = val
},
@ -232,12 +268,6 @@ export default {
const operation = this.$route.query.operation
if(operation){
this.newArticleDialogVisible = true
if(operation === 'new') {
this.pageTitle = '撰写新文章'
}
if(operation === 'editor') {
this.pageTitle = '编辑文章'
}
} else {
this.newArticleDialogVisible = false
}
@ -269,9 +299,11 @@ export default {
userId: this.query.radioUser === 'my' ? this.$store.state.user.userId : null,
isRelease: this.query.radioStatus === 'release',
isDraft: this.query.radioStatus === 'draft',
isAlonePage: this.alonePage,
keyword: this.query.keyword,
categoryIds: this.query.categoryIds
}).then((res) => {
console.log(res.data)
this.articleList = res.data
this.pagination.total = res.count
this.$nextTick(() => {
@ -281,6 +313,7 @@ export default {
markdownApi.getMarkdown({
pageIndex: this.pagination.pageIndex,
pageSize: this.pagination.pageSize,
isAlonePage: this.alonePage,
isDraft: true
}).then((res) => {
this.draftNums = res.count
@ -359,14 +392,20 @@ export default {
onTitle(val){
const operation = this.$route.query.operation
if(operation === 'new'){
this.pageTitle = '撰写新文章 ' + val
this.title = '撰写新文章 ' + val
if(this.alonePage){
this.title = '创建新页面 ' + val
}
}
if(operation === 'editor'){
this.pageTitle = '编辑：' + val
this.title = '编辑：' + val
}
},
openDialog() {
this.pageTitle = '撰写新文章'
this.title = '撰写新文章'
if(this.alonePage){
this.title = '创建新页面'
}
},
onRelease() {
this.newArticleDialogVisible = false
@ -375,7 +414,6 @@ export default {
closeDialog(){
this.$router.replace({path: this.$route.path})
window.onbeforeunload = null
this.pageTitle = '文章管理'
this.hasChange = false
this.getArticleList()
}
@ -396,4 +434,9 @@ export default {
/deep/ .el-dialog__body {
padding: 0 20px;
}
/deep/ .el-table-alone-page {
tbody .el-table__row:hover {
cursor: move;
}
}
</style>

30
src/views/setting/articles/articlePageManager.vue Normal file
View File

@ -0,0 +1,30 @@
<template>
<div className="container">
<article-manager :page-title="pageTitle"></article-manager>
</div>
</template>
<script>
import ArticleManager from "@/views/setting/articles/articleManager";
export default {
name: 'articlePageManager',
components: {
ArticleManager
},
data() {
return {
pageTitle: '管理文章',
}
},
computed: {},
created() {
},
mounted() {
},
watch: {},
methods: {}
}
</script>
<style lang="scss" scoped>
</style>