店铺管理图片增加删除按钮

src/views/hisStore/store/index.vue

@@ -262,12 +262,23 @@
                 :action="uploadUrl"
                 :show-file-list="false"
                 :on-success="handleAvatarSuccess"
-                :before-upload="beforeAvatarUpload">
-                <img v-if="form.logoUrl" :src="form.logoUrl" class="avatar" width="200px">
+                :before-upload="beforeAvatarUpload"
+                :disabled="isDeleting"
+              >
+                <!-- 图片容器（包含图片和删除按钮，仅在有图片时显示） -->
+                <div class="avatar-wrapper" v-if="form.logoUrl">
+                  <img :src="form.logoUrl" class="avatar" width="200px">
+                  <!-- 悬停显示的删除按钮 -->
+                  <div class="delete-mask" @click.stop="handleDeleteLogo">
+                    <i class="el-icon-delete"></i>
+                  </div>
+                </div>
+                <!-- 未上传图片时显示的默认图标 -->
                 <i v-else class="el-icon-plus avatar-uploader-icon"></i>
               </el-upload>
             </el-form-item>
-          </el-col >
+          </el-col>
+          <el-col :span="12"></el-col>
           <el-col :span="12">
           </el-col>
         </el-row>
@@ -321,8 +332,17 @@
                 :action="uploadUrl"
                 :show-file-list="false"
                 :on-success="(response, file) => handleFileSuccess(response, file, 'businessLicense')"
-                :before-upload="beforeAvatarUpload">
-                <img v-if="form.businessLicense" :src="form.businessLicense" class="avatar" width="100px">
+                :before-upload="beforeAvatarUpload"
+                :disabled="isDeleting"
+              >
+                <!-- 图片容器（包含图片和删除按钮，仅在有图片时显示） -->
+                <div class="avatar-wrapper" v-if="form.businessLicense">
+                  <img :src="form.businessLicense" class="avatar" width="200px">
+                  <!-- 悬停显示的删除按钮 -->
+                  <div class="delete-mask" @click.stop="handleDelete5">
+                    <i class="el-icon-delete"></i>
+                  </div>
+                </div>
                 <i v-else class="el-icon-plus avatar-uploader-icon"></i>
               </el-upload>
             </el-form-item>
@@ -333,7 +353,7 @@
             </el-col>
 
           </el-col>
-
+          <el-col :span="12"></el-col>
           <el-col :span="12">
             <el-form-item label="营业执照是否长期有效" prop="isBusinessLicensePermanent">
               <el-switch
@@ -364,8 +384,18 @@
                   :action="uploadUrl"
                   :show-file-list="false"
                   :on-success="(response, file) => handleFileSuccess(response, file, 'drugLicense')"
-                  :before-upload="beforeAvatarUpload">
-                  <img v-if="form.drugLicense" :src="form.drugLicense" class="avatar" width="100px">
+                  :before-upload="beforeAvatarUpload"
+                  :disabled="isDeleting"
+                >
+                  <!-- 图片容器（包含图片和删除按钮，仅在有图片时显示） -->
+                  <div class="avatar-wrapper" v-if="form.drugLicense">
+                    <img :src="form.drugLicense" class="avatar" width="200px">
+                    <!-- 悬停显示的删除按钮 -->
+                    <div class="delete-mask" @click.stop="handleDelete6">
+                      <i class="el-icon-delete"></i>
+                    </div>
+                  </div>
+
                   <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                 </el-upload>
               </el-form-item>
@@ -404,8 +434,17 @@
                   :action="uploadUrl"
                   :show-file-list="false"
                   :on-success="(response, file) => handleFileSuccess(response, file, 'medicalDevice1')"
