Skip to content

F
founder_vue
Commit 955f5aff by maxiaohan
Options

Merge remote-tracking branch 'origin/dev_zwpt' into dev_zwpt

parents 1588fc6d 5c5e6e93
Showing with 335 additions and 190 deletions
src/views/SystemManage/RoleManage.vue
......@@ -25,49 +25,82 @@
"
/>
</div>
<div class="img-btn" @click="del(diyRoleItemIndex)">
<img
src="../../assets/img/role/delete.png"
style="
height: 0.9375rem;
width: 0.9375rem;
margin-left: 0.0625rem;
margin-top: 0.25rem;
"
/>
</div>
</div>
<div class="default-role">
<div
class="default-role-item"
v-for="item in defaultRoleBtns"
:key="item.id"
:class="{ active: item.id === defaultRoleItemIndex }"
:class="{ active: item.id === diyRoleItemIndex }"
@click="chooseDefaultRoleItem(item)"
>
{{ item.name }}
</div>
</div>
<div class="diy-roles">
<div
class="diy-role-item"
v-for="(item, index) in diyRoleList"
:key="item.id"
:class="{ active: item.id === diyRoleItemIndex }"
@click="chooseDiyRoleItem(item.id)"
>
<div v-show="item.id !== diyRoleItemIndex" class="diy-edit-title">
{{ item.name }}
</div>
<el-input
v-show="item.id === diyRoleItemIndex"
size="mini"
class="diy-edit-title"
v-model="item.name"
></el-input>
<div class="diy-edit-btn">
<img class="img" :src="editurl" @click="editDiyRoleItem(index)" />
<div class="delbtns">
<div
class="delicon"
v-if="!delimgBoo"
@click="delimgBoo = !delimgBoo"
>
<img
style="width: 0.85rem; height: 0.85rem; cursor: pointer"
src="../../assets/img/qbryk/del333.png"
/>
<span>删除</span>
</div>
<Confirmation
@onConfirm="del(scope.row.id)"
content="删除"
v-if="delimgBoo"
:hintBoo="true"
>
<div slot="reference" class="delicon2">
<img
style="width: 0.85rem; height: 0.85rem; cursor: pointer"
src="../../assets/img/qbryk/delcolor.png"
/>
<span>删除</span>
</div>
</Confirmation>
</div>
<div class="autoPlay" ref="diyRoles">
<el-checkbox-group v-model="btnCheckList">
<div v-for="item in diyRoleList" :key="item.id" class="chooseItem">
<el-checkbox :label="item.id" class="checkChoose" v-if="delimgBoo"
>1</el-checkbox
>
<div
:class="{
'diy-role-item': true,
active: item.id === diyRoleItemIndex,
delWidth: delimgBoo,
}"
>
<div
v-show="!item.edit"
class="diy-edit-title"
@click="chooseDiyRoleItem(item)"
>
{{ item.name }}
</div>
<el-input
v-show="item.edit"
size="mini"
class="diy-edit-title"
v-model="item.name"
></el-input>
<div class="diy-edit-btn">
<img
class="img"
:src="editurl"
@click.stop="editDiyRoleItem(item)"
/>
</div>
</div>
</div>
</el-checkbox-group>
</div>
</div>
</div>
......@@ -85,145 +118,161 @@
<div class="btn" @click="save">保存</div>
</div>
</div>
<div class="role-info">
<!-- 角色权限菜单列-->
<div class="menus">
<div class="div3">
<el-checkbox v-model="permissionDataList[0].id">
{{ permissionDataList[0].name }}
</el-checkbox>
<el-checkbox v-model="permissionDataList[1].id">
{{ permissionDataList[1].name }}
</el-checkbox>
<el-checkbox v-model="permissionDataList[2].id">
{{ permissionDataList[2].name }}
</el-checkbox>
</div>
<div class="div3">
<el-checkbox v-model="permissionDataList[3].id">
{{ permissionDataList[3].name }}
</el-checkbox>
</div>
<div class="div1">
<el-checkbox v-model="permissionDataList[4].id">
{{ permissionDataList[4].name }}
</el-checkbox>
</div>
<div class="div1">
<el-checkbox v-model="permissionDataList[5].id">
{{ permissionDataList[5].name }}
</el-checkbox>
</div>
<div class="div1">
<el-checkbox v-model="permissionDataList[6].id">
{{ permissionDataList[6].name }}
</el-checkbox>
</div>
<div class="div2">
<el-checkbox v-model="permissionDataList[7].id">
{{ permissionDataList[7].name }}
</el-checkbox>
</div>
<div class="div3">
<el-checkbox v-model="permissionDataList[8].id">
{{ permissionDataList[8].name }}
</el-checkbox>
</div>
</div>
<div class="content">
<div class="div3">
<div
class="line"
v-for="item in permissionDataList[0].children"
:key="item.id"
>
<el-checkbox v-model="item.id"> {{ item.name }}</el-checkbox>
<el-checkbox-group v-model="checkList" :disabled="disabled">
<div class="role-info">
<!-- 角色权限菜单列-->
<div class="menus">
<div class="div3">
<el-checkbox :label="permissionDataList[0].id">
{{ permissionDataList[0].name }}
</el-checkbox>
<el-checkbox :label="permissionDataList[1].id">
{{ permissionDataList[1].name }}
</el-checkbox>
<el-checkbox :label="permissionDataList[2].id">
{{ permissionDataList[2].name }}
</el-checkbox>
</div>
<br />
<div
class="line"
v-for="item in permissionDataList[1].children"
:key="item.id"
>
<el-checkbox v-model="item.id"> {{ item.name }}</el-checkbox>
<div class="div3">
<el-checkbox :label="permissionDataList[3].id">
{{ permissionDataList[3].name }}
</el-checkbox>
</div>
<br />
<div
class="line"
v-for="item in permissionDataList[2].children"
:key="item.id"
>
<el-checkbox v-model="item.id"> {{ item.name }}</el-checkbox>
<div class="div1">
<el-checkbox :label="permissionDataList[4].id">
{{ permissionDataList[4].name }}
</el-checkbox>
</div>
</div>
<div class="div3">
<div
class="line"
v-for="item in permissionDataList[3].children"
:key="item.id"
>
<el-checkbox v-model="item.id"> {{ item.name }}</el-checkbox>
<div class="div1">
<el-checkbox :label="permissionDataList[5].id">
{{ permissionDataList[5].name }}
</el-checkbox>
</div>
</div>
<div class="div1">
<div
class="line"
v-for="item in permissionDataList[4].children"
:key="item.id"
>
<el-checkbox v-model="item.id"> {{ item.name }}</el-checkbox>
<div class="div1">
<el-checkbox :label="permissionDataList[6].id">
{{ permissionDataList[6].name }}
</el-checkbox>
</div>
</div>
<div class="div1">
<div
class="line"
v-for="item in permissionDataList[5].children"
:key="item.id"
>
<el-checkbox v-model="item.id"> {{ item.name }}</el-checkbox>
<div class="div2">
<el-checkbox :label="permissionDataList[7].id">
{{ permissionDataList[7].name }}
</el-checkbox>
</div>
</div>
<div class="div1">
<div
class="line"
v-for="item in permissionDataList[6].children"
:key="item.id"
>
<el-checkbox v-model="item.flag"> {{ item.name }}</el-checkbox>
<div class="div3">
<el-checkbox :label="permissionDataList[8].id">
{{ permissionDataList[8].name }}
</el-checkbox>
</div>
</div>
<div class="div2">
<div
class="line"
v-for="item in permissionDataList[7].children"
:key="item.id"
>
<el-checkbox v-model="item.id"> {{ item.name }}</el-checkbox>
<div class="content">
<div class="div3">
<div
class="line"
v-for="item in permissionDataList[0].children"
:key="item.id"
>
<el-checkbox :label="item.id"> {{ item.name }}</el-checkbox>
</div>
<br />
<div
class="line"
v-for="item in permissionDataList[1].children"
:key="item.id"
>
<el-checkbox :label="item.id"> {{ item.name }}</el-checkbox>
</div>
<br />
<div
class="line"
v-for="item in permissionDataList[2].children"
:key="item.id"
>
<el-checkbox :label="item.id"> {{ item.name }}</el-checkbox>
</div>
</div>
</div>
<div class="div3">
<div
class="line"
v-for="item in permissionDataList[8].children"
:key="item.id"
>
<el-checkbox v-model="item.id"> {{ item.name }}</el-checkbox>
<div class="div3">
<div
class="line"
v-for="item in permissionDataList[3].children"
:key="item.id"
>
<el-checkbox :label="item.id"> {{ item.name }}</el-checkbox>
</div>
</div>
<div class="div1">
<div
class="line"
v-for="item in permissionDataList[4].children"
:key="item.id"
>
<el-checkbox :label="item.id"> {{ item.name }}</el-checkbox>
</div>
</div>
<div class="div1">
<div
class="line"
v-for="item in permissionDataList[5].children"
:key="item.id"
>
<el-checkbox :label="item.id"> {{ item.name }}</el-checkbox>
</div>
</div>
<div class="div1">
<div
class="line"
v-for="item in permissionDataList[6].children"
:key="item.id"
>
<el-checkbox :label="item.id"> {{ item.name }}</el-checkbox>
</div>
</div>
<div class="div2">
<div
class="line"
v-for="item in permissionDataList[7].children"
:key="item.id"
>
<el-checkbox :label="item.id"> {{ item.name }}</el-checkbox>
</div>
</div>
<div class="div3">
<div
class="line"
v-for="item in permissionDataList[8].children"
:key="item.id"
>
<el-checkbox :label="item.id"> {{ item.name }}</el-checkbox>
</div>
</div>
</div>
</div>
</div>
</el-checkbox-group>
</div>
</el-container>
</template>
<script>
import "@/icons/ic_add.svg";
import Confirmation from "@/components/Confirmation.vue";
export default {
name: "RoleManage",
components: {
Confirmation,
},
watch: {
roleMenusSelection: function (val) {
console.info(val);
},
btnType: {
immediate: true,
handler(val) {
if (val == "default") {
this.disabled = true;
} else {
this.disabled = false;
}
},
},
},
data() {
return {
......@@ -231,6 +280,7 @@ export default {
editurl: require("@/assets/img/edit.png"),
funFlag: true,
dataFlag: false,
checkList: [],
roles: [],
addRoleParams: [],
// 角色按钮
......@@ -241,8 +291,12 @@ export default {
roleMenusSelection: [],
// 自定义的角色组
diyRoleList: [],
diyRoleItemIndex: -1,
defaultRoleItemIndex: -1,
diyRoleItemIndex: 2,
defaultRoleItemIndex: 2,
btnType: "default",
disabled: true,
delimgBoo: false,
btnCheckList: [],
};
},
methods: {
......@@ -315,6 +369,12 @@ export default {
} else {
this.diyRoleList.push(item);
}
if (res.data.length > 0) {
this.checkList = res.data[0].permissions.map((i) => i.id);
} else {
this.checkList = [];
}
});
console.info("角色权限===》", this.defaultRoleBtns);
......@@ -333,14 +393,17 @@ export default {
},
// 新增
add() {
this.resetEdit();
var roleitem = {
name: "自定义" + (this.diyRoleList.length + 1),
flag: false,
code: this.diyRoleList.length,
edit: false,
edit: true,
};
this.diyRoleList.push(roleitem);
console.info("新增数据");
setTimeout(() => {
this.$refs.diyRoles.scrollTop = this.$refs.diyRoles.scrollHeight;
}, 20);
},
// 编辑
edit() {
......@@ -348,31 +411,44 @@ export default {
},
// 选中默认权限
chooseDefaultRoleItem(item) {
this.defaultRoleItemIndex = item.id;
this.defaultRoleBtns.forEach((roleitem, idx) => {
if (idx === item.id) {
roleitem.flag = true;
} else {
roleitem.flag = false;
}
});
this.btnType = "default";
this.viewSelect(item);
this.diyRoleItemIndex = item.id;
},
viewSelect(item) {
this.checkList =
(item.permissions && item.permissions.map((i) => i.id)) || [];
},
// 选中自定义某个权限
chooseDiyRoleItem(index) {
this.diyRoleItemIndex = index;
this.diyRoleList.forEach((roleitem, idx) => {
if (idx === index) {
roleitem.flag = true;
} else {
roleitem.flag = false;
}
});
// this.diyRoleList[index].flag = true;
chooseDiyRoleItem(item) {
this.btnType = "custom";
if (item.id !== this.diyRoleItemIndex) {
this.resetEdit();
}
this.diyRoleItemIndex = item.id;
this.viewSelect(item);
},
// 编辑
editDiyRoleItem(id) {
this.diyRoleList[id].edit = true;
console.info("编辑方法");
editDiyRoleItem(item) {
let edit = item.edit;
let index = this.diyRoleList.findIndex((i) => i.id == item.id);
if (!edit && typeof edit != Boolean) edit = false;
edit = !edit;
this.$set(this.diyRoleList[index], "edit", edit);
this.btnType = "custom";
if (item.id !== this.diyRoleItemIndex) {
this.resetEdit();
}
this.diyRoleItemIndex = item.id;
this.viewSelect(item);
},
//重置编辑状态
resetEdit() {
let newArr = this.diyRoleList.map((i) => {
i.edit = false;
return i;
});
this.diyRoleList = newArr;
},
funAuth() {
this.funFlag = true;
......@@ -390,7 +466,9 @@ export default {
this.getPermissionDataLists();
},
mounted() {
this.defaultRoleBtns[0].flag = true;
setTimeout(() => {
console.log(66666666, this.permissionDataList);
}, 2000);
this.funFlag = true;
},
};
......@@ -398,4 +476,69 @@ export default {
<style scoped lang="scss">
@import "scss/role";
.delicon {
font-size: 10px;
display: flex !important;
align-items: center;
cursor: pointer;
position: absolute;
right: 0;
padding-right: 10px;
> img {
margin-right: 5px;
}
}
.delicon2 {
font-size: 10px;
display: flex !important;
align-items: center;
cursor: pointer;
padding-right: 5px;
color: #055fe7;
> img {
margin-right: 5px;
}
}
.delbtns {
position: absolute;
top: 0;
left: 0;
height: 21px;
width: 100%;
text-align: right;
padding-right: 5px;
margin-top: 10px;
color: #333333 !important;
}
.diy-roles {
position: relative;
padding-top: 25px;
padding-left: 0 !important;
overflow: hidden !important;
display: flex !important;
justify-content: space-between;
flex-flow: column nowrap;
}
.autoPlay {
height: calc(100% - 40px);
margin-top: 10px;
padding-left: 20px;
overflow: auto;
}
.chooseItem {
position: relative;
width: 100%;
}
.checkChoose {
position: absolute;
left: -20px;
top: 50%;
transform: translateY(-30%);
/deep/ .el-checkbox__label {
display: none;
}
}
.delWidth {
width: 170px !important;
}
</style>
src/views/SystemManage/scss/role.scss
......@@ -62,8 +62,7 @@
color: #666666;
font-size: 14px;
background: #f6f8fa;
box-shadow: 4px 4px 4px 0px rgba(193, 216, 251, 0.8),
-4px -4px 4px 0px #ffffff;
box-shadow: 4px 4px 4px 0px rgba(193, 216, 251, 0.8), -4px -4px 4px 0px #ffffff;
border-radius: 4px;
margin-top: 10px;
cursor: pointer;
......@@ -77,7 +76,7 @@
}
}
}
.diy-roles{
.diy-roles {
//border: saddlebrown 1px solid;
width: 215px;
height: 366px;
......@@ -85,12 +84,16 @@
padding-left: 20px;
//display: flex;
//flex-direction: column;
overflow:scroll;
.diy-role-item{
overflow: scroll;
.diy-role-item {
float: right;
box-sizing: border-box;
padding-right: 40px;
position: relative;
width: 190px;
height: 40px;
border-radius: 4px;
border: 1px solid #AEB5C2;
border: 1px solid #aeb5c2;
font-size: 14px;
color: #333333;
line-height: 40px;
......@@ -98,30 +101,30 @@
margin-left: -22px;
cursor: pointer;
overflow: hidden;
&.active{
border: 1px solid #055FE7;
color: #055FE7;
&.active {
border: 1px solid #055fe7;
color: #055fe7;
}
.diy-edit-title{
.diy-edit-title {
width: 146px;
height: 19px;
font-size: 14px;
color: #333333;
line-height: 19px;
}
.diy-edit-btn{
.diy-edit-btn {
width: 40px;
height: 30px;
background: #DDEBFF;
background: #ddebff;
box-shadow: 0px 0px 4px 0px rgba(5, 95, 231, 0.3);
border-bottom-left-radius:250px;
position: relative;
border-bottom-left-radius: 250px;
position: absolute;
right: 0;
top: -3px;
.img{
top: 0;
.img {
width: 13px;
height: 14px;
margin-bottom:13px;
margin-bottom: 13px;
cursor: pointer;
}
}
......@@ -184,8 +187,7 @@
width: 100%;
height: 690px;
background: #ffffff;
box-shadow: 1px 0px 3px 0px rgba(5, 95, 231, 0.3),
-1px 1px 3px 0px rgba(5, 95, 231, 0.24);
box-shadow: 1px 0px 3px 0px rgba(5, 95, 231, 0.3), -1px 1px 3px 0px rgba(5, 95, 231, 0.24);
border-radius: 10px;
display: flex;
flex-direction: row;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment