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

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

公众号

在这里插入图片描述
大家可以直接微信扫描上面的二维码关注我的公众号,然后回复【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页面,在我们的列表上引入我们的组件,新增的代码如下截图:
在这里插入图片描述
接着再修改我们的addDict的方法,修改完成以后如下所示:
在这里插入图片描述
这样我们就简单的完成了我们的列表页和新增页面的联动了,现在我们可以启动我们的项目,然后访问我们的数据字典列表页点击新增字典按钮,我们就会看到如下的页面,则说明我们已经完成了简单的集成了:
在这里插入图片描述

新增数据字典的编码完善

通过上面我们已经完成了我们的初步的编码了,接着我们改造我们的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>

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

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页