剧本录制添加成员角色

src/api/simulation.js

@@ -209,6 +209,40 @@ export function getScriptMemberData(group) {
 	});
 }
 
+/** 获取剧本出演成员角色 */
+export function getScriptPlayMember(group) {
+	return request({
+		url: `/api/simulation/${group}/scriptWrite/players`,
+		method: 'get'
+	});
+}
+
+/** 取消剧本演出成员角色 */
+export function cancleScriptMembers(group, data) {
+	return request({
+		url: `/api/simulation/${group}/scriptWrite/removePlayers`,
+		method: 'put',
+		data
+	});
+}
+
+/** 选择剧本演出成员角色 */
+export function selectScriptMembers(group, data) {
+	return request({
+		url: `/api/simulation/${group}/scriptWrite/choosePlayers`,
+		method: 'put',
+		data
+	});
+}
+
+/** 修改剧本演出成员性别 */
+export function modifyScriptMemberSex(group, playerId, data) {
+	return request({
+		url: `/api/simulation/${group}/scriptWrite/player/${playerId}?gender=${data.gender}`,
+		method: 'put',
+	});
+}
+
 /** 清除仿真剧本数据*/
 export function dumpScriptData(group) {
 	return request({

src/views/scriptManage/scriptRecord/addAction.vue

@@ -1,8 +1,11 @@
 <template>
     <div>
+        <!-- <el-card class="scriptTop">
+            <add-role :group="group" ref="addRole"></add-role>
+        </el-card> -->
         <el-card class="conversitionCard">
             <div class="addConversition">添加对话</div>
-                <el-form :model="modalData" ref="modalData" :rules="rules" label-width="100px" class="conversitionInfo" label-position="right">
+                <el-form size="mini"  :model="modalData" ref="modalData" :rules="rules" label-width="100px" class="conversitionInfo" label-position="right">
                     <!-- <el-form-item label="动作类型" class="conditionVO" prop="actionVO.type" >
                         <el-select v-model="modalData.actionVO.type " placeholder="请选择动作类型" @change="changeType" :disabled="deviceTypeReadOnly||isPause">
                             <el-option v-for="actionType in actionTypeList" :key="actionType.label" :label="actionType.label" :value="actionType.value"></el-option>
@@ -38,7 +41,7 @@
         </el-card>
         <el-card class="commandCard">
             <div class="addCommand">添加指令</div>
-            <el-form :model="commandData" ref="commandData" :rules="commandRules" label-width="100px" class="actionInfo" label-position="right">
+            <el-form size="mini" :model="commandData" ref="commandData" :rules="commandRules" label-width="100px" class="actionInfo" label-position="right">
                 <el-form-item label="执行者" class="conditionVO" prop="action.memberId">
                     <el-select v-model="commandData.action.memberId" placeholder="请选择执行者" :disabled="isPause" @change="changeRole">
                         <el-option v-for="member in memberList" :key="member.id" :label="member.role+(member.name==undefined?'':member.name)" :value="member.id"></el-option>
@@ -71,7 +74,7 @@
     import DeviceTypeDic from '@/scripts/DeviceTypeDic';
     // import CommandForm from "./commandForm";
     import ConstConfig from '@/scripts/ConstConfig';
-    import {addScriptAction,modifyScriptAction,getAvailableDeviceCommand,getDeviceCodeByDeviceType,getScriptMemberData} from '@/api/simulation';
+    import {addScriptAction,modifyScriptAction,getAvailableDeviceCommand,getDeviceCodeByDeviceType,getScriptPlayMember} from '@/api/simulation';
     export default {
         name: 'addAction',
         props: {
@@ -88,9 +91,6 @@
                 required: true
             }
         },
-        // components:{
-        //     CommandForm,
-        // },
         watch:{
             '$store.state.socket.simulationStart': function (val) {
                 if(val)
@@ -186,7 +186,7 @@
         },
         methods:{
             initData(){
-                getScriptMemberData(this.group).then(resp => {
+                getScriptPlayMember(this.group).then(resp => {
                     let roleTypeList=ConstConfig.ConstSelect.roleType;
                     this.orginMemberList=resp.data;
                     let lastData=JSON.stringify(resp.data);
@@ -448,4 +448,9 @@
         border-right: 1px #c0c4cc solid;
         height: 20px;
     }
+    .scriptTop{
+        margin-left: 20px;
+        padding: 15px 0px 30px 0px;
+        width: 360px;
+    }
 </style>

src/views/scriptManage/scriptRecord/addRole.vue

@@ -0,0 +1,123 @@
+<template>
+    <div style="height:300px;">
+        <!-- <div class="selectRole">选择角色</div> -->
+        <el-transfer v-model="selectRoleData" :data="allRoleData" class="elTransfer" :titles="['待选成员角色', '已选成员角色']" @change="handleChange">
+            <span slot-scope="{option}">
+                <span>{{option.role+(option.name==undefined?'':option.name)}}</span>
+                <el-radio-group v-model="option.gender" size="mini" class="sexGroup" @change="changeSex($event,option.key)">
+                    <el-radio-button label="Male">男</el-radio-button>
+                    <el-radio-button label="Female">女</el-radio-button>
+                </el-radio-group>
+            </span>
+        </el-transfer>
+    </div>
+</template>
+<script>
+    import Vue from 'vue';
+    import ConstConfig from '@/scripts/ConstConfig';
+    import {getScriptPlayMember,getScriptMemberData,cancleScriptMembers,selectScriptMembers,modifyScriptMemberSex} from '@/api/simulation';
+    export default {
+        name: 'addRole',
+        props: {
+            group: {
+                type: String,
+                required: true
+            },
+        },
+        data() {
+            return {
+                allRoleData:[],
+                selectRoleData:[],
+                sexGroup:"男",
+            }
+        },
+        mounted(){
+            this.initData();
+        },
+        methods:{
+            initData(){
+                let group=this.$props.group;
+                getScriptMemberData(group).then(response=>{
+                    let lastData=JSON.stringify(response.data);
+                    this.allRoleData=this.coverData(lastData);
+                    getScriptPlayMember(group).then(response=>{
+                        let lastData=response.data;
+                        let data=[];
+                        lastData.forEach(function(element){data.push(element.id)});
+                        this.selectRoleData=data;
+                    })
+                })
+            },
+            coverData(data){
+                let roleTypeList=ConstConfig.ConstSelect.roleType;
+                let lastData=data.replace(new RegExp('id','g'),'key');
+                roleTypeList.forEach(function(element){
+                    let rolename=element.value;
+                    lastData=lastData.replace(new RegExp(rolename,'g'),element.label);
+                });
+                lastData=JSON.parse(lastData);
+                return lastData;
+            },
+            handleChange(value, direction, movedKeys) {
+                switch(direction)
+                {
+                    case 'right':{
+                        let group=this.$props.group;
+                        let data=movedKeys;
+                        selectScriptMembers(group,data).then(response=>{
+                            this.$message.success('选择剧本角色成功');
+                            // this.$parent.
+                        })
+                        .catch(error => {
+                            this.$messageBox(`选择剧本角色失败: ${error.message}`);
+                        });
+                        break;
+                    }
+                    case 'left':{
+                        let group=this.$props.group;
+                        let data=movedKeys;
+                        cancleScriptMembers(group,data).then(response=>{
+                            this.$message.success('取消剧本角色成功');
+                        })
+                        .catch(error => {
+                            this.$messageBox(`取消剧本角色失败: ${error.message}`);
+                        });
+                    }
+                }
+            },
+            changeSex(event,id)
+            {
+                debugger;
+                let group=this.$props.group;
+                let data={"gender":event};
+                modifyScriptMemberSex(group,id,data).then(response=>{
+                    this.$message.success('修改剧本成员性别成功');
+                })
+                .catch(error => {
+                    this.$messageBox(`修改剧本成员性别失败: ${error.message}`);
+                });
+            }
+        }
+    }
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+    .selectRole{
+        font-size: 15px;
+        padding: 0px 20px 15px 15px;
+    }
+    .elTransfer{
+        margin-left:20px;
+        width:700px;
+    }
+</style>
+<style>
+    .elTransfer .el-transfer-panel{
+        width:300px ;
+    }
+    .sexGroup{
+        margin-left: 10px;
+    }
+</style>
+
+                

src/views/scriptManage/scriptRecord/getAction.vue

@@ -4,17 +4,26 @@
                 <span class="titleStyle">剧本编制</span>
             </div>
             <div class="tab-pane-big">
+                <div class="scriptPane">
+                    <!-- <el-card class="scriptTop">
+                        <template>
+                            <div class="selectRole">选择角色</div>
+                            <el-transfer v-model="selectRoleData" :data="allRoleData" class="elTransfer" :titles="['待选成员角色', '已选成员角色']"></el-transfer>
+                        </template>
+                    </el-card> -->
+                    <el-card class="scriptTop">
+                        <add-role :group="group" ref="addRole"></add-role>
+                    </el-card>
+                    <div class="scriptBottom">
                         <el-scrollbar wrapClass="scrollbar-wrapper" ref="elScrollbar" class="elScrollbar">
                             <add-action ref="addBehavior" :group="group" @create="create" :buttonName="buttonName" :operateType="operateType" @modifyButtonName="modifyButtonName" class="addScript"></add-action>
                         </el-scrollbar>
-                <!-- <div class="vertialLine"></div> -->
                         <div class="block actionListTable">
                             <el-scrollbar wrapClass="scrollbar-wrapper" ref="elActionScrollbar">
                             <el-timeline :reverse="reverse" class="el_timeline">
                                 <el-timeline-item v-for="(actionInfo,index) in actionInfoList" :key="index">
                                     <el-card>
                                         <div class="actionTable">
-
                                             <span class="detail" v-html="actionInfo.detail">
                                             </span>
                                             <span class="otherInfo" v-html="actionInfo.otherInfo"></span>
@@ -42,11 +51,14 @@
                         </div>
                     </div>
                 </div>
+            </div>
+        </div>
 </template>
 <script>
     import Vue from 'vue';
     import AddAction from './addAction';
-    import {getScriptRecord,deleteScriptAction,getAvailableDeviceCommand} from '@/api/simulation';
+    import AddRole from './addRole';
+    import {getScriptRecord,deleteScriptAction,getAvailableDeviceCommand,getScriptPlayMember,getScriptMemberData} from '@/api/simulation';
     import ConstConfig from '@/scripts/ConstConfig';
     export default {
         name: 'getAction',
@@ -71,6 +83,7 @@
         },
         components: {
             AddAction,
+            AddRole
         },
         mounted(){
             this.loadInitData();
@@ -246,4 +259,27 @@
     .commandStyle{
         color:#F00;
     }
+    .scriptPane{
+        height: 100%;
+        padding-top:320px;
+    }
+    .scriptBottom{
+        height: 100%;
+        position: relative;
+    }
+    .scriptTop{
+        position: absolute;
+        top: 0;
+        left: 20px;
+        padding: 15px 0px 0px 0px;
+        width: 730px;
+    }
+    // .elTransfer{
+    //     height:230px;
+    //     margin-left:100px;
+    // }
+    // .selectRole{
+    //     font-size: 15px;
+    //     padding: 0px 20px 15px 15px;
+    // }
 </style>