新增：便民服务轮播图接口

propertyManagement-admin/src/main/java/com/propertyManagement/web/controller/business/ConvenienceServiceController.java

+package com.propertyManagement.web.controller.business;
+
+import java.util.List;
+import java.util.Arrays;
+
+import lombok.RequiredArgsConstructor;
+import javax.servlet.http.HttpServletResponse;
+import javax.validation.constraints.*;
+import cn.dev33.satoken.annotation.SaCheckPermission;
+import org.springframework.web.bind.annotation.*;
+import org.springframework.validation.annotation.Validated;
+import com.propertyManagement.common.annotation.RepeatSubmit;
+import com.propertyManagement.common.annotation.Log;
+import com.propertyManagement.common.core.controller.BaseController;
+import com.propertyManagement.common.core.domain.PageQuery;
+import com.propertyManagement.common.core.domain.R;
+import com.propertyManagement.common.core.validate.AddGroup;
+import com.propertyManagement.common.core.validate.EditGroup;
+import com.propertyManagement.common.enums.BusinessType;
+import com.propertyManagement.common.utils.poi.ExcelUtil;
+import com.propertyManagement.business.domain.vo.ConvenienceServiceVo;
+import com.propertyManagement.business.domain.bo.ConvenienceServiceBo;
+import com.propertyManagement.business.service.IConvenienceServiceService;
+import com.propertyManagement.common.core.page.TableDataInfo;
+
+/**
+ * 便民服务
+ *
+ * @author Ashe
+ * @date 2025-08-13
+ */
+@Validated
+@RequiredArgsConstructor
+@RestController
+@RequestMapping("/business/converienceService")
+public class ConvenienceServiceController extends BaseController {
+
+    private final IConvenienceServiceService iConvenienceServiceService;
+
+    /**
+     * 查询便民服务列表
+     */
+    @SaCheckPermission("business:converienceService:list")
+    @GetMapping("/list")
+    public TableDataInfo<ConvenienceServiceVo> list(ConvenienceServiceBo bo, PageQuery pageQuery) {
+        return iConvenienceServiceService.queryPageList(bo, pageQuery);
+    }
+
+    /**
+     * 导出便民服务列表
+     */
+    @SaCheckPermission("business:converienceService:export")
+    @Log(title = "便民服务", businessType = BusinessType.EXPORT)
+    @PostMapping("/export")
+    public void export(ConvenienceServiceBo bo, HttpServletResponse response) {
+        List<ConvenienceServiceVo> list = iConvenienceServiceService.queryList(bo);
+        ExcelUtil.exportExcel(list, "便民服务", ConvenienceServiceVo.class, response);
+    }
+
+    /**
+     * 获取便民服务详细信息
+     *
+     * @param id 主键
+     */
+    @SaCheckPermission("business:converienceService:query")
+    @GetMapping("/{id}")
+    public R<ConvenienceServiceVo> getInfo(@NotNull(message = "主键不能为空")
+                                     @PathVariable Long id) {
+        return R.ok(iConvenienceServiceService.queryById(id));
+    }
+
+    /**
+     * 新增便民服务
+     */
+    @SaCheckPermission("business:converienceService:add")
+    @Log(title = "便民服务", businessType = BusinessType.INSERT)
+    @RepeatSubmit()
+    @PostMapping()
+    public R<Void> add(@Validated(AddGroup.class) @RequestBody ConvenienceServiceBo bo) {
+        return toAjax(iConvenienceServiceService.insertByBo(bo));
+    }
+
+    /**
+     * 修改便民服务
+     */
+    @SaCheckPermission("business:converienceService:edit")
+    @Log(title = "便民服务", businessType = BusinessType.UPDATE)
+    @RepeatSubmit()
+    @PutMapping()
+    public R<Void> edit(@Validated(EditGroup.class) @RequestBody ConvenienceServiceBo bo) {
+        return toAjax(iConvenienceServiceService.updateByBo(bo));
+    }
+
+    /**
+     * 删除便民服务
+     *
+     * @param ids 主键串
+     */
+    @SaCheckPermission("business:converienceService:remove")
+    @Log(title = "便民服务", businessType = BusinessType.DELETE)
+    @DeleteMapping("/{ids}")
+    public R<Void> remove(@NotEmpty(message = "主键不能为空")
+                          @PathVariable Long[] ids) {
+        return toAjax(iConvenienceServiceService.deleteWithValidByIds(Arrays.asList(ids), true));
+    }
+}

