spring boot+iview 前后端分离架构之组织用户的组织的增删改的实现（十九）

柔情只为你懂 2021-12-15 23:43 215阅读 0赞

### spring boot 与 iview 前后端分离架构之组织用户的组织的增删改的实现（十九） ###

*  公众号
 *  组织架构的维护
 *   *  新增组织
     *  修改组织
     *  删除组织

# 公众号 #

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

# 组织架构的维护 #

本章将为大家讲解该如何实现对组织的增删改的实现，

## 新增组织 ##

打开十八章的工程，在user目录底下创建一个addOrg.vue，该文件实现了新增组织的功能，代码如下：

<template>
      <Modal v-model="show" title="新增组织" @on-ok="ok" :loading="loading" :mask-closable="false">
        <Form ref="orgForm" :model="orgForm" :rules="orgFormRule">
          <FormItem label="父组织架构名称')">
            <Input type="text" v-model="orgForm.parentOrgName" disabled/>
          </FormItem>
          <FormItem label="组织架构名称" prop="orgName">
            <Input type="text" :maxlength=50 v-model="orgForm.orgName" placeholder="请输入组织架构名称"/>
          </FormItem>
          <FormItem label="组织架构编码" prop="orgCode">
            <Input type="text" :maxlength=50 v-model="orgForm.orgCode" placeholder="请输入组织架构编码"/>
          </FormItem>
        </Form>
      </Modal>
    </template>
    <script>
    
      import {checkOrgNameAndCode, addOrg} from "../../../api/sys/org/org.api"
    
      export default {
        name: "addOrg",
        props: {
          value: {
            type: Boolean,
            default: false
          },
          parentOrgId: {
            type: Number
          },
          parentOrgName: {
            type: String
          }
        },
        data() {
          return {
            show: this.value,
            loading: true,
            orgForm: {
              orgName: '',
              orgCode: '',
              parentOrgId: 0,
              parentOrgName: '顶层组织架构'
            },
            orgFormRule: {
              orgName: [
                {required: true, message: '请输入组织架构名称', trigger: 'blur'},
                {type: 'string', max: 50, message: '请输入不超过50长度的组织架构名称', trigger: 'blur'},
                {
                  validator: this.checkOrgName({
                    response: 'exist'
                  }), trigger: 'blur'
                }
              ],
              orgCode: [
                {required: true, message: '请输入组织架构编码', trigger: 'blur'},
                {type: 'string', max: 50, message: '请输入不超过50长度的组织架构名称', trigger: 'blur'},
                {
                  validator: this.checkOrgCode({
                    response: 'exist'
                  }), trigger: 'blur'
                }
              ]
            }
          }
        },
        methods: {
          ok() {
            this.$refs['orgForm'].validate((valid) => {
              if (valid) {
                addOrg(this.orgForm).then(res => {
                  if (res.code == 200) {
                    this.$Message.success(res.msg);
                    // 提交表单数据成功则关闭当前的modal框
                    this.closeModal(false);
                    // 同时调用父页面的刷新页面的方法
                    this.$emit('reloadTree');
                  } else {
                    this.$Message.error(res.msg);
                  }
                })
              } else {
                this.$Message.error('表单验证不通过');
              }
              setTimeout(() => {
                this.loading = false;
                this.$nextTick(() => {
                  this.loading = true;
                });
              }, 1000);
            });
          },
          checkOrgCode() {
            let _this = this;
            return function (rule, value, callback) {
              let orgCode = value;
              checkOrgNameAndCode({orgCode: orgCode}).then(res => {
                if (res.obj.success == 'pass') {
                  callback();
                } else {
                  callback(new Error('组织编码已经存在'));
                }
              });
            };
          },
          checkOrgName() {
            let _this = this;
            return function (rule, value, callback) {
              let orgName = value;
              checkOrgNameAndCode({orgName: orgName}).then(res => {
                if (res.obj.success == 'pass') {
                  callback();
                } else {
                  callback(new Error('组织架构名称已经存在'));
                }
              });
            };
          },
          closeModal(val) {
            this.$emit('input', val);
          }
        },
        watch: {
          value(val) {
            this.show = val;
          },
          show(val) {
            //当重新显示增加数据的时候重置整个form表单
            if (val) {
              this.$refs['orgForm'].resetFields();
              this.orgForm.parentOrgId = this.parentOrgId;
              this.orgForm.parentOrgName = this.parentOrgName;
            } else {// 反之则关闭页面
              this.closeModal(val);
            }
          }
        }
      }
    </script>

接着打开我们的orgList.vue，添加以下部分的修改：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70]![在这里插入图片描述][20190703141016336.png]  
接着我们运行我们的程序，访问用户组织架构页面，点击页面上的增加按钮，大家会看到如下的页面则我们的新增组织就完成了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 1]

## 修改组织 ##

在我们的user目录新增一个updateOrg.vue的文件，改文件主要实现对组织的修改，代码如下：

