huoran
/
FE_python_trial
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 8 Wiki Activity

添加vscode

Browse Source
openf12 V2.1.5
yujialong 1 year ago
parent f1d56abefe
commit 2599f0e6f3
7 changed files with 521 additions and 297 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 279
      src/components/TestPanel.vue
  2. 12
      src/components/codemirror.vue
  3. 455
      src/components/quill/index.vue
  4. 4
      src/config/index.js
  5. 14
      src/store/index.js
  6. 38
      src/styles/common.scss
  7. 14
      src/views/Home.vue

279
src/components/TestPanel.vue
Unescape View File

@ -44,6 +44,8 @@
</div> </div>
</div> </div>
<div> <div>
<el-button @click="toggleReport"
v-if="$parent.language && !isSubmit && !competitionId">填写实验报告</el-button>
<el-button @click="toReport" <el-button @click="toReport"
v-if="isSubmit && !competitionId">查看实验报告</el-button> v-if="isSubmit && !competitionId">查看实验报告</el-button>
<el-button class="reload" <el-button class="reload"
@ -56,7 +58,42 @@
</div> </div>
</div> </div>
</el-header> </el-header>
<el-container> <div class="report-wrap"
v-if="reportVisible">
<i class="el-icon-caret-top close-report"></i>
<el-table class="report-table"
:data="taskList"
:max-height="tableHeight">
<el-table-column prop="name"
label="判分点"
width="210"
align="center"></el-table-column>
<el-table-column prop="score"
label="答案"
align="center">
<template slot-scope="scope">
<codemirror v-model="scope.row.code"
:options="cmOption"
class="code-mirror"
:ref="'codemirror' + scope.$index"
@ready="ready"></codemirror>
</template>
</el-table-column>
<el-table-column prop="score"
label="运行结果"
align="center">
<template slot-scope="scope">
<quill class="quill"
:tools="false"
:border="true"
v-model="scope.row.codeResult"
:height="300"
:index="1" />
</template>
</el-table-column>
</el-table>
</div>
<el-container v-else>
<el-aside width="30%"> <el-aside width="30%">
<div class="aside-header"> <div class="aside-header">
<div :class="['p-title color', 'system' + systemId]"> <div :class="['p-title color', 'system' + systemId]">
@ -78,7 +115,8 @@
<el-col :span="24"> <el-col :span="24">
<el-card shadow="never" <el-card shadow="never"
:border="false"> :border="false">
<el-table :data="taskList" <el-table class="task-table"
:data="taskList"
:stripe="true"> :stripe="true">
<el-table-column type="index"></el-table-column> <el-table-column type="index"></el-table-column>
<el-table-column prop="name" <el-table-column prop="name"
@ -121,7 +159,8 @@
</div> </div>
</el-aside> </el-aside>
<el-main> <el-main>
<el-tabs v-model="pannelTab" <el-tabs class="info-tab"
v-model="pannelTab"
type="card"> type="card">
<el-tab-pane label="项目背景" <el-tab-pane label="项目背景"
name="first"> name="first">
@ -145,7 +184,7 @@
</el-collapse> </el-collapse>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="实验提示" <el-tab-pane label="实验提示"
name="fifth" name="third"
v-if="hintOpen"> v-if="hintOpen">
<div class="ql-editor" <div class="ql-editor"
v-html="experimentHint"></div> v-html="experimentHint"></div>
@ -172,12 +211,54 @@
<script> <script>
import newmain from "../util/newMain"; import newmain from "../util/newMain";
import quill from "@/components/quill";
import util from '@/util' import util from '@/util'
import Config from '@/config' import Config from '@/config'
import Cookie from 'js-cookie' import Cookie from 'js-cookie'
import 'quill/dist/quill.core.css'; import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css'; import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css'; import 'quill/dist/quill.bubble.css';
import { codemirror } from "vue-codemirror";
import "codemirror/theme/ambiance.css"; // 这里引入的是主题样式
import "codemirror/mode/javascript/javascript.js";
import "codemirror/mode/python/python.js";
import "codemirror/lib/codemirror.css";
// require active-line.js
import "codemirror/addon/selection/active-line.js";
// styleSelectedText
import "codemirror/addon/selection/mark-selection.js";
// hint
import "codemirror/addon/hint/show-hint.js";
import "codemirror/addon/hint/sql-hint.js";
import "codemirror/addon/hint/show-hint.css";
import "codemirror/addon/hint/javascript-hint.js";
// highlightSelectionMatches
import "codemirror/addon/scroll/annotatescrollbar.js";
import "codemirror/addon/search/matchesonscrollbar.js";
import "codemirror/addon/search/match-highlighter.js";
// keyMap
import "codemirror/mode/clike/clike.js";
import "codemirror/mode/sql/sql.js";
import "codemirror/addon/edit/matchbrackets.js";
import "codemirror/addon/comment/comment.js";
import "codemirror/addon/dialog/dialog.js";
import "codemirror/addon/dialog/dialog.css";
import "codemirror/addon/search/searchcursor.js";
import "codemirror/addon/search/search.js";
import "codemirror/keymap/sublime.js";
// foldGutter
import "codemirror/addon/fold/foldgutter.css";
import "codemirror/addon/fold/brace-fold.js";
import "codemirror/addon/fold/comment-fold.js";
import "codemirror/addon/fold/foldcode.js";
import "codemirror/addon/fold/foldgutter.js";
import "codemirror/addon/fold/indent-fold.js";
import "codemirror/addon/fold/markdown-fold.js";
import "codemirror/addon/fold/xml-fold.js";
// 编辑的主题文件
import "codemirror/theme/monokai.css";
import "codemirror/theme/base16-light.css";
export default { export default {
data () { data () {
return { return {
@ -221,9 +302,43 @@ export default {
pannelTab: 'first', // 面板信息切换值 pannelTab: 'first', // 面板信息切换值
isSelected: false, // 是否选择过项目的标识，选择了会置为true isSelected: false, // 是否选择过项目的标识，选择了会置为true
statusTimer: null, // 查询考核状态定时器 statusTimer: null, // 查询考核状态定时器
reportId: '' reportId: '',
cmOption: {
scrollbarStyle: "native",
tabSize: 2, // tab
styleActiveLine: true, // 高亮选中行
lineNumbers: true, // 显示行号
styleSelectedText: true,
line: true,
foldGutter: true, // 块槽
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true }, // 可以启用该选项来突出显示当前选中的内容的所有实例
mode: 'python',
lineWrapping: true, //代码折叠
autoCloseTags: true,// 自动闭合标签
autoCloseBrackets: true,// 自动闭合括号
// hint.js options
hintOptions: {
// 当匹配只有一项的时候是否自动补全
completeSingle: false
},
// 快捷键 可提供三种模式 sublime、emacs、vim
keyMap: "sublime",
matchBrackets: true,
showCursorWhenSelecting: true,
// theme: "monokai" // 主题
},
reportTab: '',
reportPoints: [],
reportVisible: false,
tableHeight: 0
}; };
}, },
components: {
codemirror,
quill
},
mounted () { mounted () {
// 2：竞赛，1：考核，0：练习 // 2：竞赛，1：考核，0：练习
this.projectPermissions = this.assessmentId ? this.projectPermissions = this.assessmentId ?
@ -256,6 +371,7 @@ export default {
} }
} }
this.drag() this.drag()
this.tableHeight = window.innerHeight - 360
}, },
methods: { methods: {
// 获取项目列表 // 获取项目列表
@ -319,6 +435,14 @@ export default {
this.$parent.getModelStatus(systemId) this.$parent.getModelStatus(systemId)
this.curReq = curReq // 实验要求默认全部展开，通过judgmentId来选中item this.curReq = curReq // 实验要求默认全部展开，通过judgmentId来选中item
this.points = points this.points = points
const reportPoints = JSON.parse(JSON.stringify(points))
points.forEach(e => {
e.codeResult = ''
})
this.reportPoints = reportPoints
if (points.length) this.reportTab = reportPoints[0].judgmentId + ''
console.log("🚀 ~ file: TestPanel.vue:423 ~ returnnewPromise ~ this.reportTab:", points, this.reportTab)
this.taskList = points // 实验任务 this.taskList = points // 实验任务
this.judgmentId = points[0].judgmentId // 默认取第一个判分点 this.judgmentId = points[0].judgmentId // 默认取第一个判分点
this.experimentTarget = project.experimentTarget this.experimentTarget = project.experimentTarget
@ -532,12 +656,24 @@ export default {
this.countVal = 0 this.countVal = 0
this.grade = '00' this.grade = '00'
this.pannelTab = 'first' this.pannelTab = 'first'
this.clearReport()
this.$emit('recoveryCode') // 切换实训项目后回到第一个判分点 this.$emit('recoveryCode') // 切换实训项目后回到第一个判分点
}, },
// 切换实验报告输入
toggleReport () {
this.reportVisible = !this.reportVisible
},
// 清空实验报告填写里的内容
clearReport () {
this.taskList.forEach(e => {
e.code = ''
e.codeResult = ''
})
},
// 查看实验报告 // 查看实验报告
toReport () { toReport () {
Cookie.set('doneProjectId', this.projectId) // 进入实验报告之前先存储当前项目id,从实验报告返回来后把这个id恢复 Cookie.set('doneProjectId', this.projectId) // 进入实验报告之前先存储当前项目id,从实验报告返回来后把这个id恢复
this.$router.push(`/report?reportId=${this.reportId}`) this.$router.push(`/report?reportId=${this.$store.state.reportId}`)
}, },
//重新开始 //重新开始
reload () { reload () {
@ -556,31 +692,70 @@ export default {
this.$emit('tell', this.projectId, this.curSystemId, points) this.$emit('tell', this.projectId, this.curSystemId, points)
this.$emit('recoveryCode') this.$emit('recoveryCode')
this.startCount() this.startCount()
this.clearReport()
},
// 页面加载完后重置编辑框大小
ready () {
for (let i = 0; i < this.points.length; i++) {
const code = this.$refs['codemirror' + i][0].codemirror
console.log('ready', code)
// code && code.setSize('auto', 'calc(100vh - 150px)')
code && code.setSize('auto', '300px')
}
}, },
// 提交询问 // 提交询问
confirmSubmit () { confirmSubmit () {
const isVscode = this.$parent.language // 是否选择了vscode
const { taskList } = this
const pointList = this.$parent.workbench const pointList = this.$parent.workbench
let msg = '此操作将视为结束考试，是否继续？' let msg = '此操作将视为结束考试，是否继续？'
if (pointList.find(e => !e.codeId && e.code)) msg = '有代码没有运行，该代码将不得分，确定提交？' if (!isVscode && pointList.find(e => !e.codeId && e.code)) msg = '有代码没有运行，该代码将不得分，确定提交？'
if (isVscode && !taskList.find(e => e.code || e.codeResult)) msg = '实验报告未填写，实验成绩为零，是否确认提交？'
this.$confirm(msg, '提示', { this.$confirm(msg, '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning', type: 'warning',
center: true center: true
}).then(() => { }).then(() => {
// 如果全部都没运行直接点提交，则主动运行一个空代码。（不然会造成上次运行的结果，这次进来不运行直接提交的话，会无法取到运行结果） // vscode类型的产品提交前需要自动运行每个判分点的代码以获取codeId
if (!pointList.find(e => e.codeId)) { if (isVscode) {
this.$post(this.api.runPythonCode, { const promises = []
code: '', taskList.map(async (e, i) => {
bcId: pointList[0].judgmentId, (e.code || e.codeResult) && promises.push(new Promise(async (resolve, reject) => {
cid: this.courseId, const { code, codeId } = await this.$post(this.api.runPythonCode, {
projectId: this.projectId code: e.code,
}).then(({ codeId }) => { bcId: e.judgmentId,
this.$parent.workbench[0].codeId = codeId cid: this.courseId,
projectId: this.projectId,
userAnswer: e.codeResult || null,
type: 1
})
this.$parent.workbench[i].codeId = codeId
this.$parent.workbench[i].answer = e.codeResult
this.$parent.workbench[i].retResult = 1
resolve()
}))
})
Promise.all(promises).then(_ => {
this.submit() this.submit()
}).catch(err => { }) })
} else { } else {
this.submit() // 如果全部都没运行直接点提交，则主动运行一个空代码。（不然会造成上次运行的结果，这次进来不运行直接提交的话，会无法取到运行结果）
if (!pointList.find(e => e.codeId)) {
this.$post(this.api.runPythonCode, {
code: '',
bcId: pointList[0].judgmentId,
cid: this.courseId,
projectId: this.projectId,
type: 0
}).then(({ codeId }) => {
this.$parent.workbench[0].codeId = codeId
this.submit()
}).catch(err => { })
} else {
this.submit()
}
} }
}).catch(() => { }) }).catch(() => { })
}, },
@ -632,6 +807,7 @@ export default {
localStorage.removeItem('codeCache') localStorage.removeItem('codeCache')
this.setSubmit(true) this.setSubmit(true)
clearInterval(this.statusTimer) clearInterval(this.statusTimer)
this.reportVisible = false
let list = retInfo let list = retInfo
let taskList = this.taskList let taskList = this.taskList
let score = 0 let score = 0
@ -648,6 +824,7 @@ export default {
}) })
this.grade = util.handleZero(score) // 前置加0(竞赛不显示分数) this.grade = util.handleZero(score) // 前置加0(竞赛不显示分数)
this.reportId = reportId this.reportId = reportId
this.$store.commit('setReportId', reportId)
this.editReport(reportId) this.editReport(reportId)
// 如果是竞赛，并且勾选了公布成绩详情的选项，则弹框提示 // 如果是竞赛，并且勾选了公布成绩详情的选项，则弹框提示
this.competitionId && this.resultsDetails == 0 && this.$alert('提交成功，成绩将在' + this.resultAnnouncementTime + '小时后发布，请去参赛信息模块查看', '提示', { this.competitionId && this.resultsDetails == 0 && this.$alert('提交成功，成绩将在' + this.resultAnnouncementTime + '小时后发布，请去参赛信息模块查看', '提示', {
@ -743,6 +920,7 @@ export default {
let gap = 10 // 缝隙：小于缝隙时，则吸附 let gap = 10 // 缝隙：小于缝隙时，则吸附
let parent = document.body let parent = document.body
document.querySelector('#header').onmousedown = e => { document.querySelector('#header').onmousedown = e => {
console.log("🚀 ~ file: TestPanel.vue:746 ~ document.querySelector ~ e:", e)
var x = e.clientX - el.offsetLeft var x = e.clientX - el.offsetLeft
var y = e.clientY - el.offsetTop var y = e.clientY - el.offsetTop
var left = 0 var left = 0
@ -840,11 +1018,6 @@ export default {
/deep/.el-collapse-item__header { /deep/.el-collapse-item__header {
border-bottom: none; border-bottom: none;
} }
/deep/.el-tabs__content {
margin: 0 20px;
max-height: calc(60vh - 70px);
overflow: auto;
}
/deep/.el-icon-s-ticket:before { /deep/.el-icon-s-ticket:before {
padding: 5px; padding: 5px;
font-size: 16px; font-size: 16px;
@ -852,28 +1025,33 @@ export default {
/deep/.el-collapse-item__arrow { /deep/.el-collapse-item__arrow {
margin: 0 5px 0 0; margin: 0 5px 0 0;
} }
/deep/.el-tabs__item { /deep/.info-tab.el-tabs--card {
font-size: 16px; .el-tabs__item {
} font-size: 16px;
/deep/.el-tabs--card > .el-tabs__header .el-tabs__nav { }
border: none; .el-tabs__item.is-active {
} color: #fff;
/deep/.el-tabs--card > .el-tabs__header .el-tabs__item { }
border-left: none; .el-tabs__header .el-tabs__nav {
} border: none;
/deep/.el-tabs--card > .el-tabs__header { }
border-bottom: none; .el-tabs__header .el-tabs__item {
border-left: none;
}
.el-tabs__header {
padding: 5px 20px;
border-bottom: none;
}
& > .el-tabs__content {
margin: 0 20px;
max-height: calc(60vh - 70px);
overflow: auto;
}
} }
/deep/.el-collapse { /deep/.el-collapse {
border-bottom: none; border-bottom: none;
border-top: none; border-top: none;
} }
/deep/.el-tabs__item.is-active {
color: #fff;
}
/deep/.el-tabs__header {
padding: 5px 20px;
}
.el-aside { .el-aside {
margin-bottom: 10px; margin-bottom: 10px;
color: #333; color: #333;
@ -924,7 +1102,7 @@ export default {
/deep/.el-card__body { /deep/.el-card__body {
padding: 0; padding: 0;
} }
/deep/.el-table { /deep/.task-table {
font-size: 12px; font-size: 12px;
thead { thead {
color: #fff; color: #fff;
@ -975,6 +1153,7 @@ export default {
} }
} }
.panel { .panel {
z-index: 1000;
position: relative; position: relative;
top: 200px; top: 200px;
bottom: 20px; bottom: 20px;
@ -1020,4 +1199,22 @@ export default {
opacity: 0.9; opacity: 0.9;
} }
} }
/deep/.report-table.el-table {
th {
background-color: #c6daff !important;
}
}
.report-wrap {
position: relative;
padding-top: 5px;
}
.close-report {
z-index: 2;
position: absolute;
top: -21px;
right: 296px;
font-size: 32px;
color: #c6daff;
cursor: pointer;
}
</style> </style>

12
src/components/codemirror.vue
Unescape View File

@ -397,7 +397,8 @@ export default {
code: this.sourceCode, code: this.sourceCode,
bcId: this.judgmentId, bcId: this.judgmentId,
cid: this.courseId, cid: this.courseId,
projectId: this.projectId projectId: this.projectId,
type: 0
}, { }, {
headers: { headers: {
token: this.token token: this.token
@ -465,7 +466,8 @@ export default {
code, code,
bcId, bcId,
cid, cid,
projectId projectId,
type: 0
}).then(res => { }).then(res => {
const data = res.code const data = res.code
const result = data.runResult const result = data.runResult
@ -501,7 +503,8 @@ export default {
code, code,
bcId, bcId,
cid, cid,
projectId projectId,
type: 0
}).then(res => { }).then(res => {
const data = res.code const data = res.code
const photo = data.photoUrl const photo = data.photoUrl
@ -608,9 +611,6 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.code-wrap { .code-wrap {
position: relative; position: relative;
.code-mirror {
line-height: 30px;
}
} }
.left { .left {
position: relative; position: relative;

455
src/components/quill/index.vue
Unescape View File

@ -1,17 +1,20 @@
<template> <template>
<div class="quill" ref="quill" :class="classes"> <div class="quill"
<div ref="editor" :style="styles" v-loading="loading"></div> ref="quill"
:class="classes">
<div ref="editor"
:style="styles"
v-loading="loading"></div>
<el-upload <el-upload :headers="headers"
:headers="headers" :action="this.api.fileuploadOss"
:action="this.api.fileuploadOss" :before-upload="beforeUpload"
:before-upload="beforeUpload" :on-success="editorUploadSuccess"
:on-success="editorUploadSuccess" style="display: none">
style="display: none" <el-button :id="'editorUpload' + index"
> type="primary">点击上传</el-button>
<el-button :id="'editorUpload' + index" type="primary">点击上传</el-button> </el-upload>
</el-upload> </div>
</div>
</template> </template>
<script> <script>
@ -22,236 +25,244 @@ import "quill/dist/quill.bubble.css";
import toolbarOptions from "./options"; import toolbarOptions from "./options";
import Cookie from 'js-cookie' import Cookie from 'js-cookie'
export default { export default {
name: "quill", name: "quill",
props: { props: {
value: { value: {
type: String, type: String,
default: "" default: ""
},
readonly: {
type: Boolean,
default: false
},
toTop: {
type: Boolean,
default: true
},
border: {
type: Boolean,
default: false
},
height: {
type: Number
},
minHeight: {
type: Number
},
/*
* 原本的readOnly失效,对比其他项目，发现是quill版本不同导致，
* 使用props传入elseRead = 'true'，手动隐藏工具栏
*/
elseRead: {
type: String, default: "false"
},
// 当前富文本的索引。一个页面引入多个富文本的时候会无法获取到对应的实例，所以通过在父级存储实例的方式来保存
index: {
type: Number,
default: 0
},
}, },
data() { readonly: {
const that = this type: Boolean,
return { default: false
headers: {
token: Cookie.get('admin-token')
},
Quill: null,
currentValue: "",
options: {
theme: "snow",
bounds: document.body,
debug: "warn",
modules: {
toolbar: {
container: toolbarOptions,
handlers: {
"image": function(value) {
if (value) {
// 调用iview图片上传
document.querySelector("#editorUpload" + that.index).click();
} else {
this.Quill.format("image", false);
}
}
}
}
},
placeholder: "",
readOnly: this.readonly
},
loading: false
};
}, },
computed: { toTop: {
classes() { type: Boolean,
return [ default: true
{
"quill-no-border": !this.border
}
];
},
styles() {
let style = {};
if (this.minHeight) {
style.minHeight = `${this.minHeight}px`;
}
if (this.height) {
style.height = `${this.height}px`;
}
return style;
}
}, },
watch: { border: {
value: { type: Boolean,
handler(val) { default: false
if (val !== this.currentValue) {
this.currentValue = val;
if (this.Quill) {
this.Quill.pasteHTML(this.value);
}
}
},
immediate: true
}
}, },
mounted() { height: {
this.init(); type: Number
// 处理工具栏隐藏样式
if (this.elseRead === "true") {
let children = this.$refs.quill.children[0].style;
children.padding = "0";
children.overflow = "hidden";
children.height = "0";
children.borderTop = "0";
}
}, },
beforeDestroy() { minHeight: {
// 在组件销毁后销毁实例 type: Number
this.Quill = null;
}, },
methods: { /*
init () { * 原本的readOnly失效,对比其他项目，发现是quill版本不同导致，
const editor = this.$refs.editor; * 使用props传入elseRead = 'true'，手动隐藏工具栏
// 初始化编辑器 */
this.Quill = new Quill(editor, this.options); elseRead: {
const ins = this.Quill type: String, default: "false"
// 默认值 },
ins.pasteHTML(this.currentValue); // 当前富文本的索引。一个页面引入多个富文本的时候会无法获取到对应的实例，所以通过在父级存储实例的方式来保存
if(this.toTop){ index: {
this.$nextTick(() => { type: Number,
window.scrollTo(0,0) default: 0
}) },
} // 显示工具
// 绑定事件 tools: {
ins.on('text-change', (delta, oldDelta, source) => { type: Boolean,
const html = this.$refs.editor.children[0].innerHTML; default: true
const text = ins.getText(); },
const quill = this.Quill; },
// 更新内部的值 data () {
this.currentValue = html; const that = this
// 发出事件 v-model return {
this.$emit('input', html); headers: {
// 发出事件 token: Cookie.get('admin-token')
this.$emit('on-change', { html, text, quill }); },
}); Quill: null,
// 将一些 quill 自带的事件传递出去 currentValue: "",
ins.on('text-change', (delta, oldDelta, source) => { options: {
this.$emit('on-text-change', delta, oldDelta, source); theme: "snow",
}); bounds: document.body,
ins.on('selection-change', (range, oldRange, source) => { debug: "warn",
this.$emit('on-selection-change', range, oldRange, source); modules: {
}); toolbar: {
ins.on('editor-change', (eventName, ...args) => { container: toolbarOptions,
this.$emit('on-editor-change', eventName, ...args); handlers: {
}); "image": function (value) {
// 监听粘贴事件 if (value) {
ins.root.addEventListener('paste', evt => { // 调用iview图片上传
if (evt.clipboardData && evt.clipboardData.files && evt.clipboardData.files.length) { document.querySelector("#editorUpload" + that.index).click();
evt.preventDefault(); } else {
// 检测是否粘贴的是图片 this.Quill.format("image", false);
[].forEach.call(evt.clipboardData.files, file => {
if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
return
}
const param = new FormData()
param.append('file', file)
// 把图片上传到服务器，不然会直接把base64存到数据库
this.$post(this.api.fileupload, param, {
headers: { "Content-Type": "multipart/form-data" }
}).then(res => {
var range = ins.getSelection()
if (range) {
// 在当前光标位置插入图片
ins.insertEmbed(range.index, 'image', res.data.filesResult.fileUrl)
// 将光标移动到图片后面
ins.setSelection(range.index + 1)
}
}).catch(res => {})
});
} }
}, false) }
}, }
beforeUpload(file) { }
this.loading = true;
}, },
editorUploadSuccess(res) { placeholder: "",
// 获取富文本组件实例 readOnly: this.readonly
let quill = this.Quill; },
// 如果上传成功 loading: false
if (res.data.filesResult.fileUrl) { };
// 获取光标所在位置 },
let length = quill.getSelection().index; computed: {
// 插入图片，res为服务器返回的图片链接地址 classes () {
quill.insertEmbed(length, "image", res.data.filesResult.fileUrl); return [
// 调整光标到最后 {
quill.setSelection(length + 1); "quill-no-border": !this.border,
} else { 'bd': !this.tools
this.$message.error('图片插入失败') }
];
},
styles () {
let style = {};
if (this.minHeight) {
style.minHeight = `${this.minHeight}px`;
}
if (this.height) {
style.height = `${this.height}px`;
}
return style;
}
},
watch: {
value: {
handler (val) {
if (val !== this.currentValue) {
this.currentValue = val;
if (this.Quill) {
this.Quill.pasteHTML(this.value);
}
}
},
immediate: true
}
},
mounted () {
this.init();
// 处理工具栏隐藏样式
if (this.elseRead === "true") {
let children = this.$refs.quill.children[0].style;
children.padding = "0";
children.overflow = "hidden";
children.height = "0";
children.borderTop = "0";
}
},
beforeDestroy () {
// 在组件销毁后销毁实例
this.Quill = null;
},
methods: {
init () {
const editor = this.$refs.editor;
// 初始化编辑器
this.Quill = new Quill(editor, this.tools ? this.options : []);
const ins = this.Quill
// 默认值
ins.pasteHTML(this.currentValue);
if (this.toTop) {
this.$nextTick(() => {
window.scrollTo(0, 0)
})
}
// 绑定事件
ins.on('text-change', (delta, oldDelta, source) => {
const html = this.$refs.editor.children[0].innerHTML;
const text = ins.getText();
const quill = this.Quill;
// 更新内部的值
this.currentValue = html;
// 发出事件 v-model
this.$emit('input', html);
// 发出事件
this.$emit('on-change', { html, text, quill });
});
// 将一些 quill 自带的事件传递出去
ins.on('text-change', (delta, oldDelta, source) => {
this.$emit('on-text-change', delta, oldDelta, source);
});
ins.on('selection-change', (range, oldRange, source) => {
this.$emit('on-selection-change', range, oldRange, source);
});
ins.on('editor-change', (eventName, ...args) => {
this.$emit('on-editor-change', eventName, ...args);
});
// 监听粘贴事件
ins.root.addEventListener('paste', evt => {
if (evt.clipboardData && evt.clipboardData.files && evt.clipboardData.files.length) {
evt.preventDefault();
// 检测是否粘贴的是图片
[].forEach.call(evt.clipboardData.files, file => {
if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
return
} }
this.loading = false; const param = new FormData()
param.append('file', file)
// 把图片上传到服务器，不然会直接把base64存到数据库
this.$post(this.api.fileuploadOss, param, {
headers: { "Content-Type": "multipart/form-data" }
}).then(res => {
var range = ins.getSelection()
if (range) {
// 在当前光标位置插入图片
ins.insertEmbed(range.index, 'image', res.data.filesResult.fileUrl)
// 将光标移动到图片后面
ins.setSelection(range.index + 1)
}
}).catch(res => { })
});
} }
}, false)
},
beforeUpload (file) {
this.loading = true;
},
editorUploadSuccess (res) {
// 获取富文本组件实例
let quill = this.Quill;
// 如果上传成功
if (res.data.filesResult.fileUrl) {
// 获取光标所在位置
let length = quill.getSelection().index;
// 插入图片，res为服务器返回的图片链接地址
quill.insertEmbed(length, "image", res.data.filesResult.fileUrl);
// 调整光标到最后
quill.setSelection(length + 1);
} else {
this.$message.error('图片插入失败')
}
this.loading = false;
} }
}
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.quill-no-border { .quill-no-border {
.ql-toolbar.ql-snow { .ql-toolbar.ql-snow {
border: none; border: none;
border-bottom: 1px solid #e8eaec; border-bottom: 1px solid #e8eaec;
} }
.ql-container.ql-snow { .ql-container.ql-snow {
border: none; border: none;
} }
}
.bd {
border: 1px solid #ebeef5;
} }
.else { .else {
.ql-toolbar.ql-snow { .ql-toolbar.ql-snow {
height: 0; height: 0;
overflow: hidden; overflow: hidden;
padding: 0; padding: 0;
border-top: 0; border-top: 0;
} }
} }
/deep/.ql-snow { /deep/.ql-snow {
position: relative; position: relative;
.ql-tooltip { .ql-tooltip {
position: absolute !important; position: absolute !important;
top: 10px !important; top: 10px !important;
left: 10px !important; left: 10px !important;
transform: translateY(10px); transform: translateY(10px);
} }
} }
</style> </style>

4
src/config/index.js
Unescape View File

@ -10,9 +10,9 @@ let host = location.origin + '/'
let bankPath = `${location.origin}/banksystem` // 银行系统 let bankPath = `${location.origin}/banksystem` // 银行系统
// 121.37.12.51 | 192.168.31.151 // 121.37.12.51 | 192.168.31.151
if (isDev) { if (isDev) {
host = 'http://192.168.31.152:9000/' // host = 'http://192.168.31.152:9000/'
// host = 'http://192.168.31.53:9000/' // host = 'http://192.168.31.53:9000/'
// host = 'http://121.37.12.51:9000/' host = 'http://121.37.12.51:9000/'
// host = 'https://occupationlab.com/' // host = 'https://occupationlab.com/'
bankPath = `http://${location.hostname}:8093` bankPath = `http://${location.hostname}:8093`
} else if (isPro) { } else if (isPro) {

14
src/store/index.js
Unescape View File

@ -2,7 +2,17 @@ import Vue from 'vue';
import Vuex from 'vuex'; import Vuex from 'vuex';
Vue.use(Vuex); Vue.use(Vuex);
const store = new Vuex.Store({ const store = new Vuex.Store({
state: {}, state: {
mutations: {} language: 0,
reportId: ''
},
mutations: {
setLanguage: (state, id) => {
state.language = id
},
setReportId: (state, id) => {
state.reportId = id
},
}
}); });
export default store; export default store;

38
src/styles/common.scss
Unescape View File

@ -1,7 +1,7 @@
.flex { .flex {
display: flex; display: flex;
} }
.break-all{ .break-all {
word-break: break-all; word-break: break-all;
} }
.c-p { .c-p {
@ -35,29 +35,30 @@ input::-ms-input-placeholder {
} }
body .cus-table.el-table { body .cus-table.el-table {
border-radius: 4px; border-radius: 4px;
th{ th {
background-color: #E8F0FF !important; background-color: #e8f0ff !important;
.cell{ .cell {
color: #222326; color: #222326;
font-weight: normal; font-weight: normal;
.el-checkbox{ .el-checkbox {
&:before{ &:before {
opacity: 1; opacity: 1;
} }
} }
} }
} }
th, td{ th,
td {
padding: 10px 0; padding: 10px 0;
border-bottom-color: #E1E6F2; border-bottom-color: #e1e6f2;
.cell { .cell {
font-size: 12px; font-size: 12px;
} }
} }
&.el-table--striped .el-table__body tr.el-table__row--striped td{ &.el-table--striped .el-table__body tr.el-table__row--striped td {
background-color: #FAFBFF !important; background-color: #fafbff !important;
} }
.el-button--text{ .el-button--text {
padding: 0; padding: 0;
} }
} }
@ -74,7 +75,10 @@ body .cus-table.el-table {
.pagination { .pagination {
margin: 20px 0; margin: 20px 0;
text-align: center; text-align: center;
button,.number,.more,.el-input__inner{ button,
.number,
.more,
.el-input__inner {
min-width: 32px !important; min-width: 32px !important;
height: 32px !important; height: 32px !important;
line-height: 32px; line-height: 32px;
@ -83,11 +87,15 @@ body .cus-table.el-table {
border: 1px solid #ccc !important; border: 1px solid #ccc !important;
border-radius: 2px !important; border-radius: 2px !important;
} }
button i{ button i {
color: #333; color: #333;
} }
.active{ .active {
color: #fff !important; color: #fff !important;
background-color: #007eff!important; background-color: #007eff !important;
} }
} }
.code-mirror {
text-align: left;
line-height: 30px;
}

14
src/views/Home.vue
Unescape View File

@ -60,14 +60,9 @@
:retResult.sync="item.retResult" :retResult.sync="item.retResult"
:modelIsShow.sync="modelIsShow" :modelIsShow.sync="modelIsShow"
@cache="leavePage"></codemirror> @cache="leavePage"></codemirror>
<!-- <img v-else
src="@/assets/images/vscode.png"
alt=""
width="100%"
height="700"> -->
<iframe v-else <iframe v-else
class="vscode" class="vscode"
src="https://vscode.occupationlab.com/" :src="Config.isPro ? 'https://vscode.occupationlab.com/' : 'http://121.37.12.51:8088/?folder=/home/coder'"
frameborder="0" frameborder="0"
width="100%"></iframe> width="100%"></iframe>
</el-tab-pane> </el-tab-pane>
@ -88,9 +83,11 @@ import testPanel from "../components/TestPanel";
import codemirror from "../components/codemirror"; import codemirror from "../components/codemirror";
import Cookie from 'js-cookie' import Cookie from 'js-cookie'
import { Loading } from 'element-ui' import { Loading } from 'element-ui'
import Config from '@/config'
export default { export default {
data () { data () {
return { return {
Config,
loaded: false, // 页面是否加载完的标识，页面默认隐藏，一进来先显示加载条，接口加载完后再显示页面，不然一开始会一闪而过没有样式的页面 loaded: false, // 页面是否加载完的标识，页面默认隐藏，一进来先显示加载条，接口加载完后再显示页面，不然一开始会一闪而过没有样式的页面
loadIns: null, // loading实例 loadIns: null, // loading实例
competitionId: Cookie.get('admin-competitionId'), competitionId: Cookie.get('admin-competitionId'),
@ -99,6 +96,7 @@ export default {
curriculumName: Cookie.get('admin-curriculumName') ? unescape(Cookie.get('admin-curriculumName')) : 'python', // 课程名称 curriculumName: Cookie.get('admin-curriculumName') ? unescape(Cookie.get('admin-curriculumName')) : 'python', // 课程名称
assessmentId: Cookie.get('admin-assessmentId'), // 考核id assessmentId: Cookie.get('admin-assessmentId'), // 考核id
mallId: Cookie.get('admin-mallId'), mallId: Cookie.get('admin-mallId'),
language: +Cookie.get('admin-language') || 0, // 编程语言
projectId: '', projectId: '',
systemId: '', systemId: '',
modelIsShow: false, // 导入模型按钮是否显示 modelIsShow: false, // 导入模型按钮是否显示
@ -113,7 +111,6 @@ export default {
name: 'Vscode' name: 'Vscode'
}, },
], ],
language: 0, // 编程语言
curTab: '', // 选中后绑定的对象 curTab: '', // 选中后绑定的对象
workbench: [], // 判分点切换列表 workbench: [], // 判分点切换列表
codeKey: 1 // 编辑器索引 codeKey: 1 // 编辑器索引
@ -174,7 +171,8 @@ export default {
}, },
// 编程语言选择回调 // 编程语言选择回调
languageChange (id) { languageChange (id) {
Cookie.set('admin-language', id)
this.$refs.mainindex.reportVisible = false
}, },
// 跳转我的数据 // 跳转我的数据
toData () { toData () {

Write Preview
Loading…
Cancel
Save