字典类型列表新增抽屉效果详细信息

RuoYi

2026-03-21 af2d446a5f8d0f0b18ad30ab9eca0e03cead9b8b

 ruoyi-ui/src/views/system/dict/data.vue

@@ -1,8 +1,8 @@
<template>

  <div class="app-container">

    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">

    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">

      <el-form-item label="字典名称" prop="dictType">

        <el-select v-model="queryParams.dictType" size="small">

        <el-select v-model="queryParams.dictType">

          <el-option

            v-for="item in typeOptions"

            :key="item.dictId"

@@ -16,12 +16,11 @@
          v-model="queryParams.dictLabel"

          placeholder="请输入字典标签"

          clearable

          size="small"

          @keyup.enter.native="handleQuery"

        />

      </el-form-item>

      <el-form-item label="状态" prop="status">

        <el-select v-model="queryParams.status" placeholder="数据状态" clearable size="small">

        <el-select v-model="queryParams.status" placeholder="数据状态" clearable>

          <el-option

            v-for="dict in dict.type.sys_normal_disable"

            :key="dict.value"

@@ -96,8 +95,8 @@
      <el-table-column label="字典编码" align="center" prop="dictCode" />

      <el-table-column label="字典标签" align="center" prop="dictLabel">

        <template slot-scope="scope">

          <span v-if="scope.row.listClass == '' || scope.row.listClass == 'default'">{{scope.row.dictLabel}}</span>

          <el-tag v-else :type="scope.row.listClass == 'primary' ? '' : scope.row.listClass">{{scope.row.dictLabel}}</el-tag>

          <span v-if="(scope.row.listClass == '' || scope.row.listClass == 'default') && (scope.row.cssClass == '' || scope.row.cssClass == null)">{{ scope.row.dictLabel }}</span>

          <el-tag v-else :type="scope.row.listClass == 'primary' ? '' : scope.row.listClass" :class="scope.row.cssClass">{{ scope.row.dictLabel }}</el-tag>

        </template>

      </el-table-column>

      <el-table-column label="字典键值" align="center" prop="dictValue" />

@@ -164,7 +163,7 @@
            <el-option

              v-for="item in listClassOptions"

              :key="item.value"

              :label="item.label"

              :label="item.label + '(' + item.value + ')'"

              :value="item.value"

            ></el-option>

          </el-select>

@@ -191,8 +190,8 @@
</template>



<script>

import { listData, getData, delData, addData, updateData } from "@/api/system/dict/data";

import { listType, getType } from "@/api/system/dict/type";

import { listData, getData, delData, addData, updateData } from "@/api/system/dict/data"

import { optionselect as getDictOptionselect, getType } from "@/api/system/dict/type"



