添加角色

chuanyi-admin/src/api/system/role.js

@@ -0,0 +1,53 @@
+import request from '@/utils/request'
+
+/**
+ * 查询角色列表
+ * @param query
+ * @returns {AxiosPromise}
+ */
+export function getRoleList(query) {
+  return request({
+    url: '/role/getRoleListByPage',
+    method: 'get',
+    params: query
+  })
+}
+
+/**
+ * 添加角色信息
+ * @param data
+ * @returns {AxiosPromise}
+ */
+export function addRoleInfo(data) {
+  return request({
+    url: '/role/addRole',
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * 修改角色信息
+ * @param data
+ * @returns {AxiosPromise}
+ */
+export function updateRoleInfo(data) {
+  return request({
+    url: '/role/updateRole',
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * 根据角色ID信息删除角色
+ * @param data
+ * @returns {AxiosPromise}
+ */
+export function delRoleById(data) {
+  return request({
+    url: '/user/deleteRoleById',
+    method: 'post',
+    data
+  })
+}

chuanyi-admin/src/router/index.js

@@ -77,6 +77,19 @@ export const constantRoutes = [
         }
       }
     ]
+  },
+  {
+    path: '/system/role/user-auth',
+    component: Layout,
+    hidden: true,
+    children: [
+      {
+        path: 'role/:userId(\\d+)',
+        component: () => import('@/views/system/role/user-auth'),
+        name: 'AuthRole',
+        meta: { title: '分配角色', activeMenu: '/system/role' }
+      }
+    ]
   }
 ]
 

chuanyi-admin/src/store/getters.js

@@ -8,6 +8,8 @@ const getters = {
   avatar: state => state.user.avatar,
   name: state => state.user.name,
   uid: state => state.user.uid,
+  userStatus: state => state.user.userStatus,
+  userType: state => state.user.userType,
   introduction: state => state.user.introduction,
   roles: state => state.user.roles,
   permission_routes: state => state.permission.routes,

chuanyi-admin/src/store/modules/user.js

@@ -1,5 +1,5 @@
 import { getUserInfo, login, logout } from '@/api/user'
-import {getToken, setToken, getUid, getUsername, setUid, setUsername, removeAll, setPubKey} from '@/utils/auth'
+import { getToken, setToken, getUid, getUsername, setUid, setUsername, removeAll, setPubKey } from '@/utils/auth'
 import { encrypt } from '@/utils/jsencrypt'
 import router, { resetRouter } from '@/router'
 import errorCode from '@/utils/errorCode'
@@ -10,7 +10,23 @@ const state = {
   name: getUsername(),
   avatar: '',
   introduction: '',
-  roles: []
+  roles: [],
+  // 用户状态
+  userStatus: [{
+    'name': '正常',
+    'value': 0
+  }, {
+    'name': '锁定',
+    'value': 1
+  }],
+  // 用户类型
+  userType: [{
+    'name': '客户端用户',
+    'value': 0
+  }, {
+    'name': '管理端用户',
+    'value': 1
+  }]
 }
 
 const mutations = {

chuanyi-admin/src/views/system/role/index.vue

@@ -1,15 +1,332 @@
 <template>
   <div class="sy-content">
-    Role
+    <el-row>
+      <el-col>
+        <!-- 搜索信息 -->
+        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+          <el-form-item label="角色名称" prop="roleName">
+            <el-input
+              v-model="queryParams.roleName"
+              placeholder="请输入角色名称"
+              clearable
+              style="width: 150px"
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="权限字符" prop="roleCode">
+            <el-input
+              v-model="queryParams.roleCode"
+              placeholder="请输入权限字符"
+              clearable
+              style="width: 150px"
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+        <!-- 操作按钮 -->
+        <el-row>
+          <el-col :span="1.5">
+            <el-button
+              type="primary"
+              plain
+              icon="el-icon-plus"
+              size="mini"
+              @click="handleAdd"
+            >新增</el-button>
+          </el-col>
+          <el-col :span="1.5" style="margin-left: 15px;">
+            <el-button
+              type="danger"
+              plain
+              icon="el-icon-delete"
+              size="mini"
+              :disabled="multiple"
+              @click="handleDelete"
+            >删除</el-button>
+          </el-col>
+        </el-row>
+        <!-- 表格数据信息 -->
+        <el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="50" align="center"/>
+          <el-table-column label="角色编号" align="center" key="id" prop="id" v-if="false"/>
+          <el-table-column label="角色名称" align="center" key="roleName" prop="roleName" :show-overflow-tooltip="true"/>
+          <el-table-column label="权限字符" align="center" key="roleCode" prop="roleCode" :show-overflow-tooltip="true"/>
+          <el-table-column
+            label="操作"
+            align="center"
+            width="350"
+            class-name="small-padding fixed-width"
+          >
+            <template slot-scope="scope" v-if="scope.row.userId !== 1">
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-edit"
+                @click="handleUpdate(scope.row)"
+              >修改</el-button>
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-delete"
+                @click="handleDelete(scope.row)"
+              >删除</el-button>
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-user"
+                @click="handleAuthUser(scope.row)"
+              >分配用户</el-button>
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-menu"
+                @click="handleAuthMenu(scope.row)"
+              >分配菜单</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <!-- 分页信息 -->
+        <pagination
+          v-show="total > 0"
+          :total="total"
+          :page.sync="queryParams.page"
+          :limit.sync="queryParams.limit"
+          align="right"
+          @pagination="getRoleList"
+        />
+      </el-col>
+    </el-row>
+
+    <!-- 添加或修改对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-row>
+          <el-col>
+            <el-form-item label="角色名称" prop="roleName">
+              <el-input v-model="form.roleName" placeholder="请输入角色名称" maxlength="20" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <el-form-item label="权限字符" prop="roleCode">
+              <el-input v-model="form.roleCode" placeholder="请输入权限字符" maxlength="20" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import { getRoleList, addRoleInfo, updateRoleInfo, delRoleById } from '@/api/system/role'
+
 export default {
-  name: 'Index'
+  name: 'Index',
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 非多个禁用
+      multiple: true,
+      // 查询参数
+      queryParams: {
+        page: 1,
+        limit: 10,
+        roleName: undefined,
+        roleCode: undefined
+      },
+      // 总条数
+      total: 0,
+      // 用户表格数据
+      roleList: null,
+      // 弹出层标题
+      title: '',
+      // 是否显示弹出层
+      open: false,
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        roleName: [
+          { required: true, message: '角色名称不能为空', trigger: 'blur' },
+          { min: 2, max: 20, message: '角色名称长度必须介于 2 和 20 之间', trigger: 'blur' }
+        ],
+        roleCode: [
+          { required: true, message: '权限字符不能为空', trigger: 'blur' },
+          { min: 5, max: 20, message: '权限字符长度必须介于 5 和 20 之间', trigger: 'blur' },
+          { validator: this.testKey }
+        ]
+      }
+    }
+  },
+  created() {
+    this.getRoleList()
+  },
+  methods: {
+    /** 表单验证判断只能输入数字和字母 */
+    testKey(rule, value, callback) {
+      const key = /^[\a-\z\A-\Z0-9]+$/
+      if (!key.test(value)) {
+        callback(new Error('只能输入数字和字母'))
+      } else {
+        callback()
+      }
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.page = 1
+      this.getRoleList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.$refs['queryForm'].resetFields()
+      this.handleQuery()
+    },
+    /** 多选框选中数据 */
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.userId)
+      this.multiple = !selection.length
+    },
+    /** 查询用户列表 */
+    getRoleList() {
+      this.loading = true
+      getRoleList(this.queryParams).then(response => {
+        const data = response.data
+        this.roleList = data.roleList
+        this.total = data.count
+        this.loading = false
+      })
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const roleId = row.id
+      if (!roleId) {
+        const roleIdList = this.ids
+        if (!roleIdList || roleIdList.length === 0) {
+          this.$message({
+            message: '请选择您要删除的角色',
+            type: 'warning'
+          })
+          return
+        }
+        this.$confirm('您确定要删除选中的角色吗？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          for (const i in roleIdList) {
+            const id = roleIdList[i]
+            delRoleById({
+              'roleId': id
+            }).then(response => {
+              this.getRoleList()
+            })
+          }
+        }).catch(() => {
+        })
+        return
+      }
+      this.$confirm('您确定要删除角色【' + row.userName + '】吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        delRoleById({
+          roleId
+        }).then(response => {
+          this.$message({
+            message: '删除成功',
+            type: 'success'
+          })
+          this.getRoleList()
+        })
+      }).catch(() => {
+      })
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset()
+      this.form = {
+        id: row.id,
+        roleName: row.roleName,
+        roleCode: row.roleCode
+      }
+      this.open = true
+      this.title = '修改角色'
+    },
+    /** 分配角色人员 */
+    handleAuthUser(row) {
+      const roleId = row.id
+      console.log(row)
+      console.log('/system/role/user-auth/role/' + roleId)
+      this.$router.push('/system/role/user-auth/role/' + roleId)
+    },
+    /** 分配角色菜单 */
+    handleAuthMenu(row) {
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset()
+      this.open = true
+      this.title = '添加角色'
+    },
+    /** 表单提交 */
+    submitForm() {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          if (this.form.id !== undefined) {
+            updateRoleInfo(this.form).then(response => {
+              this.$message({
+                message: '修改成功',
+                type: 'success'
+              })
+              this.open = false
+              this.getRoleList()
+            })
+          } else {
+            addRoleInfo(this.form).then(response => {
+              this.$message({
+                message: '新增成功',
+                type: 'success'
+              })
+              this.open = false
+              this.getRoleList()
+            })
+          }
+        }
+      })
+    },
+    /** 表单重置 */
+    cancel() {
+      this.open = false
+      this.reset()
+    },
+    /** 表单重置 */
+    reset() {
+      this.form = {
+        id: undefined,
+        roleName: undefined,
+        roleCode: undefined
+      }
+      if (this.$refs['form']) {
+        this.$refs['form'].resetFields()
+      }
+    }
+  }
 }
 </script>
 