-                  :before-upload="beforeAvatarUpload">
-                  <img v-if="form.medicalDevice1" :src="form.medicalDevice1" class="avatar" width="100px">
+                  :before-upload="beforeAvatarUpload"
+                  :disabled="isDeleting"
+                >
+                  <!-- 图片容器（包含图片和删除按钮，仅在有图片时显示） -->
+                  <div class="avatar-wrapper" v-if="form.medicalDevice1">
+                    <img :src="form.medicalDevice1" class="avatar" width="200px">
+                    <!-- 悬停显示的删除按钮 -->
+                    <div class="delete-mask" @click.stop="handleDelete1">
+                      <i class="el-icon-delete"></i>
+                    </div>
+                  </div>
                   <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                 </el-upload>
               </el-form-item>
@@ -415,6 +454,7 @@
                 </el-form-item>
               </el-col>
             </el-col>
+            <el-col :span="12"></el-col>
             <el-col :span="12">
               <el-form-item label="1类医疗器械是否长期有效" prop="isMedicalDevice1ExpiryPermanent">
                 <el-switch
@@ -444,8 +484,17 @@
                   :action="uploadUrl"
                   :show-file-list="false"
                   :on-success="(response, file) => handleFileSuccess(response, file, 'medicalDevice2')"
-                  :before-upload="beforeAvatarUpload">
-                  <img v-if="form.medicalDevice2" :src="form.medicalDevice2" class="avatar" width="100px">
+                  :before-upload="beforeAvatarUpload"
+                  :disabled="isDeleting"
+                >
+                  <!-- 图片容器（包含图片和删除按钮，仅在有图片时显示） -->
+                  <div class="avatar-wrapper" v-if="form.medicalDevice2">
+                    <img :src="form.medicalDevice2" class="avatar" width="200px">
+                    <!-- 悬停显示的删除按钮 -->
+                    <div class="delete-mask" @click.stop="handleDelete7">
+                      <i class="el-icon-delete"></i>
+                    </div>
+                  </div>
                   <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                 </el-upload>
               </el-form-item>
@@ -456,6 +505,7 @@
               </el-col>
 
             </el-col>
+            <el-col :span="12"></el-col>
             <el-col :span="12">
               <el-form-item label="2类医疗器械备案是否长期有效" prop="isMedicalDevice2ExpiryPermanent">
                 <el-switch
@@ -485,8 +535,17 @@
                   :action="uploadUrl"
                   :show-file-list="false"
                   :on-success="(response, file) => handleFileSuccess(response, file, 'medicalDevice3')"
-                  :before-upload="beforeAvatarUpload">
-                  <img v-if="form.medicalDevice3" :src="form.medicalDevice3" class="avatar" width="100px">
+                  :before-upload="beforeAvatarUpload"
+                  :disabled="isDeleting"
+                >
+                  <!-- 图片容器（包含图片和删除按钮，仅在有图片时显示） -->
+                  <div class="avatar-wrapper" v-if="form.medicalDevice3">
+                    <img :src="form.medicalDevice3" class="avatar" width="200px">
+                    <!-- 悬停显示的删除按钮 -->
+                    <div class="delete-mask" @click.stop="handleDelete2">
+                      <i class="el-icon-delete"></i>
+                    </div>
+                  </div>
                   <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                 </el-upload>
               </el-form-item>
@@ -494,6 +553,7 @@
                 <el-input v-model="form.medicalDevice3Code" placeholder="请输入3类器械生产备案编号" />
               </el-form-item>
             </el-col>
+            <el-col :span="12"></el-col>
             <el-col :span="12">
               <el-form-item label="3类器械经营许可证是否长期有效" prop="isMedicalDevice3ExpiryPermanent">
                 <el-switch
@@ -523,8 +583,17 @@
                   :action="uploadUrl"
                   :show-file-list="false"
                   :on-success="(response, file) => handleFileSuccess(response, file, 'foodLicense')"
