rt-sim-training-client/src/views/scriptManage/allScriptRole.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.indexOf(value) !== -1;
        },
        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: 5px 10px;
    border-radius: 4px;
}
.hasSetted{

}
</style>
<style>
.eachScriptPanel .el-tree-node:focus>.el-tree-node__content {
    background-color: #b7b7b7;
}
.eachScriptPanel .el-tree-node__content:hover {
    background-color: #b7b7b7;
}
</style>