回收站前端代码提交
This commit is contained in:
@@ -54,6 +54,20 @@
|
||||
</template>
|
||||
</el-tree>
|
||||
</div>
|
||||
<div class="sidebar-tool-box">
|
||||
<a-divider />
|
||||
<span >
|
||||
<a-button type="text" @click="routeToFileCtl()">
|
||||
<template #icon><DatabaseOutlined /></template>
|
||||
文件管理
|
||||
</a-button>
|
||||
<a-divider type="vertical" style="height: 10px; background-color: #7cb305"/>
|
||||
<a-button type="text" @click="routeToRecycleBin()">
|
||||
<template #icon><DeleteOutlined /></template>
|
||||
回收站
|
||||
</a-button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -63,6 +77,8 @@ import {useRouter, useRoute} from "vue-router";
|
||||
import pageApi from '../../assets/api/page'
|
||||
import {useStoreDisplay} from "@/store/wikiDisplay";
|
||||
import {useStorePageData} from "@/store/pageData";
|
||||
import {DatabaseOutlined,DeleteOutlined} from '@ant-design/icons-vue';
|
||||
|
||||
|
||||
let emit = defineEmits(['doGetPageList', 'spaceChangeEvents', 'setNowPageId'])
|
||||
let searchKeywords = ref('');
|
||||
@@ -167,7 +183,22 @@ const handlePageDrop = (draggingNode, dropNode, dropType, ev) => {
|
||||
emit('doGetPageList', node.id, node)
|
||||
})
|
||||
}
|
||||
const routeToFileCtl = () => {
|
||||
router.push({
|
||||
path: '/management/file'
|
||||
})
|
||||
}
|
||||
const routeToRecycleBin = () => {
|
||||
router.push({
|
||||
path: '/management/recyclebin',
|
||||
})
|
||||
}
|
||||
defineExpose({searchByKeywords})
|
||||
</script>
|
||||
<style scoped>
|
||||
.sidebar-tool-box{
|
||||
text-align:center;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
@@ -1,79 +1,81 @@
|
||||
<template>
|
||||
<el-dialog title="设置为模板" v-model="newTemplateDialogVisible" width="600px" :close-on-click-modal="false">
|
||||
<el-form label-width="100px" :model="templateNewForm">
|
||||
<el-form-item label="模板标签">
|
||||
<el-input v-model="templateNewForm.tagName"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否公开">
|
||||
<el-switch v-model="templateNewForm.shareStatus" inactive-text="个人模板" :inactive-value="0" active-text="公共模板" :active-value="1"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" v-if="exsit" @click="onNewTemplateSubmit">保存修改</el-button>
|
||||
<el-button type="primary" v-else @click="onNewTemplateSubmit">立即创建</el-button>
|
||||
<el-button @click="onNewTemplateCancel">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
<a-modal
|
||||
v-model:open="templateChooseDialogVisible"
|
||||
title="模板库"
|
||||
width="100%"
|
||||
wrapClassName="full-modal"
|
||||
:confirm-loading="aModalWaiting"
|
||||
:destroyOnClose=true
|
||||
:closable=true>
|
||||
<div>
|
||||
<el-switch v-model="open" inactive-text="个人模板" :inactive-value="0" active-text="公共模板" :active-value="1" @change="filterByOpen"></el-switch>
|
||||
<a-divider type="vertical"/>
|
||||
<el-input v-model="name" style="width: 30%" @change="filterByName"></el-input>
|
||||
</div>
|
||||
<a-divider>模板标签</a-divider>
|
||||
<a-checkable-tag v-for="tag in tags" @click="filterByTags(tag.tagName,tag.show)" v-model:checked="tag.show" style="margin: 5px" size="big">{{tag.tagName}}</a-checkable-tag>
|
||||
<a-divider/>
|
||||
<a-list :grid="{gutter:1,column:4,xs:1,sm:1,md:2,lg:2,xl:4,xxl:4}" :data-source="templateList">
|
||||
<template #renderItem="{item}">
|
||||
<a-list-item>
|
||||
<a-card :title="item.name">
|
||||
<a-tag color="#f50">{{filterShareStatus(item.shareStatus)}}</a-tag>
|
||||
<a-tag color="#87d068">{{item.tags}}</a-tag>
|
||||
<br/>
|
||||
{{item.createUserName}}
|
||||
<br/>
|
||||
{{item.createTime}}
|
||||
<template #actions>
|
||||
<el-tooltip effect="dark" content="转到原文档" placement="top">
|
||||
<AimOutlined @click="turnToSource(item)"/>
|
||||
</el-tooltip>
|
||||
<el-tooltip effect="dark" content="预览模板" placement="top">
|
||||
<BorderOutlined @click="showPreview(item)"/>
|
||||
</el-tooltip>
|
||||
<el-tooltip effect="dark" content="使用模板" placement="top">
|
||||
<AlertOutlined @click="chooseTemplate(item)"/>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</a-card>
|
||||
</a-list-item>
|
||||
</template>
|
||||
</a-list>
|
||||
<a-pagination simple v-model:current="nowTemplateNum" :total="totalTemplate" style="float: right"
|
||||
:page-size="8" :hide-on-single-page=true @change="pageUpDown"/>
|
||||
<template #footer/>
|
||||
</a-modal>
|
||||
<a-modal
|
||||
v-model:open="previewVisible"
|
||||
title="模板预览"
|
||||
width="100%"
|
||||
wrapClassName="full-modal"
|
||||
:destroyOnClose=true
|
||||
:closable=true>
|
||||
<el-row>
|
||||
<div ref="pageContentRef" class="wiki-page-content">
|
||||
<div v-html="pageShowDetail" class="markdown-body" v-if="editorType.value === 2" v-highlight></div>
|
||||
<div v-html="pageShowDetail" class="wang-editor-body" v-else></div>
|
||||
<div>
|
||||
<el-dialog title="设置为模板" v-model="newTemplateDialogVisible" width="600px" :close-on-click-modal="false">
|
||||
<el-form label-width="100px" :model="templateNewForm">
|
||||
<el-form-item label="模板标签">
|
||||
<el-input v-model="templateNewForm.tagName"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否公开">
|
||||
<el-switch v-model="templateNewForm.shareStatus" inactive-text="个人模板" :inactive-value="0" active-text="公共模板" :active-value="1"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" v-if="exsit" @click="onNewTemplateSubmit">保存修改</el-button>
|
||||
<el-button type="primary" v-else @click="onNewTemplateSubmit">立即创建</el-button>
|
||||
<el-button @click="onNewTemplateCancel">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
<a-modal
|
||||
v-model:open="templateChooseDialogVisible"
|
||||
title="模板库"
|
||||
width="100%"
|
||||
wrapClassName="full-modal"
|
||||
:confirm-loading="aModalWaiting"
|
||||
:destroyOnClose=true
|
||||
:closable=true>
|
||||
<div>
|
||||
<el-switch v-model="open" inactive-text="个人模板" :inactive-value="0" active-text="公共模板" :active-value="1" @change="filterByOpen"></el-switch>
|
||||
<a-divider type="vertical"/>
|
||||
<el-input v-model="name" style="width: 30%" @change="filterByName"></el-input>
|
||||
</div>
|
||||
</el-row>
|
||||
<template #footer/>
|
||||
</a-modal>
|
||||
<a-divider>模板标签</a-divider>
|
||||
<a-checkable-tag v-for="tag in tags" @click="filterByTags(tag.tagName,tag.show)" v-model:checked="tag.show" style="margin: 5px" size="big">{{tag.tagName}}</a-checkable-tag>
|
||||
<a-divider/>
|
||||
<a-list :grid="{gutter:1,column:4,xs:1,sm:1,md:2,lg:2,xl:4,xxl:4}" :data-source="templateList">
|
||||
<template #renderItem="{item}">
|
||||
<a-list-item>
|
||||
<a-card :title="item.name">
|
||||
<a-tag color="#f50">{{filterShareStatus(item.shareStatus)}}</a-tag>
|
||||
<a-tag color="#87d068">{{item.tags}}</a-tag>
|
||||
<br/>
|
||||
{{item.createUserName}}
|
||||
<br/>
|
||||
{{item.createTime}}
|
||||
<template #actions>
|
||||
<el-tooltip effect="dark" content="转到原文档" placement="top">
|
||||
<AimOutlined @click="turnToSource(item)"/>
|
||||
</el-tooltip>
|
||||
<el-tooltip effect="dark" content="预览模板" placement="top">
|
||||
<BorderOutlined @click="showPreview(item)"/>
|
||||
</el-tooltip>
|
||||
<el-tooltip effect="dark" content="使用模板" placement="top">
|
||||
<AlertOutlined @click="chooseTemplate(item)"/>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</a-card>
|
||||
</a-list-item>
|
||||
</template>
|
||||
</a-list>
|
||||
<a-pagination simple v-model:current="nowTemplateNum" :total="totalTemplate" style="float: right"
|
||||
:page-size="8" :hide-on-single-page=true @change="pageUpDown"/>
|
||||
<template #footer/>
|
||||
</a-modal>
|
||||
<a-modal
|
||||
v-model:open="previewVisible"
|
||||
title="模板预览"
|
||||
width="100%"
|
||||
wrapClassName="full-modal"
|
||||
:destroyOnClose=true
|
||||
:closable=true>
|
||||
<el-row>
|
||||
<div ref="pageContentRef" class="wiki-page-content">
|
||||
<div v-html="pageShowDetail" class="markdown-body" v-if="editorType.value === 2" v-highlight></div>
|
||||
<div v-html="pageShowDetail" class="wang-editor-body" v-else></div>
|
||||
</div>
|
||||
</el-row>
|
||||
<template #footer/>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
@@ -9,6 +9,8 @@ import Home from './views/home/Home.vue'
|
||||
import MyInfo from './views/user/MyInfo.vue'
|
||||
import Show from './views/page/Show.vue'
|
||||
import Edit from './views/page/Edit.vue'
|
||||
import FileManagement from './views/management/FileManagement.vue'
|
||||
import RecycleBinManagement from './views/management/RecycleBinManagement.vue'
|
||||
|
||||
import spaceManage from './views/space/Manage.vue'
|
||||
|
||||
@@ -30,6 +32,8 @@ let routes = [
|
||||
{path: '/page/show', name: 'WIKI-页面查看', component: Show},
|
||||
{path: '/page/edit', name: 'WIKI-编辑内容', component: Edit},
|
||||
{path: '/space/manage', name: 'WIKI-空间管理', component: spaceManage},
|
||||
{path: '/management/file', name: 'WIKI-文件管理', component: FileManagement},
|
||||
{path: '/management/recyclebin', name: 'WIKI-回收站', component: RecycleBinManagement},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<div >
|
||||
文件管
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-table :columns="columns" :data-source="table" :pagination="{ pageSize: 10 }" :scroll="{ y: 240 }">
|
||||
<template v-slot:bodyCell="{ column, record ,index}">
|
||||
<span v-if="column.key === 'action'">
|
||||
<a-button @click="showFiles(record)">
|
||||
<template #icon><TableOutlined /></template>
|
||||
相关文件
|
||||
</a-button>
|
||||
<a-divider type="vertical"/>
|
||||
<a-button @click="revertConfirm(record)">
|
||||
<template #icon><UndoOutlined /></template>
|
||||
恢复
|
||||
</a-button>
|
||||
<a-divider type="vertical"/>
|
||||
<a-button @click="destroy(record)">
|
||||
<template #icon><DeleteFilled /></template>
|
||||
彻底删除
|
||||
</a-button>
|
||||
</span>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
<a-modal :open="visible" title="详情展示" :closable="false">
|
||||
<template #footer>
|
||||
<a-button key="Submit" type="primary" @click="handleOk">好的</a-button>
|
||||
</template>
|
||||
<a-carousel arrows>
|
||||
<template #nextArrow>
|
||||
<div class="custom-slick-arrow" style="right: 10px">
|
||||
<right-circle-outlined />
|
||||
</div>
|
||||
</template>
|
||||
<div><h3>1</h3></div>
|
||||
<div><h3>2</h3></div>
|
||||
<div><h3>3</h3></div>
|
||||
<div><h3>4</h3></div>
|
||||
</a-carousel>
|
||||
</a-modal>
|
||||
</template>
|
||||
<script setup>
|
||||
import {UndoOutlined,DeleteFilled,TableOutlined,RightCircleOutlined,} from '@ant-design/icons-vue';
|
||||
import {ref} from "vue";
|
||||
let visible = ref(false)
|
||||
let table = ref([
|
||||
{key: 321, name: 'Edward King ', age: 32, address: 'London, Park Lane no. ',},
|
||||
{key: 321, name: 'Edward King ', age: 32, address: 'London, Park Lane no. ',},
|
||||
{key: 321, name: 'Edward King ', age: 32, address: 'London, Park Lane no. ',},
|
||||
{key: 321, name: 'Edward King ', age: 32, address: 'London, Park Lane no. ',},
|
||||
{key: 321, name: 'Edward King ', age: 32, address: 'London, Park Lane no. ',},
|
||||
{key: 321, name: 'Edward King ', age: 32, address: 'London, Park Lane no. ',},
|
||||
{key: 321, name: 'Edward King ', age: 32, address: 'London, Park Lane no. ',},
|
||||
{key: 321, name: 'Edward King ', age: 32, address: 'London, Park Lane no. ',},
|
||||
{key: 321, name: 'Edward King ', age: 32, address: 'London, Park Lane no. ',},
|
||||
{key: 321, name: 'Edward King ', age: 32, address: 'London, Park Lane no. ',},
|
||||
{key: 321, name: 'Edward King ', age: 32, address: 'London, Park Lane no. ',},
|
||||
{key: 321, name: 'Edward King ', age: 32, address: 'London, Park Lane no. ',},
|
||||
{key: 321, name: 'Edward King ', age: 32, address: 'London, Park Lane no. ',},
|
||||
{key: 321, name: 'Edward King ', age: 32, address: 'London, Park Lane no. ',},
|
||||
{key: 321, name: 'Edward King ', age: 32, address: 'London, Park Lane no. ',},
|
||||
{key: 321, name: 'Edward King ', age: 32, address: 'London, Park Lane no. ',}
|
||||
]);
|
||||
let columns = ref([
|
||||
{title: '名称', dataIndex: 'name', width: '50%' ,},
|
||||
{title: '删除日期', dataIndex: 'age', width: '15%',},
|
||||
{title: '操作者', dataIndex: 'address', width: '15%',},
|
||||
{title: '', key: 'action'},
|
||||
])
|
||||
const handleOk = (e) => {
|
||||
visible.value = false;
|
||||
}
|
||||
const showFiles = (record) => {
|
||||
visible.value = true;
|
||||
}
|
||||
const revertConfirm = (record) => {
|
||||
}
|
||||
const destroy = (record) => {
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.ant-carousel :deep(.slick-slide) {
|
||||
text-align: center;
|
||||
height: 160px;
|
||||
line-height: 160px;
|
||||
background: #364d79;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ant-carousel :deep(.slick-arrow.custom-slick-arrow) {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
font-size: 25px;
|
||||
color: #fff;
|
||||
background-color: rgba(31, 45, 61, 0.11);
|
||||
opacity: 0.3;
|
||||
}
|
||||
.ant-carousel :deep(.custom-slick-arrow:before) {
|
||||
display: none;
|
||||
}
|
||||
.ant-carousel :deep(.custom-slick-arrow:hover) {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.ant-carousel :deep(.slick-slide h3) {
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user