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"
      :data="covertMemberList"
      :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 style="font-size: 14px">{{ data.label }}</span>
        <span v-if="data.type!='role'" class="setGroup">
          <span v-if="data.id!=memberId" class="settingBtn" @click="changeRole(data)">设置</span>
          <span v-else class="hasSetted">已设置</span>
        </span>
      </span>
    </el-tree>
  </div>
</template>
<script>
import { getToken } from '@/utils/auth';
import ConstConfig from '@/scripts/ConstConfig';

import {changeScriptRole} from '@/api/script';
export default {
    name:'AllScriptRole',
    props:{
        memberList:{
            type: Array,
            default() {
                return [];
            }
        },
        memberId:{
            type: String,
            default() {
                return '';
            }
        },
        group: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            covertMemberList:[],
            driverList:[],
            queryMember:'',
            oldMemberId:'',
            defaultProps: {
                children: 'children',
                label: 'label'
            }
        };
    },
    watch:{
        'memberList':function(val) {
            if (val && val.length > 0) {
                this.covertMember();
            }
        },
        queryMember(val) {
            if (this.$refs.tree) {
                this.$refs.tree.filter(val);
            }
        }
    },
    methods:{
        filterNode(value, data) {
            return data.label.indexOf(value) !== -1;
        },
        covertMember() {
            // if (this.covertMemberList.length > 0) {
            //     this.setMemmberList(this.driverList, this.memberList[0].children, this.memberList[1].children, this.memberList[3].children);
            // } else {
            const dispatcherList = [];
            // const electricDispatcherList = [];
            // const depotDispatcherList = [];
            const stationSupervisorList = [];
            const driverList = [];
            const maintainerList = [];
            this.memberList.forEach((member, index)=>{
                if (member.type != '观众') {
                    if (member.deviceCode) {
                        const device = this.$store.getters['map/getDeviceByCode'](member.deviceCode);
                        if (device) {
                            if (device._type == 'Train') {
                                member.label = member.name;
                                driverList.push(member);
                            } else {
                                member.label = member.name;
                                if (device._type == 'Station') {
                                    stationSupervisorList.push(member);
                                }
                            }
                        } else {
                            member.label = member.name;
                        }
                    } else {
                        member.label = member.name;
                        if (member.type == '行调') {
                            dispatcherList.push(member);
                        } else if (member.type == '通号') {
                            maintainerList.push(member);
                        }
                    }
                }
            });
            this.driverList = driverList;
            this.setMemmberList(driverList, dispatcherList, stationSupervisorList, maintainerList);
            // }
        },
        setMemmberList(driverList, dispatcherList, stationSupervisorList, maintainerList) {
            this.oldMemberId = this.memberId;
            // if (this.$store.state.training.started) {
            //     const activeList = this.$store.state.map.activeTrainList;
            //     driverList = driverList.filter(driver=>{
            //         return activeList.length > 0 && activeList.includes(driver.deviceCode);
            //     });

            // } else {
            //     driverList = [];
            // }
            this.covertMemberList = [{
                label: '行调',
                id: 'dispatcher',
                type: 'role',
                children: dispatcherList
            }, {
                label: '车站值班员',
                id: 'stationSupervisor',
                type: 'role',
                children: stationSupervisorList
            }, {
                label: '司机',
                id: 'driver',
                type: 'role',
                children: driverList
            }, {
                label: '通号',
                id: 'maintainer',
                type: 'role',
                children: maintainerList
            }];
        },
        changeRole(member) {
            if (member) {
                // this.$store.dispatch('scriptRecord/updateIsScriptCommand', true);
                this.switchMode(member);
            }
        },
        addMember() {
            this.$emit('addMember');
        },
        switchMode(role) {
            changeScriptRole(this.group, role.id).then(res=>{
                let prdType = '';
                if (this.openWindow) {
                    this.openWindow.close();
                }
                if (role.type == '行值') {
                    prdType = '01';
                    this.$store.dispatch('training/setRoles', 'STATION_SUPERVISOR');
                    this.$store.dispatch('training/setRoleDeviceCode', role.deviceCode);
                } else if (role.type == '行调') {
                    prdType = '02';
                    this.$store.dispatch('training/setRoles', 'DISPATCHER');
                } else if (role.type == '司机') {
                    prdType = '04';
                } else if (role.type == '通号') {
                    prdType = '';
                    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 {
                    prdType = '';
                }
                this.$store.dispatch('training/updateMemberListInScript',
                    {
                        oldMemberId:this.oldMemberId,
                        newMemberId:role.id,
                        userId:this.$store.state.user.id,
                        name:this.$store.state.user.nickname
                    }
                );
                // this.oldMemberId = role.id;
                this.$store.dispatch('training/setPrdType', prdType);
                ConstConfig.ConstSelect.roleTypeNew.forEach(each=>{
                    if (each.label == role.type) {
                        this.$store.dispatch('scriptRecord/updateRole', each.value + ':' + role.id);
                    }
                });
                this.$emit('setMemberId', role.id);
                this.$message('切换角色成功');
                // this.$refs.changeScriptRole.blur();
            }).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>