| | |
| | | <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('langHome')}}</el-breadcrumb-item> |
| | | <el-breadcrumb-item>{{$t('langRoleManagement')}}</el-breadcrumb-item> |
| | | <el-breadcrumb-item>{{$t('langRoleList')}}</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="getRoleList()"> |
| | | <el-button slot="append" icon="el-icon-search" @click="getRoleList()"></el-button> |
| | | </el-input> |
| | | </el-col> |
| | | <el-input :placeholder="$t('langEnterRoleName')" v-model="queryInfo.name" clearable @clear="getRoleList()"> |
| | | <el-button slot="append" icon="el-icon-search" @click="getRoleList()"></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('langAddRole')}}</el-button> |
| | | </el-col> |
| | | </el-row> |
| | | <!--角色列表区域--> |
| | | <el-table :data="roleList.records" border stripe> |
| | | <el-table-column label="#" type="index"></el-table-column> |
| | | <el-table-column label="名称" prop="name"></el-table-column> |
| | | <el-table-column label="创建时间" prop="createTime"></el-table-column> |
| | | <el-table-column label="是否有效"> |
| | | <el-table-column :label="$t('langRoleName')" prop="name"></el-table-column> |
| | | <el-table-column :label="$t('langCreateTime')" prop="createTime"></el-table-column> |
| | | <el-table-column :label="$t('langIsValid')"> |
| | | <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('langOperation')"> |
| | | <template slot-scope="scope"> |
| | | <!--修改--> |
| | | <el-tooltip effect="dark" content="修改" 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-button type="danger" icon="el-icon-delete" size="mini" |
| | | @click="removeById(scope.row)"></el-button> |
| | | </el-tooltip> |
| | | </template> |
| | | <!-- 修改 --> |
| | | <el-tooltip effect="dark" :content="$t('langEdit')" 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="$t('langDelete')" placement="top" :enterable="false"> |
| | | <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeById(scope.row)"></el-button> |
| | | </el-tooltip> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <!--分页区域--> |
| | |
| | | </el-card> |
| | | <!--添加角色的对话框--> |
| | | <el-dialog |
| | | title="添加角色" |
| | | :title="$t('langAddRole')" |
| | | :visible.sync="addDialogVisible" |
| | | width="50%" |
| | | @close="addDialogClosed"> |
| | | <!--内容主体区域--> |
| | | <el-form :model="addRoleForm" :rules="addRoleRules" ref="addRoleRef" label-width="70px"> |
| | | <el-form-item label="名称" prop="name"> |
| | | <el-form :model="addRoleForm" :rules="addRoleRules" ref="addRoleRef" label-width="130px"> |
| | | <el-form-item :label="$t('langRoleName')" prop="name"> |
| | | <el-input v-model="addRoleForm.name"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="状态" prop="state"> |
| | | <el-select v-model="addRoleForm.state" placeholder="请选择"> |
| | | <el-form-item :label="$t('langState')" prop="state"> |
| | | <el-select v-model="addRoleForm.state" placeholder="$t('langPleaseSelect')"> |
| | | <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="addRole">确 定</el-button> |
| | | <el-button @click="addDialogVisible = false">{{$t('langCancel')}}</el-button> |
| | | <el-button type="primary" @click="addRole">{{$t('langConfirm')}}</el-button> |
| | | </span> |
| | | </el-dialog> |
| | | <!--修改角色的对话框--> |
| | | <el-dialog |
| | | title="修改角色" |
| | | :title="$t('langEditRole')" |
| | | :visible.sync="editDialogVisible" |
| | | width="50%"> |
| | | <!--内容主体区域--> |
| | | <el-form :model="editRoleForm" :rules="addRoleRules" ref="addRoleRef" label-width="70px"> |
| | | <el-form-item label="名称" prop="name"> |
| | | <el-form :model="editRoleForm" :rules="addRoleRules" ref="addRoleRef" label-width="130px"> |
| | | <el-form-item :label="$t('langRoleName')" prop="name"> |
| | | <el-input v-model="editRoleForm.name"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="状态" prop="state"> |
| | | <el-select v-model="editRoleForm.state" placeholder="请选择"> |
| | | <el-form-item :label="$t('langState')" prop="state"> |
| | | <el-select v-model="editRoleForm.state" placeholder="$t('langPleaseSelect')"> |
| | | <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('langCancel')}}</el-button> |
| | | <el-button type="primary" @click="editRoleInfo">{{$t('langConfirm')}}</el-button> |
| | | </span> |
| | | </el-dialog> |
| | | </div> |
| | |
| | | |
| | | <script> |
| | | import {getById, removeById, saveOrUpdate, selectPage} from "../../api/role"; |
| | | |
| | | import LanguageMixin from '../../lang/LanguageMixin' |
| | | export default { |
| | | name: "Role", |
| | | mixins: [LanguageMixin], |
| | | |
| | | data() { |
| | | return { |
| | | queryInfo: { |
| | |
| | | .app .el-card { |
| | | width: 99%; |
| | | } |
| | | </style> |
| | | </style> |