export default {

  name: "Data",

@@ -252,8 +251,8 @@
      queryParams: {

        pageNum: 1,

        pageSize: 10,

        dictName: undefined,

        dictType: undefined,

        dictLabel: undefined,

        status: undefined

      },

      // 表单参数

@@ -270,41 +269,41 @@
          { required: true, message: "数据顺序不能为空", trigger: "blur" }

        ]

      }

    };

    }

  },

  created() {

    const dictId = this.$route.params && this.$route.params.dictId;

    this.getType(dictId);

    this.getTypeList();

    const dictId = this.$route.params && this.$route.params.dictId

    this.getType(dictId)

    this.getTypeList()

  },

  methods: {

    /** 查询字典类型详细 */

    getType(dictId) {

      getType(dictId).then(response => {

        this.queryParams.dictType = response.data.dictType;

        this.defaultDictType = response.data.dictType;

        this.getList();

      });

        this.queryParams.dictType = response.data.dictType

        this.defaultDictType = response.data.dictType

        this.getList()

      })

    },

    /** 查询字典类型列表 */

    getTypeList() {

      listType().then(response => {

        this.typeOptions = response.rows;

      });

      getDictOptionselect().then(response => {

        this.typeOptions = response.data

      })

    },

    /** 查询字典数据列表 */

    getList() {

      this.loading = true;

      this.loading = true

      listData(this.queryParams).then(response => {

        this.dataList = response.rows;

        this.total = response.total;

        this.loading = false;

      });

        this.dataList = response.rows

        this.total = response.total

        this.loading = false

      })

    },

    // 取消按钮

    cancel() {

      this.open = false;

      this.reset();

      this.open = false

      this.reset()

    },

    // 表单重置

    reset() {

@@ -317,31 +316,31 @@
        dictSort: 0,

        status: "0",

        remark: undefined

      };

      this.resetForm("form");

      }

      this.resetForm("form")

    },

    /** 搜索按钮操作 */

    handleQuery() {

      this.queryParams.pageNum = 1;

      this.getList();

      this.queryParams.pageNum = 1

      this.getList()

    },

    /** 返回按钮操作 */

    handleClose() {

      const obj = { path: "/system/dict" };

      this.$tab.closeOpenPage(obj);

      const obj = { path: "/system/dict" }

      this.$tab.closeOpenPage(obj)

    },

    /** 重置按钮操作 */

    resetQuery() {

      this.resetForm("queryForm");

      this.queryParams.dictType = this.defaultDictType;

      this.handleQuery();

      this.resetForm("queryForm")

      this.queryParams.dictType = this.defaultDictType

      this.handleQuery()

    },

    /** 新增按钮操作 */

    handleAdd() {

      this.reset();

      this.open = true;

      this.title = "添加字典数据";

      this.form.dictType = this.queryParams.dictType;

      this.reset()

      this.open = true

      this.title = "添加字典数据"

      this.form.dictType = this.queryParams.dictType

    },

    // 多选框选中数据

    handleSelectionChange(selection) {

@@ -351,43 +350,46 @@
    },

    /** 修改按钮操作 */

    handleUpdate(row) {

      this.reset();

      this.reset()

      const dictCode = row.dictCode || this.ids

      getData(dictCode).then(response => {

        this.form = response.data;

        this.open = true;

        this.title = "修改字典数据";

      });

        this.form = response.data

        this.open = true

        this.title = "修改字典数据"

      })

    },

    /** 提交按钮 */

    submitForm: function() {

      this.$refs["form"].validate(valid => {

        if (valid) {

          if (this.form.dictCode != undefined) {

            updateData(this.form).then(response => {

              this.$modal.msgSuccess("修改成功");

              this.open = false;

              this.getList();

            });

            updateData(this.form).then(() => {

              this.$store.dispatch('dict/removeDict', this.queryParams.dictType)

              this.$modal.msgSuccess("修改成功")

              this.open = false

              this.getList()

            })

          } else {

            addData(this.form).then(response => {

              this.$modal.msgSuccess("新增成功");

              this.open = false;

              this.getList();

            });

            addData(this.form).then(() => {

              this.$store.dispatch('dict/removeDict', this.queryParams.dictType)

              this.$modal.msgSuccess("新增成功")

              this.open = false

              this.getList()

            })

          }

        }

      });

      })

    },

    /** 删除按钮操作 */

    handleDelete(row) {

      const dictCodes = row.dictCode || this.ids;

      const dictCodes = row.dictCode || this.ids

      this.$modal.confirm('是否确认删除字典编码为"' + dictCodes + '"的数据项？').then(function() {

        return delData(dictCodes);

        return delData(dictCodes)

      }).then(() => {

        this.getList();

        this.$modal.msgSuccess("删除成功");

      }).catch(() => {});

        this.getList()

        this.$modal.msgSuccess("删除成功")

        this.$store.dispatch('dict/removeDict', this.queryParams.dictType)

      }).catch(() => {})

    },

    /** 导出按钮操作 */

    handleExport() {

@@ -396,5 +398,5 @@
      }, `data_${new Date().getTime()}.xlsx`)

    }

  }

};

}

</script>