筆記: SpringBoot + VUE實現數據字典展示功能

最近一直在寫前端,寫得我賊難受,從能看懂一些基礎的代碼到整個前端框架擼下來鬼知道我經歷了啥(；´д｀)ゞ

項目中所用到的下拉菜單的值全部都是有數據庫中的數據字典表來提供的,顯示給用戶的是的清晰的意思,但是很多實體類中保存的數據都只是"1"或者"0"

下拉菜單部分渲染

<el-col :xs="12" :sm="12" :md="12" :lg="12">
  <el-form-item :label="$t('i18n.flag')">
    <el-select v-model="form.flag" :placeholder="$t('i18n.pleaseSelect')">
      <el-option
        v-for="(v, i) in dictionary.flag"
        :label="v.dicttypeName"
        <!-- 后端保存的是String類型,前端這邊手動轉換成字符型 -->
        :value="v.dicttypeCode + ''"
        :key="i"/>
    </el-select>
  </el-form-item>
</el-col>

在前端那邊查詢出來之后顯示的結果就是"1"或"0",這樣用戶體驗感會比較差,類似下圖,意思表達得不清不楚

之前的寫法是全部在前端頁面中寫死的固定值,但是當頁面越來越多,有時候需要修改就得一個一個頁面去翻,去改,感覺自己在划水的路上是越來越順暢了,這不是一條咸魚應該做的事情,所以這時候就該翻翻身了

后端返回的數據格式

public List<List<DatadicEntity>> getDictionary(String dictionarys) {
        if (StringUtils.isBlank(dictionarys)) {
            throw new CustomizeException(ExceptionEnum.PARAMETER);
        }
        List<List<DatadicEntity>> list = new ArrayList<>();

		// 遍歷所需字典類型
        for (String s : dictionarys.split(",")) {
            List<DatadicEntity> entityList = this.list(new QueryWrapper<DatadicEntity>().eq("dict_code", s));
            // 將值轉換成駝峰格式
            entityList.forEach(sysDatadicEntity -> sysDatadicEntity.setDictCode(DSQLUtils.lineToHump(sysDatadicEntity.getDictCode())));
            list.add(entityList);
        }
        return list;
    }

前端鈎子函數發起請求

export default {
    data() {
    	return {
			// 字典對象
			dictionary: {}
		}
    },
    mounted() {
		// 查詢FLAG,PUSH_TYPE兩種類型
		axios.get('/datadic?dictionarys=FLAG,PUSH_TYPE')
			.then(result => {
			  const dictionaries = result.data.dictionary
			  // 遍歷字典類型
			  for (const dictionary of dictionaries) {
				const temp = []
				// 獲取數據字典的值和顯示內容
				for (const d of dictionary) {
				  const t = {}
				  t.dicttypeCode = d.dicttypeCode
				  t.dicttypeName = d.dicttypeName
				  temp.push(t)
				}
				// 添加到字典對象中
				this.dictionary[dictionary[0].dictCode] = temp
			  }
			})
	}
}

前端這邊使用的是Element框架,列表采用el-table展示

 <el-table-column
   v-for="(k, index) in data"
   align="center"
   :prop="k"
   :label="$t('i18n.' + k)"
   :key="index"
   show-overflow-tooltip>
   <!-- 重新渲染數據 -->
   <template slot-scope="scope">
   		<!-- 判斷當前字段是否在查詢的數據字典對象中,不存在則渲染原數據 -->
     <span v-if="!dictionary[k]">{{scope.row[k]}}</span>
     <span v-else>
       <!-- 存着則遍歷該字典數據,獲取對應的內容 -->
       <div v-for="(v, i) in dictionary[k]" :key="i">
         <span v-if="scope.row[k] === v.dicttypeCode">{{v.dicttypeName}}</span>
       </div>
     </span>
   </template>
 </el-table-column>

最終效果

數據字典表

做個筆記記錄一下,希望大佬們指點指點,前后端都是自己瞎琢磨的,感覺代碼Bug好多

自己給自己增加點擊
https://blog.csdn.net/CJG753951/article/details/104566040