vue3前台查询使用多个字典项并且和后台交互

梦里梦外; 2023-10-10 20:56 6阅读 0赞

**目录**

一、前端使用

1.前台vue3接口使用 dictManege.ts

2.前台使用该接口地方

3.前台反显地方 其他几个都一样，这里使用在state中定义的idTypeList,在上面赋值，在这里使用

二、后端使用

4.后端controller接口实现 其中使用字典String\[\]来接收 放入到

String ... codes中

5.ServiceImpl实现类 其中使用了注解缓存

6.在Redis Desktop Manage工具中可以看得到

三、后端feign调用该接口

8.在trans服务中也添加DictReq类 （copy过来就行）

9.具体实现类中使用给feign类

## 一、前端使用 ##

### 1.前台vue3接口使用 dictManege.ts ###

import request from '@/utils/request'
    
    export function getDicListByCodes(query:any) {
      return request({
        url: './user-service/dict/queryByCodes',
        method: 'post',
        data: query
      });
    };

### 2.前台使用该接口地方 ###

### 3.前台反显地方 其他几个都一样，这里使用在state中定义的idTypeList,在上面赋值，在这里使用 ###

<el-form-item label="证件类型">
            <el-select v-model="form.idType">
              <el-option
                v-for="item in idTypeList"
                :key="item.dictKey"
                :label="item.dictValue"
                :value="item.dictKey">
              </el-option>
            </el-select>
          </el-form-item>

## 二、后端使用 ##

### 4.后端controller接口实现 其中使用字典String\[\]来接收 放入到 ###

### String ... codes中 ###

@Slf4j
    @RestController
    @RequestMapping("/dict")
    @Api(value = "字典", tags = "字典")
    public class DictController extends BaseController {
    
        @Autowired
        private DictService dictService;
       
        @PostMapping("/queryByCodes")
        @ApiOperation(value = "根据多个code获取字典数据集")
        public R<Map<String,List<Dict>>> queryByCodes(@RequestBody DictReq dictReq){
            try {
                if (StrUtil.isBlankIfStr(dictReq.getCodes()) || dictReq.getCodes().length==0) {
                    return R.fail(Constant.ERROR_PARAM_CODE, "code不能为空");
                }
    
                // 保存成员信息到数据库
                Map<String,List<Dict>> result = dictService.queryByCodes(dictReq.getCodes());
                return R.data(0, result, null);
            } catch (Exception ex) {
                System.out.println(ex.getMessage());
                ex.printStackTrace();
                return R.fail(ResultCode.INTERNAL_SERVER_ERROR.getCode(), ResultCode.INTERNAL_SERVER_ERROR.getMessage());
            }
        }
    
    }

import com.baomidou.mybatisplus.annotation.TableField;
    import io.swagger.annotations.ApiModelProperty;
    import lombok.Data;
    
    
    @Data
    public class DictReq {
        @TableField(exist = false)
        @ApiModelProperty(value = "多个code")
        private String[] codes;
    
        public DictReq(String[] codes) {
            this.codes = codes;
        }
    
        public DictReq(){}
    }

public interface DictService extends IService<Dict> {
    
        Map<String,List<Dict>> queryByCodes(String ... codes);
    }

### 5.ServiceImpl实现类 其中使用了注解缓存 ###

@Service
    @CacheConfig(cacheNames = "dict") //key键会添加dict::
    public class DictServiceImpl extends ServiceImpl<DictMapper, Dict> implements DictService {
    
        @Override
        @Cacheable(value = "dict", key = "#codes")
        public Map<String, List<Dict>> queryByCodes(String... codes) {
            Map<String, List<Dict>> result = new HashMap<>();
    
            for(String code : codes){
                result.put(code,this.getByCode(code));
            }
    
            return result;
        }
    
        // @Override
        @Cacheable(value = "dict", key = "#code")
        public List<Dict> getByCode(String code) {
            QueryWrapper<Dict> queryWrapper = new QueryWrapper<>();
            queryWrapper.lambda().eq(Dict::getCode, code);
            queryWrapper.lambda().ne(Dict::getParentId, 0);
            queryWrapper.orderByAsc("sort"); //排序
            return this.list(queryWrapper);
        }
    
    }

### 6.在Redis Desktop Manage工具中可以看得到 ###

![3601873e37794b40b8ce6723c6270390.png][]

## 三、后端feign调用该接口 ##

7.在trans服务实现feign接口调用user服务中的queryByCodes接口

@FeignClient(name = "user-service")//提供者的应用名称
    @Component
    public interface FeignUserService {
    
        @RequestMapping(value = "/dict/queryByCodes", method = RequestMethod.POST)
        R<Map<String,List<Dict>>> getDictByCodes(DictReq dictReq);
    }

### 8.在trans服务中也添加DictReq类 （copy过来就行） ###

### 9.具体实现类中使用给feign类 ###

@Autowired
        private FeignUserService feignUserService;
    
     
        @Override
        public IPage<PatientDto> patientList(IPage<PatientDto> page, PatientReq req) {
           
            List<PatientDto> patientDto = baseMapper.patientList(page,req);
    
            Map<String,List<Dict>> resultMap =  feignUserService.getDictByCodes(new DictReq(new String[]{"sex","copd_level","is_close"})).getData();
    
            patientDto.forEach(dto->{
                dto.setAge(StrUtils.getAgeByBirthYear(dto.getAge()) + "");
                dto.setSex(resultMap.get("sex").stream().collect(Collectors.toMap(Dict::getDictKey , Dict::getDictValue)).get(dto.getSex()));
                dto.setCopdLevel(resultMap.get("copd_level").stream().collect(Collectors.toMap(Dict::getDictKey , Dict::getDictValue)).get(dto.getCopdLevel()));
                dto.setIsClose(resultMap.get("is_close").stream().collect(Collectors.toMap(Dict::getDictKey , Dict::getDictValue)).get(dto.getIsClose()));
            });
            return page.setRecords(patientDto);
        }

[3601873e37794b40b8ce6723c6270390.png]: https://img-blog.csdnimg.cn/3601873e37794b40b8ce6723c6270390.png