propertyManagement-admin/src/main/java/com/propertyManagement/web/controller/business/api/ApiConvenienceServiceController.java

+package com.propertyManagement.web.controller.business.api;
+
+import cn.dev33.satoken.annotation.SaCheckPermission;
+import com.propertyManagement.business.domain.bo.ConvenienceServiceBo;
+import com.propertyManagement.business.domain.vo.ConvenienceServiceVo;
+import com.propertyManagement.business.service.IConvenienceServiceService;
+import com.propertyManagement.common.annotation.Anonymous;
+import com.propertyManagement.common.annotation.Log;
+import com.propertyManagement.common.annotation.RepeatSubmit;
+import com.propertyManagement.common.core.controller.BaseController;
+import com.propertyManagement.common.core.domain.PageQuery;
+import com.propertyManagement.common.core.domain.R;
+import com.propertyManagement.common.core.page.TableDataInfo;
+import com.propertyManagement.common.core.validate.AddGroup;
+import com.propertyManagement.common.core.validate.EditGroup;
+import com.propertyManagement.common.enums.BusinessType;
+import com.propertyManagement.common.utils.poi.ExcelUtil;
+import lombok.RequiredArgsConstructor;
+import org.springframework.validation.annotation.Validated;
+import org.springframework.web.bind.annotation.*;
+
+import javax.servlet.http.HttpServletResponse;
+import javax.validation.constraints.NotEmpty;
+import javax.validation.constraints.NotNull;
+import java.util.Arrays;
+import java.util.List;
+
+/**
+ * 便民服务
+ *
+ * @author Ashe
+ * @date 2025-08-13
+ */
+@Validated
+@RequiredArgsConstructor
+@RestController
+@RequestMapping("/api/converienceService")
+public class ApiConvenienceServiceController extends BaseController {
+
+    private final IConvenienceServiceService iConvenienceServiceService;
+
+    /**
+     * 查询便民服务列表
+     */
+    @Anonymous
+    @GetMapping("/list")
+    public TableDataInfo<ConvenienceServiceVo> list(ConvenienceServiceBo bo, PageQuery pageQuery) {
+        return iConvenienceServiceService.queryPageList(bo, pageQuery);
+    }
+
+    /**
+     * 导出便民服务列表
+     */
+    @Log(title = "便民服务", businessType = BusinessType.EXPORT)
+    @PostMapping("/export")
+    public void export(ConvenienceServiceBo bo, HttpServletResponse response) {
+        List<ConvenienceServiceVo> list = iConvenienceServiceService.queryList(bo);
+        ExcelUtil.exportExcel(list, "便民服务", ConvenienceServiceVo.class, response);
+    }
+
+    /**
+     * 获取便民服务详细信息
+     *
+     * @param id 主键
+     */
+    @GetMapping("/{id}")
+    public R<ConvenienceServiceVo> getInfo(@NotNull(message = "主键不能为空")
+                                     @PathVariable Long id) {
+        return R.ok(iConvenienceServiceService.queryById(id));
+    }
+
+    /**
+     * 新增便民服务
+     */
+    @Log(title = "便民服务", businessType = BusinessType.INSERT)
+    @RepeatSubmit()
+    @PostMapping()
+    public R<Void> add(@Validated(AddGroup.class) @RequestBody ConvenienceServiceBo bo) {
+        return toAjax(iConvenienceServiceService.insertByBo(bo));
+    }
+
+    /**
+     * 修改便民服务
+     */
+    @Log(title = "便民服务", businessType = BusinessType.UPDATE)
+    @RepeatSubmit()
+    @PutMapping()
+    public R<Void> edit(@Validated(EditGroup.class) @RequestBody ConvenienceServiceBo bo) {
+        return toAjax(iConvenienceServiceService.updateByBo(bo));
+    }
+
+    /**
+     * 删除便民服务
+     *
+     * @param ids 主键串
+     */
+    @Log(title = "便民服务", businessType = BusinessType.DELETE)
+    @DeleteMapping("/{ids}")
+    public R<Void> remove(@NotEmpty(message = "主键不能为空")
+                          @PathVariable Long[] ids) {
+        return toAjax(iConvenienceServiceService.deleteWithValidByIds(Arrays.asList(ids), true));
+    }
+}