<template>
      <Modal v-model="show" title="修改组织" @on-ok="ok" :loading="loading" :mask-closable="false">
        <Form ref="orgForm" :model="orgForm" :rules="orgFormRule">
          <FormItem label="父组织架构名称">
            <Input type="text" v-model="orgForm.parentOrgName" disabled/>
          </FormItem>
          <FormItem label="组织架构名称" prop="orgName">
            <Input type="text" :maxlength=50 v-model="orgForm.orgName" placeholder="请输入组织架构名称"/>
          </FormItem>
          <FormItem label="组织架构编码" prop="orgCode">
            <Input type="text" :maxlength=50 v-model="orgForm.orgCode" placeholder="请输入组织架构编码"/>
          </FormItem>
        </Form>
      </Modal>
    </template>
    <script>
    
      import {checkOrgNameAndCode, getOrgByOrgId, updateOrg} from "../../../api/sys/org/org.api"
    
      export default {
        name: "updateOrg",
        props: {
          value: {
            type: Boolean,
            default: false
          },
          orgId: {
            type: Number
          }
        },
        data() {
          return {
            show: this.value,
            loading: true,
            orgForm: {
              orgId:0,
              orgName: '',
              orgCode: '',
              parentOrgId: 0,
              parentOrgName: '顶层组织架构'
            },
            orgFormRule: {
              orgName: [
                {required: true, message: '请输入组织架构名称', trigger: 'blur'},
                {type: 'string', max: 50, message: '请输入不超过50长度的组织架构名称', trigger: 'blur'},
                {
                  validator: this.checkOrgName({
                    response: 'exist'
                  }), trigger: 'blur'
                }
              ],
              orgCode: [
                {required: true, message: '请输入组织架构编码', trigger: 'blur'},
                {type: 'string', max: 50, message: '请输入不超过50长度的组织架构名称', trigger: 'blur'},
                {
                  validator: this.checkOrgCode({
                    response: 'exist'
                  }), trigger: 'blur'
                }
              ]
            }
          }
        },
        methods: {
          ok() {
            this.$refs['orgForm'].validate((valid) => {
              if (valid) {
                updateOrg(this.orgForm).then(res => {
                  if (res.code == 200) {
                    this.$Message.success(res.msg);
                    // 提交表单数据成功则关闭当前的modal框
                    this.closeModal(false);
                    // 同时调用父页面的刷新页面的方法
                    this.$emit('reloadTree');
                  } else {
                    this.$Message.error(res.msg);
                  }
                })
              } else {
                this.$Message.error('表单验证不通过');
              }
              setTimeout(() => {
                this.loading = false;
                this.$nextTick(() => {
                  this.loading = true;
                });
              }, 1000);
            });
          },
          checkOrgCode() {
            let _this = this;
            return function (rule, value, callback) {
              let orgId = _this.orgId;
              let orgCode = value;
              checkOrgNameAndCode({orgCode: orgCode, orgId: orgId}).then(res => {
                if (res.obj.success == 'pass') {
                  callback();
                } else {
                  callback(new Error('组织编码已经存在'));
                }
              });
            };
          },
          checkOrgName() {
            let _this = this;
            return function (rule, value, callback) {
              let orgId = _this.orgId
              let orgName = value;
              checkOrgNameAndCode({orgName: orgName, orgId: orgId}).then(res => {
                if (res.obj.success == 'pass') {
                  callback();
                } else {
                  callback(new Error('组织架构名称已经存在'));
                }
              });
            };
          },
          closeModal(val) {
            this.$emit('input', val);
          }
        },
        watch: {
          value(val) {
            this.show = val;
          },
          show(val) {
            //当重新显示增加数据的时候重置整个form表单
            if (val) {
              this.$refs['orgForm'].resetFields();
              getOrgByOrgId({orgId: this.orgId}).then(res => {
                if (res.code == 200) {
                  this.orgForm = res.obj;
                } else {
                  this.$Message.error(res.msg);
                }
              });
            } else {// 反之则关闭页面
              this.closeModal(val);
            }
          }
        }
      }
    
    </script>

接着打开我们的orgList.vue，添加以下部分的修改：  
![在这里插入图片描述][20190703142623813.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 2]  
接着再次运行我们的程序，点击我们用户组织页面的修改我们会看到如下的页面则说明我们的修改组织已经完成了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 3]

## 删除组织 ##

删除组织的代码实际上我们在第十八的章的时候就已经实现了，这边直接告诉大家截图的位置：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 4]  
我们可以直接点击当前页面的删除按钮实现组织的删除。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 5]  
到此处我们就完成了本章的代码了。  
上一篇文章地址：[spring boot+iview 前后端分离架构之组织用户的布局的实现（十八）][spring boot_iview]  
下一篇文章地址：[spring boot+iview 前后端分离架构之组织用户的用户的增删改的实现（二十）][spring boot_iview 1]

[20191218155125364.jpg]: /images/20211215/8d23ee077388464e9c74058ece1471fc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190703140959227.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ==,size_16,color_FFFFFF,t_70
[20190703141016336.png]: /images/20211215/338817de4c8d4d17a4dc2ec83ea6a52a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 1]: /images/20211215/473adbf9aca64a69b9bc618af67e2cf8.png
[20190703142623813.png]: /images/20211215/8e06b06a1e7046f3a1a688674678d1d7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 2]: /images/20211215/44c8b02145384bcd9b7a861c54af40d7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 3]: /images/20211215/f0c308d0641d45029bd1c3d84c6dca29.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 4]: /images/20211215/dec6154b142c416c8564d7f712babede.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 5]: /images/20211215/3a049e152fa94665b906a02393f55448.png
[spring boot_iview]: https://blog.csdn.net/linzhefeng89/article/details/94432075
[spring boot_iview 1]: https://blog.csdn.net/linzhefeng89/article/details/94561601