137 lines
3.5 KiB
Vue
137 lines
3.5 KiB
Vue
<template>
|
|
<div style="width:95%;height:100%">
|
|
<div>
|
|
<el-input v-model="queryMember" placeholder="请输入搜索人员" style="width:300px">
|
|
<el-button slot="append" icon="el-icon-search" />
|
|
</el-input>
|
|
<el-button @click="addMember">添加仿真成员</el-button>
|
|
</div>
|
|
<el-tree
|
|
ref="tree"
|
|
v-loading="loading"
|
|
:data="treeData"
|
|
:props="defaultProps"
|
|
node-key="id"
|
|
default-expand-all
|
|
:filter-node-method="filterNode"
|
|
style="margin: 10px;overflow-y:auto;height:255px;margin-right: 0;"
|
|
>
|
|
<span :id="data.id" slot-scope="{ node, data }" style="width:100%">
|
|
<span v-if="data.children">
|
|
<span style="font-size: 14px">{{ node.label }}</span>
|
|
</span>
|
|
<span v-else>
|
|
<span style="font-size: 14px">{{ data.normalName }}</span>
|
|
<span v-if="data.type!='role'" class="setGroup">
|
|
<span v-if="data.id==memberId" class="hasSetted">已设置</span>
|
|
<span v-else class="settingBtn" @click="changeRole(data)">设置</span>
|
|
</span>
|
|
</span>
|
|
|
|
</span>
|
|
</el-tree>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import {changeScriptRole} from '@/api/script';
|
|
export default {
|
|
name:'AllScriptRole',
|
|
props:{
|
|
treeData:{
|
|
type: Array,
|
|
default() {
|
|
return [];
|
|
}
|
|
},
|
|
memberId:{
|
|
type: String,
|
|
default() {
|
|
return '';
|
|
}
|
|
},
|
|
group: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
covertMemberList:[],
|
|
driverList:[],
|
|
// oldMember:{id:null, type:''},
|
|
queryMember:'',
|
|
loading:false,
|
|
defaultProps: {
|
|
children: 'children',
|
|
label: 'label'
|
|
}
|
|
};
|
|
},
|
|
watch:{
|
|
queryMember(val) {
|
|
if (this.$refs.tree) {
|
|
this.$refs.tree.filter(val);
|
|
}
|
|
}
|
|
// 'treeData':function(val) {
|
|
// const roleName = this.$store.state.scriptRecord.userRole;
|
|
// this.oldMember = {id:this.memberId, type:roleName};
|
|
// }
|
|
},
|
|
methods:{
|
|
filterNode(value, data) {
|
|
return data.label.includes(value);
|
|
},
|
|
changeRole(member) {
|
|
if (member) {
|
|
this.switchMode(member);
|
|
}
|
|
},
|
|
addMember() {
|
|
this.$emit('addMember');
|
|
},
|
|
updateLoading() {
|
|
this.loading = false;
|
|
this.$message('切换角色成功');
|
|
},
|
|
switchMode(member) {
|
|
this.loading = true;
|
|
changeScriptRole(this.group, member.id).then(res=>{
|
|
this.$emit('changeMode', member);
|
|
}).catch(()=>{
|
|
this.loading = false;
|
|
this.$messageBox('切换角色失败');
|
|
// this.$refs.changeScriptRole.blur();
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style scoped>
|
|
.setGroup{
|
|
font-size: 14px;
|
|
float: right;
|
|
margin-right: 15px;
|
|
}
|
|
.settingBtn{
|
|
color: #409eff;
|
|
cursor: pointer;
|
|
padding: 2px 10px;
|
|
border-radius: 4px;
|
|
border: 1px #409eff solid;
|
|
}
|
|
.hasSetted{
|
|
width: 50px;
|
|
text-align: center;
|
|
display: inline-block;
|
|
}
|
|
</style>
|
|
<style>
|
|
.eachScriptPanel .el-tree-node:focus>.el-tree-node__content {
|
|
background-color: #b7b7b7;
|
|
}
|
|
.eachScriptPanel .el-tree-node__content:hover {
|
|
background-color: #b7b7b7;
|
|
}
|
|
</style>
|