wip
This commit is contained in:
pushuo
parent
a9a1f21e12
commit
685be77dbf
|
|
@ -84,6 +84,7 @@ class CategoryRepo
|
|||
}
|
||||
$results[] = [
|
||||
'id' => $category->id,
|
||||
'status' => $category->active,
|
||||
'name' => $pathName,
|
||||
];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -103,6 +103,7 @@ class ProductRepo
|
|||
$results[] = [
|
||||
'id' => $product->id,
|
||||
'name' => $product->description->name,
|
||||
'status' => $product->active,
|
||||
'image' => $product->image,
|
||||
];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -226,3 +226,255 @@ body.page-design .pb-images-selector .pb-images-list .pb-images-btns button {
|
|||
body.page-design .pb-images-selector .pb-images-list .el-input-group__prepend {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.link-selector-wrap > .title {
|
||||
margin-bottom: 6px;
|
||||
position: relative;
|
||||
font-size: 12px;
|
||||
}
|
||||
.link-selector-wrap > .title i {
|
||||
margin-right: 4px;
|
||||
color: #0072ff;
|
||||
}
|
||||
.link-selector-wrap .selector-type {
|
||||
position: relative;
|
||||
outline: none;
|
||||
}
|
||||
.link-selector-wrap .selector-type .title {
|
||||
border: 1px solid #eee;
|
||||
padding: 6px 16px 6px 6px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
border-radius: 2px;
|
||||
background-color: #fff;
|
||||
}
|
||||
.link-selector-wrap .selector-type .title:hover {
|
||||
border-color: #ddd;
|
||||
}
|
||||
.link-selector-wrap .selector-type .title:before {
|
||||
content: "\f107";
|
||||
font-family: fontawesome;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 8px;
|
||||
}
|
||||
.link-selector-wrap .selector-type .selector-content {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
top: calc(100% + 2px);
|
||||
border-radius: 2px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
|
||||
display: none;
|
||||
}
|
||||
.link-selector-wrap .selector-type .selector-content.active {
|
||||
display: block;
|
||||
}
|
||||
.link-selector-wrap .selector-type .selector-content > div {
|
||||
padding: 6px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.link-selector-wrap .selector-type .selector-content > div:hover {
|
||||
background-color: #e0fcf6;
|
||||
}
|
||||
|
||||
.link-dialog-box .el-dialog__header {
|
||||
padding: 0;
|
||||
}
|
||||
.link-dialog-box .el-dialog__header .el-dialog__headerbtn {
|
||||
top: 14px;
|
||||
font-size: 20px;
|
||||
}
|
||||
.link-dialog-box .el-dialog__header .el-dialog__headerbtn i {
|
||||
color: #fff;
|
||||
}
|
||||
.link-dialog-box .el-dialog__body {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.link-dialog-box .el-dialog__footer .el-button {
|
||||
padding: 10px 20px;
|
||||
min-width: 80px;
|
||||
}
|
||||
.link-dialog-box .link-dialog-header {
|
||||
padding: 10px 20px;
|
||||
background-color: #409eff;
|
||||
}
|
||||
.link-dialog-box .link-dialog-header .title {
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
}
|
||||
.link-dialog-box .link-dialog-header div.input-with-select {
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.link-dialog-box .link-dialog-header div.input-with-select input {
|
||||
height: 34px;
|
||||
border: none;
|
||||
border-radius: 4px 0 0 4px;
|
||||
flex: 1;
|
||||
padding: 0 10px;
|
||||
outline: none;
|
||||
}
|
||||
.link-dialog-box .link-dialog-header div.input-with-select button {
|
||||
color: #333;
|
||||
border: none;
|
||||
background-color: #eee;
|
||||
height: 34px;
|
||||
line-height: 36px;
|
||||
border-radius: 0 4px 4px 0;
|
||||
padding: 0 14px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.link-dialog-box .link-dialog-content .product-search {
|
||||
margin: -30px -20px 10px;
|
||||
padding: 6px 20px;
|
||||
text-align: left;
|
||||
background-color: #f3f4f7;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.link-dialog-box .link-dialog-content .product-search > a {
|
||||
border: 1px solid #ccc;
|
||||
background-color: #fff;
|
||||
padding: 0 10px;
|
||||
border-radius: 4px;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
color: #333;
|
||||
}
|
||||
.link-dialog-box .link-dialog-content .product-search .el-input-group__append {
|
||||
background-color: #0072ff;
|
||||
color: #fff;
|
||||
margin-top: -1px;
|
||||
}
|
||||
.link-dialog-box .link-dialog-content .product-info {
|
||||
height: 340px;
|
||||
}
|
||||
.link-dialog-box .link-dialog-content .product-info .product-info-title {
|
||||
background-color: #dee1e9;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 6px 20px 6px 38px;
|
||||
text-align: left;
|
||||
color: #30344f;
|
||||
font-size: 14px;
|
||||
}
|
||||
.link-dialog-box .link-dialog-content .product-info .product-list {
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
margin-top: 4px;
|
||||
margin-bottom: 0;
|
||||
height: 314px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.link-dialog-box .link-dialog-content .product-info .product-list.static {
|
||||
height: 340px;
|
||||
}
|
||||
.link-dialog-box .link-dialog-content .product-info .product-list li {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 5px 10px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.link-dialog-box .link-dialog-content .product-info .product-list li:not(.no-status) {
|
||||
cursor: pointer;
|
||||
}
|
||||
.link-dialog-box .link-dialog-content .product-info .product-list li:not(.no-status):hover {
|
||||
background-color: #e0fcf6;
|
||||
}
|
||||
.link-dialog-box .link-dialog-content .product-info .product-list li .left {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.link-dialog-box .link-dialog-content .product-info .product-list li .left .checkbox-plus {
|
||||
margin-right: 12px;
|
||||
flex: 0 0 14px;
|
||||
height: 14px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.link-dialog-box .link-dialog-content .product-info .product-list li .left .checkbox-plus:not(.no-status) {
|
||||
cursor: pointer;
|
||||
}
|
||||
.link-dialog-box .link-dialog-content .product-info .product-list li .left .checkbox-plus:before {
|
||||
content: "";
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: #0072ff;
|
||||
border-radius: 50%;
|
||||
display: none;
|
||||
}
|
||||
.link-dialog-box .link-dialog-content .product-info .product-list li .left .checkbox-plus.active {
|
||||
border-color: #0072ff;
|
||||
box-shadow: 0px 0px 4px #0072ff;
|
||||
}
|
||||
.link-dialog-box .link-dialog-content .product-info .product-list li .left .checkbox-plus.active:before {
|
||||
display: block;
|
||||
}
|
||||
.link-dialog-box .link-dialog-content .product-info .product-list li .left .checkbox-plus.no-status {
|
||||
background-color: #ddd;
|
||||
}
|
||||
.link-dialog-box .link-dialog-content .product-info .product-list li .left > div {
|
||||
display: -webkit-box;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
}
|
||||
.link-dialog-box .link-dialog-content .product-info .product-list li .right {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 2px;
|
||||
padding: 2px 6px;
|
||||
color: #aaa;
|
||||
font-size: 12px;
|
||||
background-color: #fff;
|
||||
}
|
||||
.link-dialog-box .link-dialog-content .product-info .product-list li .right.ok {
|
||||
color: #52c41a;
|
||||
border-color: #b7eb8f;
|
||||
}
|
||||
.link-dialog-box .link-dialog-content .product-info .product-list li img {
|
||||
width: 46px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.link-dialog-box .link-dialog-content .product-info-no {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
.link-dialog-box .link-dialog-content .product-info-no > div {
|
||||
display: block;
|
||||
}
|
||||
.link-dialog-box .link-dialog-content .product-info-no .icon {
|
||||
margin: 50px 0 20px;
|
||||
}
|
||||
.link-dialog-box .link-dialog-content .product-info-no .icon i {
|
||||
font-size: 100px;
|
||||
color: #8c8c8c;
|
||||
}
|
||||
.link-dialog-box .link-dialog-content .product-info-no .no-text {
|
||||
font-size: 16px;
|
||||
}
|
||||
.link-dialog-box .link-dialog-content .product-info-no a {
|
||||
color: #0072ff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.link-dialog-box .el-dialog__footer {
|
||||
background-color: #f6f6f6;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,6 +13,20 @@ body.page-filemanager .filemanager-wrap {
|
|||
}
|
||||
body.page-filemanager .filemanager-wrap .filemanager-navbar {
|
||||
width: 20%;
|
||||
background-color: #293042;
|
||||
}
|
||||
body.page-filemanager .filemanager-wrap .filemanager-navbar .el-tree {
|
||||
background-color: transparent;
|
||||
}
|
||||
body.page-filemanager .filemanager-wrap .filemanager-navbar .el-tree .el-tree-node__content {
|
||||
color: #eee;
|
||||
}
|
||||
body.page-filemanager .filemanager-wrap .filemanager-navbar .el-tree .el-tree-node__content:hover {
|
||||
background-color: #434d66;
|
||||
}
|
||||
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;
|
||||
}
|
||||
body.page-filemanager .filemanager-wrap .filemanager-navbar .tree-wrap .el-tree-node__content {
|
||||
height: 36px;
|
||||
|
|
@ -27,7 +41,7 @@ body.page-filemanager .filemanager-wrap .filemanager-navbar .tree-wrap .custom-t
|
|||
margin-right: 8px;
|
||||
}
|
||||
body.page-filemanager .filemanager-wrap .filemanager-navbar .tree-wrap .custom-tree-node .right span:hover {
|
||||
color: #fd560f;
|
||||
color: #0b68ff;
|
||||
}
|
||||
body.page-filemanager .filemanager-wrap .filemanager-divider {
|
||||
top: 0;
|
||||
|
|
@ -35,7 +49,7 @@ body.page-filemanager .filemanager-wrap .filemanager-divider {
|
|||
cursor: col-resize;
|
||||
}
|
||||
body.page-filemanager .filemanager-wrap .filemanager-divider:hover {
|
||||
background: #fd560f;
|
||||
background: #0b68ff;
|
||||
}
|
||||
body.page-filemanager .filemanager-wrap .filemanager-content {
|
||||
flex: 1;
|
||||
|
|
@ -60,10 +74,10 @@ body.page-filemanager .filemanager-wrap .filemanager-content .content-head .left
|
|||
color: #17191c;
|
||||
}
|
||||
body.page-filemanager .filemanager-wrap .filemanager-content .content-head .left a.is-disabled i {
|
||||
color: #fe9d74;
|
||||
color: #71a7ff;
|
||||
}
|
||||
body.page-filemanager .filemanager-wrap .filemanager-content .content-head .left a i {
|
||||
color: #fd560f;
|
||||
color: #0b68ff;
|
||||
font-weight: 600;
|
||||
}
|
||||
body.page-filemanager .filemanager-wrap .filemanager-content .content-center {
|
||||
|
|
@ -71,7 +85,7 @@ body.page-filemanager .filemanager-wrap .filemanager-content .content-center {
|
|||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
background: #f9fafa;
|
||||
background: #f7f9fc;
|
||||
padding: 20px 10px;
|
||||
overflow-y: auto;
|
||||
align-content: flex-start;
|
||||
|
|
@ -82,7 +96,7 @@ body.page-filemanager .filemanager-wrap .filemanager-content .content-center::-w
|
|||
}
|
||||
body.page-filemanager .filemanager-wrap .filemanager-content .content-center::-webkit-scrollbar-thumb {
|
||||
border-radius: 2px;
|
||||
background: #fd560f;
|
||||
background: #0b68ff;
|
||||
}
|
||||
body.page-filemanager .filemanager-wrap .filemanager-content .content-center::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
|
|
@ -107,7 +121,7 @@ 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 #fd560f;
|
||||
outline: 1px solid #0b68ff;
|
||||
}
|
||||
body.page-filemanager .filemanager-wrap .filemanager-content .content-center .image-list .text {
|
||||
border-top: 1px solid #eee;
|
||||
|
|
@ -123,7 +137,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: #fd560f;
|
||||
color: #0b68ff;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
|
@ -136,21 +150,25 @@ body.page-filemanager .filemanager-wrap .filemanager-content .content-footer {
|
|||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
body.page-filemanager .upload-wrap .el-dialog__body {
|
||||
padding-top: 10px;
|
||||
}
|
||||
body.page-filemanager .upload-wrap .upload-image {
|
||||
height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
body.page-filemanager .upload-wrap .upload-image .list {
|
||||
background-color: #f4f4f4;
|
||||
padding: 10px 10px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
body.page-filemanager .upload-wrap .upload-image .list .name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
body.page-filemanager .upload-wrap .upload-image .list .name {
|
||||
color: #111111;
|
||||
}
|
||||
body.page-filemanager .upload-wrap .el-progress-bar__outer {
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
|
@ -160,6 +178,7 @@ body.page-filemanager .photos-upload {
|
|||
body.page-filemanager .photos-upload .el-upload {
|
||||
width: 100%;
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
body.page-filemanager .photos-upload .el-loading-spinner {
|
||||
top: 35%;
|
||||
|
|
|
|||
|
|
@ -264,4 +264,315 @@ body.page-design {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.link-selector-wrap {
|
||||
> .title {
|
||||
margin-bottom: 6px;
|
||||
position: relative;
|
||||
font-size: 12px;
|
||||
i {
|
||||
margin-right: 4px;
|
||||
color: #0072ff;
|
||||
}
|
||||
}
|
||||
|
||||
.selector-type {
|
||||
position: relative;
|
||||
outline: none;
|
||||
|
||||
.title {
|
||||
border: 1px solid #eee;
|
||||
padding: 6px 16px 6px 6px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
border-radius: 2px;
|
||||
background-color: #fff;
|
||||
&:hover {
|
||||
border-color: #ddd;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: '\f107';
|
||||
font-family: fontawesome;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.selector-content {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
top: calc(100% + 2px);
|
||||
border-radius: 2px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 3px 10px rgba(0,0,0,0.25);
|
||||
display: none;
|
||||
&.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
> div {
|
||||
padding: 6px 10px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: #e0fcf6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.link-dialog-box {
|
||||
.el-dialog__header {
|
||||
padding: 0;
|
||||
|
||||
.el-dialog__headerbtn {
|
||||
top: 14px;
|
||||
font-size: 20px;
|
||||
i {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
.el-button {
|
||||
padding: 10px 20px;
|
||||
min-width: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
.link-dialog-header {
|
||||
padding: 10px 20px;
|
||||
background-color: #409eff;
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
|
||||
div.input-with-select {
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
align-items:center;
|
||||
|
||||
input {
|
||||
height: 34px;
|
||||
border: none;
|
||||
border-radius: 4px 0 0 4px;
|
||||
flex: 1;
|
||||
padding: 0 10px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
button {
|
||||
color: #333;
|
||||
border: none;
|
||||
background-color: #eee;
|
||||
height: 34px;
|
||||
line-height: 36px;
|
||||
border-radius: 0 4px 4px 0;
|
||||
padding: 0 14px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.link-dialog-content {
|
||||
.product-search {
|
||||
margin: -30px -20px 10px;
|
||||
padding: 6px 20px;
|
||||
text-align: left;
|
||||
background-color: #f3f4f7;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items:center;
|
||||
|
||||
> a {
|
||||
border: 1px solid #ccc;
|
||||
background-color: #fff;
|
||||
padding: 0 10px;
|
||||
border-radius: 4px;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.link-top-new {
|
||||
|
||||
}
|
||||
|
||||
.el-input-group__append {
|
||||
background-color: #0072ff;
|
||||
color: #fff;
|
||||
margin-top: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
.product-info {
|
||||
height: 340px;
|
||||
// overflow-y: auto;
|
||||
|
||||
.product-info-title {
|
||||
background-color: #dee1e9;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 6px 20px 6px 38px;
|
||||
text-align: left;
|
||||
color: #30344f;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.product-list {
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
margin-top: 4px;
|
||||
margin-bottom: 0;
|
||||
height: 314px;
|
||||
overflow-y: auto;
|
||||
|
||||
&.static {
|
||||
height: 340px;
|
||||
}
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
justify-content:space-between;
|
||||
align-items: center;
|
||||
padding: 5px 10px;
|
||||
border-bottom: 1px solid #eee;
|
||||
&:not(.no-status) {
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background-color: #e0fcf6;
|
||||
}
|
||||
}
|
||||
|
||||
.left {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 20px;
|
||||
|
||||
.checkbox-plus {
|
||||
// width: 16px;
|
||||
margin-right: 12px;
|
||||
flex: 0 0 14px;
|
||||
height: 14px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&:not(.no-status) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: #0072ff;
|
||||
border-radius: 50%;
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-color: #0072ff;
|
||||
box-shadow: 0px 0px 4px #0072ff;
|
||||
|
||||
&:before {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&.no-status {
|
||||
background-color: #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
> div {
|
||||
// padding-left: 10px;
|
||||
display: -webkit-box;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 2px;
|
||||
padding: 2px 6px;
|
||||
color: #aaa;
|
||||
font-size: 12px;
|
||||
background-color: #fff;
|
||||
|
||||
&.ok {
|
||||
color: #52c41a;
|
||||
border-color: #b7eb8f;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 46px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-info-no {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
> div {
|
||||
display: block;
|
||||
}
|
||||
.icon {
|
||||
margin: 50px 0 20px;
|
||||
i {
|
||||
font-size: 100px;
|
||||
color: #8c8c8c;
|
||||
}
|
||||
}
|
||||
|
||||
.no-text {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #0072ff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
background-color: #f6f6f6;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
.link-dialog-footer {
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
$primary: #fd560f;
|
||||
$primary: #0b68ff;
|
||||
|
||||
[v-cloak] {
|
||||
display: none;
|
||||
|
|
@ -17,6 +17,23 @@ body.page-filemanager {
|
|||
|
||||
.filemanager-navbar {
|
||||
width: 20%;
|
||||
background-color: #293042;
|
||||
|
||||
.el-tree {
|
||||
background-color: transparent;
|
||||
.el-tree-node__content {
|
||||
color: #eee;
|
||||
|
||||
&:hover {
|
||||
background-color: #434d66;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
|
||||
background-color: #434d66;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tree-wrap {
|
||||
.el-tree-node__content {
|
||||
|
|
@ -99,7 +116,7 @@ body.page-filemanager {
|
|||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
// align-items: center; // flex-start | center
|
||||
background: #f9fafa;
|
||||
background: #f7f9fc;
|
||||
padding: 20px 10px;
|
||||
// justify-content: space-between; // flex-end | center | space-between
|
||||
// flex-wrap: wrap;
|
||||
|
|
@ -184,20 +201,25 @@ body.page-filemanager {
|
|||
}
|
||||
|
||||
.upload-wrap {
|
||||
.el-dialog__body {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.upload-image {
|
||||
height: 300px;
|
||||
overflow-y: auto;
|
||||
|
||||
.list {
|
||||
background-color: #f4f4f4;
|
||||
padding: 10px 10px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center; // flex-start | center
|
||||
justify-content: space-between; // flex-end | center | space-between
|
||||
margin-bottom: 8px;
|
||||
|
||||
.name {
|
||||
display: flex;
|
||||
align-items: center; // flex-start | center
|
||||
justify-content: space-between; // flex-end | center | space-between
|
||||
margin-bottom: 8px;
|
||||
color: #111111;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -214,6 +236,7 @@ body.page-filemanager {
|
|||
.el-upload {
|
||||
width: 100%;
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.el-loading-spinner {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,361 @@
|
|||
<template id="link-selector">
|
||||
<div class="link-selector-wrap">
|
||||
<div class="title" v-if="isTitle"><i class="el-icon-link"></i>选择链接</div>
|
||||
<div class="selector-type" @blur="selectorContentShow = false" tabindex="1">
|
||||
<div class="title" v-if="value.value == ''" @click="selectorContentShow = !selectorContentShow">请选择跳转到的链接页面</div>
|
||||
<div class="title" @click="selectorContentShow = !selectorContentShow" v-else :title="name" v-loading="nameLoading">@{{ selectorTitle }}: @{{ name }}</div>
|
||||
<div :class="'selector-content ' + (selectorContentShow ? 'active' : '')">
|
||||
<div @click="selectorType()">无</div>
|
||||
<div v-for="(type, index) in types" :key="index" @click="selectorType(type.type)">@{{ type.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-dialog
|
||||
:visible.sync="linkDialog.show"
|
||||
class="link-dialog-box"
|
||||
:append-to-body="true"
|
||||
@open="linkDialogOpen"
|
||||
@closed="linkDialogClose"
|
||||
width="460px">
|
||||
<div slot="title" class="link-dialog-header">
|
||||
<div class="title">选择@{{ dialogTitle }}</div>
|
||||
<div class="input-with-select" v-if="link.type != 'custom'">
|
||||
<input type="text" placeholder="请输入关键字搜索" v-model="keyword" @keyup.enter="searchProduct" class="form-control">
|
||||
<el-button @click="searchProduct"><i class="el-icon-search"></i> 搜索</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="link-dialog-content">
|
||||
<div class="product-search">
|
||||
<div class="link-top-new">
|
||||
<span>是否新窗口打开</span>
|
||||
<el-switch :width="36" @change="linksNewBack" v-model="link.new_window"></el-switch>
|
||||
</div>
|
||||
|
||||
<a :href="linkTypeAdmin" target="_blank" v-if="link.type != 'custom' && link.type != 'static'">管理@{{ dialogTitle }}</a>
|
||||
</div>
|
||||
|
||||
<div class="link-text" v-if="showText">
|
||||
<div class="module-edit-group" style="margin-bottom: 10px;">
|
||||
<div class="module-edit-title">标题（覆盖下方选择的链接名称）</div>
|
||||
<text-i18n v-model="link.text"></text-i18n>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template v-if="link.type == 'custom'">
|
||||
<div class="linkDialog-custom">
|
||||
<el-input v-model="link.value" placeholder="请输入链接地址"></el-input>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="link.type == 'static'">
|
||||
<div class="">
|
||||
<div class="product-info">
|
||||
<ul class="product-list static">
|
||||
<li v-for="(product, index) in static" @click="link.value = product.value">
|
||||
<div class="left">
|
||||
<span :class="'checkbox-plus ' + (link.value == product.value ? 'active':'')"></span>
|
||||
<div>@{{ product.name }}</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="product-info" v-loading="loading">
|
||||
<template v-if="linkDialog.data.length">
|
||||
<div class="product-info-title">
|
||||
<span>内容</span>
|
||||
<span>状态</span>
|
||||
</div>
|
||||
|
||||
<ul class="product-list">
|
||||
<li v-for="(product, index) in linkDialog.data" @click="product.status ? link.value = product.id : false" :class="!product.status ? 'no-status' : ''">
|
||||
<div class="left">
|
||||
<span :class="'checkbox-plus ' + (link.value == product.id ? 'active':'') + (!product.status ? 'no-status':'')"></span>
|
||||
<img :src="product.image" class="img-responsive">
|
||||
<div>@{{ product.name }}</div>
|
||||
</div>
|
||||
<div :class="'right ' + (product.status ? 'ok' : 'no')">@{{ product.status ? '启用' : '禁用' }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
<div class="product-info-no" v-if="!linkDialog.data.length && loading === false">
|
||||
<div class="icon"><i class="iconfont"></i></div>
|
||||
<div class="no-text">数据不存在或已被删除，<a :href="linkTypeAdmin" target="_blank">去添加@{{ dialogTitle }}</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div slot="footer" class="link-dialog-footer">
|
||||
<el-button type="primary" @click="linkDialogConfirm" :disabled="link.value == ''">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script type="text/javascript">
|
||||
Vue.component('link-selector', {
|
||||
template: '#link-selector',
|
||||
|
||||
props: {
|
||||
value: {
|
||||
default: null
|
||||
},
|
||||
|
||||
isTitle: {
|
||||
default: true,
|
||||
type: Boolean
|
||||
},
|
||||
|
||||
showText: {
|
||||
default: false
|
||||
},
|
||||
|
||||
type: {
|
||||
default: null
|
||||
},
|
||||
|
||||
linkNew: {
|
||||
default: true
|
||||
},
|
||||
},
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
types: [
|
||||
{type: 'product',label: '商品'},
|
||||
{type: 'category',label: '分类'},
|
||||
// {type: 'information',label: ''},
|
||||
// {type: 'manufacturer',label: '品牌'},
|
||||
{type: 'static',label: '固定连接'},
|
||||
// {type: 'blog',label: '博客'},
|
||||
{type: 'custom',label: '自定义'}
|
||||
],
|
||||
static: [
|
||||
{name:'个人中心', value: 'account/latest'},
|
||||
],
|
||||
link: null,
|
||||
keyword: '',
|
||||
name: '',
|
||||
loading: null,
|
||||
nameLoading: null,
|
||||
selectorContentShow: false,
|
||||
isUpdate: true,
|
||||
linkDialog: {
|
||||
show: false,
|
||||
data:[],
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
beforeMount() {
|
||||
this.updateData();
|
||||
},
|
||||
|
||||
watch: {
|
||||
value() {
|
||||
if (this.isUpdate) {
|
||||
this.updateData();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
dialogTitle: function () {
|
||||
return this.types.find(e => e.type == this.link.type).label;
|
||||
},
|
||||
|
||||
selectorTitle() {
|
||||
return this.types.find(e => e.type == this.value.type).label;
|
||||
},
|
||||
|
||||
linkTypeAdmin: function () {
|
||||
let url = '';
|
||||
|
||||
switch(this.link.type) {
|
||||
case 'product':
|
||||
url = '{{ admin_route('products.index') }}';
|
||||
break;
|
||||
case 'category':
|
||||
url = '{{ admin_route('categories.index') }}';
|
||||
break;
|
||||
case 'manufacturer':
|
||||
url = '/';
|
||||
break;
|
||||
default:
|
||||
null;
|
||||
}
|
||||
return url;
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
linkDialogConfirm() {
|
||||
this.isUpdate = false;
|
||||
if (this.link.type == 'custom') {
|
||||
this.name = this.link.value;
|
||||
} else if (this.link.type == 'static') {
|
||||
this.name = this.static.find(e => e.value == this.link.value).name;
|
||||
} else {
|
||||
this.name = this.linkDialog.data.find(e => e.id == this.link.value).name;
|
||||
}
|
||||
|
||||
let links = JSON.parse(JSON.stringify(this.link)); // type 类型切换时，不需要更新视图
|
||||
this.$emit("input", links);
|
||||
this.linkDialog.show = false;
|
||||
this.$nextTick(() => {
|
||||
this.isUpdate = true;
|
||||
})
|
||||
},
|
||||
|
||||
searchProduct() {
|
||||
const self = this;
|
||||
this.link.value = '';
|
||||
this.querySearch(this.keyword, null, function (data) {
|
||||
self.linkDialog.data = data;
|
||||
})
|
||||
},
|
||||
|
||||
linkDialogClose() {
|
||||
this.linkDialog.data = [];
|
||||
},
|
||||
|
||||
linkDialogOpen() {
|
||||
const self = this;
|
||||
this.keyword = '',
|
||||
this.selectorContentShow = false;
|
||||
if (this.link.type != 'custom' || this.value.type != 'custom') {
|
||||
this.link.value = ''
|
||||
}
|
||||
|
||||
if (this.link.type == 'custom' || this.link.type == 'static') {
|
||||
return;
|
||||
}
|
||||
|
||||
this.querySearch(this.keyword, 'all', function (data) {
|
||||
self.linkDialog.data = data.data;
|
||||
})
|
||||
},
|
||||
|
||||
selectorType(type) {
|
||||
if (type) {
|
||||
this.linkDialog.show = true;
|
||||
this.link.type = type;
|
||||
|
||||
if (type == 'custom') {
|
||||
if (this.link.text) {
|
||||
this.link.text = this.link.text
|
||||
} else {
|
||||
this.link.text = languagesFill('')
|
||||
}
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
this.selectorContentShow = false;
|
||||
this.$emit("input", {link: '', type: 'category', value: ''});
|
||||
},
|
||||
|
||||
querySearch(keyword, all, cb) {
|
||||
const self = this;
|
||||
let url = '';
|
||||
|
||||
switch(this.link.type) {
|
||||
case 'product':
|
||||
url = 'products/autocomplete?name=';
|
||||
break;
|
||||
case 'category':
|
||||
url = 'categories/autocomplete?name=';
|
||||
break;
|
||||
case 'manufacturer':
|
||||
url = '';
|
||||
break;
|
||||
default:
|
||||
null;
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
url: url + encodeURIComponent(keyword) + (all ? '&all=all' : ''),
|
||||
dataType: 'json',
|
||||
beforeSend: function() { self.loading = true;; },
|
||||
complete: function() { self.loading = false; },
|
||||
success: function (json) {if (json) {cb(json)}}
|
||||
});
|
||||
},
|
||||
|
||||
linksNewBack() {
|
||||
let links = JSON.parse(JSON.stringify(this.link));
|
||||
this.$emit("input", links);
|
||||
},
|
||||
|
||||
updateData() {
|
||||
this.value.type = this.value.type || 'category';
|
||||
this.value.link = this.value.link || '';
|
||||
this.link = JSON.parse(JSON.stringify(this.value));
|
||||
if (this.type) {
|
||||
this.types = this.types.filter(e => e.type == this.type);
|
||||
}
|
||||
|
||||
if (!this.link.value) return;
|
||||
if (this.link.type == 'customer') return this.name = this.link.value;
|
||||
if (this.link.type == 'static') {
|
||||
if (this.static.find(e => e.value == this.link.value)) {
|
||||
this.name = this.static.find(e => e.value == this.link.value).name;
|
||||
}
|
||||
}
|
||||
|
||||
this.nameLoading = true;
|
||||
|
||||
let self = this, url = '', data = {};
|
||||
|
||||
switch(this.link.type) {
|
||||
case 'product':
|
||||
url = 'products/autocomplete?name=';
|
||||
break;
|
||||
case 'category':
|
||||
url = 'categories/autocomplete?name=';
|
||||
break;
|
||||
case 'manufacturer':
|
||||
url = '';
|
||||
break;
|
||||
default:
|
||||
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 = '数据不存在或已被删除';
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
.link-text {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.link-text .text-i18n-template .el-tabs__nav > div {
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
}
|
||||
.link-text .el-tabs {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.link-text .el-tabs__header {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.el-collapse-item__wrap {
|
||||
overflow: initial;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -87,7 +87,7 @@
|
|||
|
||||
design: {
|
||||
type: 'pc',
|
||||
editType: 'add',
|
||||
editType: 'module',
|
||||
sidebar: false,
|
||||
editingModuleIndex: 0,
|
||||
ready: false,
|
||||
|
|
|
|||
|
|
@ -55,14 +55,13 @@
|
|||
<div class="filemanager-divider" @mousedown="handleMouseDown"></div>
|
||||
<div class="filemanager-content" v-loading="loading" element-loading-background="rgba(255, 255, 255, 0.5)">
|
||||
<div class="content-head">
|
||||
<el-progress status="exception" :percentage="50"></el-progress>
|
||||
<div class="left">
|
||||
<el-link :underline="false" :disabled="editingImageIndex === null" icon="el-icon-download">下载</el-link>
|
||||
<el-link :underline="false" :disabled="editingImageIndex === null" @click="deleteFile" icon="el-icon-delete">删除</el-link>
|
||||
<el-link :underline="false" :disabled="editingImageIndex === null" @click="openInputBox('image')" icon="el-icon-edit">重命名</el-link>
|
||||
</div>
|
||||
<div class="right">
|
||||
<el-button size="mini" type="primary" @click="openUploadFile">上传文件</el-button>
|
||||
<el-button size="small" type="primary" @click="openUploadFile" icon="el-icon-upload2">上传文件</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-center">
|
||||
|
|
@ -84,7 +83,7 @@
|
|||
:total="image_total">
|
||||
</el-pagination>
|
||||
</div>
|
||||
<div class="right"><el-button size="mini" type="primary" @click="fileChecked" :disabled="editingImageIndex === null">选择</el-button></div>
|
||||
<div class="right"><el-button size="small" icon="el-icon-check" type="primary" @click="fileChecked" :disabled="editingImageIndex === null">选择</el-button></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -113,8 +112,8 @@
|
|||
</el-upload>
|
||||
<div class="upload-image">
|
||||
<div v-for="image, index in uploadFileDialog.images" :key="index" class="list">
|
||||
<div class="name"><span>@{{ image.name }}</span> <span class="percent">@{{ image.percent }}</span></div>
|
||||
<div class="progress"><el-progress :show-text="false" style="width:100%" :percentage="image.percent"></el-progress></div>
|
||||
<div class="name">@{{ image.name }}</div>
|
||||
<div class="status">上传中</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
|
@ -399,7 +398,7 @@
|
|||
const defaultkeyarr = sessionStorage.getItem('defaultkeyarr');
|
||||
|
||||
if (defaultkeyarr) {
|
||||
this.defaultkeyarr = defaultkeyarr.split(',');
|
||||
// this.defaultkeyarr = defaultkeyarr.split(',');
|
||||
}
|
||||
},
|
||||
// 在挂载开始之前被调用:相关的 render 函数首次被调用
|
||||
|
|
|
|||
Loading…
Reference in New Issue