| | |
| | | <div class="app-container"> |
| | | <el-container> |
| | | <el-card class="box-card" style="width: 100%" shadow="never"> |
| | | <!-- <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">--> |
| | | <!-- <el-form-item label="角色名称" prop="roleName">--> |
| | | <!-- <el-input--> |
| | | <!-- v-model="queryParams.roleName"--> |
| | | <!-- placeholder="请输入"--> |
| | | <!-- clearable--> |
| | | <!-- @keyup.enter.native="handleQuery"--> |
| | | <!-- style="width: 150px"--> |
| | | <!-- />--> |
| | | <!-- </el-form-item>--> |
| | | <!-- <el-form-item label="状态" prop="status">--> |
| | | <!-- <el-select--> |
| | | <!-- style="width: 150px"--> |
| | | <!-- v-model="queryParams.status"--> |
| | | <!-- placeholder="请选择"--> |
| | | <!-- clearable>--> |
| | | <!-- <el-option--> |
| | | <!-- v-for="dict in constants.normalOrDisabled"--> |
| | | <!-- :key="dict.value"--> |
| | | <!-- :label="dict.label"--> |
| | | <!-- :value="dict.value"--> |
| | | <!-- />--> |
| | | <!-- </el-select>--> |
| | | <!-- </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="handleAdd"--> |
| | | <!-- v-hasPermi="['system:role:add']"--> |
| | | <!-- >新增</el-button>--> |
| | | <!-- </el-col>--> |
| | | <!-- </el-row>--> |
| | | <!-- <el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange">--> |
| | | <!-- <el-table-column type="selection" width="55" align="center" />--> |
| | | <!-- <el-table-column label="角色编号" prop="role_id" width="160" />--> |
| | | <!-- <el-table-column label="角色名称" prop="role_name" :show-overflow-tooltip="true" width="150" />--> |
| | | <!-- <el-table-column label="权限字符" prop="role_key" :show-overflow-tooltip="true" width="150" />--> |
| | | <!-- <el-table-column label="显示顺序" prop="role_sort" width="100" />--> |
| | | <!-- <el-table-column label="状态" align="center" width="100">--> |
| | | <!-- <template slot-scope="scope">--> |
| | | <!-- <el-switch--> |
| | | <!-- v-model="scope.row.status"--> |
| | | <!-- :active-value=0--> |
| | | <!-- :inactive-value=1--> |
| | | <!-- @change="handleStatusChange(scope.row)"--> |
| | | <!-- ></el-switch>--> |
| | | <!-- </template>--> |
| | | <!-- </el-table-column>--> |
| | | <!-- <el-table-column label="备注" align="center" prop="remark" width="180">--> |
| | | <!-- </el-table-column>--> |
| | | <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180">--> |
| | | <!-- <template slot-scope="scope">--> |
| | | <!-- <el-button--> |
| | | <!-- size="mini"--> |
| | | <!-- type="text"--> |
| | | <!-- icon="el-icon-edit"--> |
| | | <!-- @click="handleUpdate(scope.row)"--> |
| | | <!-- v-hasPermi="['system:role:edit']"--> |
| | | <!-- >修改</el-button>--> |
| | | <!-- <el-button--> |
| | | <!-- size="mini"--> |
| | | <!-- type="text"--> |
| | | <!-- icon="el-icon-delete"--> |
| | | <!-- @click="handleDelete(scope.row)"--> |
| | | <!-- v-hasPermi="['system:role:remove']"--> |
| | | <!-- >删除</el-button>--> |
| | | <!--<!– <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:role:edit']">--> |
| | | <!-- <span class="el-dropdown-link">--> |
| | | <!-- <i class="el-icon-d-arrow-right el-icon--right"></i>更多--> |
| | | <!-- </span>--> |
| | | <!-- <el-dropdown-menu slot="dropdown">--> |
| | | <!-- <el-dropdown-item command="handleDataScope" icon="el-icon-circle-check"--> |
| | | <!-- v-hasPermi="['system:role:edit']">数据权限</el-dropdown-item>--> |
| | | <!-- <el-dropdown-item command="handleAuthUser" icon="el-icon-user"--> |
| | | <!-- v-hasPermi="['system:role:edit']">分配用户</el-dropdown-item>--> |
| | | <!-- </el-dropdown-menu>--> |
| | | <!-- </el-dropdown>–>--> |
| | | <!-- </template>--> |
| | | <!-- </el-table-column>--> |
| | | <!-- </el-table>--> |
| | | <!-- <el-pagination--> |
| | | <!-- :current-page="queryParams.pageNum"--> |
| | | <!-- :page-sizes="constants.page.limit"--> |
| | | <!-- :layout="constants.page.layout"--> |
| | | <!-- :total="this.total"--> |
| | | <!-- @size-change="changeSize"--> |
| | | <!-- @current-change="changePage"--> |
| | | <!-- />--> |
| | | <!--搜索条件--> |
| | | <div class="filter-container"> |
| | | <my-search ref="searchBar" :items="items" @search="fifterForm"></my-search> |
| | | </div> |
| | |
| | | </el-container> |
| | | <!-- 添加或修改角色配置对话框 --> |
| | | <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body> |
| | | <el-form ref="form" :model="form" :rules="rules" label-width="100px"> |
| | | <el-form v-loading="loading" ref="form" :model="form" :rules="rules" label-width="100px"> |
| | | <el-form-item label="角色名称" prop="role_name"> |
| | | <el-input v-model="form.role_name" placeholder="请输入角色名称"/> |
| | | </el-form-item> |
| | | <el-form-item prop="role_key"> |
| | | <span slot="label"> |
| | | <el-tooltip content="角色标识,目前暂未使用" placement="top"> |
| | | <i class="el-icon-question"></i> |
| | | </el-tooltip> |
| | | 角色标识 |
| | | </span> |
| | | <el-input v-model="form.role_key" placeholder="请输入角色标识"/> |
| | | </el-form-item> |
| | | <!-- <el-form-item prop="role_key"> |
| | | <span slot="label"> |
| | | <el-tooltip content="角色标识,目前暂未使用" placement="top"> |
| | | <i class="el-icon-question"></i> |
| | | </el-tooltip> |
| | | 角色标识 |
| | | </span> |
| | | <el-input v-model="form.role_key" placeholder="请输入角色标识"/> |
| | | </el-form-item>--> |
| | | <el-form-item label="角色顺序" prop="role_sort"> |
| | | <el-input-number v-model="form.role_sort" controls-position="right" :min="0"/> |
| | | </el-form-item> |
| | |
| | | <el-radio-group v-model="form.status"> |
| | | <el-radio :label="0">正常</el-radio> |
| | | <el-radio :label="1">禁用</el-radio> |
| | | <!-- <el-radio--> |
| | | <!-- v-for="dict in constants.normalOrDisabled"--> |
| | | <!-- :key="dict.value"--> |
| | | <!-- :label="dict.value"--> |
| | | <!-- >{{dict.label}}</el-radio>--> |
| | | </el-radio-group> |
| | | </el-form-item> |
| | | <el-form-item label="角色范围"> |
| | | <el-radio-group v-model="form.data_scope"> |
| | | <el-radio :label="1" checked>省</el-radio> |
| | | <el-radio :label="2">市</el-radio> |
| | | <el-radio :label="3">县</el-radio> |
| | | <el-radio v-if="$store.getters.userInfo.lv<2" :label="1">省</el-radio> |
| | | <el-radio v-if="$store.getters.userInfo.lv<3" :label="2">市</el-radio> |
| | | <el-radio v-if="$store.getters.userInfo.lv<4" :label="3">县</el-radio> |
| | | </el-radio-group> |
| | | </el-form-item> |
| | | <el-form-item label="菜单权限"> |
| | | <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox> |
| | | <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox> |
| | | <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选 |
| | | </el-checkbox> |
| | | <el-checkbox v-model="form.menu_check_strictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动 |
| | | </el-checkbox> |
| | | <el-tree |
| | |
| | | tableShow: false, |
| | | // 表格数据 |
| | | table: { |
| | | autoLoad: false, |
| | | showIndex: true, // 是否显示序号 |
| | | expand: false, // 是否显示详情数据 |
| | | url: SettingIplatform.apiBaseURL + '/system/role/list', // 请求地址 |
| | | url: SettingIplatform.apiBaseURL + '/pc/fin/sys/tenant/user/query/role', // 请求地址 |
| | | // 工具条 |
| | | tools: { |
| | | columnsCtrl: {// 列控制按钮 |
| | |
| | | }, |
| | | // 列信息 |
| | | columns: [ |
| | | {title: '角色编号', field: 'role_id', align: 'center', width: '200px'}, |
| | | {title: '角色名称', field: 'role_name', align: 'center', width: '260px'}, |
| | | {title: '权限字符', field: 'role_key', align: 'center', width: '260px'}, |
| | | {title: '顺序号', field: 'role_sort', align: 'center', width: '100px'}, |
| | | {title: '角色编号', field: 'role_id', align: 'center', width: 135}, |
| | | {title: '角色名称', field: 'role_name', align: 'left', minWidth: 200}, |
| | | // {title: '权限字符', field: 'role_key', align: 'center', width: 100}, |
| | | {title: '显示顺序', field: 'role_sort', align: 'center', width: 100}, |
| | | { |
| | | title: '状态', field: 'status', align: 'center', width: '100px', |
| | | title: '状态', field: 'status', align: 'center', width: 100, |
| | | switch: row => { |
| | | const result = {} |
| | | if (row.status == 0) { |
| | |
| | | return result |
| | | } |
| | | }, |
| | | // {title: '备注', field: 'remark', align: 'left', width: '250px'}, |
| | | {title: '备注', field: 'remark', align: 'left', minWidth: 200}, |
| | | ], |
| | | // 操作信息 |
| | | operation: { |
| | | // width: 150, |
| | | width: 150, |
| | | align: 'center', |
| | | show: true, // 显示操作列 |
| | | attr: [ |
| | |
| | | }, |
| | | // 表单参数 |
| | | form: { |
| | | role_name: '', |
| | | role_key: '', |
| | | role_sort: '', |
| | | data_scope: 1, |
| | | status: 1 |
| | | }, |
| | |
| | | methods: { |
| | | fifterForm(params) { |
| | | this.queryParams = Object.assign(this.queryParams, params) |
| | | // this.queryParams.status = 0 |
| | | this.search(1) |
| | | }, |
| | | // 查询table列表 |
| | | search(pageNum) { |
| | | if (pageNum != undefined) { |
| | | this.$refs.myTable.search(pageNum) |
| | | this.$refs.myTable.search({pageNum}) |
| | | } else { |
| | | this.$refs.myTable.search() |
| | | } |
| | | }, |
| | | /** 获取顶级机构列表选择框 2022-12-15 */ |
| | | getRootOrgList() { |
| | | this.loading = true; |
| | | listOrgRoot().then(response => { |
| | | this.rootOrgList = response; |
| | | this.selectedRootOrgId = this.rootOrgList[0].id; |
| | | this.queryParams.orgId = this.selectedRootOrgId; |
| | | this.loading = false; |
| | | }).then(() => { |
| | | this.tableShow = true |
| | | this.search(1); |
| | | }).catch(function () { |
| | | // this.loading = false; |
| | | this.$nextTick(() => { |
| | | this.search(1); |
| | | }) |
| | | |
| | | }); |
| | | }, |
| | | /** 查询角色列表 */ |
| | | getList() { |
| | | this.loading = true; |
| | | this.selectedRootOrgId = this.queryParams.orgId; |
| | | listRole(this.queryParams).then(response => { |
| | | this.roleList = response.datas; |
| | | this.total = response.totalRows; |
| | | this.loading = false; |
| | | } |
| | | ); |
| | | }, |
| | | /** 查询菜单树结构 */ |
| | | getMenuTreeselect() { |
| | | menuTreeselect().then(response => { |
| | | async getMenuTreeselect() { |
| | | await menuTreeselect().then(response => { |
| | | this.menuOptions = response; |
| | | }); |
| | | }, |
| | |
| | | let text = row.status == 0 ? "禁用" : "启用"; |
| | | this.$modal.confirm('确认要' + text + '"' + row.role_name + '"角色吗?').then(function () { |
| | | row.status = row.status == 0 ? 1 : 0; |
| | | return changeRoleStatus(row.role_id, row.status); |
| | | return changeRoleStatus(row); |
| | | }).then(() => { |
| | | this.$modal.msgSuccess(text + "成功"); |
| | | this.search(); |
| | |
| | | if (this.$refs.menu != undefined) { |
| | | this.$refs.menu.setCheckedKeys([]); |
| | | } |
| | | this.menuExpand = false, |
| | | this.menuNodeAll = false, |
| | | this.deptExpand = true, |
| | | this.deptNodeAll = false, |
| | | this.form = { |
| | | org_id: undefined, // 顶级机构ID |
| | | role_id: undefined, |
| | | role_name: undefined, |
| | | role_key: "None", |
| | | role_sort: 0, |
| | | status: 0, |
| | | menuIds: [], |
| | | deptIds: [], |
| | | menu_check_strictly: true, |
| | | dept_check_strictly: true, |
| | | remark: undefined |
| | | }; |
| | | this.menuExpand = false |
| | | this.menuNodeAll = false |
| | | this.deptExpand = true |
| | | this.deptNodeAll = false |
| | | this.form = { |
| | | org_id: undefined, // 顶级机构ID |
| | | role_id: undefined, |
| | | role_name: undefined, |
| | | data_scope: this.$store.getters.userInfo ? this.$store.getters.userInfo.lv : 1, |
| | | role_key: "None", |
| | | role_sort: 0, |
| | | status: 0, |
| | | menuIds: [], |
| | | deptIds: [], |
| | | menu_check_strictly: true, |
| | | dept_check_strictly: true, |
| | | remark: undefined |
| | | }; |
| | | this.resetForm("form"); |
| | | }, |
| | | changeSize(e) { |
| | |
| | | } |
| | | }, |
| | | /** 新增按钮操作 */ |
| | | handleAdd() { |
| | | async handleAdd() { |
| | | this.loading = true |
| | | this.reset(); |
| | | this.getMenuTreeselect(); |
| | | await this.getMenuTreeselect(); |
| | | // 2022-12-18 添加上顶级机构ID |
| | | this.form.org_id = this.selectedRootOrgId; |
| | | this.open = true; |
| | | this.title = "添加角色"; |
| | | this.loading = false |
| | | }, |
| | | /** 修改按钮操作 */ |
| | | handleUpdate(row) { |
| | |
| | | // const roleId = row.role_id || this.ids |
| | | const roleId = row.role_id; |
| | | const roleMenu = this.getRoleMenuTreeselect(roleId); |
| | | this.loading = true |
| | | getRole(roleId).then(response => { |
| | | this.form = response; |
| | | this.open = true; |
| | |
| | | }); |
| | | }); |
| | | this.title = "修改角色"; |
| | | this.loading = false |
| | | }).catch(() => { |
| | | this.loading = false |
| | | }); |
| | | }, |
| | | /** 选择角色权限范围触发 */ |
| | |
| | | // 2022-12-19,把这两个字段设置为数值,目前暂不使用,要不后台类型转换错误(boolean) |
| | | this.form.menu_check_strictly = 1; |
| | | this.form.dept_check_strictly = 1; |
| | | // 2023-11-30 增加默认data_scope为1 |
| | | // this.form.data_scope = 1; |
| | | |
| | | if (this.form.role_id != undefined) { |
| | | this.form.menuIds = this.getMenuAllCheckedKeys(); |
| | | updateRole(this.form).then(response => { |
| | | this.$modal.msgSuccess("修改成功"); |
| | | this.open = false; |
| | | this.getList(); |
| | | this.search() |
| | | }); |
| | | } else { |
| | | this.form.menuIds = this.getMenuAllCheckedKeys(); |
| | | addRole(this.form).then(response => { |
| | | this.$modal.msgSuccess("新增成功"); |
| | | this.open = false; |
| | | this.getList(); |
| | | this.search() |
| | | }); |
| | | } |
| | | } |
| | |
| | | this.$modal.confirm('是否确认删除角色为"' + row.role_name + '"的数据项?').then(function () { |
| | | return delRole(roleIds); |
| | | }).then(() => { |
| | | this.this.search(); |
| | | this.search(); |
| | | this.$modal.msgSuccess("删除成功"); |
| | | }).catch(() => { |
| | | }); |