2021SC@SDUSC

用户管理界面

本次分析下面界面：

这个页面和“权限管理”页面所用的模板组件大部分是相同的，但是页面本身是不同的。

分配角色弹框

<template slot="rowButton" slot-scope="props">
      <el-button
        type="text"
        @click="handleOpenDialogSetRoleForUser(props)"
        v-permission="'userManage:grantRole'"
        >分配角色</el-button
      >
      
    </template>

这个template的外层使用了我们自定义的aj-crud组件，这个组件我们在之前已经分析过了。这个template内首先添加了一个button，对应于下图：

按钮内部定义了点击方法handleOpenDialogSetRoleForUser，这个方法的源码如下：

扫描二维码关注公众号，回复： 13610304 查看本文章

  handleOpenDialogSetRoleForUser(props) {
      this.loginName = props.msg.loginName;
      this.dialogVisibleSetRoleForUser = true;
    }

点击后的页面如下：

可以看出来这个方法用于为用户分配角色，代码中的loginName和dialogVisibleSetRoleForUser都是data中的数据。

但是这个“为用户分配角色”界面的源码在哪里呢？

在src/views/accessUser/components/UserRole.vue下：

<template>
  <el-dialog class="tree_dialog" title="为用户分配角色" width="60%" :close-on-click-modal="false" center :visible.sync="visib" :before-close="closeDialog">
    <el-tree ref="roleTree" :data="treeData" show-checkbox node-key="id" default-expand-all :default-checked-keys="checkedKeys" />
    <div slot="footer" style="text-align: center">
      <el-button type="primary" plain @click="saveTreeData">保存</el-button>
      <el-button type="danger" plain @click="closeDialog">取消</el-button>
    </div>
  </el-dialog>
</template>

这些代码定义了这个弹出框的一系列属性，比如width为页面的百分之60等等。当我们点击“保存”后，执行如下方法：

async saveTreeData() {
      var params = {
        loginName: this.loginName,
        roleCodeList: this.$refs.roleTree.getCheckedKeys(true),
      }
      const { code } = await saveRoleTree(params)
      if (code != '200') return
      this.closeDialog()
    },

async是高级浏览器兼容的一种异步方法，此方法将url发送出去，并检测返回值是否为200，确保发送无误。

卡槽源码

接着看下面代码：

<template v-slot:pageSection>
      <UserRole
        :login-name="loginName"
        :visib="dialogVisibleSetRoleForUser"
        @handleClose="dialogVisibleSetRoleForUser = false"
      />
    </template>

这个是自定义的卡片插槽，作用是在编辑详情页面，出现在底部新卡片，图片效果如下：

代码中将用户名赋值给UserRole组件的对应属性。注意这个handleClose方法，它是将dialogVisibleSetRoleForUser变量置为false，这个变量在前面handleOpenDialogSetRoleForUser方法中已经置为true，这里又将其置为false，说明这个变量是用于控制这个卡片插槽是否展现。

当我们点击“新增”按钮是，会弹出来如下页面：

这个界面对应如下源码（仅仅展示部分代码）：

  columns: [
          {
            label: "",
            field: "id",
            primaryKey: true,  
            tableHide: true,  
            editHide: true  
          },
          {
            label: "登录名",
            placeholder: "",
            field: "loginName", 
            tableHide: true,  
            editField: "loginName",
            inputType: "input",
            rules: [
              { required: true, message: "登录名必填", trigger: "blur" },
              { min: 1, max: 64, message: "不超过64个字符", trigger: "blur" }
            ],
            disabled: false
          },

其中tableHide属性代表表格中是否显示，而editHide属性代表编辑弹框中是否显示。

另外在诸如“登录名”这些input框中，代码也给出了各种限制的rules，来规定这些值。

在图中我们可以看到最后一行的两个input框是不能编辑的，即他们的disabled属性是false，说明这两个值是自动检测的，但是我并没有在代码中找到自动检测的实现。

AJ-Report项目分析（9）

用户管理界面

分配角色弹框

卡槽源码

猜你喜欢