propertyManagement-business/src/main/java/com/propertyManagement/business/domain/ConvenienceService.java

+package com.propertyManagement.business.domain;
+
+import com.baomidou.mybatisplus.annotation.*;
+import lombok.Data;
+import lombok.EqualsAndHashCode;
+import java.io.Serializable;
+import java.util.Date;
+import java.math.BigDecimal;
+
+import com.propertyManagement.common.core.domain.BaseEntity;
+
+/**
+ * 便民服务对象 convenience_service
+ *
+ * @author Ashe
+ * @date 2025-08-13
+ */
+@Data
+@EqualsAndHashCode(callSuper = true)
+@TableName("convenience_service")
+public class ConvenienceService extends BaseEntity {
+
+    private static final long serialVersionUID=1L;
+
+    /**
+     * 主键
+     */
+    @TableId(value = "id")
+    private Long id;
+    /**
+     * 服务类型（1=洗衣服务，2=清洁服务，3=超市服务，4=送水服务）
+     */
+    private Long serviceType;
+    /**
+     * 描述
+     */
+    private String description;
+    /**
+     * 预约热线
+     */
+    private String bookPhone;
+    /**
+     * 轮播图
+     */
+    private String serviceBanner;
+
+}

propertyManagement-business/src/main/java/com/propertyManagement/business/domain/bo/ConvenienceServiceBo.java

+package com.propertyManagement.business.domain.bo;
+
+import com.propertyManagement.common.core.validate.AddGroup;
+import com.propertyManagement.common.core.validate.EditGroup;
+import lombok.Data;
+import lombok.EqualsAndHashCode;
+import javax.validation.constraints.*;
+
+import java.util.Date;
+
+import com.propertyManagement.common.core.domain.BaseEntity;
+
+/**
+ * 便民服务业务对象 convenience_service
+ *
+ * @author Ashe
+ * @date 2025-08-13
+ */
+
+@Data
+@EqualsAndHashCode(callSuper = true)
+public class ConvenienceServiceBo extends BaseEntity {
+
+    /**
+     * 主键
+     */
+    private Long id;
+
+    /**
+     * 服务类型（1=洗衣服务，2=清洁服务，3=超市服务，4=送水服务）
+     */
+    @NotNull(message = "服务类型（1=洗衣服务，2=清洁服务，3=超市服务，4=送水服务）不能为空", groups = { AddGroup.class, EditGroup.class })
+    private Long serviceType;
+
+    /**
+     * 描述
+     */
+    @NotBlank(message = "描述不能为空", groups = { AddGroup.class, EditGroup.class })
+    private String description;
+
+    /**
+     * 预约热线
+     */
+    @NotBlank(message = "预约热线不能为空", groups = { AddGroup.class, EditGroup.class })
+    private String bookPhone;
+
+    /**
+     * 轮播图
+     */
+    @NotBlank(message = "轮播图不能为空", groups = { AddGroup.class, EditGroup.class })
+    private String serviceBanner;
+
+
+}

propertyManagement-business/src/main/java/com/propertyManagement/business/domain/vo/ConvenienceServiceVo.java

+package com.propertyManagement.business.domain.vo;
+
+import com.alibaba.excel.annotation.ExcelIgnoreUnannotated;
+import com.alibaba.excel.annotation.ExcelProperty;
+import com.propertyManagement.common.annotation.ExcelDictFormat;
+import com.propertyManagement.common.convert.ExcelDictConvert;
+import lombok.Data;
+import java.util.Date;
+
+import java.io.Serializable;
+
+/**
+ * 便民服务视图对象 convenience_service
+ *
+ * @author Ashe
+ * @date 2025-08-13
+ */
+@Data
+@ExcelIgnoreUnannotated
+public class ConvenienceServiceVo implements Serializable {
+
+    private static final long serialVersionUID = 1L;
+
+    private Long id;
+
+    /**
+     * 服务类型（1=洗衣服务，2=清洁服务，3=超市服务，4=送水服务）
+     */
+    @ExcelProperty(value = "服务类型", converter = ExcelDictConvert.class)
+    @ExcelDictFormat(dictType = "convenience_service")
+    private Long serviceType;
+
+    /**
+     * 描述
+     */
+    @ExcelProperty(value = "描述")
+    private String description;
+
+    /**
+     * 预约热线
+     */
+    @ExcelProperty(value = "预约热线")
+    private String bookPhone;
+
+    /**
+     * 轮播图
+     */
+    @ExcelProperty(value = "轮播图")
+    private String serviceBanner;
+
+
+}

