| | |
| | | <!-- 修改 --> |
| | | <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('permission update')" placement="top" :enterable="false"> |
| | | |
| | | <el-button type="primary" size="mini" @click="showPermissionDialog(scope.row)">{{$t('permission update')}}</el-button> |
| | | </el-tooltip> |
| | | <!-- 删除 --> |
| | | <el-tooltip effect="dark" :content="$t('langDelete')" placement="top" :enterable="false"> |
| | |
| | | </span> |
| | | </el-dialog> |
| | | <!--修改角色的对话框--> |
| | | <el-dialog |
| | | :title="$t('langEditRole')" |
| | | :visible.sync="editDialogVisible" |
| | | width="50%"> |
| | | <el-dialog :title="$t('langEditRole')" :visible.sync="editDialogVisible" width="50%"> |
| | | <!--内容主体区域--> |
| | | <el-form :model="editRoleForm" :rules="addRoleRules" ref="addRoleRef" label-width="130px"> |
| | | <el-form-item :label="$t('langRoleName')" prop="name"> |
| | |
| | | </el-form-item> |
| | | <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" |
| | | :label="item.label"> |
| | | </el-option> |
| | | <el-option v-for="(item, index) in options" :key="index" :value="item.value" :label="item.label"></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | |
| | | </el-form> |
| | | <span slot="footer" class="dialog-footer"> |
| | | <el-button @click="editDialogVisible = false">{{$t('langCancel')}}</el-button> |
| | | <el-button type="primary" @click="editRoleInfo">{{$t('langConfirm')}}</el-button> |
| | | </span> |
| | | </el-dialog> |
| | | |
| | | |
| | | <el-dialog :title="$t('langEditPermissions')" :visible.sync="permissionDialogVisible"> |
| | | <el-form label-width="130px"> |
| | | <el-form-item :label="$t('langPermissions')" prop="permissionList"> |
| | | <el-checkbox-group v-model="selectedPermissions"> |
| | | <el-checkbox |
| | | v-for="(permission, index) in permissionList" |
| | | :key="index" |
| | | :label="permission.name" |
| | | :checked="permission.state === 1" |
| | | @change="updatePermissionState(permission.name, $event)" |
| | | >{{ permission.name }}</el-checkbox> |
| | | </el-checkbox-group> |
| | | </el-form-item> |
| | | </el-form> |
| | | <span slot="footer" class="dialog-footer"> |
| | | <el-button @click="cancelEditPermissions">{{$t('langCancel')}}</el-button> |
| | | <el-button type="primary" @click="savePermissions">{{$t('langConfirm')}}</el-button> |
| | | </span> |
| | | </el-dialog> |
| | | |
| | | |
| | | |
| | | |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import {getById, removeById, saveOrUpdate, selectPage} from "../../api/role"; |
| | | import LanguageMixin from '../../lang/LanguageMixin' |
| | | import {getById2} from "../../api/rolePermission"; |
| | | import {saveOrUpdate2} from "../../api/rolePermission"; |
| | | |
| | | import LanguageMixin from '../../lang/LanguageMixin'; |
| | | export default { |
| | | name: "Role", |
| | | mixins: [LanguageMixin], |
| | |
| | | addDialogVisible: false, |
| | | // 控制修改角色对话框的显示与隐藏 |
| | | editDialogVisible: false, |
| | | |
| | | // 添加的角色对象 |
| | | addRoleForm: { |
| | | state: 1 |
| | | }, |
| | | |
| | | // 修改的角色对象 |
| | | editRoleForm: {}, |
| | | editRoleForm: { |
| | | |
| | | }, |
| | | |
| | | permissionList: [], |
| | | permissionDialogVisible: false, |
| | | selectedPermissions: [] ,// 添加selectedPermissions数组变量 |
| | | |
| | | // 添加角色的验证规则 |
| | | addRoleRules: { |
| | | name: [ |
| | |
| | | stateChange(info) { |
| | | saveOrUpdate(info).then(() => { |
| | | const 更新状态成功 = this.$t('更新状态成功'); |
| | | this.$message.success(更新状态成功) |
| | | this.$message.success(更新状态成功); |
| | | |
| | | }); |
| | | }, |
| | |
| | | showEditDialog(role) { |
| | | getById({id: role.id}).then(res => { |
| | | this.editRoleForm = res.data; |
| | | |
| | | |
| | | |
| | | }); |
| | | |
| | | |
| | | this.editDialogVisible = true; |
| | | }, |
| | | |
| | | |
| | | showPermissionDialog(role) { |
| | | this.selectedPermissions=[]; |
| | | this.permissionList=[]; |
| | | |
| | | getById2({ roleId: role.id }).then((res) => { |
| | | this.permissionList = res.data.permissionList; |
| | | |
| | | |
| | | this.selectedPermissions = this.permissionList.map(({ name, state }) => ({ |
| | | name, |
| | | state: state === 1, |
| | | })); |
| | | console.log(this.selectedPermissions); |
| | | this.permissionDialogVisible = true; |
| | | }); |
| | | }, |
| | | // 取消编辑权限弹出框 |
| | | cancelEditPermissions() { |
| | | this.permissionDialogVisible = false; |
| | | }, |
| | | // 保存权限修改 |
| | | updatePermissionState(name, isChecked) { |
| | | const permission = this.permissionList.find(p => p.name === name); |
| | | if (permission) { |
| | | permission.state = isChecked ? 1 : 0; |
| | | } |
| | | }, |
| | | |
| | | |
| | | |
| | | savePermissions() { |
| | | const permissions = this.permissionList.map(({ roleId, name, state, permission_id }) => ({ |
| | | roleId, |
| | | name, |
| | | state, |
| | | permission_id |
| | | })); |
| | | |
| | | saveOrUpdate2({ permissions }).then(() => { |
| | | // 成功更新权限后执行的操作 |
| | | const 更新状态成功 = this.$t('更新状态成功'); |
| | | this.$message.success(更新状态成功); |
| | | }); |
| | | }, |
| | | // 展示添加角色的对话框 |