CZO_Boss/src/views/system/dataPermissions/index.vue

<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 highlight-current-row @current-change="rowHandler" :cell-style="{ cursor: 'pointer' }" 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
					highlight-current-row
					row-key="id"
					:default-expand-all="true"
					:cell-style="{ cursor: 'pointer' }"
					: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>