From eef1ef0be935d4a3d8fc691b2666f41796b2d4a5 Mon Sep 17 00:00:00 2001
From: gaoshp <291585735@qq.com>
Date: 星期一, 04 十一月 2024 19:57:08 +0800
Subject: [PATCH] 增加列表显示
---
src/views/console/basic-data/gallery.vue | 98 +++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 86 insertions(+), 12 deletions(-)
diff --git a/src/views/console/basic-data/gallery.vue b/src/views/console/basic-data/gallery.vue
index f3c504a..f64da91 100644
--- a/src/views/console/basic-data/gallery.vue
+++ b/src/views/console/basic-data/gallery.vue
@@ -2,7 +2,7 @@
* @Author: lzhe lzhe@example.com
* @Date: 2024-03-26 10:28:33
* @LastEditors: lzhe lzhe@example.com
- * @LastEditTime: 2024-06-05 17:06:58
+ * @LastEditTime: 2024-09-26 15:25:23
* @FilePath: /smart-web/src/views/master/person/main/index.vue
* @Description: 杩欐槸榛樿璁剧疆,璇疯缃甡customMade`, 鎵撳紑koroFileHeader鏌ョ湅閰嶇疆 杩涜璁剧疆: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
@@ -29,19 +29,26 @@
<span class="delData" @click="delData(index)">鍒犻櫎</span>
</div>
<div class="upload">
- <div v-for="(item1,index1) in item.ImageUrlList">
- <img :src="item1.url" alt="" @click="viewUrl(item1)">
- </div>
<el-upload
:disabled="!item.id"
:action="action"
+ :headers= "myHeader"
list-type="picture-card"
+ :show-file-list=false
:on-success="(file)=>handleAvatarSuccess(file,index)"
- :before-upload="(file)=>beforeAvatarUpload(file,index)">
+ :before-upload="(file)=>beforeAvatarUpload(file,index)"
+ class="uploadStyle">
<el-icon><Plus /></el-icon>
</el-upload>
- <el-dialog :visible.sync="dialogVisible">
- <img width="100%" :src="dialogImageUrl" alt="">
+ <div v-for="(item1,index1) in item.children" class="imgStyle">
+ <img :src="hostname + '/visual/' + item1.link" alt="">
+ <div class="img-edit">
+ <el-icon @click="viewUrl(item1)"><CirclePlus /></el-icon>
+ <el-icon @click="delUrl(item1)"><Delete /></el-icon>
+ </div>
+ </div>
+ <el-dialog v-model="dialogVisible" class="dialogImageUrl" :width="500">
+ <img :src="dialogImageUrl" alt="">
</el-dialog>
</div>
</div>
@@ -49,7 +56,7 @@
</div>
</template>
<script>
- import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
let icons = []
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
icons.push(key)
@@ -63,6 +70,8 @@
dialogVisible: false,
latticeList: [],
ImageUrlList: [],
+ myHeader: {},
+ hostname: ""
}
},
created(){
@@ -70,6 +79,14 @@
},
mounted(){
this.getTreeList();
+ //鑾峰彇鍦板潃
+ this.$HTTP.get(`/api/blade-resource/oss/default`).then(res=> {
+ if(res.success) {
+ this.hostname = res.data;
+ }else {
+ this.$message.error(res.msg);
+ }
+ })
},
components: {
...ElementPlusIconsVue
@@ -77,7 +94,21 @@
methods: {
viewUrl(item1) {
this.dialogVisible = true;
- this.dialogImageUrl = item1.url;
+ this.dialogImageUrl = `${this.hostname}/visual/${item1.link}`;
+ },
+ delUrl(item1) {
+ this.$confirm(`鍒犻櫎`, '', {
+ type: 'warning'
+ }).then(() => {
+ this.$HTTP.delete(`/api/blade-system/gallery-item/remove`,[item1.id]).then(res => {
+ if (res.code === 200) {
+ this.$message.success("鎿嶄綔鎴愬姛");
+ this.getTreeList();
+ }
+ })
+ }).catch(() => {
+
+ })
},
editData(index) {
this.latticeList[index].status = 0;
@@ -137,7 +168,9 @@
},
beforeAvatarUpload(file,index) {
if(this.latticeList[index].id) {
+ var TOKEN = this.$TOOL.cookie.get("TOKEN")
this.action = `/api/blade-system/gallery-item/insert?galleryId=${this.latticeList[index].id}`;
+ this.myHeader = {Authorization: 'Basic c2FiZXI6c2FiZXJfc2VjcmV0','Blade-Auth': TOKEN}
}else {
return false;
}
@@ -149,9 +182,7 @@
},
handleAvatarSuccess(file,index) {
- this.latticeList[index].ImageUrlList.push({
- url: file.url
- })
+ this.latticeList[index].children.push(file.data);
},
table_create() {
this.latticeList.push({name: "",ImageUrlList: [],status: 0})
@@ -212,4 +243,47 @@
margin-top: 12px;
margin-bottom: 12px;
}
+ .uploadStyle {
+ display: inline-block;
+ vertical-align: top;
+ }
+ .imgStyle {
+ display: inline-block;
+ margin-left: 12px;
+ position: relative;
+ }
+ .imgStyle:hover .img-edit {
+ display: inline-block;
+ }
+ .imgStyle img {
+ width: 148px;
+ height: 148px;
+ }
+ /deep/ .dialogImageUrl {
+ text-align: center;
+ }
+ .dialogImageUrl img {
+ width: 400px;
+ height: 400px;
+ }
+ .img-edit {
+ display: none;
+ vertical-align: top;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 148px;
+ height: 148px;
+ background-color: rgba(0,0,0,.4);
+ text-align: center;
+ line-height: 148px;
+ }
+ .img-edit i {
+ color: #fff;
+ font-size: 20px;
+ cursor: pointer;
+ }
+ .img-edit i:nth-child(1) {
+ margin-right: 12px;
+ }
</style>
--
Gitblit v1.9.3