- 下载
- 删除
- 重命名
+ 下载
+ 删除
+ 重命名
+ 全选
+
![]()
选择
+ 选择
@@ -133,10 +136,13 @@
max: 40,
paneLengthPercent: 26,
triggerLength: 10,
+ isShift: false,
+ ssss:[],
loading: false,
+ isBatchSelect: false,
- editingImageIndex: null,
+ selectImageIndex: [],
treeData: [{name: '图片空间', path: '/', children: @json($folders)}],
@@ -145,6 +151,7 @@
label: 'name',
isLeaf: 'leaf'
},
+ selectIdxs: [],
uploadFileDialog: {
show: false,
@@ -168,7 +175,20 @@
},
// 侦听器
watch: {
+ images: {
+ handler(val) {
+ if (this.isBatchSelect) return;
+ // 将选中的图片索引放入 selectImageIndex，未选中则清空
+ this.selectImageIndex = val.filter(item => item.selected).map(e => this.images.indexOf(e));
+ },
+ deep: true
+ },
+ selectImageIndex(indexs) {
+ this.images.forEach((item, index) => {
+ item.selected = indexs.includes(index);
+ });
+ },
},
// 组件方法
methods: {
@@ -181,6 +201,10 @@
this.loadData(e, node)
},
+ updateSelectStatus(status) {
+ this.isBatchSelect = status
+ },
+
pageCurrentChange(e) {
this.image_page = e
this.loadData()
@@ -298,13 +322,32 @@
},
checkedImage(index) {
- this.editingImageIndex = index;
- this.images.map(e => !e.index ? e.selected = false : '')
+ // 获取当前选中的 index
+ const selectedIndex = this.images.findIndex(e => e.selected);
+
+ if (this.isShift) {
+ // 获取 selectedIndex 与 index 之间的所有图片
+ let selectedImages = this.images.slice(Math.min(selectedIndex, index), Math.max(selectedIndex, index) + 1);
+ selectedImages.map(e => e.selected = true)
+ return;
+ }
+
+ if (this.isCtrl) {
+ this.images[index].selected = !this.images[index].selected;
+ return;
+ }
+
+ if (this.selectImageIndex.length > 1) {
+ this.images.map((e,i) => i != index ? e.selected = false : e.selected = true)
+ return;
+ }
+
+ this.images.map((e,i) => i != index ? e.selected = false : '')
this.images[index].selected = !this.images[index].selected
},
fileChecked() {
- let typedFiles = this.images[this.editingImageIndex];
+ let typedFiles = this.images.filter(e => e.selected)
if (callback !== null) {
callback(typedFiles);
@@ -319,7 +362,10 @@
this.$confirm('是否要删除选中文件', '提示', {
type: 'warning'
}).then(() => {
- this.images.splice(this.editingImageIndex, 1);
+ // 删除选中的文件
+ console.log(this.selectImageIndex);
+
+ // this.images.splice(this.selectImageIndex, 1);
this.$message({type: 'success',message: '删除成功!'});
}).catch(_=>{});
},
@@ -340,13 +386,34 @@
}
},
+ selectAll() {
+ // 获取 this.images 中的 selected 是否全部为 true
+ const isAllSelected = this.images.every(e => e.selected);
+ this.images.map(e => e.selected = !isAllSelected)
+ },
+
+ downloadImages() {
+ // 获取选中的图片
+ const selectedImages = this.images.filter(e => e.selected);
+ // 创建 a 标签
+ selectedImages.forEach(e => {
+ const a = document.createElement('a');
+ // 设置 a 标签的 href 属性
+ a.href = e.origin_url;
+ // 设置 a 标签的 download 属性
+ a.download = e.name;
+ // 触发 a 标签的 click 事件
+ a.click();
+ });
+ },
+
openInputBox(type, node, data) {
this.$prompt('', type == 'addFolder' ? '新建文件夹' : '重命名', {
confirmButtonText: '确定',
cancelButtonText: '取消',
inputPattern: /^.+$/,
closeOnClickModal: false,
- inputValue: type == 'image' ? this.images[this.editingImageIndex].name : (type == 'renameFolder' ? data.name : '新建文件夹'),
+ inputValue: type == 'image' ? this.images[this.selectImageIndex].name : (type == 'renameFolder' ? data.name : '新建文件夹'),
inputErrorMessage: '不能为空'
}).then(({ value }) => {
@@ -396,10 +463,7 @@
}
}
},
- // 在实例初始化之后，组件属性计算之前，如data属性等
- beforeCreate () {
- },
- // 在实例创建完成后被立即同步调用
+
created () {
const defaultkeyarr = sessionStorage.getItem('defaultkeyarr');
@@ -407,22 +471,31 @@
// this.defaultkeyarr = defaultkeyarr.split(',');
}
},
- // 在挂载开始之前被调用:相关的 render 函数首次被调用
- beforeMount () {
- },
// 实例被挂载后调用
mounted () {
+ // 获取键盘事件 是否按住 shift/ctrl 键 兼容 mac 和 windows
+ document.addEventListener('keydown', (e) => {
+ this.isShift = e.shiftKey;
+ this.isCtrl = e.ctrlKey || e.metaKey;
+ })
+
+ // 获取键盘事件 是否松开 shift/ctrl 键
+ document.addEventListener('keyup', (e) => {
+ this.isShift = e.shiftKey;
+ this.isCtrl = e.ctrlKey || e.metaKey;
+ })
+
+ // 判断鼠标是否点击 .image-list 元素
+ document.addEventListener('click', (e) => {
+ if (this.isBatchSelect) return;
+ const targets = ['filemanager-navbar', 'content-center']
+ if (targets.indexOf(e.target.className) > -1) {
+ this.selectImageIndex = [];
+ this.images.map(e => e.selected = false)
+ }
+ })
},
})
-
- $(document).ready(function() {
- $(document).on('click', function (e) {
- if ($(e.target).closest('.content-center .image-list, .content-head, .content-footer, .el-message-box').length === 0) {
- app.editingImageIndex = null;
- app.images.map(e => e.selected = false)
- }
- })
- });
diff --git a/resources/js/http.js b/resources/js/http.js
index bbeb647a..f489b1d2 100644
--- a/resources/js/http.js
+++ b/resources/js/http.js
@@ -1,14 +1,16 @@
window.axios = require('axios');
+const token = document.querySelector('meta[name="csrf-token"]').content;
+const base = document.querySelector('base').href;
+
const instance = axios.create({
- headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
+ headers: {'X-CSRF-TOKEN': token},
});
axios.defaults.timeout = 5000; // 请求超时
// axios.defaults.baseURL = process.env.NODE_ENV == 'production' ? process.env.VUE_APP_BASE_URL + '/' : '/';
// console.log(process.env.VUE_APP_BASE_URL)
-console.log($('base').attr('href'))
-axios.defaults.baseURL = $('base').attr('href');
+axios.defaults.baseURL = base;
export default {
/**
* get 请求
@@ -81,7 +84,7 @@
:total="image_total">
-