<!-- Vue SFC -->
<template>
<div class="h overflow">
<div class="new-header clearfix bxs">
<div class="header-item header-lf h cupo" @click="backFn">
<i class="el-icon-arrow-left"></i>
<span class="header-lf-btn cor6 h">返回</span>
</div>
<div class="header-item header-rt h">
<el-button type="primary" size="mini" @click="saveBefore('form')">保存</el-button>
</div>
</div>
<div class="new-content bxs" style="overflow-y: auto;">
<el-form :rules="rules" ref="form" :model="role" label-width="120px">
<el-form-item label="角色名称：" prop="roleName">
<el-input
v-model="role.roleName"
class="w500"
maxlength="15"
minlength="0"
show-word-limit
></el-input>
</el-form-item>
<el-form-item label="角色类型：">
<span>{{this.$route.query.id?role.roleTypeDesc:'业务角色'}}</span>
</el-form-item>
<el-form-item label="角色说明：" prop="remark">
<el-input
type="textarea"
rows="5"
class="w500"
maxlength="250"
minlength="0"
show-word-limit
v-model="role.remark"
></el-input>
</el-form-item>
<el-form-item label="角色权限：">
<el-table :data="data" style="width: 100%" @selection-change="handleSelectionChange">
<!-- @click="handleSelectionOnly(scope.row)" -->
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column type="expand">
<template slot-scope="props">
<div class="flex">
<el-checkbox-group
v-model="checkArr[props.$index]"
@change="cheChange(props.row.$index)"
>
<el-checkbox
v-for="(item,i) of props.row.authorityDtos"
:key="i"
:label="item.authorityCode"
>{{item.authorityName}}</el-checkbox>
</el-checkbox-group>
</div>
</template>
</el-table-column>
<el-table-column label="权限名称" prop="moduleName"></el-table-column>
</el-table>
<!-- <el-tree
:data="data"
show-checkbox
:props="defaultProps"
:default-expand-all="true"
:check-on-click-node="true"
@check="clickBox"
@check-change="parentModules"
@node-click="clickBox"
node-key="authorityCode"
ref="tree"
></el-tree>-->
</el-form-item>
</el-form>
</div>
<div>
<button @click="getcheckArr">点击</button>
</div>
</div>
</template>
<script>
import { putRole, roleWithAuthority, getOrgTree } from "@/api/role_Manage";
export default {
name: "newRole",
components: {},
data() {
return {
role: {
remark: "",
roleAuthorityCodes: [],
roleId: "",
roleName: "",
roleType: null,
roleTypeDesc: "",
},
checkList: [],
rules: {
roleName: [
{
min: 0,
max: 15,
message: "长度在 0 到 15 个字符",
trigger: "blur",
},
{ required: true, message: "请输入角色名称", trigger: "blur" },
],
remark: [
{
min: 0,
max: 250,
message: "长度在 0 到 250 个字符",
trigger: "blur",
},
],
},
data: [],
defaultProps: {
children: "authorityDtos",
label: "authorityName",
},
checkArr: [],
checkArrCopy: [],
};
},
created() {
console.log(this.$route.query);
this.getOrgTree();
if (this.$route.query.id) {
this.getData();
}
},
methods: {
handleSelectionOnly(e, index) {
console.log(e);
console.log(index);
},
getcheckArr() {
console.log(this.checkArr);
},
// 获取数据
async getData() {
// let user = this.$store.state.user.userinfo;
let datVal = {
roleId: this.$route.query.id,
};
console.log(datVal);
this.loading = true;
const result = await roleWithAuthority(datVal);
this.role = result.data;
this.loading = false;
console.log(result.data);
},
// 获取机构树
async getOrgTree() {
const result = await getOrgTree();
this.data = result.data;
console.log(result.data);
let num = result.data.length;
let arr = [];
for (let i = 0; i < num; i++) {
arr.push([]);
}
this.checkArr = arr;
this.checkArrCopy = JSON.parse(JSON.stringify(arr));
console.log(this.checkArr);
},
backFn() {
this.$router.push({
name: "roleList",
});
},
saveBefore(formName) {
this.$refs[formName].validate(async (valid) => {
if (valid) {
if (!this.$route.query.id) {
this.role.roleType = 1;
}
this.loading = true;
const result = await putRole(this.role);
console.log(result);
this.loading = false;
} else {
console.log("error submit!!");
return false;
}
});
},
handleSelectionChange(val) {
console.log(val);
let lists = this.data;
let indexArr = [];
if (val.length == 0) {
this.checkArr = JSON.parse(JSON.stringify(this.checkArrCopy));
} else {
for (let j = 0; j < val.length; j++) {
for (let i = 0; i < lists.length; i++) {
if (val[j].moduleCode == lists[i].moduleCode) {
indexArr.push(i);
}
}
}
let checkArr = this.checkArr;
console.log(indexArr);
for (let i = 0; i < indexArr.length; i++) {
let cheArr = [];
for (let j = 0; j < lists[indexArr[i]].authorityDtos.length; j++) {
cheArr.push(lists[indexArr[i]].authorityDtos[j]);
}
checkArr[indexArr[i]] = cheArr;
}
this.checkArr = JSON.parse(JSON.stringify(checkArr));
}
},
cheChange(val) {
console.log(val);
},
},
};
</script>
<style lang="scss" scoped>
.new-header {
width: 100%;
height: 40px;
position: absolute;
left: 0;
top: 0;
z-index: 100;
background: #fff;
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
.header-item {
line-height: 40px;
}
.header-lf {
position: absolute;
left: 10px;
top: 0;
.header-lf-btn {
display: inline-block;
font-size: 12px;
vertical-align: top;
padding-right: 20px;
}
}
.header-rt {
position: absolute;
right: 10px;
top: 0;
}
}
.new-content {
padding-top: 40px;
padding-right: 40px;
}
</style>