-                  :before-upload="beforeAvatarUpload">
-                  <img v-if="form.foodLicense" :src="form.foodLicense" class="avatar" width="100px">
+                  :before-upload="beforeAvatarUpload"
+                  :disabled="isDeleting"
+                >
+                  <!-- 图片容器（包含图片和删除按钮，仅在有图片时显示） -->
+                  <div class="avatar-wrapper" v-if="form.foodLicense">
+                    <img :src="form.foodLicense" class="avatar" width="200px">
+                    <!-- 悬停显示的删除按钮 -->
+                    <div class="delete-mask" @click.stop="handleDelete3">
+                      <i class="el-icon-delete"></i>
+                    </div>
+                  </div>
                   <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                 </el-upload>
               </el-form-item>
@@ -532,6 +601,7 @@
                 <el-input v-model="form.foodCode" placeholder="请输入食品经营许可证编号" />
               </el-form-item>
             </el-col>
+            <el-col :span="12"></el-col>
             <el-col :span="12">
               <el-form-item label="食品经营许可证是否长期有效" prop="isFoodLicenseExpiryPermanent">
                 <el-switch
@@ -561,8 +631,17 @@
                   :action="uploadUrl"
                   :show-file-list="false"
                   :on-success="(response, file) => handleFileSuccess(response, file, 'medicalLicense')"
-                  :before-upload="beforeAvatarUpload">
-                  <img v-if="form.medicalLicense" :src="form.medicalLicense" class="avatar" width="100px">
+                  :before-upload="beforeAvatarUpload"
+                  :disabled="isDeleting"
+                >
+                  <!-- 图片容器（包含图片和删除按钮，仅在有图片时显示） -->
+                  <div class="avatar-wrapper" v-if="form.medicalLicense">
+                    <img :src="form.medicalLicense" class="avatar" width="200px">
+                    <!-- 悬停显示的删除按钮 -->
+                    <div class="delete-mask" @click.stop="handleDelete4">
+                      <i class="el-icon-delete"></i>
+                    </div>
+                  </div>
                   <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                 </el-upload>
               </el-form-item>
@@ -570,6 +649,7 @@
                 <el-input v-model="form.medicalCode" placeholder="请输入医疗机构执业许可证编号" />
               </el-form-item>
             </el-col>
+            <el-col :span="12"></el-col>
             <el-col :span="12">
               <el-form-item label="医疗机构执业许可证是否长期有效" prop="isMedicalLicenseExpiryPermanent">
                 <el-switch