propertyManagement-business/src/main/java/com/propertyManagement/business/mapper/ConvenienceServiceMapper.java

+package com.propertyManagement.business.mapper;
+
+import com.propertyManagement.business.domain.ConvenienceService;
+import com.propertyManagement.business.domain.vo.ConvenienceServiceVo;
+import com.propertyManagement.common.core.mapper.BaseMapperPlus;
+
+/**
+ * 便民服务Mapper接口
+ *
+ * @author Ashe
+ * @date 2025-08-13
+ */
+public interface ConvenienceServiceMapper extends BaseMapperPlus<ConvenienceServiceMapper, ConvenienceService, ConvenienceServiceVo> {
+
+}

propertyManagement-business/src/main/java/com/propertyManagement/business/service/IConvenienceServiceService.java

+package com.propertyManagement.business.service;
+
+import com.propertyManagement.business.domain.ConvenienceService;
+import com.propertyManagement.business.domain.vo.ConvenienceServiceVo;
+import com.propertyManagement.business.domain.bo.ConvenienceServiceBo;
+import com.propertyManagement.common.core.page.TableDataInfo;
+import com.propertyManagement.common.core.domain.PageQuery;
+
+import java.util.Collection;
+import java.util.List;
+
+/**
+ * 便民服务Service接口
+ *
+ * @author Ashe
+ * @date 2025-08-13
+ */
+public interface IConvenienceServiceService {
+
+    /**
+     * 查询便民服务
+     */
+    ConvenienceServiceVo queryById(Long id);
+
+    /**
+     * 查询便民服务列表
+     */
+    TableDataInfo<ConvenienceServiceVo> queryPageList(ConvenienceServiceBo bo, PageQuery pageQuery);
+
+    /**
+     * 查询便民服务列表
+     */
+    List<ConvenienceServiceVo> queryList(ConvenienceServiceBo bo);
+
+    /**
+     * 新增便民服务
+     */
+    Boolean insertByBo(ConvenienceServiceBo bo);
+
+    /**
+     * 修改便民服务
+     */
+    Boolean updateByBo(ConvenienceServiceBo bo);
+
+    /**
+     * 校验并批量删除便民服务信息
+     */
+    Boolean deleteWithValidByIds(Collection<Long> ids, Boolean isValid);
+}

propertyManagement-business/src/main/java/com/propertyManagement/business/service/impl/ConvenienceServiceServiceImpl.java

