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

今天药忘吃喽~ 2021-12-16 00:15 205阅读 0赞

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

*  公众号
 *  用户维护
 *   *  新增用户
     *  修改用户
     *  删除用户

# 公众号 #

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

# 用户维护 #

由于在用户模块使用到了省市区的下拉，因此需要在此处引入iview-area的依赖，因此我们在package.json中增加以下的依赖：  
![在这里插入图片描述][20190703165841694.png]  
接着我们在项目底下执行cnpm install 去下载这个依赖，同时改造我们的main.js将这个组件引入进来，改造的代码部分如下所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70]  
到此我们就引入了我们的省市区的插件了。

## 新增用户 ##

我们在user目录底下新建一个addUser.vue文件，该文件实现了新增用户，代码如下：

<template>
      <Modal v-model="show" title="新增用户" @on-ok="ok" :loading="loading" :mask-closable="false">
        <Form ref="userForm" :model="userForm" :rules="userFormRule">
          <FormItem label="用户账号" prop="loginAccount">
            <Input type="text" :maxlength=50 v-model="userForm.loginAccount"
                   placeholder="请输入用户账号"/>
          </FormItem>
          <FormItem label="用户名称" prop="nickName">
            <Input type="text" :maxlength=50 v-model="userForm.nickName" placeholder="请输入用户名称"/>
          </FormItem>
          <FormItem label="用户角色" prop="roles">
            <Select v-model="userForm.roles" multiple placeholder="请选择用户角色">
              <Option v-for="item in roleDate" :value="item.roleId" :key="item.roleId">{
       { item.roleName }}</Option>
            </Select>
          </FormItem>
          <FormItem label="所属组织" prop="orgIds"
                    placeholder="请选择所属组织">
            <Cascader v-model="userForm.orgIds" :data="orgData" change-on-select filterable></Cascader>
          </FormItem>
          <FormItem label="联系地址" prop="pca">
            <al-cascader v-model="userForm.pca" level="2" @on-change="pcaChange"></al-cascader>
          </FormItem>
          <FormItem label="详细地址" prop="address">
            <Input type="textarea" :rows="4" :maxlength=100 v-model="userForm.address" placeholder="请输入详细地址"/>
          </FormItem>
        </Form>
      </Modal>
    </template>
    <script>
      import {getOrgCascader} from "../../../api/sys/org/org.api"
      import {
        loadAllRole,
        createUser,
        checkLoginAccount
      } from "../../../api/sys/user/user.api"
    
      export default {
        name: "addOrg",
        props: {
          value: {
            type: Boolean,
            default: false
          }
        },
        data() {
          return {
            show: this.value,
            loading: true,
            userForm: {
              loginAccount: '',
              nickName: '',
              orgIds: [],
              roles: [],
              headImg: '',
              province: '',
              provinceName: '',
              city: '',
              cityName: '',
              area: '',
              areaName: '',
              address: '',
              pca: []
            },
            userFormRule: {
                loginAccount: [
                  {required: true, message: '请输入用户账号', trigger: 'blur'},
                  {type: 'string', max: 50, message: '请输入不超过50的用户账号', trigger: 'blur'},
                  {
                    validator: this.checkLoginAccount({
                      response: 'exist'
                    }), trigger: 'blur'
                  }
                ],
                nickName: [
                  {required: true, message: '请输入用户名称', trigger: 'blur'},
                  {type: 'string', max: 50, message: '请输入不超过50的用户名称', trigger: 'blur'}
                ],
                pca: [
                  {required: true, message: '请选择联系地址', trigger: 'change', type: "array"}
                ],
                address:[
                  {required: true, message: '请输入详细地址', trigger: 'blur'}
                ],
                roles: [
                  {required: true, message: '请选择用户角色', trigger: 'change', type: "array"}
                ],
                orgIds: [
                  {required: true, message: '请选择用户所属组织', trigger: 'change', type: "array"}
                ]
            },
            orgData: [],
            roleDate: []
          }
        },
        methods: {
          ok() {
            this.$refs['userForm'].validate((valid) => {
              if (valid) {
                createUser({
                  loginAccount: this.userForm.loginAccount,
                  nickName: this.userForm.nickName,
                  headImg: this.userForm.headImg,
                  orgIds: this.userForm.orgIds.join(','),
                  roles: this.userForm.roles.join(','),
                  province: this.userForm.province,
                  provinceName: this.userForm.provinceName,
                  city: this.userForm.city,
                  cityName: this.userForm.cityName,
                  area: this.userForm.area,
                  areaName: this.userForm.areaName,
                  address: this.userForm.address
                }).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);
            });
          },
          checkLoginAccount() {
            let _this = this;
            return function (rule, value, callback) {
              let loginAccount = value;
              checkLoginAccount({loginAccount: loginAccount}).then(res => {
                if (res.obj.success == 'pass') {
                  callback();
                } else {
                  callback(new Error('账号已经存在'));
                }
              });
            };
          },
          closeModal(val) {
            this.$emit('input', val);
          },
          pcaChange(data) {
            this.userForm.province = data[0].code
            this.userForm.provinceName = data[0].name
            this.userForm.city = data[1].code
            this.userForm.cityName = data[1].name
            this.userForm.area = data[2].code
            this.userForm.areaName = data[2].name
          }
        },
        watch: {
          value(val) {
            this.show = val;
          },
          show(val) {
            //当重新显示增加数据的时候重置整个form表单
            if (val) {
              this.$refs['userForm'].resetFields();
              getOrgCascader({}).then(res => {
                if (res.code == 200) {
                  this.orgData = res.obj;
                } else {
                  this.$Message.error(res.msg);
                }
              });
              loadAllRole({}).then(res => {
                if (res.code == 200) {
                  this.roleDate = res.obj;
                } else {
                  this.$Message.error(res.msg);
                }
              });
            } else {// 反之则关闭页面
              this.closeModal(val);
            }
          }
        }
      }
    
    </script>

