若依框架----字典表

原创已于 2023-02-09 08:24:41 修改 · 1.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #elementui #若依框架

于 2023-02-03 21:14:59 首次发布

若依框架专栏收录该内容

64 篇文章

订阅专栏

文章展示了在Vue2和Vue3中如何处理数据字典，用于下拉选择组件。在Vue2中，通过调用`getDicts`获取字典数据并赋值给选项。在Vue3中，使用`useDict`方法获取数据，并进行转换处理，然后在表格数据中应用这些字典值。同时，文章涉及到表单验证和数据提交时的数据转换操作。

vue2

   <el-form-item label="设备状态" prop="statustypeid">
        <el-select
          v-model="queryParams.statustypeid"
          placeholder="请选择设备状态"
          clearable
      
        >
          <el-option
            v-for="dict in Options.statustypeidOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="Number(dict.dictValue)"
          />
        </el-select>
      </el-form-item>
      
      
      
 mare_scoke 字典表名称
 created() {
    this.getList();
    // 满意度字典表转换
    this.getDicts("mare_scoke").then(response => {
      this.statForamt = response.data;
    });
    
      this.getDicts("deviceStatus").then(response => {
  this.Options.statustypeidOptions = response.data;
});
  },
  
  methods：{
      // 满意度字典表转换
satisFormat(row) {
  return this.selectDictLabel(this.statForamt, row.satisfied);
},

vue3

import { getDicts } from "@/api/system/dict/data";


const {  safe_level } = proxy.useDict("safe_level");
     
    let weaknessVal = {};
    let weaknessLab = {};
    ["safe_level"].map((item) => {
      getDicts(item)
        .then((res) => {
          res.data.map((itm) => {
            console.log("itm", itm);
            weaknessVal[item + itm.dictValue] = itm.dictLabel;
            weaknessLab[itm.dictLabel] = itm.dictValue;
          });
        })
        .then(() => {
          getList();
        });
    });
    
    /** 查询列表 */
    function getList() {
      loading.value = true;
      tableList.value = [{}];
      getDataAssetList(queryParams.value, currId.value).then((response) => {
        tableList.value = response.rows;
        tableList.value.map((item) => {
          item.confidentialType = weaknessVal["safe_level" + item.confidentialType];
        });
        total.value = response.total;
        loading.value = false;
        if (route.query.fileIden) {
          handleUpdate(tableList.value[0]);
        }
      });
    }
    
    
    function submitForm() {
      proxy.$refs["formRef"].validate((valid) => {
        if (valid) {
          form.value.confidentialType = weaknessLab[form.value.confidentialType];
          
          if (form.value.id != undefined) {
            // if (form.value.confidentialType == "敏感信息") {
            //   form.value.confidentialType = 1;
            // } else if (form.value.confidentialType == "核心商密") {
            //   form.value.confidentialType = 2;
            // } else if (form.value.confidentialType == "普通商密") {
            //   form.value.confidentialType = 3;
            // } else if (form.value.confidentialType == "内部") {
            //   form.value.confidentialType = 4;
            // } else if (form.value.confidentialType == "公开") {
            //   form.value.confidentialType = 5;
            // }
            updateDataAsset(form.value).then((response) => {
              if (response.code == 200) {
                proxy.$modal.msgSuccess("修改成功");
                open.value = false;
                getList();
              }
            });
          } else {