+package com.propertyManagement.business.service.impl;
+
+import cn.hutool.core.bean.BeanUtil;
+import com.propertyManagement.common.utils.StringUtils;
+import com.propertyManagement.common.core.page.TableDataInfo;
+import com.propertyManagement.common.core.domain.PageQuery;
+import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
+import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
+import com.baomidou.mybatisplus.core.toolkit.Wrappers;
+import lombok.RequiredArgsConstructor;
+import org.springframework.stereotype.Service;
+import com.propertyManagement.business.domain.bo.ConvenienceServiceBo;
+import com.propertyManagement.business.domain.vo.ConvenienceServiceVo;
+import com.propertyManagement.business.domain.ConvenienceService;
+import com.propertyManagement.business.mapper.ConvenienceServiceMapper;
+import com.propertyManagement.business.service.IConvenienceServiceService;
+
+import java.util.List;
+import java.util.Map;
+import java.util.Collection;
+
+/**
+ * 便民服务Service业务层处理
+ *
+ * @author Ashe
+ * @date 2025-08-13
+ */
+@RequiredArgsConstructor
+@Service
+public class ConvenienceServiceServiceImpl implements IConvenienceServiceService {
+
+    private final ConvenienceServiceMapper baseMapper;
+
+    /**
+     * 查询便民服务
+     */
+    @Override
+    public ConvenienceServiceVo queryById(Long id){
+        return baseMapper.selectVoById(id);
+    }
+
+    /**
+     * 查询便民服务列表
+     */
+    @Override
+    public TableDataInfo<ConvenienceServiceVo> queryPageList(ConvenienceServiceBo bo, PageQuery pageQuery) {
+        LambdaQueryWrapper<ConvenienceService> lqw = buildQueryWrapper(bo);
+        Page<ConvenienceServiceVo> result = baseMapper.selectVoPage(pageQuery.build(), lqw);
+        return TableDataInfo.build(result);
+    }
+
+    /**
+     * 查询便民服务列表
+     */
+    @Override
+    public List<ConvenienceServiceVo> queryList(ConvenienceServiceBo bo) {
+        LambdaQueryWrapper<ConvenienceService> lqw = buildQueryWrapper(bo);
+        return baseMapper.selectVoList(lqw);
+    }
+
+    private LambdaQueryWrapper<ConvenienceService> buildQueryWrapper(ConvenienceServiceBo bo) {
+        Map<String, Object> params = bo.getParams();
+        LambdaQueryWrapper<ConvenienceService> lqw = Wrappers.lambdaQuery();
+        lqw.eq(bo.getServiceType() != null, ConvenienceService::getServiceType, bo.getServiceType());
+        lqw.like(StringUtils.isNotBlank(bo.getDescription()), ConvenienceService::getDescription, bo.getDescription());
+        lqw.like(StringUtils.isNotBlank(bo.getBookPhone()), ConvenienceService::getBookPhone, bo.getBookPhone());
+        return lqw;
+    }
+
+    /**
+     * 新增便民服务
+     */
+    @Override
+    public Boolean insertByBo(ConvenienceServiceBo bo) {
+        ConvenienceService add = BeanUtil.toBean(bo, ConvenienceService.class);
+        validEntityBeforeSave(add);
+        boolean flag = baseMapper.insert(add) > 0;
+        if (flag) {
+            bo.setId(add.getId());
+        }
+        return flag;
+    }
+
+    /**
+     * 修改便民服务
+     */
+    @Override
+    public Boolean updateByBo(ConvenienceServiceBo bo) {
+        ConvenienceService update = BeanUtil.toBean(bo, ConvenienceService.class);
+        validEntityBeforeSave(update);
+        return baseMapper.updateById(update) > 0;
+    }
+
+    /**
+     * 保存前的数据校验
+     */
+    private void validEntityBeforeSave(ConvenienceService entity){
+        //TODO 做一些数据校验,如唯一约束
+    }
+
+    /**
+     * 批量删除便民服务
+     */
+    @Override
+    public Boolean deleteWithValidByIds(Collection<Long> ids, Boolean isValid) {
+        if(isValid){
+            //TODO 做一些业务上的校验,判断是否需要校验
+        }
+        return baseMapper.deleteBatchIds(ids) > 0;
+    }
+}

propertyManagement-ui/README.md

