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

目录

一、前端使用

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.前台使用该接口地方

    const showEdit = async (row) => {
      //初始化修改的字典
      const {
        retCode, success, data, msg
      } = await getDicListByCodes({
        codes: ["sex","id_type","copd_level"]
      })
      if (retCode === 0) {
        state.sexList = data.sex;
        state.idTypeList = data.id_type;
        state.copdLevelList = data.copd_level;
      }
}

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工具中可以看得到 

三、后端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);
    }