最后我们将项目运行起来，访问我们的用户组织的页面，点击新增用户按钮，会看到如下页面则说明我们的新增用户就已经实现了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 1]

## 修改用户 ##

接着在user目录底下创建一个updateUser.vue，代码如下：

<template>
      <Modal v-model="show" title="修改用户" @on-ok="ok" :loading="loading" :mask-closable="false">
        <Form ref="userForm" :model="userForm" :rules="userFormRule">
          <FormItem label="用户账号">
            <Input type="text" :maxlength=50 v-model="userForm.loginAccount" disabled/>
          </FormItem>
          <FormItem label="用户名称" prop="nickName">
            <Input type="text" :maxlength=50 v-model="userForm.nickName" placeholder="请输入用户名称"/>
          </FormItem>
          <FormItem label="用户角色" prop="roles">
            <Select v-model="userForm.roles" multiple placeholder="请选择用户角色">
              <Option v-for="item in roleDate" :value="item.roleId" :key="item.roleId">{
       { item.roleName }}</Option>
            </Select>
          </FormItem>
          <FormItem label="所属组织" prop="orgIds" placeholder="请选择所属组织">
            <Cascader v-model="userForm.orgIds" :data="orgData" change-on-select filterable></Cascader>
          </FormItem>
          <FormItem label="联系地址" prop="pca">
            <al-cascader v-model="userForm.pca" level="2" @on-change="pcaChange"></al-cascader>
          </FormItem>
          <FormItem label="详细地址" prop="address">
            <Input type="textarea" :rows="4" :maxlength=100 v-model="userForm.address" placeholder="请输入详细地址"/>
          </FormItem>
        </Form>
      </Modal>
    </template>
    <script>
      import {getOrgCascader} from "../../../api/sys/org/org.api"
      import {
        loadAllRole,
        getUserByUserId,
        updateUser
      } from "../../../api/sys/user/user.api"
    
      export default {
        name: "updateOrg",
        props: {
          value: {
            type: Boolean,
            default: false
          },
          userId: {
            type: String
          }
        },
        data() {
          return {
            show: this.value,
            loading: true,
            userForm: {
              userId: '',
              loginAccount: '',
              nickName: '',
              orgIds: [],
              roles: [],
              headImg: '',
              province: '',
              provinceName: '',
              city: '',
              cityName: '',
              area: '',
              areaName: '',
              address: '',
              pca: []
            },
            userFormRule: {
              nickName: [
                {required: true, message: '请输入用户名称', trigger: 'blur'},
                {type: 'string', max: 50, message: '请输入不超过50的用户名称', trigger: 'blur'}
              ],
              pca: [
                {required: true, message: '请选择联系地址', trigger: 'change', type: "array"}
              ],
              address:[
                {required: true, message: '请输入详细地址', trigger: 'blur'}
              ],
              roles: [
                {required: true, message: '请选择用户角色', trigger: 'change', type: "array"}
              ],
              orgIds: [
                {required: true, message: '请选择用户所属组织', trigger: 'change', type: "array"}
              ]
            },
            orgData: [],
            roleDate: [],
            defaultList: []
          }
        },
        methods: {
          ok() {
            this.$refs['userForm'].validate((valid) => {
              if (valid) {
                updateUser({
                  userId: this.userForm.userId,
                  nickName: this.userForm.nickName,
                  headImg: this.userForm.headImg,
                  orgIds: this.userForm.orgIds.join(','),
                  roles: this.userForm.roles.join(','),
                  province: this.userForm.province,
                  provinceName: this.userForm.provinceName,
                  city: this.userForm.city,
                  cityName: this.userForm.cityName,
                  area: this.userForm.area,
                  areaName: this.userForm.areaName,
                  address: this.userForm.address
                }).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);
            });
          },
          closeModal(val) {
            this.$emit('input', val);
          },
          pcaChange(data) {
            this.userForm.province = data[0].code
            this.userForm.provinceName = data[0].name
            this.userForm.city = data[1].code
            this.userForm.cityName = data[1].name
            this.userForm.area = data[2].code
            this.userForm.areaName = data[2].name
          }
        },
        watch: {
          value(val) {
            this.show = val;
          },
          show(val) {
            //当重新显示增加数据的时候重置整个form表单
            if (val) {
              this.$refs['userForm'].resetFields();
              getOrgCascader({}).then(res => {
                if (res.code == 200) {
                  this.orgData = res.obj;
                } else {
                  this.$Message.error(res.msg);
                }
              });
              loadAllRole({}).then(res => {
                if (res.code == 200) {
                  this.roleDate = res.obj;
                } else {
                  this.$Message.error(res.msg);
                }
              });
              getUserByUserId({userId: this.userId}).then(res => {
                if (res.code == 200) {
                  res.obj.pca = [res.obj.province,res.obj.city,res.obj.area];
                  this.userForm = res.obj;
                } else {
                  this.$Message.error(res.msg);
                }
              });
            } else {// 反之则关闭页面
              this.closeModal(val);
            }
          }
        }
      }
    
    </script>

