update

gaoshp

2024-11-03 3931e2728f618d0090f129b2665bc1285c4440c3

 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>