This commit is contained in:
pushuo 2022-07-14 20:48:28 +08:00
parent ded3518819
commit d219388aca
13 changed files with 166 additions and 100 deletions

View File

@ -232,6 +232,11 @@ body.page-design .pb-images-selector .pb-images-list .el-input-group__prepend {
color: #fff;
border-color: #404e72;
}
.file-manager-box .layui-layer-ico {
background: url("/image/close.png") no-repeat;
background-size: cover;
background-position: center center;
}
.link-selector-wrap > .title {
margin-bottom: 6px;

View File

@ -27,6 +27,7 @@ body.page-filemanager .filemanager-wrap .filemanager-navbar .el-tree .el-tree-no
body.page-filemanager .filemanager-wrap .filemanager-navbar .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
background-color: #434d66;
color: #fff;
border-left: 2px solid #409EFF;
}
body.page-filemanager .filemanager-wrap .filemanager-navbar .tree-wrap .el-tree-node__content {
height: 36px;
@ -38,18 +39,18 @@ body.page-filemanager .filemanager-wrap .filemanager-navbar .tree-wrap .custom-t
justify-content: space-between;
}
body.page-filemanager .filemanager-wrap .filemanager-navbar .tree-wrap .custom-tree-node .right span {
margin-right: 8px;
margin-right: 6px;
}
body.page-filemanager .filemanager-wrap .filemanager-navbar .tree-wrap .custom-tree-node .right span:hover {
color: #0b68ff;
color: #409EFF;
}
body.page-filemanager .filemanager-wrap .filemanager-divider {
top: 0;
width: 3px;
width: 4px;
cursor: col-resize;
}
body.page-filemanager .filemanager-wrap .filemanager-divider:hover {
background: #0b68ff;
background: #409EFF;
}
body.page-filemanager .filemanager-wrap .filemanager-content {
flex: 1;
@ -65,53 +66,49 @@ body.page-filemanager .filemanager-wrap .filemanager-content .content-head {
align-items: center;
justify-content: space-between;
padding: 0 16px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}
body.page-filemanager .filemanager-wrap .filemanager-content .content-head .left a {
margin-right: 30px;
margin-right: 36px;
}
body.page-filemanager .filemanager-wrap .filemanager-content .content-head .left a:not(.is-disabled) {
color: #17191c;
}
body.page-filemanager .filemanager-wrap .filemanager-content .content-head .left a.is-disabled i {
color: #71a7ff;
color: #a6d2ff;
}
body.page-filemanager .filemanager-wrap .filemanager-content .content-head .left a i {
color: #0b68ff;
color: #409EFF;
font-weight: 600;
}
body.page-filemanager .filemanager-wrap .filemanager-content .content-center {
height: calc(100% - 56px);
display: flex;
align-items: flex-start;
flex-wrap: wrap;
background: #f7f9fc;
padding: 20px 10px;
padding: 16px 6px;
overflow-y: auto;
align-content: flex-start;
}
body.page-filemanager .filemanager-wrap .filemanager-content .content-center::-webkit-scrollbar {
width: 8px;
width: 4px;
height: 1px;
}
body.page-filemanager .filemanager-wrap .filemanager-content .content-center::-webkit-scrollbar-thumb {
border-radius: 2px;
background: #0b68ff;
background: #409EFF;
}
body.page-filemanager .filemanager-wrap .filemanager-content .content-center::-webkit-scrollbar-track {
background: transparent;
}
body.page-filemanager .filemanager-wrap .filemanager-content .content-center .image-list {
width: calc(20% - 20px);
display: flex;
flex-direction: column;
display: inline-block;
background: #fff;
margin: 0 10px 20px;
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1);
margin: 0 8px 16px;
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.07);
cursor: pointer;
}
body.page-filemanager .filemanager-wrap .filemanager-content .content-center .image-list .img {
height: 140px;
width: 137px;
height: 137px;
display: flex;
align-items: center;
justify-content: center;
@ -121,12 +118,13 @@ body.page-filemanager .filemanager-wrap .filemanager-content .content-center .im
max-height: 100%;
}
body.page-filemanager .filemanager-wrap .filemanager-content .content-center .image-list.active {
outline: 1px solid #0b68ff;
outline: 1px solid #409EFF;
}
body.page-filemanager .filemanager-wrap .filemanager-content .content-center .image-list .text {
border-top: 1px solid #eee;
font-size: 12px;
padding: 10px;
width: 137px;
padding: 6px 8px;
display: flex;
align-items: center;
justify-content: space-between;
@ -137,7 +135,7 @@ body.page-filemanager .filemanager-wrap .filemanager-content .content-center .im
white-space: nowrap;
}
body.page-filemanager .filemanager-wrap .filemanager-content .content-center .image-list .text .el-icon-check {
color: #0b68ff;
color: #409EFF;
font-size: 18px;
font-weight: 600;
}
@ -146,7 +144,7 @@ body.page-filemanager .filemanager-wrap .filemanager-content .content-footer {
padding: 0 16px;
background-color: #fff;
display: flex;
box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.04);
align-items: center;
justify-content: space-between;
}
@ -154,20 +152,30 @@ body.page-filemanager .upload-wrap .el-dialog__body {
padding-top: 10px;
}
body.page-filemanager .upload-wrap .upload-image {
height: 300px;
height: 200px;
overflow-y: auto;
}
body.page-filemanager .upload-wrap .upload-image .list {
background-color: #f4f4f4;
padding: 4px 10px;
background-color: #f2f2f2;
padding: 6px 10px;
border-radius: 4px;
margin-bottom: 8px;
font-size: 12px;
}
body.page-filemanager .upload-wrap .upload-image .list .info {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
margin-bottom: 6px;
}
body.page-filemanager .upload-wrap .upload-image .list .name {
color: #111111;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body.page-filemanager .upload-wrap .upload-image .list .status {
white-space: nowrap;
}
body.page-filemanager .upload-wrap .el-progress-bar__outer {
background-color: #ccc;

BIN
public/image/close.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

Binary file not shown.

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -272,6 +272,12 @@ body.page-design {
color: #fff;
border-color: #404e72;
}
.layui-layer-ico {
background: url('/image/close.png') no-repeat;
background-size: cover;
background-position: center center;
}
}
.link-selector-wrap {

View File

@ -1,6 +1,7 @@
@charset "UTF-8";
$primary: #0b68ff;
// $primary: #0b68ff;
$primary: #409EFF;
[v-cloak] {
display: none;
@ -33,9 +34,14 @@ body.page-filemanager {
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
background-color: #434d66;
color: #fff;
border-left: 2px solid $primary;
}
.tree-wrap {
.is-current {
}
.el-tree-node__content {
height: 36px;
}
@ -48,7 +54,8 @@ body.page-filemanager {
.right {
span {
margin-right: 8px;
margin-right: 6px;
&:hover {
color: $primary;
}
@ -60,7 +67,7 @@ body.page-filemanager {
.filemanager-divider {
top: 0;
width: 3px;
width: 4px;
cursor: col-resize;
&:hover {
@ -85,11 +92,11 @@ body.page-filemanager {
justify-content: space-between; // flex-end | center | space-between
// flex-wrap: wrap;
padding: 0 16px;
box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
box-shadow: 0 2px 4px rgba(0, 0, 0, .04);
.left {
a {
margin-right: 30px;
margin-right: 36px;
&:not(.is-disabled) {
color: #17191c;
@ -112,12 +119,12 @@ body.page-filemanager {
.content-center {
height: calc(100% - 56px);
display: flex;
align-items: flex-start;
flex-wrap: wrap;
// display: flex;
// align-items: flex-start;
// flex-wrap: wrap;
// align-items: center; // flex-start | center
background: #f7f9fc;
padding: 20px 10px;
padding: 16px 6px;
// justify-content: space-between; // flex-end | center | space-between
// flex-wrap: wrap;
// margin-right: -20px;
@ -125,7 +132,7 @@ body.page-filemanager {
align-content: flex-start;
&::-webkit-scrollbar {
width: 8px;
width: 4px;
height: 1px;
}
&::-webkit-scrollbar-thumb {
@ -137,20 +144,34 @@ body.page-filemanager {
}
.image-list {
width: calc(20% - 20px);
display: flex;
flex-direction: column;
// display: flex;
// flex-direction: column;
display: inline-block;
// align-items: center;
// margin-bottom: 20px;
background: #fff;
margin: 0 10px 20px;
box-shadow: 0 0 2px 1px rgba(0, 0, 0, .1);
margin: 0 8px 16px;
box-shadow: 0 0 2px 1px rgba(0, 0, 0, .07);
cursor: pointer;
// width: calc(20% - 20px);
// @media (min-width: 600px) {
// width: calc(25% - 20px);
// }
// @media (min-width: 1000px) {
// width: calc(20% - 20px);
// }
// @media (min-width: 1300px) {
// width: calc(16.666% - 20px);
// }
// border: 1px solid transparent;
.img {
// width: 100px;
height: 140px;
width: 137px;
height: 137px;
display: flex;
align-items: center; // flex-start | center
justify-content: center; // flex-end | center | space-between
@ -168,7 +189,8 @@ body.page-filemanager {
.text {
border-top: 1px solid #eee;
font-size: 12px;
padding: 10px;
width: 137px;
padding: 6px 8px;
display: flex;
align-items: center; // flex-start | center
justify-content: space-between;
@ -193,7 +215,7 @@ body.page-filemanager {
padding: 0 16px;
background-color: #fff;
display: flex;
box-shadow: 0 -2px 4px rgba(0, 0, 0, .1);
box-shadow: 0 -2px 4px rgba(0, 0, 0, .04);
align-items: center; // flex-start | center
justify-content: space-between;
}
@ -206,20 +228,33 @@ body.page-filemanager {
}
.upload-image {
height: 300px;
height: 200px;
overflow-y: auto;
.list {
background-color: #f4f4f4;
padding: 4px 10px;
background-color: #f2f2f2;
padding: 6px 10px;
border-radius: 4px;
display: flex;
align-items: center; // flex-start | center
justify-content: space-between; // flex-end | center | space-between
margin-bottom: 8px;
font-size: 12px;
.info {
display: flex;
align-items: center; // flex-start | center
justify-content: space-between; // flex-end | center | space-between
margin-bottom: 6px;
}
.name {
color: #111111;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.status {
white-space: nowrap;
}
}
}

View File

@ -103,8 +103,8 @@
shadeClose: false,
skin: 'file-manager-box',
scrollbar: false,
shade: 0.8,
area: ['80%', '80%'],
shade: 0.4,
area: ['1060px', '680px'],
content: '/{{ admin_name() }}/file_manager',
success: function(layerInstance, index) {
var iframeWindow = window[layerInstance.find("iframe")[0]["name"]];
@ -184,8 +184,17 @@
border: 1px solid #eee;
padding: 2px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.image-slot {
font-size: 26px;
color: #939ab3;
}
.pb-image-selector .i18n-inner .img img {
max-width: 100%;
height: auto;

View File

@ -309,10 +309,10 @@
switch(this.link.type) {
case 'product':
url = 'products/autocomplete?name=';
url = `products/${this.link.value}/name`;
break;
case 'category':
url = 'categories/autocomplete?name=';
url = `categories/${this.link.value}/autocomplete`;
break;
case 'manufacturer':
url = '';
@ -321,20 +321,17 @@
null;
}
$.ajax({
url: url,
data: {id: this.link.value},
type: 'post',
dataType: 'json',
complete: function() { self.nameLoading = false; },
success: function (json) {
if (json) {
self.name = json;
} else {
self.name = '数据不存在或已被删除';
}
// beforeSend: function() { self.loading = true;; },
// complete: function() { self.loading = false; },
// this.loading = true;
$http.get(url, null, {hload: true}).then((res) => {
if (res.data) {
self.name = res.data;
} else {
self.name = '数据不存在或已被删除';
}
});
}).finally(() => {this.nameLoading = false});
},
}
});

View File

@ -4,11 +4,12 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<script src="{{ asset('vendor/vue/2.6.12/vue.js') }}"></script>
<script src="{{ asset('vendor/element-ui/2.6.2/js.js') }}"></script>
<script src="{{ asset('vendor/element-ui/2.15.9/index.js') }}"></script>
{{-- <script src="{{ asset('vendor/element-ui/2.15.6/js.js') }}"></script> --}}
<script src="{{ asset('vendor/jquery/jquery-3.6.0.min.js') }}"></script>
<script src="{{ asset('vendor/layer/3.5.1/layer.js') }}"></script>
<link href="{{ mix('/build/beike/admin/css/bootstrap.css') }}" rel="stylesheet">
<link rel="stylesheet" href="{{ asset('vendor/element-ui/2.6.2/css.css') }}">
<link rel="stylesheet" href="{{ asset('vendor/element-ui/2.15.9/index.css') }}">
<link href="{{ mix('build/beike/admin/css/filemanager.css') }}" rel="stylesheet">
<script src="{{ mix('build/beike/admin/js/app.js') }}"></script>
<meta name="csrf-token" content="{{ csrf_token() }}">
@ -21,17 +22,14 @@
:props="defaultProps"
node-key="path"
:data="treeData"
{{-- :load="loadNod1e" --}}
{{-- lazy --}}
:current-node-key="folderCurrent"
:default-expanded-keys="defaultkeyarr"
:expand-on-click-node="false"
highlight-current
ref="tree"
@node-click="handleNodeClick"
{{-- @node-expand="nodeExpand" --}}
@node-expand="(node) => {updateDefaultExpandedKeys(node, 'expand')}"
@node-collapse="(node) => {updateDefaultExpandedKeys(node, 'collapse')}"
{{-- @node-collapse="nodeCollapse" --}}
class="tree-wrap">
<div class="custom-tree-node" slot-scope="{ node, data }">
<div>@{{ node.label }}</div>
@ -89,8 +87,10 @@
<el-dialog
title="上传文件"
top="12vh"
:visible.sync="uploadFileDialog.show"
width="500px"
@close="uploadFileDialogClose"
custom-class="upload-wrap">
<el-upload
class="photos-upload"
@ -112,8 +112,11 @@
</el-upload>
<div class="upload-image">
<div v-for="image, index in uploadFileDialog.images" :key="index" class="list">
<div class="name">@{{ image.name }}</div>
<div class="status">上传中</div>
<div class="info">
<div class="name">@{{ index + 1 }}. @{{ image.name }}</div>
<div class="status">@{{ image.status == 'complete' ? '完成' : '上传中' }}</div>
</div>
<el-progress :percentage="image.progre" :show-text="false" :stroke-width="4"></el-progress>
</div>
</div>
</el-dialog>
@ -128,7 +131,7 @@
data: {
min: 10,
max: 40,
paneLengthPercent: 20,
paneLengthPercent: 26,
triggerLength: 10,
loading: false,
@ -145,7 +148,7 @@
uploadFileDialog: {
show: false,
images: [{name:'dasdas.png', percent: 90}]
images: []
},
folderCurrent: '/',
@ -183,6 +186,11 @@
this.loadData()
},
uploadFileDialogClose() {
this.uploadFileDialog.images = [];
$('.content-center').animate({ scrollTop: 1000} , 'fast');
},
openUploadFile() {
this.uploadFileDialog.show = true
},
@ -207,14 +215,25 @@
return;
}
var formData = new FormData();
formData.append("file", file.file, file.file.name);
newFile = {
index: this.images.length,
percent: 0,
// index: this.images.length,
name: file.file.name,
progre: 0,
status: 'padding'
};
this.uploadFileDialog.push(newFile);
this.uploadFileDialog.images.push(newFile);
console.log(file.file)
let index = this.uploadFileDialog.images.length - 1;
$http.post('file_manager/upload', formData).then((res) => {
this.uploadFileDialog.images[index].status = 'complete';
this.uploadFileDialog.images[index].progre = 100;
index += 1;
})
},
handleUploadChange() {
@ -248,19 +267,6 @@
})
},
loadNode(node, resolve) {
let treeData = [{name: '图片空间', path: '/'}]
if (node.level === 0) {
return resolve(treeData);
}
if (node.level === 1) return resolve(@json($folders));
$http.get(`file_manager?base_folder=${node.data.path}`).then((res) => {
resolve(res.folders);
})
},
// 按下滑动器
handleMouseDown(e) {
document.addEventListener('mousemove', this.handleMouseMove)
@ -411,7 +417,7 @@
$(document).ready(function() {
$(document).on('click', function (e) {
if ($(e.target).closest('.content-center .image-list, .content-head, .content-footer').length === 0) {
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)
}

View File

@ -11,5 +11,3 @@
<img src="{{ asset('image/default/banner.png') }}" class="img-fluid">
</div>
</section>
@dump($style, $images)