-<style scoped>
-
+<style rel="stylesheet/scss" lang="scss">
 </style>

chuanyi-admin/src/views/system/role/user-auth.vue

@@ -0,0 +1,182 @@
+<template>
+  <div class="app-container">
+     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
+      <el-form-item label="用户名称" prop="userName">
+        <el-input
+          v-model="queryParams.userName"
+          placeholder="请输入用户名称"
+          clearable
+          style="width: 240px"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="openSelectUser"
+        >添加用户</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-circle-close"
+          size="mini"
+          :disabled="multiple"
+          @click="cancelAuthUserAll"
+        >批量取消授权</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-close"
+          size="mini"
+          @click="handleClose"
+        >关闭</el-button>
+      </el-col>
+    </el-row>
+
+    <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="用户名称" prop="userName" :show-overflow-tooltip="true" />
+      <el-table-column label="用户状态" prop="state" :show-overflow-tooltip="true">
+        <template slot-scope="scope">
+          <span>{{ convertUserStatus(scope.row.state) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="用户类型" prop="userType" :show-overflow-tooltip="true">
+        <template slot-scope="scope">
+          <span>{{ convertUserType(scope.row.userType) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="最后登录时间" prop="lastLoginTime" width="160"/>
+      <el-table-column label="创建时间" prop="createTime" width="160"/>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-circle-close"
+            @click="cancelAuthUser(scope.row)"
+          >取消授权</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.page"
+      :limit.sync="queryParams.limit"
+      @pagination="getList"
+    />
+    <select-user ref="select" :roleId="queryParams.roleId" @ok="handleQuery" />
+  </div>
+</template>
+
+<script>
+import selectUser from './user-select'
+
+export default {
+  name: 'UserAuth',
+  components: { selectUser },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中用户组
+      userIds: [],
+      // 非多个禁用
+      multiple: true,
+      // 总条数
+      total: 0,
+      // 用户表格数据
+      userList: [],
+      // 用户状态
+      userStatus: this.$store.getters.userStatus,
+      // 用户类型
+      userType: this.$store.getters.userType,
+      // 查询参数
+      queryParams: {
+        page: 1,
+        limit: 10,
+        roleId: undefined,
+        userName: undefined
+      }
+    }
+  },
+  created() {
+    const roleId = this.$route.params && this.$route.params.roleId
+    if (roleId) {
+      this.queryParams.roleId = roleId
+      this.getList()
+    }
+  },
+  methods: {
+    /** 用户状态转换 */
+    convertUserStatus(val) {
+      let result = ''
+      this.userStatus.forEach((e) => {
+        if (e.value === val) {
+          result = e.name
+        }
+      })
+      return result
+    },
+    /** 用户类型转换 */
+    convertUserType(val) {
+      let result = ''
+      this.userType.forEach((e) => {
+        if (e.value === val) {
+          result = e.name
+        }
+      })
+      return result
+    },
+    /** 查询授权用户列表 */
+    getList() {
+    },
+    /** 返回按钮 */
+    handleClose() {
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.page = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      if (this.$refs['queryForm']) {
+        this.$refs['queryForm'].resetFields()
+      }
+      this.handleQuery()
+    },
+    /** 多选框选中数据 */
+    handleSelectionChange(selection) {
+      this.userIds = selection.map(item => item.userId)
+      this.multiple = !selection.length
+    },
+    /** 打开授权用户表弹窗 */
+    openSelectUser() {
+      this.$refs.select.show()
+    },
+    /** 取消授权按钮操作 */
+    cancelAuthUser(row) {
+    },
+    /** 批量取消授权按钮操作 */
+    cancelAuthUserAll(row) {
+    }
+  }
+}
+</script>

chuanyi-admin/src/views/system/role/user-select.vue

@@ -0,0 +1,145 @@
+<template>
+  <!-- 授权用户 -->
+  <el-dialog title="选择用户" :visible.sync="visible" width="800px" top="5vh" append-to-body>
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
+      <el-form-item label="用户名称" prop="userName">
+        <el-input
+          v-model="queryParams.userName"
+          placeholder="请输入用户名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <el-row>
+      <el-table @row-click="clickRow" ref="table" :data="userList" @selection-change="handleSelectionChange" height="260px">
+        <el-table-column type="selection" width="55"></el-table-column>
+        <el-table-column label="用户名称" prop="userName" :show-overflow-tooltip="true" />
+        <el-table-column label="用户状态" prop="state" :show-overflow-tooltip="true">
+          <template slot-scope="scope">
+            <span>{{ convertUserStatus(scope.row.state) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="用户类型" prop="userType" :show-overflow-tooltip="true">
+          <template slot-scope="scope">
+            <span>{{ convertUserType(scope.row.userType) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="最后登录时间" prop="lastLoginTime" width="160"/>
+        <el-table-column label="创建时间" prop="createTime" width="160"/>
+      </el-table>
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        :page.sync="queryParams.page"
+        :limit.sync="queryParams.limit"
+        @pagination="getList"
+      />
+    </el-row>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="handleSelectUser">确 定</el-button>
+      <el-button @click="visible = false">取 消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  props: {
+    // 角色编号
+    roleId: {
+      type: [Number, String]
+    }
+  },
+  data() {
+    return {
+      // 遮罩层
+      visible: false,
+      // 选中数组值
+      userIds: [],
+      // 总条数
+      total: 0,
+      // 未授权用户数据
+      userList: [],
+      // 用户状态
+      userStatus: this.$store.getters.userStatus,
+      // 用户类型
+      userType: this.$store.getters.userType,
+      // 查询参数
+      queryParams: {
+        page: 1,
+        limit: 10,
+        roleId: undefined,
+        userName: undefined
+      }
+    }
+  },
+  methods: {
+    /** 用户状态转换 */
+    convertUserStatus(val) {
+      let result = ''
+      this.userStatus.forEach((e) => {
+        if (e.value === val) {
+          result = e.name
+        }
+      })
+      return result
+    },
+    /** 用户类型转换 */
+    convertUserType(val) {
+      let result = ''
+      this.userType.forEach((e) => {
+        if (e.value === val) {
+          result = e.name
+        }
+      })
+      return result
+    },
+    /** 显示弹框 */
+    show() {
+      this.queryParams.roleId = this.roleId
+      this.getList()
+      this.visible = true
+    },
+    /** 行点击事件 */
+    clickRow(row) {
+      this.$refs.table.toggleRowSelection(row)
+    },
+    /** 多选框选中数据 */
+    handleSelectionChange(selection) {
+      this.userIds = selection.map(item => item.userId)
+    },
+    /** 查询用户列表 */
+    getList() {
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.page = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      if (this.$refs['queryForm']) {
+        this.$refs['queryForm'].resetFields()
+      }
+      this.handleQuery()
+    },
+    /** 选择授权用户操作 */
+    handleSelectUser() {
+      const roleId = this.queryParams.roleId
+      const userIds = this.userIds.join(',')
+      if (userIds === '') {
+        this.$message({
+          message: '请选择要分配的用户',
+          type: 'warning'
+        })
+        return
+      }
+    }
+  }
+}
+</script>

chuanyi-admin/src/views/system/user/index.vue

@@ -65,6 +65,7 @@
               plain
               icon="el-icon-delete"
               size="mini"
+              :disabled="multiple"
               @click="handleDelete"
             >删除</el-button>
           </el-col>
@@ -189,6 +190,8 @@ export default {
       loading: true,
       // 显示搜索条件
       showSearch: true,
+      // 非多个禁用
+      multiple: true,
       // 查询参数
       queryParams: {
         page: 1,
@@ -210,21 +213,9 @@ export default {
       // 管理员默认ID
       defaultAdminId: '1',
       // 用户状态
-      userStatus: [{
-        'name': '正常',
-        'value': 0
-      }, {
-        'name': '锁定',
-        'value': 1
-      }],
+      userStatus: this.$store.getters.userStatus,
       // 用户类型
-      userType: [{
-        'name': '客户端用户',
-        'value': 0
-      }, {
-        'name': '管理端用户',
-        'value': 1
-      }],
+      userType: this.$store.getters.userType,
       // 表单校验
       rules: {
         userName: [
@@ -255,6 +246,7 @@ export default {
     /** 多选框选中数据 */
     handleSelectionChange(selection) {
       this.ids = selection.map(item => item.userId)
+      this.multiple = !selection.length
     },
     /** 用户状态转换 */
     convertUserStatus(val) {