rt-sim-training-client/src/views/display/scriptRecord/taskScript.vue

<template>
    <el-form :model="taskScript" ref="taskScript" :rules="rules" label-width="80px" label-position="right">
        <el-form-item label="角色行为" class="conditionVO" prop="behavior">
            <el-select v-model="taskScript.memberId" placeholder="请选择剧本角色" @change="changeMember">
                <el-option v-for="taskScriptMember in taskScriptList" :key="taskScriptMember.id" :label="taskScriptMember.name" :value="taskScriptMember.id"></el-option>
            </el-select>
            <el-select v-model="taskScript.behavior" placeholder="请选择角色行为" @change="changeBehavior">
                <el-option v-for="behavior in behaviorList" :key="behavior.id" :label="behavior.description" :value="behavior.id"></el-option>
            </el-select>
            <el-button type="primary" size="small" @click="addTaskScript">添加</el-button>
        </el-form-item>
        <el-table
            :data="data.scriptBehaviorList" border class="scriptBehaviorList">
            <el-table-column label="剧本角色" width="200" prop="memberName">
            </el-table-column>
            <el-table-column label="角色行为" width="200" prop="behaviorName">
            </el-table-column>
            <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                    <el-row>
                        <el-button type="primary" size="mini" @click="deleteOperate(scope.$index)">删除</el-button>
                    </el-row>
                </template>
            </el-table-column>
        </el-table>
        <el-form-item>
            <el-button type="primary" @click="addTaskScriptList" style="margin-top:30px;">提交</el-button>
        </el-form-item>
    </el-form>
</template>
<script>
    import Vue from 'vue';
    import Sortable from 'sortablejs';
    import {saveTaskScript,getQuestRecord} from '@/api/simulation';
    export default {
        name: 'taskScript',
        props: {
            group: {
                type: String,
                required: true
            }
        },
        mounted(){
            this.rowDrop();
        },
        data() {
            return {
                taskScript:{
                    index:"",
                    memberId:"",
                    behavior:"",
                },
                taskScriptMembername:"",
                behaviorName:"",
                taskScriptList:[],
                behaviorList:[],
                data:{
                    scriptBehaviorList:[],
                },
                rules:{
                    behavior:[
                        { required: true, message: '请选择角色行为', trigger: 'change' }
                    ],
                }
            }
        },
        watch: {
            '$store.state.scriptRecord.memberList': function (val, old){
                this.taskScript.memberId="";
                this.taskScript.behavior="";
                this.taskScriptList=val;
            },
            '$store.state.scriptRecord.script': function (val, old){
                let script=val;
                let memeberList=this.taskScriptList;
                this.setScriptList(memeberList,script);
            }
        },
        methods:{
            setScriptList(memeberList,script){
                if(script.behaviorIdList!=undefined)
                {
                    let behaviorIdList=script.behaviorIdList;
                    let scriptBehaviorList=[];
                    for(var i=0;i<behaviorIdList.length;i++)
                    {
                        let behaviorId=behaviorIdList[i];
                        let scriptBehavior={};
                        for(var j=0;j<memeberList.length;j++)
                        {
                            let behaviorVOList=memeberList[j].behaviorVOList;
                            for(var k=0;k<behaviorVOList.length;k++)
                            {
                                if(behaviorVOList[k].id==behaviorId)
                                {
                                    scriptBehavior.memberId=memeberList[j].id;
                                    scriptBehavior.memberName=memeberList[j].name;
                                    scriptBehavior.behavior=behaviorId;
                                    scriptBehavior.behaviorName=behaviorVOList[k].description;
                                    scriptBehaviorList.push(scriptBehavior);
                                }
                            }
                        }
                    }
                    this.data.scriptBehaviorList=scriptBehaviorList;
                }
            },
            rowDrop(){
                const that = this;
                const tbody = document.querySelector('.scriptBehaviorList .el-table__body-wrapper tbody');
                if (tbody) {
                    Sortable.create(tbody, {
                        onEnd({newIndex, oldIndex}) {
                            that.data.scriptBehaviorList.splice(newIndex, 0, that.data.scriptBehaviorList.splice(oldIndex, 1)[0]);
                            var newArray = that.data.scriptBehaviorList.slice(0);
                            that.data.scriptBehaviorList = [];
                            that.$nextTick(function () {
                                that.data.scriptBehaviorList = newArray;
                            });
                        }
                    })
                }
            },
            changeMember(index)
            {
                this.taskScript.behavior="";
                let taskScriptList=this.taskScriptList;
                for(let i=0;i<taskScriptList.length;i++)
                {
                    if(taskScriptList[i].id==index)
                    {
                        this.taskScriptMembername=taskScriptList[i].name;
                        this.behaviorList=taskScriptList[i].behaviorVOList;
                        return;
                    }
                }
            },
            changeBehavior(index){
                let obj = this.behaviorList.find((item)=>{
                    return item.id === index;
                });
                this.behaviorName=obj.description;
            },
            addTaskScript(){
                this.$refs['taskScript'].validate((valid) => {
                    if (valid) {
                        let scriptBehavior={
                            memberId:this.taskScript.memberId,
                            behavior:this.taskScript.behavior,
                            memberName:this.taskScriptMembername,
                            behaviorName:this.behaviorName,
                        };
                        this.data.scriptBehaviorList.push(scriptBehavior);
                        this.behaviorList=[];
                        this.taskScript.behavior="";
                        this.taskScript.memberId="";
                    }
                    else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            deleteOperate(data){
                this.data.scriptBehaviorList.splice(data,1);
            },
            addTaskScriptList(){
                if(this.data.scriptBehaviorList.length<=0)
                {
                    this.$messageBox(`请添加角色行为`);
                    return;
                }
                let behaviorIdList=[];
                for(let i=0;i<this.data.scriptBehaviorList.length;i++)
                {
                    behaviorIdList.push(this.data.scriptBehaviorList[i].behavior);
                }
                let group=this.$props.group;
                let that=this;
                saveTaskScript(group,behaviorIdList).then(response=>{
                    this.$message.success('保存任务剧本成功');
                    this.$store.dispatch('scriptRecord/updateScript', {"behaviorIdList":behaviorIdList});
                }).catch(error => {
                    this.$messageBox(`保存任务剧本失败: ${error.message}`);
                });
            },
        }
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";
    .scriptBehaviorList{
        margin-top:30px;
        margin-left:10px;
        width:601px
    }
</style>