VUE+ElementUI+SpringBoot前后端交互实现动态字典列表

实战说明：动态从后端获取不同字段数据，并作为各个下拉列表中的可选数据，介绍了前端VUE界面如何引用字段，JS脚本如何循环获取不同字段，java代码中如何实现查询接口，mybatis中如何进行参数切换。

前端：VUE页面设计

 dictObject:{}，定义了空的字典参数列表，并调用getDictList(this.dictObject)函数，请求返回需要的字段值列表。

dictObject.schemaOptions引用post请求后返回的字段值列表。

 字典键值：dict.dictValue，一般是写入数据库的值。
 字典标签值：ict.dictLabel，一般是前端展示给用户的值。

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="实例ID" prop="instanceId">
        <el-input
          v-model="queryParams.instanceId"
          placeholder="请输入流程实例ID"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="模式名称" prop="modelName">
        <el-select v-model="queryParams.modelName" placeholder="模式分类" clearable size="small">
          <el-option
            v-for="dict in dictObject.schemaOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="智能分类" prop="assort">
        <el-select v-model="queryParams.assort" placeholder="智能分类" clearable size="small">
          <el-option
            v-for="dict in typeOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="功能字段" prop="functionalDirectiveEn">
        <el-select v-model="queryParams.functionalDirectiveEn" placeholder="功能字段" clearable size="small">
          <el-option
            v-for="dict in dictObject.functionOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="温度范围" prop="forecastRange">
        <el-select v-model="queryParams.forecastRange" placeholder="温度范围" clearable size="small">
          <el-option
            v-for="dict in dictObject.rangeOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="目标温度" prop="targetTemperature">
        <el-select v-model="queryParams.targetTemperature" placeholder="目标温度" clearable size="small">
          <el-option
            v-for="dict in dictObject.tempOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="cyan" 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>
</template>
<script>
import { getDictList} from "@/api/smart/smartschema";
export default {
  name: "SmartSchema",

  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 模式表格数据
      smartSchemaList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 高低端类型字典
      typeOptions: [],
      dictObject:{},
    
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        modelName: null,
        functionalDirectiveEn: null,
        functionalDirectiveCn: null,
        forecastRange: null,
        targetTemperature: null,
        instanceId: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        modelName: [
          { required: true, message: "模式名称不能为空", trigger: "blur" },
        ],
        functionalDirectiveEn: [
          { required: true, message: "功能字段不能为空", trigger: "blur" },
        ],
        functionalDirectiveCn: [
          { required: true, message: "功能名称不能为空", trigger: "blur" },
        ],
        forecastRange: [
          { required: true, message: "温度范围不能为空", trigger: "blur" },
        ],
        targetTemperature: [
          { required: true, message: "目标温度不能为空", trigger: "blur" },
        ],
      },
      requestMapping: '/smart/smartschema',
    };
  },
  created() {
    this.getList();
    //获取smart类型数据
    this.getDicts("biz_smart_type").then(response => {
      this.typeOptions = response.data;
    });
    getDictList(this.dictObject)
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true;
      listSmartSchema(this.queryParams).then(response => {
        this.smartSchemaList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    } 
  
};
</script>

上文引入的脚本函数：import { getDictList} from "@/api/smart/smartschema";

vue界面调用getDictList(this.dictObject)函数，JS中发起请求返回响应结果给到obj，即传递给了：obj。

import request from '@/utils/request'

//获取词典列表
export function getDictList(obj) {
  const dictList = {
    //温度范围数据
    rangeOptions: [],
    //目标温度值数据
    tempOptions: [],
    //模式分类数据
    schemaOptions: [],
    //功能字段数据
    functionOptions: [],
  }

  for (let k in dictList) {
    request({
      url: '/smart/smartSchema/getDictList',
      method: 'post',
      params: {dictType: `${k}`}
    }).then(response => {
      obj[k] = response.data
    });
  }
}

controller层的代码：

接受前端的post的请求，每次请求调用getDictList()函数返回字典列表。

/**
 * 查询当前所有名称
 */
@PostMapping(value = "/getDictList")
public AjaxResult getDictList(@RequestParam("dictType") String dictType) {
    List<BizDictData> data = bizSmartSchemaService.getDictList(dictType);
    if (StringUtils.isNull(data)) {
        data = new ArrayList<BizDictData>();
    }
    return AjaxResult.success(data);
}

service层代码：

List<BizDictData> getDictList(String dictType);

serviceImpl层代码：

为保障字典键值跟字典标签值一样，将库中返回结果同时封装为键值跟标签值。

@Override
public List<BizDictData> getDictList(String dictType) {
    List<BizDictData> templist = new ArrayList<BizDictData>();
    List<String> list = bizSmartSchemaMapper.getDictList(dictType);
    list.forEach(str -> {
        BizDictData temp = new BizDictData();
        temp.setDictValue(str);
        temp.setDictLabel(str);
        templist.add(temp);
    });
    return templist;    
}

mapper层代码：

List<String> getDictList(String dictType);

mapper.xml代码：

加if判断，区分需要查询哪个字段值。

<select id="getDictList" parameterType="String" resultType="java.lang.String">
    select distinct
    <if test="dictType == 'tempOptions'">
        target_temperature
    </if>
    <if test="dictType == 'rangeOptions'">
        forecast_range
    </if>
    <if test="dictType == 'schemaOptions'">
        model_name
    </if>
    <if test="dictType == 'functionOptions'">
        functional_directive_en
    </if>
    from conventional_bigdata.app_electricheater_zero_tb_adaptive_model_detail
</select>