From 278a183450b63c89262d068bb0e4bd374a758d90 Mon Sep 17 00:00:00 2001
From: Fixiaobai <fixiaobai@163.com>
Date: 星期四, 24 八月 2023 18:03:00 +0800
Subject: [PATCH] 角色管理
---
src/views/laboratory/role/index.vue | 226 +++++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 180 insertions(+), 46 deletions(-)
diff --git a/src/views/laboratory/role/index.vue b/src/views/laboratory/role/index.vue
index 494b9da..a56cda7 100644
--- a/src/views/laboratory/role/index.vue
+++ b/src/views/laboratory/role/index.vue
@@ -7,10 +7,6 @@
<el-input v-model="searchData.roleName" class="input-form" placeholder="璇疯緭鍏ヨ鑹插悕绉�" style="width:250px">
</el-input>
</el-form-item>
- <el-form-item label="鏉冮檺锛�" class="sermargin">
- <el-input v-model="searchData.permission" class="input-form" placeholder="璇疯緭鍏ユ潈闄�" style="width:250px">
- </el-input>
- </el-form-item>
<el-form-item class="rightBtn">
<el-button type="primary">鏌ヨ</el-button>
<el-button type="primary" plain>閲嶇疆</el-button>
@@ -28,11 +24,10 @@
<el-table :max-height="800" :cell-style="{ textAlign: 'center' }"
:header-cell-style="{ border: '0px', background: '#f5f7fa', color: '#606266', boxShadow: 'inset 0 1px 0 #ebeef5', textAlign: 'center' }"
:data="roleTable" style="width: 100%">
- <el-table-column type="selection" min-width="8%" />
- <el-table-column prop="rolename" label="瑙掕壊鍚嶇О" min-width="20%" />
- <el-table-column prop="permission" label="鏉冮檺" min-width="20%" />
- <el-table-column prop="create_time" label="鍒涘缓鏃堕棿" min-width="20%" />
- <el-table-column prop="update_time" label="鏇存柊鏃堕棿" min-width="20%" />
+ <el-table-column type="index" min-width="8%" />
+ <el-table-column prop="roleName" label="瑙掕壊鍚嶇О" min-width="20%" />
+ <el-table-column prop="createTime" label="鍒涘缓鏃堕棿" min-width="20%" />
+ <el-table-column prop="updateTime" label="鏇存柊鏃堕棿" min-width="20%" />
<el-table-column label="鎿嶄綔" min-width="12%">
<template slot-scope="scope">
<el-button type="text" size="small">缂栬緫</el-button>
@@ -50,23 +45,61 @@
</div>
</div>
</div>
- <el-dialog title="鏂板瑙掕壊" :visible.sync="dialogTableVisible" width="60%">
+ <el-dialog title="鏂板瑙掕壊" :visible.sync="dialogTableVisible" width="50%">
<el-form :model="roleAdd" ref="roleAdd" label-position="right" label-width="100px">
- <el-form-item label="瑙掕壊鍚�:">
- <el-input style="width: 300px" v-model="roleAdd.roleName" placeholder="璇疯緭鍏ヨ鑹插悕">
- </el-input>
- </el-form-item>
- <el-form-item label="鍔熻兘閫夋嫨:">
- <el-cascader size="medium " v-model="roleAdd.menuData" :options="menuInfo">
- <template slot-scope="{ node, data }">
- <span>{{ data.label }}</span>
- <span v-if="!node.isLeaf"> ({{ }}) </span>
- </template>
- </el-cascader>
- </el-form-item>
+ <el-col :span="24" style="display: flex;justify-content: space-between;">
+ <el-form-item :rules="nameaRules" label="瑙掕壊鍚�:">
+ <el-input @blur="assertName" style="width: 300px" v-model="roleAdd.roleName" placeholder="璇疯緭鍏ヨ鑹插悕">
+ </el-input>
+ </el-form-item>
+ <!-- <el-form-item label="鑿滃崟閫夋嫨:">
+ <el-cascader style="width: 300px" collapse-tags size="medium " filterable :props="props"
+ v-model="roleAdd.menuData" :options="menuInfo">
+ <template slot-scope="{ data }">
+ <span>{{ data.label }}</span>
+ </template>
+ </el-cascader>
+ </el-form-item> -->
+ </el-col>
</el-form>
+ <el-col :span="24">
+ <el-table height="300" :data="menuInfo" style="width: 100%;margin-bottom: 20px;" row-key="id"
+ :default-expand-all="false" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
+ <el-table-column highlight-current-row prop="parentId" label="鑿滃崟绫诲瀷" sortable width="180">
+ <template slot-scope="scope">
+ <span v-if="scope.row.parentId == 0 && scope.row.children != undefined" style="color: #409eff;">涓昏彍鍗�</span>
+ <span v-if="scope.row.parentId == 0 && scope.row.children === undefined" style="color: #409eff;">
+ 涓昏彍鍗�
+ </span>
+ </template>
+ </el-table-column>
+ <el-table-column prop="name" label="鑿滃崟鍚�" sortable width="180">
+ <template slot-scope="scope">
+ <el-col v-if="scope.row.parentId == 0">
+ <span style="color: #409eff;">{{ scope.row.name }}</span>
+ </el-col>
+ <el-col v-else>
+ <span style="color: #40b815;">{{ scope.row.name }}</span>
+ </el-col>
+ </template>
+ </el-table-column>
+ <el-table-column prop="id" label="鎿嶄綔鏉冮檺">
+ <template slot-scope="scope">
+ <el-col v-if="scope.row.parentId == 0 && scope.row.children != undefined">
+ <!-- <el-checkbox v-model="scope.row.select">鏌ヨ</el-checkbox> -->
+ </el-col>
+ <el-col v-else>
+ <el-checkbox size="medium" v-model="scope.row.selected" @change="chekSelect(scope)">鏌ヨ</el-checkbox>
+ <el-checkbox size="medium" v-model="scope.row.added" @change="chekAdd(scope)">娣诲姞</el-checkbox>
+ <el-checkbox size="medium" v-model="scope.row.updated" @change="chekUpdate(scope)">淇敼</el-checkbox>
+ <el-checkbox size="medium" v-model="scope.row.deleted" @change="chekDelet(scope)">鍒犻櫎</el-checkbox>
+ </el-col>
+ </template>
+ </el-table-column>
+ </el-table>
+ </el-col>
<span slot="footer" class="dialog-footer">
- <el-button @click="dialogTableVisible = false">鍙� 娑�</el-button>
+ <el-button @click="clearAll">鍙� 娑�</el-button>
<el-button type="primary" @click="addRole">纭� 瀹�</el-button>
</span>
</el-dialog>
@@ -74,8 +107,12 @@
</template>
<script>
-import { getMenusTree } from '@/api/laboratory/role'
+import { getMenusTree, addRoleInfo, assertRepeat, getAllRoleAndMenuInfo } from '@/api/laboratory/role'
+import { default as menuPower } from './menuPower.vue'
export default {
+ components: {
+ menuPower: () => import('./menuPower.vue')
+ },
data() {
return {
props: { multiple: true },
@@ -83,22 +120,15 @@
roleName: null,
menuData: null
},
+ nameaRules: [{ required: true, message: '璇疯緭鍏ヨ鑹插悕' }],
+ menuTableTree: null,
searchData: {
roleName: '',
permission: ''
},
+ assertRepeatName: true,
menuInfo: [],
- roleTable: [{
- rolename: '閮ㄩ暱',
- permission: 'ROOT',
- create_time: '2023-07-04 12:12:12',
- update_time: '2023-07-04 12:12:12'
- }, {
- rolename: '缁勯暱',
- permission: '--',
- create_time: '2023-07-04 12:12:12',
- update_time: '2023-07-04 12:12:12'
- }],
+ roleTable: [],
updateData: {
oldPassWord: '',
newPassWord: '',
@@ -113,23 +143,62 @@
created() {
},
+ mounted() {
+ this.start()
+ },
methods: {
+ chekSelect(scope) {
+
+ },
+ async start() {
+ let res = await getAllRoleAndMenuInfo()
+ this.roleTable = res.data
+ console.log(res);
+ },
+ async assertName() {
+ if (this.roleAdd.roleName == null || this.roleAdd.roleName == '') {
+ this.$message({
+ message: '璇疯緭鍏ヨ鑹插悕',
+ type: 'warning'
+ });
+ return
+ }
+ let res = await assertRepeat({ roleName: this.roleAdd.roleName })
+ if (!res.data) {
+ this.assertRepeatName = false
+ this.$message({
+ message: '瑙掕壊鍚嶉噸澶嶏紝璇烽噸鏂拌緭鍏ワ紒',
+ type: 'warning'
+ });
+ } else {
+ this.assertRepeatName = true
+ }
+ },
+ chekAdd(scope) {
+ scope.row.selected = true
+ },
+ chekUpdate(scope) {
+ scope.row.selected = true
+ },
+ chekDelet(scope) {
+ scope.row.selected = true
+ },
async addClickRole() {
let res = await getMenusTree();
this.menuInfo = res.data
this.menuInfo.forEach(item => {
- item.select = false
- item.add = false
- item.update = false
- item.delete = false
+ this.$set(item, 'selected', false);
+ this.$set(item, 'added', false);
+ this.$set(item, 'updated', false);
+ this.$set(item, 'deleted', false);
if (item.children.length == 0) {
delete item['children']
} else {
item.children.forEach(c => {
- c.select = false
- c.add = false
- c.update = false
- c.delete = false
+ this.$set(c, 'selected', false);
+ this.$set(c, 'added', false);
+ this.$set(c, 'updated', false);
+ this.$set(c, 'deleted', false);
if (c.children.length == 0) {
delete c['children']
}
@@ -137,10 +206,68 @@
}
})
this.dialogTableVisible = true
- // console.log(this.dialogTableVisible)
},
- addRole() {
- console.log(this.roleAdd);
+ async addRole() {
+ if (this.roleAdd.roleName == null || this.roleAdd.roleName == '') {
+ this.$message({
+ message: '璇疯緭鍏ヨ鑹插悕',
+ type: 'warning'
+ });
+ return
+ }
+ if (!this.assertRepeatName) {
+ this.$message({
+ message: '瑙掕壊鍚嶉噸澶嶏紝璇烽噸鏂拌緭鍏�',
+ type: 'warning'
+ });
+ return
+ }
+ this.menuInfo.forEach(item => {
+ if (item.children != undefined) {
+ item.children.forEach(c => {
+ if (c.added) {
+ item.selected = true
+ }
+ if (c.selected) {
+ item.selected = true
+ }
+ if (c.updated) {
+ item.selected = true
+ }
+ if (c.deleted) {
+ item.selected = true
+ }
+ })
+ }
+ })
+ console.log(this.menuInfo);
+ this.roleAdd.menuData = JSON.parse(JSON.stringify(this.menuInfo));
+ this.roleAdd.menuData.forEach(item => {
+ if (item.children != undefined) {
+ let child = item.children.filter(c => {
+ return c.added == true || c.selected == true || c.deleted == true || c.updated === true
+ })
+ item.children = child
+ }
+ })
+ this.roleAdd.menuData = this.roleAdd.menuData.filter(item => {
+ return item.selected == true
+ })
+ let res = await addRoleInfo(this.roleAdd);
+ if (res.data) {
+ this.$message({
+ message: '娣诲姞瑙掕壊鎴愬姛',
+ type: 'success'
+ });
+ this.dialogTableVisible = false
+ } else {
+ this.$message.error('娣诲姞澶辫触锛佽閲嶆柊鎿嶄綔');
+ }
+ },
+ assertDml(a, b) {
+ a = b ? true : false
+ console.log(a);
+ return a
},
// search(){},
// reset(){},
@@ -153,6 +280,13 @@
handleCurrentChange(val) {
console.log(`褰撳墠鏄${val}椤礰)
this.currentPage = val
+ },
+ clearAll() {
+ this.roleAdd.roleName = null
+ this.roleAdd.menuData = null
+ this.menuInfo = []
+ this.assertRepeatName = true
+ this.dialogTableVisible = false
}
}
}
--
Gitblit v1.9.3