回收站前端代码提交

This commit is contained in:
Sh1yu
2023-10-11 10:34:33 +08:00
parent 5a25be99cb
commit 8a8cd1b295
5 changed files with 223 additions and 74 deletions

View File

@@ -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>

View File

@@ -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>

View File

@@ -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},
],
},
{

View File

@@ -0,0 +1,5 @@
<template>
<div >
文件管
</div>
</template>

View File

@@ -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>