接着修改我们的orgList.vue，如下所示：  
![在这里插入图片描述][20190703172437935.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]  
到此为止我们就完成了用户的增删改的实现了。  
上一篇文章地址：[spring boot+iview 前后端分离架构之组织用户的组织的增删改的实现（十九）][spring boot_iview]  
下一篇文章地址：[spring boot+iview 前后端分离架构之首页面包屑的实现（二十一）][spring boot_iview 1]

[20191218155125364.jpg]: /images/20211215/35de49320f5c4458b288069f992a877b.png
[20190703165841694.png]: /images/20211215/597de134126e4efe8651a6b032ac1e30.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70]: /images/20211215/2655f8f107f0433ba80c00fbb9e540d8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 1]: /images/20211215/d1c638568fab4451adcb111000aa8eb7.png
[20190703172437935.png]: /images/20211215/76bde34748a7467d8b750260d5be92da.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 2]: /images/20211215/380e559177a34f6c970e237bc88f3226.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 3]: /images/20211215/b614f378b4134b08a326988f4e73cd84.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 4]: /images/20211215/29e69ba187484d598dbc64c39f69203b.png
[spring boot_iview]: https://blog.csdn.net/linzhefeng89/article/details/94559360
[spring boot_iview 1]: https://blog.csdn.net/linzhefeng89/article/details/94591267