| | |
| | | <div class="app"> |
| | | <!--面包屑导航区域--> |
| | | <el-breadcrumb separator-class="el-icon-arrow-right"> |
| | | <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item> |
| | | <el-breadcrumb-item>权限管理</el-breadcrumb-item> |
| | | <el-breadcrumb-item>权限列表</el-breadcrumb-item> |
| | | <el-breadcrumb-item :to="{ path: '/home' }">{{$t('breadcrumb.home')}}</el-breadcrumb-item> |
| | | <el-breadcrumb-item>{{$t('breadcrumb.permissionManagement')}}</el-breadcrumb-item> |
| | | <el-breadcrumb-item>{{$t('breadcrumb.permissionList')}}</el-breadcrumb-item> |
| | | </el-breadcrumb> |
| | | <!--卡片视图区域--> |
| | | <el-card class="el-card"> |
| | | <el-row :gutter="20"> |
| | | <!--搜索与添加区域--> |
| | | <el-col :span="6"> |
| | | <el-input placeholder="请输入权限名称" v-model="queryInfo.name" clearable @clear="getPowerList()"> |
| | | <el-input :placeholder="$t('search.placeholder')" v-model="queryInfo.name" clearable @clear="getPowerList()"> |
| | | <el-button slot="append" icon="el-icon-search" @click="getPowerList()"></el-button> |
| | | </el-input> |
| | | </el-col> |
| | | <!--添加区域--> |
| | | <el-col :span="4"> |
| | | <el-button type="primary" @click="showAddDialog">添加权限</el-button> |
| | | <el-button type="primary" @click="showAddDialog">{{$t('button.addPermission')}}</el-button> |
| | | </el-col> |
| | | </el-row> |
| | | <!--权限列表区域--> |
| | | <el-table :data="powerList.records" border stripe> |
| | | <el-table-column label="#" type="index"></el-table-column> |
| | | <el-table-column label="角色" prop="role.name"></el-table-column> |
| | | <el-table-column label="权限描述" prop="permission.description"></el-table-column> |
| | | <el-table-column label="权限值" prop="permission.name"></el-table-column> |
| | | <el-table-column label="创建时间" prop="createTime"></el-table-column> |
| | | <el-table-column label="是否生效"> |
| | | <el-table-column :label="$t('table.role')" prop="role.name"></el-table-column> |
| | | <el-table-column :label="$t('table.permissionDescription')" prop="permission.description"></el-table-column> |
| | | <el-table-column :label="$t('table.permissionValue')" prop="permission.name"></el-table-column> |
| | | <el-table-column :label="$t('table.createTime')" prop="createTime"></el-table-column> |
| | | <el-table-column :label="$t('table.isActive')"> |
| | | <template slot-scope="scope"> |
| | | <el-switch :active-value=1 |
| | | :inactive-value=0 |
| | |
| | | </el-switch> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="操作"> |
| | | <el-table-column :label="$t('table.operation')"> |
| | | <template slot-scope="scope"> |
| | | <!--修改--> |
| | | <el-tooltip effect="dark" content="修改" placement="top" :enterable="false"> |
| | | <el-tooltip effect="dark" :content="$t('tooltip.edit')" placement="top" :enterable="false"> |
| | | <el-button type="primary" icon="el-icon-edit" size="mini" |
| | | @click="showEditDialog(scope.row)"></el-button> |
| | | </el-tooltip> |
| | | <!--删除--> |
| | | <el-tooltip effect="dark" content="删除" placement="top" :enterable="false"> |
| | | <el-tooltip effect="dark" :content="$t('tooltip.delete')" placement="top" :enterable="false"> |
| | | <el-button type="danger" icon="el-icon-delete" size="mini" |
| | | @click="removeById(scope.row)"></el-button> |
| | | </el-tooltip> |
| | |
| | | </el-card> |
| | | <!--添加权限的对话框--> |
| | | <el-dialog |
| | | title="添加权限" |
| | | :title="$t('dialog.addPermission')" |
| | | :visible.sync="addDialogVisible" |
| | | width="50%" |
| | | @close="addDialogClosed"> |
| | | <!--内容主体区域--> |
| | | <el-form :model="addPowerForm" :rules="powerRules" ref="powerRef" label-width="70px"> |
| | | <el-form-item label="角色" prop="roleId"> |
| | | <el-select filterable v-model="addPowerForm.roleId" placeholder="请选择"> |
| | | <el-form-item :label="$t('form.role')" prop="roleId"> |
| | | <el-select filterable v-model="addPowerForm.roleId" :placeholder="$t('form.select')"> |
| | | <el-option v-for="item in roleList" |
| | | :key="item.id" |
| | | :value="item.id" |
| | |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="权限" prop="permissionId"> |
| | | <el-select filterable v-model="addPowerForm.permissionId" placeholder="请选择"> |
| | | <el-form-item :label="$t('form.permission')" prop="permissionId"> |
| | | <el-select filterable v-model="addPowerForm.permissionId" :placeholder="$t('form.select')"> |
| | | <el-option v-for="item in permissionList" |
| | | :key="item.id" |
| | | :value="item.id" |
| | |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="是否生效" prop="state"> |
| | | <el-select v-model="addPowerForm.state" placeholder="请选择"> |
| | | <el-form-item :label="$t('form.isActive')" prop="state"> |
| | | <el-select v-model="addPowerForm.state" :placeholder="$t('form.select')"> |
| | | <el-option v-for="(item,index) in options" |
| | | :key="index" |
| | | :value="item.value" |
| | |
| | | </el-form-item> |
| | | </el-form> |
| | | <span slot="footer" class="dialog-footer"> |
| | | <el-button @click="addDialogVisible = false">取 消</el-button> |
| | | <el-button type="primary" @click="addPower">确 定</el-button> |
| | | <el-button @click="addDialogVisible = false">{{$t('button.cancel')}}</el-button> |
| | | <el-button type="primary" @click="addPower">{{$t('button.confirm')}}</el-button> |
| | | </span> |
| | | </el-dialog> |
| | | <!--修改权限的对话框--> |
| | | <el-dialog |
| | | title="修改权限" |
| | | :title="$t('dialog.editPermission')" |
| | | :visible.sync="editDialogVisible" |
| | | width="50%"> |
| | | <!--内容主体区域--> |
| | | <el-form :model="editRoleForm" :rules="powerRules" ref="powerRef" label-width="70px"> |
| | | <el-form-item label="角色" prop="roleId"> |
| | | <el-select filterable v-model="editRoleForm.roleId" placeholder="请选择"> |
| | | <el-form-item :label="$t('form.role')" prop="roleId"> |
| | | <el-select filterable v-model="editRoleForm.roleId" :placeholder="$t('form.select')"> |
| | | <el-option v-for="item in roleList" |
| | | :key="item.id" |
| | | :value="item.id" |
| | |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item filterable label="权限" prop="permissionId"> |
| | | <el-select v-model="editRoleForm.permissionId" placeholder="请选择"> |
| | | <el-form-item filterable :label="$t('form.permission')" prop="permissionId"> |
| | | <el-select v-model="editRoleForm.permissionId" :placeholder="$t('form.select')"> |
| | | <el-option v-for="item in permissionList" |
| | | :key="item.id" |
| | | :value="item.id" |
| | |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="是否生效" prop="state"> |
| | | <el-select v-model="editRoleForm.state" placeholder="请选择"> |
| | | <el-form-item :label="$t('form.isActive')" prop="state"> |
| | | <el-select v-model="editRoleForm.state" :placeholder="$t('form.select')"> |
| | | <el-option v-for="(item,index) in options" |
| | | :key="index" |
| | | :value="item.value" |
| | |
| | | </el-form-item> |
| | | </el-form> |
| | | <span slot="footer" class="dialog-footer"> |
| | | <el-button @click="editDialogVisible = false">取 消</el-button> |
| | | <el-button type="primary" @click="editRoleInfo">确 定</el-button> |
| | | <el-button @click="editDialogVisible = false">{{$t('button.cancel')}}</el-button> |
| | | <el-button type="primary" @click="editRoleInfo">{{$t('button.confirm')}}</el-button> |
| | | </span> |
| | | </el-dialog> |
| | | </div> |
| | |
| | | import {getById, removeById, saveOrUpdate, selectPage} from "../../api/rolePermission"; |
| | | import {select} from "../../api/role"; |
| | | import {selectPermission} from "../../api/permission"; |
| | | import LanguageMixin from '../../lang/LanguageMixin' |
| | | |
| | | export default { |
| | | name: "Power", |
| | | mixins: [LanguageMixin], |
| | | data() { |
| | | return { |
| | | queryInfo: { |