spring boot+iview 前后端分离架构之数据字典新增字典的实现（十三）

喜欢ヅ旅行 2022-01-29 19:49 390阅读 0赞

### spring boot 与 iview 前后端分离架构之数据字典新增字典的实现（十三） ###

*  公众号
 *  新增数据字典的初步编码
 *  新增数据字典的编码完善

# 公众号 #

![在这里插入图片描述][20191218155125364.jpg]  
大家可以直接微信扫描上面的二维码关注我的公众号，然后回复【bg13】 里面就会给到源代码的下载地址同时会附上相应的视频教程，并定期在我的公众号上给大家推送相应的技术文章，欢迎大家关注我的公众号。

# 新增数据字典的初步编码 #

在我们上一章的基础上，我们在dict目录底下新增一个addDict.vue文件，代码如下：

<template>
      <Modal v-model="show" title="新增字典" @on-ok="ok" :loading="loading" :mask-closable="false">
        这是一个新增字典的页面
      </Modal>
    </template>
    <script>
    
      export default {
        name: "addDict",
        props: {
          value: {
            type: Boolean,
            default: false
          }
        },
        data() {
          return {
            show: this.value,
            loading: true
          }
        },
        methods: {
          ok() {
            console.log('点击了确定按钮')
          },
          closeModal(val) {
            this.$emit('input', val);
          }
        },
        watch: {
          value(val) {
            this.show = val;
          },
          show(val) {
            if (val) {
              console.log('当打开新增的页面的时候的一些操作')
            } else {// 反之则关闭页面
              this.closeModal(val);
            }
          }
        }
      }
    </script>

接着我们再改造dictList.vue页面，在我们的列表上引入我们的组件，新增的代码如下截图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70]  
接着再修改我们的addDict的方法，修改完成以后如下所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 1]  
这样我们就简单的完成了我们的列表页和新增页面的联动了，现在我们可以启动我们的项目，然后访问我们的数据字典列表页点击新增字典按钮，我们就会看到如下的页面，则说明我们已经完成了简单的集成了：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 2]

# 新增数据字典的编码完善 #

通过上面我们已经完成了我们的初步的编码了，接着我们改造我们的addDict.vue页面，完善好以后的代码如下：

<template>
      <Modal v-model="show" title="新增字典" @on-ok="ok" :loading="loading" :mask-closable="false">
        <Form ref="dictForm" :model="dictForm" :rules="dictFormRule">
          <FormItem label="字典类型" prop="dictType">
            <Input type="text" :maxlength=50 v-model="dictForm.dictType" placeholder="请输入字典类型"/>
          </FormItem>
          <FormItem label="字典编码" prop="dictCode">
            <Input type="text" :maxlength=50 v-model="dictForm.dictCode" placeholder="请输入字典编码"/>
          </FormItem>
          <FormItem label="字典文本" prop="dictText">
            <Input type="text" :maxlength=50 v-model="dictForm.dictText" placeholder="请输入字典文本"/>
          </FormItem>
          <FormItem label="字典数值" prop="dictValue">
            <Input type="text" :maxlength=50 v-model="dictForm.dictValue" placeholder="请输入字典数值"/>
          </FormItem>
        </Form>
      </Modal>
    </template>
    <script>
    
      import {addDict, checkTypeAndCode} from '../../../api/sys/dict/dict.api'
    
      export default {
        name: "addDict",
        props: {
          value: {
            type: Boolean,
            default: false
          }
        },
        data() {
          return {
            show: this.value,
            loading: true,
            dictForm: {
              dictType: '',
              dictCode: '',
              dictText: '',
              dictValue: ''
            },
            dictFormRule: {
              dictType: [
                {required: true, message: '字典类型不能为空', trigger: 'blur'},
                {type: 'string', max: 50, message: '字典类型不能大于50个字符', trigger: 'blur'}
              ],
              dictCode: [
                {required: true, message: '字典编码不能为空', trigger: 'blur'},
                {type: 'string', max: 50, message: '字典编码不能大于50个字符', trigger: 'blur'},
                {
                  validator: this.check({
                    response: 'exist'
                  }), trigger: 'blur'
                }
              ],
              dictText: [
                {required: true, message: '字典文本不能为空', trigger: 'blur'},
                {type: 'string', max: 50, message: '字典文本不能大于50个字符', trigger: 'blur'}
              ],
              dictValue: [
                {required: true, message: '字典数值不能为空', trigger: 'blur'},
                {type: 'string', max: 50, message: '字典数值不能大于50个字符', trigger: 'blur'}
              ]
            }
          }
        },
        methods: {
          ok() {
            this.$refs['dictForm'].validate((valid) => {
              if (valid) {
                addDict(this.dictForm).then(res => {
                  if (res.code == 200) {
                    this.$Message.success(res.msg);
                    // 提交表单数据成功则关闭当前的modal框
                    this.closeModal(false);
                    // 同时调用父页面的刷新页面的方法
                    this.$emit('handleSearch');
                  } else {
                    this.$Message.error( res.msg);
                  }
                })
              } else {
                this.$Message.error('新增数据字典失败');
              }
              setTimeout(() => {
                this.loading = false;
                this.$nextTick(() => {
                  this.loading = true;
                });
              }, 1000);
            });
          },
          check() {
            let _this = this;
            return function (rule, value, callback) {
              let dictType = _this.dictForm.dictType;
              let dictCode = value;
              checkTypeAndCode({dictType, dictCode}).then(res => {
                if (res.obj.success == 'pass') {
                  callback();
                } else {
                  callback(new Error(_this.$t('dict.checkFail')));
                }
              });
            };
          },
          closeModal(val) {
            this.$emit('input', val);
          }
        },
        watch: {
          value(val) {
            this.show = val;
          },
          show(val) {
            if (val) {
              this.$refs['dictForm'].resetFields();
            } else {// 反之则关闭页面
              this.closeModal(val);
            }
          }
        }
      }
    </script>

接着我们再次访问我们的字典列表页面，然后点击新增字典按钮，我们可以看到如下页面，同时点击确定按钮会做前端的验证，验证通过会提交数据：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 3]  
到此我们就完成了整个数据字典模块。  
上一篇文章地址：[spring boot+iview 前后端分离架构之数据字典模块布局和列表查询的实现（十二）][spring boot_iview]  
下一篇文章地址：[spring boot+iview 前后端分离架构之菜单管理首页的实现（十四）][spring boot_iview 1]

[20191218155125364.jpg]: /images/20220126/6ba71782a7514385b40bc263b2e21f67.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70]: /images/20220126/1bf1af14a024442cb10bc873592b87b1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 1]: /images/20220126/299a2330061d4f0e9cf59c39804f9fda.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 2]: /images/20220126/95307efd744d45678fbca7eda9fddcd2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 3]: /images/20220126/37b768eb1f7a4be0869330d4a1dc7bef.png
[spring boot_iview]: https://blog.csdn.net/linzhefeng89/article/details/90486385
[spring boot_iview 1]: https://blog.csdn.net/linzhefeng89/article/details/93871593