+# 物业管理前端系统
+
+这是一个基于Vue.js和Element UI的物业管理前端系统，提供完整的物业管理功能界面。
+
+## 项目概述
+
+本项目是一个现代化的物业管理前端系统，采用Vue.js框架开发，使用Element UI组件库构建用户界面。系统提供了完整的物业管理功能，包括用户管理、社区管理、便民服务等模块。
+
+## 主要功能模块
+
+### 便民服务管理
+- **功能描述**: 管理系统中的便民服务信息，如家政服务、维修服务等
+- **操作权限**: 
+  - ✅ 查看服务列表
+  - ✅ 修改服务信息
+  - ❌ 新增服务（已禁用）
+  - ❌ 删除服务（已禁用）
+- **特殊限制**: 
+  - 服务类型字段在修改时不可更改（置灰状态）
+  - 只能修改服务的描述、预约热线和轮播图信息
+- **轮播图功能**: 
+  - ✅ 支持上传多张图片（最多5张）
+  - ✅ 支持图片预览和删除
+  - ✅ 图片数据自动保存为逗号分隔的字符串
+  - ✅ 支持拖拽排序和批量管理
+- **使用说明**: 
+  - 点击"修改"按钮可以编辑现有服务信息
+  - 服务类型会自动置灰，确保服务分类的稳定性
+  - 轮播图支持多张图片上传，点击"+"按钮添加图片
+  - 支持按服务类型、描述、预约热线等条件搜索
+
+### 其他功能模块
+- 用户管理
+- 社区管理
+- 车位管理
+- 访客管理
+- 维修管理
+- 支付管理
+
+## 技术架构
+
+- **前端框架**: Vue.js 2.x
+- **UI组件库**: Element UI
+- **状态管理**: Vuex
+- **路由管理**: Vue Router
+- **HTTP客户端**: Axios
+- **构建工具**: Webpack
+
 ## 开发
 
 ```bash

propertyManagement-ui/src/api/business/converienceService.js

+import request from '@/utils/request'
+
+// 查询便民服务列表
+export function listConverienceService(query) {
+  return request({
+    url: '/business/converienceService/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询便民服务详细
+export function getConverienceService(id) {
+  return request({
+    url: '/business/converienceService/' + id,
+    method: 'get'
+  })
+}
+
+// 新增便民服务
+export function addConverienceService(data) {
+  return request({
+    url: '/business/converienceService',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改便民服务
+export function updateConverienceService(data) {
+  return request({
+    url: '/business/converienceService',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除便民服务
+export function delConverienceService(id) {
+  return request({
+    url: '/business/converienceService/' + id,
+    method: 'delete'
+  })
+}

propertyManagement-ui/src/components/ImageUpload/index.vue

@@ -89,36 +89,29 @@ export default {
     value: {
       async handler(val) {
         if (val) {
-          const list = Array.isArray(val) ? val : this.value.split(',');
-          // 然后将数组转为对象数组
+          // 修复：确保多张图片能够正确显示
+          let list = [];
+          if (Array.isArray(val)) {
+            list = val;
+          } else if (typeof val === 'string' && val.trim() !== '') {
+            // 如果是字符串，按逗号分割
+            list = val.split(',').filter(item => item.trim() !== '');
+          }
+          
+          // 将数组转为对象数组
           this.fileList = list.map(item => {
             if (typeof item === "string") {
-              if (item.indexOf(this.baseUrl) === -1) {
-                item = { name: item, url: item };
-              } else {
-                item = { name: item, url: item };
-              }
+              return { 
+                name: item, 
+                url: item,
+                // 如果URL包含ossId，则提取出来
+                ossId: item.includes('ossId=') ? item.split('ossId=')[1] : undefined
+              };
             }
             return item;
           });
-          // 首先将值转为数组
-          // let list;
-          // if (Array.isArray(val)) {
-          //   list = val;
-          // } else {
-          //   await listByIds(val).then(res => {
-          //     list = res.data;
-          //   })
-          // }
-          // // 然后将数组转为对象数组
-          // this.fileList = list.map(item => {
-          //   // 此处name使用ossId 防止删除出现重名
-          //   item = { name: item.ossId, url: item.url, ossId: item.ossId };
-          //   return item;
-          // });
         } else {
           this.fileList = [];
-          return [];
         }
       },
       deep: true,
@@ -184,8 +177,12 @@ export default {
     handleDelete(file) {
       const findex = this.fileList.map(f => f.name).indexOf(file.name);
       if(findex > -1) {
+        // 修复：确保删除操作能够正确处理
         let ossId = this.fileList[findex].ossId;
-        delOss(ossId);
+        if (ossId) {
+          // 如果有ossId，则调用删除API
+          delOss(ossId);
+        }
         this.fileList.splice(findex, 1);
         this.$emit("input", this.listToString(this.fileList));
       }
@@ -215,7 +212,8 @@ export default {
       let strs = "";
       separator = separator || ",";
       for (let i in list) {
-        if (list[i].ossId) {
+        // 修复：确保所有图片都能被正确处理，不管是否有ossId
+        if (list[i].url) {
           strs += list[i].url + separator;
         }
       }
@@ -239,5 +237,19 @@ export default {
   opacity: 0;
   transform: translateY(0);
 }
+
+// 优化多张图片显示
+::v-deep .el-upload-list--picture-card .el-upload-list__item {
+  width: 148px;
+  height: 148px;
+  margin-right: 8px;
+  margin-bottom: 8px;
+}
+
+::v-deep .el-upload--picture-card {
+  width: 148px;
+  height: 148px;
+  line-height: 146px;
+}
 </style>
 

propertyManagement-ui/src/views/business/converienceService/index.vue

+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="服务类型" prop="serviceType">
+        <el-select v-model="queryParams.serviceType" placeholder="请选择服务类型" clearable>
+          <el-option
+            v-for="dict in dict.type.convenience_service"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="描述" prop="description">
+        <el-input
+          v-model="queryParams.description"
+          placeholder="请输入描述"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="预约热线" prop="bookPhone">
+        <el-input
+          v-model="queryParams.bookPhone"
+          placeholder="请输入预约热线"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['business:converienceService:edit']"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['business:converienceService:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="converienceServiceList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="主键" align="center" prop="id" v-if="false"/>
+      <el-table-column label="服务类型" align="center" prop="serviceType">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.convenience_service" :value="scope.row.serviceType"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="描述" align="center" prop="description" />
+      <el-table-column label="预约热线" align="center" prop="bookPhone" />
+      <el-table-column label="轮播图" align="center" prop="serviceBanner" width="100">
+        <template slot-scope="scope">
+          <image-preview :src="scope.row.serviceBanner" :width="50" :height="50"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['business:converienceService:edit']"
+          >修改</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 修改便民服务对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="服务类型" prop="serviceType">
+          <el-select v-model="form.serviceType" placeholder="请选择服务类型" :disabled="true">
+            <el-option
+              v-for="dict in dict.type.convenience_service"
+              :key="dict.value"
+              :label="dict.label"
+              :value="parseInt(dict.value)"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="描述" prop="description">
+          <el-input v-model="form.description" placeholder="请输入描述" />
+        </el-form-item>
+        <el-form-item label="预约热线" prop="bookPhone">
+          <el-input v-model="form.bookPhone" placeholder="请输入预约热线" />
+        </el-form-item>
+        <el-form-item label="轮播图" prop="serviceBanner">
+          <image-upload v-model="form.serviceBanner" :limit="5"/>
+          <!-- 调试信息：显示当前轮播图数据 -->
+          <div style="margin-top: 10px; font-size: 12px; color: #999;">
+            <div>当前轮播图数量: {{ getBannerCount() }}</div>
+            <div v-if="form.serviceBanner">数据预览: {{ form.serviceBanner }}</div>
+          </div>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listConverienceService, getConverienceService, updateConverienceService } from "@/api/business/converienceService";
+
+export default {
+  name: "ConverienceService",
+  dicts: ['convenience_service'],
+  data() {
+    return {
+      // 按钮loading
+      buttonLoading: false,
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 便民服务表格数据
+      converienceServiceList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        serviceType: undefined,
+        description: undefined,
+        bookPhone: undefined,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        description: [
+          { required: true, message: "描述不能为空", trigger: "blur" }
+        ],
+        bookPhone: [
+          { required: true, message: "预约热线不能为空", trigger: "blur" }
+        ],
+        serviceBanner: [
+          { 
+            required: true, 
+            message: "轮播图不能为空", 
+            trigger: "blur",
+            validator: (rule, value, callback) => {
+              if (!value || (typeof value === 'string' && value.trim() === '') || (Array.isArray(value) && value.length === 0)) {
+                callback(new Error('轮播图不能为空'));
+              } else {
+                callback();
+              }
+            }
+          }
+        ]
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询便民服务列表 */
+    getList() {
+      this.loading = true;
+      listConverienceService(this.queryParams).then(response => {
+        this.converienceServiceList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: undefined,
+        serviceType: undefined,
+        description: undefined,
+        bookPhone: undefined,
+        serviceBanner: undefined
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.loading = true;
+      this.reset();
+      const id = row.id || this.ids
+      getConverienceService(id).then(response => {
+        this.loading = false;
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改便民服务";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          this.buttonLoading = true;
+          updateConverienceService(this.form).then(response => {
+            this.$modal.msgSuccess("修改成功");
+            this.open = false;
+            this.getList();
+          }).finally(() => {
+            this.buttonLoading = false;
+          });
+        }
+      });
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('business/converienceService/export', {
+        ...this.queryParams
+      }, `converienceService_${new Date().getTime()}.xlsx`)
+    },
+    // 获取轮播图数量
+    getBannerCount() {
+      if (this.form.serviceBanner) {
+        if (Array.isArray(this.form.serviceBanner)) {
+          return this.form.serviceBanner.length;
+        } else if (typeof this.form.serviceBanner === 'string') {
+          return 1; // 如果是一个字符串，则认为只有一个
+        }
+      }
+      return 0;
+    }
+  }
+};
+</script>