rt-sim-training-client/src/views/scriptManage/home.vue

<template>
  <div class="joylink-card">
    <div class="scriptHeader">
      <div class="scriptList">草稿{{ $t('scriptRecord.scriptList') }}</div>
      <el-button size="small" type="primary" class="createScript" @click="handleCreate">{{ $t('scriptRecord.scriptCreate') }}</el-button>
      <el-button type="primary" class="uploadDemo" size="mini">
        <input
          id="importResults"
          ref="files"
          type="file"
          class="file_box"
          accept=".json, application/json"
          @change="importScript"
        >
        导入剧本
      </el-button>
    </div>
    <QueryListPage ref="queryListPage" :pager-config="pagerConfig" :query-form="queryForm" :query-list="queryList" style="width: 91%;margin-left:4%;margin-top:20px;" />
    <script-publish ref="publishScript" :title="$t('scriptRecord.publishScript')" @reloadTable="reloadTable" @create="handleConfirmPublish" />
    <create-script ref="createScript" :title="$t('scriptRecord.createScript')" @reloadTable="reloadTable" @create="handleConfirmCreate" />
    <create-script ref="modifyScript" :title="$t('scriptRecord.modifyScript')" @reloadTable="reloadTable" @create="handleConfirmModify" />
  </div>
</template>

<script>
import Cookies from 'js-cookie';
import ConstConfig from '@/scripts/ConstConfig';
import { UrlConfig } from '@/scripts/ConstDic';
import { admin, superAdmin} from '@/router/index_APP_TARGET';
import {retractScript, publishScript, updateScript, deleteScript, getScriptPageList, createScript, postScriptImport, getScriptExport} from '@/api/script';
import { launchFullscreen } from '@/utils/screen';
import { scriptDraftRecordNotifyNew, scriptRecordNotifyNew } from '@/api/simulation';
import CreateScript from './create';
import ScriptPublish from './publish';
import { getSessionStorage } from '@/utils/auth';

