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.disabled" class="settingBtn" @click="changeRole(data)">设置</span>
            <span v-else class="hasSetted">已设置</span>
          </span>
        </span>

      </span>
    </el-tree>
  </div>
</template>
<script>
import { getToken } from '@/utils/auth';
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');
        },
        switchMode(member) {
            this.loading = true;
            changeScriptRole(this.group, member.id).then(res=>{
                let prdType = '';
                if (this.openWindow) {
                    this.openWindow.close();
                }
                const role = Object.assign({}, member);
                if (role.type == '行值') {
                    prdType = '01';
                    role.type = 'STATION_SUPERVISOR';
                    this.$store.dispatch('training/setRoles', 'STATION_SUPERVISOR');
                    this.$store.dispatch('training/setRoleDeviceCode', role.deviceCode);
                } else if (role.type == '行调') {
                    prdType = '02';
                    role.type = 'DISPATCHER';
                    this.$store.dispatch('training/setRoles', 'DISPATCHER');
                } else if (role.type == '司机') {
                    prdType = '04';
                    role.type = 'DRIVER';
                    this.$store.dispatch('training/setRoles', 'DRIVER');
                } else if (role.type == '通号') {
                    prdType = '';
                    role.type = 'MAINTAINER';
                    this.$store.dispatch('training/setRoles', 'MAINTAINER');
                    const routeData = this.$router.resolve({
                        path:'/jlmap3d/maintainer',
                        query:{
                            mapid:this.$route.query.mapId,
                            group:this.group,
                            token:getToken(),
                            project: this.project,
                            noPreLogout: true
                        }
                    });
                    this.openWindow = window.open(routeData.href);
                } else if (role.type == '车辆段调度') {
                    prdType = '05';
                    role.type = 'DEPOT_DISPATCHER';
                    this.$store.dispatch('training/setRoles', 'DEPOT_DISPATCHER');
                } else if (role.type == '上级部门') {
                    prdType = '';
                    role.type = 'PARENT_DEPARTMENT';
                    this.$store.dispatch('training/setRoles', 'PARENT_DEPARTMENT');
                } else {
                    prdType = '';
                }
                this.$store.dispatch('training/setPrdType', prdType);
                this.$store.dispatch('scriptRecord/updateRole', role.type + ':' + role.id);
                this.$emit('setMemberId', {newRole:role, oldRole:this.oldMember});
                this.$store.dispatch('training/updateMemberListInScript',
                    {
                        oldMemberId:Object.assign({}, this.oldMember).id,
                        newMemberId:role.id,
                        userId:this.$store.state.user.id,
                        name:this.$store.state.user.nickname
                    }
                );
                this.oldMember = Object.assign({}, role);
                this.loading = false;
                this.$message('切换角色成功');
            }).catch(()=>{
                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>