From 379c989eb261a84e7474c1f4817624532cb03fc7 Mon Sep 17 00:00:00 2001
From: lzhe <181968431@qq.com>
Date: 星期六, 06 四月 2024 23:31:10 +0800
Subject: [PATCH] 1
---
src/views/console/authority/role/save.vue | 64 +++++-------
src/views/console/authority/role/index.vue | 188 ++++++++++++++++++++++++++++++-------
2 files changed, 179 insertions(+), 73 deletions(-)
diff --git a/src/views/console/authority/role/index.vue b/src/views/console/authority/role/index.vue
index ee46f2c..0ac23d9 100644
--- a/src/views/console/authority/role/index.vue
+++ b/src/views/console/authority/role/index.vue
@@ -3,31 +3,58 @@
<div class="roleContainer">
<div class="roleContainer-title">瑙掕壊</div>
<ul>
- <li v-for="(item,index) in tableData" @click="changeLi(index)">
+ <li v-for="(item,index) in tableData" @click="changeTabaleLi(item,index)">
<span :class="{active: item.active}">{{item.roleName}}</span>
<div class="scopeBtn">
- <span style="margin-right: 12px;cursor: pointer;">閲嶅懡鍚�</span>
- <span>鍒犻櫎</span>
+ <span style="margin-right: 12px;cursor: pointer;" @click.stop="table_edit(item, index)">閲嶅懡鍚�</span>
+ <span @click="table_del(item, index)">鍒犻櫎</span>
</div>
</li>
</ul>
<div class="left-panel">
- <el-button type="primary" icon="el-icon-plus" @click="add">娣诲姞瑙掕壊</el-button>
+ <el-button type="primary" icon="el-icon-plus" @click="addRole">娣诲姞瑙掕壊</el-button>
</div>
</div>
- <el-tabs tab-position="top" class="roleTabs">
- <el-tab-pane label="鑿滃崟">
- <div class="treeMain">
- <el-tree ref="menu" node-key="name" :data="menu.list" :props="menu.props" show-checkbox></el-tree>
- </div>
- </el-tab-pane>
- <el-tab-pane label="鍗＄墖">
- <div class="treeMain">
- <el-tree ref="grid" node-key="key" :data="grid.list" :props="grid.props" :default-checked-keys="grid.checked" show-checkbox></el-tree>
- </div>
- </el-tab-pane>
- </el-tabs>
+ <div class="role-main-tabs">
+ <div class="role-main-header">
+ <div class="role-main-title">璐﹀彿</div>
+ <ul>
+ <li v-for="(item,index) in roleHeaderList" @click="changeHeaderLi(item,index)" :class="{titleActive: item.active}">{{item.realName}}</li>
+ <li class="role-header-add" @click="addUser">+ 娣诲姞璐﹀彿</li>
+ </ul>
+ <div class="role-main-title">鏉冮檺绠＄悊</div>
+ </div>
+ <el-tabs tab-position="top">
+ <el-tab-pane label="鑿滃崟">
+ <div class="treeMain">
+ <el-tree ref="menu" node-key="name" :data="menu.list" :props="menu.props" show-checkbox></el-tree>
+ </div>
+ </el-tab-pane>
+ <el-tab-pane label="鍗＄墖">
+ <div class="treeMain">
+ <el-tree ref="grid" node-key="key" :data="grid.list" :props="grid.props" :default-checked-keys="grid.checked" show-checkbox></el-tree>
+ </div>
+ </el-tab-pane>
+ </el-tabs>
+ </div>
+ <el-dialog title="浜哄憳閫夋嫨" v-model="userVisible" :width="500" destroy-on-close>
+ <div>
+ <el-table ref="userVisibleRef" :data="userVisibleData" style="width: 100%" @selection-change="userVisibleChange">
+ <el-table-column type="selection" width="55" />
+ <el-table-column label="濮撳悕" prop="realName" />
+ <el-table-column label="褰撳墠瑙掕壊" prop="roleName" />
+ <el-table-column label="鎵嬫満鍙�" prop="phone" />
+ <el-table-column label="閭" prop="email" />
+ </el-table>
+ <el-pagination @current-change="handleCurrentChange" style="margin-top: 12px;" layout="total, prev, pager, next" :total="total" />
+ </div>
+
+ <template #footer>
+ <el-button @click="userVisible=false" >鍙� 娑�</el-button>
+ <el-button type="primary" :loading="isSaveing" @click="userSubmit()">纭� 瀹�</el-button>
+ </template>
+ </el-dialog>
<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess" @closed="dialog.save=false"></save-dialog>
</div>
</template>
@@ -42,6 +69,16 @@
},
data() {
return {
+ total: 0,
+ searchData: {
+ current: 1,
+ size: 10
+ },
+ tableLiId: "", //褰撳墠瑙掕壊id
+ isSaveing: false,
+ userVisibleData: [],
+ userVisible: false,
+ roleHeaderList: [],
menu: {
list: [],
checked: [],
@@ -69,29 +106,75 @@
},
//apiObj: this.$API.system.role.list,
tableData: "",
- selection: []
+ userSelection: []
}
},
mounted(){
this.getRoleList(); //瑙掕壊鍒楄〃
+ this.getUser(); //鑾峰彇鍏ㄩ儴璐﹀彿
},
methods: {
- changeLi(index) {
+ userSubmit() {
+ var ids = [];
+ this.userSelection.forEach(item=> {
+ ids.push(item.id);
+ })
+ this.$HTTP.post(`/api/blade-user/${this.tableLiId}/save`,{ids}).then(res=> {
+ if(res.code == 200) {
+ this.userVisible = false;
+ this.$message.success("鎿嶄綔鎴愬姛");
+ this.getBladeList(this.tableLiId); //鑾峰彇浜哄憳鍒楄〃
+ }
+ })
+ },
+ userVisibleChange(selection) {
+ console.log(selection);
+ this.userSelection = selection;
+ },
+ addUser() { //娣诲姞璐﹀彿
+ this.userVisible = true;
+ },
+ getUser() { //鑾峰彇鍏ㄩ儴璐﹀彿
+ this.$HTTP.get(`/api/blade-user/page?current=${this.searchData.current}&size=10&deptId=`).then(res=> {
+ if(res.code == 200) {
+ this.userVisibleData = res.data.records;
+ this.total = res.data.total;
+ }
+ })
+ },
+ getBladeList(id) { //浜哄憳鍒楄〃
+ this.$HTTP.get(`/api/blade-user/${this.tableLiId}/list`).then(res=> {
+ if(res.code == 200) {
+ this.roleHeaderList = res.data;
+ }
+ })
+ },
+ changeHeaderLi(row,index) {
+ this.roleHeaderList.forEach(item=> {
+ item.active = false;
+ })
+ this.roleHeaderList[index].active = true;
+ },
+ changeTabaleLi(row,index) {
this.tableData.forEach(item=> {
item.active = false;
})
this.tableData[index].active = true;
+ this.tableLiId = row.id;
+ this.getBladeList(row.id); //鑾峰彇浜哄憳鍒楄〃
},
getRoleList() {
this.$HTTP.get("/api/blade-system/role/list?current=1&size=1000").then(res=> {
if(res.code == 200) {
res.data[0].active = true;
this.tableData = res.data;
+ this.tableLiId = this.tableData[0].id;
+ this.getBladeList(this.tableData[0].id); //鑾峰彇浜哄憳鍒楄〃
}
})
},
//娣诲姞
- add(){
+ addRole(){
this.dialog.save = true
this.$nextTick(() => {
this.$refs.saveDialog.open()
@@ -101,7 +184,7 @@
table_edit(row){
this.dialog.save = true
this.$nextTick(() => {
- this.$refs.saveDialog.open('edit').setData(row)
+ this.$refs.saveDialog.open('edit').setData(row);
})
},
//鏌ョ湅
@@ -112,15 +195,20 @@
})
},
//鍒犻櫎
- async table_del(row){
- var reqData = {id: row.id}
- var res = await this.$API.demo.post.post(reqData);
- if(res.code == 200){
- this.$refs.table.refresh()
- this.$message.success("鍒犻櫎鎴愬姛")
- }else{
- this.$alert(res.message, "鎻愮ず", {type: 'error'})
- }
+ table_del(row) {
+ var that = this;
+ this.$confirm(`鏄惁鍒犻櫎瑙掕壊-${row.roleName}?`, '', {
+ type: 'warning'
+ }).then(() => {
+ this.$HTTP.post("/api/blade-system/role/remove?ids="+row.id).then(res=> {
+ if(res.code == 200) {
+ that.$message.success("鎿嶄綔鎴愬姛");
+ that.getRoleList(); //瑙掕壊鍒楄〃
+ }
+ })
+ }).catch(() => {
+
+ })
},
//琛ㄦ牸閫夋嫨鍚庡洖璋冧簨浠�
selectionChange(selection){
@@ -154,11 +242,12 @@
},
//鏈湴鏇存柊鏁版嵁
handleSaveSuccess(data, mode){
- if(mode=='add'){
- this.$refs.table.refresh()
- }else if(mode=='edit'){
- this.$refs.table.refresh()
- }
+ this.getRoleList(); //瑙掕壊鍒楄〃
+ },
+ handleCurrentChange(val) {
+ console.log(`褰撳墠椤�: ${val}`);
+ this.searchData.current = val;
+ this.getUser();
}
}
}
@@ -215,11 +304,40 @@
text-align: center;
margin-top:8px;
}
-.rolePage .roleTabs {
+.rolePage .role-main-tabs {
flex: 1;
background-color: #fff;
padding: 8px;
margin-top:8px;
margin-right:8px;
}
+.role-main-title {
+ padding: 6px 10px;
+ font-size: 14px;
+ background-color: #d8e8d8;
+ margin-bottom: 8px;
+ border-radius: 2px;
+}
+.role-main-header ul {
+ padding: 20px 20px 10px;
+}
+.role-main-header ul li {
+ list-style-type: none;
+ display: inline-block;
+ width: 200px;
+ padding: 8px 20px;
+ margin: 0 10px 10px 0;
+ border: 1px solid #e5e5e5;
+ cursor: pointer;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+.role-main-header ul li.titleActive {
+ border: 1px solid #3b8e8e;
+}
+.role-main-header ul li.role-header-add {
+ display: inline-block;
+ border: 1px dashed #e5e5e5;
+}
</style>
diff --git a/src/views/console/authority/role/save.vue b/src/views/console/authority/role/save.vue
index 208dedd..f52b898 100644
--- a/src/views/console/authority/role/save.vue
+++ b/src/views/console/authority/role/save.vue
@@ -8,12 +8,12 @@
-->
<template>
<el-dialog :title="titleMap[mode]" v-model="visible" :width="500" destroy-on-close @closed="$emit('closed')">
- <el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="100px" label-position="left">
- <el-form-item label="瑙掕壊鍚嶇О" prop="label">
- <el-input v-model="form.label" clearable></el-input>
+ <el-form :model="addRoleForm" :rules="addRoleRules" :disabled="mode=='show'" ref="addRoleForm" label-width="100px" label-position="left">
+ <el-form-item label="瑙掕壊鍚嶇О" prop="roleName">
+ <el-input v-model="addRoleForm.roleName" clearable></el-input>
</el-form-item>
<el-form-item label="瑙掕壊鎺掑簭" prop="sort">
- <el-input-number v-model="form.sort" controls-position="right" :min="1" style="width: 100%;"></el-input-number>
+ <el-input-number v-model="addRoleForm.sort" controls-position="right" :min="1" style="width: 100%;"></el-input-number>
</el-form-item>
</el-form>
<template #footer>
@@ -37,25 +37,16 @@
visible: false,
isSaveing: false,
//琛ㄥ崟鏁版嵁
- form: {
+ addRoleForm: {
id:"",
- label: "",
- alias: "",
- sort: 1,
- status: 1,
- remark: ""
+ roleName: "",
+ roleAlias: "",
+ sort: null
},
//楠岃瘉瑙勫垯
- rules: {
- sort: [
- {required: true, message: '璇疯緭鍏ユ帓搴�', trigger: 'change'}
- ],
- label: [
- {required: true, message: '璇疯緭鍏ヨ鑹插悕绉�'}
- ],
- alias: [
- {required: true, message: '璇疯緭鍏ヨ鑹插埆鍚�'}
- ]
+ addRoleRules: {
+ roleName: [{required: true, message: '璇疯緭鍏ヨ鑹插悕绉�'}],
+ sort: [{required: true, message: '璇疯緭鍏ヨ鑹叉帓搴�'}]
}
}
},
@@ -71,32 +62,29 @@
},
//琛ㄥ崟鎻愪氦鏂规硶
submit(){
- this.$refs.dialogForm.validate(async (valid) => {
+ var obj = Object.assign({},this.addRoleForm);
+ this.$refs.addRoleForm.validate(async (valid) => {
if (valid) {
this.isSaveing = true;
- var res = await this.$API.demo.post.post(this.form);
- this.isSaveing = false;
- if(res.code == 200){
- this.$emit('success', this.form, this.mode)
- this.visible = false;
- this.$message.success("鎿嶄綔鎴愬姛")
- }else{
- this.$alert(res.message, "鎻愮ず", {type: 'error'})
- }
+ this.$HTTP.post("/api/blade-system/role/submit",obj).then(res=> {
+ this.isSaveing = false;
+ if(res.code == 200) {
+ this.$emit('success', this.addRoleForm, this.mode);
+ this.visible = false;
+ this.$message.success("鎿嶄綔鎴愬姛");
+ }else {
+ this.$alert(res.message, "鎻愮ず", {type: 'error'});
+ }
+ })
+ }else{
+ return false;
}
})
},
//琛ㄥ崟娉ㄥ叆鏁版嵁
setData(data){
- this.form.id = data.id
- this.form.label = data.label
- this.form.alias = data.alias
- this.form.sort = data.sort
- this.form.status = data.status
- this.form.remark = data.remark
-
//鍙互鍜屼笂闈竴鏍峰崟涓敞鍏ワ紝涔熷彲浠ュ儚涓嬮潰涓�鏍风洿鎺ュ悎骞惰繘鍘�
- //Object.assign(this.form, data)
+ Object.assign(this.addRoleForm, data)
}
}
}
--
Gitblit v1.9.3