wen
2 years ago
49 changed files with 2216 additions and 659 deletions
@ -0,0 +1,33 @@
@@ -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 @@
@@ -1,24 +1,89 @@
|
||||
import request from '@/utils/request' |
||||
|
||||
export function login(data) { |
||||
export function captcha(datas) { |
||||
return request({ |
||||
url: '/vue-admin-template/user/login', |
||||
url: '/api/captcha', |
||||
method: 'post', |
||||
data |
||||
data: datas |
||||
}) |
||||
} |
||||
|
||||
export function getInfo(token) { |
||||
export function login(datas) { |
||||
return request({ |
||||
url: '/vue-admin-template/user/info', |
||||
method: 'get', |
||||
params: { token } |
||||
url: '/api/login', |
||||
method: 'post', |
||||
data: datas |
||||
}) |
||||
} |
||||
|
||||
// 获取目录和文件数据
|
||||
export function mirlist(datas) { |
||||
return request({ |
||||
url: '/api/ls', |
||||
method: 'post', |
||||
data: datas |
||||
}) |
||||
} |
||||
|
||||
export function logout() { |
||||
// 创建目录
|
||||
export function mkdir(datas) { |
||||
return request({ |
||||
url: '/vue-admin-template/user/logout', |
||||
method: 'post' |
||||
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 @@
@@ -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 @@
@@ -0,0 +1,5 @@
|
||||
let peizhi = { |
||||
dizhi: 'http://192.168.0.100' |
||||
} |
||||
|
||||
export default peizhi |
||||
@ -0,0 +1,49 @@
@@ -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 @@
@@ -0,0 +1,5 @@
|
||||
import Vue from 'vue' // 引入vue
|
||||
|
||||
const EventBus = new Vue() // 创建实例
|
||||
|
||||
export default EventBus // 导出
|
||||
@ -1,85 +1,91 @@
@@ -1,85 +1,91 @@
|
||||
import axios from 'axios' |
||||
import { MessageBox, Message } from 'element-ui' |
||||
import store from '@/store' |
||||
import { getToken } from '@/utils/auth' |
||||
//import { MessageBox, Message } from 'element-ui'
|
||||
//import store from '@/store'
|
||||
//import { getToken } from '@/utils/auth'
|
||||
|
||||
// create an axios instance
|
||||
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
|
||||
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
|
||||
service.interceptors.request.use( |
||||
config => { |
||||
// do something before request is sent
|
||||
// service.interceptors.request.use(
|
||||
// config => {
|
||||
// // do something before request is sent
|
||||
|
||||
if (store.getters.token) { |
||||
// let each request carry token
|
||||
// ['X-Token'] is a custom headers key
|
||||
// please modify it according to the actual situation
|
||||
config.headers['X-Token'] = getToken() |
||||
} |
||||
return config |
||||
}, |
||||
error => { |
||||
// do something with request error
|
||||
console.log(error) // for debug
|
||||
return Promise.reject(error) |
||||
} |
||||
) |
||||
// if (store.getters.token) {
|
||||
// // let each request carry token
|
||||
// // ['X-Token'] is a custom headers key
|
||||
// // please modify it according to the actual situation
|
||||
// config.headers['X-Token'] = getToken()
|
||||
// }
|
||||
// return config
|
||||
// },
|
||||
// error => {
|
||||
// // do something with request error
|
||||
// console.log(error) // for debug
|
||||
// return Promise.reject(error)
|
||||
// }
|
||||
// )
|
||||
|
||||
// response interceptor
|
||||
service.interceptors.response.use( |
||||
/** |
||||
* If you want to get http information such as headers or status |
||||
* Please return response => response |
||||
*/ |
||||
// // response interceptor
|
||||
// service.interceptors.response.use(
|
||||
// /**
|
||||
// * If you want to get http information such as headers or status
|
||||
// * Please return response => response
|
||||
// */
|
||||
|
||||
/** |
||||
* Determine the request status by custom code |
||||
* Here is just an example |
||||
* You can also judge the status by HTTP Status Code |
||||
*/ |
||||
response => { |
||||
const res = response.data |
||||
// /**
|
||||
// * Determine the request status by custom code
|
||||
// * Here is just an example
|
||||
// * You can also judge the status by HTTP Status Code
|
||||
// */
|
||||
// response => {
|
||||
// const res = response.data
|
||||
|
||||
// if the custom code is not 20000, it is judged as an error.
|
||||
if (res.code !== 20000) { |
||||
Message({ |
||||
message: res.message || 'Error', |
||||
type: 'error', |
||||
duration: 5 * 1000 |
||||
}) |
||||
// // if the custom code is not 20000, it is judged as an error.
|
||||
// if (res.code !== 20000) {
|
||||
// Message({
|
||||
// message: res.message || 'Error',
|
||||
// type: 'error',
|
||||
// duration: 5 * 1000
|
||||
// })
|
||||
|
||||
// 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
|
||||
if (res.code === 50008 || res.code === 50012 || res.code === 50014) { |
||||
// to re-login
|
||||
MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', { |
||||
confirmButtonText: 'Re-Login', |
||||
cancelButtonText: 'Cancel', |
||||
type: 'warning' |
||||
}).then(() => { |
||||
store.dispatch('user/resetToken').then(() => { |
||||
location.reload() |
||||
}) |
||||
}) |
||||
} |
||||
return Promise.reject(new Error(res.message || 'Error')) |
||||
} else { |
||||
return res |
||||
} |
||||
}, |
||||
error => { |
||||
console.log('err' + error) // for debug
|
||||
Message({ |
||||
message: error.message, |
||||
type: 'error', |
||||
duration: 5 * 1000 |
||||
}) |
||||
return Promise.reject(error) |
||||
} |
||||
) |
||||
// // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
|
||||
// if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
|
||||
// // to re-login
|
||||
// MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
|
||||
// confirmButtonText: 'Re-Login',
|
||||
// cancelButtonText: 'Cancel',
|
||||
// type: 'warning'
|
||||
// }).then(() => {
|
||||
// store.dispatch('user/resetToken').then(() => {
|
||||
// location.reload()
|
||||
// })
|
||||
// })
|
||||
// }
|
||||
// return Promise.reject(new Error(res.message || 'Error'))
|
||||
// } else {
|
||||
// return res
|
||||
// }
|
||||
// },
|
||||
// error => {
|
||||
// console.log('err' + error) // for debug
|
||||
// Message({
|
||||
// message: error.message,
|
||||
// type: 'error',
|
||||
// duration: 5 * 1000
|
||||
// })
|
||||
// return Promise.reject(error)
|
||||
// }
|
||||
// )
|
||||
|
||||
export default service |
||||
|
||||
@ -1,28 +0,0 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -1,5 +0,0 @@
|
||||
<template> |
||||
<div style="padding:30px;"> |
||||
<el-alert :closable="false" title="menu 2" /> |
||||
</div> |
||||
</template> |
||||
@ -0,0 +1,517 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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