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

<template>
        <div>
            <div class="actionList">
                <i class="el-icon-back" @click="backToMember"></i>
                <span class="titleStyle">{{memberName}}角色<span class="titleStyle">/</span><span class="titleStyle">{{behaviorName}}行为</span><span class="titleStyle">/</span><span class="titleStyle">动作信息</span></span>
            </div>
            <div class="tab-pane-big">
            <el-scrollbar wrapClass="scrollbar-wrapper" ref="elActionScrollbar">
                <add-action ref="addBehavior" :group="group" :memberId="memberId" :behaviorId="behaviorId" @create="create" :buttonName="buttonName" :operateType="operateType" @modifyButtonName="modifyButtonName"></add-action>
                <el-table
                    v-loading="loading"
                    :data="actionList" border class="actionListTable">
                    <el-table-column prop="reply" label="回复消息" width="200">
                    </el-table-column>
                    <el-table-column prop="time" label="完成时间" width="200">
                    </el-table-column>
                    <el-table-column prop="type" label="动作类型" width="200">
                    </el-table-column>
                    <el-table-column label="操作" width="200">
                        <template slot-scope="scope">
                            <el-row>
                                <el-button type="primary" size="mini" @click="modifyAction(scope.row)">修改</el-button>
                                <el-button type="primary" size="mini" @click="deleteAction(scope.row)">删除</el-button>
                            </el-row>
                        </template>
                    </el-table-column>
                </el-table>
            </el-scrollbar>
            </div>
        </div>
</template>
<script>
    import Vue from 'vue';
    import AddAction from './addAction';
    import {getQuestRecord,deleteMemberBehaviorAction} from '@/api/simulation';
    export default {
        name: 'getAction',
        props: {
            group: {
                type: String,
                required: true
            },
            memberId:{
                type:String,
                required: true
            },
            behaviorId:{
                type:String,
                required: true
            }
        },
        data() {
            return {
                actionList:[],
                loading:true,
                behaviorName:"",
                memberName:"",
                operateType:"add",
                buttonName:"添加动作",
            }
        },
        components: {
            AddAction,
        },
        mounted(){
            this.loadInitData(this.$route.query);
            this.memberName=this.$store.state.scriptRecord.memberName;
            this.behaviorName=this.$store.state.scriptRecord.behaviorName;
        },
        methods:{
            loadInitData(obj) {
                let group=obj.group;
                let memberId=this.$props.memberId;
                let behaviorId=this.$props.behaviorId;
                getQuestRecord(group).then(response=>{
                    let datalist=response.data.memberVOList;
                    let behaviorList=datalist.find(elem=>{return elem.id==memberId}).behaviorVOList;
                    this.actionList=behaviorList.find(elem=>{return elem.id==behaviorId}).actionVOList;
                    this.loading=false;
                });
            },
            backToMember:function(){
                this.$emit('backToBehavior');
            },
            deleteAction(row){
                let group=this.$props.group;
                let memberId=this.$props.memberId;
                let behaviorId=this.$props.behaviorId;
                deleteMemberBehaviorAction(group,memberId,behaviorId,row.id).then(resp => {
                    this.reloadTable();
                    this.$message.success('删除行为动作成功');
                }).catch(error => {
                    this.$messageBox(`删除行为动作失败: ${error.message}`);
                });
            },
            reloadTable(){
                this.loadInitData(this.$route.query);
            },
            create(){
                this.reloadTable();
            },
            modifyAction(row){
                var div = this.$refs['elActionScrollbar'].$refs['wrap'];
                div.scrollTop=0;
                this.operateType="modify";
                this.buttonName="修改动作"
                this.$refs.addBehavior.doShow(row);
            },
            modifyButtonName(){
                this.buttonName="添加动作",
                this.operateType="add"
            }
        }
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";
    .actionListTable{
        margin-top: 20px;
        margin-left: 5px;
        font-size: 15px;
        width:802px;
    }
    .actionList{
        margin-top: 10px;
        margin-left: 5px;
        font-size: 15px;
        margin-bottom:10px;
    }
    .titleStyle{
        margin-left:10px;
    }
    .tab-pane-big{
        height:380px;
    }
</style>