@@ -800,6 +880,8 @@ export default {
   components: { storeDetails },
   data() {
     return {
+      // 新增：控制LOGO上传组件禁用状态
+      isDeleting: false,
       promptList:[],
       dialogVisible: false,
       switchValue:false,
@@ -1109,6 +1191,8 @@ export default {
     reset() {
       this.switchValue = false;
       this.switchMedicalValue=false;
+      // 重置时确保isDeleting为false
+      this.isDeleting = false;
       this.form = {
         storeId: null,
         cityIds: null,
@@ -1201,6 +1285,135 @@ export default {
       this.title = "添加店铺";
 
     },
+    // 修复LOGO删除逻辑：确保删除后可重新上传
+    handleDeleteLogo() {
+      this.isDeleting = true; // 临时禁用上传组件
+      this.$confirm('确定要删除这张图片吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.form.logoUrl = ''; // 清空图片URL
+        this.$message.success('图片已删除');
+      }).catch(() => {
+        this.$message.info('已取消删除');
+      }).finally(() => {
+        this.isDeleting = false; // 无论操作结果，恢复上传组件可用
+        this.$forceUpdate(); // 强制刷新确保状态同步
+      });
+    },
+    handleDelete1() {
+      this.isDeleting = true; // 临时禁用上传组件
+      this.$confirm('确定要删除这张图片吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.form.medicalDevice1 = ''; // 清空图片URL
+        this.$message.success('图片已删除');
+      }).catch(() => {
+        this.$message.info('已取消删除');
+      }).finally(() => {
+        this.isDeleting = false; // 无论操作结果，恢复上传组件可用
+        this.$forceUpdate(); // 强制刷新确保状态同步
+      });
+    },
+    handleDelete2() {
+      this.isDeleting = true; // 临时禁用上传组件
+      this.$confirm('确定要删除这张图片吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.form.medicalDevice3 = ''; // 清空图片URL
+        this.$message.success('图片已删除');
+      }).catch(() => {
+        this.$message.info('已取消删除');
+      }).finally(() => {
+        this.isDeleting = false; // 无论操作结果，恢复上传组件可用
+        this.$forceUpdate(); // 强制刷新确保状态同步
+      });
+    },
+    handleDelete3() {
+      this.isDeleting = true; // 临时禁用上传组件
+      this.$confirm('确定要删除这张图片吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.form.foodLicense = ''; // 清空图片URL
+        this.$message.success('图片已删除');
+      }).catch(() => {
+        this.$message.info('已取消删除');
+      }).finally(() => {
+        this.isDeleting = false; // 无论操作结果，恢复上传组件可用
+        this.$forceUpdate(); // 强制刷新确保状态同步
+      });
+    },
+    handleDelete4() {
+      this.isDeleting = true; // 临时禁用上传组件
+      this.$confirm('确定要删除这张图片吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.form.medicalLicense = ''; // 清空图片URL
+        this.$message.success('图片已删除');
+      }).catch(() => {
+        this.$message.info('已取消删除');
+      }).finally(() => {
+        this.isDeleting = false; // 无论操作结果，恢复上传组件可用
+        this.$forceUpdate(); // 强制刷新确保状态同步
+      });
+    }
+    , handleDelete5() {
+      this.isDeleting = true; // 临时禁用上传组件
+      this.$confirm('确定要删除这张图片吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.form.businessLicense = ''; // 清空图片URL
+        this.$message.success('图片已删除');
+      }).catch(() => {
+        this.$message.info('已取消删除');
+      }).finally(() => {
+        this.isDeleting = false; // 无论操作结果，恢复上传组件可用
+        this.$forceUpdate(); // 强制刷新确保状态同步
+      });
+    }
+  , handleDelete6() {
+    this.isDeleting = true; // 临时禁用上传组件
+    this.$confirm('确定要删除这张图片吗？', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    }).then(() => {
+      this.form.drugLicense = ''; // 清空图片URL
+      this.$message.success('图片已删除');
+    }).catch(() => {
+      this.$message.info('已取消删除');
+    }).finally(() => {
+      this.isDeleting = false; // 无论操作结果，恢复上传组件可用
+      this.$forceUpdate(); // 强制刷新确保状态同步
+    });
+  },
+    handleDelete7() {
+      this.isDeleting = true; // 临时禁用上传组件
+      this.$confirm('确定要删除这张图片吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.form.medicalDevice2 = ''; // 清空图片URL
+        this.$message.success('图片已删除');
+      }).catch(() => {
+        this.$message.info('已取消删除');
+      }).finally(() => {
+        this.isDeleting = false; // 无论操作结果，恢复上传组件可用
+        this.$forceUpdate(); // 强制刷新确保状态同步
+      });
+    },
     /** 修改按钮操作 */
     handleUpdate(row) {
       this.reset();
@@ -1496,4 +1709,39 @@ export default {
   font-size: 16px;
   font-weight: bold;
 }
+
+/* LOGO上传区域样式优化 */
+.avatar-wrapper {
+  position: relative;
+  display: inline-block;
+}
+.avatar {
+  width: 200px;
+  height: 200px;
+  object-fit: cover;
+  border-radius: 4px;
+}
+.delete-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  opacity: 0;
+  cursor: pointer;
+  transition: opacity 0.3s ease;
+  border-radius: 4px;
+}
+.avatar-wrapper:hover .delete-mask {
+  opacity: 1;
+}
+.avatar-uploader {
+  display: inline-block;
+}
 </style>