rt-sim-training-client/src/views/drts/scene/index.vue

<template>
  <div>
    <query-list-page ref="user" :pager-config="pagerConfig" :query-form="queryForm" :query-list="queryList" />
    <create-scene ref="createScene" title="创建场景" :script-list="scriptList" @reloadTable="reloadTable" />
    <create-scene ref="updateScene" title="更新场景" :script-list="scriptList" @reloadTable="reloadTable" />
    <modify-step ref="modifyStep" title="编辑步骤数据" />
    <import-scene ref="importScene" :script-list="scriptList" @refresh="reloadTable" />
  </div>
</template>
<script>
import { getCompetitionPracticalScene, deleteCompetitionPracticalScene, getSceneExport } from '@/api/competition';
import { getScriptPageListOnlineNew } from '@/api/script';
import CreateScene from './create';
import ModifyStep from './modify';
import ImportScene from './importScene';
export default {
    name:'SceneManage',
    components:{
        CreateScene,
        ModifyStep,
        ImportScene
    },
    data() {
        return {
            scriptList:[],
            pagerConfig: {
                pageSize: 'pageSize',
                pageIndex: 'pageNum'
            },
            queryForm: {
                reset: false,
                labelWidth: '80px',
                queryObject: {
                    name: {
                        type: 'text',
                        label: '场景名称'
                    }
                }
            },
            queryList: {
                query: getCompetitionPracticalScene,
                selectCheckShow: false,
                indexShow: true,
                columns: [
                    {
                        title: '场景名称',
                        prop: 'name',
                        width: '400'
                    },
                    {
                        title: '场景描述',
                        prop: 'description'
                    },
                    {
                        title: '处置流程',
                        prop: 'disposalProcesses'
                    },
                    {
                        title: '运营部分总分',
                        prop: 'operationScore'
                    },
                    {
                        title: '关联剧本',
                        prop: 'scriptId',
                        type: 'tag',
                        width: '320',
                        columnValue: (row) => { return this.$convertField(row.scriptId, this.scriptList, ['value', 'label']); },
                        tagType: (row) => { return 'success'; }
                    },
                    {
                        type: 'button',
                        title: '操 作',
                        width: '420',
                        buttons: [
                            {
                                name: '更 新',
                                handleClick: this.doUpdate,
                                type: 'primary'
                            },
                            {
                                name: '编辑步骤数据',
                                handleClick: this.doModify,
                                type: 'success'
                            },
                            {
                                name: '删 除',
                                handleClick: this.doDelete,
                                type: 'danger'
                            },
                            {
                                name: '导 出',
                                handleClick: this.doExport,
                                type: 'primary'
                            }
                        ]
                    }
                ],
                actions: [
                    { text: '添 加', handler: this.doCreate },
                    { text: '导 入', handler: this.doImport }
                ]
            }
        };
    },
    created() {
        getScriptPageListOnlineNew().then(response=>{
            this.scriptList = response.data.list.map(elem => { return { value: parseInt(elem.id), label: elem.name }; });
            // this.queryForm.queryObject.scriptId.config.data = this.scriptList;
        });
    },
    methods:{
        // 修改
        doUpdate(index, row) {
            this.$refs.updateScene.doShow(row.id);
        },
        doDelete(index, row) {
            this.$confirm('此操作将删除此场景, 是否继续?', this.$t('global.tips'), {
                confirmButtonText: this.$t('global.confirm'),
                cancelButtonText: this.$t('global.cancel'),
                type: 'warning'
            }).then(() => {
                deleteCompetitionPracticalScene(row.id).then(response => {
                    this.$message.success('删除场景成功');
                    this.reloadTable();
                }).catch((error) => {
                    this.$messageBox(`删除场景失败: ${error.message}`);
                });
            }).catch(() => { });
        },
        doCreate() {
            this.$refs.createScene.doShow(null);
        },
        doImport() {
            this.$refs.importScene.doShow();
        },
        reloadTable() {
            if (this.queryList && this.queryList.reload) {
                this.queryList.reload();
            }
        },
        doModify(index, row) {
            this.$refs.modifyStep.doShow(row);
        },
        doExport(index, row) {
            getSceneExport(row.id).then(res=>{
                const resultData = res.data;
                if (resultData === false) {
                    return;
                }
                const content = new Blob([JSON.stringify(resultData)]);
                const urlObject = window.URL || window.webkitURL || window;
                const url = urlObject.createObjectURL(content);
                const el = document.createElement('a');
                el.href = url;
                el.download = `${resultData.name}.json`;
                el.click();
                urlObject.revokeObjectURL(url);
            });
        }
    }
};
</script>