export default {
    name: 'ScriptDraft',
    components: {
        CreateScript,
        ScriptPublish
    },
    data() {
        return {
            pagerConfig: {
                pageSize: 'pageSize',
                pageIndex: 'pageNum'
            },
            queryForm: {
                labelWidth: '100px',
                reset: true,
                show:false
            },
            loadingProjectList: ['login', 'design', 'xty', 'designxty', 'gzb', 'designxty', 'xadt', 'designxadt', 'drts', 'designdrts'],
            queryList: {
                query: this.queryFunction,
                selectCheckShow: false,
                indexShow: true,
                columns: [
                    {
                        title: this.$t('scriptRecord.scriptName'),
                        prop: 'name'
                    },
                    {
                        title: this.$t('scriptRecord.scriptDescription'),
                        prop: 'description'
                    },
                    {
                        title: this.$t('scriptRecord.status'),
                        prop: 'status',
                        type: 'tag',
                        columnValue: (row) => { return this.covertData(row); },
                        tagType: (row) => { return ''; }
                    },
                    {
                        title: this.$t('scriptRecord.revokeReason'),
                        prop: 'explanation'
                    },
                    {
                        type: 'button',
                        title: this.$t('scriptRecord.operate'),
                        width: '450',
                        buttons: [
                            {
                                name: this.$t('scriptRecord.scriptRecord'),
                                handleClick: this.drawUp,
                                type: 'success',
                                showControl:(row) => { return !(row.status == 1); }
                            },
                            {
                                name: this.$t('scriptRecord.scriptModify'),
                                handleClick: this.handleModify,
                                type: 'primary',
                                showControl:(row) => { return !(row.status == 1); }
                            },
                            {
                                name: this.$t('scriptRecord.scriptDelete'),
                                handleClick: this.deleteScript,
                                type: 'danger',
                                showControl:(row) => { return !(row.status == 1); }
                            },
                            {
                                name: this.covertButtonname(),
                                handleClick: this.publishScript,
                                type: 'primary',
                                showControl:(row) => { return row.status == 0; }
                            },
                            {
                                name: this.$t('scriptRecord.applyRevoke'),
                                handleClick: this.revokeScript,
                                type: 'primary',
                                showControl:(row) => { return row.status == 1; }
                            },
                            {
                                name: this.$t('scriptRecord.preview'),
                                handleClick: this.previewScript,
                                type: 'success'
                                // showControl:(row) => { return row.status==1},
                            },
                            {
                                name: '导出',
                                handleClick: this.exportScript,
                                type: 'primary',
                                showControl:(row) => { return !(row.status == 1); }
                            }
                        ]
                    }
                ]
            }
        };
    },
    computed:{
        project() {
            return getSessionStorage('project');
        }
    },
    watch: {
        '$route' () {
            this.reloadTable();
        }
    },
    methods: {
        queryFunction(params) {
            return getScriptPageList(this.$route.params.mapId, params);
        },
        reloadTable() {
            if (this.queryList && this.queryList.reload) {
                this.queryList.reload();
            }
        },
        drawUp(index, row) {
            scriptRecordNotifyNew(row.id).then(resp => {
                const query = { mapId: row.mapId, group: resp.data, scriptId: row.id, lang:row.lang, lineCode:this.$route.query.lineCode};
                this.$router.push({ path: `${UrlConfig.scriptDisplayNew}/script`, query });
                launchFullscreen();
            }).catch(error => {
                this.$messageBox(`${this.$t('scriptRecord.createSimulationFail')}: ${error.message}`);
            });
        },
        deleteScript(index, row) {
            this.$confirm(this.$t('scriptRecord.deleteScriptTip'), this.$t('global.tips'), {
                confirmButtonText: this.$t('global.confirm'),
                cancelButtonText: this.$t('global.cancel'),
                type: 'warning'
            }).then(() => {
                deleteScript(row.id).then(response => {
                    this.$message.success(this.$t('scriptRecord.deleteScriptSucess'));
                    this.reloadTable();
                }).catch(() => {
                    this.$messageBox(this.$t('scriptRecord.deleteScriptFail'));
                });
            }).catch(() => { });
        },
        // 确定创建
        handleConfirmCreate(data) {
            if (Cookies.get('user_lang') == 'en') {
                data.lang = 'en';
            } else {
                data.lang = 'zh';
            }
            createScript(data).then(resp => {
                this.reloadTable();
                this.$message.success(this.$t('scriptRecord.createScriptSuccess'));
            }).catch(error => {
                this.$messageBox(`${this.$t('scriptRecord.createScriptFail')}: ${error.message}`);
            });
        },
        // 修改
        handleModify(index, row) {
            this.$refs.modifyScript.doShow(row.id);
        },
        // 确认修改
        handleConfirmModify(data) {
            if (Cookies.get('user_lang') == 'en') {
                data.lang = 'en';
            } else {
                data.lang = 'zh';
            }
            updateScript(data.id, data).then(resp => {
                this.reloadTable();
                this.$message.success(this.$t('scriptRecord.modifyScriptSuccess'));
            }).catch(error => {
                this.$messageBox(`${this.$t('scriptRecord.modifyScriptFail')}: ${error.message}`);
            });
        },
        // 创建
        handleCreate() {
            this.$refs.createScript.doShow(null);
        },
        covertData(row) {
            const releaseReview = ConstConfig.ConstSelect.releaseReview;
            const lastData = Object.assign({}, row);
            if (Cookies.get('user_lang') == 'en') {
                releaseReview.forEach(function(element) {
                    const rolename = element.value;
                    if (lastData.status == rolename) {
                        lastData.status = element.enlabel;
                    }
                });
            } else {
                releaseReview.forEach(function(element) {
                    const rolename = element.value;
                    if (lastData.status == rolename) {
                        lastData.status = element.label;
                    }
                });
            }
            return lastData.status;
        },
        handleConfirmPublish(data) {
            publishScript(data.id, {'scriptName':data.scriptName}).then(resp => {
                this.reloadTable();
                this.$message.success(this.$t('scriptRecord.publishScriptSuccess'));
            }).catch(error => {
                this.$messageBox(`${this.$t('scriptRecord.publishScriptFailed')}: ${error.message}`);
            });
        },
        publishScript(index, row) {
            // if (this.$store.getters.roles.indexOf(admin) >= 0 || this.$store.getters.roles.indexOf(superAdmin) >= 0) {
            this.$refs.publishScript.doShow(row);
            // } else {
            // this.$confirm(this.$t('scriptRecord.releaseScriptTip'), this.$t('global.tips'), {
            //     confirmButtonText: this.$t('global.confirm'),
            //     cancelButtonText: this.$t('global.cancel'),
            //     type: 'warning'
            // }).then(() => {
            //     publishScript(row.id, {name:''}).then(resp => {
            //         this.reloadTable();
            //         this.$message.success(this.$t('scriptRecord.releaseScriptSuccess'));
            //     }).catch(error => {
            //         this.$messageBox(`${this.$t('scriptRecord.releaseScriptFailed')}: ${error.message}`);
            //     });
            // }).catch(() => { });
            // }
        },
        covertButtonname() {
            if (this.$store.getters.roles.indexOf(admin) >= 0 || this.$store.getters.roles.indexOf(superAdmin) >= 0) {
                return this.$t('scriptRecord.publish');
            } else {
                return this.$t('scriptRecord.applyPublish');
            }
        },
        revokeScript(index, row) {
            this.$confirm(this.$t('scriptRecord.revokeScriptTip'), this.$t('global.tips'), {
                confirmButtonText: this.$t('global.confirm'),
                cancelButtonText: this.$t('global.cancel'),
                type: 'warning'
            }).then(() => {
                retractScript(row.id).then(resp => {
                    this.reloadTable();
                    this.$message.success(this.$t('approval.revokeScriptSuccess'));
                }).catch(error => {
                    this.$messageBox(`${this.$t('approval.revokeScriptFailed')}: ${error.message}`);
                });
            }).catch(() => { });
        },
        // 剧本预览
        previewScript(index, row) {
            scriptDraftRecordNotifyNew(row.id).then(resp => {
                if (this.loadingProjectList.includes(this.project)) {
                    this.$store.dispatch('app/transitionAnimations');
                }
                const query = { mapId: row.mapId, group: resp.data, scriptId: row.id, try:0, lineCode:this.$route.query.lineCode};
                this.$router.push({ path: `${UrlConfig.design.displayNew}/demon`, query });
                launchFullscreen();
            }).catch(error => {
                this.$messageBox(`${this.$t('scriptRecord.createSimulationFail')}: ${error.message}`);
            });
        },
        exportScript(index, row) {
            getScriptExport(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);
            });
        },
        importScript() {
            const loading = this.$loading({
                lock: true,
                text: '正在导入中...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            setTimeout(() => {
                const obj = this.$refs.files;
                if (!obj.files) return;
                const f = obj.files[0];
                const reader = new FileReader();
                const that = this;
                reader.readAsText(f, 'utf-8');
                reader.onload = function(e) {
                    const data = e.target.result;
                    postScriptImport(that.$route.params.mapId, JSON.parse(data)).then(res => {
                        loading.close();
                        that.$message.success('导入成功！');
                        that.reloadTable();
                        loading.close();
                    }).catch(error => {
                        loading.close();
                        that.$message.error('导入失败' + error.message);
                    });
                    obj.value = '';
                };
            });
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";
    .joylink-card{
        height: 100%;
        overflow: auto;
    }
	.createScript{
        float: right;
        margin-right:20px;
	}
	.scriptHeader{
		display:inline-block;margin-top:40px;width: 90%;margin-left:5%;
	}
	.scriptList{
		display:inline-block;padding:7px 0px
	}
	/deep/.el-button+.el-button {
		margin-left: 5px;
		margin-top: 5px;
	}
    .uploadDemo {
		position: relative;
        overflow: hidden;
        float: right;
        margin-right: 10px;
        cursor: pointer;
        padding: 10px 15px;
        margin-top: 0px !important;
	}
    .file_box {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		opacity: 0;
		cursor: pointer;
		z-index: 100;
	}
</style>