<template>
|
<el-container>
|
<el-header style="background-color: #F7F7F7; padding: 0; height: 50px;">
|
<div style="display: flex; padding-top: 10px; margin-left: 10px">
|
<el-button
|
round
|
type="primary"
|
size="small"
|
icon="el-icon-check"
|
@click="handleConfirm"
|
>点击保存</el-button
|
>
|
<el-button
|
round
|
icon="el-icon-caret-right"
|
type="info"
|
size="small"
|
@click="handleRunCode"
|
>在线运行</el-button
|
>
|
<el-button
|
round
|
icon="el-icon-document-copy"
|
type="success"
|
size="small"
|
@click="handleImportCode"
|
>插入其他项目代码</el-button
|
>
|
</div>
|
</el-header>
|
|
<el-main style="padding: 0; margin-left: 10px; overflow: hidden;">
|
<MonacoEditor
|
ref="editor"
|
:height="codeHeight"
|
language="python"
|
:code="code.code"
|
:options="options"
|
@mounted="onMounted"
|
@codeChange="onCodeChange"
|
:key="timeStamp"
|
></MonacoEditor>
|
</el-main>
|
<el-drawer
|
style="margin-top: 100px;"
|
:height="codeHeight"
|
:destroy-on-close="true"
|
:with-header="false"
|
:modal="false"
|
:visible.sync="isShowDebug"
|
size="40%"
|
>
|
<RunCodeResult :msg="resp.msg"></RunCodeResult>
|
</el-drawer>
|
|
<el-dialog
|
title="插入其他项目代码"
|
:visible.sync="importDialogVisible"
|
width="70%"
|
:close-on-click-modal="false"
|
>
|
<div style="margin-bottom: 20px;">
|
<el-select
|
v-model="selectedProjectId"
|
placeholder="请选择项目"
|
filterable
|
@change="handleProjectChange"
|
style="width: 100%;"
|
>
|
<el-option
|
v-for="project in projectList"
|
:key="project.id"
|
:label="project.name"
|
:value="project.id"
|
>
|
<span style="float: left">{{ project.name }}</span>
|
<span style="float: right; color: #8492a6; font-size: 13px">{{ project.responsible }}</span>
|
</el-option>
|
</el-select>
|
</div>
|
|
<div v-if="selectedProjectCode" style="margin-bottom: 20px;">
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
|
<span style="font-weight: bold;">代码预览:</span>
|
<el-button
|
type="primary"
|
size="small"
|
icon="el-icon-document-copy"
|
@click="handleCopyAll"
|
>
|
全部复制
|
</el-button>
|
</div>
|
<el-input
|
type="textarea"
|
:rows="15"
|
v-model="selectedProjectCode"
|
readonly
|
style="font-family: 'Courier New', monospace;"
|
></el-input>
|
</div>
|
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="importDialogVisible = false">取 消</el-button>
|
<el-button
|
type="primary"
|
@click="handleConfirmImport"
|
:disabled="!selectedProjectCode"
|
>
|
确定插入
|
</el-button>
|
</span>
|
</el-dialog>
|
</el-container>
|
</template>
|
|
<script>
|
import MonacoEditor from "vue-monaco-editor";
|
import RunCodeResult from "./components/RunCodeResult";
|
// Python代码补全功能-BaseMonacoEditor
|
import BaseMonacoEditor from "../monaco-editor/BaseMonacoEditor";
|
export default {
|
name: "DebugTalk",
|
components: {
|
MonacoEditor,
|
RunCodeResult,
|
BaseMonacoEditor
|
},
|
data() {
|
return {
|
editor: null,
|
timeStamp: "",
|
isShowDebug: false,
|
importDialogVisible: false,
|
projectList: [],
|
selectedProjectId: "",
|
selectedProjectCode: "",
|
options: {
|
selectOnLineNumbers: false,
|
scrollbar: {
|
vertical: "hidden",
|
verticalHasArrows: false
|
}
|
},
|
code: {
|
code: "",
|
id: ""
|
},
|
resp: {
|
msg: ""
|
}
|
};
|
},
|
methods: {
|
onMounted(editor) {
|
this.editor = editor;
|
},
|
onCodeChange(editor) {
|
this.code.code = editor.getValue();
|
},
|
handleRunCode() {
|
this.resp.msg = "";
|
this.$api.runDebugtalk(this.code).then(resp => {
|
this.resp = resp;
|
});
|
},
|
handleConfirm() {
|
this.$api.updateDebugtalk(this.code).then(resp => {
|
this.getDebugTalk();
|
this.$message.success("代码保存成功");
|
});
|
},
|
getDebugTalk() {
|
this.$api.getDebugtalk(this.$route.params.id).then(resp => {
|
this.code = resp;
|
});
|
},
|
handleImportCode() {
|
this.importDialogVisible = true;
|
this.getProjectList();
|
},
|
getProjectList() {
|
this.$api.getProjectList().then(resp => {
|
this.projectList = resp.results || [];
|
});
|
},
|
handleProjectChange(projectId) {
|
if (projectId) {
|
this.$api.getDebugtalk(projectId).then(resp => {
|
this.selectedProjectCode = resp.code || "";
|
}).catch(err => {
|
this.$message.error("获取项目驱动代码失败");
|
this.selectedProjectCode = "";
|
});
|
}
|
},
|
handleCopyAll() {
|
if (this.selectedProjectCode) {
|
const textarea = document.createElement("textarea");
|
textarea.value = this.selectedProjectCode;
|
document.body.appendChild(textarea);
|
textarea.select();
|
try {
|
document.execCommand("copy");
|
this.$message.success("代码已复制到剪贴板");
|
} catch (err) {
|
this.$message.error("复制失败，请手动复制");
|
}
|
document.body.removeChild(textarea);
|
}
|
},
|
handleConfirmImport() {
|
if (this.selectedProjectCode && this.editor) {
|
const currentCode = this.editor.getValue();
|
const newCode = currentCode + "\n\n" + this.selectedProjectCode;
|
this.editor.setValue(newCode);
|
this.code.code = newCode;
|
this.$message.success("代码已插入");
|
this.importDialogVisible = false;
|
}
|
}
|
},
|
watch: {
|
code() {
|
this.timeStamp = new Date().getTime();
|
},
|
resp() {
|
this.isShowDebug = true;
|
}
|
},
|
computed: {
|
codeHeight() {
|
return window.screen.height - 230;
|
}
|
},
|
mounted() {
|
this.getDebugTalk();
|
}
|
};
|
</script>
|
|
<style>
|
.el-drawer__body {
|
overflow: hidden;
|
}
|
</style>
|
