A consulta front-end vue3 usa vários itens de dicionário e interage com o plano de fundo

Índice

1. Uso front-end

1. A interface front-end vue3 usa dictManege.ts

2. Onde a interface é usada na recepção

3. Os outros aspectos da exibição front-end são os mesmos. Aqui usamos o idTypeList definido no estado, atribuímos um valor acima e o usamos aqui. 

2. Uso de back-end

4. Implementação da interface do controlador de back-end, que usa o dicionário String[] para receber e colocar em

String ... códigos em

5. Classe de implementação ServiceImpl usa cache de anotação

6. Pode ser visto na ferramenta Redis Desktop Manage 

3. O backend feign chama essa interface

8. Adicione também a classe DictReq no serviço trans (basta copiá-la)

9. Use-o na classe de implementação específica para a classe fingida

1. Uso front-end

1. A interface front-end vue3 usa dictManege.ts

import request from '@/utils/request'

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

2. Onde a interface é usada na recepção

    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. Os outros aspectos da exibição front-end são os mesmos. Aqui usamos o idTypeList definido no estado, atribuímos um valor acima e o usamos aqui. 

      <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>

2. Uso de back-end

4. Implementação da interface do controlador de back-end, que usa o dicionário String[] para receber e colocar em

String ... códigos em

@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. Classe de implementação ServiceImpl usa cache de anotação

@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. Pode ser visto na ferramenta Redis Desktop Manage 

3. O backend feign chama essa interface

7. Implemente a interface feign no serviço trans e chame a interface queryByCodes no serviço do usuário.

@FeignClient(name = "user-service")//提供者的应用名称
@Component
public interface FeignUserService {

    @RequestMapping(value = "/dict/queryByCodes", method = RequestMethod.POST)
    R<Map<String,List<Dict>>> getDictByCodes(DictReq dictReq);
}

8. Adicione também a classe DictReq no serviço trans (basta copiá-la)

9. Use-o na classe de implementação específica para a classe fingida

    @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);
    }