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

<template>
        <div>
            <div class="actionList">
                <span class="titleStyle">添加剧本动作</span>
            </div>
            <div class="tab-pane-big">
            <el-scrollbar wrapClass="scrollbar-wrapper" ref="elActionScrollbar">
                <add-action ref="addBehavior" :group="group" @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 {getScriptRecord,deleteScriptAction} from '@/api/simulation';
    export default {
        name: 'getAction',
        props: {
            group: {
                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;
                getScriptRecord(group).then(response=>{
                    this.actionList=response.data.actionVOList;
                    if(response.data.mapLocation)
                    {
                        let mapLocation={"offsetX":response.data.mapLocation.x,"offsetY":response.data.mapLocation.y,"scaleRate":response.data.mapLocation.scale};
                        this.$store.dispatch('scriptRecord/updateMapLocation', mapLocation);
                    }
                    this.loading=false;
                });
            },
            deleteAction(row){
                let group=this.$props.group;
                deleteScriptAction(group,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>