wen
/
jialuomaadmin
1
0
Fork 0
Code Issues 3 Pull Requests Projects Releases Wiki Activity
Browse Source

修改

master
wen 2 years ago
parent
6259692bd6
commit
02f35ff764
5 changed files with 277 additions and 95 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 9
      src/api/user.js
  2. BIN
      src/common/img/file.png
  3. 19
      src/layout/components/Sidebar/index.vue
  4. 3
      src/utils/request.js
  5. 283
      src/views/subfile/index.vue

9
src/api/user.js
Unescape View File

@ -42,3 +42,12 @@ export function uploadrequest(datas) {
data: datas data: datas
}) })
} }
// 删除目录
export function rmdirs(datas) {
return request({
url: '/api/rmdir',
method: 'post',
data: datas
})
}

BIN
src/common/img/file.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 37 KiB

19
src/layout/components/Sidebar/index.vue
Unescape View File

@ -112,7 +112,6 @@ export default {
let thiss = this; let thiss = this;
//console.log(1); //console.log(1);
// console.log(this.$store); // console.log(this.$store);
mirlist().then(response => { mirlist().then(response => {
let datamain = response.data; let datamain = response.data;
this.routes[1].children = this.SplicingMenuTree(datamain.data.menus); this.routes[1].children = this.SplicingMenuTree(datamain.data.menus);
@ -122,13 +121,19 @@ export default {
//this.$router.push({path: '/filemange/subfile?id='+dirTree.id}); //this.$router.push({path: '/filemange/subfile?id='+dirTree.id});
} }
}).catch(function (error) { }).catch(function (error) {
thiss.$message({ if (error.response) {
showClose: true, if (error.response.status == 401) {
message: error, thiss.$message({showClose: true,message: error.response.data.err,type: 'error'});
type: 'error' thiss.$router.push({path: '/login'});
}); return;
}
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'});
}
}); });
} }
} }

3
src/utils/request.js
Unescape View File

@ -7,7 +7,8 @@ import axios from 'axios'
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
headers: { 'Content-Type': 'multipart/form-data' }, headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
// headers: { 'Content-Type': 'multipart/form-data' },
// headers: { // headers: {
// 'Content-Type': 'application/x-www-form-urlencoded' // 'Content-Type': 'application/x-www-form-urlencoded'
// }, // },

283
src/views/subfile/index.vue
Unescape View File

