171 lines
4.5 KiB
Vue
171 lines
4.5 KiB
Vue
<template>
|
|
<section class="addAccountRole">
|
|
<ai-detail>
|
|
<ai-title slot="title" :title="pageTitle" isShowBottomBorder isShowBack @onBackClick="$router.push({})"/>
|
|
<template #content>
|
|
<ai-card title="基本信息">
|
|
<template #content>
|
|
<el-form size="small" label-width="120px">
|
|
<el-form-item required label="账号角色名称">
|
|
<el-input clearable v-model="roleName" placeholder="请输入..."/>
|
|
</el-form-item>
|
|
</el-form>
|
|
</template>
|
|
</ai-card>
|
|
<ai-card title="角色信息(必选)">
|
|
<template #content>
|
|
<el-form size="small" label-width="120px">
|
|
<el-form-item required label="角色列表">
|
|
<div class="roleList">
|
|
<p class="input">
|
|
<el-input placeholder="请输入..." size="small" v-model="filterText" suffix-icon="iconfont iconSearch">
|
|
</el-input>
|
|
<el-button icon="iconfont iconDelete" size="small" @click="filterText=''">清空</el-button>
|
|
</p>
|
|
<div class="tree_list">
|
|
<el-tree
|
|
class="filter-tree"
|
|
:data="roleList"
|
|
show-checkbox
|
|
:props="defaultProps"
|
|
default-expand-all
|
|
:check-strictly="true"
|
|
node-key="id"
|
|
:default-checked-keys="defaultId"
|
|
:filter-node-method="filterNode"
|
|
ref="tree">
|
|
</el-tree>
|
|
</div>
|
|
</div>
|
|
</el-form-item>
|
|
</el-form>
|
|
</template>
|
|
</ai-card>
|
|
</template>
|
|
<template #footer>
|
|
<el-button @click="toAppRole">取消</el-button>
|
|
<el-button type="primary" @click="confirm">保存</el-button>
|
|
</template>
|
|
</ai-detail>
|
|
</section>
|
|
</template>
|
|
<script>
|
|
|
|
export default {
|
|
name: "addAccountRole",
|
|
inject: {instance: {}},
|
|
data() {
|
|
return {
|
|
roleName: '',
|
|
id: '',
|
|
roleList: [],
|
|
searchVal: '',
|
|
defaultProps: {
|
|
children: 'roles',
|
|
label: 'name'
|
|
},
|
|
treeList: [],
|
|
defaultId: [],
|
|
filterText: ''
|
|
}
|
|
},
|
|
computed: {
|
|
isAdd() {
|
|
return !this.$route.query?.info?.id
|
|
},
|
|
pageTitle() {
|
|
return this.isAdd ? "新增账号角色" : "编辑账号角色"
|
|
}
|
|
},
|
|
watch: {
|
|
filterText(val) {
|
|
this.$refs.tree.filter(val);
|
|
}
|
|
},
|
|
created() {
|
|
this.getAppList();
|
|
if (JSON.stringify(this.$route.query) != '{}') {
|
|
this.roleName = this.$route.query.info.name;
|
|
this.id = this.$route.query.info.id;
|
|
this.$route.query.info.appRoleList.forEach(e => {
|
|
this.defaultId.push(e.id)
|
|
})
|
|
}
|
|
},
|
|
methods: {
|
|
//查询下拉列表
|
|
getAppList() {
|
|
this.instance.post(`/admin/role-app/list-all`).then(res => {
|
|
if (res.code == 0) {
|
|
this.roleList = res.data;
|
|
this.roleList.forEach(e => {
|
|
e.disabled = true;
|
|
})
|
|
}
|
|
})
|
|
},
|
|
filterNode(value, data) {
|
|
if (!value) return true;
|
|
return data.name.indexOf(value) !== -1;
|
|
},
|
|
confirm() {
|
|
let crr = [];
|
|
let arrCheckList = [];
|
|
arrCheckList = this.$refs.tree.getCheckedKeys();
|
|
for (let i = 0; i < arrCheckList.length; i++) {
|
|
crr.push(arrCheckList[i]);
|
|
}
|
|
if (!this.roleName) {
|
|
this.$message.error('请输入账号角色名称')
|
|
return;
|
|
}
|
|
if (crr.length == 0) {
|
|
this.$message.error('请选择角色列表')
|
|
return;
|
|
}
|
|
this.instance.post(`/admin/role-acc/modify?appRoles=${crr}`, null, {
|
|
params: {
|
|
roleName: this.roleName,
|
|
id: this.id
|
|
}
|
|
}).then(res => {
|
|
if (res?.code == 0) {
|
|
this.$message({message: '保存成功', type: 'success'});
|
|
this.toAppRole()
|
|
}
|
|
})
|
|
},
|
|
//取消 返回
|
|
toAppRole() {
|
|
this.$router.push({})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.addAccountRole {
|
|
height: 100%;
|
|
|
|
.roleList {
|
|
display: inline-block;
|
|
width: 340px;
|
|
height: 420px;
|
|
background-color: #fcfcfc;
|
|
border-radius: 2px;
|
|
border: solid 1px #d0d4dc;
|
|
|
|
.input {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 5px;
|
|
margin: 0;
|
|
}
|
|
|
|
.tree_list {
|
|
height: 370px;
|
|
overflow: auto;
|
|
}
|
|
}
|
|
}
|
|
</style>
|