wen
2 years ago
49 changed files with 2216 additions and 659 deletions
@ -0,0 +1,33 @@ |
|||||||
|
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td{margin:0;padding:0;font-weight:inherit;} |
||||||
|
.clearfix{zoom:1;} |
||||||
|
.clearfix:after{content:'.';display:block;visibility:hidden;clear:both;overflow:hidden;height:0px;} |
||||||
|
body{font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;margin:0 auto;font-size:14px;min-height:100%;} |
||||||
|
ul,li{list-style:none;margin:0;padding:0;} |
||||||
|
a,img,span{display:inline-block;max-width:100%;} |
||||||
|
a{color:#464c5c;text-decoration:none;} |
||||||
|
|
||||||
|
.img-responsive{max-width:100%;display:block;} |
||||||
|
.elementBlock{display:block !important;} |
||||||
|
.elementNone{display:none !important;} |
||||||
|
.elementhidden{visibility:hidden !important;} |
||||||
|
.verMiddle{vertical-align:middle !important;} |
||||||
|
.vercenter{text-align:center !important;} |
||||||
|
.textright{text-align:right !important;} |
||||||
|
.verbold{font-weight:bold !important;} |
||||||
|
.qcmargin{margin:0 !important;} |
||||||
|
.qcpadding{padding:0 !important;} |
||||||
|
.qcbdbt{border-bottom:0 !important;} |
||||||
|
.qcbdtop{border-top:0 !important;} |
||||||
|
.qcbdlt{border-left:0 !important;} |
||||||
|
.qcbdrt{border-right:0 !important;} |
||||||
|
.bjcolor{background-color:#FFF !important;} |
||||||
|
.minheight{min-height:537px;} |
||||||
|
a:hover{text-decoration:none;} |
||||||
|
a:active{text-decoration:none;} |
||||||
|
a:visited{text-decoration:none;} |
||||||
|
|
||||||
|
*{ |
||||||
|
-webkit-box-sizing: border-box; |
||||||
|
-moz-box-sizing: border-box; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
@ -1,24 +1,89 @@ |
|||||||
import request from '@/utils/request' |
import request from '@/utils/request' |
||||||
|
|
||||||
export function login(data) { |
export function captcha(datas) { |
||||||
return request({ |
return request({ |
||||||
url: '/vue-admin-template/user/login', |
url: '/api/captcha', |
||||||
method: 'post', |
method: 'post', |
||||||
data |
data: datas |
||||||
}) |
}) |
||||||
} |
} |
||||||
|
|
||||||
export function getInfo(token) { |
export function login(datas) { |
||||||
return request({ |
return request({ |
||||||
url: '/vue-admin-template/user/info', |
url: '/api/login', |
||||||
method: 'get', |
method: 'post', |
||||||
params: { token } |
data: datas |
||||||
}) |
}) |
||||||
} |
} |
||||||
|
|
||||||
export function logout() { |
// 获取目录和文件数据
|
||||||
return request({ |
export function mirlist(datas) { |
||||||
url: '/vue-admin-template/user/logout', |
return request({ |
||||||
method: 'post' |
url: '/api/ls', |
||||||
}) |
method: 'post', |
||||||
|
data: datas |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
// 创建目录
|
||||||
|
export function mkdir(datas) { |
||||||
|
return request({ |
||||||
|
url: '/api/mkdir', |
||||||
|
method: 'post', |
||||||
|
data: datas |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
// 上传文件
|
||||||
|
export function uploadrequest(datas) { |
||||||
|
return request({ |
||||||
|
url: '/api/uploadbase64', |
||||||
|
method: 'post', |
||||||
|
data: datas |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
// 删除目录
|
||||||
|
export function rmdirs(datas) { |
||||||
|
return request({ |
||||||
|
url: '/api/rmdir', |
||||||
|
method: 'post', |
||||||
|
data: datas |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
// 删除文件
|
||||||
|
export function deletefile(datas) { |
||||||
|
return request({ |
||||||
|
url: '/api/delete', |
||||||
|
method: 'post', |
||||||
|
data: datas |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
// 重命名文件
|
||||||
|
export function renamefile(datas) { |
||||||
|
return request({ |
||||||
|
url: '/api/rename', |
||||||
|
method: 'post', |
||||||
|
data: datas |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
// 移动目录
|
||||||
|
export function movefiledir(datas) { |
||||||
|
return request({ |
||||||
|
url: '/api/move', |
||||||
|
method: 'post', |
||||||
|
data: datas |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
// 更换皮肤
|
||||||
|
export function switchthemeApi(datas) { |
||||||
|
return request({ |
||||||
|
url: '/api/switchtheme/', |
||||||
|
method: 'post', |
||||||
|
data: datas |
||||||
|
}) |
||||||
} |
} |
||||||
|
After Width: | Height: | Size: 37 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 65 KiB |
@ -0,0 +1,74 @@ |
|||||||
|
|
||||||
|
// 菜单栏生成
|
||||||
|
var menusdata = [ |
||||||
|
|
||||||
|
// {
|
||||||
|
// id: '0',
|
||||||
|
// path: '/filemange',
|
||||||
|
// meta: { title: '文件管理', icon: 'dashboard' },
|
||||||
|
// children: [
|
||||||
|
// {
|
||||||
|
// path: '/filemange/subfile?id=0',
|
||||||
|
// meta: { title: 'Menu1-1' }
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// path: '/filemange/subfile',
|
||||||
|
// meta: { title: 'Menu1-2' },
|
||||||
|
// children: [
|
||||||
|
// {
|
||||||
|
// path: '/filemange/subfile?id=1',
|
||||||
|
// meta: { title: 'Menu1-2-1' }
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// path: '/filemange/subfile',
|
||||||
|
// meta: { title: 'Menu1-2-2' }
|
||||||
|
// }
|
||||||
|
// ]
|
||||||
|
// }
|
||||||
|
// ]
|
||||||
|
// },
|
||||||
|
{ |
||||||
|
id: '0', |
||||||
|
path: '/homepage', |
||||||
|
meta: { title: '首页', icon: 'dashboard' }, |
||||||
|
children:[] |
||||||
|
}, |
||||||
|
|
||||||
|
{ |
||||||
|
id: '1', |
||||||
|
path: '/filemange/index', |
||||||
|
class: 'file', |
||||||
|
meta: { title: '文件管理', icon: 'el-icon-s-help' }, |
||||||
|
children:[] |
||||||
|
}, |
||||||
|
{ |
||||||
|
path: '/usermange/index', |
||||||
|
meta: { title: '用户管理', icon: 'form' } |
||||||
|
|
||||||
|
}, |
||||||
|
{ |
||||||
|
path: '/systme', |
||||||
|
meta: { title: '系统管理', icon: 'dashboard' }, |
||||||
|
children: [ |
||||||
|
{ |
||||||
|
path: 'changepass', |
||||||
|
meta: { title: '修改密码', icon: 'table' } |
||||||
|
}, |
||||||
|
{ |
||||||
|
path: 'userrelated', |
||||||
|
meta: { title: '用户相关', icon: 'tree' } |
||||||
|
}, |
||||||
|
{ |
||||||
|
path: 'switchtheme', |
||||||
|
meta: { title: '皮肤更换', icon: 'tree' } |
||||||
|
} |
||||||
|
] |
||||||
|
}, |
||||||
|
{ |
||||||
|
path: 'https://dev.filesite.io', |
||||||
|
meta: { title: '前端展示页面', icon: 'link' } |
||||||
|
|
||||||
|
} |
||||||
|
] |
||||||
|
|
||||||
|
export default menusdata |
||||||
@ -0,0 +1,5 @@ |
|||||||
|
let peizhi = { |
||||||
|
dizhi: 'http://192.168.0.100' |
||||||
|
} |
||||||
|
|
||||||
|
export default peizhi |
||||||
@ -0,0 +1,49 @@ |
|||||||
|
.toptitle { |
||||||
|
color: #FFF; |
||||||
|
height: 91px; |
||||||
|
padding: 0 6% 0 36px; |
||||||
|
z-index: 1002; |
||||||
|
background-color: #2b3245; |
||||||
|
position: fixed; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
right: 0; |
||||||
|
overflow:hidden; |
||||||
|
} |
||||||
|
|
||||||
|
.toptitle .leftk { |
||||||
|
float: left; |
||||||
|
margin-top: 16px; |
||||||
|
height:60px; |
||||||
|
} |
||||||
|
|
||||||
|
.toptitle .leftk>img { |
||||||
|
vertical-align: middle; |
||||||
|
display:inline-block; |
||||||
|
max-width: 100%; |
||||||
|
height:100%; |
||||||
|
background-color:#FFF; |
||||||
|
border-radius:50%; |
||||||
|
} |
||||||
|
|
||||||
|
.toptitle .leftk>i { |
||||||
|
vertical-align: middle; |
||||||
|
color: #FFF; |
||||||
|
font-size: 30px; |
||||||
|
margin: 6px 0 0 15px; |
||||||
|
} |
||||||
|
|
||||||
|
.toptitle .rightk { |
||||||
|
float: right; |
||||||
|
margin-top: 24px; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
|
||||||
|
.toptitle .erectline { |
||||||
|
margin: 0 18px; |
||||||
|
display: inline-block; |
||||||
|
vertical-align: middle; |
||||||
|
height: 40px; |
||||||
|
width: 1px; |
||||||
|
background-color: #414758; |
||||||
|
} |
||||||
@ -0,0 +1,5 @@ |
|||||||
|
import Vue from 'vue' // 引入vue
|
||||||
|
|
||||||
|
const EventBus = new Vue() // 创建实例
|
||||||
|
|
||||||
|
export default EventBus // 导出
|
||||||
@ -1,85 +1,91 @@ |
|||||||
import axios from 'axios' |
import axios from 'axios' |
||||||
import { MessageBox, Message } from 'element-ui' |
//import { MessageBox, Message } from 'element-ui'
|
||||||
import store from '@/store' |
//import store from '@/store'
|
||||||
import { getToken } from '@/utils/auth' |
//import { getToken } from '@/utils/auth'
|
||||||
|
|
||||||
// create an axios instance
|
// create an axios instance
|
||||||
const service = axios.create({ |
const service = axios.create({ |
||||||
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
|
//baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
|
||||||
// withCredentials: true, // send cookies when cross-domain requests
|
// withCredentials: true, // send cookies when cross-domain requests
|
||||||
timeout: 5000 // request timeout
|
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, |
||||||
|
// headers: { 'Content-Type': 'multipart/form-data' },
|
||||||
|
// headers: {
|
||||||
|
// 'Content-Type': 'application/x-www-form-urlencoded'
|
||||||
|
// },
|
||||||
|
timeout: 0 // request timeout
|
||||||
}) |
}) |
||||||
|
//service.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
|
||||||
|
|
||||||
// request interceptor
|
// request interceptor
|
||||||
service.interceptors.request.use( |
// service.interceptors.request.use(
|
||||||
config => { |
// config => {
|
||||||
// do something before request is sent
|
// // do something before request is sent
|
||||||
|
|
||||||
if (store.getters.token) { |
// if (store.getters.token) {
|
||||||
// let each request carry token
|
// // let each request carry token
|
||||||
// ['X-Token'] is a custom headers key
|
// // ['X-Token'] is a custom headers key
|
||||||
// please modify it according to the actual situation
|
// // please modify it according to the actual situation
|
||||||
config.headers['X-Token'] = getToken() |
// config.headers['X-Token'] = getToken()
|
||||||
} |
// }
|
||||||
return config |
// return config
|
||||||
}, |
// },
|
||||||
error => { |
// error => {
|
||||||
// do something with request error
|
// // do something with request error
|
||||||
console.log(error) // for debug
|
// console.log(error) // for debug
|
||||||
return Promise.reject(error) |
// return Promise.reject(error)
|
||||||
} |
// }
|
||||||
) |
// )
|
||||||
|
|
||||||
// response interceptor
|
// // response interceptor
|
||||||
service.interceptors.response.use( |
// service.interceptors.response.use(
|
||||||
/** |
// /**
|
||||||
* If you want to get http information such as headers or status |
// * If you want to get http information such as headers or status
|
||||||
* Please return response => response |
// * Please return response => response
|
||||||
*/ |
// */
|
||||||
|
|
||||||
/** |
// /**
|
||||||
* Determine the request status by custom code |
// * Determine the request status by custom code
|
||||||
* Here is just an example |
// * Here is just an example
|
||||||
* You can also judge the status by HTTP Status Code |
// * You can also judge the status by HTTP Status Code
|
||||||
*/ |
// */
|
||||||
response => { |
// response => {
|
||||||
const res = response.data |
// const res = response.data
|
||||||
|
|
||||||
// if the custom code is not 20000, it is judged as an error.
|
// // if the custom code is not 20000, it is judged as an error.
|
||||||
if (res.code !== 20000) { |
// if (res.code !== 20000) {
|
||||||
Message({ |
// Message({
|
||||||
message: res.message || 'Error', |
// message: res.message || 'Error',
|
||||||
type: 'error', |
// type: 'error',
|
||||||
duration: 5 * 1000 |
// duration: 5 * 1000
|
||||||
}) |
// })
|
||||||
|
|
||||||
// 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
|
// // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
|
||||||
if (res.code === 50008 || res.code === 50012 || res.code === 50014) { |
// if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
|
||||||
// to re-login
|
// // to re-login
|
||||||
MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', { |
// MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
|
||||||
confirmButtonText: 'Re-Login', |
// confirmButtonText: 'Re-Login',
|
||||||
cancelButtonText: 'Cancel', |
// cancelButtonText: 'Cancel',
|
||||||
type: 'warning' |
// type: 'warning'
|
||||||
}).then(() => { |
// }).then(() => {
|
||||||
store.dispatch('user/resetToken').then(() => { |
// store.dispatch('user/resetToken').then(() => {
|
||||||
location.reload() |
// location.reload()
|
||||||
}) |
// })
|
||||||
}) |
// })
|
||||||
} |
// }
|
||||||
return Promise.reject(new Error(res.message || 'Error')) |
// return Promise.reject(new Error(res.message || 'Error'))
|
||||||
} else { |
// } else {
|
||||||
return res |
// return res
|
||||||
} |
// }
|
||||||
}, |
// },
|
||||||
error => { |
// error => {
|
||||||
console.log('err' + error) // for debug
|
// console.log('err' + error) // for debug
|
||||||
Message({ |
// Message({
|
||||||
message: error.message, |
// message: error.message,
|
||||||
type: 'error', |
// type: 'error',
|
||||||
duration: 5 * 1000 |
// duration: 5 * 1000
|
||||||
}) |
// })
|
||||||
return Promise.reject(error) |
// return Promise.reject(error)
|
||||||
} |
// }
|
||||||
) |
// )
|
||||||
|
|
||||||
export default service |
export default service |
||||||
|
|||||||
@ -1,28 +0,0 @@ |
|||||||
<template> |
|
||||||
<div class="dashboard-container"> |
|
||||||
<div class="dashboard-text"> |
|
||||||
<el-button type="primary">创建目录</el-button> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
|
|
||||||
//import { mapGetters } from 'vuex' |
|
||||||
|
|
||||||
export default { |
|
||||||
|
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss" scoped> |
|
||||||
.dashboard { |
|
||||||
&-container { |
|
||||||
margin: 30px; |
|
||||||
} |
|
||||||
&-text { |
|
||||||
font-size: 30px; |
|
||||||
line-height: 46px; |
|
||||||
} |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,87 +0,0 @@ |
|||||||
<template> |
|
||||||
<div class="app-container"> |
|
||||||
<el-form ref="form" :model="form" label-width="120px"> |
|
||||||
<el-form-item label="Activity name"> |
|
||||||
<el-input v-model="form.name" /> |
|
||||||
</el-form-item> |
|
||||||
<el-form-item label="Activity zone"> |
|
||||||
<el-select v-model="form.region" placeholder="please select your zone"> |
|
||||||
<el-option label="Zone one" value="shanghai" /> |
|
||||||
<el-option label="Zone two" value="beijing" /> |
|
||||||
</el-select> |
|
||||||
</el-form-item> |
|
||||||
<el-form-item label="Activity time"> |
|
||||||
<el-col :span="11"> |
|
||||||
<el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%;" /> |
|
||||||
</el-col> |
|
||||||
<el-col :span="2" class="line">-</el-col> |
|
||||||
<el-col :span="11"> |
|
||||||
<el-time-picker v-model="form.date2" type="fixed-time" placeholder="Pick a time" style="width: 100%;" /> |
|
||||||
</el-col> |
|
||||||
</el-form-item> |
|
||||||
<el-form-item label="Instant delivery"> |
|
||||||
<el-switch v-model="form.delivery" /> |
|
||||||
</el-form-item> |
|
||||||
<el-form-item label="Activity type"> |
|
||||||
<el-checkbox-group v-model="form.type"> |
|
||||||
<el-checkbox label="Online activities" name="type" /> |
|
||||||
<el-checkbox label="Promotion activities" name="type" /> |
|
||||||
<el-checkbox label="Offline activities" name="type" /> |
|
||||||
<el-checkbox label="Simple brand exposure" name="type" /> |
|
||||||
</el-checkbox-group> |
|
||||||
</el-form-item> |
|
||||||
<el-form-item label="Resources"> |
|
||||||
<el-radio-group v-model="form.resource"> |
|
||||||
<el-radio label="Sponsor" /> |
|
||||||
<el-radio label="Venue" /> |
|
||||||
</el-radio-group> |
|
||||||
</el-form-item> |
|
||||||
<el-form-item label="Activity form"> |
|
||||||
<el-input v-model="form.desc" type="textarea" /> |
|
||||||
</el-form-item> |
|
||||||
<el-form-item> |
|
||||||
<el-button type="primary" @click="onSubmit">Create</el-button> |
|
||||||
<el-button @click="onCancel">Cancel</el-button> |
|
||||||
</el-form-item> |
|
||||||
</el-form> |
|
||||||
|
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
|
|
||||||
export default { |
|
||||||
data() { |
|
||||||
return { |
|
||||||
form: { |
|
||||||
name: '', |
|
||||||
region: '', |
|
||||||
date1: '', |
|
||||||
date2: '', |
|
||||||
delivery: false, |
|
||||||
type: [], |
|
||||||
resource: '', |
|
||||||
desc: '' |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
onSubmit() { |
|
||||||
this.$message('submit!') |
|
||||||
}, |
|
||||||
onCancel() { |
|
||||||
this.$message({ |
|
||||||
message: 'cancel!', |
|
||||||
type: 'warning' |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style scoped> |
|
||||||
.line{ |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
</style> |
|
||||||
|
|
||||||
@ -0,0 +1,56 @@ |
|||||||
|
<template> |
||||||
|
<div class="filemange_container"> |
||||||
|
<div class="mkdirm"> |
||||||
|
<el-button type="primary" @click="dirbox = true">创建目录</el-button> |
||||||
|
</div> |
||||||
|
<el-dialog title="创建目录" :visible.sync="dirbox"> |
||||||
|
<el-form :model="form"> |
||||||
|
<el-form-item label="目录名称" :label-width="formLabelWidth"> |
||||||
|
<el-input v-model="form.name" autocomplete="off"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="父级目录" :label-width="formLabelWidth"> |
||||||
|
<el-select v-model="form.region" placeholder="请选择父级目录"> |
||||||
|
<el-option label="区域一" value="shanghai"></el-option> |
||||||
|
<el-option label="区域二" value="beijing"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
<div slot="footer" class="dialog-footer"> |
||||||
|
<el-button @click="dirbox = false">取 消</el-button> |
||||||
|
<el-button type="primary" @click="dirbox = false">确 定</el-button> |
||||||
|
</div> |
||||||
|
</el-dialog> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
|
||||||
|
//import { mapGetters } from 'vuex' |
||||||
|
|
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
dirbox: false, |
||||||
|
form: { |
||||||
|
name: '', |
||||||
|
region: '', |
||||||
|
date1: '', |
||||||
|
date2: '', |
||||||
|
delivery: false, |
||||||
|
type: [], |
||||||
|
resource: '', |
||||||
|
desc: '' |
||||||
|
}, |
||||||
|
formLabelWidth: '120px' |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
methods: { |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.mkdirm{text-align:center;margin:20% 0 0 0;} |
||||||
|
</style> |
||||||
@ -1,7 +0,0 @@ |
|||||||
<template> |
|
||||||
<div style="padding:30px;"> |
|
||||||
<el-alert :closable="false" title="menu 1"> |
|
||||||
<router-view /> |
|
||||||
</el-alert> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
@ -1,7 +0,0 @@ |
|||||||
<template> |
|
||||||
<div style="padding:30px;"> |
|
||||||
<el-alert :closable="false" title="menu 1-1" type="success"> |
|
||||||
<router-view /> |
|
||||||
</el-alert> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
@ -1,7 +0,0 @@ |
|||||||
<template> |
|
||||||
<div style="padding:30px;"> |
|
||||||
<el-alert :closable="false" title="menu 1-2" type="success"> |
|
||||||
<router-view /> |
|
||||||
</el-alert> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
@ -1,5 +0,0 @@ |
|||||||
<template functional> |
|
||||||
<div style="padding:30px;"> |
|
||||||
<el-alert :closable="false" title="menu 1-2-1" type="warning" /> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
@ -1,5 +0,0 @@ |
|||||||
<template functional> |
|
||||||
<div style="padding:30px;"> |
|
||||||
<el-alert :closable="false" title="menu 1-2-2" type="warning" /> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
@ -1,5 +0,0 @@ |
|||||||
<template functional> |
|
||||||
<div style="padding:30px;"> |
|
||||||
<el-alert :closable="false" title="menu 1-3" type="success" /> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
@ -1,5 +0,0 @@ |
|||||||
<template> |
|
||||||
<div style="padding:30px;"> |
|
||||||
<el-alert :closable="false" title="menu 2" /> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
@ -0,0 +1,517 @@ |
|||||||
|
import { mirlist, mkdir, uploadrequest, rmdirs, deletefile, renamefile, movefiledir } from '@/api/user' |
||||||
|
|
||||||
|
export default { |
||||||
|
|
||||||
|
watch: { |
||||||
|
// 点击不同目录请求不同接口
|
||||||
|
$route(to, from) { |
||||||
|
|
||||||
|
this.getFileData(); |
||||||
|
} |
||||||
|
}, |
||||||
|
// beforeRouteUpdate(to, from, next) {
|
||||||
|
// alert(0);
|
||||||
|
// next();
|
||||||
|
// },
|
||||||
|
|
||||||
|
// 实例还没挂载
|
||||||
|
created() { |
||||||
|
this.getFileData(); |
||||||
|
}, |
||||||
|
|
||||||
|
// 实例已经挂载
|
||||||
|
|
||||||
|
|
||||||
|
filters: { |
||||||
|
|
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
// 按日期查询
|
||||||
|
// pickerOptions: {
|
||||||
|
// shortcuts: [{
|
||||||
|
// text: '最近一周',
|
||||||
|
// onClick(picker) {
|
||||||
|
// const end = new Date();
|
||||||
|
// const start = new Date();
|
||||||
|
// start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||||
|
// picker.$emit('pick', [start, end]);
|
||||||
|
// }
|
||||||
|
// }, {
|
||||||
|
// text: '最近一个月',
|
||||||
|
// onClick(picker) {
|
||||||
|
// const end = new Date();
|
||||||
|
// const start = new Date();
|
||||||
|
// start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||||||
|
// picker.$emit('pick', [start, end]);
|
||||||
|
// }
|
||||||
|
// }, {
|
||||||
|
// text: '最近三个月',
|
||||||
|
// onClick(picker) {
|
||||||
|
// const end = new Date();
|
||||||
|
// const start = new Date();
|
||||||
|
// start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||||||
|
// picker.$emit('pick', [start, end]);
|
||||||
|
// }
|
||||||
|
// }]
|
||||||
|
// },
|
||||||
|
// value2: '',
|
||||||
|
|
||||||
|
//haveRealpath: 0,
|
||||||
|
// 当前目录文件数据
|
||||||
|
tableData: [], |
||||||
|
|
||||||
|
// 当前目录子目录数据
|
||||||
|
dirdata: [], |
||||||
|
|
||||||
|
// 创建目录弹出框数据
|
||||||
|
dirbox: false, |
||||||
|
dirform: { |
||||||
|
dir: '', |
||||||
|
parent: '' |
||||||
|
}, |
||||||
|
formLabelWidth: '', |
||||||
|
|
||||||
|
//删除目录数据
|
||||||
|
rmdirform: { |
||||||
|
dir: '', |
||||||
|
parent: '' |
||||||
|
}, |
||||||
|
|
||||||
|
// 删除文件数据
|
||||||
|
rmfileform: { |
||||||
|
file: '', |
||||||
|
parent: '' |
||||||
|
}, |
||||||
|
|
||||||
|
// 重命名文件数据
|
||||||
|
renamebox: false, |
||||||
|
renamefileform: { |
||||||
|
from: '', |
||||||
|
to: '', |
||||||
|
parent: '' |
||||||
|
}, |
||||||
|
|
||||||
|
// 移动目录或者文件数据
|
||||||
|
movebox: false, |
||||||
|
movefileform: { |
||||||
|
from: '', |
||||||
|
to: '' |
||||||
|
}, |
||||||
|
|
||||||
|
subloading: false, //切换目录loading
|
||||||
|
mkdirloadings: false, //创建目录loading
|
||||||
|
|
||||||
|
// 图片上传弹出框数据
|
||||||
|
uploadDrawer: false, |
||||||
|
direction: 'ttb', |
||||||
|
|
||||||
|
// 图片上传相关数据
|
||||||
|
dialogImageUrl: '', |
||||||
|
dialogVisible: false, |
||||||
|
disabled: false, |
||||||
|
imgUploadData: { |
||||||
|
name: '', |
||||||
|
file: '', |
||||||
|
parent: '' |
||||||
|
}, |
||||||
|
uploadLoad: false |
||||||
|
}; |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 图片上传相关函数
|
||||||
|
handleRemove(file, fileList) { |
||||||
|
console.log(fileList); |
||||||
|
//this.$refs.upload.clearFiles;
|
||||||
|
}, |
||||||
|
handlePictureCardPreview(file) { |
||||||
|
this.dialogImageUrl = file.url; |
||||||
|
this.dialogVisible = true; |
||||||
|
}, |
||||||
|
handleDownload(file) { |
||||||
|
this.$message({ |
||||||
|
showClose: true, |
||||||
|
message: '右键点击或者长按图片自行下载' |
||||||
|
}); |
||||||
|
}, |
||||||
|
// 超出上传文件个数限制处理函数
|
||||||
|
fileexceed(files, fileList) { |
||||||
|
//this.$message({showClose:true, message:`当前版本限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`, type:'warning'});
|
||||||
|
this.$message({ showClose: true, message: `当前版本限制上传一个文件`, type: 'warning' }); |
||||||
|
//this.$message.warning(``);
|
||||||
|
}, |
||||||
|
|
||||||
|
filechange(files, fileList) { |
||||||
|
//console.log(files);
|
||||||
|
const isLt2M = files.size / 1024 / 1024 < 5; |
||||||
|
|
||||||
|
if (!isLt2M) { |
||||||
|
this.$message.error('文件大小不能超过 5MB！' + files.name + '已超过，重新选择'); |
||||||
|
fileList.splice(-1, 1); // 移除错误文件
|
||||||
|
//window.setTimeout(() => {fileList.splice(-1, 1);}, 3000);
|
||||||
|
|
||||||
|
//console.log(fileList);
|
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
// 获取传给后台的图片参数
|
||||||
|
this.imgUploadData.name = files.name; |
||||||
|
this.getBase64(files.raw).then(res => { |
||||||
|
//this.dialogImageUrl = 1;
|
||||||
|
this.imgUploadData.file = res; |
||||||
|
//console.log(res)
|
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
// 获取图片base64
|
||||||
|
getBase64(file) { |
||||||
|
let thiss = this; |
||||||
|
return new Promise(function (resolve, reject) { |
||||||
|
|
||||||
|
if (window.FileReader && file) { |
||||||
|
let reader = new FileReader(); |
||||||
|
let imgResult = ""; |
||||||
|
reader.readAsDataURL(file); |
||||||
|
reader.onload = function () { |
||||||
|
imgResult = reader.result; |
||||||
|
}; |
||||||
|
reader.onerror = function (error) { |
||||||
|
reject(error); |
||||||
|
}; |
||||||
|
reader.onloadend = function () { |
||||||
|
resolve(imgResult); |
||||||
|
}; |
||||||
|
} else { |
||||||
|
thiss.$message({ showClose: true, message: '获取base64出错', type: 'error' }); |
||||||
|
} |
||||||
|
|
||||||
|
}); |
||||||
|
// if (window.FileReader && file) {
|
||||||
|
// //调用图片读取方法
|
||||||
|
// var reader = new FileReader();
|
||||||
|
// //读取图片
|
||||||
|
// reader.readAsDataURL(file);
|
||||||
|
// //监听图片读取进度
|
||||||
|
// reader.onloadend = function(e) {
|
||||||
|
// //读取成功，拿到base64编码
|
||||||
|
// let imgBase64 = e.target.result;
|
||||||
|
// console.log(imgBase64);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
}, |
||||||
|
// 确认上传文件
|
||||||
|
UploadRequest() { |
||||||
|
let thiss = this; |
||||||
|
//console.log(file);
|
||||||
|
this.uploadLoad = true; |
||||||
|
uploadrequest(this.imgUploadData).then(response => { |
||||||
|
let datamain = response.data; |
||||||
|
if (datamain.code == 1) { |
||||||
|
console.log(datamain); |
||||||
|
this.$message({ showClose: true, message: datamain.msg, type: 'success' }); |
||||||
|
this.uploadDrawer = false; |
||||||
|
this.getFileData(); |
||||||
|
} |
||||||
|
this.uploadLoad = false; |
||||||
|
}).catch(error => { |
||||||
|
if (error.response) { |
||||||
|
thiss.$message({ showClose: true, message: error.response.data.err, type: 'error' }); |
||||||
|
this.uploadLoad = false; |
||||||
|
} else if (error.request) { |
||||||
|
thiss.$message({ showClose: true, message: error.response.data.err, type: 'error' }); |
||||||
|
} else { |
||||||
|
thiss.$message({ showClose: true, message: error.response.data.err, type: 'error' }); |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
getFileData() { |
||||||
|
let can = {}; |
||||||
|
const menusindex = window.location.href |
||||||
|
if (menusindex.indexOf('?id') != -1) { |
||||||
|
//console.log(menusindex.split('?id=')[1]);
|
||||||
|
can.id = menusindex.split('?id=')[1] |
||||||
|
} |
||||||
|
|
||||||
|
let thiss = this; |
||||||
|
this.subloading = true; |
||||||
|
mirlist(can).then(response => { |
||||||
|
let datamain = response.data; |
||||||
|
let maindata = datamain.data.dirTree; |
||||||
|
if (datamain.code == 1) { |
||||||
|
//console.log(maindata.directories.length);
|
||||||
|
this.dirdata = [] |
||||||
|
this.tableData = [] |
||||||
|
if (maindata.directories) { |
||||||
|
this.dirdata = this.forObjectData(maindata.directories); |
||||||
|
} |
||||||
|
|
||||||
|
if (maindata.files) { |
||||||
|
this.tableData = this.forObjectData(maindata.files); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
//this.haveRealpath = maindata.realpath;
|
||||||
|
//console.log(this.haveRealpath);
|
||||||
|
this.dirform.parent = maindata.realpath; //获取当前目录的位置
|
||||||
|
this.rmdirform.parent = maindata.realpath; //获取当前目录的位置 删除目录
|
||||||
|
this.rmfileform.parent = maindata.realpath; //获取当前目录的位置 删除文件
|
||||||
|
this.renamefileform.parent = maindata.realpath; //获取当前目录的位置 删除文件
|
||||||
|
this.imgUploadData.parent = maindata.realpath; // 上传图片
|
||||||
|
this.movefileform.from = maindata.realpath; // 移动目录
|
||||||
|
//console.log(this.movefileform.from);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
this.subloading = false; |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
}).catch(error => { |
||||||
|
if (error.response) { |
||||||
|
thiss.$message({ showClose: true, message: error.response.data.err, type: 'error' }); |
||||||
|
} else if (error.request) { |
||||||
|
thiss.$message({ showClose: true, message: error, type: 'error' }); |
||||||
|
} else { |
||||||
|
thiss.$message({ showClose: true, message: error.message, type: 'error' }); |
||||||
|
} |
||||||
|
|
||||||
|
this.subloading = false; |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
forObjectData(objectd) { |
||||||
|
let newObject = null, arrObjs = []; |
||||||
|
|
||||||
|
Object.keys(objectd).forEach(item => { |
||||||
|
let names = null; |
||||||
|
if (objectd[item].filename) { |
||||||
|
names = objectd[item].filename + '.' + objectd[item].extension; |
||||||
|
} |
||||||
|
newObject = { |
||||||
|
date: '2016-05-03', |
||||||
|
image: objectd[item].path, |
||||||
|
name: names || objectd[item].directory, |
||||||
|
id: objectd[item].id, |
||||||
|
frealpath: objectd[item].realpath |
||||||
|
} |
||||||
|
|
||||||
|
arrObjs.push(newObject); |
||||||
|
}); |
||||||
|
|
||||||
|
return arrObjs; |
||||||
|
//console.log(arrObjs);
|
||||||
|
}, |
||||||
|
|
||||||
|
// 创建目录
|
||||||
|
mkdirs() { |
||||||
|
let thiss = this; |
||||||
|
if (!this.dirform.dir) { |
||||||
|
thiss.$message({ showClose: true, message: '目录名不能为空', type: 'error' }); |
||||||
|
return; |
||||||
|
} |
||||||
|
//console.log(this.dirform);
|
||||||
|
this.mkdirloadings = true; |
||||||
|
mkdir(this.dirform).then(response => { |
||||||
|
let datamain = response.data; |
||||||
|
if (datamain.code == 1) { |
||||||
|
|
||||||
|
EventBus.$emit('mkdirSuccess'); //触发菜单栏刷新
|
||||||
|
this.getFileData(); |
||||||
|
|
||||||
|
this.dirform.dir = ''; |
||||||
|
thiss.$message({ showClose: true, message: datamain.msg, type: 'success' }); |
||||||
|
//this.subloading = false;
|
||||||
|
} |
||||||
|
|
||||||
|
this.mkdirloadings = false; |
||||||
|
this.dirbox = false; |
||||||
|
}).catch(error => { |
||||||
|
if (error.response) { |
||||||
|
thiss.mkdirloadings = false; |
||||||
|
thiss.$message({ showClose: true, message: error.response.data.err, type: 'error' }); |
||||||
|
} else if (error.request) { |
||||||
|
thiss.$message({ showClose: true, message: error.response.data.err, type: 'error' }); |
||||||
|
} else { |
||||||
|
thiss.$message({ showClose: true, message: error.response.data.err, type: 'error' }); |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
// 删除目录
|
||||||
|
rmdirm() { |
||||||
|
let thiss = this; |
||||||
|
this.subloading = true; |
||||||
|
//console.log(this.rmdirform);
|
||||||
|
rmdirs(this.rmdirform).then(response => { |
||||||
|
let datamain = response.data; |
||||||
|
let maindata = datamain.data.dirTree; |
||||||
|
if (datamain.code == 1) { |
||||||
|
|
||||||
|
EventBus.$emit('mkdirSuccess'); //触发菜单栏刷新
|
||||||
|
this.getFileData(); |
||||||
|
thiss.$message({ showClose: true, message: datamain.msg, type: 'success' }); |
||||||
|
//this.subloading = false;
|
||||||
|
} else { |
||||||
|
thiss.$message({ showClose: true, message: datamain.err, type: 'error' }); |
||||||
|
} |
||||||
|
this.subloading = false; |
||||||
|
//this.dirbox = false;
|
||||||
|
}).catch(error => { |
||||||
|
if (error.response) { |
||||||
|
thiss.$message({ showClose: true, message: error.response.data.err, type: 'error' }); |
||||||
|
} else if (error.request) { |
||||||
|
thiss.$message({ showClose: true, message: error.response.data.err, type: 'error' }); |
||||||
|
} else { |
||||||
|
thiss.$message({ showClose: true, message: error.response.data.err, type: 'error' }); |
||||||
|
} |
||||||
|
this.subloading = false; |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
// 删除文件
|
||||||
|
rmfile() { |
||||||
|
let thiss = this; |
||||||
|
this.subloading = true; |
||||||
|
//console.log(this.rmfileform);
|
||||||
|
deletefile(this.rmfileform).then(response => { |
||||||
|
let datamain = response.data; |
||||||
|
if (datamain.code == 1) { |
||||||
|
|
||||||
|
this.getFileData(); |
||||||
|
thiss.$message({ showClose: true, message: datamain.msg, type: 'success' }); |
||||||
|
//this.subloading = false;
|
||||||
|
} else { |
||||||
|
thiss.$message({ showClose: true, message: datamain.err, type: 'error' }); |
||||||
|
} |
||||||
|
|
||||||
|
this.subloading = false; |
||||||
|
|
||||||
|
//this.dirbox = false;
|
||||||
|
}).catch(error => { |
||||||
|
this.subloading = false; |
||||||
|
if (error.response) { |
||||||
|
thiss.$message({ showClose: true, message: error.response.data.err, type: 'error' }); |
||||||
|
} else if (error.request) { |
||||||
|
thiss.$message({ showClose: true, message: error.response.data.err, type: 'error' }); |
||||||
|
} else { |
||||||
|
thiss.$message({ showClose: true, message: error.response.data.err, type: 'error' }); |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
// 重命名文件和目录
|
||||||
|
renameFileDir() { |
||||||
|
if (!this.renamefileform.to) { |
||||||
|
this.$message({ showClose: true, message: '新名称不能为空', type: 'error' }); |
||||||
|
return; |
||||||
|
} |
||||||
|
let thiss = this; |
||||||
|
this.subloading = true; |
||||||
|
//console.log(this.rmfileform);
|
||||||
|
renamefile(this.renamefileform).then(response => { |
||||||
|
let datamain = response.data; |
||||||
|
if (datamain.code == 1) { |
||||||
|
|
||||||
|
this.getFileData(); |
||||||
|
thiss.$message({ showClose: true, message: datamain.msg, type: 'success' }); |
||||||
|
//this.subloading = false;
|
||||||
|
} else { |
||||||
|
thiss.$message({ showClose: true, message: datamain.err, type: 'error' }); |
||||||
|
} |
||||||
|
|
||||||
|
this.subloading = false; |
||||||
|
|
||||||
|
this.renamebox = false; |
||||||
|
}).catch(error => { |
||||||
|
this.subloading = false; |
||||||
|
if (error.response) { |
||||||
|
thiss.$message({ showClose: true, message: error.response.data.err, type: 'error' }); |
||||||
|
} else if (error.request) { |
||||||
|
thiss.$message({ showClose: true, message: error.response.data.err, type: 'error' }); |
||||||
|
} else { |
||||||
|
thiss.$message({ showClose: true, message: error.response.data.err, type: 'error' }); |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
// 移动目录或者文件
|
||||||
|
moveFileDir() { |
||||||
|
if (!this.movefileform.to || !this.movefileform.from) { |
||||||
|
this.$message({ showClose: true, message: '不能为空', type: 'error' }); |
||||||
|
return; |
||||||
|
} |
||||||
|
let thiss = this; |
||||||
|
this.subloading = true; |
||||||
|
//console.log(this.rmfileform);
|
||||||
|
movefiledir(this.movefileform).then(response => { |
||||||
|
let datamain = response.data; |
||||||
|
if (datamain.code == 1) { |
||||||
|
|
||||||
|
this.getFileData(); |
||||||
|
thiss.$message({ showClose: true, message: datamain.msg, type: 'success' }); |
||||||
|
//this.subloading = false;
|
||||||
|
} else { |
||||||
|
thiss.$message({ showClose: true, message: datamain.err, type: 'error' }); |
||||||
|
} |
||||||
|
|
||||||
|
this.subloading = false; |
||||||
|
|
||||||
|
this.movebox = false; |
||||||
|
}).catch(error => { |
||||||
|
this.subloading = false; |
||||||
|
if (error.response) { |
||||||
|
thiss.$message({ showClose: true, message: error.response.data.err, type: 'error' }); |
||||||
|
} else if (error.request) { |
||||||
|
thiss.$message({ showClose: true, message: error.response.data.err, type: 'error' }); |
||||||
|
} else { |
||||||
|
thiss.$message({ showClose: true, message: error.response.data.err, type: 'error' }); |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
// table块事件监听
|
||||||
|
fileTableMClick(e) { |
||||||
|
let dangQian = e.target, labelname = dangQian.tagName.toLowerCase(), chufazhe = e.currentTarget; //currentTarget得到调用当前函数的元素
|
||||||
|
let getbutton = dangQian, objmark = null; |
||||||
|
if (labelname == 'span') { |
||||||
|
//console.log(dangQian.parentNode);
|
||||||
|
getbutton = dangQian.parentNode; |
||||||
|
} |
||||||
|
|
||||||
|
objmark = getbutton.getAttribute('mark'); |
||||||
|
|
||||||
|
// 点击删除目录
|
||||||
|
if (objmark == 'dirdelete') { |
||||||
|
this.rmdirform.dir = getbutton.getAttribute('filenames'); |
||||||
|
this.rmdirm(); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
// 点击删除文件
|
||||||
|
if (objmark == 'filedelete') { |
||||||
|
this.rmfileform.file = getbutton.getAttribute('filenames'); |
||||||
|
this.rmfile(); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
// 点击重命名文件和目录
|
||||||
|
if (objmark == 'rename') { |
||||||
|
this.renamefileform.from = getbutton.getAttribute('filenames'); |
||||||
|
this.renamefileform.to = ''; |
||||||
|
this.renamebox = true; |
||||||
|
//this.renameFileDir();
|
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
// 点击移动目录或文件
|
||||||
|
if (objmark == 'movefiledir') { |
||||||
|
//this.movefileform.from = getbutton.getAttribute('filenames');
|
||||||
|
this.movefileform.to = ''; |
||||||
|
this.movebox = true; |
||||||
|
//this.renameFileDir();
|
||||||
|
return; |
||||||
|
} |
||||||
|
//console.log(dangQian);
|
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,745 @@ |
|||||||
|
<template> |
||||||
|
<div class="subfile_main" v-loading="subloading" element-loading-text="数据加载中..."> |
||||||
|
<!-- <div class="block"> |
||||||
|
<el-date-picker |
||||||
|
v-model="value2" |
||||||
|
type="daterange" |
||||||
|
align="right" |
||||||
|
unlink-panels |
||||||
|
range-separator="至" |
||||||
|
start-placeholder="开始日期" |
||||||
|
end-placeholder="结束日期" |
||||||
|
:picker-options="pickerOptions"> |
||||||
|
</el-date-picker> |
||||||
|
<el-button class="sou_bottom" type="primary" icon="el-icon-search">搜索</el-button> |
||||||
|
</div> --> |
||||||
|
<div> |
||||||
|
<!-- 目录数据列表 --> |
||||||
|
<!-- <div class="folder_bottom"> |
||||||
|
|
||||||
|
<a v-for="data in dirdata" :key="data.id" :href="'#/filemange/subfile?id='+data.id"><el-button type="warning" icon="el-icon-notebook-1">{{data.directory}}</el-button></a> |
||||||
|
</div> --> |
||||||
|
|
||||||
|
<div class="use_button textright"> |
||||||
|
<el-button type="primary" icon="el-icon-edit" @click="dirbox = true">创建目录</el-button> |
||||||
|
<!-- <el-button type="primary" icon="el-icon-edit" @click="rmdirm">删除目录</el-button> |
||||||
|
<el-button type="primary" icon="el-icon-edit">重命名</el-button> --> |
||||||
|
<el-button type="primary" @click="uploadDrawer = true">上传<i class="el-icon-upload el-icon--right"></i></el-button> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div v-on:click="fileTableMClick"> |
||||||
|
<!-- 子目录数据列表 如果不需要显示空数据提示，可以用css隐藏--> |
||||||
|
<el-table |
||||||
|
:data="dirdata" |
||||||
|
empty-text="暂无子目录数据" |
||||||
|
border |
||||||
|
style="width: 100%" class="filesmd"> |
||||||
|
<!-- <el-table-column |
||||||
|
align="center" |
||||||
|
prop="date" |
||||||
|
label="时间" |
||||||
|
width="auto"> |
||||||
|
</el-table-column> --> |
||||||
|
<el-table-column |
||||||
|
align="center" |
||||||
|
prop="name" |
||||||
|
label="名称"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column |
||||||
|
align="center" |
||||||
|
label="类型" |
||||||
|
width="auto"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<div class="type_file_click"> |
||||||
|
<a :href="'#/filemange/subfile?id='+scope.row.id"> |
||||||
|
<!-- <el-button type="warning" icon="el-icon-notebook-1">{{scope.row.name}}</el-button> --> |
||||||
|
<img src="../../common/img/file.png" alt="图片"/> |
||||||
|
</a> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
</el-table-column> |
||||||
|
<el-table-column |
||||||
|
align="center" |
||||||
|
label="操作" |
||||||
|
width="auto"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<div class="file_caozuo"> |
||||||
|
<el-button size="mini" :filenames="scope.row.name" mark="rename">重命名</el-button> |
||||||
|
<!-- <el-button size="mini">下载</el-button> --> |
||||||
|
</div> |
||||||
|
<div class="file_caozuo2"> |
||||||
|
<el-button size="mini" :realpath="scope.row.frealpath" mark="movefiledir">移动</el-button> |
||||||
|
<el-button size="mini" mark="dirdelete" :filenames="scope.row.name" type="danger">删除</el-button> |
||||||
|
|
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
|
||||||
|
<!-- 文件数据列表 --> |
||||||
|
<el-table |
||||||
|
:show-header="false" |
||||||
|
empty-text="暂无文件数据" |
||||||
|
:data="tableData" |
||||||
|
border |
||||||
|
style="width: 100%;"> |
||||||
|
|
||||||
|
<!-- <el-table-column |
||||||
|
align="center" |
||||||
|
prop="date" |
||||||
|
label="时间" |
||||||
|
width="auto"> |
||||||
|
</el-table-column> --> |
||||||
|
<el-table-column |
||||||
|
align="center" |
||||||
|
prop="name" |
||||||
|
label="名称"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column |
||||||
|
align="center" |
||||||
|
label="图片" |
||||||
|
width="auto"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<img :src="'http://192.168.0.100/'+scope.row.image" alt="图片"/> |
||||||
|
</template> |
||||||
|
|
||||||
|
</el-table-column> |
||||||
|
|
||||||
|
<el-table-column |
||||||
|
align="center" |
||||||
|
label="操作"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<div class="file_caozuo"> |
||||||
|
<el-button size="mini" :filenames="scope.row.name" mark="rename">重命名</el-button> |
||||||
|
<!-- <el-button size="mini">下载</el-button> --> |
||||||
|
</div> |
||||||
|
<div class="file_caozuo2"> |
||||||
|
<el-button size="mini" :realpath="scope.row.frealpath" mark="movefiledir">移动</el-button> |
||||||
|
<el-button size="mini" mark="filedelete" :filenames="scope.row.name" type="danger">删除</el-button> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- 创建目录弹框 --> |
||||||
|
<el-dialog title="创建目录" :visible.sync="dirbox"> |
||||||
|
<el-form :model="dirform"> |
||||||
|
<el-form-item label="目录名称" :label-width="formLabelWidth"> |
||||||
|
<el-input v-model="dirform.dir" autocomplete="off"></el-input> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
<div slot="footer" class="dialog-footer"> |
||||||
|
<el-button @click="dirbox = false">取 消</el-button> |
||||||
|
<el-button type="primary" @click="mkdirs" :loading="mkdirloadings">确 定</el-button> |
||||||
|
</div> |
||||||
|
</el-dialog> |
||||||
|
|
||||||
|
<!-- 重新命名弹框 --> |
||||||
|
<el-dialog title="重命名" :visible.sync="renamebox"> |
||||||
|
<el-form :model="renamefileform"> |
||||||
|
<el-form-item label="新名称" :label-width="formLabelWidth"> |
||||||
|
<el-input v-model="renamefileform.to" autocomplete="off"></el-input> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
<div slot="footer" class="dialog-footer"> |
||||||
|
<el-button @click="renamebox = false">取 消</el-button> |
||||||
|
<el-button type="primary" @click="renameFileDir" :loading="mkdirloadings">确 定</el-button> |
||||||
|
</div> |
||||||
|
</el-dialog> |
||||||
|
|
||||||
|
<!-- 移动目录弹框 --> |
||||||
|
<el-dialog title="目录移动弹出框" :visible.sync="movebox"> |
||||||
|
<el-form :model="movefileform"> |
||||||
|
<el-form-item label="当前位置" :label-width="formLabelWidth"> |
||||||
|
<el-input v-model="movefileform.from" autocomplete="off"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="目标位置" :label-width="formLabelWidth"> |
||||||
|
<el-input v-model="movefileform.to" autocomplete="off"></el-input> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
<div slot="footer" class="dialog-footer"> |
||||||
|
<el-button @click="movebox = false">取 消</el-button> |
||||||
|
<el-button type="primary" @click="moveFileDir" :loading="mkdirloadings">确 定</el-button> |
||||||
|
</div> |
||||||
|
</el-dialog> |
||||||
|
<el-drawer |
||||||
|
title="上传图片" |
||||||
|
:visible.sync="uploadDrawer" |
||||||
|
:direction="direction" |
||||||
|
size="100%" |
||||||
|
> |
||||||
|
|
||||||
|
<el-upload |
||||||
|
action="" |
||||||
|
:limit="1" |
||||||
|
list-type="picture-card" |
||||||
|
:on-remove="handleRemove" |
||||||
|
:on-exceed="fileexceed" |
||||||
|
:multiple="true" |
||||||
|
:on-change="filechange" |
||||||
|
:on-preview="handlePictureCardPreview" |
||||||
|
:disabled="false" |
||||||
|
accept=".jpg, .jpeg, .png, .gif" |
||||||
|
:auto-upload="false"> |
||||||
|
<i slot="default" class="el-icon-plus"></i> |
||||||
|
<span class="addimgtext">添加照片</span> |
||||||
|
</el-upload> |
||||||
|
<div class="request_main"> |
||||||
|
<el-button type="success" :loading="uploadLoad" @click="UploadRequest()">开始上传<i class="el-icon-upload el-icon--right"></i></el-button> |
||||||
|
</div> |
||||||
|
<div class="el-upload__tip">只能上传.jpg, .jpeg, .png, .gif文件，且不超过5MB</div> |
||||||
|
<el-dialog :modal="false" :visible.sync="dialogVisible"> |
||||||
|
<img width="100%" :src="dialogImageUrl" alt="图片"> |
||||||
|
</el-dialog> |
||||||
|
</el-drawer> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
|
||||||
|
import EventBus from '@/utils/EventBus.js' |
||||||
|
import { mirlist, mkdir, uploadrequest, rmdirs, deletefile, renamefile, movefiledir} from '@/api/user' |
||||||
|
//import defaultSettings from '@/settings.js' |
||||||
|
|
||||||
|
export default { |
||||||
|
|
||||||
|
watch: { |
||||||
|
// 点击不同目录请求不同接口 |
||||||
|
$route(to, from) { |
||||||
|
|
||||||
|
this.getFileData(); |
||||||
|
} |
||||||
|
}, |
||||||
|
// beforeRouteUpdate(to, from, next) { |
||||||
|
// alert(0); |
||||||
|
// next(); |
||||||
|
// }, |
||||||
|
|
||||||
|
// 实例还没挂载 |
||||||
|
created() { |
||||||
|
this.getFileData(); |
||||||
|
}, |
||||||
|
|
||||||
|
// 实例已经挂载 |
||||||
|
|
||||||
|
|
||||||
|
filters: { |
||||||
|
|
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
// 按日期查询 |
||||||
|
// pickerOptions: { |
||||||
|
// shortcuts: [{ |
||||||
|
// text: '最近一周', |
||||||
|
// onClick(picker) { |
||||||
|
// const end = new Date(); |
||||||
|
// const start = new Date(); |
||||||
|
// start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); |
||||||
|
// picker.$emit('pick', [start, end]); |
||||||
|
// } |
||||||
|
// }, { |
||||||
|
// text: '最近一个月', |
||||||
|
// onClick(picker) { |
||||||
|
// const end = new Date(); |
||||||
|
// const start = new Date(); |
||||||
|
// start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); |
||||||
|
// picker.$emit('pick', [start, end]); |
||||||
|
// } |
||||||
|
// }, { |
||||||
|
// text: '最近三个月', |
||||||
|
// onClick(picker) { |
||||||
|
// const end = new Date(); |
||||||
|
// const start = new Date(); |
||||||
|
// start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); |
||||||
|
// picker.$emit('pick', [start, end]); |
||||||
|
// } |
||||||
|
// }] |
||||||
|
// }, |
||||||
|
// value2: '', |
||||||
|
|
||||||
|
//haveRealpath: 0, |
||||||
|
// 当前目录文件数据 |
||||||
|
tableData: [], |
||||||
|
|
||||||
|
// 当前目录子目录数据 |
||||||
|
dirdata: [], |
||||||
|
|
||||||
|
// 创建目录弹出框数据 |
||||||
|
dirbox: false, |
||||||
|
dirform: { |
||||||
|
dir: '', |
||||||
|
parent: '' |
||||||
|
}, |
||||||
|
formLabelWidth: '', |
||||||
|
|
||||||
|
//删除目录数据 |
||||||
|
rmdirform: { |
||||||
|
dir: '', |
||||||
|
parent: '' |
||||||
|
}, |
||||||
|
|
||||||
|
// 删除文件数据 |
||||||
|
rmfileform: { |
||||||
|
file: '', |
||||||
|
parent: '' |
||||||
|
}, |
||||||
|
|
||||||
|
// 重命名文件数据 |
||||||
|
renamebox: false, |
||||||
|
renamefileform: { |
||||||
|
from: '', |
||||||
|
to: '', |
||||||
|
parent: '' |
||||||
|
}, |
||||||
|
|
||||||
|
// 移动目录或者文件数据 |
||||||
|
movebox: false, |
||||||
|
movefileform: { |
||||||
|
from: '', |
||||||
|
to: '' |
||||||
|
}, |
||||||
|
|
||||||
|
subloading: false, //切换目录loading |
||||||
|
mkdirloadings: false, //创建目录loading |
||||||
|
|
||||||
|
// 图片上传弹出框数据 |
||||||
|
uploadDrawer: false, |
||||||
|
direction: 'ttb', |
||||||
|
|
||||||
|
// 图片上传相关数据 |
||||||
|
dialogImageUrl: '', |
||||||
|
dialogVisible: false, |
||||||
|
disabled: false, |
||||||
|
imgUploadData: { |
||||||
|
name: '', |
||||||
|
file: '', |
||||||
|
parent: '' |
||||||
|
}, |
||||||
|
uploadLoad: false |
||||||
|
}; |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 图片上传相关函数 |
||||||
|
handleRemove(file, fileList) { |
||||||
|
console.log(fileList); |
||||||
|
//this.$refs.upload.clearFiles; |
||||||
|
}, |
||||||
|
handlePictureCardPreview(file) { |
||||||
|
this.dialogImageUrl = file.url; |
||||||
|
this.dialogVisible = true; |
||||||
|
}, |
||||||
|
handleDownload(file) { |
||||||
|
this.$message({ |
||||||
|
showClose: true, |
||||||
|
message: '右键点击或者长按图片自行下载' |
||||||
|
}); |
||||||
|
}, |
||||||
|
// 超出上传文件个数限制处理函数 |
||||||
|
fileexceed(files, fileList) { |
||||||
|
//this.$message({showClose:true, message:`当前版本限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`, type:'warning'}); |
||||||
|
this.$message({showClose:true, message:`当前版本限制上传一个文件`, type:'warning'}); |
||||||
|
//this.$message.warning(``); |
||||||
|
}, |
||||||
|
|
||||||
|
filechange(files, fileList) { |
||||||
|
//console.log(files); |
||||||
|
const isLt2M = files.size / 1024 / 1024 < 5; |
||||||
|
|
||||||
|
if (!isLt2M) { |
||||||
|
this.$message.error('文件大小不能超过 5MB！'+files.name+'已超过，重新选择'); |
||||||
|
fileList.splice(-1, 1); // 移除错误文件 |
||||||
|
//window.setTimeout(() => {fileList.splice(-1, 1);}, 3000); |
||||||
|
|
||||||
|
//console.log(fileList); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
// 获取传给后台的图片参数 |
||||||
|
this.imgUploadData.name = files.name; |
||||||
|
this.getBase64(files.raw).then(res => { |
||||||
|
//this.dialogImageUrl = 1; |
||||||
|
this.imgUploadData.file = res; |
||||||
|
//console.log(res) |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
// 获取图片base64 |
||||||
|
getBase64(file) { |
||||||
|
let thiss = this; |
||||||
|
return new Promise(function(resolve, reject) { |
||||||
|
|
||||||
|
if (window.FileReader && file) { |
||||||
|
let reader = new FileReader(); |
||||||
|
let imgResult = ""; |
||||||
|
reader.readAsDataURL(file); |
||||||
|
reader.onload = function() { |
||||||
|
imgResult = reader.result; |
||||||
|
}; |
||||||
|
reader.onerror = function(error) { |
||||||
|
reject(error); |
||||||
|
}; |
||||||
|
reader.onloadend = function() { |
||||||
|
resolve(imgResult); |
||||||
|
}; |
||||||
|
} else { |
||||||
|
thiss.$message({showClose: true,message: '获取base64出错',type: 'error'}); |
||||||
|
} |
||||||
|
|
||||||
|
}); |
||||||
|
// if (window.FileReader && file) { |
||||||
|
// //调用图片读取方法 |
||||||
|
// var reader = new FileReader(); |
||||||
|
// //读取图片 |
||||||
|
// reader.readAsDataURL(file); |
||||||
|
// //监听图片读取进度 |
||||||
|
// reader.onloadend = function(e) { |
||||||
|
// //读取成功，拿到base64编码 |
||||||
|
// let imgBase64 = e.target.result; |
||||||
|
// console.log(imgBase64); |
||||||
|
// } |
||||||
|
// } |
||||||
|
}, |
||||||
|
// 确认上传文件 |
||||||
|
UploadRequest() { |
||||||
|
let thiss = this; |
||||||
|
//console.log(file); |
||||||
|
this.uploadLoad = true; |
||||||
|
uploadrequest(this.imgUploadData).then(response => { |
||||||
|
let datamain = response.data; |
||||||
|
if (datamain.code == 1) { |
||||||
|
console.log(datamain); |
||||||
|
this.$message({showClose: true,message: datamain.msg, type:'success'}); |
||||||
|
this.uploadDrawer = false; |
||||||
|
this.getFileData(); |
||||||
|
} |
||||||
|
this.uploadLoad = false; |
||||||
|
}).catch(error => { |
||||||
|
if (error.response) { |
||||||
|
thiss.$message({showClose: true,message: error.response.data.err,type: 'error'}); |
||||||
|
this.uploadLoad = false; |
||||||
|
} else if (error.request) { |
||||||
|
thiss.$message({showClose: true,message: error.response.data.err,type: 'error'}); |
||||||
|
} else { |
||||||
|
thiss.$message({showClose: true,message: error.response.data.err,type: 'error'}); |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
getFileData() { |
||||||
|
let can = {}; |
||||||
|
const menusindex = window.location.href |
||||||
|
if (menusindex.indexOf('?id') != -1) { |
||||||
|
//console.log(menusindex.split('?id=')[1]); |
||||||
|
can.id = menusindex.split('?id=')[1] |
||||||
|
} |
||||||
|
|
||||||
|
let thiss = this; |
||||||
|
this.subloading = true; |
||||||
|
mirlist(can).then(response => { |
||||||
|
let datamain = response.data; |
||||||
|
let maindata = datamain.data.dirTree; |
||||||
|
if (datamain.code == 1) { |
||||||
|
//console.log(maindata.directories.length); |
||||||
|
this.dirdata = [] |
||||||
|
this.tableData = [] |
||||||
|
if (maindata.directories) { |
||||||
|
this.dirdata = this.forObjectData(maindata.directories); |
||||||
|
} |
||||||
|
|
||||||
|
if (maindata.files) { |
||||||
|
this.tableData = this.forObjectData(maindata.files); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
//this.haveRealpath = maindata.realpath; |
||||||
|
//console.log(this.haveRealpath); |
||||||
|
this.dirform.parent = maindata.realpath; //获取当前目录的位置 |
||||||
|
this.rmdirform.parent = maindata.realpath; //获取当前目录的位置 删除目录 |
||||||
|
this.rmfileform.parent = maindata.realpath; //获取当前目录的位置 删除文件 |
||||||
|
this.renamefileform.parent = maindata.realpath; //获取当前目录的位置 删除文件 |
||||||
|
this.imgUploadData.parent = maindata.realpath; // 上传图片 |
||||||
|
this.movefileform.from = maindata.realpath; // 移动目录 |
||||||
|
//console.log(this.movefileform.from); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
this.subloading = false; |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
}).catch(error => { |
||||||
|
if (error.response) { |
||||||
|
thiss.$message({showClose: true,message: error.response.data.err,type: 'error'}); |
||||||
|
} else if (error.request) { |
||||||
|
thiss.$message({showClose: true,message: error,type: 'error'}); |
||||||
|
} else { |
||||||
|
thiss.$message({showClose: true,message: error.message,type: 'error'}); |
||||||
|
} |
||||||
|
|
||||||
|
this.subloading = false; |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
forObjectData(objectd) { |
||||||
|
let newObject = null, arrObjs = []; |
||||||
|
|
||||||
|
Object.keys(objectd).forEach(item => { |
||||||
|
let names = null; |
||||||
|
if (objectd[item].filename) { |
||||||
|
names = objectd[item].filename+'.'+objectd[item].extension; |
||||||
|
} |
||||||
|
newObject = { |
||||||
|
date: '2016-05-03', |
||||||
|
image: objectd[item].path, |
||||||
|
name: names || objectd[item].directory, |
||||||
|
id: objectd[item].id, |
||||||
|
frealpath: objectd[item].realpath |
||||||
|
} |
||||||
|
|
||||||
|
arrObjs.push(newObject); |
||||||
|
}); |
||||||
|
|
||||||
|
return arrObjs; |
||||||
|
//console.log(arrObjs); |
||||||
|
}, |
||||||
|
|
||||||
|
// 创建目录 |
||||||
|
mkdirs() { |
||||||
|
let thiss = this; |
||||||
|
if (!this.dirform.dir) { |
||||||
|
thiss.$message({showClose: true,message: '目录名不能为空',type: 'error'}); |
||||||
|
return; |
||||||
|
} |
||||||
|
//console.log(this.dirform); |
||||||
|
this.mkdirloadings = true; |
||||||
|
mkdir(this.dirform).then(response => { |
||||||
|
let datamain = response.data; |
||||||
|
if (datamain.code == 1) { |
||||||
|
|
||||||
|
EventBus.$emit('mkdirSuccess'); //触发菜单栏刷新 |
||||||
|
this.getFileData(); |
||||||
|
|
||||||
|
this.dirform.dir = ''; |
||||||
|
thiss.$message({showClose: true,message: datamain.msg,type: 'success'}); |
||||||
|
//this.subloading = false; |
||||||
|
} |
||||||
|
|
||||||
|
this.mkdirloadings = false; |
||||||
|
this.dirbox = false; |
||||||
|
}).catch(error => { |
||||||
|
if (error.response) { |
||||||
|
thiss.mkdirloadings = false; |
||||||
|
thiss.$message({showClose: true,message: error.response.data.err,type: 'error'}); |
||||||
|
} else if (error.request) { |
||||||
|
thiss.$message({showClose: true,message: error.response.data.err,type: 'error'}); |
||||||
|
} else { |
||||||
|
thiss.$message({showClose: true,message: error.response.data.err,type: 'error'}); |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
// 删除目录 |
||||||
|
rmdirm() { |
||||||
|
let thiss = this; |
||||||
|
this.subloading = true; |
||||||
|
//console.log(this.rmdirform); |
||||||
|
rmdirs(this.rmdirform).then(response => { |
||||||
|
let datamain = response.data; |
||||||
|
let maindata = datamain.data.dirTree; |
||||||
|
if (datamain.code == 1) { |
||||||
|
|
||||||
|
EventBus.$emit('mkdirSuccess'); //触发菜单栏刷新 |
||||||
|
this.getFileData(); |
||||||
|
thiss.$message({showClose: true,message: datamain.msg,type: 'success'}); |
||||||
|
//this.subloading = false; |
||||||
|
} else { |
||||||
|
thiss.$message({showClose: true,message: datamain.err,type: 'error'}); |
||||||
|
} |
||||||
|
this.subloading = false; |
||||||
|
//this.dirbox = false; |
||||||
|
}).catch(error => { |
||||||
|
if (error.response) { |
||||||
|
thiss.$message({showClose: true,message: error.response.data.err,type: 'error'}); |
||||||
|
} else if (error.request) { |
||||||
|
thiss.$message({showClose: true,message: error.response.data.err,type: 'error'}); |
||||||
|
} else { |
||||||
|
thiss.$message({showClose: true,message: error.response.data.err,type: 'error'}); |
||||||
|
} |
||||||
|
this.subloading = false; |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
// 删除文件 |
||||||
|
rmfile() { |
||||||
|
let thiss = this; |
||||||
|
this.subloading = true; |
||||||
|
//console.log(this.rmfileform); |
||||||
|
deletefile(this.rmfileform).then(response => { |
||||||
|
let datamain = response.data; |
||||||
|
if (datamain.code == 1) { |
||||||
|
|
||||||
|
this.getFileData(); |
||||||
|
thiss.$message({showClose: true,message: datamain.msg,type: 'success'}); |
||||||
|
//this.subloading = false; |
||||||
|
} else { |
||||||
|
thiss.$message({showClose: true,message: datamain.err,type: 'error'}); |
||||||
|
} |
||||||
|
|
||||||
|
this.subloading = false; |
||||||
|
|
||||||
|
//this.dirbox = false; |
||||||
|
}).catch(error => { |
||||||
|
this.subloading = false; |
||||||
|
if (error.response) { |
||||||
|
thiss.$message({showClose: true,message: error.response.data.err,type: 'error'}); |
||||||
|
} else if (error.request) { |
||||||
|
thiss.$message({showClose: true,message: error.response.data.err,type: 'error'}); |
||||||
|
} else { |
||||||
|
thiss.$message({showClose: true,message: error.response.data.err,type: 'error'}); |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
// 重命名文件和目录 |
||||||
|
renameFileDir() { |
||||||
|
if (!this.renamefileform.to) { |
||||||
|
this.$message({showClose: true,message: '新名称不能为空',type: 'error'}); |
||||||
|
return; |
||||||
|
} |
||||||
|
let thiss = this; |
||||||
|
this.subloading = true; |
||||||
|
//console.log(this.rmfileform); |
||||||
|
renamefile(this.renamefileform).then(response => { |
||||||
|
let datamain = response.data; |
||||||
|
if (datamain.code == 1) { |
||||||
|
|
||||||
|
EventBus.$emit('mkdirSuccess'); //触发菜单栏刷新 |
||||||
|
this.getFileData(); |
||||||
|
thiss.$message({showClose: true,message: datamain.msg,type: 'success'}); |
||||||
|
//this.subloading = false; |
||||||
|
} else { |
||||||
|
thiss.$message({showClose: true,message: datamain.err,type: 'error'}); |
||||||
|
} |
||||||
|
|
||||||
|
this.subloading = false; |
||||||
|
|
||||||
|
this.renamebox = false; |
||||||
|
}).catch(error => { |
||||||
|
this.subloading = false; |
||||||
|
if (error.response) { |
||||||
|
thiss.$message({showClose: true,message: error.response.data.err,type: 'error'}); |
||||||
|
} else if (error.request) { |
||||||
|
thiss.$message({showClose: true,message: error.response.data.err,type: 'error'}); |
||||||
|
} else { |
||||||
|
thiss.$message({showClose: true,message: error.response.data.err,type: 'error'}); |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
// 移动目录或者文件 |
||||||
|
moveFileDir() { |
||||||
|
if (!this.movefileform.to || !this.movefileform.from) { |
||||||
|
this.$message({showClose: true,message: '不能为空',type: 'error'}); |
||||||
|
return; |
||||||
|
} |
||||||
|
let thiss = this; |
||||||
|
this.subloading = true; |
||||||
|
//console.log(this.rmfileform); |
||||||
|
movefiledir(this.movefileform).then(response => { |
||||||
|
let datamain = response.data; |
||||||
|
if (datamain.code == 1) { |
||||||
|
|
||||||
|
this.getFileData(); |
||||||
|
thiss.$message({showClose: true,message: datamain.msg,type: 'success'}); |
||||||
|
//this.subloading = false; |
||||||
|
} else { |
||||||
|
thiss.$message({showClose: true,message: datamain.err,type: 'error'}); |
||||||
|
} |
||||||
|
|
||||||
|
this.subloading = false; |
||||||
|
|
||||||
|
this.movebox = false; |
||||||
|
}).catch(error => { |
||||||
|
this.subloading = false; |
||||||
|
if (error.response) { |
||||||
|
thiss.$message({showClose: true,message: error.response.data.err,type: 'error'}); |
||||||
|
} else if (error.request) { |
||||||
|
thiss.$message({showClose: true,message: error.response.data.err,type: 'error'}); |
||||||
|
} else { |
||||||
|
thiss.$message({showClose: true,message: error.response.data.err,type: 'error'}); |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
// table块事件监听 |
||||||
|
fileTableMClick(e) { |
||||||
|
let dangQian = e.target, labelname = dangQian.tagName.toLowerCase(), chufazhe = e.currentTarget; //currentTarget得到调用当前函数的元素 |
||||||
|
let getbutton = dangQian, objmark = null; |
||||||
|
if (labelname == 'span') { |
||||||
|
//console.log(dangQian.parentNode); |
||||||
|
getbutton = dangQian.parentNode; |
||||||
|
} |
||||||
|
|
||||||
|
objmark = getbutton.getAttribute('mark'); |
||||||
|
|
||||||
|
// 点击删除目录 |
||||||
|
if (objmark == 'dirdelete') { |
||||||
|
this.rmdirform.dir = getbutton.getAttribute('filenames'); |
||||||
|
this.rmdirm(); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
// 点击删除文件 |
||||||
|
if (objmark == 'filedelete') { |
||||||
|
this.rmfileform.file = getbutton.getAttribute('filenames'); |
||||||
|
this.rmfile(); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
// 点击重命名文件和目录 |
||||||
|
if (objmark == 'rename') { |
||||||
|
this.renamefileform.from = getbutton.getAttribute('filenames'); |
||||||
|
this.renamefileform.to = ''; |
||||||
|
this.renamebox = true; |
||||||
|
//this.renameFileDir(); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
// 点击移动目录或文件 |
||||||
|
if (objmark == 'movefiledir') { |
||||||
|
//this.movefileform.from = getbutton.getAttribute('filenames'); |
||||||
|
this.movefileform.from = getbutton.getAttribute('realpath'); |
||||||
|
this.movefileform.to = ''; |
||||||
|
this.movebox = true; |
||||||
|
//this.renameFileDir(); |
||||||
|
return; |
||||||
|
} |
||||||
|
//console.log(dangQian); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
|
||||||
|
.subfile_main{ |
||||||
|
padding:26px 5% 47px 5%; |
||||||
|
.block{margin:0 0 28px 0;} |
||||||
|
.sou_bottom{margin-left:10px;} |
||||||
|
.use_button{margin:15px 0 16px 0;} |
||||||
|
// .use_button>button{margin:0 10px 10px 0;} |
||||||
|
.file_caozuo2>button{margin-top:6px;} |
||||||
|
.el-table td{padding:9px 0} |
||||||
|
.folder_bottom a{margin:0 6px;} |
||||||
|
.el-table__body-wrapper img{width:100px;height:71px;} |
||||||
|
.el-drawer__body{text-align:center;padding:0 10% 20px 10%;} |
||||||
|
.request_main{text-align:center;margin:12px 0;} |
||||||
|
.addimgtext{line-height:25px;display:inline-block;color:#8c939d;vertical-align: middle;} |
||||||
|
.el-upload--picture-card i{vertical-align:middle;} |
||||||
|
.type_file_click img{width:64px;height:48px;} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,90 @@ |
|||||||
|
<template> |
||||||
|
<div class="seitchtheme_m"> |
||||||
|
<div> |
||||||
|
<span>更换皮肤：</span> |
||||||
|
<el-select v-model="skinvalue" placeholder="请选择皮肤"> |
||||||
|
<el-option |
||||||
|
v-for="item in options" |
||||||
|
:key="item.value" |
||||||
|
:label="item.label" |
||||||
|
:value="item.value"> |
||||||
|
</el-option> |
||||||
|
</el-select> |
||||||
|
<div class="Submit1"> |
||||||
|
<el-button @click="skinSubmit" :loading="skinloading" type="primary">提交</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
|
||||||
|
import { switchthemeApi} from '@/api/user' |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
options: [{ |
||||||
|
value: 'manual', |
||||||
|
label: 'manual' |
||||||
|
}, { |
||||||
|
value: 'webdirectory', |
||||||
|
label: 'webdirectory' |
||||||
|
}, { |
||||||
|
value: 'googleimage', |
||||||
|
label: 'googleimage' |
||||||
|
}, { |
||||||
|
value: 'videoblog', |
||||||
|
label: 'videoblog' |
||||||
|
}], |
||||||
|
skinvalue: '', |
||||||
|
skinloading:false, |
||||||
|
|
||||||
|
themes:{ |
||||||
|
theme:'' |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
skinSubmit() { |
||||||
|
let thiss = this; |
||||||
|
this.skinloading = true; |
||||||
|
this.themes.theme = this.skinvalue; |
||||||
|
switchthemeApi(this.themes).then(response => { |
||||||
|
let datamain = response.data; |
||||||
|
if (datamain.code == 1) { |
||||||
|
|
||||||
|
this.getFileData(); |
||||||
|
thiss.$message({showClose: true,message: datamain.msg,type: 'success'}); |
||||||
|
//this.subloading = false; |
||||||
|
} else { |
||||||
|
thiss.$message({showClose: true,message: datamain.err,type: 'error'}); |
||||||
|
} |
||||||
|
|
||||||
|
this.skinloading = false; |
||||||
|
|
||||||
|
}).catch(error => { |
||||||
|
this.skinloading = false; |
||||||
|
if (error.response) { |
||||||
|
thiss.$message({showClose: true,message: error.response.data.err,type: 'error'}); |
||||||
|
} else if (error.request) { |
||||||
|
thiss.$message({showClose: true,message: error.response.data.err,type: 'error'}); |
||||||
|
} else { |
||||||
|
thiss.$message({showClose: true,message: error.response.data.err,type: 'error'}); |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
.seitchtheme_m{ |
||||||
|
padding:26px 5% 47px 5%; |
||||||
|
.el-select{width:88%} |
||||||
|
.Submit1{margin:20px 0;text-align:center;} |
||||||
|
} |
||||||
|
|
||||||
|
</style> |
||||||
@ -1,79 +0,0 @@ |
|||||||
<template> |
|
||||||
<div class="app-container"> |
|
||||||
<el-table |
|
||||||
v-loading="listLoading" |
|
||||||
:data="list" |
|
||||||
element-loading-text="Loading" |
|
||||||
border |
|
||||||
fit |
|
||||||
highlight-current-row |
|
||||||
> |
|
||||||
<el-table-column align="center" label="ID" width="95"> |
|
||||||
<template slot-scope="scope"> |
|
||||||
{{ scope.$index }} |
|
||||||
</template> |
|
||||||
</el-table-column> |
|
||||||
<el-table-column label="Title"> |
|
||||||
<template slot-scope="scope"> |
|
||||||
{{ scope.row.title }} |
|
||||||
</template> |
|
||||||
</el-table-column> |
|
||||||
<el-table-column label="Author" width="110" align="center"> |
|
||||||
<template slot-scope="scope"> |
|
||||||
<span>{{ scope.row.author }}</span> |
|
||||||
</template> |
|
||||||
</el-table-column> |
|
||||||
<el-table-column label="Pageviews" width="110" align="center"> |
|
||||||
<template slot-scope="scope"> |
|
||||||
{{ scope.row.pageviews }} |
|
||||||
</template> |
|
||||||
</el-table-column> |
|
||||||
<el-table-column class-name="status-col" label="Status" width="110" align="center"> |
|
||||||
<template slot-scope="scope"> |
|
||||||
<el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag> |
|
||||||
</template> |
|
||||||
</el-table-column> |
|
||||||
<el-table-column align="center" prop="created_at" label="Display_time" width="200"> |
|
||||||
<template slot-scope="scope"> |
|
||||||
<i class="el-icon-time" /> |
|
||||||
<span>{{ scope.row.display_time }}</span> |
|
||||||
</template> |
|
||||||
</el-table-column> |
|
||||||
</el-table> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import { getList } from '@/api/table' |
|
||||||
|
|
||||||
export default { |
|
||||||
filters: { |
|
||||||
statusFilter(status) { |
|
||||||
const statusMap = { |
|
||||||
published: 'success', |
|
||||||
draft: 'gray', |
|
||||||
deleted: 'danger' |
|
||||||
} |
|
||||||
return statusMap[status] |
|
||||||
} |
|
||||||
}, |
|
||||||
data() { |
|
||||||
return { |
|
||||||
list: null, |
|
||||||
listLoading: true |
|
||||||
} |
|
||||||
}, |
|
||||||
created() { |
|
||||||
this.fetchData() |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
fetchData() { |
|
||||||
this.listLoading = true |
|
||||||
getList().then(response => { |
|
||||||
this.list = response.data.items |
|
||||||
this.listLoading = false |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
@ -1,78 +0,0 @@ |
|||||||
<template> |
|
||||||
<div class="app-container"> |
|
||||||
<el-input v-model="filterText" placeholder="Filter keyword" style="margin-bottom:30px;" /> |
|
||||||
|
|
||||||
<el-tree |
|
||||||
ref="tree2" |
|
||||||
:data="data2" |
|
||||||
:props="defaultProps" |
|
||||||
:filter-node-method="filterNode" |
|
||||||
class="filter-tree" |
|
||||||
default-expand-all |
|
||||||
/> |
|
||||||
|
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
export default { |
|
||||||
|
|
||||||
data() { |
|
||||||
return { |
|
||||||
filterText: '', |
|
||||||
data2: [{ |
|
||||||
id: 1, |
|
||||||
label: 'Level one 1', |
|
||||||
children: [{ |
|
||||||
id: 4, |
|
||||||
label: 'Level two 1-1', |
|
||||||
children: [{ |
|
||||||
id: 9, |
|
||||||
label: 'Level three 1-1-1' |
|
||||||
}, { |
|
||||||
id: 10, |
|
||||||
label: 'Level three 1-1-2' |
|
||||||
}] |
|
||||||
}] |
|
||||||
}, { |
|
||||||
id: 2, |
|
||||||
label: 'Level one 2', |
|
||||||
children: [{ |
|
||||||
id: 5, |
|
||||||
label: 'Level two 2-1' |
|
||||||
}, { |
|
||||||
id: 6, |
|
||||||
label: 'Level two 2-2' |
|
||||||
}] |
|
||||||
}, { |
|
||||||
id: 3, |
|
||||||
label: 'Level one 3', |
|
||||||
children: [{ |
|
||||||
id: 7, |
|
||||||
label: 'Level two 3-1' |
|
||||||
}, { |
|
||||||
id: 8, |
|
||||||
label: 'Level two 3-2' |
|
||||||
}] |
|
||||||
}], |
|
||||||
defaultProps: { |
|
||||||
children: 'children', |
|
||||||
label: 'label' |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
watch: { |
|
||||||
filterText(val) { |
|
||||||
this.$refs.tree2.filter(val) |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
methods: { |
|
||||||
filterNode(value, data) { |
|
||||||
if (!value) return true |
|
||||||
return data.label.indexOf(value) !== -1 |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
Loading…
Reference in new issue