<template>
|
<a-row>
|
<a-col :xs='24' :sm='24' :md='24' :lg='24' :xl='24'>
|
<div :class="{ 'inner': isInner, 'outer': isOuter }" class='app' @touchmove.prevent @mousewheel.prevent>
|
<div class='home' ref='home'>
|
<!--背景-->
|
<div class='bg-box'>
|
<div :style="{left:cl1 +'px'}" ref='cloud1' class='cloud1'></div>
|
<div :style="{left:cl2 +'px'}" ref='cloud2' class='cloud2'></div>
|
</div>
|
<!--正文-->
|
<div class='container' ref='container'>
|
<!--桌面图标-->
|
<div class='deskicon' @contextmenu.prevent='onContextmenu'>
|
<div class='file-list'>
|
<template v-for='item in res'>
|
|
<div class='file-item' @contextmenu.stop.prevent='onContextmenuItem($event,item)'>
|
<!-- <a-popover style='font-size: 10px' :destroyTooltipOnHide='true' :key='item.id' v-model='item.show'
|
placement='right'>
|
<template slot='title'>
|
<span style='font-size: 10px;font-weight: normal;color: darkgray'>10文件，3文件夹</span>
|
</template>
|
<template slot='content'>
|
<p style='color: grey;cursor: pointer' @click='openFolder(item)'>打开文件夹</p>
|
<p style='color: grey;cursor: pointer'>新建文件夹</p>
|
</template>-->
|
|
<img v-if="item.id == '1'" class='img' :src="require('../../assets/desk/icon/computer.png')"
|
v-on:dblclick='dblclickItem(item,1)' />
|
<img v-else class='img' :src="require('../../assets/desk/icon/folder.png')"
|
v-on:dblclick='dblclickItem(item,2)' />
|
<!-- </a-popover>-->
|
<!-- <span class='text'>文件夹</span>-->
|
<!--最近上传文件夹不能修改-->
|
<a-input disabled v-if="Number(item.id ) < 1000" v-model='item.name'
|
style=' color: white;margin-top:5px;width: 100px;font-size:9px;max-lines: 2; background: transparent;border: none;text-align: center;outline: transparent' />
|
<a-input v-else v-on:dblclick='requestFocus($event)' @keyup.enter='handleEditFoleder($event,item)'
|
v-model='item.name'
|
style=' color: white;margin-top:5px;width: 100px;font-size:9px;max-lines: 2; background: transparent;border: none;text-align: center;outline: transparent' />
|
</div>
|
|
</template>
|
</div>
|
|
</div>
|
|
<div class='fotter'>
|
<div class='bg-fotter'></div>
|
<div class='taskbar'>
|
<div class='win'></div>
|
<div class='task-list'>
|
<div @click='openFolder(task)' v-for='task in taskList' class='task-item'>{{ task.name }}</div>
|
</div>
|
<div class='task-time'>{{ nowTime }}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<custom-modal ref='customModal' @min='min' @close='folderClose'></custom-modal>
|
<recent-modal ref='recentModal' @min='min' @close='folderClose'></recent-modal>
|
|
<upload-modal ref='uploadModal' @ok='uploadModalOk'></upload-modal>
|
</div>
|
</a-col>
|
</a-row>
|
</template>
|
|
<script>
|
import CustomModal from '@views/desktop/module/CustomModal'
|
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
|
import { deleteAction, getAction, postAction, putAction } from '@api/manage'
|
import UploadModal from '@views/desktop/module/UploadModal'
|
import RecentModal from '@views/desktop/module/RecentModal'
|
|
export default {
|
name: 'Home',
|
mixins: [JeecgListMixin],
|
components: { RecentModal, UploadModal, CustomModal },
|
created() {
|
this.loadData()
|
},
|
mounted() {
|
this.timer = this.cloudMove()
|
this.showTimes()
|
console.info('开始cloud定时器')
|
},
|
beforeDestroy() {
|
clearInterval(this.timer)
|
clearInterval(this.nowTimeInterval)
|
console.info('结束cloud定时器')
|
},
|
data() {
|
return {
|
visible: false,
|
disableMixinCreated: true,
|
nowTime: '',
|
nowTimeInterval: {},
|
cl1: 200, //第一个云左边初始边距
|
cl2: -405, //第二个云左边初始边距
|
step: 1, //一次移动距离为1px
|
resume: -405, //移动到最右边后重新开始的左边距
|
interval: 200, //定时器时间间隔
|
timer: {},
|
maxFoledr: 64,//系统默认最多64个文件夹
|
taskList: [],
|
res: [],
|
url: {
|
desktop: 'desk/file/desktop',
|
add: '/desk/file/add',
|
edit: '/desk/file/edit',
|
delete: '/desk/file/delete'
|
}
|
|
}
|
},
|
methods: {
|
//打开上传文件窗口
|
showUpload() {
|
this.$refs.uploadModal.add()
|
},
|
//
|
requestFocus(e) {
|
console.info(1212)
|
},
|
//修改文件夹名称
|
handleEditFoleder(e, item) {
|
//TODO 提交
|
e.currentTarget.blur()
|
//先检查是否有重名
|
let nameList = this.res.filter(c => c.name === item.name)
|
console.info(nameList)
|
if (nameList.length > 1) {
|
this.$message.error('已存在《' + item.name + '》，请修改名称后再新建文件夹！')
|
this.loadData()
|
return false
|
}
|
|
this.handleEdit(item)
|
|
},
|
//上传文件结束
|
uploadModalOk() {
|
|
},
|
//云层移动
|
cloudMove() {
|
let that = this
|
const homeWidth = this.$refs.home.clientWidth
|
return setInterval(function() {
|
if (that.cl1 < homeWidth) {
|
that.cl1 += that.step
|
} else {
|
that.cl1 = that.resume
|
}
|
if (that.cl2 < homeWidth) {
|
that.cl2 += that.step
|
} else {
|
that.cl2 = that.resume
|
}
|
}, that.interval)
|
|
},
|
openFolder(item) {
|
item.show = false
|
this.$refs.customModal.show(item)
|
},
|
//双击打开文件夹
|
dblclickItem(item,index) {
|
console.info(item.id)
|
item.show = false
|
if(index == 1){
|
this.$refs.recentModal.show(item)
|
}else if(index ==2){
|
this.$refs.customModal.show(item)
|
}
|
|
},
|
//窗口最小化
|
min(item) { //最小化
|
let lid = this.taskList.filter(c => c.id === item.id)
|
if (lid.length < 1) {
|
if (this.taskList.length === 3) {
|
this.taskList.shift()
|
}
|
this.taskList.push(item)
|
}
|
|
},
|
folderClose(item) {
|
console.info(item)
|
let lid = this.taskList.filter(c => c.id === item.id)
|
if (lid.length > 0) {
|
this.taskList.shift()
|
}
|
},
|
//桌面右键菜单
|
onContextmenu(event) {
|
const that = this
|
this.$contextmenu({
|
items: [
|
{
|
label: '新建文件夹',
|
onClick: () => {
|
/* let nameList = that.res.filter(c => c.name === '新建文件夹')
|
console.info(nameList)
|
if (nameList.length > 0) {
|
this.$message.error('已存在《新建文件夹》，请修改名称后再新建文件夹！')
|
return false
|
}*/
|
//添加桌面文件夹
|
const nitem = {
|
name: '新建文件夹',
|
type: 2,
|
tag: 'desk'
|
}
|
that.res.push(nitem)
|
that.handleAdd(nitem)
|
|
|
}
|
},
|
{
|
label: '上传文件',
|
onClick: () => {
|
that.showUpload()
|
|
}
|
},
|
/* {
|
label: '查找文件',
|
onClick: () => {
|
that.$message.warning('功能开发中！')
|
}
|
},*/
|
{
|
label: '刷新',
|
onClick: () => {
|
that.loadData()
|
}
|
}
|
|
|
],
|
event, // 鼠标事件信息
|
customClass: 'custom-class', // 自定义菜单 class
|
zIndex: 3, // 菜单样式 z-index
|
minWidth: 230 // 主菜单最小宽度
|
})
|
return false
|
},
|
//文件夹右键菜单
|
onContextmenuItem(event,item) {
|
console.info(event.target)
|
const that = this
|
this.$contextmenu({
|
items: [
|
{
|
label: '打开',
|
onClick: () => {
|
item.show = false
|
that.$refs.customModal.show(item)
|
}
|
},
|
|
{
|
label: '删除',
|
onClick: () => {
|
//that.handleDelete(item.id)
|
that.showDelete(item)
|
}
|
}
|
|
|
],
|
event, // 鼠标事件信息
|
customClass: 'custom-class', // 自定义菜单 class
|
zIndex: 3, // 菜单样式 z-index
|
minWidth: 230 // 主菜单最小宽度
|
})
|
return true
|
},
|
|
// 显示当前时间
|
timeFormate(timeStamp) {
|
let year = new Date(timeStamp).getFullYear()
|
let month =
|
new Date(timeStamp).getMonth() + 1 < 10
|
? '0' + (new Date(timeStamp).getMonth() + 1)
|
: new Date(timeStamp).getMonth() + 1
|
let date =
|
new Date(timeStamp).getDate() < 10
|
? '0' + new Date(timeStamp).getDate()
|
: new Date(timeStamp).getDate()
|
let hh =
|
new Date(timeStamp).getHours() < 10
|
? '0' + new Date(timeStamp).getHours()
|
: new Date(timeStamp).getHours()
|
let mm =
|
new Date(timeStamp).getMinutes() < 10
|
? '0' + new Date(timeStamp).getMinutes()
|
: new Date(timeStamp).getMinutes()
|
let ss =
|
new Date(timeStamp).getSeconds() < 10
|
? '0' + new Date(timeStamp).getSeconds()
|
: new Date(timeStamp).getSeconds()
|
let week = new Date(timeStamp).getDay()
|
let weeks = ['日', '一', '二', '三', '四', '五', '六']
|
let getWeek = '星期' + weeks[week]
|
/* this.nowTime=
|
year +
|
"年" +
|
month +
|
"月" +
|
date +
|
"日" +
|
" " +
|
hh +
|
":" +
|
mm +
|
":" +
|
ss +
|
getWeek;*/
|
this.nowTime = hh +
|
':' +
|
mm +
|
':' +
|
ss
|
},
|
showTimes() {
|
const that = this
|
this.nowTimeInterval = setInterval(function() {
|
that.timeFormate(new Date())
|
}, 1000)
|
},
|
clear() {
|
clearInterval(this.nowTimeInterval)
|
this.nowTime = null
|
},
|
|
//添加文件夹网络请求
|
handleAdd(param) {
|
postAction(this.url.add, param)
|
.then((res) => {
|
this.confirmLoading = false
|
if (res.success) {
|
this.loadData()
|
this.$message.success(res.message)
|
} else {
|
this.$message.warning(res.message)
|
}
|
})
|
.finally(() => {
|
this.confirmLoading = false
|
})
|
},
|
//修改文件夹网络请求
|
handleEdit(item) {
|
putAction(this.url.edit, item)
|
.then((res) => {
|
this.confirmLoading = false
|
if (res.success) {
|
this.loadData()
|
this.$message.success(res.message)
|
|
} else {
|
this.$message.warning(res.message)
|
}
|
})
|
.finally(() => {
|
this.confirmLoading = false
|
})
|
},
|
handleDelete: function(id) {
|
var that = this
|
deleteAction(that.url.delete, {
|
id: id
|
}).then((res) => {
|
if (res.success) {
|
//重新计算分页问题
|
that.$message.success(res.message)
|
that.loadData()
|
} else {
|
that.$message.warning(res.message)
|
}
|
})
|
},
|
//加载文件夹数据
|
loadData() {
|
let isorter = {
|
column: 'createTime',
|
order: 'asc'
|
}
|
var param = Object.assign(isorter)
|
getAction(this.url.desktop, param).then((res) => {
|
if (res.success) {
|
this.res = res.result.records
|
this.$message.success('加载成功!')
|
} else {
|
this.$message.warning('加载失败！')
|
}
|
})
|
},
|
showDelete(item) {
|
let that = this
|
this.$confirm({
|
title: '提示',
|
content: h => <div style="color:red;">删除文件夹以及文件夹下所有内容，此操作不可恢复，确定删除？</div>,
|
onOk() {
|
that.handleDelete(item.id)
|
},
|
onCancel() {
|
|
},
|
class: 'test',
|
});
|
},
|
|
|
},
|
computed: {
|
isInner() {
|
let inner = this.$route.path.indexOf('/home') != -1
|
return inner
|
},
|
isOuter() {
|
let inner = this.$route.path.indexOf('/home') != -1
|
return !inner
|
}
|
}
|
}
|
</script>
|
<style scoped lang='less'>
|
::-webkit-scrollbar {
|
width: 0;
|
height: 0;
|
background-color: transparent;
|
display: none;
|
}
|
</style>
|
|
<style lang='less' scoped>
|
|
.inner {
|
min-height: calc(100vh - 140px);
|
overflow-y: auto
|
}
|
|
.outer {
|
min-height: 100vh;
|
}
|
|
.app {
|
width: 100%;
|
min-width: 860px;
|
position: relative;
|
background: rgb(28, 119, 172);
|
|
.home {
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
background: rgb(28, 119, 172) url(~@assets/desk/light.png) no-repeat right center;
|
|
.bg-box {
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
background-image: url(~@assets/desk/loginbg3.png);
|
background-repeat: no-repeat;
|
background-position: right center;
|
overflow: hidden;
|
z-index: 1;
|
|
.cloud1 {
|
position: absolute;
|
top: 80px;
|
width: 405px;
|
height: 165px;
|
background: url(~@assets/desk/cloud.png) no-repeat;
|
opacity: 0.5;
|
// transition: left .5s linear;
|
}
|
|
.cloud2 {
|
position: absolute;
|
bottom: 200px;
|
width: 405px;
|
height: 165px;
|
background: url(~@assets/desk/cloud.png) no-repeat;
|
opacity: 0.5;
|
// transition: left .5s linear;
|
}
|
|
}
|
|
.container {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
overflow: hidden;
|
z-index: 2;
|
background: transparent;
|
|
.deskicon {
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
overflow: hidden;
|
|
.file-list {
|
width: 100%;
|
height: 94%;
|
margin: 5px;
|
display: flex;
|
flex-direction: column;
|
flex-wrap: wrap;
|
overflow: hidden;
|
align-content: flex-start;
|
|
.file-item {
|
width: 100px;
|
height: 88px;
|
cursor: pointer;
|
text-align: center;
|
padding-top: 10px;
|
margin: 5px 10px;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
|
.img {
|
width: 50px;
|
height: 50px;
|
display: block;
|
user-select: none;
|
}
|
|
|
.text {
|
color: white;
|
font-size: 10px;
|
display: block;
|
user-select: none;
|
}
|
}
|
|
.file-item:hover {
|
background: url("../../assets/desk/icon/disk_shortcut_hover.png") no-repeat center;
|
}
|
}
|
}
|
|
.fotter {
|
position: absolute;
|
bottom: 0;
|
width: 100%;
|
height: 40px;
|
display: flex;
|
align-items: center;
|
|
.bg-fotter {
|
background: #5aa2cb;
|
position: absolute;
|
width: 100%;
|
height: 40px;
|
opacity: .5;
|
}
|
|
.taskbar {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
|
.win {
|
width: 23px;
|
height: 23px;
|
margin-left: 10px;
|
background: url(~@assets/desk/win.png);
|
background-size: 100%;
|
}
|
|
.task-list {
|
flex-grow: 1;
|
height: 100%;
|
margin: 0 20px;
|
display: flex;
|
flex-direction: row;
|
|
.task-item {
|
height: 100%;
|
background: rgb(73, 145, 188);
|
line-height: 40px;
|
border: 1px solid #549ac3;
|
width: 180px;
|
margin-right: 2px;
|
box-sizing: border-box;
|
text-align: center;
|
color: white;
|
cursor: pointer;
|
z-index: 999;
|
}
|
|
.task-item:hover {
|
background-color: rgb(47, 103, 136);
|
opacity: .5;
|
}
|
|
.task-item-select {
|
background-color: rgb(47, 103, 136);
|
opacity: .5;
|
|
}
|
|
.task-item-unselect {
|
background-color: rgb(73, 145, 188)
|
}
|
}
|
|
.task-time {
|
width: 100px;
|
height: 40px;
|
line-height: 40px;
|
text-align: center;
|
font-size: 10px;
|
color: white;
|
}
|
}
|
}
|
}
|
|
}
|
|
|
}
|
|
</style>
|
