静态资源管理-编辑图片别名

src/api/module.js

@@ -71,4 +71,12 @@ export const delStaticResource = (data) => {
         data
     })
 }
+//修改静态资源
+export const upStaticResource = (data) => {
+    return request({
+        url: '/website/upStaticResource',
+        method: 'post',
+        data
+    })
+}
 // -------------自助建站-*-静态资源管理-----fr------end

src/store/modules/module.js

@@ -1,4 +1,4 @@
-import { getStaticResourceList,addStaticResource,delStaticResource,} from '@/api/module'
+import { getStaticResourceList,addStaticResource,delStaticResource,upStaticResource} from '@/api/module'
 
 const state = {
 
@@ -45,7 +45,15 @@ const actions = {
             })
         })
     },
-
+    upStaticResource({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            upStaticResource(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
 }
 export default {
     namespaced: true,

src/views/componentGallery/imgList.vue

@@ -50,7 +50,7 @@
                         <el-table-column prop="img_size" label="文件大小"></el-table-column>
                         <el-table-column prop="website_name" label="所属网站" width="">
                         </el-table-column>
-                        <el-table-column fixed="right" label="操作" width="200">
+                        <el-table-column fixed="right" label="操作" width="300">
                             <template slot-scope="scope">
                               <div class="listBtnBox">
                                 <div class="listDeleteBtn" @click="deleteRow(scope.row.id)">
@@ -59,6 +59,9 @@
                                 <div class="listEditBtn" @click="handleViewImage(scope.row)">
                                     <i class="el-icon-view"></i> 查看
                                 </div>
+                                <div class="listEditBtn" @click="upWebsite(scope.row)">
+                                    <i class="el-icon-edit-outline"></i> 编辑
+                                </div>
                               </div>
                             </template>
                           </el-table-column>
@@ -78,11 +81,10 @@
         </div>
 
         <!-- 弹出框 start----------------------------------------------------------->
-        <el-dialog :title="dialogName" :visible.sync="dialogTableVisible" width="45%" top="8vh"
-            :close-on-click-modal="false">
+        <el-dialog :title="dialogName" :visible.sync="dialogTableVisible" width="45%" top="8vh" :close-on-click-modal="false">
             <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                 <div class="dialogText">
-                    <el-form-item label="关联网站名称:" prop="website_id">
+                    <el-form-item label="关联网站名称:" prop="website_id" v-if="this.dialogName=='添加图片'">
                         <el-select v-model="ruleForm.website_id" :multiple="false" :multiple-limit="1" filterable remote
                             reserve-keyword placeholder="请输入关联网站名称" :remote-method="getWebNavList" :loading="webSiteLoading" @change="detectionWebSite">
                             <el-option v-for="item in webSiteList" :key="item.value" :label="item.label"
@@ -93,7 +95,7 @@
                     <el-form-item label="文件别名:" prop="img_alias">
                         <el-input v-model="ruleForm.img_alias" placeholder="请输入文件别名"></el-input>
                     </el-form-item>
-                    <el-form-item label="组件展示图:" prop="img_url" :label-width="formLabelWidth">
+                    <el-form-item label="组件展示图:" prop="img_url" :label-width="formLabelWidth" v-if="this.dialogName=='添加图片'">
                         <div class="uploaderBox">
                             <!-- 图片预览和信息展示 -->
                             <div v-if="logoUrl" class="image-preview">
@@ -140,6 +142,7 @@
                 </div>
             </div>
         </el-dialog>
+        <!-- 新增图片查看弹框 end-->
     </div>
 </template>
 
@@ -152,6 +155,7 @@ import '@/styles/global.less';
 import { getComponentList, addComponent, delComponent, updateComponent, getComponentInfo } from '@/api/module'
 import { getSectorList } from '@/api/plate'
 import { getTemplateClass } from '@/api/style'
+import { upWebsiteCategory } from '@/api/pool';
 export default {
     components: {
         tableTitle,//表格标题-
@@ -238,6 +242,7 @@ export default {
             this.currentImageUrl = row.img_url;
             this.viewImageVisible = true;
         },
+        
         //1.列表和分页相关 start ------------------------------------------------------------>
         //1.1 开始请求列表信息方法
         getData() {
@@ -400,6 +405,17 @@ export default {
             console.log("添加",this.ruleForm);
 
         },
+        // 1.9 编辑
+        upWebsite(row) {
+            this.dialogTableVisible = true; // 显示弹窗
+            this.dialogName = "编辑"; // 编辑弹窗名称
+            console.log("编辑", row);
+            this.activeid = row.id; // 存储当前编辑的活动ID
+            this.ruleForm.img_alias = row.img_alias; // 回显图片别名
+            this.ruleForm.img_size = row.img_size    //图片大小
+            this.ruleForm.img_url = row.img_url      //图片地址
+            this.logoUrl = row.img_url //图片展示图
+        },
         // 弹出层相关方法
         // 提交表单
         submitForm(formName) {
@@ -421,6 +437,7 @@ export default {
                     img_url: this.ruleForm.img_url,
                     website_id: this.ruleForm.website_id ?? 0,
                     img_size: this.imageInfo.size,
+
                 };
                 console.log("添加", data);
                 // 直接传递 data 作为参数，而不是 {data}
@@ -455,26 +472,20 @@ export default {
                 this.dialogVisible = true
             }
             if (this.dialogName == "编辑") {
-                updateComponent({
-                    id: this.activeid,
-                    img_alias: this.ruleForm.img_alias,
-                }).then(data => {
-                    console.log(data);
-                    if (data.code == 200) {
+                this.$store.dispatch('module/upStaticResource', { id: this.activeid, img_alias: this.ruleForm.img_alias }).then(res => {
+                    if (res.code === 200) {
                         this.$message({
                             message: '编辑成功',
-                            type: 'success'
-                        })
-                        this.dialogTableVisible = false
-                    }
-                    if (data.code == 0) {
+                            type:'success'
+                        });
+                        this.dialogTableVisible = false;
+                        this.getData();
+                    }else{
                         this.$message({
-                            message: data.message,
+                            message: res.data.message,
                             type: 'error'
                         })
-                        this.dialogTableVisible = true
                     }
-                    this.getData()
                 })
             }
 
@@ -541,7 +552,11 @@ export default {
             console.log(this.website_id);
 
         },
-
+        changeViewImage(img_alias,id) {
+            this.dialogTableVisible = true; // 显示编辑弹窗
+            this.dialogName = '编辑'; // 设置编辑弹窗标题为"编辑"
+            this.ruleForm.img_alias = img_alias; // 将当前行的 img_alias 赋值给 ruleForm 的 img_alias
+        },
 
     },
     mounted() {