|
|
@@ -0,0 +1,267 @@
|
|
|
+<template>
|
|
|
+ <div class="page-container">
|
|
|
+ <div class="content-container">
|
|
|
+ <div class="main">
|
|
|
+ <div class="table-nav">
|
|
|
+ <div class="tags">
|
|
|
+ <div class="tag" :style="isActive(1)" @click="toTab1">数据角色</div>
|
|
|
+ <div class="tag" :style="isActive(2)" @click="toTab2">数据权限</div>
|
|
|
+ </div>
|
|
|
+ <div class="actions">
|
|
|
+ <el-button type="primary" icon="el-icon-plus" size="mini " v-show="tabIndex == 1" @click="addRole" v-hasPermi="['system:levelPosition:addLevel']">添加</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 数据角色表格 -->
|
|
|
+ <el-table v-loading="loading" :data="roleList" border :header-cell-style="{ 'text-align': 'center' }" highlight-current-row @current-change="rowHandler" v-show="tabIndex == 1">
|
|
|
+ <el-table-column label="名称" prop="dataRoleName" width="200">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <a href="javascript:void(0);" class="linked" @click="toTab2">{{ scope.row.dataRoleName }}</a>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="描述" prop="remark" />
|
|
|
+ <el-table-column label="创建时间" prop="createTime" width="200" align="center" />
|
|
|
+ <el-table-column label="操作" class-name="small-padding fixed-width" width="300" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button size="mini" type="text" icon="el-icon-edit" @click.stop="updRole(scope.row)" v-hasPermi="['system:levelPosition:updLevel']">修改</el-button>
|
|
|
+ <el-button size="mini" type="text" icon="el-icon-delete" @click.stop="delRole(scope.row)" v-hasPermi="['system:levelPosition:delLevel']">删除</el-button>
|
|
|
+ <el-button size="mini" type="text" icon="el-icon-remove" @click.stop="setRole(scope.row)" v-hasPermi="['system:levelPosition:upLevel']" v-if="scope.row.status == 0"
|
|
|
+ >禁用</el-button
|
|
|
+ >
|
|
|
+ <el-button size="mini" type="text" icon="el-icon-circle-plus" @click.stop="setRole(scope.row)" v-hasPermi="['system:levelPosition:upLevel']" v-if="scope.row.status == 1"
|
|
|
+ >启用</el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <pagination v-show="roleTotal > 0 && tabIndex == 1" :total="roleTotal" :page.sync="roleParams.pageNum" :limit.sync="roleParams.pageSize" @pagination="getRoleList" />
|
|
|
+ <!-- 数据权限表格 -->
|
|
|
+ <el-table
|
|
|
+ v-loading="loading"
|
|
|
+ :data="deptTreeList"
|
|
|
+ border
|
|
|
+ :header-cell-style="{ 'text-align': 'center' }"
|
|
|
+ highlight-current-row
|
|
|
+ row-key="id"
|
|
|
+ :default-expand-all="true"
|
|
|
+ :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
|
|
+ v-show="tabIndex == 2"
|
|
|
+ >
|
|
|
+ <el-table-column label="机构名称" prop="label" />
|
|
|
+ <el-table-column label="数据权限" class-name="small-padding fixed-width" width="300" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <input type="checkbox" :checked="authIds.includes(scope.row.id)" @change="checkboxClick(scope.row, $event)" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <!-- 编辑数据角色 -->
|
|
|
+ <el-dialog title="编辑角色" :visible.sync="roleShow" width="30%" :close-on-press-escape="false" :close-on-click-modal="false">
|
|
|
+ <el-form ref="roleForm" :model="roleForm" :rules="roleRules" label-width="100px">
|
|
|
+ <el-form-item label="名称" prop="dataRoleName">
|
|
|
+ <div style="width: 200px"><el-input v-model="roleForm.dataRoleName" placeholder="请输入名称" /></div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="描述" prop="remark">
|
|
|
+ <div style="width: 300px"><el-input maxlength="80" v-model="roleForm.remark" placeholder="请输入描述" /></div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button size="small" @click="roleCancel">取 消</el-button>
|
|
|
+ <el-button type="primary" size="small" @click="roleSub">保 存</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import { roleAdd, roleList, roleUpd, roleDel, roleStatus, authUpd, deptList } from '@/api/system/dataPermissions.js'
|
|
|
+ export default {
|
|
|
+ name: 'dataPermissions',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loading: false,
|
|
|
+ //tab索引
|
|
|
+ tabIndex: 1,
|
|
|
+ //角色数据
|
|
|
+ roleList: [],
|
|
|
+ //角色弹窗
|
|
|
+ roleShow: false,
|
|
|
+ //角色表单
|
|
|
+ roleForm: {
|
|
|
+ //角色名称
|
|
|
+ dataRoleName: '',
|
|
|
+ //角色描述
|
|
|
+ remark: ''
|
|
|
+ },
|
|
|
+ //角色表单验证
|
|
|
+ roleRules: {
|
|
|
+ dataRoleName: [{ required: true, message: '名称不能为空', trigger: 'submit' }]
|
|
|
+ },
|
|
|
+ //角色总条数
|
|
|
+ roleTotal: 0,
|
|
|
+ // 角色查询参数
|
|
|
+ roleParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10
|
|
|
+ },
|
|
|
+ //权限数据ids
|
|
|
+ authIds: [],
|
|
|
+ //部门数据
|
|
|
+ deptList: [],
|
|
|
+ //选中的角色id
|
|
|
+ dataRoleId: 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getRoleList()
|
|
|
+ deptList().then((res) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.deptList = res.data
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ theme() {
|
|
|
+ return this.$store.state.settings.theme
|
|
|
+ },
|
|
|
+ deptTreeList() {
|
|
|
+ return this.dataRoleId ? this.deptList : []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //动态选中样式
|
|
|
+ isActive(index) {
|
|
|
+ if (this.tabIndex != index) return {}
|
|
|
+ return {
|
|
|
+ color: this.theme
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //跳转到tab1
|
|
|
+ toTab1() {
|
|
|
+ this.tabIndex = 1
|
|
|
+ },
|
|
|
+ //跳转到tab2
|
|
|
+ toTab2() {
|
|
|
+ this.tabIndex = 2
|
|
|
+ },
|
|
|
+ //获取角色数据
|
|
|
+ getRoleList() {
|
|
|
+ roleList(this.roleParams).then((res) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.roleList = res.rows
|
|
|
+ this.roleTotal = res.total
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //添加角色
|
|
|
+ addRole() {
|
|
|
+ this.roleShow = true
|
|
|
+ },
|
|
|
+ //数据角色行选中
|
|
|
+ rowHandler(e) {
|
|
|
+ this.dataRoleId = e.dataRoleId
|
|
|
+ if (e.deptIds && e.deptIds != '') {
|
|
|
+ this.authIds = e.deptIds.split(',').map((item) => Number(item))
|
|
|
+ } else {
|
|
|
+ this.authIds = []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //角色弹窗取消
|
|
|
+ roleCancel() {
|
|
|
+ this.resetRoleForm()
|
|
|
+ this.roleShow = false
|
|
|
+ },
|
|
|
+ //角色弹窗提交
|
|
|
+ roleSub() {
|
|
|
+ this.$refs.roleForm.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ if (this.roleForm.dataRoleId) {
|
|
|
+ roleUpd(this.roleForm).then((res) => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.$msg({ message: '修改成功' })
|
|
|
+ this.roleCancel()
|
|
|
+ this.getRoleList()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ roleAdd(this.roleForm).then((res) => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.$msg({ message: '添加成功' })
|
|
|
+ this.roleCancel()
|
|
|
+ this.getRoleList()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //角色表单重置,
|
|
|
+ resetRoleForm() {
|
|
|
+ this.roleForm = {
|
|
|
+ //角色名称
|
|
|
+ dataRoleName: '',
|
|
|
+ //角色描述
|
|
|
+ remark: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //修改角色
|
|
|
+ updRole(row) {
|
|
|
+ this.roleForm.dataRoleName = row.dataRoleName
|
|
|
+ this.roleForm.remark = row.remark
|
|
|
+ this.roleForm.dataRoleId = row.dataRoleId
|
|
|
+ this.roleShow = true
|
|
|
+ },
|
|
|
+ //删除角色
|
|
|
+ delRole(row) {
|
|
|
+ this.$modal
|
|
|
+ .confirm('确定要删除吗')
|
|
|
+ .then(() => {
|
|
|
+ roleDel(row.dataRoleId).then((res) => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.$msg({ message: '删除成功' })
|
|
|
+ this.getRoleList()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ .catch(() => {})
|
|
|
+ },
|
|
|
+ //角色禁用
|
|
|
+ setRole(row) {
|
|
|
+ roleStatus({
|
|
|
+ dataRoleId: row.dataRoleId,
|
|
|
+ status: Math.abs(row.status - 1)
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.$msg({ message: '操作成功' })
|
|
|
+ row.status = Math.abs(row.status - 1)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //编辑权限
|
|
|
+ checkboxClick(d, e) {
|
|
|
+ let status = e.target.checked
|
|
|
+ let ids = [...this.authIds]
|
|
|
+ if (status) {
|
|
|
+ ids.push(d.id)
|
|
|
+ } else {
|
|
|
+ ids = ids.filter((item) => item != d.id)
|
|
|
+ }
|
|
|
+ authUpd({ dataRoleId: this.dataRoleId, deptIds: ids.join(',') }).then((res) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ if (status) {
|
|
|
+ this.authIds.push(d.id)
|
|
|
+ } else {
|
|
|
+ this.authIds = this.authIds.filter((item) => item != d.id)
|
|
|
+ }
|
|
|
+ let row = this.roleList.find((item) => item.dataRoleId == this.dataRoleId)
|
|
|
+ row.deptIds = this.authIds.join(',')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style></style>
|
lz