@ -15,54 +15,117 @@
</div> --> </div> -->
<div> <div>
<!-- 目录数据列表 --> <!-- 目录数据列表 -->
<div class="folder_bottom"> <!-- <div class="folder_bottom">
<!-- <span>目录：</span> -->
<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> <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> -->
<div class="use_button textright"> <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="dirbox = true">创建目录</el-button>
<el-button type="primary" icon="el-icon-edit" @click="rmdirm">删除目录</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" icon="el-icon-edit">重命名</el-button> -->
<el-button type="primary" @click="drawer = true">上传<i class="el-icon-upload el-icon--right"></i></el-button> <el-button type="primary" @click="uploadDrawer = true">上传<i class="el-icon-upload el-icon--right"></i></el-button>
</div> </div>
<!-- 文件数据列表 --> <div v-on:click="fileTableMClick">
<!-- 子目录数据列表 如果不需要显示空数据提示，可以用css隐藏-->
<el-table <el-table
:data="tableData" :data="dirdata"
empty-text="暂无子目录数据"
border border
style="width: 100%"> style="width: 100%" class="filesmd">
<el-table-column <!-- <el-table-column
align="center"
prop="date" prop="date"
label="时间" label="时间"
width="auto"> width="auto">
</el-table-column> -->
<el-table-column
align="center"
prop="name"
label="名称">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
label="图片" align="center"
label="类型"
width="auto"> width="auto">
<template slot-scope="scope"> <template slot-scope="scope">
<img :src="'http://192.168.0.100/'+scope.row.image" alt="图片"/> <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> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
align="center"
label="操作"
width="auto">
<template slot-scope="scope">
<div class="file_caozuo">
<el-button size="mini">重命名</el-button>
<!-- <el-button size="mini">下载</el-button> -->
</div>
<div class="file_caozuo2">
<el-button size="mini">移动</el-button>
<el-button size="mini" mark="dirdelete" :names="scope.row.id" 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" prop="name"
label="名称"> label="名称">
</el-table-column> </el-table-column>
<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="操作"> label="操作">
<div class="file_caozuo vercenter"> <div class="file_caozuo">
<el-button size="mini">重命名</el-button> <el-button size="mini">重命名</el-button>
<el-button size="mini">下载</el-button> <!-- <el-button size="mini">下载</el-button> -->
</div> </div>
<div class="file_caozuo2 vercenter"> <div class="file_caozuo2">
<el-button size="mini">移动</el-button> <el-button size="mini">移动</el-button>
<el-button size="mini" type="danger">删除</el-button> <el-button size="mini" type="danger">删除</el-button>
</div> </div>
</el-table-column> </el-table-column>
</el-table> </el-table>
</div>
</div>
<!-- 创建目录弹框 --> <!-- 创建目录弹框 -->
<el-dialog title="创建目录" :visible.sync="dirbox"> <el-dialog title="创建目录" :visible.sync="dirbox">
<el-form :model="dirform"> <el-form :model="dirform">
@ -80,32 +143,33 @@
<el-button type="primary" @click="mkdirs" :loading="mkdirloadings">确 定</el-button> <el-button type="primary" @click="mkdirs" :loading="mkdirloadings">确 定</el-button>
</div> </div>
</el-dialog> </el-dialog>
</div>
<el-drawer <el-drawer
title="上传图片" title="上传图片"
:visible.sync="drawer" :visible.sync="uploadDrawer"
:direction="direction" :direction="direction"
size="100%" size="100%"
> >
<el-upload <el-upload
action="" action=""
:limit="1" :limit="1"
list-type="picture-card" list-type="picture-card"
:on-remove="handleRemove" :on-remove="handleRemove"
:on-exceed="fileexceed" :on-exceed="fileexceed"
:multiple="false" :multiple="true"
:on-change="filechange" :on-change="filechange"
:on-preview="handlePictureCardPreview" :on-preview="handlePictureCardPreview"
:disabled="false"
accept=".jpg, .jpeg, .png, .gif" accept=".jpg, .jpeg, .png, .gif"
:auto-upload="false"> :auto-upload="false">
<i slot="default" class="el-icon-plus"></i> <i slot="default" class="el-icon-plus"></i>
<span class="addimgtext">添加照片</span> <span class="addimgtext">添加照片</span>
</el-upload> </el-upload>
<div class="request_main"> <div class="request_main">
<el-button type="success" @click="UploadRequest(file)">开始上传<i class="el-icon-upload el-icon--right"></i></el-button> <el-button type="success" :loading="uploadLoad" @click="UploadRequest()">开始上传<i class="el-icon-upload el-icon--right"></i></el-button>
</div> </div>
<div class="el-upload__tip">只能上传.jpg, .jpeg, .png, .gif文件，且不超过500kb</div> <div class="el-upload__tip">只能上传.jpg, .jpeg, .png, .gif文件，且不超过5MB</div>
<el-dialog :visible.sync="dialogVisible"> <el-dialog :modal="false" :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="图片"> <img width="100%" :src="dialogImageUrl" alt="图片">
</el-dialog> </el-dialog>
</el-drawer> </el-drawer>
@ -115,7 +179,7 @@
<script> <script>
import EventBus from '@/utils/EventBus.js' import EventBus from '@/utils/EventBus.js'
import { mirlist, mkdir, uploadrequest} from '@/api/user' import { mirlist, mkdir, uploadrequest, rmdirs} from '@/api/user'
import defaultSettings from '@/settings.js' import defaultSettings from '@/settings.js'
export default { export default {
@ -189,18 +253,25 @@ export default {
mkdirloadings: false, mkdirloadings: false,
// 图片上传弹出框数据 // 图片上传弹出框数据
drawer: false, uploadDrawer: false,
direction: 'ttb', direction: 'ttb',
// 图片上传相关数据 // 图片上传相关数据
dialogImageUrl: '', dialogImageUrl: '',
dialogVisible: false, dialogVisible: false,
disabled: false disabled: false,
imgUploadData: {
name: '',
file: '',
parent: ''
},
uploadLoad: false
}; };
}, },
methods: { methods: {
// 图片上传相关函数 // 图片上传相关函数
handleRemove(file, fileList) { handleRemove(file, fileList) {
console.log(fileList);
//this.$refs.upload.clearFiles; //this.$refs.upload.clearFiles;
}, },
handlePictureCardPreview(file) { handlePictureCardPreview(file) {
@ -215,30 +286,92 @@ export default {
}, },
// 超出上传文件个数限制处理函数 // 超出上传文件个数限制处理函数
fileexceed(files, fileList) { fileexceed(files, fileList) {
this.$message({showClose:true, message:'一次只能上传一个文件', type:'warning'}); //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) { filechange(files, fileList) {
console.log(files); //console.log(files);
console.log(fileList); 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)
})
}, },
UploadRequest(file) { // 获取图片base64
getBase64(file) {
let thiss = this; let thiss = this;
console.log(file); return new Promise(function(resolve, reject) {
uploadrequest().then(response => {
let datamain = response.data; 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'});
}
}).catch(function (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) { if (error.response) {
thiss.$message({showClose: true,message: error.response.data.err,type: 'error'}); thiss.$message({showClose: true,message: error.response.data.err,type: 'error'});
this.uploadLoad = false;
} else if (error.request) { } else if (error.request) {
thiss.$message({showClose: true,message: error.response.data.err,type: 'error'}); thiss.$message({showClose: true,message: error.response.data.err,type: 'error'});
} else { } else {
thiss.$message({showClose: true,message: error.response.data.err,type: 'error'}); thiss.$message({showClose: true,message: error.response.data.err,type: 'error'});
} }
}); });
}, },
getFileData() { getFileData() {
@ -259,7 +392,7 @@ export default {
this.dirdata = [] this.dirdata = []
this.tableData = [] this.tableData = []
if (maindata.directories) { if (maindata.directories) {
this.dirdata = maindata.directories; this.dirdata = this.forObjectData(maindata.directories);
} }
if (maindata.files) { if (maindata.files) {
@ -270,13 +403,16 @@ export default {
this.dirform.parent = maindata.realpath; this.dirform.parent = maindata.realpath;
this.subloading = false; this.subloading = false;
this.imgUploadData.parent = maindata.realpath;
}
}).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'});
} }
}).catch(function (error) {
thiss.$message({
showClose: true,
message: error,
type: 'error'
});
}); });
}, },
@ -288,7 +424,8 @@ export default {
newObject = { newObject = {
date: '2016-05-03', date: '2016-05-03',
image: objectd[item].path, image: objectd[item].path,
name: objectd[item].filename name: objectd[item].filename || objectd[item].directory,
id: objectd[item].id
} }
arrObjs.push(newObject); arrObjs.push(newObject);
@ -300,32 +437,44 @@ export default {
// 创建目录 // 创建目录
mkdirs() { mkdirs() {
let thiss = this;
if (!this.dirform.dir) {
thiss.$message({showClose: true,message: '目录名不能为空',type: 'error'});
return;
}
this.mkdirloadings = true; this.mkdirloadings = true;
EventBus.$emit('mkdirSuccess');
mkdir(this.dirform).then(response => { mkdir(this.dirform).then(response => {
let datamain = response.data; let datamain = response.data;
let maindata = datamain.data.dirTree;
if (datamain.code == 1) { if (datamain.code == 1) {
EventBus.$emit('mkdirSuccess'); //触发菜单栏刷新
this.getFileData();
this.dirform.dir = '';
thiss.$message({showClose: true,message: '创建成功',type: ''});
//this.subloading = false; //this.subloading = false;
} }
this.mkdirloadings = false; this.mkdirloadings = false;
this.dirbox = false; this.dirbox = false;
}).catch(function (error) { }).catch(error => {
thiss.$message({ if (error.response) {
showClose: true, thiss.mkdirloadings = false;
message: error, thiss.$message({showClose: true,message: error.response.data.err,type: 'error'});
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() { rmdirm() {
let thiss = this;
this.rmdirloadings = true; this.rmdirloadings = true;
mkdir(this.dirform).then(response => { this.dirform.dir = 'test';
rmdirs(this.dirform).then(response => {
let datamain = response.data; let datamain = response.data;
let maindata = datamain.data.dirTree; let maindata = datamain.data.dirTree;
if (datamain.code == 1) { if (datamain.code == 1) {
@ -335,13 +484,30 @@ export default {
} }
this.dirbox = false; this.dirbox = false;
}).catch(function (error) { }).catch(error => {
thiss.$message({ if (error.response) {
showClose: true, thiss.$message({showClose: true,message: error.response.data.err,type: 'error'});
message: error, } else if (error.request) {
type: 'error' thiss.$message({showClose: true,message: error.response.data.err,type: 'error'});
}); } else {
thiss.$message({showClose: true,message: error.response.data.err,type: 'error'});
}
}); });
},
fileTableMClick(e) {
let dangQian = e.target, labelname = dangQian.tagName.toLowerCase(), chufazhe = e.currentTarget; //currentTarget得到调用当前函数的元素
let objmark = dangQian.getAttribute('mark');
if (labelname == 'span') {
//console.log(dangQian.parentNode);
objmark = dangQian.parentNode.getAttribute('mark');
}
// 点击删除
if (objmark == 'dirdelete') {
this.rmdirm();
}
//console.log(dangQian);
} }
} }
} }
@ -354,7 +520,7 @@ export default {
.sou_bottom{margin-left:10px;} .sou_bottom{margin-left:10px;}
.use_button{margin:15px 0 16px 0;} .use_button{margin:15px 0 16px 0;}
// .use_button>button{margin:0 10px 10px 0;} // .use_button>button{margin:0 10px 10px 0;}
.file_caozuo2{margin:6px 0 0 0;} .file_caozuo2>button{margin-top:6px;}
.el-table td{padding:9px 0} .el-table td{padding:9px 0}
.folder_bottom a{margin:0 6px;} .folder_bottom a{margin:0 6px;}
.el-table__body-wrapper img{width:100px;height:71px;} .el-table__body-wrapper img{width:100px;height:71px;}
@ -362,5 +528,6 @@ export default {
.request_main{text-align:center;margin:12px 0;} .request_main{text-align:center;margin:12px 0;}
.addimgtext{line-height:25px;display:inline-block;color:#8c939d;vertical-align: middle;} .addimgtext{line-height:25px;display:inline-block;color:#8c939d;vertical-align: middle;}
.el-upload--picture-card i{vertical-align:middle;} .el-upload--picture-card i{vertical-align:middle;}
.type_file_click img{width:64px;height:48px;}
} }
</style> </style>

Write Preview
Loading…
Cancel
Save